@notmrabhi/flowforge 0.1.0

package/dist/GatewayBranchEdge-gncIBR-0.js

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