feat(create): redesign /create left panel as Studio

[mehdibha]

What

Removes the old CustomizerPanel and rebuilds the /create left panel as a new Studio module — one control surface designed to take a user from a brand to a complete, on-brand component library, fast or deep.

UI-only experiment. Live axes genuinely drive the preview; new axes are captured design intent (honest Live dots throughout). The ?lab=true prototype is left untouched.

The experience

• Simple ⇄ Pro posture switch — the two audiences in one surface.
• Brand front door — seed one colour → live, contrast-checked ramps for every palette; extract from a logo (client-side average-colour grab) or paste a palette; 8 vibes (each a coherent whole-system reskin, one undo step); Surprise me.
• Color editor, 3 modes — Auto (1 seed) · Guided (algorithm + engine knobs) · Manual (every seed, status families, generated ramps, "expose palettes as tokens"), with a live WCAG contrast readout.
• 10 foundations (Color, Typography, Shape, Spacing, Elevation, Motion, Icons, Interaction, Light/Dark, Chart) — each a card with a live summary → slide-in deep editor. Captured-intent editors render real in-panel previews (typography weight/scale/tracking, CSS shadow/blur tiles, a motion replay, icon stroke) so nothing feels dead.
• Components browser — grouped, searchable, synced-family aware (editing Color Swatch shows it also applies to Color Swatch Picker); opening a component swaps the preview.
• ⌘K command palette — jump to any foundation, component or macro.
• Footer — Code style (Pro) + existing shadcn/v0 export, URL baked live from the preset.

Reuses useDesignSystem, the OKLCH colour engine (ColorKnobsControls, ContrastReadout, resolveColorConfig), ComponentDetailView, ChartColorsConfig, CursorConfig and the export footer — the proven deep logic is untouched.

Why

Maps the product north star onto the builder's primary surface: seed one colour and walk away with a system, or control every axis and every component — without two separate UIs. See docs/research/2026-06-27-create-studio-redesign.md for the full design write-up and requirement mapping.

Notes for reviewers

• New module: www/src/modules/create/studio/. Route swap: routes/_app/create.tsx renders <StudioPanel>. Old customizer-panel.tsx deleted (no remaining refs).
• No www/src/registry/ changes, so no __generated__ regeneration.
• Live in the preview: colour seeds/algorithm/knobs, radius, density, cursors, chart palette, per-component params. Captured intent (ship on export, no iframe consumer yet): typography, elevation, motion, icons, modes, focus ring, spacing scale, expose-palettes — wiring these into the iframe + real font loading is preview/publisher work, deliberately out of this UI pass.
• Fixed a render-phase setState (the store called the router navigate inside a setStack updater).
• New vibes and the captured-intent axes are proposals within this experiment, not a commitment to ship those tokens.

Verification

• pnpm typecheck ✅ · pnpm check ✅ (2 pre-existing warnings in test/script files).
• Browser-verified in desktop dark, desktop light, and mobile (375px): vibe → preview accent/radius/density + export URL; all 3 colour modes; per-component sync banner + editor; ⌘K palette; in-panel previews; no recurring console errors.

---

Note

Medium Risk
Large UX swap on the primary /create route with new navigation (URL panel no longer drives the left stack) and many new preset tokens; core preset/export paths are unchanged and ?lab=true is preserved.

Overview
Replaces the deleted CustomizerPanel with a new studio/ module on /create: StudioTopBar (builder chrome) + StudioPanel (home, slide-in editors, export footer), wrapped in StudioProvider. The global site Header is hidden on /create (except ?lab=true).

Studio adds a Brand front door (seed colour, live ramps, image/palette extract, 8 vibes, surprise me), Simple/Pro posture, a single FOUNDATION_INDEX registry driving home cards, ⌘K palette, and detail views, 10 foundation editors (colour Auto/Guided/Manual reusing existing colour engine), a grouped components browser with synced-family banners, and Live dots for preview vs export-only tokens. Navigation stack and system name live in React state (not ?panel=); opening a component still syncs ?preview=.

Existing useDesignSystem, export, and deep config UIs are reused; many new --ds-* stub tokens persist intent without iframe consumers yet. Adds docs/research/2026-06-27-create-studio-redesign.md.

^{Reviewed by Cursor Bugbot for commit 95afe51. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 95afe51

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dotui	Ready	Preview, Comment	Jun 27, 2026 11:05pm

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_bac97b32-d106-40be-9a78-912930e68d77)

[cursor]

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: serverGenReqId_6ccec5ce-2245-4d1d-950c-5e93ab27b9dc)