@markdy/renderer-dom 0.8.2 → 0.8.4

package/README.md

@@ -37,12 +37,12 @@ This package consumes parsed AST and drives DOM + Web Animations API timelines.
 ## Usage
 
 ```typescript
-import { createPlayer } from "@markdy/renderer-dom";
+import { createDiagram } from "@markdy/renderer-dom";
 
-const player = createPlayer({
+const diagram = createDiagram({
   container: document.getElementById("scene")!,
   code: `
-    scene "Request" theme=midnight
+    scene "Request" theme=paper
     browser Web
     service API
     beat main:
@@ -53,15 +53,15 @@ const player = createPlayer({
 });
 
 // Playback control
-player.pause();
-player.seek(1.5);   // jump to 1.5 seconds
-player.play();
-player.destroy();    // clean up DOM + cancel animations
+diagram.pause();
+diagram.seek(1.5);   // jump to 1.5 seconds
+diagram.play();
+diagram.destroy();    // clean up DOM + cancel animations
 ```
 
 ## API
 
-### `createPlayer(options: PlayerOptions): Player`
+### `createDiagram(options: DiagramOptions): Diagram`
 
 | Option | Type | Default | Description |
 |---|---|---|---|
@@ -77,7 +77,7 @@ player.destroy();    // clean up DOM + cancel animations
 | `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 |
 
-### `Player`
+### `Diagram`
 
 | Method | Description |
 |---|---|
@@ -97,8 +97,8 @@ player.destroy();    // clean up DOM + cancel animations
 
 ```
 src/
-  index.ts        — Barrel exports (createPlayer)
-  player.ts       — Public API, rAF loop, progress bar, responsive scaling
+  index.ts        — Barrel exports (createDiagram)
+  diagram.ts      — Public API, rAF loop, progress bar, responsive scaling
   nodes.ts        — Node element factory + scene title
   edges.ts        — Flow-edge SVG runtime, routing, and cue animations
   geometry/

package/dist/index.d.ts

@@ -1,15 +1,21 @@
 import { BeatRange, Diagnostic } from '@markdy/core';
 
 /**
- * Diagram-native Markdy player — renders RenderPlan via WAAPI.
+ * Markdy diagram runtime — renders a RenderPlan via WAAPI.
  */
 
-interface PlayerOptions {
+interface DiagramOptions {
     container: HTMLElement;
     code: string;
     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. */
@@ -20,7 +26,7 @@ interface PlayerOptions {
     onTimeUpdate?: (seconds: number, durationSeconds: number) => void;
     onPlayStateChange?: (playing: boolean) => void;
 }
-interface Player {
+interface Diagram {
     play(): void;
     pause(): void;
     seek(seconds: number): void;
@@ -33,6 +39,6 @@ interface Player {
     seekToBeat(name: string): void;
     destroy(): void;
 }
-declare function createPlayer(opts: PlayerOptions): Player;
+declare function createDiagram(opts: DiagramOptions): Diagram;
 
-export { type Player, type PlayerOptions, createPlayer };
+export { type Diagram, type DiagramOptions, createDiagram };

package/dist/index.js

@@ -1,4 +1,4 @@
-// src/player.ts
+// src/diagram.ts
 import { parseAndCompile } from "@markdy/core";
 
 // src/geometry/rect.ts
@@ -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,42 +465,46 @@ function ensureNodeStyles(doc) {
   box-sizing: border-box;
   width: var(--md-node-w, 184px);
   height: var(--md-node-h, 88px);
-  border-radius: 14px;
-  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;
-}
-.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 {
-  display: none;
+  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 { display: none; }
+.markdy-node__type { display: none; }
 .markdy-node__body {
   height: 100%;
-  padding: 0 14px 0 18px;
+  padding: 0 13px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -493,43 +514,69 @@ function ensureNodeStyles(doc) {
   flex: 0 0 auto;
   width: 30px;
   height: 30px;
-  border-radius: 10px;
+  border-radius: 8px;
   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;
+  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: 18px;
-  height: 18px;
+  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 {
+  flex: 1 1 auto;
   min-width: 0;
   padding: 0;
-  font-size: 15px;
-  font-weight: 650;
-  line-height: 1.25;
-  white-space: nowrap;
+  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;
@@ -636,6 +683,49 @@ var ICONS = {
     ["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" }]
@@ -647,41 +737,81 @@ var ICONS = {
   ]
 };
 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 === "worker" || node.kind === "job" || node.kind === "scheduler" || node.kind === "cron" || node.kind === "batch") return "worker";
+  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 createIconEl(doc, node) {
-  const wrap = doc.createElement("div");
-  wrap.className = "markdy-node__icon";
-  wrap.setAttribute("aria-hidden", "true");
+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", "2");
+  svg.setAttribute("stroke-width", "1.75");
   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);
+}
+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) {
+function createNodeEl(node, theme, assets) {
   const el = document.createElement("div");
-  el.className = "markdy-node markdy-scene-actor";
-  el.dataset.actor = node.id;
+  el.className = "markdy-node markdy-scene-node";
+  el.dataset.node = node.id;
   el.dataset.role = node.role;
   el.style.left = `${node.x}px`;
   el.style.top = `${node.y}px`;
@@ -694,19 +824,14 @@ function createNodeEl(node, theme) {
   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 = typeText;
   const body = document.createElement("div");
   body.className = "markdy-node__body";
-  const icon = createIconEl(document, node);
+  const icon = createNodeMediaEl(document, node, assets);
   const label = document.createElement("div");
   label.className = "markdy-node__label";
   label.textContent = node.label;
   body.append(icon, label);
-  el.append(rail, type, body);
+  el.append(body);
   return el;
 }
 function createTitleEl(title) {
@@ -740,18 +865,18 @@ 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 {
+.markdy-scene-node-layer {
   position: absolute;
   inset: 0;
   overflow: visible;
@@ -772,17 +897,22 @@ 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;
 }
 
-// src/player.ts
-function createPlayer(opts) {
+// src/diagram.ts
+function createDiagram(opts) {
   const {
     container,
     code,
     autoplay = true,
     loop = true,
     copyright = true,
+    assets,
     progressBar,
     sceneBoundaryProgress,
     playbackRate: initialPlaybackRate = 1,
@@ -870,15 +1000,15 @@ function createPlayer(opts) {
   sceneContent.className = "markdy-scene-content";
   Object.assign(sceneContent.style, { position: "absolute", inset: "0" });
   scene.appendChild(sceneContent);
-  const actorLayer = document.createElement("div");
-  actorLayer.className = "markdy-scene-actor-layer";
-  sceneContent.appendChild(actorLayer);
+  const nodeLayer = document.createElement("div");
+  nodeLayer.className = "markdy-scene-node-layer";
+  sceneContent.appendChild(nodeLayer);
   const titleEl = createTitleEl(plan.title);
-  actorLayer.appendChild(titleEl);
+  nodeLayer.appendChild(titleEl);
   const nodeEls = /* @__PURE__ */ new Map();
   for (const node of plan.nodes) {
-    const el = createNodeEl(node, plan.theme);
-    actorLayer.appendChild(el);
+    const el = createNodeEl(node, plan.theme, assets);
+    nodeLayer.appendChild(el);
     nodeEls.set(node.id, el);
   }
   function scaleScene() {
@@ -924,7 +1054,7 @@ function createPlayer(opts) {
     if (totalDurationMs > 0) updateProgressBar(sceneMs / totalDurationMs);
     rafId = requestAnimationFrame(rafTick);
   }
-  const player = {
+  const diagram = {
     play() {
       if (isPlaying) return;
       isPlaying = true;
@@ -966,10 +1096,10 @@ function createPlayer(opts) {
     },
     seekToBeat(name) {
       const beat = plan.beats.find((b) => b.name === name);
-      if (beat) player.seek(beat.start);
+      if (beat) diagram.seek(beat.start);
     },
     destroy() {
-      player.pause();
+      diagram.pause();
       for (const anim of allAnims) anim.cancel();
       resizeObserver.disconnect();
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
@@ -979,15 +1109,15 @@ function createPlayer(opts) {
   };
   viewport.style.cursor = "pointer";
   viewport.addEventListener("click", () => {
-    if (isPlaying) player.pause();
+    if (isPlaying) diagram.pause();
     else {
       if (!loop && sceneMs >= totalDurationMs) sceneMs = 0;
-      player.play();
+      diagram.play();
     }
   });
-  if (autoplay) player.play();
-  return player;
+  if (autoplay) diagram.play();
+  return diagram;
 }
 export {
-  createPlayer
+  createDiagram
 };

package/package.json

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