@tangle-network/ui 11.7.0 → 11.8.0

package/src/files/file-artifact-pane.tsx

@@ -51,13 +51,16 @@ export 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.
  */
 export function FileArtifactPane({
   filename,
   content,
   blobUrl,
   mimeType,
+  size,
   onClose,
   onDownload,
   path,
@@ -188,6 +191,8 @@ export function FileArtifactPane({
         content={content}
         blobUrl={blobUrl}
         mimeType={mimeType}
+        size={size}
+        onDownload={onDownload}
         hideHeader={true}
       />
     </ArtifactPane>

package/src/files/file-format.ts

@@ -8,6 +8,8 @@
 export type FileFormat =
   | "pdf"
   | "image"
+  | "video"
+  | "audio"
   | "csv"
   | "spreadsheet"
   | "code"
@@ -17,7 +19,20 @@ export type FileFormat =
   | "text"
   | "unknown";
 
-const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp"];
+/**
+ * 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";
+
+const IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp", "avif"];
+const VIDEO_EXTENSIONS = ["mp4", "webm", "mov"];
+const AUDIO_EXTENSIONS = ["mp3", "wav", "ogg", "m4a"];
+const SPREADSHEET_MIME_TYPES = [
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  "application/vnd.ms-excel",
+];
 
 const EXTENSION_TO_SYNTAX_LANGUAGE: Record<string, string> = {
   ts: "typescript",
@@ -97,14 +112,19 @@ export function detectFileFormat(filename: string, mimeType?: string): FileForma
   // 1. Specific MIME types are authoritative — they outrank the extension.
   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";
 
   // 2. Fall back to the file extension.
   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";
@@ -119,13 +139,28 @@ export function detectFileFormat(filename: string, mimeType?: string): FileForma
   return "unknown";
 }
 
-/** Human-facing label for a detected format. */
-export 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.
+ */
+export function resolveFilePreviewKind(filename: string, mimeType?: string): FilePreviewKind {
+  const format = detectFileFormat(filename, mimeType);
+  return format === "unknown" ? "binary" : format;
+}
+
+/** Human-facing label for a detected format or preview kind. */
+export function getFormatLabel(format: FileFormat | FilePreviewKind): string {
   switch (format) {
     case "pdf":
       return "PDF";
     case "image":
       return "Image";
+    case "video":
+      return "Video";
+    case "audio":
+      return "Audio";
     case "csv":
       return "CSV";
     case "spreadsheet":
@@ -161,7 +196,10 @@ export 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.
  */
-export function getCodeLanguage(filename: string, format: FileFormat): string | undefined {
+export function getCodeLanguage(
+  filename: string,
+  format: FileFormat | FilePreviewKind,
+): string | undefined {
   if (format === "json" || format === "yaml") return format;
   return getSyntaxLanguage(filename);
 }

package/src/files/file-preview-kind.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest";
+import {
+  detectFileFormat,
+  getFormatLabel,
+  resolveFilePreviewKind,
+  type FilePreviewKind,
+} from "./file-format";
+
+describe("resolveFilePreviewKind", () => {
+  it.each<[string, string | undefined, FilePreviewKind]>([
+    // Images
+    ["photo.png", undefined, "image"],
+    ["photo.jpg", undefined, "image"],
+    ["photo.jpeg", undefined, "image"],
+    ["anim.gif", undefined, "image"],
+    ["photo.webp", undefined, "image"],
+    ["icon.svg", undefined, "image"],
+    ["photo.avif", undefined, "image"],
+    // Documents
+    ["report.pdf", undefined, "pdf"],
+    // Video
+    ["clip.mp4", undefined, "video"],
+    ["clip.webm", undefined, "video"],
+    ["clip.mov", undefined, "video"],
+    // Audio
+    ["track.mp3", undefined, "audio"],
+    ["track.wav", undefined, "audio"],
+    ["track.ogg", undefined, "audio"],
+    ["track.m4a", undefined, "audio"],
+    // Tabular
+    ["data.csv", undefined, "csv"],
+    ["book.xlsx", undefined, "spreadsheet"],
+    ["legacy.xls", undefined, "spreadsheet"],
+    // Prose and structured text
+    ["README.md", undefined, "markdown"],
+    ["notes.markdown", undefined, "markdown"],
+    ["config.json", undefined, "json"],
+    ["compose.yaml", undefined, "yaml"],
+    ["compose.yml", undefined, "yaml"],
+    ["server.ts", undefined, "code"],
+    ["main.py", undefined, "code"],
+    ["output.log", undefined, "text"],
+    ["notes.txt", undefined, "text"],
+  ])("%s (%s) → %s", (filename, mimeType, kind) => {
+    expect(resolveFilePreviewKind(filename, mimeType)).toBe(kind);
+  });
+
+  it("lets an authoritative MIME type outrank the extension", () => {
+    expect(resolveFilePreviewKind("photo.txt", "image/png")).toBe("image");
+    expect(resolveFilePreviewKind("scan.png", "application/pdf")).toBe("pdf");
+    expect(resolveFilePreviewKind("clip.bin", "video/mp4")).toBe("video");
+    expect(resolveFilePreviewKind("track.webm", "audio/webm")).toBe("audio");
+    expect(
+      resolveFilePreviewKind(
+        "export.csv",
+        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      ),
+    ).toBe("spreadsheet");
+    expect(resolveFilePreviewKind("book.bin", "application/vnd.ms-excel")).toBe("spreadsheet");
+    expect(resolveFilePreviewKind("notes.json", "text/markdown")).toBe("markdown");
+  });
+
+  it("resolves MIME-only files with no extension", () => {
+    expect(resolveFilePreviewKind("blob", "image/webp")).toBe("image");
+    expect(resolveFilePreviewKind("blob", "video/webm")).toBe("video");
+    expect(resolveFilePreviewKind("blob", "audio/mpeg")).toBe("audio");
+    expect(resolveFilePreviewKind("blob", "application/json; charset=utf-8")).toBe("json");
+    expect(resolveFilePreviewKind("blob", "text/plain")).toBe("text");
+  });
+
+  it("ignores a generic MIME type and keeps the extension", () => {
+    expect(resolveFilePreviewKind("photo.png", "application/octet-stream")).toBe("image");
+    expect(resolveFilePreviewKind("main.py", "text/plain")).toBe("code");
+  });
+
+  it("resolves everything unmatched to binary", () => {
+    expect(resolveFilePreviewKind("mystery.bin")).toBe("binary");
+    expect(resolveFilePreviewKind("noextension")).toBe("binary");
+    expect(resolveFilePreviewKind("weights", "application/octet-stream")).toBe("binary");
+    expect(resolveFilePreviewKind("pdf")).toBe("binary");
+  });
+
+  it("agrees with detectFileFormat for every format that has a renderer", () => {
+    for (const filename of [
+      "photo.png",
+      "report.pdf",
+      "clip.mp4",
+      "track.mp3",
+      "data.csv",
+      "book.xlsx",
+      "README.md",
+      "config.json",
+      "compose.yml",
+      "server.ts",
+      "notes.txt",
+    ]) {
+      expect(resolveFilePreviewKind(filename)).toBe(detectFileFormat(filename));
+    }
+    expect(detectFileFormat("mystery.bin")).toBe("unknown");
+    expect(resolveFilePreviewKind("mystery.bin")).toBe("binary");
+  });
+
+  it("labels every preview kind", () => {
+    expect(getFormatLabel("video")).toBe("Video");
+    expect(getFormatLabel("audio")).toBe("Audio");
+    expect(getFormatLabel("image")).toBe("Image");
+    expect(getFormatLabel("binary")).toBe("File");
+  });
+});