@mcp-b/react-components 0.2.2 → 0.3.0

package/dist/components/Tool.d.ts

@@ -1,18 +1,20 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
 import * as React from "react";
+import { DynamicToolUIPart, ToolUIPart } from "ai";
 
 //#region src/components/Tool.d.ts
-type ToolState = "input-streaming" | "input-available" | "approval-requested" | "approval-responded" | "output-available" | "output-error" | "output-denied";
-interface ToolPart {
-  state: ToolState;
-  input?: unknown;
-  output?: unknown;
-  errorText?: string;
-}
+/** An AI SDK tool part — static (`tool-*`) or dynamic. */
+type ToolPart = ToolUIPart | DynamicToolUIPart;
+type ToolState = ToolPart["state"];
 declare function getStatusBadge(status: ToolState): React.JSX.Element;
-interface ToolProps extends Omit<CollapsibleRootProps, "className" | "unstyled"> {
+interface ToolProps extends Omit<CollapsibleRootProps, "className" | "part" | "unstyled"> {
   className?: string;
-  /** Current state of the tool invocation. */
+  /**
+   * The AI SDK tool part, taken whole — ToolHeader/ToolInput/ToolOutput
+   * derive name, state, input, and output from it.
+   */
+  part?: ToolPart;
+  /** Current state of the tool invocation. Defaults to `part.state`. */
   state?: ToolState;
 }
 /**
@@ -23,11 +25,11 @@ interface ToolProps extends Omit<CollapsibleRootProps, "className" | "unstyled">
  *
  * @example
  * ```tsx
- * <Tool state="output-available">
- *   <ToolHeader type="function" toolName="search_web" />
+ * <Tool part={part}>
+ *   <ToolHeader />
  *   <ToolContent>
- *     <ToolInput input={{ query: "weather in Tokyo" }} />
- *     <ToolOutput output={<pre>{JSON.stringify(result, null, 2)}</pre>} />
+ *     <ToolInput />
+ *     <ToolOutput />
  *   </ToolContent>
  * </Tool>
  * ```
@@ -36,7 +38,8 @@ interface ToolProps extends Omit<CollapsibleRootProps, "className" | "unstyled">
  */
 declare function Tool({
   className,
-  state,
+  part,
+  state: stateProp,
   defaultOpen,
   ref,
   ...props
@@ -45,9 +48,9 @@ declare function Tool({
 }): React.JSX.Element;
 interface ToolHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "type" | "unstyled"> {
   className?: string;
-  /** The tool "type" (e.g. "function", "retrieval"). */
-  type: string;
-  /** The specific tool invoked (e.g. "search_web"). */
+  /** The tool "type" (e.g. "function", "retrieval"). Derived from `<Tool part>` when omitted. */
+  type?: string;
+  /** The specific tool invoked (e.g. "search_web"). Derived from `<Tool part>` when omitted. */
   toolName?: string;
   /** Optional human-readable title shown alongside the tool name. */
   title?: string;
@@ -59,9 +62,9 @@ interface ToolHeaderProps extends Omit<CollapsibleTriggerProps, "className" | "t
  */
 declare function ToolHeader({
   className,
-  type,
+  type: typeProp,
   toolName,
-  title,
+  title: titleProp,
   state: stateProp,
   ref,
   ...props
@@ -83,24 +86,25 @@ declare function ToolContent({
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 interface ToolInputProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** The input passed to the tool (rendered as a JSON code block). */
-  input: unknown;
+  /** The input passed to the tool (rendered as a JSON code block). Defaults to `part.input`. */
+  input?: unknown;
 }
 /**
- * Displays the tool input as a JSON code block.
+ * Displays the tool input as a JSON code block. Renders nothing while the
+ * input is still undefined.
  */
 declare function ToolInput({
   className,
-  input,
+  input: inputProp,
   ref,
   ...props
 }: ToolInputProps & {
   ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}): React.JSX.Element | null;
 interface ToolOutputProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** The tool output (any React node). Mutually exclusive with errorText. */
+  /** The tool output (any React node). Defaults to `part.output`. Mutually exclusive with errorText. */
   output?: unknown;
-  /** Error message, rendered with destructive styling. */
+  /** Error message, rendered with destructive styling. Defaults to `part.errorText`. */
   errorText?: string;
 }
 /**
@@ -108,8 +112,8 @@ interface ToolOutputProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 declare function ToolOutput({
   className,
-  output,
-  errorText,
+  output: outputProp,
+  errorText: errorTextProp,
   ref,
   ...props
 }: ToolOutputProps & {

package/dist/components/Tool.js

@@ -1,11 +1,12 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as WarningIcon, N as WrenchIcon, P as XIcon, d as DotIcon, k as SpinnerIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-Bf7JMKk-.js";
+import { A as SpinnerIcon, F as XIcon, N as WarningIcon, P as WrenchIcon, d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
 import { Badge } from "./Badge.js";
-import { i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "../CodeBlock-BrCoypnc.js";
+import { i as CodeBlockContent, r as CodeBlockContainer, t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
 import { formatStructuredCodeDisplay } from "../utils/structured-code.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { getToolName } from "ai";
 //#region src/components/Tool.tsx
 const STATE_TO_COLOR = {
 	"input-streaming": "primary",
@@ -56,20 +57,24 @@ function useToolContext() {
 *
 * @example
 * ```tsx
-* <Tool state="output-available">
-*   <ToolHeader type="function" toolName="search_web" />
+* <Tool part={part}>
+*   <ToolHeader />
 *   <ToolContent>
-*     <ToolInput input={{ query: "weather in Tokyo" }} />
-*     <ToolOutput output={<pre>{JSON.stringify(result, null, 2)}</pre>} />
+*     <ToolInput />
+*     <ToolOutput />
 *   </ToolContent>
 * </Tool>
 * ```
 *
 * @see {@link https://elements.ai-sdk.dev/components/tool | AI Elements Tool}
 */
-function Tool({ className, state, defaultOpen, ref, ...props }) {
+function Tool({ className, part, state: stateProp, defaultOpen, ref, ...props }) {
+	const state = stateProp ?? part?.state;
 	const autoOpen = state === "output-available" || state === "output-error" || state === "output-denied";
-	const ctx = React.useMemo(() => ({ state }), [state]);
+	const ctx = React.useMemo(() => ({
+		state,
+		part
+	}), [state, part]);
 	return /* @__PURE__ */ jsx(ToolContext.Provider, {
 		value: ctx,
 		children: /* @__PURE__ */ jsx(CollapsibleRoot, {
@@ -85,10 +90,12 @@ function Tool({ className, state, defaultOpen, ref, ...props }) {
 /**
 * Clickable header that shows the tool type, name, and state badge.
 */
-function ToolHeader({ className, type, toolName, title, state: stateProp, ref, ...props }) {
-	const { state: contextState } = useToolContext();
+function ToolHeader({ className, type: typeProp, toolName, title: titleProp, state: stateProp, ref, ...props }) {
+	const { state: contextState, part } = useToolContext();
 	const state = stateProp ?? contextState ?? "input-available";
-	const derivedName = type === "dynamic-tool" && toolName ? toolName : type.startsWith("tool-") ? type.split("-").slice(1).join("-") : toolName ?? type;
+	const type = typeProp ?? (part?.type === "dynamic-tool" ? "dynamic-tool" : "function");
+	const title = titleProp ?? part?.title;
+	const derivedName = part && typeProp === void 0 && toolName === void 0 ? getToolName(part) : type === "dynamic-tool" && toolName ? toolName : type.startsWith("tool-") ? type.split("-").slice(1).join("-") : toolName ?? type;
 	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
 		ref,
 		className: cx("tool__header", className),
@@ -138,11 +145,14 @@ function ToolContent({ className, children, ref, ...props }) {
 	});
 }
 /**
-* Displays the tool input as a JSON code block.
+* Displays the tool input as a JSON code block. Renders nothing while the
+* input is still undefined.
 */
-function ToolInput({ className, input, ref, ...props }) {
-	const { state } = useToolContext();
-	const formattedInput = React.useMemo(() => formatStructuredCodeDisplay(input), [input]);
+function ToolInput({ className, input: inputProp, ref, ...props }) {
+	const { state, part } = useToolContext();
+	const input = inputProp !== void 0 ? inputProp : part?.input;
+	const formattedInput = React.useMemo(() => input === void 0 ? null : formatStructuredCodeDisplay(input), [input]);
+	if (formattedInput === null) return null;
 	const isStreaming = state === "input-streaming";
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
@@ -163,7 +173,10 @@ function ToolInput({ className, input, ref, ...props }) {
 /**
 * Displays the tool output or error text.
 */
-function ToolOutput({ className, output, errorText, ref, ...props }) {
+function ToolOutput({ className, output: outputProp, errorText: errorTextProp, ref, ...props }) {
+	const { part } = useToolContext();
+	const output = outputProp !== void 0 ? outputProp : part && "output" in part ? part.output : void 0;
+	const errorText = errorTextProp !== void 0 ? errorTextProp : part && "errorText" in part ? part.errorText : void 0;
 	const formattedOutput = React.useMemo(() => {
 		if (output && typeof output === "object" && !React.isValidElement(output)) return formatStructuredCodeDisplay(output);
 		if (typeof output === "string") return {

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { D as RefreshIcon, n as ArrowLeftIcon, r as ArrowRightIcon, s as ChevronDownIcon } from "../icons-Bf7JMKk-.js";
+import { O as RefreshIcon, n as ArrowLeftIcon, r as ArrowRightIcon, s as ChevronDownIcon } 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/WorkspaceExplorer.d.ts

@@ -0,0 +1,102 @@
+import { A as CodeBlockLanguage } from "../CodeBlock-CxQXv3C4.js";
+import * as React from "react";
+import { FileInfo, Workspace } from "@cloudflare/shell";
+import { WorkspaceLike } from "@cloudflare/think/tools/workspace";
+
+//#region src/components/WorkspaceExplorer.d.ts
+/** Workspace summary, as returned by `Workspace.getWorkspaceInfo()` upstream. */
+type WorkspaceInfo = Awaited<ReturnType<Workspace["getWorkspaceInfo"]>>;
+/**
+ * Upstream's workspace shapes, taken whole: pass a `Workspace` from
+ * `@cloudflare/shell` or anything satisfying Think's `WorkspaceLike` (e.g. a
+ * cross-DO RPC proxy). The explorer only calls `readDir` and `readFile` —
+ * plus `getWorkspaceInfo` for the header's file-count chip when given a full
+ * `Workspace` — and ignores the rest.
+ */
+type WorkspaceSource = Workspace | WorkspaceLike;
+interface UseWorkspaceOptions {
+  /** Must be referentially stable (memoize in the app) — a new source resets the workspace. */
+  source: WorkspaceSource;
+  /** Root directory to list first. Defaults to "/". */
+  root?: string;
+}
+interface WorkspaceFileState {
+  path: string;
+  name: string;
+  /** `null` means the file is missing or binary, matching upstream `readFile`. */
+  content: string | null;
+  error: string | null;
+}
+interface WorkspaceState {
+  root: string;
+  /** Loaded directory listings, keyed by directory path. */
+  entriesByDirectory: Readonly<Record<string, readonly FileInfo[]>>;
+  /** Every loaded entry, keyed by its path. */
+  entryByPath: ReadonlyMap<string, FileInfo>;
+  expandedPaths: ReadonlySet<string>;
+  /** Update expansion; newly expanded directories load lazily. */
+  setExpandedPaths: (next: Set<string>) => void;
+  selectedPath: string | null;
+  /** Select a file and load its content (cached after the first read). */
+  selectFile: (path: string | null) => void;
+  /** The selected file once its read settles; null while loading. */
+  selectedFile: WorkspaceFileState | null;
+  /** Root listing in flight. */
+  isLoading: boolean;
+  /** Directory and file paths with a request in flight. */
+  loadingPaths: ReadonlySet<string>;
+  /** Root/directory listing failure. Per-file read errors live on the file state. */
+  error: string | null;
+  /** Workspace summary, when the source provides `getWorkspaceInfo`. */
+  info: WorkspaceInfo | null;
+  /** Reload the root, every expanded directory, and the selected file. */
+  refresh: () => void;
+}
+/**
+ * Headless state for browsing a Think workspace: lazy directory loading,
+ * cached file reads, expansion/selection, and refresh. Feed the result to
+ * `WorkspaceExplorer`, or render your own UI from it.
+ */
+declare function useWorkspace({
+  source,
+  root
+}: UseWorkspaceOptions): WorkspaceState;
+/** Best-effort syntax-highlighting language from a file path; unknown extensions render as plain text. */
+declare function inferWorkspaceLanguage(path: string): CodeBlockLanguage;
+interface WorkspaceExplorerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  workspace: WorkspaceState;
+  /** Header label. Defaults to "Workspace". */
+  title?: React.ReactNode;
+  /** Extra header actions, rendered next to the built-in refresh button. */
+  actions?: React.ReactNode;
+  /** Hide the file filter input. */
+  showFilter?: boolean;
+  filterPlaceholder?: string;
+  emptyState?: React.ReactNode;
+}
+/**
+ * A Think workspace file browser with a preview pane: lazy directory tree,
+ * filter, refresh, and syntax-highlighted file view with copy. Drive it with
+ * `useWorkspace(source)`.
+ *
+ * @example
+ * ```tsx
+ * const workspace = useWorkspace({ source: agent.workspace, root: "/workspace" });
+ * <WorkspaceExplorer workspace={workspace} />
+ * ```
+ */
+declare function WorkspaceExplorer({
+  workspace,
+  className,
+  title,
+  actions,
+  showFilter,
+  filterPlaceholder,
+  emptyState,
+  ref,
+  ...props
+}: WorkspaceExplorerProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { type FileInfo, UseWorkspaceOptions, WorkspaceExplorer, WorkspaceExplorerProps, WorkspaceFileState, WorkspaceInfo, WorkspaceSource, WorkspaceState, inferWorkspaceLanguage, useWorkspace };

package/dist/components/WorkspaceExplorer.js

@@ -0,0 +1,352 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { O as RefreshIcon, h as FileIcon, k as SearchIcon, n as ArrowLeftIcon } from "../icons-DQC4Zw5R.js";
+import { Button } from "./Button.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-D0c9Yj9U.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/WorkspaceExplorer.tsx
+function basename(path) {
+	return path.split("/").filter(Boolean).at(-1) ?? path;
+}
+function sortEntries(entries) {
+	return [...entries].sort((left, right) => {
+		if (left.type !== right.type) return left.type === "directory" ? -1 : 1;
+		return left.name.localeCompare(right.name);
+	});
+}
+function toErrorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+/**
+* Headless state for browsing a Think workspace: lazy directory loading,
+* cached file reads, expansion/selection, and refresh. Feed the result to
+* `WorkspaceExplorer`, or render your own UI from it.
+*/
+function useWorkspace({ source, root = "/" }) {
+	const [entriesByDirectory, setEntriesByDirectory] = React.useState({});
+	const [filesByPath, setFilesByPath] = React.useState({});
+	const [expandedPaths, setExpandedPathsState] = React.useState(/* @__PURE__ */ new Set());
+	const [selectedPath, setSelectedPath] = React.useState(null);
+	const [isLoading, setIsLoading] = React.useState(false);
+	const [loadingPaths, setLoadingPaths] = React.useState(/* @__PURE__ */ new Set());
+	const [error, setError] = React.useState(null);
+	const [info, setInfo] = React.useState(null);
+	const loadedDirectoriesRef = React.useRef(/* @__PURE__ */ new Set());
+	const markLoading = React.useCallback((path, loading) => {
+		setLoadingPaths((current) => {
+			const next = new Set(current);
+			if (loading) next.add(path);
+			else next.delete(path);
+			return next;
+		});
+	}, []);
+	const loadDirectory = React.useCallback(async (path, { force = false } = {}) => {
+		if (!force && loadedDirectoriesRef.current.has(path)) return;
+		markLoading(path, true);
+		try {
+			const entries = sortEntries(await source.readDir(path));
+			loadedDirectoriesRef.current.add(path);
+			setEntriesByDirectory((current) => ({
+				...current,
+				[path]: entries
+			}));
+			setError(null);
+		} catch (listError) {
+			setError(toErrorMessage(listError));
+		} finally {
+			markLoading(path, false);
+		}
+	}, [source, markLoading]);
+	const loadFile = React.useCallback(async (path, { force = false } = {}) => {
+		if (!force && Object.hasOwn(filesByPath, path)) return;
+		markLoading(path, true);
+		try {
+			const content = await source.readFile(path);
+			setFilesByPath((current) => ({
+				...current,
+				[path]: {
+					path,
+					name: basename(path),
+					content,
+					error: null
+				}
+			}));
+		} catch (readError) {
+			setFilesByPath((current) => ({
+				...current,
+				[path]: {
+					path,
+					name: basename(path),
+					content: null,
+					error: toErrorMessage(readError)
+				}
+			}));
+		} finally {
+			markLoading(path, false);
+		}
+	}, [
+		source,
+		filesByPath,
+		markLoading
+	]);
+	const loadInfo = React.useCallback(async () => {
+		if (!("getWorkspaceInfo" in source)) return;
+		try {
+			setInfo(await source.getWorkspaceInfo());
+		} catch {
+			setInfo(null);
+		}
+	}, [source]);
+	React.useEffect(() => {
+		setEntriesByDirectory({});
+		setFilesByPath({});
+		setExpandedPathsState(/* @__PURE__ */ new Set());
+		setSelectedPath(null);
+		setError(null);
+		setInfo(null);
+		loadedDirectoriesRef.current = /* @__PURE__ */ new Set();
+		setIsLoading(true);
+		Promise.all([loadDirectory(root, { force: true }), loadInfo()]).finally(() => setIsLoading(false));
+	}, [
+		loadDirectory,
+		loadInfo,
+		root
+	]);
+	const setExpandedPaths = React.useCallback((next) => {
+		setExpandedPathsState((current) => {
+			for (const path of next) if (!current.has(path)) loadDirectory(path);
+			return next;
+		});
+	}, [loadDirectory]);
+	const selectFile = React.useCallback((path) => {
+		setSelectedPath(path);
+		if (path !== null) loadFile(path);
+	}, [loadFile]);
+	const refresh = React.useCallback(() => {
+		(async () => {
+			setIsLoading(true);
+			try {
+				await Promise.all([...[root, ...expandedPaths].map((path) => loadDirectory(path, { force: true })), loadInfo()]);
+				if (selectedPath) await loadFile(selectedPath, { force: true });
+			} finally {
+				setIsLoading(false);
+			}
+		})();
+	}, [
+		expandedPaths,
+		loadDirectory,
+		loadFile,
+		loadInfo,
+		root,
+		selectedPath
+	]);
+	return {
+		root,
+		entriesByDirectory,
+		entryByPath: React.useMemo(() => {
+			const map = /* @__PURE__ */ new Map();
+			for (const entries of Object.values(entriesByDirectory)) for (const entry of entries) map.set(entry.path, entry);
+			return map;
+		}, [entriesByDirectory]),
+		expandedPaths,
+		setExpandedPaths,
+		selectedPath,
+		selectFile,
+		selectedFile: selectedPath ? filesByPath[selectedPath] ?? null : null,
+		isLoading,
+		loadingPaths,
+		error,
+		info,
+		refresh
+	};
+}
+const LANGUAGE_BY_EXTENSION = {
+	ts: "ts",
+	mts: "ts",
+	cts: "ts",
+	tsx: "tsx",
+	js: "js",
+	mjs: "js",
+	cjs: "js",
+	jsx: "jsx",
+	json: "json",
+	jsonc: "jsonc",
+	css: "css",
+	html: "html",
+	md: "md",
+	mdx: "mdx",
+	sh: "bash",
+	bash: "bash",
+	zsh: "bash",
+	yml: "yaml",
+	yaml: "yaml",
+	toml: "toml",
+	py: "python",
+	rs: "rust",
+	go: "go",
+	sql: "sql",
+	xml: "xml",
+	svg: "xml",
+	vue: "vue",
+	svelte: "svelte"
+};
+/** Best-effort syntax-highlighting language from a file path; unknown extensions render as plain text. */
+function inferWorkspaceLanguage(path) {
+	return LANGUAGE_BY_EXTENSION[basename(path).split(".").at(-1)?.toLowerCase() ?? ""] ?? "text";
+}
+/**
+* A Think workspace file browser with a preview pane: lazy directory tree,
+* filter, refresh, and syntax-highlighted file view with copy. Drive it with
+* `useWorkspace(source)`.
+*
+* @example
+* ```tsx
+* const workspace = useWorkspace({ source: agent.workspace, root: "/workspace" });
+* <WorkspaceExplorer workspace={workspace} />
+* ```
+*/
+function WorkspaceExplorer({ workspace, className, title = "Workspace", actions, showFilter = true, filterPlaceholder = "Filter files...", emptyState, ref, ...props }) {
+	const [view, setView] = React.useState("tree");
+	const [filter, setFilter] = React.useState("");
+	const filterQuery = filter.trim().toLowerCase();
+	const { root, entriesByDirectory, entryByPath, expandedPaths, setExpandedPaths, selectedPath, selectFile, selectedFile, isLoading, loadingPaths, error, info, refresh } = workspace;
+	const handleSelect = React.useCallback((path) => {
+		if (entryByPath.get(path)?.type === "directory") return;
+		selectFile(path);
+		setView("file");
+	}, [entryByPath, selectFile]);
+	const filteredFiles = React.useMemo(() => {
+		if (!filterQuery) return [];
+		return sortEntries([...entryByPath.values()].filter((entry) => entry.type !== "directory" && entry.path.toLowerCase().includes(filterQuery)));
+	}, [entryByPath, filterQuery]);
+	const renderEntry = (entry) => {
+		if (entry.type === "directory") return /* @__PURE__ */ jsx(FileTreeFolder, {
+			path: entry.path,
+			name: entry.name,
+			children: (entriesByDirectory[entry.path] ?? []).map(renderEntry)
+		}, entry.path);
+		return /* @__PURE__ */ jsx(FileTreeFile, {
+			path: entry.path,
+			name: entry.name
+		}, entry.path);
+	};
+	const rootEntries = entriesByDirectory[root] ?? [];
+	const showFileView = view === "file" && selectedPath !== null;
+	const selectedFileLoading = selectedPath !== null && loadingPaths.has(selectedPath);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("workspace-explorer", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "workspace-explorer__header",
+			children: [showFileView ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				color: "neutral",
+				size: "sm",
+				onClick: () => setView("tree"),
+				"aria-label": "Back to files",
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, { "aria-hidden": "true" })
+			}), /* @__PURE__ */ jsx("span", {
+				className: "workspace-explorer__path",
+				title: selectedPath,
+				children: selectedPath
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "workspace-explorer__title",
+				children: title
+			}), info ? /* @__PURE__ */ jsxs("span", {
+				className: "workspace-explorer__count",
+				children: [info.fileCount.toLocaleString(), " files"]
+			}) : null] }), /* @__PURE__ */ jsxs("div", {
+				className: "workspace-explorer__actions",
+				children: [actions, /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					color: "neutral",
+					size: "sm",
+					onClick: refresh,
+					disabled: isLoading,
+					"aria-label": "Refresh workspace",
+					children: /* @__PURE__ */ jsx(RefreshIcon, { "aria-hidden": "true" })
+				})]
+			})]
+		}), showFileView ? /* @__PURE__ */ jsx(WorkspaceFileView, {
+			file: selectedFile,
+			isLoading: selectedFileLoading
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "workspace-explorer__body",
+			children: [showFilter ? /* @__PURE__ */ jsxs("label", {
+				className: "workspace-explorer__filter",
+				children: [/* @__PURE__ */ jsx(SearchIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("input", {
+					type: "search",
+					value: filter,
+					onChange: (event) => setFilter(event.currentTarget.value),
+					placeholder: filterPlaceholder,
+					"aria-label": "Filter workspace files",
+					autoComplete: "off"
+				})]
+			}) : null, error ? /* @__PURE__ */ jsx("div", {
+				className: "workspace-explorer__empty",
+				role: "alert",
+				children: error
+			}) : filterQuery ? filteredFiles.length > 0 ? /* @__PURE__ */ jsx(FileTree, {
+				className: "workspace-explorer__tree",
+				selectedPath,
+				onSelect: handleSelect,
+				"aria-label": "Workspace files",
+				children: filteredFiles.map((entry) => /* @__PURE__ */ jsx(FileTreeFile, {
+					path: entry.path,
+					name: entry.path
+				}, entry.path))
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "workspace-explorer__empty",
+				children: "No matching files"
+			}) : rootEntries.length > 0 ? /* @__PURE__ */ jsx(FileTree, {
+				className: "workspace-explorer__tree",
+				expanded: new Set(expandedPaths),
+				onExpandedChange: setExpandedPaths,
+				selectedPath,
+				onSelect: handleSelect,
+				"aria-label": "Workspace files",
+				children: rootEntries.map(renderEntry)
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "workspace-explorer__empty",
+				children: isLoading ? "Loading workspace..." : emptyState ?? "No workspace files"
+			})]
+		})]
+	});
+}
+function WorkspaceFileView({ file, isLoading }) {
+	if (isLoading) return /* @__PURE__ */ jsx("div", {
+		className: "workspace-explorer__empty",
+		children: "Loading file..."
+	});
+	if (!file) return /* @__PURE__ */ jsx("div", {
+		className: "workspace-explorer__empty",
+		children: "File preview is unavailable."
+	});
+	if (file.error) return /* @__PURE__ */ jsxs("div", {
+		className: "workspace-explorer__empty",
+		role: "alert",
+		children: ["Could not preview this file: ", file.error]
+	});
+	if (file.content === null) return /* @__PURE__ */ jsx("div", {
+		className: "workspace-explorer__empty",
+		children: "This file has no text preview."
+	});
+	if (file.content.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "workspace-explorer__empty",
+		children: "This file is empty."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "workspace-explorer__file",
+		children: /* @__PURE__ */ jsxs(CodeBlock, {
+			className: "workspace-explorer__code",
+			code: file.content,
+			language: inferWorkspaceLanguage(file.path),
+			showLineNumbers: true,
+			children: [/* @__PURE__ */ jsxs(CodeBlockHeader, { children: [/* @__PURE__ */ jsxs(CodeBlockTitle, { children: [/* @__PURE__ */ jsx(FileIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx(CodeBlockFilename, { children: file.name })] }), /* @__PURE__ */ jsx(CodeBlockActions, { children: /* @__PURE__ */ jsx(CodeBlockCopyButton, {}) })] }), /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })]
+		})
+	});
+}
+//#endregion
+export { WorkspaceExplorer, inferWorkspaceLanguage, useWorkspace };