@tangle-network/ui 11.30.2 → 11.31.0

package/src/markdown/code-block.tsx

@@ -4,173 +4,260 @@ import {
   useEffect,
   useRef,
   useState,
+  type CSSProperties,
   type HTMLAttributes,
   type ReactNode,
 } from "react";
-import type SyntaxHighlighter from "react-syntax-highlighter";
-import { Check, Copy } from "lucide-react";
+import type { HighlighterCore, LanguageRegistration, ThemedToken } from "shiki/core";
+import { Check, Copy, FileCode2 } from "lucide-react";
 import { focusRing, focusRingInset } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 // Leave variables unresolved: the browser resolves them on each token span,
 // including nested themes, inline overrides and CSS/media changes. No document
 // sampling, observers, layout reads or React re-render are needed to recolor code.
-const syntaxTheme: { [key: string]: React.CSSProperties } = (() => {
-  const comment = "var(--syntax-comment, currentColor)";
-  const keyword = "var(--syntax-keyword, currentColor)";
-  const string = "var(--syntax-string, currentColor)";
-  const fn = "var(--syntax-function, currentColor)";
-  const number = "var(--syntax-number, currentColor)";
-  const meta = "var(--syntax-meta, currentColor)";
-  const error = "var(--syntax-error, currentColor)";
-  const variable = "var(--syntax-variable, currentColor)";
-  const fg = "var(--syntax-foreground, currentColor)";
-  return {
-    "hljs-comment":           { color: comment, fontStyle: "italic" },
-    "hljs-quote":             { color: comment, fontStyle: "italic" },
-    "hljs-doctag":            { color: comment },
-    "hljs-keyword":           { color: keyword },
-    "hljs-selector-tag":      { color: keyword },
-    "hljs-literal":           { color: keyword },
-    "hljs-type":              { color: keyword },
-    "hljs-class":             { color: keyword },
-    "hljs-string":            { color: string },
-    "hljs-template-tag":      { color: string },
-    "hljs-template-variable": { color: string },
-    "hljs-addition":          { color: string },
-    "hljs-regexp":            { color: string },
-    "hljs-title":             { color: fn },
-    "hljs-section":           { color: fn },
-    "hljs-built_in":          { color: fn },
-    "hljs-name":              { color: fn },
-    "hljs-function":          { color: fn },
-    "hljs-selector-id":       { color: fn },
-    "hljs-selector-class":    { color: fn },
-    "hljs-attribute":         { color: fn },
-    "hljs-number":            { color: number },
-    "hljs-symbol":            { color: number },
-    "hljs-bullet":            { color: number },
-    "hljs-link":              { color: number, textDecoration: "underline" },
-    "hljs-meta":              { color: meta },
-    "hljs-selector-pseudo":   { color: meta },
-    "hljs-deletion":          { color: error },
-    "hljs-params":            { color: variable },
-    "hljs-variable":          { color: variable },
-    "hljs-tag":               { color: variable },
-    "hljs-attr":              { color: variable },
-    "hljs-subst":             { color: variable },
-    "hljs-strong":            { fontWeight: "bold" },
-    "hljs-emphasis":          { fontStyle: "italic" },
-    "hljs":                   { color: fg, background: "transparent" },
-  };
-})();
+const SYNTAX = {
+  comment: "var(--syntax-comment, currentColor)",
+  keyword: "var(--syntax-keyword, currentColor)",
+  string: "var(--syntax-string, currentColor)",
+  function: "var(--syntax-function, currentColor)",
+  number: "var(--syntax-number, currentColor)",
+  variable: "var(--syntax-variable, currentColor)",
+  foreground: "var(--syntax-foreground, currentColor)",
+} as const;
+
+const SHIKI_THEME = "tangle-syntax";
+// Shiki's CSS-variables theme names token roles; each maps onto a Brand syntax token.
+const BRAND_COLOR_FOR_SHIKI: Record<string, string> = {
+  "var(--shiki-foreground)": SYNTAX.foreground,
+  "var(--shiki-token-comment)": SYNTAX.comment,
+  "var(--shiki-token-keyword)": SYNTAX.keyword,
+  "var(--shiki-token-string)": SYNTAX.string,
+  "var(--shiki-token-string-expression)": SYNTAX.string,
+  "var(--shiki-token-function)": SYNTAX.function,
+  "var(--shiki-token-constant)": SYNTAX.number,
+  "var(--shiki-token-link)": SYNTAX.number,
+  "var(--shiki-token-parameter)": SYNTAX.variable,
+  "var(--shiki-token-punctuation)": SYNTAX.foreground,
+};
+
+type GrammarModule = { default: LanguageRegistration[] };
+const GRAMMARS: Record<string, () => Promise<GrammarModule>> = {
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  jsonc: () => import("shiki/langs/jsonc.mjs"),
+  bash: () => import("shiki/langs/bash.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  scss: () => import("shiki/langs/scss.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  mdx: () => import("shiki/langs/mdx.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+  toml: () => import("shiki/langs/toml.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  diff: () => import("shiki/langs/diff.mjs"),
+  go: () => import("shiki/langs/go.mjs"),
+  rust: () => import("shiki/langs/rust.mjs"),
+  solidity: () => import("shiki/langs/solidity.mjs"),
+  ruby: () => import("shiki/langs/ruby.mjs"),
+  java: () => import("shiki/langs/java.mjs"),
+  kotlin: () => import("shiki/langs/kotlin.mjs"),
+  swift: () => import("shiki/langs/swift.mjs"),
+  php: () => import("shiki/langs/php.mjs"),
+  c: () => import("shiki/langs/c.mjs"),
+  cpp: () => import("shiki/langs/cpp.mjs"),
+  csharp: () => import("shiki/langs/csharp.mjs"),
+  graphql: () => import("shiki/langs/graphql.mjs"),
+  xml: () => import("shiki/langs/xml.mjs"),
+  dockerfile: () => import("shiki/langs/dockerfile.mjs"),
+};
+
+const LANGUAGE_ALIASES: Record<string, string> = {
+  ts: "typescript", mts: "typescript", cts: "typescript", js: "javascript", mjs: "javascript",
+  cjs: "javascript", node: "javascript", sh: "bash", shell: "bash", zsh: "bash", console: "bash",
+  shellscript: "bash", py: "python", python3: "python", yml: "yaml", md: "markdown", rs: "rust",
+  sol: "solidity", rb: "ruby", kt: "kotlin", cs: "csharp", "c#": "csharp", "c++": "cpp",
+  gql: "graphql", svg: "xml", docker: "dockerfile", patch: "diff", htm: "html",
+};
 
-type Highlighter = typeof SyntaxHighlighter;
-let highlighterPromise: Promise<Highlighter> | undefined;
+const LANGUAGE_NAMES: Record<string, string> = {
+  typescript: "TypeScript", tsx: "TSX", javascript: "JavaScript", jsx: "JSX", json: "JSON",
+  jsonc: "JSONC", bash: "Bash", python: "Python", html: "HTML", css: "CSS", scss: "SCSS",
+  markdown: "Markdown", mdx: "MDX", yaml: "YAML", toml: "TOML", sql: "SQL", diff: "Diff",
+  go: "Go", rust: "Rust", solidity: "Solidity", ruby: "Ruby", java: "Java", kotlin: "Kotlin",
+  swift: "Swift", php: "PHP", c: "C", cpp: "C++", csharp: "C#", graphql: "GraphQL", xml: "XML",
+  dockerfile: "Dockerfile",
+};
 
-function loadHighlighter(): Promise<Highlighter> {
-  // Preserve the default renderer's language behavior, including alias inputs
-  // and unknown-language auto-detection. Its light async variant differs.
-  return highlighterPromise ??= import("react-syntax-highlighter/dist/esm/default-highlight")
-    .then((module) => module.default)
+/** The Shiki grammar for a fence language, or undefined for plain text. */
+export function codeBlockGrammar(language: string | undefined): string | undefined {
+  if (!language) return undefined;
+  const id = language.toLowerCase();
+  const resolved = LANGUAGE_ALIASES[id] ?? id;
+  return GRAMMARS[resolved] ? resolved : undefined;
+}
+
+let highlighterPromise: Promise<HighlighterCore> | undefined;
+const grammarLoads = new Map<string, Promise<void>>();
+
+function loadHighlighter(): Promise<HighlighterCore> {
+  // The JavaScript regex engine needs no WebAssembly, so it runs under a strict CSP.
+  return highlighterPromise ??= Promise.all([import("shiki/core"), import("shiki/engine/javascript")])
+    .then(([core, engine]) => core.createHighlighterCore({
+      themes: [core.createCssVariablesTheme({ name: SHIKI_THEME, variablePrefix: "--shiki-", fontStyle: true })],
+      langs: [],
+      engine: engine.createJavaScriptRegexEngine(),
+    }))
     .catch((error: unknown) => {
       highlighterPromise = undefined;
       throw error;
     });
 }
 
+async function tokenize(code: string, grammar: string): Promise<ThemedToken[][]> {
+  const highlighter = await loadHighlighter();
+  let load = grammarLoads.get(grammar);
+  if (!load) {
+    load = GRAMMARS[grammar]!().then((module) => highlighter.loadLanguage(module.default));
+    load.catch(() => grammarLoads.delete(grammar));
+    grammarLoads.set(grammar, load);
+  }
+  await load;
+  return highlighter.codeToTokensBase(code, { lang: grammar, theme: SHIKI_THEME });
+}
+
+function tokenStyle(token: ThemedToken): CSSProperties | undefined {
+  const color = token.color ? BRAND_COLOR_FOR_SHIKI[token.color] ?? SYNTAX.foreground : undefined;
+  const style = token.fontStyle ?? 0;
+  if (!color && !style) return undefined;
+  return {
+    ...(color ? { color } : {}),
+    ...(style & 1 ? { fontStyle: "italic" } : {}),
+    ...(style & 2 ? { fontWeight: "bold" } : {}),
+    ...(style & 4 ? { textDecoration: "underline" } : {}),
+  };
+}
+
 export 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.
+   * Header text. Defaults to the language's name. Set this when the display
+   * name differs from the language id, e.g. a file extension ("BASHRC").
    */
   label?: string;
+  /** The file the code belongs to, shown in the header with the language. */
+  filename?: string;
   showLineNumbers?: boolean;
   /** Force light (true) or dark (false); omitted inherits the nearest theme. */
   light?: boolean;
   children?: ReactNode;
 }
 
+/**
+ * Code with Shiki highlighting in Brand's syntax colors. It renders readable
+ * plain code first (and on the server), then highlights once its grammar loads.
+ */
 export const CodeBlock = memo(
-  ({ code, language, label, showLineNumbers = false, light, className, children, ...props }: CodeBlockProps) => {
-    const [Highlighter, setHighlighter] = useState<Highlighter | null>(null);
+  ({ code, language, label, filename, showLineNumbers = false, light, className, children, ...props }: CodeBlockProps) => {
+    const grammar = codeBlockGrammar(language);
+    const [highlighted, setHighlighted] = useState<{ code: string; grammar: string; lines: ThemedToken[][] } | null>(null);
     useEffect(() => {
+      if (!grammar) return;
       let active = true;
-      void loadHighlighter().then((component) => {
-        if (active) setHighlighter(() => component);
+      void tokenize(code, grammar).then((lines) => {
+        if (active) setHighlighted({ code, grammar, lines });
       }).catch(() => {
         // A failed chunk leaves the code readable; a later mount can retry.
       });
       return () => { active = false; };
-    }, []);
+    }, [code, grammar]);
 
-    const headerLabel = label ?? language;
+    const languageName = grammar ? LANGUAGE_NAMES[grammar] : language;
+    const headerLabel = label ?? (filename ? undefined : languageName);
+    const hasHeader = Boolean(filename || headerLabel);
     const mode = light === undefined ? {} : { "data-theme": light ? "light" : "dark" };
-    const customStyle = {
+    const preStyle: CSSProperties = {
       margin: 0,
       padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
       background: "transparent",
+      color: SYNTAX.foreground,
       fontSize: "var(--code-font-size, 0.8125rem)",
       lineHeight: "var(--code-line-height, 1.5)",
-      overflowX: "auto" as const,
+      overflowX: "auto",
+    };
+    const codeStyle: CSSProperties = {
+      fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)",
+      whiteSpace: "pre",
     };
-    const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
-    // A long line scrolls the block sideways, which a keyboard reaches only if
-    // the block takes focus (axe scrollable-region-focusable). A label on a bare
-    // <pre> is prohibited ARIA, so the block is a named region, as the terminal
-    // output regions are.
-    const scrollRegion = {
-      tabIndex: 0,
-      role: "region",
-      "aria-label": headerLabel ? `${headerLabel} code` : "Code",
-      // Inset: the rounded, overflow-clipped card would cut an outer ring.
-      className: focusRingInset,
-    } as const;
+    const isHighlighted = Boolean(highlighted && highlighted.code === code && highlighted.grammar === grammar);
+    const lines: Array<Array<{ content: string; style?: CSSProperties }>> = isHighlighted
+      ? highlighted!.lines.map((line) => line.map((token) => ({ content: token.content, style: tokenStyle(token) })))
+      : code.split("\n").map((line) => [{ content: line }]);
+    const regionName = filename ?? headerLabel;
 
     return (
       <div
         className={cn("group relative overflow-hidden rounded-lg border font-mono", "bg-card border-border", className)}
+        data-highlighted={isHighlighted ? "true" : undefined}
         {...props}
         {...mode}
       >
-        {headerLabel && (
-          <div className="flex items-center justify-between border-b border-border px-3 py-1 bg-[var(--code-header-bg,hsl(var(--background)))]">
-            <span className="text-xs font-mono font-medium uppercase tracking-widest text-muted-foreground">
-              {headerLabel}
-            </span>
+        {hasHeader && (
+          <div className="flex items-center justify-between gap-3 border-b border-border px-3 py-1.5 bg-[var(--code-header-bg,hsl(var(--background)))]">
+            {filename ? (
+              <span className="flex min-w-0 items-center gap-2 font-sans text-sm">
+                <FileCode2 aria-hidden className="size-4 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 truncate font-mono font-medium text-foreground" title={filename}>{filename}</span>
+                {languageName && <span className="shrink-0 text-muted-foreground">{languageName}</span>}
+              </span>
+            ) : (
+              <span className="font-sans text-sm font-medium text-muted-foreground">{headerLabel}</span>
+            )}
             {children}
           </div>
         )}
-        {!headerLabel && children && (
-          <div className="absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
+        {!hasHeader && children && (
+          <div className="absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100">
             {children}
           </div>
         )}
-        {Highlighter ? (
-          <Highlighter
-            language={language ?? "text"}
-            style={syntaxTheme}
-            showLineNumbers={showLineNumbers}
-            lineNumberStyle={{
-              color: "var(--syntax-comment, currentColor)",
-              minWidth: "2.5em",
-              paddingRight: "1em",
-            }}
-            customStyle={customStyle}
-            codeTagProps={codeTagProps}
-            wrapLines={false}
-            {...scrollRegion}
-          >
-            {code}
-          </Highlighter>
-        ) : (
-          <pre {...scrollRegion} style={{ ...syntaxTheme.hljs, ...customStyle }}>
-            <code style={{ ...codeTagProps.style, whiteSpace: "pre" }}>{code}</code>
-          </pre>
-        )}
+        {/* A long line scrolls the block sideways, which a keyboard reaches only
+            if the block takes focus; a label on a bare <pre> is prohibited ARIA,
+            so the block is a named region. Inset: the rounded card clips an outer ring. */}
+        <pre
+          tabIndex={0}
+          role="region"
+          aria-label={regionName ? `${regionName} code` : "Code"}
+          className={focusRingInset}
+          style={preStyle}
+        >
+          <code style={codeStyle}>
+            {/* Plain code without line numbers stays one text node, as the server renders it. */}
+            {!isHighlighted && !showLineNumbers ? code : lines.map((line, index) => (
+              <span key={index}>
+                {showLineNumbers && (
+                  <span
+                    aria-hidden="true"
+                    data-line-number
+                    className="inline-block select-none pr-4 text-right"
+                    style={{ color: SYNTAX.comment, minWidth: "2.5em" }}
+                  >
+                    {index + 1}
+                  </span>
+                )}
+                {line.map((token, tokenIndex) => (
+                  <span key={tokenIndex} style={token.style}>{token.content}</span>
+                ))}
+                {index < lines.length - 1 ? "\n" : null}
+              </span>
+            ))}
+          </code>
+        </pre>
       </div>
     );
   },

package/src/markdown/code-meta.ts

@@ -0,0 +1,68 @@
+interface MdastNode {
+  type: string;
+  lang?: string | null;
+  meta?: string | null;
+  data?: { hProperties?: Record<string, unknown> } & Record<string, unknown>;
+  children?: MdastNode[];
+}
+
+/**
+ * Carries a fence's info string past the language (```ts title="src/x.ts"```)
+ * to the rendered `<code>` as `data-meta`, so the code block can name its file.
+ */
+export function remarkCodeMeta() {
+  return (tree: MdastNode) => {
+    const walk = (node: MdastNode) => {
+      if (node.type === "code" && node.meta) {
+        node.data = { ...node.data, hProperties: { ...node.data?.hProperties, dataMeta: node.meta } };
+      }
+      node.children?.forEach(walk);
+    };
+    walk(tree);
+  };
+}
+
+const LANGUAGE_BY_EXTENSION: Record<string, string> = {
+  ts: "typescript", mts: "typescript", cts: "typescript", tsx: "tsx",
+  js: "javascript", mjs: "javascript", cjs: "javascript", jsx: "jsx",
+  json: "json", jsonc: "jsonc", md: "markdown", mdx: "mdx", py: "python",
+  sh: "bash", bash: "bash", zsh: "bash", yml: "yaml", yaml: "yaml", toml: "toml",
+  css: "css", scss: "scss", html: "html", sql: "sql", go: "go", rs: "rust",
+  sol: "solidity", rb: "ruby", java: "java", kt: "kotlin", swift: "swift",
+  php: "php", c: "c", h: "c", cpp: "cpp", cs: "csharp", graphql: "graphql",
+  gql: "graphql", xml: "xml", svg: "xml", diff: "diff", patch: "diff",
+};
+
+const FILE_PATH = /^(?:\.{0,2}\/)?(?:[\w@.-]+\/)*[\w@.-]*\.[A-Za-z0-9]+$|^(?:[\w@.-]+\/)+[\w@.-]+$/;
+
+/** The language a file's extension implies, if the code block can highlight it. */
+export function languageForFile(filename: string): string | undefined {
+  const base = filename.split("/").pop() ?? filename;
+  if (/^dockerfile$/i.test(base)) return "dockerfile";
+  const extension = base.includes(".") ? base.split(".").pop()?.toLowerCase() : undefined;
+  return extension ? LANGUAGE_BY_EXTENSION[extension] : undefined;
+}
+
+/**
+ * The language and file name of a fenced block, from its class and info
+ * string: ```ts title="src/x.ts"```, ```ts filename=src/x.ts```,
+ * ```ts src/x.ts```, ```ts:src/x.ts``` and ```src/x.ts``` all name the file.
+ */
+export function fenceInfo(className: string | undefined, meta: unknown): { language?: string; filename?: string } {
+  const token = /(?:^|\s)language-(\S+)/.exec(className ?? "")?.[1];
+  let language = token;
+  let filename: string | undefined;
+  if (token?.includes(":")) {
+    [language, filename] = [token.slice(0, token.indexOf(":")), token.slice(token.indexOf(":") + 1)];
+  } else if (token && FILE_PATH.test(token) && (token.includes("/") || languageForFile(token))) {
+    filename = token;
+    language = undefined;
+  }
+  if (!filename && typeof meta === "string") {
+    const named = /(?:^|\s)(?:title|filename|file|name)=(?:"([^"]+)"|'([^']+)'|(\S+))/.exec(meta);
+    const bare = meta.trim().split(/\s+/).find((part) => FILE_PATH.test(part));
+    filename = named?.[1] ?? named?.[2] ?? named?.[3] ?? bare;
+  }
+  if (!language && filename) language = languageForFile(filename);
+  return { ...(language ? { language } : {}), ...(filename ? { filename } : {}) };
+}

package/src/markdown/index.ts

@@ -1,2 +1,10 @@
-export { Markdown, getSanitizedMarkdownHeadingIdFromRawFragment, type MarkdownProps } from "./markdown";
-export { CodeBlock, CopyButton, type CodeBlockProps } from "./code-block";
+export {
+  Markdown,
+  getSanitizedMarkdownHeadingIdFromRawFragment,
+  type MarkdownLinkChip,
+  type MarkdownLinkChipResolver,
+  type MarkdownProps,
+} from "./markdown";
+export { CodeBlock, CopyButton, codeBlockGrammar, type CodeBlockProps } from "./code-block";
+export { fenceInfo } from "./code-meta";
+export { numericColumns, tableCsv } from "./markdown-table";

package/src/markdown/markdown-table.test.tsx

@@ -0,0 +1,61 @@
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Markdown } from "./markdown";
+import { numericColumns, tableCsv } from "./markdown-table";
+
+const TABLE = [
+  "| Variant | Impressions | CTR % | Spend $ | Note |",
+  "| --- | --- | --- | --- | --- |",
+  "| Hero A | 12,400 | 2.50% | $182.40 | Wins on \"reach\", barely |",
+  "| Hero B | 9,870 | 4.17% | $160.05 | =SUM(A1) |",
+].join("\n");
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("Markdown tables", () => {
+  it("renders a header row and right-aligns figures in tabular numerals", () => {
+    render(<Markdown>{TABLE}</Markdown>);
+    const table = screen.getByRole("table");
+    const headers = within(table).getAllByRole("columnheader");
+    expect(headers.map((header) => header.textContent)).toEqual(["Variant", "Impressions", "CTR %", "Spend $", "Note"]);
+    expect(headers[0].className).toContain("text-left");
+    expect(headers[1].className).toContain("text-right");
+    const cells = within(table).getAllByRole("cell");
+    expect(cells[1].className).toContain("text-right");
+    expect(cells[1].className).toContain("tabular-nums");
+    expect(cells[0].className).not.toContain("text-right");
+    expect(cells[4].className).not.toContain("tabular-nums");
+  });
+
+  it("scrolls inside a named, focusable region and never uses a tiny font", () => {
+    render(<Markdown>{TABLE}</Markdown>);
+    const region = screen.getByRole("region", { name: "Table" });
+    expect(region.className).toContain("overflow-x-auto");
+    expect(region.getAttribute("tabindex")).toBe("0");
+    expect(region.closest(".not-prose")).not.toBeNull();
+    expect(screen.getByRole("table").className).toContain("text-sm");
+    expect(document.body.innerHTML).not.toContain("text-xs");
+  });
+
+  it("copies the table as CSV with quoting and formula-safe cells", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true });
+    render(<Markdown>{TABLE}</Markdown>);
+    fireEvent.click(screen.getByRole("button", { name: "Copy CSV" }));
+    await waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
+    expect(writeText.mock.calls[0][0]).toBe([
+      "Variant,Impressions,CTR %,Spend $,Note",
+      "Hero A,\"12,400\",2.50%,$182.40,\"Wins on \"\"reach\"\", barely\"",
+      "Hero B,\"9,870\",4.17%,$160.05,'=SUM(A1)",
+    ].join("\n"));
+    expect(await screen.findByText("Table copied as CSV")).toBeInTheDocument();
+  });
+
+  it("treats a column as numeric only when every filled cell is a figure", () => {
+    expect(numericColumns([["a", "1", "", "$2.50"], ["b", "x", "3", "-4%"]])).toEqual([false, false, true, true]);
+    expect(tableCsv([["a,b", " c"]])).toBe('"a,b"," c"');
+  });
+});