@mcp-b/react-components 0.31.7 → 0.32.0

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { C as FileIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
@@ -200,11 +200,11 @@ function MessageBranchContent({ className, children, ref, ...props }) {
 		ref,
 		className: cx("message__branch-content", className),
 		...props,
-		children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+		children: React.Children.map(items, (item, index) => /* @__PURE__ */ jsx("div", {
 			className: "message__branch-panel",
 			hidden: index !== safeIndex,
 			children: item
-		}, React.isValidElement(item) && item.key != null ? item.key : index))
+		}))
 	});
 }
 /**

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon } from "../../icons-B4mGvCvc.js";
+import { n as ArrowDownIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon } from "../../icons-B4mGvCvc.js";
+import { n as ArrowDownIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ai-sdk/Plan.d.ts

@@ -159,8 +159,8 @@ declare function PlanSummaryContent({
   ...props
 }: PlanSummaryContentProps): React.JSX.Element;
 interface PlanSummaryStep {
-  /** Stable optional identity; the list index is used when omitted. */
-  id?: React.Key;
+  /** Stable identity retained when the host replaces or reorders the plan. */
+  id: React.Key;
   step: React.ReactNode;
   status: PlanStepStatus;
 }

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

@@ -1,5 +1,5 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { d as CheckIcon, i as ArrowRightIcon, v as DotIcon } from "../../icons-B4mGvCvc.js";
+import { d as CheckIcon, i as ArrowRightIcon, v as DotIcon } from "../../icons-B1Qw05te.js";
 import { Popover } from "../foundations/Popover.js";
 import { t as ProgressRing } from "../../progress-ring-Dz_ztrW2.js";
 import * as React from "react";
@@ -198,10 +198,10 @@ function PlanSummaryList({ steps, side }) {
 		total: steps.length,
 		children: [/* @__PURE__ */ jsx(PlanSummaryTrigger, {}), /* @__PURE__ */ jsx(PlanSummaryContent, {
 			side,
-			children: /* @__PURE__ */ jsx(Plan, { children: /* @__PURE__ */ jsx(PlanContent, { children: steps.map((item, index) => /* @__PURE__ */ jsxs(PlanStep, {
+			children: /* @__PURE__ */ jsx(Plan, { children: /* @__PURE__ */ jsx(PlanContent, { children: steps.map((item) => /* @__PURE__ */ jsxs(PlanStep, {
 				status: item.status,
 				children: [/* @__PURE__ */ jsx(PlanStepIndicator, {}), /* @__PURE__ */ jsx(PlanStepTitle, { children: item.step })]
-			}, item.id ?? index)) }) })
+			}, item.id)) }) })
 		})]
 	});
 }

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

@@ -1,15 +1,15 @@
 import { n as mergeBaseClassName, t as cx } from "../../class-names-BiMDVpUo.js";
-import { C as FileIcon, F as MonitorIcon, H as PlusIcon, J as SpinnerIcon, N as MicrophoneIcon, R as PaperclipIcon, X as StopIcon, Y as SquareIcon, a as ArrowUpIcon, d as CheckIcon, f as ChevronDownIcon, nt as WrenchIcon, rt as XIcon, tt as WarningIcon, w as FolderIcon } from "../../icons-B4mGvCvc.js";
+import { C as FileIcon, F as MonitorIcon, H as PlusIcon, J as SpinnerIcon, N as MicrophoneIcon, R as PaperclipIcon, X as StopIcon, Y as SquareIcon, a as ArrowUpIcon, d as CheckIcon, f as ChevronDownIcon, nt as WrenchIcon, rt as XIcon, tt as WarningIcon, w as FolderIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import { Tooltip } from "../foundations/Tooltip.js";
 import { IconButton } from "../foundations/IconButton.js";
+import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
+import { i as formatErrorMessage, n as clamp, r as formatClock } from "../../format-CmopcfqJ.js";
 import { Combobox } from "../foundations/Combobox.js";
 import { Kbd } from "../foundations/Kbd.js";
 import { Menu } from "../foundations/Menu.js";
 import { Select } from "../foundations/Select.js";
 import { Tabs } from "../foundations/Tabs.js";
-import { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
-import { i as formatErrorMessage, n as clamp, r as formatClock } from "../../format-CmopcfqJ.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/PromptInput.tsx

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { C as FileIcon, d as CheckIcon, m as ChevronRightIcon, v as DotIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { C as FileIcon, d as CheckIcon, m as ChevronRightIcon, v as DotIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";

package/dist/components/ai-sdk/Reasoning.d.ts

@@ -12,7 +12,7 @@ declare function useReasoning(): ReasoningContextValue;
 interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "onOpenChange" | "unstyled"> {
   /**
    * Whether the model is currently generating reasoning. When true the
-   * component auto-opens; it auto-closes once streaming ends.
+   * component auto-opens.
    */
   isStreaming?: boolean;
   /**
@@ -25,7 +25,8 @@ interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Ro
 }
 /**
  * A collapsible "thinking" block for showing model reasoning (e.g. DeepSeek
- * R1, OpenAI o-series). Auto-expands while streaming and collapses when done.
+ * R1, OpenAI o-series). Auto-expands while streaming and stays open when done
+ * so settling a response does not shift the transcript.
  * Adapted from Vercel AI Elements and composed from the design system's
  * existing Collapsible and Activity presentation primitives.
  *

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

@@ -1,13 +1,12 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { J as SpinnerIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { J as SpinnerIcon } from "../../icons-B4mGvCvc.js";
 import { 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
 const ReasoningContext = React.createContext(null);
-const AUTO_CLOSE_DELAY_MS = 1e3;
 const MS_IN_S = 1e3;
 function useReasoning() {
 	const ctx = React.useContext(ReasoningContext);
@@ -16,7 +15,8 @@ function useReasoning() {
 }
 /**
 * A collapsible "thinking" block for showing model reasoning (e.g. DeepSeek
-* R1, OpenAI o-series). Auto-expands while streaming and collapses when done.
+* R1, OpenAI o-series). Auto-expands while streaming and stays open when done
+* so settling a response does not shift the transcript.
 * Adapted from Vercel AI Elements and composed from the design system's
 * existing Collapsible and Activity presentation primitives.
 *
@@ -33,9 +33,7 @@ function useReasoning() {
 function Reasoning({ className, isStreaming = false, duration, open, defaultOpen, onOpenChange, children, ref, ...props }) {
 	const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? isStreaming);
 	const [internalDuration, setInternalDuration] = React.useState(duration);
-	const previousStreamingRef = React.useRef(isStreaming);
 	const startTimeRef = React.useRef(isStreaming ? Date.now() : null);
-	const hasEverStreamedRef = React.useRef(isStreaming);
 	const isControlled = open !== void 0;
 	const currentOpen = isControlled ? open : internalOpen;
 	const preventAutoOpen = defaultOpen === false;
@@ -51,7 +49,6 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 	]);
 	React.useEffect(() => {
 		if (isStreaming) {
-			hasEverStreamedRef.current = true;
 			if (startTimeRef.current === null) startTimeRef.current = Date.now();
 			return;
 		}
@@ -61,16 +58,7 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 		}
 	}, [duration, isStreaming]);
 	React.useEffect(() => {
-		const wasStreaming = previousStreamingRef.current;
 		if (isStreaming && !currentOpen && !preventAutoOpen) setOpenState(true);
-		if (!isStreaming && wasStreaming && hasEverStreamedRef.current && currentOpen) {
-			const closeTimer = window.setTimeout(() => {
-				setOpenState(false);
-			}, AUTO_CLOSE_DELAY_MS);
-			previousStreamingRef.current = isStreaming;
-			return () => window.clearTimeout(closeTimer);
-		}
-		previousStreamingRef.current = isStreaming;
 	}, [
 		currentOpen,
 		isStreaming,
@@ -122,7 +110,10 @@ function ReasoningTrigger({ className, children, getThinkingMessage = defaultGet
 		"data-slot": "reasoning-trigger",
 		className: cx("reasoning__trigger", className),
 		"data-streaming": isStreaming ? "" : void 0,
-		icon: children == null && isStreaming ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : void 0,
+		icon: children == null ? /* @__PURE__ */ jsx("span", {
+			className: "reasoning__status-icon",
+			children: isStreaming ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : null
+		}) : void 0,
 		action: children ?? getThinkingMessage(isStreaming, duration),
 		...props
 	});

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { k as LinkIcon, m as ChevronRightIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { k as LinkIcon, m as ChevronRightIcon } from "../../icons-B4mGvCvc.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 { C as FileIcon, G as SearchIcon, m as ChevronRightIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { C as FileIcon, G as SearchIcon, m as ChevronRightIcon } from "../../icons-B4mGvCvc.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/Task.tsx

package/dist/components/extension/ChatGptSignInScreen.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { J as SpinnerIcon } from "../../icons-B4mGvCvc.js";
+import { J as SpinnerIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
-import { u as ModelSelectorLogo } from "../../ModelSelector-DZcpUBgn.js";
+import { u as ModelSelectorLogo } from "../../ModelSelector-DzdEs2fX.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/extension/ChatGptSignInScreen.tsx

package/dist/components/extension/CodexModelSelector.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { W as RefreshIcon, d as CheckIcon, f as ChevronDownIcon, l as BrainIcon, m as ChevronRightIcon } from "../../icons-B4mGvCvc.js";
+import { W as RefreshIcon, d as CheckIcon, f as ChevronDownIcon, l as BrainIcon, m as ChevronRightIcon } from "../../icons-B1Qw05te.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { Menu } from "../foundations/Menu.js";
 import { a as titleCase } from "../../format-CmopcfqJ.js";
+import { Menu } from "../foundations/Menu.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/extension/CodexModelSelector.tsx

package/dist/components/extension/ConversationTabPicker.js

@@ -1,8 +1,8 @@
-import { tt as WarningIcon } from "../../icons-B4mGvCvc.js";
+import { tt as WarningIcon } from "../../icons-B1Qw05te.js";
+import { Avatar } from "../foundations/Avatar.js";
 import { Button } from "../foundations/Button.js";
-import { Menu } from "../foundations/Menu.js";
 import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
-import { Avatar } from "../foundations/Avatar.js";
+import { Menu } from "../foundations/Menu.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/extension/ConversationTabPicker.tsx

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-B4mGvCvc.js";
+import { d as CheckIcon } from "../../icons-B1Qw05te.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 { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import { jsx } from "react/jsx-runtime";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 //#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 { d as CheckIcon, v as DotIcon } from "../../icons-B4mGvCvc.js";
+import { d as CheckIcon, v as DotIcon } from "../../icons-B1Qw05te.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 { d as CheckIcon, v as DotIcon } from "../../icons-B4mGvCvc.js";
+import { d as CheckIcon, v as DotIcon } from "../../icons-B1Qw05te.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 { G as SearchIcon } from "../../icons-B4mGvCvc.js";
+import { G as SearchIcon } from "../../icons-B1Qw05te.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-B4mGvCvc.js";
+import { a as ArrowUpIcon, d as CheckIcon, n as ArrowDownIcon } from "../../icons-B1Qw05te.js";
 import "react";
 import { jsx, jsxs } 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 { J as SpinnerIcon, d as CheckIcon } from "../../icons-B4mGvCvc.js";
+import { J as SpinnerIcon, d as CheckIcon } from "../../icons-B1Qw05te.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 { rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { rt as XIcon } from "../../icons-B1Qw05te.js";
 import { buttonVariants } from "./Button.js";
 import "react";
 import { jsx } from "react/jsx-runtime";

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";
+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-B1Qw05te.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 };

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

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { C as FileIcon, m as ChevronRightIcon } from "../../icons-B1Qw05te.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 { Avatar } from "../foundations/Avatar.js";
+import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
+import { Badge } from "../foundations/Badge.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/Commit.tsx

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

@@ -1,6 +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 { S as EyeOffIcon, x as EyeIcon } from "../../icons-B1Qw05te.js";
+import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import { Badge } from "../foundations/Badge.js";
 import { Switch } from "../foundations/Switch.js";
 import * as React from "react";

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-4WP4Uc_m.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

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

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { O as InfoIcon, P as MinusIcon, d as CheckIcon } from "../../icons-B4mGvCvc.js";
+import { O as InfoIcon, P as MinusIcon, d as CheckIcon } from "../../icons-B1Qw05te.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 { Card } from "../foundations/Card.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 { Separator } from "../foundations/Separator.js";
-import { Card } from "../foundations/Card.js";
 import { Slider } from "../foundations/Slider.js";
 import { Progress } from "../foundations/Progress.js";
+import { Card } from "../foundations/Card.js";
 import { formatPricingUsage, getUsagePrice } from "./Pricing.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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 { K as SidebarIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import { t as capitalize } from "../../format-CmopcfqJ.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";

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

@@ -1,8 +1,8 @@
 import { Button } from "../foundations/Button.js";
-import { Field } from "../foundations/Field.js";
-import { Form } from "../foundations/Form.js";
 import { Dialog } from "../foundations/Dialog.js";
 import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { Field } from "../foundations/Field.js";
+import { Form } from "../foundations/Form.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/general-purpose/SettingsFormDialog.tsx

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 { H as PlusIcon, d as CheckIcon, f as ChevronDownIcon, tt as WarningIcon } from "../../icons-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
 import { Menu } from "../foundations/Menu.js";
 import * as React from "react";

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

@@ -1,7 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as TerminalIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
+import { $ as TerminalIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
 import { IconButton } from "../foundations/IconButton.js";
-import { t as CopyButton } from "../../copy-button-4YvddK4e.js";
+import { t as CopyButton } from "../../copy-button-CsNSSKYG.js";
 import { Badge } from "../foundations/Badge.js";
 import { ScrollArea } from "../foundations/ScrollArea.js";
 import * as React from "react";

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { J as SpinnerIcon, d as CheckIcon, m as ChevronRightIcon, rt as XIcon } from "../../icons-B4mGvCvc.js";
 import { Badge } from "../foundations/Badge.js";
 import { Progress } from "../foundations/Progress.js";
 import * as React from "react";

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

@@ -1,4 +1,4 @@
-import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B4mGvCvc.js";
+import { F as MonitorIcon, I as MoonIcon, Z as SunIcon } from "../../icons-B1Qw05te.js";
 import { Radio, RadioGroup } from "../foundations/RadioGroup.js";
 import { useTheme } from "../foundations/ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,10 +1,10 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
+import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { Collapsible } from "../foundations/Collapsible.js";
-import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
 import { IconButton } from "../foundations/IconButton.js";
 import { Badge } from "../foundations/Badge.js";
-import { ScrollArea } from "../foundations/ScrollArea.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 { k as LinkIcon } from "../../icons-B4mGvCvc.js";
+import { k as LinkIcon } from "../../icons-B1Qw05te.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-B5I7wje1.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-CM5gfmdq.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/nanites/AgentConnection.tsx

package/dist/components/nanites/AgentToolDetail.js

@@ -1,9 +1,9 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { r as ArrowLeftIcon } from "../../icons-B4mGvCvc.js";
+import { r as ArrowLeftIcon } from "../../icons-B1Qw05te.js";
 import { TransitionSurface } from "../foundations/TransitionSurface.js";
 import { SubagentRunMilestone, SubagentRunMilestones, SubagentRunProgress } from "../agents-sdk/SubagentRunDetails.js";
 import { SubagentRunIndicator, getSubagentRunName } from "../agents-sdk/SubagentRunIndicator.js";
-import { t as ThinkChat } from "../../ThinkChat-BUoXVfrn.js";
+import { t as ThinkChat } from "../../ThinkChat-BIEryLy0.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { NaniteMark } from "./NaniteScene.js";
 import * as React from "react";

package/dist/{copy-button-4YvddK4e.js → copy-button-CsNSSKYG.js}

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

package/dist/styles/activity.css

@@ -58,6 +58,8 @@
 
 .activity__trigger-icon {
   display: inline-flex;
+  flex: none;
+  margin-inline-start: auto;
   color: var(--sigvelo-color-text-muted);
   transition: rotate var(--sigvelo-motion-duration-disclosure) var(--sigvelo-motion-ease-enter);
 }

package/dist/styles/message.css

@@ -122,8 +122,34 @@
   color: var(--sigvelo-color-text-muted);
 }
 
-.message[data-from="user"] .message__actions {
-  align-self: flex-end;
+.message__actions--reserved {
+  min-block-size: var(--sigvelo-control-height-sm);
+}
+
+.message[data-from="user"]:has(> .message__actions--inline) {
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.message[data-from="user"] > .message__actions--inline {
+  align-self: center;
+}
+
+.message[data-from="user"] > .message__actions--inline[data-unavailable] {
+  visibility: hidden;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .message[data-from="user"] > .message__actions--inline {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .message[data-from="user"]:hover > .message__actions--inline,
+  .message[data-from="user"]:focus-within > .message__actions--inline {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }
 
 .message__action {
@@ -135,6 +161,10 @@
 }
 
 @media (any-pointer: coarse) {
+  .message__actions--reserved {
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+
   .message__action {
     --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
   }

package/dist/styles/reasoning.css

@@ -1,3 +1,9 @@
+.reasoning__status-icon {
+  display: inline-flex;
+  inline-size: var(--sigvelo-control-icon-size-md);
+  block-size: var(--sigvelo-control-icon-size-md);
+}
+
 .reasoning__text {
   padding-inline-start: var(--sigvelo-spacing-3);
   border-inline-start: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) * 2)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.31.7",
+  "version": "0.32.0",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.31.7"
+    "@mcp-b/design-tokens": "0.32.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",

package/dist/{icons-B4mGvCvc.js → icons-B1Qw05te.js}

@@ -1,8 +1,8 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { jsx } from "react/jsx-runtime";
 import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
 import { FaSlack } from "react-icons/fa6";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/_internal/icons.tsx
 function icon(Component) {
 	return function DesignSystemIcon({ size = 16, strokeWidth = 1.75, ...props }) {