domma-cms 0.1.0 → 0.2.0

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

@@ -36,6 +36,15 @@ 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
 // ---------------------------------------------------------------------------
@@ -43,6 +52,8 @@ function getTypeLabel(type) {
 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}`);
@@ -91,9 +102,119 @@ function collectFieldFromDOM(idx) {
     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));
 }
@@ -119,6 +240,8 @@ function renderFieldList($container) {
     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);
     });
@@ -231,6 +354,79 @@ function buildPageBreakCard(field, idx, $container) {
     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
 // ---------------------------------------------------------------------------
@@ -315,6 +511,13 @@ function buildFieldCard(field, idx, $container) {
         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
@@ -390,9 +593,408 @@ function buildFieldBody(field, idx, labelSpan) {
     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');
+
+    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';
@@ -575,7 +1177,7 @@ function buildWizardSteps(formFields) {
             currentGroup = [];
             stepTitle = f.label || `Step ${steps.length + 1}`;
             stepDesc  = f.description || '';
-        } else {
+        } else if (f.type !== 'spacer') {
             currentGroup.push(f);
         }
     });
@@ -588,7 +1190,7 @@ function buildWizardSteps(formFields) {
 function buildBlueprintFromFields(fieldList) {
     const blueprint = {};
     fieldList.forEach(field => {
-        if (field.type === 'page-break') return;
+        if (field.type === 'page-break' || field.type === 'spacer') return;
         blueprint[field.name] = {
             type:        field.type,
             label:       field.label,
@@ -662,8 +1264,19 @@ export const formEditorView = {
 
         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({
@@ -683,8 +1296,17 @@ export const formEditorView = {
             }
         });
 
+        // --- 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({
@@ -693,13 +1315,6 @@ export const formEditorView = {
                 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 ---
@@ -804,6 +1419,16 @@ export const formEditorView = {
                       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(', ')}`;