@mcp-b/react-components 0.40.0 → 0.42.0

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

@@ -1,18 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { C as FileIcon, m as ChevronRightIcon } from "../../icons-MmIXciMO.js";
-import { t as CopyButton } from "../../copy-button-Bc7jsYv_.js";
-import { Badge } from "../foundations/Badge.js";
+import { S as FileIcon, p as ChevronRightIcon } from "../../icons-CVFSeTJn.js";
+import { t as CopyButton } from "../../copy-button-lys9N_aI.js";
 import { Avatar } from "../foundations/Avatar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/Commit.tsx
-const FILE_STATUS_COLOR = {
-	added: "success",
-	modified: "warning",
-	deleted: "destructive",
-	renamed: "primary"
-};
 const FILE_STATUS_LABEL = {
 	added: "A",
 	modified: "M",
@@ -27,7 +20,7 @@ const FILE_STATUS_LABEL = {
 * summaries with expandable file details. Do not use it as a generic
 * accordion; use Collapsible or Accordion directly.
 *
-* Styling consumes Sigvelo surface, border, spacing, radius, badge, and focus
+* Styling consumes Sigvelo surface, border, spacing, radius, status, and focus
 * tokens. Add shared metadata/file affordances here instead of forking commit
 * cards in apps.
 *
@@ -197,12 +190,11 @@ function CommitFile({ className, children, ref, ...props }) {
 	});
 }
 function CommitFileStatus({ className, status, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Badge, {
+	return /* @__PURE__ */ jsx("span", {
 		...props,
 		ref,
-		color: FILE_STATUS_COLOR[status],
-		size: "sm",
 		className: cx("commit__file-status", className),
+		"data-status": status,
 		"aria-label": status,
 		children: FILE_STATUS_LABEL[status]
 	});

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

@@ -22,7 +22,7 @@ interface EnvironmentVariablesProps extends React.HTMLAttributes<HTMLDivElement>
  * environment keys and copyable values. Do not treat masking as a security
  * boundary; do not render secrets for users who are not allowed to see them.
  *
- * Sigvelo changes: composes Badge, Button, Switch, and Tooltip; maps copy and
+ * Sigvelo changes: composes Button, Switch, and Tooltip; maps copy and
  * reveal controls to Sigvelo CSS tokens; keeps masking local to the component.
  *
  * Values need visible labels and copy buttons need accessible labels. Styling
@@ -156,7 +156,7 @@ declare function EnvironmentVariableCopyButton({
   timeout,
   ...props
 }: EnvironmentVariableCopyButtonProps): React.JSX.Element;
-interface EnvironmentVariableRequiredProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {}
+interface EnvironmentVariableRequiredProps extends React.HTMLAttributes<HTMLSpanElement> {}
 declare function EnvironmentVariableRequired({
   className,
   children,

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

@@ -1,7 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { S as EyeOffIcon, x as EyeIcon } from "../../icons-MmIXciMO.js";
-import { t as CopyButton } from "../../copy-button-Bc7jsYv_.js";
-import { Badge } from "../foundations/Badge.js";
+import { b as EyeIcon, x as EyeOffIcon } from "../../icons-CVFSeTJn.js";
+import { t as CopyButton } from "../../copy-button-lys9N_aI.js";
 import { Switch } from "../foundations/Switch.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -26,7 +25,7 @@ function useVariableContext() {
 * environment keys and copyable values. Do not treat masking as a security
 * boundary; do not render secrets for users who are not allowed to see them.
 *
-* Sigvelo changes: composes Badge, Button, Switch, and Tooltip; maps copy and
+* Sigvelo changes: composes Button, Switch, and Tooltip; maps copy and
 * reveal controls to Sigvelo CSS tokens; keeps masking local to the component.
 *
 * Values need visible labels and copy buttons need accessible labels. Styling
@@ -185,11 +184,9 @@ function EnvironmentVariableCopyButton({ className, format = "value", label, onC
 	});
 }
 function EnvironmentVariableRequired({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Badge, {
+	return /* @__PURE__ */ jsx("span", {
 		...props,
 		ref,
-		color: "warning",
-		size: "sm",
 		className: cx("environment-variables__required", className),
 		children: children ?? "Required"
 	});

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

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../../FileTree-xqHYBw4g.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../../FileTree-DMYRdT6R.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

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

@@ -1,5 +1,4 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Badge } from "../foundations/Badge.js";
 import { Switch } from "../foundations/Switch.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -26,10 +25,8 @@ function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, vari
 				/* @__PURE__ */ jsxs("span", {
 					className: "pricing-page__period-label",
 					"data-active": isYearly || void 0,
-					children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
-						color: "success",
-						size: "sm",
-						className: "pricing-page__billing-badge",
+					children: ["Yearly", /* @__PURE__ */ jsxs("span", {
+						className: "pricing-page__billing-savings",
 						children: [
 							"Save ",
 							yearlySavingsPercent,
@@ -51,10 +48,8 @@ function PricingBillingToggle({ value, onValueChange, yearlySavingsPercent, vari
 				children: "Monthly"
 			}), /* @__PURE__ */ jsxs(ToggleGroup.Item, {
 				value: "yearly",
-				children: ["Yearly", /* @__PURE__ */ jsxs(Badge, {
-					color: "success",
-					size: "sm",
-					className: "pricing-page__billing-badge",
+				children: ["Yearly", /* @__PURE__ */ jsxs("span", {
+					className: "pricing-page__billing-savings",
 					children: [
 						"-",
 						yearlySavingsPercent,

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

@@ -1,10 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { F as MinusIcon, O as InfoIcon, d as CheckIcon } from "../../icons-MmIXciMO.js";
+import { M as MinusIcon, T as InfoIcon, d as CheckIcon } from "../../icons-CVFSeTJn.js";
 import { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Separator } from "../foundations/Separator.js";
 import { Card } from "../foundations/Card.js";
-import { Badge } from "../foundations/Badge.js";
 import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingPlanCard.tsx
@@ -24,20 +23,22 @@ function PricingPlanCard({ plan, billingPeriod, action = "select", onSelect, cla
 		className: cx("pricing-page__plan", className),
 		"data-popular": plan.popular || void 0,
 		children: [
-			plan.popular ? /* @__PURE__ */ jsx(Badge, {
-				color: "success",
-				className: "pricing-page__popular-badge",
-				children: "Most Popular"
-			}) : null,
 			/* @__PURE__ */ jsxs("div", {
 				className: "pricing-page__plan-header",
-				children: [/* @__PURE__ */ jsx("h2", {
-					className: "pricing-page__plan-name",
-					children: plan.name
-				}), /* @__PURE__ */ jsx("p", {
-					className: "pricing-page__plan-description",
-					children: plan.description
-				})]
+				children: [
+					plan.popular ? /* @__PURE__ */ jsx("span", {
+						className: "pricing-page__popular-label",
+						children: "Most popular"
+					}) : null,
+					/* @__PURE__ */ jsx("h2", {
+						className: "pricing-page__plan-name",
+						children: plan.name
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "pricing-page__plan-description",
+						children: plan.description
+					})
+				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "pricing-page__plan-price",

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,2 +1,105 @@
-import { i as ResponsiveSidebarShellTopBarControls, n as ResponsiveSidebarShellControls, r as ResponsiveSidebarShellProps, t as ResponsiveSidebarShell } from "../../ResponsiveSidebarShell-DWjULskY.js";
-export { ResponsiveSidebarShell, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps, ResponsiveSidebarShellTopBarControls };
+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;
+}
+/**
+ * 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;
+  /** Initial desktop sidebar width in CSS pixels. */
+  defaultSidebarWidth?: number;
+  /** Shell-owned application bar composed from slots. */
+  bar?: ResponsiveSidebarShellBar;
+  /**
+   * Host-owned error shown in the main column above the content, without
+   * replacing it. The shell renders the alert anatomy; pass the message.
+   */
+  error?: 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, and its container name `responsive-sidebar-shell` is public contract:
+ * surfaces that compose the shell size themselves against it.
+ */
+declare function ResponsiveSidebarShell({
+  sidebar,
+  sidebarLabel,
+  defaultSidebarWidth,
+  bar,
+  error,
+  showMainLabel,
+  className,
+  children,
+  ref,
+  style,
+  ...props
+}: ResponsiveSidebarShellProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+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 { q as SidebarIcon } from "../../icons-MmIXciMO.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,37 +8,57 @@ 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])];
-}
 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 root exposes `data-sidebar-open="true" | "false"` as its public styling hook.
+* 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, and its container name `responsive-sidebar-shell` is public contract:
+* surfaces that compose the shell size themselves against it.
 */
-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", 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 [isSidebarOpen, setSidebarOpen] = useControllableSidebar({
-		sidebarOpen,
-		defaultSidebarOpen,
-		onSidebarOpenChange
-	});
+	const compactRef = React.useRef(null);
+	const restoreSidebarOnWideRef = React.useRef(true);
+	const [isSidebarOpen, setSidebarOpen] = React.useState(true);
+	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 (compact) setSidebarOpen(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]);
+	const hasSidebar = sidebar != null;
 	const toggleLabel = capitalize(sidebarLabel);
 	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
 	const updateSidebar = React.useCallback((update, restoreFocus) => {
@@ -47,82 +67,118 @@ function ResponsiveSidebarShell({ sidebar, topBar, sidebarLabel, sidebarOpen, de
 	}, []);
 	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 sidebarToggle = /* @__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, {})
-	});
-	const topBarContent = typeof topBar === "function" ? topBar({
-		sidebarId,
-		sidebarOpen: isSidebarOpen,
-		sidebarToggle,
-		toggleSidebar
-	}) : topBar;
-	return /* @__PURE__ */ jsxs("div", {
+	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": 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",
+			sizeVariable: "--responsive-sidebar-shell-sidebar-size",
 			defaultSize: defaultSidebarWidth,
 			minSize: sidebarMinWidth,
 			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": 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
+					]
 				}),
-				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