@cueplusplus/ui 0.16.0 → 0.17.0

package/dist/elements/terminal-block.js

@@ -21,7 +21,7 @@ import { CheckIcon, Loader2Icon } from "lucide-react";
 function TerminalBlock({ command, lines, visibleCount, done, variant = "paper", className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "terminal-block",
-		className: cn(variant === "ink" ? "bg-sunken" : paper, "w-full max-w-md overflow-hidden rounded-(--radius-overlay) font-mono text-(length:--cue-text-ui)", className),
+		className: cn(variant === "ink" ? "bg-sunken" : 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-1.5",

package/dist/elements/thread-list.js

@@ -33,7 +33,7 @@ function ThreadList({ threads, activeIndex, onActiveIndexChange, className, ...p
 				type: "button",
 				"aria-current": active || void 0,
 				onClick: () => onActiveIndexChange?.(i),
-				className: cn("group flex w-full items-center justify-between gap-2 rounded-(--radius-surface) px-3 py-2 text-start text-(length:--cue-text-body) transition-colors", active ? field : "hover:bg-surface-1"),
+				className: cn("group flex w-full items-center justify-between gap-2 rounded-surface px-3 py-2 text-start text-(length:--cue-text-body) transition-colors", active ? field : "hover:bg-surface-1"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "flex-1 truncate",

package/dist/elements/thread-search.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { field, mono, paper } from "./surfaces.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PinIcon, SearchIcon } from "lucide-react";
@@ -42,7 +43,7 @@ function ThreadSearch({ threads, query, activeId, onQueryChange, onSelect, class
 	const row = (thread) => /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		onClick: () => onSelect?.(thread.id),
-		className: cn("flex flex-col gap-0.5 rounded-(--radius-surface) px-2 py-1 text-start transition-colors", thread.id === activeId ? "bg-surface-1" : "hover:bg-surface-1"),
+		className: cn("flex flex-col gap-0.5 rounded-surface px-2 py-1 text-start transition-colors", thread.id === activeId ? "bg-surface-1" : "hover:bg-surface-1"),
 		children: [/* @__PURE__ */ jsxs("span", {
 			className: "flex items-center gap-1.5",
 			children: [thread.pinned && /* @__PURE__ */ jsx(PinIcon, { className: "text-fg-subtle size-2.5 shrink-0" }), /* @__PURE__ */ jsx("span", {
@@ -56,18 +57,18 @@ function ThreadSearch({ threads, query, activeId, onQueryChange, onSelect, class
 	}, thread.id);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "thread-search",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-1.5 rounded-(--radius-overlay) p-3", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1.5 rounded-overlay p-3", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: cn(field, "flex items-center gap-2 rounded-(--radius-surface) px-2.5 py-1.5"),
+				className: cn(field, "flex items-center gap-2 rounded-surface px-2.5 py-1.5"),
 				children: [/* @__PURE__ */ jsx(SearchIcon, { className: "text-fg-subtle size-3.5 shrink-0" }), /* @__PURE__ */ jsx("input", {
 					value: query,
 					onChange: (event) => onQueryChange?.(event.target.value),
 					onKeyDown,
 					placeholder: "Search threads",
 					"aria-label": "Search threads",
-					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}`
 				})]
 			}),
 			pinned.length > 0 && /* @__PURE__ */ jsxs("div", {

package/dist/elements/timeline.js

@@ -15,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function ElementsTimeline({ events, visibleCount, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "timeline",
-		className: cn(paper, "flex w-full max-w-sm flex-col rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col rounded-overlay p-4", className),
 		...props,
 		children: take(events, visibleCount).map((event, i, shown) => /* @__PURE__ */ jsxs("div", {
 			className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both grid grid-cols-[3.5rem_1rem_minmax(0,1fr)] gap-x-2 duration-300",

package/dist/elements/todo-list.js

@@ -41,11 +41,11 @@ function TodoList({ items, revision, className, ...props }) {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "flex size-4 h-5 shrink-0 items-center justify-center",
 					children: item.status === "done" ? /* @__PURE__ */ jsx("span", {
-						className: "border-border-strong bg-surface-2 flex size-3.5 items-center justify-center rounded-(--radius-control) border",
+						className: "border-border-strong bg-surface-2 flex size-3.5 items-center justify-center rounded-control border",
 						children: /* @__PURE__ */ jsx(CheckIcon, { className: "text-fg-muted size-2.5" })
 					}) : item.status === "active" ? /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin text-stream motion-reduce:animate-none" }) : /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: "border-border-strong size-3.5 rounded-(--radius-control) border"
+						className: "border-border-strong size-3.5 rounded-control border"
 					})
 				}), /* @__PURE__ */ jsx("span", {
 					className: cn("min-w-0 flex-1 leading-5 break-words", item.status === "done" && "text-fg-subtle line-through decoration-[1.5px]", item.status === "active" && "text-fg", item.status === "pending" && "text-fg-muted"),

package/dist/elements/tool-call.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { ShimmerLabel, SwapLabel, collapsePanel, field, mono } from "./surfaces.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -29,7 +30,7 @@ function ToolCall({ label, activeLabel, query, request, result, running, open, o
 		onOpenChange,
 		className: cn("w-full max-w-sm", className),
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
-			className: "group/trigger text-fg-muted hover:text-fg flex items-center gap-2 rounded-(--radius-control) py-1 text-(length:--cue-text-body) transition-colors outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+			className: `group/trigger text-fg-muted hover:text-fg flex items-center gap-2 rounded-control py-1 text-(length:--cue-text-body) transition-colors outline-none ${FOCUS_RING}`,
 			children: [
 				/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-90 motion-reduce:transition-none" }),
 				/* @__PURE__ */ jsxs(SwapLabel, {
@@ -42,7 +43,7 @@ function ToolCall({ label, activeLabel, query, request, result, running, open, o
 					}), /* @__PURE__ */ jsx(Fragment, { children: label })]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: cn(mono, "bg-surface-2 text-fg-muted rounded-(--radius-control) px-1.5 py-0.5"),
+					className: cn(mono, "bg-surface-2 text-fg-muted rounded-control px-1.5 py-0.5"),
 					children: query
 				}),
 				/* @__PURE__ */ jsx("span", {
@@ -53,7 +54,7 @@ function ToolCall({ label, activeLabel, query, request, result, running, open, o
 		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
 			className: cn(collapsePanel, "outline-none"),
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn(field, "mt-2 overflow-hidden rounded-(--radius-overlay) text-(length:--cue-text-ui)"),
+				className: cn(field, "mt-2 overflow-hidden rounded-overlay text-(length:--cue-text-ui)"),
 				children: [
 					/* @__PURE__ */ jsxs("div", {
 						className: "px-3.5 pt-2.5 pb-2",

package/dist/elements/tool-error.js

@@ -24,7 +24,7 @@ import { AlertCircleIcon, Loader2Icon, RotateCwIcon } from "lucide-react";
 function ToolError({ name, target, message, attempt, maxAttempts, retrying, onRetry, onSkip, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "tool-error",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-3.5", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-overlay p-3.5", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -50,7 +50,7 @@ function ToolError({ name, target, message, attempt, maxAttempts, retrying, onRe
 				]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn(field, "rounded-(--radius-surface) px-3 py-2 font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-danger"),
+				className: cn(field, "rounded-surface px-3 py-2 font-mono text-(length:--cue-text-label) leading-(--cue-leading-ui) text-danger"),
 				children: message
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/tool-group.js

@@ -22,7 +22,7 @@ function ToolGroup({ label, tools, open, onOpenChange, className, ...props }) {
 	const failed = tools.filter((tool) => tool.state === "failed").length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "tool-group",
-		className: cn(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col overflow-hidden rounded-overlay", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",

package/dist/elements/tool-timeline.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { ShimmerLabel, SwapLabel, collapsePanel } from "./surfaces.js";
 import { take } from "./range.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ function ToolTimeline({ steps, visibleSteps, streaming, open, onOpenChange, rest
 		onOpenChange,
 		className: cn("w-full max-w-sm", className),
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
-			className: "group/trigger text-fg-muted hover:text-fg flex items-center gap-1.5 rounded-(--radius-control) py-1 text-(length:--cue-text-body) transition-colors outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+			className: `group/trigger text-fg-muted hover:text-fg flex items-center gap-1.5 rounded-control py-1 text-(length:--cue-text-body) transition-colors outline-none ${FOCUS_RING}`,
 			children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5 shrink-0 opacity-60 transition-transform duration-200 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[panel-open]/trigger:rotate-90 motion-reduce:transition-none" }), /* @__PURE__ */ jsxs(SwapLabel, {
 				active: streaming ? 0 : 1,
 				className: "text-start tabular-nums",
@@ -58,7 +59,7 @@ function ToolTimeline({ steps, visibleSteps, streaming, open, onOpenChange, rest
 								children: step.verb
 							}),
 							/* @__PURE__ */ jsx("span", {
-								className: "bg-surface-2 text-fg-muted rounded-(--radius-control) px-1.5 py-0.5 font-mono text-(length:--cue-text-label)",
+								className: "bg-surface-2 text-fg-muted rounded-control px-1.5 py-0.5 font-mono text-(length:--cue-text-label)",
 								children: step.chip
 							})
 						]
@@ -66,7 +67,7 @@ function ToolTimeline({ steps, visibleSteps, streaming, open, onOpenChange, rest
 				}), stats.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-1.5 pt-1",
 					children: stats.map((stat) => /* @__PURE__ */ jsxs("span", {
-						className: "bg-surface-2 text-fg-muted inline-flex items-center gap-1 rounded-(--radius-control) px-1.5 py-0.5 font-mono text-(length:--cue-text-label)",
+						className: "bg-surface-2 text-fg-muted inline-flex items-center gap-1 rounded-control px-1.5 py-0.5 font-mono text-(length:--cue-text-label)",
 						children: [
 							/* @__PURE__ */ jsx("span", { children: stat.file }),
 							stat.added !== void 0 && /* @__PURE__ */ jsxs("span", {

package/dist/elements/trace-waterfall.js

@@ -21,7 +21,7 @@ function TraceWaterfall({ spans, totalMs, visibleCount, className, ...props }) {
 	const span = totalMs || 1;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "trace-waterfall",
-		className: cn(paper, "flex w-full max-w-md flex-col gap-2 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-md flex-col gap-2 rounded-overlay p-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-baseline justify-between",

package/dist/elements/verdict-row.js

@@ -82,7 +82,7 @@ const VerdictRow = React.forwardRef(function VerdictRow({ score, title, summary,
 		ref,
 		"data-slot": "verdict-row",
 		"data-verdict": tone,
-		className: cn(paper, "flex w-full flex-col gap-2 rounded-(--radius-overlay) px-3 py-2.5", className),
+		className: cn(paper, "flex w-full flex-col gap-2 rounded-overlay px-3 py-2.5", className),
 		...elementProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -131,7 +131,7 @@ const VerdictRow = React.forwardRef(function VerdictRow({ score, title, summary,
 						const chip = odds >= 70 ? "danger" : odds >= 50 ? "warn" : "neutral";
 						return /* @__PURE__ */ jsxs("li", {
 							"data-color": chip,
-							className: cn(field, "flex max-w-full items-baseline gap-1.5 rounded-(--radius-control) px-2 py-0.5 text-(length:--cue-text-ui)", chip === "danger" ? "text-danger" : chip === "warn" ? "text-warn" : "text-fg-muted"),
+							className: cn(field, "flex max-w-full items-baseline gap-1.5 rounded-control px-2 py-0.5 text-(length:--cue-text-ui)", chip === "danger" ? "text-danger" : chip === "warn" ? "text-warn" : "text-fg-muted"),
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "min-w-0 truncate",
 								children: issue.label

package/dist/elements/voice-conversation.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { ghostButton, mono, paper } from "./surfaces.js";
 import { clamp } from "./range.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -38,7 +39,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 	const canInterrupt = mode === "speaking" && onInterrupt !== void 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "voice-conversation",
-		className: cn(paper, "flex w-full max-w-xs flex-col items-center gap-4 rounded-(--radius-overlay) px-5 py-5", className),
+		className: cn(paper, "flex w-full max-w-xs flex-col items-center gap-4 rounded-overlay px-5 py-5", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("button", {
@@ -46,7 +47,7 @@ function VoiceConversation({ mode, amplitude, transcript, muted, onToggleMute, o
 				onClick: onInterrupt,
 				disabled: !canInterrupt,
 				"aria-label": "Interrupt the assistant",
-				className: "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent relative flex size-24 items-center justify-center rounded-full outline-none disabled:cursor-default",
+				className: `${FOCUS_RING} relative flex size-24 items-center justify-center rounded-full outline-none disabled:cursor-default`,
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,

package/dist/elements/web-preview.js

@@ -19,7 +19,7 @@ import { ExternalLinkIcon, RotateCwIcon } from "lucide-react";
 function WebPreview({ origin, loading, children, onReload, onOpenExternal, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "web-preview",
-		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", {
 			className: "flex items-center gap-1.5 px-2.5 py-2",

package/dist/elements/web-search.js

@@ -42,10 +42,10 @@ function WebSearch({ query, results, visibleResults, searching, cycle, className
 			/* @__PURE__ */ jsx("div", {
 				className: "flex min-h-[5.75rem] flex-col",
 				children: take(results, visibleResults).map((result) => /* @__PURE__ */ jsxs("div", {
-					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 -mx-2.5 flex items-center gap-2.5 rounded-(--radius-surface) px-2.5 py-1.5 transition-colors duration-300",
+					className: "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 -mx-2.5 flex items-center gap-2.5 rounded-surface px-2.5 py-1.5 transition-colors duration-300",
 					children: [
 						/* @__PURE__ */ jsx("span", {
-							className: "bg-surface-2 text-fg-muted flex size-4 shrink-0 items-center justify-center rounded-(--radius-control) text-(length:--cue-text-micro) font-medium",
+							className: "bg-surface-2 text-fg-muted flex size-4 shrink-0 items-center justify-center rounded-control text-(length:--cue-text-micro) font-medium",
 							children: result.domain.charAt(0).toUpperCase()
 						}),
 						/* @__PURE__ */ jsx("span", {

package/dist/elements/work-collapse.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { ShimmerLabel } from "./surfaces.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -111,7 +112,7 @@ const WorkCollapse = React.forwardRef(function WorkCollapse({ durationMs, toolCa
 			type: "button",
 			"aria-expanded": open,
 			onClick: () => onOpenChange?.(!open),
-			className: "hover:bg-surface-1 -mx-2 flex items-center gap-2.5 rounded-(--radius-control) px-2 py-1 text-start transition-colors focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none",
+			className: `hover:bg-surface-1 -mx-2 flex items-center gap-2.5 rounded-control px-2 py-1 text-start transition-colors ${FOCUS_RING} motion-reduce:transition-none`,
 			children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
 				"aria-hidden": true,
 				className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", open && "rotate-90")

package/dist/flow/node-card.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { FLOW_NODE_FRAME_COLOR, FLOW_NODE_FRAME_PROPERTY, flowFrameColor } from "./_frame.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -63,7 +64,7 @@ const NodeCard = React.forwardRef(function NodeCard({ className, style, tone, st
 		"data-slot": "node-card",
 		"data-tone": tone,
 		"data-state": state,
-		className: cn("relative flex min-w-0 flex-col rounded-(--radius-surface) bg-surface-1 font-mono text-(length:--cue-text-label) text-fg outline-1 outline-solid -outline-offset-1", state === "disabled" && "opacity-50", className),
+		className: cn("relative flex min-w-0 flex-col rounded-surface bg-surface-1 font-mono text-(length:--cue-text-label) text-fg outline-1 outline-solid -outline-offset-1", state === "disabled" && "opacity-50", className),
 		style: {
 			outlineColor: FLOW_NODE_FRAME_COLOR,
 			...frame === void 0 ? null : { [FLOW_NODE_FRAME_PROPERTY]: frame },
@@ -83,7 +84,7 @@ const NodeCard = React.forwardRef(function NodeCard({ className, style, tone, st
 				"aria-expanded": expanded,
 				"aria-controls": hasBody ? bodyId : void 0,
 				"aria-label": toggleLabel ?? (expanded ? "Collapse" : "Expand"),
-				className: cn(NO_CANVAS_GESTURE, "shrink-0 cursor-pointer border-0 bg-transparent p-0 text-(length:--cue-text-micro) leading-none text-fg-subtle outline-none select-none hover:text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent"),
+				className: cn(NO_CANVAS_GESTURE, `shrink-0 cursor-pointer border-0 bg-transparent p-0 text-(length:--cue-text-micro) leading-none text-fg-subtle outline-none select-none hover:text-fg-muted ${FOCUS_RING_OFFSET_2}`),
 				onClick: () => onExpandedChange(!expanded),
 				children: /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",

package/dist/flow/use-flow-theme.js

@@ -1,4 +1,5 @@
 "use client";
+import { useRead } from "../system/published.js";
 import { ThemeContext } from "../system/theme-provider.js";
 import { FLOW_NODE_FRAME_PROPERTY, flowFrameColor } from "./_frame.js";
 import { SignalEdge } from "./signal-edge.js";
@@ -96,7 +97,7 @@ const DEFAULT_EDGE_OPTIONS = Object.freeze({
 * const nodes = inputs.map((input) => ({ ...input, style: theme.nodeStyles.input }));
 */
 function useFlowTheme() {
-	const colorMode = React.useContext(ThemeContext)?.resolvedMode ?? "dark";
+	const colorMode = useRead(ThemeContext)?.resolvedMode ?? "dark";
 	return React.useMemo(() => ({
 		colorMode,
 		style: FLOW_THEME_VARIABLES,

package/dist/forms/_chassis.d.ts

@@ -83,14 +83,34 @@ import { FormControlSize } from "./_chassis-size.js";
  *
  * The compound modifier outranks the plain one on specificity — an attribute
  * selector and a pseudo-class against one pseudo-class — so its position in
- * Tailwind's utility order cannot decide it. `focus-visible:outline-solid` and
- * `focus-visible:outline-2` still supply the style and the width in both cases,
- * which is why only the colour is restated.
+ * Tailwind's utility order cannot decide it. {@link FOCUS_RING_FIELD} still
+ * supplies the style and the width in both cases, which is why only the
+ * colour is restated.
  *
  * `focus-visible:outline-solid` re-declares the outline style the sibling
  * `outline-none` switched off — see the note on `buttonChassis`.
+ *
+ * The width is {@link FOCUS_RING_FIELD}'s, read from `--cue-style-focus-width`
+ * (`_focus-ring.ts` says why every ring in this system shares one module); the
+ * border it is pulled back over reads `--cue-style-focus-edge` for the same
+ * reason a Look needs to move it — tender's dark band and kiln both do.
+ *
+ * The face (mono, unless a style set names another — `INPUT_FACE` says why) is
+ * what a person's typing renders in, at the body weight (`BODY_WEIGHT`:
+ * inherited, as it was before the name existed, unless a style set names one);
+ * a call site that deliberately keeps a typed value in mono regardless of the
+ * set (a hex colour code, a DMX value) restates `font-mono` on top, as
+ * `color-picker.tsx`'s hex field does.
+ *
+ * **The resting shade** ({@link REST_SHADE_CLASS}, spec §3.10) is the one
+ * shadow this recipe draws: the stroke paints a border and a ground and no
+ * shadow, so the shade is added as a utility of its own rather than composed
+ * into a list. It paints nothing until a pack tints `paint-rest-shade` —
+ * measured in `tests/browser/paint-elevation-noop.spec.ts` — and a caller's
+ * own `shadow-` utility replaces it through `twMerge`, as it would have
+ * replaced nothing before.
  */
-declare const controlSurface = "w-full rounded-(--radius-control) border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
+declare const controlSurface = "w-full rounded-control border-transparent border-(length:--cue-paint-stroke-width) bg-[linear-gradient(var(--cue-sunken),var(--cue-sunken)),linear-gradient(var(--cue-paint-stroke-angle),var(--cue-paint-stroke-from,var(--cue-border)),var(--cue-paint-stroke-to,var(--cue-border)))] bg-origin-border [background-clip:padding-box,border-box] shadow-[shadow:0_calc(2px*var(--cue-paint-shadow-scale))_calc(4px*var(--cue-paint-shadow-scale))_var(--cue-paint-rest-shade,transparent)] font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-fg placeholder:text-fg-subtle outline-none focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] focus-visible:outline-solid focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] focus-visible:outline-(--cue-focus) focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger";
 /**
  * The full recessed-control recipe, one variant per rung of the control ladder.
  *
@@ -120,7 +140,7 @@ declare const controlClasses: string;
  * inherits the font size from the wrapper so the two never disagree about which
  * density rung they are on.
  */
-declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40";
+declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-[family-name:var(--cue-style-input-face,var(--cue-font-mono))] font-[number:var(--cue-style-body-weight,inherit)] text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40";
 /**
  * Focus feedback for a wrapper that owns the rim on behalf of an inner control.
  *
@@ -152,6 +172,6 @@ declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 f
  * UI's `Field` stamps it and where the group already takes
  * `data-[invalid]:border-danger` from {@link controlVariants}.
  */
-declare const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:-outline-offset-1 has-focus-visible:outline-(--cue-focus) data-[invalid]:has-focus-visible:outline-danger";
+declare const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-solid has-focus-visible:outline-[length:var(--cue-style-focus-width,var(--cue-focus-ring))] has-focus-visible:outline-(--cue-focus) has-focus-visible:outline-offset-[var(--cue-style-field-focus-offset,-1px)] data-[invalid]:has-focus-visible:outline-danger";
 //#endregion
 export { ControlVariantProps, type FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_chassis.js

@@ -1,5 +1,10 @@
+import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
 import { cva } from "../lib/cva.js";
+import { FOCUS_RING_FIELD, FOCUS_RING_GROUP_FIELD } from "../system/_focus-ring-field.js";
+import { CONTROL_STEP_SIZE_BODY, CONTROL_STEP_SIZE_SM } from "../system/_style-control-step.js";
 import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
+import { BODY_WEIGHT } from "../system/_style-body-weight.js";
+import { INPUT_FACE } from "../system/_style-input-face.js";
 //#region src/forms/_chassis.ts
 /**
 * Everything the recessed control chassis paints except the box itself.
@@ -83,14 +88,34 @@ import { STROKE_SUNKEN } from "../system/_paint-stroke-sunken.js";
 *
 * The compound modifier outranks the plain one on specificity — an attribute
 * selector and a pseudo-class against one pseudo-class — so its position in
-* Tailwind's utility order cannot decide it. `focus-visible:outline-solid` and
-* `focus-visible:outline-2` still supply the style and the width in both cases,
-* which is why only the colour is restated.
+* Tailwind's utility order cannot decide it. {@link FOCUS_RING_FIELD} still
+* supplies the style and the width in both cases, which is why only the
+* colour is restated.
 *
 * `focus-visible:outline-solid` re-declares the outline style the sibling
 * `outline-none` switched off — see the note on `buttonChassis`.
+*
+* The width is {@link FOCUS_RING_FIELD}'s, read from `--cue-style-focus-width`
+* (`_focus-ring.ts` says why every ring in this system shares one module); the
+* border it is pulled back over reads `--cue-style-focus-edge` for the same
+* reason a Look needs to move it — tender's dark band and kiln both do.
+*
+* The face (mono, unless a style set names another — `INPUT_FACE` says why) is
+* what a person's typing renders in, at the body weight (`BODY_WEIGHT`:
+* inherited, as it was before the name existed, unless a style set names one);
+* a call site that deliberately keeps a typed value in mono regardless of the
+* set (a hex colour code, a DMX value) restates `font-mono` on top, as
+* `color-picker.tsx`'s hex field does.
+*
+* **The resting shade** ({@link REST_SHADE_CLASS}, spec §3.10) is the one
+* shadow this recipe draws: the stroke paints a border and a ground and no
+* shadow, so the shade is added as a utility of its own rather than composed
+* into a list. It paints nothing until a pack tints `paint-rest-shade` —
+* measured in `tests/browser/paint-elevation-noop.spec.ts` — and a caller's
+* own `shadow-` utility replaces it through `twMerge`, as it would have
+* replaced nothing before.
 */
-const controlSurface = `w-full rounded-(--radius-control) ${STROKE_SUNKEN} font-mono text-fg placeholder:text-fg-subtle outline-none focus:border-border-strong focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-(--cue-focus) disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger`;
+const controlSurface = `w-full rounded-control ${STROKE_SUNKEN} ${REST_SHADE_CLASS} ${INPUT_FACE} ${BODY_WEIGHT} text-fg placeholder:text-fg-subtle outline-none focus:border-[color:var(--cue-style-focus-edge,var(--cue-border-strong))] ${FOCUS_RING_FIELD} disabled:opacity-40 data-[disabled]:opacity-40 data-[invalid]:border-danger data-[invalid]:focus-visible:outline-danger`;
 /**
 * The full recessed-control recipe, one variant per rung of the control ladder.
 *
@@ -103,9 +128,9 @@ const controlSurface = `w-full rounded-(--radius-control) ${STROKE_SUNKEN} font-
 */
 const controlVariants = cva(controlSurface, {
 	variants: { size: {
-		sm: "h-control-sm px-(--cue-space-3) text-(length:--cue-text-label)",
+		sm: `h-control-sm px-(--cue-space-3) ${CONTROL_STEP_SIZE_SM}`,
 		md: "h-control-md px-(--cue-space-4) text-(length:--cue-text-ui)",
-		lg: "h-control-lg px-(--cue-space-5) text-(length:--cue-text-body)"
+		lg: `h-control-lg px-(--cue-space-5) ${CONTROL_STEP_SIZE_BODY}`
 	} },
 	defaultVariants: { size: "md" }
 });
@@ -123,7 +148,7 @@ const controlClasses = controlVariants();
 * inherits the font size from the wrapper so the two never disagree about which
 * density rung they are on.
 */
-const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40";
+const bareControlClasses = `min-w-0 flex-1 border-0 bg-transparent p-0 ${INPUT_FACE} ${BODY_WEIGHT} text-[length:inherit] text-fg placeholder:text-fg-subtle outline-none disabled:opacity-40`;
 /**
 * Focus feedback for a wrapper that owns the rim on behalf of an inner control.
 *
@@ -155,6 +180,6 @@ const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 font-mono
 * UI's `Field` stamps it and where the group already takes
 * `data-[invalid]:border-danger` from {@link controlVariants}.
 */
-const controlGroupFocusClasses = "focus-within:border-border-strong has-focus-visible:outline-2 has-focus-visible:outline-solid has-focus-visible:-outline-offset-1 has-focus-visible:outline-(--cue-focus) data-[invalid]:has-focus-visible:outline-danger";
+const controlGroupFocusClasses = `focus-within:border-border-strong ${FOCUS_RING_GROUP_FIELD} data-[invalid]:has-focus-visible:outline-danger`;
 //#endregion
 export { bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants };

package/dist/forms/_listbox.js

@@ -1,4 +1,7 @@
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
 import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "../overlays/_surface.js";
+import { OPTION_ROW } from "../system/_style-option.js";
 //#region src/forms/_listbox.ts
 /**
 * The shared skin of every filterable list in this group — `Combobox`,
@@ -26,9 +29,9 @@ const listboxListClasses = "max-h-[min(var(--available-height),18rem)] overflow-
 * navigation and the pointer agree on which row is active, and the tint is
 * `accent-soft` rather than a solid fill (the luma defect ruling).
 */
-const listboxItemClasses = "flex h-control-sm cursor-default items-center gap-(--cue-space-2) px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted outline-none select-none data-[highlighted]:bg-accent-soft data-[highlighted]:text-fg data-[selected]:text-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-40";
+const listboxItemClasses = `flex h-control-sm cursor-default items-center gap-(--cue-space-2) px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) ${OPTION_ROW} outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40`;
 /** The "nothing matched" line: same rhythm as a row, but muted and unreachable. */
-const listboxEmptyClasses = "flex h-control-sm items-center px-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none";
+const listboxEmptyClasses = `flex h-control-sm items-center px-(--cue-space-3) ${CONTROL_FACE} text-(length:--cue-text-ui) text-fg-subtle select-none`;
 /** The tick gutter, always reserved so labels never jog sideways. */
 const listboxIndicatorClasses = "flex size-icon-sm shrink-0 items-center justify-center";
 /**
@@ -46,10 +49,10 @@ const chipFieldClasses = "flex w-full cursor-text flex-wrap items-center gap-(--
 * user data throws away information the user typed on purpose. Same shape, same
 * palette, ordinary casing.
 */
-const valueChipClasses = "group/chip inline-flex h-chip max-w-full min-w-0 cursor-default items-center gap-(--cue-space-1) rounded-(--radius-control) border border-border bg-surface-2 py-0 pr-(--cue-space-1) pl-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-none text-fg-muted outline-none select-none data-[highlighted]:border-accent/60 data-[highlighted]:text-fg focus-within:border-accent/60 focus-within:text-fg";
+const valueChipClasses = "group/chip inline-flex h-chip max-w-full min-w-0 cursor-default items-center gap-(--cue-space-1) rounded-control border border-border bg-surface-2 py-0 pr-(--cue-space-1) pl-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-none text-fg-muted outline-none select-none data-[highlighted]:border-accent/60 data-[highlighted]:text-fg focus-within:border-accent/60 focus-within:text-fg";
 /** The chip's remove affordance. */
-const chipRemoveClasses = "flex size-icon-sm shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent";
+const chipRemoveClasses = `flex size-icon-sm shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING}`;
 /** The trailing caret / clear affordance beside a filterable input. */
-const listboxAdornmentClasses = "flex shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent";
+const listboxAdornmentClasses = `flex shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors hover:text-fg ${FOCUS_RING}`;
 //#endregion
 export { chipFieldClasses, chipRemoveClasses, listboxAdornmentClasses, listboxEmptyClasses, listboxIndicatorClasses, listboxItemClasses, listboxListClasses, listboxPopupClasses, listboxPositionerClasses, valueChipClasses };

package/dist/forms/checkbox.js

@@ -1,5 +1,11 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { CONTROL_FACE } from "../system/_style-control-face.js";
+import { LABEL_INK } from "../system/_style-label-ink.js";
+import { REST_SHADE_CLASS } from "../system/_paint-rest-shade.js";
+import { CHECK_EDGE, CHECK_RADIUS, CHECK_SIZE_MD } from "../system/_style-check.js";
+import { CONTROL_LABEL_WEIGHT } from "../system/_style-control-label.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox } from "@base-ui/react/checkbox";
@@ -53,7 +59,7 @@ const Checkbox$1 = React.forwardRef(function Checkbox$2({ className, label, size
 		ref,
 		"data-slot": "checkbox",
 		"aria-labelledby": hasLabel ? labelId : void 0,
-		className: cn("flex shrink-0 items-center justify-center rounded-(--radius-control) border border-border bg-sunken text-accent-fg outline-none transition-colors", size === "sm" ? "size-icon-sm" : "size-icon-md", "hover:border-border-strong", "data-[checked]:border-accent data-[checked]:bg-accent", "data-[indeterminate]:border-accent data-[indeterminate]:bg-accent", "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
+		className: cn(`flex shrink-0 items-center justify-center ${CHECK_RADIUS} border ${CHECK_EDGE} bg-sunken text-accent-fg outline-none transition-colors ${REST_SHADE_CLASS}`, size === "sm" ? "size-icon-sm" : CHECK_SIZE_MD, "hover:border-border-strong", "data-[checked]:border-accent data-[checked]:bg-accent", "data-[indeterminate]:border-accent data-[indeterminate]:bg-accent", `${FOCUS_RING}`, "data-[disabled]:pointer-events-none data-[disabled]:opacity-40", "data-[invalid]:border-danger", className),
 		...elementProps,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			className: "flex size-full items-center justify-center data-[unchecked]:hidden",
@@ -66,7 +72,7 @@ const Checkbox$1 = React.forwardRef(function Checkbox$2({ className, label, size
 	if (!hasLabel) return box;
 	return /* @__PURE__ */ jsxs("label", {
 		"data-slot": "checkbox-label",
-		className: "inline-flex cursor-pointer items-center gap-(--cue-space-3) font-mono text-(length:--cue-text-ui) text-fg-muted select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40",
+		className: cn("inline-flex cursor-pointer items-center gap-(--cue-space-3) text-(length:--cue-text-ui) select-none has-[[data-disabled]]:cursor-default has-[[data-disabled]]:opacity-40", LABEL_INK, CONTROL_LABEL_WEIGHT, CONTROL_FACE),
 		children: [box, /* @__PURE__ */ jsx("span", {
 			id: labelId,
 			children: label

package/dist/forms/env-var-input.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { Input } from "./input.js";
 import { CrossGlyph, VariableGlyph } from "./_glyphs.js";
 import { PasswordInput } from "./password-input.js";
@@ -89,7 +90,7 @@ const EnvVarInput = React.forwardRef(function EnvVarInput({ className, value: va
 		...elementProps,
 		children: variable === null ? secret ? /* @__PURE__ */ jsx(PasswordInput, { ...controlProps }) : /* @__PURE__ */ jsx(Input, { ...controlProps }) : /* @__PURE__ */ jsxs("div", {
 			"data-slot": "env-var-pill",
-			className: cn("flex w-full items-center gap-(--cue-space-2) rounded-(--radius-control) border border-warn/35 bg-warn/10 font-mono text-warn", PILL_SIZES[size], disabled === true && "opacity-40"),
+			className: cn("flex w-full items-center gap-(--cue-space-2) rounded-control border border-warn/35 bg-warn/10 font-mono text-warn", PILL_SIZES[size], disabled === true && "opacity-40"),
 			children: [
 				/* @__PURE__ */ jsx(VariableGlyph, {
 					"aria-hidden": "true",
@@ -105,7 +106,7 @@ const EnvVarInput = React.forwardRef(function EnvVarInput({ className, value: va
 					"aria-label": clearLabel,
 					disabled,
 					onClick: () => commit(""),
-					className: "ml-auto flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-warn outline-none transition-colors hover:bg-warn/20 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none",
+					className: `ml-auto flex size-icon-md shrink-0 cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-warn outline-none transition-colors hover:bg-warn/20 ${FOCUS_RING} disabled:pointer-events-none`,
 					children: /* @__PURE__ */ jsx(CrossGlyph, { className: "size-icon-sm" })
 				})
 			]

package/dist/forms/field.d.ts

@@ -29,7 +29,8 @@ interface FieldLabelProps extends Omit<Field.Label.Props, "className"> {
   className?: string;
 }
 /**
- * The name of a field: mono, uppercase, tracked out, one rung below body text.
+ * The name of a field: mono, uppercase, tracked out, one rung below body
+ * text — by default, the style set's choice inside one.
  *
  * Renders a real `<label>` wired to the field's control, so clicking it focuses
  * (or toggles) that control.