@markdy/renderer-dom 0.8.10 → 0.8.12

package/README.md

@@ -8,10 +8,11 @@ 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
+- **Focused diagram visuals** — flowchart shapes, tree buses, state self-loops, sequence lifelines/messages, constellation orbits, group zones, and annotations
 - **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
+- **Semantic themes** — `paper`, `editorial`, `nebula`, `midnight`, `blueprint`, and `graphite`, with per-role node and edge colors
 - **Single dependency** — only `@markdy/core`
 
 ## Installation
@@ -101,6 +102,11 @@ src/
   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
+  sequence.ts     — Participant lifelines, messages, and activation spans
+  tree.ts         — Shared parent/child bus connectors
+  groups.ts       — Group boundary zones
+  annotations.ts  — Editorial callouts and leader lines
+  constellation.ts — Nebula halos, orbit rings, and deterministic stars
   geometry/
     rect.ts       — Rects, points, and hit-testing (DOM-free, unit tested)
     path.ts       — Polyline measurement + obstacle-aware orthogonal routing

package/dist/index.d.ts

@@ -41,4 +41,9 @@ interface Diagram {
 }
 declare function createDiagram(opts: DiagramOptions): Diagram;
 
-export { type Diagram, type DiagramOptions, createDiagram };
+type SvgSpec = Array<[string, Record<string, string>]>;
+type IconSpec = SvgSpec;
+/** Read-only monochrome glyph registry; callers can inspect or choose keys without injecting markup. */
+declare const ICON_REGISTRY: Readonly<Record<string, IconSpec>>;
+
+export { type Diagram, type DiagramOptions, ICON_REGISTRY, type IconSpec, createDiagram };

package/dist/index.js

@@ -49,8 +49,55 @@ function countPathIntersections(points, obstacles) {
 function round1(n) {
   return Math.round(n * 10) / 10;
 }
-function toPathD(points) {
-  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round1(p.x)} ${round1(p.y)}`).join(" ");
+function toPathD(points, cornerRadius = 8) {
+  if (points.length < 2) return "";
+  if (points.length === 2) {
+    const [a, b] = points;
+    return `M ${round1(a.x)} ${round1(a.y)} L ${round1(b.x)} ${round1(b.y)}`;
+  }
+  if (cornerRadius <= 0) {
+    return points.map((p, i) => i === 0 ? `M ${round1(p.x)} ${round1(p.y)}` : `L ${round1(p.x)} ${round1(p.y)}`).join(" ");
+  }
+  const parts = [`M ${round1(points[0].x)} ${round1(points[0].y)}`];
+  for (let i = 1; i < points.length; i++) {
+    const prev = points[i - 1];
+    const cur = points[i];
+    const next = points[i + 1];
+    if (!next) {
+      parts.push(`L ${round1(cur.x)} ${round1(cur.y)}`);
+      continue;
+    }
+    const dx1 = cur.x - prev.x;
+    const dy1 = cur.y - prev.y;
+    const dx2 = next.x - cur.x;
+    const dy2 = next.y - cur.y;
+    const len1 = Math.hypot(dx1, dy1);
+    const len2 = Math.hypot(dx2, dy2);
+    if (len1 < 0.01 || len2 < 0.01) {
+      parts.push(`L ${round1(cur.x)} ${round1(cur.y)}`);
+      continue;
+    }
+    const r = Math.min(cornerRadius, len1 / 2, len2 / 2);
+    const bx = cur.x - dx1 / len1 * r;
+    const by = cur.y - dy1 / len1 * r;
+    const ax = cur.x + dx2 / len2 * r;
+    const ay = cur.y + dy2 / len2 * r;
+    parts.push(`L ${round1(bx)} ${round1(by)}`);
+    parts.push(`Q ${round1(cur.x)} ${round1(cur.y)} ${round1(ax)} ${round1(ay)}`);
+  }
+  return parts.join(" ");
+}
+function selfLoopPath(rect) {
+  const top = rect.y;
+  const left = rect.x + rect.width * 0.25;
+  const right = rect.x + rect.width * 0.75;
+  const apex = top - 36;
+  return [
+    { x: left, y: top },
+    { x: left, y: apex },
+    { x: right, y: apex },
+    { x: right, y: top }
+  ];
 }
 function polylineLength(points) {
   let total = 0;
@@ -125,6 +172,11 @@ function clampPointToScene(point, bounds) {
     y: round1(clamp(point.y, pad, bounds.height - pad))
   };
 }
+function laneOffset(lane) {
+  if (lane <= 0) return 0;
+  const step = Math.ceil(lane / 2);
+  return (lane % 2 === 1 ? 1 : -1) * step * 18;
+}
 function routeLength(points) {
   let total = 0;
   for (let i = 0; i < points.length - 1; i++) total += segmentLength(points[i], points[i + 1]);
@@ -145,12 +197,24 @@ function routeBends(points) {
   return bends;
 }
 function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
-  const laneShift = lane * 18;
+  const laneShift = laneOffset(lane);
   const sourceCenter = rectCenter(sourceRect);
   const targetCenter = rectCenter(targetRect);
   const horizontalPrimary = Math.abs(targetCenter.x - sourceCenter.x) >= Math.abs(targetCenter.y - sourceCenter.y);
-  const source = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? sourceRect.x2 : sourceRect.x1, y: sourceCenter.y } : { x: sourceCenter.x, y: targetCenter.y >= sourceCenter.y ? sourceRect.y2 : sourceRect.y1 };
-  const target = horizontalPrimary ? { x: targetCenter.x >= sourceCenter.x ? targetRect.x1 : targetRect.x2, y: targetCenter.y } : { x: targetCenter.x, y: targetCenter.y >= sourceCenter.y ? targetRect.y1 : targetRect.y2 };
+  const source = horizontalPrimary ? {
+    x: targetCenter.x >= sourceCenter.x ? sourceRect.x2 : sourceRect.x1,
+    y: clamp(sourceCenter.y + laneShift, sourceRect.y1 + 12, sourceRect.y2 - 12)
+  } : {
+    x: clamp(sourceCenter.x + laneShift, sourceRect.x1 + 12, sourceRect.x2 - 12),
+    y: targetCenter.y >= sourceCenter.y ? sourceRect.y2 : sourceRect.y1
+  };
+  const target = horizontalPrimary ? {
+    x: targetCenter.x >= sourceCenter.x ? targetRect.x1 : targetRect.x2,
+    y: clamp(targetCenter.y + laneShift, targetRect.y1 + 12, targetRect.y2 - 12)
+  } : {
+    x: clamp(targetCenter.x + laneShift, targetRect.x1 + 12, targetRect.x2 - 12),
+    y: targetCenter.y >= sourceCenter.y ? targetRect.y1 : targetRect.y2
+  };
   const infl = obstacles.map((o) => inflateRect(o, 8));
   const candidates = [];
   if (Math.abs(source.y - target.y) < 1e-3 || Math.abs(source.x - target.x) < 1e-3) {
@@ -203,6 +267,11 @@ var INITIAL_CAMERA_TRANSFORM = "translate(0px, 0px) scale(1)";
 var DEFAULT_FRAME_ZOOM = 1.18;
 var MAX_FRAME_ZOOM = 1.75;
 var FRAME_PADDING = 88;
+var edgeSceneCounter = 0;
+function createEdgeSceneId() {
+  edgeSceneCounter += 1;
+  return `md-scene-${edgeSceneCounter}`;
+}
 function dedupePoints(points) {
   const out = [];
   for (const p of points) {
@@ -243,8 +312,18 @@ function ensureDefs(svg, theme, id) {
     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.5 1.6 L 9 5 L 1.5 8.4 L 3.4 5 Z");
-    path.setAttribute("fill", color);
+    if (kind === "response") {
+      path.setAttribute("d", "M 1.5 1.6 L 9 5 L 1.5 8.4");
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke", color);
+      path.setAttribute("stroke-width", "1.4");
+    } else if (kind === "event") {
+      path.setAttribute("d", "M 5 2 A 3 3 0 1 1 5 8 A 3 3 0 1 1 5 2");
+      path.setAttribute("fill", color);
+    } else {
+      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);
   }
@@ -254,7 +333,8 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
   ensureDefs(svg, theme, sceneId);
   const color = theme.edges[kind];
   const style = EDGE_STYLES[kind];
-  const points = dedupePoints(routeOrthogonal(boxRect(from), boxRect(to), routeObstacles, bounds, lane));
+  const isSelfLoop = from.id === to.id;
+  const points = isSelfLoop ? dedupePoints(selfLoopPath(from)) : 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");
@@ -272,7 +352,7 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
     path.setAttribute("marker-end", `url(#${sceneId}-arrow-${kind})`);
   }
   if (kind !== "dependency") {
-    path.style.filter = `drop-shadow(0 0 3px ${color}33)`;
+    path.style.filter = `drop-shadow(0 0 3px ${translucentColor(color, "33")})`;
   }
   const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
   dot.setAttribute("r", "3.5");
@@ -314,7 +394,40 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
     labelEl.__plate = plate;
   }
   svg.appendChild(group);
-  return { group, path, label: labelEl, dot, pathLen: len, points, labelRect };
+  return {
+    group,
+    path,
+    label: labelEl,
+    labelPlate: labelEl ? labelEl.__plate : void 0,
+    dot,
+    pathLen: len,
+    points,
+    labelRect,
+    kind,
+    color,
+    drawReveal: style.dash.length === 0
+  };
+}
+function setEdgeVisible(runtime, visible) {
+  runtime.group.style.opacity = visible ? "1" : "0";
+  if (runtime.label) runtime.label.style.opacity = visible ? "1" : "0";
+  if (runtime.labelPlate) runtime.labelPlate.style.opacity = visible ? "1" : "0";
+}
+function translucentColor(color, alpha = "aa") {
+  const value = color.trim();
+  if (/^#[0-9a-f]{3}$/i.test(value)) {
+    return `#${value.slice(1).split("").map((char) => char + char).join("")}${alpha}`;
+  }
+  if (/^#[0-9a-f]{6}$/i.test(value)) return `${value}${alpha}`;
+  if (/^#[0-9a-f]{8}$/i.test(value)) return value;
+  return `color-mix(in srgb, ${value} 67%, transparent)`;
+}
+function nextEdgeLane(lanes, from, to) {
+  const pair = [from, to].sort().join("|");
+  const keys = [`pair:${pair}`, `out:${from}`, `in:${to}`];
+  const lane = Math.max(...keys.map((key) => lanes.get(key) ?? 0));
+  for (const key of keys) lanes.set(key, (lanes.get(key) ?? 0) + 1);
+  return lane;
 }
 function dotTravelKeyframes(points) {
   const total = polylineLength(points);
@@ -337,21 +450,24 @@ function dotTravelKeyframes(points) {
 function animateEdgeReveal(runtime, startMs, durMs) {
   const anims = [];
   const { path, dot, label, group, pathLen, points } = runtime;
-  path.style.strokeDasharray = String(pathLen);
-  path.style.strokeDashoffset = String(pathLen);
+  if (runtime.drawReveal) {
+    path.style.strokeDasharray = String(pathLen);
+    path.style.strokeDashoffset = String(pathLen);
+  }
   const drawMs = Math.min(220, durMs * 0.5);
-  anims.push(
-    group.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120, delay: startMs, fill: "forwards" }),
-    path.animate(
-      [{ strokeDashoffset: pathLen }, { strokeDashoffset: 0 }],
-      { duration: drawMs, delay: startMs, fill: "forwards", easing: "ease-out" }
-    )
-  );
+  anims.push(group.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 120, delay: startMs, fill: "forwards" }));
+  if (runtime.drawReveal) {
+    anims.push(
+      path.animate(
+        [{ strokeDashoffset: pathLen }, { strokeDashoffset: 0 }],
+        { duration: drawMs, delay: startMs, fill: "forwards", easing: "ease-out" }
+      )
+    );
+  }
   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 (runtime.labelPlate) {
+      anims.push(runtime.labelPlate.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, delay: startMs + 80, fill: "forwards" }));
     }
   }
   if (points.length >= 2) {
@@ -366,6 +482,16 @@ function animateEdgeReveal(runtime, startMs, durMs) {
   }
   return anims;
 }
+function animateEdgeEmphasis(runtime, startMs, durMs, strength, color) {
+  const baseFilter = runtime.kind === "dependency" ? "none" : `drop-shadow(0 0 3px ${translucentColor(runtime.color, "33")})`;
+  const glowColor = color ?? runtime.color;
+  const radius = Math.max(4, Math.min(16, 5 + strength * 4));
+  const peakFilter = `drop-shadow(0 0 ${radius}px ${translucentColor(glowColor)}) brightness(${1 + Math.min(strength, 2) * 0.08})`;
+  return runtime.path.animate(
+    [{ filter: baseFilter }, { filter: peakFilter }, { filter: baseFilter }],
+    { duration: durMs, delay: startMs, fill: "none", easing: "ease-in-out" }
+  );
+}
 function computeFrameTransform(targetIds, nodes, bounds, requestedZoom = DEFAULT_FRAME_ZOOM) {
   const targets = new Set(targetIds);
   const selected = nodes.filter((node) => targets.has(node.id));
@@ -387,7 +513,7 @@ function computeFrameTransform(targetIds, nodes, bounds, requestedZoom = DEFAULT
   const ty = Math.round((bounds.height / 2 - centerY * scale) * 10) / 10;
   return `translate(${tx}px, ${ty}px) scale(${Math.round(scale * 1e3) / 1e3})`;
 }
-function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds) {
+function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds, edges = [], edgeRuntimes = /* @__PURE__ */ new Map(), sceneId = createEdgeSceneId(), diagramType = "architecture") {
   const anims = [];
   const nodeById = new Map(nodes.map((n) => [n.id, n]));
   const rectById = new Map(nodes.map((n) => [n.id, boxRect(n)]));
@@ -395,10 +521,37 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
   const placedLabels = [];
   const laneByPair = /* @__PURE__ */ new Map();
   const svg = ensureEdgeLayer(scene);
-  const sceneId = `md-${Math.random().toString(36).slice(2, 8)}`;
   let cameraTransform = scene.style.transform || INITIAL_CAMERA_TRANSFORM;
   scene.style.transformOrigin = "0 0";
   scene.style.transform = cameraTransform;
+  const edgeById = new Map(edges.map((edge) => [edge.id, edge]));
+  const edgeRects = [...allNodeRects];
+  const edgeRectById = new Map(nodes.map((node) => [node.id, boxRect(node)]));
+  const edgeLabels = [];
+  const edgeLanes = /* @__PURE__ */ new Map();
+  for (const edge of diagramType === "sequence" ? [] : edges) {
+    if (edge.structural || edgeRuntimes.has(edge.id)) continue;
+    const from = nodeById.get(edge.from);
+    const to = nodeById.get(edge.to);
+    if (!from || !to) continue;
+    const routeObstacles = [...edgeRectById.entries()].filter(([id]) => id !== from.id && id !== to.id).map(([, rect]) => rect);
+    const lane = nextEdgeLane(edgeLanes, edge.from, edge.to);
+    const runtime = createEdgeRuntime(
+      svg,
+      from,
+      to,
+      edge.kind,
+      edge.label,
+      theme,
+      sceneId,
+      routeObstacles,
+      [...edgeRects, ...edgeLabels],
+      bounds,
+      lane
+    );
+    if (runtime.labelRect) edgeLabels.push(runtime.labelRect);
+    edgeRuntimes.set(edge.id, runtime);
+  }
   anims.push(
     titleEl.animate(
       [{ opacity: 0, transform: "translateY(-6px)" }, { opacity: 1, transform: "translateY(0)" }],
@@ -411,37 +564,55 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
     if (cue.kind === "show") {
       cue.targets.forEach((id, idx) => {
         const el = nodeEls.get(id);
-        if (!el) return;
         const delay = startMs + (typeof cue.params.stagger === "number" ? cue.params.stagger * 1e3 * idx : 0);
-        anims.push(
-          el.animate(
-            [{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "translateY(0)" }],
-            { duration: durMs, delay, fill: "forwards", easing: "ease-out" }
-          )
-        );
+        if (el) {
+          anims.push(
+            el.animate(
+              [{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "translateY(0)" }],
+              { duration: durMs, delay, fill: "forwards", easing: "ease-out" }
+            )
+          );
+          return;
+        }
+        const runtime = edgeRuntimes.get(id);
+        if (runtime) anims.push(runtime.group.animate([{ opacity: 0 }, { opacity: 1 }], { duration: durMs, delay, fill: "forwards", easing: "ease-out" }));
       });
       continue;
     }
     if (cue.kind === "hide") {
       for (const id of cue.targets) {
         const el = nodeEls.get(id);
-        if (!el) continue;
-        anims.push(el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: durMs, delay: startMs, fill: "forwards" }));
+        if (el) {
+          anims.push(el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: durMs, delay: startMs, fill: "forwards" }));
+          continue;
+        }
+        const runtime = edgeRuntimes.get(id);
+        if (runtime) anims.push(runtime.group.animate([{ opacity: 1 }, { opacity: 0 }], { duration: durMs, delay: startMs, fill: "forwards" }));
       }
       continue;
     }
     if (cue.kind === "glow") {
+      const strength = typeof cue.params.strength === "number" ? cue.params.strength : 1;
+      const peak = 1 + 0.12 * strength;
       for (const id of cue.targets) {
         const el = nodeEls.get(id);
-        if (!el) continue;
-        if (cue.params.color) el.style.setProperty("--md-glow-color", String(cue.params.color));
-        el.dataset.glow = "1";
-        anims.push(
-          el.animate(
-            [{ filter: "brightness(1)" }, { filter: "brightness(1.15)" }, { filter: "brightness(1)" }],
-            { duration: durMs, delay: startMs, fill: "forwards" }
-          )
-        );
+        if (el) {
+          if (cue.params.color) el.style.setProperty("--md-glow-color", String(cue.params.color));
+          const glowColor = translucentColor(String(cue.params.color ?? "var(--md-accent)"));
+          anims.push(
+            el.animate(
+              [
+                { filter: "brightness(1)" },
+                { filter: `drop-shadow(0 0 ${Math.max(4, 4 + strength * 5)}px ${glowColor}) brightness(${peak})` },
+                { filter: "brightness(1)" }
+              ],
+              { duration: durMs, delay: startMs, fill: "none", easing: "ease-in-out" }
+            )
+          );
+          continue;
+        }
+        const runtime = edgeRuntimes.get(id);
+        if (runtime) anims.push(animateEdgeEmphasis(runtime, startMs, durMs, strength, typeof cue.params.color === "string" ? cue.params.color : void 0));
       }
       continue;
     }
@@ -449,20 +620,31 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
       const zoom = typeof cue.params.zoom === "number" && cue.params.zoom > 0 ? cue.params.zoom : 1.03;
       for (const id of cue.targets) {
         const el = nodeEls.get(id);
-        if (!el) continue;
-        el.dataset.focused = "1";
-        anims.push(
-          el.animate(
-            [{ transform: "scale(1)" }, { transform: `scale(${zoom})` }, { transform: "scale(1)" }],
-            { duration: durMs, delay: startMs, fill: "forwards" }
-          )
-        );
+        if (el) {
+          anims.push(
+            el.animate(
+              [
+                { transform: "scale(1)", filter: "none" },
+                { transform: `scale(${zoom})`, filter: "drop-shadow(0 0 7px var(--md-accent))" },
+                { transform: "scale(1)", filter: "none" }
+              ],
+              { duration: durMs, delay: startMs, fill: "none", easing: "ease-in-out" }
+            )
+          );
+          continue;
+        }
+        const runtime = edgeRuntimes.get(id);
+        if (runtime) anims.push(animateEdgeEmphasis(runtime, startMs, durMs, zoom, void 0));
       }
       continue;
     }
     if (cue.kind === "frame") {
+      const frameTargets = cue.targets.flatMap((id) => {
+        const edge = edgeById.get(id);
+        return edge ? [edge.from, edge.to] : [id];
+      });
       const nextTransform = computeFrameTransform(
-        cue.targets,
+        frameTargets,
         nodes,
         bounds,
         typeof cue.params.zoom === "number" ? cue.params.zoom : DEFAULT_FRAME_ZOOM
@@ -477,7 +659,7 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
       cameraTransform = nextTransform;
       continue;
     }
-    if (cue.kind === "flow" && cue.segments?.[0]) {
+    if (cue.kind === "flow" && cue.segments?.[0] && diagramType !== "sequence") {
       const seg = cue.segments[0];
       const from = nodeById.get(seg.from);
       const to = nodeById.get(seg.to);
@@ -486,26 +668,303 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds)
       for (const [id, rect] of rectById) {
         if (id !== seg.from && id !== seg.to) routeObstacles.push(rect);
       }
-      const pairKey = [seg.from, seg.to].sort().join("|");
-      const lane = laneByPair.get(pairKey) ?? 0;
-      laneByPair.set(pairKey, lane + 1);
+      const lane = nextEdgeLane(laneByPair, seg.from, seg.to);
       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);
+      const edgeId = cue.edgeId ?? edges.find(
+        (edge) => !edge.structural && edge.from === seg.from && edge.to === seg.to && edge.kind === seg.op && edge.label === seg.label
+      )?.id;
+      let runtime = edgeId ? edgeRuntimes.get(edgeId) : void 0;
+      if (!runtime) {
+        runtime = createEdgeRuntime(svg, from, to, seg.op, seg.label, theme, sceneId, routeObstacles, labelObstacles, bounds, lane);
+        if (runtime.labelRect) placedLabels.push(runtime.labelRect);
+        if (edgeId) edgeRuntimes.set(edgeId, runtime);
+      }
       anims.push(...animateEdgeReveal(runtime, startMs, durMs));
     }
   }
   for (const a of anims) a.pause();
   return anims;
 }
+function buildStructuralEdgeAnimations(edges, nodes, theme, scene, bounds, edgeRuntimes = /* @__PURE__ */ new Map(), sceneId = createEdgeSceneId(), diagramType = "architecture") {
+  const structural = edges.filter(
+    (e) => e.structural && diagramType !== "sequence" && !(diagramType === "tree" && !e.label)
+  );
+  if (structural.length === 0) return [];
+  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);
+  for (const edge of structural) {
+    const from = nodeById.get(edge.from);
+    const to = nodeById.get(edge.to);
+    if (!from || !to) continue;
+    const routeObstacles = [];
+    for (const [id, rect] of rectById) {
+      if (id !== edge.from && id !== edge.to) routeObstacles.push(rect);
+    }
+    const lane = nextEdgeLane(laneByPair, edge.from, edge.to);
+    const labelObstacles = [...allNodeRects, ...placedLabels];
+    const runtime = createEdgeRuntime(
+      svg,
+      from,
+      to,
+      edge.kind,
+      edge.label,
+      theme,
+      sceneId,
+      routeObstacles,
+      labelObstacles,
+      bounds,
+      lane
+    );
+    if (runtime.labelRect) placedLabels.push(runtime.labelRect);
+    setEdgeVisible(runtime, true);
+    edgeRuntimes.set(edge.id, runtime);
+  }
+  return [];
+}
 
-// src/nodes.ts
-var STYLE_ID = "markdy-diagram-node-styles";
-function ensureNodeStyles(doc) {
+// src/annotations.ts
+var STYLE_ID = "markdy-annotation-styles";
+function ensureAnnotationStyles(doc) {
   if (doc.getElementById(STYLE_ID)) return;
   const style = doc.createElement("style");
   style.id = STYLE_ID;
   style.textContent = `
+.markdy-annotation-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 150;
+}
+.markdy-annotation {
+  position: absolute;
+  max-width: 220px;
+  font-family: var(--md-font-title, Georgia, serif);
+  font-size: 14px;
+  font-style: italic;
+  color: var(--md-text);
+  line-height: 1.35;
+}
+.markdy-annotation__leader {
+  position: absolute;
+  pointer-events: none;
+}
+`;
+  doc.head.appendChild(style);
+}
+function positionForAnnotation(position, bounds, index) {
+  const pad = 24;
+  const p = (position ?? "").toLowerCase();
+  if (p.includes("top") && p.includes("right")) return { x: bounds.width - pad - 200, y: pad + index * 48 };
+  if (p.includes("top") && p.includes("left")) return { x: pad, y: pad + index * 48 };
+  if (p.includes("bottom") && p.includes("right")) return { x: bounds.width - pad - 200, y: bounds.height - pad - 40 };
+  if (p.includes("bottom") && p.includes("left")) return { x: pad, y: bounds.height - pad - 40 };
+  return { x: bounds.width - pad - 200, y: pad + index * 48 };
+}
+function mountAnnotations(layer, annotations, nodes, theme, bounds) {
+  if (annotations.length === 0) return;
+  const doc = layer.ownerDocument;
+  ensureAnnotationStyles(doc);
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.classList.add("markdy-annotation__leader");
+  Object.assign(svg.style, { position: "absolute", inset: "0", width: "100%", height: "100%", overflow: "visible" });
+  layer.appendChild(svg);
+  const nodeById = new Map(nodes.map((n) => [n.id, n]));
+  annotations.slice(0, 2).forEach((ann, index) => {
+    const pos = positionForAnnotation(ann.position, bounds, index);
+    const textEl = doc.createElement("div");
+    textEl.className = "markdy-annotation";
+    textEl.textContent = ann.text;
+    textEl.style.left = `${pos.x}px`;
+    textEl.style.top = `${pos.y}px`;
+    layer.appendChild(textEl);
+    const target = ann.target ? nodeById.get(ann.target) : void 0;
+    if (!target) return;
+    const tx = target.x + target.width / 2;
+    const ty = target.y + target.height / 2;
+    const ax = pos.x + 8;
+    const ay = pos.y + 16;
+    const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", `M ${ax} ${ay} Q ${(ax + tx) / 2} ${(ay + ty) / 2 - 20} ${tx} ${ty}`);
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", theme.textMuted);
+    path.setAttribute("stroke-width", "1");
+    path.setAttribute("stroke-dasharray", "4 3");
+    path.setAttribute("opacity", "0.55");
+    svg.appendChild(path);
+    const dot = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+    dot.setAttribute("cx", String(tx));
+    dot.setAttribute("cy", String(ty));
+    dot.setAttribute("r", "2");
+    dot.setAttribute("fill", theme.text);
+    svg.appendChild(dot);
+  });
+}
+
+// src/constellation.ts
+var constellationId = 0;
+function nextId() {
+  constellationId += 1;
+  return `md-constellation-${constellationId}`;
+}
+function appendCircle(doc, parent, cx, cy, radius, stroke, opacity, dash) {
+  const circle = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+  circle.setAttribute("cx", String(cx));
+  circle.setAttribute("cy", String(cy));
+  circle.setAttribute("r", String(radius));
+  circle.setAttribute("fill", "none");
+  circle.setAttribute("stroke", stroke);
+  circle.setAttribute("stroke-width", "1");
+  circle.setAttribute("opacity", opacity);
+  if (dash) circle.setAttribute("stroke-dasharray", dash);
+  parent.appendChild(circle);
+}
+function mountConstellationLayer(layer, nodes, theme, bounds) {
+  if (nodes.length === 0) return;
+  const doc = layer.ownerDocument;
+  Object.assign(layer.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "38",
+    pointerEvents: "none"
+  });
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  });
+  layer.appendChild(svg);
+  const focal = nodes.find((node) => node.focal) ?? nodes[0];
+  const centerX = focal.x + focal.width / 2;
+  const centerY = focal.y + focal.height / 2;
+  const radius = Math.max(120, Math.min(bounds.width, bounds.height) * 0.28);
+  const gradientId = `${nextId()}-halo`;
+  const defs = doc.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const gradient = doc.createElementNS("http://www.w3.org/2000/svg", "radialGradient");
+  gradient.setAttribute("id", gradientId);
+  const stopA = doc.createElementNS("http://www.w3.org/2000/svg", "stop");
+  stopA.setAttribute("offset", "0%");
+  stopA.setAttribute("stop-color", theme.accent);
+  stopA.setAttribute("stop-opacity", "0.24");
+  const stopB = doc.createElementNS("http://www.w3.org/2000/svg", "stop");
+  stopB.setAttribute("offset", "100%");
+  stopB.setAttribute("stop-color", theme.accent);
+  stopB.setAttribute("stop-opacity", "0");
+  gradient.append(stopA, stopB);
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  const halo = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+  halo.setAttribute("cx", String(centerX));
+  halo.setAttribute("cy", String(centerY));
+  halo.setAttribute("r", String(radius * 0.7));
+  halo.setAttribute("fill", `url(#${gradientId})`);
+  svg.appendChild(halo);
+  appendCircle(doc, svg, centerX, centerY, radius * 0.55, theme.rule ?? theme.border, "0.55", "2 8");
+  appendCircle(doc, svg, centerX, centerY, radius * 0.82, theme.rule ?? theme.border, "0.38", "1 11");
+  appendCircle(doc, svg, centerX, centerY, radius, theme.soft ?? theme.border, "0.22", "1 15");
+  for (const node of nodes) {
+    if (node.id === focal.id) continue;
+    const nodeX = node.x + node.width / 2;
+    const nodeY = node.y + node.height / 2;
+    const link = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+    link.classList.add("markdy-constellation-link");
+    link.setAttribute("x1", String(centerX));
+    link.setAttribute("y1", String(centerY));
+    link.setAttribute("x2", String(nodeX));
+    link.setAttribute("y2", String(nodeY));
+    link.setAttribute("stroke", theme.soft ?? theme.accent);
+    link.setAttribute("stroke-width", "1");
+    link.setAttribute("stroke-dasharray", "2 9");
+    link.setAttribute("opacity", "0.22");
+    svg.appendChild(link);
+  }
+  for (let index = 0; index < 28; index += 1) {
+    const angle = index * 2.399963;
+    const distance = 70 + index * 47 % 190;
+    const star = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+    star.classList.add("markdy-constellation-star");
+    star.setAttribute("cx", String(centerX + Math.cos(angle) * distance));
+    star.setAttribute("cy", String(centerY + Math.sin(angle) * distance * 0.72));
+    star.setAttribute("r", String(1 + index % 3 * 0.45));
+    star.setAttribute("fill", index % 4 === 0 ? theme.soft ?? theme.accent : theme.textMuted);
+    star.setAttribute("opacity", String(0.28 + index % 5 * 0.1));
+    star.style.animationDelay = `${-(index % 7) * 0.45}s`;
+    svg.appendChild(star);
+  }
+}
+
+// src/groups.ts
+var STYLE_ID2 = "markdy-group-boundary-styles";
+function ensureGroupStyles(doc) {
+  if (doc.getElementById(STYLE_ID2)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = `
+.markdy-group-boundary {
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed var(--md-group-border, color-mix(in srgb, var(--md-border) 70%, transparent));
+  border-radius: var(--md-radius-md, 8px);
+  background: color-mix(in srgb, var(--md-surface-raised) 40%, transparent);
+  pointer-events: none;
+  z-index: 40;
+}
+.markdy-group-boundary__label {
+  position: absolute;
+  left: 12px;
+  top: -10px;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--md-text-muted);
+  background: var(--md-canvas);
+  border: 1px solid var(--md-group-border, color-mix(in srgb, var(--md-border) 60%, transparent));
+  border-radius: 4px;
+  font-family: var(--md-font-mono, ui-monospace, monospace);
+}
+`;
+  doc.head.appendChild(style);
+}
+function createGroupBoundaryEl(boundary, theme, doc = document) {
+  const el = doc.createElement("div");
+  el.className = "markdy-group-boundary";
+  el.dataset.group = boundary.id;
+  el.style.left = `${boundary.x}px`;
+  el.style.top = `${boundary.y}px`;
+  el.style.width = `${boundary.width}px`;
+  el.style.height = `${boundary.height}px`;
+  el.style.setProperty("--md-group-border", theme.hairline ?? theme.border);
+  if (boundary.label) {
+    const label = document.createElement("div");
+    label.className = "markdy-group-boundary__label";
+    label.textContent = boundary.label;
+    el.appendChild(label);
+  }
+  return el;
+}
+function mountGroupBoundaries(layer, boundaries, theme) {
+  ensureGroupStyles(layer.ownerDocument);
+  for (const boundary of boundaries) {
+    layer.appendChild(createGroupBoundaryEl(boundary, theme, layer.ownerDocument));
+  }
+}
+
+// src/nodes.ts
+var STYLE_ID3 = "markdy-diagram-node-styles";
+function ensureNodeStyles(doc) {
+  if (doc.getElementById(STYLE_ID3)) return;
+  const style = doc.createElement("style");
+  style.id = STYLE_ID3;
+  style.textContent = `
 .markdy-node {
   position: absolute;
   box-sizing: border-box;
@@ -522,7 +981,7 @@ function ensureNodeStyles(doc) {
     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;
+  font-family: var(--md-font-node, Inter, ui-sans-serif, system-ui, sans-serif);
   overflow: hidden;
   opacity: 0;
   transform: translateY(8px);
@@ -616,6 +1075,13 @@ function ensureNodeStyles(doc) {
   word-break: break-word;
   text-wrap: balance;
 }
+.markdy-node__value {
+  flex: 0 0 auto;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--md-ink, var(--md-text));
+  font-variant-numeric: tabular-nums;
+}
 .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 {
@@ -630,12 +1096,71 @@ function ensureNodeStyles(doc) {
   color: var(--md-text);
   opacity: 0;
   transform: translateY(-6px);
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-family: var(--md-font-title, Inter, ui-sans-serif, system-ui, sans-serif);
 }
 .markdy-scene-title[data-visible="1"] {
   opacity: 1;
   transform: translateY(0);
 }
+.markdy-node[data-shape="diamond"] {
+  border-radius: 4px;
+  transform: rotate(0deg);
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+.markdy-node[data-shape="pill"] {
+  border-radius: 999px;
+  min-height: 56px;
+}
+.markdy-node[data-shape="circle"],
+.markdy-node[data-kind="dot"] {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+}
+.markdy-node[data-kind="matrix"] {
+  background-image:
+    linear-gradient(var(--md-hairline) 1px, transparent 1px),
+    linear-gradient(90deg, var(--md-hairline) 1px, transparent 1px);
+  background-size: 12px 12px;
+}
+.markdy-node[data-kind="track"] {
+  border-left: 4px solid var(--md-role-color, var(--md-accent));
+  border-radius: var(--md-radius-md, 8px);
+}
+.markdy-node[data-kind="token_strip"] {
+  border-radius: 999px;
+}
+.markdy-node[data-shape="rounded"] {
+  border-radius: 16px;
+}
+.markdy-node[data-shape="terminal"] {
+  border-radius: 6px;
+  font-family: var(--md-font-mono, ui-monospace, monospace);
+  box-shadow: none;
+  background: var(--md-node-surface, var(--md-surface));
+}
+.markdy-node[data-focal="1"] {
+  background: color-mix(in srgb, var(--md-accent-tint, var(--md-accent)) 100%, transparent);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--md-accent) 55%, transparent);
+}
+.markdy-scene-root[data-markdy-theme="nebula"] .markdy-node {
+  border: 1px solid color-mix(in srgb, var(--md-role-color, var(--md-accent)) 34%, transparent);
+  box-shadow:
+    0 0 24px -14px color-mix(in srgb, var(--md-role-color, var(--md-accent)) 80%, transparent),
+    inset 0 0 0 1px var(--md-hairline);
+}
+.markdy-scene-root[data-markdy-theme="nebula"] .markdy-node[data-focal="1"] {
+  box-shadow:
+    0 0 34px -8px color-mix(in srgb, var(--md-accent) 78%, transparent),
+    inset 0 0 0 1px var(--md-accent);
+}
+.markdy-scene-root[data-flat="1"] .markdy-node {
+  box-shadow: inset 0 0 0 1px var(--md-hairline, color-mix(in srgb, var(--md-border) 50%, transparent));
+}
+.markdy-scene-root[data-flat="1"] .markdy-node[data-visible="1"] {
+  box-shadow: inset 0 0 0 1px var(--md-hairline, color-mix(in srgb, var(--md-border) 50%, transparent));
+}
 `;
   doc.head.appendChild(style);
 }
@@ -644,6 +1169,14 @@ var ICONS = {
     ["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" }]
   ],
+  laptop: [
+    ["path", { d: "M3 19l18 0" }],
+    ["path", { d: "M5 7a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1l0 -8" }]
+  ],
+  phone: [
+    ["path", { d: "M6 5a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-14" }],
+    ["path", { d: "M10.5 18h3" }]
+  ],
   user: [
     ["circle", { cx: "12", cy: "8", r: "3.4" }],
     ["path", { d: "M5.5 20a6.5 6.5 0 0 1 13 0" }]
@@ -783,6 +1316,7 @@ var ICONS = {
     ["path", { d: "M12 16h.01" }]
   ]
 };
+var ICON_REGISTRY = Object.freeze(ICONS);
 function iconKeyForNode(node) {
   const override = typeof node.props?.icon === "string" ? node.props.icon.toLowerCase() : void 0;
   if (override && ICONS[override]) return override;
@@ -802,6 +1336,7 @@ function iconKeyForNode(node) {
   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 === "laptop" || node.kind === "desktop") return node.kind;
   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";
@@ -878,12 +1413,18 @@ function createNodeEl(node, theme, assets) {
   el.style.top = `${node.y}px`;
   el.style.setProperty("--md-node-w", `${node.width}px`);
   el.style.setProperty("--md-node-h", `${node.height}px`);
+  if (theme.flatCards) {
+    el.style.setProperty("--md-shadow", "transparent");
+  }
+  if (theme.accentTint) el.style.setProperty("--md-accent-tint", theme.accentTint);
   const roleColor = theme.roles[node.role] ?? theme.accent;
   el.style.setProperty("--md-role-color", roleColor);
   applyDeclaredNodeStyle(el, node.style);
   const typeText = node.kind.replace(/_/g, " ");
   el.dataset.kind = node.kind;
   el.dataset.icon = iconKeyForNode(node);
+  if (node.shape) el.dataset.shape = node.shape;
+  if (node.focal) el.dataset.focal = "1";
   el.title = `${node.label} (${typeText})`;
   el.setAttribute("aria-label", el.title);
   const body = document.createElement("div");
@@ -893,6 +1434,13 @@ function createNodeEl(node, theme, assets) {
   label.className = "markdy-node__label";
   label.textContent = node.label;
   body.append(icon, label);
+  const value = node.props?.value ?? node.props?.metric;
+  if (value !== void 0 && value !== null) {
+    const valueEl = document.createElement("div");
+    valueEl.className = "markdy-node__value";
+    valueEl.textContent = String(value);
+    body.appendChild(valueEl);
+  }
   el.append(body);
   return el;
 }
@@ -903,6 +1451,225 @@ function createTitleEl(title) {
   return el;
 }
 
+// src/sequence.ts
+var sequenceLayerCounter = 0;
+function markerId(prefix) {
+  sequenceLayerCounter += 1;
+  return `md-sequence-${prefix}-${sequenceLayerCounter}`;
+}
+function appendMarker(doc, defs, id, kind, color) {
+  const marker = doc.createElementNS("http://www.w3.org/2000/svg", "marker");
+  marker.setAttribute("id", id);
+  marker.setAttribute("viewBox", "0 0 10 10");
+  marker.setAttribute("refX", "8.5");
+  marker.setAttribute("refY", "5");
+  marker.setAttribute("markerWidth", "7");
+  marker.setAttribute("markerHeight", "7");
+  marker.setAttribute("orient", "auto");
+  const path = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+  if (kind === "response") {
+    path.setAttribute("d", "M 1.5 1.6 L 9 5 L 1.5 8.4");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", color);
+    path.setAttribute("stroke-width", "1.4");
+  } else if (kind === "event") {
+    path.setAttribute("d", "M 5 2 A 3 3 0 1 1 5 8 A 3 3 0 1 1 5 2");
+    path.setAttribute("fill", color);
+  } else {
+    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);
+  }
+  marker.appendChild(path);
+  defs.appendChild(marker);
+}
+function createText(doc, x, y, text, theme) {
+  const label = doc.createElementNS("http://www.w3.org/2000/svg", "text");
+  label.setAttribute("x", String(x));
+  label.setAttribute("y", String(y));
+  label.setAttribute("text-anchor", "middle");
+  label.setAttribute("dominant-baseline", "middle");
+  label.setAttribute("font-size", "11");
+  label.setAttribute("font-family", theme.fonts?.mono ?? "ui-monospace, SFMono-Regular, Menlo, monospace");
+  label.setAttribute("fill", theme.text);
+  label.textContent = text;
+  return label;
+}
+function mountSequenceLayer(layer, nodes, messages, activations, theme, bounds) {
+  Object.assign(layer.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "52",
+    pointerEvents: "none"
+  });
+  const doc = layer.ownerDocument;
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", `0 0 ${bounds.width} ${bounds.height}`);
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  });
+  layer.appendChild(svg);
+  const defs = doc.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const markers = /* @__PURE__ */ new Map();
+  for (const kind of ["request", "response", "event"]) {
+    const id = markerId(kind);
+    markers.set(kind, id);
+    appendMarker(doc, defs, id, kind, theme.edges[kind]);
+  }
+  svg.appendChild(defs);
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const centerX = (id) => {
+    const node = nodeById.get(id);
+    return node ? node.x + node.width / 2 : 0;
+  };
+  for (const node of nodes) {
+    const x = centerX(node.id);
+    const lifeline = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+    lifeline.classList.add("markdy-sequence-lifeline");
+    lifeline.setAttribute("x1", String(x));
+    lifeline.setAttribute("x2", String(x));
+    lifeline.setAttribute("y1", String(node.y + node.height + 12));
+    lifeline.setAttribute("y2", String(bounds.height - 28));
+    lifeline.setAttribute("stroke", theme.rule ?? theme.soft ?? theme.border);
+    lifeline.setAttribute("stroke-width", "1");
+    lifeline.setAttribute("stroke-dasharray", "4 5");
+    lifeline.setAttribute("opacity", "0.75");
+    svg.appendChild(lifeline);
+  }
+  for (const activation of activations) {
+    const x = centerX(activation.participant);
+    const bar = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
+    bar.classList.add("markdy-sequence-activation");
+    bar.setAttribute("x", String(x - 5));
+    bar.setAttribute("y", String(activation.y));
+    bar.setAttribute("width", "10");
+    bar.setAttribute("height", String(activation.height));
+    bar.setAttribute("rx", "3");
+    bar.setAttribute("fill", theme.accent);
+    bar.setAttribute("opacity", "0");
+    svg.appendChild(bar);
+  }
+  const animations = [];
+  for (const message of messages) {
+    const fromX = centerX(message.from);
+    const toX = centerX(message.to);
+    const group = doc.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.classList.add("markdy-sequence-message");
+    group.setAttribute("data-message", message.id);
+    group.style.opacity = "0";
+    const line = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.setAttribute("x1", String(fromX));
+    line.setAttribute("x2", String(toX));
+    line.setAttribute("y1", String(message.y));
+    line.setAttribute("y2", String(message.y));
+    line.setAttribute("stroke", theme.edges[message.kind]);
+    line.setAttribute("stroke-width", "2");
+    line.setAttribute("stroke-linecap", "round");
+    if (message.kind === "response") line.setAttribute("stroke-dasharray", "6 4");
+    if (message.kind === "event") line.setAttribute("stroke-dasharray", "2 6");
+    if (message.kind !== "dependency") {
+      const marker = markers.get(message.kind);
+      if (marker) line.setAttribute("marker-end", `url(#${marker})`);
+    }
+    group.appendChild(line);
+    if (message.label) {
+      const midX = (fromX + toX) / 2;
+      const plate = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
+      const width = message.label.length * 6.6 + 16;
+      plate.setAttribute("x", String(midX - width / 2));
+      plate.setAttribute("y", String(message.y - 24));
+      plate.setAttribute("width", String(width));
+      plate.setAttribute("height", "18");
+      plate.setAttribute("rx", "5");
+      plate.setAttribute("fill", theme.labelPlate ?? theme.surface);
+      plate.setAttribute("stroke", theme.hairline ?? theme.border);
+      plate.setAttribute("stroke-width", "1");
+      group.appendChild(plate);
+      group.appendChild(createText(doc, midX, message.y - 15, message.label, theme));
+    }
+    svg.appendChild(group);
+    animations.push(
+      group.animate(
+        [{ opacity: 0 }, { opacity: 1 }],
+        {
+          duration: Math.max(160, message.duration * 1e3),
+          delay: message.start * 1e3,
+          fill: "forwards",
+          easing: "ease-out"
+        }
+      )
+    );
+  }
+  const activationEls = Array.from(svg.querySelectorAll(".markdy-sequence-activation"));
+  activationEls.forEach((bar, index) => {
+    const activation = activations[index];
+    if (!activation) return;
+    animations.push(
+      bar.animate(
+        [{ opacity: 0 }, { opacity: 0.9, offset: 0.2 }, { opacity: 0 }],
+        {
+          duration: Math.max(120, activation.duration * 1e3),
+          delay: activation.start * 1e3,
+          fill: "none",
+          easing: "ease-out"
+        }
+      )
+    );
+  });
+  for (const animation of animations) animation.pause();
+  return animations;
+}
+
+// src/tree.ts
+function mountTreeBuses(layer, buses, theme) {
+  if (buses.length === 0) return;
+  Object.assign(layer.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "42",
+    pointerEvents: "none"
+  });
+  const doc = layer.ownerDocument;
+  const svg = doc.createElementNS("http://www.w3.org/2000/svg", "svg");
+  Object.assign(svg.style, {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    overflow: "visible"
+  });
+  layer.appendChild(svg);
+  const stroke = theme.rule ?? theme.hairline ?? theme.border;
+  for (const bus of buses) {
+    const group = doc.createElementNS("http://www.w3.org/2000/svg", "g");
+    group.setAttribute("data-tree-bus", bus.id);
+    const parentLeg = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    parentLeg.setAttribute("d", `M ${bus.parentX} ${bus.parentY} L ${bus.parentX} ${bus.branchY}`);
+    const childXs = [...bus.childXs].sort((a, b) => a - b);
+    const branch = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+    const branchStart = childXs[0] ?? bus.parentX;
+    const branchEnd = childXs[childXs.length - 1] ?? bus.parentX;
+    branch.setAttribute("d", `M ${branchStart} ${bus.branchY} L ${branchEnd} ${bus.branchY}`);
+    group.append(parentLeg, branch);
+    for (const childX of bus.childXs) {
+      const leg = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+      leg.setAttribute("d", `M ${childX} ${bus.branchY} L ${childX} ${bus.childY}`);
+      group.appendChild(leg);
+    }
+    for (const path of Array.from(group.querySelectorAll("path"))) {
+      path.setAttribute("fill", "none");
+      path.setAttribute("stroke", stroke);
+      path.setAttribute("stroke-width", "1.5");
+      path.setAttribute("stroke-linecap", "round");
+      path.setAttribute("stroke-linejoin", "round");
+    }
+    svg.appendChild(group);
+  }
+}
+
 // src/theme.ts
 var SCENE_STYLE_ID = "markdy-scene-ambience-styles";
 function ensureSceneStyles(doc) {
@@ -938,6 +1705,30 @@ function ensureSceneStyles(doc) {
   opacity: 0.62;
 }
 .markdy-scene-content { z-index: 2; }
+.markdy-scene-root[data-markdy-theme="nebula"]::before {
+  background:
+    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--md-soft) 16%, transparent), transparent 32%),
+    radial-gradient(circle at 84% 72%, color-mix(in srgb, var(--md-accent) 18%, transparent), transparent 36%),
+    linear-gradient(var(--md-grid-minor) 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(90deg, var(--md-grid-minor) 1px, transparent 1px) 0 0 / 32px 32px;
+  mask-image: none;
+  opacity: 0.9;
+}
+.markdy-scene-root[data-markdy-theme="nebula"]::after {
+  background:
+    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--md-accent) 12%, transparent), transparent 56%),
+    linear-gradient(180deg, transparent 0%, var(--md-vignette) 100%);
+  opacity: 0.8;
+}
+@keyframes markdy-star-twinkle {
+  from { opacity: 0.24; transform: scale(0.85); }
+  to { opacity: 0.9; transform: scale(1.15); }
+}
+.markdy-constellation-star {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: markdy-star-twinkle 5s ease-in-out infinite alternate;
+}
 .markdy-camera-layer {
   position: absolute;
   inset: 0;
@@ -990,15 +1781,32 @@ function applyThemeToScene(scene, theme) {
   scene.style.setProperty("--md-border", theme.border);
   scene.style.setProperty("--md-text", theme.text);
   scene.style.setProperty("--md-text-muted", theme.textMuted);
+  scene.style.setProperty("--md-paper", theme.paper ?? theme.canvas);
+  scene.style.setProperty("--md-ink", theme.ink ?? theme.text);
+  scene.style.setProperty("--md-muted", theme.muted ?? theme.textMuted);
+  scene.style.setProperty("--md-rule", theme.rule ?? theme.border);
   scene.style.setProperty("--md-grid-minor", theme.gridMinor);
   scene.style.setProperty("--md-grid-major", theme.gridMajor);
   scene.style.setProperty("--md-vignette", theme.vignette);
   scene.style.setProperty("--md-accent", theme.accent);
+  if (theme.link) scene.style.setProperty("--md-link", theme.link);
+  if (theme.soft) scene.style.setProperty("--md-soft", theme.soft);
+  if (theme.accentTint) scene.style.setProperty("--md-accent-tint", theme.accentTint);
   scene.style.setProperty("--md-node-surface", theme.nodeSurface ?? theme.surface);
   scene.style.setProperty("--md-node-surface-raised", theme.nodeSurfaceRaised ?? theme.surfaceRaised);
   scene.style.setProperty("--md-hairline", theme.hairline ?? `color-mix(in srgb, ${theme.border} 50%, transparent)`);
   scene.style.setProperty("--md-shadow", theme.shadow ?? "rgba(2, 6, 23, 0.55)");
+  if (theme.fonts?.title) scene.style.setProperty("--md-font-title", theme.fonts.title);
+  if (theme.fonts?.nodeName) scene.style.setProperty("--md-font-node", theme.fonts.nodeName);
+  if (theme.fonts?.mono) scene.style.setProperty("--md-font-mono", theme.fonts.mono);
+  if (theme.radiusMd) scene.style.setProperty("--md-radius-md", `${theme.radiusMd}px`);
+  if (theme.spacing) {
+    for (const [key, value] of Object.entries(theme.spacing)) {
+      scene.style.setProperty(`--md-space-${key}`, `${value}px`);
+    }
+  }
   scene.dataset.markdyTheme = theme.name;
+  if (theme.flatCards) scene.dataset.flat = "1";
 }
 
 // src/diagram.ts
@@ -1138,9 +1946,50 @@ function createDiagram(opts) {
   const cameraLayer = document.createElement("div");
   cameraLayer.className = "markdy-camera-layer";
   sceneContent.appendChild(cameraLayer);
+  const structuralEdgeHost = document.createElement("div");
+  structuralEdgeHost.className = "markdy-structural-edge-host";
+  Object.assign(structuralEdgeHost.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "45",
+    pointerEvents: "none"
+  });
+  cameraLayer.appendChild(structuralEdgeHost);
+  const treeLayer = document.createElement("div");
+  treeLayer.className = "markdy-tree-layer";
+  cameraLayer.appendChild(treeLayer);
+  mountTreeBuses(treeLayer, plan.treeBuses, plan.theme);
+  const constellationLayer = document.createElement("div");
+  constellationLayer.className = "markdy-constellation-layer";
+  cameraLayer.appendChild(constellationLayer);
+  if (plan.diagramType === "constellation") {
+    mountConstellationLayer(
+      constellationLayer,
+      plan.nodes,
+      plan.theme,
+      { width: plan.meta.width, height: plan.meta.height }
+    );
+  }
+  const groupLayer = document.createElement("div");
+  groupLayer.className = "markdy-group-layer";
+  Object.assign(groupLayer.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "48",
+    pointerEvents: "none"
+  });
+  cameraLayer.appendChild(groupLayer);
+  mountGroupBoundaries(groupLayer, plan.groupBoundaries, plan.theme);
+  const sequenceLayer = document.createElement("div");
+  sequenceLayer.className = "markdy-sequence-layer";
+  cameraLayer.appendChild(sequenceLayer);
   const nodeLayer = document.createElement("div");
   nodeLayer.className = "markdy-scene-node-layer";
+  Object.assign(nodeLayer.style, { position: "absolute", inset: "0", zIndex: "60" });
   cameraLayer.appendChild(nodeLayer);
+  const annotationLayer = document.createElement("div");
+  annotationLayer.className = "markdy-annotation-layer";
+  cameraLayer.appendChild(annotationLayer);
   const captionLayer = createBeatCaptionLayer(document, plan.beats);
   sceneContent.appendChild(captionLayer);
   const nodeEls = /* @__PURE__ */ new Map();
@@ -1156,13 +2005,38 @@ function createDiagram(opts) {
   scaleScene();
   const resizeObserver = new ResizeObserver(scaleScene);
   resizeObserver.observe(viewport);
+  const edgeRuntimes = /* @__PURE__ */ new Map();
+  const edgeSceneId = createEdgeSceneId();
+  const sequenceAnims = plan.diagramType === "sequence" ? mountSequenceLayer(
+    sequenceLayer,
+    plan.nodes,
+    plan.sequenceMessages,
+    plan.sequenceActivations,
+    plan.theme,
+    { width: plan.meta.width, height: plan.meta.height }
+  ) : [];
   const allAnims = [
+    ...sequenceAnims,
+    ...buildStructuralEdgeAnimations(
+      plan.edges,
+      plan.nodes,
+      plan.theme,
+      structuralEdgeHost,
+      { width: plan.meta.width, height: plan.meta.height },
+      edgeRuntimes,
+      edgeSceneId,
+      plan.diagramType
+    ),
     ...buildCueAnimations(plan.cues, nodeEls, plan.nodes, plan.theme, cameraLayer, titleEl, {
       width: plan.meta.width,
       height: plan.meta.height
-    }),
+    }, plan.edges, edgeRuntimes, edgeSceneId, plan.diagramType),
     ...buildBeatCaptionAnimations(plan.beats, captionLayer)
   ];
+  mountAnnotations(annotationLayer, plan.annotations, plan.nodes, plan.theme, {
+    width: plan.meta.width,
+    height: plan.meta.height
+  });
   for (const anim of allAnims) {
     anim.pause();
     anim.currentTime = 0;
@@ -1260,5 +2134,6 @@ function createDiagram(opts) {
   return diagram;
 }
 export {
+  ICON_REGISTRY,
   createDiagram
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/renderer-dom",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "description": "Browser renderer for diagram-native animated MarkdyScript architecture diagrams, built on the Web Animations API.",
   "license": "MIT",
   "type": "module",
@@ -44,14 +44,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/core": "0.8.10"
+    "@markdy/core": "0.8.12"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.1.7",
-    "@markdy/stdlib-systems": "0.8.10"
+    "@markdy/stdlib-systems": "0.8.12"
   },
   "scripts": {
     "build": "tsup",