@mcp-b/react-components 0.40.0 → 0.42.0

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 { Y as SpinnerIcon, d as CheckIcon, it as XIcon, m as ChevronRightIcon } from "../../icons-MmIXciMO.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 { I as MonitorIcon, L as MoonIcon, Q as SunIcon } from "../../icons-MmIXciMO.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

@@ -25,6 +25,8 @@ interface WebPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
   className?: string;
   /** Navigation, body, and optional console slots. */
   children?: React.ReactNode;
+  /** Extra recipes composed with the framed-panel contract. */
+  "data-recipe"?: string;
 }
 /**
  * An iframe preview with a navigation bar, URL input, and optional console
@@ -35,7 +37,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.
  *
@@ -64,6 +66,7 @@ declare function WebPreview({
   onUrlChange,
   children,
   ref,
+  "data-recipe": recipe,
   ...props
 }: WebPreviewProps & {
   ref?: React.Ref<HTMLDivElement>;

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 { G as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-MmIXciMO.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.
 *
@@ -45,7 +44,7 @@ function useWebPreviewContext() {
 * </WebPreview>
 * ```
 */
-function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChange, children, ref, ...props }) {
+function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChange, children, ref, "data-recipe": recipe, ...props }) {
 	const [navigation, setNavigation] = React.useState(() => ({
 		history: defaultUrl ? [defaultUrl] : [],
 		index: defaultUrl ? 0 : -1
@@ -127,7 +126,7 @@ function WebPreview({ className, defaultUrl = "", url: controlledUrl, onUrlChang
 			ref,
 			className: cx("web-preview", className),
 			...props,
-			"data-recipe": "framed-panel",
+			"data-recipe": cx("framed-panel", recipe),
 			children
 		})
 	});
@@ -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 { A as LinkIcon } from "../../icons-MmIXciMO.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-CWk1FVtm.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,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-MmIXciMO.js";
+import { r as ArrowLeftIcon } from "../../icons-CVFSeTJn.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
+import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -29,8 +29,10 @@ function AgentToolDetail({ actions, backLink, chat, className, messages, ref, ru
 		"data-slot": "agent-tool-detail",
 		className: cx("agent-tool-detail", className),
 		...props,
+		"data-recipe": "fill-host",
 		children: [
 			/* @__PURE__ */ jsxs(AppTopBar.Root, {
+				titleAlign: "start",
 				"aria-label": `${name} controls`,
 				children: [
 					/* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [backLink ? /* @__PURE__ */ jsx(AppTopBar.Link, {
@@ -43,7 +45,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 +82,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-Bc7jsYv_.js → copy-button-lys9N_aI.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, g as CopyIcon } from "./icons-MmIXciMO.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-DwgNir1Q.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,
@@ -238,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,
@@ -253,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,
@@ -301,4 +286,4 @@ declare const MaximizeIcon: ({
   ...props
 }: IconProps) => import("react").JSX.Element;
 //#endregion
-export { StopIcon as $, InfoIcon as A, MoveToFrontIcon as B, EyeOffIcon as C, HashIcon as D, FolderOpenIcon as E, MessageSquareIcon as F, PlusIcon as G, PauseIcon as H, MicrophoneIcon as I, SearchIcon as J, QueueIcon as K, MinusIcon as L, LinkIcon as M, MaximizeIcon as N, IconProps as O, McpIcon as P, SquareIcon as Q, MonitorIcon as R, EyeIcon as S, FolderIcon as T, PencilIcon as U, PaperclipIcon as V, PlayIcon as W, SlackIcon as X, SidebarIcon as Y, SpinnerIcon as Z, CopyIcon as _, ArrowUpIcon as a, WrenchIcon as at, DownloadIcon as b, BoxIcon as c, CalendarIcon as d, SunIcon as et, CheckIcon as f, CodeIcon as g, ChevronRightIcon as h, ArrowRightIcon as i, WarningIcon as it, KeyboardIcon as j, ImageIcon as k, BrainIcon as l, ChevronLeftIcon as m, ArrowDownIcon as n, TerminalIcon as nt, ArrowUpRightIcon as o, XIcon as ot, ChevronDownIcon as p, RefreshIcon as q, ArrowLeftIcon as r, TrashIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TargetIcon as tt, BrandIconProps as u, DiscordIcon as v, FileIcon as w, EllipsisIcon as x, DotIcon as y, MoonIcon 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-MmIXciMO.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, 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 { 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);
@@ -79,10 +78,8 @@ 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);
@@ -93,4 +90,4 @@ const SunIcon = icon(Sun);
 const TargetIcon = icon(Target);
 const MaximizeIcon = icon(Maximize2);
 //#endregion
-export { TargetIcon as $, LinkIcon as A, PauseIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MinusIcon as F, RefreshIcon as G, PlayIcon as H, MonitorIcon as I, SlackIcon as J, SearchIcon as K, MoonIcon as L, McpIcon as M, MessageSquareIcon as N, InfoIcon as O, MicrophoneIcon as P, SunIcon as Q, MoveToFrontIcon as R, EyeOffIcon as S, FolderOpenIcon as T, PlusIcon as U, PencilIcon as V, QueueIcon as W, SquareIcon as X, SpinnerIcon as Y, StopIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, TerminalIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, XIcon as it, MaximizeIcon as j, KeyboardIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, WarningIcon as nt, ArrowUpRightIcon as o, ChevronLeftIcon as p, SidebarIcon as q, ArrowLeftIcon as r, WrenchIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TrashIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PaperclipIcon 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/accordion.css

@@ -62,6 +62,7 @@
 }
 
 .accordion__panel > * {
+  /* Disclosure content, not --sigvelo-layout-stack. */
   padding-block-end: var(--sigvelo-spacing-4);
   padding-inline: var(--sigvelo-recipe-control-padding-inline);
 }

package/dist/styles/action-guide.css

@@ -3,13 +3,13 @@
   display: grid;
   gap: var(--sigvelo-spacing-8);
   inline-size: 100%;
-  padding: var(--sigvelo-spacing-2) var(--sigvelo-spacing-2) var(--sigvelo-spacing-8);
+  padding: var(--sigvelo-layout-cluster) var(--sigvelo-layout-gutter) var(--sigvelo-spacing-8);
   color: var(--sigvelo-color-text);
 }
 
 .action-guide__header {
   display: grid;
-  gap: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-stack);
 }
 
 .action-guide__title,
@@ -32,13 +32,13 @@
 
 .action-guide__section {
   display: grid;
-  gap: var(--sigvelo-spacing-4);
+  gap: var(--sigvelo-layout-stack);
 }
 
 .action-guide__list {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--sigvelo-spacing-3);
+  grid-template-columns: var(--sigvelo-layout-track-fill);
+  gap: var(--sigvelo-layout-gutter);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -115,9 +115,10 @@
   border-radius: var(--sigvelo-radius-lg);
 }
 
-@container action-guide (width > 30rem) {
+/* Local wrap. Not --sigvelo-layout-break-compact. */
+@container action-guide (inline-size > 30rem) {
   .action-guide__list[data-layout="cards"] {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(2, var(--sigvelo-layout-track-fill));
   }
 }
 

package/dist/styles/activity-header.css

@@ -1,58 +1,32 @@
 .activity__header {
   display: flex;
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  color: color-mix(in oklab, var(--sigvelo-color-text-muted), transparent 20%);
+  color: inherit;
   font-family: inherit;
-  font-size: var(--sigvelo-text-compact);
-  font-weight: var(--sigvelo-font-weight-semibold);
+  font-size: var(--sigvelo-text-prose);
+  font-weight: var(--sigvelo-font-weight-normal);
+  line-height: var(--sigvelo-text-prose-leading);
   text-align: start;
 }
 
-/*
- * The action holds its content width and the detail absorbs whatever is left,
- * so the two shrink in the right order: a long path loses its tail while
- * "Reading" stays legible. Basis 0 on the detail is what makes it the flexible
- * one; the trailing affordance stays adjacent until the width is exhausted.
- *
- * With no detail present the action is the only flexible item, so a settled
- * summary sentence still truncates rather than inflating its owner.
- */
+/* Action keeps its content width; the detail takes the leftover track. */
 .activity__header-action {
   flex: 0 1 auto;
-  min-width: 0;
-  max-width: max-content;
-  overflow: hidden;
-  color: var(--sigvelo-color-text);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-inline-size: 0;
+  color: inherit;
+  overflow-wrap: anywhere;
 }
 
-/*
- * The target of the action — a path, a command, a query. Muted, because in a
- * column of activity lines the verb is what the reader scans for.
- *
- * Faded rather than ellipsed: this is data, and a trailing "…" reads as part of
- * the value it is truncating.
- *
- * The fade is unconditional because it does not need a condition. Growing to
- * fill the free space means the box is wider than short text, so the gradient
- * lands on empty space and only bites once the text actually reaches the edge.
- */
+/* Path, command, or query. Muted so the verb stays the scan target. */
 .activity__header-detail {
   flex: 1 1 0;
-  min-width: 0;
-  overflow: hidden;
+  min-inline-size: 0;
   color: var(--sigvelo-color-text-muted);
   font-weight: var(--sigvelo-font-weight-normal);
-  white-space: nowrap;
-  mask-image: linear-gradient(
-    to right,
-    #000 calc(100% - var(--sigvelo-spacing-4)),
-    transparent 100%
-  );
+  overflow-wrap: anywhere;
 }
 
 .activity__item-icon {