@mcp-b/react-components 0.41.0 → 0.43.0

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

@@ -1,2 +1,97 @@
-import { a as AppTopBarLinkProps, i as AppTopBarGroupProps, n as AppTopBarButtonProps, o as AppTopBarRootProps, r as AppTopBarControlProps, s as AppTopBarTitleProps, t as AppTopBar } from "../../AppTopBar-ZdgmB_Lu.js";
+import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps } from "../foundations/Toolbar.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/general-purpose/AppTopBar.d.ts
+interface AppTopBarRootProps extends React.ComponentPropsWithoutRef<typeof Toolbar.Root> {
+  /** Accessible name describing the controls in this application bar. */
+  "aria-label": string;
+  /**
+   * Where the title sits. An application bar centres it between the control
+   * groups; a panel header labels its leading edge instead.
+   */
+  titleAlign?: "center" | "start";
+}
+interface AppTopBarGroupProps extends ToolbarGroupProps {}
+interface AppTopBarTitleProps extends useRender.ComponentProps<"div"> {}
+interface AppTopBarButtonProps extends Omit<ToolbarButtonProps, "aria-label"> {
+  ref?: React.Ref<HTMLButtonElement>;
+  /** Accessible name and default tooltip text for the icon-only control. */
+  label: string;
+  /** Tooltip text when it should differ from the accessible name. */
+  tooltip?: React.ReactNode;
+}
+interface AppTopBarLinkProps extends Omit<ToolbarLinkProps, "aria-label"> {
+  ref?: React.Ref<HTMLAnchorElement>;
+  /** Accessible name and default tooltip text for the icon-only link. */
+  label: string;
+  /** Tooltip text when it should differ from the accessible name. */
+  tooltip?: React.ReactNode;
+}
+interface AppTopBarControlProps extends ToolbarButtonProps {
+  ref?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * Stable application-level toolbar with composable leading, title, and trailing
+ * slots. Descendant buttons share Base UI's roving focus and tooltip provider.
+ */
+declare function AppTopBarRoot({
+  children,
+  className,
+  titleAlign,
+  ...props
+}: AppTopBarRootProps): React.JSX.Element;
+declare function AppTopBarLeading({
+  className,
+  ...props
+}: AppTopBarGroupProps): React.JSX.Element;
+declare function AppTopBarTitle({
+  className,
+  render,
+  ref,
+  ...props
+}: AppTopBarTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function AppTopBarTrailing({
+  className,
+  ...props
+}: AppTopBarGroupProps): React.JSX.Element;
+declare function AppTopBarControl({
+  className,
+  ...props
+}: AppTopBarControlProps): React.JSX.Element;
+declare function AppTopBarButton({
+  children,
+  className,
+  disabled,
+  label,
+  render,
+  tooltip,
+  ...props
+}: AppTopBarButtonProps): React.JSX.Element;
+declare function AppTopBarLink({
+  children,
+  className,
+  label,
+  render,
+  tooltip,
+  ...props
+}: AppTopBarLinkProps): React.JSX.Element;
+/**
+ * Composable application top bar with stable leading, title, and trailing
+ * slots. Icon controls use shared Toolbar roving focus and coordinated Tooltip
+ * behavior; their fixed slots do not resize when state icons change. Render an
+ * existing behavior-rich button through `Control` to retain those toolbar
+ * semantics without rebuilding the control. Use `Link` for navigation so an
+ * `href` or router-provided link keeps native link semantics.
+ */
+declare const AppTopBar: {
+  Root: typeof AppTopBarRoot;
+  Leading: typeof AppTopBarLeading;
+  Title: typeof AppTopBarTitle;
+  Trailing: typeof AppTopBarTrailing;
+  Control: typeof AppTopBarControl;
+  Button: typeof AppTopBarButton;
+  Link: typeof AppTopBarLink;
+};
+//#endregion
 export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarLinkProps, AppTopBarRootProps, AppTopBarTitleProps };

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,95 +1,2 @@
-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 };
+import { a as ResponsiveSidebarShellProps, i as ResponsiveSidebarShellControls, n as ResponsiveSidebarShell, r as ResponsiveSidebarShellBar, t as AppBarSlots } from "../../ResponsiveSidebarShell-DOXd5T-d.js";
+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 || bar?.primary != 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 || bar?.primary != null ? /* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [bar.actions, bar.primary] }) : 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/SetupChecklist.js

@@ -1,77 +1,2 @@
-import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.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";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/_internal/MenuDisclosureGroup.tsx
-/**
-* A menu-native disclosure: its trigger stays in the menu roving-focus model,
-* while its rows mount only after the user expands the section.
-*/
-function MenuDisclosureGroup({ children, className, defaultOpen = false, label, triggerClassName, ...props }) {
-	const [open, setOpen] = React.useState(defaultOpen);
-	return /* @__PURE__ */ jsxs(Menu.Group, {
-		className: mergeBaseClassName("menu-disclosure-group", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs(Menu.Item, {
-			"aria-expanded": open,
-			className: mergeBaseClassName("menu-disclosure-group__trigger", triggerClassName),
-			closeOnClick: false,
-			onClick: () => setOpen((current) => !current),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "sigvelo-truncate-grow",
-				children: label
-			}), /* @__PURE__ */ jsx(ChevronDownIcon, { "aria-hidden": "true" })]
-		}), open ? /* @__PURE__ */ jsx("div", {
-			className: "menu-disclosure-group__items",
-			children
-		}) : null]
-	});
-}
-//#endregion
-//#region src/components/general-purpose/SetupChecklist.tsx
-/** Checklist rows for any Menu surface (composer plus menu, tray menu). */
-function SetupChecklistGroup({ label, entries, defaultOpen = false, onSelect }) {
-	return /* @__PURE__ */ jsx(MenuDisclosureGroup, {
-		label,
-		defaultOpen,
-		children: entries.map((entry) => /* @__PURE__ */ jsxs(Menu.Item, {
-			"aria-label": `${entry.name}, ${entry.complete ? "complete" : "not set up"}`,
-			onClick: () => onSelect(entry.id),
-			children: [
-				entry.icon,
-				/* @__PURE__ */ jsx("span", {
-					className: "sigvelo-truncate-grow",
-					children: entry.description
-				}),
-				entry.complete ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PlusIcon, { "aria-hidden": "true" })
-			]
-		}, entry.id))
-	});
-}
-/** Progress-aware tray trigger opening the checklist in its own menu. */
-function SetupChecklistAction({ actionLabel, label, entries, onSelect }) {
-	const completed = entries.filter((entry) => entry.complete).length;
-	return /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsxs(Button, {
-		type: "button",
-		variant: "ghost",
-		color: "neutral",
-		size: "md",
-		"aria-label": `${actionLabel} — ${completed} of ${entries.length} set up`,
-		render: /* @__PURE__ */ jsx(Menu.Trigger, { unstyled: true }),
-		children: [completed === entries.length ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: actionLabel })]
-	}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-		side: "bottom",
-		align: "start",
-		sideOffset: 4,
-		children: /* @__PURE__ */ jsx(Menu.Popup, { children: /* @__PURE__ */ jsx(SetupChecklistGroup, {
-			defaultOpen: true,
-			label,
-			entries,
-			onSelect
-		}) })
-	}) })] });
-}
-//#endregion
+import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-H1JRCIIe.js";
 export { SetupChecklistAction, SetupChecklistGroup };

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

@@ -1,6 +1,6 @@
 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 { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/ThemeModeControl.tsx
 const modes = [

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

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