@waypointjs/builder 0.1.0

package/dist/index.js

@@ -0,0 +1,3074 @@
+import { createRuntimeStore, getNextStep, validateSchema, getPreviousStep, resolveTree } from '@waypointjs/core';
+import { useState, useRef, useEffect } from 'react';
+import { create } from 'zustand';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useWaypoint, useWaypointStep } from '@waypointjs/react';
+
+// src/components/WaypointBuilder.tsx
+
+// src/theme.ts
+var DEFAULT_THEME = {
+  primary: "#6366f1",
+  primaryDark: "#4338ca",
+  primaryBg: "#e0e7ff",
+  primaryMuted: "#ede9fe",
+  primaryBorder: "#a78bfa",
+  toolbarBg: "#111827",
+  toolbarBorder: "#1f2937",
+  toolbarLogo: "#a78bfa",
+  toolbarText: "#f9fafb",
+  toolbarTextMuted: "#d1d5db",
+  toolbarTextSubtle: "#4b5563",
+  canvas: "#ffffff",
+  surface: "#f9fafb",
+  surfaceMuted: "#f3f4f6",
+  surfaceAlt: "#f1f5f9",
+  border: "#e5e7eb",
+  borderMuted: "#d1d5db",
+  text: "#111827",
+  textSecondary: "#374151",
+  textMuted: "#6b7280",
+  textSubtle: "#9ca3af",
+  textMono: "#475569",
+  danger: "#ef4444",
+  dangerText: "#dc2626",
+  dangerBg: "#fef2f2",
+  dangerBgStrong: "#fee2e2",
+  dangerBorder: "#fecaca",
+  warning: "#d97706",
+  warningStrong: "#f59e0b",
+  warningBg: "#fef3c7",
+  success: "#059669",
+  successBg: "#d1fae5",
+  info: "#3b82f6",
+  infoText: "#3b82f6",
+  infoBg: "#eff6ff",
+  infoBgStrong: "#eff6ff",
+  infoBorder: "#bfdbfe",
+  font: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  radius: "6px",
+  radiusLg: "8px"
+};
+var DARK_THEME = {
+  primary: "#818cf8",
+  primaryDark: "#6366f1",
+  primaryBg: "#1e1b4b",
+  primaryMuted: "#1e1b4b",
+  primaryBorder: "#6366f1",
+  toolbarBg: "#0a0a0a",
+  toolbarBorder: "#1a1a1a",
+  toolbarLogo: "#818cf8",
+  toolbarText: "#f1f5f9",
+  toolbarTextMuted: "#9ca3af",
+  toolbarTextSubtle: "#374151",
+  canvas: "#141414",
+  surface: "#1e1e1e",
+  surfaceMuted: "#2a2a2a",
+  surfaceAlt: "#242424",
+  border: "#2e2e2e",
+  borderMuted: "#404040",
+  text: "#f1f5f9",
+  textSecondary: "#e2e8f0",
+  textMuted: "#94a3b8",
+  textSubtle: "#64748b",
+  textMono: "#94a3b8",
+  danger: "#f87171",
+  dangerText: "#fca5a5",
+  dangerBg: "#1c0a0a",
+  dangerBgStrong: "#2d1515",
+  dangerBorder: "#7f1d1d",
+  warning: "#fbbf24",
+  warningStrong: "#fbbf24",
+  warningBg: "#1a1000",
+  success: "#34d399",
+  successBg: "#052e16",
+  info: "#60a5fa",
+  infoText: "#93c5fd",
+  infoBg: "#0a1628",
+  infoBgStrong: "#0f1f3d",
+  infoBorder: "#1e3a5f",
+  font: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+  radius: "6px",
+  radiusLg: "8px"
+};
+function buildThemeVars(theme = {}) {
+  const t = { ...DEFAULT_THEME, ...theme };
+  return {
+    "--wp-primary": t.primary,
+    "--wp-primary-dark": t.primaryDark,
+    "--wp-primary-bg": t.primaryBg,
+    "--wp-primary-muted": t.primaryMuted,
+    "--wp-primary-border": t.primaryBorder,
+    "--wp-toolbar-bg": t.toolbarBg,
+    "--wp-toolbar-border": t.toolbarBorder,
+    "--wp-toolbar-logo": t.toolbarLogo,
+    "--wp-toolbar-text": t.toolbarText,
+    "--wp-toolbar-text-muted": t.toolbarTextMuted,
+    "--wp-toolbar-text-subtle": t.toolbarTextSubtle,
+    "--wp-canvas": t.canvas,
+    "--wp-surface": t.surface,
+    "--wp-surface-muted": t.surfaceMuted,
+    "--wp-surface-alt": t.surfaceAlt,
+    "--wp-border": t.border,
+    "--wp-border-muted": t.borderMuted,
+    "--wp-text": t.text,
+    "--wp-text-secondary": t.textSecondary,
+    "--wp-text-muted": t.textMuted,
+    "--wp-text-subtle": t.textSubtle,
+    "--wp-text-mono": t.textMono,
+    "--wp-danger": t.danger,
+    "--wp-danger-text": t.dangerText,
+    "--wp-danger-bg": t.dangerBg,
+    "--wp-danger-bg-strong": t.dangerBgStrong,
+    "--wp-danger-border": t.dangerBorder,
+    "--wp-warning": t.warning,
+    "--wp-warning-strong": t.warningStrong,
+    "--wp-warning-bg": t.warningBg,
+    "--wp-success": t.success,
+    "--wp-success-bg": t.successBg,
+    "--wp-info": t.info,
+    "--wp-info-text": t.infoText,
+    "--wp-info-bg": t.infoBg,
+    "--wp-info-bg-strong": t.infoBgStrong,
+    "--wp-info-border": t.infoBorder,
+    "--wp-font": t.font,
+    "--wp-radius": t.radius,
+    "--wp-radius-lg": t.radiusLg
+  };
+}
+function generateId(prefix) {
+  return `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function makeDefaultSchema() {
+  return {
+    version: "1",
+    id: generateId("journey"),
+    name: "My Journey",
+    steps: [],
+    externalVariables: [],
+    customTypes: [],
+    persistenceMode: "zustand"
+  };
+}
+var useBuilderStore = create((set, _get) => ({
+  schema: makeDefaultSchema(),
+  selectedStepId: null,
+  selectedFieldId: null,
+  isDirty: false,
+  // --- Schema ---
+  loadSchema: (schema) => set({ schema, selectedStepId: null, selectedFieldId: null, isDirty: false }),
+  resetSchema: () => set({ schema: makeDefaultSchema(), selectedStepId: null, selectedFieldId: null, isDirty: false }),
+  // --- Steps ---
+  addStep: (partial = {}) => {
+    const id = generateId("step");
+    const step = {
+      id,
+      title: partial.title ?? "New Step",
+      url: partial.url ?? `/${id}`,
+      fields: partial.fields ?? [],
+      ...partial
+    };
+    set((s) => ({
+      schema: { ...s.schema, steps: [...s.schema.steps, step] },
+      selectedStepId: id,
+      selectedFieldId: null,
+      isDirty: true
+    }));
+    return id;
+  },
+  updateStep: (stepId, updates) => set((s) => ({
+    schema: {
+      ...s.schema,
+      steps: s.schema.steps.map(
+        (step) => step.id === stepId ? { ...step, ...updates } : step
+      )
+    },
+    isDirty: true
+  })),
+  removeStep: (stepId) => set((s) => ({
+    schema: {
+      ...s.schema,
+      steps: s.schema.steps.filter((step) => step.id !== stepId)
+    },
+    selectedStepId: s.selectedStepId === stepId ? null : s.selectedStepId,
+    selectedFieldId: s.selectedStepId === stepId ? null : s.selectedFieldId,
+    isDirty: true
+  })),
+  reorderSteps: (fromIndex, toIndex) => set((s) => {
+    const steps = [...s.schema.steps];
+    const [moved] = steps.splice(fromIndex, 1);
+    steps.splice(toIndex, 0, moved);
+    return { schema: { ...s.schema, steps }, isDirty: true };
+  }),
+  selectStep: (stepId) => set({ selectedStepId: stepId, selectedFieldId: null }),
+  // --- Fields ---
+  addField: (stepId, partial = {}) => {
+    const id = generateId("field");
+    const field = {
+      id,
+      type: partial.type ?? "text",
+      label: partial.label ?? "New Field",
+      ...partial
+    };
+    set((s) => ({
+      schema: {
+        ...s.schema,
+        steps: s.schema.steps.map(
+          (step) => step.id === stepId ? { ...step, fields: [...step.fields, field] } : step
+        )
+      },
+      selectedFieldId: id,
+      isDirty: true
+    }));
+    return id;
+  },
+  updateField: (stepId, fieldId, updates) => set((s) => ({
+    schema: {
+      ...s.schema,
+      steps: s.schema.steps.map(
+        (step) => step.id === stepId ? {
+          ...step,
+          fields: step.fields.map(
+            (f) => f.id === fieldId ? { ...f, ...updates } : f
+          )
+        } : step
+      )
+    },
+    isDirty: true
+  })),
+  removeField: (stepId, fieldId) => set((s) => ({
+    schema: {
+      ...s.schema,
+      steps: s.schema.steps.map(
+        (step) => step.id === stepId ? { ...step, fields: step.fields.filter((f) => f.id !== fieldId) } : step
+      )
+    },
+    selectedFieldId: s.selectedFieldId === fieldId ? null : s.selectedFieldId,
+    isDirty: true
+  })),
+  reorderFields: (stepId, fromIndex, toIndex) => set((s) => ({
+    schema: {
+      ...s.schema,
+      steps: s.schema.steps.map((step) => {
+        if (step.id !== stepId) return step;
+        const fields = [...step.fields];
+        const [moved] = fields.splice(fromIndex, 1);
+        fields.splice(toIndex, 0, moved);
+        return { ...step, fields };
+      })
+    },
+    isDirty: true
+  })),
+  selectField: (fieldId) => set({ selectedFieldId: fieldId }),
+  // --- Step conditions ---
+  setStepCondition: (stepId, condition) => set((s) => ({
+    schema: {
+      ...s.schema,
+      steps: s.schema.steps.map(
+        (step) => step.id === stepId ? { ...step, visibleWhen: condition } : step
+      )
+    },
+    isDirty: true
+  })),
+  // --- Field conditions ---
+  setFieldCondition: (stepId, fieldId, condition) => set((s) => ({
+    schema: {
+      ...s.schema,
+      steps: s.schema.steps.map(
+        (step) => step.id === stepId ? {
+          ...step,
+          fields: step.fields.map(
+            (f) => f.id === fieldId ? { ...f, visibleWhen: condition } : f
+          )
+        } : step
+      )
+    },
+    isDirty: true
+  })),
+  // --- External variables ---
+  addExternalVariable: (variable) => set((s) => ({
+    schema: {
+      ...s.schema,
+      externalVariables: [
+        ...s.schema.externalVariables ?? [],
+        { ...variable, usedIn: [] }
+      ]
+    },
+    isDirty: true
+  })),
+  updateExternalVariable: (varId, updates) => set((s) => ({
+    schema: {
+      ...s.schema,
+      externalVariables: (s.schema.externalVariables ?? []).map(
+        (v) => v.id === varId ? { ...v, ...updates } : v
+      )
+    },
+    isDirty: true
+  })),
+  removeExternalVariable: (varId) => set((s) => ({
+    schema: {
+      ...s.schema,
+      externalVariables: (s.schema.externalVariables ?? []).filter(
+        (v) => v.id !== varId
+      )
+    },
+    isDirty: true
+  })),
+  // --- Custom types ---
+  addCustomType: (type) => set((s) => ({
+    schema: {
+      ...s.schema,
+      customTypes: [...s.schema.customTypes ?? [], type]
+    },
+    isDirty: true
+  })),
+  updateCustomType: (typeId, updates) => set((s) => ({
+    schema: {
+      ...s.schema,
+      customTypes: (s.schema.customTypes ?? []).map(
+        (t) => t.id === typeId ? { ...t, ...updates } : t
+      )
+    },
+    isDirty: true
+  })),
+  removeCustomType: (typeId) => set((s) => ({
+    schema: {
+      ...s.schema,
+      customTypes: (s.schema.customTypes ?? []).filter((t) => t.id !== typeId)
+    },
+    isDirty: true
+  })),
+  // --- Persistence ---
+  setPersistenceMode: (mode) => set((s) => ({
+    schema: { ...s.schema, persistenceMode: mode },
+    isDirty: true
+  }))
+}));
+var BLANK_FORM = { id: "", label: "", type: "string", blocking: false };
+function ExternalVariablePanel() {
+  const { schema, addExternalVariable, updateExternalVariable, removeExternalVariable } = useBuilderStore();
+  const variables = schema.externalVariables ?? [];
+  const [isAdding, setIsAdding] = useState(false);
+  const [editingId, setEditingId] = useState(null);
+  const [form, setForm] = useState(BLANK_FORM);
+  const [error, setError] = useState(null);
+  const usageMap = computeUsageMap(schema.steps ?? []);
+  function startAdd() {
+    setIsAdding(true);
+    setEditingId(null);
+    setForm(BLANK_FORM);
+    setError(null);
+  }
+  function startEdit(v) {
+    setEditingId(v.id);
+    setIsAdding(false);
+    setForm({ id: v.id, label: v.label, type: v.type, blocking: v.blocking });
+    setError(null);
+  }
+  function cancelForm() {
+    setIsAdding(false);
+    setEditingId(null);
+    setError(null);
+  }
+  function validateForm() {
+    if (!form.id.trim()) return "ID is required";
+    if (!/^[a-zA-Z_][a-zA-Z0-9_]*$/.test(form.id.trim())) return "ID must be alphanumeric (no spaces)";
+    if (!form.label.trim()) return "Label is required";
+    if (isAdding && variables.some((v) => v.id === form.id.trim())) return `ID "${form.id}" already exists`;
+    return null;
+  }
+  function submitAdd() {
+    const err = validateForm();
+    if (err) {
+      setError(err);
+      return;
+    }
+    addExternalVariable({ id: form.id.trim(), label: form.label.trim(), type: form.type, blocking: form.blocking });
+    setIsAdding(false);
+    setForm(BLANK_FORM);
+    setError(null);
+  }
+  function submitEdit() {
+    const err = validateForm();
+    if (err) {
+      setError(err);
+      return;
+    }
+    if (!editingId) return;
+    updateExternalVariable(editingId, { label: form.label.trim(), type: form.type, blocking: form.blocking });
+    setEditingId(null);
+    setError(null);
+  }
+  function remove(id) {
+    removeExternalVariable(id);
+    if (editingId === id) {
+      setEditingId(null);
+      setError(null);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { style: panelStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: headerStyle, children: [
+      /* @__PURE__ */ jsx("span", { style: titleStyle, children: "External Variables" }),
+      !isAdding && /* @__PURE__ */ jsx("button", { style: addBtnStyle, onClick: startAdd, title: "Add external variable", children: "+ Add" })
+    ] }),
+    variables.length === 0 && !isAdding && /* @__PURE__ */ jsxs("p", { style: emptyStyle, children: [
+      "No external variables declared.",
+      /* @__PURE__ */ jsx("br", {}),
+      "External vars are injected at runtime",
+      /* @__PURE__ */ jsx("br", {}),
+      "(e.g. ",
+      /* @__PURE__ */ jsx("code", { style: codeStyle, children: "$ext.userId" }),
+      ")."
+    ] }),
+    variables.map((v) => {
+      const refs = usageMap.get(v.id) ?? [];
+      const isBeingEdited = editingId === v.id;
+      return /* @__PURE__ */ jsx("div", { style: { ...varRowStyle, ...isBeingEdited ? varRowActiveStyle : {} }, children: isBeingEdited ? /* @__PURE__ */ jsx(
+        VarForm,
+        {
+          form,
+          onChange: setForm,
+          error,
+          onSubmit: submitEdit,
+          onCancel: cancelForm,
+          submitLabel: "Save",
+          idReadOnly: true
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { style: varMainStyle, children: [
+          /* @__PURE__ */ jsxs("div", { style: varTopRowStyle, children: [
+            /* @__PURE__ */ jsxs("span", { style: varIdStyle, children: [
+              "$",
+              `ext.${v.id}`
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: badgeRowStyle, children: [
+              /* @__PURE__ */ jsx(TypeBadge, { type: v.type }),
+              v.blocking && /* @__PURE__ */ jsx("span", { style: blockingBadgeStyle, children: "blocking" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { style: varLabelStyle, children: v.label }),
+          refs.length > 0 && /* @__PURE__ */ jsx("div", { style: refsStyle, children: refs.map((ref, i) => /* @__PURE__ */ jsx("span", { style: refChipStyle, children: ref }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: varActionsStyle, children: [
+          /* @__PURE__ */ jsx("button", { style: actionBtnStyle, onClick: () => startEdit(v), children: "Edit" }),
+          /* @__PURE__ */ jsx("button", { style: { ...actionBtnStyle, color: "#ef4444" }, title: "Remove variable", onClick: () => remove(v.id), children: "\u2715" })
+        ] })
+      ] }) }, v.id);
+    }),
+    isAdding && /* @__PURE__ */ jsx("div", { style: { ...varRowStyle, ...varRowActiveStyle }, children: /* @__PURE__ */ jsx(
+      VarForm,
+      {
+        form,
+        onChange: setForm,
+        error,
+        onSubmit: submitAdd,
+        onCancel: cancelForm,
+        submitLabel: "Add"
+      }
+    ) })
+  ] });
+}
+function VarForm({ form, onChange, error, onSubmit, onCancel, submitLabel, idReadOnly }) {
+  function set(key, value) {
+    onChange({ ...form, [key]: value });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: formStyle, children: [
+    /* @__PURE__ */ jsx("label", { style: formLabelStyle, children: "ID" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        style: { ...inputStyle, ...idReadOnly ? { background: "#f9fafb", color: "#6b7280" } : {} },
+        value: form.id,
+        onChange: (e) => set("id", e.target.value),
+        placeholder: "e.g. userId",
+        readOnly: idReadOnly
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { style: formLabelStyle, children: "Label" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        style: inputStyle,
+        value: form.label,
+        onChange: (e) => set("label", e.target.value),
+        placeholder: "Human-readable description"
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { style: formLabelStyle, children: "Type" }),
+    /* @__PURE__ */ jsxs("select", { style: selectStyle, value: form.type, onChange: (e) => set("type", e.target.value), children: [
+      /* @__PURE__ */ jsx("option", { value: "string", children: "string" }),
+      /* @__PURE__ */ jsx("option", { value: "number", children: "number" }),
+      /* @__PURE__ */ jsx("option", { value: "boolean", children: "boolean" }),
+      /* @__PURE__ */ jsx("option", { value: "object", children: "object" })
+    ] }),
+    /* @__PURE__ */ jsxs("label", { style: checkboxRowStyle, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: form.blocking,
+          onChange: (e) => set("blocking", e.target.checked),
+          style: { marginRight: 6 }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: formLabelStyle, children: "Blocking \u2014 throw if missing at runtime" })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { style: errorStyle, children: error }),
+    /* @__PURE__ */ jsxs("div", { style: formActionsStyle, children: [
+      /* @__PURE__ */ jsx("button", { style: cancelBtnStyle, onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx("button", { style: submitBtnStyle, onClick: onSubmit, children: submitLabel })
+    ] })
+  ] });
+}
+function TypeBadge({ type }) {
+  const colors = {
+    string: "#d1fae5",
+    number: "#dbeafe",
+    boolean: "#fef3c7",
+    object: "#f3e8ff"
+  };
+  return /* @__PURE__ */ jsx("span", { style: { ...typeBadgeStyle, background: colors[type] ?? "#f3f4f6" }, children: type });
+}
+function computeUsageMap(steps) {
+  const map = /* @__PURE__ */ new Map();
+  function addRef(varId, label) {
+    const existing = map.get(varId) ?? [];
+    if (!existing.includes(label)) existing.push(label);
+    map.set(varId, existing);
+  }
+  function scanPaths(paths, context) {
+    for (const path of paths ?? []) {
+      if (path.startsWith("$ext.")) addRef(path.slice(5), context);
+    }
+  }
+  function scanCondition(group, context) {
+    if (!group) return;
+    for (const rule of group.rules ?? []) {
+      if (rule.field.startsWith("$ext.")) addRef(rule.field.slice(5), context);
+    }
+    for (const nested of group.groups ?? []) scanCondition(nested, context);
+  }
+  for (const step of steps) {
+    scanCondition(step.visibleWhen, step.title);
+    for (const field of step.fields ?? []) {
+      scanPaths(field.dependsOn, `${step.title} \u203A ${field.label}`);
+      scanCondition(field.visibleWhen, `${step.title} \u203A ${field.label}`);
+    }
+  }
+  return map;
+}
+var panelStyle = {
+  display: "flex",
+  flexDirection: "column",
+  padding: "8px 0",
+  gap: 0
+};
+var headerStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "6px 12px 8px"
+};
+var titleStyle = {
+  fontSize: 11,
+  fontWeight: 700,
+  color: "#9ca3af",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em"
+};
+var addBtnStyle = {
+  fontSize: 11,
+  fontWeight: 600,
+  color: "#6366f1",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: "2px 4px"
+};
+var emptyStyle = {
+  fontSize: 11,
+  color: "#9ca3af",
+  padding: "8px 12px 12px",
+  lineHeight: 1.5,
+  margin: 0
+};
+var codeStyle = {
+  fontFamily: "monospace",
+  background: "#f3f4f6",
+  borderRadius: 3,
+  padding: "1px 3px"
+};
+var varRowStyle = {
+  display: "flex",
+  alignItems: "flex-start",
+  gap: 6,
+  padding: "8px 12px",
+  borderTop: "1px solid #f3f4f6"
+};
+var varRowActiveStyle = {
+  background: "#f9fafb"
+};
+var varMainStyle = {
+  flex: 1,
+  minWidth: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var varTopRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  flexWrap: "wrap"
+};
+var varIdStyle = {
+  fontSize: 11,
+  fontFamily: "monospace",
+  fontWeight: 600,
+  color: "#374151"
+};
+var badgeRowStyle = {
+  display: "flex",
+  gap: 4,
+  flexWrap: "wrap"
+};
+var typeBadgeStyle = {
+  fontSize: 10,
+  fontWeight: 600,
+  padding: "1px 5px",
+  borderRadius: 4,
+  color: "#374151"
+};
+var blockingBadgeStyle = {
+  fontSize: 10,
+  fontWeight: 600,
+  padding: "1px 5px",
+  borderRadius: 4,
+  background: "#fee2e2",
+  color: "#dc2626"
+};
+var varLabelStyle = {
+  fontSize: 12,
+  color: "#6b7280",
+  marginTop: 1
+};
+var refsStyle = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 4,
+  marginTop: 4
+};
+var refChipStyle = {
+  fontSize: 10,
+  padding: "1px 6px",
+  borderRadius: 4,
+  background: "#eff6ff",
+  color: "#3b82f6",
+  border: "1px solid #bfdbfe"
+};
+var varActionsStyle = {
+  display: "flex",
+  gap: 2,
+  flexShrink: 0
+};
+var actionBtnStyle = {
+  fontSize: 11,
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  color: "#6b7280",
+  padding: "2px 4px"
+};
+var formStyle = {
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: 6
+};
+var formLabelStyle = {
+  fontSize: 11,
+  fontWeight: 600,
+  color: "#374151"
+};
+var inputStyle = {
+  fontSize: 12,
+  padding: "5px 8px",
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  outline: "none",
+  width: "100%",
+  boxSizing: "border-box"
+};
+var selectStyle = {
+  ...inputStyle
+};
+var checkboxRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  cursor: "pointer"
+};
+var errorStyle = {
+  fontSize: 11,
+  color: "#ef4444",
+  margin: 0,
+  padding: "4px 8px",
+  background: "#fef2f2",
+  borderRadius: 4,
+  border: "1px solid #fca5a5"
+};
+var formActionsStyle = {
+  display: "flex",
+  gap: 6,
+  justifyContent: "flex-end",
+  marginTop: 2
+};
+var cancelBtnStyle = {
+  fontSize: 12,
+  padding: "4px 10px",
+  background: "none",
+  border: "1px solid #d1d5db",
+  borderRadius: 6,
+  cursor: "pointer",
+  color: "#374151"
+};
+var submitBtnStyle = {
+  fontSize: 12,
+  padding: "4px 12px",
+  background: "#6366f1",
+  border: "none",
+  borderRadius: 6,
+  cursor: "pointer",
+  color: "#fff",
+  fontWeight: 600
+};
+
+// src/hooks/useAllFieldPaths.ts
+function useAllFieldPaths(excludeStepId, excludeFieldId) {
+  const { schema } = useBuilderStore();
+  const paths = [];
+  for (const step of schema.steps) {
+    for (const field of step.fields) {
+      if (step.id === excludeStepId && field.id === excludeFieldId) continue;
+      paths.push({
+        path: `${step.id}.${field.id}`,
+        label: `${step.title} \u2192 ${field.label}`,
+        stepId: step.id,
+        fieldId: field.id
+      });
+    }
+  }
+  for (const extVar of schema.externalVariables ?? []) {
+    paths.push({
+      path: `$ext.${extVar.id}`,
+      label: `Ext: ${extVar.label}`,
+      isExternal: true
+    });
+  }
+  return paths;
+}
+var OPERATORS = [
+  { value: "equals", label: "equals", hasValue: true },
+  { value: "notEquals", label: "not equals", hasValue: true },
+  { value: "greaterThan", label: ">", hasValue: true },
+  { value: "greaterThanOrEqual", label: ">=", hasValue: true },
+  { value: "lessThan", label: "<", hasValue: true },
+  { value: "lessThanOrEqual", label: "<=", hasValue: true },
+  { value: "contains", label: "contains", hasValue: true },
+  { value: "notContains", label: "not contains", hasValue: true },
+  { value: "in", label: "in (comma list)", hasValue: true },
+  { 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 }
+];
+function ConditionBuilder({
+  value,
+  onChange,
+  excludeStepId,
+  excludeFieldId
+}) {
+  const allPaths = useAllFieldPaths(excludeStepId, excludeFieldId);
+  const group = value ?? { combinator: "and", rules: [] };
+  const updateRule = (index, updates) => {
+    const rules = group.rules.map((r, i) => i === index ? { ...r, ...updates } : r);
+    onChange({ ...group, rules });
+  };
+  const addRule = () => {
+    const firstPath = allPaths[0]?.path ?? "";
+    onChange({
+      ...group,
+      rules: [...group.rules, { field: firstPath, operator: "equals", value: "" }]
+    });
+  };
+  const removeRule = (index) => {
+    const rules = group.rules.filter((_, i) => i !== index);
+    if (rules.length === 0) {
+      onChange(void 0);
+      return;
+    }
+    onChange({ ...group, rules });
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles.container, children: [
+    group.rules.length > 1 && /* @__PURE__ */ jsxs("div", { style: styles.combinatorRow, children: [
+      /* @__PURE__ */ jsx("span", { style: styles.combinatorLabel, children: "Match" }),
+      ["and", "or"].map((c) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: {
+            ...styles.combinatorBtn,
+            ...group.combinator === c ? styles.combinatorActive : {}
+          },
+          onClick: () => onChange({ ...group, combinator: c }),
+          children: c.toUpperCase()
+        },
+        c
+      )),
+      /* @__PURE__ */ jsx("span", { style: styles.combinatorLabel, children: "rules" })
+    ] }),
+    group.rules.length === 0 && /* @__PURE__ */ jsx("div", { style: styles.empty, children: "No conditions \u2014 this step/field is always visible." }),
+    group.rules.map((rule, index) => {
+      const opDef = OPERATORS.find((o) => o.value === rule.operator);
+      return /* @__PURE__ */ jsxs("div", { style: styles.rule, children: [
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            style: styles.select,
+            value: rule.field,
+            onChange: (e) => updateRule(index, { field: e.target.value }),
+            children: [
+              allPaths.length === 0 && /* @__PURE__ */ jsx("option", { value: "", children: "No fields available" }),
+              allPaths.map((p) => /* @__PURE__ */ jsx("option", { value: p.path, children: p.label }, p.path))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            style: { ...styles.select, width: 140 },
+            value: rule.operator,
+            onChange: (e) => updateRule(index, { operator: e.target.value }),
+            children: OPERATORS.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+          }
+        ),
+        opDef?.hasValue && /* @__PURE__ */ jsx(
+          "input",
+          {
+            style: styles.valueInput,
+            placeholder: "value",
+            value: rule.value != null ? String(rule.value) : "",
+            onChange: (e) => updateRule(index, { value: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx("button", { style: styles.removeBtn, onClick: () => removeRule(index), children: "\u2715" })
+      ] }, index);
+    }),
+    /* @__PURE__ */ jsx("button", { style: styles.addBtn, onClick: addRule, children: "+ Add rule" }),
+    group.rules.length > 0 && /* @__PURE__ */ jsxs("div", { style: styles.preview, children: [
+      /* @__PURE__ */ jsx("span", { style: styles.previewLabel, children: "Preview" }),
+      /* @__PURE__ */ jsx("pre", { style: styles.previewCode, children: JSON.stringify(group, null, 2) })
+    ] })
+  ] });
+}
+var styles = {
+  container: { display: "flex", flexDirection: "column", gap: 10 },
+  combinatorRow: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 },
+  combinatorLabel: { fontSize: 12, color: "var(--wp-text-muted)" },
+  combinatorBtn: {
+    fontSize: 11,
+    fontWeight: 700,
+    padding: "3px 10px",
+    borderRadius: 5,
+    border: "1px solid var(--wp-border-muted)",
+    background: "var(--wp-surface)",
+    cursor: "pointer",
+    color: "var(--wp-text-secondary)"
+  },
+  combinatorActive: {
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "1px solid var(--wp-primary)"
+  },
+  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"
+  },
+  select: {
+    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
+  },
+  valueInput: {
+    width: 100,
+    fontSize: 12,
+    padding: "5px 6px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)"
+  },
+  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)"
+  },
+  preview: { marginTop: 4 },
+  previewLabel: {
+    fontSize: 10,
+    fontWeight: 600,
+    color: "var(--wp-text-subtle)",
+    textTransform: "uppercase",
+    display: "block",
+    marginBottom: 4
+  },
+  previewCode: {
+    fontSize: 10,
+    background: "var(--wp-surface-alt)",
+    border: "1px solid var(--wp-border)",
+    borderRadius: "var(--wp-radius)",
+    padding: 8,
+    overflow: "auto",
+    maxHeight: 120,
+    margin: 0,
+    color: "var(--wp-text-mono)"
+  }
+};
+function DependsOnInput({
+  value,
+  onChange,
+  excludeStepId,
+  excludeFieldId
+}) {
+  const allPaths = useAllFieldPaths(excludeStepId, excludeFieldId);
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const available = allPaths.filter(
+    (p) => !value.includes(p.path) && (p.path.toLowerCase().includes(query.toLowerCase()) || p.label.toLowerCase().includes(query.toLowerCase()))
+  );
+  const add = (path) => {
+    onChange([...value, path]);
+    setQuery("");
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+  const remove = (path) => {
+    onChange(value.filter((p) => p !== path));
+  };
+  useEffect(() => {
+    const handler = (e) => {
+      if (!containerRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  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: [
+        getLabel(path),
+        /* @__PURE__ */ jsx("button", { style: styles2.tagRemove, onClick: () => remove(path), children: "\u2715" })
+      ] }, path)),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          style: styles2.input,
+          placeholder: value.length === 0 ? "Search fields or $ext vars\u2026" : "Add more\u2026",
+          value: query,
+          onChange: (e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+          },
+          onFocus: () => setOpen(true)
+        }
+      )
+    ] }),
+    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." }),
+      available.map((p) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          style: styles2.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 })
+          ]
+        },
+        p.path
+      ))
+    ] }),
+    value.length > 0 && /* @__PURE__ */ jsx("div", { style: styles2.hint, children: "This field will be blocked until all dependencies have a value." })
+  ] });
+}
+var styles2 = {
+  container: { position: "relative" },
+  tags: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 4,
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    padding: "4px 6px",
+    background: "var(--wp-canvas)",
+    minHeight: 34,
+    alignItems: "center"
+  },
+  tag: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    fontSize: 11,
+    fontWeight: 600,
+    padding: "2px 8px",
+    background: "var(--wp-primary-bg)",
+    color: "var(--wp-primary-dark)",
+    borderRadius: 4
+  },
+  tagExt: { background: "var(--wp-warning-bg)", color: "var(--wp-warning)" },
+  tagRemove: {
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    color: "inherit",
+    fontSize: 10,
+    padding: 0,
+    lineHeight: 1
+  },
+  input: {
+    flex: 1,
+    minWidth: 140,
+    fontSize: 12,
+    border: "none",
+    outline: "none",
+    background: "transparent",
+    padding: "2px 4px",
+    color: "var(--wp-text)"
+  },
+  dropdown: {
+    position: "absolute",
+    top: "calc(100% + 4px)",
+    left: 0,
+    right: 0,
+    background: "var(--wp-canvas)",
+    border: "1px solid var(--wp-border)",
+    borderRadius: "var(--wp-radius-lg)",
+    boxShadow: "0 4px 16px rgba(0,0,0,0.1)",
+    zIndex: 100,
+    maxHeight: 200,
+    overflowY: "auto"
+  },
+  noResults: { padding: "10px 12px", fontSize: 12, color: "var(--wp-text-subtle)", textAlign: "center" },
+  option: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "8px 12px",
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    textAlign: "left",
+    gap: 8
+  },
+  optionLabel: { fontSize: 13, fontWeight: 600, color: "var(--wp-text)" },
+  optionPath: { fontSize: 10, fontFamily: "monospace", color: "var(--wp-text-subtle)" },
+  hint: { fontSize: 10, color: "var(--wp-text-subtle)", marginTop: 4 }
+};
+function Modal({ title, onClose, children, width = 560 }) {
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    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" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: styles3.body, children })
+  ] }) });
+}
+var styles3 = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.4)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e3
+  },
+  panel: {
+    background: "var(--wp-canvas)",
+    borderRadius: 12,
+    boxShadow: "0 20px 60px rgba(0,0,0,0.2)",
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "80vh",
+    overflow: "hidden"
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "14px 20px",
+    borderBottom: "1px solid var(--wp-border)"
+  },
+  title: { fontWeight: 700, fontSize: 14, color: "var(--wp-text)" },
+  closeBtn: {
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    fontSize: 14,
+    color: "var(--wp-text-subtle)",
+    padding: 4
+  },
+  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 }
+];
+function FieldEditor() {
+  const {
+    schema,
+    selectedStepId,
+    selectedFieldId,
+    updateField,
+    setFieldCondition
+  } = useBuilderStore();
+  const [newValidationType, setNewValidationType] = useState("required");
+  const [conditionModalOpen, setConditionModalOpen] = useState(false);
+  const step = schema.steps.find((s) => s.id === selectedStepId);
+  const field = step?.fields.find((f) => f.id === selectedFieldId);
+  if (!field || !step) {
+    return /* @__PURE__ */ jsx("div", { style: styles4.empty, children: "Select a field in the middle panel to edit its properties." });
+  }
+  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 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" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles4.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__ */ jsx(
+          "input",
+          {
+            style: styles4.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__ */ jsx(
+          "input",
+          {
+            style: styles4.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__ */ jsx(
+          "input",
+          {
+            style: styles4.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__ */ jsx(
+          DependsOnInput,
+          {
+            value: field.dependsOn ?? [],
+            onChange: handleDependsOnChange,
+            excludeStepId: step.id,
+            excludeFieldId: field.id
+          }
+        )
+      ] }),
+      /* @__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: [
+              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__ */ jsxs("div", { style: styles4.conditionActions, children: [
+          /* @__PURE__ */ jsx("button", { style: styles4.editConditionBtn, onClick: () => setConditionModalOpen(true), children: hasCondition ? "Edit" : "Add" }),
+          hasCondition && /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: styles4.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" })
+      ] })
+    ] }),
+    conditionModalOpen && /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        title: `Condition \u2014 "${field.label}"`,
+        onClose: () => setConditionModalOpen(false),
+        width: 620,
+        children: [
+          /* @__PURE__ */ jsx("p", { style: styles4.modalHint, children: "Define when this field is visible within its step." }),
+          /* @__PURE__ */ jsx(
+            ConditionBuilder,
+            {
+              value: field.visibleWhen,
+              onChange: (c) => setFieldCondition(step.id, field.id, c),
+              excludeStepId: step.id,
+              excludeFieldId: field.id
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: styles4.modalFooter, children: /* @__PURE__ */ jsx("button", { style: styles4.modalCloseBtn, onClick: () => setConditionModalOpen(false), children: "Done" }) })
+        ]
+      }
+    )
+  ] });
+}
+var styles4 = {
+  container: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" },
+  empty: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "var(--wp-text-subtle)",
+    fontSize: 13,
+    textAlign: "center",
+    padding: 32
+  },
+  header: {
+    padding: "12px 16px",
+    borderBottom: "1px solid var(--wp-border)",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  headerLeft: { display: "flex", alignItems: "center", gap: 8 },
+  headerTitle: { fontWeight: 700, fontSize: 13, color: "var(--wp-text)" },
+  optionalBadge: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "2px 7px",
+    background: "var(--wp-surface-muted)",
+    color: "var(--wp-text-subtle)",
+    borderRadius: 4
+  },
+  requiredBadge: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "2px 7px",
+    background: "var(--wp-danger-bg-strong)",
+    color: "var(--wp-danger)",
+    borderRadius: 4
+  },
+  fieldId: { fontSize: 10, color: "var(--wp-text-subtle)", fontFamily: "monospace" },
+  body: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12 },
+  group: { display: "flex", flexDirection: "column", gap: 4 },
+  label: { fontSize: 11, fontWeight: 600, color: "var(--wp-text-muted)", textTransform: "uppercase", letterSpacing: "0.05em" },
+  input: {
+    fontSize: 13,
+    padding: "6px 8px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    outline: "none",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)"
+  },
+  divider: { height: 1, background: "var(--wp-border)" },
+  conditionRow: { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 },
+  conditionInfo: { display: "flex", flexDirection: "column", gap: 6, flex: 1 },
+  conditionSummary: { display: "flex", alignItems: "center", gap: 8 },
+  conditionBadge: {
+    fontSize: 11,
+    fontWeight: 700,
+    background: "var(--wp-warning-bg)",
+    color: "var(--wp-warning)",
+    padding: "2px 8px",
+    borderRadius: 4
+  },
+  conditionDesc: { fontSize: 11, color: "var(--wp-text-subtle)" },
+  conditionNone: { fontSize: 12, color: "var(--wp-text-subtle)", fontStyle: "italic" },
+  conditionActions: { display: "flex", gap: 6, flexShrink: 0, alignItems: "flex-start", marginTop: 16 },
+  editConditionBtn: {
+    fontSize: 11,
+    padding: "4px 10px",
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "none",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer",
+    fontWeight: 500
+  },
+  clearConditionBtn: {
+    fontSize: 11,
+    padding: "4px 10px",
+    background: "var(--wp-danger-bg-strong)",
+    color: "var(--wp-danger)",
+    border: "none",
+    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: {
+    fontSize: 11,
+    fontWeight: 700,
+    color: "var(--wp-primary-dark)",
+    background: "var(--wp-primary-bg)",
+    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)"
+  },
+  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)"
+  },
+  modalHint: { fontSize: 13, color: "var(--wp-text-muted)", marginBottom: 16, marginTop: 0 },
+  modalFooter: { marginTop: 20, display: "flex", justifyContent: "flex-end" },
+  modalCloseBtn: {
+    fontSize: 13,
+    padding: "7px 20px",
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "none",
+    borderRadius: "var(--wp-radius-lg)",
+    cursor: "pointer",
+    fontWeight: 600
+  }
+};
+
+// src/utils/step-dependencies.ts
+function extractStepIdsFromCondition(group, ownStepId) {
+  const ids = /* @__PURE__ */ new Set();
+  if (!group) return ids;
+  for (const rule of group.rules) {
+    if (rule.field.startsWith("$ext.")) continue;
+    const dotIndex = rule.field.indexOf(".");
+    if (dotIndex === -1) continue;
+    const refStep = rule.field.slice(0, dotIndex);
+    if (refStep !== ownStepId) ids.add(refStep);
+  }
+  for (const subGroup of group.groups ?? []) {
+    for (const id of extractStepIdsFromCondition(subGroup, ownStepId)) {
+      ids.add(id);
+    }
+  }
+  return ids;
+}
+function computeStepDependencies(schema) {
+  const deps = /* @__PURE__ */ new Map();
+  for (const step of schema.steps) {
+    const required = /* @__PURE__ */ new Set();
+    for (const id of extractStepIdsFromCondition(step.visibleWhen, step.id)) {
+      required.add(id);
+    }
+    for (const field of step.fields) {
+      for (const path of field.dependsOn ?? []) {
+        if (path.startsWith("$ext.")) continue;
+        const dotIndex = path.indexOf(".");
+        if (dotIndex === -1) continue;
+        const refStep = path.slice(0, dotIndex);
+        if (refStep !== step.id) required.add(refStep);
+      }
+      for (const id of extractStepIdsFromCondition(field.visibleWhen, step.id)) {
+        required.add(id);
+      }
+    }
+    deps.set(step.id, required);
+  }
+  return deps;
+}
+function isMoveValid(steps, deps, fromIndex, toIndex) {
+  if (fromIndex === toIndex) return { valid: true };
+  const reordered = [...steps];
+  const [moved] = reordered.splice(fromIndex, 1);
+  reordered.splice(toIndex, 0, moved);
+  const indexById = new Map(reordered.map((s, i) => [s.id, i]));
+  for (const step of reordered) {
+    const stepIndex = indexById.get(step.id);
+    const required = deps.get(step.id) ?? /* @__PURE__ */ new Set();
+    for (const depId of required) {
+      const depIndex = indexById.get(depId);
+      if (depIndex === void 0) continue;
+      if (depIndex > stepIndex) {
+        const depTitle = reordered.find((s) => s.id === depId)?.title ?? depId;
+        return {
+          valid: false,
+          reason: `"${step.title}" depends on "${depTitle}" which must come first`
+        };
+      }
+    }
+  }
+  return { valid: true };
+}
+function isFieldMoveValid(fields, stepId, fromIndex, toIndex) {
+  if (fromIndex === toIndex) return { valid: true };
+  const reordered = [...fields];
+  const [moved] = reordered.splice(fromIndex, 1);
+  reordered.splice(toIndex, 0, moved);
+  const indexById = new Map(reordered.map((f, i) => [f.id, i]));
+  for (const field of reordered) {
+    const fieldIndex = indexById.get(field.id);
+    for (const path of field.dependsOn ?? []) {
+      if (path.startsWith("$ext.")) continue;
+      const dotIndex = path.indexOf(".");
+      if (dotIndex === -1) continue;
+      const refStep = path.slice(0, dotIndex);
+      if (refStep !== stepId) continue;
+      const refFieldId = path.slice(dotIndex + 1);
+      const depIndex = indexById.get(refFieldId);
+      if (depIndex === void 0) continue;
+      if (depIndex > fieldIndex) {
+        const depLabel = reordered.find((f) => f.id === refFieldId)?.label ?? refFieldId;
+        return {
+          valid: false,
+          reason: `"${field.label}" depends on "${depLabel}" which must come first`
+        };
+      }
+    }
+  }
+  return { valid: true };
+}
+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);
+}
+var FIELD_TYPES = [
+  "text",
+  "number",
+  "email",
+  "password",
+  "tel",
+  "url",
+  "textarea",
+  "select",
+  "multiselect",
+  "checkbox",
+  "radio",
+  "date",
+  "file"
+];
+function FieldList() {
+  const {
+    schema,
+    selectedStepId,
+    selectedFieldId,
+    addField,
+    removeField,
+    updateField,
+    selectField,
+    reorderFields
+  } = useBuilderStore();
+  const [moveError, setMoveError] = useState(null);
+  const step = schema.steps.find((s) => s.id === selectedStepId);
+  const allDependencyTargets = /* @__PURE__ */ new Set();
+  for (const s of schema.steps) {
+    for (const f of s.fields) {
+      for (const dep of f.dependsOn ?? []) {
+        allDependencyTargets.add(dep);
+      }
+    }
+  }
+  if (!step) {
+    return /* @__PURE__ */ jsx("div", { style: styles5.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);
+    if (!check.valid) {
+      setMoveError(check.reason ?? "Invalid move");
+      setTimeout(() => setMoveError(null), 3e3);
+      return;
+    }
+    setMoveError(null);
+    reorderFields(step.id, fromIndex, toIndex);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles5.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles5.header, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: styles5.stepTitle, children: step.title }),
+        /* @__PURE__ */ jsxs("div", { style: styles5.stepSub, children: [
+          step.fields.length,
+          " field",
+          step.fields.length !== 1 ? "s" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("button", { style: styles5.addBtn, onClick: () => addField(step.id), children: "+ Add field" })
+    ] }),
+    moveError && /* @__PURE__ */ jsxs("div", { style: styles5.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
+        );
+      })
+    ] })
+  ] });
+}
+var styles5 = {
+  container: { display: "flex", flexDirection: "column", height: "100%" },
+  empty: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "var(--wp-text-subtle)",
+    fontSize: 13,
+    textAlign: "center",
+    padding: 32
+  },
+  emptyFields: { padding: 24, textAlign: "center", color: "var(--wp-text-subtle)", fontSize: 13 },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "12px 16px",
+    borderBottom: "1px solid var(--wp-border)"
+  },
+  stepTitle: { fontWeight: 700, fontSize: 14, color: "var(--wp-text)" },
+  stepSub: { fontSize: 11, color: "var(--wp-text-subtle)", marginTop: 2 },
+  addBtn: {
+    fontSize: 12,
+    padding: "4px 10px",
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "none",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer",
+    fontWeight: 500
+  },
+  errorBanner: {
+    margin: "8px 8px 0",
+    padding: "8px 12px",
+    background: "var(--wp-danger-bg)",
+    border: "1px solid var(--wp-danger-border)",
+    borderRadius: "var(--wp-radius-lg)",
+    fontSize: 12,
+    color: "var(--wp-danger-text)",
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  list: { flex: 1, overflowY: "auto", padding: 8 },
+  card: {
+    padding: "10px 12px",
+    borderRadius: "var(--wp-radius-lg)",
+    marginBottom: 4,
+    border: "1px solid transparent",
+    cursor: "pointer",
+    background: "var(--wp-surface)",
+    display: "flex",
+    flexDirection: "column",
+    gap: 6
+  },
+  cardSelected: { background: "var(--wp-primary-muted)", border: "1px solid var(--wp-primary-border)" },
+  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 },
+  typeBadge: {
+    fontSize: 10,
+    background: "var(--wp-primary-bg)",
+    color: "var(--wp-primary-dark)",
+    padding: "2px 7px",
+    borderRadius: 4,
+    fontWeight: 600,
+    flexShrink: 0
+  },
+  fieldLabel: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "var(--wp-text)",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  typeSelect: {
+    fontSize: 11,
+    border: "1px solid var(--wp-border)",
+    borderRadius: 4,
+    padding: "2px 4px",
+    background: "var(--wp-canvas)",
+    cursor: "pointer",
+    color: "var(--wp-text-secondary)"
+  },
+  iconBtn: {
+    width: 22,
+    height: 22,
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    borderRadius: 4,
+    fontSize: 11,
+    color: "var(--wp-text-subtle)"
+  },
+  iconBtnBlocked: { color: "var(--wp-border-muted)", cursor: "not-allowed", opacity: 0.4 },
+  badges: { display: "flex", flexWrap: "wrap", gap: 4 },
+  badgeOptional: {
+    fontSize: 9,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-surface-muted)",
+    color: "var(--wp-text-subtle)",
+    borderRadius: 3,
+    textTransform: "uppercase"
+  },
+  badgeRequired: {
+    fontSize: 9,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-danger-bg-strong)",
+    color: "var(--wp-danger)",
+    borderRadius: 3,
+    textTransform: "uppercase"
+  },
+  badgeCondition: {
+    fontSize: 9,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-warning-bg)",
+    color: "var(--wp-warning)",
+    borderRadius: 3,
+    textTransform: "uppercase"
+  },
+  badgeDep: {
+    fontSize: 9,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-primary-bg)",
+    color: "var(--wp-primary-dark)",
+    borderRadius: 3,
+    textTransform: "uppercase"
+  },
+  badgeUsed: {
+    fontSize: 9,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-success-bg)",
+    color: "var(--wp-success)",
+    borderRadius: 3,
+    textTransform: "uppercase"
+  },
+  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" },
+  depBadge: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-primary-bg)",
+    color: "var(--wp-primary-dark)",
+    borderRadius: 4
+  },
+  depBadgeUsed: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-success-bg)",
+    color: "var(--wp-success)",
+    borderRadius: 4
+  }
+};
+function PreviewPanel({ store, schema }) {
+  const [done, setDone] = useState(false);
+  const { tree, currentStep, progress } = useWaypoint(store);
+  const stepId = currentStep?.definition.id ?? "";
+  const { fields, stepData, setFieldValue } = useWaypointStep(store, stepId);
+  const [errors, setErrors] = useState({});
+  function handleNext() {
+    const newErrors = {};
+    for (const field of fields) {
+      const isRequired = field.definition.validation?.some((r) => r.type === "required");
+      if (isRequired) {
+        const val = stepData[field.definition.id];
+        if (val === void 0 || val === null || val === "" || val === false) {
+          const rule = field.definition.validation?.find((r) => r.type === "required");
+          newErrors[field.definition.id] = rule?.message ?? "Ce champ est requis";
+        }
+      }
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+    setErrors({});
+    const oldIds = tree.steps.map((s) => s.definition.id).join(",");
+    store.getState().setStepData(stepId, stepData);
+    const newData = store.getState().data;
+    const newTree = resolveTree(schema, newData, {});
+    const newIds = newTree.steps.map((s) => s.definition.id).join(",");
+    if (oldIds !== newIds) {
+      store.getState().truncateHistoryAt(stepId);
+    }
+    const next = getNextStep(newTree.steps, stepId);
+    if (next) {
+      store.getState().setCurrentStep(next.definition.id);
+    } else {
+      setDone(true);
+    }
+  }
+  function handlePrev() {
+    const prev = getPreviousStep(tree.steps, stepId);
+    if (prev) store.getState().setCurrentStep(prev.definition.id);
+  }
+  function handleRestart() {
+    store.getState().init(schema);
+    setDone(false);
+    setErrors({});
+  }
+  const currentIdx = tree.steps.findIndex(
+    (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(
+        StepList,
+        {
+          tree,
+          currentIdx,
+          onSelect: (id) => store.getState().setCurrentStep(id)
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { style: styles6.divider }),
+      /* @__PURE__ */ jsx("div", { style: styles6.rightCol, children: /* @__PURE__ */ jsxs("div", { style: styles6.doneScreen, children: [
+        /* @__PURE__ */ jsx("div", { style: styles6.doneIcon, children: "\u2713" }),
+        /* @__PURE__ */ jsx("div", { style: styles6.doneTitle, children: "Parcours termin\xE9 !" }),
+        /* @__PURE__ */ jsx("p", { style: styles6.doneText, children: "Toutes les \xE9tapes ont \xE9t\xE9 compl\xE9t\xE9es avec succ\xE8s." }),
+        /* @__PURE__ */ jsx("button", { style: styles6.primaryBtn, onClick: handleRestart, children: "Recommencer" })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: styles6.panel, children: [
+    /* @__PURE__ */ jsx("div", { style: styles6.leftCol, children: /* @__PURE__ */ jsx(
+      StepList,
+      {
+        tree,
+        currentIdx,
+        onSelect: (id) => store.getState().setCurrentStep(id)
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: styles6.divider }),
+    /* @__PURE__ */ jsx("div", { style: styles6.rightCol, children: /* @__PURE__ */ jsxs("div", { style: styles6.stepRenderer, children: [
+      /* @__PURE__ */ jsx("div", { style: styles6.progressTrack, children: /* @__PURE__ */ jsx("div", { style: { ...styles6.progressFill, width: `${progress}%` } }) }),
+      /* @__PURE__ */ jsx("h2", { style: styles6.stepTitle, children: currentStep?.definition.title ?? "" }),
+      /* @__PURE__ */ jsx("div", { style: styles6.fieldsContainer, children: fields.map((field) => /* @__PURE__ */ jsx(
+        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;
+              });
+            }
+          }
+        },
+        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" })
+      ] })
+    ] }) })
+  ] });
+}
+function StepList({ tree, currentIdx, onSelect }) {
+  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" }),
+    allSteps.map((step) => {
+      const isVisible = !step.hidden;
+      const visIdx = tree.steps.findIndex((s) => s.definition.id === step.definition.id);
+      let status = "hidden";
+      if (isVisible) {
+        if (visIdx < currentIdx) status = "done";
+        else if (visIdx === currentIdx) status = "current";
+        else status = "upcoming";
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            ...styles6.stepItem,
+            ...status === "current" ? styles6.stepItemCurrent : {},
+            ...status === "hidden" ? styles6.stepItemHidden : {},
+            cursor: status === "done" ? "pointer" : "default"
+          },
+          onClick: () => {
+            if (status === "done") onSelect(step.definition.id);
+          },
+          children: [
+            /* @__PURE__ */ jsxs("span", { style: styles6.stepStatus, children: [
+              status === "done" && "\u2713",
+              status === "current" && "\u2192",
+              status === "upcoming" && "\u25CB",
+              status === "hidden" && "\u2013"
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: styles6.stepName, children: step.definition.title }),
+            status === "hidden" && /* @__PURE__ */ jsx("span", { style: styles6.hiddenBadge, children: "hidden" })
+          ]
+        },
+        step.definition.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: [
+      definition.label,
+      definition.validation?.some((r) => r.type === "required") && /* @__PURE__ */ jsx("span", { style: styles6.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",
+      {
+        type: definition.type,
+        style: inputStyle2,
+        value: value ?? "",
+        placeholder: definition.placeholder,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    definition.type === "textarea" && /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        style: { ...inputStyle2, minHeight: 80, resize: "vertical" },
+        value: value ?? "",
+        placeholder: definition.placeholder,
+        onChange: (e) => onChange(e.target.value)
+      }
+    ),
+    definition.type === "select" && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: inputStyle2,
+        value: value ?? "",
+        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)))
+        ]
+      }
+    ),
+    definition.type === "multiselect" && /* @__PURE__ */ jsx(
+      "select",
+      {
+        style: { ...inputStyle2, minHeight: 80 },
+        multiple: true,
+        value: value ?? [],
+        onChange: (e) => {
+          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)))
+      }
+    ),
+    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: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name: definition.id,
+          value: String(opt.value),
+          checked: value === String(opt.value),
+          onChange: () => onChange(String(opt.value))
+        }
+      ),
+      opt.label
+    ] }, String(opt.value))) }),
+    definition.type === "checkbox" && /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 13 }, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: Boolean(value),
+          onChange: (e) => onChange(e.target.checked)
+        }
+      ),
+      definition.placeholder ?? definition.label
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { style: styles6.errorMsg, children: error })
+  ] });
+}
+var styles6 = {
+  panel: {
+    display: "flex",
+    flex: 1,
+    overflow: "hidden"
+  },
+  leftCol: {
+    width: 220,
+    flexShrink: 0,
+    overflowY: "auto",
+    borderRight: "1px solid var(--wp-border)",
+    background: "var(--wp-panel-bg)"
+  },
+  divider: {
+    width: 1,
+    background: "var(--wp-border)",
+    flexShrink: 0
+  },
+  rightCol: {
+    flex: 1,
+    overflow: "auto",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "32px 24px"
+  },
+  stepRenderer: {
+    width: "100%",
+    maxWidth: 520,
+    display: "flex",
+    flexDirection: "column",
+    gap: 20
+  },
+  progressTrack: {
+    height: 4,
+    background: "var(--wp-border)",
+    borderRadius: 2,
+    overflow: "hidden"
+  },
+  progressFill: {
+    height: "100%",
+    background: "var(--wp-primary)",
+    borderRadius: 2,
+    transition: "width 0.3s ease"
+  },
+  stepTitle: {
+    fontSize: 20,
+    fontWeight: 700,
+    color: "var(--wp-text)",
+    margin: 0
+  },
+  fieldsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 16
+  },
+  fieldGroup: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "var(--wp-text)"
+  },
+  required: {
+    color: "var(--wp-danger)"
+  },
+  input: {
+    fontSize: 13,
+    padding: "8px 10px",
+    border: "1px solid var(--wp-border)",
+    borderRadius: "var(--wp-radius)",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box"
+  },
+  inputError: {
+    borderColor: "var(--wp-danger)"
+  },
+  errorMsg: {
+    fontSize: 11,
+    color: "var(--wp-danger)",
+    marginTop: 2
+  },
+  navRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    paddingTop: 8
+  },
+  primaryBtn: {
+    fontSize: 13,
+    fontWeight: 600,
+    padding: "9px 20px",
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "none",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer"
+  },
+  secondaryBtn: {
+    fontSize: 13,
+    fontWeight: 500,
+    padding: "9px 16px",
+    background: "transparent",
+    color: "var(--wp-text-muted)",
+    border: "1px solid var(--wp-border)",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer"
+  },
+  // Step list
+  stepList: {
+    padding: "16px 12px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  },
+  stepListTitle: {
+    fontSize: 11,
+    fontWeight: 700,
+    color: "var(--wp-text-muted)",
+    textTransform: "uppercase",
+    letterSpacing: "0.5px",
+    marginBottom: 8
+  },
+  stepItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "6px 8px",
+    borderRadius: 6,
+    fontSize: 12,
+    color: "var(--wp-text-muted)"
+  },
+  stepItemCurrent: {
+    background: "var(--wp-primary-subtle, rgba(99,102,241,0.08))",
+    color: "var(--wp-primary)",
+    fontWeight: 600
+  },
+  stepItemHidden: {
+    opacity: 0.45
+  },
+  stepStatus: {
+    fontSize: 11,
+    width: 14,
+    flexShrink: 0,
+    textAlign: "center"
+  },
+  stepName: {
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  hiddenBadge: {
+    fontSize: 9,
+    fontWeight: 700,
+    padding: "1px 5px",
+    borderRadius: 4,
+    background: "var(--wp-border)",
+    color: "var(--wp-text-muted)",
+    textTransform: "uppercase",
+    letterSpacing: "0.3px",
+    flexShrink: 0
+  },
+  // Done screen
+  doneScreen: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    gap: 12,
+    paddingTop: 60,
+    textAlign: "center"
+  },
+  doneIcon: {
+    width: 64,
+    height: 64,
+    borderRadius: "50%",
+    background: "var(--wp-success-subtle, rgba(34,197,94,0.1))",
+    color: "var(--wp-success, #22c55e)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 28,
+    fontWeight: 700
+  },
+  doneTitle: {
+    fontSize: 22,
+    fontWeight: 700,
+    color: "var(--wp-text)"
+  },
+  doneText: {
+    fontSize: 14,
+    color: "var(--wp-text-muted)",
+    margin: 0
+  }
+};
+function StepEditor() {
+  const { schema, selectedStepId, updateStep, setStepCondition } = useBuilderStore();
+  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." });
+  }
+  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: [
+        "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__ */ jsx(
+          "input",
+          {
+            style: styles7.input,
+            value: step.title,
+            placeholder: "Step title",
+            onChange: (e) => updateStep(step.id, { title: e.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles7.group, children: [
+        /* @__PURE__ */ jsx("label", { style: styles7.label, children: "URL" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            style: styles7.input,
+            value: step.url,
+            placeholder: "/onboarding/step-name",
+            onChange: (e) => updateStep(step.id, { url: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: styles7.hint, children: [
+          "Supports ",
+          "{{PARAM}}",
+          " placeholders"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: styles7.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 })
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { htmlFor: `resume-${step.id}`, style: styles7.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: [
+              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__ */ jsxs("div", { style: styles7.conditionActions, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: styles7.editConditionBtn,
+              onClick: () => setConditionModalOpen(true),
+              children: hasCondition ? "Edit" : "Add condition"
+            }
+          ),
+          hasCondition && /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: styles7.clearConditionBtn,
+              onClick: () => setStepCondition(step.id, void 0),
+              children: "Clear"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    conditionModalOpen && /* @__PURE__ */ jsxs(
+      Modal,
+      {
+        title: `Condition \u2014 "${step.title}"`,
+        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(
+            ConditionBuilder,
+            {
+              value: step.visibleWhen,
+              onChange: (c) => setStepCondition(step.id, c)
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: styles7.modalFooter, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: styles7.modalCloseBtn,
+              onClick: () => setConditionModalOpen(false),
+              children: "Done"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+var styles7 = {
+  container: { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" },
+  empty: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    color: "var(--wp-text-subtle)",
+    fontSize: 13,
+    textAlign: "center",
+    padding: 32
+  },
+  header: {
+    padding: "12px 16px",
+    borderBottom: "1px solid var(--wp-border)",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  headerTitle: { fontWeight: 700, fontSize: 13, color: "var(--wp-text)" },
+  stepId: { fontSize: 10, color: "var(--wp-text-subtle)", fontFamily: "monospace" },
+  body: { flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12 },
+  group: { display: "flex", flexDirection: "column", gap: 4 },
+  label: { fontSize: 11, fontWeight: 600, color: "var(--wp-text-muted)", textTransform: "uppercase", letterSpacing: "0.05em" },
+  input: {
+    fontSize: 13,
+    padding: "6px 8px",
+    border: "1px solid var(--wp-border-muted)",
+    borderRadius: "var(--wp-radius)",
+    outline: "none",
+    background: "var(--wp-canvas)",
+    color: "var(--wp-text)"
+  },
+  hint: { fontSize: 10, color: "var(--wp-text-subtle)" },
+  checkRow: { display: "flex", alignItems: "center", gap: 8 },
+  checkLabel: { fontSize: 13, color: "var(--wp-text-secondary)" },
+  divider: { height: 1, background: "var(--wp-border)" },
+  conditionRow: {
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: 8
+  },
+  conditionInfo: { display: "flex", flexDirection: "column", gap: 6, flex: 1 },
+  conditionSummary: { display: "flex", alignItems: "center", gap: 8 },
+  conditionBadge: {
+    fontSize: 11,
+    fontWeight: 700,
+    background: "var(--wp-warning-bg)",
+    color: "var(--wp-warning)",
+    padding: "2px 8px",
+    borderRadius: 4
+  },
+  conditionDesc: { fontSize: 11, color: "var(--wp-text-subtle)" },
+  conditionNone: { fontSize: 12, color: "var(--wp-text-subtle)", fontStyle: "italic" },
+  conditionActions: { display: "flex", gap: 6, flexShrink: 0, alignItems: "flex-start", marginTop: 16 },
+  editConditionBtn: {
+    fontSize: 11,
+    padding: "4px 10px",
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "none",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer",
+    fontWeight: 500
+  },
+  clearConditionBtn: {
+    fontSize: 11,
+    padding: "4px 10px",
+    background: "var(--wp-danger-bg-strong)",
+    color: "var(--wp-danger)",
+    border: "none",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer"
+  },
+  modalHint: { fontSize: 13, color: "var(--wp-text-muted)", marginBottom: 16, marginTop: 0 },
+  modalFooter: { marginTop: 20, display: "flex", justifyContent: "flex-end" },
+  modalCloseBtn: {
+    fontSize: 13,
+    padding: "7px 20px",
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "none",
+    borderRadius: "var(--wp-radius-lg)",
+    cursor: "pointer",
+    fontWeight: 600
+  }
+};
+function StepList2() {
+  const { schema, selectedStepId, addStep, removeStep, selectStep, reorderSteps } = useBuilderStore();
+  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);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles8.container, children: [
+    /* @__PURE__ */ jsxs("div", { style: styles8.header, children: [
+      /* @__PURE__ */ jsxs("span", { style: styles8.title, children: [
+        "Steps (",
+        steps.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("button", { style: styles8.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: 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: 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
+        );
+      })
+    ] })
+  ] });
+}
+var styles8 = {
+  container: { display: "flex", flexDirection: "column", height: "100%" },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "12px 16px",
+    borderBottom: "1px solid var(--wp-border)"
+  },
+  title: { fontWeight: 600, fontSize: 13, color: "var(--wp-text-secondary)" },
+  addBtn: {
+    fontSize: 12,
+    padding: "4px 10px",
+    background: "var(--wp-primary)",
+    color: "var(--wp-canvas)",
+    border: "none",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer",
+    fontWeight: 500
+  },
+  errorBanner: {
+    margin: "8px 8px 0",
+    padding: "8px 12px",
+    background: "var(--wp-danger-bg)",
+    border: "1px solid var(--wp-danger-border)",
+    borderRadius: "var(--wp-radius-lg)",
+    fontSize: 12,
+    color: "var(--wp-danger-text)",
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  errorIcon: { fontSize: 14 },
+  list: { flex: 1, overflowY: "auto", padding: 8 },
+  empty: { padding: 24, textAlign: "center", color: "var(--wp-text-subtle)", fontSize: 13 },
+  card: {
+    padding: "10px 12px",
+    borderRadius: "var(--wp-radius-lg)",
+    marginBottom: 4,
+    border: "1px solid transparent",
+    cursor: "pointer",
+    background: "var(--wp-surface)",
+    transition: "all 0.1s",
+    display: "flex",
+    flexDirection: "column",
+    gap: 6
+  },
+  cardSelected: { background: "var(--wp-primary-muted)", border: "1px solid var(--wp-primary-border)" },
+  cardMain: { display: "flex", alignItems: "center", justifyContent: "space-between" },
+  cardLeft: { display: "flex", alignItems: "center", gap: 10, minWidth: 0, flex: 1 },
+  cardIndex: {
+    width: 24,
+    height: 24,
+    borderRadius: "50%",
+    background: "var(--wp-border)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 11,
+    fontWeight: 700,
+    color: "var(--wp-text-muted)",
+    flexShrink: 0
+  },
+  cardTitle: { fontSize: 13, fontWeight: 600, color: "var(--wp-text)" },
+  cardMeta: {
+    fontSize: 11,
+    color: "var(--wp-text-subtle)",
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    marginTop: 2
+  },
+  conditionBadge: {
+    fontSize: 10,
+    background: "var(--wp-warning-bg)",
+    color: "var(--wp-warning)",
+    padding: "1px 6px",
+    borderRadius: 4,
+    fontWeight: 600
+  },
+  cardActions: { display: "flex", gap: 4, flexShrink: 0 },
+  iconBtn: {
+    width: 24,
+    height: 24,
+    border: "none",
+    background: "transparent",
+    cursor: "pointer",
+    borderRadius: 4,
+    fontSize: 12,
+    color: "var(--wp-text-subtle)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconBtnBlocked: {
+    color: "var(--wp-border-muted)",
+    cursor: "not-allowed",
+    opacity: 0.4
+  },
+  deleteBtn: { color: "var(--wp-danger)" },
+  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" },
+  depBadge: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-primary-bg)",
+    color: "var(--wp-primary-dark)",
+    borderRadius: 4
+  },
+  depBadgeUsed: {
+    fontSize: 10,
+    fontWeight: 600,
+    padding: "1px 6px",
+    background: "var(--wp-success-bg)",
+    color: "var(--wp-success)",
+    borderRadius: 4
+  }
+};
+function Toolbar({ onSave, previewMode, onTest }) {
+  const { schema, isDirty, resetSchema } = useBuilderStore();
+  const handleExport = () => {
+    const json = JSON.stringify(schema, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${schema.id}.waypoint.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const handleImport = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = ".json";
+    input.onchange = (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        try {
+          const parsed = JSON.parse(ev.target?.result);
+          const result = validateSchema(parsed);
+          if (!result.valid) {
+            alert(`Invalid schema:
+
+${result.errors.map((e2) => `\u2022 ${e2}`).join("\n")}`);
+            return;
+          }
+          useBuilderStore.getState().loadSchema(parsed);
+        } catch {
+          alert("Invalid JSON file \u2014 could not parse");
+        }
+      };
+      reader.readAsText(file);
+    };
+    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: "/" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: { ...styles9.btn, ...styles9.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" }) })
+    ] });
+  }
+  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: "/" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: styles9.journeyName,
+          value: schema.name,
+          placeholder: "Journey name",
+          onChange: (e) => useBuilderStore.setState((s) => ({
+            schema: { ...s.schema, name: e.target.value },
+            isDirty: true
+          }))
+        }
+      ),
+      isDirty && /* @__PURE__ */ jsx("span", { style: styles9.dirtyDot, title: "Unsaved changes" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: styles9.right, children: [
+      onTest && /* @__PURE__ */ jsx("button", { style: { ...styles9.btn, ...styles9.testBtn }, onClick: onTest, children: "\u25B6 Tester" }),
+      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleImport, children: "Import" }),
+      /* @__PURE__ */ jsx("button", { style: styles9.btn, onClick: handleExport, children: "Export JSON" }),
+      onSave && /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: { ...styles9.btn, ...styles9.saveBtn },
+          onClick: () => onSave(schema),
+          children: "Save"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: { ...styles9.btn, color: "var(--wp-danger)" },
+          onClick: () => {
+            if (confirm("Reset the journey? All changes will be lost.")) resetSchema();
+          },
+          children: "Reset"
+        }
+      )
+    ] })
+  ] });
+}
+var styles9 = {
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "0 16px",
+    height: 48,
+    background: "var(--wp-toolbar-bg)",
+    borderBottom: "1px solid var(--wp-toolbar-border)",
+    flexShrink: 0
+  },
+  left: { display: "flex", alignItems: "center", gap: 8 },
+  logo: { fontSize: 14, fontWeight: 800, color: "var(--wp-toolbar-logo)", letterSpacing: "-0.5px" },
+  separator: { color: "var(--wp-toolbar-text-subtle)", fontSize: 16 },
+  journeyName: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: "var(--wp-toolbar-text)",
+    background: "transparent",
+    border: "none",
+    outline: "none",
+    borderBottom: "1px solid transparent"
+  },
+  dirtyDot: {
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    background: "var(--wp-warning-strong)",
+    flexShrink: 0
+  },
+  right: { display: "flex", alignItems: "center", gap: 8 },
+  btn: {
+    fontSize: 12,
+    padding: "5px 12px",
+    border: "1px solid var(--wp-toolbar-border)",
+    background: "transparent",
+    color: "var(--wp-toolbar-text-muted)",
+    borderRadius: "var(--wp-radius)",
+    cursor: "pointer",
+    fontWeight: 500
+  },
+  saveBtn: { background: "var(--wp-primary)", color: "var(--wp-canvas)", border: "1px solid var(--wp-primary)" },
+  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" }
+};
+function WaypointBuilder({
+  defaultValue,
+  onChange,
+  onSave,
+  theme,
+  className,
+  style
+}) {
+  const { loadSchema, schema } = useBuilderStore();
+  const [previewMode, setPreviewMode] = useState(false);
+  const previewStoreRef = useRef(null);
+  if (previewStoreRef.current === null) {
+    previewStoreRef.current = createRuntimeStore();
+  }
+  useEffect(() => {
+    if (defaultValue) loadSchema(defaultValue);
+  }, []);
+  useEffect(() => {
+    onChange?.(schema);
+  }, [schema, onChange]);
+  function handleTest() {
+    previewStoreRef.current.getState().init(schema);
+    setPreviewMode(true);
+  }
+  const themeVars = buildThemeVars(theme);
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...rootStyle, ...themeVars, ...style }, children: [
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        onSave: !previewMode && onSave ? () => onSave(schema) : void 0,
+        previewMode,
+        onTest: previewMode ? () => setPreviewMode(false) : handleTest
+      }
+    ),
+    previewMode ? /* @__PURE__ */ jsx(
+      PreviewPanel,
+      {
+        store: previewStoreRef.current,
+        schema,
+        onEdit: () => setPreviewMode(false)
+      }
+    ) : /* @__PURE__ */ jsxs("div", { style: layoutStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: colStyle, children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ jsx(StepList2, {}) }),
+        /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid var(--wp-border)", flexShrink: 0, overflow: "auto", maxHeight: 280 }, children: /* @__PURE__ */ jsx(ExternalVariablePanel, {}) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: dividerStyle }),
+      /* @__PURE__ */ jsx("div", { style: colStyle, children: /* @__PURE__ */ jsx(FieldList, {}) }),
+      /* @__PURE__ */ jsx("div", { style: dividerStyle }),
+      /* @__PURE__ */ jsxs("div", { style: { ...colStyle, flex: 1.2, display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, borderBottom: "1px solid var(--wp-border)", overflow: "hidden" }, children: /* @__PURE__ */ jsx(StepEditor, {}) }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "hidden" }, children: /* @__PURE__ */ jsx(FieldEditor, {}) })
+      ] })
+    ] })
+  ] });
+}
+var rootStyle = {
+  display: "flex",
+  flexDirection: "column",
+  height: "100%",
+  background: "var(--wp-canvas)",
+  borderRadius: 12,
+  border: "1px solid var(--wp-border)",
+  overflow: "hidden",
+  fontFamily: "var(--wp-font)"
+};
+var layoutStyle = {
+  display: "flex",
+  flex: 1,
+  overflow: "hidden"
+};
+var colStyle = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  minWidth: 0
+};
+var dividerStyle = {
+  width: 1,
+  background: "var(--wp-border)",
+  flexShrink: 0
+};
+
+export { DARK_THEME, DEFAULT_THEME, WaypointBuilder, buildThemeVars, useBuilderStore };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map