@seliseblocks/mailcraft 0.1.1 → 0.2.1

package/src/core/storage-limits.js

@@ -1,184 +1,189 @@
-/**
- * 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(',');
-}
+/**
+ * Upload validation -- mechanism only, no policy.
+ *
+ * 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
+ * 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 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 (!(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: {} })) };
+
+  // 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;
+  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 && !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

@@ -1,85 +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 ')}`] : [];
-}
+/**
+ * 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. Omitted or empty means every image type the validator recognizes.
+ * @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

@@ -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/core/variables.js

@@ -1,11 +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' };
+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' };

package/src/index.js

@@ -1,9 +1,9 @@
-export { MailCraftEditor } from './mailcraft-editor.js';
-export { createEditor, isReady } from './create-editor.js';
-export { EditorCore } from './core/editor-core.js';
-export { renderDoc } from './render/canvas.js';
-export { BLOCKS, GROUPS, LAYOUTS, PALETTE } from './core/blocks.js';
-export { createTranslator, defineMessages, missingKeys, LOCALES, isRtl, EN, MESSAGE_KEYS } from './core/i18n/index.js';
-export { LOCALE_TABLES } from './core/i18n/tables.js';
-export { ALL_FOLDER_ID, normalizeAsset, resolveLimits } from './core/storage.js';
-export { validateFiles, sanitizeName, acceptAttribute, limitsProblem } from './core/storage-limits.js';
+export { MailCraftEditor } from './mailcraft-editor.js';
+export { createEditor, isReady } from './create-editor.js';
+export { EditorCore } from './core/editor-core.js';
+export { renderDoc } from './render/canvas.js';
+export { BLOCKS, GROUPS, LAYOUTS, PALETTE } from './core/blocks.js';
+export { createTranslator, defineMessages, missingKeys, LOCALES, isRtl, EN, MESSAGE_KEYS } from './core/i18n/index.js';
+export { LOCALE_TABLES } from './core/i18n/tables.js';
+export { ALL_FOLDER_ID, normalizeAsset, resolveLimits } from './core/storage.js';
+export { validateFiles, sanitizeName, acceptAttribute, limitsProblem } from './core/storage-limits.js';