@seliseblocks/mailcraft 0.2.0 → 0.2.2

package/src/mailcraft-editor.js

@@ -17,7 +17,7 @@ import { createStoryViewer } from './render/story.js';
 import { STYLE } from './render/style.js';
 import { createTranslator, isRtl } from './core/i18n/index.js';
 import { ACCENT_VARS, accentTokens, parseColor } from './core/accent.js';
-import { LOCALE_TABLES } from './core/i18n/tables.js';
+import { localeTable, loadLocale } from './core/i18n/loaders.js';
 
 /** `elS` mirrors the template's literal `style="..."` attribute strings verbatim -- copied, not re-derived, to keep the port pixel-exact. */
 function elS(tag, styleStr, attrs = {}, ...children) {
@@ -298,13 +298,26 @@ export class MailCraftEditor extends ElementBase {
 
   /**
    * Resolves the `locale` attribute to its shipped message table
-   * (core/i18n/tables.js) and overlays any host-set `.messages` on top --
+   * (core/i18n/loaders.js) and overlays any host-set `.messages` on top --
    * attribute picks the language, `.messages` stays the documented way to
    * override individual strings. With no locale attribute this degrades to
    * the old behavior: `.messages` alone over built-in English.
+   *
+   * Tables load lazily (a literal dynamic import per tag, so app bundlers
+   * code-split them instead of shipping all 31). A not-yet-loaded locale
+   * renders English for the tick the chunk takes to arrive, then this method
+   * re-runs; the load is a no-op re-render if the attribute changed again
+   * meanwhile -- the guard re-reads the live attribute, never the old tag.
    */
   refreshTranslator() {
-    const table = LOCALE_TABLES[this.getAttribute('locale')] || null;
+    const tag = this.getAttribute('locale') || '';
+    let table = tag ? localeTable(tag) : null;
+    if (table === undefined) {
+      table = null;
+      loadLocale(tag).then(() => {
+        if ((this.getAttribute('locale') || '') === tag) this.refreshTranslator();
+      });
+    }
     const overrides = this.core.messages;
     this.core.t = createTranslator(table ? Object.assign({}, table, overrides || {}) : overrides);
     this.story?.retranslate();
@@ -429,10 +442,10 @@ export class MailCraftEditor extends ElementBase {
 
   /**
    * 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); }
@@ -523,7 +536,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());
@@ -688,17 +701,19 @@ export class MailCraftEditor extends ElementBase {
     this.toastEl.textContent = s.toast || '';
   }
 
-  /** Repaint just the countdown digits on the canvas -- driven by the core's
-   * 1s tick (core.onTick), which used to re-render the whole editor. */
+  /** Repaint just the countdown digits on the canvas -- and in the preview,
+   * whose sheet is now memoized rather than rebuilt every render -- driven by
+   * the core's 1s tick (core.onTick), which used to re-render the whole editor. */
   refreshCountdowns() {
     const now = this.core.state.now;
-    this.canvasSlot.querySelectorAll('[data-mc-countdown]').forEach((wrap) => {
+    const slots = this.core.state.previewOpen && this.previewSlot ? [this.canvasSlot, this.previewSlot] : [this.canvasSlot];
+    slots.forEach((slot) => slot.querySelectorAll('[data-mc-countdown]').forEach((wrap) => {
       const ms = Math.max(0, new Date(wrap.getAttribute('data-mc-countdown')).getTime() - now);
       const vals = { days: Math.floor(ms / 86400000), hrs: Math.floor(ms / 3600000) % 24, min: Math.floor(ms / 60000) % 60, sec: Math.floor(ms / 1000) % 60 };
       wrap.querySelectorAll('[data-mc-count]').forEach((n) => {
         n.textContent = String(vals[n.getAttribute('data-mc-count')] ?? 0).padStart(2, '0');
       });
-    });
+    }));
   }
 
   /** The header's "Saved HH:MM" label -- autosave updates it through
@@ -744,7 +759,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);
@@ -921,8 +936,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);
@@ -961,7 +979,7 @@ export class MailCraftEditor extends ElementBase {
     this.renderExportModal();
     this.renderCodeModal();
     this.renderAiModal();
-    this.renderPreviewModal(false);
+    this.renderPreviewModal();
 
     this.refreshToast();
   }
@@ -1589,8 +1607,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; 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);
@@ -1670,7 +1696,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
@@ -1799,7 +1827,7 @@ export class MailCraftEditor extends ElementBase {
   buildPreviewModal() {
     const t = this.core.t;
     const overlay = elS('div', '', { class: 'mc-fullscreen-panel mc-preview-panel' });
-    overlay.style.cssText = 'position: absolute; inset: 0; z-index: 60; display: grid; grid-template-rows: 58px minmax(0, 1fr); animation: mcFade 0.16s ease; display: none;';
+    overlay.style.cssText = 'position: absolute; inset: 0; z-index: 60; background: var(--ed-work); display: grid; grid-template-rows: 58px minmax(0, 1fr); animation: mcFade 0.16s ease; display: none;';
     const head = elS('div', 'display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--ed-line); background: var(--ed-panel);', { class: 'mc-preview-toolbar' });
     const headText = elS('div', 'flex: 1; min-width: 0;');
     this.previewKickerEl = elS('div', 'font-family: var(--ed-font); font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ed-muted);', { class: 'mc-preview-kicker' });
@@ -1813,7 +1841,16 @@ 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' });
+    // This body *is* the sent email's page: the theme's page background is
+    // applied on each render (renderPreviewModal), and the stylesheet gives
+    // it container padding painted in that background -- breathing room the
+    // way a mail client's viewport provides it, with the sheet itself, and
+    // everything exportHtml() renders, untouched.
+    const body = elS('div', 'overflow-y: auto;', { 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);
@@ -1825,7 +1862,7 @@ export class MailCraftEditor extends ElementBase {
     const s = this.core.state;
     const t = this.core.t;
     this.previewModal.style.display = s.previewOpen ? 'grid' : 'none';
-    if (!s.previewOpen) return;
+    if (!s.previewOpen) { this._previewDoc = null; return; }
     this.previewKickerEl.textContent = s.device === 'mobile' ? t('preview.kickerMobile') : t('preview.kickerDesktop', { width: s.doc.theme.width });
     this.previewDeviceSeg.innerHTML = '';
     [
@@ -1838,8 +1875,27 @@ export class MailCraftEditor extends ElementBase {
       tip(btn, d.label, 'down');
       this.previewDeviceSeg.appendChild(btn);
     });
-    this.previewSlot.innerHTML = '';
-    this.previewSlot.appendChild(renderDoc(this.core, false));
+    // 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;
+    // Rebuild the sheet only when what it renders from actually changed.
+    // renderPreviewModal runs on *every* render pass, and rebuilding the
+    // whole email document each time made the open preview visibly rough:
+    // every unrelated setState re-created every node (images re-decoded and
+    // flashed, the scroll anchor jumped). The three inputs are cheap
+    // identity checks -- commit/undo/redo always replace `doc` with a fresh
+    // parse, refreshTranslator always replaces `t` -- so a stale hit is
+    // impossible.
+    if (s.doc !== this._previewDoc || s.device !== this._previewDevice || t !== this._previewT) {
+      this._previewDoc = s.doc;
+      this._previewDevice = s.device;
+      this._previewT = t;
+      this.previewSlot.replaceChildren(renderDoc(this.core, false));
+    }
   }
 }
 

package/src/render/canvas.js

@@ -175,21 +175,57 @@ export function renderDoc(core, live) {
   // 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',
+    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) => {
@@ -309,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;
 }

package/src/render/fields.js

@@ -545,6 +545,17 @@ export function renderField(f) {
     row.appendChild(fieldLabel(f.label, true));
     const pill = el('div', { display: 'flex', alignItems: 'center', flex: 'none', height: '32px', border: '1px solid var(--ed-line)', borderRadius: '8px', background: 'var(--ed-panel)', overflow: 'hidden', transition: 'border-color 0.16s, box-shadow 0.16s' }, { class: 'mc-field-control mc-color-control' });
     const swatch = el('label', { position: 'relative', width: '29px', alignSelf: 'stretch', flex: 'none', borderRight: '1px solid var(--ed-line)', background: f.swatch, cursor: 'pointer' }, { title: f.label });
+    // A transparent value has no colour to show, so the swatch shows the
+    // conventional checkerboard instead -- otherwise "no fill" and "white"
+    // are the same white square.
+    if (f.transparent) {
+      Object.assign(swatch.style, {
+        backgroundColor: '#ffffff',
+        backgroundImage: 'linear-gradient(45deg,#c3c9d2 25%,transparent 25%,transparent 75%,#c3c9d2 75%),linear-gradient(45deg,#c3c9d2 25%,transparent 25%,transparent 75%,#c3c9d2 75%)',
+        backgroundSize: '8px 8px',
+        backgroundPosition: '0 0, 4px 4px',
+      });
+    }
     const picker = el('input', { position: 'absolute', inset: '0', width: '100%', height: '100%', opacity: '0', cursor: 'pointer', padding: '0', border: '0' }, { type: 'color' });
     picker.value = f.swatch;
     // The native picker fires `input` continuously while dragging the hue
@@ -560,6 +571,12 @@ export function renderField(f) {
     hex.addEventListener('focus', () => { pill.style.borderColor = 'var(--ed-accent)'; pill.style.boxShadow = '0 0 0 3px var(--ed-soft)'; });
     hex.addEventListener('blur', () => { pill.style.borderColor = 'var(--ed-line)'; pill.style.boxShadow = 'none'; hexCommit.flush(); });
     pill.append(swatch, hex);
+    if (f.clearable) {
+      const none = el('button', { flex: 'none', alignSelf: 'stretch', width: '28px', display: 'flex', alignItems: 'center', justifyContent: 'center', border: '0', borderLeft: '1px solid var(--ed-line)', background: f.transparent ? 'var(--ed-accent)' : 'transparent', color: f.transparent ? 'var(--ed-accent-ink)' : 'var(--ed-muted)', cursor: 'pointer', padding: '0' }, { type: 'button', title: f.transparent ? 'Transparent — click for a solid colour' : 'Make transparent (no fill)', 'aria-pressed': String(!!f.transparent) });
+      none.appendChild(icon(f.transparent ? 'check' : 'clear', 12));
+      none.addEventListener('click', () => f.onToggleTransparent());
+      pill.appendChild(none);
+    }
     row.appendChild(pill);
     wrap.appendChild(row);
     return wrap;

package/src/render/screenshot.js

@@ -80,7 +80,13 @@ export const captureTemplatePng = async function (core, mountInto, scale = 2) {
   const wrapper = document.createElement('div');
   // Off-screen but attached (fixed keeps it out of any scroll container's
   // scrollHeight, so capturing never moves the user's canvas position).
-  wrapper.style.cssText = `position: fixed; left: -100000px; top: 0; width: ${theme.width + pad * 2}px; background: ${theme.bg}; padding: ${pad}px; box-sizing: border-box; display: flex; justify-content: center;`;
+  // The document's own page padding sits inside renderDoc's page element, so
+  // the wrapper has to be wide enough for it -- sized off the content width
+  // alone, `max-width:100%` would shrink the sheet below `theme.width` by
+  // exactly the padding and the capture would come out narrower than the
+  // template really is.
+  const pageW = theme.width + (Number(theme.padX) || 0) * 2;
+  wrapper.style.cssText = `position: fixed; left: -100000px; top: 0; width: ${pageW + pad * 2}px; background: ${theme.bg}; padding: ${pad}px; box-sizing: border-box; display: flex; justify-content: center;`;
   wrapper.setAttribute('aria-hidden', 'true');
   // renderDoc sizes the sheet from `state.device`, so with the mobile toggle
   // on it would return a 375px sheet floating inside this desktop-width