npm - @synergenius/flow-weaver - Versions diffs - 0.9.5 → 0.10.0 - Mend

@synergenius/flow-weaver 0.9.5 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/cli/flow-weaver.mjs +399 -97
package/dist/diagram/html-viewer.d.ts +2 -1
package/dist/diagram/html-viewer.js +401 -99
package/dist/diagram/renderer.js +8 -0
package/package.json +1 -1

package/dist/cli/flow-weaver.mjs CHANGED Viewed

@@ -61049,6 +61049,13 @@ function renderSVG(graph, options = {}) {
     }
   }
   parts2.push(`</g>`);
+  const wmX = vbX + vbWidth - 16;
+  const wmY = vbY + vbHeight - 14;
+  const wmBrand = themeName === "dark" ? "#8e9eff" : "#5468ff";
+  parts2.push(`<g opacity="0.5">`);
+  parts2.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>`);
+  parts2.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>`);
+  parts2.push(`</g>`);
   parts2.push(`</svg>`);
   return parts2.join("\n");
 }
@@ -61187,16 +61194,20 @@ function renderPortLabels(parts2, nodeId, inputs, outputs, theme, themeName) {
 }
 // src/diagram/html-viewer.ts
-function stripSvgBackground(svg) {
-  let result = svg.replace(/<pattern\s+id="dot-grid"[^>]*>[\s\S]*?<\/pattern>/g, "");
-  result = result.replace(/<rect[^>]*fill="url\(#dot-grid\)"[^>]*\/>/g, "");
-  result = result.replace(/(<\/defs>\n)<rect[^>]*\/>\n/, "$1");
-  return result;
+function prepareSvgContent(svg) {
+  const vbMatch = svg.match(/viewBox="([^"]+)"/);
+  const viewBox = vbMatch ? vbMatch[1] : "0 0 800 600";
+  let inner = svg.replace(/<svg[^>]*>\n?/, "").replace(/<\/svg>\s*$/, "");
+  inner = inner.replace(/<pattern\s+id="dot-grid"[^>]*>[\s\S]*?<\/pattern>/g, "");
+  inner = inner.replace(/<rect[^>]*fill="url\(#dot-grid\)"[^>]*\/>/g, "");
+  inner = inner.replace(/(<\/defs>\n)<rect[^>]*\/>\n/, "$1");
+  inner = inner.replace(/<g opacity="0\.5">[\s\S]*?Flow Weaver<\/text>\s*<\/g>/, "");
+  return { inner, viewBox };
 }
 function wrapSVGInHTML(svgContent, options = {}) {
   const title = options.title ?? "Workflow Diagram";
   const theme = options.theme ?? "dark";
-  const svg = stripSvgBackground(svgContent);
+  const { inner, viewBox } = prepareSvgContent(svgContent);
   const isDark = theme === "dark";
   const bg = isDark ? "#202139" : "#f6f7ff";
   const dotColor = isDark ? "rgba(142, 158, 255, 0.6)" : "rgba(84, 104, 255, 0.6)";
@@ -61206,6 +61217,7 @@ function wrapSVGInHTML(svgContent, options = {}) {
   const textMed = isDark ? "#babac0" : "#606060";
   const textLow = isDark ? "#767682" : "#999999";
   const surfaceHigh = isDark ? "#313143" : "#f0f0f5";
+  const brandAccent = isDark ? "#8e9eff" : "#5468ff";
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -61217,25 +61229,16 @@ function wrapSVGInHTML(svgContent, options = {}) {
 body {
   width: 100vw; height: 100vh; overflow: hidden;
-  background: ${bg};
   font-family: Montserrat, 'Segoe UI', Roboto, sans-serif;
   color: ${textHigh};
 }
-#viewport {
-  width: 100%; height: 100%;
-  overflow: hidden; cursor: grab;
+#canvas {
+  display: block; width: 100%; height: 100%;
+  cursor: grab;
   touch-action: none; user-select: none;
-  background-image: radial-gradient(circle, ${dotColor} 7.5%, transparent 7.5%);
-  background-size: 20px 20px;
-}
-#viewport.dragging { cursor: grabbing; }
-#content {
-  transform-origin: 0 0;
-  will-change: transform;
 }
-#content svg { display: block; width: auto; height: auto; }
+#canvas.dragging { cursor: grabbing; }
 /* Port labels: hidden by default, shown on node hover */
 .nodes > g .port-label,
@@ -61244,16 +61247,36 @@ body {
   opacity: 0; pointer-events: none;
   transition: opacity 0.15s ease-in-out;
 }
-/* Show port labels for hovered node */
-.nodes > g:hover ~ .show-port-labels .port-label,
-.nodes > g:hover ~ .show-port-labels .port-type-label { opacity: 1; }
 /* Connection hover & dimming (attribute selector covers both main and scope connections) */
 path[data-source] { transition: opacity 0.2s ease, stroke-width 0.15s ease; }
 path[data-source]:hover { stroke-width: 4; cursor: pointer; }
-body.node-active path[data-source].dimmed { opacity: 0.15; }
+body.node-active path[data-source].dimmed,
+body.port-active path[data-source].dimmed { opacity: 0.1; }
+body.port-hovered path[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-click highlighting */
+path[data-source].highlighted { opacity: 1; }
+circle[data-port-id].port-selected { filter: drop-shadow(0 0 6px currentColor); stroke-width: 4; }
-/* Node hover glow */
+/* Node selection glow */
+@keyframes select-pop {
+  0% { opacity: 0; stroke-width: 0; }
+  50% { opacity: 0.6; stroke-width: 12; }
+  100% { opacity: 0.35; stroke-width: 8; }
+}
+.node-glow { fill: none; pointer-events: none; animation: select-pop 0.3s ease-out forwards; }
+/* Port hover path highlight */
+path[data-source].port-hover { opacity: 1; }
+/* Node hover glow + draggable cursor */
+.nodes g[data-node-id] { cursor: grab; }
+.nodes g[data-node-id]:active { cursor: grabbing; }
 .nodes g[data-node-id]:hover > rect:first-of-type { filter: brightness(1.08); }
 /* Zoom controls */
@@ -61279,7 +61302,7 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
 /* Info panel */
 #info-panel {
-  position: fixed; bottom: 16px; left: 16px;
+  position: fixed; bottom: 52px; left: 16px;
   max-width: 320px; min-width: 200px;
   background: ${surfaceMain}; border: 1px solid ${borderSubtle};
   border-radius: 8px; padding: 12px 16px;
@@ -61299,6 +61322,19 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
 #info-panel .port-list li { padding: 1px 0; }
 #info-panel .port-list li::before { content: '\\2022'; margin-right: 6px; color: ${textLow}; }
+/* Branding badge */
+#branding {
+  position: fixed; bottom: 16px; left: 16px;
+  display: flex; align-items: center; gap: 6px;
+  background: ${surfaceMain}; border: 1px solid ${borderSubtle};
+  border-radius: 8px; padding: 6px 12px;
+  font-size: 12px; font-weight: 600; color: ${textMed};
+  text-decoration: none; z-index: 9;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+  transition: color 0.15s, border-color 0.15s;
+}
+#branding:hover { color: ${textHigh}; border-color: ${textLow}; }
 /* Scroll hint */
 #scroll-hint {
   position: fixed; top: 50%; left: 50%;
@@ -61318,9 +61354,16 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
 </style>
 </head>
 <body>
-<div id="viewport">
-  <div id="content">${svg}</div>
-</div>
+<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"/>
+    </pattern>
+  </defs>
+  <rect x="-100000" y="-100000" width="200000" height="200000" fill="${bg}"/>
+  <rect x="-100000" y="-100000" width="200000" height="200000" fill="url(#viewer-dots)"/>
+  <g id="diagram">${inner}</g>
+</svg>
 <div id="controls">
   <button class="ctrl-btn" id="btn-in" title="Zoom in" aria-label="Zoom in">+</button>
   <span id="zoom-label">100%</span>
@@ -61336,23 +61379,33 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
   <h3 id="info-title"></h3>
   <div id="info-body"></div>
 </div>
+<a id="branding" href="https://flowweaver.ai" target="_blank" rel="noopener">
+  <svg width="16" height="16" viewBox="0 0 256 256" fill="none"><path d="M80 128C134 128 122 49 176 49" stroke="${brandAccent}" stroke-width="14" stroke-linecap="round"/><path d="M80 128C134 128 122 207 176 207" stroke="${brandAccent}" stroke-width="14" stroke-linecap="round"/><rect x="28" y="102" width="52" height="52" rx="10" stroke="${brandAccent}" stroke-width="14"/><rect x="176" y="23" width="52" height="52" rx="10" stroke="${brandAccent}" stroke-width="14"/><rect x="176" y="181" width="52" height="52" rx="10" stroke="${brandAccent}" stroke-width="14"/></svg>
+  <span>Flow Weaver</span>
+</a>
 <div id="scroll-hint">Use <kbd id="mod-key">Ctrl</kbd> + scroll to zoom</div>
 <script>
 (function() {
   'use strict';
-  var MIN_ZOOM = 0.25, MAX_ZOOM = 3, GRID_SIZE = 20;
-  var viewport = document.getElementById('viewport');
-  var content = document.getElementById('content');
+  var MIN_ZOOM = 0.25, MAX_ZOOM = 3;
+  var canvas = document.getElementById('canvas');
+  var content = document.getElementById('diagram');
   var zoomLabel = document.getElementById('zoom-label');
   var infoPanel = document.getElementById('info-panel');
   var infoTitle = document.getElementById('info-title');
   var infoBody = document.getElementById('info-body');
   var scrollHint = document.getElementById('scroll-hint');
-  var scale = 1, tx = 0, ty = 0;
-  var dragging = false, dragLast = { x: 0, y: 0 };
+  // Parse the original viewBox (diagram bounding box)
+  var vbParts = '${viewBox}'.split(/\\s+/).map(Number);
+  var origX = vbParts[0], origY = vbParts[1], origW = vbParts[2], origH = vbParts[3];
+  var vbX = origX, vbY = origY, vbW = origW, vbH = origH;
+  var baseW = origW; // reference width for 100% zoom
+  var pointerDown = false, didDrag = false, dragLast = { x: 0, y: 0 };
   var selectedNodeId = null;
+  var selectedPortId = null;
   var hintTimer = null;
   // Detect Mac for modifier key
@@ -61361,29 +61414,34 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
   function clamp(v, min, max) { return Math.min(max, Math.max(min, v)); }
-  function applyTransform() {
-    content.style.transform = 'translate(' + tx + 'px,' + ty + 'px) scale(' + scale + ')';
-    viewport.style.backgroundSize = (GRID_SIZE * scale) + 'px ' + (GRID_SIZE * scale) + 'px';
-    viewport.style.backgroundPosition = tx + 'px ' + ty + 'px';
-    zoomLabel.textContent = Math.round(scale * 100) + '%';
+  function applyViewBox() {
+    canvas.setAttribute('viewBox', vbX + ' ' + vbY + ' ' + vbW + ' ' + vbH);
+    zoomLabel.textContent = Math.round(baseW / vbW * 100) + '%';
   }
   function fitToView() {
-    var svgEl = content.querySelector('svg');
-    if (!svgEl) { scale = 1; tx = 0; ty = 0; applyTransform(); return; }
-    var ww = viewport.clientWidth, wh = viewport.clientHeight;
-    var sw = svgEl.width.baseVal.value || svgEl.getBoundingClientRect().width;
-    var sh = svgEl.height.baseVal.value || svgEl.getBoundingClientRect().height;
-    var padding = 60;
-    var fitScale = Math.min((ww - padding) / sw, (wh - padding) / sh, 1);
-    scale = fitScale;
-    tx = (ww - sw * fitScale) / 2;
-    ty = (wh - sh * fitScale) / 2;
-    applyTransform();
+    var pad = 60;
+    var cw = canvas.clientWidth, ch = canvas.clientHeight;
+    if (!cw || !ch) return;
+    var dw = origW + pad * 2, dh = origH + pad * 2;
+    var vpRatio = cw / ch;
+    var dRatio = dw / dh;
+    if (vpRatio > dRatio) {
+      vbH = dh; vbW = dh * vpRatio;
+    } else {
+      vbW = dw; vbH = dw / vpRatio;
+    }
+    vbX = origX - pad - (vbW - dw) / 2;
+    vbY = origY - pad - (vbH - dh) / 2;
+    baseW = vbW;
+    applyViewBox();
   }
+  // Convert pixel delta to SVG coordinate delta
+  function pxToSvg() { return vbW / canvas.clientWidth; }
   // ---- Zoom (Ctrl/Cmd + scroll) ----
-  viewport.addEventListener('wheel', function(e) {
+  canvas.addEventListener('wheel', function(e) {
     if (!e.ctrlKey && !e.metaKey) {
       scrollHint.classList.add('visible');
       clearTimeout(hintTimer);
@@ -61391,48 +61449,100 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
       return;
     }
     e.preventDefault();
-    var rect = viewport.getBoundingClientRect();
-    var cx = e.clientX - rect.left, cy = e.clientY - rect.top;
-    var oldScale = scale;
+    var rect = canvas.getBoundingClientRect();
+    var mx = (e.clientX - rect.left) / rect.width;
+    var my = (e.clientY - rect.top) / rect.height;
+    var pivotX = vbX + mx * vbW;
+    var pivotY = vbY + my * vbH;
     var delta = clamp(e.deltaY, -10, 10);
-    var newScale = clamp(oldScale - delta * 0.005, MIN_ZOOM, MAX_ZOOM);
-    var contentX = (cx - tx) / oldScale, contentY = (cy - ty) / oldScale;
-    tx = cx - contentX * newScale;
-    ty = cy - contentY * newScale;
-    scale = newScale;
-    applyTransform();
+    var factor = 1 + delta * 0.005;
+    var newW = clamp(vbW * factor, baseW / MAX_ZOOM, baseW / MIN_ZOOM);
+    var ratio = vbH / vbW;
+    var newH = newW * ratio;
+    vbX = pivotX - mx * newW;
+    vbY = pivotY - my * newH;
+    vbW = newW; vbH = newH;
+    applyViewBox();
   }, { passive: false });
-  // ---- Pan (drag) ----
-  viewport.addEventListener('pointerdown', function(e) {
+  // ---- Pan (drag) + Node drag ----
+  var draggedNodeId = null, dragNodeStart = null, didDragNode = false;
+  canvas.addEventListener('pointerdown', function(e) {
     if (e.button !== 0) return;
-    dragging = true;
+    // Check if clicking on a node body (walk up to detect data-node-id)
+    var t = e.target;
+    while (t && t !== canvas) {
+      if (t.hasAttribute && t.hasAttribute('data-node-id')) {
+        // Don't start node drag if clicking on a port circle
+        if (e.target.hasAttribute && e.target.hasAttribute('data-port-id')) break;
+        draggedNodeId = t.getAttribute('data-node-id');
+        dragNodeStart = { x: e.clientX, y: e.clientY };
+        didDragNode = false;
+        canvas.setPointerCapture(e.pointerId);
+        return;
+      }
+      t = t.parentElement;
+    }
+    // Canvas pan
+    pointerDown = true;
+    didDrag = false;
     dragLast = { x: e.clientX, y: e.clientY };
-    viewport.setPointerCapture(e.pointerId);
-    viewport.classList.add('dragging');
+    canvas.setPointerCapture(e.pointerId);
   });
-  viewport.addEventListener('pointermove', function(e) {
-    if (!dragging) return;
-    tx += e.clientX - dragLast.x;
-    ty += e.clientY - dragLast.y;
+  canvas.addEventListener('pointermove', function(e) {
+    var ratio = pxToSvg();
+    // Node drag
+    if (draggedNodeId) {
+      var dx = (e.clientX - dragNodeStart.x) * ratio;
+      var dy = (e.clientY - dragNodeStart.y) * ratio;
+      if (!didDragNode && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+        didDragNode = true;
+        canvas.classList.add('dragging');
+      }
+      if (didDragNode) {
+        moveNode(draggedNodeId, dx, dy);
+      }
+      dragNodeStart = { x: e.clientX, y: e.clientY };
+      return;
+    }
+    // Canvas pan \u2014 shift the viewBox origin
+    if (!pointerDown) return;
+    var dxPx = e.clientX - dragLast.x, dyPx = e.clientY - dragLast.y;
+    if (!didDrag && (Math.abs(dxPx) > 3 || Math.abs(dyPx) > 3)) {
+      didDrag = true;
+      canvas.classList.add('dragging');
+    }
+    if (didDrag) {
+      vbX -= dxPx * ratio;
+      vbY -= dyPx * ratio;
+      applyViewBox();
+    }
     dragLast = { x: e.clientX, y: e.clientY };
-    applyTransform();
   });
-  function endDrag() { dragging = false; viewport.classList.remove('dragging'); }
-  viewport.addEventListener('pointerup', endDrag);
-  viewport.addEventListener('pointercancel', endDrag);
+  function endDrag() {
+    pointerDown = false;
+    draggedNodeId = null;
+    canvas.classList.remove('dragging');
+  }
+  canvas.addEventListener('pointerup', endDrag);
+  canvas.addEventListener('pointercancel', endDrag);
   // ---- Zoom buttons ----
   function zoomBy(dir) {
-    var rect = viewport.getBoundingClientRect();
-    var cx = rect.width / 2, cy = rect.height / 2;
-    var oldScale = scale;
-    var newScale = clamp(oldScale + dir * 0.15 * oldScale, MIN_ZOOM, MAX_ZOOM);
-    var contentX = (cx - tx) / oldScale, contentY = (cy - ty) / oldScale;
-    tx = cx - contentX * newScale;
-    ty = cy - contentY * newScale;
-    scale = newScale;
-    applyTransform();
+    var cx = vbX + vbW / 2, cy = vbY + vbH / 2;
+    var factor = dir > 0 ? 0.85 : 1.18;
+    var newW = clamp(vbW * factor, baseW / MAX_ZOOM, baseW / MIN_ZOOM);
+    var ratio = vbH / vbW;
+    var newH = newW * ratio;
+    vbX = cx - newW / 2;
+    vbY = cy - newH / 2;
+    vbW = newW; vbH = newH;
+    applyViewBox();
   }
   document.getElementById('btn-in').addEventListener('click', function() { zoomBy(1); });
   document.getElementById('btn-out').addEventListener('click', function() { zoomBy(-1); });
@@ -61444,7 +61554,7 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     if (e.key === '+' || e.key === '=') zoomBy(1);
     else if (e.key === '-') zoomBy(-1);
     else if (e.key === '0') fitToView();
-    else if (e.key === 'Escape') deselectNode();
+    else if (e.key === 'Escape') { deselectPort(); deselectNode(); }
   });
   // ---- Port label visibility ----
@@ -61453,7 +61563,7 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     labelMap[lbl.getAttribute('data-port-label')] = lbl;
   });
-  // Build adjacency: portId \u2192 array of connected portIds
+  // Build adjacency: portId -> array of connected portIds
   var portConnections = {};
   content.querySelectorAll('path[data-source]').forEach(function(p) {
     var src = p.getAttribute('data-source');
@@ -61465,6 +61575,125 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     portConnections[tgt].push(src);
   });
+  // ---- Connection path computation (from geometry.ts) ----
+  function quadCurveControl(ax, ay, bx, by, ux, uy) {
+    var dn = Math.abs(ay - by);
+    return [bx + (ux * dn) / Math.abs(uy), ay];
+  }
+  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;
+  }
+  // ---- Port position + connection path indexes ----
+  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')) };
+  });
+  var nodeOffsets = {};
+  var connIndex = [];
+  content.querySelectorAll('path[data-source]').forEach(function(p) {
+    var src = p.getAttribute('data-source'), tgt = p.getAttribute('data-target');
+    connIndex.push({ el: p, src: src, tgt: tgt, srcNode: src.split('.')[0], tgtNode: tgt.split('.')[0] });
+  });
+  // ---- Node drag: moveNode ----
+  function moveNode(nodeId, dx, dy) {
+    if (!nodeOffsets[nodeId]) nodeOffsets[nodeId] = { dx: 0, dy: 0 };
+    var off = nodeOffsets[nodeId];
+    off.dx += dx; off.dy += dy;
+    var tr = 'translate(' + off.dx + ',' + off.dy + ')';
+    // Move node group
+    var nodeG = content.querySelector('.nodes [data-node-id="' + CSS.escape(nodeId) + '"]');
+    if (nodeG) nodeG.setAttribute('transform', tr);
+    // Move label
+    var labelG = content.querySelector('[data-label-for="' + CSS.escape(nodeId) + '"]');
+    if (labelG) labelG.setAttribute('transform', tr);
+    // Move port labels
+    allLabelIds.forEach(function(id) {
+      if (id.indexOf(nodeId + '.') === 0) {
+        var el = labelMap[id];
+        if (el) el.setAttribute('transform', tr);
+      }
+    });
+    // Update port positions
+    for (var pid in portPositions) {
+      if (pid.indexOf(nodeId + '.') === 0) {
+        portPositions[pid].cx += dx;
+        portPositions[pid].cy += dy;
+      }
+    }
+    // Move child nodes inside scoped parents
+    if (nodeG) {
+      var children = nodeG.querySelectorAll(':scope > g[data-node-id]');
+      children.forEach(function(childG) {
+        var childId = childG.getAttribute('data-node-id');
+        if (!nodeOffsets[childId]) nodeOffsets[childId] = { dx: 0, dy: 0 };
+        nodeOffsets[childId].dx += dx;
+        nodeOffsets[childId].dy += dy;
+        for (var pid in portPositions) {
+          if (pid.indexOf(childId + '.') === 0) {
+            portPositions[pid].cx += dx;
+            portPositions[pid].cy += dy;
+          }
+        }
+        var childLabel = content.querySelector('[data-label-for="' + CSS.escape(childId) + '"]');
+        if (childLabel) childLabel.setAttribute('transform', 'translate(' + nodeOffsets[childId].dx + ',' + nodeOffsets[childId].dy + ')');
+        allLabelIds.forEach(function(id) {
+          if (id.indexOf(childId + '.') === 0) {
+            var el = labelMap[id];
+            if (el) el.setAttribute('transform', 'translate(' + nodeOffsets[childId].dx + ',' + nodeOffsets[childId].dy + ')');
+          }
+        });
+      });
+    }
+    // Recalculate affected connection paths
+    connIndex.forEach(function(c) {
+      if (c.srcNode === nodeId || c.tgtNode === nodeId) {
+        var sp = portPositions[c.src], tp = portPositions[c.tgt];
+        if (sp && tp) c.el.setAttribute('d', computeConnectionPath(sp.cx, sp.cy, tp.cx, tp.cy));
+      }
+      if (nodeG) {
+        var children = nodeG.querySelectorAll(':scope > g[data-node-id]');
+        children.forEach(function(childG) {
+          var childId = childG.getAttribute('data-node-id');
+          if (c.srcNode === childId || c.tgtNode === childId) {
+            var sp = portPositions[c.src], tp = portPositions[c.tgt];
+            if (sp && tp) c.el.setAttribute('d', computeConnectionPath(sp.cx, sp.cy, tp.cx, tp.cy));
+          }
+        });
+      }
+    });
+  }
   var allLabelIds = Object.keys(labelMap);
   var hoveredPort = null;
@@ -61489,7 +61718,7 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     var parentNodeG = nodeG.parentElement ? nodeG.parentElement.closest('g[data-node-id]') : null;
     var parentId = parentNodeG ? parentNodeG.getAttribute('data-node-id') : null;
     nodeG.addEventListener('mouseenter', function() {
-      if (hoveredPort) return; // port hover takes priority
+      if (hoveredPort) return;
       if (parentId) hideLabelsFor(parentId);
       showLabelsFor(nodeId);
     });
@@ -61508,24 +61737,93 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     portEl.addEventListener('mouseenter', function() {
       hoveredPort = portId;
-      // Hide all labels for this node first, then show only the relevant ones
       hideLabelsFor(nodeId);
       peers.forEach(showLabel);
+      document.body.classList.add('port-hovered');
+      content.querySelectorAll('path[data-source]').forEach(function(p) {
+        if (p.getAttribute('data-source') === portId || p.getAttribute('data-target') === portId) {
+          p.classList.remove('dimmed');
+        } else {
+          p.classList.add('dimmed');
+        }
+      });
     });
     portEl.addEventListener('mouseleave', function() {
       hoveredPort = null;
       peers.forEach(hideLabel);
-      // Restore all labels for the node since we're still inside it
       showLabelsFor(nodeId);
+      document.body.classList.remove('port-hovered');
+      content.querySelectorAll('path[data-source].dimmed').forEach(function(p) {
+        p.classList.remove('dimmed');
+      });
     });
   });
+  // ---- Node glow helpers ----
+  function removeNodeGlow() {
+    var glow = content.querySelector('.node-glow');
+    if (glow) glow.remove();
+  }
+  function addNodeGlow(nodeG) {
+    removeNodeGlow();
+    var rect = nodeG.querySelector('rect');
+    if (!rect) return;
+    var ns = 'http://www.w3.org/2000/svg';
+    var glow = document.createElementNS(ns, 'rect');
+    glow.setAttribute('x', rect.getAttribute('x'));
+    glow.setAttribute('y', rect.getAttribute('y'));
+    glow.setAttribute('width', rect.getAttribute('width'));
+    glow.setAttribute('height', rect.getAttribute('height'));
+    glow.setAttribute('rx', rect.getAttribute('rx') || '0');
+    glow.setAttribute('stroke', rect.getAttribute('stroke') || '#5468ff');
+    glow.setAttribute('class', 'node-glow');
+    nodeG.insertBefore(glow, rect);
+  }
+  // ---- Port selection ----
+  function deselectPort() {
+    if (!selectedPortId) return;
+    selectedPortId = null;
+    document.body.classList.remove('port-active');
+    content.querySelectorAll('circle.port-selected').forEach(function(c) {
+      c.classList.remove('port-selected');
+    });
+    content.querySelectorAll('path[data-source].dimmed, path[data-source].highlighted').forEach(function(p) {
+      p.classList.remove('dimmed');
+      p.classList.remove('highlighted');
+    });
+  }
+  function selectPort(portId) {
+    if (selectedPortId === portId) { deselectPort(); return; }
+    if (selectedNodeId) deselectNode();
+    deselectPort();
+    selectedPortId = portId;
+    document.body.classList.add('port-active');
+    var portEl = content.querySelector('[data-port-id="' + CSS.escape(portId) + '"]');
+    if (portEl) portEl.classList.add('port-selected');
+    content.querySelectorAll('path[data-source]').forEach(function(p) {
+      if (p.getAttribute('data-source') === portId || p.getAttribute('data-target') === portId) {
+        p.classList.add('highlighted');
+      } else {
+        p.classList.add('dimmed');
+      }
+    });
+    var peers = (portConnections[portId] || []).concat(portId);
+    peers.forEach(showLabel);
+  }
   // ---- Click to inspect node ----
   function deselectNode() {
     selectedNodeId = null;
     document.body.classList.remove('node-active');
     infoPanel.classList.remove('visible');
-    content.querySelectorAll('.connections path.dimmed').forEach(function(p) {
+    removeNodeGlow();
+    content.querySelectorAll('path[data-source].dimmed').forEach(function(p) {
       p.classList.remove('dimmed');
     });
   }
@@ -61535,8 +61833,9 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     selectedNodeId = nodeId;
     document.body.classList.add('node-active');
-    // Gather info
     var nodeG = content.querySelector('[data-node-id="' + CSS.escape(nodeId) + '"]');
+    addNodeGlow(nodeG);
     var labelG = content.querySelector('[data-label-for="' + CSS.escape(nodeId) + '"]');
     var labelText = labelG ? (labelG.querySelector('.node-label') || {}).textContent || nodeId : nodeId;
@@ -61553,7 +61852,6 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     // Connected paths
     var allPaths = content.querySelectorAll('path[data-source]');
-    var connectedPaths = [];
     var connectedNodes = new Set();
     allPaths.forEach(function(p) {
       var src = p.getAttribute('data-source') || '';
@@ -61561,7 +61859,6 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
       var srcNode = src.split('.')[0];
       var tgtNode = tgt.split('.')[0];
       if (srcNode === nodeId || tgtNode === nodeId) {
-        connectedPaths.push(p);
         if (srcNode !== nodeId) connectedNodes.add(srcNode);
         if (tgtNode !== nodeId) connectedNodes.add(tgtNode);
         p.classList.remove('dimmed');
@@ -61596,20 +61893,25 @@ body.node-active path[data-source].dimmed { opacity: 0.15; }
     return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
   }
-  // Delegate click on node groups
-  viewport.addEventListener('click', function(e) {
-    if (dragging) return;
+  // Delegate click: port click > node click > background
+  canvas.addEventListener('click', function(e) {
+    if (didDrag || didDragNode) { didDragNode = false; return; }
     var target = e.target;
-    // Walk up to find a [data-node-id] ancestor within #content
-    while (target && target !== viewport) {
+    while (target && target !== canvas) {
+      if (target.hasAttribute && target.hasAttribute('data-port-id')) {
+        e.stopPropagation();
+        selectPort(target.getAttribute('data-port-id'));
+        return;
+      }
       if (target.hasAttribute && target.hasAttribute('data-node-id')) {
         e.stopPropagation();
+        deselectPort();
         selectNode(target.getAttribute('data-node-id'));
         return;
       }
       target = target.parentElement;
     }
-    // Clicked on background
+    deselectPort();
     deselectNode();
   });
@@ -96210,7 +96512,7 @@ function displayInstalledPackage(pkg) {
 }
 // src/cli/index.ts
-var version2 = true ? "0.9.5" : "0.0.0-dev";
+var version2 = true ? "0.10.0" : "0.0.0-dev";
 var program2 = new Command();
 program2.name("flow-weaver").description("Flow Weaver Annotations - Compile and validate workflow files").version(version2, "-v, --version", "Output the current version");
 program2.configureOutput({