@tangle-network/ui 11.12.0 → 11.13.0

package/dist/files/file-artifact-pane.js

@@ -0,0 +1,114 @@
+import { focusRing } from "../lib/focus.js";
+import { ArtifactPane } from "../primitives/artifact-pane.js";
+import { detectFileFormat } from "./file-format.js";
+import { FilePreview } from "./file-preview.js";
+import { FileTabs } from "./file-tabs.js";
+import { Suspense, lazy } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Download, X } from "lucide-react";
+//#region src/files/file-artifact-pane.tsx
+const LazyDocumentEditorPane = lazy(async () => {
+	return { default: (await import("../editor/document-editor-pane.js")).DocumentEditorPane };
+});
+/**
+* FileArtifactPane — opinionated artifact frame for file previews with tabs and
+* header actions. The body is `FilePreview`, so every kind it renders (image,
+* PDF, video, audio, CSV, spreadsheet, markdown, code, text) renders here too;
+* `onDownload` drives both the header button and the body's download cards.
+*/
+function FileArtifactPane({ filename, content, blobUrl, mimeType, size, onClose, onDownload, urlTransform, path, tabs = [], activeTabId, onTabSelect, onTabClose, eyebrow = "Artifact", meta, toolbar, footer, className, headerClassName, hideTitleBlock, editor }) {
+	const paneTabs = tabs.length > 0 && onTabSelect && onTabClose ? /* @__PURE__ */ jsx(FileTabs, {
+		tabs,
+		activeId: activeTabId,
+		onSelect: onTabSelect,
+		onClose: onTabClose
+	}) : void 0;
+	const isEditableMarkdown = (detectFileFormat(filename, mimeType) === "markdown" || (path ? detectFileFormat(path, mimeType) === "markdown" : false)) && editor?.enabled;
+	const headerActions = onDownload || onClose ? /* @__PURE__ */ jsxs(Fragment$1, { children: [onDownload && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `Download ${filename}`,
+		onClick: onDownload,
+		className: `rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
+		children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
+	}), onClose && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": `Close ${filename}`,
+		onClick: onClose,
+		className: `rounded-[var(--radius-sm)] p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground ${focusRing}`,
+		children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+	})] }) : void 0;
+	if (isEditableMarkdown) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(ArtifactPane, {
+			eyebrow,
+			title: filename,
+			subtitle: path,
+			meta,
+			toolbar,
+			footer,
+			className,
+			tabs: paneTabs,
+			headerActions,
+			headerClassName,
+			hideTitleBlock,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground",
+				children: "Loading editor…"
+			})
+		}),
+		children: /* @__PURE__ */ jsx(LazyDocumentEditorPane, {
+			eyebrow,
+			title: filename,
+			subtitle: path,
+			meta,
+			toolbar,
+			footer,
+			className,
+			tabs: paneTabs,
+			headerActions,
+			headerClassName,
+			hideTitleBlock,
+			markdown: content ?? "",
+			savedMarkdown: editor.savedContent,
+			urlTransform,
+			mode: editor.mode,
+			defaultMode: editor.defaultMode,
+			onModeChange: editor.onModeChange,
+			backend: editor.backend,
+			collaboration: editor.collaboration,
+			placeholder: editor.placeholder,
+			autoFocus: editor.autoFocus,
+			readOnly: editor.readOnly,
+			saving: editor.saving,
+			saveLabel: editor.saveLabel,
+			onChange: editor.onChange,
+			onSave: editor.onSave,
+			previewClassName: editor.previewClassName,
+			editorClassName: editor.editorClassName
+		})
+	});
+	return /* @__PURE__ */ jsx(ArtifactPane, {
+		eyebrow,
+		title: filename,
+		subtitle: path,
+		meta,
+		toolbar,
+		footer,
+		className,
+		tabs: paneTabs,
+		headerActions,
+		headerClassName,
+		hideTitleBlock,
+		children: /* @__PURE__ */ jsx(FilePreview, {
+			filename,
+			content,
+			blobUrl,
+			mimeType,
+			size,
+			urlTransform,
+			onDownload,
+			hideHeader: true
+		})
+	});
+}
+//#endregion
+export { FileArtifactPane };

package/dist/files/file-format.d.ts

@@ -0,0 +1,51 @@
+//#region src/files/file-format.d.ts
+/**
+ * Shared file-format detection for every file surface — the preview pane, the
+ * artifact pane, and code rendering. Centralising extension/MIME → format logic
+ * keeps chat and artifact views consistent and avoids the same mapping drifting
+ * across components.
+ */
+export type FileFormat = "pdf" | "image" | "video" | "audio" | "csv" | "spreadsheet" | "code" | "json" | "yaml" | "markdown" | "text" | "unknown";
+/**
+ * How a file surface renders a file. Every format maps to its own renderer;
+ * `unknown` becomes `binary`, which renders string content as text and offers a
+ * download for anything else.
+ */
+export type FilePreviewKind = Exclude<FileFormat, "unknown"> | "binary";
+/**
+ * Lowercased trailing extension. Returns "" for a name with no extension
+ * ("README", "json" → ""), and the post-dot name for a dotfile (".bashrc" →
+ * "bashrc"). Directory components are ignored so dots in a directory name don't
+ * leak in ("my.config/file" → "").
+ */
+export declare function fileExtension(filename: string): string;
+/**
+ * Resolve a filename + optional MIME type to the renderer format. A specific,
+ * authoritative MIME type wins over the extension; otherwise the extension
+ * decides; a generic text/plain payload is the final fallback.
+ */
+export declare function detectFileFormat(filename: string, mimeType?: string): FileFormat;
+/**
+ * The preview renderer for a file, from its name and optional MIME type only.
+ * Same precedence as `detectFileFormat` (MIME outranks extension); a file that
+ * matches nothing is `binary`. Content is not an input: the preview renders a
+ * `binary` file's string content as text and offers a download otherwise.
+ */
+export declare function resolveFilePreviewKind(filename: string, mimeType?: string): FilePreviewKind;
+/** Human-facing label for a detected format or preview kind. */
+export declare function getFormatLabel(format: FileFormat | FilePreviewKind): string;
+/**
+ * Map a filename (or path) to a highlight.js language id for CodeBlock. Returns
+ * undefined when there is no confident mapping; CodeBlock then renders themed
+ * monospace and lets the highlighter auto-detect, so callers never need a
+ * bespoke language table.
+ */
+export declare function getSyntaxLanguage(filename: string): string | undefined;
+/**
+ * Highlight language for a file already classified as a code-like format.
+ * `json`/`yaml` are their own highlight language even when detected purely from
+ * a MIME type on an extensionless file (where the extension can't reveal it);
+ * any other code format keys off the extension.
+ */
+export declare function getCodeLanguage(filename: string, format: FileFormat | FilePreviewKind): string | undefined;
+//#endregion

package/dist/{file-format-BgXbr-Ib.js → files/file-format.js}

@@ -157,4 +157,4 @@ function getCodeLanguage(filename, format) {
 	return getSyntaxLanguage(filename);
 }
 //#endregion
-export { getSyntaxLanguage as a, getFormatLabel as i, fileExtension as n, resolveFilePreviewKind as o, getCodeLanguage as r, detectFileFormat as t };
+export { detectFileFormat, fileExtension, getCodeLanguage, getFormatLabel, getSyntaxLanguage, resolveFilePreviewKind };

package/dist/files/file-preview.d.ts

@@ -0,0 +1,27 @@
+import { UrlTransform } from "react-markdown";
+//#region src/files/file-preview.d.ts
+export interface FilePreviewProps {
+  filename: string;
+  content?: string;
+  /** Object URL or remote URL for binary content: images, PDF, video, audio. */
+  blobUrl?: string;
+  mimeType?: string;
+  /** Size in bytes; download cards show it when known. */
+  size?: number;
+  /** Transform Markdown links and images through the shared URL policy. */
+  urlTransform?: UrlTransform;
+  onClose?: () => void;
+  onDownload?: () => void;
+  hideHeader?: boolean;
+  className?: string;
+}
+/** Rows rendered by the CSV preview; the count line reports the total. */
+export declare const CSV_PREVIEW_ROW_LIMIT = 500;
+/**
+ * Split CSV text into rows of cells (RFC 4180): a quoted cell may hold commas,
+ * line breaks, and doubled quotes. Unquoted cells are trimmed; blank lines and
+ * a trailing line break add no row.
+ */
+export declare function parseCsv(content: string): string[][];
+export declare function FilePreview({ filename, content, blobUrl, mimeType, size, urlTransform, onClose, onDownload, hideHeader, className }: FilePreviewProps): import("react").JSX.Element;
+//#endregion

package/dist/files/file-preview.js

@@ -0,0 +1,359 @@
+import { focusRingInset } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "../primitives/button.js";
+import { CodeBlock, CopyButton } from "../markdown/code-block.js";
+import { formatBytes } from "../utils/format.js";
+import { fileExtension, getCodeLanguage, getFormatLabel, resolveFilePreviewKind } from "./file-format.js";
+import { Markdown } from "../markdown/markdown.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Download, FileSpreadsheet, FileText, Music, X } from "lucide-react";
+//#region src/files/file-preview.tsx
+/**
+* FilePreview — universal file renderer.
+*
+* Renders any file type:
+* - PDF: embedded viewer at full pane height
+* - Images: fit to the pane on a checker ground; click toggles natural size
+* - Video / audio: native players
+* - CSV: sticky-header table, capped at CSV_PREVIEW_ROW_LIMIT rows
+* - XLSX / XLS: download card
+* - Code (py/json/yaml/ts/js): syntax-highlighted, line-numbered viewer
+* - Markdown: rendered prose
+* - Text: monospace preview
+* - Anything else: text when content is a string, otherwise a download card
+*/
+/** Rows rendered by the CSV preview; the count line reports the total. */
+const CSV_PREVIEW_ROW_LIMIT = 500;
+const NEEDS_DOWNLOAD_LINK = "This file needs a download link to preview.";
+const NO_INLINE_PREVIEW = "This file type has no inline preview.";
+const NO_INLINE_CONTENT = "This file has no inline content to preview yet.";
+function CodePreview({ content, filename, kind }) {
+	const lineCount = content.split("\n").length;
+	const language = getCodeLanguage(filename, kind);
+	const labelToken = fileExtension(filename) || language || "txt";
+	return /* @__PURE__ */ jsx(CodeBlock, {
+		code: content,
+		language,
+		label: `${labelToken} · ${lineCount} lines`,
+		showLineNumbers: true,
+		className: "max-h-[70vh] overflow-auto",
+		children: /* @__PURE__ */ jsx(CopyButton, { text: content })
+	});
+}
+/**
+* Split CSV text into rows of cells (RFC 4180): a quoted cell may hold commas,
+* line breaks, and doubled quotes. Unquoted cells are trimmed; blank lines and
+* a trailing line break add no row.
+*/
+function parseCsv(content) {
+	const rows = [];
+	let row = [];
+	let cell = "";
+	let quoted = false;
+	let inQuotes = false;
+	const endCell = () => {
+		row.push(quoted ? cell : cell.trim());
+		cell = "";
+		quoted = false;
+	};
+	const endRow = () => {
+		endCell();
+		if (row.length > 1 || row[0] !== "") rows.push(row);
+		row = [];
+	};
+	for (let index = 0; index < content.length; index += 1) {
+		const char = content[index];
+		if (inQuotes) {
+			if (char === "\"") {
+				if (content[index + 1] === "\"") {
+					cell += "\"";
+					index += 1;
+				} else inQuotes = false;
+			} else cell += char;
+			continue;
+		}
+		if (char === "\"") {
+			inQuotes = true;
+			quoted = true;
+			continue;
+		}
+		if (char === ",") {
+			endCell();
+			continue;
+		}
+		if (char === "\r" || char === "\n") {
+			if (char === "\r" && content[index + 1] === "\n") index += 1;
+			endRow();
+			continue;
+		}
+		cell += char;
+	}
+	if (cell.length > 0 || quoted || row.length > 0) endRow();
+	return rows;
+}
+function CsvPreview({ content }) {
+	const [headers = [], ...body] = parseCsv(content);
+	if (headers.length === 0) return null;
+	const visible = body.slice(0, 500);
+	const columnCount = Math.max(headers.length, ...visible.map((cells) => cells.length));
+	const capped = body.length > visible.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-h-0 overflow-auto rounded-[var(--radius-md)] border border-border",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full text-sm",
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: Array.from({ length: columnCount }, (_, column) => /* @__PURE__ */ jsx("th", {
+					className: "sticky top-0 whitespace-nowrap border-b border-border bg-card px-3 py-2 text-left text-xs font-semibold text-foreground",
+					children: headers[column] ?? ""
+				}, column)) }) }), /* @__PURE__ */ jsx("tbody", { children: visible.map((cells, rowIndex) => /* @__PURE__ */ jsx("tr", {
+					className: "border-b border-border hover:bg-accent",
+					children: Array.from({ length: columnCount }, (_, column) => /* @__PURE__ */ jsx("td", {
+						className: "whitespace-nowrap px-3 py-1.5 font-mono text-xs text-foreground",
+						children: cells[column] ?? ""
+					}, column))
+				}, rowIndex)) })]
+			})
+		}), /* @__PURE__ */ jsxs("p", {
+			className: "shrink-0 text-xs text-muted-foreground",
+			children: [capped ? `Showing ${visible.length} of ${body.length} rows` : `${body.length} ${body.length === 1 ? "row" : "rows"}`, ` · ${columnCount} ${columnCount === 1 ? "column" : "columns"}`]
+		})]
+	});
+}
+const CHECKER_STYLE = {
+	backgroundColor: "var(--color-background)",
+	backgroundImage: "repeating-conic-gradient(var(--color-muted) 0% 25%, transparent 0% 50%)",
+	backgroundSize: "16px 16px"
+};
+function ImagePreview({ src, filename }) {
+	const [naturalSize, setNaturalSize] = useState(false);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-[12rem] flex-1 overflow-auto rounded-[var(--radius-md)] border border-border",
+		style: CHECKER_STYLE,
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setNaturalSize((value) => !value),
+			"aria-pressed": naturalSize,
+			"aria-label": naturalSize ? "Fit image to pane" : "Show image at natural size",
+			className: cn("flex items-center justify-center", focusRingInset, naturalSize ? "m-auto cursor-zoom-out" : "h-full w-full cursor-zoom-in p-4"),
+			children: /* @__PURE__ */ jsx("img", {
+				src,
+				alt: filename,
+				draggable: false,
+				className: naturalSize ? "max-w-none" : "max-h-full max-w-full object-contain"
+			})
+		})
+	});
+}
+function PdfPreview({ blobUrl, filename, size, onDownload }) {
+	return /* @__PURE__ */ jsx("object", {
+		data: blobUrl,
+		type: "application/pdf",
+		title: filename,
+		className: "min-h-[24rem] w-full flex-1 rounded-[var(--radius-md)]",
+		children: /* @__PURE__ */ jsx(DownloadCard, {
+			filename,
+			size,
+			sentence: "This browser does not show PDFs inline.",
+			onDownload,
+			className: "h-full"
+		})
+	});
+}
+function VideoPreview({ src, filename }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex min-h-[12rem] flex-1 items-center justify-center overflow-hidden rounded-[var(--radius-md)] border border-border bg-background",
+		children: /* @__PURE__ */ jsx("video", {
+			controls: true,
+			preload: "metadata",
+			src,
+			"aria-label": filename,
+			className: "max-h-full max-w-full"
+		})
+	});
+}
+function AudioPreview({ src, filename }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-4 rounded-[var(--radius-md)] border border-border bg-background px-6 py-10",
+		children: [
+			/* @__PURE__ */ jsx(Music, { className: "h-10 w-10 text-muted-foreground opacity-60" }),
+			/* @__PURE__ */ jsx("p", {
+				className: "max-w-full truncate text-sm font-medium text-foreground",
+				children: filename
+			}),
+			/* @__PURE__ */ jsx("audio", {
+				controls: true,
+				preload: "metadata",
+				src,
+				"aria-label": filename,
+				className: "w-full max-w-md"
+			})
+		]
+	});
+}
+function TextPreview({ content }) {
+	return /* @__PURE__ */ jsx("pre", {
+		className: "bg-card rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]",
+		children: content
+	});
+}
+function MarkdownPreview({ content, urlTransform }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-[var(--radius-md)] border border-border bg-background p-5",
+		children: /* @__PURE__ */ jsx(Markdown, {
+			urlTransform,
+			children: content
+		})
+	});
+}
+/**
+* One muted sentence plus the filename, its size when known, and a Download
+* button when the host wires `onDownload`. Serves spreadsheets, binaries, and
+* every kind whose source (blob or text) is missing.
+*/
+function DownloadCard({ filename, size, sentence, icon: Icon = FileText, onDownload, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border bg-background px-6 py-16 text-center", className),
+		children: [
+			/* @__PURE__ */ jsx(Icon, { className: "mb-3 h-12 w-12 text-muted-foreground opacity-40" }),
+			/* @__PURE__ */ jsx("p", {
+				className: "max-w-full truncate text-sm font-medium text-foreground",
+				children: filename
+			}),
+			size !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-muted-foreground",
+				children: formatBytes(size)
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-3 max-w-md text-sm text-muted-foreground",
+				children: sentence
+			}),
+			onDownload && /* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				className: "mt-5",
+				onClick: onDownload,
+				children: [/* @__PURE__ */ jsx(Download, {}), "Download"]
+			})
+		]
+	});
+}
+function PreviewBody({ kind, filename, content, blobUrl, size, urlTransform, onDownload }) {
+	const hasText = typeof content === "string";
+	const card = (sentence, icon) => /* @__PURE__ */ jsx(DownloadCard, {
+		filename,
+		size,
+		sentence,
+		icon,
+		onDownload
+	});
+	switch (kind) {
+		case "pdf":
+			if (blobUrl) return /* @__PURE__ */ jsx(PdfPreview, {
+				blobUrl,
+				filename,
+				size,
+				onDownload
+			});
+			return card(NEEDS_DOWNLOAD_LINK);
+		case "image":
+			if (blobUrl) return /* @__PURE__ */ jsx(ImagePreview, {
+				src: blobUrl,
+				filename
+			});
+			if (hasText) return /* @__PURE__ */ jsx(CodePreview, {
+				content,
+				filename,
+				kind: "code"
+			});
+			return card(NEEDS_DOWNLOAD_LINK);
+		case "video":
+			if (blobUrl) return /* @__PURE__ */ jsx(VideoPreview, {
+				src: blobUrl,
+				filename
+			});
+			return card(NEEDS_DOWNLOAD_LINK);
+		case "audio":
+			if (blobUrl) return /* @__PURE__ */ jsx(AudioPreview, {
+				src: blobUrl,
+				filename
+			});
+			return card(NEEDS_DOWNLOAD_LINK, Music);
+		case "csv":
+			if (hasText) return /* @__PURE__ */ jsx(CsvPreview, { content });
+			return card(NO_INLINE_CONTENT, FileSpreadsheet);
+		case "code":
+		case "json":
+		case "yaml":
+			if (hasText) return /* @__PURE__ */ jsx(CodePreview, {
+				content,
+				filename,
+				kind
+			});
+			return card(NO_INLINE_CONTENT);
+		case "markdown":
+			if (hasText) return /* @__PURE__ */ jsx(MarkdownPreview, {
+				content,
+				urlTransform
+			});
+			return card(NO_INLINE_CONTENT);
+		case "text":
+			if (hasText) return /* @__PURE__ */ jsx(TextPreview, { content });
+			return card(NO_INLINE_CONTENT);
+		case "spreadsheet": return card("Download to open this workbook in a spreadsheet app.", FileSpreadsheet);
+		case "binary":
+			if (hasText) return /* @__PURE__ */ jsx(TextPreview, { content });
+			return card(blobUrl ? NO_INLINE_PREVIEW : NEEDS_DOWNLOAD_LINK);
+	}
+}
+function FilePreview({ filename, content, blobUrl, mimeType, size, urlTransform, onClose, onDownload, hideHeader = false, className }) {
+	const kind = resolveFilePreviewKind(filename, mimeType);
+	const previewLabel = getFormatLabel(kind);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col h-full", className),
+		children: [!hideHeader && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 px-3 py-2 border-b border-border shrink-0",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "truncate text-sm font-medium text-foreground",
+						children: filename
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mt-0.5 text-[11px] uppercase tracking-[0.12em] text-muted-foreground",
+						children: previewLabel
+					})]
+				}),
+				onDownload && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onDownload,
+					"aria-label": `Download ${filename}`,
+					className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+					children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
+				}),
+				onClose && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					"aria-label": `Close ${filename}`,
+					className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-accent text-muted-foreground hover:text-foreground transition-colors",
+					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 flex-1 flex-col overflow-auto p-3",
+			children: /* @__PURE__ */ jsx(PreviewBody, {
+				kind,
+				filename,
+				content,
+				blobUrl,
+				size,
+				urlTransform,
+				onDownload
+			})
+		})]
+	});
+}
+//#endregion
+export { CSV_PREVIEW_ROW_LIMIT, FilePreview, parseCsv };

package/dist/files/file-tabs.d.ts

@@ -0,0 +1,19 @@
+//#region src/files/file-tabs.d.ts
+/**
+ * FileTabs — tab bar for open files in the preview panel.
+ */
+export interface FileTabData {
+  id: string;
+  name: string;
+  path: string;
+  dirty?: boolean;
+}
+export interface FileTabsProps {
+  tabs: FileTabData[];
+  activeId?: string;
+  onSelect: (id: string) => void;
+  onClose: (id: string) => void;
+  className?: string;
+}
+export declare function FileTabs({ tabs, activeId, onSelect, onClose, className }: FileTabsProps): import("react").JSX.Element | null;
+//#endregion

package/dist/files/file-tabs.js

@@ -0,0 +1,48 @@
+import { focusRing, focusRingInset } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileCode, FileSpreadsheet, FileText, X } from "lucide-react";
+//#region src/files/file-tabs.tsx
+/**
+* FileTabs — tab bar for open files in the preview panel.
+*/
+function getTabIcon(name) {
+	const ext = name.split(".").pop()?.toLowerCase() || "";
+	if (["pdf"].includes(ext)) return FileText;
+	if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet;
+	return FileCode;
+}
+function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
+	if (tabs.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center border-b border-border bg-background overflow-x-auto", className),
+		children: tabs.map((tab) => {
+			const isActive = tab.id === activeId;
+			const Icon = getTabIcon(tab.name);
+			return /* @__PURE__ */ jsxs("div", {
+				className: cn("group flex items-center border-r border-border shrink-0", isActive ? "bg-card text-foreground border-b-2 border-b-primary" : "text-muted-foreground hover:bg-muted/50"),
+				children: [/* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => onSelect(tab.id),
+					className: cn("flex min-w-0 items-center gap-1.5 px-3 py-1.5 text-xs transition-colors hover:text-foreground", focusRingInset),
+					children: [
+						/* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 shrink-0" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-[120px] truncate",
+							children: tab.name
+						}),
+						tab.dirty && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-primary" })
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Close ${tab.name}`,
+					onClick: () => onClose(tab.id),
+					className: cn("mr-1 rounded p-0.5 opacity-0 transition-opacity hover:bg-accent focus-visible:opacity-100 group-hover:opacity-100", focusRing),
+					children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+				})]
+			}, tab.id);
+		})
+	});
+}
+//#endregion
+export { FileTabs };

package/dist/files/file-tree.d.ts

@@ -0,0 +1,31 @@
+//#region src/files/file-tree.d.ts
+/**
+ * FileTree — directory browser with file type icons.
+ *
+ * Renders a hierarchical file system view. Clicking a file
+ * triggers onSelect with the full path.
+ */
+export interface FileNode {
+  name: string;
+  path: string;
+  type: "file" | "directory";
+  children?: FileNode[];
+  size?: number;
+  mimeType?: string;
+}
+export interface FileTreeProps {
+  root: FileNode;
+  selectedPath?: string;
+  onSelect?: (path: string, node: FileNode) => void;
+  className?: string;
+  defaultExpanded?: boolean;
+  visibility?: FileTreeVisibilityOptions;
+}
+export interface FileTreeVisibilityOptions {
+  hiddenPaths?: string[];
+  hiddenPathPrefixes?: string[];
+  isVisible?: (node: FileNode) => boolean;
+}
+export declare function filterFileTree(root: FileNode, visibility?: FileTreeVisibilityOptions): FileNode | null;
+export declare function FileTree({ root, selectedPath, onSelect, className, defaultExpanded, visibility }: FileTreeProps): import("react").JSX.Element | null;
+//#endregion