@particle-academy/fancy-flow 0.23.0 → 0.24.0

package/dist/index.cjs

@@ -81,19 +81,19 @@ function we(e, n, t, r) {
 }
 function Nn(e, n, t, r) {
   let o = {}, i, s = 0, a = e.nodes(), d = function(c) {
-    let h = t(c);
-    o[c.v].distance + h < o[c.w].distance && (o[c.w] = { distance: o[c.v].distance + h, predecessor: c.v }, i = true);
+    let h2 = t(c);
+    o[c.v].distance + h2 < o[c.w].distance && (o[c.w] = { distance: o[c.v].distance + h2, predecessor: c.v }, i = true);
   }, l = function() {
     a.forEach(function(c) {
-      r(c).forEach(function(h) {
-        let f = h.v === c ? h.v : h.w, g = f === h.v ? h.w : h.v;
+      r(c).forEach(function(h2) {
+        let f = h2.v === c ? h2.v : h2.w, g = f === h2.v ? h2.w : h2.v;
         d({ v: f, w: g });
       });
     });
   };
   a.forEach(function(c) {
-    let h = c === n ? 0 : Number.POSITIVE_INFINITY;
-    o[c] = { distance: h, predecessor: "" };
+    let h2 = c === n ? 0 : Number.POSITIVE_INFINITY;
+    o[c] = { distance: h2, predecessor: "" };
   });
   let u = a.length;
   for (let c = 1; c < u && (i = false, s++, l(), !!i); c++) ;
@@ -117,8 +117,8 @@ function F(e, n, t, r) {
 }
 function vn(e, n, t, r) {
   let o = {}, i = new Ne(), s, a, d = function(l) {
-    let u = l.v !== s ? l.v : l.w, c = o[u], h = t(l), f = a.distance + h;
-    if (h < 0) throw new Error("dijkstra does not allow negative edge weights. Bad edge: " + l + " Weight: " + h);
+    let u = l.v !== s ? l.v : l.w, c = o[u], h2 = t(l), f = a.distance + h2;
+    if (h2 < 0) throw new Error("dijkstra does not allow negative edge weights. Bad edge: " + l + " Weight: " + h2);
     f < c.distance && (c.distance = f, c.predecessor = s, i.decrease(u, f));
   };
   for (e.nodes().forEach(function(l) {
@@ -174,8 +174,8 @@ function In(e, n, t) {
     o.forEach(function(a) {
       let d = r[a];
       o.forEach(function(l) {
-        let u = d[i], c = s[l], h = d[l], f = u.distance + c.distance;
-        f < h.distance && (h.distance = f, h.predecessor = c.predecessor);
+        let u = d[i], c = s[l], h2 = d[l], f = u.distance + c.distance;
+        f < h2.distance && (h2.distance = f, h2.predecessor = c.predecessor);
       });
     });
   }), r;
@@ -268,7 +268,7 @@ function Fn(e, n, t, r) {
   }
   return F(e, n, t, r);
 }
-function w(e, n, t, r) {
+function w2(e, n, t, r) {
   let o = r;
   for (; e.hasNode(o); ) o = j(r);
   return t.dummy = n, e.setNode(o, t), o;
@@ -324,7 +324,7 @@ function Oe(e) {
 }
 function q(e, n, t, r) {
   let o = { width: 0, height: 0 };
-  return arguments.length >= 4 && (o.rank = t, o.order = r), w(e, "border", o, n);
+  return arguments.length >= 4 && (o.rank = t, o.order = r), w2(e, "border", o, n);
 }
 function Dn(e, n = Ie) {
   let t = [];
@@ -431,8 +431,8 @@ function Yn(e, n) {
   }), e.edges().forEach((a) => {
     let d = t.edge(a.v, a.w) || 0, l = n(a), u = d + l;
     t.setEdge(a.v, a.w, u);
-    let c = t.node(a.v), h = t.node(a.w);
-    o = Math.max(o, c.out += l), r = Math.max(r, h.in += l);
+    let c = t.node(a.v), h2 = t.node(a.w);
+    o = Math.max(o, c.out += l), r = Math.max(r, h2.in += l);
   });
   let i = zn(o + r + 3).map(() => new Me()), s = r + 1;
   return t.nodes().forEach((a) => {
@@ -484,7 +484,7 @@ function Xn(e, n) {
   if (i === r + 1) return;
   e.removeEdge(n);
   let l, u, c;
-  for (c = 0, ++r; r < i; ++c, ++r) a.points = [], u = { width: 0, height: 0, edgeLabel: a, edgeObj: n, rank: r }, l = w(e, "edge", u, "_d"), r === d && (u.width = a.width, u.height = a.height, u.dummy = "edge-label", u.labelpos = a.labelpos), e.setEdge(t, l, { weight: a.weight }, s), c === 0 && e.graph().dummyChains.push(l), t = l;
+  for (c = 0, ++r; r < i; ++c, ++r) a.points = [], u = { width: 0, height: 0, edgeLabel: a, edgeObj: n, rank: r }, l = w2(e, "edge", u, "_d"), r === d && (u.width = a.width, u.height = a.height, u.dummy = "edge-label", u.labelpos = a.labelpos), e.setEdge(t, l, { weight: a.weight }, s), c === 0 && e.graph().dummyChains.push(l), t = l;
   e.setEdge(t, o, { weight: a.weight }, s);
 }
 function De(e) {
@@ -557,10 +557,10 @@ function We(e, n, t) {
   return d && d.forEach((l) => {
     let u = l.v === t, c = u ? l.w : l.v;
     if (c !== o) {
-      let h = u === i, f = n.edge(l).weight;
-      if (a += h ? f : -f, rt(e, t, c)) {
+      let h2 = u === i, f = n.edge(l).weight;
+      if (a += h2 ? f : -f, rt(e, t, c)) {
         let b = e.edge(t, c).cutvalue;
-        a += h ? -b : b;
+        a += h2 ? -b : b;
       }
     }
   }), a;
@@ -665,7 +665,7 @@ function lt(e) {
   return e.children(_).forEach(r), n;
 }
 function Ke(e) {
-  let n = w(e, "root", {}, "_root"), t = ut(e), r = Object.values(t), o = L(Math.max, r) - 1, i = 2 * o + 1;
+  let n = w2(e, "root", {}, "_root"), t = ut(e), r = Object.values(t), o = L(Math.max, r) - 1, i = 2 * o + 1;
   e.graph().nestingRoot = n, e.edges().forEach((a) => e.edge(a).minlen *= i);
   let s = ct(e) + 1;
   e.children(_).forEach((a) => $e(e, n, i, s, o, t, a)), e.graph().nodeRankFactor = i;
@@ -678,10 +678,10 @@ function $e(e, n, t, r, o, i, s) {
     return;
   }
   let d = q(e, "_bt"), l = q(e, "_bb"), u = e.node(s);
-  e.setParent(d, s), u.borderTop = d, e.setParent(l, s), u.borderBottom = l, a.forEach((h) => {
+  e.setParent(d, s), u.borderTop = d, e.setParent(l, s), u.borderBottom = l, a.forEach((h2) => {
     var y;
-    $e(e, n, t, r, o, i, h);
-    let f = e.node(h), g = f.borderTop ? f.borderTop : h, b = f.borderBottom ? f.borderBottom : h, m = f.borderTop ? r : 2 * r, E = g !== b ? 1 : o - ((y = i[s]) != null ? y : 0) + 1;
+    $e(e, n, t, r, o, i, h2);
+    let f = e.node(h2), g = f.borderTop ? f.borderTop : h2, b = f.borderBottom ? f.borderBottom : h2, m = f.borderTop ? r : 2 * r, E = g !== b ? 1 : o - ((y = i[s]) != null ? y : 0) + 1;
     e.setEdge(d, g, { weight: m, minlen: E, nestingEdge: true }), e.setEdge(b, l, { weight: m, minlen: E, nestingEdge: true });
   }), e.parent(s) || e.setEdge(n, d, { weight: 0, minlen: o + ((c = i[s]) != null ? c : 0) });
 }
@@ -713,7 +713,7 @@ function ft(e) {
   e.children(_).forEach(n);
 }
 function Qe(e, n, t, r, o, i) {
-  let s = { width: 0, height: 0, rank: i, borderType: n }, a = o[n][i - 1], d = w(e, "border", s, t);
+  let s = { width: 0, height: 0, rank: i, borderType: n }, a = o[n][i - 1], d = w2(e, "border", s, t);
   o[n][i] = d, e.setParent(d, r), a && e.setEdge(a, d, { weight: 1 });
 }
 function nn(e) {
@@ -774,7 +774,7 @@ function oe(e, n) {
 function mt(e, n, t) {
   let r = Re(t, t.map((l, u) => u)), o = n.flatMap((l) => {
     let u = e.outEdges(l);
-    return u ? u.map((c) => ({ pos: r[c.w], weight: e.edge(c).weight })).sort((c, h) => c.pos - h.pos) : [];
+    return u ? u.map((c) => ({ pos: r[c.w], weight: e.edge(c).weight })).sort((c, h2) => c.pos - h2.pos) : [];
   }), i = 1;
   for (; i < t.length; ) i <<= 1;
   let s = 2 * i - 1;
@@ -853,12 +853,12 @@ function yt(e) {
 }
 function W(e, n, t, r) {
   let o = e.children(n), i = e.node(n), s = i ? i.borderLeft : void 0, a = i ? i.borderRight : void 0, d = {};
-  s && (o = o.filter((h) => h !== s && h !== a));
+  s && (o = o.filter((h2) => h2 !== s && h2 !== a));
   let l = ie(e, o);
-  l.forEach((h) => {
-    if (e.children(h.v).length) {
-      let f = W(e, h.v, t, r);
-      d[h.v] = f, Object.hasOwn(f, "barycenter") && Nt(h, f);
+  l.forEach((h2) => {
+    if (e.children(h2.v).length) {
+      let f = W(e, h2.v, t, r);
+      d[h2.v] = f, Object.hasOwn(f, "barycenter") && Nt(h2, f);
     }
   });
   let u = se(l, t);
@@ -866,9 +866,9 @@ function W(e, n, t, r) {
   let c = ae(u, r);
   if (s && a) {
     c.vs = [s, c.vs, a].flat(1);
-    let h = e.predecessors(s);
-    if (h && h.length) {
-      let f = e.node(h[0]), g = e.predecessors(a), b = e.node(g[0]);
+    let h2 = e.predecessors(s);
+    if (h2 && h2.length) {
+      let f = e.node(h2[0]), g = e.predecessors(a), b = e.node(g[0]);
       Object.hasOwn(c, "barycenter") || (c.barycenter = 0, c.weight = 0), c.barycenter = (c.barycenter * c.weight + f.order + b.order) / (c.weight + 2), c.weight += 2;
     }
   }
@@ -891,7 +891,7 @@ function de(e, n, t, r) {
       i.setNode(s), i.setParent(s, d || o);
       let l = e[t](s);
       l && l.forEach((u) => {
-        let c = u.v === s ? u.w : u.v, h = i.edge(c, s), f = h !== void 0 ? h.weight : 0;
+        let c = u.v === s ? u.w : u.v, h2 = i.edge(c, s), f = h2 !== void 0 ? h2.weight : 0;
         i.setEdge(c, s, { weight: e.edge(u).weight + f });
       }), Object.hasOwn(a, "minRank") && i.setNode(s, { borderLeft: a.borderLeft[n], borderRight: a.borderRight[n] });
     }
@@ -958,8 +958,8 @@ function vt(e, n) {
   function r(o, i) {
     let s = 0, a = 0, d = o.length, l = i[i.length - 1];
     return i.forEach((u, c) => {
-      let h = xt(e, u), f = h ? e.node(h).order : d;
-      (h || u === l) && (i.slice(a, c + 1).forEach((g) => {
+      let h2 = xt(e, u), f = h2 ? e.node(h2).order : d;
+      (h2 || u === l) && (i.slice(a, c + 1).forEach((g) => {
         let b = e.predecessors(g);
         b && b.forEach((m) => {
           let E = e.node(m), y = E.order;
@@ -976,8 +976,8 @@ function _t(e, n) {
     k(s, a).forEach((u) => {
       let c = i[u];
       if (c !== void 0 && e.node(c).dummy) {
-        let h = e.predecessors(c);
-        h && h.forEach((f) => {
+        let h2 = e.predecessors(c);
+        h2 && h2.forEach((f) => {
           if (f === void 0) return;
           let g = e.node(f);
           g.dummy && (g.order < d || g.order > l) && dn(t, f, c);
@@ -989,9 +989,9 @@ function _t(e, n) {
     let a = -1, d = -1, l = 0;
     return s.forEach((u, c) => {
       if (e.node(u).dummy === "border") {
-        let h = e.predecessors(u);
-        if (h && h.length) {
-          let f = h[0];
+        let h2 = e.predecessors(u);
+        if (h2 && h2.length) {
+          let f = h2[0];
           if (f === void 0) return;
           d = e.node(f).order, r(s, l, c, a, d), l = c, a = d;
         }
@@ -1037,8 +1037,8 @@ function Ot(e, n, t, r) {
         let c = u.sort((f, g) => {
           let b = s[f], m = s[g];
           return (b !== void 0 ? b : 0) - (m !== void 0 ? m : 0);
-        }), h = (c.length - 1) / 2;
-        for (let f = Math.floor(h), g = Math.ceil(h); f <= g; ++f) {
+        }), h2 = (c.length - 1) / 2;
+        for (let f = Math.floor(h2), g = Math.ceil(h2); f <= g; ++f) {
           let b = c[f];
           if (b === void 0) continue;
           let m = s[b];
@@ -1084,10 +1084,10 @@ function It(e, n, t, r, o = false) {
   function c(f) {
     return s.predecessors(f) || [];
   }
-  function h(f) {
+  function h2(f) {
     return s.successors(f) || [];
   }
-  return d(l, c), d(u, h), Object.keys(r).forEach((f) => {
+  return d(l, c), d(u, h2), Object.keys(r).forEach((f) => {
     var b;
     let g = t[f];
     g !== void 0 && (i[f] = (b = i[g]) != null ? b : 0);
@@ -1103,8 +1103,8 @@ function Ct(e, n, t, r) {
         if (o.setNode(u), d !== void 0) {
           let c = t[d];
           if (c !== void 0) {
-            let h = o.edge(c, u);
-            o.setEdge(c, u, Math.max(s(e, l, d), h || 0));
+            let h2 = o.edge(c, u);
+            o.setEdge(c, u, Math.max(s(e, l, d), h2 || 0));
           }
         }
         d = l;
@@ -1248,7 +1248,7 @@ function Kt(e) {
     let t = e.edge(n);
     if (t.width && t.height) {
       let r = e.node(n.v), i = { rank: (e.node(n.w).rank - r.rank) / 2 + r.rank, e: n };
-      w(e, "edge-proxy", i, "_ep");
+      w2(e, "edge-proxy", i, "_ep");
     }
   });
 }
@@ -1271,8 +1271,8 @@ function Jt(e) {
 function Qt(e) {
   let n = Number.POSITIVE_INFINITY, t = 0, r = Number.POSITIVE_INFINITY, o = 0, i = e.graph(), s = i.marginx || 0, a = i.marginy || 0;
   function d(l) {
-    let u = l.x, c = l.y, h = l.width, f = l.height;
-    n = Math.min(n, u - h / 2), t = Math.max(t, u + h / 2), r = Math.min(r, c - f / 2), o = Math.max(o, c + f / 2);
+    let u = l.x, c = l.y, h2 = l.width, f = l.height;
+    n = Math.min(n, u - h2 / 2), t = Math.max(t, u + h2 / 2), r = Math.min(r, c - f / 2), o = Math.max(o, c + f / 2);
   }
   e.nodes().forEach((l) => d(e.node(l))), e.edges().forEach((l) => {
     let u = e.edge(l);
@@ -1336,7 +1336,7 @@ function or(e) {
     t.forEach((o, i) => {
       let s = e.node(o);
       s.order = i + r, (s.selfEdges || []).forEach((a) => {
-        w(e, "selfedge", { width: a.label.width, height: a.label.height, rank: s.rank, order: i + ++r, e: a.e, label: a.label }, "_se");
+        w2(e, "selfedge", { width: a.label.width, height: a.label.height, rank: s.rank, order: i + ++r, e: a.e, label: a.label }, "_se");
       }), delete s.selfEdges;
     });
   });
@@ -3319,11 +3319,11 @@ function hex(value) {
   value = clampi(value);
   return (value < 16 ? "0" : "") + value.toString(16);
 }
-function hsla(h, s, l, a) {
-  if (a <= 0) h = s = l = NaN;
-  else if (l <= 0 || l >= 1) h = s = NaN;
-  else if (s <= 0) h = NaN;
-  return new Hsl(h, s, l, a);
+function hsla(h2, s, l, a) {
+  if (a <= 0) h2 = s = l = NaN;
+  else if (l <= 0 || l >= 1) h2 = s = NaN;
+  else if (s <= 0) h2 = NaN;
+  return new Hsl(h2, s, l, a);
 }
 function hslConvert(o) {
   if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
@@ -3331,23 +3331,23 @@ function hslConvert(o) {
   if (!o) return new Hsl();
   if (o instanceof Hsl) return o;
   o = o.rgb();
-  var r = o.r / 255, g = o.g / 255, b = o.b / 255, min = Math.min(r, g, b), max = Math.max(r, g, b), h = NaN, s = max - min, l = (max + min) / 2;
+  var r = o.r / 255, g = o.g / 255, b = o.b / 255, min = Math.min(r, g, b), max = Math.max(r, g, b), h2 = NaN, s = max - min, l = (max + min) / 2;
   if (s) {
-    if (r === max) h = (g - b) / s + (g < b) * 6;
-    else if (g === max) h = (b - r) / s + 2;
-    else h = (r - g) / s + 4;
+    if (r === max) h2 = (g - b) / s + (g < b) * 6;
+    else if (g === max) h2 = (b - r) / s + 2;
+    else h2 = (r - g) / s + 4;
     s /= l < 0.5 ? max + min : 2 - max - min;
-    h *= 60;
+    h2 *= 60;
   } else {
-    s = l > 0 && l < 1 ? 0 : h;
+    s = l > 0 && l < 1 ? 0 : h2;
   }
-  return new Hsl(h, s, l, o.opacity);
+  return new Hsl(h2, s, l, o.opacity);
 }
-function hsl(h, s, l, opacity) {
-  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+function hsl(h2, s, l, opacity) {
+  return arguments.length === 1 ? hslConvert(h2) : new Hsl(h2, s, l, opacity == null ? 1 : opacity);
 }
-function Hsl(h, s, l, opacity) {
-  this.h = +h;
+function Hsl(h2, s, l, opacity) {
+  this.h = +h2;
   this.s = +s;
   this.l = +l;
   this.opacity = +opacity;
@@ -3362,11 +3362,11 @@ define_default(Hsl, hsl, extend(Color, {
     return new Hsl(this.h, this.s, this.l * k2, this.opacity);
   },
   rgb() {
-    var h = this.h % 360 + (this.h < 0) * 360, s = isNaN(h) || isNaN(this.s) ? 0 : this.s, l = this.l, m2 = l + (l < 0.5 ? l : 1 - l) * s, m1 = 2 * l - m2;
+    var h2 = this.h % 360 + (this.h < 0) * 360, s = isNaN(h2) || isNaN(this.s) ? 0 : this.s, l = this.l, m2 = l + (l < 0.5 ? l : 1 - l) * s, m1 = 2 * l - m2;
     return new Rgb(
-      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
-      hsl2rgb(h, m1, m2),
-      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+      hsl2rgb(h2 >= 240 ? h2 - 240 : h2 + 120, m1, m2),
+      hsl2rgb(h2, m1, m2),
+      hsl2rgb(h2 < 120 ? h2 + 240 : h2 - 120, m1, m2),
       this.opacity
     );
   },
@@ -3388,8 +3388,8 @@ function clamph(value) {
 function clampt(value) {
   return Math.max(0, Math.min(1, value || 0));
 }
-function hsl2rgb(h, m1, m2) {
-  return (h < 60 ? m1 + (m2 - m1) * h / 60 : h < 180 ? m2 : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60 : m1) * 255;
+function hsl2rgb(h2, m1, m2) {
+  return (h2 < 60 ? m1 + (m2 - m1) * h2 / 60 : h2 < 180 ? m2 : h2 < 240 ? m1 + (m2 - m1) * (240 - h2) / 60 : m1) * 255;
 }
 
 // node_modules/d3-interpolate/src/constant.js
@@ -4651,11 +4651,11 @@ function zoom_default2() {
     }).on("interrupt.zoom end.zoom", function() {
       gesture(this, arguments).event(event).end();
     }).tween("zoom", function() {
-      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent.apply(that, args), p2 = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w2 = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a.invert(p2).concat(w2 / a.k), b.invert(p2).concat(w2 / b.k));
+      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent.apply(that, args), p2 = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w3 = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a.invert(p2).concat(w3 / a.k), b.invert(p2).concat(w3 / b.k));
       return function(t) {
         if (t === 1) t = b;
         else {
-          var l = i(t), k2 = w2 / l[2];
+          var l = i(t), k2 = w3 / l[2];
           t = new Transform(k2, p2[0] - l[0] * k2, p2[1] - l[1] * k2);
         }
         g.zoom(null, t);
@@ -6558,7 +6558,7 @@ function getHandle(nodeId, handleType, handleId, nodeLookup, connectionMode, wit
     return null;
   }
   const handles = connectionMode === "strict" ? node.internals.handleBounds?.[handleType] : [...node.internals.handleBounds?.source ?? [], ...node.internals.handleBounds?.target ?? []];
-  const handle = (handleId ? handles?.find((h) => h.id === handleId) : handles?.[0]) ?? null;
+  const handle = (handleId ? handles?.find((h2) => h2.id === handleId) : handles?.[0]) ?? null;
   return handle && withAbsolutePosition ? { ...handle, ...getHandlePosition(node, handle, handle.position, true) } : handle;
 }
 function getHandleType(edgeUpdaterType, handleDomNode) {
@@ -10455,6 +10455,14 @@ function ReactFlow({ nodes, edges, defaultNodes, defaultEdges, className, nodeTy
   return jsxRuntime.jsx("div", { "data-testid": "rf__wrapper", ...rest, onScroll: wrapperOnScroll, style: { ...style2, ...wrapperStyle }, ref, className: cc(["react-flow", className, colorModeClassName]), id: id2, role: "application", children: jsxRuntime.jsxs(Wrapper, { nodes, edges, width, height, fitView, fitViewOptions, minZoom, maxZoom, nodeOrigin, nodeExtent, zIndexMode, children: [jsxRuntime.jsx(StoreUpdater, { nodes, edges, defaultNodes, defaultEdges, onConnect, onConnectStart, onConnectEnd, onClickConnectStart, onClickConnectEnd, nodesDraggable, autoPanOnNodeFocus, nodesConnectable, nodesFocusable, edgesFocusable, edgesReconnectable, elementsSelectable, elevateNodesOnSelect, elevateEdgesOnSelect, minZoom, maxZoom, nodeExtent, onNodesChange, onEdgesChange, snapToGrid, snapGrid, connectionMode, translateExtent, connectOnClick, defaultEdgeOptions, fitView, fitViewOptions, onNodesDelete, onEdgesDelete, onDelete, onNodeDragStart, onNodeDrag, onNodeDragStop, onSelectionDrag, onSelectionDragStart, onSelectionDragStop, onMove, onMoveStart, onMoveEnd, noPanClassName, nodeOrigin, rfId, autoPanOnConnect, autoPanOnNodeDrag, autoPanSpeed, onError, connectionRadius, isValidConnection, selectNodesOnDrag, nodeDragThreshold, connectionDragThreshold, onBeforeDelete, debug, ariaLabelConfig, zIndexMode }), jsxRuntime.jsx(GraphView, { onInit, onNodeClick, onEdgeClick, onNodeMouseEnter, onNodeMouseMove, onNodeMouseLeave, onNodeContextMenu, onNodeDoubleClick, nodeTypes, edgeTypes, connectionLineType, connectionLineStyle, connectionLineComponent, connectionLineContainerStyle, selectionKeyCode, selectionOnDrag, selectionMode, deleteKeyCode, multiSelectionKeyCode, panActivationKeyCode, zoomActivationKeyCode, onlyRenderVisibleElements, defaultViewport: defaultViewport$1, translateExtent, minZoom, maxZoom, preventScrolling, zoomOnScroll, zoomOnPinch, zoomOnDoubleClick, panOnScroll, panOnScrollSpeed, panOnScrollMode, panOnDrag, autoPanOnSelection, onPaneClick, onPaneMouseEnter, onPaneMouseMove, onPaneMouseLeave, onPaneScroll, onPaneContextMenu, paneClickDistance, nodeClickDistance, onSelectionContextMenu, onSelectionStart, onSelectionEnd, onReconnect, onReconnectStart, onReconnectEnd, onEdgeContextMenu, onEdgeDoubleClick, onEdgeMouseEnter, onEdgeMouseMove, onEdgeMouseLeave, reconnectRadius, defaultMarkerColor, noDragClassName, noWheelClassName, noPanClassName, rfId, disableKeyboardA11y, nodeExtent, viewport, onViewportChange }), jsxRuntime.jsx(SelectionListener, { onSelectionChange }), children2, jsxRuntime.jsx(Attribution, { proOptions, position: attributionPosition }), jsxRuntime.jsx(A11yDescriptions, { rfId, disableKeyboardA11y })] }) });
 }
 var index = fixedForwardRef(ReactFlow);
+var selector$5 = (s) => s.domNode?.querySelector(".react-flow__viewport-portal");
+function ViewportPortal({ children: children2 }) {
+  const viewPortalDiv = useStore(selector$5);
+  if (!viewPortalDiv) {
+    return null;
+  }
+  return reactDom.createPortal(children2, viewPortalDiv);
+}
 function LinePattern({ dimensions, lineWidth, variant, className }) {
   return jsxRuntime.jsx("path", { strokeWidth: lineWidth, d: `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, className: cc(["react-flow__background-pattern", variant, className]) });
 }
@@ -12342,6 +12350,97 @@ function distributeNodes(nodes, axis) {
     return { ...n, position: axis === "h" ? { ...n.position, x: p2 } : { ...n.position, y: p2 } };
   });
 }
+
+// src/components/canvas/helper-lines.ts
+var w = (n) => n.width ?? n.measured?.width ?? 0;
+var h = (n) => n.height ?? n.measured?.height ?? 0;
+function getHelperLines(change, nodes, distance2 = 6) {
+  const result = { snapPosition: { x: void 0, y: void 0 } };
+  const a = nodes.find((n) => n.id === change.id);
+  if (!a || !change.position) return result;
+  const A2 = {
+    left: change.position.x,
+    right: change.position.x + w(a),
+    top: change.position.y,
+    bottom: change.position.y + h(a),
+    width: w(a),
+    height: h(a)
+  };
+  let vDist = distance2;
+  let hDist = distance2;
+  for (const b of nodes) {
+    if (b.id === a.id) continue;
+    const B2 = { left: b.position.x, right: b.position.x + w(b), top: b.position.y, bottom: b.position.y + h(b) };
+    const ll = Math.abs(A2.left - B2.left);
+    if (ll < vDist) {
+      result.snapPosition.x = B2.left;
+      result.vertical = B2.left;
+      vDist = ll;
+    }
+    const rr2 = Math.abs(A2.right - B2.right);
+    if (rr2 < vDist) {
+      result.snapPosition.x = B2.right - A2.width;
+      result.vertical = B2.right;
+      vDist = rr2;
+    }
+    const lr = Math.abs(A2.left - B2.right);
+    if (lr < vDist) {
+      result.snapPosition.x = B2.right;
+      result.vertical = B2.right;
+      vDist = lr;
+    }
+    const rl = Math.abs(A2.right - B2.left);
+    if (rl < vDist) {
+      result.snapPosition.x = B2.left - A2.width;
+      result.vertical = B2.left;
+      vDist = rl;
+    }
+    const tt2 = Math.abs(A2.top - B2.top);
+    if (tt2 < hDist) {
+      result.snapPosition.y = B2.top;
+      result.horizontal = B2.top;
+      hDist = tt2;
+    }
+    const bb = Math.abs(A2.bottom - B2.bottom);
+    if (bb < hDist) {
+      result.snapPosition.y = B2.bottom - A2.height;
+      result.horizontal = B2.bottom;
+      hDist = bb;
+    }
+    const tb = Math.abs(A2.top - B2.bottom);
+    if (tb < hDist) {
+      result.snapPosition.y = B2.bottom;
+      result.horizontal = B2.bottom;
+      hDist = tb;
+    }
+    const bt2 = Math.abs(A2.bottom - B2.top);
+    if (bt2 < hDist) {
+      result.snapPosition.y = B2.top - A2.height;
+      result.horizontal = B2.top;
+      hDist = bt2;
+    }
+  }
+  return result;
+}
+function HelperLines({ horizontal, vertical }) {
+  if (horizontal === void 0 && vertical === void 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ViewportPortal, { children: [
+    vertical !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "ff-helper-line",
+        style: { position: "absolute", transform: `translateX(${vertical}px)`, top: -5e3, height: 1e4, width: 1, pointerEvents: "none" }
+      }
+    ),
+    horizontal !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "ff-helper-line",
+        style: { position: "absolute", transform: `translateY(${horizontal}px)`, left: -5e3, width: 1e4, height: 1, pointerEvents: "none" }
+      }
+    )
+  ] });
+}
 var DEFAULT_FIT_VIEW = { padding: 0.2 };
 var DEFAULT_EDGE_OPTIONS = {
   type: "smoothstep",
@@ -12356,6 +12455,9 @@ function FlowCanvas({
   height = 600,
   validateConnections = true,
   isValidConnection,
+  colorMode,
+  showHelperLines = false,
+  onNodesChange,
   toolbar,
   nodeTypes,
   edgeTypes,
@@ -12382,31 +12484,66 @@ function FlowCanvas({
     [edgeTypes]
   );
   const orderedNodes = ReactExports.useMemo(() => sortNodesParentFirst(nodes), [nodes]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["ff-canvas", className ?? ""].filter(Boolean).join(" "), style: { height, ...style2 }, children: [
-    toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-canvas__toolbar", children: toolbar }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-canvas__surface", children: /* @__PURE__ */ jsxRuntime.jsxs(
-      index,
-      {
-        nodes: orderedNodes,
-        edges,
-        nodeTypes: mergedNodeTypes,
-        edgeTypes: mergedEdgeTypes,
-        fitView: true,
-        fitViewOptions: DEFAULT_FIT_VIEW,
-        defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
-        proOptions: { hideAttribution: true },
-        zoomActivationKeyCode: "Shift",
-        preventScrolling: false,
-        isValidConnection: resolvedIsValidConnection,
-        ...rest,
-        children: [
-          background !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Background, { variant: background, gap: 20, size: 1, color: "rgba(0,0,0,0.18)" }),
-          showControls && /* @__PURE__ */ jsxRuntime.jsx(Controls, { className: "ff-controls", position: "bottom-right" }),
-          showMinimap && /* @__PURE__ */ jsxRuntime.jsx(MiniMap, { className: "ff-minimap", pannable: true, zoomable: true })
-        ]
+  const [helperLines, setHelperLines] = ReactExports.useState({});
+  const handleNodesChange = ReactExports.useCallback(
+    (changes) => {
+      if (showHelperLines) {
+        const pos = changes.filter((c) => c.type === "position" && c.position);
+        if (pos.length === 1 && pos[0].dragging) {
+          const lines = getHelperLines(pos[0], nodesRef.current);
+          if (lines.snapPosition.x !== void 0) pos[0].position.x = lines.snapPosition.x;
+          if (lines.snapPosition.y !== void 0) pos[0].position.y = lines.snapPosition.y;
+          setHelperLines({ horizontal: lines.horizontal, vertical: lines.vertical });
+        } else {
+          setHelperLines({});
+        }
       }
-    ) })
-  ] });
+      onNodesChange?.(changes);
+    },
+    [showHelperLines, onNodesChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [
+        "ff-canvas",
+        // colorMode drives BOTH react-flow's chrome (below) and our `ff-` styles
+        // via the shared `.dark` class / light opt-out — one theme signal.
+        colorMode === "dark" ? "dark" : "",
+        colorMode === "light" ? "ff-canvas--light" : "",
+        className ?? ""
+      ].filter(Boolean).join(" "),
+      style: { height, ...style2 },
+      children: [
+        toolbar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-canvas__toolbar", children: toolbar }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-canvas__surface", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          index,
+          {
+            nodes: orderedNodes,
+            edges,
+            onNodesChange: handleNodesChange,
+            colorMode,
+            nodeTypes: mergedNodeTypes,
+            edgeTypes: mergedEdgeTypes,
+            fitView: true,
+            fitViewOptions: DEFAULT_FIT_VIEW,
+            defaultEdgeOptions: DEFAULT_EDGE_OPTIONS,
+            proOptions: { hideAttribution: true },
+            zoomActivationKeyCode: "Shift",
+            preventScrolling: false,
+            isValidConnection: resolvedIsValidConnection,
+            ...rest,
+            children: [
+              background !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Background, { variant: background, gap: 20, size: 1, color: "rgba(0,0,0,0.18)" }),
+              showControls && /* @__PURE__ */ jsxRuntime.jsx(Controls, { className: "ff-controls", position: "bottom-right" }),
+              showMinimap && /* @__PURE__ */ jsxRuntime.jsx(MiniMap, { className: "ff-minimap", pannable: true, zoomable: true }),
+              showHelperLines && /* @__PURE__ */ jsxRuntime.jsx(HelperLines, { horizontal: helperLines.horizontal, vertical: helperLines.vertical })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
 }
 var CATEGORY_ORDER = ["trigger", "logic", "data", "ai", "io", "human", "output", "layout", "custom"];
 var CATEGORY_LABELS = {
@@ -13136,6 +13273,7 @@ function useFlowHistory(flow) {
 function useFlowRun({ maxFeed = 200 } = {}) {
   const [statuses, setStatuses] = ReactExports.useState({});
   const [statusText, setStatusText] = ReactExports.useState({});
+  const [outputs, setOutputs] = ReactExports.useState({});
   const [feed, setFeed] = ReactExports.useState([]);
   const [running, setRunning] = ReactExports.useState(false);
   const [lastResult, setLastResult] = ReactExports.useState(null);
@@ -13149,6 +13287,7 @@ function useFlowRun({ maxFeed = 200 } = {}) {
           appendFeed({ level: "status", text: `${e.nodeId} \u2192 ${e.status}${e.text ? ` (${e.text})` : ""}`, nodeId: e.nodeId });
           break;
         case "node-output":
+          setOutputs((o) => ({ ...o, [e.nodeId]: e.value }));
           appendFeed({ level: "info", text: `${e.nodeId}.${e.portId} = ${preview(e.value)}`, nodeId: e.nodeId, detail: e.value });
           break;
         case "log":
@@ -13185,6 +13324,7 @@ function useFlowRun({ maxFeed = 200 } = {}) {
       for (const n of graph.nodes) idleStatuses[n.id] = "idle";
       setStatuses(idleStatuses);
       setStatusText({});
+      setOutputs({});
       setRunning(true);
       try {
         const result = await runFlow(graph, executors, handleEvent, { ...options, signal: controller.signal });
@@ -13201,10 +13341,18 @@ function useFlowRun({ maxFeed = 200 } = {}) {
   const reset = ReactExports.useCallback(() => {
     setStatuses({});
     setStatusText({});
+    setOutputs({});
     setFeed([]);
     setLastResult(null);
   }, []);
-  return { statuses, statusText, feed, running, lastResult, run, cancel, reset };
+  return { statuses, statusText, outputs, feed, running, lastResult, run, cancel, reset };
+}
+function applyOutputsToNodes(nodes, outputs) {
+  return nodes.map((n) => {
+    const kind = getNodeKind(n.data?.kind ?? n.type ?? "");
+    if (!kind?.reactive || !(n.id in outputs)) return n;
+    return { ...n, data: { ...n.data, output: outputs[n.id] } };
+  });
 }
 function applyStatusesToNodes(nodes, statuses, statusText) {
   return nodes.map((n) => ({
@@ -13446,6 +13594,10 @@ function RegistryNodeInner(props) {
         data.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-node__desc", children: data.description }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ff-node__body", children: kind.renderBody ? kind.renderBody({ nodeId: props.id, config, selected: props.selected ?? false }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultBody, { config, kind: kind.configSchema }) }),
         data.statusText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ff-node__status-text", children: data.statusText }),
+        data.output !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "ff-node__output", title: "Latest output", children: [
+          "\u2192 ",
+          previewValue(data.output)
+        ] }),
         inputs.map((p2, i) => /* @__PURE__ */ jsxRuntime.jsx(
           Handle,
           {
@@ -13595,8 +13747,11 @@ function FlowEditorInner({
   ReactExports.useEffect(() => onNodeKindsChanged(() => force((n) => n + 1)), []);
   const nodeTypes = ReactExports.useMemo(() => buildNodeTypes(), [listNodeKinds().length]);
   const renderedNodes = ReactExports.useMemo(
-    () => applyStatusesToNodes(flow.nodes, runner.statuses, runner.statusText),
-    [flow.nodes, runner.statuses, runner.statusText]
+    () => applyOutputsToNodes(
+      applyStatusesToNodes(flow.nodes, runner.statuses, runner.statusText),
+      runner.outputs
+    ),
+    [flow.nodes, runner.statuses, runner.statusText, runner.outputs]
   );
   const [selectedId, setSelectedId] = ReactExports.useState(null);
   const selected2 = ReactExports.useMemo(() => flow.nodes.find((n) => n.id === selectedId) ?? null, [flow.nodes, selectedId]);
@@ -13780,10 +13935,10 @@ function FlowEditorInner({
     (orientation = "horizontal", title) => {
       const vertical = orientation === "vertical";
       const lanes = flow.nodes.filter(isLaneNode);
-      const w2 = vertical ? 280 : 680;
-      const h = vertical ? 480 : 168;
+      const w3 = vertical ? 280 : 680;
+      const h2 = vertical ? 480 : 168;
       const end = lanes.reduce(
-        (m, l) => Math.max(m, vertical ? l.position.x + (l.width ?? w2) : l.position.y + (l.height ?? h)),
+        (m, l) => Math.max(m, vertical ? l.position.x + (l.width ?? w3) : l.position.y + (l.height ?? h2)),
         0
       );
       const id2 = newNodeId();
@@ -13792,8 +13947,8 @@ function FlowEditorInner({
         id: id2,
         type: "@particle-academy/lane",
         position: vertical ? { x: lanes.length ? end + 12 : 0, y: 0 } : { x: 0, y: lanes.length ? end + 12 : 0 },
-        width: w2,
-        height: h,
+        width: w3,
+        height: h2,
         data: { kind: "@particle-academy/lane", label: name, config: { title: name, orientation } }
       };
       flow.setNodes((all) => [...all, node]);
@@ -14269,6 +14424,7 @@ exports.TriggerNode = TriggerNode;
 exports.WORKFLOW_SCHEMA_URL = WORKFLOW_SCHEMA_URL;
 exports.WORKFLOW_SCHEMA_VERSION = WORKFLOW_SCHEMA_VERSION;
 exports.alignNodes = alignNodes;
+exports.applyOutputsToNodes = applyOutputsToNodes;
 exports.applyStatusesToNodes = applyStatusesToNodes;
 exports.buildNodeTypes = buildNodeTypes;
 exports.categoryAccent = categoryAccent;