@tangle-network/ui 11.7.0 → 11.8.0

package/dist/{chunk-PLWRAS5Z.js → chunk-XGOWUDDW.js}

@@ -1,9 +1,16 @@
+import {
+  formatBytes
+} from "./chunk-4CLN43XT.js";
 import {
   detectFileFormat,
   fileExtension,
   getCodeLanguage,
-  getFormatLabel
-} from "./chunk-ZRVH3WCA.js";
+  getFormatLabel,
+  resolveFilePreviewKind
+} from "./chunk-XU3HB5QL.js";
+import {
+  Button
+} from "./chunk-MKTSMWVD.js";
 import {
   ArtifactPane
 } from "./chunk-LTEKI7YJ.js";
@@ -315,19 +322,26 @@ function RichFileTree({
 }
 
 // src/files/file-preview.tsx
+import { useState as useState2 } from "react";
 import {
   Download,
-  X,
-  FileText as FileText2
+  FileSpreadsheet as FileSpreadsheet2,
+  FileText as FileText2,
+  Music,
+  X
 } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CSV_PREVIEW_ROW_LIMIT = 500;
+var NEEDS_DOWNLOAD_LINK = "This file needs a download link to preview.";
+var NO_INLINE_PREVIEW = "This file type has no inline preview.";
+var NO_INLINE_CONTENT = "This file has no inline content to preview yet.";
 function CodePreview({
   content,
   filename,
-  format
+  kind
 }) {
   const lineCount = content.split("\n").length;
-  const language = getCodeLanguage(filename, format);
+  const language = getCodeLanguage(filename, kind);
   const labelToken = fileExtension(filename) || language || "txt";
   return /* @__PURE__ */ jsx3(
     CodeBlock,
@@ -341,112 +355,272 @@ function CodePreview({
     }
   );
 }
-function parseCsvRow(line) {
-  const cells = [];
-  let current = "";
+function parseCsv(content) {
+  const rows = [];
+  let row = [];
+  let cell = "";
+  let quoted = false;
   let inQuotes = false;
-  for (let index = 0; index < line.length; index += 1) {
-    const char = line[index];
-    const next = line[index + 1];
-    if (char === '"') {
-      if (inQuotes && next === '"') {
-        current += '"';
-        index += 1;
-        continue;
+  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;
       }
-      inQuotes = !inQuotes;
       continue;
     }
-    if (char === "," && !inQuotes) {
-      cells.push(current.trim());
-      current = "";
+    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;
     }
-    current += char;
+    cell += char;
   }
-  cells.push(current.trim());
-  return cells;
+  if (cell.length > 0 || quoted || row.length > 0) endRow();
+  return rows;
 }
 function CsvPreview({ content }) {
-  const lines = content.trim().split(/\r?\n/).filter(Boolean);
-  if (lines.length === 0) return null;
-  const headers = parseCsvRow(lines[0]).map((header) => header.replace(/^"|"$/g, ""));
-  const rows = lines.slice(1).map(
-    (line) => parseCsvRow(line).map((cell) => cell.replace(/^"|"$/g, ""))
-  );
-  return /* @__PURE__ */ jsx3("div", { className: "overflow-auto max-h-[70vh] rounded-[var(--radius-md)] border border-border", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
-    /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { className: "bg-muted/50 sticky top-0", children: headers.map((h, i) => /* @__PURE__ */ jsx3(
-      "th",
-      {
-        className: "px-3 py-2 text-left text-xs font-semibold text-foreground border-b border-border whitespace-nowrap",
-        children: h
-      },
-      i
-    )) }) }),
-    /* @__PURE__ */ jsx3("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx3("tr", { className: "border-b border-border hover:bg-accent", children: row.map((cell, j) => /* @__PURE__ */ jsx3(
-      "td",
-      {
-        className: "px-3 py-1.5 text-foreground font-mono text-xs whitespace-nowrap",
-        children: cell
-      },
-      j
-    )) }, i)) })
-  ] }) });
+  const [headers = [], ...body] = parseCsv(content);
+  if (headers.length === 0) return null;
+  const visible = body.slice(0, CSV_PREVIEW_ROW_LIMIT);
+  const columnCount = Math.max(headers.length, ...visible.map((cells) => cells.length));
+  const capped = body.length > visible.length;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+    /* @__PURE__ */ jsx3("div", { className: "min-h-0 overflow-auto rounded-[var(--radius-md)] border border-border", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsx3("tr", { children: Array.from({ length: columnCount }, (_, column) => /* @__PURE__ */ jsx3(
+        "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__ */ jsx3("tbody", { children: visible.map((cells, rowIndex) => /* @__PURE__ */ jsx3("tr", { className: "border-b border-border hover:bg-accent", children: Array.from({ length: columnCount }, (_, column) => /* @__PURE__ */ jsx3(
+        "td",
+        {
+          className: "whitespace-nowrap px-3 py-1.5 font-mono text-xs text-foreground",
+          children: cells[column] ?? ""
+        },
+        column
+      )) }, rowIndex)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("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"}`,
+      ` \xB7 ${columnCount} ${columnCount === 1 ? "column" : "columns"}`
+    ] })
+  ] });
 }
+var 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 }) {
-  return /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-center p-4 bg-background rounded-[var(--radius-md)] border border-border", children: /* @__PURE__ */ jsx3("img", { src, alt: filename, className: "max-w-full max-h-[70vh] object-contain rounded" }) });
+  const [naturalSize, setNaturalSize] = useState2(false);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "flex min-h-[12rem] flex-1 overflow-auto rounded-[var(--radius-md)] border border-border",
+      style: CHECKER_STYLE,
+      children: /* @__PURE__ */ jsx3(
+        "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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/60",
+            naturalSize ? "m-auto cursor-zoom-out" : "h-full w-full cursor-zoom-in p-4"
+          ),
+          children: /* @__PURE__ */ jsx3(
+            "img",
+            {
+              src,
+              alt: filename,
+              draggable: false,
+              className: naturalSize ? "max-w-none" : "max-h-full max-w-full object-contain"
+            }
+          )
+        }
+      )
+    }
+  );
 }
-function PdfPreview({ blobUrl, filename }) {
-  return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border overflow-hidden bg-background", children: /* @__PURE__ */ jsx3(
-    "iframe",
+function PdfPreview({
+  blobUrl,
+  filename,
+  size,
+  onDownload
+}) {
+  return /* @__PURE__ */ jsx3(
+    "object",
     {
-      src: blobUrl,
+      data: blobUrl,
+      type: "application/pdf",
       title: filename,
-      className: "w-full h-[70vh] border-0"
+      className: "min-h-[24rem] w-full flex-1 rounded-[var(--radius-md)]",
+      children: /* @__PURE__ */ jsx3(
+        DownloadCard,
+        {
+          filename,
+          size,
+          sentence: "This browser does not show PDFs inline.",
+          onDownload,
+          className: "h-full"
+        }
+      )
+    }
+  );
+}
+function VideoPreview({ src, filename }) {
+  return /* @__PURE__ */ jsx3("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__ */ jsx3(
+    "video",
+    {
+      controls: true,
+      preload: "metadata",
+      src,
+      "aria-label": filename,
+      className: "max-h-full max-w-full"
     }
   ) });
 }
+function AudioPreview({ src, filename }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-4 rounded-[var(--radius-md)] border border-border bg-background px-6 py-10", children: [
+    /* @__PURE__ */ jsx3(Music, { className: "h-10 w-10 text-muted-foreground opacity-60" }),
+    /* @__PURE__ */ jsx3("p", { className: "max-w-full truncate text-sm font-medium text-foreground", children: filename }),
+    /* @__PURE__ */ jsx3("audio", { controls: true, preload: "metadata", src, "aria-label": filename, className: "w-full max-w-md" })
+  ] });
+}
 function TextPreview({ content }) {
   return /* @__PURE__ */ jsx3("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 UnsupportedPreview({
-  filename,
-  title,
-  description
-}) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center rounded-[var(--radius-md)] border border-dashed border-border bg-background px-6 py-16 text-center text-muted-foreground", children: [
-    /* @__PURE__ */ jsx3(FileText2, { className: "mb-3 h-12 w-12 opacity-30" }),
-    /* @__PURE__ */ jsx3("p", { className: "text-sm text-foreground", children: title }),
-    /* @__PURE__ */ jsx3("p", { className: "mt-1 max-w-md text-xs", children: description }),
-    /* @__PURE__ */ jsx3("p", { className: "mt-4 text-[11px] uppercase tracking-[0.12em]", children: filename })
-  ] });
-}
 function MarkdownPreview({ content }) {
   return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border bg-background p-5", children: /* @__PURE__ */ jsx3(Markdown, { children: content }) });
 }
-function EmptyPreview({ filename }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-muted-foreground", children: [
-    /* @__PURE__ */ jsx3(FileText2, { className: "h-12 w-12 mb-3 opacity-30" }),
-    /* @__PURE__ */ jsxs2("p", { className: "text-sm", children: [
-      "Cannot preview ",
-      filename
-    ] }),
-    /* @__PURE__ */ jsx3("p", { className: "text-xs mt-1", children: "Download to view this file" })
-  ] });
+function DownloadCard({
+  filename,
+  size,
+  sentence,
+  icon: Icon = FileText2,
+  onDownload,
+  className
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx3(Icon, { className: "mb-3 h-12 w-12 text-muted-foreground opacity-40" }),
+        /* @__PURE__ */ jsx3("p", { className: "max-w-full truncate text-sm font-medium text-foreground", children: filename }),
+        size !== void 0 && /* @__PURE__ */ jsx3("p", { className: "mt-1 text-xs text-muted-foreground", children: formatBytes(size) }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-3 max-w-md text-sm text-muted-foreground", children: sentence }),
+        onDownload && /* @__PURE__ */ jsxs2(Button, { type: "button", variant: "outline", size: "sm", className: "mt-5", onClick: onDownload, children: [
+          /* @__PURE__ */ jsx3(Download, {}),
+          "Download"
+        ] })
+      ]
+    }
+  );
+}
+function PreviewBody({
+  kind,
+  filename,
+  content,
+  blobUrl,
+  size,
+  onDownload
+}) {
+  const hasText = typeof content === "string";
+  const card = (sentence, icon) => /* @__PURE__ */ jsx3(
+    DownloadCard,
+    {
+      filename,
+      size,
+      sentence,
+      icon,
+      onDownload
+    }
+  );
+  switch (kind) {
+    case "pdf":
+      if (blobUrl) {
+        return /* @__PURE__ */ jsx3(PdfPreview, { blobUrl, filename, size, onDownload });
+      }
+      return card(NEEDS_DOWNLOAD_LINK);
+    case "image":
+      if (blobUrl) return /* @__PURE__ */ jsx3(ImagePreview, { src: blobUrl, filename });
+      if (hasText) return /* @__PURE__ */ jsx3(CodePreview, { content, filename, kind: "code" });
+      return card(NEEDS_DOWNLOAD_LINK);
+    case "video":
+      if (blobUrl) return /* @__PURE__ */ jsx3(VideoPreview, { src: blobUrl, filename });
+      return card(NEEDS_DOWNLOAD_LINK);
+    case "audio":
+      if (blobUrl) return /* @__PURE__ */ jsx3(AudioPreview, { src: blobUrl, filename });
+      return card(NEEDS_DOWNLOAD_LINK, Music);
+    case "csv":
+      if (hasText) return /* @__PURE__ */ jsx3(CsvPreview, { content });
+      return card(NO_INLINE_CONTENT, FileSpreadsheet2);
+    case "code":
+    case "json":
+    case "yaml":
+      if (hasText) return /* @__PURE__ */ jsx3(CodePreview, { content, filename, kind });
+      return card(NO_INLINE_CONTENT);
+    case "markdown":
+      if (hasText) return /* @__PURE__ */ jsx3(MarkdownPreview, { content });
+      return card(NO_INLINE_CONTENT);
+    case "text":
+      if (hasText) return /* @__PURE__ */ jsx3(TextPreview, { content });
+      return card(NO_INLINE_CONTENT);
+    case "spreadsheet":
+      return card("Download to open this workbook in a spreadsheet app.", FileSpreadsheet2);
+    case "binary":
+      if (hasText) return /* @__PURE__ */ jsx3(TextPreview, { content });
+      return card(blobUrl ? NO_INLINE_PREVIEW : NEEDS_DOWNLOAD_LINK);
+  }
 }
 function FilePreview({
   filename,
   content,
   blobUrl,
   mimeType,
+  size,
   onClose,
   onDownload,
   hideHeader = false,
   className
 }) {
-  const format = detectFileFormat(filename, mimeType);
-  const previewLabel = getFormatLabel(format);
-  const hasRenderableSource = Boolean(content) || Boolean(blobUrl) || format === "unknown" || format === "spreadsheet";
+  const kind = resolveFilePreviewKind(filename, mimeType);
+  const previewLabel = getFormatLabel(kind);
   return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col h-full", className), children: [
     !hideHeader && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-border shrink-0", children: [
       /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
@@ -474,42 +648,27 @@ function FilePreview({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-auto p-3", children: [
-      format === "pdf" && blobUrl && /* @__PURE__ */ jsx3(PdfPreview, { blobUrl, filename }),
-      format === "image" && blobUrl && /* @__PURE__ */ jsx3(ImagePreview, { src: blobUrl, filename }),
-      format === "csv" && typeof content === "string" && /* @__PURE__ */ jsx3(CsvPreview, { content }),
-      (format === "code" || format === "json" || format === "yaml") && typeof content === "string" && /* @__PURE__ */ jsx3(CodePreview, { content, filename, format }),
-      format === "text" && typeof content === "string" && /* @__PURE__ */ jsx3(TextPreview, { content }),
-      format === "markdown" && typeof content === "string" && /* @__PURE__ */ jsx3(MarkdownPreview, { content }),
-      format === "spreadsheet" && /* @__PURE__ */ jsx3(
-        UnsupportedPreview,
-        {
-          filename,
-          title: "Spreadsheet preview is not available in this surface",
-          description: "Download the workbook or convert it to CSV when you need an inline preview."
-        }
-      ),
-      format === "unknown" && typeof content !== "string" && /* @__PURE__ */ jsx3(EmptyPreview, { filename }),
-      format === "unknown" && typeof content === "string" && /* @__PURE__ */ jsx3(TextPreview, { content }),
-      !hasRenderableSource && typeof content !== "string" && /* @__PURE__ */ jsx3(
-        UnsupportedPreview,
-        {
-          filename,
-          title: "Preview data is not available yet",
-          description: "This artifact can be shown once the app provides inline content or a downloadable blob."
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsx3("div", { className: "flex min-h-0 flex-1 flex-col overflow-auto p-3", children: /* @__PURE__ */ jsx3(
+      PreviewBody,
+      {
+        kind,
+        filename,
+        content,
+        blobUrl,
+        size,
+        onDownload
+      }
+    ) })
   ] });
 }
 
 // src/files/file-tabs.tsx
-import { X as X2, FileText as FileText3, FileCode as FileCode2, FileSpreadsheet as FileSpreadsheet2 } from "lucide-react";
+import { X as X2, FileText as FileText3, FileCode as FileCode2, FileSpreadsheet as FileSpreadsheet3 } from "lucide-react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function getTabIcon(name) {
   const ext = name.split(".").pop()?.toLowerCase() || "";
   if (["pdf"].includes(ext)) return FileText3;
-  if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet2;
+  if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet3;
   return FileCode2;
 }
 function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
@@ -568,6 +727,7 @@ function FileArtifactPane({
   content,
   blobUrl,
   mimeType,
+  size,
   onClose,
   onDownload,
   path,
@@ -694,6 +854,8 @@ function FileArtifactPane({
           content,
           blobUrl,
           mimeType,
+          size,
+          onDownload,
           hideHeader: true
         }
       )
@@ -705,6 +867,8 @@ export {
   filterFileTree,
   FileTree,
   RichFileTree,
+  CSV_PREVIEW_ROW_LIMIT,
+  parseCsv,
   FilePreview,
   FileTabs,
   FileArtifactPane

package/dist/{chunk-ZRVH3WCA.js → chunk-XU3HB5QL.js}

@@ -1,5 +1,11 @@
 // src/files/file-format.ts
-var IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp"];
+var IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp", "avif"];
+var VIDEO_EXTENSIONS = ["mp4", "webm", "mov"];
+var AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a"];
+var SPREADSHEET_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel"
+];
 var EXTENSION_TO_SYNTAX_LANGUAGE = {
   ts: "typescript",
   tsx: "tsx",
@@ -50,12 +56,17 @@ function detectFileFormat(filename, mimeType) {
   const mime = mimeEssence(mimeType);
   if (mime === "application/pdf") return "pdf";
   if (mime.startsWith("image/")) return "image";
+  if (mime.startsWith("video/")) return "video";
+  if (mime.startsWith("audio/")) return "audio";
   if (mime === "text/markdown") return "markdown";
   if (mime === "application/json") return "json";
   if (mime === "text/csv" || mime === "application/csv") return "csv";
+  if (SPREADSHEET_MIME_TYPES.includes(mime)) return "spreadsheet";
   if (mime === "application/yaml" || mime === "application/x-yaml" || mime === "text/yaml") return "yaml";
   if (ext === "pdf") return "pdf";
   if (IMAGE_EXTENSIONS.includes(ext)) return "image";
+  if (VIDEO_EXTENSIONS.includes(ext)) return "video";
+  if (AUDIO_EXTENSIONS.includes(ext)) return "audio";
   if (ext === "csv") return "csv";
   if (ext === "xlsx" || ext === "xls") return "spreadsheet";
   if (CODE_EXTENSIONS.has(ext)) return "code";
@@ -66,12 +77,20 @@ function detectFileFormat(filename, mimeType) {
   if (mime === "text/plain") return "text";
   return "unknown";
 }
+function resolveFilePreviewKind(filename, mimeType) {
+  const format = detectFileFormat(filename, mimeType);
+  return format === "unknown" ? "binary" : format;
+}
 function getFormatLabel(format) {
   switch (format) {
     case "pdf":
       return "PDF";
     case "image":
       return "Image";
+    case "video":
+      return "Video";
+    case "audio":
+      return "Audio";
     case "csv":
       return "CSV";
     case "spreadsheet":
@@ -101,6 +120,7 @@ function getCodeLanguage(filename, format) {
 export {
   fileExtension,
   detectFileFormat,
+  resolveFilePreviewKind,
   getFormatLabel,
   getSyntaxLanguage,
   getCodeLanguage

package/dist/{chunk-LFVF2HFB.js → chunk-YTO5V6QS.js}

@@ -1,6 +1,6 @@
 import {
   formatDuration
-} from "./chunk-EIUE5GV2.js";
+} from "./chunk-4CLN43XT.js";
 
 // src/run/run-item-primitives.tsx
 import { useEffect, useState } from "react";

package/dist/files.d.ts

@@ -98,25 +98,39 @@ declare function RichFileTree({ root, paths, selectedPath, onSelect, search, ini
 /**
  * FilePreview — universal file renderer.
  *
- * Renders any file type beautifully:
- * - PDF: embedded viewer
- * - CSV/XLSX: tabular preview
+ * 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
- * - Images: inline display
  * - Text: monospace preview
+ * - Anything else: text when content is a string, otherwise a download card
  */
 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;
     onClose?: () => void;
     onDownload?: () => void;
     hideHeader?: boolean;
     className?: string;
 }
-declare function FilePreview({ filename, content, blobUrl, mimeType, onClose, onDownload, hideHeader, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
+/** Rows rendered by the CSV preview; the count line reports the total. */
+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.
+ */
+declare function parseCsv(content: string): string[][];
+declare function FilePreview({ filename, content, blobUrl, mimeType, size, onClose, onDownload, hideHeader, className, }: FilePreviewProps): react_jsx_runtime.JSX.Element;
 
 /**
  * FileTabs — tab bar for open files in the preview panel.
@@ -170,9 +184,11 @@ interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
 }
 /**
  * FileArtifactPane — opinionated artifact frame for file previews with tabs and
- * header actions.
+ * 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.
  */
-declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, headerClassName, hideTitleBlock, editor, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
+declare function FileArtifactPane({ filename, content, blobUrl, mimeType, size, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, headerClassName, hideTitleBlock, editor, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Shared file-format detection for every file surface — the preview pane, the
@@ -180,7 +196,13 @@ declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClos
  * keeps chat and artifact views consistent and avoids the same mapping drifting
  * across components.
  */
-type FileFormat = "pdf" | "image" | "csv" | "spreadsheet" | "code" | "json" | "yaml" | "markdown" | "text" | "unknown";
+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.
+ */
+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" →
@@ -194,8 +216,15 @@ declare function fileExtension(filename: string): string;
  * decides; a generic text/plain payload is the final fallback.
  */
 declare function detectFileFormat(filename: string, mimeType?: string): FileFormat;
-/** Human-facing label for a detected format. */
-declare function getFormatLabel(format: FileFormat): string;
+/**
+ * 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.
+ */
+declare function resolveFilePreviewKind(filename: string, mimeType?: string): FilePreviewKind;
+/** Human-facing label for a detected format or preview kind. */
+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
@@ -209,6 +238,6 @@ declare function getSyntaxLanguage(filename: string): string | undefined;
  * a MIME type on an extensionless file (where the extension can't reveal it);
  * any other code format keys off the extension.
  */
-declare function getCodeLanguage(filename: string, format: FileFormat): string | undefined;
+declare function getCodeLanguage(filename: string, format: FileFormat | FilePreviewKind): string | undefined;
 
-export { FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage };
+export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind };