@markdy/renderer-dom 0.8.1 → 0.8.3

package/README.md

@@ -8,7 +8,9 @@ Web Animations API renderer for [MarkdyScript](../../docs/SYNTAX.md) scenes. Tra
 - **Auto-layout diagrams** — renders positioned nodes and orthogonal, obstacle-aware edges from a compiled `RenderPlan`
 - **Flow edges** — `->` request, `<-` response, `~>` event, `--` dependency, each with its own stroke, plus a pulse that travels the edge as it draws
 - **Beat-driven cues** — `show`, `hide`, `glow`, and `focus`, sequenced by named beats
+- **Semantic node cards** — compact SVG glyphs for browsers, services, gateways, queues, workers, databases, storage, CDN, security, platform, and more
 - **Seek-safe** — manual `currentTime` control enables reliable `seek()` in any direction
+- **Playback-rate controls** — set timeline speed to slow down or speed up diagrams without rebuilding animations
 - **Semantic themes** — `midnight` and `paper`, with per-role node colors
 - **Single dependency** — only `@markdy/core`
 
@@ -40,7 +42,7 @@ import { createPlayer } from "@markdy/renderer-dom";
 const player = createPlayer({
   container: document.getElementById("scene")!,
   code: `
-    scene "Request" theme=midnight
+    scene "Request" theme=paper
     browser Web
     service API
     beat main:
@@ -68,7 +70,9 @@ player.destroy();    // clean up DOM + cancel animations
 | `autoplay` | `boolean` | `true` | Start playing immediately |
 | `loop` | `boolean` | `true` | Loop the animation when it reaches the end |
 | `copyright` | `boolean` | `true` | Show a small "Powered by Markdy" badge below the animation |
-| `progressBar` | `boolean` | `true` | Show a rainbow progress bar around the viewport border |
+| `progressBar` | `boolean` | `true` | Deprecated compatibility flag for the rainbow scene-boundary progress bar |
+| `sceneBoundaryProgress` | `boolean` | `progressBar ?? true` | Preferred flag for the rainbow scene-boundary progress bar |
+| `playbackRate` | `number` | `1` | Timeline speed multiplier |
 | `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 |
@@ -80,6 +84,8 @@ player.destroy();    // clean up DOM + cancel animations
 | `play()` | Start or resume playback |
 | `pause()` | Pause at current position |
 | `seek(seconds)` | Jump to a specific time |
+| `setPlaybackRate(rate)` | Change timeline speed; ignores non-positive or non-finite values |
+| `playbackRate()` | Current timeline speed multiplier |
 | `currentTime()` | Current playback position in seconds |
 | `duration()` | Total scene duration in seconds |
 | `isPlaying()` | Whether the scene is currently playing |

package/dist/index.d.ts

@@ -10,7 +10,18 @@ interface PlayerOptions {
     autoplay?: boolean;
     loop?: boolean;
     copyright?: boolean;
+    /**
+     * Maps node `image=`/`logo=` values to resolved URLs. Lets a host (Astro,
+     * MDX) remap DSL asset references to CDN/data URLs. Values not present here
+     * are used verbatim as the image `src`.
+     */
+    assets?: Record<string, string>;
+    /** @deprecated Prefer sceneBoundaryProgress. */
     progressBar?: boolean;
+    /** Show rainbow progress around scene boundary. Defaults to true. */
+    sceneBoundaryProgress?: boolean;
+    /** Playback speed multiplier. Defaults to 1. */
+    playbackRate?: number;
     onWarning?: (warning: Diagnostic) => void;
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;
     onPlayStateChange?: (playing: boolean) => void;
@@ -19,6 +30,8 @@ interface Player {
     play(): void;
     pause(): void;
     seek(seconds: number): void;
+    setPlaybackRate(rate: number): void;
+    playbackRate(): number;
     currentTime(): number;
     duration(): number;
     isPlaying(): boolean;

package/dist/index.js

@@ -233,13 +233,13 @@ function ensureDefs(svg, theme, id) {
     const arrow = document.createElementNS("http://www.w3.org/2000/svg", "marker");
     arrow.setAttribute("id", `${id}-arrow-${kind}`);
     arrow.setAttribute("viewBox", "0 0 10 10");
-    arrow.setAttribute("refX", "8");
+    arrow.setAttribute("refX", "8.5");
     arrow.setAttribute("refY", "5");
-    arrow.setAttribute("markerWidth", "6");
-    arrow.setAttribute("markerHeight", "6");
+    arrow.setAttribute("markerWidth", "7");
+    arrow.setAttribute("markerHeight", "7");
     arrow.setAttribute("orient", "auto-start-reverse");
     const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-    path.setAttribute("d", "M 1 1 L 9 5 L 1 9 z");
+    path.setAttribute("d", "M 1.5 1.6 L 9 5 L 1.5 8.4 L 3.4 5 Z");
     path.setAttribute("fill", color);
     arrow.appendChild(path);
     defs.appendChild(arrow);
@@ -260,19 +260,21 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
   path.setAttribute("d", d);
   path.setAttribute("fill", "none");
   path.setAttribute("stroke", color);
-  path.setAttribute("stroke-width", kind === "dependency" ? "1.5" : "2.5");
+  path.setAttribute("stroke-width", kind === "dependency" ? "1.5" : "2");
   path.setAttribute("stroke-linejoin", "round");
   path.setAttribute("stroke-linecap", "round");
   if (style.dash) path.setAttribute("stroke-dasharray", style.dash);
   if (style.marker !== "none") {
     path.setAttribute("marker-end", `url(#${sceneId}-arrow-${kind})`);
   }
-  path.style.filter = `drop-shadow(0 0 4px ${color}55)`;
+  if (kind !== "dependency") {
+    path.style.filter = `drop-shadow(0 0 3px ${color}33)`;
+  }
   const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  dot.setAttribute("r", "4");
+  dot.setAttribute("r", "3.5");
   dot.setAttribute("fill", color);
   dot.style.opacity = "0";
-  dot.style.filter = `drop-shadow(0 0 6px ${color})`;
+  dot.style.filter = `drop-shadow(0 0 4px ${color}aa)`;
   group.append(path, dot);
   let labelEl;
   let labelRect;
@@ -280,6 +282,20 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
     const textWidth = label.length * 6.6 + 10;
     const placement = placeFlowLabel(points, textWidth, labelObstacles, bounds);
     labelRect = placement.rect;
+    const plate = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    const padX = 7;
+    const halfW = textWidth / 2;
+    plate.setAttribute("x", String(placement.x - halfW - padX));
+    plate.setAttribute("y", String(placement.y - 9));
+    plate.setAttribute("width", String(textWidth + padX * 2));
+    plate.setAttribute("height", "18");
+    plate.setAttribute("rx", "6");
+    plate.setAttribute("fill", theme.labelPlate ?? theme.surface);
+    plate.setAttribute("fill-opacity", "0.9");
+    plate.setAttribute("stroke", theme.hairline ?? `color-mix(in srgb, ${theme.border} 60%, transparent)`);
+    plate.setAttribute("stroke-width", "1");
+    plate.style.opacity = "0";
+    group.appendChild(plate);
     labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
     labelEl.setAttribute("x", String(placement.x));
     labelEl.setAttribute("y", String(placement.y));
@@ -287,14 +303,11 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
     labelEl.setAttribute("dominant-baseline", "middle");
     labelEl.setAttribute("font-size", "11");
     labelEl.setAttribute("font-family", "ui-monospace, SFMono-Regular, Menlo, monospace");
-    labelEl.setAttribute("fill", theme.textMuted);
-    labelEl.setAttribute("stroke", theme.canvas);
-    labelEl.setAttribute("stroke-width", "3");
-    labelEl.setAttribute("paint-order", "stroke");
-    labelEl.setAttribute("stroke-linejoin", "round");
+    labelEl.setAttribute("fill", theme.text);
     labelEl.textContent = label;
     labelEl.style.opacity = "0";
     group.appendChild(labelEl);
+    labelEl.__plate = plate;
   }
   svg.appendChild(group);
   return { group, path, label: labelEl, dot, pathLen: len, points, labelRect };
@@ -332,6 +345,10 @@ function animateEdgeReveal(runtime, startMs, durMs) {
   );
   if (label) {
     anims.push(label.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, delay: startMs + 80, fill: "forwards" }));
+    const plate = label.__plate;
+    if (plate) {
+      anims.push(plate.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, delay: startMs + 80, fill: "forwards" }));
+    }
   }
   if (points.length >= 2) {
     anims.push(
@@ -448,62 +465,118 @@ function ensureNodeStyles(doc) {
   box-sizing: border-box;
   width: var(--md-node-w, 184px);
   height: var(--md-node-h, 88px);
-  border-radius: 16px;
-  border: 1px solid var(--md-border);
-  background: linear-gradient(145deg, var(--md-surface-raised), var(--md-surface));
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg,
+      var(--md-node-surface-raised, color-mix(in srgb, var(--md-surface-raised) 88%, #ffffff 12%)),
+      var(--md-node-surface, var(--md-surface)));
   color: var(--md-text);
-  box-shadow: 0 12px 32px rgba(2, 6, 23, 0.28), 0 0 0 1px rgba(255,255,255,0.04) inset;
+  box-shadow:
+    0 1px 1px color-mix(in srgb, var(--md-shadow, rgba(2, 6, 23, 0.5)) 50%, transparent),
+    0 10px 22px -12px var(--md-shadow, rgba(2, 6, 23, 0.55)),
+    inset 0 0 0 1px var(--md-hairline, color-mix(in srgb, var(--md-border) 50%, transparent)),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
   font-family: Inter, ui-sans-serif, system-ui, sans-serif;
   overflow: hidden;
   opacity: 0;
   transform: translateY(8px);
-  transition: box-shadow 0.3s ease;
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
 }
 .markdy-node[data-visible="1"] {
   opacity: 1;
   transform: translateY(0);
 }
 .markdy-node[data-focused="1"] {
-  box-shadow: 0 0 0 2px var(--md-accent), 0 16px 40px rgba(2, 6, 23, 0.35);
+  box-shadow:
+    0 2px 4px rgba(2, 6, 23, 0.32),
+    0 16px 34px -14px rgba(2, 6, 23, 0.6),
+    inset 0 0 0 1px color-mix(in srgb, var(--md-accent) 65%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--md-accent) 20%, transparent);
 }
 .markdy-node[data-glow="1"] {
-  box-shadow: 0 0 24px var(--md-glow-color, var(--md-accent)), 0 0 0 1px var(--md-glow-color, var(--md-accent)) inset;
+  box-shadow:
+    0 2px 4px rgba(2, 6, 23, 0.32),
+    0 0 0 1px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 55%, transparent),
+    0 0 20px -2px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 42%, transparent),
+    inset 0 0 18px -8px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 45%, transparent);
 }
-.markdy-node__rail {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  background: var(--md-role-color, var(--md-accent));
-  border-radius: 16px 0 0 16px;
-}
-.markdy-node__type {
-  padding: 10px 14px 0 18px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--md-text-muted);
+.markdy-node__rail { display: none; }
+.markdy-node__type { display: none; }
+.markdy-node__body {
+  height: 100%;
+  padding: 0 13px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.markdy-node__icon {
+  flex: 0 0 auto;
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--md-role-color, var(--md-accent));
+  background:
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 24%, transparent),
+      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 11%, transparent));
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--md-role-color, var(--md-accent)) 34%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+}
+.markdy-node__icon svg {
+  width: 17px;
+  height: 17px;
+  display: block;
+  stroke: currentColor;
+}
+.markdy-node__icon[data-media="image"] {
+  background: color-mix(in srgb, var(--md-surface-raised) 68%, #ffffff 32%);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--md-border) 60%, transparent);
+  padding: 3px;
+  overflow: hidden;
+}
+.markdy-node__icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 6px;
+  display: block;
+}
+.markdy-node__icon[data-fit="cover"] img {
+  object-fit: cover;
+}
+.markdy-node[data-icon="decision"] .markdy-node__icon,
+.markdy-node[data-icon="flow"] .markdy-node__icon {
+  border-radius: 999px;
 }
 .markdy-node__label {
-  padding: 2px 14px 0 18px;
-  font-size: 15px;
-  font-weight: 650;
-  line-height: 1.25;
-  white-space: nowrap;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.18;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
   overflow: hidden;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  text-wrap: balance;
 }
-.markdy-node[data-role="client"] { border-radius: 20px 20px 8px 8px; }
-.markdy-node[data-role="data"] { border-radius: 16px 16px 28px 28px; }
-.markdy-node[data-role="flow"] { transform: rotate(0deg); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
-.markdy-node[data-role="network"] { clip-path: polygon(8% 0%, 92% 0%, 100% 50%, 92% 100%, 8% 100%, 0% 50%); }
+.markdy-node[data-role="client"] { border-radius: 15px 15px 9px 9px; }
+.markdy-node[data-role="data"] { border-radius: 12px 12px 20px 20px; }
 .markdy-scene-title {
   position: absolute;
-  left: 64px;
-  top: 28px;
-  right: 64px;
+  left: 44px;
+  top: 26px;
+  right: 44px;
   font-size: 32px;
   font-weight: 700;
   line-height: 1.2;
@@ -519,7 +592,223 @@ function ensureNodeStyles(doc) {
 `;
   doc.head.appendChild(style);
 }
-function createNodeEl(node, theme) {
+var ICONS = {
+  compute: [
+    ["rect", { x: "5", y: "5", width: "14", height: "14", rx: "3" }],
+    ["path", { d: "M9 9h6v6H9zM9 2.5v2.5M15 2.5v2.5M9 19v2.5M15 19v2.5M2.5 9h2.5M2.5 15h2.5M19 9h2.5M19 15h2.5" }]
+  ],
+  user: [
+    ["circle", { cx: "12", cy: "8", r: "3.4" }],
+    ["path", { d: "M5.5 20a6.5 6.5 0 0 1 13 0" }]
+  ],
+  browser: [
+    ["rect", { x: "3", y: "5", width: "18", height: "14", rx: "2.5" }],
+    ["path", { d: "M3 9h18" }],
+    ["path", { d: "M7 7h.01M10 7h.01" }]
+  ],
+  service: [
+    ["path", { d: "M12 3 4.5 7.2 12 11.4l7.5-4.2L12 3Z" }],
+    ["path", { d: "M4.5 12 12 16.2 19.5 12" }],
+    ["path", { d: "M4.5 16.8 12 21l7.5-4.2" }]
+  ],
+  gateway: [
+    ["circle", { cx: "5", cy: "12", r: "2" }],
+    ["circle", { cx: "19", cy: "6", r: "2" }],
+    ["circle", { cx: "19", cy: "18", r: "2" }],
+    ["path", { d: "M7 12h4l5.5-5" }],
+    ["path", { d: "M11 12l5.5 5" }]
+  ],
+  queue: [
+    ["rect", { x: "5", y: "5", width: "14", height: "4", rx: "1.4" }],
+    ["rect", { x: "5", y: "10", width: "14", height: "4", rx: "1.4" }],
+    ["rect", { x: "5", y: "15", width: "14", height: "4", rx: "1.4" }]
+  ],
+  worker: [
+    ["circle", { cx: "12", cy: "12", r: "3.2" }],
+    ["path", { d: "M12 2.8v3M12 18.2v3M2.8 12h3M18.2 12h3M5.5 5.5l2.1 2.1M16.4 16.4l2.1 2.1M18.5 5.5l-2.1 2.1M7.6 16.4l-2.1 2.1" }]
+  ],
+  database: [
+    ["ellipse", { cx: "12", cy: "5.5", rx: "7", ry: "3" }],
+    ["path", { d: "M5 5.5v10c0 1.7 3.1 3 7 3s7-1.3 7-3v-10" }],
+    ["path", { d: "M5 10.5c0 1.7 3.1 3 7 3s7-1.3 7-3" }]
+  ],
+  storage: [
+    ["path", { d: "M4 8.5 12 4l8 4.5v7L12 20l-8-4.5v-7Z" }],
+    ["path", { d: "M4 8.5 12 13l8-4.5" }],
+    ["path", { d: "M12 13v7" }]
+  ],
+  cdn: [
+    ["circle", { cx: "12", cy: "12", r: "8" }],
+    ["path", { d: "M4 12h16M12 4c2.2 2.1 3.3 4.8 3.3 8S14.2 17.9 12 20M12 4c-2.2 2.1-3.3 4.8-3.3 8S9.8 17.9 12 20" }]
+  ],
+  cache: [
+    ["path", { d: "M13 2 5 13h6l-1 9 9-13h-6l0-7Z" }]
+  ],
+  code: [
+    ["path", { d: "m9 18-6-6 6-6" }],
+    ["path", { d: "m15 6 6 6-6 6" }],
+    ["path", { d: "m14 4-4 16" }]
+  ],
+  messaging: [
+    ["path", { d: "M4 6h16v10H8l-4 4V6Z" }],
+    ["path", { d: "M8 10h8M8 13h5" }]
+  ],
+  network: [
+    ["circle", { cx: "6", cy: "7", r: "2" }],
+    ["circle", { cx: "18", cy: "7", r: "2" }],
+    ["circle", { cx: "12", cy: "18", r: "2" }],
+    ["path", { d: "M8 8.5 11 16M16 8.5 13 16M8 7h8" }]
+  ],
+  platform: [
+    ["rect", { x: "4", y: "5", width: "16", height: "14", rx: "2.5" }],
+    ["path", { d: "M8 9h8M8 13h8M8 17h4" }]
+  ],
+  security: [
+    ["path", { d: "M12 3 5 6v5c0 4.5 3 7.7 7 10 4-2.3 7-5.5 7-10V6l-7-3Z" }],
+    ["path", { d: "M9.5 12.5 11.2 14 15 10" }]
+  ],
+  delivery: [
+    ["path", { d: "M4 7h10" }],
+    ["path", { d: "M4 12h16" }],
+    ["path", { d: "M4 17h10" }],
+    ["path", { d: "m16 7 4 5-4 5" }]
+  ],
+  observability: [
+    ["path", { d: "M4 14s2.5-5 8-5 8 5 8 5-2.5 5-8 5-8-5-8-5Z" }],
+    ["circle", { cx: "12", cy: "14", r: "2.5" }]
+  ],
+  distributed: [
+    ["circle", { cx: "6", cy: "12", r: "2.5" }],
+    ["circle", { cx: "18", cy: "6", r: "2.5" }],
+    ["circle", { cx: "18", cy: "18", r: "2.5" }],
+    ["path", { d: "M8.4 11 15.6 7M8.4 13 15.6 17" }]
+  ],
+  server: [
+    ["rect", { x: "4", y: "4.5", width: "16", height: "6.5", rx: "2" }],
+    ["rect", { x: "4", y: "13", width: "16", height: "6.5", rx: "2" }],
+    ["path", { d: "M7.5 7.75h.01M7.5 16.25h.01" }],
+    ["path", { d: "M11 7.75h6M11 16.25h6" }]
+  ],
+  scheduler: [
+    ["circle", { cx: "12", cy: "12", r: "8" }],
+    ["path", { d: "M12 7.5V12l3.2 2" }]
+  ],
+  key: [
+    ["circle", { cx: "8.5", cy: "8.5", r: "3.6" }],
+    ["path", { d: "M11.1 11.1 19 19" }],
+    ["path", { d: "M16.4 16.4l1.8 1.8M18.2 13.6l1.8 1.8" }]
+  ],
+  pod: [
+    ["path", { d: "M12 3 20 7.5v9L12 21 4 16.5v-9L12 3Z" }],
+    ["path", { d: "M8.75 10.5h6.5v5h-6.5z" }]
+  ],
+  function: [
+    ["rect", { x: "4", y: "4", width: "16", height: "16", rx: "4.5" }],
+    ["path", { d: "M13.2 7.5 9.5 12.4h3.4L11 16.5" }]
+  ],
+  lock: [
+    ["rect", { x: "5", y: "11", width: "14", height: "9", rx: "2.2" }],
+    ["path", { d: "M8 11V8a4 4 0 0 1 8 0v3" }],
+    ["path", { d: "M12 14.8v2.4" }]
+  ],
+  metrics: [
+    ["path", { d: "M4 20h16" }],
+    ["rect", { x: "5", y: "11", width: "2.6", height: "6", rx: "0.6" }],
+    ["rect", { x: "10.7", y: "6.5", width: "2.6", height: "10.5", rx: "0.6" }],
+    ["rect", { x: "16.4", y: "13", width: "2.6", height: "4", rx: "0.6" }]
+  ],
+  mobile: [
+    ["rect", { x: "7", y: "3", width: "10", height: "18", rx: "2.6" }],
+    ["path", { d: "M10.5 18h3" }]
+  ],
+  registry: [
+    ["rect", { x: "3.5", y: "13", width: "7", height: "6", rx: "1" }],
+    ["rect", { x: "13.5", y: "13", width: "7", height: "6", rx: "1" }],
+    ["rect", { x: "8.5", y: "5", width: "7", height: "6", rx: "1" }]
+  ],
+  flow: [
+    ["path", { d: "M5 12h14" }],
+    ["path", { d: "m13 6 6 6-6 6" }]
+  ],
+  decision: [
+    ["path", { d: "M12 3 21 12 12 21 3 12 12 3Z" }],
+    ["path", { d: "M12 8v4" }],
+    ["path", { d: "M12 16h.01" }]
+  ]
+};
+function iconKeyForNode(node) {
+  const override = typeof node.props?.icon === "string" ? node.props.icon.toLowerCase() : void 0;
+  if (override && ICONS[override]) return override;
+  if (node.kind === "api_gateway" || node.kind === "gateway" || node.kind === "load_balancer" || node.kind === "ingress") return "gateway";
+  if (node.kind === "db" || node.kind === "database" || node.kind === "sql" || node.kind === "nosql" || node.kind === "warehouse") return "database";
+  if (node.kind === "bucket" || node.kind === "object_store" || node.kind === "blob" || node.kind === "volume" || node.kind === "disk") return "storage";
+  if (node.kind === "cdn" || node.kind === "dns" || node.kind === "internet") return "cdn";
+  if (node.kind === "queue" || node.kind === "topic" || node.kind === "stream" || node.kind === "event_bus" || node.kind === "broker") return "queue";
+  if (node.kind === "scheduler" || node.kind === "cron") return "scheduler";
+  if (node.kind === "worker" || node.kind === "job" || node.kind === "batch") return "worker";
+  if (node.kind === "function" || node.kind === "lambda") return "function";
+  if (node.kind === "pod" || node.kind === "container" || node.kind === "sidecar") return "pod";
+  if (node.kind === "secret" || node.kind === "key" || node.kind === "certificate" || node.kind === "vault") return "key";
+  if (node.kind === "auth" || node.kind === "oauth" || node.kind === "oidc" || node.kind === "jwt" || node.kind === "lock") return "lock";
+  if (node.kind === "firewall" || node.kind === "waf" || node.kind === "vpn" || node.kind === "bastion") return "security";
+  if (node.kind === "proxy" || node.kind === "reverse_proxy" || node.kind === "router" || node.kind === "nat" || node.kind === "switch") return "gateway";
+  if (node.kind === "monitor" || node.kind === "metrics" || node.kind === "dashboard" || node.kind === "slo" || node.kind === "probe") return "metrics";
+  if (node.kind === "registry" || node.kind === "artifact") return "registry";
+  if (node.kind === "mobile") return "mobile";
+  if (node.kind === "api" || node.kind === "service" || node.kind === "microservice" || node.kind === "backend" || node.kind === "server" || node.kind === "handler" || node.kind === "controller") return "server";
+  if (node.kind === "browser" || node.kind === "web" || node.kind === "frontend" || node.kind === "app") return "browser";
+  if (node.kind === "user" || node.kind === "client") return "user";
+  if (node.kind === "decision" || node.kind === "condition") return "decision";
+  if (node.kind === "cache") return "cache";
+  return ICONS[node.kind] ? node.kind : node.role;
+}
+function appendGlyph(doc, wrap, spec) {
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke-width", "1.75");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  for (const [tag, attrs] of spec) {
+    const child = doc.createElementNS("http://www.w3.org/2000/svg", tag);
+    for (const [name, value] of Object.entries(attrs)) child.setAttribute(name, value);
+    svg.appendChild(child);
+  }
+  wrap.appendChild(svg);
+}
+function resolveImageSrc(node, assets) {
+  const raw = node.props?.image ?? node.props?.logo;
+  if (typeof raw !== "string" || raw.length === 0) return void 0;
+  return assets?.[raw] ?? raw;
+}
+function createNodeMediaEl(doc, node, assets) {
+  const wrap = doc.createElement("div");
+  wrap.className = "markdy-node__icon";
+  wrap.setAttribute("aria-hidden", "true");
+  const imgSrc = resolveImageSrc(node, assets);
+  if (imgSrc) {
+    wrap.dataset.media = "image";
+    const fit = typeof node.props?.imageFit === "string" ? node.props.imageFit.toLowerCase() : "contain";
+    wrap.dataset.fit = fit === "cover" ? "cover" : "contain";
+    const img = doc.createElement("img");
+    img.src = imgSrc;
+    img.alt = "";
+    img.decoding = "async";
+    img.loading = "lazy";
+    img.referrerPolicy = "no-referrer";
+    img.addEventListener("error", () => {
+      wrap.removeAttribute("data-media");
+      wrap.removeAttribute("data-fit");
+      wrap.textContent = "";
+      appendGlyph(doc, wrap, ICONS[iconKeyForNode(node)] ?? ICONS.service);
+    });
+    wrap.appendChild(img);
+    return wrap;
+  }
+  appendGlyph(doc, wrap, ICONS[iconKeyForNode(node)] ?? ICONS.service);
+  return wrap;
+}
+function createNodeEl(node, theme, assets) {
   const el = document.createElement("div");
   el.className = "markdy-node markdy-scene-actor";
   el.dataset.actor = node.id;
@@ -530,15 +819,19 @@ function createNodeEl(node, theme) {
   el.style.setProperty("--md-node-h", `${node.height}px`);
   const roleColor = theme.roles[node.role] ?? theme.accent;
   el.style.setProperty("--md-role-color", roleColor);
-  const rail = document.createElement("div");
-  rail.className = "markdy-node__rail";
-  const type = document.createElement("div");
-  type.className = "markdy-node__type";
-  type.textContent = node.kind.replace(/_/g, " ");
+  const typeText = node.kind.replace(/_/g, " ");
+  el.dataset.kind = node.kind;
+  el.dataset.icon = iconKeyForNode(node);
+  el.title = `${node.label} (${typeText})`;
+  el.setAttribute("aria-label", el.title);
+  const body = document.createElement("div");
+  body.className = "markdy-node__body";
+  const icon = createNodeMediaEl(document, node, assets);
   const label = document.createElement("div");
   label.className = "markdy-node__label";
   label.textContent = node.label;
-  el.append(rail, type, label);
+  body.append(icon, label);
+  el.append(body);
   return el;
 }
 function createTitleEl(title) {
@@ -572,15 +865,15 @@ function ensureSceneStyles(doc) {
     linear-gradient(90deg, var(--md-grid-minor) 1px, transparent 1px) 0 0 / 32px 32px,
     linear-gradient(var(--md-grid-major) 1px, transparent 1px) 0 0 / 160px 160px,
     linear-gradient(90deg, var(--md-grid-major) 1px, transparent 1px) 0 0 / 160px 160px;
-  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
-  opacity: 0.82;
+  mask-image: radial-gradient(ellipse at 50% 42%, #000 55%, transparent 100%);
+  opacity: 0.5;
 }
 .markdy-scene-root::after {
   z-index: 1;
   background:
-    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--md-accent) 16%, transparent), transparent 42%),
-    linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.08) 58%, var(--md-vignette) 100%);
-  opacity: 0.8;
+    radial-gradient(ellipse at 50% -8%, color-mix(in srgb, var(--md-accent) 10%, transparent), transparent 46%),
+    linear-gradient(180deg, transparent 0%, rgba(2, 6, 23, 0.05) 62%, var(--md-vignette) 100%);
+  opacity: 0.62;
 }
 .markdy-scene-content { z-index: 2; }
 .markdy-scene-actor-layer {
@@ -604,6 +897,10 @@ function applyThemeToScene(scene, theme) {
   scene.style.setProperty("--md-grid-major", theme.gridMajor);
   scene.style.setProperty("--md-vignette", theme.vignette);
   scene.style.setProperty("--md-accent", theme.accent);
+  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)");
   scene.dataset.markdyTheme = theme.name;
 }
 
@@ -615,11 +912,15 @@ function createPlayer(opts) {
     autoplay = true,
     loop = true,
     copyright = true,
-    progressBar = true,
+    assets,
+    progressBar,
+    sceneBoundaryProgress,
+    playbackRate: initialPlaybackRate = 1,
     onWarning = (w) => console.warn(`[markdy] line ${w.line}: ${w.message}`),
     onTimeUpdate,
     onPlayStateChange
   } = opts;
+  const showSceneBoundaryProgress = sceneBoundaryProgress ?? progressBar ?? true;
   const { ast, plan } = parseAndCompile(code);
   for (const w of ast.diagnostics) {
     if (w.severity === "warning") onWarning(w);
@@ -635,7 +936,7 @@ function createPlayer(opts) {
   });
   container.appendChild(viewport);
   let progressEl = null;
-  if (progressBar) {
+  if (showSceneBoundaryProgress) {
     progressEl = document.createElement("div");
     Object.assign(progressEl.style, {
       position: "absolute",
@@ -706,7 +1007,7 @@ function createPlayer(opts) {
   actorLayer.appendChild(titleEl);
   const nodeEls = /* @__PURE__ */ new Map();
   for (const node of plan.nodes) {
-    const el = createNodeEl(node, plan.theme);
+    const el = createNodeEl(node, plan.theme, assets);
     actorLayer.appendChild(el);
     nodeEls.set(node.id, el);
   }
@@ -726,6 +1027,7 @@ function createPlayer(opts) {
     anim.currentTime = 0;
   }
   let sceneMs = 0;
+  let playbackRate = Number.isFinite(initialPlaybackRate) && initialPlaybackRate > 0 ? initialPlaybackRate : 1;
   let lastRafTs = null;
   let isPlaying = false;
   let rafId = null;
@@ -734,7 +1036,7 @@ function createPlayer(opts) {
     onTimeUpdate?.(sceneMs / 1e3, durationSeconds);
   }
   function rafTick(timestamp) {
-    if (lastRafTs !== null) sceneMs += timestamp - lastRafTs;
+    if (lastRafTs !== null) sceneMs += (timestamp - lastRafTs) * playbackRate;
     lastRafTs = timestamp;
     if (totalDurationMs > 0 && sceneMs >= totalDurationMs) {
       if (loop) sceneMs = sceneMs % totalDurationMs;
@@ -773,6 +1075,13 @@ function createPlayer(opts) {
       applyCurrentTime();
       if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
     },
+    setPlaybackRate(rate) {
+      if (!Number.isFinite(rate) || rate <= 0) return;
+      playbackRate = rate;
+    },
+    playbackRate() {
+      return playbackRate;
+    },
     currentTime() {
       return sceneMs / 1e3;
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Browser renderer for animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -43,19 +43,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.1"
+    "@markdy/core": "0.8.3"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.1"
+    "@markdy/stdlib-systems": "0.8.3"
   },
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit",
     "lint": "tsc --noEmit",
-    "test": "vitest run"
+    "test": "vitest run",
+    "harness": "pnpm --filter @markdy/core run build && pnpm run build && node harness/serve.mjs"
   }
 }