@ai-matrx/rich-content 0.2.32 → 0.2.33

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.33
+
+- The interactive diagram's two PNG exports (`handleExportImage` and the viewport-fallback export) take a picture through Alchemy's `renderElement` (html-to-image: native SVG edges, transforms, modern colours) instead of the html2canvas `captureElement` (AP-2 capture rule: pictures of surfaces use `renderElement`, documents use html2canvas). `table-source` reads the author's edge pipes and a delimiter cell through `@ai-matrx/content-ir/source`.
+
+**Consumer action:** none.
+
 ## 0.2.32
 ### CopySplitButton: moreOnly
 

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

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { captureElement } from "@ai-matrx/alchemy/operate/capture";
+import { renderElement } from "@ai-matrx/alchemy/operate/capture";
 import { downloadFile, downloadUrl } from "@ai-matrx/kit/download";
 import { Button, Chip } from "@ai-matrx/design-system/controls";
 import {
@@ -1046,15 +1046,12 @@ const DiagramFlow = ({
     }
     exportContainer.appendChild(cloned);
     document.body.appendChild(exportContainer);
-    captureElement(exportContainer, {
+    renderElement(exportContainer, {
       backgroundColor: bgColor,
-      scale: 2,
-      useCORS: true,
-      allowTaint: true,
+      pixelRatio: 2,
       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")
+      filter: (node) => !(node.classList?.contains("react-flow__controls") || node.classList?.contains("react-flow__minimap") || node.classList?.contains("react-flow__panel"))
     }).then((canvas) => {
       downloadUrl(
         canvas.toDataURL("image/png"),
@@ -2113,11 +2110,9 @@ const InteractiveDiagramBlock = ({
     );
     if (!viewport) return;
     const isDark = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
-    captureElement(viewport, {
+    renderElement(viewport, {
       backgroundColor: isDark ? "#111827" : "#ffffff",
-      scale: 2,
-      useCORS: true,
-      safeColors: { dark: isDark }
+      pixelRatio: 2
     }).then((canvas) => {
       downloadUrl(
         canvas.toDataURL("image/png"),

package/dist/utils/table-source.js

@@ -1,5 +1,5 @@
 import { lexGfmBlocks } from "./gfm-lexer.js";
-import { rowCells, splitRowSegments, unescapeCellPipes } from "@ai-matrx/content-ir/source";
+import { isGfmDelimiterRow, rowCells, splitRowSegments, unescapeCellPipes } from "@ai-matrx/content-ir/source";
 import { rowCells as rowCells2, splitRowSegments as splitRowSegments2 } from "@ai-matrx/content-ir/source";
 function backslashRunBefore(text, index) {
   let run = 0;
@@ -112,7 +112,7 @@ function respliceRow(segs, stored, texts) {
 }
 function freshRow(texts, lead = true, trail = true) {
   const cells = texts.map((text) => freshCell(text).trim());
-  const needLead = lead || !cells.every((cell) => /^:?-+:?$/.test(cell));
+  const needLead = lead || !cells.every((cell) => isGfmDelimiterRow(`|${cell}|`));
   const needTrail = trail || cells[cells.length - 1] === "" || endsInEscape(cells[cells.length - 1] ?? "");
   const line = `${needLead ? "| " : ""}${cells.join(" | ")}${needTrail ? " |" : ""}`;
   return assertRowReadsBack(line, cells);
@@ -140,8 +140,9 @@ function rewriteTableSource(original, grid) {
     return [freshRow(grid.headers), freshRow(grid.headers.map(() => "---")), ...grid.rows.map((row) => freshRow(row))].join("\n");
   }
   const headerLine = lines[headerAt] ?? "";
-  const lead = headerLine.trimStart().startsWith("|");
-  const trail = headerLine.trimEnd().endsWith("|");
+  const headerSegments = splitRowSegments(headerLine);
+  const lead = headerSegments.length > 1 && (headerSegments[0] ?? "").trim() === "";
+  const trail = headerSegments.length > 1 && (headerSegments[headerSegments.length - 1] ?? "").trim() === "";
   const width = rowCells(headerLine).length;
   const columnsChanged = grid.headers.length !== width;
   const out = [...lines];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-matrx/rich-content",
-  "version": "0.2.32",
+  "version": "0.2.33",
   "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",
@@ -130,18 +130,18 @@
     "unist-util-visit": "^5.1.0",
     "unist-util-visit-parents": "^6.0.2",
     "yaml": "^2.9.1",
-    "@ai-matrx/agents": "latest",
     "@ai-matrx/alchemy": "latest",
     "@ai-matrx/canvas": "latest",
     "@ai-matrx/content-ir": "latest",
     "@ai-matrx/content-ir-react": "latest",
     "@ai-matrx/data": "latest",
-    "@ai-matrx/design-system": "latest",
+    "@ai-matrx/agents": "latest",
     "@ai-matrx/diff": "latest",
     "@ai-matrx/icons": "latest",
+    "@ai-matrx/design-system": "latest",
     "@ai-matrx/print": "latest",
-    "@ai-matrx/records": "latest",
     "@ai-matrx/media": "latest",
+    "@ai-matrx/records": "latest",
     "@ai-matrx/records-ui": "latest",
     "@ai-matrx/tap-target": "latest",
     "@ai-matrx/kit": "latest"