@cueplusplus/ui 0.16.0 → 0.18.0

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", {

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",