@markdy/renderer-dom 1.0.9 → 1.0.10

package/README.md

@@ -45,7 +45,7 @@ import { createDiagram } from "@markdy/renderer-dom";
 const diagram = createDiagram({
   container: document.getElementById("scene")!,
   code: `
-    scene "Request" theme=paper
+    scene theme=paper
     browser Web
     service API
     beat main:

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 = 14) {
+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;
@@ -74,7 +163,8 @@ function toPathD(points, cornerRadius = 14) {
     const len1 = Math.hypot(dx1, dy1);
     const len2 = Math.hypot(dx2, dy2);
     if (len1 < 0.5 || len2 < 0.5) {
-      parts.push(`L ${round1(cur.x)} ${round1(cur.y)}`);
+      appendSegmentWithHops(parts, prevCornerEnd, cur, existingPaths);
+      prevCornerEnd = cur;
       continue;
     }
     const r = Math.min(cornerRadius, len1 / 2, len2 / 2);
@@ -82,8 +172,9 @@ function toPathD(points, cornerRadius = 14) {
     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(" ");
 }
@@ -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 = 20;
-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 = 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++) {
-    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) {
@@ -173,9 +257,12 @@ 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 * 16;
+  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;
@@ -217,69 +304,149 @@ 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: sourceRight ? sourceRect.x2 : sourceRect.x1,
-    y: clamp(sourceCenter.y + laneShift, sourceRect.y1 + 16, sourceRect.y2 - 16)
-  } : {
-    x: clamp(sourceCenter.x + laneShift, sourceRect.x1 + 20, sourceRect.x2 - 20),
-    y: sourceDown ? sourceRect.y2 : sourceRect.y1
-  };
-  const target = horizontalPrimary ? {
-    x: targetLeft ? targetRect.x1 : targetRect.x2,
-    y: clamp(targetCenter.y + laneShift, targetRect.y1 + 16, targetRect.y2 - 16)
-  } : {
-    x: clamp(targetCenter.x + laneShift, targetRect.x1 + 20, targetRect.x2 - 20),
-    y: targetUp ? targetRect.y1 : targetRect.y2
-  };
+  const dx = targetCenter.x - sourceCenter.x;
+  const dy = targetCenter.y - sourceCenter.y;
   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 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, 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(20, minObstacleY - 28 - lane * 14);
-  const bottomLane = Math.min(bounds.height - 20, maxObstacleY + 28 + lane * 14);
-  candidates.push(
-    [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(20, minObstacleX - 28 - lane * 14);
-  const rightLane = Math.min(bounds.width - 20, maxObstacleX + 28 + lane * 14);
-  candidates.push(
-    [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]
-  );
+  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 cleaned = cleanCollinearPoints(candidate);
-    const hits = countPathIntersections(cleaned, infl);
-    const score = hits * 1e5 + routeBends(cleaned) * 800 + routeLength(cleaned);
+    const hits = countPathIntersections(cleaned, allObstacles);
+    const bends = routeBends(cleaned);
+    const length = routeLength(cleaned);
+    const score = hits * 1e6 + bends * 500 + length;
     if (score < bestScore) {
-      best = cleaned;
       bestScore = score;
+      best = cleaned;
     }
   }
-  return cleanCollinearPoints(best.map((point) => clampPointToScene(point, bounds)));
+  return cleanCollinearPoints(best.map((p) => clampPointToScene(p, bounds)));
 }
 
 // src/edges.ts
@@ -396,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);
@@ -414,6 +603,7 @@ 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})`);
@@ -424,40 +614,46 @@ function createEdgeRuntime(svg, from, to, kind, label, theme, sceneId, routeObst
   const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
   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 6px ${color}) drop-shadow(0 0 12px ${color}88)`;
   group.append(path, dot);
   let labelEl;
   let labelRect;
   if (label) {
-    const textWidth = label.length * 6.8 + 14;
+    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 = 8;
+    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 - 10));
+    plate.setAttribute("y", String(placement.y - 9));
     plate.setAttribute("width", String(textWidth + padX * 2));
-    plate.setAttribute("height", "20");
-    plate.setAttribute("rx", "6");
-    plate.setAttribute("fill", theme.labelPlate ?? theme.surface);
-    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.setAttribute("height", "18");
+    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 = "drop-shadow(0 1px 3px rgba(0,0,0,0.12))";
+    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 + 0.5));
     labelEl.setAttribute("text-anchor", "middle");
     labelEl.setAttribute("dominant-baseline", "middle");
-    labelEl.setAttribute("font-size", "11");
+    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, monospace");
-    labelEl.setAttribute("fill", theme.text);
+    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);
@@ -482,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();
@@ -493,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;
@@ -568,14 +777,42 @@ function animateEdgeReveal(runtime, startMs, durMs) {
   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);
@@ -614,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,
@@ -630,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);
   }
@@ -697,7 +937,7 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
           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;
     }
@@ -719,7 +959,7 @@ function buildCueAnimations(cues, nodeEls, nodes, theme, scene, titleEl, bounds,
           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;
     }
@@ -749,18 +989,29 @@ 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);
       }
@@ -792,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(
@@ -815,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);
@@ -1165,9 +1416,14 @@ 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) 60%, transparent));
-  border-radius: 14px;
-  background: color-mix(in srgb, var(--md-surface-raised) 25%, 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;
 }
@@ -1175,17 +1431,19 @@ function ensureGroupStyles(doc) {
   position: absolute;
   left: 14px;
   top: 10px;
-  padding: 3px 8px;
-  font-size: 10px;
+  padding: 4px 10px;
+  font-size: 10.5px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--md-text-muted);
-  background: color-mix(in srgb, var(--md-surface-raised) 80%, transparent);
+  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: 5px;
+  border-radius: 6px;
   font-family: var(--md-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
 }
 `;
   doc.head.appendChild(style);
@@ -1199,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;
@@ -1226,6 +1485,8 @@ function ensureNodeStyles(doc) {
   box-sizing: border-box;
   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,
@@ -1233,10 +1494,10 @@ function ensureNodeStyles(doc) {
       var(--md-node-surface, var(--md-surface)));
   color: var(--md-text);
   box-shadow:
-    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);
+    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.12);
   font-family: var(--md-font-node, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif);
   overflow: hidden;
   opacity: 0;
@@ -1250,16 +1511,16 @@ function ensureNodeStyles(doc) {
 .markdy-node[data-focused="1"] {
   box-shadow:
     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);
+    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 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);
+    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; }
@@ -1268,13 +1529,14 @@ function ensureNodeStyles(doc) {
   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: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   border-radius: 9px;
   display: flex;
   align-items: center;
@@ -1282,15 +1544,15 @@ function ensureNodeStyles(doc) {
   color: var(--md-role-color, var(--md-accent));
   background:
     linear-gradient(180deg,
-      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 22%, transparent),
+      color-mix(in srgb, var(--md-role-color, var(--md-accent)) 24%, 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)) 35%, transparent),
-    inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    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;
 }
@@ -1321,7 +1583,8 @@ function ensureNodeStyles(doc) {
   font-size: 13.5px;
   font-weight: 600;
   letter-spacing: -0.01em;
-  line-height: 1.22;
+  line-height: 1.24;
+  color: var(--md-text);
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
@@ -1333,13 +1596,13 @@ function ensureNodeStyles(doc) {
 }
 .markdy-node__value {
   flex: 0 0 auto;
-  font-size: 17px;
+  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: 14px 14px 10px 10px; }
-.markdy-node[data-role="data"] { border-radius: 12px 12px 18px 18px; }
+.markdy-node[data-role="data"] { border-radius: 12px 12px 16px 16px; }
 .markdy-scene-title {
   position: absolute;
   left: 48px;
@@ -1413,16 +1676,18 @@ function ensureNodeStyles(doc) {
 }
 .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);
+  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)) 14%, transparent);
-  border: 1.5px solid color-mix(in srgb, var(--md-accent) 65%, transparent);
+  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;
@@ -1844,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;
 }
 
@@ -2147,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;
@@ -2223,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; }

package/package.json

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