Studio guide (HTML)
Plan: Studio editor polish
Readable in the browser. Use Print / Save PDF for a PDF copy. Source.md stays on PC for editing only.
Plan 1 Studio website editor: full polish & prove it works
Audience: You (100 Club Studio / IT)
Goal: Make the live site editor (cms.html / Site Builder) feel production-solid: every brand mode works, no mystery failures, publish is safe, canvas matches what customers see.
Not this plan: Client brand desks, Academy course, Stripe/Cloudflare (separate).
Related (already shipped): PLAN-STUDIO-QOL.md Q0 Q5 · STUDIO-EDIT-SITES.md · SMOKE-STUDIO-QOL.md
Why a second plan
QOL (import wizard, publish backup, mode badges) is in. This plan is the hardening pass:
| Before (QOL) | After (this plan) |
|---|---|
| Features exist | Features verified on every live brand |
| “Should work” | Signed smoke matrix + known bugs closed |
| Import/publish feel friendly | Editor edit quality matches live look |
| Docs exist | Day-to-day HTML guide + one “green” checklist |
Modes you must trust (no guessing)
| Mode | Brands (typical) | Primary action | Risk if wrong |
|---|---|---|---|
| Exact / live files | Often KJ, Moose, Mikiki, 100 Club | Save writes live | Bad save = live broken |
| Imported draft | After Import | Publish to live website | Publish without backup |
| Needs import | Live folder, empty/stale draft | Import site… first | Editing blank/wrong draft |
| CMS only | Lab / demos | Publish inside Studio | Confusing Import button |
Success: open any brand → mode pill + fleet badge + buttons agree in under 2 seconds.
Principles
- Live site is sacred Import never writes live; Publish/Save always backup first where applicable.
- What you see is what ships Canvas fonts/CSS/images close enough that you don’t need a second tool to “check the real site” for every typo.
- Fail loud Broken image paths, missing folder, publish skip: report lists file + reason.
- One green matrix KJ · Moose · Mikiki · 100 Club · Lab all ticked or explicitly N/A.
- No rewrite of the builder Polish and fix
cms-studio.js/lib/cms.js/ bridges; do not rebuild Wix.
Workstreams
E0 Baseline audit (half day)
| # | Task | Done when |
|---|---|---|
| E0.1 | Run SMOKE-STUDIO-QOL.md end-to-end after portal restart + hard refresh | Sheet filled |
| E0.2 | Note mode badge per brand (Websites + Builder) | Table in smoke notes |
| E0.3 | Confirm live folder links (nginx brand roots) for each real site | Paths known |
| E0.4 | List top 5 friction bugs (canvas, save, publish, switcher) | Bug list in plan appendix |
Output: docs/SMOKE-STUDIO-EDITOR.md results dated + bug list prioritized P0/P1/P2.
E1 Mode clarity & fleet (must be perfect)
| # | Task | Detail |
|---|---|---|
| E1.1 | Mode pill vs buttons | Exact: Save primary; Imported: Publish primary; Needs import: Import only CTA |
| E1.2 | Websites fleet | Badge + Open Builder + last publish/save time if available |
| E1.3 | Site switcher in Builder | Mode chip next to every brand name |
| E1.4 | Cache bust | Bump cms.html / cms-studio.js / CSS ?v= after changes |
Done when: You never open the wrong mode by accident.
E2 Import path reliability
| # | Task | Detail |
|---|---|---|
| E2.1 | Wizard regression | Scan → pick 2 pages → full import → report counts |
| E2.2 | Undo last import | Restores draft only; live unchanged |
| E2.3 | Re-import warning | Clear replace copy when draft already exists |
| E2.4 | Zero-page / missing folder | Toast + next step (“link site folder / check nginx root”) |
| E2.5 | Large brand | Mikiki/KJ full import does not freeze UI (progress honest) |
Done when: Import is boringly predictable on all folder brands.
E3 Edit quality (canvas matches live)
| # | Task | Detail |
|---|---|---|
| E3.1 | Head assets | Fonts/CSS from live import still apply in canvas per brand |
| E3.2 | Relative images | Broken paths listed in inspector (cap list already exists verify UI) |
| E3.3 | Selection | Click text/block selects reliably; less “dead” clicks |
| E3.4 | Imported HTML blocks | Inspector note: nav/footer baked vs Themes panel |
| E3.5 | Exact live-edit | Click-to-edit on exact mode saves correct file |
| E3.6 | Preview | Open live site + in-Studio preview both usable |
Done when: Fix a headline on home for one brand without leaving Studio.
E4 Save / Publish / Rollback
| # | Task | Detail |
|---|---|---|
| E4.1 | Exact Save toast | “Saved · live files…” + .bak-studio exists |
| E4.2 | Draft Save toast | “Saved · Studio draft only…” |
| E4.3 | Publish confirm | Mentions LIVE + backup |
| E4.4 | Publish report | Written / skipped / failed + backup id |
| E4.5 | Rollback | List backups → restore → live HTML reverts |
| E4.6 | Never auto-publish on import | Explicit check |
Done when: Intentional bad publish is reversible in < 2 minutes from Studio UI.
E5 Daily QOL & polish
| # | Task | Detail |
|---|---|---|
| E5.1 | Empty state CTA | Needs import → big Import CTA (not blank canvas only) |
| E5.2 | Keyboard | Esc closes modals; Enter runs Import when selection valid |
| E5.3 | Narrow width | Import + Publish reachable on laptop/tablet |
| E5.4 | Error toasts | Actionable (“Scan again”, “Check SMTP” not relevant here) |
| E5.5 | Help link | Banner → studio-edit-sites (HTML guide) |
E6 Brand matrix (proof)
Run the same scripted checks on each:
| Brand | Mode | Import | Edit text | Save or Publish | Live check | Rollback / undo |
|---|---|---|---|---|---|---|
| Lab | CMS only | N/A | ☐ | Publish CMS ☐ | Preview ☐ | N/A |
| KJ Cosmetics | ☐ | ☐ | ☐ | ☐ | ☐ | |
| Moose Mechanical | ☐ | ☐ | ☐ | ☐ | ☐ | |
| Mikiki Customs | ☐ | ☐ | ☐ | ☐ | ☐ | |
| The 100 Club | ☐ | ☐ | ☐ | ☐ | ☐ |
Optional: Union Street / other fleet rows if present.
Done when: Table is all pass or justified N/A no “didn’t try.”
E7 Docs & guides (HTML/PDF)
| # | Task |
|---|---|
| E7.1 | Expand STUDIO-EDIT-SITES.md with troubleshooting from E0 bugs |
| E7.2 | New SMOKE-STUDIO-EDITOR.md = this matrix + critical path |
| E7.3 | Rebuild studio-guides HTML/PDF (node scripts/build-studio-guides-html.js) |
| E7.4 | Point admin Help / Builder banner at HTML guide (not only .md) |
Priority order
| Order | Stream | Why |
|---|---|---|
| 1 | E0 audit | Know what’s actually broken |
| 2 | E1 mode clarity | Stops self-inflicted live mistakes |
| 3 | E4 publish safety | Client sites depend on it |
| 4 | E2 import | Path into the editor |
| 5 | E3 edit quality | Day-to-day value |
| 6 | E5 QOL | Speed |
| 7 | E6 E7 matrix + docs | Lock it in |
Out of scope
- Full page-builder rewrite / drag layout engine parity with Webflow
- Editing sites that only exist on a remote host (no local folder)
- Client-facing CMS for brand owners (unless already feature-flagged)
- Academy / Brain content (see Plan 2)
- Stripe webhook / Cloudflare (Phase 6)
Implementation map
| Area | Paths |
|---|---|
| Builder UI | public/cms.html, public/js/cms-studio.js, public/css/cms-studio.css |
| Bridges | public/js/cms-exact-bridge.js, cms-preview-bridge.js |
| Backend | lib/cms.js, server.js /api/cms/* |
| Fleet | public/admin.html, public/js/admin-desk.js / portal.js |
| Backups | data/publish-backups/, data/cms-snapshots/ |
| Help | public/studio-edit-sites.html, docs/STUDIO-EDIT-SITES.md |
Success look & feel
> Studio → Websites → Mikiki badge Imported → Builder → edit hero line → Publish to live website → backup id shown → open live site → change is there.
> Mistake → Rollback… → home restored.
> KJ in Exact mode → Save → live file updated with bak side file.
> You do this weekly without fear.
Estimate (rough)
| Stream | Effort |
|---|---|
| E0 | 2 4 h |
| E1 + E4 fixes | 0.5 1.5 d |
| E2 + E3 | 1 2 d |
| E5 E7 | 0.5 d |
| Total | ~2 4 working days depending on bugs found in E0 |
Next step after you approve Plan 1
Start E0: restart portal, hard-refresh Builder, run QOL smoke on one live brand + lab, file P0 bugs, then fix E1/E4 first.