@mcp-b/react-components 0.16.1 → 0.18.0

package/dist/{AgentActivity-BNUNrP9O.d.ts → AgentActivity-D2SHSGFX.d.ts}

@@ -1,4 +1,4 @@
-import { n as WorkspaceDestination } from "./WorkspaceLink-DK1DWMHe.js";
+import { n as WorkspaceDestination } from "./WorkspaceLink-O-EBKUJ8.js";
 import * as React from "react";
 
 //#region src/components/AgentActivity.d.ts

package/dist/{AgentChat-CrlpbvQJ.d.ts → AgentChat-ClxViuUM.d.ts}

@@ -1,4 +1,5 @@
-import { Z as PromptInputContextSelectorProps, _t as PromptInputReference, dt as PromptInputMessage, et as PromptInputDictationProps, j as PromptInputCommandDefinition, r as PermissionMode } from "./PromptInput-BWTuXMOD.js";
+import { i as AgentMessageRenderPartContext } from "./AgentMessageParts-CyD2UB3V.js";
+import { $ as PromptInputDictationProps, A as PromptInputCommandDefinition, X as PromptInputContextSelectorProps, gt as PromptInputReference, n as PermissionMode, ut as PromptInputMessage } from "./PromptInput-Bdh9pqlo.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
 import { PendingApproval, Think } from "@cloudflare/think";
@@ -6,13 +7,6 @@ import { AgentStub } from "agents/client";
 import { UseVoiceInputReturn } from "@cloudflare/voice/react";
 
 //#region src/components/AgentChat.d.ts
-type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
-interface AgentChatRenderPartContext<MessageT extends UIMessage = UIMessage> {
-  message: MessageT;
-  part: AgentChatPart<MessageT>;
-  partIndex: number;
-  defaultRender: () => React.ReactNode;
-}
 interface AgentChatRenderMessageContext<MessageT extends UIMessage = UIMessage> {
   message: MessageT;
   messageIndex: number;
@@ -81,21 +75,6 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   showComposer?: boolean;
   /** Called when the user hits stop while `status` is streaming/submitted. */
   onStop?: () => void;
-  /**
-   * Let a composed follow-up submit while a response is active. The single
-   * trailing action remains Stop until the draft contains content, then
-   * becomes Queue. The transport remains the queue owner.
-   */
-  allowSubmitWhileBusy?: boolean;
-  /**
-   * Authoritative user messages waiting behind the active turn. Their ids are
-   * excluded from the transcript and rendered as queued cards above the composer.
-   */
-  queuedMessages?: readonly MessageT[];
-  /** Promote a queued message into the host's steering flow. */
-  onSteerQueuedMessage?: (message: MessageT) => void;
-  /** Remove a queued message through the host-owned queue transport. */
-  onRemoveQueuedMessage?: (message: MessageT) => void;
   placeholder?: string;
   disabled?: boolean;
   /** Rendered in place of the transcript while `messages` is empty. */
@@ -192,7 +171,7 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
    * return a React node for every source part you want to show; returning
    * `undefined` lets `AgentChat` keep the upstream-shaped source-run grouping.
    */
-  renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
+  renderPart?: (context: AgentMessageRenderPartContext<MessageT>) => React.ReactNode | undefined;
   /** Rendered after each message's parts — for actions, citations, and the like. */
   renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
 }
@@ -216,14 +195,10 @@ interface PermissionModeControl {
 declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   className,
   messages,
-  queuedMessages,
-  onSteerQueuedMessage,
-  onRemoveQueuedMessage,
   status,
   onSubmit,
   showComposer,
   onStop,
-  allowSubmitWhileBusy,
   placeholder,
   disabled,
   emptyState,
@@ -252,4 +227,4 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { AgentChatRenderMessageContext as a, AgentChatProps as i, AgentChatComposerDraft as n, AgentChatRenderPartContext as o, AgentChatPart as r, PermissionModeControl as s, AgentChat as t };
+export { PermissionModeControl as a, AgentChatRenderMessageContext as i, AgentChatComposerDraft as n, AgentChatProps as r, AgentChat as t };

package/dist/AgentMessageParts-CyD2UB3V.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ChatStatus, UIMessage } from "ai";
+
+//#region src/components/AgentMessageParts.d.ts
+type AgentMessagePart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
+interface AgentMessageRenderPartContext<MessageT extends UIMessage = UIMessage> {
+  message: MessageT;
+  part: AgentMessagePart<MessageT>;
+  partIndex: number;
+  defaultRender: () => React.ReactNode;
+}
+interface AgentMessagePartsProps<MessageT extends UIMessage = UIMessage> {
+  /** The whole upstream AI SDK message whose parts should render in order. */
+  message: MessageT;
+  /** Drives native reasoning streaming UI. Settled messages default to `ready`. */
+  status?: ChatStatus;
+  /**
+   * Override rendering per part. Return `undefined` to use the default renderer,
+   * `null` to suppress the part, or call `defaultRender()` to compose the
+   * built-in result into custom UI.
+   *
+   * The default renderer uses upstream helpers where available:
+   * `isTextUIPart`, `isReasoningUIPart`, `isFileUIPart`, `isToolUIPart`,
+   * `getToolName`, and Think's `getToolPartState`/input/output accessors. 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
+   * structural boundary. App-defined `data-*` parts stay whole and should be
+   * narrowed with AI SDK's `isDataUIPart` inside this callback. If you override
+   * source rendering, return a React node for every source part you want to
+   * show; returning `undefined` keeps the upstream-shaped source-run grouping.
+   */
+  renderPart?: (context: AgentMessageRenderPartContext<MessageT>) => React.ReactNode | undefined;
+}
+/**
+ * Renders the ordered parts of one whole AI SDK `UIMessage` without adding a
+ * transcript, message wrapper, composer, or transport. Compose it inside
+ * `Message` for read-only run previews and child-agent transcript rows.
+ */
+declare function AgentMessageParts<MessageT extends UIMessage = UIMessage>({
+  message,
+  status,
+  renderPart
+}: AgentMessagePartsProps<MessageT>): (React.JSX.Element | null)[];
+//#endregion
+export { AgentMessageRenderPartContext as i, AgentMessageParts as n, AgentMessagePartsProps as r, AgentMessagePart as t };

package/dist/AgentToolRunsContext-BVe4stgw.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { UIMessage } from "ai";
+import { useAgentToolEvents } from "agents/react";
+import { AgentToolRunPart } from "agents/agent-tools";
+
+//#region src/components/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]> {
+  /** 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 i, AgentToolRunsProvider as n, AgentToolRunsProviderProps as r, AgentToolEventsValue as t };

package/dist/{Button-FX_hpqxm.d.ts → Button-DLGzHsjc.d.ts}

@@ -24,12 +24,11 @@ type ButtonColor = "neutral" | "primary" | "destructive";
  *
  * - `xs` - Extra small, 1.75rem height
  * - `sm` - Small, 2rem height
- * - `md` - Medium (default), 2.5rem height
- * - `lg` - Large, 2.75rem height
- * - `xl` - Extra large, 3.25rem height
- * - `icon` - Square button for icon-only content
+ * - `md` - Medium, 2.25rem height
+ * - `lg` - Large, 2.5rem height
+ * - `xl` - Extra large, 2.75rem height
  */
-type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 interface ButtonVariantsOptions {
   variant?: ButtonVariant | null;
   color?: ButtonColor | null;
@@ -59,9 +58,15 @@ interface ButtonProps extends BaseButtonProps, Omit<ButtonHTMLAttributes<HTMLBut
   color?: ButtonColor;
   /**
    * The size of the button.
-   * @default 'md'
+   * @default 'sm'
    */
   size?: ButtonSize;
+  /**
+   * Makes the button square for icon-only content. Prefer {@link IconButton}
+   * when the control also needs a required accessible label and tooltip.
+   * @default false
+   */
+  iconOnly?: boolean;
 }
 /**
  * A button component built on Base UI with semantic styling variants.
@@ -76,7 +81,7 @@ interface ButtonProps extends BaseButtonProps, Omit<ButtonHTMLAttributes<HTMLBut
  * <Button color="primary">Save changes</Button>
  * <Button color="destructive">Delete account</Button>
  * <Button variant="outline">Cancel</Button>
- * <Button variant="ghost" size="icon"><SearchIcon /></Button>
+ * <Button variant="ghost" size="sm" iconOnly aria-label="Search"><SearchIcon /></Button>
  * ```
  *
  * @see {@link https://base-ui.com/react/components/button | Base UI Button}
@@ -85,6 +90,7 @@ declare function Button$1({
   variant,
   color,
   size,
+  iconOnly,
   className,
   nativeButton,
   ref,

package/dist/{CodeBlock-BmB4Xaqq.js → CodeBlock-Bfp5PAg3.js}

@@ -1,6 +1,6 @@
-import { t as cx } from "./class-names-9UtZwb0J.js";
+import { t as cx } from "./class-names-BiMDVpUo.js";
 import { Select } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-Dejn5heL.js";
+import { t as CopyButton } from "./copy-button-DeK6KXEV.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";
@@ -170,11 +170,14 @@ function hasCustomCodeBlockContent(children) {
 *
 * @see {@link https://elements.ai-sdk.dev/components/code-block | AI Elements Code Block}
 */
-function CodeBlock({ className, code, language, showLineNumbers = false, isStreaming = false, onLanguageChange, children, ref, ...props }) {
+function CodeBlock({ language, ...props }) {
+	return /* @__PURE__ */ jsx(CodeBlockState, {
+		language,
+		...props
+	}, language);
+}
+function CodeBlockState({ className, code, language, showLineNumbers = false, isStreaming = false, onLanguageChange, children, ref, ...props }) {
 	const [internalLanguage, setInternalLanguage] = React.useState(language);
-	React.useEffect(() => {
-		setInternalLanguage(language);
-	}, [language]);
 	const setLanguage = React.useCallback((next) => {
 		setInternalLanguage(next);
 		onLanguageChange?.(next);

package/dist/{CodeBlock-BRajW4QU.d.ts → CodeBlock-gV4kZeCI.d.ts}

@@ -1,5 +1,5 @@
-import { m as SelectProps, t as Select } from "./Select-BeEsefzh.js";
-import { t as CopyButtonProps } from "./copy-button-DtPMgN7e.js";
+import { m as SelectProps, t as Select } from "./Select-B_13gg_J.js";
+import { t as CopyButtonProps } from "./copy-button-D7aAYA-2.js";
 import * as React from "react";
 import { BundledLanguage, ThemedToken } from "shiki";
 
@@ -63,14 +63,7 @@ interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
  * @see {@link https://elements.ai-sdk.dev/components/code-block | AI Elements Code Block}
  */
 declare function CodeBlock({
-  className,
-  code,
   language,
-  showLineNumbers,
-  isStreaming,
-  onLanguageChange,
-  children,
-  ref,
   ...props
 }: CodeBlockProps & {
   ref?: React.Ref<HTMLDivElement>;

package/dist/Collapsible-N64ASIQr.d.ts

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+
+//#region src/components/Collapsible.d.ts
+/**
+ * Props for the Collapsible.Root component.
+ */
+interface CollapsibleRootProps extends React.ComponentPropsWithoutRef<typeof Collapsible.Root> {
+  /** Skip the default design-system Collapsible classes for internal composition. */
+  unstyled?: boolean;
+}
+/**
+ * Props for the Collapsible.Trigger component.
+ */
+interface CollapsibleTriggerProps extends React.ComponentPropsWithoutRef<typeof Collapsible.Trigger> {
+  /** Skip the default design-system Collapsible classes for internal composition. */
+  unstyled?: boolean;
+}
+/**
+ * Props for the Collapsible.Panel component.
+ */
+interface CollapsiblePanelProps extends React.ComponentPropsWithoutRef<typeof Collapsible.Panel> {
+  /** Skip the default design-system Collapsible classes for internal composition. */
+  unstyled?: boolean;
+}
+/**
+ * Container that groups all collapsible parts. Renders a `<div>` element.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible.Root>
+ *   <Collapsible.Trigger>Show more</Collapsible.Trigger>
+ *   <Collapsible.Panel>Hidden content here</Collapsible.Panel>
+ * </Collapsible.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
+ */
+declare function CollapsibleRoot({
+  className,
+  unstyled,
+  ref,
+  ...props
+}: CollapsibleRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * Button that toggles the panel visibility. Renders a `<button>` element.
+ */
+declare function CollapsibleTrigger({
+  className,
+  unstyled,
+  ref,
+  ...props
+}: CollapsibleTriggerProps & {
+  ref?: React.Ref<HTMLButtonElement>;
+}): React.JSX.Element;
+/**
+ * The collapsible panel containing hidden content. Renders a `<div>` element.
+ * Supports CSS animations via `--collapsible-panel-height` variable.
+ */
+declare function CollapsiblePanel({
+  className,
+  unstyled,
+  ref,
+  ...props
+}: CollapsiblePanelProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+/**
+ * A collapsible panel controlled by a button.
+ * Useful for progressive disclosure of content.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Collapsible.Root>
+ *   <Collapsible.Trigger>Toggle content</Collapsible.Trigger>
+ *   <Collapsible.Panel>
+ *     <p>This content can be shown or hidden.</p>
+ *   </Collapsible.Panel>
+ * </Collapsible.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled state
+ * const [open, setOpen] = useState(false);
+ *
+ * <Collapsible.Root open={open} onOpenChange={setOpen}>
+ *   <Collapsible.Trigger>
+ *     {open ? 'Hide' : 'Show'} details
+ *   </Collapsible.Trigger>
+ *   <Collapsible.Panel>
+ *     <p>Detailed information here.</p>
+ *   </Collapsible.Panel>
+ * </Collapsible.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Default open
+ * <Collapsible.Root defaultOpen>
+ *   <Collapsible.Trigger>Collapse</Collapsible.Trigger>
+ *   <Collapsible.Panel>
+ *     <p>Initially visible content.</p>
+ *   </Collapsible.Panel>
+ * </Collapsible.Root>
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/collapsible | Base UI Collapsible}
+ */
+declare const Collapsible$1: {
+  Root: typeof CollapsibleRoot;
+  Trigger: typeof CollapsibleTrigger;
+  Panel: typeof CollapsiblePanel;
+};
+//#endregion
+export { CollapsibleTriggerProps as i, CollapsiblePanelProps as n, CollapsibleRootProps as r, Collapsible$1 as t };

package/dist/{Combobox-B9Fcd6q-.d.ts → Combobox-CYc37s5l.d.ts}

@@ -6,36 +6,28 @@ declare function ComboboxInput({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Input>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Input> & {
   ref?: React.Ref<HTMLInputElement>;
 }): React.JSX.Element;
 declare function ComboboxTrigger({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Trigger>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Trigger> & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 declare function Clear({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Clear>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Clear> & {
   ref?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 declare function ComboboxPositioner({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Positioner>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Positioner> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function ComboboxPopup({
@@ -43,63 +35,49 @@ declare function ComboboxPopup({
   tabIndex,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Popup>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Popup> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function ComboboxList({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.List>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.List> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function ComboboxItem({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Item>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Item> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function ItemIndicator({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.ItemIndicator>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.ItemIndicator> & {
   ref?: React.Ref<HTMLSpanElement>;
 }): React.JSX.Element;
 declare function ComboboxEmpty({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Empty>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Empty> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function ComboboxGroup({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.Group>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.Group> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 declare function ComboboxGroupLabel({
   className,
   ref,
   ...props
-}: Omit<React.ComponentPropsWithRef<typeof Combobox.GroupLabel>, "className"> & {
-  className?: string;
-} & {
+}: React.ComponentPropsWithRef<typeof Combobox.GroupLabel> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 /**

package/dist/{FileTree-CkVbIMWV.js → FileTree-3zYtrddG.js}

@@ -1,9 +1,13 @@
-import { t as cx } from "./class-names-9UtZwb0J.js";
-import { b as FolderOpenIcon, l as ChevronRightIcon, v as FileIcon, y as FolderIcon } from "./icons-CpfUer49.js";
+import { t as cx } from "./class-names-BiMDVpUo.js";
+import { C as FolderOpenIcon, S as FolderIcon, f as ChevronRightIcon, x as FileIcon } from "./icons-CQJ-aMnI.js";
+import { t as NavigationLink } from "./navigation-link-Cob7KBlM.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]")) : [];
+}
 function useFileTreeContext() {
 	const ctx = React.useContext(FileTreeContext);
 	if (!ctx) throw new Error("FileTree subcomponents must be used inside <FileTree>.");
@@ -25,8 +29,7 @@ function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect,
 		setFolderExpanded(path, !expanded.has(path));
 	}, [expanded, setFolderExpanded]);
 	const handleKeyDown = React.useCallback((event, path, kind) => {
-		const tree = event.currentTarget.closest("[role=\"tree\"]");
-		const nodes = tree ? [...tree.querySelectorAll(".file-tree__node")] : [];
+		const nodes = getVisibleFileTreeNodes(event.currentTarget.closest("[role=\"tree\"]"));
 		const currentIndex = nodes.indexOf(event.currentTarget);
 		const focusAt = (index) => nodes[index]?.focus();
 		switch (event.key) {
@@ -51,6 +54,7 @@ function useFileTreeNav({ expanded, initialFocusedPath, selectedPath, onSelect,
 				break;
 			case "Enter":
 			case " ":
+				if (kind === "file-link") return;
 				event.preventDefault();
 				onSelect(path);
 				if (kind === "folder") toggleFolderExpanded(path);
@@ -117,7 +121,7 @@ function getFirstFileTreePath(children) {
 * </FileTree>
 * ```
 */
-function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded, defaultExpanded, selectedPath = null, onSelect, onExpandedChange, children, ref, ...props }) {
+function FileTree({ appearance = "contained", 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;
@@ -137,7 +141,7 @@ function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded,
 	});
 	const treeRef = React.useRef(null);
 	React.useLayoutEffect(() => {
-		const nodes = [...treeRef.current?.querySelectorAll(".file-tree__node") ?? []];
+		const nodes = [...treeRef.current?.querySelectorAll(".file-tree__node") ?? []].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;
@@ -152,10 +156,11 @@ function FileTree({ className, "aria-label": ariaLabel = "File tree", expanded,
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			className: cx("file-tree", className),
+			"data-appearance": appearance,
 			...props,
 			children: /* @__PURE__ */ jsx("ul", {
 				ref: treeRef,
-				className: "file-tree__list",
+				className: "file-tree__list sigvelo-stack-list",
 				role: "tree",
 				"aria-label": ariaLabel,
 				children
@@ -173,8 +178,8 @@ function dataFlag(enabled) {
 function getFileTreeNodeTabIndex(focusedPath, path) {
 	return focusedPath === path ? 0 : -1;
 }
-function getFileTreeNodeIndent(level, offset) {
-	return `${level * 1.125 + offset}rem`;
+function getFileTreeNodeStyle(level) {
+	return { "--file-tree-level": level };
 }
 function FileTreeFolder({ className, path, name, level = 0, children, ref, ...props }) {
 	const { expanded, focusedPath, selectedPath, onFocus, onSelect, handleKeyDown, onExpandedChange } = useFileTreeContext();
@@ -213,7 +218,7 @@ function FileTreeFolder({ className, path, name, level = 0, children, ref, ...pr
 			onClick: handleClick,
 			onFocus: () => onFocus(path),
 			onKeyDown: (e) => handleKeyDown(e, path, "folder"),
-			style: { paddingInlineStart: getFileTreeNodeIndent(level, .5) },
+			style: getFileTreeNodeStyle(level),
 			children: [
 				/* @__PURE__ */ jsx("span", {
 					className: cx("file-tree__chevron", isExpanded && "file-tree__chevron--expanded"),
@@ -226,18 +231,21 @@ function FileTreeFolder({ className, path, name, level = 0, children, ref, ...pr
 					children: isExpanded ? /* @__PURE__ */ jsx(FolderOpenIcon, {}) : /* @__PURE__ */ jsx(FolderIcon, {})
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "file-tree__name",
+					className: "file-tree__name sigvelo-truncate",
 					children: name
 				})
 			]
-		}), isExpanded ? /* @__PURE__ */ jsx("ul", {
-			className: "file-tree__list",
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "file-tree__list file-tree__group",
 			role: "group",
+			"aria-hidden": !isExpanded,
+			"data-collapsed": dataFlag(!isExpanded),
+			inert: !isExpanded,
 			children: React.Children.map(children, (child) => renderNestedFileTreeChild(child, level))
-		}) : null]
+		})]
 	});
 }
-function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props }) {
+function FileTreeFile({ className, path, name, icon, render, level = 0, ref, ...props }) {
 	const { selectedPath, focusedPath, onFocus, onSelect, handleKeyDown } = useFileTreeContext();
 	const isSelected = selectedPath === path;
 	const isFocused = focusedPath === path;
@@ -247,7 +255,25 @@ function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props })
 		"aria-selected": isSelected,
 		className: cx("file-tree__file", className),
 		...props,
-		children: /* @__PURE__ */ jsxs("button", {
+		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",
+				children: name
+			})]
+		}) : /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "file-tree__node file-tree__node--file",
 			"data-selected": dataFlag(isSelected),
@@ -256,14 +282,14 @@ function FileTreeFile({ className, path, name, icon, level = 0, ref, ...props })
 			tabIndex: getFileTreeNodeTabIndex(focusedPath, path),
 			onClick: () => onSelect(path),
 			onFocus: () => onFocus(path),
-			onKeyDown: (e) => handleKeyDown(e, path, "file"),
-			style: { paddingInlineStart: getFileTreeNodeIndent(level, 1.5) },
+			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",
+				className: "file-tree__name sigvelo-truncate",
 				children: name
 			})]
 		})
@@ -281,7 +307,7 @@ function FileTreeIcon({ className, children, ref, ...props }) {
 function FileTreeName({ className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		ref,
-		className: cx("file-tree__name", className),
+		className: cx("file-tree__name", "sigvelo-truncate", className),
 		...props,
 		children
 	});