@mcp-b/react-components 0.44.0 → 0.45.0

package/dist/components/ai-sdk/Queue.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { S as FileIcon, _ as DotIcon, d as CheckIcon, p as ChevronRightIcon } from "../../icons-Dw-im7lg.js";
-import { Button } from "../foundations/Button.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { S as FileIcon, _ as DotIcon, d as CheckIcon, p as ChevronRightIcon } from "../../icons-DbrksZyY.js";
+import { Button } from "../foundations/Button.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ai-sdk/Reasoning.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
-import { MessageResponse } from "./Message.js";
+import { q as SpinnerIcon } from "../../icons-DbrksZyY.js";
 import { Activity, ActivityContent, ActivityText, ActivityTrigger } from "./Activity.js";
+import { MessageResponse } from "./Message.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Reasoning.tsx

package/dist/components/ai-sdk/Sources.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { D as LinkIcon, p as ChevronRightIcon } from "../../icons-Dw-im7lg.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { D as LinkIcon, p as ChevronRightIcon } from "../../icons-DbrksZyY.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Sources.tsx

package/dist/components/ai-sdk/Task.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { S as FileIcon, W as SearchIcon, p as ChevronRightIcon } from "../../icons-Dw-im7lg.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { S as FileIcon, W as SearchIcon, p as ChevronRightIcon } from "../../icons-DbrksZyY.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Task.tsx

package/dist/components/ai-sdk/ToolInvocation.js

@@ -1,5 +1,5 @@
-import { a as formatUnknownValue } from "../../format-DB2mX9DA.js";
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { o as formatUnknownValue } from "../../format-COCyV98Z.js";
 import { getToolDisplayName, isToolPartFailed, isToolPartWorking } from "./ToolPart.js";
 import { t as summarizeToolInput } from "../../summarize-tool-input-CqTcGRYy.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/extension/ChatGptSignInScreen.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
+import { q as SpinnerIcon } from "../../icons-DbrksZyY.js";
 import { Button } from "../foundations/Button.js";
 import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
 import "react";

package/dist/components/extension/CodexModelSelector.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { U as RefreshIcon, d as CheckIcon, f as ChevronDownIcon, l as BrainIcon, p as ChevronRightIcon } from "../../icons-Dw-im7lg.js";
+import { U as RefreshIcon, d as CheckIcon, f as ChevronDownIcon, l as BrainIcon, p as ChevronRightIcon } from "../../icons-DbrksZyY.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { o as titleCase } from "../../format-DB2mX9DA.js";
 import { Menu } from "../foundations/Menu.js";
+import { c as titleCase } from "../../format-COCyV98Z.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/extension/CodexModelSelector.tsx

package/dist/components/extension/ConversationTabPicker.js

@@ -1,7 +1,7 @@
-import { et as WarningIcon } from "../../icons-Dw-im7lg.js";
+import { et as WarningIcon } from "../../icons-DbrksZyY.js";
 import { Button } from "../foundations/Button.js";
-import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Menu } from "../foundations/Menu.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Avatar } from "../foundations/Avatar.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/foundations/Checkbox.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon } from "../../icons-Dw-im7lg.js";
+import { d as CheckIcon } from "../../icons-DbrksZyY.js";
 import { jsx } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
 //#region src/components/foundations/Checkbox.tsx

package/dist/components/foundations/Collapsible.js

@@ -1,7 +1,7 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
 import "react";
-import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/foundations/Collapsible.tsx
 /**
 * Container that groups all collapsible parts. Renders a `<div>` element.

package/dist/components/foundations/ContextMenu.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { _ as DotIcon, d as CheckIcon } from "../../icons-Dw-im7lg.js";
+import { _ as DotIcon, d as CheckIcon } from "../../icons-DbrksZyY.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/components/foundations/Menubar.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { _ as DotIcon, d as CheckIcon } from "../../icons-Dw-im7lg.js";
+import { _ as DotIcon, d as CheckIcon } from "../../icons-DbrksZyY.js";
 import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/foundations/SearchField.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { W as SearchIcon } from "../../icons-Dw-im7lg.js";
+import { W as SearchIcon } from "../../icons-DbrksZyY.js";
 import { Field } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/foundations/SearchField.tsx

package/dist/components/foundations/Select.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../../icons-Dw-im7lg.js";
+import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../../icons-DbrksZyY.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/foundations/Stepper.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
+import { d as CheckIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
 import { Tabs } from "./Tabs.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/foundations/Toast.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { nt as XIcon } from "../../icons-Dw-im7lg.js";
+import { nt as XIcon } from "../../icons-DbrksZyY.js";
 import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/foundations/ToggleGroup.d.ts

@@ -1,7 +1,7 @@
 import { r as ToggleVariantsOptions } from "../../Toggle-DLrIf5YH.js";
 import * as React from "react";
-import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 
 //#region src/components/foundations/ToggleGroup.d.ts
 type ToggleGroupSize = ToggleVariantsOptions["size"];

package/dist/components/foundations/ToggleGroup.js

@@ -3,8 +3,8 @@ import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { toggleVariants } from "./Toggle.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 //#region src/components/foundations/ToggleGroup.tsx
 /**
 * Tracks the pressed item's box so the segmented thumb can slide to it instead

package/dist/components/foundations/icons.js

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { S as FileIcon, p as ChevronRightIcon } from "../../icons-Dw-im7lg.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { t as CopyButton } from "../../copy-button-DHhf-J1d.js";
+import { S as FileIcon, p as ChevronRightIcon } from "../../icons-DbrksZyY.js";
+import { t as CopyButton } from "../../copy-button-BpA7wQva.js";
 import { Avatar } from "../foundations/Avatar.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { b as EyeIcon, x as EyeOffIcon } from "../../icons-Dw-im7lg.js";
-import { t as CopyButton } from "../../copy-button-DHhf-J1d.js";
+import { b as EyeIcon, x as EyeOffIcon } from "../../icons-DbrksZyY.js";
+import { t as CopyButton } from "../../copy-button-BpA7wQva.js";
 import { Switch } from "../foundations/Switch.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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-Uu3ZnW1u.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../../FileTree-QTP57Qz4.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { Switch } from "../foundations/Switch.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingBillingToggle.tsx
 /** Controlled billing-period selector composed from the shared Switch or ToggleGroup. */

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { N as MinusIcon, T as InfoIcon, d as CheckIcon } from "../../icons-Dw-im7lg.js";
+import { N as MinusIcon, T as InfoIcon, d as CheckIcon } from "../../icons-DbrksZyY.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 { Separator } from "../foundations/Separator.js";
 import { getPlanPrice, getPlanYearlySavings } from "./Pricing.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/PricingPlanCard.tsx

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

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { Card } from "../foundations/Card.js";
 import { Separator } from "../foundations/Separator.js";
-import { Slider } from "../foundations/Slider.js";
 import { Progress } from "../foundations/Progress.js";
-import { Card } from "../foundations/Card.js";
+import { Slider } from "../foundations/Slider.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as clamp } from "../../format-DB2mX9DA.js";
+import { n as clamp } from "../../format-COCyV98Z.js";
 import { Separator } from "../foundations/Separator.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { a as ResponsiveSidebarShellProps, i as ResponsiveSidebarShellControls, n as ResponsiveSidebarShell, r as ResponsiveSidebarShellBar, t as AppBarSlots } from "../../ResponsiveSidebarShell-DOXd5T-d.js";
+import { a as ResponsiveSidebarShellProps, i as ResponsiveSidebarShellControls, n as ResponsiveSidebarShell, r as ResponsiveSidebarShellBar, t as AppBarSlots } from "../../ResponsiveSidebarShell-BTVPxLJK.js";
 export { AppBarSlots, ResponsiveSidebarShell, ResponsiveSidebarShellBar, ResponsiveSidebarShellControls, ResponsiveSidebarShellProps };

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { G as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
+import { G as SidebarIcon, et as WarningIcon, f as ChevronDownIcon, r as ArrowLeftIcon } from "../../icons-DbrksZyY.js";
 import { Button } from "../foundations/Button.js";
-import { t as capitalize } from "../../format-DB2mX9DA.js";
+import { t as capitalize } from "../../format-COCyV98Z.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";
@@ -15,6 +15,17 @@ 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;
@@ -27,14 +38,19 @@ function isCompactSidebar(root) {
 * 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", defaultSidebarWidth = sidebarDefaultWidth, bar, error, showMainLabel = "Show main content", className, children, ref, style, ...props }) {
+function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", sidebarOpen, sidebarTogglePlacement = "main", defaultSidebarOpen, defaultSidebarWidth = sidebarDefaultWidth, onSidebarOpenChange, 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] = React.useState(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;
@@ -44,7 +60,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 			const wasCompact = compactRef.current;
 			compactRef.current = compact;
 			if (wasCompact === null) {
-				if (compact) setSidebarOpen(false);
+				if (wantsBuiltInDefault && compact) primeSidebarOpen(false);
 				return;
 			}
 			if (!wasCompact && compact) {
@@ -57,7 +73,12 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 		const observer = new ResizeObserver(syncLayout);
 		observer.observe(root);
 		return () => observer.disconnect();
-	}, [isSidebarOpen]);
+	}, [
+		isSidebarOpen,
+		primeSidebarOpen,
+		setSidebarOpen,
+		wantsBuiltInDefault
+	]);
 	const hasSidebar = sidebar != null;
 	const toggleLabel = capitalize(sidebarLabel);
 	const toggleTooltip = `${isSidebarOpen ? "Hide" : "Show"} ${sidebarLabel}`;
@@ -67,23 +88,54 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 	}, []);
 	const closeSidebar = React.useCallback(() => {
 		updateSidebar(() => setSidebarOpen(false), () => mainRef.current?.focus({ preventScroll: true }));
-	}, [updateSidebar]);
+	}, [setSidebarOpen, 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, updateSidebar]);
+	}, [
+		isSidebarOpen,
+		setSidebarOpen,
+		updateSidebar
+	]);
 	const dismissSidebar = React.useCallback(() => {
 		updateSidebar(() => setSidebarOpen(false), () => openerRef.current?.focus({ preventScroll: true }));
-	}, [updateSidebar]);
+	}, [setSidebarOpen, updateSidebar]);
 	const sidebarContent = typeof sidebar === "function" ? sidebar({
 		closeSidebar,
 		closeSidebarOnCompact
 	}) : sidebar;
-	const hasAppLeading = bar?.back != null || bar?.leading != null;
+	const hasCustomLeading = bar?.leading != null;
+	const hasAppLeading = bar?.back != null || hasCustomLeading;
 	const hasTitleTrigger = hasSidebar && bar?.compactTitleTrigger != null && bar?.compactLeading == 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 renderSidebarToggleInSidebar = () => hasSidebar ? /* @__PURE__ */ jsx(Button, {
+		className: "responsive-sidebar-shell__toggle responsive-sidebar-shell__toggle--sidebar",
+		type: "button",
+		variant: "ghost",
+		color: "neutral",
+		size: "sm",
+		iconOnly: true,
+		"aria-label": toggleLabel,
+		title: toggleTooltip,
+		"aria-controls": sidebarId,
+		"aria-expanded": isSidebarOpen,
+		onClick: (event) => toggleSidebar(event.currentTarget),
+		children: /* @__PURE__ */ jsx(SidebarIcon, {})
+	}) : null;
+	const sidebarToggle = sidebarTogglePlacement === "sidebar" && isSidebarOpen ? renderSidebarToggleInSidebar() : null;
+	const mainSidebarToggle = sidebarTogglePlacement === "sidebar" || sidebarTogglePlacement === "main" && !hasCustomLeading ? renderSidebarToggle(sidebarTogglePlacement === "sidebar" ? "responsive-sidebar-shell__toggle--sidebar-fallback" : hasTitleTrigger ? "responsive-sidebar-shell__toggle--replaced-by-title" : bar?.compactLeading != null ? "responsive-sidebar-shell__toggle--replaced-by-compact-leading" : void 0) : 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", {
@@ -93,6 +145,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 		style,
 		...props,
 		"data-sidebar-open": hasSidebar && isSidebarOpen ? "true" : "false",
+		"data-sidebar-toggle-placement": sidebarTogglePlacement,
 		onKeyDown: (event) => {
 			props.onKeyDown?.(event);
 			if (!event.defaultPrevented && event.key === "Escape" && hasSidebar && isSidebarOpen && rootRef.current && isCompactSidebar(rootRef.current)) {
@@ -111,12 +164,18 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 			keyboardStep: sidebarKeyboardStep,
 			children: [
 				hasSidebar && isSidebarOpen ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "responsive-sidebar-shell__resizer" }) : null,
-				hasSidebar ? /* @__PURE__ */ jsx("div", {
+				hasSidebar ? /* @__PURE__ */ jsxs("div", {
 					id: sidebarId,
 					className: "responsive-sidebar-shell__sidebar",
 					"aria-hidden": isSidebarOpen ? void 0 : true,
 					inert: isSidebarOpen ? void 0 : true,
-					children: sidebarContent
+					children: [sidebarToggle ? /* @__PURE__ */ jsx("div", {
+						className: "responsive-sidebar-shell__sidebar-leading",
+						children: sidebarToggle
+					}) : null, /* @__PURE__ */ jsx("div", {
+						className: "responsive-sidebar-shell__sidebar-content",
+						children: sidebarContent
+					})]
 				}) : null,
 				/* @__PURE__ */ jsxs("div", {
 					ref: mainRef,
@@ -135,16 +194,7 @@ function ResponsiveSidebarShell({ sidebar, sidebarLabel = "sidebar", defaultSide
 										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,
+									!hasCustomLeading ? mainSidebarToggle : null,
 									compactLeadingMode === "custom" ? /* @__PURE__ */ jsx("span", {
 										className: "responsive-sidebar-shell__compact-leading",
 										children: bar?.compactLeading

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

@@ -1,8 +1,8 @@
 import { Button } from "../foundations/Button.js";
-import { Dialog } from "../foundations/Dialog.js";
-import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Field } from "../foundations/Field.js";
 import { Form } from "../foundations/Form.js";
+import { Dialog } from "../foundations/Dialog.js";
+import { a as formatErrorMessage } from "../../format-COCyV98Z.js";
 import { Checkbox } from "../foundations/Checkbox.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,2 +1,2 @@
-import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-DOp-zqjh.js";
+import { n as SetupChecklistGroup, t as SetupChecklistAction } from "../../SetupChecklist-CZeToAbu.js";
 export { SetupChecklistAction, SetupChecklistGroup };

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

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Q as TerminalIcon, nt as XIcon } from "../../icons-Dw-im7lg.js";
+import { Q as TerminalIcon, nt as XIcon } from "../../icons-DbrksZyY.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { t as CopyButton } from "../../copy-button-BpA7wQva.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
-import { t as CopyButton } from "../../copy-button-DHhf-J1d.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import Anser from "anser";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon, nt as XIcon, p as ChevronRightIcon, q as SpinnerIcon } from "../../icons-Dw-im7lg.js";
 import { Collapsible } from "../foundations/Collapsible.js";
+import { d as CheckIcon, nt as XIcon, p as ChevronRightIcon, q as SpinnerIcon } from "../../icons-DbrksZyY.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,6 +1,6 @@
-import { F as MoonIcon, P as MonitorIcon, X as SunIcon } from "../../icons-Dw-im7lg.js";
-import { useTheme } from "../foundations/ThemeProvider.js";
+import { F as MoonIcon, P as MonitorIcon, X as SunIcon } from "../../icons-DbrksZyY.js";
 import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
+import { useTheme } from "../foundations/ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/ThemeModeControl.tsx
 const modes = [

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { U as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
-import { IconButton } from "../foundations/IconButton.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { ScrollArea } from "../foundations/ScrollArea.js";
+import { U as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-DbrksZyY.js";
+import { IconButton } from "../foundations/IconButton.js";
 import { Input } from "../foundations/Input.js";
+import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/WebPreview.tsx

package/dist/components/nanites/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { D as LinkIcon } from "../../icons-Dw-im7lg.js";
+import { D as LinkIcon } from "../../icons-DbrksZyY.js";
 import { Button } from "../foundations/Button.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-8K1p1BDU.js";
 import { Popover } from "../foundations/Popover.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../../CodeBlock-Dl7a3Wqo.js";
 import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/nanites/AgentToolDetail.js

@@ -1,11 +1,11 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-Dw-im7lg.js";
+import { r as ArrowLeftIcon } from "../../icons-DbrksZyY.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-CWMcl79Q.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useAgentChat } from "@cloudflare/think/react";

package/dist/{copy-button-DHhf-J1d.js → copy-button-BpA7wQva.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, h as CopyIcon } from "./icons-Dw-im7lg.js";
+import { d as CheckIcon, h as CopyIcon } from "./icons-DbrksZyY.js";
 import { IconButton } from "./components/foundations/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/{format-DB2mX9DA.js → format-COCyV98Z.js}

@@ -38,6 +38,28 @@ function formatErrorMessage(error) {
 	return error instanceof Error ? error.message : String(error);
 }
 /**
+* How much of one line a collapsed row carries before it is cut. One bound for
+* every such row — a run's status line, an activity row's detail — because
+* they stack in the same transcript and two limits would read as drift.
+*/
+const LINE_LIMIT = 160;
+/**
+* The trimmed, non-empty lines of `value`. Callers that want the newest line
+* of a stream take the last one; `firstLine` covers the common case.
+*/
+function textLines(value) {
+	return value.split("\n").map((entry) => entry.trim()).filter((entry) => entry.length > 0);
+}
+/**
+* `value` reduced to the one line a collapsed row shows: its first non-empty
+* line, cut with an ellipsis. Empty when `value` has no line to show, so a
+* caller can fall back to its own wording.
+*/
+function firstLine(value) {
+	const line = textLines(value).at(0) ?? "";
+	return line.length > LINE_LIMIT ? `${line.slice(0, LINE_LIMIT - 1)}…` : line;
+}
+/**
 * Renders an unknown upstream value as display text. Tool arguments, results,
 * and audit records arrive in shapes this package never declared, so a bigint,
 * a cycle, or a value `JSON.stringify` has no answer for is an ordinary input
@@ -53,4 +75,4 @@ function formatUnknownValue(value, space) {
 	}
 }
 //#endregion
-export { formatUnknownValue as a, formatErrorMessage as i, clamp as n, titleCase as o, formatClock as r, capitalize as t };
+export { formatErrorMessage as a, titleCase as c, formatClock as i, clamp as n, formatUnknownValue as o, firstLine as r, textLines as s, capitalize as t };

package/dist/{progress-ring-BEocM1e3.js → progress-ring-Cgii90dC.js}

@@ -1,4 +1,4 @@
-import { n as clamp } from "./format-DB2mX9DA.js";
+import { n as clamp } from "./format-COCyV98Z.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/progress-ring.tsx
 /**

package/dist/styles/agent-event.css

@@ -0,0 +1,14 @@
+/* A background run's report or completion notice in the transcript: an
+   activity row named for the run, expandable to the words the model
+   received. Provenance shows in the row, never as a user bubble. */
+
+/* The Nanite stands in for an activity icon, so it takes that slot's measure
+   instead of the mark's own default. */
+.agent-event .activity__item-icon .nanite-mark {
+  inline-size: 1rem;
+  block-size: 1.2rem;
+}
+
+.agent-event[data-status="error"] .activity__header-action {
+  color: var(--sigvelo-color-danger-text);
+}

package/dist/styles/avatar.css

@@ -80,6 +80,7 @@
 }
 
 .avatar-group .avatar {
+  background-color: var(--sigvelo-color-neutral-bg-muted);
   margin-inline-start: -0.5rem;
   border: 2px solid var(--sigvelo-color-canvas);
 }
@@ -105,7 +106,7 @@
   flex-shrink: 0;
   margin-inline-start: -0.5rem;
   padding-inline: var(--sigvelo-spacing-1-5);
-  background-color: var(--sigvelo-color-neutral-bg-subtle);
+  background-color: var(--sigvelo-color-neutral-bg-muted);
   border: 2px solid var(--sigvelo-color-canvas);
   border-radius: var(--sigvelo-radius-full);
   color: var(--sigvelo-color-text-muted);