@waypointjs/builder 0.1.2 → 0.1.5

package/dist/index.js

@@ -1,8 +1,9 @@
 import { createRuntimeStore, getNextStep, validateSchema, getPreviousStep, resolveTree } from '@waypointjs/core';
-import { useState, useRef, useEffect } from 'react';
+import { createContext, useState, useRef, useEffect, useContext } from 'react';
 import { create } from 'zustand';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useWaypoint, useWaypointStep } from '@waypointjs/react';
+import { DevPanel } from '@waypointjs/devtools';
 
 // src/components/WaypointBuilder.tsx
 
@@ -194,6 +195,44 @@ var useBuilderStore = create((set, _get) => ({
     selectedFieldId: s.selectedStepId === stepId ? null : s.selectedFieldId,
     isDirty: true
   })),
+  duplicateStep: (stepId) => {
+    const state = _get();
+    const step = state.schema.steps.find((s) => s.id === stepId);
+    if (!step) return;
+    const newStepId = generateId("step");
+    const fieldIdMap = {};
+    for (const f of step.fields) {
+      fieldIdMap[f.id] = generateId("field");
+    }
+    const newFields = step.fields.map((f) => ({
+      ...f,
+      id: fieldIdMap[f.id],
+      dependsOn: f.dependsOn?.map((dep) => {
+        if (dep.startsWith(`${stepId}.`)) {
+          const oldFieldId = dep.slice(stepId.length + 1);
+          const newFieldId = fieldIdMap[oldFieldId];
+          return newFieldId ? `${newStepId}.${newFieldId}` : dep;
+        }
+        return dep;
+      })
+    }));
+    const newStep = {
+      ...step,
+      id: newStepId,
+      title: `${step.title} (copy)`,
+      url: `${step.url}-copy`,
+      fields: newFields
+    };
+    const stepIndex = state.schema.steps.findIndex((s) => s.id === stepId);
+    const newSteps = [...state.schema.steps];
+    newSteps.splice(stepIndex + 1, 0, newStep);
+    set({
+      schema: { ...state.schema, steps: newSteps },
+      selectedStepId: newStepId,
+      selectedFieldId: null,
+      isDirty: true
+    });
+  },
   reorderSteps: (fromIndex, toIndex) => set((s) => {
     const steps = [...s.schema.steps];
     const [moved] = steps.splice(fromIndex, 1);
@@ -246,6 +285,32 @@ var useBuilderStore = create((set, _get) => ({
     selectedFieldId: s.selectedFieldId === fieldId ? null : s.selectedFieldId,
     isDirty: true
   })),
+  duplicateField: (stepId, fieldId) => {
+    const state = _get();
+    const step = state.schema.steps.find((s) => s.id === stepId);
+    if (!step) return;
+    const field = step.fields.find((f) => f.id === fieldId);
+    if (!field) return;
+    const newFieldId = generateId("field");
+    const newField = {
+      ...field,
+      id: newFieldId,
+      label: `${field.label} (copy)`
+    };
+    const fieldIndex = step.fields.findIndex((f) => f.id === fieldId);
+    const newFields = [...step.fields];
+    newFields.splice(fieldIndex + 1, 0, newField);
+    set((s) => ({
+      schema: {
+        ...s.schema,
+        steps: s.schema.steps.map(
+          (st) => st.id === stepId ? { ...st, fields: newFields } : st
+        )
+      },
+      selectedFieldId: newFieldId,
+      isDirty: true
+    }));
+  },
   reorderFields: (stepId, fromIndex, toIndex) => set((s) => ({
     schema: {
       ...s.schema,
@@ -344,9 +409,32 @@ var useBuilderStore = create((set, _get) => ({
     isDirty: true
   }))
 }));
-var BLANK_FORM = { id: "", label: "", type: "string", blocking: false };
+var BuilderReadOnlyContext = createContext(false);
+function useBuilderReadOnly() {
+  return useContext(BuilderReadOnlyContext);
+}
+var BuilderCustomTypesContext = createContext([]);
+function useBuilderCustomTypes() {
+  return useContext(BuilderCustomTypesContext);
+}
+var BuilderExternalEnumsContext = createContext([]);
+function useBuilderExternalEnums() {
+  return useContext(BuilderExternalEnumsContext);
+}
+var BLANK_FORM = {
+  id: "",
+  label: "",
+  type: "string",
+  blocking: false
+};
 function ExternalVariablePanel() {
-  const { schema, addExternalVariable, updateExternalVariable, removeExternalVariable } = useBuilderStore();
+  const {
+    schema,
+    addExternalVariable,
+    updateExternalVariable,
+    removeExternalVariable
+  } = useBuilderStore();
+  const readOnly = useBuilderReadOnly();
   const variables = schema.externalVariables ?? [];
   const [isAdding, setIsAdding] = useState(false);
   const [editingId, setEditingId] = useState(null);
@@ -372,9 +460,11 @@ function ExternalVariablePanel() {
   }
   function validateForm() {
     if (!form.id.trim()) return "ID is required";
-    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(form.id.trim())) return "ID must be alphanumeric (no spaces)";
+    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(form.id.trim()))
+      return "ID must be alphanumeric (no spaces)";
     if (!form.label.trim()) return "Label is required";
-    if (isAdding && variables.some((v) => v.id === form.id.trim())) return `ID "${form.id}" already exists`;
+    if (isAdding && variables.some((v) => v.id === form.id.trim()))
+      return `ID "${form.id}" already exists`;
     return null;
   }
   function submitAdd() {
@@ -383,7 +473,12 @@ function ExternalVariablePanel() {
       setError(err);
       return;
     }
-    addExternalVariable({ id: form.id.trim(), label: form.label.trim(), type: form.type, blocking: form.blocking });
+    addExternalVariable({
+      id: form.id.trim(),
+      label: form.label.trim(),
+      type: form.type,
+      blocking: form.blocking
+    });
     setIsAdding(false);
     setForm(BLANK_FORM);
     setError(null);
@@ -395,7 +490,11 @@ function ExternalVariablePanel() {
       return;
     }
     if (!editingId) return;
-    updateExternalVariable(editingId, { label: form.label.trim(), type: form.type, blocking: form.blocking });
+    updateExternalVariable(editingId, {
+      label: form.label.trim(),
+      type: form.type,
+      blocking: form.blocking
+    });
     setEditingId(null);
     setError(null);
   }
@@ -409,7 +508,15 @@ function ExternalVariablePanel() {
   return /* @__PURE__ */ jsxs("div", { style: panelStyle, children: [
     /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
       /* @__PURE__ */ jsx("span", { style: titleStyle, children: "External Variables" }),
-      !isAdding && /* @__PURE__ */ jsx("button", { style: addBtnStyle, onClick: startAdd, title: "Add external variable", children: "+ Add" })
+      !readOnly && !isAdding && /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: addBtnStyle,
+          onClick: startAdd,
+          title: "Add external variable",
+          children: "+ Add"
+        }
+      )
     ] }),
     variables.length === 0 && !isAdding && /* @__PURE__ */ jsxs("p", { style: emptyStyle, children: [
       "No external variables declared.",
@@ -423,37 +530,55 @@ function ExternalVariablePanel() {
     variables.map((v) => {
       const refs = usageMap.get(v.id) ?? [];
       const isBeingEdited = editingId === v.id;
-      return /* @__PURE__ */ jsx("div", { style: { ...varRowStyle, ...isBeingEdited ? varRowActiveStyle : {} }, children: isBeingEdited ? /* @__PURE__ */ jsx(
-        VarForm,
+      return /* @__PURE__ */ jsx(
+        "div",
         {
-          form,
-          onChange: setForm,
-          error,
-          onSubmit: submitEdit,
-          onCancel: cancelForm,
-          submitLabel: "Save",
-          idReadOnly: true
-        }
-      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("div", { style: varMainStyle, children: [
-          /* @__PURE__ */ jsxs("div", { style: varTopRowStyle, children: [
-            /* @__PURE__ */ jsxs("span", { style: varIdStyle, children: [
-              "$",
-              `ext.${v.id}`
+          style: {
+            ...varRowStyle,
+            ...isBeingEdited ? varRowActiveStyle : {}
+          },
+          children: isBeingEdited ? /* @__PURE__ */ jsx(
+            VarForm,
+            {
+              form,
+              onChange: setForm,
+              error,
+              onSubmit: submitEdit,
+              onCancel: cancelForm,
+              submitLabel: "Save",
+              idReadOnly: true
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { style: varMainStyle, children: [
+              /* @__PURE__ */ jsxs("div", { style: varTopRowStyle, children: [
+                /* @__PURE__ */ jsxs("span", { style: varIdStyle, children: [
+                  "$",
+                  `ext.${v.id}`
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: badgeRowStyle, children: [
+                  /* @__PURE__ */ jsx(TypeBadge, { type: v.type }),
+                  v.blocking && /* @__PURE__ */ jsx("span", { style: blockingBadgeStyle, children: "blocking" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("span", { style: varLabelStyle, children: v.label }),
+              refs.length > 0 && /* @__PURE__ */ jsx("div", { style: refsStyle, children: refs.map((ref, i) => /* @__PURE__ */ jsx("span", { style: refChipStyle, children: ref }, i)) })
             ] }),
-            /* @__PURE__ */ jsxs("div", { style: badgeRowStyle, children: [
-              /* @__PURE__ */ jsx(TypeBadge, { type: v.type }),
-              v.blocking && /* @__PURE__ */ jsx("span", { style: blockingBadgeStyle, children: "blocking" })
+            !readOnly && /* @__PURE__ */ jsxs("div", { style: varActionsStyle, children: [
+              /* @__PURE__ */ jsx("button", { style: actionBtnStyle, onClick: () => startEdit(v), children: "Edit" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  style: { ...actionBtnStyle, color: "#ef4444" },
+                  title: "Remove variable",
+                  onClick: () => remove(v.id),
+                  children: "\u2715"
+                }
+              )
             ] })
-          ] }),
-          /* @__PURE__ */ jsx("span", { style: varLabelStyle, children: v.label }),
-          refs.length > 0 && /* @__PURE__ */ jsx("div", { style: refsStyle, children: refs.map((ref, i) => /* @__PURE__ */ jsx("span", { style: refChipStyle, children: ref }, i)) })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { style: varActionsStyle, children: [
-          /* @__PURE__ */ jsx("button", { style: actionBtnStyle, onClick: () => startEdit(v), children: "Edit" }),
-          /* @__PURE__ */ jsx("button", { style: { ...actionBtnStyle, color: "#ef4444" }, title: "Remove variable", onClick: () => remove(v.id), children: "\u2715" })
-        ] })
-      ] }) }, v.id);
+          ] })
+        },
+        v.id
+      );
     }),
     isAdding && /* @__PURE__ */ jsx("div", { style: { ...varRowStyle, ...varRowActiveStyle }, children: /* @__PURE__ */ jsx(
       VarForm,
@@ -468,7 +593,15 @@ function ExternalVariablePanel() {
     ) })
   ] });
 }
-function VarForm({ form, onChange, error, onSubmit, onCancel, submitLabel, idReadOnly }) {
+function VarForm({
+  form,
+  onChange,
+  error,
+  onSubmit,
+  onCancel,
+  submitLabel,
+  idReadOnly
+}) {
   function set(key, value) {
     onChange({ ...form, [key]: value });
   }
@@ -477,7 +610,10 @@ function VarForm({ form, onChange, error, onSubmit, onCancel, submitLabel, idRea
     /* @__PURE__ */ jsx(
       "input",
       {
-        style: { ...inputStyle, ...idReadOnly ? { background: "#f9fafb", color: "#6b7280" } : {} },
+        style: {
+          ...inputStyle,
+          ...idReadOnly ? { background: "#f9fafb", color: "#6b7280" } : {}
+        },
         value: form.id,
         onChange: (e) => set("id", e.target.value),
         placeholder: "e.g. userId",
@@ -495,12 +631,20 @@ function VarForm({ form, onChange, error, onSubmit, onCancel, submitLabel, idRea
       }
     ),
     /* @__PURE__ */ jsx("label", { style: formLabelStyle, children: "Type" }),
-    /* @__PURE__ */ jsxs("select", { style: selectStyle, value: form.type, onChange: (e) => set("type", e.target.value), children: [
-      /* @__PURE__ */ jsx("option", { value: "string", children: "string" }),
-      /* @__PURE__ */ jsx("option", { value: "number", children: "number" }),
-      /* @__PURE__ */ jsx("option", { value: "boolean", children: "boolean" }),
-      /* @__PURE__ */ jsx("option", { value: "object", children: "object" })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: selectStyle,
+        value: form.type,
+        onChange: (e) => set("type", e.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "string", children: "string" }),
+          /* @__PURE__ */ jsx("option", { value: "number", children: "number" }),
+          /* @__PURE__ */ jsx("option", { value: "boolean", children: "boolean" }),
+          /* @__PURE__ */ jsx("option", { value: "object", children: "object" })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs("label", { style: checkboxRowStyle, children: [
       /* @__PURE__ */ jsx(
         "input",
@@ -594,7 +738,8 @@ var emptyStyle = {
 };
 var codeStyle = {
   fontFamily: "monospace",
-  background: "#f3f4f6",
+  background: "#f97316",
+  color: "#070714",
   borderRadius: 3,
   padding: "1px 3px"
 };
@@ -745,15 +890,23 @@ var submitBtnStyle = {
 // src/hooks/useAllFieldPaths.ts
 function useAllFieldPaths(excludeStepId, excludeFieldId) {
   const { schema } = useBuilderStore();
+  const externalEnums = useBuilderExternalEnums();
   const paths = [];
   for (const step of schema.steps) {
     for (const field of step.fields) {
       if (step.id === excludeStepId && field.id === excludeFieldId) continue;
+      let options;
+      if (field.externalEnumId) {
+        options = externalEnums.find((e) => e.id === field.externalEnumId)?.values;
+      } else if (field.options?.length) {
+        options = field.options;
+      }
       paths.push({
         path: `${step.id}.${field.id}`,
         label: `${step.title} \u2192 ${field.label}`,
         stepId: step.id,
-        fieldId: field.id
+        fieldId: field.id,
+        options
       });
     }
   }
@@ -779,7 +932,9 @@ var OPERATORS = [
   { value: "notIn", label: "not in (comma list)", hasValue: true },
   { value: "matches", label: "matches regex", hasValue: true },
   { value: "exists", label: "exists", hasValue: false },
-  { value: "notExists", label: "not exists", hasValue: false }
+  { value: "notExists", label: "not exists", hasValue: false },
+  { value: "inEnum", label: "is in enum", hasValue: true, isEnum: true },
+  { value: "notInEnum", label: "not in enum", hasValue: true, isEnum: true }
 ];
 function ConditionBuilder({
   value,
@@ -788,6 +943,7 @@ function ConditionBuilder({
   excludeFieldId
 }) {
   const allPaths = useAllFieldPaths(excludeStepId, excludeFieldId);
+  const externalEnums = useBuilderExternalEnums();
   const group = value ?? { combinator: "and", rules: [] };
   const updateRule = (index, updates) => {
     const rules = group.rules.map((r, i) => i === index ? { ...r, ...updates } : r);
@@ -850,15 +1006,48 @@ function ConditionBuilder({
             children: OPERATORS.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
           }
         ),
-        opDef?.hasValue && /* @__PURE__ */ jsx(
-          "input",
+        opDef?.hasValue && (opDef.isEnum ? /* @__PURE__ */ jsxs(
+          "select",
           {
-            style: styles.valueInput,
-            placeholder: "value",
+            style: { ...styles.select, width: 140 },
             value: rule.value != null ? String(rule.value) : "",
-            onChange: (e) => updateRule(index, { value: e.target.value })
+            onChange: (e) => updateRule(index, { value: e.target.value }),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 pick enum \u2014" }),
+              externalEnums.map((en) => /* @__PURE__ */ jsx("option", { value: en.id, children: en.label }, en.id))
+            ]
           }
-        ),
+        ) : /* @__PURE__ */ jsxs("div", { style: styles.valueGroup, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles.valueInput,
+              placeholder: "value",
+              value: rule.value != null ? String(rule.value) : "",
+              onChange: (e) => updateRule(index, { value: e.target.value })
+            }
+          ),
+          externalEnums.length > 0 && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              style: styles.enumPicker,
+              title: "Pick a value from an enum",
+              value: "",
+              onChange: (e) => {
+                if (e.target.value) updateRule(index, { value: e.target.value });
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "\u229E" }),
+                externalEnums.map((en) => /* @__PURE__ */ jsx("optgroup", { label: en.label, children: en.values.map((v) => /* @__PURE__ */ jsxs("option", { value: String(v.value), children: [
+                  v.label,
+                  " (",
+                  v.value,
+                  ")"
+                ] }, String(v.value))) }, en.id))
+              ]
+            }
+          )
+        ] })),
         /* @__PURE__ */ jsx("button", { style: styles.removeBtn, onClick: () => removeRule(index), children: "\u2715" })
       ] }, index);
     }),
@@ -936,6 +1125,17 @@ var styles = {
     alignSelf: "flex-start",
     color: "var(--wp-text-secondary)"
   },
+  valueGroup: { display: "flex", alignItems: "center", gap: 4 },
+  enumPicker: {
+    fontSize: 11,
+    padding: "4px 4px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-primary)",
+    cursor: "pointer",
+    flexShrink: 0
+  },
   preview: { marginTop: 4 },
   previewLabel: {
     fontSize: 10,
@@ -957,6 +1157,190 @@ var styles = {
     color: "var(--wp-text-mono)"
   }
 };
+var VALIDATION_RULES = [
+  { type: "required", label: "Required", hasValue: false },
+  { type: "min", label: "Min value", hasValue: true },
+  { type: "max", label: "Max value", hasValue: true },
+  { type: "minLength", label: "Min length", hasValue: true },
+  { type: "maxLength", label: "Max length", hasValue: true },
+  { type: "email", label: "Email format", hasValue: false },
+  { type: "url", label: "URL format", hasValue: false },
+  { type: "regex", label: "Matches regex", hasValue: true },
+  { type: "equals", label: "equals", hasValue: true },
+  { type: "notEquals", label: "not equals", hasValue: true },
+  { type: "greaterThan", label: ">", hasValue: true },
+  { type: "greaterThanOrEqual", label: ">=", hasValue: true },
+  { type: "lessThan", label: "<", hasValue: true },
+  { type: "lessThanOrEqual", label: "<=", hasValue: true },
+  { type: "contains", label: "contains", hasValue: true },
+  { type: "notContains", label: "not contains", hasValue: true },
+  { type: "matches", label: "matches regex", hasValue: true },
+  { type: "inEnum", label: "is in enum", hasValue: true, isEnum: true },
+  { type: "notInEnum", label: "not in enum", hasValue: true, isEnum: true },
+  { type: "custom", label: "Custom validator", hasValue: false }
+];
+function ValidationBuilder({ value, onChange }) {
+  const externalEnums = useBuilderExternalEnums();
+  const updateRule = (index, updates) => {
+    onChange(value.map((r, i) => i === index ? { ...r, ...updates } : r));
+  };
+  const addRule = () => {
+    onChange([...value, { type: "required", message: "This field is required" }]);
+  };
+  const removeRule = (index) => {
+    onChange(value.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles2.container, children: [
+    value.length === 0 && /* @__PURE__ */ jsx("div", { style: styles2.empty, children: "No rules \u2014 field is optional by default." }),
+    value.map((rule, index) => {
+      const def = VALIDATION_RULES.find((r) => r.type === rule.type);
+      return /* @__PURE__ */ jsxs("div", { style: styles2.rule, children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            style: styles2.typeSelect,
+            value: rule.type,
+            onChange: (e) => updateRule(index, { type: e.target.value }),
+            children: VALIDATION_RULES.map((r) => /* @__PURE__ */ jsx("option", { value: r.type, children: r.label }, r.type))
+          }
+        ),
+        def?.hasValue && (def.isEnum ? /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: { ...styles2.typeSelect, flex: "0 0 140px" },
+            value: rule.value != null ? String(rule.value) : "",
+            onChange: (e) => updateRule(index, { value: e.target.value }),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 pick enum \u2014" }),
+              externalEnums.map((en) => /* @__PURE__ */ jsx("option", { value: en.id, children: en.label }, en.id))
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { style: styles2.valueGroup, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles2.valueInput,
+              placeholder: "value",
+              value: rule.value != null ? String(rule.value) : "",
+              onChange: (e) => updateRule(index, { value: e.target.value })
+            }
+          ),
+          externalEnums.length > 0 && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              style: styles2.enumPicker,
+              title: "Pick a value from an enum",
+              value: "",
+              onChange: (e) => {
+                if (e.target.value) updateRule(index, { value: e.target.value });
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "\u229E" }),
+                externalEnums.map((en) => /* @__PURE__ */ jsx("optgroup", { label: en.label, children: en.values.map((v) => /* @__PURE__ */ jsxs("option", { value: String(v.value), children: [
+                  v.label,
+                  " (",
+                  v.value,
+                  ")"
+                ] }, String(v.value))) }, en.id))
+              ]
+            }
+          )
+        ] })),
+        rule.type === "custom" && /* @__PURE__ */ jsx(
+          "input",
+          {
+            style: styles2.valueInput,
+            placeholder: "validatorId",
+            value: rule.customValidatorId ?? "",
+            onChange: (e) => updateRule(index, { customValidatorId: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            style: styles2.messageInput,
+            placeholder: "error message",
+            value: rule.message,
+            onChange: (e) => updateRule(index, { message: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { style: styles2.removeBtn, onClick: () => removeRule(index), children: "\u2715" })
+      ] }, index);
+    }),
+    /* @__PURE__ */ jsx("button", { style: styles2.addBtn, onClick: addRule, children: "+ Add rule" })
+  ] });
+}
+var styles2 = {
+  container: { display: "flex", flexDirection: "column", gap: 10 },
+  empty: { fontSize: 13, color: "var(--wp-text-subtle)", textAlign: "center", padding: "12px 0" },
+  rule: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    background: "var(--wp-surface)",
+    border: "1px solid var(--wp-border)",
+    borderRadius: "var(--wp-radius-lg)",
+    padding: "8px 10px"
+  },
+  typeSelect: {
+    flex: "0 0 150px",
+    fontSize: 12,
+    padding: "5px 6px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)"
+  },
+  valueGroup: { display: "flex", alignItems: "center", gap: 4 },
+  valueInput: {
+    width: 90,
+    fontSize: 12,
+    padding: "5px 6px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)"
+  },
+  enumPicker: {
+    fontSize: 11,
+    padding: "4px 4px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-primary)",
+    cursor: "pointer",
+    flexShrink: 0
+  },
+  messageInput: {
+    flex: 1,
+    fontSize: 12,
+    padding: "5px 6px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)",
+    minWidth: 0
+  },
+  removeBtn: {
+    border: "none",
+    background: "transparent",
+    color: "var(--wp-danger)",
+    cursor: "pointer",
+    fontSize: 13,
+    flexShrink: 0
+  },
+  addBtn: {
+    fontSize: 12,
+    padding: "6px 12px",
+    background: "var(--wp-surface-muted)",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer",
+    fontWeight: 500,
+    alignSelf: "flex-start",
+    color: "var(--wp-text-secondary)"
+  }
+};
 function DependsOnInput({
   value,
   onChange,
@@ -989,17 +1373,17 @@ function DependsOnInput({
   }, []);
   const getLabel = (path) => allPaths.find((p) => p.path === path)?.label ?? path;
   const isExternal = (path) => path.startsWith("$ext.");
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: styles2.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles2.tags, children: [
-      value.map((path) => /* @__PURE__ */ jsxs("span", { style: { ...styles2.tag, ...isExternal(path) ? styles2.tagExt : {} }, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: styles3.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles3.tags, children: [
+      value.map((path) => /* @__PURE__ */ jsxs("span", { style: { ...styles3.tag, ...isExternal(path) ? styles3.tagExt : {} }, children: [
         getLabel(path),
-        /* @__PURE__ */ jsx("button", { style: styles2.tagRemove, onClick: () => remove(path), children: "\u2715" })
+        /* @__PURE__ */ jsx("button", { style: styles3.tagRemove, onClick: () => remove(path), children: "\u2715" })
       ] }, path)),
       /* @__PURE__ */ jsx(
         "input",
         {
           ref: inputRef,
-          style: styles2.input,
+          style: styles3.input,
           placeholder: value.length === 0 ? "Search fields or $ext vars\u2026" : "Add more\u2026",
           value: query,
           onChange: (e) => {
@@ -1010,28 +1394,28 @@ function DependsOnInput({
         }
       )
     ] }),
-    open && /* @__PURE__ */ jsxs("div", { style: styles2.dropdown, children: [
-      available.length === 0 && /* @__PURE__ */ jsx("div", { style: styles2.noResults, children: allPaths.length === 0 ? "No fields available in the tree yet." : "No matching fields." }),
+    open && /* @__PURE__ */ jsxs("div", { style: styles3.dropdown, children: [
+      available.length === 0 && /* @__PURE__ */ jsx("div", { style: styles3.noResults, children: allPaths.length === 0 ? "No fields available in the tree yet." : "No matching fields." }),
       available.map((p) => /* @__PURE__ */ jsxs(
         "button",
         {
-          style: styles2.option,
+          style: styles3.option,
           onMouseDown: (e) => {
             e.preventDefault();
             add(p.path);
           },
           children: [
-            /* @__PURE__ */ jsx("span", { style: styles2.optionLabel, children: p.label }),
-            /* @__PURE__ */ jsx("span", { style: styles2.optionPath, children: p.path })
+            /* @__PURE__ */ jsx("span", { style: styles3.optionLabel, children: p.label }),
+            /* @__PURE__ */ jsx("span", { style: styles3.optionPath, children: p.path })
           ]
         },
         p.path
       ))
     ] }),
-    value.length > 0 && /* @__PURE__ */ jsx("div", { style: styles2.hint, children: "This field will be blocked until all dependencies have a value." })
+    value.length > 0 && /* @__PURE__ */ jsx("div", { style: styles3.hint, children: "This field will be blocked until all dependencies have a value." })
   ] });
 }
-var styles2 = {
+var styles3 = {
   container: { position: "relative" },
   tags: {
     display: "flex",
@@ -1113,15 +1497,15 @@ function Modal({ title, onClose, children, width = 560 }) {
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [onClose]);
-  return /* @__PURE__ */ jsx("div", { style: styles3.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: { ...styles3.panel, width }, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxs("div", { style: styles3.header, children: [
-      /* @__PURE__ */ jsx("span", { style: styles3.title, children: title }),
-      /* @__PURE__ */ jsx("button", { style: styles3.closeBtn, onClick: onClose, children: "\u2715" })
+  return /* @__PURE__ */ jsx("div", { style: styles4.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: { ...styles4.panel, width }, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { style: styles4.header, children: [
+      /* @__PURE__ */ jsx("span", { style: styles4.title, children: title }),
+      /* @__PURE__ */ jsx("button", { style: styles4.closeBtn, onClick: onClose, children: "\u2715" })
     ] }),
-    /* @__PURE__ */ jsx("div", { style: styles3.body, children })
+    /* @__PURE__ */ jsx("div", { style: styles4.body, children })
   ] }) });
 }
-var styles3 = {
+var styles4 = {
   overlay: {
     position: "fixed",
     inset: 0,
@@ -1158,16 +1542,7 @@ var styles3 = {
   },
   body: { overflowY: "auto", padding: 20, color: "var(--wp-text)" }
 };
-var VALIDATION_TYPES = [
-  { type: "required", label: "Required", hasValue: false },
-  { type: "min", label: "Min value", hasValue: true },
-  { type: "max", label: "Max value", hasValue: true },
-  { type: "minLength", label: "Min length", hasValue: true },
-  { type: "maxLength", label: "Max length", hasValue: true },
-  { type: "email", label: "Email format", hasValue: false },
-  { type: "url", label: "URL format", hasValue: false },
-  { type: "regex", label: "Regex pattern", hasValue: true }
-];
+var ENUM_FIELD_TYPES = ["select", "multiselect", "radio"];
 function FieldEditor() {
   const {
     schema,
@@ -1176,85 +1551,117 @@ function FieldEditor() {
     updateField,
     setFieldCondition
   } = useBuilderStore();
-  const [newValidationType, setNewValidationType] = useState("required");
+  const readOnly = useBuilderReadOnly();
+  const externalEnums = useBuilderExternalEnums();
   const [conditionModalOpen, setConditionModalOpen] = useState(false);
+  const [validationModalOpen, setValidationModalOpen] = useState(false);
   const step = schema.steps.find((s) => s.id === selectedStepId);
   const field = step?.fields.find((f) => f.id === selectedFieldId);
   if (!field || !step) {
-    return /* @__PURE__ */ jsx("div", { style: styles4.empty, children: "Select a field in the middle panel to edit its properties." });
+    return /* @__PURE__ */ jsx("div", { style: styles5.empty, children: "Select a field in the middle panel to edit its properties." });
   }
   const validation = field.validation ?? [];
   const isRequired = validation.some((v) => v.type === "required");
   const hasCondition = !!field.visibleWhen;
   const ruleCount = field.visibleWhen?.rules.length ?? 0;
-  const updateValidationRule = (index, updates) => {
-    const updated = validation.map((v, i) => i === index ? { ...v, ...updates } : v);
-    updateField(step.id, field.id, { validation: updated });
-  };
-  const removeValidationRule = (index) => {
-    const updated = validation.filter((_, i) => i !== index);
-    updateField(step.id, field.id, { validation: updated.length ? updated : void 0 });
-  };
-  const addValidationRule = () => {
-    const newRule = {
-      type: newValidationType,
-      message: `${newValidationType} error`
-    };
-    updateField(step.id, field.id, { validation: [...validation, newRule] });
+  const handleValidationChange = (rules) => {
+    updateField(step.id, field.id, { validation: rules.length ? rules : void 0 });
   };
   const handleDependsOnChange = (paths) => {
     updateField(step.id, field.id, { dependsOn: paths.length ? paths : void 0 });
   };
-  return /* @__PURE__ */ jsxs("div", { style: styles4.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles4.header, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles4.headerLeft, children: [
-        /* @__PURE__ */ jsx("span", { style: styles4.headerTitle, children: "Field Editor" }),
-        !isRequired && /* @__PURE__ */ jsx("span", { style: styles4.optionalBadge, children: "optional" }),
-        isRequired && /* @__PURE__ */ jsx("span", { style: styles4.requiredBadge, children: "required" })
+  return /* @__PURE__ */ jsxs("div", { style: styles5.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles5.header, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles5.headerLeft, children: [
+        /* @__PURE__ */ jsx("span", { style: styles5.headerTitle, children: "Field Editor" }),
+        !isRequired && /* @__PURE__ */ jsx("span", { style: styles5.optionalBadge, children: "optional" }),
+        isRequired && /* @__PURE__ */ jsx("span", { style: styles5.requiredBadge, children: "required" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: styles4.fieldId, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles5.fieldId, children: [
         "id: ",
         field.id
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles4.body, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles4.group, children: [
-        /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Label" }),
+    /* @__PURE__ */ jsxs("div", { style: styles5.body, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles5.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Label" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            style: styles4.input,
+            style: styles5.input,
             value: field.label,
             onChange: (e) => updateField(step.id, field.id, { label: e.target.value })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: styles4.group, children: [
-        /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Placeholder" }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Placeholder" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            style: styles4.input,
+            style: styles5.input,
             value: field.placeholder ?? "",
             placeholder: "Optional",
             onChange: (e) => updateField(step.id, field.id, { placeholder: e.target.value || void 0 })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: styles4.group, children: [
-        /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Default value" }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Default value" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            style: styles4.input,
+            style: styles5.input,
             value: field.defaultValue != null ? String(field.defaultValue) : "",
             placeholder: "Optional",
             onChange: (e) => updateField(step.id, field.id, { defaultValue: e.target.value || void 0 })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: styles4.group, children: [
-        /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Depends on" }),
+      ENUM_FIELD_TYPES.includes(field.type) && externalEnums.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles5.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Options source" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: styles5.input,
+            disabled: readOnly,
+            value: field.externalEnumId ?? "",
+            onChange: (e) => {
+              const enumId = e.target.value || void 0;
+              updateField(step.id, field.id, {
+                externalEnumId: enumId,
+                // Clear hardcoded options when switching to an enum
+                options: enumId ? void 0 : field.options
+              });
+            },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Hardcoded options \u2014" }),
+              externalEnums.map((en) => /* @__PURE__ */ jsxs("option", { value: en.id, children: [
+                en.label,
+                " (",
+                en.values.length,
+                " items)"
+              ] }, en.id))
+            ]
+          }
+        ),
+        field.externalEnumId && /* @__PURE__ */ jsx("div", { style: styles5.enumInfo, children: (() => {
+          const en = externalEnums.find((e) => e.id === field.externalEnumId);
+          return en ? /* @__PURE__ */ jsxs("span", { style: styles5.enumBadge, children: [
+            "\u229E ",
+            en.label,
+            " \xB7 ",
+            en.values.length,
+            " options"
+          ] }) : /* @__PURE__ */ jsxs("span", { style: styles5.enumMissing, children: [
+            '\u26A0 Enum "',
+            field.externalEnumId,
+            '" not found'
+          ] });
+        })() })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Depends on" }),
         /* @__PURE__ */ jsx(
           DependsOnInput,
           {
@@ -1265,92 +1672,79 @@ function FieldEditor() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { style: styles4.divider }),
-      /* @__PURE__ */ jsxs("div", { style: styles4.conditionRow, children: [
-        /* @__PURE__ */ jsxs("div", { style: styles4.conditionInfo, children: [
-          /* @__PURE__ */ jsx("div", { style: styles4.label, children: "Visibility condition" }),
-          hasCondition ? /* @__PURE__ */ jsxs("div", { style: styles4.conditionSummary, children: [
-            /* @__PURE__ */ jsxs("span", { style: styles4.conditionBadge, children: [
+      /* @__PURE__ */ jsx("div", { style: styles5.divider }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.conditionRow, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles5.conditionInfo, children: [
+          /* @__PURE__ */ jsx("div", { style: styles5.label, children: "Visibility condition" }),
+          hasCondition ? /* @__PURE__ */ jsxs("div", { style: styles5.conditionSummary, children: [
+            /* @__PURE__ */ jsxs("span", { style: styles5.conditionBadge, children: [
               ruleCount,
               " rule",
               ruleCount !== 1 ? "s" : "",
               " \xB7 ",
               field.visibleWhen.combinator.toUpperCase()
             ] }),
-            /* @__PURE__ */ jsx("span", { style: styles4.conditionDesc, children: "Field is conditional" })
-          ] }) : /* @__PURE__ */ jsx("div", { style: styles4.conditionNone, children: "Always visible" })
+            /* @__PURE__ */ jsx("span", { style: styles5.conditionDesc, children: "Field is conditional" })
+          ] }) : /* @__PURE__ */ jsx("div", { style: styles5.conditionNone, children: "Always visible" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: styles4.conditionActions, children: [
-          /* @__PURE__ */ jsx("button", { style: styles4.editConditionBtn, onClick: () => setConditionModalOpen(true), children: hasCondition ? "Edit" : "Add" }),
+        /* @__PURE__ */ jsxs("div", { style: styles5.conditionActions, children: [
+          /* @__PURE__ */ jsx("button", { style: styles5.editConditionBtn, onClick: () => setConditionModalOpen(true), children: hasCondition ? "Edit" : "Add" }),
           hasCondition && /* @__PURE__ */ jsx(
             "button",
             {
-              style: styles4.clearConditionBtn,
+              style: styles5.clearConditionBtn,
               onClick: () => setFieldCondition(step.id, field.id, void 0),
               children: "Clear"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { style: styles4.divider }),
-      /* @__PURE__ */ jsxs("div", { style: styles4.sectionTitle, children: [
-        "Validation",
-        !isRequired && /* @__PURE__ */ jsx("span", { style: styles4.optionalHint, children: '\u2014 no "required" rule \u2192 field is optional' })
-      ] }),
-      validation.length === 0 && /* @__PURE__ */ jsx("div", { style: styles4.noRules, children: "No rules \xB7 field is optional by default." }),
-      validation.map((rule, index) => {
-        const def = VALIDATION_TYPES.find((vt) => vt.type === rule.type);
-        return /* @__PURE__ */ jsxs("div", { style: styles4.ruleCard, children: [
-          /* @__PURE__ */ jsxs("div", { style: styles4.ruleHeader, children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  ...styles4.ruleBadge,
-                  ...rule.type === "required" ? styles4.requiredRuleBadge : {}
-                },
-                children: rule.type
-              }
-            ),
-            /* @__PURE__ */ jsx("button", { style: styles4.removeRuleBtn, onClick: () => removeValidationRule(index), children: "\u2715" })
-          ] }),
-          def?.hasValue && /* @__PURE__ */ jsxs("div", { style: styles4.ruleRow, children: [
-            /* @__PURE__ */ jsx("label", { style: styles4.ruleLabel, children: "Value" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                style: styles4.ruleInput,
-                value: rule.value != null ? String(rule.value) : "",
-                onChange: (e) => updateValidationRule(index, { value: e.target.value })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { style: styles4.ruleRow, children: [
-            /* @__PURE__ */ jsx("label", { style: styles4.ruleLabel, children: "Error message" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                style: styles4.ruleInput,
-                value: rule.message,
-                onChange: (e) => updateValidationRule(index, { message: e.target.value })
-              }
-            )
-          ] })
-        ] }, index);
-      }),
-      /* @__PURE__ */ jsxs("div", { style: styles4.addRule, children: [
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            style: styles4.ruleSelect,
-            value: newValidationType,
-            onChange: (e) => setNewValidationType(e.target.value),
-            children: VALIDATION_TYPES.map((vt) => /* @__PURE__ */ jsx("option", { value: vt.type, children: vt.label }, vt.type))
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { style: styles4.addRuleBtn, onClick: addValidationRule, children: "+ Add rule" })
+      /* @__PURE__ */ jsx("div", { style: styles5.divider }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.conditionRow, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles5.conditionInfo, children: [
+          /* @__PURE__ */ jsx("div", { style: styles5.label, children: "Validation" }),
+          validation.length > 0 ? /* @__PURE__ */ jsxs("div", { style: styles5.conditionSummary, children: [
+            /* @__PURE__ */ jsxs("span", { style: styles5.validationBadge, children: [
+              validation.length,
+              " rule",
+              validation.length !== 1 ? "s" : "",
+              isRequired ? " \xB7 required" : ""
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: styles5.conditionDesc, children: validation.map((r) => r.type).join(", ") })
+          ] }) : /* @__PURE__ */ jsx("div", { style: styles5.conditionNone, children: "No rules \xB7 field is optional" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles5.conditionActions, children: [
+          /* @__PURE__ */ jsx("button", { style: styles5.editConditionBtn, onClick: () => setValidationModalOpen(true), children: validation.length > 0 ? "Edit" : "Add" }),
+          validation.length > 0 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: styles5.clearConditionBtn,
+              onClick: () => updateField(step.id, field.id, { validation: void 0 }),
+              children: "Clear"
+            }
+          )
+        ] })
       ] })
     ] }),
+    validationModalOpen && /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        title: `Validation \u2014 "${field.label}"`,
+        onClose: () => setValidationModalOpen(false),
+        width: 680,
+        children: [
+          /* @__PURE__ */ jsx("p", { style: styles5.modalHint, children: "Define validation rules for this field. All rules must pass for the field to be valid." }),
+          /* @__PURE__ */ jsx(
+            ValidationBuilder,
+            {
+              value: validation,
+              onChange: handleValidationChange
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: styles5.modalFooter, children: /* @__PURE__ */ jsx("button", { style: styles5.modalCloseBtn, onClick: () => setValidationModalOpen(false), children: "Done" }) })
+        ]
+      }
+    ),
     conditionModalOpen && /* @__PURE__ */ jsxs(
       Modal,
       {
@@ -1358,7 +1752,7 @@ function FieldEditor() {
         onClose: () => setConditionModalOpen(false),
         width: 620,
         children: [
-          /* @__PURE__ */ jsx("p", { style: styles4.modalHint, children: "Define when this field is visible within its step." }),
+          /* @__PURE__ */ jsx("p", { style: styles5.modalHint, children: "Define when this field is visible within its step." }),
           /* @__PURE__ */ jsx(
             ConditionBuilder,
             {
@@ -1368,13 +1762,13 @@ function FieldEditor() {
               excludeFieldId: field.id
             }
           ),
-          /* @__PURE__ */ jsx("div", { style: styles4.modalFooter, children: /* @__PURE__ */ jsx("button", { style: styles4.modalCloseBtn, onClick: () => setConditionModalOpen(false), children: "Done" }) })
+          /* @__PURE__ */ jsx("div", { style: styles5.modalFooter, children: /* @__PURE__ */ jsx("button", { style: styles5.modalCloseBtn, onClick: () => setConditionModalOpen(false), children: "Done" }) })
         ]
       }
     )
   ] });
 }
-var styles4 = {
+var styles5 = {
   container: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" },
   empty: {
     display: "flex",
@@ -1458,60 +1852,30 @@ var styles4 = {
     borderRadius: "var(--wp-radius)",
     cursor: "pointer"
   },
-  sectionTitle: { fontSize: 12, fontWeight: 700, color: "var(--wp-text-secondary)", textTransform: "uppercase", letterSpacing: "0.05em" },
-  optionalHint: { fontSize: 10, color: "var(--wp-text-subtle)", fontWeight: 400, textTransform: "none", letterSpacing: 0 },
-  noRules: { fontSize: 12, color: "var(--wp-text-subtle)" },
-  ruleCard: {
-    background: "var(--wp-surface)",
-    border: "1px solid var(--wp-border)",
-    borderRadius: "var(--wp-radius-lg)",
-    padding: 10,
-    display: "flex",
-    flexDirection: "column",
-    gap: 8
-  },
-  ruleHeader: { display: "flex", justifyContent: "space-between", alignItems: "center" },
-  ruleBadge: {
+  validationBadge: {
     fontSize: 11,
     fontWeight: 700,
-    color: "var(--wp-primary-dark)",
     background: "var(--wp-primary-bg)",
+    color: "var(--wp-primary-dark)",
     padding: "2px 8px",
     borderRadius: 4
   },
-  requiredRuleBadge: { background: "var(--wp-danger-bg-strong)", color: "var(--wp-danger)" },
-  removeRuleBtn: { border: "none", background: "transparent", color: "var(--wp-danger)", cursor: "pointer", fontSize: 12 },
-  ruleRow: { display: "flex", flexDirection: "column", gap: 3 },
-  ruleLabel: { fontSize: 10, fontWeight: 600, color: "var(--wp-text-subtle)", textTransform: "uppercase" },
-  ruleInput: {
-    fontSize: 12,
-    padding: "4px 6px",
-    border: "1px solid var(--wp-border-muted)",
-    borderRadius: 4,
-    outline: "none",
-    background: "var(--wp-canvas)",
-    color: "var(--wp-text)"
-  },
-  addRule: { display: "flex", gap: 8, alignItems: "center" },
-  ruleSelect: {
-    flex: 1,
-    fontSize: 12,
-    padding: "5px 6px",
-    border: "1px solid var(--wp-border-muted)",
-    borderRadius: "var(--wp-radius)",
-    background: "var(--wp-canvas)",
-    color: "var(--wp-text)"
+  enumInfo: { marginTop: 4 },
+  enumBadge: {
+    fontSize: 11,
+    fontWeight: 600,
+    padding: "2px 8px",
+    background: "var(--wp-info-bg)",
+    color: "var(--wp-info-text)",
+    borderRadius: 4
   },
-  addRuleBtn: {
-    fontSize: 12,
-    padding: "5px 10px",
-    background: "var(--wp-surface-muted)",
-    border: "1px solid var(--wp-border-muted)",
-    borderRadius: "var(--wp-radius)",
-    cursor: "pointer",
-    fontWeight: 500,
-    whiteSpace: "nowrap",
-    color: "var(--wp-text-secondary)"
+  enumMissing: {
+    fontSize: 11,
+    fontWeight: 600,
+    padding: "2px 8px",
+    background: "var(--wp-warning-bg)",
+    color: "var(--wp-warning)",
+    borderRadius: 4
   },
   modalHint: { fontSize: 13, color: "var(--wp-text-muted)", marginBottom: 16, marginTop: 0 },
   modalFooter: { marginTop: 20, display: "flex", justifyContent: "flex-end" },
@@ -1645,10 +2009,14 @@ function FieldList() {
     selectedFieldId,
     addField,
     removeField,
+    duplicateField,
     updateField,
     selectField,
     reorderFields
   } = useBuilderStore();
+  const readOnly = useBuilderReadOnly();
+  const appCustomTypes = useBuilderCustomTypes();
+  const externalEnums = useBuilderExternalEnums();
   const [moveError, setMoveError] = useState(null);
   const step = schema.steps.find((s) => s.id === selectedStepId);
   const allDependencyTargets = /* @__PURE__ */ new Set();
@@ -1660,7 +2028,7 @@ function FieldList() {
     }
   }
   if (!step) {
-    return /* @__PURE__ */ jsx("div", { style: styles5.empty, children: "Select a step on the left to manage its fields." });
+    return /* @__PURE__ */ jsx("div", { style: styles6.empty, children: "Select a step on the left to manage its fields." });
   }
   const tryMove = (fromIndex, toIndex) => {
     const check = isFieldMoveValid(step.fields, step.id, fromIndex, toIndex);
@@ -1672,30 +2040,31 @@ function FieldList() {
     setMoveError(null);
     reorderFields(step.id, fromIndex, toIndex);
   };
-  return /* @__PURE__ */ jsxs("div", { style: styles5.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles5.header, children: [
+  return /* @__PURE__ */ jsxs("div", { style: styles6.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles6.header, children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("div", { style: styles5.stepTitle, children: step.title }),
-        /* @__PURE__ */ jsxs("div", { style: styles5.stepSub, children: [
+        /* @__PURE__ */ jsx("div", { style: styles6.stepTitle, children: step.title }),
+        /* @__PURE__ */ jsxs("div", { style: styles6.stepSub, children: [
           step.fields.length,
           " field",
           step.fields.length !== 1 ? "s" : ""
         ] })
       ] }),
-      /* @__PURE__ */ jsx("button", { style: styles5.addBtn, onClick: () => addField(step.id), children: "+ Add field" })
+      !readOnly && /* @__PURE__ */ jsx("button", { style: styles6.addBtn, onClick: () => addField(step.id), children: "+ Add field" })
     ] }),
-    moveError && /* @__PURE__ */ jsxs("div", { style: styles5.errorBanner, children: [
+    moveError && /* @__PURE__ */ jsxs("div", { style: styles6.errorBanner, children: [
       /* @__PURE__ */ jsx("span", { children: "\u26A0" }),
       " ",
       moveError
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles5.list, children: [
-      step.fields.length === 0 && /* @__PURE__ */ jsx("div", { style: styles5.emptyFields, children: 'No fields yet. Click "Add field" to start.' }),
+    /* @__PURE__ */ jsxs("div", { style: styles6.list, children: [
+      step.fields.length === 0 && /* @__PURE__ */ jsx("div", { style: styles6.emptyFields, children: 'No fields yet. Click "Add field" to start.' }),
       step.fields.map((field, index) => {
         const isSelected = field.id === selectedFieldId;
         const isRequired = field.validation?.some((v) => v.type === "required") ?? false;
         const hasCondition = !!field.visibleWhen;
         const hasDeps = (field.dependsOn?.length ?? 0) > 0;
+        const enumDef = field.externalEnumId ? externalEnums.find((e) => e.id === field.externalEnumId) : void 0;
         const isUsedAsDep = allDependencyTargets.has(`${step.id}.${field.id}`);
         const canMoveUp = index > 0 && isFieldMoveValid(step.fields, step.id, index, index - 1).valid;
         const canMoveDown = index < step.fields.length - 1 && isFieldMoveValid(step.fields, step.id, index, index + 1).valid;
@@ -1709,29 +2078,45 @@ function FieldList() {
         return /* @__PURE__ */ jsxs(
           "div",
           {
-            style: { ...styles5.card, ...isSelected ? styles5.cardSelected : {} },
+            style: { ...styles6.card, ...isSelected ? styles6.cardSelected : {} },
             onClick: () => selectField(field.id),
             children: [
-              /* @__PURE__ */ jsxs("div", { style: styles5.cardTop, children: [
-                /* @__PURE__ */ jsxs("div", { style: styles5.cardLeft, children: [
-                  /* @__PURE__ */ jsx("span", { style: styles5.typeBadge, children: field.type }),
-                  /* @__PURE__ */ jsx("span", { style: styles5.fieldLabel, children: field.label })
+              /* @__PURE__ */ jsxs("div", { style: styles6.cardTop, children: [
+                /* @__PURE__ */ jsxs("div", { style: styles6.cardLeft, children: [
+                  (() => {
+                    const ct = appCustomTypes.find((c) => c.id === field.type);
+                    return /* @__PURE__ */ jsx("span", { style: { ...styles6.typeBadge, ...ct ? styles6.typeBadgeCustom : {} }, children: ct ? `${ct.icon ? ct.icon + " " : ""}${ct.label}` : field.type });
+                  })(),
+                  /* @__PURE__ */ jsx("span", { style: styles6.fieldLabel, children: field.label })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { style: styles5.cardRight, children: [
-                  /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsxs("div", { style: styles6.cardRight, children: [
+                  !readOnly && /* @__PURE__ */ jsxs(
                     "select",
                     {
-                      style: styles5.typeSelect,
+                      style: styles6.typeSelect,
                       value: field.type,
                       onClick: (e) => e.stopPropagation(),
-                      onChange: (e) => updateField(step.id, field.id, { type: e.target.value }),
-                      children: FIELD_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t))
+                      onChange: (e) => {
+                        const newType = e.target.value;
+                        const customType = appCustomTypes.find((ct) => ct.id === newType);
+                        updateField(step.id, field.id, {
+                          type: newType,
+                          ...customType?.defaultValidation ? { validation: customType.defaultValidation } : {}
+                        });
+                      },
+                      children: [
+                        FIELD_TYPES.map((t) => /* @__PURE__ */ jsx("option", { value: t, children: t }, t)),
+                        appCustomTypes.length > 0 && /* @__PURE__ */ jsx("optgroup", { label: "Custom", children: appCustomTypes.map((ct) => /* @__PURE__ */ jsxs("option", { value: ct.id, children: [
+                          ct.icon ? `${ct.icon} ` : "",
+                          ct.label
+                        ] }, ct.id)) })
+                      ]
                     }
                   ),
-                  index > 0 && /* @__PURE__ */ jsx(
+                  !readOnly && index > 0 && /* @__PURE__ */ jsx(
                     "button",
                     {
-                      style: { ...styles5.iconBtn, ...canMoveUp ? {} : styles5.iconBtnBlocked },
+                      style: { ...styles6.iconBtn, ...canMoveUp ? {} : styles6.iconBtnBlocked },
                       title: canMoveUp ? "Move up" : "Can't move \u2014 dependency order required",
                       onClick: (e) => {
                         e.stopPropagation();
@@ -1740,10 +2125,10 @@ function FieldList() {
                       children: "\u2191"
                     }
                   ),
-                  index < step.fields.length - 1 && /* @__PURE__ */ jsx(
+                  !readOnly && index < step.fields.length - 1 && /* @__PURE__ */ jsx(
                     "button",
                     {
-                      style: { ...styles5.iconBtn, ...canMoveDown ? {} : styles5.iconBtnBlocked },
+                      style: { ...styles6.iconBtn, ...canMoveDown ? {} : styles6.iconBtnBlocked },
                       title: canMoveDown ? "Move down" : "Can't move \u2014 dependency order required",
                       onClick: (e) => {
                         e.stopPropagation();
@@ -1752,10 +2137,22 @@ function FieldList() {
                       children: "\u2193"
                     }
                   ),
-                  /* @__PURE__ */ jsx(
+                  !readOnly && /* @__PURE__ */ jsx(
                     "button",
                     {
-                      style: { ...styles5.iconBtn, color: "var(--wp-danger)" },
+                      style: styles6.iconBtn,
+                      title: "Duplicate field",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        duplicateField(step.id, field.id);
+                      },
+                      children: "\u29C9"
+                    }
+                  ),
+                  !readOnly && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      style: { ...styles6.iconBtn, color: "var(--wp-danger)" },
                       title: "Remove field",
                       onClick: (e) => {
                         e.stopPropagation();
@@ -1766,23 +2163,27 @@ function FieldList() {
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs("div", { style: styles5.badges, children: [
-                !isRequired && /* @__PURE__ */ jsx("span", { style: styles5.badgeOptional, children: "optional" }),
-                isRequired && /* @__PURE__ */ jsx("span", { style: styles5.badgeRequired, children: "required" }),
-                hasCondition && /* @__PURE__ */ jsx("span", { style: styles5.badgeCondition, children: "conditional" }),
-                hasDeps && /* @__PURE__ */ jsxs("span", { style: styles5.badgeDep, children: [
+              /* @__PURE__ */ jsxs("div", { style: styles6.badges, children: [
+                !isRequired && /* @__PURE__ */ jsx("span", { style: styles6.badgeOptional, children: "optional" }),
+                isRequired && /* @__PURE__ */ jsx("span", { style: styles6.badgeRequired, children: "required" }),
+                hasCondition && /* @__PURE__ */ jsx("span", { style: styles6.badgeCondition, children: "conditional" }),
+                hasDeps && /* @__PURE__ */ jsxs("span", { style: styles6.badgeDep, children: [
                   "depends on ",
                   field.dependsOn.length
                 ] }),
-                isUsedAsDep && /* @__PURE__ */ jsx("span", { style: styles5.badgeUsed, children: "\u2190 dependency" })
+                isUsedAsDep && /* @__PURE__ */ jsx("span", { style: styles6.badgeUsed, children: "\u2190 dependency" }),
+                field.externalEnumId && /* @__PURE__ */ jsxs("span", { style: styles6.badgeEnum, children: [
+                  "\u229E ",
+                  enumDef ? enumDef.label : field.externalEnumId
+                ] })
               ] }),
-              intraStepDeps.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles5.depRow, children: [
-                /* @__PURE__ */ jsx("span", { style: styles5.depLabel, children: "needs:" }),
-                intraStepDeps.map((label) => /* @__PURE__ */ jsx("span", { style: styles5.depBadge, children: label }, label))
+              intraStepDeps.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles6.depRow, children: [
+                /* @__PURE__ */ jsx("span", { style: styles6.depLabel, children: "needs:" }),
+                intraStepDeps.map((label) => /* @__PURE__ */ jsx("span", { style: styles6.depBadge, children: label }, label))
               ] }),
-              intraStepDependents.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles5.depRow, children: [
-                /* @__PURE__ */ jsx("span", { style: styles5.depLabelUsed, children: "used by:" }),
-                intraStepDependents.map((f) => /* @__PURE__ */ jsx("span", { style: styles5.depBadgeUsed, children: f.label }, f.id))
+              intraStepDependents.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles6.depRow, children: [
+                /* @__PURE__ */ jsx("span", { style: styles6.depLabelUsed, children: "used by:" }),
+                intraStepDependents.map((f) => /* @__PURE__ */ jsx("span", { style: styles6.depBadgeUsed, children: f.label }, f.id))
               ] })
             ]
           },
@@ -1792,7 +2193,7 @@ function FieldList() {
     ] })
   ] });
 }
-var styles5 = {
+var styles6 = {
   container: { display: "flex", flexDirection: "column", height: "100%" },
   empty: {
     display: "flex",
@@ -1861,6 +2262,10 @@ var styles5 = {
     fontWeight: 600,
     flexShrink: 0
   },
+  typeBadgeCustom: {
+    background: "var(--wp-success-bg)",
+    color: "var(--wp-success)"
+  },
   fieldLabel: {
     fontSize: 13,
     fontWeight: 600,
@@ -1935,6 +2340,14 @@ var styles5 = {
     borderRadius: 3,
     textTransform: "uppercase"
   },
+  badgeEnum: {
+    fontSize: 9,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-info-bg)",
+    color: "var(--wp-info-text)",
+    borderRadius: 3
+  },
   depRow: { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 4 },
   depLabel: { fontSize: 10, fontWeight: 600, color: "var(--wp-text-muted)", textTransform: "uppercase" },
   depLabelUsed: { fontSize: 10, fontWeight: 600, color: "var(--wp-success)", textTransform: "uppercase" },
@@ -1955,12 +2368,28 @@ var styles5 = {
     borderRadius: 4
   }
 };
-function PreviewPanel({ store, schema }) {
+function PreviewPanel({ store, schema, externalEnums }) {
   const [done, setDone] = useState(false);
-  const { tree, currentStep, progress } = useWaypoint(store);
+  const { tree, currentStep, progress } = useWaypoint(store, externalEnums);
   const stepId = currentStep?.definition.id ?? "";
   const { fields, stepData, setFieldValue } = useWaypointStep(store, stepId);
   const [errors, setErrors] = useState({});
+  const extVarDefs = schema.externalVariables ?? [];
+  const [mockVars, setMockVars] = useState(() => {
+    const initial = {};
+    for (const v of extVarDefs) {
+      initial[v.id] = v.type === "boolean" ? false : v.type === "number" ? 0 : "";
+    }
+    return initial;
+  });
+  useEffect(() => {
+    for (const [varId, value] of Object.entries(mockVars)) {
+      store.getState().setExternalVar(varId, value);
+    }
+  }, [mockVars]);
+  function handleMockVarChange(varId, value) {
+    setMockVars((prev) => ({ ...prev, [varId]: value }));
+  }
   function handleNext() {
     const newErrors = {};
     for (const field of fields) {
@@ -1981,7 +2410,7 @@ function PreviewPanel({ store, schema }) {
     const oldIds = tree.steps.map((s) => s.definition.id).join(",");
     store.getState().setStepData(stepId, stepData);
     const newData = store.getState().data;
-    const newTree = resolveTree(schema, newData, {});
+    const newTree = resolveTree(schema, newData, store.getState().externalVars, externalEnums);
     const newIds = newTree.steps.map((s) => s.definition.id).join(",");
     if (oldIds !== newIds) {
       store.getState().truncateHistoryAt(stepId);
@@ -1999,6 +2428,9 @@ function PreviewPanel({ store, schema }) {
   }
   function handleRestart() {
     store.getState().init(schema);
+    for (const [varId, value] of Object.entries(mockVars)) {
+      store.getState().setExternalVar(varId, value);
+    }
     setDone(false);
     setErrors({});
   }
@@ -2006,38 +2438,59 @@ function PreviewPanel({ store, schema }) {
     (s) => s.definition.id === currentStep?.definition.id
   );
   if (done) {
-    return /* @__PURE__ */ jsxs("div", { style: styles6.panel, children: [
-      /* @__PURE__ */ jsx("div", { style: styles6.leftCol, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs("div", { style: styles7.panel, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles7.leftCol, children: [
+        /* @__PURE__ */ jsx(
+          StepList,
+          {
+            tree,
+            currentIdx,
+            onSelect: (id) => store.getState().setCurrentStep(id)
+          }
+        ),
+        extVarDefs.length > 0 && /* @__PURE__ */ jsx(
+          MockVarPanel,
+          {
+            extVarDefs,
+            mockVars,
+            onChange: handleMockVarChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: styles7.divider }),
+      /* @__PURE__ */ jsx("div", { style: styles7.rightCol, children: /* @__PURE__ */ jsxs("div", { style: styles7.doneScreen, children: [
+        /* @__PURE__ */ jsx("div", { style: styles7.doneIcon, children: "\u2713" }),
+        /* @__PURE__ */ jsx("div", { style: styles7.doneTitle, children: "Parcours termin\xE9 !" }),
+        /* @__PURE__ */ jsx("p", { style: styles7.doneText, children: "Toutes les \xE9tapes ont \xE9t\xE9 compl\xE9t\xE9es avec succ\xE8s." }),
+        /* @__PURE__ */ jsx("button", { style: styles7.primaryBtn, onClick: handleRestart, children: "Recommencer" })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: styles7.panel, children: [
+    /* @__PURE__ */ jsx(DevPanel, { store }),
+    /* @__PURE__ */ jsxs("div", { style: styles7.leftCol, children: [
+      /* @__PURE__ */ jsx(
         StepList,
         {
           tree,
           currentIdx,
           onSelect: (id) => store.getState().setCurrentStep(id)
         }
-      ) }),
-      /* @__PURE__ */ jsx("div", { style: styles6.divider }),
-      /* @__PURE__ */ jsx("div", { style: styles6.rightCol, children: /* @__PURE__ */ jsxs("div", { style: styles6.doneScreen, children: [
-        /* @__PURE__ */ jsx("div", { style: styles6.doneIcon, children: "\u2713" }),
-        /* @__PURE__ */ jsx("div", { style: styles6.doneTitle, children: "Parcours termin\xE9 !" }),
-        /* @__PURE__ */ jsx("p", { style: styles6.doneText, children: "Toutes les \xE9tapes ont \xE9t\xE9 compl\xE9t\xE9es avec succ\xE8s." }),
-        /* @__PURE__ */ jsx("button", { style: styles6.primaryBtn, onClick: handleRestart, children: "Recommencer" })
-      ] }) })
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { style: styles6.panel, children: [
-    /* @__PURE__ */ jsx("div", { style: styles6.leftCol, children: /* @__PURE__ */ jsx(
-      StepList,
-      {
-        tree,
-        currentIdx,
-        onSelect: (id) => store.getState().setCurrentStep(id)
-      }
-    ) }),
-    /* @__PURE__ */ jsx("div", { style: styles6.divider }),
-    /* @__PURE__ */ jsx("div", { style: styles6.rightCol, children: /* @__PURE__ */ jsxs("div", { style: styles6.stepRenderer, children: [
-      /* @__PURE__ */ jsx("div", { style: styles6.progressTrack, children: /* @__PURE__ */ jsx("div", { style: { ...styles6.progressFill, width: `${progress}%` } }) }),
-      /* @__PURE__ */ jsx("h2", { style: styles6.stepTitle, children: currentStep?.definition.title ?? "" }),
-      /* @__PURE__ */ jsx("div", { style: styles6.fieldsContainer, children: fields.map((field) => /* @__PURE__ */ jsx(
+      ),
+      extVarDefs.length > 0 && /* @__PURE__ */ jsx(
+        MockVarPanel,
+        {
+          extVarDefs,
+          mockVars,
+          onChange: handleMockVarChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: styles7.divider }),
+    /* @__PURE__ */ jsx("div", { style: styles7.rightCol, children: /* @__PURE__ */ jsxs("div", { style: styles7.stepRenderer, children: [
+      /* @__PURE__ */ jsx("div", { style: styles7.progressTrack, children: /* @__PURE__ */ jsx("div", { style: { ...styles7.progressFill, width: `${progress}%` } }) }),
+      /* @__PURE__ */ jsx("h2", { style: styles7.stepTitle, children: currentStep?.definition.title ?? "" }),
+      /* @__PURE__ */ jsx("div", { style: styles7.fieldsContainer, children: fields.map((field) => /* @__PURE__ */ jsx(
         FieldRenderer,
         {
           field,
@@ -2056,9 +2509,9 @@ function PreviewPanel({ store, schema }) {
         },
         field.definition.id
       )) }),
-      /* @__PURE__ */ jsxs("div", { style: styles6.navRow, children: [
-        currentIdx > 0 && /* @__PURE__ */ jsx("button", { style: styles6.secondaryBtn, onClick: handlePrev, children: "\u2190 Pr\xE9c\xE9dent" }),
-        /* @__PURE__ */ jsx("button", { style: { ...styles6.primaryBtn, marginLeft: "auto" }, onClick: handleNext, children: getNextStep(tree.steps, stepId) ? "Continuer \u2192" : "Terminer \u2713" })
+      /* @__PURE__ */ jsxs("div", { style: styles7.navRow, children: [
+        currentIdx > 0 && /* @__PURE__ */ jsx("button", { style: styles7.secondaryBtn, onClick: handlePrev, children: "\u2190 Pr\xE9c\xE9dent" }),
+        /* @__PURE__ */ jsx("button", { style: { ...styles7.primaryBtn, marginLeft: "auto" }, onClick: handleNext, children: getNextStep(tree.steps, stepId) ? "Continuer \u2192" : "Terminer \u2713" })
       ] })
     ] }) })
   ] });
@@ -2068,8 +2521,8 @@ function StepList({ tree, currentIdx, onSelect }) {
     ...tree.steps.map((s) => ({ ...s, hidden: false })),
     ...tree.hiddenSteps.map((s) => ({ ...s, hidden: true }))
   ];
-  return /* @__PURE__ */ jsxs("div", { style: styles6.stepList, children: [
-    /* @__PURE__ */ jsx("div", { style: styles6.stepListTitle, children: "\xC9tapes" }),
+  return /* @__PURE__ */ jsxs("div", { style: styles7.stepList, children: [
+    /* @__PURE__ */ jsx("div", { style: styles7.stepListTitle, children: "\xC9tapes" }),
     allSteps.map((step) => {
       const isVisible = !step.hidden;
       const visIdx = tree.steps.findIndex((s) => s.definition.id === step.definition.id);
@@ -2083,23 +2536,23 @@ function StepList({ tree, currentIdx, onSelect }) {
         "div",
         {
           style: {
-            ...styles6.stepItem,
-            ...status === "current" ? styles6.stepItemCurrent : {},
-            ...status === "hidden" ? styles6.stepItemHidden : {},
+            ...styles7.stepItem,
+            ...status === "current" ? styles7.stepItemCurrent : {},
+            ...status === "hidden" ? styles7.stepItemHidden : {},
             cursor: status === "done" ? "pointer" : "default"
           },
           onClick: () => {
             if (status === "done") onSelect(step.definition.id);
           },
           children: [
-            /* @__PURE__ */ jsxs("span", { style: styles6.stepStatus, children: [
+            /* @__PURE__ */ jsxs("span", { style: styles7.stepStatus, children: [
               status === "done" && "\u2713",
               status === "current" && "\u2192",
               status === "upcoming" && "\u25CB",
               status === "hidden" && "\u2013"
             ] }),
-            /* @__PURE__ */ jsx("span", { style: styles6.stepName, children: step.definition.title }),
-            status === "hidden" && /* @__PURE__ */ jsx("span", { style: styles6.hiddenBadge, children: "hidden" })
+            /* @__PURE__ */ jsx("span", { style: styles7.stepName, children: step.definition.title }),
+            status === "hidden" && /* @__PURE__ */ jsx("span", { style: styles7.hiddenBadge, children: "hidden" })
           ]
         },
         step.definition.id
@@ -2107,13 +2560,51 @@ function StepList({ tree, currentIdx, onSelect }) {
     })
   ] });
 }
+function MockVarPanel({ extVarDefs, mockVars, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { style: styles7.mockPanel, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles7.mockPanelTitle, children: [
+      /* @__PURE__ */ jsx("span", { children: "\u26A1 External Variables" }),
+      /* @__PURE__ */ jsx("span", { style: styles7.mockPanelHint, children: "mock values" })
+    ] }),
+    extVarDefs.map((v) => /* @__PURE__ */ jsxs("div", { style: styles7.mockVarRow, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles7.mockVarLabel, children: [
+        /* @__PURE__ */ jsxs("span", { style: styles7.mockVarId, children: [
+          "$",
+          `ext.${v.id}`
+        ] }),
+        v.blocking && /* @__PURE__ */ jsx("span", { style: styles7.mockBlockingBadge, children: "!" })
+      ] }),
+      v.type === "boolean" ? /* @__PURE__ */ jsxs("label", { style: styles7.mockCheckRow, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: Boolean(mockVars[v.id]),
+            onChange: (e) => onChange(v.id, e.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--wp-text-muted)" }, children: String(mockVars[v.id]) })
+      ] }) : /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: styles7.mockInput,
+          type: v.type === "number" ? "number" : "text",
+          value: String(mockVars[v.id] ?? ""),
+          placeholder: v.label,
+          onChange: (e) => onChange(v.id, v.type === "number" ? Number(e.target.value) : e.target.value)
+        }
+      )
+    ] }, v.id))
+  ] });
+}
 function FieldRenderer({ field, value, error, onChange }) {
   const { definition } = field;
-  const inputStyle2 = { ...styles6.input, ...error ? styles6.inputError : {} };
-  return /* @__PURE__ */ jsxs("div", { style: styles6.fieldGroup, children: [
-    /* @__PURE__ */ jsxs("label", { style: styles6.label, children: [
+  const options = field.resolvedOptions ?? definition.options ?? [];
+  const inputStyle2 = { ...styles7.input, ...error ? styles7.inputError : {} };
+  return /* @__PURE__ */ jsxs("div", { style: styles7.fieldGroup, children: [
+    /* @__PURE__ */ jsxs("label", { style: styles7.label, children: [
       definition.label,
-      definition.validation?.some((r) => r.type === "required") && /* @__PURE__ */ jsx("span", { style: styles6.required, children: " *" })
+      definition.validation?.some((r) => r.type === "required") && /* @__PURE__ */ jsx("span", { style: styles7.required, children: " *" })
     ] }),
     (definition.type === "text" || definition.type === "email" || definition.type === "tel" || definition.type === "password" || definition.type === "url" || definition.type === "number" || definition.type === "date") && /* @__PURE__ */ jsx(
       "input",
@@ -2142,7 +2633,7 @@ function FieldRenderer({ field, value, error, onChange }) {
         onChange: (e) => onChange(e.target.value),
         children: [
           /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 Choisir \u2014" }),
-          definition.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
+          options.map((opt) => /* @__PURE__ */ jsx("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
         ]
       }
     ),
@@ -2156,10 +2647,10 @@ function FieldRenderer({ field, value, error, onChange }) {
           const selected = Array.from(e.target.selectedOptions).map((o) => o.value);
           onChange(selected);
         },
-        children: definition.options?.map((opt) => /* @__PURE__ */ jsx("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
+        children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
       }
     ),
-    definition.type === "radio" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: definition.options?.map((opt) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13 }, children: [
+    definition.type === "radio" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: options.map((opt) => /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13 }, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2183,10 +2674,10 @@ function FieldRenderer({ field, value, error, onChange }) {
       ),
       definition.placeholder ?? definition.label
     ] }),
-    error && /* @__PURE__ */ jsx("div", { style: styles6.errorMsg, children: error })
+    error && /* @__PURE__ */ jsx("div", { style: styles7.errorMsg, children: error })
   ] });
 }
-var styles6 = {
+var styles7 = {
   panel: {
     display: "flex",
     flex: 1,
@@ -2355,6 +2846,80 @@ var styles6 = {
     letterSpacing: "0.3px",
     flexShrink: 0
   },
+  // Mock var panel
+  mockPanel: {
+    borderTop: "1px solid var(--wp-border)",
+    padding: "12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  mockPanelTitle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    fontSize: 11,
+    fontWeight: 700,
+    color: "var(--wp-text-muted)",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    marginBottom: 4
+  },
+  mockPanelHint: {
+    fontSize: 9,
+    fontWeight: 500,
+    color: "var(--wp-warning)",
+    textTransform: "none",
+    background: "var(--wp-warning-bg)",
+    padding: "1px 5px",
+    borderRadius: 4
+  },
+  mockVarRow: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 3
+  },
+  mockVarLabel: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4
+  },
+  mockVarId: {
+    fontSize: 10,
+    fontFamily: "monospace",
+    fontWeight: 600,
+    color: "var(--wp-text-secondary)"
+  },
+  mockBlockingBadge: {
+    fontSize: 9,
+    fontWeight: 700,
+    width: 13,
+    height: 13,
+    borderRadius: "50%",
+    background: "var(--wp-danger-bg-strong)",
+    color: "var(--wp-danger)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  },
+  mockInput: {
+    fontSize: 11,
+    padding: "4px 6px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box"
+  },
+  mockCheckRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    cursor: "pointer"
+  },
   // Done screen
   doneScreen: {
     display: "flex",
@@ -2391,83 +2956,87 @@ var styles6 = {
 };
 function StepEditor() {
   const { schema, selectedStepId, updateStep, setStepCondition } = useBuilderStore();
+  const readOnly = useBuilderReadOnly();
   const [conditionModalOpen, setConditionModalOpen] = useState(false);
   const step = schema.steps.find((s) => s.id === selectedStepId);
   if (!step) {
-    return /* @__PURE__ */ jsx("div", { style: styles7.empty, children: "Select a step to configure its properties." });
+    return /* @__PURE__ */ jsx("div", { style: styles8.empty, children: "Select a step to configure its properties." });
   }
   const hasCondition = !!step.visibleWhen;
   const ruleCount = step.visibleWhen?.rules.length ?? 0;
-  return /* @__PURE__ */ jsxs("div", { style: styles7.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles7.header, children: [
-      /* @__PURE__ */ jsx("div", { style: styles7.headerTitle, children: "Step Config" }),
-      /* @__PURE__ */ jsxs("div", { style: styles7.stepId, children: [
+  return /* @__PURE__ */ jsxs("div", { style: styles8.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles8.header, children: [
+      /* @__PURE__ */ jsx("div", { style: styles8.headerTitle, children: "Step Config" }),
+      /* @__PURE__ */ jsxs("div", { style: styles8.stepId, children: [
         "id: ",
         step.id
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles7.body, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles7.group, children: [
-        /* @__PURE__ */ jsx("label", { style: styles7.label, children: "Title" }),
+    /* @__PURE__ */ jsxs("div", { style: styles8.body, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles8.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles8.label, children: "Title" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            style: styles7.input,
+            style: styles8.input,
             value: step.title,
             placeholder: "Step title",
-            onChange: (e) => updateStep(step.id, { title: e.target.value })
+            readOnly,
+            onChange: readOnly ? void 0 : (e) => updateStep(step.id, { title: e.target.value })
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: styles7.group, children: [
-        /* @__PURE__ */ jsx("label", { style: styles7.label, children: "URL" }),
+      /* @__PURE__ */ jsxs("div", { style: styles8.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles8.label, children: "URL" }),
         /* @__PURE__ */ jsx(
           "input",
           {
-            style: styles7.input,
+            style: styles8.input,
             value: step.url,
             placeholder: "/onboarding/step-name",
-            onChange: (e) => updateStep(step.id, { url: e.target.value })
+            readOnly,
+            onChange: readOnly ? void 0 : (e) => updateStep(step.id, { url: e.target.value })
           }
         ),
-        /* @__PURE__ */ jsxs("div", { style: styles7.hint, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles8.hint, children: [
           "Supports ",
           "{{PARAM}}",
           " placeholders"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: styles7.checkRow, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles8.checkRow, children: [
         /* @__PURE__ */ jsx(
           "input",
           {
             type: "checkbox",
             id: `resume-${step.id}`,
             checked: !!step.enableResumeFromHere,
-            onChange: (e) => updateStep(step.id, { enableResumeFromHere: e.target.checked || void 0 })
+            disabled: readOnly,
+            onChange: readOnly ? void 0 : (e) => updateStep(step.id, { enableResumeFromHere: e.target.checked || void 0 })
           }
         ),
-        /* @__PURE__ */ jsx("label", { htmlFor: `resume-${step.id}`, style: styles7.checkLabel, children: "Resume from this step" })
+        /* @__PURE__ */ jsx("label", { htmlFor: `resume-${step.id}`, style: styles8.checkLabel, children: "Resume from this step" })
       ] }),
-      /* @__PURE__ */ jsx("div", { style: styles7.divider }),
-      /* @__PURE__ */ jsxs("div", { style: styles7.conditionRow, children: [
-        /* @__PURE__ */ jsxs("div", { style: styles7.conditionInfo, children: [
-          /* @__PURE__ */ jsx("div", { style: styles7.label, children: "Visibility condition" }),
-          hasCondition ? /* @__PURE__ */ jsxs("div", { style: styles7.conditionSummary, children: [
-            /* @__PURE__ */ jsxs("span", { style: styles7.conditionBadge, children: [
+      /* @__PURE__ */ jsx("div", { style: styles8.divider }),
+      /* @__PURE__ */ jsxs("div", { style: styles8.conditionRow, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles8.conditionInfo, children: [
+          /* @__PURE__ */ jsx("div", { style: styles8.label, children: "Visibility condition" }),
+          hasCondition ? /* @__PURE__ */ jsxs("div", { style: styles8.conditionSummary, children: [
+            /* @__PURE__ */ jsxs("span", { style: styles8.conditionBadge, children: [
               ruleCount,
               " rule",
               ruleCount !== 1 ? "s" : "",
               " \xB7 ",
               step.visibleWhen.combinator.toUpperCase()
             ] }),
-            /* @__PURE__ */ jsx("span", { style: styles7.conditionDesc, children: "Step is conditional" })
-          ] }) : /* @__PURE__ */ jsx("div", { style: styles7.conditionNone, children: "Always visible" })
+            /* @__PURE__ */ jsx("span", { style: styles8.conditionDesc, children: "Step is conditional" })
+          ] }) : /* @__PURE__ */ jsx("div", { style: styles8.conditionNone, children: "Always visible" })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: styles7.conditionActions, children: [
+        !readOnly && /* @__PURE__ */ jsxs("div", { style: styles8.conditionActions, children: [
           /* @__PURE__ */ jsx(
             "button",
             {
-              style: styles7.editConditionBtn,
+              style: styles8.editConditionBtn,
               onClick: () => setConditionModalOpen(true),
               children: hasCondition ? "Edit" : "Add condition"
             }
@@ -2475,7 +3044,7 @@ function StepEditor() {
           hasCondition && /* @__PURE__ */ jsx(
             "button",
             {
-              style: styles7.clearConditionBtn,
+              style: styles8.clearConditionBtn,
               onClick: () => setStepCondition(step.id, void 0),
               children: "Clear"
             }
@@ -2490,7 +3059,7 @@ function StepEditor() {
         onClose: () => setConditionModalOpen(false),
         width: 620,
         children: [
-          /* @__PURE__ */ jsx("p", { style: styles7.modalHint, children: "Define when this step is visible. Leave empty to always show it." }),
+          /* @__PURE__ */ jsx("p", { style: styles8.modalHint, children: "Define when this step is visible. Leave empty to always show it." }),
           /* @__PURE__ */ jsx(
             ConditionBuilder,
             {
@@ -2498,10 +3067,10 @@ function StepEditor() {
               onChange: (c) => setStepCondition(step.id, c)
             }
           ),
-          /* @__PURE__ */ jsx("div", { style: styles7.modalFooter, children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { style: styles8.modalFooter, children: /* @__PURE__ */ jsx(
             "button",
             {
-              style: styles7.modalCloseBtn,
+              style: styles8.modalCloseBtn,
               onClick: () => setConditionModalOpen(false),
               children: "Done"
             }
@@ -2511,7 +3080,7 @@ function StepEditor() {
     )
   ] });
 }
-var styles7 = {
+var styles8 = {
   container: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" },
   empty: {
     display: "flex",
@@ -2600,7 +3169,8 @@ var styles7 = {
   }
 };
 function StepList2() {
-  const { schema, selectedStepId, addStep, removeStep, selectStep, reorderSteps } = useBuilderStore();
+  const { schema, selectedStepId, addStep, removeStep, duplicateStep, selectStep, reorderSteps } = useBuilderStore();
+  const readOnly = useBuilderReadOnly();
   const [moveError, setMoveError] = useState(null);
   const steps = schema.steps;
   const deps = computeStepDependencies(schema);
@@ -2614,21 +3184,21 @@ function StepList2() {
     setMoveError(null);
     reorderSteps(fromIndex, toIndex);
   };
-  return /* @__PURE__ */ jsxs("div", { style: styles8.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles8.header, children: [
-      /* @__PURE__ */ jsxs("span", { style: styles8.title, children: [
+  return /* @__PURE__ */ jsxs("div", { style: styles9.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles9.header, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles9.title, children: [
         "Steps (",
         steps.length,
         ")"
       ] }),
-      /* @__PURE__ */ jsx("button", { style: styles8.addBtn, onClick: () => addStep(), children: "+ Add step" })
+      !readOnly && /* @__PURE__ */ jsx("button", { style: styles9.addBtn, onClick: () => addStep(), children: "+ Add step" })
     ] }),
-    moveError && /* @__PURE__ */ jsxs("div", { style: styles8.errorBanner, children: [
-      /* @__PURE__ */ jsx("span", { style: styles8.errorIcon, children: "\u26A0" }),
+    moveError && /* @__PURE__ */ jsxs("div", { style: styles9.errorBanner, children: [
+      /* @__PURE__ */ jsx("span", { style: styles9.errorIcon, children: "\u26A0" }),
       moveError
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles8.list, children: [
-      steps.length === 0 && /* @__PURE__ */ jsx("div", { style: styles8.empty, children: 'No steps yet. Click "Add step" to start.' }),
+    /* @__PURE__ */ jsxs("div", { style: styles9.list, children: [
+      steps.length === 0 && /* @__PURE__ */ jsx("div", { style: styles9.empty, children: 'No steps yet. Click "Add step" to start.' }),
       steps.map((step, index) => {
         const isSelected = step.id === selectedStepId;
         const hasCondition = !!step.visibleWhen;
@@ -2642,31 +3212,31 @@ function StepList2() {
           "div",
           {
             style: {
-              ...styles8.card,
-              ...isSelected ? styles8.cardSelected : {}
+              ...styles9.card,
+              ...isSelected ? styles9.cardSelected : {}
             },
             onClick: () => selectStep(step.id),
             children: [
-              /* @__PURE__ */ jsxs("div", { style: styles8.cardMain, children: [
-                /* @__PURE__ */ jsxs("div", { style: styles8.cardLeft, children: [
-                  /* @__PURE__ */ jsx("div", { style: styles8.cardIndex, children: index + 1 }),
+              /* @__PURE__ */ jsxs("div", { style: styles9.cardMain, children: [
+                /* @__PURE__ */ jsxs("div", { style: styles9.cardLeft, children: [
+                  /* @__PURE__ */ jsx("div", { style: styles9.cardIndex, children: index + 1 }),
                   /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: styles8.cardTitle, children: step.title }),
-                    /* @__PURE__ */ jsxs("div", { style: styles8.cardMeta, children: [
+                    /* @__PURE__ */ jsx("div", { style: styles9.cardTitle, children: step.title }),
+                    /* @__PURE__ */ jsxs("div", { style: styles9.cardMeta, children: [
                       step.fields.length,
                       " field",
                       step.fields.length !== 1 ? "s" : "",
-                      hasCondition && /* @__PURE__ */ jsx("span", { style: styles8.conditionBadge, children: "conditional" })
+                      hasCondition && /* @__PURE__ */ jsx("span", { style: styles9.conditionBadge, children: "conditional" })
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { style: styles8.cardActions, children: [
+                !readOnly && /* @__PURE__ */ jsxs("div", { style: styles9.cardActions, children: [
                   index > 0 && /* @__PURE__ */ jsx(
                     "button",
                     {
                       style: {
-                        ...styles8.iconBtn,
-                        ...canMoveUp ? {} : styles8.iconBtnBlocked
+                        ...styles9.iconBtn,
+                        ...canMoveUp ? {} : styles9.iconBtnBlocked
                       },
                       title: canMoveUp ? "Move up" : `Can't move up \u2014 dependency order required`,
                       onClick: (e) => {
@@ -2680,8 +3250,8 @@ function StepList2() {
                     "button",
                     {
                       style: {
-                        ...styles8.iconBtn,
-                        ...canMoveDown ? {} : styles8.iconBtnBlocked
+                        ...styles9.iconBtn,
+                        ...canMoveDown ? {} : styles9.iconBtnBlocked
                       },
                       title: canMoveDown ? "Move down" : `Can't move down \u2014 dependency order required`,
                       onClick: (e) => {
@@ -2694,7 +3264,19 @@ function StepList2() {
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      style: { ...styles8.iconBtn, ...styles8.deleteBtn },
+                      style: styles9.iconBtn,
+                      title: "Duplicate step",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        duplicateStep(step.id);
+                      },
+                      children: "\u29C9"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      style: { ...styles9.iconBtn, ...styles9.deleteBtn },
                       title: "Remove step",
                       onClick: (e) => {
                         e.stopPropagation();
@@ -2705,13 +3287,13 @@ function StepList2() {
                   )
                 ] })
               ] }),
-              depLabels.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles8.depRow, children: [
-                /* @__PURE__ */ jsx("span", { style: styles8.depLabel, children: "needs:" }),
-                depLabels.map((label) => /* @__PURE__ */ jsx("span", { style: styles8.depBadge, children: label }, label))
+              depLabels.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles9.depRow, children: [
+                /* @__PURE__ */ jsx("span", { style: styles9.depLabel, children: "needs:" }),
+                depLabels.map((label) => /* @__PURE__ */ jsx("span", { style: styles9.depBadge, children: label }, label))
               ] }),
-              dependents.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles8.depRow, children: [
-                /* @__PURE__ */ jsx("span", { style: styles8.depLabelUsed, children: "used by:" }),
-                dependents.map((s) => /* @__PURE__ */ jsx("span", { style: styles8.depBadgeUsed, children: s.title }, s.id))
+              dependents.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles9.depRow, children: [
+                /* @__PURE__ */ jsx("span", { style: styles9.depLabelUsed, children: "used by:" }),
+                dependents.map((s) => /* @__PURE__ */ jsx("span", { style: styles9.depBadgeUsed, children: s.title }, s.id))
               ] })
             ]
           },
@@ -2721,7 +3303,7 @@ function StepList2() {
     ] })
   ] });
 }
-var styles8 = {
+var styles9 = {
   container: { display: "flex", flexDirection: "column", height: "100%" },
   header: {
     display: "flex",
@@ -2841,7 +3423,7 @@ var styles8 = {
     borderRadius: 4
   }
 };
-function Toolbar({ onSave, previewMode, onTest }) {
+function Toolbar({ onSave, previewMode, onTest, isMobile, readOnly }) {
   const { schema, isDirty, resetSchema } = useBuilderStore();
   const handleExport = () => {
     const json = JSON.stringify(schema, null, 2);
@@ -2881,30 +3463,33 @@ ${result.errors.map((e2) => `\u2022 ${e2}`).join("\n")}`);
     input.click();
   };
   if (previewMode) {
-    return /* @__PURE__ */ jsxs("div", { style: styles9.toolbar, children: [
-      /* @__PURE__ */ jsxs("div", { style: styles9.left, children: [
-        /* @__PURE__ */ jsx("span", { style: styles9.logo, children: "\u25C8 waypoint" }),
-        /* @__PURE__ */ jsx("span", { style: styles9.separator, children: "/" }),
+    return /* @__PURE__ */ jsxs("div", { style: styles10.toolbar, children: [
+      /* @__PURE__ */ jsxs("div", { style: styles10.left, children: [
+        /* @__PURE__ */ jsx("span", { style: styles10.logo, children: "\u25C8 waypoint" }),
+        /* @__PURE__ */ jsx("span", { style: styles10.separator, children: "/" }),
         /* @__PURE__ */ jsx(
           "button",
           {
-            style: { ...styles9.btn, ...styles9.editBtn },
+            style: { ...styles10.btn, ...styles10.editBtn },
             onClick: onTest,
             children: "\u2190 \xC9diter"
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { style: styles9.right, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--wp-text-muted)", fontStyle: "italic" }, children: "Mode aper\xE7u" }) })
+      /* @__PURE__ */ jsx("div", { style: styles10.right, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--wp-text-muted)", fontStyle: "italic" }, children: "Mode aper\xE7u" }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { style: styles9.toolbar, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles9.left, children: [
-      /* @__PURE__ */ jsx("span", { style: styles9.logo, children: "\u25C8 waypoint" }),
-      /* @__PURE__ */ jsx("span", { style: styles9.separator, children: "/" }),
+  return /* @__PURE__ */ jsxs("div", { style: styles10.toolbar, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles10.left, children: [
+      !isMobile && /* @__PURE__ */ jsx("span", { style: styles10.logo, children: "\u25C8 waypoint" }),
+      !isMobile && /* @__PURE__ */ jsx("span", { style: styles10.separator, children: "/" }),
       /* @__PURE__ */ jsx(
         "input",
         {
-          style: styles9.journeyName,
+          style: {
+            ...styles10.journeyName,
+            ...isMobile ? { maxWidth: 120, fontSize: 12 } : {}
+          },
           value: schema.name,
           placeholder: "Journey name",
           onChange: (e) => useBuilderStore.setState((s) => ({
@@ -2913,34 +3498,37 @@ ${result.errors.map((e2) => `\u2022 ${e2}`).join("\n")}`);
           }))
         }
       ),
-      isDirty && /* @__PURE__ */ jsx("span", { style: styles9.dirtyDot, title: "Unsaved changes" })
+      isDirty && /* @__PURE__ */ jsx("span", { style: styles10.dirtyDot, title: "Unsaved changes" })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: styles9.right, children: [
-      onTest && /* @__PURE__ */ jsx("button", { style: { ...styles9.btn, ...styles9.testBtn }, onClick: onTest, children: "\u25B6 Tester" }),
-      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleImport, children: "Import" }),
-      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleExport, children: "Export JSON" }),
-      onSave && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs("div", { style: styles10.right, children: [
+      readOnly && /* @__PURE__ */ jsx("span", { style: styles10.readOnlyBadge, children: "View only" }),
+      !readOnly && onTest && /* @__PURE__ */ jsx("button", { style: { ...styles10.btn, ...styles10.testBtn }, onClick: onTest, title: "Tester", children: isMobile ? "\u25B6" : "\u25B6 Tester" }),
+      !readOnly && /* @__PURE__ */ jsx("button", { style: styles10.btn, onClick: handleImport, title: "Import", children: isMobile ? "\u2193" : "Import" }),
+      /* @__PURE__ */ jsx("button", { style: styles10.btn, onClick: handleExport, title: "Export JSON", children: isMobile ? "\u2191" : "Export JSON" }),
+      !readOnly && onSave && /* @__PURE__ */ jsx(
         "button",
         {
-          style: { ...styles9.btn, ...styles9.saveBtn },
+          style: { ...styles10.btn, ...styles10.saveBtn },
           onClick: () => onSave(schema),
-          children: "Save"
+          title: "Save",
+          children: isMobile ? "\u2713" : "Save"
         }
       ),
-      /* @__PURE__ */ jsx(
+      !readOnly && /* @__PURE__ */ jsx(
         "button",
         {
-          style: { ...styles9.btn, color: "var(--wp-danger)" },
+          style: { ...styles10.btn, color: "var(--wp-danger)" },
+          title: "Reset",
           onClick: () => {
             if (confirm("Reset the journey? All changes will be lost.")) resetSchema();
           },
-          children: "Reset"
+          children: isMobile ? "\u27F3" : "Reset"
         }
       )
     ] })
   ] });
 }
-var styles9 = {
+var styles10 = {
   toolbar: {
     display: "flex",
     alignItems: "center",
@@ -2982,6 +3570,15 @@ var styles9 = {
     fontWeight: 500
   },
   saveBtn: { background: "var(--wp-primary)", color: "var(--wp-canvas)", border: "1px solid var(--wp-primary)" },
+  readOnlyBadge: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: "var(--wp-text-subtle)",
+    background: "var(--wp-surface)",
+    border: "1px solid var(--wp-border)",
+    borderRadius: "var(--wp-radius)",
+    padding: "3px 8px"
+  },
   testBtn: { background: "var(--wp-success, #22c55e)", color: "#fff", border: "1px solid var(--wp-success, #22c55e)", fontWeight: 600 },
   editBtn: { background: "transparent", color: "var(--wp-toolbar-text)", border: "none", fontWeight: 600, cursor: "pointer", fontSize: 13, padding: "5px 0" }
 };
@@ -2991,32 +3588,51 @@ function WaypointBuilder({
   onSave,
   theme,
   className,
-  style
+  style,
+  readOnly = false,
+  appCustomTypes = [],
+  externalEnums = []
 }) {
-  const { loadSchema, schema } = useBuilderStore();
+  const { loadSchema, schema, selectedStepId, selectedFieldId } = useBuilderStore();
   const [previewMode, setPreviewMode] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [activeTab, setActiveTab] = useState("steps");
   const previewStoreRef = useRef(null);
   if (previewStoreRef.current === null) {
     previewStoreRef.current = createRuntimeStore();
   }
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 640);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
   useEffect(() => {
     if (defaultValue) loadSchema(defaultValue);
   }, []);
   useEffect(() => {
     onChange?.(schema);
   }, [schema, onChange]);
+  useEffect(() => {
+    if (isMobile && selectedStepId) setActiveTab("fields");
+  }, [selectedStepId]);
+  useEffect(() => {
+    if (isMobile && selectedFieldId) setActiveTab("config");
+  }, [selectedFieldId]);
   function handleTest() {
     previewStoreRef.current.getState().init(schema);
     setPreviewMode(true);
   }
   const themeVars = buildThemeVars(theme);
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...rootStyle, ...themeVars, ...style }, children: [
+  return /* @__PURE__ */ jsx(BuilderReadOnlyContext.Provider, { value: readOnly, children: /* @__PURE__ */ jsx(BuilderCustomTypesContext.Provider, { value: appCustomTypes, children: /* @__PURE__ */ jsx(BuilderExternalEnumsContext.Provider, { value: externalEnums, children: /* @__PURE__ */ jsxs("div", { className, style: { ...rootStyle, ...themeVars, ...style }, children: [
     /* @__PURE__ */ jsx(
       Toolbar,
       {
-        onSave: !previewMode && onSave ? () => onSave(schema) : void 0,
+        isMobile,
+        readOnly,
+        onSave: !previewMode && !readOnly && onSave ? () => onSave(schema) : void 0,
         previewMode,
-        onTest: previewMode ? () => setPreviewMode(false) : handleTest
+        onTest: !readOnly ? previewMode ? () => setPreviewMode(false) : handleTest : void 0
       }
     ),
     previewMode ? /* @__PURE__ */ jsx(
@@ -3024,9 +3640,32 @@ function WaypointBuilder({
       {
         store: previewStoreRef.current,
         schema,
+        externalEnums,
         onEdit: () => setPreviewMode(false)
       }
-    ) : /* @__PURE__ */ jsxs("div", { style: layoutStyle, children: [
+    ) : isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { ...colStyle, display: activeTab === "steps" ? "flex" : "none" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(StepList2, {}) }),
+        /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--wp-border)", flexShrink: 0, overflow: "auto", maxHeight: 200 }, children: /* @__PURE__ */ jsx(ExternalVariablePanel, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { ...colStyle, display: activeTab === "fields" ? "flex" : "none" }, children: /* @__PURE__ */ jsx(FieldList, {}) }),
+      /* @__PURE__ */ jsxs("div", { style: { ...colStyle, display: activeTab === "config" ? "flex" : "none" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, borderBottom: "1px solid var(--wp-border)", overflow: "hidden" }, children: /* @__PURE__ */ jsx(StepEditor, {}) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(FieldEditor, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: tabBarStyle, children: ["steps", "fields", "config"].map((tab) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          style: { ...tabBtnStyle, ...activeTab === tab ? tabBtnActiveStyle : {} },
+          onClick: () => setActiveTab(tab),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: tab === "steps" ? "\u26A1" : tab === "fields" ? "\u229E" : "\u2699" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontWeight: 600, textTransform: "capitalize" }, children: tab })
+          ]
+        },
+        tab
+      )) })
+    ] }) : /* @__PURE__ */ jsxs("div", { style: layoutStyle, children: [
       /* @__PURE__ */ jsxs("div", { style: colStyle, children: [
         /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(StepList2, {}) }),
         /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--wp-border)", flexShrink: 0, overflow: "auto", maxHeight: 280 }, children: /* @__PURE__ */ jsx(ExternalVariablePanel, {}) })
@@ -3039,7 +3678,7 @@ function WaypointBuilder({
         /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(FieldEditor, {}) })
       ] })
     ] })
-  ] });
+  ] }) }) }) });
 }
 var rootStyle = {
   display: "flex",
@@ -3068,6 +3707,29 @@ var dividerStyle = {
   background: "var(--wp-border)",
   flexShrink: 0
 };
+var tabBarStyle = {
+  display: "flex",
+  borderTop: "1px solid var(--wp-border)",
+  background: "var(--wp-toolbar-bg)",
+  flexShrink: 0
+};
+var tabBtnStyle = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 3,
+  padding: "8px 4px",
+  border: "none",
+  background: "transparent",
+  color: "var(--wp-text-subtle)",
+  cursor: "pointer"
+};
+var tabBtnActiveStyle = {
+  color: "var(--wp-primary)",
+  borderTop: "2px solid var(--wp-primary)"
+};
 
 export { DARK_THEME, DEFAULT_THEME, WaypointBuilder, buildThemeVars, useBuilderStore };
 //# sourceMappingURL=index.js.map