feat(create): redesign the left panel as a Studio builder

[mehdibha]

What

Replaces the /create left panel (CustomizerPanel) with Studio — a redesigned, end-to-end design-system builder. Experimental, UI-first redesign of the whole customization surface.

The panel is organized by the tier axis (token altitude), one of dotUI's three grouping axes (domain | tier | tempo):

• Brand — the front door: drop one brand color (or tap a starter swatch / "Surprise me") and the accent + neutral tonal ramps regenerate live below it; six whole-system vibe presets (Minimal, Vivid, Material, Editorial, Playful, Corporate) each apply accent + algorithm + radius + density in one click.
• Primitives — the raw token values: brand/base/status seeds, generation algorithm, the live generated ramps, fonts + type scale, radius, density, border, spacing, icon library + stroke.
• Semantic — how values acquire meaning: gray strategy (pure ⇄ brand-tinted), palette foundations (tonal ramps ⇄ semantic-only), contrast + ramp tuning, cursors, focus ring, elevation/shadow/blur, motion, default mode.
• Components — the per-component override layer (synced groups, switches the live preview on select).

Cutting across all of it: a Simple / Pro depth switch (the tempo axis), command search over every control, and the existing Code style + export footer.

How it maps to the brief

Goal	Where
Seed one color → complete system	Brand: the seed drives live accent + neutral ramps through the real color engine
Decide how the color system is built	Primitives: strategy of seeds + generation algorithm; Semantic: gray strategy, contrast, ramp knobs
Palettes or not as foundations	Semantic → Palette foundations: tonal ramps vs semantic-only
Tweak a specific component	Components browser (reuses the real per-component param editor)
Quick clean output or deep tweaking	Simple/Pro switch gates depth per section

Honesty

Every control carries a live/stub dot (carried over from the panel lab). Live (real useDesignSystem() engine): seeds, algorithm, ramps, gray strategy, contrast, radius, density, cursors, component params. Stub (UI-only, writes a --ds-* token but no preview consumer yet, clearly marked): fonts, type scale, border, spacing scale, elevation, motion, icon stroke, focus ring, default mode, palette-foundations. These are honest placeholders, not newly-shipped product axes.

Verification

• pnpm typecheck — green
• pnpm check — green (0 errors; the 3 warnings are pre-existing in unrelated files)
• No registry source touched, so no registry/reference drift.
• ⚠️ Live in-browser preview was not runnable: this worktree's dev server 500s every route on a pre-existing @/registry/__generated__/publishables resolution error (reproduces on / with original code; unrelated to this change). Verified statically instead.

Notes

• Directly replaces the shipped panel (per the experiment brief). Happy to gate it behind a ?studio flag instead if preferred.
• The ?lab=true panel-lab path is untouched.
• One of several parallel /create redesign explorations.

---

Note

Medium Risk
Large UX swap on the default /create path (panel param semantics and primary navigation change) with broad preset-editing surface, though it still goes through existing useDesignSystem and URL preset persistence.

Overview
Replaces the shipped /create left panel by deleting CustomizerPanel and wiring StudioPanel instead. Navigation moves from a dot-separated stack (panel=a.b.c) to flat section IDs (Brand → Primitives → Semantic → Components) driven by a new studio/ module.

The new surface adds an icon rail, command search over sections/keywords, Simple vs Pro depth (via StudioModeProvider / usePro), and reuses existing code options + export in the footer. Brand is new entry UX: live seed picker, starter swatches, and whole-system “vibe” presets (color + algorithm + radius + density). Primitives / Semantic reorganize prior color, layout, cursor, typography, and icon controls along token tiers, with live vs stub dots on controls. Components is a flat list + in-panel detail (local state) that still updates ?preview= when an example exists.

Builder chrome is split out: StudioChromeProvider owns undo history on ?preset=, shuffle, reset, and Pro mode; CreateTopBar exposes Simple/Pro, surprise-me, undo, and reset. _app/route.tsx hides the global Header on /create so the builder bar does not stack under site nav. ?lab=true still mounts LabExperience inside the same provider.

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: f13bc05

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 10:57pm

[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_b63f55b3-4ec7-47ea-a566-3721f2be56a0)

[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_6089c490-19d1-41ec-abd2-6046de60f005)