@mcp-b/react-components 0.2.2 → 0.4.0

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { d as DotIcon, k as SpinnerIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { A as SpinnerIcon, d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

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-BrCoypnc.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-C2Xjxu9M.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/Commit.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { h as FileIcon, l as ChevronRightIcon, o as CheckIcon, u as CopyIcon } from "../icons-Bf7JMKk-.js";
+import { h as FileIcon, l as ChevronRightIcon, o as CheckIcon, u as CopyIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/Context.d.ts

@@ -1,31 +1,21 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
-import { PopoverProps } from "./Popover.js";
+import { PopoverPositionerProps, PopoverProps } from "./Popover.js";
 import * as React from "react";
+import { LanguageModelUsage, UIMessage } from "ai";
 
 //#region src/components/Context.d.ts
-interface ContextUsageCategory {
-  label: string;
-  tokens: number;
-  costUsd?: number;
-}
-interface ContextUsage {
-  input?: number;
-  inputTokens?: number;
-  output?: number;
-  outputTokens?: number;
-  reasoning?: number;
-  reasoningTokens?: number;
-  cache?: number;
-  cachedInputTokens?: number;
-  categories?: ContextUsageCategory[];
-}
+/**
+ * The AI SDK's `LanguageModelUsage`, taken whole. `Partial` only relaxes the
+ * required-but-`undefined`able keys for fixtures/JSX literals — key names and
+ * meanings are upstream's.
+ */
+type ContextTokenUsage = Partial<LanguageModelUsage>;
 interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Tokens currently used. */
   usedTokens: number;
   /** Maximum context window size. */
   maxTokens: number;
   /** Optional usage breakdown. */
-  usage?: ContextUsage;
+  usage?: ContextTokenUsage;
   /** Optional model identifier shown in the header. */
   modelId?: string;
   /** Optional total cost in USD. */
@@ -36,8 +26,8 @@ interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Displays token / context usage with a hover card breakdown. The trigger is
- * a button showing a compact percentage indicator; hovering or clicking opens
- * a popover with category rows and total cost.
+ * a bare progress ring; clicking it opens a popover (upward by default) with
+ * category rows and total cost.
  *
  * @example
  * ```tsx
@@ -45,7 +35,7 @@ interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
  *   usedTokens={42_300}
  *   maxTokens={200_000}
  *   modelId="claude-opus-4-6"
- *   usage={{ input: 30000, output: 12300 }}
+ *   usage={{ inputTokens: 30000, outputTokens: 12300 }}
  *   totalCostUsd={0.42}
  * >
  *   <ContextTrigger />
@@ -73,17 +63,19 @@ declare function Context({
 }: ContextProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ContextTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
-  className?: string;
-}
+interface ContextTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 declare function ContextTrigger({
   className,
   children,
   ...props
 }: ContextTriggerProps): React.JSX.Element;
-interface ContextContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface ContextContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The trigger usually sits in a composer at the bottom, so default "top". */
+  side?: PopoverPositionerProps["side"];
+}
 declare function ContextContent({
   className,
+  side,
   children,
   ...props
 }: ContextContentProps): React.JSX.Element;
@@ -125,5 +117,14 @@ declare function ContextInputUsage(props: ContextInputUsageProps): React.JSX.Ele
 declare function ContextOutputUsage(props: ContextOutputUsageProps): React.JSX.Element;
 declare function ContextReasoningUsage(props: ContextReasoningUsageProps): React.JSX.Element;
 declare function ContextCacheUsage(props: ContextCacheUsageProps): React.JSX.Element;
+/**
+ * Latest `metadata.usage` in a transcript — the AI SDK convention for token
+ * accounting (`toUIMessageStreamResponse({ messageMetadata })`), which Think
+ * merges into `message.metadata` as turns finish. Structural: any message
+ * whose metadata carries a `usage` object qualifies.
+ */
+declare function getContextUsage(messages: readonly UIMessage[]): LanguageModelUsage | undefined;
+/** Tokens occupying the context window: `totalTokens`, or input + output. */
+declare function getContextUsedTokens(usage: LanguageModelUsage | undefined): number;
 //#endregion
-export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTrigger, ContextTriggerProps, ContextUsage, ContextUsageCategory, ContextUsageRowProps };
+export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTokenUsage, ContextTrigger, ContextTriggerProps, ContextUsageRowProps, getContextUsage, getContextUsedTokens };

package/dist/components/Context.js

@@ -1,5 +1,4 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { Button } from "./Button.js";
 import { Popover } from "./Popover.js";
 import { Separator } from "./Separator.js";
 import * as React from "react";
@@ -13,8 +12,8 @@ function useContextContext() {
 }
 /**
 * Displays token / context usage with a hover card breakdown. The trigger is
-* a button showing a compact percentage indicator; hovering or clicking opens
-* a popover with category rows and total cost.
+* a bare progress ring; clicking it opens a popover (upward by default) with
+* category rows and total cost.
 *
 * @example
 * ```tsx
@@ -22,7 +21,7 @@ function useContextContext() {
 *   usedTokens={42_300}
 *   maxTokens={200_000}
 *   modelId="claude-opus-4-6"
-*   usage={{ input: 30000, output: 12300 }}
+*   usage={{ inputTokens: 30000, outputTokens: 12300 }}
 *   totalCostUsd={0.42}
 * >
 *   <ContextTrigger />
@@ -68,33 +67,26 @@ function ContextTrigger({ className, children, ...props }) {
 	const percent = maxTokens > 0 ? usedTokens / maxTokens * 100 : 0;
 	if (React.isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, { render: children });
 	if (children) return /* @__PURE__ */ jsx(Popover.Trigger, { children });
-	return /* @__PURE__ */ jsx(Popover.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
-		variant: "ghost",
-		color: "neutral",
-		size: "sm",
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
 		className: cx("context__trigger", className),
 		"aria-label": `Context usage: ${percent.toFixed(0)}%`,
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "context__trigger-ring",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx(ProgressRing, {
-				percent,
-				size: 16,
-				stroke: 2.5
-			})
-		}), /* @__PURE__ */ jsxs("span", {
-			className: "context__trigger-label",
-			children: [percent.toFixed(0), "%"]
-		})]
-	}) });
+		children: /* @__PURE__ */ jsx(ProgressRing, {
+			percent,
+			size: 16,
+			stroke: 2.5
+		})
+	});
 }
-function ContextContent({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Popup, {
-		className: cx("context__content", className),
-		...props,
-		children
-	}) }) });
+function ContextContent({ className, side = "top", children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		side,
+		children: /* @__PURE__ */ jsx(Popover.Popup, {
+			className: cx("context__content", className),
+			...props,
+			children
+		})
+	}) });
 }
 function ContextContentHeader({ className, children, ref, ...props }) {
 	const { usedTokens, maxTokens, modelId } = useContextContext();
@@ -173,7 +165,6 @@ function ContextContentBody({ className, children, ref, ...props }) {
 		label: "Cache",
 		tokens: cacheTokens
 	});
-	if (usage?.categories) rows.push(...usage.categories);
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("context__body", className),
@@ -182,20 +173,13 @@ function ContextContentBody({ className, children, ref, ...props }) {
 			className: "context__rows",
 			children: rows.map((row) => /* @__PURE__ */ jsxs("li", {
 				className: "context__row",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "context__row-label",
-						children: row.label
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "context__row-value",
-						children: row.tokens.toLocaleString()
-					}),
-					row.costUsd !== void 0 ? /* @__PURE__ */ jsxs("span", {
-						className: "context__row-cost",
-						children: ["$", row.costUsd.toFixed(4)]
-					}) : null
-				]
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "context__row-label",
+					children: row.label
+				}), /* @__PURE__ */ jsx("span", {
+					className: "context__row-value",
+					children: row.tokens.toLocaleString()
+				})]
 			}, row.label))
 		})]
 	});
@@ -269,10 +253,27 @@ function ContextUsageRow({ className, children, label, usageKey, defaultLabel, r
 }
 function getUsageTokens(usage, key) {
 	if (!usage) return void 0;
-	if (key === "input") return usage.input ?? usage.inputTokens;
-	if (key === "output") return usage.output ?? usage.outputTokens;
-	if (key === "reasoning") return usage.reasoning ?? usage.reasoningTokens;
-	return usage.cache ?? usage.cachedInputTokens;
+	if (key === "input") return usage.inputTokens;
+	if (key === "output") return usage.outputTokens;
+	if (key === "reasoning") return usage.outputTokenDetails?.reasoningTokens ?? usage.reasoningTokens;
+	return usage.inputTokenDetails?.cacheReadTokens ?? usage.cachedInputTokens;
+}
+/**
+* Latest `metadata.usage` in a transcript — the AI SDK convention for token
+* accounting (`toUIMessageStreamResponse({ messageMetadata })`), which Think
+* merges into `message.metadata` as turns finish. Structural: any message
+* whose metadata carries a `usage` object qualifies.
+*/
+function getContextUsage(messages) {
+	for (let i = messages.length - 1; i >= 0; i--) {
+		const usage = messages[i].metadata?.usage;
+		if (usage && typeof usage === "object") return usage;
+	}
+}
+/** Tokens occupying the context window: `totalTokens`, or input + output. */
+function getContextUsedTokens(usage) {
+	if (!usage) return 0;
+	return usage.totalTokens ?? (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0);
 }
 function ProgressRing({ percent, size, stroke }) {
 	const radius = (size - stroke) / 2;
@@ -306,4 +307,4 @@ function ProgressRing({ percent, size, stroke }) {
 	});
 }
 //#endregion
-export { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger };
+export { Context, ContextCacheUsage, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextReasoningUsage, ContextTrigger, getContextUsage, getContextUsedTokens };

package/dist/components/ContextMenu.js

@@ -1,4 +1,4 @@
-import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";

package/dist/components/Conversation.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { f as DownloadIcon, t as ArrowDownIcon } from "../icons-Bf7JMKk-.js";
+import { f as DownloadIcon, t as ArrowDownIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { useStickToBottom } from "./useStickToBottom.js";
 import * as React from "react";

package/dist/components/Dialog.js

@@ -1,4 +1,4 @@
-import { P as XIcon } from "../icons-Bf7JMKk-.js";
+import { F as XIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";

package/dist/components/EnvironmentVariables.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { m as EyeOffIcon, o as CheckIcon, p as EyeIcon, u as CopyIcon } from "../icons-Bf7JMKk-.js";
+import { m as EyeOffIcon, o as CheckIcon, p as EyeIcon, u as CopyIcon } from "../icons-DQC4Zw5R.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/FileTree.js

@@ -1,310 +1,2 @@
-import { t as cx } from "../class-names-9UtZwb0J.js";
-import { _ as FolderOpenIcon, g as FolderIcon, h as FileIcon, l as ChevronRightIcon } from "../icons-Bf7JMKk-.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 useFileTreeContext() {
-	const ctx = React.useContext(FileTreeContext);
-	if (!ctx) throw new Error("FileTree subcomponents must be used inside <FileTree>.");
-	return ctx;
-}
-/**
-* Builds a FileTreeContextValue that tracks registered nodes and dispatches
-* keyboard navigation per the WAI-ARIA Tree Pattern.
-*
-* Call `register` from every FileTreeFolder/FileTreeFile during render. The
-* hook resets its internal list on each render pass so removed nodes don't
-* leave stale entries.
-*/
-function useFileTreeNav({ expanded, selectedPath, onSelect, onExpandedChange }) {
-	const [focusedPath, setFocusedPath] = React.useState(null);
-	const nodesRef = React.useRef([]);
-	nodesRef.current = [];
-	const register = React.useCallback((path, kind, parentExpanded) => {
-		nodesRef.current.push({
-			path,
-			kind,
-			visible: parentExpanded
-		});
-	}, []);
-	const visibleNodes = () => nodesRef.current.filter((n) => n.visible);
-	const moveFocus = React.useCallback((direction, from) => {
-		const visible = visibleNodes();
-		const idx = visible.findIndex((n) => n.path === from);
-		if (idx < 0) return;
-		const next = visible[Math.max(0, Math.min(visible.length - 1, idx + direction))];
-		if (next) setFocusedPath(next.path);
-	}, []);
-	const focusFirstVisibleNode = React.useCallback(() => {
-		const first = visibleNodes()[0];
-		if (first) setFocusedPath(first.path);
-	}, []);
-	const focusLastVisibleNode = React.useCallback(() => {
-		const visible = visibleNodes();
-		const last = visible[visible.length - 1];
-		if (last) setFocusedPath(last.path);
-	}, []);
-	const setFolderExpanded = React.useCallback((path, nextExpanded) => {
-		const next = new Set(expanded);
-		if (nextExpanded) next.add(path);
-		else next.delete(path);
-		onExpandedChange(next);
-	}, [expanded, onExpandedChange]);
-	const toggleFolderExpanded = React.useCallback((path) => {
-		setFolderExpanded(path, !expanded.has(path));
-	}, [expanded, setFolderExpanded]);
-	const keyHandlers = React.useMemo(() => ({
-		ArrowDown(path) {
-			moveFocus(1, path);
-		},
-		ArrowUp(path) {
-			moveFocus(-1, path);
-		},
-		ArrowRight(path, kind) {
-			if (!(kind === "folder")) return;
-			if (expanded.has(path)) moveFocus(1, path);
-			else setFolderExpanded(path, true);
-		},
-		ArrowLeft(path, kind) {
-			if (kind === "folder" && expanded.has(path)) setFolderExpanded(path, false);
-		},
-		Enter(path, kind) {
-			if (kind === "folder") {
-				onSelect(path);
-				toggleFolderExpanded(path);
-			} else onSelect(path);
-		},
-		" "(path, kind) {
-			if (kind === "folder") {
-				onSelect(path);
-				toggleFolderExpanded(path);
-			} else onSelect(path);
-		},
-		Home() {
-			focusFirstVisibleNode();
-		},
-		End() {
-			focusLastVisibleNode();
-		}
-	}), [
-		expanded,
-		focusFirstVisibleNode,
-		focusLastVisibleNode,
-		moveFocus,
-		onSelect,
-		setFolderExpanded,
-		toggleFolderExpanded
-	]);
-	const handleKeyDown = React.useCallback((event, path, kind) => {
-		const keyHandler = keyHandlers[event.key];
-		if (!keyHandler) return;
-		event.preventDefault();
-		keyHandler(path, kind);
-	}, [keyHandlers]);
-	return {
-		focusedPath,
-		selectedPath,
-		expanded,
-		onFocus: React.useCallback((path) => {
-			setFocusedPath(path);
-		}, []),
-		onSelect,
-		onExpandedChange: React.useCallback((path, next) => {
-			setFolderExpanded(path, next);
-		}, [setFolderExpanded]),
-		register,
-		handleKeyDown
-	};
-}
-//#endregion
-//#region src/components/FileTree.tsx
-/**
-* A keyboard-accessible hierarchical file browser. Compose with
-* FileTreeFolder and FileTreeFile children.
-*
-* Keyboard: ↑/↓ move focus, →/← expand/collapse folders, Enter/Space
-* selects files and selects/toggles folders, Home/End jump to first/last node.
-*
-* @example
-* ```tsx
-* <FileTree defaultExpanded={new Set(["src"])}>
-*   <FileTreeFolder path="src" name="src">
-*     <FileTreeFile path="src/index.ts" name="index.ts" />
-*     <FileTreeFolder path="src/lib" name="lib">
-*       <FileTreeFile path="src/lib/utils.ts" name="utils.ts" />
-*     </FileTreeFolder>
-*   </FileTreeFolder>
-* </FileTree>
-* ```
-*/
-function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded, defaultExpanded, selectedPath = null, onSelect, onExpandedChange, children, ref, ...props }) {
-	const [internalExpanded, setInternalExpanded] = React.useState(() => defaultExpanded ?? /* @__PURE__ */ new Set());
-	const isControlled = expanded !== void 0;
-	const currentExpanded = isControlled ? expanded : internalExpanded;
-	const handleExpandedChange = React.useCallback((next) => {
-		if (!isControlled) setInternalExpanded(next);
-		onExpandedChange?.(next);
-	}, [isControlled, onExpandedChange]);
-	const ctx = useFileTreeNav({
-		expanded: currentExpanded,
-		selectedPath,
-		onSelect: React.useCallback((path) => {
-			onSelect?.(path);
-		}, [onSelect]),
-		onExpandedChange: handleExpandedChange
-	});
-	return /* @__PURE__ */ jsx(FileTreeContext.Provider, {
-		value: ctx,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: cx("file-tree", className),
-			...props,
-			children: /* @__PURE__ */ jsx("ul", {
-				className: "file-tree__list",
-				role: "tree",
-				"aria-label": ariaLabel,
-				tabIndex: 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;
-}
-function getFileTreeNodeTabIndex(focusedPath, path, level) {
-	return focusedPath === path || !focusedPath && level === 0 ? 0 : -1;
-}
-function getFileTreeNodeIndent(level, offset) {
-	return `${level * 1.125 + offset}rem`;
-}
-function FileTreeFolder({ className, path, name, level = 0, children, ref, ...props }) {
-	const { expanded, focusedPath, selectedPath, onFocus, onSelect, register, handleKeyDown, onExpandedChange } = useFileTreeContext();
-	const isExpanded = expanded.has(path);
-	const isFocused = focusedPath === path;
-	const isSelected = selectedPath === path;
-	register(path, "folder", true);
-	const toggle = React.useCallback(() => {
-		onExpandedChange(path, !isExpanded);
-	}, [
-		isExpanded,
-		onExpandedChange,
-		path
-	]);
-	const handleClick = React.useCallback(() => {
-		onSelect(path);
-		toggle();
-	}, [
-		onSelect,
-		path,
-		toggle
-	]);
-	return /* @__PURE__ */ jsxs("li", {
-		ref,
-		role: "treeitem",
-		"aria-expanded": isExpanded,
-		"aria-selected": isSelected,
-		className: cx("file-tree__folder", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "file-tree__node file-tree__node--folder",
-			"data-focused": dataFlag(isFocused),
-			"data-selected": dataFlag(isSelected),
-			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
-			onClick: handleClick,
-			onFocus: () => onFocus(path),
-			onKeyDown: (e) => handleKeyDown(e, path, "folder"),
-			style: { paddingInlineStart: getFileTreeNodeIndent(level, .5) },
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: cx("file-tree__chevron", isExpanded && "file-tree__chevron--expanded"),
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "file-tree__icon",
-					"aria-hidden": "true",
-					children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {})
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "file-tree__name",
-					children: name
-				})
-			]
-		}), isExpanded ? /* @__PURE__ */ jsx("ul", {
-			className: "file-tree__list",
-			role: "group",
-			children: React.Children.map(children, (child) => renderNestedFileTreeChild(child, level))
-		}) : null]
-	});
-}
-function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props }) {
-	const { selectedPath, focusedPath, onFocus, onSelect, register, handleKeyDown } = useFileTreeContext();
-	const isSelected = selectedPath === path;
-	const isFocused = focusedPath === path;
-	register(path, "file", true);
-	return /* @__PURE__ */ jsx("li", {
-		ref,
-		role: "treeitem",
-		"aria-selected": isSelected,
-		className: cx("file-tree__file", className),
-		...props,
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "file-tree__node file-tree__node--file",
-			"data-selected": dataFlag(isSelected),
-			"data-focused": dataFlag(isFocused),
-			tabIndex: getFileTreeNodeTabIndex(focusedPath, path, level),
-			onClick: () => onSelect(path),
-			onFocus: () => onFocus(path),
-			onKeyDown: (e) => handleKeyDown(e, path, "file"),
-			style: { paddingInlineStart: getFileTreeNodeIndent(level, 1.5) },
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "file-tree__icon",
-				"aria-hidden": "true",
-				children: icon ?? /* @__PURE__ */ jsx(FileIcon, {})
-			}), /* @__PURE__ */ jsx("span", {
-				className: "file-tree__name",
-				children: name
-			})]
-		})
-	});
-}
-function FileTreeIcon({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		className: cx("file-tree__icon", className),
-		"aria-hidden": "true",
-		...props,
-		children
-	});
-}
-function FileTreeName({ className, children, ref, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		ref,
-		className: cx("file-tree__name", className),
-		...props,
-		children
-	});
-}
-function FileTreeActions({ className, children, onClick, ref, ...props }) {
-	const handleClick = React.useCallback((e) => {
-		e.stopPropagation();
-		onClick?.(e);
-	}, [onClick]);
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("file-tree__actions", className),
-		onClick: handleClick,
-		...props,
-		children
-	});
-}
-//#endregion
+import { a as FileTreeIcon, i as FileTreeFolder, n as FileTreeActions, o as FileTreeName, r as FileTreeFile, t as FileTree } from "../FileTree-D0c9Yj9U.js";
 export { FileTree, FileTreeActions, FileTreeFile, FileTreeFolder, FileTreeIcon, FileTreeName };

package/dist/components/Menubar.js

@@ -1,4 +1,4 @@
-import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

package/dist/components/Message.d.ts

@@ -1,9 +1,10 @@
 import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
 import * as React from "react";
+import { FileUIPart, UIMessage } from "ai";
 import { StreamdownProps } from "streamdown";
 
 //#region src/components/Message.d.ts
-type MessageRole = "user" | "assistant" | "system" | "tool" | (string & {});
+type MessageRole = UIMessage["role"] | (string & {});
 interface MessageProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The originating role of the message. Controls alignment and styling via
@@ -59,6 +60,20 @@ declare const MessageResponse: React.MemoExoticComponent<({
   className,
   ...props
 }: MessageResponseProps) => React.JSX.Element>;
+interface MessageAttachmentProps extends Omit<React.HTMLAttributes<HTMLElement>, "part"> {
+  /** The AI SDK `file` part, taken whole. */
+  part: FileUIPart;
+}
+/**
+ * A `file` part inside a message: images render inline (click to zoom),
+ * anything else becomes a download chip. Covers both directions — files the
+ * user attached and files the agent emitted.
+ */
+declare function MessageAttachment({
+  part,
+  className,
+  ...props
+}: MessageAttachmentProps): React.JSX.Element;
 interface MessageActionsProps extends React.HTMLAttributes<HTMLDivElement> {}
 /**
  * Horizontal list of action buttons (copy, retry, thumbs-up, etc.) shown
@@ -213,4 +228,4 @@ declare function MessageBranchPage({
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 //#endregion
-export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageRole, MessageToolbar, MessageToolbarProps };
+export { Message, MessageAction, MessageActionProps, MessageActions, MessageActionsProps, MessageAttachment, MessageAttachmentProps, MessageBranch, MessageBranchContent, MessageBranchContentProps, MessageBranchNext, MessageBranchNextProps, MessageBranchPage, MessageBranchPageProps, MessageBranchPrevious, MessageBranchPreviousProps, MessageBranchProps, MessageBranchSelector, MessageBranchSelectorProps, MessageContent, MessageContentProps, MessageProps, MessageResponse, MessageResponseProps, MessageRole, MessageToolbar, MessageToolbarProps };