@mcp-b/react-components 0.39.0 → 0.41.0

package/dist/components/general-purpose/Terminal.js

@@ -1,8 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TerminalIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { Z as TerminalIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
-import { Badge } from "../foundations/Badge.js";
+import { t as CopyButton } from "../../copy-button-lys9N_aI.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -123,19 +122,12 @@ function TerminalTitle({ className, children, ref, ...props }) {
 		children: [/* @__PURE__ */ jsx(TerminalIcon, { "aria-hidden": "true" }), children ?? "Terminal"]
 	});
 }
-const STATUS_COLOR = {
-	idle: "neutral",
-	running: "primary",
-	success: "success",
-	error: "destructive"
-};
 function TerminalStatus({ className, status, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Badge, {
+	return /* @__PURE__ */ jsx("span", {
 		...props,
 		ref,
-		color: STATUS_COLOR[status],
-		size: "sm",
 		className: cx("terminal__status", className),
+		"data-status": status,
 		children: status
 	});
 }

package/dist/components/general-purpose/TestResults.d.ts

@@ -30,7 +30,7 @@ interface TestResultsProps extends React.HTMLAttributes<HTMLDivElement> {
  * Built internally for CI/test output in agent and developer workflows. Use it
  * for structured test reports. Do not use it for generic status dashboards.
  *
- * Sigvelo changes: composes Collapsible, Badge, and Progress; maps status
+ * Sigvelo changes: composes Collapsible and Progress; maps status
  * color and spacing to Sigvelo CSS tokens; opens failed suites by default.
  *
  * Suite triggers inherit Collapsible keyboard behavior. Error stacks should be

package/dist/components/general-purpose/TestResults.js

@@ -1,23 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
-import { Badge } from "../foundations/Badge.js";
+import { K as SpinnerIcon, d as CheckIcon, p as ChevronRightIcon, tt as XIcon } from "../../icons-CVFSeTJn.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/TestResults.tsx
-const STATUS_COLOR = {
-	passed: "success",
-	failed: "destructive",
-	skipped: "warning",
-	running: "primary"
-};
-const STATUS_LABEL = {
-	passed: "PASS",
-	failed: "FAIL",
-	skipped: "SKIP",
-	running: "RUN"
-};
 const TestResultsContext = React.createContext({});
 /**
 * Displays a test suite report with summary stats, progress bar, and
@@ -26,7 +13,7 @@ const TestResultsContext = React.createContext({});
 * Built internally for CI/test output in agent and developer workflows. Use it
 * for structured test reports. Do not use it for generic status dashboards.
 *
-* Sigvelo changes: composes Collapsible, Badge, and Progress; maps status
+* Sigvelo changes: composes Collapsible and Progress; maps status
 * color and spacing to Sigvelo CSS tokens; opens failed suites by default.
 *
 * Suite triggers inherit Collapsible keyboard behavior. Error stacks should be
@@ -85,8 +72,9 @@ function TestResultsSummary({ className, children, ref, ...props }) {
 		ref,
 		className: cx("test-results__summary", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Badge, {
-			color: STATUS_COLOR[overall],
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("strong", {
+			className: "test-results__outcome",
+			"data-status": overall,
 			children: overall === "passed" ? "All tests passed" : `${summary.failed} failed`
 		}), /* @__PURE__ */ jsxs("span", {
 			className: "test-results__stats",
@@ -201,10 +189,9 @@ function TestSuiteName({ className, children, ref, ...props }) {
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
 			}),
-			/* @__PURE__ */ jsx(Badge, {
-				color: STATUS_COLOR[status],
-				size: "sm",
-				children: STATUS_LABEL[status]
+			/* @__PURE__ */ jsx(TestStatus, {
+				status,
+				"aria-label": `${status} suite`
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "test-results__suite-name sigvelo-truncate",

package/dist/components/general-purpose/ThemeModeControl.js

@@ -1,4 +1,4 @@
-import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B4mGvCvc.js";
+import { N as MonitorIcon, P as MoonIcon, Y as SunIcon } from "../../icons-CVFSeTJn.js";
 import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/general-purpose/WebPreview.d.ts

@@ -35,7 +35,7 @@ interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
  * known URL with local navigation controls. Do not use it for trusted app
  * embedding that needs custom iframe permissions; add those explicitly here.
  *
- * Sigvelo changes: composes IconButton, Input, ScrollArea, and Badge; keeps a
+ * Sigvelo changes: composes IconButton, Input, and ScrollArea; keeps a
  * conservative sandbox; and maps navigation and console UI to Sigvelo CSS
  * tokens.
  *

package/dist/components/general-purpose/WebPreview.js

@@ -1,8 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { H as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-CVFSeTJn.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import { Input } from "../foundations/Input.js";
 import * as React from "react";
@@ -23,7 +22,7 @@ function useWebPreviewContext() {
 * known URL with local navigation controls. Do not use it for trusted app
 * embedding that needs custom iframe permissions; add those explicitly here.
 *
-* Sigvelo changes: composes IconButton, Input, ScrollArea, and Badge; keeps a
+* Sigvelo changes: composes IconButton, Input, and ScrollArea; keeps a
 * conservative sandbox; and maps navigation and console UI to Sigvelo CSS
 * tokens.
 *
@@ -238,12 +237,6 @@ function WebPreviewBody({ className, loading, src, ref, interactive = true, ...p
 		...props
 	}, iframeSrc), loading] });
 }
-const LEVEL_COLOR = {
-	log: "neutral",
-	info: "primary",
-	warn: "warning",
-	error: "destructive"
-};
 function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 	const { consoleOpen, setConsoleOpen } = useWebPreviewContext();
 	return /* @__PURE__ */ jsxs(Collapsible.Root, {
@@ -272,9 +265,8 @@ function WebPreviewConsole({ className, logs = [], children, ref, ...props }) {
 						}) : logs.map((log, index) => /* @__PURE__ */ jsxs("li", {
 							className: cx("web-preview__console-item", `web-preview__console-item--${log.level}`),
 							children: [
-								/* @__PURE__ */ jsx(Badge, {
-									color: LEVEL_COLOR[log.level],
-									size: "sm",
+								/* @__PURE__ */ jsx("span", {
+									className: "web-preview__console-level",
 									children: log.level
 								}),
 								/* @__PURE__ */ jsx("span", {

package/dist/components/nanites/AgentConnection.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { k as LinkIcon } from "../../icons-B4mGvCvc.js";
+import { D as LinkIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-DO4Hdu1R.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-BjELA-_s.js";
 import { Popover } from "../foundations/Popover.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";

package/dist/components/nanites/AgentToolDetail.d.ts

@@ -22,7 +22,7 @@ interface AgentToolDetailProps<State = unknown, MessageT extends UIMessage = UIM
   backLink?: React.ReactElement;
   /**
    * Route-owned run controls (the app's cancel callable, for example),
-   * rendered in a `SubagentRunActions` bar pinned to the bottom edge.
+   * rendered in the top bar's trailing slot after the status mark.
    */
   actions?: React.ReactNode;
 }

package/dist/components/nanites/AgentToolDetail.js

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { r as ArrowLeftIcon } from "../../icons-CVFSeTJn.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
-import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
 import { NaniteMark } from "./NaniteScene.js";
+import { t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";
@@ -31,6 +31,7 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Root, {
+				titleAlign: "start",
 				"aria-label": `${name} controls`,
 				children: [
 					/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [backLink ? /* @__PURE__ */ jsx(AppTopBar.Link, {
@@ -43,7 +44,7 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
 						className: "agent-tool-detail__title",
 						children: name
 					}) }),
-					/* @__PURE__ */ jsx(AppTopBar.Trailing, { children: /* @__PURE__ */ jsx(SubagentRunIndicator, { run }) })
+					/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [/* @__PURE__ */ jsx(SubagentRunIndicator, { run }), actions] })
 				]
 			}),
 			progressLabel || run.milestones?.length || run.error || run.summary ? /* @__PURE__ */ jsxs("div", {
@@ -80,8 +81,7 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
 					showComposer: false,
 					loading: true
 				})
-			}),
-			actions ? /* @__PURE__ */ jsx(SubagentRunActions, { children: actions }) : null
+			})
 		]
 	});
 }

package/dist/components/nanites/NaniteScene.js

@@ -16,8 +16,8 @@ const SCREEN_BORDER = "#3a5068";
 const SCREEN_LINE = "#2e3d50";
 const SCREEN_ICON_WARN = "#c87832";
 const GLASS_STROKE = "#8ba7b8";
-const BADGE_SUCCESS = "#0f7b6c";
-const BADGE_FAIL = "#dc2626";
+const STATUS_MARK_SUCCESS = "#0f7b6c";
+const STATUS_MARK_FAIL = "#dc2626";
 const TRIO_XS = [
 	40,
 	100,
@@ -108,8 +108,8 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 	}
 	const showBrowser = variant !== "idle" && variant !== "helmet";
 	const showGlass = variant === "working";
-	const showSuccessBadge = variant === "celebrating";
-	const showFailBadge = variant === "concerned";
+	const showSuccessMark = variant === "celebrating";
+	const showFailMark = variant === "concerned";
 	const soloViewBox = showBrowser ? "0 0 120 56" : "0 0 52 56";
 	const soloWidth = showBrowser ? 120 : 52;
 	const naniteX = 24;
@@ -265,15 +265,15 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 						})]
 					})
 				}) : null,
-				showSuccessBadge ? /* @__PURE__ */ jsx("g", {
+				showSuccessMark ? /* @__PURE__ */ jsx("g", {
 					transform: `translate(96, ${screenCy - 10})`,
 					children: /* @__PURE__ */ jsxs("g", {
-						className: "nanite-scene__badge",
+						className: "nanite-scene__status-mark",
 						children: [/* @__PURE__ */ jsx("circle", {
 							cx: "0",
 							cy: "0",
 							r: "7",
-							fill: BADGE_SUCCESS,
+							fill: STATUS_MARK_SUCCESS,
 							stroke: "#ffffff",
 							strokeWidth: "1.5"
 						}), /* @__PURE__ */ jsx("path", {
@@ -286,16 +286,16 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 						})]
 					})
 				}) : null,
-				showFailBadge ? /* @__PURE__ */ jsx("g", {
+				showFailMark ? /* @__PURE__ */ jsx("g", {
 					transform: `translate(96, ${screenCy - 10})`,
 					children: /* @__PURE__ */ jsxs("g", {
-						className: "nanite-scene__badge",
+						className: "nanite-scene__status-mark",
 						children: [
 							/* @__PURE__ */ jsx("circle", {
 								cx: "0",
 								cy: "0",
 								r: "7",
-								fill: BADGE_FAIL,
+								fill: STATUS_MARK_FAIL,
 								stroke: "#ffffff",
 								strokeWidth: "1.5"
 							}),
@@ -320,7 +320,7 @@ function NaniteScene({ variant, mode = "trio", className, title }) {
 						]
 					})
 				}) : null,
-				showSuccessBadge ? /* @__PURE__ */ jsxs("g", {
+				showSuccessMark ? /* @__PURE__ */ jsxs("g", {
 					className: "nanite-scene__sparkles",
 					children: [
 						/* @__PURE__ */ jsx("circle", {

package/dist/{copy-button-4YvddK4e.js → copy-button-lys9N_aI.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, g as CopyIcon } from "./icons-B4mGvCvc.js";
+import { d as CheckIcon, h as CopyIcon } from "./icons-CVFSeTJn.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/{icons-BGZ916hb.d.ts → icons-0corjfxR.d.ts}

@@ -22,11 +22,6 @@ declare const ChevronDownIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
-declare const ChevronLeftIcon: ({
-  size,
-  strokeWidth,
-  ...props
-}: IconProps) => import("react").JSX.Element;
 declare const CheckIcon: ({
   size,
   strokeWidth,
@@ -203,6 +198,11 @@ declare const LinkIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
+declare const KeyboardIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
 declare const QueueIcon: ({
   size,
   strokeWidth,
@@ -233,11 +233,6 @@ declare const CalendarIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
-declare const HashIcon: ({
-  size,
-  strokeWidth,
-  ...props
-}: IconProps) => import("react").JSX.Element;
 declare const WrenchIcon: ({
   size,
   strokeWidth,
@@ -248,11 +243,6 @@ declare const InfoIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
-declare const ImageIcon: ({
-  size,
-  strokeWidth,
-  ...props
-}: IconProps) => import("react").JSX.Element;
 declare const MonitorIcon: ({
   size,
   strokeWidth,
@@ -296,4 +286,4 @@ declare const MaximizeIcon: ({
   ...props
 }: IconProps) => import("react").JSX.Element;
 //#endregion
-export { SunIcon as $, InfoIcon as A, PaperclipIcon as B, EyeOffIcon as C, HashIcon as D, FolderOpenIcon as E, MicrophoneIcon as F, QueueIcon as G, PencilIcon as H, MinusIcon as I, SidebarIcon as J, RefreshIcon as K, MonitorIcon as L, MaximizeIcon as M, McpIcon as N, IconProps as O, MessageSquareIcon as P, StopIcon as Q, MoonIcon as R, EyeIcon as S, FolderIcon as T, PlayIcon as U, PauseIcon as V, PlusIcon as W, SpinnerIcon as X, SlackIcon as Y, SquareIcon as Z, CopyIcon as _, ArrowUpIcon as a, XIcon as at, DownloadIcon as b, BoxIcon as c, CalendarIcon as d, TargetIcon as et, CheckIcon as f, CodeIcon as g, ChevronRightIcon as h, ArrowRightIcon as i, WrenchIcon as it, LinkIcon as j, ImageIcon as k, BrainIcon as l, ChevronLeftIcon as m, ArrowDownIcon as n, TrashIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SearchIcon as q, ArrowLeftIcon as r, WarningIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TerminalIcon as tt, BrandIconProps as u, DiscordIcon as v, FileIcon as w, EllipsisIcon as x, DotIcon as y, MoveToFrontIcon as z };
+export { TerminalIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, InfoIcon as D, IconProps as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SpinnerIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, KeyboardIcon as O, MinusIcon as P, TargetIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, StopIcon as X, SquareIcon as Y, SunIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CalendarIcon as d, TrashIcon as et, CheckIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WrenchIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SlackIcon as q, ArrowLeftIcon as r, XIcon as rt, BookmarkIcon as s, ArchiveIcon as t, WarningIcon as tt, BrandIconProps as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };

package/dist/{icons-B4mGvCvc.js → icons-CVFSeTJn.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
-import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, 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, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
+import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Info, Keyboard, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
 import { FaSlack } from "react-icons/fa6";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
 //#region src/components/_internal/icons.tsx
@@ -27,7 +27,6 @@ function brandIcon(Component) {
 }
 const ChevronRightIcon = icon(ChevronRight);
 const ChevronDownIcon = icon(ChevronDown);
-const ChevronLeftIcon = icon(ChevronLeft);
 const CheckIcon = icon(Check);
 const CodeIcon = icon(CodeXml);
 const XIcon = icon(X);
@@ -72,16 +71,15 @@ const SearchIcon = icon(Search);
 const SidebarIcon = icon(PanelLeft);
 const TerminalIcon = icon(Terminal);
 const LinkIcon = icon(Link2);
+const KeyboardIcon = icon(Keyboard);
 const QueueIcon = icon(ListRestart);
 const TrashIcon = icon(Trash2);
 const WarningIcon = icon(TriangleAlert);
 const BoxIcon = icon(Box);
 const BrainIcon = icon(Brain);
 const CalendarIcon = icon(CalendarDays);
-const HashIcon = icon(Hash);
 const WrenchIcon = icon(Wrench);
 const InfoIcon = icon(Info);
-const ImageIcon = icon(Image);
 const MonitorIcon = icon(Monitor);
 const MessageSquareIcon = icon(MessageSquare);
 const McpIcon = brandIcon(SiModelcontextprotocol);
@@ -92,4 +90,4 @@ const SunIcon = icon(Sun);
 const TargetIcon = icon(Target);
 const MaximizeIcon = icon(Maximize2);
 //#endregion
-export { TerminalIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SpinnerIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, InfoIcon as O, MinusIcon as P, TargetIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, StopIcon as X, SquareIcon as Y, SunIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, TrashIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WrenchIcon as nt, ArrowUpRightIcon as o, ChevronLeftIcon as p, SlackIcon as q, ArrowLeftIcon as r, XIcon as rt, BookmarkIcon as s, ArchiveIcon as t, WarningIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };
+export { WarningIcon as $, MessageSquareIcon as A, PlusIcon as B, FolderIcon as C, LinkIcon as D, KeyboardIcon as E, MoveToFrontIcon as F, SlackIcon as G, RefreshIcon as H, PaperclipIcon as I, StopIcon as J, SpinnerIcon as K, PauseIcon as L, MinusIcon as M, MonitorIcon as N, MaximizeIcon as O, MoonIcon as P, TrashIcon as Q, PencilIcon as R, FileIcon as S, InfoIcon as T, SearchIcon as U, QueueIcon as V, SidebarIcon as W, TargetIcon as X, SunIcon as Y, TerminalIcon as Z, DotIcon as _, ArrowUpIcon as a, EyeIcon as b, BoxIcon as c, CheckIcon as d, WrenchIcon as et, ChevronDownIcon as f, DiscordIcon as g, CopyIcon as h, ArrowRightIcon as i, MicrophoneIcon as j, McpIcon as k, BrainIcon as l, CodeIcon as m, ArrowDownIcon as n, ArrowUpRightIcon as o, ChevronRightIcon as p, SquareIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, XIcon as tt, CalendarIcon as u, DownloadIcon as v, FolderOpenIcon as w, EyeOffIcon as x, EllipsisIcon as y, PlayIcon as z };

package/dist/styles/agent-attention.css

@@ -12,8 +12,8 @@
   box-shadow: var(--sigvelo-elevation-raised);
 }
 
-.agent-attention[data-tone="warning"] {
-  border-color: var(--sigvelo-color-warning-border);
+.agent-attention[data-tone="attention"] {
+  border-color: var(--sigvelo-color-danger-border);
 }
 
 .agent-attention__header,
@@ -45,9 +45,9 @@
   background: var(--sigvelo-color-neutral-bg-subtle);
 }
 
-.agent-attention[data-tone="warning"] .agent-attention__icon {
-  color: var(--sigvelo-color-warning-text);
-  background: var(--sigvelo-color-warning-bg-subtle);
+.agent-attention[data-tone="attention"] .agent-attention__icon {
+  color: var(--sigvelo-color-danger-text);
+  background: var(--sigvelo-color-danger-bg-subtle);
 }
 
 .agent-attention__icon > :is(svg, img) {

package/dist/styles/agent-chat.css

@@ -1,14 +1,20 @@
 .agent-chat {
-  --agent-chat-content-max-inline-size: 64rem;
-  --agent-chat-composer-scrim-fade: 2.5rem;
-
+  /* Hooks, not constants: hosts set --agent-chat-content-max-inline-size or
+     --agent-chat-composer-scrim-fade on any ancestor. Declaring them here
+     would beat every inherited value, so the defaults live in the fallbacks
+     at each use site. */
   container: agent-chat / inline-size;
   position: relative;
   inline-size: 100%;
   block-size: 100%;
   min-inline-size: 0;
   min-block-size: 0;
-  background-color: var(--sigvelo-color-surface);
+  /* The colour the lane rests on. Hosts that seat the conversation on the
+     underlay rather than a plane of its own inherit --agent-chat-surface down
+     to here, so the composer's scrim dissolves into what is actually behind
+     it. Declared as a fallback rather than on .agent-chat itself: a local
+     custom property would beat the ancestor's value. */
+  background-color: var(--agent-chat-surface, var(--sigvelo-color-surface));
   color: var(--sigvelo-color-text);
   font-family: inherit;
 }
@@ -34,12 +40,15 @@
      block padding), so the inline gutters land OUTSIDE this size — subtract
      them from the full-width term or the padding box overflows the viewport
      and end-aligned user rows hang past the right edge. */
-  inline-size: min(100% - 2 * var(--sigvelo-spacing-4), var(--agent-chat-content-max-inline-size));
+  inline-size: min(
+    100% - 2 * var(--sigvelo-spacing-4),
+    var(--agent-chat-content-max-inline-size, 64rem)
+  );
   margin-inline: auto;
   /* Clearance = composer + its scrim band, so a transcript resting at the
      bottom never sits inside the fade. */
   padding-block: var(--message-scroller-virtual-block-start)
-    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade));
+    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade, 2.5rem));
   padding-inline: var(--sigvelo-spacing-4);
 }
 
@@ -89,7 +98,7 @@
 
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size, 64rem));
   min-block-size: 100%;
   margin-inline: auto;
   padding-block: max(var(--agent-chat-start-screen-padding-block), env(safe-area-inset-top, 0px))
@@ -360,24 +369,25 @@
   position: absolute;
   z-index: -1;
   inset: 0;
-  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade));
+  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade, 2.5rem));
   content: "";
   pointer-events: none;
   background: linear-gradient(
     to bottom,
     transparent,
-    var(--sigvelo-color-surface) var(--agent-chat-composer-scrim-fade)
+    var(--agent-chat-surface, var(--sigvelo-color-surface))
+      var(--agent-chat-composer-scrim-fade, 2.5rem)
   );
 }
 
 .agent-chat__composer > .prompt-input {
   z-index: 1;
-  inline-size: min(100%, var(--agent-chat-content-max-inline-size));
+  inline-size: min(100%, var(--agent-chat-content-max-inline-size, 64rem));
   margin-inline: auto;
   padding-block: var(--sigvelo-spacing-3);
 }
 
-/* Transient status pill between transcript and composer (recovery, errors). */
+/* Transient status between transcript and composer (recovery, errors). */
 .agent-chat__notice {
   display: flex;
   align-items: center;
@@ -397,7 +407,7 @@
   flex-direction: column;
   align-items: stretch;
   inline-size: calc(
-    min(100%, var(--agent-chat-content-max-inline-size)) - var(--sigvelo-spacing-10)
+    min(100%, var(--agent-chat-content-max-inline-size, 64rem)) - var(--sigvelo-spacing-10)
   );
   margin-inline: auto;
 }
@@ -528,6 +538,31 @@
    spare pixels under it. Only the height query below drops the centring, and
    only where there is genuinely no room for it. */
 @container agent-chat (width <= 36rem) {
+  .agent-chat__transcript-content {
+    /* A notch pushes the first row down only as far as it must: the desktop
+       inset already clears shallow insets, so only deeper ones add height. */
+    --message-scroller-virtual-block-start: max(
+      var(--sigvelo-spacing-8),
+      calc(var(--sigvelo-spacing-5) + env(safe-area-inset-top, 0px))
+    );
+
+    inline-size: min(
+      100% - 2 * var(--sigvelo-spacing-3),
+      var(--agent-chat-content-max-inline-size, 64rem)
+    );
+    padding-inline: var(--sigvelo-spacing-3);
+  }
+
+  .agent-chat .message[data-from="assistant"] .message__content {
+    inline-size: 100%;
+  }
+
+  .agent-chat__composer {
+    padding-block-end: max(var(--sigvelo-spacing-4), env(safe-area-inset-bottom, 0px));
+    padding-inline: max(var(--sigvelo-spacing-3), env(safe-area-inset-left, 0px))
+      max(var(--sigvelo-spacing-3), env(safe-area-inset-right, 0px));
+  }
+
   .agent-chat-start-screen__content {
     --agent-chat-start-screen-padding-block: var(--sigvelo-spacing-5);
   }

package/dist/styles/agent-tool-detail.css

@@ -1,6 +1,6 @@
 .agent-tool-detail {
   display: grid;
-  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto minmax(0, 1fr);
   min-inline-size: 0;
   block-size: 100%;
   background-color: var(--sigvelo-color-surface);
@@ -47,18 +47,8 @@
   block-size: 100%;
 }
 
-.agent-tool-detail > .subagent-run__actions {
-  grid-row: 4;
-  display: flex;
-  justify-content: center;
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-3);
-  border-block-start: var(--sigvelo-border-width) var(--sigvelo-border-style)
-    var(--sigvelo-color-neutral-border-subtle);
-}
-
 @media (forced-colors: active) {
-  .agent-tool-detail__run-state,
-  .agent-tool-detail > .subagent-run__actions {
+  .agent-tool-detail__run-state {
     border-color: CanvasText;
   }
 }

package/dist/styles/app-icon.css

@@ -1,3 +1,6 @@
+/* A mark sits flat on whatever canvas hosts it — the tile never paints its
+   own background. Elevation is a drop shadow that follows the mark's own
+   silhouette, so a transparent favicon casts its shape, not an invisible box. */
 .avatar.app-icon {
   --sigvelo-recipe-app-icon-size: var(--sigvelo-spacing-8);
   --sigvelo-recipe-app-icon-radius: 30%;
@@ -11,10 +14,11 @@
   flex: none;
   overflow: hidden;
   border-radius: var(--sigvelo-recipe-app-icon-radius);
-  background: var(--sigvelo-color-surface-raised);
-  box-shadow: 0 var(--sigvelo-spacing-1) var(--sigvelo-spacing-4)
-    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 5%);
-  corner-shape: round;
+  background: transparent;
+  filter: drop-shadow(
+    0 var(--sigvelo-border-width) var(--sigvelo-spacing-0-5)
+      color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 25%)
+  );
   user-select: none;
 }
 
@@ -40,24 +44,15 @@
   padding: var(--sigvelo-spacing-2);
 }
 
-.app-icon[data-app-icon-variant="surface"] {
-  background: var(--sigvelo-color-surface-raised);
-}
+/* The surface variant keeps only the inset; the mark stays flat on the canvas. */
 
 .app-icon[data-app-icon-variant="contrast"] {
   background: var(--sigvelo-color-primary-bg);
   color: var(--sigvelo-color-primary-text-on-bg);
 }
 
-.app-icon::after {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 var(--sigvelo-border-width-hairline)
-    color-mix(in oklab, transparent, var(--sigvelo-color-shadow) 10%);
-  content: "";
-  pointer-events: none;
-}
+/* Full-bleed artwork brings its own edges; a hairline ring around a flat
+   transparent mark would outline an invisible box, so no variant draws one. */
 
 .app-icon__image,
 .app-icon__fallback,
@@ -80,7 +75,7 @@
   align-items: center;
   justify-content: center;
   border-radius: inherit;
-  background: var(--sigvelo-color-surface-raised);
+  background: transparent;
   color: var(--sigvelo-color-text-muted);
   font-size: var(--sigvelo-text-xs);
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -94,7 +89,6 @@
 .app-icon-stack {
   display: inline-flex;
   align-items: center;
-  block-size: 0;
   isolation: isolate;
 }