@markdy/renderer-dom 1.0.10 → 1.0.11

package/README.md

@@ -77,8 +77,9 @@ diagram.destroy();    // clean up DOM + cancel animations
 | `sceneBoundaryProgress` | `boolean \| string` | `true` | Show boundary progress bar, or pass a custom color/gradient string |
 | `progressColor` | `string` | `plan.meta.progressColor ?? "rainbow"` | Custom progress bar color (e.g. `"#3b82f6"`) or gradient (e.g. `"#ec4899, #8b5cf6"`) |
 | `playbackRate` | `number` | `plan.meta.playbackRate ?? 1` | Normalized timeline speed multiplier; `1` is Markdy's normal pace |
-| `interactiveViewport` | `boolean` | `controls \|\| plan.meta.interactiveViewport` | Enable wheel zoom and drag pan on the rendered viewport |
-| `controls` | `boolean` | `plan.meta.controls ?? false` | Show left-aligned footer controls toolbar (play/pause, restart, speed, reset view); also enables viewport interaction |
+| `interactiveViewport` | `boolean` | `controls \|\| player.interaction` | Enable wheel zoom and drag pan on the rendered viewport |
+| `controls` | `boolean` | `player.controls` | Show the footer toolbar (play, prev/next beat, restart, seek, speed, fit, reset view, SVG, share); also enables viewport interaction |
+| `shareUrl` | `string` | Markdy playground | Base URL used by the Share control when building `#code=` links |
 | `onWarning` | `(warning: Diagnostic) => void` | `console.warn` | Called for each soft parse warning |
 | `onTimeUpdate` | `(seconds: number, durationSeconds: number) => void` | — | Called whenever playback or seek changes the current time |
 | `onPlayStateChange` | `(playing: boolean) => void` | — | Called when playback starts or pauses |

package/dist/chunk-VIZHA7GI.js

@@ -0,0 +1,99 @@
+// src/export/svg-exporter.ts
+function copyRenderedStyles(source, clone) {
+  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return;
+  const sourceElements = [source, ...Array.from(source.querySelectorAll("*"))];
+  const cloneElements = [clone, ...Array.from(clone.querySelectorAll("*"))];
+  for (let index = 0; index < Math.min(sourceElements.length, cloneElements.length); index++) {
+    const computed = window.getComputedStyle(sourceElements[index]);
+    const target = cloneElements[index].style;
+    for (let propertyIndex = 0; propertyIndex < computed.length; propertyIndex++) {
+      const property = computed.item(propertyIndex);
+      target.setProperty(property, computed.getPropertyValue(property), computed.getPropertyPriority(property));
+    }
+  }
+}
+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");
+  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);
+  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.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");
+  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");
+    let combinedStyles = `
+      foreignObject { width: 100%; height: 100%; }
+      .markdy-node { transition: opacity 0.3s ease; }
+    `;
+    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(svg);
+}
+
+export {
+  getDiagramSceneElement,
+  prepareHtmlSceneForExport,
+  exportDiagramAsVectorSvg
+};

package/dist/index.d.ts

@@ -28,6 +28,8 @@ interface DiagramOptions {
     playbackRate?: number;
     /** Enable wheel zoom and drag pan on the rendered viewport. Defaults to false. */
     interactiveViewport?: boolean;
+    /** Base URL for the Share control. Defaults to the Markdy playground. */
+    shareUrl?: string;
     /** Show built-in playback and viewport controls. Also enables viewport interaction. Defaults to false. */
     controls?: boolean;
     onWarning?: (warning: Diagnostic) => void;
@@ -46,6 +48,8 @@ interface Diagram {
     isPlaying(): boolean;
     beats(): BeatRange[];
     seekToBeat(name: string): void;
+    nextBeat(): void;
+    prevBeat(): void;
     destroy(): void;
 }
 declare function createDiagram(opts: DiagramOptions): Diagram;

package/dist/index.js

@@ -1,5 +1,15 @@
+import {
+  exportDiagramAsVectorSvg,
+  getDiagramSceneElement,
+  prepareHtmlSceneForExport
+} from "./chunk-VIZHA7GI.js";
+
 // src/diagram.ts
-import { parseAndCompile } from "@markdy/core";
+import {
+  compressMarkdyToUrlHash,
+  parseAndCompile,
+  resolvePlayer
+} from "@markdy/core";
 
 // src/geometry/rect.ts
 function boxRect(box) {
@@ -2571,11 +2581,11 @@ function applyThemeToScene(scene, theme) {
 
 // src/diagram.ts
 var NORMAL_PLAYBACK_RATE = 4 / 5;
-var DEFAULT_PLAYBACK_RATE = 1;
 var MIN_VIEWPORT_ZOOM = 0.5;
 var MAX_VIEWPORT_ZOOM = 3;
 var VIEWPORT_ZOOM_STEP = 15e-4;
 var DRAG_CLICK_THRESHOLD_PX = 4;
+var BEAT_NAV_EPSILON_S = 0.05;
 var MARKDY_PLAYGROUND_URL = "https://markdy.com/playground/";
 function encodeCodeForPlaygroundHash(code) {
   return encodeURIComponent(btoa(encodeURIComponent(code)));
@@ -2628,6 +2638,7 @@ function createDiagram(opts) {
     playbackRate: initialPlaybackRate,
     controls: explicitControls,
     interactiveViewport: explicitInteractiveViewport,
+    shareUrl,
     autoplay: explicitAutoplay,
     loop: explicitLoop,
     copyright: explicitCopyright,
@@ -2640,15 +2651,46 @@ function createDiagram(opts) {
   for (const w of ast.diagnostics) {
     if (w.severity === "warning") onWarning(w);
   }
-  const controls = explicitControls ?? plan.meta.controls ?? false;
-  const interactiveViewport = explicitInteractiveViewport ?? (explicitControls !== void 0 ? explicitControls : plan.meta.interactiveViewport ?? plan.meta.controls ?? false);
-  const autoplay = explicitAutoplay ?? plan.meta.autoplay ?? true;
-  const loop = explicitLoop ?? plan.meta.loop ?? true;
-  const copyright = explicitCopyright ?? plan.meta.copyright ?? true;
-  const rawPlaybackRate = initialPlaybackRate ?? plan.meta.playbackRate ?? DEFAULT_PLAYBACK_RATE;
-  let playbackRate = Number.isFinite(rawPlaybackRate) && rawPlaybackRate > 0 ? rawPlaybackRate : DEFAULT_PLAYBACK_RATE;
-  const showSceneBoundaryProgress = sceneBoundaryProgress === false || sceneBoundaryProgress === void 0 && progressBar === false ? false : plan.meta.progressColor === "none" ? false : true;
-  const rawColor = progressColor ?? progressBarColor ?? (typeof sceneBoundaryProgress === "string" && sceneBoundaryProgress !== "true" && sceneBoundaryProgress !== "false" ? sceneBoundaryProgress : typeof progressBar === "string" && progressBar !== "true" && progressBar !== "false" ? progressBar : void 0) ?? (plan.meta.progressColor && plan.meta.progressColor !== "none" ? plan.meta.progressColor : void 0);
+  const hostProgress = sceneBoundaryProgress === false || sceneBoundaryProgress === void 0 && progressBar === false ? "none" : void 0;
+  const hostProgressColor = progressColor ?? progressBarColor ?? (typeof sceneBoundaryProgress === "string" && sceneBoundaryProgress !== "true" && sceneBoundaryProgress !== "false" ? sceneBoundaryProgress : typeof progressBar === "string" && progressBar !== "true" && progressBar !== "false" ? progressBar : void 0);
+  const player = resolvePlayer(plan.meta.player, {
+    autoplay: explicitAutoplay,
+    loop: explicitLoop,
+    playbackRate: initialPlaybackRate,
+    copyright: explicitCopyright,
+    controls: explicitControls,
+    interactiveViewport: explicitInteractiveViewport,
+    progress: hostProgress,
+    progressColor: hostProgressColor
+  });
+  const { autoplay, loop } = player.playback;
+  const {
+    enabled: interactiveViewport,
+    zoom: allowZoom,
+    pan: allowPan,
+    clickToPlay,
+    doubleClickToReset,
+    keyboard: keyboardShortcuts
+  } = player.interaction;
+  const {
+    enabled: showControls,
+    play: playButton,
+    restart: restartButton,
+    prevBeat: prevBeatButton,
+    nextBeat: nextBeatButton,
+    seek: seekBar,
+    speed: speedControls,
+    speeds: speedOptions,
+    fit: fitViewButton,
+    resetView: resetViewButton,
+    svg: svgButton,
+    share: shareButton
+  } = player.controls;
+  const copyright = player.chrome.badge;
+  const progressMode = player.chrome.progress;
+  const showProgress = progressMode !== "none";
+  let playbackRate = player.playback.rate;
+  const rawColor = player.chrome.progressColor;
   const customColor = rawColor && rawColor.trim() !== "rainbow" ? rawColor.trim() : null;
   const DEFAULT_RAINBOW = "hsl(0,90%,60%), hsl(45,90%,55%), hsl(90,80%,50%), hsl(180,80%,50%), hsl(270,80%,55%), hsl(330,90%,60%)";
   const totalDurationMs = plan.duration * 1e3;
@@ -2667,11 +2709,11 @@ function createDiagram(opts) {
   });
   container.appendChild(viewport);
   let progressEl = null;
-  if (showSceneBoundaryProgress) {
+  if (showProgress) {
     progressEl = document.createElement("div");
     Object.assign(progressEl.style, {
       position: "absolute",
-      inset: "0",
+      ...progressMode === "bar" ? { left: "0", right: "0", bottom: "0", height: "3px" } : { inset: "0" },
       zIndex: "9999",
       pointerEvents: "none",
       borderRadius: "inherit"
@@ -2682,6 +2724,12 @@ function createDiagram(opts) {
   const tlAngleNorm = (tlAngle % 360 + 360) % 360;
   function updateProgressBar(pct) {
     if (!progressEl) return;
+    if (progressMode === "bar") {
+      progressEl.style.background = customColor ?? "#2563eb";
+      progressEl.style.transformOrigin = "left center";
+      progressEl.style.transform = `scaleX(${pct})`;
+      return;
+    }
     const deg = pct * 360;
     const colorStops = customColor ? customColor.includes(",") ? customColor : `${customColor} 0deg, ${customColor}` : DEFAULT_RAINBOW;
     progressEl.style.background = `conic-gradient(from ${tlAngleNorm}deg, ${colorStops} ${deg}deg, transparent ${deg}deg)`;
@@ -2955,15 +3003,40 @@ function createDiagram(opts) {
   let suppressNextClick = false;
   let controlsPlayButton = null;
   let controlsRateButtons = [];
+  let controlsSeekBar = null;
+  let controlsFitButton = null;
+  let fitViewActive = false;
   function applyViewportTransform() {
     viewportTransform.style.transform = `translate(${viewportPanX}px, ${viewportPanY}px) scale(${viewportScale})`;
   }
   function resetViewportTransform() {
+    releaseFitView();
     viewportScale = 1;
     viewportPanX = 0;
     viewportPanY = 0;
     applyViewportTransform();
   }
+  function releaseFitView() {
+    if (!fitViewActive) return;
+    fitViewActive = false;
+    cameraLayer.style.removeProperty("transform");
+  }
+  function toggleFitView() {
+    if (fitViewActive) {
+      resetViewportTransform();
+      syncControls();
+      return;
+    }
+    const bounds = computeContentBounds();
+    const scale = Math.min(plan.meta.width / bounds.width, plan.meta.height / bounds.height);
+    viewportScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+    viewportPanX = -bounds.minX * viewportScale + (plan.meta.width - bounds.width * viewportScale) / 2;
+    viewportPanY = -bounds.minY * viewportScale + (plan.meta.height - bounds.height * viewportScale) / 2;
+    applyViewportTransform();
+    fitViewActive = true;
+    cameraLayer.style.setProperty("transform", "none", "important");
+    syncControls();
+  }
   function handleViewportWheel(event) {
     event.preventDefault();
     const rect = viewport.getBoundingClientRect();
@@ -2979,6 +3052,7 @@ function createDiagram(opts) {
     applyViewportTransform();
   }
   function handleViewportPointerDown(event) {
+    if (!allowPan) return;
     if (event.button !== 0 || activePointerId !== null) return;
     activePointerId = event.pointerId;
     dragStartX = event.clientX;
@@ -3031,6 +3105,13 @@ function createDiagram(opts) {
       button.style.color = active ? "#ffffff" : "#475569";
       button.style.borderColor = active ? "#0f172a" : "rgba(148, 163, 184, 0.55)";
     }
+    if (controlsSeekBar) controlsSeekBar.value = String(sceneMs / 1e3);
+    if (controlsFitButton) {
+      controlsFitButton.setAttribute("aria-pressed", fitViewActive ? "true" : "false");
+      controlsFitButton.style.background = fitViewActive ? "#1e293b" : "rgba(248, 250, 252, 0.92)";
+      controlsFitButton.style.color = fitViewActive ? "#ffffff" : "#475569";
+      controlsFitButton.style.borderColor = fitViewActive ? "#0f172a" : "rgba(148, 163, 184, 0.55)";
+    }
   }
   function emitPlayStateChange(playing) {
     onPlayStateChange?.(playing);
@@ -3105,8 +3186,23 @@ function createDiagram(opts) {
       const beat = plan.beats.find((b) => b.name === name);
       if (beat) diagram.seek(beat.start);
     },
+    nextBeat() {
+      const next = plan.beats.find((beat) => beat.start > sceneMs / 1e3 + BEAT_NAV_EPSILON_S);
+      if (next) diagram.seek(next.start);
+    },
+    prevBeat() {
+      const current = sceneMs / 1e3;
+      let target = 0;
+      for (const beat of plan.beats) {
+        if (beat.start < current - BEAT_NAV_EPSILON_S) target = beat.start;
+      }
+      diagram.seek(target);
+    },
     destroy() {
       diagram.pause();
+      if (keyboardShortcuts && typeof window !== "undefined") {
+        window.removeEventListener("keydown", handleKeyDown);
+      }
       for (const anim of allAnims) anim.cancel();
       resizeObserver?.disconnect();
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
@@ -3143,6 +3239,159 @@ function createDiagram(opts) {
     });
     return button;
   }
+  function mountPlayControl(toolbar) {
+    if (!playButton) return;
+    controlsPlayButton = makeControlButton("Play", "Play diagram");
+    controlsPlayButton.className = "markdy-control-play";
+    controlsPlayButton.addEventListener("click", togglePlayback);
+    toolbar.appendChild(controlsPlayButton);
+  }
+  function mountBeatNavControls(toolbar, position) {
+    const wanted = position === "prev" ? prevBeatButton : nextBeatButton;
+    if (!wanted || plan.beats.length < 2) return;
+    const label = position === "prev" ? "Prev" : "Next";
+    const button = makeControlButton(label, `${label === "Prev" ? "Previous" : "Next"} beat`);
+    button.className = `markdy-control-${position}-beat`;
+    button.addEventListener("click", () => position === "prev" ? diagram.prevBeat() : diagram.nextBeat());
+    toolbar.appendChild(button);
+  }
+  function mountRestartControl(toolbar) {
+    if (!restartButton) return;
+    const button = makeControlButton("Restart", "Restart diagram");
+    button.className = "markdy-control-restart";
+    button.addEventListener("click", () => {
+      diagram.seek(0);
+      diagram.play();
+    });
+    toolbar.appendChild(button);
+  }
+  function mountSeekControl(toolbar) {
+    if (!seekBar) return;
+    controlsSeekBar = document.createElement("input");
+    controlsSeekBar.className = "markdy-control-seek";
+    controlsSeekBar.type = "range";
+    controlsSeekBar.min = "0";
+    controlsSeekBar.max = String(durationSeconds);
+    controlsSeekBar.step = "0.01";
+    controlsSeekBar.value = String(sceneMs / 1e3);
+    controlsSeekBar.setAttribute("aria-label", "Seek diagram timeline");
+    controlsSeekBar.addEventListener("input", () => diagram.seek(Number(controlsSeekBar?.value ?? 0)));
+    toolbar.appendChild(controlsSeekBar);
+  }
+  function mountSpeedControls(toolbar) {
+    if (!speedControls) return;
+    controlsRateButtons = speedOptions.map((rate) => {
+      const button = makeControlButton(`${rate}x`, `Set playback speed to ${rate}x`);
+      button.className = "markdy-control-rate";
+      button.dataset.rate = String(rate);
+      button.setAttribute("aria-pressed", "false");
+      button.addEventListener("click", () => diagram.setPlaybackRate(rate));
+      toolbar.appendChild(button);
+      return button;
+    });
+  }
+  function flashControlLabel(button, message) {
+    const original = button.textContent ?? "";
+    button.textContent = message;
+    setTimeout(() => {
+      button.textContent = original;
+    }, 1400);
+  }
+  function downloadFile(filename, contents, type) {
+    const blob = new Blob([contents], { type });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+  function mountSvgControl(toolbar) {
+    if (!svgButton) return;
+    const button = makeControlButton("SVG", "Export diagram as SVG");
+    button.className = "markdy-control-svg";
+    button.addEventListener("click", async () => {
+      const resumeAt = sceneMs;
+      const wasPlaying = isPlaying;
+      try {
+        diagram.pause();
+        diagram.seek(durationSeconds);
+        const { exportDiagramAsVectorSvg: exportDiagramAsVectorSvg2 } = await import("./svg-exporter-7FW6RIP6.js");
+        const svg = exportDiagramAsVectorSvg2(container);
+        const name = (plan.title || "markdy-diagram").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+        downloadFile(`${name || "markdy-diagram"}.svg`, svg, "image/svg+xml");
+      } catch (error) {
+        onWarning({ severity: "warning", message: `SVG export failed: ${String(error)}`, line: 0 });
+        flashControlLabel(button, "Failed");
+      } finally {
+        diagram.seek(resumeAt / 1e3);
+        if (wasPlaying) diagram.play();
+      }
+    });
+    toolbar.appendChild(button);
+  }
+  function mountShareControl(toolbar) {
+    if (!shareButton) return;
+    const button = makeControlButton("Share", "Copy a share link for this diagram");
+    button.className = "markdy-control-share";
+    button.addEventListener("click", async () => {
+      try {
+        const hash = await compressMarkdyToUrlHash(code);
+        const base = shareUrl ?? MARKDY_PLAYGROUND_URL;
+        await navigator.clipboard.writeText(`${base}#code=${hash}`);
+        flashControlLabel(button, "Copied");
+      } catch (error) {
+        onWarning({ severity: "warning", message: `Share link failed: ${String(error)}`, line: 0 });
+        flashControlLabel(button, "Failed");
+      }
+    });
+    toolbar.appendChild(button);
+  }
+  function mountFitControl(toolbar) {
+    if (!fitViewButton) return;
+    controlsFitButton = makeControlButton("Fit", "Fit all items in view and ignore camera zoom");
+    controlsFitButton.className = "markdy-control-fit";
+    controlsFitButton.setAttribute("aria-pressed", "false");
+    controlsFitButton.addEventListener("click", toggleFitView);
+    toolbar.appendChild(controlsFitButton);
+  }
+  function mountResetViewControl(toolbar) {
+    if (!resetViewButton) return;
+    const button = makeControlButton("Reset", "Reset diagram view");
+    button.className = "markdy-control-reset-view";
+    button.addEventListener("click", resetViewportTransform);
+    toolbar.appendChild(button);
+  }
+  function handleKeyDown(event) {
+    const target = event.target;
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target?.isContentEditable) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowRight":
+      case "PageDown":
+        event.preventDefault();
+        diagram.nextBeat();
+        break;
+      case "ArrowLeft":
+      case "PageUp":
+        event.preventDefault();
+        diagram.prevBeat();
+        break;
+      case " ":
+        event.preventDefault();
+        togglePlayback();
+        break;
+      case "Home":
+        event.preventDefault();
+        diagram.seek(0);
+        break;
+      default:
+    }
+  }
   function mountControls() {
     const toolbar = document.createElement("div");
     toolbar.className = "markdy-controls";
@@ -3168,53 +3417,44 @@ function createDiagram(opts) {
     for (const eventName of ["click", "dblclick", "pointerdown", "pointermove", "pointerup", "wheel"]) {
       toolbar.addEventListener(eventName, (event) => event.stopPropagation());
     }
-    controlsPlayButton = makeControlButton("Play", "Play diagram");
-    controlsPlayButton.className = "markdy-control-play";
-    controlsPlayButton.addEventListener("click", togglePlayback);
-    toolbar.appendChild(controlsPlayButton);
-    const restartButton = makeControlButton("Restart", "Restart diagram");
-    restartButton.className = "markdy-control-restart";
-    restartButton.addEventListener("click", () => {
-      diagram.seek(0);
-      diagram.play();
-    });
-    toolbar.appendChild(restartButton);
-    controlsRateButtons = [0.5, 1, 2].map((rate) => {
-      const button = makeControlButton(`${rate}x`, `Set playback speed to ${rate}x`);
-      button.className = "markdy-control-rate";
-      button.dataset.rate = String(rate);
-      button.setAttribute("aria-pressed", "false");
-      button.addEventListener("click", () => diagram.setPlaybackRate(rate));
-      toolbar.appendChild(button);
-      return button;
-    });
-    if (interactiveViewport) {
-      const resetButton = makeControlButton("Reset", "Reset diagram view");
-      resetButton.className = "markdy-control-reset-view";
-      resetButton.addEventListener("click", resetViewportTransform);
-      toolbar.appendChild(resetButton);
-    }
+    mountPlayControl(toolbar);
+    mountBeatNavControls(toolbar, "prev");
+    mountBeatNavControls(toolbar, "next");
+    mountRestartControl(toolbar);
+    mountSeekControl(toolbar);
+    mountSpeedControls(toolbar);
+    mountFitControl(toolbar);
+    mountResetViewControl(toolbar);
+    mountSvgControl(toolbar);
+    mountShareControl(toolbar);
     ensureFooter().insertBefore(toolbar, badge ?? null);
     syncControls();
   }
   viewport.style.cursor = interactiveViewport ? "grab" : "pointer";
   if (interactiveViewport) {
     viewport.style.touchAction = "none";
-    viewport.addEventListener("wheel", handleViewportWheel, { passive: false });
-    viewport.addEventListener("pointerdown", handleViewportPointerDown);
-    viewport.addEventListener("pointermove", handleViewportPointerMove);
-    viewport.addEventListener("pointerup", handleViewportPointerEnd);
-    viewport.addEventListener("pointercancel", handleViewportPointerEnd);
-    viewport.addEventListener("dblclick", handleViewportDoubleClick);
-  }
-  if (controls) mountControls();
-  viewport.addEventListener("click", () => {
-    if (suppressNextClick) {
-      suppressNextClick = false;
-      return;
-    }
-    togglePlayback();
-  });
+    if (allowZoom) viewport.addEventListener("wheel", handleViewportWheel, { passive: false });
+    if (allowPan) {
+      viewport.addEventListener("pointerdown", handleViewportPointerDown);
+      viewport.addEventListener("pointermove", handleViewportPointerMove);
+      viewport.addEventListener("pointerup", handleViewportPointerEnd);
+      viewport.addEventListener("pointercancel", handleViewportPointerEnd);
+    }
+    if (doubleClickToReset) viewport.addEventListener("dblclick", handleViewportDoubleClick);
+  }
+  if (showControls) mountControls();
+  if (clickToPlay) {
+    viewport.addEventListener("click", () => {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
+      togglePlayback();
+    });
+  }
+  if (keyboardShortcuts && typeof window !== "undefined") {
+    window.addEventListener("keydown", handleKeyDown);
+  }
   if (autoplay) diagram.play();
   return diagram;
 }
@@ -3410,100 +3650,6 @@ function encodeGifSequence(frames, options = {}) {
   return new Uint8Array(buffer);
 }
 
-// src/export/svg-exporter.ts
-function copyRenderedStyles(source, clone) {
-  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return;
-  const sourceElements = [source, ...Array.from(source.querySelectorAll("*"))];
-  const cloneElements = [clone, ...Array.from(clone.querySelectorAll("*"))];
-  for (let index = 0; index < Math.min(sourceElements.length, cloneElements.length); index++) {
-    const computed = window.getComputedStyle(sourceElements[index]);
-    const target = cloneElements[index].style;
-    for (let propertyIndex = 0; propertyIndex < computed.length; propertyIndex++) {
-      const property = computed.item(propertyIndex);
-      target.setProperty(property, computed.getPropertyValue(property), computed.getPropertyPriority(property));
-    }
-  }
-}
-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");
-  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);
-  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.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");
-  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");
-    let combinedStyles = `
-      foreignObject { width: 100%; height: 100%; }
-      .markdy-node { transition: opacity 0.3s ease; }
-    `;
-    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(svg);
-}
-
 // src/export/inline-resources.ts
 var TRANSPARENT_PIXEL_DATA_URI = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
 var RESOURCE_FETCH_TIMEOUT_MS = 3e3;

package/dist/svg-exporter-7FW6RIP6.js

@@ -0,0 +1,10 @@
+import {
+  exportDiagramAsVectorSvg,
+  getDiagramSceneElement,
+  prepareHtmlSceneForExport
+} from "./chunk-VIZHA7GI.js";
+export {
+  exportDiagramAsVectorSvg,
+  getDiagramSceneElement,
+  prepareHtmlSceneForExport
+};

package/package.json

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