@cueplusplus/ui 0.1.0

package/dist/configurator/configurator.js

@@ -0,0 +1,279 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "../primitives/button.js";
+import { Chip } from "../primitives/chip.js";
+import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { overlaySurfaceClasses } from "../overlays/_surface.js";
+import { TwoStepButton } from "../instruments/two-step-button.js";
+import { IconButton } from "../primitives/icon-button.js";
+import { useTheme } from "../system/use-theme.js";
+import { DEFAULT_CONFIGURATOR_STORAGE_KEY, EMPTY_OVERRIDES, applyOverrideCss, clearOverride, configuratorCss, defaultSnapshot, isOverridden, overrideCount, readSnapshot, removeOverrideStyles, resolveValue, resolvedTokens, setOverride, writeSnapshot } from "./_overrides.js";
+import { ChevronGlyph, DockGlyph, GripGlyph } from "./_glyphs.js";
+import { ExportDialog } from "./export-dialog.js";
+import { ColorsSection, PresetSection, ShapeSection } from "./panel-sections.js";
+import { useZoom } from "./use-zoom.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/configurator/configurator.tsx
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+/**
+* The floating theme configurator: the panel that edits the design system it is
+* drawn with.
+*
+* It is a **component**, not a devtool bolted onto the kitchensink — mount it in
+* any app behind a flag and a designer can retune that app's theme in place. The
+* whole thing rests on one rule, and the rule is what keeps it from being a toy:
+* *everything it does is a `--cue-*` declaration in one stylesheet.* No inline
+* styles on the root, no parallel token vocabulary, no runtime theme engine. The
+* CSS it exports is byte for byte the CSS the page is wearing, which is the only
+* reason the export dialog can promise a round trip at all.
+*
+* What it owns:
+*
+* - **Preset, mode and density** are the provider's, driven through `useTheme()`
+*   so a switch restamps `<html>`, every portal, and the persisted preference.
+* - **Colour, type and geometry overrides** go into
+*   `<style id="cue-configurator-overrides">`, scoped so they win where they
+*   have to and lose where they should — the cascade reasoning is in
+*   `_overrides.ts`, and it is the interesting part of this group.
+* - **Text scale and root zoom**, the two relief valves the density ladder is
+*   paired with.
+* - **Its own placement**, furled state and every override, in `localStorage`
+*   under one key.
+*
+* Renders in place as a `position: fixed` region, so mount it inside the
+* provider — it needs the theme context — but outside any transformed ancestor,
+* which would turn `fixed` into `absolute` and take the panel with the page.
+*
+* @throws If rendered outside a `<ThemeProvider>`: there is no theme to
+*   configure, which is a wiring bug rather than a fallback situation.
+* @example
+* <ThemeProvider>
+*   <App />
+*   {devMode ? <ThemeConfigurator /> : null}
+* </ThemeProvider>
+* @example
+* <ThemeConfigurator position="docked-right" onChange={(tokens) => report(tokens)} />
+*/
+function ThemeConfigurator({ position: positionProp, defaultPosition = "floating", onPositionChange, defaultCollapsed = false, storageKey = DEFAULT_CONFIGURATOR_STORAGE_KEY, onChange, zoomShortcuts = true, title = "Theme", className }) {
+	const { theme, resolvedMode } = useTheme();
+	const scope = React.useMemo(() => ({
+		theme,
+		mode: resolvedMode
+	}), [theme, resolvedMode]);
+	const [snapshot, setSnapshot] = React.useState(() => {
+		const initial = defaultSnapshot();
+		return {
+			...initial,
+			panel: {
+				...initial.panel,
+				position: defaultPosition,
+				collapsed: defaultCollapsed
+			}
+		};
+	});
+	const restoredKey = React.useRef(null);
+	useIsomorphicLayoutEffect(() => {
+		if (restoredKey.current === storageKey) return;
+		restoredKey.current = storageKey;
+		const stored = readSnapshot(storageKey);
+		if (stored !== null) setSnapshot(stored);
+	}, [storageKey]);
+	const snapshotRef = React.useRef(snapshot);
+	useIsomorphicLayoutEffect(() => {
+		snapshotRef.current = snapshot;
+	});
+	const [commits, setCommits] = React.useState(0);
+	React.useEffect(() => {
+		if (commits === 0) return;
+		writeSnapshot(storageKey, snapshotRef.current);
+	}, [commits, storageKey]);
+	const commit = React.useCallback(() => setCommits((count) => count + 1), []);
+	const css = React.useMemo(() => configuratorCss(snapshot.overrides), [snapshot.overrides]);
+	useIsomorphicLayoutEffect(() => {
+		applyOverrideCss(css);
+	}, [css]);
+	React.useEffect(() => () => removeOverrideStyles(), []);
+	const tokens = React.useMemo(() => resolvedTokens(snapshot.overrides, scope), [snapshot.overrides, scope]);
+	const onChangeRef = React.useRef(onChange);
+	useIsomorphicLayoutEffect(() => {
+		onChangeRef.current = onChange;
+	});
+	React.useEffect(() => {
+		onChangeRef.current?.(tokens);
+	}, [tokens]);
+	const edits = React.useMemo(() => ({
+		value: (token) => resolveValue(snapshot.overrides, scope, token),
+		overridden: (token) => isOverridden(snapshot.overrides, scope, token),
+		set: (token, value) => setSnapshot((current) => ({
+			...current,
+			overrides: setOverride(current.overrides, scope, token, value)
+		})),
+		reset: (token) => setSnapshot((current) => ({
+			...current,
+			overrides: clearOverride(current.overrides, scope, token)
+		})),
+		commit
+	}), [
+		commit,
+		scope,
+		snapshot.overrides
+	]);
+	const zoom = useZoom({
+		zoom: snapshot.zoom,
+		shortcuts: zoomShortcuts,
+		onZoomChange: (next) => {
+			setSnapshot((current) => ({
+				...current,
+				zoom: next
+			}));
+			commit();
+		}
+	});
+	const position = positionProp ?? snapshot.panel.position;
+	const { x, y, collapsed } = snapshot.panel;
+	const setPanel = React.useCallback((patch, persist = true) => {
+		setSnapshot((current) => ({
+			...current,
+			panel: {
+				...current.panel,
+				...patch
+			}
+		}));
+		if (persist) commit();
+	}, [commit]);
+	const togglePosition = () => {
+		const next = position === "floating" ? "docked-right" : "floating";
+		onPositionChange?.(next);
+		if (positionProp === void 0) setPanel({ position: next });
+	};
+	const resetAll = () => {
+		setSnapshot((current) => ({
+			...current,
+			overrides: EMPTY_OVERRIDES
+		}));
+		commit();
+	};
+	const panelRef = React.useRef(null);
+	const drag = React.useRef(null);
+	const handlePointerDown = (event) => {
+		if (position !== "floating" || event.button !== 0) return;
+		if (event.target.closest("button") !== null) return;
+		drag.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			originX: x,
+			originY: y
+		};
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+	};
+	const handlePointerMove = (event) => {
+		const active = drag.current;
+		if (active === null || active.pointerId !== event.pointerId) return;
+		const box = panelRef.current;
+		const maxX = Math.max(0, (globalThis.innerWidth ?? 0) - (box?.offsetWidth ?? 0));
+		const maxY = Math.max(0, (globalThis.innerHeight ?? 0) - (box?.offsetHeight ?? 0));
+		setPanel({
+			x: clamp(active.originX + (event.clientX - active.startX), 0, maxX),
+			y: clamp(active.originY + (event.clientY - active.startY), 0, maxY)
+		}, false);
+	};
+	const endDrag = (event) => {
+		const active = drag.current;
+		if (active === null || active.pointerId !== event.pointerId) return;
+		drag.current = null;
+		event.currentTarget.releasePointerCapture?.(event.pointerId);
+		commit();
+	};
+	const [exporting, setExporting] = React.useState(false);
+	const moved = overrideCount(snapshot.overrides);
+	const titleId = React.useId();
+	return /* @__PURE__ */ jsxs("div", {
+		ref: panelRef,
+		role: "region",
+		"aria-labelledby": titleId,
+		"data-slot": "theme-configurator",
+		"data-position": position,
+		"data-collapsed": collapsed ? "true" : void 0,
+		className: cn(overlaySurfaceClasses, "fixed z-50 flex w-[19rem] max-w-[calc(100vw-2rem)] flex-col", position === "docked-right" ? "top-0 right-0 bottom-0 h-full max-w-[90vw] rounded-none border-y-0 border-r-0" : null, className),
+		style: position === "floating" ? {
+			left: x,
+			top: y
+		} : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "theme-configurator-handle",
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: endDrag,
+				onPointerCancel: endDrag,
+				className: cn("flex h-control-lg shrink-0 touch-none items-center gap-(--cue-space-2) border-b border-border px-(--cue-space-3)", position === "floating" ? "cursor-grab" : null),
+				children: [
+					/* @__PURE__ */ jsx(GripGlyph, {
+						"aria-hidden": "true",
+						className: "size-icon-sm shrink-0 text-fg-subtle"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: titleId,
+						className: "flex-1 truncate font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-muted uppercase",
+						children: title
+					}),
+					moved === 0 ? null : /* @__PURE__ */ jsx(Chip, {
+						tone: "accent",
+						"data-slot": "configurator-count",
+						children: moved
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						"aria-label": position === "floating" ? "Dock to the right" : "Float the panel",
+						"aria-pressed": position === "docked-right",
+						icon: DockGlyph,
+						size: "sm",
+						onClick: togglePosition
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						"aria-label": collapsed ? "Expand panel" : "Collapse panel",
+						"aria-expanded": !collapsed,
+						icon: ChevronGlyph,
+						size: "sm",
+						className: collapsed ? "-rotate-90" : void 0,
+						onClick: () => setPanel({ collapsed: !collapsed })
+					})
+				]
+			}),
+			collapsed ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex max-h-[60vh] flex-col gap-(--cue-space-5) overflow-y-auto p-(--cue-space-4)",
+				children: [
+					/* @__PURE__ */ jsx(PresetSection, {
+						edits,
+						zoom
+					}),
+					/* @__PURE__ */ jsx(ColorsSection, { edits }),
+					/* @__PURE__ */ jsx(ShapeSection, { edits })
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-between gap-(--cue-space-3) border-t border-border px-(--cue-space-3) py-(--cue-space-2)",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "outline",
+					onClick: () => setExporting(true),
+					children: "Export"
+				}), /* @__PURE__ */ jsx(TwoStepButton, {
+					size: "sm",
+					tone: "danger",
+					onConfirm: resetAll,
+					disabled: moved === 0,
+					children: "Reset all"
+				})]
+			})] }),
+			/* @__PURE__ */ jsx(ExportDialog, {
+				open: exporting,
+				onOpenChange: setExporting,
+				overrides: snapshot.overrides,
+				scope
+			})
+		]
+	});
+}
+//#endregion
+export { ThemeConfigurator };

package/dist/configurator/export-dialog.d.ts

@@ -0,0 +1,30 @@
+import { ThemeOverrides, ThemeScope } from "./_overrides.js";
+import { ExportFormatId } from "./_export.js";
+import * as React from "react";
+//#region src/configurator/export-dialog.d.ts
+interface ExportDialogProps {
+  /** Whether the dialog is showing. */
+  open: boolean;
+  /** Called when it should open or close. */
+  onOpenChange: (open: boolean) => void;
+  /** The overrides to export. */
+  overrides: ThemeOverrides;
+  /** The theme and mode they were made in. */
+  scope: ThemeScope;
+  /** Format shown first. Defaults to `"css"`. */
+  defaultFormat?: ExportFormatId;
+}
+/**
+ * The export dialog: CSS, DTCG tokens, a `createTheme()` call and a shadcn
+ * `registry:theme` item.
+ *
+ * All four are generated from the overrides the panel is applying, so the CSS
+ * one is *literally* the stylesheet on the page. Nothing here re-derives a
+ * value.
+ *
+ * @example
+ * <ExportDialog open={open} onOpenChange={setOpen} overrides={overrides} scope={scope} />
+ */
+declare function ExportDialog({ open, onOpenChange, overrides, scope, defaultFormat }: ExportDialogProps): React.JSX.Element;
+//#endregion
+export { ExportDialog, ExportDialogProps };

package/dist/configurator/export-dialog.js

@@ -0,0 +1,121 @@
+"use client";
+import { Input } from "../forms/input.js";
+import { Button } from "../primitives/button.js";
+import { Tabs } from "../chrome/tabs.js";
+import { Field, FieldLabel } from "../forms/field.js";
+import { CopyButton } from "../instruments/copy-button.js";
+import { Dialog } from "../overlays/dialog.js";
+import { buildExports, exportName } from "./_export.js";
+import { DownloadGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/configurator/export-dialog.tsx
+/**
+* The way out of the panel: four renderings of the same edits, each with a copy
+* button and a download.
+*
+* The name field is at the top rather than per-format because all four exports
+* carry it — a stylesheet's selector, a token file's description, the
+* `createTheme()` call and the registry item's id — and typing it four times
+* would be four chances to disagree. Anything that is not a CSS identifier falls
+* back to `<preset>-custom` rather than being escaped, because the name lands
+* inside an attribute selector.
+*/
+/** Hand a string to the browser as a file. Silent where the API is missing. */
+function downloadText(entry) {
+	if (typeof document === "undefined" || typeof URL.createObjectURL !== "function") return;
+	const url = URL.createObjectURL(new Blob([entry.text], { type: entry.mediaType }));
+	const link = document.createElement("a");
+	link.href = url;
+	link.download = entry.filename;
+	document.body.appendChild(link);
+	link.click();
+	link.remove();
+	URL.revokeObjectURL(url);
+}
+/**
+* The export dialog: CSS, DTCG tokens, a `createTheme()` call and a shadcn
+* `registry:theme` item.
+*
+* All four are generated from the overrides the panel is applying, so the CSS
+* one is *literally* the stylesheet on the page. Nothing here re-derives a
+* value.
+*
+* @example
+* <ExportDialog open={open} onOpenChange={setOpen} overrides={overrides} scope={scope} />
+*/
+function ExportDialog({ open, onOpenChange, overrides, scope, defaultFormat = "css" }) {
+	const [name, setName] = React.useState("");
+	const [format, setFormat] = React.useState(defaultFormat);
+	const fallback = exportName(scope);
+	const exports = React.useMemo(() => buildExports({
+		overrides,
+		scope,
+		name
+	}), [
+		name,
+		overrides,
+		scope
+	]);
+	const active = exports.find((entry) => entry.id === format) ?? exports[0];
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Content, {
+			width: "lg",
+			"data-slot": "configurator-export",
+			children: [
+				/* @__PURE__ */ jsx(Dialog.Title, { children: "Export theme" }),
+				/* @__PURE__ */ jsx(Dialog.Description, { children: "The same edits, four ways. The CSS block is the stylesheet this page is wearing." }),
+				/* @__PURE__ */ jsxs(Field, {
+					className: "gap-(--cue-space-1)",
+					children: [/* @__PURE__ */ jsx(FieldLabel, {
+						className: "font-mono text-(length:--cue-text-micro) tracking-[0.15em] uppercase",
+						children: "Theme name"
+					}), /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: name,
+						placeholder: fallback,
+						spellCheck: false,
+						autoComplete: "off",
+						onValueChange: setName
+					})]
+				}),
+				/* @__PURE__ */ jsxs(Tabs.Root, {
+					value: format,
+					onValueChange: (next) => setFormat(next),
+					children: [/* @__PURE__ */ jsx(Tabs.List, { children: exports.map((entry) => /* @__PURE__ */ jsx(Tabs.Tab, {
+						value: entry.id,
+						children: entry.label
+					}, entry.id)) }), exports.map((entry) => /* @__PURE__ */ jsxs(Tabs.Panel, {
+						value: entry.id,
+						className: "flex flex-col gap-(--cue-space-3) pt-(--cue-space-4)",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "font-mono text-(length:--cue-text-label) text-fg-muted",
+							children: entry.description
+						}), /* @__PURE__ */ jsx("pre", {
+							"data-testid": "configurator-export-text",
+							"data-slot": "configurator-export-text",
+							className: "max-h-[38vh] overflow-auto rounded-(--radius-control) border border-border bg-sunken p-(--cue-space-3) font-mono text-(length:--cue-text-label) leading-relaxed whitespace-pre text-fg",
+							children: entry.text
+						})]
+					}, entry.id))]
+				}),
+				/* @__PURE__ */ jsxs(Dialog.Footer, { children: [/* @__PURE__ */ jsxs(CopyButton, {
+					value: active.text,
+					size: "sm",
+					variant: "ghost",
+					children: ["Copy ", active.label]
+				}), /* @__PURE__ */ jsxs(Button, {
+					size: "sm",
+					variant: "outline",
+					icon: DownloadGlyph,
+					onClick: () => downloadText(active),
+					children: ["Download ", active.filename]
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { ExportDialog };

package/dist/configurator/index.d.ts

@@ -0,0 +1,8 @@
+import { BASE_TRACKING_LABEL, COLOR_TOKENS, CONFIGURATOR_VERSION, ConfiguratorPosition, ConfiguratorSnapshot, DEFAULT_CONFIGURATOR_STORAGE_KEY, EMPTY_OVERRIDES, FONT_TOKENS, MANAGED_TOKENS, OVERRIDE_BANNER, OVERRIDE_STYLE_ID, SerializeOverrideOptions, ThemeOverrides, ThemeScope, TokenKind, applyOverrideCss, baseValue, clearOverride, configuratorCss, defaultSnapshot, isOverridden, isSafeCssValue, overrideCount, readSnapshot, removeOverrideStyles, resolveValue, resolvedTokens, scopeKey, serializeOverrideCss, setOverride, tokenKind, writeSnapshot } from "./_overrides.js";
+import { BuildExportsOptions, ExportFormatId, ThemeExport, buildExports, exportName } from "./_export.js";
+import { ThemeConfigurator, ThemeConfiguratorProps } from "./configurator.js";
+import { ExportDialog, ExportDialogProps } from "./export-dialog.js";
+import { MAX_ZOOM, MIN_ZOOM, UseZoomOptions, ZOOM_STEP, ZoomValve, useZoom } from "./use-zoom.js";
+import { ColorsSection, ColorsSectionProps, PresetSection, PresetSectionProps, ShapeSection, ShapeSectionProps, TokenEdits } from "./panel-sections.js";
+import { COLOR_TOKEN_GROUPS, TokenEditor, TokenEditorProps, TokenGroup } from "./token-editor.js";
+export { BASE_TRACKING_LABEL, type BuildExportsOptions, COLOR_TOKENS, COLOR_TOKEN_GROUPS, CONFIGURATOR_VERSION, ColorsSection, type ColorsSectionProps, type ConfiguratorPosition, type ConfiguratorSnapshot, DEFAULT_CONFIGURATOR_STORAGE_KEY, EMPTY_OVERRIDES, ExportDialog, type ExportDialogProps, type ExportFormatId, FONT_TOKENS, MANAGED_TOKENS, MAX_ZOOM, MIN_ZOOM, OVERRIDE_BANNER, OVERRIDE_STYLE_ID, PresetSection, type PresetSectionProps, type SerializeOverrideOptions, ShapeSection, type ShapeSectionProps, ThemeConfigurator, type ThemeConfiguratorProps, type ThemeExport, type ThemeOverrides, type ThemeScope, TokenEditor, type TokenEditorProps, type TokenEdits, type TokenGroup, type TokenKind, type UseZoomOptions, ZOOM_STEP, type ZoomValve, applyOverrideCss, baseValue, buildExports, clearOverride, configuratorCss, defaultSnapshot, exportName, isOverridden, isSafeCssValue, overrideCount, readSnapshot, removeOverrideStyles, resolveValue, resolvedTokens, scopeKey, serializeOverrideCss, setOverride, tokenKind, useZoom, writeSnapshot };

package/dist/configurator/index.js

@@ -0,0 +1,8 @@
+import { BASE_TRACKING_LABEL, COLOR_TOKENS, CONFIGURATOR_VERSION, DEFAULT_CONFIGURATOR_STORAGE_KEY, EMPTY_OVERRIDES, FONT_TOKENS, MANAGED_TOKENS, OVERRIDE_BANNER, OVERRIDE_STYLE_ID, applyOverrideCss, baseValue, clearOverride, configuratorCss, defaultSnapshot, isOverridden, isSafeCssValue, overrideCount, readSnapshot, removeOverrideStyles, resolveValue, resolvedTokens, scopeKey, serializeOverrideCss, setOverride, tokenKind, writeSnapshot } from "./_overrides.js";
+import { buildExports, exportName } from "./_export.js";
+import { ExportDialog } from "./export-dialog.js";
+import { COLOR_TOKEN_GROUPS, TokenEditor } from "./token-editor.js";
+import { ColorsSection, PresetSection, ShapeSection } from "./panel-sections.js";
+import { MAX_ZOOM, MIN_ZOOM, ZOOM_STEP, useZoom } from "./use-zoom.js";
+import { ThemeConfigurator } from "./configurator.js";
+export { BASE_TRACKING_LABEL, COLOR_TOKENS, COLOR_TOKEN_GROUPS, CONFIGURATOR_VERSION, ColorsSection, DEFAULT_CONFIGURATOR_STORAGE_KEY, EMPTY_OVERRIDES, ExportDialog, FONT_TOKENS, MANAGED_TOKENS, MAX_ZOOM, MIN_ZOOM, OVERRIDE_BANNER, OVERRIDE_STYLE_ID, PresetSection, ShapeSection, ThemeConfigurator, TokenEditor, ZOOM_STEP, applyOverrideCss, baseValue, buildExports, clearOverride, configuratorCss, defaultSnapshot, exportName, isOverridden, isSafeCssValue, overrideCount, readSnapshot, removeOverrideStyles, resolveValue, resolvedTokens, scopeKey, serializeOverrideCss, setOverride, tokenKind, useZoom, writeSnapshot };

package/dist/configurator/panel-sections.d.ts

@@ -0,0 +1,86 @@
+import { ZoomValve } from "./use-zoom.js";
+import * as React from "react";
+//#region src/configurator/panel-sections.d.ts
+/**
+ * The three sections of the panel, split out from the panel itself so each one
+ * is a component a host app can reuse — a settings screen that only wants the
+ * preset picker should not have to take the floating chrome with it.
+ *
+ * All three talk to the same {@link TokenEdits} surface: read a value, say a
+ * value moved, say the gesture ended. That last one is the change/commit split
+ * the `Slider` contract asks for — a drag emits dozens of values and exactly one
+ * commit, and only the commit is worth a `localStorage` write.
+ */
+/** How a section reads and writes the panel's overrides. */
+interface TokenEdits {
+  /** The value a token has right now: the override, else the preset's. */
+  value: (token: string) => string;
+  /** Whether the token carries an override. */
+  overridden: (token: string) => boolean;
+  /** Move a token. Applies immediately; does not persist. */
+  set: (token: string, value: string) => void;
+  /** Put a token back to the preset's value. Applies immediately; does not persist. */
+  reset: (token: string) => void;
+  /** The gesture ended — persist what is on screen. */
+  commit: () => void;
+}
+interface PresetSectionProps {
+  /** The panel's edit surface. */
+  edits: TokenEdits;
+  /** The root zoom valve the panel owns. */
+  zoom: ZoomValve;
+  /** Extra classes for the section. */
+  className?: string;
+}
+/**
+ * Section 1 — the four choices that are not token edits at all.
+ *
+ * Preset, mode and density are *provider* state: picking one restamps the
+ * document and every portal under it, which is why they live here rather than
+ * in the colour list. Text scale and zoom are the two relief valves the spec
+ * pairs with the density ladder — one scales the type ramp inside the layout,
+ * the other scales the finished layout itself.
+ *
+ * @example
+ * <PresetSection edits={edits} zoom={zoom} />
+ */
+declare function PresetSection({ edits, zoom, className }: PresetSectionProps): React.JSX.Element;
+interface ColorsSectionProps {
+  /** The panel's edit surface. */
+  edits: TokenEdits;
+  /** Extra classes for the section. */
+  className?: string;
+}
+/**
+ * Section 2 — every colour the active theme declares, one row each.
+ *
+ * The rows are grouped by what the colour does; the editing itself lives in
+ * {@link TokenEditor}, which is stateless and reusable.
+ *
+ * @example
+ * <ColorsSection edits={edits} />
+ */
+declare function ColorsSection({ edits, className }: ColorsSectionProps): React.JSX.Element;
+interface ShapeSectionProps {
+  /** The panel's edit surface. */
+  edits: TokenEdits;
+  /** Extra classes for the section. */
+  className?: string;
+}
+/**
+ * Section 3 — the geometry and type knobs, which belong to the *density* axis
+ * rather than to the theme.
+ *
+ * Both multipliers are crossed with the density ladder when they are written, so
+ * nudging the radius keeps `ultra-compact` tighter than `large` instead of
+ * flattening the two. The density knob is the published `--cue-density` escape
+ * hatch (spec §6): the shipped control ladder is three hand-authored blocks, not
+ * a multiplier, so this scales bespoke app geometry — `calc(200px *
+ * var(--cue-density))` — and the picker above is what moves the controls.
+ *
+ * @example
+ * <ShapeSection edits={edits} />
+ */
+declare function ShapeSection({ edits, className }: ShapeSectionProps): React.JSX.Element;
+//#endregion
+export { ColorsSection, ColorsSectionProps, PresetSection, PresetSectionProps, ShapeSection, ShapeSectionProps, TokenEdits };