@cueplusplus/ui 0.15.0 → 0.17.0

package/dist/elements/scroll-anchor.js

@@ -90,14 +90,14 @@ function ScrollAnchor({ messages, paused = false, onSettled, className, ...props
 	const newCount = count - seenCount;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "scroll-anchor",
-		className: cn(paper, "relative h-64 w-full max-w-sm overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(paper, "relative h-64 w-full max-w-sm overflow-hidden rounded-overlay", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: viewportRef,
 				className: "flex h-full flex-col gap-2.5 overflow-y-hidden scroll-smooth motion-reduce:scroll-auto p-4",
 				children: messages.slice(0, count).map((message, i) => /* @__PURE__ */ jsx("div", {
-					className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in max-w-[85%] text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300 motion-reduce:animate-none", message.role === "user" ? cn(field, "self-end rounded-(--radius-overlay) px-3 py-1.5") : "text-fg-muted self-start"),
+					className: cn("cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in max-w-[85%] text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-300 motion-reduce:animate-none", message.role === "user" ? cn(field, "self-end rounded-overlay px-3 py-1.5") : "text-fg-muted self-start"),
 					children: message.text
 				}, i))
 			}),

package/dist/elements/settings-panel.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 { clamp } from "./range.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,7 +23,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onModelChange, onSystemPromptChange, onTemperatureChange, onToggle, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "settings-panel",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-overlay p-4", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -51,7 +52,7 @@ function SettingsPanel({ model, models, systemPrompt, temperature, toggles, onMo
 					onChange: (event) => onSystemPromptChange?.(event.target.value),
 					rows: 3,
 					"aria-label": "System prompt",
-					className: cn(field, "text-fg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent resize-none rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) outline-none")
+					className: cn(field, `text-fg-muted ${FOCUS_RING} resize-none rounded-surface px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) outline-none`)
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/shared-conversation.js

@@ -21,7 +21,7 @@ import { LinkIcon } from "lucide-react";
 function SharedConversation({ title, sharedBy, sharedAt, turns, onContinue, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "shared-conversation",
-		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("div", {
@@ -45,7 +45,7 @@ function SharedConversation({ title, sharedBy, sharedAt, turns, onContinue, clas
 			/* @__PURE__ */ jsx("div", {
 				className: "border-border flex flex-col gap-2.5 border-t px-4 py-3.5",
 				children: turns.map((turn) => /* @__PURE__ */ jsx("div", {
-					className: cn("text-(length:--cue-text-body) leading-(--cue-leading-ui)", turn.role === "user" ? "bg-surface-1 ms-auto max-w-[85%] rounded-(--radius-overlay) px-3 py-2" : "text-fg-muted"),
+					className: cn("text-(length:--cue-text-body) leading-(--cue-leading-ui)", turn.role === "user" ? "bg-surface-1 ms-auto max-w-[85%] rounded-overlay px-3 py-2" : "text-fg-muted"),
 					children: turn.text
 				}, turn.id))
 			}),

package/dist/elements/sources.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { collapsePanel, fieldInteractive, mono, paper } from "./surfaces.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -24,7 +25,7 @@ function Sources({ sources, open, onOpenChange, className }) {
 		onOpenChange,
 		className: cn("w-full max-w-sm", className),
 		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
-			className: cn(fieldInteractive, "group/trigger text-fg-muted hover:text-fg inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"),
+			className: cn(fieldInteractive, `group/trigger text-fg-muted hover:text-fg inline-flex w-fit items-center gap-1.5 rounded-full px-3.5 py-2 text-(length:--cue-text-ui) outline-none ${FOCUS_RING}`),
 			children: [
 				/* @__PURE__ */ jsx("span", { children: "Sources" }),
 				/* @__PURE__ */ jsx("span", {
@@ -38,11 +39,11 @@ function Sources({ sources, open, onOpenChange, className }) {
 			children: /* @__PURE__ */ jsx("div", {
 				className: "grid grid-cols-2 gap-2 pt-2.5",
 				children: sources.map((source) => /* @__PURE__ */ jsxs("div", {
-					className: cn(paper, "flex flex-col gap-1.5 rounded-(--radius-overlay) p-3 transition-transform hover:-translate-y-px"),
+					className: cn(paper, "flex flex-col gap-1.5 rounded-overlay p-3 transition-transform hover:-translate-y-px"),
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-1.5",
 						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: source.domain.charAt(0).toUpperCase()
 						}), /* @__PURE__ */ jsx("span", {
 							className: cn(mono, "text-fg-subtle truncate"),

package/dist/elements/speaker-identity.js

@@ -26,7 +26,7 @@ function SpeakerIdentity({ turns, className, ...props }) {
 		children: turns.map((turn) => /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2.5",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: cn("flex size-6 shrink-0 items-center justify-center rounded-(--radius-surface)", TONE[turn.kind], turn.kind === "subagent" && "rounded-full"),
+				className: cn("flex size-6 shrink-0 items-center justify-center rounded-surface", TONE[turn.kind], turn.kind === "subagent" && "rounded-full"),
 				children: turn.kind === "user" ? /* @__PURE__ */ jsx(UserIcon, { className: "size-3" }) : turn.kind === "tool" ? /* @__PURE__ */ jsx(WrenchIcon, { className: "size-3" }) : /* @__PURE__ */ jsx(BotIcon, { className: "size-3" })
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 flex-col gap-0.5",

package/dist/elements/spec-sheet.js

@@ -15,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function SpecSheet({ title, subtitle, rows, visibleCount, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "spec-sheet",
-		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 flex-col gap-0.5",

package/dist/elements/streaming-text.js

@@ -31,7 +31,7 @@ function StreamingText({ segments, count, streaming, className, ...props }) {
 			return /* @__PURE__ */ jsxs("span", {
 				className: "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both duration-500 motion-reduce:animate-none",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: cn("transition-colors duration-700 motion-reduce:transition-none", fresh && "text-stream", isMono && "bg-surface-2 rounded-(--radius-control) px-1.5 py-0.5 font-mono text-[0.85em]"),
+					className: cn("transition-colors duration-700 motion-reduce:transition-none", fresh && "text-stream", isMono && "bg-surface-2 rounded-control px-1.5 py-0.5 font-mono text-[0.85em]"),
 					children: word
 				}), " "]
 			}, i);

package/dist/elements/subagent-list.js

@@ -28,7 +28,7 @@ function SubagentList({ agents, completedCount, progress, showSummary, summaryAg
 			const done = index < completedCount;
 			const width = progress[index] ?? 0;
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn(paper, "flex flex-col gap-2 rounded-(--radius-overlay) px-3.5 py-2.5"),
+				className: cn(paper, "flex flex-col gap-2 rounded-overlay px-3.5 py-2.5"),
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [
@@ -51,7 +51,7 @@ function SubagentList({ agents, completedCount, progress, showSummary, summaryAg
 				})]
 			}, agent.name);
 		}), showSummary && /* @__PURE__ */ jsxs("div", {
-			className: cn("bg-surface-1 border border-border", "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in flex flex-col gap-2 rounded-(--radius-overlay) px-3.5 py-2.5 duration-300"),
+			className: cn("bg-surface-1 border border-border", "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in flex flex-col gap-2 rounded-overlay px-3.5 py-2.5 duration-300"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
 				children: [

package/dist/elements/suggestions.js

@@ -26,7 +26,7 @@ function Suggestions({ suggestions, selectedSuggestion, cycle, onSuggestion, var
 			type: "button",
 			"aria-pressed": selectedSuggestion === suggestion,
 			onClick: () => onSuggestion(suggestion),
-			className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both flex cursor-pointer items-center text-(length:--cue-text-body) transition-transform duration-300 hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none", list ? "w-full rounded-(--radius-overlay) px-4 py-2.5 text-start" : "rounded-full px-4 py-2", selectedSuggestion === suggestion && "bg-accent text-accent-fg"),
+			className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both flex cursor-pointer items-center text-(length:--cue-text-body) transition-transform duration-300 hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none", list ? "w-full rounded-overlay px-4 py-2.5 text-start" : "rounded-full px-4 py-2", selectedSuggestion === suggestion && "bg-accent text-accent-fg"),
 			style: { animationDelay: `${index * 70}ms` },
 			children: suggestion
 		}, suggestion))

package/dist/elements/surfaces.d.ts

@@ -11,7 +11,7 @@ declare const fieldInteractive = "bg-fg/[0.06] transition-colors hover:bg-fg/[0.
 /** The press affordance: a 4% squash on pointer-down, stilled under reduced motion. */
 declare const pressable = "transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
 /** A round chromeless icon button, with the ring cue puts on everything focusable. */
-declare const ghostButton = "flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-150 hover:bg-surface-2 hover:text-fg active:scale-[0.96] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none";
+declare const ghostButton = "flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-150 hover:bg-surface-2 hover:text-fg active:scale-[0.96] 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-1 motion-reduce:transition-none";
 /** The inverse fill: accent ground, accent ink — the one loud button in a panel. */
 declare const inkButton = "bg-accent text-accent-fg transition-[background-color,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent-hover active:scale-[0.96] motion-reduce:transition-none";
 /** The stacked layer of an icon crossfade. Both layers share one grid cell. */

package/dist/elements/surfaces.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/elements/surfaces.tsx
@@ -14,7 +15,7 @@ const fieldInteractive = "bg-fg/[0.06] transition-colors hover:bg-fg/[0.09]";
 /** The press affordance: a 4% squash on pointer-down, stilled under reduced motion. */
 const pressable = "transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.96] motion-reduce:transition-none";
 /** A round chromeless icon button, with the ring cue puts on everything focusable. */
-const ghostButton = "flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-150 hover:bg-surface-2 hover:text-fg active:scale-[0.96] focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none";
+const ghostButton = `flex items-center justify-center rounded-full text-fg-muted outline-none transition-[background-color,color,scale] duration-150 hover:bg-surface-2 hover:text-fg active:scale-[0.96] ${FOCUS_RING} motion-reduce:transition-none`;
 /** The inverse fill: accent ground, accent ink — the one loud button in a panel. */
 const inkButton = "bg-accent text-accent-fg transition-[background-color,scale] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] hover:bg-accent-hover active:scale-[0.96] motion-reduce:transition-none";
 /** The stacked layer of an icon crossfade. Both layers share one grid cell. */

package/dist/elements/tail-status.js

@@ -84,7 +84,7 @@ const TailStatus = React.forwardRef(function TailStatus({ action, detail, active
 			onCancel === void 0 ? null : /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: onCancel,
-				className: cn(ghostButton, mono, "shrink-0 rounded-(--radius-control) px-2 py-1 uppercase"),
+				className: cn(ghostButton, mono, "shrink-0 rounded-control px-2 py-1 uppercase"),
 				children: cancelLabel
 			})
 		]

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-size.d.ts

@@ -0,0 +1,22 @@
+//#region src/forms/_chassis-size.d.ts
+/**
+ * The rung of the density control ladder a form control sits on.
+ *
+ * Named `FormControlSize` rather than `ControlSize` because
+ * `@cueplusplus/ui/system` already exports a `ControlSize` for
+ * `useControlHeight`, and the root barrel re-exports both.
+ *
+ * **Its own module, and the reason is the manifest.** `@repo/docgen`
+ * attributes a custom property to a component by the FILE its class string
+ * lives in, and it does not distinguish a type-only import from a value one.
+ * While this type lived in `_chassis.ts`, `Toggle` and `ToggleGroup` — which
+ * import nothing from there but the type and paint their own `toggleVariants`
+ * box — advertised `--cue-paint-stroke-*` in their published manifests. Found
+ * in review of the stroke slice; the manifest is a public contract, so a
+ * component claiming a token it never paints is wrong in the way that matters.
+ *
+ * Nothing but a type may join this file, for the same reason.
+ */
+type FormControlSize = "sm" | "md" | "lg";
+//#endregion
+export { FormControlSize };