@seliseblocks/mailcraft 0.2.7 → 0.2.9

package/src/core/export.js

@@ -48,6 +48,57 @@ function logicPlan(doc) {
   return { emit, tail };
 }
 
+/**
+ * The two Word-engine declarations that have to be applied to the finished
+ * markup rather than to the DOM the renderer builds.
+ *
+ * `mso-*` are not real CSS properties, and CSSOM silently drops anything it
+ * does not recognise -- `style.msoLineHeightRule = 'exactly'` and
+ * `setProperty('mso-line-height-rule', ...)` both no-op, and the canvas is
+ * built through `Object.assign(node.style, ...)`. Since the exporter reads
+ * that DOM back as `outerHTML`, a string pass over the result is the only
+ * place these can be added. They are also meaningless anywhere but Outlook,
+ * so the canvas is better off without them.
+ *
+ * - `mso-line-height-rule:exactly` -- Classic Outlook otherwise ignores
+ *   `line-height` outright and sets text solid. Added only where a real
+ *   line-height is already declared, so it never invents spacing of its own.
+ * - `mso-table-lspace/rspace:0pt` -- Word adds its own horizontal space
+ *   around a table, which shows up as phantom gaps between columns.
+ *
+ * Both are idempotent: a second pass finds its own marker and skips.
+ */
+export function msoHarden(html) {
+  return html
+    .replace(/style="([^"]*line-height:[^"]*)"/g, (m0, css) => {
+      if (/mso-line-height-rule/.test(css)) return m0;
+      // A ratio resolved against the font size in the same declaration.
+      // `exactly` tells Word to use the line-height verbatim, and a unitless
+      // 1.65 is not a length -- the pair is ambiguous at best and collapses
+      // the leading at worst. Every block that sets a line-height sets its
+      // font-size beside it, so the multiplication is exact rather than a
+      // guess; anything the renderer did not author (imported markup with a
+      // bare ratio, or a keyword like `normal`) is left exactly as it is and
+      // gets no `exactly` either, since there would be no length to honour.
+      const fs = css.match(/font-size:\s*([\d.]+)px/);
+      const out = fs
+        ? css.replace(/line-height:\s*([\d.]+)\s*(;|$)/g, (s0, ratio, end) => 'line-height:' + Math.round(parseFloat(fs[1]) * parseFloat(ratio)) + 'px' + end)
+        : css;
+      if (!/line-height:\s*[\d.]+px/.test(out)) return 'style="' + out + '"';
+      return 'style="' + out + (out.trim().endsWith(';') ? '' : ';') + 'mso-line-height-rule:exactly;"';
+    })
+    .replace(/<table\b([^>]*)>/g, (m0, attrs) => {
+      if (/mso-table-lspace/.test(attrs)) return m0;
+      const spacing = 'mso-table-lspace:0pt;mso-table-rspace:0pt;';
+      // Appended, never prepended: the declarations the template actually
+      // authored stay at the front of the attribute, where both the importer
+      // and a human reading the source expect to find them.
+      return /style="/.test(attrs)
+        ? '<table' + attrs.replace(/style="([^"]*)"/, (s0, css) => 'style="' + css + (!css.trim() || css.trim().endsWith(';') ? '' : ';') + spacing + '"') + '>'
+        : '<table' + attrs + ' style="' + spacing + '">';
+    });
+}
+
 /**
  * Display-only dressing for the Code modal's live-preview iframe: the
  * exported template carries literal {{#if}}/{{#each}} tags, which an iframe
@@ -102,8 +153,50 @@ export function buildHtml(state, root, boxCss) {
       .replace(/\sdata-(?:gramm|gramm_editor|enable-grammarly|lt-active)="[^"]*"/g, '')
       .replace(/\sdraggable="[^"]*"/g, '');
   };
+  /*
+   * Which mobile rules this document actually needs. Only the ones a row (or
+   * a block) asks for are emitted, and rows that ask for the same thing share
+   * one class -- so a template that never leaves the defaults ships exactly
+   * the stylesheet it shipped before this feature existed, and one that uses
+   * every mode still ships a handful of rules rather than BEE's one selector
+   * per block with no deduplication.
+   */
+  const need = { stack: false, twoUp: false, reverse: false, hideM: false, hideD: false };
+  /**
+   * One decision per row, made once: what goes on the row box (`<tr>`, or the
+   * flex/grid wrapper) and what goes on each cell.
+   *
+   * The plain one-up stack keeps the exact markup and rule it had before this
+   * feature -- `mc-col` on the cells, no flex anywhere -- so the overwhelmingly
+   * common case cannot regress, and if a sanitiser ever strips `display:flex`
+   * the fancy modes degrade to the desktop layout rather than taking ordinary
+   * stacking down with them.
+   */
+  const mobilePlan = (rp, cols) => {
+    const mode = rp.mobileCols === undefined ? 1 : rp.mobileCols;
+    if (cols < 2 || mode === 'keep') return { row: '', cell: '' };
+    const rowCls = [];
+    // Two-up and reverse both need the row to become a flex container, which
+    // is safe precisely because it only ever runs inside the media query: a
+    // client that cannot do flex is a client that ignored the query and is
+    // still being shown the desktop table.
+    if (String(mode) === '2') { rowCls.push('mc-2up'); need.twoUp = true; }
+    if (rp.mobileOrder === 'reverse') { rowCls.push('mc-rev'); need.reverse = true; }
+    // Cells only carry `mc-col` in one-up; in two-up the row's own rule sizes
+    // them, so the two never fight over width.
+    const cell = String(mode) === '2' ? '' : 'mc-col';
+    if (cell) need.stack = true;
+    return { row: rowCls.join(' '), cell };
+  };
+  /** Per-block device visibility. Absent means "all devices", so nothing is emitted. */
+  const visClass = (bp) => {
+    if (bp.vis === 'desktop') { need.hideM = true; return ' class="mc-only-d"'; }
+    if (bp.vis === 'mobile') { need.hideD = true; return ' class="mc-only-m"'; }
+    return '';
+  };
   const rows = d.rows.map((r) => {
     const rp = r.props;
+    const plan = mobilePlan(rp, r.cols.length);
     // A row holding nothing but logic markers exists to wrap the *sections*
     // around it (drop a Condition onto the canvas above and below a group of
     // rows). Emitting its <tr> scaffolding would leave an empty padded band
@@ -119,7 +212,7 @@ export function buildHtml(state, root, boxCss) {
       if (b.type === 'html') return b.props.code || '';
       if (b.type === 'svg') return '<div style="text-align:' + b.props.align + ';padding:' + b.props.py + 'px 0">' + (b.props.code || '') + '</div>';
       if (b.type === 'condition' || b.type === 'loop') return logic.emit.get(b.id) || '';
-      return '<div style="' + boxCss(b.props) + '">' + grab(b.id) + '</div>';
+      return '<div' + visClass(b.props) + ' style="' + boxCss(b.props) + '">' + grab(b.id) + '</div>';
     }).filter(Boolean).join('\n            ') || '&nbsp;';
     const cells = r.cols.map((c) => {
       // Column-level styling (bg/radius/inner padding) renders as a wrapper
@@ -128,14 +221,21 @@ export function buildHtml(state, root, boxCss) {
       const inner = (c.bg || c.border || c.radius || c.padY || c.padX)
         ? '<div style="background:' + (c.bg || 'transparent') + ';' + (c.border ? 'border:' + c.border + 'px ' + (c.borderStyle || 'solid') + ' ' + (c.lineColor || '#e2e2e5') + ';' : '') + 'border-radius:' + (c.radius || 0) + 'px;padding:' + (c.padY || 0) + 'px ' + (c.padX || 0) + 'px">\n            ' + colInner(c) + '\n            </div>'
         : colInner(c);
-      return '<td width="' + c.span + '%" valign="' + rp.valign + '" style="padding:0 ' + Math.round(rp.gap / 2) + 'px;">\n            ' + inner + '\n          </td>';
+      return '<td' + (plan.cell ? ' class="' + plan.cell + '"' : '') + ' width="' + c.span + '%" valign="' + rp.valign + '" style="padding:0 ' + Math.round(rp.gap / 2) + 'px;">\n            ' + inner + '\n          </td>';
     }).join('\n          ');
+    // The CSS-layout rows reach the same behaviour through their wrapper: one
+    // class on the flex/grid container, so the markup stays exactly as it was
+    // for every wide client.
+    const wrapCls = [plan.cell ? 'mc-stack' : '', plan.row].filter(Boolean).join(' ');
+    const stackWrap = wrapCls ? ' class="' + wrapCls + '"' : '';
     const cssBody = rp.layout === 'grid'
-      ? '<div style="display:grid;grid-template-columns:repeat(' + (rp.gridCols || 2) + ',minmax(0,1fr));gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div>' + colInner(c) + '</div>').join('\n            ') + '\n          </div>'
-      : '<div style="display:flex;flex-direction:' + (rp.flexDir || 'row') + ';justify-content:' + (rp.justify || 'flex-start') + ';align-items:' + (rp.alignItems || 'stretch') + ';flex-wrap:' + (rp.wrap ? 'wrap' : 'nowrap') + ';gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div style="flex:' + c.span + ' 1 auto;min-width:0">' + colInner(c) + '</div>').join('\n            ') + '\n          </div>';
+      ? '<div' + stackWrap + ' style="display:grid;grid-template-columns:repeat(' + (rp.gridCols || 2) + ',minmax(0,1fr));gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div>' + colInner(c) + '</div>').join('\n            ') + '\n          </div>'
+      : '<div' + stackWrap + ' style="display:flex;flex-direction:' + (rp.flexDir || 'row') + ';justify-content:' + (rp.justify || 'flex-start') + ';align-items:' + (rp.alignItems || 'stretch') + ';flex-wrap:' + (rp.wrap ? 'wrap' : 'nowrap') + ';gap:' + rp.gap + 'px">\n            ' + r.cols.map((c) => '<div style="flex:' + c.span + ' 1 auto;min-width:0">' + colInner(c) + '</div>').join('\n            ') + '\n          </div>';
     const body = rp.layout && rp.layout !== 'columns'
       ? cssBody
-      : '<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>\n          ' + cells + '\n          </tr></table>';
+      // The `<tr>` is what becomes the flex container for two-up and reverse;
+      // in the default one-up stack it carries no class at all, exactly as before.
+      : '<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr' + (plan.row ? ' class="' + plan.row + '"' : '') + '>\n          ' + cells + '\n          </tr></table>';
     const tdBg = rp.bgImage
       ? 'background-color:' + (rp.bg || t.contentBg || 'transparent') + ';background-image:' + (rp.overlay ? 'linear-gradient(rgba(20,22,24,' + (rp.overlay / 100) + '),rgba(20,22,24,' + (rp.overlay / 100) + ')),' : '') + 'url(&quot;' + cssUrl(rp.bgImage) + '&quot;);background-size:' + (rp.bgSize || 'cover') + ';background-position:' + (rp.bgPos || 'center') + ';background-repeat:' + (rp.bgRepeat || 'no-repeat') + ';'
       // Falls all the way through to `transparent`: a row inherits the
@@ -165,5 +265,94 @@ export function buildHtml(state, root, boxCss) {
     // Patchy in mail clients (Outlook drops it), but honest: what the user
     // styled ships, and capable clients render it.
     + (t.shadow ? 'box-shadow:' + t.shadow + ';' : '');
-  return '<!doctype html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light dark">\n<title>' + 'Email' + '</title>\n</head>\n<body style="margin:0;padding:0;background:' + pageBg + ';font-family:' + t.font.replace(/"/g, "'") + ';color:' + t.text + ';-webkit-font-smoothing:antialiased;">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + pageBg + ';">\n  <tr><td align="center" style="padding:' + pagePad + ';">\n    <table role="presentation" width="' + t.width + '" cellpadding="0" cellspacing="0" border="0" style="width:' + t.width + 'px;max-width:100%;background:' + (t.contentBg || 'transparent') + ';' + contentShape + '">\n' + rows + '\n    </table>\n  </td></tr>\n</table>\n</body>\n</html>';
+  /*
+   * The content column is `width:100%` capped by `max-width`, never a fixed
+   * `width:<n>px`.
+   *
+   * The fixed width was what made the sent email unresponsive, and not only
+   * for itself: a px width becomes the table's min-content contribution, so
+   * it propagated outward and pinned the full-width wrapper open too. A plain
+   * text-only template measured 620px of horizontal scroll on a 390px phone,
+   * and `max-width:100%` -- already sitting right there -- never got the
+   * chance to engage, because 100% of a container the table had itself forced
+   * to 620px is 620px. Swapping the two makes the cap the real constraint:
+   * measured 500px (fits) on the phone, unchanged 620px on the desktop.
+   *
+   * The `<!--[if mso]>` pair is the price of that. Word-based Outlook honours
+   * neither `max-width` nor the media query below, so on its own it would now
+   * render the column edge to edge across the whole window; the ghost table
+   * is a fixed-width cage only Outlook sees, which holds the old geometry for
+   * exactly the client that cannot do better. Every other client skips the
+   * conditional comment entirely and gets the fluid table.
+   */
+  const ghostOpen = '<!--[if mso]><table role="presentation" width="' + t.width + '" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->';
+  const ghostClose = '<!--[if mso]></td></tr></table><![endif]-->';
+  const shell = '<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:' + t.width + 'px;background:' + (t.contentBg || 'transparent') + ';' + contentShape + '">\n' + rows + '\n    </table>';
+  /*
+   * The one embedded stylesheet in the document, and the only place the
+   * exporter is not inline-styled -- a media query cannot be expressed
+   * inline, and every rule here is a narrow-screen override of an inline
+   * style, hence `!important` throughout.
+   *
+   * `mc-col` / `mc-stack` are what finally make "Stack columns on mobile" do
+   * something: the toggle has shipped in the row inspector since columns
+   * existed, but nothing read the prop -- no media query was emitted and the
+   * canvas ignored it -- so a 4-column row stayed 4 columns of 60px on a
+   * phone. The image rule is the other half of being responsive: a fixed-width
+   * image from an import would otherwise hold a stacked column open.
+   */
+  const stackCss = '\n<style>\n'
+    + '/* Apple Mail and iOS auto-detect dates, addresses and phone numbers and\n'
+    + '   repaint them as blue underlined links. This hands them back to the\n'
+    + '   surrounding text; links the template actually declares are untouched,\n'
+    + '   because they carry their own inline colour. */\n'
+    + 'a[x-apple-data-detectors] { color:inherit !important; text-decoration:none !important; }\n'
+    /*
+     * No `p { line-height: inherit }` here, though it is standard in
+     * hand-written email and BEE emits it. This document is also an *input*:
+     * core/css-cascade.js folds every non-`@media` rule into inline styles on
+     * import, so that one rule came back stamped on every paragraph and an
+     * export -> import -> export cycle stopped converging. The pixel
+     * line-heights it would have protected are already inline on the block
+     * that owns them, which is the stronger guarantee anyway.
+     */
+    // A mobile-only block has to be hidden here, outside the query, because
+    // Classic Outlook never reads the query -- `display:none` alone would
+    // leave it visible in exactly the client that cannot be told otherwise.
+    // `mso-hide` is the half Word understands; the rest is for everyone else.
+    + (need.hideD ? '.mc-only-m, .mc-only-m table { mso-hide:all; display:none; max-height:0; overflow:hidden; }\n' : '')
+    + '@media only screen and (max-width:' + t.width + 'px) {\n'
+    + (need.stack ? '  .mc-col { display:block !important; width:100% !important; padding-left:0 !important; padding-right:0 !important; }\n'
+      + '  .mc-stack { display:block !important; }\n'
+      + '  .mc-stack > div { width:100% !important; }\n' : '')
+    // Two-up: the row becomes a flex container and each cell takes half.
+    // `box-sizing` is load-bearing -- with the default content box, a cell's
+    // own padding pushes 50% over the line and every cell wraps to its own row.
+    + (need.twoUp ? '  .mc-2up { display:flex !important; flex-wrap:wrap !important; }\n'
+      + '  .mc-2up > td, .mc-2up > div { box-sizing:border-box !important; flex:0 0 50% !important; max-width:50% !important; }\n' : '')
+    // Reverse: `column-reverse` flips a stack of any depth, where the usual
+    // `table-header-group` trick has only two usable slots and so cannot
+    // reverse a three- or four-column row at all. Two-up reverses along both
+    // axes so the last cell ends up first.
+    + (need.reverse ? '  .mc-rev { display:flex !important; flex-wrap:wrap !important; flex-direction:column-reverse !important; }\n'
+      + '  .mc-2up.mc-rev { flex-direction:row-reverse !important; flex-wrap:wrap-reverse !important; }\n' : '')
+    + (need.hideM ? '  .mc-only-d, .mc-only-d table { display:none !important; max-height:0 !important; overflow:hidden !important; }\n' : '')
+    + (need.hideD ? '  .mc-only-m, .mc-only-m table { display:block !important; max-height:none !important; overflow:visible !important; }\n' : '')
+    + '  img { max-width:100% !important; height:auto !important; }\n'
+    + '}\n</style>';
+  /*
+   * `xmlns:o` earns its place; `xmlns:v` does not. The Office namespace is
+   * what makes `<o:OfficeDocumentSettings>` parse, and `PixelsPerInch` 96 is
+   * a live bug fix rather than a legacy one: on a high-DPI Windows display
+   * Outlook renders at 120dpi and scales the whole template about 25% larger
+   * than authored. VML's namespace is deliberately absent -- nothing here
+   * emits VML, and declaring a namespace for markup that never appears is
+   * noise in every other client.
+   */
+  const msoHead = '\n<!--[if mso]>\n<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>\n<![endif]-->';
+  // `text-size-adjust` at 100%, never `none`: both stop a mobile client
+  // inflating the type, but `none` also blocks legitimate scaling and leaves
+  // text unreadably small on some Android clients.
+  const bodyStyle = 'margin:0;padding:0;background:' + pageBg + ';font-family:' + t.font.replace(/"/g, "'") + ';color:' + t.text + ';-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%;';
+  return msoHarden('<!doctype html>\n<html lang="en" xmlns:o="urn:schemas-microsoft-com:office:office">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1">\n<meta name="color-scheme" content="light">\n<meta name="supported-color-schemes" content="light">\n<title>' + 'Email' + '</title>' + msoHead + stackCss + '\n</head>\n<body style="' + bodyStyle + '">\n<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:' + pageBg + ';">\n  <tr><td align="center" style="padding:' + pagePad + ';">\n    ' + ghostOpen + '\n    ' + shell + '\n    ' + ghostClose + '\n  </td></tr>\n</table>\n</body>\n</html>');
 }

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/ids.js

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