@markdy/renderer-dom 1.0.19 → 1.0.20

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BeatRange, Diagnostic, RenderPlan } from '@markdy/core';
+import { BeatRange, ThemeTokens, Diagnostic, RenderPlan } from '@markdy/core';
 
 /**
  * Markdy diagram runtime — renders a RenderPlan via WAAPI.
@@ -50,6 +50,7 @@ interface Diagram {
     seekToBeat(name: string): void;
     nextBeat(): void;
     prevBeat(): void;
+    setTheme(theme: string | ThemeTokens): void;
     destroy(): void;
 }
 declare function createDiagram(opts: DiagramOptions): Diagram;

package/dist/index.js

@@ -8,7 +8,8 @@ import {
 import {
   compressMarkdyToUrlHash,
   parseAndCompile,
-  resolvePlayer
+  resolvePlayer,
+  resolveTheme
 } from "@markdy/core";
 
 // src/geometry/rect.ts
@@ -316,10 +317,112 @@ function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
   const targetCenter = rectCenter(targetRect);
   const dx = targetCenter.x - sourceCenter.x;
   const dy = targetCenter.y - sourceCenter.y;
+  const isDominantVertical = Math.abs(dy) >= Math.abs(dx);
   const stubLen = 18;
   const allObstacles = obstacles;
   const candidates = [];
-  if (dx >= 30) {
+  if (dy >= 20) {
+    let sX = sourceCenter.x;
+    let tX = targetCenter.x;
+    if (dx > 16) {
+      sX = clamp(sourceCenter.x + (lane > 0 ? Math.abs(laneShift) : 6), sourceRect.x1 + 14, sourceRect.x2 - 14);
+      tX = clamp(targetCenter.x - (lane > 0 ? Math.abs(laneShift) : 6), targetRect.x1 + 14, targetRect.x2 - 14);
+    } else if (dx < -16) {
+      sX = clamp(sourceCenter.x - (lane > 0 ? Math.abs(laneShift) : 6), sourceRect.x1 + 14, sourceRect.x2 - 14);
+      tX = clamp(targetCenter.x + (lane > 0 ? Math.abs(laneShift) : 6), targetRect.x1 + 14, targetRect.x2 - 14);
+    } else {
+      sX = clamp(sourceCenter.x + laneShift, sourceRect.x1 + 14, sourceRect.x2 - 14);
+      tX = clamp(targetCenter.x + laneShift, targetRect.x1 + 14, targetRect.x2 - 14);
+    }
+    const sPort = { x: sX, y: sourceRect.y2 };
+    const tPort = { x: tX, y: targetRect.y1 };
+    if (Math.abs(sX - tX) < 1) {
+      candidates.push([sPort, tPort]);
+    } else {
+      const midY = round1((sPort.y + tPort.y) / 2 + laneShift);
+      candidates.push([
+        sPort,
+        { x: sPort.x, y: midY },
+        { x: tPort.x, y: midY },
+        tPort
+      ]);
+    }
+    let minObstacleX = Math.min(sourceRect.x1, targetRect.x1);
+    let maxObstacleX = Math.max(sourceRect.x2, targetRect.x2);
+    for (const o of allObstacles) {
+      if (o.y2 > sourceRect.y2 && o.y1 < targetRect.y1) {
+        minObstacleX = Math.min(minObstacleX, o.x1);
+        maxObstacleX = Math.max(maxObstacleX, o.x2);
+      }
+    }
+    const bypassXLeft = Math.max(16, minObstacleX - 24 - Math.abs(laneShift));
+    const bypassXRight = Math.min(bounds.width - 16, maxObstacleX + 24 + Math.abs(laneShift));
+    candidates.push([
+      sPort,
+      { x: sPort.x, y: sPort.y + 12 },
+      { x: bypassXLeft, y: sPort.y + 12 },
+      { x: bypassXLeft, y: tPort.y - 12 },
+      { x: tPort.x, y: tPort.y - 12 },
+      tPort
+    ]);
+    candidates.push([
+      sPort,
+      { x: sPort.x, y: sPort.y + 12 },
+      { x: bypassXRight, y: sPort.y + 12 },
+      { x: bypassXRight, y: tPort.y - 12 },
+      { x: tPort.x, y: tPort.y - 12 },
+      tPort
+    ]);
+  } else if (dy <= -20) {
+    let sX = sourceCenter.x;
+    let tX = targetCenter.x;
+    if (dx > 16) {
+      sX = clamp(sourceCenter.x + (lane > 0 ? Math.abs(laneShift) : 6), sourceRect.x1 + 14, sourceRect.x2 - 14);
+      tX = clamp(targetCenter.x - (lane > 0 ? Math.abs(laneShift) : 6), targetRect.x1 + 14, targetRect.x2 - 14);
+    } else if (dx < -16) {
+      sX = clamp(sourceCenter.x - (lane > 0 ? Math.abs(laneShift) : 6), sourceRect.x1 + 14, sourceRect.x2 - 14);
+      tX = clamp(targetCenter.x + (lane > 0 ? Math.abs(laneShift) : 6), targetRect.x1 + 14, targetRect.x2 - 14);
+    } else {
+      sX = clamp(sourceCenter.x + laneShift, sourceRect.x1 + 14, sourceRect.x2 - 14);
+      tX = clamp(targetCenter.x + laneShift, targetRect.x1 + 14, targetRect.x2 - 14);
+    }
+    const sPort = { x: sX, y: sourceRect.y1 };
+    const tPort = { x: tX, y: targetRect.y2 };
+    if (Math.abs(sX - tX) < 1) {
+      candidates.push([sPort, tPort]);
+    } else {
+      const midY = round1((sPort.y + tPort.y) / 2 + laneShift);
+      candidates.push([
+        sPort,
+        { x: sPort.x, y: midY },
+        { x: tPort.x, y: midY },
+        tPort
+      ]);
+    }
+    let minObstacleX = Math.min(sourceRect.x1, targetRect.x1);
+    let maxObstacleX = Math.max(sourceRect.x2, targetRect.x2);
+    for (const o of allObstacles) {
+      if (o.y1 < sourceRect.y2 && o.y2 > targetRect.y1) {
+        minObstacleX = Math.min(minObstacleX, o.x1);
+        maxObstacleX = Math.max(maxObstacleX, o.x2);
+      }
+    }
+    const bypassXLeft = Math.max(16, minObstacleX - 28 - Math.abs(laneShift));
+    const bypassXRight = Math.min(bounds.width - 16, maxObstacleX + 28 + Math.abs(laneShift));
+    candidates.push([
+      { x: sourceRect.x1, y: sourceCenter.y },
+      { x: bypassXLeft, y: sourceCenter.y },
+      { x: bypassXLeft, y: targetCenter.y },
+      { x: targetRect.x1, y: targetCenter.y }
+    ]);
+    candidates.push([
+      { x: sourceRect.x2, y: sourceCenter.y },
+      { x: bypassXRight, y: sourceCenter.y },
+      { x: bypassXRight, y: targetCenter.y },
+      { x: targetRect.x2, y: targetCenter.y }
+    ]);
+  }
+  if (dx >= 20) {
     let sY = sourceCenter.y;
     let tY = targetCenter.y;
     if (Math.abs(dy) > 16) {
@@ -334,15 +437,16 @@ function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
     const tPort = { x: targetRect.x1, y: tY };
     if (Math.abs(sY - tY) < 1) {
       candidates.push([sPort, tPort]);
+    } else {
+      const rawMidX = (sPort.x + tPort.x) / 2 + laneShift;
+      const midX = round1(clamp(rawMidX, sourceRect.x2 + 8, targetRect.x1 - 8));
+      candidates.push([
+        sPort,
+        { x: midX, y: sY },
+        { x: midX, y: tY },
+        tPort
+      ]);
     }
-    const rawMidX = (sPort.x + tPort.x) / 2 + laneShift;
-    const midX = round1(clamp(rawMidX, sourceRect.x2 + 8, targetRect.x1 - 8));
-    candidates.push([
-      sPort,
-      { x: midX, y: sY },
-      { x: midX, y: tY },
-      tPort
-    ]);
     let minObstacleY = Math.min(sourceRect.y1, targetRect.y1);
     for (const o of allObstacles) {
       if (o.x2 > sourceRect.x2 && o.x1 < targetRect.x1) {
@@ -356,7 +460,7 @@ function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
       { x: targetCenter.x, y: bypassYTop },
       { x: targetCenter.x, y: targetRect.y1 }
     ]);
-  } else if (dx < -30) {
+  } else if (dx <= -20) {
     const sX = clamp(sourceCenter.x + (lane > 0 ? lane % 2 === 1 ? 8 : -8 : 0), sourceRect.x1 + 16, sourceRect.x2 - 16);
     const tX = clamp(targetCenter.x + (lane > 0 ? lane % 2 === 1 ? 8 : -8 : 0), targetRect.x1 + 16, targetRect.x2 - 16);
     let minObstacleY = Math.min(sourceRect.y1, targetRect.y1);
@@ -401,23 +505,6 @@ function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
       { x: midX, y: tY },
       tPortR
     ]);
-  } else {
-    const sX = clamp(sourceCenter.x + laneShift, sourceRect.x1 + 16, sourceRect.x2 - 16);
-    const tX = clamp(targetCenter.x + laneShift, targetRect.x1 + 16, targetRect.x2 - 16);
-    const sourceDown = dy >= 0;
-    const sPort = { x: sX, y: sourceDown ? sourceRect.y2 : sourceRect.y1 };
-    const tPort = { x: tX, y: sourceDown ? targetRect.y1 : targetRect.y2 };
-    if (Math.abs(sX - tX) < 1) {
-      candidates.push([sPort, tPort]);
-    } else {
-      const midY = round1((sPort.y + tPort.y) / 2 + laneShift);
-      candidates.push([
-        sPort,
-        { x: sPort.x, y: midY },
-        { x: tPort.x, y: midY },
-        tPort
-      ]);
-    }
   }
   for (const obstacle of allObstacles) {
     const bypassYTop = Math.max(16, obstacle.y1 - 18 - Math.abs(laneShift));
@@ -443,6 +530,12 @@ function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
       tP
     ]);
   }
+  if (candidates.length === 0) {
+    candidates.push([
+      { x: sourceCenter.x, y: sourceCenter.y },
+      { x: targetCenter.x, y: targetCenter.y }
+    ]);
+  }
   let best = candidates[0];
   let bestScore = Number.POSITIVE_INFINITY;
   for (const candidate of candidates) {
@@ -450,7 +543,27 @@ function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
     const hits = countPathIntersections(cleaned, allObstacles);
     const bends = routeBends(cleaned);
     const length = routeLength(cleaned);
-    const score = hits * 1e6 + bends * 500 + length;
+    let portPenalty = 0;
+    const startP = cleaned[0];
+    const endP = cleaned[cleaned.length - 1];
+    if (isDominantVertical) {
+      if (dy >= 20) {
+        if (Math.abs(startP.y - sourceRect.y1) < 1) portPenalty += 25e3;
+        if (Math.abs(endP.y - targetRect.y2) < 1) portPenalty += 25e3;
+      } else if (dy <= -20) {
+        if (Math.abs(startP.y - sourceRect.y2) < 1) portPenalty += 25e3;
+        if (Math.abs(endP.y - targetRect.y1) < 1) portPenalty += 25e3;
+      }
+    } else {
+      if (dx >= 20) {
+        if (Math.abs(startP.x - sourceRect.x1) < 1) portPenalty += 25e3;
+        if (Math.abs(endP.x - targetRect.x2) < 1) portPenalty += 25e3;
+      } else if (dx <= -20) {
+        if (Math.abs(startP.x - sourceRect.x2) < 1) portPenalty += 25e3;
+        if (Math.abs(endP.x - targetRect.x1) < 1) portPenalty += 25e3;
+      }
+    }
+    const score = hits * 1e6 + portPenalty + bends * 500 + length;
     if (score < bestScore) {
       bestScore = score;
       best = cleaned;
@@ -522,9 +635,14 @@ function ensureEdgeLayer(scene) {
 }
 function ensureDefs(svg, theme, id) {
   const key = `data-markdy-defs-${id}`;
-  if (svg.querySelector(`defs[${key}='1']`)) return;
-  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-  defs.setAttribute(key, "1");
+  let defs = svg.querySelector(`defs[${key}='1']`);
+  if (!defs) {
+    defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    defs.setAttribute(key, "1");
+    svg.prepend(defs);
+  } else {
+    defs.replaceChildren();
+  }
   for (const [kind, color] of Object.entries(theme.edges)) {
     const arrow = document.createElementNS("http://www.w3.org/2000/svg", "marker");
     arrow.setAttribute("id", `${id}-arrow-${kind}`);
@@ -571,7 +689,27 @@ function ensureDefs(svg, theme, id) {
   filter.appendChild(turb);
   filter.appendChild(disp);
   defs.appendChild(filter);
-  svg.prepend(defs);
+}
+function updateEdgeLayerTheme(svg, edgeRuntimeMap, theme, sceneId) {
+  ensureDefs(svg, theme, sceneId);
+  const isDark = isDarkTheme(theme);
+  for (const runtime of edgeRuntimeMap.values()) {
+    const color = theme.edges[runtime.kind];
+    runtime.color = color;
+    runtime.path.setAttribute("stroke", color);
+    if (runtime.kind !== "dependency") {
+      runtime.path.style.filter = `drop-shadow(0 0 4px ${translucentColor(color, "44")})`;
+    }
+    runtime.dot.setAttribute("fill", color);
+    runtime.dot.style.filter = `drop-shadow(0 0 6px ${color}) drop-shadow(0 0 12px ${color}88)`;
+    if (runtime.labelPlate) {
+      runtime.labelPlate.setAttribute("fill", theme.canvas ?? theme.surface ?? "#ffffff");
+      runtime.labelPlate.setAttribute("stroke", translucentColor(color, "28"));
+    }
+    if (runtime.label) {
+      runtime.label.setAttribute("fill", computeEdgeLabelColor(color, isDark));
+    }
+  }
 }
 function isDarkTheme(theme) {
   if (theme.name === "paper" || theme.name === "editorial" || theme.name === "sketchy") {
@@ -1635,6 +1773,10 @@ function ensureNodeStyles(doc) {
   border-radius: 4px;
   transform: rotate(0deg);
   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  filter: drop-shadow(0 0 1px var(--md-hairline, rgba(15, 23, 42, 0.2))) drop-shadow(0 4px 12px var(--md-shadow, rgba(2, 6, 23, 0.15)));
+}
+.markdy-node[data-shape="diamond"][data-focal="1"] {
+  filter: drop-shadow(0 0 1.5px var(--md-accent)) drop-shadow(0 4px 16px color-mix(in srgb, var(--md-accent) 30%, transparent));
 }
 .markdy-node[data-shape="diamond"] .markdy-node__body {
   justify-content: center;
@@ -1650,6 +1792,13 @@ function ensureNodeStyles(doc) {
   border-radius: 999px;
   min-height: 54px;
 }
+.markdy-node[data-shape="pill"] .markdy-node__body {
+  justify-content: center;
+  padding: 0 20px;
+}
+.markdy-node[data-shape="pill"] .markdy-node__label {
+  text-align: center;
+}
 .markdy-node[data-shape="circle"],
 .markdy-node[data-kind="dot"] {
   border-radius: 50%;
@@ -1719,9 +1868,13 @@ function ensureNodeStyles(doc) {
   background: var(--md-node-surface, var(--md-surface));
 }
 .markdy-node[data-focal="1"] {
-  background: color-mix(in srgb, var(--md-accent-tint, var(--md-accent)) 100%, transparent);
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--md-accent) 12%, var(--md-node-surface-raised, var(--md-surface-raised, #ffffff))),
+      color-mix(in srgb, var(--md-accent) 6%, var(--md-node-surface, var(--md-surface, #ffffff))));
   box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--md-accent) 55%, transparent);
+    0 2px 8px color-mix(in srgb, var(--md-accent) 20%, transparent),
+    inset 0 0 0 1.5px color-mix(in srgb, var(--md-accent) 60%, transparent);
 }
 .markdy-scene-root[data-markdy-theme="nebula"] .markdy-node {
   border: 1px solid color-mix(in srgb, var(--md-role-color, var(--md-accent)) 34%, transparent);
@@ -1744,8 +1897,8 @@ function ensureNodeStyles(doc) {
   box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--md-accent) 60%, transparent);
   background:
     linear-gradient(180deg,
-      color-mix(in srgb, var(--md-accent-tint, var(--md-accent)) 8%, transparent),
-      color-mix(in srgb, var(--md-accent-tint, var(--md-accent)) 4%, transparent));
+      color-mix(in srgb, var(--md-accent) 10%, var(--md-node-surface-raised, var(--md-surface-raised, #ffffff))),
+      color-mix(in srgb, var(--md-accent) 5%, var(--md-node-surface, var(--md-surface, #ffffff))));
 }
 .markdy-node[data-kind="external"] {
   border: 1.2px dashed color-mix(in srgb, var(--md-ink, var(--md-text)) 30%, transparent);
@@ -1768,17 +1921,32 @@ function ensureNodeStyles(doc) {
   border-color: #ff5a36;
   box-shadow: 0 0 18px -8px rgba(255, 90, 54, 0.45);
 }
+.markdy-scene-root[data-markdy-theme="terminal"] .markdy-node[data-shape="diamond"] {
+  filter: drop-shadow(0 0 1px #2b2b2b);
+}
+.markdy-scene-root[data-markdy-theme="terminal"] .markdy-node[data-shape="diamond"][data-focal="1"] {
+  filter: drop-shadow(0 0 2px #ff5a36) drop-shadow(0 0 12px rgba(255, 90, 54, 0.35));
+}
 .markdy-scene-root[data-markdy-theme="sketchy"] .markdy-node {
   background: #ffffff;
   border: 1.5px solid #2d3142;
   box-shadow: 3px 3px 0 rgba(45, 49, 66, 0.10);
   border-radius: var(--md-radius-md, 4px);
 }
+.markdy-scene-root[data-markdy-theme="sketchy"] .markdy-node[data-shape="diamond"] {
+  filter: drop-shadow(0 0 1px #2d3142) drop-shadow(3px 3px 0 rgba(45, 49, 66, 0.12));
+}
 .markdy-scene-root[data-markdy-theme="sketchy"] .markdy-node[data-focal="1"] {
   border-color: #eb6c36;
   background: rgba(235, 108, 54, 0.06);
   box-shadow: 3px 3px 0 rgba(235, 108, 54, 0.12);
 }
+.markdy-scene-root[data-markdy-theme="nebula"] .markdy-node[data-shape="diamond"] {
+  filter: drop-shadow(0 0 1px var(--md-hairline)) drop-shadow(0 0 18px -4px color-mix(in srgb, var(--md-role-color, var(--md-accent)) 60%, transparent));
+}
+.markdy-scene-root[data-markdy-theme="nebula"] .markdy-node[data-shape="diamond"][data-focal="1"] {
+  filter: drop-shadow(0 0 2px var(--md-accent)) drop-shadow(0 0 24px -2px color-mix(in srgb, var(--md-accent) 70%, transparent));
+}
 `;
   doc.head.appendChild(style);
 }
@@ -2309,6 +2477,52 @@ function mountSequenceLayer(layer, nodes, messages, activations, theme, bounds)
   for (const animation of animations) animation.pause();
   return animations;
 }
+function updateSequenceLayerTheme(layer, theme) {
+  const svg = layer.querySelector("svg");
+  if (!svg) return;
+  const defs = svg.querySelector("defs");
+  if (defs) {
+    Array.from(defs.querySelectorAll("marker")).forEach((marker) => {
+      const id = marker.getAttribute("id") || "";
+      const path = marker.querySelector("path");
+      if (path) {
+        if (id.includes("response")) {
+          path.setAttribute("stroke", theme.edges.response);
+        } else if (id.includes("event")) {
+          path.setAttribute("fill", theme.edges.event);
+        } else {
+          path.setAttribute("fill", theme.edges.request);
+        }
+      }
+    });
+  }
+  Array.from(svg.querySelectorAll(".markdy-sequence-lifeline")).forEach((line) => {
+    line.setAttribute("stroke", theme.hairline ?? theme.border);
+  });
+  Array.from(svg.querySelectorAll(".markdy-sequence-activation")).forEach((bar) => {
+    bar.setAttribute("fill", theme.accent);
+    bar.style.filter = `drop-shadow(0 0 6px ${theme.accent}66)`;
+  });
+  Array.from(svg.querySelectorAll(".markdy-sequence-message")).forEach((group) => {
+    const line = group.querySelector("line");
+    if (line) {
+      const markerEnd = line.getAttribute("marker-end") || "";
+      if (markerEnd.includes("response")) line.setAttribute("stroke", theme.edges.response);
+      else if (markerEnd.includes("event")) line.setAttribute("stroke", theme.edges.event);
+      else line.setAttribute("stroke", theme.edges.request);
+    }
+    const plate = group.querySelector("rect");
+    if (plate) {
+      plate.setAttribute("fill", theme.labelPlate ?? theme.surface);
+      plate.setAttribute("stroke", theme.hairline ?? `color-mix(in srgb, ${theme.border} 70%, transparent)`);
+    }
+    const text = group.querySelector("text");
+    if (text) {
+      text.setAttribute("fill", theme.text);
+      if (theme.fonts?.mono) text.setAttribute("font-family", theme.fonts.mono);
+    }
+  });
+}
 
 // src/tree.ts
 function mountTreeBuses(layer, buses, theme) {
@@ -2512,10 +2726,10 @@ function ensureSceneStyles(doc) {
   gap: 8px;
   padding: 6px 12px;
   color: var(--md-text, #f8fafc);
-  background: var(--md-footer-bg, rgba(15, 23, 42, 0.85));
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border-top: 1px solid var(--md-footer-border, rgba(148, 163, 184, 0.15));
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-top: none;
   z-index: 20;
 }
 .markdy-controls {
@@ -3071,14 +3285,15 @@ function applyThemeVariables(element, theme) {
   element.style.setProperty("--md-node-surface-raised", theme.nodeSurfaceRaised ?? theme.surfaceRaised);
   element.style.setProperty("--md-hairline", theme.hairline ?? `color-mix(in srgb, ${theme.border} 50%, transparent)`);
   element.style.setProperty("--md-shadow", theme.shadow ?? "rgba(2, 6, 23, 0.55)");
-  element.style.setProperty("--md-footer-bg", `color-mix(in srgb, ${theme.surface} 92%, transparent)`);
-  element.style.setProperty("--md-footer-border", theme.border);
+  element.style.setProperty("--md-footer-bg", "transparent");
+  element.style.setProperty("--md-footer-border", "transparent");
   element.style.setProperty("--md-control-bg", theme.surfaceRaised);
   element.style.setProperty("--md-control-border", theme.border);
   element.style.setProperty("--md-control-text", theme.textMuted);
   element.style.setProperty("--md-control-hover-bg", theme.canvas);
   element.style.setProperty("--md-control-hover-text", theme.text);
   element.style.setProperty("--md-control-hover-border", theme.accent);
+  element.style.setProperty("--md-segmented-bg", `color-mix(in srgb, ${theme.surfaceRaised} 60%, transparent)`);
   element.style.setProperty("--md-divider", theme.border);
   if (theme.fonts?.title) element.style.setProperty("--md-font-title", theme.fonts.title);
   if (theme.fonts?.nodeName) element.style.setProperty("--md-font-node", theme.fonts.nodeName);
@@ -3247,7 +3462,7 @@ function createDiagram(opts) {
   function updateProgressBar(pct) {
     if (!progressEl) return;
     if (progressMode === "bar") {
-      progressEl.style.background = customColor ?? "#2563eb";
+      progressEl.style.background = customColor ?? plan.theme.accent ?? "#2563eb";
       progressEl.style.transformOrigin = "left center";
       progressEl.style.transform = `scaleX(${pct})`;
       return;
@@ -3259,7 +3474,7 @@ function createDiagram(opts) {
     progressEl.style.webkitMask = progressEl.style.mask;
     progressEl.style.maskComposite = "exclude";
     progressEl.style.webkitMaskComposite = "xor";
-    progressEl.style.padding = "2px";
+    progressEl.style.padding = "1px";
   }
   let footer = null;
   function ensureFooter() {
@@ -3275,7 +3490,8 @@ function createDiagram(opts) {
       gap: "6px",
       width: "100%",
       boxSizing: "border-box",
-      padding: "4px 6px 0"
+      padding: "4px 6px 0",
+      background: "transparent"
     });
     if (container.parentNode) container.parentNode.insertBefore(footer, container.nextSibling);
     else container.appendChild(footer);
@@ -3735,6 +3951,84 @@ function createDiagram(opts) {
       }
       diagram.seek(target);
     },
+    setTheme(theme) {
+      const newTheme = typeof theme === "string" ? resolveTheme(theme) : theme;
+      plan.theme = newTheme;
+      applyThemeToScene(scene, newTheme);
+      if (footer) {
+        applyThemeVariables(footer, newTheme);
+      }
+      for (const node of plan.nodes) {
+        const el = nodeEls.get(node.id);
+        if (el) {
+          if (newTheme.flatCards) {
+            el.style.setProperty("--md-shadow", "transparent");
+          } else {
+            el.style.removeProperty("--md-shadow");
+          }
+          if (newTheme.accentTint) {
+            el.style.setProperty("--md-accent-tint", newTheme.accentTint);
+          } else {
+            el.style.removeProperty("--md-accent-tint");
+          }
+          const roleColor = newTheme.roles[node.role] ?? newTheme.accent;
+          el.style.setProperty("--md-role-color", roleColor);
+          applyDeclaredNodeStyle(el, node.style);
+        }
+      }
+      const structuralSvg = structuralEdgeHost.querySelector("svg[data-markdy-edge-layer='1']");
+      if (structuralSvg) {
+        updateEdgeLayerTheme(structuralSvg, edgeRuntimes, newTheme, edgeSceneId);
+      }
+      const cameraSvg = cameraLayer.querySelector("svg[data-markdy-edge-layer='1']");
+      if (cameraSvg) {
+        updateEdgeLayerTheme(cameraSvg, edgeRuntimes, newTheme, edgeSceneId);
+      }
+      if (plan.treeBuses && plan.treeBuses.length > 0) {
+        treeLayer.replaceChildren();
+        mountTreeBuses(treeLayer, plan.treeBuses, newTheme);
+      }
+      if (plan.diagramType === "constellation" || plan.diagramType === "radar" || plan.diagramType === "timeline") {
+        constellationLayer.replaceChildren();
+        if (plan.diagramType === "constellation") {
+          mountConstellationLayer(
+            constellationLayer,
+            plan.nodes,
+            newTheme,
+            { width: plan.meta.width, height: plan.meta.height }
+          );
+        } else if (plan.diagramType === "radar") {
+          mountRadarLayer(
+            constellationLayer,
+            plan.nodes,
+            newTheme,
+            { width: plan.meta.width, height: plan.meta.height }
+          );
+        } else if (plan.diagramType === "timeline") {
+          mountTimelineLayer(
+            constellationLayer,
+            plan.nodes,
+            newTheme,
+            { width: plan.meta.width, height: plan.meta.height }
+          );
+        }
+      }
+      if (plan.diagramType === "sequence") {
+        updateSequenceLayerTheme(sequenceLayer, newTheme);
+      }
+      if (plan.groupBoundaries && plan.groupBoundaries.length > 0) {
+        groupLayer.replaceChildren();
+        mountGroupBoundaries(groupLayer, plan.groupBoundaries, newTheme);
+      }
+      if (plan.annotations && plan.annotations.length > 0) {
+        annotationLayer.replaceChildren();
+        mountAnnotations(annotationLayer, plan.annotations, plan.nodes, newTheme, {
+          width: plan.meta.width,
+          height: plan.meta.height
+        });
+      }
+      if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
+    },
     destroy() {
       diagram.pause();
       if (keyboardShortcuts && typeof window !== "undefined") {
@@ -3901,6 +4195,7 @@ function createDiagram(opts) {
       const targetThemes = isDark ? lightThemes : darkThemes;
       const nextTheme = targetThemes[Math.floor(Math.random() * targetThemes.length)];
       flashControlLabel(button, nextTheme);
+      diagram.setTheme(nextTheme);
       container.dispatchEvent(
         new CustomEvent("markdy-theme-switch", {
           bubbles: true,

package/package.json

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