@synergenius/flow-weaver 0.33.1 → 0.33.2

package/dist/diagram/geometry.d.ts

@@ -11,11 +11,11 @@ export declare const LAYER_GAP_X = 300;
 export declare const LABEL_CLEARANCE = 42;
 export declare const MIN_EDGE_GAP = 112;
 export declare const NODE_GAP_Y = 60;
-export declare const LABEL_HEIGHT = 20;
+export declare const LABEL_HEIGHT = 24;
 export declare const LABEL_GAP = 12;
 export declare const SCOPE_PADDING_X = 140;
 export declare const SCOPE_PADDING_Y = 40;
-export declare const SCOPE_PORT_COLUMN = 50;
+export declare const SCOPE_PORT_COLUMN = 45;
 export declare const SCOPE_INNER_GAP_X = 240;
 export declare const ORTHOGONAL_DISTANCE_THRESHOLD = 300;
 export declare const STUB_DISTANCE_THRESHOLD = 500;
@@ -26,6 +26,11 @@ export declare function measureText(text: string): number;
 export declare function portBadgeWidth(port: DiagramPort): number;
 export declare function computeNodeDimensions(node: DiagramNode): void;
 export declare function computePortPositions(node: DiagramNode): void;
+/**
+ * Compute a quad-curve connection from B towards D with consistent tangent.
+ * U is a unit vector from B to C with the same slope as B→D.
+ */
+/** Straight-line fallback when orthogonal routing fails (matches platform behaviour). */
 export declare function computeConnectionPath(sx: number, sy: number, tx: number, ty: number): string;
 export declare function buildDiagramGraph(ast: TWorkflowAST, options?: DiagramOptions): DiagramGraph;
 //# sourceMappingURL=geometry.d.ts.map

package/dist/diagram/geometry.js

@@ -15,12 +15,12 @@ export const LAYER_GAP_X = 300; // target center-to-center; actual gap adapts to
 export const LABEL_CLEARANCE = 42; // breathing room between opposing port label badges
 export const MIN_EDGE_GAP = 112; // minimum edge-to-edge gap between node boxes
 export const NODE_GAP_Y = 60;
-export const LABEL_HEIGHT = 20; // 13px font + padding
+export const LABEL_HEIGHT = 24; // 18px font + breathing room
 export const LABEL_GAP = 12; // matches labelRootStyle bottom: calc(100% + 12px)
 // Scope rendering constants
 export const SCOPE_PADDING_X = 140; // horizontal padding inside scope (between port columns and children)
 export const SCOPE_PADDING_Y = 40; // vertical padding inside scope (top/bottom)
-export const SCOPE_PORT_COLUMN = 50; // width for scoped port column on inner edges
+export const SCOPE_PORT_COLUMN = 45; // matches platform scopeContainerStyle minWidth/maxWidth
 export const SCOPE_INNER_GAP_X = 240; // horizontal gap between children inside scope
 // Routing mode threshold — connections longer than this use orthogonal routing
 // (midpoint of original 250–350 hysteresis thresholds)
@@ -99,49 +99,9 @@ function positionPortList(ports, cx, nodeY, _nodeHeight) {
  * Compute a quad-curve connection from B towards D with consistent tangent.
  * U is a unit vector from B to C with the same slope as B→D.
  */
-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];
-}
+/** Straight-line fallback when orthogonal routing fails (matches platform behaviour). */
 export function computeConnectionPath(sx, sy, tx, ty) {
-    const e = 0.0001; // insignificant shift to avoid degenerate tangents
-    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 path = `M ${cx},${cy} M ${ax},${ay}`;
-    path += ` L ${bx},${by}`;
-    path += ` Q ${cx},${cy} ${dx},${dy}`;
-    path += ` L ${ex},${ey}`;
-    path += ` Q ${fx},${fy} ${gx},${gy}`;
-    path += ` L ${hx},${hy}`;
-    return path;
+    return `M ${sx},${sy} L ${tx},${ty}`;
 }
 // ---- Port ordering helpers ----
 /**
@@ -1028,17 +988,20 @@ export function buildDiagramGraph(ast, options = {}) {
             color: targetColor,
             dashed,
         };
+        // For static SVG, offset path endpoints past port labels so connections
+        // aren't hidden behind opaque label badges. HTML viewer has interactive
+        // labels (show/hide on hover), so paths start at port center there.
+        const isStaticSvg = options.format !== 'html';
+        const pathSx = isStaticSvg ? sx + srcLabelEnd : sx;
+        const pathTx = isStaticSvg ? tx - tgtLabelEnd : tx;
         let path;
         if (xDistance > STUB_DISTANCE_THRESHOLD) {
             // Long-distance: static SVG hides the full path, only shows stubs
             path = '';
         }
-        else if (!useCurve && distance > ORTHOGONAL_DISTANCE_THRESHOLD) {
-            const orthoPath = calculateOrthogonalPathSafe([sx, sy], [tx, ty], nodeBoxes, pc.fromNodeId, pc.toNodeId, { fromPortIndex: pc.fromPortIndex, toPortIndex: pc.toPortIndex }, allocator);
-            path = orthoPath ?? computeConnectionPath(sx, sy, tx, ty);
-        }
         else {
-            path = computeConnectionPath(sx, sy, tx, ty);
+            const orthoPath = calculateOrthogonalPathSafe([pathSx, sy], [pathTx, ty], nodeBoxes, pc.fromNodeId, pc.toNodeId, { fromPortIndex: pc.fromPortIndex, toPortIndex: pc.toPortIndex, allocator });
+            path = orthoPath ?? computeConnectionPath(pathSx, sy, pathTx, ty);
         }
         connections.push({
             fromNode: pc.fromNodeId, fromPort: pc.fromPortName,
@@ -1138,13 +1101,9 @@ export 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);
-            }
+            // Always try orthogonal routing first (matches platform style)
+            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);
         }
     }
     // Extend bounds to include connection paths (routes can go outside node area)

package/dist/diagram/html-viewer.js

@@ -74,13 +74,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 — 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 {
@@ -285,7 +284,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"/>
@@ -562,33 +561,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) ----
@@ -871,7 +846,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
@@ -1033,14 +1017,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) {
@@ -1323,14 +1302,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→circle 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);
@@ -1347,6 +1391,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() {
@@ -1391,7 +1447,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) {

package/dist/diagram/orthogonal-router.d.ts

@@ -1,17 +1,8 @@
 /**
  * Orthogonal connection router for SVG diagram rendering.
  *
- * Ported from the original React-based editor's orthogonalRouter.ts.
- * Removed gl-matrix dependency — uses plain [number, number] tuples.
- *
- * Features:
- * - L-shape and S-shape routing with rounded corners
- * - Node collision avoidance via inflated bounding boxes
- * - Track allocator prevents parallel connections from overlapping
- * - Crossing minimization (evaluates up to 11 candidates per allocation)
- * - Per-port-index stub spacing
- * - Waypoint simplification (collinear removal, jog collapse)
- * - Backward/self connection escape routing
+ * 1-1 port of the platform's orthogonalRouter.ts.
+ * Only change: removed gl-matrix dependency — uses plain [number, number] tuples.
  */
 export interface NodeBox {
     id: string;
@@ -28,52 +19,26 @@ export interface OrthogonalRouteOptions {
     maxStubLength?: number;
     fromPortIndex?: number;
     toPortIndex?: number;
+    /** When true, treat same-node connections as forward (not self-loop). Used for scoped port connections. */
+    scopedInternal?: boolean;
+    /** Track allocator for preventing connections from overlapping on the same horizontal track. */
+    allocator?: TrackAllocator;
 }
 type Vec2 = [number, number];
-type InflatedBox = {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-};
+/**
+ * Prevents connections from running on the same horizontal track.
+ * Create one instance per render batch and pass it to all routing calls.
+ * Tracks are snapped to TRACK_SPACING grid; only connections whose X corridors
+ * overlap can conflict.
+ */
 export declare class TrackAllocator {
     private claims;
-    private verticalClaims;
-    /** Check if a Y value is too close to any claimed segment whose X range overlaps. */
-    private isOccupied;
-    /** Check if an X value is too close to any claimed vertical segment whose Y range overlaps. */
-    private isOccupiedVertical;
-    /** Check if a horizontal segment at Y passes through any inflated node box. */
-    private isBlockedByNode;
-    /** Check if a vertical segment at X passes through any inflated node box. */
-    private isBlockedByNodeVertical;
-    /** Count claimed vertical segments that a horizontal segment at Y would cross. */
-    countHorizontalCrossings(xMin: number, xMax: number, y: number): number;
-    /** Count claimed horizontal segments that a vertical segment at X would cross. */
-    countVerticalCrossings(yMin: number, yMax: number, x: number): number;
-    /**
-     * 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: number, xMax: number, candidateY: number, nodeBoxes?: InflatedBox[]): number;
-    /**
-     * 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: number, yMax: number, candidateX: number, nodeBoxes?: InflatedBox[]): number;
-    /** Claim a horizontal segment so later connections avoid it. */
-    claim(xMin: number, xMax: number, y: number): void;
-    /** Claim a vertical segment so later connections avoid it. */
-    claimVertical(yMin: number, yMax: number, x: number): void;
+    claim(xMin: number, xMax: number, candidateY: number): number;
 }
+export declare function calculateOrthogonalPath(from: Vec2, to: Vec2, nodeBoxes: NodeBox[], sourceNodeId: string, targetNodeId: string, options?: OrthogonalRouteOptions): string | null;
 /**
- * Calculate an orthogonal SVG path between two ports.
- * Returns null if the path should fall back to bezier (e.g. nearly aligned ports).
- */
-export declare function calculateOrthogonalPath(from: Vec2, to: Vec2, nodeBoxes: NodeBox[], sourceNodeId: string, targetNodeId: string, options?: OrthogonalRouteOptions, allocator?: TrackAllocator): string | null;
-/**
- * Safe wrapper — returns null if routing fails, caller falls back to bezier.
+ * Safe wrapper: returns null if routing fails, caller falls back to straight line.
  */
-export declare function calculateOrthogonalPathSafe(from: Vec2, to: Vec2, nodeBoxes: NodeBox[], sourceNodeId: string, targetNodeId: string, options?: OrthogonalRouteOptions, allocator?: TrackAllocator): string | null;
+export declare function calculateOrthogonalPathSafe(from: Vec2, to: Vec2, nodeBoxes: NodeBox[], sourceNodeId: string, targetNodeId: string, options?: OrthogonalRouteOptions): string | null;
 export {};
 //# sourceMappingURL=orthogonal-router.d.ts.map