@seliseblocks/mailcraft 0.2.14 → 0.2.16

package/src/core/i18n/index.js

@@ -1,83 +1,83 @@
-import { EN as ENBase } from './en.js';
-
-/**
- * Builds a translator. `overrides` is whatever a host passes as `.messages`
- * on the element -- a host's own table, an imported locale, or both merged
- * via `defineMessages` below.
- *
- * Three deliberate properties:
- * 1. English always resolves. A locale is an overlay, never a replacement,
- *    so a partial or missing translation shows English rather than a gap.
- * 2. Params interpolate `{name}`.
- * 3. A truly missing key (not in `overrides`, not in `EN`) renders as the
- *    key itself, not an empty string -- a visible `toast.deleted` in the UI
- *    is obviously wrong and names the exact key to add, where blank text
- *    just looks like a broken build.
- */
-export function createTranslator(overrides) {
-  const table = overrides || {};
-  return function t(key, params) {
-    const template = table[key] ?? ENBase[key] ?? key;
-    if (!params) return template;
-    return template.replace(/\{(\w+)\}/g, (whole, name) => (name in params ? String(params[name]) : whole));
-  };
-}
-
-/** Merges a locale over a base, for a host assembling its own table -- the documented way to combine a shipped locale with a few product-specific overrides. */
-export function defineMessages(base, overrides) {
-  return Object.assign({}, base, overrides);
-}
-
-/** Keys in `base` that `locale` does not translate. What a translator has left to do. */
-export function missingKeys(locale, base) {
-  const source = base || ENBase;
-  return Object.keys(source).filter((key) => locale[key] === undefined).sort();
-}
-
-/**
- * Every locale that ships, for a host building a language switcher.
- * Metadata only -- no message tables -- so listing the locales never pulls
- * every translation file into a consumer's bundle; a host deep-imports the
- * one it wants, e.g. `mailcraft-editor/src/core/i18n/bn.js`.
- */
-export const LOCALES = [
-  { tag: 'en', name: 'English' },
-  { tag: 'ar', name: 'Arabic', rtl: true },
-  { tag: 'bn', name: 'Bangla' },
-  { tag: 'dz', name: 'Dzongkha' },
-  { tag: 'bg', name: 'Bulgarian' },
-  { tag: 'ca', name: 'Catalan' },
-  { tag: 'cs', name: 'Czech' },
-  { tag: 'da', name: 'Danish' },
-  { tag: 'de', name: 'German' },
-  { tag: 'de-CH', name: 'Swiss German' },
-  { tag: 'el', name: 'Greek' },
-  { tag: 'es', name: 'Spanish' },
-  { tag: 'et', name: 'Estonian' },
-  { tag: 'fi', name: 'Finnish' },
-  { tag: 'fr', name: 'French' },
-  { tag: 'hr', name: 'Croatian' },
-  { tag: 'hu', name: 'Hungarian' },
-  { tag: 'it', name: 'Italian' },
-  { tag: 'lt', name: 'Lithuanian' },
-  { tag: 'lv', name: 'Latvian' },
-  { tag: 'nb', name: 'Norwegian Bokmål' },
-  { tag: 'nl', name: 'Dutch' },
-  { tag: 'pl', name: 'Polish' },
-  { tag: 'pt', name: 'Portuguese' },
-  { tag: 'ro', name: 'Romanian' },
-  { tag: 'ru', name: 'Russian' },
-  { tag: 'sk', name: 'Slovak' },
-  { tag: 'sl', name: 'Slovenian' },
-  { tag: 'sv', name: 'Swedish' },
-  { tag: 'tr', name: 'Turkish' },
-  { tag: 'uk', name: 'Ukrainian' },
-];
-
-/** `true` when the tag is written right to left. Metadata only -- `dir` is still what actually flips the layout. */
-export function isRtl(tag) {
-  const entry = LOCALES.find((l) => l.tag === tag);
-  return entry ? entry.rtl === true : false;
-}
-
-export { EN, MESSAGE_KEYS } from './en.js';
+import { EN as ENBase } from './en.js';
+
+/**
+ * Builds a translator. `overrides` is whatever a host passes as `.messages`
+ * on the element -- a host's own table, an imported locale, or both merged
+ * via `defineMessages` below.
+ *
+ * Three deliberate properties:
+ * 1. English always resolves. A locale is an overlay, never a replacement,
+ *    so a partial or missing translation shows English rather than a gap.
+ * 2. Params interpolate `{name}`.
+ * 3. A truly missing key (not in `overrides`, not in `EN`) renders as the
+ *    key itself, not an empty string -- a visible `toast.deleted` in the UI
+ *    is obviously wrong and names the exact key to add, where blank text
+ *    just looks like a broken build.
+ */
+export function createTranslator(overrides) {
+  const table = overrides || {};
+  return function t(key, params) {
+    const template = table[key] ?? ENBase[key] ?? key;
+    if (!params) return template;
+    return template.replace(/\{(\w+)\}/g, (whole, name) => (name in params ? String(params[name]) : whole));
+  };
+}
+
+/** Merges a locale over a base, for a host assembling its own table -- the documented way to combine a shipped locale with a few product-specific overrides. */
+export function defineMessages(base, overrides) {
+  return Object.assign({}, base, overrides);
+}
+
+/** Keys in `base` that `locale` does not translate. What a translator has left to do. */
+export function missingKeys(locale, base) {
+  const source = base || ENBase;
+  return Object.keys(source).filter((key) => locale[key] === undefined).sort();
+}
+
+/**
+ * Every locale that ships, for a host building a language switcher.
+ * Metadata only -- no message tables -- so listing the locales never pulls
+ * every translation file into a consumer's bundle; a host deep-imports the
+ * one it wants, e.g. `mailcraft-editor/src/core/i18n/bn.js`.
+ */
+export const LOCALES = [
+  { tag: 'en', name: 'English' },
+  { tag: 'ar', name: 'Arabic', rtl: true },
+  { tag: 'bn', name: 'Bangla' },
+  { tag: 'dz', name: 'Dzongkha' },
+  { tag: 'bg', name: 'Bulgarian' },
+  { tag: 'ca', name: 'Catalan' },
+  { tag: 'cs', name: 'Czech' },
+  { tag: 'da', name: 'Danish' },
+  { tag: 'de', name: 'German' },
+  { tag: 'de-CH', name: 'Swiss German' },
+  { tag: 'el', name: 'Greek' },
+  { tag: 'es', name: 'Spanish' },
+  { tag: 'et', name: 'Estonian' },
+  { tag: 'fi', name: 'Finnish' },
+  { tag: 'fr', name: 'French' },
+  { tag: 'hr', name: 'Croatian' },
+  { tag: 'hu', name: 'Hungarian' },
+  { tag: 'it', name: 'Italian' },
+  { tag: 'lt', name: 'Lithuanian' },
+  { tag: 'lv', name: 'Latvian' },
+  { tag: 'nb', name: 'Norwegian Bokmål' },
+  { tag: 'nl', name: 'Dutch' },
+  { tag: 'pl', name: 'Polish' },
+  { tag: 'pt', name: 'Portuguese' },
+  { tag: 'ro', name: 'Romanian' },
+  { tag: 'ru', name: 'Russian' },
+  { tag: 'sk', name: 'Slovak' },
+  { tag: 'sl', name: 'Slovenian' },
+  { tag: 'sv', name: 'Swedish' },
+  { tag: 'tr', name: 'Turkish' },
+  { tag: 'uk', name: 'Ukrainian' },
+];
+
+/** `true` when the tag is written right to left. Metadata only -- `dir` is still what actually flips the layout. */
+export function isRtl(tag) {
+  const entry = LOCALES.find((l) => l.tag === tag);
+  return entry ? entry.rtl === true : false;
+}
+
+export { EN, MESSAGE_KEYS } from './en.js';

package/src/core/i18n/it.js

@@ -181,7 +181,6 @@ export const IT = {
   'rte.highlightColor': 'Colore evidenziazione',
   'rte.removeHighlight': 'Rimuovi evidenziazione',
   'rte.clearFormatting': 'Cancella formattazione',
-  'action.downloadPng': 'Scarica PNG',
   'action.screenshot': 'Screenshot',
   'action.screenshotHint': 'Vedi l’intero modello come immagine e scaricalo',
   'toast.pngSaved': 'Screenshot scaricato',
@@ -198,6 +197,8 @@ export const IT = {
   'story.pause': 'Pausa',
   'story.replay': 'Riproduci di nuovo',
   'story.copy': 'Copia',
+  'story.download': 'Scarica {fmt}',
+  'story.format': 'Formato immagine — PNG è senza perdite, JPG e WebP sono file più piccoli',
   'story.meta': '{w}×{h} · schermata {i} di {n}',
   'footer.poweredBy': 'Con tecnologia SELISE Blocks © 2026',
 };

package/src/core/i18n/lt.js

@@ -181,7 +181,6 @@ export const LT = {
   'rte.highlightColor': 'Paryškinimo spalva',
   'rte.removeHighlight': 'Pašalinti paryškinimą',
   'rte.clearFormatting': 'Išvalyti formatavimą',
-  'action.downloadPng': 'Atsisiųsti PNG',
   'action.screenshot': 'Ekrano kopija',
   'action.screenshotHint': 'Peržiūrėti visą šabloną kaip paveikslėlį ir jį atsisiųsti',
   'toast.pngSaved': 'Ekrano kopija atsisiųsta',
@@ -198,6 +197,8 @@ export const LT = {
   'story.pause': 'Pristabdyti',
   'story.replay': 'Paleisti iš naujo',
   'story.copy': 'Kopijuoti',
+  'story.download': 'Atsisiųsti {fmt}',
+  'story.format': 'Vaizdo formatas — PNG be nuostolių, JPG ir WebP failai mažesni',
   'story.meta': '{w}×{h} · ekranas {i} iš {n}',
   'footer.poweredBy': 'Veikia su SELISE Blocks © 2026',
 };

package/src/core/i18n/lv.js

@@ -181,7 +181,6 @@ export const LV = {
   'rte.highlightColor': 'Izcēluma krāsa',
   'rte.removeHighlight': 'Noņemt izcēlumu',
   'rte.clearFormatting': 'Notīrīt formatējumu',
-  'action.downloadPng': 'Lejupielādēt PNG',
   'action.screenshot': 'Ekrānuzņēmums',
   'action.screenshotHint': 'Apskatīt visu veidni kā attēlu un lejupielādēt to',
   'toast.pngSaved': 'Ekrānuzņēmums lejupielādēts',
@@ -198,6 +197,8 @@ export const LV = {
   'story.pause': 'Pauzēt',
   'story.replay': 'Atskaņot vēlreiz',
   'story.copy': 'Kopēt',
+  'story.download': 'Lejupielādēt {fmt}',
+  'story.format': 'Attēla formāts — PNG ir bezzudumu, JPG un WebP faili ir mazāki',
   'story.meta': '{w}×{h} · ekrāns {i} no {n}',
   'footer.poweredBy': 'Darbina SELISE Blocks © 2026',
 };

package/src/core/i18n/nb.js

@@ -181,7 +181,6 @@ export const NB = {
   'rte.highlightColor': 'Uthevingsfarge',
   'rte.removeHighlight': 'Fjern utheving',
   'rte.clearFormatting': 'Fjern formatering',
-  'action.downloadPng': 'Last ned PNG',
   'action.screenshot': 'Skjermbilde',
   'action.screenshotHint': 'Se hele malen som et bilde, og last det ned',
   'toast.pngSaved': 'Skjermbilde lastet ned',
@@ -198,6 +197,8 @@ export const NB = {
   'story.pause': 'Pause',
   'story.replay': 'Spill av igjen',
   'story.copy': 'Kopier',
+  'story.download': 'Last ned {fmt}',
+  'story.format': 'Bildeformat — PNG er tapsfritt, JPG og WebP er mindre filer',
   'story.meta': '{w}×{h} · skjerm {i} av {n}',
   'footer.poweredBy': 'Drevet av SELISE Blocks © 2026',
 };

package/src/core/i18n/nl.js

@@ -181,7 +181,6 @@ export const NL = {
   'rte.highlightColor': 'Markeerkleur',
   'rte.removeHighlight': 'Markering verwijderen',
   'rte.clearFormatting': 'Opmaak wissen',
-  'action.downloadPng': 'PNG downloaden',
   'action.screenshot': 'Schermafbeelding',
   'action.screenshotHint': 'Bekijk de hele template als afbeelding en download die',
   'toast.pngSaved': 'Schermafbeelding gedownload',
@@ -198,6 +197,8 @@ export const NL = {
   'story.pause': 'Pauzeren',
   'story.replay': 'Opnieuw afspelen',
   'story.copy': 'Kopiëren',
+  'story.download': '{fmt} downloaden',
+  'story.format': 'Afbeeldingsformaat — PNG is verliesvrij, JPG en WebP zijn kleinere bestanden',
   'story.meta': '{w}×{h} · scherm {i} van {n}',
   'footer.poweredBy': 'Mogelijk gemaakt door SELISE Blocks © 2026',
 };

package/src/core/i18n/pl.js

@@ -181,7 +181,6 @@ export const PL = {
   'rte.highlightColor': 'Kolor wyróżnienia',
   'rte.removeHighlight': 'Usuń wyróżnienie',
   'rte.clearFormatting': 'Wyczyść formatowanie',
-  'action.downloadPng': 'Pobierz PNG',
   'action.screenshot': 'Zrzut ekranu',
   'action.screenshotHint': 'Zobacz cały szablon jako obraz i pobierz go',
   'toast.pngSaved': 'Zrzut ekranu pobrany',
@@ -198,6 +197,8 @@ export const PL = {
   'story.pause': 'Wstrzymaj',
   'story.replay': 'Odtwórz ponownie',
   'story.copy': 'Kopiuj',
+  'story.download': 'Pobierz {fmt}',
+  'story.format': 'Format obrazu — PNG jest bezstratny, JPG i WebP to mniejsze pliki',
   'story.meta': '{w}×{h} · ekran {i} z {n}',
   'footer.poweredBy': 'Napędzane przez SELISE Blocks © 2026',
 };

package/src/core/i18n/pt.js

@@ -181,7 +181,6 @@ export const PT = {
   'rte.highlightColor': 'Cor de destaque',
   'rte.removeHighlight': 'Remover destaque',
   'rte.clearFormatting': 'Limpar formatação',
-  'action.downloadPng': 'Transferir PNG',
   'action.screenshot': 'Captura de ecrã',
   'action.screenshotHint': 'Ver todo o modelo como imagem e transferi-lo',
   'toast.pngSaved': 'Captura transferida',
@@ -198,6 +197,8 @@ export const PT = {
   'story.pause': 'Pausa',
   'story.replay': 'Reproduzir de novo',
   'story.copy': 'Copiar',
+  'story.download': 'Transferir {fmt}',
+  'story.format': 'Formato da imagem — PNG é sem perdas, JPG e WebP são ficheiros mais pequenos',
   'story.meta': '{w}×{h} · ecrã {i} de {n}',
   'footer.poweredBy': 'Com tecnologia SELISE Blocks © 2026',
 };

package/src/core/i18n/ro.js

@@ -181,7 +181,6 @@ export const RO = {
   'rte.highlightColor': 'Culoarea evidențierii',
   'rte.removeHighlight': 'Elimină evidențierea',
   'rte.clearFormatting': 'Șterge formatarea',
-  'action.downloadPng': 'Descarcă PNG',
   'action.screenshot': 'Captură de ecran',
   'action.screenshotHint': 'Vezi tot șablonul ca imagine, apoi descarc-o',
   'toast.pngSaved': 'Captura a fost descărcată',
@@ -198,6 +197,8 @@ export const RO = {
   'story.pause': 'Pauză',
   'story.replay': 'Redă din nou',
   'story.copy': 'Copiază',
+  'story.download': 'Descarcă {fmt}',
+  'story.format': 'Formatul imaginii — PNG este fără pierderi, JPG și WebP sunt fișiere mai mici',
   'story.meta': '{w}×{h} · ecranul {i} din {n}',
   'footer.poweredBy': 'Susținut de SELISE Blocks © 2026',
 };

package/src/core/i18n/ru.js

@@ -181,7 +181,6 @@ export const RU = {
   'rte.highlightColor': 'Цвет выделения',
   'rte.removeHighlight': 'Убрать выделение',
   'rte.clearFormatting': 'Очистить форматирование',
-  'action.downloadPng': 'Скачать PNG',
   'action.screenshot': 'Снимок',
   'action.screenshotHint': 'Посмотреть весь шаблон как изображение и скачать его',
   'toast.pngSaved': 'Снимок скачан',
@@ -198,6 +197,8 @@ export const RU = {
   'story.pause': 'Пауза',
   'story.replay': 'Ещё раз',
   'story.copy': 'Копировать',
+  'story.download': 'Скачать {fmt}',
+  'story.format': 'Формат изображения — PNG без потерь, JPG и WebP — файлы меньше',
   'story.meta': '{w}×{h} · экран {i} из {n}',
   'footer.poweredBy': 'Работает на SELISE Blocks © 2026',
 };

package/src/core/i18n/sk.js

@@ -181,7 +181,6 @@ export const SK = {
   'rte.highlightColor': 'Farba zvýraznenia',
   'rte.removeHighlight': 'Odstrániť zvýraznenie',
   'rte.clearFormatting': 'Zrušiť formátovanie',
-  'action.downloadPng': 'Stiahnuť PNG',
   'action.screenshot': 'Snímka',
   'action.screenshotHint': 'Zobraziť celú šablónu ako obrázok a stiahnuť ju',
   'toast.pngSaved': 'Snímka stiahnutá',
@@ -198,6 +197,8 @@ export const SK = {
   'story.pause': 'Pozastaviť',
   'story.replay': 'Prehrať znova',
   'story.copy': 'Kopírovať',
+  'story.download': 'Stiahnuť {fmt}',
+  'story.format': 'Formát obrázka — PNG je bezstratový, JPG a WebP sú menšie súbory',
   'story.meta': '{w}×{h} · obrazovka {i} z {n}',
   'footer.poweredBy': 'Beží na SELISE Blocks © 2026',
 };

package/src/core/i18n/sl.js

@@ -181,7 +181,6 @@ export const SL = {
   'rte.highlightColor': 'Barva poudarka',
   'rte.removeHighlight': 'Odstrani poudarek',
   'rte.clearFormatting': 'Počisti oblikovanje',
-  'action.downloadPng': 'Prenesi PNG',
   'action.screenshot': 'Posnetek zaslona',
   'action.screenshotHint': 'Poglej celotno predlogo kot sliko in jo prenesi',
   'toast.pngSaved': 'Posnetek zaslona prenesen',
@@ -198,6 +197,8 @@ export const SL = {
   'story.pause': 'Premor',
   'story.replay': 'Predvajaj znova',
   'story.copy': 'Kopiraj',
+  'story.download': 'Prenesi {fmt}',
+  'story.format': 'Oblika slike — PNG je brez izgub, JPG in WebP sta manjši datoteki',
   'story.meta': '{w}×{h} · zaslon {i} od {n}',
   'footer.poweredBy': 'Poganja SELISE Blocks © 2026',
 };

package/src/core/i18n/sv.js

@@ -181,7 +181,6 @@ export const SV = {
   'rte.highlightColor': 'Överstrykningsfärg',
   'rte.removeHighlight': 'Ta bort överstrykning',
   'rte.clearFormatting': 'Rensa formatering',
-  'action.downloadPng': 'Ladda ner PNG',
   'action.screenshot': 'Skärmbild',
   'action.screenshotHint': 'Se hela mallen som en bild och ladda ner den',
   'toast.pngSaved': 'Skärmbild nedladdad',
@@ -198,6 +197,8 @@ export const SV = {
   'story.pause': 'Pausa',
   'story.replay': 'Spela upp igen',
   'story.copy': 'Kopiera',
+  'story.download': 'Ladda ner {fmt}',
+  'story.format': 'Bildformat — PNG är förlustfritt, JPG och WebP är mindre filer',
   'story.meta': '{w}×{h} · skärm {i} av {n}',
   'footer.poweredBy': 'Drivs av SELISE Blocks © 2026',
 };

package/src/core/i18n/tr.js

@@ -181,7 +181,6 @@ export const TR = {
   'rte.highlightColor': 'Vurgu rengi',
   'rte.removeHighlight': 'Vurguyu kaldır',
   'rte.clearFormatting': 'Biçimlendirmeyi temizle',
-  'action.downloadPng': 'PNG indir',
   'action.screenshot': 'Ekran görüntüsü',
   'action.screenshotHint': 'Şablonun tamamını görsel olarak görün, sonra indirin',
   'toast.pngSaved': 'Ekran görüntüsü indirildi',
@@ -198,6 +197,8 @@ export const TR = {
   'story.pause': 'Duraklat',
   'story.replay': 'Yeniden oynat',
   'story.copy': 'Kopyala',
+  'story.download': '{fmt} indir',
+  'story.format': 'Görsel biçimi — PNG kayıpsızdır, JPG ve WebP daha küçük dosyalardır',
   'story.meta': '{w}×{h} · ekran {i}/{n}',
   'footer.poweredBy': 'SELISE Blocks tarafından desteklenir © 2026',
 };

package/src/core/i18n/uk.js

@@ -181,7 +181,6 @@ export const UK = {
   'rte.highlightColor': 'Колір виділення',
   'rte.removeHighlight': 'Прибрати виділення',
   'rte.clearFormatting': 'Очистити форматування',
-  'action.downloadPng': 'Завантажити PNG',
   'action.screenshot': 'Знімок екрана',
   'action.screenshotHint': 'Переглянути весь шаблон як зображення та завантажити його',
   'toast.pngSaved': 'Знімок завантажено',
@@ -198,6 +197,8 @@ export const UK = {
   'story.pause': 'Пауза',
   'story.replay': 'Відтворити ще раз',
   'story.copy': 'Копіювати',
+  'story.download': 'Завантажити {fmt}',
+  'story.format': 'Формат зображення — PNG без втрат, JPG і WebP — менші файли',
   'story.meta': '{w}×{h} · екран {i} з {n}',
   'footer.poweredBy': 'Працює на SELISE Blocks © 2026',
 };

package/src/core/ids.js

@@ -1 +1 @@
-export const uid = () => Math.random().toString(36).slice(2, 9);
+export const uid = () => Math.random().toString(36).slice(2, 9);

package/src/core/layout-style.js

@@ -1,46 +1,46 @@
-/**
- * Pure style-computation functions shared by the live renderer and the export
- * builder, ported verbatim. Objects use camelCase keys so they can be applied
- * directly via `Object.assign(el.style, obj)`.
- */
-
-import { cssUrl } from './sanitize.js';
-export function pad(p) {
-  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
-}
-
-export function boxStyle(p) {
-  const on = (key) => p[key] !== false;
-  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
-  return {
-    background: p.bBg || 'transparent',
-    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
-    borderRadius: (p.bRadius || 0) + 'px',
-    padding: (p.bPad || 0) + 'px',
-  };
-}
-
-export function boxCss(p) {
-  const bits = [];
-  if (p.bBg) bits.push('background:' + p.bBg);
-  if (p.bBorder) {
-    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
-    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
-    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
-  }
-  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
-  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
-  return bits.length ? bits.join(';') + ';' : 'margin:0';
-}
-
-/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
+/**
+ * Pure style-computation functions shared by the live renderer and the export
+ * builder, ported verbatim. Objects use camelCase keys so they can be applied
+ * directly via `Object.assign(el.style, obj)`.
+ */
+
+import { cssUrl } from './sanitize.js';
+export function pad(p) {
+  return (p.py || 0) + 'px ' + (p.px || 0) + 'px';
+}
+
+export function boxStyle(p) {
+  const on = (key) => p[key] !== false;
+  const side = (key) => (p.bBorder && on(key) ? p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5') : '0');
+  return {
+    background: p.bBg || 'transparent',
+    borderTop: side('bTop'), borderRight: side('bRight'), borderBottom: side('bBottom'), borderLeft: side('bLeft'),
+    borderRadius: (p.bRadius || 0) + 'px',
+    padding: (p.bPad || 0) + 'px',
+  };
+}
+
+export function boxCss(p) {
+  const bits = [];
+  if (p.bBg) bits.push('background:' + p.bBg);
+  if (p.bBorder) {
+    const value = p.bBorder + 'px ' + (p.bStyle || 'solid') + ' ' + (p.bLine || '#e2e2e5');
+    const sides = { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+    if (sides.top && sides.right && sides.bottom && sides.left) bits.push('border:' + value);
+    else Object.keys(sides).filter((key) => sides[key]).forEach((key) => bits.push('border-' + key + ':' + value));
+  }
+  if (p.bRadius) bits.push('border-radius:' + p.bRadius + 'px');
+  if (p.bPad) bits.push('padding:' + p.bPad + 'px');
+  return bits.length ? bits.join(';') + ';' : 'margin:0';
+}
+
+/** A row's effective padding as a four-value CSS shorthand. `pt/pb/pl/pr` are optional per-side overrides (set by the inspector's "Per-side padding" split, or by the importer for asymmetric source padding); wherever a side is absent it follows the linked `py`/`px` pair, so documents that never split keep behaving exactly as before. */
 export function rowPad(p) {
-  const t = p.pt ?? p.py ?? 0;
-  const b = p.pb ?? p.py ?? 0;
-  const l = p.pl ?? p.px ?? 0;
-  const r = p.pr ?? p.px ?? 0;
-  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
+  const t = p.pt ?? p.py ?? 0;
+  const b = p.pb ?? p.py ?? 0;
+  const l = p.pl ?? p.px ?? 0;
+  const r = p.pr ?? p.px ?? 0;
+  return t + 'px ' + r + 'px ' + b + 'px ' + l + 'px';
 }
 
 /** A row's outside spacing in CSS clockwise order, with the old vertical `my` value as a saved-document fallback. Empty horizontal margins can remain `auto` in the live canvas so the advanced max-width control stays centered. */
@@ -52,64 +52,64 @@ export function rowMargin(p, centerEmpty) {
   const emptyHorizontal = centerEmpty && !r && !l;
   return t + 'px ' + (emptyHorizontal ? 'auto' : r + 'px') + ' ' + b + 'px ' + (emptyHorizontal ? 'auto' : l + 'px');
 }
-
-/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
-export function rowBorderSides(p) {
-  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
-}
-
-/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
-export function rowBorderCss(p) {
-  if (!p.border) return '';
-  const s = rowBorderSides(p);
-  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
-  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
-  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
-}
-
-export function rowBg(p) {
-  const ov = (p.overlay || 0) / 100;
-  const layers = [];
-  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
-  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
-  const s = rowBorderSides(p);
-  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
-  return {
-    backgroundColor: p.bg || 'transparent',
-    backgroundImage: layers.length ? layers.join(',') : 'none',
-    backgroundSize: p.bgSize || 'cover',
-    backgroundPosition: p.bgPos || 'center',
-    backgroundRepeat: p.bgRepeat || 'no-repeat',
-    borderTop: side(s.top),
-    borderRight: side(s.right),
-    borderBottom: side(s.bottom),
-    borderLeft: side(s.left),
-    borderRadius: (p.radius || 0) + 'px',
-    // A raw CSS string, not a boolean: imports keep the source's exact
-    // shadow; the inspector toggle writes/clears a standard one.
-    boxShadow: p.shadow || 'none',
-    maxWidth: (p.maxW || 100) + '%',
+
+/** Which sides a row's border draws on. Sides default ON (`!== false`) so documents saved before per-side toggles existed keep their full border. */
+export function rowBorderSides(p) {
+  return { top: p.bTop !== false, right: p.bRight !== false, bottom: p.bBottom !== false, left: p.bLeft !== false };
+}
+
+/** The row border as an inline-CSS string (export path). Empty when the width is 0 or every side is toggled off. */
+export function rowBorderCss(p) {
+  if (!p.border) return '';
+  const s = rowBorderSides(p);
+  const value = p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5');
+  if (s.top && s.right && s.bottom && s.left) return 'border:' + value + ';';
+  return ['top', 'right', 'bottom', 'left'].filter((k) => s[k]).map((k) => 'border-' + k + ':' + value + ';').join('');
+}
+
+export function rowBg(p) {
+  const ov = (p.overlay || 0) / 100;
+  const layers = [];
+  if (p.bgImage && ov) layers.push('linear-gradient(rgba(20,22,24,' + ov + '),rgba(20,22,24,' + ov + '))');
+  if (p.bgImage) layers.push('url("' + cssUrl(p.bgImage) + '")');
+  const s = rowBorderSides(p);
+  const side = (on) => (p.border && on ? p.border + 'px ' + (p.borderStyle || 'solid') + ' ' + (p.lineColor || '#e2e2e5') : '0');
+  return {
+    backgroundColor: p.bg || 'transparent',
+    backgroundImage: layers.length ? layers.join(',') : 'none',
+    backgroundSize: p.bgSize || 'cover',
+    backgroundPosition: p.bgPos || 'center',
+    backgroundRepeat: p.bgRepeat || 'no-repeat',
+    borderTop: side(s.top),
+    borderRight: side(s.right),
+    borderBottom: side(s.bottom),
+    borderLeft: side(s.left),
+    borderRadius: (p.radius || 0) + 'px',
+    // A raw CSS string, not a boolean: imports keep the source's exact
+    // shadow; the inspector toggle writes/clears a standard one.
+    boxShadow: p.shadow || 'none',
+    maxWidth: (p.maxW || 100) + '%',
     margin: rowMargin(p, true),
   };
 }
-
-export function colsWrap(p) {
-  const gap = p.gap || 0;
-  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
-  if (p.layout === 'flex') {
-    return {
-      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
-      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
-    };
-  }
-  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
-}
-
-export function colStyle(p, c) {
-  if (p.layout === 'grid') return { minWidth: 0 };
-  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
-  return {
-    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
-    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
-  };
-}
+
+export function colsWrap(p) {
+  const gap = p.gap || 0;
+  if (p.layout === 'grid') return { display: 'grid', gridTemplateColumns: 'repeat(' + (p.gridCols || 2) + ', minmax(0, 1fr))', gap: gap + 'px' };
+  if (p.layout === 'flex') {
+    return {
+      display: 'flex', flexDirection: p.flexDir || 'row', justifyContent: p.justify || 'flex-start',
+      alignItems: p.alignItems || 'stretch', flexWrap: p.wrap ? 'wrap' : 'nowrap', gap: gap + 'px',
+    };
+  }
+  return { display: 'flex', alignItems: 'stretch', margin: '0 ' + (-gap / 2) + 'px' };
+}
+
+export function colStyle(p, c) {
+  if (p.layout === 'grid') return { minWidth: 0 };
+  if (p.layout === 'flex') return { flex: (p.flexDir || 'row').indexOf('column') === 0 ? '0 0 auto' : c.span + ' 1 auto', minWidth: 0 };
+  return {
+    flex: c.span + ' 1 0%', minWidth: 0, padding: '0 ' + (p.gap || 0) / 2 + 'px',
+    alignSelf: p.valign === 'middle' ? 'center' : (p.valign === 'bottom' ? 'flex-end' : 'flex-start'),
+  };
+}