feat(create): add opt-in studio builder redesign

[mehdibha]

What

An experimental, opt-in rethink of the /create builder at /create?studio=true. The shipped editor and the ?lab experience are untouched — this adds a third, parallel experience behind its own flag (same pattern as lab).

This is a UI/UX exploration ("do only the UI"). It reuses the real design-system state and preview, but the brand-new axes are interactive controls only — not yet wired to live tokens.

Why

Today's panel is a 288px slide-stack: every axis is buried behind a back button, controls are cramped, undo is invisible, there's no front door for "just make it look like X", and ~half the axes a real design system needs (elevation, motion, surfaces, focus, spacing) are missing. This explores a canvas-first direction that scales to far more tweaks while staying navigable.

The direction

A canvas-first design tool on a macro → micro spine:

• Persistent axis rail replaces the slide-stack — every axis is one click away (the rail is the IA).
• Wider inspector (320px) so sliders, swatches, and segmented controls breathe.
• Style front door (the macro layer): an AI prompt, vibe presets, and the highest-leverage knobs (accent / radius / density). Each rail icon drops to the micro layer.
• Docked AI bar under the canvas for always-on, conversational refinement.
• Visible undo carried over from the shipped panel.

New axes (the "do anything" breadth)

Beyond the existing color / type / icons / radius / density / cursor / charts (all reused as-is): elevation, motion (duration, easing/spring with a play demo, reduced-motion), surfaces (translucency, blur, background style), focus (ring/outline/glow), states (hover/press/transition), plus shape (corner style, border width, hairlines) and spacing (base unit, rhythm, control height) depth.

AI, woven in (there's none in the product today)

• Prompt → system: describe a brand / paste a URL / drop a screenshot → sets accent, radius, and density at once, with an "AI set" changelog. (This one is live — it really restyles the preview.)
• Conversational refine (docked bar): "more contrast", "softer corners", "tighter density", "surprise me" → live deltas.
• Per-axis "suggest", health/critique, and image→tokens are stubbed in the UI as the next layer.

Reuse / safety

• Composes the existing ColorsConfig, TypographyConfig, ChartColorsConfig, component editors, ExportFooter, CodeOptionsDialog, and the preview iframe — no duplication of working axes.
• No www/src/registry/ changes → no registry/reference drift. New code is www-side only (modules/create/studio/ + one route guard).
• Desktop-first: below lg it shows a "use a wider screen" notice rather than cramming the 3-zone layout.

Verification

• pnpm typecheck ✅ · pnpm check ✅ (0 errors, 0 new warnings, formatting clean)
• SSR returns 200 at /create?studio=true with no server errors; all panels render.
• Smoke-tested in a headless browser at 1440×900: the rail switches panels, vibe/prompt clicks restyle the live preview, and the "AI set" changelog appears.

Follow-ups (not in this PR)

• Wire the new axes to live tokens / new semantic vars (each is a product decision per CLAUDE.md).
• Replace the keyword-matched "AI" with a real model call (prompt→system, refine, suggest, critique).
• A mobile layout; ⌘K command palette; named checkpoints / history.

---

Note

Low Risk
Opt-in behind ?studio=true, www-only with no registry changes; default /create behavior is preserved aside from the intentional header swap for a builder-specific top bar.

Overview
Adds an opt-in canvas-first builder at /create?studio=true (alongside unchanged default and ?lab), plus layout tweaks so /create no longer shows the global site header.

Studio shell is a three-zone desktop layout: persistent axis rail, 320px inspector (reuses existing color/type/components/export panels; new elevation/motion/surface/focus/states panels are interactive UI stubs with dashed “not wired yet” notes), and live preview with a docked AI refine bar. Studio top bar adds undo (preset history stack), re-roll, and “Ask dotUI” (⌘K focuses the AI input via a small ai-focus bridge). Below lg, studio shows a “use a wider screen” message instead of cramming the layout.

Style / “AI” layer (keyword-driven, not a real model): vibes and prompts map to accent/radius/density through existing setDesignSystem; the docked bar’s applyDelta tweaks density, radius, contrast algorithm, shuffle, etc., with a short chat log.

Default and lab now render CreateTopBar (logo, GitHub, theme) because _app/route.tsx hides the global Header on /create so builder variants don’t stack two bars.

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: b7bc8e4

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:03pm

[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_7d513367-0fcc-45a6-b333-a7c3bdae7775)

[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_b121ad59-69f0-48bc-ad08-8c64b7a6185c)