@markdy/renderer-dom 0.8.25 → 0.8.26

package/dist/index.d.ts

@@ -81,6 +81,17 @@ interface SvgExportOptions {
 }
 declare function exportDiagramAsVectorSvg(containerEl: HTMLElement, options?: SvgExportOptions): string;
 
+/**
+ * packages/renderer-dom/src/export/png-exporter.ts
+ * High-DPI raster PNG export with 2x retina scaling.
+ * Zero external dependencies.
+ */
+
+interface PngExportOptions extends SvgExportOptions {
+    pixelRatio?: number;
+}
+declare function exportDiagramAsPng(containerEl: HTMLElement, options?: PngExportOptions): Promise<Blob>;
+
 /**
  * packages/renderer-dom/src/presentation-controller.ts
  * Interactive Beat Navigation & Keyboard-driven presentation controller.
@@ -95,13 +106,17 @@ declare class DiagramPresentationController {
     private diagram;
     private plan;
     private currentBeatIndex;
+    private options;
+    private isDestroyed;
     constructor(diagram: Diagram, plan: RenderPlan, options?: ControllerOptions);
     nextBeat(): void;
     prevBeat(): void;
+    private applyCurrentBeat;
     getCurrentBeatIndex(): number;
     togglePlay(): void;
     setSpeed(rate: number): void;
-    private attachKeyboardListener;
+    private onKeyDown;
+    destroy(): void;
 }
 
-export { type AnimationRecordFrame, type ControllerOptions, type Diagram, type DiagramOptions, DiagramPresentationController, type GifExportOptions, ICON_REGISTRY, type IconSpec, type SvgExportOptions, createDiagram, encodeGifSequence, exportDiagramAsVectorSvg };
+export { type AnimationRecordFrame, type ControllerOptions, type Diagram, type DiagramOptions, DiagramPresentationController, type GifExportOptions, ICON_REGISTRY, type IconSpec, type PngExportOptions, type SvgExportOptions, createDiagram, encodeGifSequence, exportDiagramAsPng, exportDiagramAsVectorSvg };

package/dist/index.js

@@ -2694,7 +2694,7 @@ function lzwCompress(pixels, minCodeSize = 8) {
     if (nextCode === 1 << codeSize && codeSize < 12) {
       codeSize++;
     }
-    if (nextCode >= 4095) {
+    if (nextCode >= 4096) {
       codes.push(clearCode);
       dict = /* @__PURE__ */ new Map();
       for (let j = 0; j < clearCode; j++) dict.set(String(j), j);
@@ -2785,31 +2785,96 @@ function encodeGifSequence(frames, options = {}) {
 
 // src/export/svg-exporter.ts
 function exportDiagramAsVectorSvg(containerEl, options = {}) {
-  const svgEl = containerEl.querySelector("svg");
-  if (!svgEl) throw new Error("No Markdy SVG element found in container");
-  const clonedSvg = svgEl.cloneNode(true);
-  const width = svgEl.getAttribute("width") || String(svgEl.clientWidth || 800);
-  const height = svgEl.getAttribute("height") || String(svgEl.clientHeight || 400);
-  clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-  clonedSvg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
-  clonedSvg.setAttribute("width", width);
-  clonedSvg.setAttribute("height", height);
-  clonedSvg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  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)}`;
+  }
+  const clonedScene = sceneEl.cloneNode(true);
+  const widthStr = clonedScene.style.width || String(sceneEl.clientWidth || 800);
+  const heightStr = clonedScene.style.height || String(sceneEl.clientHeight || 400);
+  let width = parseFloat(widthStr);
+  let height = parseFloat(heightStr);
+  if (isNaN(width)) width = 800;
+  if (isNaN(height)) height = 400;
+  const scale = options.scale || 1;
+  const scaledWidth = width * scale;
+  const scaledHeight = height * scale;
+  clonedScene.style.transform = `scale(${scale})`;
+  clonedScene.style.transformOrigin = "0 0";
+  clonedScene.style.position = "relative";
+  clonedScene.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
   if (options.transparentBackground) {
-    const bgRect = clonedSvg.querySelector("rect");
-    if (bgRect) bgRect.remove();
+    clonedScene.style.background = "transparent";
   }
+  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");
+  svg.setAttribute("width", String(scaledWidth));
+  svg.setAttribute("height", String(scaledHeight));
+  svg.setAttribute("viewBox", `0 0 ${scaledWidth} ${scaledHeight}`);
   if (options.includeThemeStyles !== false) {
     const styleEl = document.createElementNS("http://www.w3.org/2000/svg", "style");
-    styleEl.textContent = `
-      text { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
+    let combinedStyles = `
+      foreignObject { width: 100%; height: 100%; }
       .markdy-node { transition: opacity 0.3s ease; }
     `;
-    clonedSvg.insertBefore(styleEl, clonedSvg.firstChild);
-  }
+    if (typeof document !== "undefined") {
+      const styles = document.querySelectorAll("style[id^='markdy-']");
+      for (let i = 0; i < styles.length; i++) {
+        combinedStyles += styles[i].textContent + "\n";
+      }
+    }
+    styleEl.textContent = combinedStyles;
+    svg.appendChild(styleEl);
+  }
+  const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
+  foreignObject.setAttribute("width", "100%");
+  foreignObject.setAttribute("height", "100%");
+  foreignObject.appendChild(clonedScene);
+  svg.appendChild(foreignObject);
   const serializer = new XMLSerializer();
   return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-` + serializer.serializeToString(clonedSvg);
+` + serializer.serializeToString(svg);
+}
+
+// src/export/png-exporter.ts
+async function exportDiagramAsPng(containerEl, options = {}) {
+  const svgXml = exportDiagramAsVectorSvg(containerEl, options);
+  const pixelRatio = options.pixelRatio || 2;
+  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 = () => 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
@@ -2817,60 +2882,77 @@ var DiagramPresentationController = class {
   diagram;
   plan;
   currentBeatIndex = 0;
+  options;
+  isDestroyed = false;
   constructor(diagram, plan, options = {}) {
     this.diagram = diagram;
     this.plan = plan;
+    this.options = options;
     if (options.enableKeyboard !== false && typeof window !== "undefined") {
-      this.attachKeyboardListener();
+      window.addEventListener("keydown", this.onKeyDown);
     }
   }
   nextBeat() {
     if (this.currentBeatIndex < this.plan.beats.length - 1) {
       this.currentBeatIndex++;
-      const beat = this.plan.beats[this.currentBeatIndex];
-      this.diagram.seek(beat.start);
+      this.applyCurrentBeat();
     }
   }
   prevBeat() {
     if (this.currentBeatIndex > 0) {
       this.currentBeatIndex--;
-      const beat = this.plan.beats[this.currentBeatIndex];
-      this.diagram.seek(beat.start);
+      this.applyCurrentBeat();
+    }
+  }
+  applyCurrentBeat() {
+    const beat = this.plan.beats[this.currentBeatIndex];
+    this.diagram.seek(beat.start);
+    if (this.options.onBeatChange) {
+      this.options.onBeatChange(beat.name, this.currentBeatIndex);
     }
   }
   getCurrentBeatIndex() {
     return this.currentBeatIndex;
   }
   togglePlay() {
-    this.diagram.play();
+    if (this.diagram.isPlaying()) {
+      this.diagram.pause();
+    } else {
+      this.diagram.play();
+    }
   }
   setSpeed(rate) {
     this.diagram.setPlaybackRate(rate);
   }
-  attachKeyboardListener() {
-    window.addEventListener("keydown", (e) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
-      switch (e.key) {
-        case "ArrowRight":
-        case "PageDown":
-          this.nextBeat();
-          break;
-        case "ArrowLeft":
-        case "PageUp":
-          this.prevBeat();
-          break;
-        case " ":
-          e.preventDefault();
-          this.togglePlay();
-          break;
-        case "1":
-          this.setSpeed(1);
-          break;
-        case "2":
-          this.setSpeed(2);
-          break;
-      }
-    });
+  onKeyDown = (e) => {
+    if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+    switch (e.key) {
+      case "ArrowRight":
+      case "PageDown":
+        this.nextBeat();
+        break;
+      case "ArrowLeft":
+      case "PageUp":
+        this.prevBeat();
+        break;
+      case " ":
+        e.preventDefault();
+        this.togglePlay();
+        break;
+      case "1":
+        this.setSpeed(1);
+        break;
+      case "2":
+        this.setSpeed(2);
+        break;
+    }
+  };
+  destroy() {
+    if (this.isDestroyed) return;
+    this.isDestroyed = true;
+    if (typeof window !== "undefined") {
+      window.removeEventListener("keydown", this.onKeyDown);
+    }
   }
 };
 export {
@@ -2878,5 +2960,6 @@ export {
   ICON_REGISTRY,
   createDiagram,
   encodeGifSequence,
+  exportDiagramAsPng,
   exportDiagramAsVectorSvg
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.25",
+  "version": "0.8.26",
   "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.25"
+    "@markdy/core": "0.8.26"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.25"
+    "@markdy/stdlib-systems": "0.8.26"
   },
   "scripts": {
     "build": "tsup",