@cueplusplus/ui 0.16.0 → 0.17.0

package/dist/elements/day-separator.js

@@ -35,7 +35,7 @@ function DaySeparator({ messages, className, ...props }) {
 				}), /* @__PURE__ */ jsxs("div", {
 					className: cn("group flex items-baseline gap-2", message.role === "user" && "flex-row-reverse"),
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cn("max-w-[80%] text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words", message.role === "user" ? "bg-surface-1 rounded-(--radius-overlay) px-3.5 py-2" : "text-fg-muted"),
+						className: cn("max-w-[80%] text-(length:--cue-text-body) leading-(--cue-leading-ui) break-words", message.role === "user" ? "bg-surface-1 rounded-overlay px-3.5 py-2" : "text-fg-muted"),
 						children: message.text
 					}), /* @__PURE__ */ jsx("span", {
 						className: cn(mono, "text-transparent group-hover:text-fg-subtle shrink-0 tabular-nums transition-colors"),

package/dist/elements/diagram.js

@@ -18,7 +18,7 @@ import { MaximizeIcon, MinusIcon, PlusIcon, RotateCcwIcon } from "lucide-react";
 function Diagram({ title, zoom, children, onZoomIn, onZoomOut, onReset, onExpand, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "diagram",
-		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 px-3 py-2",

package/dist/elements/document-reference.js

@@ -22,12 +22,12 @@ function DocumentReference({ title, pages, anchors, activePage, onJump, classNam
 	const currentIndex = anchors.findIndex((anchor) => anchor.page === activePage);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "document-reference",
-		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", {
 			className: "flex items-center gap-2.5",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "bg-surface-1 text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				className: "bg-surface-1 text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-surface",
 				children: /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" })
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 flex-col",
@@ -50,7 +50,7 @@ function DocumentReference({ title, pages, anchors, activePage, onJump, classNam
 				type: "button",
 				"aria-current": i === currentIndex || void 0,
 				onClick: () => onJump?.(anchor.page),
-				className: cn("flex flex-col gap-1 rounded-(--radius-surface) px-2.5 py-2 text-start transition-colors", anchor.page === activePage ? field : "hover:bg-surface-1"),
+				className: cn("flex flex-col gap-1 rounded-surface px-2.5 py-2 text-start transition-colors", anchor.page === activePage ? field : "hover:bg-surface-1"),
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: cn(mono, "text-fg-subtle"),
 					children: ["p. ", anchor.page]

package/dist/elements/draft-restore.js

@@ -20,7 +20,7 @@ import { PencilLineIcon, XIcon } from "lucide-react";
 function DraftRestore({ draft, savedAt, onRestore, onDiscard, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "draft-restore",
-		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-(--radius-overlay) py-2 pr-2 pl-3.5 duration-300", className),
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-overlay py-2 pr-2 pl-3.5 duration-300", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(PencilLineIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),

package/dist/elements/edit-message.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { field, inkButton, paper } from "./surfaces.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangleIcon } from "lucide-react";
@@ -28,13 +29,13 @@ function EditMessage({ value, discardedReplies, editing, onValueChange, onSave,
 		children: /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: onStartEdit,
-			className: cn(field, "hover:bg-surface-2 max-w-[85%] rounded-(--radius-overlay) px-3.5 py-2.5 text-start text-(length:--cue-text-body) transition-colors"),
+			className: cn(field, "hover:bg-surface-2 max-w-[85%] rounded-overlay px-3.5 py-2.5 text-start text-(length:--cue-text-body) transition-colors"),
 			children: value
 		})
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "edit-message",
-		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("textarea", {
@@ -42,7 +43,7 @@ function EditMessage({ value, discardedReplies, editing, onValueChange, onSave,
 				onChange: (event) => onValueChange?.(event.target.value),
 				rows: 2,
 				"aria-label": "Edit your message",
-				className: cn(field, "text-fg 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.5 text-(length:--cue-text-body) leading-(--cue-leading-ui) outline-none")
+				className: cn(field, `text-fg ${FOCUS_RING} resize-none rounded-surface px-3 py-2.5 text-(length:--cue-text-body) leading-(--cue-leading-ui) outline-none`)
 			}),
 			discardedReplies > 0 && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 text-warn",

package/dist/elements/elements.css

@@ -284,17 +284,35 @@
  * carries for `--radius-*`:
  *
  * - **Absent by choice:** `--cue-busy`, `--cue-info`, `--cue-selection`,
- *   `--cue-focus`, `--cue-scrim`. No element in this family reads them — the
- *   codemod maps upstream's blue onto `--cue-stream`, and upstream has no
- *   selection or scrim of its own to transcribe. The consequence is worth
- *   knowing before you mix families: a *cue* component rendered inside an
- *   island — a `Chip tone="busy"`, a `Toast`, anything that draws a focus ring
+ *   `--cue-scrim`. No element in this family reads them — the codemod maps
+ *   upstream's blue onto `--cue-stream`, and upstream has no selection or
+ *   scrim of its own to transcribe. The consequence is worth knowing before
+ *   you mix families: a *cue* component rendered inside an island — a
+ *   `Chip tone="busy"`, a `Toast`
  *   — paints half in each palette, its ground and ink from assistant-ui and its
  *   tone from the console's theme. That is a mixed surface, not a bug, and the
  *   island is not the place to fix it: re-pointing the whole contract here
  *   would make this a theme, which is exactly what `AgentSurface` is documented
  *   not to be.
  *
+ *   `--cue-focus` used to be on this list too, on the reasoning that no
+ *   element in this family drew a ring. Spec 2026-09-26-looks-fidelity §3.12
+ *   (F-9) made that false: `_focus-ring.ts` gave every one of this system's
+ *   focusable elements a ring drawn from `--cue-focus` rather than restated
+ *   per site, this family's included, and the two were never one and the same
+ *   before then only by coincidence — a fixed 2px ring in `--cue-accent`,
+ *   which this island already re-points to its own ink for exactly the
+ *   reasons above. Left off this island, an element inside it would draw the
+ *   ring in the OUTER console theme's `--cue-focus` instead of the island's —
+ *   under a theme where the two differ (ten of the thirty shipped blocks),
+ *   the one visible seam a reader would find is a focus ring in the wrong
+ *   palette on an otherwise self-consistent surface. So it is set below,
+ *   equal to the island's own `--cue-fg` exactly as `--cue-accent` already
+ *   is: not a second colour to keep in step, the same one the ring drew
+ *   before this module existed, kept in step with it now that the module
+ *   names it explicitly.
+ *
+
  * - **Absent by construction:** every derived token —
  *   `--cue-ok-soft`, `--cue-stream-border`, `--cue-accent-soft`, `--cue-hair`,
  *   `--cue-row-hover` and the rest. They cannot follow the island. Each is a
@@ -326,6 +344,7 @@
   --cue-border-strong: color-mix(in oklab, var(--cue-fg) 20%, transparent);
   --cue-border-overlay: color-mix(in oklab, oklch(1 0 0 / 10%) 60%, transparent);
   --cue-accent: var(--cue-fg);
+  --cue-focus: var(--cue-fg);
   --cue-accent-hover: color-mix(in oklab, var(--cue-fg) 90%, transparent);
   --cue-accent-fg: var(--cue-bg);
   --cue-ok: oklch(0.765 0.177 163.223);
@@ -365,6 +384,7 @@
   --cue-border-strong: color-mix(in oklab, var(--cue-fg) 20%, transparent);
   --cue-border-overlay: color-mix(in oklab, oklch(0.92 0.004 286.32) 60%, transparent);
   --cue-accent: var(--cue-fg);
+  --cue-focus: var(--cue-fg);
   --cue-accent-hover: color-mix(in oklab, var(--cue-fg) 90%, transparent);
   --cue-accent-fg: var(--cue-bg);
   --cue-ok: oklch(0.696 0.17 162.48);
@@ -395,6 +415,7 @@
     --cue-border-strong: color-mix(in oklab, var(--cue-fg) 20%, transparent);
     --cue-border-overlay: color-mix(in oklab, oklch(0.92 0.004 286.32) 60%, transparent);
     --cue-accent: var(--cue-fg);
+    --cue-focus: var(--cue-fg);
     --cue-accent-hover: color-mix(in oklab, var(--cue-fg) 90%, transparent);
     --cue-accent-fg: var(--cue-bg);
     --cue-ok: oklch(0.696 0.17 162.48);

package/dist/elements/elicitation-form.js

@@ -22,14 +22,14 @@ import { CheckIcon, PlugIcon, XIcon } from "lucide-react";
 function ElicitationForm({ server, message, fields, state, onAccept, onDecline, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "elicitation-form",
-		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(PlugIcon, { className: "size-3.5" })
 					}),
 					/* @__PURE__ */ jsx("span", {
@@ -73,7 +73,7 @@ function ElicitationForm({ server, message, fields, state, onAccept, onDecline,
 							children: item.value === "true" ? "On" : "Off"
 						})]
 					}) : /* @__PURE__ */ jsx("span", {
-						className: cn(field, "text-fg-muted rounded-(--radius-surface) px-2.5 py-1.5 text-(length:--cue-text-ui)"),
+						className: cn(field, "text-fg-muted rounded-surface px-2.5 py-1.5 text-(length:--cue-text-ui)"),
 						children: item.value
 					})]
 				}, item.name))

package/dist/elements/empty-state.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { inkButton, paper } from "./surfaces.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpIcon } from "lucide-react";
@@ -63,7 +64,7 @@ function EmptyStateSuggestion({ index = 0, className, style, ...props }) {
 			animationDelay: `${120 + index * 70}ms`,
 			...style
 		},
-		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent rounded-full px-4 py-2 text-(length:--cue-text-body) transition-transform duration-500 outline-none hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none", className),
+		className: cn(paper, `cue-elements-fade-in cue-elements-slide-in-from-bottom-2 cue-elements-animate-in cue-elements-fill-mode-both ${FOCUS_RING} rounded-full px-4 py-2 text-(length:--cue-text-body) transition-transform duration-500 outline-none hover:-translate-y-px active:scale-[0.96] motion-reduce:animate-none`, className),
 		...props
 	});
 }

package/dist/elements/error-state.js

@@ -31,7 +31,7 @@ function ErrorState({ title, detail, retrying, onRetry, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "error-state",
 		role: "alert",
-		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-start gap-2.5 rounded-(--radius-overlay) bg-danger/10 px-4 py-3 text-(length:--cue-text-body) duration-300 motion-reduce:animate-none", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in flex w-full max-w-sm items-start gap-2.5 rounded-overlay bg-danger/10 px-4 py-3 text-(length:--cue-text-body) duration-300 motion-reduce:animate-none", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(CircleAlertIcon, { className: "mt-0.5 size-4 shrink-0 text-danger/80" }),

package/dist/elements/feedback-dialog.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { field, inkButton, mono, paper } from "./surfaces.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ThumbsDownIcon } from "lucide-react";
@@ -23,7 +24,7 @@ import { CheckIcon, ThumbsDownIcon } from "lucide-react";
 function FeedbackDialog({ reasons, selected, note, sent, onToggleReason, onNoteChange, onSubmit, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "feedback-dialog",
-		className: cn(paper, "flex w-full max-w-sm rounded-(--radius-overlay) p-4", sent ? "items-center gap-2.5 text-(length:--cue-text-body)" : "flex-col gap-3", className),
+		className: cn(paper, "flex w-full max-w-sm rounded-overlay p-4", sent ? "items-center gap-2.5 text-(length:--cue-text-body)" : "flex-col gap-3", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
 			role: "status",
@@ -34,7 +35,7 @@ function FeedbackDialog({ reasons, selected, note, sent, onToggleReason, onNoteC
 				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(ThumbsDownIcon, { className: "size-3.5" })
 					}),
 					/* @__PURE__ */ jsx("span", {
@@ -66,7 +67,7 @@ function FeedbackDialog({ reasons, selected, note, sent, onToggleReason, onNoteC
 				rows: 2,
 				placeholder: "Anything else?",
 				"aria-label": "Anything else?",
-				className: cn(field, "text-fg-muted placeholder:text-fg-subtle 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) outline-none")
+				className: cn(field, `text-fg-muted placeholder:text-fg-subtle ${FOCUS_RING} resize-none rounded-surface px-3 py-2 text-(length:--cue-text-ui) outline-none`)
 			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",

package/dist/elements/file-tree.js

@@ -22,7 +22,7 @@ function FileTree({ nodes, visibleCount, totalAdditions, totalDeletions, classNa
 	const files = nodes.filter((node) => node.kind === "file").length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "file-tree",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-2 rounded-(--radius-overlay) p-3.5", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2 rounded-overlay p-3.5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-baseline justify-between px-1",
@@ -46,7 +46,7 @@ function FileTree({ nodes, visibleCount, totalAdditions, totalDeletions, classNa
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col",
 			children: take(nodes, visibleCount).map((node) => /* @__PURE__ */ jsx("div", {
-				className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2 rounded-(--radius-surface) px-1 py-1 text-(length:--cue-text-body) transition-colors duration-300",
+				className: "cue-elements-fade-in cue-elements-slide-in-from-left-1 cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-1 flex items-center gap-2 rounded-surface px-1 py-1 text-(length:--cue-text-body) transition-colors duration-300",
 				style: { paddingInlineStart: `${.25 + node.depth * .85}rem` },
 				children: node.kind === "folder" ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-fg-subtle size-3 shrink-0" }),

package/dist/elements/flow-graph.js

@@ -29,7 +29,7 @@ function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "flow-graph",
-		className: cn(paper, "w-full max-w-md overflow-x-auto rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "w-full max-w-md overflow-x-auto rounded-overlay p-4", className),
 		...props,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "relative",
@@ -59,7 +59,7 @@ function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
 					}, `${edge.from}-${edge.to}`);
 				})
 			}), shown.map((node) => /* @__PURE__ */ jsx("div", {
-				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both absolute flex items-center justify-center rounded-(--radius-surface) border text-center text-(length:--cue-text-ui) leading-tight duration-300", node.state === "done" && "border-border bg-surface-1 text-fg-muted", node.state === "active" && "text-fg border-stream/30 bg-stream/10", node.state === "pending" && "border-border text-fg-subtle border-dashed"),
+				className: cn("cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-animate-in cue-elements-fill-mode-both absolute flex items-center justify-center rounded-surface border text-center text-(length:--cue-text-ui) leading-tight duration-300", node.state === "done" && "border-border bg-surface-1 text-fg-muted", node.state === "active" && "text-fg border-stream/30 bg-stream/10", node.state === "pending" && "border-border text-fg-subtle border-dashed"),
 				style: {
 					left: node.column * COL_W,
 					top: node.row * ROW_H,

package/dist/elements/guardrail-notice.js

@@ -20,14 +20,14 @@ import { ShieldIcon } from "lucide-react";
 function GuardrailNotice({ title, explanation, policy, alternatives, onPick, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "guardrail-notice",
-		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: "flex size-7 shrink-0 items-center justify-center rounded-(--radius-surface) bg-warn/12 text-warn",
+						className: "flex size-7 shrink-0 items-center justify-center rounded-surface bg-warn/12 text-warn",
 						children: /* @__PURE__ */ jsx(ShieldIcon, { className: "size-3.5" })
 					}),
 					/* @__PURE__ */ jsx("span", {
@@ -52,7 +52,7 @@ function GuardrailNotice({ title, explanation, policy, alternatives, onPick, cla
 				}), alternatives.map((alternative) => /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: () => onPick?.(alternative),
-					className: "hover:bg-surface-1 text-fg-muted hover:text-fg -mx-1.5 rounded-(--radius-surface) px-1.5 py-1 text-start text-(length:--cue-text-body) transition-colors",
+					className: "hover:bg-surface-1 text-fg-muted hover:text-fg -mx-1.5 rounded-surface px-1.5 py-1 text-start text-(length:--cue-text-body) transition-colors",
 					children: alternative
 				}, alternative))]
 			})

package/dist/elements/image-generation.js

@@ -19,7 +19,7 @@ function ImageGeneration({ prompt, generating, className, ...props }) {
 		className: cn("flex w-52 flex-col gap-2.5", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn(paper, "relative aspect-square w-full overflow-hidden rounded-(--radius-overlay)"),
+			className: cn(paper, "relative aspect-square w-full overflow-hidden rounded-overlay"),
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "absolute inset-0 grid grid-cols-8 place-items-center p-6",

package/dist/elements/inline-citation.js

@@ -13,7 +13,7 @@ function Citation({ index, source, open, onOpenChange }) {
 		children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
 			delay: 0,
 			render: /* @__PURE__ */ jsx("button", { type: "button" }),
-			className: cn("mx-0.5 inline-flex h-4 min-w-4 translate-y-[-2px] cursor-default items-center justify-center rounded-(--radius-control) px-1 align-middle font-mono text-(length:--cue-text-micro) font-medium tabular-nums transition-colors", open ? "bg-accent text-accent-fg" : "bg-surface-2 text-fg-muted hover:text-fg"),
+			className: cn("mx-0.5 inline-flex h-4 min-w-4 translate-y-[-2px] cursor-default items-center justify-center rounded-control px-1 align-middle font-mono text-(length:--cue-text-micro) font-medium tabular-nums transition-colors", open ? "bg-accent text-accent-fg" : "bg-surface-2 text-fg-muted hover:text-fg"),
 			children: index + 1
 		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
 			...portalProps,
@@ -21,12 +21,12 @@ function Citation({ index, source, open, onOpenChange }) {
 				side: "top",
 				sideOffset: 8,
 				children: /* @__PURE__ */ jsxs(PreviewCard.Popup, {
-					className: cn(floating, "z-50 w-64 origin-(--transform-origin) rounded-(--radius-overlay) p-3.5 outline-none", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0"),
+					className: cn(floating, "z-50 w-64 origin-(--transform-origin) rounded-overlay p-3.5 outline-none", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0", "data-[ending-style]:scale-[0.97] data-[ending-style]:opacity-0"),
 					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 items-center justify-center rounded-(--radius-control) text-(length:--cue-text-micro) font-medium",
+								className: "bg-surface-2 text-fg-muted flex size-4 items-center justify-center rounded-control text-(length:--cue-text-micro) font-medium",
 								children: source.domain[0]?.toUpperCase()
 							}), /* @__PURE__ */ jsx("span", {
 								className: cn(mono, "text-fg-subtle"),

package/dist/elements/job-progress.js

@@ -1,6 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { mono, paper } from "./surfaces.js";
+import { ghostButton, mono, paper } from "./surfaces.js";
 import { clamp, pct, progressOf, take } from "./range.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, Loader2Icon, XIcon } from "lucide-react";
@@ -29,7 +29,7 @@ function JobProgress({ title, stages, stageIndex, stageProgress, eta, onCancel,
 	const finished = stage >= stages.length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "job-progress",
-		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", {
@@ -48,7 +48,7 @@ function JobProgress({ title, stages, stageIndex, stageProgress, eta, onCancel,
 						type: "button",
 						"aria-label": "Cancel the job",
 						onClick: onCancel,
-						className: cn("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", "size-6 shrink-0"),
+						className: cn(ghostButton, "size-6 shrink-0"),
 						children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5" })
 					})
 				]

package/dist/elements/launcher-bubble.js

@@ -24,7 +24,7 @@ function LauncherBubble({ open, unread, greeting, prompts, onToggle, onPick, onS
 		className: cn("flex w-full max-w-[19rem] flex-col items-end gap-2.5", className),
 		...props,
 		children: [open && /* @__PURE__ */ jsxs("div", {
-			className: cn("bg-surface-2 border border-border-overlay", "cue-elements-fade-in cue-elements-zoom-in-95 cue-elements-slide-in-from-bottom-2 cue-elements-animate-in flex w-full flex-col gap-3 rounded-(--radius-overlay) p-4 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-bottom-2 cue-elements-animate-in flex w-full flex-col gap-3 rounded-overlay p-4 duration-200"),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-1",
@@ -41,7 +41,7 @@ function LauncherBubble({ open, unread, greeting, prompts, onToggle, onPick, onS
 					children: prompts.map((prompt) => /* @__PURE__ */ jsx("button", {
 						type: "button",
 						onClick: () => onPick?.(prompt),
-						className: cn("bg-fg/[0.06]", "hover:bg-surface-2 text-fg-muted rounded-(--radius-surface) px-3 py-2 text-start text-(length:--cue-text-body) transition-colors"),
+						className: cn("bg-fg/[0.06]", "hover:bg-surface-2 text-fg-muted rounded-surface px-3 py-2 text-start text-(length:--cue-text-body) transition-colors"),
 						children: prompt
 					}, prompt))
 				}),

package/dist/elements/loading-state.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const CELL_SHAPES = {
 	dots: "rounded-full",
 	squares: "rounded-none",
-	rounded: "rounded-(--radius-control)"
+	rounded: "rounded-control"
 };
 /**
 * The wait before there is anything to show. A nine-cell matrix keeps time under a

package/dist/elements/map-answer.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";
 //#region src/elements/map-answer.tsx
@@ -15,7 +16,7 @@ function MapAnswer({ pins, activeId, route, onSelect, className, ...props }) {
 	const path = pins.map((pin) => `${pin.x},${pin.y}`).join(" ");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "map-answer",
-		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", {
 			className: cn(field, "relative h-40"),
@@ -64,7 +65,7 @@ function MapAnswer({ pins, activeId, route, onSelect, className, ...props }) {
 				"aria-label": pin.label,
 				"aria-current": pin.id === activeId || void 0,
 				onClick: () => onSelect?.(pin.id),
-				className: "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full outline-none",
+				className: `${FOCUS_RING} absolute flex size-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full outline-none`,
 				style: {
 					left: `${pin.x}%`,
 					top: `${pin.y}%`

package/dist/elements/markdown.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { codeScroll, codeSurface, field, mono } from "./surfaces.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -452,7 +453,7 @@ function markdownComponents(options) {
 			title,
 			target,
 			rel: "noopener noreferrer nofollow",
-			className: "text-accent underline underline-offset-2 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-solid focus-visible:outline-accent",
+			className: `text-accent underline underline-offset-2 ${FOCUS_RING}`,
 			children
 		}),
 		strong: ({ children }) => /* @__PURE__ */ jsx("strong", {
@@ -503,11 +504,11 @@ function markdownComponents(options) {
 			loading: "lazy",
 			decoding: "async",
 			referrerPolicy: "no-referrer",
-			className: "max-w-full rounded-(--radius-control) border border-border"
+			className: "max-w-full rounded-control border border-border"
 		}),
 		code: ({ children, className: codeClass }) => /* @__PURE__ */ jsx("code", {
 			"data-slot": "markdown-code",
-			className: cn(mono, "rounded-(--radius-control) [pre_&]:rounded-none [pre_&]:bg-transparent [pre_&]:px-0 [pre_&]:py-0", field, "px-[0.35em] py-[0.1em]", codeClass),
+			className: cn(mono, "rounded-control [pre_&]:rounded-none [pre_&]:bg-transparent [pre_&]:px-0 [pre_&]:py-0", field, "px-[0.35em] py-[0.1em]", codeClass),
 			children
 		}),
 		pre: ({ children, node }) => {
@@ -515,7 +516,7 @@ function markdownComponents(options) {
 			return /* @__PURE__ */ jsx("pre", {
 				"data-slot": "markdown-code-block",
 				"data-language": block.language,
-				className: cn("m-0 rounded-(--radius-control) border border-border p-(--cue-space-3)", field, codeScroll),
+				className: cn("m-0 rounded-control border border-border p-(--cue-space-3)", field, codeScroll),
 				children: renderCodeBlock === void 0 ? children : /* @__PURE__ */ jsx("span", {
 					className: codeSurface,
 					children: renderCodeBlock(block)

package/dist/elements/math-block.js

@@ -15,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function MathBlock({ label, steps, visibleSteps, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "math-block",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-2.5 rounded-overlay p-4", className),
 		...props,
 		children: [label && /* @__PURE__ */ jsx("span", {
 			className: cn("font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-subtle"),

package/dist/elements/mcp-server-panel.js

@@ -34,7 +34,7 @@ function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className,
 	const connected = servers.filter((server) => server.status === "connected").length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "mcp-server-panel",
-		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-(--radius-overlay) p-3", className),
+		className: cn(paper, "flex w-full max-w-sm flex-col gap-1 rounded-overlay p-3", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-baseline justify-between px-1 pb-1",
@@ -58,7 +58,7 @@ function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className,
 					type: "button",
 					"aria-expanded": expanded,
 					onClick: () => onToggle?.(server.id),
-					className: "hover:bg-surface-1 flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-2 text-start transition-colors",
+					className: "hover:bg-surface-1 flex items-center gap-2.5 rounded-surface px-1.5 py-2 text-start transition-colors",
 					children: [
 						/* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("text-fg-subtle size-3 shrink-0 transition-transform duration-200 motion-reduce:transition-none", expanded && "rotate-90") }),
 						/* @__PURE__ */ jsx(PlugIcon, { className: "text-fg-subtle size-3.5 shrink-0" }),
@@ -102,7 +102,7 @@ function McpServerPanel({ servers, expandedId, onToggle, onAuthorize, className,
 					}), /* @__PURE__ */ jsx("div", {
 						className: "flex flex-wrap gap-1",
 						children: server.tools.map((tool) => /* @__PURE__ */ jsx("span", {
-							className: cn("bg-fg/[0.06]", "font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted rounded-(--radius-control) px-1.5 py-0.5"),
+							className: cn("bg-fg/[0.06]", "font-mono text-(length:--cue-text-label) tracking-tight", "text-fg-muted rounded-control px-1.5 py-0.5"),
 							children: tool
 						}, tool))
 					})]

package/dist/elements/message-attachment.js

@@ -17,11 +17,11 @@ function MessageAttachments({ attachments, onOpen, className, ...props }) {
 		children: attachments.map((item) => item.kind === "image" ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => onOpen?.(item.id),
-			className: cn(paper, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both group flex w-full items-center gap-3 overflow-hidden rounded-(--radius-overlay) p-2 text-start duration-300"),
+			className: cn(paper, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both group flex w-full items-center gap-3 overflow-hidden rounded-overlay p-2 text-start duration-300"),
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
-					className: "size-12 shrink-0 rounded-(--radius-surface) bg-cover bg-center transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none",
+					className: "size-12 shrink-0 rounded-surface bg-cover bg-center transition-transform duration-300 group-hover:scale-[1.04] motion-reduce:transition-none",
 					style: {
 						backgroundImage: item.swatch,
 						backgroundColor: "var(--cue-fg)"
@@ -42,9 +42,9 @@ function MessageAttachments({ attachments, onOpen, className, ...props }) {
 		}, item.id) : /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			onClick: () => onOpen?.(item.id),
-			className: cn(field, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-2 flex w-full items-center gap-2.5 rounded-(--radius-overlay) px-3 py-2.5 text-start transition-colors duration-300"),
+			className: cn(field, "cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both hover:bg-surface-2 flex w-full items-center gap-2.5 rounded-overlay px-3 py-2.5 text-start transition-colors duration-300"),
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "bg-bg text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				className: "bg-bg text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-surface",
 				children: item.kind === "document" ? /* @__PURE__ */ jsx(FileTextIcon, { className: "size-3.5" }) : /* @__PURE__ */ jsx(PaperclipIcon, { className: "size-3.5" })
 			}), /* @__PURE__ */ jsxs("span", {
 				className: "flex min-w-0 flex-1 flex-col gap-0.5",

package/dist/elements/message-pair.js

@@ -25,7 +25,7 @@ function MessagePair({ userMessage, words, visibleWords, streaming, variant = "b
 		className: cn("flex w-full max-w-sm flex-col gap-5", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("p", {
-			className: cn("max-w-[85%] self-end text-(length:--cue-text-body)", variant === "bubble" ? cn(paper, "rounded-(--radius-overlay) px-3.5 py-2") : "text-fg text-end"),
+			className: cn("max-w-[85%] self-end text-(length:--cue-text-body)", variant === "bubble" ? cn(paper, "rounded-overlay px-3.5 py-2") : "text-fg text-end"),
 			children: userMessage
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "group/message flex flex-col items-start",

package/dist/elements/message-queue.js

@@ -23,7 +23,7 @@ function MessageQueue({ running, queued, onCancel, className, ...props }) {
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: cn(paper, "flex items-center gap-2.5 rounded-(--radius-overlay) p-3"),
+				className: cn(paper, "flex items-center gap-2.5 rounded-overlay p-3"),
 				children: [
 					/* @__PURE__ */ jsxs("span", {
 						className: "relative flex size-2 shrink-0",
@@ -52,7 +52,7 @@ function MessageQueue({ running, queued, onCancel, className, ...props }) {
 			/* @__PURE__ */ jsx("ul", {
 				className: "flex flex-col gap-1.5",
 				children: queued.map((message, index) => /* @__PURE__ */ jsxs("li", {
-					className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex items-center gap-2.5 rounded-(--radius-overlay) py-2 pr-2 pl-3 duration-300"),
+					className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in cue-elements-fill-mode-both flex items-center gap-2.5 rounded-overlay py-2 pr-2 pl-3 duration-300"),
 					children: [
 						/* @__PURE__ */ jsx("span", {
 							className: cn(mono, "text-fg-subtle w-3 shrink-0 tabular-nums"),

package/dist/elements/mobile-composer.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { field, ghostButton, inkButton } from "./surfaces.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowUpIcon, MicIcon, PlusIcon, SquareIcon } from "lucide-react";
@@ -22,7 +23,7 @@ import { ArrowUpIcon, MicIcon, PlusIcon, SquareIcon } from "lucide-react";
 function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAttach, onValueChange, onSend, onStop, onFocus, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "mobile-composer",
-		className: cn("bg-bg border-border flex w-full max-w-[19rem] flex-col gap-2.5 rounded-t-(--radius-overlay) border-t px-3 pt-3", keyboardOpen ? "pb-3" : "pb-6", className),
+		className: cn("bg-bg border-border flex w-full max-w-[19rem] flex-col gap-2.5 rounded-t-overlay border-t px-3 pt-3", keyboardOpen ? "pb-3" : "pb-6", className),
 		...props,
 		children: [
 			!keyboardOpen && /* @__PURE__ */ jsx("div", {
@@ -47,7 +48,7 @@ function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAtt
 						children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: cn(field, "flex min-w-0 flex-1 items-center gap-2 rounded-(--radius-overlay) px-3 py-2"),
+						className: cn(field, "flex min-w-0 flex-1 items-center gap-2 rounded-overlay px-3 py-2"),
 						children: [/* @__PURE__ */ jsx("input", {
 							value,
 							onChange: (event) => onValueChange?.(event.target.value),
@@ -60,7 +61,7 @@ function MobileComposer({ value, keyboardOpen, running, actions, onAction, onAtt
 							},
 							placeholder: "Message",
 							"aria-label": "Message",
-							className: "text-fg-muted placeholder:text-fg-subtle min-w-0 flex-1 bg-transparent text-(length:--cue-text-emphasis) 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-emphasis) outline-none ${FOCUS_RING}`
 						}), value === "" && /* @__PURE__ */ jsx(MicIcon, { className: "text-fg-subtle size-4 shrink-0" })]
 					}),
 					/* @__PURE__ */ jsx("button", {