@waypointjs/builder 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,7 +1,10 @@
 import { createRuntimeStore, getNextStep, validateSchema, getPreviousStep, resolveTree } from '@waypointjs/core';
-import { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { create } from 'zustand';
 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';
 
@@ -1179,8 +1182,19 @@ var VALIDATION_RULES = [
   { 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));
   };
@@ -1216,35 +1230,68 @@ function ValidationBuilder({ value, onChange }) {
             ]
           }
         ) : /* @__PURE__ */ jsxs("div", { style: styles2.valueGroup, children: [
-          /* @__PURE__ */ jsx(
-            "input",
+          COMPARATOR_TYPES.has(rule.type) && /* @__PURE__ */ jsx(
+            "button",
             {
-              style: styles2.valueInput,
-              placeholder: "value",
-              value: rule.value != null ? String(rule.value) : "",
-              onChange: (e) => updateRule(index, { value: e.target.value })
+              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"
             }
           ),
-          externalEnums.length > 0 && /* @__PURE__ */ jsxs(
+          rule.refField !== void 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 });
-              },
+              style: { ...styles2.typeSelect, flex: "1 1 auto" },
+              value: rule.refField,
+              onChange: (e) => updateRule(index, { refField: 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("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",
@@ -1291,7 +1338,17 @@ var styles2 = {
     background: "var(--wp-canvas)",
     color: "var(--wp-text)"
   },
-  valueGroup: { display: "flex", alignItems: "center", gap: 4 },
+  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,
@@ -1555,6 +1612,8 @@ function FieldEditor() {
   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) {
@@ -1618,6 +1677,58 @@ function FieldEditor() {
           }
         )
       ] }),
+      /* @__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(
@@ -1745,6 +1856,28 @@ function FieldEditor() {
         ]
       }
     ),
+    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,
       {
@@ -1768,6 +1901,96 @@ function FieldEditor() {
     )
   ] });
 }
+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: {
@@ -1987,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",
@@ -2040,6 +2364,16 @@ function FieldList() {
     setMoveError(null);
     reorderFields(step.id, fromIndex, toIndex);
   };
+  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: [
@@ -2059,137 +2393,147 @@ function FieldList() {
     ] }),
     /* @__PURE__ */ jsxs("div", { style: styles6.list, children: [
       step.fields.length === 0 && /* @__PURE__ */ jsx("div", { style: styles6.emptyFields, children: 'No fields yet. Click "Add field" to start.' }),
-      step.fields.map((field, index) => {
-        const isSelected = field.id === selectedFieldId;
-        const isRequired = field.validation?.some((v) => v.type === "required") ?? false;
-        const hasCondition = !!field.visibleWhen;
-        const hasDeps = (field.dependsOn?.length ?? 0) > 0;
-        const enumDef = field.externalEnumId ? externalEnums.find((e) => e.id === field.externalEnumId) : void 0;
-        const isUsedAsDep = allDependencyTargets.has(`${step.id}.${field.id}`);
-        const canMoveUp = index > 0 && isFieldMoveValid(step.fields, step.id, index, index - 1).valid;
-        const canMoveDown = index < step.fields.length - 1 && isFieldMoveValid(step.fields, step.id, index, index + 1).valid;
-        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: { ...styles6.card, ...isSelected ? styles6.cardSelected : {} },
-            onClick: () => selectField(field.id),
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: styles6.cardTop, children: [
-                /* @__PURE__ */ jsxs("div", { style: styles6.cardLeft, children: [
-                  (() => {
-                    const ct = appCustomTypes.find((c) => c.id === field.type);
-                    return /* @__PURE__ */ jsx("span", { style: { ...styles6.typeBadge, ...ct ? styles6.typeBadgeCustom : {} }, children: ct ? `${ct.icon ? ct.icon + " " : ""}${ct.label}` : field.type });
-                  })(),
-                  /* @__PURE__ */ jsx("span", { style: styles6.fieldLabel, children: field.label })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { style: 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
-        );
-      })
+      /* @__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);
+          }
+        }
+      )
     ] })
   ] });
 }
@@ -2250,6 +2594,12 @@ var styles6 = {
     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 },
@@ -2409,6 +2759,9 @@ function PreviewPanel({ store, schema, externalEnums }) {
     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, store.getState().externalVars, externalEnums);
     const newIds = newTree.steps.map((s) => s.definition.id).join(",");
@@ -2445,7 +2798,8 @@ function PreviewPanel({ store, schema, externalEnums }) {
           {
             tree,
             currentIdx,
-            onSelect: (id) => store.getState().setCurrentStep(id)
+            onSelect: (id) => store.getState().setCurrentStep(id),
+            skippedStepIds: store.getState().skippedSteps
           }
         ),
         extVarDefs.length > 0 && /* @__PURE__ */ jsx(
@@ -2490,33 +2844,57 @@ function PreviewPanel({ store, schema, externalEnums }) {
     /* @__PURE__ */ jsx("div", { style: styles7.rightCol, children: /* @__PURE__ */ jsxs("div", { style: styles7.stepRenderer, children: [
       /* @__PURE__ */ jsx("div", { style: styles7.progressTrack, children: /* @__PURE__ */ jsx("div", { style: { ...styles7.progressFill, width: `${progress}%` } }) }),
       /* @__PURE__ */ jsx("h2", { style: styles7.stepTitle, children: currentStep?.definition.title ?? "" }),
-      /* @__PURE__ */ jsx("div", { style: styles7.fieldsContainer, children: fields.map((field) => /* @__PURE__ */ jsx(
-        FieldRenderer,
-        {
-          field,
-          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;
-              });
+      /* @__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
-      )) }),
+          },
+          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__ */ jsx("button", { style: { ...styles7.primaryBtn, marginLeft: "auto" }, onClick: handleNext, children: getNextStep(tree.steps, stepId) ? "Continuer \u2192" : "Terminer \u2713" })
+        /* @__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 }))
@@ -2524,11 +2902,13 @@ function StepList({ tree, currentIdx, onSelect }) {
   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";
       }
@@ -2539,20 +2919,23 @@ function StepList({ tree, currentIdx, onSelect }) {
             ...styles7.stepItem,
             ...status === "current" ? styles7.stepItemCurrent : {},
             ...status === "hidden" ? styles7.stepItemHidden : {},
-            cursor: status === "done" ? "pointer" : "default"
+            ...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: styles7.stepStatus, children: [
               status === "done" && "\u2713",
+              status === "skipped" && "\u23ED",
               status === "current" && "\u2192",
               status === "upcoming" && "\u25CB",
               status === "hidden" && "\u2013"
             ] }),
             /* @__PURE__ */ jsx("span", { style: styles7.stepName, children: step.definition.title }),
-            status === "hidden" && /* @__PURE__ */ jsx("span", { style: styles7.hiddenBadge, children: "hidden" })
+            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
@@ -3017,6 +3400,19 @@ function StepEditor() {
         ),
         /* @__PURE__ */ jsx("label", { htmlFor: `resume-${step.id}`, style: styles8.checkLabel, children: "Resume from this step" })
       ] }),
+      /* @__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: [
@@ -3174,15 +3570,28 @@ function StepList2() {
   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: styles9.container, children: [
     /* @__PURE__ */ jsxs("div", { style: styles9.header, children: [
@@ -3199,107 +3608,117 @@ function StepList2() {
     ] }),
     /* @__PURE__ */ jsxs("div", { style: styles9.list, children: [
       steps.length === 0 && /* @__PURE__ */ jsx("div", { style: styles9.empty, children: 'No steps yet. Click "Add step" to start.' }),
-      steps.map((step, index) => {
-        const isSelected = step.id === selectedStepId;
-        const hasCondition = !!step.visibleWhen;
-        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: {
-              ...styles9.card,
-              ...isSelected ? styles9.cardSelected : {}
-            },
-            onClick: () => selectStep(step.id),
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: styles9.cardMain, children: [
-                /* @__PURE__ */ jsxs("div", { style: styles9.cardLeft, children: [
-                  /* @__PURE__ */ jsx("div", { style: styles9.cardIndex, children: index + 1 }),
-                  /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-                    /* @__PURE__ */ jsx("div", { style: 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" })
+      /* @__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))
                   ] })
-                ] }),
-                !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))
-              ] })
-            ]
-          },
-          step.id
-        );
-      })
+                ]
+              }
+            ) }, step.id);
+          }
+        }
+      )
     ] })
   ] });
 }
@@ -3351,6 +3770,12 @@ var styles9 = {
     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: {