feat(create): add AI-native Studio builder experiment

[mehdibha]

Experiment. A canvas-first, AI-native rethink of /create, opt-in behind ?studio=true. The shipped builder and the ?lab panel experiment are untouched.

What & why

The shipped /create is a fixed ~288px control panel beside a preview. Studio inverts that into a canvas-first layout where the live preview is the hero and everything else is contextual, and adds an AI copilot as a first-class input method — the direction the product wants (the builder should let you "make anything", and AI is the fastest path there).

Try it: pnpm dev:www → /create?studio=true.

┌─ top bar ── ◆ name · STUDIO ──┊ ✦ Ask AI to change anything (⌘K) ┊── inspect · ☾ · Export ─┐
│ dock │  inspector  │              CANVAS (live preview, hero)            │   AI COPILOT       │
└─ status bar ── ● Live · WCAG AA 6/6 · radius · density · N customizations ──── 🎲 Surprise me ─┘

Highlights

• Canvas-first shell — a thin domain dock + a collapsible inspector on the left, the live preview centered as the hero, an AI copilot on the right, and a system-health status bar (live binding, real WCAG pass rate, radius/density, customization count). The inspector reuses the panel-lab control widgets (already wired to the live design system) with its own row chrome, and stays mounted across domain switches — content swaps in place (the Figma/Linear feel).
• AI copilot + omnipresent ⌘K command field — natural-language prompts (warmer, feel like Linear, teal brand, more contrast, surprise me) mutate the same live design-system state the manual controls edit, so the preview re-themes instantly. Each turn is undoable. Also: proactive WCAG contrast insight on the generated palette, and "generate from" image / URL / screenshot demos.
• New experimental axes — Brand expression, Surface & texture, Accessibility, Interaction states (~18 controls), authored as honest --ds-* stub tokens (hollow binding dot = "UI only for now"), exactly like the existing lab. They prove the shape of a complete builder.

Notes for reviewers

• UI only / no model. The copilot's "AI" is a local, simulated intent parser (studio/ai/engine.ts) — no network, no keys — that returns an Action[] shape a real model call can later produce. The mutations it makes are real and live, though.
• Isolated. www-side only; no registry/publisher changes. Gated behind ?studio=true with the same contract as ?lab. The only edits outside the new studio/ module are the studio flag in routes/_app/create.tsx and four studio-only members added to the Domain union in panel/types.ts.
• New tweaks are explicitly experimental and stubbed, not wired into export — surfaced for the product discussion, not shipped.
• pnpm typecheck and pnpm check pass.
• Spotted separately: the existing panel lab (?lab) has a latent text-primary-fg typo (no backing token → invisible active sidebar icon + personality pill); not fixed here to keep this diff focused.

Verified

feel like Linear → indigo brand #5E6AD2 + radius 0.5 + compact, with reply + undo. warmer → hue shifted toward magenta and the live preview's selected date turned violet. Domain switching (Color → Surface) renders the new tweaks cleanly.

---

Note

Low Risk
WWW-only, feature-flagged behind ?studio=true, with no registry/publisher changes; AI edits use the same preset path as existing controls, with per-turn undo.

Overview
Adds an opt-in /create?studio=true experiment: a canvas-first builder shell that leaves the shipped /create and ?lab flows unchanged.

Studio layout centers the existing live PreviewPanel, with a domain dock, slide-in inspector (reuses panel-lab control widgets + new row chrome), top bar (identity, ⌘K AI field, inspect, theme, export), status bar (WCAG pass rate, radius, density, customization count), and a collapsible AI copilot. Inspect mode overlays hotspot pins on the canvas to jump to token domains without iframe coupling.

AI layer is fully local: interpret() maps prompts to Action[] mutations on the same DesignSystem as manual controls (named looks, adjectives, color words, “surprise me”), plus rotating “generate from” image/URL/screenshot demos. Copilot turns are undoable via URL preset snapshots. WCAG contrast insight can switch the color algorithm to contrast.

New experimental domains (brand, surface, a11y, states) extend the Domain union and add ~18 stub --ds-* controls in tweaks.tsx, merged into studio-only section ordering.

Routing: studio coerced boolean on create search; app layout hides the global header on studio create so Studio’s top bar owns the viewport.

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: c3d1eef

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

[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_8684d772-ee60-4cc5-949c-ec59e7f2db75)

[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_803003ff-f798-442c-ac36-01301b7be285)