@mcp-b/react-components 0.41.0 → 0.42.0

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

@@ -22,6 +22,13 @@ interface ResizableSidePanelRootProps extends React.HTMLAttributes<HTMLDivElemen
   collapseThreshold?: number;
   /** Called once pointer resizing crosses `collapseThreshold`. */
   onCollapse?: () => void;
+  /**
+   * Consumer-owned custom property mirroring the panel size, e.g.
+   * `--my-app-conversation-size`. Nested roots each write the shared
+   * `--resizable-side-panel-size` too, where the nearest writer wins; a named
+   * variable frees consumer stylesheets from that proximity rule.
+   */
+  sizeVariable?: `--${string}`;
 }
 interface ResizableSidePanelHandleProps extends Omit<SeparatorProps, "aria-label" | "aria-orientation" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "decorative" | "orientation"> {}
 /**
@@ -41,6 +48,7 @@ declare function ResizableSidePanelRoot({
   onCollapse,
   ref,
   side,
+  sizeVariable,
   style,
   ...props
 }: ResizableSidePanelRootProps & {

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

@@ -14,7 +14,7 @@ function panelSizeDelta(physicalDelta, side, direction) {
 * Shared sizing seam for a logical start- or end-side panel. Consumers retain
 * ownership of panel placement, visibility, compact behavior, and top bars.
 */
-function ResizableSidePanelRoot({ children, className, collapseThreshold, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, onCollapse, ref, side = "start", style, ...props }) {
+function ResizableSidePanelRoot({ children, className, collapseThreshold, defaultSize, keyboardStep = 24, label, maxSize, minSize, onSizeChange, onCollapse, ref, side = "start", sizeVariable, style, ...props }) {
 	const [size, setInnerSize] = React.useState(() => clamp(defaultSize, minSize, maxSize));
 	const cleanupResizeRef = React.useRef(null);
 	const setSize = React.useCallback((nextSize) => {
@@ -92,7 +92,8 @@ function ResizableSidePanelRoot({ children, className, collapseThreshold, defaul
 	]);
 	const rootStyle = {
 		...style,
-		"--resizable-side-panel-size": `${size}px`
+		"--resizable-side-panel-size": `${size}px`,
+		...sizeVariable ? { [sizeVariable]: `${size}px` } : {}
 	};
 	return /* @__PURE__ */ jsx(ResizableSidePanelContext.Provider, {
 		value: context,

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

@@ -1,4 +1,3 @@
-import { t as AppTopBar } from "../../AppTopBar-ZdgmB_Lu.js";
 import * as React from "react";
 
 //#region src/components/general-purpose/ResponsiveSidebarShell.d.ts
@@ -8,56 +7,74 @@ interface ResponsiveSidebarShellControls {
   /** Close only when the shell is currently using its compact drawer layout. */
   closeSidebarOnCompact: () => void;
 }
+/**
+ * Bar slot content shared by every shell-owning surface's `bar` prop, so an
+ * app writes one shape whether it is configuring ThinkFullApp, the routine
+ * library, or the shell directly.
+ */
+interface AppBarSlots {
+  /**
+   * App-owned route element rendered as a labelled back control. Back owns
+   * the leading slot the same way `leading` does: the shell's own sidebar
+   * toggle stands down and compact sidebars stay reachable through
+   * `compactTitleTrigger`.
+   */
+  back?: {
+    label: string;
+    link: React.ReactElement;
+  };
+  /** App-owned leading navigation that owns the leading slot at every width. */
+  leading?: React.ReactNode;
+  /** Compact-only navigation that replaces the drawer trigger without hiding the wide rail toggle. */
+  compactLeading?: React.ReactNode;
+  /** Bar title content. Hidden at compact widths when `compactTitleTrigger` stands in. */
+  title?: React.ReactNode;
+  /** Content placed in the bar's trailing group. */
+  actions?: React.ReactNode;
+}
+interface ResponsiveSidebarShellBar extends AppBarSlots {
+  /** Element the bar title renders into, e.g. `<h1 id={…}/>` for a labelled page. */
+  titleRender?: React.ReactElement<Record<string, unknown>>;
+  /**
+   * 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 bar toolbar. Defaults to "Application controls". */
+  label?: string;
+  /** Class for the bar root, the owning surface's styling hook. */
+  className?: string;
+  /**
+   * 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.
+   */
+  hidden?: boolean;
+}
 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.
+   *
+   * Open/closed is shell-internal: it is ephemeral presentation state, not a
+   * route, so no host controls it and no resize ever writes into a router.
    */
   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;
+  /** Shell-owned application bar composed from slots. */
+  bar?: ResponsiveSidebarShellBar;
   /**
-   * 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.
+   * Host-owned error shown in the main column above the content, without
+   * replacing it. The shell renders the alert anatomy; pass the message.
    */
-  compactTitleTrigger?: React.ReactNode;
+  error?: React.ReactNode;
   /** Accessible name for the mobile peek target that returns to the main content. */
   showMainLabel?: string;
 }
@@ -65,23 +82,16 @@ interface ResponsiveSidebarShellProps extends Omit<React.HTMLAttributes<HTMLDivE
  * 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.
+ * The root exposes `data-sidebar-open="true" | "false"` as its public styling
+ * hook, and its container name `responsive-sidebar-shell` is public contract:
+ * surfaces that compose the shell size themselves against it.
  */
 declare function ResponsiveSidebarShell({
   sidebar,
   sidebarLabel,
-  sidebarOpen,
-  defaultSidebarOpen,
   defaultSidebarWidth,
-  onSidebarOpenChange,
-  topBarHidden,
-  topBarProps,
-  topBarLeading,
-  compactTopBarLeading,
-  topBarTitle,
-  topBarTitleRender,
-  topBarTrailing,
-  compactTitleTrigger,
+  bar,
+  error,
   showMainLabel,
   className,
   children,
@@ -92,4 +102,4 @@ declare function ResponsiveSidebarShell({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps };
+export { AppBarSlots, ResponsiveSidebarShell, ResponsiveSidebarShellBar, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps };

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { W as SidebarIcon, f as ChevronDownIcon } from "../../icons-CVFSeTJn.js";
+import { $ as WarningIcon, W as SidebarIcon, f as ChevronDownIcon, r as ArrowLeftIcon } 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";
@@ -8,22 +8,13 @@ import { ResizableSidePanel } from "./ResizableSidePanel.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/ResponsiveSidebarShell.tsx
+/** Matches --sigvelo-layout-sidebar (16rem). */
 const sidebarDefaultWidth = 256;
 const sidebarMinWidth = 224;
 const sidebarMaxWidth = 384;
 const sidebarKeyboardStep = 24;
+/** Matches --sigvelo-layout-break-compact. */
 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]),
-		setInnerOpen
-	];
-}
 function isCompactSidebar(root) {
 	const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 	return root.offsetWidth <= compactSidebarWidthRem * rootFontSize;
@@ -32,21 +23,18 @@ function isCompactSidebar(root) {
 * 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.
+* The root exposes `data-sidebar-open="true" | "false"` as its public styling
+* hook, and its container name `responsive-sidebar-shell` is public contract:
+* surfaces that compose the shell size themselves against it.
 */
-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 }) {
+function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSidebarWidth = sidebarDefaultWidth, bar, error, 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 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;
+	const [isSidebarOpen, setSidebarOpen] = React.useState(true);
 	React.useLayoutEffect(() => {
 		const root = rootRef.current;
 		if (!root) return;
@@ -56,7 +44,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 			const wasCompact = compactRef.current;
 			compactRef.current = compact;
 			if (wasCompact === null) {
-				if (wantsBuiltInDefault && compact) primeSidebarOpen(false);
+				if (compact) setSidebarOpen(false);
 				return;
 			}
 			if (!wasCompact && compact) {
@@ -69,12 +57,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 		const observer = new ResizeObserver(syncLayout);
 		observer.observe(root);
 		return () => observer.disconnect();
-	}, [
-		isSidebarOpen,
-		primeSidebarOpen,
-		setSidebarOpen,
-		wantsBuiltInDefault
-	]);
+	}, [isSidebarOpen]);
 	const hasSidebar = sidebar != null;
 	const toggleLabel = capitalize(sidebarLabel);
 	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
@@ -84,40 +67,29 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 	}, []);
 	const closeSidebar = React.useCallback(() => {
 		updateSidebar(() => setSidebarOpen(false), () => mainRef.current?.focus({ preventScroll: true }));
-	}, [setSidebarOpen, updateSidebar]);
+	}, [updateSidebar]);
 	const closeSidebarOnCompact = React.useCallback(() => {
 		if (rootRef.current && isCompactSidebar(rootRef.current)) closeSidebar();
 	}, [closeSidebar]);
 	const toggleSidebar = React.useCallback((trigger) => {
 		if (trigger) openerRef.current = trigger;
 		updateSidebar(() => setSidebarOpen(!isSidebarOpen));
-	}, [
-		isSidebarOpen,
-		setSidebarOpen,
-		updateSidebar
-	]);
+	}, [isSidebarOpen, updateSidebar]);
 	const dismissSidebar = React.useCallback(() => {
 		updateSidebar(() => setSidebarOpen(false), () => openerRef.current?.focus({ preventScroll: true }));
-	}, [setSidebarOpen, updateSidebar]);
+	}, [updateSidebar]);
 	const sidebarContent = typeof sidebar === "function" ? sidebar({
 		closeSidebar,
 		closeSidebarOnCompact
 	}) : sidebar;
-	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",
-		"aria-controls": sidebarId,
-		"aria-expanded": isSidebarOpen,
-		onClick: (event) => toggleSidebar(event.currentTarget),
-		children: /* @__PURE__ */ jsx(SidebarIcon, {})
-	}) : null;
-	const hasTopBar = !topBarHidden && (hasSidebar || topBarLeading != null || compactTopBarLeading != null || topBarTitle != null || topBarTrailing != null || topBarProps != null);
+	const hasAppLeading = bar?.back != null || bar?.leading != null;
+	const hasTitleTrigger = hasSidebar && bar?.compactTitleTrigger != null && bar?.compactLeading == null;
+	const hasTopBar = !bar?.hidden && (hasSidebar || bar?.back != null || bar?.leading != null || bar?.compactLeading != null || bar?.title != null || bar?.actions != null);
+	const compactLeadingMode = hasTitleTrigger ? "trigger" : !hasAppLeading && bar?.compactLeading != null ? "custom" : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(rootRef, ref),
 		className: cx("responsive-sidebar-shell", className),
+		"data-recipe": "fill-host",
 		style,
 		...props,
 		"data-sidebar-open": hasSidebar && isSidebarOpen ? "true" : "false",
@@ -132,6 +104,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 			className: "responsive-sidebar-shell__frame",
 			label: sidebarLabel,
 			side: "start",
+			sizeVariable: "--responsive-sidebar-shell-sidebar-size",
 			defaultSize: defaultSidebarWidth,
 			minSize: sidebarMinWidth,
 			maxSize: sidebarMaxWidth,
@@ -149,34 +122,61 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen
 					ref: mainRef,
 					className: "responsive-sidebar-shell__main",
 					tabIndex: -1,
-					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]
+					children: [
+						hasTopBar ? /* @__PURE__ */ jsxs(AppTopBar.Root, {
+							"aria-label": bar?.label ?? "Application controls",
+							className: bar?.className,
+							"data-compact-leading": compactLeadingMode,
+							children: [
+								hasSidebar || hasAppLeading || bar?.compactLeading != null ? /* @__PURE__ */ jsxs(AppTopBar.Leading, { children: [
+									bar?.back ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+										label: bar.back.label,
+										render: bar.back.link,
+										children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+									}) : null,
+									bar?.leading,
+									!hasAppLeading && hasSidebar ? /* @__PURE__ */ jsx(AppTopBar.Button, {
+										className: "responsive-sidebar-shell__toggle",
+										label: toggleLabel,
+										tooltip: toggleTooltip,
+										type: "button",
+										"aria-controls": sidebarId,
+										"aria-expanded": isSidebarOpen,
+										onClick: (event) => toggleSidebar(event.currentTarget),
+										children: /* @__PURE__ */ jsx(SidebarIcon, {})
+									}) : null,
+									compactLeadingMode === "custom" ? /* @__PURE__ */ jsx("span", {
+										className: "responsive-sidebar-shell__compact-leading",
+										children: bar?.compactLeading
+									}) : null
+								] }) : null,
+								bar?.title != null || hasTitleTrigger ? /* @__PURE__ */ jsxs(AppTopBar.Title, {
+									render: bar?.titleRender,
+									children: [bar?.title != null ? /* @__PURE__ */ jsx("span", {
+										className: "responsive-sidebar-shell__title-text",
+										children: bar.title
+									}) : 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: [bar?.compactTitleTrigger, /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
+									}) : null]
+								}) : null,
+								bar?.actions != null ? /* @__PURE__ */ jsx(AppTopBar.Trailing, { children: bar.actions }) : null
+							]
+						}) : null,
+						error != null ? /* @__PURE__ */ jsxs("div", {
+							className: "responsive-sidebar-shell__error",
+							role: "alert",
+							children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: error })]
+						}) : null,
+						children
+					]
 				}),
 				hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
 					type: "button",

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
@@ -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

@@ -44,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
@@ -126,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
 		})
 	});

package/dist/components/nanites/AgentToolDetail.js

@@ -2,10 +2,10 @@ import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { r as ArrowLeftIcon } from "../../icons-CVFSeTJn.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.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 { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.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";
 import { useAgentChat } from "@cloudflare/think/react";
@@ -29,6 +29,7 @@ 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",

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 {