@omega-flow/editor 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1919 @@
+// src/components/WorkflowEditor.tsx
+import { ReactFlowProvider } from "@xyflow/react";
+
+// src/context/WorkflowEditorContext.tsx
+import {
+  createContext,
+  useContext,
+  useReducer,
+  useCallback,
+  useMemo,
+  useEffect as useEffect3
+} from "react";
+import {
+  applyNodeChanges,
+  applyEdgeChanges
+} from "@xyflow/react";
+
+// src/nodes/views/BaseNodeView.tsx
+import { Handle, Position } from "@xyflow/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var baseStyle = {
+  padding: "10px 15px",
+  borderRadius: "8px",
+  border: "2px solid",
+  backgroundColor: "#fff",
+  minWidth: "150px",
+  fontSize: "12px",
+  fontFamily: "system-ui, sans-serif"
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  fontWeight: 600,
+  marginBottom: "4px"
+};
+var contentStyle = {
+  color: "#666",
+  fontSize: "11px"
+};
+var handleStyle = {
+  width: "10px",
+  height: "10px",
+  borderRadius: "50%"
+};
+function BaseNodeView({
+  label,
+  color = "#666",
+  icon,
+  sourceHandles = [],
+  targetHandles = [],
+  selected,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...baseStyle,
+        borderColor: color,
+        boxShadow: selected ? `0 0 0 2px ${color}40` : "0 2px 4px rgba(0,0,0,0.1)"
+      },
+      children: [
+        targetHandles.map((handle, index) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Top,
+            id: handle.id,
+            style: {
+              ...handleStyle,
+              backgroundColor: color,
+              left: `${(index + 1) / (targetHandles.length + 1) * 100}%`
+            }
+          },
+          handle.id
+        )),
+        /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
+          icon && /* @__PURE__ */ jsx("span", { style: { color }, children: icon }),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ] }),
+        children && /* @__PURE__ */ jsx("div", { style: contentStyle, children }),
+        sourceHandles.map((handle, index) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: Position.Bottom,
+            id: handle.id,
+            style: {
+              ...handleStyle,
+              backgroundColor: color,
+              left: `${(index + 1) / (sourceHandles.length + 1) * 100}%`
+            }
+          },
+          handle.id
+        ))
+      ]
+    }
+  );
+}
+
+// src/nodes/views/TriggerNodeView.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TRIGGER_COLOR = "#4CAF50";
+function TriggerNodeView({ id, data, selected }) {
+  const nodeData = data;
+  const params = nodeData.params;
+  const eventName = params?.event;
+  return /* @__PURE__ */ jsx2(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: "Trigger",
+      color: TRIGGER_COLOR,
+      icon: "\u25B6",
+      sourceHandles: [{ id: "output" }],
+      targetHandles: [],
+      children: eventName ? eventName : /* @__PURE__ */ jsx2("em", { children: "No event set" })
+    }
+  );
+}
+
+// src/nodes/views/ActionNodeView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ACTION_COLOR = "#2196F3";
+function ActionNodeView({ id, data, selected }) {
+  const nodeData = data;
+  const actionName = nodeData.action;
+  return /* @__PURE__ */ jsx3(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: "Action",
+      color: ACTION_COLOR,
+      icon: "\u26A1",
+      sourceHandles: [{ id: "output" }],
+      targetHandles: [{ id: "input" }],
+      children: actionName ? actionName : /* @__PURE__ */ jsx3("em", { children: "No action set" })
+    }
+  );
+}
+
+// src/nodes/views/ConditionNodeView.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CONDITION_COLOR = "#FF9800";
+function ConditionNodeView({ id, data, selected }) {
+  const nodeData = data;
+  const conditions = nodeData.conditions;
+  const ruleCount = (conditions?.all?.length ?? 0) + (conditions?.any?.length ?? 0);
+  return /* @__PURE__ */ jsx4(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: "Condition",
+      color: CONDITION_COLOR,
+      icon: "?",
+      sourceHandles: [
+        { id: "true", label: "True" },
+        { id: "false", label: "False" }
+      ],
+      targetHandles: [{ id: "input" }],
+      children: ruleCount > 0 ? `${ruleCount} rule${ruleCount > 1 ? "s" : ""}` : /* @__PURE__ */ jsx4("em", { children: "No rules" })
+    }
+  );
+}
+
+// src/nodes/views/ExitNodeView.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var EXIT_COLOR = "#F44336";
+function ExitNodeView({ id, data, selected }) {
+  return /* @__PURE__ */ jsx5(
+    BaseNodeView,
+    {
+      id,
+      data,
+      selected,
+      label: "Exit",
+      color: EXIT_COLOR,
+      icon: "\u23F9",
+      sourceHandles: [],
+      targetHandles: [{ id: "input" }],
+      children: "End workflow"
+    }
+  );
+}
+
+// src/nodes/views/WaitNodeView.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var WAIT_COLOR = "#9C27B0";
+function formatDuration(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${ms / 1e3}s`;
+  if (ms < 36e5) return `${ms / 6e4}min`;
+  return `${ms / 36e5}h`;
+}
+function WaitNodeView({ id, data, selected }) {
+  const nodeData = data;
+  const params = nodeData.params;
+  const duration = params?.duration;
+  return /* @__PURE__ */ jsx6(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: "Wait",
+      color: WAIT_COLOR,
+      icon: "\u23F1",
+      sourceHandles: [{ id: "output" }],
+      targetHandles: [{ id: "input" }],
+      children: duration != null ? formatDuration(duration) : /* @__PURE__ */ jsx6("em", { children: "No duration set" })
+    }
+  );
+}
+
+// src/nodes/views/TriggerOrTimeoutNodeView.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var TRIGGER_OR_TIMEOUT_COLOR = "#607D8B";
+function formatDuration2(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  if (ms < 6e4) return `${ms / 1e3}s`;
+  if (ms < 36e5) return `${ms / 6e4}min`;
+  return `${ms / 36e5}h`;
+}
+function TriggerOrTimeoutNodeView({ id, data, selected }) {
+  const nodeData = data;
+  const params = nodeData.params;
+  const eventName = params?.event;
+  const duration = params?.duration;
+  const description = [
+    eventName || "event",
+    duration != null ? `or ${formatDuration2(duration)}` : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx7(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: "Trigger or Timeout",
+      color: TRIGGER_OR_TIMEOUT_COLOR,
+      icon: "\u23F0",
+      sourceHandles: [{ id: "output" }],
+      targetHandles: [{ id: "input" }],
+      children: description || /* @__PURE__ */ jsx7("em", { children: "Not configured" })
+    }
+  );
+}
+
+// src/primitives/Field.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+var fieldStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "4px",
+  marginBottom: "12px"
+};
+var labelStyle = {
+  fontSize: "12px",
+  fontWeight: 500,
+  color: "#374151"
+};
+var errorStyle = {
+  fontSize: "11px",
+  color: "#DC2626"
+};
+var hintStyle = {
+  fontSize: "11px",
+  color: "#6B7280"
+};
+function Field({ label, children, error, hint }) {
+  return /* @__PURE__ */ jsxs2("div", { style: fieldStyle, children: [
+    /* @__PURE__ */ jsx8("label", { style: labelStyle, children: label }),
+    children,
+    error && /* @__PURE__ */ jsx8("span", { style: errorStyle, children: error }),
+    hint && !error && /* @__PURE__ */ jsx8("span", { style: hintStyle, children: hint })
+  ] });
+}
+
+// src/primitives/TextField.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var inputStyle = {
+  padding: "8px 10px",
+  borderRadius: "6px",
+  border: "1px solid #D1D5DB",
+  fontSize: "13px",
+  outline: "none",
+  transition: "border-color 0.15s"
+};
+function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx9(Field, { label, error, hint, children: /* @__PURE__ */ jsx9(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      disabled,
+      style: {
+        ...inputStyle,
+        borderColor: error ? "#DC2626" : "#D1D5DB",
+        backgroundColor: disabled ? "#F3F4F6" : "#fff"
+      },
+      onFocus: (e) => {
+        if (!error) e.target.style.borderColor = "#3B82F6";
+      },
+      onBlur: (e) => {
+        if (!error) e.target.style.borderColor = "#D1D5DB";
+      }
+    }
+  ) });
+}
+
+// src/primitives/NumberField.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var inputStyle2 = {
+  padding: "8px 10px",
+  borderRadius: "6px",
+  border: "1px solid #D1D5DB",
+  fontSize: "13px",
+  outline: "none",
+  transition: "border-color 0.15s"
+};
+function NumberField({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx10(Field, { label, error, hint, children: /* @__PURE__ */ jsx10(
+    "input",
+    {
+      type: "number",
+      value,
+      onChange: (e) => onChange(parseFloat(e.target.value) || 0),
+      min,
+      max,
+      step,
+      disabled,
+      style: {
+        ...inputStyle2,
+        borderColor: error ? "#DC2626" : "#D1D5DB",
+        backgroundColor: disabled ? "#F3F4F6" : "#fff"
+      },
+      onFocus: (e) => {
+        if (!error) e.target.style.borderColor = "#3B82F6";
+      },
+      onBlur: (e) => {
+        if (!error) e.target.style.borderColor = "#D1D5DB";
+      }
+    }
+  ) });
+}
+
+// src/primitives/SelectField.tsx
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var selectStyle = {
+  padding: "8px 10px",
+  borderRadius: "6px",
+  border: "1px solid #D1D5DB",
+  fontSize: "13px",
+  outline: "none",
+  transition: "border-color 0.15s",
+  backgroundColor: "#fff",
+  cursor: "pointer"
+};
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+  placeholder,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx11(Field, { label, error, hint, children: /* @__PURE__ */ jsxs3(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      style: {
+        ...selectStyle,
+        borderColor: error ? "#DC2626" : "#D1D5DB",
+        backgroundColor: disabled ? "#F3F4F6" : "#fff"
+      },
+      onFocus: (e) => {
+        if (!error) e.target.style.borderColor = "#3B82F6";
+      },
+      onBlur: (e) => {
+        if (!error) e.target.style.borderColor = "#D1D5DB";
+      },
+      children: [
+        placeholder && /* @__PURE__ */ jsx11("option", { value: "", disabled: true, children: placeholder }),
+        options.map((option) => /* @__PURE__ */ jsx11("option", { value: option.value, children: option.label }, option.value))
+      ]
+    }
+  ) });
+}
+
+// src/primitives/CheckboxField.tsx
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+var containerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginBottom: "12px",
+  cursor: "pointer"
+};
+var checkboxStyle = {
+  width: "16px",
+  height: "16px",
+  cursor: "pointer"
+};
+var labelStyle2 = {
+  fontSize: "13px",
+  color: "#374151",
+  cursor: "pointer"
+};
+function CheckboxField({
+  label,
+  checked,
+  onChange,
+  disabled
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "label",
+    {
+      style: {
+        ...containerStyle,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            onChange: (e) => onChange(e.target.checked),
+            disabled,
+            style: checkboxStyle
+          }
+        ),
+        /* @__PURE__ */ jsx12("span", { style: labelStyle2, children: label })
+      ]
+    }
+  );
+}
+
+// src/primitives/TextAreaField.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var textareaStyle = {
+  padding: "8px 10px",
+  borderRadius: "6px",
+  border: "1px solid #D1D5DB",
+  fontSize: "13px",
+  outline: "none",
+  transition: "border-color 0.15s",
+  resize: "vertical",
+  fontFamily: "inherit"
+};
+function TextAreaField({
+  label,
+  value,
+  onChange,
+  rows = 4,
+  placeholder,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx13(Field, { label, error, hint, children: /* @__PURE__ */ jsx13(
+    "textarea",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      rows,
+      placeholder,
+      disabled,
+      style: {
+        ...textareaStyle,
+        borderColor: error ? "#DC2626" : "#D1D5DB",
+        backgroundColor: disabled ? "#F3F4F6" : "#fff"
+      },
+      onFocus: (e) => {
+        if (!error) e.target.style.borderColor = "#3B82F6";
+      },
+      onBlur: (e) => {
+        if (!error) e.target.style.borderColor = "#D1D5DB";
+      }
+    }
+  ) });
+}
+
+// src/primitives/DurationField.tsx
+import { useState, useEffect } from "react";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var units = [
+  { value: "ms", label: "Milliseconds", multiplier: 1 },
+  { value: "s", label: "Seconds", multiplier: 1e3 },
+  { value: "min", label: "Minutes", multiplier: 6e4 },
+  { value: "h", label: "Hours", multiplier: 36e5 }
+];
+function msToUnit(ms) {
+  if (ms >= 36e5 && ms % 36e5 === 0) {
+    return { value: ms / 36e5, unit: "h" };
+  }
+  if (ms >= 6e4 && ms % 6e4 === 0) {
+    return { value: ms / 6e4, unit: "min" };
+  }
+  if (ms >= 1e3 && ms % 1e3 === 0) {
+    return { value: ms / 1e3, unit: "s" };
+  }
+  return { value: ms, unit: "ms" };
+}
+var containerStyle2 = {
+  display: "flex",
+  gap: "8px"
+};
+var inputStyle3 = {
+  flex: 1,
+  padding: "8px 10px",
+  borderRadius: "6px",
+  border: "1px solid #D1D5DB",
+  fontSize: "13px",
+  outline: "none"
+};
+var selectStyle2 = {
+  padding: "8px 10px",
+  borderRadius: "6px",
+  border: "1px solid #D1D5DB",
+  fontSize: "13px",
+  outline: "none",
+  backgroundColor: "#fff"
+};
+function DurationField({
+  label,
+  value,
+  onChange,
+  disabled,
+  error,
+  hint
+}) {
+  const initial = msToUnit(value);
+  const [displayValue, setDisplayValue] = useState(initial.value);
+  const [unit, setUnit] = useState(initial.unit);
+  useEffect(() => {
+    const converted = msToUnit(value);
+    setDisplayValue(converted.value);
+    setUnit(converted.unit);
+  }, [value]);
+  const handleValueChange = (newValue) => {
+    setDisplayValue(newValue);
+    const unitInfo = units.find((u) => u.value === unit);
+    onChange(newValue * unitInfo.multiplier);
+  };
+  const handleUnitChange = (newUnit) => {
+    setUnit(newUnit);
+    const unitInfo = units.find((u) => u.value === newUnit);
+    onChange(displayValue * unitInfo.multiplier);
+  };
+  return /* @__PURE__ */ jsx14(Field, { label, error, hint, children: /* @__PURE__ */ jsxs5("div", { style: containerStyle2, children: [
+    /* @__PURE__ */ jsx14(
+      "input",
+      {
+        type: "number",
+        value: displayValue,
+        onChange: (e) => handleValueChange(parseFloat(e.target.value) || 0),
+        min: 0,
+        disabled,
+        style: {
+          ...inputStyle3,
+          borderColor: error ? "#DC2626" : "#D1D5DB",
+          backgroundColor: disabled ? "#F3F4F6" : "#fff"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "select",
+      {
+        value: unit,
+        onChange: (e) => handleUnitChange(e.target.value),
+        disabled,
+        style: {
+          ...selectStyle2,
+          backgroundColor: disabled ? "#F3F4F6" : "#fff"
+        },
+        children: units.map((u) => /* @__PURE__ */ jsx14("option", { value: u.value, children: u.label }, u.value))
+      }
+    )
+  ] }) });
+}
+
+// src/primitives/JsonField.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var textareaStyle2 = {
+  padding: "8px 10px",
+  borderRadius: "6px",
+  border: "1px solid #D1D5DB",
+  fontSize: "12px",
+  fontFamily: "monospace",
+  outline: "none",
+  transition: "border-color 0.15s",
+  resize: "vertical"
+};
+function JsonField({
+  label,
+  value,
+  onChange,
+  rows = 6,
+  disabled,
+  error: externalError,
+  hint
+}) {
+  const [text, setText] = useState2(() => JSON.stringify(value, null, 2));
+  const [parseError, setParseError] = useState2(null);
+  useEffect2(() => {
+    setText(JSON.stringify(value, null, 2));
+    setParseError(null);
+  }, [value]);
+  const handleChange = (newText) => {
+    setText(newText);
+    try {
+      const parsed = JSON.parse(newText);
+      setParseError(null);
+      onChange(parsed);
+    } catch (e) {
+      setParseError("Invalid JSON");
+    }
+  };
+  const error = externalError || parseError;
+  return /* @__PURE__ */ jsx15(Field, { label, error: error ?? void 0, hint, children: /* @__PURE__ */ jsx15(
+    "textarea",
+    {
+      value: text,
+      onChange: (e) => handleChange(e.target.value),
+      rows,
+      disabled,
+      style: {
+        ...textareaStyle2,
+        borderColor: error ? "#DC2626" : "#D1D5DB",
+        backgroundColor: disabled ? "#F3F4F6" : "#fff"
+      },
+      onFocus: (e) => {
+        if (!error) e.target.style.borderColor = "#3B82F6";
+      },
+      onBlur: (e) => {
+        if (!error) e.target.style.borderColor = "#D1D5DB";
+      }
+    }
+  ) });
+}
+
+// src/primitives/FieldGroup.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var groupStyle = {
+  marginBottom: "16px"
+};
+var headerStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  marginBottom: "12px",
+  fontSize: "13px",
+  fontWeight: 600,
+  color: "#111827"
+};
+var toggleStyle = {
+  cursor: "pointer",
+  userSelect: "none",
+  display: "flex",
+  alignItems: "center",
+  gap: "6px"
+};
+var contentStyle2 = {
+  paddingLeft: "4px"
+};
+function FieldGroup({
+  label,
+  children,
+  collapsible = false,
+  defaultCollapsed = false
+}) {
+  const [collapsed, setCollapsed] = useState3(defaultCollapsed);
+  if (!label) {
+    return /* @__PURE__ */ jsx16("div", { style: groupStyle, children });
+  }
+  if (collapsible) {
+    return /* @__PURE__ */ jsxs6("div", { style: groupStyle, children: [
+      /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          style: { ...headerStyle2, ...toggleStyle },
+          onClick: () => setCollapsed(!collapsed),
+          children: [
+            /* @__PURE__ */ jsx16("span", { style: { transform: collapsed ? "rotate(-90deg)" : "rotate(0)", transition: "transform 0.15s" }, children: "\u25BC" }),
+            label
+          ]
+        }
+      ),
+      !collapsed && /* @__PURE__ */ jsx16("div", { style: contentStyle2, children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { style: groupStyle, children: [
+    /* @__PURE__ */ jsx16("div", { style: headerStyle2, children: label }),
+    /* @__PURE__ */ jsx16("div", { style: contentStyle2, children })
+  ] });
+}
+
+// src/nodes/details/TriggerNodeDetail.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function TriggerNodeDetail({ node, onChange }) {
+  const data = node.data;
+  const handleEventChange = (event) => {
+    onChange({
+      ...data,
+      params: { ...data.params, event }
+    });
+  };
+  return /* @__PURE__ */ jsx17(FieldGroup, { label: "Trigger Configuration", children: /* @__PURE__ */ jsx17(
+    TextField,
+    {
+      label: "Event Type",
+      value: data.params?.event ?? "",
+      onChange: handleEventChange,
+      placeholder: "e.g., user.signup, order.placed",
+      hint: "The event type that will start this workflow"
+    }
+  ) });
+}
+
+// src/nodes/details/ActionNodeDetail.tsx
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+function ActionNodeDetail({ node, onChange }) {
+  const data = node.data;
+  const handleActionChange = (action) => {
+    onChange({
+      ...data,
+      action
+    });
+  };
+  const handleParamsChange = (params) => {
+    onChange({
+      ...data,
+      params
+    });
+  };
+  return /* @__PURE__ */ jsxs7(FieldGroup, { label: "Action Configuration", children: [
+    /* @__PURE__ */ jsx18(
+      TextField,
+      {
+        label: "Action Name",
+        value: data.action ?? "",
+        onChange: handleActionChange,
+        placeholder: "e.g., sendEmail, createTask",
+        hint: "The action to perform when this node is reached"
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      JsonField,
+      {
+        label: "Parameters",
+        value: data.params ?? {},
+        onChange: handleParamsChange,
+        hint: "JSON object with action parameters",
+        rows: 4
+      }
+    )
+  ] });
+}
+
+// src/nodes/details/ConditionNodeDetail.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+function ConditionNodeDetail({ node, onChange }) {
+  const data = node.data;
+  const handleConditionsChange = (conditions) => {
+    onChange({
+      ...data,
+      conditions
+    });
+  };
+  return /* @__PURE__ */ jsx19(FieldGroup, { label: "Condition Configuration", children: /* @__PURE__ */ jsx19(
+    JsonField,
+    {
+      label: "Conditions",
+      value: data.conditions ?? { all: [] },
+      onChange: handleConditionsChange,
+      hint: "JSON rules engine format. Use 'all' or 'any' arrays with conditions like: { fact: 'amount', operator: 'greaterThan', value: 100 }",
+      rows: 10
+    }
+  ) });
+}
+
+// src/nodes/details/ExitNodeDetail.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function ExitNodeDetail(_props) {
+  return /* @__PURE__ */ jsx20(FieldGroup, { label: "Exit Node", children: /* @__PURE__ */ jsx20("p", { style: { fontSize: "13px", color: "#6B7280", margin: 0 }, children: "This node ends the workflow. No configuration needed." }) });
+}
+
+// src/nodes/details/WaitNodeDetail.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function WaitNodeDetail({ node, onChange }) {
+  const data = node.data;
+  const handleDurationChange = (duration) => {
+    onChange({
+      ...data,
+      params: { ...data.params, duration }
+    });
+  };
+  return /* @__PURE__ */ jsx21(FieldGroup, { label: "Wait Configuration", children: /* @__PURE__ */ jsx21(
+    DurationField,
+    {
+      label: "Duration",
+      value: data.params?.duration ?? 6e4,
+      onChange: handleDurationChange,
+      hint: "How long to pause before continuing to the next node"
+    }
+  ) });
+}
+
+// src/nodes/details/TriggerOrTimeoutNodeDetail.tsx
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+function TriggerOrTimeoutNodeDetail({ node, onChange }) {
+  const data = node.data;
+  const handleEventChange = (event) => {
+    onChange({
+      ...data,
+      params: { ...data.params, event }
+    });
+  };
+  const handleDurationChange = (duration) => {
+    onChange({
+      ...data,
+      params: { ...data.params, duration }
+    });
+  };
+  return /* @__PURE__ */ jsxs8(FieldGroup, { label: "Trigger or Timeout Configuration", children: [
+    /* @__PURE__ */ jsx22(
+      TextField,
+      {
+        label: "Event Type",
+        value: data.params?.event ?? "",
+        onChange: handleEventChange,
+        placeholder: "e.g., payment.received",
+        hint: "The event type to wait for"
+      }
+    ),
+    /* @__PURE__ */ jsx22(
+      DurationField,
+      {
+        label: "Timeout Duration",
+        value: data.params?.duration ?? 6e4,
+        onChange: handleDurationChange,
+        hint: "Max time to wait before timing out"
+      }
+    )
+  ] });
+}
+
+// src/nodes/index.ts
+var defaultNodeTypes = [
+  {
+    type: "Trigger",
+    label: "Trigger",
+    description: "Starts the workflow when a specific event occurs",
+    color: "#4CAF50",
+    defaultData: { params: { event: "" } },
+    sourceHandles: [{ id: "output", label: "Next" }],
+    targetHandles: [],
+    ViewComponent: TriggerNodeView,
+    DetailComponent: TriggerNodeDetail
+  },
+  {
+    type: "Action",
+    label: "Action",
+    description: "Performs an action and continues to the next node",
+    color: "#2196F3",
+    defaultData: { action: "", params: {} },
+    sourceHandles: [{ id: "output", label: "Next" }],
+    targetHandles: [{ id: "input", label: "In" }],
+    ViewComponent: ActionNodeView,
+    DetailComponent: ActionNodeDetail
+  },
+  {
+    type: "Condition",
+    label: "Condition",
+    description: "Branches the workflow based on conditions",
+    color: "#FF9800",
+    defaultData: { conditions: { all: [] } },
+    sourceHandles: [
+      { id: "true", label: "True" },
+      { id: "false", label: "False" }
+    ],
+    targetHandles: [{ id: "input", label: "In" }],
+    ViewComponent: ConditionNodeView,
+    DetailComponent: ConditionNodeDetail
+  },
+  {
+    type: "Wait",
+    label: "Wait",
+    description: "Pauses the workflow for a specified duration",
+    color: "#9C27B0",
+    defaultData: { params: { duration: 6e4 } },
+    sourceHandles: [{ id: "output", label: "Next" }],
+    targetHandles: [{ id: "input", label: "In" }],
+    ViewComponent: WaitNodeView,
+    DetailComponent: WaitNodeDetail
+  },
+  {
+    type: "TriggerOrTimeout",
+    label: "Trigger or Timeout",
+    description: "Waits for an event or times out after a duration",
+    color: "#607D8B",
+    defaultData: { params: { event: "", duration: 6e4 } },
+    sourceHandles: [{ id: "output", label: "Next" }],
+    targetHandles: [{ id: "input", label: "In" }],
+    ViewComponent: TriggerOrTimeoutNodeView,
+    DetailComponent: TriggerOrTimeoutNodeDetail
+  },
+  {
+    type: "Exit",
+    label: "Exit",
+    description: "Ends the workflow",
+    color: "#F44336",
+    defaultData: {},
+    sourceHandles: [],
+    targetHandles: [{ id: "input", label: "In" }],
+    ViewComponent: ExitNodeView,
+    DetailComponent: ExitNodeDetail
+  }
+];
+
+// src/context/WorkflowEditorContext.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function createInitialState(workflow, customNodeTypes) {
+  const nodeTypesMap = /* @__PURE__ */ new Map();
+  defaultNodeTypes.forEach((def) => nodeTypesMap.set(def.type, def));
+  customNodeTypes?.forEach((def) => nodeTypesMap.set(def.type, def));
+  if (workflow) {
+    return {
+      workflow,
+      nodes: workflow.flow.nodes,
+      edges: workflow.flow.edges,
+      options: workflow.options,
+      name: workflow.name,
+      selectedNodeId: null,
+      isDirty: false,
+      nodeTypes: nodeTypesMap
+    };
+  }
+  return {
+    workflow: null,
+    nodes: [],
+    edges: [],
+    options: { frequency: { type: "one_time" } },
+    name: "",
+    selectedNodeId: null,
+    isDirty: false,
+    nodeTypes: nodeTypesMap
+  };
+}
+function reducer(state, action) {
+  switch (action.type) {
+    case "LOAD_WORKFLOW": {
+      const workflow = action.payload;
+      return {
+        ...state,
+        workflow,
+        nodes: workflow.flow.nodes,
+        edges: workflow.flow.edges,
+        options: workflow.options,
+        name: workflow.name,
+        selectedNodeId: null,
+        isDirty: false
+      };
+    }
+    case "RESET_WORKFLOW": {
+      if (state.workflow) {
+        return {
+          ...state,
+          nodes: state.workflow.flow.nodes,
+          edges: state.workflow.flow.edges,
+          options: state.workflow.options,
+          name: state.workflow.name,
+          selectedNodeId: null,
+          isDirty: false
+        };
+      }
+      return {
+        ...state,
+        nodes: [],
+        edges: [],
+        options: { frequency: { type: "one_time" } },
+        name: "",
+        selectedNodeId: null,
+        isDirty: false
+      };
+    }
+    case "SET_NODES":
+      return { ...state, nodes: action.payload, isDirty: true };
+    case "SET_EDGES":
+      return { ...state, edges: action.payload, isDirty: true };
+    case "ADD_NODE":
+      return {
+        ...state,
+        nodes: [...state.nodes, action.payload],
+        isDirty: true
+      };
+    case "UPDATE_NODE": {
+      const { nodeId, data } = action.payload;
+      return {
+        ...state,
+        nodes: state.nodes.map(
+          (node) => node.id === nodeId ? { ...node, data: { ...node.data, ...data } } : node
+        ),
+        isDirty: true
+      };
+    }
+    case "UPDATE_NODE_POSITION": {
+      const { nodeId, position } = action.payload;
+      return {
+        ...state,
+        nodes: state.nodes.map(
+          (node) => node.id === nodeId ? { ...node, position } : node
+        ),
+        isDirty: true
+      };
+    }
+    case "REMOVE_NODE": {
+      const nodeId = action.payload;
+      return {
+        ...state,
+        nodes: state.nodes.filter((node) => node.id !== nodeId),
+        edges: state.edges.filter(
+          (edge) => edge.source !== nodeId && edge.target !== nodeId
+        ),
+        selectedNodeId: state.selectedNodeId === nodeId ? null : state.selectedNodeId,
+        isDirty: true
+      };
+    }
+    case "SELECT_NODE":
+      return { ...state, selectedNodeId: action.payload };
+    case "ADD_EDGE":
+      return {
+        ...state,
+        edges: [...state.edges, action.payload],
+        isDirty: true
+      };
+    case "REMOVE_EDGE":
+      return {
+        ...state,
+        edges: state.edges.filter((edge) => edge.id !== action.payload),
+        isDirty: true
+      };
+    case "SET_NAME":
+      return { ...state, name: action.payload, isDirty: true };
+    case "SET_OPTIONS":
+      return { ...state, options: action.payload, isDirty: true };
+    case "REGISTER_NODE_TYPE": {
+      const newNodeTypes = new Map(state.nodeTypes);
+      newNodeTypes.set(action.payload.type, action.payload);
+      return { ...state, nodeTypes: newNodeTypes };
+    }
+    case "MARK_CLEAN":
+      return { ...state, isDirty: false };
+    case "APPLY_NODE_CHANGES": {
+      const newNodes = applyNodeChanges(action.payload, state.nodes);
+      let newSelectedId = state.selectedNodeId;
+      for (const change of action.payload) {
+        if (change.type === "select" && change.selected) {
+          newSelectedId = change.id;
+        } else if (change.type === "select" && !change.selected && change.id === state.selectedNodeId) {
+          newSelectedId = null;
+        } else if (change.type === "remove" && change.id === state.selectedNodeId) {
+          newSelectedId = null;
+        }
+      }
+      const hasDirtyChange = action.payload.some(
+        (c) => c.type === "position" || c.type === "dimensions" || c.type === "remove"
+      );
+      return {
+        ...state,
+        nodes: newNodes,
+        selectedNodeId: newSelectedId,
+        isDirty: state.isDirty || hasDirtyChange
+      };
+    }
+    case "APPLY_EDGE_CHANGES": {
+      const newEdges = applyEdgeChanges(action.payload, state.edges);
+      const hasDirtyChange = action.payload.some((c) => c.type === "remove");
+      return {
+        ...state,
+        edges: newEdges,
+        isDirty: state.isDirty || hasDirtyChange
+      };
+    }
+    default:
+      return state;
+  }
+}
+var WorkflowEditorContext = createContext(null);
+var nodeIdCounter = 0;
+function generateNodeId(type) {
+  nodeIdCounter++;
+  return `${type.toLowerCase()}-${Date.now()}-${nodeIdCounter}`;
+}
+function generateEdgeId(source, target) {
+  return `edge-${source}-${target}-${Date.now()}`;
+}
+function WorkflowEditorProvider({
+  children,
+  workflow,
+  nodeTypes: customNodeTypes,
+  onWorkflowChange,
+  onDirtyChange
+}) {
+  const [state, dispatch] = useReducer(
+    reducer,
+    { workflow, customNodeTypes },
+    ({ workflow: workflow2, customNodeTypes: customNodeTypes2 }) => createInitialState(workflow2, customNodeTypes2)
+  );
+  useEffect3(() => {
+    if (workflow) {
+      dispatch({ type: "LOAD_WORKFLOW", payload: workflow });
+    }
+  }, [workflow]);
+  useEffect3(() => {
+    onDirtyChange?.(state.isDirty);
+  }, [state.isDirty, onDirtyChange]);
+  useEffect3(() => {
+    if (state.isDirty && onWorkflowChange) {
+      const currentWorkflow = getWorkflowImpl();
+      onWorkflowChange(currentWorkflow);
+    }
+  }, [state.nodes, state.edges, state.options, state.name]);
+  const getWorkflowImpl = useCallback(() => {
+    return {
+      id: state.workflow?.id ?? "",
+      name: state.name,
+      flow: {
+        nodes: state.nodes,
+        edges: state.edges
+      },
+      options: state.options
+    };
+  }, [state.workflow?.id, state.name, state.nodes, state.edges, state.options]);
+  const loadWorkflow = useCallback((workflow2) => {
+    dispatch({ type: "LOAD_WORKFLOW", payload: workflow2 });
+  }, []);
+  const resetWorkflow = useCallback(() => {
+    dispatch({ type: "RESET_WORKFLOW" });
+  }, []);
+  const addNode = useCallback(
+    (type, position) => {
+      const nodeTypeDef = state.nodeTypes.get(type);
+      if (!nodeTypeDef) {
+        console.warn(`Unknown node type: ${type}`);
+        return;
+      }
+      const newNode = {
+        id: generateNodeId(type),
+        type,
+        position,
+        data: { ...nodeTypeDef.defaultData }
+      };
+      dispatch({ type: "ADD_NODE", payload: newNode });
+    },
+    [state.nodeTypes]
+  );
+  const updateNode = useCallback(
+    (nodeId, data) => {
+      dispatch({ type: "UPDATE_NODE", payload: { nodeId, data } });
+    },
+    []
+  );
+  const updateNodePosition = useCallback(
+    (nodeId, position) => {
+      dispatch({ type: "UPDATE_NODE_POSITION", payload: { nodeId, position } });
+    },
+    []
+  );
+  const removeNode = useCallback((nodeId) => {
+    dispatch({ type: "REMOVE_NODE", payload: nodeId });
+  }, []);
+  const selectNode = useCallback((nodeId) => {
+    dispatch({ type: "SELECT_NODE", payload: nodeId });
+  }, []);
+  const addEdge = useCallback(
+    (connection) => {
+      const newEdge = {
+        id: generateEdgeId(connection.source, connection.target),
+        source: connection.source,
+        target: connection.target,
+        sourceHandle: connection.sourceHandle,
+        targetHandle: connection.targetHandle
+      };
+      dispatch({ type: "ADD_EDGE", payload: newEdge });
+    },
+    []
+  );
+  const removeEdge = useCallback((edgeId) => {
+    dispatch({ type: "REMOVE_EDGE", payload: edgeId });
+  }, []);
+  const setName = useCallback((name) => {
+    dispatch({ type: "SET_NAME", payload: name });
+  }, []);
+  const setOptions = useCallback((options) => {
+    dispatch({ type: "SET_OPTIONS", payload: options });
+  }, []);
+  const registerNodeType = useCallback((definition) => {
+    dispatch({ type: "REGISTER_NODE_TYPE", payload: definition });
+  }, []);
+  const getWorkflow = useCallback(() => getWorkflowImpl(), [getWorkflowImpl]);
+  const markClean = useCallback(() => {
+    dispatch({ type: "MARK_CLEAN" });
+  }, []);
+  const onNodesChange = useCallback((changes) => {
+    dispatch({ type: "APPLY_NODE_CHANGES", payload: changes });
+  }, []);
+  const onEdgesChange = useCallback((changes) => {
+    dispatch({ type: "APPLY_EDGE_CHANGES", payload: changes });
+  }, []);
+  const onConnect = useCallback(
+    (connection) => {
+      const conn = connection;
+      if (conn.source && conn.target) {
+        addEdge({
+          source: conn.source,
+          target: conn.target,
+          sourceHandle: conn.sourceHandle ?? void 0,
+          targetHandle: conn.targetHandle ?? void 0
+        });
+      }
+    },
+    [addEdge]
+  );
+  const value = useMemo(
+    () => ({
+      // State
+      workflow: state.workflow,
+      nodes: state.nodes,
+      edges: state.edges,
+      options: state.options,
+      name: state.name,
+      selectedNodeId: state.selectedNodeId,
+      isDirty: state.isDirty,
+      nodeTypes: state.nodeTypes,
+      // Actions
+      loadWorkflow,
+      resetWorkflow,
+      addNode,
+      updateNode,
+      updateNodePosition,
+      removeNode,
+      selectNode,
+      addEdge,
+      removeEdge,
+      setName,
+      setOptions,
+      registerNodeType,
+      getWorkflow,
+      markClean,
+      onNodesChange,
+      onEdgesChange,
+      onConnect
+    }),
+    [
+      state,
+      loadWorkflow,
+      resetWorkflow,
+      addNode,
+      updateNode,
+      updateNodePosition,
+      removeNode,
+      selectNode,
+      addEdge,
+      removeEdge,
+      setName,
+      setOptions,
+      registerNodeType,
+      getWorkflow,
+      markClean,
+      onNodesChange,
+      onEdgesChange,
+      onConnect
+    ]
+  );
+  return /* @__PURE__ */ jsx23(WorkflowEditorContext.Provider, { value, children });
+}
+function useWorkflowEditorContext() {
+  const context = useContext(WorkflowEditorContext);
+  if (!context) {
+    throw new Error(
+      "useWorkflowEditorContext must be used within a WorkflowEditorProvider"
+    );
+  }
+  return context;
+}
+
+// src/components/WorkflowEditor.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
+function WorkflowEditor({
+  children,
+  workflow,
+  nodeTypes,
+  onWorkflowChange,
+  onDirtyChange
+}) {
+  return /* @__PURE__ */ jsx24(ReactFlowProvider, { children: /* @__PURE__ */ jsx24(
+    WorkflowEditorProvider,
+    {
+      workflow,
+      nodeTypes,
+      onWorkflowChange,
+      onDirtyChange,
+      children
+    }
+  ) });
+}
+
+// src/hooks/useNodeRegistry.ts
+import { useMemo as useMemo2 } from "react";
+function useNodeRegistry() {
+  const context = useWorkflowEditorContext();
+  const reactFlowNodeTypes = useMemo2(() => {
+    const types = {};
+    context.nodeTypes.forEach((def, type) => {
+      types[type] = def.ViewComponent;
+    });
+    return types;
+  }, [context.nodeTypes]);
+  const nodeTypesList = useMemo2(
+    () => Array.from(context.nodeTypes.values()),
+    [context.nodeTypes]
+  );
+  return {
+    /** Map of node type definitions */
+    nodeTypes: context.nodeTypes,
+    /** Array of node type definitions */
+    nodeTypesList,
+    /** ReactFlow-compatible nodeTypes object */
+    reactFlowNodeTypes,
+    /** Register a new node type */
+    registerNodeType: context.registerNodeType,
+    /** Get a specific node type definition */
+    getNodeType: (type) => context.nodeTypes.get(type)
+  };
+}
+
+// src/hooks/useDragAndDrop.ts
+import { useCallback as useCallback2 } from "react";
+import { useReactFlow } from "@xyflow/react";
+function useDragAndDrop() {
+  const { addNode } = useWorkflowEditorContext();
+  const reactFlowInstance = useReactFlow();
+  const onDragStart = useCallback2(
+    (event, nodeType) => {
+      event.dataTransfer.setData("application/reactflow", nodeType);
+      event.dataTransfer.effectAllowed = "move";
+    },
+    []
+  );
+  const onDragOver = useCallback2((event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+  const onDrop = useCallback2(
+    (event) => {
+      event.preventDefault();
+      const type = event.dataTransfer.getData("application/reactflow");
+      if (!type) return;
+      const position = reactFlowInstance.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY
+      });
+      addNode(type, position);
+    },
+    [addNode, reactFlowInstance]
+  );
+  return {
+    onDragStart,
+    onDragOver,
+    onDrop
+  };
+}
+
+// src/components/NodesPanel.tsx
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+var panelStyle = {
+  backgroundColor: "#fff",
+  borderRadius: "8px",
+  padding: "12px",
+  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+  minWidth: "180px"
+};
+var titleStyle = {
+  fontSize: "12px",
+  fontWeight: 600,
+  color: "#374151",
+  marginBottom: "12px",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var itemStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  padding: "8px 10px",
+  borderRadius: "6px",
+  cursor: "grab",
+  marginBottom: "4px",
+  border: "1px solid #E5E7EB",
+  backgroundColor: "#fff",
+  transition: "all 0.15s"
+};
+var itemIconStyle = {
+  width: "24px",
+  height: "24px",
+  borderRadius: "4px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "#fff",
+  fontSize: "12px",
+  fontWeight: 600
+};
+var itemTextStyle = {
+  flex: 1
+};
+var itemLabelStyle = {
+  fontSize: "13px",
+  fontWeight: 500,
+  color: "#111827"
+};
+var itemDescStyle = {
+  fontSize: "11px",
+  color: "#6B7280",
+  marginTop: "2px"
+};
+function NodeItem({
+  nodeType,
+  onDragStart,
+  showDescription = true
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      style: itemStyle,
+      draggable: true,
+      onDragStart: (e) => onDragStart(e, nodeType.type),
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = nodeType.color || "#3B82F6";
+        e.currentTarget.style.backgroundColor = "#F9FAFB";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = "#E5E7EB";
+        e.currentTarget.style.backgroundColor = "#fff";
+      },
+      children: [
+        /* @__PURE__ */ jsx25("div", { style: { ...itemIconStyle, backgroundColor: nodeType.color || "#666" }, children: nodeType.label.charAt(0) }),
+        /* @__PURE__ */ jsxs9("div", { style: itemTextStyle, children: [
+          /* @__PURE__ */ jsx25("div", { style: itemLabelStyle, children: nodeType.label }),
+          showDescription && nodeType.description && /* @__PURE__ */ jsx25("div", { style: itemDescStyle, children: nodeType.description })
+        ] })
+      ]
+    }
+  );
+}
+function NodesPanel({
+  className,
+  showDescriptions = true,
+  filter,
+  renderItem
+}) {
+  const { nodeTypesList } = useNodeRegistry();
+  const { onDragStart } = useDragAndDrop();
+  const filteredNodeTypes = filter ? nodeTypesList.filter(filter) : nodeTypesList;
+  return /* @__PURE__ */ jsxs9("div", { style: panelStyle, className, children: [
+    /* @__PURE__ */ jsx25("div", { style: titleStyle, children: "Nodes" }),
+    filteredNodeTypes.map(
+      (nodeType) => renderItem ? /* @__PURE__ */ jsx25(
+        "div",
+        {
+          draggable: true,
+          onDragStart: (e) => onDragStart(e, nodeType.type),
+          children: renderItem(nodeType)
+        },
+        nodeType.type
+      ) : /* @__PURE__ */ jsx25(
+        NodeItem,
+        {
+          nodeType,
+          onDragStart,
+          showDescription: showDescriptions
+        },
+        nodeType.type
+      )
+    )
+  ] });
+}
+
+// src/hooks/useSelectedNode.ts
+function useSelectedNode() {
+  const context = useWorkflowEditorContext();
+  const selectedNode = context.selectedNodeId ? context.nodes.find((n) => n.id === context.selectedNodeId) ?? null : null;
+  const nodeType = selectedNode?.type ? context.nodeTypes.get(selectedNode.type) : void 0;
+  return {
+    /** The currently selected node, or null if none */
+    selectedNode,
+    /** The ID of the selected node */
+    selectedNodeId: context.selectedNodeId,
+    /** The node type definition for the selected node */
+    nodeType,
+    /** Select a node by ID */
+    selectNode: context.selectNode,
+    /** Update the selected node's data */
+    updateSelectedNode: (data) => {
+      if (context.selectedNodeId) {
+        context.updateNode(context.selectedNodeId, data);
+      }
+    },
+    /** Remove the selected node */
+    removeSelectedNode: () => {
+      if (context.selectedNodeId) {
+        context.removeNode(context.selectedNodeId);
+      }
+    }
+  };
+}
+
+// src/components/DetailPanel.tsx
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var panelStyle2 = {
+  backgroundColor: "#fff",
+  borderRadius: "8px",
+  padding: "12px",
+  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+  minWidth: "280px",
+  maxWidth: "320px"
+};
+var titleStyle2 = {
+  fontSize: "12px",
+  fontWeight: 600,
+  color: "#374151",
+  marginBottom: "12px",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var emptyStyle = {
+  fontSize: "13px",
+  color: "#6B7280",
+  textAlign: "center",
+  padding: "20px 0"
+};
+var headerStyle3 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "8px",
+  marginBottom: "16px",
+  paddingBottom: "12px",
+  borderBottom: "1px solid #E5E7EB"
+};
+var nodeTypeStyle = {
+  fontSize: "14px",
+  fontWeight: 600,
+  color: "#111827"
+};
+var nodeIdStyle = {
+  fontSize: "11px",
+  color: "#9CA3AF",
+  fontFamily: "monospace"
+};
+var deleteButtonStyle = {
+  marginLeft: "auto",
+  padding: "4px 8px",
+  fontSize: "11px",
+  color: "#DC2626",
+  backgroundColor: "#FEE2E2",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer"
+};
+function DetailPanel({
+  className,
+  emptyMessage = "Select a node to edit its properties",
+  showNodeType = true,
+  showNodeId = false
+}) {
+  const { selectedNode, nodeType, updateSelectedNode, removeSelectedNode } = useSelectedNode();
+  if (!selectedNode || !nodeType) {
+    return /* @__PURE__ */ jsxs10("div", { style: panelStyle2, className, children: [
+      /* @__PURE__ */ jsx26("div", { style: titleStyle2, children: "Properties" }),
+      /* @__PURE__ */ jsx26("div", { style: emptyStyle, children: emptyMessage })
+    ] });
+  }
+  const DetailComponent = nodeType.DetailComponent;
+  return /* @__PURE__ */ jsxs10("div", { style: panelStyle2, className, children: [
+    /* @__PURE__ */ jsx26("div", { style: titleStyle2, children: "Properties" }),
+    /* @__PURE__ */ jsxs10("div", { style: headerStyle3, children: [
+      /* @__PURE__ */ jsxs10("div", { children: [
+        showNodeType && /* @__PURE__ */ jsx26("div", { style: nodeTypeStyle, children: nodeType.label }),
+        showNodeId && /* @__PURE__ */ jsx26("div", { style: nodeIdStyle, children: selectedNode.id })
+      ] }),
+      /* @__PURE__ */ jsx26(
+        "button",
+        {
+          style: deleteButtonStyle,
+          onClick: removeSelectedNode,
+          title: "Delete node",
+          children: "Delete"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx26(
+      DetailComponent,
+      {
+        node: selectedNode,
+        onChange: (data) => updateSelectedNode(data)
+      }
+    )
+  ] });
+}
+
+// src/components/OptionsPanel.tsx
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+var panelStyle3 = {
+  backgroundColor: "#fff",
+  borderRadius: "8px",
+  padding: "12px",
+  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+  minWidth: "220px"
+};
+var titleStyle3 = {
+  fontSize: "12px",
+  fontWeight: 600,
+  color: "#374151",
+  marginBottom: "12px",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var frequencyOptions = [
+  { value: "one_time", label: "One time" },
+  { value: "every_rematch", label: "Every rematch" }
+];
+function OptionsPanel({
+  className,
+  showFrequency = true,
+  customOptions
+}) {
+  const { options, setOptions } = useWorkflowEditorContext();
+  const handleFrequencyTypeChange = (type) => {
+    const newFrequency = {
+      type
+    };
+    if (type === "every_rematch") {
+      newFrequency.interval = options.frequency?.interval ?? 3600;
+    }
+    setOptions({ ...options, frequency: newFrequency });
+  };
+  const handleIntervalChange = (interval) => {
+    if (options.frequency) {
+      setOptions({
+        ...options,
+        frequency: { ...options.frequency, interval }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs11("div", { style: panelStyle3, className, children: [
+    /* @__PURE__ */ jsx27("div", { style: titleStyle3, children: "Options" }),
+    showFrequency && /* @__PURE__ */ jsxs11(FieldGroup, { label: "Frequency", children: [
+      /* @__PURE__ */ jsx27(
+        SelectField,
+        {
+          label: "Type",
+          value: options.frequency?.type ?? "one_time",
+          options: frequencyOptions,
+          onChange: handleFrequencyTypeChange,
+          hint: "How often this workflow can run for a subject"
+        }
+      ),
+      options.frequency?.type === "every_rematch" && /* @__PURE__ */ jsx27(
+        NumberField,
+        {
+          label: "Interval (seconds)",
+          value: options.frequency?.interval ?? 3600,
+          onChange: handleIntervalChange,
+          min: 1,
+          hint: "Minimum time between runs"
+        }
+      )
+    ] }),
+    customOptions
+  ] });
+}
+
+// src/components/ControlPanel.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+var panelStyle4 = {
+  backgroundColor: "#fff",
+  borderRadius: "8px",
+  padding: "12px",
+  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+  minWidth: "220px"
+};
+var titleStyle4 = {
+  fontSize: "12px",
+  fontWeight: 600,
+  color: "#374151",
+  marginBottom: "12px",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var actionsStyle = {
+  display: "flex",
+  gap: "8px",
+  marginTop: "12px"
+};
+var buttonStyle = {
+  padding: "8px 16px",
+  fontSize: "13px",
+  fontWeight: 500,
+  borderRadius: "6px",
+  cursor: "pointer",
+  border: "none",
+  transition: "all 0.15s"
+};
+var saveButtonStyle = {
+  ...buttonStyle,
+  backgroundColor: "#3B82F6",
+  color: "#fff"
+};
+var saveButtonDisabledStyle = {
+  ...saveButtonStyle,
+  backgroundColor: "#93C5FD",
+  cursor: "not-allowed"
+};
+var statusStyle = {
+  fontSize: "11px",
+  color: "#6B7280",
+  marginTop: "8px"
+};
+function ControlPanel({
+  className,
+  showName = true,
+  showSaveButton = true,
+  saveButtonLabel = "Save",
+  onSave,
+  renderActions
+}) {
+  const { name, setName, isDirty, getWorkflow, markClean } = useWorkflowEditorContext();
+  const [isSaving, setIsSaving] = useState4(false);
+  const [saveStatus, setSaveStatus] = useState4(null);
+  const handleSave = async () => {
+    if (!onSave || isSaving) return;
+    setIsSaving(true);
+    setSaveStatus(null);
+    try {
+      await onSave();
+      markClean();
+      setSaveStatus("saved");
+      setTimeout(() => setSaveStatus(null), 2e3);
+    } catch (error) {
+      console.error("Failed to save workflow:", error);
+      setSaveStatus("error");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs12("div", { style: panelStyle4, className, children: [
+    /* @__PURE__ */ jsx28("div", { style: titleStyle4, children: "Workflow" }),
+    showName && /* @__PURE__ */ jsx28(
+      TextField,
+      {
+        label: "Name",
+        value: name,
+        onChange: setName,
+        placeholder: "Workflow name"
+      }
+    ),
+    /* @__PURE__ */ jsxs12("div", { style: actionsStyle, children: [
+      showSaveButton && onSave && /* @__PURE__ */ jsx28(
+        "button",
+        {
+          style: isSaving || !isDirty ? saveButtonDisabledStyle : saveButtonStyle,
+          onClick: handleSave,
+          disabled: isSaving || !isDirty,
+          children: isSaving ? "Saving..." : saveButtonLabel
+        }
+      ),
+      renderActions?.({ isDirty, workflow: getWorkflow() })
+    ] }),
+    saveStatus && /* @__PURE__ */ jsx28(
+      "div",
+      {
+        style: {
+          ...statusStyle,
+          color: saveStatus === "saved" ? "#059669" : "#DC2626"
+        },
+        children: saveStatus === "saved" ? "Saved successfully" : "Failed to save"
+      }
+    ),
+    isDirty && !saveStatus && /* @__PURE__ */ jsx28("div", { style: statusStyle, children: "Unsaved changes" })
+  ] });
+}
+
+// src/hooks/useWorkflowEditor.ts
+function useWorkflowEditor() {
+  const context = useWorkflowEditorContext();
+  return {
+    // State
+    workflow: context.getWorkflow(),
+    nodes: context.nodes,
+    edges: context.edges,
+    options: context.options,
+    name: context.name,
+    isDirty: context.isDirty,
+    selectedNode: context.selectedNodeId ? context.nodes.find((n) => n.id === context.selectedNodeId) ?? null : null,
+    selectedNodeId: context.selectedNodeId,
+    // Actions
+    loadWorkflow: context.loadWorkflow,
+    resetWorkflow: context.resetWorkflow,
+    addNode: context.addNode,
+    updateNode: context.updateNode,
+    removeNode: context.removeNode,
+    selectNode: context.selectNode,
+    addEdge: context.addEdge,
+    removeEdge: context.removeEdge,
+    setName: context.setName,
+    setOptions: context.setOptions,
+    getWorkflow: context.getWorkflow,
+    markClean: context.markClean
+  };
+}
+
+// src/hooks/useNodes.ts
+function useNodes() {
+  const context = useWorkflowEditorContext();
+  return {
+    nodes: context.nodes,
+    onNodesChange: context.onNodesChange,
+    addNode: context.addNode,
+    updateNode: context.updateNode,
+    removeNode: context.removeNode
+  };
+}
+
+// src/hooks/useEdges.ts
+function useEdges() {
+  const context = useWorkflowEditorContext();
+  return {
+    edges: context.edges,
+    onEdgesChange: context.onEdgesChange,
+    onConnect: context.onConnect,
+    addEdge: context.addEdge,
+    removeEdge: context.removeEdge
+  };
+}
+export {
+  ActionNodeDetail,
+  ActionNodeView,
+  BaseNodeView,
+  CheckboxField,
+  ConditionNodeDetail,
+  ConditionNodeView,
+  ControlPanel,
+  DetailPanel,
+  DurationField,
+  ExitNodeDetail,
+  ExitNodeView,
+  Field,
+  FieldGroup,
+  JsonField,
+  NodesPanel,
+  NumberField,
+  OptionsPanel,
+  SelectField,
+  TextAreaField,
+  TextField,
+  TriggerNodeDetail,
+  TriggerNodeView,
+  TriggerOrTimeoutNodeDetail,
+  TriggerOrTimeoutNodeView,
+  WaitNodeDetail,
+  WaitNodeView,
+  WorkflowEditor,
+  WorkflowEditorProvider,
+  defaultNodeTypes,
+  useDragAndDrop,
+  useEdges,
+  useNodeRegistry,
+  useNodes,
+  useSelectedNode,
+  useWorkflowEditor,
+  useWorkflowEditorContext
+};