@markdy/renderer-dom 1.0.29 → 1.0.30

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BeatRange, ThemeTokens, Diagnostic, RenderPlan } from '@markdy/core';
+import { BeatRange, ThemeTokens, PlayerControlsConfig, Diagnostic, RenderPlan } from '@markdy/core';
 
 /**
  * Markdy diagram runtime — renders a RenderPlan via WAAPI.
@@ -30,8 +30,10 @@ interface DiagramOptions {
     interactiveViewport?: boolean;
     /** Base URL for the Share control. Defaults to the Markdy playground. */
     shareUrl?: string;
-    /** Host controls override. `true` enables the legacy default set; `false` suppresses script controls. */
-    controls?: boolean;
+    /** Host controls override. `true` enables the legacy default set; `false` suppresses script controls; or pass a granular controls configuration object. */
+    controls?: boolean | (PlayerControlsConfig & {
+        playback?: boolean;
+    });
     onWarning?: (warning: Diagnostic) => void;
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;
     onPlayStateChange?: (playing: boolean) => void;

package/dist/index.js

@@ -1,9 +1,3 @@
-import {
-  exportDiagramAsVectorSvg,
-  getDiagramSceneElement,
-  prepareHtmlSceneForExport
-} from "./chunk-VIZHA7GI.js";
-
 // src/diagram.ts
 import {
   compressMarkdyToUrlHash,
@@ -1491,6 +1485,159 @@ function mountConstellationLayer(layer, nodes, theme, bounds) {
   }
 }
 
+// src/quadrant.ts
+function mountQuadrantLayer(layer, nodes, theme, bounds) {
+  if (nodes.length === 0) return;
+  const doc = layer.ownerDocument;
+  Object.assign(layer.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "38",
+    pointerEvents: "none"
+  });
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  });
+  layer.appendChild(svg);
+  const SAFE = 40;
+  const TITLE_BAND = 64;
+  const contentW = bounds.width - SAFE * 2;
+  const contentH = bounds.height - SAFE - TITLE_BAND - SAFE;
+  const centerX = SAFE + contentW / 2;
+  const centerY = TITLE_BAND + contentH / 2;
+  const stroke = theme?.edges?.dependency ?? theme?.rule ?? theme?.border ?? "#64748b";
+  const vAxis = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+  vAxis.classList.add("markdy-quadrant-vaxis");
+  vAxis.setAttribute("x1", String(centerX));
+  vAxis.setAttribute("y1", String(TITLE_BAND + 16));
+  vAxis.setAttribute("x2", String(centerX));
+  vAxis.setAttribute("y2", String(bounds.height - SAFE - 16));
+  vAxis.setAttribute("stroke", stroke);
+  vAxis.setAttribute("stroke-width", "1.5");
+  vAxis.setAttribute("stroke-dasharray", "5 5");
+  vAxis.setAttribute("opacity", "0.65");
+  svg.appendChild(vAxis);
+  const hAxis = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+  hAxis.classList.add("markdy-quadrant-haxis");
+  hAxis.setAttribute("x1", String(SAFE + 16));
+  hAxis.setAttribute("y1", String(centerY));
+  hAxis.setAttribute("x2", String(bounds.width - SAFE - 16));
+  hAxis.setAttribute("y2", String(centerY));
+  hAxis.setAttribute("stroke", stroke);
+  hAxis.setAttribute("stroke-width", "1.5");
+  hAxis.setAttribute("stroke-dasharray", "5 5");
+  hAxis.setAttribute("opacity", "0.65");
+  svg.appendChild(hAxis);
+  const hub = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+  hub.classList.add("markdy-quadrant-hub");
+  hub.setAttribute("cx", String(centerX));
+  hub.setAttribute("cy", String(centerY));
+  hub.setAttribute("r", "4");
+  hub.setAttribute("fill", stroke);
+  hub.setAttribute("opacity", "0.75");
+  svg.appendChild(hub);
+}
+
+// src/swimlane.ts
+function mountSwimlaneLayer(layer, nodes, theme, bounds) {
+  if (nodes.length === 0) return;
+  const doc = layer.ownerDocument;
+  Object.assign(layer.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "38",
+    pointerEvents: "none"
+  });
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  });
+  layer.appendChild(svg);
+  const SAFE = 40;
+  const TITLE_BAND = 64;
+  const contentH = bounds.height - SAFE - TITLE_BAND - SAFE;
+  const nodeYs = [...new Set(nodes.map((n) => Math.round(n.y)))].sort((a, b) => a - b);
+  const laneCount = Math.max(nodeYs.length, 1);
+  const laneHeight = contentH / laneCount;
+  const stroke = theme?.edges?.dependency ?? theme?.rule ?? theme?.border ?? "#64748b";
+  for (let idx = 0; idx <= laneCount; idx++) {
+    const y = TITLE_BAND + idx * laneHeight;
+    const line = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.classList.add("markdy-swimlane-divider");
+    line.setAttribute("x1", String(SAFE));
+    line.setAttribute("y1", String(y));
+    line.setAttribute("x2", String(bounds.width - SAFE));
+    line.setAttribute("y2", String(y));
+    line.setAttribute("stroke", stroke);
+    line.setAttribute("stroke-width", "1.2");
+    line.setAttribute("stroke-dasharray", idx === 0 || idx === laneCount ? "none" : "5 5");
+    line.setAttribute("opacity", idx === 0 || idx === laneCount ? "0.6" : "0.4");
+    svg.appendChild(line);
+  }
+}
+
+// src/gantt.ts
+function mountGanttLayer(layer, nodes, theme, bounds) {
+  if (nodes.length === 0) return;
+  const doc = layer.ownerDocument;
+  Object.assign(layer.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "38",
+    pointerEvents: "none"
+  });
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  });
+  layer.appendChild(svg);
+  const SAFE = 40;
+  const TITLE_BAND = 64;
+  const contentW = bounds.width - SAFE * 2;
+  const stroke = theme?.edges?.dependency ?? theme?.rule ?? theme?.border ?? "#64748b";
+  const totalPhases = Math.max(
+    ...nodes.map((n) => {
+      const p = typeof n.props?.phase === "number" ? n.props.phase : 0;
+      const s = typeof n.props?.span === "number" ? n.props.span : 1;
+      return p + s;
+    }),
+    4
+  );
+  const minY = Math.min(...nodes.map((n) => n.y)) - 16;
+  const maxY = Math.max(...nodes.map((n) => n.y + n.height)) + 16;
+  const unitW = contentW / totalPhases;
+  for (let phase = 0; phase <= totalPhases; phase++) {
+    const x = SAFE + phase * unitW;
+    const colLine = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+    colLine.classList.add("markdy-gantt-column");
+    colLine.setAttribute("x1", String(x));
+    colLine.setAttribute("y1", String(Math.max(TITLE_BAND, minY)));
+    colLine.setAttribute("x2", String(x));
+    colLine.setAttribute("y2", String(Math.min(bounds.height - SAFE, maxY)));
+    colLine.setAttribute("stroke", stroke);
+    colLine.setAttribute("stroke-width", "1");
+    colLine.setAttribute("stroke-dasharray", "4 4");
+    colLine.setAttribute("opacity", phase === 0 || phase === totalPhases ? "0.6" : "0.35");
+    svg.appendChild(colLine);
+  }
+}
+
 // src/radar.ts
 function mountRadarLayer(layer, nodes, theme, bounds) {
   if (nodes.length < 3) return;
@@ -1511,14 +1658,18 @@ function mountRadarLayer(layer, nodes, theme, bounds) {
     overflow: "visible"
   });
   layer.appendChild(svg);
-  const centerX = bounds.width / 2;
-  const centerY = (bounds.height + 40) / 2;
+  const SAFE = 40;
+  const TITLE_BAND = 64;
+  const contentW = bounds.width - SAFE * 2;
+  const contentH = bounds.height - SAFE - TITLE_BAND - SAFE;
+  const centerX = SAFE + contentW / 2;
+  const centerY = TITLE_BAND + contentH / 2;
   const nodeCenters = nodes.map((n) => ({
     x: n.x + n.width / 2,
     y: n.y + n.height / 2
   }));
-  const strokeBorder = theme?.border ?? "#cbd5e1";
-  const strokeHairline = theme?.hairline ?? theme?.border ?? "#e2e8f0";
+  const strokeAxis = theme?.edges?.dependency ?? theme?.rule ?? theme?.border ?? "#64748b";
+  const strokeRing = theme?.rule ?? theme?.edges?.dependency ?? theme?.border ?? "#64748b";
   const accentColor = theme?.accent ?? "#38bdf8";
   for (const nc of nodeCenters) {
     const line = doc.createElementNS("http://www.w3.org/2000/svg", "line");
@@ -1526,10 +1677,10 @@ function mountRadarLayer(layer, nodes, theme, bounds) {
     line.setAttribute("y1", String(centerY));
     line.setAttribute("x2", String(nc.x));
     line.setAttribute("y2", String(nc.y));
-    line.setAttribute("stroke", strokeBorder);
-    line.setAttribute("stroke-width", "1");
+    line.setAttribute("stroke", strokeAxis);
+    line.setAttribute("stroke-width", "1.2");
     line.setAttribute("stroke-dasharray", "4 4");
-    line.setAttribute("opacity", "0.45");
+    line.setAttribute("opacity", "0.6");
     svg.appendChild(line);
   }
   const fractions = [0.33, 0.66, 1];
@@ -1542,12 +1693,19 @@ function mountRadarLayer(layer, nodes, theme, bounds) {
     const poly = doc.createElementNS("http://www.w3.org/2000/svg", "polygon");
     poly.setAttribute("points", points);
     poly.setAttribute("fill", "none");
-    poly.setAttribute("stroke", strokeHairline);
-    poly.setAttribute("stroke-width", "1");
-    poly.setAttribute("stroke-dasharray", f === 1 ? "none" : "3 3");
-    poly.setAttribute("opacity", String(0.3 + f * 0.25));
+    poly.setAttribute("stroke", strokeRing);
+    poly.setAttribute("stroke-width", f === 1 ? "1.5" : "1.2");
+    poly.setAttribute("stroke-dasharray", f === 1 ? "none" : "4 4");
+    poly.setAttribute("opacity", String(0.4 + f * 0.3));
     svg.appendChild(poly);
   }
+  const centerDot = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+  centerDot.setAttribute("cx", String(centerX));
+  centerDot.setAttribute("cy", String(centerY));
+  centerDot.setAttribute("r", "3");
+  centerDot.setAttribute("fill", strokeAxis);
+  centerDot.setAttribute("opacity", "0.8");
+  svg.appendChild(centerDot);
   const areaPoints = nodeCenters.map((nc, idx) => {
     const f = 0.75 + idx % 3 * 0.12;
     const px = centerX + (nc.x - centerX) * f;
@@ -1561,7 +1719,7 @@ function mountRadarLayer(layer, nodes, theme, bounds) {
   area.setAttribute("stroke", accentColor);
   area.setAttribute("stroke-width", "1.5");
   area.setAttribute("stroke-dasharray", "4 4");
-  area.setAttribute("opacity", "0.6");
+  area.setAttribute("opacity", "0.7");
   svg.appendChild(area);
 }
 
@@ -1585,11 +1743,14 @@ function mountTimelineLayer(layer, nodes, theme, bounds) {
     overflow: "visible"
   });
   layer.appendChild(svg);
-  const baselineY = (bounds.height + 40) / 2;
+  const SAFE = 40;
+  const TITLE_BAND = 64;
+  const contentH = bounds.height - SAFE - TITLE_BAND - SAFE;
+  const baselineY = TITLE_BAND + contentH / 2;
   const minX = Math.min(...nodes.map((n) => n.x)) - 20;
   const maxX = Math.max(...nodes.map((n) => n.x + n.width)) + 20;
-  const strokeAxis = theme?.hairline ?? theme?.border ?? "#cbd5e1";
-  const strokeBorder = theme?.border ?? "#cbd5e1";
+  const strokeAxis = theme?.edges?.dependency ?? theme?.rule ?? theme?.border ?? "#64748b";
+  const strokeBorder = theme?.edges?.dependency ?? theme?.border ?? "#64748b";
   const accentColor = theme?.accent ?? "#38bdf8";
   const surfaceFill = theme?.surfaceRaised ?? theme?.surface ?? "#ffffff";
   const axis = doc.createElementNS("http://www.w3.org/2000/svg", "line");
@@ -1599,7 +1760,8 @@ function mountTimelineLayer(layer, nodes, theme, bounds) {
   axis.setAttribute("y2", String(baselineY));
   axis.setAttribute("stroke", strokeAxis);
   axis.setAttribute("stroke-width", "2");
-  axis.setAttribute("opacity", "0.6");
+  axis.setAttribute("stroke-linecap", "round");
+  axis.setAttribute("opacity", "0.75");
   svg.appendChild(axis);
   for (const node of nodes) {
     const nodeCenterX = node.x + node.width / 2;
@@ -1611,17 +1773,17 @@ function mountTimelineLayer(layer, nodes, theme, bounds) {
     stem.setAttribute("x2", String(nodeCenterX));
     stem.setAttribute("y2", String(targetY));
     stem.setAttribute("stroke", node.focal ? accentColor : strokeBorder);
-    stem.setAttribute("stroke-width", node.focal ? "1.5" : "1");
-    stem.setAttribute("stroke-dasharray", node.focal ? "none" : "3 3");
-    stem.setAttribute("opacity", node.focal ? "0.9" : "0.5");
+    stem.setAttribute("stroke-width", node.focal ? "2" : "1.5");
+    stem.setAttribute("stroke-dasharray", node.focal ? "none" : "4 4");
+    stem.setAttribute("opacity", node.focal ? "0.95" : "0.75");
     svg.appendChild(stem);
     const pip = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
     pip.setAttribute("cx", String(nodeCenterX));
     pip.setAttribute("cy", String(baselineY));
-    pip.setAttribute("r", node.focal ? "5" : "3.5");
+    pip.setAttribute("r", node.focal ? "5.5" : "4");
     pip.setAttribute("fill", node.focal ? accentColor : surfaceFill);
     pip.setAttribute("stroke", node.focal ? accentColor : strokeBorder);
-    pip.setAttribute("stroke-width", "1.5");
+    pip.setAttribute("stroke-width", "2");
     svg.appendChild(pip);
   }
 }
@@ -1676,7 +1838,7 @@ function createGroupBoundaryEl(boundary, theme, doc = document) {
   el.style.top = `${boundary.y}px`;
   el.style.width = `${boundary.width}px`;
   el.style.height = `${boundary.height}px`;
-  el.style.setProperty("--md-group-border", theme.hairline ?? theme.border);
+  el.style.setProperty("--md-group-border", theme.border ?? theme.rule ?? "#cbd5e1");
   const displayLabel = boundary.label || boundary.id;
   if (displayLabel) {
     const label = doc.createElement("div");
@@ -2439,6 +2601,9 @@ function createText(doc, x, y, text, theme) {
   label.textContent = text;
   return label;
 }
+function resolveLifelineStroke(theme) {
+  return theme.edges?.dependency ?? theme.rule ?? theme.border ?? "#64748b";
+}
 function mountSequenceLayer(layer, nodes, messages, activations, theme, bounds) {
   Object.assign(layer.style, {
     position: "absolute",
@@ -2470,19 +2635,28 @@ function mountSequenceLayer(layer, nodes, messages, activations, theme, bounds)
     const node = nodeById.get(id);
     return node ? node.x + node.width / 2 : 0;
   };
+  const lifelineStroke = resolveLifelineStroke(theme);
   for (const node of nodes) {
     const x = centerX(node.id);
     const lifeline = doc.createElementNS("http://www.w3.org/2000/svg", "line");
     lifeline.classList.add("markdy-sequence-lifeline");
     lifeline.setAttribute("x1", String(x));
     lifeline.setAttribute("x2", String(x));
-    lifeline.setAttribute("y1", String(node.y + node.height + 8));
-    lifeline.setAttribute("y2", String(bounds.height - 32));
-    lifeline.setAttribute("stroke", theme.hairline ?? theme.border);
-    lifeline.setAttribute("stroke-width", "1.2");
-    lifeline.setAttribute("stroke-dasharray", "4 6");
+    lifeline.setAttribute("y1", String(node.y + node.height));
+    lifeline.setAttribute("y2", String(bounds.height - 36));
+    lifeline.setAttribute("stroke", lifelineStroke);
+    lifeline.setAttribute("stroke-width", "1.5");
+    lifeline.setAttribute("stroke-dasharray", "5 5");
     lifeline.setAttribute("opacity", "0.85");
     svg.appendChild(lifeline);
+    const cap = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+    cap.classList.add("markdy-sequence-lifeline-cap");
+    cap.setAttribute("cx", String(x));
+    cap.setAttribute("cy", String(bounds.height - 36));
+    cap.setAttribute("r", "2.5");
+    cap.setAttribute("fill", lifelineStroke);
+    cap.setAttribute("opacity", "0.85");
+    svg.appendChild(cap);
   }
   for (const activation of activations) {
     const x = centerX(activation.participant);
@@ -2589,8 +2763,12 @@ function updateSequenceLayerTheme(layer, theme) {
       }
     });
   }
+  const lifelineStroke = resolveLifelineStroke(theme);
   Array.from(svg.querySelectorAll(".markdy-sequence-lifeline")).forEach((line) => {
-    line.setAttribute("stroke", theme.hairline ?? theme.border);
+    line.setAttribute("stroke", lifelineStroke);
+  });
+  Array.from(svg.querySelectorAll(".markdy-sequence-lifeline-cap")).forEach((cap) => {
+    cap.setAttribute("fill", lifelineStroke);
   });
   Array.from(svg.querySelectorAll(".markdy-sequence-activation")).forEach((bar) => {
     bar.setAttribute("fill", theme.accent);
@@ -2636,7 +2814,7 @@ function mountTreeBuses(layer, buses, theme) {
     overflow: "visible"
   });
   layer.appendChild(svg);
-  const stroke = theme.rule ?? theme.hairline ?? theme.border;
+  const stroke = theme.edges?.dependency ?? theme.rule ?? theme.border ?? "#64748b";
   for (const bus of buses) {
     const group = doc.createElementNS("http://www.w3.org/2000/svg", "g");
     group.setAttribute("data-tree-bus", bus.id);
@@ -2816,6 +2994,14 @@ function ensureSceneStyles(doc) {
   box-sizing: border-box;
   width: 100%;
 }
+.markdy-viewport {
+  position: relative;
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  box-sizing: border-box;
+}
 .markdy-footer {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   position: relative;
@@ -2825,13 +3011,15 @@ function ensureSceneStyles(doc) {
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  padding: 8px 12px 4px;
+  padding: 8px 12px 6px;
   color: var(--md-text, #f8fafc);
   background: transparent;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
   border-top: none;
   z-index: 100;
+  pointer-events: auto;
+  flex-shrink: 0;
 }
 .markdy-controls {
   display: flex;
@@ -2843,9 +3031,15 @@ function ensureSceneStyles(doc) {
   gap: 8px;
   max-width: 100%;
   overflow-x: auto;
+  overflow-y: visible;
   scrollbar-width: none;
-  padding: 4px 2px;
-  margin: -4px -2px;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+  padding: 4px 4px 6px;
+  margin: 0;
+  position: relative;
+  z-index: 10;
+  pointer-events: auto;
 }
 .markdy-controls::-webkit-scrollbar {
   display: none;
@@ -2855,6 +3049,9 @@ function ensureSceneStyles(doc) {
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
+  position: relative;
+  z-index: 5;
+  pointer-events: auto;
 }
 .markdy-controls-playback {
   display: inline-flex;
@@ -2875,6 +3072,9 @@ function ensureSceneStyles(doc) {
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
+  position: relative;
+  z-index: 5;
+  pointer-events: auto;
 }
 .markdy-control-divider {
   width: 1px;
@@ -2905,19 +3105,27 @@ function ensureSceneStyles(doc) {
   white-space: nowrap;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
   transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  pointer-events: auto;
+  isolation: isolate;
 }
 .markdy-controls button:hover:not([aria-pressed="true"]) {
   position: relative;
-  z-index: 2;
+  z-index: 20;
   background: var(--md-control-hover-bg, rgba(255, 255, 255, 0.1));
   color: var(--md-control-hover-text, #f8fafc);
   border-color: var(--md-control-hover-border, rgba(148, 163, 184, 0.35));
   transform: translateY(-1px);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14);
+}
+.markdy-controls-tools button:hover:not([aria-pressed="true"]) {
+  z-index: 25;
+  border-color: var(--md-control-hover-border, rgba(148, 163, 184, 0.45));
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
 }
 .markdy-controls button[aria-pressed="true"] {
   position: relative;
-  z-index: 2;
+  z-index: 20;
   background: var(--accent, #10b981) !important;
   color: #ffffff !important;
   border-color: var(--accent, #10b981) !important;
@@ -2925,12 +3133,12 @@ function ensureSceneStyles(doc) {
 }
 .markdy-controls button:focus-visible {
   position: relative;
-  z-index: 3;
+  z-index: 30;
   outline: 2px solid var(--accent, #10b981);
-  outline-offset: 1px;
+  outline-offset: 2px;
 }
 .markdy-controls button:active {
-  transform: scale(0.95);
+  transform: translateY(0) scale(0.96);
 }
 .markdy-icon {
   display: inline-block;
@@ -3264,6 +3472,7 @@ function ensureSceneStyles(doc) {
   background: var(--md-control-hover-bg, rgba(51, 65, 85, 0.95));
   color: var(--md-control-hover-text, #f8fafc);
   border-color: var(--md-control-hover-border, #94a3b8);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
 }
 [data-markdy-theme="midnight"] .markdy-controls button[aria-pressed="true"],
 [data-markdy-theme="blueprint"] .markdy-controls button[aria-pressed="true"],
@@ -3336,6 +3545,24 @@ function ensureSceneStyles(doc) {
   margin: 0 auto !important;
   padding: 8px 12px 4px !important;
 }
+@media (hover: none) and (pointer: coarse) {
+  .markdy-controls {
+    gap: 6px;
+    padding: 6px 4px 8px;
+  }
+  .markdy-controls button {
+    height: 32px;
+    min-width: 32px;
+    padding: 0 8px;
+    font-size: 12px;
+  }
+  .markdy-speed-group .markdy-control-rate {
+    height: 26px;
+    min-width: 28px;
+    font-size: 11px;
+    padding: 0 6px;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .markdy-node,
   .markdy-beat-caption,
@@ -3411,6 +3638,100 @@ function applyThemeToScene(scene, theme) {
   scene.style.color = theme.text;
 }
 
+// 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/diagram.ts
 var NORMAL_PLAYBACK_RATE = 4 / 5;
 var MIN_VIEWPORT_ZOOM = 0.5;
@@ -3531,6 +3852,7 @@ function createDiagram(opts) {
   const totalDurationMs = plan.duration * 1e3;
   const durationSeconds = plan.duration;
   container.classList.add("markdy-diagram-root");
+  applyThemeVariables(container, plan.theme);
   Object.assign(container.style, {
     position: "relative",
     display: "flex",
@@ -3545,12 +3867,13 @@ function createDiagram(opts) {
   Object.assign(viewport.style, {
     position: "relative",
     width: "100%",
-    height: "100%",
     maxWidth: "100%",
     maxHeight: "100%",
     aspectRatio: `${plan.meta.width} / ${plan.meta.height}`,
     overflow: "hidden",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    flex: "1 1 auto",
+    minHeight: "0"
   });
   container.appendChild(viewport);
   let progressEl = null;
@@ -3601,9 +3924,26 @@ function createDiagram(opts) {
       gap: "6px",
       width: "100%",
       boxSizing: "border-box",
-      padding: "6px 8px 2px",
-      background: "transparent"
+      padding: "6px 8px 4px",
+      background: "transparent",
+      pointerEvents: "auto",
+      flexShrink: "0"
     });
+    for (const eventName of [
+      "click",
+      "dblclick",
+      "pointerdown",
+      "pointermove",
+      "pointerup",
+      "pointercancel",
+      "wheel",
+      "mousedown",
+      "mouseup",
+      "touchstart",
+      "touchend"
+    ]) {
+      footer.addEventListener(eventName, (event) => event.stopPropagation());
+    }
     container.appendChild(footer);
     return footer;
   }
@@ -3693,6 +4033,27 @@ function createDiagram(opts) {
       plan.theme,
       { width: plan.meta.width, height: plan.meta.height }
     );
+  } else if (plan.diagramType === "quadrant") {
+    mountQuadrantLayer(
+      constellationLayer,
+      plan.nodes,
+      plan.theme,
+      { width: plan.meta.width, height: plan.meta.height }
+    );
+  } else if (plan.diagramType === "swimlane") {
+    mountSwimlaneLayer(
+      constellationLayer,
+      plan.nodes,
+      plan.theme,
+      { width: plan.meta.width, height: plan.meta.height }
+    );
+  } else if (plan.diagramType === "gantt") {
+    mountGanttLayer(
+      constellationLayer,
+      plan.nodes,
+      plan.theme,
+      { width: plan.meta.width, height: plan.meta.height }
+    );
   }
   const groupLayer = document.createElement("div");
   groupLayer.className = "markdy-group-layer";
@@ -4024,6 +4385,7 @@ function createDiagram(opts) {
       sceneMs = totalDurationMs > 0 ? Math.min(Math.max(seconds * 1e3, 0), totalDurationMs) : Math.max(seconds * 1e3, 0);
       applyCurrentTime();
       if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
+      syncControls();
     },
     setPlaybackRate(rate) {
       if (!Number.isFinite(rate) || rate <= 0) return;
@@ -4064,6 +4426,7 @@ function createDiagram(opts) {
     setTheme(theme) {
       const newTheme = typeof theme === "string" ? resolveTheme(theme) : theme;
       plan.theme = newTheme;
+      applyThemeVariables(container, newTheme);
       applyThemeToScene(scene, newTheme);
       if (footer) {
         applyThemeVariables(footer, newTheme);
@@ -4098,7 +4461,7 @@ function createDiagram(opts) {
         treeLayer.replaceChildren();
         mountTreeBuses(treeLayer, plan.treeBuses, newTheme);
       }
-      if (plan.diagramType === "constellation" || plan.diagramType === "radar" || plan.diagramType === "timeline") {
+      if (plan.diagramType === "constellation" || plan.diagramType === "radar" || plan.diagramType === "timeline" || plan.diagramType === "quadrant" || plan.diagramType === "swimlane" || plan.diagramType === "gantt") {
         constellationLayer.replaceChildren();
         if (plan.diagramType === "constellation") {
           mountConstellationLayer(
@@ -4121,6 +4484,27 @@ function createDiagram(opts) {
             newTheme,
             { width: plan.meta.width, height: plan.meta.height }
           );
+        } else if (plan.diagramType === "quadrant") {
+          mountQuadrantLayer(
+            constellationLayer,
+            plan.nodes,
+            newTheme,
+            { width: plan.meta.width, height: plan.meta.height }
+          );
+        } else if (plan.diagramType === "swimlane") {
+          mountSwimlaneLayer(
+            constellationLayer,
+            plan.nodes,
+            newTheme,
+            { width: plan.meta.width, height: plan.meta.height }
+          );
+        } else if (plan.diagramType === "gantt") {
+          mountGanttLayer(
+            constellationLayer,
+            plan.nodes,
+            newTheme,
+            { width: plan.meta.width, height: plan.meta.height }
+          );
         }
       }
       if (plan.diagramType === "sequence") {
@@ -4233,12 +4617,14 @@ function createDiagram(opts) {
     });
   }
   function flashControlLabel(button, message) {
-    const originalHtml = button.innerHTML;
+    const originalHtml = button.dataset.originalHtml ?? button.innerHTML;
+    button.dataset.originalHtml = originalHtml;
     const isSuccess = !message.toLowerCase().includes("fail");
     button.innerHTML = isSuccess ? `${ICONS2.check}${message}` : message;
     button.classList.add("markdy-btn-flashed");
     setTimeout(() => {
-      button.innerHTML = originalHtml;
+      button.innerHTML = button.dataset.originalHtml ?? originalHtml;
+      delete button.dataset.originalHtml;
       button.classList.remove("markdy-btn-flashed");
     }, 1500);
   }
@@ -4258,14 +4644,13 @@ function createDiagram(opts) {
     if (!svgButton) return;
     const button = makeControlButton("SVG", "Export diagram as SVG", ICONS2.svg);
     button.className = "markdy-control-svg";
-    button.addEventListener("click", async () => {
+    button.addEventListener("click", () => {
       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 svg = exportDiagramAsVectorSvg(container);
         const name = (plan.title || "markdy-diagram").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
         downloadFile(`${name || "markdy-diagram"}.svg`, svg, "image/svg+xml");
         flashControlLabel(button, "Saved");
@@ -4355,8 +4740,11 @@ function createDiagram(opts) {
     const button = makeControlButton("Code", "View MarkdyScript source");
     button.className = "markdy-control-code";
     button.setAttribute("aria-haspopup", "dialog");
+    button.setAttribute("aria-expanded", "false");
     button.addEventListener("click", () => {
       closeCodePanel?.();
+      const previousActiveElement = document.activeElement;
+      button.setAttribute("aria-expanded", "true");
       const overlay = document.createElement("div");
       overlay.className = "markdy-code-panel-overlay";
       overlay.setAttribute("role", "dialog");
@@ -4414,19 +4802,36 @@ function createDiagram(opts) {
       overlay.appendChild(panel);
       const mountHost = document.fullscreenElement ?? document.body;
       mountHost.appendChild(overlay);
+      const prevOverflow = typeof document !== "undefined" ? document.body.style.overflow : "";
+      if (typeof document !== "undefined" && !document.fullscreenElement) {
+        document.body.style.overflow = "hidden";
+      }
       closeBtn.focus();
       let closing = false;
       function removePanel() {
         document.removeEventListener("keydown", handleEscape);
+        if (typeof document !== "undefined" && !document.fullscreenElement) {
+          document.body.style.overflow = prevOverflow;
+        }
+        button.setAttribute("aria-expanded", "false");
         overlay.remove();
+        previousActiveElement?.focus?.();
         if (closeCodePanel === removePanel) closeCodePanel = null;
       }
       function closePanel() {
         if (closing) return;
         closing = true;
+        button.setAttribute("aria-expanded", "false");
         overlay.dataset.closing = "1";
         document.removeEventListener("keydown", handleEscape);
-        overlay.addEventListener("animationend", removePanel, { once: true });
+        let cleaned = false;
+        const doClean = () => {
+          if (cleaned) return;
+          cleaned = true;
+          removePanel();
+        };
+        overlay.addEventListener("animationend", doClean, { once: true });
+        setTimeout(doClean, 200);
       }
       closeBtn.addEventListener("click", closePanel);
       overlay.addEventListener("click", (e) => {
@@ -4584,21 +4989,33 @@ function createDiagram(opts) {
     toolbar.setAttribute("role", "toolbar");
     toolbar.setAttribute("aria-label", "Diagram controls");
     Object.assign(toolbar.style, {
-      position: "static",
+      position: "relative",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
       maxWidth: "100%",
-      padding: "0",
       border: "0",
       borderRadius: "0",
       background: "transparent",
       boxShadow: "none",
       backdropFilter: "none",
       transform: "none",
-      pointerEvents: "auto"
+      pointerEvents: "auto",
+      zIndex: "10"
     });
-    for (const eventName of ["click", "dblclick", "pointerdown", "pointermove", "pointerup", "wheel"]) {
+    for (const eventName of [
+      "click",
+      "dblclick",
+      "pointerdown",
+      "pointermove",
+      "pointerup",
+      "pointercancel",
+      "wheel",
+      "mousedown",
+      "mouseup",
+      "touchstart",
+      "touchend"
+    ]) {
       toolbar.addEventListener(eventName, (event) => event.stopPropagation());
     }
     const playbackGroup = document.createElement("div");

package/package.json

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

package/dist/chunk-VIZHA7GI.js

@@ -1,99 +0,0 @@
-// 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/svg-exporter-7FW6RIP6.js

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