@seliseblocks/mailcraft 0.2.0 → 0.2.1

package/src/core/i18n/et.js

@@ -102,7 +102,6 @@ export const ET = {
   'storage.uploading': 'Laadin üles {count}…',
   'storage.errLoadFailed': 'Failikogu laadimine ebaõnnestus — {reason}',
   'storage.errNoLimits': 'Üleslaadimine on välja lülitatud: see rakendus pole määranud üleslaadimispiiranguid.',
-  'storage.errNoAccept': 'Üleslaadimine on välja lülitatud: ühtegi failivormingut pole lubatud.',
   'storage.errNoMaxBytes': 'Üleslaadimine on välja lülitatud: faili suurimat lubatud mahtu pole määratud.',
   'storage.errTooLarge': '{name} on {size} — piir on {max}.',
   'storage.errFormat': '{name} on {type}-fail, mis pole siin lubatud.',

package/src/core/i18n/fi.js

@@ -102,7 +102,6 @@ export const FI = {
   'storage.uploading': 'Ladataan {count}…',
   'storage.errLoadFailed': 'Tiedostokirjastoa ei voitu ladata — {reason}',
   'storage.errNoLimits': 'Lataukset on poistettu käytöstä: tämä sovellus ei ole asettanut latausrajoja.',
-  'storage.errNoAccept': 'Lataukset on poistettu käytöstä: yhtään tiedostomuotoa ei ole sallittu.',
   'storage.errNoMaxBytes': 'Lataukset on poistettu käytöstä: tiedoston enimmäiskokoa ei ole asetettu.',
   'storage.errTooLarge': '{name} on {size} — raja on {max}.',
   'storage.errFormat': '{name} on {type}-tiedosto, jota ei sallita tässä.',

package/src/core/i18n/fr.js

@@ -102,7 +102,6 @@ export const FR = {
   'storage.uploading': 'Envoi de {count}…',
   'storage.errLoadFailed': 'La bibliothèque de fichiers n’a pas pu être chargée — {reason}',
   'storage.errNoLimits': 'Les envois sont désactivés : cette application n’a défini aucune limite d’envoi.',
-  'storage.errNoAccept': 'Les envois sont désactivés : aucun format de fichier n’a été autorisé.',
   'storage.errNoMaxBytes': 'Les envois sont désactivés : aucune taille maximale de fichier n’a été définie.',
   'storage.errTooLarge': '{name} fait {size} — la limite est {max}.',
   'storage.errFormat': '{name} est un fichier {type}, non autorisé ici.',

package/src/core/i18n/hr.js

@@ -102,7 +102,6 @@ export const HR = {
   'storage.uploading': 'Prijenos {count}…',
   'storage.errLoadFailed': 'Knjižnicu datoteka nije moguće učitati — {reason}',
   'storage.errNoLimits': 'Prijenos je isključen: ova aplikacija nije postavila nikakva ograničenja prijenosa.',
-  'storage.errNoAccept': 'Prijenos je isključen: nije dopušten nijedan format datoteke.',
   'storage.errNoMaxBytes': 'Prijenos je isključen: nije postavljena najveća veličina datoteke.',
   'storage.errTooLarge': '{name} je {size} — ograničenje je {max}.',
   'storage.errFormat': '{name} je datoteka vrste {type}, koja ovdje nije dopuštena.',

package/src/core/i18n/hu.js

@@ -102,7 +102,6 @@ export const HU = {
   'storage.uploading': '{count} feltöltése…',
   'storage.errLoadFailed': 'A fájlkönyvtár nem tölthető be — {reason}',
   'storage.errNoLimits': 'A feltöltés ki van kapcsolva: ez az alkalmazás nem állított be feltöltési korlátokat.',
-  'storage.errNoAccept': 'A feltöltés ki van kapcsolva: nincs engedélyezett fájlformátum.',
   'storage.errNoMaxBytes': 'A feltöltés ki van kapcsolva: nincs beállítva maximális fájlméret.',
   'storage.errTooLarge': 'A(z) {name} mérete {size} — a korlát {max}.',
   'storage.errFormat': 'A(z) {name} egy {type} fájl, ami itt nem engedélyezett.',

package/src/core/i18n/it.js

@@ -102,7 +102,6 @@ export const IT = {
   'storage.uploading': 'Caricamento di {count}…',
   'storage.errLoadFailed': 'Impossibile caricare la libreria file — {reason}',
   'storage.errNoLimits': 'I caricamenti sono disattivati: questa applicazione non ha impostato limiti di caricamento.',
-  'storage.errNoAccept': 'I caricamenti sono disattivati: nessun formato di file è stato consentito.',
   'storage.errNoMaxBytes': 'I caricamenti sono disattivati: non è stata impostata una dimensione massima del file.',
   'storage.errTooLarge': '{name} è {size} — il limite è {max}.',
   'storage.errFormat': '{name} è un file {type}, non consentito qui.',

package/src/core/i18n/lt.js

@@ -102,7 +102,6 @@ export const LT = {
   'storage.uploading': 'Įkeliama {count}…',
   'storage.errLoadFailed': 'Nepavyko įkelti failų bibliotekos — {reason}',
   'storage.errNoLimits': 'Įkėlimai išjungti: ši programa nenustatė jokių įkėlimo ribų.',
-  'storage.errNoAccept': 'Įkėlimai išjungti: neleidžiamas nė vienas failo formatas.',
   'storage.errNoMaxBytes': 'Įkėlimai išjungti: nenustatytas didžiausias failo dydis.',
   'storage.errTooLarge': '{name} yra {size} — riba yra {max}.',
   'storage.errFormat': '{name} yra {type} failas, kuris čia neleidžiamas.',

package/src/core/i18n/lv.js

@@ -102,7 +102,6 @@ export const LV = {
   'storage.uploading': 'Notiek {count} augšupielāde…',
   'storage.errLoadFailed': 'Neizdevās ielādēt failu bibliotēku — {reason}',
   'storage.errNoLimits': 'Augšupielāde ir izslēgta: šī lietotne nav noteikusi augšupielādes ierobežojumus.',
-  'storage.errNoAccept': 'Augšupielāde ir izslēgta: nav atļauts neviens faila formāts.',
   'storage.errNoMaxBytes': 'Augšupielāde ir izslēgta: nav noteikts maksimālais faila izmērs.',
   'storage.errTooLarge': '{name} ir {size} — ierobežojums ir {max}.',
   'storage.errFormat': '{name} ir {type} fails, kas šeit nav atļauts.',

package/src/core/i18n/nb.js

@@ -102,7 +102,6 @@ export const NB = {
   'storage.uploading': 'Laster opp {count}…',
   'storage.errLoadFailed': 'Filbiblioteket kunne ikke lastes — {reason}',
   'storage.errNoLimits': 'Opplasting er slått av: denne appen har ikke satt noen opplastingsgrenser.',
-  'storage.errNoAccept': 'Opplasting er slått av: ingen filformater er tillatt.',
   'storage.errNoMaxBytes': 'Opplasting er slått av: ingen maksimal filstørrelse er satt.',
   'storage.errTooLarge': '{name} er {size} — grensen er {max}.',
   'storage.errFormat': '{name} er en {type}-fil, som ikke er tillatt her.',

package/src/core/i18n/nl.js

@@ -102,7 +102,6 @@ export const NL = {
   'storage.uploading': '{count} uploaden…',
   'storage.errLoadFailed': 'De bestandsbibliotheek kon niet worden geladen — {reason}',
   'storage.errNoLimits': 'Uploaden staat uit: deze app heeft geen uploadlimieten ingesteld.',
-  'storage.errNoAccept': 'Uploaden staat uit: er zijn geen bestandsformaten toegestaan.',
   'storage.errNoMaxBytes': 'Uploaden staat uit: er is geen maximale bestandsgrootte ingesteld.',
   'storage.errTooLarge': '{name} is {size} — de limiet is {max}.',
   'storage.errFormat': '{name} is een {type}-bestand, dat hier niet is toegestaan.',

package/src/core/i18n/pl.js

@@ -102,7 +102,6 @@ export const PL = {
   'storage.uploading': 'Przesyłanie {count}…',
   'storage.errLoadFailed': 'Nie udało się wczytać biblioteki plików — {reason}',
   'storage.errNoLimits': 'Przesyłanie jest wyłączone: ta aplikacja nie ustawiła żadnych limitów przesyłania.',
-  'storage.errNoAccept': 'Przesyłanie jest wyłączone: nie dopuszczono żadnego formatu pliku.',
   'storage.errNoMaxBytes': 'Przesyłanie jest wyłączone: nie ustawiono maksymalnego rozmiaru pliku.',
   'storage.errTooLarge': '{name} ma {size} — limit to {max}.',
   'storage.errFormat': '{name} to plik {type}, który nie jest tu dozwolony.',

package/src/core/i18n/pt.js

@@ -102,7 +102,6 @@ export const PT = {
   'storage.uploading': 'A carregar {count}…',
   'storage.errLoadFailed': 'Não foi possível carregar a biblioteca de ficheiros — {reason}',
   'storage.errNoLimits': 'Os carregamentos estão desativados: esta aplicação não definiu limites de carregamento.',
-  'storage.errNoAccept': 'Os carregamentos estão desativados: não foi permitido nenhum formato de ficheiro.',
   'storage.errNoMaxBytes': 'Os carregamentos estão desativados: não foi definido um tamanho máximo de ficheiro.',
   'storage.errTooLarge': '{name} tem {size} — o limite é {max}.',
   'storage.errFormat': '{name} é um ficheiro {type}, que não é permitido aqui.',

package/src/core/i18n/ro.js

@@ -102,7 +102,6 @@ export const RO = {
   'storage.uploading': 'Se încarcă {count}…',
   'storage.errLoadFailed': 'Biblioteca de fișiere nu a putut fi încărcată — {reason}',
   'storage.errNoLimits': 'Încărcările sunt oprite: această aplicație nu a stabilit nicio limită de încărcare.',
-  'storage.errNoAccept': 'Încărcările sunt oprite: nu a fost permis niciun format de fișier.',
   'storage.errNoMaxBytes': 'Încărcările sunt oprite: nu a fost stabilită o dimensiune maximă a fișierului.',
   'storage.errTooLarge': '{name} are {size} — limita este {max}.',
   'storage.errFormat': '{name} este un fișier {type}, care nu este permis aici.',

package/src/core/i18n/ru.js

@@ -102,7 +102,6 @@ export const RU = {
   'storage.uploading': 'Загрузка {count}…',
   'storage.errLoadFailed': 'Не удалось загрузить библиотеку файлов — {reason}',
   'storage.errNoLimits': 'Загрузка выключена: это приложение не задало ограничения на загрузку.',
-  'storage.errNoAccept': 'Загрузка выключена: ни один формат файлов не разрешён.',
   'storage.errNoMaxBytes': 'Загрузка выключена: не задан максимальный размер файла.',
   'storage.errTooLarge': '{name} весит {size} — предел {max}.',
   'storage.errFormat': '{name} — файл {type}, который здесь не разрешён.',

package/src/core/i18n/sk.js

@@ -102,7 +102,6 @@ export const SK = {
   'storage.uploading': 'Nahrávanie {count}…',
   'storage.errLoadFailed': 'Knižnicu súborov sa nepodarilo načítať — {reason}',
   'storage.errNoLimits': 'Nahrávanie je vypnuté: táto aplikácia nenastavila žiadne limity nahrávania.',
-  'storage.errNoAccept': 'Nahrávanie je vypnuté: nebol povolený žiadny formát súboru.',
   'storage.errNoMaxBytes': 'Nahrávanie je vypnuté: nie je nastavená maximálna veľkosť súboru.',
   'storage.errTooLarge': '{name} má {size} — limit je {max}.',
   'storage.errFormat': '{name} je súbor typu {type}, ktorý tu nie je povolený.',

package/src/core/i18n/sl.js

@@ -102,7 +102,6 @@ export const SL = {
   'storage.uploading': 'Nalaganje {count}…',
   'storage.errLoadFailed': 'Knjižnice datotek ni bilo mogoče naložiti — {reason}',
   'storage.errNoLimits': 'Nalaganje je izklopljeno: ta aplikacija ni določila omejitev nalaganja.',
-  'storage.errNoAccept': 'Nalaganje je izklopljeno: dovoljena ni nobena vrsta datoteke.',
   'storage.errNoMaxBytes': 'Nalaganje je izklopljeno: največja velikost datoteke ni določena.',
   'storage.errTooLarge': '{name} je {size} — omejitev je {max}.',
   'storage.errFormat': '{name} je datoteka vrste {type}, ki tu ni dovoljena.',

package/src/core/i18n/sv.js

@@ -102,7 +102,6 @@ export const SV = {
   'storage.uploading': 'Laddar upp {count}…',
   'storage.errLoadFailed': 'Filbiblioteket kunde inte laddas — {reason}',
   'storage.errNoLimits': 'Uppladdning är avstängd: den här appen har inte satt några uppladdningsgränser.',
-  'storage.errNoAccept': 'Uppladdning är avstängd: inga filformat har tillåtits.',
   'storage.errNoMaxBytes': 'Uppladdning är avstängd: ingen maximal filstorlek har angetts.',
   'storage.errTooLarge': '{name} är {size} — gränsen är {max}.',
   'storage.errFormat': '{name} är en {type}-fil, som inte tillåts här.',

package/src/core/i18n/tr.js

@@ -102,7 +102,6 @@ export const TR = {
   'storage.uploading': '{count} yükleniyor…',
   'storage.errLoadFailed': 'Dosya kitaplığı yüklenemedi — {reason}',
   'storage.errNoLimits': 'Yüklemeler kapalı: bu uygulama hiçbir yükleme sınırı belirlemedi.',
-  'storage.errNoAccept': 'Yüklemeler kapalı: hiçbir dosya biçimine izin verilmedi.',
   'storage.errNoMaxBytes': 'Yüklemeler kapalı: en büyük dosya boyutu belirlenmedi.',
   'storage.errTooLarge': '{name} {size} — sınır {max}.',
   'storage.errFormat': '{name} bir {type} dosyası ve burada izin verilmiyor.',

package/src/core/i18n/uk.js

@@ -102,7 +102,6 @@ export const UK = {
   'storage.uploading': 'Завантаження {count}…',
   'storage.errLoadFailed': 'Не вдалося завантажити бібліотеку файлів — {reason}',
   'storage.errNoLimits': 'Завантаження вимкнено: цей застосунок не задав обмежень на завантаження.',
-  'storage.errNoAccept': 'Завантаження вимкнено: не дозволено жодного формату файлів.',
   'storage.errNoMaxBytes': 'Завантаження вимкнено: не задано максимальний розмір файлу.',
   'storage.errTooLarge': '{name} важить {size} — обмеження {max}.',
   'storage.errFormat': '{name} — файл {type}, який тут не дозволено.',

package/src/core/import-html.js

@@ -955,6 +955,28 @@ function themeFromParsedDoc(doc) {
   });
   const bestWidth = Object.keys(widthCounts).sort((a, b) => widthCounts[b] - widthCounts[a])[0];
   if (bestWidth) theme.width = Number(bestWidth);
+  // Page padding and content shape, read off the same content table the
+  // width vote just picked: the padding on the cell that centers it is the
+  // band the template sits in, and the table's own radius is the content
+  // column's corner. Without this an import flattened both, and the next
+  // export silently squared the template off and closed the gap around it.
+  if (bestWidth) {
+    const content = Array.from(body.querySelectorAll('table')).find((tb) => {
+      const w = tb.getAttribute('width') || (tb.style && tb.style.width) || '';
+      return w && !String(w).endsWith('%') && PX(w) === Number(bestWidth);
+    });
+    if (content) {
+      const r = PX(content.style && content.style.borderRadius);
+      if (r > 0) theme.radius = r;
+      const cell = content.closest ? content.closest('td') : null;
+      if (cell && cell.style) {
+        const padY = PX(cell.style.paddingTop);
+        const padX = PX(cell.style.paddingLeft);
+        if (padY > 0) theme.padY = padY;
+        if (padX > 0) theme.padX = padX;
+      }
+    }
+  }
   // Prefer the first *real* stack (has a comma or quotes) over a lone generic
   // keyword: builders wrap everything in a `font-family:sans-serif` shim div
   // with the actual `'DM Sans', Arial, ...` declared a level deeper.

package/src/core/storage-limits.js

@@ -1,12 +1,13 @@
 /**
  * Upload validation -- mechanism only, no policy.
  *
- * Deliberately ships no default ceilings. What an email template may carry
- * depends on the sending platform (ESP attachment caps), the audience's
- * clients (Outlook's Word engine won't render WebP; nothing renders AVIF) and
- * the host's own product rules, so the numbers are the host's to set:
- * `editor.storageLimits`, or `limits` on the provider. With a provider wired
- * and no limits declared, uploads are refused rather than waved through.
+ * Sizes and counts stay undefaulted: what an email template may carry depends
+ * on the sending platform (ESP attachment caps) and the host's own product
+ * rules, so those numbers are the host's to set -- `editor.storageLimits`, or
+ * `limits` on the provider. Formats are the one axis with a default: every
+ * image type the sniffer can name is allowed unless the host narrows `accept`.
+ * With a provider wired and no `maxBytes` declared, uploads are refused rather
+ * than waved through.
  *
  * Checks run *before* the provider is called, so a rejected file never reaches
  * the backend. That matters for any store where minting an upload URL also
@@ -96,10 +97,9 @@ export function sanitizeName(name) {
   return clean.slice(0, 120 - ext.length) + ext;
 }
 
-/** The host has to have said what's allowed. Format and size are the two that matter; the rest are optional tightenings. */
+/** The host has to have said how big a file may be; the format list is optional and defaults to all of these. */
 export function limitsProblem(limits) {
   if (!limits) return 'storage.errNoLimits';
-  if (!Array.isArray(limits.accept) || !limits.accept.length) return 'storage.errNoAccept';
   if (!(Number(limits.maxBytes) > 0)) return 'storage.errNoMaxBytes';
   return null;
 }
@@ -121,7 +121,12 @@ export async function validateFiles(list, limits) {
   const problem = limitsProblem(limits);
   if (problem) return { accepted, rejected: files.map((f) => ({ name: f.name, key: problem, params: {} })) };
 
-  const accept = limits.accept.map((m) => String(m).toLowerCase());
+  // An omitted or empty `accept` means every image type the sniffer can name,
+  // not "nothing" -- a host that wants a narrower list has to say so, but the
+  // starting point is that an image is uploadable.
+  const accept = Array.isArray(limits.accept) && limits.accept.length
+    ? limits.accept.map((m) => String(m).toLowerCase())
+    : null;
   const max = Number(limits.maxBytes);
   const maxW = Number(limits.maxWidth) || 0;
   const maxH = Number(limits.maxHeight) || 0;
@@ -146,7 +151,7 @@ export async function validateFiles(list, limits) {
       rejected.push({ name, key: 'storage.errUnreadable', params: { name } });
       continue;
     }
-    if (!accept.includes(type)) {
+    if (accept && !accept.includes(type)) {
       rejected.push({ name, key: 'storage.errFormat', params: { name, type: type.replace(/^image\//, '').toUpperCase() } });
       continue;
     }
@@ -181,4 +186,4 @@ export async function validateFiles(list, limits) {
 export function acceptAttribute(limits) {
   if (!limits || !Array.isArray(limits.accept) || !limits.accept.length) return 'image/*';
   return limits.accept.join(',');
-}
+}

package/src/core/storage.js

@@ -35,7 +35,7 @@
  *   Provider-declared ceilings. `editor.storageLimits` wins over these.
  *
  * @typedef {Object} StorageLimits
- * @property {string[]} accept   Allowed MIME types, e.g. `['image/jpeg','image/png','image/gif']`. Required.
+ * @property {string[]} [accept]   Allowed MIME types. Omitted or empty means every image type the validator recognizes.
  * @property {number} maxBytes   Per-file byte ceiling. Required.
  * @property {number} [maxWidth]
  * @property {number} [maxHeight]

package/src/core/theme.js

@@ -1 +1,15 @@
-export const THEME = () => ({ bg: '#eef2f7', contentBg: '#ffffff', width: 620, font: '"Helvetica Neue", Helvetica, Arial, sans-serif', text: '#172033', link: '#0065b3' });
+/**
+ * The document's page-level model. `bg` paints the full-width area the email
+ * sits on (what a mail client shows around the content column), `contentBg`
+ * paints the content column itself, and `padY`/`padX`/`radius` shape the gap
+ * between the two -- the band that is otherwise an unstyleable strip around
+ * every template.
+ *
+ * They default to 0 rather than to the 24px/12px band the exporter used to
+ * hard-code: that band was in every sent template with no way to reach it,
+ * which is the strip around the content column that looked like a rendering
+ * fault. Now it is off unless a document asks for it. Both background keys
+ * accept the literal `transparent` (and any rgba()/#rrggbbaa value) as well
+ * as a hex colour.
+ */
+export const THEME = () => ({ bg: '#eef2f7', contentBg: '#ffffff', width: 620, padY: 0, padX: 0, radius: 0, font: '"Helvetica Neue", Helvetica, Arial, sans-serif', text: '#172033', link: '#0065b3' });

package/src/mailcraft-editor.js

@@ -429,10 +429,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 +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());
@@ -744,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);
@@ -921,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);
@@ -1589,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);
@@ -1670,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
@@ -1813,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);
@@ -1838,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/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