@seliseblocks/mailcraft 0.1.1 → 0.2.1

package/src/mailcraft-editor.js

@@ -8,6 +8,7 @@ import { renderField, renderFieldCards, typeCommit } from './render/fields.js';
 import { icon } from './core/icons.js';
 import { TOKEN } from './core/variables.js';
 import { hl, cssUrl } from './core/sanitize.js';
+import { decorateLogicTags } from './core/export.js';
 import { withFocusPreserved } from './render/focus-preserve.js';
 import { captureTemplatePng } from './render/screenshot.js';
 import { resolveToolbar, toolbarKey } from './core/toolbar.js';
@@ -310,7 +311,7 @@ export class MailCraftEditor extends ElementBase {
     this.core.emit();
   }
 
-  /** `dir` wins when the host sets it explicitly; otherwise it defaults from `isRtl(locale)` so `locale="ar"` gets RTL for free. Applied directly to `#mc` (not full state, since it never affects rendered content, only the CSS `dir`). */
+  /** `dir` wins when the host sets it explicitly; otherwise it defaults from `isRtl(locale)` so `locale="ar"` gets RTL for free. Applied directly to `#mc` (not full state, since it only mirrors the editor chrome). The email sheet, the code editor, and the value-shaped inspector fields pin their own `dir` so the document being built never flips with the chrome (see render/canvas.js renderDoc). */
   applyDir() {
     if (!this.mc) return;
     const explicit = this.getAttribute('dir');
@@ -417,20 +418,21 @@ export class MailCraftEditor extends ElementBase {
 
   /**
    * Host-supplied file storage -- see `core/storage.js` for the contract, and
-   * README.md for a worked example. Setting one replaces the seeded demo
-   * library with the backend's own: folders, paging,
-   * upload and delete all go through it, and nothing is written to
-   * localStorage. Set `null` to go back to the built-in behaviour.
+   * README.md for a worked example. The package ships no files of its own: with
+   * nothing set here the library opens empty and holds only what is dropped
+   * into it, in this browser, in this draft. Setting a provider hands the whole
+   * library to the backend -- folders, paging, upload and delete all go through
+   * it, and nothing is written to localStorage. Set `null` to go back.
    */
   get storageProvider() { return this.core.storageProvider; }
   set storageProvider(provider) { this.core.setStorageProvider(provider); }
 
   /**
    * What may be uploaded: `{ accept, maxBytes, maxWidth, maxHeight, maxFilesPerDrop, allowSvg }`.
-   * Required alongside a provider and deliberately undefaulted -- the ceilings
-   * that suit an email template depend on the sending platform, the audience's
-   * mail clients and the host's own rules, none of which this package can know.
-   * See `core/storage-limits.js`.
+   * Only `maxBytes` is required alongside a provider -- sizes depend on the
+   * sending platform and the host's own rules, none of which this package can
+   * know. `accept` is optional and defaults to every image type the validator
+   * can recognize; list MIME types to narrow it. See `core/storage-limits.js`.
    */
   get storageLimits() { return this.core.storageLimits; }
   set storageLimits(limits) { this.core.setStorageLimits(limits); }
@@ -521,7 +523,7 @@ export class MailCraftEditor extends ElementBase {
 
     this.footerBar = this.footerText = this.footerLink = null;
 
-    this.body = elS('div', 'display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr) auto; min-height: 0;', { class: 'mc-layout' });
+    this.body = elS('div', 'display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; background: var(--ed-work);', { class: 'mc-layout' });
     this.frame.appendChild(this.body);
     this.body.appendChild(this.buildMain());
     this.body.appendChild(this.buildAside());
@@ -742,7 +744,7 @@ export class MailCraftEditor extends ElementBase {
    * would strand whichever node the previous render had left in place.
    */
   buildFooter() {
-    this.footerBar = elS('div', 'display: flex; grid-column: 1; grid-row: 2; justify-self: center; align-items: center; justify-content: center; gap: 4px; max-width: calc(100% - 32px); padding: 6px 14px; border-top: 1px solid var(--ed-line); background: var(--ed-panel-2); color: var(--ed-panel-meta); font-family: var(--ed-font); font-size: var(--ed-panel-meta-size); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;', { class: 'mc-footer' });
+    this.footerBar = elS('div', 'display: flex; grid-column: 1; grid-row: 2; justify-self: center; align-items: center; justify-content: center; gap: 4px; max-width: calc(100% - 32px); padding: 6px 14px; background: transparent; color: var(--ed-panel-meta); font-family: var(--ed-font); font-size: var(--ed-panel-meta-size); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;', { class: 'mc-footer' });
     this.footerText = elS('span', '', { class: 'mc-footer-text' });
     this.footerLink = elS('a', 'color: inherit; text-decoration: none;', { class: 'mc-footer-link' });
     this.footerBar.appendChild(this.footerText);
@@ -919,8 +921,11 @@ export class MailCraftEditor extends ElementBase {
     if (this.redoBtn) this.redoBtn.disabled = !s.future.length;
     // A host-supplied `theme` attribute owns light/dark (see applyTheme) --
     // hide the built-in toggle rather than let it fight the host's control.
+    // setProperty(..., 'important'): a plain assignment loses to the
+    // `!important` on `.mc-icon-label` (render/style.js) that keeps every
+    // other label-icon button visible, leaving the toggle rendered anyway.
     if (this.chromeBtn) {
-      this.chromeBtn.style.display = this.hasAttribute('theme') ? 'none' : 'flex';
+      this.chromeBtn.style.setProperty('display', this.hasAttribute('theme') ? 'none' : 'flex', 'important');
       this.chromeBtn.labelNode.textContent = s.chrome === 'light' ? t('action.chromeToDark') : t('action.chromeToLight');
       this.chromeBtn.i18nTipKey = s.chrome === 'light' ? 'action.chromeHintToDark' : 'action.chromeHintToLight';
       this.chromeBtn.tipNode.textContent = t(this.chromeBtn.i18nTipKey);
@@ -1266,7 +1271,8 @@ export class MailCraftEditor extends ElementBase {
           line.addEventListener('click', () => this.core.select('block', b.id));
           const chip = elS('span', `width: 22px; height: 22px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: ${bSel ? 'var(--ed-accent)' : 'var(--ed-soft)'}; color: ${bSel ? 'var(--ed-accent-ink)' : 'var(--ed-accent)'};`);
           chip.appendChild(icon(b.type, 12));
-          line.append(chip, elS('span', 'font-family: var(--ed-font); font-size: 12px; font-weight: 500; color: var(--ed-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;', { text: text || typeName, class: 'mc-tree-title' }));
+          // dir=auto: this excerpt is the email's own copy, not chrome text.
+          line.append(chip, elS('span', 'font-family: var(--ed-font); font-size: 12px; font-weight: 500; color: var(--ed-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;', { text: text || typeName, class: 'mc-tree-title', dir: 'auto' }));
           if (text) {
             line.append(
               elS('span', 'flex: 1; min-width: 8px;'),
@@ -1305,7 +1311,7 @@ export class MailCraftEditor extends ElementBase {
     wrap.appendChild(this.sectionBar(t('vars.title'), t('vars.fromCode', { count: this.core.vars().length })));
     const card = this.sectionBody();
     card.appendChild(elS('p', 'margin: 0 0 12px; font-size: 11.5px; color: var(--ed-muted); line-height: 1.55;', { text: t('vars.declaredNote') }));
-    const search = elS('input', 'width: 100%; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); border-radius: 8px; color: var(--ed-text); font: inherit; font-size: 12.5px; padding: 7px 9px; margin-bottom: 8px;', { placeholder: t('vars.filterPlaceholder'), 'data-focus-key': 'var-query' });
+    const search = elS('input', 'width: 100%; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); border-radius: 8px; color: var(--ed-text); font: inherit; font-size: 12.5px; padding: 7px 9px; margin-bottom: 8px;', { placeholder: t('vars.filterPlaceholder'), 'data-focus-key': 'var-query', dir: 'auto' });
     search.value = s.varQuery || '';
     search.addEventListener('focus', () => { search.style.borderColor = 'var(--ed-accent)'; search.style.outline = 'none'; });
     search.addEventListener('blur', () => { search.style.borderColor = 'var(--ed-line)'; });
@@ -1326,7 +1332,8 @@ export class MailCraftEditor extends ElementBase {
       const textSpan = elS('span', 'flex: 1; min-width: 0;');
       textSpan.append(
         elS('span', 'display: block; font-family: var(--ed-font); font-weight: 600; font-size: 12.5px; line-height: 1.2;', { text: name }),
-        elS('span', 'display: block; font-family: ui-monospace, monospace; font-size: 10px; color: var(--ed-accent); margin-top: 2px;', { text: TOKEN(v) }),
+        // dir=ltr keeps the braces on the right ends of {{ token }} under RTL.
+        elS('span', 'display: block; font-family: ui-monospace, monospace; font-size: 10px; color: var(--ed-accent); margin-top: 2px;', { text: TOKEN(v), dir: 'ltr' }),
       );
       btn.append(textSpan, elS('span', 'font-family: var(--ed-font); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ed-faint);', { text: t('vars.insert') }));
       grid.appendChild(btn);
@@ -1356,7 +1363,7 @@ export class MailCraftEditor extends ElementBase {
       elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-muted);', { text: t('modal.fileManager'), 'data-i18n': 'modal.fileManager' }),
       (this.libraryTitleText = elS('div', 'font-family: var(--ed-font); font-weight: 600; font-size: 16px; line-height: 1.25;')),
     );
-    this.assetSearch = elS('input', 'width: 210px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 7px 9px;', { placeholder: t('library.searchPlaceholder'), 'data-i18n-placeholder': 'library.searchPlaceholder', 'data-focus-key': 'asset-query' });
+    this.assetSearch = elS('input', 'width: 210px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 7px 9px;', { placeholder: t('library.searchPlaceholder'), 'data-i18n-placeholder': 'library.searchPlaceholder', 'data-focus-key': 'asset-query', dir: 'auto' });
     this.assetSearch.addEventListener('focus', () => { this.assetSearch.style.borderColor = 'var(--ed-accent)'; this.assetSearch.style.outline = 'none'; });
     this.assetSearch.addEventListener('blur', () => { this.assetSearch.style.borderColor = 'var(--ed-line)'; });
     // Debounced re-render; setAssetQuery separately debounces the backend call.
@@ -1516,7 +1523,9 @@ export class MailCraftEditor extends ElementBase {
     head.append(headText, this.copyBtn, this.shotBtn, downloadBtn, closeBtn);
     modal.appendChild(head);
 
-    this.exportTextarea = elS('textarea', 'width: 100%; height: 100%; box-sizing: border-box; border: 0; background: var(--ed-work); color: var(--ed-text); font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.55; padding: 18px 20px; resize: none;', { readonly: 'true' });
+    // dir=ltr: this holds HTML source, which bidi-scrambles under the RTL
+    // chrome (same reason as buildCodeEditor).
+    this.exportTextarea = elS('textarea', 'width: 100%; height: 100%; box-sizing: border-box; border: 0; background: var(--ed-work); color: var(--ed-text); font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.55; padding: 18px 20px; resize: none;', { readonly: 'true', dir: 'ltr' });
     modal.appendChild(this.exportTextarea);
     this.exportMetaEl = elS('div', 'padding: 10px 20px; border-top: 1px solid var(--ed-line); font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.06em; color: var(--ed-faint);');
     modal.appendChild(this.exportMetaEl);
@@ -1583,8 +1592,16 @@ export class MailCraftEditor extends ElementBase {
 
     const right = elS('div', 'display: grid; grid-template-rows: auto 1fr; min-height: 0; border: 1px solid var(--ed-line); border-radius: 12px; overflow: hidden; background: var(--ed-panel);', { class: 'mc-code-preview' });
     right.appendChild(elS('div', 'padding: 7px 16px; border-bottom: 1px solid var(--ed-line); background: var(--ed-panel); font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-muted);', { text: t('code.livePreview'), 'data-i18n': 'code.livePreview', class: 'mc-pane-label' }));
-    const previewWrap = elS('div', 'overflow: auto; padding: 20px; display: flex; justify-content: center; background: var(--ed-work);', { class: 'mc-code-preview-body' });
-    this.codeFrame = elS('iframe', "width: 100%; height: 100%; min-height: 420px; border: 1px solid var(--ed-line-2); border-radius: 6px; background: #ffffff; box-shadow: 0 6px 18px rgba(15,23,42,0.10); transition: width 0.24s cubic-bezier(0.22,0.61,0.36,1);", { title: t('code.liveHtmlPreviewTitle'), 'data-i18n-title': 'code.liveHtmlPreviewTitle', class: 'mc-code-frame' });
+    // Flush, not a card on a mat: the document inside the frame paints its
+    // own page background edge to edge, so padding the wrap and framing the
+    // iframe stacked a second and third rectangle around a template that
+    // already has one -- the pane, a mat, a bordered card, then the email's
+    // own page, then its content column. `is-device` (renderCodeModal) puts
+    // the mat and the frame back for the 390px phone width, where the card
+    // *is* the point.
+    const previewWrap = elS('div', 'overflow: auto; padding: 0; display: flex; justify-content: center; background: var(--ed-work);', { class: 'mc-code-preview-body' });
+    this.codePreviewBody = previewWrap;
+    this.codeFrame = elS('iframe', "width: 100%; height: 100%; min-height: 420px; border: 0; background: #ffffff; transition: width 0.24s cubic-bezier(0.22,0.61,0.36,1);", { title: t('code.liveHtmlPreviewTitle'), 'data-i18n-title': 'code.liveHtmlPreviewTitle', class: 'mc-code-frame' });
     this.codeFrame.addEventListener('load', () => this.syncCodePreviewScrollbar());
     previewWrap.appendChild(this.codeFrame);
     right.appendChild(previewWrap);
@@ -1601,7 +1618,10 @@ export class MailCraftEditor extends ElementBase {
    * highlight or caret drifting away from the editable text. */
   buildCodeEditor() {
     const MONO = 'font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 20px; tab-size: 2;';
-    const root = elS('div', 'position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--ed-work);');
+    // dir=ltr: HTML source is directional text; under an RTL chrome the
+    // inherited direction would bidi-scramble it and, worse, let the caret
+    // in the transparent textarea drift off the highlighted layer beneath.
+    const root = elS('div', 'position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--ed-work);', { dir: 'ltr' });
     const inner = elS('div', 'position: relative; min-height: 100%; width: 100%; min-width: 0;');
     this.codePre = elS('pre', `${MONO} margin: 0; padding: 14px 0 80px; width: 100%; min-width: 0; min-height: 100%; white-space: normal; color: var(--ed-text); pointer-events: none; background: linear-gradient(to right, var(--ed-panel-2) 0 52px, var(--ed-work) 52px);`, { 'aria-hidden': 'true' });
     this.codeTextarea = elS('textarea', `${MONO} position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 14px 18px 80px 70px; border: 0; background: transparent; color: transparent; caret-color: var(--ed-accent); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; overflow: hidden; resize: none; outline: none;`, { spellcheck: 'false', wrap: 'soft', 'data-focus-key': 'code-src' });
@@ -1645,7 +1665,10 @@ export class MailCraftEditor extends ElementBase {
     if (!s.codeOpen) return;
     this.refreshCodeSource();
     if (this._codeFrameSrc !== s.codeLive) {
-      this.codeFrame.srcdoc = s.codeLive;
+      // Display-only: the preview pane draws logic tags as the canvas's
+      // dashed bands; the source pane and everything exported keep the
+      // literal {{#if}}/{{#each}} text.
+      this.codeFrame.srcdoc = decorateLogicTags(s.codeLive);
       this._codeFrameSrc = s.codeLive;
     }
     this.syncCodePreviewScrollbar();
@@ -1658,7 +1681,9 @@ export class MailCraftEditor extends ElementBase {
       tip(btn, w.label, 'down');
       this.codeWidthSeg.appendChild(btn);
     });
-    this.codeFrame.style.width = s.codeDevice === 'mobile' ? '390px' : '100%';
+    const phone = s.codeDevice === 'mobile';
+    this.codeFrame.style.width = phone ? '390px' : '100%';
+    this.codePreviewBody.classList.toggle('is-device', phone);
   }
 
   /** Repaint the syntax layer, gutter and metadata without touching the
@@ -1730,7 +1755,7 @@ export class MailCraftEditor extends ElementBase {
 
     const briefWrap = elS('div');
     briefWrap.appendChild(elS('label', 'display: block; font-size: 11.5px; color: var(--ed-muted); margin-bottom: 4px;', { text: t('ai.briefLabel'), 'data-i18n': 'ai.briefLabel' }));
-    this.aiBriefInput = elS('textarea', 'width: 100%; min-height: 78px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 9px; resize: vertical;', { placeholder: t('ai.briefPlaceholder'), 'data-i18n-placeholder': 'ai.briefPlaceholder', 'data-focus-key': 'ai-brief' });
+    this.aiBriefInput = elS('textarea', 'width: 100%; min-height: 78px; box-sizing: border-box; background: var(--ed-panel-2); border: 1px solid var(--ed-line); color: var(--ed-text); font: inherit; font-size: 13px; padding: 9px; resize: vertical;', { placeholder: t('ai.briefPlaceholder'), 'data-i18n-placeholder': 'ai.briefPlaceholder', 'data-focus-key': 'ai-brief', dir: 'auto' });
     this.aiBriefInput.addEventListener('focus', () => { this.aiBriefInput.style.borderColor = 'var(--ed-accent)'; this.aiBriefInput.style.outline = 'none'; });
     // Debounced with a blur flush: runAi reads state.aiBrief, and clicking
     // Generate blurs this field first -- the flush lands the last keystrokes
@@ -1772,7 +1797,7 @@ export class MailCraftEditor extends ElementBase {
     s.aiResults.forEach((r) => {
       const card = elS('div', 'position: relative; border: 1px solid var(--ed-line); border-radius: var(--ed-radius-sm); padding: 15px;');
       card.appendChild(elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-accent); margin-bottom: 7px;', { text: r.kind }));
-      card.appendChild(elS('div', 'font-size: 14px; line-height: 1.55; white-space: pre-wrap;', { text: r.text }));
+      card.appendChild(elS('div', 'font-size: 14px; line-height: 1.55; white-space: pre-wrap;', { text: r.text, dir: 'auto' }));
       const useBtn = elS('button', 'margin-top: 12px; border: 1px solid var(--ed-line); background: transparent; color: var(--ed-text); cursor: pointer; padding: 6px 11px; font-family: ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; transition: background 0.16s, color 0.16s, border-color 0.16s;', { type: 'button', text: r.action });
       useBtn.addEventListener('mouseenter', () => { useBtn.style.background = 'var(--ed-accent)'; useBtn.style.color = 'var(--ed-accent-ink)'; useBtn.style.borderColor = 'var(--ed-accent)'; });
       useBtn.addEventListener('mouseleave', () => { useBtn.style.background = 'transparent'; useBtn.style.color = 'var(--ed-text)'; useBtn.style.borderColor = 'var(--ed-line)'; });
@@ -1801,7 +1826,14 @@ export class MailCraftEditor extends ElementBase {
     closeBtn.addEventListener('click', () => this.core.setState({ previewOpen: false }));
     head.append(headText, this.previewDeviceSeg, closeBtn);
     overlay.appendChild(head);
-    const body = elS('div', 'overflow-y: auto; padding: 32px 24px;', { class: 'mc-preview-body' });
+    // Flush and unpainted: this body *is* the sent email's page, so the
+    // sheet sits edge to edge exactly as exportHtml() renders it -- the
+    // theme's page background is applied on each render (renderPreviewModal).
+    const body = elS('div', 'overflow-y: auto; padding: 0;', { class: 'mc-preview-body' });
+    // Kept on the instance: renderPreviewModal repaints it from the document's
+    // page background on every render, and it runs long after this builder's
+    // local has gone out of scope.
+    this.previewBody = body;
     this.previewSlot = elS('div', '', { class: 'mc-sheet-wrap' });
     this.previewSlot.style.cssText = 'display: flex; justify-content: center;';
     body.appendChild(this.previewSlot);
@@ -1826,6 +1858,13 @@ export class MailCraftEditor extends ElementBase {
       tip(btn, d.label, 'down');
       this.previewDeviceSeg.appendChild(btn);
     });
+    // The preview body doubles as the sent page: the theme's page background
+    // paints it, exactly as the exported <body style="background:..."> does.
+    // Falls back to the empty string -- and so to the stylesheet's dotted
+    // grid -- for a transparent page, which is exactly what a client with no
+    // page colour of its own shows behind the email.
+    const pageBg = s.doc.theme.bg || '';
+    this.previewBody.style.background = /^(transparent|none)$/i.test(pageBg.trim()) ? '' : pageBg;
     this.previewSlot.innerHTML = '';
     this.previewSlot.appendChild(renderDoc(this.core, false));
   }

package/src/render/block-body.js

@@ -15,6 +15,30 @@ function el(tag, style, attrs) {
 
 function m(v) { return String(v == null ? '' : v); }
 
+/**
+ * Writing assistants (Grammarly, LanguageTool and friends) treat any
+ * `contenteditable` as a field of their own: they float a button over its
+ * bottom-right corner -- squarely on top of this editor's own block toolbar --
+ * and inject their highlight/overlay DOM into it, which `syncLiveEdit`
+ * (mailcraft-editor.js) then reads back as innerHTML and stores in the
+ * template, so their markup ends up in the exported email. Every one of them
+ * honours an opt-out attribute on the field itself, so each editable surface
+ * declares all of them here rather than repeating the list six times below.
+ * The `spellcheck="false"` that already rode along stays on every copy,
+ * editable or not, and `core/export.js` strips all of it back out on the way
+ * to the recipient.
+ */
+const NO_ASSIST = {
+  'data-gramm': 'false',
+  'data-gramm_editor': 'false',
+  'data-enable-grammarly': 'false',
+  'data-lt-active': 'false',
+};
+
+function editableAttrs(on) {
+  return on ? { contenteditable: 'true', spellcheck: 'false', ...NO_ASSIST } : { spellcheck: 'false' };
+}
+
 /** An explicit block font owns every rich descendant; an empty value deliberately leaves imported inline typography untouched. */
 function overrideRichFont(root, fontFamily) {
   if (!fontFamily) return;
@@ -38,7 +62,7 @@ export function blockBody(b, theme, live, ctx) {
       const edit = live;
       const content = el('div', {
         padding: pad(p), fontSize: p.size + 'px', lineHeight: p.lh, textAlign: p.align, fontWeight: p.weight, color: p.color || t.text, outline: 'none', fontFamily: p.fontFamily || t.font,
-      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      }, { ...attr, ...editableAttrs(edit), html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       // Imported email HTML keeps inline font-family declarations so an
       // untouched block retains its source typography. Once the user chooses
       // a block font, however, those nested declarations outrank inheritance
@@ -76,7 +100,7 @@ export function blockBody(b, theme, live, ctx) {
         // email pattern; the color falls back to the label color so a bare
         // "outline thickness" bump looks right without a second step.
         border: p.borderW ? p.borderW + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.borderColor || p.color) : '0',
-      }, { href: p.href, contenteditable: live ? 'true' : undefined, spellcheck: 'false', text: p.label });
+      }, { href: p.href, ...editableAttrs(live), text: p.label });
       a.addEventListener('click', (e) => e.preventDefault());
       // Button editing is deliberately plain: no focus-tracked `editing` state, no
       // paste handling, no floating RTE toolbar -- only its label commits on blur.
@@ -147,7 +171,7 @@ export function blockBody(b, theme, live, ctx) {
       const safe = live
         ? raw.replace(/<style([^>]*)>([\s\S]*?)<\/style>/gi, (mm, at, css) => '<style' + at + '>' + ctx.scopeCss(css, '[data-mc-sheet]') + '</style>')
         : raw;
-      const content = el('div', { padding: '6px 0', fontFamily: t.font, color: t.text, outline: 'none' }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(safe), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      const content = el('div', { padding: '6px 0', fontFamily: t.font, color: t.text, outline: 'none' }, { ...attr, ...editableAttrs(edit), html: m(safe), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       if (edit) wireEditable(content, b, 'code', ctx, false);
       if (!live) return content;
       return wrapWithRte(b, ctx, edit && ctx.editingId === b.id, content);
@@ -187,7 +211,7 @@ export function blockBody(b, theme, live, ctx) {
         color: p.color || t.text, outline: 'none',
         // An explicit per-block font beats the Condensed/Body style toggle.
         fontFamily: p.fontFamily || (p.font === 'condensed' ? "'Arial Narrow', 'Helvetica Neue Condensed', Helvetica, Arial, sans-serif" : t.font),
-      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', text: m(p.text), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      }, { ...attr, ...editableAttrs(edit), text: m(p.text), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       if (edit) wireEditable(head, b, 'text', ctx, true);
       if (!live) return head;
       return wrapWithRte(b, ctx, ctx.editingId === b.id, head);
@@ -217,7 +241,7 @@ export function blockBody(b, theme, live, ctx) {
             fontWeight: isHead ? '600' : '400', outline: 'none',
             fontFamily: p.fontFamily || t.font,
             letterSpacing: isHead ? '0.06em' : 'normal', textTransform: isHead ? 'uppercase' : 'none', fontSize: isHead ? p.size + 1 + 'px' : p.size + 'px',
-          }, { contenteditable: edit ? 'true' : undefined, spellcheck: 'false', text: m(cell), 'data-focus-key': edit ? 'block:' + b.id + ':c' + ri + '-' + ci : undefined });
+          }, { ...editableAttrs(edit), text: m(cell), 'data-focus-key': edit ? 'block:' + b.id + ':c' + ri + '-' + ci : undefined });
           if (edit) {
             // stopPropagation is load-bearing (a bubbled click would select
             // via the block wrapper AND deselect via the workspace), but it
@@ -262,13 +286,32 @@ export function blockBody(b, theme, live, ctx) {
         minHeight: p.minH ? p.minH + 'px' : 'auto', maxWidth: p.maxW + '%', margin: p.align === 'center' ? '0 auto' : '0',
         boxShadow: p.shadow ? '0 10px 30px rgba(29,31,32,0.12)' : 'none',
         fontFamily: t.font, color: t.text, fontSize: '15px', lineHeight: '1.6',
-      }, { ...attr, contenteditable: edit ? 'true' : undefined, spellcheck: 'false', html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
+      }, { ...attr, ...editableAttrs(edit), html: m(p.html), 'data-focus-key': edit ? 'block:' + b.id : undefined });
       if (edit) wireEditable(box, b, 'html', ctx, false);
       if (!live) return box;
       return wrapWithRte(b, ctx, ctx.editingId === b.id, box);
     }
     case 'svg':
       return el('div', { padding: p.py + 'px 0', textAlign: p.align }, { ...attr, html: '<span style="display:inline-block;width:' + p.width + '%">' + p.code + '</span>' });
+    // Dynamic-content markers. Editor furniture, never sent: the exporter
+    // emits the template tag itself at this position (core/export.js) and
+    // never reads this DOM back. The band renders in the preview too -- the
+    // preview shows the template the way it shows merge tokens, so the logic
+    // structure stays visible there rather than silently vanishing.
+    case 'condition':
+    case 'loop': {
+      const isLoop = b.type === 'loop';
+      const color = isLoop ? '#7c3aed' : '#0e7490';
+      const word = p.end ? (isLoop ? 'end loop' : 'end if') : (isLoop ? 'repeat each' : 'show if');
+      const band = el('div', {
+        display: 'flex', alignItems: 'center', gap: '8px', boxSizing: 'border-box',
+        border: '1.5px dashed ' + color, borderRadius: '7px', background: color + '14',
+        padding: '6px 12px', margin: '2px 0', color,
+      }, attr);
+      band.appendChild(el('span', { fontFamily: 'ui-monospace,monospace', fontSize: '9.5px', fontWeight: '700', letterSpacing: '0.12em', textTransform: 'uppercase', flex: 'none' }, { text: (p.end ? '⏶ ' : '⏷ ') + word }));
+      if (!p.end) band.appendChild(el('span', { fontFamily: 'ui-monospace,monospace', fontSize: '11.5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, { text: '{{ ' + (p.expr || '…') + ' }}' }));
+      return band;
+    }
     case 'codeblock':
       return el('pre', { margin: '0', padding: p.pad + 'px', background: p.bg, color: p.color, fontFamily: 'ui-monospace, Menlo, monospace', fontSize: p.size + 'px', lineHeight: '1.6', overflowX: 'auto', whiteSpace: 'pre' }, { ...attr, text: m(p.code) });
     default:

package/src/render/canvas.js

@@ -169,21 +169,63 @@ export function renderDoc(core, live) {
   // Lives only for this render's drag gesture(s) -- no core state, no re-render.
   const rowDropTracker = { active: null };
 
+  // `dir="ltr"` pins the sheet to the document's own direction. The editor
+  // chrome mirrors under an RTL locale (`dir=rtl` on `#mc`), but the email
+  // being built is a separate document: exportHtml emits no `dir`, so mail
+  // clients render it LTR -- letting the chrome's direction cascade in here
+  // flipped bidi punctuation and default alignment on the canvas and made it
+  // disagree with the exported result.
+  const radius = Number(theme.radius) || 0;
   const root = el('div', {
-    width: width + 'px', maxWidth: '100%', background: theme.contentBg, color: theme.text, fontFamily: theme.font,
-    transition: 'width 0.28s cubic-bezier(0.22,0.61,0.36,1), background 0.2s',
-  }, { 'data-mc-sheet': '1' });
+    width: width + 'px', maxWidth: '100%', background: theme.contentBg || 'transparent', color: theme.text, fontFamily: theme.font,
+    // Only when the document actually asks for a shape: an unconditional
+    // `0px` would override the editor chrome's own soft corner on the sheet
+    // (style.js) and square off every template that never touched the field.
+    borderRadius: radius ? radius + 'px' : '',
+    // Clipping the rows to that corner is right for the sent email (export
+    // emits `overflow:hidden` alongside the radius) and for the static
+    // preview, but not for the editable canvas: the sheet is also what the
+    // row grip straddles and what the floating RTE toolbar overhangs
+    // (top:-82px on the first block), and hiding the overflow cuts both off.
+    overflow: !live && radius ? 'hidden' : '',
+    transition: 'width 0.28s cubic-bezier(0.22,0.61,0.36,1), background 0.2s, border-radius 0.2s',
+  }, { 'data-mc-sheet': '1', dir: 'ltr' });
+
+  /*
+   * The page: the full-width section the email sits on, painted from the
+   * document's own `bg`/`padY`/`padX` rather than left to the workspace
+   * chrome. It is the band a mail client shows around the content column --
+   * the one part of the template that used to exist only in the exported
+   * HTML, so changing its colour did nothing visible in the editor and its
+   * size could not be changed at all. With the padding at its 0 default the
+   * page hugs the sheet exactly and nothing about the canvas changes.
+   */
+  const padY = Number(theme.padY) || 0;
+  const padX = Number(theme.padX) || 0;
+  const page = el('div', {
+    background: theme.bg || 'transparent',
+    padding: padY + 'px ' + padX + 'px',
+    boxSizing: 'border-box', maxWidth: '100%', display: 'flex', justifyContent: 'center',
+    transition: 'background 0.2s, padding 0.22s cubic-bezier(0.22,0.61,0.36,1)',
+    // `is-padded` is what moves the editor's frame outward (style.js): with
+    // no padding the page hugs the sheet exactly, so the sheet keeps the
+    // frame and an untouched canvas looks exactly as it always did.
+  }, { 'data-mc-page': '1', class: 'mc-page' + (padY || padX ? ' is-padded' : ''), dir: 'ltr' });
 
   const rowLines = [];
   if (live) {
-    root.addEventListener('dragover', (e) => {
+    // On the page, not the sheet: a drag held over the page padding is still
+    // aimed at the template, and these fire for the sheet's own events too
+    // (they bubble). Column drops stop propagation before they get here, as
+    // they did when these listeners sat on the sheet.
+    page.addEventListener('dragover', (e) => {
       const dr = core.drag; if (!dr) return;
       e.preventDefault();
       const index = core.indexFromPoint(root, e.clientY);
       showLine(rowDropTracker, rowLines[index]);
     });
-    root.addEventListener('dragleave', (e) => { if (e.target === root) hideActive(rowDropTracker); });
-    root.addEventListener('drop', (e) => { hideActive(rowDropTracker); core.canvasDrop(e); });
+    page.addEventListener('dragleave', (e) => { if (e.target === root || e.target === page) hideActive(rowDropTracker); });
+    page.addEventListener('drop', (e) => { hideActive(rowDropTracker); core.canvasDrop(e); });
   }
 
   d.rows.forEach((r, ri) => {
@@ -229,8 +271,31 @@ export function renderDoc(core, live) {
           bWrap.addEventListener('dragstart', core.startDrag({ kind: 'move-block', id: b.id }));
           bWrap.addEventListener('dragend', () => { core.drag = null; hideActive(rowDropTracker); hideActive(colTracker); });
           bWrap.addEventListener('click', (e) => { e.stopPropagation(); core.select('block', b.id); });
+          // WebKit gives a `draggable="true"` ancestor priority over the
+          // selection machinery: a mousedown anywhere inside this wrapper is
+          // taken as the start of an element drag, so in Safari a double-click
+          // on block text never selects the word and pressing and sweeping
+          // across it never extends a selection. (Chromium and Gecko both
+          // special-case contenteditable descendants; WebKit does not.)
+          // Dropping the attribute for the length of a gesture that begins
+          // inside editable text hands those mousedowns back to the caret;
+          // restoring it on mouseup keeps drag-to-reorder working from every
+          // other part of the block -- including its padding, which is what a
+          // block is normally picked up by.
+          bWrap.addEventListener('mousedown', (e) => {
+            const target = e.target;
+            if (!target || target.nodeType !== 1 || !target.closest('[contenteditable="true"]')) return;
+            bWrap.draggable = false;
+            const view = bWrap.ownerDocument.defaultView;
+            if (view) view.addEventListener('mouseup', () => { bWrap.draggable = true; }, { once: true });
+          });
         }
-        if (bSel) bWrap.appendChild(toolbar(core, b.id, 'block', DEF(b.type).code));
+        // Not while this block is being inline-edited: the pill sits at the
+        // block's top-right, flush against the floating RTE toolbar's bottom
+        // edge -- visually colliding with it, and putting its Delete button a
+        // few pixels from the RTE's own controls. The RTE stands in for it for
+        // the duration of the edit; it comes back on blur (still selected).
+        if (bSel && ctx.editingId !== b.id) bWrap.appendChild(toolbar(core, b.id, 'block', DEF(b.type).code));
         bWrap.appendChild(blockBody(b, theme, live, ctx));
         items.push(bWrap);
       });
@@ -280,5 +345,6 @@ export function renderDoc(core, live) {
     root.appendChild(el('div', { border: '1px dashed var(--ed-accent-sheet-line)', padding: '90px 20px', textAlign: 'center', fontFamily: 'ui-monospace,monospace', fontSize: '10.5px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ed-faint)' }, { text: 'drag a row or block here' }));
   }
 
-  return root;
+  page.appendChild(root);
+  return page;
 }