@emporix/process-diagram 2.0.0-beta.3 → 2.0.0-beta.30

package/dist/index.mjs

@@ -1,266 +1,288 @@
-import { jsxs as h, Fragment as n1, jsx as e } from "react/jsx-runtime";
-import z, { forwardRef as k1, useState as E, useRef as $, useCallback as D, useImperativeHandle as B1, useEffect as q, createContext as P1, useMemo as S, useContext as M1, useLayoutEffect as L1 } from "react";
-import { createPortal as E1 } from "react-dom";
-const $1 = "_container_8wfnz_1", T1 = "_step_8wfnz_7", O1 = "_selected_8wfnz_23", H1 = "_selectedInvalid_8wfnz_29", S1 = "_isSet_8wfnz_35", W1 = "_invalid_8wfnz_39", z1 = "_filterFlag_8wfnz_45", R1 = "_title_8wfnz_73", j1 = "_icon_8wfnz_90", D1 = "_content_8wfnz_108", Z1 = "_dotsButton_8wfnz_114", N = {
-  container: $1,
-  step: T1,
-  selected: O1,
-  selectedInvalid: H1,
-  isSet: S1,
-  invalid: W1,
-  filterFlag: z1,
-  title: R1,
-  icon: j1,
-  content: D1,
-  dotsButton: Z1
+import { jsxs as C, Fragment as tt, jsx as n } from "react/jsx-runtime";
+import X, { forwardRef as pe, useState as D, useRef as F, useCallback as J, useImperativeHandle as he, useEffect as st, createContext as Yt, useMemo as R, useContext as Gt, useLayoutEffect as fe } from "react";
+import { createPortal as ge } from "react-dom";
+const Ce = "_container_1f7x1_1", me = "_step_1f7x1_7", ve = "_dotsButton_1f7x1_23", _e = "_selected_1f7x1_27", xe = "_selectedInvalid_1f7x1_36", we = "_isSet_1f7x1_45", ye = "_invalid_1f7x1_52", be = "_debuggerStatus_1f7x1_60", Ne = "_title_1f7x1_64", Le = "_icon_1f7x1_67", Se = "_filterFlag_1f7x1_78", Ie = "_content_1f7x1_141", k = {
+  container: Ce,
+  step: me,
+  dotsButton: ve,
+  selected: _e,
+  selectedInvalid: xe,
+  isSet: we,
+  invalid: ye,
+  debuggerStatus: be,
+  title: Ne,
+  icon: Le,
+  filterFlag: Se,
+  content: Ie
 };
-var f1 = {
+var Zt = {
   color: void 0,
   size: void 0,
   className: void 0,
   style: void 0,
   attr: void 0
-}, p1 = z.createContext && /* @__PURE__ */ z.createContext(f1), V1 = ["attr", "size", "title"];
-function F1(t, n) {
+}, At = X.createContext && /* @__PURE__ */ X.createContext(Zt), Ee = ["attr", "size", "title"];
+function Te(t, e) {
   if (t == null) return {};
-  var o = q1(t, n), i, r;
+  var i = Pe(t, e), o, s;
   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 (s = 0; s < l.length; s++)
+      o = l[s], !(e.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(t, o) && (i[o] = t[o]);
   }
-  return o;
+  return i;
 }
-function q1(t, n) {
+function Pe(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 i = {};
+  for (var o in t)
+    if (Object.prototype.hasOwnProperty.call(t, o)) {
+      if (e.indexOf(o) >= 0) continue;
+      i[o] = t[o];
     }
-  return o;
+  return i;
 }
-function X() {
-  return X = 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 i = arguments[e];
+      for (var o in i)
+        Object.prototype.hasOwnProperty.call(i, o) && (t[o] = i[o]);
     }
     return t;
-  }, X.apply(this, arguments);
+  }, gt.apply(this, arguments);
 }
-function u1(t, n) {
-  var o = Object.keys(t);
+function jt(t, e) {
+  var i = 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 o = Object.getOwnPropertySymbols(t);
+    e && (o = o.filter(function(s) {
+      return Object.getOwnPropertyDescriptor(t, s).enumerable;
+    })), i.push.apply(i, o);
   }
-  return o;
+  return i;
 }
-function G(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) {
-      Y1(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 i = arguments[e] != null ? arguments[e] : {};
+    e % 2 ? jt(Object(i), !0).forEach(function(o) {
+      ke(t, o, i[o]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(i)) : jt(Object(i)).forEach(function(o) {
+      Object.defineProperty(t, o, Object.getOwnPropertyDescriptor(i, o));
     });
   }
   return t;
 }
-function Y1(t, n, o) {
-  return n = A1(n), n in t ? Object.defineProperty(t, n, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : t[n] = o, t;
+function ke(t, e, i) {
+  return e = Re(e), e in t ? Object.defineProperty(t, e, { value: i, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = i, t;
 }
-function A1(t) {
-  var n = X1(t, "string");
-  return typeof n == "symbol" ? n : n + "";
+function Re(t) {
+  var e = Oe(t, "string");
+  return typeof e == "symbol" ? e : e + "";
 }
-function X1(t, n) {
+function Oe(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 i = t[Symbol.toPrimitive];
+  if (i !== void 0) {
+    var o = i.call(t, e);
+    if (typeof o != "object") return o;
     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__ */ z.createElement(n.tag, G({
-    key: o
-  }, n.attr), g1(n.child)));
+function Ut(t) {
+  return t && t.map((e, i) => /* @__PURE__ */ X.createElement(e.tag, Ct({
+    key: i
+  }, e.attr), Ut(e.child)));
 }
-function V(t) {
-  return (n) => /* @__PURE__ */ z.createElement(G1, X({
-    attr: G({}, t.attr)
-  }, n), g1(t.child));
+function et(t) {
+  return (e) => /* @__PURE__ */ X.createElement(Me, gt({
+    attr: Ct({}, t.attr)
+  }, e), Ut(t.child));
 }
-function G1(t) {
-  var n = (o) => {
+function Me(t) {
+  var e = (i) => {
     var {
-      attr: i,
-      size: r,
-      title: c
-    } = t, a = F1(t, V1), d = r || o.size || "1em", s;
-    return o.className && (s = o.className), t.className && (s = (s ? s + " " : "") + t.className), /* @__PURE__ */ z.createElement("svg", X({
+      attr: o,
+      size: s,
+      title: l
+    } = t, a = Te(t, Ee), p = s || i.size || "1em", c;
+    return i.className && (c = i.className), t.className && (c = (c ? c + " " : "") + t.className), /* @__PURE__ */ X.createElement("svg", gt({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
-    }, o.attr, i, a, {
-      className: s,
-      style: G(G({
-        color: t.color || o.color
-      }, o.style), t.style),
-      height: d,
-      width: d,
+    }, i.attr, o, a, {
+      className: c,
+      style: Ct(Ct({
+        color: t.color || i.color
+      }, i.style), t.style),
+      height: p,
+      width: p,
       xmlns: "http://www.w3.org/2000/svg"
-    }), c && /* @__PURE__ */ z.createElement("title", null, c), t.children);
+    }), l && /* @__PURE__ */ X.createElement("title", null, l), t.children);
   };
-  return p1 !== void 0 ? /* @__PURE__ */ z.createElement(p1.Consumer, null, (o) => n(o)) : n(f1);
+  return At !== void 0 ? /* @__PURE__ */ X.createElement(At.Consumer, null, (i) => e(i)) : e(Zt);
 }
-function K1(t) {
-  return V({ 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 $e(t) {
+  return et({ 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 v1(t) {
-  return V({ 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 Xt(t) {
+  return et({ 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 K(t) {
-  return V({ 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 mt(t) {
+  return et({ 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 V({ 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);
+function xt(t) {
+  return et({ 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 De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_19663_37", Ae = "_disabled_19663_52", je = "_menuItemIcon_19663_57", We = "_menuItemText_19663_63", He = "_overlay_19663_69", H = {
+  panel: De,
+  panelExiting: Be,
+  menuItem: Fe,
+  disabled: Ae,
+  menuItemIcon: je,
+  menuItemText: We,
+  overlay: He
+}, Ve = (t) => {
+  const i = t.currentTarget ?? t.target;
+  if (i?.getBoundingClientRect) {
+    const s = i.getBoundingClientRect();
+    return { top: s.bottom + 2, left: s.left };
   }
-  const i = t;
+  const o = t;
   return {
-    top: (i.clientY ?? 0) + 2,
-    left: i.clientX ?? 0
+    top: (o.clientY ?? 0) + 2,
+    left: o.clientX ?? 0
   };
-}, Q = k1(function({ model: n, popup: o = !0, onHide: i, onClick: r }, c) {
-  const [a, d] = E(!1), [s, l] = E(!1), [f, b] = E({ top: 0, left: 0 }), _ = $(null), x = D(() => {
-    s || l(!0);
-  }, [s]), C = D(
+}, wt = pe(function({ model: e, popup: i = !0, onHide: o, onClick: s }, l) {
+  const [a, p] = D(!1), [c, r] = D(!1), [u, w] = D({ top: 0, left: 0 }), y = F(null), N = J(() => {
+    c || r(!0);
+  }, [c]), _ = J(
     (m) => {
-      s && m.animationName.includes("menuOut") && (d(!1), l(!1), i?.());
+      c && m.animationName.includes("menuOut") && (p(!1), r(!1), o?.());
     },
-    [s, i]
-  ), p = D((m) => {
-    b(it(m)), l(!1), d(!0);
-  }, []), I = D(
+    [c, o]
+  ), g = J((m) => {
+    w(Ve(m)), r(!1), p(!0);
+  }, []), f = J(
     (m) => {
-      a ? x() : p(m);
+      a ? N() : g(m);
     },
-    [a, x, p]
+    [a, N, g]
   );
-  B1(
-    c,
+  he(
+    l,
     () => ({
-      show: p,
-      hide: x,
-      toggle: I
+      show: g,
+      hide: N,
+      toggle: f
     }),
-    [p, x, I]
-  ), q(() => {
+    [g, N, f]
+  ), st(() => {
     if (!a) return;
-    const m = (L) => {
-      L.key === "Escape" && x();
-    }, y = (L) => {
-      const u = _.current;
-      u && !u.contains(L.target) && (L.stopPropagation(), x());
+    const m = (d) => {
+      d.key === "Escape" && N();
+    }, L = (d) => {
+      const x = y.current;
+      x && !x.contains(d.target) && (d.stopPropagation(), N());
     };
-    return document.addEventListener("keydown", m), document.addEventListener("mousedown", y), () => {
-      document.removeEventListener("keydown", m), document.removeEventListener("mousedown", y);
+    return document.addEventListener("keydown", m), document.addEventListener("mousedown", L), () => {
+      document.removeEventListener("keydown", m), document.removeEventListener("mousedown", L);
     };
-  }, [a, 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(z.Fragment, { children: m.template(m, { onClick: L }) }, y) : /* @__PURE__ */ h(
+  }, [a, N]);
+  const h = (m, L) => {
+    L.stopPropagation(), m.command?.({ originalEvent: L, item: m }), N();
+  }, S = (m, L) => {
+    const d = (x) => h(m, x);
+    return m.template ? /* @__PURE__ */ n(X.Fragment, { children: m.template(m, { onClick: d }) }, L) : /* @__PURE__ */ C(
       "button",
       {
         type: "button",
-        className: `${O.menuItem} ${m.disabled && O.disabled}`,
-        onClick: (u) => {
-          m.disabled || L(u);
+        className: `${H.menuItem} ${m.disabled && H.disabled}`,
+        onClick: (x) => {
+          m.disabled || d(x);
         },
         children: [
-          m.icon && /* @__PURE__ */ e("span", { className: O.menuItemIcon, children: m.icon }),
-          /* @__PURE__ */ e("span", { className: O.menuItemText, children: m.label })
+          m.icon && /* @__PURE__ */ n("span", { className: H.menuItemIcon, children: m.icon }),
+          /* @__PURE__ */ n("span", { className: H.menuItemText, children: m.label })
         ]
       },
-      y
+      L
     );
   };
-  return !a || !o ? null : E1(
-    /* @__PURE__ */ h(n1, { children: [
-      /* @__PURE__ */ e(
+  return !a || !i ? null : ge(
+    /* @__PURE__ */ C(tt, { children: [
+      /* @__PURE__ */ n(
         "div",
         {
-          className: O.overlay,
+          className: H.overlay,
           "aria-hidden": !0,
-          onClick: () => x(),
+          onClick: () => N(),
           onMouseDown: (m) => m.stopPropagation()
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "div",
         {
-          ref: _,
-          className: `${O.panel} ${s ? O.panelExiting : ""}`,
+          ref: y,
+          className: `${H.panel} ${c ? H.panelExiting : ""}`,
           role: "menu",
-          style: { top: f.top, left: f.left },
-          onAnimationEnd: C,
+          style: { top: u.top, left: u.left },
+          onAnimationEnd: _,
           onClick: (m) => {
-            m.stopPropagation(), r?.(m);
+            m.stopPropagation(), s?.(m);
           },
-          children: n.map(v)
+          children: e.map(S)
         }
       )
     ] }),
     document.body
   );
-}), i1 = () => (t, n) => /* @__PURE__ */ h(
+}), yt = () => (t, e) => /* @__PURE__ */ C(
   "button",
   {
-    className: O.menuItem,
-    onClick: (o) => n.onClick(o),
+    className: H.menuItem,
+    onClick: (i) => e.onClick(i),
     children: [
-      /* @__PURE__ */ e("span", { className: O.menuItemIcon, children: t.icon }),
-      /* @__PURE__ */ e("span", { className: O.menuItemText, children: t.label })
+      /* @__PURE__ */ n("span", { className: H.menuItemIcon, children: t.icon }),
+      /* @__PURE__ */ n("span", { className: H.menuItemText, children: t.label })
     ]
   }
-), rt = ({
+), b = {
+  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() === b.FINISHED_GREEN.toLowerCase(), Q = (t) => pt(t) ? `3px dotted ${t}` : `2px solid ${t}`, bt = {
+  pending: b.NAVY,
+  running: b.TEAL,
+  validating: b.ORANGE,
+  finished: b.FINISHED_GREEN,
+  failed: b.ERROR_RED,
+  cancelled: b.ORANGE,
+  skipped: b.SLATE_400,
+  invalid: b.ERROR_RED
+}, ze = {
+  finished: "#DFFFE3"
+}, Ye = ({
   width: t = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ h(
+  height: e = 16,
+  color: i = b.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__ */ n(
         "rect",
         {
           x: "7.99219",
@@ -269,103 +291,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: i
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "path",
         {
           d: "M10.4693 5.52599L5.52513 10.4813M5.52513 5.53151L10.4749 10.4813",
-          stroke: o,
+          stroke: i,
           strokeLinecap: "round"
         }
       )
     ]
   }
-), st = ({
+), Ge = ({
   width: t = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ h(
+  height: e = 16,
+  color: i = b.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__ */ n(
         "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: i
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "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: i
         }
       )
     ]
   }
-), h1 = ({
+), Lt = ({
   width: t = 16,
-  height: n = 16,
-  color: o = "#3B64A0"
-}) => /* @__PURE__ */ h(
+  height: e = 16,
+  color: i = b.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__ */ n(
         "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: i
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "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: i
         }
       )
     ]
   }
-), _1 = P1(
+), Kt = Yt(
   void 0
-), Le = ({ children: t }) => {
-  const [n, o] = E([]), i = D((a, d) => {
-    o((s) => (s.forEach((l) => {
-      l.current && l !== a && l.current.hide(d);
-    }), [])), a.current?.toggle(d), o([a]);
-  }, []), r = D((a) => {
-    o((d) => d.filter((s) => s !== a));
-  }, []), c = S(
+), T1 = ({ children: t }) => {
+  const [e, i] = D([]), o = J((a, p) => {
+    i((c) => (c.forEach((r) => {
+      r.current && r !== a && r.current.hide(p);
+    }), [])), a.current?.toggle(p), i([a]);
+  }, []), s = J((a) => {
+    i((p) => p.filter((c) => c !== a));
+  }, []), l = R(
     () => ({
-      openMenus: n,
-      openMenu: i,
-      closeMenu: r
+      openMenus: e,
+      openMenu: o,
+      closeMenu: s
     }),
-    [n, i, r]
+    [e, o, s]
   );
-  return /* @__PURE__ */ e(_1.Provider, { value: c, children: t });
-}, r1 = () => {
-  const t = M1(_1);
+  return /* @__PURE__ */ n(Kt.Provider, { value: l, children: t });
+}, Tt = () => {
+  const t = Gt(Kt);
   if (t === void 0)
     throw new Error("useMenuProvider must be used within a MenuProvider");
   return t;
-}, lt = ({ color: t = "#E32012" }) => /* @__PURE__ */ h(
+}, Ze = ({ color: t = b.ERROR_RED }) => /* @__PURE__ */ C(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -374,329 +396,419 @@ 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__ */ n("g", { clipPath: "url(#clip0_3105_5367)", children: /* @__PURE__ */ n(
         "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__ */ n("defs", { children: /* @__PURE__ */ n("clipPath", { id: "clip0_3105_5367", children: /* @__PURE__ */ n("rect", { width: "16", height: "16", fill: "white" }) }) })
     ]
   }
-), s1 = (t) => {
+);
+function Ue(t) {
+  return et({ attr: { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, child: [{ tag: "path", attr: { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }, child: [] }, { tag: "polyline", attr: { points: "15 3 21 3 21 9" }, child: [] }, { tag: "line", attr: { x1: "10", y1: "14", x2: "21", y2: "3" }, child: [] }] })(t);
+}
+function Xe(t) {
+  return et({ 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 Ke(t) {
+  return et({ 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 ht = (t) => {
   const {
-    isSet: n,
-    isSelected: o,
-    isFilter: i,
-    className: r,
-    title: c,
-    icon: a,
-    contextMenuItems: d = void 0,
-    onDeleteStep: s,
-    onUpdateFilter: l,
-    onSelectStep: f,
-    subtitle: b,
-    isInvalid: _,
-    localId: x
-  } = t, C = $(null), { openMenu: p, closeMenu: I } = r1(), w = i1(), v = S(
-    () => [
-      {
-        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
+    isSet: e,
+    isSelected: i,
+    isFilter: o,
+    debuggerMode: s = !1,
+    status: l,
+    className: a,
+    title: p,
+    icon: c,
+    contextMenuItems: r = void 0,
+    onDeleteStep: u,
+    onUpdateFilter: w,
+    onSelectStep: y,
+    onCheckScenario: N,
+    subtitle: _,
+    isInvalid: g,
+    id: f
+  } = t, h = F(null), { openMenu: S, closeMenu: m } = Tt(), L = yt(), [d] = D(!0), x = R(() => {
+    const v = [];
+    return s || v.push({
+      label: "Add Step Filter",
+      icon: /* @__PURE__ */ n("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ n(Lt, {}) }),
+      command: (P) => {
+        P?.originalEvent?.stopPropagation(), w && w(f);
       },
-      {
-        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 = S(() => d !== void 0 ? d : v, [d, v]), y = (g) => {
-    g.stopPropagation(), p(C, g);
-  }, L = S(() => o && _ ? N.step + " " + N.selectedInvalid : o ? N.step + " " + N.selected : n ? N.step + " " + N.isSet : _ ? N.step + " " + N.invalid : N.step, [n, o, _]), u = S(() => _ ? /* @__PURE__ */ e(lt, { color: "#E32012" }) : a, [a, _]);
-  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(
-            K,
-            {
-              className: N.dots,
-              color: _ ? "#E32012" : "#3B64A0"
-            }
-          )
-        }
-      ),
-      /* @__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(
-            K,
-            {
-              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" })
+      template: L
+    }), u && !s && v.push({
+      label: "Remove",
+      icon: /* @__PURE__ */ n(xt, { color: b.NAVY, size: 18 }),
+      command: (P) => {
+        P?.originalEvent?.stopPropagation(), u(f);
+      },
+      template: L
+    }), d && v.push({
+      label: "Check Scenario",
+      icon: /* @__PURE__ */ n("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ n(Ue, { color: b.NAVY, size: 18 }) }),
+      command: (P) => {
+        P?.originalEvent?.stopPropagation(), N(f);
+      },
+      template: L
+    }), v;
+  }, [w, u, f, L, d, N, s]), E = R(() => r ?? x, [r, x]), T = (v) => {
+    v.stopPropagation(), S(h, v);
+  }, O = R(() => {
+    if (!(!s || l == null || l === "pending"))
+      return {
+        "--step-debugger-accent": bt[l]
+      };
+  }, [s, l]), j = R(() => i && g ? k.step + " " + k.selectedInvalid : s && l != null && l !== "pending" ? k.step + " " + k.debuggerStatus : i ? k.step + " " + k.selected : e ? k.step + " " + k.isSet : g ? k.step + " " + k.invalid : k.step, [e, i, g, l, s]), M = R(() => g ? /* @__PURE__ */ n(Ze, { color: b.ERROR_RED }) : c, [c, g]);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: k.container + " " + a,
+      "data-id": void 0,
+      children: /* @__PURE__ */ C("div", { children: [
+        /* @__PURE__ */ C(
+          "div",
+          {
+            className: j,
+            style: O,
+            onClick: () => y(f),
+            children: [
+              /* @__PURE__ */ C("div", { className: k.content, children: [
+                /* @__PURE__ */ n("div", { className: `${k.icon} ${g && k.invalid}`, children: M }),
+                /* @__PURE__ */ n("div", { className: k.title, children: p })
+              ] }),
+              E.length > 0 && /* @__PURE__ */ C(tt, { children: [
+                /* @__PURE__ */ n(
+                  "button",
+                  {
+                    className: k.dotsButton,
+                    onClick: T,
+                    "aria-haspopup": !0,
+                    "aria-label": "Step options",
+                    children: /* @__PURE__ */ n(mt, { className: k.dots, size: 16 })
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  wt,
+                  {
+                    model: E,
+                    popup: !0,
+                    ref: h,
+                    onClick: (v) => v.stopPropagation(),
+                    onHide: () => m(h)
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        o && /* @__PURE__ */ C(
+          "div",
+          {
+            className: k.filterFlag,
+            role: "button",
+            tabIndex: 0,
+            onClick: () => {
+              w && w(f);
+            },
+            onKeyDown: (v) => {
+              (v.key === "Enter" || v.key === " ") && w && (v.preventDefault(), w(f));
+            },
+            children: [
+              /* @__PURE__ */ n(Lt, { color: b.NAVY }),
+              /* @__PURE__ */ n("span", { children: "Filter" }),
+              !s && /* @__PURE__ */ n(
+                mt,
+                {
+                  className: k.dots,
+                  color: g ? b.ERROR_RED : b.NAVY,
+                  style: { height: "10px" }
+                }
+              )
+            ]
+          }
+        ),
+        _ && /* @__PURE__ */ n("div", { className: k.subtitle, children: _ })
+      ] })
+    }
+  );
+}, qe = () => /* @__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__ */ n("rect", { width: "24", height: "24", rx: "12", fill: b.ADD_TRIGGER_FILL }),
+    /* @__PURE__ */ n("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(
+  /* @__PURE__ */ n("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "11.25", stroke: b.ADD_TRIGGER_STROKE, strokeWidth: "1.5" }),
+  /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ n("clipPath", { id: "clip0_6551_9169", children: /* @__PURE__ */ n("rect", { width: "24", height: "24", rx: "12", fill: "white" }) }) })
+] }), Je = "_multipleTriggersIcon_oxhdi_1", Qe = {
+  multipleTriggersIcon: Je
+}, tn = ({
+  color: t
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: Qe.multipleTriggersIcon,
+    style: t != null ? { backgroundColor: t, color: t } : void 0,
+    children: /* @__PURE__ */ n("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ n("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" }) })
+  }
+), en = "_trigger_kfg1y_1", nn = "_title_kfg1y_7", on = "_empty_kfg1y_15", sn = "_triggerContainer_kfg1y_21", rn = "_stepsContainer_kfg1y_25", ln = "_stepItem_kfg1y_51", cn = "_curvesSvg_kfg1y_70", an = "_centralNode_kfg1y_78", dn = "_iconWrapper_kfg1y_104", un = "_fadeIn_kfg1y_127", pn = "_fadeOut_kfg1y_130", hn = "_operationContainer_kfg1y_134", B = {
+  trigger: en,
+  title: nn,
+  empty: on,
+  triggerContainer: sn,
+  stepsContainer: rn,
+  stepItem: ln,
+  curvesSvg: cn,
+  centralNode: an,
+  iconWrapper: dn,
+  fadeIn: un,
+  fadeOut: pn,
+  operationContainer: hn
+}, fn = () => /* @__PURE__ */ n(
   "div",
   {
     style: {
       height: "1px",
       marginLeft: "4px",
       marginRight: "4px",
-      borderTop: "1px solid #a1bbdc"
+      borderTop: `1px solid ${b.SEPARATOR}`
     }
   }
-), Nt = 80, Y = 34, kt = ({
+), gn = [
+  "failed",
+  "invalid",
+  "cancelled",
+  "validating",
+  "running",
+  "finished",
+  "skipped",
+  "pending"
+], qt = (t) => {
+  const e = [
+    ...new Set(t.filter((i) => i != null))
+  ];
+  if (e.length !== 0) {
+    for (const i of gn)
+      if (e.includes(i)) return i;
+    return e[0];
+  }
+}, Jt = (t, e) => !e || t == null ? b.NAVY : bt[t], Cn = (t, e, i = b.NAVY) => t == null ? i : e?.[t] ?? bt[t], mn = (t, e = b.NAVY) => ({
+  statusLine: (i) => Cn(i, 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;
+}, vn = 80, ft = 34, Qt = ({
   steps: t,
-  title: n,
-  className: o,
-  onDeleteTrigger: i,
-  onAddTrigger: r,
-  onSelectStep: c,
+  title: e,
+  className: i,
+  onDeleteTrigger: o,
+  onAddTrigger: s,
+  onSelectStep: l,
   onUpdateFilter: a,
-  onCenterYUpdate: d
+  onCenterYUpdate: p,
+  debuggerMode: c = !1,
+  resolveCurveStrokeColor: r,
+  isEditable: u = !1,
+  nextStepStatus: w
 }) => {
-  const s = $(null), l = $([]), [f, b] = E([]), [_, x] = E({ width: 0, height: 0 }), [C, p] = E(!1), [I, w] = E(!1), v = $(null);
-  q(() => {
-    const u = () => {
-      if (!s.current) return;
-      const g = [];
-      if (l.current.forEach((P, T) => {
-        if (P && s.current) {
-          const k = s.current.getBoundingClientRect(), H = P.getBoundingClientRect();
-          g.push({
-            localId: t[T]?.localId ?? `step-${T}`,
-            top: H.top - k.top,
-            right: H.right - k.left,
-            centerY: H.top - k.top + H.height / 2
+  const y = F(null), N = F([]), [_, g] = D([]), [f, h] = D({ width: 0, height: 0 }), [S, m] = D(!1), [L, d] = D(!1), x = F(null);
+  st(() => {
+    const v = () => {
+      if (!y.current) return;
+      const P = [];
+      if (N.current.forEach(($, z) => {
+        if ($ && y.current) {
+          const Y = y.current.getBoundingClientRect(), A = $.getBoundingClientRect();
+          P.push({
+            id: t[z]?.id ?? `step-${z}`,
+            top: A.top - Y.top,
+            right: A.right - Y.left,
+            centerY: A.top - Y.top + A.height / 2
           });
         }
-      }), b(g), s.current && g.length > 0) {
-        const P = s.current.getBoundingClientRect(), T = Math.min(...g.map((W) => W.top)), k = l.current.filter(Boolean).map((W) => W?.offsetHeight || 68), H = Math.max(
-          ...g.map((W, N1) => W.top + (k[N1] || 68))
-        ), U = Math.max(...g.map((W) => W.right)) + 0, t1 = Math.max(
-          P.height,
-          H - T + 100
+      }), g(P), y.current && P.length > 0) {
+        const $ = y.current.getBoundingClientRect(), z = Math.min(...P.map((Z) => Z.top)), Y = N.current.filter(Boolean).map((Z) => Z?.offsetHeight || 68), A = Math.max(
+          ...P.map((Z, ue) => Z.top + (Y[ue] || 68))
+        ), nt = Math.max(...P.map((Z) => Z.right)) + 0, ct = Math.max(
+          $.height,
+          A - z + 100
         );
-        x({
-          width: U,
-          height: t1
+        h({
+          width: nt,
+          height: ct
         });
       }
     };
-    return u(), window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
-  }, [t]), q(() => {
-    let u = !0;
-    if (C) {
-      v.current && (clearTimeout(v.current), v.current = null);
-      const g = setTimeout(() => {
-        u && w(!0);
+    return v(), window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
+  }, [t]), st(() => {
+    let v = !0;
+    if (S) {
+      x.current && (clearTimeout(x.current), x.current = null);
+      const P = setTimeout(() => {
+        v && d(!0);
       }, 0);
       return () => {
-        u = !1, clearTimeout(g);
+        v = !1, clearTimeout(P);
       };
     }
-    return v.current = setTimeout(() => {
-      u && w(!1);
+    return x.current = setTimeout(() => {
+      v && d(!1);
     }, 140), () => {
-      u = !1, v.current && (clearTimeout(v.current), v.current = null);
+      v = !1, x.current && (clearTimeout(x.current), x.current = null);
     };
-  }, [C]);
-  const m = f.length > 0 ? Nt : 0, y = S(() => f.length > 1 ? f.reduce((u, g) => u + g.top + Y, 0) / f.length : f.length === 1 ? f[0].top + Y : 0, [f]);
-  if (q(() => {
-    d?.(y);
-  }, [y, d]), 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" })
+  }, [S]);
+  const E = _.length > 0 ? vn : 0, T = R(() => _.length > 1 ? _.reduce((v, P) => v + P.top + ft, 0) / _.length : _.length === 1 ? _[0].top + ft : 0, [_]);
+  st(() => {
+    p?.(T);
+  }, [T, p]);
+  const O = c && t.some((v) => v.status === "finished") && w === "finished", j = yt();
+  if (t.length === 0)
+    return /* @__PURE__ */ C("div", { className: `${B.trigger} ${i || ""}`, children: [
+      e && /* @__PURE__ */ n("h3", { className: B.title, children: e }),
+      /* @__PURE__ */ n("div", { className: B.empty, children: "No steps" })
     ] });
-  const L = (u, g, P, T) => {
-    const k = P - u, H = Math.min(k * 0.6, 60), d1 = u + H, U = g, t1 = P - H;
-    return `M ${u} ${g} C ${d1} ${U}, ${t1} ${T}, ${P} ${T}`;
+  const M = (v, P, $, z) => {
+    const Y = $ - v, A = Math.min(Y * 0.6, 60), lt = v + A, nt = P, ct = $ - A;
+    return `M ${v} ${P} C ${lt} ${nt}, ${ct} ${z}, ${$} ${z}`;
   };
-  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: `${B.trigger} ${i || ""}`, ref: y, children: [
+    e && /* @__PURE__ */ n("h3", { className: B.title, children: e }),
+    /* @__PURE__ */ C("div", { className: B.triggerContainer, children: [
+      /* @__PURE__ */ n("div", { className: B.stepsContainer, children: t.map((v, P) => /* @__PURE__ */ n(
         "div",
         {
-          ref: (P) => {
-            l.current[g] = P;
+          ref: ($) => {
+            N.current[P] = $;
           },
-          children: /* @__PURE__ */ e(
-            s1,
+          children: /* @__PURE__ */ n(
+            ht,
             {
-              title: u.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,
+              title: v.title,
+              className: B.stepItem,
+              id: v.id,
+              idx: P,
+              isSet: v.isSet,
+              isSelected: v.isSelected,
+              isInvalid: v.isInvalid,
+              isFilter: v.isFilter,
+              status: v.status,
+              debuggerMode: c,
+              icon: v.icon,
+              onSelectStep: l,
               onUpdateFilter: a,
-              contextMenuItems: [
+              onCheckScenario: () => {
+                throw new Error("Check scenario not handled in Trigger");
+              },
+              contextMenuItems: u ? [
+                {
+                  label: "Add Step Filter",
+                  icon: /* @__PURE__ */ n("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ n(Lt, {}) }),
+                  command: ($) => {
+                    $?.originalEvent?.stopPropagation(), a && a(v.id);
+                  },
+                  template: j
+                },
                 {
                   label: "Delete",
-                  icon: /* @__PURE__ */ e(J, { className: "mr-2", color: "#3B64A0", size: 18 }),
+                  icon: /* @__PURE__ */ n(xt, { className: "mr-2", color: b.NAVY, size: 18 }),
                   command: () => {
-                    i?.(u.localId);
+                    o?.(v.id);
                   },
                   disabled: t.length === 1
                 },
                 {
                   label: "",
-                  template: () => /* @__PURE__ */ e(bt, {})
+                  template: () => /* @__PURE__ */ n(fn, {})
                 },
                 {
                   label: "Add More Triggers",
-                  icon: /* @__PURE__ */ e(K1, { className: "mr-2", color: "#3B64A0", size: 18 }),
+                  icon: /* @__PURE__ */ n($e, { className: "mr-2", color: b.NAVY, size: 18 }),
                   command: () => {
-                    r?.();
+                    s?.();
                   }
                 }
-              ]
+              ] : []
             }
           )
         },
-        u.localId
+        v.id
       )) }),
-      /* @__PURE__ */ e("div", { style: { position: "relative" }, children: f.length > 1 && /* @__PURE__ */ e(
+      /* @__PURE__ */ n("div", { style: { position: "relative" }, children: _.length > 1 && /* @__PURE__ */ n(
         "svg",
         {
-          className: M.curvesSvg,
-          width: _.width,
-          height: _.height,
-          children: f.map((u) => {
-            const P = f.length === 1 ? f[0].top + Y : u.top + Y;
-            return /* @__PURE__ */ e(
+          className: B.curvesSvg,
+          width: f.width,
+          height: f.height,
+          children: _.map((v) => {
+            const $ = _.length === 1 ? _[0].top + ft : v.top + ft, z = E, Y = T, A = t.find(
+              (ct) => ct.id === v.id
+            )?.status, lt = r != null ? r(A) : Jt(A, c), nt = pt(lt);
+            return /* @__PURE__ */ n(
               "path",
               {
-                d: L(0, P, m, y),
-                stroke: "#3b64a0",
-                strokeWidth: "2",
+                d: M(0, $, z, Y),
+                stroke: lt,
+                strokeWidth: nt ? 3 : 2,
                 fill: "none",
-                strokeLinecap: "round"
+                strokeLinecap: "round",
+                strokeDasharray: nt ? "0 6" : void 0
               },
-              u.localId
+              v.id
             );
           })
         }
       ) }),
-      f.length > 1 ? /* @__PURE__ */ h("div", { style: { position: "relative", marginRight: "140px" }, children: [
-        /* @__PURE__ */ e(
+      _.length > 1 ? /* @__PURE__ */ C("div", { style: { position: "relative", marginRight: "140px" }, children: [
+        /* @__PURE__ */ n(
           "div",
           {
-            className: M.centralNode,
+            className: B.centralNode,
             style: {
-              "--node-x": `${m}px`,
-              "--node-y": `${y}px`
+              "--node-x": `${E}px`,
+              "--node-y": `${T}px`,
+              ...c && {
+                cursor: "default",
+                pointerEvents: "none"
+              },
+              ...O && {
+                backgroundColor: b.FINISHED_GREEN
+              }
+            },
+            ...!c && {
+              onMouseEnter: () => m(!0),
+              onMouseLeave: () => m(!1)
             },
-            onMouseEnter: () => p(!0),
-            onMouseLeave: () => p(!1),
-            children: I ? /* @__PURE__ */ e(
+            children: !c && L ? /* @__PURE__ */ n(
               "div",
               {
-                className: `${M.iconWrapper} ${C ? M.fadeIn : M.fadeOut}`,
-                onClick: r,
-                children: /* @__PURE__ */ e(ct, {})
+                className: `${B.iconWrapper} ${S ? B.fadeIn : B.fadeOut}`,
+                onClick: s,
+                children: /* @__PURE__ */ n(qe, {})
               }
             ) : null
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n(
           "div",
           {
-            className: M.operationContainer,
+            className: B.operationContainer,
             style: {
-              "--op-x": `${m + 16}px`,
-              "--op-y": `${y}px`
+              "--op-x": `${E + 16}px`,
+              "--op-y": `${T}px`
             },
-            children: /* @__PURE__ */ e(pt, {})
+            children: /* @__PURE__ */ n(tn, { color: O ? b.FINISHED_GREEN : void 0 })
           }
         )
       ] }) : null
     ] })
   ] });
-};
-function Bt(t) {
-  return V({ 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 V({ 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(
+}, _n = () => /* @__PURE__ */ C(
   "svg",
   {
     width: "24",
@@ -705,301 +817,359 @@ const Mt = () => /* @__PURE__ */ h(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "path",
         {
           d: "M6 12L18 12",
-          stroke: "#3B64A0",
+          stroke: b.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "path",
         {
           d: "M12 6V18",
-          stroke: "#3B64A0",
+          stroke: b.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
       )
     ]
   }
-), Lt = "_stepLinkIcon_18u2g_1", Et = "_stepLinkLine_18u2g_15", $t = "_stepLinkContainer_18u2g_39", A = {
-  stepLinkIcon: Lt,
-  stepLinkLine: Et,
-  stepLinkContainer: $t
-}, Z = ({
+), xn = "_stepLinkIcon_b0452_1", wn = "_stepLinkLine_b0452_15", yn = "_stepLinkContainer_b0452_39", bn = "_readOnly_b0452_61", Nn = "_debuggerIconCollapsed_b0452_66", Ln = "_dashedLine_b0452_75", W = {
+  stepLinkIcon: xn,
+  stepLinkLine: wn,
+  stepLinkContainer: yn,
+  readOnly: bn,
+  debuggerIconCollapsed: Nn,
+  dashedLine: Ln
+}, it = ({
   onAddStep: t,
-  onAddTrigger: n,
-  onAddCondition: o,
-  onAddLoop: i,
-  stepId: r,
-  index: c = 0,
-  style: a,
-  pathId: d
+  onAddTrigger: e,
+  onAddCondition: i,
+  onAddLoop: o,
+  lineColor: s = b.NAVY,
+  stepId: l,
+  index: a = 0,
+  style: p,
+  pathId: c
 }) => {
-  const s = i1(), l = $(null), f = [
-    ...c > 0 ? [
-      {
-        label: "Trigger",
-        icon: /* @__PURE__ */ e(Pt, { color: "#3B64A0", size: 18 }),
-        command: () => {
-          n?.(r, d, "trigger");
-        },
-        template: s
-      }
-    ] : [],
+  const r = yt(), u = F(null), w = [
+    {
+      label: "Trigger",
+      icon: /* @__PURE__ */ n(Ke, { color: b.NAVY, size: 18 }),
+      command: () => {
+        e?.(
+          l,
+          c,
+          "trigger",
+          a > 0 ? "append" : "prepend"
+        );
+      },
+      template: r
+    },
     {
       label: "Step",
-      icon: /* @__PURE__ */ e(Bt, { color: "#3B64A0", size: 18 }),
-      command: () => t?.(r, d, "append"),
-      template: s
+      icon: /* @__PURE__ */ n(Xe, { color: b.NAVY, size: 18 }),
+      command: () => t?.(l, c, a > 0 ? "append" : "prepend"),
+      template: r
     },
-    ...r ? [
-      {
-        label: "Condition",
-        icon: /* @__PURE__ */ e(rt, { width: 18, height: 18 }),
-        command: () => o?.(r, d, "append"),
-        template: s
-      },
-      {
-        label: "Loop",
-        icon: /* @__PURE__ */ e(st, { width: 18, height: 18 }),
-        command: () => i?.(r, d, "append"),
-        template: s
-      }
-    ] : []
-  ], b = (_) => {
-    l.current?.show(_);
+    {
+      label: "Condition",
+      icon: /* @__PURE__ */ n(Ye, { width: 18, height: 18 }),
+      command: () => i?.(l, c, a > 0 ? "append" : "prepend"),
+      template: r
+    },
+    {
+      label: "Loop",
+      icon: /* @__PURE__ */ n(Ge, { width: 18, height: 18 }),
+      command: () => o?.(l, c, a > 0 ? "append" : "prepend"),
+      template: r
+    }
+  ], y = (N) => {
+    u.current?.show(N);
   };
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ C(
     "div",
     {
-      className: A.stepLinkContainer,
-      style: { ...a },
-      "data-plus-index": c,
+      className: W.stepLinkContainer,
+      style: { ...p, "--step-link-color": s },
+      "data-plus-index": a,
       children: [
-        /* @__PURE__ */ e("div", { className: A.stepLinkLine }),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n("div", { className: W.stepLinkLine }),
+        /* @__PURE__ */ n(
           "div",
           {
-            className: A.stepLinkIcon,
-            onClick: b,
+            className: W.stepLinkIcon,
+            onClick: y,
             "aria-haspopup": !0,
-            children: /* @__PURE__ */ e(Mt, {})
+            children: /* @__PURE__ */ n(_n, {})
           }
         ),
-        /* @__PURE__ */ e(Q, { model: f, popup: !0, ref: l }),
-        /* @__PURE__ */ e("div", { className: A.stepLinkLine })
+        /* @__PURE__ */ n(wt, { model: w, popup: !0, ref: u }),
+        /* @__PURE__ */ n("div", { className: W.stepLinkLine })
       ]
     }
   );
-}, Tt = "_steps_yug55_1", Ot = "_stepContainer_yug55_8", Ht = "_stepContainerWithPaths_yug55_14", e1 = {
-  steps: Tt,
-  stepContainer: Ot,
-  stepContainerWithPaths: Ht
-}, St = (t, n, o, i) => {
-  const r = o - t, c = Math.min(r * 0.66, 66), a = t + c, d = n, s = o - c;
-  return `M ${t} ${n} C ${a} ${d}, ${s} ${i}, ${o} ${i}`;
-}, Wt = ({
+}, Sn = "_steps_yug55_1", In = "_stepContainer_yug55_8", En = "_stepContainerWithPaths_yug55_14", rt = {
+  steps: Sn,
+  stepContainer: In,
+  stepContainerWithPaths: En
+}, Tn = (t, e, i, o) => {
+  const s = i - t, l = Math.min(s * 0.66, 66), a = t + l, p = e, c = i - l;
+  return `M ${t} ${e} C ${a} ${p}, ${c} ${o}, ${i} ${o}`;
+}, St = ({
   width: t,
-  height: n
+  height: e,
+  strokeColor: i = b.NAVY,
+  fromId: o,
+  toId: s
 }) => {
-  const a = St(0, 1, t, n);
-  return /* @__PURE__ */ e("div", { style: { position: "absolute" }, children: /* @__PURE__ */ e(
-    "svg",
+  const l = pt(i), u = Tn(0, 1, t, e);
+  return /* @__PURE__ */ n(
+    "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__ */ n(
+        "svg",
         {
-          d: a,
-          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__ */ n(
+            "path",
+            {
+              d: u,
+              stroke: i,
+              strokeWidth: l ? 3 : 2,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: l ? "0 6" : void 0,
+              "data-connector-from": void 0,
+              "data-connector-to": void 0
+            }
+          )
         }
       )
     }
-  ) });
-}, zt = "_column_1uiy3_1", Rt = "_row_1uiy3_19", jt = "_stepsContainer_1uiy3_24", F = {
-  column: zt,
-  row: Rt,
-  stepsContainer: jt
-}, Dt = "_wrapper_1nl2d_1", Zt = "_tooltip_1nl2d_5", C1 = {
-  wrapper: Dt,
-  tooltip: Zt
-}, Vt = ({
+  );
+}, Pn = "_column_1uiy3_1", kn = "_row_1uiy3_19", Rn = "_stepsContainer_1uiy3_24", V = {
+  column: Pn,
+  row: kn,
+  stepsContainer: Rn
+}, On = "_wrapper_1nl2d_1", Mn = "_tooltip_1nl2d_5", Wt = {
+  wrapper: On,
+  tooltip: Mn
+}, $n = ({
   content: t,
-  children: n,
-  maxWidth: o = 500,
-  className: i
-}) => /* @__PURE__ */ h(
+  children: e,
+  maxWidth: i = 500,
+  className: o
+}) => /* @__PURE__ */ C(
   "div",
   {
-    className: `${C1.wrapper} ${i ?? ""}`.trim(),
-    style: { "--tooltip-max-width": `${o}px` },
+    className: `${Wt.wrapper} ${o ?? ""}`.trim(),
+    style: { "--tooltip-max-width": `${i}px` },
     children: [
-      n,
-      t ? /* @__PURE__ */ e("div", { className: C1.tooltip, role: "tooltip", children: t }) : null
+      e,
+      t ? /* @__PURE__ */ n("div", { className: Wt.tooltip, role: "tooltip", children: t }) : null
     ]
   }
-), Ft = "_conditionContainer_5kl8s_1", qt = "_connectorLine_5kl8s_6", Yt = "_conditionWrapper_5kl8s_12", At = "_condition_5kl8s_1", Xt = "_connectorDot_5kl8s_43", j = {
-  conditionContainer: Ft,
-  connectorLine: qt,
-  conditionWrapper: Yt,
-  condition: At,
-  connectorDot: Xt
-}, x1 = ({
+), Dn = "_conditionContainer_19jfz_1", Bn = "_debuggerTint_19jfz_5", Fn = "_connectorLine_19jfz_5", An = "_connectorDot_19jfz_8", jn = "_condition_19jfz_1", Wn = "_conditionWrapper_19jfz_15", Hn = "_conditionFits_19jfz_67", U = {
+  conditionContainer: Dn,
+  debuggerTint: Bn,
+  connectorLine: Fn,
+  connectorDot: An,
+  condition: jn,
+  conditionWrapper: Wn,
+  conditionFits: Hn
+}, Nt = ({
   expression: t,
-  style: n
+  style: e,
+  status: i,
+  debuggerMode: o = !1
 }) => {
-  const o = $(null), [i, r] = E(!1);
-  L1(() => {
-    const a = o.current;
-    a && r(a.scrollHeight > a.clientHeight);
+  const s = F(null), l = F(null), [a, p] = D(!1);
+  fe(() => {
+    const _ = s.current, g = l.current;
+    if (!_ || !g) return;
+    const { paddingLeft: f, paddingRight: h } = getComputedStyle(_), S = Number.parseFloat(f) + Number.parseFloat(h);
+    p(g.offsetWidth >= _.clientWidth - S);
   }, [t]);
-  const c = t && i ? t : "";
-  return /* @__PURE__ */ h("div", { className: j.conditionContainer, style: n, children: [
-    /* @__PURE__ */ e("div", { className: j.connectorLine }),
-    /* @__PURE__ */ e(Vt, { content: c, className: j.conditionWrapper, children: /* @__PURE__ */ e("div", { ref: o, className: j.condition, children: t }) }),
-    /* @__PURE__ */ e("div", { className: j.connectorLine }),
-    /* @__PURE__ */ e("div", { className: j.connectorDot })
-  ] });
-}, Gt = "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", Kt = "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", Jt = "_ifStatement_1xsn9_1", Qt = "_conditionIcon_1xsn9_7", Ut = "_ifStatementContainer_1xsn9_21", te = "_menuButton_1xsn9_27", ee = "_menuIcon_1xsn9_52", ne = "_ifdotIcon_1xsn9_59", R = {
-  ifStatement: Jt,
-  conditionIcon: Qt,
-  ifStatementContainer: Ut,
-  menuButton: te,
-  menuIcon: ee,
-  ifdotIcon: ne
-}, oe = ({ style: t }) => /* @__PURE__ */ e(
+  const c = t && a ? t : "", r = o && i === "finished", u = r, w = R(() => {
+    if (r)
+      return {
+        "--condition-accent": bt.finished,
+        "--condition-bg": ze.finished,
+        "--condition-line-width": "3px",
+        "--condition-line-style": "dotted"
+      };
+  }, [r]), y = `${U.condition} ${a ? "" : U.conditionFits}`.trim(), N = `${U.conditionContainer} ${u ? U.debuggerTint : ""}`.trim();
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: N,
+      style: { ...e, ...w },
+      children: [
+        /* @__PURE__ */ n("div", { className: U.connectorLine }),
+        /* @__PURE__ */ n($n, { content: c, className: U.conditionWrapper, children: /* @__PURE__ */ n("div", { ref: s, className: y, children: /* @__PURE__ */ n("span", { ref: l, children: t }) }) }),
+        /* @__PURE__ */ n("div", { className: U.connectorLine }),
+        /* @__PURE__ */ n("div", { className: U.connectorDot })
+      ]
+    }
+  );
+}, Vn = "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", zn = "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", Yn = "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", Gn = "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", Zn = "_ifStatement_xtij3_1", Un = "_conditionIcon_xtij3_7", Xn = "_ifStatementContainer_xtij3_21", Kn = "_menuButton_xtij3_27", qn = "_menuIcon_xtij3_52", Jn = "_ifdotIcon_xtij3_59", K = {
+  ifStatement: Zn,
+  conditionIcon: Un,
+  ifStatementContainer: Xn,
+  menuButton: Kn,
+  menuIcon: qn,
+  ifdotIcon: Jn
+}, Qn = ({
+  style: t,
+  color: e = b.NAVY
+}) => /* @__PURE__ */ n(
   "div",
   {
     style: {
       width: "100%",
       height: "2px",
-      borderTop: "2px solid #3B64A0",
+      borderTop: Q(e),
       ...t
     }
   }
-), ie = ({
-  onEdit: t,
-  onDelete: n,
-  onSelect: o
-}) => {
-  const i = $(null), { openMenu: r, closeMenu: c } = r1(), a = S(
+), te = (t) => {
+  const {
+    enabled: e = !0,
+    onDelete: i,
+    onSelect: o,
+    debuggerMode: s = !1,
+    status: l
+  } = t, a = F(null), { openMenu: p, closeMenu: c } = Tt(), r = e && !s, u = s && l === "finished", w = u ? Jt("finished", !0) : b.NAVY, y = u ? Yn : Vn, N = u ? Gn : zn, _ = R(
     () => [
       {
         label: "Edit",
-        icon: /* @__PURE__ */ e(v1, { color: "#3B64A0", size: 18 }),
-        command: () => t?.()
+        icon: /* @__PURE__ */ n(Xt, { color: b.NAVY, size: 18 }),
+        command: () => o?.()
       },
       {
         label: "Delete",
-        icon: /* @__PURE__ */ e(J, { color: "#3B64A0", size: 18 }),
-        command: () => n?.()
+        icon: /* @__PURE__ */ n(xt, { color: b.NAVY, size: 18 }),
+        command: () => i?.()
       }
     ],
-    [t, n]
-  ), d = (l) => {
-    l.stopPropagation(), r(i, l);
-  }, s = (l) => {
-    l.target.closest(`.${R.menuButton}`) || o?.();
+    [o, i]
+  ), g = (h) => {
+    h.stopPropagation(), p(a, h);
+  }, f = (h) => {
+    h.target.closest(`.${K.menuButton}`) || o?.();
   };
-  return /* @__PURE__ */ h("div", { className: R.ifStatementContainer, children: [
-    /* @__PURE__ */ e(
-      oe,
+  return /* @__PURE__ */ C("div", { className: K.ifStatementContainer, children: [
+    /* @__PURE__ */ n(
+      Qn,
       {
+        color: w,
         style: { position: "absolute", top: "22.5px", left: 0, zIndex: 1 }
       }
     ),
-    /* @__PURE__ */ e("div", { className: R.ifStatement, children: /* @__PURE__ */ e(
+    /* @__PURE__ */ n("div", { className: K.ifStatement, children: /* @__PURE__ */ n(
       "img",
       {
-        src: Gt,
+        src: y,
         alt: "condition",
-        onClick: (l) => s(l),
-        className: R.conditionIcon
+        onClick: (h) => f(h),
+        className: K.conditionIcon
       }
     ) }),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: R.menuButton,
-        onClick: d,
-        "aria-label": "Open menu",
-        "aria-haspopup": "menu",
-        children: /* @__PURE__ */ e(K, { className: R.menuIcon })
-      }
-    ),
-    /* @__PURE__ */ e(
-      Q,
-      {
-        ref: i,
-        model: a,
-        popup: !0,
-        onHide: () => c(i)
-      }
-    ),
-    /* @__PURE__ */ e("img", { src: Kt, alt: "ifdot", className: R.ifdotIcon })
+    r && /* @__PURE__ */ C(tt, { children: [
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          className: K.menuButton,
+          onClick: g,
+          "aria-label": "Open menu",
+          "aria-haspopup": "menu",
+          children: /* @__PURE__ */ n(mt, { className: K.menuIcon, size: 16 })
+        }
+      ),
+      /* @__PURE__ */ n(
+        wt,
+        {
+          ref: a,
+          model: _,
+          popup: !0,
+          onHide: () => c(a)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("img", { src: N, alt: "ifdot", className: K.ifdotIcon })
   ] });
-}, re = 34.5, w1 = ({
-  items: t,
-  pathId: n,
-  onAddStep: o,
-  onAddTrigger: i,
-  onAddCondition: r,
-  onAddLoop: c,
-  onDeleteStep: a,
-  onUpdateFilter: d,
-  onSelectStep: s,
-  onResize: l
-}) => {
-  const f = $(null), b = $([]), [_, x] = E([]);
-  q(() => {
-    const p = () => {
-      if (!f.current || t.length === 0) {
-        x([]);
+}, Ht = 34.5, t1 = 33, at = b.NAVY, ee = (t) => {
+  const {
+    items: e,
+    pathId: i,
+    onAddStep: o,
+    onAddTrigger: s,
+    onAddCondition: l,
+    onAddLoop: a,
+    onDeleteStep: p,
+    onUpdateFilter: c,
+    onSelectStep: r,
+    onResize: u,
+    onCheckScenario: w
+  } = t, y = F(null), N = F([]), [_, g] = D([]);
+  st(() => {
+    const h = () => {
+      const L = y.current;
+      if (!L || 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 + re);
-        }
+      const d = [], x = Number.parseFloat(
+        getComputedStyle(L).zoom || "1"
+      );
+      for (let E = 0; E < e.length; E++) {
+        const T = N.current[E];
+        if (T)
+          if (T.offsetParent == null) {
+            const O = L.getBoundingClientRect(), j = T.getBoundingClientRect();
+            d.push((j.top - O.top) / x + Ht);
+          } else
+            d.push(T.offsetTop - t1 + Ht);
       }
-      w.length === t.length && x(w);
+      d.length === e.length && g(d);
     };
-    return p(), window.addEventListener("resize", p), () => window.removeEventListener("resize", p);
-  }, [t]);
-  const C = S(() => _.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(Wt, { width: 100, height: I }, p);
-  }), [t, _]);
-  return /* @__PURE__ */ h("div", { className: F.row, children: [
-    /* @__PURE__ */ e(
-      ie,
+    h();
+    const S = new ResizeObserver(h), m = y.current;
+    return m && S.observe(m), window.addEventListener("resize", h), () => {
+      S.disconnect(), window.removeEventListener("resize", h);
+    };
+  }, [e]);
+  const f = R(() => _.length !== e.length || e.length <= 1 ? null : e.map((h, S) => S).filter((h) => h > 0).map((h) => {
+    const S = _[h];
+    return S === void 0 ? null : /* @__PURE__ */ n(St, { width: 100, height: S, strokeColor: at }, h);
+  }), [e, _]);
+  return /* @__PURE__ */ C("div", { className: V.row, children: [
+    /* @__PURE__ */ n(
+      te,
       {
-        onDelete: () => n != null && a?.(n),
-        onSelect: n != null && s ? () => s(n) : void 0
+        onDelete: () => i != null && p?.(i),
+        onSelect: i != null && r ? () => r(i) : void 0
       }
     ),
-    /* @__PURE__ */ h(
+    /* @__PURE__ */ C(
       "div",
       {
-        ref: f,
-        className: F.column,
+        ref: y,
+        className: V.column,
         style: { marginTop: "33px" },
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ n(
             "div",
             {
               style: {
@@ -1008,91 +1178,96 @@ const Mt = () => /* @__PURE__ */ h(
                 left: 0,
                 width: "100px",
                 height: "2px",
-                borderTop: "2px solid #3B64A0"
+                borderTop: `2px solid ${at}`
               }
             }
           ),
-          C
+          f
         ]
       }
     ),
-    /* @__PURE__ */ e("div", { className: F.column, children: t.map((p, I) => {
-      let w;
-      if (p.paths)
-        w = /* @__PURE__ */ e(
-          w1,
+    /* @__PURE__ */ n("div", { className: V.column, children: e.map((h, S) => {
+      let m;
+      if (h.paths)
+        m = /* @__PURE__ */ n(
+          ee,
           {
-            items: p.paths,
-            pathId: n,
+            items: h.paths,
+            pathId: i,
             onAddStep: o,
-            onAddTrigger: i,
-            onAddCondition: r,
-            onAddLoop: c,
-            onDeleteStep: a,
-            onUpdateFilter: d,
-            onSelectStep: s,
-            onResize: l
+            onAddTrigger: s,
+            onAddCondition: l,
+            onAddLoop: a,
+            onDeleteStep: p,
+            onUpdateFilter: c,
+            onSelectStep: r,
+            onResize: u,
+            onCheckScenario: w
           },
-          p.localId
+          h.id
         );
-      else if (p.steps) {
-        const v = p;
-        w = /* @__PURE__ */ h("div", { className: F.stepsContainer, children: [
-          /* @__PURE__ */ e(
-            x1,
+      else if (h.steps) {
+        const L = h;
+        m = /* @__PURE__ */ C("div", { className: V.stepsContainer, children: [
+          /* @__PURE__ */ n(
+            Nt,
             {
-              expression: v.condition,
+              expression: L.condition,
+              status: L.status,
               style: { marginTop: "25px" }
             }
           ),
-          /* @__PURE__ */ e(
-            l1,
+          /* @__PURE__ */ n(
+            Pt,
             {
-              steps: p.steps,
-              pathId: p.localId,
-              onSelectStep: s ?? (() => {
+              steps: h.steps,
+              pathId: h.id,
+              onSelectStep: r ?? (() => {
               }),
               onAddStep: o ?? (() => {
               }),
-              onAddTrigger: i,
-              onAddCondition: r ?? (() => {
+              onAddTrigger: s,
+              onAddCondition: l ?? (() => {
               }),
-              onAddLoop: c,
-              onDeleteStep: a,
-              onUpdateFilter: d,
-              onResize: l
+              onAddLoop: a,
+              onDeleteStep: p,
+              onUpdateFilter: c,
+              onResize: u,
+              onCheckScenario: w
             },
-            p.localId
+            h.id
           )
         ] });
       } else
-        w = /* @__PURE__ */ e(
-          s1,
+        m = /* @__PURE__ */ n(
+          ht,
           {
-            localId: p.localId,
-            title: "title" in p ? p.title : "",
+            id: h.id,
+            title: "title" in h ? h.title : "",
             idx: 1,
-            icon: "icon" in p ? p.icon : void 0,
-            onSelectStep: s,
-            onDeleteStep: a,
-            onUpdateFilter: d
+            icon: "icon" in h ? h.icon : void 0,
+            status: "status" in h ? h.status : void 0,
+            onSelectStep: r,
+            onDeleteStep: p,
+            onUpdateFilter: c,
+            onCheckScenario: w
           },
-          p.localId
+          h.id
         );
-      return /* @__PURE__ */ e(
+      return /* @__PURE__ */ n(
         "div",
         {
-          ref: (v) => {
-            b.current[I] = v;
+          ref: (L) => {
+            N.current[S] = L;
           },
           style: { width: "100%" },
-          children: w
+          children: m
         },
-        p.localId
+        h.id
       );
     }) }),
-    /* @__PURE__ */ h("div", { className: F.column, style: { marginTop: "33px" }, children: [
-      /* @__PURE__ */ e(
+    /* @__PURE__ */ C("div", { className: V.column, style: { marginTop: "33px" }, children: [
+      /* @__PURE__ */ n(
         "div",
         {
           style: {
@@ -1102,21 +1277,22 @@ const Mt = () => /* @__PURE__ */ h(
             flex: 1,
             width: "100%",
             height: "2px",
-            borderTop: "2px solid #3B64A0"
+            borderTop: `2px solid ${at}`
           }
         }
       ),
-      C
+      f
     ] }),
-    /* @__PURE__ */ e(
-      Z,
+    /* @__PURE__ */ n(
+      it,
       {
         onAddStep: o,
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
-        stepId: n,
-        pathId: n,
+        onAddTrigger: s,
+        onAddCondition: l,
+        onAddLoop: a,
+        lineColor: at,
+        stepId: i,
+        pathId: i,
         index: 1,
         style: {
           marginTop: "34px",
@@ -1124,36 +1300,37 @@ const Mt = () => /* @__PURE__ */ h(
         }
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ n(
       "div",
       {
         style: {
           flex: 1,
           width: "100%",
           height: "2px",
-          borderTop: "2px solid #3B64A0",
+          borderTop: `2px solid ${at}`,
           marginTop: "34px"
         }
       }
     )
   ] });
-}, o1 = 68, l1 = ({
+}, It = 68, q = b.NAVY, Pt = ({
   pathId: t,
-  steps: n,
-  centerY: o,
-  className: i,
-  onAddStep: r,
-  onDeleteStep: c,
+  steps: e,
+  centerY: i,
+  className: o,
+  onAddStep: s,
+  onDeleteStep: l,
   onUpdateFilter: a,
-  onAddTrigger: d,
-  onAddCondition: s,
-  onAddLoop: l,
-  onSelectStep: f,
-  onResize: b,
-  isDescendent: _ = !0
+  onAddTrigger: p,
+  onAddCondition: c,
+  onAddLoop: r,
+  onSelectStep: u,
+  onResize: w,
+  onCheckScenario: y,
+  isDescendent: N = !0
 }) => {
-  const x = o === void 0 ? void 0 : { marginTop: Math.max(0, o - o1 / 2) };
-  return n.length === 0 ? /* @__PURE__ */ h(
+  const _ = i === void 0 ? void 0 : { marginTop: Math.max(0, i - It / 2) };
+  return e.length === 0 ? /* @__PURE__ */ C(
     "div",
     {
       style: {
@@ -1163,10 +1340,10 @@ const Mt = () => /* @__PURE__ */ h(
         flexDirection: "row",
         flex: 1,
         minWidth: 0,
-        ...x
+        ..._
       },
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n(
           "div",
           {
             style: {
@@ -1176,27 +1353,29 @@ const Mt = () => /* @__PURE__ */ h(
               minWidth: 0,
               height: "2px",
               marginTop: "13.5px",
-              borderTop: "2px solid #3B64A0"
+              borderTop: `2px solid ${q}`
             }
           }
         ),
-        /* @__PURE__ */ e(
-          Z,
+        /* @__PURE__ */ n(
+          it,
           {
             onAddStep: () => {
-              r?.(void 0, t);
+              s?.(void 0, t);
             },
-            onAddTrigger: d,
-            onAddCondition: s,
-            onAddLoop: l,
+            onAddTrigger: p,
+            onAddCondition: c,
+            onAddLoop: r,
+            lineColor: q,
             stepId: t,
             index: 0,
             style: {
-              height: "auto"
+              height: "auto",
+              marginTop: "0"
             }
           }
         ),
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ n(
           "div",
           {
             style: {
@@ -1206,18 +1385,18 @@ const Mt = () => /* @__PURE__ */ h(
               minWidth: 0,
               height: "2px",
               marginTop: "13.5px",
-              borderTop: "2px solid #3B64A0"
+              borderTop: `2px solid ${q}`
             }
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ e(
+  ) : /* @__PURE__ */ n(
     "div",
     {
-      className: e1.steps + (i ? " " + i : ""),
-      style: x,
-      children: /* @__PURE__ */ h(
+      className: rt.steps + (o ? " " + o : ""),
+      style: _,
+      children: /* @__PURE__ */ C(
         "div",
         {
           style: {
@@ -1229,16 +1408,17 @@ const Mt = () => /* @__PURE__ */ h(
             alignItems: "flex-start"
           },
           children: [
-            /* @__PURE__ */ e(
-              Z,
+            /* @__PURE__ */ n(
+              it,
               {
                 onAddStep: () => {
-                  r?.(n[0].localId, t, "prepend");
+                  s?.(e[0].id, t, "prepend");
                 },
-                onAddTrigger: d,
-                onAddCondition: s,
-                onAddLoop: l,
-                stepId: n[0].localId,
+                onAddTrigger: p,
+                onAddCondition: c,
+                onAddLoop: r,
+                lineColor: q,
+                stepId: e[0].id,
                 pathId: t,
                 index: 0,
                 style: {
@@ -1246,98 +1426,104 @@ 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, f) => {
+              const h = !!g.paths, S = "condition" in g && typeof g.condition == "string";
+              let m;
+              return h && g.paths ? m = /* @__PURE__ */ n(
+                ee,
                 {
-                  items: C.paths,
-                  pathId: C.localId,
-                  onAddStep: r,
-                  onAddCondition: s,
-                  onAddLoop: l,
-                  onDeleteStep: c,
-                  onAddTrigger: d,
-                  onSelectStep: f,
+                  items: g.paths,
+                  pathId: g.id,
+                  onAddStep: s,
+                  onAddCondition: c,
+                  onAddLoop: r,
+                  onDeleteStep: l,
+                  onAddTrigger: p,
+                  onSelectStep: u,
                   onUpdateFilter: a,
-                  onResize: b
+                  onResize: w,
+                  onCheckScenario: y
                 },
-                C.title
-              ) : w ? v = /* @__PURE__ */ h(n1, { children: [
-                /* @__PURE__ */ e(
-                  ye,
+                g.title
+              ) : S ? m = /* @__PURE__ */ C(tt, { children: [
+                /* @__PURE__ */ n(
+                  C1,
                   {
-                    value: C,
-                    onAddStep: r,
-                    onAddTrigger: d,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    onDeleteStep: c,
+                    value: g,
+                    onAddStep: s,
+                    onAddTrigger: p,
+                    onAddCondition: c,
+                    onAddLoop: r,
+                    onDeleteStep: l,
                     onUpdateFilter: a,
-                    onSelectStep: f,
-                    onResize: b
+                    onSelectStep: u,
+                    onResize: w,
+                    onCheckScenario: y
                   },
-                  C.localId
+                  g.id
                 ),
-                /* @__PURE__ */ e(
-                  Z,
+                /* @__PURE__ */ n(
+                  it,
                   {
-                    onAddStep: r,
-                    onAddTrigger: d,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    stepId: C.localId,
+                    onAddStep: s,
+                    onAddTrigger: p,
+                    onAddCondition: c,
+                    onAddLoop: r,
+                    lineColor: q,
+                    stepId: g.id,
                     pathId: t,
-                    index: p + 1,
+                    index: f + 1,
                     style: { marginTop: "34px", height: 0 }
                   }
                 )
-              ] }) : v = /* @__PURE__ */ h(n1, { children: [
-                /* @__PURE__ */ e(
-                  s1,
+              ] }) : m = /* @__PURE__ */ C(tt, { children: [
+                /* @__PURE__ */ n(
+                  ht,
                   {
-                    localId: C.localId,
-                    title: C.title,
+                    id: g.id,
+                    title: g.title,
                     idx: 1,
-                    icon: C.icon,
-                    isSet: C.isSet,
-                    isInvalid: C.isInvalid,
-                    isFilter: C.isFilter,
-                    onSelectStep: f,
-                    onDeleteStep: c,
-                    onUpdateFilter: a
+                    icon: g.icon,
+                    isSet: g.isSet,
+                    isInvalid: g.isInvalid,
+                    isFilter: g.isFilter,
+                    status: g.status,
+                    onSelectStep: u,
+                    onDeleteStep: l,
+                    onUpdateFilter: a,
+                    onCheckScenario: y
                   },
-                  C.title
+                  g.title
                 ),
-                /* @__PURE__ */ e(
-                  Z,
+                /* @__PURE__ */ n(
+                  it,
                   {
-                    onAddStep: r,
-                    onAddTrigger: d,
-                    onAddCondition: s,
-                    onAddLoop: l,
-                    stepId: C.localId,
+                    onAddStep: s,
+                    onAddTrigger: p,
+                    onAddCondition: c,
+                    onAddLoop: r,
+                    lineColor: q,
+                    stepId: g.id,
                     pathId: t,
-                    index: p + 1
+                    index: f + 1
                   }
                 )
-              ] }), /* @__PURE__ */ e(
+              ] }), /* @__PURE__ */ n(
                 "div",
                 {
-                  className: e1.stepContainer + (I || w ? " " + e1.stepContainerWithPaths : ""),
-                  children: v
+                  className: rt.stepContainer + (h || S ? " " + rt.stepContainerWithPaths : ""),
+                  children: m
                 },
-                C.localId
+                g.id
               );
             }),
-            _ && /* @__PURE__ */ e(
+            N && /* @__PURE__ */ n(
               "div",
               {
                 style: {
                   flexGrow: 1,
                   minWidth: 0,
-                  borderTop: "2px solid #3B64A0",
+                  borderTop: `2px solid ${q}`,
                   marginTop: "33.5px"
                 }
               }
@@ -1347,7 +1533,7 @@ const Mt = () => /* @__PURE__ */ h(
       )
     }
   );
-}, se = () => /* @__PURE__ */ h(
+}, ne = () => /* @__PURE__ */ C(
   "svg",
   {
     width: "24",
@@ -1356,14 +1542,14 @@ const Mt = () => /* @__PURE__ */ h(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ n(
         "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__ */ n(
         "path",
         {
           fillRule: "evenodd",
@@ -1374,246 +1560,1082 @@ const Mt = () => /* @__PURE__ */ h(
       )
     ]
   }
-), le = "_container_131qr_1", ce = "_collapsed_131qr_16", ae = "_loopNodeWrapper_131qr_21", de = "_loopIconWrapper_131qr_31", pe = "_loopBox_131qr_40", ue = "_dotsButton_131qr_57", he = "_label_131qr_77", Ce = "_limit_131qr_84", me = "_expandable_131qr_90", fe = "_expandableCollapsed_131qr_100", ge = "_connector_131qr_107", ve = "_line_131qr_115", _e = "_circleDot_131qr_123", xe = "_innerDot_131qr_138", we = "_stepsWrapper_131qr_145", B = {
-  container: le,
-  collapsed: ce,
-  loopNodeWrapper: ae,
-  loopIconWrapper: de,
-  loopBox: pe,
-  dotsButton: ue,
-  label: he,
-  limit: Ce,
-  expandable: me,
-  expandableCollapsed: fe,
-  connector: ge,
-  line: ve,
-  circleDot: _e,
-  innerDot: xe,
-  stepsWrapper: we
-}, ye = ({
+), e1 = "_container_18jhr_1", n1 = "_collapsed_18jhr_16", i1 = "_loopNodeWrapper_18jhr_21", o1 = "_loopIconWrapper_18jhr_31", s1 = "_loopBox_18jhr_40", r1 = "_dotsButton_18jhr_57", l1 = "_label_18jhr_77", c1 = "_limit_18jhr_84", a1 = "_expandable_18jhr_90", d1 = "_expandableCollapsed_18jhr_98", u1 = "_connector_18jhr_105", p1 = "_line_18jhr_113", h1 = "_circleDot_18jhr_121", f1 = "_innerDot_18jhr_136", g1 = "_stepsWrapper_18jhr_143", I = {
+  container: e1,
+  collapsed: n1,
+  loopNodeWrapper: i1,
+  loopIconWrapper: o1,
+  loopBox: s1,
+  dotsButton: r1,
+  label: l1,
+  limit: c1,
+  expandable: a1,
+  expandableCollapsed: d1,
+  connector: u1,
+  line: p1,
+  circleDot: h1,
+  innerDot: f1,
+  stepsWrapper: g1
+}, C1 = ({
   value: t,
-  onAddStep: n,
-  onAddTrigger: o,
-  onAddCondition: i,
-  onAddLoop: r,
-  onDeleteStep: c,
+  onAddStep: e,
+  onAddTrigger: i,
+  onAddCondition: o,
+  onAddLoop: s,
+  onDeleteStep: l,
   onUpdateFilter: a,
-  onSelectStep: d,
-  onResize: s
+  onSelectStep: p,
+  onResize: c,
+  onCheckScenario: r
 }) => {
-  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 = S(
+  const { id: u, limit: w, steps: y, condition: N } = t, _ = y ?? [], g = () => {
+  }, [f, h] = D(!1), S = F(null), { openMenu: m, closeMenu: L } = Tt(), d = yt(), x = R(
     () => [
       {
         label: "Edit",
-        icon: /* @__PURE__ */ e(v1, { color: "#3B64A0", size: 18 }),
-        command: (k) => {
-          k?.originalEvent?.stopPropagation(), d?.(l);
+        icon: /* @__PURE__ */ n(Xt, { color: b.NAVY, size: 18 }),
+        command: (M) => {
+          M?.originalEvent?.stopPropagation(), p?.(u);
         },
-        template: y
+        template: d
       },
       {
         label: "Remove",
-        icon: /* @__PURE__ */ e(J, { color: "#3B64A0", size: 18 }),
-        command: (k) => {
-          k?.originalEvent?.stopPropagation(), c && c(l);
+        icon: /* @__PURE__ */ n(xt, { color: b.NAVY, size: 18 }),
+        command: (M) => {
+          M?.originalEvent?.stopPropagation(), l && l(u);
         },
-        template: y
+        template: d
       }
     ],
-    [d, 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(se, {}) }),
-        /* @__PURE__ */ e("button", { className: B.dotsButton, onClick: u, children: /* @__PURE__ */ e(K, { size: 16 }) }),
-        /* @__PURE__ */ e(
-          Q,
+    [p, l, u, d]
+  ), E = (M) => {
+    M.stopPropagation(), m(S, M);
+  }, T = () => {
+    h((M) => !M), c?.();
+  }, O = I.container + (f ? "" : " " + I.collapsed), j = I.expandable + (f ? "" : " " + I.expandableCollapsed);
+  return /* @__PURE__ */ C("div", { className: O, children: [
+    /* @__PURE__ */ C("div", { className: I.loopNodeWrapper, children: [
+      /* @__PURE__ */ C("div", { className: I.loopBox, children: [
+        /* @__PURE__ */ n("div", { onClick: T, className: I.loopIconWrapper, children: /* @__PURE__ */ n(ne, {}) }),
+        /* @__PURE__ */ n(
+          "button",
           {
-            model: L,
+            type: "button",
+            className: I.dotsButton,
+            onClick: E,
+            "aria-label": "Open loop menu",
+            "aria-haspopup": "menu",
+            children: /* @__PURE__ */ n(mt, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ n(
+          wt,
+          {
+            model: x,
             popup: !0,
-            ref: w,
-            onHide: () => m(w)
+            ref: S,
+            onHide: () => L(S)
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: B.label, children: "Loop" }),
-      f != null && /* @__PURE__ */ h("div", { className: B.limit, children: [
-        f,
+      /* @__PURE__ */ n("div", { className: I.label, children: "Loop" }),
+      w != null && /* @__PURE__ */ C("div", { className: I.limit, children: [
+        w,
         "x"
       ] })
     ] }),
-    /* @__PURE__ */ h("div", { className: T, children: [
-      /* @__PURE__ */ h("div", { className: B.connector, children: [
-        /* @__PURE__ */ e("div", { className: B.line, style: { width: "12px" } }),
-        /* @__PURE__ */ e("div", { className: B.circleDot, children: /* @__PURE__ */ e("div", { className: B.innerDot }) }),
-        /* @__PURE__ */ e("div", { className: B.line })
+    /* @__PURE__ */ C("div", { className: j, children: [
+      /* @__PURE__ */ C("div", { className: I.connector, children: [
+        /* @__PURE__ */ n("div", { className: I.line }),
+        /* @__PURE__ */ n("div", { className: I.circleDot, children: /* @__PURE__ */ n("div", { className: I.innerDot }) }),
+        /* @__PURE__ */ n("div", { className: I.line })
       ] }),
-      /* @__PURE__ */ e(x1, { expression: _ ?? "", style: { marginTop: "25.5px" } }),
-      /* @__PURE__ */ e("div", { className: B.stepsWrapper, children: /* @__PURE__ */ e(
-        l1,
+      /* @__PURE__ */ n(
+        Nt,
+        {
+          expression: N ?? "",
+          status: t.status,
+          style: { marginTop: "25.5px" }
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: I.stepsWrapper, children: /* @__PURE__ */ n(
+        Pt,
         {
-          steps: x,
-          pathId: l,
-          onAddStep: n ?? C,
-          onAddTrigger: o,
-          onAddCondition: i ?? C,
-          onAddLoop: r,
-          onDeleteStep: c,
-          onUpdateFilter: a ?? C,
-          onSelectStep: d ?? C,
+          steps: _,
+          pathId: u,
+          onAddStep: e ?? g,
+          onAddTrigger: i,
+          onAddCondition: o ?? g,
+          onAddLoop: s,
+          onDeleteStep: l,
+          onUpdateFilter: a ?? g,
+          onSelectStep: p ?? g,
+          onCheckScenario: r ?? g,
           isDescendent: !0
         }
       ) })
     ] })
   ] });
-}, Ie = "_container_kielx_1", be = {
-  container: Ie
-}, Ee = ({
+}, m1 = "_container_kielx_1", ie = {
+  container: m1
+}, P1 = ({
   process: t,
-  addMultipleTriggers: n,
-  onAddStep: o,
-  onAddTrigger: i,
-  onAddCondition: r,
-  onAddLoop: c,
+  addMultipleTriggers: e,
+  onAddStep: i,
+  onAddTrigger: o,
+  onAddCondition: s,
+  onAddLoop: l,
   onResize: a,
-  onDeleteTrigger: d,
-  onDeleteStep: s,
-  onUpdateFilter: l,
-  onSelectStep: f
+  onDeleteTrigger: p,
+  onDeleteStep: c,
+  onUpdateFilter: r,
+  onSelectStep: u,
+  onCheckScenario: w
 }) => {
-  const [b, _] = E(0);
-  return /* @__PURE__ */ h("div", { className: be.container, children: [
-    /* @__PURE__ */ e(
-      kt,
+  const [y, N] = D(0);
+  return /* @__PURE__ */ C("div", { className: ie.container, children: [
+    /* @__PURE__ */ n(
+      Qt,
       {
         steps: t.triggers,
-        onAddTrigger: n,
-        onUpdateFilter: l,
-        onDeleteTrigger: d,
-        onSelectStep: f,
-        onCenterYUpdate: _
+        onAddTrigger: e,
+        onUpdateFilter: r,
+        onDeleteTrigger: p,
+        onSelectStep: u,
+        onCenterYUpdate: N,
+        isEditable: !0
       }
     ),
-    t.steps.length > 0 ? /* @__PURE__ */ e(
-      l1,
+    t.steps.length > 0 ? /* @__PURE__ */ n(
+      Pt,
       {
         steps: t.steps,
-        centerY: b,
-        onAddStep: o,
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
+        centerY: y,
+        onAddStep: i,
+        onAddTrigger: o,
+        onAddCondition: s,
+        onAddLoop: l,
         onResize: a,
-        onDeleteStep: s,
-        onUpdateFilter: l,
-        onSelectStep: f,
+        onDeleteStep: c,
+        onUpdateFilter: r,
+        onSelectStep: u,
         isDescendent: !1,
-        pathId: void 0
+        pathId: void 0,
+        onCheckScenario: w
       }
-    ) : /* @__PURE__ */ e(
-      Z,
+    ) : /* @__PURE__ */ n(
+      it,
       {
-        onAddStep: () => o(),
-        onAddTrigger: i,
-        onAddCondition: r,
-        onAddLoop: c,
+        onAddStep: () => i(),
+        onAddTrigger: o,
+        onAddCondition: s,
+        onAddLoop: l,
         index: 0,
         style: {
-          height: o1,
-          marginTop: Math.max(0, b - o1 / 2)
+          height: It,
+          marginTop: Math.max(0, y - It / 2)
         }
       }
     )
   ] });
+}, kt = (t, e, i) => {
+  if (e === i) return !1;
+  const o = (r) => {
+    if ("paths" in r && r.paths && r.paths.length > 0) {
+      const u = r.paths[r.paths.length - 1];
+      if (u.steps && u.steps.length > 0) {
+        const w = u.steps[u.steps.length - 1];
+        return o(w);
+      }
+      return u.id;
+    }
+    return "steps" in r && r.steps && r.steps.length > 0 ? o(
+      r.steps[r.steps.length - 1]
+    ) : r.id;
+  }, s = (r) => r.steps && r.steps.length > 0 ? o(
+    r.steps[r.steps.length - 1]
+  ) : r.paths && r.paths.length > 0 ? s(r.paths[r.paths.length - 1]) : r.id, l = (r, u) => "paths" in r && r.paths && r.paths.length > 0 ? r.paths.some((y) => s(y) === u) : o(r) === u, a = (r) => {
+    for (let u = 0; u < r.length - 1; u++) {
+      const w = r[u], y = r[u + 1];
+      if (w.id === e && y.id === i || l(w, e) && y.id === i)
+        return !0;
+    }
+    for (const u of r) {
+      if (u.id === e && u.steps?.[0]?.id === i)
+        return !0;
+      if ("paths" in u && u.paths) {
+        for (const w of u.paths)
+          if (p(w)) return !0;
+      }
+      if ("steps" in u && u.steps && a(u.steps))
+        return !0;
+    }
+    return !1;
+  }, p = (r) => {
+    if (r.id === e && r.steps?.[0]?.id === i || r.steps && r.steps.length > 0 && a(r.steps))
+      return !0;
+    if (r.paths) {
+      for (const u of r.paths)
+        if (p(u)) return !0;
+    }
+    return !1;
+  }, c = t.steps;
+  return c?.[0] && c[0].id === e && c[0].steps?.[0]?.id === i ? !0 : a(c);
+}, oe = (t, e) => {
+  if (t.id === e) return t.status;
+  if (t.steps)
+    for (const i of t.steps) {
+      const o = Rt(i, e);
+      if (o !== void 0) return o;
+    }
+  if (t.paths)
+    for (const i of t.paths) {
+      const o = oe(i, e);
+      if (o !== void 0) return o;
+    }
+}, Rt = (t, e) => {
+  if (t.id === e) return t.status;
+  if (t.paths)
+    for (const i of t.paths) {
+      const o = oe(i, e);
+      if (o !== void 0) return o;
+    }
+  if (t.steps)
+    for (const i of t.steps) {
+      const o = Rt(i, e);
+      if (o !== void 0) return o;
+    }
+}, G = (t, e) => {
+  for (const i of t.triggers)
+    if (i.id === e) return i.status;
+  for (const i of t.steps) {
+    const o = Rt(i, e);
+    if (o !== void 0) return o;
+  }
+}, v1 = (t, e) => {
+  const i = (s) => {
+    if (s.id === e) return !0;
+    if (s.steps) {
+      for (const l of s.steps)
+        if (o(l)) return !0;
+    }
+    if (s.paths) {
+      for (const l of s.paths)
+        if (i(l)) return !0;
+    }
+    return !1;
+  }, o = (s) => {
+    if (s.paths) {
+      for (const l of s.paths)
+        if (i(l)) return !0;
+    }
+    if (s.steps) {
+      for (const l of s.steps)
+        if (o(l)) return !0;
+    }
+    return !1;
+  };
+  for (const s of t.triggers)
+    if (o(s)) return !0;
+  for (const s of t.steps)
+    if (o(s)) return !0;
+  return !1;
+}, vt = (t, e, i) => {
+  if (e === i) return !1;
+  const o = G(t, e), s = G(t, i);
+  return o !== "finished" || s !== "finished" ? !1 : kt(t, e, i);
+}, Ot = (t, e, i) => e === i || !v1(t, e) || G(t, i) !== "finished" ? !1 : kt(t, e, i), ot = ({
+  lineColor: t,
+  style: e,
+  fromId: i,
+  toId: o
+}) => {
+  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__ */ n("div", { className: l }),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `${W.stepLinkIcon} ${W.debuggerIconCollapsed}`,
+            "aria-hidden": !0
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: l })
+      ]
+    }
+  );
+}, Mt = (t) => t.steps && t.steps.length > 0 ? ut(t.steps[t.steps.length - 1]) : t.paths && t.paths.length > 0 ? Mt(t.paths[t.paths.length - 1]) : t.id, ut = (t) => "paths" in t && t.paths && t.paths.length > 0 ? Mt(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, i, o) => {
+  const s = e.statusLine(void 0);
+  if (o == null)
+    return i != null && G(t, i) === "finished" ? e.statusLine("finished") : s;
+  const l = G(t, o);
+  if (l == null || l !== "finished")
+    return s;
+  if (i == null) {
+    const a = t.steps[0]?.id;
+    return a !== void 0 && o === a ? e.statusLine("finished") : s;
+  }
+  return Ot(t, i, o) || vt(t, i, o) ? e.statusLine("finished") : s;
+}, re = Yt(
+  null
+), _1 = re.Provider, $t = () => {
+  const t = Gt(re);
+  if (!t)
+    throw new Error(
+      "useProcessDebuggerContext must be used within ProcessDebuggerProvider"
+    );
+  return t;
+}, Vt = 34.5, x1 = 33, le = (t) => {
+  const {
+    items: e,
+    pathId: i,
+    previousId: o,
+    nextId: s,
+    onSelectStep: l,
+    onResize: a,
+    onCheckScenario: p
+  } = t, { process: c, lineColors: r } = $t(), u = () => {
+  }, w = se(
+    c,
+    r,
+    o,
+    s
+  ), y = F(null), N = F([]), [_, g] = D([]);
+  st(() => {
+    const d = () => {
+      const T = y.current;
+      if (!T || e.length === 0) {
+        g([]);
+        return;
+      }
+      const O = [], j = Number.parseFloat(getComputedStyle(T).zoom || "1");
+      for (let M = 0; M < e.length; M++) {
+        const v = N.current[M];
+        if (v)
+          if (v.offsetParent == null) {
+            const P = T.getBoundingClientRect(), $ = v.getBoundingClientRect();
+            O.push(($.top - P.top) / j + Vt);
+          } else
+            O.push(v.offsetTop - x1 + Vt);
+      }
+      O.length === e.length && g(O);
+    };
+    d();
+    const x = new ResizeObserver(d), E = y.current;
+    return E && x.observe(E), window.addEventListener("resize", d), () => {
+      x.disconnect(), window.removeEventListener("resize", d);
+    };
+  }, [e]);
+  const f = R(() => {
+    if (e.length)
+      return qt(
+        e.map((d) => dt(d))
+      );
+  }, [e]), h = R(() => {
+    const d = r.statusLine(void 0);
+    return e.length === 0 ? d : dt(e[0]) === "finished" ? r.statusLine("finished") : d;
+  }, [e, r]), S = R(() => _.length !== e.length || e.length <= 1 ? null : e.map((d, x) => x).filter((d) => d > 0).map((d) => {
+    const x = _[d];
+    if (x === void 0) return null;
+    const T = dt(e[d]) === "finished" ? r.statusLine("finished") : r.statusLine(void 0);
+    return /* @__PURE__ */ n(
+      St,
+      {
+        width: 100,
+        height: x,
+        strokeColor: T,
+        fromId: e[d - 1]?.id,
+        toId: e[d]?.id
+      },
+      d
+    );
+  }), [e, _, r]), m = R(() => {
+    if (_.length !== e.length || e.length <= 1) return null;
+    const d = r.statusLine(void 0);
+    return e.map((x, E) => E).filter((x) => x > 0).map((x) => {
+      const E = _[x];
+      if (E === void 0) return null;
+      let T = d;
+      if (s != null && G(c, s) === "finished") {
+        const j = _t(
+          e[x]
+        );
+        vt(
+          c,
+          j,
+          s
+        ) && (T = r.statusLine("finished"));
+      }
+      return /* @__PURE__ */ n(
+        St,
+        {
+          width: 100,
+          height: E,
+          strokeColor: T,
+          fromId: o,
+          toId: s
+        },
+        x
+      );
+    });
+  }, [
+    e,
+    _,
+    r,
+    c,
+    s,
+    o
+  ]), L = R(() => {
+    const d = r.statusLine(void 0);
+    if (e.length === 0 || s == null || G(c, s) !== "finished") return d;
+    const E = _t(
+      e[0]
+    );
+    return vt(
+      c,
+      E,
+      s
+    ) ? r.statusLine("finished") : d;
+  }, [e, r, c, s]);
+  return /* @__PURE__ */ C("div", { className: V.row, children: [
+    /* @__PURE__ */ n(
+      te,
+      {
+        onDelete: () => {
+        },
+        enabled: !1,
+        debuggerMode: !0,
+        status: f,
+        onSelect: i != null && l ? () => l(i) : void 0
+      }
+    ),
+    /* @__PURE__ */ C(
+      "div",
+      {
+        ref: y,
+        className: V.column,
+        style: { marginTop: "33px" },
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100px",
+                height: "2px",
+                borderTop: Q(h)
+              }
+            }
+          ),
+          S
+        ]
+      }
+    ),
+    /* @__PURE__ */ n("div", { className: V.column, children: e.map((d, x) => {
+      let E;
+      if (d.paths)
+        E = /* @__PURE__ */ n(
+          le,
+          {
+            items: d.paths,
+            pathId: i,
+            previousId: d.id,
+            nextId: s,
+            onSelectStep: l,
+            onResize: a,
+            onCheckScenario: p
+          },
+          d.id
+        );
+      else if (d.steps) {
+        const T = d, O = T.status === "finished" || s != null && Ot(
+          c,
+          T.id,
+          s
+        ) ? "finished" : void 0;
+        E = /* @__PURE__ */ C(
+          "div",
+          {
+            className: V.stepsContainer,
+            "data-id": void 0,
+            children: [
+              /* @__PURE__ */ n(
+                Nt,
+                {
+                  expression: T.condition,
+                  status: O,
+                  debuggerMode: !0,
+                  style: { marginTop: "25px" }
+                }
+              ),
+              /* @__PURE__ */ n(
+                Dt,
+                {
+                  steps: d.steps,
+                  pathId: d.id,
+                  previousId: T.id,
+                  nextId: s,
+                  onSelectStep: l ?? u,
+                  onResize: a,
+                  onCheckScenario: p
+                },
+                d.id
+              )
+            ]
+          }
+        );
+      } else
+        E = /* @__PURE__ */ n(
+          ht,
+          {
+            id: d.id,
+            title: "title" in d ? d.title : "",
+            idx: 1,
+            icon: "icon" in d ? d.icon : void 0,
+            status: "status" in d ? d.status : void 0,
+            debuggerMode: !0,
+            onSelectStep: l,
+            onUpdateFilter: u,
+            onCheckScenario: p
+          },
+          d.id
+        );
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          ref: (T) => {
+            N.current[x] = T;
+          },
+          style: { width: "100%" },
+          "data-id": void 0,
+          children: E
+        },
+        d.id
+      );
+    }) }),
+    /* @__PURE__ */ C("div", { className: V.column, style: { marginTop: "33px" }, children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: 0.5,
+            left: 0,
+            flex: 1,
+            width: "100%",
+            height: "2px",
+            borderTop: Q(L)
+          }
+        }
+      ),
+      m
+    ] }),
+    /* @__PURE__ */ n(
+      ot,
+      {
+        lineColor: w,
+        fromId: o,
+        toId: s,
+        style: {
+          marginTop: "34px",
+          height: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        style: {
+          flex: 1,
+          width: "100%",
+          height: "2px",
+          borderTop: Q(w),
+          marginTop: "34px"
+        }
+      }
+    )
+  ] });
+}, w1 = ({
+  value: t,
+  previousId: e,
+  nextId: i,
+  onSelectStep: o,
+  onResize: s,
+  onCheckScenario: l
+}) => {
+  const { process: a, lineColors: p } = $t(), { id: c, limit: r, steps: u, condition: w } = t, y = u ?? [], N = () => {
+  }, [_, g] = D(!1), f = () => {
+    g((E) => !E), s?.();
+  }, h = I.container + (_ ? "" : " " + I.collapsed), S = I.expandable + (_ ? "" : " " + I.expandableCollapsed), m = y[0]?.id, L = m != null ? G(a, m) : void 0, x = e != null && (Ot(
+    a,
+    e,
+    c
+  ) || G(a, e) === "finished" && kt(a, e, c) || vt(a, e, c)) && L === "finished" ? p.statusLine("finished") : p.statusLine(void 0);
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: h,
+      "data-id": void 0,
+      children: [
+        /* @__PURE__ */ C("div", { className: I.loopNodeWrapper, children: [
+          /* @__PURE__ */ n("div", { className: I.loopBox, children: /* @__PURE__ */ n("div", { onClick: f, className: I.loopIconWrapper, children: /* @__PURE__ */ n(ne, {}) }) }),
+          /* @__PURE__ */ n("div", { className: I.label, children: "Loop" }),
+          r != null && /* @__PURE__ */ C("div", { className: I.limit, children: [
+            r,
+            "x"
+          ] })
+        ] }),
+        /* @__PURE__ */ C("div", { className: S, children: [
+          /* @__PURE__ */ C(
+            "div",
+            {
+              className: I.connector,
+              style: {
+                "--iterator-connector-color": x,
+                ...pt(x) && {
+                  "--iterator-connector-width": "3px",
+                  "--iterator-connector-style": "dotted"
+                }
+              },
+              children: [
+                /* @__PURE__ */ n("div", { className: I.line }),
+                /* @__PURE__ */ n("div", { className: I.circleDot, children: /* @__PURE__ */ n("div", { className: I.innerDot }) }),
+                /* @__PURE__ */ n("div", { className: I.line })
+              ]
+            }
+          ),
+          /* @__PURE__ */ n(
+            Nt,
+            {
+              expression: w ?? "",
+              status: t.status,
+              debuggerMode: !0,
+              style: { marginTop: "25.5px" }
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: I.stepsWrapper, children: /* @__PURE__ */ n(
+            Dt,
+            {
+              steps: y,
+              pathId: c,
+              previousId: c,
+              nextId: i,
+              onSelectStep: o ?? (() => {
+              }),
+              onCheckScenario: l ?? N,
+              isDescendent: !0
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}, Et = 68, y1 = (t) => {
+  if (!t || t.length === 0) return;
+  const e = qt(
+    t.map((o) => dt(o))
+  ), i = t.find((o) => dt(o) === e) ?? t[t.length - 1];
+  return Mt(i);
+}, Dt = ({
+  pathId: t,
+  steps: e,
+  centerY: i,
+  className: o,
+  previousId: s,
+  nextId: l,
+  onSelectStep: a,
+  onResize: p,
+  onCheckScenario: c,
+  isDescendent: r = !0
+}) => {
+  const { process: u, lineColors: w } = $t(), y = () => {
+  }, N = i === void 0 ? void 0 : { marginTop: Math.max(0, i - Et / 2) }, _ = (f, h) => se(u, w, f, h), g = (f) => f === e.length - 1 ? l : e[f + 1]?.id;
+  if (e.length === 0) {
+    const f = _(s, l);
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        "data-path-id": t ?? "",
+        style: {
+          width: "100%",
+          marginTop: "20px",
+          display: "flex",
+          flexDirection: "row",
+          flex: 1,
+          minWidth: 0,
+          ...N
+        },
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: "auto",
+                minWidth: 0,
+                height: "2px",
+                marginTop: "13.5px",
+                borderTop: Q(f)
+              }
+            }
+          ),
+          /* @__PURE__ */ n(
+            ot,
+            {
+              lineColor: f,
+              fromId: s,
+              toId: l,
+              style: {
+                height: "auto",
+                marginTop: "2px"
+              }
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                flexGrow: 1,
+                flexShrink: 0,
+                flexBasis: "auto",
+                minWidth: 0,
+                height: "2px",
+                marginTop: "13.5px",
+                borderTop: Q(f)
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      "data-path-id": t ?? "",
+      className: rt.steps + (o ? " " + o : ""),
+      style: N,
+      children: /* @__PURE__ */ C(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            flex: 1,
+            minWidth: 0,
+            width: "100%",
+            alignItems: "flex-start"
+          },
+          children: [
+            /* @__PURE__ */ n(
+              ot,
+              {
+                lineColor: _(s, e[0]?.id),
+                fromId: s,
+                toId: e[0]?.id,
+                style: {
+                  marginTop: "21.5px"
+                }
+              }
+            ),
+            e.map((f, h) => {
+              const S = !!f.paths, m = "condition" in f && typeof f.condition == "string";
+              let L;
+              if (S && f.paths) {
+                const d = y1(f.paths);
+                L = /* @__PURE__ */ n(
+                  le,
+                  {
+                    items: f.paths,
+                    pathId: f.id,
+                    previousId: d ?? f.id,
+                    nextId: g(h),
+                    onSelectStep: a,
+                    onResize: p,
+                    onCheckScenario: c
+                  },
+                  f.title
+                );
+              } else if (m) {
+                const d = h === 0 ? s : ut(e[h - 1]), x = ut(f);
+                L = /* @__PURE__ */ C(tt, { children: [
+                  /* @__PURE__ */ n(
+                    w1,
+                    {
+                      value: f,
+                      previousId: d,
+                      nextId: g(h),
+                      onSelectStep: a,
+                      onResize: p,
+                      onCheckScenario: c
+                    }
+                  ),
+                  /* @__PURE__ */ n(
+                    ot,
+                    {
+                      lineColor: _(
+                        x,
+                        g(h)
+                      ),
+                      fromId: f.id,
+                      toId: g(h),
+                      style: { marginTop: "34px", height: 0 }
+                    }
+                  )
+                ] });
+              } else
+                L = /* @__PURE__ */ C(tt, { children: [
+                  /* @__PURE__ */ n(
+                    ht,
+                    {
+                      id: f.id,
+                      title: f.title,
+                      idx: 1,
+                      icon: f.icon,
+                      isSet: f.isSet,
+                      isInvalid: f.isInvalid,
+                      isFilter: f.isFilter,
+                      status: f.status,
+                      debuggerMode: !0,
+                      onSelectStep: a,
+                      onUpdateFilter: y,
+                      onCheckScenario: c
+                    },
+                    f.title
+                  ),
+                  /* @__PURE__ */ n(
+                    ot,
+                    {
+                      lineColor: _(
+                        f.id,
+                        g(h)
+                      ),
+                      fromId: f.id,
+                      toId: g(h)
+                    }
+                  )
+                ] });
+              return /* @__PURE__ */ n(
+                "div",
+                {
+                  className: rt.stepContainer + (S || m ? " " + rt.stepContainerWithPaths : ""),
+                  children: L
+                },
+                f.id
+              );
+            }),
+            r && /* @__PURE__ */ n(
+              "div",
+              {
+                style: {
+                  flexGrow: 1,
+                  minWidth: 0,
+                  borderTop: Q(_(
+                    e.length > 0 ? ut(
+                      e[e.length - 1]
+                    ) : void 0,
+                    l
+                  )),
+                  marginTop: "33.5px"
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}, b1 = ({
+  centerY: t,
+  neutralLineColor: e
+}) => /* @__PURE__ */ C(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      flex: 1,
+      minWidth: 0,
+      width: "100%",
+      marginTop: Math.max(0, t - Et / 2),
+      height: Et,
+      alignItems: "center"
+    },
+    children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            flexGrow: 1,
+            minWidth: 0,
+            height: "2px",
+            borderTop: `2px solid ${e}`
+          }
+        }
+      ),
+      /* @__PURE__ */ n(
+        ot,
+        {
+          lineColor: e,
+          style: { height: "auto" }
+        }
+      ),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            flexGrow: 1,
+            minWidth: 0,
+            height: "2px",
+            borderTop: `2px solid ${e}`
+          }
+        }
+      )
+    ]
+  }
+), k1 = ({
+  process: t,
+  statusLineColors: e,
+  neutralLineColor: i = b.NAVY,
+  onResize: o,
+  onSelectStep: s,
+  onCheckScenario: l = () => {
+  }
+}) => {
+  const [a, p] = D(0), c = R(
+    () => mn(e, i),
+    [e, i]
+  ), r = J(
+    (u) => u === "finished" ? c.statusLine("finished") : c.statusLine(void 0),
+    [c]
+  );
+  return /* @__PURE__ */ n("div", { className: ie.container, children: /* @__PURE__ */ C(_1, { value: { process: t, lineColors: c }, children: [
+    /* @__PURE__ */ n(
+      Qt,
+      {
+        steps: t.triggers,
+        onSelectStep: s,
+        debuggerMode: !0,
+        resolveCurveStrokeColor: r,
+        onCenterYUpdate: p,
+        nextStepStatus: t.steps[0]?.status
+      }
+    ),
+    t.steps.length > 0 ? /* @__PURE__ */ n(
+      Dt,
+      {
+        steps: t.steps,
+        centerY: a,
+        onResize: o,
+        onSelectStep: s,
+        onCheckScenario: l,
+        isDescendent: !1,
+        pathId: void 0
+      }
+    ) : /* @__PURE__ */ n(
+      b1,
+      {
+        centerY: a,
+        neutralLineColor: c.statusLine(void 0)
+      }
+    )
+  ] }) });
 };
-class Ne extends Error {
-  constructor(n) {
-    super(n), this.name = "AddStepError";
+class N1 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], a = c.steps?.length && c1(c.steps, n, o, i);
+const zt = (t) => "condition" in t && typeof t.condition == "string", ce = (t, e, i, o) => {
+  const s = o === "prepend" ? e : e + 1;
+  return [...t.slice(0, s), i, ...t.slice(s)];
+}, Bt = (t, e, i, o) => {
+  for (let s = 0; s < t.length; s++) {
+    if (t[s].id === e)
+      return ce(t, s, o, i);
+    const l = t[s], a = l.steps?.length && Bt(l.steps, e, i, o);
     if (a)
       return t.map(
-        (s, l) => l === r ? { ...s, steps: a } : s
+        (c, r) => r === s ? { ...c, steps: a } : c
       );
-    const d = c.paths?.length && I1(c.paths, n, o, i);
-    if (d)
+    const p = l.paths?.length && ae(l.paths, e, i, o);
+    if (p)
       return t.map(
-        (s, l) => l === r ? { ...s, paths: d } : s
+        (c, r) => r === s ? { ...c, paths: p } : c
       );
   }
   return null;
-}, ke = (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(
-        (a, d) => d === r ? ke(c, o, i) : a
-      ) : y1(t, r, i, o);
-    if (m1(c)) {
-      const a = c.steps?.length && c1(c.steps, n, o, i);
+}, L1 = (t, e, i) => {
+  const o = t.steps ?? [], s = e === "prepend" ? [i, ...o] : [...o, i];
+  return { ...t, steps: s };
+}, ae = (t, e, i, o) => {
+  for (let s = 0; s < t.length; s++) {
+    const l = t[s];
+    if (l.id === e)
+      return zt(l) ? t.map(
+        (a, p) => p === s ? L1(l, i, o) : a
+      ) : ce(t, s, o, i);
+    if (zt(l)) {
+      const a = l.steps?.length && Bt(l.steps, e, i, o);
       if (a)
         return t.map(
-          (s, l) => l === r ? { ...s, steps: a } : s
+          (c, r) => r === s ? { ...c, steps: a } : c
         );
-      const d = c.paths?.length && I1(c.paths, n, o, i);
-      if (d)
+      const p = l.paths?.length && ae(l.paths, e, i, o);
+      if (p)
         return t.map(
-          (s, l) => l === r ? { ...s, paths: d } : s
+          (c, r) => r === s ? { ...c, paths: p } : c
         );
     }
   }
   return null;
-}, $e = (t, n, o, i) => {
-  const r = c1(t.steps, n, o, i);
-  if (r)
-    return { ...t, steps: r };
-  throw new Ne(`Step or path with id "${n}" not found`);
-}, b1 = (t, n) => ({
+}, R1 = (t, e, i, o) => {
+  const s = Bt(t.steps, e, i, o);
+  if (s)
+    return { ...t, steps: s };
+  throw new N1(`Step or path with id "${e}" not found`);
+}, de = (t, e) => ({
   ...t,
-  ...t.steps != null && { steps: a1(t.steps, n) },
+  ...t.steps != null && { steps: Ft(t.steps, e) },
   ...t.paths != null && {
-    paths: t.paths.map((o) => b1(o, n))
+    paths: t.paths.map((i) => de(i, 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))
+}), Ft = (t, e) => t.filter((i) => i.id !== e).map((i) => ({
+  ...i,
+  ...i.steps != null && { steps: Ft(i.steps, e) },
+  ...i.paths != null && {
+    paths: i.paths.map((o) => de(o, e))
   }
-})), Te = (t, n) => {
-  const o = a1(t.steps, n);
+})), O1 = (t, e) => {
+  const i = Ft(t.steps, e);
   return {
     ...t,
-    steps: o
+    steps: i
   };
 };
 export {
-  Ne as AddStepError,
-  ye as Iterator,
-  Q as Menu,
-  Le as MenuProvider,
-  Ee as ProcessDiagram,
-  s1 as ProcessStep,
-  kt as Trigger,
-  $e as addStep,
-  Te as deleteStep,
-  r1 as useMenuProvider
+  N1 as AddStepError,
+  C1 as Iterator,
+  wt as Menu,
+  T1 as MenuProvider,
+  k1 as ProcessDebuggerDiagram,
+  P1 as ProcessDiagram,
+  ht as ProcessStep,
+  Qt as Trigger,
+  R1 as addStep,
+  O1 as deleteStep,
+  Tt as useMenuProvider
 };
 //# sourceMappingURL=index.mjs.map