@cueplusplus/ui 0.16.0 → 0.17.0

package/dist/elements/model-picker.js

@@ -17,7 +17,7 @@ function ModelPicker({ models, selectedId, onSelect, className, ...props }) {
 	const families = [...new Set(models.map((model) => model.family))];
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "model-picker",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-2", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-overlay p-2", className),
 		...props,
 		children: families.map((family) => /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col",
@@ -30,7 +30,7 @@ function ModelPicker({ models, selectedId, onSelect, className, ...props }) {
 					type: "button",
 					"aria-pressed": selected,
 					onClick: () => onSelect?.(model.id),
-					className: cn("flex items-center gap-2.5 rounded-(--radius-surface) px-2 py-2 text-start transition-colors", selected ? "bg-surface-2" : "hover:bg-surface-1"),
+					className: cn("flex items-center gap-2.5 rounded-surface px-2 py-2 text-start transition-colors", selected ? "bg-surface-2" : "hover:bg-surface-1"),
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: "flex size-3.5 shrink-0 items-center justify-center",
@@ -44,7 +44,7 @@ function ModelPicker({ models, selectedId, onSelect, className, ...props }) {
 							}), /* @__PURE__ */ jsx("span", {
 								className: "flex flex-wrap gap-1",
 								children: model.capabilities.map((capability) => /* @__PURE__ */ jsx("span", {
-									className: cn(field, mono, "text-fg-muted rounded-(--radius-control) px-1 py-px"),
+									className: cn(field, mono, "text-fg-muted rounded-control px-1 py-px"),
 									children: capability
 								}, capability))
 							})]

package/dist/elements/onboarding.js

@@ -19,7 +19,7 @@ function Onboarding({ steps, index, onNext, onSkip, className, ...props }) {
 	const last = current >= steps.length - 1;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "onboarding",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-(--radius-overlay) p-5", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-4 rounded-overlay p-5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 duration-300",
@@ -41,7 +41,7 @@ function Onboarding({ steps, index, onNext, onSkip, className, ...props }) {
 					children: step.body
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-body) leading-(--cue-leading-ui)"),
+					className: cn(field, "text-fg-muted rounded-surface px-3 py-2 text-(length:--cue-text-body) leading-(--cue-leading-ui)"),
 					children: step.example
 				})
 			]

package/dist/elements/permission-grant.js

@@ -21,13 +21,13 @@ import { KeyRoundIcon } from "lucide-react";
 function PermissionGrant({ capability, requester, reach, scope, onGrant, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "permission-grant",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3.5 rounded-overlay p-4", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2.5",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "bg-surface-1 text-fg-muted flex size-7 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					className: "bg-surface-1 text-fg-muted flex size-7 shrink-0 items-center justify-center rounded-surface",
 					children: /* @__PURE__ */ jsx(KeyRoundIcon, { className: "size-3.5" })
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-1 flex-col",

package/dist/elements/permission-scopes.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2, FOCUS_RING_OFFSET_2 } from "../system/_focus-ring.js";
 import { field, fieldInteractive, mono, paper } from "./surfaces.js";
 import { PERMISSION_LABELS } from "./vocabulary.js";
 import * as React from "react";
@@ -170,7 +171,7 @@ const PermissionScopes = React.forwardRef(function PermissionScopes({ question,
 			event.preventDefault();
 			answer.run();
 		},
-		className: cn(paper, "flex w-full max-w-md flex-col gap-2.5 rounded-(--radius-overlay) p-3", className),
+		className: cn(paper, "flex w-full max-w-md flex-col gap-2.5 rounded-overlay p-3", className),
 		...elementProps,
 		children: [
 			/* @__PURE__ */ jsxs("p", {
@@ -183,7 +184,7 @@ const PermissionScopes = React.forwardRef(function PermissionScopes({ question,
 			}),
 			input === void 0 ? null : /* @__PURE__ */ jsx("pre", {
 				"data-slot": "permission-scopes-input",
-				className: cn(field, mono, "text-fg-muted max-h-40 overflow-auto rounded-(--radius-control) px-2.5 py-2 whitespace-pre-wrap"),
+				className: cn(field, mono, "text-fg-muted max-h-40 overflow-auto rounded-control px-2.5 py-2 whitespace-pre-wrap"),
 				children: input
 			}),
 			/* @__PURE__ */ jsx("ul", {
@@ -195,7 +196,7 @@ const PermissionScopes = React.forwardRef(function PermissionScopes({ question,
 						type: "button",
 						"data-answer": answer.id,
 						onClick: answer.run,
-						className: cn(answer.id === "always" ? fieldInteractive : "hover:bg-surface-2", "flex w-full items-baseline gap-1 rounded-(--radius-control) px-2 py-1.5 text-start text-(length:--cue-text-ui) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent", answer.id === "deny" ? "text-fg-muted" : "text-fg"),
+						className: cn(answer.id === "always" ? fieldInteractive : "hover:bg-surface-2", `flex w-full items-baseline gap-1 rounded-control px-2 py-1.5 text-start text-(length:--cue-text-ui) outline-none ${FOCUS_RING_INSET_2}`, answer.id === "deny" ? "text-fg-muted" : "text-fg"),
 						children: [/* @__PURE__ */ jsx("span", {
 							className: cn(mono, "shrink-0 opacity-60"),
 							children: index + 1
@@ -211,7 +212,7 @@ const PermissionScopes = React.forwardRef(function PermissionScopes({ question,
 						onClick: () => {
 							onScopeChange(scopes[(scopes.indexOf(chosen) + 1) % scopes.length].id);
 						},
-						className: "text-fg-subtle ms-6 self-start rounded-(--radius-control) text-start text-(length:--cue-text-ui) wrap-anywhere underline decoration-dotted underline-offset-2 outline-none hover:decoration-solid focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent",
+						className: `text-fg-subtle ms-6 self-start rounded-control text-start text-(length:--cue-text-ui) wrap-anywhere underline decoration-dotted underline-offset-2 outline-none hover:decoration-solid ${FOCUS_RING_OFFSET_2}`,
 						children: chosen.writes
 					}) : /* @__PURE__ */ jsx("span", {
 						"data-slot": "permission-scopes-destination",

package/dist/elements/prompt-library.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { field, paper } from "./surfaces.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -46,11 +47,11 @@ function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, on
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "prompt-library",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-2 rounded-(--radius-overlay) p-3", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2 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(BookmarkIcon, { className: "text-fg-subtle size-3.5 shrink-0" }), /* @__PURE__ */ jsx("input", {
 					value: query,
 					onChange: (event) => onQueryChange?.(event.target.value),
@@ -62,7 +63,7 @@ function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, on
 					"aria-controls": listId,
 					"aria-autocomplete": "list",
 					"aria-activedescendant": selected ? optionId(selected.id) : void 0,
-					className: "text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-body) outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent"
+					className: `text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-body) outline-none ${FOCUS_RING}`
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -79,7 +80,7 @@ function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, on
 					onMouseDown: (event) => event.preventDefault(),
 					onClick: () => onSelect?.(prompt.id),
 					onDoubleClick: () => onInsert?.(prompt.id),
-					className: cn("flex items-center gap-2 rounded-(--radius-surface) px-2 py-1.5 text-start transition-colors", prompt.id === selectedId ? "bg-surface-1" : "hover:bg-surface-1"),
+					className: cn("flex items-center gap-2 rounded-surface px-2 py-1.5 text-start transition-colors", prompt.id === selectedId ? "bg-surface-1" : "hover:bg-surface-1"),
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
 						children: prompt.name
@@ -98,14 +99,14 @@ function PromptLibrary({ prompts, query, selectedId, onQueryChange, onSelect, on
 				]
 			}),
 			selected && /* @__PURE__ */ jsxs("div", {
-				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 rounded-(--radius-surface) p-2.5 duration-200"),
+				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in flex flex-col gap-2 rounded-surface p-2.5 duration-200"),
 				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-fg-muted text-(length:--cue-text-ui) leading-(--cue-leading-ui) break-words",
 					children: selected.body
 				}), selected.variables.length > 0 && /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-1",
 					children: selected.variables.map((variable) => /* @__PURE__ */ jsx("span", {
-						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "bg-bg text-fg-muted rounded-(--radius-control) px-1.5 py-0.5"),
+						className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "bg-bg text-fg-muted rounded-control px-1.5 py-0.5"),
 						children: `{${variable}}`
 					}, variable))
 				})]

package/dist/elements/queue-dock.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { field, ghostButton, mono, paper } from "./surfaces.js";
 import { QUEUE_LABELS } from "./vocabulary.js";
 import * as React from "react";
@@ -73,14 +74,14 @@ const QueueDock = React.forwardRef(function QueueDock({ messages, open, onOpenCh
 		ref,
 		"data-slot": "queue-dock",
 		"data-open": String(open),
-		className: cn(paper, "flex w-full flex-col rounded-(--radius-overlay)", className),
+		className: cn(paper, "flex w-full flex-col rounded-overlay", className),
 		...elementProps,
 		children: [/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": open,
 			title: open ? copy.collapse : copy.expand,
 			onClick: () => onOpenChange?.(!open),
-			className: "hover:bg-surface-2 flex items-center gap-2.5 rounded-(--radius-overlay) px-3 py-2 text-start transition-colors focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none",
+			className: `hover:bg-surface-2 flex items-center gap-2.5 rounded-overlay px-3 py-2 text-start transition-colors ${FOCUS_RING_INSET_2} 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")
@@ -92,7 +93,7 @@ const QueueDock = React.forwardRef(function QueueDock({ messages, open, onOpenCh
 			"data-slot": "queue-dock-entries",
 			className: "flex flex-col gap-1 px-2 pb-2",
 			children: messages.map((message, index) => /* @__PURE__ */ jsxs("li", {
-				className: cn(field, "flex items-center gap-2 rounded-(--radius-control) py-1.5 pe-1.5 ps-2.5"),
+				className: cn(field, "flex items-center gap-2 rounded-control py-1.5 pe-1.5 ps-2.5"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: cn(mono, "text-fg-subtle w-3 shrink-0 tabular-nums"),

package/dist/elements/quota-banner.js

@@ -17,7 +17,7 @@ function QuotaBanner({ used, limit, unit, resetsIn, upgradeLabel, onUpgrade, cla
 	const tight = (limit === 0 ? 0 : used / limit) >= .9;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "quota-banner",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-(--radius-overlay) p-3.5", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-overlay p-3.5", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/quote-reply.js

@@ -38,7 +38,7 @@ function QuoteReply({ before, selection, after, actions, toolbarVisible, quoted,
 						children: before
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "text-fg rounded-(--radius-control) bg-stream/25 px-0.5",
+						className: "text-fg rounded-control bg-stream/25 px-0.5",
 						children: selection
 					}),
 					/* @__PURE__ */ jsx("span", {

package/dist/elements/read-aloud.js

@@ -26,12 +26,12 @@ function ReadAloud({ words, spokenIndex, playing, rate, elapsed, duration, onTog
 	const progress = pct(spokenIndex, words.length);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "read-aloud",
-		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__ */ jsx("p", {
 			className: "text-(length:--cue-text-body) leading-(--cue-leading-ui)",
 			children: words.map((word, i) => /* @__PURE__ */ jsxs("span", {
-				className: cn("transition-colors duration-200 motion-reduce:transition-none", i < spokenIndex ? "text-fg-subtle" : i === spokenIndex ? "text-fg rounded-(--radius-control) bg-stream/15" : "text-fg-muted"),
+				className: cn("transition-colors duration-200 motion-reduce:transition-none", i < spokenIndex ? "text-fg-subtle" : i === spokenIndex ? "text-fg rounded-control bg-stream/15" : "text-fg-muted"),
 				children: [word, " "]
 			}, `${i}-${word}`))
 		}), /* @__PURE__ */ jsxs("div", {

package/dist/elements/reasoning-panel.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 ReasoningPanel({ steps, visibleSteps, streaming, open, onOpenChange, re
 		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 py-1 text-(length:--cue-text-body) transition-[color,scale] outline-none active:scale-[0.98] 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 py-1 text-(length:--cue-text-body) transition-[color,scale] outline-none active:scale-[0.98] ${FOCUS_RING}`,
 			children: [/* @__PURE__ */ jsxs(SwapLabel, {
 				active: streaming ? 0 : 1,
 				className: "text-start",

package/dist/elements/recommendation-card.d.ts

@@ -19,7 +19,7 @@ type RecommendationState = "idle" | "accepted";
  *   onAccept={() => accept()}
  * >
  *   Wire{" "}
- *   <span className="bg-surface-2 text-fg-muted rounded-(--radius-control) px-1.5 py-0.5 font-mono text-(length:--cue-text-label)">
+ *   <span className="bg-surface-2 text-fg-muted rounded-control px-1.5 py-0.5 font-mono text-(length:--cue-text-label)">
  *     runtime.drafts
  *   </span>{" "}
  *   with three lines.

package/dist/elements/recommendation-card.js

@@ -23,7 +23,7 @@ const CONFIDENCE_BARS = [
 *   onAccept={() => accept()}
 * >
 *   Wire{" "}
-*   <span className="bg-surface-2 text-fg-muted rounded-(--radius-control) px-1.5 py-0.5 font-mono text-(length:--cue-text-label)">
+*   <span className="bg-surface-2 text-fg-muted rounded-control px-1.5 py-0.5 font-mono text-(length:--cue-text-label)">
 *     runtime.drafts
 *   </span>{" "}
 *   with three lines.
@@ -32,7 +32,7 @@ const CONFIDENCE_BARS = [
 function RecommendationCard({ state, question, children, confidenceLabel, acceptedLabel, onAccept, onAlternatives, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "recommendation-card",
-		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__ */ jsx("p", {

package/dist/elements/regenerate-menu.js

@@ -31,11 +31,11 @@ function RegenerateMenu({ options, open, currentId, onOpenChange, onPick, classN
 			className: cn(ghostButton, "size-7 self-start", open && "bg-surface-2 text-fg"),
 			children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: "size-3.5" })
 		}), open && /* @__PURE__ */ jsx("div", {
-			className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-0.5 rounded-(--radius-overlay) p-1.5 duration-200"),
+			className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-top-1 cue-elements-animate-in flex flex-col gap-0.5 rounded-overlay p-1.5 duration-200"),
 			children: options.map((option) => /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				onClick: () => onPick?.(option.id),
-				className: "hover:bg-surface-1 flex items-baseline gap-2 rounded-(--radius-surface) px-2.5 py-1.5 text-start transition-colors",
+				className: "hover:bg-surface-1 flex items-baseline gap-2 rounded-surface px-2.5 py-1.5 text-start transition-colors",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
 					children: option.label

package/dist/elements/research-report.js

@@ -16,7 +16,7 @@ function ResearchReport({ title, sections, sourcesRead, className, ...props }) {
 	const done = sections.filter((section) => section.state === "done").length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "research-report",
-		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-1",

package/dist/elements/retrieval-chunks.js

@@ -41,7 +41,7 @@ function RetrievalChunks({ query, chunks, visibleCount, searching, className, ..
 			/* @__PURE__ */ jsx("div", {
 				className: "flex min-h-[7rem] flex-col gap-1.5",
 				children: take(chunks, visibleCount).map((chunk) => /* @__PURE__ */ jsxs("div", {
-					className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex flex-col gap-1.5 rounded-(--radius-overlay) px-3.5 py-2.5 duration-300"),
+					className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex flex-col gap-1.5 rounded-overlay px-3.5 py-2.5 duration-300"),
 					children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-baseline gap-2",

package/dist/elements/revert-dock.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING, FOCUS_RING_INSET_2 } from "../system/_focus-ring.js";
 import { field, fieldInteractive, ghostButton, mono, paper } from "./surfaces.js";
 import { REVERT_LABELS, REVERT_SCOPES, REVERT_SCOPE_DESCRIPTIONS, REVERT_SCOPE_LABELS } from "./vocabulary.js";
 import * as React from "react";
@@ -210,7 +211,7 @@ const RevertDock = React.forwardRef(function RevertDock({ label = "Revert to thi
 		"data-slot": "revert-dock",
 		"data-open": String(open),
 		"data-confirming": confirming ?? "none",
-		className: cn(paper, "flex w-full flex-col rounded-(--radius-overlay)", className),
+		className: cn(paper, "flex w-full flex-col rounded-overlay", className),
 		onKeyDown: (event) => {
 			onKeyDown?.(event);
 			if (event.key !== "Escape" || confirming === null) return;
@@ -226,7 +227,7 @@ const RevertDock = React.forwardRef(function RevertDock({ label = "Revert to thi
 				if (open && confirming !== null) onConfirmingChange?.(null);
 				onOpenChange?.(!open);
 			},
-			className: "hover:bg-surface-2 flex items-center gap-2.5 rounded-(--radius-overlay) px-3 py-2 text-start transition-colors focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent motion-reduce:transition-none",
+			className: `hover:bg-surface-2 flex items-center gap-2.5 rounded-overlay px-3 py-2 text-start transition-colors ${FOCUS_RING_INSET_2} motion-reduce:transition-none`,
 			children: [
 				/* @__PURE__ */ jsx(HistoryIcon, {
 					"aria-hidden": true,
@@ -270,7 +271,7 @@ const RevertDock = React.forwardRef(function RevertDock({ label = "Revert to thi
 							disabled: confirming !== null,
 							id: armed ? scopeId : void 0,
 							onClick: () => onConfirmingChange?.(scope),
-							className: cn(confirming === null ? fieldInteractive : armed ? "bg-danger/10" : cn(field, "opacity-60"), "flex flex-col items-start gap-0.5 rounded-(--radius-control) px-3 py-2 text-start outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent"),
+							className: cn(confirming === null ? fieldInteractive : armed ? "bg-danger/10" : cn(field, "opacity-60"), `flex flex-col items-start gap-0.5 rounded-control px-3 py-2 text-start outline-none ${FOCUS_RING_INSET_2}`),
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "text-fg text-(length:--cue-text-ui) font-medium",
 								children: scopeCopy[scope]
@@ -311,7 +312,7 @@ const RevertDock = React.forwardRef(function RevertDock({ label = "Revert to thi
 								onConfirmingChange?.(null);
 								onRestore?.(confirming);
 							},
-							className: "bg-danger text-danger-fg flex items-center gap-1.5 rounded-(--radius-control) px-3 py-1.5 text-(length:--cue-text-ui) font-medium outline-none transition-[opacity,scale] duration-150 enabled:hover:opacity-90 enabled:active:scale-[0.96] disabled:opacity-60 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none",
+							className: `bg-danger text-danger-fg flex items-center gap-1.5 rounded-control px-3 py-1.5 text-(length:--cue-text-ui) font-medium outline-none transition-[opacity,scale] duration-150 enabled:hover:opacity-90 enabled:active:scale-[0.96] disabled:opacity-60 ${FOCUS_RING} motion-reduce:transition-none`,
 							children: [/* @__PURE__ */ jsx(RotateCcwIcon, {
 								"aria-hidden": true,
 								className: "size-3.5"

package/dist/elements/reviewable-diff.js

@@ -29,7 +29,7 @@ function ReviewableDiff({ filename, hunks, onKeep, onDiscard, onApply, className
 	const pending = hunks.filter((hunk) => hunk.decision === "pending").length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "reviewable-diff",
-		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(paper, "flex w-full max-w-md flex-col overflow-hidden rounded-overlay", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/schedule-card.js

@@ -22,14 +22,14 @@ import { CheckIcon, ClockIcon, XIcon } from "lucide-react";
 function ScheduleCard({ name, cadence, nextRun, enabled, history, onToggle, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "schedule-card",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-overlay p-4", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2.5",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "bg-surface-1 text-fg-muted flex size-7 shrink-0 items-center justify-center rounded-(--radius-surface)",
+						className: "bg-surface-1 text-fg-muted flex size-7 shrink-0 items-center justify-center rounded-surface",
 						children: /* @__PURE__ */ jsx(ClockIcon, { className: "size-3.5" })
 					}),
 					/* @__PURE__ */ jsxs("div", {
@@ -54,7 +54,7 @@ function ScheduleCard({ name, cadence, nextRun, enabled, history, onToggle, clas
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: cn(field, "flex items-baseline gap-2 rounded-(--radius-surface) px-3 py-2", !enabled && "opacity-45"),
+				className: cn(field, "flex items-baseline gap-2 rounded-surface px-3 py-2", !enabled && "opacity-45"),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: cn(mono, "text-fg-subtle"),
 					children: "next"

package/dist/elements/score-breakdown.js

@@ -22,7 +22,7 @@ function ScoreBreakdown({ verdict, total, outOf, criteria, visibleCount, classNa
 	const ratio = outOf === 0 ? 0 : total / outOf;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "score-breakdown",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-3 rounded-overlay p-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-baseline gap-2",

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
 			})
 		]