@ai-matrx/rich-content 0.2.8 → 0.2.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.2.10
+
+- Markdown copy goes through the host's `app.CopyButtons` (the copy menu; matrx-frontend ALC-19).
+- Table CSV/TSV and workbook export through Alchemy (`toDelimitedText`, `buildFile`); `display/tables/table-csv`.
+
+### Consumer action
+
+- Register `app.CopyButtons` (matrx-frontend: `components/agent-copy/CopyButtons`).
+
+## 0.2.9
+
+AP-2 (2026-10-07) — the kit and Alchemy doors are the only doors in this package (aidream guard `apps/shared/scripts/check-shared-doors.mjs`). New dependency `@ai-matrx/alchemy`; `html2canvas` dependency removed. Every table/code/SVG/JSON/mermaid/diagram download saves through `@ai-matrx/kit/download` (`downloadFile` / `downloadUrl`) — the tables' "Download Again" toast action now really downloads again (it clicked a revoked URL before). Link/URL/mermaid copies go through `@ai-matrx/kit/clipboard` `copyText` (copied state from its boolean; `copyMermaidSource`/`copyMermaidSvg` throw when refused, as before); ImageBlock's image copy uses `useClipboard().copyImage`. The diagram PNG export captures through `@ai-matrx/alchemy/operate/capture` `captureElement` with `safeColors` (the local getComputedStyle patch is gone). No consumer action.
+
 ## 0.2.8
 ### Unreleased
 

package/dist/code-block/CodeBlock.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { downloadFile } from "@ai-matrx/kit/download";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { useRef, useState, useEffect } from "react";
 import { KindDataGate } from "../host/app-bindings.js";
@@ -184,15 +185,9 @@ const CodeBlockBody = ({
   };
   const handleDownload = (e) => {
     e.stopPropagation();
-    const blob = new Blob([code], { type: "text/plain" });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
     const titleFile = fence.title && /^[\w./-]+\.\w+$/.test(fence.title) ? fence.title.split("/").pop() : void 0;
     const ext = codeLanguageToExtension(rawLanguage || "txt");
-    a.download = titleFile ?? `code${ext}`;
-    a.click();
-    window.URL.revokeObjectURL(url);
+    downloadFile(titleFile ?? `code${ext}`, code, "text/plain");
   };
   const toggleLineNumbers = (e) => {
     e.stopPropagation();

package/dist/display/blocks/common/BlockHeaderWrapper.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { downloadFile } from "@ai-matrx/kit/download";
 import { useState, useRef, useEffect } from "react";
 import {
   Maximize2,
@@ -93,15 +94,7 @@ const BlockHeaderWrapper = ({
   };
   const handleExport = () => {
     if (exportData === void 0) return;
-    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-      type: "application/json"
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${exportFilename}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
+    downloadFile(`${exportFilename}.json`, JSON.stringify(exportData, null, 2), "application/json");
   };
   const handleImportClick = () => fileInputRef.current?.click();
   const handleFileChange = (e) => {

package/dist/display/blocks/diagram/InteractiveDiagramBlock.js

@@ -1,5 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { captureElement } from "@ai-matrx/alchemy/operate/capture";
+import { downloadFile, downloadUrl } from "@ai-matrx/kit/download";
 import { Button, Chip } from "@ai-matrx/design-system/controls";
 import {
   useState,
@@ -121,7 +123,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "@ai-matrx/design-system";
-const UNSAFE_COLOR_RE = /\b(oklch|oklab|lab|lch|color)\s*\(/i;
 function backgroundVariantFromDiagram(diagram) {
   if (diagram.renderHints?.background === "lines")
     return BackgroundVariant.Lines;
@@ -129,42 +130,6 @@ function backgroundVariantFromDiagram(diagram) {
     return BackgroundVariant.Cross;
   return BackgroundVariant.Dots;
 }
-function safenColor(value, prop, isDark) {
-  if (!UNSAFE_COLOR_RE.test(value)) return value;
-  const lp = prop.toLowerCase();
-  if (lp.includes("background")) return isDark ? "#1f2937" : "#ffffff";
-  if (lp === "color") return isDark ? "#f3f4f6" : "#111827";
-  if (lp.includes("border") || lp.includes("outline"))
-    return isDark ? "#4b5563" : "#d1d5db";
-  if (lp === "fill" || lp === "stroke") return isDark ? "#9ca3af" : "#374151";
-  return isDark ? "#6b7280" : "#6b7280";
-}
-function patchComputedStyleForCapture(isDark) {
-  const original = window.getComputedStyle.bind(window);
-  window.getComputedStyle = function(elt, pseudo) {
-    const computed = original(elt, pseudo);
-    return new Proxy(computed, {
-      get(target, prop) {
-        const value = target[prop];
-        if (typeof prop === "string" && typeof value === "string" && value && UNSAFE_COLOR_RE.test(value)) {
-          return safenColor(value, prop, isDark);
-        }
-        if (prop === "getPropertyValue") {
-          return (p) => {
-            const raw = target.getPropertyValue(p);
-            return raw && UNSAFE_COLOR_RE.test(raw) ? safenColor(raw, p, isDark) : raw;
-          };
-        }
-        if (typeof value === "function")
-          return value.bind(target);
-        return value;
-      }
-    });
-  };
-  return () => {
-    window.getComputedStyle = original;
-  };
-}
 const PedigreeNode = ({
   data,
   selected
@@ -1081,22 +1046,20 @@ const DiagramFlow = ({
     }
     exportContainer.appendChild(cloned);
     document.body.appendChild(exportContainer);
-    import("html2canvas").then((mod) => {
-      const restore = patchComputedStyleForCapture(isDark);
-      return mod.default(exportContainer, {
-        backgroundColor: bgColor,
-        scale: 2,
-        useCORS: true,
-        allowTaint: true,
-        width: imageWidth,
-        height: imageHeight,
-        ignoreElements: (el) => el.classList.contains("react-flow__controls") || el.classList.contains("react-flow__minimap") || el.classList.contains("react-flow__panel")
-      }).finally(restore);
+    captureElement(exportContainer, {
+      backgroundColor: bgColor,
+      scale: 2,
+      useCORS: true,
+      allowTaint: true,
+      width: imageWidth,
+      height: imageHeight,
+      safeColors: { dark: isDark },
+      ignoreElements: (el) => el.classList.contains("react-flow__controls") || el.classList.contains("react-flow__minimap") || el.classList.contains("react-flow__panel")
     }).then((canvas) => {
-      const a = document.createElement("a");
-      a.download = `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_diagram${isDark ? "_dark" : "_light"}.png`;
-      a.href = canvas.toDataURL("image/png");
-      a.click();
+      downloadUrl(
+        canvas.toDataURL("image/png"),
+        `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_diagram${isDark ? "_dark" : "_light"}.png`
+      );
     }).catch((err) => console.warn("Diagram export failed:", err)).finally(() => document.body.removeChild(exportContainer));
   }, [getNodes, diagram.title, onExportImage]);
   const measuredWidth = useStore((s) => s.width);
@@ -2133,15 +2096,11 @@ const InteractiveDiagramBlock = ({
     triggerPrint
   } = usePrintOptions(diagramPrinter, diagram);
   const exportDiagramJSON = useCallback(() => {
-    const blob = new Blob([JSON.stringify({ diagram }, null, 2)], {
-      type: "application/json"
-    });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.json`;
-    a.click();
-    URL.revokeObjectURL(url);
+    downloadFile(
+      `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.json`,
+      JSON.stringify({ diagram }, null, 2),
+      "application/json"
+    );
   }, [diagram]);
   const toggleEditing = () => {
     const next = !editing;
@@ -2154,18 +2113,16 @@ const InteractiveDiagramBlock = ({
     );
     if (!viewport) return;
     const isDark = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
-    import("html2canvas").then((mod) => {
-      const restore = patchComputedStyleForCapture(isDark);
-      return mod.default(viewport, {
-        backgroundColor: isDark ? "#111827" : "#ffffff",
-        scale: 2,
-        useCORS: true
-      }).finally(restore);
+    captureElement(viewport, {
+      backgroundColor: isDark ? "#111827" : "#ffffff",
+      scale: 2,
+      useCORS: true,
+      safeColors: { dark: isDark }
     }).then((canvas) => {
-      const a = document.createElement("a");
-      a.download = `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_diagram.png`;
-      a.href = canvas.toDataURL("image/png");
-      a.click();
+      downloadUrl(
+        canvas.toDataURL("image/png"),
+        `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_diagram.png`
+      );
     }).catch((err) => console.warn("Image export failed:", err));
   }, [diagram.title]);
   const renderLegend = () => {

package/dist/display/blocks/images/ImageBlock.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { copyText, useClipboard } from "@ai-matrx/kit/clipboard";
+import { downloadFile } from "@ai-matrx/kit/download";
 import { useState, useRef, useEffect } from "react";
 import {
   DownloadIcon,
@@ -46,6 +48,7 @@ const ImageBlockImpl = ({ src: srcProp, alt = "Image" }) => {
   const editableFileId = ourFile?.fileId ?? null;
   const [feedback, setFeedback] = useState("none");
   const [showCopySuccess, setShowCopySuccess] = useState(false);
+  const { copyImage } = useClipboard();
   const [showShareModal, setShowShareModal] = useState(false);
   const [showExpandedView, setShowExpandedView] = useState(false);
   const [zoomLevel, setZoomLevel] = useState(1);
@@ -55,45 +58,24 @@ const ImageBlockImpl = ({ src: srcProp, alt = "Image" }) => {
     try {
       const response = await fetch(src);
       const blob = await response.blob();
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = src.split("/").pop() || "image";
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(url);
+      downloadFile(src.split("/").pop() || "image", blob, blob.type);
     } catch (err) {
       console.error("Failed to download image:", err);
     }
   };
   const handleCopyUrl = (e) => {
     e?.preventDefault();
-    navigator.clipboard.writeText(src).then(() => {
+    void copyText(src).then((landed) => {
+      if (!landed) return;
       setShowCopySuccess(true);
       setTimeout(() => setShowCopySuccess(false), 2e3);
-    }).catch((err) => {
-      console.error("Failed to copy URL:", err);
     });
   };
   const handleCopyImage = async (e) => {
     e?.preventDefault();
-    try {
-      const response = await fetch(src);
-      const blob = await response.blob();
-      if (navigator.clipboard && navigator.clipboard.write) {
-        await navigator.clipboard.write([
-          new ClipboardItem({
-            [blob.type]: blob
-          })
-        ]);
-        setShowCopySuccess(true);
-        setTimeout(() => setShowCopySuccess(false), 2e3);
-      } else {
-        console.error("Clipboard API not supported");
-      }
-    } catch (err) {
-      console.error("Failed to copy image to clipboard:", err);
+    if (await copyImage(src)) {
+      setShowCopySuccess(true);
+      setTimeout(() => setShowCopySuccess(false), 2e3);
     }
   };
   const handleShare = async (e) => {

package/dist/display/blocks/json/json-tabular-utils.d.ts

@@ -49,16 +49,18 @@ export declare function detectTabular(value: unknown): TabularShape;
  * `null` and `undefined` become empty strings (Excel-friendly).
  */
 export declare function cellToCsv(value: unknown): string;
+/**
+ * Rows -> CSV/TSV text through Alchemy's one writer (quoting, line breaks, `'` before a leading
+ * = + - @ text; real numbers stay numbers, so -5 is never altered).
+ */
 export declare function rowsToCsv(rows: Record<string, unknown>[], columns: string[], delimiter?: string): string;
 export declare function rowsToNdjson(rows: unknown[]): string;
 /** Browser file-download for a text payload. */
 export declare function downloadText(filename: string, content: string, mime?: string): void;
 /**
- * XLSX export uses the same `xlsx` package as `ImportTableModal`.
- * Dynamically imported to keep it out of the initial chat bundle.
- *
- * Cell values are pre-stringified for objects/arrays so spreadsheets
- * receive plain text instead of "[object Object]".
+ * XLSX export through Alchemy's workbook format (the one spreadsheet engine).
+ * Header row = `columns`; object/array cells are pre-stringified so
+ * spreadsheets receive plain text instead of "[object Object]".
  */
 export declare function rowsToXlsx(rows: Record<string, unknown>[], columns: string[], filename: string): Promise<void>;
 /** Default filename helper (no extension). */

package/dist/display/blocks/json/json-tabular-utils.js

@@ -1,4 +1,6 @@
-import { announceBareHost, hostCapability } from "../../../host/registry.js";
+import { buildFile } from "@ai-matrx/alchemy/operate";
+import { toDelimitedText } from "@ai-matrx/alchemy/operate/read";
+import { downloadFile } from "@ai-matrx/kit/download";
 function parseJsonSafe(text) {
   if (!text || !text.trim()) {
     return { ok: false, error: "Empty input" };
@@ -72,38 +74,38 @@ function cellToCsv(value) {
   }
   return String(value);
 }
-function escapeCsv(value, delimiter) {
-  const needsQuote = value.includes(delimiter) || value.includes('"') || value.includes("\n") || value.includes("\r");
-  if (!needsQuote) return value;
-  return `"${value.replace(/"/g, '""')}"`;
-}
 function rowsToCsv(rows, columns, delimiter = ",") {
-  const header = columns.map((c) => escapeCsv(c, delimiter)).join(delimiter);
-  const body = rows.map(
-    (row) => columns.map((c) => escapeCsv(cellToCsv(row[c]), delimiter)).join(delimiter)
-  ).join("\n");
-  return body ? `${header}
-${body}` : header;
+  return toDelimitedText(
+    columns,
+    rows.map((row) => columns.map((c) => cellToCsvValue(row[c]))),
+    { format: delimiter === "	" ? "tsv" : "csv", spreadsheetSafe: true }
+  );
+}
+function cellToCsvValue(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return value;
+  return cellToCsv(value);
 }
 function rowsToNdjson(rows) {
   return rows.map((r) => JSON.stringify(r)).join("\n");
 }
 function downloadText(filename, content, mime = "text/plain") {
   const blob = new Blob([content], { type: `${mime};charset=utf-8` });
-  const url = window.URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = filename;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  window.URL.revokeObjectURL(url);
+  downloadFile(filename, blob, blob.type);
 }
 async function rowsToXlsx(rows, columns, filename) {
-  const impl = hostCapability("app")?.rowsToXlsx;
-  if (impl) return impl(rows, columns, filename);
-  announceBareHost("app.rowsToXlsx", "spreadsheets download as CSV");
-  downloadText(rowsToCsv(rows, columns), filename.replace(/\.xlsx$/i, "") + ".csv", "text/csv");
+  const cell = (v) => v === null || v === void 0 ? null : typeof v === "object" ? JSON.stringify(v) : typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : String(v);
+  const built = await buildFile(
+    {
+      kind: "registered",
+      format: "workbook",
+      value: { sheets: [{ name: "Data", rows: [columns, ...rows.map((row) => columns.map((c) => cell(row[c])))] }] }
+    },
+    "xlsx-workbook",
+    { filename }
+  );
+  const blob = built.blob();
+  downloadFile(built.filename, blob, blob.type);
 }
 function defaultJsonFilename() {
   const stamp = (/* @__PURE__ */ new Date()).toISOString().replace(/[:.]/g, "-").slice(0, 19);

package/dist/display/blocks/links/LinkComponent.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { copyText } from "@ai-matrx/kit/clipboard";
 import React, { useState, useRef, useEffect, useCallback, useId, memo } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@ai-matrx/design-system";
@@ -164,15 +165,10 @@ const ValidLinkComponentCore = ({
     clearOpenTimer();
   }, [clearOpenTimer]);
   const handleCopyLink = useCallback(() => {
-    if (!navigator.clipboard) {
-      console.error("Clipboard API not available");
-      return;
-    }
-    navigator.clipboard.writeText(finalHref).then(() => {
+    void copyText(finalHref).then((landed) => {
+      if (!landed) return;
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
-    }).catch((err) => {
-      console.error("Failed to copy link:", err);
     });
   }, [finalHref]);
   const handleOpenInNewTab = useCallback(

package/dist/display/blocks/svg/SvgBlock.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { downloadFile } from "@ai-matrx/kit/download";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
@@ -49,13 +50,7 @@ const SvgBlock = ({ content = "", isStreamActive = false, className }) => {
   };
   const handleDownload = () => {
     try {
-      const blob = new Blob([svg], { type: "image/svg+xml" });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${(title ?? "illustration").replace(/[^\w-]+/g, "-").toLowerCase()}.svg`;
-      a.click();
-      URL.revokeObjectURL(url);
+      downloadFile(`${(title ?? "illustration").replace(/[^\w-]+/g, "-").toLowerCase()}.svg`, svg, "image/svg+xml");
     } catch {
       toast.error("Couldn't download the SVG");
     }

package/dist/display/blocks/table/StreamingTableRenderer.js

@@ -76,6 +76,8 @@ import {
   parseMarkdownTable,
   cleanTableHeaderKey
 } from "./parseMarkdownTable.js";
+import { downloadFile } from "@ai-matrx/kit/download";
+import { tableToCsv } from "../../tables/table-csv.js";
 const NO_HIDDEN_COLUMNS = /* @__PURE__ */ new Set();
 const ExportDropdownMenu = ({
   tableData,
@@ -291,26 +293,13 @@ const StreamingTableRendererCore = ({
   };
   const downloadCSV = () => {
     try {
-      const csvContent = [
-        headers.map((h) => h.replace(/"/g, '""')).join(","),
-        ...rows.map(
-          (row) => row.map((cell) => {
-            const escaped = cell.replace(/"/g, '""');
-            return cell.includes(",") ? `"${escaped}"` : escaped;
-          }).join(",")
-        )
-      ].join("\n");
+      const csvContent = tableToCsv(headers, rows);
       const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = "table_data.csv";
-      link.click();
-      URL.revokeObjectURL(url);
+      downloadFile("table_data.csv", blob, blob.type);
       toast.success("Table exported to CSV", {
         action: {
           label: "Download Again",
-          onClick: () => link.click(),
+          onClick: () => downloadFile("table_data.csv", blob, blob.type),
           className: "font-medium"
         }
       });
@@ -327,25 +316,11 @@ const StreamingTableRendererCore = ({
       const blob = new Blob([markdownContent], {
         type: "text/markdown;charset=utf-8"
       });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+      downloadFile(fileName, blob, blob.type);
       toast.success("Markdown file downloaded", {
         action: {
           label: "Download Again",
-          onClick: () => {
-            const newLink = document.createElement("a");
-            newLink.href = url;
-            newLink.download = fileName;
-            document.body.appendChild(newLink);
-            newLink.click();
-            document.body.removeChild(newLink);
-          },
+          onClick: () => downloadFile(fileName, blob, blob.type),
           className: "font-medium"
         }
       });

package/dist/display/chat-markdown/BasicMarkdownContent.js

@@ -7,7 +7,7 @@ import {
   reportDelimiterViolations
 } from "@ai-matrx/kit/delimiter-guard";
 import { captureError } from "../../host/diagnostics.js";
-import { InlineCopyButton } from "../../host/app-bindings.js";
+import { CopyButtons } from "../../host/app-bindings.js";
 import {
   TableRenderPathDiagnostic
 } from "../blocks/table/TableRenderPathDiagnostic.js";
@@ -102,12 +102,14 @@ const BasicMarkdownContentBody = ({
         /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: PROSE_FRAME_CSS } }),
         /* @__PURE__ */ jsx(MarkdownCore, { preset: "chat", components, children: processedContent }),
         !isStreamActive && isHovering && /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 p-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: showCopyButton && /* @__PURE__ */ jsx(
-          InlineCopyButton,
+          CopyButtons,
           {
-            markdownContent: content,
-            position: "top-right",
-            className: "mt-1 mr-1",
-            isMarkdown: true
+            label: "Content",
+            human: content,
+            contentFlavor: "markdown",
+            stripThinking: true,
+            size: "sm",
+            className: "absolute top-1 right-1 z-10 mt-1 mr-1"
           }
         ) })
       ]

package/dist/display/chat-markdown/ConfigurableMarkdownContent.js

@@ -12,7 +12,7 @@ import {
 } from "@ai-matrx/kit/delimiter-guard";
 import { captureError } from "../../host/diagnostics.js";
 import { LinkComponent } from "../blocks/links/LinkComponent.js";
-import { InlineCopyButton } from "../../host/app-bindings.js";
+import { CopyButtons } from "../../host/app-bindings.js";
 import {
   useMediaBlob,
   useMediaLoadRecovery
@@ -614,12 +614,14 @@ const ConfigurableMarkdownContentBody = ({
         /* @__PURE__ */ jsx(MarkdownCore, { preset: "rich", components, children: processedContent }),
         !isStreamActive && isHovering && /* @__PURE__ */ jsxs("div", { className: "absolute top-0 right-0 p-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: [
           showCopyButton && /* @__PURE__ */ jsx(
-            InlineCopyButton,
+            CopyButtons,
             {
-              markdownContent: content,
-              position: "top-right",
-              className: "mt-1 mr-1",
-              isMarkdown: true
+              label: "Content",
+              human: content,
+              contentFlavor: "markdown",
+              stripThinking: true,
+              size: "sm",
+              className: "absolute top-1 right-1 z-10 mt-1 mr-1"
             }
           ),
           onEditRequest && /* @__PURE__ */ jsx(

package/dist/display/tables/MarkdownTable.js

@@ -60,6 +60,8 @@ import {
   clearColumn,
   duplicateColumn
 } from "./editing/tableMutations.js";
+import { downloadFile } from "@ai-matrx/kit/download";
+import { tableToCsv } from "./table-csv.js";
 const ExportDropdownMenu = ({
   tableData,
   content,
@@ -290,26 +292,13 @@ const MarkdownTable = ({
   };
   const downloadCSV = () => {
     try {
-      const csvContent = [
-        internalTableData.headers.map((h) => h.replace(/"/g, '""')).join(","),
-        ...internalTableData.rows.map(
-          (row) => row.map((cell) => {
-            const escaped = cell.replace(/"/g, '""');
-            return cell.includes(",") ? `"${escaped}"` : escaped;
-          }).join(",")
-        )
-      ].join("\n");
+      const csvContent = tableToCsv(internalTableData.headers, internalTableData.rows);
       const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = "table_data.csv";
-      link.click();
-      URL.revokeObjectURL(url);
+      downloadFile("table_data.csv", blob, blob.type);
       toast.success("Table exported to CSV", {
         action: {
           label: "Download Again",
-          onClick: () => link.click(),
+          onClick: () => downloadFile("table_data.csv", blob, blob.type),
           className: "font-medium"
         }
       });
@@ -324,25 +313,11 @@ const MarkdownTable = ({
       const blob = new Blob([markdownContent], {
         type: "text/markdown;charset=utf-8"
       });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+      downloadFile(fileName, blob, blob.type);
       toast.success("Markdown file downloaded", {
         action: {
           label: "Download Again",
-          onClick: () => {
-            const newLink = document.createElement("a");
-            newLink.href = url;
-            newLink.download = fileName;
-            document.body.appendChild(newLink);
-            newLink.click();
-            document.body.removeChild(newLink);
-          },
+          onClick: () => downloadFile(fileName, blob, blob.type),
           className: "font-medium"
         }
       });

package/dist/display/tables/TableWithSeparatedControls.js

@@ -30,6 +30,8 @@ import {
 import { useToastManager } from "../../utils/lifted/useToastManager.js";
 import { THEMES } from "../themes.js";
 import { useOpenSaveToTable } from "../../host/tables.js";
+import { downloadFile } from "@ai-matrx/kit/download";
+import { tableToCsv } from "./table-csv.js";
 function useDebounce(value, delay) {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -107,26 +109,13 @@ const TableControls = ({
   }, [content, copyTableToClipboard, toast]);
   const downloadCSV = useCallback(() => {
     try {
-      const csvContent = [
-        tableData.headers.map((h) => h.replace(/"/g, '""')).join(","),
-        ...tableData.rows.map(
-          (row) => row.map((cell) => {
-            const escaped = cell.replace(/"/g, '""');
-            return cell.includes(",") ? `"${escaped}"` : escaped;
-          }).join(",")
-        )
-      ].join("\n");
+      const csvContent = tableToCsv(tableData.headers, tableData.rows);
       const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = "table_data.csv";
-      link.click();
-      URL.revokeObjectURL(url);
+      downloadFile("table_data.csv", blob, blob.type);
       toast.success("Table exported to CSV", {
         action: {
           label: "Download Again",
-          onClick: () => link.click(),
+          onClick: () => downloadFile("table_data.csv", blob, blob.type),
           className: "font-medium"
         }
       });
@@ -141,25 +130,11 @@ const TableControls = ({
       const blob = new Blob([markdownContent], {
         type: "text/markdown;charset=utf-8"
       });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+      downloadFile(fileName, blob, blob.type);
       toast.success("Markdown file downloaded", {
         action: {
           label: "Download Again",
-          onClick: () => {
-            const newLink = document.createElement("a");
-            newLink.href = url;
-            newLink.download = fileName;
-            document.body.appendChild(newLink);
-            newLink.click();
-            document.body.removeChild(newLink);
-          },
+          onClick: () => downloadFile(fileName, blob, blob.type),
           className: "font-medium"
         }
       });

package/dist/display/tables/table-csv.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The CSV text of a markdown/streaming table, written by Alchemy's one writer. Quotes, commas and
+ * line breaks are quoted; text that opens with = + - @ is prefixed `'` so a spreadsheet never runs
+ * it (alchemy `spreadsheetSafe`, on). A cell that is a plain number is written as a number, so a
+ * negative amount stays `-5`.
+ */
+export declare function tableToCsv(headers: readonly string[], rows: readonly (readonly string[])[]): string;

package/dist/display/tables/table-csv.js

@@ -0,0 +1,19 @@
+import { toDelimitedText } from "@ai-matrx/alchemy/operate/read";
+const PLAIN_NUMBER = /^-?\d+(\.\d+)?$/;
+function cellValue(cell) {
+  if (PLAIN_NUMBER.test(cell)) {
+    const n = Number(cell);
+    if (String(n) === cell) return n;
+  }
+  return cell;
+}
+function tableToCsv(headers, rows) {
+  return toDelimitedText(
+    headers,
+    rows.map((row) => row.map(cellValue)),
+    { spreadsheetSafe: true }
+  );
+}
+export {
+  tableToCsv
+};

package/dist/host/app-bindings.d.ts

@@ -47,6 +47,7 @@ export interface RichContentAppBindings {
     MarkdownStream: HostComponent;
     CitationMarkerInline: HostComponent;
     InlineCopyButton: HostComponent;
+    CopyButtons: HostComponent;
     AdvancedMenu: HostComponent;
     useAdvancedMenu: HostFn;
     EntityRef: HostComponent;
@@ -129,6 +130,7 @@ export declare const kindHasRecordChrome: HostFn;
 export declare const KindFixItBar: HostComponent;
 export declare const MarkdownStream: HostComponent;
 export declare const CitationMarkerInline: HostComponent;
+export declare const CopyButtons: HostComponent;
 export declare const InlineCopyButton: HostComponent;
 export declare const AdvancedMenu: HostComponent;
 export declare const useAdvancedMenu: HostFn;

package/dist/host/app-bindings.js

@@ -70,6 +70,7 @@ const kindHasRecordChrome = fn("kindHasRecordChrome", () => false, "kind records
 const KindFixItBar = component("KindFixItBar", null, "no fix-it bar on broken kinds");
 const MarkdownStream = component("MarkdownStream", null, "the full renderer is not registered");
 const CitationMarkerInline = component("CitationMarkerInline", TextOnly, "citation markers show as text");
+const CopyButtons = component("CopyButtons", null, "no copy menu on rendered content");
 const InlineCopyButton = component("InlineCopyButton", null, "no inline copy button");
 const AdvancedMenu = component("AdvancedMenu", null, "no block menus");
 const useAdvancedMenu = fn("useAdvancedMenu", () => ({ isOpen: false, open: noop, close: noop, toggle: noop, menuProps: {} }), "no block menus");
@@ -105,6 +106,7 @@ export {
   ArtifactRender,
   CitationMarkerInline,
   CodeBlockWithContextAttach,
+  CopyButtons,
   EntityRef,
   IconInputWithValidation,
   InlineCopyButton,

package/dist/mermaid/export.d.ts

@@ -1,4 +1,5 @@
 import type { NormalizedFile } from "@ai-matrx/media/files/engine/handler/types";
+/** Throws when the browser refused the copy — callers say so. */
 export declare function copyMermaidSource(source: string): Promise<void>;
 /** Copies the SVG markup as text — the universally pasteable form. */
 export declare function copyMermaidSvg(svg: string): Promise<void>;

package/dist/mermaid/export.js

@@ -1,25 +1,22 @@
 "use client";
+import { copyText } from "@ai-matrx/kit/clipboard";
+import { downloadFile } from "@ai-matrx/kit/download";
 import { fileHandler } from "@ai-matrx/media/files/engine/handler/handler";
 function svgBlob(svg) {
   return new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
 }
 function triggerDownload(blob, fileName) {
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = fileName;
-  a.click();
-  URL.revokeObjectURL(url);
+  downloadFile(fileName, blob, blob.type);
 }
 function safeFileName(title, extension) {
   const base = (title || "diagram").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
   return `${base || "diagram"}.${extension}`;
 }
 async function copyMermaidSource(source) {
-  await navigator.clipboard.writeText(source);
+  if (!await copyText(source)) throw new Error("The browser refused the clipboard.");
 }
 async function copyMermaidSvg(svg) {
-  await navigator.clipboard.writeText(svg);
+  if (!await copyText(svg)) throw new Error("The browser refused the clipboard.");
 }
 function downloadMermaidSvg(svg, title) {
   triggerDownload(svgBlob(svg), safeFileName(title, "svg"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-content",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "The AI Matrx formatted-text engine: the one markdown renderer, streaming markdown, the block splitter and renderer, the generic blocks, <RichContent> levels, the rich-document action registry and menus, copy, and the selection toolbar — as portable React.",
   "type": "module",
   "license": "MIT",
@@ -85,7 +85,6 @@
     "hast-util-sanitize": "^5.0.2",
     "hast-util-to-string": "^3.0.1",
     "hast-util-to-text": "^4.0.2",
-    "html2canvas": "^1.4.1",
     "katex": "^0.18.9",
     "lucide-react": "^1.48.0",
     "marked": "^18.0.14",
@@ -116,19 +115,20 @@
     "unist-util-visit": "^5.1.0",
     "unist-util-visit-parents": "^6.0.2",
     "yaml": "^2.9.1",
-    "@ai-matrx/canvas": "latest",
-    "@ai-matrx/data": "latest",
+    "@ai-matrx/alchemy": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/content-ir-react": "latest",
-    "@ai-matrx/design-system": "latest",
+    "@ai-matrx/data": "latest",
     "@ai-matrx/agents": "latest",
-    "@ai-matrx/diff": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/icons": "latest",
+    "@ai-matrx/canvas": "latest",
     "@ai-matrx/kit": "latest",
-    "@ai-matrx/media": "latest",
     "@ai-matrx/print": "latest",
     "@ai-matrx/records": "latest",
-    "@ai-matrx/tap-target": "latest"
+    "@ai-matrx/media": "latest",
+    "@ai-matrx/tap-target": "latest",
+    "@ai-matrx/diff": "latest"
   },
   "peerDependencies": {
     "react": ">=19.0.0",