feat(create): rebuild builder panel as "Lens"#291
Conversation
Replace the /create left panel (CustomizerPanel) with a ground-up redesign — "Lens" — a single zoomable rail where every card shows a live readout of its own output collapsed and its full controls expanded. Essentials ⇄ Everything is a pure view toggle over one shared design system, serving the quick founder and the pro design engineer from the same surface (UI-focused experiment). New module www/src/modules/create/builder/: - identity bar (name, brand mark, contrast-health dot, two-stack undo/redo over ?preset=, mode, ⌘K) - Brand + Color (Tonal⇄Flat foundation) + Color lab drill, plus typography/shape/density/elevation/motion/interaction/icons/modes - Components: synced-group accordion + anatomy drill with shared-enum fan-out - ⌘K command palette, export dock, honest live/stub binding dots Reuses the real color engine, config widgets, and registry. No engine, ColorConfig, or registry-param changes. The old customizer-panel.tsx is now unreferenced.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Bugbot couldn't run - usage limit reachedBugbot 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_181cd796-30ae-4746-9418-830a345ea3aa) |
Bugbot couldn't run - usage limit reachedBugbot 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_3d8415d3-8089-488d-aa04-3e9320f5e6b4) |
Summary
/createleft panel (CustomizerPanel) and replaces it with a ground-up redesign — "Lens" — in a newwww/src/modules/create/builder/module. UI-focused experiment (no engine/logic changes).What's in it
?preset=, mode toggle, ⌘K command palette (search every control → jump-and-flash).Requirements coverage
Reviewer notes
--ds-*stub vars and is flagged with a hollow binding dot. Flat foundation and the stub axes are UI-complete but not yet wired to the preview (engine work + axis sign-off needed per CLAUDE.md).menus-liststoday, sincebuttonetc. have noparamsin the registry yet) — safe, never mis-writes.customizer-panel.tsxis now unreferenced (left in place for easy rollback)./docstoo); a clean client-side remount of the builder is warning-free.pnpm typecheck,pnpm check(lint + format) are green. No__generated__changes (registry untouched).Verified in-browser
Applying a vibe recolors the entire live preview + updates the export
?preset=; Color lab renders real ramps + WCAG report; Tonal⇄Flat morph; synced fan-out ("Highlight · applies to 2"); ⌘K search/jump; Essentials/Everything. No builder console errors.Note
Medium Risk
Large UI surface on the primary
/createroute and custom undo/redo over URL preset state; design-system mutations still go through existing APIs, but regressions in navigation, history, or panel wiring would affect all builder users.Overview
Replaces
CustomizerPanelon/createwith a newbuilder/module (“Lens”): a collapsible aspect-card rail (live readouts when collapsed, full controls when expanded), Essentials ⇄ Everything as a view-only expand/collapse toggle, and slide-over drills for Color lab and synced component groups.Adds a route-owned top bar (
CreateTopBar) with system name, contrast dot, custom undo/redo over?preset=, ⌘K command palette (jump + flash), and detail mode—while_app/route.tsxhides the globalHeaderon/createso the builder owns the chrome.BuilderUiProviderpersists panel chrome inlocalStorage, separate from the design system in the URL.Foundation cards reuse existing live setters (color, radius, density, cursors, component params); many axes write
--ds-*stub tokens with live vs stub binding dots. Color adds tonal vs flat foundation (flat UI-only for preview), Color lab, and WCAG contrast health. Components card adds shared-enum fan-out across registry groups. Footer keeps export + planned targets.create.tsxwraps the default experience in the provider and swapsBuilderPanelfor the old panel;?labstill usesLabExperiencewith a minimalCreateLabTopBar.Reviewed by Cursor Bugbot for commit de927a3. Bugbot is set up for automated code reviews on this repo. Configure here.