@seliseblocks/mailcraft 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seliseblocks/mailcraft",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Framework-agnostic drag-and-drop email template editor, packaged as a zero-dependency Web Component.",
   "license": "MIT",
   "author": "SELISE Digital Platforms",
@@ -49,6 +49,7 @@
     "examples",
     "README.md",
     "DOCS.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
   "engines": {

package/src/core/blocks.js

@@ -60,7 +60,14 @@ export const mkRow = (spans, blocks) => ({
     border: 0, borderStyle: 'solid', lineColor: '#e2e2e5', bTop: true, bRight: true, bBottom: true, bLeft: true, radius: 0, shadow: '', maxW: 100,
     mt: 0, mr: 0, mb: 0, ml: 0,
     layout: 'columns', flexDir: 'row', justify: 'flex-start', alignItems: 'stretch', wrap: true, gridCols: 2,
-    py: 20, px: 24, padSplit: false, gap: 20, valign: 'top', stackMobile: true,
+    py: 20, px: 24, padSplit: false, gap: 20, valign: 'top',
+    // What this row does on a narrow screen. `mobileCols` is the number of
+    // columns it keeps there -- 1 stacks (the old `stackMobile: true`), 2 makes
+    // a two-up grid, 'keep' leaves the desktop layout alone (the old
+    // `stackMobile: false`). `mobileOrder: 'reverse'` flips the visual order,
+    // which is how an alternating image/text strip keeps the image on top of
+    // every band once stacked. Saved documents are mapped over in migrateDoc.
+    mobileCols: 1, mobileOrder: 'normal',
   },
   cols: spans.map((s, i) => ({ id: uid(), span: s, blocks: i === 0 && blocks ? blocks : [] })),
 });
@@ -210,6 +217,13 @@ export function migrateDoc(doc) {
       // 'square' choice rather than silently becoming an unrecognized value.
       c.blocks.forEach((b) => { if (b.type === 'social' && b.props.shape === 'solid') b.props.shape = 'square'; });
     });
+    // Mobile behaviour used to be one boolean, `stackMobile`. Mapped before
+    // the defaults are applied, or every document saved before this build
+    // would take `mobileCols: 1` from the defaults and a row that had
+    // deliberately opted out of stacking would start stacking.
+    if (r.props.mobileCols === undefined && r.props.stackMobile !== undefined) {
+      r.props.mobileCols = r.props.stackMobile === false ? 'keep' : 1;
+    }
     Object.keys(defaults).forEach((k) => { if (r.props[k] === undefined) r.props[k] = defaults[k]; });
     if (hadBlocks && !r.cols.some((c) => c.blocks.length)) emptied.push(r.id);
   });

package/src/core/css-cascade.js

@@ -1,117 +1,117 @@
-/**
- * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
- * elements' inline styles, so the importer's classifiers (which read inline
- * styles only) see class-styled templates -- Mailchimp exports, hand-written
- * emails, framework output that was never inlined -- the same way a mail
- * client would.
- *
- * Deliberately a subset of a real cascade, matched to what email CSS uses:
- * - `@media` blocks (and every other at-rule) are dropped whole: responsive
- *   overrides can't be represented in the imported model, desktop values win.
- *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
- *   so mobile-only duplicate content is correctly dropped by the importer's
- *   hidden-element skip.
- * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
- *   interactive or generated state with no place in a static import.
- * - Specificity is the classic ids/classes/tags count; equal specificity
- *   resolves by source order; `!important` wins over everything including
- *   inline styles, which otherwise always win (matching browser behavior for
- *   the combinations that matter here).
- */
-
-function stripComments(css) {
-  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
-}
-
-/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
-function stripAtRules(css) {
-  let out = '';
-  let i = 0;
-  while (i < css.length) {
-    if (css[i] === '@') {
-      const semi = css.indexOf(';', i);
-      const brace = css.indexOf('{', i);
-      if (brace === -1 || (semi !== -1 && semi < brace)) {
-        i = semi === -1 ? css.length : semi + 1;
-        continue;
-      }
-      let depth = 0;
-      let j = brace;
-      for (; j < css.length; j++) {
-        if (css[j] === '{') depth++;
-        else if (css[j] === '}') { depth--; if (!depth) break; }
-      }
-      i = j + 1;
-      continue;
-    }
-    out += css[i];
-    i++;
-  }
-  return out;
-}
-
-function specificity(sel) {
-  const ids = (sel.match(/#[\w-]+/g) || []).length;
-  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
-  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
-  return ids * 100 + classes * 10 + tags;
-}
-
-export function inlineStylesheets(doc) {
-  const sheets = Array.from(doc.querySelectorAll('style'));
-  if (!sheets.length) return;
-  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
-
-  const rules = [];
-  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
-  let m;
-  let order = 0;
-  while ((m = ruleRe.exec(css))) {
-    const decls = [];
-    m[2].split(';').forEach((d) => {
-      const at = d.indexOf(':');
-      if (at < 0) return;
-      const prop = d.slice(0, at).trim().toLowerCase();
-      let value = d.slice(at + 1).trim();
-      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
-      const important = /!important\s*$/i.test(value);
-      if (important) value = value.replace(/!important\s*$/i, '').trim();
-      if (value) decls.push({ prop, value, important });
-    });
-    if (!decls.length) continue;
-    m[1].split(',').forEach((raw) => {
-      const sel = raw.trim();
-      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
-      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
-    });
-  }
-  if (!rules.length) return;
-
-  // Ascending: later (more specific / later-in-source) rules overwrite
-  // earlier winners per property below.
-  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
-
-  const winners = new Map(); // element -> Map(prop -> {value, important})
-  rules.forEach((rule) => {
-    let matched;
-    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
-    matched.forEach((el) => {
-      if (el !== doc.body && !doc.body.contains(el)) return;
-      let bucket = winners.get(el);
-      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
-      rule.decls.forEach((d) => {
-        const cur = bucket.get(d.prop);
-        if (cur && cur.important && !d.important) return;
-        bucket.set(d.prop, d);
-      });
-    });
-  });
-
-  winners.forEach((bucket, el) => {
-    if (!el.style) return;
-    bucket.forEach((d, prop) => {
-      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
-      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
-    });
-  });
-}
+/**
+ * Import-time CSS cascade: folds a parsed document's `<style>` rules into the
+ * elements' inline styles, so the importer's classifiers (which read inline
+ * styles only) see class-styled templates -- Mailchimp exports, hand-written
+ * emails, framework output that was never inlined -- the same way a mail
+ * client would.
+ *
+ * Deliberately a subset of a real cascade, matched to what email CSS uses:
+ * - `@media` blocks (and every other at-rule) are dropped whole: responsive
+ *   overrides can't be represented in the imported model, desktop values win.
+ *   A side benefit: base-rule `.desktop_hide { display:none }` still applies,
+ *   so mobile-only duplicate content is correctly dropped by the importer's
+ *   hidden-element skip.
+ * - Selectors containing `:` are skipped -- pseudo-classes/-elements are
+ *   interactive or generated state with no place in a static import.
+ * - Specificity is the classic ids/classes/tags count; equal specificity
+ *   resolves by source order; `!important` wins over everything including
+ *   inline styles, which otherwise always win (matching browser behavior for
+ *   the combinations that matter here).
+ */
+
+function stripComments(css) {
+  return String(css || '').replace(/\/\*[\s\S]*?\*\//g, '');
+}
+
+/** Removes every at-rule: block-less ones (`@import ...;`) to the semicolon, block ones (`@media { ... }`) across balanced braces. */
+function stripAtRules(css) {
+  let out = '';
+  let i = 0;
+  while (i < css.length) {
+    if (css[i] === '@') {
+      const semi = css.indexOf(';', i);
+      const brace = css.indexOf('{', i);
+      if (brace === -1 || (semi !== -1 && semi < brace)) {
+        i = semi === -1 ? css.length : semi + 1;
+        continue;
+      }
+      let depth = 0;
+      let j = brace;
+      for (; j < css.length; j++) {
+        if (css[j] === '{') depth++;
+        else if (css[j] === '}') { depth--; if (!depth) break; }
+      }
+      i = j + 1;
+      continue;
+    }
+    out += css[i];
+    i++;
+  }
+  return out;
+}
+
+function specificity(sel) {
+  const ids = (sel.match(/#[\w-]+/g) || []).length;
+  const classes = (sel.match(/\.[\w-]+|\[[^\]]*\]/g) || []).length;
+  const tags = (sel.match(/(^|[\s>+~])[a-zA-Z][\w-]*/g) || []).length;
+  return ids * 100 + classes * 10 + tags;
+}
+
+export function inlineStylesheets(doc) {
+  const sheets = Array.from(doc.querySelectorAll('style'));
+  if (!sheets.length) return;
+  const css = stripAtRules(stripComments(sheets.map((s) => s.textContent || '').join('\n')));
+
+  const rules = [];
+  const ruleRe = /([^{}]+)\{([^{}]*)\}/g;
+  let m;
+  let order = 0;
+  while ((m = ruleRe.exec(css))) {
+    const decls = [];
+    m[2].split(';').forEach((d) => {
+      const at = d.indexOf(':');
+      if (at < 0) return;
+      const prop = d.slice(0, at).trim().toLowerCase();
+      let value = d.slice(at + 1).trim();
+      if (!prop || !value || prop.indexOf('--') === 0 || prop.indexOf('mso-') === 0) return;
+      const important = /!important\s*$/i.test(value);
+      if (important) value = value.replace(/!important\s*$/i, '').trim();
+      if (value) decls.push({ prop, value, important });
+    });
+    if (!decls.length) continue;
+    m[1].split(',').forEach((raw) => {
+      const sel = raw.trim();
+      if (!sel || sel === '*' || sel.indexOf(':') > -1) return;
+      rules.push({ sel, decls, spec: specificity(sel), order: order++ });
+    });
+  }
+  if (!rules.length) return;
+
+  // Ascending: later (more specific / later-in-source) rules overwrite
+  // earlier winners per property below.
+  rules.sort((a, b) => a.spec - b.spec || a.order - b.order);
+
+  const winners = new Map(); // element -> Map(prop -> {value, important})
+  rules.forEach((rule) => {
+    let matched;
+    try { matched = doc.querySelectorAll(rule.sel); } catch { return; }
+    matched.forEach((el) => {
+      if (el !== doc.body && !doc.body.contains(el)) return;
+      let bucket = winners.get(el);
+      if (!bucket) { bucket = new Map(); winners.set(el, bucket); }
+      rule.decls.forEach((d) => {
+        const cur = bucket.get(d.prop);
+        if (cur && cur.important && !d.important) return;
+        bucket.set(d.prop, d);
+      });
+    });
+  });
+
+  winners.forEach((bucket, el) => {
+    if (!el.style) return;
+    bucket.forEach((d, prop) => {
+      if (!d.important && el.style.getPropertyValue(prop)) return; // inline wins
+      try { el.style.setProperty(prop, d.value); } catch { /* unparseable value -- skip */ }
+    });
+  });
+}

package/src/core/editor-core.js

@@ -3,7 +3,7 @@ import { mk, blk, mkRow, GROUPS, LAYOUTS, migrateDoc, normalizeDoc, blankDoc } f
 import { binder, decorate, group } from './binder.js';
 import { ALL_FOLDER_ID, normalizeAsset, resolveLimits, providerProblems } from './storage.js';
 import { validateFiles, limitsProblem } from './storage-limits.js';
-import { migrateTokens, cleanHtml, escHtml, linkHref } from './sanitize.js';
+import { migrateTokens, cleanHtml, escHtml, linkHref, scaleInlineSizes, stripInlineStyle } from './sanitize.js';
 import { buildHtml as buildHtmlFn } from './export.js';
 import { htmlToDoc } from './import-html.js';
 import { boxCss } from './layout-style.js';
@@ -35,6 +35,48 @@ const UPLOAD_CONCURRENCY = 3;
  */
 const RETIRED_SEED = /^data:image\/svg\+xml;utf8,.*%3Cpattern%20id%3D%22s%22/;
 const withoutRetiredSeeds = (assets) => (Array.isArray(assets) ? assets.filter((a) => !RETIRED_SEED.test(String((a && a.url) || ''))) : []);
+/**
+ * The one span Text size moves in, per block type -- shared by the inspector
+ * range and the RTE's ± buttons. They used to disagree: the panel allowed
+ * 8–96 (text) and 12–120 (heading) while `size()` clamped to a private
+ * 10–64, so a single "Larger text" click on a 96px block *shrank* it to 64.
+ */
+const SIZE_SPAN = { text: [8, 96], heading: [12, 120] };
+/** The blocks whose content is rich HTML in props, and the prop it lives in. Only these need the descendant rewrites below. */
+const RICH_HTML_PROP = { text: 'html', list: 'items' };
+/** Inspector key -> the inline CSS property whose descendant copies mask it (see `stripInlineStyle`). */
+const RICH_OWNED_STYLE = { color: 'color', lh: 'line-height', weight: 'font-weight', align: 'text-align' };
+
+/**
+ * Keeps a rich block's descendants in agreement with the block-level control
+ * being moved. Imported HTML deliberately keeps per-element inline typography
+ * (sanitize.js `cleanImportHtml`), and a descendant's own declaration beats
+ * inheritance from the wrapper -- so without this, Text size / color / Line
+ * spacing / weight / Align silently did nothing on any imported (or
+ * AI-drafted) block. Size *scales* descendants so a 15/26/15px hierarchy
+ * survives as 45/78/45 instead of flattening; the others strip the descendant
+ * property, exactly the semantics the Font control already shipped with.
+ * Runs inside the same `commit` as the prop write: one undo step, and a
+ * document nobody touches is never rewritten.
+ */
+function syncRichContent(block, key, val) {
+  const prop = RICH_HTML_PROP[block.type];
+  if (!prop) return;
+  // list items are one fragment per line; the rewrite must not run across the joins.
+  const perLine = (src, fn) => (prop === 'items' ? String(src).split('\n').map(fn).join('\n') : fn(String(src)));
+  const src = block.props[prop];
+  if (src == null || src === '') return;
+  if (key === 'size') {
+    const cur = Number(block.props.size);
+    const next = Number(val);
+    // An unknown base (imports that carried no readable size) can't be scaled
+    // against -- the first explicit size just establishes the base.
+    if (cur > 0 && next > 0 && next !== cur) block.props[prop] = perLine(src, (s) => scaleInlineSizes(s, next / cur));
+  } else if (RICH_OWNED_STYLE[key]) {
+    block.props[prop] = perLine(src, (s) => stripInlineStyle(s, RICH_OWNED_STYLE[key]));
+  }
+}
+
 const BORDER_STYLES = [
   { value: 'solid', label: 'Solid' },
   { value: 'dashed', label: 'Dashed' },
@@ -524,7 +566,8 @@ export class EditorCore {
       if (b.props[key] !== val) this.setProp(b.id, key, val);
     }
     const cur = Number(b.props.size) || 16;
-    this.setProp(b.id, 'size', Math.max(10, Math.min(64, cur + delta)));
+    const [lo, hi] = SIZE_SPAN[b.type] || [10, 64];
+    this.setProp(b.id, 'size', Math.max(lo, Math.min(hi, cur + delta)));
   }
 
   hasCountdown() { return this.state.doc.rows.some((r) => r.cols.some((c) => c.blocks.some((b) => b.type === 'countdown'))); }
@@ -620,7 +663,10 @@ export class EditorCore {
     this.commit((doc) => {
       const f = this.find(doc, id);
       const target = f.block ? f.block.props : (f.row ? f.row.props : null);
-      if (target) target[key] = val;
+      if (!target) return;
+      // Before the write: the size rewrite needs the outgoing value as its base.
+      if (f.block) syncRichContent(f.block, key, val);
+      target[key] = val;
     });
   }
 
@@ -1190,6 +1236,12 @@ export class EditorCore {
     this.flash(this.t('toast.htmlCopied'));
   };
 
+  /** Code view's source pane onto the clipboard, unsaved edits included: `codeSrc` is what the pane shows, which may be ahead of what Apply has pushed to the canvas. */
+  copyCode = () => {
+    if (navigator.clipboard) navigator.clipboard.writeText(this.state.codeSrc).catch(() => {});
+    this.flash(this.t('toast.htmlCopied'));
+  };
+
   downloadExport = () => {
     const blob = new Blob([this.state.exportCode], { type: 'text/html' });
     const a = document.createElement('a');
@@ -1305,12 +1357,23 @@ export class EditorCore {
       // line and a dead divider strip under the title.
       const base = [];
       const padF = [B.head('Spacing'), group(null, [B.range('Above & below', 'py', 0, 160, 2, 'px'), B.range('Left & right', 'px', 0, 120, 2, 'px')])];
+      // Appended to every block type at once rather than repeated across
+      // twenty switch arms. An absent `vis` means "all devices", so the
+      // property only ever appears in a document that asked for it and no
+      // migration is needed. Re-decorating an already-decorated list is safe:
+      // `decorate` derives its flags from `kind`, which survives the pass.
+      const visF = [B.head('Visibility'), B.seg('Show on', 'vis', [
+        { value: 'all', label: 'All' },
+        { value: 'desktop', label: 'Desktop' },
+        { value: 'mobile', label: 'Mobile' },
+      ])];
+      const built = (() => {
       switch (b.type) {
         case 'text': return decorate(base.concat(
           /<a(?:\s|>)/i.test(String(b.props.html || ''))
             ? [{ kind: 'richLinks', label: 'Links', html: b.props.html || '', onChange: (v) => this.setProp(b.id, 'html', v) }]
             : [],
-          [B.area('Text', 'html'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 96, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '500', label: 'Medium' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
+          [B.area('Text', 'html'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', ...SIZE_SPAN.text, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '500', label: 'Medium' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
         case 'image': return decorate(base.concat([B.btn('Choose from library', () => this.openLibrary({ id: b.id, key: 'src' })), B.text('Alt text', 'alt', 'Describe the image'), B.text('Link URL', 'href', 'https://'), B.range('Width', 'width', 5, 100, 1, '%'), B.seg('Align', 'align', ALIGN), B.range('Rounded corners', 'radius', 0, 200, 1, 'px')], padF));
         case 'button': return decorate(base.concat([B.text('Label', 'label'), B.text('Link URL', 'href', 'https://'), B.color('Button color', 'bg'), B.color('Text color', 'color'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Rounded corners', 'radius', 0, 60, 1, 'px'), B.range('Outline thickness', 'borderW', 0, 6, 1, 'px')].concat(b.props.borderW ? [B.sel('Outline style', 'borderStyle', BORDER_STYLES), B.color('Outline color', 'borderColor')] : []).concat([B.range('Button height', 'py', 0, 60, 1, 'px'), B.range('Button width', 'px', 0, 120, 2, 'px'), B.seg('Align', 'align', ALIGN), B.tog('Full width', 'full')])));
         case 'divider': return decorate(base.concat([B.range('Thickness', 'thickness', 1, 20, 1, 'px'), B.sel('Line style', 'lineStyle', BORDER_STYLES), B.range('Width', 'width', 5, 100, 5, '%'), B.color('Color', 'color'), B.range('Space above & below', 'py', 0, 160, 2, 'px')]));
@@ -1344,7 +1407,7 @@ export class EditorCore {
         case 'html': return decorate(base.concat([B.area('Raw HTML', 'code')]));
         case 'countdown': return decorate(base.concat([B.text('Ends at (YYYY-MM-DDTHH:MM)', 'target'), B.text('Label', 'label'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.color('Color', 'color')]));
         case 'menu': return decorate(base.concat([B.area('Items — one per line as Label|URL', 'items'), B.seg('Align', 'align', ALIGN), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 32, 1, 'px'), B.range('Space between items', 'gap', 0, 80, 2, 'px'), B.color('Text color', 'color')]));
-        case 'heading': return decorate(base.concat([B.area('Text', 'text'), B.sel('Heading level', 'level', [{ value: 'h1', label: 'H1 — largest' }, { value: 'h2', label: 'H2' }, { value: 'h3', label: 'H3' }, { value: 'h4', label: 'H4 — smallest' }]), B.seg('Font style', 'font', [{ value: 'condensed', label: 'Condensed' }, { value: 'body', label: 'Body' }]), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 12, 120, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 2.2, 0.02, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '600', label: 'Semibold' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
+        case 'heading': return decorate(base.concat([B.area('Text', 'text'), B.sel('Heading level', 'level', [{ value: 'h1', label: 'H1 — largest' }, { value: 'h2', label: 'H2' }, { value: 'h3', label: 'H3' }, { value: 'h4', label: 'H4 — smallest' }]), B.seg('Font style', 'font', [{ value: 'condensed', label: 'Condensed' }, { value: 'body', label: 'Body' }]), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', ...SIZE_SPAN.heading, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 2.2, 0.02, ''), B.seg('Align', 'align', ALIGN), B.sel('Text weight', 'weight', [{ value: '400', label: 'Regular' }, { value: '600', label: 'Semibold' }, { value: '700', label: 'Bold' }]), B.color('Text color', 'color')], padF));
         case 'list': return decorate(base.concat([B.area('Items — one per line', 'items'), B.tog('Numbered', 'ordered'), B.sel('Font', 'fontFamily', this.fontOptions(true)), B.range('Text size', 'size', 8, 48, 1, 'px'), B.range('Line spacing', 'lh', 0.8, 3, 0.05, ''), B.range('Space between items', 'gap', 0, 60, 1, 'px'), B.color('Text color', 'color')], padF));
         case 'table': return decorate(base.concat([
           // Custom kind (render/fields.js `renderTableGrid`): a real grid of
@@ -1368,6 +1431,11 @@ export class EditorCore {
         case 'codeblock': return decorate(base.concat([B.area('Code', 'code'), B.color('Background', 'bg'), B.color('Text color', 'color'), B.range('Size', 'size', 8, 32, 0.5, 'px'), B.range('Padding', 'pad', 0, 80, 2, 'px')]));
         default: return [];
       }
+      })();
+      // Logic markers are editor furniture with no rendered body, so there is
+      // nothing for a device to show or hide.
+      if (b.type === 'condition' || b.type === 'loop') return built;
+      return decorate(built.concat(visF));
     }
     if (f.row) {
       const r = f.row;
@@ -1405,7 +1473,21 @@ export class EditorCore {
         },
         ...(r.cols.length > 1 ? [
           B.range('Space between columns', 'gap', 0, 120, 2, 'px'),
-          B.tog('Stack columns on mobile', 'stackMobile'),
+          B.head('On mobile'),
+          // Replaces the old "Stack columns on mobile" switch, which could
+          // only say all-or-nothing. Saved documents are mapped onto these
+          // values in migrateDoc, so an existing toggle keeps its meaning.
+          B.seg('Columns', 'mobileCols', [
+            { value: 1, label: 'One' },
+            { value: 2, label: 'Two' },
+            { value: 'keep', label: 'Keep' },
+          ]),
+          // Only offered where it changes something: reversing a row that
+          // keeps its desktop layout would do nothing.
+          ...(p.mobileCols !== 'keep' ? [B.seg('Order', 'mobileOrder', [
+            { value: 'normal', label: 'Normal' },
+            { value: 'reverse', label: 'Reverse' },
+          ])] : []),
         ] : []),
         // Per-column styling, only for multi-column sections (a single
         // column's background is just the section background).