@tangle-network/ui 3.0.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @tangle-network/ui
 
+## 5.0.0
+
+### Patch Changes
+
+- Updated dependencies [c56ea6c]
+  - @tangle-network/brand@0.6.0
+
+## 4.1.0
+
+### Minor Changes
+
+- d7a442d: Share theme-aware file-format rendering across the preview and artifact surfaces. `FilePreview` now routes `code`/`json`/`yaml` through the same theme-aware `CodeBlock` the chat markdown renderer uses, so code is syntax-highlighted and theme-consistent in the artifact pane instead of monochrome. A new `files/file-format` module (`detectFileFormat`, `getFormatLabel`, `getSyntaxLanguage`, `fileExtension`) is the single source of truth for extension/MIME detection, consumed by `FilePreview`, `FileArtifactPane`, and `WriteFilePreview`. `CodeBlock` gains an optional `label` prop to display a header name independent of the highlight language.
+
+## 4.0.0
+
+### Patch Changes
+
+- Updated dependencies [184c8bb]
+  - @tangle-network/brand@0.5.0
+
 ## 3.0.0
 
 ### Patch Changes

package/dist/chat.js

@@ -6,18 +6,19 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-2NFQRQOD.js";
+} from "./chunk-KT5RNO7N.js";
 import "./chunk-54SQQMMM.js";
-import "./chunk-YNN4O57I.js";
-import "./chunk-2VH6PUXD.js";
+import "./chunk-JBPWIYTQ.js";
+import "./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 {
   AgentTimeline,

package/dist/{chunk-TMFOPHHN.js → chunk-52Y3FMFI.js}

@@ -17,10 +17,10 @@ import {
 } from "./chunk-MKTSMWVD.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
 import {
   CodeBlock
-} from "./chunk-66BNMOVT.js";
+} from "./chunk-WUQDUBJG.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-7UO2ZMRQ.js → chunk-5VPTNXX7.js}

@@ -1,10 +1,10 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-2VH6PUXD.js";
+} from "./chunk-DGW77LD7.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

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

@@ -1,7 +1,10 @@
+import {
+  getSyntaxLanguage
+} from "./chunk-ZRVH3WCA.js";
 import {
   CodeBlock,
   CopyButton
-} from "./chunk-66BNMOVT.js";
+} from "./chunk-WUQDUBJG.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -153,39 +156,11 @@ function extractWriteContent(input) {
   const content = String(obj.content ?? obj.contents ?? obj.data ?? "");
   return { path, content };
 }
-function getLanguageFromPath(path) {
-  const ext = path.split(".").pop()?.toLowerCase();
-  const map = {
-    ts: "typescript",
-    tsx: "tsx",
-    js: "javascript",
-    jsx: "jsx",
-    rs: "rust",
-    py: "python",
-    go: "go",
-    rb: "ruby",
-    json: "json",
-    yaml: "yaml",
-    yml: "yaml",
-    toml: "toml",
-    md: "markdown",
-    css: "css",
-    scss: "scss",
-    html: "html",
-    sh: "bash",
-    bash: "bash",
-    zsh: "bash",
-    sql: "sql",
-    sol: "solidity",
-    proto: "protobuf"
-  };
-  return ext ? map[ext] : void 0;
-}
 var WriteFilePreview = memo2(({ part }) => {
   const write = extractWriteContent(part.state.input);
   if (!write) return null;
   const lineCount = write.content.split("\n").length;
-  const language = getLanguageFromPath(write.path);
+  const language = getSyntaxLanguage(write.path);
   return /* @__PURE__ */ jsxs3(
     PreviewCard,
     {

package/dist/{chunk-YJ2G3XO5.js → chunk-CMX2I43A.js}

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

package/dist/{chunk-2VH6PUXD.js → chunk-DGW77LD7.js}

@@ -1,6 +1,6 @@
 import {
   CodeBlock
-} from "./chunk-66BNMOVT.js";
+} from "./chunk-WUQDUBJG.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-CD53GZOM.js → chunk-FJBTCTZM.js}

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

package/dist/{chunk-YNN4O57I.js → chunk-JBPWIYTQ.js}

@@ -15,16 +15,16 @@ import {
   QuestionPreview,
   WebSearchPreview,
   WriteFilePreview
-} from "./chunk-XIHMJ7ZQ.js";
+} from "./chunk-AAUNOHVL.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-TMFOPHHN.js";
+} from "./chunk-52Y3FMFI.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
 import {
   CodeBlock
-} from "./chunk-66BNMOVT.js";
+} from "./chunk-WUQDUBJG.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-2NFQRQOD.js → chunk-KT5RNO7N.js}

@@ -6,20 +6,20 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-YNN4O57I.js";
+} from "./chunk-JBPWIYTQ.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-2VH6PUXD.js";
+} from "./chunk-DGW77LD7.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-BX6AQMUS.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-TMFOPHHN.js";
+} from "./chunk-52Y3FMFI.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-HJKCSXCH.js → chunk-LELGOLFV.js}

@@ -1,9 +1,19 @@
+import {
+  detectFileFormat,
+  fileExtension,
+  getCodeLanguage,
+  getFormatLabel
+} from "./chunk-ZRVH3WCA.js";
 import {
   ArtifactPane
 } from "./chunk-CSAIKY36.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
+import {
+  CodeBlock,
+  CopyButton
+} from "./chunk-WUQDUBJG.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -311,69 +321,25 @@ import {
   FileText as FileText2
 } from "lucide-react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function getPreviewType(filename, mimeType) {
-  const ext = filename.split(".").pop()?.toLowerCase() || "";
-  if (mimeType?.startsWith("application/pdf") || ext === "pdf") return "pdf";
-  if (mimeType?.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) return "image";
-  if (["csv"].includes(ext)) return "csv";
-  if (["xlsx", "xls"].includes(ext)) return "spreadsheet";
-  if (["py", "ts", "js", "tsx", "jsx", "sh", "bash"].includes(ext) || ["profile", "bashrc", "bash_logout", "env", "gitignore"].includes(ext)) return "code";
-  if (["json"].includes(ext)) return "json";
-  if (["yaml", "yml"].includes(ext)) return "yaml";
-  if (["md", "markdown"].includes(ext)) return "markdown";
-  if (["txt", "log", "text"].includes(ext)) return "text";
-  if (mimeType?.startsWith("text/plain")) return "text";
-  return "unknown";
-}
-function getPreviewLabel(previewType) {
-  switch (previewType) {
-    case "pdf":
-      return "PDF";
-    case "image":
-      return "Image";
-    case "csv":
-      return "CSV";
-    case "spreadsheet":
-      return "Spreadsheet";
-    case "code":
-      return "Code";
-    case "json":
-      return "JSON";
-    case "yaml":
-      return "YAML";
-    case "markdown":
-      return "Markdown";
-    case "text":
-      return "Text";
-    default:
-      return "File";
-  }
-}
-function CodePreview({ content, filename }) {
-  const lines = content.split("\n");
-  const language = filename.split(".").pop()?.toUpperCase() || "TXT";
-  return /* @__PURE__ */ jsxs2("div", { className: "relative bg-background rounded-[var(--radius-md)] border border-border overflow-hidden", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2.5", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5", children: [
-        /* @__PURE__ */ jsx3("div", { className: "w-3 h-3 rounded-full bg-[#FF5F57]" }),
-        /* @__PURE__ */ jsx3("div", { className: "w-3 h-3 rounded-full bg-[#FEBC2E]" }),
-        /* @__PURE__ */ jsx3("div", { className: "w-3 h-3 rounded-full bg-[#8E59FF]" })
-      ] }),
-      /* @__PURE__ */ jsx3("div", { className: "ml-2 min-w-0 flex-1 truncate text-xs font-mono text-muted-foreground", children: filename }),
-      /* @__PURE__ */ jsxs2("div", { className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: [
-        /* @__PURE__ */ jsx3("span", { children: language }),
-        /* @__PURE__ */ jsx3("span", { className: "h-1 w-1 rounded-full bg-[var(--border-hover)]" }),
-        /* @__PURE__ */ jsxs2("span", { children: [
-          lines.length,
-          " lines"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx3("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx3("table", { className: "w-full", children: /* @__PURE__ */ jsx3("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-accent", children: [
-      /* @__PURE__ */ jsx3("td", { className: "text-right pr-4 pl-4 py-0 select-none text-muted-foreground text-xs font-mono w-10 align-top leading-[1.55]", children: i + 1 }),
-      /* @__PURE__ */ jsx3("td", { className: "pr-4 py-0 font-mono text-[13px] text-foreground leading-[1.55] whitespace-pre", children: line || " " })
-    ] }, i)) }) }) })
-  ] });
+function CodePreview({
+  content,
+  filename,
+  format
+}) {
+  const lineCount = content.split("\n").length;
+  const language = getCodeLanguage(filename, format);
+  const labelToken = fileExtension(filename) || language || "txt";
+  return /* @__PURE__ */ jsx3(
+    CodeBlock,
+    {
+      code: content,
+      language,
+      label: `${labelToken} \xB7 ${lineCount} lines`,
+      showLineNumbers: true,
+      className: "max-h-[70vh] overflow-auto",
+      children: /* @__PURE__ */ jsx3(CopyButton, { text: content })
+    }
+  );
 }
 function parseCsvRow(line) {
   const cells = [];
@@ -478,9 +444,9 @@ function FilePreview({
   hideHeader = false,
   className
 }) {
-  const previewType = getPreviewType(filename, mimeType);
-  const previewLabel = getPreviewLabel(previewType);
-  const hasRenderableSource = Boolean(content) || Boolean(blobUrl) || previewType === "unknown" || previewType === "spreadsheet";
+  const format = detectFileFormat(filename, mimeType);
+  const previewLabel = getFormatLabel(format);
+  const hasRenderableSource = Boolean(content) || Boolean(blobUrl) || format === "unknown" || format === "spreadsheet";
   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: [
@@ -509,13 +475,13 @@ function FilePreview({
       )
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-auto p-3", children: [
-      previewType === "pdf" && blobUrl && /* @__PURE__ */ jsx3(PdfPreview, { blobUrl, filename }),
-      previewType === "image" && blobUrl && /* @__PURE__ */ jsx3(ImagePreview, { src: blobUrl, filename }),
-      previewType === "csv" && typeof content === "string" && /* @__PURE__ */ jsx3(CsvPreview, { content }),
-      (previewType === "code" || previewType === "json" || previewType === "yaml") && typeof content === "string" && /* @__PURE__ */ jsx3(CodePreview, { content, filename }),
-      previewType === "text" && typeof content === "string" && /* @__PURE__ */ jsx3(TextPreview, { content }),
-      previewType === "markdown" && typeof content === "string" && /* @__PURE__ */ jsx3(MarkdownPreview, { content }),
-      previewType === "spreadsheet" && /* @__PURE__ */ jsx3(
+      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,
@@ -523,8 +489,8 @@ function FilePreview({
           description: "Download the workbook or convert it to CSV when you need an inline preview."
         }
       ),
-      previewType === "unknown" && typeof content !== "string" && /* @__PURE__ */ jsx3(EmptyPreview, { filename }),
-      previewType === "unknown" && typeof content === "string" && /* @__PURE__ */ jsx3(TextPreview, { content }),
+      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,
         {
@@ -594,7 +560,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-A5LT5H4N.js");
+  const module = await import("./document-editor-pane-WCTA3ZOE.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({
@@ -626,7 +592,7 @@ function FileArtifactPane({
       onClose: onTabClose
     }
   ) : void 0;
-  const isMarkdown = mimeType === "text/markdown" || filename.toLowerCase().endsWith(".md") || path?.toLowerCase().endsWith(".md");
+  const isMarkdown = detectFileFormat(filename, mimeType) === "markdown" || (path ? detectFileFormat(path, mimeType) === "markdown" : false);
   const isEditableMarkdown = isMarkdown && editor?.enabled;
   const headerActions = /* @__PURE__ */ jsxs4(Fragment, { children: [
     onDownload && /* @__PURE__ */ jsx5(

package/dist/{chunk-EEE55AVS.js → chunk-SZ44QDA6.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-CSAIKY36.js";
 import {
   Markdown
-} from "./chunk-CD53GZOM.js";
+} from "./chunk-FJBTCTZM.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-66BNMOVT.js → chunk-WUQDUBJG.js}

@@ -83,24 +83,25 @@ function useIsLightTheme() {
   return isLight;
 }
 var CodeBlock = memo(
-  ({ code, language, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
+  ({ code, language, label, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
     const isLight = useIsLightTheme();
     const light = lightProp ?? isLight;
     const theme = getSyntaxTheme();
     const bg = "bg-card border-border";
     const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
     const langColor = "text-muted-foreground";
+    const headerLabel = label ?? language;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn("group relative overflow-hidden rounded-lg border font-mono", bg, className),
         ...props,
         children: [
-          language && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between border-b px-3 py-1", headerBg), children: [
-            /* @__PURE__ */ jsx("span", { className: cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor), children: language }),
+          headerLabel && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between border-b px-3 py-1", headerBg), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor), children: headerLabel }),
             children
           ] }),
-          !language && children && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100", children }),
+          !headerLabel && children && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100", children }),
           /* @__PURE__ */ jsx(
             SyntaxHighlighter,
             {

package/dist/chunk-ZRVH3WCA.js

@@ -0,0 +1,107 @@
+// src/files/file-format.ts
+var IMAGE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "svg", "webp"];
+var EXTENSION_TO_SYNTAX_LANGUAGE = {
+  ts: "typescript",
+  tsx: "tsx",
+  js: "javascript",
+  jsx: "jsx",
+  mjs: "javascript",
+  cjs: "javascript",
+  rs: "rust",
+  py: "python",
+  go: "go",
+  rb: "ruby",
+  json: "json",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  md: "markdown",
+  markdown: "markdown",
+  css: "css",
+  scss: "scss",
+  html: "html",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  bashrc: "bash",
+  bash_logout: "bash",
+  profile: "bash",
+  sql: "sql",
+  sol: "solidity",
+  proto: "protobuf"
+};
+var NON_CODE_SYNTAX_EXTENSIONS = /* @__PURE__ */ new Set(["json", "yaml", "yml", "md", "markdown"]);
+var PLAIN_CODE_EXTENSIONS = ["env", "gitignore"];
+var CODE_EXTENSIONS = /* @__PURE__ */ new Set([
+  ...Object.keys(EXTENSION_TO_SYNTAX_LANGUAGE).filter((ext) => !NON_CODE_SYNTAX_EXTENSIONS.has(ext)),
+  ...PLAIN_CODE_EXTENSIONS
+]);
+function fileExtension(filename) {
+  const base = filename.slice(filename.lastIndexOf("/") + 1);
+  const dot = base.lastIndexOf(".");
+  if (dot < 0) return "";
+  return base.slice(dot + 1).toLowerCase();
+}
+function mimeEssence(mimeType) {
+  return mimeType?.split(";")[0]?.trim().toLowerCase() ?? "";
+}
+function detectFileFormat(filename, mimeType) {
+  const ext = fileExtension(filename);
+  const mime = mimeEssence(mimeType);
+  if (mime === "application/pdf") return "pdf";
+  if (mime.startsWith("image/")) return "image";
+  if (mime === "text/markdown") return "markdown";
+  if (mime === "application/json") return "json";
+  if (mime === "text/csv" || mime === "application/csv") return "csv";
+  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 (ext === "csv") return "csv";
+  if (ext === "xlsx" || ext === "xls") return "spreadsheet";
+  if (CODE_EXTENSIONS.has(ext)) return "code";
+  if (ext === "json") return "json";
+  if (ext === "yaml" || ext === "yml") return "yaml";
+  if (ext === "md" || ext === "markdown") return "markdown";
+  if (["txt", "log", "text"].includes(ext)) return "text";
+  if (mime === "text/plain") return "text";
+  return "unknown";
+}
+function getFormatLabel(format) {
+  switch (format) {
+    case "pdf":
+      return "PDF";
+    case "image":
+      return "Image";
+    case "csv":
+      return "CSV";
+    case "spreadsheet":
+      return "Spreadsheet";
+    case "code":
+      return "Code";
+    case "json":
+      return "JSON";
+    case "yaml":
+      return "YAML";
+    case "markdown":
+      return "Markdown";
+    case "text":
+      return "Text";
+    default:
+      return "File";
+  }
+}
+function getSyntaxLanguage(filename) {
+  return EXTENSION_TO_SYNTAX_LANGUAGE[fileExtension(filename)];
+}
+function getCodeLanguage(filename, format) {
+  if (format === "json" || format === "yaml") return format;
+  return getSyntaxLanguage(filename);
+}
+
+export {
+  fileExtension,
+  detectFileFormat,
+  getFormatLabel,
+  getSyntaxLanguage,
+  getCodeLanguage
+};

package/dist/{code-block-DjXf8eOG.d.ts → code-block-0kSpWMnf.d.ts}

@@ -5,12 +5,18 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
     code: string;
     language?: string;
+    /**
+     * Header text. Defaults to `language`. Set this when the display name differs
+     * from the highlight.js language id — e.g. a file extension ("BASHRC") whose
+     * content highlights as a known language, or none.
+     */
+    label?: string;
     showLineNumbers?: boolean;
     /** Force light theme; defaults to dark */
     light?: boolean;
     children?: ReactNode;
 }
-declare const CodeBlock: React.MemoExoticComponent<({ code, language, showLineNumbers, light: lightProp, className, children, ...props }: CodeBlockProps) => react_jsx_runtime.JSX.Element>;
+declare const CodeBlock: React.MemoExoticComponent<({ code, language, label, showLineNumbers, light: lightProp, className, children, ...props }: CodeBlockProps) => react_jsx_runtime.JSX.Element>;
 /** Copy-to-clipboard button for use inside CodeBlock. */
 declare const CopyButton: React.MemoExoticComponent<({ text }: {
     text: string;

package/dist/{document-editor-pane-A5LT5H4N.js → document-editor-pane-WCTA3ZOE.js}

@@ -1,11 +1,11 @@
 "use client";
 import {
   DocumentEditorPane
-} from "./chunk-EEE55AVS.js";
+} from "./chunk-SZ44QDA6.js";
 import "./chunk-Q56BYXQF.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 {
   DocumentEditorPane

package/dist/editor.js

@@ -11,11 +11,11 @@ import {
   useEditorConnection,
   useEditorContext,
   useYjsState
-} from "./chunk-EEE55AVS.js";
+} from "./chunk-SZ44QDA6.js";
 import "./chunk-Q56BYXQF.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 {
   CollaboratorsList,

package/dist/files.d.ts

@@ -101,7 +101,7 @@ declare function RichFileTree({ root, paths, selectedPath, onSelect, search, ini
  * Renders any file type beautifully:
  * - PDF: embedded viewer
  * - CSV/XLSX: tabular preview
- * - Code (py/json/yaml/ts/js): line-numbered viewer
+ * - Code (py/json/yaml/ts/js): syntax-highlighted, line-numbered viewer
  * - Markdown: rendered prose
  * - Images: inline display
  * - Text: monospace preview
@@ -172,4 +172,41 @@ interface FileArtifactPaneProps extends Omit<FilePreviewProps, "className"> {
  */
 declare function FileArtifactPane({ filename, content, blobUrl, mimeType, onClose, onDownload, path, tabs, activeTabId, onTabSelect, onTabClose, eyebrow, meta, toolbar, footer, className, editor, }: FileArtifactPaneProps): react_jsx_runtime.JSX.Element;
 
-export { FileArtifactPane, type FileArtifactPaneProps, type FileNode, FilePreview, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, filterFileTree };
+/**
+ * Shared file-format detection for every file surface — the preview pane, the
+ * artifact pane, and code rendering. Centralising extension/MIME → format logic
+ * 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";
+/**
+ * Lowercased trailing extension. Returns "" for a name with no extension
+ * ("README", "json" → ""), and the post-dot name for a dotfile (".bashrc" →
+ * "bashrc"). Directory components are ignored so dots in a directory name don't
+ * leak in ("my.config/file" → "").
+ */
+declare function fileExtension(filename: string): string;
+/**
+ * Resolve a filename + optional MIME type to the renderer format. A specific,
+ * authoritative MIME type wins over the extension; otherwise the extension
+ * 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;
+/**
+ * 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
+ * monospace and lets the highlighter auto-detect, so callers never need a
+ * bespoke language table.
+ */
+declare function getSyntaxLanguage(filename: string): string | undefined;
+/**
+ * Highlight language for a file already classified as a code-like format.
+ * `json`/`yaml` are their own highlight language even when detected purely from
+ * 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;
+
+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 };