@synergenius/flow-weaver 0.33.1 → 0.33.2

package/dist/cli/flow-weaver.mjs

@@ -5987,7 +5987,7 @@ var VERSION;
 var init_generated_version = __esm({
   "src/generated-version.ts"() {
     "use strict";
-    VERSION = "0.33.1";
+    VERSION = "0.33.2";
   }
 });
 
@@ -30483,19 +30483,6 @@ function getPortColor(dataType, isFailure, theme = "dark") {
   const colors2 = theme === "dark" ? DARK_PORT_COLORS : LIGHT_PORT_COLORS;
   return colors2[dataType] ?? colors2.ANY;
 }
-function getPortRingColor(dataType, isFailure, theme = "dark") {
-  const color = getPortColor(dataType, isFailure, theme);
-  return darkenHex(color, 0.4);
-}
-function darkenHex(hex, amount) {
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  const nr = Math.round(r * (1 - amount));
-  const ng = Math.round(g * (1 - amount));
-  const nb = Math.round(b * (1 - amount));
-  return `#${nr.toString(16).padStart(2, "0")}${ng.toString(16).padStart(2, "0")}${nb.toString(16).padStart(2, "0")}`;
-}
 var DARK_PORT_COLORS, LIGHT_PORT_COLORS, DARK_FAILURE_COLOR, LIGHT_FAILURE_COLOR, NODE_DEFAULT_COLOR, NODE_VARIANT_COLORS, DARK_PALETTE, LIGHT_PALETTE, TYPE_ABBREVIATIONS, NODE_ICON_PATHS, VALID_NODE_ICONS;
 var init_theme = __esm({
   "src/diagram/theme.ts"() {
@@ -30540,23 +30527,23 @@ var init_theme = __esm({
     LIGHT_FAILURE_COLOR = "#e34646";
     NODE_DEFAULT_COLOR = "#334155";
     NODE_VARIANT_COLORS = {
-      blue: { border: "#548ce3", darkBorder: "#5e9eff" },
-      // blue-shade-2 / blue-dark-shade-1
-      purple: { border: "#9f5fe3", darkBorder: "#b36bff" },
+      blue: { border: "#548ce3", darkBorder: "#5e9eff", icon: "#3a6bbf", darkIcon: "#4a7ad4" },
+      // blue-shade-2 / blue-dark-shade-1 / blue-shade-3 / blue-dark-shade-3
+      purple: { border: "#9f5fe3", darkBorder: "#b36bff", icon: "#7d44bf", darkIcon: "#9050d4" },
       // purple-shade-2 / purple-dark-shade-1
-      cyan: { border: "#63ccc4", darkBorder: "#6fe5dc" },
+      cyan: { border: "#63ccc4", darkBorder: "#6fe5dc", icon: "#4aada6", darkIcon: "#56c4bb" },
       // cyan-shade-2 / cyan-dark-shade-1
-      teal: { border: "#63ccc4", darkBorder: "#6fe5dc" },
+      teal: { border: "#63ccc4", darkBorder: "#6fe5dc", icon: "#4aada6", darkIcon: "#56c4bb" },
       // alias for cyan
-      orange: { border: "#e3732d", darkBorder: "#ff8133" },
+      orange: { border: "#e3732d", darkBorder: "#ff8133", icon: "#bf5a1e", darkIcon: "#d46a28" },
       // orange-shade-2 / orange-dark-shade-1
-      pink: { border: "#e349c2", darkBorder: "#ff52da" },
+      pink: { border: "#e349c2", darkBorder: "#ff52da", icon: "#bf349f", darkIcon: "#d43fb5" },
       // pink-shade-2 / pink-dark-shade-1
-      green: { border: "#0ec850", darkBorder: "#10e15a" },
+      green: { border: "#0ec850", darkBorder: "#10e15a", icon: "#0aa53f", darkIcon: "#0dbd4a" },
       // green-shade-2 / green-dark-shade-1
-      red: { border: "#e34646", darkBorder: "#ff4f4f" },
+      red: { border: "#e34646", darkBorder: "#ff4f4f", icon: "#bf3333", darkIcon: "#d43b3b" },
       // red-shade-2 / red-dark-shade-1
-      yellow: { border: "#e3a82b", darkBorder: "#ffbd30" }
+      yellow: { border: "#e3a82b", darkBorder: "#ffbd30", icon: "#bf8c21", darkIcon: "#d49e28" }
       // yellow-shade-2 / yellow-dark-shade-1
     };
     DARK_PALETTE = {
@@ -30572,18 +30559,18 @@ var init_theme = __esm({
       // color-text-subtle = dark-shade-30
       connectionColor: "#5f5f6d",
       // color-border-subtle = dark-shade-70
-      dotColor: "#8e9eff",
-      // color-background-dots = primary-dark-tint-1
+      dotColor: "#7b8cd9",
+      // color-background-dots-secondary = primary-dark-tint-2
       labelBadgeFill: "#252538",
       // color-surface-low = dark-shade-95
       labelBadgeBorder: "#313143",
       // color-surface-lowest = dark-shade-90
-      nodeIconColor: "#a4beff",
-      // secondary-dark-base (matches label color)
+      nodeIconColor: "#8e9eff",
+      // color-brand-main = primary-dark-tint-1
       scopeAreaStroke: "#5f5f6d",
       // color-border-subtle = dark-shade-70
-      nodeShadowOpacity: 0.15,
-      dotOpacity: 0.5
+      nodeShadowOpacity: 0,
+      dotOpacity: 0.4
     };
     LIGHT_PALETTE = {
       background: "#f6f7ff",
@@ -30598,18 +30585,18 @@ var init_theme = __esm({
       // shade-50
       connectionColor: "#b3b3b3",
       // shade-30
-      dotColor: "#5468ff",
-      // color-background-dots = primary-shade-1
+      dotColor: "#4a5ce0",
+      // color-background-dots-secondary = primary-shade-2
       labelBadgeFill: "#ffffff",
       // surface-main — 80% opacity applied in renderer
       labelBadgeBorder: "#e6e6e6",
       // shade-10
       nodeIconColor: "#5468ff",
-      // primary-base (light)
+      // color-brand-main = primary-base
       scopeAreaStroke: "#cccccc",
       // color-border-default
-      nodeShadowOpacity: 0.08,
-      dotOpacity: 0.45
+      nodeShadowOpacity: 0,
+      dotOpacity: 0.4
     };
     TYPE_ABBREVIATIONS = {
       STEP: "STP",
@@ -48175,7 +48162,9 @@ function segmentOverlapsBox(xMin, xMax, y, box) {
   return xMin < box.right && xMax > box.left && y >= box.top && y <= box.bottom;
 }
 function verticalSegmentClear(x2, yMin, yMax, boxes) {
-  return !boxes.some((box) => x2 >= box.left && x2 <= box.right && yMin < box.bottom && yMax > box.top);
+  return !boxes.some(
+    (box) => x2 >= box.left && x2 <= box.right && yMin < box.bottom && yMax > box.top
+  );
 }
 function findClearY(xMin, xMax, candidateY, boxes) {
   const isBlocked = (y) => boxes.some((box) => segmentOverlapsBox(xMin, xMax, y, box));
@@ -48205,7 +48194,7 @@ function findClearY(xMin, xMax, candidateY, boxes) {
   if (bestDist === Infinity) {
     const allMin = Math.min(...edges) - EDGE_OFFSET * 2;
     const allMax = Math.max(...edges) + EDGE_OFFSET * 2;
-    bestY = Math.abs(allMin - candidateY) <= Math.abs(allMax - candidateY) ? allMin : allMax;
+    bestY = Math.abs(allMin - candidateY) < Math.abs(allMax - candidateY) ? allMin : allMax;
     if (isBlocked(bestY)) {
       for (let offset = TRACK_SPACING; offset < 800; offset += TRACK_SPACING) {
         if (!isBlocked(bestY - offset)) {
@@ -48275,25 +48264,27 @@ function simplifyWaypoints(waypoints) {
       const a = pts[i], b = pts[i + 1], c = pts[i + 2], d = pts[i + 3];
       const jogH = Math.abs(b[1] - c[1]);
       if (Math.abs(a[1] - b[1]) < 0.5 && Math.abs(b[0] - c[0]) < 0.5 && Math.abs(c[1] - d[1]) < 0.5 && jogH > 0.5 && jogH < JOG_THRESHOLD) {
-        const jogMid = (b[1] + c[1]) / 2;
-        const snapY = Math.abs(a[1] - jogMid) <= Math.abs(d[1] - jogMid) ? a[1] : d[1];
-        const newPts = pts.slice();
-        newPts[i + 1] = [b[0], snapY];
-        newPts[i + 2] = [c[0], snapY];
-        pts = newPts;
-        jogFound = true;
-        break;
+        if (Math.abs(a[1] - d[1]) < 0.5) {
+          const snapY = a[1];
+          const newPts = pts.slice();
+          newPts[i + 1] = [b[0], snapY];
+          newPts[i + 2] = [c[0], snapY];
+          pts = newPts;
+          jogFound = true;
+          break;
+        }
       }
       const jogW = Math.abs(b[0] - c[0]);
       if (Math.abs(a[0] - b[0]) < 0.5 && Math.abs(b[1] - c[1]) < 0.5 && Math.abs(c[0] - d[0]) < 0.5 && jogW > 0.5 && jogW < JOG_THRESHOLD) {
-        const jogMid = (b[0] + c[0]) / 2;
-        const snapX = Math.abs(a[0] - jogMid) <= Math.abs(d[0] - jogMid) ? a[0] : d[0];
-        const newPts = pts.slice();
-        newPts[i + 1] = [snapX, b[1]];
-        newPts[i + 2] = [snapX, c[1]];
-        pts = newPts;
-        jogFound = true;
-        break;
+        if (Math.abs(a[0] - d[0]) < 0.5) {
+          const snapX = a[0];
+          const newPts = pts.slice();
+          newPts[i + 1] = [snapX, b[1]];
+          newPts[i + 2] = [snapX, c[1]];
+          pts = newPts;
+          jogFound = true;
+          break;
+        }
       }
     }
   }
@@ -48303,7 +48294,10 @@ function simplifyWaypoints(waypoints) {
     const curr = pts[i];
     const next = pts[i + 1];
     const distToPrev = Math.abs(prev[0] - curr[0]) + Math.abs(prev[1] - curr[1]);
-    if (distToPrev < MIN_SEGMENT_LENGTH) continue;
+    if (distToPrev < MIN_SEGMENT_LENGTH) {
+      const wouldDiag = Math.abs(prev[0] - next[0]) > 0.5 && Math.abs(prev[1] - next[1]) > 0.5;
+      if (!wouldDiag) continue;
+    }
     const sameX = Math.abs(prev[0] - curr[0]) < 0.01 && Math.abs(curr[0] - next[0]) < 0.01;
     const sameY = Math.abs(prev[1] - curr[1]) < 0.01 && Math.abs(curr[1] - next[1]) < 0.01;
     if (!sameX && !sameY) {
@@ -48344,7 +48338,7 @@ function waypointsToSvgPath(waypoints, cornerRadius) {
     const curr = waypoints[i];
     const next = waypoints[i + 1];
     const r = radii[i];
-    if (r < 2) {
+    if (r < 0.01) {
       path54 += ` L ${curr[0]},${curr[1]}`;
       continue;
     }
@@ -48354,89 +48348,82 @@ function waypointsToSvgPath(waypoints, cornerRadius) {
     const lenNext = Math.sqrt(dNext[0] * dNext[0] + dNext[1] * dNext[1]);
     const uPrev = [dPrev[0] / lenPrev, dPrev[1] / lenPrev];
     const uNext = [dNext[0] / lenNext, dNext[1] / lenNext];
-    const arcStart = [curr[0] + uPrev[0] * r, curr[1] + uPrev[1] * r];
-    const arcEnd = [curr[0] + uNext[0] * r, curr[1] + uNext[1] * r];
-    const cross = dPrev[0] * dNext[1] - dPrev[1] * dNext[0];
+    const cross = uPrev[0] * uNext[1] - uPrev[1] * uNext[0];
+    const deflection = Math.abs(cross);
+    const scaledR = r * deflection;
+    if (scaledR < 0.5) {
+      path54 += ` L ${curr[0]},${curr[1]}`;
+      continue;
+    }
+    const arcStart = [curr[0] + uPrev[0] * scaledR, curr[1] + uPrev[1] * scaledR];
+    const arcEnd = [curr[0] + uNext[0] * scaledR, curr[1] + uNext[1] * scaledR];
     const sweep = cross > 0 ? 0 : 1;
     path54 += ` L ${arcStart[0]},${arcStart[1]}`;
-    path54 += ` A ${r} ${r} 0 0 ${sweep} ${arcEnd[0]},${arcEnd[1]}`;
+    path54 += ` A ${scaledR} ${scaledR} 0 0 ${sweep} ${arcEnd[0]},${arcEnd[1]}`;
   }
   const last = waypoints[waypoints.length - 1];
   path54 += ` L ${last[0]},${last[1]}`;
   return path54;
 }
-function computeWaypoints(from, to, nodeBoxes, sourceNodeId, targetNodeId, padding, exitStub, entryStub, allocator) {
-  const isSelfConnection = sourceNodeId === targetNodeId;
-  const inflatedBoxes = nodeBoxes.filter((box) => isSelfConnection ? true : box.id !== sourceNodeId && box.id !== targetNodeId).map((box) => inflateBox(box, padding));
+function computeWaypoints(from, to, nodeBoxes, sourceNodeId, targetNodeId, padding, exitStub, entryStub, scopedInternal, allocator) {
+  const isSelfConnection = sourceNodeId === targetNodeId && !scopedInternal;
+  const inflatedBoxes = nodeBoxes.map((box) => inflateBox(box, padding));
   const stubExit = [from[0] + exitStub, from[1]];
   const stubEntry = [to[0] - entryStub, to[1]];
   const xMin = Math.min(stubExit[0], stubEntry[0]);
   const xMax = Math.max(stubExit[0], stubEntry[0]);
-  if (!isSelfConnection && to[0] > from[0]) {
-    let candidateY = (from[1] + to[1]) / 2;
-    const intermediateBoxes = inflatedBoxes.filter(
-      (box) => box.left < xMax && box.right > xMin
-    );
+  if (!isSelfConnection && to[0] >= from[0] - exitStub) {
+    let candidateY = (from[1] + to[1]) / 2 + BELOW_BIAS;
+    const intermediateBoxes = inflatedBoxes.filter((box) => box.left < xMax && box.right > xMin);
     if (intermediateBoxes.length >= 2) {
       const clusterTop = Math.min(...intermediateBoxes.map((b) => b.top));
       const clusterBottom = Math.max(...intermediateBoxes.map((b) => b.bottom));
       if (candidateY > clusterTop && candidateY < clusterBottom) {
         const distToTop = candidateY - clusterTop;
         const distToBottom = clusterBottom - candidateY;
-        candidateY = distToTop <= distToBottom ? clusterTop - padding : clusterBottom + padding;
+        candidateY = distToTop < distToBottom ? clusterTop - padding : clusterBottom + padding;
       }
     }
-    let clearY = findClearY(xMin, xMax, candidateY, inflatedBoxes);
-    if (Math.abs(from[1] - to[1]) < JOG_THRESHOLD && Math.abs(clearY - from[1]) < JOG_THRESHOLD) {
-      return null;
-    }
-    const midX = (stubExit[0] + stubEntry[0]) / 2;
+    const clearY = allocator ? allocator.claim(xMin, xMax, findClearY(xMin, xMax, candidateY, inflatedBoxes)) : findClearY(xMin, xMax, candidateY, inflatedBoxes);
     const yMin = Math.min(from[1], to[1]);
     const yMax = Math.max(from[1], to[1]);
-    const clearMidX = findClearX(yMin, yMax, midX, inflatedBoxes);
-    const freeMidX = allocator.findFreeX(yMin, yMax, clearMidX, inflatedBoxes);
-    if (yMax - yMin >= JOG_THRESHOLD && freeMidX > stubExit[0] && freeMidX < stubEntry[0] && verticalSegmentClear(freeMidX, yMin, yMax, inflatedBoxes) && allocator.findFreeY(from[0], freeMidX, from[1], inflatedBoxes) === from[1] && allocator.findFreeY(freeMidX, to[0], to[1], inflatedBoxes) === to[1]) {
-      allocator.claim(from[0], freeMidX, from[1]);
-      allocator.claim(freeMidX, to[0], to[1]);
-      allocator.claimVertical(yMin, yMax, freeMidX);
+    const stubsCross = stubExit[0] >= stubEntry[0];
+    const midX = stubsCross ? (from[0] + to[0]) / 2 : stubExit[0] + (stubEntry[0] - stubExit[0]) * 0.75;
+    const freeMidX = findClearX(yMin, yMax || yMin + 1, midX, inflatedBoxes);
+    const lShapeXValid = stubsCross ? freeMidX >= Math.min(from[0], to[0]) && freeMidX <= Math.max(from[0], to[0]) : freeMidX > stubExit[0] && freeMidX < stubEntry[0];
+    if (lShapeXValid && verticalSegmentClear(freeMidX, yMin, yMax, inflatedBoxes) && !inflatedBoxes.some((box) => segmentOverlapsBox(stubExit[0], freeMidX, from[1], box)) && !inflatedBoxes.some((box) => segmentOverlapsBox(freeMidX, stubEntry[0], to[1], box))) {
       return simplifyWaypoints([from, [freeMidX, from[1]], [freeMidX, to[1]], to]);
     }
-    clearY = allocator.findFreeY(xMin, xMax, clearY, inflatedBoxes);
     if (Math.abs(clearY - from[1]) < JOG_THRESHOLD && !inflatedBoxes.some((box) => segmentOverlapsBox(xMin, xMax, from[1], box))) {
-      clearY = from[1];
+      candidateY = from[1];
     } else if (Math.abs(clearY - to[1]) < JOG_THRESHOLD && !inflatedBoxes.some((box) => segmentOverlapsBox(xMin, xMax, to[1], box))) {
-      clearY = to[1];
+      candidateY = to[1];
+    } else {
+      candidateY = clearY;
     }
-    allocator.claim(xMin, xMax, clearY);
-    const exitYMin = Math.min(from[1], clearY);
-    const exitYMax = Math.max(from[1], clearY);
+    const exitYMin = Math.min(from[1], candidateY);
+    const exitYMax = Math.max(from[1], candidateY);
     let exitX = findClearX(exitYMin, exitYMax, stubExit[0], inflatedBoxes);
-    exitX = allocator.findFreeX(exitYMin, exitYMax, exitX, inflatedBoxes);
     if (exitX < from[0]) {
       exitX = stubExit[0];
       if (!verticalSegmentClear(exitX, exitYMin, exitYMax, inflatedBoxes)) {
         exitX = findClearX(exitYMin, exitYMax, stubExit[0] + TRACK_SPACING, inflatedBoxes);
-        exitX = allocator.findFreeX(exitYMin, exitYMax, exitX, inflatedBoxes);
       }
     }
-    allocator.claimVertical(exitYMin, exitYMax, exitX);
-    const entryYMin = Math.min(to[1], clearY);
-    const entryYMax = Math.max(to[1], clearY);
+    const entryYMin = Math.min(to[1], candidateY);
+    const entryYMax = Math.max(to[1], candidateY);
     let entryX = findClearX(entryYMin, entryYMax, stubEntry[0], inflatedBoxes);
-    entryX = allocator.findFreeX(entryYMin, entryYMax, entryX, inflatedBoxes);
     if (entryX > to[0]) {
       entryX = stubEntry[0];
       if (!verticalSegmentClear(entryX, entryYMin, entryYMax, inflatedBoxes)) {
         entryX = findClearX(entryYMin, entryYMax, stubEntry[0] - TRACK_SPACING, inflatedBoxes);
-        entryX = allocator.findFreeX(entryYMin, entryYMax, entryX, inflatedBoxes);
       }
     }
-    allocator.claimVertical(entryYMin, entryYMax, entryX);
     return simplifyWaypoints([
       from,
       [exitX, from[1]],
-      [exitX, clearY],
-      [entryX, clearY],
+      [exitX, candidateY],
+      [entryX, candidateY],
       [entryX, to[1]],
       to
     ]);
@@ -48456,23 +48443,17 @@ function computeWaypoints(from, to, nodeBoxes, sourceNodeId, targetNodeId, paddi
     }
     const maxBottom = Math.max(...bottoms, from[1] + 50, to[1] + 50);
     const minTop = Math.min(...tops, from[1] - 50, to[1] - 50);
-    const avgY = (from[1] + to[1]) / 2;
+    const avgY = (from[1] + to[1]) / 2 + BELOW_BIAS;
     const escapeBelow = maxBottom + padding;
     const escapeAbove = minTop - padding;
-    let escapeY = Math.abs(escapeAbove - avgY) <= Math.abs(escapeBelow - avgY) ? escapeAbove : escapeBelow;
-    escapeY = findClearY(xMin, xMax, escapeY, inflatedBoxes);
-    escapeY = allocator.findFreeY(xMin, xMax, escapeY, inflatedBoxes);
-    allocator.claim(xMin, xMax, escapeY);
+    let escapeY = Math.abs(escapeAbove - avgY) < Math.abs(escapeBelow - avgY) ? escapeAbove : escapeBelow;
+    escapeY = allocator ? allocator.claim(xMin, xMax, findClearY(xMin, xMax, escapeY, inflatedBoxes)) : findClearY(xMin, xMax, escapeY, inflatedBoxes);
     const bwExitYMin = Math.min(from[1], escapeY);
     const bwExitYMax = Math.max(from[1], escapeY);
-    let bwExitX = findClearX(bwExitYMin, bwExitYMax, stubExit[0], inflatedBoxes);
-    bwExitX = allocator.findFreeX(bwExitYMin, bwExitYMax, bwExitX, inflatedBoxes);
-    allocator.claimVertical(bwExitYMin, bwExitYMax, bwExitX);
+    const bwExitX = findClearX(bwExitYMin, bwExitYMax, stubExit[0], inflatedBoxes);
     const bwEntryYMin = Math.min(to[1], escapeY);
     const bwEntryYMax = Math.max(to[1], escapeY);
-    let bwEntryX = findClearX(bwEntryYMin, bwEntryYMax, stubEntry[0], inflatedBoxes);
-    bwEntryX = allocator.findFreeX(bwEntryYMin, bwEntryYMax, bwEntryX, inflatedBoxes);
-    allocator.claimVertical(bwEntryYMin, bwEntryYMax, bwEntryX);
+    const bwEntryX = findClearX(bwEntryYMin, bwEntryYMax, stubEntry[0], inflatedBoxes);
     return simplifyWaypoints([
       from,
       [bwExitX, from[1]],
@@ -48483,7 +48464,7 @@ function computeWaypoints(from, to, nodeBoxes, sourceNodeId, targetNodeId, paddi
     ]);
   }
 }
-function calculateOrthogonalPath(from, to, nodeBoxes, sourceNodeId, targetNodeId, options, allocator) {
+function calculateOrthogonalPath(from, to, nodeBoxes, sourceNodeId, targetNodeId, options) {
   const cornerRadius = options?.cornerRadius ?? 10;
   const padding = options?.padding ?? 15;
   const stubLength = options?.stubLength ?? 20;
@@ -48493,7 +48474,6 @@ function calculateOrthogonalPath(from, to, nodeBoxes, sourceNodeId, targetNodeId
   const toPortIndex = options?.toPortIndex ?? 0;
   const exitStub = Math.min(stubLength + fromPortIndex * stubSpacing, maxStubLength);
   const entryStub = Math.min(stubLength + toPortIndex * stubSpacing, maxStubLength);
-  const alloc = allocator ?? new TrackAllocator();
   const waypoints = computeWaypoints(
     from,
     to,
@@ -48503,167 +48483,53 @@ function calculateOrthogonalPath(from, to, nodeBoxes, sourceNodeId, targetNodeId
     padding,
     exitStub,
     entryStub,
-    alloc
+    options?.scopedInternal,
+    options?.allocator
   );
   if (!waypoints) return null;
   return waypointsToSvgPath(waypoints, cornerRadius);
 }
-function calculateOrthogonalPathSafe(from, to, nodeBoxes, sourceNodeId, targetNodeId, options, allocator) {
+function calculateOrthogonalPathSafe(from, to, nodeBoxes, sourceNodeId, targetNodeId, options) {
   try {
-    const path54 = calculateOrthogonalPath(
-      from,
-      to,
-      nodeBoxes,
-      sourceNodeId,
-      targetNodeId,
-      options,
-      allocator
-    );
+    const path54 = calculateOrthogonalPath(from, to, nodeBoxes, sourceNodeId, targetNodeId, options);
     if (!path54 || path54.length < 5) return null;
     return path54;
   } catch {
     return null;
   }
 }
-var TRACK_SPACING, EDGE_OFFSET, MAX_CANDIDATES, TrackAllocator, MIN_SEGMENT_LENGTH, JOG_THRESHOLD;
+var TRACK_SPACING, EDGE_OFFSET, BELOW_BIAS, TrackAllocator, MIN_SEGMENT_LENGTH, JOG_THRESHOLD;
 var init_orthogonal_router = __esm({
   "src/diagram/orthogonal-router.ts"() {
     "use strict";
     TRACK_SPACING = 15;
     EDGE_OFFSET = 5;
-    MAX_CANDIDATES = 5;
+    BELOW_BIAS = 40;
     TrackAllocator = class {
-      claims = [];
-      verticalClaims = [];
-      /** Check if a Y value is too close to any claimed segment whose X range overlaps. */
-      isOccupied(xMin, xMax, y) {
-        for (const c of this.claims) {
-          if (c.xMin < xMax && c.xMax > xMin && Math.abs(c.y - y) < TRACK_SPACING) {
-            return true;
-          }
-        }
-        return false;
-      }
-      /** Check if an X value is too close to any claimed vertical segment whose Y range overlaps. */
-      isOccupiedVertical(yMin, yMax, x2) {
-        for (const c of this.verticalClaims) {
-          if (c.yMin < yMax && c.yMax > yMin && Math.abs(c.x - x2) < TRACK_SPACING) {
-            return true;
-          }
-        }
-        return false;
-      }
-      /** Check if a horizontal segment at Y passes through any inflated node box. */
-      isBlockedByNode(xMin, xMax, y, boxes) {
-        for (const box of boxes) {
-          if (xMin < box.right && xMax > box.left && y >= box.top && y <= box.bottom) {
-            return true;
-          }
-        }
-        return false;
-      }
-      /** Check if a vertical segment at X passes through any inflated node box. */
-      isBlockedByNodeVertical(yMin, yMax, x2, boxes) {
-        for (const box of boxes) {
-          if (x2 >= box.left && x2 <= box.right && yMin < box.bottom && yMax > box.top) {
-            return true;
-          }
-        }
-        return false;
-      }
-      /** Count claimed vertical segments that a horizontal segment at Y would cross. */
-      countHorizontalCrossings(xMin, xMax, y) {
-        let count = 0;
-        for (const c of this.verticalClaims) {
-          if (c.x > xMin && c.x < xMax && y >= c.yMin && y <= c.yMax) {
-            count++;
-          }
-        }
-        return count;
-      }
-      /** Count claimed horizontal segments that a vertical segment at X would cross. */
-      countVerticalCrossings(yMin, yMax, x2) {
-        let count = 0;
-        for (const c of this.claims) {
-          if (c.y > yMin && c.y < yMax && x2 >= c.xMin && x2 <= c.xMax) {
-            count++;
-          }
-        }
-        return count;
-      }
-      /**
-       * Find the nearest free Y to candidateY in the given X range, preferring fewer crossings.
-       * When nodeBoxes is provided, candidates inside inflated node boxes are rejected (hard constraint).
-       */
-      findFreeY(xMin, xMax, candidateY, nodeBoxes) {
-        const isFree = (y) => !this.isOccupied(xMin, xMax, y) && (!nodeBoxes || !this.isBlockedByNode(xMin, xMax, y, nodeBoxes));
-        if (isFree(candidateY)) return candidateY;
-        const candidates = [];
-        for (let offset = TRACK_SPACING; offset < 800 && candidates.length < MAX_CANDIDATES * 2; offset += TRACK_SPACING) {
-          const above = candidateY - offset;
-          if (isFree(above)) {
-            candidates.push({ y: above, dist: offset });
-          }
-          const below = candidateY + offset;
-          if (isFree(below)) {
-            candidates.push({ y: below, dist: offset });
-          }
-        }
-        if (candidates.length === 0) return candidateY;
-        let bestY = candidates[0].y;
-        let bestCrossings = this.countHorizontalCrossings(xMin, xMax, candidates[0].y);
-        let bestDist = candidates[0].dist;
-        for (let i = 1; i < candidates.length; i++) {
-          const c = candidates[i];
-          const crossings = this.countHorizontalCrossings(xMin, xMax, c.y);
-          if (crossings < bestCrossings || crossings === bestCrossings && c.dist < bestDist) {
-            bestY = c.y;
-            bestCrossings = crossings;
-            bestDist = c.dist;
-          }
-        }
-        return bestY;
-      }
-      /**
-       * Find the nearest free X to candidateX in the given Y range, preferring fewer crossings.
-       * When nodeBoxes is provided, candidates inside inflated node boxes are rejected (hard constraint).
-       */
-      findFreeX(yMin, yMax, candidateX, nodeBoxes) {
-        const isFree = (x2) => !this.isOccupiedVertical(yMin, yMax, x2) && (!nodeBoxes || !this.isBlockedByNodeVertical(yMin, yMax, x2, nodeBoxes));
-        if (isFree(candidateX)) return candidateX;
-        const candidates = [];
-        for (let offset = TRACK_SPACING; offset < 800 && candidates.length < MAX_CANDIDATES * 2; offset += TRACK_SPACING) {
-          const left = candidateX - offset;
-          if (isFree(left)) {
-            candidates.push({ x: left, dist: offset });
-          }
-          const right = candidateX + offset;
-          if (isFree(right)) {
-            candidates.push({ x: right, dist: offset });
-          }
-        }
-        if (candidates.length === 0) return candidateX;
-        let bestX = candidates[0].x;
-        let bestCrossings = this.countVerticalCrossings(yMin, yMax, candidates[0].x);
-        let bestDist = candidates[0].dist;
-        for (let i = 1; i < candidates.length; i++) {
-          const c = candidates[i];
-          const crossings = this.countVerticalCrossings(yMin, yMax, c.x);
-          if (crossings < bestCrossings || crossings === bestCrossings && c.dist < bestDist) {
-            bestX = c.x;
-            bestCrossings = crossings;
-            bestDist = c.dist;
+      claims = /* @__PURE__ */ new Map();
+      claim(xMin, xMax, candidateY) {
+        const snap = (y) => Math.round(y / TRACK_SPACING) * TRACK_SPACING;
+        const overlaps = (slot) => {
+          const intervals = this.claims.get(slot);
+          if (!intervals) return false;
+          return intervals.some(([a, b]) => xMin < b && xMax > a);
+        };
+        const take = (slot) => {
+          if (!this.claims.has(slot)) this.claims.set(slot, []);
+          const slotClaims = this.claims.get(slot);
+          if (slotClaims) slotClaims.push([xMin, xMax]);
+          return slot;
+        };
+        const base = snap(candidateY);
+        for (let i = 0; i < 60; i++) {
+          const below = base + i * TRACK_SPACING;
+          if (!overlaps(below)) return take(below);
+          if (i > 0) {
+            const above = base - i * TRACK_SPACING;
+            if (!overlaps(above)) return take(above);
           }
         }
-        return bestX;
-      }
-      /** Claim a horizontal segment so later connections avoid it. */
-      claim(xMin, xMax, y) {
-        this.claims.push({ xMin, xMax, y });
-      }
-      /** Claim a vertical segment so later connections avoid it. */
-      claimVertical(yMin, yMax, x2) {
-        this.verticalClaims.push({ yMin, yMax, x: x2 });
+        return candidateY;
       }
     };
     MIN_SEGMENT_LENGTH = 3;
@@ -48708,49 +48574,8 @@ function positionPortList(ports, cx, nodeY, _nodeHeight) {
     ports[i].cy = nodeY + PORT_PADDING_Y + i * (PORT_SIZE + PORT_GAP) + PORT_SIZE / 2;
   }
 }
-function quadCurveControl(ax, ay, bx, by, ux, uy) {
-  const dn = Math.abs(ay - by);
-  const cx = bx + ux * dn / Math.abs(uy);
-  const cy = ay;
-  return [cx, cy];
-}
 function computeConnectionPath(sx, sy, tx, ty) {
-  const e = 1e-4;
-  const ax = sx + e;
-  const ay = sy + e;
-  const hx = tx - e;
-  const hy = ty - e;
-  const ramp = Math.min(20, (hx - ax) / 10);
-  const bx = ax + ramp;
-  const by = ay + e;
-  const gx = hx - ramp;
-  const gy = hy - e;
-  const curveSizeX = Math.min(60, Math.abs(ax - hx) / 4);
-  const curveSizeY = Math.min(60, Math.abs(ay - hy) / 4);
-  const curveMag = Math.sqrt(curveSizeX * curveSizeX + curveSizeY * curveSizeY);
-  const bgX = gx - bx;
-  const bgY = gy - by;
-  const bgLen = Math.sqrt(bgX * bgX + bgY * bgY);
-  const bgUx = bgX / bgLen;
-  const bgUy = bgY / bgLen;
-  const dx = bx + bgUx * curveMag;
-  const dy = by + bgUy * curveMag / 2;
-  const ex = gx - bgUx * curveMag;
-  const ey = gy - bgUy * curveMag / 2;
-  const deX = ex - dx;
-  const deY = ey - dy;
-  const deLen = Math.sqrt(deX * deX + deY * deY);
-  const deUx = deX / deLen;
-  const deUy = deY / deLen;
-  const [cx, cy] = quadCurveControl(bx, by, dx, dy, -deUx, -deUy);
-  const [fx, fy] = quadCurveControl(gx, gy, ex, ey, deUx, deUy);
-  let path54 = `M ${cx},${cy} M ${ax},${ay}`;
-  path54 += ` L ${bx},${by}`;
-  path54 += ` Q ${cx},${cy} ${dx},${dy}`;
-  path54 += ` L ${ex},${ey}`;
-  path54 += ` Q ${fx},${fy} ${gx},${gy}`;
-  path54 += ` L ${hx},${hy}`;
-  return path54;
+  return `M ${sx},${sy} L ${tx},${ty}`;
 }
 function orderedPorts(ports, direction) {
   const cloned = {};
@@ -49510,22 +49335,22 @@ function buildDiagramGraph(ast, options = {}) {
       color: targetColor,
       dashed
     };
+    const isStaticSvg = options.format !== "html";
+    const pathSx = isStaticSvg ? sx + srcLabelEnd : sx;
+    const pathTx = isStaticSvg ? tx - tgtLabelEnd : tx;
     let path54;
     if (xDistance > STUB_DISTANCE_THRESHOLD) {
       path54 = "";
-    } else if (!useCurve && distance > ORTHOGONAL_DISTANCE_THRESHOLD) {
+    } else {
       const orthoPath = calculateOrthogonalPathSafe(
-        [sx, sy],
-        [tx, ty],
+        [pathSx, sy],
+        [pathTx, ty],
         nodeBoxes,
         pc3.fromNodeId,
         pc3.toNodeId,
-        { fromPortIndex: pc3.fromPortIndex, toPortIndex: pc3.toPortIndex },
-        allocator
+        { fromPortIndex: pc3.fromPortIndex, toPortIndex: pc3.toPortIndex, allocator }
       );
-      path54 = orthoPath ?? computeConnectionPath(sx, sy, tx, ty);
-    } else {
-      path54 = computeConnectionPath(sx, sy, tx, ty);
+      path54 = orthoPath ?? computeConnectionPath(pathSx, sy, pathTx, ty);
     }
     connections.push({
       fromNode: pc3.fromNodeId,
@@ -49615,20 +49440,15 @@ function buildDiagramGraph(ast, options = {}) {
       const ddy = ty - sy;
       const dist = Math.sqrt(ddx * ddx + ddy * ddy);
       const useCurve = spForceCurveSet.has(sp);
-      if (!useCurve && dist > ORTHOGONAL_DISTANCE_THRESHOLD) {
-        const orthoPath = calculateOrthogonalPathSafe(
-          [sx, sy],
-          [tx, ty],
-          nodeBoxes,
-          sp.fromNodeId,
-          sp.toNodeId,
-          { fromPortIndex: sp.fromPortIndex, toPortIndex: sp.toPortIndex },
-          allocator
-        );
-        sp.conn.path = orthoPath ?? computeConnectionPath(sx, sy, tx, ty);
-      } else {
-        sp.conn.path = computeConnectionPath(sx, sy, tx, ty);
-      }
+      const orthoPath = calculateOrthogonalPathSafe(
+        [sx, sy],
+        [tx, ty],
+        nodeBoxes,
+        sp.fromNodeId,
+        sp.toNodeId,
+        { fromPortIndex: sp.fromPortIndex, toPortIndex: sp.toPortIndex, allocator }
+      );
+      sp.conn.path = orthoPath ?? computeConnectionPath(sx, sy, tx, ty);
     }
   }
   let originX = 0;
@@ -49741,11 +49561,11 @@ var init_geometry = __esm({
     LABEL_CLEARANCE = 42;
     MIN_EDGE_GAP = 112;
     NODE_GAP_Y = 60;
-    LABEL_HEIGHT = 20;
+    LABEL_HEIGHT = 24;
     LABEL_GAP = 12;
     SCOPE_PADDING_X = 140;
     SCOPE_PADDING_Y = 40;
-    SCOPE_PORT_COLUMN = 50;
+    SCOPE_PORT_COLUMN = 45;
     SCOPE_INNER_GAP_X = 240;
     ORTHOGONAL_DISTANCE_THRESHOLD = 300;
     STUB_DISTANCE_THRESHOLD = 500;
@@ -50646,6 +50466,15 @@ var init_describe = __esm({
 function escapeXml(str2) {
   return str2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+function resolveIconColor(nodeColor, themeName, theme) {
+  if (nodeColor === NODE_DEFAULT_COLOR) return theme.nodeIconColor;
+  for (const v2 of Object.values(NODE_VARIANT_COLORS)) {
+    if (v2.darkBorder === nodeColor || v2.border === nodeColor) {
+      return themeName === "dark" ? v2.darkIcon : v2.icon;
+    }
+  }
+  return nodeColor;
+}
 function collectAllConnections(graph) {
   const all = [...graph.connections];
   for (const node of graph.nodes) {
@@ -50672,21 +50501,18 @@ function renderSVG(graph, options = {}) {
     `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${vbX} ${vbY} ${vbWidth} ${vbHeight}" width="${svgWidth}" height="${svgHeight}">`
   );
   parts.push(`<style>`);
-  parts.push(`  text { font-family: Montserrat, 'Segoe UI', Roboto, sans-serif; }`);
-  parts.push(`  .node-label { font-size: 13px; font-weight: 700; fill: ${theme.labelColor}; }`);
+  parts.push(`  text { font-family: Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }`);
+  parts.push(`  .node-label { font-size: 18px; font-weight: 600; fill: ${theme.labelColor}; }`);
   parts.push(`  .port-label { font-size: 10px; font-weight: 600; fill: ${theme.labelColor}; }`);
   parts.push(`  .port-type-label { font-size: 10px; font-weight: 600; }`);
   parts.push(`</style>`);
   parts.push(`<defs>`);
   parts.push(`  <pattern id="dot-grid" width="20" height="20" patternUnits="userSpaceOnUse">`);
-  parts.push(`    <circle cx="10" cy="10" r="1.5" fill="${theme.dotColor}" opacity="${theme.dotOpacity}"/>`);
+  parts.push(`    <circle cx="10" cy="10" r="0.75" fill="${theme.dotColor}" opacity="${theme.dotOpacity}"/>`);
   parts.push(`  </pattern>`);
-  parts.push(`  <filter id="node-shadow" x="-10%" y="-10%" width="130%" height="140%">`);
-  parts.push(`    <feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="${theme.nodeShadowOpacity}" flood-color="#000"/>`);
-  parts.push(`  </filter>`);
   for (let i = 0; i < allConnections.length; i++) {
     const conn = allConnections[i];
-    parts.push(`  <linearGradient id="conn-grad-${i}" x1="0%" y1="0%" x2="100%" y2="0%">`);
+    parts.push(`  <linearGradient id="conn-grad-${i}" gradientUnits="userSpaceOnUse" x1="${vbX}" y1="0" x2="${vbX + vbWidth}" y2="0">`);
     parts.push(`    <stop offset="0%" stop-color="${conn.sourceColor}"/>`);
     parts.push(`    <stop offset="100%" stop-color="${conn.targetColor}"/>`);
     parts.push(`  </linearGradient>`);
@@ -50728,13 +50554,6 @@ function renderSVG(graph, options = {}) {
     }
   }
   parts.push(`</g>`);
-  const wmX = vbX + vbWidth - 16;
-  const wmY = vbY + vbHeight - 14;
-  const wmBrand = themeName === "dark" ? "#8e9eff" : "#5468ff";
-  parts.push(`<g opacity="0.5">`);
-  parts.push(`  <svg x="${wmX - 118}" y="${wmY - 18}" width="22" height="22" viewBox="0 0 256 256" fill="none"><path d="M80 128C134 128 122 49 176 49" stroke="${wmBrand}" stroke-width="14" stroke-linecap="round"/><path d="M80 128C134 128 122 207 176 207" stroke="${wmBrand}" stroke-width="14" stroke-linecap="round"/><rect x="28" y="102" width="52" height="52" rx="10" stroke="${wmBrand}" stroke-width="14"/><rect x="176" y="23" width="52" height="52" rx="10" stroke="${wmBrand}" stroke-width="14"/><rect x="176" y="181" width="52" height="52" rx="10" stroke="${wmBrand}" stroke-width="14"/></svg>`);
-  parts.push(`  <text x="${wmX}" y="${wmY}" text-anchor="end" font-size="14" font-weight="700" fill="${wmBrand}" font-family="Montserrat, 'Segoe UI', Roboto, sans-serif">Flow Weaver</text>`);
-  parts.push(`</g>`);
   parts.push(`</svg>`);
   return parts.join("\n");
 }
@@ -50743,7 +50562,7 @@ function renderConnection(parts, conn, gradIndex, hidden = false) {
   const displayAttr = hidden ? ' display="none"' : "";
   const pathD = conn.path || "M0,0";
   parts.push(
-    `  <path d="${pathD}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="3"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input"${displayAttr}/>`
+    `  <path d="${pathD}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="1"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input"${displayAttr}/>`
   );
 }
 function renderStub(parts, stub, conn, hidden = false) {
@@ -50763,17 +50582,17 @@ function renderScopeConnection(parts, conn, allConnections, parentNodeId) {
   if (gradIndex < 0) return;
   const dashAttr = conn.isStepConnection ? "" : ' stroke-dasharray="8 4"';
   parts.push(
-    `    <path d="${conn.path}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="2.5"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input" data-scope="${escapeXml(parentNodeId)}"/>`
+    `    <path d="${conn.path}" fill="none" stroke="url(#conn-grad-${gradIndex})" stroke-width="1"${dashAttr} stroke-linecap="round" data-source="${escapeXml(conn.fromNode)}.${escapeXml(conn.fromPort)}:output" data-target="${escapeXml(conn.toNode)}.${escapeXml(conn.toPort)}:input" data-scope="${escapeXml(parentNodeId)}"/>`
   );
 }
-function renderNodeBody(parts, node, theme, indent) {
+function renderNodeBody(parts, node, theme, themeName, indent) {
   const strokeColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
   parts.push(
-    `${indent}<rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.nodeFill}" stroke="${strokeColor}" stroke-width="2" filter="url(#node-shadow)"/>`
+    `${indent}<rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.background}" stroke="${strokeColor}" stroke-width="2"/>`
   );
   const iconPath = NODE_ICON_PATHS[node.icon] ?? NODE_ICON_PATHS.code;
-  const iconColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
-  const iconSize = 40;
+  const iconColor = resolveIconColor(node.color, themeName, theme);
+  const iconSize = 50;
   const iconX = node.x + (node.width - iconSize) / 2;
   const iconY = node.y + (node.height - iconSize) / 2;
   parts.push(
@@ -50786,13 +50605,13 @@ function renderNode(node, theme, themeName, allConnections) {
   if (node.scopeChildren && node.scopeChildren.length > 0) {
     const strokeColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
     parts.push(
-      `    <rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.nodeFill}" stroke="${strokeColor}" stroke-width="2" filter="url(#node-shadow)"/>`
+      `    <rect x="${node.x}" y="${node.y}" width="${node.width}" height="${node.height}" rx="${BORDER_RADIUS}" fill="${theme.background}" stroke="${strokeColor}" stroke-width="2"/>`
     );
     renderScopedContent(parts, node, theme, themeName, allConnections);
   } else {
-    renderNodeBody(parts, node, theme, "    ");
+    renderNodeBody(parts, node, theme, themeName, "    ");
   }
-  renderPortDots(parts, node.id, node.inputs, node.outputs, themeName);
+  renderPortDots(parts, node.id, node.inputs, node.outputs, themeName, theme);
   parts.push(`  </g>`);
   return parts.join("\n");
 }
@@ -50800,38 +50619,45 @@ function renderScopedContent(parts, node, theme, themeName, allConnections) {
   const children = node.scopeChildren;
   const scopePorts = node.scopePorts;
   const scopeX = node.x + SCOPE_PORT_COLUMN;
-  const scopeY = node.y + 4;
   const scopeW = node.width - SCOPE_PORT_COLUMN * 2;
-  const scopeH = node.height - 8;
+  const scopeRightX = node.x + node.width - SCOPE_PORT_COLUMN;
+  const lineY1 = node.y;
+  const lineY2 = node.y + node.height;
+  const strokeColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.nodeIconColor;
   parts.push(
-    `    <rect x="${scopeX}" y="${scopeY}" width="${scopeW}" height="${scopeH}" rx="4" fill="none" stroke="${theme.scopeAreaStroke}" stroke-width="1" stroke-dasharray="4 2" opacity="0.5"/>`
+    `    <line x1="${scopeX}" y1="${lineY1}" x2="${scopeX}" y2="${lineY2}" stroke="${strokeColor}" stroke-width="2" opacity="0.5"/>`
+  );
+  parts.push(
+    `    <line x1="${scopeRightX}" y1="${lineY1}" x2="${scopeRightX}" y2="${lineY2}" stroke="${strokeColor}" stroke-width="2" opacity="0.5"/>`
+  );
+  parts.push(
+    `    <line x1="${scopeX}" y1="${lineY1 + 2}" x2="${scopeRightX}" y2="${lineY1 + 2}" stroke="${theme.scopeAreaStroke}" stroke-width="1" opacity="0.3"/>`
+  );
+  parts.push(
+    `    <line x1="${scopeX}" y1="${lineY2 - 2}" x2="${scopeRightX}" y2="${lineY2 - 2}" stroke="${theme.scopeAreaStroke}" stroke-width="1" opacity="0.3"/>`
   );
   for (const conn of node.scopeConnections ?? []) {
     renderScopeConnection(parts, conn, allConnections, node.id);
   }
   if (scopePorts) {
-    renderPortDots(parts, node.id, scopePorts.inputs, scopePorts.outputs, themeName);
+    renderPortDots(parts, node.id, scopePorts.inputs, scopePorts.outputs, themeName, theme);
   }
   for (const child of children) {
     parts.push(`    <g data-node-id="${escapeXml(child.id)}">`);
-    renderNodeBody(parts, child, theme, "      ");
-    renderPortDots(parts, child.id, child.inputs, child.outputs, themeName);
+    renderNodeBody(parts, child, theme, themeName, "      ");
+    renderPortDots(parts, child.id, child.inputs, child.outputs, themeName, theme);
     parts.push(`    </g>`);
   }
 }
 function renderNodeLabel(parts, node, theme) {
   const isScoped = !!(node.scopeChildren && node.scopeChildren.length > 0);
   const labelText = escapeXml(node.label);
-  const textWidth = labelText.length * 7;
-  const labelBgWidth = textWidth + 16;
-  const labelBgHeight = LABEL_HEIGHT;
-  const labelBgX = isScoped ? node.x : node.x + node.width / 2 - labelBgWidth / 2;
-  const labelBgY = node.y - LABEL_GAP - labelBgHeight;
-  const labelTextX = isScoped ? node.x + 8 : node.x + node.width / 2;
+  const labelTextX = isScoped ? node.x + 6 : node.x + node.width / 2;
+  const labelTextY = node.y - LABEL_GAP;
   const labelAnchor = isScoped ? "start" : "middle";
+  const labelColor = node.color !== NODE_DEFAULT_COLOR ? node.color : theme.labelColor;
   parts.push(`    <g data-label-for="${escapeXml(node.id)}">`);
-  parts.push(`      <rect x="${labelBgX}" y="${labelBgY}" width="${labelBgWidth}" height="${labelBgHeight}" rx="6" fill="${theme.labelBadgeFill}" opacity="0.95"/>`);
-  parts.push(`      <text class="node-label" x="${labelTextX}" y="${labelBgY + labelBgHeight / 2 + 6}" text-anchor="${labelAnchor}" fill="${node.color !== NODE_DEFAULT_COLOR ? node.color : theme.labelColor}">${labelText}</text>`);
+  parts.push(`      <text class="node-label" x="${labelTextX}" y="${labelTextY}" text-anchor="${labelAnchor}" fill="${labelColor}">${labelText}</text>`);
   parts.push(`    </g>`);
 }
 function renderPortLabelsForNode(parts, node, theme, themeName, showPortLabels) {
@@ -50839,46 +50665,50 @@ function renderPortLabelsForNode(parts, node, theme, themeName, showPortLabels)
     renderPortLabels(parts, node.id, node.inputs, node.outputs, theme, themeName);
   }
 }
-function renderPortDots(parts, nodeId, inputs, outputs, themeName) {
+function renderPortDots(parts, nodeId, inputs, outputs, themeName, theme) {
+  const barWidth = 2;
+  const barHeight = 14;
+  const ringWidth = 2;
+  const outerW = barWidth + ringWidth * 2;
+  const outerH = barHeight + ringWidth * 2;
   for (const port of [...inputs, ...outputs]) {
     const color = getPortColor(port.dataType, port.isFailure, themeName);
-    const ringColor = getPortRingColor(port.dataType, port.isFailure, themeName);
     const dir = port.direction === "INPUT" ? "input" : "output";
-    parts.push(`    <circle cx="${port.cx}" cy="${port.cy}" r="${PORT_RADIUS}" fill="${color}" stroke="${ringColor}" stroke-width="2" data-port-id="${escapeXml(nodeId)}.${escapeXml(port.name)}:${dir}" data-direction="${dir}"/>`);
+    const ox = port.cx - outerW / 2;
+    const oy = port.cy - outerH / 2;
+    const ix = port.cx - barWidth / 2;
+    const iy = port.cy - barHeight / 2;
+    parts.push(`    <rect x="${ox}" y="${oy}" width="${outerW}" height="${outerH}" rx="4" fill="${color}" data-port-id="${escapeXml(nodeId)}.${escapeXml(port.name)}:${dir}" data-direction="${dir}"/>`);
+    parts.push(`    <rect x="${ix}" y="${iy}" width="${barWidth}" height="${barHeight}" rx="2" fill="${theme.background}" pointer-events="none"/>`);
   }
 }
 function renderPortLabels(parts, nodeId, inputs, outputs, theme, themeName) {
   for (const port of [...inputs, ...outputs]) {
     const color = getPortColor(port.dataType, port.isFailure, themeName);
     const isInput = port.direction === "INPUT";
-    const abbrev = TYPE_ABBREVIATIONS[port.dataType] ?? port.dataType;
     const dir = isInput ? "input" : "output";
     const portId = `${escapeXml(nodeId)}.${escapeXml(port.name)}:${dir}`;
     const portLabel = port.label;
-    const typeWidth = measureText(abbrev);
     const labelWidth = measureText(portLabel);
-    const pad2 = 7;
-    const divGap = 4;
-    const badgeWidth = pad2 + typeWidth + divGap + 1 + divGap + labelWidth + pad2;
+    const pad2 = 6;
+    const gap = 4;
+    const abbrev = TYPE_ABBREVIATIONS[port.dataType] ?? port.dataType;
+    const typeWidth = measureText(abbrev);
+    const badgeWidth = pad2 + typeWidth + gap + labelWidth + pad2;
     const badgeHeight = 16;
     const badgeGap = 5;
-    const rr = badgeHeight / 2;
     const badgeX = isInput ? port.cx - PORT_RADIUS - badgeGap - badgeWidth : port.cx + PORT_RADIUS + badgeGap;
     const badgeY = port.cy - badgeHeight / 2;
     parts.push(`    <g data-port-label="${portId}">`);
-    parts.push(`      <rect x="${badgeX}" y="${badgeY}" width="${badgeWidth}" height="${badgeHeight}" rx="${rr}" fill="${theme.nodeFill}" stroke="${theme.labelBadgeBorder}" stroke-width="1"/>`);
+    parts.push(`      <rect x="${badgeX}" y="${badgeY}" width="${badgeWidth}" height="${badgeHeight}" rx="3" fill="${theme.background}" stroke="${color}" stroke-width="1"/>`);
     if (isInput) {
       const typeX = badgeX + badgeWidth - pad2 - typeWidth / 2;
-      const divX = typeX - typeWidth / 2 - divGap;
-      const nameX = divX - divGap;
-      parts.push(`      <line x1="${divX}" y1="${badgeY + 3}" x2="${divX}" y2="${badgeY + badgeHeight - 3}" stroke="${theme.labelBadgeBorder}" stroke-width="1"/>`);
+      const nameX = typeX - typeWidth / 2 - gap;
       parts.push(`      <text class="port-label" x="${nameX}" y="${port.cy + 3.5}" text-anchor="end">${escapeXml(portLabel)}</text>`);
       parts.push(`      <text class="port-type-label" x="${typeX}" y="${port.cy + 3.5}" text-anchor="middle" fill="${color}">${escapeXml(abbrev)}</text>`);
     } else {
       const typeX = badgeX + pad2 + typeWidth / 2;
-      const divX = badgeX + pad2 + typeWidth + divGap;
-      const nameX = divX + 1 + divGap;
-      parts.push(`      <line x1="${divX}" y1="${badgeY + 3}" x2="${divX}" y2="${badgeY + badgeHeight - 3}" stroke="${theme.labelBadgeBorder}" stroke-width="1"/>`);
+      const nameX = typeX + typeWidth / 2 + gap;
       parts.push(`      <text class="port-type-label" x="${typeX}" y="${port.cy + 3.5}" text-anchor="middle" fill="${color}">${escapeXml(abbrev)}</text>`);
       parts.push(`      <text class="port-label" x="${nameX}" y="${port.cy + 3.5}" text-anchor="start">${escapeXml(portLabel)}</text>`);
     }
@@ -50955,13 +50785,12 @@ body.node-active [data-source].dimmed,
 body.port-active [data-source].dimmed { opacity: 0.1; }
 body.port-hovered [data-source].dimmed { opacity: 0.25; }
 
-/* Port circles are interactive */
-circle[data-port-id] { cursor: pointer; }
-circle[data-port-id]:hover { stroke-width: 3; filter: brightness(1.3); }
+/* Port indicators are interactive \u2014 expands to circle on hover (matches platform) */
+[data-port-id] { cursor: pointer; }
 
 /* Port-click highlighting */
 [data-source].highlighted { opacity: 1; }
-circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor); stroke-width: 4; }
+[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor); }
 
 /* Node selection glow */
 @keyframes select-pop {
@@ -51166,7 +50995,7 @@ circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor);
 <svg id="canvas" xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}">
   <defs>
     <pattern id="viewer-dots" width="20" height="20" patternUnits="userSpaceOnUse">
-      <circle cx="10" cy="10" r="1.5" fill="${dotColor}" opacity="0.6"/>
+      <circle cx="10" cy="10" r="0.75" fill="${dotColor}" opacity="0.4"/>
     </pattern>
   </defs>
   <rect x="-100000" y="-100000" width="200000" height="200000" fill="${bg}" pointer-events="none"/>
@@ -51443,33 +51272,9 @@ circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor);
   var MIN_SEG_LEN = 3, JOG_THRESHOLD = 10, ORTHO_THRESHOLD = 300;
   var STUB_THRESHOLD = 500, STUB_LEN = 30;
 
-  function quadCurveControl(ax, ay, bx, by, ux, uy) {
-    var dn = Math.abs(ay - by);
-    return [bx + (ux * dn) / Math.abs(uy), ay];
-  }
-
+  // Straight-line fallback when orthogonal routing fails (matches platform)
   function computeConnectionPath(sx, sy, tx, ty) {
-    var e = 0.0001;
-    var ax = sx + e, ay = sy + e, hx = tx - e, hy = ty - e;
-    var ramp = Math.min(20, (hx - ax) / 10);
-    var bx = ax + ramp, by = ay + e, gx = hx - ramp, gy = hy - e;
-    var curveSizeX = Math.min(60, Math.abs(ax - hx) / 4);
-    var curveSizeY = Math.min(60, Math.abs(ay - hy) / 4);
-    var curveMag = Math.sqrt(curveSizeX * curveSizeX + curveSizeY * curveSizeY);
-    var bgX = gx - bx, bgY = gy - by;
-    var bgLen = Math.sqrt(bgX * bgX + bgY * bgY);
-    var bgUx = bgX / bgLen, bgUy = bgY / bgLen;
-    var dx = bx + bgUx * curveMag, dy = by + (bgUy * curveMag) / 2;
-    var ex = gx - bgUx * curveMag, ey = gy - (bgUy * curveMag) / 2;
-    var deX = ex - dx, deY = ey - dy;
-    var deLen = Math.sqrt(deX * deX + deY * deY);
-    var deUx = deX / deLen, deUy = deY / deLen;
-    var c = quadCurveControl(bx, by, dx, dy, -deUx, -deUy);
-    var f = quadCurveControl(gx, gy, ex, ey, deUx, deUy);
-    return 'M ' + c[0] + ',' + c[1] + ' M ' + ax + ',' + ay +
-      ' L ' + bx + ',' + by + ' Q ' + c[0] + ',' + c[1] + ' ' + dx + ',' + dy +
-      ' L ' + ex + ',' + ey + ' Q ' + f[0] + ',' + f[1] + ' ' + gx + ',' + gy +
-      ' L ' + hx + ',' + hy;
+    return 'M ' + sx + ',' + sy + ' L ' + tx + ',' + ty;
   }
 
   // ---- Orthogonal router (ported from orthogonal-router.ts) ----
@@ -51752,7 +51557,16 @@ circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor);
   var portPositions = {};
   content.querySelectorAll('[data-port-id]').forEach(function(el) {
     var id = el.getAttribute('data-port-id');
-    portPositions[id] = { cx: parseFloat(el.getAttribute('cx')), cy: parseFloat(el.getAttribute('cy')) };
+    // Ports may be circle (cx/cy) or rect (x/y/width/height) elements
+    var cx, cy;
+    if (el.tagName === 'circle') {
+      cx = parseFloat(el.getAttribute('cx'));
+      cy = parseFloat(el.getAttribute('cy'));
+    } else {
+      cx = parseFloat(el.getAttribute('x')) + parseFloat(el.getAttribute('width')) / 2;
+      cy = parseFloat(el.getAttribute('y')) + parseFloat(el.getAttribute('height')) / 2;
+    }
+    portPositions[id] = { cx: cx, cy: cy };
   });
 
   // Extract node bounding boxes from SVG rect elements
@@ -51914,14 +51728,9 @@ circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor);
         }
       } else {
         // Path mode: show path, hide stubs
-        var ddx = tx - sx, ddy = ty - sy, dist = Math.sqrt(ddx * ddx + ddy * ddy);
-        var path;
-        if (dist > ORTHO_THRESHOLD) {
-          path = calcOrthogonalPath([sx, sy], [tx, ty], boxes, c.srcNode, c.tgtNode, c.srcIdx, c.tgtIdx, alloc);
-          if (!path) path = computeConnectionPath(sx, sy, tx, ty);
-        } else {
-          path = computeConnectionPath(sx, sy, tx, ty);
-        }
+        // Always try orthogonal routing first (matches platform)
+        var path = calcOrthogonalPath([sx, sy], [tx, ty], boxes, c.srcNode, c.tgtNode, c.srcIdx, c.tgtIdx, alloc);
+        if (!path) path = computeConnectionPath(sx, sy, tx, ty);
         c.el.setAttribute('d', path);
         c.el.removeAttribute('display');
         if (c.stubs) {
@@ -52204,14 +52013,79 @@ circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor);
     });
   });
 
-  // Port hover: show this port's label + all connected port labels
+  // Port hover: animated ring\u2192circle expansion (matches platform 0.12s ease-out)
+  var OUTER_W = 6, OUTER_H = 18, OUTER_RX = 4;
+  var HOVER_OUTER = 20, HOVER_OUTER_RX = 10;
+  var HOVER_INNER = 14, HOVER_INNER_RX = 7;
+  var PORT_ANIM_MS = 120; // matches platform transition duration
+
+  // Tween an SVG rect from current attrs to target attrs
+  function tweenRect(el, target, duration, onDone) {
+    if (!el) { if (onDone) onDone(); return; }
+    var start = {
+      x: parseFloat(el.getAttribute('x')),
+      y: parseFloat(el.getAttribute('y')),
+      w: parseFloat(el.getAttribute('width')),
+      h: parseFloat(el.getAttribute('height')),
+      rx: parseFloat(el.getAttribute('rx'))
+    };
+    var t0 = null;
+    var frameId = el.__tweenFrame;
+    if (frameId) cancelAnimationFrame(frameId);
+    function step(ts) {
+      if (!t0) t0 = ts;
+      var p = Math.min((ts - t0) / duration, 1);
+      // ease-out: cubic
+      var e = 1 - Math.pow(1 - p, 3);
+      el.setAttribute('x', String(start.x + (target.x - start.x) * e));
+      el.setAttribute('y', String(start.y + (target.y - start.y) * e));
+      el.setAttribute('width', String(start.w + (target.w - start.w) * e));
+      el.setAttribute('height', String(start.h + (target.h - start.h) * e));
+      el.setAttribute('rx', String(start.rx + (target.rx - start.rx) * e));
+      if (p < 1) {
+        el.__tweenFrame = requestAnimationFrame(step);
+      } else {
+        el.__tweenFrame = null;
+        if (onDone) onDone();
+      }
+    }
+    el.__tweenFrame = requestAnimationFrame(step);
+  }
+
   content.querySelectorAll('[data-port-id]').forEach(function(portEl) {
     var portId = portEl.getAttribute('data-port-id');
     var nodeId = portId.split('.')[0];
     var peers = (portConnections[portId] || []).concat(portId);
 
+    var origX = parseFloat(portEl.getAttribute('x'));
+    var origY = parseFloat(portEl.getAttribute('y'));
+    var innerBar = portEl.nextElementSibling;
+    var hasInner = innerBar && innerBar.getAttribute('pointer-events') === 'none';
+    var innerOrig = hasInner ? {
+      x: parseFloat(innerBar.getAttribute('x')),
+      y: parseFloat(innerBar.getAttribute('y')),
+      w: parseFloat(innerBar.getAttribute('width')),
+      h: parseFloat(innerBar.getAttribute('height')),
+      rx: parseFloat(innerBar.getAttribute('rx'))
+    } : null;
+
+    var cx = origX + OUTER_W / 2;
+    var cy = origY + OUTER_H / 2;
+
     portEl.addEventListener('mouseenter', function() {
       hoveredPort = portId;
+      if (portEl.tagName === 'rect') {
+        tweenRect(portEl, {
+          x: cx - HOVER_OUTER / 2, y: cy - HOVER_OUTER / 2,
+          w: HOVER_OUTER, h: HOVER_OUTER, rx: HOVER_OUTER_RX
+        }, PORT_ANIM_MS);
+        if (hasInner) {
+          tweenRect(innerBar, {
+            x: cx - HOVER_INNER / 2, y: cy - HOVER_INNER / 2,
+            w: HOVER_INNER, h: HOVER_INNER, rx: HOVER_INNER_RX
+          }, PORT_ANIM_MS);
+        }
+      }
       batchLabelChanges(function() {
         hideLabelsFor(nodeId);
         peers.forEach(showLabel);
@@ -52228,6 +52102,18 @@ circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor);
     });
     portEl.addEventListener('mouseleave', function() {
       hoveredPort = null;
+      if (portEl.tagName === 'rect') {
+        tweenRect(portEl, {
+          x: origX, y: origY,
+          w: OUTER_W, h: OUTER_H, rx: OUTER_RX
+        }, PORT_ANIM_MS);
+        if (hasInner) {
+          tweenRect(innerBar, {
+            x: innerOrig.x, y: innerOrig.y,
+            w: innerOrig.w, h: innerOrig.h, rx: innerOrig.rx
+          }, PORT_ANIM_MS);
+        }
+      }
       // Defer so if entering another port, its mouseenter sets hoveredPort first
       var myPeers = peers, myNodeId = nodeId;
       Promise.resolve().then(function() {
@@ -52272,7 +52158,7 @@ circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor);
     if (!selectedPortId) return;
     selectedPortId = null;
     document.body.classList.remove('port-active');
-    content.querySelectorAll('circle.port-selected').forEach(function(c) {
+    content.querySelectorAll('.port-selected').forEach(function(c) {
       c.classList.remove('port-selected');
     });
     content.querySelectorAll('[data-source].dimmed, [data-source].highlighted').forEach(function(p) {
@@ -52697,7 +52583,7 @@ async function diagramCommand(input, options = {}) {
   if (ASCII_FORMATS.has(format)) {
     result = fileToASCII(filePath, { ...diagramOptions, format });
   } else if (format === "html") {
-    result = fileToHTML(filePath, diagramOptions);
+    result = fileToHTML(filePath, { ...diagramOptions, format });
   } else {
     result = fileToSVG(filePath, diagramOptions);
   }
@@ -89256,7 +89142,7 @@ function parseIntStrict(value) {
 // src/cli/index.ts
 init_logger();
 init_error_utils();
-var version2 = true ? "0.33.1" : "0.0.0-dev";
+var version2 = true ? "0.33.2" : "0.0.0-dev";
 var program2 = new Command();
 program2.name("fw").description("Flow Weaver Annotations - Compile and validate workflow files").option("-v, --version", "Output the current version").option("--no-color", "Disable colors").option("--color", "Force colors").on("option:version", () => {
   logger.banner(version2);