@emporix/process-diagram 2.0.0-beta.8 → 2.0.0

package/dist/index.mjs

@@ -1,266 +1,272 @@
-import { jsxs as h, Fragment as n1, jsx as e } from "react/jsx-runtime";
-import W, { forwardRef as k1, useState as E, useRef as $, useCallback as D, useImperativeHandle as B1, useEffect as Y, createContext as P1, useMemo as H, useContext as M1, useLayoutEffect as L1 } from "react";
-import { createPortal as E1 } from "react-dom";
-const $1 = "_container_1vo7a_1", T1 = "_step_1vo7a_7", O1 = "_selected_1vo7a_23", j1 = "_selectedInvalid_1vo7a_29", H1 = "_isSet_1vo7a_35", S1 = "_invalid_1vo7a_39", W1 = "_filterFlag_1vo7a_45", R1 = "_title_1vo7a_73", z1 = "_icon_1vo7a_90", D1 = "_content_1vo7a_108", F1 = "_dotsButton_1vo7a_114", N = {
-  container: $1,
-  step: T1,
-  selected: O1,
-  selectedInvalid: j1,
-  isSet: H1,
-  invalid: S1,
-  filterFlag: W1,
-  title: R1,
-  icon: z1,
-  content: D1,
-  dotsButton: F1
+import { jsxs as C, Fragment as G, jsx as i } from "react/jsx-runtime";
+import U, { forwardRef as ue, useState as O, useRef as $, useCallback as tt, useImperativeHandle as pe, useEffect as ot, createContext as Gt, useMemo as k, useContext as Vt, useLayoutEffect as he } from "react";
+import { createPortal as fe } from "react-dom";
+const ge = "_container_1f7x1_1", Ce = "_step_1f7x1_7", me = "_dotsButton_1f7x1_23", ve = "_selected_1f7x1_27", _e = "_selectedInvalid_1f7x1_36", xe = "_isSet_1f7x1_45", we = "_invalid_1f7x1_52", be = "_debuggerStatus_1f7x1_60", ye = "_title_1f7x1_64", Ne = "_icon_1f7x1_67", Ie = "_filterFlag_1f7x1_78", Se = "_content_1f7x1_141", P = {
+  container: ge,
+  step: Ce,
+  dotsButton: me,
+  selected: ve,
+  selectedInvalid: _e,
+  isSet: xe,
+  invalid: we,
+  debuggerStatus: be,
+  title: ye,
+  icon: Ne,
+  filterFlag: Ie,
+  content: Se
 };
-var f1 = {
+var Zt = {
   color: void 0,
   size: void 0,
   className: void 0,
   style: void 0,
   attr: void 0
-}, p1 = W.createContext && /* @__PURE__ */ W.createContext(f1), Z1 = ["attr", "size", "title"];
-function V1(t, n) {
+}, Ft = U.createContext && /* @__PURE__ */ U.createContext(Zt), Le = ["attr", "size", "title"];
+function Te(t, e) {
   if (t == null) return {};
-  var o = Y1(t, n), i, r;
+  var n = Ee(t, e), s, o;
   if (Object.getOwnPropertySymbols) {
-    var c = Object.getOwnPropertySymbols(t);
-    for (r = 0; r < c.length; r++)
-      i = c[r], !(n.indexOf(i) >= 0) && Object.prototype.propertyIsEnumerable.call(t, i) && (o[i] = t[i]);
+    var l = Object.getOwnPropertySymbols(t);
+    for (o = 0; o < l.length; o++)
+      s = l[o], !(e.indexOf(s) >= 0) && Object.prototype.propertyIsEnumerable.call(t, s) && (n[s] = t[s]);
   }
-  return o;
+  return n;
 }
-function Y1(t, n) {
+function Ee(t, e) {
   if (t == null) return {};
-  var o = {};
-  for (var i in t)
-    if (Object.prototype.hasOwnProperty.call(t, i)) {
-      if (n.indexOf(i) >= 0) continue;
-      o[i] = t[i];
+  var n = {};
+  for (var s in t)
+    if (Object.prototype.hasOwnProperty.call(t, s)) {
+      if (e.indexOf(s) >= 0) continue;
+      n[s] = t[s];
     }
-  return o;
+  return n;
 }
-function G() {
-  return G = Object.assign ? Object.assign.bind() : function(t) {
-    for (var n = 1; n < arguments.length; n++) {
-      var o = arguments[n];
-      for (var i in o)
-        Object.prototype.hasOwnProperty.call(o, i) && (t[i] = o[i]);
+function gt() {
+  return gt = Object.assign ? Object.assign.bind() : function(t) {
+    for (var e = 1; e < arguments.length; e++) {
+      var n = arguments[e];
+      for (var s in n)
+        Object.prototype.hasOwnProperty.call(n, s) && (t[s] = n[s]);
     }
     return t;
-  }, G.apply(this, arguments);
+  }, gt.apply(this, arguments);
 }
-function u1(t, n) {
-  var o = Object.keys(t);
+function Bt(t, e) {
+  var n = Object.keys(t);
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(t);
-    n && (i = i.filter(function(r) {
-      return Object.getOwnPropertyDescriptor(t, r).enumerable;
-    })), o.push.apply(o, i);
+    var s = Object.getOwnPropertySymbols(t);
+    e && (s = s.filter(function(o) {
+      return Object.getOwnPropertyDescriptor(t, o).enumerable;
+    })), n.push.apply(n, s);
   }
-  return o;
+  return n;
 }
-function K(t) {
-  for (var n = 1; n < arguments.length; n++) {
-    var o = arguments[n] != null ? arguments[n] : {};
-    n % 2 ? u1(Object(o), !0).forEach(function(i) {
-      A1(t, i, o[i]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(o)) : u1(Object(o)).forEach(function(i) {
-      Object.defineProperty(t, i, Object.getOwnPropertyDescriptor(o, i));
+function Ct(t) {
+  for (var e = 1; e < arguments.length; e++) {
+    var n = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? Bt(Object(n), !0).forEach(function(s) {
+      Pe(t, s, n[s]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(n)) : Bt(Object(n)).forEach(function(s) {
+      Object.defineProperty(t, s, Object.getOwnPropertyDescriptor(n, s));
     });
   }
   return t;
 }
-function A1(t, n, o) {
-  return n = X1(n), n in t ? Object.defineProperty(t, n, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : t[n] = o, t;
+function Pe(t, e, n) {
+  return e = ke(e), e in t ? Object.defineProperty(t, e, { value: n, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = n, t;
 }
-function X1(t) {
-  var n = G1(t, "string");
-  return typeof n == "symbol" ? n : n + "";
+function ke(t) {
+  var e = Re(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function G1(t, n) {
+function Re(t, e) {
   if (typeof t != "object" || !t) return t;
-  var o = t[Symbol.toPrimitive];
-  if (o !== void 0) {
-    var i = o.call(t, n);
-    if (typeof i != "object") return i;
+  var n = t[Symbol.toPrimitive];
+  if (n !== void 0) {
+    var s = n.call(t, e);
+    if (typeof s != "object") return s;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (n === "string" ? String : Number)(t);
+  return (e === "string" ? String : Number)(t);
 }
-function g1(t) {
-  return t && t.map((n, o) => /* @__PURE__ */ W.createElement(n.tag, K({
-    key: o
-  }, n.attr), g1(n.child)));
+function qt(t) {
+  return t && t.map((e, n) => /* @__PURE__ */ U.createElement(e.tag, Ct({
+    key: n
+  }, e.attr), qt(e.child)));
 }
-function Z(t) {
-  return (n) => /* @__PURE__ */ W.createElement(K1, G({
-    attr: K({}, t.attr)
-  }, n), g1(t.child));
+function Oe(t) {
+  return (e) => /* @__PURE__ */ U.createElement(Me, gt({
+    attr: Ct({}, t.attr)
+  }, e), qt(t.child));
 }
-function K1(t) {
-  var n = (o) => {
+function Me(t) {
+  var e = (n) => {
     var {
-      attr: i,
-      size: r,
-      title: c
-    } = t, d = V1(t, Z1), a = r || o.size || "1em", s;
-    return o.className && (s = o.className), t.className && (s = (s ? s + " " : "") + t.className), /* @__PURE__ */ W.createElement("svg", G({
+      attr: s,
+      size: o,
+      title: l
+    } = t, c = Te(t, Le), p = o || n.size || "1em", a;
+    return n.className && (a = n.className), t.className && (a = (a ? a + " " : "") + t.className), /* @__PURE__ */ U.createElement("svg", gt({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
-    }, o.attr, i, d, {
-      className: s,
-      style: K(K({
-        color: t.color || o.color
-      }, o.style), t.style),
-      height: a,
-      width: a,
+    }, n.attr, s, c, {
+      className: a,
+      style: Ct(Ct({
+        color: t.color || n.color
+      }, n.style), t.style),
+      height: p,
+      width: p,
       xmlns: "http://www.w3.org/2000/svg"
-    }), c && /* @__PURE__ */ W.createElement("title", null, c), t.children);
+    }), l && /* @__PURE__ */ U.createElement("title", null, l), t.children);
   };
-  return p1 !== void 0 ? /* @__PURE__ */ W.createElement(p1.Consumer, null, (o) => n(o)) : n(f1);
+  return Ft !== void 0 ? /* @__PURE__ */ U.createElement(Ft.Consumer, null, (n) => e(n)) : e(Zt);
 }
-function q1(t) {
-  return Z({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1 .474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7 9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0 1-.48-.641zM6.374 1 4.168 8.5H7.5a.5.5 0 0 1 .478.647L6.78 13.04 11.478 7H8a.5.5 0 0 1-.474-.658L9.306 1z" }, child: [] }] })(t);
+function mt(t) {
+  return Oe({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" }, child: [] }] })(t);
 }
-function v1(t) {
-  return Z({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325" }, child: [] }] })(t);
-}
-function q(t) {
-  return Z({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" }, child: [] }] })(t);
-}
-function J(t) {
-  return Z({ attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { d: "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" }, child: [] }, { tag: "path", attr: { d: "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" }, child: [] }] })(t);
-}
-const J1 = "_panel_19663_1", Q1 = "_panelExiting_19663_13", U1 = "_menuItem_19663_37", tt = "_disabled_19663_52", et = "_menuItemIcon_19663_57", nt = "_menuItemText_19663_63", ot = "_overlay_19663_69", O = {
-  panel: J1,
-  panelExiting: Q1,
-  menuItem: U1,
-  disabled: tt,
-  menuItemIcon: et,
-  menuItemText: nt,
-  overlay: ot
-}, it = (t) => {
-  const o = t.currentTarget ?? t.target;
-  if (o?.getBoundingClientRect) {
-    const r = o.getBoundingClientRect();
-    return { top: r.bottom + 2, left: r.left };
+const $e = "_panel_1uqzz_1", De = "_panelExiting_1uqzz_13", Fe = "_menuItem_1uqzz_37", Be = "_disabled_1uqzz_48", We = "_menuItemText_1uqzz_56", je = "_menuItemIcon_1uqzz_60", He = "_overlay_1uqzz_72", H = {
+  panel: $e,
+  panelExiting: De,
+  menuItem: Fe,
+  disabled: Be,
+  menuItemText: We,
+  menuItemIcon: je,
+  overlay: He
+}, ze = (t) => {
+  const n = t.currentTarget ?? t.target;
+  if (n?.getBoundingClientRect) {
+    const o = n.getBoundingClientRect();
+    return { top: o.bottom + 2, left: o.left };
   }
-  const i = t;
+  const s = t;
   return {
-    top: (i.clientY ?? 0) + 2,
-    left: i.clientX ?? 0
+    top: (s.clientY ?? 0) + 2,
+    left: s.clientX ?? 0
   };
-}, Q = k1(function({ model: n, popup: o = !0, onHide: i, onClick: r }, c) {
-  const [d, a] = E(!1), [s, l] = E(!1), [f, b] = E({ top: 0, left: 0 }), _ = $(null), x = D(() => {
-    s || l(!0);
-  }, [s]), C = D(
-    (m) => {
-      s && m.animationName.includes("menuOut") && (a(!1), l(!1), i?.());
+}, xt = ue(function({ model: e, popup: n = !0, onHide: s, onClick: o }, l) {
+  const [c, p] = O(!1), [a, r] = O(!1), [d, g] = O({ top: 0, left: 0 }), b = $(null), h = tt(() => {
+    a || (s?.(), r(!0));
+  }, [a, s]), m = tt(
+    (v) => {
+      a && v.animationName.includes("menuOut") && (p(!1), r(!1));
     },
-    [s, i]
-  ), p = D((m) => {
-    b(it(m)), l(!1), a(!0);
-  }, []), I = D(
-    (m) => {
-      d ? x() : p(m);
+    [a]
+  ), x = tt((v) => {
+    g(ze(v)), r(!1), p(!0);
+  }, []), f = tt(
+    (v) => {
+      c ? h() : x(v);
     },
-    [d, x, p]
+    [c, h, x]
   );
-  B1(
-    c,
+  pe(
+    l,
     () => ({
-      show: p,
-      hide: x,
-      toggle: I
+      show: x,
+      hide: h,
+      toggle: f
     }),
-    [p, x, I]
-  ), Y(() => {
-    if (!d) return;
-    const m = (L) => {
-      L.key === "Escape" && x();
-    }, y = (L) => {
-      const u = _.current;
-      u && !u.contains(L.target) && (L.stopPropagation(), x());
+    [x, h, f]
+  ), ot(() => {
+    if (!c) return;
+    const v = (u) => {
+      u.key === "Escape" && h();
+    }, y = (u) => {
+      const _ = b.current;
+      !_ || _.contains(u.target) || (u.preventDefault(), u.stopPropagation(), h());
+    };
+    return document.addEventListener("keydown", v), document.addEventListener("mousedown", y, !0), document.addEventListener("click", y, !0), () => {
+      document.removeEventListener("keydown", v), document.removeEventListener("mousedown", y, !0), document.removeEventListener("click", y, !0);
     };
-    return document.addEventListener("keydown", m), document.addEventListener("mousedown", y), () => {
-      document.removeEventListener("keydown", m), document.removeEventListener("mousedown", y);
+  }, [c, h]);
+  const N = (v, y) => {
+    y.stopPropagation(), v.command?.({ originalEvent: y, item: v }), h();
+  }, E = (v, y) => {
+    const u = (_) => {
+      v.disabled || N(v, _);
     };
-  }, [d, x]);
-  const w = (m, y) => {
-    y.stopPropagation(), m.command?.({ originalEvent: y, item: m }), x();
-  }, v = (m, y) => {
-    const L = (u) => w(m, u);
-    return m.template ? /* @__PURE__ */ e(W.Fragment, { children: m.template(m, { onClick: L }) }, y) : /* @__PURE__ */ h(
+    return v.template ? /* @__PURE__ */ i(U.Fragment, { children: v.template(v, { onClick: u }) }, y) : /* @__PURE__ */ C(
       "button",
       {
         type: "button",
-        className: `${O.menuItem} ${m.disabled && O.disabled}`,
-        onClick: (u) => {
-          m.disabled || L(u);
+        className: `${H.menuItem} ${v.disabled && H.disabled}`,
+        onClick: (_) => {
+          v.disabled || u(_);
         },
         children: [
-          m.icon && /* @__PURE__ */ e("span", { className: O.menuItemIcon, children: m.icon }),
-          /* @__PURE__ */ e("span", { className: O.menuItemText, children: m.label })
+          v.icon && /* @__PURE__ */ i("span", { className: H.menuItemIcon, children: v.icon }),
+          /* @__PURE__ */ i("span", { className: H.menuItemText, children: v.label })
         ]
       },
       y
     );
   };
-  return !d || !o ? null : E1(
-    /* @__PURE__ */ h(n1, { children: [
-      /* @__PURE__ */ e(
+  return !c || !n ? null : fe(
+    /* @__PURE__ */ C(G, { children: [
+      /* @__PURE__ */ i(
         "div",
         {
-          className: O.overlay,
+          className: H.overlay,
           "aria-hidden": !0,
-          onClick: () => x(),
-          onMouseDown: (m) => m.stopPropagation()
+          onMouseDown: (v) => {
+            v.preventDefault(), v.stopPropagation(), h();
+          }
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "div",
         {
-          ref: _,
-          className: `${O.panel} ${s ? O.panelExiting : ""}`,
+          ref: b,
+          className: `${H.panel} ${a ? H.panelExiting : ""}`,
           role: "menu",
-          style: { top: f.top, left: f.left },
-          onAnimationEnd: C,
-          onClick: (m) => {
-            m.stopPropagation(), r?.(m);
+          style: { top: d.top, left: d.left },
+          onAnimationEnd: m,
+          onClick: (v) => {
+            v.stopPropagation(), o?.(v);
           },
-          children: n.map(v)
+          children: e.map(E)
         }
       )
     ] }),
     document.body
   );
-}), i1 = () => (t, n) => /* @__PURE__ */ h(
-  "button",
-  {
-    className: O.menuItem,
-    onClick: (o) => n.onClick(o),
-    children: [
-      /* @__PURE__ */ e("span", { className: O.menuItemIcon, children: t.icon }),
-      /* @__PURE__ */ e("span", { className: O.menuItemText, children: t.label })
-    ]
-  }
-), rt = ({
+}), I = {
+  NAVY: "#3B64A0",
+  FINISHED_GREEN: "#17a34a",
+  ERROR_RED: "#E32012",
+  TEAL: "#127ee3",
+  ADD_TRIGGER_FILL: "#0C971F",
+  ADD_TRIGGER_STROKE: "#14BC2B",
+  SEPARATOR: "#a1bbdc",
+  SLATE_400: "#94a3b8",
+  ORANGE: "#ff9800"
+}, pt = (t) => t?.toLowerCase() === I.FINISHED_GREEN.toLowerCase(), et = (t) => pt(t) ? `3px dotted ${t}` : `2px solid ${t}`, wt = {
+  pending: I.NAVY,
+  running: I.TEAL,
+  validating: I.ORANGE,
+  finished: I.FINISHED_GREEN,
+  failed: I.ERROR_RED,
+  cancelled: I.ORANGE,
+  skipped: I.SLATE_400,
+  invalid: I.ERROR_RED
+}, Ae = {
+  finished: "#DFFFE3"
+}, S1 = ({
   width: t = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ h(
+  height: e = 16,
+  color: n = I.NAVY
+}) => /* @__PURE__ */ C(
   "svg",
   {
     width: t,
-    height: n,
+    height: e,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "rect",
         {
           x: "7.99219",
@@ -269,103 +275,103 @@ const J1 = "_panel_19663_1", Q1 = "_panelExiting_19663_13", U1 = "_menuItem_1966
           height: "11",
           rx: "1.5",
           transform: "rotate(45 7.99219 0.222732)",
-          stroke: o
+          stroke: n
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M10.4693 5.52599L5.52513 10.4813M5.52513 5.53151L10.4749 10.4813",
-          stroke: o,
+          stroke: n,
           strokeLinecap: "round"
         }
       )
     ]
   }
-), st = ({
+), L1 = ({
   width: t = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ h(
+  height: e = 16,
+  color: n = I.NAVY
+}) => /* @__PURE__ */ C(
   "svg",
   {
     width: t,
-    height: n,
+    height: e,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M11.5341 7.00002H15.4661C15.5136 7.00004 15.5601 7.01359 15.6002 7.03909C15.6403 7.06459 15.6722 7.10098 15.6924 7.144C15.7125 7.18702 15.72 7.23489 15.7139 7.282C15.7079 7.32912 15.6885 7.37352 15.6581 7.41002L13.6921 9.77002C13.6686 9.79816 13.6393 9.82079 13.6061 9.83633C13.5729 9.85186 13.5367 9.85991 13.5001 9.85991C13.4635 9.85991 13.4273 9.85186 13.3941 9.83633C13.3609 9.82079 13.3315 9.79816 13.3081 9.77002L11.3421 7.41002C11.3117 7.37352 11.2923 7.32912 11.2862 7.282C11.2802 7.23489 11.2876 7.18702 11.3078 7.144C11.3279 7.10098 11.3599 7.06459 11.4 7.03909C11.4401 7.01359 11.4866 7.00004 11.5341 7.00002ZM0.534086 9.00002H4.46609C4.51359 9.00001 4.56011 8.98645 4.60019 8.96096C4.64027 8.93546 4.67225 8.89907 4.6924 8.85605C4.71254 8.81303 4.72002 8.76516 4.71394 8.71804C4.70786 8.67093 4.68849 8.62652 4.65809 8.59002L2.69209 6.23002C2.66862 6.20189 2.63926 6.17925 2.60609 6.16372C2.57291 6.14819 2.53672 6.14014 2.50009 6.14014C2.46345 6.14014 2.42726 6.14819 2.39409 6.16372C2.36091 6.17925 2.33155 6.20189 2.30809 6.23002L0.342086 8.59002C0.311684 8.62652 0.29231 8.67093 0.286234 8.71804C0.280157 8.76516 0.287629 8.81303 0.307775 8.85605C0.327921 8.89907 0.359907 8.93546 0.399987 8.96096C0.440067 8.98645 0.486583 9.00001 0.534086 9.00002Z",
-          fill: o
+          fill: n
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           fillRule: "evenodd",
           clipRule: "evenodd",
           d: "M8.00001 3.00023C6.44801 3.00023 5.06001 3.70723 4.14301 4.81823C4.10206 4.87131 4.05086 4.9156 3.99245 4.94849C3.93404 4.98138 3.86961 5.00219 3.803 5.00968C3.73638 5.01717 3.66895 5.01119 3.60469 4.99209C3.54043 4.97299 3.48068 4.94117 3.42897 4.89851C3.37726 4.85586 3.33465 4.80324 3.30368 4.74379C3.27272 4.68434 3.25402 4.61926 3.24871 4.55244C3.24339 4.48562 3.25157 4.41841 3.27275 4.35481C3.29394 4.29121 3.32769 4.23252 3.37201 4.18223C4.1042 3.29576 5.0756 2.63824 6.17067 2.28789C7.26575 1.93753 8.43841 1.90908 9.54918 2.20592C10.66 2.50276 11.6621 3.1124 12.4364 3.96232C13.2107 4.81224 13.7246 5.86668 13.917 7.00023H12.9C12.6691 5.87104 12.0554 4.85623 11.1625 4.12738C10.2697 3.39853 9.15256 3.00037 8.00001 3.00023ZM3.10001 9.00023C3.28932 9.92486 3.73636 10.7771 4.38949 11.4584C5.04261 12.1397 5.87517 12.6223 6.79097 12.8505C7.70677 13.0787 8.66845 13.0431 9.5649 12.7479C10.4613 12.4527 11.256 11.9099 11.857 11.1822C11.898 11.1292 11.9492 11.0849 12.0076 11.052C12.066 11.0191 12.1304 10.9983 12.197 10.9908C12.2636 10.9833 12.3311 10.9893 12.3953 11.0084C12.4596 11.0275 12.5193 11.0593 12.5711 11.102C12.6228 11.1446 12.6654 11.1972 12.6963 11.2567C12.7273 11.3161 12.746 11.3812 12.7513 11.448C12.7566 11.5148 12.7484 11.5821 12.7273 11.6457C12.7061 11.7093 12.6723 11.7679 12.628 11.8182C11.8958 12.7047 10.9244 13.3622 9.82934 13.7126C8.73427 14.0629 7.56161 14.0914 6.45083 13.7945C5.34006 13.4977 4.33791 12.8881 3.5636 12.0381C2.78928 11.1882 2.27538 10.1338 2.08301 9.00023H3.10001Z",
-          fill: o
+          fill: n
         }
       )
     ]
   }
-), h1 = ({
+), Ye = ({
   width: t = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ h(
+  height: e = 16,
+  color: n = I.NAVY
+}) => /* @__PURE__ */ C(
   "svg",
   {
     width: t,
-    height: n,
+    height: e,
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M8 15C6.14348 15 4.36301 14.2625 3.05025 12.9497C1.7375 11.637 1 9.85652 1 8C1 6.14348 1.7375 4.36301 3.05025 3.05025C4.36301 1.7375 6.14348 1 8 1C9.85652 1 11.637 1.7375 12.9497 3.05025C14.2625 4.36301 15 6.14348 15 8C15 9.85652 14.2625 11.637 12.9497 12.9497C11.637 14.2625 9.85652 15 8 15ZM8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16Z",
-          fill: o
+          fill: n
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M7 11.5C7 11.3674 7.05268 11.2402 7.14645 11.1464C7.24021 11.0527 7.36739 11 7.5 11H8.5C8.63261 11 8.75979 11.0527 8.85355 11.1464C8.94732 11.2402 9 11.3674 9 11.5C9 11.6326 8.94732 11.7598 8.85355 11.8536C8.75979 11.9473 8.63261 12 8.5 12H7.5C7.36739 12 7.24021 11.9473 7.14645 11.8536C7.05268 11.7598 7 11.6326 7 11.5ZM5 8.5C5 8.36739 5.05268 8.24021 5.14645 8.14645C5.24021 8.05268 5.36739 8 5.5 8H10.5C10.6326 8 10.7598 8.05268 10.8536 8.14645C10.9473 8.24021 11 8.36739 11 8.5C11 8.63261 10.9473 8.75979 10.8536 8.85355C10.7598 8.94732 10.6326 9 10.5 9H5.5C5.36739 9 5.24021 8.94732 5.14645 8.85355C5.05268 8.75979 5 8.63261 5 8.5ZM3 5.5C3 5.36739 3.05268 5.24021 3.14645 5.14645C3.24021 5.05268 3.36739 5 3.5 5H12.5C12.6326 5 12.7598 5.05268 12.8536 5.14645C12.9473 5.24021 13 5.36739 13 5.5C13 5.63261 12.9473 5.75979 12.8536 5.85355C12.7598 5.94732 12.6326 6 12.5 6H3.5C3.36739 6 3.24021 5.94732 3.14645 5.85355C3.05268 5.75979 3 5.63261 3 5.5Z",
-          fill: o
+          fill: n
         }
       )
     ]
   }
-), _1 = P1(
+), Ut = Gt(
   void 0
-), Ee = ({ children: t }) => {
-  const [n, o] = E([]), i = D((d, a) => {
-    o((s) => (s.forEach((l) => {
-      l.current && l !== d && l.current.hide(a);
-    }), [])), d.current?.toggle(a), o([d]);
-  }, []), r = D((d) => {
-    o((a) => a.filter((s) => s !== d));
-  }, []), c = H(
+), T1 = ({ children: t }) => {
+  const [e, n] = O([]), s = tt((c, p) => {
+    n((a) => (a.forEach((r) => {
+      r.current && r !== c && r.current.hide(p);
+    }), [])), c.current?.toggle(p), n([c]);
+  }, []), o = tt((c) => {
+    n((p) => p.filter((a) => a !== c));
+  }, []), l = k(
     () => ({
-      openMenus: n,
-      openMenu: i,
-      closeMenu: r
+      openMenus: e,
+      openMenu: s,
+      closeMenu: o
     }),
-    [n, i, r]
+    [e, s, o]
   );
-  return /* @__PURE__ */ e(_1.Provider, { value: c, children: t });
-}, r1 = () => {
-  const t = M1(_1);
+  return /* @__PURE__ */ i(Ut.Provider, { value: l, children: t });
+}, Lt = () => {
+  const t = Vt(Ut);
   if (t === void 0)
     throw new Error("useMenuProvider must be used within a MenuProvider");
   return t;
-}, lt = ({ color: t = "#E32012" }) => /* @__PURE__ */ h(
+}, Ge = ({ color: t = I.ERROR_RED }) => /* @__PURE__ */ C(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -374,330 +380,396 @@ const J1 = "_panel_19663_1", Q1 = "_panelExiting_19663_13", U1 = "_menuItem_1966
     viewBox: "0 0 16 16",
     fill: "none",
     children: [
-      /* @__PURE__ */ e("g", { clipPath: "url(#clip0_3105_5367)", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ i("g", { clipPath: "url(#clip0_3105_5367)", children: /* @__PURE__ */ i(
         "path",
         {
           d: "M16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 0 10.1217 0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0C10.1217 0 12.1566 0.842855 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8ZM8 4C7.87361 4.00007 7.74863 4.02662 7.63312 4.07793C7.51761 4.12924 7.41413 4.20418 7.32934 4.29791C7.24456 4.39165 7.18035 4.5021 7.14084 4.62217C7.10134 4.74223 7.08743 4.86923 7.1 4.995L7.45 8.502C7.46176 8.63977 7.5248 8.76811 7.62664 8.86164C7.72849 8.95516 7.86173 9.00705 8 9.00705C8.13827 9.00705 8.27151 8.95516 8.37336 8.86164C8.4752 8.76811 8.53824 8.63977 8.55 8.502L8.9 4.995C8.91257 4.86923 8.89866 4.74223 8.85915 4.62217C8.81965 4.5021 8.75544 4.39165 8.67066 4.29791C8.58587 4.20418 8.48239 4.12924 8.36688 4.07793C8.25137 4.02662 8.12639 4.00007 8 4ZM8.002 10C7.73678 10 7.48243 10.1054 7.29489 10.2929C7.10736 10.4804 7.002 10.7348 7.002 11C7.002 11.2652 7.10736 11.5196 7.29489 11.7071C7.48243 11.8946 7.73678 12 8.002 12C8.26722 12 8.52157 11.8946 8.70911 11.7071C8.89664 11.5196 9.002 11.2652 9.002 11C9.002 10.7348 8.89664 10.4804 8.70911 10.2929C8.52157 10.1054 8.26722 10 8.002 10Z",
           fill: t
         }
       ) }),
-      /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_3105_5367", children: /* @__PURE__ */ e("rect", { width: "16", height: "16", fill: "white" }) }) })
+      /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "clip0_3105_5367", children: /* @__PURE__ */ i("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
-), s1 = (t) => {
-  const {
-    isSet: n,
-    isSelected: o,
-    isFilter: i,
-    className: r,
-    title: c,
-    icon: d,
-    contextMenuItems: a = void 0,
-    onDeleteStep: s,
-    onUpdateFilter: l,
-    onSelectStep: f,
-    subtitle: b,
-    isInvalid: _,
-    localId: x
-  } = t, C = $(null), { openMenu: p, closeMenu: I } = r1(), w = i1(), v = H(
-    () => [
-      {
-        label: "Add Step Filter",
-        icon: /* @__PURE__ */ e("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ e(h1, {}) }),
-        command: (g) => {
-          g?.originalEvent?.stopPropagation(), l && l(x);
-        },
-        template: w
-      },
-      {
-        label: "Remove",
-        icon: /* @__PURE__ */ e(J, { color: "#3B64A0", size: 18 }),
-        command: (g) => {
-          g?.originalEvent?.stopPropagation(), s && s(x);
-        },
-        template: w
-      }
-    ],
-    [l, s, x, w]
-  ), m = H(() => a !== void 0 ? a : v, [a, v]), y = (g) => {
-    g.stopPropagation(), p(C, g);
-  }, L = H(() => o && _ ? N.step + " " + N.selectedInvalid : o ? N.step + " " + N.selected : n ? N.step + " " + N.isSet : _ ? N.step + " " + N.invalid : N.step, [n, o, _]), u = H(() => _ ? /* @__PURE__ */ e(lt, { color: "#E32012" }) : d, [d, _]);
-  return /* @__PURE__ */ e("div", { className: N.container + " " + r, children: /* @__PURE__ */ h("div", { children: [
-    /* @__PURE__ */ h("div", { className: L, onClick: () => f(x), children: [
-      /* @__PURE__ */ h("div", { className: N.content, children: [
-        /* @__PURE__ */ e("div", { className: `${N.icon} ${_ && N.invalid}`, children: u }),
-        /* @__PURE__ */ e("div", { className: N.title, children: c })
-      ] }),
-      /* @__PURE__ */ e(
-        "button",
-        {
-          className: N.dotsButton,
-          onClick: y,
-          "aria-haspopup": !0,
-          "aria-label": "Step options",
-          children: /* @__PURE__ */ e(
-            q,
-            {
-              className: N.dots,
-              color: _ ? "#E32012" : "#3B64A0",
-              size: 16
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ e(
-        Q,
-        {
-          model: m,
-          popup: !0,
-          ref: C,
-          onClick: (g) => g.stopPropagation(),
-          onHide: () => I(C)
-        }
-      )
-    ] }),
-    i && /* @__PURE__ */ h(
-      "div",
-      {
-        className: N.filterFlag,
-        role: "button",
-        tabIndex: 0,
-        onClick: () => {
-          l && l(x);
-        },
-        onKeyDown: (g) => {
-          (g.key === "Enter" || g.key === " ") && l && (g.preventDefault(), l(x));
-        },
-        children: [
-          /* @__PURE__ */ e(h1, { color: "#3B64A0" }),
-          /* @__PURE__ */ e("span", { children: "Filter" }),
-          /* @__PURE__ */ e(
-            q,
-            {
-              className: N.dots,
-              color: _ ? "#E32012" : "#3B64A0",
-              style: { height: "10px" }
-            }
-          )
-        ]
-      }
-    ),
-    b && /* @__PURE__ */ e("div", { className: N.subtitle, children: b })
-  ] }) });
-}, ct = () => /* @__PURE__ */ h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
-  /* @__PURE__ */ h("g", { clipPath: "url(#clip0_6551_9169)", children: [
-    /* @__PURE__ */ e("rect", { width: "24", height: "24", rx: "12", fill: "#0C971F" }),
-    /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V11H18C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13H13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H6C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11H11V6Z", fill: "white" })
-  ] }),
-  /* @__PURE__ */ e("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "11.25", stroke: "#14BC2B", strokeWidth: "1.5" }),
-  /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: "clip0_6551_9169", children: /* @__PURE__ */ e("rect", { width: "24", height: "24", rx: "12", fill: "white" }) }) })
-] }), at = "_multipleTriggersIcon_oxhdi_1", dt = {
-  multipleTriggersIcon: at
-}, pt = () => /* @__PURE__ */ e("div", { className: dt.multipleTriggersIcon, children: /* @__PURE__ */ e("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.5 3.75C1.5 3.15326 1.73705 2.58097 2.15901 2.15901C2.58097 1.73705 3.15326 1.5 3.75 1.5H5.25C5.84674 1.5 6.41903 1.73705 6.84099 2.15901C7.26295 2.58097 7.5 3.15326 7.5 3.75L13.701 3.75C13.8661 3.46404 14.1209 3.24054 14.426 3.11418C14.7311 2.98782 15.0693 2.96565 15.3883 3.05111C15.7072 3.13657 15.9891 3.32489 16.1901 3.58686C16.3911 3.84882 16.5 4.1698 16.5 4.5C16.5 4.8302 16.3911 5.15118 16.1901 5.41314C15.9891 5.67511 15.7072 5.86343 15.3883 5.94889C15.0693 6.03435 14.7311 6.01218 14.426 5.88582C14.1209 5.75946 13.8661 5.53596 13.701 5.25H10.686C10.956 5.52 11.196 5.8215 11.412 6.1575C12.369 7.6455 12.75 9.6885 12.75 12C12.75 14.9895 13.1355 16.638 13.8195 17.55C14.3535 18.264 15.162 18.6315 16.5 18.726C16.5063 18.1334 16.7462 17.5673 17.1674 17.1505C17.5887 16.7337 18.1574 16.5 18.75 16.5H20.25C20.8467 16.5 21.419 16.7371 21.841 17.159C22.2629 17.581 22.5 18.1533 22.5 18.75V20.25C22.5 20.8467 22.2629 21.419 21.841 21.841C21.419 22.2629 20.8467 22.5 20.25 22.5H18.75C18.1533 22.5 17.581 22.2629 17.159 21.841C16.7371 21.419 16.5 20.8467 16.5 20.25H10.299C10.1339 20.536 9.87905 20.7595 9.57399 20.8858C9.26892 21.0122 8.93068 21.0344 8.61173 20.9489C8.29278 20.8634 8.01095 20.6751 7.80993 20.4131C7.60892 20.1512 7.49996 19.8302 7.49996 19.5C7.49996 19.1698 7.60892 18.8488 7.80993 18.5869C8.01095 18.3249 8.29278 18.1366 8.61173 18.0511C8.93068 17.9656 9.26892 17.9878 9.57399 18.1142C9.87905 18.2405 10.1339 18.464 10.299 18.75H12.8655C12.7785 18.6538 12.6959 18.5537 12.618 18.45C11.6145 17.1105 11.25 15.0105 11.25 12C11.25 9.81 10.881 8.1045 10.1505 6.9675C9.5655 6.06 8.7225 5.4675 7.5 5.2995C7.48706 5.88762 7.2443 6.44728 6.82374 6.85859C6.40318 7.2699 5.83826 7.50014 5.25 7.5H3.75C3.15326 7.5 2.58097 7.26295 2.15901 6.84099C1.73705 6.41903 1.5 5.84674 1.5 5.25V3.75ZM3.75 3C3.55109 3 3.36032 3.07902 3.21967 3.21967C3.07902 3.36032 3 3.55109 3 3.75V5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H5.25C5.44891 6 5.63968 5.92098 5.78033 5.78033C5.92098 5.63968 6 5.44891 6 5.25V3.75C6 3.55109 5.92098 3.36032 5.78033 3.21967C5.63968 3.07902 5.44891 3 5.25 3H3.75ZM18.75 18C18.5511 18 18.3603 18.079 18.2197 18.2197C18.079 18.3603 18 18.5511 18 18.75V20.25C18 20.4489 18.079 20.6397 18.2197 20.7803C18.3603 20.921 18.5511 21 18.75 21H20.25C20.4489 21 20.6397 20.921 20.7803 20.7803C20.921 20.6397 21 20.4489 21 20.25V18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18H18.75Z", fill: "white" }) }) }), ut = "_trigger_kfg1y_1", ht = "_title_kfg1y_7", Ct = "_empty_kfg1y_15", mt = "_triggerContainer_kfg1y_21", ft = "_stepsContainer_kfg1y_25", gt = "_stepItem_kfg1y_51", vt = "_curvesSvg_kfg1y_70", _t = "_centralNode_kfg1y_78", xt = "_iconWrapper_kfg1y_104", wt = "_fadeIn_kfg1y_127", yt = "_fadeOut_kfg1y_130", It = "_operationContainer_kfg1y_134", M = {
-  trigger: ut,
-  title: ht,
-  empty: Ct,
-  triggerContainer: mt,
-  stepsContainer: ft,
-  stepItem: gt,
-  curvesSvg: vt,
-  centralNode: _t,
-  iconWrapper: xt,
-  fadeIn: wt,
-  fadeOut: yt,
-  operationContainer: It
-}, bt = () => /* @__PURE__ */ e(
+), Ve = () => (t, e) => /* @__PURE__ */ C(
+  "button",
+  {
+    type: "button",
+    className: `${H.menuItem} ${t.disabled ? H.disabled : ""}`,
+    disabled: t.disabled,
+    onClick: (n) => {
+      t.disabled || e.onClick(n);
+    },
+    children: [
+      /* @__PURE__ */ i("span", { className: H.menuItemIcon, children: t.icon }),
+      /* @__PURE__ */ i("span", { className: H.menuItemText, children: t.label })
+    ]
+  }
+), Ze = () => /* @__PURE__ */ i(
   "div",
   {
     style: {
       height: "1px",
       marginLeft: "4px",
       marginRight: "4px",
-      borderTop: "1px solid #a1bbdc"
+      borderTop: `1px solid ${I.SEPARATOR}`
     }
   }
-), Nt = 80, A = 34, kt = ({
+), Wt = (t) => t.separator === !0, qe = (t, e) => t.disabled === !0 || t.disabledOnPrepend === !0 && e.operation === "prepend", Ue = (t, e) => t.visible?.(e) ?? !0, bt = (t, e, n) => {
+  if (!t || t.length === 0) return [];
+  const s = Ve();
+  return t.filter((l) => Wt(l) ? !0 : Ue(l, e)).map((l, c) => {
+    if (Wt(l))
+      return {
+        label: `__separator-${c}`,
+        template: () => /* @__PURE__ */ i(Ze, {})
+      };
+    const p = qe(l, e);
+    return {
+      label: l.label,
+      icon: l.icon,
+      disabled: p,
+      command: (a) => {
+        a?.originalEvent?.stopPropagation(), !p && n(l.actionId, e);
+      },
+      template: s
+    };
+  });
+}, ht = (t) => {
+  const {
+    isSet: e,
+    isSelected: n,
+    isFilter: s,
+    debuggerMode: o = !1,
+    status: l,
+    className: c,
+    title: p,
+    icon: a,
+    items: r,
+    menuContext: d,
+    onAction: g,
+    filterFlagActionId: b,
+    onSelectStep: h,
+    subtitle: m,
+    isInvalid: x,
+    id: f
+  } = t, N = $(null), { openMenu: E, closeMenu: v, openMenus: y } = Lt(), u = k(
+    () => d ?? { stepId: f },
+    [d, f]
+  ), _ = k(() => g ? bt(r, u, g) : [], [r, u, g]), T = (w) => {
+    w.stopPropagation(), E(N, w);
+  }, L = () => {
+    b && g && g(b, u);
+  }, D = k(() => {
+    if (!(!o || l == null || l === "pending"))
+      return {
+        "--step-debugger-accent": wt[l]
+      };
+  }, [o, l]), X = k(() => n && x ? P.step + " " + P.selectedInvalid : o && l != null && l !== "pending" ? P.step + " " + P.debuggerStatus : n ? P.step + " " + P.selected : e ? P.step + " " + P.isSet : x ? P.step + " " + P.invalid : P.step, [e, n, x, l, o]), K = k(() => x ? /* @__PURE__ */ i(Ge, { color: I.ERROR_RED }) : a, [a, x]), j = !!(b && g);
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: P.container + " " + c,
+      "data-id": void 0,
+      children: /* @__PURE__ */ C("div", { children: [
+        /* @__PURE__ */ C(
+          "div",
+          {
+            className: X,
+            style: D,
+            onClick: () => {
+              y.length > 0 || h(f);
+            },
+            children: [
+              /* @__PURE__ */ C("div", { className: P.content, children: [
+                /* @__PURE__ */ i("div", { className: `${P.icon} ${x && P.invalid}`, children: K }),
+                /* @__PURE__ */ i("div", { className: P.title, children: p })
+              ] }),
+              _.length > 0 && /* @__PURE__ */ C(G, { children: [
+                /* @__PURE__ */ i(
+                  "button",
+                  {
+                    className: P.dotsButton,
+                    onClick: T,
+                    "aria-haspopup": !0,
+                    "aria-label": "Step options",
+                    children: /* @__PURE__ */ i(mt, { className: P.dots, size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  xt,
+                  {
+                    model: _,
+                    popup: !0,
+                    ref: N,
+                    onClick: (w) => w.stopPropagation(),
+                    onHide: () => v(N)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ C(
+          "div",
+          {
+            className: P.filterFlag,
+            role: j ? "button" : void 0,
+            tabIndex: j ? 0 : void 0,
+            onClick: j ? L : void 0,
+            onKeyDown: (w) => {
+              j && (w.key === "Enter" || w.key === " ") && (w.preventDefault(), L());
+            },
+            children: [
+              /* @__PURE__ */ i(Ye, { color: I.NAVY }),
+              /* @__PURE__ */ i("span", { children: "Filter" }),
+              !o && /* @__PURE__ */ i(
+                mt,
+                {
+                  className: P.dots,
+                  color: x ? I.ERROR_RED : I.NAVY,
+                  style: { height: "10px" }
+                }
+              )
+            ]
+          }
+        ),
+        m && /* @__PURE__ */ i("div", { className: P.subtitle, children: m })
+      ] })
+    }
+  );
+}, Xe = () => /* @__PURE__ */ C("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  /* @__PURE__ */ C("g", { clipPath: "url(#clip0_6551_9169)", children: [
+    /* @__PURE__ */ i("rect", { width: "24", height: "24", rx: "12", fill: I.ADD_TRIGGER_FILL }),
+    /* @__PURE__ */ i("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11 6C11 5.44772 11.4477 5 12 5C12.5523 5 13 5.44772 13 6V11H18C18.5523 11 19 11.4477 19 12C19 12.5523 18.5523 13 18 13H13V18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18V13H6C5.44772 13 5 12.5523 5 12C5 11.4477 5.44772 11 6 11H11V6Z", fill: "white" })
+  ] }),
+  /* @__PURE__ */ i("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "11.25", stroke: I.ADD_TRIGGER_STROKE, strokeWidth: "1.5" }),
+  /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: "clip0_6551_9169", children: /* @__PURE__ */ i("rect", { width: "24", height: "24", rx: "12", fill: "white" }) }) })
+] }), Ke = "_multipleTriggersIcon_oxhdi_1", Je = {
+  multipleTriggersIcon: Ke
+}, Qe = ({
+  color: t
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: Je.multipleTriggersIcon,
+    style: t != null ? { backgroundColor: t, color: t } : void 0,
+    children: /* @__PURE__ */ i("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ i("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.5 3.75C1.5 3.15326 1.73705 2.58097 2.15901 2.15901C2.58097 1.73705 3.15326 1.5 3.75 1.5H5.25C5.84674 1.5 6.41903 1.73705 6.84099 2.15901C7.26295 2.58097 7.5 3.15326 7.5 3.75L13.701 3.75C13.8661 3.46404 14.1209 3.24054 14.426 3.11418C14.7311 2.98782 15.0693 2.96565 15.3883 3.05111C15.7072 3.13657 15.9891 3.32489 16.1901 3.58686C16.3911 3.84882 16.5 4.1698 16.5 4.5C16.5 4.8302 16.3911 5.15118 16.1901 5.41314C15.9891 5.67511 15.7072 5.86343 15.3883 5.94889C15.0693 6.03435 14.7311 6.01218 14.426 5.88582C14.1209 5.75946 13.8661 5.53596 13.701 5.25H10.686C10.956 5.52 11.196 5.8215 11.412 6.1575C12.369 7.6455 12.75 9.6885 12.75 12C12.75 14.9895 13.1355 16.638 13.8195 17.55C14.3535 18.264 15.162 18.6315 16.5 18.726C16.5063 18.1334 16.7462 17.5673 17.1674 17.1505C17.5887 16.7337 18.1574 16.5 18.75 16.5H20.25C20.8467 16.5 21.419 16.7371 21.841 17.159C22.2629 17.581 22.5 18.1533 22.5 18.75V20.25C22.5 20.8467 22.2629 21.419 21.841 21.841C21.419 22.2629 20.8467 22.5 20.25 22.5H18.75C18.1533 22.5 17.581 22.2629 17.159 21.841C16.7371 21.419 16.5 20.8467 16.5 20.25H10.299C10.1339 20.536 9.87905 20.7595 9.57399 20.8858C9.26892 21.0122 8.93068 21.0344 8.61173 20.9489C8.29278 20.8634 8.01095 20.6751 7.80993 20.4131C7.60892 20.1512 7.49996 19.8302 7.49996 19.5C7.49996 19.1698 7.60892 18.8488 7.80993 18.5869C8.01095 18.3249 8.29278 18.1366 8.61173 18.0511C8.93068 17.9656 9.26892 17.9878 9.57399 18.1142C9.87905 18.2405 10.1339 18.464 10.299 18.75H12.8655C12.7785 18.6538 12.6959 18.5537 12.618 18.45C11.6145 17.1105 11.25 15.0105 11.25 12C11.25 9.81 10.881 8.1045 10.1505 6.9675C9.5655 6.06 8.7225 5.4675 7.5 5.2995C7.48706 5.88762 7.2443 6.44728 6.82374 6.85859C6.40318 7.2699 5.83826 7.50014 5.25 7.5H3.75C3.15326 7.5 2.58097 7.26295 2.15901 6.84099C1.73705 6.41903 1.5 5.84674 1.5 5.25V3.75ZM3.75 3C3.55109 3 3.36032 3.07902 3.21967 3.21967C3.07902 3.36032 3 3.55109 3 3.75V5.25C3 5.44891 3.07902 5.63968 3.21967 5.78033C3.36032 5.92098 3.55109 6 3.75 6H5.25C5.44891 6 5.63968 5.92098 5.78033 5.78033C5.92098 5.63968 6 5.44891 6 5.25V3.75C6 3.55109 5.92098 3.36032 5.78033 3.21967C5.63968 3.07902 5.44891 3 5.25 3H3.75ZM18.75 18C18.5511 18 18.3603 18.079 18.2197 18.2197C18.079 18.3603 18 18.5511 18 18.75V20.25C18 20.4489 18.079 20.6397 18.2197 20.7803C18.3603 20.921 18.5511 21 18.75 21H20.25C20.4489 21 20.6397 20.921 20.7803 20.7803C20.921 20.6397 21 20.4489 21 20.25V18.75C21 18.5511 20.921 18.3603 20.7803 18.2197C20.6397 18.079 20.4489 18 20.25 18H18.75Z", fill: "white" }) })
+  }
+), tn = "_trigger_kfg1y_1", en = "_title_kfg1y_7", nn = "_empty_kfg1y_15", sn = "_triggerContainer_kfg1y_21", on = "_stepsContainer_kfg1y_25", rn = "_stepItem_kfg1y_51", ln = "_curvesSvg_kfg1y_70", cn = "_centralNode_kfg1y_78", an = "_iconWrapper_kfg1y_104", dn = "_fadeIn_kfg1y_127", un = "_fadeOut_kfg1y_130", pn = "_operationContainer_kfg1y_134", M = {
+  trigger: tn,
+  title: en,
+  empty: nn,
+  triggerContainer: sn,
+  stepsContainer: on,
+  stepItem: rn,
+  curvesSvg: ln,
+  centralNode: cn,
+  iconWrapper: an,
+  fadeIn: dn,
+  fadeOut: un,
+  operationContainer: pn
+}, hn = [
+  "failed",
+  "invalid",
+  "cancelled",
+  "validating",
+  "running",
+  "finished",
+  "skipped",
+  "pending"
+], Xt = (t) => {
+  const e = [
+    ...new Set(t.filter((n) => n != null))
+  ];
+  if (e.length !== 0) {
+    for (const n of hn)
+      if (e.includes(n)) return n;
+    return e[0];
+  }
+}, Kt = (t, e) => !e || t == null ? I.NAVY : wt[t], fn = (t, e, n = I.NAVY) => t == null ? n : e?.[t] ?? wt[t], gn = (t, e = I.NAVY) => ({
+  statusLine: (n) => fn(n, t, e)
+}), dt = (t) => {
+  if ("status" in t && t.status != null) return t.status;
+  const e = t.steps;
+  if (e?.[0]?.status != null) return e[0].status;
+}, Cn = 80, ft = 34, Jt = ({
   steps: t,
-  title: n,
-  className: o,
-  onDeleteTrigger: i,
-  onAddTrigger: r,
-  onSelectStep: c,
-  onUpdateFilter: d,
-  onCenterYUpdate: a
+  title: e,
+  className: n,
+  items: s,
+  hubActionId: o,
+  filterFlagActionId: l,
+  onAction: c,
+  onSelectStep: p,
+  onCenterYUpdate: a,
+  debuggerMode: r = !1,
+  resolveCurveStrokeColor: d,
+  nextStepStatus: g
 }) => {
-  const s = $(null), l = $([]), [f, b] = E([]), [_, x] = E({ width: 0, height: 0 }), [C, p] = E(!1), [I, w] = E(!1), v = $(null);
-  Y(() => {
-    const u = () => {
-      if (!s.current) return;
-      const g = [];
-      if (l.current.forEach((P, T) => {
-        if (P && s.current) {
-          const k = s.current.getBoundingClientRect(), j = P.getBoundingClientRect();
-          g.push({
-            localId: t[T]?.localId ?? `step-${T}`,
-            top: j.top - k.top,
-            right: j.right - k.left,
-            centerY: j.top - k.top + j.height / 2
+  const b = $(null), h = $([]), [m, x] = O([]), [f, N] = O({ width: 0, height: 0 }), [E, v] = O(!1), [y, u] = O(!1), _ = $(null);
+  ot(() => {
+    const w = () => {
+      if (!b.current) return;
+      const R = [];
+      if (h.current.forEach((F, A) => {
+        if (F && b.current) {
+          const Y = b.current.getBoundingClientRect(), B = F.getBoundingClientRect();
+          R.push({
+            id: t[A]?.id ?? `step-${A}`,
+            top: B.top - Y.top,
+            right: B.right - Y.left,
+            centerY: B.top - Y.top + B.height / 2
           });
         }
-      }), b(g), s.current && g.length > 0) {
-        const P = s.current.getBoundingClientRect(), T = Math.min(...g.map((S) => S.top)), k = l.current.filter(Boolean).map((S) => S?.offsetHeight || 68), j = Math.max(
-          ...g.map((S, N1) => S.top + (k[N1] || 68))
-        ), U = Math.max(...g.map((S) => S.right)) + 0, t1 = Math.max(
-          P.height,
-          j - T + 100
+      }), x(R), b.current && R.length > 0) {
+        const F = b.current.getBoundingClientRect(), A = Math.min(...R.map((Z) => Z.top)), Y = h.current.filter(Boolean).map((Z) => Z?.offsetHeight || 68), B = Math.max(
+          ...R.map((Z, de) => Z.top + (Y[de] || 68))
+        ), nt = Math.max(...R.map((Z) => Z.right)) + 0, ct = Math.max(
+          F.height,
+          B - A + 100
         );
-        x({
-          width: U,
-          height: t1
+        N({
+          width: nt,
+          height: ct
         });
       }
     };
-    return u(), window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
-  }, [t]), Y(() => {
-    let u = !0;
-    if (C) {
-      v.current && (clearTimeout(v.current), v.current = null);
-      const g = setTimeout(() => {
-        u && w(!0);
+    return w(), window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
+  }, [t]), ot(() => {
+    let w = !0;
+    if (E) {
+      _.current && (clearTimeout(_.current), _.current = null);
+      const R = setTimeout(() => {
+        w && u(!0);
       }, 0);
       return () => {
-        u = !1, clearTimeout(g);
+        w = !1, clearTimeout(R);
       };
     }
-    return v.current = setTimeout(() => {
-      u && w(!1);
+    return _.current = setTimeout(() => {
+      w && u(!1);
     }, 140), () => {
-      u = !1, v.current && (clearTimeout(v.current), v.current = null);
+      w = !1, _.current && (clearTimeout(_.current), _.current = null);
     };
-  }, [C]);
-  const m = f.length > 0 ? Nt : 0, y = H(() => f.length > 1 ? f.reduce((u, g) => u + g.top + A, 0) / f.length : f.length === 1 ? f[0].top + A : 0, [f]);
-  if (Y(() => {
-    a?.(y);
-  }, [y, a]), t.length === 0)
-    return /* @__PURE__ */ h("div", { className: `${M.trigger} ${o || ""}`, children: [
-      n && /* @__PURE__ */ e("h3", { className: M.title, children: n }),
-      /* @__PURE__ */ e("div", { className: M.empty, children: "No steps" })
+  }, [E]);
+  const T = m.length > 0 ? Cn : 0, L = k(() => m.length > 1 ? m.reduce((w, R) => w + R.top + ft, 0) / m.length : m.length === 1 ? m[0].top + ft : 0, [m]);
+  ot(() => {
+    a?.(L);
+  }, [L, a]);
+  const D = r && t.some((w) => w.status === "finished") && g === "finished", X = () => {
+    o && c && c(o, {});
+  }, K = !!(o && c);
+  if (t.length === 0)
+    return /* @__PURE__ */ C("div", { className: `${M.trigger} ${n || ""}`, children: [
+      e && /* @__PURE__ */ i("h3", { className: M.title, children: e }),
+      /* @__PURE__ */ i("div", { className: M.empty, children: "No steps" })
     ] });
-  const L = (u, g, P, T) => {
-    const k = P - u, j = Math.min(k * 0.6, 60), d1 = u + j, U = g, t1 = P - j;
-    return `M ${u} ${g} C ${d1} ${U}, ${t1} ${T}, ${P} ${T}`;
+  const j = (w, R, F, A) => {
+    const Y = F - w, B = Math.min(Y * 0.6, 60), lt = w + B, nt = R, ct = F - B;
+    return `M ${w} ${R} C ${lt} ${nt}, ${ct} ${A}, ${F} ${A}`;
   };
-  return /* @__PURE__ */ h("div", { className: `${M.trigger} ${o || ""}`, ref: s, children: [
-    n && /* @__PURE__ */ e("h3", { className: M.title, children: n }),
-    /* @__PURE__ */ h("div", { className: M.triggerContainer, children: [
-      /* @__PURE__ */ e("div", { className: M.stepsContainer, children: t.map((u, g) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ C("div", { className: `${M.trigger} ${n || ""}`, ref: b, children: [
+    e && /* @__PURE__ */ i("h3", { className: M.title, children: e }),
+    /* @__PURE__ */ C("div", { className: M.triggerContainer, children: [
+      /* @__PURE__ */ i("div", { className: M.stepsContainer, children: t.map((w, R) => /* @__PURE__ */ i(
         "div",
         {
-          ref: (P) => {
-            l.current[g] = P;
+          ref: (F) => {
+            h.current[R] = F;
           },
-          children: /* @__PURE__ */ e(
-            s1,
+          children: /* @__PURE__ */ i(
+            ht,
             {
-              title: u.title,
+              title: w.title,
               className: M.stepItem,
-              localId: u.localId,
-              idx: g,
-              isSet: u.isSet,
-              isSelected: u.isSelected,
-              isInvalid: u.isInvalid,
-              isFilter: u.isFilter,
-              icon: u.icon,
-              onSelectStep: c,
-              onUpdateFilter: d,
-              contextMenuItems: [
-                {
-                  label: "Delete",
-                  icon: /* @__PURE__ */ e(J, { className: "mr-2", color: "#3B64A0", size: 18 }),
-                  command: () => {
-                    i?.(u.localId);
-                  },
-                  disabled: t.length === 1
-                },
-                {
-                  label: "",
-                  template: () => /* @__PURE__ */ e(bt, {})
-                },
-                {
-                  label: "Add More Triggers",
-                  icon: /* @__PURE__ */ e(q1, { className: "mr-2", color: "#3B64A0", size: 18 }),
-                  command: () => {
-                    r?.();
-                  }
-                }
-              ]
+              id: w.id,
+              isSet: w.isSet,
+              isSelected: w.isSelected,
+              isInvalid: w.isInvalid,
+              isFilter: w.isFilter,
+              status: w.status,
+              debuggerMode: r,
+              icon: w.icon,
+              onSelectStep: p,
+              items: s,
+              menuContext: { stepId: w.id },
+              onAction: c,
+              filterFlagActionId: l
             }
           )
         },
-        u.localId
+        w.id
       )) }),
-      /* @__PURE__ */ e("div", { style: { position: "relative" }, children: f.length > 1 && /* @__PURE__ */ e(
+      /* @__PURE__ */ i("div", { style: { position: "relative" }, children: m.length > 1 && /* @__PURE__ */ i(
         "svg",
         {
           className: M.curvesSvg,
-          width: _.width,
-          height: _.height,
-          children: f.map((u) => {
-            const P = f.length === 1 ? f[0].top + A : u.top + A;
-            return /* @__PURE__ */ e(
+          width: f.width,
+          height: f.height,
+          children: m.map((w) => {
+            const F = m.length === 1 ? m[0].top + ft : w.top + ft, A = T, Y = L, B = t.find(
+              (ct) => ct.id === w.id
+            )?.status, lt = d != null ? d(B) : Kt(B, r), nt = pt(lt);
+            return /* @__PURE__ */ i(
               "path",
               {
-                d: L(0, P, m, y),
-                stroke: "#3b64a0",
-                strokeWidth: "2",
+                d: j(0, F, A, Y),
+                stroke: lt,
+                strokeWidth: nt ? 3 : 2,
                 fill: "none",
-                strokeLinecap: "round"
+                strokeLinecap: "round",
+                strokeDasharray: nt ? "0 6" : void 0
               },
-              u.localId
+              w.id
             );
           })
         }
       ) }),
-      f.length > 1 ? /* @__PURE__ */ h("div", { style: { position: "relative", marginRight: "140px" }, children: [
-        /* @__PURE__ */ e(
+      m.length > 1 ? /* @__PURE__ */ C("div", { style: { position: "relative", marginRight: "140px" }, children: [
+        /* @__PURE__ */ i(
           "div",
           {
             className: M.centralNode,
             style: {
-              "--node-x": `${m}px`,
-              "--node-y": `${y}px`
+              "--node-x": `${T}px`,
+              "--node-y": `${L}px`,
+              ...r && {
+                cursor: "default",
+                pointerEvents: "none"
+              },
+              ...D && {
+                backgroundColor: I.FINISHED_GREEN
+              }
+            },
+            ...!r && {
+              onMouseEnter: () => v(!0),
+              onMouseLeave: () => v(!1)
             },
-            onMouseEnter: () => p(!0),
-            onMouseLeave: () => p(!1),
-            children: I ? /* @__PURE__ */ e(
+            children: !r && K && y ? /* @__PURE__ */ i(
               "div",
               {
-                className: `${M.iconWrapper} ${C ? M.fadeIn : M.fadeOut}`,
-                onClick: r,
-                children: /* @__PURE__ */ e(ct, {})
+                className: `${M.iconWrapper} ${E ? M.fadeIn : M.fadeOut}`,
+                onClick: X,
+                children: /* @__PURE__ */ i(Xe, {})
               }
             ) : null
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ i(
           "div",
           {
             className: M.operationContainer,
             style: {
-              "--op-x": `${m + 16}px`,
-              "--op-y": `${y}px`
+              "--op-x": `${T + 16}px`,
+              "--op-y": `${L}px`
             },
-            children: /* @__PURE__ */ e(pt, {})
+            children: /* @__PURE__ */ i(Qe, { color: D ? I.FINISHED_GREEN : void 0 })
           }
         )
       ] }) : null
     ] })
   ] });
-};
-function Bt(t) {
-  return Z({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "circle", attr: { cx: "12", cy: "12", r: "4" }, child: [] }, { tag: "line", attr: { x1: "1.05", y1: "12", x2: "7", y2: "12" }, child: [] }, { tag: "line", attr: { x1: "17.01", y1: "12", x2: "22.96", y2: "12" }, child: [] }] })(t);
-}
-function Pt(t) {
-  return Z({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "polygon", attr: { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" }, child: [] }] })(t);
-}
-const Mt = () => /* @__PURE__ */ h(
+}, jt = () => /* @__PURE__ */ C(
   "svg",
   {
     width: "24",
@@ -706,302 +778,323 @@ const Mt = () => /* @__PURE__ */ h(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M6 12L18 12",
-          stroke: "#3B64A0",
+          stroke: I.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M12 6V18",
-          stroke: "#3B64A0",
+          stroke: I.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
       )
     ]
   }
-), Lt = "_stepLinkIcon_18u2g_1", Et = "_stepLinkLine_18u2g_15", $t = "_stepLinkContainer_18u2g_39", X = {
-  stepLinkIcon: Lt,
-  stepLinkLine: Et,
-  stepLinkContainer: $t
-}, F = ({
-  onAddStep: t,
-  onAddTrigger: n,
-  onAddCondition: o,
-  onAddLoop: i,
-  stepId: r,
-  index: c = 0,
-  style: d,
-  pathId: a
+), mn = "_stepLinkIcon_b0452_1", vn = "_stepLinkLine_b0452_15", _n = "_stepLinkContainer_b0452_39", xn = "_readOnly_b0452_61", wn = "_debuggerIconCollapsed_b0452_66", bn = "_dashedLine_b0452_75", W = {
+  stepLinkIcon: mn,
+  stepLinkLine: vn,
+  stepLinkContainer: _n,
+  readOnly: xn,
+  debuggerIconCollapsed: wn,
+  dashedLine: bn
+}, it = ({
+  items: t,
+  onAction: e,
+  lineColor: n = I.NAVY,
+  stepId: s,
+  index: o = 0,
+  style: l,
+  pathId: c
 }) => {
-  const s = i1(), l = $(null), f = [
-    ...c > 0 ? [
-      {
-        label: "Trigger",
-        icon: /* @__PURE__ */ e(Pt, { color: "#3B64A0", size: 18 }),
-        command: () => {
-          n?.(r, a, "trigger");
-        },
-        template: s
-      }
-    ] : [],
-    {
-      label: "Step",
-      icon: /* @__PURE__ */ e(Bt, { color: "#3B64A0", size: 18 }),
-      command: () => t?.(r, a, "append"),
-      template: s
-    },
-    ...r ? [
-      {
-        label: "Condition",
-        icon: /* @__PURE__ */ e(rt, { width: 18, height: 18 }),
-        command: () => o?.(r, a, "append"),
-        template: s
-      },
-      {
-        label: "Loop",
-        icon: /* @__PURE__ */ e(st, { width: 18, height: 18 }),
-        command: () => i?.(r, a, "append"),
-        template: s
-      }
-    ] : []
-  ], b = (_) => {
-    l.current?.show(_);
+  const p = $(null), a = k(
+    () => ({
+      stepId: s,
+      pathId: c,
+      operation: o > 0 ? "append" : "prepend"
+    }),
+    [s, c, o]
+  ), r = k(() => e ? bt(t, a, e) : [], [t, a, e]), d = (g) => {
+    p.current?.show(g);
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ C(
     "div",
     {
-      className: X.stepLinkContainer,
-      style: { ...d },
-      "data-plus-index": c,
+      className: W.stepLinkContainer,
+      style: { ...l, "--step-link-color": n },
+      "data-plus-index": o,
       children: [
-        /* @__PURE__ */ e("div", { className: X.stepLinkLine }),
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: X.stepLinkIcon,
-            onClick: b,
-            "aria-haspopup": !0,
-            children: /* @__PURE__ */ e(Mt, {})
-          }
-        ),
-        /* @__PURE__ */ e(Q, { model: f, popup: !0, ref: l }),
-        /* @__PURE__ */ e("div", { className: X.stepLinkLine })
+        /* @__PURE__ */ i("div", { className: W.stepLinkLine }),
+        r.length > 0 ? /* @__PURE__ */ C(G, { children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: W.stepLinkIcon,
+              onClick: d,
+              "aria-haspopup": !0,
+              children: /* @__PURE__ */ i(jt, {})
+            }
+          ),
+          /* @__PURE__ */ i(xt, { model: r, popup: !0, ref: p })
+        ] }) : /* @__PURE__ */ i("div", { className: W.stepLinkIcon, "aria-hidden": !0, children: /* @__PURE__ */ i(jt, {}) }),
+        /* @__PURE__ */ i("div", { className: W.stepLinkLine })
       ]
     }
   );
-}, Tt = "_steps_yug55_1", Ot = "_stepContainer_yug55_8", jt = "_stepContainerWithPaths_yug55_14", e1 = {
-  steps: Tt,
-  stepContainer: Ot,
-  stepContainerWithPaths: jt
-}, Ht = (t, n, o, i) => {
-  const r = o - t, c = Math.min(r * 0.66, 66), d = t + c, a = n, s = o - c;
-  return `M ${t} ${n} C ${d} ${a}, ${s} ${i}, ${o} ${i}`;
-}, St = ({
+}, yn = "_steps_yug55_1", Nn = "_stepContainer_yug55_8", In = "_stepContainerWithPaths_yug55_14", rt = {
+  steps: yn,
+  stepContainer: Nn,
+  stepContainerWithPaths: In
+}, Sn = (t, e, n, s) => {
+  const o = n - t, l = Math.min(o * 0.66, 66), c = t + l, p = e, a = n - l;
+  return `M ${t} ${e} C ${c} ${p}, ${a} ${s}, ${n} ${s}`;
+}, Nt = ({
   width: t,
-  height: n
+  height: e,
+  strokeColor: n = I.NAVY,
+  fromId: s,
+  toId: o
 }) => {
-  const d = Ht(0, 1, t, n);
-  return /* @__PURE__ */ e("div", { style: { position: "absolute" }, children: /* @__PURE__ */ e(
-    "svg",
+  const l = pt(n), d = Sn(0, 1, t, e);
+  return /* @__PURE__ */ i(
+    "div",
     {
-      width: t,
-      height: n + 1,
-      viewBox: `0 0 ${t} ${n + 1}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ e(
-        "path",
+      style: { position: "absolute" },
+      "data-connector-from": void 0,
+      "data-connector-to": void 0,
+      children: /* @__PURE__ */ i(
+        "svg",
         {
-          d,
-          stroke: "#3b64a0",
-          strokeWidth: "2",
-          fill: "none",
-          strokeLinecap: "round"
+          width: t,
+          height: e + 1,
+          viewBox: `0 0 ${t} ${e + 1}`,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ i(
+            "path",
+            {
+              d,
+              stroke: n,
+              strokeWidth: l ? 3 : 2,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: l ? "0 6" : void 0,
+              "data-connector-from": void 0,
+              "data-connector-to": void 0
+            }
+          )
         }
       )
     }
-  ) });
-}, Wt = "_column_1uiy3_1", Rt = "_row_1uiy3_19", zt = "_stepsContainer_1uiy3_24", V = {
-  column: Wt,
-  row: Rt,
-  stepsContainer: zt
-}, Dt = "_wrapper_1nl2d_1", Ft = "_tooltip_1nl2d_5", C1 = {
-  wrapper: Dt,
-  tooltip: Ft
-}, Zt = ({
+  );
+}, Ln = "_column_1uiy3_1", Tn = "_row_1uiy3_19", En = "_stepsContainer_1uiy3_24", z = {
+  column: Ln,
+  row: Tn,
+  stepsContainer: En
+}, Pn = "_wrapper_1nl2d_1", kn = "_tooltip_1nl2d_5", Ht = {
+  wrapper: Pn,
+  tooltip: kn
+}, Rn = ({
   content: t,
-  children: n,
-  maxWidth: o = 500,
-  className: i
-}) => /* @__PURE__ */ h(
+  children: e,
+  maxWidth: n = 500,
+  className: s
+}) => /* @__PURE__ */ C(
   "div",
   {
-    className: `${C1.wrapper} ${i ?? ""}`.trim(),
-    style: { "--tooltip-max-width": `${o}px` },
+    className: `${Ht.wrapper} ${s ?? ""}`.trim(),
+    style: { "--tooltip-max-width": `${n}px` },
     children: [
-      n,
-      t ? /* @__PURE__ */ e("div", { className: C1.tooltip, role: "tooltip", children: t }) : null
+      e,
+      t ? /* @__PURE__ */ i("div", { className: Ht.tooltip, role: "tooltip", children: t }) : null
     ]
   }
-), Vt = "_conditionContainer_n6c2x_1", Yt = "_connectorLine_n6c2x_6", At = "_conditionWrapper_n6c2x_12", Xt = "_condition_n6c2x_1", Gt = "_conditionFits_n6c2x_53", Kt = "_connectorDot_n6c2x_57", R = {
-  conditionContainer: Vt,
-  connectorLine: Yt,
-  conditionWrapper: At,
-  condition: Xt,
-  conditionFits: Gt,
-  connectorDot: Kt
-}, x1 = ({
+), On = "_conditionContainer_19jfz_1", Mn = "_debuggerTint_19jfz_5", $n = "_connectorLine_19jfz_5", Dn = "_connectorDot_19jfz_8", Fn = "_condition_19jfz_1", Bn = "_conditionWrapper_19jfz_15", Wn = "_conditionFits_19jfz_67", q = {
+  conditionContainer: On,
+  debuggerTint: Mn,
+  connectorLine: $n,
+  connectorDot: Dn,
+  condition: Fn,
+  conditionWrapper: Bn,
+  conditionFits: Wn
+}, yt = ({
   expression: t,
-  style: n
+  style: e,
+  status: n,
+  debuggerMode: s = !1
 }) => {
-  const o = $(null), i = $(null), [r, c] = E(!1);
-  L1(() => {
-    const s = o.current, l = i.current;
-    !s || !l || c(l.offsetWidth > s.clientWidth);
+  const o = $(null), l = $(null), [c, p] = O(!1);
+  he(() => {
+    const m = o.current, x = l.current;
+    if (!m || !x) return;
+    const { paddingLeft: f, paddingRight: N } = getComputedStyle(m), E = Number.parseFloat(f) + Number.parseFloat(N);
+    p(x.offsetWidth >= m.clientWidth - E);
   }, [t]);
-  const d = t && r ? t : "", a = `${R.condition} ${r ? "" : R.conditionFits}`.trim();
-  return /* @__PURE__ */ h("div", { className: R.conditionContainer, style: n, children: [
-    /* @__PURE__ */ e("div", { className: R.connectorLine }),
-    /* @__PURE__ */ e(Zt, { content: d, className: R.conditionWrapper, children: /* @__PURE__ */ e("div", { ref: o, className: a, children: /* @__PURE__ */ e("span", { ref: i, children: t }) }) }),
-    /* @__PURE__ */ e("div", { className: R.connectorLine }),
-    /* @__PURE__ */ e("div", { className: R.connectorDot })
-  ] });
-}, qt = "data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%2044%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='21.8125'%20y='-2.52539'%20width='34.4207'%20height='34.4207'%20rx='6.09524'%20transform='rotate(45%2021.8125%20-2.52539)'%20fill='%236B90C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M31.3947%2013.0355C31.4679%2013.1085%2031.526%2013.1952%2031.5656%2013.2907C31.6052%2013.3861%2031.6256%2013.4885%2031.6256%2013.5918C31.6256%2013.6952%2031.6052%2013.7975%2031.5656%2013.8929C31.526%2013.9884%2031.4679%2014.0751%2031.3947%2014.1481L14.109%2031.4338C13.9615%2031.5813%2013.7614%2031.6642%2013.5527%2031.6642C13.3441%2031.6642%2013.144%2031.5813%2012.9965%2031.4338C12.8489%2031.2863%2012.766%2031.0862%2012.766%2030.8775C12.766%2030.6689%2012.8489%2030.4688%2012.9965%2030.3212L30.2822%2013.0355C30.3552%2012.9623%2030.4419%2012.9043%2030.5373%2012.8647C30.6328%2012.8251%2030.7351%2012.8047%2030.8385%2012.8047C30.9418%2012.8047%2031.0441%2012.8251%2031.1396%2012.8647C31.2351%2012.9043%2031.3218%2012.9623%2031.3947%2013.0355Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.9965%2013.0355C12.9233%2013.1085%2012.8652%2013.1952%2012.8256%2013.2907C12.786%2013.3861%2012.7656%2013.4885%2012.7656%2013.5918C12.7656%2013.6952%2012.786%2013.7975%2012.8256%2013.8929C12.8652%2013.9884%2012.9233%2014.0751%2012.9965%2014.1481L30.2822%2031.4338C30.4297%2031.5813%2030.6298%2031.6642%2030.8385%2031.6642C31.0471%2031.6642%2031.2472%2031.5813%2031.3947%2031.4338C31.5423%2031.2863%2031.6252%2031.0862%2031.6252%2030.8775C31.6252%2030.6689%2031.5423%2030.4688%2031.3947%2030.3212L14.109%2013.0355C14.036%2012.9623%2013.9493%2012.9043%2013.8539%2012.8647C13.7584%2012.8251%2013.6561%2012.8047%2013.5527%2012.8047C13.4494%2012.8047%2013.3471%2012.8251%2013.2516%2012.8647C13.1561%2012.9043%2013.0694%2012.9623%2012.9965%2013.0355Z'%20fill='white'/%3e%3c/svg%3e", Jt = "data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20stroke='%236B90C0'%20stroke-width='2'/%3e%3ccircle%20cx='14'%20cy='14'%20r='6'%20fill='%236B90C0'/%3e%3c/svg%3e", Qt = "_ifStatement_xtij3_1", Ut = "_conditionIcon_xtij3_7", te = "_ifStatementContainer_xtij3_21", ee = "_menuButton_xtij3_27", ne = "_menuIcon_xtij3_52", oe = "_ifdotIcon_xtij3_59", z = {
-  ifStatement: Qt,
-  conditionIcon: Ut,
-  ifStatementContainer: te,
-  menuButton: ee,
-  menuIcon: ne,
-  ifdotIcon: oe
-}, ie = ({ style: t }) => /* @__PURE__ */ e(
+  const a = t && c ? t : "", r = s && n === "finished", d = r, g = k(() => {
+    if (r)
+      return {
+        "--condition-accent": wt.finished,
+        "--condition-bg": Ae.finished,
+        "--condition-line-width": "3px",
+        "--condition-line-style": "dotted"
+      };
+  }, [r]), b = `${q.condition} ${c ? "" : q.conditionFits}`.trim(), h = `${q.conditionContainer} ${d ? q.debuggerTint : ""}`.trim();
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: h,
+      style: { ...e, ...g },
+      children: [
+        /* @__PURE__ */ i("div", { className: q.connectorLine }),
+        /* @__PURE__ */ i(Rn, { content: a, className: q.conditionWrapper, children: /* @__PURE__ */ i("div", { ref: o, className: b, children: /* @__PURE__ */ i("span", { ref: l, children: t }) }) }),
+        /* @__PURE__ */ i("div", { className: q.connectorLine }),
+        /* @__PURE__ */ i("div", { className: q.connectorDot })
+      ]
+    }
+  );
+}, jn = "data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%2044%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='21.8125'%20y='-2.52539'%20width='34.4207'%20height='34.4207'%20rx='6.09524'%20transform='rotate(45%2021.8125%20-2.52539)'%20fill='%236B90C0'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M31.3947%2013.0355C31.4679%2013.1085%2031.526%2013.1952%2031.5656%2013.2907C31.6052%2013.3861%2031.6256%2013.4885%2031.6256%2013.5918C31.6256%2013.6952%2031.6052%2013.7975%2031.5656%2013.8929C31.526%2013.9884%2031.4679%2014.0751%2031.3947%2014.1481L14.109%2031.4338C13.9615%2031.5813%2013.7614%2031.6642%2013.5527%2031.6642C13.3441%2031.6642%2013.144%2031.5813%2012.9965%2031.4338C12.8489%2031.2863%2012.766%2031.0862%2012.766%2030.8775C12.766%2030.6689%2012.8489%2030.4688%2012.9965%2030.3212L30.2822%2013.0355C30.3552%2012.9623%2030.4419%2012.9043%2030.5373%2012.8647C30.6328%2012.8251%2030.7351%2012.8047%2030.8385%2012.8047C30.9418%2012.8047%2031.0441%2012.8251%2031.1396%2012.8647C31.2351%2012.9043%2031.3218%2012.9623%2031.3947%2013.0355Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.9965%2013.0355C12.9233%2013.1085%2012.8652%2013.1952%2012.8256%2013.2907C12.786%2013.3861%2012.7656%2013.4885%2012.7656%2013.5918C12.7656%2013.6952%2012.786%2013.7975%2012.8256%2013.8929C12.8652%2013.9884%2012.9233%2014.0751%2012.9965%2014.1481L30.2822%2031.4338C30.4297%2031.5813%2030.6298%2031.6642%2030.8385%2031.6642C31.0471%2031.6642%2031.2472%2031.5813%2031.3947%2031.4338C31.5423%2031.2863%2031.6252%2031.0862%2031.6252%2030.8775C31.6252%2030.6689%2031.5423%2030.4688%2031.3947%2030.3212L14.109%2013.0355C14.036%2012.9623%2013.9493%2012.9043%2013.8539%2012.8647C13.7584%2012.8251%2013.6561%2012.8047%2013.5527%2012.8047C13.4494%2012.8047%2013.3471%2012.8251%2013.2516%2012.8647C13.1561%2012.9043%2013.0694%2012.9623%2012.9965%2013.0355Z'%20fill='white'/%3e%3c/svg%3e", Hn = "data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20stroke='%236B90C0'%20stroke-width='2'/%3e%3ccircle%20cx='14'%20cy='14'%20r='6'%20fill='%236B90C0'/%3e%3c/svg%3e", zn = "data:image/svg+xml,%3csvg%20width='44'%20height='44'%20viewBox='0%200%2044%2044'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='21.8125'%20y='-2.52539'%20width='34.4207'%20height='34.4207'%20rx='6.09524'%20transform='rotate(45%2021.8125%20-2.52539)'%20fill='%2317A34A'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M31.3947%2013.0355C31.4679%2013.1085%2031.526%2013.1952%2031.5656%2013.2907C31.6052%2013.3861%2031.6256%2013.4885%2031.6256%2013.5918C31.6256%2013.6952%2031.6052%2013.7975%2031.5656%2013.8929C31.526%2013.9884%2031.4679%2014.0751%2031.3947%2014.1481L14.109%2031.4338C13.9615%2031.5813%2013.7614%2031.6642%2013.5527%2031.6642C13.3441%2031.6642%2013.144%2031.5813%2012.9965%2031.4338C12.8489%2031.2863%2012.766%2031.0862%2012.766%2030.8775C12.766%2030.6689%2012.8489%2030.4688%2012.9965%2030.3212L30.2822%2013.0355C30.3552%2012.9623%2030.4419%2012.9043%2030.5373%2012.8647C30.6328%2012.8251%2030.7351%2012.8047%2030.8385%2012.8047C30.9418%2012.8047%2031.0441%2012.8251%2031.1396%2012.8647C31.2351%2012.9043%2031.3218%2012.9623%2031.3947%2013.0355Z'%20fill='white'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.9965%2013.0355C12.9233%2013.1085%2012.8652%2013.1952%2012.8256%2013.2907C12.786%2013.3861%2012.7656%2013.4885%2012.7656%2013.5918C12.7656%2013.6952%2012.786%2013.7975%2012.8256%2013.8929C12.8652%2013.9884%2012.9233%2014.0751%2012.9965%2014.1481L30.2822%2031.4338C30.4297%2031.5813%2030.6298%2031.6642%2030.8385%2031.6642C31.0471%2031.6642%2031.2472%2031.5813%2031.3947%2031.4338C31.5423%2031.2863%2031.6252%2031.0862%2031.6252%2030.8775C31.6252%2030.6689%2031.5423%2030.4688%2031.3947%2030.3212L14.109%2013.0355C14.036%2012.9623%2013.9493%2012.9043%2013.8539%2012.8647C13.7584%2012.8251%2013.6561%2012.8047%2013.5527%2012.8047C13.4494%2012.8047%2013.3471%2012.8251%2013.2516%2012.8647C13.1561%2012.9043%2013.0694%2012.9623%2012.9965%2013.0355Z'%20fill='white'/%3e%3c/svg%3e", An = "data:image/svg+xml,%3csvg%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20fill='white'/%3e%3crect%20x='1'%20y='1'%20width='26'%20height='26'%20rx='13'%20stroke='%2317A34A'%20stroke-width='2'/%3e%3ccircle%20cx='14'%20cy='14'%20r='6'%20fill='%2317A34A'/%3e%3c/svg%3e", Yn = "_ifStatement_xtij3_1", Gn = "_conditionIcon_xtij3_7", Vn = "_ifStatementContainer_xtij3_21", Zn = "_menuButton_xtij3_27", qn = "_menuIcon_xtij3_52", Un = "_ifdotIcon_xtij3_59", J = {
+  ifStatement: Yn,
+  conditionIcon: Gn,
+  ifStatementContainer: Vn,
+  menuButton: Zn,
+  menuIcon: qn,
+  ifdotIcon: Un
+}, Xn = ({
+  style: t,
+  color: e = I.NAVY
+}) => /* @__PURE__ */ i(
   "div",
   {
     style: {
       width: "100%",
       height: "2px",
-      borderTop: "2px solid #3B64A0",
+      borderTop: et(e),
       ...t
     }
   }
-), re = ({
-  onEdit: t,
-  onDelete: n,
-  onSelect: o
-}) => {
-  const i = $(null), { openMenu: r, closeMenu: c } = r1(), d = H(
-    () => [
-      {
-        label: "Edit",
-        icon: /* @__PURE__ */ e(v1, { color: "#3B64A0", size: 18 }),
-        command: () => t?.()
-      },
-      {
-        label: "Delete",
-        icon: /* @__PURE__ */ e(J, { color: "#3B64A0", size: 18 }),
-        command: () => n?.()
-      }
-    ],
-    [t, n]
-  ), a = (l) => {
-    l.stopPropagation(), r(i, l);
-  }, s = (l) => {
-    l.target.closest(`.${z.menuButton}`) || o?.();
+), Qt = (t) => {
+  const {
+    enabled: e = !0,
+    items: n,
+    menuContext: s,
+    onAction: o,
+    onSelect: l,
+    debuggerMode: c = !1,
+    status: p
+  } = t, a = $(null), { openMenu: r, closeMenu: d } = Lt(), g = k(
+    () => s ?? {},
+    [s]
+  ), b = k(() => o ? bt(n, g, o) : [], [n, g, o]), h = e && !c && b.length > 0, m = c && p === "finished", x = m ? Kt("finished", !0) : I.NAVY, f = m ? zn : jn, N = m ? An : Hn, E = (y) => {
+    y.stopPropagation(), r(a, y);
+  }, v = (y) => {
+    y.target.closest(`.${J.menuButton}`) || l?.();
   };
-  return /* @__PURE__ */ h("div", { className: z.ifStatementContainer, children: [
-    /* @__PURE__ */ e(
-      ie,
+  return /* @__PURE__ */ C("div", { className: J.ifStatementContainer, children: [
+    /* @__PURE__ */ i(
+      Xn,
       {
+        color: x,
         style: { position: "absolute", top: "22.5px", left: 0, zIndex: 1 }
       }
     ),
-    /* @__PURE__ */ e("div", { className: z.ifStatement, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ i("div", { className: J.ifStatement, children: /* @__PURE__ */ i(
       "img",
       {
-        src: qt,
+        src: f,
         alt: "condition",
-        onClick: (l) => s(l),
-        className: z.conditionIcon
+        onClick: (y) => v(y),
+        className: J.conditionIcon
       }
     ) }),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: z.menuButton,
-        onClick: a,
-        "aria-label": "Open menu",
-        "aria-haspopup": "menu",
-        children: /* @__PURE__ */ e(q, { className: z.menuIcon, size: 16 })
-      }
-    ),
-    /* @__PURE__ */ e(
-      Q,
-      {
-        ref: i,
-        model: d,
-        popup: !0,
-        onHide: () => c(i)
-      }
-    ),
-    /* @__PURE__ */ e("img", { src: Jt, alt: "ifdot", className: z.ifdotIcon })
+    h && /* @__PURE__ */ C(G, { children: [
+      /* @__PURE__ */ i(
+        "button",
+        {
+          type: "button",
+          className: J.menuButton,
+          onClick: E,
+          "aria-label": "Open menu",
+          "aria-haspopup": "menu",
+          children: /* @__PURE__ */ i(mt, { className: J.menuIcon, size: 16 })
+        }
+      ),
+      /* @__PURE__ */ i(
+        xt,
+        {
+          ref: a,
+          model: b,
+          popup: !0,
+          onHide: () => d(a)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ i("img", { src: N, alt: "ifdot", className: J.ifdotIcon })
   ] });
-}, se = 34.5, w1 = ({
-  items: t,
-  pathId: n,
-  onAddStep: o,
-  onAddTrigger: i,
-  onAddCondition: r,
-  onAddLoop: c,
-  onDeleteStep: d,
-  onUpdateFilter: a,
-  onSelectStep: s,
-  onResize: l
-}) => {
-  const f = $(null), b = $([]), [_, x] = E([]);
-  Y(() => {
-    const p = () => {
-      if (!f.current || t.length === 0) {
-        x([]);
+}, zt = 34.5, Kn = 33, at = I.NAVY, te = (t) => {
+  const {
+    items: e,
+    pathId: n,
+    menus: s,
+    filterFlagActionId: o,
+    onAction: l,
+    onSelectStep: c,
+    onResize: p
+  } = t, a = $(null), r = $([]), [d, g] = O([]);
+  ot(() => {
+    const h = () => {
+      const f = a.current;
+      if (!f || e.length === 0) {
+        g([]);
         return;
       }
-      const I = f.current.getBoundingClientRect(), w = [];
-      for (let v = 0; v < t.length; v++) {
-        const m = b.current[v];
-        if (m) {
-          const y = m.getBoundingClientRect();
-          w.push(y.top - I.top + se);
-        }
+      const N = [], E = Number.parseFloat(
+        getComputedStyle(f).zoom || "1"
+      );
+      for (let v = 0; v < e.length; v++) {
+        const y = r.current[v];
+        if (y)
+          if (y.offsetParent == null) {
+            const u = f.getBoundingClientRect(), _ = y.getBoundingClientRect();
+            N.push((_.top - u.top) / E + zt);
+          } else
+            N.push(y.offsetTop - Kn + zt);
       }
-      w.length === t.length && x(w);
+      N.length === e.length && g(N);
     };
-    return p(), window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
-  }, [t]);
-  const C = H(() => _.length !== t.length || t.length <= 1 ? null : t.map((p, I) => I).filter((p) => p > 0).map((p) => {
-    const I = _[p];
-    return I === void 0 ? null : /* @__PURE__ */ e(St, { width: 100, height: I }, p);
-  }), [t, _]);
-  return /* @__PURE__ */ h("div", { className: V.row, children: [
-    /* @__PURE__ */ e(
-      re,
+    h();
+    const m = new ResizeObserver(h), x = a.current;
+    return x && m.observe(x), window.addEventListener("resize", h), () => {
+      m.disconnect(), window.removeEventListener("resize", h);
+    };
+  }, [e]);
+  const b = k(() => d.length !== e.length || e.length <= 1 ? null : e.map((h, m) => m).filter((h) => h > 0).map((h) => {
+    const m = d[h];
+    return m === void 0 ? null : /* @__PURE__ */ i(Nt, { width: 100, height: m, strokeColor: at }, h);
+  }), [e, d]);
+  return /* @__PURE__ */ C("div", { className: z.row, children: [
+    /* @__PURE__ */ i(
+      Qt,
       {
-        onDelete: () => n != null && d?.(n),
-        onSelect: n != null && s ? () => s(n) : void 0
+        items: s?.condition,
+        menuContext: { pathId: n },
+        onAction: l,
+        onSelect: n != null && c ? () => c(n) : void 0
       }
     ),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ C(
       "div",
       {
-        ref: f,
-        className: V.column,
+        ref: a,
+        className: z.column,
         style: { marginTop: "33px" },
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ i(
             "div",
             {
               style: {
@@ -1010,91 +1103,86 @@ const Mt = () => /* @__PURE__ */ h(
                 left: 0,
                 width: "100px",
                 height: "2px",
-                borderTop: "2px solid #3B64A0"
+                borderTop: `2px solid ${at}`
               }
             }
           ),
-          C
+          b
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: V.column, children: t.map((p, I) => {
-      let w;
-      if (p.paths)
-        w = /* @__PURE__ */ e(
-          w1,
+    /* @__PURE__ */ i("div", { className: z.column, children: e.map((h, m) => {
+      let x;
+      if (h.paths)
+        x = /* @__PURE__ */ i(
+          te,
           {
-            items: p.paths,
+            items: h.paths,
             pathId: n,
-            onAddStep: o,
-            onAddTrigger: i,
-            onAddCondition: r,
-            onAddLoop: c,
-            onDeleteStep: d,
-            onUpdateFilter: a,
-            onSelectStep: s,
-            onResize: l
+            menus: s,
+            filterFlagActionId: o,
+            onAction: l,
+            onSelectStep: c,
+            onResize: p
           },
-          p.localId
+          h.id
         );
-      else if (p.steps) {
-        const v = p;
-        w = /* @__PURE__ */ h("div", { className: V.stepsContainer, children: [
-          /* @__PURE__ */ e(
-            x1,
+      else if (h.steps) {
+        const f = h;
+        x = /* @__PURE__ */ C("div", { className: z.stepsContainer, children: [
+          /* @__PURE__ */ i(
+            yt,
             {
-              expression: v.condition,
+              expression: f.condition,
+              status: f.status,
               style: { marginTop: "25px" }
             }
           ),
-          /* @__PURE__ */ e(
-            l1,
+          /* @__PURE__ */ i(
+            Tt,
             {
-              steps: p.steps,
-              pathId: p.localId,
-              onSelectStep: s ?? (() => {
-              }),
-              onAddStep: o ?? (() => {
-              }),
-              onAddTrigger: i,
-              onAddCondition: r ?? (() => {
+              steps: h.steps,
+              pathId: h.id,
+              menus: s,
+              filterFlagActionId: o,
+              onAction: l,
+              onSelectStep: c ?? (() => {
               }),
-              onAddLoop: c,
-              onDeleteStep: d,
-              onUpdateFilter: a,
-              onResize: l
+              onResize: p
             },
-            p.localId
+            h.id
           )
         ] });
       } else
-        w = /* @__PURE__ */ e(
-          s1,
+        x = /* @__PURE__ */ i(
+          ht,
           {
-            localId: p.localId,
-            title: "title" in p ? p.title : "",
-            idx: 1,
-            icon: "icon" in p ? p.icon : void 0,
-            onSelectStep: s,
-            onDeleteStep: d,
-            onUpdateFilter: a
+            id: h.id,
+            title: "title" in h ? h.title : "",
+            icon: "icon" in h ? h.icon : void 0,
+            status: "status" in h ? h.status : void 0,
+            items: s?.step,
+            menuContext: { stepId: h.id },
+            onAction: l,
+            filterFlagActionId: o,
+            onSelectStep: c
           },
-          p.localId
+          h.id
         );
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ i(
         "div",
         {
-          ref: (v) => {
-            b.current[I] = v;
+          ref: (f) => {
+            r.current[m] = f;
           },
           style: { width: "100%" },
-          children: w
+          children: x
         },
-        p.localId
+        h.id
       );
     }) }),
-    /* @__PURE__ */ h("div", { className: V.column, style: { marginTop: "33px" }, children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ C("div", { className: z.column, style: { marginTop: "33px" }, children: [
+      /* @__PURE__ */ i(
         "div",
         {
           style: {
@@ -1104,19 +1192,18 @@ const Mt = () => /* @__PURE__ */ h(
             flex: 1,
             width: "100%",
             height: "2px",
-            borderTop: "2px solid #3B64A0"
+            borderTop: `2px solid ${at}`
           }
         }
       ),
-      C
+      b
     ] }),
-    /* @__PURE__ */ e(
-      F,
+    /* @__PURE__ */ i(
+      it,
       {
-        onAddStep: o,
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
+        items: s?.add,
+        onAction: l,
+        lineColor: at,
         stepId: n,
         pathId: n,
         index: 1,
@@ -1126,36 +1213,33 @@ const Mt = () => /* @__PURE__ */ h(
         }
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ i(
       "div",
       {
         style: {
           flex: 1,
           width: "100%",
           height: "2px",
-          borderTop: "2px solid #3B64A0",
+          borderTop: `2px solid ${at}`,
           marginTop: "34px"
         }
       }
     )
   ] });
-}, o1 = 68, l1 = ({
+}, It = 68, Q = I.NAVY, Tt = ({
   pathId: t,
-  steps: n,
-  centerY: o,
-  className: i,
-  onAddStep: r,
-  onDeleteStep: c,
-  onUpdateFilter: d,
-  onAddTrigger: a,
-  onAddCondition: s,
-  onAddLoop: l,
-  onSelectStep: f,
-  onResize: b,
-  isDescendent: _ = !0
+  steps: e,
+  centerY: n,
+  className: s,
+  menus: o,
+  filterFlagActionId: l,
+  onAction: c,
+  onSelectStep: p,
+  onResize: a,
+  isDescendent: r = !0
 }) => {
-  const x = o === void 0 ? void 0 : { marginTop: Math.max(0, o - o1 / 2) };
-  return n.length === 0 ? /* @__PURE__ */ h(
+  const d = n === void 0 ? void 0 : { marginTop: Math.max(0, n - It / 2) };
+  return e.length === 0 ? /* @__PURE__ */ C(
     "div",
     {
       style: {
@@ -1165,10 +1249,10 @@ const Mt = () => /* @__PURE__ */ h(
         flexDirection: "row",
         flex: 1,
         minWidth: 0,
-        ...x
+        ...d
       },
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -1178,27 +1262,26 @@ const Mt = () => /* @__PURE__ */ h(
               minWidth: 0,
               height: "2px",
               marginTop: "13.5px",
-              borderTop: "2px solid #3B64A0"
+              borderTop: `2px solid ${Q}`
             }
           }
         ),
-        /* @__PURE__ */ e(
-          F,
+        /* @__PURE__ */ i(
+          it,
           {
-            onAddStep: () => {
-              r?.(void 0, t);
-            },
-            onAddTrigger: a,
-            onAddCondition: s,
-            onAddLoop: l,
+            items: o?.add,
+            onAction: c,
+            lineColor: Q,
             stepId: t,
+            pathId: t,
             index: 0,
             style: {
-              height: "auto"
+              height: "auto",
+              marginTop: "0"
             }
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ i(
           "div",
           {
             style: {
@@ -1208,18 +1291,18 @@ const Mt = () => /* @__PURE__ */ h(
               minWidth: 0,
               height: "2px",
               marginTop: "13.5px",
-              borderTop: "2px solid #3B64A0"
+              borderTop: `2px solid ${Q}`
             }
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ i(
     "div",
     {
-      className: e1.steps + (i ? " " + i : ""),
-      style: x,
-      children: /* @__PURE__ */ h(
+      className: rt.steps + (s ? " " + s : ""),
+      style: d,
+      children: /* @__PURE__ */ C(
         "div",
         {
           style: {
@@ -1231,16 +1314,13 @@ const Mt = () => /* @__PURE__ */ h(
             alignItems: "flex-start"
           },
           children: [
-            /* @__PURE__ */ e(
-              F,
+            /* @__PURE__ */ i(
+              it,
               {
-                onAddStep: () => {
-                  r?.(n[0].localId, t, "prepend");
-                },
-                onAddTrigger: a,
-                onAddCondition: s,
-                onAddLoop: l,
-                stepId: n[0].localId,
+                items: o?.add,
+                onAction: c,
+                lineColor: Q,
+                stepId: e[0].id,
                 pathId: t,
                 index: 0,
                 style: {
@@ -1248,98 +1328,92 @@ const Mt = () => /* @__PURE__ */ h(
                 }
               }
             ),
-            n.map((C, p) => {
-              const I = !!C.paths, w = "condition" in C && typeof C.condition == "string";
-              let v;
-              return I && C.paths ? v = /* @__PURE__ */ e(
-                w1,
+            e.map((g, b) => {
+              const h = !!g.paths, m = "condition" in g && typeof g.condition == "string";
+              let x;
+              return h && g.paths ? x = /* @__PURE__ */ i(
+                te,
                 {
-                  items: C.paths,
-                  pathId: C.localId,
-                  onAddStep: r,
-                  onAddCondition: s,
-                  onAddLoop: l,
-                  onDeleteStep: c,
-                  onAddTrigger: a,
-                  onSelectStep: f,
-                  onUpdateFilter: d,
-                  onResize: b
+                  items: g.paths,
+                  pathId: g.id,
+                  menus: o,
+                  filterFlagActionId: l,
+                  onAction: c,
+                  onSelectStep: p,
+                  onResize: a
                 },
-                C.title
-              ) : w ? v = /* @__PURE__ */ h(n1, { children: [
-                /* @__PURE__ */ e(
-                  Ie,
+                g.title
+              ) : m ? x = /* @__PURE__ */ C(G, { children: [
+                /* @__PURE__ */ i(
+                  h1,
                   {
-                    value: C,
-                    onAddStep: r,
-                    onAddTrigger: a,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    onDeleteStep: c,
-                    onUpdateFilter: d,
-                    onSelectStep: f,
-                    onResize: b
+                    value: g,
+                    menus: o,
+                    filterFlagActionId: l,
+                    onAction: c,
+                    onSelectStep: p,
+                    onResize: a
                   },
-                  C.localId
+                  g.id
                 ),
-                /* @__PURE__ */ e(
-                  F,
+                /* @__PURE__ */ i(
+                  it,
                   {
-                    onAddStep: r,
-                    onAddTrigger: a,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    stepId: C.localId,
+                    items: o?.add,
+                    onAction: c,
+                    lineColor: Q,
+                    stepId: g.id,
                     pathId: t,
-                    index: p + 1,
+                    index: b + 1,
                     style: { marginTop: "34px", height: 0 }
                   }
                 )
-              ] }) : v = /* @__PURE__ */ h(n1, { children: [
-                /* @__PURE__ */ e(
-                  s1,
+              ] }) : x = /* @__PURE__ */ C(G, { children: [
+                /* @__PURE__ */ i(
+                  ht,
                   {
-                    localId: C.localId,
-                    title: C.title,
-                    idx: 1,
-                    icon: C.icon,
-                    isSet: C.isSet,
-                    isInvalid: C.isInvalid,
-                    isFilter: C.isFilter,
-                    onSelectStep: f,
-                    onDeleteStep: c,
-                    onUpdateFilter: d
+                    id: g.id,
+                    title: g.title,
+                    icon: g.icon,
+                    isSet: g.isSet,
+                    isInvalid: g.isInvalid,
+                    isFilter: g.isFilter,
+                    status: g.status,
+                    items: o?.step,
+                    menuContext: { stepId: g.id },
+                    onAction: c,
+                    filterFlagActionId: l,
+                    onSelectStep: p
                   },
-                  C.title
+                  g.title
                 ),
-                /* @__PURE__ */ e(
-                  F,
+                /* @__PURE__ */ i(
+                  it,
                   {
-                    onAddStep: r,
-                    onAddTrigger: a,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    stepId: C.localId,
+                    items: o?.add,
+                    onAction: c,
+                    lineColor: Q,
+                    stepId: g.id,
                     pathId: t,
-                    index: p + 1
+                    index: b + 1
                   }
                 )
-              ] }), /* @__PURE__ */ e(
+              ] }), /* @__PURE__ */ i(
                 "div",
                 {
-                  className: e1.stepContainer + (I || w ? " " + e1.stepContainerWithPaths : ""),
-                  children: v
+                  className: rt.stepContainer + (h || m ? " " + rt.stepContainerWithPaths : ""),
+                  children: x
                 },
-                C.localId
+                g.id
               );
             }),
-            _ && /* @__PURE__ */ e(
+            r && /* @__PURE__ */ i(
               "div",
               {
                 style: {
                   flexGrow: 1,
                   minWidth: 0,
-                  borderTop: "2px solid #3B64A0",
+                  borderTop: `2px solid ${Q}`,
                   marginTop: "33.5px"
                 }
               }
@@ -1349,7 +1423,7 @@ const Mt = () => /* @__PURE__ */ h(
       )
     }
   );
-}, le = () => /* @__PURE__ */ h(
+}, ee = () => /* @__PURE__ */ C(
   "svg",
   {
     width: "24",
@@ -1358,14 +1432,14 @@ const Mt = () => /* @__PURE__ */ h(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M17.3006 10.5H23.1986C23.2699 10.5001 23.3397 10.5204 23.3998 10.5586C23.4599 10.5969 23.5079 10.6515 23.5381 10.716C23.5683 10.7805 23.5795 10.8523 23.5704 10.923C23.5613 10.9937 23.5322 11.0603 23.4866 11.115L20.5376 14.655C20.5024 14.6972 20.4584 14.7312 20.4086 14.7545C20.3589 14.7778 20.3046 14.7899 20.2496 14.7899C20.1947 14.7899 20.1404 14.7778 20.0906 14.7545C20.0409 14.7312 19.9968 14.6972 19.9616 14.655L17.0126 11.115C16.967 11.0603 16.938 10.9937 16.9289 10.923C16.9197 10.8523 16.931 10.7805 16.9612 10.716C16.9914 10.6515 17.0394 10.5969 17.0995 10.5586C17.1596 10.5204 17.2294 10.5001 17.3006 10.5ZM0.800641 13.5H6.69864C6.7699 13.5 6.83967 13.4797 6.89979 13.4414C6.95991 13.4032 7.00789 13.3486 7.03811 13.2841C7.06833 13.2195 7.07953 13.1477 7.07042 13.0771C7.06131 13.0064 7.03224 12.9398 6.98664 12.885L4.03764 9.34504C4.00245 9.30283 3.95841 9.26888 3.90864 9.24558C3.85887 9.22228 3.80459 9.21021 3.74964 9.21021C3.69469 9.21021 3.64041 9.22228 3.59064 9.24558C3.54087 9.26888 3.49683 9.30283 3.46164 9.34504L0.512641 12.885C0.467037 12.9398 0.437977 13.0064 0.428862 13.0771C0.419747 13.1477 0.430956 13.2195 0.461175 13.2841C0.491394 13.3486 0.539372 13.4032 0.599493 13.4414C0.659613 13.4797 0.729386 13.5 0.800641 13.5Z",
           fill: "#41B0AC"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           fillRule: "evenodd",
@@ -1376,246 +1450,1058 @@ const Mt = () => /* @__PURE__ */ h(
       )
     ]
   }
-), ce = "_container_1ktj6_1", ae = "_collapsed_1ktj6_16", de = "_loopNodeWrapper_1ktj6_21", pe = "_loopIconWrapper_1ktj6_31", ue = "_loopBox_1ktj6_40", he = "_dotsButton_1ktj6_57", Ce = "_label_1ktj6_77", me = "_limit_1ktj6_84", fe = "_expandable_1ktj6_90", ge = "_expandableCollapsed_1ktj6_98", ve = "_connector_1ktj6_105", _e = "_line_1ktj6_113", xe = "_circleDot_1ktj6_121", we = "_innerDot_1ktj6_136", ye = "_stepsWrapper_1ktj6_143", B = {
-  container: ce,
-  collapsed: ae,
-  loopNodeWrapper: de,
-  loopIconWrapper: pe,
-  loopBox: ue,
-  dotsButton: he,
-  label: Ce,
-  limit: me,
-  expandable: fe,
-  expandableCollapsed: ge,
-  connector: ve,
-  line: _e,
-  circleDot: xe,
-  innerDot: we,
-  stepsWrapper: ye
-}, Ie = ({
+), Jn = "_container_18jhr_1", Qn = "_collapsed_18jhr_16", t1 = "_loopNodeWrapper_18jhr_21", e1 = "_loopIconWrapper_18jhr_31", n1 = "_loopBox_18jhr_40", i1 = "_dotsButton_18jhr_57", s1 = "_label_18jhr_77", o1 = "_limit_18jhr_84", r1 = "_expandable_18jhr_90", l1 = "_expandableCollapsed_18jhr_98", c1 = "_connector_18jhr_105", a1 = "_line_18jhr_113", d1 = "_circleDot_18jhr_121", u1 = "_innerDot_18jhr_136", p1 = "_stepsWrapper_18jhr_143", S = {
+  container: Jn,
+  collapsed: Qn,
+  loopNodeWrapper: t1,
+  loopIconWrapper: e1,
+  loopBox: n1,
+  dotsButton: i1,
+  label: s1,
+  limit: o1,
+  expandable: r1,
+  expandableCollapsed: l1,
+  connector: c1,
+  line: a1,
+  circleDot: d1,
+  innerDot: u1,
+  stepsWrapper: p1
+}, h1 = ({
   value: t,
-  onAddStep: n,
-  onAddTrigger: o,
-  onAddCondition: i,
-  onAddLoop: r,
-  onDeleteStep: c,
-  onUpdateFilter: d,
-  onSelectStep: a,
-  onResize: s
+  menus: e,
+  filterFlagActionId: n,
+  onAction: s,
+  onSelectStep: o,
+  onResize: l
 }) => {
-  const { localId: l, limit: f, steps: b, condition: _ } = t, x = b ?? [], C = () => {
-  }, [p, I] = E(!1), w = $(null), { openMenu: v, closeMenu: m } = r1(), y = i1(), L = H(
-    () => [
-      {
-        label: "Edit",
-        icon: /* @__PURE__ */ e(v1, { color: "#3B64A0", size: 18 }),
-        command: (k) => {
-          k?.originalEvent?.stopPropagation(), a?.(l);
-        },
-        template: y
-      },
-      {
-        label: "Remove",
-        icon: /* @__PURE__ */ e(J, { color: "#3B64A0", size: 18 }),
-        command: (k) => {
-          k?.originalEvent?.stopPropagation(), c && c(l);
-        },
-        template: y
-      }
-    ],
-    [a, c, l, y]
-  ), u = (k) => {
-    k.stopPropagation(), v(w, k);
-  }, g = () => {
-    I((k) => !k), s?.();
-  }, P = B.container + (p ? "" : " " + B.collapsed), T = B.expandable + (p ? "" : " " + B.expandableCollapsed);
-  return /* @__PURE__ */ h("div", { className: P, children: [
-    /* @__PURE__ */ h("div", { className: B.loopNodeWrapper, children: [
-      /* @__PURE__ */ h("div", { className: B.loopBox, children: [
-        /* @__PURE__ */ e("div", { onClick: g, className: B.loopIconWrapper, children: /* @__PURE__ */ e(le, {}) }),
-        /* @__PURE__ */ e("button", { className: B.dotsButton, onClick: u, children: /* @__PURE__ */ e(q, { size: 16 }) }),
-        /* @__PURE__ */ e(
-          Q,
-          {
-            model: L,
-            popup: !0,
-            ref: w,
-            onHide: () => m(w)
-          }
-        )
+  const { id: c, limit: p, steps: a, condition: r } = t, d = a ?? [], [g, b] = O(!1), h = $(null), { openMenu: m, closeMenu: x } = Lt(), f = k(() => ({ stepId: c }), [c]), N = k(() => s ? bt(e?.iterator, f, s) : [], [e?.iterator, f, s]), E = (_) => {
+    _.stopPropagation(), m(h, _);
+  }, v = () => {
+    b((_) => !_), l?.();
+  }, y = S.container + (g ? "" : " " + S.collapsed), u = S.expandable + (g ? "" : " " + S.expandableCollapsed);
+  return /* @__PURE__ */ C("div", { className: y, children: [
+    /* @__PURE__ */ C("div", { className: S.loopNodeWrapper, children: [
+      /* @__PURE__ */ C("div", { className: S.loopBox, children: [
+        /* @__PURE__ */ i("div", { onClick: v, className: S.loopIconWrapper, children: /* @__PURE__ */ i(ee, {}) }),
+        N.length > 0 && /* @__PURE__ */ C(G, { children: [
+          /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              className: S.dotsButton,
+              onClick: E,
+              "aria-label": "Open loop menu",
+              "aria-haspopup": "menu",
+              children: /* @__PURE__ */ i(mt, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ i(
+            xt,
+            {
+              model: N,
+              popup: !0,
+              ref: h,
+              onHide: () => x(h)
+            }
+          )
+        ] })
       ] }),
-      /* @__PURE__ */ e("div", { className: B.label, children: "Loop" }),
-      f != null && /* @__PURE__ */ h("div", { className: B.limit, children: [
-        f,
+      /* @__PURE__ */ i("div", { className: S.label, children: "Loop" }),
+      p != null && /* @__PURE__ */ C("div", { className: S.limit, children: [
+        p,
         "x"
       ] })
     ] }),
-    /* @__PURE__ */ h("div", { className: T, children: [
-      /* @__PURE__ */ h("div", { className: B.connector, children: [
-        /* @__PURE__ */ e("div", { className: B.line }),
-        /* @__PURE__ */ e("div", { className: B.circleDot, children: /* @__PURE__ */ e("div", { className: B.innerDot }) }),
-        /* @__PURE__ */ e("div", { className: B.line })
+    /* @__PURE__ */ C("div", { className: u, children: [
+      /* @__PURE__ */ C("div", { className: S.connector, children: [
+        /* @__PURE__ */ i("div", { className: S.line }),
+        /* @__PURE__ */ i("div", { className: S.circleDot, children: /* @__PURE__ */ i("div", { className: S.innerDot }) }),
+        /* @__PURE__ */ i("div", { className: S.line })
       ] }),
-      /* @__PURE__ */ e(x1, { expression: _ ?? "", style: { marginTop: "25.5px" } }),
-      /* @__PURE__ */ e("div", { className: B.stepsWrapper, children: /* @__PURE__ */ e(
-        l1,
+      /* @__PURE__ */ i(
+        yt,
+        {
+          expression: r ?? "",
+          status: t.status,
+          style: { marginTop: "25.5px" }
+        }
+      ),
+      /* @__PURE__ */ i("div", { className: S.stepsWrapper, children: /* @__PURE__ */ i(
+        Tt,
         {
-          steps: x,
-          pathId: l,
-          onAddStep: n ?? C,
-          onAddTrigger: o,
-          onAddCondition: i ?? C,
-          onAddLoop: r,
-          onDeleteStep: c,
-          onUpdateFilter: d ?? C,
-          onSelectStep: a ?? C,
+          steps: d,
+          pathId: c,
+          menus: e,
+          filterFlagActionId: n,
+          onAction: s,
+          onSelectStep: o ?? (() => {
+          }),
           isDescendent: !0
         }
       ) })
     ] })
   ] });
-}, be = "_container_kielx_1", Ne = {
-  container: be
-}, $e = ({
+}, f1 = "_container_kielx_1", ne = {
+  container: f1
+}, E1 = ({
   process: t,
-  addMultipleTriggers: n,
-  onAddStep: o,
-  onAddTrigger: i,
-  onAddCondition: r,
-  onAddLoop: c,
-  onResize: d,
-  onDeleteTrigger: a,
-  onDeleteStep: s,
-  onUpdateFilter: l,
-  onSelectStep: f
+  menus: e,
+  onMenuAction: n,
+  onSelectStep: s,
+  hubActionId: o,
+  filterFlagActionId: l,
+  onResize: c
 }) => {
-  const [b, _] = E(0);
-  return /* @__PURE__ */ h("div", { className: Ne.container, children: [
-    /* @__PURE__ */ e(
-      kt,
+  const [p, a] = O(0);
+  return /* @__PURE__ */ C("div", { className: ne.container, children: [
+    /* @__PURE__ */ i(
+      Jt,
       {
         steps: t.triggers,
-        onAddTrigger: n,
-        onUpdateFilter: l,
-        onDeleteTrigger: a,
-        onSelectStep: f,
-        onCenterYUpdate: _
+        items: e?.trigger,
+        hubActionId: o,
+        filterFlagActionId: l,
+        onAction: n,
+        onSelectStep: s,
+        onCenterYUpdate: a
       }
     ),
-    t.steps.length > 0 ? /* @__PURE__ */ e(
-      l1,
+    t.steps.length > 0 ? /* @__PURE__ */ i(
+      Tt,
       {
         steps: t.steps,
-        centerY: b,
-        onAddStep: o,
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
-        onResize: d,
-        onDeleteStep: s,
-        onUpdateFilter: l,
-        onSelectStep: f,
+        centerY: p,
+        menus: e,
+        filterFlagActionId: l,
+        onAction: n,
+        onResize: c,
+        onSelectStep: s,
         isDescendent: !1,
         pathId: void 0
       }
-    ) : /* @__PURE__ */ e(
-      F,
+    ) : /* @__PURE__ */ i(
+      it,
       {
-        onAddStep: () => o(),
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
+        items: e?.add,
+        onAction: n,
         index: 0,
         style: {
-          height: o1,
-          marginTop: Math.max(0, b - o1 / 2)
+          height: It,
+          marginTop: Math.max(0, p - It / 2)
         }
       }
     )
   ] });
+}, Et = (t, e, n) => {
+  if (e === n) return !1;
+  const s = (r) => {
+    if ("paths" in r && r.paths && r.paths.length > 0) {
+      const d = r.paths[r.paths.length - 1];
+      if (d.steps && d.steps.length > 0) {
+        const g = d.steps[d.steps.length - 1];
+        return s(g);
+      }
+      return d.id;
+    }
+    return "steps" in r && r.steps && r.steps.length > 0 ? s(
+      r.steps[r.steps.length - 1]
+    ) : r.id;
+  }, o = (r) => r.steps && r.steps.length > 0 ? s(
+    r.steps[r.steps.length - 1]
+  ) : r.paths && r.paths.length > 0 ? o(r.paths[r.paths.length - 1]) : r.id, l = (r, d) => "paths" in r && r.paths && r.paths.length > 0 ? r.paths.some((b) => o(b) === d) : s(r) === d, c = (r) => {
+    for (let d = 0; d < r.length - 1; d++) {
+      const g = r[d], b = r[d + 1];
+      if (g.id === e && b.id === n || l(g, e) && b.id === n)
+        return !0;
+    }
+    for (const d of r) {
+      if (d.id === e && d.steps?.[0]?.id === n)
+        return !0;
+      if ("paths" in d && d.paths) {
+        for (const g of d.paths)
+          if (p(g)) return !0;
+      }
+      if ("steps" in d && d.steps && c(d.steps))
+        return !0;
+    }
+    return !1;
+  }, p = (r) => {
+    if (r.id === e && r.steps?.[0]?.id === n || r.steps && r.steps.length > 0 && c(r.steps))
+      return !0;
+    if (r.paths) {
+      for (const d of r.paths)
+        if (p(d)) return !0;
+    }
+    return !1;
+  }, a = t.steps;
+  return a?.[0] && a[0].id === e && a[0].steps?.[0]?.id === n ? !0 : c(a);
+}, ie = (t, e) => {
+  if (t.id === e) return t.status;
+  if (t.steps)
+    for (const n of t.steps) {
+      const s = Pt(n, e);
+      if (s !== void 0) return s;
+    }
+  if (t.paths)
+    for (const n of t.paths) {
+      const s = ie(n, e);
+      if (s !== void 0) return s;
+    }
+}, Pt = (t, e) => {
+  if (t.id === e) return t.status;
+  if (t.paths)
+    for (const n of t.paths) {
+      const s = ie(n, e);
+      if (s !== void 0) return s;
+    }
+  if (t.steps)
+    for (const n of t.steps) {
+      const s = Pt(n, e);
+      if (s !== void 0) return s;
+    }
+}, V = (t, e) => {
+  for (const n of t.triggers)
+    if (n.id === e) return n.status;
+  for (const n of t.steps) {
+    const s = Pt(n, e);
+    if (s !== void 0) return s;
+  }
+}, g1 = (t, e) => {
+  const n = (o) => {
+    if (o.id === e) return !0;
+    if (o.steps) {
+      for (const l of o.steps)
+        if (s(l)) return !0;
+    }
+    if (o.paths) {
+      for (const l of o.paths)
+        if (n(l)) return !0;
+    }
+    return !1;
+  }, s = (o) => {
+    if (o.paths) {
+      for (const l of o.paths)
+        if (n(l)) return !0;
+    }
+    if (o.steps) {
+      for (const l of o.steps)
+        if (s(l)) return !0;
+    }
+    return !1;
+  };
+  for (const o of t.triggers)
+    if (s(o)) return !0;
+  for (const o of t.steps)
+    if (s(o)) return !0;
+  return !1;
+}, vt = (t, e, n) => {
+  if (e === n) return !1;
+  const s = V(t, e), o = V(t, n);
+  return s !== "finished" || o !== "finished" ? !1 : Et(t, e, n);
+}, kt = (t, e, n) => e === n || !g1(t, e) || V(t, n) !== "finished" ? !1 : Et(t, e, n), st = ({
+  lineColor: t,
+  style: e,
+  fromId: n,
+  toId: s
+}) => {
+  const l = pt(t) ? `${W.stepLinkLine} ${W.dashedLine}` : W.stepLinkLine;
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: `${W.stepLinkContainer} ${W.readOnly}`,
+      style: { ...e, "--step-link-color": t },
+      "aria-hidden": !0,
+      "data-connector-from": void 0,
+      "data-connector-to": void 0,
+      children: [
+        /* @__PURE__ */ i("div", { className: l }),
+        /* @__PURE__ */ i(
+          "div",
+          {
+            className: `${W.stepLinkIcon} ${W.debuggerIconCollapsed}`,
+            "aria-hidden": !0
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: l })
+      ]
+    }
+  );
+}, Rt = (t) => t.steps && t.steps.length > 0 ? ut(t.steps[t.steps.length - 1]) : t.paths && t.paths.length > 0 ? Rt(t.paths[t.paths.length - 1]) : t.id, ut = (t) => "paths" in t && t.paths && t.paths.length > 0 ? Rt(t.paths[t.paths.length - 1]) : "steps" in t && t.steps && t.steps.length > 0 ? ut(t.steps[t.steps.length - 1]) : t.id, _t = (t) => "steps" in t && t.steps && t.steps.length > 0 ? _t(t.steps[t.steps.length - 1]) : "paths" in t && t.paths && t.paths.length > 0 ? _t(t.paths[t.paths.length - 1]) : t.id, se = (t, e, n, s) => {
+  const o = e.statusLine(void 0);
+  if (s == null)
+    return n != null && V(t, n) === "finished" ? e.statusLine("finished") : o;
+  const l = V(t, s);
+  if (l == null || l !== "finished")
+    return o;
+  if (n == null) {
+    const c = t.steps[0]?.id;
+    return c !== void 0 && s === c ? e.statusLine("finished") : o;
+  }
+  return kt(t, n, s) || vt(t, n, s) ? e.statusLine("finished") : o;
+}, oe = Gt(
+  null
+), C1 = oe.Provider, Ot = () => {
+  const t = Vt(oe);
+  if (!t)
+    throw new Error(
+      "useProcessDebuggerContext must be used within ProcessDebuggerProvider"
+    );
+  return t;
+}, At = 34.5, m1 = 33, re = (t) => {
+  const {
+    items: e,
+    pathId: n,
+    previousId: s,
+    nextId: o,
+    menus: l,
+    onAction: c,
+    onSelectStep: p,
+    onResize: a
+  } = t, { process: r, lineColors: d } = Ot(), g = se(
+    r,
+    d,
+    s,
+    o
+  ), b = $(null), h = $([]), [m, x] = O([]);
+  ot(() => {
+    const u = () => {
+      const L = b.current;
+      if (!L || e.length === 0) {
+        x([]);
+        return;
+      }
+      const D = [], X = Number.parseFloat(getComputedStyle(L).zoom || "1");
+      for (let K = 0; K < e.length; K++) {
+        const j = h.current[K];
+        if (j)
+          if (j.offsetParent == null) {
+            const w = L.getBoundingClientRect(), R = j.getBoundingClientRect();
+            D.push((R.top - w.top) / X + At);
+          } else
+            D.push(j.offsetTop - m1 + At);
+      }
+      D.length === e.length && x(D);
+    };
+    u();
+    const _ = new ResizeObserver(u), T = b.current;
+    return T && _.observe(T), window.addEventListener("resize", u), () => {
+      _.disconnect(), window.removeEventListener("resize", u);
+    };
+  }, [e]);
+  const f = k(() => {
+    if (e.length)
+      return Xt(
+        e.map((u) => dt(u))
+      );
+  }, [e]), N = k(() => {
+    const u = d.statusLine(void 0);
+    return e.length === 0 ? u : dt(e[0]) === "finished" ? d.statusLine("finished") : u;
+  }, [e, d]), E = k(() => m.length !== e.length || e.length <= 1 ? null : e.map((u, _) => _).filter((u) => u > 0).map((u) => {
+    const _ = m[u];
+    if (_ === void 0) return null;
+    const L = dt(e[u]) === "finished" ? d.statusLine("finished") : d.statusLine(void 0);
+    return /* @__PURE__ */ i(
+      Nt,
+      {
+        width: 100,
+        height: _,
+        strokeColor: L,
+        fromId: e[u - 1]?.id,
+        toId: e[u]?.id
+      },
+      u
+    );
+  }), [e, m, d]), v = k(() => {
+    if (m.length !== e.length || e.length <= 1) return null;
+    const u = d.statusLine(void 0);
+    return e.map((_, T) => T).filter((_) => _ > 0).map((_) => {
+      const T = m[_];
+      if (T === void 0) return null;
+      let L = u;
+      if (o != null && V(r, o) === "finished") {
+        const X = _t(
+          e[_]
+        );
+        vt(
+          r,
+          X,
+          o
+        ) && (L = d.statusLine("finished"));
+      }
+      return /* @__PURE__ */ i(
+        Nt,
+        {
+          width: 100,
+          height: T,
+          strokeColor: L,
+          fromId: s,
+          toId: o
+        },
+        _
+      );
+    });
+  }, [
+    e,
+    m,
+    d,
+    r,
+    o,
+    s
+  ]), y = k(() => {
+    const u = d.statusLine(void 0);
+    if (e.length === 0 || o == null || V(r, o) !== "finished") return u;
+    const T = _t(
+      e[0]
+    );
+    return vt(
+      r,
+      T,
+      o
+    ) ? d.statusLine("finished") : u;
+  }, [e, d, r, o]);
+  return /* @__PURE__ */ C("div", { className: z.row, children: [
+    /* @__PURE__ */ i(
+      Qt,
+      {
+        enabled: !1,
+        debuggerMode: !0,
+        status: f,
+        onSelect: n != null && p ? () => p(n) : void 0
+      }
+    ),
+    /* @__PURE__ */ C(
+      "div",
+      {
+        ref: b,
+        className: z.column,
+        style: { marginTop: "33px" },
+        children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100px",
+                height: "2px",
+                borderTop: et(N)
+              }
+            }
+          ),
+          E
+        ]
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: z.column, children: e.map((u, _) => {
+      let T;
+      if (u.paths)
+        T = /* @__PURE__ */ i(
+          re,
+          {
+            items: u.paths,
+            pathId: n,
+            previousId: u.id,
+            nextId: o,
+            menus: l,
+            onAction: c,
+            onSelectStep: p,
+            onResize: a
+          },
+          u.id
+        );
+      else if (u.steps) {
+        const L = u, D = L.status === "finished" || o != null && kt(
+          r,
+          L.id,
+          o
+        ) ? "finished" : void 0;
+        T = /* @__PURE__ */ C(
+          "div",
+          {
+            className: z.stepsContainer,
+            "data-id": void 0,
+            children: [
+              /* @__PURE__ */ i(
+                yt,
+                {
+                  expression: L.condition,
+                  status: D,
+                  debuggerMode: !0,
+                  style: { marginTop: "25px" }
+                }
+              ),
+              /* @__PURE__ */ i(
+                Mt,
+                {
+                  steps: u.steps,
+                  pathId: u.id,
+                  previousId: L.id,
+                  nextId: o,
+                  menus: l,
+                  onAction: c,
+                  onSelectStep: p ?? (() => {
+                  }),
+                  onResize: a
+                },
+                u.id
+              )
+            ]
+          }
+        );
+      } else
+        T = /* @__PURE__ */ i(
+          ht,
+          {
+            id: u.id,
+            title: "title" in u ? u.title : "",
+            icon: "icon" in u ? u.icon : void 0,
+            status: "status" in u ? u.status : void 0,
+            debuggerMode: !0,
+            items: l?.step,
+            menuContext: {
+              stepId: u.id,
+              status: "status" in u ? u.status : void 0
+            },
+            onAction: c,
+            onSelectStep: p
+          },
+          u.id
+        );
+      return /* @__PURE__ */ i(
+        "div",
+        {
+          ref: (L) => {
+            h.current[_] = L;
+          },
+          style: { width: "100%" },
+          "data-id": void 0,
+          children: T
+        },
+        u.id
+      );
+    }) }),
+    /* @__PURE__ */ C("div", { className: z.column, style: { marginTop: "33px" }, children: [
+      /* @__PURE__ */ i(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0.5,
+            left: 0,
+            flex: 1,
+            width: "100%",
+            height: "2px",
+            borderTop: et(y)
+          }
+        }
+      ),
+      v
+    ] }),
+    /* @__PURE__ */ i(
+      st,
+      {
+        lineColor: g,
+        fromId: s,
+        toId: o,
+        style: {
+          marginTop: "34px",
+          height: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          flex: 1,
+          width: "100%",
+          height: "2px",
+          borderTop: et(g),
+          marginTop: "34px"
+        }
+      }
+    )
+  ] });
+}, v1 = ({
+  value: t,
+  previousId: e,
+  nextId: n,
+  menus: s,
+  onAction: o,
+  onSelectStep: l,
+  onResize: c
+}) => {
+  const { process: p, lineColors: a } = Ot(), { id: r, limit: d, steps: g, condition: b } = t, h = g ?? [], [m, x] = O(!1), f = () => {
+    x((T) => !T), c?.();
+  }, N = S.container + (m ? "" : " " + S.collapsed), E = S.expandable + (m ? "" : " " + S.expandableCollapsed), v = h[0]?.id, y = v != null ? V(p, v) : void 0, _ = e != null && (kt(
+    p,
+    e,
+    r
+  ) || V(p, e) === "finished" && Et(p, e, r) || vt(p, e, r)) && y === "finished" ? a.statusLine("finished") : a.statusLine(void 0);
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: N,
+      "data-id": void 0,
+      children: [
+        /* @__PURE__ */ C("div", { className: S.loopNodeWrapper, children: [
+          /* @__PURE__ */ i("div", { className: S.loopBox, children: /* @__PURE__ */ i("div", { onClick: f, className: S.loopIconWrapper, children: /* @__PURE__ */ i(ee, {}) }) }),
+          /* @__PURE__ */ i("div", { className: S.label, children: "Loop" }),
+          d != null && /* @__PURE__ */ C("div", { className: S.limit, children: [
+            d,
+            "x"
+          ] })
+        ] }),
+        /* @__PURE__ */ C("div", { className: E, children: [
+          /* @__PURE__ */ C(
+            "div",
+            {
+              className: S.connector,
+              style: {
+                "--iterator-connector-color": _,
+                ...pt(_) && {
+                  "--iterator-connector-width": "3px",
+                  "--iterator-connector-style": "dotted"
+                }
+              },
+              children: [
+                /* @__PURE__ */ i("div", { className: S.line }),
+                /* @__PURE__ */ i("div", { className: S.circleDot, children: /* @__PURE__ */ i("div", { className: S.innerDot }) }),
+                /* @__PURE__ */ i("div", { className: S.line })
+              ]
+            }
+          ),
+          /* @__PURE__ */ i(
+            yt,
+            {
+              expression: b ?? "",
+              status: t.status,
+              debuggerMode: !0,
+              style: { marginTop: "25.5px" }
+            }
+          ),
+          /* @__PURE__ */ i("div", { className: S.stepsWrapper, children: /* @__PURE__ */ i(
+            Mt,
+            {
+              steps: h,
+              pathId: r,
+              previousId: r,
+              nextId: n,
+              menus: s,
+              onAction: o,
+              onSelectStep: l ?? (() => {
+              }),
+              onResize: c,
+              isDescendent: !0
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, St = 68, _1 = (t) => {
+  if (!t || t.length === 0) return;
+  const e = Xt(
+    t.map((s) => dt(s))
+  ), n = t.find((s) => dt(s) === e) ?? t[t.length - 1];
+  return Rt(n);
+}, Mt = ({
+  pathId: t,
+  steps: e,
+  centerY: n,
+  className: s,
+  previousId: o,
+  nextId: l,
+  menus: c,
+  onAction: p,
+  onSelectStep: a,
+  onResize: r,
+  isDescendent: d = !0
+}) => {
+  const { process: g, lineColors: b } = Ot(), h = n === void 0 ? void 0 : { marginTop: Math.max(0, n - St / 2) }, m = (f, N) => se(g, b, f, N), x = (f) => f === e.length - 1 ? l : e[f + 1]?.id;
+  if (e.length === 0) {
+    const f = m(o, l);
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        "data-path-id": t ?? "",
+        style: {
+          width: "100%",
+          marginTop: "20px",
+          display: "flex",
+          flexDirection: "row",
+          flex: 1,
+          minWidth: 0,
+          ...h
+        },
+        children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: "auto",
+                minWidth: 0,
+                height: "2px",
+                marginTop: "13.5px",
+                borderTop: et(f)
+              }
+            }
+          ),
+          /* @__PURE__ */ i(
+            st,
+            {
+              lineColor: f,
+              fromId: o,
+              toId: l,
+              style: {
+                height: "auto",
+                marginTop: "2px"
+              }
+            }
+          ),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              style: {
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: "auto",
+                minWidth: 0,
+                height: "2px",
+                marginTop: "13.5px",
+                borderTop: et(f)
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      "data-path-id": t ?? "",
+      className: rt.steps + (s ? " " + s : ""),
+      style: h,
+      children: /* @__PURE__ */ C(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            flex: 1,
+            minWidth: 0,
+            width: "100%",
+            alignItems: "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ i(
+              st,
+              {
+                lineColor: m(o, e[0]?.id),
+                fromId: o,
+                toId: e[0]?.id,
+                style: {
+                  marginTop: "21.5px"
+                }
+              }
+            ),
+            e.map((f, N) => {
+              const E = !!f.paths, v = "condition" in f && typeof f.condition == "string";
+              let y;
+              if (E && f.paths) {
+                const u = _1(f.paths);
+                y = /* @__PURE__ */ i(
+                  re,
+                  {
+                    items: f.paths,
+                    pathId: f.id,
+                    previousId: u ?? f.id,
+                    nextId: x(N),
+                    menus: c,
+                    onAction: p,
+                    onSelectStep: a,
+                    onResize: r
+                  },
+                  f.title
+                );
+              } else if (v) {
+                const u = N === 0 ? o : ut(e[N - 1]), _ = ut(f);
+                y = /* @__PURE__ */ C(G, { children: [
+                  /* @__PURE__ */ i(
+                    v1,
+                    {
+                      value: f,
+                      previousId: u,
+                      nextId: x(N),
+                      menus: c,
+                      onAction: p,
+                      onSelectStep: a,
+                      onResize: r
+                    }
+                  ),
+                  /* @__PURE__ */ i(
+                    st,
+                    {
+                      lineColor: m(
+                        _,
+                        x(N)
+                      ),
+                      fromId: f.id,
+                      toId: x(N),
+                      style: { marginTop: "34px", height: 0 }
+                    }
+                  )
+                ] });
+              } else
+                y = /* @__PURE__ */ C(G, { children: [
+                  /* @__PURE__ */ i(
+                    ht,
+                    {
+                      id: f.id,
+                      title: f.title,
+                      icon: f.icon,
+                      isSet: f.isSet,
+                      isInvalid: f.isInvalid,
+                      isFilter: f.isFilter,
+                      status: f.status,
+                      debuggerMode: !0,
+                      items: c?.step,
+                      menuContext: { stepId: f.id },
+                      onAction: p,
+                      onSelectStep: a
+                    },
+                    f.title
+                  ),
+                  /* @__PURE__ */ i(
+                    st,
+                    {
+                      lineColor: m(
+                        f.id,
+                        x(N)
+                      ),
+                      fromId: f.id,
+                      toId: x(N)
+                    }
+                  )
+                ] });
+              return /* @__PURE__ */ i(
+                "div",
+                {
+                  className: rt.stepContainer + (E || v ? " " + rt.stepContainerWithPaths : ""),
+                  children: y
+                },
+                f.id
+              );
+            }),
+            d && /* @__PURE__ */ i(
+              "div",
+              {
+                style: {
+                  flexGrow: 1,
+                  minWidth: 0,
+                  borderTop: et(m(
+                    e.length > 0 ? ut(
+                      e[e.length - 1]
+                    ) : void 0,
+                    l
+                  )),
+                  marginTop: "33.5px"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, x1 = ({
+  centerY: t,
+  neutralLineColor: e
+}) => /* @__PURE__ */ C(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      flex: 1,
+      minWidth: 0,
+      width: "100%",
+      marginTop: Math.max(0, t - St / 2),
+      height: St,
+      alignItems: "center"
+    },
+    children: [
+      /* @__PURE__ */ i(
+        "div",
+        {
+          style: {
+            flexGrow: 1,
+            minWidth: 0,
+            height: "2px",
+            borderTop: `2px solid ${e}`
+          }
+        }
+      ),
+      /* @__PURE__ */ i(
+        st,
+        {
+          lineColor: e,
+          style: { height: "auto" }
+        }
+      ),
+      /* @__PURE__ */ i(
+        "div",
+        {
+          style: {
+            flexGrow: 1,
+            minWidth: 0,
+            height: "2px",
+            borderTop: `2px solid ${e}`
+          }
+        }
+      )
+    ]
+  }
+), P1 = ({
+  process: t,
+  statusLineColors: e,
+  neutralLineColor: n = I.NAVY,
+  menus: s,
+  onMenuAction: o,
+  onResize: l,
+  onSelectStep: c
+}) => {
+  const [p, a] = O(0), r = k(
+    () => gn(e, n),
+    [e, n]
+  ), d = tt(
+    (g) => g === "finished" ? r.statusLine("finished") : r.statusLine(void 0),
+    [r]
+  );
+  return /* @__PURE__ */ i("div", { className: ne.container, children: /* @__PURE__ */ C(C1, { value: { process: t, lineColors: r }, children: [
+    /* @__PURE__ */ i(
+      Jt,
+      {
+        steps: t.triggers,
+        onSelectStep: c,
+        debuggerMode: !0,
+        resolveCurveStrokeColor: d,
+        onCenterYUpdate: a,
+        nextStepStatus: t.steps[0]?.status
+      }
+    ),
+    t.steps.length > 0 ? /* @__PURE__ */ i(
+      Mt,
+      {
+        steps: t.steps,
+        centerY: p,
+        onResize: l,
+        onSelectStep: c,
+        menus: s,
+        onAction: o,
+        isDescendent: !1,
+        pathId: void 0
+      }
+    ) : /* @__PURE__ */ i(
+      x1,
+      {
+        centerY: p,
+        neutralLineColor: r.statusLine(void 0)
+      }
+    )
+  ] }) });
 };
-class ke extends Error {
-  constructor(n) {
-    super(n), this.name = "AddStepError";
+class w1 extends Error {
+  constructor(e) {
+    super(e), this.name = "AddStepError";
   }
 }
-const m1 = (t) => "condition" in t && typeof t.condition == "string", y1 = (t, n, o, i) => {
-  const r = i === "prepend" ? n : n + 1;
-  return [...t.slice(0, r), o, ...t.slice(r)];
-}, c1 = (t, n, o, i) => {
-  for (let r = 0; r < t.length; r++) {
-    if (t[r].localId === n)
-      return y1(t, r, i, o);
-    const c = t[r], d = c.steps?.length && c1(c.steps, n, o, i);
-    if (d)
+const Yt = (t) => "condition" in t && typeof t.condition == "string", le = (t, e, n, s) => {
+  const o = s === "prepend" ? e : e + 1;
+  return [...t.slice(0, o), n, ...t.slice(o)];
+}, $t = (t, e, n, s) => {
+  for (let o = 0; o < t.length; o++) {
+    if (t[o].id === e)
+      return le(t, o, s, n);
+    const l = t[o], c = l.steps?.length && $t(l.steps, e, n, s);
+    if (c)
       return t.map(
-        (s, l) => l === r ? { ...s, steps: d } : s
+        (a, r) => r === o ? { ...a, steps: c } : a
       );
-    const a = c.paths?.length && I1(c.paths, n, o, i);
-    if (a)
+    const p = l.paths?.length && ce(l.paths, e, n, s);
+    if (p)
       return t.map(
-        (s, l) => l === r ? { ...s, paths: a } : s
+        (a, r) => r === o ? { ...a, paths: p } : a
       );
   }
   return null;
-}, Be = (t, n, o) => {
-  const i = t.steps ?? [], r = n === "prepend" ? [o, ...i] : [...i, o];
-  return { ...t, steps: r };
-}, I1 = (t, n, o, i) => {
-  for (let r = 0; r < t.length; r++) {
-    const c = t[r];
-    if (c.localId === n)
-      return m1(c) ? t.map(
-        (d, a) => a === r ? Be(c, o, i) : d
-      ) : y1(t, r, i, o);
-    if (m1(c)) {
-      const d = c.steps?.length && c1(c.steps, n, o, i);
-      if (d)
+}, b1 = (t, e, n) => {
+  const s = t.steps ?? [], o = e === "prepend" ? [n, ...s] : [...s, n];
+  return { ...t, steps: o };
+}, ce = (t, e, n, s) => {
+  for (let o = 0; o < t.length; o++) {
+    const l = t[o];
+    if (l.id === e)
+      return Yt(l) ? t.map(
+        (c, p) => p === o ? b1(l, n, s) : c
+      ) : le(t, o, s, n);
+    if (Yt(l)) {
+      const c = l.steps?.length && $t(l.steps, e, n, s);
+      if (c)
         return t.map(
-          (s, l) => l === r ? { ...s, steps: d } : s
+          (a, r) => r === o ? { ...a, steps: c } : a
         );
-      const a = c.paths?.length && I1(c.paths, n, o, i);
-      if (a)
+      const p = l.paths?.length && ce(l.paths, e, n, s);
+      if (p)
         return t.map(
-          (s, l) => l === r ? { ...s, paths: a } : s
+          (a, r) => r === o ? { ...a, paths: p } : a
         );
     }
   }
   return null;
-}, Te = (t, n, o, i) => {
-  const r = c1(t.steps, n, o, i);
-  if (r)
-    return { ...t, steps: r };
-  throw new ke(`Step or path with id "${n}" not found`);
-}, b1 = (t, n) => ({
+}, k1 = (t, e, n, s) => {
+  const o = $t(t.steps, e, n, s);
+  if (o)
+    return { ...t, steps: o };
+  throw new w1(`Step or path with id "${e}" not found`);
+}, ae = (t, e) => ({
   ...t,
-  ...t.steps != null && { steps: a1(t.steps, n) },
+  ...t.steps != null && { steps: Dt(t.steps, e) },
   ...t.paths != null && {
-    paths: t.paths.map((o) => b1(o, n))
+    paths: t.paths.map((n) => ae(n, e))
   }
-}), a1 = (t, n) => t.filter((o) => o.localId !== n).map((o) => ({
-  ...o,
-  ...o.steps != null && { steps: a1(o.steps, n) },
-  ...o.paths != null && {
-    paths: o.paths.map((i) => b1(i, n))
+}), Dt = (t, e) => t.filter((n) => n.id !== e).map((n) => ({
+  ...n,
+  ...n.steps != null && { steps: Dt(n.steps, e) },
+  ...n.paths != null && {
+    paths: n.paths.map((s) => ae(s, e))
   }
-})), Oe = (t, n) => {
-  const o = a1(t.steps, n);
+})), R1 = (t, e) => {
+  const n = Dt(t.steps, e);
   return {
     ...t,
-    steps: o
+    steps: n
   };
 };
 export {
-  ke as AddStepError,
-  Ie as Iterator,
-  Q as Menu,
-  Ee as MenuProvider,
-  $e as ProcessDiagram,
-  s1 as ProcessStep,
-  kt as Trigger,
-  Te as addStep,
-  Oe as deleteStep,
-  r1 as useMenuProvider
+  w1 as AddStepError,
+  S1 as ConditionIcon,
+  h1 as Iterator,
+  L1 as LoopIcon,
+  xt as Menu,
+  Ye as MenuFilterIcon,
+  T1 as MenuProvider,
+  P1 as ProcessDebuggerDiagram,
+  E1 as ProcessDiagram,
+  ht as ProcessStep,
+  Jt as Trigger,
+  k1 as addStep,
+  R1 as deleteStep,
+  Wt as isDiagramMenuSeparator,
+  Lt as useMenuProvider
 };
 //# sourceMappingURL=index.mjs.map