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

package/dist/index.mjs

@@ -1,19 +1,19 @@
 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", Ie = "_isSet_1f7x1_45", we = "_invalid_1f7x1_52", ye = "_debuggerStatus_1f7x1_60", be = "_title_1f7x1_64", Ne = "_icon_1f7x1_67", Le = "_filterFlag_1f7x1_78", Se = "_content_1f7x1_141", k = {
+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: Ie,
-  invalid: we,
-  debuggerStatus: ye,
-  title: be,
-  icon: Ne,
-  filterFlag: Le,
-  content: Se
+  isSet: we,
+  invalid: ye,
+  debuggerStatus: be,
+  title: Ne,
+  icon: Le,
+  filterFlag: Se,
+  content: Ie
 };
 var Zt = {
   color: void 0,
@@ -24,57 +24,57 @@ var Zt = {
 }, At = X.createContext && /* @__PURE__ */ X.createContext(Zt), Ee = ["attr", "size", "title"];
 function Te(t, e) {
   if (t == null) return {};
-  var o = Pe(t, e), i, s;
+  var i = Pe(t, e), o, s;
   if (Object.getOwnPropertySymbols) {
     var l = Object.getOwnPropertySymbols(t);
     for (s = 0; s < l.length; s++)
-      i = l[s], !(e.indexOf(i) >= 0) && Object.prototype.propertyIsEnumerable.call(t, i) && (o[i] = t[i]);
+      o = l[s], !(e.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(t, o) && (i[o] = t[o]);
   }
-  return o;
+  return i;
 }
 function Pe(t, e) {
   if (t == null) return {};
-  var o = {};
-  for (var i in t)
-    if (Object.prototype.hasOwnProperty.call(t, i)) {
-      if (e.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 gt() {
   return gt = Object.assign ? Object.assign.bind() : function(t) {
     for (var e = 1; e < arguments.length; e++) {
-      var o = arguments[e];
-      for (var i in o)
-        Object.prototype.hasOwnProperty.call(o, i) && (t[i] = o[i]);
+      var i = arguments[e];
+      for (var o in i)
+        Object.prototype.hasOwnProperty.call(i, o) && (t[o] = i[o]);
     }
     return t;
   }, gt.apply(this, arguments);
 }
 function jt(t, e) {
-  var o = Object.keys(t);
+  var i = Object.keys(t);
   if (Object.getOwnPropertySymbols) {
-    var i = Object.getOwnPropertySymbols(t);
-    e && (i = i.filter(function(s) {
+    var o = Object.getOwnPropertySymbols(t);
+    e && (o = o.filter(function(s) {
       return Object.getOwnPropertyDescriptor(t, s).enumerable;
-    })), o.push.apply(o, i);
+    })), i.push.apply(i, o);
   }
-  return o;
+  return i;
 }
 function Ct(t) {
   for (var e = 1; e < arguments.length; e++) {
-    var o = arguments[e] != null ? arguments[e] : {};
-    e % 2 ? jt(Object(o), !0).forEach(function(i) {
-      ke(t, i, o[i]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(t, Object.getOwnPropertyDescriptors(o)) : jt(Object(o)).forEach(function(i) {
-      Object.defineProperty(t, i, Object.getOwnPropertyDescriptor(o, i));
+    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 ke(t, e, o) {
-  return e = Re(e), e in t ? Object.defineProperty(t, e, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : t[e] = 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 Re(t) {
   var e = Oe(t, "string");
@@ -82,17 +82,17 @@ function Re(t) {
 }
 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, e);
-    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 (e === "string" ? String : Number)(t);
 }
 function Ut(t) {
-  return t && t.map((e, o) => /* @__PURE__ */ X.createElement(e.tag, Ct({
-    key: o
+  return t && t.map((e, i) => /* @__PURE__ */ X.createElement(e.tag, Ct({
+    key: i
   }, e.attr), Ut(e.child)));
 }
 function et(t) {
@@ -101,27 +101,27 @@ function et(t) {
   }, e), Ut(t.child));
 }
 function Me(t) {
-  var e = (o) => {
+  var e = (i) => {
     var {
-      attr: i,
+      attr: o,
       size: s,
       title: l
-    } = t, a = Te(t, Ee), p = s || o.size || "1em", c;
-    return o.className && (c = o.className), t.className && (c = (c ? c + " " : "") + t.className), /* @__PURE__ */ X.createElement("svg", gt({
+    } = 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, {
+    }, i.attr, o, a, {
       className: c,
       style: Ct(Ct({
-        color: t.color || o.color
-      }, o.style), t.style),
+        color: t.color || i.color
+      }, i.style), t.style),
       height: p,
       width: p,
       xmlns: "http://www.w3.org/2000/svg"
     }), l && /* @__PURE__ */ X.createElement("title", null, l), t.children);
   };
-  return At !== void 0 ? /* @__PURE__ */ X.createElement(At.Consumer, null, (o) => e(o)) : e(Zt);
+  return At !== void 0 ? /* @__PURE__ */ X.createElement(At.Consumer, null, (i) => e(i)) : e(Zt);
 }
 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);
@@ -144,57 +144,57 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
   menuItemText: We,
   overlay: He
 }, Ve = (t) => {
-  const o = t.currentTarget ?? t.target;
-  if (o?.getBoundingClientRect) {
-    const s = o.getBoundingClientRect();
+  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
   };
-}, It = pe(function({ model: e, popup: o = !0, onHide: i, onClick: s }, l) {
-  const [a, p] = D(!1), [c, r] = D(!1), [u, I] = D({ top: 0, left: 0 }), w = F(null), b = J(() => {
+}, 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) => {
-      c && m.animationName.includes("menuOut") && (p(!1), r(!1), i?.());
+      c && m.animationName.includes("menuOut") && (p(!1), r(!1), o?.());
     },
-    [c, i]
+    [c, o]
   ), g = J((m) => {
-    I(Ve(m)), r(!1), p(!0);
+    w(Ve(m)), r(!1), p(!0);
   }, []), f = J(
     (m) => {
-      a ? b() : g(m);
+      a ? N() : g(m);
     },
-    [a, b, g]
+    [a, N, g]
   );
   he(
     l,
     () => ({
       show: g,
-      hide: b,
+      hide: N,
       toggle: f
     }),
-    [g, b, f]
+    [g, N, f]
   ), st(() => {
     if (!a) return;
     const m = (d) => {
-      d.key === "Escape" && b();
-    }, N = (d) => {
-      const x = w.current;
-      x && !x.contains(d.target) && (d.stopPropagation(), b());
+      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", N), () => {
-      document.removeEventListener("keydown", m), document.removeEventListener("mousedown", N);
+    return document.addEventListener("keydown", m), document.addEventListener("mousedown", L), () => {
+      document.removeEventListener("keydown", m), document.removeEventListener("mousedown", L);
     };
-  }, [a, b]);
-  const h = (m, N) => {
-    N.stopPropagation(), m.command?.({ originalEvent: N, item: m }), b();
-  }, L = (m, N) => {
+  }, [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 }) }, N) : /* @__PURE__ */ C(
+    return m.template ? /* @__PURE__ */ n(X.Fragment, { children: m.template(m, { onClick: d }) }, L) : /* @__PURE__ */ C(
       "button",
       {
         type: "button",
@@ -207,24 +207,24 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
           /* @__PURE__ */ n("span", { className: H.menuItemText, children: m.label })
         ]
       },
-      N
+      L
     );
   };
-  return !a || !o ? null : ge(
+  return !a || !i ? null : ge(
     /* @__PURE__ */ C(tt, { children: [
       /* @__PURE__ */ n(
         "div",
         {
           className: H.overlay,
           "aria-hidden": !0,
-          onClick: () => b(),
+          onClick: () => N(),
           onMouseDown: (m) => m.stopPropagation()
         }
       ),
       /* @__PURE__ */ n(
         "div",
         {
-          ref: w,
+          ref: y,
           className: `${H.panel} ${c ? H.panelExiting : ""}`,
           role: "menu",
           style: { top: u.top, left: u.left },
@@ -232,23 +232,23 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
           onClick: (m) => {
             m.stopPropagation(), s?.(m);
           },
-          children: e.map(L)
+          children: e.map(S)
         }
       )
     ] }),
     document.body
   );
-}), wt = () => (t, e) => /* @__PURE__ */ C(
+}), yt = () => (t, e) => /* @__PURE__ */ C(
   "button",
   {
     className: H.menuItem,
-    onClick: (o) => e.onClick(o),
+    onClick: (i) => e.onClick(i),
     children: [
       /* @__PURE__ */ n("span", { className: H.menuItemIcon, children: t.icon }),
       /* @__PURE__ */ n("span", { className: H.menuItemText, children: t.label })
     ]
   }
-), y = {
+), b = {
   NAVY: "#3B64A0",
   FINISHED_GREEN: "#17a34a",
   ERROR_RED: "#E32012",
@@ -258,21 +258,21 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
   SEPARATOR: "#a1bbdc",
   SLATE_400: "#94a3b8",
   ORANGE: "#ff9800"
-}, pt = (t) => t?.toLowerCase() === y.FINISHED_GREEN.toLowerCase(), Q = (t) => pt(t) ? `3px dotted ${t}` : `2px solid ${t}`, yt = {
-  pending: y.NAVY,
-  running: y.TEAL,
-  validating: y.ORANGE,
-  finished: y.FINISHED_GREEN,
-  failed: y.ERROR_RED,
-  cancelled: y.ORANGE,
-  skipped: y.SLATE_400,
-  invalid: y.ERROR_RED
+}, 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: e = 16,
-  color: o = y.NAVY
+  color: i = b.NAVY
 }) => /* @__PURE__ */ C(
   "svg",
   {
@@ -291,14 +291,14 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
           height: "11",
           rx: "1.5",
           transform: "rotate(45 7.99219 0.222732)",
-          stroke: o
+          stroke: i
         }
       ),
       /* @__PURE__ */ n(
         "path",
         {
           d: "M10.4693 5.52599L5.52513 10.4813M5.52513 5.53151L10.4749 10.4813",
-          stroke: o,
+          stroke: i,
           strokeLinecap: "round"
         }
       )
@@ -307,7 +307,7 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
 ), Ge = ({
   width: t = 16,
   height: e = 16,
-  color: o = y.NAVY
+  color: i = b.NAVY
 }) => /* @__PURE__ */ C(
   "svg",
   {
@@ -321,7 +321,7 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
         "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__ */ n(
@@ -330,15 +330,15 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
           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
         }
       )
     ]
   }
-), Nt = ({
+), Lt = ({
   width: t = 16,
   height: e = 16,
-  color: o = y.NAVY
+  color: i = b.NAVY
 }) => /* @__PURE__ */ C(
   "svg",
   {
@@ -352,14 +352,14 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
         "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__ */ 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
         }
       )
     ]
@@ -367,19 +367,19 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
 ), Kt = Yt(
   void 0
 ), T1 = ({ children: t }) => {
-  const [e, o] = D([]), i = J((a, p) => {
-    o((c) => (c.forEach((r) => {
+  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), o([a]);
+    }), [])), a.current?.toggle(p), i([a]);
   }, []), s = J((a) => {
-    o((p) => p.filter((c) => c !== a));
+    i((p) => p.filter((c) => c !== a));
   }, []), l = R(
     () => ({
       openMenus: e,
-      openMenu: i,
+      openMenu: o,
       closeMenu: s
     }),
-    [e, i, s]
+    [e, o, s]
   );
   return /* @__PURE__ */ n(Kt.Provider, { value: l, children: t });
 }, Tt = () => {
@@ -387,7 +387,7 @@ const De = "_panel_19663_1", Be = "_panelExiting_19663_13", Fe = "_menuItem_1966
   if (t === void 0)
     throw new Error("useMenuProvider must be used within a MenuProvider");
   return t;
-}, Ze = ({ color: t = y.ERROR_RED }) => /* @__PURE__ */ C(
+}, Ze = ({ color: t = b.ERROR_RED }) => /* @__PURE__ */ C(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -419,8 +419,8 @@ function Ke(t) {
 const ht = (t) => {
   const {
     isSet: e,
-    isSelected: o,
-    isFilter: i,
+    isSelected: i,
+    isFilter: o,
     debuggerMode: s = !1,
     status: l,
     className: a,
@@ -428,56 +428,56 @@ const ht = (t) => {
     icon: c,
     contextMenuItems: r = void 0,
     onDeleteStep: u,
-    onUpdateFilter: I,
-    onSelectStep: w,
-    onCheckScenario: b,
+    onUpdateFilter: w,
+    onSelectStep: y,
+    onCheckScenario: N,
     subtitle: _,
     isInvalid: g,
-    localId: f
-  } = t, h = F(null), { openMenu: L, closeMenu: m } = Tt(), N = wt(), [d] = D(!0), x = R(() => {
+    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(Nt, {}) }),
+      icon: /* @__PURE__ */ n("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ n(Lt, {}) }),
       command: (P) => {
-        P?.originalEvent?.stopPropagation(), I && I(f);
+        P?.originalEvent?.stopPropagation(), w && w(f);
       },
-      template: N
+      template: L
     }), u && !s && v.push({
       label: "Remove",
-      icon: /* @__PURE__ */ n(xt, { color: y.NAVY, size: 18 }),
+      icon: /* @__PURE__ */ n(xt, { color: b.NAVY, size: 18 }),
       command: (P) => {
         P?.originalEvent?.stopPropagation(), u(f);
       },
-      template: N
+      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: y.NAVY, size: 18 }) }),
+      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(), b(f);
+        P?.originalEvent?.stopPropagation(), N(f);
       },
-      template: N
+      template: L
     }), v;
-  }, [I, u, f, N, d, b, s]), E = R(() => r ?? x, [r, x]), T = (v) => {
-    v.stopPropagation(), L(h, 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": yt[l]
+        "--step-debugger-accent": bt[l]
       };
-  }, [s, l]), j = R(() => o && g ? k.step + " " + k.selectedInvalid : s && l != null && l !== "pending" ? k.step + " " + k.debuggerStatus : o ? k.step + " " + k.selected : e ? k.step + " " + k.isSet : g ? k.step + " " + k.invalid : k.step, [e, o, g, l, s]), M = R(() => g ? /* @__PURE__ */ n(Ze, { color: y.ERROR_RED }) : c, [c, g]);
+  }, [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-local-id": void 0,
+      "data-id": void 0,
       children: /* @__PURE__ */ C("div", { children: [
         /* @__PURE__ */ C(
           "div",
           {
             className: j,
             style: O,
-            onClick: () => w(f),
+            onClick: () => y(f),
             children: [
               /* @__PURE__ */ C("div", { className: k.content, children: [
                 /* @__PURE__ */ n("div", { className: `${k.icon} ${g && k.invalid}`, children: M }),
@@ -495,7 +495,7 @@ const ht = (t) => {
                   }
                 ),
                 /* @__PURE__ */ n(
-                  It,
+                  wt,
                   {
                     model: E,
                     popup: !0,
@@ -508,26 +508,26 @@ const ht = (t) => {
             ]
           }
         ),
-        i && /* @__PURE__ */ C(
+        o && /* @__PURE__ */ C(
           "div",
           {
             className: k.filterFlag,
             role: "button",
             tabIndex: 0,
             onClick: () => {
-              I && I(f);
+              w && w(f);
             },
             onKeyDown: (v) => {
-              (v.key === "Enter" || v.key === " ") && I && (v.preventDefault(), I(f));
+              (v.key === "Enter" || v.key === " ") && w && (v.preventDefault(), w(f));
             },
             children: [
-              /* @__PURE__ */ n(Nt, { color: y.NAVY }),
+              /* @__PURE__ */ n(Lt, { color: b.NAVY }),
               /* @__PURE__ */ n("span", { children: "Filter" }),
               !s && /* @__PURE__ */ n(
                 mt,
                 {
                   className: k.dots,
-                  color: g ? y.ERROR_RED : y.NAVY,
+                  color: g ? b.ERROR_RED : b.NAVY,
                   style: { height: "10px" }
                 }
               )
@@ -540,10 +540,10 @@ const ht = (t) => {
   );
 }, 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: y.ADD_TRIGGER_FILL }),
+    /* @__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__ */ n("rect", { x: "0.75", y: "0.75", width: "22.5", height: "22.5", rx: "11.25", stroke: y.ADD_TRIGGER_STROKE, strokeWidth: "1.5" }),
+  /* @__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
@@ -576,7 +576,7 @@ const ht = (t) => {
       height: "1px",
       marginLeft: "4px",
       marginRight: "4px",
-      borderTop: `1px solid ${y.SEPARATOR}`
+      borderTop: `1px solid ${b.SEPARATOR}`
     }
   }
 ), gn = [
@@ -590,15 +590,15 @@ const ht = (t) => {
   "pending"
 ], qt = (t) => {
   const e = [
-    ...new Set(t.filter((o) => o != null))
+    ...new Set(t.filter((i) => i != null))
   ];
   if (e.length !== 0) {
-    for (const o of gn)
-      if (e.includes(o)) return o;
+    for (const i of gn)
+      if (e.includes(i)) return i;
     return e[0];
   }
-}, Jt = (t, e) => !e || t == null ? y.NAVY : yt[t], Cn = (t, e, o = y.NAVY) => t == null ? o : e?.[t] ?? yt[t], mn = (t, e = y.NAVY) => ({
-  statusLine: (o) => Cn(o, t, e)
+}, 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;
@@ -606,8 +606,8 @@ const ht = (t) => {
 }, vn = 80, ft = 34, Qt = ({
   steps: t,
   title: e,
-  className: o,
-  onDeleteTrigger: i,
+  className: i,
+  onDeleteTrigger: o,
   onAddTrigger: s,
   onSelectStep: l,
   onUpdateFilter: a,
@@ -615,25 +615,25 @@ const ht = (t) => {
   debuggerMode: c = !1,
   resolveCurveStrokeColor: r,
   isEditable: u = !1,
-  nextStepStatus: I
+  nextStepStatus: w
 }) => {
-  const w = F(null), b = F([]), [_, g] = D([]), [f, h] = D({ width: 0, height: 0 }), [L, m] = D(!1), [N, d] = D(!1), x = F(null);
+  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 (!w.current) return;
+      if (!y.current) return;
       const P = [];
-      if (b.current.forEach(($, z) => {
-        if ($ && w.current) {
-          const Y = w.current.getBoundingClientRect(), A = $.getBoundingClientRect();
+      if (N.current.forEach(($, z) => {
+        if ($ && y.current) {
+          const Y = y.current.getBoundingClientRect(), A = $.getBoundingClientRect();
           P.push({
-            localId: t[z]?.localId ?? `step-${z}`,
+            id: t[z]?.id ?? `step-${z}`,
             top: A.top - Y.top,
             right: A.right - Y.left,
             centerY: A.top - Y.top + A.height / 2
           });
         }
-      }), g(P), w.current && P.length > 0) {
-        const $ = w.current.getBoundingClientRect(), z = Math.min(...P.map((Z) => Z.top)), Y = b.current.filter(Boolean).map((Z) => Z?.offsetHeight || 68), A = Math.max(
+      }), 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,
@@ -648,7 +648,7 @@ const ht = (t) => {
     return v(), window.addEventListener("resize", v), () => window.removeEventListener("resize", v);
   }, [t]), st(() => {
     let v = !0;
-    if (L) {
+    if (S) {
       x.current && (clearTimeout(x.current), x.current = null);
       const P = setTimeout(() => {
         v && d(!0);
@@ -662,14 +662,14 @@ const ht = (t) => {
     }, 140), () => {
       v = !1, x.current && (clearTimeout(x.current), x.current = null);
     };
-  }, [L]);
+  }, [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") && I === "finished", j = wt();
+  const O = c && t.some((v) => v.status === "finished") && w === "finished", j = yt();
   if (t.length === 0)
-    return /* @__PURE__ */ C("div", { className: `${B.trigger} ${o || ""}`, children: [
+    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" })
     ] });
@@ -677,21 +677,21 @@ const ht = (t) => {
     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__ */ C("div", { className: `${B.trigger} ${o || ""}`, ref: w, children: [
+  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: ($) => {
-            b.current[P] = $;
+            N.current[P] = $;
           },
           children: /* @__PURE__ */ n(
             ht,
             {
               title: v.title,
               className: B.stepItem,
-              localId: v.localId,
+              id: v.id,
               idx: P,
               isSet: v.isSet,
               isSelected: v.isSelected,
@@ -708,17 +708,17 @@ const ht = (t) => {
               contextMenuItems: u ? [
                 {
                   label: "Add Step Filter",
-                  icon: /* @__PURE__ */ n("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ n(Nt, {}) }),
+                  icon: /* @__PURE__ */ n("div", { className: "mr-2 flex items-center justify-center", children: /* @__PURE__ */ n(Lt, {}) }),
                   command: ($) => {
-                    $?.originalEvent?.stopPropagation(), a && a(v.localId);
+                    $?.originalEvent?.stopPropagation(), a && a(v.id);
                   },
                   template: j
                 },
                 {
                   label: "Delete",
-                  icon: /* @__PURE__ */ n(xt, { className: "mr-2", color: y.NAVY, size: 18 }),
+                  icon: /* @__PURE__ */ n(xt, { className: "mr-2", color: b.NAVY, size: 18 }),
                   command: () => {
-                    i?.(v.localId);
+                    o?.(v.id);
                   },
                   disabled: t.length === 1
                 },
@@ -728,7 +728,7 @@ const ht = (t) => {
                 },
                 {
                   label: "Add More Triggers",
-                  icon: /* @__PURE__ */ n($e, { className: "mr-2", color: y.NAVY, size: 18 }),
+                  icon: /* @__PURE__ */ n($e, { className: "mr-2", color: b.NAVY, size: 18 }),
                   command: () => {
                     s?.();
                   }
@@ -737,7 +737,7 @@ const ht = (t) => {
             }
           )
         },
-        v.localId
+        v.id
       )) }),
       /* @__PURE__ */ n("div", { style: { position: "relative" }, children: _.length > 1 && /* @__PURE__ */ n(
         "svg",
@@ -747,7 +747,7 @@ const ht = (t) => {
           height: f.height,
           children: _.map((v) => {
             const $ = _.length === 1 ? _[0].top + ft : v.top + ft, z = E, Y = T, A = t.find(
-              (ct) => ct.localId === v.localId
+              (ct) => ct.id === v.id
             )?.status, lt = r != null ? r(A) : Jt(A, c), nt = pt(lt);
             return /* @__PURE__ */ n(
               "path",
@@ -759,7 +759,7 @@ const ht = (t) => {
                 strokeLinecap: "round",
                 strokeDasharray: nt ? "0 6" : void 0
               },
-              v.localId
+              v.id
             );
           })
         }
@@ -777,17 +777,17 @@ const ht = (t) => {
                 pointerEvents: "none"
               },
               ...O && {
-                backgroundColor: y.FINISHED_GREEN
+                backgroundColor: b.FINISHED_GREEN
               }
             },
             ...!c && {
               onMouseEnter: () => m(!0),
               onMouseLeave: () => m(!1)
             },
-            children: !c && N ? /* @__PURE__ */ n(
+            children: !c && L ? /* @__PURE__ */ n(
               "div",
               {
-                className: `${B.iconWrapper} ${L ? B.fadeIn : B.fadeOut}`,
+                className: `${B.iconWrapper} ${S ? B.fadeIn : B.fadeOut}`,
                 onClick: s,
                 children: /* @__PURE__ */ n(qe, {})
               }
@@ -802,7 +802,7 @@ const ht = (t) => {
               "--op-x": `${E + 16}px`,
               "--op-y": `${T}px`
             },
-            children: /* @__PURE__ */ n(tn, { color: O ? y.FINISHED_GREEN : void 0 })
+            children: /* @__PURE__ */ n(tn, { color: O ? b.FINISHED_GREEN : void 0 })
           }
         )
       ] }) : null
@@ -821,7 +821,7 @@ const ht = (t) => {
         "path",
         {
           d: "M6 12L18 12",
-          stroke: y.NAVY,
+          stroke: b.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
@@ -830,35 +830,35 @@ const ht = (t) => {
         "path",
         {
           d: "M12 6V18",
-          stroke: y.NAVY,
+          stroke: b.NAVY,
           strokeWidth: "2",
           strokeLinecap: "round"
         }
       )
     ]
   }
-), xn = "_stepLinkIcon_b0452_1", In = "_stepLinkLine_b0452_15", wn = "_stepLinkContainer_b0452_39", yn = "_readOnly_b0452_61", bn = "_debuggerIconCollapsed_b0452_66", Nn = "_dashedLine_b0452_75", W = {
+), 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: In,
-  stepLinkContainer: wn,
-  readOnly: yn,
-  debuggerIconCollapsed: bn,
-  dashedLine: Nn
-}, ot = ({
+  stepLinkLine: wn,
+  stepLinkContainer: yn,
+  readOnly: bn,
+  debuggerIconCollapsed: Nn,
+  dashedLine: Ln
+}, it = ({
   onAddStep: t,
   onAddTrigger: e,
-  onAddCondition: o,
-  onAddLoop: i,
-  lineColor: s = y.NAVY,
+  onAddCondition: i,
+  onAddLoop: o,
+  lineColor: s = b.NAVY,
   stepId: l,
   index: a = 0,
   style: p,
   pathId: c
 }) => {
-  const r = wt(), u = F(null), I = [
+  const r = yt(), u = F(null), w = [
     {
       label: "Trigger",
-      icon: /* @__PURE__ */ n(Ke, { color: y.NAVY, size: 18 }),
+      icon: /* @__PURE__ */ n(Ke, { color: b.NAVY, size: 18 }),
       command: () => {
         e?.(
           l,
@@ -871,24 +871,24 @@ const ht = (t) => {
     },
     {
       label: "Step",
-      icon: /* @__PURE__ */ n(Xe, { color: y.NAVY, size: 18 }),
+      icon: /* @__PURE__ */ n(Xe, { color: b.NAVY, size: 18 }),
       command: () => t?.(l, c, a > 0 ? "append" : "prepend"),
       template: r
     },
     {
       label: "Condition",
       icon: /* @__PURE__ */ n(Ye, { width: 18, height: 18 }),
-      command: () => o?.(l, c, a > 0 ? "append" : "prepend"),
+      command: () => i?.(l, c, a > 0 ? "append" : "prepend"),
       template: r
     },
     {
       label: "Loop",
       icon: /* @__PURE__ */ n(Ge, { width: 18, height: 18 }),
-      command: () => i?.(l, c, a > 0 ? "append" : "prepend"),
+      command: () => o?.(l, c, a > 0 ? "append" : "prepend"),
       template: r
     }
-  ], w = (b) => {
-    u.current?.show(b);
+  ], y = (N) => {
+    u.current?.show(N);
   };
   return /* @__PURE__ */ C(
     "div",
@@ -902,31 +902,31 @@ const ht = (t) => {
           "div",
           {
             className: W.stepLinkIcon,
-            onClick: w,
+            onClick: y,
             "aria-haspopup": !0,
             children: /* @__PURE__ */ n(_n, {})
           }
         ),
-        /* @__PURE__ */ n(It, { model: I, popup: !0, ref: u }),
+        /* @__PURE__ */ n(wt, { model: w, popup: !0, ref: u }),
         /* @__PURE__ */ n("div", { className: W.stepLinkLine })
       ]
     }
   );
-}, Ln = "_steps_yug55_1", Sn = "_stepContainer_yug55_8", En = "_stepContainerWithPaths_yug55_14", rt = {
-  steps: Ln,
-  stepContainer: Sn,
+}, Sn = "_steps_yug55_1", In = "_stepContainer_yug55_8", En = "_stepContainerWithPaths_yug55_14", rt = {
+  steps: Sn,
+  stepContainer: In,
   stepContainerWithPaths: En
-}, Tn = (t, e, o, i) => {
-  const s = o - t, l = Math.min(s * 0.66, 66), a = t + l, p = e, c = o - l;
-  return `M ${t} ${e} C ${a} ${p}, ${c} ${i}, ${o} ${i}`;
-}, Lt = ({
+}, 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: e,
-  strokeColor: o = y.NAVY,
-  fromLocalId: i,
-  toLocalId: s
+  strokeColor: i = b.NAVY,
+  fromId: o,
+  toId: s
 }) => {
-  const l = pt(o), u = Tn(0, 1, t, e);
+  const l = pt(i), u = Tn(0, 1, t, e);
   return /* @__PURE__ */ n(
     "div",
     {
@@ -944,7 +944,7 @@ const ht = (t) => {
             "path",
             {
               d: u,
-              stroke: o,
+              stroke: i,
               strokeWidth: l ? 3 : 2,
               fill: "none",
               strokeLinecap: "round",
@@ -967,13 +967,13 @@ const ht = (t) => {
 }, $n = ({
   content: t,
   children: e,
-  maxWidth: o = 500,
-  className: i
+  maxWidth: i = 500,
+  className: o
 }) => /* @__PURE__ */ C(
   "div",
   {
-    className: `${Wt.wrapper} ${i ?? ""}`.trim(),
-    style: { "--tooltip-max-width": `${o}px` },
+    className: `${Wt.wrapper} ${o ?? ""}`.trim(),
+    style: { "--tooltip-max-width": `${i}px` },
     children: [
       e,
       t ? /* @__PURE__ */ n("div", { className: Wt.tooltip, role: "tooltip", children: t }) : null
@@ -987,36 +987,36 @@ const ht = (t) => {
   condition: jn,
   conditionWrapper: Wn,
   conditionFits: Hn
-}, bt = ({
+}, Nt = ({
   expression: t,
   style: e,
-  status: o,
-  debuggerMode: i = !1
+  status: i,
+  debuggerMode: o = !1
 }) => {
   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(_), L = Number.parseFloat(f) + Number.parseFloat(h);
-    p(g.offsetWidth >= _.clientWidth - L);
+    const { paddingLeft: f, paddingRight: h } = getComputedStyle(_), S = Number.parseFloat(f) + Number.parseFloat(h);
+    p(g.offsetWidth >= _.clientWidth - S);
   }, [t]);
-  const c = t && a ? t : "", r = i && o === "finished", u = r, I = R(() => {
+  const c = t && a ? t : "", r = o && i === "finished", u = r, w = R(() => {
     if (r)
       return {
-        "--condition-accent": yt.finished,
+        "--condition-accent": bt.finished,
         "--condition-bg": ze.finished,
         "--condition-line-width": "3px",
         "--condition-line-style": "dotted"
       };
-  }, [r]), w = `${U.condition} ${a ? "" : U.conditionFits}`.trim(), b = `${U.conditionContainer} ${u ? U.debuggerTint : ""}`.trim();
+  }, [r]), y = `${U.condition} ${a ? "" : U.conditionFits}`.trim(), N = `${U.conditionContainer} ${u ? U.debuggerTint : ""}`.trim();
   return /* @__PURE__ */ C(
     "div",
     {
-      className: b,
-      style: { ...e, ...I },
+      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: w, children: /* @__PURE__ */ n("span", { ref: l, children: t }) }) }),
+        /* @__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 })
       ]
@@ -1031,7 +1031,7 @@ const ht = (t) => {
   ifdotIcon: Jn
 }, Qn = ({
   style: t,
-  color: e = y.NAVY
+  color: e = b.NAVY
 }) => /* @__PURE__ */ n(
   "div",
   {
@@ -1045,41 +1045,41 @@ const ht = (t) => {
 ), te = (t) => {
   const {
     enabled: e = !0,
-    onDelete: o,
-    onSelect: i,
+    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", I = u ? Jt("finished", !0) : y.NAVY, w = u ? Yn : Vn, b = u ? Gn : zn, _ = R(
+  } = 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__ */ n(Xt, { color: y.NAVY, size: 18 }),
-        command: () => i?.()
+        icon: /* @__PURE__ */ n(Xt, { color: b.NAVY, size: 18 }),
+        command: () => o?.()
       },
       {
         label: "Delete",
-        icon: /* @__PURE__ */ n(xt, { color: y.NAVY, size: 18 }),
-        command: () => o?.()
+        icon: /* @__PURE__ */ n(xt, { color: b.NAVY, size: 18 }),
+        command: () => i?.()
       }
     ],
-    [i, o]
+    [o, i]
   ), g = (h) => {
     h.stopPropagation(), p(a, h);
   }, f = (h) => {
-    h.target.closest(`.${K.menuButton}`) || i?.();
+    h.target.closest(`.${K.menuButton}`) || o?.();
   };
   return /* @__PURE__ */ C("div", { className: K.ifStatementContainer, children: [
     /* @__PURE__ */ n(
       Qn,
       {
-        color: I,
+        color: w,
         style: { position: "absolute", top: "22.5px", left: 0, zIndex: 1 }
       }
     ),
     /* @__PURE__ */ n("div", { className: K.ifStatement, children: /* @__PURE__ */ n(
       "img",
       {
-        src: w,
+        src: y,
         alt: "condition",
         onClick: (h) => f(h),
         className: K.conditionIcon
@@ -1098,7 +1098,7 @@ const ht = (t) => {
         }
       ),
       /* @__PURE__ */ n(
-        It,
+        wt,
         {
           ref: a,
           model: _,
@@ -1107,13 +1107,13 @@ const ht = (t) => {
         }
       )
     ] }),
-    /* @__PURE__ */ n("img", { src: b, alt: "ifdot", className: K.ifdotIcon })
+    /* @__PURE__ */ n("img", { src: N, alt: "ifdot", className: K.ifdotIcon })
   ] });
-}, Ht = 34.5, t1 = 33, at = y.NAVY, ee = (t) => {
+}, Ht = 34.5, t1 = 33, at = b.NAVY, ee = (t) => {
   const {
     items: e,
-    pathId: o,
-    onAddStep: i,
+    pathId: i,
+    onAddStep: o,
     onAddTrigger: s,
     onAddCondition: l,
     onAddLoop: a,
@@ -1121,23 +1121,23 @@ const ht = (t) => {
     onUpdateFilter: c,
     onSelectStep: r,
     onResize: u,
-    onCheckScenario: I
-  } = t, w = F(null), b = F([]), [_, g] = D([]);
+    onCheckScenario: w
+  } = t, y = F(null), N = F([]), [_, g] = D([]);
   st(() => {
     const h = () => {
-      const N = w.current;
-      if (!N || e.length === 0) {
+      const L = y.current;
+      if (!L || e.length === 0) {
         g([]);
         return;
       }
       const d = [], x = Number.parseFloat(
-        getComputedStyle(N).zoom || "1"
+        getComputedStyle(L).zoom || "1"
       );
       for (let E = 0; E < e.length; E++) {
-        const T = b.current[E];
+        const T = N.current[E];
         if (T)
           if (T.offsetParent == null) {
-            const O = N.getBoundingClientRect(), j = T.getBoundingClientRect();
+            const O = L.getBoundingClientRect(), j = T.getBoundingClientRect();
             d.push((j.top - O.top) / x + Ht);
           } else
             d.push(T.offsetTop - t1 + Ht);
@@ -1145,27 +1145,27 @@ const ht = (t) => {
       d.length === e.length && g(d);
     };
     h();
-    const L = new ResizeObserver(h), m = w.current;
-    return m && L.observe(m), window.addEventListener("resize", h), () => {
-      L.disconnect(), window.removeEventListener("resize", 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, L) => L).filter((h) => h > 0).map((h) => {
-    const L = _[h];
-    return L === void 0 ? null : /* @__PURE__ */ n(Lt, { width: 100, height: L, strokeColor: at }, h);
+  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: () => o != null && p?.(o),
-        onSelect: o != null && r ? () => r(o) : void 0
+        onDelete: () => i != null && p?.(i),
+        onSelect: i != null && r ? () => r(i) : void 0
       }
     ),
     /* @__PURE__ */ C(
       "div",
       {
-        ref: w,
+        ref: y,
         className: V.column,
         style: { marginTop: "33px" },
         children: [
@@ -1186,15 +1186,15 @@ const ht = (t) => {
         ]
       }
     ),
-    /* @__PURE__ */ n("div", { className: V.column, children: e.map((h, L) => {
+    /* @__PURE__ */ n("div", { className: V.column, children: e.map((h, S) => {
       let m;
       if (h.paths)
         m = /* @__PURE__ */ n(
           ee,
           {
             items: h.paths,
-            pathId: o,
-            onAddStep: i,
+            pathId: i,
+            onAddStep: o,
             onAddTrigger: s,
             onAddCondition: l,
             onAddLoop: a,
@@ -1202,18 +1202,18 @@ const ht = (t) => {
             onUpdateFilter: c,
             onSelectStep: r,
             onResize: u,
-            onCheckScenario: I
+            onCheckScenario: w
           },
-          h.localId
+          h.id
         );
       else if (h.steps) {
-        const N = h;
+        const L = h;
         m = /* @__PURE__ */ C("div", { className: V.stepsContainer, children: [
           /* @__PURE__ */ n(
-            bt,
+            Nt,
             {
-              expression: N.condition,
-              status: N.status,
+              expression: L.condition,
+              status: L.status,
               style: { marginTop: "25px" }
             }
           ),
@@ -1221,10 +1221,10 @@ const ht = (t) => {
             Pt,
             {
               steps: h.steps,
-              pathId: h.localId,
+              pathId: h.id,
               onSelectStep: r ?? (() => {
               }),
-              onAddStep: i ?? (() => {
+              onAddStep: o ?? (() => {
               }),
               onAddTrigger: s,
               onAddCondition: l ?? (() => {
@@ -1233,16 +1233,16 @@ const ht = (t) => {
               onDeleteStep: p,
               onUpdateFilter: c,
               onResize: u,
-              onCheckScenario: I
+              onCheckScenario: w
             },
-            h.localId
+            h.id
           )
         ] });
       } else
         m = /* @__PURE__ */ n(
           ht,
           {
-            localId: h.localId,
+            id: h.id,
             title: "title" in h ? h.title : "",
             idx: 1,
             icon: "icon" in h ? h.icon : void 0,
@@ -1250,20 +1250,20 @@ const ht = (t) => {
             onSelectStep: r,
             onDeleteStep: p,
             onUpdateFilter: c,
-            onCheckScenario: I
+            onCheckScenario: w
           },
-          h.localId
+          h.id
         );
       return /* @__PURE__ */ n(
         "div",
         {
-          ref: (N) => {
-            b.current[L] = N;
+          ref: (L) => {
+            N.current[S] = L;
           },
           style: { width: "100%" },
           children: m
         },
-        h.localId
+        h.id
       );
     }) }),
     /* @__PURE__ */ C("div", { className: V.column, style: { marginTop: "33px" }, children: [
@@ -1284,15 +1284,15 @@ const ht = (t) => {
       f
     ] }),
     /* @__PURE__ */ n(
-      ot,
+      it,
       {
-        onAddStep: i,
+        onAddStep: o,
         onAddTrigger: s,
         onAddCondition: l,
         onAddLoop: a,
         lineColor: at,
-        stepId: o,
-        pathId: o,
+        stepId: i,
+        pathId: i,
         index: 1,
         style: {
           marginTop: "34px",
@@ -1313,11 +1313,11 @@ const ht = (t) => {
       }
     )
   ] });
-}, St = 68, q = y.NAVY, Pt = ({
+}, It = 68, q = b.NAVY, Pt = ({
   pathId: t,
   steps: e,
-  centerY: o,
-  className: i,
+  centerY: i,
+  className: o,
   onAddStep: s,
   onDeleteStep: l,
   onUpdateFilter: a,
@@ -1325,11 +1325,11 @@ const ht = (t) => {
   onAddCondition: c,
   onAddLoop: r,
   onSelectStep: u,
-  onResize: I,
-  onCheckScenario: w,
-  isDescendent: b = !0
+  onResize: w,
+  onCheckScenario: y,
+  isDescendent: N = !0
 }) => {
-  const _ = o === void 0 ? void 0 : { marginTop: Math.max(0, o - St / 2) };
+  const _ = i === void 0 ? void 0 : { marginTop: Math.max(0, i - It / 2) };
   return e.length === 0 ? /* @__PURE__ */ C(
     "div",
     {
@@ -1358,7 +1358,7 @@ const ht = (t) => {
           }
         ),
         /* @__PURE__ */ n(
-          ot,
+          it,
           {
             onAddStep: () => {
               s?.(void 0, t);
@@ -1394,7 +1394,7 @@ const ht = (t) => {
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: rt.steps + (i ? " " + i : ""),
+      className: rt.steps + (o ? " " + o : ""),
       style: _,
       children: /* @__PURE__ */ C(
         "div",
@@ -1409,16 +1409,16 @@ const ht = (t) => {
           },
           children: [
             /* @__PURE__ */ n(
-              ot,
+              it,
               {
                 onAddStep: () => {
-                  s?.(e[0].localId, t, "prepend");
+                  s?.(e[0].id, t, "prepend");
                 },
                 onAddTrigger: p,
                 onAddCondition: c,
                 onAddLoop: r,
                 lineColor: q,
-                stepId: e[0].localId,
+                stepId: e[0].id,
                 pathId: t,
                 index: 0,
                 style: {
@@ -1427,13 +1427,13 @@ const ht = (t) => {
               }
             ),
             e.map((g, f) => {
-              const h = !!g.paths, L = "condition" in g && typeof g.condition == "string";
+              const h = !!g.paths, S = "condition" in g && typeof g.condition == "string";
               let m;
               return h && g.paths ? m = /* @__PURE__ */ n(
                 ee,
                 {
                   items: g.paths,
-                  pathId: g.localId,
+                  pathId: g.id,
                   onAddStep: s,
                   onAddCondition: c,
                   onAddLoop: r,
@@ -1441,11 +1441,11 @@ const ht = (t) => {
                   onAddTrigger: p,
                   onSelectStep: u,
                   onUpdateFilter: a,
-                  onResize: I,
-                  onCheckScenario: w
+                  onResize: w,
+                  onCheckScenario: y
                 },
                 g.title
-              ) : L ? m = /* @__PURE__ */ C(tt, { children: [
+              ) : S ? m = /* @__PURE__ */ C(tt, { children: [
                 /* @__PURE__ */ n(
                   C1,
                   {
@@ -1457,20 +1457,20 @@ const ht = (t) => {
                     onDeleteStep: l,
                     onUpdateFilter: a,
                     onSelectStep: u,
-                    onResize: I,
-                    onCheckScenario: w
+                    onResize: w,
+                    onCheckScenario: y
                   },
-                  g.localId
+                  g.id
                 ),
                 /* @__PURE__ */ n(
-                  ot,
+                  it,
                   {
                     onAddStep: s,
                     onAddTrigger: p,
                     onAddCondition: c,
                     onAddLoop: r,
                     lineColor: q,
-                    stepId: g.localId,
+                    stepId: g.id,
                     pathId: t,
                     index: f + 1,
                     style: { marginTop: "34px", height: 0 }
@@ -1480,7 +1480,7 @@ const ht = (t) => {
                 /* @__PURE__ */ n(
                   ht,
                   {
-                    localId: g.localId,
+                    id: g.id,
                     title: g.title,
                     idx: 1,
                     icon: g.icon,
@@ -1491,19 +1491,19 @@ const ht = (t) => {
                     onSelectStep: u,
                     onDeleteStep: l,
                     onUpdateFilter: a,
-                    onCheckScenario: w
+                    onCheckScenario: y
                   },
                   g.title
                 ),
                 /* @__PURE__ */ n(
-                  ot,
+                  it,
                   {
                     onAddStep: s,
                     onAddTrigger: p,
                     onAddCondition: c,
                     onAddLoop: r,
                     lineColor: q,
-                    stepId: g.localId,
+                    stepId: g.id,
                     pathId: t,
                     index: f + 1
                   }
@@ -1511,13 +1511,13 @@ const ht = (t) => {
               ] }), /* @__PURE__ */ n(
                 "div",
                 {
-                  className: rt.stepContainer + (h || L ? " " + rt.stepContainerWithPaths : ""),
+                  className: rt.stepContainer + (h || S ? " " + rt.stepContainerWithPaths : ""),
                   children: m
                 },
-                g.localId
+                g.id
               );
             }),
-            b && /* @__PURE__ */ n(
+            N && /* @__PURE__ */ n(
               "div",
               {
                 style: {
@@ -1560,11 +1560,11 @@ const ht = (t) => {
       )
     ]
   }
-), e1 = "_container_18jhr_1", n1 = "_collapsed_18jhr_16", o1 = "_loopNodeWrapper_18jhr_21", i1 = "_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", S = {
+), 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: o1,
-  loopIconWrapper: i1,
+  loopNodeWrapper: i1,
+  loopIconWrapper: o1,
   loopBox: s1,
   dotsButton: r1,
   label: l1,
@@ -1579,8 +1579,8 @@ const ht = (t) => {
 }, C1 = ({
   value: t,
   onAddStep: e,
-  onAddTrigger: o,
-  onAddCondition: i,
+  onAddTrigger: i,
+  onAddCondition: o,
   onAddLoop: s,
   onDeleteStep: l,
   onUpdateFilter: a,
@@ -1588,12 +1588,12 @@ const ht = (t) => {
   onResize: c,
   onCheckScenario: r
 }) => {
-  const { localId: u, limit: I, steps: w, condition: b } = t, _ = w ?? [], g = () => {
-  }, [f, h] = D(!1), L = F(null), { openMenu: m, closeMenu: N } = Tt(), d = wt(), x = R(
+  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__ */ n(Xt, { color: y.NAVY, size: 18 }),
+        icon: /* @__PURE__ */ n(Xt, { color: b.NAVY, size: 18 }),
         command: (M) => {
           M?.originalEvent?.stopPropagation(), p?.(u);
         },
@@ -1601,7 +1601,7 @@ const ht = (t) => {
       },
       {
         label: "Remove",
-        icon: /* @__PURE__ */ n(xt, { color: y.NAVY, size: 18 }),
+        icon: /* @__PURE__ */ n(xt, { color: b.NAVY, size: 18 }),
         command: (M) => {
           M?.originalEvent?.stopPropagation(), l && l(u);
         },
@@ -1610,19 +1610,19 @@ const ht = (t) => {
     ],
     [p, l, u, d]
   ), E = (M) => {
-    M.stopPropagation(), m(L, M);
+    M.stopPropagation(), m(S, M);
   }, T = () => {
     h((M) => !M), c?.();
-  }, O = S.container + (f ? "" : " " + S.collapsed), j = S.expandable + (f ? "" : " " + S.expandableCollapsed);
+  }, O = I.container + (f ? "" : " " + I.collapsed), j = I.expandable + (f ? "" : " " + I.expandableCollapsed);
   return /* @__PURE__ */ C("div", { className: O, children: [
-    /* @__PURE__ */ C("div", { className: S.loopNodeWrapper, children: [
-      /* @__PURE__ */ C("div", { className: S.loopBox, children: [
-        /* @__PURE__ */ n("div", { onClick: T, className: S.loopIconWrapper, children: /* @__PURE__ */ n(ne, {}) }),
+    /* @__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",
           {
             type: "button",
-            className: S.dotsButton,
+            className: I.dotsButton,
             onClick: E,
             "aria-label": "Open loop menu",
             "aria-haspopup": "menu",
@@ -1630,43 +1630,43 @@ const ht = (t) => {
           }
         ),
         /* @__PURE__ */ n(
-          It,
+          wt,
           {
             model: x,
             popup: !0,
-            ref: L,
-            onHide: () => N(L)
+            ref: S,
+            onHide: () => L(S)
           }
         )
       ] }),
-      /* @__PURE__ */ n("div", { className: S.label, children: "Loop" }),
-      I != null && /* @__PURE__ */ C("div", { className: S.limit, children: [
-        I,
+      /* @__PURE__ */ n("div", { className: I.label, children: "Loop" }),
+      w != null && /* @__PURE__ */ C("div", { className: I.limit, children: [
+        w,
         "x"
       ] })
     ] }),
     /* @__PURE__ */ C("div", { className: j, children: [
-      /* @__PURE__ */ C("div", { className: S.connector, children: [
-        /* @__PURE__ */ n("div", { className: S.line }),
-        /* @__PURE__ */ n("div", { className: S.circleDot, children: /* @__PURE__ */ n("div", { className: S.innerDot }) }),
-        /* @__PURE__ */ n("div", { className: S.line })
+      /* @__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__ */ n(
-        bt,
+        Nt,
         {
-          expression: b ?? "",
+          expression: N ?? "",
           status: t.status,
           style: { marginTop: "25.5px" }
         }
       ),
-      /* @__PURE__ */ n("div", { className: S.stepsWrapper, children: /* @__PURE__ */ n(
+      /* @__PURE__ */ n("div", { className: I.stepsWrapper, children: /* @__PURE__ */ n(
         Pt,
         {
           steps: _,
           pathId: u,
           onAddStep: e ?? g,
-          onAddTrigger: o,
-          onAddCondition: i ?? g,
+          onAddTrigger: i,
+          onAddCondition: o ?? g,
           onAddLoop: s,
           onDeleteStep: l,
           onUpdateFilter: a ?? g,
@@ -1677,13 +1677,13 @@ const ht = (t) => {
       ) })
     ] })
   ] });
-}, m1 = "_container_kielx_1", oe = {
+}, m1 = "_container_kielx_1", ie = {
   container: m1
 }, P1 = ({
   process: t,
   addMultipleTriggers: e,
-  onAddStep: o,
-  onAddTrigger: i,
+  onAddStep: i,
+  onAddTrigger: o,
   onAddCondition: s,
   onAddLoop: l,
   onResize: a,
@@ -1691,10 +1691,10 @@ const ht = (t) => {
   onDeleteStep: c,
   onUpdateFilter: r,
   onSelectStep: u,
-  onCheckScenario: I
+  onCheckScenario: w
 }) => {
-  const [w, b] = D(0);
-  return /* @__PURE__ */ C("div", { className: oe.container, children: [
+  const [y, N] = D(0);
+  return /* @__PURE__ */ C("div", { className: ie.container, children: [
     /* @__PURE__ */ n(
       Qt,
       {
@@ -1703,7 +1703,7 @@ const ht = (t) => {
         onUpdateFilter: r,
         onDeleteTrigger: p,
         onSelectStep: u,
-        onCenterYUpdate: b,
+        onCenterYUpdate: N,
         isEditable: !0
       }
     ),
@@ -1711,9 +1711,9 @@ const ht = (t) => {
       Pt,
       {
         steps: t.steps,
-        centerY: w,
-        onAddStep: o,
-        onAddTrigger: i,
+        centerY: y,
+        onAddStep: i,
+        onAddTrigger: o,
         onAddCondition: s,
         onAddLoop: l,
         onResize: a,
@@ -1722,58 +1722,58 @@ const ht = (t) => {
         onSelectStep: u,
         isDescendent: !1,
         pathId: void 0,
-        onCheckScenario: I
+        onCheckScenario: w
       }
     ) : /* @__PURE__ */ n(
-      ot,
+      it,
       {
-        onAddStep: () => o(),
-        onAddTrigger: i,
+        onAddStep: () => i(),
+        onAddTrigger: o,
         onAddCondition: s,
         onAddLoop: l,
         index: 0,
         style: {
-          height: St,
-          marginTop: Math.max(0, w - St / 2)
+          height: It,
+          marginTop: Math.max(0, y - It / 2)
         }
       }
     )
   ] });
-}, kt = (t, e, o) => {
-  if (e === o) return !1;
-  const i = (r) => {
+}, 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 I = u.steps[u.steps.length - 1];
-        return i(I);
+        const w = u.steps[u.steps.length - 1];
+        return o(w);
       }
-      return u.localId;
+      return u.id;
     }
-    return "steps" in r && r.steps && r.steps.length > 0 ? i(
+    return "steps" in r && r.steps && r.steps.length > 0 ? o(
       r.steps[r.steps.length - 1]
-    ) : r.localId;
-  }, s = (r) => r.steps && r.steps.length > 0 ? i(
+    ) : 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.localId, l = (r, u) => "paths" in r && r.paths && r.paths.length > 0 ? r.paths.some((w) => s(w) === u) : i(r) === u, a = (r) => {
+  ) : 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 I = r[u], w = r[u + 1];
-      if (I.localId === e && w.localId === o || l(I, e) && w.localId === o)
+      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.localId === e && u.steps?.[0]?.localId === o)
+      if (u.id === e && u.steps?.[0]?.id === i)
         return !0;
       if ("paths" in u && u.paths) {
-        for (const I of u.paths)
-          if (p(I)) return !0;
+        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.localId === e && r.steps?.[0]?.localId === o || r.steps && r.steps.length > 0 && a(r.steps))
+    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)
@@ -1781,75 +1781,75 @@ const ht = (t) => {
     }
     return !1;
   }, c = t.steps;
-  return c?.[0] && c[0].localId === e && c[0].steps?.[0]?.localId === o ? !0 : a(c);
-}, ie = (t, e) => {
-  if (t.localId === e) return t.status;
+  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 o of t.steps) {
-      const i = Rt(o, e);
-      if (i !== void 0) return i;
+    for (const i of t.steps) {
+      const o = Rt(i, e);
+      if (o !== void 0) return o;
     }
   if (t.paths)
-    for (const o of t.paths) {
-      const i = ie(o, e);
-      if (i !== void 0) return i;
+    for (const i of t.paths) {
+      const o = oe(i, e);
+      if (o !== void 0) return o;
     }
 }, Rt = (t, e) => {
-  if (t.localId === e) return t.status;
+  if (t.id === e) return t.status;
   if (t.paths)
-    for (const o of t.paths) {
-      const i = ie(o, e);
-      if (i !== void 0) return i;
+    for (const i of t.paths) {
+      const o = oe(i, e);
+      if (o !== void 0) return o;
     }
   if (t.steps)
-    for (const o of t.steps) {
-      const i = Rt(o, e);
-      if (i !== void 0) return i;
+    for (const i of t.steps) {
+      const o = Rt(i, e);
+      if (o !== void 0) return o;
     }
 }, G = (t, e) => {
-  for (const o of t.triggers)
-    if (o.localId === e) return o.status;
-  for (const o of t.steps) {
-    const i = Rt(o, e);
-    if (i !== void 0) return i;
+  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 o = (s) => {
-    if (s.localId === e) return !0;
+  const i = (s) => {
+    if (s.id === e) return !0;
     if (s.steps) {
       for (const l of s.steps)
-        if (i(l)) return !0;
+        if (o(l)) return !0;
     }
     if (s.paths) {
       for (const l of s.paths)
-        if (o(l)) return !0;
+        if (i(l)) return !0;
     }
     return !1;
-  }, i = (s) => {
+  }, o = (s) => {
     if (s.paths) {
       for (const l of s.paths)
-        if (o(l)) return !0;
+        if (i(l)) return !0;
     }
     if (s.steps) {
       for (const l of s.steps)
-        if (i(l)) return !0;
+        if (o(l)) return !0;
     }
     return !1;
   };
   for (const s of t.triggers)
-    if (i(s)) return !0;
+    if (o(s)) return !0;
   for (const s of t.steps)
-    if (i(s)) return !0;
+    if (o(s)) return !0;
   return !1;
-}, vt = (t, e, o) => {
-  if (e === o) return !1;
-  const i = G(t, e), s = G(t, o);
-  return i !== "finished" || s !== "finished" ? !1 : kt(t, e, o);
-}, Ot = (t, e, o) => e === o || !v1(t, e) || G(t, o) !== "finished" ? !1 : kt(t, e, o), it = ({
+}, 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,
-  fromLocalId: o,
-  toLocalId: i
+  fromId: i,
+  toId: o
 }) => {
   const l = pt(t) ? `${W.stepLinkLine} ${W.dashedLine}` : W.stepLinkLine;
   return /* @__PURE__ */ C(
@@ -1873,18 +1873,18 @@ const ht = (t) => {
       ]
     }
   );
-}, 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.localId, 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.localId, _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.localId, se = (t, e, o, i) => {
+}, 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 (i == null)
-    return o != null && G(t, o) === "finished" ? e.statusLine("finished") : s;
-  const l = G(t, i);
+  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 (o == null) {
-    const a = t.steps[0]?.localId;
-    return a !== void 0 && i === a ? e.statusLine("finished") : s;
+  if (i == null) {
+    const a = t.steps[0]?.id;
+    return a !== void 0 && o === a ? e.statusLine("finished") : s;
   }
-  return Ot(t, o, i) || vt(t, o, i) ? e.statusLine("finished") : s;
+  return Ot(t, i, o) || vt(t, i, o) ? e.statusLine("finished") : s;
 }, re = Yt(
   null
 ), _1 = re.Provider, $t = () => {
@@ -1897,29 +1897,29 @@ const ht = (t) => {
 }, Vt = 34.5, x1 = 33, le = (t) => {
   const {
     items: e,
-    pathId: o,
-    previousLocalId: i,
-    nextLocalId: s,
+    pathId: i,
+    previousId: o,
+    nextId: s,
     onSelectStep: l,
     onResize: a,
     onCheckScenario: p
   } = t, { process: c, lineColors: r } = $t(), u = () => {
-  }, I = se(
+  }, w = se(
     c,
     r,
-    i,
+    o,
     s
-  ), w = F(null), b = F([]), [_, g] = D([]);
+  ), y = F(null), N = F([]), [_, g] = D([]);
   st(() => {
     const d = () => {
-      const T = w.current;
+      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 = b.current[M];
+        const v = N.current[M];
         if (v)
           if (v.offsetParent == null) {
             const P = T.getBoundingClientRect(), $ = v.getBoundingClientRect();
@@ -1930,7 +1930,7 @@ const ht = (t) => {
       O.length === e.length && g(O);
     };
     d();
-    const x = new ResizeObserver(d), E = w.current;
+    const x = new ResizeObserver(d), E = y.current;
     return E && x.observe(E), window.addEventListener("resize", d), () => {
       x.disconnect(), window.removeEventListener("resize", d);
     };
@@ -1943,18 +1943,18 @@ const ht = (t) => {
   }, [e]), h = R(() => {
     const d = r.statusLine(void 0);
     return e.length === 0 ? d : dt(e[0]) === "finished" ? r.statusLine("finished") : d;
-  }, [e, r]), L = R(() => _.length !== e.length || e.length <= 1 ? null : e.map((d, x) => x).filter((d) => d > 0).map((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(
-      Lt,
+      St,
       {
         width: 100,
         height: x,
         strokeColor: T,
-        fromLocalId: e[d - 1]?.localId,
-        toLocalId: e[d]?.localId
+        fromId: e[d - 1]?.id,
+        toId: e[d]?.id
       },
       d
     );
@@ -1976,13 +1976,13 @@ const ht = (t) => {
         ) && (T = r.statusLine("finished"));
       }
       return /* @__PURE__ */ n(
-        Lt,
+        St,
         {
           width: 100,
           height: E,
           strokeColor: T,
-          fromLocalId: i,
-          toLocalId: s
+          fromId: o,
+          toId: s
         },
         x
       );
@@ -1993,8 +1993,8 @@ const ht = (t) => {
     r,
     c,
     s,
-    i
-  ]), N = R(() => {
+    o
+  ]), L = R(() => {
     const d = r.statusLine(void 0);
     if (e.length === 0 || s == null || G(c, s) !== "finished") return d;
     const E = _t(
@@ -2015,13 +2015,13 @@ const ht = (t) => {
         enabled: !1,
         debuggerMode: !0,
         status: f,
-        onSelect: o != null && l ? () => l(o) : void 0
+        onSelect: i != null && l ? () => l(i) : void 0
       }
     ),
     /* @__PURE__ */ C(
       "div",
       {
-        ref: w,
+        ref: y,
         className: V.column,
         style: { marginTop: "33px" },
         children: [
@@ -2038,7 +2038,7 @@ const ht = (t) => {
               }
             }
           ),
-          L
+          S
         ]
       }
     ),
@@ -2049,29 +2049,29 @@ const ht = (t) => {
           le,
           {
             items: d.paths,
-            pathId: o,
-            previousLocalId: d.localId,
-            nextLocalId: s,
+            pathId: i,
+            previousId: d.id,
+            nextId: s,
             onSelectStep: l,
             onResize: a,
             onCheckScenario: p
           },
-          d.localId
+          d.id
         );
       else if (d.steps) {
         const T = d, O = T.status === "finished" || s != null && Ot(
           c,
-          T.localId,
+          T.id,
           s
         ) ? "finished" : void 0;
         E = /* @__PURE__ */ C(
           "div",
           {
             className: V.stepsContainer,
-            "data-local-id": void 0,
+            "data-id": void 0,
             children: [
               /* @__PURE__ */ n(
-                bt,
+                Nt,
                 {
                   expression: T.condition,
                   status: O,
@@ -2083,14 +2083,14 @@ const ht = (t) => {
                 Dt,
                 {
                   steps: d.steps,
-                  pathId: d.localId,
-                  previousLocalId: T.localId,
-                  nextLocalId: s,
+                  pathId: d.id,
+                  previousId: T.id,
+                  nextId: s,
                   onSelectStep: l ?? u,
                   onResize: a,
                   onCheckScenario: p
                 },
-                d.localId
+                d.id
               )
             ]
           }
@@ -2099,7 +2099,7 @@ const ht = (t) => {
         E = /* @__PURE__ */ n(
           ht,
           {
-            localId: d.localId,
+            id: d.id,
             title: "title" in d ? d.title : "",
             idx: 1,
             icon: "icon" in d ? d.icon : void 0,
@@ -2109,19 +2109,19 @@ const ht = (t) => {
             onUpdateFilter: u,
             onCheckScenario: p
           },
-          d.localId
+          d.id
         );
       return /* @__PURE__ */ n(
         "div",
         {
           ref: (T) => {
-            b.current[x] = T;
+            N.current[x] = T;
           },
           style: { width: "100%" },
-          "data-local-id": void 0,
+          "data-id": void 0,
           children: E
         },
-        d.localId
+        d.id
       );
     }) }),
     /* @__PURE__ */ C("div", { className: V.column, style: { marginTop: "33px" }, children: [
@@ -2135,18 +2135,18 @@ const ht = (t) => {
             flex: 1,
             width: "100%",
             height: "2px",
-            borderTop: Q(N)
+            borderTop: Q(L)
           }
         }
       ),
       m
     ] }),
     /* @__PURE__ */ n(
-      it,
+      ot,
       {
-        lineColor: I,
-        fromLocalId: i,
-        toLocalId: s,
+        lineColor: w,
+        fromId: o,
+        toId: s,
         style: {
           marginTop: "34px",
           height: 0
@@ -2160,47 +2160,47 @@ const ht = (t) => {
           flex: 1,
           width: "100%",
           height: "2px",
-          borderTop: Q(I),
+          borderTop: Q(w),
           marginTop: "34px"
         }
       }
     )
   ] });
-}, I1 = ({
+}, w1 = ({
   value: t,
-  previousLocalId: e,
-  nextLocalId: o,
-  onSelectStep: i,
+  previousId: e,
+  nextId: i,
+  onSelectStep: o,
   onResize: s,
   onCheckScenario: l
 }) => {
-  const { process: a, lineColors: p } = $t(), { localId: c, limit: r, steps: u, condition: I } = t, w = u ?? [], b = () => {
+  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 = S.container + (_ ? "" : " " + S.collapsed), L = S.expandable + (_ ? "" : " " + S.expandableCollapsed), m = w[0]?.localId, N = m != null ? G(a, m) : void 0, x = e != null && (Ot(
+  }, 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)) && N === "finished" ? p.statusLine("finished") : p.statusLine(void 0);
+  ) || 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-local-id": void 0,
+      "data-id": void 0,
       children: [
-        /* @__PURE__ */ C("div", { className: S.loopNodeWrapper, children: [
-          /* @__PURE__ */ n("div", { className: S.loopBox, children: /* @__PURE__ */ n("div", { onClick: f, className: S.loopIconWrapper, children: /* @__PURE__ */ n(ne, {}) }) }),
-          /* @__PURE__ */ n("div", { className: S.label, children: "Loop" }),
-          r != null && /* @__PURE__ */ C("div", { className: S.limit, 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: L, children: [
+        /* @__PURE__ */ C("div", { className: S, children: [
           /* @__PURE__ */ C(
             "div",
             {
-              className: S.connector,
+              className: I.connector,
               style: {
                 "--iterator-connector-color": x,
                 ...pt(x) && {
@@ -2209,31 +2209,31 @@ const ht = (t) => {
                 }
               },
               children: [
-                /* @__PURE__ */ n("div", { className: S.line }),
-                /* @__PURE__ */ n("div", { className: S.circleDot, children: /* @__PURE__ */ n("div", { className: S.innerDot }) }),
-                /* @__PURE__ */ n("div", { className: S.line })
+                /* @__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(
-            bt,
+            Nt,
             {
-              expression: I ?? "",
+              expression: w ?? "",
               status: t.status,
               debuggerMode: !0,
               style: { marginTop: "25.5px" }
             }
           ),
-          /* @__PURE__ */ n("div", { className: S.stepsWrapper, children: /* @__PURE__ */ n(
+          /* @__PURE__ */ n("div", { className: I.stepsWrapper, children: /* @__PURE__ */ n(
             Dt,
             {
-              steps: w,
+              steps: y,
               pathId: c,
-              previousLocalId: c,
-              nextLocalId: o,
-              onSelectStep: i ?? (() => {
+              previousId: c,
+              nextId: i,
+              onSelectStep: o ?? (() => {
               }),
-              onCheckScenario: l ?? b,
+              onCheckScenario: l ?? N,
               isDescendent: !0
             }
           ) })
@@ -2241,26 +2241,26 @@ const ht = (t) => {
       ]
     }
   );
-}, Et = 68, w1 = (t) => {
+}, Et = 68, y1 = (t) => {
   if (!t || t.length === 0) return;
   const e = qt(
-    t.map((i) => dt(i))
-  ), o = t.find((i) => dt(i) === e) ?? t[t.length - 1];
-  return Mt(o);
+    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: o,
-  className: i,
-  previousLocalId: s,
-  nextLocalId: l,
+  centerY: i,
+  className: o,
+  previousId: s,
+  nextId: l,
   onSelectStep: a,
   onResize: p,
   onCheckScenario: c,
   isDescendent: r = !0
 }) => {
-  const { process: u, lineColors: I } = $t(), w = () => {
-  }, b = o === void 0 ? void 0 : { marginTop: Math.max(0, o - Et / 2) }, _ = (f, h) => se(u, I, f, h), g = (f) => f === e.length - 1 ? l : e[f + 1]?.localId;
+  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(
@@ -2274,7 +2274,7 @@ const ht = (t) => {
           flexDirection: "row",
           flex: 1,
           minWidth: 0,
-          ...b
+          ...N
         },
         children: [
           /* @__PURE__ */ n(
@@ -2292,11 +2292,11 @@ const ht = (t) => {
             }
           ),
           /* @__PURE__ */ n(
-            it,
+            ot,
             {
               lineColor: f,
-              fromLocalId: s,
-              toLocalId: l,
+              fromId: s,
+              toId: l,
               style: {
                 height: "auto",
                 marginTop: "2px"
@@ -2325,8 +2325,8 @@ const ht = (t) => {
     "div",
     {
       "data-path-id": t ?? "",
-      className: rt.steps + (i ? " " + i : ""),
-      style: b,
+      className: rt.steps + (o ? " " + o : ""),
+      style: N,
       children: /* @__PURE__ */ C(
         "div",
         {
@@ -2340,28 +2340,28 @@ const ht = (t) => {
           },
           children: [
             /* @__PURE__ */ n(
-              it,
+              ot,
               {
-                lineColor: _(s, e[0]?.localId),
-                fromLocalId: s,
-                toLocalId: e[0]?.localId,
+                lineColor: _(s, e[0]?.id),
+                fromId: s,
+                toId: e[0]?.id,
                 style: {
                   marginTop: "21.5px"
                 }
               }
             ),
             e.map((f, h) => {
-              const L = !!f.paths, m = "condition" in f && typeof f.condition == "string";
-              let N;
-              if (L && f.paths) {
-                const d = w1(f.paths);
-                N = /* @__PURE__ */ n(
+              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.localId,
-                    previousLocalId: d ?? f.localId,
-                    nextLocalId: g(h),
+                    pathId: f.id,
+                    previousId: d ?? f.id,
+                    nextId: g(h),
                     onSelectStep: a,
                     onResize: p,
                     onCheckScenario: c
@@ -2370,37 +2370,37 @@ const ht = (t) => {
                 );
               } else if (m) {
                 const d = h === 0 ? s : ut(e[h - 1]), x = ut(f);
-                N = /* @__PURE__ */ C(tt, { children: [
+                L = /* @__PURE__ */ C(tt, { children: [
                   /* @__PURE__ */ n(
-                    I1,
+                    w1,
                     {
                       value: f,
-                      previousLocalId: d,
-                      nextLocalId: g(h),
+                      previousId: d,
+                      nextId: g(h),
                       onSelectStep: a,
                       onResize: p,
                       onCheckScenario: c
                     }
                   ),
                   /* @__PURE__ */ n(
-                    it,
+                    ot,
                     {
                       lineColor: _(
                         x,
                         g(h)
                       ),
-                      fromLocalId: f.localId,
-                      toLocalId: g(h),
+                      fromId: f.id,
+                      toId: g(h),
                       style: { marginTop: "34px", height: 0 }
                     }
                   )
                 ] });
               } else
-                N = /* @__PURE__ */ C(tt, { children: [
+                L = /* @__PURE__ */ C(tt, { children: [
                   /* @__PURE__ */ n(
                     ht,
                     {
-                      localId: f.localId,
+                      id: f.id,
                       title: f.title,
                       idx: 1,
                       icon: f.icon,
@@ -2410,30 +2410,30 @@ const ht = (t) => {
                       status: f.status,
                       debuggerMode: !0,
                       onSelectStep: a,
-                      onUpdateFilter: w,
+                      onUpdateFilter: y,
                       onCheckScenario: c
                     },
                     f.title
                   ),
                   /* @__PURE__ */ n(
-                    it,
+                    ot,
                     {
                       lineColor: _(
-                        f.localId,
+                        f.id,
                         g(h)
                       ),
-                      fromLocalId: f.localId,
-                      toLocalId: g(h)
+                      fromId: f.id,
+                      toId: g(h)
                     }
                   )
                 ] });
               return /* @__PURE__ */ n(
                 "div",
                 {
-                  className: rt.stepContainer + (L || m ? " " + rt.stepContainerWithPaths : ""),
-                  children: N
+                  className: rt.stepContainer + (S || m ? " " + rt.stepContainerWithPaths : ""),
+                  children: L
                 },
-                f.localId
+                f.id
               );
             }),
             r && /* @__PURE__ */ n(
@@ -2457,7 +2457,7 @@ const ht = (t) => {
       )
     }
   );
-}, y1 = ({
+}, b1 = ({
   centerY: t,
   neutralLineColor: e
 }) => /* @__PURE__ */ C(
@@ -2486,7 +2486,7 @@ const ht = (t) => {
         }
       ),
       /* @__PURE__ */ n(
-        it,
+        ot,
         {
           lineColor: e,
           style: { height: "auto" }
@@ -2508,20 +2508,20 @@ const ht = (t) => {
 ), k1 = ({
   process: t,
   statusLineColors: e,
-  neutralLineColor: o = y.NAVY,
-  onResize: i,
+  neutralLineColor: i = b.NAVY,
+  onResize: o,
   onSelectStep: s,
   onCheckScenario: l = () => {
   }
 }) => {
   const [a, p] = D(0), c = R(
-    () => mn(e, o),
-    [e, o]
+    () => mn(e, i),
+    [e, i]
   ), r = J(
     (u) => u === "finished" ? c.statusLine("finished") : c.statusLine(void 0),
     [c]
   );
-  return /* @__PURE__ */ n("div", { className: oe.container, children: /* @__PURE__ */ C(_1, { value: { process: t, lineColors: c }, children: [
+  return /* @__PURE__ */ n("div", { className: ie.container, children: /* @__PURE__ */ C(_1, { value: { process: t, lineColors: c }, children: [
     /* @__PURE__ */ n(
       Qt,
       {
@@ -2538,14 +2538,14 @@ const ht = (t) => {
       {
         steps: t.steps,
         centerY: a,
-        onResize: i,
+        onResize: o,
         onSelectStep: s,
         onCheckScenario: l,
         isDescendent: !1,
         pathId: void 0
       }
     ) : /* @__PURE__ */ n(
-      y1,
+      b1,
       {
         centerY: a,
         neutralLineColor: c.statusLine(void 0)
@@ -2553,47 +2553,47 @@ const ht = (t) => {
     )
   ] }) });
 };
-class b1 extends Error {
+class N1 extends Error {
   constructor(e) {
     super(e), this.name = "AddStepError";
   }
 }
-const zt = (t) => "condition" in t && typeof t.condition == "string", ce = (t, e, o, i) => {
-  const s = i === "prepend" ? e : e + 1;
-  return [...t.slice(0, s), o, ...t.slice(s)];
-}, Bt = (t, e, 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].localId === e)
-      return ce(t, s, i, o);
-    const l = t[s], a = l.steps?.length && Bt(l.steps, e, o, i);
+    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(
         (c, r) => r === s ? { ...c, steps: a } : c
       );
-    const p = l.paths?.length && ae(l.paths, e, o, i);
+    const p = l.paths?.length && ae(l.paths, e, i, o);
     if (p)
       return t.map(
         (c, r) => r === s ? { ...c, paths: p } : c
       );
   }
   return null;
-}, N1 = (t, e, o) => {
-  const i = t.steps ?? [], s = e === "prepend" ? [o, ...i] : [...i, o];
+}, L1 = (t, e, i) => {
+  const o = t.steps ?? [], s = e === "prepend" ? [i, ...o] : [...o, i];
   return { ...t, steps: s };
-}, ae = (t, e, o, i) => {
+}, ae = (t, e, i, o) => {
   for (let s = 0; s < t.length; s++) {
     const l = t[s];
-    if (l.localId === e)
+    if (l.id === e)
       return zt(l) ? t.map(
-        (a, p) => p === s ? N1(l, o, i) : a
-      ) : ce(t, s, i, o);
+        (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, o, i);
+      const a = l.steps?.length && Bt(l.steps, e, i, o);
       if (a)
         return t.map(
           (c, r) => r === s ? { ...c, steps: a } : c
         );
-      const p = l.paths?.length && ae(l.paths, e, o, i);
+      const p = l.paths?.length && ae(l.paths, e, i, o);
       if (p)
         return t.map(
           (c, r) => r === s ? { ...c, paths: p } : c
@@ -2601,34 +2601,34 @@ const zt = (t) => "condition" in t && typeof t.condition == "string", ce = (t, e
     }
   }
   return null;
-}, R1 = (t, e, o, i) => {
-  const s = Bt(t.steps, e, o, i);
+}, R1 = (t, e, i, o) => {
+  const s = Bt(t.steps, e, i, o);
   if (s)
     return { ...t, steps: s };
-  throw new b1(`Step or path with id "${e}" not found`);
+  throw new N1(`Step or path with id "${e}" not found`);
 }, de = (t, e) => ({
   ...t,
   ...t.steps != null && { steps: Ft(t.steps, e) },
   ...t.paths != null && {
-    paths: t.paths.map((o) => de(o, e))
+    paths: t.paths.map((i) => de(i, e))
   }
-}), Ft = (t, e) => t.filter((o) => o.localId !== e).map((o) => ({
-  ...o,
-  ...o.steps != null && { steps: Ft(o.steps, e) },
-  ...o.paths != null && {
-    paths: o.paths.map((i) => de(i, e))
+}), 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))
   }
 })), O1 = (t, e) => {
-  const o = Ft(t.steps, e);
+  const i = Ft(t.steps, e);
   return {
     ...t,
-    steps: o
+    steps: i
   };
 };
 export {
-  b1 as AddStepError,
+  N1 as AddStepError,
   C1 as Iterator,
-  It as Menu,
+  wt as Menu,
   T1 as MenuProvider,
   k1 as ProcessDebuggerDiagram,
   P1 as ProcessDiagram,