@cueplusplus/ui 0.16.0 → 0.18.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.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 hover:border-[color:var(--cue-style-field-hover-edge,transparent)] 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-[var(--cue-style-disabled-opacity,0.4)] data-[disabled]:opacity-[var(--cue-style-disabled-opacity,0.4)] disabled:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,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)))] data-[disabled]:bg-[linear-gradient(var(--cue-style-disabled-fill,var(--cue-sunken)),var(--cue-style-disabled-fill,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)))] 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.
  *
@@ -151,7 +171,15 @@ declare const bareControlClasses = "min-w-0 flex-1 border-0 bg-transparent p-0 f
  * still visible. `data-invalid` is read off the wrapper, which is where Base
  * UI's `Field` stamps it and where the group already takes
  * `data-[invalid]:border-danger` from {@link controlVariants}.
+ *
+ * The rim is `has-focus:`, not `focus-within:`, for the order Tailwind emits
+ * them in: `focus-within:` comes before `hover:` and `has-focus:` after it, both
+ * before `data-[invalid]:`. Round 6 gave the chassis a hover edge
+ * (`FIELD_HOVER_EDGE`, `transparent` unless a set names one), and under the
+ * pointer it painted over a focused group's rim in every Look; the closing
+ * pass's browser run caught it (`form-focus.spec.ts`, a grouped field). The
+ * wrapper never takes focus itself, so `:has(:focus)` is the same test.
  */
-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 = "has-focus: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 };