@mcp-b/react-components 0.20.1 → 0.20.5

package/dist/components/ThinkRoutineLibrary.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { B as PlayIcon, K as SpinnerIcon, Q as WarningIcon, d as ChevronDownIcon, y as EllipsisIcon } from "../icons-DKXiSepE.js";
+import { B as PlayIcon, K as SpinnerIcon, Q as WarningIcon, d as ChevronDownIcon, y as EllipsisIcon } from "../icons-DyOM0EJs.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { Button, buttonVariants } from "./Button.js";
 import { Menu } from "./Menu.js";

package/dist/components/ThinkThreadPicker.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, Q as WarningIcon, V as PlusIcon, _ as DotIcon, t as ArchiveIcon } from "../icons-DKXiSepE.js";
+import { K as SpinnerIcon, Q as WarningIcon, V as PlusIcon, _ as DotIcon, t as ArchiveIcon } from "../icons-DyOM0EJs.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { Button, buttonVariants } from "./Button.js";
 import { SearchField } from "./SearchField.js";
@@ -161,7 +161,7 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onDelete, clas
 			/* @__PURE__ */ jsxs("header", {
 				className: "think-thread-picker__header",
 				children: [/* @__PURE__ */ jsx("h2", {
-					className: "think-thread-picker__title",
+					className: "think-thread-picker__title sigvelo-truncate",
 					children: title
 				}), /* @__PURE__ */ jsx(ThinkThreadStatusIndicators, { summary: statusSummary })]
 			}),
@@ -187,6 +187,7 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onDelete, clas
 					className: "think-thread-picker__scroll",
 					children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 						className: "think-thread-picker__viewport",
+						"data-recipe": "scroll-fade-y",
 						"aria-label": "Thread list",
 						children: visibleThreads.length ? /* @__PURE__ */ jsx("ul", {
 							className: "think-thread-picker__list",
@@ -210,7 +211,7 @@ function ThinkThreadPicker({ threads, renderThreadLink, onCreate, onDelete, clas
 										}),
 										"data-thread-status": thread.status,
 										children: [/* @__PURE__ */ jsx("span", {
-											className: "think-thread-picker__thread-title",
+											className: "think-thread-picker__thread-title sigvelo-truncate",
 											children: thread.title
 										}), statusLabel ? /* @__PURE__ */ jsx("span", {
 											className: "think-thread-picker__thread-status",

package/dist/components/ThinkThreadShell.js

@@ -1,3 +1,4 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { ResponsiveSidebarShell } from "./ResponsiveSidebarShell.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
@@ -10,7 +11,7 @@ function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarO
 	return /* @__PURE__ */ jsx(ResponsiveSidebarShell, {
 		...props,
 		ref,
-		className: ["think-thread-shell", className].filter(Boolean).join(" "),
+		className: cx("think-thread-shell", className),
 		sidebar,
 		sidebarLabel: "threads",
 		sidebarOpen,

package/dist/components/Toast.js

@@ -24,7 +24,7 @@ const ToastProvider = (props) => {
 * Container for displaying toasts.
 */
 function ToastViewport({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["toast__viewport"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("toast__viewport", className);
 	return /* @__PURE__ */ jsx(Toast$1.Viewport, {
 		ref,
 		"data-slot": "toast-viewport",
@@ -36,7 +36,7 @@ function ToastViewport({ className, ref, ...props }) {
 * Individual toast wrapper.
 */
 function ToastRoot({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["toast"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("toast", className);
 	return /* @__PURE__ */ jsx(Toast$1.Root, {
 		ref,
 		"data-slot": "toast",
@@ -48,7 +48,7 @@ function ToastRoot({ className, ref, ...props }) {
 * Container for the contents of a toast.
 */
 function ToastContent({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["toast__content"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("toast__content", className);
 	return /* @__PURE__ */ jsx(Toast$1.Content, {
 		ref,
 		"data-slot": "toast-content",
@@ -60,7 +60,7 @@ function ToastContent({ className, ref, ...props }) {
 * Title that labels the toast. Renders an `<h2>` element.
 */
 function ToastTitle({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["toast__title"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("toast__title", className);
 	return /* @__PURE__ */ jsx(Toast$1.Title, {
 		ref,
 		"data-slot": "toast-title",
@@ -72,7 +72,7 @@ function ToastTitle({ className, ref, ...props }) {
 * Description text for the toast. Renders a `<p>` element.
 */
 function ToastDescription({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["toast__description"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("toast__description", className);
 	return /* @__PURE__ */ jsx(Toast$1.Description, {
 		ref,
 		"data-slot": "toast-description",
@@ -102,7 +102,7 @@ function ToastAction({ render, className, ref, ...props }) {
 * Close button that dismisses the toast.
 */
 function ToastClose({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["toast__close"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("toast__close", className);
 	return /* @__PURE__ */ jsx(Toast$1.Close, {
 		ref,
 		"data-slot": "toast-close",

package/dist/components/ToggleGroup.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
@@ -44,7 +44,7 @@ function ToggleGroupRoot({ size = "md", spacing = 0, variant = "default", classN
 		...style,
 		gap
 	};
-	const classes = mergeBaseClassName(["toggle-group", size !== "md" && `toggle-group--${size}`].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName(cx("toggle-group", size !== "md" && `toggle-group--${size}`), className);
 	const contextValue = React.useMemo(() => ({
 		variant,
 		size,

package/dist/components/Tooltip.js

@@ -38,7 +38,7 @@ function TooltipTrigger(props) {
 	});
 }
 function TooltipPositioner({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["tooltip__positioner", "base-ui-positioner"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("tooltip__positioner base-ui-positioner", className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 		ref,
 		"data-slot": "tooltip-positioner",
@@ -47,7 +47,7 @@ function TooltipPositioner({ className, ref, ...props }) {
 	});
 }
 function TooltipPopup({ className, ref, role = "tooltip", ...props }) {
-	const classes = mergeBaseClassName(["tooltip__popup", "base-ui-popup"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("tooltip__popup base-ui-popup", className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Popup, {
 		ref,
 		role,
@@ -62,7 +62,7 @@ function TooltipPopup({ className, ref, role = "tooltip", ...props }) {
 * positioner, popup, and this viewport when that behavior is needed.
 */
 function TooltipViewport({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["tooltip__viewport"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("tooltip__viewport", className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
 		ref,
 		"data-slot": "tooltip-viewport",
@@ -71,7 +71,7 @@ function TooltipViewport({ className, ref, ...props }) {
 	});
 }
 function TooltipArrow({ className, ref, ...props }) {
-	const classes = mergeBaseClassName(["tooltip__arrow"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName("tooltip__arrow", className);
 	return /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
 		ref,
 		"data-slot": "tooltip-arrow",

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { U as RefreshIcon, d as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../icons-DKXiSepE.js";
+import { U as RefreshIcon, d as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../icons-DyOM0EJs.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/WorkspaceBrowser.js

@@ -1,4 +1,4 @@
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-CUlXfnmc.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-CdgfccsM.js";
 import { SearchField } from "./SearchField.js";
 import { WorkspaceHeader } from "./WorkspaceHeader.js";
 import * as React from "react";

package/dist/components/WorkspaceExplorer.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationProvider, o as useRequiredWorkspaceNavigationRestoration, r as resolveWorkspaceLink, t as WorkspaceFileLink } from "../WorkspaceLink-BYYeTQLf.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./WorkspaceFile.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../WorkspaceFileView-CEdArlOT.js";
-import { t as mergeRefs } from "../merge-refs-KlanQB7A.js";
+import { t as WorkspaceFileView } from "../WorkspaceFileView-Bxx4wEzJ.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryOptions, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/WorkspaceFileView.js

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../WorkspaceFileView-CEdArlOT.js";
+import { t as WorkspaceFileView } from "../WorkspaceFileView-Bxx4wEzJ.js";
 export { WorkspaceFileView };

package/dist/components/WorkspaceHeader.js

@@ -1,4 +1,4 @@
-import { U as RefreshIcon } from "../icons-DKXiSepE.js";
+import { U as RefreshIcon } from "../icons-DyOM0EJs.js";
 import { AppTopBar } from "./AppTopBar.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { $ as WrenchIcon, A as McpIcon, B as PlayIcon, C as FolderIcon, D as InfoIcon, E as ImageIcon, F as MoonIcon, G as SidebarIcon, H as QueueIcon, I as MoveToFrontIcon, J as StopIcon, K as SpinnerIcon, L as PaperclipIcon, M as MicrophoneIcon, N as MinusIcon, O as LinkIcon, P as MonitorIcon, Q as WarningIcon, R as PauseIcon, S as FileIcon, T as HashIcon, U as RefreshIcon, V as PlusIcon, W as SearchIcon, X as TerminalIcon, Y as SunIcon, Z as TrashIcon, _ as DotIcon, a as ArrowUpIcon, b as EyeIcon, c as BrainIcon, d as ChevronDownIcon, et as XIcon, f as ChevronLeftIcon, g as DiscordIcon, h as CopyIcon, i as ArrowRightIcon, j as MessageSquareIcon, k as MaximizeIcon, l as CalendarIcon, m as CodeIcon, n as ArrowDownIcon, o as BookmarkIcon, p as ChevronRightIcon, q as SquareIcon, r as ArrowLeftIcon, s as BoxIcon, t as ArchiveIcon, u as CheckIcon, v as DownloadIcon, w as FolderOpenIcon, x as EyeOffIcon, y as EllipsisIcon, z as PencilIcon } from "../icons-DKXiSepE.js";
+import { $ as WrenchIcon, A as McpIcon, B as PlayIcon, C as FolderIcon, D as InfoIcon, E as ImageIcon, F as MoonIcon, G as SidebarIcon, H as QueueIcon, I as MoveToFrontIcon, J as StopIcon, K as SpinnerIcon, L as PaperclipIcon, M as MicrophoneIcon, N as MinusIcon, O as LinkIcon, P as MonitorIcon, Q as WarningIcon, R as PauseIcon, S as FileIcon, T as HashIcon, U as RefreshIcon, V as PlusIcon, W as SearchIcon, X as TerminalIcon, Y as SunIcon, Z as TrashIcon, _ as DotIcon, a as ArrowUpIcon, b as EyeIcon, c as BrainIcon, d as ChevronDownIcon, et as XIcon, f as ChevronLeftIcon, g as DiscordIcon, h as CopyIcon, i as ArrowRightIcon, j as MessageSquareIcon, k as MaximizeIcon, l as CalendarIcon, m as CodeIcon, n as ArrowDownIcon, o as BookmarkIcon, p as ChevronRightIcon, q as SquareIcon, r as ArrowLeftIcon, s as BoxIcon, t as ArchiveIcon, u as CheckIcon, v as DownloadIcon, w as FolderOpenIcon, x as EyeOffIcon, y as EllipsisIcon, z as PencilIcon } from "../icons-DyOM0EJs.js";
 export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-BtRwhRks.js → copy-button-vo1paUSi.js}

@@ -1,4 +1,4 @@
-import { h as CopyIcon, u as CheckIcon } from "./icons-DKXiSepE.js";
+import { h as CopyIcon, u as CheckIcon } from "./icons-DyOM0EJs.js";
 import { Button } from "./components/Button.js";
 import { Tooltip } from "./components/Tooltip.js";
 import * as React from "react";

package/dist/format-S6uWyoSb.js

@@ -0,0 +1,38 @@
+//#region src/components/_internal/format.ts
+/**
+* Small string/number formatting helpers shared across components, so the same
+* one-liners are not re-derived in each file.
+*/
+/**
+* Constrains `value` to the inclusive `[min, max]` range.
+*/
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+/**
+* Uppercases the first character of `value`, leaving the rest untouched.
+*/
+function capitalize(value) {
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+/**
+* Turns a `kebab-case` or `snake_case` identifier into a space-separated,
+* word-capitalized label (e.g. `"service-tier"` → `"Service Tier"`).
+*/
+function titleCase(value) {
+	return value.split(/[-_]/).filter(Boolean).map((word) => word[0].toUpperCase() + word.slice(1)).join(" ");
+}
+/**
+* Formats a whole number of seconds as a clock string — `m:ss`, widening to
+* `h:mm:ss` once it reaches an hour. Negative and fractional inputs are floored
+* to whole seconds, so callers that need rounding should round before calling.
+*/
+function formatClock(totalSeconds) {
+	const total = Math.max(0, Math.floor(totalSeconds));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const seconds = String(total % 60).padStart(2, "0");
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+//#endregion
+export { titleCase as i, clamp as n, formatClock as r, capitalize as t };

package/dist/{icons-DKXiSepE.js → icons-DyOM0EJs.js}

@@ -1,3 +1,4 @@
+import { t as cx } from "./class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
 import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
@@ -61,7 +62,7 @@ function SpinnerIcon({ className, size = 16, strokeWidth = 1.75, ...props }) {
 		strokeWidth,
 		"aria-hidden": "true",
 		focusable: "false",
-		className: ["sigvelo-icon--spinner", className].filter(Boolean).join(" "),
+		className: cx("sigvelo-icon--spinner", className),
 		...props
 	});
 }

package/dist/{merge-refs-KlanQB7A.js → merge-refs-DF_7w2x_.js}

@@ -15,4 +15,4 @@ function mergeRefs(...refs) {
 	};
 }
 //#endregion
-export { mergeRefs as t };
+export { mergeRefs as n, assignRef as t };

package/dist/styles/accordion.css

@@ -3,7 +3,8 @@
 }
 
 .accordion__item {
-  border-block-end: 1px solid var(--sigvelo-color-neutral-border-muted);
+  border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
 }
 
 .accordion__item:last-child {

package/dist/styles/activity-header.css

@@ -18,9 +18,6 @@
   min-width: 0;
   max-width: max-content;
   color: var(--sigvelo-color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .activity__item-icon {
@@ -31,29 +28,18 @@
 
 .activity[data-streaming] .activity__header-label,
 .activity__header[data-streaming] .activity__header-label {
-  --activity-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  --sigvelo-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   background: linear-gradient(
     90deg,
-    var(--activity-shimmer-base) 0%,
-    var(--activity-shimmer-base) 40%,
+    var(--sigvelo-shimmer-base) 0% 40%,
     var(--sigvelo-color-text) 50%,
-    var(--activity-shimmer-base) 60%,
-    var(--activity-shimmer-base) 100%
+    var(--sigvelo-shimmer-base) 60% 100%
   );
   background-size: 200% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  animation: activity-shimmer 2.4s linear infinite;
-}
-
-@keyframes activity-shimmer {
-  from {
-    background-position: 100% 0;
-  }
-  to {
-    background-position: -100% 0;
-  }
+  animation: sigvelo-text-shimmer var(--sigvelo-motion-duration-shimmer) linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/styles/activity.css

@@ -339,7 +339,7 @@
 
 @media (forced-colors: active) {
   .activity__trigger:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
   }
 }

package/dist/styles/agent-activity-preview-overlay.css

@@ -61,6 +61,18 @@
   }
 }
 
+/* Shadow-local copy of base.css's sigvelo-text-shimmer — keyframes do not cross
+   shadow roots, so the imported activity header shimmer needs it defined here.
+   --sigvelo-motion-duration-shimmer inherits across the boundary. */
+@keyframes sigvelo-text-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   :host {
     --sigvelo-color-warning-text: #f0aa45;

package/dist/styles/agent-activity-preview.css

@@ -94,7 +94,7 @@
 }
 
 .agent-activity-preview__item:first-child {
-  padding-inline-end: calc(2rem + var(--sigvelo-spacing-0-5));
+  padding-inline-end: calc(var(--sigvelo-spacing-8) + var(--sigvelo-spacing-0-5));
 }
 
 .agent-activity-preview__row {
@@ -166,7 +166,7 @@
 .agent-activity-preview__favicons {
   display: flex;
   align-items: center;
-  padding-inline-start: 0.25rem;
+  padding-inline-start: var(--sigvelo-spacing-1);
 }
 
 .agent-activity-preview__favicons img {
@@ -234,6 +234,6 @@
   .agent-activity-preview__dismiss,
   .agent-activity-preview__file-action,
   .agent-activity-preview__favicons img {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/agent-attention.css

@@ -4,7 +4,8 @@
   min-width: 0;
   gap: var(--sigvelo-spacing-1-5);
   padding: var(--sigvelo-spacing-1-5);
-  border: 1px solid var(--sigvelo-color-neutral-border-muted);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--sigvelo-color-neutral-border-muted);
   border-radius: var(--sigvelo-radius-md);
   color: var(--sigvelo-color-text);
   background: var(--sigvelo-color-surface);
@@ -60,13 +61,6 @@
   line-height: 1.35;
 }
 
-.agent-attention__title,
-.agent-attention__description {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .agent-attention__title {
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -97,26 +91,18 @@
 }
 
 .agent-attention[data-busy] .agent-attention__title {
-  --agent-attention-shimmer: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  --sigvelo-shimmer-base: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
   background: linear-gradient(
     90deg,
-    var(--agent-attention-shimmer) 0% 40%,
+    var(--sigvelo-shimmer-base) 0% 40%,
     var(--sigvelo-color-text) 50%,
-    var(--agent-attention-shimmer) 60% 100%
+    var(--sigvelo-shimmer-base) 60% 100%
   );
   background-size: 200% 100%;
+  -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
-  animation: agent-attention-shimmer 2.4s linear infinite;
-}
-
-@keyframes agent-attention-shimmer {
-  from {
-    background-position: 100% 0;
-  }
-  to {
-    background-position: -100% 0;
-  }
+  animation: sigvelo-text-shimmer var(--sigvelo-motion-duration-shimmer) linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce), (forced-colors: active) {

package/dist/styles/agent-connection.css

@@ -52,10 +52,10 @@
 .agent-connect__targets {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   min-inline-size: 0;
   margin: 0;
-  padding: 0.25rem;
+  padding: var(--sigvelo-spacing-1);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
   border-radius: var(--sigvelo-radius-md);
@@ -175,7 +175,7 @@
   }
 
   .agent-connect__target[data-selected="true"] {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }
 }

package/dist/styles/app-top-bar.css

@@ -38,13 +38,10 @@
   max-inline-size: min(20rem, 45vw);
   align-self: center;
   justify-self: center;
-  overflow: hidden;
   color: var(--sigvelo-color-text);
   font-size: var(--sigvelo-density-compact-control-font-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   line-height: var(--sigvelo-leading-tight);
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .app-top-bar__trailing {
@@ -98,13 +95,13 @@
   }
 
   .app-top-bar__button:focus-visible {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: 2px;
     box-shadow: none;
   }
 
   .app-top-bar__button:is([aria-expanded="true"], [data-popup-open], [data-pressed]) {
-    outline: 2px solid Highlight;
+    outline: var(--sigvelo-focus-ring-forced);
     outline-offset: -2px;
   }
 }

package/dist/styles/artifact.css

@@ -63,6 +63,6 @@
 
 @media (forced-colors: active) {
   .artifact {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }

package/dist/styles/attachment-preview.css

@@ -14,7 +14,7 @@
 }
 
 .attachment-preview__name {
-  margin-block-start: 0.5rem;
+  margin-block-start: var(--sigvelo-spacing-2);
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   text-align: center;

package/dist/styles/badge.css

@@ -110,7 +110,7 @@
 
 @media (forced-colors: active) {
   .badge {
-    border: 1px solid ButtonText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
   }
 
   .badge--ghost,

package/dist/styles/base.css

@@ -35,6 +35,21 @@ body {
   }
 }
 
+/*
+ * Canonical "busy/streaming" text-shimmer sweep. Components own the gradient
+ * treatment and state gating; they share this keyframe and
+ * --sigvelo-motion-duration-shimmer. Shadow-isolated bundles keep a local copy
+ * (keyframes do not cross shadow roots), the same as sigvelo-icon-spin.
+ */
+@keyframes sigvelo-text-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sigvelo-icon--spinner {
     animation: none;

package/dist/styles/browser-control-overlay.css

@@ -85,7 +85,7 @@
 :host .takeover,
 :host .owner {
   background: var(--browser-control-accent);
-  border: 1px solid var(--browser-control-accent-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--browser-control-accent-text);
   box-shadow: 0 2px 10px var(--browser-control-shadow);
   color: var(--browser-control-accent-text);
 }
@@ -120,7 +120,8 @@
 :host .banner {
   align-items: center;
   background: var(--browser-control-warning);
-  border: 1px solid var(--browser-control-warning-text);
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+    var(--browser-control-warning-text);
   border-radius: 14px;
   box-shadow: 0 4px 18px var(--browser-control-shadow);
   color: var(--browser-control-warning-text);
@@ -147,7 +148,7 @@
 
 :host .banner .done,
 :host .banner .cannot {
-  border: 1px solid currentcolor;
+  border: var(--sigvelo-border-style) var(--sigvelo-border-width) currentcolor;
   color: inherit;
   flex-shrink: 0;
 }

package/dist/styles/browser-live-view.css

@@ -41,7 +41,7 @@
 .browser-live-view__badge-dot {
   inline-size: var(--sigvelo-spacing-1-5);
   block-size: var(--sigvelo-spacing-1-5);
-  border-radius: 50%;
+  border-radius: var(--sigvelo-radius-circle);
   background-color: currentColor;
   animation: browser-live-view-pulse 1.4s ease-in-out infinite;
 }
@@ -66,9 +66,6 @@
   font-size: var(--sigvelo-text-xs);
   color: var(--sigvelo-color-text-muted);
   max-inline-size: 80%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 /* An expired view showing a screenshot fallback keeps the image flush */
@@ -95,7 +92,7 @@
 }
 
 .browser-live-view__state-spinner {
-  animation: browser-live-view-spin 900ms linear infinite;
+  animation: sigvelo-icon-spin 900ms linear infinite;
 }
 
 /* Expand affordance, video-player style: quiet until the box is hovered or
@@ -157,12 +154,6 @@
   }
 }
 
-@keyframes browser-live-view-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .browser-live-view__badge-dot,
   .browser-live-view__state-spinner {

package/dist/styles/browser-replay.css

@@ -39,7 +39,7 @@
   inset: 0;
   display: grid;
   place-content: center;
-  padding: 1rem;
+  padding: var(--sigvelo-spacing-4);
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-compact);
   text-align: center;
@@ -49,7 +49,7 @@
   display: flex;
   align-items: center;
   gap: var(--sigvelo-spacing-2-5);
-  padding-block: 0.5rem;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-subtle);
@@ -184,6 +184,6 @@
 
 @media (forced-colors: active) {
   .browser-replay {
-    border: 1px solid CanvasText;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width) CanvasText;
   }
 }