@waypointjs/builder 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,7 +1,10 @@
 import { createRuntimeStore, getNextStep, validateSchema, getPreviousStep, resolveTree } from '@waypointjs/core';
-import { useState, useRef, useEffect } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { create } from 'zustand';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useSensors, useSensor, PointerSensor, TouchSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useWaypoint, useWaypointStep } from '@waypointjs/react';
 import { DevPanel } from '@waypointjs/devtools';
 
@@ -195,6 +198,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);
@@ -247,6 +288,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,
@@ -345,6 +412,18 @@ var useBuilderStore = create((set, _get) => ({
     isDirty: true
   }))
 }));
+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: "",
@@ -358,6 +437,7 @@ function ExternalVariablePanel() {
     updateExternalVariable,
     removeExternalVariable
   } = useBuilderStore();
+  const readOnly = useBuilderReadOnly();
   const variables = schema.externalVariables ?? [];
   const [isAdding, setIsAdding] = useState(false);
   const [editingId, setEditingId] = useState(null);
@@ -431,7 +511,7 @@ 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(
+      !readOnly && !isAdding && /* @__PURE__ */ jsx(
         "button",
         {
           style: addBtnStyle,
@@ -486,7 +566,7 @@ function ExternalVariablePanel() {
               /* @__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: [
+            !readOnly && /* @__PURE__ */ jsxs("div", { style: varActionsStyle, children: [
               /* @__PURE__ */ jsx("button", { style: actionBtnStyle, onClick: () => startEdit(v), children: "Edit" }),
               /* @__PURE__ */ jsx(
                 "button",
@@ -813,15 +893,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
       });
     }
   }
@@ -847,7 +935,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,
@@ -856,6 +946,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);
@@ -918,15 +1009,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);
     }),
@@ -1004,6 +1128,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,
@@ -1025,6 +1160,244 @@ 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 }
+];
+var COMPARATOR_TYPES = /* @__PURE__ */ new Set([
+  "equals",
+  "notEquals",
+  "greaterThan",
+  "greaterThanOrEqual",
+  "lessThan",
+  "lessThanOrEqual",
+  "contains",
+  "notContains"
+]);
+function ValidationBuilder({ value, onChange }) {
+  const externalEnums = useBuilderExternalEnums();
+  const allFieldPaths = useAllFieldPaths();
+  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: [
+          COMPARATOR_TYPES.has(rule.type) && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: {
+                ...styles2.refToggle,
+                background: rule.refField !== void 0 ? "var(--wp-primary)" : "var(--wp-surface-muted)",
+                color: rule.refField !== void 0 ? "#fff" : "var(--wp-text-secondary)"
+              },
+              title: rule.refField !== void 0 ? "Comparing to field \u2014 click for static value" : "Static value \u2014 click to compare to another field",
+              onClick: () => {
+                if (rule.refField !== void 0) {
+                  updateRule(index, { refField: void 0, value: "" });
+                } else {
+                  updateRule(index, { refField: "", value: void 0 });
+                }
+              },
+              children: "\u21C4"
+            }
+          ),
+          rule.refField !== void 0 ? /* @__PURE__ */ jsxs(
+            "select",
+            {
+              style: { ...styles2.typeSelect, flex: "1 1 auto" },
+              value: rule.refField,
+              onChange: (e) => updateRule(index, { refField: e.target.value }),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "\u2014 pick field \u2014" }),
+                allFieldPaths.filter((fp) => !fp.isExternal).map((fp) => /* @__PURE__ */ jsx("option", { value: fp.path, children: fp.label }, fp.path))
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { 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, flex: "1 1 auto" },
+  refToggle: {
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer",
+    fontSize: 11,
+    padding: "4px 6px",
+    flexShrink: 0,
+    fontWeight: 600,
+    lineHeight: 1
+  },
+  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,
@@ -1057,17 +1430,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) => {
@@ -1078,28 +1451,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",
@@ -1181,15 +1554,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,
@@ -1226,16 +1599,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,
@@ -1244,85 +1608,171 @@ 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 [dynDefaultModalOpen, setDynDefaultModalOpen] = useState(false);
+  const [editingDynIdx, setEditingDynIdx] = useState(null);
   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" }),
+      /* @__PURE__ */ jsxs("div", { style: styles5.conditionRow, children: [
+        /* @__PURE__ */ jsxs("div", { style: styles5.conditionInfo, children: [
+          /* @__PURE__ */ jsx("div", { style: styles5.label, children: "Dynamic defaults" }),
+          (field.dynamicDefault?.length ?? 0) > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: field.dynamicDefault.map((rule, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+            /* @__PURE__ */ jsxs("span", { style: styles5.conditionBadge, children: [
+              rule.when.rules.length,
+              " rule",
+              rule.when.rules.length !== 1 ? "s" : ""
+            ] }),
+            /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--wp-text-subtle)" }, children: [
+              "\u2192 ",
+              JSON.stringify(rule.value)
+            ] }),
+            !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  style: { ...styles5.editConditionBtn, fontSize: 10, padding: "2px 6px" },
+                  onClick: () => {
+                    setEditingDynIdx(i);
+                    setDynDefaultModalOpen(true);
+                  },
+                  children: "Edit"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  style: { ...styles5.clearConditionBtn, fontSize: 10, padding: "2px 6px" },
+                  onClick: () => {
+                    const updated = field.dynamicDefault.filter((_, j) => j !== i);
+                    updateField(step.id, field.id, { dynamicDefault: updated.length ? updated : void 0 });
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] })
+          ] }, i)) }) : /* @__PURE__ */ jsx("div", { style: styles5.conditionNone, children: "No dynamic defaults" })
+        ] }),
+        !readOnly && /* @__PURE__ */ jsx("div", { style: styles5.conditionActions, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: styles5.editConditionBtn,
+            onClick: () => {
+              setEditingDynIdx(null);
+              setDynDefaultModalOpen(true);
+            },
+            children: "Add"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: styles5.divider }),
+      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,
           {
@@ -1333,92 +1783,101 @@ 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" }) })
+        ]
+      }
+    ),
+    dynDefaultModalOpen && /* @__PURE__ */ jsx(
+      DynDefaultModal,
+      {
+        rule: editingDynIdx !== null ? field.dynamicDefault?.[editingDynIdx] : void 0,
+        onSave: (rule) => {
+          const current = field.dynamicDefault ?? [];
+          let updated;
+          if (editingDynIdx !== null) {
+            updated = current.map((r, i) => i === editingDynIdx ? rule : r);
+          } else {
+            updated = [...current, rule];
+          }
+          updateField(step.id, field.id, { dynamicDefault: updated });
+          setDynDefaultModalOpen(false);
+          setEditingDynIdx(null);
+        },
+        onClose: () => {
+          setDynDefaultModalOpen(false);
+          setEditingDynIdx(null);
+        }
+      }
+    ),
     conditionModalOpen && /* @__PURE__ */ jsxs(
       Modal,
       {
@@ -1426,7 +1885,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,
             {
@@ -1436,13 +1895,103 @@ 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 = {
+function DynDefaultModal({
+  rule,
+  onSave,
+  onClose
+}) {
+  const [condition, setCondition] = useState(rule?.when);
+  const [value, setValue] = useState(rule?.value != null ? String(rule.value) : "");
+  const canSave = condition && condition.rules.length > 0 && value !== "";
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      title: rule ? "Edit dynamic default" : "Add dynamic default",
+      onClose,
+      width: 620,
+      children: [
+        /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "var(--wp-text-muted)", margin: "0 0 16px" }, children: "When the condition matches, this value will be used as the field default." }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, color: "var(--wp-text-muted)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6 }, children: "Condition" }),
+          /* @__PURE__ */ jsx(ConditionBuilder, { value: condition, onChange: setCondition })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: 20 }, children: [
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 600, color: "var(--wp-text-muted)", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6 }, children: "Default value when condition matches" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: {
+                fontSize: 13,
+                padding: "6px 8px",
+                border: "1px solid var(--wp-border-muted)",
+                borderRadius: "var(--wp-radius)",
+                outline: "none",
+                width: "100%",
+                boxSizing: "border-box",
+                background: "var(--wp-canvas)",
+                color: "var(--wp-text)"
+              },
+              value,
+              placeholder: "Value to set as default",
+              onChange: (e) => setValue(e.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: {
+                fontSize: 13,
+                padding: "7px 16px",
+                background: "transparent",
+                color: "var(--wp-text-muted)",
+                border: "1px solid var(--wp-border)",
+                borderRadius: "var(--wp-radius-lg)",
+                cursor: "pointer"
+              },
+              onClick: onClose,
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              disabled: !canSave,
+              style: {
+                fontSize: 13,
+                padding: "7px 20px",
+                background: canSave ? "var(--wp-primary)" : "var(--wp-border)",
+                color: "var(--wp-canvas)",
+                border: "none",
+                borderRadius: "var(--wp-radius-lg)",
+                cursor: canSave ? "pointer" : "not-allowed",
+                fontWeight: 600,
+                opacity: canSave ? 1 : 0.5
+              },
+              onClick: () => {
+                if (!canSave || !condition) return;
+                let parsed = value;
+                if (value === "true") parsed = true;
+                else if (value === "false") parsed = false;
+                else if (!isNaN(Number(value)) && value.trim() !== "") parsed = Number(value);
+                onSave({ when: condition, value: parsed });
+              },
+              children: rule ? "Update" : "Add"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var styles5 = {
   container: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" },
   empty: {
     display: "flex",
@@ -1526,60 +2075,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)"
+    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)"
+  enumInfo: { marginTop: 4 },
+  enumBadge: {
+    fontSize: 11,
+    fontWeight: 600,
+    padding: "2px 8px",
+    background: "var(--wp-info-bg)",
+    color: "var(--wp-info-text)",
+    borderRadius: 4
+  },
+  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" },
@@ -1691,6 +2210,107 @@ function getStepDependencyLabels(stepId, deps, schema) {
   const required = deps.get(stepId) ?? /* @__PURE__ */ new Set();
   return [...required].map((id) => schema.steps.find((s) => s.id === id)?.title ?? id).filter(Boolean);
 }
+function SortableItem({ id, disabled, children }) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id, disabled });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : 1,
+    position: "relative"
+  };
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, style, children: children({
+    handleProps: { ...attributes, ...listeners },
+    isDragging
+  }) });
+}
+function DragHandle({ handleProps, disabled }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...handleProps,
+      style: {
+        ...dragHandleStyle,
+        ...disabled ? dragHandleDisabledStyle : {}
+      },
+      title: "Drag to reorder",
+      "aria-label": "Drag handle",
+      children: "\u283F"
+    }
+  );
+}
+var dragHandleStyle = {
+  cursor: "grab",
+  touchAction: "none",
+  border: "none",
+  background: "transparent",
+  color: "var(--wp-text-muted)",
+  fontSize: 16,
+  padding: "2px 4px",
+  borderRadius: 4,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  lineHeight: 1
+};
+var dragHandleDisabledStyle = {
+  cursor: "not-allowed",
+  opacity: 0.3
+};
+function SortableList({
+  items,
+  disabled,
+  onReorder,
+  renderItem,
+  renderOverlay
+}) {
+  const [activeId, setActiveId] = useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(TouchSensor, { activationConstraint: { delay: 150, tolerance: 5 } }),
+    useSensor(KeyboardSensor)
+  );
+  const handleDragStart = useCallback((event) => {
+    setActiveId(String(event.active.id));
+  }, []);
+  const handleDragEnd = useCallback(
+    (event) => {
+      setActiveId(null);
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const fromIndex = items.indexOf(String(active.id));
+      const toIndex = items.indexOf(String(over.id));
+      if (fromIndex === -1 || toIndex === -1) return;
+      onReorder(fromIndex, toIndex);
+    },
+    [items, onReorder]
+  );
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items, strategy: verticalListSortingStrategy, disabled, children: items.map((id, index) => renderItem(id, index)) }),
+        /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: activeId && renderOverlay ? renderOverlay(activeId) : null })
+      ]
+    }
+  );
+}
 var FIELD_TYPES = [
   "text",
   "number",
@@ -1713,10 +2333,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();
@@ -1728,7 +2352,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);
@@ -1740,127 +2364,180 @@ function FieldList() {
     setMoveError(null);
     reorderFields(step.id, fromIndex, toIndex);
   };
-  return /* @__PURE__ */ jsxs("div", { style: styles5.container, children: [
-    /* @__PURE__ */ jsxs("div", { style: styles5.header, children: [
+  const fieldIds = step.fields.map((f) => f.id);
+  const renderOverlay = (id) => {
+    const field = step.fields.find((f) => f.id === id);
+    if (!field) return null;
+    const ct = appCustomTypes.find((c) => c.id === field.type);
+    return /* @__PURE__ */ jsx("div", { style: { ...styles6.card, ...styles6.cardDragOverlay }, children: /* @__PURE__ */ jsx("div", { style: styles6.cardTop, children: /* @__PURE__ */ jsxs("div", { style: styles6.cardLeft, children: [
+      /* @__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 })
+    ] }) }) });
+  };
+  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.' }),
-      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 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;
-        const intraStepDeps = (field.dependsOn ?? []).filter((p) => p.startsWith(`${step.id}.`)).map((p) => {
-          const fieldId = p.slice(step.id.length + 1);
-          return step.fields.find((f) => f.id === fieldId)?.label ?? fieldId;
-        });
-        const intraStepDependents = step.fields.filter(
-          (f) => f.id !== field.id && (f.dependsOn ?? []).includes(`${step.id}.${field.id}`)
-        );
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: { ...styles5.card, ...isSelected ? styles5.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: styles5.cardRight, children: [
-                  /* @__PURE__ */ jsx(
-                    "select",
-                    {
-                      style: styles5.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))
-                    }
-                  ),
-                  index > 0 && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      style: { ...styles5.iconBtn, ...canMoveUp ? {} : styles5.iconBtnBlocked },
-                      title: canMoveUp ? "Move up" : "Can't move \u2014 dependency order required",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        tryMove(index, index - 1);
-                      },
-                      children: "\u2191"
-                    }
-                  ),
-                  index < step.fields.length - 1 && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      style: { ...styles5.iconBtn, ...canMoveDown ? {} : styles5.iconBtnBlocked },
-                      title: canMoveDown ? "Move down" : "Can't move \u2014 dependency order required",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        tryMove(index, index + 1);
-                      },
-                      children: "\u2193"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      style: { ...styles5.iconBtn, color: "var(--wp-danger)" },
-                      title: "Remove field",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        removeField(step.id, field.id);
-                      },
-                      children: "\u2715"
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__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: [
-                  "depends on ",
-                  field.dependsOn.length
-                ] }),
-                isUsedAsDep && /* @__PURE__ */ jsx("span", { style: styles5.badgeUsed, children: "\u2190 dependency" })
-              ] }),
-              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))
-              ] }),
-              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))
-              ] })
-            ]
-          },
-          field.id
-        );
-      })
+    /* @__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.' }),
+      /* @__PURE__ */ jsx(
+        SortableList,
+        {
+          items: fieldIds,
+          disabled: readOnly,
+          onReorder: tryMove,
+          renderOverlay,
+          renderItem: (id, index) => {
+            const field = step.fields[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;
+            const intraStepDeps = (field.dependsOn ?? []).filter((p) => p.startsWith(`${step.id}.`)).map((p) => {
+              const fieldId = p.slice(step.id.length + 1);
+              return step.fields.find((f) => f.id === fieldId)?.label ?? fieldId;
+            });
+            const intraStepDependents = step.fields.filter(
+              (f) => f.id !== field.id && (f.dependsOn ?? []).includes(`${step.id}.${field.id}`)
+            );
+            return /* @__PURE__ */ jsx(SortableItem, { id: field.id, disabled: readOnly, children: ({ handleProps }) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { ...styles6.card, ...isSelected ? styles6.cardSelected : {} },
+                onClick: () => selectField(field.id),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: styles6.cardTop, children: [
+                    /* @__PURE__ */ jsxs("div", { style: styles6.cardLeft, children: [
+                      !readOnly && /* @__PURE__ */ jsx(DragHandle, { handleProps }),
+                      (() => {
+                        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: styles6.cardRight, children: [
+                      !readOnly && /* @__PURE__ */ jsxs(
+                        "select",
+                        {
+                          style: styles6.typeSelect,
+                          value: field.type,
+                          onClick: (e) => e.stopPropagation(),
+                          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)) })
+                          ]
+                        }
+                      ),
+                      !readOnly && index > 0 && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: { ...styles6.iconBtn, ...canMoveUp ? {} : styles6.iconBtnBlocked },
+                          title: canMoveUp ? "Move up" : "Can't move \u2014 dependency order required",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            tryMove(index, index - 1);
+                          },
+                          children: "\u2191"
+                        }
+                      ),
+                      !readOnly && index < step.fields.length - 1 && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: { ...styles6.iconBtn, ...canMoveDown ? {} : styles6.iconBtnBlocked },
+                          title: canMoveDown ? "Move down" : "Can't move \u2014 dependency order required",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            tryMove(index, index + 1);
+                          },
+                          children: "\u2193"
+                        }
+                      ),
+                      !readOnly && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          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();
+                            removeField(step.id, field.id);
+                          },
+                          children: "\u2715"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__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: 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: 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: 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))
+                  ] })
+                ]
+              }
+            ) }, field.id);
+          }
+        }
+      )
     ] })
   ] });
 }
-var styles5 = {
+var styles6 = {
   container: { display: "flex", flexDirection: "column", height: "100%" },
   empty: {
     display: "flex",
@@ -1917,6 +2594,12 @@ var styles5 = {
     gap: 6
   },
   cardSelected: { background: "var(--wp-primary-muted)", border: "1px solid var(--wp-primary-border)" },
+  cardDragOverlay: {
+    boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
+    border: "1px solid var(--wp-primary-border)",
+    background: "var(--wp-surface)",
+    opacity: 0.95
+  },
   cardTop: { display: "flex", alignItems: "center", justifyContent: "space-between" },
   cardLeft: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 },
   cardRight: { display: "flex", alignItems: "center", gap: 4, flexShrink: 0 },
@@ -1929,6 +2612,10 @@ var styles5 = {
     fontWeight: 600,
     flexShrink: 0
   },
+  typeBadgeCustom: {
+    background: "var(--wp-success-bg)",
+    color: "var(--wp-success)"
+  },
   fieldLabel: {
     fontSize: 13,
     fontWeight: 600,
@@ -2003,6 +2690,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" },
@@ -2023,12 +2718,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) {
@@ -2048,8 +2759,11 @@ function PreviewPanel({ store, schema }) {
     setErrors({});
     const oldIds = tree.steps.map((s) => s.definition.id).join(",");
     store.getState().setStepData(stepId, stepData);
+    if ((store.getState().skippedSteps ?? []).includes(stepId)) {
+      store.getState().unskipStep(stepId);
+    }
     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);
@@ -2067,6 +2781,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({});
   }
@@ -2074,77 +2791,124 @@ 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),
+            skippedStepIds: store.getState().skippedSteps
+          }
+        ),
+        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(DevPanel, { store }),
-    /* @__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(
-        FieldRenderer,
+      ),
+      extVarDefs.length > 0 && /* @__PURE__ */ jsx(
+        MockVarPanel,
         {
-          field,
-          value: stepData[field.definition.id],
-          error: errors[field.definition.id],
-          onChange: (val) => {
-            setFieldValue(field.definition.id, val);
-            if (errors[field.definition.id]) {
-              setErrors((prev) => {
-                const next = { ...prev };
-                delete next[field.definition.id];
-                return next;
-              });
+          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) => {
+        const storedVal = stepData[field.definition.id];
+        const displayVal = storedVal !== void 0 && storedVal !== null && storedVal !== "" ? storedVal : field.resolvedDefaultValue ?? field.definition.defaultValue ?? void 0;
+        return /* @__PURE__ */ jsx(
+          FieldRenderer,
+          {
+            field,
+            value: displayVal,
+            error: errors[field.definition.id],
+            onChange: (val) => {
+              setFieldValue(field.definition.id, val);
+              if (errors[field.definition.id]) {
+                setErrors((prev) => {
+                  const next = { ...prev };
+                  delete next[field.definition.id];
+                  return next;
+                });
+              }
             }
-          }
-        },
-        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" })
+          },
+          field.definition.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxs("div", { style: styles7.navRow, children: [
+        currentIdx > 0 && /* @__PURE__ */ jsx("button", { style: styles7.secondaryBtn, onClick: handlePrev, children: "\u2190 Pr\xE9c\xE9dent" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginLeft: "auto" }, children: [
+          currentStep?.definition.skippable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: styles7.secondaryBtn,
+              onClick: () => {
+                setErrors({});
+                store.getState().skipStep(stepId);
+                const next = getNextStep(tree.steps, stepId);
+                if (next) {
+                  store.getState().setCurrentStep(next.definition.id);
+                } else {
+                  setDone(true);
+                }
+              },
+              children: "Passer"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { style: styles7.primaryBtn, onClick: handleNext, children: getNextStep(tree.steps, stepId) ? "Continuer \u2192" : "Terminer \u2713" })
+        ] })
       ] })
     ] }) })
   ] });
 }
-function StepList({ tree, currentIdx, onSelect }) {
+function StepList({ tree, currentIdx, onSelect, skippedStepIds }) {
+  const skipped = new Set(skippedStepIds ?? []);
   const allSteps = [
     ...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 isStepVisible = !step.hidden;
       const visIdx = tree.steps.findIndex((s) => s.definition.id === step.definition.id);
+      const isSkipped = skipped.has(step.definition.id);
       let status = "hidden";
-      if (isVisible) {
-        if (visIdx < currentIdx) status = "done";
+      if (isStepVisible) {
+        if (isSkipped && visIdx < currentIdx) status = "skipped";
+        else if (visIdx < currentIdx) status = "done";
         else if (visIdx === currentIdx) status = "current";
         else status = "upcoming";
       }
@@ -2152,23 +2916,26 @@ function StepList({ tree, currentIdx, onSelect }) {
         "div",
         {
           style: {
-            ...styles6.stepItem,
-            ...status === "current" ? styles6.stepItemCurrent : {},
-            ...status === "hidden" ? styles6.stepItemHidden : {},
-            cursor: status === "done" ? "pointer" : "default"
+            ...styles7.stepItem,
+            ...status === "current" ? styles7.stepItemCurrent : {},
+            ...status === "hidden" ? styles7.stepItemHidden : {},
+            ...status === "skipped" ? { opacity: 0.6 } : {},
+            cursor: status === "done" || status === "skipped" ? "pointer" : "default"
           },
           onClick: () => {
-            if (status === "done") onSelect(step.definition.id);
+            if (status === "done" || status === "skipped") onSelect(step.definition.id);
           },
           children: [
-            /* @__PURE__ */ jsxs("span", { style: styles6.stepStatus, children: [
+            /* @__PURE__ */ jsxs("span", { style: styles7.stepStatus, children: [
               status === "done" && "\u2713",
+              status === "skipped" && "\u23ED",
               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" }),
+            status === "skipped" && /* @__PURE__ */ jsx("span", { style: { ...styles7.hiddenBadge, color: "var(--wp-warning)", background: "var(--wp-warning-bg)" }, children: "skipped" })
           ]
         },
         step.definition.id
@@ -2176,13 +2943,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",
@@ -2211,7 +3016,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)))
         ]
       }
     ),
@@ -2225,10 +3030,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",
         {
@@ -2252,10 +3057,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,
@@ -2424,6 +3229,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",
@@ -2460,83 +3339,100 @@ 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__ */ jsxs("div", { style: styles8.checkRow, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            id: `skippable-${step.id}`,
+            checked: !!step.skippable,
+            disabled: readOnly,
+            onChange: readOnly ? void 0 : (e) => updateStep(step.id, { skippable: e.target.checked || void 0 })
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { htmlFor: `skippable-${step.id}`, style: styles8.checkLabel, children: "Skippable (user can bypass this step)" })
+      ] }),
+      /* @__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"
             }
@@ -2544,7 +3440,7 @@ function StepEditor() {
           hasCondition && /* @__PURE__ */ jsx(
             "button",
             {
-              style: styles7.clearConditionBtn,
+              style: styles8.clearConditionBtn,
               onClick: () => setStepCondition(step.id, void 0),
               children: "Clear"
             }
@@ -2559,7 +3455,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,
             {
@@ -2567,10 +3463,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"
             }
@@ -2580,7 +3476,7 @@ function StepEditor() {
     )
   ] });
 }
-var styles7 = {
+var styles8 = {
   container: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" },
   empty: {
     display: "flex",
@@ -2669,128 +3565,164 @@ 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);
-  const tryMove = (fromIndex, toIndex) => {
-    const check = isMoveValid(steps, deps, fromIndex, toIndex);
-    if (!check.valid) {
-      setMoveError(check.reason ?? "Invalid move");
-      setTimeout(() => setMoveError(null), 3e3);
-      return;
-    }
-    setMoveError(null);
-    reorderSteps(fromIndex, toIndex);
+  const tryMove = useCallback(
+    (fromIndex, toIndex) => {
+      const check = isMoveValid(steps, deps, fromIndex, toIndex);
+      if (!check.valid) {
+        setMoveError(check.reason ?? "Invalid move");
+        setTimeout(() => setMoveError(null), 3e3);
+        return;
+      }
+      setMoveError(null);
+      reorderSteps(fromIndex, toIndex);
+    },
+    [steps, deps, reorderSteps]
+  );
+  const stepIds = steps.map((s) => s.id);
+  const renderOverlay = (id) => {
+    const step = steps.find((s) => s.id === id);
+    if (!step) return null;
+    const index = steps.indexOf(step);
+    return /* @__PURE__ */ jsx("div", { style: { ...styles9.card, ...styles9.cardDragOverlay }, children: /* @__PURE__ */ jsx("div", { style: styles9.cardMain, children: /* @__PURE__ */ jsxs("div", { style: styles9.cardLeft, children: [
+      /* @__PURE__ */ jsx("div", { style: styles9.cardIndex, children: index + 1 }),
+      /* @__PURE__ */ jsx("div", { style: styles9.cardTitle, children: step.title })
+    ] }) }) });
   };
-  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.' }),
-      steps.map((step, index) => {
-        const isSelected = step.id === selectedStepId;
-        const hasCondition = !!step.visibleWhen;
-        const depLabels = getStepDependencyLabels(step.id, deps, schema);
-        const canMoveUp = index > 0 && isMoveValid(steps, deps, index, index - 1).valid;
-        const canMoveDown = index < steps.length - 1 && isMoveValid(steps, deps, index, index + 1).valid;
-        const dependents = steps.filter(
-          (s) => (deps.get(s.id) ?? /* @__PURE__ */ new Set()).has(step.id)
-        );
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              ...styles8.card,
-              ...isSelected ? styles8.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: { minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: styles8.cardTitle, children: step.title }),
-                    /* @__PURE__ */ jsxs("div", { style: styles8.cardMeta, children: [
-                      step.fields.length,
-                      " field",
-                      step.fields.length !== 1 ? "s" : "",
-                      hasCondition && /* @__PURE__ */ jsx("span", { style: styles8.conditionBadge, children: "conditional" })
+    /* @__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.' }),
+      /* @__PURE__ */ jsx(
+        SortableList,
+        {
+          items: stepIds,
+          disabled: readOnly,
+          onReorder: tryMove,
+          renderOverlay,
+          renderItem: (id, index) => {
+            const step = steps[index];
+            const isSelected = step.id === selectedStepId;
+            const hasCondition = !!step.visibleWhen;
+            const depLabels = getStepDependencyLabels(step.id, deps, schema);
+            const canMoveUp = index > 0 && isMoveValid(steps, deps, index, index - 1).valid;
+            const canMoveDown = index < steps.length - 1 && isMoveValid(steps, deps, index, index + 1).valid;
+            const dependents = steps.filter(
+              (s) => (deps.get(s.id) ?? /* @__PURE__ */ new Set()).has(step.id)
+            );
+            return /* @__PURE__ */ jsx(SortableItem, { id: step.id, disabled: readOnly, children: ({ handleProps }) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  ...styles9.card,
+                  ...isSelected ? styles9.cardSelected : {}
+                },
+                onClick: () => selectStep(step.id),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { style: styles9.cardMain, children: [
+                    /* @__PURE__ */ jsxs("div", { style: styles9.cardLeft, children: [
+                      !readOnly && /* @__PURE__ */ jsx(DragHandle, { handleProps }),
+                      /* @__PURE__ */ jsx("div", { style: styles9.cardIndex, children: index + 1 }),
+                      /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, 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: styles9.conditionBadge, children: "conditional" })
+                        ] })
+                      ] })
+                    ] }),
+                    !readOnly && /* @__PURE__ */ jsxs("div", { style: styles9.cardActions, children: [
+                      index > 0 && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: {
+                            ...styles9.iconBtn,
+                            ...canMoveUp ? {} : styles9.iconBtnBlocked
+                          },
+                          title: canMoveUp ? "Move up" : `Can't move up \u2014 dependency order required`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            tryMove(index, index - 1);
+                          },
+                          children: "\u2191"
+                        }
+                      ),
+                      index < steps.length - 1 && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          style: {
+                            ...styles9.iconBtn,
+                            ...canMoveDown ? {} : styles9.iconBtnBlocked
+                          },
+                          title: canMoveDown ? "Move down" : `Can't move down \u2014 dependency order required`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            tryMove(index, index + 1);
+                          },
+                          children: "\u2193"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          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();
+                            removeStep(step.id);
+                          },
+                          children: "\u2715"
+                        }
+                      )
                     ] })
+                  ] }),
+                  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: 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))
                   ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { style: styles8.cardActions, children: [
-                  index > 0 && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      style: {
-                        ...styles8.iconBtn,
-                        ...canMoveUp ? {} : styles8.iconBtnBlocked
-                      },
-                      title: canMoveUp ? "Move up" : `Can't move up \u2014 dependency order required`,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        tryMove(index, index - 1);
-                      },
-                      children: "\u2191"
-                    }
-                  ),
-                  index < steps.length - 1 && /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      style: {
-                        ...styles8.iconBtn,
-                        ...canMoveDown ? {} : styles8.iconBtnBlocked
-                      },
-                      title: canMoveDown ? "Move down" : `Can't move down \u2014 dependency order required`,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        tryMove(index, index + 1);
-                      },
-                      children: "\u2193"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      style: { ...styles8.iconBtn, ...styles8.deleteBtn },
-                      title: "Remove step",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        removeStep(step.id);
-                      },
-                      children: "\u2715"
-                    }
-                  )
-                ] })
-              ] }),
-              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))
-              ] }),
-              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))
-              ] })
-            ]
-          },
-          step.id
-        );
-      })
+                ]
+              }
+            ) }, step.id);
+          }
+        }
+      )
     ] })
   ] });
 }
-var styles8 = {
+var styles9 = {
   container: { display: "flex", flexDirection: "column", height: "100%" },
   header: {
     display: "flex",
@@ -2838,6 +3770,12 @@ var styles8 = {
     gap: 6
   },
   cardSelected: { background: "var(--wp-primary-muted)", border: "1px solid var(--wp-primary-border)" },
+  cardDragOverlay: {
+    boxShadow: "0 4px 16px rgba(0,0,0,0.25)",
+    border: "1px solid var(--wp-primary-border)",
+    background: "var(--wp-surface)",
+    opacity: 0.95
+  },
   cardMain: { display: "flex", alignItems: "center", justifyContent: "space-between" },
   cardLeft: { display: "flex", alignItems: "center", gap: 10, minWidth: 0, flex: 1 },
   cardIndex: {
@@ -2910,7 +3848,7 @@ var styles8 = {
     borderRadius: 4
   }
 };
-function Toolbar({ onSave, previewMode, onTest, isMobile }) {
+function Toolbar({ onSave, previewMode, onTest, isMobile, readOnly }) {
   const { schema, isDirty, resetSchema } = useBuilderStore();
   const handleExport = () => {
     const json = JSON.stringify(schema, null, 2);
@@ -2950,31 +3888,31 @@ ${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: [
-      !isMobile && /* @__PURE__ */ jsx("span", { style: styles9.logo, children: "\u25C8 waypoint" }),
-      !isMobile && /* @__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,
+            ...styles10.journeyName,
             ...isMobile ? { maxWidth: 120, fontSize: 12 } : {}
           },
           value: schema.name,
@@ -2985,25 +3923,26 @@ ${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, title: "Tester", children: isMobile ? "\u25B6" : "\u25B6 Tester" }),
-      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleImport, title: "Import", children: isMobile ? "\u2193" : "Import" }),
-      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleExport, title: "Export JSON", children: isMobile ? "\u2191" : "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),
           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();
@@ -3014,7 +3953,7 @@ ${result.errors.map((e2) => `\u2022 ${e2}`).join("\n")}`);
     ] })
   ] });
 }
-var styles9 = {
+var styles10 = {
   toolbar: {
     display: "flex",
     alignItems: "center",
@@ -3056,6 +3995,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" }
 };
@@ -3065,7 +4013,10 @@ function WaypointBuilder({
   onSave,
   theme,
   className,
-  style
+  style,
+  readOnly = false,
+  appCustomTypes = [],
+  externalEnums = []
 }) {
   const { loadSchema, schema, selectedStepId, selectedFieldId } = useBuilderStore();
   const [previewMode, setPreviewMode] = useState(false);
@@ -3098,14 +4049,15 @@ function WaypointBuilder({
     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,
       {
         isMobile,
-        onSave: !previewMode && onSave ? () => onSave(schema) : void 0,
+        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(
@@ -3113,6 +4065,7 @@ function WaypointBuilder({
       {
         store: previewStoreRef.current,
         schema,
+        externalEnums,
         onEdit: () => setPreviewMode(false)
       }
     ) : isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3150,7 +4103,7 @@ function WaypointBuilder({
         /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(FieldEditor, {}) })
       ] })
     ] })
-  ] });
+  ] }) }) }) });
 }
 var rootStyle = {
   display: "flex",