@seliseblocks/mailcraft 0.1.0

package/src/core/layout-style.js

@@ -0,0 +1,115 @@
+/**
+ * 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';
+}
+
+/** 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. */
+export function rowMargin(p, centerEmpty) {
+  const t = p.mt ?? p.my ?? 0;
+  const r = p.mr ?? 0;
+  const b = p.mb ?? p.my ?? 0;
+  const l = p.ml ?? 0;
+  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) + '%',
+    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'),
+  };
+}

package/src/core/parse.js

@@ -0,0 +1,10 @@
+export function parseItems(s) {
+  return String(s || '').split('\n').map((l) => l.trim()).filter(Boolean).map((l) => {
+    const i = l.indexOf('|');
+    return i < 0 ? { label: l, href: '#' } : { label: l.slice(0, i).trim(), href: l.slice(i + 1).trim() };
+  });
+}
+
+export function cellsOf(p) {
+  return String(p.data || '').split('\n').filter((l) => l.trim()).map((l) => l.split('|').map((c) => c.trim()));
+}

package/src/core/placeholder.js

@@ -0,0 +1,15 @@
+/** Data-URI placeholder image generator, ported verbatim from the original. */
+function enc(s) {
+  return encodeURIComponent(s).replace(/\(/g, '%28').replace(/\)/g, '%29');
+}
+
+export function PH(label, w, ht) {
+  return 'data:image/svg+xml;utf8,' + enc(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="' + w + '" height="' + ht + '">' +
+    '<defs><pattern id="s" width="9" height="9" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">' +
+    '<rect width="9" height="9" fill="#ececed"/><line x1="0" y1="0" x2="0" y2="9" stroke="#cfd3d8" stroke-width="3"/></pattern></defs>' +
+    '<rect width="100%" height="100%" fill="url(#s)"/>' +
+    '<rect x="0.5" y="0.5" width="' + (w - 1) + '" height="' + (ht - 1) + '" fill="none" stroke="#9aa2ab"/>' +
+    '<text x="50%" y="50%" dy="4" text-anchor="middle" font-family="ui-monospace,monospace" font-size="' + Math.max(11, Math.round(w / 40)) + '" fill="#5b6672">' + label + '</text></svg>',
+  );
+}

package/src/core/sanitize.js

@@ -0,0 +1,141 @@
+/** Scopes authored CSS to the email sheet so a raw block can never restyle the editor chrome. Ported verbatim: manual brace-matching, not the CSSOM, so arbitrary/partial CSS still scopes instead of failing to parse. */
+export const scopeCss = (css, root) => {
+  const src = String(css || '');
+  let out = ''; let i = 0;
+  const prefix = (sel) => sel.split(',').map((s) => {
+    const t = s.trim();
+    if (!t) return '';
+    if (/^(from|to|\d+%)$/i.test(t)) return t;
+    if (t.startsWith('@')) return t;
+    if (/^(html|body|:root)\b/i.test(t)) return root + t.replace(/^(html|body|:root)/i, '');
+    return root + ' ' + t;
+  }).filter(Boolean).join(', ');
+  while (i < src.length) {
+    const brace = src.indexOf('{', i);
+    if (brace < 0) { out += src.slice(i); break; }
+    const head = src.slice(i, brace).trim();
+    let depth = 1; let j = brace + 1;
+    while (j < src.length && depth > 0) { if (src[j] === '{') depth++; else if (src[j] === '}') depth--; j++; }
+    const body = src.slice(brace + 1, j - 1);
+    if (head.startsWith('@')) {
+      out += head + '{' + (/^@(media|supports|layer|container)/i.test(head) ? scopeCss(body, root) : body) + '}';
+    } else {
+      out += prefix(head) + '{' + body + '}';
+    }
+    i = j;
+  }
+  return out;
+};
+
+export const migrateTokens = (json) => String(json).replace(/\[\[\s*([\w.]+)\s*\]\]/g, '{' + '{ $1 }' + '}');
+
+/** Paste sanitizer -- Word/Docs/Notion drop class soup, mso- properties and nested spans into the document; keep a small tag whitelist and drop attributes (href/target/rel on links survive). */
+const PASTE_OK = { A: 1, B: 1, STRONG: 1, I: 1, EM: 1, U: 1, S: 1, STRIKE: 1, BR: 1, P: 1, UL: 1, OL: 1, LI: 1, H1: 1, H2: 1, H3: 1, H4: 1, H5: 1, H6: 1, BLOCKQUOTE: 1, CODE: 1, SUP: 1, SUB: 1 };
+
+export const cleanHtml = (html) => {
+  const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
+  doc.querySelectorAll('style,script,meta,link,title,head').forEach((n) => n.remove());
+  const walk = (node) => {
+    Array.from(node.children).forEach((el) => {
+      walk(el);
+      if (!PASTE_OK[el.tagName]) {
+        const parent = el.parentNode;
+        while (el.firstChild) parent.insertBefore(el.firstChild, el);
+        parent.removeChild(el);
+        return;
+      }
+      Array.from(el.attributes).forEach((at) => {
+        const keep = el.tagName === 'A' && ['href', 'target', 'rel'].indexOf(at.name) > -1;
+        if (!keep) el.removeAttribute(at.name);
+      });
+    });
+  };
+  walk(doc.body);
+  return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
+};
+
+/**
+ * Import sanitizer. Pasting wants `cleanHtml`'s scorched-earth policy (Word/
+ * Docs class soup adds nothing), but an HTML *import* is the opposite case:
+ * a hand-built email's inline styles ARE the design. Running imports through
+ * the paste path collapsed every distinctly-styled paragraph -- a 26px/800
+ * headline, an italic footnote, a 12px footer -- into one uniform block in
+ * the theme's default face. This variant keeps the same structural whitelist
+ * (plus `SPAN`/`IMG`, which carry real content in emails) and preserves a
+ * whitelist of typographic/spacing style properties per element; everything
+ * else (mso-*, classes, ids, event handlers) is still stripped.
+ */
+const IMPORT_OK = Object.assign({ SPAN: 1, IMG: 1 }, PASTE_OK);
+const IMPORT_STYLES = [
+  'font-size', 'font-weight', 'font-style', 'font-family', 'color', 'line-height',
+  'letter-spacing', 'text-align', 'text-decoration', 'text-transform',
+  'background-color', 'border-radius', 'padding', 'margin', 'word-break',
+  'width', 'max-width', 'height',
+];
+
+export const cleanImportHtml = (html) => {
+  const doc = new DOMParser().parseFromString(String(html || ''), 'text/html');
+  doc.querySelectorAll('style,script,meta,link,title,head').forEach((n) => n.remove());
+  const walk = (node) => {
+    Array.from(node.children).forEach((el) => {
+      walk(el);
+      if (!IMPORT_OK[el.tagName]) {
+        const parent = el.parentNode;
+        while (el.firstChild) parent.insertBefore(el.firstChild, el);
+        parent.removeChild(el);
+        return;
+      }
+      const kept = [];
+      IMPORT_STYLES.forEach((p) => {
+        const v = el.style.getPropertyValue(p);
+        if (v) kept.push(p + ':' + v);
+      });
+      Array.from(el.attributes).forEach((at) => {
+        const keep = (el.tagName === 'A' && ['href', 'target', 'rel'].indexOf(at.name) > -1)
+          || (el.tagName === 'IMG' && ['src', 'alt', 'width', 'height'].indexOf(at.name) > -1);
+        if (!keep) el.removeAttribute(at.name);
+      });
+      if (kept.length) el.setAttribute('style', kept.join(';'));
+    });
+  };
+  walk(doc.body);
+  return doc.body.innerHTML.replace(/<!--[\s\S]*?-->/g, '').replace(/\s{2,}/g, ' ').trim();
+};
+
+/**
+ * Makes an image URL safe to drop inside `url("...")`.
+ *
+ * These URLs are not ours: they come from a storage provider's backend, or from
+ * a user typing into the "Background image URL" field. They are then
+ * interpolated into CSS -- in the library tiles, in the canvas, and (worst) into
+ * a `style="..."` attribute in the exported email, where an unescaped quote ends
+ * the attribute and everything after it becomes markup in someone's campaign.
+ *
+ * Percent-encoding rather than backslash-escaping, because the same value has to
+ * survive two different contexts: `\"` is correct in CSS but is still a literal
+ * quote to an HTML attribute parser. `%22` is safe in both, and resolves
+ * identically when the browser fetches it.
+ *
+ * Schemes are allowlisted as well. A relative path has no scheme and is fine;
+ * anything exotic resolves to nothing rather than being handed to the parser.
+ */
+const CSS_URL_ESCAPE = { '"': '%22', "'": '%27', '(': '%28', ')': '%29', '\\': '%5C' };
+
+export const cssUrl = (u) => {
+  const raw = String(u == null ? '' : u).trim();
+  if (!raw) return '';
+  const scheme = raw.match(/^([a-z][a-z0-9+.-]*):/i);
+  if (scheme && !/^(https?|blob)$/i.test(scheme[1]) && !/^data:image\//i.test(raw)) return '';
+  // An explicit table, not encodeURIComponent: that leaves ( ) ' untouched,
+  // and an unescaped paren closes url(...) just as surely as a quote does.
+  return raw.replace(/["'()\\]|\s/g, (c) => CSS_URL_ESCAPE[c] || '%20');
+};
+
+export const escHtml = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+/** Minimal HTML syntax highlighter for the code view. */
+export const hl = (src) => escHtml(src)
+  .replace(/([\w-]+)=&quot;([^&]*)&quot;/g, '<span style="color:#a8763e">$1</span>=<span style="color:#4a8a6a">&quot;$2&quot;</span>')
+  .replace(/([\w-]+)="([^"]*)"/g, '<span style="color:#a8763e">$1</span>=<span style="color:#4a8a6a">"$2"</span>')
+  .replace(/(&lt;\/?)([a-zA-Z][\w-]*)/g, '$1<span style="color:#5980a6;font-weight:600">$2</span>')
+  .replace(/(\{\{[^{}]*\}\})/g, '<span style="background:rgba(89,128,166,0.18);color:#2c455d;border-radius:2px">$1</span>');

package/src/core/storage-limits.js

@@ -0,0 +1,184 @@
+/**
+ * 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.
+ *
+ * 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
+ * creates the file record: validating afterwards would leave an orphan behind
+ * for every rejection.
+ *
+ * Types are decided by sniffing the leading bytes, not by trusting `file.type`:
+ * the browser fills that in from the file extension, so renaming `payload.svg`
+ * to `photo.png` is enough to walk a script-bearing document past a MIME check
+ * and into the editor's own DOM, where the library preview renders it.
+ */
+
+import { KB } from './assets.js';
+
+const ascii = (b, at, s) => s.split('').every((c, i) => b[at + i] === c.charCodeAt(0));
+
+/**
+ * The leading bytes of every raster format a mail client might plausibly be
+ * asked to show, plus the ones it can't -- knowing a file is AVIF is what lets
+ * the rejection say "AVIF" instead of "unsupported".
+ */
+function sniff(b) {
+  if (b.length < 12) return null;
+  if (b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff) return 'image/jpeg';
+  if (b[0] === 0x89 && ascii(b, 1, 'PNG')) return 'image/png';
+  if (ascii(b, 0, 'GIF8')) return 'image/gif';
+  if (ascii(b, 0, 'RIFF') && ascii(b, 8, 'WEBP')) return 'image/webp';
+  if (ascii(b, 0, 'BM')) return 'image/bmp';
+  if ((ascii(b, 0, 'II') && b[2] === 0x2a && b[3] === 0) || (ascii(b, 0, 'MM') && b[2] === 0 && b[3] === 0x2a)) return 'image/tiff';
+  if (b[0] === 0 && b[1] === 0 && b[2] === 1 && b[3] === 0) return 'image/x-icon';
+  if (ascii(b, 4, 'ftyp')) {
+    const brand = String.fromCharCode(b[8], b[9], b[10], b[11]);
+    if (brand === 'avif' || brand === 'avis') return 'image/avif';
+    return 'image/heic';
+  }
+  // Markup: an SVG may open with a BOM, an XML declaration, a doctype or a
+  // comment before the root element, so the reliable tell is "text that starts
+  // with '<'", not a literal "<svg" at offset zero.
+  let i = 0;
+  if (b[0] === 0xef && b[1] === 0xbb && b[2] === 0xbf) i = 3;
+  while (i < b.length && (b[i] === 0x20 || b[i] === 0x09 || b[i] === 0x0a || b[i] === 0x0d)) i++;
+  if (b[i] === 0x3c) return 'image/svg+xml';
+  return null;
+}
+
+/** First bytes of a file. `Blob.arrayBuffer` where it exists, FileReader where it doesn't. */
+function head(file) {
+  const slice = file.slice(0, 32);
+  if (typeof slice.arrayBuffer === 'function') {
+    return slice.arrayBuffer().then((buf) => new Uint8Array(buf)).catch(() => null);
+  }
+  return new Promise((resolve) => {
+    const fr = new FileReader();
+    fr.onload = () => resolve(new Uint8Array(fr.result));
+    fr.onerror = () => resolve(null);
+    fr.readAsArrayBuffer(slice);
+  });
+}
+
+/** Decoded pixel dimensions, or `null` when the browser can't decode it -- which is itself a reason to refuse the file. */
+function probe(file) {
+  return new Promise((resolve) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    const done = (v) => { URL.revokeObjectURL(url); resolve(v); };
+    img.onload = () => done({ w: img.naturalWidth || img.width, ht: img.naturalHeight || img.height });
+    img.onerror = () => done(null);
+    img.src = url;
+  });
+}
+
+/**
+ * Strips directory separators, control characters and anything a storage
+ * backend is likely to treat as path syntax, and caps the length. A name
+ * arrives from the user's disk and ends up in a URL.
+ */
+export function sanitizeName(name) {
+  const clean = String(name || 'file')
+    .replace(/[\\/]/g, '-')
+    .replace(/[<>:"|?*]/g, '')
+    .split('').filter((c) => c.charCodeAt(0) > 31).join('')
+    .trim()
+    .replace(/^\.+/, '') || 'file';
+  if (clean.length <= 120) return clean;
+  const dot = clean.lastIndexOf('.');
+  const ext = dot > 0 && clean.length - dot <= 8 ? clean.slice(dot) : '';
+  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. */
+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;
+}
+
+/**
+ * Splits a FileList into what may be uploaded and what may not.
+ *
+ * Rejections carry an i18n key and its params rather than a sentence, so the
+ * reason is translated by the same table as the rest of the chrome.
+ *
+ * @returns {Promise<{accepted: Array<{file: File, name: string, w: number, ht: number, size: number, type: string}>, rejected: Array<{name: string, key: string, params: Object}>}>}
+ */
+export async function validateFiles(list, limits) {
+  const files = Array.from(list || []);
+  const accepted = [];
+  const rejected = [];
+  if (!files.length) return { accepted, rejected };
+
+  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());
+  const max = Number(limits.maxBytes);
+  const maxW = Number(limits.maxWidth) || 0;
+  const maxH = Number(limits.maxHeight) || 0;
+  const perDrop = Number(limits.maxFilesPerDrop) || 0;
+
+  const queue = perDrop && files.length > perDrop ? files.slice(0, perDrop) : files;
+  if (queue.length < files.length) {
+    files.slice(queue.length).forEach((f) => rejected.push({ name: f.name, key: 'storage.errTooMany', params: { max: perDrop } }));
+  }
+
+  for (const file of queue) {
+    const name = sanitizeName(file.name);
+
+    if (file.size > max) {
+      rejected.push({ name, key: 'storage.errTooLarge', params: { name, size: KB(file.size), max: KB(max) } });
+      continue;
+    }
+
+    const bytes = await head(file);
+    const type = bytes && sniff(bytes);
+    if (!type) {
+      rejected.push({ name, key: 'storage.errUnreadable', params: { name } });
+      continue;
+    }
+    if (!accept.includes(type)) {
+      rejected.push({ name, key: 'storage.errFormat', params: { name, type: type.replace(/^image\//, '').toUpperCase() } });
+      continue;
+    }
+    // Listing SVG in `accept` is not on its own enough. It is the one image
+    // type that is also a script host, and it renders inside the editor's own
+    // shadow root the moment it appears as a library tile -- so a host that
+    // genuinely wants it has to say so twice, and can never enable it by
+    // pasting a permissive MIME list.
+    if (type === 'image/svg+xml' && !limits.allowSvg) {
+      rejected.push({ name, key: 'storage.errSvg', params: { name } });
+      continue;
+    }
+
+    let dims = { w: 0, ht: 0 };
+    if (type !== 'image/svg+xml') {
+      const measured = await probe(file);
+      if (!measured) { rejected.push({ name, key: 'storage.errUnreadable', params: { name } }); continue; }
+      dims = measured;
+      if ((maxW && dims.w > maxW) || (maxH && dims.ht > maxH)) {
+        rejected.push({ name, key: 'storage.errDimensions', params: { name, w: dims.w, ht: dims.ht, maxW: maxW || dims.w, maxH: maxH || dims.ht } });
+        continue;
+      }
+    }
+
+    accepted.push({ file, name, type, size: file.size, w: dims.w, ht: dims.ht });
+  }
+
+  return { accepted, rejected };
+}
+
+/** An `accept` attribute for the file picker, so the OS dialog greys out what validation would refuse anyway. */
+export function acceptAttribute(limits) {
+  if (!limits || !Array.isArray(limits.accept) || !limits.accept.length) return 'image/*';
+  return limits.accept.join(',');
+}

package/src/core/storage.js

@@ -0,0 +1,85 @@
+/**
+ * The storage contract.
+ *
+ * This file is deliberately transport-free: no `fetch`, no auth, no origin, no
+ * backend of any kind. The editor talks to a plain object supplied by the host
+ * (`editor.storageProvider = …`) in exactly the way it talks to `aiProvider` --
+ * so a host can back the file library with S3, a DMS, a CDN or its own proxy
+ * without this package knowing which.
+ *
+ * No adapter ships here, deliberately. An adapter is a mapping onto somebody
+ * else's API surface, so vendoring one would mean republishing this package
+ * every time that surface moves. The host writes its own, next to the auth and
+ * base URL it already owns.
+ *
+ * @typedef {Object} Asset
+ * @property {string} id        Stable id. With a provider this is the backend's file id -- `remove()` gets it back verbatim.
+ * @property {string} name      Display/file name.
+ * @property {string} url       Resolvable image URL. Must outlive the send: an email renders it long after the editor closed.
+ * @property {string} folder    Folder display name.
+ * @property {string} [folderId] Backend folder id, when the provider has one.
+ * @property {number} w         Pixel width (0 when unknown).
+ * @property {number} ht        Pixel height (0 when unknown).
+ * @property {number} size      Bytes.
+ *
+ * @typedef {Object} StorageProvider
+ * @property {() => Promise<Array<{id: string, name: string}>>} [folders]
+ *   Selectable folders. Omit for a flat library.
+ * @property {(q: {folderId: string, cursor: ?string, query: string}) => Promise<{items: Asset[], cursor: ?string}>} list
+ *   One page of assets. `cursor` is opaque -- whatever the provider returned last, handed back to fetch the next page.
+ * @property {(file: File, o: {folderId: string, width: number, height: number, signal: ?AbortSignal}) => Promise<Asset>} upload
+ *   Stores one already-validated file and resolves to the asset that represents it.
+ * @property {(asset: Asset) => Promise<void>} [remove]
+ *   Deletes. Without it the library's DEL only drops the tile from view.
+ * @property {StorageLimits} [limits]
+ *   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 {number} maxBytes   Per-file byte ceiling. Required.
+ * @property {number} [maxWidth]
+ * @property {number} [maxHeight]
+ * @property {number} [maxFilesPerDrop]
+ * @property {boolean} [allowSvg] SVG is refused even when listed in `accept` unless this is also true -- see `storage-limits.js`.
+ */
+
+/** The synthetic "everything" folder. Its id is empty so a provider reading `folderId` sees "no folder filter", not a magic name. */
+export const ALL_FOLDER_ID = '';
+
+/**
+ * Coerces whatever a provider returned into the shape the renderer indexes
+ * into. A provider that forgets `w`/`ht` should degrade to a tile without
+ * dimensions, not to `undefined×undefined` printed in the UI -- and `probe`
+ * (what the limits check already measured client-side) fills those in for
+ * backends that don't store image dimensions at all.
+ */
+export function normalizeAsset(raw, probe) {
+  const a = raw || {};
+  return {
+    id: String(a.id ?? a.itemId ?? ''),
+    name: String(a.name ?? (probe && probe.name) ?? 'file'),
+    url: String(a.url ?? ''),
+    folder: String(a.folder ?? ''),
+    folderId: a.folderId != null ? String(a.folderId) : undefined,
+    w: Number(a.w ?? (probe && probe.w) ?? 0) || 0,
+    ht: Number(a.ht ?? (probe && probe.ht) ?? 0) || 0,
+    size: Number(a.size ?? (probe && probe.size) ?? 0) || 0,
+  };
+}
+
+/**
+ * `editor.storageLimits` over `provider.limits`, per key rather than
+ * wholesale: a host that only wants to tighten `maxBytes` shouldn't have to
+ * restate the provider's `accept` list to do it.
+ */
+export function resolveLimits(hostLimits, providerLimits) {
+  if (!hostLimits && !providerLimits) return null;
+  return Object.assign({}, providerLimits || {}, hostLimits || {});
+}
+
+/** Names the methods a provider is missing, for a loud failure at assignment rather than a quiet one on first upload. */
+export function providerProblems(p) {
+  if (!p || typeof p !== 'object') return ['storageProvider must be an object'];
+  const missing = ['list', 'upload'].filter((k) => typeof p[k] !== 'function');
+  return missing.length ? [`storageProvider is missing ${missing.join(' and ')}`] : [];
+}

package/src/core/theme.js

@@ -0,0 +1 @@
+export const THEME = () => ({ bg: '#eef2f7', contentBg: '#ffffff', width: 620, font: '"Helvetica Neue", Helvetica, Arial, sans-serif', text: '#172033', link: '#0065b3' });

package/src/core/toolbar.js

@@ -0,0 +1,67 @@
+/**
+ * Which parts of the editor's own top bar are shown.
+ *
+ * Hosts embed the editor inside chrome they already own -- a page header, a
+ * breadcrumb, their own Save/Send buttons -- where a second bar with a second
+ * logo reads as two applications stacked on top of each other. The bar is
+ * therefore configurable down to the individual control, and can be removed
+ * entirely.
+ *
+ * What that costs: `undo`, `redo` and `export` have element-level equivalents
+ * (`undo()`, `redo()`, `exportHtml()`), so hiding those is only declining to
+ * render the button. `preview`, `code` and `ai` open panels that nothing in
+ * the public API opens -- a host that hides them is giving the panel up, not
+ * just the button. DOCS.md carries the same table for integrators.
+ *
+ * Keyboard shortcuts are unaffected by any of this -- they are bound on the
+ * document, not on the bar -- so Ctrl/Cmd+Z, Shift+Ctrl/Cmd+Z and Ctrl/Cmd+E
+ * (the export dialog, and the Screenshot button inside it) work with no bar
+ * at all.
+ */
+
+/** Every switchable part, in the order it appears in the bar. */
+export const TOOLBAR_ITEMS = ['logo', 'status', 'device', 'undo', 'redo', 'theme', 'ai', 'code', 'preview', 'export'];
+
+const HIDDEN = ['none', 'hidden', 'off', 'false'];
+
+/**
+ * Normalizes whatever the host set into `{ item: boolean }`, or `null` for
+ * "no bar at all".
+ *
+ * Accepts, in the two shapes a Web Component gets configured through:
+ *
+ *   - property: `false` (no bar), or an object of overrides where only the
+ *     keys set to `false` are turned off -- so `{ logo: false }` keeps every
+ *     control and drops just the brand, without restating the other nine.
+ *   - attribute: `"none"` (no bar), or a comma list naming the items to keep
+ *     (`toolbar="undo,redo,export"`). Markup has only strings to work with,
+ *     and an allow-list is the readable half of the two: the alternative is
+ *     spelling out the seven things you did not want.
+ *
+ * Unset means everything is shown -- the editor is fully usable standalone,
+ * and configuring the bar is opt-in.
+ *
+ * An empty result (every item switched off) collapses to `null`: an empty
+ * 54px bar is not what anyone meant by turning off the last control.
+ */
+export function resolveToolbar(value) {
+  if (value === false) return null;
+  if (typeof value === 'string' && HIDDEN.indexOf(value.trim().toLowerCase()) >= 0) return null;
+
+  const on = {};
+  TOOLBAR_ITEMS.forEach((k) => { on[k] = true; });
+
+  if (value && typeof value === 'object') {
+    TOOLBAR_ITEMS.forEach((k) => { if (value[k] === false) on[k] = false; });
+  } else if (typeof value === 'string' && value.trim() && value.trim().toLowerCase() !== 'all') {
+    const keep = value.split(',').map((s) => s.trim()).filter(Boolean);
+    TOOLBAR_ITEMS.forEach((k) => { on[k] = keep.indexOf(k) >= 0; });
+  }
+
+  return TOOLBAR_ITEMS.some((k) => on[k]) ? on : null;
+}
+
+/** Stable string for a resolved config, so a re-set that changes nothing does not cost a shell rebuild. */
+export function toolbarKey(on) {
+  return on ? TOOLBAR_ITEMS.map((k) => (on[k] ? '1' : '0')).join('') : 'none';
+}

package/src/core/variables.js

@@ -0,0 +1,11 @@
+export const DEFAULT_VARS = 'first_name\nlast_name\nemail\ncompany\ncity\norder_id\nplan\ndiscount\nunsubscribe_url';
+export const TOKEN = (t) => '{' + '{ ' + t + ' }' + '}';
+
+/** Variables are supplied by the host application -- the editor only ever shows the tokens, never a substituted value. */
+export function vars(raw) {
+  const list = Array.isArray(raw) ? raw : String(raw == null ? DEFAULT_VARS : raw).split(/[\n,]/);
+  return list.map((v) => String(v).trim().replace(/^\{\{\s*|\s*\}\}$/g, '')).filter(Boolean);
+}
+
+/** Which prop field a merge tag lands in when inserted from the Data tab, keyed by the selected block's type. */
+export const INSERT_KEYS = { text: 'html', heading: 'text', button: 'label', html: 'code', codeblock: 'code', quote: 'text', list: 'items', table: 'data' };