@notmrabhi/flowforge 0.1.53 → 0.1.55

package/dist/GatewayBranchEdge-PsxBbEky.js

@@ -0,0 +1,1538 @@
+import { jsxs as n, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { Handle as N, Position as k, getStraightPath as V, BaseEdge as G } from "reactflow";
+import { Tooltip as B, Chip as q } from "@mui/material";
+import { GrTrigger as ve } from "react-icons/gr";
+import { createContext as we, useContext as Se } from "react";
+import { d as Te } from "./messages-CRZgWFU-.js";
+import { MdOutlineModeEdit as A, MdInfoOutline as F, MdInput as de, MdDeleteOutline as R, MdCheckCircle as Ce, MdPeople as ze, MdArrowForward as Ee, MdSchedule as Ie, MdWebhook as fe, MdNotifications as U, MdSms as Pe, MdEmail as Ae, MdContentCopy as Le, MdHttp as De, MdCallSplit as Re, MdAccountTree as We, MdOpenInNew as $e } from "react-icons/md";
+import { FaCheckCircle as ae, FaTimesCircle as pe } from "react-icons/fa";
+import { FiFilter as Be } from "react-icons/fi";
+import { a as K, H as je, B as Y } from "./canvasTokens-CAD6G24b.js";
+const Fe = we({
+  onEditNode: () => {
+  },
+  onDeleteNode: () => {
+  },
+  onAddStep: () => {
+  },
+  onClickAddTrigger: () => {
+  },
+  messages: Te,
+  nodeRegistry: null,
+  nodeBody: "full"
+}), I = () => Se(Fe), Ke = () => /* @__PURE__ */ n("div", { style: { width: 350, display: "flex", justifyContent: "center" }, children: [
+  /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0, left: "50%" } }),
+  /* @__PURE__ */ e("div", { style: { padding: "8px 28px", borderRadius: 999, background: "#f5f5f5", border: "1.5px solid #bdbdbd", fontSize: 13, fontWeight: 500, color: "#424242", userSelect: "none" }, children: "Start" })
+] }), Me = () => /* @__PURE__ */ n("div", { style: { width: 350, display: "flex", justifyContent: "center" }, children: [
+  /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0, left: "50%" } }),
+  /* @__PURE__ */ e("div", { style: { padding: "8px 28px", borderRadius: 999, background: "#f5f5f5", border: "1.5px solid #bdbdbd", fontSize: 13, fontWeight: 500, color: "#424242", userSelect: "none" }, children: "End" })
+] }), _e = () => {
+  const { onClickAddTrigger: t, messages: l } = I();
+  return /* @__PURE__ */ n("div", { style: { width: 350, display: "flex", justifyContent: "center" }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0, left: "50%" } }),
+    /* @__PURE__ */ e(B, { title: l.addTriggerTooltip, placement: "top", arrow: !0, children: /* @__PURE__ */ n(
+      "div",
+      {
+        onClick: t,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (o) => {
+          o.key === "Enter" && t();
+        },
+        style: { padding: "10px 24px", borderRadius: 8, border: "1.5px dashed #d0d0d0", background: "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 },
+        children: [
+          /* @__PURE__ */ e(ve, { size: 16 }),
+          /* @__PURE__ */ e("span", { className: "ff-text-black", style: { fontSize: 13 }, "data-testid": "add-trigger-btn-text", children: l.addTriggerButton })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0, left: "50%" } })
+  ] });
+}, He = ({ id: t }) => {
+  const { onAddStep: l } = I();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      onClick: () => l(t),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (o) => {
+        o.key === "Enter" && l(t);
+      },
+      style: { width: 28, height: 28, borderRadius: "50%", border: "1.5px solid #9e9e9e", background: "#fff", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", fontSize: 18, color: "#757575", lineHeight: 1, userSelect: "none" },
+      children: [
+        /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+        "+",
+        /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+      ]
+    }
+  );
+};
+function ge(t) {
+  return t ? t.replace(/[_-]+/g, " ").toLowerCase().replace(/\b\w/g, (l) => l.toUpperCase()) : "";
+}
+function Oe(t) {
+  if (typeof t != "string" && t.label) return t.label;
+  const l = typeof t == "string" ? t : t.value ?? "";
+  return ge(l);
+}
+const Ue = ({ data: t }) => {
+  const { onClickAddTrigger: l, messages: o } = I(), {
+    type: d,
+    eventType: f,
+    sources: r,
+    label: g,
+    source: i,
+    previewWorkflow: c,
+    executionStatus: a,
+    infoText: y = "This node decides the flow trigger type and configuration."
+  } = t ?? {}, h = (v) => {
+    v == null || v.stopPropagation(), l();
+  }, m = Array.isArray(r) && r.length > 0, u = !!(g || i), s = d === "scheduler" ? (o == null ? void 0 : o.schedulerTriggerTitle) ?? "Scheduler Trigger" : d === "event" || m || u ? (o == null ? void 0 : o.eventTriggerSourceTitle) ?? "Event Trigger Source" : (o == null ? void 0 : o.selectTriggerTitle) ?? "Select Trigger", b = (() => {
+    if (d === "scheduler")
+      return /* @__PURE__ */ e("span", { children: (o == null ? void 0 : o.schedulerToBeConfigured) ?? "Scheduler to be configured" });
+    if (d === "event" || m) {
+      const v = g || ge(f);
+      return /* @__PURE__ */ n("div", { children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e("span", { style: { fontWeight: 600 }, children: v }),
+          /* @__PURE__ */ e("span", { className: "ff-ms-2 ff-text-muted", style: { fontSize: 12 }, children: "via" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "ff-d-flex ff-flex-wrap ff-mt-2", style: { gap: 4 }, children: m ? r.map((w, P) => /* @__PURE__ */ e(
+          q,
+          {
+            label: Oe(w),
+            variant: "outlined",
+            size: "small",
+            className: "ff-text-dark"
+          },
+          P
+        )) : /* @__PURE__ */ e("span", { className: "ff-text-muted", style: { fontSize: 12 }, children: (o == null ? void 0 : o.noSourceSelected) ?? "No source selected" }) })
+      ] });
+    }
+    return u ? /* @__PURE__ */ n("div", { className: "ff-d-flex ff-flex-wrap ff-align-items-center", style: { gap: 6 }, children: [
+      g && /* @__PURE__ */ e("span", { style: { fontWeight: 600 }, children: g }),
+      i && /* @__PURE__ */ e(q, { label: i, variant: "outlined", size: "small" })
+    ] }) : /* @__PURE__ */ e(
+      "span",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: h,
+        onKeyDown: (v) => {
+          (v.key === "Enter" || v.key === " ") && h(v);
+        },
+        style: { cursor: "pointer", color: "#1e88e5" },
+        children: (o == null ? void 0 : o.selectTriggerCta) ?? "Click to select a trigger to start your workflow"
+      }
+    );
+  })(), C = a ? /* @__PURE__ */ n(j, { children: [
+    a.status === "success" && /* @__PURE__ */ e(ae, { size: 16, color: "#1DBF60", style: { marginRight: 8 } }),
+    a.status === "failed" && /* @__PURE__ */ e(pe, { size: 16, color: "#f44336", style: { marginRight: 8 } })
+  ] }) : /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center", children: [
+    !c && /* @__PURE__ */ e(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: h,
+        onKeyDown: (v) => {
+          (v.key === "Enter" || v.key === " ") && h(v);
+        },
+        className: "ff-me-2",
+        style: { cursor: "pointer", color: "#212121" },
+        "aria-label": "Edit trigger",
+        children: /* @__PURE__ */ e(A, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ e(B, { title: /* @__PURE__ */ e("div", { children: y }), placement: "right", arrow: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(F, { color: "gray", size: 16 }) }) })
+  ] });
+  return /* @__PURE__ */ n("div", { style: { width: 350 }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #a5d6a7", borderRadius: 8, background: "#fff", overflow: "hidden" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "12px 14px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                width: 28,
+                height: 28,
+                borderRadius: 6,
+                background: "rgba(76,175,80,0.1)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ e(de, { size: 16, color: "#388e3c" })
+            }
+          ),
+          /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 500, color: "#212121" }, children: s })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "ff-d-flex ff-align-items-center", children: C })
+      ] }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            background: "#f5f5f5",
+            fontSize: 12,
+            color: "#212121",
+            padding: "14px 16px",
+            margin: "0 10px 12px",
+            borderRadius: 6,
+            textAlign: "left"
+          },
+          children: b
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 }, id: "1" })
+  ] });
+};
+function he(t) {
+  return t ? t.replace(/[_-]+/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()) : "";
+}
+function Ve(t) {
+  if (typeof t != "string" && t.label) return t.label;
+  const l = typeof t == "string" ? t : t.value ?? "";
+  return he(l);
+}
+const Ge = ({ data: t }) => {
+  const {
+    header: l = "Event",
+    title: o,
+    eventType: d,
+    sources: f,
+    executionStatus: r,
+    infoText: g = "This event is raised by the system. It cannot be configured."
+  } = t ?? {}, i = o || he(d) || "—";
+  return /* @__PURE__ */ n("div", { style: { width: 350 }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #a5d6a7", borderRadius: 8, background: "#fff", overflow: "hidden" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "12px 14px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: {
+                width: 28,
+                height: 28,
+                borderRadius: 6,
+                background: "rgba(76,175,80,0.1)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ e(de, { size: 16, color: "#388e3c" })
+            }
+          ),
+          /* @__PURE__ */ e("span", { style: { fontSize: 14, fontWeight: 500, color: "#212121" }, children: l })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center", children: [
+          (r == null ? void 0 : r.status) === "success" && /* @__PURE__ */ e(ae, { size: 16, color: "#1DBF60", style: { marginRight: 8 } }),
+          (r == null ? void 0 : r.status) === "failed" && /* @__PURE__ */ e(pe, { size: 16, color: "#f44336", style: { marginRight: 8 } }),
+          !r && /* @__PURE__ */ e(B, { title: /* @__PURE__ */ e("div", { children: g }), placement: "right", arrow: !0, children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(F, { color: "gray", size: 16 }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            background: "#f5f5f5",
+            fontSize: 13,
+            color: "#212121",
+            padding: "14px 16px",
+            margin: "0 10px 12px",
+            borderRadius: 6,
+            textAlign: "left"
+          },
+          children: [
+            /* @__PURE__ */ e("div", { style: { fontWeight: 600 }, children: i }),
+            Array.isArray(f) && f.length > 0 && /* @__PURE__ */ n(j, { children: [
+              /* @__PURE__ */ e("div", { className: "ff-text-muted", style: { fontSize: 12, marginTop: 4 }, children: "via" }),
+              /* @__PURE__ */ e("div", { className: "ff-d-flex ff-flex-wrap ff-mt-1", style: { gap: 4 }, children: f.map((c, a) => /* @__PURE__ */ e(
+                q,
+                {
+                  label: Ve(c),
+                  variant: "outlined",
+                  size: "small",
+                  className: "ff-text-dark"
+                },
+                a
+              )) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 }, id: "1" })
+  ] });
+}, ye = ({ rail: t, cardWidth: l }) => {
+  const o = l / 2;
+  l / 2 + t.indent;
+  const d = "var(--ff-edge-color, #b0bec5)";
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      width: l + t.indent + 200,
+      height: t.height,
+      style: { position: "absolute", left: 0, top: "100%", pointerEvents: "none", overflow: "visible" },
+      children: [
+        /* @__PURE__ */ e("line", { x1: o, y1: 0, x2: o, y2: t.height, stroke: d, strokeWidth: 1.5 }),
+        t.branches.map((f, r) => {
+          const g = f.y;
+          return /* @__PURE__ */ n("g", { transform: `translate(0, ${g})`, children: [
+            /* @__PURE__ */ e(
+              "rect",
+              {
+                x: o - 5,
+                y: -5,
+                width: 10,
+                height: 10,
+                fill: "#fff",
+                stroke: d,
+                strokeWidth: 1.5,
+                transform: `rotate(45, ${o}, 0)`
+              }
+            ),
+            /* @__PURE__ */ e(
+              "text",
+              {
+                x: o + 14,
+                y: 4,
+                fontSize: 12,
+                fontWeight: 500,
+                fill: "var(--ff-text, #212121)",
+                style: { fontFamily: "sans-serif" },
+                children: f.label
+              }
+            )
+          ] }, r);
+        })
+      ]
+    }
+  );
+}, qe = ({ id: t, data: l }) => {
+  const { onEditNode: o, onDeleteNode: d } = I(), { conditions: f = [], infoText: r = "Filter conditions applied to workflow data", _branchRail: g } = l;
+  return /* @__PURE__ */ n("div", { style: { width: 350, position: "relative" }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #ffe082", borderRadius: 8, background: "#fff" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "10px 6px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e("div", { className: "ff-d-flex ff-align-items-center ff-justify-content-center ff-rounded", style: { width: 25, height: 25, background: "rgba(255,160,0,0.1)" }, children: /* @__PURE__ */ e(Be, { className: "ff-text-warning", size: 16 }) }),
+          /* @__PURE__ */ e("span", { className: "ff-ms-2 ff-fw-medium ff-text-dark", style: { fontSize: 14 }, children: "Filter" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: (i) => {
+                i.stopPropagation(), o(t);
+              },
+              onKeyDown: (i) => {
+                i.key === "Enter" && (i.stopPropagation(), o(t));
+              },
+              children: /* @__PURE__ */ e(A, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "ff-ms-2",
+              role: "button",
+              tabIndex: 0,
+              onClick: (i) => {
+                i.stopPropagation(), d(t);
+              },
+              onKeyDown: (i) => {
+                i.key === "Enter" && (i.stopPropagation(), d(t));
+              },
+              children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(B, { title: r, placement: "right", arrow: !0, children: /* @__PURE__ */ e("div", { className: "ff-ms-2", children: /* @__PURE__ */ e(F, { color: "gray", size: 16 }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { margin: "0 6px 10px", padding: "10px 12px", borderRadius: 6, background: "#fafafa", fontSize: 12 }, children: f.length === 0 ? /* @__PURE__ */ e("span", { className: "ff-text-muted", children: "No conditions configured" }) : f.map((i, c) => /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-mb-1", children: [
+        /* @__PURE__ */ e("p", { className: "ff-m-0 ff-fw-bold ff-me-1 ff-text-truncate", style: { maxWidth: 100 }, title: i.field, children: i.field }),
+        /* @__PURE__ */ e("span", { className: "ff-text-muted", children: i.operator }),
+        /* @__PURE__ */ e("p", { className: "ff-text-dark ff-text-truncate ff-mx-1 ff-m-0", title: i.value, children: i.value }),
+        c < f.length - 1 && /* @__PURE__ */ e("p", { className: "ff-bg-primary ff-text-white ff-fw-bold ff-ms-1 ff-px-1 ff-rounded-1 ff-m-0", children: i.logicalOperator })
+      ] }, c)) })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } }),
+    g && /* @__PURE__ */ e(ye, { rail: g, cardWidth: 350 })
+  ] });
+}, Ze = ({ id: t, data: l }) => {
+  const { onEditNode: o, onDeleteNode: d, nodeRegistry: f, nodeBody: r = "full", messages: g } = I(), { title: i = "Task", descriptorType: c, groupBlocks: a, groups: y, roles: h, groupId: m, roleId: u, infoText: s = "" } = l, b = c ? f == null ? void 0 : f.forType(c) : void 0, C = b == null ? void 0 : b.icon, v = (p) => p == null ? "" : typeof p == "string" ? p : typeof p == "object" && "label" in p ? String(p.label) : String(p), w = (p) => Array.isArray(p) ? p.map(v).filter(Boolean) : p != null && p !== "" ? [v(p)] : [], P = /* @__PURE__ */ new Set([
+    "descriptorType",
+    "title",
+    "header",
+    "icon",
+    "infoText",
+    "label",
+    "conditionConfig",
+    "_conditionConfig"
+  ]), E = b == null ? void 0 : b.formSchema, W = (p) => {
+    if (Array.isArray(E)) {
+      const x = E.find((S) => (S == null ? void 0 : S.id) === p || (S == null ? void 0 : S.name) === p);
+      if (x != null && x.label) return x.label;
+    }
+    return p.replace(/[_-]+/g, " ").replace(/\b\w/g, (x) => x.toUpperCase());
+  }, $ = (p) => {
+    if (Array.isArray(p)) {
+      const x = p.map(
+        (D) => typeof D == "object" && D ? D.label ?? D.name ?? D.value ?? "" : String(D)
+      ).filter(Boolean), S = x.slice(0, 3).join(", ");
+      return x.length > 3 ? `${S} +${x.length - 3}` : S;
+    }
+    if (p && typeof p == "object") {
+      const x = p;
+      return x.label ?? x.name ?? x.value ?? JSON.stringify(p);
+    }
+    return String(p);
+  }, z = Object.entries(l || {}).filter(
+    ([p, x]) => !P.has(p) && x !== "" && x !== null && x !== void 0 && !(Array.isArray(x) && x.length === 0)
+  ), T = (l == null ? void 0 : l.conditionConfig) ?? (l == null ? void 0 : l._conditionConfig), L = T && typeof T == "object" ? Object.entries(T).filter(([, p]) => Array.isArray(p) && p.length > 0).map(([p, x]) => ({
+    path: p,
+    entries: x
+  })) : [], M = (a == null ? void 0 : a.flatMap((p) => p.groups ?? [])) ?? [...w(y), ...w(h), ...w(m), ...w(u)], ue = M.length > 0;
+  return /* @__PURE__ */ n("div", { style: { width: 350 }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #b0bec5", borderRadius: 8, background: "#fff" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "10px 6px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          C && /* @__PURE__ */ e("div", { style: { display: "flex", alignItems: "center" }, children: C }),
+          /* @__PURE__ */ e("span", { className: "ff-text-dark", style: { fontSize: 14, fontWeight: 500 }, children: i })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: (p) => {
+                p.stopPropagation(), o(t);
+              },
+              onKeyDown: (p) => {
+                p.key === "Enter" && (p.stopPropagation(), o(t));
+              },
+              children: /* @__PURE__ */ e(A, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "ff-ms-2",
+              role: "button",
+              tabIndex: 0,
+              onClick: (p) => {
+                p.stopPropagation(), d(t);
+              },
+              onKeyDown: (p) => {
+                p.key === "Enter" && (p.stopPropagation(), d(t));
+              },
+              children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+            }
+          ),
+          s && /* @__PURE__ */ e(B, { title: s, placement: "right", arrow: !0, children: /* @__PURE__ */ e("div", { className: "ff-ms-2", children: /* @__PURE__ */ e(F, { color: "gray", size: 16 }) }) })
+        ] })
+      ] }),
+      r !== "title-only" && /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            margin: "0 8px 8px",
+            padding: 8,
+            borderRadius: 4,
+            background: "#f8f9fa",
+            fontSize: 12,
+            textAlign: "left",
+            color: "#212529",
+            lineHeight: 1.4
+          },
+          children: b != null && b.renderNode ? b.renderNode(l) : z.length > 0 || L.length > 0 ? /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            L.map((p, x) => /* @__PURE__ */ n("div", { children: [
+              /* @__PURE__ */ e("div", { style: { color: "#6c757d" }, children: "When" }),
+              p.entries.slice(0, 3).map((S, D, me) => {
+                const be = S.field || "", xe = S.fieldLabel || W(be), Ne = S.operator || "", Z = S.value == null ? "" : typeof S.value == "object" ? $(S.value) : String(S.value), ke = S.connector || "and";
+                return /* @__PURE__ */ n(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      flexWrap: "wrap",
+                      marginTop: 4
+                    },
+                    children: [
+                      /* @__PURE__ */ e("span", { style: { fontWeight: 700, marginRight: 4, color: "#212529" }, children: xe }),
+                      /* @__PURE__ */ e("span", { style: { color: "#6c757d", marginRight: 4 }, children: Ne }),
+                      /* @__PURE__ */ e("span", { style: { color: "#212529", marginRight: 4 }, title: Z, children: Z }),
+                      D < me.length - 1 && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          style: {
+                            background: "#0d6efd",
+                            color: "#fff",
+                            fontWeight: 700,
+                            marginLeft: 4,
+                            padding: "0 4px",
+                            borderRadius: 2,
+                            textTransform: "uppercase",
+                            fontSize: 10
+                          },
+                          children: ke
+                        }
+                      )
+                    ]
+                  },
+                  D
+                );
+              }),
+              p.entries.length > 3 && /* @__PURE__ */ n("div", { style: { color: "#6c757d", fontSize: 11, marginTop: 2 }, children: [
+                "+",
+                p.entries.length - 3,
+                " more"
+              ] })
+            ] }, `cond-${x}`)),
+            z.length > 0 && /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  marginTop: 4,
+                  color: "#212529",
+                  display: "flex",
+                  justifyContent: "flex-start"
+                },
+                children: (b == null ? void 0 : b.label) || i
+              }
+            ),
+            z.length > 0 && /* @__PURE__ */ n("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginTop: 4 }, children: [
+              z.slice(0, 6).map(([p, x]) => /* @__PURE__ */ e(
+                "span",
+                {
+                  title: `${W(p)}: ${$(x)}`,
+                  style: {
+                    background: "#212529",
+                    color: "#fff",
+                    padding: "4px 8px",
+                    borderRadius: 4,
+                    fontSize: 11
+                  },
+                  children: $(x)
+                },
+                p
+              )),
+              z.length > 6 && /* @__PURE__ */ n("span", { style: { color: "#6c757d", fontSize: 11, alignSelf: "center" }, children: [
+                "+",
+                z.length - 6
+              ] })
+            ] })
+          ] }) : ue ? (
+            // Legacy display fallback: dark badges for old-shape data
+            // (groupBlocks/groups/roles/groupId/roleId on the slot)
+            /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: 4 }, children: M.map((p, x) => /* @__PURE__ */ e(
+              "span",
+              {
+                title: p,
+                style: {
+                  background: "#212529",
+                  color: "#fff",
+                  padding: "4px 8px",
+                  borderRadius: 4,
+                  fontSize: 11
+                },
+                children: p
+              },
+              x
+            )) })
+          ) : /* @__PURE__ */ e("span", { style: { color: "#6c757d" }, children: (g == null ? void 0 : g.clickEditToConfigure) ?? "Click edit to configure" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+  ] });
+}, J = 2;
+function Ye(t, l, o) {
+  const d = (t == null ? void 0 : t.toLowerCase()) || (l ? "sequential" : null);
+  return d ? (o == null ? void 0 : o[d]) ?? d.charAt(0).toUpperCase() + d.slice(1) : null;
+}
+function Je(t) {
+  var r, g;
+  const l = Array.isArray(t.userIds) ? t.userIds.length : 0, o = ((r = t.groupName) == null ? void 0 : r.trim()) ?? "", d = ((g = t.roleName) == null ? void 0 : g.trim()) ?? "", f = l > 0 || !!o || !!d;
+  return o ? { label: `Group: ${o}`, configured: !0 } : d ? { label: `Role: ${d}`, configured: !0 } : l > 0 ? {
+    label: `${l} approver${l !== 1 ? "s" : ""}`,
+    configured: !0
+  } : { label: "Not configured", configured: f };
+}
+const Qe = ({ id: t, data: l }) => {
+  const { onEditNode: o, onDeleteNode: d } = I(), { approvalData: f, isPreview: r = !1, _branchRail: g, executionModeLabel: i } = l, c = (f == null ? void 0 : f.policy) ?? {}, a = c.stages ?? [], y = a.length, h = a.slice(0, J), m = y - J, u = c.name ?? c.policyName ?? "Untitled Policy";
+  return /* @__PURE__ */ n("div", { style: { width: 350, position: "relative" }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #ffe082", borderRadius: 8, background: "#fff", overflow: "hidden" }, children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: "ff-d-flex ff-justify-content-between ff-align-items-center",
+          style: { padding: "10px 8px 8px" },
+          children: [
+            /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "ff-d-flex ff-align-items-center ff-justify-content-center ff-rounded",
+                  style: { width: 25, height: 25, background: "rgba(251,192,45,0.2)" },
+                  children: /* @__PURE__ */ e(Ce, { style: { color: "#FBC02D" }, size: 16 })
+                }
+              ),
+              /* @__PURE__ */ e("span", { className: "ff-fw-medium ff-text-dark", style: { fontSize: 14 }, children: "Approval Policy" })
+            ] }),
+            /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+              !r && /* @__PURE__ */ e(
+                "div",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  style: { cursor: "pointer" },
+                  onClick: (s) => {
+                    s.stopPropagation(), o(t);
+                  },
+                  onKeyDown: (s) => {
+                    s.key === "Enter" && (s.stopPropagation(), o(t));
+                  },
+                  "data-testid": "approval-node-edit-btn",
+                  children: /* @__PURE__ */ e(A, { size: 16, className: "ff-text-secondary" })
+                }
+              ),
+              !r && /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "ff-ms-2",
+                  role: "button",
+                  tabIndex: 0,
+                  style: { cursor: "pointer" },
+                  onClick: (s) => {
+                    s.stopPropagation(), d(t);
+                  },
+                  onKeyDown: (s) => {
+                    s.key === "Enter" && (s.stopPropagation(), d(t));
+                  },
+                  "data-testid": "approval-node-delete-btn",
+                  children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+                }
+              ),
+              /* @__PURE__ */ e(
+                B,
+                {
+                  title: "This approval policy determines who must approve a request before the workflow continues.",
+                  arrow: !0,
+                  placement: "right",
+                  children: /* @__PURE__ */ e("span", { className: "ff-ms-2 ff-d-inline-flex", children: /* @__PURE__ */ e(F, { color: "gray", size: 16 }) })
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "ff-text-truncate ff-text-dark ff-fw-bold",
+          style: { margin: "0 10px 8px", fontSize: 13 },
+          title: u,
+          children: u
+        }
+      ),
+      /* @__PURE__ */ e("div", { style: { margin: "0 10px 10px", display: "flex", flexDirection: "column", gap: 8 }, children: a.length === 0 ? /* @__PURE__ */ e(
+        "div",
+        {
+          className: "ff-text-center",
+          style: {
+            fontSize: 12,
+            color: "#9e9e9e",
+            padding: "14px 0",
+            borderRadius: 6,
+            border: "1px dashed #FEE79A",
+            background: "#FFFDE7"
+          },
+          children: "No stages configured"
+        }
+      ) : /* @__PURE__ */ n(j, { children: [
+        h.map((s, b) => {
+          var E;
+          const C = ((E = s.stageName) == null ? void 0 : E.trim()) || `Stage ${b + 1}`, { label: v, configured: w } = Je(s), P = Ye(
+            s.executionMode,
+            s.isSequential,
+            i
+          );
+          return /* @__PURE__ */ n(
+            "div",
+            {
+              style: { background: "#f5f5f5", borderRadius: 6, padding: 8 },
+              children: [
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: "ff-d-flex ff-align-items-center",
+                    style: { gap: 8 },
+                    children: [
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "ff-d-flex ff-align-items-center ff-justify-content-center ff-flex-shrink-0",
+                          style: {
+                            width: 28,
+                            height: 28,
+                            borderRadius: "50%",
+                            background: "#f5f5f5b6",
+                            border: "1px solid #E0E0E0",
+                            color: "#424242",
+                            fontSize: 12,
+                            fontWeight: 700
+                          },
+                          children: b + 1
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: "ff-text-dark ff-text-truncate",
+                          style: { fontSize: 12, fontWeight: 700, marginRight: "auto" },
+                          children: C
+                        }
+                      ),
+                      /* @__PURE__ */ n(
+                        "div",
+                        {
+                          className: `ff-d-flex ff-align-items-center ff-flex-shrink-0 ${w ? "ff-text-dark" : "ff-text-muted"}`,
+                          style: { gap: 4, fontSize: 12 },
+                          children: [
+                            /* @__PURE__ */ e(
+                              ze,
+                              {
+                                size: 15,
+                                style: { color: w ? "#5D4037" : "#9E9E9E" }
+                              }
+                            ),
+                            v
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ),
+                P && /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: "ff-d-flex ff-align-items-center",
+                    style: {
+                      gap: 4,
+                      fontSize: 11,
+                      color: "#1a73e8",
+                      marginTop: 4,
+                      paddingLeft: 36
+                      // align under the stage name (28px circle + 8px gap)
+                    },
+                    children: [
+                      /* @__PURE__ */ e(Ee, { size: 11 }),
+                      P
+                    ]
+                  }
+                )
+              ]
+            },
+            b
+          );
+        }),
+        m > 0 && // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: "ff-text-primary",
+            style: {
+              fontSize: 12,
+              marginTop: 4,
+              cursor: r ? "default" : "pointer",
+              color: "#1976d2"
+            },
+            role: r ? void 0 : "button",
+            tabIndex: r ? void 0 : 0,
+            onClick: (s) => {
+              r || (s.stopPropagation(), o(t));
+            },
+            onKeyDown: (s) => {
+              r || (s.key === "Enter" || s.key === " ") && (s.stopPropagation(), o(t));
+            },
+            children: [
+              "+ ",
+              m,
+              " More Stage",
+              m > 1 ? "s" : ""
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } }),
+    g && /* @__PURE__ */ e(ye, { rail: g, cardWidth: 350 })
+  ] });
+}, Xe = ({ id: t, data: l }) => {
+  const { onEditNode: o, onDeleteNode: d } = I(), { duration: f, unit: r } = l, g = f != null && r, i = g ? `Wait ${f} ${r}` : "Not configured";
+  return /* @__PURE__ */ n("div", { style: { width: 350 }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #b0bec5", borderRadius: 8, background: "#fff" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center ff-mx-2 ff-mt-2 ff-mb-1", children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e("div", { className: "ff-d-flex ff-align-items-center ff-justify-content-center ff-rounded", style: { width: 25, height: 25, background: "rgba(33,150,243,0.1)" }, children: /* @__PURE__ */ e(Ie, { size: 16, color: "#1976d2" }) }),
+          /* @__PURE__ */ e("span", { className: "ff-fw-medium ff-text-dark", style: { fontSize: 14 }, children: "Delay" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: (c) => {
+                c.stopPropagation(), o(t);
+              },
+              onKeyDown: (c) => {
+                c.key === "Enter" && (c.stopPropagation(), o(t));
+              },
+              children: /* @__PURE__ */ e(A, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "ff-ms-2",
+              role: "button",
+              tabIndex: 0,
+              onClick: (c) => {
+                c.stopPropagation(), d(t);
+              },
+              onKeyDown: (c) => {
+                c.key === "Enter" && (c.stopPropagation(), d(t));
+              },
+              children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "ff-mx-2 ff-mb-2 ff-p-2 ff-rounded", style: { background: "#fafafa", fontSize: 12 }, children: /* @__PURE__ */ e("span", { className: g ? "ff-text-dark ff-fw-medium" : "ff-text-muted", children: i }) })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+  ] });
+}, Q = {
+  email: { label: "Email", bg: "#e3f2fd", color: "#1565c0", iconType: Ae },
+  slack: { label: "Slack", bg: "#e8f5e9", color: "#2e7d32", iconType: U },
+  teams: { label: "MS Teams", bg: "#ede7f6", color: "#4527a0", iconType: U },
+  sms: { label: "SMS", bg: "#fce4ec", color: "#880e4f", iconType: Pe },
+  "in-app": { label: "In-App", bg: "#fff3e0", color: "#e65100", iconType: U },
+  webhook: { label: "Webhook", bg: "#f3e5f5", color: "#6a1b9a", iconType: fe }
+}, et = {
+  label: "Notification",
+  bg: "rgba(156,39,176,0.1)",
+  color: "#7b1fa2",
+  iconType: U
+};
+function tt(t) {
+  var l;
+  switch (t.channel) {
+    case "email":
+      return ((l = t.emailTo) == null ? void 0 : l.join(", ")) ?? t.recipient ?? null;
+    case "slack":
+      return t.slackChannel ?? null;
+    case "teams":
+      return t.teamsMessage ? "Message configured" : null;
+    case "sms":
+      return t.smsTo ?? null;
+    case "in-app":
+      return t.inAppRecipient ?? null;
+    case "webhook":
+      return t.webhookUrl ?? null;
+    default:
+      return t.recipient ?? null;
+  }
+}
+function nt(t) {
+  switch (t.channel) {
+    case "email":
+      return t.emailSubject ?? t.subject ?? null;
+    case "slack": {
+      const l = t.slackMessage;
+      return l ? l.length > 60 ? `${l.slice(0, 60)}…` : l : null;
+    }
+    case "in-app":
+      return t.inAppTitle ?? null;
+    default:
+      return t.subject ?? null;
+  }
+}
+const it = ({ id: t, data: l }) => {
+  const { onEditNode: o, onDeleteNode: d } = I(), f = l, r = f.channel && Q[f.channel] ? Q[f.channel] : et, g = tt(f), i = nt(f), c = !!(f.channel && g), a = r.iconType;
+  return /* @__PURE__ */ n("div", { style: { width: K }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #b0bec5", borderRadius: 8, background: "#fff" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "10px 6px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e("div", { className: "ff-d-flex ff-align-items-center ff-justify-content-center ff-rounded", style: { width: 25, height: 25, background: r.bg }, children: /* @__PURE__ */ e(a, { size: 16, color: r.color }) }),
+          /* @__PURE__ */ e("span", { className: "ff-fw-medium ff-text-dark", style: { fontSize: 14 }, children: f.channel ? `${r.label} Notification` : "Notification" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: (y) => {
+                y.stopPropagation(), o(t);
+              },
+              onKeyDown: (y) => {
+                (y.key === "Enter" || y.key === " ") && (y.stopPropagation(), o(t));
+              },
+              children: /* @__PURE__ */ e(A, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "ff-ms-2",
+              role: "button",
+              tabIndex: 0,
+              onClick: (y) => {
+                y.stopPropagation(), d(t);
+              },
+              onKeyDown: (y) => {
+                (y.key === "Enter" || y.key === " ") && (y.stopPropagation(), d(t));
+              },
+              children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { margin: "0 6px 10px", padding: "10px 12px", borderRadius: 6, background: "#fafafa", fontSize: 12 }, children: c ? /* @__PURE__ */ n("div", { className: "ff-d-flex ff-flex-column ff-gap-1", children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e("span", { className: "ff-px-2 ff-py-1 ff-rounded", style: { fontSize: 10, background: r.bg, color: r.color, fontWeight: 600, flexShrink: 0 }, children: r.label }),
+          /* @__PURE__ */ e("span", { className: "ff-text-dark ff-text-truncate", style: { maxWidth: 220 }, children: g })
+        ] }),
+        i && /* @__PURE__ */ e("span", { className: "ff-text-muted ff-text-truncate", style: { maxWidth: 280 }, children: i })
+      ] }) : /* @__PURE__ */ e("span", { className: "ff-text-muted", children: "Not configured" }) })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+  ] });
+}, X = {
+  "api-key": "API Key",
+  hmac: "HMAC"
+}, ot = ({ data: t }) => {
+  const { onClickAddTrigger: l } = I(), { label: o = "Webhook Trigger", endpointUrl: d, authMethod: f, source: r } = t, g = (c) => {
+    c.stopPropagation(), l();
+  }, i = (c) => {
+    c.stopPropagation(), d && navigator.clipboard.writeText(d).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ n("div", { style: { width: K }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #90caf9", borderRadius: 8, background: "#fff", overflow: "hidden" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "10px 6px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e("div", { style: { width: 28, height: 28, borderRadius: 6, background: "rgba(33,150,243,0.1)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ e(fe, { size: 16, color: "#1565c0" }) }),
+          /* @__PURE__ */ e("span", { style: { fontSize: 13, fontWeight: 600, color: "#212121" }, children: "Webhook Trigger" })
+        ] }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: g,
+            onKeyDown: (c) => {
+              (c.key === "Enter" || c.key === " ") && g(c);
+            },
+            className: "ff-d-flex ff-align-items-center",
+            style: { paddingRight: 4, cursor: "pointer" },
+            children: /* @__PURE__ */ e(A, { size: 16, color: "#555" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n("div", { style: { margin: "0 6px 10px", padding: "10px 12px", borderRadius: 6, background: "#e3f2fd", border: "1px solid #90caf9" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-flex-wrap ff-gap-2 ff-mb-1", children: [
+          /* @__PURE__ */ e("span", { style: { fontSize: 12, color: "#1565c0", fontWeight: 600 }, children: o }),
+          r && /* @__PURE__ */ e("span", { className: "ff-px-2 ff-py-1 ff-rounded", style: { fontSize: 11, background: "#fff", border: "1px solid #90caf9", color: "#1565c0" }, children: r }),
+          f && f !== "none" && X[f] && /* @__PURE__ */ e("span", { className: "ff-px-2 ff-py-1 ff-rounded", style: { fontSize: 10, background: "#1565c0", color: "#fff", fontWeight: 600 }, children: X[f] })
+        ] }),
+        d && /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-1", style: { marginTop: 4 }, children: [
+          /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "#1565c0", fontFamily: "monospace", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: d }),
+          /* @__PURE__ */ e(B, { title: "Copy URL", placement: "top", arrow: !0, children: /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: i,
+              onKeyDown: (c) => {
+                (c.key === "Enter" || c.key === " ") && i(c);
+              },
+              style: { cursor: "pointer", flexShrink: 0 },
+              children: /* @__PURE__ */ e(Le, { size: 12, color: "#1565c0" })
+            }
+          ) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+  ] });
+}, lt = ({ id: t, data: l }) => {
+  var m;
+  const { onEditNode: o, onDeleteNode: d, nodeRegistry: f } = I(), { method: r, url: g, descriptorType: i } = l, c = i ? (m = f == null ? void 0 : f.forType(i)) == null ? void 0 : m.icon : /* @__PURE__ */ e(De, { size: 16, color: "#546e7a" }), a = !!(r && g), y = (r == null ? void 0 : r.toUpperCase()) ?? "", h = je[y] ?? null;
+  return /* @__PURE__ */ n("div", { style: { width: K }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #b0bec5", borderRadius: 8, background: "#fff" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "10px 6px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e("div", { style: { width: 25, height: 25, display: "flex", alignItems: "center", justifyContent: "center" }, children: c }),
+          /* @__PURE__ */ e("span", { className: "ff-fw-medium ff-text-dark", style: { fontSize: 14 }, children: "REST API Call" })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: (u) => {
+                u.stopPropagation(), o(t);
+              },
+              onKeyDown: (u) => {
+                (u.key === "Enter" || u.key === " ") && (u.stopPropagation(), o(t));
+              },
+              children: /* @__PURE__ */ e(A, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "ff-ms-2",
+              role: "button",
+              tabIndex: 0,
+              onClick: (u) => {
+                u.stopPropagation(), d(t);
+              },
+              onKeyDown: (u) => {
+                (u.key === "Enter" || u.key === " ") && (u.stopPropagation(), d(t));
+              },
+              children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { margin: "0 6px 10px", padding: "10px 12px", borderRadius: 6, background: "#fafafa", fontSize: 12 }, children: a ? /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+        h && /* @__PURE__ */ e("span", { style: { fontSize: 10, fontWeight: 700, padding: "2px 6px", borderRadius: 4, background: h.bg, color: h.color, flexShrink: 0 }, children: y }),
+        /* @__PURE__ */ e("span", { className: "ff-text-dark ff-text-truncate", style: { fontFamily: "monospace", fontSize: 11 }, title: g, children: g })
+      ] }) : /* @__PURE__ */ e("span", { className: "ff-text-muted", children: "Not configured" }) })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+  ] });
+}, rt = {
+  eq: "=",
+  neq: "≠",
+  gt: ">",
+  gte: "≥",
+  lt: "<",
+  lte: "≤",
+  contains: "contains",
+  startsWith: "starts with",
+  endsWith: "ends with",
+  isEmpty: "is empty",
+  isNotEmpty: "is not empty"
+}, st = ({ id: t, data: l }) => {
+  const { onEditNode: o, onDeleteNode: d } = I(), { title: f = "Condition Branch", branchConfigs: r = [], defaultBranch: g } = l, i = r.length > 0;
+  return /* @__PURE__ */ n("div", { style: { width: K }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #b39ddb", borderRadius: 8, background: "#fff" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "10px 6px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e("div", { style: { width: 25, height: 25, borderRadius: 6, background: "rgba(103,58,183,0.1)", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ e(Re, { size: 16, color: "#512da8" }) }),
+          /* @__PURE__ */ e("span", { className: "ff-fw-medium ff-text-dark", style: { fontSize: 14 }, children: f })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: (c) => {
+                c.stopPropagation(), o(t);
+              },
+              onKeyDown: (c) => {
+                (c.key === "Enter" || c.key === " ") && (c.stopPropagation(), o(t));
+              },
+              children: /* @__PURE__ */ e(A, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "ff-ms-2",
+              role: "button",
+              tabIndex: 0,
+              onClick: (c) => {
+                c.stopPropagation(), d(t);
+              },
+              onKeyDown: (c) => {
+                (c.key === "Enter" || c.key === " ") && (c.stopPropagation(), d(t));
+              },
+              children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { margin: "0 6px 10px", padding: "10px 12px", borderRadius: 6, background: "#fafafa", fontSize: 12 }, children: i ? /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        r.map((c, a) => {
+          var u, s;
+          const y = Y[a % Y.length], h = (u = c.conditions) == null ? void 0 : u[0], m = (((s = c.conditions) == null ? void 0 : s.length) ?? 0) - 1;
+          return /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ e("span", { style: { fontSize: 10, fontWeight: 600, padding: "2px 7px", borderRadius: 10, background: y.bg, color: y.color, flexShrink: 0 }, children: c.label || c.key }),
+            h ? /* @__PURE__ */ n("span", { style: { fontSize: 11, color: "#616161", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+              h.field,
+              " ",
+              rt[h.operator] ?? h.operator,
+              h.value ? ` ${h.value}` : "",
+              m > 0 ? ` +${m} more` : ""
+            ] }) : /* @__PURE__ */ e("span", { style: { fontSize: 11, color: "#9e9e9e" }, children: "No conditions yet" })
+          ] }, c.key);
+        }),
+        g && /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: 6, marginTop: 2 }, children: [
+          /* @__PURE__ */ e("span", { style: { fontSize: 10, fontWeight: 600, padding: "2px 7px", borderRadius: 10, background: "#f5f5f5", color: "#757575", flexShrink: 0 }, children: "Default" }),
+          /* @__PURE__ */ e("span", { style: { fontSize: 11, color: "#9e9e9e" }, children: "fallback path" })
+        ] })
+      ] }) : /* @__PURE__ */ e("span", { className: "ff-text-muted", children: "Not configured — click edit to add branches" }) })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+  ] });
+}, ct = ({ id: t, data: l }) => {
+  var u;
+  const { onEditNode: o, onDeleteNode: d, nodeRegistry: f } = I(), { title: r = "Sub-Workflow", workflowId: g, workflowLabel: i, descriptorType: c, onPreview: a } = l, y = c ? (u = f == null ? void 0 : f.forType(c)) == null ? void 0 : u.icon : /* @__PURE__ */ e(We, { size: 16, color: "#00695c" }), h = !!g, m = (s) => {
+    s.stopPropagation(), g && a && a(g);
+  };
+  return /* @__PURE__ */ n("div", { style: { width: K }, children: [
+    /* @__PURE__ */ e(N, { type: "target", position: k.Top, style: { opacity: 0 } }),
+    /* @__PURE__ */ n("div", { style: { border: "1.5px solid #80cbc4", borderRadius: 8, background: "#fff" }, children: [
+      /* @__PURE__ */ n("div", { className: "ff-d-flex ff-justify-content-between ff-align-items-center", style: { padding: "10px 6px" }, children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-gap-2", children: [
+          /* @__PURE__ */ e("div", { style: { width: 25, height: 25, borderRadius: 6, background: "rgba(0,137,123,0.1)", display: "flex", alignItems: "center", justifyContent: "center" }, children: y }),
+          /* @__PURE__ */ e("span", { className: "ff-fw-medium ff-text-dark", style: { fontSize: 14 }, children: r })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "node-actions ff-d-flex ff-align-items-center", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: (s) => {
+                s.stopPropagation(), o(t);
+              },
+              onKeyDown: (s) => {
+                (s.key === "Enter" || s.key === " ") && (s.stopPropagation(), o(t));
+              },
+              children: /* @__PURE__ */ e(A, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "ff-ms-2",
+              role: "button",
+              tabIndex: 0,
+              onClick: (s) => {
+                s.stopPropagation(), d(t);
+              },
+              onKeyDown: (s) => {
+                (s.key === "Enter" || s.key === " ") && (s.stopPropagation(), d(t));
+              },
+              children: /* @__PURE__ */ e(R, { color: "red", size: 16 })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { style: { margin: "0 6px 10px", padding: "10px 12px", borderRadius: 6, background: h ? "#e0f2f1" : "#fafafa", fontSize: 12, border: h ? "1px solid #b2dfdb" : "none" }, children: h ? /* @__PURE__ */ n("div", { className: "ff-d-flex ff-align-items-center ff-justify-content-between", children: [
+        /* @__PURE__ */ n("div", { className: "ff-d-flex ff-flex-column ff-gap-1", children: [
+          /* @__PURE__ */ e("span", { style: { fontSize: 12, fontWeight: 600, color: "#00695c" }, children: i || g }),
+          /* @__PURE__ */ n("span", { style: { fontSize: 10, color: "#80cbc4", fontFamily: "monospace" }, children: [
+            "ID: ",
+            g
+          ] })
+        ] }),
+        a && /* @__PURE__ */ n(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: m,
+            onKeyDown: (s) => {
+              (s.key === "Enter" || s.key === " ") && m(s);
+            },
+            style: { cursor: "pointer", display: "flex", alignItems: "center", gap: 3, fontSize: 11, color: "#00897b" },
+            children: [
+              /* @__PURE__ */ e($e, { size: 13 }),
+              "Preview"
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ e("span", { className: "ff-text-muted", children: "Not configured — select a workflow" }) })
+    ] }),
+    /* @__PURE__ */ e(N, { type: "source", position: k.Bottom, style: { opacity: 0 } })
+  ] });
+}, wt = {
+  startNode: Ke,
+  endNode: Me,
+  addTriggerNode: _e,
+  addStepNode: He,
+  triggerNode: Ue,
+  eventNode: Ge,
+  filterNode: qe,
+  actionNode: Ze,
+  approvalNode: Qe,
+  delayNode: Xe,
+  notificationNode: it,
+  webhookTriggerNode: ot,
+  restApiNode: lt,
+  conditionBranchNode: st,
+  subWorkflowNode: ct
+}, dt = 11.5, ee = 2, _ = 6, te = 40, ne = 20, ie = 4, St = ({
+  id: t,
+  sourceX: l,
+  sourceY: o,
+  targetX: d,
+  targetY: f,
+  sourcePosition: r,
+  targetPosition: g,
+  source: i,
+  target: c,
+  data: a
+}) => {
+  const [y, h, m] = V({
+    sourceX: l,
+    sourceY: o,
+    targetX: d,
+    targetY: f
+  }), u = a == null ? void 0 : a.label, s = u === "Pass", b = s || u === "Fail", C = l + (d - l) / 3, v = o + (f - o) / 3, w = l + 2 * (d - l) / 3, P = o + 2 * (f - o) / 3, E = a == null ? void 0 : a.onAddStepClick, W = (L) => {
+    if (L.stopPropagation(), typeof E != "function") return;
+    const M = {
+      edgeId: t,
+      nodeId: i,
+      sourceNodeId: i,
+      targetNodeId: c,
+      position: "between",
+      referenceNodeId: i,
+      referenceNodeType: a == null ? void 0 : a.referenceNodeType,
+      stepVisibility: a == null ? void 0 : a.stepVisibility
+    };
+    E(i, M);
+  }, $ = (L) => {
+    (L.key === "Enter" || L.key === " ") && (L.preventDefault(), W(L));
+  }, z = () => /* @__PURE__ */ n(j, { children: [
+    /* @__PURE__ */ n("g", { className: "plus-icon-container", children: [
+      /* @__PURE__ */ e("circle", { r: dt, className: "edge-plus-circle" }),
+      /* @__PURE__ */ e("line", { x1: 0, y1: -_, x2: 0, y2: _, strokeWidth: ee, strokeLinecap: "round", className: "plus-line" }),
+      /* @__PURE__ */ e("line", { x1: -_, y1: 0, x2: _, y2: 0, strokeWidth: ee, strokeLinecap: "round", className: "plus-line" })
+    ] }),
+    /* @__PURE__ */ n("g", { className: "edge-plus-tooltip", transform: "translate(18, 0)", children: [
+      /* @__PURE__ */ e("rect", { x: 0, y: -10, width: 65, height: 20, rx: 4, className: "tooltip-bg" }),
+      /* @__PURE__ */ e("path", { d: "M0 -4 L-4 0 L0 4 Z", className: "tooltip-bg" }),
+      /* @__PURE__ */ e("text", { x: 32, y: 0, textAnchor: "middle", dominantBaseline: "central", fill: "white", style: { fontSize: 10, fontWeight: 600, pointerEvents: "none" }, children: "Add Step" })
+    ] })
+  ] }), T = E ? {
+    onClick: W,
+    onKeyDown: $,
+    role: "button",
+    tabIndex: 0,
+    style: { cursor: "pointer", pointerEvents: "all" }
+  } : {
+    style: { cursor: "default", pointerEvents: "all" }
+  };
+  return /* @__PURE__ */ n("g", { className: "edge-with-plus-wrapper", children: [
+    /* @__PURE__ */ e(G, { id: t, path: y }),
+    b ? /* @__PURE__ */ n(j, { children: [
+      /* @__PURE__ */ n("g", { transform: `translate(${C}, ${v})`, children: [
+        /* @__PURE__ */ e("rect", { x: -te / 2, y: -ne / 2, width: te, height: ne, rx: ie, ry: ie, fill: s ? "#ADE6C5" : "#FDBFBF" }),
+        /* @__PURE__ */ e("text", { textAnchor: "middle", dominantBaseline: "central", fill: s ? "#1DBF60" : "#C50000", style: { fontSize: 12, fontWeight: 500 }, children: u })
+      ] }),
+      /* @__PURE__ */ e("g", { className: "nodrag nopan edge-plus-svg", transform: `translate(${w}, ${P})`, "data-testid": "plus-node-icon", ...T, children: /* @__PURE__ */ e(z, {}) })
+    ] }) : /* @__PURE__ */ e("g", { className: "nodrag nopan edge-plus-svg", transform: `translate(${h}, ${m})`, "data-testid": "plus-node-icon", ...T, children: /* @__PURE__ */ e(z, {}) })
+  ] });
+}, ft = 11.5, oe = 2, H = 6, Tt = ({
+  id: t,
+  sourceX: l,
+  sourceY: o,
+  targetX: d,
+  targetY: f,
+  source: r,
+  target: g,
+  data: i
+}) => {
+  const [c, a, y] = V({
+    sourceX: l,
+    sourceY: o,
+    targetX: d,
+    targetY: f
+  }), h = i == null ? void 0 : i.onAddStepClick, m = (s) => {
+    s.stopPropagation(), typeof h == "function" && h(r, {
+      edgeId: t,
+      nodeId: r,
+      sourceNodeId: r,
+      targetNodeId: g,
+      position: "between",
+      referenceNodeId: r,
+      referenceNodeType: i == null ? void 0 : i.referenceNodeType,
+      stepVisibility: i == null ? void 0 : i.stepVisibility,
+      filterId: i == null ? void 0 : i.filterId,
+      branch: i == null ? void 0 : i.branch
+    });
+  }, u = (s) => {
+    (s.key === "Enter" || s.key === " ") && (s.preventDefault(), m(s));
+  };
+  return /* @__PURE__ */ n("g", { className: "edge-with-plus-wrapper", children: [
+    /* @__PURE__ */ e(G, { id: t, path: c, style: { stroke: "#b0bec5" } }),
+    /* @__PURE__ */ n(
+      "g",
+      {
+        className: "nodrag nopan edge-plus-svg",
+        transform: `translate(${a}, ${y})`,
+        style: {
+          cursor: h ? "pointer" : "default",
+          pointerEvents: "all",
+          outline: "none"
+        },
+        onClick: h ? m : void 0,
+        onKeyDown: h ? u : void 0,
+        role: h ? "button" : void 0,
+        tabIndex: h ? 0 : void 0,
+        "data-testid": "plus-node-icon",
+        children: [
+          /* @__PURE__ */ e("circle", { r: ft, className: "edge-plus-circle" }),
+          /* @__PURE__ */ e(
+            "line",
+            {
+              x1: 0,
+              y1: -H,
+              x2: 0,
+              y2: H,
+              strokeWidth: oe,
+              strokeLinecap: "round",
+              className: "plus-line"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "line",
+            {
+              x1: -H,
+              y1: 0,
+              x2: H,
+              y2: 0,
+              strokeWidth: oe,
+              strokeLinecap: "round",
+              className: "plus-line"
+            }
+          ),
+          /* @__PURE__ */ n("g", { className: "edge-plus-tooltip", transform: "translate(18, 0)", children: [
+            /* @__PURE__ */ e(
+              "rect",
+              {
+                x: 0,
+                y: -10,
+                width: 65,
+                height: 20,
+                rx: 4,
+                className: "tooltip-bg"
+              }
+            ),
+            /* @__PURE__ */ e("path", { d: "M0 -4 L-4 0 L0 4 Z", className: "tooltip-bg" }),
+            /* @__PURE__ */ e(
+              "text",
+              {
+                x: 32,
+                y: 0,
+                textAnchor: "middle",
+                dominantBaseline: "central",
+                fill: "white",
+                style: { fontSize: 10, fontWeight: 600, pointerEvents: "none" },
+                children: "Add Step"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}, Ct = ({ id: t, sourceX: l, sourceY: o, targetX: d, targetY: f }) => {
+  const [r] = V({ sourceX: l, sourceY: o, targetX: d, targetY: f });
+  return /* @__PURE__ */ e(G, { id: t, path: r, style: { stroke: "#b0bec5" } });
+}, at = 11.5, le = 2, O = 6, pt = -24, re = 40, se = 20, ce = 4, zt = ({
+  id: t,
+  sourceX: l,
+  sourceY: o,
+  targetX: d,
+  targetY: f,
+  source: r,
+  target: g,
+  data: i
+}) => {
+  const [c, a, y] = V({ sourceX: l, sourceY: o, targetX: d, targetY: f }), h = i == null ? void 0 : i.label, m = h === "Pass", u = m || h === "Fail", s = i == null ? void 0 : i.onAddStepClick, b = (i == null ? void 0 : i.showPlus) !== !1 && !!s, C = (w) => {
+    w.stopPropagation(), typeof s == "function" && s(r, {
+      edgeId: t,
+      nodeId: r,
+      sourceNodeId: r,
+      targetNodeId: g,
+      position: "between",
+      referenceNodeId: r,
+      referenceNodeType: i == null ? void 0 : i.referenceNodeType,
+      stepVisibility: i == null ? void 0 : i.stepVisibility
+    });
+  }, v = (w) => {
+    (w.key === "Enter" || w.key === " ") && (w.preventDefault(), C(w));
+  };
+  return /* @__PURE__ */ n("g", { className: "edge-with-plus-wrapper", children: [
+    /* @__PURE__ */ e(G, { id: t, path: c, style: { stroke: "#b0bec5" } }),
+    /* @__PURE__ */ n(
+      "g",
+      {
+        className: "nodrag nopan edge-plus-svg",
+        transform: `translate(${a}, ${y})`,
+        style: { cursor: s ? "pointer" : "default", pointerEvents: "all", outline: "none" },
+        onClick: s ? C : void 0,
+        onKeyDown: s ? v : void 0,
+        role: s ? "button" : void 0,
+        tabIndex: s ? 0 : void 0,
+        children: [
+          u && /* @__PURE__ */ n("g", { transform: `translate(0, ${b ? pt : 0})`, children: [
+            /* @__PURE__ */ e(
+              "rect",
+              {
+                x: -re / 2,
+                y: -se / 2,
+                width: re,
+                height: se,
+                rx: ce,
+                ry: ce,
+                fill: m ? "#ADE6C5" : "#FDBFBF"
+              }
+            ),
+            /* @__PURE__ */ e("text", { textAnchor: "middle", dominantBaseline: "central", fill: m ? "#1DBF60" : "#C50000", style: { fontSize: 12, fontWeight: 500 }, children: h })
+          ] }),
+          b && /* @__PURE__ */ n("g", { className: "plus-icon-container", children: [
+            /* @__PURE__ */ e("circle", { r: at, className: "edge-plus-circle" }),
+            /* @__PURE__ */ e("line", { x1: 0, y1: -O, x2: 0, y2: O, strokeWidth: le, strokeLinecap: "round", className: "plus-line" }),
+            /* @__PURE__ */ e("line", { x1: -O, y1: 0, x2: O, y2: 0, strokeWidth: le, strokeLinecap: "round", className: "plus-line" })
+          ] }),
+          b && /* @__PURE__ */ n("g", { className: "edge-plus-tooltip", transform: "translate(22, 0)", children: [
+            /* @__PURE__ */ e("rect", { x: 0, y: -10, width: 65, height: 20, rx: 4, className: "tooltip-bg" }),
+            /* @__PURE__ */ e("path", { d: "M0 -4 L-4 0 L0 4 Z", className: "tooltip-bg" }),
+            /* @__PURE__ */ e("text", { x: 32, y: 0, textAnchor: "middle", dominantBaseline: "central", fill: "white", style: { fontSize: 10, fontWeight: 600, pointerEvents: "none" }, children: "Add Step" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}, Et = ({
+  id: t,
+  source: l,
+  target: o,
+  sourceX: d,
+  sourceY: f,
+  targetX: r,
+  targetY: g,
+  style: i = {},
+  markerEnd: c,
+  data: a
+}) => {
+  const y = (a == null ? void 0 : a.verticalRouting) ?? !1, h = 30, m = y ? (() => {
+    const T = g - h;
+    return `M ${d},${T} L ${r},${T} L ${r},${g}`;
+  })() : (() => {
+    const T = f + 30;
+    return `M ${d},${f} L ${d},${T} L ${r},${T} L ${r},${g}`;
+  })(), u = i.stroke || "#d1d5db", s = a == null ? void 0 : a.label, b = (a == null ? void 0 : a.isFirst) ?? !1, C = a == null ? void 0 : a.onAddStepClick, v = y ? g - h : f + 30, w = d + (r - d) * (y ? 0.25 : 0.35), P = d + (r - d) * (y ? 0.65 : 0.7), E = v, W = (T) => {
+    T.stopPropagation(), C && C(l, {
+      edgeId: t,
+      nodeId: l,
+      sourceNodeId: l,
+      targetNodeId: o,
+      position: "between",
+      referenceNodeId: l,
+      filterId: a == null ? void 0 : a.filterId,
+      branch: a == null ? void 0 : a.branch
+    });
+  }, $ = 11.5, z = 6;
+  return /* @__PURE__ */ n("g", { children: [
+    /* @__PURE__ */ e("path", { id: t, d: m, fill: "none", stroke: u, strokeWidth: 1.5, markerEnd: c }),
+    s && !y && /* @__PURE__ */ e("g", { transform: `translate(${w}, ${E})`, children: (() => {
+      const T = Math.max(44, s.length * 7 + 20);
+      return /* @__PURE__ */ n(j, { children: [
+        /* @__PURE__ */ e(
+          "rect",
+          {
+            x: -T / 2,
+            y: -11,
+            width: T,
+            height: 22,
+            rx: 11,
+            fill: b ? "#e8f5e9" : "#ffebee",
+            stroke: b ? "#81c784" : "#e57373",
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ e(
+          "text",
+          {
+            x: 0,
+            y: 4,
+            textAnchor: "middle",
+            fontSize: 10,
+            fontWeight: 600,
+            fill: b ? "#2e7d32" : "#c62828",
+            style: { fontFamily: "sans-serif", pointerEvents: "none" },
+            children: s
+          }
+        )
+      ] });
+    })() }),
+    C && /* @__PURE__ */ n(
+      "g",
+      {
+        transform: `translate(${P}, ${E})`,
+        onClick: W,
+        style: { cursor: "pointer", pointerEvents: "all" },
+        className: "nodrag nopan edge-plus-svg",
+        children: [
+          /* @__PURE__ */ e("circle", { r: $, className: "edge-plus-circle" }),
+          /* @__PURE__ */ e("line", { x1: 0, y1: -z, x2: 0, y2: z, strokeWidth: 2, strokeLinecap: "round", className: "plus-line" }),
+          /* @__PURE__ */ e("line", { x1: -z, y1: 0, x2: z, y2: 0, strokeWidth: 2, strokeLinecap: "round", className: "plus-line" })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Ze as A,
+  Xe as D,
+  St as E,
+  qe as F,
+  Et as G,
+  zt as L,
+  it as N,
+  Ct as P,
+  lt as R,
+  Ke as S,
+  Ue as T,
+  ot as W,
+  _e as a,
+  Qe as b,
+  Me as c,
+  Tt as d,
+  wt as e,
+  Fe as f
+};
+//# sourceMappingURL=GatewayBranchEdge-PsxBbEky.js.map