best-email-builder 0.3.0 → 0.5.0

package/dist/chunk-UFKCLU2D.js

@@ -0,0 +1,255 @@
+// src/features/preview/darkMode.js
+var DARK_PAGE = "#121212";
+var DARK_TEXT = "#e8e8e8";
+var NAMED = {
+  white: "#ffffff",
+  black: "#000000",
+  snow: "#fffafa",
+  ivory: "#fffff0",
+  whitesmoke: "#f5f5f5",
+  ghostwhite: "#f8f8ff",
+  gainsboro: "#dcdcdc",
+  lightgray: "#d3d3d3",
+  lightgrey: "#d3d3d3",
+  silver: "#c0c0c0",
+  gray: "#808080",
+  grey: "#808080",
+  navy: "#000080"
+};
+var amount = (v, max) => v.endsWith("%") ? parseFloat(v) * max / 100 : parseFloat(v);
+function parseCssColor(token) {
+  const value = token.trim().toLowerCase();
+  const hex = NAMED[
+    /** @type {keyof typeof NAMED} */
+    value
+  ] || value;
+  let match = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(hex);
+  if (match) {
+    let digits = match[1];
+    if (digits.length <= 4) digits = [...digits].map((d) => d + d).join("");
+    const n = (i) => parseInt(digits.slice(i, i + 2), 16);
+    return { r: n(0), g: n(2), b: n(4), a: digits.length === 8 ? n(6) / 255 : 1 };
+  }
+  match = /^rgba?\(\s*([\d.]+%?)[\s,]+([\d.]+%?)[\s,]+([\d.]+%?)(?:[\s,/]+([\d.]+%?))?\s*\)$/.exec(value);
+  if (match) {
+    const channel = (v) => Math.min(255, amount(v, 255));
+    const alpha = match[4] === void 0 ? 1 : amount(match[4], 1);
+    return { r: channel(match[1]), g: channel(match[2]), b: channel(match[3]), a: Math.min(1, alpha) };
+  }
+  match = /^hsla?\(\s*([\d.]+)(?:deg)?[\s,]+([\d.]+)%[\s,]+([\d.]+)%(?:[\s,/]+([\d.]+%?))?\s*\)$/.exec(value);
+  if (match) {
+    const alpha = match[4] === void 0 ? 1 : Math.min(1, amount(match[4], 1));
+    const s = Math.min(100, parseFloat(match[2])) / 100;
+    const l = Math.min(100, parseFloat(match[3])) / 100;
+    return { ...rgbOfHsl(parseFloat(match[1]) % 360, s, l), a: alpha };
+  }
+  return null;
+}
+function luminance({ r, g, b }) {
+  const linear = (c) => {
+    const v = c / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+function contrast(a, b) {
+  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (light + 0.05) / (dark + 0.05);
+}
+function toHsl({ r, g, b }) {
+  const [R, G, B] = [r / 255, g / 255, b / 255];
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  const h = max === R ? (G - B) / d + (G < B ? 6 : 0) : max === G ? (B - R) / d + 2 : (R - G) / d + 4;
+  return [h * 60, s, l];
+}
+function rgbOfHsl(h, s, l) {
+  const k = (n) => (n + h / 30) % 12;
+  const q = s * Math.min(l, 1 - l);
+  const f = (n) => Math.round(255 * (l - q * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1))));
+  return { r: f(0), g: f(8), b: f(4) };
+}
+function fromHsl(h, s, l, a) {
+  const { r, g, b } = rgbOfHsl(h, s, l);
+  if (a < 1) return `rgba(${r}, ${g}, ${b}, ${Math.round(a * 100) / 100})`;
+  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+function over(top, bottom) {
+  const mix = (c) => top[c] * top.a + bottom[c] * (1 - top.a);
+  return { r: mix("r"), g: mix("g"), b: mix("b"), a: 1 };
+}
+var PAGE = (
+  /** @type {Rgba} */
+  parseCssColor(DARK_PAGE)
+);
+function darkSurface(token, color) {
+  const lum = luminance(color);
+  const [h, s] = toHsl(color);
+  return lum > 0.45 ? fromHsl(h, s * 0.5, 0.07 + (1 - lum) * 0.35, color.a) : token;
+}
+function darkText(token, color, background) {
+  if (luminance(color) >= 0.3) return token;
+  const [h, s] = toHsl(color);
+  const lightened = fromHsl(h, s * 0.7, 0.91 - luminance(color) * 0.5, color.a);
+  const solid = over(color, background);
+  return contrast(solid, background) >= contrast(over(
+    /** @type {Rgba} */
+    parseCssColor(lightened),
+    background
+  ), background) ? token : lightened;
+}
+function darkColor(token, role, background = PAGE) {
+  const color = parseCssColor(token);
+  if (!color) return token;
+  if (role === "surface") return darkSurface(token, color);
+  const behind = typeof background === "string" ? parseCssColor(background) || PAGE : background;
+  if (role === "line" && luminance(color) > 0.45) return darkSurface(token, color);
+  return darkText(token, color, behind);
+}
+var COLOR = `#[0-9a-f]{3,8}\\b|(?:rgba?|hsla?)\\([^)]*\\)|\\b(?:${Object.keys(NAMED).join("|")})\\b`;
+var COLOR_TOKEN = new RegExp(`url\\([^)]*\\)|(${COLOR})`, "gi");
+var COLOR_PROPERTY = /(^|[;{\s])(color|background(?:-color)?|border(?:-(?:top|right|bottom|left))?(?:-color)?|outline(?:-color)?)(\s*:\s*)([^;}]*)/gi;
+var roleOf = (property) => {
+  const name = property.toLowerCase();
+  return name === "color" ? "text" : name.startsWith("background") ? "surface" : "line";
+};
+function darkDeclarations(css, behind) {
+  let painted = null;
+  for (const match of css.matchAll(COLOR_PROPERTY)) {
+    if (roleOf(match[2]) !== "surface") continue;
+    for (const token of match[4].matchAll(COLOR_TOKEN)) {
+      const color = token[1] && parseCssColor(darkColor(token[1], "surface"));
+      if (color) {
+        painted = over(color, behind);
+        break;
+      }
+    }
+  }
+  const background = painted || behind;
+  const out = css.replace(COLOR_PROPERTY, (_, before, property, colon, value) => {
+    const role = roleOf(property);
+    const changed = value.replace(
+      COLOR_TOKEN,
+      (whole, color) => color ? darkColor(color, role, background) : whole
+    );
+    return `${before}${property}${colon}${changed}`;
+  });
+  return { css: out, background: painted };
+}
+function darkCss(css, background = PAGE) {
+  const behind = typeof background === "string" ? parseCssColor(background) || PAGE : background;
+  if (!css.includes("{")) return darkDeclarations(css, behind).css;
+  return css.replace(/\{([^{}]*)\}/g, (_, body) => `{${darkDeclarations(body, behind).css}}`);
+}
+var DARK_SHEET = `<style data-eb-dark>:root{color-scheme:dark}html,body{background-color:${DARK_PAGE};color:${DARK_TEXT}}</style>`;
+var TOKEN = /<!--[\s\S]*?(?:-->|$)|<!doctype[^>]*>|<(\/?)([a-z][\w:-]*)((?:[^>"']|"[^"]*"|'[^']*')*)>/gi;
+var ATTRIBUTE = /(\s)([^\s=/>"']+)(\s*=\s*)("[^"]*"|'[^']*'|[^\s"'>]+)/g;
+var VOID = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+var CELL = { closes: ["td", "th"], within: ["tr", "table"] };
+var IMPLIED_END = {
+  td: CELL,
+  th: CELL,
+  tr: { closes: ["tr"], within: ["table", "tbody", "thead", "tfoot"] },
+  li: { closes: ["li"], within: ["ul", "ol"] },
+  p: { closes: ["p"], within: ["div", "td", "th", "li", "table", "body"] },
+  option: { closes: ["option"], within: ["select"] }
+};
+var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set(["color", "text", "link", "vlink", "alink"]);
+var attributeColor = (value) => {
+  const trimmed = value.trim();
+  return /^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(trimmed) ? `#${trimmed}` : trimmed;
+};
+function darkTag(attributes, behind) {
+  const parsed = [];
+  for (const match of attributes.matchAll(ATTRIBUTE)) {
+    const raw = match[4];
+    const quote = raw[0] === '"' || raw[0] === "'" ? raw[0] : "";
+    parsed.push({ name: match[2].toLowerCase(), value: quote ? raw.slice(1, -1) : raw, quote });
+  }
+  const bgcolor = parsed.find((a) => a.name === "bgcolor");
+  const legacy = bgcolor && parseCssColor(darkColor(attributeColor(bgcolor.value), "surface"));
+  const base = legacy ? over(legacy, behind) : behind;
+  const style = parsed.find((a) => a.name === "style");
+  const declared = style ? darkDeclarations(style.value, base) : null;
+  const painted = declared?.background || (legacy ? base : null);
+  const background = painted || behind;
+  const out = attributes.replace(ATTRIBUTE, (whole, space, name, equals, raw) => {
+    const key = name.toLowerCase();
+    const quote = raw[0] === '"' || raw[0] === "'" ? raw[0] : "";
+    const value = quote ? raw.slice(1, -1) : raw;
+    let next = value;
+    if (key === "style") next = darkDeclarations(value, base).css;
+    else if (key === "bgcolor") next = recolorAttribute(value, "surface", behind);
+    else if (TEXT_ATTRIBUTES.has(key)) next = recolorAttribute(value, "text", background);
+    if (next === value) return whole;
+    return `${space}${name}${equals}${quote}${quote ? next : next.replace(/\s+/g, "")}${quote}`;
+  });
+  return { attributes: out, background: painted };
+}
+function recolorAttribute(value, role, background) {
+  const color = attributeColor(value);
+  if (!parseCssColor(color)) return value;
+  const changed = darkColor(color, role, background);
+  return changed === color ? value : changed;
+}
+function simulateDarkMode(html) {
+  if (!html) return "";
+  const source = String(html);
+  const stack = [];
+  const behind = () => stack.at(-1)?.background || PAGE;
+  let sheetAt = -1;
+  let sheetRank = 0;
+  let out = "";
+  let last = 0;
+  TOKEN.lastIndex = 0;
+  for (let match = TOKEN.exec(source); match; match = TOKEN.exec(source)) {
+    const [whole, closing, rawName, attributes] = match;
+    out += source.slice(last, match.index);
+    last = match.index + whole.length;
+    if (!rawName) {
+      out += whole;
+      if (/^<!doctype/i.test(whole) && sheetRank < 1) [sheetAt, sheetRank] = [out.length, 1];
+      continue;
+    }
+    const tag = rawName.toLowerCase();
+    if (closing) {
+      const at = stack.findLastIndex((entry) => entry.tag === tag);
+      if (at !== -1) stack.length = at;
+      out += whole;
+      continue;
+    }
+    const implied = IMPLIED_END[
+      /** @type {keyof typeof IMPLIED_END} */
+      tag
+    ];
+    if (implied) {
+      const open = stack.findLastIndex((entry) => implied.closes.includes(entry.tag));
+      if (open > stack.findLastIndex((entry) => implied.within.includes(entry.tag))) stack.length = open;
+    }
+    const { attributes: changed, background } = darkTag(attributes, behind());
+    out += `<${rawName}${changed}>`;
+    if (tag === "head" && sheetRank < 3) [sheetAt, sheetRank] = [out.length, 3];
+    if (tag === "html" && sheetRank < 2) [sheetAt, sheetRank] = [out.length, 2];
+    if (tag === "style" || tag === "script" || tag === "title" || tag === "textarea") {
+      const end = source.slice(last).search(new RegExp(`</${tag}\\s*>`, "i"));
+      const body = end === -1 ? source.slice(last) : source.slice(last, last + end);
+      out += tag === "style" ? darkCss(body) : body;
+      last += body.length;
+      TOKEN.lastIndex = last;
+      continue;
+    }
+    if (!VOID.has(tag) && !/\/\s*$/.test(attributes)) stack.push({ tag, background: background || behind() });
+  }
+  out += source.slice(last);
+  return sheetAt === -1 ? DARK_SHEET + out : out.slice(0, sheetAt) + DARK_SHEET + out.slice(sheetAt);
+}
+
+export {
+  DARK_PAGE,
+  simulateDarkMode
+};
+//# sourceMappingURL=chunk-UFKCLU2D.js.map

package/dist/chunk-UFKCLU2D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/features/preview/darkMode.js"],"sourcesContent":["// @ts-check\n/**\n * DARK MODE, simulated — an email as the mail apps that repaint it in dark\n * mode show it (Gmail and Outlook apps, Outlook.com): light backgrounds\n * turned dark, dark text turned light where it would no longer read,\n * everything else left as it is.\n *\n *   surfaces   background colors (`background`, `bgcolor`…): a LIGHT one\n *              becomes dark, same hue; a darker one (a brand button, an\n *              orange banner) stays.\n *   text       `color`, `<font color>`, `<body text>`: decided against the\n *              background it sits on, once that one is repainted. Dark text\n *              on what became dark turns light, same hue; dark text on a\n *              background that stayed light enough (black on an orange\n *              button) stays; light text stays.\n *   lines      border and outline colors: a light one darkens like a\n *              surface, a dark one is decided like text (a black divider on\n *              the dark page turns light).\n *   images     untouched: a dark logo on a transparent background disappears\n *              here as it does in those apps — what the preview is for.\n *\n * Works on the compiled HTML as a string, tag by tag, keeping which\n * background each element sits on: the colors of `style` attributes, of\n * `bgcolor`/`color`/`text` attributes and of `<style>` sheets (where the\n * background is not known: the dark page). Comments are left alone (Outlook's\n * conditional blocks). No script, no DOM: the preview frame stays sandboxed.\n * Only color values change; tags and attribute names stay as they are.\n *\n * Dependency-free: runs in the browser, on the server and in unit tests.\n */\n\n/** The page behind the email, and its default text, in dark apps. */\nexport const DARK_PAGE = '#121212';\nconst DARK_TEXT = '#e8e8e8';\n\n/** A few named colors emails use. */\nconst NAMED = {\n  white: '#ffffff',\n  black: '#000000',\n  snow: '#fffafa',\n  ivory: '#fffff0',\n  whitesmoke: '#f5f5f5',\n  ghostwhite: '#f8f8ff',\n  gainsboro: '#dcdcdc',\n  lightgray: '#d3d3d3',\n  lightgrey: '#d3d3d3',\n  silver: '#c0c0c0',\n  gray: '#808080',\n  grey: '#808080',\n  navy: '#000080',\n};\n\n/** @typedef {{r: number, g: number, b: number, a: number}} Rgba  channels 0–255, alpha 0–1 */\n\n/** @param {string} v a number or a percentage of `max` */\nconst amount = (v, max) => (v.endsWith('%') ? (parseFloat(v) * max) / 100 : parseFloat(v));\n\n/** @param {string} token @returns {Rgba|null} */\nexport function parseCssColor(token) {\n  const value = token.trim().toLowerCase();\n  const hex = NAMED[/** @type {keyof typeof NAMED} */ (value)] || value;\n  let match = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(hex);\n  if (match) {\n    let digits = match[1];\n    if (digits.length <= 4) digits = [...digits].map((d) => d + d).join('');\n    const n = (/** @type {number} */ i) => parseInt(digits.slice(i, i + 2), 16);\n    return { r: n(0), g: n(2), b: n(4), a: digits.length === 8 ? n(6) / 255 : 1 };\n  }\n  match = /^rgba?\\(\\s*([\\d.]+%?)[\\s,]+([\\d.]+%?)[\\s,]+([\\d.]+%?)(?:[\\s,/]+([\\d.]+%?))?\\s*\\)$/.exec(value);\n  if (match) {\n    const channel = (/** @type {string} */ v) => Math.min(255, amount(v, 255));\n    const alpha = match[4] === undefined ? 1 : amount(match[4], 1);\n    return { r: channel(match[1]), g: channel(match[2]), b: channel(match[3]), a: Math.min(1, alpha) };\n  }\n  match = /^hsla?\\(\\s*([\\d.]+)(?:deg)?[\\s,]+([\\d.]+)%[\\s,]+([\\d.]+)%(?:[\\s,/]+([\\d.]+%?))?\\s*\\)$/.exec(value);\n  if (match) {\n    const alpha = match[4] === undefined ? 1 : Math.min(1, amount(match[4], 1));\n    const s = Math.min(100, parseFloat(match[2])) / 100;\n    const l = Math.min(100, parseFloat(match[3])) / 100;\n    return { ...rgbOfHsl(parseFloat(match[1]) % 360, s, l), a: alpha };\n  }\n  return null;\n}\n\n/** WCAG relative luminance, 0 (black) to 1 (white). @param {Rgba} color */\nexport function luminance({ r, g, b }) {\n  const linear = (/** @type {number} */ c) => {\n    const v = c / 255;\n    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n  };\n  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);\n}\n\n/** WCAG contrast ratio, 1 to 21. @param {Rgba} a @param {Rgba} b */\nexport function contrast(a, b) {\n  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x);\n  return (light + 0.05) / (dark + 0.05);\n}\n\n/** @param {Rgba} color @returns {[number, number, number]} hue 0–360, saturation and lightness 0–1 */\nfunction toHsl({ r, g, b }) {\n  const [R, G, B] = [r / 255, g / 255, b / 255];\n  const max = Math.max(R, G, B);\n  const min = Math.min(R, G, B);\n  const l = (max + min) / 2;\n  if (max === min) return [0, 0, l];\n  const d = max - min;\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n  const h = max === R ? (G - B) / d + (G < B ? 6 : 0) : max === G ? (B - R) / d + 2 : (R - G) / d + 4;\n  return [h * 60, s, l];\n}\n\n/** @param {number} h @param {number} s @param {number} l */\nfunction rgbOfHsl(h, s, l) {\n  const k = (/** @type {number} */ n) => (n + h / 30) % 12;\n  const q = s * Math.min(l, 1 - l);\n  const f = (/** @type {number} */ n) => Math.round(255 * (l - q * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1))));\n  return { r: f(0), g: f(8), b: f(4) };\n}\n\n/** @param {number} h @param {number} s @param {number} l @param {number} a */\nfunction fromHsl(h, s, l, a) {\n  const { r, g, b } = rgbOfHsl(h, s, l);\n  if (a < 1) return `rgba(${r}, ${g}, ${b}, ${Math.round(a * 100) / 100})`;\n  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('')}`;\n}\n\n/** `top` painted over `bottom`. @param {Rgba} top @param {Rgba} bottom @returns {Rgba} */\nfunction over(top, bottom) {\n  const mix = (/** @type {'r'|'g'|'b'} */ c) => top[c] * top.a + bottom[c] * (1 - top.a);\n  return { r: mix('r'), g: mix('g'), b: mix('b'), a: 1 };\n}\n\nconst PAGE = /** @type {Rgba} */ (parseCssColor(DARK_PAGE));\n\n/** A light surface in dark mode, or the color as given. @param {string} token @param {Rgba} color */\nfunction darkSurface(token, color) {\n  const lum = luminance(color);\n  const [h, s] = toHsl(color);\n  // White becomes the dark apps' page; a pale tint a dark one of its hue.\n  return lum > 0.45 ? fromHsl(h, s * 0.5, 0.07 + (1 - lum) * 0.35, color.a) : token;\n}\n\n/** A text color in dark mode, on `background` (already repainted). @param {string} token @param {Rgba} color @param {Rgba} background */\nfunction darkText(token, color, background) {\n  if (luminance(color) >= 0.3) return token;\n  const [h, s] = toHsl(color);\n  const lightened = fromHsl(h, s * 0.7, 0.91 - luminance(color) * 0.5, color.a);\n  // Kept where it already reads better than the light one would (black on an orange button).\n  const solid = over(color, background);\n  return contrast(solid, background) >= contrast(over(/** @type {Rgba} */ (parseCssColor(lightened)), background), background) ? token : lightened;\n}\n\n/**\n * One color in dark mode. `surface`: a background; `text`: a text color;\n * `line`: a border. Text and lines are decided against `background` (the\n * repainted one behind them; the dark page by default). Unknown values\n * (`transparent`, `inherit`…) come back as given.\n * @param {string} token @param {'surface'|'text'|'line'} role @param {string|Rgba} [background]\n */\nexport function darkColor(token, role, background = PAGE) {\n  const color = parseCssColor(token);\n  if (!color) return token;\n  if (role === 'surface') return darkSurface(token, color);\n  const behind = typeof background === 'string' ? parseCssColor(background) || PAGE : background;\n  if (role === 'line' && luminance(color) > 0.45) return darkSurface(token, color);\n  return darkText(token, color, behind);\n}\n\nconst COLOR = `#[0-9a-f]{3,8}\\\\b|(?:rgba?|hsla?)\\\\([^)]*\\\\)|\\\\b(?:${Object.keys(NAMED).join('|')})\\\\b`;\nconst COLOR_TOKEN = new RegExp(`url\\\\([^)]*\\\\)|(${COLOR})`, 'gi');\nconst COLOR_PROPERTY =\n  /(^|[;{\\s])(color|background(?:-color)?|border(?:-(?:top|right|bottom|left))?(?:-color)?|outline(?:-color)?)(\\s*:\\s*)([^;}]*)/gi;\n\n/** @param {string} property @returns {'surface'|'text'|'line'} */\nconst roleOf = (property) => {\n  const name = property.toLowerCase();\n  return name === 'color' ? 'text' : name.startsWith('background') ? 'surface' : 'line';\n};\n\n/**\n * The declarations of one rule or `style` attribute in dark mode, and the\n * background they paint (repainted, over `behind`), or null.\n * @param {string} css @param {Rgba} behind\n */\nfunction darkDeclarations(css, behind) {\n  /** @type {Rgba|null} */\n  let painted = null;\n  for (const match of css.matchAll(COLOR_PROPERTY)) {\n    if (roleOf(match[2]) !== 'surface') continue;\n    for (const token of match[4].matchAll(COLOR_TOKEN)) {\n      const color = token[1] && parseCssColor(darkColor(token[1], 'surface'));\n      if (color) {\n        painted = over(color, behind);\n        break;\n      }\n    }\n  }\n  const background = painted || behind;\n  const out = css.replace(COLOR_PROPERTY, (_, before, property, colon, value) => {\n    const role = roleOf(property);\n    const changed = value.replace(COLOR_TOKEN, (/** @type {string} */ whole, /** @type {string} */ color) =>\n      color ? darkColor(color, role, background) : whole\n    );\n    return `${before}${property}${colon}${changed}`;\n  });\n  return { css: out, background: painted };\n}\n\n/**\n * The colors of a CSS text in dark mode: a `style` attribute's declarations,\n * or a sheet (each rule on its own; behind it, the dark page).\n * @param {string} css @param {string|Rgba} [background]\n */\nexport function darkCss(css, background = PAGE) {\n  const behind = typeof background === 'string' ? parseCssColor(background) || PAGE : background;\n  if (!css.includes('{')) return darkDeclarations(css, behind).css;\n  return css.replace(/\\{([^{}]*)\\}/g, (_, body) => `{${darkDeclarations(body, behind).css}}`);\n}\n\nconst DARK_SHEET = `<style data-eb-dark>:root{color-scheme:dark}html,body{background-color:${DARK_PAGE};color:${DARK_TEXT}}</style>`;\n\nconst TOKEN = /<!--[\\s\\S]*?(?:-->|$)|<!doctype[^>]*>|<(\\/?)([a-z][\\w:-]*)((?:[^>\"']|\"[^\"]*\"|'[^']*')*)>/gi;\nconst ATTRIBUTE = /(\\s)([^\\s=/>\"']+)(\\s*=\\s*)(\"[^\"]*\"|'[^']*'|[^\\s\"'>]+)/g;\nconst VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);\n/** Elements whose end tag HTML lets a next one imply: what it closes, and up to which container. */\nconst CELL = { closes: ['td', 'th'], within: ['tr', 'table'] };\nconst IMPLIED_END = {\n  td: CELL,\n  th: CELL,\n  tr: { closes: ['tr'], within: ['table', 'tbody', 'thead', 'tfoot'] },\n  li: { closes: ['li'], within: ['ul', 'ol'] },\n  p: { closes: ['p'], within: ['div', 'td', 'th', 'li', 'table', 'body'] },\n  option: { closes: ['option'], within: ['select'] },\n};\n/** Legacy attributes holding a text color. */\nconst TEXT_ATTRIBUTES = new Set(['color', 'text', 'link', 'vlink', 'alink']);\n\n/** A legacy attribute color: `FFFFFF` (no #) is still a color there. @param {string} value */\nconst attributeColor = (value) => {\n  const trimmed = value.trim();\n  return /^([0-9a-f]{3}|[0-9a-f]{6})$/i.test(trimmed) ? `#${trimmed}` : trimmed;\n};\n\n/**\n * One opening tag in dark mode, on `behind`; and the background it paints.\n * @param {string} attributes @param {Rgba} behind\n */\nfunction darkTag(attributes, behind) {\n  /** @type {{name: string, value: string, quote: string}[]} */\n  const parsed = [];\n  for (const match of attributes.matchAll(ATTRIBUTE)) {\n    const raw = match[4];\n    const quote = raw[0] === '\"' || raw[0] === \"'\" ? raw[0] : '';\n    parsed.push({ name: match[2].toLowerCase(), value: quote ? raw.slice(1, -1) : raw, quote });\n  }\n  const bgcolor = parsed.find((a) => a.name === 'bgcolor');\n  const legacy = bgcolor && parseCssColor(darkColor(attributeColor(bgcolor.value), 'surface'));\n  // `style` paints over `bgcolor`, which paints over what is behind.\n  const base = legacy ? over(legacy, behind) : behind;\n  const style = parsed.find((a) => a.name === 'style');\n  const declared = style ? darkDeclarations(style.value, base) : null;\n  const painted = declared?.background || (legacy ? base : null);\n  const background = painted || behind;\n\n  const out = attributes.replace(ATTRIBUTE, (whole, space, name, equals, raw) => {\n    const key = name.toLowerCase();\n    const quote = raw[0] === '\"' || raw[0] === \"'\" ? raw[0] : '';\n    const value = quote ? raw.slice(1, -1) : raw;\n    let next = value;\n    if (key === 'style') next = darkDeclarations(value, base).css;\n    else if (key === 'bgcolor') next = recolorAttribute(value, 'surface', behind);\n    else if (TEXT_ATTRIBUTES.has(key)) next = recolorAttribute(value, 'text', background);\n    if (next === value) return whole;\n    // An unquoted value gets no space (`rgba(…)` written without one).\n    return `${space}${name}${equals}${quote}${quote ? next : next.replace(/\\s+/g, '')}${quote}`;\n  });\n  return { attributes: out, background: painted };\n}\n\n/** @param {string} value @param {'surface'|'text'} role @param {Rgba} background */\nfunction recolorAttribute(value, role, background) {\n  const color = attributeColor(value);\n  if (!parseCssColor(color)) return value;\n  const changed = darkColor(color, role, background);\n  return changed === color ? value : changed;\n}\n\n/**\n * A compiled email as a dark-mode app would show it.\n * @param {string} html\n */\nexport function simulateDarkMode(html) {\n  if (!html) return '';\n  const source = String(html);\n  /** @type {{tag: string, background: Rgba}[]} */\n  const stack = [];\n  const behind = () => stack.at(-1)?.background || PAGE;\n  /** Where the apps' sheet goes: after <head>, else after <html>, else after the doctype. */\n  let sheetAt = -1;\n  let sheetRank = 0;\n  let out = '';\n  let last = 0;\n  TOKEN.lastIndex = 0;\n  for (let match = TOKEN.exec(source); match; match = TOKEN.exec(source)) {\n    const [whole, closing, rawName, attributes] = match;\n    out += source.slice(last, match.index);\n    last = match.index + whole.length;\n    if (!rawName) {\n      // A comment or the doctype: as it is.\n      out += whole;\n      if (/^<!doctype/i.test(whole) && sheetRank < 1) [sheetAt, sheetRank] = [out.length, 1];\n      continue;\n    }\n    const tag = rawName.toLowerCase();\n    if (closing) {\n      const at = stack.findLastIndex((entry) => entry.tag === tag);\n      if (at !== -1) stack.length = at;\n      out += whole;\n      continue;\n    }\n    const implied = IMPLIED_END[/** @type {keyof typeof IMPLIED_END} */ (tag)];\n    if (implied) {\n      const open = stack.findLastIndex((entry) => implied.closes.includes(entry.tag));\n      if (open > stack.findLastIndex((entry) => implied.within.includes(entry.tag))) stack.length = open;\n    }\n    const { attributes: changed, background } = darkTag(attributes, behind());\n    out += `<${rawName}${changed}>`;\n    if (tag === 'head' && sheetRank < 3) [sheetAt, sheetRank] = [out.length, 3];\n    if (tag === 'html' && sheetRank < 2) [sheetAt, sheetRank] = [out.length, 2];\n    if (tag === 'style' || tag === 'script' || tag === 'title' || tag === 'textarea') {\n      // Raw text up to its end tag: a sheet is recolored, the rest kept.\n      const end = source.slice(last).search(new RegExp(`</${tag}\\\\s*>`, 'i'));\n      const body = end === -1 ? source.slice(last) : source.slice(last, last + end);\n      out += tag === 'style' ? darkCss(body) : body;\n      last += body.length;\n      TOKEN.lastIndex = last;\n      continue;\n    }\n    if (!VOID.has(tag) && !/\\/\\s*$/.test(attributes)) stack.push({ tag, background: background || behind() });\n  }\n  out += source.slice(last);\n  // The apps' own page and text, under whatever the email sets itself.\n  return sheetAt === -1 ? DARK_SHEET + out : out.slice(0, sheetAt) + DARK_SHEET + out.slice(sheetAt);\n}\n"],"mappings":";AAgCO,IAAM,YAAY;AACzB,IAAM,YAAY;AAGlB,IAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAKA,IAAM,SAAS,CAAC,GAAG,QAAS,EAAE,SAAS,GAAG,IAAK,WAAW,CAAC,IAAI,MAAO,MAAM,WAAW,CAAC;AAGjF,SAAS,cAAc,OAAO;AACnC,QAAM,QAAQ,MAAM,KAAK,EAAE,YAAY;AACvC,QAAM,MAAM;AAAA;AAAA,IAAyC;AAAA,EAAM,KAAK;AAChE,MAAI,QAAQ,6CAA6C,KAAK,GAAG;AACjE,MAAI,OAAO;AACT,QAAI,SAAS,MAAM,CAAC;AACpB,QAAI,OAAO,UAAU,EAAG,UAAS,CAAC,GAAG,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC,EAAE,KAAK,EAAE;AACtE,UAAM,IAAI,CAAuB,MAAM,SAAS,OAAO,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE;AAC1E,WAAO,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,OAAO,WAAW,IAAI,EAAE,CAAC,IAAI,MAAM,EAAE;AAAA,EAC9E;AACA,UAAQ,oFAAoF,KAAK,KAAK;AACtG,MAAI,OAAO;AACT,UAAM,UAAU,CAAuB,MAAM,KAAK,IAAI,KAAK,OAAO,GAAG,GAAG,CAAC;AACzE,UAAM,QAAQ,MAAM,CAAC,MAAM,SAAY,IAAI,OAAO,MAAM,CAAC,GAAG,CAAC;AAC7D,WAAO,EAAE,GAAG,QAAQ,MAAM,CAAC,CAAC,GAAG,GAAG,QAAQ,MAAM,CAAC,CAAC,GAAG,GAAG,QAAQ,MAAM,CAAC,CAAC,GAAG,GAAG,KAAK,IAAI,GAAG,KAAK,EAAE;AAAA,EACnG;AACA,UAAQ,wFAAwF,KAAK,KAAK;AAC1G,MAAI,OAAO;AACT,UAAM,QAAQ,MAAM,CAAC,MAAM,SAAY,IAAI,KAAK,IAAI,GAAG,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC;AAC1E,UAAM,IAAI,KAAK,IAAI,KAAK,WAAW,MAAM,CAAC,CAAC,CAAC,IAAI;AAChD,UAAM,IAAI,KAAK,IAAI,KAAK,WAAW,MAAM,CAAC,CAAC,CAAC,IAAI;AAChD,WAAO,EAAE,GAAG,SAAS,WAAW,MAAM,CAAC,CAAC,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,MAAM;AAAA,EACnE;AACA,SAAO;AACT;AAGO,SAAS,UAAU,EAAE,GAAG,GAAG,EAAE,GAAG;AACrC,QAAM,SAAS,CAAuB,MAAM;AAC1C,UAAM,IAAI,IAAI;AACd,WAAO,KAAK,UAAU,IAAI,UAAU,IAAI,SAAS,UAAU;AAAA,EAC7D;AACA,SAAO,SAAS,OAAO,CAAC,IAAI,SAAS,OAAO,CAAC,IAAI,SAAS,OAAO,CAAC;AACpE;AAGO,SAAS,SAAS,GAAG,GAAG;AAC7B,QAAM,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACvE,UAAQ,QAAQ,SAAS,OAAO;AAClC;AAGA,SAAS,MAAM,EAAE,GAAG,GAAG,EAAE,GAAG;AAC1B,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,KAAK,IAAI,GAAG;AAC5C,QAAM,MAAM,KAAK,IAAI,GAAG,GAAG,CAAC;AAC5B,QAAM,MAAM,KAAK,IAAI,GAAG,GAAG,CAAC;AAC5B,QAAM,KAAK,MAAM,OAAO;AACxB,MAAI,QAAQ,IAAK,QAAO,CAAC,GAAG,GAAG,CAAC;AAChC,QAAM,IAAI,MAAM;AAChB,QAAM,IAAI,IAAI,MAAM,KAAK,IAAI,MAAM,OAAO,KAAK,MAAM;AACrD,QAAM,IAAI,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,KAAK,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI;AAClG,SAAO,CAAC,IAAI,IAAI,GAAG,CAAC;AACtB;AAGA,SAAS,SAAS,GAAG,GAAG,GAAG;AACzB,QAAM,IAAI,CAAuB,OAAO,IAAI,IAAI,MAAM;AACtD,QAAM,IAAI,IAAI,KAAK,IAAI,GAAG,IAAI,CAAC;AAC/B,QAAM,IAAI,CAAuB,MAAM,KAAK,MAAM,OAAO,IAAI,IAAI,KAAK,IAAI,IAAI,KAAK,IAAI,EAAE,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE;AAC/G,SAAO,EAAE,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE;AACrC;AAGA,SAAS,QAAQ,GAAG,GAAG,GAAG,GAAG;AAC3B,QAAM,EAAE,GAAG,GAAG,EAAE,IAAI,SAAS,GAAG,GAAG,CAAC;AACpC,MAAI,IAAI,EAAG,QAAO,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,MAAM,IAAI,GAAG,IAAI,GAAG;AACrE,SAAO,IAAI,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AAC3E;AAGA,SAAS,KAAK,KAAK,QAAQ;AACzB,QAAM,MAAM,CAA4B,MAAM,IAAI,CAAC,IAAI,IAAI,IAAI,OAAO,CAAC,KAAK,IAAI,IAAI;AACpF,SAAO,EAAE,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE;AACvD;AAEA,IAAM;AAAA;AAAA,EAA4B,cAAc,SAAS;AAAA;AAGzD,SAAS,YAAY,OAAO,OAAO;AACjC,QAAM,MAAM,UAAU,KAAK;AAC3B,QAAM,CAAC,GAAG,CAAC,IAAI,MAAM,KAAK;AAE1B,SAAO,MAAM,OAAO,QAAQ,GAAG,IAAI,KAAK,QAAQ,IAAI,OAAO,MAAM,MAAM,CAAC,IAAI;AAC9E;AAGA,SAAS,SAAS,OAAO,OAAO,YAAY;AAC1C,MAAI,UAAU,KAAK,KAAK,IAAK,QAAO;AACpC,QAAM,CAAC,GAAG,CAAC,IAAI,MAAM,KAAK;AAC1B,QAAM,YAAY,QAAQ,GAAG,IAAI,KAAK,OAAO,UAAU,KAAK,IAAI,KAAK,MAAM,CAAC;AAE5E,QAAM,QAAQ,KAAK,OAAO,UAAU;AACpC,SAAO,SAAS,OAAO,UAAU,KAAK,SAAS;AAAA;AAAA,IAA0B,cAAc,SAAS;AAAA,IAAI;AAAA,EAAU,GAAG,UAAU,IAAI,QAAQ;AACzI;AASO,SAAS,UAAU,OAAO,MAAM,aAAa,MAAM;AACxD,QAAM,QAAQ,cAAc,KAAK;AACjC,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,SAAS,UAAW,QAAO,YAAY,OAAO,KAAK;AACvD,QAAM,SAAS,OAAO,eAAe,WAAW,cAAc,UAAU,KAAK,OAAO;AACpF,MAAI,SAAS,UAAU,UAAU,KAAK,IAAI,KAAM,QAAO,YAAY,OAAO,KAAK;AAC/E,SAAO,SAAS,OAAO,OAAO,MAAM;AACtC;AAEA,IAAM,QAAQ,sDAAsD,OAAO,KAAK,KAAK,EAAE,KAAK,GAAG,CAAC;AAChG,IAAM,cAAc,IAAI,OAAO,mBAAmB,KAAK,KAAK,IAAI;AAChE,IAAM,iBACJ;AAGF,IAAM,SAAS,CAAC,aAAa;AAC3B,QAAM,OAAO,SAAS,YAAY;AAClC,SAAO,SAAS,UAAU,SAAS,KAAK,WAAW,YAAY,IAAI,YAAY;AACjF;AAOA,SAAS,iBAAiB,KAAK,QAAQ;AAErC,MAAI,UAAU;AACd,aAAW,SAAS,IAAI,SAAS,cAAc,GAAG;AAChD,QAAI,OAAO,MAAM,CAAC,CAAC,MAAM,UAAW;AACpC,eAAW,SAAS,MAAM,CAAC,EAAE,SAAS,WAAW,GAAG;AAClD,YAAM,QAAQ,MAAM,CAAC,KAAK,cAAc,UAAU,MAAM,CAAC,GAAG,SAAS,CAAC;AACtE,UAAI,OAAO;AACT,kBAAU,KAAK,OAAO,MAAM;AAC5B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,QAAM,aAAa,WAAW;AAC9B,QAAM,MAAM,IAAI,QAAQ,gBAAgB,CAAC,GAAG,QAAQ,UAAU,OAAO,UAAU;AAC7E,UAAM,OAAO,OAAO,QAAQ;AAC5B,UAAM,UAAU,MAAM;AAAA,MAAQ;AAAA,MAAa,CAAuB,OAA6B,UAC7F,QAAQ,UAAU,OAAO,MAAM,UAAU,IAAI;AAAA,IAC/C;AACA,WAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,OAAO;AAAA,EAC/C,CAAC;AACD,SAAO,EAAE,KAAK,KAAK,YAAY,QAAQ;AACzC;AAOO,SAAS,QAAQ,KAAK,aAAa,MAAM;AAC9C,QAAM,SAAS,OAAO,eAAe,WAAW,cAAc,UAAU,KAAK,OAAO;AACpF,MAAI,CAAC,IAAI,SAAS,GAAG,EAAG,QAAO,iBAAiB,KAAK,MAAM,EAAE;AAC7D,SAAO,IAAI,QAAQ,iBAAiB,CAAC,GAAG,SAAS,IAAI,iBAAiB,MAAM,MAAM,EAAE,GAAG,GAAG;AAC5F;AAEA,IAAM,aAAa,0EAA0E,SAAS,UAAU,SAAS;AAEzH,IAAM,QAAQ;AACd,IAAM,YAAY;AAClB,IAAM,OAAO,oBAAI,IAAI,CAAC,QAAQ,QAAQ,MAAM,OAAO,SAAS,MAAM,OAAO,SAAS,QAAQ,QAAQ,UAAU,SAAS,KAAK,CAAC;AAE3H,IAAM,OAAO,EAAE,QAAQ,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,OAAO,EAAE;AAC7D,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,SAAS,SAAS,SAAS,OAAO,EAAE;AAAA,EACnE,IAAI,EAAE,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,MAAM,IAAI,EAAE;AAAA,EAC3C,GAAG,EAAE,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,OAAO,MAAM,MAAM,MAAM,SAAS,MAAM,EAAE;AAAA,EACvE,QAAQ,EAAE,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,QAAQ,EAAE;AACnD;AAEA,IAAM,kBAAkB,oBAAI,IAAI,CAAC,SAAS,QAAQ,QAAQ,SAAS,OAAO,CAAC;AAG3E,IAAM,iBAAiB,CAAC,UAAU;AAChC,QAAM,UAAU,MAAM,KAAK;AAC3B,SAAO,+BAA+B,KAAK,OAAO,IAAI,IAAI,OAAO,KAAK;AACxE;AAMA,SAAS,QAAQ,YAAY,QAAQ;AAEnC,QAAM,SAAS,CAAC;AAChB,aAAW,SAAS,WAAW,SAAS,SAAS,GAAG;AAClD,UAAM,MAAM,MAAM,CAAC;AACnB,UAAM,QAAQ,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,IAAI;AAC1D,WAAO,KAAK,EAAE,MAAM,MAAM,CAAC,EAAE,YAAY,GAAG,OAAO,QAAQ,IAAI,MAAM,GAAG,EAAE,IAAI,KAAK,MAAM,CAAC;AAAA,EAC5F;AACA,QAAM,UAAU,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,SAAS;AACvD,QAAM,SAAS,WAAW,cAAc,UAAU,eAAe,QAAQ,KAAK,GAAG,SAAS,CAAC;AAE3F,QAAM,OAAO,SAAS,KAAK,QAAQ,MAAM,IAAI;AAC7C,QAAM,QAAQ,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO;AACnD,QAAM,WAAW,QAAQ,iBAAiB,MAAM,OAAO,IAAI,IAAI;AAC/D,QAAM,UAAU,UAAU,eAAe,SAAS,OAAO;AACzD,QAAM,aAAa,WAAW;AAE9B,QAAM,MAAM,WAAW,QAAQ,WAAW,CAAC,OAAO,OAAO,MAAM,QAAQ,QAAQ;AAC7E,UAAM,MAAM,KAAK,YAAY;AAC7B,UAAM,QAAQ,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,IAAI;AAC1D,UAAM,QAAQ,QAAQ,IAAI,MAAM,GAAG,EAAE,IAAI;AACzC,QAAI,OAAO;AACX,QAAI,QAAQ,QAAS,QAAO,iBAAiB,OAAO,IAAI,EAAE;AAAA,aACjD,QAAQ,UAAW,QAAO,iBAAiB,OAAO,WAAW,MAAM;AAAA,aACnE,gBAAgB,IAAI,GAAG,EAAG,QAAO,iBAAiB,OAAO,QAAQ,UAAU;AACpF,QAAI,SAAS,MAAO,QAAO;AAE3B,WAAO,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,OAAO,KAAK,QAAQ,QAAQ,EAAE,CAAC,GAAG,KAAK;AAAA,EAC3F,CAAC;AACD,SAAO,EAAE,YAAY,KAAK,YAAY,QAAQ;AAChD;AAGA,SAAS,iBAAiB,OAAO,MAAM,YAAY;AACjD,QAAM,QAAQ,eAAe,KAAK;AAClC,MAAI,CAAC,cAAc,KAAK,EAAG,QAAO;AAClC,QAAM,UAAU,UAAU,OAAO,MAAM,UAAU;AACjD,SAAO,YAAY,QAAQ,QAAQ;AACrC;AAMO,SAAS,iBAAiB,MAAM;AACrC,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,SAAS,OAAO,IAAI;AAE1B,QAAM,QAAQ,CAAC;AACf,QAAM,SAAS,MAAM,MAAM,GAAG,EAAE,GAAG,cAAc;AAEjD,MAAI,UAAU;AACd,MAAI,YAAY;AAChB,MAAI,MAAM;AACV,MAAI,OAAO;AACX,QAAM,YAAY;AAClB,WAAS,QAAQ,MAAM,KAAK,MAAM,GAAG,OAAO,QAAQ,MAAM,KAAK,MAAM,GAAG;AACtE,UAAM,CAAC,OAAO,SAAS,SAAS,UAAU,IAAI;AAC9C,WAAO,OAAO,MAAM,MAAM,MAAM,KAAK;AACrC,WAAO,MAAM,QAAQ,MAAM;AAC3B,QAAI,CAAC,SAAS;AAEZ,aAAO;AACP,UAAI,cAAc,KAAK,KAAK,KAAK,YAAY,EAAG,EAAC,SAAS,SAAS,IAAI,CAAC,IAAI,QAAQ,CAAC;AACrF;AAAA,IACF;AACA,UAAM,MAAM,QAAQ,YAAY;AAChC,QAAI,SAAS;AACX,YAAM,KAAK,MAAM,cAAc,CAAC,UAAU,MAAM,QAAQ,GAAG;AAC3D,UAAI,OAAO,GAAI,OAAM,SAAS;AAC9B,aAAO;AACP;AAAA,IACF;AACA,UAAM,UAAU;AAAA;AAAA,MAAqD;AAAA,IAAI;AACzE,QAAI,SAAS;AACX,YAAM,OAAO,MAAM,cAAc,CAAC,UAAU,QAAQ,OAAO,SAAS,MAAM,GAAG,CAAC;AAC9E,UAAI,OAAO,MAAM,cAAc,CAAC,UAAU,QAAQ,OAAO,SAAS,MAAM,GAAG,CAAC,EAAG,OAAM,SAAS;AAAA,IAChG;AACA,UAAM,EAAE,YAAY,SAAS,WAAW,IAAI,QAAQ,YAAY,OAAO,CAAC;AACxE,WAAO,IAAI,OAAO,GAAG,OAAO;AAC5B,QAAI,QAAQ,UAAU,YAAY,EAAG,EAAC,SAAS,SAAS,IAAI,CAAC,IAAI,QAAQ,CAAC;AAC1E,QAAI,QAAQ,UAAU,YAAY,EAAG,EAAC,SAAS,SAAS,IAAI,CAAC,IAAI,QAAQ,CAAC;AAC1E,QAAI,QAAQ,WAAW,QAAQ,YAAY,QAAQ,WAAW,QAAQ,YAAY;AAEhF,YAAM,MAAM,OAAO,MAAM,IAAI,EAAE,OAAO,IAAI,OAAO,KAAK,GAAG,SAAS,GAAG,CAAC;AACtE,YAAM,OAAO,QAAQ,KAAK,OAAO,MAAM,IAAI,IAAI,OAAO,MAAM,MAAM,OAAO,GAAG;AAC5E,aAAO,QAAQ,UAAU,QAAQ,IAAI,IAAI;AACzC,cAAQ,KAAK;AACb,YAAM,YAAY;AAClB;AAAA,IACF;AACA,QAAI,CAAC,KAAK,IAAI,GAAG,KAAK,CAAC,SAAS,KAAK,UAAU,EAAG,OAAM,KAAK,EAAE,KAAK,YAAY,cAAc,OAAO,EAAE,CAAC;AAAA,EAC1G;AACA,SAAO,OAAO,MAAM,IAAI;AAExB,SAAO,YAAY,KAAK,aAAa,MAAM,IAAI,MAAM,GAAG,OAAO,IAAI,aAAa,IAAI,MAAM,OAAO;AACnG;","names":[]}

package/dist/index.js

@@ -1,66 +1,86 @@
 import {
+  EMPTY_MJML,
+  ENGINE_NAME,
   EmailBuilder,
   EmailBuilderBoundary,
   EmailCanvas,
   createDefaultEmailEditor,
   createEmailEditor,
-  createGrapesJsAdapter,
+  createNativeAdapter,
   createRegistry,
   emailBlocks,
   emailBuilderFeatures,
   isFeatureEnabled
-} from "./chunk-ILRAQTHS.js";
+} from "./chunk-PB7YZ3WP.js";
 import {
   TemplateLibrary
-} from "./chunk-JOC752I3.js";
+} from "./chunk-6D3SLT5W.js";
 import {
   STARTER_MJML,
-  StorageError,
   TEMPLATE_GALLERY,
-  UiProvider,
   buildGallery,
-  createHttpStorage,
-  createMemoryStorage,
   createStarterMjml,
-  useT,
-  useUi,
   withPlaceholderImages
-} from "./chunk-ZSUHOCCE.js";
+} from "./chunk-3LKF4QBL.js";
 import {
   applyVariables,
   applyVariablesToText,
   unknownVariables,
   usedVariables
-} from "./chunk-BVOVAEEJ.js";
-import "./chunk-57CTQNTK.js";
+} from "./chunk-LYMJ2TBX.js";
+import "./chunk-ECHGJZ2W.js";
+import {
+  simulateDarkMode
+} from "./chunk-UFKCLU2D.js";
+import "./chunk-KXJJSVN5.js";
+import {
+  StorageError,
+  UiProvider,
+  createHttpStorage,
+  createMemoryStorage,
+  useT,
+  useUi
+} from "./chunk-LXR4QTGP.js";
 import {
-  CUSTOM_GROUP,
-  DEFAULT_ASSETS_PATH,
-  DEFAULT_VARIABLES,
   EMAIL_BUILDER_VERSION,
   EMAIL_DEVICES,
   EMAIL_DOCUMENT_SCHEMA_VERSION,
   EmailDocumentError,
+  createDocument,
+  readDocument,
+  serializeDocument
+} from "./chunk-7U6BAKM7.js";
+import "./chunk-2RZHGAH5.js";
+import "./chunk-5SASKCUC.js";
+import {
+  CUSTOM_GROUP,
+  DEFAULT_ASSETS_PATH,
+  DEFAULT_VARIABLES,
   LOCALES,
   absoluteAssetUrls,
-  createDocument,
+  applyBrand,
+  brandedSender,
+  cleanBrand,
   createTranslator,
   defineVariables,
   isAssetPath,
   keyFromLabel,
   mergeVariables,
-  readDocument,
-  serializeDocument,
+  messagesOf,
+  parseMjml,
+  parseMjmlFragment,
+  serializeMjml,
   tokenOf,
   translatorFor,
   validateCustomVariable
-} from "./chunk-3M36VVXS.js";
+} from "./chunk-DFNHICTF.js";
 
 // src/ui/EmailStudio.jsx
 import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 function EmailStudio({
   storage: injectedStorage,
+  ai,
   locale = "en",
   messages,
   onNotify,
@@ -80,6 +100,7 @@ function EmailStudio({
       EmailBuilder,
       {
         ...shared,
+        ai,
         templates: [],
         ...builderProps,
         templateId: session.templateId,
@@ -119,6 +140,8 @@ export {
   EMAIL_BUILDER_VERSION,
   EMAIL_DEVICES,
   EMAIL_DOCUMENT_SCHEMA_VERSION,
+  EMPTY_MJML,
+  ENGINE_NAME,
   EmailBuilder,
   EmailBuilderBoundary,
   EmailCanvas,
@@ -131,15 +154,18 @@ export {
   TemplateLibrary,
   UiProvider,
   absoluteAssetUrls,
+  applyBrand,
   applyVariables,
   applyVariablesToText,
+  brandedSender,
   buildGallery,
+  cleanBrand,
   createDefaultEmailEditor,
   createDocument,
   createEmailEditor,
-  createGrapesJsAdapter,
   createHttpStorage,
   createMemoryStorage,
+  createNativeAdapter,
   createRegistry,
   createStarterMjml,
   createTranslator,
@@ -150,8 +176,13 @@ export {
   isFeatureEnabled,
   keyFromLabel,
   mergeVariables,
+  messagesOf,
+  parseMjml,
+  parseMjmlFragment,
   readDocument,
   serializeDocument,
+  serializeMjml,
+  simulateDarkMode,
   tokenOf,
   translatorFor,
   unknownVariables,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ui/EmailStudio.jsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { createHttpStorage } from '../storage/client.js';\nimport EmailBuilder from './EmailBuilder.jsx';\nimport TemplateLibrary from './library/TemplateLibrary.jsx';\n\n/**\n * EMAIL STUDIO — the two screens wired together.\n *\n *   TemplateLibrary ── Edit / New template / Start from this base ──▶ EmailBuilder\n *         ▲                                                              │\n *         └──────────────────────────── Back ───────────────────────────┘\n *\n * Nothing here that a host could not write itself: both screens are exported\n * on their own, and an application that only wants the editor mounts\n * `EmailBuilder` alone (or the library alone, opening its own editor).\n *\n * Shared props go to both screens — except `templates` (the bases), which\n * only the library shows: the editor gets `[]`, so no second gallery replaces\n * the email being edited (`builderProps.templates` brings it back).\n * `libraryProps` / `builderProps` reach only one. Coming back from the editor, the library selects the template that was\n * just edited or created.\n *\n * @param {{\n *   storage?: import('../storage/client.js').TemplateStorage,\n *   locale?: string,\n *   messages?: Record<string, string>,\n *   onNotify?: (level: 'success'|'info'|'warning'|'error', message: string) => void,\n *   sender?: import('../features/templates/starter.js').StarterSender,\n *   templates?: import('../features/templates/gallery.js').GalleryTemplate[],\n *   onClose?: () => void,\n *   libraryProps?: object,\n *   builderProps?: object,\n *   className?: string,\n * }} props  `onClose`: shows the library's close button.\n */\nexport default function EmailStudio({\n  storage: injectedStorage,\n  locale = 'en',\n  messages,\n  onNotify,\n  sender,\n  templates,\n  onClose,\n  libraryProps,\n  builderProps,\n  className,\n}) {\n  const storage = useMemo(() => injectedStorage || createHttpStorage(), [injectedStorage]);\n  /** null = library; else the editor session: {key, templateId, start}. */\n  const [session, setSession] = useState(null);\n  const [lastId, setLastId] = useState(null);\n  const shared = { storage, locale, messages, onNotify, sender, templates, className };\n\n  if (session) {\n    return (\n      <EmailBuilder\n        key={session.key}\n        {...shared}\n        // The bases are picked in the bank: no second gallery in the editor,\n        // where picking one would replace the email being edited.\n        templates={[]}\n        {...builderProps}\n        templateId={session.templateId}\n        initialMjml={session.start?.mjml}\n        initialMeta={session.start?.meta}\n        onSaved={(template) => {\n          if (template?.id != null) setLastId(template.id);\n          builderProps?.onSaved?.(template);\n        }}\n        onClose={() => {\n          setSession(null);\n          builderProps?.onClose?.();\n        }}\n      />\n    );\n  }\n\n  return (\n    <TemplateLibrary\n      {...shared}\n      {...libraryProps}\n      selectedId={lastId}\n      onClose={onClose}\n      onEdit={(template) => {\n        setLastId(template.id);\n        setSession({ key: Date.now(), templateId: template.id, start: null });\n      }}\n      onCreate={(start) => setSession({ key: Date.now(), templateId: null, start })}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,SAAS,gBAAgB;AAuD5B;AApBS,SAAR,YAA6B;AAAA,EAClC,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,UAAU,QAAQ,MAAM,mBAAmB,kBAAkB,GAAG,CAAC,eAAe,CAAC;AAEvF,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,QAAM,SAAS,EAAE,SAAS,QAAQ,UAAU,UAAU,QAAQ,WAAW,UAAU;AAEnF,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QAEE,GAAG;AAAA,QAGJ,WAAW,CAAC;AAAA,QACX,GAAG;AAAA,QACJ,YAAY,QAAQ;AAAA,QACpB,aAAa,QAAQ,OAAO;AAAA,QAC5B,aAAa,QAAQ,OAAO;AAAA,QAC5B,SAAS,CAAC,aAAa;AACrB,cAAI,UAAU,MAAM,KAAM,WAAU,SAAS,EAAE;AAC/C,wBAAc,UAAU,QAAQ;AAAA,QAClC;AAAA,QACA,SAAS,MAAM;AACb,qBAAW,IAAI;AACf,wBAAc,UAAU;AAAA,QAC1B;AAAA;AAAA,MAhBK,QAAQ;AAAA,IAiBf;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ;AAAA,MACA,QAAQ,CAAC,aAAa;AACpB,kBAAU,SAAS,EAAE;AACrB,mBAAW,EAAE,KAAK,KAAK,IAAI,GAAG,YAAY,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,MACtE;AAAA,MACA,UAAU,CAAC,UAAU,WAAW,EAAE,KAAK,KAAK,IAAI,GAAG,YAAY,MAAM,MAAM,CAAC;AAAA;AAAA,EAC9E;AAEJ;","names":[]}
+{"version":3,"sources":["../src/ui/EmailStudio.jsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { createHttpStorage } from '../storage/client.js';\nimport EmailBuilder from './EmailBuilder.jsx';\nimport TemplateLibrary from './library/TemplateLibrary.jsx';\n\n/**\n * EMAIL STUDIO — the two screens wired together.\n *\n *   TemplateLibrary ── Edit / New template / Start from this base ──▶ EmailBuilder\n *         ▲                                                              │\n *         └──────────────────────────── Back ───────────────────────────┘\n *\n * Nothing here that a host could not write itself: both screens are exported\n * on their own, and an application that only wants the editor mounts\n * `EmailBuilder` alone (or the library alone, opening its own editor).\n *\n * Shared props go to both screens — except `templates` (the bases), which\n * only the library shows: the editor gets `[]`, so no second gallery replaces\n * the email being edited (`builderProps.templates` brings it back).\n * `libraryProps` / `builderProps` reach only one. Coming back from the editor, the library selects the template that was\n * just edited or created.\n *\n * `ai` (`createAi()` from `best-email-builder/ai`) goes to the editor only:\n * without it, the editor has no AI button at all.\n *\n * @param {{\n *   storage?: import('../storage/client.js').TemplateStorage,\n *   ai?: import('../ai/createAi.js').EmailBuilderAi|null,\n *   locale?: string,\n *   messages?: Record<string, string>,\n *   onNotify?: (level: 'success'|'info'|'warning'|'error', message: string) => void,\n *   sender?: import('../features/templates/starter.js').StarterSender,\n *   templates?: import('../features/templates/gallery.js').GalleryTemplate[],\n *   onClose?: () => void,\n *   libraryProps?: object,\n *   builderProps?: object,\n *   className?: string,\n * }} props  `onClose`: shows the library's close button.\n */\nexport default function EmailStudio({\n  storage: injectedStorage,\n  ai,\n  locale = 'en',\n  messages,\n  onNotify,\n  sender,\n  templates,\n  onClose,\n  libraryProps,\n  builderProps,\n  className,\n}) {\n  const storage = useMemo(() => injectedStorage || createHttpStorage(), [injectedStorage]);\n  /** null = library; else the editor session: {key, templateId, start}. */\n  const [session, setSession] = useState(null);\n  const [lastId, setLastId] = useState(null);\n  const shared = { storage, locale, messages, onNotify, sender, templates, className };\n\n  if (session) {\n    return (\n      <EmailBuilder\n        key={session.key}\n        {...shared}\n        ai={ai}\n        // The bases are picked in the bank: no second gallery in the editor,\n        // where picking one would replace the email being edited.\n        templates={[]}\n        {...builderProps}\n        templateId={session.templateId}\n        initialMjml={session.start?.mjml}\n        initialMeta={session.start?.meta}\n        onSaved={(template) => {\n          if (template?.id != null) setLastId(template.id);\n          builderProps?.onSaved?.(template);\n        }}\n        onClose={() => {\n          setSession(null);\n          builderProps?.onClose?.();\n        }}\n      />\n    );\n  }\n\n  return (\n    <TemplateLibrary\n      {...shared}\n      {...libraryProps}\n      selectedId={lastId}\n      onClose={onClose}\n      onEdit={(template) => {\n        setLastId(template.id);\n        setSession({ key: Date.now(), templateId: template.id, start: null });\n      }}\n      onCreate={(start) => setSession({ key: Date.now(), templateId: null, start })}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,SAAS,gBAAgB;AA4D5B;AArBS,SAAR,YAA6B;AAAA,EAClC,SAAS;AAAA,EACT;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG;AACD,QAAM,UAAU,QAAQ,MAAM,mBAAmB,kBAAkB,GAAG,CAAC,eAAe,CAAC;AAEvF,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,QAAM,SAAS,EAAE,SAAS,QAAQ,UAAU,UAAU,QAAQ,WAAW,UAAU;AAEnF,MAAI,SAAS;AACX,WACE;AAAA,MAAC;AAAA;AAAA,QAEE,GAAG;AAAA,QACJ;AAAA,QAGA,WAAW,CAAC;AAAA,QACX,GAAG;AAAA,QACJ,YAAY,QAAQ;AAAA,QACpB,aAAa,QAAQ,OAAO;AAAA,QAC5B,aAAa,QAAQ,OAAO;AAAA,QAC5B,SAAS,CAAC,aAAa;AACrB,cAAI,UAAU,MAAM,KAAM,WAAU,SAAS,EAAE;AAC/C,wBAAc,UAAU,QAAQ;AAAA,QAClC;AAAA,QACA,SAAS,MAAM;AACb,qBAAW,IAAI;AACf,wBAAc,UAAU;AAAA,QAC1B;AAAA;AAAA,MAjBK,QAAQ;AAAA,IAkBf;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,YAAY;AAAA,MACZ;AAAA,MACA,QAAQ,CAAC,aAAa;AACpB,kBAAU,SAAS,EAAE;AACrB,mBAAW,EAAE,KAAK,KAAK,IAAI,GAAG,YAAY,SAAS,IAAI,OAAO,KAAK,CAAC;AAAA,MACtE;AAAA,MACA,UAAU,CAAC,UAAU,WAAW,EAAE,KAAK,KAAK,IAAI,GAAG,YAAY,MAAM,MAAM,CAAC;AAAA;AAAA,EAC9E;AAEJ;","names":[]}

package/dist/library.js

@@ -1,20 +1,25 @@
 import {
   TemplateLibrary
-} from "./chunk-JOC752I3.js";
+} from "./chunk-6D3SLT5W.js";
 import {
-  StorageError,
   TEMPLATE_GALLERY,
   buildGallery,
-  createHttpStorage,
-  createMemoryStorage,
   withPlaceholderImages
-} from "./chunk-ZSUHOCCE.js";
+} from "./chunk-3LKF4QBL.js";
+import "./chunk-UFKCLU2D.js";
+import {
+  StorageError,
+  createHttpStorage,
+  createMemoryStorage
+} from "./chunk-LXR4QTGP.js";
+import {
+  EMAIL_BUILDER_VERSION
+} from "./chunk-7U6BAKM7.js";
 import {
-  EMAIL_BUILDER_VERSION,
   LOCALES,
   createTranslator,
   translatorFor
-} from "./chunk-3M36VVXS.js";
+} from "./chunk-DFNHICTF.js";
 export {
   EMAIL_BUILDER_VERSION,
   LOCALES,