@markdy/renderer-dom 1.0.8 → 1.0.10

package/dist/index.js

@@ -35,6 +35,9 @@ function segmentIntersectsRect(a, b, rect) {
   }
   return false;
 }
+function rectsOverlap(a, b) {
+  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
 function countPathIntersections(points, obstacles) {
   let hits = 0;
   for (let i = 0; i < points.length - 1; i++) {
@@ -49,22 +52,108 @@ function countPathIntersections(points, obstacles) {
 function round1(n) {
   return Math.round(n * 10) / 10;
 }
-function toPathD(points, cornerRadius = 8) {
+function findSegmentHops(p1, p2, existingPaths = [], hopRadius = 5, minDistFromVertex = 10) {
+  const isHoriz = Math.abs(p1.y - p2.y) < 0.01;
+  const isVert = Math.abs(p1.x - p2.x) < 0.01;
+  if (!isHoriz && !isVert || existingPaths.length === 0) return [];
+  const crossings = [];
+  const minX = Math.min(p1.x, p2.x);
+  const maxX = Math.max(p1.x, p2.x);
+  const minY = Math.min(p1.y, p2.y);
+  const maxY = Math.max(p1.y, p2.y);
+  for (const path of existingPaths) {
+    for (let j = 0; j < path.length - 1; j++) {
+      const q1 = path[j];
+      const q2 = path[j + 1];
+      const qHoriz = Math.abs(q1.y - q2.y) < 0.01;
+      const qVert = Math.abs(q1.x - q2.x) < 0.01;
+      if (isHoriz && qVert) {
+        const crossX = q1.x;
+        const crossY = p1.y;
+        const qMinY = Math.min(q1.y, q2.y);
+        const qMaxY = Math.max(q1.y, q2.y);
+        if (crossX > minX + minDistFromVertex && crossX < maxX - minDistFromVertex && crossY > qMinY + 6 && crossY < qMaxY - 6) {
+          crossings.push({ x: crossX, y: crossY });
+        }
+      } else if (isVert && qHoriz) {
+        const crossX = p1.x;
+        const crossY = q1.y;
+        const qMinX = Math.min(q1.x, q2.x);
+        const qMaxX = Math.max(q1.x, q2.x);
+        if (crossX > qMinX + 6 && crossX < qMaxX - 6 && crossY > minY + minDistFromVertex && crossY < maxY - minDistFromVertex) {
+          crossings.push({ x: crossX, y: crossY });
+        }
+      }
+    }
+  }
+  crossings.sort((a, b) => {
+    const da = Math.hypot(a.x - p1.x, a.y - p1.y);
+    const db = Math.hypot(b.x - p1.x, b.y - p1.y);
+    return da - db;
+  });
+  return crossings;
+}
+function appendSegmentWithHops(parts, start, end, existingPaths = [], hopRadius = 5) {
+  const isHoriz = Math.abs(start.y - end.y) < 0.01;
+  const isVert = Math.abs(start.x - end.x) < 0.01;
+  if (!isHoriz && !isVert || existingPaths.length === 0) {
+    parts.push(`L ${round1(end.x)} ${round1(end.y)}`);
+    return;
+  }
+  const hops = findSegmentHops(start, end, existingPaths, hopRadius);
+  if (hops.length === 0) {
+    parts.push(`L ${round1(end.x)} ${round1(end.y)}`);
+    return;
+  }
+  const R = hopRadius;
+  if (isHoriz) {
+    const dx = end.x - start.x;
+    for (const h of hops) {
+      if (dx > 0) {
+        parts.push(`L ${round1(h.x - R)} ${round1(start.y)}`);
+        parts.push(`A ${R} ${R} 0 0 0 ${round1(h.x + R)} ${round1(start.y)}`);
+      } else {
+        parts.push(`L ${round1(h.x + R)} ${round1(start.y)}`);
+        parts.push(`A ${R} ${R} 0 0 1 ${round1(h.x - R)} ${round1(start.y)}`);
+      }
+    }
+    parts.push(`L ${round1(end.x)} ${round1(end.y)}`);
+  } else if (isVert) {
+    const dy = end.y - start.y;
+    for (const h of hops) {
+      if (dy > 0) {
+        parts.push(`L ${round1(start.x)} ${round1(h.y - R)}`);
+        parts.push(`A ${R} ${R} 0 0 1 ${round1(start.x)} ${round1(h.y + R)}`);
+      } else {
+        parts.push(`L ${round1(start.x)} ${round1(h.y + R)}`);
+        parts.push(`A ${R} ${R} 0 0 0 ${round1(start.x)} ${round1(h.y - R)}`);
+      }
+    }
+    parts.push(`L ${round1(end.x)} ${round1(end.y)}`);
+  }
+}
+function toPathD(points, cornerRadius = 14, existingPaths = []) {
   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)}`;
+    const parts2 = [`M ${round1(points[0].x)} ${round1(points[0].y)}`];
+    appendSegmentWithHops(parts2, points[0], points[1], existingPaths);
+    return parts2.join(" ");
   }
   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 parts2 = [`M ${round1(points[0].x)} ${round1(points[0].y)}`];
+    for (let i = 1; i < points.length; i++) {
+      appendSegmentWithHops(parts2, points[i - 1], points[i], existingPaths);
+    }
+    return parts2.join(" ");
   }
   const parts = [`M ${round1(points[0].x)} ${round1(points[0].y)}`];
+  let prevCornerEnd = points[0];
   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)}`);
+      appendSegmentWithHops(parts, prevCornerEnd, cur, existingPaths);
       continue;
     }
     const dx1 = cur.x - prev.x;
@@ -73,8 +162,9 @@ 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) {
-      parts.push(`L ${round1(cur.x)} ${round1(cur.y)}`);
+    if (len1 < 0.5 || len2 < 0.5) {
+      appendSegmentWithHops(parts, prevCornerEnd, cur, existingPaths);
+      prevCornerEnd = cur;
       continue;
     }
     const r = Math.min(cornerRadius, len1 / 2, len2 / 2);
@@ -82,21 +172,22 @@ function toPathD(points, cornerRadius = 8) {
     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)}`);
+    appendSegmentWithHops(parts, prevCornerEnd, { x: bx, y: by }, existingPaths);
     parts.push(`Q ${round1(cur.x)} ${round1(cur.y)} ${round1(ax)} ${round1(ay)}`);
+    prevCornerEnd = { x: ax, y: 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;
+  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,56 +200,49 @@ function polylineLength(points) {
 function segmentLength(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
-var LABEL_BOX_HEIGHT = 16;
-function rectsOverlap(a, b) {
-  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
-}
+var LABEL_BOX_HEIGHT = 18;
 function overlapCount(rect, obstacles) {
   let hits = 0;
   for (const o of obstacles) if (rectsOverlap(rect, o)) hits++;
   return hits;
 }
 function placeFlowLabel(points, textWidth, obstacles, bounds) {
-  let bestIndex = 0;
-  let bestLength = -1;
+  const halfW = textWidth / 2 + 5;
+  const halfH = LABEL_BOX_HEIGHT / 2 + 1;
+  const pad = 12;
+  let bestPlacement = null;
+  let bestScore = Number.POSITIVE_INFINITY;
+  const stepX = Math.max(18, halfW + 6);
+  const stepY = Math.max(18, halfH + 6);
   for (let i = 0; i < points.length - 1; i++) {
-    const len = segmentLength(points[i], points[i + 1]);
-    if (len > bestLength) {
-      bestLength = len;
-      bestIndex = i;
-    }
-  }
-  const a = points[bestIndex] ?? { x: 0, y: 0 };
-  const b = points[bestIndex + 1] ?? a;
-  const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-  const horizontal = Math.abs(a.x - b.x) >= Math.abs(a.y - b.y);
-  const half = textWidth / 2;
-  const halfH = LABEL_BOX_HEIGHT / 2;
-  const pad = 8;
-  const base = horizontal ? 14 : half + 12;
-  const step = horizontal ? LABEL_BOX_HEIGHT + 4 : textWidth + 12;
-  const order = horizontal ? [-1, 1] : [1, -1];
-  const offsets = [];
-  for (let k = 0; k < 8; k++) {
-    for (const sign of order) offsets.push(sign * (base + k * step));
-  }
-  let fallback = null;
-  let fallbackHits = Number.POSITIVE_INFINITY;
-  for (const off of offsets) {
-    const cx = clamp(horizontal ? mid.x : mid.x + off, pad + half, bounds.width - pad - half);
-    const cy = clamp(horizontal ? mid.y + off : mid.y, pad + halfH, bounds.height - pad - halfH);
-    const rect = { x1: cx - half, y1: cy - halfH, x2: cx + half, y2: cy + halfH };
-    const hits = overlapCount(rect, obstacles);
-    if (hits === 0) return { x: round1(cx), y: round1(cy), rect };
-    if (hits < fallbackHits) {
-      fallbackHits = hits;
-      fallback = { x: round1(cx), y: round1(cy), rect };
-    }
-  }
-  return fallback ?? {
-    x: round1(mid.x),
-    y: round1(mid.y),
-    rect: { x1: mid.x - half, y1: mid.y - halfH, x2: mid.x + half, y2: mid.y + halfH }
+    const a = points[i];
+    const b = points[i + 1];
+    const segLen = segmentLength(a, b);
+    if (segLen < 1) continue;
+    const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+    const horizontal = Math.abs(a.x - b.x) >= Math.abs(a.y - b.y);
+    const offsets = [0];
+    for (let k = 1; k <= 8; k++) {
+      offsets.push(-k * (horizontal ? stepX : stepY), k * (horizontal ? stepX : stepY));
+    }
+    for (const off of offsets) {
+      const cx = clamp(horizontal ? mid.x + off : mid.x, pad + halfW, bounds.width - pad - halfW);
+      const cy = clamp(horizontal ? mid.y : mid.y + off, pad + halfH, bounds.height - pad - halfH);
+      const rect = { x1: cx - halfW, y1: cy - halfH, x2: cx + halfW, y2: cy + halfH };
+      const hits = overlapCount(rect, obstacles);
+      const score = hits * 1e5 + (horizontal ? 0 : 40) + Math.abs(off) * 2 - Math.min(100, segLen) * 0.1;
+      if (score < bestScore) {
+        bestScore = score;
+        bestPlacement = { x: round1(cx), y: round1(cy), rect };
+      }
+    }
+  }
+  if (bestPlacement) return bestPlacement;
+  const firstMid = points.length >= 2 ? { x: (points[0].x + points[1].x) / 2, y: (points[0].y + points[1].y) / 2 } : { x: 0, y: 0 };
+  return {
+    x: round1(firstMid.x),
+    y: round1(firstMid.y),
+    rect: { x1: firstMid.x - halfW, y1: firstMid.y - halfH, x2: firstMid.x + halfW, y2: firstMid.y + halfH }
   };
 }
 function clamp(n, min, max) {
@@ -166,16 +250,19 @@ 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))
   };
 }
 function laneOffset(lane) {
-  if (lane <= 0) return 0;
-  const step = Math.ceil(lane / 2);
-  return (lane % 2 === 1 ? 1 : -1) * step * 18;
+  if (lane === 0) return -8;
+  if (lane === 1) return 8;
+  if (lane === 2) return -16;
+  if (lane === 3) return 16;
+  const step = Math.ceil((lane + 1) / 2);
+  return (lane % 2 === 1 ? 1 : -1) * step * 8;
 }
 function routeLength(points) {
   let total = 0;
@@ -196,63 +283,170 @@ 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 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 dx = targetCenter.x - sourceCenter.x;
+  const dy = targetCenter.y - sourceCenter.y;
+  const stubLen = 18;
+  const allObstacles = obstacles;
   const candidates = [];
-  if (Math.abs(source.y - target.y) < 1e-3 || Math.abs(source.x - target.x) < 1e-3) {
-    candidates.push([source, target]);
-  }
-  const midX = round1((source.x + target.x) / 2 + laneShift);
-  const midY = round1((source.y + target.y) / 2 + laneShift);
-  candidates.push(
-    [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);
-  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]
-  );
-  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);
-  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]
-  );
+  if (dx >= 30) {
+    let sY = sourceCenter.y;
+    let tY = targetCenter.y;
+    if (Math.abs(dy) > 16) {
+      const dirSign = Math.sign(dy);
+      sY = clamp(sourceCenter.y + dirSign * 12, sourceRect.y1 + 10, sourceRect.y2 - 10);
+      tY = clamp(targetCenter.y - dirSign * 12, targetRect.y1 + 10, targetRect.y2 - 10);
+    } else {
+      sY = clamp(sourceCenter.y + (lane > 0 ? lane % 2 === 1 ? 4 : -4 : 0), sourceRect.y1 + 10, sourceRect.y2 - 10);
+      tY = clamp(targetCenter.y + (lane > 0 ? lane % 2 === 1 ? 4 : -4 : 0), targetRect.y1 + 10, targetRect.y2 - 10);
+    }
+    const sPort = { x: sourceRect.x2, y: sY };
+    const tPort = { x: targetRect.x1, y: tY };
+    if (Math.abs(sY - tY) < 1) {
+      candidates.push([sPort, tPort]);
+    }
+    const rawMidX = (sPort.x + tPort.x) / 2 + laneShift;
+    const midX = round1(clamp(rawMidX, sourceRect.x2 + 8, targetRect.x1 - 8));
+    candidates.push([
+      sPort,
+      { x: midX, y: sY },
+      { x: midX, y: tY },
+      tPort
+    ]);
+    let minObstacleY = Math.min(sourceRect.y1, targetRect.y1);
+    for (const o of allObstacles) {
+      if (o.x2 > sourceRect.x2 && o.x1 < targetRect.x1) {
+        minObstacleY = Math.min(minObstacleY, o.y1);
+      }
+    }
+    const bypassYTop = Math.max(16, minObstacleY - 24 - Math.abs(laneShift));
+    candidates.push([
+      { x: sourceCenter.x, y: sourceRect.y1 },
+      { x: sourceCenter.x, y: bypassYTop },
+      { x: targetCenter.x, y: bypassYTop },
+      { x: targetCenter.x, y: targetRect.y1 }
+    ]);
+  } else if (dx < -30) {
+    const sX = clamp(sourceCenter.x + (lane > 0 ? lane % 2 === 1 ? 8 : -8 : 0), sourceRect.x1 + 16, sourceRect.x2 - 16);
+    const tX = clamp(targetCenter.x + (lane > 0 ? lane % 2 === 1 ? 8 : -8 : 0), targetRect.x1 + 16, targetRect.x2 - 16);
+    let minObstacleY = Math.min(sourceRect.y1, targetRect.y1);
+    for (const o of allObstacles) {
+      if (o.x2 > targetRect.x1 && o.x1 < sourceRect.x2) {
+        minObstacleY = Math.min(minObstacleY, o.y1);
+      }
+    }
+    const highwayYTop = Math.max(16, minObstacleY - 28 - Math.abs(laneShift));
+    candidates.push([
+      { x: sX, y: sourceRect.y1 },
+      { x: sX, y: highwayYTop },
+      { x: tX, y: highwayYTop },
+      { x: tX, y: targetRect.y1 }
+    ]);
+    let maxObstacleY = Math.max(sourceRect.y2, targetRect.y2);
+    for (const o of allObstacles) {
+      if (o.x2 > targetRect.x1 && o.x1 < sourceRect.x2) {
+        maxObstacleY = Math.max(maxObstacleY, o.y2);
+      }
+    }
+    const highwayYBottom = Math.min(bounds.height - 16, maxObstacleY + 28 + Math.abs(laneShift));
+    candidates.push([
+      { x: sX, y: sourceRect.y2 },
+      { x: sX, y: highwayYBottom },
+      { x: tX, y: highwayYBottom },
+      { x: tX, y: targetRect.y2 }
+    ]);
+    let sY = sourceCenter.y;
+    let tY = targetCenter.y;
+    if (Math.abs(dy) > 16) {
+      const dirSign = Math.sign(dy);
+      sY = clamp(sourceCenter.y + dirSign * 12, sourceRect.y1 + 10, sourceRect.y2 - 10);
+      tY = clamp(targetCenter.y - dirSign * 12, targetRect.y1 + 10, targetRect.y2 - 10);
+    }
+    const sPortL = { x: sourceRect.x1, y: sY };
+    const tPortR = { x: targetRect.x2, y: tY };
+    const midX = round1((sPortL.x + tPortR.x) / 2 + laneShift);
+    candidates.push([
+      sPortL,
+      { x: midX, y: sY },
+      { x: midX, y: tY },
+      tPortR
+    ]);
+  } else {
+    const sX = clamp(sourceCenter.x + laneShift, sourceRect.x1 + 16, sourceRect.x2 - 16);
+    const tX = clamp(targetCenter.x + laneShift, targetRect.x1 + 16, targetRect.x2 - 16);
+    const sourceDown = dy >= 0;
+    const sPort = { x: sX, y: sourceDown ? sourceRect.y2 : sourceRect.y1 };
+    const tPort = { x: tX, y: sourceDown ? targetRect.y1 : targetRect.y2 };
+    if (Math.abs(sX - tX) < 1) {
+      candidates.push([sPort, tPort]);
+    } else {
+      const midY = round1((sPort.y + tPort.y) / 2 + laneShift);
+      candidates.push([
+        sPort,
+        { x: sPort.x, y: midY },
+        { x: tPort.x, y: midY },
+        tPort
+      ]);
+    }
+  }
+  for (const obstacle of allObstacles) {
+    const bypassYTop = Math.max(16, obstacle.y1 - 18 - Math.abs(laneShift));
+    const bypassYBottom = Math.min(bounds.height - 16, obstacle.y2 + 18 + Math.abs(laneShift));
+    const sourceRight = dx >= 0;
+    const targetLeft = dx >= 0;
+    const sP = { x: sourceRight ? sourceRect.x2 : sourceRect.x1, y: sourceCenter.y };
+    const tP = { x: targetLeft ? targetRect.x1 : targetRect.x2, y: targetCenter.y };
+    candidates.push([
+      sP,
+      { x: sP.x + (sourceRight ? stubLen : -stubLen), y: sP.y },
+      { x: sP.x + (sourceRight ? stubLen : -stubLen), y: bypassYTop },
+      { x: tP.x + (targetLeft ? -stubLen : stubLen), y: bypassYTop },
+      { x: tP.x + (targetLeft ? -stubLen : stubLen), y: tP.y },
+      tP
+    ]);
+    candidates.push([
+      sP,
+      { x: sP.x + (sourceRight ? stubLen : -stubLen), y: sP.y },
+      { x: sP.x + (sourceRight ? stubLen : -stubLen), y: bypassYBottom },
+      { x: tP.x + (targetLeft ? -stubLen : stubLen), y: bypassYBottom },
+      { x: tP.x + (targetLeft ? -stubLen : stubLen), y: tP.y },
+      tP
+    ]);
+  }
   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, allObstacles);
+    const bends = routeBends(cleaned);
+    const length = routeLength(cleaned);
+    const score = hits * 1e6 + bends * 500 + length;
     if (score < bestScore) {
-      best = candidate;
       bestScore = score;
+      best = cleaned;
     }
   }
-  return best.map((point) => clampPointToScene(point, bounds));
+  return cleanCollinearPoints(best.map((p) => clampPointToScene(p, bounds)));
 }
 
 // src/edges.ts
@@ -324,23 +518,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);
@@ -367,16 +563,38 @@ function ensureDefs(svg, theme, id) {
   defs.appendChild(filter);
   svg.prepend(defs);
 }
-function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObstacles, labelObstacles, bounds, lane) {
+function isDarkTheme(theme) {
+  if (theme.name === "paper" || theme.name === "editorial" || theme.name === "sketchy") {
+    return false;
+  }
+  const canvas = (theme.canvas || theme.surface || "").trim();
+  if (canvas.startsWith("#")) {
+    const hex = canvas.slice(1);
+    const r = parseInt(hex.length === 3 ? hex[0] + hex[0] : hex.slice(0, 2), 16) || 0;
+    const g = parseInt(hex.length === 3 ? hex[1] + hex[1] : hex.slice(2, 4), 16) || 0;
+    const b = parseInt(hex.length === 3 ? hex[2] + hex[2] : hex.slice(4, 6), 16) || 0;
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance < 0.5;
+  }
+  return true;
+}
+function computeEdgeLabelColor(edgeColor, isDark) {
+  if (isDark) {
+    return `color-mix(in srgb, ${edgeColor} 65%, #f8fafc)`;
+  }
+  return `color-mix(in srgb, ${edgeColor} 75%, #090d16)`;
+}
+function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObstacles, labelObstacles, bounds, lane, existingPaths = []) {
   ensureDefs(svg, theme, sceneId);
   const color = theme.edges[kind];
   const style = EDGE_STYLES[kind];
   const isSelfLoop = from.id === to.id;
   const points = isSelfLoop ? dedupePoints(selfLoopPath(from)) : dedupePoints(routeEdgePoints(from, to, routeObstacles, bounds, lane));
-  const d = toPathD(points);
+  const d = toPathD(points, 14, existingPaths);
   const len = polylineLength(points);
   const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
   group.setAttribute("data-edge-kind", kind);
+  group.setAttribute("class", `markdy-edge markdy-edge--${kind}`);
   group.style.opacity = "0";
   const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
   path.setAttribute("d", d);
@@ -385,47 +603,57 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
   path.setAttribute("stroke-width", kind === "dependency" ? "1.5" : "2");
   path.setAttribute("stroke-linejoin", "round");
   path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("class", `markdy-edge-path markdy-edge-path--${kind}`);
   if (style.dash) path.setAttribute("stroke-dasharray", style.dash);
   if (style.marker !== "none") {
     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.setAttribute("class", "markdy-edge-dot");
   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 isDark = isDarkTheme(theme);
+    const labelColor = computeEdgeLabelColor(color, isDark);
+    const textWidth = Math.max(36, label.length * 6.6 + 8);
     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 = 6;
     const halfW = textWidth / 2;
+    plate.setAttribute("class", "markdy-edge-plate");
     plate.setAttribute("x", String(placement.x - halfW - padX));
     plate.setAttribute("y", String(placement.y - 9));
     plate.setAttribute("width", String(textWidth + padX * 2));
     plate.setAttribute("height", "18");
-    plate.setAttribute("rx", "6");
-    plate.setAttribute("fill", theme.labelPlate ?? theme.surface);
-    plate.setAttribute("fill-opacity", "0.9");
-    plate.setAttribute("stroke", theme.hairline ?? `color-mix(in srgb, ${theme.border} 60%, transparent)`);
-    plate.setAttribute("stroke-width", "1");
+    plate.setAttribute("rx", "4");
+    plate.setAttribute("ry", "4");
+    plate.setAttribute("fill", theme.canvas ?? theme.surface ?? "#ffffff");
+    plate.setAttribute("fill-opacity", "0.85");
+    plate.setAttribute("stroke", translucentColor(color, "28"));
+    plate.setAttribute("stroke-width", "0.85");
     plate.style.opacity = "0";
+    plate.style.filter = "none";
     group.appendChild(plate);
     labelEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    labelEl.setAttribute("class", "markdy-edge-label");
     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-family", "ui-monospace, SFMono-Regular, Menlo, monospace");
-    labelEl.setAttribute("fill", theme.text);
+    labelEl.setAttribute("font-size", "10.5");
+    labelEl.setAttribute("font-weight", "500");
+    labelEl.setAttribute("letter-spacing", "0.02em");
+    labelEl.setAttribute("font-family", "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace");
+    labelEl.setAttribute("fill", labelColor);
     labelEl.textContent = label;
     labelEl.style.opacity = "0";
     group.appendChild(labelEl);
@@ -450,6 +678,11 @@ 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";
+  if (visible) {
+    runtime.path.classList.add("markdy-edge-path--flowing");
+  } else {
+    runtime.path.classList.remove("markdy-edge-path--flowing");
+  }
 }
 function translucentColor(color, alpha = "aa") {
   const value = color.trim();
@@ -461,8 +694,16 @@ function translucentColor(color, alpha = "aa") {
   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 fromId = typeof from === "string" ? from : from.id;
+  const toId = typeof to === "string" ? to : to.id;
+  const pair = [fromId, toId].sort().join("|");
+  const keys = [`pair:${pair}`, `out:${fromId}`, `in:${toId}`];
+  if (typeof from !== "string" && typeof to !== "string") {
+    const colFrom = Math.round(from.x / 80);
+    const colTo = Math.round(to.x / 80);
+    const corridorKey = colFrom !== colTo ? `corridor-x:${Math.min(colFrom, colTo)}-${Math.max(colFrom, colTo)}` : `corridor-y:${Math.round(from.y / 60)}-${Math.round(to.y / 60)}`;
+    keys.push(corridorKey);
+  }
   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;
@@ -492,20 +733,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,21 +770,49 @@ 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)"
       })
     );
   }
   return anims;
 }
 function animateEdgeEmphasis(runtime, startMs, durMs, strength, color) {
+  const anims = [];
   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" }
+  anims.push(
+    runtime.path.animate(
+      [{ filter: baseFilter }, { filter: peakFilter }, { filter: baseFilter }],
+      { duration: durMs, delay: startMs, fill: "none", easing: "ease-in-out" }
+    )
   );
+  if (runtime.label) {
+    anims.push(
+      runtime.label.animate(
+        [
+          { filter: "none", opacity: 1 },
+          { filter: `drop-shadow(0 0 4px ${translucentColor(glowColor, "88")}) brightness(1.25)`, opacity: 1 },
+          { filter: "none", opacity: 1 }
+        ],
+        { duration: durMs, delay: startMs, fill: "none", easing: "ease-in-out" }
+      )
+    );
+  }
+  if (runtime.labelPlate) {
+    anims.push(
+      runtime.labelPlate.animate(
+        [
+          { stroke: translucentColor(runtime.color, "22") },
+          { stroke: translucentColor(glowColor, "88") },
+          { stroke: translucentColor(runtime.color, "22") }
+        ],
+        { duration: durMs, delay: startMs, fill: "none", easing: "ease-in-out" }
+      )
+    );
+  }
+  return anims;
 }
 function computeFrameTransform(targetIds, nodes, bounds, requestedZoom = DEFAULT_FRAME_ZOOM) {
   const targets = new Set(targetIds);
@@ -567,13 +851,14 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
   const edgeRectById = new Map(nodes.map((node) => [node.id, boxRect(node)]));
   const edgeLabels = [];
   const edgeLanes = /* @__PURE__ */ new Map();
+  const placedPaths = [];
   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 routeObstacles = [...allNodeRects, ...edgeLabels.map((l) => inflateRect(l, 4))];
+    const lane = nextEdgeLane(edgeLanes, from, to);
     const runtime = createEdgeRuntime(
       svg,
       from,
@@ -583,10 +868,12 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
       theme,
       sceneId,
       routeObstacles,
-      [...edgeRects, ...edgeLabels],
+      [...allNodeRects, ...edgeLabels],
       bounds,
-      lane
+      lane,
+      placedPaths
     );
+    placedPaths.push(runtime.points);
     if (runtime.labelRect) edgeLabels.push(runtime.labelRect);
     edgeRuntimes.set(edge.id, runtime);
   }
@@ -606,14 +893,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,13 +931,13 @@ 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;
         }
         const runtime = edgeRuntimes.get(id);
-        if (runtime) anims.push(animateEdgeEmphasis(runtime, startMs, durMs, strength, typeof cue.params.color === "string" ? cue.params.color : void 0));
+        if (runtime) anims.push(...animateEdgeEmphasis(runtime, startMs, durMs, strength, typeof cue.params.color === "string" ? cue.params.color : void 0));
       }
       continue;
     }
@@ -666,13 +953,13 @@ 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;
         }
         const runtime = edgeRuntimes.get(id);
-        if (runtime) anims.push(animateEdgeEmphasis(runtime, startMs, durMs, zoom, void 0));
+        if (runtime) anims.push(...animateEdgeEmphasis(runtime, startMs, durMs, zoom, void 0));
       }
       continue;
     }
@@ -691,7 +978,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;
@@ -702,22 +989,46 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
       const from = nodeById.get(seg.from);
       const to = nodeById.get(seg.to);
       if (!from || !to) continue;
-      const routeObstacles = [];
-      for (const [id, rect] of rectById) {
-        if (id !== seg.from && id !== seg.to) routeObstacles.push(rect);
-      }
-      const lane = nextEdgeLane(laneByPair, seg.from, seg.to);
+      const routeObstacles = [...allNodeRects, ...placedLabels.map((l) => inflateRect(l, 4))];
+      const lane = nextEdgeLane(laneByPair, from, to);
       const labelObstacles = [...allNodeRects, ...placedLabels];
       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);
+        runtime = createEdgeRuntime(
+          svg,
+          from,
+          to,
+          seg.op,
+          seg.label,
+          theme,
+          sceneId,
+          routeObstacles,
+          labelObstacles,
+          bounds,
+          lane,
+          placedPaths
+        );
+        placedPaths.push(runtime.points);
         if (runtime.labelRect) placedLabels.push(runtime.labelRect);
         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();
@@ -732,16 +1043,14 @@ function buildStructuralEdgeAnimations(edges, nodes, theme, scene, bounds, edgeR
   const rectById = new Map(nodes.map((n) => [n.id, boxRect(n)]));
   const allNodeRects = [...rectById.values()];
   const placedLabels = [];
+  const placedPaths = [];
   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 routeObstacles = [...allNodeRects, ...placedLabels.map((l) => inflateRect(l, 4))];
     const lane = nextEdgeLane(laneByPair, edge.from, edge.to);
     const labelObstacles = [...allNodeRects, ...placedLabels];
     const runtime = createEdgeRuntime(
@@ -755,8 +1064,10 @@ function buildStructuralEdgeAnimations(edges, nodes, theme, scene, bounds, edgeR
       routeObstacles,
       labelObstacles,
       bounds,
-      lane
+      lane,
+      placedPaths
     );
+    placedPaths.push(runtime.points);
     if (runtime.labelRect) placedLabels.push(runtime.labelRect);
     setEdgeVisible(runtime, true);
     edgeRuntimes.set(edge.id, runtime);
@@ -830,6 +1141,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 +1150,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 +1169,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 +1271,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 +1416,34 @@ 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 solid var(--md-group-border, color-mix(in srgb, var(--md-border) 45%, transparent));
+  border-radius: 16px;
+  background: color-mix(in srgb, var(--md-surface-raised) 32%, transparent);
+  box-shadow:
+    0 4px 20px -4px var(--md-shadow, rgba(0, 0, 0, 0.25)),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   pointer-events: none;
   z-index: 40;
 }
 .markdy-group-boundary__label {
   position: absolute;
-  left: 12px;
-  top: -10px;
-  padding: 2px 8px;
-  font-size: 10px;
+  left: 14px;
+  top: 10px;
+  padding: 4px 10px;
+  font-size: 10.5px;
   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);
+  color: var(--md-text);
+  background: color-mix(in srgb, var(--md-surface-raised) 85%, transparent);
+  border: 1px solid var(--md-group-border, color-mix(in srgb, var(--md-border) 50%, transparent));
+  border-radius: 6px;
+  font-family: var(--md-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
 }
 `;
   doc.head.appendChild(style);
@@ -999,10 +1457,11 @@ function createGroupBoundaryEl(boundary, theme, doc = document) {
   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");
+  const displayLabel = boundary.label || boundary.id;
+  if (displayLabel) {
+    const label = doc.createElement("div");
     label.className = "markdy-group-boundary__label";
-    label.textContent = boundary.label;
+    label.textContent = displayLabel;
     el.appendChild(label);
   }
   return el;
@@ -1024,20 +1483,22 @@ 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);
+  min-width: 140px;
+  min-height: 64px;
   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)),
+    0 1px 3px color-mix(in srgb, var(--md-shadow, rgba(2, 6, 23, 0.35)) 35%, transparent),
+    0 10px 24px -10px var(--md-shadow, rgba(2, 6, 23, 0.45)),
     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);
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  font-family: var(--md-font-node, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif);
   overflow: hidden;
   opacity: 0;
   transform: translateY(8px);
@@ -1049,33 +1510,34 @@ 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 18px 38px -10px rgba(2, 6, 23, 0.7),
+    inset 0 0 0 1.5px color-mix(in srgb, var(--md-accent) 80%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--md-accent) 24%, 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),
-    inset 0 0 18px -8px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 45%, 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)) 70%, transparent),
+    0 0 28px -2px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 55%, transparent),
+    inset 0 0 18px -8px color-mix(in srgb, var(--md-glow-color, var(--md-accent)) 50%, 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;
+  gap: 12px;
   min-width: 0;
+  box-sizing: border-box;
 }
 .markdy-node__icon {
   flex: 0 0 auto;
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1083,14 +1545,14 @@ function ensureNodeStyles(doc) {
   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)) 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)) 38%, transparent),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 .markdy-node__icon svg {
-  width: 17px;
-  height: 17px;
+  width: 18px;
+  height: 18px;
   display: block;
   stroke: currentColor;
 }
@@ -1118,10 +1580,11 @@ 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.24;
+  color: var(--md-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
@@ -1129,30 +1592,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: 16px;
   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 16px 16px; }
 .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 +1628,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 +1674,26 @@ 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: 1px solid color-mix(in srgb, var(--md-role-color, var(--md-accent)) 40%, var(--md-border) 60%);
+  box-shadow: inset 0 0 0 1px var(--md-hairline), 0 4px 16px -4px var(--md-shadow, rgba(0,0,0,0.25));
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+.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)) 16%, transparent);
+  border: 1.5px solid color-mix(in srgb, var(--md-accent) 70%, 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 +2085,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");
@@ -1607,6 +2109,9 @@ function createTitleEl(title) {
   const el = document.createElement("div");
   el.className = "markdy-scene-title";
   el.textContent = title;
+  if (!title) {
+    el.style.display = "none";
+  }
   return el;
 }
 
@@ -1690,25 +2195,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 +2243,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 +2313,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);
   }
@@ -1903,6 +2415,28 @@ function ensureSceneStyles(doc) {
   from { opacity: 0.24; transform: scale(0.85); }
   to { opacity: 0.9; transform: scale(1.15); }
 }
+@keyframes markdy-flow-dash {
+  to { stroke-dashoffset: -24; }
+}
+.markdy-edge {
+  transition: opacity 0.2s ease;
+}
+.markdy-edge-path--flowing {
+  animation: markdy-flow-dash 1.2s linear infinite;
+}
+.markdy-edge-path {
+  transition: stroke 0.2s ease, stroke-width 0.2s ease, filter 0.2s ease;
+}
+.markdy-edge-plate {
+  transition: opacity 0.2s ease, fill-opacity 0.2s ease, stroke 0.2s ease;
+  pointer-events: none;
+}
+.markdy-edge-label {
+  user-select: none;
+  -webkit-user-select: none;
+  pointer-events: none;
+  transition: fill 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
+}
 .markdy-constellation-star {
   transform-box: fill-box;
   transform-origin: center;
@@ -1979,13 +2513,17 @@ function ensureSceneStyles(doc) {
 @media (prefers-reduced-motion: reduce) {
   .markdy-node,
   .markdy-beat-caption,
-  .markdy-constellation-star {
+  .markdy-constellation-star,
+  .markdy-edge-path,
+  .markdy-edge-path--flowing {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
+    animation: none !important;
   }
   .markdy-node { opacity: 1 !important; transform: none !important; }
   .markdy-constellation-star { animation: none !important; opacity: 0.7 !important; }
+  .markdy-edge-path--flowing { animation: none !important; }
 }
 @media print {
   .markdy-node { opacity: 1 !important; transform: none !important; }
@@ -2250,6 +2788,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 +2888,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 +3410,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 +3659,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,