@omega-flow/editor 0.1.0

package/dist/index.js

@@ -0,0 +1,3061 @@
+// src/components/WorkflowEditor.tsx
+import { ReactFlowProvider } from "@xyflow/react";
+
+// src/context/WorkflowEditorContext.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useReducer,
+  useCallback as useCallback2,
+  useMemo as useMemo2,
+  useEffect as useEffect4
+} 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: "var(--of-spacing-4, 10px) 15px",
+  borderRadius: "var(--of-radius-lg, 8px)",
+  border: "2px solid",
+  backgroundColor: "var(--of-node-bg, #fff)",
+  minWidth: "150px",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  fontFamily: "var(--of-font-family-base, system-ui, sans-serif)"
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-2, 6px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  marginBottom: "var(--of-spacing-1, 4px)",
+  color: "var(--of-color-text-primary, #111827)"
+};
+var contentStyle = {
+  color: "var(--of-node-content-color, #666)",
+  fontSize: "var(--of-font-size-xs, 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` : "var(--of-node-shadow, 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/i18n/TranslationContext.tsx
+import { createContext, useContext, useMemo } from "react";
+
+// src/i18n/defaults.ts
+var defaultTranslations = {
+  // ── Control Panel ──────────────────────────────────────────
+  "panels.control.title": "Workflow",
+  "panels.control.nameLabel": "Name",
+  "panels.control.namePlaceholder": "Workflow name",
+  "panels.control.saving": "Saving...",
+  "panels.control.savedSuccessfully": "Saved successfully",
+  "panels.control.failedToSave": "Failed to save",
+  "panels.control.unsavedChanges": "Unsaved changes",
+  // ── Detail Panel ───────────────────────────────────────────
+  "panels.detail.title": "Properties",
+  "panels.detail.emptyMessage": "Select a node to edit its properties",
+  "panels.detail.delete": "Delete",
+  "panels.detail.deleteTitle": "Delete node",
+  // ── Nodes Panel ────────────────────────────────────────────
+  "panels.nodes.title": "Nodes",
+  // ── Options Panel ──────────────────────────────────────────
+  "panels.options.title": "Options",
+  "panels.options.frequencyGroup": "Frequency",
+  "panels.options.frequencyTypeLabel": "Type",
+  "panels.options.frequencyTypeHint": "How often this workflow can run for a subject",
+  "panels.options.frequencyOneTime": "One time",
+  "panels.options.frequencyEveryRematch": "Every rematch",
+  "panels.options.intervalLabel": "Interval",
+  "panels.options.intervalHint": "Minimum time between runs",
+  // ── Node Views (canvas) ────────────────────────────────────
+  "nodes.trigger.label": "Trigger",
+  "nodes.trigger.noEvent": "No event set",
+  "nodes.action.label": "Action",
+  "nodes.action.noAction": "No action set",
+  "nodes.condition.label": "Condition",
+  "nodes.condition.noRules": "No rules",
+  "nodes.condition.ruleCount": "{{count}} rules",
+  "nodes.condition.ruleCountSingular": "1 rule",
+  "nodes.condition.handleTrue": "True",
+  "nodes.condition.handleFalse": "False",
+  "nodes.wait.label": "Wait",
+  "nodes.wait.noDuration": "No duration set",
+  "nodes.triggerOrTimeout.label": "Trigger or Timeout",
+  "nodes.triggerOrTimeout.notConfigured": "Not configured",
+  "nodes.triggerOrTimeout.eventFallback": "event",
+  "nodes.triggerOrTimeout.orDuration": "or {{duration}}",
+  "nodes.triggerOrTimeout.handleTrigger": "Trigger",
+  "nodes.triggerOrTimeout.handleTimeout": "Timeout",
+  "nodes.exit.label": "Exit",
+  "nodes.exit.endWorkflow": "End workflow",
+  // ── Node Details (property editors) ────────────────────────
+  "nodeDetails.trigger.group": "Trigger Configuration",
+  "nodeDetails.trigger.eventLabel": "Event Type",
+  "nodeDetails.trigger.eventPlaceholder": "e.g., user.signup, order.placed",
+  "nodeDetails.trigger.eventHint": "The event type that will start this workflow",
+  "nodeDetails.action.group": "Action Configuration",
+  "nodeDetails.action.nameLabel": "Action Name",
+  "nodeDetails.action.namePlaceholder": "e.g., sendEmail, createTask",
+  "nodeDetails.action.nameHint": "The action to perform when this node is reached",
+  "nodeDetails.action.paramsLabel": "Parameters",
+  "nodeDetails.action.paramsHint": "JSON object with action parameters",
+  "nodeDetails.condition.group": "Condition Configuration",
+  "nodeDetails.condition.conditionsLabel": "Conditions",
+  "nodeDetails.condition.conditionsHint": "JSON rules engine format. Use 'all' or 'any' arrays with conditions like: { fact: 'amount', operator: 'greaterThan', value: 100 }",
+  "nodeDetails.wait.group": "Wait Configuration",
+  "nodeDetails.wait.durationLabel": "Duration",
+  "nodeDetails.wait.durationHint": "How long to pause before continuing to the next node",
+  "nodeDetails.triggerOrTimeout.group": "Trigger or Timeout Configuration",
+  "nodeDetails.triggerOrTimeout.eventLabel": "Event Type",
+  "nodeDetails.triggerOrTimeout.eventPlaceholder": "e.g., payment.received",
+  "nodeDetails.triggerOrTimeout.eventHint": "The event type to wait for",
+  "nodeDetails.triggerOrTimeout.durationLabel": "Timeout Duration",
+  "nodeDetails.triggerOrTimeout.durationHint": "Max time to wait before timing out",
+  "nodeDetails.exit.group": "Exit Node",
+  "nodeDetails.exit.message": "This node ends the workflow. No configuration needed.",
+  // ── Default node type definitions (labels & descriptions) ──
+  "nodeTypes.trigger.label": "Trigger",
+  "nodeTypes.trigger.description": "Starts the workflow when a specific event occurs",
+  "nodeTypes.action.label": "Action",
+  "nodeTypes.action.description": "Performs an action and continues to the next node",
+  "nodeTypes.condition.label": "Condition",
+  "nodeTypes.condition.description": "Branches the workflow based on conditions",
+  "nodeTypes.wait.label": "Wait",
+  "nodeTypes.wait.description": "Pauses the workflow for a specified duration",
+  "nodeTypes.triggerOrTimeout.label": "Trigger or Timeout",
+  "nodeTypes.triggerOrTimeout.description": "Waits for an event or times out after a duration",
+  "nodeTypes.exit.label": "Exit",
+  "nodeTypes.exit.description": "Ends the workflow",
+  // ── Primitives / fields ────────────────────────────────────
+  "fields.json.invalidJson": "Invalid JSON",
+  "fields.duration.days": "d",
+  "fields.duration.hours": "h",
+  "fields.duration.minutes": "m",
+  // ── Condition Builder ────────────────────────────────────
+  "conditionBuilder.dialogTitle": "Condition Builder",
+  "conditionBuilder.topLevelLabel": "Match ANY of the following groups:",
+  "conditionBuilder.matchLabel": "Match",
+  "conditionBuilder.addGroup": "Add group",
+  "conditionBuilder.addCondition": "Add condition",
+  "conditionBuilder.removeGroup": "Remove",
+  "conditionBuilder.removeCondition": "Remove condition",
+  "conditionBuilder.selectProperty": "Select property...",
+  "conditionBuilder.selectOperator": "Select operator...",
+  "conditionBuilder.factPlaceholder": "fact name",
+  "conditionBuilder.valuePlaceholder": "value",
+  "conditionBuilder.emptyGroup": "No conditions yet. Add one below.",
+  "conditionBuilder.noConditions": "No conditions configured",
+  "conditionBuilder.ruleCountSingular": "1 condition",
+  "conditionBuilder.ruleCount": "{{count}} conditions",
+  "conditionBuilder.editButton": "Edit",
+  "conditionBuilder.apply": "Apply",
+  "conditionBuilder.cancel": "Cancel"
+};
+
+// src/i18n/TranslationContext.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function createTranslationFunction(dictionary) {
+  return (key, params) => {
+    const template = dictionary[key] ?? key;
+    if (!params) return template;
+    return template.replace(
+      /\{\{(\w+)\}\}/g,
+      (_, k) => params[k] ?? `{{${k}}}`
+    );
+  };
+}
+var defaultT = createTranslationFunction(defaultTranslations);
+var TranslationContext = createContext(defaultT);
+function TranslationProvider({
+  children,
+  translationFn,
+  translations
+}) {
+  const t = useMemo(() => {
+    if (translationFn) return translationFn;
+    if (translations) {
+      return createTranslationFunction({
+        ...defaultTranslations,
+        ...translations
+      });
+    }
+    return defaultT;
+  }, [translationFn, translations]);
+  return /* @__PURE__ */ jsx2(TranslationContext.Provider, { value: t, children });
+}
+function useTranslation() {
+  return useContext(TranslationContext);
+}
+
+// src/nodes/views/TriggerNodeView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TRIGGER_COLOR = "var(--of-node-trigger-color, #4CAF50)";
+function TriggerNodeView({ id, data, selected }) {
+  const t = useTranslation();
+  const nodeData = data;
+  const params = nodeData.params;
+  const eventName = params?.event;
+  return /* @__PURE__ */ jsx3(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: t("nodes.trigger.label"),
+      color: TRIGGER_COLOR,
+      icon: "\u25B6",
+      sourceHandles: [{ id: "output" }],
+      targetHandles: [],
+      children: eventName ? eventName : /* @__PURE__ */ jsx3("em", { children: t("nodes.trigger.noEvent") })
+    }
+  );
+}
+
+// src/nodes/views/ActionNodeView.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ACTION_COLOR = "var(--of-node-action-color, #2196F3)";
+function ActionNodeView({ id, data, selected }) {
+  const t = useTranslation();
+  const nodeData = data;
+  const actionName = nodeData.action;
+  return /* @__PURE__ */ jsx4(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: t("nodes.action.label"),
+      color: ACTION_COLOR,
+      icon: "\u26A1",
+      sourceHandles: [{ id: "output" }],
+      targetHandles: [{ id: "input" }],
+      children: actionName ? actionName : /* @__PURE__ */ jsx4("em", { children: t("nodes.action.noAction") })
+    }
+  );
+}
+
+// src/nodes/views/ConditionNodeView.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var CONDITION_COLOR = "var(--of-node-condition-color, #FF9800)";
+function ConditionNodeView({ id, data, selected }) {
+  const t = useTranslation();
+  const nodeData = data;
+  const conditions = nodeData.conditions;
+  const ruleCount = (conditions?.all?.length ?? 0) + (conditions?.any?.length ?? 0);
+  const ruleLabel = ruleCount === 0 ? null : ruleCount === 1 ? t("nodes.condition.ruleCountSingular") : t("nodes.condition.ruleCount", { count: String(ruleCount) });
+  return /* @__PURE__ */ jsx5(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: t("nodes.condition.label"),
+      color: CONDITION_COLOR,
+      icon: "?",
+      sourceHandles: [
+        { id: "true", label: t("nodes.condition.handleTrue") },
+        { id: "false", label: t("nodes.condition.handleFalse") }
+      ],
+      targetHandles: [{ id: "input" }],
+      children: ruleLabel ?? /* @__PURE__ */ jsx5("em", { children: t("nodes.condition.noRules") })
+    }
+  );
+}
+
+// src/nodes/views/ExitNodeView.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var EXIT_COLOR = "var(--of-node-exit-color, #F44336)";
+function ExitNodeView({ id, data, selected }) {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx6(
+    BaseNodeView,
+    {
+      id,
+      data,
+      selected,
+      label: t("nodes.exit.label"),
+      color: EXIT_COLOR,
+      icon: "\u23F9",
+      sourceHandles: [],
+      targetHandles: [{ id: "input" }],
+      children: t("nodes.exit.endWorkflow")
+    }
+  );
+}
+
+// src/utils/duration.ts
+var MS_PER_MINUTE = 6e4;
+var MS_PER_HOUR = 36e5;
+var MS_PER_DAY = 864e5;
+function msToParts(ms) {
+  const days = Math.floor(ms / MS_PER_DAY);
+  const remainingAfterDays = ms % MS_PER_DAY;
+  const hours = Math.floor(remainingAfterDays / MS_PER_HOUR);
+  const remainingAfterHours = remainingAfterDays % MS_PER_HOUR;
+  const minutes = Math.floor(remainingAfterHours / MS_PER_MINUTE);
+  return { days, hours, minutes };
+}
+function partsToMs(parts) {
+  return parts.days * MS_PER_DAY + parts.hours * MS_PER_HOUR + parts.minutes * MS_PER_MINUTE;
+}
+function formatDuration(ms) {
+  if (ms === 0) return "0m";
+  const { days, hours, minutes } = msToParts(ms);
+  const parts = [];
+  if (days > 0) parts.push(`${days}d`);
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0) parts.push(`${minutes}m`);
+  return parts.length > 0 ? parts.join(" ") : "0m";
+}
+
+// src/nodes/views/WaitNodeView.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var WAIT_COLOR = "var(--of-node-wait-color, #9C27B0)";
+function WaitNodeView({ id, data, selected }) {
+  const t = useTranslation();
+  const nodeData = data;
+  const params = nodeData.params;
+  const duration = params?.duration;
+  return /* @__PURE__ */ jsx7(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: t("nodes.wait.label"),
+      color: WAIT_COLOR,
+      icon: "\u23F1",
+      sourceHandles: [{ id: "output" }],
+      targetHandles: [{ id: "input" }],
+      children: duration != null ? formatDuration(duration) : /* @__PURE__ */ jsx7("em", { children: t("nodes.wait.noDuration") })
+    }
+  );
+}
+
+// src/nodes/views/TriggerOrTimeoutNodeView.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var TRIGGER_OR_TIMEOUT_COLOR = "var(--of-node-trigger-timeout-color, #607D8B)";
+function TriggerOrTimeoutNodeView({ id, data, selected }) {
+  const t = useTranslation();
+  const nodeData = data;
+  const params = nodeData.params;
+  const eventName = params?.event;
+  const duration = params?.duration;
+  const description = [
+    eventName || t("nodes.triggerOrTimeout.eventFallback"),
+    duration != null ? t("nodes.triggerOrTimeout.orDuration", { duration: formatDuration(duration) }) : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx8(
+    BaseNodeView,
+    {
+      id,
+      data: nodeData,
+      selected,
+      label: t("nodes.triggerOrTimeout.label"),
+      color: TRIGGER_OR_TIMEOUT_COLOR,
+      icon: "\u23F0",
+      sourceHandles: [
+        { id: "trigger", label: t("nodes.triggerOrTimeout.handleTrigger") },
+        { id: "timeout", label: t("nodes.triggerOrTimeout.handleTimeout") }
+      ],
+      targetHandles: [{ id: "input" }],
+      children: description || /* @__PURE__ */ jsx8("em", { children: t("nodes.triggerOrTimeout.notConfigured") })
+    }
+  );
+}
+
+// src/primitives/Field.tsx
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var fieldStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--of-spacing-1, 4px)",
+  marginBottom: "var(--of-spacing-5, 12px)"
+};
+var labelStyle = {
+  fontSize: "var(--of-field-label-size, 12px)",
+  fontWeight: "var(--of-font-weight-medium, 500)",
+  color: "var(--of-field-label-color, #374151)"
+};
+var errorStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-field-error-color, #DC2626)"
+};
+var hintStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-field-hint-color, #6B7280)"
+};
+function Field({ label, children, error, hint }) {
+  return /* @__PURE__ */ jsxs2("div", { style: fieldStyle, children: [
+    /* @__PURE__ */ jsx9("label", { style: labelStyle, children: label }),
+    children,
+    error && /* @__PURE__ */ jsx9("span", { style: errorStyle, children: error }),
+    hint && !error && /* @__PURE__ */ jsx9("span", { style: hintStyle, children: hint })
+  ] });
+}
+
+// src/primitives/TextField.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var inputStyle = {
+  padding: "var(--of-field-padding, 8px 10px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-field-font-size, 13px)",
+  outline: "none",
+  transition: "border-color var(--of-transition-fast, 0.15s)",
+  color: "var(--of-color-text-primary, #111827)"
+};
+function TextField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx10(Field, { label, error, hint, children: /* @__PURE__ */ jsx10(
+    "input",
+    {
+      type: "text",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      placeholder,
+      disabled,
+      style: {
+        ...inputStyle,
+        borderColor: error ? "var(--of-field-border-error, #DC2626)" : "var(--of-field-border, #D1D5DB)",
+        backgroundColor: disabled ? "var(--of-color-bg-disabled, #F3F4F6)" : "var(--of-field-bg, #fff)"
+      },
+      onFocus: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border-focus, #3B82F6)";
+      },
+      onBlur: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border, #D1D5DB)";
+      }
+    }
+  ) });
+}
+
+// src/primitives/NumberField.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var inputStyle2 = {
+  padding: "var(--of-field-padding, 8px 10px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-field-font-size, 13px)",
+  outline: "none",
+  transition: "border-color var(--of-transition-fast, 0.15s)",
+  color: "var(--of-color-text-primary, #111827)"
+};
+function NumberField({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx11(Field, { label, error, hint, children: /* @__PURE__ */ jsx11(
+    "input",
+    {
+      type: "number",
+      value,
+      onChange: (e) => onChange(parseFloat(e.target.value) || 0),
+      min,
+      max,
+      step,
+      disabled,
+      style: {
+        ...inputStyle2,
+        borderColor: error ? "var(--of-field-border-error, #DC2626)" : "var(--of-field-border, #D1D5DB)",
+        backgroundColor: disabled ? "var(--of-color-bg-disabled, #F3F4F6)" : "var(--of-field-bg, #fff)"
+      },
+      onFocus: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border-focus, #3B82F6)";
+      },
+      onBlur: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border, #D1D5DB)";
+      }
+    }
+  ) });
+}
+
+// src/primitives/SelectField.tsx
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+var selectStyle = {
+  padding: "var(--of-field-padding, 8px 10px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-field-font-size, 13px)",
+  outline: "none",
+  transition: "border-color var(--of-transition-fast, 0.15s)",
+  backgroundColor: "var(--of-field-bg, #fff)",
+  color: "var(--of-color-text-primary, #111827)",
+  cursor: "pointer"
+};
+function SelectField({
+  label,
+  value,
+  options,
+  onChange,
+  placeholder,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx12(Field, { label, error, hint, children: /* @__PURE__ */ jsxs3(
+    "select",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      disabled,
+      style: {
+        ...selectStyle,
+        borderColor: error ? "var(--of-field-border-error, #DC2626)" : "var(--of-field-border, #D1D5DB)",
+        backgroundColor: disabled ? "var(--of-color-bg-disabled, #F3F4F6)" : "var(--of-field-bg, #fff)"
+      },
+      onFocus: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border-focus, #3B82F6)";
+      },
+      onBlur: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border, #D1D5DB)";
+      },
+      children: [
+        placeholder && /* @__PURE__ */ jsx12("option", { value: "", disabled: true, children: placeholder }),
+        options.map((option) => /* @__PURE__ */ jsx12("option", { value: option.value, children: option.label }, option.value))
+      ]
+    }
+  ) });
+}
+
+// src/primitives/CheckboxField.tsx
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var containerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-3, 8px)",
+  marginBottom: "var(--of-spacing-5, 12px)",
+  cursor: "pointer"
+};
+var checkboxStyle = {
+  width: "16px",
+  height: "16px",
+  cursor: "pointer"
+};
+var labelStyle2 = {
+  fontSize: "var(--of-field-font-size, 13px)",
+  color: "var(--of-color-text-secondary, #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__ */ jsx13(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            onChange: (e) => onChange(e.target.checked),
+            disabled,
+            style: checkboxStyle
+          }
+        ),
+        /* @__PURE__ */ jsx13("span", { style: labelStyle2, children: label })
+      ]
+    }
+  );
+}
+
+// src/primitives/TextAreaField.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var textareaStyle = {
+  padding: "var(--of-field-padding, 8px 10px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-field-font-size, 13px)",
+  color: "var(--of-color-text-primary, #111827)",
+  outline: "none",
+  transition: "border-color var(--of-transition-fast, 0.15s)",
+  resize: "vertical",
+  fontFamily: "inherit"
+};
+function TextAreaField({
+  label,
+  value,
+  onChange,
+  rows = 4,
+  placeholder,
+  disabled,
+  error,
+  hint
+}) {
+  return /* @__PURE__ */ jsx14(Field, { label, error, hint, children: /* @__PURE__ */ jsx14(
+    "textarea",
+    {
+      value,
+      onChange: (e) => onChange(e.target.value),
+      rows,
+      placeholder,
+      disabled,
+      style: {
+        ...textareaStyle,
+        borderColor: error ? "var(--of-field-border-error, #DC2626)" : "var(--of-field-border, #D1D5DB)",
+        backgroundColor: disabled ? "var(--of-color-bg-disabled, #F3F4F6)" : "var(--of-field-bg, #fff)"
+      },
+      onFocus: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border-focus, #3B82F6)";
+      },
+      onBlur: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border, #D1D5DB)";
+      }
+    }
+  ) });
+}
+
+// src/primitives/DurationField.tsx
+import { useState, useEffect } from "react";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var containerStyle2 = {
+  display: "flex",
+  gap: "var(--of-spacing-3, 8px)"
+};
+var unitGroupStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-2, 4px)"
+};
+var inputStyle3 = {
+  width: "60px",
+  padding: "var(--of-field-padding, 8px 10px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-field-font-size, 13px)",
+  color: "var(--of-color-text-primary, #111827)",
+  outline: "none",
+  textAlign: "center"
+};
+var labelStyle3 = {
+  fontSize: "var(--of-field-font-size, 13px)",
+  color: "var(--of-color-text-secondary, #6B7280)"
+};
+function DurationField({
+  label,
+  value,
+  onChange,
+  disabled,
+  error,
+  hint
+}) {
+  const t = useTranslation();
+  const initial = msToParts(value);
+  const [parts, setParts] = useState(initial);
+  useEffect(() => {
+    const converted = msToParts(value);
+    setParts(converted);
+  }, [value]);
+  const handlePartChange = (part, newValue) => {
+    const sanitizedValue = Math.max(0, Math.floor(newValue) || 0);
+    const newParts = { ...parts, [part]: sanitizedValue };
+    setParts(newParts);
+    onChange(partsToMs(newParts));
+  };
+  const getInputStyle = () => ({
+    ...inputStyle3,
+    borderColor: error ? "var(--of-field-border-error, #DC2626)" : "var(--of-field-border, #D1D5DB)",
+    backgroundColor: disabled ? "var(--of-color-bg-disabled, #F3F4F6)" : "var(--of-field-bg, #fff)"
+  });
+  return /* @__PURE__ */ jsx15(Field, { label, error, hint, children: /* @__PURE__ */ jsxs5("div", { style: containerStyle2, children: [
+    /* @__PURE__ */ jsxs5("div", { style: unitGroupStyle, children: [
+      /* @__PURE__ */ jsx15(
+        "input",
+        {
+          type: "number",
+          value: parts.days,
+          onChange: (e) => handlePartChange("days", parseFloat(e.target.value)),
+          min: 0,
+          disabled,
+          style: getInputStyle()
+        }
+      ),
+      /* @__PURE__ */ jsx15("span", { style: labelStyle3, children: t("fields.duration.days") })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: unitGroupStyle, children: [
+      /* @__PURE__ */ jsx15(
+        "input",
+        {
+          type: "number",
+          value: parts.hours,
+          onChange: (e) => handlePartChange("hours", parseFloat(e.target.value)),
+          min: 0,
+          max: 23,
+          disabled,
+          style: getInputStyle()
+        }
+      ),
+      /* @__PURE__ */ jsx15("span", { style: labelStyle3, children: t("fields.duration.hours") })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { style: unitGroupStyle, children: [
+      /* @__PURE__ */ jsx15(
+        "input",
+        {
+          type: "number",
+          value: parts.minutes,
+          onChange: (e) => handlePartChange("minutes", parseFloat(e.target.value)),
+          min: 0,
+          max: 59,
+          disabled,
+          style: getInputStyle()
+        }
+      ),
+      /* @__PURE__ */ jsx15("span", { style: labelStyle3, children: t("fields.duration.minutes") })
+    ] })
+  ] }) });
+}
+
+// src/primitives/JsonField.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var textareaStyle2 = {
+  padding: "var(--of-field-padding, 8px 10px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  fontFamily: "var(--of-font-family-mono, monospace)",
+  color: "var(--of-color-text-primary, #111827)",
+  outline: "none",
+  transition: "border-color var(--of-transition-fast, 0.15s)",
+  resize: "vertical"
+};
+function JsonField({
+  label,
+  value,
+  onChange,
+  rows = 6,
+  disabled,
+  error: externalError,
+  hint
+}) {
+  const t = useTranslation();
+  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(t("fields.json.invalidJson"));
+    }
+  };
+  const error = externalError || parseError;
+  return /* @__PURE__ */ jsx16(Field, { label, error: error ?? void 0, hint, children: /* @__PURE__ */ jsx16(
+    "textarea",
+    {
+      value: text,
+      onChange: (e) => handleChange(e.target.value),
+      rows,
+      disabled,
+      style: {
+        ...textareaStyle2,
+        borderColor: error ? "var(--of-field-border-error, #DC2626)" : "var(--of-field-border, #D1D5DB)",
+        backgroundColor: disabled ? "var(--of-color-bg-disabled, #F3F4F6)" : "var(--of-field-bg, #fff)"
+      },
+      onFocus: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border-focus, #3B82F6)";
+      },
+      onBlur: (e) => {
+        if (!error)
+          e.target.style.borderColor = "var(--of-field-border, #D1D5DB)";
+      }
+    }
+  ) });
+}
+
+// src/primitives/FieldGroup.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx17, jsxs as jsxs6 } from "react/jsx-runtime";
+var groupStyle = {
+  marginBottom: "var(--of-spacing-6, 16px)"
+};
+var headerStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-2, 6px)",
+  marginBottom: "var(--of-spacing-5, 12px)",
+  fontSize: "var(--of-field-font-size, 13px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-color-text-primary, #111827)"
+};
+var toggleStyle = {
+  cursor: "pointer",
+  userSelect: "none",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-2, 6px)"
+};
+var contentStyle2 = {
+  paddingLeft: "var(--of-spacing-1, 4px)"
+};
+function FieldGroup({
+  label,
+  children,
+  collapsible = false,
+  defaultCollapsed = false
+}) {
+  const [collapsed, setCollapsed] = useState3(defaultCollapsed);
+  if (!label) {
+    return /* @__PURE__ */ jsx17("div", { style: groupStyle, children });
+  }
+  if (collapsible) {
+    return /* @__PURE__ */ jsxs6("div", { style: groupStyle, children: [
+      /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          style: { ...headerStyle2, ...toggleStyle },
+          onClick: () => setCollapsed(!collapsed),
+          children: [
+            /* @__PURE__ */ jsx17("span", { style: { transform: collapsed ? "rotate(-90deg)" : "rotate(0)", transition: "transform var(--of-transition-fast, 0.15s)" }, children: "\u25BC" }),
+            label
+          ]
+        }
+      ),
+      !collapsed && /* @__PURE__ */ jsx17("div", { style: contentStyle2, children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { style: groupStyle, children: [
+    /* @__PURE__ */ jsx17("div", { style: headerStyle2, children: label }),
+    /* @__PURE__ */ jsx17("div", { style: contentStyle2, children })
+  ] });
+}
+
+// src/primitives/condition-builder/ConditionBuilder.tsx
+import React5 from "react";
+
+// src/primitives/condition-builder/types.ts
+function isPropertyGroup(item) {
+  return "children" in item && Array.isArray(item.children);
+}
+
+// src/primitives/condition-builder/ConditionRow.tsx
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-2, 6px)",
+  marginBottom: "var(--of-spacing-2, 6px)"
+};
+var selectStyle2 = {
+  padding: "var(--of-spacing-2, 6px) var(--of-spacing-3, 8px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  outline: "none",
+  backgroundColor: "var(--of-field-bg, #fff)",
+  color: "var(--of-color-text-primary, #111827)",
+  minWidth: 0
+};
+var factSelectStyle = {
+  ...selectStyle2,
+  flex: "1 1 30%"
+};
+var operatorSelectStyle = {
+  ...selectStyle2,
+  flex: "1 1 30%"
+};
+var inputStyle4 = {
+  padding: "var(--of-spacing-2, 6px) var(--of-spacing-3, 8px)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  border: "1px solid var(--of-field-border, #D1D5DB)",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  outline: "none",
+  backgroundColor: "var(--of-field-bg, #fff)",
+  color: "var(--of-color-text-primary, #111827)",
+  flex: "1 1 25%",
+  minWidth: 0
+};
+var removeButtonStyle = {
+  padding: "var(--of-spacing-1, 4px) var(--of-spacing-2, 6px)",
+  border: "none",
+  background: "none",
+  color: "var(--of-color-text-muted, #9CA3AF)",
+  cursor: "pointer",
+  fontSize: "var(--of-font-size-lg, 14px)",
+  lineHeight: 1,
+  borderRadius: "var(--of-radius-sm, 4px)",
+  flexShrink: 0
+};
+function parseValue(raw) {
+  if (raw === "true") return true;
+  if (raw === "false") return false;
+  const num = Number(raw);
+  if (raw !== "" && !isNaN(num)) return num;
+  return raw;
+}
+function formatValue(value) {
+  if (value === null || value === void 0) return "";
+  return String(value);
+}
+function ConditionRow({
+  rule,
+  properties,
+  operators,
+  onChange,
+  onRemove
+}) {
+  const t = useTranslation();
+  const hasProperties = properties.length > 0;
+  return /* @__PURE__ */ jsxs7("div", { style: rowStyle, children: [
+    hasProperties ? /* @__PURE__ */ jsxs7(
+      "select",
+      {
+        value: rule.fact,
+        onChange: (e) => onChange({ ...rule, fact: e.target.value }),
+        style: factSelectStyle,
+        children: [
+          /* @__PURE__ */ jsx18("option", { value: "", children: t("conditionBuilder.selectProperty") }),
+          properties.map(
+            (item, idx) => isPropertyGroup(item) ? /* @__PURE__ */ jsx18("optgroup", { label: item.label, children: item.children.map((child) => /* @__PURE__ */ jsx18("option", { value: child.value, children: child.label }, child.value)) }, idx) : /* @__PURE__ */ jsx18("option", { value: item.value, children: item.label }, item.value)
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsx18(
+      "input",
+      {
+        type: "text",
+        value: rule.fact,
+        onChange: (e) => onChange({ ...rule, fact: e.target.value }),
+        placeholder: t("conditionBuilder.factPlaceholder"),
+        style: { ...inputStyle4, flex: "1 1 30%" }
+      }
+    ),
+    /* @__PURE__ */ jsxs7(
+      "select",
+      {
+        value: rule.operator,
+        onChange: (e) => onChange({ ...rule, operator: e.target.value }),
+        style: operatorSelectStyle,
+        children: [
+          /* @__PURE__ */ jsx18("option", { value: "", children: t("conditionBuilder.selectOperator") }),
+          operators.map((op) => /* @__PURE__ */ jsx18("option", { value: op.value, children: op.label }, op.value))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      "input",
+      {
+        type: "text",
+        value: formatValue(rule.value),
+        onChange: (e) => onChange({ ...rule, value: parseValue(e.target.value) }),
+        placeholder: t("conditionBuilder.valuePlaceholder"),
+        style: inputStyle4
+      }
+    ),
+    /* @__PURE__ */ jsx18(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        style: removeButtonStyle,
+        title: t("conditionBuilder.removeCondition"),
+        onMouseEnter: (e) => e.currentTarget.style.color = "var(--of-color-status-error, #DC2626)",
+        onMouseLeave: (e) => e.currentTarget.style.color = "var(--of-color-text-muted, #9CA3AF)",
+        children: "\u2715"
+      }
+    )
+  ] });
+}
+
+// src/primitives/condition-builder/ConditionGroup.tsx
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+var groupStyle2 = {
+  border: "1px solid var(--of-color-border-secondary, #E5E7EB)",
+  borderRadius: "var(--of-radius-md, 6px)",
+  padding: "var(--of-spacing-4, 10px)",
+  backgroundColor: "var(--of-color-bg-secondary, #F9FAFB)"
+};
+var groupHeaderStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: "var(--of-spacing-3, 8px)"
+};
+var operatorToggleStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-2, 6px)",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  color: "var(--of-color-text-secondary, #374151)"
+};
+var toggleButtonBase = {
+  padding: "var(--of-spacing-1, 4px) var(--of-spacing-3, 8px)",
+  border: "1px solid var(--of-color-border-primary, #D1D5DB)",
+  borderRadius: "var(--of-radius-sm, 4px)",
+  fontSize: "var(--of-font-size-xs, 11px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  cursor: "pointer",
+  transition: "all var(--of-transition-fast, 0.15s)"
+};
+var removeGroupButtonStyle = {
+  padding: "var(--of-spacing-1, 4px) var(--of-spacing-2, 6px)",
+  border: "none",
+  background: "none",
+  color: "var(--of-color-text-muted, #9CA3AF)",
+  cursor: "pointer",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  borderRadius: "var(--of-radius-sm, 4px)"
+};
+var addConditionButtonStyle = {
+  padding: "var(--of-spacing-1, 4px) var(--of-spacing-3, 8px)",
+  border: "1px dashed var(--of-color-border-primary, #D1D5DB)",
+  background: "none",
+  color: "var(--of-color-text-tertiary, #6B7280)",
+  cursor: "pointer",
+  fontSize: "var(--of-font-size-xs, 11px)",
+  borderRadius: "var(--of-radius-sm, 4px)",
+  width: "100%",
+  marginTop: "var(--of-spacing-2, 6px)"
+};
+var emptyStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-color-text-muted, #9CA3AF)",
+  textAlign: "center",
+  padding: "var(--of-spacing-3, 8px) 0"
+};
+function createEmptyRule() {
+  return { fact: "", operator: "equal", value: "" };
+}
+function ConditionGroupView({
+  group,
+  properties,
+  operators,
+  onChange,
+  onRemove,
+  canRemove
+}) {
+  const t = useTranslation();
+  const handleOperatorChange = (operator) => {
+    onChange({ ...group, operator });
+  };
+  const handleRuleChange = (index, rule) => {
+    const conditions = [...group.conditions];
+    conditions[index] = rule;
+    onChange({ ...group, conditions });
+  };
+  const handleRuleRemove = (index) => {
+    const conditions = group.conditions.filter((_, i) => i !== index);
+    onChange({ ...group, conditions });
+  };
+  const handleAddCondition = () => {
+    onChange({
+      ...group,
+      conditions: [...group.conditions, createEmptyRule()]
+    });
+  };
+  const isAnd = group.operator === "all";
+  return /* @__PURE__ */ jsxs8("div", { style: groupStyle2, children: [
+    /* @__PURE__ */ jsxs8("div", { style: groupHeaderStyle, children: [
+      /* @__PURE__ */ jsxs8("div", { style: operatorToggleStyle, children: [
+        /* @__PURE__ */ jsx19("span", { children: t("conditionBuilder.matchLabel") }),
+        /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleOperatorChange("all"),
+            style: {
+              ...toggleButtonBase,
+              backgroundColor: isAnd ? "var(--of-color-interactive-primary, #3B82F6)" : "var(--of-field-bg, #fff)",
+              color: isAnd ? "var(--of-color-text-inverse, #fff)" : "var(--of-color-text-secondary, #374151)",
+              borderColor: isAnd ? "var(--of-color-interactive-primary, #3B82F6)" : "var(--of-color-border-primary, #D1D5DB)"
+            },
+            children: "AND"
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleOperatorChange("any"),
+            style: {
+              ...toggleButtonBase,
+              backgroundColor: !isAnd ? "var(--of-color-interactive-primary, #3B82F6)" : "var(--of-field-bg, #fff)",
+              color: !isAnd ? "var(--of-color-text-inverse, #fff)" : "var(--of-color-text-secondary, #374151)",
+              borderColor: !isAnd ? "var(--of-color-interactive-primary, #3B82F6)" : "var(--of-color-border-primary, #D1D5DB)"
+            },
+            children: "OR"
+          }
+        )
+      ] }),
+      canRemove && /* @__PURE__ */ jsx19(
+        "button",
+        {
+          type: "button",
+          onClick: onRemove,
+          style: removeGroupButtonStyle,
+          title: t("conditionBuilder.removeGroup"),
+          onMouseEnter: (e) => e.currentTarget.style.color = "var(--of-color-status-error, #DC2626)",
+          onMouseLeave: (e) => e.currentTarget.style.color = "var(--of-color-text-muted, #9CA3AF)",
+          children: t("conditionBuilder.removeGroup")
+        }
+      )
+    ] }),
+    group.conditions.length === 0 ? /* @__PURE__ */ jsx19("div", { style: emptyStyle, children: t("conditionBuilder.emptyGroup") }) : group.conditions.map((rule, index) => /* @__PURE__ */ jsx19(
+      ConditionRow,
+      {
+        rule,
+        properties,
+        operators,
+        onChange: (updated) => handleRuleChange(index, updated),
+        onRemove: () => handleRuleRemove(index)
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxs8(
+      "button",
+      {
+        type: "button",
+        onClick: handleAddCondition,
+        style: addConditionButtonStyle,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.borderColor = "var(--of-color-interactive-primary, #3B82F6)";
+          e.currentTarget.style.color = "var(--of-color-interactive-primary, #3B82F6)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.borderColor = "var(--of-color-border-primary, #D1D5DB)";
+          e.currentTarget.style.color = "var(--of-color-text-tertiary, #6B7280)";
+        },
+        children: [
+          "+ ",
+          t("conditionBuilder.addCondition")
+        ]
+      }
+    )
+  ] });
+}
+
+// src/primitives/condition-builder/operators.ts
+var defaultOperators = [
+  { value: "equal", label: "equals" },
+  { value: "notEqual", label: "does not equal" },
+  { value: "greaterThan", label: "greater than" },
+  { value: "greaterThanInclusive", label: "greater than or equal" },
+  { value: "lessThan", label: "less than" },
+  { value: "lessThanInclusive", label: "less than or equal" },
+  { value: "in", label: "is in" },
+  { value: "notIn", label: "is not in" },
+  { value: "contains", label: "contains" },
+  { value: "doesNotContain", label: "does not contain" }
+];
+
+// src/primitives/condition-builder/ConditionBuilder.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var containerStyle3 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--of-spacing-3, 8px)"
+};
+var topLabelStyle = {
+  fontSize: "var(--of-font-size-sm, 12px)",
+  fontWeight: "var(--of-font-weight-medium, 500)",
+  color: "var(--of-color-text-secondary, #374151)",
+  marginBottom: "var(--of-spacing-1, 4px)"
+};
+var orDividerStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-3, 8px)",
+  margin: "var(--of-spacing-1, 4px) 0"
+};
+var orLineStyle = {
+  flex: 1,
+  height: "1px",
+  backgroundColor: "var(--of-color-border-secondary, #E5E7EB)"
+};
+var orTextStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-color-text-muted, #9CA3AF)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var addGroupButtonStyle = {
+  padding: "var(--of-spacing-3, 8px) var(--of-spacing-4, 10px)",
+  border: "1px dashed var(--of-color-border-primary, #D1D5DB)",
+  background: "none",
+  color: "var(--of-color-text-tertiary, #6B7280)",
+  cursor: "pointer",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  borderRadius: "var(--of-radius-md, 6px)",
+  marginTop: "var(--of-spacing-2, 6px)"
+};
+function normalize(value) {
+  if (!value || !Array.isArray(value.groups) || value.groups.length === 0) {
+    return { groups: [{ operator: "all", conditions: [] }] };
+  }
+  return value;
+}
+function ConditionBuilder({
+  value,
+  onChange,
+  properties = [],
+  operators = defaultOperators
+}) {
+  const t = useTranslation();
+  const current = normalize(value);
+  const emit = (groups) => {
+    onChange({ groups: groups.length > 0 ? groups : [{ operator: "all", conditions: [] }] });
+  };
+  const handleGroupChange = (index, group) => {
+    const groups = [...current.groups];
+    groups[index] = group;
+    emit(groups);
+  };
+  const handleGroupRemove = (index) => {
+    emit(current.groups.filter((_, i) => i !== index));
+  };
+  const handleAddGroup = () => {
+    emit([
+      ...current.groups,
+      { operator: "all", conditions: [{ fact: "", operator: "equal", value: "" }] }
+    ]);
+  };
+  return /* @__PURE__ */ jsxs9("div", { style: containerStyle3, children: [
+    /* @__PURE__ */ jsx20("div", { style: topLabelStyle, children: t("conditionBuilder.topLevelLabel") }),
+    current.groups.map((group, index) => /* @__PURE__ */ jsxs9(React5.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsxs9("div", { style: orDividerStyle, children: [
+        /* @__PURE__ */ jsx20("div", { style: orLineStyle }),
+        /* @__PURE__ */ jsx20("span", { style: orTextStyle, children: "OR" }),
+        /* @__PURE__ */ jsx20("div", { style: orLineStyle })
+      ] }),
+      /* @__PURE__ */ jsx20(
+        ConditionGroupView,
+        {
+          group,
+          properties,
+          operators,
+          onChange: (updated) => handleGroupChange(index, updated),
+          onRemove: () => handleGroupRemove(index),
+          canRemove: current.groups.length > 1
+        }
+      )
+    ] }, index)),
+    /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        onClick: handleAddGroup,
+        style: addGroupButtonStyle,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.borderColor = "var(--of-color-interactive-primary, #3B82F6)";
+          e.currentTarget.style.color = "var(--of-color-interactive-primary, #3B82F6)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.borderColor = "var(--of-color-border-primary, #D1D5DB)";
+          e.currentTarget.style.color = "var(--of-color-text-tertiary, #6B7280)";
+        },
+        children: [
+          "+ ",
+          t("conditionBuilder.addGroup")
+        ]
+      }
+    )
+  ] });
+}
+
+// src/primitives/condition-builder/ConditionBuilderDialog.tsx
+import { useState as useState4, useCallback, useEffect as useEffect3, useRef } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+var backdropStyle = {
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e4,
+  animation: "of-dialog-fade-in 0.15s ease-out"
+};
+var dialogStyle = {
+  backgroundColor: "var(--of-panel-bg, #fff)",
+  borderRadius: "var(--of-radius-lg, 8px)",
+  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2)",
+  width: "min(680px, calc(100vw - 48px))",
+  maxHeight: "calc(100vh - 48px)",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  animation: "of-dialog-slide-in 0.15s ease-out"
+};
+var headerStyle3 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "var(--of-spacing-6, 16px) var(--of-spacing-7, 20px)",
+  borderBottom: "1px solid var(--of-color-border-secondary, #E5E7EB)",
+  flexShrink: 0
+};
+var titleStyle = {
+  fontSize: "var(--of-font-size-lg, 14px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-color-text-primary, #111827)"
+};
+var closeButtonStyle = {
+  padding: "var(--of-spacing-1, 4px) var(--of-spacing-2, 6px)",
+  border: "none",
+  background: "none",
+  color: "var(--of-color-text-muted, #9CA3AF)",
+  cursor: "pointer",
+  fontSize: "18px",
+  lineHeight: 1,
+  borderRadius: "var(--of-radius-sm, 4px)"
+};
+var bodyStyle = {
+  padding: "var(--of-spacing-7, 20px)",
+  overflowY: "auto",
+  flex: 1
+};
+var footerStyle = {
+  display: "flex",
+  justifyContent: "flex-end",
+  gap: "var(--of-spacing-3, 8px)",
+  padding: "var(--of-spacing-6, 16px) var(--of-spacing-7, 20px)",
+  borderTop: "1px solid var(--of-color-border-secondary, #E5E7EB)",
+  flexShrink: 0
+};
+var cancelButtonStyle = {
+  padding: "var(--of-button-padding, 8px 16px)",
+  border: "1px solid var(--of-color-border-primary, #D1D5DB)",
+  borderRadius: "var(--of-button-radius, 6px)",
+  backgroundColor: "var(--of-field-bg, #fff)",
+  color: "var(--of-color-text-secondary, #374151)",
+  cursor: "pointer",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  fontWeight: "var(--of-font-weight-medium, 500)"
+};
+var applyButtonStyle = {
+  padding: "var(--of-button-padding, 8px 16px)",
+  border: "none",
+  borderRadius: "var(--of-button-radius, 6px)",
+  backgroundColor: "var(--of-button-primary-bg, #3B82F6)",
+  color: "var(--of-button-primary-color, #fff)",
+  cursor: "pointer",
+  fontSize: "var(--of-font-size-sm, 12px)",
+  fontWeight: "var(--of-font-weight-medium, 500)"
+};
+var stylesInjected = false;
+function injectStyles() {
+  if (stylesInjected || typeof document === "undefined") return;
+  stylesInjected = true;
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes of-dialog-fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes of-dialog-slide-in {
+      from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+  `;
+  document.head.appendChild(style);
+}
+function ConditionBuilderDialog({
+  open,
+  onClose,
+  value,
+  onChange,
+  properties,
+  operators
+}) {
+  const t = useTranslation();
+  const [draft, setDraft] = useState4(value);
+  const backdropRef = useRef(null);
+  useEffect3(() => {
+    if (open) {
+      setDraft(value);
+      injectStyles();
+    }
+  }, [open, value]);
+  useEffect3(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  const handleDraftChange = useCallback((next) => {
+    setDraft(next);
+  }, []);
+  const handleApply = () => {
+    onChange(draft);
+    onClose();
+  };
+  const handleBackdropClick = (e) => {
+    if (e.target === backdropRef.current) {
+      onClose();
+    }
+  };
+  if (!open) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx21(
+      "div",
+      {
+        ref: backdropRef,
+        style: backdropStyle,
+        onClick: handleBackdropClick,
+        children: /* @__PURE__ */ jsxs10("div", { style: dialogStyle, role: "dialog", "aria-modal": "true", children: [
+          /* @__PURE__ */ jsxs10("div", { style: headerStyle3, children: [
+            /* @__PURE__ */ jsx21("div", { style: titleStyle, children: t("conditionBuilder.dialogTitle") }),
+            /* @__PURE__ */ jsx21(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                style: closeButtonStyle,
+                onMouseEnter: (e) => e.currentTarget.style.color = "var(--of-color-text-primary, #111827)",
+                onMouseLeave: (e) => e.currentTarget.style.color = "var(--of-color-text-muted, #9CA3AF)",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx21("div", { style: bodyStyle, children: /* @__PURE__ */ jsx21(
+            ConditionBuilder,
+            {
+              value: draft,
+              onChange: handleDraftChange,
+              properties,
+              operators
+            }
+          ) }),
+          /* @__PURE__ */ jsxs10("div", { style: footerStyle, children: [
+            /* @__PURE__ */ jsx21(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                style: cancelButtonStyle,
+                onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--of-color-bg-tertiary, #F3F4F6)",
+                onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--of-field-bg, #fff)",
+                children: t("conditionBuilder.cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx21(
+              "button",
+              {
+                type: "button",
+                onClick: handleApply,
+                style: applyButtonStyle,
+                onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--of-button-primary-bg-hover, #2563EB)",
+                onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--of-button-primary-bg, #3B82F6)",
+                children: t("conditionBuilder.apply")
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    document.body
+  );
+}
+
+// src/nodes/details/TriggerNodeDetail.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function TriggerNodeDetail({ node, onChange }) {
+  const t = useTranslation();
+  const data = node.data;
+  const handleEventChange = (event) => {
+    onChange({
+      ...data,
+      params: { ...data.params, event }
+    });
+  };
+  return /* @__PURE__ */ jsx22(FieldGroup, { label: t("nodeDetails.trigger.group"), children: /* @__PURE__ */ jsx22(
+    TextField,
+    {
+      label: t("nodeDetails.trigger.eventLabel"),
+      value: data.params?.event ?? "",
+      onChange: handleEventChange,
+      placeholder: t("nodeDetails.trigger.eventPlaceholder"),
+      hint: t("nodeDetails.trigger.eventHint")
+    }
+  ) });
+}
+
+// src/nodes/details/ActionNodeDetail.tsx
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+function ActionNodeDetail({ node, onChange }) {
+  const t = useTranslation();
+  const data = node.data;
+  const handleActionChange = (action) => {
+    onChange({
+      ...data,
+      action
+    });
+  };
+  const handleParamsChange = (params) => {
+    onChange({
+      ...data,
+      params
+    });
+  };
+  return /* @__PURE__ */ jsxs11(FieldGroup, { label: t("nodeDetails.action.group"), children: [
+    /* @__PURE__ */ jsx23(
+      TextField,
+      {
+        label: t("nodeDetails.action.nameLabel"),
+        value: data.action ?? "",
+        onChange: handleActionChange,
+        placeholder: t("nodeDetails.action.namePlaceholder"),
+        hint: t("nodeDetails.action.nameHint")
+      }
+    ),
+    /* @__PURE__ */ jsx23(
+      JsonField,
+      {
+        label: t("nodeDetails.action.paramsLabel"),
+        value: data.params ?? {},
+        onChange: handleParamsChange,
+        hint: t("nodeDetails.action.paramsHint"),
+        rows: 4
+      }
+    )
+  ] });
+}
+
+// src/nodes/details/ConditionNodeDetail.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+var EMPTY_CONDITIONS = {
+  groups: [{ operator: "all", conditions: [] }]
+};
+function countRules(conditions) {
+  if (!conditions || !Array.isArray(conditions.groups)) return 0;
+  return conditions.groups.reduce(
+    (sum, group) => sum + (group.conditions?.length ?? 0),
+    0
+  );
+}
+var openButtonStyle = {
+  width: "100%",
+  padding: "var(--of-spacing-3, 8px) var(--of-spacing-4, 10px)",
+  border: "1px solid var(--of-color-border-primary, #D1D5DB)",
+  borderRadius: "var(--of-field-radius, 6px)",
+  backgroundColor: "var(--of-field-bg, #fff)",
+  color: "var(--of-color-text-primary, #111827)",
+  cursor: "pointer",
+  fontSize: "var(--of-field-font-size, 13px)",
+  textAlign: "left",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between"
+};
+var ruleCountStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-color-text-muted, #9CA3AF)"
+};
+function ConditionNodeDetail({
+  node,
+  onChange,
+  conditionProperties,
+  conditionOperators
+}) {
+  const t = useTranslation();
+  const data = node.data;
+  const [dialogOpen, setDialogOpen] = useState5(false);
+  const conditions = data.conditions ?? EMPTY_CONDITIONS;
+  const ruleCount = countRules(conditions);
+  const handleConditionsChange = (updated) => {
+    onChange({
+      ...data,
+      conditions: updated
+    });
+  };
+  const ruleLabel = ruleCount === 0 ? t("conditionBuilder.noConditions") : ruleCount === 1 ? t("conditionBuilder.ruleCountSingular") : t("conditionBuilder.ruleCount", { count: String(ruleCount) });
+  return /* @__PURE__ */ jsxs12(FieldGroup, { label: t("nodeDetails.condition.group"), children: [
+    /* @__PURE__ */ jsxs12("div", { style: { marginBottom: "var(--of-spacing-5, 12px)" }, children: [
+      /* @__PURE__ */ jsx24(
+        "label",
+        {
+          style: {
+            display: "block",
+            fontSize: "var(--of-field-label-size, 12px)",
+            fontWeight: "var(--of-font-weight-medium, 500)",
+            color: "var(--of-field-label-color, #374151)",
+            marginBottom: "var(--of-spacing-1, 4px)"
+          },
+          children: t("nodeDetails.condition.conditionsLabel")
+        }
+      ),
+      /* @__PURE__ */ jsxs12(
+        "button",
+        {
+          type: "button",
+          onClick: () => setDialogOpen(true),
+          style: openButtonStyle,
+          onMouseEnter: (e) => e.currentTarget.style.borderColor = "var(--of-field-border-focus, #3B82F6)",
+          onMouseLeave: (e) => e.currentTarget.style.borderColor = "var(--of-color-border-primary, #D1D5DB)",
+          children: [
+            /* @__PURE__ */ jsx24("span", { children: ruleLabel }),
+            /* @__PURE__ */ jsx24("span", { style: ruleCountStyle, children: t("conditionBuilder.editButton") })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx24(
+      ConditionBuilderDialog,
+      {
+        open: dialogOpen,
+        onClose: () => setDialogOpen(false),
+        value: conditions,
+        onChange: handleConditionsChange,
+        properties: conditionProperties,
+        operators: conditionOperators
+      }
+    )
+  ] });
+}
+
+// src/nodes/details/ExitNodeDetail.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+function ExitNodeDetail(_props) {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsx25(FieldGroup, { label: t("nodeDetails.exit.group"), children: /* @__PURE__ */ jsx25("p", { style: { fontSize: "13px", color: "#6B7280", margin: 0 }, children: t("nodeDetails.exit.message") }) });
+}
+
+// src/nodes/details/WaitNodeDetail.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function WaitNodeDetail({ node, onChange }) {
+  const t = useTranslation();
+  const data = node.data;
+  const handleDurationChange = (duration) => {
+    onChange({
+      ...data,
+      params: { ...data.params, duration }
+    });
+  };
+  return /* @__PURE__ */ jsx26(FieldGroup, { label: t("nodeDetails.wait.group"), children: /* @__PURE__ */ jsx26(
+    DurationField,
+    {
+      label: t("nodeDetails.wait.durationLabel"),
+      value: data.params?.duration ?? 6e4,
+      onChange: handleDurationChange,
+      hint: t("nodeDetails.wait.durationHint")
+    }
+  ) });
+}
+
+// src/nodes/details/TriggerOrTimeoutNodeDetail.tsx
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+function TriggerOrTimeoutNodeDetail({ node, onChange }) {
+  const t = useTranslation();
+  const data = node.data;
+  const handleEventChange = (event) => {
+    onChange({
+      ...data,
+      params: { ...data.params, event }
+    });
+  };
+  const handleDurationChange = (duration) => {
+    onChange({
+      ...data,
+      params: { ...data.params, duration }
+    });
+  };
+  return /* @__PURE__ */ jsxs13(FieldGroup, { label: t("nodeDetails.triggerOrTimeout.group"), children: [
+    /* @__PURE__ */ jsx27(
+      TextField,
+      {
+        label: t("nodeDetails.triggerOrTimeout.eventLabel"),
+        value: data.params?.event ?? "",
+        onChange: handleEventChange,
+        placeholder: t("nodeDetails.triggerOrTimeout.eventPlaceholder"),
+        hint: t("nodeDetails.triggerOrTimeout.eventHint")
+      }
+    ),
+    /* @__PURE__ */ jsx27(
+      DurationField,
+      {
+        label: t("nodeDetails.triggerOrTimeout.durationLabel"),
+        value: data.params?.duration ?? 6e4,
+        onChange: handleDurationChange,
+        hint: t("nodeDetails.triggerOrTimeout.durationHint")
+      }
+    )
+  ] });
+}
+
+// src/nodes/icons/index.tsx
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+function TriggerIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsx28(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#4CAF50",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx28("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2" })
+    }
+  );
+}
+function ActionIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#2196F3",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx28("polygon", { points: "10 8 16 12 10 16 10 8", fill: "#2196F3" })
+      ]
+    }
+  );
+}
+function ConditionIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#FF9800",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx28("path", { d: "M12 3L21 12L12 21L3 12L12 3Z" }),
+        /* @__PURE__ */ jsx28("path", { d: "M9 12L11 14L15 10" })
+      ]
+    }
+  );
+}
+function WaitIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#9C27B0",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx28("polyline", { points: "12 6 12 12 16 14" })
+      ]
+    }
+  );
+}
+function TriggerOrTimeoutIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#607D8B",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx28("polyline", { points: "12 6 12 12 16 14" }),
+        /* @__PURE__ */ jsx28("path", { d: "M17 2L19 6L15 6L17 2", fill: "#607D8B" })
+      ]
+    }
+  );
+}
+function ExitIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#F44336",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx28("rect", { x: "8", y: "8", width: "8", height: "8", fill: "#F44336" })
+      ]
+    }
+  );
+}
+
+// src/nodes/index.ts
+var defaultNodeTypes = [
+  {
+    type: "Trigger",
+    label: "Trigger",
+    description: "Starts the workflow when a specific event occurs",
+    Icon: TriggerIcon,
+    defaultData: { params: { event: "" } },
+    ViewComponent: TriggerNodeView,
+    DetailComponent: TriggerNodeDetail
+  },
+  {
+    type: "Action",
+    label: "Action",
+    description: "Performs an action and continues to the next node",
+    Icon: ActionIcon,
+    defaultData: { action: "", params: {} },
+    ViewComponent: ActionNodeView,
+    DetailComponent: ActionNodeDetail
+  },
+  {
+    type: "Condition",
+    label: "Condition",
+    description: "Branches the workflow based on conditions",
+    Icon: ConditionIcon,
+    defaultData: { conditions: { all: [] } },
+    ViewComponent: ConditionNodeView,
+    DetailComponent: ConditionNodeDetail
+  },
+  {
+    type: "Wait",
+    label: "Wait",
+    description: "Pauses the workflow for a specified duration",
+    Icon: WaitIcon,
+    defaultData: { params: { duration: 6e4 } },
+    ViewComponent: WaitNodeView,
+    DetailComponent: WaitNodeDetail
+  },
+  {
+    type: "TriggerOrTimeout",
+    label: "Trigger or Timeout",
+    description: "Waits for an event or times out after a duration",
+    Icon: TriggerOrTimeoutIcon,
+    defaultData: { params: { event: "", duration: 6e4 } },
+    ViewComponent: TriggerOrTimeoutNodeView,
+    DetailComponent: TriggerOrTimeoutNodeDetail
+  },
+  {
+    type: "Exit",
+    label: "Exit",
+    description: "Ends the workflow",
+    Icon: ExitIcon,
+    defaultData: {},
+    ViewComponent: ExitNodeView,
+    DetailComponent: ExitNodeDetail
+  }
+];
+function mergeNodeTypes(base, overrides) {
+  const map = new Map(base.map((t) => [t.type, t]));
+  for (const override of overrides) {
+    map.set(override.type, override);
+  }
+  return [...map.values()];
+}
+
+// src/context/WorkflowEditorContext.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+function findSelectedNodeId(nodes) {
+  return nodes.find((n) => n.selected)?.id ?? null;
+}
+function createInitialState(workflow, nodeTypes) {
+  const nodeTypesMap = /* @__PURE__ */ new Map();
+  const typesToUse = nodeTypes ?? defaultNodeTypes;
+  typesToUse.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: findSelectedNodeId(workflow.flow.nodes),
+      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: findSelectedNodeId(workflow.flow.nodes),
+        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: findSelectedNodeId(state.workflow.flow.nodes),
+          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;
+        }
+      }
+      for (const change of action.payload) {
+        if (change.type === "select" && !change.selected && change.id === newSelectedId) {
+          newSelectedId = null;
+        } else if (change.type === "remove" && change.id === newSelectedId) {
+          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 = createContext2(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,
+  onWorkflowChange,
+  onDirtyChange
+}) {
+  const [state, dispatch] = useReducer(
+    reducer,
+    { workflow, nodeTypes },
+    ({ workflow: workflow2, nodeTypes: nodeTypes2 }) => createInitialState(workflow2, nodeTypes2)
+  );
+  useEffect4(() => {
+    if (workflow) {
+      dispatch({ type: "LOAD_WORKFLOW", payload: workflow });
+    }
+  }, [workflow]);
+  useEffect4(() => {
+    onDirtyChange?.(state.isDirty);
+  }, [state.isDirty, onDirtyChange]);
+  useEffect4(() => {
+    if (state.isDirty && onWorkflowChange) {
+      const currentWorkflow = getWorkflowImpl();
+      onWorkflowChange(currentWorkflow);
+    }
+  }, [state.nodes, state.edges, state.options, state.name]);
+  const getWorkflowImpl = useCallback2(() => {
+    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 = useCallback2((workflow2) => {
+    dispatch({ type: "LOAD_WORKFLOW", payload: workflow2 });
+  }, []);
+  const resetWorkflow = useCallback2(() => {
+    dispatch({ type: "RESET_WORKFLOW" });
+  }, []);
+  const addNode = useCallback2(
+    (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 = useCallback2(
+    (nodeId, data) => {
+      dispatch({ type: "UPDATE_NODE", payload: { nodeId, data } });
+    },
+    []
+  );
+  const updateNodePosition = useCallback2(
+    (nodeId, position) => {
+      dispatch({ type: "UPDATE_NODE_POSITION", payload: { nodeId, position } });
+    },
+    []
+  );
+  const removeNode = useCallback2((nodeId) => {
+    dispatch({ type: "REMOVE_NODE", payload: nodeId });
+  }, []);
+  const selectNode = useCallback2((nodeId) => {
+    dispatch({ type: "SELECT_NODE", payload: nodeId });
+  }, []);
+  const addEdge = useCallback2(
+    (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 = useCallback2((edgeId) => {
+    dispatch({ type: "REMOVE_EDGE", payload: edgeId });
+  }, []);
+  const setName = useCallback2((name) => {
+    dispatch({ type: "SET_NAME", payload: name });
+  }, []);
+  const setOptions = useCallback2((options) => {
+    dispatch({ type: "SET_OPTIONS", payload: options });
+  }, []);
+  const registerNodeType = useCallback2((definition) => {
+    dispatch({ type: "REGISTER_NODE_TYPE", payload: definition });
+  }, []);
+  const getWorkflow = useCallback2(() => getWorkflowImpl(), [getWorkflowImpl]);
+  const markClean = useCallback2(() => {
+    dispatch({ type: "MARK_CLEAN" });
+  }, []);
+  const onNodesChange = useCallback2((changes) => {
+    dispatch({ type: "APPLY_NODE_CHANGES", payload: changes });
+  }, []);
+  const onEdgesChange = useCallback2((changes) => {
+    dispatch({ type: "APPLY_EDGE_CHANGES", payload: changes });
+  }, []);
+  const onConnect = useCallback2(
+    (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 = useMemo2(
+    () => ({
+      // 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__ */ jsx29(WorkflowEditorContext.Provider, { value, children });
+}
+function useWorkflowEditorContext() {
+  const context = useContext2(WorkflowEditorContext);
+  if (!context) {
+    throw new Error(
+      "useWorkflowEditorContext must be used within a WorkflowEditorProvider"
+    );
+  }
+  return context;
+}
+
+// src/components/WorkflowEditor.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function WorkflowEditor({
+  children,
+  workflow,
+  nodeTypes,
+  onWorkflowChange,
+  onDirtyChange,
+  translationFn,
+  translations
+}) {
+  return /* @__PURE__ */ jsx30(ReactFlowProvider, { children: /* @__PURE__ */ jsx30(
+    TranslationProvider,
+    {
+      translationFn,
+      translations,
+      children: /* @__PURE__ */ jsx30(
+        WorkflowEditorProvider,
+        {
+          workflow,
+          nodeTypes,
+          onWorkflowChange,
+          onDirtyChange,
+          children
+        }
+      )
+    }
+  ) });
+}
+
+// src/hooks/useNodeRegistry.ts
+import { useMemo as useMemo3 } from "react";
+function useNodeRegistry() {
+  const context = useWorkflowEditorContext();
+  const reactFlowNodeTypes = useMemo3(() => {
+    const types = {};
+    context.nodeTypes.forEach((def, type) => {
+      types[type] = def.ViewComponent;
+    });
+    return types;
+  }, [context.nodeTypes]);
+  const nodeTypesList = useMemo3(
+    () => 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 useCallback3 } from "react";
+import { useReactFlow } from "@xyflow/react";
+function useDragAndDrop() {
+  const { addNode } = useWorkflowEditorContext();
+  const reactFlowInstance = useReactFlow();
+  const onDragStart = useCallback3(
+    (event, nodeType) => {
+      event.dataTransfer.setData("application/reactflow", nodeType);
+      event.dataTransfer.effectAllowed = "move";
+    },
+    []
+  );
+  const onDragOver = useCallback3((event) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+  const onDrop = useCallback3(
+    (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 jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+var panelStyle = {
+  backgroundColor: "var(--of-panel-bg, #fff)",
+  borderRadius: "var(--of-panel-radius, 8px)",
+  padding: "var(--of-panel-padding, 12px)",
+  boxShadow: "var(--of-panel-shadow, 0 2px 8px rgba(0,0,0,0.1))",
+  minWidth: "180px"
+};
+var titleStyle2 = {
+  fontSize: "var(--of-panel-title-size, 12px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-panel-title-color, #374151)",
+  marginBottom: "var(--of-spacing-5, 12px)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var itemStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-3, 8px)",
+  padding: "var(--of-spacing-3, 8px) var(--of-spacing-4, 10px)",
+  borderRadius: "var(--of-radius-md, 6px)",
+  cursor: "grab",
+  marginBottom: "var(--of-spacing-1, 4px)",
+  border: "1px solid var(--of-color-border-secondary, #E5E7EB)",
+  backgroundColor: "var(--of-color-bg-primary, #fff)",
+  transition: "all var(--of-transition-fast, 0.15s)"
+};
+var itemIconStyle = {
+  width: "24px",
+  height: "24px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+};
+var itemTextStyle = {
+  flex: 1
+};
+var itemLabelStyle = {
+  fontSize: "var(--of-field-font-size, 13px)",
+  fontWeight: "var(--of-font-weight-medium, 500)",
+  color: "var(--of-color-text-primary, #111827)"
+};
+var itemDescStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-color-text-tertiary, #6B7280)",
+  marginTop: "2px"
+};
+function NodeItem({
+  nodeType,
+  onDragStart,
+  showDescription = true
+}) {
+  const IconComponent = nodeType.Icon;
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      style: itemStyle,
+      draggable: true,
+      onDragStart: (e) => onDragStart(e, nodeType.type),
+      onMouseEnter: (e) => {
+        e.currentTarget.style.borderColor = "var(--of-color-border-focus, #3B82F6)";
+        e.currentTarget.style.backgroundColor = "var(--of-color-bg-secondary, #F9FAFB)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.borderColor = "var(--of-color-border-secondary, #E5E7EB)";
+        e.currentTarget.style.backgroundColor = "var(--of-color-bg-primary, #fff)";
+      },
+      children: [
+        /* @__PURE__ */ jsx31("div", { style: itemIconStyle, children: IconComponent ? /* @__PURE__ */ jsx31(IconComponent, { size: 24 }) : null }),
+        /* @__PURE__ */ jsxs15("div", { style: itemTextStyle, children: [
+          /* @__PURE__ */ jsx31("div", { style: itemLabelStyle, children: nodeType.label }),
+          showDescription && nodeType.description && /* @__PURE__ */ jsx31("div", { style: itemDescStyle, children: nodeType.description })
+        ] })
+      ]
+    }
+  );
+}
+function NodesPanel({
+  className,
+  showDescriptions = true,
+  filter,
+  renderItem
+}) {
+  const { nodeTypesList } = useNodeRegistry();
+  const { onDragStart } = useDragAndDrop();
+  const t = useTranslation();
+  const filteredNodeTypes = filter ? nodeTypesList.filter(filter) : nodeTypesList;
+  return /* @__PURE__ */ jsxs15("div", { style: panelStyle, className, children: [
+    /* @__PURE__ */ jsx31("div", { style: titleStyle2, children: t("panels.nodes.title") }),
+    filteredNodeTypes.map(
+      (nodeType) => renderItem ? /* @__PURE__ */ jsx31(
+        "div",
+        {
+          draggable: true,
+          onDragStart: (e) => onDragStart(e, nodeType.type),
+          children: renderItem(nodeType)
+        },
+        nodeType.type
+      ) : /* @__PURE__ */ jsx31(
+        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 jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
+var panelStyle2 = {
+  backgroundColor: "var(--of-panel-bg, #fff)",
+  borderRadius: "var(--of-panel-radius, 8px)",
+  padding: "var(--of-panel-padding, 12px)",
+  boxShadow: "var(--of-panel-shadow, 0 2px 8px rgba(0,0,0,0.1))",
+  minWidth: "280px",
+  maxWidth: "320px"
+};
+var titleStyle3 = {
+  fontSize: "var(--of-panel-title-size, 12px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-panel-title-color, #374151)",
+  marginBottom: "var(--of-spacing-5, 12px)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var emptyStyle2 = {
+  fontSize: "var(--of-field-font-size, 13px)",
+  color: "var(--of-color-text-tertiary, #6B7280)",
+  textAlign: "center",
+  padding: "var(--of-spacing-7, 20px) 0"
+};
+var headerStyle4 = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--of-spacing-3, 8px)",
+  marginBottom: "var(--of-spacing-6, 16px)",
+  paddingBottom: "var(--of-spacing-5, 12px)",
+  borderBottom: "1px solid var(--of-color-border-secondary, #E5E7EB)"
+};
+var nodeTypeStyle = {
+  fontSize: "var(--of-font-size-lg, 14px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-color-text-primary, #111827)"
+};
+var nodeIdStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-color-text-muted, #9CA3AF)",
+  fontFamily: "var(--of-font-family-mono, monospace)"
+};
+var deleteButtonStyle = {
+  marginLeft: "auto",
+  padding: "var(--of-spacing-1, 4px) var(--of-spacing-3, 8px)",
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-button-danger-color, #DC2626)",
+  backgroundColor: "var(--of-button-danger-bg, #FEE2E2)",
+  border: "none",
+  borderRadius: "var(--of-radius-sm, 4px)",
+  cursor: "pointer"
+};
+function DetailPanel({
+  className,
+  emptyMessage,
+  showNodeType = true,
+  showNodeId = false
+}) {
+  const { selectedNode, nodeType, updateSelectedNode, removeSelectedNode } = useSelectedNode();
+  const t = useTranslation();
+  if (!selectedNode || !nodeType) {
+    return /* @__PURE__ */ jsxs16("div", { style: panelStyle2, className, children: [
+      /* @__PURE__ */ jsx32("div", { style: titleStyle3, children: t("panels.detail.title") }),
+      /* @__PURE__ */ jsx32("div", { style: emptyStyle2, children: emptyMessage ?? t("panels.detail.emptyMessage") })
+    ] });
+  }
+  const DetailComponent = nodeType.DetailComponent;
+  return /* @__PURE__ */ jsxs16("div", { style: panelStyle2, className, children: [
+    /* @__PURE__ */ jsx32("div", { style: titleStyle3, children: t("panels.detail.title") }),
+    /* @__PURE__ */ jsxs16("div", { style: headerStyle4, children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        showNodeType && /* @__PURE__ */ jsx32("div", { style: nodeTypeStyle, children: nodeType.label }),
+        showNodeId && /* @__PURE__ */ jsx32("div", { style: nodeIdStyle, children: selectedNode.id })
+      ] }),
+      /* @__PURE__ */ jsx32(
+        "button",
+        {
+          style: deleteButtonStyle,
+          onClick: removeSelectedNode,
+          title: t("panels.detail.deleteTitle"),
+          children: t("panels.detail.delete")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx32(
+      DetailComponent,
+      {
+        node: selectedNode,
+        onChange: (data) => updateSelectedNode(data)
+      }
+    )
+  ] });
+}
+
+// src/components/OptionsPanel.tsx
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+var panelStyle3 = {
+  backgroundColor: "var(--of-panel-bg, #fff)",
+  borderRadius: "var(--of-panel-radius, 8px)",
+  padding: "var(--of-panel-padding, 12px)",
+  boxShadow: "var(--of-panel-shadow, 0 2px 8px rgba(0,0,0,0.1))",
+  minWidth: "220px"
+};
+var titleStyle4 = {
+  fontSize: "var(--of-panel-title-size, 12px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-panel-title-color, #374151)",
+  marginBottom: "var(--of-spacing-5, 12px)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+function OptionsPanel({
+  className,
+  showFrequency = true,
+  customOptions
+}) {
+  const { options, setOptions } = useWorkflowEditorContext();
+  const t = useTranslation();
+  const frequencyOptions = [
+    { value: "one_time", label: t("panels.options.frequencyOneTime") },
+    { value: "every_rematch", label: t("panels.options.frequencyEveryRematch") }
+  ];
+  const handleFrequencyTypeChange = (type) => {
+    const newFrequency = {
+      type
+    };
+    if (type === "every_rematch") {
+      newFrequency.interval = options.frequency?.interval ?? 3600;
+    }
+    setOptions({ ...options, frequency: newFrequency });
+  };
+  const handleIntervalChange = (ms) => {
+    if (options.frequency) {
+      const intervalInSeconds = Math.round(ms / 1e3);
+      setOptions({
+        ...options,
+        frequency: { ...options.frequency, interval: intervalInSeconds }
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs17("div", { style: panelStyle3, className, children: [
+    /* @__PURE__ */ jsx33("div", { style: titleStyle4, children: t("panels.options.title") }),
+    showFrequency && /* @__PURE__ */ jsxs17(FieldGroup, { label: t("panels.options.frequencyGroup"), children: [
+      /* @__PURE__ */ jsx33(
+        SelectField,
+        {
+          label: t("panels.options.frequencyTypeLabel"),
+          value: options.frequency?.type ?? "one_time",
+          options: frequencyOptions,
+          onChange: handleFrequencyTypeChange,
+          hint: t("panels.options.frequencyTypeHint")
+        }
+      ),
+      options.frequency?.type === "every_rematch" && /* @__PURE__ */ jsx33(
+        DurationField,
+        {
+          label: t("panels.options.intervalLabel"),
+          value: (options.frequency?.interval ?? 3600) * 1e3,
+          onChange: handleIntervalChange,
+          hint: t("panels.options.intervalHint")
+        }
+      )
+    ] }),
+    customOptions
+  ] });
+}
+
+// src/components/ControlPanel.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+var panelStyle4 = {
+  backgroundColor: "var(--of-panel-bg, #fff)",
+  borderRadius: "var(--of-panel-radius, 8px)",
+  padding: "var(--of-panel-padding, 12px)",
+  boxShadow: "var(--of-panel-shadow, 0 2px 8px rgba(0,0,0,0.1))",
+  minWidth: "220px"
+};
+var titleStyle5 = {
+  fontSize: "var(--of-panel-title-size, 12px)",
+  fontWeight: "var(--of-font-weight-semibold, 600)",
+  color: "var(--of-panel-title-color, #374151)",
+  marginBottom: "var(--of-spacing-5, 12px)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+};
+var actionsStyle = {
+  display: "flex",
+  gap: "var(--of-spacing-3, 8px)",
+  marginTop: "var(--of-spacing-5, 12px)"
+};
+var buttonStyle = {
+  padding: "var(--of-button-padding, 8px 16px)",
+  fontSize: "var(--of-field-font-size, 13px)",
+  fontWeight: "var(--of-font-weight-medium, 500)",
+  borderRadius: "var(--of-button-radius, 6px)",
+  cursor: "pointer",
+  border: "none",
+  transition: "all var(--of-transition-fast, 0.15s)"
+};
+var saveButtonStyle = {
+  ...buttonStyle,
+  backgroundColor: "var(--of-button-primary-bg, #3B82F6)",
+  color: "var(--of-button-primary-color, #fff)"
+};
+var saveButtonDisabledStyle = {
+  ...saveButtonStyle,
+  backgroundColor: "var(--of-button-primary-bg-disabled, #93C5FD)",
+  cursor: "not-allowed"
+};
+var statusStyle = {
+  fontSize: "var(--of-font-size-xs, 11px)",
+  color: "var(--of-color-text-tertiary, #6B7280)",
+  marginTop: "var(--of-spacing-3, 8px)"
+};
+function ControlPanel({
+  className,
+  showName = true,
+  showSaveButton = true,
+  saveButtonLabel,
+  onSave,
+  renderActions
+}) {
+  const { name, setName, isDirty, getWorkflow, markClean } = useWorkflowEditorContext();
+  const t = useTranslation();
+  const [isSaving, setIsSaving] = useState6(false);
+  const [saveStatus, setSaveStatus] = useState6(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__ */ jsxs18("div", { style: panelStyle4, className, children: [
+    /* @__PURE__ */ jsx34("div", { style: titleStyle5, children: t("panels.control.title") }),
+    showName && /* @__PURE__ */ jsx34(
+      TextField,
+      {
+        label: t("panels.control.nameLabel"),
+        value: name,
+        onChange: setName,
+        placeholder: t("panels.control.namePlaceholder")
+      }
+    ),
+    /* @__PURE__ */ jsxs18("div", { style: actionsStyle, children: [
+      showSaveButton && onSave && /* @__PURE__ */ jsx34(
+        "button",
+        {
+          style: isSaving || !isDirty ? saveButtonDisabledStyle : saveButtonStyle,
+          onClick: handleSave,
+          disabled: isSaving || !isDirty,
+          children: isSaving ? t("panels.control.saving") : saveButtonLabel ?? "Save"
+        }
+      ),
+      renderActions?.({ isDirty, workflow: getWorkflow() })
+    ] }),
+    saveStatus && /* @__PURE__ */ jsx34(
+      "div",
+      {
+        style: {
+          ...statusStyle,
+          color: saveStatus === "saved" ? "var(--of-color-status-success, #059669)" : "var(--of-color-status-error, #DC2626)"
+        },
+        children: saveStatus === "saved" ? t("panels.control.savedSuccessfully") : t("panels.control.failedToSave")
+      }
+    ),
+    isDirty && !saveStatus && /* @__PURE__ */ jsx34("div", { style: statusStyle, children: t("panels.control.unsavedChanges") })
+  ] });
+}
+
+// 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
+  };
+}
+
+// src/styles/index.ts
+function cssVar(name, fallback) {
+  return fallback ? `var(${name}, ${fallback})` : `var(${name})`;
+}
+var themeVars = {
+  // Colors
+  color: {
+    bgPrimary: "var(--of-color-bg-primary, #fff)",
+    bgSecondary: "var(--of-color-bg-secondary, #F9FAFB)",
+    bgTertiary: "var(--of-color-bg-tertiary, #F3F4F6)",
+    bgDisabled: "var(--of-color-bg-disabled, #F3F4F6)",
+    textPrimary: "var(--of-color-text-primary, #111827)",
+    textSecondary: "var(--of-color-text-secondary, #374151)",
+    textTertiary: "var(--of-color-text-tertiary, #6B7280)",
+    textMuted: "var(--of-color-text-muted, #9CA3AF)",
+    textInverse: "var(--of-color-text-inverse, #fff)",
+    borderPrimary: "var(--of-color-border-primary, #D1D5DB)",
+    borderSecondary: "var(--of-color-border-secondary, #E5E7EB)",
+    borderFocus: "var(--of-color-border-focus, #3B82F6)",
+    interactivePrimary: "var(--of-color-interactive-primary, #3B82F6)",
+    interactivePrimaryHover: "var(--of-color-interactive-primary-hover, #2563EB)",
+    interactivePrimaryDisabled: "var(--of-color-interactive-primary-disabled, #93C5FD)",
+    statusSuccess: "var(--of-color-status-success, #059669)",
+    statusError: "var(--of-color-status-error, #DC2626)",
+    statusErrorBg: "var(--of-color-status-error-bg, #FEE2E2)",
+    statusWarning: "var(--of-color-status-warning, #FF9800)"
+  },
+  // Node colors
+  node: {
+    trigger: "var(--of-node-trigger-color, #4CAF50)",
+    action: "var(--of-node-action-color, #2196F3)",
+    condition: "var(--of-node-condition-color, #FF9800)",
+    exit: "var(--of-node-exit-color, #F44336)",
+    wait: "var(--of-node-wait-color, #9C27B0)",
+    triggerTimeout: "var(--of-node-trigger-timeout-color, #607D8B)",
+    bg: "var(--of-node-bg, #fff)",
+    contentColor: "var(--of-node-content-color, #666)",
+    shadow: "var(--of-node-shadow, 0 2px 4px rgba(0, 0, 0, 0.1))"
+  },
+  // Spacing
+  spacing: {
+    1: "var(--of-spacing-1, 4px)",
+    2: "var(--of-spacing-2, 6px)",
+    3: "var(--of-spacing-3, 8px)",
+    4: "var(--of-spacing-4, 10px)",
+    5: "var(--of-spacing-5, 12px)",
+    6: "var(--of-spacing-6, 16px)",
+    7: "var(--of-spacing-7, 20px)"
+  },
+  // Typography
+  font: {
+    sizeXs: "var(--of-font-size-xs, 11px)",
+    sizeSm: "var(--of-font-size-sm, 12px)",
+    sizeMd: "var(--of-font-size-md, 13px)",
+    sizeLg: "var(--of-font-size-lg, 14px)",
+    weightNormal: "var(--of-font-weight-normal, 400)",
+    weightMedium: "var(--of-font-weight-medium, 500)",
+    weightSemibold: "var(--of-font-weight-semibold, 600)",
+    familyBase: "var(--of-font-family-base, system-ui, sans-serif)",
+    familyMono: "var(--of-font-family-mono, monospace)"
+  },
+  // Border radius
+  radius: {
+    sm: "var(--of-radius-sm, 4px)",
+    md: "var(--of-radius-md, 6px)",
+    lg: "var(--of-radius-lg, 8px)"
+  },
+  // Shadows
+  shadow: {
+    panel: "var(--of-shadow-panel, 0 2px 8px rgba(0, 0, 0, 0.1))",
+    node: "var(--of-shadow-node, 0 2px 4px rgba(0, 0, 0, 0.1))"
+  },
+  // Transitions
+  transition: {
+    fast: "var(--of-transition-fast, 0.15s)",
+    normal: "var(--of-transition-normal, 0.2s)"
+  },
+  // Component-specific
+  panel: {
+    bg: "var(--of-panel-bg, #fff)",
+    shadow: "var(--of-panel-shadow, 0 2px 8px rgba(0, 0, 0, 0.1))",
+    radius: "var(--of-panel-radius, 8px)",
+    padding: "var(--of-panel-padding, 12px)",
+    titleColor: "var(--of-panel-title-color, #374151)",
+    titleSize: "var(--of-panel-title-size, 12px)"
+  },
+  field: {
+    bg: "var(--of-field-bg, #fff)",
+    border: "var(--of-field-border, #D1D5DB)",
+    borderFocus: "var(--of-field-border-focus, #3B82F6)",
+    borderError: "var(--of-field-border-error, #DC2626)",
+    radius: "var(--of-field-radius, 6px)",
+    padding: "var(--of-field-padding, 8px 10px)",
+    fontSize: "var(--of-field-font-size, 13px)",
+    labelColor: "var(--of-field-label-color, #374151)",
+    labelSize: "var(--of-field-label-size, 12px)",
+    hintColor: "var(--of-field-hint-color, #6B7280)",
+    errorColor: "var(--of-field-error-color, #DC2626)"
+  },
+  button: {
+    primaryBg: "var(--of-button-primary-bg, #3B82F6)",
+    primaryColor: "var(--of-button-primary-color, #fff)",
+    primaryBgHover: "var(--of-button-primary-bg-hover, #2563EB)",
+    primaryBgDisabled: "var(--of-button-primary-bg-disabled, #93C5FD)",
+    dangerBg: "var(--of-button-danger-bg, #FEE2E2)",
+    dangerColor: "var(--of-button-danger-color, #DC2626)",
+    radius: "var(--of-button-radius, 6px)",
+    padding: "var(--of-button-padding, 8px 16px)"
+  }
+};
+export {
+  ActionNodeDetail,
+  ActionNodeView,
+  BaseNodeView,
+  CheckboxField,
+  ConditionBuilder,
+  ConditionBuilderDialog,
+  ConditionNodeDetail,
+  ConditionNodeView,
+  ControlPanel,
+  DetailPanel,
+  DurationField,
+  ExitNodeDetail,
+  ExitNodeView,
+  Field,
+  FieldGroup,
+  JsonField,
+  NodesPanel,
+  NumberField,
+  OptionsPanel,
+  SelectField,
+  TextAreaField,
+  TextField,
+  TranslationProvider,
+  TriggerNodeDetail,
+  TriggerNodeView,
+  TriggerOrTimeoutNodeDetail,
+  TriggerOrTimeoutNodeView,
+  WaitNodeDetail,
+  WaitNodeView,
+  WorkflowEditor,
+  WorkflowEditorProvider,
+  createTranslationFunction,
+  cssVar,
+  defaultNodeTypes,
+  defaultOperators,
+  defaultTranslations,
+  mergeNodeTypes,
+  themeVars,
+  useDragAndDrop,
+  useEdges,
+  useNodeRegistry,
+  useNodes,
+  useSelectedNode,
+  useTranslation,
+  useWorkflowEditor,
+  useWorkflowEditorContext
+};