@mcp-b/react-components 0.17.0 → 0.19.0

package/dist/components/MediaPreviewCard.js

@@ -0,0 +1,193 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { B as PlayIcon } from "../icons-DKXiSepE.js";
+import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
+import { Card } from "./Card.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/MediaPreviewCard.tsx
+const MediaPreviewCardContext = React.createContext(null);
+function useMediaPreviewCardContext() {
+	const context = React.useContext(MediaPreviewCardContext);
+	if (!context) throw new Error("MediaPreviewCardVideo must be rendered inside MediaPreviewCard.");
+	return context;
+}
+/**
+* A media-led card that plays its decorative preview only while a mouse is
+* hovering the card or keyboard focus is within it. The preview pauses and
+* resets when both forms of intent leave, and remains poster-only when the
+* user prefers reduced motion.
+*
+* Keep routing and product data in the consumer. Place its link and ordinary
+* Card content inside this root so the entire composition keeps native link
+* semantics.
+*/
+function MediaPreviewCard({ children, className, onBlurCapture, onFocusCapture, onPointerEnter, onPointerLeave, ref, ...props }) {
+	const videoRef = React.useRef(null);
+	const pointerInsideRef = React.useRef(false);
+	const focusInsideRef = React.useRef(false);
+	const [playing, setPlaying] = React.useState(false);
+	const stopPreview = React.useCallback(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		video.pause();
+		if (video.readyState >= HTMLMediaElement.HAVE_METADATA) try {
+			video.currentTime = 0;
+		} catch {}
+		setPlaying(false);
+	}, []);
+	const startPreview = React.useCallback(() => {
+		const video = videoRef.current;
+		if (!video || typeof window !== "undefined" && (window.matchMedia("(prefers-reduced-motion: reduce)").matches || document.documentElement.dataset.motion === "reduce")) return;
+		video.play().catch(() => {
+			setPlaying(false);
+		});
+	}, []);
+	React.useEffect(() => {
+		const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+		const root = document.documentElement;
+		const stopWhenReduced = () => {
+			if (media.matches || root.dataset.motion === "reduce") stopPreview();
+		};
+		const observer = new MutationObserver(stopWhenReduced);
+		media.addEventListener("change", stopWhenReduced);
+		observer.observe(root, { attributeFilter: ["data-motion"] });
+		return () => {
+			media.removeEventListener("change", stopWhenReduced);
+			observer.disconnect();
+		};
+	}, [stopPreview]);
+	const context = React.useMemo(() => ({
+		setPlaying,
+		videoRef
+	}), []);
+	return /* @__PURE__ */ jsx(MediaPreviewCardContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Card, {
+			ref,
+			"data-slot": "media-preview-card",
+			"data-playing": playing ? "true" : "false",
+			className: cx("media-preview-card", className),
+			onPointerEnter: (event) => {
+				onPointerEnter?.(event);
+				if (event.defaultPrevented || event.pointerType !== "mouse") return;
+				pointerInsideRef.current = true;
+				startPreview();
+			},
+			onPointerLeave: (event) => {
+				onPointerLeave?.(event);
+				if (event.defaultPrevented) return;
+				pointerInsideRef.current = false;
+				if (!focusInsideRef.current) stopPreview();
+			},
+			onFocusCapture: (event) => {
+				onFocusCapture?.(event);
+				if (event.defaultPrevented) return;
+				focusInsideRef.current = true;
+				startPreview();
+			},
+			onBlurCapture: (event) => {
+				onBlurCapture?.(event);
+				if (event.defaultPrevented) return;
+				if (event.currentTarget.contains(event.relatedTarget)) return;
+				focusInsideRef.current = false;
+				if (!pointerInsideRef.current) stopPreview();
+			},
+			...props,
+			children
+		})
+	});
+}
+/**
+* Decorative, silent preview media for MediaPreviewCard. Native source
+* children allow callers to provide WebM followed by MP4 without the design
+* system owning storage or URLs.
+*/
+function MediaPreviewCardVideo({ children, className, height, onEnded, onPause, onPlaying, poster, ref, style, width, ...props }) {
+	const { setPlaying, videoRef } = useMediaPreviewCardContext();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "media-preview-card-media",
+		className: "media-preview-card__media",
+		style: { "--media-preview-card-aspect-ratio": `${width} / ${height}` },
+		children: [/* @__PURE__ */ jsx("video", {
+			...props,
+			ref: mergeRefs(ref, (node) => {
+				videoRef.current = node;
+			}),
+			"data-slot": "media-preview-card-video",
+			className: cx("media-preview-card__video", className),
+			style,
+			poster,
+			width,
+			height,
+			muted: true,
+			loop: true,
+			playsInline: true,
+			preload: "none",
+			"aria-hidden": "true",
+			onPlaying: (event) => {
+				setPlaying(true);
+				onPlaying?.(event);
+			},
+			onPause: (event) => {
+				setPlaying(false);
+				onPause?.(event);
+			},
+			onEnded: (event) => {
+				setPlaying(false);
+				onEnded?.(event);
+			},
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			className: "media-preview-card__play",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(PlayIcon, {})
+		})]
+	});
+}
+/**
+* Positions sibling controls above the preview without nesting them inside the
+* card's primary link. Use this slot for compact secondary actions such as a
+* menu trigger; the consumer remains responsible for each control's behavior
+* and accessible name.
+*/
+function MediaPreviewCardActions({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "media-preview-card-actions",
+		className: cx("media-preview-card__actions", className),
+		...props
+	});
+}
+/**
+* Reserves the same frame as preview media when a card has no poster or video.
+* Keep any explanatory copy visually hidden so the quiet fallback remains
+* useful without competing with the card title.
+*/
+function MediaPreviewCardPlaceholder({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "media-preview-card-placeholder",
+		className: cx("media-preview-card__placeholder", className),
+		...props
+	});
+}
+/** Compact facts shown immediately below a preview. */
+function MediaPreviewCardMeta({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "media-preview-card-meta",
+		className: cx("media-preview-card__meta", className),
+		...props
+	});
+}
+/** A single icon-led fact inside MediaPreviewCardMeta. */
+function MediaPreviewCardFact({ className, ref, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		"data-slot": "media-preview-card-fact",
+		className: cx("media-preview-card__fact", className),
+		...props
+	});
+}
+//#endregion
+export { MediaPreviewCard, MediaPreviewCardActions, MediaPreviewCardFact, MediaPreviewCardMeta, MediaPreviewCardPlaceholder, MediaPreviewCardVideo };

package/dist/components/Menu.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Menu as Menu$1 } from "@base-ui/react/menu";

package/dist/components/Menubar.js

@@ -1,5 +1,5 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
-import { m as DotIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { _ as DotIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

package/dist/components/Message.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
 import * as React from "react";
 import { FileUIPart, UIMessage } from "ai";
 import { StreamdownProps } from "streamdown";
@@ -128,6 +128,8 @@ declare function MessageToolbar({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface MessageBranchProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of response branches rendered by MessageBranchContent. */
+  branchCount: number;
   /** Zero-based index of the initially selected branch. */
   defaultBranch?: number;
   /** Controlled branch index. */
@@ -142,6 +144,7 @@ interface MessageBranchProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare function MessageBranch({
   className,
+  branchCount,
   defaultBranch,
   branch,
   onBranchChange,

package/dist/components/Message.js

@@ -1,2 +1,2 @@
-import { a as MessageBranch, c as MessageBranchPage, d as MessageContent, f as MessageResponse, i as MessageAttachment, l as MessageBranchPrevious, n as MessageAction, o as MessageBranchContent, p as MessageToolbar, r as MessageActions, s as MessageBranchNext, t as Message, u as MessageBranchSelector } from "../Message-C4eYRogZ.js";
+import { a as MessageBranch, c as MessageBranchPage, d as MessageContent, f as MessageResponse, i as MessageAttachment, l as MessageBranchPrevious, n as MessageAction, o as MessageBranchContent, p as MessageToolbar, r as MessageActions, s as MessageBranchNext, t as Message, u as MessageBranchSelector } from "../Message-rZEaaD8Q.js";
 export { Message, MessageAction, MessageActions, MessageAttachment, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };

package/dist/components/MessageScroller.d.ts

@@ -1,4 +1,4 @@
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
 import * as React from "react";
 import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
 

package/dist/components/MessageScroller.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { t as ArrowDownIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { n as ArrowDownIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -41,7 +41,7 @@ function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
 		...props
 	});
 }
-function MessageScrollerButton({ className, children, color = "neutral", direction = "end", render, size = "icon-sm", variant = "normal", ...props }) {
+function MessageScrollerButton({ className, children, color = "neutral", direction = "end", render, size = "sm", variant = "normal", ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Button, {
 		"data-slot": "message-scroller-button",
 		direction,
@@ -49,7 +49,8 @@ function MessageScrollerButton({ className, children, color = "neutral", directi
 		render: render ?? /* @__PURE__ */ jsx(Button, {
 			color,
 			size,
-			variant
+			variant,
+			iconOnly: true
 		}),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ArrowDownIcon, {}), /* @__PURE__ */ jsx("span", {

package/dist/components/Meter.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Meter as Meter$1 } from "@base-ui/react/meter";

package/dist/components/ModelSelector.d.ts

@@ -1,4 +1,5 @@
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
+import { DialogProps } from "./Dialog.js";
 import { SeparatorProps } from "./Separator.js";
 import * as React from "react";
 import Cloudflare from "cloudflare";
@@ -54,8 +55,8 @@ interface ModelSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
   open?: boolean;
   /** Initial dialog open state for uncontrolled usage. */
   defaultOpen?: boolean;
-  /** Called when the dialog opens or closes. */
-  onOpenChange?: (open: boolean) => void;
+  /** Receives Base UI's full open-change event details. */
+  onOpenChange?: DialogProps["onOpenChange"];
   /** Additional class names for layout only; do not restyle dialog internals from apps. */
   className?: string;
   /** Trigger, content, search input, grouped list, and items. */

package/dist/components/ModelSelector.js

@@ -1,2 +1,2 @@
-import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-BNrZlY_Y.js";
+import { _ as getCloudflareModelProvider, a as ModelSelectorEmpty, b as normalizeCloudflareModelSelectorModels, c as ModelSelectorItem, d as ModelSelectorLogoGroup, f as ModelSelectorName, g as formatCloudflareModelProvider, h as ModelSelectorTrigger, i as ModelSelectorDialog, l as ModelSelectorList, m as ModelSelectorShortcut, n as ModelSelector, o as ModelSelectorGroup, p as ModelSelectorSeparator, r as ModelSelectorContent, s as ModelSelectorInput, t as CloudflareModelSelector, u as ModelSelectorLogo, v as isCloudflareRunnableModelId, x as readCloudflareModelId, y as listCloudflareModelSelectorOptions } from "../ModelSelector-4GsCWcZV.js";
 export { CloudflareModelSelector, ModelSelector, ModelSelectorContent, ModelSelectorDialog, ModelSelectorEmpty, ModelSelectorGroup, ModelSelectorInput, ModelSelectorItem, ModelSelectorList, ModelSelectorLogo, ModelSelectorLogoGroup, ModelSelectorName, ModelSelectorSeparator, ModelSelectorShortcut, ModelSelectorTrigger, formatCloudflareModelProvider, getCloudflareModelProvider, isCloudflareRunnableModelId, listCloudflareModelSelectorOptions, normalizeCloudflareModelSelectorModels, readCloudflareModelId };

package/dist/components/NavigationMenu.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";

package/dist/components/NumberField.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { NumberField as NumberField$1 } from "@base-ui/react/number-field";

package/dist/components/Plan.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { m as DotIcon, r as ArrowRightIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { _ as DotIcon, i as ArrowRightIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Plan.tsx

package/dist/components/Popover.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";

package/dist/components/PreviewCard.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";

package/dist/components/PricingBillingToggle.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Badge } from "./Badge.js";
 import { Checkbox } from "./Checkbox.js";
 import { Switch } from "./Switch.js";

package/dist/components/PricingFAQ.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Accordion } from "./Accordion.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/PricingPage.js

@@ -7,6 +7,7 @@ import { PricingUsageCalculator } from "./PricingUsageCalculator.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PricingPage.tsx
+const EMPTY_USAGE_TIERS = [];
 /**
 * A comprehensive pricing page component that demonstrates all pricing-related
 * components working together.
@@ -28,7 +29,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 * ```
 */
-function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, faq, showUsageCalculator = false, usageTiers = [], maxUsage = 1e5, usageUnit = "API calls", onSelectPlan, onConfirmUpgrade, className = "", billingToggleVariant, productIds, currentProductId, isSubscribed = false, checkoutUrl = "/api/checkout", switchPlanUrl = "/api/switch-plan", portalUrl = "/api/portal", isLoggedIn = false, loginUrl = "/auth/login", hasPolarAccount = false, onCheckout, onSwitchPlan, onPortalRedirect }) {
+function PricingPage({ title = "Simple, transparent pricing", subtitle, plans, faq, showUsageCalculator = false, usageTiers = EMPTY_USAGE_TIERS, maxUsage = 1e5, usageUnit = "API calls", onSelectPlan, onConfirmUpgrade, className = "", billingToggleVariant, productIds, currentProductId, isSubscribed = false, checkoutUrl = "/api/checkout", switchPlanUrl = "/api/switch-plan", portalUrl = "/api/portal", isLoggedIn = false, loginUrl = "/auth/login", hasPolarAccount = false, onCheckout, onSwitchPlan, onPortalRedirect }) {
 	const [billingPeriod, setBillingPeriod] = React.useState("monthly");
 	const [selectedPlan, setSelectedPlan] = React.useState(null);
 	const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false);

package/dist/components/PricingPlanCard.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { C as InfoIcon, k as MinusIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { D as InfoIcon, N as MinusIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { Separator } from "./Separator.js";
@@ -94,7 +94,8 @@ function PricingPlanCard({ plan, billingPeriod, action = "select", onSelect, cla
 							render: /* @__PURE__ */ jsx(Button, {
 								variant: "ghost",
 								color: "neutral",
-								size: "icon-sm",
+								size: "sm",
+								iconOnly: true,
 								"aria-label": `More information about ${feature.name}`
 							}),
 							children: /* @__PURE__ */ jsx(InfoIcon, { size: 14 })

package/dist/components/PricingUsageCalculator.js

@@ -1,4 +1,4 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Separator } from "./Separator.js";
 import { Progress } from "./Progress.js";
 import { Slider } from "./Slider.js";
@@ -9,7 +9,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PricingUsageCalculator.tsx
 /** Self-contained usage estimator composed from Card, Slider, Progress, and Separator. */
 function PricingUsageCalculator({ usageTiers, maxUsage = 1e5, usageUnit = "API calls", defaultUsage = 5e4, className }) {
-	const [usage, setUsage] = React.useState(Math.min(defaultUsage, maxUsage));
+	const [usage, setUsage] = React.useState(() => Math.min(defaultUsage, maxUsage));
 	return /* @__PURE__ */ jsxs(Card, {
 		className: cx("pricing-page__calculator", className),
 		children: [

package/dist/components/Progress.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Progress as Progress$1 } from "@base-ui/react/progress";

package/dist/components/PromptInput.d.ts

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

package/dist/components/PromptInput.js

@@ -1,5 +1,5 @@
-import { n as mergeBaseClassName, t as cx } from "../class-names-Bk-QLWWI.js";
-import { A as MonitorIcon, H as SquareIcon, I as PlusIcon, J as WarningIcon, M as PaperclipIcon, O as MicrophoneIcon, V as SpinnerIcon, W as StopIcon, X as XIcon, Y as WrenchIcon, b as FolderIcon, c as ChevronDownIcon, i as ArrowUpIcon, s as CheckIcon, y as FileIcon } from "../icons--FqCZEc3.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
+import { $ as WrenchIcon, C as FolderIcon, J as StopIcon, K as SpinnerIcon, L as PaperclipIcon, M as MicrophoneIcon, P as MonitorIcon, Q as WarningIcon, S as FileIcon, V as PlusIcon, a as ArrowUpIcon, d as ChevronDownIcon, et as XIcon, q as SquareIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import { Tooltip } from "./Tooltip.js";
 import { t as AttachmentPreview } from "../attachment-preview-DIs50Q0h.js";
@@ -41,7 +41,9 @@ function PromptInputProvider({ initialInput = "", children }) {
 	const fileInputRef = React.useRef(null);
 	const openRef = React.useRef(() => {});
 	const attachmentsRef = React.useRef(attachmentFiles);
-	attachmentsRef.current = attachmentFiles;
+	React.useEffect(() => {
+		attachmentsRef.current = attachmentFiles;
+	}, [attachmentFiles]);
 	React.useEffect(() => () => {
 		revokeFileUrls(attachmentsRef.current);
 	}, []);
@@ -131,7 +133,9 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 	const [localFiles, setLocalFiles] = React.useState([]);
 	const files = controller?.attachments.files ?? localFiles;
 	const filesRef = React.useRef(files);
-	filesRef.current = files;
+	React.useEffect(() => {
+		filesRef.current = files;
+	}, [files]);
 	React.useImperativeHandle(ref, () => formRef.current, []);
 	React.useEffect(() => () => {
 		if (!usingProvider) revokeFileUrls(filesRef.current);
@@ -174,6 +178,7 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 		maxFiles,
 		onError
 	]);
+	const addDroppedFiles = React.useEffectEvent(add);
 	const remove = React.useCallback((attachmentId) => {
 		if (controller) {
 			controller.attachments.remove(attachmentId);
@@ -213,7 +218,7 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 		const onDrop = (event) => {
 			const dragEvent = event;
 			if (dragEvent.dataTransfer?.types.includes("Files")) dragEvent.preventDefault();
-			if (dragEvent.dataTransfer?.files?.length) add(dragEvent.dataTransfer.files);
+			if (dragEvent.dataTransfer?.files?.length) addDroppedFiles(dragEvent.dataTransfer.files);
 		};
 		target.addEventListener("dragover", onDragOver);
 		target.addEventListener("drop", onDrop);
@@ -221,7 +226,7 @@ function PromptInput({ className, accept, multiple, globalDrop, syncHiddenInput,
 			target.removeEventListener("dragover", onDragOver);
 			target.removeEventListener("drop", onDrop);
 		};
-	}, [add, globalDrop]);
+	}, [globalDrop]);
 	const attachmentsCtx = React.useMemo(() => ({
 		add,
 		clear: clearAttachments,
@@ -373,7 +378,7 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 	const controller = useOptionalPromptInputController();
 	const attachments = usePromptInputAttachments();
 	const innerRef = React.useRef(null);
-	const [isComposing, setIsComposing] = React.useState(false);
+	const isComposingRef = React.useRef(false);
 	React.useImperativeHandle(ref, () => innerRef.current, []);
 	const resize = React.useCallback(() => {
 		const el = innerRef.current;
@@ -406,17 +411,17 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 		placeholder,
 		rows,
 		onCompositionEnd: (event) => {
-			setIsComposing(false);
+			isComposingRef.current = false;
 			onCompositionEnd?.(event);
 		},
 		onCompositionStart: (event) => {
-			setIsComposing(true);
+			isComposingRef.current = true;
 			onCompositionStart?.(event);
 		},
 		onKeyDown: (event) => {
 			onKeyDown?.(event);
 			if (event.defaultPrevented) return;
-			if (event.key === "Enter" && !event.shiftKey && !isComposing && !event.nativeEvent.isComposing) {
+			if (event.key === "Enter" && !event.shiftKey && !isComposingRef.current && !event.nativeEvent.isComposing) {
 				event.preventDefault();
 				event.currentTarget.form?.requestSubmit();
 			}
@@ -448,8 +453,10 @@ function PromptInputTextarea({ className, placeholder = "How can I help?", rows
 		...controlledProps
 	});
 }
-function PromptInputButton({ className, tooltip, variant = "ghost", color = "neutral", size, children, "aria-label": ariaLabel, ref, ...props }) {
-	const resolvedSize = size ?? (React.Children.count(children) > 1 ? "xs" : "icon-xs");
+function PromptInputButton({ className, tooltip, variant = "ghost", color = "neutral", size, iconOnly, children, "aria-label": ariaLabel, ref, ...props }) {
+	const childCount = React.Children.count(children);
+	const resolvedSize = size ?? "xs";
+	const resolvedIconOnly = iconOnly ?? childCount <= 1;
 	const tooltipConfig = typeof tooltip === "string" ? { content: tooltip } : tooltip;
 	const fallbackLabel = ariaLabel ?? (typeof tooltipConfig?.content === "string" ? tooltipConfig.content : void 0);
 	const hasResponsiveLabel = Boolean(tooltipConfig && React.Children.count(children) > 1);
@@ -459,6 +466,7 @@ function PromptInputButton({ className, tooltip, variant = "ghost", color = "neu
 		variant,
 		color,
 		size: resolvedSize,
+		iconOnly: resolvedIconOnly,
 		className: cx("prompt-input__button", className),
 		"aria-label": fallbackLabel,
 		"data-responsive-label": hasResponsiveLabel || void 0,
@@ -593,7 +601,8 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 					type: "button",
 					variant: "normal",
 					color: "neutral",
-					size: "icon",
+					size: "xs",
+					iconOnly: true,
 					"aria-label": "Stop dictation",
 					onClick: () => voice.stop(),
 					children: /* @__PURE__ */ jsx(SquareIcon, { size: 12 })
@@ -602,7 +611,8 @@ function PromptInputDictation({ voice, beforeStart, className, disabled, ref, ..
 					className: "prompt-input__recording-button",
 					type: "button",
 					color: "primary",
-					size: "icon",
+					size: "xs",
+					iconOnly: true,
 					"aria-label": "Stop dictation and send",
 					onClick: () => {
 						submitAfterStopRef.current = true;
@@ -631,7 +641,9 @@ function PromptInputRecordingWaveform({ active, level }) {
 	const containerRef = React.useRef(null);
 	const historyRef = React.useRef([]);
 	const levelRef = React.useRef(level);
-	levelRef.current = level;
+	React.useEffect(() => {
+		levelRef.current = level;
+	}, [level]);
 	React.useEffect(() => {
 		const canvas = canvasRef.current;
 		const container = containerRef.current;
@@ -843,9 +855,9 @@ function PromptInputPermissionSelector({ value, onValueChange, question = "How s
 		})
 	}) }) })] });
 }
-function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "icon-xs", onClick, children, label, allowSubmitWhileBusy = false, hasContent = false, ref, ...props }) {
+function PromptInputSubmit({ className, status = "ready", onStop, variant = "normal", color = "primary", size = "xs", onClick, children, label, hasContent = false, ref, ...props }) {
 	const isBusy = status === "submitted" || status === "streaming";
-	const isQueueing = isBusy && allowSubmitWhileBusy && hasContent;
+	const isQueueing = isBusy && hasContent;
 	const isStopping = isBusy && !isQueueing;
 	const resolvedLabel = label ?? (isQueueing ? "Queue message" : defaultSubmitLabel(status));
 	return /* @__PURE__ */ jsx(Button, {
@@ -854,6 +866,7 @@ function PromptInputSubmit({ className, status = "ready", onStop, variant = "nor
 		variant,
 		color,
 		size,
+		iconOnly: true,
 		className: cx("prompt-input__submit", className),
 		"data-status": status,
 		"aria-label": resolvedLabel,
@@ -1140,7 +1153,7 @@ function PromptInputReferences({ references, onRemove, className, ref, ...props
 			type: "button",
 			variant: "ghost",
 			color: "primary",
-			size: "lg",
+			size: "xs",
 			className: "prompt-input__reference",
 			"aria-label": `Remove ${reference.label}`,
 			onClick: () => onRemove(reference),

package/dist/components/Queue.d.ts

@@ -1,5 +1,5 @@
 import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
-import { r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { r as ButtonProps } from "../Button-DLGzHsjc.js";
 import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";
 

package/dist/components/Queue.js

@@ -1,6 +1,6 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { m as DotIcon, s as CheckIcon, u as ChevronRightIcon, y as FileIcon } from "../icons--FqCZEc3.js";
+import { S as FileIcon, _ as DotIcon, p as ChevronRightIcon, u as CheckIcon } from "../icons-DKXiSepE.js";
 import { Button } from "./Button.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";
@@ -90,7 +90,6 @@ function QueueSectionLabel({ className, children, count, label, icon, ref, ...pr
 			children !== void 0 && count !== void 0 ? /* @__PURE__ */ jsx(Badge, {
 				color: "neutral",
 				size: "sm",
-				className: "queue__section-count",
 				children: count
 			}) : null
 		]

package/dist/components/RadioGroup.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";