@cueplusplus/ui 0.16.0 → 0.17.0

package/dist/date/calendar.js

@@ -1,5 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
+import { LABEL_FACE } from "../system/_style-label-face.js";
+import { LABEL_CASE } from "../system/_style-label-case.js";
+import { LABEL_TRACKING, LABEL_TRACKING_TIGHT } from "../system/_style-label-tracking.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker } from "react-day-picker";
@@ -23,29 +27,29 @@ const CALENDAR_CLASSES = {
 	months: "relative flex flex-wrap items-start gap-(--cue-space-5)",
 	month: "flex flex-col gap-(--cue-space-2)",
 	month_caption: "flex h-control-sm items-center justify-center",
-	caption_label: "font-mono text-(length:--cue-text-label) tracking-(--cue-tracking-caps) text-fg-subtle uppercase",
+	caption_label: `${LABEL_FACE} text-(length:--cue-text-label) ${LABEL_TRACKING} text-fg-subtle ${LABEL_CASE}`,
 	nav: "absolute inset-x-0 top-0 flex h-control-sm items-center justify-between",
-	button_previous: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
-	button_next: "flex size-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
+	button_previous: `flex size-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
+	button_next: `flex size-control-sm cursor-pointer items-center justify-center rounded-control border-0 bg-transparent p-0 text-fg-subtle outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
 	chevron: "size-icon-sm fill-current",
 	month_grid: "border-collapse border-spacing-0",
 	weekdays: "",
-	weekday: "size-control-sm p-0 text-center align-middle font-mono text-(length:--cue-text-micro) font-normal tracking-(--cue-tracking-caps-tight) text-fg-subtle uppercase",
+	weekday: `size-control-sm p-0 text-center align-middle ${LABEL_FACE} text-(length:--cue-text-micro) font-normal ${LABEL_TRACKING_TIGHT} text-fg-subtle ${LABEL_CASE}`,
 	week: "",
 	day: "p-0 text-center align-middle",
-	day_button: "size-control-sm cursor-pointer rounded-(--radius-control) border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted outline-none transition-colors duration-150 hover:bg-surface-3 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none",
+	day_button: `size-control-sm cursor-pointer rounded-control border-0 bg-transparent p-0 font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted outline-none transition-colors duration-150 hover:bg-surface-3 hover:text-fg ${FOCUS_RING} disabled:pointer-events-none disabled:opacity-30 motion-reduce:transition-none`,
 	today: "[&_button]:font-medium [&_button]:ring-1 [&_button]:ring-inset [&_button]:ring-accent/60",
 	outside: "[&_button]:text-fg-subtle [&_button]:opacity-50",
 	disabled: "opacity-40",
 	hidden: "invisible",
 	selected: "bg-accent text-accent-fg [&_button]:bg-accent [&_button]:text-accent-fg [&_button]:hover:bg-accent-hover",
-	range_start: "rounded-l-(--radius-control)",
-	range_end: "rounded-r-(--radius-control)",
+	range_start: "rounded-l-control",
+	range_end: "rounded-r-control",
 	range_middle: "rounded-none bg-accent-soft text-fg [&_button]:rounded-none [&_button]:bg-transparent [&_button]:text-fg",
 	footer: "pt-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg-muted",
 	dropdowns: "flex items-center gap-(--cue-space-2)",
 	dropdown_root: "relative inline-flex items-center",
-	dropdown: "h-control-sm cursor-pointer rounded-(--radius-control) border border-border bg-sunken px-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent",
+	dropdown: `h-control-sm cursor-pointer rounded-control border border-border bg-sunken px-(--cue-space-2) font-mono text-(length:--cue-text-label) text-fg outline-none ${FOCUS_RING}`,
 	week_number: "size-control-sm text-center align-middle font-mono text-(length:--cue-text-micro) tabular-nums text-fg-subtle",
 	week_number_header: "size-control-sm text-center align-middle font-mono text-(length:--cue-text-micro) text-fg-subtle"
 };

package/dist/dmx/channel-matrix.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { useComposedRefs } from "../lib/compose.js";
 import { useCuePortalProps } from "../system/portal.js";
@@ -237,7 +238,7 @@ const ChannelMatrix = React.forwardRef(function ChannelMatrix({ className, data,
 						selectUniverse(index);
 						selectMode("detail");
 					},
-					className: "flex cursor-pointer flex-col gap-(--cue-space-2) rounded-(--radius-control) border border-border bg-surface-1 p-(--cue-space-2) text-left outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent data-[selected=true]:border-accent",
+					className: `flex cursor-pointer flex-col gap-(--cue-space-2) rounded-control border border-border bg-surface-1 p-(--cue-space-2) text-left outline-none ${FOCUS_RING} data-[selected=true]:border-accent`,
 					children: [/* @__PURE__ */ jsxs("span", {
 						className: "font-mono text-(length:--cue-text-micro) tabular-nums text-fg-muted",
 						children: ["U", String(index).padStart(2, "0")]
@@ -277,7 +278,7 @@ function ControlButton({ pressed, onClick, children }) {
 		type: "button",
 		"aria-pressed": pressed,
 		onClick,
-		className: "flex h-control-sm cursor-pointer items-center rounded-(--radius-control) px-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-muted outline-none transition-colors duration-150 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent aria-pressed:bg-accent-soft aria-pressed:text-accent motion-reduce:transition-none",
+		className: `flex h-control-sm cursor-pointer items-center rounded-control px-(--cue-space-3) font-mono text-(length:--cue-text-label) text-fg-muted outline-none transition-colors duration-150 hover:text-fg ${FOCUS_RING} aria-pressed:bg-accent-soft aria-pressed:text-accent motion-reduce:transition-none`,
 		children
 	});
 }

package/dist/dmx/dmx-bar.js

@@ -84,7 +84,7 @@ const DmxBar = React.forwardRef(function DmxBar({ className, data, height = DEFA
 				"aria-label": summary,
 				"data-slot": "dmx-bar-canvas",
 				"data-live": String(live),
-				className: "block w-full cursor-crosshair rounded-(--radius-control) border border-border bg-(--cue-data-ground) [image-rendering:pixelated] data-[live=false]:opacity-45",
+				className: "block w-full cursor-crosshair rounded-control border border-border bg-(--cue-data-ground) [image-rendering:pixelated] data-[live=false]:opacity-45",
 				style: { height: toRem(height) }
 			}),
 			hover === null ? null : /* @__PURE__ */ jsx("span", {

package/dist/dmx/dmx-strip.js

@@ -172,7 +172,7 @@ const DmxStrip = React.forwardRef(function DmxStrip({ className, cells = DEFAULT
 				role: "img",
 				"aria-label": label ?? "Simulated DMX activity",
 				"data-slot": "dmx-strip-canvas",
-				className: "block w-full cursor-crosshair rounded-(--radius-control) border border-border bg-(--cue-data-ground) [image-rendering:pixelated]",
+				className: "block w-full cursor-crosshair rounded-control border border-border bg-(--cue-data-ground) [image-rendering:pixelated]",
 				style: { height: toRem(height) }
 			}),
 			hover === null ? null : /* @__PURE__ */ jsx("span", {

package/dist/dmx/universe-grid.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { toRem } from "../instruments/_rem.js";
 import "./_ramp.js";
 import { UNIVERSE_TICKS, channelPercent, universeLayout } from "./_universe.js";
@@ -85,7 +86,7 @@ const UniverseGrid = React.forwardRef(function UniverseGrid({ className, allocat
 				role: interactive ? "group" : "img",
 				"aria-label": interactive ? label ?? "Universe" : label === void 0 ? summary : `${label}: ${summary}`,
 				"data-slot": "universe-grid-track",
-				className: "relative w-full overflow-hidden rounded-(--radius-control) border border-border bg-sunken",
+				className: "relative w-full overflow-hidden rounded-control border border-border bg-sunken",
 				style: { height: toRem(height) },
 				children: [
 					GRIDLINES.filter((channel) => channel <= slots).map((channel) => /* @__PURE__ */ jsx("span", {
@@ -110,7 +111,7 @@ const UniverseGrid = React.forwardRef(function UniverseGrid({ className, allocat
 						"data-conflict": block.conflict ? "true" : void 0,
 						"aria-label": `${block.label}: channels ${block.start} to ${block.end}`,
 						onClick: () => onSelect(block.allocation),
-						className: cn("absolute inset-y-0 min-w-[2px] cursor-pointer rounded-[2px] outline-none transition-opacity duration-150 hover:opacity-85 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none", BLOCK_TONES[block.tone], block.conflict ? "z-10 ring-1 ring-danger" : void 0),
+						className: cn(`absolute inset-y-0 min-w-[2px] cursor-pointer rounded-[2px] outline-none transition-opacity duration-150 hover:opacity-85 ${FOCUS_RING} motion-reduce:transition-none`, BLOCK_TONES[block.tone], block.conflict ? "z-10 ring-1 ring-danger" : void 0),
 						style: {
 							left: `${block.left}%`,
 							width: `${block.width}%`

package/dist/elements/activity-graph.js

@@ -28,7 +28,7 @@ const LEVEL_TINT = [
 function ActivityGraph({ data, start, end, title, total, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "activity-graph",
-		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 justify-between",
@@ -55,7 +55,7 @@ function ActivityGraph({ data, start, end, title, total, className, ...props })
 					}) })
 				}), /* @__PURE__ */ jsx(HeatGraph.Grid, {
 					className: "gap-[3px]",
-					children: ({ cell }) => /* @__PURE__ */ jsx(HeatGraph.Cell, { className: cn("size-[9px] rounded-(--radius-control)", LEVEL_TINT[cell.level] ?? LEVEL_TINT[0]) })
+					children: ({ cell }) => /* @__PURE__ */ jsx(HeatGraph.Cell, { className: cn("size-[9px] rounded-control", LEVEL_TINT[cell.level] ?? LEVEL_TINT[0]) })
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-1.5 self-end",
@@ -66,7 +66,7 @@ function ActivityGraph({ data, start, end, title, total, className, ...props })
 					}),
 					LEVEL_TINT.map((tint, level) => /* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,
-						className: cn("size-[9px] rounded-(--radius-control)", tint)
+						className: cn("size-[9px] rounded-control", tint)
 					}, level)),
 					/* @__PURE__ */ jsx("span", {
 						className: cn(mono, "text-fg-subtle"),

package/dist/elements/agent-card.js

@@ -25,13 +25,13 @@ import { BotIcon, CheckIcon } from "lucide-react";
 function AgentCard({ name, description, provider, version, model, endpoint, skills, connected, onConnect, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "agent-card",
-		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-start gap-3",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
 					children: /* @__PURE__ */ jsx(BotIcon, { className: "size-4" })
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex min-w-0 flex-1 flex-col",
@@ -59,7 +59,7 @@ function AgentCard({ name, description, provider, version, model, endpoint, skil
 				children: skills.map((skill) => /* @__PURE__ */ jsxs("div", {
 					className: "flex items-baseline gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cn(field, mono, "text-fg-muted shrink-0 rounded-(--radius-control) px-1.5 py-0.5"),
+						className: cn(field, mono, "text-fg-muted shrink-0 rounded-control px-1.5 py-0.5"),
 						children: skill.name
 					}), /* @__PURE__ */ jsx("span", {
 						className: "text-fg-muted min-w-0 flex-1 truncate text-(length:--cue-text-ui)",

package/dist/elements/approval-card.js

@@ -22,13 +22,13 @@ import { CheckIcon, Loader2Icon, TerminalIcon, XIcon } from "lucide-react";
 function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAllow, onDeny, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "approval-card",
-		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-3",
 				children: [/* @__PURE__ */ jsx("span", {
-					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+					className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
 					children: /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4" })
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col",
@@ -42,7 +42,7 @@ function ApprovalCard({ state, command, title, subtitle, onAllowOnce, onAlwaysAl
 				})]
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn(field, "text-fg-muted rounded-(--radius-surface) px-3.5 py-2.5 font-mono text-(length:--cue-text-ui)"),
+				className: cn(field, "text-fg-muted rounded-surface px-3.5 py-2.5 font-mono text-(length:--cue-text-ui)"),
 				children: command
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/elements/artifact-card.js

@@ -20,11 +20,11 @@ import { ArrowUpRightIcon, FileTextIcon } from "lucide-react";
 function ArtifactCard({ title, meta, generating = false, words = 0, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "artifact-card",
-		className: cn(paper, "group flex w-full max-w-xs cursor-pointer items-center gap-3 rounded-(--radius-overlay) p-3.5 transition-transform duration-150 hover:-translate-y-px active:scale-[0.98]", className),
+		className: cn(paper, "group flex w-full max-w-xs cursor-pointer items-center gap-3 rounded-overlay p-3.5 transition-transform duration-150 hover:-translate-y-px active:scale-[0.98]", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-(--radius-surface)",
+				className: "bg-surface-1 text-fg-muted flex size-9 shrink-0 items-center justify-center rounded-surface",
 				children: /* @__PURE__ */ jsx(FileTextIcon, { className: cn("size-4", generating && "animate-pulse motion-reduce:animate-none") })
 			}),
 			/* @__PURE__ */ jsxs("div", {

package/dist/elements/background-inbox.js

@@ -17,7 +17,7 @@ function BackgroundInbox({ runs, onCollect, className, ...props }) {
 	const running = runs.filter((run) => run.state === "running").length;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "background-inbox",
-		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",
@@ -32,7 +32,7 @@ function BackgroundInbox({ runs, onCollect, className, ...props }) {
 			type: "button",
 			disabled: run.state === "running",
 			onClick: () => onCollect?.(run.id),
-			className: cn("flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-2 text-start transition-colors", run.state === "running" ? "cursor-default" : "hover:bg-surface-1"),
+			className: cn("flex items-center gap-2.5 rounded-surface px-1.5 py-2 text-start transition-colors", run.state === "running" ? "cursor-default" : "hover:bg-surface-1"),
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: "flex size-3.5 shrink-0 items-center justify-center",

package/dist/elements/canvas-split.js

@@ -34,7 +34,7 @@ import { CheckIcon, CopyIcon, FileTextIcon, XIcon } from "lucide-react";
 function CanvasSplit({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "canvas-split",
-		className: cn(paper, "flex w-full max-w-3xl flex-col overflow-hidden rounded-(--radius-overlay) md:h-80 md:flex-row", className),
+		className: cn(paper, "flex w-full max-w-3xl flex-col overflow-hidden rounded-overlay md:h-80 md:flex-row", className),
 		...props
 	});
 }
@@ -54,7 +54,7 @@ function CanvasSplitMessage({ speaker, className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "canvas-split-message",
 		"data-speaker": speaker,
-		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-(--radius-overlay) px-3 py-2") : "text-fg-muted", className),
+		className: cn("cue-elements-fade-in cue-elements-animate-in cue-elements-fill-mode-both text-(length:--cue-text-body) leading-(--cue-leading-ui) duration-300", speaker === "user" ? cn(field, "text-fg-muted ms-auto rounded-overlay px-3 py-2") : "text-fg-muted", className),
 		...props
 	});
 }

package/dist/elements/chart.js

@@ -45,7 +45,7 @@ function Chart({ label, value, delta, points, visibleCount, variant = "area", cl
 	const rising = delta !== void 0 && !falling;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "chart",
-		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/chat-panel.js

@@ -27,7 +27,7 @@ import { ArrowUpIcon } from "lucide-react";
 function ChatPanel({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chat-panel",
-		className: cn(paper, "flex h-[270px] w-full max-w-md flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(paper, "flex h-[270px] w-full max-w-md flex-col overflow-hidden rounded-overlay", className),
 		...props
 	});
 }
@@ -46,7 +46,7 @@ function ChatPanelMessages({ className, ...props }) {
 function ChatPanelUserMessage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "chat-panel-user-message",
-		className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in self-end rounded-(--radius-overlay) px-3 py-1.5 text-(length:--cue-text-ui) duration-300", className),
+		className: cn(field, "cue-elements-fade-in cue-elements-slide-in-from-bottom-1 cue-elements-animate-in self-end rounded-overlay px-3 py-1.5 text-(length:--cue-text-ui) duration-300", className),
 		...props
 	});
 }

package/dist/elements/checkpoint-history.js

@@ -16,7 +16,7 @@ function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...pr
 	const currentIndex = checkpoints.findIndex((checkpoint) => checkpoint.id === currentId);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "checkpoint-history",
-		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__ */ jsx("span", {
 			className: "px-1.5 pb-1 text-(length:--cue-text-body) font-medium",
@@ -25,7 +25,7 @@ function CheckpointHistory({ checkpoints, currentId, onRestore, className, ...pr
 			const ahead = currentIndex >= 0 && i > currentIndex;
 			const current = checkpoint.id === currentId;
 			return /* @__PURE__ */ jsxs("div", {
-				className: cn("group flex items-center gap-2.5 rounded-(--radius-surface) px-1.5 py-1.5 transition-colors", current ? "bg-surface-1" : "hover:bg-surface-1", ahead && "opacity-40"),
+				className: cn("group flex items-center gap-2.5 rounded-surface px-1.5 py-1.5 transition-colors", current ? "bg-surface-1" : "hover:bg-surface-1", ahead && "opacity-40"),
 				children: [
 					/* @__PURE__ */ jsx("span", {
 						"aria-hidden": true,

package/dist/elements/clamp.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { useIsomorphicLayoutEffect } from "../system/use-isomorphic-layout-effect.js";
 import { CLAMP_LABELS } from "./vocabulary.js";
 import * as React from "react";
@@ -100,7 +101,7 @@ const Clamp = React.forwardRef(function Clamp({ height = 250, fade = 50, open, o
 			"data-slot": "clamp-reveal",
 			"aria-expanded": open,
 			onClick: () => onOpenChange?.(!open),
-			className: cn("text-fg-muted hover:text-fg self-start rounded-(--radius-control) py-0.5 text-(length:--cue-text-ui) transition-opacity focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent motion-reduce:transition-none", !open && "opacity-60 group-hover/clamp:opacity-100 focus-visible:opacity-100"),
+			className: cn(`text-fg-muted hover:text-fg self-start rounded-control py-0.5 text-(length:--cue-text-ui) transition-opacity ${FOCUS_RING} motion-reduce:transition-none`, !open && "opacity-60 group-hover/clamp:opacity-100 focus-visible:opacity-100"),
 			children: open ? said.less : said.more
 		}) : null]
 	});

package/dist/elements/code-diff.js

@@ -28,7 +28,7 @@ const GUTTER = {
 function CodeDiff({ filename, additions, deletions, lines, cycle, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "code-diff",
-		className: cn(paper, "w-full max-w-md overflow-hidden rounded-(--radius-overlay) font-mono text-(length:--cue-text-ui)", className),
+		className: cn(paper, "w-full max-w-md overflow-hidden rounded-overlay font-mono text-(length:--cue-text-ui)", className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center justify-between px-4 pt-3 pb-2",

package/dist/elements/code-runner.js

@@ -22,7 +22,7 @@ import { Loader2Icon, PlayIcon } from "lucide-react";
 function CodeRunner({ language, code, state, output, durationMs, onRun, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "code-runner",
-		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/command-palette.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING } from "../system/_focus-ring.js";
 import { field, floating, mono } from "./surfaces.js";
 import { useEffect, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -50,7 +51,7 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "command-palette",
-		className: cn(floating, "flex w-full max-w-sm flex-col overflow-hidden rounded-(--radius-overlay)", className),
+		className: cn(floating, "flex w-full max-w-sm flex-col overflow-hidden rounded-overlay", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
@@ -68,10 +69,10 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 						"aria-controls": listId,
 						"aria-autocomplete": "list",
 						"aria-activedescendant": ordered.some((command) => command.id === activeId) ? optionId(activeId) : 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("span", {
-						className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+						className: cn(field, mono, "text-fg-subtle rounded-control px-1.5 py-0.5"),
 						children: "esc"
 					})
 				]
@@ -97,14 +98,14 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 						"aria-selected": command.id === activeId,
 						onMouseDown: (event) => event.preventDefault(),
 						onClick: () => onRun?.(command.id),
-						className: cn("flex items-center gap-2 rounded-(--radius-surface) px-2 py-1.5 text-start transition-colors", command.id === activeId ? "bg-surface-2" : "hover:bg-surface-1"),
+						className: cn("flex items-center gap-2 rounded-surface px-2 py-1.5 text-start transition-colors", command.id === activeId ? "bg-surface-2" : "hover:bg-surface-1"),
 						children: [/* @__PURE__ */ jsx("span", {
 							className: "min-w-0 flex-1 truncate text-(length:--cue-text-body)",
 							children: command.label
 						}), /* @__PURE__ */ jsx("span", {
 							className: "flex shrink-0 gap-1",
 							children: command.keys.map((key) => /* @__PURE__ */ jsx("span", {
-								className: cn(field, mono, "text-fg-subtle rounded-(--radius-control) px-1.5 py-0.5"),
+								className: cn(field, mono, "text-fg-subtle rounded-control px-1.5 py-0.5"),
 								children: key
 							}, key))
 						})]

package/dist/elements/comparison-card.js

@@ -20,14 +20,14 @@ import { CheckIcon, MinusIcon } from "lucide-react";
 function ComparisonCard({ traitLabels, options, recommendedId, reason, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "comparison-card",
-		className: cn(paper, "flex w-full max-w-md flex-col gap-3 rounded-(--radius-overlay) p-4", className),
+		className: cn(paper, "flex w-full max-w-md flex-col gap-3 rounded-overlay p-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex gap-2",
 			children: options.map((option) => {
 				const recommended = option.id === recommendedId;
 				return /* @__PURE__ */ jsxs("div", {
-					className: cn("flex min-w-0 flex-1 flex-col gap-2 rounded-(--radius-surface) p-3 transition-colors", recommended ? "bg-stream/10" : field),
+					className: cn("flex min-w-0 flex-1 flex-col gap-2 rounded-surface p-3 transition-colors", recommended ? "bg-stream/10" : field),
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-0.5",
 						children: [/* @__PURE__ */ jsxs("span", {

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