@mcp-b/react-components 0.48.0 → 0.49.1

package/dist/AgentChatQueue-v5890eA1.d.ts

@@ -0,0 +1,48 @@
+import { J as PromptInputMessage } from "./PromptInput-4kCz3T9P.js";
+import * as React from "react";
+import { ChatStatus } from "ai";
+
+//#region src/components/agents-sdk/AgentChatQueue.d.ts
+interface AgentChatQueuedPrompt {
+  id: string;
+  message: PromptInputMessage;
+}
+interface AgentChatQueueProviderProps {
+  /** Keep this owner above navigation when the parent conversation remains active. */
+  children: React.ReactNode;
+  status: ChatStatus;
+  onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
+  onStop?: () => void | Promise<void>;
+  onPromptQueued?: () => void;
+}
+interface AgentChatQueueValue {
+  items: readonly AgentChatQueuedPrompt[];
+  held: boolean;
+  error: string | null;
+  submissionVersion: number;
+  canStop: boolean;
+  canSubmit: boolean;
+  hold: () => void;
+  submit: (message: PromptInputMessage) => void | Promise<void>;
+  /** Capture user intent before asynchronous attachment conversion. */
+  captureSubmit: () => AgentChatQueueValue["submit"];
+  stop: () => Promise<void>;
+  steer: (id: string) => Promise<void>;
+  sendNext: (id?: string) => void;
+  remove: (id: string) => void;
+}
+declare function useOptionalAgentChatQueue(): AgentChatQueueValue | null;
+/**
+ * The queue's single owner, including dispatch reservations and the turn's
+ * busy-to-ready edge. Hoist it with the parent connection to preserve queued
+ * prompts and cancellation holds while the selected child is visible.
+ */
+declare function AgentChatQueueProvider({
+  children,
+  status,
+  onSubmit,
+  onStop,
+  onPromptQueued
+}: AgentChatQueueProviderProps): React.JSX.Element;
+//#endregion
+export { useOptionalAgentChatQueue as i, AgentChatQueueProviderProps as n, AgentChatQueuedPrompt as r, AgentChatQueueProvider as t };

package/dist/AgentToolRunsContext-GMe_hSnD.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { UIMessage } from "ai";
+import { useAgentToolEvents } from "agents/react";
+import { AgentToolRunPart, AgentToolRunState, AgentToolRunStatus } from "agents/agent-tools";
+
+//#region src/components/agents-sdk/AgentToolRunsContext.d.ts
+/**
+ * Whole native run fields with the SDK's complete lifecycle status. Published
+ * Agents 0.21.0 excludes `starting` from AgentToolRunState while its native
+ * AgentToolRunStatus includes it and current retained replay emits it. This
+ * type-only correction does not translate records or accept another shape.
+ */
+type AgentToolRunValue<Part extends AgentToolRunPart = AgentToolRunPart> = Omit<AgentToolRunState<Part>, "status"> & {
+  status: AgentToolRunStatus;
+};
+/** Whole event-hook value; run records keep the complete native lifecycle. */
+type AgentToolEventsValue<Part extends AgentToolRunPart = UIMessage["parts"][number]> = Omit<ReturnType<typeof useAgentToolEvents<Part>>, "runsById" | "runsByToolCallId" | "unboundRuns" | "getRunsForToolCall"> & {
+  runsById: Record<string, AgentToolRunValue<Part>>;
+  runsByToolCallId: Record<string, AgentToolRunValue<Part>[]>;
+  unboundRuns: AgentToolRunValue<Part>[];
+  getRunsForToolCall(toolCallId: string): AgentToolRunValue<Part>[];
+};
+interface AgentToolRunsProviderProps<Part extends AgentToolRunPart = UIMessage["parts"][number]> {
+  /** Pass the whole `useAgentToolEvents({ agent })` result directly. */
+  agentTools: AgentToolEventsValue<Part>;
+  children: React.ReactNode;
+}
+/** Provides one parent connection's retained Agent Tool event projection. */
+declare function AgentToolRunsProvider<Part extends AgentToolRunPart = UIMessage["parts"][number]>({
+  agentTools,
+  children
+}: AgentToolRunsProviderProps<Part>): React.JSX.Element;
+declare function useOptionalAgentToolRuns<Part extends AgentToolRunPart = UIMessage["parts"][number]>(): AgentToolEventsValue<Part> | null;
+//#endregion
+export { useOptionalAgentToolRuns as a, AgentToolRunsProviderProps as i, AgentToolRunValue as n, AgentToolRunsProvider as r, AgentToolEventsValue as t };

package/dist/Avatar-o2NO1fCG.d.ts

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { Avatar } from "@base-ui/react/avatar";
+
+//#region src/components/foundations/Avatar.d.ts
+/**
+ * Props for the Avatar.Root component.
+ */
+interface AvatarRootProps extends React.ComponentPropsWithoutRef<typeof Avatar.Root> {
+  /** Avatar dimensions; use `md` for standard identity rows. */
+  size?: "sm" | "md" | "lg" | "xl";
+  /** Circular for people, rounded for app or entity artwork. */
+  shape?: "circle" | "rounded";
+}
+/**
+ * Props for the Avatar.Image component.
+ */
+interface AvatarImageProps extends React.ComponentPropsWithoutRef<typeof Avatar.Image> {
+  fit?: "cover" | "contain";
+}
+/**
+ * Props for the Avatar.Fallback component.
+ */
+interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof Avatar.Fallback> {}
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface AvatarGroupCountProps extends React.HTMLAttributes<HTMLDivElement> {}
+/**
+ * Container for the avatar. Renders a `<span>` element.
+ *
+ * @example
+ * ```tsx
+ * <Avatar.Root>
+ *   <Avatar.Image src="/photo.jpg" alt="User" />
+ *   <Avatar.Fallback>JD</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
+ */
+declare function AvatarRoot({
+  className,
+  size,
+  shape,
+  ref,
+  ...props
+}: AvatarRootProps & {
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+/**
+ * Displays the avatar image. Renders an `<img>` element.
+ */
+declare function AvatarImage({
+  className,
+  fit,
+  ref,
+  ...props
+}: AvatarImageProps & {
+  ref?: React.Ref<HTMLImageElement>;
+}): React.JSX.Element;
+/**
+ * Displays when the image fails to load or isn't provided.
+ * Typically contains initials or an icon. Renders a `<span>` element.
+ */
+declare function AvatarFallback({
+  className,
+  ref,
+  ...props
+}: AvatarFallbackProps & {
+  ref?: React.Ref<HTMLSpanElement>;
+}): React.JSX.Element;
+declare function AvatarGroup({
+  className,
+  ref,
+  ...props
+}: AvatarGroupProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function AvatarGroupCount({
+  className,
+  ref,
+  ...props
+}: AvatarGroupCountProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * An avatar component for displaying user profile pictures with fallback support.
+ * Shows initials or an icon when the image fails to load or isn't provided.
+ *
+ * @example
+ * ```tsx
+ * // With image
+ * <Avatar.Root>
+ *   <Avatar.Image src="/profile.jpg" alt="John Doe" />
+ *   <Avatar.Fallback>JD</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Fallback only (no image)
+ * <Avatar.Root>
+ *   <Avatar.Fallback>AB</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With delayed fallback
+ * <Avatar.Root>
+ *   <Avatar.Image src="/slow-loading.jpg" alt="User" />
+ *   <Avatar.Fallback delay={500}>?</Avatar.Fallback>
+ * </Avatar.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/avatar | Base UI Avatar}
+ */
+declare const Avatar$1: {
+  Root: typeof AvatarRoot;
+  Image: typeof AvatarImage;
+  Fallback: typeof AvatarFallback;
+  Group: typeof AvatarGroup;
+  GroupCount: typeof AvatarGroupCount;
+};
+//#endregion
+export { AvatarImageProps as a, AvatarGroupProps as i, AvatarFallbackProps as n, AvatarRootProps as o, AvatarGroupCountProps as r, Avatar$1 as t };

package/dist/{Button-CZt3yywF.d.ts → Button-DjONW5UW.d.ts}

@@ -96,7 +96,7 @@ declare function Button$1({
   ref,
   ...props
 }: ButtonProps & {
-  ref?: React.Ref<HTMLButtonElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLButtonElement>;
 }): import("react").JSX.Element;
 //#endregion
 export { ButtonVariant as a, ButtonSize as i, ButtonColor as n, ButtonVariantsOptions as o, ButtonProps as r, buttonVariants as s, Button$1 as t };

package/dist/{CodeBlock-C380GD5t.d.ts → CodeBlock--r6GS8YV.d.ts}

@@ -1,5 +1,5 @@
+import { t as CopyButtonProps } from "./copy-button-OUwOdgEm.js";
 import { m as SelectProps, t as Select } from "./Select-RrceeEIe.js";
-import { t as CopyButtonProps } from "./copy-button-C0JyjClr.js";
 import * as React from "react";
 import { BundledLanguage } from "shiki";
 
@@ -15,6 +15,10 @@ declare const CODE_BLOCK_LANGUAGES: ReadonlyArray<CodeBlockLanguage>;
 //#endregion
 //#region src/components/ai-sdk/CodeBlock.d.ts
 interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Plain code blends into an owning panel instead of painting another surface. */
+  surface?: "subtle" | "plain";
+  /** Wrap long lines in constrained transcript panels. */
+  wrap?: boolean;
   /** The source code to display. */
   code: string;
   /** The language to highlight as. */
@@ -33,6 +37,8 @@ interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * A syntax-highlighted code block powered by Shiki. Supports line numbers,
  * inline language switching, and a copy-to-clipboard action.
+ * The root supplies context and its outer surface: compose CodeBlockContainer and
+ * CodeBlockContent explicitly, alongside any optional header and actions.
  *
  * Supports Shiki bundled language names plus the short aliases in
  * `CODE_BLOCK_LANGUAGES`. The highlighter is loaded lazily on first render and
@@ -60,7 +66,7 @@ declare function CodeBlock({
   language,
   ...props
 }: CodeBlockProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface CodeBlockHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 declare function CodeBlockHeader({

package/dist/{CodeBlock-BSJl682D.js → CodeBlock-g8sADidM.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
+import { t as CopyButton } from "./copy-button-CSDuDfdP.js";
 import { Select } from "./components/foundations/Select.js";
-import { t as CopyButton } from "./copy-button-Dk2vRe9j.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";
@@ -76,12 +76,11 @@ function renderPlainCode(code, showLineNumbers) {
 		children: line || " "
 	}, `${index}-${line}`));
 }
-function hasCustomCodeBlockContent(children) {
-	return React.Children.toArray(children).some((child) => React.isValidElement(child) && (child.type === CodeBlockContainer || child.type === CodeBlockContent));
-}
 /**
 * A syntax-highlighted code block powered by Shiki. Supports line numbers,
 * inline language switching, and a copy-to-clipboard action.
+* The root supplies context and its outer surface: compose CodeBlockContainer and
+* CodeBlockContent explicitly, alongside any optional header and actions.
 *
 * Supports Shiki bundled language names plus the short aliases in
 * `CODE_BLOCK_LANGUAGES`. The highlighter is loaded lazily on first render and
@@ -111,7 +110,7 @@ function CodeBlock({ language, ...props }) {
 		...props
 	}, language);
 }
-function CodeBlockState({ className, code, language, showLineNumbers = false, isStreaming = false, onLanguageChange, children, ref, ...props }) {
+function CodeBlockState({ surface = "subtle", wrap = false, className, code, language, showLineNumbers = false, isStreaming = false, onLanguageChange, children, ref, ...props }) {
 	const [internalLanguage, setInternalLanguage] = React.useState(language);
 	const setLanguage = React.useCallback((next) => {
 		setInternalLanguage(next);
@@ -130,14 +129,15 @@ function CodeBlockState({ className, code, language, showLineNumbers = false, is
 		showLineNumbers,
 		isStreaming
 	]);
-	const hasCustomContent = hasCustomCodeBlockContent(children);
 	return /* @__PURE__ */ jsx(CodeBlockContext.Provider, {
 		value: ctxValue,
-		children: /* @__PURE__ */ jsxs("div", {
+		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			className: cx("code-block", className),
+			"data-surface": surface,
+			"data-wrap": wrap || void 0,
 			...props,
-			children: [children, !hasCustomContent && /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })]
+			children
 		})
 	});
 }

package/dist/{FileTree-DvE0hNZu.js → FileTree-DruTQ-oa.js}

@@ -1,12 +1,12 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { C as FolderIcon, S as FileIcon, p as ChevronRightIcon, w as FolderOpenIcon } from "./icons-CeGfXO21.js";
+import { C as FolderIcon, S as FileIcon, p as ChevronRightIcon, w as FolderOpenIcon } from "./icons-cuEtsgj9.js";
 import { t as NavigationLink } from "./navigation-link-kqMa81v5.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/use-file-tree-nav.ts
 const FileTreeContext = React.createContext(null);
 function getVisibleFileTreeNodes(tree) {
-	return tree ? [...tree.querySelectorAll(".file-tree__node")].filter((node) => !node.closest(".file-tree__group[data-collapsed]")) : [];
+	return tree ? [...tree.querySelectorAll(".file-tree__node")].filter((node) => node.closest("[role=\"tree\"]") === tree && !node.closest(".file-tree__group[data-collapsed]")) : [];
 }
 function useFileTreeContext() {
 	const ctx = React.useContext(FileTreeContext);
@@ -17,8 +17,8 @@ function useFileTreeContext() {
 * Builds a FileTreeContextValue that dispatches keyboard navigation per the
 * WAI-ARIA Tree Pattern.
 */
-function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect, onExpandedChange }) {
-	const [focusedPath, setFocusedPath] = React.useState(initialFocusedPath);
+function useFileTreeNav({ expanded, selectedPath, onSelect, onExpandedChange }) {
+	const [focusedPath, setFocusedPath] = React.useState(selectedPath);
 	const setFolderExpanded = React.useCallback((path, nextExpanded) => {
 		const next = new Set(expanded);
 		if (nextExpanded) next.add(path);
@@ -31,6 +31,7 @@ function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect,
 	const handleKeyDown = React.useCallback((event, path, kind) => {
 		const nodes = getVisibleFileTreeNodes(event.currentTarget.closest("[role=\"tree\"]"));
 		const currentIndex = nodes.indexOf(event.currentTarget);
+		const currentItem = event.currentTarget.closest("[role=\"treeitem\"]");
 		const focusAt = (index) => nodes[index]?.focus();
 		switch (event.key) {
 			case "ArrowDown":
@@ -44,13 +45,18 @@ function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect,
 			case "ArrowRight":
 				if (kind !== "folder") return;
 				event.preventDefault();
-				if (expanded.has(path)) focusAt(currentIndex + 1);
-				else setFolderExpanded(path, true);
+				if (expanded.has(path)) {
+					const child = nodes[currentIndex + 1];
+					if (child && currentItem?.contains(child)) child.focus();
+				} else setFolderExpanded(path, true);
 				break;
 			case "ArrowLeft":
-				if (kind !== "folder" || !expanded.has(path)) return;
 				event.preventDefault();
-				setFolderExpanded(path, false);
+				if (kind === "folder" && expanded.has(path)) setFolderExpanded(path, false);
+				else {
+					const parentItem = currentItem?.parentElement?.closest("[role=\"treeitem\"]");
+					nodes.find((node) => node.closest("[role=\"treeitem\"]") === parentItem)?.focus();
+				}
 				break;
 			case "Enter":
 			case " ":
@@ -90,18 +96,7 @@ function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect,
 }
 //#endregion
 //#region src/components/general-purpose/FileTree.tsx
-function getFirstFileTreePath(children) {
-	let firstPath = null;
-	React.Children.forEach(children, (child) => {
-		if (firstPath || !React.isValidElement(child)) return;
-		if (child.type === FileTreeFolder || child.type === FileTreeFile) {
-			firstPath = child.props.path;
-			return;
-		}
-		if (child.type === React.Fragment) firstPath = getFirstFileTreePath(child.props.children);
-	});
-	return firstPath;
-}
+const FileTreeLevelContext = React.createContext(0);
 /**
 * A keyboard-accessible hierarchical file browser. Compose with
 * FileTreeFolder and FileTreeFile children.
@@ -129,25 +124,28 @@ function FileTree({ appearance = "contained", className, "aria-label": ariaLabel
 		if (!isControlled) setInternalExpanded(next);
 		onExpandedChange?.(next);
 	}, [isControlled, onExpandedChange]);
-	const handleSelect = React.useCallback((path) => {
-		onSelect?.(path);
-	}, [onSelect]);
 	const ctx = useFileTreeNav({
 		expanded: currentExpanded,
-		initialFocusedPath: getFirstFileTreePath(children),
 		selectedPath,
-		onSelect: handleSelect,
+		onSelect: React.useCallback((path) => {
+			onSelect?.(path);
+		}, [onSelect]),
 		onExpandedChange: handleExpandedChange
 	});
 	const treeRef = React.useRef(null);
 	React.useLayoutEffect(() => {
-		const nodes = [...treeRef.current?.querySelectorAll(".file-tree__node") ?? []].filter((node) => !node.closest(".file-tree__group[data-collapsed]"));
+		const allNodes = [...treeRef.current?.querySelectorAll(".file-tree__node") ?? []].filter((node) => node.closest("[role=\"tree\"]") === treeRef.current);
+		const nodes = allNodes.filter((node) => !node.closest(".file-tree__group[data-collapsed]"));
 		if (nodes.length === 0) return;
 		if (nodes.some((node) => node.dataset.workspacePath === ctx.focusedPath)) return;
-		const firstPath = nodes[0]?.dataset.workspacePath;
-		if (firstPath) ctx.onFocus(firstPath);
+		const previousNode = allNodes.find((node) => node.dataset.workspacePath === ctx.focusedPath);
+		const nextNode = nodes.findLast((node) => previousNode ? node.closest("[role=\"treeitem\"]")?.contains(previousNode) : false) ?? nodes[0];
+		const nextPath = nextNode?.dataset.workspacePath;
+		if (nextPath) ctx.onFocus(nextPath);
+		if (previousNode === document.activeElement) nextNode?.focus();
 	}, [
 		children,
+		currentExpanded,
 		ctx.focusedPath,
 		ctx.onFocus
 	]);
@@ -163,15 +161,14 @@ function FileTree({ appearance = "contained", className, "aria-label": ariaLabel
 				className: "file-tree__list sigvelo-stack-list",
 				role: "tree",
 				"aria-label": ariaLabel,
-				children
+				children: /* @__PURE__ */ jsx(FileTreeLevelContext.Provider, {
+					value: 0,
+					children
+				})
 			})
 		})
 	});
 }
-function renderNestedFileTreeChild(child, level) {
-	if (React.isValidElement(child) && (child.type === FileTreeFolder || child.type === FileTreeFile)) return React.cloneElement(child, { level: level + 1 });
-	return child;
-}
 function dataFlag(enabled) {
 	return enabled ? "" : void 0;
 }
@@ -188,7 +185,8 @@ function FileTreeNodeRow({ actions, children }) {
 		children: [children, /* @__PURE__ */ jsx(FileTreeActions, { children: actions })]
 	});
 }
-function FileTreeFolder({ className, path, name, icon, actions, level = 0, children, ref, ...props }) {
+function FileTreeFolder({ className, path, name, icon, actions, children, ref, ...props }) {
+	const level = React.useContext(FileTreeLevelContext);
 	const { expanded, focusedPath, selectedPath, onFocus, onSelect, handleKeyDown, onExpandedChange } = useFileTreeContext();
 	const isExpanded = expanded.has(path);
 	const isFocused = focusedPath === path;
@@ -244,11 +242,15 @@ function FileTreeFolder({ className, path, name, icon, actions, level = 0, child
 			"aria-hidden": !isExpanded,
 			"data-collapsed": dataFlag(!isExpanded),
 			inert: !isExpanded,
-			children: React.Children.map(children, (child) => renderNestedFileTreeChild(child, level))
+			children: /* @__PURE__ */ jsx(FileTreeLevelContext.Provider, {
+				value: level + 1,
+				children
+			})
 		})]
 	});
 }
-function FileTreeFile({ className, path, name, icon, actions, render, level = 0, ref, ...props }) {
+function FileTreeFile({ className, path, name, icon, actions, render, ref, ...props }) {
+	const level = React.useContext(FileTreeLevelContext);
 	const { selectedPath, focusedPath, onFocus, onSelect, handleKeyDown } = useFileTreeContext();
 	const isSelected = selectedPath === path;
 	const isFocused = focusedPath === path;

package/dist/{IconButton-BAUFhUk8.d.ts → IconButton-ByiyjkYE.d.ts}

@@ -1,4 +1,4 @@
-import { i as ButtonSize, r as ButtonProps } from "./Button-CZt3yywF.js";
+import { i as ButtonSize, r as ButtonProps } from "./Button-DjONW5UW.js";
 import * as React from "react";
 
 //#region src/components/foundations/IconButton.d.ts
@@ -29,7 +29,7 @@ declare function IconButton({
   ref,
   ...props
 }: IconButtonProps & {
-  ref?: React.Ref<HTMLButtonElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 //#endregion
 export { IconButtonProps as n, IconButton as t };

package/dist/{Menu-yb6QXWA3.d.ts → Menu-CgfUZhZd.d.ts}

@@ -281,7 +281,7 @@ declare function MenuSubmenuTrigger({
  */
 declare const Menu$1: {
   createHandle: typeof Menu.createHandle;
-  Root: <Payload>(props: Menu.Root.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
+  Root: <Payload>(props: Menu.Root.Props<Payload>) => React.JSX.Element;
   Trigger: typeof MenuTrigger;
   Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
   Positioner: typeof MenuPositioner;

package/dist/{Message-D_vCVEGB.d.ts → Message-DyaTBiV7.d.ts}

@@ -1,4 +1,5 @@
-import { n as IconButtonProps } from "./IconButton-BAUFhUk8.js";
+import { n as IconButtonProps } from "./IconButton-ByiyjkYE.js";
+import { t as CopyButtonProps } from "./copy-button-OUwOdgEm.js";
 import * as React from "react";
 import { FileUIPart, UIMessage } from "ai";
 import { StreamdownProps } from "streamdown";
@@ -40,7 +41,7 @@ declare function Message({
   ref,
   ...props
 }: MessageProps & {
-  ref?: React.Ref<HTMLDivElement>;
+  /** Ref forwarded to the component's rendered root element. */ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {}
 /**
@@ -94,12 +95,16 @@ declare function MessageAttachment({
   className,
   ...props
 }: MessageAttachmentProps): React.JSX.Element;
-interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Preserve the action row height while its controls are unavailable. */
+  reserveSpace?: boolean;
+}
 /**
  * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
  * alongside or beneath a message.
  */
 declare function MessageActions({
+  reserveSpace,
   className,
   children,
   ref,
@@ -127,6 +132,14 @@ declare function MessageAction({
 }: MessageActionProps & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
+interface MessageCopyActionProps extends CopyButtonProps {}
+/** Copy a message with the shared clipboard feedback and message action treatment. */
+declare function MessageCopyAction({
+  className,
+  ...props
+}: MessageCopyActionProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
 interface MessageToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}
 /**
  * Horizontal container that places children in a row with space between —
@@ -244,4 +257,4 @@ declare function MessageBranchPage({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { MessageToolbar as A, MessageMetaProps as C, MessageRole as D, MessageResponseProps as E, MessageTimestamp as O, MessageMeta as S, MessageResponse as T, MessageBranchProps as _, MessageActionsProps as a, MessageContent as b, MessageBranch as c, MessageBranchNext as d, MessageBranchNextProps as f, MessageBranchPreviousProps as g, MessageBranchPrevious as h, MessageActions as i, MessageToolbarProps as j, MessageTimestampProps as k, MessageBranchContent as l, MessageBranchPageProps as m, MessageAction as n, MessageAttachment as o, MessageBranchPage as p, MessageActionProps as r, MessageAttachmentProps as s, Message as t, MessageBranchContentProps as u, MessageBranchSelector as v, MessageProps as w, MessageContentProps as x, MessageBranchSelectorProps as y };
+export { MessageTimestamp as A, MessageCopyActionProps as C, MessageResponse as D, MessageProps as E, MessageToolbar as M, MessageToolbarProps as N, MessageResponseProps as O, MessageCopyAction as S, MessageMetaProps as T, MessageBranchProps as _, MessageActionsProps as a, MessageContent as b, MessageBranch as c, MessageBranchNext as d, MessageBranchNextProps as f, MessageBranchPreviousProps as g, MessageBranchPrevious as h, MessageActions as i, MessageTimestampProps as j, MessageRole as k, MessageBranchContent as l, MessageBranchPageProps as m, MessageAction as n, MessageAttachment as o, MessageBranchPage as p, MessageActionProps as r, MessageAttachmentProps as s, Message as t, MessageBranchContentProps as u, MessageBranchSelector as v, MessageMeta as w, MessageContentProps as x, MessageBranchSelectorProps as y };

package/dist/MessageScrollerVirtual-D4afYwVB.d.ts

@@ -0,0 +1,84 @@
+import { r as ButtonProps } from "./Button-DjONW5UW.js";
+import * as React from "react";
+
+//#region src/components/ai-sdk/MessageScrollerVirtual.d.ts
+interface VirtualMessageScrollAnchor {
+  key: string | number;
+  offset: number;
+  followLatest: boolean;
+}
+interface VirtualMessageScrollerProps<Item> extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  items: readonly Item[];
+  /**
+   * Stable per-item key. Must survive prepends and stream updates — the
+   * virtualizer tracks identity by key to keep scroll anchored. Message ids,
+   * never indexes (deliberately not passed here).
+   */
+  getItemKey: (item: Item) => string | number;
+  renderItem: (item: Item, index: number) => React.ReactNode;
+  /**
+   * Pre-measurement height estimate in px. Rows are measured once rendered;
+   * changing this later never re-estimates already-measured rows — only rows
+   * measured afterward see the new value.
+   */
+  estimateSize?: number;
+  /** Rows rendered beyond the viewport on each side. */
+  overscan?: number;
+  /** Rendered inside the viewport when `items` is empty. */
+  emptyState?: React.ReactNode;
+  /**
+   * Props for the inner content element. Defaults to `role="log"` with
+   * `aria-live="off"` — windowing re-inserts old rows as they scroll back
+   * into view, and a live region would announce them as new; override via
+   * these props only with that in mind.
+   */
+  contentProps?: React.HTMLAttributes<HTMLDivElement>;
+  /** Accessible label for the scroll-to-latest button. */
+  scrollButtonLabel?: string;
+  scrollButtonProps?: Omit<ButtonProps, "onClick" | "aria-label" | "tabIndex">;
+  /** Thread-owned reading position retained while the transcript is unmounted. */
+  scrollAnchor?: React.RefObject<VirtualMessageScrollAnchor | undefined>;
+}
+/**
+ * Windowed chat transcript for unbounded threads (hours-long agent runs):
+ * only the visible slice of rows exists in the DOM, end-anchored so streaming
+ * growth and appends keep the viewport pinned while reading history doesn't
+ * get yanked to the bottom (TanStack Virtual `anchorTo: 'end'`).
+ *
+ * Windowing means rows unmount when scrolled away, so browser find-in-page
+ * only searches the rendered window, and any disclosure state living inside a
+ * row is lost unless it is persisted — wrap the transcript in
+ * `ExpansionStateProvider` (AgentChat does) and give disclosures a `stateKey`.
+ * New turns pin to the bottom.
+ *
+ * Host-side contract (what the consuming app must do — the scroller cannot
+ * compensate for any of these):
+ * - Give every item a stable id for `getItemKey`; keys must not change when
+ *   older history is prepended or the last message grows.
+ * - Keep unchanged items referentially stable across updates so memoized row
+ *   content skips re-rendering. Rebuilding the array element-by-element —
+ *   e.g. structured-clone over a worker/extension boundary per delta —
+ *   defeats this; clone once per batch, not per row.
+ * - Throttle stream deltas before they reach React state (AI SDK
+ *   `experimental_throttle: 50` or equivalent); the scroller re-windows per
+ *   update.
+ * - Bound the data itself: windowing caps DOM size, not JS memory. Truncate
+ *   stored tool output at the buffer (Codex caps at 20k chars) and keep
+ *   compaction on so a six-hour run doesn't hold every byte it ever streamed.
+ */
+declare function VirtualMessageScroller<Item>({
+  items,
+  getItemKey,
+  renderItem,
+  estimateSize,
+  overscan,
+  emptyState,
+  contentProps,
+  scrollButtonLabel,
+  scrollButtonProps,
+  className,
+  scrollAnchor,
+  ...props
+}: VirtualMessageScrollerProps<Item>): React.JSX.Element;
+//#endregion
+export { VirtualMessageScroller as n, VirtualMessageScrollerProps as r, VirtualMessageScrollAnchor as t };