@mcp-b/react-components 0.39.0 → 0.41.0

package/dist/components/foundations/icons.js

@@ -1,2 +1,2 @@
-import { $ as TerminalIcon, A as MaximizeIcon, B as PencilIcon, C as FileIcon, D as ImageIcon, E as HashIcon, F as MonitorIcon, G as SearchIcon, H as PlusIcon, I as MoonIcon, J as SpinnerIcon, K as SidebarIcon, L as MoveToFrontIcon, M as MessageSquareIcon, N as MicrophoneIcon, O as InfoIcon, P as MinusIcon, Q as TargetIcon, R as PaperclipIcon, S as EyeOffIcon, T as FolderOpenIcon, U as QueueIcon, V as PlayIcon, W as RefreshIcon, X as StopIcon, Y as SquareIcon, Z as SunIcon, _ as DiscordIcon, a as ArrowUpIcon, b as EllipsisIcon, c as BoxIcon, d as CheckIcon, et as TrashIcon, f as ChevronDownIcon, g as CopyIcon, h as CodeIcon, i as ArrowRightIcon, j as McpIcon, k as LinkIcon, l as BrainIcon, m as ChevronRightIcon, n as ArrowDownIcon, nt as WrenchIcon, o as ArrowUpRightIcon, p as ChevronLeftIcon, q as SlackIcon, r as ArrowLeftIcon, rt as XIcon, s as BookmarkIcon, t as ArchiveIcon, tt as WarningIcon, u as CalendarIcon, v as DotIcon, w as FolderIcon, x as EyeIcon, y as DownloadIcon, z as PauseIcon } from "../../icons-B4mGvCvc.js";
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SlackIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };
+import { $ as WarningIcon, A as MessageSquareIcon, B as PlusIcon, C as FolderIcon, D as LinkIcon, E as KeyboardIcon, F as MoveToFrontIcon, G as SlackIcon, H as RefreshIcon, I as PaperclipIcon, J as StopIcon, K as SpinnerIcon, L as PauseIcon, M as MinusIcon, N as MonitorIcon, O as MaximizeIcon, P as MoonIcon, Q as TrashIcon, R as PencilIcon, S as FileIcon, T as InfoIcon, U as SearchIcon, V as QueueIcon, W as SidebarIcon, X as TargetIcon, Y as SunIcon, Z as TerminalIcon, _ as DotIcon, a as ArrowUpIcon, b as EyeIcon, c as BoxIcon, d as CheckIcon, et as WrenchIcon, f as ChevronDownIcon, g as DiscordIcon, h as CopyIcon, i as ArrowRightIcon, j as MicrophoneIcon, k as McpIcon, l as BrainIcon, m as CodeIcon, n as ArrowDownIcon, o as ArrowUpRightIcon, p as ChevronRightIcon, q as SquareIcon, r as ArrowLeftIcon, s as BookmarkIcon, t as ArchiveIcon, tt as XIcon, u as CalendarIcon, v as DownloadIcon, w as FolderOpenIcon, x as EyeOffIcon, y as EllipsisIcon, z as PlayIcon } from "../../icons-CVFSeTJn.js";
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, InfoIcon, KeyboardIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SlackIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

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

@@ -1,91 +1,2 @@
-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;
-}
-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,
-  ...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
+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";
 export { AppTopBar, AppTopBarButtonProps, AppTopBarControlProps, AppTopBarGroupProps, AppTopBarLinkProps, AppTopBarRootProps, AppTopBarTitleProps };

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

@@ -10,9 +10,10 @@ import { useRender } from "@base-ui/react/use-render";
 * Stable application-level toolbar with composable leading, title, and trailing
 * slots. Descendant buttons share Base UI's roving focus and tooltip provider.
 */
-function AppTopBarRoot({ children, className, ...props }) {
+function AppTopBarRoot({ children, className, titleAlign = "center", ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(Toolbar.Root, {
 		className: mergeBaseClassName("app-top-bar", className),
+		"data-title-align": titleAlign,
 		...props,
 		children
 	}) });

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

@@ -13,7 +13,7 @@ interface CommitProps extends Omit<React.ComponentProps<typeof Collapsible.Root>
  * 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.
  *
@@ -190,7 +190,7 @@ declare function CommitFile({
 }: CommitFileProps & {
   ref?: React.Ref<HTMLLIElement>;
 }): React.JSX.Element;
-interface CommitFileStatusProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+interface CommitFileStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
   status: CommitFileStatusValue;
 }
 declare function CommitFileStatus({

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-B4mGvCvc.js";
-import { t as CopyButton } from "../../copy-button-4YvddK4e.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-B4mGvCvc.js";
-import { t as CopyButton } from "../../copy-button-4YvddK4e.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-DbQMpvxV.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 { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { Switch } from "../foundations/Switch.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 { O as InfoIcon, P as MinusIcon, d as CheckIcon } from "../../icons-B4mGvCvc.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/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 { K as SidebarIcon } from "../../icons-B4mGvCvc.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 { H as PlusIcon, d as CheckIcon, f as ChevronDownIcon, tt as WarningIcon } from "../../icons-B4mGvCvc.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({