@markdy/renderer-dom 0.8.0 → 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

@@ -62,25 +62,57 @@ function polylineLength(points) {
 function segmentLength(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
-function labelPointForPath(points, lane) {
-  if (points.length < 2) return points[0] ?? { x: 0, y: 0 };
+var LABEL_BOX_HEIGHT = 16;
+function rectsOverlap(a, b) {
+  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+function overlapCount(rect, obstacles) {
+  let hits = 0;
+  for (const o of obstacles) if (rectsOverlap(rect, o)) hits++;
+  return hits;
+}
+function placeFlowLabel(points, textWidth, obstacles, bounds) {
   let bestIndex = 0;
   let bestLength = -1;
   for (let i = 0; i < points.length - 1; i++) {
     const len = segmentLength(points[i], points[i + 1]);
     if (len > bestLength) {
-      bestIndex = i;
       bestLength = len;
+      bestIndex = i;
     }
   }
-  const a = points[bestIndex];
-  const b = points[bestIndex + 1];
+  const a = points[bestIndex] ?? { x: 0, y: 0 };
+  const b = points[bestIndex + 1] ?? a;
   const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-  const offset = lane * 8;
-  if (Math.abs(a.x - b.x) >= Math.abs(a.y - b.y)) {
-    return { x: round1(mid.x), y: round1(mid.y - 10 - offset) };
+  const horizontal = Math.abs(a.x - b.x) >= Math.abs(a.y - b.y);
+  const half = textWidth / 2;
+  const halfH = LABEL_BOX_HEIGHT / 2;
+  const pad = 8;
+  const base = horizontal ? 14 : half + 12;
+  const step = horizontal ? LABEL_BOX_HEIGHT + 4 : textWidth + 12;
+  const order = horizontal ? [-1, 1] : [1, -1];
+  const offsets = [];
+  for (let k = 0; k < 8; k++) {
+    for (const sign of order) offsets.push(sign * (base + k * step));
+  }
+  let fallback = null;
+  let fallbackHits = Number.POSITIVE_INFINITY;
+  for (const off of offsets) {
+    const cx = clamp(horizontal ? mid.x : mid.x + off, pad + half, bounds.width - pad - half);
+    const cy = clamp(horizontal ? mid.y + off : mid.y, pad + halfH, bounds.height - pad - halfH);
+    const rect = { x1: cx - half, y1: cy - halfH, x2: cx + half, y2: cy + halfH };
+    const hits = overlapCount(rect, obstacles);
+    if (hits === 0) return { x: round1(cx), y: round1(cy), rect };
+    if (hits < fallbackHits) {
+      fallbackHits = hits;
+      fallback = { x: round1(cx), y: round1(cy), rect };
+    }
   }
-  return { x: round1(mid.x + 10 + offset), y: round1(mid.y) };
+  return fallback ?? {
+    x: round1(mid.x),
+    y: round1(mid.y),
+    rect: { x1: mid.x - half, y1: mid.y - halfH, x2: mid.x + half, y2: mid.y + halfH }
+  };
 }
 function clamp(n, min, max) {
   if (max < min) return n;
@@ -214,11 +246,11 @@ function ensureDefs(svg, theme, id) {
   }
   svg.prepend(defs);
 }
-function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, obstacles, bounds) {
+function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObstacles, labelObstacles, bounds, lane) {
   ensureDefs(svg, theme, sceneId);
   const color = theme.edges[kind];
   const style = EDGE_STYLES[kind];
-  const points = dedupePoints(routeOrthogonal(boxRect(from), boxRect(to), obstacles, bounds));
+  const points = dedupePoints(routeOrthogonal(boxRect(from), boxRect(to), routeObstacles, bounds, lane));
   const d = toPathD(points);
   const len = polylineLength(points);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
@@ -243,21 +275,29 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, obstacles
   dot.style.filter = `drop-shadow(0 0 6px ${color})`;
   group.append(path, dot);
   let labelEl;
+  let labelRect;
   if (label) {
-    const mid = labelPointForPath(points, 0);
+    const textWidth = label.length * 6.6 + 10;
+    const placement = placeFlowLabel(points, textWidth, labelObstacles, bounds);
+    labelRect = placement.rect;
     labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
-    labelEl.setAttribute("x", String(mid.x));
-    labelEl.setAttribute("y", String(mid.y));
+    labelEl.setAttribute("x", String(placement.x));
+    labelEl.setAttribute("y", String(placement.y));
     labelEl.setAttribute("text-anchor", "middle");
+    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.textContent = label;
     labelEl.style.opacity = "0";
     group.appendChild(labelEl);
   }
   svg.appendChild(group);
-  return { group, path, label: labelEl, dot, pathLen: len, points };
+  return { group, path, label: labelEl, dot, pathLen: len, points, labelRect };
 }
 function dotTravelKeyframes(points) {
   const total = polylineLength(points);
@@ -309,6 +349,9 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
   const anims = [];
   const nodeById = new Map(nodes.map((n) => [n.id, n]));
   const rectById = new Map(nodes.map((n) => [n.id, boxRect(n)]));
+  const allNodeRects = [...rectById.values()];
+  const placedLabels = [];
+  const laneByPair = /* @__PURE__ */ new Map();
   const svg = ensureEdgeLayer(scene);
   const sceneId = `md-${Math.random().toString(36).slice(2, 8)}`;
   anims.push(
@@ -376,11 +419,16 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
       const from = nodeById.get(seg.from);
       const to = nodeById.get(seg.to);
       if (!from || !to) continue;
-      const obstacles = [];
+      const routeObstacles = [];
       for (const [id, rect] of rectById) {
-        if (id !== seg.from && id !== seg.to) obstacles.push(rect);
+        if (id !== seg.from && id !== seg.to) routeObstacles.push(rect);
       }
-      const runtime = createEdgeRuntime(svg, from, to, seg.op, seg.label, theme, sceneId, obstacles, bounds);
+      const pairKey = [seg.from, seg.to].sort().join("|");
+      const lane = laneByPair.get(pairKey) ?? 0;
+      laneByPair.set(pairKey, lane + 1);
+      const labelObstacles = [...allNodeRects, ...placedLabels];
+      const runtime = createEdgeRuntime(svg, from, to, seg.op, seg.label, theme, sceneId, routeObstacles, labelObstacles, bounds, lane);
+      if (runtime.labelRect) placedLabels.push(runtime.labelRect);
       anims.push(...animateEdgeReveal(runtime, startMs, durMs));
     }
   }
@@ -400,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);
@@ -431,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;
@@ -471,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";
@@ -482,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) {
@@ -567,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);
@@ -587,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",
@@ -678,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;
@@ -686,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;
@@ -725,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,7 +1,7 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.0",
-  "description": "Web Animations API renderer for MarkdyScript scenes.",
+  "version": "0.8.2",
+  "description": "Browser renderer for animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -20,14 +20,14 @@
   },
   "keywords": [
     "markdy",
-    "animation",
+    "animated-diagram",
+    "architecture-diagram",
+    "diagram-as-code",
     "web-animations-api",
     "renderer",
-    "dom",
-    "declarative-animation",
-    "motion",
-    "framer-motion-alternative",
-    "gsap-alternative"
+    "mermaid-alternative",
+    "svg",
+    "motion"
   ],
   "author": "Hoang Yell <hoangyell@gmail.com> (https://hoangyell.com)",
   "homepage": "https://markdy.com",
@@ -43,14 +43,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.0"
+    "@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.0"
+    "@markdy/stdlib-systems": "0.8.2"
   },
   "scripts": {
     "build": "tsup",