@markdy/renderer-dom 1.0.18 → 1.0.20

package/README.md

@@ -13,7 +13,7 @@ Web Animations API renderer for [MarkdyScript](../../docs/SYNTAX.md) scenes. Tra
 - **Seek-safe** — manual `currentTime` control enables reliable `seek()` in any direction
 - **Playback-rate controls** — set normalized timeline speed to slow down or speed up diagrams without rebuilding animations
 - **Interactive viewport** — opt into wheel zoom and drag pan while click-to-pause stays available
-- **Embed controls** — opt into a compact playback toolbar with restart, speed, and view reset controls
+- **Embed controls** — opt into only the playback, timeline, viewport, export, and sharing controls a scene needs
 - **Semantic themes** — `paper`, `editorial`, `nebula`, `midnight`, `blueprint`, and `graphite`, with per-role node and edge colors
 - **Single dependency** — only `@markdy/core`
 
@@ -70,21 +70,21 @@ diagram.destroy();    // clean up DOM + cancel animations
 |---|---|---|---|
 | `container` | `HTMLElement` | *(required)* | DOM element to mount the scene into |
 | `code` | `string` | *(required)* | MarkdyScript source code |
-| `autoplay` | `boolean` | `plan.meta.autoplay ?? true` | Start playing immediately |
-| `loop` | `boolean` | `plan.meta.loop ?? true` | Loop the animation when it reaches the end |
-| `copyright` | `boolean` | `plan.meta.copyright ?? true` | Show a small "Powered by Markdy" badge below the animation |
+| `autoplay` | `boolean` | `player.playback.autoplay ?? true` | Override whether playback starts immediately |
+| `loop` | `boolean` | `player.playback.loop ?? true` | Override whether playback loops at the end |
+| `copyright` | `boolean` | `player.chrome.badge ?? true` | Show the linked badge at the footer's right edge |
 | `progressBar` | `boolean \| string` | `true` | Deprecated compatibility flag for the scene-boundary progress bar |
-| `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 \|\| 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 |
+| `sceneBoundaryProgress` | `boolean \| string` | `player.chrome.progress` | Override boundary progress, or pass a custom color/gradient |
+| `progressColor` | `string` | `player.chrome.color` or rainbow | Override the progress color or gradient |
+| `playbackRate` | `number` | `player.playback.rate ?? 1` | Override the initial timeline multiplier |
+| `interactiveViewport` | `boolean` | `player.interaction` | `true` supplies default gestures; `false` suppresses script gestures |
+| `controls` | `boolean` | `player.controls` | `true` supplies legacy toolbar defaults; `false` suppresses script controls |
 | `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 |
 
-> **Note:** Directives declared inside the MarkdyScript code (e.g. `controls true`, `interactive true`, `progressColor "#3b82f6"`) apply automatically if the corresponding JavaScript option is omitted (`undefined`). Options passed to `createDiagram()` override the in-script declarations.
+> **Note:** Prefer grouped `player:` configuration in MarkdyScript. Omitted host options preserve it; host `false` suppresses controls or interaction, while host `true` supplies legacy defaults for leaves the script does not set. A speed selector renders only with at least two distinct positive `speeds` values.
 
 ### `Diagram`
 

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.
@@ -26,11 +26,11 @@ interface DiagramOptions {
     progressBarColor?: string;
     /** Playback speed multiplier. Defaults to 1, where 1 is Markdy's normal pace. */
     playbackRate?: number;
-    /** Enable wheel zoom and drag pan on the rendered viewport. Defaults to false. */
+    /** Host interaction override. `true` enables default gestures; `false` suppresses script interaction. */
     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. */
+    /** Host controls override. `true` enables the legacy default set; `false` suppresses script controls. */
     controls?: boolean;
     onWarning?: (warning: Diagnostic) => void;
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;
@@ -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) {
@@ -2511,17 +2725,20 @@ function ensureSceneStyles(doc) {
   justify-content: space-between;
   gap: 8px;
   padding: 6px 12px;
-  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));
+  color: var(--md-text, #f8fafc);
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-top: none;
   z-index: 20;
 }
 .markdy-controls {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  width: 100%;
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
   gap: 8px;
   max-width: 100%;
   overflow-x: auto;
@@ -2555,7 +2772,6 @@ function ensureSceneStyles(doc) {
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  margin-left: auto;
 }
 .markdy-control-divider {
   width: 1px;
@@ -2626,37 +2842,24 @@ function ensureSceneStyles(doc) {
   transform: translateY(-1px) scale(1.02);
 }
 .markdy-badge {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-  z-index: 25;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  text-align: right;
+  font-family: system-ui, sans-serif;
   font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: var(--md-text-muted, #94a3b8);
+  font-weight: 400;
+  color: var(--md-control-text, #94a3b8);
   text-decoration: none;
-  padding: 2.5px 7px;
-  border-radius: 5px;
-  background: var(--md-surface, rgba(15, 23, 42, 0.45));
-  border: 1px solid var(--md-border, rgba(148, 163, 184, 0.15));
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  opacity: 0.65;
-  transition: all 0.2s ease;
-  pointer-events: auto;
-  user-select: none;
+  padding: 0;
+  opacity: 0.7;
+  margin-left: auto;
+  flex-shrink: 0;
+  transition: opacity 0.15s ease, color 0.15s ease;
+  white-space: nowrap;
 }
 .markdy-badge:hover {
   opacity: 1;
-  color: var(--accent, #10b981);
-  border-color: var(--accent, #10b981);
-  background: var(--md-surface-raised, rgba(15, 23, 42, 0.75));
-  transform: translateY(-1px);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  color: var(--md-text, #f8fafc);
 }
 .markdy-speed-group {
   display: inline-flex;
@@ -2689,57 +2892,6 @@ function ensureSceneStyles(doc) {
   color: #ffffff !important;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
 }
-.markdy-control-seek {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 100%;
-  height: 5px;
-  border-radius: 999px;
-  background: linear-gradient(
-    to right,
-    var(--accent, #10b981) 0%,
-    var(--accent, #10b981) var(--seek-pct, 0%),
-    rgba(148, 163, 184, 0.22) var(--seek-pct, 0%),
-    rgba(148, 163, 184, 0.22) 100%
-  );
-  outline: none;
-  cursor: pointer;
-  margin: 0;
-  transition: height 0.15s ease;
-}
-.markdy-control-seek:hover {
-  height: 7px;
-}
-.markdy-control-seek::-webkit-slider-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #ffffff;
-  border: 2px solid var(--accent, #10b981);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
-  cursor: pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-.markdy-control-seek:hover::-webkit-slider-thumb {
-  transform: scale(1.25);
-  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
-}
-.markdy-control-seek::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: #ffffff;
-  border: 2px solid var(--accent, #10b981);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
-  cursor: pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-.markdy-control-seek:hover::-moz-range-thumb {
-  transform: scale(1.25);
-  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
-}
 .markdy-control-time {
   font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   font-size: 10px;
@@ -2925,44 +3077,61 @@ function ensureSceneStyles(doc) {
 .markdy-control-seek::-webkit-slider-runnable-track {
   width: 100%;
   height: 4.5px;
-  background: rgba(148, 163, 184, 0.35);
+  background: linear-gradient(
+    to right,
+    var(--accent, #10b981) 0%,
+    var(--accent, #10b981) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) 100%
+  );
   border-radius: 9999px;
-  transition: background 0.15s ease;
-}
-.markdy-control-seek:hover::-webkit-slider-runnable-track {
-  background: rgba(148, 163, 184, 0.55);
 }
 .markdy-control-seek::-webkit-slider-thumb {
+  appearance: none;
   -webkit-appearance: none;
   height: 13px;
   width: 13px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--accent, #10b981);
   border: 2px solid #ffffff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   margin-top: -4.25px;
   cursor: grab;
-  transition: transform 0.1s ease, background 0.15s ease;
+  transition: transform 0.1s ease, box-shadow 0.15s ease;
+}
+.markdy-control-seek:hover::-webkit-slider-thumb {
+  transform: scale(1.2);
+  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
 }
 .markdy-control-seek:active::-webkit-slider-thumb {
   cursor: grabbing;
   transform: scale(1.2);
-  background: #1d4ed8;
 }
 .markdy-control-seek::-moz-range-track {
   width: 100%;
   height: 4.5px;
-  background: rgba(148, 163, 184, 0.35);
+  background: linear-gradient(
+    to right,
+    var(--accent, #10b981) 0%,
+    var(--accent, #10b981) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) var(--seek-pct, 0%),
+    rgba(148, 163, 184, 0.35) 100%
+  );
   border-radius: 9999px;
 }
 .markdy-control-seek::-moz-range-thumb {
   height: 13px;
   width: 13px;
   border-radius: 50%;
-  background: #2563eb;
+  background: var(--accent, #10b981);
   border: 2px solid #ffffff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   cursor: grab;
+  transition: transform 0.1s ease, box-shadow 0.15s ease;
+}
+.markdy-control-seek:hover::-moz-range-thumb {
+  transform: scale(1.2);
+  box-shadow: 0 0 8px var(--accent-glow, rgba(16, 185, 129, 0.6));
 }
 
 [data-markdy-theme="midnight"] .markdy-controls button,
@@ -2983,9 +3152,9 @@ function ensureSceneStyles(doc) {
 [data-markdy-theme="nebula"] .markdy-controls button:hover:not([aria-pressed="true"]),
 :root[data-theme="dark"] .markdy-controls button:hover:not([aria-pressed="true"]),
 .theme-dark .markdy-controls button:hover:not([aria-pressed="true"]) {
-  background: rgba(51, 65, 85, 0.95);
-  color: #f8fafc;
-  border-color: #94a3b8;
+  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);
 }
 [data-markdy-theme="midnight"] .markdy-controls button[aria-pressed="true"],
 [data-markdy-theme="blueprint"] .markdy-controls button[aria-pressed="true"],
@@ -2994,10 +3163,10 @@ function ensureSceneStyles(doc) {
 [data-markdy-theme="nebula"] .markdy-controls button[aria-pressed="true"],
 :root[data-theme="dark"] .markdy-controls button[aria-pressed="true"],
 .theme-dark .markdy-controls button[aria-pressed="true"] {
-  background: #3b82f6 !important;
+  background: var(--accent, #3b82f6) !important;
   color: #ffffff !important;
-  border-color: #3b82f6 !important;
-  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
+  border-color: var(--accent, #3b82f6) !important;
+  box-shadow: 0 0 10px var(--accent-glow, rgba(59, 130, 246, 0.5)) !important;
 }
 .markdy-footer a {
   transition: opacity 0.15s ease, color 0.15s ease;
@@ -3091,41 +3260,57 @@ function ensureSceneStyles(doc) {
 `;
   doc.head.appendChild(style);
 }
-function applyThemeToScene(scene, theme) {
-  scene.style.background = theme.canvas;
-  scene.style.color = theme.text;
-  scene.style.setProperty("--md-canvas", theme.canvas);
-  scene.style.setProperty("--md-surface", theme.surface);
-  scene.style.setProperty("--md-surface-raised", theme.surfaceRaised);
-  scene.style.setProperty("--md-border", theme.border);
-  scene.style.setProperty("--md-text", theme.text);
-  scene.style.setProperty("--md-text-muted", theme.textMuted);
-  scene.style.setProperty("--md-paper", theme.paper ?? theme.canvas);
-  scene.style.setProperty("--md-ink", theme.ink ?? theme.text);
-  scene.style.setProperty("--md-muted", theme.muted ?? theme.textMuted);
-  scene.style.setProperty("--md-rule", theme.rule ?? theme.border);
-  scene.style.setProperty("--md-grid-minor", theme.gridMinor);
-  scene.style.setProperty("--md-grid-major", theme.gridMajor);
-  scene.style.setProperty("--md-vignette", theme.vignette);
-  scene.style.setProperty("--md-accent", theme.accent);
-  if (theme.link) scene.style.setProperty("--md-link", theme.link);
-  if (theme.soft) scene.style.setProperty("--md-soft", theme.soft);
-  if (theme.accentTint) scene.style.setProperty("--md-accent-tint", theme.accentTint);
-  scene.style.setProperty("--md-node-surface", theme.nodeSurface ?? theme.surface);
-  scene.style.setProperty("--md-node-surface-raised", theme.nodeSurfaceRaised ?? theme.surfaceRaised);
-  scene.style.setProperty("--md-hairline", theme.hairline ?? `color-mix(in srgb, ${theme.border} 50%, transparent)`);
-  scene.style.setProperty("--md-shadow", theme.shadow ?? "rgba(2, 6, 23, 0.55)");
-  if (theme.fonts?.title) scene.style.setProperty("--md-font-title", theme.fonts.title);
-  if (theme.fonts?.nodeName) scene.style.setProperty("--md-font-node", theme.fonts.nodeName);
-  if (theme.fonts?.mono) scene.style.setProperty("--md-font-mono", theme.fonts.mono);
-  if (theme.radiusMd) scene.style.setProperty("--md-radius-md", `${theme.radiusMd}px`);
+function applyThemeVariables(element, theme) {
+  element.style.setProperty("--md-canvas", theme.canvas);
+  element.style.setProperty("--md-surface", theme.surface);
+  element.style.setProperty("--md-surface-raised", theme.surfaceRaised);
+  element.style.setProperty("--md-border", theme.border);
+  element.style.setProperty("--md-text", theme.text);
+  element.style.setProperty("--md-text-muted", theme.textMuted);
+  element.style.setProperty("--md-paper", theme.paper ?? theme.canvas);
+  element.style.setProperty("--md-ink", theme.ink ?? theme.text);
+  element.style.setProperty("--md-muted", theme.muted ?? theme.textMuted);
+  element.style.setProperty("--md-rule", theme.rule ?? theme.border);
+  element.style.setProperty("--md-grid-minor", theme.gridMinor);
+  element.style.setProperty("--md-grid-major", theme.gridMajor);
+  element.style.setProperty("--md-vignette", theme.vignette);
+  element.style.setProperty("--md-accent", theme.accent);
+  element.style.setProperty("--accent", theme.accent);
+  element.style.setProperty("--accent-glow", `color-mix(in srgb, ${theme.accent} 40%, transparent)`);
+  element.style.setProperty("--accent-light", theme.accentTint ?? `color-mix(in srgb, ${theme.accent} 15%, transparent)`);
+  if (theme.link) element.style.setProperty("--md-link", theme.link);
+  if (theme.soft) element.style.setProperty("--md-soft", theme.soft);
+  if (theme.accentTint) element.style.setProperty("--md-accent-tint", theme.accentTint);
+  element.style.setProperty("--md-node-surface", theme.nodeSurface ?? theme.surface);
+  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", "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);
+  if (theme.fonts?.mono) element.style.setProperty("--md-font-mono", theme.fonts.mono);
+  if (theme.radiusMd) element.style.setProperty("--md-radius-md", `${theme.radiusMd}px`);
   if (theme.spacing) {
     for (const [key, value] of Object.entries(theme.spacing)) {
-      scene.style.setProperty(`--md-space-${key}`, `${value}px`);
+      element.style.setProperty(`--md-space-${key}`, `${value}px`);
     }
   }
-  scene.dataset.markdyTheme = theme.name;
-  if (theme.flatCards) scene.dataset.flat = "1";
+  element.dataset.markdyTheme = theme.name;
+  if (theme.flatCards) element.dataset.flat = "1";
+}
+function applyThemeToScene(scene, theme) {
+  applyThemeVariables(scene, theme);
+  scene.style.background = theme.canvas;
+  scene.style.color = theme.text;
 }
 
 // src/diagram.ts
@@ -3277,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;
@@ -3289,27 +3474,44 @@ 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() {
     if (footer) return footer;
     footer = document.createElement("div");
     footer.className = "markdy-footer";
+    applyThemeVariables(footer, plan.theme);
     Object.assign(footer.style, {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
-      flexWrap: "wrap",
+      flexWrap: "nowrap",
       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);
     return footer;
   }
+  let badge = null;
+  if (copyright) {
+    badge = document.createElement("a");
+    badge.className = "markdy-badge";
+    badge.href = `${MARKDY_PLAYGROUND_URL}#code=${encodeCodeForPlaygroundHash(code)}`;
+    badge.target = "_blank";
+    badge.rel = "noopener noreferrer";
+    badge.title = "Open and edit in Markdy Playground";
+    badge.textContent = "Powered by Markdy";
+    ensureFooter().appendChild(badge);
+    const badgeLink = badge;
+    void compressMarkdyToUrlHash(code).then((hash) => {
+      badgeLink.href = `${MARKDY_PLAYGROUND_URL}#code=${hash}`;
+    }).catch(() => void 0);
+  }
   ensureSceneStyles(document);
   ensureNodeStyles(document);
   const scene = document.createElement("div");
@@ -3326,17 +3528,6 @@ function createDiagram(opts) {
   });
   applyThemeToScene(scene, plan.theme);
   viewport.appendChild(scene);
-  let badge = null;
-  if (copyright) {
-    badge = document.createElement("a");
-    badge.className = "markdy-badge";
-    badge.href = "https://markdy.com";
-    badge.target = "_blank";
-    badge.rel = "noopener noreferrer";
-    badge.title = "Powered by Markdy - Diagram as Code";
-    badge.textContent = "Powered by Markdy";
-    viewport.appendChild(badge);
-  }
   const viewportTransform = document.createElement("div");
   viewportTransform.className = "markdy-viewport-transform";
   Object.assign(viewportTransform.style, {
@@ -3548,6 +3739,7 @@ function createDiagram(opts) {
   let controlsSeekBar = null;
   let controlsTimeEl = null;
   let controlsFitButton = null;
+  let closeCodePanel = null;
   let fitViewActive = false;
   const ICONS2 = {
     play: '<svg class="markdy-icon" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>',
@@ -3759,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") {
@@ -3767,8 +4037,9 @@ function createDiagram(opts) {
       for (const anim of allAnims) anim.cancel();
       resizeObserver?.disconnect();
       removeFullscreenListeners?.();
+      closeCodePanel?.();
+      closeCodePanel = null;
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
-      if (badge?.parentNode) badge.parentNode.removeChild(badge);
       if (footer?.parentNode) footer.parentNode.removeChild(footer);
       if (viewport.parentNode === container) container.removeChild(viewport);
     }
@@ -3924,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,
@@ -3935,19 +4207,33 @@ function createDiagram(opts) {
   }
   function tintCode(raw) {
     return raw.split("\n").map((line) => {
-      if (/^\s*\/\//.test(line)) {
-        return `<span class="t-comment">${escHtml(line)}</span>`;
-      }
-      line = line.replace(/(->|<-|~>|--|<~)/g, '<span class="t-edge">$1</span>');
-      line = line.replace(/"([^"]*)"/g, '"<span class="t-string">$1</span>"');
-      line = line.replace(
-        /^(\s*)(scene|beat|group|player|show|frame|glow|focus|layout|edge|annotation|start|end|decision|service|browser|gateway|database|cache|queue|worker|function|pod|user|client|hub|station|metric|mobile)\b/,
-        '$1<span class="t-keyword">$2</span>'
+      if (/^\s*\/\//.test(line)) return `<span class="t-comment">${escHtml(line)}</span>`;
+      const keyword = line.match(
+        /^(\s*)(scene|beat|group|player|show|frame|glow|focus|layout|edge|annotation|start|end|decision|service|browser|gateway|database|cache|queue|worker|function|pod|user|client|hub|station|metric|mobile)\b/
       );
-      line = line.replace(/\b(\d[\d.]*(?:ms|px|s)?)\b/g, '<span class="t-number">$1</span>');
-      return line;
+      const prefix = keyword ? `${escHtml(keyword[1])}<span class="t-keyword">${keyword[2]}</span>` : "";
+      return prefix + tintInlineCode(line.slice(keyword?.[0].length ?? 0));
     }).join("\n");
   }
+  function tintInlineCode(raw) {
+    const tokenPattern = /"[^"]*"|->|<-|~>|--|<~|\b\d[\d.]*(?:ms|px|s)?\b/g;
+    let output = "";
+    let cursor = 0;
+    for (const match of raw.matchAll(tokenPattern)) {
+      const token = match[0];
+      const index = match.index ?? 0;
+      output += escHtml(raw.slice(cursor, index));
+      if (token.startsWith('"')) {
+        output += `"<span class="t-string">${escHtml(token.slice(1, -1))}</span>"`;
+      } else if (/^\d/.test(token)) {
+        output += `<span class="t-number">${token}</span>`;
+      } else {
+        output += `<span class="t-edge">${escHtml(token)}</span>`;
+      }
+      cursor = index + token.length;
+    }
+    return output + escHtml(raw.slice(cursor));
+  }
   function escHtml(str) {
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
@@ -3957,6 +4243,7 @@ function createDiagram(opts) {
     button.className = "markdy-control-code";
     button.setAttribute("aria-haspopup", "dialog");
     button.addEventListener("click", () => {
+      closeCodePanel?.();
       const overlay = document.createElement("div");
       overlay.className = "markdy-code-panel-overlay";
       overlay.setAttribute("role", "dialog");
@@ -4014,24 +4301,28 @@ function createDiagram(opts) {
       overlay.appendChild(panel);
       document.body.appendChild(overlay);
       closeBtn.focus();
+      let closing = false;
+      function removePanel() {
+        document.removeEventListener("keydown", handleEscape);
+        overlay.remove();
+        if (closeCodePanel === removePanel) closeCodePanel = null;
+      }
       function closePanel() {
+        if (closing) return;
+        closing = true;
         overlay.dataset.closing = "1";
-        overlay.addEventListener("animationend", () => overlay.remove(), { once: true });
+        document.removeEventListener("keydown", handleEscape);
+        overlay.addEventListener("animationend", removePanel, { once: true });
       }
       closeBtn.addEventListener("click", closePanel);
       overlay.addEventListener("click", (e) => {
         if (e.target === overlay) closePanel();
       });
       function handleEscape(e) {
-        if (e.key === "Escape") {
-          closePanel();
-          document.removeEventListener("keydown", handleEscape);
-        }
+        if (e.key === "Escape") closePanel();
       }
       document.addEventListener("keydown", handleEscape);
-      overlay.addEventListener("animationend", () => {
-        if (overlay.dataset.closing === "1") document.removeEventListener("keydown", handleEscape);
-      }, { once: true });
+      closeCodePanel = removePanel;
     });
     toolbar.appendChild(button);
   }
@@ -4238,7 +4529,7 @@ function createDiagram(opts) {
       mountCodeControl(toolsGroup);
     }
     if (toolsGroup.children.length > 0) toolbar.appendChild(toolsGroup);
-    ensureFooter().appendChild(toolbar);
+    ensureFooter().insertBefore(toolbar, badge);
     syncControls();
   }
   viewport.style.cursor = interactiveViewport ? "grab" : "pointer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "1.0.18",
+  "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.18"
+    "@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.18"
+    "@markdy/stdlib-systems": "1.0.20"
   },
   "scripts": {
     "build": "tsup",