@mcp-b/react-components 0.40.0 → 0.41.0

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

@@ -1,2 +1,95 @@
-import { i as ResponsiveSidebarShellTopBarControls, n as ResponsiveSidebarShellControls, r as ResponsiveSidebarShellProps, t as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-DWjULskY.js";
-export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps, ResponsiveSidebarShellTopBarControls };
+import { t as AppTopBar } from "../../AppTopBar-ZdgmB_Lu.js";
+import * as React from "react";
+
+//#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
+interface ResponsiveSidebarShellControls {
+  /** Close the sidebar and move focus to the main content. */
+  closeSidebar: () => void;
+  /** Close only when the shell is currently using its compact drawer layout. */
+  closeSidebarOnCompact: () => void;
+}
+interface ResponsiveSidebarShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+  /**
+   * Navigation or other secondary surface shown beside the selected content.
+   * Omit for a shell that is only a bar row over content — the app bar then
+   * has one mount point whether or not a sidebar exists.
+   */
+  sidebar?: React.ReactNode | ((controls: ResponsiveSidebarShellControls) => React.ReactNode);
+  /** Main content. */
+  children?: React.ReactNode;
+  /** Short noun used by the toggle and resize control, such as “threads” or “schedules”. */
+  sidebarLabel?: string;
+  /** Whether the sidebar is open. Omit for internal state. */
+  sidebarOpen?: boolean;
+  /** Initial sidebar state when `sidebarOpen` is uncontrolled. */
+  defaultSidebarOpen?: boolean;
+  /** Initial desktop sidebar width in CSS pixels. */
+  defaultSidebarWidth?: number;
+  /** Called when the sidebar is opened or closed. */
+  onSidebarOpenChange?: (open: boolean) => void;
+  /**
+   * No bar row at all — for content that brings its own application bar.
+   * Distinct from passing no slots: an empty shell with a sidebar still shows
+   * a bar carrying the toggle.
+   */
+  topBarHidden?: boolean;
+  /** Props for the shell-owned bar root: `aria-label`, `className`, data hooks. */
+  topBarProps?: React.ComponentProps<typeof AppTopBar.Root> & {
+    [dataAttribute: `data-${string}`]: string | undefined;
+  };
+  /**
+   * App-owned leading navigation. When present it owns the single leading
+   * slot instead of sitting beside a second shell toggle; wide sidebars use
+   * their responsive default and compact sidebars remain available through
+   * `compactTitleTrigger`.
+   */
+  topBarLeading?: React.ReactNode;
+  /** Compact-only navigation that replaces the drawer trigger without hiding the wide rail toggle. */
+  compactTopBarLeading?: React.ReactNode;
+  /** Bar title content. Hidden at compact widths when `compactTitleTrigger` stands in. */
+  topBarTitle?: React.ReactNode;
+  /** Element the bar title renders into, e.g. `<h1 id={…}/>` for a labelled page. */
+  topBarTitleRender?: React.ReactElement<Record<string, unknown>>;
+  /** Content placed in the bar's trailing group. */
+  topBarTrailing?: React.ReactNode;
+  /**
+   * Label content for a compact-width drawer trigger that replaces the plain
+   * title and the icon toggle: the title itself becomes the control that opens
+   * the sidebar. The shell renders the button and the disclosure chevron.
+   */
+  compactTitleTrigger?: React.ReactNode;
+  /** Accessible name for the mobile peek target that returns to the main content. */
+  showMainLabel?: string;
+}
+/**
+ * The one application shell: responsive master-detail with a resizable desktop
+ * sidebar, a compact floating drawer that leaves the main content in place as
+ * a dismiss target, and a shell-owned application bar composed from slots.
+ * The root exposes `data-sidebar-open="true" | "false"` as its public styling hook.
+ */
+declare function ResponsiveSidebarShell({
+  sidebar,
+  sidebarLabel,
+  sidebarOpen,
+  defaultSidebarOpen,
+  defaultSidebarWidth,
+  onSidebarOpenChange,
+  topBarHidden,
+  topBarProps,
+  topBarLeading,
+  compactTopBarLeading,
+  topBarTitle,
+  topBarTitleRender,
+  topBarTrailing,
+  compactTitleTrigger,
+  showMainLabel,
+  className,
+  children,
+  ref,
+  style,
+  ...props
+}: ResponsiveSidebarShellProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps };

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { q as SidebarIcon } from "../../icons-MmIXciMO.js";
+import { W as SidebarIcon, f as ChevronDownIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { t as capitalize } from "../../format-DB2mX9DA.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
@@ -15,30 +15,67 @@ const sidebarKeyboardStep = 24;
 const compactSidebarWidthRem = 56;
 function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
 	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
-	return [sidebarOpen ?? innerOpen, React.useCallback((next) => {
-		if (sidebarOpen === void 0) setInnerOpen(next);
-		onSidebarOpenChange?.(next);
-	}, [sidebarOpen, onSidebarOpenChange])];
+	return [
+		sidebarOpen ?? innerOpen,
+		React.useCallback((next) => {
+			if (sidebarOpen === void 0) setInnerOpen(next);
+			onSidebarOpenChange?.(next);
+		}, [sidebarOpen, onSidebarOpenChange]),
+		setInnerOpen
+	];
 }
 function isCompactSidebar(root) {
 	const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
-	return root.getBoundingClientRect().width <= compactSidebarWidthRem * rootFontSize;
+	return root.offsetWidth <= compactSidebarWidthRem * rootFontSize;
 }
 /**
-* Responsive master-detail shell with a resizable desktop sidebar and a compact
-* floating sidebar that leaves the main content in place as a dismiss target.
+* The one application shell: responsive master-detail with a resizable desktop
+* sidebar, a compact floating drawer that leaves the main content in place as
+* a dismiss target, and a shell-owned application bar composed from slots.
 * The root exposes `data-sidebar-open="true" | "false"` as its public styling hook.
 */
-function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, toolbarLabel = "Sidebar controls", showMainLabel = "Show main content", className, children, ref, style, ...props }) {
+function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen, defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, topBarHidden = false, topBarProps, topBarLeading, compactTopBarLeading, topBarTitle, topBarTitleRender, topBarTrailing, compactTitleTrigger, showMainLabel = "Show main content", className, children, ref, style, ...props }) {
 	const sidebarId = React.useId();
 	const rootRef = React.useRef(null);
 	const mainRef = React.useRef(null);
 	const openerRef = React.useRef(null);
-	const [isSidebarOpen, setSidebarOpen] = useControllableSidebar({
+	const compactRef = React.useRef(null);
+	const restoreSidebarOnWideRef = React.useRef(true);
+	const [isSidebarOpen, setSidebarOpen, primeSidebarOpen] = useControllableSidebar({
 		sidebarOpen,
 		defaultSidebarOpen,
 		onSidebarOpenChange
 	});
+	const wantsBuiltInDefault = sidebarOpen === void 0 && defaultSidebarOpen === void 0;
+	React.useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const syncLayout = () => {
+			if (root.offsetWidth <= 0) return;
+			const compact = isCompactSidebar(root);
+			const wasCompact = compactRef.current;
+			compactRef.current = compact;
+			if (wasCompact === null) {
+				if (wantsBuiltInDefault && compact) primeSidebarOpen(false);
+				return;
+			}
+			if (!wasCompact && compact) {
+				restoreSidebarOnWideRef.current = isSidebarOpen;
+				if (isSidebarOpen) setSidebarOpen(false);
+			} else if (wasCompact && !compact && restoreSidebarOnWideRef.current) setSidebarOpen(true);
+		};
+		syncLayout();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(syncLayout);
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, [
+		isSidebarOpen,
+		primeSidebarOpen,
+		setSidebarOpen,
+		wantsBuiltInDefault
+	]);
+	const hasSidebar = sidebar != null;
 	const toggleLabel = capitalize(sidebarLabel);
 	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
 	const updateSidebar = React.useCallback((update, restoreFocus) => {
@@ -66,8 +103,9 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 		closeSidebar,
 		closeSidebarOnCompact
 	}) : sidebar;
-	const sidebarToggle = /* @__PURE__ */ jsx(AppTopBar.Button, {
-		className: "responsive-sidebar-shell__toggle",
+	const hasTitleTrigger = hasSidebar && compactTitleTrigger != null && compactTopBarLeading == null;
+	const renderSidebarToggle = (className) => hasSidebar ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+		className: cx("responsive-sidebar-shell__toggle", className),
 		label: toggleLabel,
 		tooltip: toggleTooltip,
 		type: "button",
@@ -75,30 +113,22 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 		"aria-expanded": isSidebarOpen,
 		onClick: (event) => toggleSidebar(event.currentTarget),
 		children: /* @__PURE__ */ jsx(SidebarIcon, {})
-	});
-	const topBarContent = typeof topBar === "function" ? topBar({
-		sidebarId,
-		sidebarOpen: isSidebarOpen,
-		sidebarToggle,
-		toggleSidebar
-	}) : topBar;
-	return /* @__PURE__ */ jsxs("div", {
+	}) : null;
+	const hasTopBar = !topBarHidden && (hasSidebar || topBarLeading != null || compactTopBarLeading != null || topBarTitle != null || topBarTrailing != null || topBarProps != null);
+	return /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(rootRef, ref),
 		className: cx("responsive-sidebar-shell", className),
 		style,
 		...props,
-		"data-sidebar-open": isSidebarOpen ? "true" : "false",
+		"data-sidebar-open": hasSidebar && isSidebarOpen ? "true" : "false",
 		onKeyDown: (event) => {
 			props.onKeyDown?.(event);
-			if (!event.defaultPrevented && event.key === "Escape" && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
+			if (!event.defaultPrevented && event.key === "Escape" && hasSidebar && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
 				event.preventDefault();
 				dismissSidebar();
 			}
 		},
-		children: [topBarContent ?? /* @__PURE__ */ jsx(AppTopBar.Root, {
-			"aria-label": toolbarLabel,
-			children: /* @__PURE__ */ jsx(AppTopBar.Leading, { children: sidebarToggle })
-		}), /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
+		children: /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
 			className: "responsive-sidebar-shell__frame",
 			label: sidebarLabel,
 			side: "start",
@@ -107,22 +137,48 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 			maxSize: sidebarMaxWidth,
 			keyboardStep: sidebarKeyboardStep,
 			children: [
-				isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
-				/* @__PURE__ */ jsx("div", {
+				hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
+				hasSidebar ? /* @__PURE__ */ jsx("div", {
 					id: sidebarId,
 					className: "responsive-sidebar-shell__sidebar",
 					"aria-hidden": isSidebarOpen ? void 0 : true,
 					inert: isSidebarOpen ? void 0 : true,
 					children: sidebarContent
-				}),
-				/* @__PURE__ */ jsx("div", {
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
 					ref: mainRef,
 					className: "responsive-sidebar-shell__main",
-					"data-recipe": "application-plane",
 					tabIndex: -1,
-					children
+					children: [hasTopBar ? /* @__PURE__ */ jsxs(AppTopBar.Root, {
+						"aria-label": "Application controls",
+						...topBarProps,
+						children: [
+							hasSidebar || topBarLeading != null || compactTopBarLeading != null ? /* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [topBarLeading ?? renderSidebarToggle(hasTitleTrigger ? "responsive-sidebar-shell__toggle--replaced-by-title" : compactTopBarLeading != null ? "responsive-sidebar-shell__toggle--replaced-by-compact-leading" : void 0), topBarLeading == null && compactTopBarLeading != null ? /* @__PURE__ */ jsx("span", {
+								className: "responsive-sidebar-shell__compact-leading",
+								children: compactTopBarLeading
+							}) : null] }) : null,
+							topBarTitle != null || hasTitleTrigger ? /* @__PURE__ */ jsxs(AppTopBar.Title, {
+								render: topBarTitleRender,
+								children: [topBarTitle != null ? /* @__PURE__ */ jsx("span", {
+									className: cx("responsive-sidebar-shell__title-text", hasTitleTrigger && "responsive-sidebar-shell__title-text--replaced-by-trigger"),
+									children: topBarTitle
+								}) : null, hasTitleTrigger ? /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: "ghost",
+									color: "neutral",
+									size: "sm",
+									className: "responsive-sidebar-shell__title-trigger",
+									"aria-controls": sidebarId,
+									"aria-expanded": isSidebarOpen,
+									onClick: (event) => toggleSidebar(event.currentTarget),
+									children: [compactTitleTrigger, /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+								}) : null]
+							}) : null,
+							topBarTrailing != null ? /* @__PURE__ */ jsx(AppTopBar.Trailing, { children: topBarTrailing }) : null
+						]
+					}) : null, children]
 				}),
-				isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
+				hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
 					type: "button",
 					variant: "ghost",
 					color: "neutral",
@@ -131,7 +187,7 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 					onClick: closeSidebar
 				}) : null
 			]
-		})]
+		})
 	});
 }
 //#endregion

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

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { U as PlusIcon, d as CheckIcon, f as ChevronDownIcon, nt as WarningIcon } from "../../icons-MmIXciMO.js";
+import { $ as WarningIcon, B as PlusIcon, d as CheckIcon, f as ChevronDownIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import * as React from "react";

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

@@ -63,7 +63,7 @@ declare function TerminalTitle({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 type TerminalStatusValue = "idle" | "running" | "success" | "error";
-interface TerminalStatusProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+interface TerminalStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
   status: TerminalStatusValue;
 }
 declare function TerminalStatus({

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

@@ -1,8 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { et as TerminalIcon, it as XIcon } from "../../icons-MmIXciMO.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-Bc7jsYv_.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 { 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

@@ -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 { 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.
 *
@@ -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,11 +1,11 @@
 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 { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { SubagentRunActions, SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
-import { t as ThinkChat } from "../../ThinkChat-DkA4Wr71.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-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";