feat(www): create builder panel implementation

[mehdibha]

What

The panel-lab drill-in panel becomes the real /create builder panel. Design landed first (below); this PR now carries the implementation, feature by feature.

Decision: the panel schema is the source of truth. The panel-lab schema (www/src/modules/panel-lab/state.ts) defines what a design system's config is. Implementing a chapter means making the engine/preview/export respond to its axes — reusing existing engine machinery where an axis already matches, adjusting the engine where it diverges, building the mechanism where the axis is new. We never bend the panel to fit old engine params.

Plan

• Header controls — the chrome acts on the real create engine via an injected PanelSystem wiring (create.tsx); /internal/panel-lab keeps the inert design shell. Switcher shows the working system name, lists saved systems (active checked), applies on select, "New design system" resets; global reset clears engine + lab state and only shows when something differs from defaults; search (⌘P) takes over the header and drills into chapters — composite members match, so "segmented" lands on Buttons; footer Save opens the preset dialog (saving now adopts the name into the working system) and Export opens the export dialog.
  Remaining work moved to the tracking issue: Create panel: wire chapters into the engine #666 (chapter skeleton + WIP chips, then one PR per chapter, merged to main).

Pending from the design stream Done: the dev-tweak scaffolding is baked in — 12px gaps, 10px radius, index value lines always on.

Background — design work already on this branch

Index illustrations — React Aria anatomy school

Every index card carries a stateless monochrome illustration of its chapter's subject (modeled on React Aria's component illustrations): flat schematic geometry on the fg alpha ladder, real words at specimen size, complete miniatures sized for the row band. One grammar across all 40 cards; shared vocabulary in variants/demos/ink.tsx. Selection controls draw from the themed --neutral-* palette; Color keeps the live brand seed; Invalid keeps danger red; Disabled is a ghosted button under the ban cursor. Registry now only carries ids the index renders. Net −780 lines in variants/.

Index rows — live value line

Each row can show its chapter's current value under the label at 12px fg-muted/60; gated behind a dev tweak (Index → Index values, default off) pending a keep/drop call.

Also from the design stream

• LabCreatePanel mounted in /create's desktop slot in place of CreatePanel.
• Charts and Invalid split into their own section files; inputs section slimmed; small panel/state adjustments.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
dotui	Ready	Preview	Aug 28, 2026 5:21pm

[claude]

Code review

Found 2 issues.

1. Unrelated devtools/react-grab removal bundled into a scope-limited PR

This PR's stated scope is the header/chrome controls (switcher, reset, search, save, export) plus carried-forward design-only work (illustrations, Charts/Invalid split). Separately, and unmentioned in the PR description, a standalone commit (chore(www): drop router devtools and react-grab from dev) removes TanStack Router Devtools and react-grab wiring:

• dotUI/www/src/routes/__root.tsx

  Lines 30 to 43 in 3e9642d

  	// Router devtools: dev only — Vercel previews should look like production.
  	// The !SSR guard keeps the chunk out of the server bundle entirely — it touches
  	// `window` at module scope, which crashes build-time prerendering.
  	const RouterDevtools =
  	!import.meta.env.SSR && import.meta.env.DEV
  	? lazy(() =>
  	import("@tanstack/react-router-devtools").then((m) => ({
  	default: m.TanStackRouterDevtools,
  	})),
  	)
  	: null
  	export const Route = createRootRoute({

• dotUI/www/src/routes/__root.tsx

  Lines 91 to 98 in 3e9642d

  	function RootComponent() {
  	useEffect(() => {
  	if (import.meta.env.DEV) {
  	void import("react-grab")
  	}
  	}, [])
  	// In the /create preview iframe, the customizer owns the displayed mode — force it so

• dotUI/www/src/routes/__root.tsx

  Lines 130 to 140 in 3e9642d

  	{children}
  	{/* ClientOnly: the devtools touch `window` at module scope, which
  	crashes build-time prerendering when previews include them. */}
  	{RouterDevtools && (
  	<ClientOnly fallback={null}>
  	<Suspense fallback={null}>
  	<RouterDevtools position="bottom-right" />
  	</Suspense>
  	</ClientOnly>
  	)}
  	<Scripts />

• dotUI/www/vite.config.ts

  Lines 1 to 3 in 3e9642d

  	import { devtools } from "@tanstack/devtools-vite"
  	import { tanstackStart } from "@tanstack/react-start/plugin/vite"
  	import path from "node:path"

• dotUI/www/vite.config.ts

  Lines 78 to 80 in 3e9642d

  	tailwindcss(),
  	devtools(),
  	tanstackStart({

CLAUDE.md:

dotUI/CLAUDE.md

Lines 90 to 92 in 3327744

	- Adding a tweak (new axis, variant, style param, semantic token) is a product decision: propose it and wait for approval before implementing — never slip one into a component PR.
	- Spot something worth a refactor or rewrite? Propose it — in a "Suggested refactors" note in the PR description, or a GitHub issue if bigger — never by expanding the current diff. Bar: recurring or task-impeding, and specific enough to act on; no "this could be cleaner". Skip areas with a planned rewrite (see Current state).
	- `pnpm build:references` is deterministic and safe to run wholesale — after touching a `types.ts`, regenerate and commit `www/src/modules/docs/references/generated/` (CI's references-drift job fails on stale output). Documented props come from `types.ts`, not `base.tsx`. Commit full-run output: scoped `-f` runs can flip union member order in a few complex types.

Spot something worth a refactor or rewrite? Propose it — in a "Suggested refactors" note in the PR description, or a GitHub issue if bigger — never by expanding the current diff.

Worth splitting into its own PR (or at least calling out explicitly in the description) so it doesn't ride along silently with an unrelated feature change.

2. New Charts axes (chartPalette/chartCurve/chartGrid) added without a visible approval trail

www/src/modules/panel-lab/sections/charts.tsx introduces three brand-new configurable axes and registers them live at /create (this PR swaps CreatePanel for LabCreatePanel in the real route):

• dotUI/www/src/modules/panel-lab/sections/charts.tsx

  Lines 1 to 21 in 3327744

  	"use client"
  	/* Charts — the data-viz look. Three axes: the categorical series palette
  	(auto = hues rotated from the brand seed, vivid and muted fixed sets, mono
  	= brand tints — the strategies real systems pick between), the line curve
  	(smooth vs linear), and the gridline treatment (dashed / solid / none).
  	Schematic on purpose: the real chart-color engine is queued for a rewrite;
  	this section pins down the axes it must serve. */
  	import { toHex, toOklch } from "@dotui/colors"
  	import { ControlGroup, SegmentedControlRow } from "@/modules/control-lab/rows"
  	import { Hero } from "../hero"
  	import type { Lab, LabState } from "../state"
  	export const CHART_DEFAULTS = {
  	chartPalette: "auto",
  	chartCurve: "smooth",
  	chartGrid: "dashed",
  	}

• dotUI/www/src/modules/panel-lab/state.ts

  Lines 439 to 456 in 3327744

  	{
  	id: "invalid",
  	label: "Invalid",
  	defaults: INVALID_DEFAULTS,
  	Body: InvalidSection,
  	Hero: InvalidHero,
  	summary: invalidSummary,
  	},
  	{
  	id: "charts",
  	label: "Charts",
  	defaults: CHART_DEFAULTS,
  	Body: ChartsSection,
  	Hero: ChartsHero,
  	summary: chartsSummary,
  	},
  	{
  	id: "motion",

CLAUDE.md:

dotUI/CLAUDE.md

Lines 89 to 91 in 3327744

	- PR titles become commit titles. Format `type(scope): summary` — describe the change, don't justify it (cut clauses like "with…", "to improve…"). Aim ~50–60 chars, but never drop information to hit it. Good: `docs: rewrite CLAUDE.md` · Bad: `docs: rewrite CLAUDE.md with real project context`.
	- Adding a tweak (new axis, variant, style param, semantic token) is a product decision: propose it and wait for approval before implementing — never slip one into a component PR.
	- Spot something worth a refactor or rewrite? Propose it — in a "Suggested refactors" note in the PR description, or a GitHub issue if bigger — never by expanding the current diff. Bar: recurring or task-impeding, and specific enough to act on; no "this could be cleaner". Skip areas with a planned rewrite (see Current state).

Adding a tweak (new axis, variant, style param, semantic token) is a product decision: propose it and wait for approval before implementing — never slip one into a component PR.

Notably, this PR's own CLAUDE.md edit (tracking issue #666) states the rewrite process still requires this: "A chapter carries a WIP chip until its values actually drive the preview and export." Charts is wired into the live /create route with no WIP chip and no linked approval/discussion for this specific axis set — the PR body frames it only as "carried-forward design-only work," not a separately proposed axis.