@mcp-b/react-components 0.28.0 → 0.30.0

package/dist/{AgentActivity-D3OvrC02.d.ts → AgentActivity-SP1WfLDW.d.ts}

@@ -1,7 +1,7 @@
-import { n as WorkspaceDestination } from "./WorkspaceLink-O-EBKUJ8.js";
+import { n as WorkspaceDestination } from "./WorkspaceLink-DQogVe8E.js";
 import * as React from "react";
 
-//#region src/components/AgentActivity.d.ts
+//#region src/components/agents-sdk/AgentActivity.d.ts
 type AgentActivityMode = "working" | "approval";
 type AgentActivityIconKind = "thought" | "read" | "edit" | "search" | "web" | "command" | "browser" | "tool" | "approval";
 /** Safe, serializable presentation state suitable for an Agents SDK state object. */

package/dist/{AgentChat-CHEz8ts_.d.ts → AgentChat-CV-GuYA6.d.ts}

@@ -1,13 +1,13 @@
-import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
-import { n as AgentChatStartScreenProps } from "./AgentChatStartScreen-DXZ0hAX0.js";
-import { $ as PromptInputDictationProps, A as PromptInputCommandDefinition, X as PromptInputContextSelectorProps, gt as PromptInputReference, n as PermissionMode, ut as PromptInputMessage } from "./PromptInput-B75Np5VB.js";
+import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-C7L-Mv9U.js";
+import { n as AgentChatStartScreenProps } from "./AgentChatStartScreen-CO49yepa.js";
+import { J as PromptInputContextSelectorProps, O as PromptInputCommandDefinition, Z as PromptInputDictationProps, ct as PromptInputMessage, mt as PromptInputReference, n as PermissionMode } from "./PromptInput-DOyee1kM.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
 import { PendingApproval, Think } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
 import { UseVoiceInputReturn } from "@cloudflare/voice/react";
 
-//#region src/components/AgentChat.d.ts
+//#region src/components/agents-sdk/AgentChat.d.ts
 interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   messageIndex: number;
@@ -76,6 +76,13 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   showComposer?: boolean;
   /** Called when the user hits stop while `status` is streaming/submitted. */
   onStop?: () => void;
+  /**
+   * Called when a submission lands in the pending queue instead of going out
+   * (the composer was busy). Hosts with an autonomous continuation mode (goal
+   * mode) pause it here: a user who queues a message expects it to run next,
+   * not to race the loop's own next turn.
+   */
+  onPromptQueued?: () => void;
   placeholder?: string;
   disabled?: boolean;
   /** Rendered in place of the transcript while `messages` is empty. */
@@ -95,14 +102,24 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
     onSelect?: (command: PromptInputCommandDefinition, draft: AgentChatComposerDraft) => void;
   };
   /**
-   * Manual session compaction. When set, a built-in `/compact` entry always
-   * leads the slash menu; selecting it runs this action immediately — no
-   * reference chip, no submitted text — bypassing `slashCommands.onSelect`.
-   * A rejection renders in the composer's status notice region. The status
-   * half (live "compacting" phase, post-compaction transcript reload) is
-   * `useSessionCompaction` in `SessionCompaction` — wire both for full HITL.
+   * Manual session compaction. When set, a built-in `/compact` entry leads the
+   * slash menu whenever no turn is submitted or streaming; selecting it runs
+   * this action immediately — no reference chip, no submitted text — bypassing
+   * `slashCommands.onSelect`. The entry is withheld while busy so a
+   * maintenance call never queues behind an active turn.
+   *
+   * The resolved `compacted` boolean is the outcome, and every outcome renders
+   * in the composer's status notice region: pending shows synchronously,
+   * `true` acknowledges completion, `false` explains that nothing was eligible
+   * (Session's valid no-op), and a rejection keeps the retryable failure
+   * notice. A host `notice` supersedes the local copy, so a precise Session
+   * error is never relabelled as benign. The status half (live "compacting"
+   * phase, post-compaction transcript reload) is `useSessionCompaction` in
+   * `SessionCompaction` — wire both for full HITL.
    */
-  onCompact?: () => Promise<unknown>;
+  onCompact?: () => Promise<{
+    compacted: boolean;
+  }>;
   /** Controlled MCP catalog revealed by `@`; selections become composer references. */
   mentionCommands?: {
     items: readonly PromptInputCommandDefinition[];
@@ -254,6 +271,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   onSubmit,
   showComposer,
   onStop,
+  onPromptQueued,
   placeholder,
   disabled,
   emptyState,

package/dist/{AgentChatStartScreen-DXZ0hAX0.d.ts → AgentChatStartScreen-CO49yepa.d.ts}

@@ -1,7 +1,7 @@
-import { r as ButtonProps } from "./Button-SBIz6Lqi.js";
+import { r as ButtonProps } from "./Button-CZt3yywF.js";
 import * as React from "react";
 
-//#region src/components/AgentChatStartScreen.d.ts
+//#region src/components/ai-sdk/AgentChatStartScreen.d.ts
 interface AgentChatStarterItem {
   id: string;
   label: React.ReactNode;

package/dist/{AgentMessageParts-CyD2UB3V.d.ts → AgentMessageParts-C7L-Mv9U.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ChatStatus, UIMessage } from "ai";
 
-//#region src/components/AgentMessageParts.d.ts
+//#region src/components/ai-sdk/AgentMessageParts.d.ts
 type AgentMessagePart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
 interface AgentMessageRenderPartContext<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
@@ -21,7 +21,7 @@ interface AgentMessagePartsProps<MessageT extends UIMessage = UIMessage> {
    *
    * The default renderer uses upstream helpers where available:
    * `isTextUIPart`, `isReasoningUIPart`, `isFileUIPart`, `isToolUIPart`,
-   * `getToolName`, and Think's `getToolPartState`/input/output accessors. It
+   * `getToolName`, and the native AI SDK tool-part state fields. It
    * also renders native AI SDK `source-url`/`source-document` parts as a single
    * grouped `Sources` block when they appear consecutively, consolidates native
    * reasoning parts into one disclosure, and treats `step-start` as a silent

package/dist/{AgentToolRunsContext-BVe4stgw.d.ts → AgentToolRunsContext-Cgve-Upx.d.ts}

@@ -3,7 +3,7 @@ import { UIMessage } from "ai";
 import { useAgentToolEvents } from "agents/react";
 import { AgentToolRunPart } from "agents/agent-tools";
 
-//#region src/components/AgentToolRunsContext.d.ts
+//#region src/components/agents-sdk/AgentToolRunsContext.d.ts
 /** The complete upstream retained-run hook result for one parent connection. */
 type AgentToolEventsValue<Part extends AgentToolRunPart = UIMessage["parts"][number]> = ReturnType<typeof useAgentToolEvents<Part>>;
 interface AgentToolRunsProviderProps<Part extends AgentToolRunPart = UIMessage["parts"][number]> {

package/dist/{BrowserLiveView-BV5qgFgI.d.ts → BrowserLiveView-tJTWkoyu.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { BrowserLiveViewUrl } from "agents/browser";
 
-//#region src/components/BrowserLiveView.d.ts
+//#region src/components/agents-sdk/BrowserLiveView.d.ts
 interface BrowserLiveViewProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Complete upstream value returned by `cdp.getLiveViewUrl()`. */
   source: BrowserLiveViewUrl;

package/dist/{BrowserReplay-xWvRjRAC.d.ts → BrowserReplay-B0BQZr-N.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { BrowserRecording } from "agents/browser";
 
-//#region src/components/BrowserReplay.d.ts
+//#region src/components/agents-sdk/BrowserReplay.d.ts
 interface BrowserReplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
   /**
    * rrweb events for one tab, e.g. one

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

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, ComponentPropsWithoutRef } from "react";
 import { Button } from "@base-ui/react/button";
 
-//#region src/components/Button.d.ts
+//#region src/components/foundations/Button.d.ts
 /**
  * The visual rendering style of the button.
  *

package/dist/{CodeBlock-BUfEhDia.js → CodeBlock-CM5gfmdq.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { Select } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-7ttJAorN.js";
+import { Select } from "./components/foundations/Select.js";
+import { t as CopyButton } from "./copy-button-CsNSSKYG.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";
@@ -62,72 +62,7 @@ function toShikiLang(lang) {
 	return LANG_ALIAS[lang] ?? lang;
 }
 //#endregion
-//#region src/components/CodeBlock.tsx
-const tokensCache = /* @__PURE__ */ new Map();
-const subscribers = /* @__PURE__ */ new Map();
-function getTokensCacheKey(code, language) {
-	return JSON.stringify([language, code]);
-}
-function createRawTokens(code) {
-	return {
-		bg: "transparent",
-		fg: "inherit",
-		tokens: code.split("\n").map((line) => line ? [{
-			content: line,
-			color: "inherit"
-		}] : [])
-	};
-}
-function resolveCodeBlockLanguage(language) {
-	return CODE_BLOCK_LANGUAGES.includes(language) ? toShikiLang(language) : language;
-}
-function highlightCode(code, language, callback) {
-	const tokensCacheKey = getTokensCacheKey(code, language);
-	const cached = tokensCache.get(tokensCacheKey);
-	if (cached) return cached;
-	if (callback) {
-		const tokenSubscribers = subscribers.get(tokensCacheKey) ?? /* @__PURE__ */ new Set();
-		tokenSubscribers.add(callback);
-		subscribers.set(tokensCacheKey, tokenSubscribers);
-	}
-	getHighlighterInstance().then(async (highlighter) => {
-		const lang = resolveCodeBlockLanguage(language);
-		let result;
-		try {
-			const loadedLang = await loadShikiLanguage(highlighter, lang);
-			result = highlighter.codeToTokens(code, {
-				lang: loadedLang,
-				themes: {
-					light: "github-light-high-contrast",
-					dark: "github-dark-high-contrast"
-				}
-			});
-		} catch {
-			const raw = createRawTokens(code);
-			tokensCache.set(tokensCacheKey, raw);
-			notifyTokenSubscribers(tokensCacheKey, raw);
-			return;
-		}
-		const tokenized = {
-			tokens: result.tokens,
-			fg: result.fg ?? "inherit",
-			bg: result.bg ?? "transparent"
-		};
-		tokensCache.set(tokensCacheKey, tokenized);
-		notifyTokenSubscribers(tokensCacheKey, tokenized);
-	}).catch(() => {
-		const raw = createRawTokens(code);
-		tokensCache.set(tokensCacheKey, raw);
-		notifyTokenSubscribers(tokensCacheKey, raw);
-	});
-	return null;
-}
-function notifyTokenSubscribers(tokensCacheKey, result) {
-	const tokenSubscribers = subscribers.get(tokensCacheKey);
-	if (!tokenSubscribers) return;
-	for (const subscriber of tokenSubscribers) subscriber(result);
-	subscribers.delete(tokensCacheKey);
-}
+//#region src/components/ai-sdk/CodeBlock.tsx
 const CodeBlockContext = React.createContext(null);
 function useCodeBlockContext() {
 	const ctx = React.useContext(CodeBlockContext);
@@ -377,4 +312,4 @@ function escapeHtml(s) {
 	return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 //#endregion
-export { CodeBlockCopyButton as a, CodeBlockLanguageSelector as c, CodeBlockLanguageSelectorTrigger as d, CodeBlockLanguageSelectorValue as f, CODE_BLOCK_LANGUAGES as h, CodeBlockContent as i, CodeBlockLanguageSelectorContent as l, highlightCode as m, CodeBlockActions as n, CodeBlockFilename as o, CodeBlockTitle as p, CodeBlockContainer as r, CodeBlockHeader as s, CodeBlock as t, CodeBlockLanguageSelectorItem as u };
+export { CodeBlockCopyButton as a, CodeBlockLanguageSelector as c, CodeBlockLanguageSelectorTrigger as d, CodeBlockLanguageSelectorValue as f, CodeBlockContent as i, CodeBlockLanguageSelectorContent as l, CODE_BLOCK_LANGUAGES as m, CodeBlockActions as n, CodeBlockFilename as o, CodeBlockTitle as p, CodeBlockContainer as r, CodeBlockHeader as s, CodeBlock as t, CodeBlockLanguageSelectorItem as u };

package/dist/{CodeBlock-yMpGqScn.d.ts → CodeBlock-DzGhYyNe.d.ts}

@@ -1,7 +1,7 @@
-import { m as SelectProps, t as Select } from "./Select-B_13gg_J.js";
-import { t as CopyButtonProps } from "./copy-button-EBv_B9F6.js";
+import { m as SelectProps, t as Select } from "./Select-D96d09ww.js";
+import { t as CopyButtonProps } from "./copy-button-C0JyjClr.js";
 import * as React from "react";
-import { BundledLanguage, ThemedToken } from "shiki";
+import { BundledLanguage } from "shiki";
 
 //#region src/components/_internal/shiki.d.ts
 /**
@@ -13,13 +13,7 @@ import { BundledLanguage, ThemedToken } from "shiki";
 type CodeBlockLanguage = BundledLanguage | "ts" | "tsx" | "js" | "jsx" | "css" | "html" | "json" | "bash" | "md";
 declare const CODE_BLOCK_LANGUAGES: ReadonlyArray<CodeBlockLanguage>;
 //#endregion
-//#region src/components/CodeBlock.d.ts
-interface TokenizedCode {
-  tokens: ThemedToken[][];
-  fg: string;
-  bg: string;
-}
-declare function highlightCode(code: string, language: CodeBlockLanguage | BundledLanguage, callback?: (result: TokenizedCode) => void): TokenizedCode | null;
+//#region src/components/ai-sdk/CodeBlock.d.ts
 interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   /** The source code to display. */
   code: string;
@@ -170,4 +164,4 @@ declare function CodeBlockContent({
   ref?: React.Ref<HTMLElement>;
 }): React.JSX.Element;
 //#endregion
-export { CodeBlockLanguage as A, CodeBlockLanguageSelectorValueProps as C, TokenizedCode as D, CodeBlockTitleProps as E, highlightCode as O, CodeBlockLanguageSelectorValue as S, CodeBlockTitle as T, CodeBlockLanguageSelectorItem as _, CodeBlockContainerProps as a, CodeBlockLanguageSelectorTrigger as b, CodeBlockCopyButton as c, CodeBlockFilenameProps as d, CodeBlockHeader as f, CodeBlockLanguageSelectorContentProps as g, CodeBlockLanguageSelectorContent as h, CodeBlockContainer as i, CODE_BLOCK_LANGUAGES as k, CodeBlockCopyButtonProps as l, CodeBlockLanguageSelector as m, CodeBlockActions as n, CodeBlockContent as o, CodeBlockHeaderProps as p, CodeBlockActionsProps as r, CodeBlockContentProps as s, CodeBlock as t, CodeBlockFilename as u, CodeBlockLanguageSelectorItemProps as v, CodeBlockProps as w, CodeBlockLanguageSelectorTriggerProps as x, CodeBlockLanguageSelectorProps as y };
+export { CodeBlockLanguageSelectorValueProps as C, CODE_BLOCK_LANGUAGES as D, CodeBlockTitleProps as E, CodeBlockLanguage as O, CodeBlockLanguageSelectorValue as S, CodeBlockTitle as T, CodeBlockLanguageSelectorItem as _, CodeBlockContainerProps as a, CodeBlockLanguageSelectorTrigger as b, CodeBlockCopyButton as c, CodeBlockFilenameProps as d, CodeBlockHeader as f, CodeBlockLanguageSelectorContentProps as g, CodeBlockLanguageSelectorContent as h, CodeBlockContainer as i, CodeBlockCopyButtonProps as l, CodeBlockLanguageSelector as m, CodeBlockActions as n, CodeBlockContent as o, CodeBlockHeaderProps as p, CodeBlockActionsProps as r, CodeBlockContentProps as s, CodeBlock as t, CodeBlockFilename as u, CodeBlockLanguageSelectorItemProps as v, CodeBlockProps as w, CodeBlockLanguageSelectorTriggerProps as x, CodeBlockLanguageSelectorProps as y };

package/dist/{Combobox-DI6xcQjc.d.ts → Combobox-WrrDDaEv.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Combobox } from "@base-ui/react/combobox";
 
-//#region src/components/Combobox.d.ts
+//#region src/components/foundations/Combobox.d.ts
 declare function ComboboxInputGroup({
   className,
   ref,

package/dist/{Dialog-BD8NBKaE.d.ts → Dialog-DeOSJ0Oy.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Dialog } from "@base-ui/react/dialog";
 
-//#region src/components/Dialog.d.ts
+//#region src/components/foundations/Dialog.d.ts
 interface DialogProps extends Dialog.Root.Props {}
 interface DialogTriggerProps extends Dialog.Trigger.Props {}
 interface DialogPortalProps extends Dialog.Portal.Props {}

package/dist/{FileTree-XOLP3Yvo.js → FileTree-4WP4Uc_m.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { C as FileIcon, T as FolderOpenIcon, m as ChevronRightIcon, w as FolderIcon } from "./icons-B4mGvCvc.js";
-import { t as NavigationLink } from "./navigation-link-Cob7KBlM.js";
+import { C as FileIcon, T as FolderOpenIcon, m as ChevronRightIcon, w as FolderIcon } from "./icons-B1Qw05te.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
@@ -89,7 +89,7 @@ function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect,
 	};
 }
 //#endregion
-//#region src/components/FileTree.tsx
+//#region src/components/general-purpose/FileTree.tsx
 function getFirstFileTreePath(children) {
 	let firstPath = null;
 	React.Children.forEach(children, (child) => {
@@ -181,7 +181,14 @@ function getFileTreeNodeTabIndex(focusedPath, path) {
 function getFileTreeNodeStyle(level) {
 	return { "--file-tree-level": level };
 }
-function FileTreeFolder({ className, path, name, level = 0, children, ref, ...props }) {
+function FileTreeNodeRow({ actions, children }) {
+	if (actions == null) return children;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "file-tree__row",
+		children: [children, /* @__PURE__ */ jsx(FileTreeActions, { children: actions })]
+	});
+}
+function FileTreeFolder({ className, path, name, icon, actions, level = 0, children, ref, ...props }) {
 	const { expanded, focusedPath, selectedPath, onFocus, onSelect, handleKeyDown, onExpandedChange } = useFileTreeContext();
 	const isExpanded = expanded.has(path);
 	const isFocused = focusedPath === path;
@@ -208,33 +215,29 @@ function FileTreeFolder({ className, path, name, level = 0, children, ref, ...pr
 		"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),
-			"data-workspace-path": path,
-			tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
-			onClick: handleClick,
-			onFocus: () => onFocus(path),
-			onKeyDown: (e) => handleKeyDown(e, path, "folder"),
-			style: getFileTreeNodeStyle(level),
-			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 sigvelo-truncate sigvelo-truncate-grow",
-					children: name
-				})
-			]
+		children: [/* @__PURE__ */ jsx(FileTreeNodeRow, {
+			actions,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "file-tree__node file-tree__node--folder",
+				"data-focused": dataFlag(isFocused),
+				"data-selected": dataFlag(isSelected),
+				"data-workspace-path": path,
+				tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
+				onClick: handleClick,
+				onFocus: () => onFocus(path),
+				onKeyDown: (e) => handleKeyDown(e, path, "folder"),
+				style: getFileTreeNodeStyle(level),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cx("file-tree__chevron", isExpanded && "file-tree__chevron--expanded"),
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+					}),
+					/* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? (isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {})) }),
+					/* @__PURE__ */ jsx(FileTreeName, { children: name })
+				]
+			})
 		}), /* @__PURE__ */ jsx("ul", {
 			className: "file-tree__list file-tree__group",
 			role: "group",
@@ -245,7 +248,7 @@ function FileTreeFolder({ className, path, name, level = 0, children, ref, ...pr
 		})]
 	});
 }
-function FileTreeFile({ className, path, name, icon, render, level = 0, ref, ...props }) {
+function FileTreeFile({ className, path, name, icon, actions, render, level = 0, ref, ...props }) {
 	const { selectedPath, focusedPath, onFocus, onSelect, handleKeyDown } = useFileTreeContext();
 	const isSelected = selectedPath === path;
 	const isFocused = focusedPath === path;
@@ -255,43 +258,32 @@ function FileTreeFile({ className, path, name, icon, render, level = 0, ref, ...
 		"aria-selected": isSelected,
 		className: cx("file-tree__file", className),
 		...props,
-		children: render ? /* @__PURE__ */ jsxs(NavigationLink, {
-			render,
-			className: "file-tree__node file-tree__node--file",
-			"data-selected": dataFlag(isSelected),
-			"data-focused": dataFlag(isFocused),
-			"data-workspace-path": path,
-			tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
-			onFocus: () => onFocus(path),
-			onKeyDown: (event) => handleKeyDown(event, path, "file-link"),
-			style: getFileTreeNodeStyle(level),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "file-tree__icon",
-				"aria-hidden": "true",
-				children: icon ?? /* @__PURE__ */ jsx(FileIcon, {})
-			}), /* @__PURE__ */ jsx("span", {
-				className: "file-tree__name sigvelo-truncate sigvelo-truncate-grow",
-				children: name
-			})]
-		}) : /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "file-tree__node file-tree__node--file",
-			"data-selected": dataFlag(isSelected),
-			"data-focused": dataFlag(isFocused),
-			"data-workspace-path": path,
-			tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
-			onClick: () => onSelect(path),
-			onFocus: () => onFocus(path),
-			onKeyDown: (event) => handleKeyDown(event, path, "file"),
-			style: getFileTreeNodeStyle(level),
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "file-tree__icon",
-				"aria-hidden": "true",
-				children: icon ?? /* @__PURE__ */ jsx(FileIcon, {})
-			}), /* @__PURE__ */ jsx("span", {
-				className: "file-tree__name sigvelo-truncate sigvelo-truncate-grow",
-				children: name
-			})]
+		children: /* @__PURE__ */ jsx(FileTreeNodeRow, {
+			actions,
+			children: render ? /* @__PURE__ */ jsxs(NavigationLink, {
+				render,
+				className: "file-tree__node file-tree__node--file",
+				"data-selected": dataFlag(isSelected),
+				"data-focused": dataFlag(isFocused),
+				"data-workspace-path": path,
+				tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
+				onFocus: () => onFocus(path),
+				onKeyDown: (event) => handleKeyDown(event, path, "file-link"),
+				style: getFileTreeNodeStyle(level),
+				children: [/* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx(FileIcon, {}) }), /* @__PURE__ */ jsx(FileTreeName, { children: name })]
+			}) : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "file-tree__node file-tree__node--file",
+				"data-selected": dataFlag(isSelected),
+				"data-focused": dataFlag(isFocused),
+				"data-workspace-path": path,
+				tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
+				onClick: () => onSelect(path),
+				onFocus: () => onFocus(path),
+				onKeyDown: (event) => handleKeyDown(event, path, "file"),
+				style: getFileTreeNodeStyle(level),
+				children: [/* @__PURE__ */ jsx(FileTreeIcon, { children: icon ?? /* @__PURE__ */ jsx(FileIcon, {}) }), /* @__PURE__ */ jsx(FileTreeName, { children: name })]
+			})
 		})
 	});
 }
@@ -313,12 +305,13 @@ function FileTreeName({ className, children, ref, ...props }) {
 	});
 }
 function FileTreeActions({ className, children, onClick, ref, ...props }) {
-	const handleClick = React.useCallback((e) => {
-		e.stopPropagation();
-		onClick?.(e);
+	const handleClick = React.useCallback((event) => {
+		event.stopPropagation();
+		onClick?.(event);
 	}, [onClick]);
 	return /* @__PURE__ */ jsx("div", {
 		ref,
+		role: "group",
 		className: cx("file-tree__actions", className),
 		onClick: handleClick,
 		...props,

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

@@ -1,7 +1,7 @@
-import { i as ButtonSize, r as ButtonProps } from "./Button-SBIz6Lqi.js";
+import { i as ButtonSize, r as ButtonProps } from "./Button-CZt3yywF.js";
 import * as React from "react";
 
-//#region src/components/IconButton.d.ts
+//#region src/components/foundations/IconButton.d.ts
 interface IconButtonProps extends Omit<ButtonProps, "aria-label" | "children" | "size"> {
   /** Decorative icon rendered inside the square button. */
   children: React.ReactNode;

package/dist/{Menu-L6MZm-7N.d.ts → Menu-DVmjBIuM.d.ts}

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Menu } from "@base-ui/react/menu";
 
-//#region src/components/Menu.d.ts
+//#region src/components/foundations/Menu.d.ts
 /**
  * Props for the Menu.Root component.
  */

package/dist/{ModelSelector-CRdvHT_b.js → ModelSelector-DzdEs2fX.js}

@@ -1,11 +1,11 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
-import { Button } from "./components/Button.js";
-import { G as SearchIcon, f as ChevronDownIcon } from "./icons-B4mGvCvc.js";
-import { Dialog } from "./components/Dialog.js";
-import { i as titleCase } from "./format-S6uWyoSb.js";
-import { Separator } from "./components/Separator.js";
-import { EmptyState } from "./components/EmptyState.js";
-import { Input } from "./components/Input.js";
+import { G as SearchIcon, f as ChevronDownIcon } from "./icons-B1Qw05te.js";
+import { Button } from "./components/foundations/Button.js";
+import { Dialog } from "./components/foundations/Dialog.js";
+import { a as titleCase } from "./format-CmopcfqJ.js";
+import { Separator } from "./components/foundations/Separator.js";
+import { EmptyState } from "./components/foundations/EmptyState.js";
+import { Input } from "./components/foundations/Input.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/provider-logos.tsx
@@ -79,7 +79,7 @@ function ProviderLogo({ provider, ...props }) {
 	}
 }
 //#endregion
-//#region src/components/ModelSelector.tsx
+//#region src/components/agents-sdk/ModelSelector.tsx
 const ModelSelectorContext = React.createContext(null);
 const cloudflareModelProviderLabels = {
 	ai4bharat: "AI4Bharat",
@@ -284,10 +284,8 @@ function ModelSelector({ open, defaultOpen = false, onOpenChange, children, clas
 	});
 }
 function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel, disabled = false, placeholder = "Search or paste an AI Gateway model id...", triggerLabel = "Select a model", emptyLabel = "No models found", allowTypedModel = true, onOpenChange, ...props }) {
-	const [query, setQuery] = React.useState("");
 	const options = React.useMemo(() => normalizeCloudflareModelSelectorModels(models), [models]);
 	const groups = React.useMemo(() => groupCloudflareModelOptions(options), [options]);
-	const optionIds = React.useMemo(() => new Set(options.map((option) => option.id)), [options]);
 	const selectedOption = selectedModelId ? options.find((option) => option.id === selectedModelId) ?? {
 		id: selectedModelId,
 		provider: getCloudflareModelProvider(selectedModelId),
@@ -295,14 +293,8 @@ function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel
 		source: selectedModelId.startsWith("@") ? "workers-ai" : "ai-gateway",
 		description: null
 	} : null;
-	const typedModelId = query.trim();
-	const showTypedModel = allowTypedModel && isCloudflareRunnableModelId(typedModelId) && typedModelId !== selectedModelId && !optionIds.has(typedModelId);
 	return /* @__PURE__ */ jsxs(ModelSelector, {
-		onOpenChange: React.useCallback((...args) => {
-			const [nextOpen] = args;
-			if (!nextOpen) setQuery("");
-			onOpenChange?.(...args);
-		}, [onOpenChange]),
+		onOpenChange,
 		...props,
 		children: [/* @__PURE__ */ jsx(ModelSelectorTrigger, {
 			disabled,
@@ -311,21 +303,14 @@ function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel
 			title: "Cloudflare model selector",
 			children: /* @__PURE__ */ jsxs(ModelSelectorDialog, { children: [/* @__PURE__ */ jsx(ModelSelectorInput, {
 				"aria-label": "Search Cloudflare AI models",
-				placeholder,
-				onInput: (event) => setQuery(event.currentTarget.value)
+				placeholder
 			}), /* @__PURE__ */ jsxs(ModelSelectorList, { children: [
-				showTypedModel ? /* @__PURE__ */ jsx(ModelSelectorGroup, {
-					label: "AI Gateway",
-					children: /* @__PURE__ */ jsxs(ModelSelectorItem, {
-						value: typedModelId,
-						onSelect: onSelectModel,
-						children: [
-							/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: getCloudflareModelProvider(typedModelId) }),
-							/* @__PURE__ */ jsx(ModelSelectorName, { children: typedModelId }),
-							/* @__PURE__ */ jsx(ModelSelectorSource, { children: "Use" })
-						]
-					})
-				}) : null,
+				/* @__PURE__ */ jsx(CloudflareTypedModelOption, {
+					allowTypedModel,
+					onSelectModel,
+					options,
+					selectedModelId
+				}),
 				groups.map((group) => /* @__PURE__ */ jsx(ModelSelectorGroup, {
 					label: group.providerLabel,
 					children: group.options.map((option) => /* @__PURE__ */ jsxs(ModelSelectorItem, {
@@ -345,6 +330,23 @@ function CloudflareModelSelector({ models, selectedModelId = null, onSelectModel
 		})]
 	});
 }
+function CloudflareTypedModelOption({ allowTypedModel, onSelectModel, options, selectedModelId }) {
+	const { query } = useModelSelectorContext();
+	const typedModelId = query.trim();
+	if (!allowTypedModel || !isCloudflareRunnableModelId(typedModelId) || typedModelId === selectedModelId || options.some((option) => option.id === typedModelId)) return null;
+	return /* @__PURE__ */ jsx(ModelSelectorGroup, {
+		label: "AI Gateway",
+		children: /* @__PURE__ */ jsxs(ModelSelectorItem, {
+			value: typedModelId,
+			onSelect: onSelectModel,
+			children: [
+				/* @__PURE__ */ jsx(ModelSelectorLogo, { provider: getCloudflareModelProvider(typedModelId) }),
+				/* @__PURE__ */ jsx(ModelSelectorName, { children: typedModelId }),
+				/* @__PURE__ */ jsx(ModelSelectorSource, { children: "Use" })
+			]
+		})
+	});
+}
 function ModelSelectorTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, { render: /* @__PURE__ */ jsxs(Button, {
 		variant: "outline",