@mcp-b/react-components 0.34.1 → 0.36.0

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

@@ -4,17 +4,56 @@ 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 { i as formatErrorMessage, n as clamp, r as formatClock } from "../../format-DB2mX9DA.js";
+import { Autocomplete } from "../foundations/Autocomplete.js";
 import { Kbd } from "../foundations/Kbd.js";
 import { Menu } from "../foundations/Menu.js";
-import { Select } from "../foundations/Select.js";
+import { PreviewCard } from "../foundations/PreviewCard.js";
 import { Tabs } from "../foundations/Tabs.js";
+import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ai-sdk/PromptInput.tsx
 const PromptInputController = React.createContext(null);
 const LocalAttachmentsContext = React.createContext(null);
+function useAttachmentStore() {
+	const [files, setFiles] = React.useState([]);
+	const filesRef = React.useRef(files);
+	React.useEffect(() => {
+		filesRef.current = files;
+	}, [files]);
+	React.useEffect(() => () => {
+		revokeFileUrls(filesRef.current);
+	}, []);
+	const add = React.useCallback((incomingFiles) => {
+		const incoming = Array.from(incomingFiles);
+		setFiles((current) => [...current, ...incoming.map(fileToPart)]);
+	}, []);
+	const remove = React.useCallback((id) => {
+		setFiles((current) => {
+			const found = current.find((file) => file.id === id);
+			if (found?.url) URL.revokeObjectURL(found.url);
+			return current.filter((file) => file.id !== id);
+		});
+	}, []);
+	const clear = React.useCallback(() => {
+		setFiles((current) => {
+			revokeFileUrls(current);
+			return [];
+		});
+	}, []);
+	return React.useMemo(() => ({
+		add,
+		clear,
+		files,
+		remove
+	}), [
+		add,
+		clear,
+		files,
+		remove
+	]);
+}
 function usePromptInputController() {
 	const ctx = React.useContext(PromptInputController);
 	if (!ctx) throw new Error("Wrap your component inside <PromptInputProvider> to use usePromptInputController().");
@@ -36,46 +75,14 @@ function usePromptInputAttachments() {
 }
 function PromptInputProvider({ initialInput = "", children }) {
 	const [textInput, setTextInput] = React.useState(initialInput);
-	const [attachmentFiles, setAttachmentFiles] = React.useState([]);
+	const attachmentStore = useAttachmentStore();
 	const fileInputRef = React.useRef(null);
 	const openRef = React.useRef(() => {});
-	const attachmentsRef = React.useRef(attachmentFiles);
-	React.useEffect(() => {
-		attachmentsRef.current = attachmentFiles;
-	}, [attachmentFiles]);
-	React.useEffect(() => () => {
-		revokeFileUrls(attachmentsRef.current);
-	}, []);
-	const add = React.useCallback((files) => {
-		const incoming = Array.from(files);
-		setAttachmentFiles((prev) => [...prev, ...incoming.map(fileToPart)]);
-	}, []);
-	const remove = React.useCallback((id) => {
-		setAttachmentFiles((prev) => {
-			const found = prev.find((file) => file.id === id);
-			if (found?.url) URL.revokeObjectURL(found.url);
-			return prev.filter((file) => file.id !== id);
-		});
-	}, []);
-	const clear = React.useCallback(() => {
-		setAttachmentFiles((prev) => {
-			revokeFileUrls(prev);
-			return [];
-		});
-	}, []);
 	const attachments = React.useMemo(() => ({
-		add,
-		clear,
+		...attachmentStore,
 		fileInputRef,
-		files: attachmentFiles,
-		openFileDialog: () => openRef.current(),
-		remove
-	}), [
-		add,
-		attachmentFiles,
-		clear,
-		remove
-	]);
+		openFileDialog: () => openRef.current()
+	}), [attachmentStore]);
 	const controller = React.useMemo(() => ({
 		__registerFileInput: (ref, open) => {
 			fileInputRef.current = ref.current;
@@ -99,7 +106,7 @@ function PromptInputProvider({ initialInput = "", children }) {
 * Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
 *
 * Use for assistant/chat submit forms. Do not use it as a generic textarea or
-* non-chat form. Sigvelo changes: uses shared Menu, Select, Combobox, Tabs,
+* non-chat form. Sigvelo changes: uses shared Menu, Autocomplete, Tabs,
 * Button, and Tooltip components; maps styles to CSS tokens; and adds local
 * attachment helpers.
 *
@@ -126,19 +133,15 @@ function PromptInputProvider({ initialInput = "", children }) {
 */
 function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput, maxFiles, maxFileSize, onError, onSubmit, children, ref, ...props }) {
 	const controller = useOptionalPromptInputController();
-	const usingProvider = Boolean(controller);
 	const formRef = React.useRef(null);
 	const inputRef = React.useRef(null);
-	const [localFiles, setLocalFiles] = React.useState([]);
+	const { add: addLocalFiles, clear: clearLocalFiles, files: localFiles, remove: removeLocalFile } = useAttachmentStore();
 	const files = controller?.attachments.files ?? localFiles;
 	const filesRef = React.useRef(files);
 	React.useEffect(() => {
 		filesRef.current = files;
 	}, [files]);
 	React.useImperativeHandle(ref, () => formRef.current, []);
-	React.useEffect(() => () => {
-		if (!usingProvider) revokeFileUrls(filesRef.current);
-	}, [usingProvider]);
 	const matchesAccept = React.useCallback((file) => {
 		if (!accept?.trim()) return true;
 		return accept.split(",").map((pattern) => pattern.trim()).filter(Boolean).some((pattern) => pattern.endsWith("/*") ? file.type.startsWith(pattern.slice(0, -1)) : file.type === pattern);
@@ -169,8 +172,9 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 		});
 		if (!capped.length) return;
 		if (controller) controller.attachments.add(capped);
-		else setLocalFiles((prev) => [...prev, ...capped.map(fileToPart)]);
+		else addLocalFiles(capped);
 	}, [
+		addLocalFiles,
 		controller,
 		matchesAccept,
 		maxFileSize,
@@ -183,22 +187,15 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 			controller.attachments.remove(attachmentId);
 			return;
 		}
-		setLocalFiles((prev) => {
-			const found = prev.find((file) => file.id === attachmentId);
-			if (found?.url) URL.revokeObjectURL(found.url);
-			return prev.filter((file) => file.id !== attachmentId);
-		});
-	}, [controller]);
+		removeLocalFile(attachmentId);
+	}, [controller, removeLocalFile]);
 	const clearAttachments = React.useCallback(() => {
 		if (controller) {
 			controller.attachments.clear();
 			return;
 		}
-		setLocalFiles((prev) => {
-			revokeFileUrls(prev);
-			return [];
-		});
-	}, [controller]);
+		clearLocalFiles();
+	}, [clearLocalFiles, controller]);
 	const openFileDialog = React.useCallback(() => inputRef.current?.click(), []);
 	React.useEffect(() => {
 		if (!controller) return;
@@ -904,67 +901,85 @@ function PromptInputSubmit({ className, status = "ready", onStop, variant = "nor
 		children: children ?? (isQueueing ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : defaultSubmitIcon(status))
 	});
 }
-const PromptInputSelect = Select;
 const PromptInputHoverCardContext = React.createContext(null);
-function composePromptInputEventHandler(handler, followup) {
+function preservePromptInputEventCancellation(handler, cancellation) {
 	return (event) => {
 		handler?.(event);
-		if (!event.defaultPrevented) followup?.();
+		cancellation.current = event.defaultPrevented;
+		if (event.defaultPrevented) event.preventBaseUIHandler?.();
 	};
 }
 function PromptInputHoverCard({ openDelay = 0, closeDelay = 0, className, children, ref, ...props }) {
-	const [open, setOpen] = React.useState(false);
-	const timer = React.useRef(void 0);
-	const clearTimer = React.useCallback(() => window.clearTimeout(timer.current), []);
-	const openNow = React.useCallback(() => {
-		clearTimer();
-		timer.current = window.setTimeout(() => setOpen(true), openDelay);
-	}, [clearTimer, openDelay]);
-	const closeLater = React.useCallback(() => {
-		clearTimer();
-		timer.current = window.setTimeout(() => setOpen(false), closeDelay);
-	}, [clearTimer, closeDelay]);
-	React.useEffect(() => clearTimer, [clearTimer]);
+	const portalContainer = React.useRef(null);
+	const cancelNextOpen = React.useRef(false);
+	const cancelNextClose = React.useRef(false);
 	const value = React.useMemo(() => ({
-		open,
-		openNow,
-		closeLater
-	}), [
-		closeLater,
-		open,
-		openNow
-	]);
+		cancelNextClose,
+		cancelNextOpen,
+		closeDelay,
+		openDelay,
+		portalContainer
+	}), [closeDelay, openDelay]);
 	return /* @__PURE__ */ jsx(PromptInputHoverCardContext.Provider, {
 		value,
 		children: /* @__PURE__ */ jsx("div", {
-			ref,
+			ref: mergeRefs(ref, portalContainer),
 			className: cx("prompt-input__hover-card", className),
 			...props,
-			children
+			children: /* @__PURE__ */ jsx(PreviewCard.Root, {
+				onOpenChange: (open, eventDetails) => {
+					const isTriggerInteraction = eventDetails.reason === "trigger-focus" || eventDetails.reason === "trigger-hover";
+					const cancellation = open ? cancelNextOpen : cancelNextClose;
+					if (isTriggerInteraction && cancellation.current) {
+						cancellation.current = false;
+						eventDetails.cancel();
+					}
+				},
+				children
+			})
 		})
 	});
 }
 function PromptInputHoverCardTrigger({ className, ref, onFocus, onBlur, onMouseEnter, onMouseLeave, ...props }) {
 	const context = React.useContext(PromptInputHoverCardContext);
-	return /* @__PURE__ */ jsx("span", {
+	if (!context) return /* @__PURE__ */ jsx("span", {
 		ref,
 		className: cx("prompt-input__hover-card-trigger", className),
-		onFocus: composePromptInputEventHandler(onFocus, context?.openNow),
-		onBlur: composePromptInputEventHandler(onBlur, context?.closeLater),
-		onMouseEnter: composePromptInputEventHandler(onMouseEnter, context?.openNow),
-		onMouseLeave: composePromptInputEventHandler(onMouseLeave, context?.closeLater),
+		onFocus,
+		onBlur,
+		onMouseEnter,
+		onMouseLeave,
+		...props
+	});
+	return /* @__PURE__ */ jsx(PreviewCard.Trigger, {
+		render: /* @__PURE__ */ jsx("span", { ref }),
+		delay: context.openDelay,
+		closeDelay: context.closeDelay,
+		className: cx("prompt-input__hover-card-trigger", className),
+		onFocus: preservePromptInputEventCancellation(onFocus, context.cancelNextOpen),
+		onBlur: preservePromptInputEventCancellation(onBlur, context.cancelNextClose),
+		onMouseEnter: preservePromptInputEventCancellation(onMouseEnter, context.cancelNextOpen),
+		onMouseLeave: preservePromptInputEventCancellation(onMouseLeave, context.cancelNextClose),
 		...props
 	});
 }
 function PromptInputHoverCardContent({ className, ref, onMouseEnter, onMouseLeave, ...props }) {
 	const context = React.useContext(PromptInputHoverCardContext);
-	if (!context?.open) return null;
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("prompt-input__hover-card-content", className),
-		onMouseEnter: composePromptInputEventHandler(onMouseEnter, context.openNow),
-		onMouseLeave: composePromptInputEventHandler(onMouseLeave, context.closeLater),
-		...props
+	if (!context) return null;
+	return /* @__PURE__ */ jsx(PreviewCard.Portal, {
+		container: context.portalContainer,
+		children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			align: "start",
+			side: "bottom",
+			sideOffset: 6,
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				ref,
+				className: cx("prompt-input__hover-card-content", className),
+				onMouseEnter: preservePromptInputEventCancellation(onMouseEnter, context.cancelNextOpen),
+				onMouseLeave: preservePromptInputEventCancellation(onMouseLeave, context.cancelNextClose),
+				...props
+			})
+		})
 	});
 }
 const PromptInputTabsList = Tabs.List;
@@ -984,20 +999,6 @@ function PromptInputTabItem({ className, ref, ...props }) {
 		...props
 	});
 }
-const PromptInputCommand = Combobox;
-const PromptInputCommandInput = Combobox.Input;
-function PromptInputCommandList({ className, ref, ...props }) {
-	return /* @__PURE__ */ jsx(Combobox.List, {
-		ref,
-		className: mergeBaseClassName("prompt-input__command-list", className),
-		...props
-	});
-}
-const PromptInputCommandEmpty = Combobox.Empty;
-const PromptInputCommandGroup = Combobox.Group;
-const PromptInputCommandGroupLabel = Combobox.GroupLabel;
-const PromptInputCommandItem = Combobox.Item;
-const PromptInputCommandSeparator = Combobox.Separator;
 /**
 * Controlled PromptInput textarea with slash-command discovery. The host owns
 * both the command catalog and the draft policy applied after selection.
@@ -1007,7 +1008,7 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 	const [dismissedValue, setDismissedValue] = React.useState(null);
 	React.useImperativeHandle(ref, () => inputRef.current, []);
 	const match = /^\s*([/@])([^\n]*)$/u.exec(value);
-	const trigger = match?.[1];
+	const trigger = match?.[1] === "/" || match?.[1] === "@" ? match[1] : void 0;
 	const sourceCommands = trigger === "@" ? mentionCommands ?? [] : commands;
 	const normalizedQuery = (match?.[2]?.trim() ?? "").toLocaleLowerCase();
 	const filtered = sourceCommands.filter((command) => {
@@ -1025,50 +1026,46 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 		label,
 		items: filtered.filter((command) => (command.group ?? "") === label)
 	}));
-	return /* @__PURE__ */ jsxs(PromptInputCommand.Root, {
+	return /* @__PURE__ */ jsxs(Autocomplete.Root, {
 		items: groups,
 		filteredItems: groups,
 		filter: null,
-		value: null,
-		inputValue: value,
+		value,
 		open,
 		autoHighlight: true,
-		itemToStringLabel: (command) => command.label,
 		itemToStringValue: (command) => command.value,
-		onInputValueChange: (next, { reason }) => {
+		onValueChange: (next, { reason }) => {
 			if (reason !== "input-change") return;
 			setDismissedValue(null);
-			onValueChange(String(next));
+			onValueChange(next);
 		},
 		onOpenChange: (nextOpen) => {
 			if (!nextOpen) setDismissedValue(value);
 		},
-		onValueChange: (command, { reason }) => {
-			if (!command || Array.isArray(command) || reason !== "item-press") return;
-			onCommandSelect(command, trigger ?? "/");
-		},
-		children: [/* @__PURE__ */ jsx(PromptInputCommandInput, { render: /* @__PURE__ */ jsx(PromptInputTextarea, {
+		children: [/* @__PURE__ */ jsx(Autocomplete.Input, { render: /* @__PURE__ */ jsx(PromptInputTextarea, {
 			...textareaProps,
 			ref: inputRef,
 			value,
 			onKeyDown
-		}) }), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		}) }), /* @__PURE__ */ jsx(Autocomplete.Portal, { children: /* @__PURE__ */ jsx(Autocomplete.Positioner, {
 			anchor: () => inputRef.current?.closest(".prompt-input__body") ?? null,
 			side: "top",
 			sideOffset: 8,
 			align: "start",
 			className: "prompt-input__command-positioner",
-			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+			children: /* @__PURE__ */ jsxs(Autocomplete.Popup, {
 				className: "prompt-input__command-popup",
 				"data-recipe": "composer-command-surface",
-				children: [/* @__PURE__ */ jsx(PromptInputCommandList, {
+				children: [/* @__PURE__ */ jsx(Autocomplete.List, {
+					className: "prompt-input__command-list",
 					"data-command-trigger": trigger,
-					children: (group) => /* @__PURE__ */ jsxs(PromptInputCommandGroup, {
+					children: (group) => /* @__PURE__ */ jsxs(Autocomplete.Group, {
 						items: group.items,
-						children: [group.label ? /* @__PURE__ */ jsx(PromptInputCommandGroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(Combobox.Collection, { children: (command) => /* @__PURE__ */ jsxs(PromptInputCommandItem, {
+						children: [group.label ? /* @__PURE__ */ jsx(Autocomplete.GroupLabel, { children: group.label }) : null, /* @__PURE__ */ jsx(Autocomplete.Collection, { children: (command) => /* @__PURE__ */ jsxs(Autocomplete.Item, {
 							value: command,
 							disabled: command.disabled,
 							className: "prompt-input__command-item",
+							onClick: () => onCommandSelect(command, trigger ?? "/"),
 							children: [command.icon ? /* @__PURE__ */ jsx("span", {
 								className: "prompt-input__command-icon",
 								children: command.icon
@@ -1091,7 +1088,7 @@ function PromptInputCommandComposer({ commands, mentionCommands, value, onValueC
 							})]
 						}, command.id) })]
 					}, group.label || "ungrouped")
-				}), /* @__PURE__ */ jsx(PromptInputCommandEmpty, { children: trigger === "@" ? mentionEmptyMessage : emptyMessage })]
+				}), /* @__PURE__ */ jsx(Autocomplete.Empty, { children: trigger === "@" ? mentionEmptyMessage : emptyMessage })]
 			})
 		}) })]
 	});
@@ -1287,4 +1284,4 @@ function createId() {
 	return globalThis.crypto?.randomUUID?.() ?? `prompt-input-${Date.now()}-${Math.random()}`;
 }
 //#endregion
-export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommand, PromptInputCommandComposer, PromptInputCommandEmpty, PromptInputCommandGroup, PromptInputCommandGroupLabel, PromptInputCommandInput, PromptInputCommandItem, PromptInputCommandList, PromptInputCommandSeparator, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputReferences, PromptInputSelect, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, PromptInputTray, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+export { PromptInput, PromptInputActionAddAttachments, PromptInputActionAddScreenshot, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuItem, PromptInputActionMenuTrigger, PromptInputAttachment, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputCommandComposer, PromptInputContextSelector, PromptInputDictation, PromptInputFooter, PromptInputHeader, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardTrigger, PromptInputPermissionSelector, PromptInputProvider, PromptInputReferences, PromptInputSubmit, PromptInputTab, PromptInputTabBody, PromptInputTabItem, PromptInputTabLabel, PromptInputTabsList, PromptInputTextarea, PromptInputTools, PromptInputTray, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

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

@@ -102,7 +102,7 @@ function QueueList({ className, children, ref, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 			className: "queue__list-viewport",
-			children: /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsx(ScrollArea.Content, {
 				className: "queue__list-scroll",
 				children: /* @__PURE__ */ jsx("ul", {
 					className: "queue__list-inner",

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

@@ -1,4 +1,5 @@
 import { Collapsible } from "../foundations/Collapsible.js";
+import { ActivityProps } from "./Activity.js";
 import * as React from "react";
 
 //#region src/components/ai-sdk/Reasoning.d.ts
@@ -9,10 +10,10 @@ interface ReasoningContextValue {
   duration?: number;
 }
 declare function useReasoning(): ReasoningContextValue;
-interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Root>, "onOpenChange" | "unstyled"> {
+interface ReasoningProps extends Omit<ActivityProps, "isStreaming" | "stateKey"> {
   /**
    * Whether the model is currently generating reasoning. When true the
-   * component auto-opens.
+   * component requests to open; a controlled consumer remains authoritative.
    */
   isStreaming?: boolean;
   /**
@@ -20,8 +21,6 @@ interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible.Ro
    * When omitted, the component measures the duration automatically.
    */
   duration?: number;
-  /** Called when the open state changes. */
-  onOpenChange?: (open: boolean) => void;
 }
 /**
  * A collapsible "thinking" block for showing model reasoning (e.g. DeepSeek

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

@@ -1,13 +1,33 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
 import { J as SpinnerIcon } from "../../icons-B1Qw05te.js";
-import { Collapsible } from "../foundations/Collapsible.js";
-import { ActivityContent, ActivityText, ActivityTrigger } from "./Activity.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
 const ReasoningContext = React.createContext(null);
 const MS_IN_S = 1e3;
+function createProgrammaticOpenChangeDetails() {
+	let isCanceled = false;
+	let isPropagationAllowed = false;
+	return {
+		reason: "none",
+		event: new Event("base-ui"),
+		trigger: void 0,
+		cancel: () => {
+			isCanceled = true;
+		},
+		allowPropagation: () => {
+			isPropagationAllowed = true;
+		},
+		get isCanceled() {
+			return isCanceled;
+		},
+		get isPropagationAllowed() {
+			return isPropagationAllowed;
+		}
+	};
+}
 function useReasoning() {
 	const ctx = React.useContext(ReasoningContext);
 	if (!ctx) throw new Error("Reasoning subcomponents must be used inside <Reasoning>.");
@@ -38,10 +58,10 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 	const currentOpen = isControlled ? open : internalOpen;
 	const preventAutoOpen = defaultOpen === false;
 	const resolvedDuration = duration ?? (isStreaming || startTimeRef.current !== null ? void 0 : internalDuration);
-	const setOpenState = React.useCallback((next) => {
+	const setOpenState = React.useCallback((next, eventDetails = createProgrammaticOpenChangeDetails()) => {
 		if (next === currentOpen) return;
-		if (!isControlled) setInternalOpen(next);
-		onOpenChange?.(next);
+		onOpenChange?.(next, eventDetails);
+		if (!eventDetails.isCanceled && !isControlled) setInternalOpen(next);
 	}, [
 		currentOpen,
 		isControlled,
@@ -65,9 +85,6 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 		preventAutoOpen,
 		setOpenState
 	]);
-	const handleOpenChange = React.useCallback((next) => {
-		setOpenState(next);
-	}, [setOpenState]);
 	const ctx = React.useMemo(() => ({
 		isStreaming,
 		isOpen: currentOpen,
@@ -81,15 +98,14 @@ function Reasoning({ className, isStreaming = false, duration, open, defaultOpen
 	]);
 	return /* @__PURE__ */ jsx(ReasoningContext.Provider, {
 		value: ctx,
-		children: /* @__PURE__ */ jsx(Collapsible.Root, {
+		children: /* @__PURE__ */ jsx(Activity, {
 			ref,
 			"data-slot": "reasoning",
-			className: cx("activity", "reasoning", className),
+			className: cx("reasoning", className),
+			isStreaming,
 			open: currentOpen,
-			onOpenChange: handleOpenChange,
-			"data-streaming": isStreaming ? "" : void 0,
+			onOpenChange: setOpenState,
 			...props,
-			unstyled: true,
 			children
 		})
 	});

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

@@ -1,11 +1,9 @@
-import { DynamicToolUIPart, ToolUIPart } from "ai";
+import { AnyToolUIPart } from "./ToolPart.js";
 
 //#region src/components/ai-sdk/ToolInvocation.d.ts
-/** One whole static or dynamic AI SDK tool UI part. */
-type ToolInvocationPart = ToolUIPart | DynamicToolUIPart;
 interface ToolInvocationProps {
   /** The whole upstream AI SDK tool part, kept intact across every tool state. */
-  part: ToolInvocationPart;
+  part: AnyToolUIPart;
   /** Render the existing Activity disclosure expanded initially. */
   defaultOpen?: boolean;
   /**
@@ -30,4 +28,4 @@ declare function ToolInvocation({
   isStreaming
 }: ToolInvocationProps): import("react").JSX.Element;
 //#endregion
-export { ToolInvocation, ToolInvocationPart, ToolInvocationProps };
+export { ToolInvocation, ToolInvocationProps };

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

@@ -1,12 +1,12 @@
 import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { a as formatUnknownValue } from "../../format-DB2mX9DA.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";
 import { getToolName } from "ai";
 //#region src/components/ai-sdk/ToolInvocation.tsx
 function formatToolValue(value) {
-	if (value === void 0) return void 0;
-	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+	return value === void 0 ? void 0 : formatUnknownValue(value, 2);
 }
 function describeToolPart(part) {
 	const name = getToolDisplayName(part);

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-B1Qw05te.js";
 import { Button } from "../foundations/Button.js";
-import { u as ModelSelectorLogo } from "../../ModelSelector-DzdEs2fX.js";
+import { t as ProviderLogo } from "../../provider-logos-zjZycgV6.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/extension/ChatGptSignInScreen.tsx
@@ -47,7 +47,7 @@ function ChatGptSignInScreen({ busy = false, error = false, label = "Sign in wit
 				onPointerMove: handleSignInButtonPointerMove,
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "chatgpt-sign-in__button-icon",
-					children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 16 }) : /* @__PURE__ */ jsx(ModelSelectorLogo, {
+					children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 16 }) : /* @__PURE__ */ jsx(ProviderLogo, {
 						provider: "openai",
 						className: "chatgpt-sign-in__logo"
 					})

package/dist/components/extension/CodexModelSelector.d.ts

@@ -1,4 +1,4 @@
-import { d as MenuProps } from "../../Menu-DVmjBIuM.js";
+import { d as MenuProps } from "../../Menu-yb6QXWA3.js";
 import { CodexModel } from "../../utils/codex-model-catalog.js";
 import * as React from "react";
 

package/dist/components/extension/CodexModelSelector.js

@@ -1,7 +1,7 @@
 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-B1Qw05te.js";
 import { Tooltip } from "../foundations/Tooltip.js";
-import { a as titleCase } from "../../format-CmopcfqJ.js";
+import { o as titleCase } from "../../format-DB2mX9DA.js";
 import { Menu } from "../foundations/Menu.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/extension/ConversationTabPicker.js

@@ -1,7 +1,7 @@
 import { tt as WarningIcon } from "../../icons-B1Qw05te.js";
 import { Avatar } from "../foundations/Avatar.js";
 import { Button } from "../foundations/Button.js";
-import { i as formatErrorMessage } from "../../format-CmopcfqJ.js";
+import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { Menu } from "../foundations/Menu.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -43,14 +43,12 @@ declare function AccordionItem({
 }: AccordionItemProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
+/** The semantic heading that owns an AccordionItem's trigger. */
 declare function AccordionHeader({
   className,
   ref,
   ...props
 }: AccordionHeaderProps): React.JSX.Element;
-/**
- * The header/trigger that toggles an AccordionItem.
- */
 /**
  * The clickable trigger button within an AccordionItem.
  */

package/dist/components/foundations/Accordion.js

@@ -43,6 +43,7 @@ function AccordionItem({ className, ref, ...props }) {
 		...props
 	});
 }
+/** The semantic heading that owns an AccordionItem's trigger. */
 function AccordionHeader({ className, ref, ...props }) {
 	const classes = mergeBaseClassName("accordion__header", className);
 	return /* @__PURE__ */ jsx(Accordion$1.Header, {
@@ -53,9 +54,6 @@ function AccordionHeader({ className, ref, ...props }) {
 	});
 }
 /**
-* The header/trigger that toggles an AccordionItem.
-*/
-/**
 * The clickable trigger button within an AccordionItem.
 */
 function AccordionTrigger({ className, ref, ...props }) {