@markdy/renderer-dom 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -97,17 +97,6 @@ interface GifDiagramExportOptions extends SvgExportOptions {
 }
 declare function exportDiagramAsGif(container: HTMLElement, timeline: TimelineController, options?: GifDiagramExportOptions): Promise<Blob>;
 
-/**
- * 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 {
     pixelRatio?: number;
 }

package/dist/index.js

@@ -2038,6 +2038,10 @@ var MIN_VIEWPORT_ZOOM = 0.5;
 var MAX_VIEWPORT_ZOOM = 3;
 var VIEWPORT_ZOOM_STEP = 15e-4;
 var DRAG_CLICK_THRESHOLD_PX = 4;
+var MARKDY_PLAYGROUND_URL = "https://markdy.com/playground/";
+function encodeCodeForPlaygroundHash(code) {
+  return encodeURIComponent(btoa(encodeURIComponent(code)));
+}
 function createBeatCaptionLayer(doc, beats) {
   const layer = doc.createElement("div");
   layer.className = "markdy-beat-caption-layer";
@@ -2171,7 +2175,7 @@ function createDiagram(opts) {
   let badge = null;
   if (copyright) {
     badge = document.createElement("a");
-    badge.href = "https://markdy.com";
+    badge.href = `${MARKDY_PLAYGROUND_URL}#code=${encodeCodeForPlaygroundHash(code)}`;
     badge.target = "_blank";
     badge.rel = "noopener noreferrer";
     badge.textContent = "Powered by Markdy";
@@ -2862,6 +2866,9 @@ function encodeGifSequence(frames, options = {}) {
   return new Uint8Array(buffer);
 }
 
+// src/export/png-exporter.ts
+import html2canvas from "html2canvas";
+
 // src/export/svg-exporter.ts
 function copyRenderedStyles(source, clone) {
   if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return;
@@ -2876,20 +2883,22 @@ function copyRenderedStyles(source, clone) {
     }
   }
 }
-function exportDiagramAsVectorSvg(containerEl, options = {}) {
+function normalizeExportViewport(scene) {
+  scene.querySelectorAll(".markdy-viewport-transform").forEach((viewportTransform) => {
+    viewportTransform.style.transform = "translate(0px, 0px) scale(1)";
+    viewportTransform.style.transformOrigin = "0 0";
+    viewportTransform.style.willChange = "auto";
+  });
+}
+function getDiagramSceneElement(containerEl) {
   const sceneEl = containerEl.classList?.contains("markdy-scene-root") ? containerEl : containerEl.querySelector(".markdy-scene-root") || containerEl.querySelector("svg") || (containerEl.tagName?.toLowerCase() === "svg" ? containerEl : null);
   if (!sceneEl) throw new Error("No Markdy scene element found in container");
-  if (sceneEl.tagName?.toLowerCase() === "svg") {
-    const clonedSvg = sceneEl.cloneNode(true);
-    if (!clonedSvg.getAttribute("xmlns")) {
-      clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    }
-    const serializer2 = new XMLSerializer();
-    return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-${serializer2.serializeToString(clonedSvg)}`;
-  }
+  return sceneEl;
+}
+function prepareHtmlSceneForExport(sceneEl, options = {}) {
   const clonedScene = sceneEl.cloneNode(true);
   copyRenderedStyles(sceneEl, clonedScene);
+  normalizeExportViewport(clonedScene);
   const widthStr = clonedScene.style.width || String(sceneEl.clientWidth || 800);
   const heightStr = clonedScene.style.height || String(sceneEl.clientHeight || 400);
   let width = parseFloat(widthStr);
@@ -2904,10 +2913,25 @@ ${serializer2.serializeToString(clonedSvg)}`;
   clonedScene.style.position = "relative";
   clonedScene.style.left = "0px";
   clonedScene.style.top = "0px";
+  clonedScene.style.margin = "0";
   clonedScene.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
   if (options.transparentBackground) {
     clonedScene.style.background = "transparent";
   }
+  return { sceneEl, clonedScene, width, height, scaledWidth, scaledHeight };
+}
+function exportDiagramAsVectorSvg(containerEl, options = {}) {
+  const sceneEl = getDiagramSceneElement(containerEl);
+  if (sceneEl.tagName?.toLowerCase() === "svg") {
+    const clonedSvg = sceneEl.cloneNode(true);
+    if (!clonedSvg.getAttribute("xmlns")) {
+      clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    }
+    const serializer2 = new XMLSerializer();
+    return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+${serializer2.serializeToString(clonedSvg)}`;
+  }
+  const { clonedScene, scaledWidth, scaledHeight } = prepareHtmlSceneForExport(sceneEl, options);
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
@@ -2940,19 +2964,35 @@ ${serializer2.serializeToString(clonedSvg)}`;
 }
 
 // src/export/inline-resources.ts
+var TRANSPARENT_PIXEL_DATA_URI = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+var RESOURCE_FETCH_TIMEOUT_MS = 3e3;
+var dataUriCache = /* @__PURE__ */ new Map();
+function shouldInlineUrl(url) {
+  const trimmed = url.trim();
+  return !!trimmed && !trimmed.startsWith("data:") && !trimmed.startsWith("blob:") && !trimmed.startsWith("#");
+}
 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;
-  }
+  if (dataUriCache.has(url)) return dataUriCache.get(url);
+  const request = (async () => {
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), RESOURCE_FETCH_TIMEOUT_MS);
+    try {
+      const resp = await fetch(url, { mode: "cors", credentials: "same-origin", signal: controller.signal });
+      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;
+    } finally {
+      clearTimeout(timeout);
+    }
+  })();
+  dataUriCache.set(url, request);
+  return request;
 }
 async function inlineCssUrls(cssValue) {
   const urlPattern = /url\(["']?([^"')]+)["']?\)/g;
@@ -2960,16 +3000,20 @@ async function inlineCssUrls(cssValue) {
   let m;
   while ((m = urlPattern.exec(cssValue)) !== null) {
     const src = m[1];
-    if (!src.startsWith("data:")) {
+    if (shouldInlineUrl(src)) {
       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}")`);
+      try {
+        const absoluteSrc = new URL(src, document.baseURI).href;
+        const dataUri = await toDataUri(absoluteSrc);
+        result = result.split(full).join(dataUri ? `url("${dataUri}")` : "none");
+      } catch {
+        result = result.split(full).join("none");
+      }
     })
   );
   return result;
@@ -2978,11 +3022,10 @@ 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;
+    if (src && shouldInlineUrl(src)) {
       tasks.push(
-        toDataUri(absoluteSrc).then((dataUri) => {
-          if (dataUri) img.setAttribute("src", dataUri);
+        Promise.resolve().then(() => toDataUri(new URL(src, document.baseURI).href)).then((dataUri) => {
+          img.setAttribute("src", dataUri || TRANSPARENT_PIXEL_DATA_URI);
         })
       );
     }
@@ -3000,53 +3043,178 @@ async function inlineExternalResources(root) {
   });
   await Promise.all(tasks);
 }
+async function inlineSerializedSvgResources(svgXml) {
+  const doc = new DOMParser().parseFromString(svgXml, "image/svg+xml");
+  if (doc.querySelector("parsererror")) return svgXml;
+  await inlineExternalResources(doc.documentElement);
+  const serializer = new XMLSerializer();
+  const serializedSvg = serializer.serializeToString(doc.documentElement);
+  return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+${serializedSvg}`;
+}
 
-// src/export/gif-exporter.ts
-var nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
-async function rasterizeFrame(container, pixelRatio, 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();
-    await new Promise((resolve, reject) => {
-      image.onload = () => resolve();
-      image.onerror = () => reject(new Error("Failed to rasterize GIF frame"));
-      image.src = url;
+// src/export/png-exporter.ts
+function cssColorComponentToByte(value) {
+  const trimmed = value.trim();
+  const numeric = trimmed.endsWith("%") ? Number.parseFloat(trimmed) / 100 : Number.parseFloat(trimmed);
+  if (!Number.isFinite(numeric)) return 0;
+  return Math.round(Math.min(1, Math.max(0, numeric)) * 255);
+}
+function cssAlphaToNumber(value) {
+  if (!value) return 1;
+  const trimmed = value.trim();
+  const numeric = trimmed.endsWith("%") ? Number.parseFloat(trimmed) / 100 : Number.parseFloat(trimmed);
+  if (!Number.isFinite(numeric)) return 1;
+  return Math.min(1, Math.max(0, numeric));
+}
+function normalizeCssColorFunctions(cssValue) {
+  return cssValue.replace(/color\(\s*[-a-z0-9]+\s+([^)]*)\)/gi, (_match, rawComponents) => {
+    const [rawChannels, rawAlpha] = String(rawComponents).split("/");
+    const channels = rawChannels.trim().split(/\s+/);
+    if (channels.length < 3) return "rgba(0, 0, 0, 0)";
+    const red = cssColorComponentToByte(channels[0]);
+    const green = cssColorComponentToByte(channels[1]);
+    const blue = cssColorComponentToByte(channels[2]);
+    const alpha = cssAlphaToNumber(rawAlpha);
+    return alpha >= 1 ? `rgb(${red}, ${green}, ${blue})` : `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+  });
+}
+function sanitizeHtml2CanvasStyles(root) {
+  [root, ...Array.from(root.querySelectorAll("*"))].forEach((element) => {
+    const style = element.getAttribute("style");
+    if (style?.includes("color(")) {
+      element.setAttribute("style", normalizeCssColorFunctions(style));
+    }
+  });
+}
+async function exportDiagramAsPng(containerEl, options = {}) {
+  const canvas = await rasterizeDiagramToCanvas(containerEl, options, options.pixelRatio || 2);
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((b) => {
+      if (b) resolve(b);
+      else reject(new Error("Canvas toBlob failed for PNG export"));
+    }, "image/png");
+  });
+}
+async function rasterizeDiagramToCanvas(containerEl, options = {}, pixelRatio = 1) {
+  const sceneEl = getDiagramSceneElement(containerEl);
+  if (sceneEl.tagName?.toLowerCase() !== "svg") {
+    const { clonedScene, scaledWidth, scaledHeight } = prepareHtmlSceneForExport(sceneEl, options);
+    await inlineExternalResources(clonedScene);
+    sanitizeHtml2CanvasStyles(clonedScene);
+    const host = document.createElement("div");
+    Object.assign(host.style, {
+      position: "fixed",
+      left: "-100000px",
+      top: "0",
+      width: `${scaledWidth}px`,
+      height: `${scaledHeight}px`,
+      overflow: "hidden",
+      pointerEvents: "none",
+      zIndex: "-1"
     });
-    const canvas = document.createElement("canvas");
-    canvas.width = image.naturalWidth * pixelRatio;
-    canvas.height = image.naturalHeight * pixelRatio;
-    const context = canvas.getContext("2d");
-    if (!context) throw new Error("Could not create GIF canvas context");
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    return context.getImageData(0, 0, canvas.width, canvas.height);
-  } finally {
+    host.setAttribute("aria-hidden", "true");
+    host.appendChild(clonedScene);
+    document.body.appendChild(host);
+    try {
+      await document.fonts?.ready;
+      return await html2canvas(clonedScene, {
+        allowTaint: false,
+        backgroundColor: options.transparentBackground ? null : void 0,
+        height: scaledHeight,
+        imageTimeout: 3e3,
+        logging: false,
+        onclone: (clonedDocument, clonedElement) => {
+          clonedDocument.querySelectorAll("style, link[rel='stylesheet']").forEach((styleNode) => styleNode.remove());
+          sanitizeHtml2CanvasStyles(clonedElement);
+        },
+        scale: pixelRatio,
+        useCORS: true,
+        width: scaledWidth
+      });
+    } finally {
+      host.remove();
+    }
+  }
+  const pixelRatioForSvg = pixelRatio || 1;
+  const clonedContainer = containerEl.cloneNode(true);
+  await inlineExternalResources(clonedContainer);
+  const svgXml = await inlineSerializedSvgResources(exportDiagramAsVectorSvg(clonedContainer, options));
+  const blob = new Blob([svgXml], { type: "image/svg+xml;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const img = new Image();
+  await new Promise((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to rasterize SVG into Image for PNG export"));
+    };
+    img.src = url;
+  });
+  const width = img.naturalWidth || 800;
+  const height = img.naturalHeight || 400;
+  const canvas = document.createElement("canvas");
+  canvas.width = width * pixelRatioForSvg;
+  canvas.height = height * pixelRatioForSvg;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
     URL.revokeObjectURL(url);
+    throw new Error("Could not get 2D canvas context for PNG export");
   }
+  ctx.scale(pixelRatioForSvg, pixelRatioForSvg);
+  ctx.drawImage(img, 0, 0, width, height);
+  URL.revokeObjectURL(url);
+  return canvas;
+}
+
+// src/export/gif-exporter.ts
+var nextFrame = () => new Promise((resolve) => {
+  let settled = false;
+  const finish = () => {
+    if (settled) return;
+    settled = true;
+    resolve();
+  };
+  const fallback = setTimeout(finish, 80);
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    clearTimeout(fallback);
+    finish();
+  }));
+});
+var DEFAULT_GIF_PIXEL_RATIO = 0.3;
+var MAX_GIF_FRAMES = 24;
+async function rasterizeFrame(container, pixelRatio, options) {
+  const canvas = await rasterizeDiagramToCanvas(container, options, pixelRatio);
+  const context = canvas.getContext("2d");
+  if (!context) throw new Error("Could not create GIF canvas context");
+  return context.getImageData(0, 0, canvas.width, canvas.height);
 }
 async function exportDiagramAsGif(container, timeline, options = {}) {
-  const fps = Math.min(24, Math.max(1, Math.round(options.fps ?? 12)));
+  const requestedFps = Math.min(24, Math.max(1, Math.round(options.fps ?? 12)));
   const duration = timeline.duration();
+  const fps = Math.min(requestedFps, MAX_GIF_FRAMES / Math.max(duration, 1e-3));
   const frameCount = Math.max(1, Math.ceil(duration * fps));
   const delayMs = Math.max(20, Math.round(1e3 / fps));
+  const pixelRatio = options.pixelRatio ?? DEFAULT_GIF_PIXEL_RATIO;
   const priorTime = timeline.currentTime();
   const wasPlaying = timeline.isPlaying();
   timeline.pause();
   try {
     const frames = [];
+    timeline.seek(duration);
+    await nextFrame();
+    frames.push({ imageData: await rasterizeFrame(container, pixelRatio, options), delayMs: Math.max(delayMs, 800) });
     for (let frame = 0; frame < frameCount; frame++) {
       timeline.seek(Math.min(duration, frame / fps));
       await nextFrame();
       frames.push({
-        imageData: await rasterizeFrame(container, options.pixelRatio ?? 1, options),
+        imageData: await rasterizeFrame(container, pixelRatio, options),
         delayMs
       });
     }
     timeline.seek(duration);
     await nextFrame();
-    frames.push({ imageData: await rasterizeFrame(container, options.pixelRatio ?? 1, options), delayMs: Math.max(delayMs, 800) });
+    frames.push({ imageData: await rasterizeFrame(container, pixelRatio, options), delayMs: Math.max(delayMs, 800) });
     const encoded = encodeGifSequence(frames, { dither: true, loop: options.loop ?? true });
     const bytes = new Uint8Array(encoded.byteLength);
     bytes.set(encoded);
@@ -3057,44 +3225,6 @@ async function exportDiagramAsGif(container, timeline, options = {}) {
   }
 }
 
-// src/export/png-exporter.ts
-async function exportDiagramAsPng(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();
-  await new Promise((resolve, reject) => {
-    img.onload = () => resolve();
-    img.onerror = () => {
-      URL.revokeObjectURL(url);
-      reject(new Error("Failed to rasterize SVG into Image for PNG export"));
-    };
-    img.src = url;
-  });
-  const width = img.naturalWidth || 800;
-  const height = img.naturalHeight || 400;
-  const canvas = document.createElement("canvas");
-  canvas.width = width * pixelRatio;
-  canvas.height = height * pixelRatio;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) {
-    URL.revokeObjectURL(url);
-    throw new Error("Could not get 2D canvas context for PNG export");
-  }
-  ctx.scale(pixelRatio, pixelRatio);
-  ctx.drawImage(img, 0, 0, width, height);
-  URL.revokeObjectURL(url);
-  return new Promise((resolve, reject) => {
-    canvas.toBlob((b) => {
-      if (b) resolve(b);
-      else reject(new Error("Canvas toBlob failed for PNG export"));
-    }, "image/png");
-  });
-}
-
 // src/presentation-controller.ts
 var DiagramPresentationController = class {
   diagram;

package/package.json

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