@tangle-network/ui 11.7.0 → 11.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.9.0
+
+### Minor Changes
+
+- b047084: Expose react-markdown's typed `urlTransform` hook through the shared Markdown component.
+
+## 11.8.0
+
+### Minor Changes
+
+- 3416c80: `FileArtifactPane` (and `FilePreview`, its body) now previews every file kind a sandbox produces, so a product no longer builds its own image, PDF, CSV, video, audio, or spreadsheet viewers. Pass `blobUrl` (an object URL or remote URL) for binary content and the pane renders an image fit to the pane on a checker ground (click for natural size), a PDF at full pane height, or a video/audio player; pass `content` for CSV and the pane parses quoted commas and line breaks (RFC 4180) into a sticky-header table capped at `CSV_PREVIEW_ROW_LIMIT` (500) rows with a "Showing N of M rows" line; an `.xlsx`/`.xls` file renders a download card with the filename, its size when the new optional `size` prop (bytes) is set, and a Download button wired to `onDownload`. A file with no `blobUrl` and no text content renders one sentence, "This file needs a download link to preview.", with the same Download button. Text, code, JSON, YAML, and markdown render as before. `@tangle-network/ui/files` also exports the pure `resolveFilePreviewKind(filename, mimeType)` helper (`FilePreviewKind`: MIME type wins over extension; anything unmatched is `binary`), `parseCsv`, and `CSV_PREVIEW_ROW_LIMIT`; `detectFileFormat` gains the `video` and `audio` formats and the `avif` image extension.
+
 ## 11.7.0
 
 ### Minor Changes

package/dist/chat.js

@@ -5,18 +5,19 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-VDCZHOOO.js";
-import "./chunk-UYTRNR7Z.js";
-import "./chunk-CVX53NCC.js";
-import "./chunk-XT4JMYVB.js";
-import "./chunk-EIUE5GV2.js";
-import "./chunk-AAUNOHVL.js";
+} from "./chunk-7YOCS6IF.js";
+import "./chunk-565EATZZ.js";
+import "./chunk-TN4FUEWY.js";
+import "./chunk-KNYSKNZX.js";
+import "./chunk-ND3ZFXQK.js";
+import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-3M7BPSSW.js";
+import "./chunk-3TI5DEHV.js";
 import "./chunk-GYPQXTJU.js";
+import "./chunk-4CLN43XT.js";
+import "./chunk-XU3HB5QL.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-ZRVH3WCA.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/{chunk-3M7BPSSW.js → chunk-3TI5DEHV.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-MKTSMWVD.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   CodeBlock
 } from "./chunk-WUQDUBJG.js";

package/dist/chunk-4CLN43XT.js

@@ -0,0 +1,45 @@
+// src/utils/format.ts
+function formatDuration(ms) {
+  if (ms < 1e3) return "<1s";
+  const seconds = Math.floor(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remaining = seconds % 60;
+  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
+}
+function truncateText(text, max) {
+  const cleaned = text.replace(/\s+/g, " ").trim();
+  if (cleaned.length <= max) return cleaned;
+  return cleaned.slice(0, max).trim() + "...";
+}
+function formatUptime(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const totalSeconds = Math.floor(ms / 1e3);
+  if (totalSeconds < 60) return `${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes < 60) return `${minutes}m ${seconds}s`;
+  const hours = Math.floor(minutes / 60);
+  const remMinutes = minutes % 60;
+  if (hours < 24) return `${hours}h ${remMinutes}m`;
+  const days = Math.floor(hours / 24);
+  const remHours = hours % 24;
+  return `${days}d ${remHours}h`;
+}
+function formatBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
+  if (bytes < 1024) return `${Math.round(bytes)} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;
+  const mb = kb / 1024;
+  if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
+  const gb = mb / 1024;
+  return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
+}
+
+export {
+  formatDuration,
+  truncateText,
+  formatUptime,
+  formatBytes
+};

package/dist/{chunk-UYTRNR7Z.js → chunk-565EATZZ.js}

@@ -1,6 +1,6 @@
 import {
   getToolCategory
-} from "./chunk-EIUE5GV2.js";
+} from "./chunk-ND3ZFXQK.js";
 
 // src/hooks/use-run-groups.ts
 import { useMemo } from "react";

package/dist/{chunk-VDCZHOOO.js → chunk-7YOCS6IF.js}

@@ -2,24 +2,24 @@ import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-UYTRNR7Z.js";
+} from "./chunk-565EATZZ.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVX53NCC.js";
+} from "./chunk-TN4FUEWY.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-XT4JMYVB.js";
+} from "./chunk-KNYSKNZX.js";
 import {
   getToolDisplayMetadata
-} from "./chunk-EIUE5GV2.js";
+} from "./chunk-ND3ZFXQK.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-P5F43A65.js → chunk-EOAX2ENE.js}

@@ -12,7 +12,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeSanitize from "rehype-sanitize";
 import { Fragment, jsx } from "react/jsx-runtime";
-var Markdown = memo(({ children, className }) => {
+var Markdown = memo(({ children, className, urlTransform }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -22,6 +22,7 @@ var Markdown = memo(({ children, className }) => {
         {
           remarkPlugins: [remarkGfm],
           rehypePlugins: [rehypeSanitize],
+          urlTransform,
           components: {
             pre({ children: preChildren }) {
               return /* @__PURE__ */ jsx(Fragment, { children: preChildren });

package/dist/{chunk-XT4JMYVB.js → chunk-KNYSKNZX.js}

@@ -1,9 +1,8 @@
 import {
-  formatDuration,
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText
-} from "./chunk-EIUE5GV2.js";
+} from "./chunk-ND3ZFXQK.js";
 import {
   CommandPreview,
   DiffPreview,
@@ -12,10 +11,13 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-AAUNOHVL.js";
+} from "./chunk-NWECTSOH.js";
 import {
   TextShimmer
 } from "./chunk-L57WRIND.js";
+import {
+  formatDuration
+} from "./chunk-4CLN43XT.js";
 import {
   CodeBlock
 } from "./chunk-WUQDUBJG.js";

package/dist/{chunk-EIUE5GV2.js → chunk-ND3ZFXQK.js}

@@ -171,52 +171,9 @@ function getToolErrorText(part, fallback) {
   return part.state.error || fallback;
 }
 
-// src/utils/format.ts
-function formatDuration(ms) {
-  if (ms < 1e3) return "<1s";
-  const seconds = Math.floor(ms / 1e3);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  const remaining = seconds % 60;
-  return remaining > 0 ? `${minutes}m ${remaining}s` : `${minutes}m`;
-}
-function truncateText(text, max) {
-  const cleaned = text.replace(/\s+/g, " ").trim();
-  if (cleaned.length <= max) return cleaned;
-  return cleaned.slice(0, max).trim() + "...";
-}
-function formatUptime(ms) {
-  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
-  const totalSeconds = Math.floor(ms / 1e3);
-  if (totalSeconds < 60) return `${totalSeconds}s`;
-  const minutes = Math.floor(totalSeconds / 60);
-  const seconds = totalSeconds % 60;
-  if (minutes < 60) return `${minutes}m ${seconds}s`;
-  const hours = Math.floor(minutes / 60);
-  const remMinutes = minutes % 60;
-  if (hours < 24) return `${hours}h ${remMinutes}m`;
-  const days = Math.floor(hours / 24);
-  const remHours = hours % 24;
-  return `${days}d ${remHours}h`;
-}
-function formatBytes(bytes) {
-  if (!Number.isFinite(bytes) || bytes < 0) return "\u2014";
-  if (bytes < 1024) return `${Math.round(bytes)} B`;
-  const kb = bytes / 1024;
-  if (kb < 1024) return `${kb < 10 ? kb.toFixed(1) : Math.round(kb)} KB`;
-  const mb = kb / 1024;
-  if (mb < 1024) return `${mb < 10 ? mb.toFixed(1) : Math.round(mb)} MB`;
-  const gb = mb / 1024;
-  return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
-}
-
 export {
   TOOL_CATEGORY_ICONS,
   getToolCategory,
   getToolDisplayMetadata,
-  getToolErrorText,
-  formatDuration,
-  truncateText,
-  formatUptime,
-  formatBytes
+  getToolErrorText
 };

package/dist/{chunk-AAUNOHVL.js → chunk-NWECTSOH.js}

@@ -1,6 +1,6 @@
 import {
   getSyntaxLanguage
-} from "./chunk-ZRVH3WCA.js";
+} from "./chunk-XU3HB5QL.js";
 import {
   CodeBlock,
   CopyButton

package/dist/{chunk-CVX53NCC.js → chunk-TN4FUEWY.js}

@@ -2,20 +2,20 @@ import {
   ExpandableContent,
   InlineToolItem,
   RunRowShell
-} from "./chunk-XT4JMYVB.js";
-import {
-  formatDuration,
-  truncateText
-} from "./chunk-EIUE5GV2.js";
+} from "./chunk-KNYSKNZX.js";
 import {
   TextShimmer
 } from "./chunk-L57WRIND.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
+import {
+  formatDuration,
+  truncateText
+} from "./chunk-4CLN43XT.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-4ENFLPWQ.js → chunk-VPWY4I5O.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-6RIX7M27.js";
+} from "./chunk-XYAIX4SU.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

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-6RIX7M27.js → chunk-XYAIX4SU.js}

@@ -1,10 +1,10 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-XT4JMYVB.js";
+} from "./chunk-KNYSKNZX.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";