@cueplusplus/ui 0.16.0 → 0.18.0

package/dist/elements/composer.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { ShimmerLabel, field, floating, ghostButton, iconSwap, iconSwapIn, iconSwapOut, inkButton, mono, paper } from "./surfaces.js";
 import { clamp, pct } from "./range.js";
 import { useMemo } from "react";
@@ -114,7 +115,7 @@ function ComposerBar({ dragActive = false, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "composer-bar",
 		"data-drag-active": dragActive || void 0,
-		className: cn(paper, "flex w-full flex-col gap-2 rounded-(--radius-overlay) p-2.5 transition-colors", dragActive && "bg-stream/10", className),
+		className: cn(paper, "flex w-full flex-col gap-2 rounded-overlay p-2.5 transition-colors", dragActive && "bg-stream/10", className),
 		...props
 	});
 }
@@ -126,7 +127,7 @@ function ComposerMenu({ open, align = "start", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "composer-menu",
 		"data-open": open || void 0,
-		className: cn(floating, "absolute bottom-full z-10 mb-2 flex w-72 flex-col gap-0.5 rounded-(--radius-overlay) p-1.5", align === "start" ? "start-0 origin-bottom-left" : "end-0 origin-bottom-right", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", open ? "scale-100 opacity-100" : "pointer-events-none scale-[0.97] opacity-0", className),
+		className: cn(floating, "absolute bottom-full z-10 mb-2 flex w-72 flex-col gap-0.5 rounded-overlay p-1.5", align === "start" ? "start-0 origin-bottom-left" : "end-0 origin-bottom-right", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", open ? "scale-100 opacity-100" : "pointer-events-none scale-[0.97] opacity-0", className),
 		...props
 	});
 }
@@ -139,7 +140,7 @@ function ComposerMenuItem({ active = false, className, ...props }) {
 		type: "button",
 		"data-slot": "composer-menu-item",
 		"data-active": active || void 0,
-		className: cn("flex w-full items-center gap-2.5 rounded-(--radius-surface) px-2.5 py-2 text-(length:--cue-text-body) transition-colors", active ? field : "hover:bg-surface-1", className),
+		className: cn("flex w-full items-center gap-2.5 rounded-surface px-2.5 py-2 text-(length:--cue-text-body) transition-colors", active ? field : "hover:bg-surface-1", className),
 		...props
 	});
 }
@@ -162,7 +163,7 @@ function ComposerCommandItem({ command, active, ...props }) {
 				children: command.description
 			}),
 			active && /* @__PURE__ */ jsx("kbd", {
-				className: "bg-surface-2 text-fg-muted rounded-(--radius-control) px-1 font-mono text-(length:--cue-text-micro)",
+				className: "bg-surface-2 text-fg-muted rounded-control px-1 font-mono text-(length:--cue-text-micro)",
 				children: "↵"
 			})
 		]
@@ -210,11 +211,11 @@ function ComposerAttachmentChip({ attachment, onRemove, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "composer-attachment",
 		"data-state": attachment.state,
-		className: cn(field, "relative flex items-center gap-2.5 overflow-hidden rounded-(--radius-surface) py-1.5 ps-1.5 pe-2.5", className),
+		className: cn(field, "relative flex items-center gap-2.5 overflow-hidden rounded-surface py-1.5 ps-1.5 pe-2.5", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "bg-surface-2 text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				className: "bg-surface-2 text-fg-muted flex size-8 shrink-0 items-center justify-center rounded-surface",
 				children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
 			}),
 			/* @__PURE__ */ jsxs("span", {
@@ -258,7 +259,7 @@ function ComposerInput({ onSubmit, onKeyDown, className, ...props }) {
 			if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
 			onSubmit?.();
 		},
-		className: cn("placeholder:text-fg-subtle min-h-11 w-full bg-transparent px-3 text-(length:--cue-text-emphasis) caret-stream outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", className),
+		className: cn(`placeholder:text-fg-subtle min-h-11 w-full bg-transparent px-3 text-(length:--cue-text-emphasis) caret-stream outline-none ${FOCUS_RING}`, className),
 		...props
 	});
 }
@@ -393,7 +394,7 @@ function ComposerContext({ usage, className, ...props }) {
 		className: cn("group/ctx relative", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn(floating, "absolute end-0 bottom-full z-10 mb-2 flex w-60 origin-bottom-right flex-col gap-3.5 rounded-(--radius-overlay) p-4", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "pointer-events-none scale-[0.97] opacity-0", "group-hover/ctx:pointer-events-auto group-hover/ctx:scale-100 group-hover/ctx:opacity-100", "group-focus-within/ctx:pointer-events-auto group-focus-within/ctx:scale-100 group-focus-within/ctx:opacity-100"),
+			className: cn(floating, "absolute end-0 bottom-full z-10 mb-2 flex w-60 origin-bottom-right flex-col gap-3.5 rounded-overlay p-4", "transition-[opacity,scale] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", "pointer-events-none scale-[0.97] opacity-0", "group-hover/ctx:pointer-events-auto group-hover/ctx:scale-100 group-hover/ctx:opacity-100", "group-focus-within/ctx:pointer-events-auto group-focus-within/ctx:scale-100 group-focus-within/ctx:opacity-100"),
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-baseline justify-between",

package/dist/elements/computer-use.js

@@ -21,7 +21,7 @@ function ComputerUse({ url, steps, activeIndex, children, className, ...props })
 	const trail = steps.slice(Math.max(0, index - 2), index + 1);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "computer-use",
-		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/confidence-marker.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import "./surfaces.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -38,7 +39,7 @@ function ConfidenceMarker({ claims, hoveredId, onHover, className, ...props }) {
 				onMouseLeave: () => onHover?.(""),
 				onFocus: () => onHover?.(claim.id),
 				onBlur: () => onHover?.(""),
-				className: cn("focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent inline cursor-help rounded-(--radius-control) text-start underline decoration-2 underline-offset-[3px] transition-colors outline-none", UNDERLINE[claim.confidence], hoveredId === claim.id ? "text-fg" : "text-fg-muted"),
+				className: cn(`${FOCUS_RING} inline cursor-help rounded-control text-start underline decoration-2 underline-offset-[3px] transition-colors outline-none`, UNDERLINE[claim.confidence], hoveredId === claim.id ? "text-fg" : "text-fg-muted"),
 				children: [claim.text, " "]
 			}, claim.id))
 		}), /* @__PURE__ */ jsx("div", {

package/dist/elements/connection-state.js

@@ -17,7 +17,7 @@ function ConnectionState({ phase, attempt, resumedTokens, onRetry, className, ..
 	if (phase === "online") return null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "connection-state",
-		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-(--radius-overlay) px-3.5 py-2.5 duration-300", className),
+		className: cn(paper, "cue-elements-fade-in cue-elements-slide-in-from-top-1 cue-elements-animate-in flex w-full max-w-sm items-center gap-2.5 rounded-overlay px-3.5 py-2.5 duration-300", className),
 		...props,
 		children: [
 			phase === "dropped" && /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/elements/context-breakdown.js

@@ -19,7 +19,7 @@ function ContextBreakdown({ segments, limit, className, ...props }) {
 	const share = (tokens) => pct(tokens, limit);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "context-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", {

package/dist/elements/context-usage.js

@@ -91,7 +91,7 @@ const ContextUsage = React.forwardRef(function ContextUsage({ categories, limit,
 		ref,
 		"data-slot": "context-usage",
 		"data-pressure": pressure,
-		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),
 		...elementProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/conversation-search.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 { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronUpIcon, SearchIcon } from "lucide-react";
@@ -36,7 +37,7 @@ function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, c
 						onChange: (event) => onQueryChange?.(event.target.value),
 						placeholder: "Find in conversation",
 						"aria-label": "Find in conversation",
-						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("span", {
 						className: cn(mono, "text-fg-subtle shrink-0 tabular-nums"),
@@ -58,14 +59,14 @@ function ConversationSearch({ query, hits, activeIndex, onQueryChange, onStep, c
 					})
 				]
 			}), active && /* @__PURE__ */ jsxs("div", {
-				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in rounded-(--radius-surface) px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-200"),
+				className: cn("bg-fg/[0.06]", "cue-elements-fade-in cue-elements-animate-in rounded-surface px-3 py-2 text-(length:--cue-text-ui) leading-(--cue-leading-ui) duration-200"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						className: "text-fg-muted",
 						children: active.before
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "text-fg rounded-(--radius-control) bg-warn/35 px-0.5",
+						className: "text-fg rounded-control bg-warn/35 px-0.5",
 						children: active.match
 					}),
 					/* @__PURE__ */ jsx("span", {

package/dist/elements/cost-meter.js

@@ -15,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function CostMeter({ runCost, sessionCost, lines, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "cost-meter",
-		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", {

package/dist/elements/data-table.js

@@ -17,7 +17,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function ElementsDataTable({ rows, cycle, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-table",
-		className: cn(paper, "w-full max-w-sm overflow-hidden rounded-(--radius-overlay) text-(length:--cue-text-body)", className),
+		className: cn(paper, "w-full max-w-sm overflow-hidden rounded-overlay text-(length:--cue-text-body)", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -43,7 +43,7 @@ function ElementsDataTable({ rows, cycle, className, ...props }) {
 				style: { animationDelay: `${index * 80}ms` },
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "bg-surface-2 text-fg-muted flex size-5 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-5 shrink-0 items-center justify-center rounded-control text-(length:--cue-text-micro) font-medium",
 						children: row.name[0]
 					}),
 					/* @__PURE__ */ jsx("span", {

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