feat(create): rebuild the /create panel as the Studio builder#296
feat(create): rebuild the /create panel as the Studio builder#296mehdibha wants to merge 2 commits into
Conversation
Replace the stacked customizer + lab prototype with a from-scratch rail + inspector: brand quick-path (seed/import/starters/vibes/shuffle), full color system (model selector, algorithm + knobs, palettes-as-foundations, a live semantic-token remapper, contrast, chart colors), a per-component inspector that switches the preview, and every foundation axis. Adds a Simple/Pro persona switch, command-K search, undo, and a sticky export footer. Removes customizer-panel.tsx and the panel/ lab dir.
|
|
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_2fba91f9-cbdc-4c4b-b047-9d1a6f2e9a72) |
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_d4846382-7f15-4fcb-a054-e7f171aee503) |
1 participant
The idea: one tool, two people
A rail (10 sections) + inspector, with a single Simple ⇄ Pro switch that hides/reveals the micro controls per section. Depth is always one click away — no drill-downs. Plus ⌘K search over every section and component, shuffle, undo, and a sticky export footer.
Requirements coverage
1 seed·2 seeds·Full palette·Manual, + algorithm (OKLCH/Tailwind/Material/Contrast) + knobs.Highlight: a genuinely-live semantic-token remapper
Repoint any of 12 semantic roles (Surfaces / Text & borders / Status) to a different palette + step, or a custom brand hex — and the preview updates instantly. Allowed palettes per role are derived from each token's authored
scalespool inDEFAULT_SEMANTICS(Danger is locked to its own family; surfaces can tint toward the brand).It's live because the preview's
DesignSystemProviderwrites everytokensentry viaroot.style.setProperty(...)— inline on:root— which outranks the emitted semantic stylesheet. Verified end-to-end: remapping Primary → Brand wrote--color-primary: var(--accent-500)on the preview:root, the computed value became exactly--accent-500, and the preview's primary buttons/selected date turned the brand color while text/cards stayed neutral. The override persists in the preset and the export command.Live vs. preview-only (shown honestly)
Every control carries a status dot — filled = drives the preview, hollow = UI-only. Live: color seeds/algorithm/knobs, palettes-as-foundations, semantic remapper, contrast, chart colors, radius, density, cursor, per-component params, export. Preview-only (proposals surfaced for review, each needs a product decision + a preview consumer to go live): typography families/scale, icon library/stroke, border width, spacing scale, surface style family/shadow/glass, motion duration/easing, focus ring, default boot mode.
Files
www/src/modules/create/studio/**— shell (index.tsx),context,data,primitives, andsections/(brand,color,components,foundations,semantic).routes/_app/create.tsx(rendersStudioPanel; search schema trimmed topreview/preset),styles.css(a CSS-safestudio-fade-inkeyframe).customizer-panel.tsx+ the wholepanel/lab dir.Verification
pnpm typecheck✅ ·pnpm check✅ (only 2 pre-existing warnings in unrelated files). Verified in-browser (light + dark): brand seeding/ramps, color model + algorithm + foundations toggle, Pro knobs + semantic remapper (turned preview teal) + contrast + chart colors, component browse → inspector → live preview switch, Motion control types, ⌘K, shuffle changing the system live. The custom-hex field renders and rides the same verifiedsetTokenchannel (the headless harness couldn't simulate a real keyboard commit into react-aria'sColorField, so that one path is verified by construction, not by an automated click).Notes
UI-only experiment per the brief: everything free was wired to real state; new axes are honest UI for product review. No registry source touched (no shadcn-schema impact); no
build:registryoutputs changed.Note
Medium Risk
Large UI swap on a primary route with new navigation and URL schema changes (
panel/labremoved), but preview/export/preset wiring is largely reused and registry sources are untouched.Overview
Replaces the stacked CustomizerPanel and the entire
?labpanel-lab prototype (~3k lines underpanel/) with a new Studio experience on/create. The live preview pane is unchanged.The new left UI is a rail + inspector with ten sections (Brand, Color, Typography, Icons, Shape, Density, Surface, Motion, Components, Code), a Simple ⇄ Pro toggle that hides micro controls per section, ⌘K search over sections and tweakable components, and shared undo / shuffle plus a sticky export footer. Brand adds hero color picking, starters, vibes, and import-from-hex; Color adds color models, foundations toggle, and in Pro a live semantic-token remapper (palette step or custom hex on
--color-*). Opening a component in Components switches the preview via?preview=./createchrome: dropspanelandlabfrom search params (keepspreview/preset), wraps the page inStudioShellProvider, rendersBuilderTopBarinstead of stacking the site header (routes/_app/route.tsxskipsHeaderon/create). Adds astudio-fade-inCSS utility for section transitions.Reviewed by Cursor Bugbot for commit 5284bde. Bugbot is set up for automated code reviews on this repo. Configure here.