domma-cms 0.3.0 → 0.5.2

package/plugins/form-builder/admin/views/form-editor.js

@@ -1,1444 +0,0 @@
-/**
- * Form Builder Plugin — Form Editor View
- * List-based visual field editor with add/remove/reorder, live preview, and save.
- * Supports "Page Break" pseudo-fields for wizard forms.
- */
-import {apiRequest} from '/admin/js/api.js';
-
-const FIELD_TYPES = [
-    { value: 'string',         label: 'Text (single line)' },
-    { value: 'email',          label: 'Email' },
-    { value: 'tel',            label: 'Phone' },
-    { value: 'number',         label: 'Number' },
-    { value: 'textarea',       label: 'Textarea (multi-line)' },
-    { value: 'select',         label: 'Dropdown (select)' },
-    { value: 'radio',          label: 'Radio buttons' },
-    { value: 'checkbox',       label: 'Single checkbox' },
-    { value: 'checkbox-group', label: 'Checkbox group' },
-    { value: 'date',           label: 'Date' },
-    { value: 'time',           label: 'Time' },
-    { value: 'url',            label: 'URL' },
-    { value: 'password',       label: 'Password' },
-    { value: 'file',           label: 'File upload' },
-    { value: 'hidden',         label: 'Hidden field' }
-];
-
-const OPTION_TYPES = new Set(['select', 'radio', 'checkbox-group']);
-
-let fields   = [];
-let formSlug = null;
-
-function slugify(str) {
-    return str.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '');
-}
-
-function getTypeLabel(type) {
-    return FIELD_TYPES.find(t => t.value === type)?.label || type;
-}
-
-function hasLogic(logic) {
-    if (!logic) return false;
-    if (logic.visibility?.conditions?.length) return true;
-    if (logic.requirement?.conditions?.length) return true;
-    if (logic.validation?.length) return true;
-    if (logic.cascade?.sourceField) return true;
-    return false;
-}
-
-// ---------------------------------------------------------------------------
-// Read field values from DOM back into array
-// ---------------------------------------------------------------------------
-
-function collectFieldFromDOM(idx) {
-    const field = { ...fields[idx] };
-
-    if (field.type === 'spacer') return field;
-
-    // Page-break cards only have label + description inputs
-    if (field.type === 'page-break') {
-        const labelEl = document.getElementById(`fb-pb-label-${idx}`);
-        const descEl  = document.getElementById(`fb-pb-desc-${idx}`);
-        if (labelEl) field.label       = labelEl.value.trim() || field.label;
-        if (descEl)  field.description = descEl.value.trim();
-        return field;
-    }
-
-    const label       = document.getElementById(`fb-label-${idx}`);
-    const name        = document.getElementById(`fb-name-${idx}`);
-    const type        = document.getElementById(`fb-type-${idx}`);
-    const required    = document.getElementById(`fb-required-${idx}`);
-    const placeholder = document.getElementById(`fb-placeholder-${idx}`);
-    const helper      = document.getElementById(`fb-helper-${idx}`);
-
-    if (label)       field.label       = label.value.trim()       || field.label;
-    if (name)        field.name        = name.value.trim()        || field.name;
-    if (type)        field.type        = type.value               || field.type;
-    if (required)    field.required    = required.checked;
-    if (placeholder) field.placeholder = placeholder.value.trim();
-    if (helper)      field.helper      = helper.value.trim();
-
-    if (OPTION_TYPES.has(field.type)) {
-        const ta = document.getElementById(`fb-options-${idx}`);
-        if (ta) {
-            field.options = ta.value.split('\n').filter(l => l.trim()).map(line => {
-                const [v, ...rest] = line.split(':');
-                return { value: v.trim(), label: rest.join(':').trim() || v.trim() };
-            });
-        }
-    }
-
-    if (field.type === 'textarea') {
-        const rows = parseInt(document.getElementById(`fb-rows-${idx}`)?.value, 10);
-        if (rows > 0) field.formConfig = { rows };
-    }
-
-    const minLen = document.getElementById(`fb-minlength-${idx}`)?.value;
-    if (minLen) field.minLength = parseInt(minLen, 10);
-    const maxLen = document.getElementById(`fb-maxlength-${idx}`)?.value;
-    if (maxLen) field.maxLength = parseInt(maxLen, 10);
-
-    const minNum = document.getElementById(`fb-min-${idx}`)?.value;
-    if (minNum !== '' && minNum !== undefined) field.min = parseFloat(minNum);
-    const maxNum = document.getElementById(`fb-max-${idx}`)?.value;
-    if (maxNum !== '' && maxNum !== undefined) field.max = parseFloat(maxNum);
-
-    // Collect conditional logic from the logic builder UI
-    const collectedLogic = collectLogicFromCard(idx);
-    if (collectedLogic) {
-        field.logic = collectedLogic;
-    } else {
-        delete field.logic;
-    }
-
-    return field;
-}
-
-function collectLogicFromCard(idx) {
-    const card = document.querySelector(`.fb-field-card[data-index="${idx}"]`);
-    if (!card) return undefined;
-    const logicSection = card.querySelector('.fb-field-logic');
-    if (!logicSection) return undefined;
-
-    const logic = {};
-    let hasAnyLogic = false;
-
-    // Visibility
-    const visSection = logicSection.querySelector('[data-logic-section="visibility"]');
-    if (visSection) {
-        const defaultSel = visSection.querySelector('.fb-logic-vis-default');
-        const transSel = visSection.querySelector('.fb-logic-vis-transition');
-        const visRules = Array.from(visSection.querySelectorAll('.fb-logic-cond-row')).map(row => {
-            const fieldSel = row.querySelector('.fb-logic-cond-field');
-            const opSel    = row.querySelector('.fb-logic-cond-op');
-            const valInp   = row.querySelector('.fb-logic-cond-val');
-            const thenSel  = row.querySelector('.fb-logic-vis-then');
-            if (!fieldSel?.value) return null;
-            return {
-                when: { all: [{ field: fieldSel.value, operator: opSel.value, value: valInp.value }] },
-                then: thenSel.value
-            };
-        }).filter(Boolean);
-        const visDefault = defaultSel?.value || 'visible';
-        const transition = transSel?.value || 'none';
-        if (visDefault !== 'visible' || visRules.length > 0 || transition !== 'none') {
-            logic.visibility = { default: visDefault, conditions: visRules };
-            if (transition !== 'none') logic.visibility.transition = transition;
-            hasAnyLogic = true;
-        }
-    }
-
-    // Requirement
-    const reqSection = logicSection.querySelector('[data-logic-section="requirement"]');
-    if (reqSection) {
-        const defaultCb = reqSection.querySelector('.fb-logic-req-default');
-        const reqRules = Array.from(reqSection.querySelectorAll('.fb-logic-cond-row')).map(row => {
-            const fieldSel = row.querySelector('.fb-logic-cond-field');
-            const opSel    = row.querySelector('.fb-logic-cond-op');
-            const valInp   = row.querySelector('.fb-logic-cond-val');
-            const thenSel  = row.querySelector('.fb-logic-req-then');
-            if (!fieldSel?.value) return null;
-            return {
-                when: { all: [{ field: fieldSel.value, operator: opSel.value, value: valInp.value }] },
-                then: thenSel.value === 'true'
-            };
-        }).filter(Boolean);
-        if (reqRules.length > 0) {
-            logic.requirement = { default: defaultCb?.checked === true, conditions: reqRules };
-            hasAnyLogic = true;
-        }
-    }
-
-    // Validation
-    const valSection = logicSection.querySelector('[data-logic-section="validation"]');
-    if (valSection) {
-        const valRules = Array.from(valSection.querySelectorAll('.fb-logic-val-rule')).map(row => {
-            const typeSel   = row.querySelector('.fb-logic-val-type');
-            const patternInp = row.querySelector('.fb-logic-val-pattern');
-            const flagsInp  = row.querySelector('.fb-logic-val-flags');
-            const msgInp    = row.querySelector('.fb-logic-val-message');
-            if (!patternInp?.value.trim()) return null;
-            const type = typeSel?.value || 'regex';
-            const rule = { type, message: msgInp?.value.trim() || 'Invalid value.' };
-            if (type === 'regex') {
-                rule.pattern = patternInp.value.trim();
-                if (flagsInp?.value.trim()) rule.flags = flagsInp.value.trim();
-            } else {
-                rule.field = patternInp.value.trim();
-            }
-            return rule;
-        }).filter(Boolean);
-        if (valRules.length > 0) {
-            logic.validation = valRules;
-            hasAnyLogic = true;
-        }
-    }
-
-    // Cascade
-    const cascSection = logicSection.querySelector('[data-logic-section="cascade"]');
-    if (cascSection) {
-        const srcSel    = cascSection.querySelector('.fb-logic-cascade-source');
-        const mapTa     = cascSection.querySelector('.fb-logic-cascade-mapping');
-        const defTa     = cascSection.querySelector('.fb-logic-cascade-defaults');
-        const sourceField = srcSel?.value?.trim();
-        if (sourceField) {
-            let mapping = {};
-            try { mapping = JSON.parse(mapTa?.value || '{}'); } catch { /* invalid json */ }
-            const defaultOptions = (defTa?.value || '').split('\n').filter(l => l.trim()).map(line => {
-                const [v, ...rest] = line.split(':');
-                return { value: v.trim(), label: rest.join(':').trim() || v.trim() };
-            });
-            logic.cascade = { sourceField, mapping, defaultOptions };
-            hasAnyLogic = true;
-        }
-    }
-
-    return hasAnyLogic ? logic : undefined;
-}
-
-function syncAllFieldsFromDOM() {
-    fields = fields.map((_, idx) => collectFieldFromDOM(idx));
-}
-
-// ---------------------------------------------------------------------------
-// Field list renderer — attaches all events directly to elements
-// ---------------------------------------------------------------------------
-
-function renderFieldList($container) {
-    const listEl   = $container.find('#fields-list').get(0);
-    const emptyMsg = $container.find('#fields-empty-msg').get(0);
-    if (!listEl) return;
-
-    // Remove old field cards
-    Array.from(listEl.querySelectorAll('.fb-field-card')).forEach(el => el.remove());
-
-    if (fields.length === 0) {
-        if (emptyMsg) emptyMsg.style.display = '';
-        return;
-    }
-    if (emptyMsg) emptyMsg.style.display = 'none';
-
-    fields.forEach((field, idx) => {
-        const card = field.type === 'page-break'
-            ? buildPageBreakCard(field, idx, $container)
-          : field.type === 'spacer'
-            ? buildSpacerCard(field, idx, $container)
-            : buildFieldCard(field, idx, $container);
-        listEl.appendChild(card);
-    });
-}
-
-// ---------------------------------------------------------------------------
-// Page Break card
-// ---------------------------------------------------------------------------
-
-function buildPageBreakCard(field, idx, $container) {
-    const card = document.createElement('div');
-    card.className     = 'fb-field-card';
-    card.dataset.index = idx;
-    card.style.cssText = 'border:2px dashed var(--border-color,#444);border-radius:6px;overflow:hidden;margin-bottom:.5rem;background:var(--card-bg,rgba(255,255,255,.02));';
-
-    // Header
-    const header = document.createElement('div');
-    header.style.cssText = 'display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;cursor:pointer;user-select:none;';
-
-    const badge = document.createElement('span');
-    badge.textContent  = '— Page Break —';
-    badge.style.cssText = 'font-size:.7rem;padding:.15rem .5rem;border-radius:999px;background:rgba(120,120,120,.2);color:var(--text-muted,#888);white-space:nowrap;flex-shrink:0;font-style:italic;';
-
-    const labelSpan = document.createElement('span');
-    labelSpan.textContent   = field.label || 'Untitled Step';
-    labelSpan.style.cssText = 'flex:1;font-weight:600;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted,#888);';
-
-    const controls = document.createElement('div');
-    controls.style.cssText = 'display:flex;gap:.25rem;flex-shrink:0;margin-left:.5rem;';
-
-    if (idx > 0) {
-        const upBtn = document.createElement('button');
-        upBtn.className   = 'btn btn-xs btn-ghost';
-        upBtn.title       = 'Move up';
-        upBtn.textContent = '↑';
-        upBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            syncAllFieldsFromDOM();
-            [fields[idx - 1], fields[idx]] = [fields[idx], fields[idx - 1]];
-            renderFieldList($container);
-        });
-        controls.appendChild(upBtn);
-    }
-    if (idx < fields.length - 1) {
-        const downBtn = document.createElement('button');
-        downBtn.className   = 'btn btn-xs btn-ghost';
-        downBtn.title       = 'Move down';
-        downBtn.textContent = '↓';
-        downBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            syncAllFieldsFromDOM();
-            [fields[idx], fields[idx + 1]] = [fields[idx + 1], fields[idx]];
-            renderFieldList($container);
-        });
-        controls.appendChild(downBtn);
-    }
-
-    const toggleBtn = document.createElement('button');
-    toggleBtn.className   = 'btn btn-xs btn-ghost';
-    toggleBtn.title       = 'Edit step';
-    toggleBtn.textContent = '⋯';
-    toggleBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        body.style.display = body.style.display === 'none' ? '' : 'none';
-    });
-    controls.appendChild(toggleBtn);
-
-    const removeBtn = document.createElement('button');
-    removeBtn.className   = 'btn btn-xs btn-danger';
-    removeBtn.title       = 'Remove page break';
-    removeBtn.textContent = '✕';
-    removeBtn.addEventListener('click', async (e) => {
-        e.stopPropagation();
-        const confirmed = await E.confirm('Remove this page break?');
-        if (!confirmed) return;
-        syncAllFieldsFromDOM();
-        fields.splice(idx, 1);
-        renderFieldList($container);
-    });
-    controls.appendChild(removeBtn);
-
-    header.appendChild(badge);
-    header.appendChild(labelSpan);
-    header.appendChild(controls);
-
-    header.addEventListener('click', () => {
-        body.style.display = body.style.display === 'none' ? '' : 'none';
-    });
-
-    // Body
-    const body = document.createElement('div');
-    body.className = 'fb-field-body';
-    body.style.cssText = 'padding:.8rem;border-top:1px dashed var(--border-color,#444);display:none;';
-
-    const row1 = buildRow([
-        buildInputGroup('Step Title', `fb-pb-label-${idx}`, 'text', field.label || '', 'Shown as the wizard step heading'),
-        buildInputGroup('Step Description', `fb-pb-desc-${idx}`, 'text', field.description || '', 'Optional sub-heading')
-    ]);
-
-    const labelInp = row1.querySelector(`#fb-pb-label-${idx}`);
-    if (labelInp) {
-        labelInp.addEventListener('input', () => {
-            labelSpan.textContent = labelInp.value || 'Untitled Step';
-        });
-    }
-
-    body.appendChild(row1);
-    card.appendChild(header);
-    card.appendChild(body);
-    return card;
-}
-
-// ---------------------------------------------------------------------------
-// Spacer card
-// ---------------------------------------------------------------------------
-
-function buildSpacerCard(field, idx, $container) {
-    const card = document.createElement('div');
-    card.className = 'fb-field-card';
-    card.dataset.index = idx;
-    card.style.cssText = 'border:1px dashed var(--border-color,#444);border-radius:6px;margin-bottom:.5rem;background:transparent;';
-
-    const header = document.createElement('div');
-    header.style.cssText = 'display:flex;align-items:center;gap:.6rem;padding:.4rem .8rem;';
-
-    const line = document.createElement('div');
-    line.style.cssText = 'flex:1;height:1px;background:var(--border-color,#444);';
-
-    const label = document.createElement('span');
-    label.textContent = 'Spacer';
-    label.style.cssText = 'font-size:.7rem;color:var(--text-muted,#888);white-space:nowrap;padding:0 .4rem;font-style:italic;';
-
-    const line2 = document.createElement('div');
-    line2.style.cssText = 'flex:1;height:1px;background:var(--border-color,#444);';
-
-    const controls = document.createElement('div');
-    controls.style.cssText = 'display:flex;gap:.25rem;flex-shrink:0;';
-
-    if (idx > 0) {
-        const upBtn = document.createElement('button');
-        upBtn.className = 'btn btn-xs btn-ghost';
-        upBtn.title = 'Move up';
-        upBtn.textContent = '↑';
-        upBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            syncAllFieldsFromDOM();
-            [fields[idx - 1], fields[idx]] = [fields[idx], fields[idx - 1]];
-            renderFieldList($container);
-        });
-        controls.appendChild(upBtn);
-    }
-    if (idx < fields.length - 1) {
-        const downBtn = document.createElement('button');
-        downBtn.className = 'btn btn-xs btn-ghost';
-        downBtn.title = 'Move down';
-        downBtn.textContent = '↓';
-        downBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            syncAllFieldsFromDOM();
-            [fields[idx], fields[idx + 1]] = [fields[idx + 1], fields[idx]];
-            renderFieldList($container);
-        });
-        controls.appendChild(downBtn);
-    }
-
-    const removeBtn = document.createElement('button');
-    removeBtn.className = 'btn btn-xs btn-danger';
-    removeBtn.title = 'Remove spacer';
-    removeBtn.textContent = '✕';
-    removeBtn.addEventListener('click', async (e) => {
-        e.stopPropagation();
-        syncAllFieldsFromDOM();
-        fields.splice(idx, 1);
-        renderFieldList($container);
-    });
-    controls.appendChild(removeBtn);
-
-    header.appendChild(line);
-    header.appendChild(label);
-    header.appendChild(line2);
-    header.appendChild(controls);
-    card.appendChild(header);
-    return card;
-}
-
-// ---------------------------------------------------------------------------
-// Regular field card
-// ---------------------------------------------------------------------------
-
-function buildFieldCard(field, idx, $container) {
-    const card = document.createElement('div');
-    card.className     = 'fb-field-card';
-    card.dataset.index = idx;
-    card.style.cssText = 'border:1px solid var(--border-color,#333);border-radius:6px;overflow:hidden;margin-bottom:.5rem;';
-
-    // --- Header ---
-    const header = document.createElement('div');
-    header.style.cssText = 'display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:var(--card-header-bg,rgba(255,255,255,.04));cursor:pointer;user-select:none;';
-
-    const typeBadge = document.createElement('span');
-    typeBadge.textContent  = getTypeLabel(field.type);
-    typeBadge.style.cssText = 'font-size:.7rem;padding:.15rem .45rem;border-radius:999px;background:var(--primary-soft,rgba(99,102,241,.15));color:var(--primary,#6366f1);white-space:nowrap;flex-shrink:0;';
-
-    const labelSpan = document.createElement('span');
-    labelSpan.textContent   = field.label || '(unlabelled)';
-    labelSpan.style.cssText = 'flex:1;font-weight:600;font-size:.9rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
-
-    const controls = document.createElement('div');
-    controls.style.cssText = 'display:flex;gap:.25rem;flex-shrink:0;margin-left:.5rem;';
-
-    if (idx > 0) {
-        const upBtn = document.createElement('button');
-        upBtn.className   = 'btn btn-xs btn-ghost';
-        upBtn.title       = 'Move up';
-        upBtn.textContent = '↑';
-        upBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            syncAllFieldsFromDOM();
-            [fields[idx - 1], fields[idx]] = [fields[idx], fields[idx - 1]];
-            renderFieldList($container);
-        });
-        controls.appendChild(upBtn);
-    }
-    if (idx < fields.length - 1) {
-        const downBtn = document.createElement('button');
-        downBtn.className   = 'btn btn-xs btn-ghost';
-        downBtn.title       = 'Move down';
-        downBtn.textContent = '↓';
-        downBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            syncAllFieldsFromDOM();
-            [fields[idx], fields[idx + 1]] = [fields[idx + 1], fields[idx]];
-            renderFieldList($container);
-        });
-        controls.appendChild(downBtn);
-    }
-
-    const toggleBtn = document.createElement('button');
-    toggleBtn.className   = 'btn btn-xs btn-ghost';
-    toggleBtn.title       = 'Edit field';
-    toggleBtn.textContent = '⋯';
-    toggleBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        body.style.display = body.style.display === 'none' ? '' : 'none';
-    });
-    controls.appendChild(toggleBtn);
-
-    const removeBtn = document.createElement('button');
-    removeBtn.className   = 'btn btn-xs btn-danger';
-    removeBtn.title       = 'Remove field';
-    removeBtn.textContent = '✕';
-    removeBtn.addEventListener('click', async (e) => {
-        e.stopPropagation();
-        const confirmed = await E.confirm('Remove this field?');
-        if (!confirmed) return;
-        syncAllFieldsFromDOM();
-        fields.splice(idx, 1);
-        renderFieldList($container);
-    });
-    controls.appendChild(removeBtn);
-
-    header.appendChild(typeBadge);
-    header.appendChild(labelSpan);
-    if (field.required) {
-        const req = document.createElement('span');
-        req.textContent   = 'required';
-        req.style.cssText = 'font-size:.7rem;color:var(--danger,#ef4444);flex-shrink:0;';
-        header.appendChild(req);
-    }
-    if (hasLogic(field.logic)) {
-        const logicBadge = document.createElement('span');
-        logicBadge.textContent = '⚡';
-        logicBadge.title       = 'Has conditional logic';
-        logicBadge.style.cssText = 'font-size:.75rem;color:var(--primary,#6366f1);flex-shrink:0;';
-        header.appendChild(logicBadge);
-    }
-    header.appendChild(controls);
-
-    // Click header to toggle body
-    header.addEventListener('click', () => {
-        body.style.display = body.style.display === 'none' ? '' : 'none';
-    });
-
-    // --- Body (hidden by default, auto-expanded for new fields) ---
-    const body = buildFieldBody(field, idx, labelSpan);
-    body.style.display = 'none';
-
-    card.appendChild(header);
-    card.appendChild(body);
-    return card;
-}
-
-function buildFieldBody(field, idx, labelSpan) {
-    const body = document.createElement('div');
-    body.className = 'fb-field-body';
-    body.style.cssText = 'padding:.8rem;border-top:1px solid var(--border-color,#333);';
-
-    const row1 = buildRow([
-        buildInputGroup('Label',       `fb-label-${idx}`,       'text',   field.label       || '', 'Shown above the field'),
-        buildInputGroup('Field Name',  `fb-name-${idx}`,        'text',   field.name        || '', 'Used as data key')
-    ]);
-    const row2 = buildRow([
-        buildSelectGroup('Type', `fb-type-${idx}`, FIELD_TYPES, field.type || 'string'),
-        buildCheckboxGroup('Required', `fb-required-${idx}`, field.required || false)
-    ]);
-    const row3 = buildRow([
-        buildInputGroup('Placeholder', `fb-placeholder-${idx}`, 'text', field.placeholder || '', 'Hint text inside the field'),
-        buildInputGroup('Helper Text', `fb-helper-${idx}`,      'text', field.helper      || '', 'Shown below the field')
-    ]);
-
-    body.appendChild(row1);
-    body.appendChild(row2);
-    body.appendChild(row3);
-
-    // Auto-update header label and field name as user types
-    const labelInp = body.querySelector(`#fb-label-${idx}`);
-    const nameInp  = body.querySelector(`#fb-name-${idx}`);
-    if (labelInp) {
-        labelInp.addEventListener('input', () => {
-            if (labelSpan) labelSpan.textContent = labelInp.value || '(unlabelled)';
-            if (nameInp && !nameInp.dataset.manuallyEdited) {
-                nameInp.value = slugify(labelInp.value);
-            }
-        });
-    }
-    if (nameInp) {
-        nameInp.addEventListener('input', () => { nameInp.dataset.manuallyEdited = '1'; });
-    }
-
-    // Re-render body extras when type changes (options, rows, min/max)
-    const typeSelect = body.querySelector(`#fb-type-${idx}`);
-    if (typeSelect) {
-        typeSelect.addEventListener('change', () => {
-            // Update badge in header
-            const card = body.closest('.fb-field-card');
-            if (card) {
-                const badge = card.querySelector('span');
-                if (badge) badge.textContent = getTypeLabel(typeSelect.value);
-            }
-            // Rebuild extras section
-            const extrasEl = body.querySelector('.fb-field-extras');
-            if (extrasEl) extrasEl.remove();
-            const extras = buildFieldExtras(typeSelect.value, field, idx);
-            if (extras) body.appendChild(extras);
-        });
-    }
-
-    // Type-specific extras
-    const extras = buildFieldExtras(field.type, field, idx);
-    if (extras) body.appendChild(extras);
-
-    // Conditional logic builder
-    body.appendChild(buildFieldLogic(field, idx));
-
-    return body;
-}
-
-// ---------------------------------------------------------------------------
-// Conditional Logic Builder UI
-// ---------------------------------------------------------------------------
-
-const CONDITION_OPERATORS = [
-    { value: 'equals',        label: 'equals' },
-    { value: 'not_equals',    label: 'does not equal' },
-    { value: 'contains',      label: 'contains' },
-    { value: 'not_contains',  label: 'does not contain' },
-    { value: 'starts_with',   label: 'starts with' },
-    { value: 'ends_with',     label: 'ends with' },
-    { value: 'greater_than',  label: 'is greater than' },
-    { value: 'less_than',     label: 'is less than' },
-    { value: 'is_empty',      label: 'is empty' },
-    { value: 'is_not_empty',  label: 'is not empty' },
-    { value: 'in',            label: 'is one of (comma sep)' },
-    { value: 'not_in',        label: 'is not one of (comma sep)' },
-    { value: 'matches_regex', label: 'matches regex' },
-];
-
-const NO_VALUE_OPS = new Set(['is_empty', 'is_not_empty']);
-
-function buildLogicSectionHeader(text) {
-    const p = document.createElement('p');
-    p.textContent = text;
-    p.style.cssText = 'font-size:.75rem;font-weight:700;color:var(--text-muted,#888);margin:.6rem 0 .3rem;text-transform:uppercase;letter-spacing:.04em;';
-    return p;
-}
-
-function buildConditionRow(condition, fieldOptions, thenOptions, thenClass, thenSelected) {
-    const row = document.createElement('div');
-    row.className = 'fb-logic-cond-row';
-    row.style.cssText = 'display:flex;gap:.35rem;align-items:center;margin-bottom:.35rem;flex-wrap:wrap;';
-
-    const whenLabel = document.createElement('span');
-    whenLabel.textContent = 'When';
-    whenLabel.style.cssText = 'font-size:.73rem;color:var(--text-muted,#888);flex-shrink:0;';
-
-    const fieldSel = document.createElement('select');
-    fieldSel.className = 'form-input fb-logic-cond-field';
-    fieldSel.style.cssText = 'flex:2;min-width:80px;font-size:.78rem;padding:.2rem .35rem;';
-    fieldOptions.forEach(opt => {
-        const o = document.createElement('option');
-        o.value = opt.value;
-        o.textContent = opt.label;
-        if (condition && opt.value === condition.field) o.selected = true;
-        fieldSel.appendChild(o);
-    });
-
-    const opSel = document.createElement('select');
-    opSel.className = 'form-input fb-logic-cond-op';
-    opSel.style.cssText = 'flex:2;min-width:80px;font-size:.78rem;padding:.2rem .35rem;';
-    CONDITION_OPERATORS.forEach(op => {
-        const o = document.createElement('option');
-        o.value = op.value;
-        o.textContent = op.label;
-        if (condition && op.value === condition.operator) o.selected = true;
-        opSel.appendChild(o);
-    });
-
-    const valInp = document.createElement('input');
-    valInp.type = 'text';
-    valInp.className = 'form-input fb-logic-cond-val';
-    valInp.placeholder = 'value';
-    valInp.style.cssText = 'flex:2;min-width:60px;font-size:.78rem;padding:.2rem .35rem;';
-    valInp.value = condition?.value || '';
-    if (condition && NO_VALUE_OPS.has(condition.operator)) valInp.style.display = 'none';
-    opSel.addEventListener('change', () => {
-        valInp.style.display = NO_VALUE_OPS.has(opSel.value) ? 'none' : '';
-    });
-
-    const arrow = document.createElement('span');
-    arrow.textContent = '→';
-    arrow.style.cssText = 'font-size:.73rem;color:var(--text-muted,#888);flex-shrink:0;';
-
-    const thenSel = document.createElement('select');
-    thenSel.className = `form-input ${thenClass}`;
-    thenSel.style.cssText = 'flex:2;min-width:80px;font-size:.78rem;padding:.2rem .35rem;';
-    thenOptions.forEach(opt => {
-        const o = document.createElement('option');
-        o.value = opt.value;
-        o.textContent = opt.label;
-        if (opt.value === thenSelected) o.selected = true;
-        thenSel.appendChild(o);
-    });
-
-    const removeBtn = document.createElement('button');
-    removeBtn.type = 'button';
-    removeBtn.className = 'btn btn-xs btn-danger';
-    removeBtn.textContent = '✕';
-    removeBtn.style.flexShrink = '0';
-    removeBtn.addEventListener('click', () => row.remove());
-
-    row.appendChild(whenLabel);
-    row.appendChild(fieldSel);
-    row.appendChild(opSel);
-    row.appendChild(valInp);
-    row.appendChild(arrow);
-    row.appendChild(thenSel);
-    row.appendChild(removeBtn);
-    return row;
-}
-
-function buildVisibilitySection(vis, idx, otherFields) {
-    const section = document.createElement('div');
-    section.dataset.logicSection = 'visibility';
-    section.appendChild(buildLogicSectionHeader('Visibility'));
-
-    const defaultRow = document.createElement('div');
-    defaultRow.style.cssText = 'display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;';
-    const defaultLabel = document.createElement('span');
-    defaultLabel.textContent = 'Default:';
-    defaultLabel.style.cssText = 'font-size:.8rem;flex-shrink:0;';
-    const defaultSel = document.createElement('select');
-    defaultSel.className = 'form-input fb-logic-vis-default';
-    defaultSel.style.cssText = 'font-size:.8rem;padding:.25rem .4rem;';
-    [{ value: 'visible', label: 'Visible' }, { value: 'hidden', label: 'Hidden' }].forEach(opt => {
-        const o = document.createElement('option');
-        o.value = opt.value;
-        o.textContent = opt.label;
-        if (opt.value === (vis.default || 'visible')) o.selected = true;
-        defaultSel.appendChild(o);
-    });
-    defaultRow.appendChild(defaultLabel);
-    defaultRow.appendChild(defaultSel);
-    section.appendChild(defaultRow);
-
-    // Transition type dropdown
-    const transRow = document.createElement('div');
-    transRow.style.cssText = 'display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;';
-    const transLabel = document.createElement('span');
-    transLabel.textContent = 'Transition:';
-    transLabel.style.cssText = 'font-size:.8rem;flex-shrink:0;';
-    const transSel = document.createElement('select');
-    transSel.className = 'form-input fb-logic-vis-transition';
-    transSel.style.cssText = 'font-size:.8rem;padding:.25rem .4rem;';
-    [
-        {value: 'none', label: 'None (instant)'},
-        {value: 'fade', label: 'Fade'},
-        {value: 'slide', label: 'Slide'},
-        {value: 'scale', label: 'Scale'},
-    ].forEach(opt => {
-        const o = document.createElement('option');
-        o.value = opt.value;
-        o.textContent = opt.label;
-        if (opt.value === (vis.transition || 'none')) o.selected = true;
-        transSel.appendChild(o);
-    });
-    transRow.appendChild(transLabel);
-    transRow.appendChild(transSel);
-    section.appendChild(transRow);
-
-    const rulesContainer = document.createElement('div');
-    rulesContainer.className = 'fb-logic-vis-rules';
-    const fieldOpts = otherFields.map(f => ({ value: f.name, label: f.label || f.name }));
-    const thenOpts  = [{ value: 'visible', label: 'Show' }, { value: 'hidden', label: 'Hide' }];
-
-    (vis.conditions || []).forEach(rule => {
-        const cond = (rule.when?.all || rule.when?.any || [])[0];
-        const thenVal = rule.then === 'hidden' ? 'hidden' : 'visible';
-        if (fieldOpts.length > 0) rulesContainer.appendChild(buildConditionRow(cond, fieldOpts, thenOpts, 'fb-logic-vis-then', thenVal));
-    });
-    section.appendChild(rulesContainer);
-
-    if (fieldOpts.length > 0) {
-        const addBtn = document.createElement('button');
-        addBtn.type = 'button';
-        addBtn.className = 'btn btn-xs btn-ghost';
-        addBtn.style.cssText = 'font-size:.73rem;margin-top:.2rem;';
-        addBtn.textContent = '+ Add visibility rule';
-        addBtn.addEventListener('click', () => rulesContainer.appendChild(buildConditionRow(null, fieldOpts, thenOpts, 'fb-logic-vis-then', 'visible')));
-        section.appendChild(addBtn);
-    }
-    return section;
-}
-
-function buildRequirementSection(req, idx, otherFields) {
-    const section = document.createElement('div');
-    section.dataset.logicSection = 'requirement';
-    section.appendChild(buildLogicSectionHeader('Conditional Requirement'));
-
-    const cbLabel = document.createElement('label');
-    cbLabel.style.cssText = 'display:flex;align-items:center;gap:.4rem;font-size:.8rem;cursor:pointer;margin-bottom:.4rem;';
-    const cb = document.createElement('input');
-    cb.type = 'checkbox';
-    cb.className = 'fb-logic-req-default';
-    cb.checked = req.default === true;
-    cbLabel.appendChild(cb);
-    cbLabel.appendChild(document.createTextNode('Required by default'));
-    section.appendChild(cbLabel);
-
-    const rulesContainer = document.createElement('div');
-    rulesContainer.className = 'fb-logic-req-rules';
-    const fieldOpts = otherFields.map(f => ({ value: f.name, label: f.label || f.name }));
-    const thenOpts  = [{ value: 'true', label: 'Make required' }, { value: 'false', label: 'Make optional' }];
-
-    (req.conditions || []).forEach(rule => {
-        const cond = (rule.when?.all || rule.when?.any || [])[0];
-        const thenVal = rule.then === true ? 'true' : 'false';
-        if (fieldOpts.length > 0) rulesContainer.appendChild(buildConditionRow(cond, fieldOpts, thenOpts, 'fb-logic-req-then', thenVal));
-    });
-    section.appendChild(rulesContainer);
-
-    if (fieldOpts.length > 0) {
-        const addBtn = document.createElement('button');
-        addBtn.type = 'button';
-        addBtn.className = 'btn btn-xs btn-ghost';
-        addBtn.style.cssText = 'font-size:.73rem;margin-top:.2rem;';
-        addBtn.textContent = '+ Add requirement rule';
-        addBtn.addEventListener('click', () => rulesContainer.appendChild(buildConditionRow(null, fieldOpts, thenOpts, 'fb-logic-req-then', 'true')));
-        section.appendChild(addBtn);
-    }
-    return section;
-}
-
-function buildValidationRuleRow(rule) {
-    const row = document.createElement('div');
-    row.className = 'fb-logic-val-rule';
-    row.style.cssText = 'display:flex;gap:.35rem;align-items:center;margin-bottom:.35rem;flex-wrap:wrap;';
-
-    const typeSel = document.createElement('select');
-    typeSel.className = 'form-input fb-logic-val-type';
-    typeSel.style.cssText = 'flex:0 0 auto;font-size:.78rem;padding:.2rem .35rem;';
-    [{ value: 'regex', label: 'Regex' }, { value: 'match', label: 'Match field' }].forEach(opt => {
-        const o = document.createElement('option');
-        o.value = opt.value;
-        o.textContent = opt.label;
-        if (opt.value === (rule?.type || 'regex')) o.selected = true;
-        typeSel.appendChild(o);
-    });
-
-    const patternInp = document.createElement('input');
-    patternInp.type = 'text';
-    patternInp.className = 'form-input fb-logic-val-pattern';
-    patternInp.placeholder = rule?.type === 'match' ? 'field name' : 'pattern';
-    patternInp.value = rule?.pattern || rule?.field || '';
-    patternInp.style.cssText = 'flex:3;font-size:.78rem;padding:.2rem .35rem;';
-
-    const flagsInp = document.createElement('input');
-    flagsInp.type = 'text';
-    flagsInp.className = 'form-input fb-logic-val-flags';
-    flagsInp.placeholder = 'flags';
-    flagsInp.value = rule?.flags || '';
-    flagsInp.style.cssText = 'flex:0 0 55px;font-size:.78rem;padding:.2rem .35rem;';
-    if (rule?.type === 'match') flagsInp.style.display = 'none';
-
-    typeSel.addEventListener('change', () => {
-        flagsInp.style.display = typeSel.value === 'match' ? 'none' : '';
-        patternInp.placeholder = typeSel.value === 'match' ? 'field name' : 'pattern';
-    });
-
-    const msgInp = document.createElement('input');
-    msgInp.type = 'text';
-    msgInp.className = 'form-input fb-logic-val-message';
-    msgInp.placeholder = 'Error message';
-    msgInp.value = rule?.message || '';
-    msgInp.style.cssText = 'flex:4;font-size:.78rem;padding:.2rem .35rem;';
-
-    const removeBtn = document.createElement('button');
-    removeBtn.type = 'button';
-    removeBtn.className = 'btn btn-xs btn-danger';
-    removeBtn.textContent = '✕';
-    removeBtn.style.flexShrink = '0';
-    removeBtn.addEventListener('click', () => row.remove());
-
-    row.appendChild(typeSel);
-    row.appendChild(patternInp);
-    row.appendChild(flagsInp);
-    row.appendChild(msgInp);
-    row.appendChild(removeBtn);
-    return row;
-}
-
-function buildValidationSection(validationRules, idx, otherFields) {
-    const section = document.createElement('div');
-    section.dataset.logicSection = 'validation';
-    section.appendChild(buildLogicSectionHeader('Custom Validation'));
-
-    const rulesContainer = document.createElement('div');
-    rulesContainer.className = 'fb-logic-val-rules';
-    (validationRules || []).forEach(rule => rulesContainer.appendChild(buildValidationRuleRow(rule)));
-    section.appendChild(rulesContainer);
-
-    const addBtn = document.createElement('button');
-    addBtn.type = 'button';
-    addBtn.className = 'btn btn-xs btn-ghost';
-    addBtn.style.cssText = 'font-size:.73rem;margin-top:.2rem;';
-    addBtn.textContent = '+ Add validation rule';
-    addBtn.addEventListener('click', () => rulesContainer.appendChild(buildValidationRuleRow(null)));
-    section.appendChild(addBtn);
-    return section;
-}
-
-function buildCascadeSection(cascade, idx, otherFields) {
-    const section = document.createElement('div');
-    section.dataset.logicSection = 'cascade';
-    section.appendChild(buildLogicSectionHeader('Cascade Options'));
-
-    const srcRow = document.createElement('div');
-    srcRow.style.cssText = 'display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;';
-    const srcLabel = document.createElement('span');
-    srcLabel.textContent = 'Source field:';
-    srcLabel.style.cssText = 'font-size:.8rem;flex-shrink:0;';
-    const srcSel = document.createElement('select');
-    srcSel.className = 'form-input fb-logic-cascade-source';
-    srcSel.style.cssText = 'flex:1;font-size:.8rem;padding:.25rem .4rem;';
-    const emptyOpt = document.createElement('option');
-    emptyOpt.value = '';
-    emptyOpt.textContent = '— none —';
-    srcSel.appendChild(emptyOpt);
-    otherFields.forEach(f => {
-        const o = document.createElement('option');
-        o.value = f.name;
-        o.textContent = f.label || f.name;
-        if (f.name === cascade.sourceField) o.selected = true;
-        srcSel.appendChild(o);
-    });
-    srcRow.appendChild(srcLabel);
-    srcRow.appendChild(srcSel);
-    section.appendChild(srcRow);
-
-    const mapLabel = document.createElement('p');
-    mapLabel.textContent = 'Mapping JSON — {"value":[{"value":"...","label":"..."}]}';
-    mapLabel.style.cssText = 'font-size:.73rem;color:var(--text-muted,#888);margin:.3rem 0 .2rem;';
-    const mapTa = document.createElement('textarea');
-    mapTa.className = 'form-input fb-logic-cascade-mapping';
-    mapTa.rows = 4;
-    mapTa.style.cssText = 'font-family:monospace;font-size:.78rem;';
-    mapTa.placeholder = '{"uk": [{"value": "london", "label": "London"}]}';
-    mapTa.value = cascade.mapping ? JSON.stringify(cascade.mapping, null, 2) : '';
-    section.appendChild(mapLabel);
-    section.appendChild(mapTa);
-
-    const defLabel = document.createElement('p');
-    defLabel.textContent = 'Default options (one per line: value:Label)';
-    defLabel.style.cssText = 'font-size:.73rem;color:var(--text-muted,#888);margin:.3rem 0 .2rem;';
-    const defTa = document.createElement('textarea');
-    defTa.className = 'form-input fb-logic-cascade-defaults';
-    defTa.rows = 3;
-    defTa.style.cssText = 'font-family:monospace;font-size:.78rem;';
-    defTa.placeholder = 'option1:Option 1\noption2:Option 2';
-    defTa.value = (cascade.defaultOptions || []).map(o => o.value === o.label ? o.value : `${o.value}:${o.label}`).join('\n');
-    section.appendChild(defLabel);
-    section.appendChild(defTa);
-    return section;
-}
-
-function buildFieldLogic(field, idx) {
-    const logic = field.logic || {};
-    const otherFields = fields.filter((f, i) => i !== idx && f.type !== 'page-break' && f.type !== 'spacer');
-
-    const section = document.createElement('div');
-    section.className = 'fb-field-logic';
-    section.style.cssText = 'margin-top:.75rem;border-top:1px solid var(--border-color,#333);padding-top:.5rem;';
-
-    const toggleHeader = document.createElement('div');
-    toggleHeader.style.cssText = 'display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:.15rem 0;';
-    const toggleLabel = document.createElement('span');
-    toggleLabel.style.cssText = 'font-size:.8rem;font-weight:600;color:var(--text-muted,#888);';
-    toggleLabel.textContent = '⚡ Conditional Logic';
-    const isOpen = hasLogic(logic);
-    const toggleBtn = document.createElement('button');
-    toggleBtn.type = 'button';
-    toggleBtn.className = 'btn btn-xs btn-ghost';
-    toggleBtn.textContent = isOpen ? '▾' : '▸';
-
-    const logicBody = document.createElement('div');
-    logicBody.className = 'fb-logic-body';
-    logicBody.style.cssText = 'padding:.25rem 0 .25rem;' + (isOpen ? '' : 'display:none;');
-
-    toggleHeader.addEventListener('click', () => {
-        const collapsed = logicBody.style.display === 'none';
-        logicBody.style.display = collapsed ? '' : 'none';
-        toggleBtn.textContent = collapsed ? '▾' : '▸';
-    });
-    toggleHeader.appendChild(toggleLabel);
-    toggleHeader.appendChild(toggleBtn);
-    section.appendChild(toggleHeader);
-
-    logicBody.appendChild(buildVisibilitySection(logic.visibility || {}, idx, otherFields));
-    logicBody.appendChild(buildRequirementSection(logic.requirement || {}, idx, otherFields));
-    logicBody.appendChild(buildValidationSection(logic.validation || [], idx, otherFields));
-
-    const currentType = document.getElementById(`fb-type-${idx}`)?.value || field.type;
-    if (OPTION_TYPES.has(currentType)) {
-        logicBody.appendChild(buildCascadeSection(logic.cascade || {}, idx, otherFields));
-    }
-
-    section.appendChild(logicBody);
-    return section;
-}
-
-// ---------------------------------------------------------------------------
-// Field type-specific extras
-// ---------------------------------------------------------------------------
-
-function buildFieldExtras(type, field, idx) {
-    const wrap = document.createElement('div');
-    wrap.className = 'fb-field-extras';
-
-    if (OPTION_TYPES.has(type)) {
-        wrap.appendChild(buildOptionsEditor(field.options || [], idx));
-    }
-    if (type === 'textarea') {
-        wrap.appendChild(buildRow([
-            buildInputGroup('Rows', `fb-rows-${idx}`, 'number', field.formConfig?.rows || 4, 'Height of textarea')
-        ]));
-    }
-    if (type === 'string' || type === 'textarea') {
-        wrap.appendChild(buildRow([
-            buildInputGroup('Min Length', `fb-minlength-${idx}`, 'number', field.minLength || '', ''),
-            buildInputGroup('Max Length', `fb-maxlength-${idx}`, 'number', field.maxLength || '', '')
-        ]));
-    }
-    if (type === 'number') {
-        wrap.appendChild(buildRow([
-            buildInputGroup('Min', `fb-min-${idx}`, 'number', field.min ?? '', ''),
-            buildInputGroup('Max', `fb-max-${idx}`, 'number', field.max ?? '', '')
-        ]));
-    }
-
-    return wrap.children.length ? wrap : null;
-}
-
-// ---------------------------------------------------------------------------
-// DOM builders
-// ---------------------------------------------------------------------------
-
-function buildRow(children) {
-    const row = document.createElement('div');
-    row.style.cssText = 'display:flex;gap:.75rem;margin-bottom:.6rem;';
-    children.forEach(c => { if (c) row.appendChild(c); });
-    return row;
-}
-
-function buildInputGroup(label, id, type, value, hint) {
-    const wrap = document.createElement('div');
-    wrap.style.flex = '1';
-
-    const lbl = document.createElement('label');
-    lbl.htmlFor     = id;
-    lbl.className   = 'form-label';
-    lbl.textContent = label;
-    lbl.style.fontSize = '.8rem';
-
-    const inp = document.createElement('input');
-    inp.id        = id;
-    inp.type      = type || 'text';
-    inp.className = 'form-input';
-    inp.value     = value ?? '';
-
-    wrap.appendChild(lbl);
-    wrap.appendChild(inp);
-
-    if (hint) {
-        const h = document.createElement('p');
-        h.className   = 'form-hint text-muted';
-        h.textContent = hint;
-        h.style.cssText = 'font-size:.73rem;margin-top:.2rem;';
-        wrap.appendChild(h);
-    }
-    return wrap;
-}
-
-function buildSelectGroup(label, id, options, selected) {
-    const wrap = document.createElement('div');
-    wrap.style.flex = '1';
-
-    const lbl = document.createElement('label');
-    lbl.htmlFor     = id;
-    lbl.className   = 'form-label';
-    lbl.textContent = label;
-    lbl.style.fontSize = '.8rem';
-
-    const sel = document.createElement('select');
-    sel.id        = id;
-    sel.className = 'form-input';
-    options.forEach(opt => {
-        const o = document.createElement('option');
-        o.value       = opt.value;
-        o.textContent = opt.label;
-        if (opt.value === selected) o.selected = true;
-        sel.appendChild(o);
-    });
-
-    wrap.appendChild(lbl);
-    wrap.appendChild(sel);
-    return wrap;
-}
-
-function buildCheckboxGroup(label, id, checked) {
-    const wrap = document.createElement('div');
-    wrap.style.cssText = 'flex:0;min-width:80px;display:flex;flex-direction:column;justify-content:flex-end;';
-
-    const lbl = document.createElement('label');
-    lbl.style.cssText = 'display:flex;align-items:center;gap:.4rem;cursor:pointer;font-size:.8rem;white-space:nowrap;';
-
-    const inp = document.createElement('input');
-    inp.id      = id;
-    inp.type    = 'checkbox';
-    inp.checked = checked;
-
-    lbl.appendChild(inp);
-    lbl.appendChild(document.createTextNode(label));
-    wrap.appendChild(lbl);
-    return wrap;
-}
-
-function buildOptionsEditor(options, idx) {
-    const wrap = document.createElement('div');
-    wrap.style.cssText = 'margin-top:.4rem;';
-
-    const title = document.createElement('p');
-    title.textContent   = 'Options (one per line: value or value:Label)';
-    title.style.cssText = 'font-size:.8rem;font-weight:600;margin-bottom:.3rem;';
-
-    const ta = document.createElement('textarea');
-    ta.id          = `fb-options-${idx}`;
-    ta.className   = 'form-input';
-    ta.rows        = 4;
-    ta.placeholder = 'yes:Yes\nno:No\nmaybe:Maybe';
-    ta.value       = (options || []).map(o => o.value === o.label ? o.value : `${o.value}:${o.label}`).join('\n');
-    ta.style.fontFamily = 'monospace';
-
-    wrap.appendChild(title);
-    wrap.appendChild(ta);
-    return wrap;
-}
-
-// ---------------------------------------------------------------------------
-// Collect full form data
-// ---------------------------------------------------------------------------
-
-function collectFormData($container) {
-    syncAllFieldsFromDOM();
-    return {
-        title:       $container.find('#field-title').val().trim(),
-        slug:        $container.find('#field-slug').val().trim(),
-        description: $container.find('#field-description').val().trim(),
-        fields,
-        settings: {
-            submitText:         $container.find('#setting-submit-text').val().trim()     || 'Submit',
-            successMessage:     $container.find('#setting-success-message').val().trim() || 'Thank you.',
-            layout:             $container.find('#setting-layout').val()                 || 'stacked',
-            honeypot:           $container.find('#setting-honeypot').prop('checked'),
-            rateLimitPerMinute: parseInt($container.find('#setting-rate-limit').val(), 10) || 3
-        },
-        actions: {
-            email: {
-                enabled:       $container.find('#action-email-enabled').prop('checked'),
-                recipients:    $container.find('#action-email-recipients').val().trim(),
-                subjectPrefix: $container.find('#action-email-subject-prefix').val().trim()
-            },
-            webhook: {
-                enabled: $container.find('#action-webhook-enabled').prop('checked'),
-                url:     $container.find('#action-webhook-url').val().trim(),
-                method:  $container.find('#action-webhook-method').val()
-            }
-        }
-    };
-}
-
-// ---------------------------------------------------------------------------
-// Wizard preview helper
-// ---------------------------------------------------------------------------
-
-function buildWizardSteps(formFields) {
-    const steps = [];
-    let currentGroup = [];
-    let stepTitle = 'Step 1';
-    let stepDesc  = '';
-
-    formFields.forEach(f => {
-        if (f.type === 'page-break') {
-            steps.push({ title: stepTitle, description: stepDesc, fields: currentGroup });
-            currentGroup = [];
-            stepTitle = f.label || `Step ${steps.length + 1}`;
-            stepDesc  = f.description || '';
-        } else if (f.type !== 'spacer') {
-            currentGroup.push(f);
-        }
-    });
-    if (currentGroup.length || steps.length === 0) {
-        steps.push({ title: stepTitle, description: stepDesc, fields: currentGroup });
-    }
-    return steps;
-}
-
-function buildBlueprintFromFields(fieldList) {
-    const blueprint = {};
-    fieldList.forEach(field => {
-        if (field.type === 'page-break' || field.type === 'spacer') return;
-        blueprint[field.name] = {
-            type:        field.type,
-            label:       field.label,
-            required:    field.required,
-            placeholder: field.placeholder,
-            helper:      field.helper,
-            options:     field.options,
-            ...(field.formConfig || {})
-        };
-    });
-    return blueprint;
-}
-
-// ---------------------------------------------------------------------------
-// View
-// ---------------------------------------------------------------------------
-
-export const formEditorView = {
-    templateUrl: '/plugins/form-builder/admin/templates/form-editor.html',
-
-    async onMount($container) {
-        fields   = [];
-        formSlug = null;
-
-        const hash      = window.location.hash;
-        const editMatch = hash.match(/\/plugins\/form-builder\/edit\/([^/?#]+)/);
-        formSlug = editMatch ? editMatch[1] : null;
-
-        let form = null;
-        if (formSlug) {
-            try {
-                form = await apiRequest(`/plugins/form-builder/forms/${formSlug}`);
-                fields = form.fields || [];
-            } catch {
-                E.toast('Could not load form.', { type: 'error' });
-            }
-        }
-
-        if (form) {
-            $container.find('#editor-title').get(0).textContent = `Edit: ${form.title}`;
-            $container.find('#field-title').val(form.title);
-            $container.find('#field-slug').val(form.slug);
-            $container.find('#field-description').val(form.description || '');
-
-            const s = form.settings || {};
-            $container.find('#setting-submit-text').val(s.submitText || 'Submit');
-            $container.find('#setting-success-message').val(s.successMessage || '');
-            $container.find('#setting-layout').val(s.layout || 'stacked');
-            $container.find('#setting-honeypot').prop('checked', s.honeypot !== false);
-            $container.find('#setting-rate-limit').val(s.rateLimitPerMinute || 3);
-
-            const e = form.actions?.email || {};
-            $container.find('#action-email-enabled').prop('checked', e.enabled || false);
-            $container.find('#action-email-recipients').val(e.recipients || '');
-            $container.find('#action-email-subject-prefix').val(e.subjectPrefix || '');
-
-            const w = form.actions?.webhook || {};
-            $container.find('#action-webhook-enabled').prop('checked', w.enabled || false);
-            $container.find('#action-webhook-url').val(w.url || '');
-            $container.find('#action-webhook-method').val(w.method || 'POST');
-        } else {
-            $container.find('#editor-title').get(0).textContent = 'New Form';
-        }
-
-        // Auto-slug from title for new forms
-        if (!formSlug) {
-            $container.find('#field-title').get(0).addEventListener('input', function () {
-                $container.find('#field-slug').val(slugify(this.value));
-            });
-        }
-
-        E.tabs($container.find('#editor-tabs').get(0));
-
-        renderFieldList($container);
-
-        // --- Add dropdown toggle ---
-        const addMenuEl = $container.find('#add-element-menu').get(0);
-        $container.find('#add-element-btn').get(0).addEventListener('click', (e) => {
-            e.stopPropagation();
-            addMenuEl.style.display = addMenuEl.style.display === 'none' ? '' : 'none';
-        });
-        document.addEventListener('click', () => {
-            if (addMenuEl) addMenuEl.style.display = 'none';
-        });
-
-        // --- Add field ---
-        $container.find('#add-field-btn').get(0).addEventListener('click', () => {
-            if (addMenuEl) addMenuEl.style.display = 'none';
-            syncAllFieldsFromDOM();
-            const newIdx = fields.length;
-            fields.push({
-                name:        `field_${newIdx + 1}`,
-                type:        'string',
-                label:       'New Field',
-                required:    false,
-                placeholder: ''
-            });
-            renderFieldList($container);
-            // Auto-expand the newly added field
-            const listEl = $container.find('#fields-list').get(0);
-            const newCard = listEl?.lastElementChild;
-            if (newCard) {
-                const body = newCard.querySelector('.fb-field-body');
-                if (body) body.style.display = '';
-            }
-        });
-
-        // --- Add spacer ---
-        $container.find('#add-spacer-btn').get(0).addEventListener('click', () => {
-            if (addMenuEl) addMenuEl.style.display = 'none';
-            syncAllFieldsFromDOM();
-            fields.push({type: 'spacer'});
-            renderFieldList($container);
-        });
-
-        // --- Add page break ---
-        $container.find('#add-page-break-btn').get(0).addEventListener('click', () => {
-            if (addMenuEl) addMenuEl.style.display = 'none';
-            syncAllFieldsFromDOM();
-            const stepNum = fields.filter(f => f.type === 'page-break').length + 2;
-            fields.push({
-                type:        'page-break',
-                label:       `Step ${stepNum}`,
-                description: ''
-            });
-            renderFieldList($container);
-        });
-
-        // --- Save ---
-        $container.find('#save-form-btn').get(0).addEventListener('click', async () => {
-            const data = collectFormData($container);
-            if (!data.title) {
-                E.toast('Please enter a form title.', { type: 'error' });
-                return;
-            }
-            try {
-                if (formSlug) {
-                    await apiRequest(`/plugins/form-builder/forms/${formSlug}`, {
-                        method: 'PUT',
-                        body:   JSON.stringify(data)
-                    });
-                    E.toast('Form saved.', { type: 'success' });
-                } else {
-                    const created = await apiRequest('/plugins/form-builder/forms', {
-                        method: 'POST',
-                        body:   JSON.stringify({ title: data.title, slug: data.slug })
-                    });
-                    await apiRequest(`/plugins/form-builder/forms/${created.slug}`, {
-                        method: 'PUT',
-                        body:   JSON.stringify({ ...data, slug: created.slug })
-                    });
-                    formSlug = created.slug;
-                    R.navigate(`/plugins/form-builder/edit/${formSlug}`);
-                    E.toast('Form created.', { type: 'success' });
-                }
-            } catch (err) {
-                E.toast(err.message || 'Failed to save form.', { type: 'error' });
-            }
-        });
-
-      // --- Preview / Test ---
-        $container.find('#preview-btn').get(0).addEventListener('click', () => {
-          const data = collectFormData($container);
-          const previewEl = $container.find('#preview-container').get(0);
-            if (!previewEl) return;
-
-          // Reset result area
-          const resultEl = $container.find('#preview-test-result').get(0);
-          const testBadge = $container.find('#preview-test-badge').get(0);
-          if (resultEl) {
-            resultEl.style.display = 'none';
-            resultEl.textContent = '';
-          }
-          if (testBadge) testBadge.style.display = formSlug ? '' : 'none';
-
-            $container.find('#preview-card').get(0).style.display = '';
-            previewEl.textContent = '';
-
-            const formEl = document.createElement('div');
-            formEl.id = 'fb-preview-form';
-            previewEl.appendChild(formEl);
-
-          // If saved: wire up real submit; otherwise no-op
-          const onSubmit = formSlug
-            ? async (formData) => {
-              if (resultEl) {
-                resultEl.style.display = 'none';
-                resultEl.textContent = '';
-              }
-              try {
-                const res = await fetch(`/api/plugins/form-builder/submit/${formSlug}`, {
-                  method: 'POST',
-                  headers: {'Content-Type': 'application/json'},
-                  body: JSON.stringify(formData)
-                });
-                const json = await res.json();
-                if (!res.ok) throw new Error(json.error || 'Submission failed.');
-                if (resultEl) {
-                  resultEl.textContent = json.message || data.settings?.successMessage || 'Submitted successfully.';
-                  resultEl.style.cssText = 'display:block;margin-top:.75rem;padding:.6rem .9rem;border-radius:6px;font-size:.9rem;background:rgba(34,197,94,.12);color:var(--success,#22c55e);';
-                }
-                E.toast('Test submission stored.', {type: 'success'});
-              } catch (err) {
-                if (resultEl) {
-                  resultEl.textContent = err.message;
-                  resultEl.style.cssText = 'display:block;margin-top:.75rem;padding:.6rem .9rem;border-radius:6px;font-size:.9rem;background:rgba(239,68,68,.12);color:var(--danger,#ef4444);';
-                }
-                E.toast(err.message, {type: 'error'});
-              }
-              return false;
-            }
-            : () => false;
-
-            const hasPageBreaks = data.fields.some(f => f.type === 'page-break');
-
-            if (typeof F !== 'undefined') {
-                if (hasPageBreaks && F.wizard) {
-                    const steps = buildWizardSteps(data.fields).map(step => ({
-                        title:       step.title,
-                        description: step.description,
-                        fields:      buildBlueprintFromFields(step.fields)
-                    }));
-                  F.wizard('#fb-preview-form', {schema: {steps}, onSubmit});
-                } else if (F.render) {
-                    const blueprint = buildBlueprintFromFields(data.fields);
-                    F.render('#fb-preview-form', blueprint, {}, {
-                        submitText: data.settings?.submitText || 'Submit',
-                      onSubmit
-                    });
-                }
-                // Init conditional logic engine on preview form
-                if (window.FormLogicEngine && data.fields.some(f => f.logic)) {
-                    requestAnimationFrame(() => {
-                        const runtime = new window.FormLogicEngine.FormLogicRuntime(
-                            { fields: data.fields },
-                            formEl
-                        );
-                        runtime.init();
-                    });
-                }
-            } else {
-                const msg = document.createElement('p');
-                msg.textContent   = `${data.fields.filter(f => f.type !== 'page-break').length} field(s): ${data.fields.filter(f => f.type !== 'page-break').map(f => f.label).join(', ')}`;
-                msg.style.cssText = 'color:var(--muted);font-style:italic;';
-                formEl.appendChild(msg);
-            }
-
-            $container.find('#preview-card').get(0).scrollIntoView({ behavior: 'smooth', block: 'start' });
-        });
-    }
-};