@markdy/renderer-dom 1.0.9 → 1.0.11

package/dist/index.js

@@ -1,5 +1,15 @@
+import {
+  exportDiagramAsVectorSvg,
+  getDiagramSceneElement,
+  prepareHtmlSceneForExport
+} from "./chunk-VIZHA7GI.js";
+
 // src/diagram.ts
-import { parseAndCompile } from "@markdy/core";
+import {
+  compressMarkdyToUrlHash,
+  parseAndCompile,
+  resolvePlayer
+} from "@markdy/core";
 
 // src/geometry/rect.ts
 function boxRect(box) {
@@ -35,6 +45,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 +62,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 +173,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 +182,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 +210,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 +267,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 +314,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 +573,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 +613,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 +624,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 +688,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 +704,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 +787,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 +861,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 +878,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 +947,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 +969,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 +999,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 +1053,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 +1074,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 +1426,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 +1441,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 +1467,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 +1495,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 +1504,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 +1521,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 +1539,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 +1554,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 +1593,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 +1606,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 +1686,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 +2119,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 +2425,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 +2523,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; }
@@ -2277,11 +2581,11 @@ function applyThemeToScene(scene, theme) {
 
 // src/diagram.ts
 var NORMAL_PLAYBACK_RATE = 4 / 5;
-var DEFAULT_PLAYBACK_RATE = 1;
 var MIN_VIEWPORT_ZOOM = 0.5;
 var MAX_VIEWPORT_ZOOM = 3;
 var VIEWPORT_ZOOM_STEP = 15e-4;
 var DRAG_CLICK_THRESHOLD_PX = 4;
+var BEAT_NAV_EPSILON_S = 0.05;
 var MARKDY_PLAYGROUND_URL = "https://markdy.com/playground/";
 function encodeCodeForPlaygroundHash(code) {
   return encodeURIComponent(btoa(encodeURIComponent(code)));
@@ -2334,6 +2638,7 @@ function createDiagram(opts) {
     playbackRate: initialPlaybackRate,
     controls: explicitControls,
     interactiveViewport: explicitInteractiveViewport,
+    shareUrl,
     autoplay: explicitAutoplay,
     loop: explicitLoop,
     copyright: explicitCopyright,
@@ -2346,15 +2651,46 @@ function createDiagram(opts) {
   for (const w of ast.diagnostics) {
     if (w.severity === "warning") onWarning(w);
   }
-  const controls = explicitControls ?? plan.meta.controls ?? false;
-  const interactiveViewport = explicitInteractiveViewport ?? (explicitControls !== void 0 ? explicitControls : plan.meta.interactiveViewport ?? plan.meta.controls ?? false);
-  const autoplay = explicitAutoplay ?? plan.meta.autoplay ?? true;
-  const loop = explicitLoop ?? plan.meta.loop ?? true;
-  const copyright = explicitCopyright ?? plan.meta.copyright ?? true;
-  const rawPlaybackRate = initialPlaybackRate ?? plan.meta.playbackRate ?? DEFAULT_PLAYBACK_RATE;
-  let playbackRate = Number.isFinite(rawPlaybackRate) && rawPlaybackRate > 0 ? rawPlaybackRate : DEFAULT_PLAYBACK_RATE;
-  const showSceneBoundaryProgress = sceneBoundaryProgress === false || sceneBoundaryProgress === void 0 && progressBar === false ? false : plan.meta.progressColor === "none" ? false : true;
-  const rawColor = progressColor ?? progressBarColor ?? (typeof sceneBoundaryProgress === "string" && sceneBoundaryProgress !== "true" && sceneBoundaryProgress !== "false" ? sceneBoundaryProgress : typeof progressBar === "string" && progressBar !== "true" && progressBar !== "false" ? progressBar : void 0) ?? (plan.meta.progressColor && plan.meta.progressColor !== "none" ? plan.meta.progressColor : void 0);
+  const hostProgress = sceneBoundaryProgress === false || sceneBoundaryProgress === void 0 && progressBar === false ? "none" : void 0;
+  const hostProgressColor = progressColor ?? progressBarColor ?? (typeof sceneBoundaryProgress === "string" && sceneBoundaryProgress !== "true" && sceneBoundaryProgress !== "false" ? sceneBoundaryProgress : typeof progressBar === "string" && progressBar !== "true" && progressBar !== "false" ? progressBar : void 0);
+  const player = resolvePlayer(plan.meta.player, {
+    autoplay: explicitAutoplay,
+    loop: explicitLoop,
+    playbackRate: initialPlaybackRate,
+    copyright: explicitCopyright,
+    controls: explicitControls,
+    interactiveViewport: explicitInteractiveViewport,
+    progress: hostProgress,
+    progressColor: hostProgressColor
+  });
+  const { autoplay, loop } = player.playback;
+  const {
+    enabled: interactiveViewport,
+    zoom: allowZoom,
+    pan: allowPan,
+    clickToPlay,
+    doubleClickToReset,
+    keyboard: keyboardShortcuts
+  } = player.interaction;
+  const {
+    enabled: showControls,
+    play: playButton,
+    restart: restartButton,
+    prevBeat: prevBeatButton,
+    nextBeat: nextBeatButton,
+    seek: seekBar,
+    speed: speedControls,
+    speeds: speedOptions,
+    fit: fitViewButton,
+    resetView: resetViewButton,
+    svg: svgButton,
+    share: shareButton
+  } = player.controls;
+  const copyright = player.chrome.badge;
+  const progressMode = player.chrome.progress;
+  const showProgress = progressMode !== "none";
+  let playbackRate = player.playback.rate;
+  const rawColor = player.chrome.progressColor;
   const customColor = rawColor && rawColor.trim() !== "rainbow" ? rawColor.trim() : null;
   const DEFAULT_RAINBOW = "hsl(0,90%,60%), hsl(45,90%,55%), hsl(90,80%,50%), hsl(180,80%,50%), hsl(270,80%,55%), hsl(330,90%,60%)";
   const totalDurationMs = plan.duration * 1e3;
@@ -2373,11 +2709,11 @@ function createDiagram(opts) {
   });
   container.appendChild(viewport);
   let progressEl = null;
-  if (showSceneBoundaryProgress) {
+  if (showProgress) {
     progressEl = document.createElement("div");
     Object.assign(progressEl.style, {
       position: "absolute",
-      inset: "0",
+      ...progressMode === "bar" ? { left: "0", right: "0", bottom: "0", height: "3px" } : { inset: "0" },
       zIndex: "9999",
       pointerEvents: "none",
       borderRadius: "inherit"
@@ -2388,6 +2724,12 @@ function createDiagram(opts) {
   const tlAngleNorm = (tlAngle % 360 + 360) % 360;
   function updateProgressBar(pct) {
     if (!progressEl) return;
+    if (progressMode === "bar") {
+      progressEl.style.background = customColor ?? "#2563eb";
+      progressEl.style.transformOrigin = "left center";
+      progressEl.style.transform = `scaleX(${pct})`;
+      return;
+    }
     const deg = pct * 360;
     const colorStops = customColor ? customColor.includes(",") ? customColor : `${customColor} 0deg, ${customColor}` : DEFAULT_RAINBOW;
     progressEl.style.background = `conic-gradient(from ${tlAngleNorm}deg, ${colorStops} ${deg}deg, transparent ${deg}deg)`;
@@ -2661,15 +3003,40 @@ function createDiagram(opts) {
   let suppressNextClick = false;
   let controlsPlayButton = null;
   let controlsRateButtons = [];
+  let controlsSeekBar = null;
+  let controlsFitButton = null;
+  let fitViewActive = false;
   function applyViewportTransform() {
     viewportTransform.style.transform = `translate(${viewportPanX}px, ${viewportPanY}px) scale(${viewportScale})`;
   }
   function resetViewportTransform() {
+    releaseFitView();
     viewportScale = 1;
     viewportPanX = 0;
     viewportPanY = 0;
     applyViewportTransform();
   }
+  function releaseFitView() {
+    if (!fitViewActive) return;
+    fitViewActive = false;
+    cameraLayer.style.removeProperty("transform");
+  }
+  function toggleFitView() {
+    if (fitViewActive) {
+      resetViewportTransform();
+      syncControls();
+      return;
+    }
+    const bounds = computeContentBounds();
+    const scale = Math.min(plan.meta.width / bounds.width, plan.meta.height / bounds.height);
+    viewportScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+    viewportPanX = -bounds.minX * viewportScale + (plan.meta.width - bounds.width * viewportScale) / 2;
+    viewportPanY = -bounds.minY * viewportScale + (plan.meta.height - bounds.height * viewportScale) / 2;
+    applyViewportTransform();
+    fitViewActive = true;
+    cameraLayer.style.setProperty("transform", "none", "important");
+    syncControls();
+  }
   function handleViewportWheel(event) {
     event.preventDefault();
     const rect = viewport.getBoundingClientRect();
@@ -2685,6 +3052,7 @@ function createDiagram(opts) {
     applyViewportTransform();
   }
   function handleViewportPointerDown(event) {
+    if (!allowPan) return;
     if (event.button !== 0 || activePointerId !== null) return;
     activePointerId = event.pointerId;
     dragStartX = event.clientX;
@@ -2737,6 +3105,13 @@ function createDiagram(opts) {
       button.style.color = active ? "#ffffff" : "#475569";
       button.style.borderColor = active ? "#0f172a" : "rgba(148, 163, 184, 0.55)";
     }
+    if (controlsSeekBar) controlsSeekBar.value = String(sceneMs / 1e3);
+    if (controlsFitButton) {
+      controlsFitButton.setAttribute("aria-pressed", fitViewActive ? "true" : "false");
+      controlsFitButton.style.background = fitViewActive ? "#1e293b" : "rgba(248, 250, 252, 0.92)";
+      controlsFitButton.style.color = fitViewActive ? "#ffffff" : "#475569";
+      controlsFitButton.style.borderColor = fitViewActive ? "#0f172a" : "rgba(148, 163, 184, 0.55)";
+    }
   }
   function emitPlayStateChange(playing) {
     onPlayStateChange?.(playing);
@@ -2811,8 +3186,23 @@ function createDiagram(opts) {
       const beat = plan.beats.find((b) => b.name === name);
       if (beat) diagram.seek(beat.start);
     },
+    nextBeat() {
+      const next = plan.beats.find((beat) => beat.start > sceneMs / 1e3 + BEAT_NAV_EPSILON_S);
+      if (next) diagram.seek(next.start);
+    },
+    prevBeat() {
+      const current = sceneMs / 1e3;
+      let target = 0;
+      for (const beat of plan.beats) {
+        if (beat.start < current - BEAT_NAV_EPSILON_S) target = beat.start;
+      }
+      diagram.seek(target);
+    },
     destroy() {
       diagram.pause();
+      if (keyboardShortcuts && typeof window !== "undefined") {
+        window.removeEventListener("keydown", handleKeyDown);
+      }
       for (const anim of allAnims) anim.cancel();
       resizeObserver?.disconnect();
       if (progressEl?.parentNode === viewport) viewport.removeChild(progressEl);
@@ -2849,6 +3239,159 @@ function createDiagram(opts) {
     });
     return button;
   }
+  function mountPlayControl(toolbar) {
+    if (!playButton) return;
+    controlsPlayButton = makeControlButton("Play", "Play diagram");
+    controlsPlayButton.className = "markdy-control-play";
+    controlsPlayButton.addEventListener("click", togglePlayback);
+    toolbar.appendChild(controlsPlayButton);
+  }
+  function mountBeatNavControls(toolbar, position) {
+    const wanted = position === "prev" ? prevBeatButton : nextBeatButton;
+    if (!wanted || plan.beats.length < 2) return;
+    const label = position === "prev" ? "Prev" : "Next";
+    const button = makeControlButton(label, `${label === "Prev" ? "Previous" : "Next"} beat`);
+    button.className = `markdy-control-${position}-beat`;
+    button.addEventListener("click", () => position === "prev" ? diagram.prevBeat() : diagram.nextBeat());
+    toolbar.appendChild(button);
+  }
+  function mountRestartControl(toolbar) {
+    if (!restartButton) return;
+    const button = makeControlButton("Restart", "Restart diagram");
+    button.className = "markdy-control-restart";
+    button.addEventListener("click", () => {
+      diagram.seek(0);
+      diagram.play();
+    });
+    toolbar.appendChild(button);
+  }
+  function mountSeekControl(toolbar) {
+    if (!seekBar) return;
+    controlsSeekBar = document.createElement("input");
+    controlsSeekBar.className = "markdy-control-seek";
+    controlsSeekBar.type = "range";
+    controlsSeekBar.min = "0";
+    controlsSeekBar.max = String(durationSeconds);
+    controlsSeekBar.step = "0.01";
+    controlsSeekBar.value = String(sceneMs / 1e3);
+    controlsSeekBar.setAttribute("aria-label", "Seek diagram timeline");
+    controlsSeekBar.addEventListener("input", () => diagram.seek(Number(controlsSeekBar?.value ?? 0)));
+    toolbar.appendChild(controlsSeekBar);
+  }
+  function mountSpeedControls(toolbar) {
+    if (!speedControls) return;
+    controlsRateButtons = speedOptions.map((rate) => {
+      const button = makeControlButton(`${rate}x`, `Set playback speed to ${rate}x`);
+      button.className = "markdy-control-rate";
+      button.dataset.rate = String(rate);
+      button.setAttribute("aria-pressed", "false");
+      button.addEventListener("click", () => diagram.setPlaybackRate(rate));
+      toolbar.appendChild(button);
+      return button;
+    });
+  }
+  function flashControlLabel(button, message) {
+    const original = button.textContent ?? "";
+    button.textContent = message;
+    setTimeout(() => {
+      button.textContent = original;
+    }, 1400);
+  }
+  function downloadFile(filename, contents, type) {
+    const blob = new Blob([contents], { type });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.style.display = "none";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+  function mountSvgControl(toolbar) {
+    if (!svgButton) return;
+    const button = makeControlButton("SVG", "Export diagram as SVG");
+    button.className = "markdy-control-svg";
+    button.addEventListener("click", async () => {
+      const resumeAt = sceneMs;
+      const wasPlaying = isPlaying;
+      try {
+        diagram.pause();
+        diagram.seek(durationSeconds);
+        const { exportDiagramAsVectorSvg: exportDiagramAsVectorSvg2 } = await import("./svg-exporter-7FW6RIP6.js");
+        const svg = exportDiagramAsVectorSvg2(container);
+        const name = (plan.title || "markdy-diagram").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+        downloadFile(`${name || "markdy-diagram"}.svg`, svg, "image/svg+xml");
+      } catch (error) {
+        onWarning({ severity: "warning", message: `SVG export failed: ${String(error)}`, line: 0 });
+        flashControlLabel(button, "Failed");
+      } finally {
+        diagram.seek(resumeAt / 1e3);
+        if (wasPlaying) diagram.play();
+      }
+    });
+    toolbar.appendChild(button);
+  }
+  function mountShareControl(toolbar) {
+    if (!shareButton) return;
+    const button = makeControlButton("Share", "Copy a share link for this diagram");
+    button.className = "markdy-control-share";
+    button.addEventListener("click", async () => {
+      try {
+        const hash = await compressMarkdyToUrlHash(code);
+        const base = shareUrl ?? MARKDY_PLAYGROUND_URL;
+        await navigator.clipboard.writeText(`${base}#code=${hash}`);
+        flashControlLabel(button, "Copied");
+      } catch (error) {
+        onWarning({ severity: "warning", message: `Share link failed: ${String(error)}`, line: 0 });
+        flashControlLabel(button, "Failed");
+      }
+    });
+    toolbar.appendChild(button);
+  }
+  function mountFitControl(toolbar) {
+    if (!fitViewButton) return;
+    controlsFitButton = makeControlButton("Fit", "Fit all items in view and ignore camera zoom");
+    controlsFitButton.className = "markdy-control-fit";
+    controlsFitButton.setAttribute("aria-pressed", "false");
+    controlsFitButton.addEventListener("click", toggleFitView);
+    toolbar.appendChild(controlsFitButton);
+  }
+  function mountResetViewControl(toolbar) {
+    if (!resetViewButton) return;
+    const button = makeControlButton("Reset", "Reset diagram view");
+    button.className = "markdy-control-reset-view";
+    button.addEventListener("click", resetViewportTransform);
+    toolbar.appendChild(button);
+  }
+  function handleKeyDown(event) {
+    const target = event.target;
+    if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target?.isContentEditable) {
+      return;
+    }
+    switch (event.key) {
+      case "ArrowRight":
+      case "PageDown":
+        event.preventDefault();
+        diagram.nextBeat();
+        break;
+      case "ArrowLeft":
+      case "PageUp":
+        event.preventDefault();
+        diagram.prevBeat();
+        break;
+      case " ":
+        event.preventDefault();
+        togglePlayback();
+        break;
+      case "Home":
+        event.preventDefault();
+        diagram.seek(0);
+        break;
+      default:
+    }
+  }
   function mountControls() {
     const toolbar = document.createElement("div");
     toolbar.className = "markdy-controls";
@@ -2874,53 +3417,44 @@ function createDiagram(opts) {
     for (const eventName of ["click", "dblclick", "pointerdown", "pointermove", "pointerup", "wheel"]) {
       toolbar.addEventListener(eventName, (event) => event.stopPropagation());
     }
-    controlsPlayButton = makeControlButton("Play", "Play diagram");
-    controlsPlayButton.className = "markdy-control-play";
-    controlsPlayButton.addEventListener("click", togglePlayback);
-    toolbar.appendChild(controlsPlayButton);
-    const restartButton = makeControlButton("Restart", "Restart diagram");
-    restartButton.className = "markdy-control-restart";
-    restartButton.addEventListener("click", () => {
-      diagram.seek(0);
-      diagram.play();
-    });
-    toolbar.appendChild(restartButton);
-    controlsRateButtons = [0.5, 1, 2].map((rate) => {
-      const button = makeControlButton(`${rate}x`, `Set playback speed to ${rate}x`);
-      button.className = "markdy-control-rate";
-      button.dataset.rate = String(rate);
-      button.setAttribute("aria-pressed", "false");
-      button.addEventListener("click", () => diagram.setPlaybackRate(rate));
-      toolbar.appendChild(button);
-      return button;
-    });
-    if (interactiveViewport) {
-      const resetButton = makeControlButton("Reset", "Reset diagram view");
-      resetButton.className = "markdy-control-reset-view";
-      resetButton.addEventListener("click", resetViewportTransform);
-      toolbar.appendChild(resetButton);
-    }
+    mountPlayControl(toolbar);
+    mountBeatNavControls(toolbar, "prev");
+    mountBeatNavControls(toolbar, "next");
+    mountRestartControl(toolbar);
+    mountSeekControl(toolbar);
+    mountSpeedControls(toolbar);
+    mountFitControl(toolbar);
+    mountResetViewControl(toolbar);
+    mountSvgControl(toolbar);
+    mountShareControl(toolbar);
     ensureFooter().insertBefore(toolbar, badge ?? null);
     syncControls();
   }
   viewport.style.cursor = interactiveViewport ? "grab" : "pointer";
   if (interactiveViewport) {
     viewport.style.touchAction = "none";
-    viewport.addEventListener("wheel", handleViewportWheel, { passive: false });
-    viewport.addEventListener("pointerdown", handleViewportPointerDown);
-    viewport.addEventListener("pointermove", handleViewportPointerMove);
-    viewport.addEventListener("pointerup", handleViewportPointerEnd);
-    viewport.addEventListener("pointercancel", handleViewportPointerEnd);
-    viewport.addEventListener("dblclick", handleViewportDoubleClick);
-  }
-  if (controls) mountControls();
-  viewport.addEventListener("click", () => {
-    if (suppressNextClick) {
-      suppressNextClick = false;
-      return;
+    if (allowZoom) viewport.addEventListener("wheel", handleViewportWheel, { passive: false });
+    if (allowPan) {
+      viewport.addEventListener("pointerdown", handleViewportPointerDown);
+      viewport.addEventListener("pointermove", handleViewportPointerMove);
+      viewport.addEventListener("pointerup", handleViewportPointerEnd);
+      viewport.addEventListener("pointercancel", handleViewportPointerEnd);
     }
-    togglePlayback();
-  });
+    if (doubleClickToReset) viewport.addEventListener("dblclick", handleViewportDoubleClick);
+  }
+  if (showControls) mountControls();
+  if (clickToPlay) {
+    viewport.addEventListener("click", () => {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
+      togglePlayback();
+    });
+  }
+  if (keyboardShortcuts && typeof window !== "undefined") {
+    window.addEventListener("keydown", handleKeyDown);
+  }
   if (autoplay) diagram.play();
   return diagram;
 }
@@ -3116,100 +3650,6 @@ function encodeGifSequence(frames, options = {}) {
   return new Uint8Array(buffer);
 }
 
-// src/export/svg-exporter.ts
-function copyRenderedStyles(source, clone) {
-  if (typeof window === "undefined" || typeof window.getComputedStyle !== "function") return;
-  const sourceElements = [source, ...Array.from(source.querySelectorAll("*"))];
-  const cloneElements = [clone, ...Array.from(clone.querySelectorAll("*"))];
-  for (let index = 0; index < Math.min(sourceElements.length, cloneElements.length); index++) {
-    const computed = window.getComputedStyle(sourceElements[index]);
-    const target = cloneElements[index].style;
-    for (let propertyIndex = 0; propertyIndex < computed.length; propertyIndex++) {
-      const property = computed.item(propertyIndex);
-      target.setProperty(property, computed.getPropertyValue(property), computed.getPropertyPriority(property));
-    }
-  }
-}
-function normalizeExportViewport(scene) {
-  scene.querySelectorAll(".markdy-viewport-transform").forEach((viewportTransform) => {
-    viewportTransform.style.transform = "translate(0px, 0px) scale(1)";
-    viewportTransform.style.transformOrigin = "0 0";
-    viewportTransform.style.willChange = "auto";
-  });
-}
-function getDiagramSceneElement(containerEl) {
-  const sceneEl = containerEl.classList?.contains("markdy-scene-root") ? containerEl : containerEl.querySelector(".markdy-scene-root") || containerEl.querySelector("svg") || (containerEl.tagName?.toLowerCase() === "svg" ? containerEl : null);
-  if (!sceneEl) throw new Error("No Markdy scene element found in container");
-  return sceneEl;
-}
-function prepareHtmlSceneForExport(sceneEl, options = {}) {
-  const clonedScene = sceneEl.cloneNode(true);
-  copyRenderedStyles(sceneEl, clonedScene);
-  normalizeExportViewport(clonedScene);
-  const widthStr = clonedScene.style.width || String(sceneEl.clientWidth || 800);
-  const heightStr = clonedScene.style.height || String(sceneEl.clientHeight || 400);
-  let width = parseFloat(widthStr);
-  let height = parseFloat(heightStr);
-  if (isNaN(width)) width = 800;
-  if (isNaN(height)) height = 400;
-  const scale = options.scale || 1;
-  const scaledWidth = width * scale;
-  const scaledHeight = height * scale;
-  clonedScene.style.transform = `scale(${scale})`;
-  clonedScene.style.transformOrigin = "0 0";
-  clonedScene.style.position = "relative";
-  clonedScene.style.left = "0px";
-  clonedScene.style.top = "0px";
-  clonedScene.style.margin = "0";
-  clonedScene.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
-  if (options.transparentBackground) {
-    clonedScene.style.background = "transparent";
-  }
-  return { sceneEl, clonedScene, width, height, scaledWidth, scaledHeight };
-}
-function exportDiagramAsVectorSvg(containerEl, options = {}) {
-  const sceneEl = getDiagramSceneElement(containerEl);
-  if (sceneEl.tagName?.toLowerCase() === "svg") {
-    const clonedSvg = sceneEl.cloneNode(true);
-    if (!clonedSvg.getAttribute("xmlns")) {
-      clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    }
-    const serializer2 = new XMLSerializer();
-    return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-${serializer2.serializeToString(clonedSvg)}`;
-  }
-  const { clonedScene, scaledWidth, scaledHeight } = prepareHtmlSceneForExport(sceneEl, options);
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-  svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
-  svg.setAttribute("width", String(scaledWidth));
-  svg.setAttribute("height", String(scaledHeight));
-  svg.setAttribute("viewBox", `0 0 ${scaledWidth} ${scaledHeight}`);
-  if (options.includeThemeStyles !== false) {
-    const styleEl = document.createElementNS("http://www.w3.org/2000/svg", "style");
-    let combinedStyles = `
-      foreignObject { width: 100%; height: 100%; }
-      .markdy-node { transition: opacity 0.3s ease; }
-    `;
-    if (typeof document !== "undefined") {
-      const styles = document.querySelectorAll("style[id^='markdy-']");
-      for (let i = 0; i < styles.length; i++) {
-        combinedStyles += styles[i].textContent + "\n";
-      }
-    }
-    styleEl.textContent = combinedStyles;
-    svg.appendChild(styleEl);
-  }
-  const foreignObject = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
-  foreignObject.setAttribute("width", "100%");
-  foreignObject.setAttribute("height", "100%");
-  foreignObject.appendChild(clonedScene);
-  svg.appendChild(foreignObject);
-  const serializer = new XMLSerializer();
-  return `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-` + serializer.serializeToString(svg);
-}
-
 // src/export/inline-resources.ts
 var TRANSPARENT_PIXEL_DATA_URI = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
 var RESOURCE_FETCH_TIMEOUT_MS = 3e3;