@markdy/renderer-dom 0.8.1 → 0.8.2

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`
 
@@ -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,12 @@ interface PlayerOptions {
     autoplay?: boolean;
     loop?: boolean;
     copyright?: boolean;
+    /** @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 +24,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

@@ -448,7 +448,7 @@ function ensureNodeStyles(doc) {
   box-sizing: border-box;
   width: var(--md-node-w, 184px);
   height: var(--md-node-h, 88px);
-  border-radius: 16px;
+  border-radius: 14px;
   border: 1px solid var(--md-border);
   background: linear-gradient(145deg, var(--md-surface-raised), var(--md-surface));
   color: var(--md-text);
@@ -479,15 +479,41 @@ function ensureNodeStyles(doc) {
   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);
+  display: none;
+}
+.markdy-node__body {
+  height: 100%;
+  padding: 0 14px 0 18px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+.markdy-node__icon {
+  flex: 0 0 auto;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--md-role-color, var(--md-accent));
+  background: color-mix(in srgb, var(--md-role-color, var(--md-accent)) 16%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--md-role-color, var(--md-accent)) 28%, transparent) inset;
+}
+.markdy-node__icon svg {
+  width: 18px;
+  height: 18px;
+  display: block;
+  stroke: currentColor;
+}
+.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;
+  min-width: 0;
+  padding: 0;
   font-size: 15px;
   font-weight: 650;
   line-height: 1.25;
@@ -519,6 +545,139 @@ function ensureNodeStyles(doc) {
 `;
   doc.head.appendChild(style);
 }
+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" }]
+  ],
+  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) {
+  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 === "worker" || node.kind === "job" || node.kind === "scheduler" || node.kind === "cron" || node.kind === "batch") return "worker";
+  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 createIconEl(doc, node) {
+  const wrap = doc.createElement("div");
+  wrap.className = "markdy-node__icon";
+  wrap.setAttribute("aria-hidden", "true");
+  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", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const spec = ICONS[iconKeyForNode(node)] ?? ICONS.service;
+  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);
+  return wrap;
+}
 function createNodeEl(node, theme) {
   const el = document.createElement("div");
   el.className = "markdy-node markdy-scene-actor";
@@ -530,15 +689,24 @@ 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 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 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, " ");
+  type.textContent = typeText;
+  const body = document.createElement("div");
+  body.className = "markdy-node__body";
+  const icon = createIconEl(document, node);
   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(rail, type, body);
   return el;
 }
 function createTitleEl(title) {
@@ -615,11 +783,14 @@ function createPlayer(opts) {
     autoplay = true,
     loop = true,
     copyright = true,
-    progressBar = true,
+    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 +806,7 @@ function createPlayer(opts) {
   });
   container.appendChild(viewport);
   let progressEl = null;
-  if (progressBar) {
+  if (showSceneBoundaryProgress) {
     progressEl = document.createElement("div");
     Object.assign(progressEl.style, {
       position: "absolute",
@@ -726,6 +897,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 +906,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 +945,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.2",
   "description": "Browser renderer for animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -43,14 +43,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.1"
+    "@markdy/core": "0.8.2"
   },
   "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.2"
   },
   "scripts": {
     "build": "tsup",