@markdy/renderer-dom 1.0.8 → 1.0.9

package/dist/index.d.ts

@@ -97,6 +97,17 @@ interface GifDiagramExportOptions extends SvgExportOptions {
 }
 declare function exportDiagramAsGif(container: HTMLElement, timeline: TimelineController, options?: GifDiagramExportOptions): Promise<Blob>;
 
+/**
+ * packages/renderer-dom/src/export/png-exporter.ts
+ * High-DPI raster PNG export with 2x retina scaling.
+ * Zero external dependencies.
+ *
+ * Fix: Inline all external resources (images, fonts) as base64 data URIs
+ * before drawing the SVG to canvas. A foreignObject-wrapped SVG taints the
+ * canvas whenever it references any external URL, so every resource must be
+ * inlined first.
+ */
+
 interface PngExportOptions extends SvgExportOptions {
     pixelRatio?: number;
 }

package/dist/index.js

@@ -49,7 +49,7 @@ function countPathIntersections(points, obstacles) {
 function round1(n) {
   return Math.round(n * 10) / 10;
 }
-function toPathD(points, cornerRadius = 8) {
+function toPathD(points, cornerRadius = 14) {
   if (points.length < 2) return "";
   if (points.length === 2) {
     const [a, b] = points;
@@ -73,7 +73,7 @@ function toPathD(points, cornerRadius = 8) {
     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) {
+    if (len1 < 0.5 || len2 < 0.5) {
       parts.push(`L ${round1(cur.x)} ${round1(cur.y)}`);
       continue;
     }
@@ -89,14 +89,14 @@ function toPathD(points, cornerRadius = 8) {
 }
 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;
+  const left = rect.x + rect.width * 0.3;
+  const right = rect.x + rect.width * 0.7;
+  const apex = top - 40;
   return [
-    { x: left, y: top },
-    { x: left, y: apex },
-    { x: right, y: apex },
-    { x: right, y: top }
+    { x: round1(left), y: round1(top) },
+    { x: round1(left), y: round1(apex) },
+    { x: round1(right), y: round1(apex) },
+    { x: round1(right), y: round1(top) }
   ];
 }
 function polylineLength(points) {
@@ -109,7 +109,7 @@ function polylineLength(points) {
 function segmentLength(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
-var LABEL_BOX_HEIGHT = 16;
+var LABEL_BOX_HEIGHT = 20;
 function rectsOverlap(a, b) {
   return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
 }
@@ -134,9 +134,9 @@ function placeFlowLabel(points, textWidth, obstacles, bounds) {
   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 pad = 10;
+  const base = horizontal ? 16 : half + 14;
+  const step = horizontal ? LABEL_BOX_HEIGHT + 6 : textWidth + 14;
   const order = horizontal ? [-1, 1] : [1, -1];
   const offsets = [];
   for (let k = 0; k < 8; k++) {
@@ -166,7 +166,7 @@ function clamp(n, min, max) {
   return Math.min(max, Math.max(min, n));
 }
 function clampPointToScene(point, bounds) {
-  const pad = 14;
+  const pad = 16;
   return {
     x: round1(clamp(point.x, pad, bounds.width - pad)),
     y: round1(clamp(point.y, pad, bounds.height - pad))
@@ -175,7 +175,7 @@ function clampPointToScene(point, bounds) {
 function laneOffset(lane) {
   if (lane <= 0) return 0;
   const step = Math.ceil(lane / 2);
-  return (lane % 2 === 1 ? 1 : -1) * step * 18;
+  return (lane % 2 === 1 ? 1 : -1) * step * 16;
 }
 function routeLength(points) {
   let total = 0;
@@ -196,26 +196,50 @@ function routeBends(points) {
   }
   return bends;
 }
+function cleanCollinearPoints(points) {
+  if (points.length <= 2) return points;
+  const result = [points[0]];
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = result[result.length - 1];
+    const cur = points[i];
+    const next = points[i + 1];
+    const isCollinearX = Math.abs(prev.x - cur.x) < 0.01 && Math.abs(cur.x - next.x) < 0.01;
+    const isCollinearY = Math.abs(prev.y - cur.y) < 0.01 && Math.abs(cur.y - next.y) < 0.01;
+    const isDuplicate = Math.abs(prev.x - cur.x) < 0.01 && Math.abs(prev.y - cur.y) < 0.01;
+    if (!isCollinearX && !isCollinearY && !isDuplicate) {
+      result.push(cur);
+    }
+  }
+  result.push(points[points.length - 1]);
+  return result;
+}
 function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
   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 sourceRight = targetCenter.x >= sourceCenter.x;
+  const targetLeft = targetCenter.x >= sourceCenter.x;
+  const sourceDown = targetCenter.y >= sourceCenter.y;
+  const targetUp = targetCenter.y >= sourceCenter.y;
   const source = horizontalPrimary ? {
-    x: targetCenter.x >= sourceCenter.x ? sourceRect.x2 : sourceRect.x1,
-    y: clamp(sourceCenter.y + laneShift, sourceRect.y1 + 12, sourceRect.y2 - 12)
+    x: sourceRight ? sourceRect.x2 : sourceRect.x1,
+    y: clamp(sourceCenter.y + laneShift, sourceRect.y1 + 16, sourceRect.y2 - 16)
   } : {
-    x: clamp(sourceCenter.x + laneShift, sourceRect.x1 + 12, sourceRect.x2 - 12),
-    y: targetCenter.y >= sourceCenter.y ? sourceRect.y2 : sourceRect.y1
+    x: clamp(sourceCenter.x + laneShift, sourceRect.x1 + 20, sourceRect.x2 - 20),
+    y: sourceDown ? 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: targetLeft ? targetRect.x1 : targetRect.x2,
+    y: clamp(targetCenter.y + laneShift, targetRect.y1 + 16, targetRect.y2 - 16)
   } : {
-    x: clamp(targetCenter.x + laneShift, targetRect.x1 + 12, targetRect.x2 - 12),
-    y: targetCenter.y >= sourceCenter.y ? targetRect.y1 : targetRect.y2
+    x: clamp(targetCenter.x + laneShift, targetRect.x1 + 20, targetRect.x2 - 20),
+    y: targetUp ? targetRect.y1 : targetRect.y2
   };
-  const infl = obstacles.map((o) => inflateRect(o, 8));
+  const stubLen = 18;
+  const sStub = horizontalPrimary ? { x: source.x + (sourceRight ? stubLen : -stubLen), y: source.y } : { x: source.x, y: source.y + (sourceDown ? stubLen : -stubLen) };
+  const tStub = horizontalPrimary ? { x: target.x + (targetLeft ? -stubLen : stubLen), y: target.y } : { x: target.x, y: target.y + (targetUp ? -stubLen : stubLen) };
+  const infl = obstacles.map((o) => inflateRect(o, 10));
   const candidates = [];
   if (Math.abs(source.y - target.y) < 1e-3 || Math.abs(source.x - target.x) < 1e-3) {
     candidates.push([source, target]);
@@ -223,36 +247,39 @@ function routeOrthogonal(sourceRect, targetRect, obstacles, bounds, lane = 0) {
   const midX = round1((source.x + target.x) / 2 + laneShift);
   const midY = round1((source.y + target.y) / 2 + laneShift);
   candidates.push(
+    [source, sStub, { x: midX, y: source.y }, { x: midX, y: target.y }, tStub, target],
+    [source, sStub, { x: source.x, y: midY }, { x: target.x, y: midY }, tStub, target],
     [source, { x: midX, y: source.y }, { x: midX, y: target.y }, target],
     [source, { x: source.x, y: midY }, { x: target.x, y: midY }, target]
   );
   const minObstacleY = infl.length ? Math.min(...infl.map((o) => o.y1)) : Math.min(source.y, target.y);
   const maxObstacleY = infl.length ? Math.max(...infl.map((o) => o.y2)) : Math.max(source.y, target.y);
-  const topLane = Math.max(16, minObstacleY - 24 - lane * 12);
-  const bottomLane = Math.min(bounds.height - 16, maxObstacleY + 24 + lane * 12);
+  const topLane = Math.max(20, minObstacleY - 28 - lane * 14);
+  const bottomLane = Math.min(bounds.height - 20, maxObstacleY + 28 + lane * 14);
   candidates.push(
-    [source, { x: source.x, y: topLane }, { x: target.x, y: topLane }, target],
-    [source, { x: source.x, y: bottomLane }, { x: target.x, y: bottomLane }, target]
+    [source, sStub, { x: sStub.x, y: topLane }, { x: tStub.x, y: topLane }, tStub, target],
+    [source, sStub, { x: sStub.x, y: bottomLane }, { x: tStub.x, y: bottomLane }, tStub, target]
   );
   const minObstacleX = infl.length ? Math.min(...infl.map((o) => o.x1)) : Math.min(source.x, target.x);
   const maxObstacleX = infl.length ? Math.max(...infl.map((o) => o.x2)) : Math.max(source.x, target.x);
-  const leftLane = Math.max(16, minObstacleX - 24 - lane * 12);
-  const rightLane = Math.min(bounds.width - 16, maxObstacleX + 24 + lane * 12);
+  const leftLane = Math.max(20, minObstacleX - 28 - lane * 14);
+  const rightLane = Math.min(bounds.width - 20, maxObstacleX + 28 + lane * 14);
   candidates.push(
-    [source, { x: leftLane, y: source.y }, { x: leftLane, y: target.y }, target],
-    [source, { x: rightLane, y: source.y }, { x: rightLane, y: target.y }, target]
+    [source, sStub, { x: leftLane, y: sStub.y }, { x: leftLane, y: tStub.y }, tStub, target],
+    [source, sStub, { x: rightLane, y: sStub.y }, { x: rightLane, y: tStub.y }, tStub, target]
   );
   let best = candidates[0];
   let bestScore = Number.POSITIVE_INFINITY;
   for (const candidate of candidates) {
-    const hits = countPathIntersections(candidate, infl);
-    const score = hits * 1e5 + routeBends(candidate) * 800 + routeLength(candidate);
+    const cleaned = cleanCollinearPoints(candidate);
+    const hits = countPathIntersections(cleaned, infl);
+    const score = hits * 1e5 + routeBends(cleaned) * 800 + routeLength(cleaned);
     if (score < bestScore) {
-      best = candidate;
+      best = cleaned;
       bestScore = score;
     }
   }
-  return best.map((point) => clampPointToScene(point, bounds));
+  return cleanCollinearPoints(best.map((point) => clampPointToScene(point, bounds)));
 }
 
 // src/edges.ts
@@ -324,23 +351,25 @@ function ensureDefs(svg, theme, id) {
   for (const [kind, color] of Object.entries(theme.edges)) {
     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.5");
-    arrow.setAttribute("refY", "5");
-    arrow.setAttribute("markerWidth", "7");
-    arrow.setAttribute("markerHeight", "7");
+    arrow.setAttribute("viewBox", "0 0 12 12");
+    arrow.setAttribute("refX", "9.5");
+    arrow.setAttribute("refY", "6");
+    arrow.setAttribute("markerWidth", "8");
+    arrow.setAttribute("markerHeight", "8");
     arrow.setAttribute("orient", "auto-start-reverse");
     const path = document.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("d", "M 2.5 2.5 L 9.5 6 L 2.5 9.5");
       path.setAttribute("fill", "none");
       path.setAttribute("stroke", color);
-      path.setAttribute("stroke-width", "1.4");
+      path.setAttribute("stroke-width", "1.6");
+      path.setAttribute("stroke-linecap", "round");
+      path.setAttribute("stroke-linejoin", "round");
     } 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("d", "M 6 2.5 A 3.5 3.5 0 1 1 6 9.5 A 3.5 3.5 0 1 1 6 2.5");
       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("d", "M 2 2.5 L 10 6 L 2 9.5 L 4 6 Z");
       path.setAttribute("fill", color);
     }
     arrow.appendChild(path);
@@ -390,40 +419,43 @@ 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 ${translucentColor(color, "33")})`;
+    path.style.filter = `drop-shadow(0 0 4px ${translucentColor(color, "44")})`;
   }
   const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  dot.setAttribute("r", "3.5");
+  dot.setAttribute("r", "4");
   dot.setAttribute("fill", color);
   dot.style.opacity = "0";
-  dot.style.filter = `drop-shadow(0 0 4px ${color}aa)`;
+  dot.style.filter = `drop-shadow(0 0 6px ${color}) drop-shadow(0 0 12px ${color}88)`;
   group.append(path, dot);
   let labelEl;
   let labelRect;
   if (label) {
-    const textWidth = label.length * 6.6 + 10;
+    const textWidth = label.length * 6.8 + 14;
     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 padX = 8;
     const halfW = textWidth / 2;
     plate.setAttribute("x", String(placement.x - halfW - padX));
-    plate.setAttribute("y", String(placement.y - 9));
+    plate.setAttribute("y", String(placement.y - 10));
     plate.setAttribute("width", String(textWidth + padX * 2));
-    plate.setAttribute("height", "18");
+    plate.setAttribute("height", "20");
     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("fill-opacity", "0.96");
+    plate.setAttribute("stroke", theme.hairline ?? `color-mix(in srgb, ${theme.border} 70%, transparent)`);
     plate.setAttribute("stroke-width", "1");
     plate.style.opacity = "0";
+    plate.style.filter = "drop-shadow(0 1px 3px rgba(0,0,0,0.12))";
     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));
+    labelEl.setAttribute("y", String(placement.y + 0.5));
     labelEl.setAttribute("text-anchor", "middle");
     labelEl.setAttribute("dominant-baseline", "middle");
     labelEl.setAttribute("font-size", "11");
+    labelEl.setAttribute("font-weight", "500");
+    labelEl.setAttribute("letter-spacing", "0.02em");
     labelEl.setAttribute("font-family", "ui-monospace, SFMono-Regular, Menlo, monospace");
     labelEl.setAttribute("fill", theme.text);
     labelEl.textContent = label;
@@ -492,20 +524,35 @@ function animateEdgeReveal(runtime, startMs, durMs) {
     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" }));
+  const drawMs = Math.min(260, durMs * 0.65);
+  anims.push(
+    group.animate(
+      [{ opacity: 0 }, { opacity: 1 }],
+      { duration: 140, delay: startMs, fill: "forwards", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+    )
+  );
   if (runtime.drawReveal) {
     anims.push(
       path.animate(
         [{ strokeDashoffset: pathLen }, { strokeDashoffset: 0 }],
-        { duration: drawMs, delay: startMs, fill: "forwards", easing: "ease-out" }
+        { duration: drawMs, delay: startMs, fill: "forwards", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
       )
     );
   }
   if (label) {
-    anims.push(label.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, delay: startMs + 80, fill: "forwards" }));
+    anims.push(
+      label.animate(
+        [{ opacity: 0 }, { opacity: 1 }],
+        { duration: 200, delay: startMs + 90, fill: "forwards", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+      )
+    );
     if (runtime.labelPlate) {
-      anims.push(runtime.labelPlate.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 180, delay: startMs + 80, fill: "forwards" }));
+      anims.push(
+        runtime.labelPlate.animate(
+          [{ opacity: 0 }, { opacity: 1 }],
+          { duration: 200, delay: startMs + 90, fill: "forwards", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+        )
+      );
     }
   }
   if (points.length >= 2) {
@@ -514,7 +561,7 @@ function animateEdgeReveal(runtime, startMs, durMs) {
         duration: Math.max(drawMs, durMs),
         delay: startMs,
         fill: "forwards",
-        easing: "ease-in-out"
+        easing: "cubic-bezier(0.2, 0.85, 0.4, 1)"
       })
     );
   }
@@ -606,14 +653,14 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
         if (el) {
           anims.push(
             el.animate(
-              [{ opacity: 0, transform: "translateY(8px)" }, { opacity: 1, transform: "translateY(0)" }],
-              { duration: durMs, delay, fill: "forwards", easing: "ease-out" }
+              [{ opacity: 0, transform: "translateY(10px) scale(0.98)" }, { opacity: 1, transform: "translateY(0) scale(1)" }],
+              { duration: durMs, delay, fill: "forwards", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
             )
           );
           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" }));
+        if (runtime) anims.push(runtime.group.animate([{ opacity: 0 }, { opacity: 1 }], { duration: durMs, delay, fill: "forwards", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }));
       });
       continue;
     }
@@ -644,7 +691,7 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
                 { 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" }
+              { duration: durMs, delay: startMs, fill: "none", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
             )
           );
           continue;
@@ -666,7 +713,7 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
                 { 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" }
+              { duration: durMs, delay: startMs, fill: "none", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
             )
           );
           continue;
@@ -691,7 +738,7 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
       anims.push(
         scene.animate(
           [{ transform: cameraTransform }, { transform: nextTransform }],
-          { duration: durMs, delay: startMs, fill: "forwards", easing: "ease-in-out" }
+          { duration: durMs, delay: startMs, fill: "forwards", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
         )
       );
       cameraTransform = nextTransform;
@@ -718,6 +765,19 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
         if (edgeId) edgeRuntimes.set(edgeId, runtime);
       }
       anims.push(...animateEdgeReveal(runtime, startMs, durMs));
+      const toEl = nodeEls.get(seg.to);
+      if (toEl) {
+        anims.push(
+          toEl.animate(
+            [
+              { transform: "scale(1)", filter: "none" },
+              { transform: "scale(1.02)", filter: `drop-shadow(0 0 8px ${translucentColor(runtime.color, "66")})` },
+              { transform: "scale(1)", filter: "none" }
+            ],
+            { duration: 280, delay: startMs + durMs * 0.75, fill: "none", easing: "cubic-bezier(0.16, 1, 0.3, 1)" }
+          )
+        );
+      }
     }
   }
   for (const a of anims) a.pause();
@@ -830,6 +890,8 @@ function mountAnnotations(layer, annotations, nodes, theme, bounds) {
     const pos = positionForAnnotation(ann.position, bounds, index);
     const textEl = doc.createElement("div");
     textEl.className = "markdy-annotation";
+    textEl.dataset.visible = "1";
+    if (ann.intent) textEl.dataset.intent = ann.intent;
     textEl.textContent = ann.text;
     textEl.style.left = `${pos.x}px`;
     textEl.style.top = `${pos.y}px`;
@@ -837,11 +899,13 @@ function mountAnnotations(layer, annotations, nodes, theme, bounds) {
     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 ty = target.y - 2;
+    const ax = pos.x > tx ? pos.x : pos.x + 160;
+    const ay = pos.y + 12;
     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}`);
+    const midX = (ax + tx) / 2;
+    const midY = Math.min(ay, ty) - 16;
+    path.setAttribute("d", `M ${ax} ${ay} Q ${midX} ${midY} ${tx} ${ty}`);
     path.setAttribute("fill", "none");
     const intent = typeof ann.intent === "string" ? ann.intent : "neutral";
     const leaderColor = intent === "accent" ? theme.accent : intent === "muted" ? theme.soft ?? theme.textMuted : theme.textMuted;
@@ -854,8 +918,8 @@ function mountAnnotations(layer, annotations, nodes, theme, bounds) {
     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);
+    dot.setAttribute("r", "2.5");
+    dot.setAttribute("fill", leaderColor);
     svg.appendChild(dot);
   });
 }
@@ -956,6 +1020,141 @@ function mountConstellationLayer(layer, nodes, theme, bounds) {
   }
 }
 
+// src/radar.ts
+function mountRadarLayer(layer, nodes, theme, bounds) {
+  if (nodes.length < 3) 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 centerX = bounds.width / 2;
+  const centerY = (bounds.height + 40) / 2;
+  const nodeCenters = nodes.map((n) => ({
+    x: n.x + n.width / 2,
+    y: n.y + n.height / 2
+  }));
+  const strokeBorder = theme?.border ?? "#cbd5e1";
+  const strokeHairline = theme?.hairline ?? theme?.border ?? "#e2e8f0";
+  const accentColor = theme?.accent ?? "#38bdf8";
+  for (const nc of nodeCenters) {
+    const line = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+    line.setAttribute("x1", String(centerX));
+    line.setAttribute("y1", String(centerY));
+    line.setAttribute("x2", String(nc.x));
+    line.setAttribute("y2", String(nc.y));
+    line.setAttribute("stroke", strokeBorder);
+    line.setAttribute("stroke-width", "1");
+    line.setAttribute("stroke-dasharray", "4 4");
+    line.setAttribute("opacity", "0.45");
+    svg.appendChild(line);
+  }
+  const fractions = [0.33, 0.66, 1];
+  for (const f of fractions) {
+    const points = nodeCenters.map((nc) => {
+      const px = centerX + (nc.x - centerX) * f;
+      const py = centerY + (nc.y - centerY) * f;
+      return `${px.toFixed(1)},${py.toFixed(1)}`;
+    }).join(" ");
+    const poly = doc.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    poly.setAttribute("points", points);
+    poly.setAttribute("fill", "none");
+    poly.setAttribute("stroke", strokeHairline);
+    poly.setAttribute("stroke-width", "1");
+    poly.setAttribute("stroke-dasharray", f === 1 ? "none" : "3 3");
+    poly.setAttribute("opacity", String(0.3 + f * 0.25));
+    svg.appendChild(poly);
+  }
+  const areaPoints = nodeCenters.map((nc, idx) => {
+    const f = 0.75 + idx % 3 * 0.12;
+    const px = centerX + (nc.x - centerX) * f;
+    const py = centerY + (nc.y - centerY) * f;
+    return `${px.toFixed(1)},${py.toFixed(1)}`;
+  }).join(" ");
+  const area = doc.createElementNS("http://www.w3.org/2000/svg", "polygon");
+  area.setAttribute("points", areaPoints);
+  area.setAttribute("fill", accentColor);
+  area.setAttribute("fill-opacity", "0.08");
+  area.setAttribute("stroke", accentColor);
+  area.setAttribute("stroke-width", "1.5");
+  area.setAttribute("stroke-dasharray", "4 4");
+  area.setAttribute("opacity", "0.6");
+  svg.appendChild(area);
+}
+
+// src/timeline.ts
+function mountTimelineLayer(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 baselineY = (bounds.height + 40) / 2;
+  const minX = Math.min(...nodes.map((n) => n.x)) - 20;
+  const maxX = Math.max(...nodes.map((n) => n.x + n.width)) + 20;
+  const strokeAxis = theme?.hairline ?? theme?.border ?? "#cbd5e1";
+  const strokeBorder = theme?.border ?? "#cbd5e1";
+  const accentColor = theme?.accent ?? "#38bdf8";
+  const surfaceFill = theme?.surfaceRaised ?? theme?.surface ?? "#ffffff";
+  const axis = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+  axis.setAttribute("x1", String(Math.max(40, minX)));
+  axis.setAttribute("y1", String(baselineY));
+  axis.setAttribute("x2", String(Math.min(bounds.width - 40, maxX)));
+  axis.setAttribute("y2", String(baselineY));
+  axis.setAttribute("stroke", strokeAxis);
+  axis.setAttribute("stroke-width", "2");
+  axis.setAttribute("opacity", "0.6");
+  svg.appendChild(axis);
+  for (const node of nodes) {
+    const nodeCenterX = node.x + node.width / 2;
+    const isAbove = node.y + node.height <= baselineY + 10;
+    const targetY = isAbove ? node.y + node.height : node.y;
+    const stem = doc.createElementNS("http://www.w3.org/2000/svg", "line");
+    stem.setAttribute("x1", String(nodeCenterX));
+    stem.setAttribute("y1", String(baselineY));
+    stem.setAttribute("x2", String(nodeCenterX));
+    stem.setAttribute("y2", String(targetY));
+    stem.setAttribute("stroke", node.focal ? accentColor : strokeBorder);
+    stem.setAttribute("stroke-width", node.focal ? "1.5" : "1");
+    stem.setAttribute("stroke-dasharray", node.focal ? "none" : "3 3");
+    stem.setAttribute("opacity", node.focal ? "0.9" : "0.5");
+    svg.appendChild(stem);
+    const pip = doc.createElementNS("http://www.w3.org/2000/svg", "circle");
+    pip.setAttribute("cx", String(nodeCenterX));
+    pip.setAttribute("cy", String(baselineY));
+    pip.setAttribute("r", node.focal ? "5" : "3.5");
+    pip.setAttribute("fill", node.focal ? accentColor : surfaceFill);
+    pip.setAttribute("stroke", node.focal ? accentColor : strokeBorder);
+    pip.setAttribute("stroke-width", "1.5");
+    svg.appendChild(pip);
+  }
+}
+
 // src/groups.ts
 var STYLE_ID2 = "markdy-group-boundary-styles";
 function ensureGroupStyles(doc) {
@@ -966,26 +1165,27 @@ function ensureGroupStyles(doc) {
 .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);
+  border: 1px dashed var(--md-group-border, color-mix(in srgb, var(--md-border) 60%, transparent));
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--md-surface-raised) 25%, transparent);
   pointer-events: none;
   z-index: 40;
 }
 .markdy-group-boundary__label {
   position: absolute;
-  left: 12px;
-  top: -10px;
-  padding: 2px 8px;
+  left: 14px;
+  top: 10px;
+  padding: 3px 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);
+  background: color-mix(in srgb, var(--md-surface-raised) 80%, transparent);
+  border: 1px solid var(--md-group-border, color-mix(in srgb, var(--md-border) 50%, transparent));
+  border-radius: 5px;
+  font-family: var(--md-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  backdrop-filter: blur(4px);
 }
 `;
   doc.head.appendChild(style);
@@ -1024,20 +1224,20 @@ function ensureNodeStyles(doc) {
 .markdy-node {
   position: absolute;
   box-sizing: border-box;
-  width: var(--md-node-w, 184px);
-  height: var(--md-node-h, 88px);
+  width: var(--md-node-w, 180px);
+  height: var(--md-node-h, 76px);
   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-raised, color-mix(in srgb, var(--md-surface-raised) 92%, #ffffff 8%)),
       var(--md-node-surface, var(--md-surface)));
   color: var(--md-text);
   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: var(--md-font-node, Inter, ui-sans-serif, system-ui, sans-serif);
+    0 1px 2px color-mix(in srgb, var(--md-shadow, rgba(2, 6, 23, 0.4)) 40%, transparent),
+    0 8px 20px -8px var(--md-shadow, rgba(2, 6, 23, 0.45)),
+    inset 0 0 0 1px var(--md-hairline, color-mix(in srgb, var(--md-border) 45%, transparent)),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  font-family: var(--md-font-node, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif);
   overflow: hidden;
   opacity: 0;
   transform: translateY(8px);
@@ -1049,23 +1249,23 @@ function ensureNodeStyles(doc) {
 }
 .markdy-node[data-focused="1"] {
   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);
+    0 2px 6px rgba(2, 6, 23, 0.35),
+    0 16px 36px -12px rgba(2, 6, 23, 0.65),
+    inset 0 0 0 1.5px color-mix(in srgb, var(--md-accent) 75%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--md-accent) 22%, transparent);
 }
 .markdy-node[data-glow="1"] {
   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),
+    0 2px 6px rgba(2, 6, 23, 0.35),
+    0 0 0 1.5px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 65%, transparent),
+    0 0 24px -2px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 48%, 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 13px;
+  padding: 0 14px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -1073,20 +1273,20 @@ function ensureNodeStyles(doc) {
 }
 .markdy-node__icon {
   flex: 0 0 auto;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--md-role-color, var(--md-accent));
   background:
     linear-gradient(180deg,
-      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 24%, transparent),
-      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 11%, transparent));
+      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 22%, transparent),
+      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 10%, 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);
+    inset 0 0 0 1px color-mix(in srgb, var(--md-role-color, var(--md-accent)) 35%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.15);
 }
 .markdy-node__icon svg {
   width: 17px;
@@ -1118,10 +1318,10 @@ function ensureNodeStyles(doc) {
   flex: 1 1 auto;
   min-width: 0;
   padding: 0;
-  font-size: 14px;
+  font-size: 13.5px;
   font-weight: 600;
   letter-spacing: -0.01em;
-  line-height: 1.18;
+  line-height: 1.22;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
@@ -1129,30 +1329,30 @@ function ensureNodeStyles(doc) {
   overflow: hidden;
   overflow-wrap: anywhere;
   word-break: break-word;
-  text-wrap: balance;
+  text-wrap: pretty;
 }
 .markdy-node__value {
   flex: 0 0 auto;
-  font-size: 18px;
+  font-size: 17px;
   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-node[data-role="client"] { border-radius: 14px 14px 10px 10px; }
+.markdy-node[data-role="data"] { border-radius: 12px 12px 18px 18px; }
 .markdy-scene-title {
   position: absolute;
-  left: 44px;
-  top: 26px;
-  right: 44px;
+  left: 48px;
+  top: 28px;
+  right: 48px;
   z-index: 130;
-  font-size: 32px;
+  font-size: 30px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--md-text);
   opacity: 0;
   transform: translateY(-6px);
-  font-family: var(--md-font-title, Inter, ui-sans-serif, system-ui, sans-serif);
+  font-family: var(--md-font-title, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif);
 }
 .markdy-scene-title[data-visible="1"] {
   opacity: 1;
@@ -1165,12 +1365,35 @@ function ensureNodeStyles(doc) {
 }
 .markdy-node[data-shape="pill"] {
   border-radius: 999px;
-  min-height: 56px;
+  min-height: 54px;
 }
 .markdy-node[data-shape="circle"],
 .markdy-node[data-kind="dot"] {
   border-radius: 50%;
 }
+.markdy-node[data-shape="circle"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background:
+    radial-gradient(circle at 35% 35%,
+      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 16%, var(--md-surface) 84%),
+      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 6%, var(--md-surface) 94%));
+  border: 1.5px solid color-mix(in srgb, var(--md-role-color, var(--md-accent)) 50%, transparent);
+}
+.markdy-node[data-shape="circle"] .markdy-node__body {
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px;
+  gap: 8px;
+  text-align: center;
+}
+.markdy-node[data-shape="circle"] .markdy-node__label {
+  text-align: center;
+  -webkit-line-clamp: 4;
+  line-clamp: 4;
+}
 .markdy-node[data-kind="dot"] {
   width: 64px;
   height: 64px;
@@ -1188,11 +1411,24 @@ function ensureNodeStyles(doc) {
 .markdy-node[data-kind="token_strip"] {
   border-radius: 999px;
 }
+.markdy-node[data-is-container="1"] {
+  background: color-mix(in srgb, var(--md-surface-raised) 25%, transparent);
+  border: 1.5px dashed color-mix(in srgb, var(--md-role-color, var(--md-accent)) 45%, var(--md-border) 55%);
+  box-shadow: inset 0 0 0 1px var(--md-hairline);
+}
+.markdy-node[data-is-container="1"] .markdy-node__body {
+  align-items: flex-start;
+  padding: 12px 16px;
+}
+.markdy-node[data-is-container="1"][data-focal="1"] {
+  background: color-mix(in srgb, var(--md-accent-tint, var(--md-accent)) 14%, transparent);
+  border: 1.5px solid color-mix(in srgb, var(--md-accent) 65%, transparent);
+}
 .markdy-node[data-shape="rounded"] {
   border-radius: 16px;
 }
 .markdy-node[data-shape="terminal"] {
-  border-radius: 6px;
+  border-radius: 8px;
   font-family: var(--md-font-mono, ui-monospace, monospace);
   box-shadow: none;
   background: var(--md-node-surface, var(--md-surface));
@@ -1584,6 +1820,7 @@ function createNodeEl(node, theme, assets) {
   el.dataset.icon = iconKeyForNode(node);
   if (node.shape) el.dataset.shape = node.shape;
   if (node.focal) el.dataset.focal = "1";
+  if (node.shape === "container") el.dataset.isContainer = "1";
   el.title = `${node.label} (${typeText})`;
   el.setAttribute("aria-label", el.title);
   const body = document.createElement("div");
@@ -1690,25 +1927,26 @@ function mountSequenceLayer(layer, nodes, messages, activations, theme, bounds)
     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");
+    lifeline.setAttribute("y1", String(node.y + node.height + 8));
+    lifeline.setAttribute("y2", String(bounds.height - 32));
+    lifeline.setAttribute("stroke", theme.hairline ?? theme.border);
+    lifeline.setAttribute("stroke-width", "1.2");
+    lifeline.setAttribute("stroke-dasharray", "4 6");
+    lifeline.setAttribute("opacity", "0.85");
     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("x", String(x - 6));
     bar.setAttribute("y", String(activation.y));
-    bar.setAttribute("width", "10");
+    bar.setAttribute("width", "12");
     bar.setAttribute("height", String(activation.height));
-    bar.setAttribute("rx", "3");
+    bar.setAttribute("rx", "4");
     bar.setAttribute("fill", theme.accent);
     bar.setAttribute("opacity", "0");
+    bar.style.filter = `drop-shadow(0 0 6px ${theme.accent}66)`;
     svg.appendChild(bar);
   }
   const animations = [];
@@ -1737,17 +1975,19 @@ function mountSequenceLayer(layer, nodes, messages, activations, theme, bounds)
     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;
+      const width = message.label.length * 6.8 + 16;
       plate.setAttribute("x", String(midX - width / 2));
-      plate.setAttribute("y", String(message.y - 24));
+      plate.setAttribute("y", String(message.y - 25));
       plate.setAttribute("width", String(width));
-      plate.setAttribute("height", "18");
-      plate.setAttribute("rx", "5");
+      plate.setAttribute("height", "20");
+      plate.setAttribute("rx", "6");
       plate.setAttribute("fill", theme.labelPlate ?? theme.surface);
-      plate.setAttribute("stroke", theme.hairline ?? theme.border);
+      plate.setAttribute("fill-opacity", "0.96");
+      plate.setAttribute("stroke", theme.hairline ?? `color-mix(in srgb, ${theme.border} 70%, transparent)`);
       plate.setAttribute("stroke-width", "1");
+      plate.style.filter = "drop-shadow(0 1px 3px rgba(0,0,0,0.12))";
       group.appendChild(plate);
-      group.appendChild(createText(doc, midX, message.y - 15, message.label, theme));
+      group.appendChild(createText(doc, midX, message.y - 14.5, message.label, theme));
     }
     svg.appendChild(group);
     animations.push(
@@ -1805,25 +2045,29 @@ function mountTreeBuses(layer, buses, theme) {
   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");
+      const pathEl = doc.createElementNS("http://www.w3.org/2000/svg", "path");
+      let d;
+      if (Math.abs(childX - bus.parentX) < 1) {
+        d = toPathD([
+          { x: bus.parentX, y: bus.parentY },
+          { x: childX, y: bus.childY }
+        ], 12);
+      } else {
+        d = toPathD([
+          { x: bus.parentX, y: bus.parentY },
+          { x: bus.parentX, y: bus.branchY },
+          { x: childX, y: bus.branchY },
+          { x: childX, y: bus.childY }
+        ], 12);
+      }
+      pathEl.setAttribute("d", d);
+      pathEl.setAttribute("fill", "none");
+      pathEl.setAttribute("stroke", stroke);
+      pathEl.setAttribute("stroke-width", "1.6");
+      pathEl.setAttribute("stroke-linecap", "round");
+      pathEl.setAttribute("stroke-linejoin", "round");
+      group.appendChild(pathEl);
     }
     svg.appendChild(group);
   }
@@ -2250,6 +2494,20 @@ function createDiagram(opts) {
       plan.theme,
       { width: plan.meta.width, height: plan.meta.height }
     );
+  } else if (plan.diagramType === "radar") {
+    mountRadarLayer(
+      constellationLayer,
+      plan.nodes,
+      plan.theme,
+      { width: plan.meta.width, height: plan.meta.height }
+    );
+  } else if (plan.diagramType === "timeline") {
+    mountTimelineLayer(
+      constellationLayer,
+      plan.nodes,
+      plan.theme,
+      { width: plan.meta.width, height: plan.meta.height }
+    );
   }
   const groupLayer = document.createElement("div");
   groupLayer.className = "markdy-group-layer";
@@ -2336,16 +2594,8 @@ function createDiagram(opts) {
     const vHeight = viewport.clientHeight || container.clientHeight || vWidth * plan.meta.height / plan.meta.width;
     const canvasScaleX = vWidth / plan.meta.width;
     const canvasScaleY = vHeight / plan.meta.height;
-    const baseCanvasScale = Math.min(canvasScaleX, canvasScaleY);
-    const bounds = computeContentBounds();
-    const contentScaleX = vWidth * 0.94 / bounds.width;
-    const contentScaleY = vHeight * 0.94 / bounds.height;
-    const optimalContentScale = Math.min(contentScaleX, contentScaleY);
-    const chosenScale = Math.max(
-      baseCanvasScale,
-      Math.min(optimalContentScale, baseCanvasScale * 1.45)
-    );
-    fitScale = Number.isFinite(chosenScale) && chosenScale > 0 ? chosenScale : 1;
+    fitScale = Math.min(canvasScaleX, canvasScaleY);
+    if (!Number.isFinite(fitScale) || fitScale <= 0) fitScale = 1;
     const scaledWidth = plan.meta.width * fitScale;
     const scaledHeight = plan.meta.height * fitScale;
     sceneOffsetX = (vWidth - scaledWidth) / 2;
@@ -2866,9 +3116,6 @@ function encodeGifSequence(frames, options = {}) {
   return new Uint8Array(buffer);
 }
 
-// src/export/png-exporter.ts
-import html2canvas from "html2canvas";
-
 // src/export/svg-exporter.ts
 function copyRenderedStyles(source, clone) {
   if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return;
@@ -3118,6 +3365,8 @@ async function rasterizeDiagramToCanvas(containerEl, options = {}, pixelRatio =
     document.body.appendChild(host);
     try {
       await document.fonts?.ready;
+      const html2canvasModule = await import("html2canvas");
+      const html2canvas = html2canvasModule.default ?? html2canvasModule;
       return await html2canvas(clonedScene, {
         allowTaint: false,
         backgroundColor: options.transparentBackground ? null : void 0,

package/package.json

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