feat(create): rebuild builder panel from scratch#283
Conversation
Replace the /create left panel with dotUI Studio: a brand hero (one seed -> full system), one-tap vibes, Quick/Pro depth, and drill-in editors for color (Simple/Advanced, palettes-vs-semantic foundations, algorithm + knobs, semantic mapping, a11y readout), typography, shape, density, elevation, motion, icons, cursors, charts, plus a per-component editor. Edits flow through the existing ?preset= state so the live preview re-themes. Removes customizer-panel and the orphaned typography/iconography/chart-colors control modules. UI-first experiment: headline axes (color, radius, density, cursors, charts, component params) are wired live; new axes are interactive UI on local state pending preview consumers.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using high effort and found 7 potential issues.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
| const matchTheme = () => { | ||
| ;[1, 2, 3, 4, 5].forEach((n, i) => | ||
| setToken(`--chart-${n}`, derived[i] ?? '#888888'), | ||
| ) |
There was a problem hiding this comment.
Match theme freezes chart colors
Medium Severity
The "Match theme" button in the Charts screen now sets chart color tokens to static hex values. This prevents chart colors from automatically updating when the overall theme's brand or status seeds change, breaking their dynamic linkage.
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
| 0, | ||
| RADIUS_OPTIONS.findIndex((o) => o.value === current), | ||
| ) | ||
| const safeIdx = idx >= 0 ? idx : 0 |
There was a problem hiding this comment.
Radius slider wrong default
Medium Severity
The RadiusParam slider defaults to the first radius option (index 0) when its current value isn't found in RADIUS_OPTIONS. This occurs because Math.max(0, findIndex(...)) forces index 0, causing the control to display an inaccurate starting point for user adjustments.
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
| Shares one style with{' '} | ||
| {siblings.map((s) => getComponentDisplayName(s)).join(', ')}. Edits | ||
| stay in sync. | ||
| </Hint> |
There was a problem hiding this comment.
Synced group edits not shared
Medium Severity
The component editor UI states that parameter edits for synced siblings stay in sync. However, setComponentParam only updates the current component's parameters, meaning changes don't propagate to other grouped components or their shared preview styling.
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
| options={[ | ||
| { id: 'gray', label: 'Pure gray' }, | ||
| { id: 'tinted', label: 'Tinted by brand' }, | ||
| { id: 'warm', label: 'Warm' }, |
There was a problem hiding this comment.
Status toggle only hides UI
Medium Severity
The "Tinted by brand" neutral option in Simple mode is hardcoded to a fixed hex value (#7d7a85). Its label and hint suggest it should derive the neutral color from the current brand seed, but it doesn't.
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
| muted: '100', | ||
| border: '200', | ||
| ring: '500', | ||
| }) |
There was a problem hiding this comment.
Spacing scale slider inert
Medium Severity
Several studio controls update local React state (useState) but don't propagate changes to the designSystem context. This prevents user adjustments to the "Spacing scale" (Density), "Hover effect" (Components), "Status colors" (Simple Color), and "Semantic mapping" (Advanced Color) from affecting the live preview or the exported preset.
Additional Locations (2)
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
| label={`Series ${n}`} | ||
| value={colors[i] ?? '#888888'} | ||
| onChange={(hex) => setToken(`--chart-${n}`, hex)} | ||
| /> |
There was a problem hiding this comment.
Chart picker ignores var tokens
Medium Severity
Chart series swatches pass raw designSystem.tokens['--chart-n'] into SeedSwatch without resolving var(...) overrides to hex. Presets that still store theme-linked chart tokens (including after the old panel) can break or mis-seed the color picker while the bar preview still looks correct.
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
| const navigate = routeApi.useNavigate() | ||
| const { setDesignSystem } = useDesignSystem() | ||
|
|
||
| const [stack, setStack] = useState<string[]>([]) |
There was a problem hiding this comment.
Panel query param ignored
Medium Severity
The create route still accepts panel in search params, but StudioProvider keeps navigation in local stack state only and never reads or writes panel. Bookmarks and shared links that relied on ?panel=… no longer open the matching editor after refresh.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit fcf732d. Configure here.
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_88020d2c-b5f6-4b0b-be9c-ad61503c8036) |
1 participant
Rebuilds the
/createleft panel from scratch as dotUI Studio — anexperiment toward the most capable design-system builder on the web. It serves
both audiences at once: drop in a single brand color and walk away with a
complete, on-brand, accessible library in minutes, or drill down to a single
component's hover effect.
What changed
customizer-panel.tsx(the old left panel + every control it composed) and the orphanedtypography/,iconography/,chart-colors/control modules.www/src/modules/create/studio/(8 files): a persistent identity header over a slide-stack — Home → foundation/component editors — with the export footer kept.useDesignSystem→?preset=contract, so the live preview re-themes for free. The?lab=trueexperiment is untouched.Two depth dials for two audiences
The tweaking surface
Requirements met
Verification
pnpm typecheck✅ ·pnpm check(oxlint + oxfmt) ✅ · zero console errors. In-browser: navigation, Quick/Pro, Color Simple+Advanced, foundation + component editors, and back-nav all work; applying the Vivid vibe set the brand to#7C3AED, wrote the encoded?preset=, and re-themed the live preview purple. No registry/types.tschanges, so no generated drift.Heads-up
A separate
/createstudio experiment exists on branchelastic-clarke(a 3-zone rail+canvas+inspector take) using the samestudio/folder name. This is a distinct second direction — pick one before merging, since the folders collide.Note
Medium Risk
Large UX swap on the primary
/createflow and a new navigation model (in-memory stack vs prior URLpaneldrill-in); preset/undo behavior is preserved but several controls are UI-only and do not yet affect export/preview.Overview
Replaces the
/createleft CustomizerPanel and its split modules (chart-colors,typography,iconography) with a newstudio/experience: dotUI Studio — a slide-stack from Home into foundation and component editors, still persisting edits throughuseDesignSystem→?preset=so the preview keeps working.Chrome and routing:
/creategets a dedicatedCreateTopBar(system name, Quick/Pro depth, surprise-me, undo) insideStudioProvider; the global siteHeaderis hidden on/createso nav does not stack. The page layout is100svhwith the builder owning the top bar.Product surface: Home adds brand hero, vibes, tier-gated foundations (Quick vs Pro), and a searchable component list. New editors include Color Lab (simple/advanced, WCAG readout), registry-driven component params, and foundation screens for shape, density, cursors, charts, plus UI-only typography/elevation/motion/icons until wired to tokens. Undo/reroll move into studio context (preset history unchanged in spirit).
?lab=truestill swaps inLabExperience; default path usesStudioPanelinstead ofCustomizerPanel.Reviewed by Cursor Bugbot for commit 5041832. Bugbot is set up for automated code reviews on this repo. Configure here.