@tangle-network/ui 3.0.0 → 4.1.0

package/dist/files.js

@@ -5,10 +5,17 @@ import {
   FileTree,
   RichFileTree,
   filterFileTree
-} from "./chunk-HJKCSXCH.js";
+} from "./chunk-LELGOLFV.js";
+import {
+  detectFileFormat,
+  fileExtension,
+  getCodeLanguage,
+  getFormatLabel,
+  getSyntaxLanguage
+} from "./chunk-ZRVH3WCA.js";
 import "./chunk-CSAIKY36.js";
-import "./chunk-CD53GZOM.js";
-import "./chunk-66BNMOVT.js";
+import "./chunk-FJBTCTZM.js";
+import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   FileArtifactPane,
@@ -16,5 +23,10 @@ export {
   FileTabs,
   FileTree,
   RichFileTree,
-  filterFileTree
+  detectFileFormat,
+  fileExtension,
+  filterFileTree,
+  getCodeLanguage,
+  getFormatLabel,
+  getSyntaxLanguage
 };

package/dist/hooks.js

@@ -11,18 +11,18 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-YJ2G3XO5.js";
+} from "./chunk-CMX2I43A.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-54SQQMMM.js";
-import "./chunk-7UO2ZMRQ.js";
-import "./chunk-2VH6PUXD.js";
+import "./chunk-5VPTNXX7.js";
+import "./chunk-DGW77LD7.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-CD53GZOM.js";
-import "./chunk-66BNMOVT.js";
+import "./chunk-FJBTCTZM.js";
+import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   RealtimeSessionRegistry,

package/dist/index.d.ts

@@ -6,9 +6,9 @@ export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, Agen
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from './run.js';
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.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, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from './files.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 { Markdown, MarkdownProps } from './markdown.js';
-export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-DjXf8eOG.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';
 export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from './sdk-hooks.js';
 export { AuthUser, UseAuthOptions, UseAuthResult, createAuthFetcher, useApiKey, useAuth, useLiveTime } from './hooks.js';

package/dist/index.js

@@ -17,7 +17,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-YJ2G3XO5.js";
+} from "./chunk-CMX2I43A.js";
 import {
   addMessage,
   addParts,
@@ -138,7 +138,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-2NFQRQOD.js";
+} from "./chunk-KT5RNO7N.js";
 import {
   useAutoScroll,
   useRunCollapseState,
@@ -148,18 +148,18 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-7UO2ZMRQ.js";
+} from "./chunk-5VPTNXX7.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-YNN4O57I.js";
+} from "./chunk-JBPWIYTQ.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-2VH6PUXD.js";
+} from "./chunk-DGW77LD7.js";
 import {
   formatBytes,
   formatDuration,
@@ -180,11 +180,11 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-XIHMJ7ZQ.js";
+} from "./chunk-AAUNOHVL.js";
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-TMFOPHHN.js";
+} from "./chunk-52Y3FMFI.js";
 import {
   Badge,
   Card,
@@ -215,7 +215,14 @@ import {
   FileTree,
   RichFileTree,
   filterFileTree
-} from "./chunk-HJKCSXCH.js";
+} from "./chunk-LELGOLFV.js";
+import {
+  detectFileFormat,
+  fileExtension,
+  getCodeLanguage,
+  getFormatLabel,
+  getSyntaxLanguage
+} from "./chunk-ZRVH3WCA.js";
 import {
   Tabs,
   TabsContent,
@@ -228,11 +235,11 @@ import {
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-66BNMOVT.js";
+} from "./chunk-WUQDUBJG.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -465,6 +472,8 @@ export {
   cn,
   copyText,
   createAuthFetcher,
+  detectFileFormat,
+  fileExtension,
   filterFileTree,
   formatBytes,
   formatDuration,
@@ -472,9 +481,12 @@ export {
   getActiveSession,
   getAllActiveSessions,
   getAllProjectActivity,
+  getCodeLanguage,
+  getFormatLabel,
   getSessionsByActivity,
   getSessionsForNavbar,
   getSessionsForProject,
+  getSyntaxLanguage,
   getToolCategory,
   getToolDisplayMetadata,
   getToolErrorText,

package/dist/markdown.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-DjXf8eOG.js';
+export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-0kSpWMnf.js';
 
 interface MarkdownProps {
     children: string;

package/dist/markdown.js

@@ -1,11 +1,11 @@
 import "./chunk-5Z5ZYMOJ.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-66BNMOVT.js";
+} from "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   CodeBlock,

package/dist/openui.js

@@ -1,11 +1,11 @@
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-TMFOPHHN.js";
+} from "./chunk-52Y3FMFI.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-CD53GZOM.js";
-import "./chunk-66BNMOVT.js";
+import "./chunk-FJBTCTZM.js";
+import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   OpenUIArtifactRenderer

package/dist/primitives.d.ts

@@ -14,7 +14,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as LabelPrimitive from '@radix-ui/react-label';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
-export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-DjXf8eOG.js';
+export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-0kSpWMnf.js';
 
 declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
     variant?: "default" | "glass" | "sandbox" | "elevated";

package/dist/primitives.js

@@ -100,7 +100,7 @@ import {
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-66BNMOVT.js";
+} from "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   ArtifactPane,

package/dist/run.js

@@ -2,26 +2,27 @@ import "./chunk-LQS34IGP.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-7UO2ZMRQ.js";
+} from "./chunk-5VPTNXX7.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
   InlineToolItem,
   LiveDuration,
   RunGroup
-} from "./chunk-YNN4O57I.js";
+} from "./chunk-JBPWIYTQ.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-2VH6PUXD.js";
+} from "./chunk-DGW77LD7.js";
 import "./chunk-4CLN43XT.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-XIHMJ7ZQ.js";
-import "./chunk-TMFOPHHN.js";
+import "./chunk-AAUNOHVL.js";
+import "./chunk-52Y3FMFI.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";
-import "./chunk-CD53GZOM.js";
-import "./chunk-66BNMOVT.js";
+import "./chunk-ZRVH3WCA.js";
+import "./chunk-FJBTCTZM.js";
+import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   ExpandedToolDetail,

package/dist/sdk-hooks.js

@@ -5,18 +5,18 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-YJ2G3XO5.js";
+} from "./chunk-CMX2I43A.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-54SQQMMM.js";
-import "./chunk-7UO2ZMRQ.js";
-import "./chunk-2VH6PUXD.js";
+import "./chunk-5VPTNXX7.js";
+import "./chunk-DGW77LD7.js";
 import "./chunk-BX6AQMUS.js";
-import "./chunk-CD53GZOM.js";
-import "./chunk-66BNMOVT.js";
+import "./chunk-FJBTCTZM.js";
+import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   RealtimeSessionRegistry,

package/dist/tool-previews.js

@@ -7,8 +7,9 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-XIHMJ7ZQ.js";
-import "./chunk-66BNMOVT.js";
+} from "./chunk-AAUNOHVL.js";
+import "./chunk-ZRVH3WCA.js";
+import "./chunk-WUQDUBJG.js";
 import "./chunk-RQHJBTEU.js";
 export {
   CommandPreview,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "3.0.0",
+  "version": "4.1.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7",
-    "@tangle-network/brand": "^0.4.0"
+    "@tangle-network/brand": "^0.5.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

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

@@ -6,6 +6,7 @@ import {
   type DocumentEditorPaneCollaborationConfig,
 } from "../editor/document-editor-pane";
 import { ArtifactPane, type ArtifactPaneProps } from "../primitives/artifact-pane";
+import { detectFileFormat } from "./file-format";
 import { FilePreview, type FilePreviewProps } from "./file-preview";
 import { FileTabs, type FileTabData } from "./file-tabs";
 
@@ -79,9 +80,8 @@ export function FileArtifactPane({
     />
   ) : undefined;
   const isMarkdown =
-    mimeType === "text/markdown" ||
-    filename.toLowerCase().endsWith(".md") ||
-    path?.toLowerCase().endsWith(".md");
+    detectFileFormat(filename, mimeType) === "markdown" ||
+    (path ? detectFileFormat(path, mimeType) === "markdown" : false);
   const isEditableMarkdown = isMarkdown && editor?.enabled;
   const headerActions = (
     <>

package/src/files/file-format.test.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect } from "vitest";
+import {
+  detectFileFormat,
+  fileExtension,
+  getCodeLanguage,
+  getFormatLabel,
+  getSyntaxLanguage,
+} from "./file-format";
+
+describe("detectFileFormat", () => {
+  it("detects by extension", () => {
+    expect(detectFileFormat("report.pdf")).toBe("pdf");
+    expect(detectFileFormat("photo.PNG")).toBe("image");
+    expect(detectFileFormat("data.csv")).toBe("csv");
+    expect(detectFileFormat("book.xlsx")).toBe("spreadsheet");
+    expect(detectFileFormat("legacy.xls")).toBe("spreadsheet");
+    expect(detectFileFormat("main.py")).toBe("code");
+    expect(detectFileFormat("app.tsx")).toBe("code");
+    expect(detectFileFormat("config.json")).toBe("json");
+    expect(detectFileFormat("compose.yaml")).toBe("yaml");
+    expect(detectFileFormat("compose.yml")).toBe("yaml");
+    expect(detectFileFormat("README.md")).toBe("markdown");
+    expect(detectFileFormat("notes.markdown")).toBe("markdown");
+    expect(detectFileFormat("output.log")).toBe("text");
+  });
+
+  it("treats shell dotfiles as code", () => {
+    expect(detectFileFormat(".bashrc")).toBe("code");
+    expect(detectFileFormat(".profile")).toBe("code");
+    expect(detectFileFormat(".gitignore")).toBe("code");
+  });
+
+  it("routes every highlightable extension to the code viewer", () => {
+    // detectFileFormat must stay in sync with getSyntaxLanguage — anything we
+    // can highlight (and that has no dedicated format) renders as code, not text.
+    for (const file of [
+      "main.rs",
+      "server.go",
+      "app.rb",
+      "styles.css",
+      "theme.scss",
+      "index.html",
+      "Cargo.toml",
+      "query.sql",
+      "Token.sol",
+      "schema.proto",
+      "module.mjs",
+      "legacy.cjs",
+      "deploy.zsh",
+    ]) {
+      expect(detectFileFormat(file)).toBe("code");
+      expect(getSyntaxLanguage(file)).toBeDefined();
+    }
+  });
+
+  it("keeps formats with a dedicated renderer out of the code viewer", () => {
+    expect(detectFileFormat("config.json")).toBe("json");
+    expect(detectFileFormat("compose.yml")).toBe("yaml");
+    expect(detectFileFormat("README.md")).toBe("markdown");
+  });
+
+  it("prefers MIME type when it is more specific", () => {
+    expect(detectFileFormat("file", "application/pdf")).toBe("pdf");
+    expect(detectFileFormat("blob", "image/png")).toBe("image");
+    expect(detectFileFormat("CHANGELOG", "text/markdown")).toBe("markdown");
+    expect(detectFileFormat("noext", "text/plain")).toBe("text");
+  });
+
+  it("falls back to unknown when nothing matches", () => {
+    expect(detectFileFormat("mystery.bin")).toBe("unknown");
+    expect(detectFileFormat("noextension")).toBe("unknown");
+  });
+
+  it("does not classify a dotless basename that happens to spell an extension", () => {
+    // A file literally named "pdf"/"json" has no extension — it must not be
+    // treated as that format (e.g. a pdf with no blobUrl renders empty).
+    expect(detectFileFormat("pdf")).toBe("unknown");
+    expect(detectFileFormat("json")).toBe("unknown");
+    expect(detectFileFormat("csv")).toBe("unknown");
+  });
+
+  it("lets a concrete extension win over a generic text/plain MIME", () => {
+    expect(detectFileFormat("config.json", "text/plain")).toBe("json");
+    expect(detectFileFormat("main.py", "text/plain")).toBe("code");
+  });
+
+  it("detects structured-data MIME types on generically-named files", () => {
+    expect(detectFileFormat("data", "application/json")).toBe("json");
+    expect(detectFileFormat("records", "text/csv")).toBe("csv");
+    expect(detectFileFormat("export", "application/csv")).toBe("csv");
+    expect(detectFileFormat("config", "application/yaml")).toBe("yaml");
+    expect(detectFileFormat("feed", "application/x-yaml")).toBe("yaml");
+    expect(detectFileFormat("feed", "text/yaml")).toBe("yaml");
+  });
+
+  it("ignores MIME charset parameters", () => {
+    expect(detectFileFormat("data", "application/json; charset=utf-8")).toBe("json");
+    expect(detectFileFormat("blob", "IMAGE/PNG")).toBe("image");
+  });
+
+  it("treats an authoritative MIME type as outranking a conflicting extension", () => {
+    expect(detectFileFormat("notes.json", "text/markdown")).toBe("markdown");
+    expect(detectFileFormat("page.txt", "application/json")).toBe("json");
+  });
+});
+
+describe("getFormatLabel", () => {
+  it("maps every format to a human label", () => {
+    expect(getFormatLabel("pdf")).toBe("PDF");
+    expect(getFormatLabel("json")).toBe("JSON");
+    expect(getFormatLabel("yaml")).toBe("YAML");
+    expect(getFormatLabel("markdown")).toBe("Markdown");
+    expect(getFormatLabel("spreadsheet")).toBe("Spreadsheet");
+    expect(getFormatLabel("unknown")).toBe("File");
+  });
+});
+
+describe("getSyntaxLanguage", () => {
+  it("maps known extensions to highlight.js language ids", () => {
+    expect(getSyntaxLanguage("main.py")).toBe("python");
+    expect(getSyntaxLanguage("server.ts")).toBe("typescript");
+    expect(getSyntaxLanguage("index.mjs")).toBe("javascript");
+    expect(getSyntaxLanguage("config.json")).toBe("json");
+    expect(getSyntaxLanguage("compose.yml")).toBe("yaml");
+    expect(getSyntaxLanguage(".bashrc")).toBe("bash");
+    expect(getSyntaxLanguage("lib.rs")).toBe("rust");
+  });
+
+  it("resolves from a full path, not just a basename", () => {
+    expect(getSyntaxLanguage("src/server/index.ts")).toBe("typescript");
+  });
+
+  it("returns undefined for unmapped extensions", () => {
+    expect(getSyntaxLanguage("mystery.bin")).toBeUndefined();
+    expect(getSyntaxLanguage("noextension")).toBeUndefined();
+  });
+});
+
+describe("getCodeLanguage", () => {
+  it("uses the detected format for json/yaml, covering extensionless MIME-only files", () => {
+    expect(getCodeLanguage("config", "json")).toBe("json");
+    expect(getCodeLanguage("config", "yaml")).toBe("yaml");
+    // A real extension resolves to the same answer.
+    expect(getCodeLanguage("config.json", "json")).toBe("json");
+    expect(getCodeLanguage("compose.yml", "yaml")).toBe("yaml");
+  });
+
+  it("keys off the extension for other code formats", () => {
+    expect(getCodeLanguage("main.rs", "code")).toBe("rust");
+    expect(getCodeLanguage("server.ts", "code")).toBe("typescript");
+    expect(getCodeLanguage("notes", "code")).toBeUndefined();
+  });
+});
+
+describe("fileExtension", () => {
+  it("lowercases the trailing extension", () => {
+    expect(fileExtension("Photo.JPEG")).toBe("jpeg");
+  });
+
+  it("returns the dotfile name for files that are all extension", () => {
+    expect(fileExtension(".gitignore")).toBe("gitignore");
+  });
+
+  it("ignores dots in directory components", () => {
+    expect(fileExtension("my.config.dir/file")).toBe("");
+    expect(fileExtension("v1.2.0/Makefile")).toBe("");
+    expect(fileExtension("a.b.c/server.ts")).toBe("ts");
+  });
+
+  it("returns no extension for a dotless basename, even one that looks like an extension", () => {
+    expect(fileExtension("json")).toBe("");
+    expect(fileExtension("pdf")).toBe("");
+    expect(fileExtension("README")).toBe("");
+    expect(fileExtension("Makefile")).toBe("");
+  });
+});