feat(create): rebuild the builder as an expand-in-place Spine

[mehdibha]

What

Removes the old /create left panel (customizer-panel.tsx and the in-progress panel/ lab) and rebuilds the experience from scratch as Bloom — a single, never-reloading column ("the Spine") that grows from one decision to two hundred. New module: www/src/modules/create/builder/. The live-preview canvas is unchanged.

UI-only experiment. Real axes drive the live preview; proposed axes are surfaced honestly via binding dots and are not wired into the publisher/export.

Why

The brief: feed a brand, walk away with a complete, on-brand component library you can open anywhere — serving two moods at once (clean output fast and tweak every detail), with control over any axis (seed one colour → full system, decide how the colour system is built, expose palettes as foundations or not, tune any component). The design was chosen via a multi-agent judge-panel (5 independent visions → 15 adversarial judges → 1 synthesized blueprint); Bloom won and grafted the best of the runners-up.

Highlights

• Brand intake first-run — seed one colour and watch the full system bloom in (real resolveColorConfig ramp + auto-derived status seeds), or feed URL / logo / vibe / starter. Collapses into a header provenance chip.
• Expand-in-place Spine — one-open accordion; every row is a live spec-sheet summary collapsed and its own inspector expanded. No stack/back navigation.
• Two speeds, one surface — non-destructive Simple ⇄ Advanced on the deep axes; settable ⌘K palette teleports to (and sets) anything.
• Colour system — seeds with AUTO ghost states, plain-language algorithm relabel, knobs, generated ramps, contrast guard + one-tap "nudge to AA", and an expose-palettes-as-foundations switch that blooms editable per-ramp rows.
• All axes — typography, icons, density, radius, borders, elevation, motion, interaction, appearance, chart colours.
• Per-component — searchable grouped list; synced groups (e.g. Button ⇄ ToggleButton) fan edits out atomically via the new setGroupParam.

Wired vs proposed

• Live (drives preview + export): colour seeds/algorithm/knobs, density, radius, cursors, per-component params + synced-group fan-out, chart colours, code-style, export targets, undo/shuffle.
• Proposed (polished UI, hollow binding dot, no token consumer yet — never silently shipped per CLAUDE.md): typography fonts/scale/base, icon library/stroke, border width, elevation family/shadow/blur/translucency, motion, focus-ring, default mode, context-aware tokens. They write to --ds-* vars and go live the moment a component reads one.

Plumbing (outside builder/)

• preset/use-design-system.ts — added setGroupParam(members, param, value) (atomic group fan-out, single undo entry).
• components/index.tsx — exported getComponentsInGroup, getComponentMeta, getSyncedGroup, allGroups.
• routes/_app/create.tsx — swapped the panel for BuilderPanel; dropped the panel/lab search params.

No registry source changed → no generated drift.

Verified

First-run intake + birth animation, starter recolouring the live preview, Build → Spine, toggle/accordion, expand-in-place content, AUTO ghost seeds, synced-group fan-out, palettes bloom, ⌘K open + jump, export footer reflecting the live preset. pnpm typecheck + pnpm check green.

Reviewer notes

• Third independent /create rebuild in the ongoing bake-off; this one lives in builder/ (not studio/) so it doesn't collide with the sibling studio branches, but it does replace the default /create route (the old panel is deleted).
• Most registry components expose no builder params (~22 do); per-component depth is registry-limited, not UI-limited.
• Full write-up: docs/research/2026-06-27-create-builder-redesign.md.
• Deferred (non-essential): pin-to-compare, minimap gutter, collapsed rail, mobile-specific reflow (mobile uses the existing customize/preview pane toggle).

---

Note

Medium Risk
Large UX swap on the primary /create route and removal of the old panel/lab paths; preset/undo behavior moved to the page layer but still URL-backed.

Overview
Replaces the default /create left panel by deleting customizer-panel.tsx and the entire panel/ lab (?lab), and shipping a new builder/ module: brand intake (color/URL/logo/vibe/starters), a single-column Spine with expand-in-place accordion rows, foundation axes + searchable components, and a ⌘K command palette.

The create route now uses a dedicated CreateTopBar (shuffle, undo, ⌘K, system name) instead of the global site header on /create; panel / lab search params are removed. Undo/shuffle and first-run intake live on the page and sync with the panel.

Plumbing: setGroupParam for atomic synced-component edits (one undo step); component registry helpers exported for the builder; live vs proposed (--ds-*) axes marked with binding dots (stub controls do not affect export until wired).

Adds research doc docs/research/2026-06-27-create-builder-redesign.md. Preview canvas unchanged; no registry source changes.

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

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7fad9fb

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

[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_4eb147c0-580f-4eee-89f1-6aad8be1f7c7)

[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_f96fba2d-5c5a-403c-84d2-d78507b1fff9)