@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/configurator/_overrides.js

@@ -1,4 +1,4 @@
-import { THEME_NAME_PATTERN as THEME_NAME_PATTERN$1, assertCssValue, serializeSystemModeAliases, serializeThemeBlock, tokenProperty } from "../theming/serialize.js";
+import { THEME_NAME_PATTERN as THEME_NAME_PATTERN$1, assertCssValue, followerSelector, serializeSystemModeAliases, serializeThemeBlock, themeFollowerSelector, tokenProperty } from "../theming/serialize.js";
 import { DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS } from "../theming/create-theme.js";
 import { resolve } from "@cueplusplus/theme-base";
 //#region src/configurator/_overrides.ts
@@ -320,9 +320,18 @@ function orderedDeclarations(entries) {
 * form: a bare `[data-theme="x"]` for dark, because that is the block a
 * stylesheet writes first. An override has to beat that block **and** the light
 * block above it, so it always names the mode.
+*
+* Which is why it carries the follower's twin in both modes, not only in light:
+* a theme island that follows a persisting root's mode stamps no `data-mode`
+* until it mounts, and a compound naming `dark` misses it exactly as one naming
+* `light` does (see `followerSelector`). And the theme follower's twin for the
+* same reason one axis over: an island that names a mode and follows the
+* root's theme stamps no `data-theme` until it mounts (see
+* `themeFollowerSelector`). Same specificity, so source order still puts these
+* after every theme's own blocks.
 */
 function overrideSelector(theme, mode) {
-	return `[data-theme="${theme}"][data-mode="${mode}"]`;
+	return `${themeFollowerSelector(theme, mode)},\n${followerSelector(theme, "mode", mode)},\n[data-theme="${theme}"][data-mode="${mode}"]`;
 }
 /** Round a product of two scales to something a stylesheet can print. */
 const scaled = (a, b) => String(Number((a * b).toFixed(4)));
@@ -376,7 +385,7 @@ function serializeOverrideCss(overrides, options = {}) {
 	if (scaledDeclarations.length > 0) for (const level of DENSITY_LEVELS) {
 		const isDefault = level === DEFAULT_DENSITY_LEVEL;
 		blocks.push({
-			selector: isDefault ? `:root,\n[data-density="${level}"]` : `[data-density="${level}"]`,
+			selector: `:where(:root[data-density="${level}"]) [data-cue-follows~="density"],\n${isDefault ? ":root,\n" : ""}[data-density="${level}"]`,
 			sections: [{
 				comment: isDefault ? CROSSED_COMMENT : void 0,
 				declarations: scaledDeclarations.map(([property, value]) => [property, crossed(property, value, level)])
@@ -384,7 +393,7 @@ function serializeOverrideCss(overrides, options = {}) {
 		});
 	}
 	if (flatDeclarations.length > 0) blocks.push({
-		selector: ":root,\n[data-density]",
+		selector: "[data-cue-follows~=\"density\"],\n:root,\n[data-density]",
 		sections: [{ declarations: flatDeclarations }]
 	});
 	if (inlineDeclarations.length > 0) blocks.push({

package/dist/configurator/configurator.js

@@ -1,8 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "../primitives/button.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
 import { Chip } from "../primitives/chip.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { overlaySurfaceClasses } from "../overlays/_surface.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { TwoStepButton } from "../instruments/two-step-button.js";
@@ -221,7 +224,7 @@ function ThemeConfigurator({ position: positionProp, defaultPosition = "floating
 					}),
 					/* @__PURE__ */ jsx("span", {
 						id: titleId,
-						className: "flex-1 truncate font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-muted uppercase",
+						className: cn("flex-1 truncate text-(length:--cue-text-label) text-fg-muted", LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 						children: title
 					}),
 					moved === 0 ? null : /* @__PURE__ */ jsx(Chip, {

package/dist/configurator/export-dialog.js

@@ -1,6 +1,9 @@
 "use client";
 import { Input } from "../forms/input.js";
 import { Button } from "../primitives/button.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { Tabs } from "../chrome/tabs.js";
 import { Field, FieldLabel } from "../forms/field.js";
 import { CopyButton } from "../instruments/copy-button.js";
@@ -70,7 +73,7 @@ function ExportDialog({ open, onOpenChange, overrides, scope, defaultFormat = "c
 				/* @__PURE__ */ jsxs(Field, {
 					className: "gap-(--cue-space-1)",
 					children: [/* @__PURE__ */ jsx(FieldLabel, {
-						className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
+						className: `${LABEL_FACE} text-(length:--cue-text-micro) ${LABEL_TRACKING} ${LABEL_CASE}`,
 						children: "Theme name"
 					}), /* @__PURE__ */ jsx(Input, {
 						size: "sm",
@@ -96,7 +99,7 @@ function ExportDialog({ open, onOpenChange, overrides, scope, defaultFormat = "c
 						}), /* @__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-(--cue-leading-ui) whitespace-pre text-fg",
+							className: "max-h-[38vh] overflow-auto rounded-control border border-border bg-sunken p-(--cue-space-3) font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) whitespace-pre text-fg",
 							children: entry.text
 						})]
 					}, entry.id))]

package/dist/configurator/panel-sections.js

@@ -1,6 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { Input } from "../forms/input.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { useDensities, useThemes } from "../system/theme-registry.js";
 import { SectionHeader } from "../chrome/section-header.js";
 import { SegmentedControl } from "../chrome/segmented-control.js";
@@ -133,7 +137,7 @@ function TextTokenField({ label, token, edits, placeholder }) {
 	return /* @__PURE__ */ jsxs(Field, {
 		className: "gap-(--cue-space-1)",
 		children: [/* @__PURE__ */ jsx(FieldLabel, {
-			className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) uppercase",
+			className: `${LABEL_FACE} text-(length:--cue-text-micro) ${LABEL_TRACKING} ${LABEL_CASE}`,
 			children: label
 		}), /* @__PURE__ */ jsx(Input, {
 			size: "sm",
@@ -193,7 +197,7 @@ function PresetSection({ edits, zoom, className }) {
 						"aria-pressed": active,
 						"data-slot": "configurator-preset",
 						onClick: () => setTheme(name),
-						className: cn("flex cursor-pointer flex-col gap-(--cue-space-2) rounded-(--radius-control) border p-(--cue-space-2) text-left outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", active ? "border-accent text-accent" : "border-border text-fg-muted hover:border-border-strong hover:text-fg"),
+						className: cn(`flex cursor-pointer flex-col gap-(--cue-space-2) rounded-control border p-(--cue-space-2) text-left outline-none ${FOCUS_RING}`, active ? "border-accent text-accent" : "border-border text-fg-muted hover:border-border-strong hover:text-fg"),
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "truncate font-mono text-(length:--cue-text-label)",
 							children: name

package/dist/configurator/token-editor.js

@@ -1,5 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING } from "../system/_style-label-tracking.js";
 import { IconButton } from "../primitives/icon-button.js";
 import { tokenProperty } from "../theming/serialize.js";
 import { ColorPicker } from "../color/color-picker.js";
@@ -133,7 +136,7 @@ function TokenEditor({ values, overridden, onTokenChange, onTokenReset, groups =
 			"data-slot": "configurator-token-group",
 			className: "flex flex-col gap-(--cue-space-2)",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "font-mono text-(length:--cue-text-micro) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+				className: cn("text-(length:--cue-text-micro) text-fg-subtle", LABEL_FACE, LABEL_TRACKING, LABEL_CASE),
 				children: group.label
 			}), group.tokens.map((token) => {
 				const property = tokenProperty(token);

package/dist/date/_trigger.js

@@ -1,5 +1,8 @@
 import { cn } from "../lib/cn.js";
 import { controlVariants } from "../forms/_chassis.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { GLYPH_OPACITY } from "../system/_style-glyph-opacity.js";
+import { GLYPH_SIZE } from "../system/_style-glyph-size.js";
 //#region src/date/_trigger.ts
 /**
 * The shared skin of the two popover-backed date controls, `DatePicker` and
@@ -24,7 +27,7 @@ const dateTriggerValueClasses = "truncate tabular-nums";
 /** Placeholder ink, applied to the readout when there is nothing to read. */
 const dateTriggerPlaceholderClasses = "text-fg-subtle";
 /** The trailing glyph — never a control, so it never takes the pointer. */
-const dateTriggerGlyphClasses = "size-icon-sm shrink-0 text-fg-subtle";
+const dateTriggerGlyphClasses = `${GLYPH_SIZE} shrink-0 ${GLYPH_INK_SUBTLE} ${GLYPH_OPACITY}`;
 /** Padding of the popup around a calendar: one unit tighter than a popover's. */
 const datePopupClasses = "p-(--cue-space-3)";
 //#endregion

package/dist/date/calendar.js

@@ -1,5 +1,14 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { GLYPH_INK_SUBTLE } from "../system/_style-glyph-ink.js";
+import { GLYPH_OPACITY } from "../system/_style-glyph-opacity.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING, LABEL_TRACKING_TIGHT } from "../system/_style-label-tracking.js";
+import { CAPTION_SIZE_LABEL, CAPTION_SIZE_MICRO } from "../system/_style-caption-size.js";
+import { CAPTION_WEIGHT, CAPTION_WEIGHT_NORMAL } from "../system/_style-caption-weight.js";
+import { DAY_HEIGHT, DAY_INK, DAY_SIZE } from "../system/_style-day.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker } from "react-day-picker";
@@ -10,7 +19,8 @@ import { DayPicker } from "react-day-picker";
 * react-day-picker ships its own stylesheet; this system never loads it. Each
 * key below is one `UI` / `DayFlag` / `SelectionState` slot, dressed from the
 * same tokens as the rest of the kit: the day cell is one rung of the control
-* ladder (`size-control-sm`), the caption is a mono micro label, the selected
+* ladder (`size-control-sm`, or a set's `style-day-size`, which the month-nav
+* buttons and the caption row share), the caption is a mono micro label, the selected
 * day takes the solid accent and a range's middle takes `accent-soft` — the
 * same "soft tint for a span, solid for the thing you picked" rule the menus
 * use.
@@ -22,30 +32,30 @@ const CALENDAR_CLASSES = {
 	root: "font-mono text-(length:--cue-text-ui) text-fg",
 	months: "relative flex flex-wrap items-start gap-(--cue-space-5)",
 	month: "flex flex-col gap-(--cue-space-2)",
-	month_caption: "flex h-control-sm items-center justify-center",
-	caption_label: "font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
-	nav: "absolute inset-x-0 top-0 flex h-control-sm items-center justify-between",
-	button_previous: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
-	button_next: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
-	chevron: "size-icon-sm fill-current",
+	month_caption: `flex ${DAY_HEIGHT} items-center justify-center`,
+	caption_label: `${LABEL_FACE} ${CAPTION_SIZE_LABEL} ${CAPTION_WEIGHT} ${LABEL_TRACKING} text-fg-subtle ${LABEL_CASE}`,
+	nav: `absolute inset-x-0 top-0 flex ${DAY_HEIGHT} items-center justify-between`,
+	button_previous: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	button_next: `flex ${DAY_SIZE} cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 ${GLYPH_INK_SUBTLE} outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	chevron: `size-icon-sm fill-current ${GLYPH_OPACITY}`,
 	month_grid: "border-collapse border-spacing-0",
 	weekdays: "",
-	weekday: "size-control-sm p-0 text-center align-middle font-mono text-(length:--cue-text-micro) font-normal tracking-(--cue-tracking-caps-tight) text-fg-subtle uppercase",
+	weekday: `${DAY_SIZE} p-0 text-center align-middle ${LABEL_FACE} ${CAPTION_SIZE_MICRO} ${CAPTION_WEIGHT_NORMAL} ${LABEL_TRACKING_TIGHT} text-fg-subtle ${LABEL_CASE}`,
 	week: "",
 	day: "p-0 text-center align-middle",
-	day_button: "size-control-sm cursor-pointer rounded-(--radius-control) border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted outline-none transition-colors duration-150 hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
+	day_button: `${DAY_SIZE} cursor-pointer rounded-control border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums ${DAY_INK} outline-none transition-colors duration-150 hover:bg-surface-3 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
 	today: "[&_button]:font-medium [&_button]:ring-1 [&_button]:ring-inset [&_button]:ring-accent/60",
 	outside: "[&_button]:text-fg-subtle [&_button]:opacity-50",
 	disabled: "opacity-40",
 	hidden: "invisible",
 	selected: "bg-accent text-accent-fg [&_button]:bg-accent [&_button]:text-accent-fg [&_button]:hover:bg-accent-hover",
-	range_start: "rounded-l-(--radius-control)",
-	range_end: "rounded-r-(--radius-control)",
+	range_start: "rounded-l-control",
+	range_end: "rounded-r-control",
 	range_middle: "rounded-none bg-accent-soft text-fg [&_button]:rounded-none [&_button]:bg-transparent [&_button]:text-fg",
 	footer: "pt-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg-muted",
 	dropdowns: "flex items-center gap-(--cue-space-2)",
 	dropdown_root: "relative inline-flex items-center",
-	dropdown: "h-control-sm cursor-pointer rounded-(--radius-control) border border-border bg-sunken px-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+	dropdown: `h-control-sm cursor-pointer rounded-control border border-border bg-sunken px-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg outline-none ${FOCUS_RING}`,
 	week_number: "size-control-sm text-center align-middle font-mono text-(length:--cue-text-micro) tabular-nums text-fg-subtle",
 	week_number_header: "size-control-sm text-center align-middle font-mono text-(length:--cue-text-micro) text-fg-subtle"
 };

package/dist/dmx/channel-matrix.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
@@ -237,7 +238,7 @@ const ChannelMatrix = React.forwardRef(function ChannelMatrix({ className, data,
 						selectUniverse(index);
 						selectMode("detail");
 					},
-					className: "flex cursor-pointer flex-col gap-(--cue-space-2) rounded-(--radius-control) border border-border bg-surface-1 p-(--cue-space-2) text-left outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent data-[selected=true]:border-accent",
+					className: `flex cursor-pointer flex-col gap-(--cue-space-2) rounded-control border border-border bg-surface-1 p-(--cue-space-2) text-left outline-none ${FOCUS_RING} data-[selected=true]:border-accent`,
 					children: [/* @__PURE__ */ jsxs("span", {
 						className: "font-mono text-(length:--cue-text-micro) tabular-nums text-fg-muted",
 						children: ["U", String(index).padStart(2, "0")]
@@ -277,7 +278,7 @@ function ControlButton({ pressed, onClick, children }) {
 		type: "button",
 		"aria-pressed": pressed,
 		onClick,
-		className: "flex h-control-sm cursor-pointer items-center rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-muted outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent aria-pressed:bg-accent-soft aria-pressed:text-accent motion-reduce:transition-none",
+		className: `flex h-control-sm cursor-pointer items-center rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-muted outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} aria-pressed:bg-accent-soft aria-pressed:text-accent motion-reduce:transition-none`,
 		children
 	});
 }

package/dist/dmx/dmx-bar.js

@@ -84,7 +84,7 @@ const DmxBar = React.forwardRef(function DmxBar({ className, data, height = DEFA
 				"aria-label": summary,
 				"data-slot": "dmx-bar-canvas",
 				"data-live": String(live),
-				className: "block w-full cursor-crosshair rounded-(--radius-control) border border-border bg-(--cue-data-ground) [image-rendering:pixelated] data-[live=false]:opacity-45",
+				className: "block w-full cursor-crosshair rounded-control border border-border bg-(--cue-data-ground) [image-rendering:pixelated] data-[live=false]:opacity-45",
 				style: { height: toRem(height) }
 			}),
 			hover === null ? null : /* @__PURE__ */ jsx("span", {

package/dist/dmx/dmx-strip.js

@@ -172,7 +172,7 @@ const DmxStrip = React.forwardRef(function DmxStrip({ className, cells = DEFAULT
 				role: "img",
 				"aria-label": label ?? "Simulated DMX activity",
 				"data-slot": "dmx-strip-canvas",
-				className: "block w-full cursor-crosshair rounded-(--radius-control) border border-border bg-(--cue-data-ground) [image-rendering:pixelated]",
+				className: "block w-full cursor-crosshair rounded-control border border-border bg-(--cue-data-ground) [image-rendering:pixelated]",
 				style: { height: toRem(height) }
 			}),
 			hover === null ? null : /* @__PURE__ */ jsx("span", {

package/dist/dmx/universe-grid.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { toRem } from "../instruments/_rem.js";
 import "./_ramp.js";
 import { UNIVERSE_TICKS, channelPercent, universeLayout } from "./_universe.js";
@@ -85,7 +86,7 @@ const UniverseGrid = React.forwardRef(function UniverseGrid({ className, allocat
 				role: interactive ? "group" : "img",
 				"aria-label": interactive ? label ?? "Universe" : label === void 0 ? summary : `${label}: ${summary}`,
 				"data-slot": "universe-grid-track",
-				className: "relative w-full overflow-hidden rounded-(--radius-control) border border-border bg-sunken",
+				className: "relative w-full overflow-hidden rounded-control border border-border bg-sunken",
 				style: { height: toRem(height) },
 				children: [
 					GRIDLINES.filter((channel) => channel <= slots).map((channel) => /* @__PURE__ */ jsx("span", {
@@ -110,7 +111,7 @@ const UniverseGrid = React.forwardRef(function UniverseGrid({ className, allocat
 						"data-conflict": block.conflict ? "true" : void 0,
 						"aria-label": `${block.label}: channels ${block.start} to ${block.end}`,
 						onClick: () => onSelect(block.allocation),
-						className: cn("absolute inset-y-0 min-w-[2px] cursor-pointer rounded-[2px] outline-none transition-opacity duration-150 hover:opacity-85 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none", BLOCK_TONES[block.tone], block.conflict ? "z-10 ring-1 ring-danger" : void 0),
+						className: cn(`absolute inset-y-0 min-w-[2px] cursor-pointer rounded-[2px] outline-none transition-opacity duration-150 hover:opacity-85 ${FOCUS_RING} motion-reduce:transition-none`, BLOCK_TONES[block.tone], block.conflict ? "z-10 ring-1 ring-danger" : void 0),
 						style: {
 							left: `${block.left}%`,
 							width: `${block.width}%`

package/dist/elements/activity-graph.js

@@ -28,7 +28,7 @@ const LEVEL_TINT = [
 function ActivityGraph({ data, start, end, title, total, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "activity-graph",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-overlay p-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-baseline justify-between",
@@ -55,7 +55,7 @@ function ActivityGraph({ data, start, end, title, total, className, ...props })
 					}) })
 				}), /* @__PURE__ */ jsx(HeatGraph.Grid, {
 					className: "gap-[3px]",
-					children: ({ cell }) => /* @__PURE__ */ jsx(HeatGraph.Cell, { className: cn("size-[9px] rounded-(--radius-control)", LEVEL_TINT[cell.level] ?? LEVEL_TINT[0]) })
+					children: ({ cell }) => /* @__PURE__ */ jsx(HeatGraph.Cell, { className: cn("size-[9px] rounded-control", LEVEL_TINT[cell.level] ?? LEVEL_TINT[0]) })
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1.5 self-end",
@@ -66,7 +66,7 @@ function ActivityGraph({ data, start, end, title, total, className, ...props })
 					}),
 					LEVEL_TINT.map((tint, level) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("size-[9px] rounded-(--radius-control)", tint)
+						className: cn("size-[9px] rounded-control", tint)
 					}, level)),
 					/* @__PURE__ */ jsx("span", {
 						className: cn(mono, "text-fg-subtle"),

package/dist/elements/agent-card.js

@@ -25,13 +25,13 @@ import { BotIcon, CheckIcon } from "lucide-react";
 function AgentCard({ name, description, provider, version, model, endpoint, skills, connected, onConnect, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "agent-card",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-overlay p-4", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-start gap-3",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
 					children: /* @__PURE__ */ jsx(BotIcon, { className: "size-4" })
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-1 flex-col",
@@ -59,7 +59,7 @@ function AgentCard({ name, description, provider, version, model, endpoint, skil
 				children: skills.map((skill) => /* @__PURE__ */ jsxs("div", {
 					className: "flex items-baseline gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cn(field, mono, "text-fg-muted shrink-0 rounded-(--radius-control) px-1.5 py-0.5"),
+						className: cn(field, mono, "text-fg-muted shrink-0 rounded-control px-1.5 py-0.5"),
 						children: skill.name
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",

package/dist/elements/approval-card.js

@@ -22,13 +22,13 @@ import { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from "lucide-react";
 function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "approval-card",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-overlay p-4", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
 					children: /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4" })
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col",
@@ -42,7 +42,7 @@ function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAl
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3.5 py-2.5 font-mono text-(length:--cue-text-ui)"),
+				className: cn(field, "text-fg-muted rounded-surface px-3.5 py-2.5 font-mono text-(length:--cue-text-ui)"),
 				children: command
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/elements/artifact-card.js

@@ -20,11 +20,11 @@ import { ArrowUpRightIcon, FileTextIcon } from "lucide-react";
 function ArtifactCard({ title, meta, generating = false, words = 0, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "artifact-card",
-		className: cn(paper, "group flex w-full max-w-xs cursor-pointer items-center gap-3 rounded-(--radius-overlay) p-3.5 transition-transform duration-150 hover:-translate-y-px active:scale-[0.98]", className),
+		className: cn(paper, "group flex w-full max-w-xs cursor-pointer items-center gap-3 rounded-overlay p-3.5 transition-transform duration-150 hover:-translate-y-px active:scale-[0.98]", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
 				children: /* @__PURE__ */ jsx(FileTextIcon, { className: cn("size-4", generating && "animate-pulse motion-reduce:animate-none") })
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/background-inbox.js

@@ -17,7 +17,7 @@ function BackgroundInbox({ runs, onCollect, className, ...props }) {
 	const running = runs.filter((run) => run.state === "running").length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "background-inbox",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-3", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-overlay p-3", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-baseline justify-between px-1 pb-1",
@@ -32,7 +32,7 @@ function BackgroundInbox({ runs, onCollect, className, ...props }) {
 			type: "button",
 			disabled: run.state === "running",
 			onClick: () => onCollect?.(run.id),
-			className: cn("flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-2 text-start transition-colors", run.state === "running" ? "cursor-default" : "hover:bg-surface-1"),
+			className: cn("flex items-center gap-2.5 rounded-surface px-1.5 py-2 text-start transition-colors", run.state === "running" ? "cursor-default" : "hover:bg-surface-1"),
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "flex size-3.5 shrink-0 items-center justify-center",

package/dist/elements/canvas-split.js

@@ -34,7 +34,7 @@ import { CheckIcon, CopyIcon, FileTextIcon, XIcon } from "lucide-react";
 function CanvasSplit({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "canvas-split",
-		className: cn(paper, "flex w-full max-w-3xl flex-col overflow-hidden rounded-(--radius-overlay) md:h-80 md:flex-row", className),
+		className: cn(paper, "flex w-full max-w-3xl flex-col overflow-hidden rounded-overlay md:h-80 md:flex-row", className),
 		...props
 	});
 }
@@ -54,7 +54,7 @@ function CanvasSplitMessage({ speaker, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "canvas-split-message",
 		"data-speaker": speaker,
-		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-(--radius-overlay) px-3 py-2") : "text-fg-muted", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-overlay px-3 py-2") : "text-fg-muted", className),
 		...props
 	});
 }

package/dist/elements/chart.js

@@ -45,7 +45,7 @@ function Chart({ label, value, delta, points, visibleCount, variant = "area", cl
 	const rising = delta !== void 0 && !falling;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "chart",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-overlay p-4", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/chat-panel.js

@@ -27,7 +27,7 @@ import { ArrowUpIcon } from "lucide-react";
 function ChatPanel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chat-panel",
-		className: cn(paper, "flex h-[270px] w-full max-w-md flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(paper, "flex h-[270px] w-full max-w-md flex-col overflow-hidden rounded-overlay", className),
 		...props
 	});
 }
@@ -46,7 +46,7 @@ function ChatPanelMessages({ className, ...props }) {
 function ChatPanelUserMessage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chat-panel-user-message",
-		className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in self-end rounded-(--radius-overlay) px-3 py-1.5 text-(length:--cue-text-ui) duration-300", className),
+		className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in self-end rounded-overlay px-3 py-1.5 text-(length:--cue-text-ui) duration-300", className),
 		...props
 	});
 }

package/dist/elements/checkpoint-history.js

@@ -16,7 +16,7 @@ function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...pr
 	const currentIndex = checkpoints.findIndex((checkpoint) => checkpoint.id === currentId);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "checkpoint-history",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-3", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-overlay p-3", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "px-1.5 pb-1 text-(length:--cue-text-body) font-medium",
@@ -25,7 +25,7 @@ function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...pr
 			const ahead = currentIndex >= 0 && i > currentIndex;
 			const current = checkpoint.id === currentId;
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn("group flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-1.5 transition-colors", current ? "bg-surface-1" : "hover:bg-surface-1", ahead && "opacity-40"),
+				className: cn("group flex items-center gap-2.5 rounded-surface px-1.5 py-1.5 transition-colors", current ? "bg-surface-1" : "hover:bg-surface-1", ahead && "opacity-40"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,

package/dist/elements/clamp.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { CLAMP_LABELS } from "./vocabulary.js";
 import * as React from "react";
@@ -100,7 +101,7 @@ const Clamp = React.forwardRef(function Clamp({ height = 250, fade = 50, open, o
 			"data-slot": "clamp-reveal",
 			"aria-expanded": open,
 			onClick: () => onOpenChange?.(!open),
-			className: cn("text-fg-muted hover:text-fg self-start rounded-(--radius-control) py-0.5 text-(length:--cue-text-ui) transition-opacity focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none", !open && "opacity-60 group-hover/clamp:opacity-100 focus-visible:opacity-100"),
+			className: cn(`text-fg-muted hover:text-fg self-start rounded-control py-0.5 text-(length:--cue-text-ui) transition-opacity ${FOCUS_RING} motion-reduce:transition-none`, !open && "opacity-60 group-hover/clamp:opacity-100 focus-visible:opacity-100"),
 			children: open ? said.less : said.more
 		}) : null]
 	});

package/dist/elements/code-diff.js

@@ -28,7 +28,7 @@ const GUTTER = {
 function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "code-diff",
-		className: cn(paper, "w-full max-w-md overflow-hidden rounded-(--radius-overlay) font-mono text-(length:--cue-text-ui)", className),
+		className: cn(paper, "w-full max-w-md overflow-hidden rounded-overlay font-mono text-(length:--cue-text-ui)", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between px-4 pt-3 pb-2",

package/dist/elements/code-runner.js

@@ -22,7 +22,7 @@ import { Loader2Icon, PlayIcon } from "lucide-react";
 function CodeRunner({ language, code, state, output, durationMs, onRun, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "code-runner",
-		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-overlay", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/command-palette.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { field, floating, mono } from "./surfaces.js";
 import { useEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -50,7 +51,7 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "command-palette",
-		className: cn(floating, "flex w-full max-w-sm flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(floating, "flex w-full max-w-sm flex-col overflow-hidden rounded-overlay", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -68,10 +69,10 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 						"aria-controls": listId,
 						"aria-autocomplete": "list",
 						"aria-activedescendant": ordered.some((command) => command.id === activeId) ? optionId(activeId) : void 0,
-						className: "text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-body) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+						className: `text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-body) outline-none ${FOCUS_RING}`
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+						className: cn(field, mono, "text-fg-subtle rounded-control px-1.5 py-0.5"),
 						children: "esc"
 					})
 				]
@@ -97,14 +98,14 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 						"aria-selected": command.id === activeId,
 						onMouseDown: (event) => event.preventDefault(),
 						onClick: () => onRun?.(command.id),
-						className: cn("flex items-center gap-2 rounded-(--radius-surface) px-2 py-1.5 text-start transition-colors", command.id === activeId ? "bg-surface-2" : "hover:bg-surface-1"),
+						className: cn("flex items-center gap-2 rounded-surface px-2 py-1.5 text-start transition-colors", command.id === activeId ? "bg-surface-2" : "hover:bg-surface-1"),
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
 							children: command.label
 						}), /* @__PURE__ */ jsx("span", {
 							className: "flex shrink-0 gap-1",
 							children: command.keys.map((key) => /* @__PURE__ */ jsx("span", {
-								className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+								className: cn(field, mono, "text-fg-subtle rounded-control px-1.5 py-0.5"),
 								children: key
 							}, key))
 						})]

package/dist/elements/comparison-card.js

@@ -20,14 +20,14 @@ import { CheckIcon, MinusIcon } from "lucide-react";
 function ComparisonCard({ traitLabels, options, recommendedId, reason, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "comparison-card",
-		className: cn(paper, "flex w-full max-w-md flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-md flex-col gap-3 rounded-overlay p-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex gap-2",
 			children: options.map((option) => {
 				const recommended = option.id === recommendedId;
 				return /* @__PURE__ */ jsxs("div", {
-					className: cn("flex min-w-0 flex-1 flex-col gap-2 rounded-(--radius-surface) p-3 transition-colors", recommended ? "bg-stream/10" : field),
+					className: cn("flex min-w-0 flex-1 flex-col gap-2 rounded-surface p-3 transition-colors", recommended ? "bg-stream/10" : field),
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-0.5",
 						children: [/* @__PURE__ */ jsxs("span", {