@ai-gui/core 0.19.0 → 0.20.0

package/dist/index.cjs

@@ -1738,6 +1738,44 @@ function measure(svg, options) {
 	};
 }
 /**
+* A copy of the drawing that a canvas will accept.
+*
+* The problem is `<foreignObject>`. Mermaid lays every node label out as HTML inside one, and a browser
+* taints the canvas the moment an image containing one is drawn — after which `toDataURL` throws
+* `SecurityError` and the export is lost. Nothing about the diagram is unsafe; the rule is categorical.
+*
+* So each `<foreignObject>` becomes plain SVG `<text>` at the same position, carrying the same words.
+* The result is a slightly plainer label — no wrapping, no HTML styling — and a diagram that exports at
+* all, which is the trade the alternative does not offer.
+*/
+function rasterisable(svg) {
+	const copy = svg.cloneNode(true);
+	const foreign = Array.from(copy.querySelectorAll("foreignObject"));
+	for (const object of foreign) {
+		const words = (object.textContent ?? "").trim();
+		const parent = object.parentNode;
+		if (!parent) continue;
+		if (!words) {
+			parent.removeChild(object);
+			continue;
+		}
+		const x = Number.parseFloat(object.getAttribute("x") ?? "0");
+		const y = Number.parseFloat(object.getAttribute("y") ?? "0");
+		const width = Number.parseFloat(object.getAttribute("width") ?? "0");
+		const height = Number.parseFloat(object.getAttribute("height") ?? "0");
+		const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+		text.setAttribute("x", String(x + width / 2));
+		text.setAttribute("y", String(y + height / 2));
+		text.setAttribute("text-anchor", "middle");
+		text.setAttribute("dominant-baseline", "middle");
+		text.setAttribute("font-size", "14");
+		text.setAttribute("fill", "currentColor");
+		text.textContent = words;
+		parent.replaceChild(text, object);
+	}
+	return copy;
+}
+/**
 * Render an SVG element to a raster data URL.
 *
 * The element is serialized as it stands, so whatever a plugin drew — including the theme it drew
@@ -1746,7 +1784,7 @@ function measure(svg, options) {
 async function exportSVGToImage(svg, options = {}) {
 	const { width, height } = measure(svg, options);
 	const scale = options.scale && options.scale > 0 ? options.scale : globalThis.devicePixelRatio || 1;
-	const source = new XMLSerializer().serializeToString(svg);
+	const source = new XMLSerializer().serializeToString(rasterisable(svg));
 	const namespaced = /\sxmlns=/.test(source) ? source : source.replace(/^<svg/, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
 	const url = URL.createObjectURL(new Blob([namespaced], { type: "image/svg+xml;charset=utf-8" }));
 	try {
@@ -1779,9 +1817,15 @@ async function exportSVGToImage(svg, options = {}) {
 * decide what lands in it.
 */
 async function exportRenderedImages(root, options = {}) {
-	const drawings = Array.from(root.querySelectorAll("svg"));
 	const exported = [];
-	for (const drawing of drawings) exported.push(await exportSVGToImage(drawing, options));
+	for (const drawing of Array.from(root.querySelectorAll("svg"))) {
+		if (drawing.closest(".katex")) continue;
+		try {
+			exported.push(await exportSVGToImage(drawing, options));
+		} catch (reason) {
+			options.onSkip?.(drawing, reason);
+		}
+	}
 	return exported;
 }
 /** Save an exported image under the given file name. */

package/dist/index.d.cts

@@ -655,6 +655,14 @@ interface ExportImageOptions {
   height?: number;
   type?: "image/png" | "image/jpeg" | "image/webp";
   quality?: number;
+  /**
+   * Told about each drawing that could not be exported, instead of the whole export failing.
+   *
+   * Some drawings cannot be rasterised at all: a Mermaid diagram lays its labels out in a
+   * `<foreignObject>`, and a browser taints the canvas the moment one is drawn onto it, so `toDataURL`
+   * throws `SecurityError`. One of those used to take every other drawing on the page down with it.
+   */
+  onSkip?: (drawing: SVGElement, reason: unknown) => void;
 }
 interface ExportedImage {
   dataUrl: string;

package/dist/index.d.ts

@@ -655,6 +655,14 @@ interface ExportImageOptions {
   height?: number;
   type?: "image/png" | "image/jpeg" | "image/webp";
   quality?: number;
+  /**
+   * Told about each drawing that could not be exported, instead of the whole export failing.
+   *
+   * Some drawings cannot be rasterised at all: a Mermaid diagram lays its labels out in a
+   * `<foreignObject>`, and a browser taints the canvas the moment one is drawn onto it, so `toDataURL`
+   * throws `SecurityError`. One of those used to take every other drawing on the page down with it.
+   */
+  onSkip?: (drawing: SVGElement, reason: unknown) => void;
 }
 interface ExportedImage {
   dataUrl: string;

package/dist/index.js

@@ -1714,6 +1714,44 @@ function measure(svg, options) {
 	};
 }
 /**
+* A copy of the drawing that a canvas will accept.
+*
+* The problem is `<foreignObject>`. Mermaid lays every node label out as HTML inside one, and a browser
+* taints the canvas the moment an image containing one is drawn — after which `toDataURL` throws
+* `SecurityError` and the export is lost. Nothing about the diagram is unsafe; the rule is categorical.
+*
+* So each `<foreignObject>` becomes plain SVG `<text>` at the same position, carrying the same words.
+* The result is a slightly plainer label — no wrapping, no HTML styling — and a diagram that exports at
+* all, which is the trade the alternative does not offer.
+*/
+function rasterisable(svg) {
+	const copy = svg.cloneNode(true);
+	const foreign = Array.from(copy.querySelectorAll("foreignObject"));
+	for (const object of foreign) {
+		const words = (object.textContent ?? "").trim();
+		const parent = object.parentNode;
+		if (!parent) continue;
+		if (!words) {
+			parent.removeChild(object);
+			continue;
+		}
+		const x = Number.parseFloat(object.getAttribute("x") ?? "0");
+		const y = Number.parseFloat(object.getAttribute("y") ?? "0");
+		const width = Number.parseFloat(object.getAttribute("width") ?? "0");
+		const height = Number.parseFloat(object.getAttribute("height") ?? "0");
+		const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
+		text.setAttribute("x", String(x + width / 2));
+		text.setAttribute("y", String(y + height / 2));
+		text.setAttribute("text-anchor", "middle");
+		text.setAttribute("dominant-baseline", "middle");
+		text.setAttribute("font-size", "14");
+		text.setAttribute("fill", "currentColor");
+		text.textContent = words;
+		parent.replaceChild(text, object);
+	}
+	return copy;
+}
+/**
 * Render an SVG element to a raster data URL.
 *
 * The element is serialized as it stands, so whatever a plugin drew — including the theme it drew
@@ -1722,7 +1760,7 @@ function measure(svg, options) {
 async function exportSVGToImage(svg, options = {}) {
 	const { width, height } = measure(svg, options);
 	const scale = options.scale && options.scale > 0 ? options.scale : globalThis.devicePixelRatio || 1;
-	const source = new XMLSerializer().serializeToString(svg);
+	const source = new XMLSerializer().serializeToString(rasterisable(svg));
 	const namespaced = /\sxmlns=/.test(source) ? source : source.replace(/^<svg/, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
 	const url = URL.createObjectURL(new Blob([namespaced], { type: "image/svg+xml;charset=utf-8" }));
 	try {
@@ -1755,9 +1793,15 @@ async function exportSVGToImage(svg, options = {}) {
 * decide what lands in it.
 */
 async function exportRenderedImages(root, options = {}) {
-	const drawings = Array.from(root.querySelectorAll("svg"));
 	const exported = [];
-	for (const drawing of drawings) exported.push(await exportSVGToImage(drawing, options));
+	for (const drawing of Array.from(root.querySelectorAll("svg"))) {
+		if (drawing.closest(".katex")) continue;
+		try {
+			exported.push(await exportSVGToImage(drawing, options));
+		} catch (reason) {
+			options.onSkip?.(drawing, reason);
+		}
+	}
 	return exported;
 }
 /** Save an exported image under the given file name. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/core",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Headless streaming renderer core for LLM-generated UI — markdown/JSON repair, card registry, AST diff, plugin engine, sanitizer.",
   "keywords": [
     "llm",