@inspirer-dev/crm-dashboard 1.0.21 → 1.0.23

package/dist/_chunks/index-BK8649hk.mjs

@@ -0,0 +1,1405 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect, forwardRef, useRef, useCallback, useMemo } from "react";
+import ReactFlow, { Handle, Position, getBezierPath, BaseEdge, EdgeLabelRenderer, ReactFlowProvider, useNodesState, useEdgesState, addEdge, Background, Controls, MiniMap } from "reactflow";
+import "reactflow/dist/style.css";
+import { Flex, Typography, Badge, Box, SingleSelect, SingleSelectOption, Button, TextInput, NumberInput, IconButton, Loader, Divider, Tooltip, Field } from "@strapi/design-system";
+import { Play, Message, Clock, ArrowRight, Cross, Plus, Trash, Layout } from "@strapi/icons";
+import { useFetchClient } from "@strapi/strapi/admin";
+import dagre from "dagre";
+const NODE_COLORS = {
+  entry: {
+    background: "#eef5eb",
+    border: "#5cb176",
+    text: "#297c3b"
+  },
+  message: {
+    background: "#eef8ff",
+    border: "#0077cc",
+    text: "#0055a4"
+  },
+  wait: {
+    background: "#fffae6",
+    border: "#e9b200",
+    text: "#a16207"
+  },
+  branch: {
+    background: "#f5f0ff",
+    border: "#7b61ff",
+    text: "#5746af"
+  },
+  exit: {
+    background: "#fef1f0",
+    border: "#dc2626",
+    text: "#c03030"
+  }
+};
+const NODE_DIMENSIONS = {
+  width: 220,
+  height: 80
+};
+const STEP_TYPE_LABELS = {
+  entry: "Entry Point",
+  message: "Send Message",
+  wait: "Wait",
+  branch: "Branch",
+  exit: "Exit"
+};
+const CHANNEL_OPTIONS = [
+  { value: "telegram", label: "Telegram" },
+  { value: "email", label: "Email" },
+  { value: "push", label: "Push Notification" },
+  { value: "sms", label: "SMS" }
+];
+const DURATION_UNIT_OPTIONS = [
+  { value: "minutes", label: "Minutes" },
+  { value: "hours", label: "Hours" },
+  { value: "days", label: "Days" }
+];
+const DEFAULT_NODE_DATA = {
+  entry: {
+    name: "Entry",
+    config: {}
+  },
+  message: {
+    name: "Send Message",
+    config: {
+      channel: "telegram",
+      variants: []
+    }
+  },
+  wait: {
+    name: "Wait",
+    config: {
+      duration: 1,
+      durationUnit: "hours"
+    }
+  },
+  branch: {
+    name: "Branch",
+    config: {
+      branchSegment: null
+    }
+  },
+  exit: {
+    name: "Exit",
+    config: {}
+  }
+};
+const ENTRY_NODE_ID = "entry";
+const EntryNode = ({ selected }) => {
+  const colors = NODE_COLORS.entry;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        padding: 3,
+        background: "neutral0",
+        hasRadius: true,
+        style: {
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Play, { style: { color: colors.text, width: 20, height: 20 } }),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { color: colors.text }, children: "Entry Point" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Bottom,
+        style: {
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: "2px solid white"
+        }
+      }
+    )
+  ] });
+};
+const EntryNode$1 = memo(EntryNode);
+const MessageNode = ({ data, selected }) => {
+  const colors = NODE_COLORS.message;
+  const channel = data.config.channel || "telegram";
+  const variantCount = data.config.variants?.length || 0;
+  const channelLabel = CHANNEL_OPTIONS.find((c) => c.value === channel)?.label || channel;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Top,
+        style: {
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: "2px solid white"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        direction: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        padding: 3,
+        background: "neutral0",
+        hasRadius: true,
+        style: {
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(Message, { style: { color: colors.text, width: 18, height: 18 } }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "omega",
+                fontWeight: "semiBold",
+                style: { color: colors.text },
+                ellipsis: true,
+                children: data.name
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+            /* @__PURE__ */ jsx(Badge, { size: "S", backgroundColor: "neutral100", textColor: "neutral700", children: channelLabel }),
+            variantCount > 0 && /* @__PURE__ */ jsxs(Badge, { size: "S", backgroundColor: "primary100", textColor: "primary700", children: [
+              variantCount,
+              " variant",
+              variantCount !== 1 ? "s" : ""
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Bottom,
+        style: {
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: "2px solid white"
+        }
+      }
+    )
+  ] });
+};
+const MessageNode$1 = memo(MessageNode);
+const WaitNode = ({ data, selected }) => {
+  const colors = NODE_COLORS.wait;
+  const duration = data.config.duration || 1;
+  const unit = data.config.durationUnit || "hours";
+  const unitLabel = DURATION_UNIT_OPTIONS.find((u) => u.value === unit)?.label.toLowerCase() || unit;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Top,
+        style: {
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: "2px solid white"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        direction: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        padding: 3,
+        background: "neutral0",
+        hasRadius: true,
+        style: {
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(Clock, { style: { color: colors.text, width: 18, height: 18 } }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "omega",
+                fontWeight: "semiBold",
+                style: { color: colors.text },
+                ellipsis: true,
+                children: data.name
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Badge, { size: "S", backgroundColor: "warning100", textColor: "warning700", children: [
+            duration,
+            " ",
+            unitLabel
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Bottom,
+        style: {
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: "2px solid white"
+        }
+      }
+    )
+  ] });
+};
+const WaitNode$1 = memo(WaitNode);
+const BranchNode = ({ data, selected }) => {
+  const colors = NODE_COLORS.branch;
+  const segmentName = data.config.branchSegment?.name || "No segment";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Top,
+        style: {
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: "2px solid white"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        direction: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 1,
+        padding: 3,
+        background: "neutral0",
+        hasRadius: true,
+        style: {
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+            /* @__PURE__ */ jsx(ArrowRight, { style: { color: colors.text, width: 18, height: 18 } }),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "omega",
+                fontWeight: "semiBold",
+                style: { color: colors.text },
+                ellipsis: true,
+                children: data.name
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              size: "S",
+              backgroundColor: "secondary100",
+              textColor: "secondary700",
+              style: { maxWidth: "90%" },
+              children: /* @__PURE__ */ jsx(Typography, { variant: "pi", ellipsis: true, children: segmentName })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Bottom,
+        id: "yes",
+        style: {
+          background: "#5cb176",
+          width: 10,
+          height: 10,
+          border: "2px solid white",
+          left: "30%"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Bottom,
+        id: "no",
+        style: {
+          background: "#dc2626",
+          width: 10,
+          height: 10,
+          border: "2px solid white",
+          left: "70%"
+        }
+      }
+    )
+  ] });
+};
+const BranchNode$1 = memo(BranchNode);
+const ExitNode = ({ data, selected }) => {
+  const colors = NODE_COLORS.exit;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Top,
+        style: {
+          background: colors.border,
+          width: 10,
+          height: 10,
+          border: "2px solid white"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        padding: 3,
+        background: "neutral0",
+        hasRadius: true,
+        style: {
+          width: NODE_DIMENSIONS.width,
+          height: NODE_DIMENSIONS.height,
+          border: `2px solid ${selected ? colors.border : colors.background}`,
+          backgroundColor: colors.background,
+          boxShadow: selected ? `0 0 0 2px ${colors.border}` : "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Cross, { style: { color: colors.text, width: 18, height: 18 } }),
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "semiBold", style: { color: colors.text }, children: data.name })
+        ]
+      }
+    )
+  ] });
+};
+const ExitNode$1 = memo(ExitNode);
+const nodeTypes = {
+  entry: EntryNode$1,
+  message: MessageNode$1,
+  wait: WaitNode$1,
+  branch: BranchNode$1,
+  exit: ExitNode$1
+};
+const LabeledEdge = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  sourceHandle,
+  style = {},
+  markerEnd
+}) => {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const isYes = sourceHandle === "yes";
+  const isNo = sourceHandle === "no";
+  const label = isYes ? "Yes" : isNo ? "No" : null;
+  const bgColor = isYes ? "#dcfce7" : isNo ? "#fef2f2" : "#fff";
+  const textColor = isYes ? "#15803d" : isNo ? "#dc2626" : "#333";
+  const borderColor = isYes ? "#86efac" : isNo ? "#fca5a5" : "#ddd";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        path: edgePath,
+        markerEnd,
+        style: {
+          ...style,
+          stroke: isYes ? "#5cb176" : isNo ? "#dc2626" : "#b1b1b7",
+          strokeWidth: 2
+        }
+      }
+    ),
+    label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          fontSize: 11,
+          fontWeight: 600,
+          background: bgColor,
+          color: textColor,
+          padding: "2px 8px",
+          borderRadius: 4,
+          border: `1px solid ${borderColor}`,
+          pointerEvents: "all"
+        },
+        className: "nodrag nopan",
+        children: label
+      }
+    ) })
+  ] });
+};
+const edgeTypes = {
+  labeled: LabeledEdge
+};
+const MessageConfig = ({ data, onUpdate, disabled }) => {
+  const [variants, setVariants] = useState(data.config.variants || []);
+  const channel = data.config.channel || "telegram";
+  useEffect(() => {
+    setVariants(data.config.variants || []);
+  }, [data.config.variants]);
+  const handleChannelChange = (value) => {
+    onUpdate({
+      config: {
+        ...data.config,
+        channel: value
+      }
+    });
+  };
+  const handleAddVariant = () => {
+    const newVariant = {
+      name: `Variant ${variants.length + 1}`,
+      template: null,
+      weight: 100
+    };
+    const updated = [...variants, newVariant];
+    setVariants(updated);
+    onUpdate({
+      config: {
+        ...data.config,
+        variants: updated
+      }
+    });
+  };
+  const handleRemoveVariant = (index) => {
+    const updated = variants.filter((_, i) => i !== index);
+    setVariants(updated);
+    onUpdate({
+      config: {
+        ...data.config,
+        variants: updated
+      }
+    });
+  };
+  const handleVariantChange = (index, field, value) => {
+    const updated = variants.map(
+      (v, i) => i === index ? { ...v, [field]: value } : v
+    );
+    setVariants(updated);
+    onUpdate({
+      config: {
+        ...data.config,
+        variants: updated
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Channel" }),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(
+        SingleSelect,
+        {
+          value: channel,
+          onChange: handleChannelChange,
+          disabled,
+          children: CHANNEL_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SingleSelectOption, { value: opt.value, children: opt.label }, opt.value))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Variants (A/B Testing)" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            size: "S",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            onClick: handleAddVariant,
+            disabled,
+            children: "Add Variant"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, paddingTop: 2, children: variants.length === 0 ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          background: "neutral100",
+          hasRadius: true,
+          style: { textAlign: "center" },
+          children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No variants yet. Add a variant to enable A/B testing." })
+        }
+      ) : variants.map((variant, index) => /* @__PURE__ */ jsxs(
+        Box,
+        {
+          padding: 3,
+          background: "neutral100",
+          hasRadius: true,
+          style: { border: "1px solid #dcdce4" },
+          children: [
+            /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "flex-end", children: [
+              /* @__PURE__ */ jsxs(Box, { style: { flex: 1 }, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Name" }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    value: variant.name,
+                    onChange: (e) => handleVariantChange(index, "name", e.target.value),
+                    disabled,
+                    size: "S"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Box, { style: { width: 80 }, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Weight" }),
+                /* @__PURE__ */ jsx(
+                  NumberInput,
+                  {
+                    value: variant.weight,
+                    onValueChange: (value) => handleVariantChange(index, "weight", value || 0),
+                    disabled,
+                    size: "S"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  onClick: () => handleRemoveVariant(index),
+                  label: "Remove variant",
+                  variant: "ghost",
+                  disabled,
+                  children: /* @__PURE__ */ jsx(Trash, {})
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+              "Template: ",
+              variant.template?.name || "Not selected"
+            ] }) })
+          ]
+        },
+        index
+      )) })
+    ] })
+  ] });
+};
+const WaitConfig = ({ data, onUpdate, disabled }) => {
+  const duration = data.config.duration || 1;
+  const durationUnit = data.config.durationUnit || "hours";
+  const handleDurationChange = (value) => {
+    onUpdate({
+      config: {
+        ...data.config,
+        duration: value || 1
+      }
+    });
+  };
+  const handleUnitChange = (value) => {
+    onUpdate({
+      config: {
+        ...data.config,
+        durationUnit: value
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Wait Duration" }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, paddingTop: 2, children: [
+        /* @__PURE__ */ jsx(Box, { style: { width: 100 }, children: /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            value: duration,
+            onValueChange: handleDurationChange,
+            disabled,
+            step: 1,
+            label: ""
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+          SingleSelect,
+          {
+            value: durationUnit,
+            onChange: handleUnitChange,
+            disabled,
+            label: "",
+            children: DURATION_UNIT_OPTIONS.map((opt) => /* @__PURE__ */ jsx(SingleSelectOption, { value: opt.value, children: opt.label }, opt.value))
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: 3,
+        background: "primary100",
+        hasRadius: true,
+        children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "primary700", children: [
+          "Users will wait ",
+          duration,
+          " ",
+          durationUnit.toLowerCase(),
+          " before proceeding to the next step."
+        ] })
+      }
+    )
+  ] });
+};
+const BranchConfig = ({ data, onUpdate, disabled }) => {
+  const { get } = useFetchClient();
+  const [segments, setSegments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const selectedSegmentId = data.config.branchSegment?.id?.toString() || "";
+  useEffect(() => {
+    const fetchSegments = async () => {
+      try {
+        const response = await get("/content-manager/collection-types/api::crm-segment.crm-segment", {
+          params: {
+            pageSize: 100,
+            sort: "name:asc"
+          }
+        });
+        const results = response.data?.results || [];
+        setSegments(
+          results.map((s) => ({
+            id: s.id,
+            name: s.name
+          }))
+        );
+      } catch (error) {
+        console.error("Failed to fetch segments:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchSegments();
+  }, [get]);
+  const handleSegmentChange = (value) => {
+    const segment = segments.find((s) => s.id.toString() === value);
+    onUpdate({
+      config: {
+        ...data.config,
+        branchSegment: segment ? { id: segment.id, name: segment.name } : null
+      }
+    });
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Loader, { small: true, children: "Loading segments..." }) });
+  }
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Condition Segment" }),
+      /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(
+        SingleSelect,
+        {
+          value: selectedSegmentId,
+          onChange: handleSegmentChange,
+          disabled,
+          placeholder: "Select a segment...",
+          children: segments.map((segment) => /* @__PURE__ */ jsx(SingleSelectOption, { value: segment.id.toString(), children: segment.name }, segment.id))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: 3,
+        background: "secondary100",
+        hasRadius: true,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 2, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "secondary700", fontWeight: "semiBold", children: "How it works:" }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "secondary600", children: [
+            "• Users matching the segment → ",
+            /* @__PURE__ */ jsx("strong", { children: "Yes" }),
+            " path"
+          ] }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "secondary600", children: [
+            "• Users not matching → ",
+            /* @__PURE__ */ jsx("strong", { children: "No" }),
+            " path"
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+const NodeEditPanel = ({
+  node,
+  onClose,
+  onUpdate,
+  disabled
+}) => {
+  if (!node) return null;
+  const { stepType, name } = node.data;
+  const colors = NODE_COLORS[stepType];
+  const typeLabel = STEP_TYPE_LABELS[stepType];
+  const handleNameChange = (e) => {
+    onUpdate(node.id, { name: e.target.value });
+  };
+  const handleConfigUpdate = (updates) => {
+    onUpdate(node.id, updates);
+  };
+  const renderConfig = () => {
+    switch (stepType) {
+      case "message":
+        return /* @__PURE__ */ jsx(
+          MessageConfig,
+          {
+            data: node.data,
+            onUpdate: handleConfigUpdate,
+            disabled
+          }
+        );
+      case "wait":
+        return /* @__PURE__ */ jsx(
+          WaitConfig,
+          {
+            data: node.data,
+            onUpdate: handleConfigUpdate,
+            disabled
+          }
+        );
+      case "branch":
+        return /* @__PURE__ */ jsx(
+          BranchConfig,
+          {
+            data: node.data,
+            onUpdate: handleConfigUpdate,
+            disabled
+          }
+        );
+      case "entry":
+      case "exit":
+      default:
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            padding: 3,
+            background: "neutral100",
+            hasRadius: true,
+            style: { textAlign: "center" },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", children: "No additional configuration needed for this step type." })
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      background: "neutral0",
+      shadow: "filterShadow",
+      hasRadius: true,
+      style: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        width: 350,
+        height: "100%",
+        zIndex: 10,
+        borderLeft: "1px solid #dcdce4",
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            padding: 4,
+            style: {
+              borderBottom: `3px solid ${colors.border}`,
+              backgroundColor: colors.background
+            },
+            children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+              /* @__PURE__ */ jsx(Flex, { alignItems: "center", gap: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", style: { color: colors.text }, children: typeLabel }) }),
+              /* @__PURE__ */ jsx(IconButton, { onClick: onClose, label: "Close panel", variant: "ghost", children: /* @__PURE__ */ jsx(Cross, {}) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { padding: 4, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 4, children: [
+          stepType !== "entry" && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: "Step Name" }),
+            /* @__PURE__ */ jsx(Box, { paddingTop: 1, children: /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: name,
+                onChange: handleNameChange,
+                disabled: disabled || stepType === "entry",
+                placeholder: "Enter step name..."
+              }
+            ) })
+          ] }),
+          stepType !== "entry" && stepType !== "exit" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, {}),
+            renderConfig()
+          ] }),
+          stepType !== "entry" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+              "Step ID: ",
+              node.id
+            ] }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+};
+const TOOLBAR_ITEMS = [
+  {
+    type: "message",
+    label: "Message",
+    icon: /* @__PURE__ */ jsx(Message, { style: { width: 16, height: 16 } })
+  },
+  {
+    type: "wait",
+    label: "Wait",
+    icon: /* @__PURE__ */ jsx(Clock, { style: { width: 16, height: 16 } })
+  },
+  {
+    type: "branch",
+    label: "Branch",
+    icon: /* @__PURE__ */ jsx(ArrowRight, { style: { width: 16, height: 16 } })
+  },
+  {
+    type: "exit",
+    label: "Exit",
+    icon: /* @__PURE__ */ jsx(Cross, { style: { width: 16, height: 16 } })
+  }
+];
+const FlowToolbar = ({ onAddNode, onAutoLayout, disabled }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      padding: 2,
+      background: "neutral0",
+      hasRadius: true,
+      shadow: "filterShadow",
+      style: {
+        position: "absolute",
+        top: 10,
+        left: 10,
+        zIndex: 5
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", style: { paddingRight: 8 }, children: "Add Step:" }),
+        TOOLBAR_ITEMS.map((item) => {
+          const colors = NODE_COLORS[item.type];
+          return /* @__PURE__ */ jsx(Tooltip, { label: `Add ${item.label} step`, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "S",
+              startIcon: item.icon,
+              onClick: () => onAddNode(item.type),
+              disabled,
+              style: {
+                backgroundColor: colors.background,
+                color: colors.text,
+                borderColor: colors.border
+              },
+              children: item.label
+            }
+          ) }, item.type);
+        }),
+        /* @__PURE__ */ jsx(Box, { style: { borderLeft: "1px solid #dcdce4", height: 24, marginLeft: 8 } }),
+        /* @__PURE__ */ jsx(Tooltip, { label: "Auto-arrange nodes", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "S",
+            startIcon: /* @__PURE__ */ jsx(Layout, { style: { width: 16, height: 16 } }),
+            onClick: onAutoLayout,
+            disabled,
+            children: "Auto Layout"
+          }
+        ) })
+      ] })
+    }
+  );
+};
+const generateStepKey = () => {
+  return `step_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+};
+const parseValue = (value) => {
+  if (!value) return [];
+  if (Array.isArray(value)) return value;
+  if (typeof value === "string") {
+    try {
+      const parsed = JSON.parse(value);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+};
+const stepsToFlow = (steps) => {
+  const nodes = [];
+  const edges = [];
+  const entryNode = {
+    id: ENTRY_NODE_ID,
+    type: "entry",
+    position: { x: 250, y: 0 },
+    data: {
+      stepType: "entry",
+      name: "Entry",
+      config: {}
+    },
+    deletable: false
+  };
+  nodes.push(entryNode);
+  const sortedSteps = [...steps].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  sortedSteps.forEach((step, index) => {
+    const node = {
+      id: step.stepKey,
+      type: step.stepType,
+      position: { x: 250, y: (index + 1) * 150 },
+      data: {
+        stepType: step.stepType,
+        name: step.name,
+        config: {
+          channel: step.channel,
+          variants: step.variants,
+          duration: step.duration,
+          durationUnit: step.durationUnit,
+          branchSegment: step.branchSegment
+        }
+      }
+    };
+    nodes.push(node);
+  });
+  if (sortedSteps.length > 0) {
+    edges.push({
+      id: `${ENTRY_NODE_ID}-${sortedSteps[0].stepKey}`,
+      source: ENTRY_NODE_ID,
+      target: sortedSteps[0].stepKey
+    });
+  }
+  sortedSteps.forEach((step) => {
+    if (step.stepType === "branch") {
+      if (step.yesNextStep) {
+        edges.push({
+          id: `${step.stepKey}-${step.yesNextStep}-yes`,
+          source: step.stepKey,
+          sourceHandle: "yes",
+          target: step.yesNextStep,
+          type: "labeled",
+          data: { label: "Yes" }
+        });
+      }
+      if (step.noNextStep) {
+        edges.push({
+          id: `${step.stepKey}-${step.noNextStep}-no`,
+          source: step.stepKey,
+          sourceHandle: "no",
+          target: step.noNextStep,
+          type: "labeled",
+          data: { label: "No" }
+        });
+      }
+    } else if (step.nextStep) {
+      edges.push({
+        id: `${step.stepKey}-${step.nextStep}`,
+        source: step.stepKey,
+        target: step.nextStep
+      });
+    }
+  });
+  return { nodes, edges };
+};
+const flowToSteps = (nodes, edges) => {
+  const stepNodes = nodes.filter((n) => n.data.stepType !== "entry");
+  const nodePositions = new Map(nodes.map((n) => [n.id, n.position.y]));
+  const sorted = [...stepNodes].sort(
+    (a, b) => (nodePositions.get(a.id) ?? 0) - (nodePositions.get(b.id) ?? 0)
+  );
+  return sorted.map((node, index) => {
+    const step = {
+      stepKey: node.id,
+      name: node.data.name,
+      stepType: node.data.stepType,
+      order: index,
+      ...node.data.config
+    };
+    const outEdges = edges.filter((e) => e.source === node.id);
+    if (node.data.stepType === "branch") {
+      const yesEdge = outEdges.find((e) => e.sourceHandle === "yes");
+      const noEdge = outEdges.find((e) => e.sourceHandle === "no");
+      step.yesNextStep = yesEdge?.target;
+      step.noNextStep = noEdge?.target;
+    } else {
+      step.nextStep = outEdges[0]?.target;
+    }
+    return step;
+  });
+};
+const applyAutoLayout = (nodes, edges) => {
+  const g = new dagre.graphlib.Graph();
+  g.setGraph({ rankdir: "TB", nodesep: 80, ranksep: 120, marginx: 20, marginy: 20 });
+  g.setDefaultEdgeLabel(() => ({}));
+  nodes.forEach((node) => {
+    g.setNode(node.id, { width: NODE_DIMENSIONS.width, height: NODE_DIMENSIONS.height });
+  });
+  edges.forEach((edge) => {
+    g.setEdge(edge.source, edge.target);
+  });
+  dagre.layout(g);
+  return nodes.map((node) => {
+    const nodeWithPosition = g.node(node.id);
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - NODE_DIMENSIONS.width / 2,
+        y: nodeWithPosition.y - NODE_DIMENSIONS.height / 2
+      }
+    };
+  });
+};
+const createNode = (type, position) => {
+  const id = type === "entry" ? ENTRY_NODE_ID : generateStepKey();
+  const defaults = DEFAULT_NODE_DATA[type];
+  return {
+    id,
+    type,
+    position,
+    data: {
+      stepType: type,
+      name: defaults.name,
+      config: { ...defaults.config }
+    },
+    deletable: type !== "entry"
+  };
+};
+const getNextNodePosition = (nodes) => {
+  if (nodes.length === 0) {
+    return { x: 250, y: 0 };
+  }
+  const maxY = Math.max(...nodes.map((n) => n.position.y));
+  return { x: 250, y: maxY + 150 };
+};
+const isValidConnection = (source, sourceHandle, target, nodes, edges) => {
+  if (source === target) return false;
+  const targetNode = nodes.find((n) => n.id === target);
+  if (!targetNode) return false;
+  if (targetNode.data.stepType === "entry") return false;
+  const sourceNode = nodes.find((n) => n.id === source);
+  if (!sourceNode) return false;
+  if (sourceNode.data.stepType === "exit") return false;
+  const existingEdge = edges.find(
+    (e) => e.source === source && (sourceHandle ? e.sourceHandle === sourceHandle : !e.sourceHandle)
+  );
+  if (existingEdge) return false;
+  return true;
+};
+const StepFlowBuilderInner = forwardRef(
+  ({ name, value, onChange, intlLabel, disabled, error, required, hint }, ref) => {
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const [selectedNode, setSelectedNode] = useState(null);
+    const isInitialMount = useRef(true);
+    const syncTimeoutRef = useRef(null);
+    useEffect(() => {
+      const steps = parseValue(value);
+      const { nodes: n, edges: e } = stepsToFlow(steps);
+      if (n.length === 0) {
+        const entryNode = createNode("entry", { x: 250, y: 0 });
+        setNodes([entryNode]);
+        setEdges([]);
+      } else {
+        const layoutedNodes = applyAutoLayout(n, e);
+        setNodes(layoutedNodes);
+        setEdges(e);
+      }
+      isInitialMount.current = false;
+    }, []);
+    const syncToStrapi = useCallback(() => {
+      if (isInitialMount.current) return;
+      if (syncTimeoutRef.current) {
+        clearTimeout(syncTimeoutRef.current);
+      }
+      syncTimeoutRef.current = setTimeout(() => {
+        const steps = flowToSteps(nodes, edges);
+        const serialized = JSON.stringify(steps);
+        onChange({ target: { name, value: serialized } });
+      }, 300);
+    }, [nodes, edges, name, onChange]);
+    useEffect(() => {
+      syncToStrapi();
+    }, [nodes, edges, syncToStrapi]);
+    useEffect(() => {
+      return () => {
+        if (syncTimeoutRef.current) {
+          clearTimeout(syncTimeoutRef.current);
+        }
+      };
+    }, []);
+    const handleNodesChange = useCallback(
+      (changes) => {
+        const filteredChanges = changes.filter((change) => {
+          if (change.type === "remove" && change.id === ENTRY_NODE_ID) {
+            return false;
+          }
+          return true;
+        });
+        onNodesChange(filteredChanges);
+      },
+      [onNodesChange]
+    );
+    const handleEdgesChange = useCallback(
+      (changes) => {
+        onEdgesChange(changes);
+      },
+      [onEdgesChange]
+    );
+    const handleConnect = useCallback(
+      (connection) => {
+        if (!connection.source || !connection.target) return;
+        if (!isValidConnection(
+          connection.source,
+          connection.sourceHandle || null,
+          connection.target,
+          nodes,
+          edges
+        )) {
+          return;
+        }
+        const sourceNode = nodes.find((n) => n.id === connection.source);
+        const isBranch = sourceNode?.data.stepType === "branch";
+        const newEdge = {
+          id: `${connection.source}-${connection.target}${connection.sourceHandle ? `-${connection.sourceHandle}` : ""}`,
+          source: connection.source,
+          target: connection.target,
+          sourceHandle: connection.sourceHandle || void 0,
+          targetHandle: connection.targetHandle || void 0,
+          type: isBranch ? "labeled" : "default"
+        };
+        setEdges((eds) => addEdge(newEdge, eds));
+      },
+      [nodes, edges, setEdges]
+    );
+    const handleNodeClick = useCallback(
+      (_, node) => {
+        setSelectedNode(node);
+      },
+      []
+    );
+    const handlePaneClick = useCallback(() => {
+      setSelectedNode(null);
+    }, []);
+    const handleAddNode = useCallback(
+      (type) => {
+        const position = getNextNodePosition(nodes);
+        const newNode = createNode(type, position);
+        setNodes((nds) => [...nds, newNode]);
+      },
+      [nodes, setNodes]
+    );
+    const handleAutoLayout = useCallback(() => {
+      const layoutedNodes = applyAutoLayout(nodes, edges);
+      setNodes(layoutedNodes);
+    }, [nodes, edges, setNodes]);
+    const handleNodeUpdate = useCallback(
+      (nodeId, data) => {
+        setNodes(
+          (nds) => nds.map((node) => {
+            if (node.id === nodeId) {
+              return {
+                ...node,
+                data: {
+                  ...node.data,
+                  ...data,
+                  config: {
+                    ...node.data.config,
+                    ...data.config || {}
+                  }
+                }
+              };
+            }
+            return node;
+          })
+        );
+        if (selectedNode && selectedNode.id === nodeId) {
+          setSelectedNode(
+            (prev) => prev ? {
+              ...prev,
+              data: {
+                ...prev.data,
+                ...data,
+                config: {
+                  ...prev.data.config,
+                  ...data.config || {}
+                }
+              }
+            } : null
+          );
+        }
+      },
+      [selectedNode, setNodes]
+    );
+    const handleClosePanel = useCallback(() => {
+      setSelectedNode(null);
+    }, []);
+    const displayLabel = useMemo(() => {
+      if (intlLabel?.defaultMessage && !intlLabel.defaultMessage.includes(".")) {
+        return intlLabel.defaultMessage;
+      }
+      return "Campaign Steps";
+    }, [intlLabel]);
+    const stepCount = nodes.filter((n) => n.data.stepType !== "entry").length;
+    return /* @__PURE__ */ jsxs(Field.Root, { name, error, hint, required, children: [
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: displayLabel }),
+        /* @__PURE__ */ jsxs(Badge, { backgroundColor: "neutral100", textColor: "neutral600", children: [
+          stepCount,
+          " step",
+          stepCount !== 1 ? "s" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          paddingTop: 2,
+          ref,
+          style: { position: "relative", height: 600 },
+          children: /* @__PURE__ */ jsxs(
+            Box,
+            {
+              style: {
+                height: "100%",
+                border: error ? "1px solid #ee5e52" : "1px solid #dcdce4",
+                borderRadius: 4,
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  ReactFlow,
+                  {
+                    nodes,
+                    edges,
+                    nodeTypes,
+                    edgeTypes,
+                    onNodesChange: handleNodesChange,
+                    onEdgesChange: handleEdgesChange,
+                    onConnect: handleConnect,
+                    onNodeClick: handleNodeClick,
+                    onPaneClick: handlePaneClick,
+                    fitView: true,
+                    fitViewOptions: { padding: 0.2 },
+                    deleteKeyCode: ["Backspace", "Delete"],
+                    nodesDraggable: !disabled,
+                    nodesConnectable: !disabled,
+                    elementsSelectable: !disabled,
+                    panOnScroll: true,
+                    selectionOnDrag: true,
+                    defaultEdgeOptions: {
+                      type: "smoothstep",
+                      animated: false
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Background, { color: "#f0f0f0", gap: 20 }),
+                      /* @__PURE__ */ jsx(Controls, { showInteractive: false }),
+                      /* @__PURE__ */ jsx(
+                        MiniMap,
+                        {
+                          nodeColor: (node) => {
+                            switch (node.data?.stepType) {
+                              case "entry":
+                                return "#5cb176";
+                              case "message":
+                                return "#0077cc";
+                              case "wait":
+                                return "#e9b200";
+                              case "branch":
+                                return "#7b61ff";
+                              case "exit":
+                                return "#dc2626";
+                              default:
+                                return "#999";
+                            }
+                          },
+                          maskColor: "rgba(0, 0, 0, 0.1)",
+                          style: { background: "#f7f7f7" }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        FlowToolbar,
+                        {
+                          onAddNode: handleAddNode,
+                          onAutoLayout: handleAutoLayout,
+                          disabled
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  NodeEditPanel,
+                  {
+                    node: selectedNode,
+                    onClose: handleClosePanel,
+                    onUpdate: handleNodeUpdate,
+                    disabled
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(Field.Hint, {}),
+      /* @__PURE__ */ jsx(Field.Error, {})
+    ] });
+  }
+);
+StepFlowBuilderInner.displayName = "StepFlowBuilderInner";
+const StepFlowBuilder = forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(StepFlowBuilderInner, { ...props, ref }) });
+  }
+);
+StepFlowBuilder.displayName = "StepFlowBuilder";
+export {
+  StepFlowBuilder as default
+};