@tangle-network/ui 11.7.0 → 11.9.0

package/dist/files.js

@@ -1,23 +1,29 @@
 import {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
   FileTree,
   RichFileTree,
-  filterFileTree
-} from "./chunk-PLWRAS5Z.js";
+  filterFileTree,
+  parseCsv
+} from "./chunk-YJ6RE5WV.js";
+import "./chunk-4CLN43XT.js";
 import {
   detectFileFormat,
   fileExtension,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
-} from "./chunk-ZRVH3WCA.js";
+  getSyntaxLanguage,
+  resolveFilePreviewKind
+} from "./chunk-XU3HB5QL.js";
+import "./chunk-MKTSMWVD.js";
 import "./chunk-LTEKI7YJ.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
@@ -28,5 +34,7 @@ export {
   filterFileTree,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
+  getSyntaxLanguage,
+  parseCsv,
+  resolveFilePreviewKind
 };

package/dist/hooks.js

@@ -11,20 +11,21 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-4ENFLPWQ.js";
+} from "./chunk-VPWY4I5O.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-UYTRNR7Z.js";
-import "./chunk-6RIX7M27.js";
-import "./chunk-XT4JMYVB.js";
-import "./chunk-EIUE5GV2.js";
-import "./chunk-AAUNOHVL.js";
+} from "./chunk-565EATZZ.js";
+import "./chunk-XYAIX4SU.js";
+import "./chunk-KNYSKNZX.js";
+import "./chunk-ND3ZFXQK.js";
+import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-ZRVH3WCA.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-4CLN43XT.js";
+import "./chunk-XU3HB5QL.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, Agen
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps, RunRowShell, RunRowShellProps, RunRowStatus, RunRowStatusDot } from './run.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallStatus, d as ToolCallType, p as parseToolEvent } from './tool-call-feed-D9iofJgW.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from './openui.js';
-export { FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage } from './files.js';
+export { CSV_PREVIEW_ROW_LIMIT, FileArtifactPane, FileArtifactPaneProps, FileFormat, FileNode, FilePreview, FilePreviewKind, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, detectFileFormat, fileExtension, filterFileTree, getCodeLanguage, getFormatLabel, getSyntaxLanguage, parseCsv, resolveFilePreviewKind } from './files.js';
 export { Markdown, MarkdownProps } from './markdown.js';
 export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-0kSpWMnf.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from './auth.js';
@@ -38,5 +38,6 @@ import '@pierre/trees';
 import './document-editor-pane-IAEQn_Dl.js';
 import '@hocuspocus/provider';
 import 'yjs';
+import 'react-markdown';
 import 'nanostores';
 import 'clsx';

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-4ENFLPWQ.js";
+} from "./chunk-VPWY4I5O.js";
 import {
   addMessage,
   addParts,
@@ -146,39 +146,35 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-VDCZHOOO.js";
+} from "./chunk-7YOCS6IF.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-UYTRNR7Z.js";
+} from "./chunk-565EATZZ.js";
 import {
   LiveDuration
-} from "./chunk-LFVF2HFB.js";
+} from "./chunk-YTO5V6QS.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-6RIX7M27.js";
+} from "./chunk-XYAIX4SU.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVX53NCC.js";
+} from "./chunk-TN4FUEWY.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-XT4JMYVB.js";
+} from "./chunk-KNYSKNZX.js";
 import {
   TOOL_CATEGORY_ICONS,
-  formatBytes,
-  formatDuration,
-  formatUptime,
   getToolCategory,
   getToolDisplayMetadata,
-  getToolErrorText,
-  truncateText
-} from "./chunk-EIUE5GV2.js";
+  getToolErrorText
+} from "./chunk-ND3ZFXQK.js";
 import {
   CommandPreview,
   DiffPreview,
@@ -187,14 +183,14 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-AAUNOHVL.js";
+} from "./chunk-NWECTSOH.js";
 import {
   TextShimmer
 } from "./chunk-L57WRIND.js";
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
 import {
   Badge,
   Card,
@@ -215,24 +211,33 @@ import {
   badgeVariants
 } from "./chunk-GYPQXTJU.js";
 import {
-  Button,
-  buttonVariants
-} from "./chunk-MKTSMWVD.js";
-import {
+  CSV_PREVIEW_ROW_LIMIT,
   FileArtifactPane,
   FilePreview,
   FileTabs,
   FileTree,
   RichFileTree,
-  filterFileTree
-} from "./chunk-PLWRAS5Z.js";
+  filterFileTree,
+  parseCsv
+} from "./chunk-YJ6RE5WV.js";
+import {
+  formatBytes,
+  formatDuration,
+  formatUptime,
+  truncateText
+} from "./chunk-4CLN43XT.js";
 import {
   detectFileFormat,
   fileExtension,
   getCodeLanguage,
   getFormatLabel,
-  getSyntaxLanguage
-} from "./chunk-ZRVH3WCA.js";
+  getSyntaxLanguage,
+  resolveFilePreviewKind
+} from "./chunk-XU3HB5QL.js";
+import {
+  Button,
+  buttonVariants
+} from "./chunk-MKTSMWVD.js";
 import {
   Tabs,
   TabsContent,
@@ -245,7 +250,7 @@ import {
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   CodeBlock,
   CopyButton
@@ -262,6 +267,7 @@ export {
   AvatarImage,
   Badge,
   Button,
+  CSV_PREVIEW_ROW_LIMIT,
   Card,
   CardContent,
   CardDescription,
@@ -413,10 +419,12 @@ export {
   hasBackgroundRunningSessions,
   isStreamingAtom,
   messagesAtom,
+  parseCsv,
   parseToolEvent,
   partMapAtom,
   registerActiveSession,
   resetActiveSessions,
+  resolveFilePreviewKind,
   setActiveSessionAttention,
   setActiveSessionConnection,
   setActiveSessionError,

package/dist/markdown.d.ts

@@ -1,15 +1,18 @@
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UrlTransform } from 'react-markdown';
 export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-0kSpWMnf.js';
 
 interface MarkdownProps {
     children: string;
     className?: string;
+    /** Transform parsed link and image URLs before sanitisation. */
+    urlTransform?: UrlTransform;
 }
 /**
  * Renders Markdown content with GFM support, XSS sanitisation, and
  * custom code block rendering via our CodeBlock component.
  */
-declare const Markdown: React.MemoExoticComponent<({ children, className }: MarkdownProps) => react_jsx_runtime.JSX.Element>;
+declare const Markdown: React.MemoExoticComponent<({ children, className, urlTransform }: MarkdownProps) => react_jsx_runtime.JSX.Element>;
 
 export { Markdown, type MarkdownProps };

package/dist/markdown.js

@@ -1,7 +1,7 @@
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-P5F43A65.js";
+} from "./chunk-EOAX2ENE.js";
 import {
   CodeBlock,
   CopyButton

package/dist/openui.js

@@ -1,10 +1,10 @@
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-3M7BPSSW.js";
+} from "./chunk-3TI5DEHV.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/run.js

@@ -1,28 +1,29 @@
 import {
   LiveDuration
-} from "./chunk-LFVF2HFB.js";
+} from "./chunk-YTO5V6QS.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-6RIX7M27.js";
+} from "./chunk-XYAIX4SU.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-CVX53NCC.js";
+} from "./chunk-TN4FUEWY.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-XT4JMYVB.js";
-import "./chunk-EIUE5GV2.js";
-import "./chunk-AAUNOHVL.js";
+} from "./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/sdk-hooks.js

@@ -5,20 +5,21 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-4ENFLPWQ.js";
+} from "./chunk-VPWY4I5O.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-UYTRNR7Z.js";
-import "./chunk-6RIX7M27.js";
-import "./chunk-XT4JMYVB.js";
-import "./chunk-EIUE5GV2.js";
-import "./chunk-AAUNOHVL.js";
+} from "./chunk-565EATZZ.js";
+import "./chunk-XYAIX4SU.js";
+import "./chunk-KNYSKNZX.js";
+import "./chunk-ND3ZFXQK.js";
+import "./chunk-NWECTSOH.js";
 import "./chunk-L57WRIND.js";
-import "./chunk-ZRVH3WCA.js";
-import "./chunk-P5F43A65.js";
+import "./chunk-4CLN43XT.js";
+import "./chunk-XU3HB5QL.js";
+import "./chunk-EOAX2ENE.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/tool-previews.js

@@ -7,8 +7,8 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-AAUNOHVL.js";
-import "./chunk-ZRVH3WCA.js";
+} from "./chunk-NWECTSOH.js";
+import "./chunk-XU3HB5QL.js";
 import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/utils.js

@@ -4,14 +4,16 @@ import {
 } from "./chunk-XGKULLYE.js";
 import {
   TOOL_CATEGORY_ICONS,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText
+} from "./chunk-ND3ZFXQK.js";
+import {
   formatBytes,
   formatDuration,
   formatUptime,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText,
   truncateText
-} from "./chunk-EIUE5GV2.js";
+} from "./chunk-4CLN43XT.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.7.0",
+  "version": "11.9.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -134,6 +134,7 @@
     "turndown": "^7.2.2"
   },
   "peerDependencies": {
+    "@tangle-network/brand": "^1.5.0",
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
@@ -145,8 +146,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
-    "yjs": "^13.6.0",
-    "@tangle-network/brand": "^1.5.0"
+    "yjs": "^13.6.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileArtifactPane } from "./file-artifact-pane";
+
+const TS_SOURCE = `interface SandboxConfig {
+  model: string
+  timeout: number
+  env: Record<string, string>
+}
+
+// Create a new sandbox and stream its output.
+export async function run(config: SandboxConfig) {
+  const sandbox = await Sandbox.create(config)
+  for await (const chunk of sandbox.stream()) {
+    process.stdout.write(chunk)
+  }
+}`;
+
+const MARKDOWN_SOURCE = `# Run report
+
+The agent finished **3 of 3** tasks.
+
+| Task | Result |
+| --- | --- |
+| Build | pass |
+| Test | 315 / 315 |
+| Deploy | staging |
+
+\`\`\`ts
+export const ready = true
+\`\`\`
+`;
+
+// A transparent SVG, larger than the pane, so the checker ground shows through
+// and the fit-to-pane / natural-size toggle has a visible effect.
+const IMAGE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900" viewBox="0 0 640 360">
+  <defs>
+    <linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#8263FF"/>
+      <stop offset="1" stop-color="#10b981"/>
+    </linearGradient>
+  </defs>
+  <circle cx="220" cy="180" r="120" fill="url(#g)"/>
+  <rect x="360" y="80" width="200" height="200" rx="28" fill="#FFB347" opacity="0.9"/>
+  <text x="320" y="330" text-anchor="middle" font-family="sans-serif" font-size="22" fill="#E8E6F6">chart.svg · 1600 × 900</text>
+</svg>`;
+const IMAGE_URL = `data:image/svg+xml;utf8,${encodeURIComponent(IMAGE_SVG)}`;
+
+// One-page PDF (Helvetica text and a rule) so the viewer has real content.
+const PDF_URL =
+  "data:application/pdf;base64,JVBERi0xLjQKMSAwIG9iago8PCAvVHlwZSAvQ2F0YWxvZyAvUGFnZXMgMiAwIFIgPj4KZW5kb2JqCjIgMCBvYmoKPDwgL1R5cGUgL1BhZ2VzIC9LaWRzIFszIDAgUl0gL0NvdW50IDEgPj4KZW5kb2JqCjMgMCBvYmoKPDwgL1R5cGUgL1BhZ2UgL1BhcmVudCAyIDAgUiAvTWVkaWFCb3ggWzAgMCA2MTIgNzkyXSAvQ29udGVudHMgNCAwIFIgL1Jlc291cmNlcyA8PCAvRm9udCA8PCAvRjEgNSAwIFIgPj4gPj4gPj4KZW5kb2JqCjQgMCBvYmoKPDwgL0xlbmd0aCAyODkgPj4Kc3RyZWFtCkJUIC9GMSAyMiBUZiA1NiA3MDAgVGQgKEZpbGVBcnRpZmFjdFBhbmUpIFRqIEVUCkJUIC9GMSAxMiBUZiA1NiA2NzIgVGQgKFBERiBwcmV2aWV3IHJlbmRlcnMgdGhlIGJsb2JVcmwgYXQgZnVsbCBwYW5lIGhlaWdodC4pIFRqIEVUCkJUIC9GMSAxMiBUZiA1NiA2NTIgVGQgKEV2ZXJ5IGNvbnN1bWVyIG9mIEB0YW5nbGUtbmV0d29yay91aS9maWxlcyBnZXRzIHRoaXMgZm9yIGZyZWUuKSBUaiBFVAo1NiA2MjAgbSA1NTYgNjIwIGwgUwpCVCAvRjEgMTAgVGYgNTYgNTk2IFRkIChQYWdlIDEgb2YgMSkgVGogRVQKZW5kc3RyZWFtCmVuZG9iago1IDAgb2JqCjw8IC9UeXBlIC9Gb250IC9TdWJ0eXBlIC9UeXBlMSAvQmFzZUZvbnQgL0hlbHZldGljYSA+PgplbmRvYmoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAwNTggMDAwMDAgbiAKMDAwMDAwMDExNSAwMDAwMCBuIAowMDAwMDAwMjQxIDAwMDAwIG4gCjAwMDAwMDA1ODEgMDAwMDAgbiAKdHJhaWxlcgo8PCAvU2l6ZSA2IC9Sb290IDEgMCBSID4+CnN0YXJ0eHJlZgo2NTEKJSVFT0YK";
+
+const CSV_SOURCE = [
+  "id,name,role,note,active",
+  ...Array.from({ length: 520 }, (_, i) =>
+    [
+      i + 1,
+      `"Lovelace, Ada ${i + 1}"`,
+      ["engineer", "maintainer", "architect"][i % 3],
+      `"Handles ""quoted"" values, and commas"`,
+      i % 4 === 0 ? "false" : "true",
+    ].join(","),
+  ),
+].join("\n");
+
+// CC0 sample media hosted by MDN; the story only needs a playable src.
+const VIDEO_URL = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+const AUDIO_URL = "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3";
+
+const meta: Meta<typeof FileArtifactPane> = {
+  title: "Files/FileArtifactPane",
+  component: FileArtifactPane,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    onDownload: { action: "download" },
+    onClose: { action: "close" },
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[560px] w-[760px] overflow-hidden rounded-xl border border-border bg-card text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof FileArtifactPane>;
+
+export const Code: Story = {
+  args: { filename: "run.ts", path: "src/run.ts", content: TS_SOURCE },
+};
+
+export const Image: Story = {
+  args: {
+    filename: "chart.svg",
+    path: "out/chart.svg",
+    blobUrl: IMAGE_URL,
+    mimeType: "image/svg+xml",
+    size: 1_204,
+  },
+};
+
+export const Pdf: Story = {
+  name: "PDF",
+  args: {
+    filename: "report.pdf",
+    path: "out/report.pdf",
+    blobUrl: PDF_URL,
+    mimeType: "application/pdf",
+    size: 834,
+  },
+};
+
+export const Csv: Story = {
+  name: "CSV (520 rows, capped at 500)",
+  args: { filename: "people.csv", path: "data/people.csv", content: CSV_SOURCE },
+};
+
+export const Video: Story = {
+  args: {
+    filename: "flower.mp4",
+    path: "media/flower.mp4",
+    blobUrl: VIDEO_URL,
+    mimeType: "video/mp4",
+  },
+};
+
+export const Audio: Story = {
+  args: {
+    filename: "t-rex-roar.mp3",
+    path: "media/t-rex-roar.mp3",
+    blobUrl: AUDIO_URL,
+    mimeType: "audio/mpeg",
+  },
+};
+
+export const Spreadsheet: Story = {
+  args: { filename: "ledger.xlsx", path: "finance/ledger.xlsx", size: 48_213 },
+};
+
+export const MarkdownProse: Story = {
+  name: "Markdown",
+  args: { filename: "REPORT.md", path: "out/REPORT.md", content: MARKDOWN_SOURCE },
+};
+
+export const BinaryWithoutLink: Story = {
+  name: "Binary without a download link",
+  args: { filename: "weights.bin", path: "model/weights.bin", size: 402_653_184 },
+};