@markdy/renderer-dom 0.8.28 → 1.0.0

package/dist/index.d.ts

@@ -101,6 +101,11 @@ declare function exportDiagramAsGif(container: HTMLElement, timeline: TimelineCo
  * packages/renderer-dom/src/export/png-exporter.ts
  * High-DPI raster PNG export with 2x retina scaling.
  * Zero external dependencies.
+ *
+ * Fix: Inline all external resources (images, fonts) as base64 data URIs
+ * before drawing the SVG to canvas. A foreignObject-wrapped SVG taints the
+ * canvas whenever it references any external URL, so every resource must be
+ * inlined first.
  */
 
 interface PngExportOptions extends SvgExportOptions {

package/dist/index.js

@@ -2939,10 +2939,74 @@ ${serializer2.serializeToString(clonedSvg)}`;
 ` + serializer.serializeToString(svg);
 }
 
+// src/export/inline-resources.ts
+async function toDataUri(url) {
+  try {
+    const resp = await fetch(url, { mode: "cors", credentials: "same-origin" });
+    if (!resp.ok) return null;
+    const arrayBuffer = await resp.arrayBuffer();
+    const mimeType = resp.headers.get("Content-Type") || "application/octet-stream";
+    const base64 = btoa(
+      new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), "")
+    );
+    return `data:${mimeType};base64,${base64}`;
+  } catch {
+    return null;
+  }
+}
+async function inlineCssUrls(cssValue) {
+  const urlPattern = /url\(["']?([^"')]+)["']?\)/g;
+  const matches = [];
+  let m;
+  while ((m = urlPattern.exec(cssValue)) !== null) {
+    const src = m[1];
+    if (!src.startsWith("data:")) {
+      matches.push({ full: m[0], src });
+    }
+  }
+  let result = cssValue;
+  await Promise.all(
+    matches.map(async ({ full, src }) => {
+      const absoluteSrc = new URL(src, document.baseURI).href;
+      const dataUri = await toDataUri(absoluteSrc);
+      if (dataUri) result = result.split(full).join(`url("${dataUri}")`);
+    })
+  );
+  return result;
+}
+async function inlineExternalResources(root) {
+  const tasks = [];
+  root.querySelectorAll("img").forEach((img) => {
+    const src = img.getAttribute("src");
+    if (src && !src.startsWith("data:")) {
+      const absoluteSrc = new URL(src, document.baseURI).href;
+      tasks.push(
+        toDataUri(absoluteSrc).then((dataUri) => {
+          if (dataUri) img.setAttribute("src", dataUri);
+        })
+      );
+    }
+  });
+  const allEls = [root, ...Array.from(root.querySelectorAll("*"))];
+  allEls.forEach((el) => {
+    const style = el.getAttribute("style");
+    if (style && style.includes("url(")) {
+      tasks.push(
+        inlineCssUrls(style).then((inlined) => {
+          if (inlined !== style) el.setAttribute("style", inlined);
+        })
+      );
+    }
+  });
+  await Promise.all(tasks);
+}
+
 // src/export/gif-exporter.ts
 var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
 async function rasterizeFrame(container, pixelRatio, options) {
-  const svg = exportDiagramAsVectorSvg(container, options);
+  const cloned = container.cloneNode(true);
+  await inlineExternalResources(cloned);
+  const svg = exportDiagramAsVectorSvg(cloned, options);
   const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml;charset=utf-8" }));
   try {
     const image = new Image();
@@ -2995,8 +3059,10 @@ async function exportDiagramAsGif(container, timeline, options = {}) {
 
 // src/export/png-exporter.ts
 async function exportDiagramAsPng(containerEl, options = {}) {
-  const svgXml = exportDiagramAsVectorSvg(containerEl, options);
   const pixelRatio = options.pixelRatio || 2;
+  const clonedContainer = containerEl.cloneNode(true);
+  await inlineExternalResources(clonedContainer);
+  const svgXml = exportDiagramAsVectorSvg(clonedContainer, options);
   const blob = new Blob([svgXml], { type: "image/svg+xml;charset=utf-8" });
   const url = URL.createObjectURL(blob);
   const img = new Image();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.28",
+  "version": "1.0.0",
   "description": "Browser renderer for diagram-native animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -44,14 +44,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.28"
+    "@markdy/core": "1.0.0"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.28"
+    "@markdy/stdlib-systems": "1.0.0"
   },
   "scripts": {
     "build": "tsup",