@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/components/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-Co1noLbC.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-Bfp5PAg3.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/CodexModelSelector.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { R as RefreshIcon, c as ChevronDownIcon, s as CheckIcon, u as ChevronRightIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { H as RefreshIcon, f as ChevronRightIcon, l as CheckIcon, u as ChevronDownIcon } from "../icons-CQJ-aMnI.js";
 import { Menu } from "./Menu.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/Collapsible.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 { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
@@ -42,7 +42,7 @@ function CollapsibleTrigger({ className, unstyled = false, ref, ...props }) {
 * Supports CSS animations via `--collapsible-panel-height` variable.
 */
 function CollapsiblePanel({ className, unstyled = false, ref, ...props }) {
-	const classes = mergeBaseClassName(["base-ui-collapsible-panel", !unstyled && "collapsible__panel"].filter(Boolean).join(" "), className);
+	const classes = mergeBaseClassName(["base-ui-disclosure-panel", !unstyled && "collapsible__panel"].filter(Boolean).join(" "), className);
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		ref,
 		"data-slot": "collapsible-content",

package/dist/components/Combobox.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 { Combobox as Combobox$1 } from "@base-ui/react/combobox";

package/dist/components/Commit.d.ts

@@ -1,5 +1,5 @@
 import { t as Collapsible } from "../Collapsible-N64ASIQr.js";
-import { t as CopyButtonProps } from "../copy-button-CQx3LQAC.js";
+import { t as CopyButtonProps } from "../copy-button-D7aAYA-2.js";
 import * as React from "react";
 
 //#region src/components/Commit.d.ts

package/dist/components/Commit.js

@@ -1,7 +1,7 @@
-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 { u as ChevronRightIcon, y as FileIcon } from "../icons--FqCZEc3.js";
-import { t as CopyButton } from "../copy-button-cYsJBauI.js";
+import { f as ChevronRightIcon, x as FileIcon } from "../icons-CQJ-aMnI.js";
+import { t as CopyButton } from "../copy-button-DeK6KXEV.js";
 import { Badge } from "./Badge.js";
 import { Avatar } from "./Avatar.js";
 import "react";

package/dist/components/Context.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 { Popover } from "./Popover.js";
 import { Separator } from "./Separator.js";
 import * as React from "react";

package/dist/components/ContextMenu.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 { g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/components/Conversation.d.ts

@@ -1,4 +1,4 @@
-import { t as Button } from "../Button-FX_hpqxm.js";
+import { t as Button } from "../Button-DLGzHsjc.js";
 import { MessageScrollerButtonProps, MessageScrollerItemProps } from "./MessageScroller.js";
 import * as React from "react";
 import { UIMessage } from "ai";

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { h as DownloadIcon, t as ArrowDownIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { _ as DownloadIcon, n as ArrowDownIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from "./MessageScroller.js";
 import * as React from "react";
@@ -119,7 +119,7 @@ function ConversationEmptyState({ className, title = "No messages yet", descript
 * Floating button that scrolls the conversation to the latest message.
 * Hidden from view and tab order while the viewport is already at the end.
 */
-function ConversationScrollButton({ className, variant = "outline", color = "neutral", size = "icon", label = "Scroll to latest", children, ...props }) {
+function ConversationScrollButton({ className, variant = "outline", color = "neutral", size = "sm", label = "Scroll to latest", children, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScrollerButton, {
 		variant,
 		color,
@@ -154,7 +154,7 @@ function messagesToMarkdown(messages, formatMessage = defaultFormatMessage) {
 * Skipped when `messages` is empty. For custom export flows, use
 * {@link messagesToMarkdown} directly.
 */
-function ConversationDownload({ className, messages, filename = "conversation.md", formatMessage, label = "Download conversation", variant = "outline", color = "neutral", size = "icon", children, ref, ...props }) {
+function ConversationDownload({ className, messages, filename = "conversation.md", formatMessage, label = "Download conversation", variant = "outline", color = "neutral", size = "sm", children, ref, ...props }) {
 	if (messages.length === 0) return null;
 	const handleClick = () => {
 		const markdown = messagesToMarkdown(messages, formatMessage);
@@ -174,6 +174,7 @@ function ConversationDownload({ className, messages, filename = "conversation.md
 		variant,
 		color,
 		size,
+		iconOnly: true,
 		className: cx("conversation__download-button", className),
 		"aria-label": label,
 		onClick: handleClick,

package/dist/components/DescriptionListParts.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 "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DescriptionListParts.tsx

package/dist/components/Dialog.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 { Dialog as Dialog$1 } from "@base-ui/react/dialog";

package/dist/components/EnvironmentVariables.d.ts

@@ -1,4 +1,4 @@
-import { t as CopyButtonProps } from "../copy-button-CQx3LQAC.js";
+import { t as CopyButtonProps } from "../copy-button-D7aAYA-2.js";
 import * as React from "react";
 
 //#region src/components/EnvironmentVariables.d.ts

package/dist/components/EnvironmentVariables.js

@@ -1,6 +1,6 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { _ as EyeIcon, v as EyeOffIcon } from "../icons--FqCZEc3.js";
-import { t as CopyButton } from "../copy-button-cYsJBauI.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { b as EyeOffIcon, y as EyeIcon } from "../icons-CQJ-aMnI.js";
+import { t as CopyButton } from "../copy-button-DeK6KXEV.js";
 import { Badge } from "./Badge.js";
 import { Switch } from "./Switch.js";
 import * as React from "react";

package/dist/components/Field.js

@@ -1,4 +1,4 @@
-import { n as mergeBaseClassName, t as cx } from "../class-names-Bk-QLWWI.js";
+import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field as Field$1 } from "@base-ui/react/field";
@@ -128,7 +128,10 @@ function FieldError({ className, children, ref, ...props }) {
 	});
 }
 function FieldErrors({ className = "", errors, children, ref, ...props }) {
-	const messages = [...new Set(errors.map((error) => typeof error === "string" ? error : error?.message).filter(Boolean))];
+	const messages = [...new Set(errors.flatMap((error) => {
+		const message = typeof error === "string" ? error : error?.message;
+		return message ? [message] : [];
+	}))];
 	const content = children ?? (messages.length === 1 ? messages[0] : messages.length > 1 ? /* @__PURE__ */ jsx("ul", {
 		className: "field__error-list",
 		children: messages.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message))

package/dist/components/Fieldset.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 { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";

package/dist/components/FileTree.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 
 //#region src/components/FileTree.d.ts
 interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Visual treatment for the tree container. Plain trees inherit their surrounding canvas. */
+  appearance?: "contained" | "plain";
   /** Set of folder paths that should be expanded. Controlled mode. */
   expanded?: Set<string>;
   /** Initial set of expanded folder paths. Uncontrolled mode. */
@@ -33,6 +35,7 @@ interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSe
  * ```
  */
 declare function FileTree({
+  appearance,
   className,
   "aria-label": ariaLabel,
   expanded,
@@ -70,6 +73,8 @@ interface FileTreeFileProps extends React.HTMLAttributes<HTMLLIElement> {
   name: string;
   /** Optional custom icon; defaults to a generic file icon. */
   icon?: React.ReactNode;
+  /** App-owned anchor or router Link when selecting the file navigates. */
+  render?: React.ReactElement;
   /** Depth level, auto-set by parent folder. */
   level?: number;
 }
@@ -78,6 +83,7 @@ declare function FileTreeFile({
   path,
   name,
   icon,
+  render,
   level,
   ref,
   ...props

package/dist/components/FileTree.js

@@ -1,2 +1,2 @@
-import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-B7bBsUyU.js";
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-3zYtrddG.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/Form.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 { Form as Form$1 } from "@base-ui/react/form";

package/dist/components/GithubMotionMark.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 { jsx } from "react/jsx-runtime";
 //#region src/components/GithubMotionMark.tsx
 /**

package/dist/components/IconButton.d.ts

@@ -1,8 +1,7 @@
-import { i as ButtonSize, r as ButtonProps } from "../Button-FX_hpqxm.js";
+import { i as ButtonSize, r as ButtonProps } from "../Button-DLGzHsjc.js";
 import * as React from "react";
 
 //#region src/components/IconButton.d.ts
-type IconButtonSize = Extract<ButtonSize, "icon" | "icon-xs" | "icon-sm" | "icon-lg">;
 interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" | "size"> {
   /** Decorative icon rendered inside the square button. */
   children: React.ReactNode;
@@ -13,7 +12,7 @@ interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" |
   /** Preferred side for the tooltip. */
   tooltipSide?: "top" | "right" | "bottom" | "left";
   /** Square button size. */
-  size?: IconButtonSize;
+  size?: ButtonSize;
 }
 /**
  * A square, icon-only button with a required accessible name and matching

package/dist/components/IconButton.js

@@ -8,11 +8,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * tooltip. Use text buttons for actions whose consequence an icon cannot make
 * clear on its own.
 */
-function IconButton({ children, label, size = "icon-sm", tooltip = label, tooltipSide = "top", type = "button", ...props }) {
+function IconButton({ children, label, size = "sm", tooltip = label, tooltipSide = "top", type = "button", ...props }) {
 	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
 		render: /* @__PURE__ */ jsx(Button, {
 			type,
 			size,
+			iconOnly: true,
 			"aria-label": label,
 			...props
 		}),

package/dist/components/InlineCitation.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 { Popover } from "./Popover.js";
 import { PreviewCard } from "./PreviewCard.js";
 import "react";

package/dist/components/Input.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 { Input as Input$1 } from "@base-ui/react/input";

package/dist/components/Marker.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 { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/McpConnectionRequest.js

@@ -1,5 +1,5 @@
-import { t as cx } from "../class-names-Bk-QLWWI.js";
-import { E as McpIcon, J as WarningIcon, V as SpinnerIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon, Z as WarningIcon, k as McpIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import { Button } from "./Button.js";
 import { AgentAttention, AgentAttentionActions, AgentAttentionBody, AgentAttentionHeader } from "./AgentAttention.js";
 import { getMcpServerEntry, getMcpServerRuntimeState } from "../utils/mcp-server-catalog.js";

package/dist/components/McpServerPicker.js

@@ -1,5 +1,5 @@
-import { n as mergeBaseClassName } from "../class-names-Bk-QLWWI.js";
-import { J as WarningIcon, V as SpinnerIcon, k as MinusIcon, s as CheckIcon } from "../icons--FqCZEc3.js";
+import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
+import { G as SpinnerIcon, M as MinusIcon, Z as WarningIcon, l as CheckIcon } from "../icons-CQJ-aMnI.js";
 import { buttonVariants } from "./Button.js";
 import { Dialog } from "./Dialog.js";
 import { Menu } from "./Menu.js";

package/dist/components/MediaPreviewCard.d.ts

@@ -0,0 +1,103 @@
+import { CardProps } from "./Card.js";
+import * as React from "react";
+
+//#region src/components/MediaPreviewCard.d.ts
+interface MediaPreviewCardProps extends Omit<CardProps, "hover"> {}
+/**
+ * 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.
+ */
+declare function MediaPreviewCard({
+  children,
+  className,
+  onBlurCapture,
+  onFocusCapture,
+  onPointerEnter,
+  onPointerLeave,
+  ref,
+  ...props
+}: MediaPreviewCardProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+type FixedVideoProps = "autoPlay" | "controls" | "loop" | "muted" | "playsInline" | "preload";
+interface MediaPreviewCardVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, FixedVideoProps> {
+  /** Lightweight still frame displayed until the user shows intent. */
+  poster: string;
+  /** Intrinsic media width used to reserve layout space. */
+  width: number;
+  /** Intrinsic media height used to reserve layout space. */
+  height: number;
+}
+/**
+ * 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.
+ */
+declare function MediaPreviewCardVideo({
+  children,
+  className,
+  height,
+  onEnded,
+  onPause,
+  onPlaying,
+  poster,
+  ref,
+  style,
+  width,
+  ...props
+}: MediaPreviewCardVideoProps & {
+  ref?: React.Ref<HTMLVideoElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * 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.
+ */
+declare function MediaPreviewCardActions({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardActionsProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * 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.
+ */
+declare function MediaPreviewCardPlaceholder({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardPlaceholderProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardMetaProps extends React.HTMLAttributes<HTMLDivElement> {}
+/** Compact facts shown immediately below a preview. */
+declare function MediaPreviewCardMeta({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardMetaProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+interface MediaPreviewCardFactProps extends React.HTMLAttributes<HTMLSpanElement> {}
+/** A single icon-led fact inside MediaPreviewCardMeta. */
+declare function MediaPreviewCardFact({
+  className,
+  ref,
+  ...props
+}: MediaPreviewCardFactProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+//#endregion
+export { MediaPreviewCard, MediaPreviewCardActions, MediaPreviewCardActionsProps, MediaPreviewCardFact, MediaPreviewCardFactProps, MediaPreviewCardMeta, MediaPreviewCardMetaProps, MediaPreviewCardPlaceholder, MediaPreviewCardPlaceholderProps, MediaPreviewCardProps, MediaPreviewCardVideo, MediaPreviewCardVideoProps };

package/dist/components/MediaPreviewCard.js

@@ -0,0 +1,193 @@
+import { t as cx } from "../class-names-BiMDVpUo.js";
+import { z as PlayIcon } from "../icons-CQJ-aMnI.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 { g as DotIcon, l as CheckIcon } from "../icons-CQJ-aMnI.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-BXtmfc9Q.js";
 export { Message, MessageAction, MessageActions, MessageAttachment, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar };