@mcp-b/react-components 0.35.0 → 0.37.0

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

@@ -1,6 +1,7 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { n as ArrowDownIcon } from "../../icons-B1Qw05te.js";
+import { n as ArrowDownIcon } from "../../icons-B4mGvCvc.js";
 import { Button } from "../foundations/Button.js";
+import { t as messageScrollerContract } from "../../message-scroller-C8cplcQO.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -37,6 +38,7 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 	const warnedBadKey = React.useRef(false);
 	const [atEnd, setAtEnd] = React.useState(true);
 	const [scrollEdges, setScrollEdges] = React.useState();
+	const { "aria-live": contentAriaLive = "off", "aria-relevant": contentAriaRelevant = messageScrollerContract.content.ariaRelevant, className: contentClassName, role: contentRole = messageScrollerContract.content.role, style: contentStyle, ...resolvedContentProps } = contentProps ?? {};
 	React.useEffect(() => {
 		if (warnedBadKey.current) return;
 		const seen = /* @__PURE__ */ new Set();
@@ -72,28 +74,33 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 		virtualizer.scrollToEnd();
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("message-scroller", className),
+		"data-slot": messageScrollerContract.root.slot,
+		className: cx(messageScrollerContract.root.className, className),
 		...props,
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: viewportRef,
-			"data-slot": "message-scroller-viewport",
+			"aria-label": messageScrollerContract.viewport.ariaLabel,
+			"data-slot": messageScrollerContract.viewport.slot,
 			"data-recipe": "scroll-fade-y",
 			"data-scrollable": scrollEdges,
-			className: "message-scroller__viewport",
+			className: messageScrollerContract.viewport.className,
+			role: messageScrollerContract.viewport.role,
+			tabIndex: messageScrollerContract.viewport.tabIndex,
 			children: items.length === 0 ? emptyState : /* @__PURE__ */ jsx("div", {
-				role: "log",
-				"aria-live": "off",
-				...contentProps,
-				className: cx("message-scroller__virtual-content", contentProps?.className),
+				...resolvedContentProps,
+				"aria-live": contentAriaLive,
+				"aria-relevant": contentAriaRelevant,
+				className: cx(messageScrollerContract.content.virtualClassName, contentClassName),
+				role: contentRole,
 				style: {
-					...contentProps?.style,
+					...contentStyle,
 					height: virtualizer.getTotalSize()
 				},
 				children: virtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsx("div", {
 					ref: virtualizer.measureElement,
 					"data-index": virtualItem.index,
 					"data-item-key": virtualItem.key,
-					className: "message-scroller__virtual-item",
+					className: messageScrollerContract.item.virtualClassName,
 					style: { transform: `translateY(${virtualItem.start}px)` },
 					children: renderItem(items[virtualItem.index], virtualItem.index)
 				}, virtualItem.key))
@@ -105,7 +112,8 @@ function VirtualMessageScroller({ items, getItemKey, renderItem, estimateSize =
 			size: "sm",
 			iconOnly: true,
 			...scrollButtonProps,
-			className: cx("message-scroller__button", scrollButtonProps?.className),
+			className: cx(messageScrollerContract.button.className, scrollButtonProps?.className),
+			"data-slot": messageScrollerContract.button.slot,
 			"data-direction": "end",
 			"data-active": !atEnd,
 			tabIndex: atEnd ? -1 : void 0,

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-B1Qw05te.js";
+import { d as CheckIcon, i as ArrowRightIcon, v as DotIcon } from "../../icons-B4mGvCvc.js";
 import { Popover } from "../foundations/Popover.js";
 import { t as ProgressRing } from "../../progress-ring-BEocM1e3.js";
 import * as React from "react";

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

@@ -1,2 +1,2 @@
-import { $ as PromptInputFooterProps, A as PromptInputCommandEmptyProps, At as PromptInputTabsListProps, B as PromptInputCommandListProps, Bt as TooltipSide, C as PromptInputButtonProps, Ct as PromptInputTabBodyProps, D as PromptInputCommandComposerProps, Dt as PromptInputTabLabelProps, E as PromptInputCommandComposer, Et as PromptInputTabLabel, F as PromptInputCommandInput, Ft as PromptInputTooltipConfig, G as PromptInputContextAction, H as PromptInputCommandSeparator, Ht as usePromptInputController, I as PromptInputCommandInputProps, It as PromptInputTray, J as PromptInputContextSelectorProps, K as PromptInputContextItem, L as PromptInputCommandItem, Lt as PromptInputTrayProps, M as PromptInputCommandGroupLabel, Mt as PromptInputTextareaProps, N as PromptInputCommandGroupLabelProps, Nt as PromptInputTools, O as PromptInputCommandDefinition, Ot as PromptInputTabProps, P as PromptInputCommandGroupProps, Pt as PromptInputToolsProps, Q as PromptInputFooter, R as PromptInputCommandItemProps, Rt as PromptInputVoiceInput, S as PromptInputButton, St as PromptInputTabBody, T as PromptInputCommand, Tt as PromptInputTabItemProps, U as PromptInputCommandSeparatorProps, Ut as useProviderAttachments, V as PromptInputCommandProps, Vt as usePromptInputAttachments, W as PromptInputCommandTrigger, X as PromptInputDictation, Y as PromptInputControllerProps, Z as PromptInputDictationProps, _ as PromptInputAttachmentProps, _t as PromptInputSelect, a as PromptInputActionAddAttachmentsProps, at as PromptInputHoverCardProps, b as PromptInputBody, bt as PromptInputSubmitProps, c as PromptInputActionMenu, ct as PromptInputMessage, d as PromptInputActionMenuItem, dt as PromptInputProps, et as PromptInputHeader, f as PromptInputActionMenuItemProps, ft as PromptInputProvider, g as PromptInputAttachment, gt as PromptInputReferencesProps, h as PromptInputActionMenuTriggerProps, ht as PromptInputReferences, i as PromptInputActionAddAttachments, it as PromptInputHoverCardContentProps, j as PromptInputCommandGroup, jt as PromptInputTextarea, k as PromptInputCommandEmpty, kt as PromptInputTabsList, l as PromptInputActionMenuContent, lt as PromptInputPermissionSelector, m as PromptInputActionMenuTrigger, mt as PromptInputReference, n as PermissionMode, nt as PromptInputHoverCard, o as PromptInputActionAddScreenshot, ot as PromptInputHoverCardTrigger, p as PromptInputActionMenuProps, pt as PromptInputProviderProps, q as PromptInputContextSelector, r as PromptInput, rt as PromptInputHoverCardContent, s as PromptInputActionAddScreenshotProps, st as PromptInputHoverCardTriggerProps, t as AttachmentsContext, tt as PromptInputHeaderProps, u as PromptInputActionMenuContentProps, ut as PromptInputPermissionSelectorProps, v as PromptInputAttachments, vt as PromptInputSelectProps, w as PromptInputButtonTooltip, wt as PromptInputTabItem, x as PromptInputBodyProps, xt as PromptInputTab, y as PromptInputAttachmentsProps, yt as PromptInputSubmit, z as PromptInputCommandList, zt as TextInputContext } from "../../PromptInput-DOyee1kM.js";
-export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommand, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandEmpty, PromptInputCommandEmptyProps, PromptInputCommandGroup, PromptInputCommandGroupLabel, PromptInputCommandGroupLabelProps, PromptInputCommandGroupProps, PromptInputCommandInput, PromptInputCommandInputProps, PromptInputCommandItem, PromptInputCommandItemProps, PromptInputCommandList, PromptInputCommandListProps, PromptInputCommandProps, PromptInputCommandSeparator, PromptInputCommandSeparatorProps, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputReferences, PromptInputReferencesProps, PromptInputSelect, PromptInputSelectProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, usePromptInputAttachments, usePromptInputController, useProviderAttachments };
+import { $ as PromptInputReferences, A as PromptInputContextItem, B as PromptInputHoverCard, C as PromptInputButtonProps, Ct as usePromptInputAttachments, D as PromptInputCommandDefinition, E as PromptInputCommandComposerProps, F as PromptInputDictationProps, G as PromptInputHoverCardTriggerProps, H as PromptInputHoverCardContentProps, I as PromptInputFooter, J as PromptInputPermissionSelectorProps, K as PromptInputMessage, L as PromptInputFooterProps, M as PromptInputContextSelectorProps, N as PromptInputControllerProps, O as PromptInputCommandTrigger, P as PromptInputDictation, Q as PromptInputReference, R as PromptInputHeader, S as PromptInputButton, St as TooltipSide, T as PromptInputCommandComposer, Tt as useProviderAttachments, U as PromptInputHoverCardProps, V as PromptInputHoverCardContent, W as PromptInputHoverCardTrigger, X as PromptInputProvider, Y as PromptInputProps, Z as PromptInputProviderProps, _ as PromptInputAttachmentProps, _t as PromptInputTooltipConfig, a as PromptInputActionAddAttachmentsProps, at as PromptInputTabBodyProps, b as PromptInputBody, bt as PromptInputVoiceInput, c as PromptInputActionMenu, ct as PromptInputTabLabel, d as PromptInputActionMenuItem, dt as PromptInputTabsList, et as PromptInputReferencesProps, f as PromptInputActionMenuItemProps, ft as PromptInputTabsListProps, g as PromptInputAttachment, gt as PromptInputToolsProps, h as PromptInputActionMenuTriggerProps, ht as PromptInputTools, i as PromptInputActionAddAttachments, it as PromptInputTabBody, j as PromptInputContextSelector, k as PromptInputContextAction, l as PromptInputActionMenuContent, lt as PromptInputTabLabelProps, m as PromptInputActionMenuTrigger, mt as PromptInputTextareaProps, n as PermissionMode, nt as PromptInputSubmitProps, o as PromptInputActionAddScreenshot, ot as PromptInputTabItem, p as PromptInputActionMenuProps, pt as PromptInputTextarea, q as PromptInputPermissionSelector, r as PromptInput, rt as PromptInputTab, s as PromptInputActionAddScreenshotProps, st as PromptInputTabItemProps, t as AttachmentsContext, tt as PromptInputSubmit, u as PromptInputActionMenuContentProps, ut as PromptInputTabProps, v as PromptInputAttachments, vt as PromptInputTray, w as PromptInputButtonTooltip, wt as usePromptInputController, x as PromptInputBodyProps, xt as TextInputContext, y as PromptInputAttachmentsProps, yt as PromptInputTrayProps, z as PromptInputHeaderProps } from "../../PromptInput-BRX7FhjH.js";
+export { AttachmentsContext, PermissionMode, PromptInput, PromptInputActionAddAttachments, PromptInputActionAddAttachmentsProps, PromptInputActionAddScreenshot, PromptInputActionAddScreenshotProps, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuContentProps, PromptInputActionMenuItem, PromptInputActionMenuItemProps, PromptInputActionMenuProps, PromptInputActionMenuTrigger, PromptInputActionMenuTriggerProps, PromptInputAttachment, PromptInputAttachmentProps, PromptInputAttachments, PromptInputAttachmentsProps, PromptInputBody, PromptInputBodyProps, PromptInputButton, PromptInputButtonProps, PromptInputButtonTooltip, PromptInputCommandComposer, PromptInputCommandComposerProps, PromptInputCommandDefinition, PromptInputCommandTrigger, PromptInputContextAction, PromptInputContextItem, PromptInputContextSelector, PromptInputContextSelectorProps, PromptInputControllerProps, PromptInputDictation, PromptInputDictationProps, PromptInputFooter, PromptInputFooterProps, PromptInputHeader, PromptInputHeaderProps, PromptInputHoverCard, PromptInputHoverCardContent, PromptInputHoverCardContentProps, PromptInputHoverCardProps, PromptInputHoverCardTrigger, PromptInputHoverCardTriggerProps, PromptInputMessage, PromptInputPermissionSelector, PromptInputPermissionSelectorProps, PromptInputProps, PromptInputProvider, PromptInputProviderProps, PromptInputReference, PromptInputReferences, PromptInputReferencesProps, PromptInputSubmit, PromptInputSubmitProps, PromptInputTab, PromptInputTabBody, PromptInputTabBodyProps, PromptInputTabItem, PromptInputTabItemProps, PromptInputTabLabel, PromptInputTabLabelProps, PromptInputTabProps, PromptInputTabsList, PromptInputTabsListProps, PromptInputTextarea, PromptInputTextareaProps, PromptInputTools, PromptInputToolsProps, PromptInputTooltipConfig, PromptInputTray, PromptInputTrayProps, PromptInputVoiceInput, TextInputContext, TooltipSide, usePromptInputAttachments, usePromptInputController, useProviderAttachments };

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

@@ -1,20 +1,59 @@
 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-B1Qw05te.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 { 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-DB2mX9DA.js";
-import { Combobox } from "../foundations/Combobox.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 { t as AttachmentPreview } from "../../attachment-preview-1CXJvrmb.js";
+import { i as formatErrorMessage, n as clamp, r as formatClock } from "../../format-DB2mX9DA.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

@@ -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";
@@ -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 { J as SpinnerIcon } from "../../icons-B4mGvCvc.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/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