domma-cms 0.1.0

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

@@ -0,0 +1,817 @@
+/**
+ * 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;
+}
+
+// ---------------------------------------------------------------------------
+// Read field values from DOM back into array
+// ---------------------------------------------------------------------------
+
+function collectFieldFromDOM(idx) {
+    const field = { ...fields[idx] };
+
+    // 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);
+
+    return field;
+}
+
+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)
+            : 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;
+}
+
+// ---------------------------------------------------------------------------
+// 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);
+    }
+    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);
+
+    return body;
+}
+
+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 {
+            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') 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));
+            });
+        }
+
+        renderFieldList($container);
+
+        // --- Add field ---
+        $container.find('#add-field-btn').get(0).addEventListener('click', () => {
+            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 page break ---
+        $container.find('#add-page-break-btn').get(0).addEventListener('click', () => {
+            syncAllFieldsFromDOM();
+            const stepNum = fields.filter(f => f.type === 'page-break').length + 2;
+            fields.push({
+                type:        'page-break',
+                label:       `Step ${stepNum}`,
+                description: ''
+            });
+            renderFieldList($container);
+            // Auto-expand the newly added page break card
+            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 = '';
+            }
+        });
+
+        // --- 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
+                    });
+                }
+            } 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' });
+        });
+    }
+};