Skip to content

feat(create): rebuild builder panel as "Lens"#291

Open
mehdibha wants to merge 2 commits into
mainfrom
claude/priceless-khayyam-573cd9
Open

feat(create): rebuild builder panel as "Lens"#291
mehdibha wants to merge 2 commits into
mainfrom
claude/priceless-khayyam-573cd9

Conversation

@mehdibha

@mehdibha mehdibha commented Jun 27, 2026

Copy link
Copy Markdown
Owner

Summary

  • Removes the entire /create left panel (CustomizerPanel) and replaces it with a ground-up redesign — "Lens" — in a new www/src/modules/create/builder/ module. UI-focused experiment (no engine/logic changes).
  • One zoomable rail: every card shows a live readout of its own output when collapsed, full controls when expanded. Essentials ⇄ Everything is a pure view toggle over one shared design system — quick founders ship from glanceable cards; pros expand the same cards + drill the two heavy editors. No "beginner mode" the pro has to redo.
  • Design direction chosen via a 4-lens multi-agent workflow → synthesize → adversarial critique, then built and the critique's must-dos folded in.

What's in it

  • Identity bar — system name, brand mark, contrast-health dot, two-stack undo/redo over ?preset=, mode toggle, ⌘K command palette (search every control → jump-and-flash).
  • Brand — seed one accent → whole system regenerates; vibe presets; "surprise me".
  • Color — Tonal ⇄ Flat Foundation switch (the "palettes or not" axis), base/gray seed, gray strategy, status seeds, and a Color lab drill (algorithm + per-algorithm knobs + generated ramps light/dark + live WCAG contrast report).
  • Foundations — typography, shape, density, elevation, motion, interaction, icons, modes.
  • Components — synced-group accordion → anatomy drill with shared-enum fan-out (writes only to members that declare the key) + per-component params.
  • Export dock — shadcn CLI + Open in v0 (live); Bolt/Lovable/Figma/Claude as roadmap.

Requirements coverage

  • Seed 1 color → complete system — ✅ live
  • Decide how the color system works (algorithm/knobs/ramps/contrast) — ✅ live
  • Palettes or not as foundations — Tonal live; Flat is honest UI (badged roadmap)
  • Tweak a specific component (synced-group aware) — ✅ live
  • Control anything + serve both audiences — every axis present; honest live/stub dots

Reviewer notes

  • No engine changes. Live setters (color seeds/algorithm/knobs, radius, density, cursors, component params) are reused as-is; everything else writes harmless --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).
  • Synced fan-out only appears where ≥2 group members share the same enum key (only menus-lists today, since button etc. have no params in the registry yet) — safe, never mis-writes.
  • The old customizer-panel.tsx is now unreferenced (left in place for easy rollback).
  • A "state update on unmounted component" console warning on full page load is pre-existing and app-wide (fires on /docs too); 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 /create route 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 CustomizerPanel on /create with a new builder/ 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.tsx hides the global Header on /create so the builder owns the chrome. BuilderUiProvider persists panel chrome in localStorage, 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.tsx wraps the default experience in the provider and swaps BuilderPanel for the old panel; ?lab still uses LabExperience with a minimal CreateLabTopBar.

Reviewed by Cursor Bugbot for commit de927a3. Bugbot is set up for automated code reviews on this repo. Configure here.

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.
@changeset-bot

changeset-bot Bot commented Jun 27, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: de927a3

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

vercel Bot commented Jun 27, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
dotui Ready Ready Preview, Comment Jun 27, 2026 11:07pm

@cursor

cursor Bot commented Jun 27, 2026

Copy link
Copy Markdown

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_181cd796-30ae-4746-9418-830a345ea3aa)

@cursor

cursor Bot commented Jun 27, 2026

Copy link
Copy Markdown

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_3d8415d3-8089-488d-aa04-3e9320f5e6b4)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant