@menapo/email 0.0.0-stage → 0.1.0

package/dist/vite.js

@@ -0,0 +1,957 @@
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { join, relative } from "node:path";
+//#region src/vite/caniemail.ts
+const CHECKS = {
+	"display:flex": {
+		clients: "Outlook (Windows)",
+		fix: "Write a flex row or column of elements with no wrapping and start alignment (render() makes it a table), or use a <table>."
+	},
+	"display:grid": {
+		clients: "Outlook (Windows)",
+		fix: "Use a flex row of elements, which render() makes a table row, or a <table>."
+	},
+	position: {
+		clients: "Gmail (web), Gmail (iOS), Gmail (Android), Outlook (Windows)",
+		fix: "Lay it out in the flow: a flex row, padding or margins."
+	},
+	"flex-wrap": {
+		clients: "Gmail (web), Gmail (iOS), Gmail (Android), Outlook (Windows), Yahoo (web)",
+		fix: "Drop the wrapping: render() makes a non-wrapping flex row a table row."
+	},
+	"justify-content": {
+		clients: "Gmail (web), Gmail (iOS), Gmail (Android), Outlook (Windows), Yahoo (web)",
+		fix: "Give the items widths, or set text-align on the container."
+	},
+	transform: {
+		clients: "Gmail (web), Gmail (iOS), Gmail (Android), Outlook (Windows), Outlook.com, Outlook (Mac), Yahoo (web)",
+		fix: "Use an image for a rotated or scaled element."
+	},
+	"aspect-ratio": {
+		clients: "Gmail (web), Gmail (iOS), Gmail (Android), Outlook (Windows), Outlook.com, Outlook (Mac), Yahoo (web)",
+		fix: "Give the element a width and a height."
+	},
+	"object-fit": {
+		clients: "Outlook (Windows), Yahoo (web)",
+		fix: "Crop the image to its displayed size before sending it."
+	},
+	gap: {
+		clients: "Outlook (Windows), Yahoo (web)",
+		fix: "Put the gap on a flex row or column, which render() makes cell padding, or use margins."
+	},
+	"background-image": {
+		clients: "Outlook (Windows)",
+		fix: "Keep a background color as well, so the text stays readable where the image is dropped."
+	},
+	"var()": {
+		clients: "Gmail (web), Gmail (iOS), Gmail (Android), Outlook (Windows), Outlook.com, Outlook (Mac), Yahoo (web)",
+		fix: "Use a vicss token or a literal value; a runtime value goes in the element's own style."
+	}
+};
+//#endregion
+//#region src/vite/lower.ts
+/**
+* Values mail clients read (PLAN D6), at build time: `rem` as px at a 16 px
+* root, `calc()` of literals folded, `oklch()` and `oklab()` as hex (or
+* `rgba()` with alpha). Anything else stays as written; the dev checks warn
+* about what is left (`var()`).
+*/
+const fmt = (n) => String(Math.round(n * 1e5) / 1e5);
+/** A `calc()` body of numbers with one unit, or undefined when it holds anything else. */
+function evaluate(expr) {
+	const tokens = expr.match(/\d*\.?\d+(?:e[+-]?\d+)?[a-z%]*|[-+*/()]/gi);
+	if (!tokens || tokens.join("") !== expr.replace(/\s+/g, "")) return void 0;
+	let i = 0;
+	const primary = () => {
+		const t = tokens[i++];
+		if (t === "(") {
+			const v = sum();
+			return tokens[i++] === ")" ? v : void 0;
+		}
+		if (t === "-") {
+			const v = primary();
+			return v && {
+				n: -v.n,
+				unit: v.unit
+			};
+		}
+		const m = t && /^(\d*\.?\d+(?:e[+-]?\d+)?)([a-z%]*)$/i.exec(t);
+		return m ? {
+			n: Number(m[1]),
+			unit: m[2].toLowerCase()
+		} : void 0;
+	};
+	const product = () => {
+		let a = primary();
+		while (a && (tokens[i] === "*" || tokens[i] === "/")) {
+			const op = tokens[i++];
+			const b = primary();
+			if (!b) return void 0;
+			if (op === "*") {
+				if (a.unit && b.unit) return void 0;
+				a = {
+					n: a.n * b.n,
+					unit: a.unit || b.unit
+				};
+			} else {
+				if (b.unit || b.n === 0) return void 0;
+				a = {
+					n: a.n / b.n,
+					unit: a.unit
+				};
+			}
+		}
+		return a;
+	};
+	const sum = () => {
+		let a = product();
+		while (a && (tokens[i] === "+" || tokens[i] === "-")) {
+			const op = tokens[i++];
+			const b = product();
+			if (!b || a.unit !== b.unit && a.n !== 0 && b.n !== 0) return void 0;
+			a = {
+				n: op === "+" ? a.n + b.n : a.n - b.n,
+				unit: a.unit || b.unit
+			};
+		}
+		return a;
+	};
+	const v = sum();
+	return i === tokens.length ? v : void 0;
+}
+function hex(r, g, b, alpha) {
+	const channel = (c) => {
+		const linear = Math.min(1, Math.max(0, c));
+		const srgb = linear <= .0031308 ? 12.92 * linear : 1.055 * linear ** (1 / 2.4) - .055;
+		return Math.round(srgb * 255);
+	};
+	const [R, G, B] = [
+		channel(r),
+		channel(g),
+		channel(b)
+	];
+	if (alpha < 1) return `rgba(${R},${G},${B},${fmt(alpha)})`;
+	return `#${[
+		R,
+		G,
+		B
+	].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+/** OKLab to sRGB (Björn Ottosson's matrices), clipped to the gamut. */
+function fromOklab(L, a, b, alpha) {
+	const l = (L + .3963377774 * a + .2158037573 * b) ** 3;
+	const m = (L - .1055613458 * a - .0638541728 * b) ** 3;
+	const s = (L - .0894841775 * a - 1.291485548 * b) ** 3;
+	return hex(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s, -1.2684380046 * l + 2.6097574011 * m - .3413193965 * s, -.0041960863 * l - .7034186147 * m + 1.707614701 * s, alpha);
+}
+const num = (t, percentOf = 1) => t === "none" ? 0 : t.endsWith("%") ? parseFloat(t) / 100 * percentOf : parseFloat(t);
+function color(fn, body) {
+	const [main, alphaPart] = body.split("/");
+	const [x, y, z] = main.trim().split(/[\s,]+/);
+	if (x === void 0 || y === void 0 || z === void 0) return void 0;
+	const alpha = alphaPart ? num(alphaPart.trim()) : 1;
+	const L = num(x);
+	if (fn === "oklab") return fromOklab(L, num(y, .4), num(z, .4), alpha);
+	const C = num(y, .4);
+	const h = parseFloat(z) * Math.PI / 180;
+	return fromOklab(L, C * Math.cos(h), C * Math.sin(h), alpha);
+}
+/** `value` in the form mail clients read. */
+function lower(value) {
+	let out = value.replace(/(-?\d*\.?\d+)rem\b/g, (_, n) => `${fmt(Number(n) * 16)}px`);
+	for (let again = true; again;) {
+		again = false;
+		out = out.replace(/calc\(([^()]*(?:\([^()]*\)[^()]*)*)\)/g, (match, body) => {
+			const v = evaluate(body);
+			if (!v) return match;
+			again = true;
+			return `${fmt(v.n)}${v.n === 0 ? "" : v.unit}`;
+		});
+	}
+	return out.replace(/\b(oklch|oklab)\(([^()]*)\)/g, (match, fn, body) => color(fn, body) ?? match);
+}
+/**
+* An at-rule mail clients parse: media range syntax (`width >= 768px`), which
+* vicss prints and Gmail and Outlook.com reject, as `min-width`/`max-width`.
+*/
+function lowerAtRule(rule) {
+	return lower(rule).replace(/\((width|height)\s*(>=|>|<=|<)\s*(-?\d*\.?\d+)(px|em)\)/g, (_, side, op, n, unit) => {
+		const value = Number(n);
+		const bound = op === "<" ? value - (unit === "px" ? .02 : .00125) : op === ">" ? value + (unit === "px" ? .02 : .00125) : value;
+		return `(${op.startsWith(">") ? "min" : "max"}-${side}: ${fmt(bound)}${unit})`;
+	});
+}
+//#endregion
+//#region src/vite/entries.ts
+const DARK = "@media (prefers-color-scheme: dark)";
+function dark(property, value, selector, atRules) {
+	const outlook = property.startsWith("background") ? "[data-ogsb]" : "[data-ogsc]";
+	return [[
+		selector,
+		[...atRules, DARK],
+		property,
+		value
+	], [
+		`${outlook} ${selector}`,
+		atRules,
+		property,
+		value
+	]];
+}
+function entryOf(literals) {
+	const i = [];
+	const r = [];
+	for (const l of literals) {
+		const value = lower(l.value);
+		const darkValue = l.modes?.dark === void 0 ? void 0 : lower(l.modes.dark);
+		const isDark = l.chain.includes("dark");
+		for (const rule of l.rules) {
+			const atRules = rule.atRules.map(lowerAtRule);
+			const always = rule.selector === "&" && atRules.length === 0;
+			if (isDark) r.push(...dark(l.property, value, rule.selector, atRules));
+			else if (always) i.push([
+				l.tier,
+				l.property,
+				value
+			]);
+			else r.push([
+				rule.selector,
+				atRules,
+				l.property,
+				value
+			]);
+			if (darkValue !== void 0 && !isDark) r.push(...dark(l.property, darkValue, rule.selector, atRules));
+		}
+	}
+	return {
+		...i.length && { i },
+		...r.length && { r }
+	};
+}
+//#endregion
+//#region src/email.ts
+const KIND = Symbol.for("@menapo/email:email");
+/** Whether `value` is an `email()`, whichever copy of this package made it. */
+const isEmail = (value) => typeof value === "object" && value !== null && value[KIND] === true;
+//#endregion
+//#region src/style.ts
+const UNITLESS = /* @__PURE__ */ new Set([
+	"flex",
+	"flex-grow",
+	"flex-shrink",
+	"font-weight",
+	"line-height",
+	"opacity",
+	"order",
+	"z-index"
+]);
+const kebab = (name) => name.startsWith("--") ? name : name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+/** Space-separated parts at the top level: `1px solid rgb(0 0 0)` → three. */
+function parts(value) {
+	const out = [];
+	let depth = 0;
+	let start = 0;
+	for (let i = 0; i <= value.length; i++) {
+		const c = value[i];
+		if (c === "(") depth++;
+		else if (c === ")") depth--;
+		else if ((c === void 0 || c === " ") && depth === 0) {
+			if (i > start) out.push(value.slice(start, i));
+			start = i + 1;
+		}
+	}
+	return out;
+}
+const SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+/** `8px 16px` → top, right, bottom, left. */
+function box(value) {
+	const [t = "0", r = t, b = t, l = r] = parts(value);
+	return [
+		t,
+		r,
+		b,
+		l
+	];
+}
+/**
+* Physical longhands for one declaration. Gmail and Outlook ignore logical
+* properties, and box shorthands are expanded so a later longhand or
+* shorthand overrides exactly what CSS would.
+*/
+function physical(property, value, dir) {
+	const start = dir === "rtl" ? "right" : "left";
+	const end = dir === "rtl" ? "left" : "right";
+	const m = /^(padding|margin|inset|border)(?:-(inline|block))?(?:-(start|end))?(-width|-style|-color)?$/.exec(property);
+	if (m && (m[1] !== "border" || m[2])) {
+		const [, kind, axis, edge, suffix = ""] = m;
+		const side = (s) => kind === "inset" ? s : `${kind}-${s}${suffix}`;
+		if (!axis) {
+			if (kind === "inset") {
+				const v = box(value);
+				return SIDES.map((s, i) => [s, v[i]]);
+			}
+			if (kind === "border") return [[property, value]];
+			const v = box(value);
+			return SIDES.map((s, i) => [side(s), v[i]]);
+		}
+		const [a, b = a] = kind === "border" ? [value] : parts(value);
+		const pair = axis === "inline" ? [start, end] : ["top", "bottom"];
+		if (edge) return [[side(edge === "start" ? pair[0] : pair[1]), value]];
+		return [[side(pair[0]), a], [side(pair[1]), b]];
+	}
+	switch (property) {
+		case "text-align": return [[property, value === "start" ? start : value === "end" ? end : value]];
+		case "inline-size":
+		case "block-size":
+		case "min-inline-size":
+		case "max-inline-size":
+		case "min-block-size":
+		case "max-block-size": return [[property.replace("inline-size", "width").replace("block-size", "height"), value]];
+		case "background": return parts(value).length === 1 && !/url\(|gradient\(/.test(value) ? [["background-color", value]] : [[property, value]];
+	}
+	return [[property, value]];
+}
+const VAR = /var\((--[\w-]+)(?:,\s*([^()]*))?\)/g;
+/** Sets a declaration as CSS would apply it after the ones already set. */
+function apply(style, property, value, dir) {
+	for (const [p, v] of physical(property, value, dir)) {
+		style.delete(p);
+		style.set(p, v);
+	}
+}
+/**
+* The element's style. Conditional rules of its classes are added to `rules`
+* as CSS text.
+*/
+function compute(node, reg, dir, rules) {
+	const style = /* @__PURE__ */ new Map();
+	const kept = [];
+	const cls = node.props.class;
+	if (cls) {
+		const inline = [];
+		for (const name of cls.split(" ")) {
+			if (!name) continue;
+			const entry = reg.css[name];
+			if (!entry) {
+				kept.push(name);
+				continue;
+			}
+			if (entry.i) inline.push(...entry.i);
+			if (entry.r) {
+				kept.push(name);
+				for (const rule of entry.r) rules.add(ruleCss(name, rule, dir));
+			}
+		}
+		inline.sort((a, b) => a[0] - b[0]);
+		for (const [, p, v] of inline) apply(style, p, v, dir);
+	}
+	const own = node.props.style;
+	if (own) for (const key in own) {
+		const value = own[key];
+		if (value == null) continue;
+		const p = kebab(key);
+		apply(style, p, typeof value === "number" && !UNITLESS.has(p) && value !== 0 ? `${value}px` : String(value), dir);
+	}
+	let custom = false;
+	for (const p of style.keys()) if (p.startsWith("--")) custom = true;
+	if (custom) {
+		for (const [p, v] of style) if (v.includes("var(")) style.set(p, v.replace(VAR, (match, name, fallback) => style.get(name) ?? fallback ?? match));
+		for (const p of style.keys()) if (p.startsWith("--")) style.delete(p);
+	}
+	return {
+		style,
+		classes: kept
+	};
+}
+/** CSS identifier escaping for a class in a selector (readable vicss names hold `:` and `.`). */
+const escapeClass = (name) => name.replace(/^(\d)|[^\w-]/g, (c, digit) => digit ? `\\3${digit} ` : `\\${c}`);
+function ruleCss(name, [selector, atRules, property, value], dir) {
+	const body = physical(property, value, dir).map(([p, v]) => `${p}:${v}!important`).join(";");
+	const block = `${selector.replaceAll("&", `.${escapeClass(name)}`)}{${body}}`;
+	return atRules.reduceRight((inner, at) => `${at}{${inner}}`, block);
+}
+/** The `style` attribute: padding and margin written as shorthands when all four sides are set. */
+function styleText(style) {
+	let out = "";
+	const done = /* @__PURE__ */ new Set();
+	for (const [p, v] of style) {
+		if (done.has(p)) continue;
+		const m = /^(padding|margin)-(top|right|bottom|left)$/.exec(p);
+		if (m) {
+			const all = SIDES.map((s) => style.get(`${m[1]}-${s}`));
+			if (all.every((x) => x !== void 0)) {
+				for (const s of SIDES) done.add(`${m[1]}-${s}`);
+				const [t, r, b, l] = all;
+				const short = t === b && r === l ? t === r ? t : `${t} ${r}` : r === l ? `${t} ${r} ${b}` : `${t} ${r} ${b} ${l}`;
+				out += `${m[1]}:${short};`;
+				continue;
+			}
+		}
+		out += `${p}:${v};`;
+	}
+	return out.slice(0, -1);
+}
+//#endregion
+//#region src/html.ts
+const VOID = /* @__PURE__ */ new Set([
+	"area",
+	"br",
+	"col",
+	"hr",
+	"img",
+	"meta",
+	"source",
+	"wbr"
+]);
+const FORBIDDEN = /* @__PURE__ */ new Set([
+	"script",
+	"iframe",
+	"object",
+	"embed",
+	"form",
+	"input",
+	"style",
+	"link",
+	"base",
+	"meta"
+]);
+const SAFE_URL = /^(?:https?:|mailto:|tel:|cid:|#)/i;
+const BOXES = /* @__PURE__ */ new Set([
+	"div",
+	"section",
+	"header",
+	"footer",
+	"main",
+	"article",
+	"aside",
+	"center"
+]);
+const TABLE = "role=\"presentation\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"";
+const escapeText = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const escapeAttr = (s) => escapeText(s).replace(/"/g, "&quot;");
+function warn(ctx, message) {
+	const text = `email "${ctx.name}": ${message}`;
+	if (ctx.warned.has(text)) return;
+	ctx.warned.add(text);
+	(ctx.reg.warn ?? console.warn)(text);
+}
+function computedOf(node, ctx) {
+	let c = ctx.computed.get(node);
+	if (!c) ctx.computed.set(node, c = compute(node, ctx.reg, ctx.dir, ctx.rules));
+	return c;
+}
+function attributes(node, classes, style, extra = "") {
+	let out = "";
+	for (const name in node.props) {
+		if (name === "class" || name === "style") continue;
+		const value = node.props[name];
+		if (/^on/i.test(name)) throw new Error(`email: <${node.type} ${name}> is an event handler; mail clients run no script. Remove it.`);
+		if (value === true) {
+			out += ` ${name}`;
+			continue;
+		}
+		if (typeof value === "function" || typeof value === "object" && value !== null) throw new TypeError(`email: <${node.type} ${name}=…> is an object; pass a string or a number.`);
+		const text = String(value);
+		if ((name === "href" || name === "src") && !SAFE_URL.test(text.trim())) throw new Error(`email: <${node.type} ${name}=${JSON.stringify(text)}> needs an absolute https, http, mailto, tel or cid URL; mail has no base URL and clients block other schemes.`);
+		out += ` ${name}="${escapeAttr(text)}"`;
+	}
+	if (classes.length) out += ` class="${escapeAttr(classes.join(" "))}"`;
+	const css = styleText(style);
+	if (css) out += ` style="${escapeAttr(css)}"`;
+	return out + extra;
+}
+const px = (value) => value && /^\d+(\.\d+)?px$/.test(value) ? parseFloat(value) : void 0;
+const take = (style, ...names) => {
+	for (const name of names) style.delete(name);
+};
+const elementsOf = (node) => node.children.filter((c) => typeof c !== "string" || c.trim());
+function children(node, ctx, align) {
+	let out = "";
+	for (const child of node.children) out += write(child, ctx, align);
+	return out;
+}
+function features(style) {
+	const out = [];
+	for (const [p, v] of style) {
+		const d = `${p}:${v}`;
+		if (p === "display" && /flex/.test(v)) out.push(["display:flex", d]);
+		else if (p === "display" && /grid/.test(v)) out.push(["display:grid", d]);
+		else if (p === "position" && v !== "static") out.push(["position", d]);
+		else if (/^(flex-wrap|justify-content|transform|aspect-ratio|object-fit|background-image)$/.test(p)) out.push([p, d]);
+		else if (/^(row-|column-)?gap$/.test(p)) out.push(["gap", d]);
+		if (v.includes("var(")) out.push(["var()", d]);
+	}
+	return out;
+}
+function check(node, style, ctx) {
+	const checks = ctx.reg.checks;
+	if (!checks) return;
+	for (const [key, declaration] of features(style)) {
+		const c = checks[key];
+		if (c) warn(ctx, `<${node.type}> has ${declaration}, which ${c.clients} drop. ${c.fix}`);
+	}
+	if (node.type === "img" && node.props.alt == null) warn(ctx, `<img src="${String(node.props.src)}"> has no alt. Add alt="…" (alt="" for a decorative image).`);
+	const cls = node.props.class;
+	if (cls && /(?:^|\s)mi-/.test(cls)) warn(ctx, "an icon() is SVG, which Gmail and Outlook do not show. Use <img src=\"https://…/icon.png\" alt=\"…\" width=\"16\" height=\"16\"> with a PNG at an absolute URL.");
+}
+/** An `<a>` with a background and padding: a one-cell table Outlook pads (D8). */
+function button(node, c, ctx, align) {
+	const style = new Map(c.style);
+	const bg = style.get("background-color");
+	const pad = [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	].map((s) => style.get(`padding-${s}`) ?? "0");
+	const outer = /* @__PURE__ */ new Map();
+	for (const s of [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	]) {
+		const m = style.get(`margin-${s}`);
+		if (m !== void 0) outer.set(`margin-${s}`, m);
+		style.delete(`margin-${s}`);
+	}
+	const full = style.get("display") === "block" || style.get("width") === "100%";
+	style.set("display", full ? "block" : "inline-block");
+	if (!style.has("text-decoration")) style.set("text-decoration", "none");
+	const cell = /* @__PURE__ */ new Map([["background-color", bg]]);
+	const radius = style.get("border-radius");
+	if (radius) cell.set("border-radius", radius);
+	cell.set("mso-padding-alt", pad.join(" "));
+	const center = align === "center";
+	if (center) outer.set("margin-left", "auto").set("margin-right", "auto");
+	check(node, style, ctx);
+	return `${`<table ${TABLE}${center ? " align=\"center\"" : ""}${full ? " width=\"100%\"" : ""}${outer.size ? ` style="${escapeAttr(styleText(outer))}"` : ""}>`}<tr><td align="center" bgcolor="${escapeAttr(bg)}" style="${escapeAttr(styleText(cell))}"><a${attributes(node, c.classes, style)}>${children(node, ctx, void 0)}</a></td></tr></table>`;
+}
+/** A `max-width` (or fixed-width, auto-margin) box: a table Outlook gives a width (D9). */
+function boxTable(node, c, ctx, width, max) {
+	const style = new Map(c.style);
+	const centered = style.get("margin-left") === "auto" && style.get("margin-right") === "auto";
+	const outer = /* @__PURE__ */ new Map();
+	if (max) outer.set("max-width", `${width}px`);
+	outer.set("width", "100%");
+	for (const s of ["top", "bottom"]) {
+		const m = style.get(`margin-${s}`);
+		if (m !== void 0) outer.set(`margin-${s}`, m);
+	}
+	if (centered) outer.set("margin-left", "auto").set("margin-right", "auto");
+	take(style, "max-width", "width", "margin-top", "margin-right", "margin-bottom", "margin-left");
+	const align = centered ? "center" : ctx.dir === "rtl" ? "right" : "left";
+	const bg = style.get("background-color");
+	check(node, style, ctx);
+	return `<!--[if mso]><table ${TABLE} align="${align}" width="${width}"><tr><td><![endif]--><table ${TABLE} align="${align}" width="100%" style="${escapeAttr(styleText(outer))}"><tr><td${attributes(node, c.classes, style, bg ? ` bgcolor="${escapeAttr(bg)}"` : "")}>${children(node, ctx, style.get("text-align"))}</td></tr></table><!--[if mso]></td></tr></table><![endif]-->`;
+}
+const VALIGN = {
+	center: "middle",
+	"flex-end": "bottom",
+	end: "bottom"
+};
+const SIMPLE_JUSTIFY = /* @__PURE__ */ new Set([
+	"flex-start",
+	"start",
+	"normal",
+	"left"
+]);
+/** A flex row or column of elements: table cells, `gap` as their padding (D9). */
+function flexTable(node, c, ctx, align) {
+	const style = c.style;
+	const direction = style.get("flex-direction") ?? "row";
+	const wrap = style.get("flex-wrap");
+	const justify = style.get("justify-content");
+	const items = elementsOf(node);
+	if (style.get("display") !== "flex" || direction !== "row" && direction !== "column" || wrap && wrap !== "nowrap" || justify && !SIMPLE_JUSTIFY.has(justify) || items.some((i) => typeof i === "string")) return void 0;
+	const rest = new Map(style);
+	const [rowGap, columnGap = rowGap] = parts(style.get("gap") ?? "");
+	const gap = direction === "row" ? style.get("column-gap") ?? columnGap : style.get("row-gap") ?? rowGap;
+	const alignItems = style.get("align-items") ?? "";
+	take(rest, "display", "flex-direction", "flex-wrap", "gap", "row-gap", "column-gap", "align-items", "justify-content");
+	const inner = rest.get("text-align") ?? align;
+	const start = ctx.dir === "rtl" ? "right" : "left";
+	let cells = "";
+	items.forEach((item, i) => {
+		const cell = /* @__PURE__ */ new Map();
+		if (i > 0 && gap && gap !== "0" && gap !== "0px") cell.set(direction === "row" ? `padding-${start}` : "padding-top", gap);
+		const own = computedOf(item, ctx).style;
+		const w = own.get("width") ?? own.get("flex-basis");
+		const td = `<td${(w && /^\d+(\.\d+)?(px|%)$/.test(w) ? ` width="${w.endsWith("%") ? w : parseFloat(w)}"` : "") + (direction === "row" ? ` valign="${VALIGN[alignItems] ?? "top"}"` : alignItems === "center" ? " align=\"center\"" : /end/.test(alignItems) ? ` align="${ctx.dir === "rtl" ? "left" : "right"}"` : "") + (cell.size ? ` style="${escapeAttr(styleText(cell))}"` : "")}>${write(item, ctx, inner)}</td>`;
+		cells += direction === "row" ? td : `<tr>${td}</tr>`;
+	});
+	const grid = `<table ${TABLE} width="100%">${direction === "row" ? `<tr>${cells}</tr>` : cells}</table>`;
+	check(node, rest, ctx);
+	const outer = /* @__PURE__ */ new Map();
+	for (const s of [
+		"top",
+		"right",
+		"bottom",
+		"left"
+	]) {
+		const m = rest.get(`margin-${s}`);
+		if (m !== void 0) outer.set(`margin-${s}`, m);
+		rest.delete(`margin-${s}`);
+	}
+	const bg = rest.get("background-color");
+	const attrs = attributes(node, c.classes, rest, bg ? ` bgcolor="${escapeAttr(bg)}"` : "");
+	const margins = outer.size ? ` style="${escapeAttr(styleText(outer))}"` : "";
+	if (attrs) return `<table ${TABLE} width="100%"${margins}><tr><td${attrs}>${grid}</td></tr></table>`;
+	return margins ? grid.replace("width=\"100%\">", `width="100%"${margins}>`) : grid;
+}
+/** Whether `node` is written as a table: a button, a flex row or column, a box. */
+function becomesTable(node, ctx) {
+	const { style } = computedOf(node, ctx);
+	const tag = node.type.toLowerCase();
+	if (tag === "a") return style.has("background-color") && [...style.keys()].some((p) => p.startsWith("padding"));
+	if (style.get("display") === "flex") return true;
+	return BOXES.has(tag) && (px(style.get("max-width")) !== void 0 || px(style.get("width")) !== void 0);
+}
+/** One child as HTML; `align` is the text-align it inherits, which a button table follows. */
+function write(child, ctx, align) {
+	if (typeof child === "string") return escapeText(child);
+	const node = child;
+	const tag = node.type.toLowerCase();
+	if (FORBIDDEN.has(tag)) throw new Error(`email: <${tag}> is not allowed in a template; mail clients strip it. The <head> and its <style> are render()'s own.`);
+	const c = computedOf(node, ctx);
+	const style = c.style;
+	if (tag === "a" && style.has("background-color") && [...style.keys()].some((p) => p.startsWith("padding"))) return button(node, c, ctx, align);
+	if (style.get("display") === "flex") {
+		const table = flexTable(node, c, ctx, align);
+		if (table) return table;
+	}
+	if (BOXES.has(tag)) {
+		const max = px(style.get("max-width"));
+		if (max) return boxTable(node, c, ctx, max, true);
+		const width = px(style.get("width"));
+		if (width && style.get("margin-left") === "auto" && style.get("margin-right") === "auto") return boxTable(node, c, ctx, width, false);
+	}
+	let extra = "";
+	let wrap;
+	let out = style;
+	let name = tag;
+	if (/^(p|h[1-6])$/.test(tag) && node.children.some((k) => typeof k !== "string" && becomesTable(k, ctx))) {
+		name = "div";
+		if (tag === "p") {
+			out = new Map(style);
+			if (!out.has("margin-top")) out.set("margin-top", "1em");
+			if (!out.has("margin-bottom")) out.set("margin-bottom", "1em");
+		}
+	}
+	if (tag === "img") {
+		out = new Map(style);
+		if (!out.has("display")) out.set("display", "block");
+		for (const side of ["width", "height"]) {
+			const n = px(out.get(side));
+			if (n !== void 0 && node.props[side] == null) extra += ` ${side}="${n}"`;
+		}
+		if (out.get("margin-left") === "auto" && out.get("margin-right") === "auto") {
+			take(out, "margin-left", "margin-right");
+			wrap = [`<table ${TABLE} align="center"><tr><td>`, "</td></tr></table>"];
+		}
+	} else if ((tag === "td" || tag === "table") && style.get("background-color")) extra += ` bgcolor="${escapeAttr(style.get("background-color"))}"`;
+	check(node, out, ctx);
+	const open = `<${name}${attributes(node, c.classes, out, extra)}>`;
+	const html = VOID.has(tag) ? open : `${open}${children(node, ctx, style.get("text-align") ?? align)}</${name}>`;
+	return wrap ? wrap[0] + html + wrap[1] : html;
+}
+//#endregion
+//#region src/registry.ts
+const KEY = Symbol.for("@menapo/email");
+function registry() {
+	const g = globalThis;
+	return g[KEY] ??= { css: {} };
+}
+//#endregion
+//#region src/text.ts
+const BLOCKS = /* @__PURE__ */ new Set([
+	"address",
+	"article",
+	"aside",
+	"blockquote",
+	"center",
+	"dd",
+	"div",
+	"dl",
+	"dt",
+	"footer",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"header",
+	"main",
+	"ol",
+	"p",
+	"pre",
+	"section",
+	"table",
+	"tr",
+	"ul"
+]);
+const BREAK = "\0";
+function textOf(root, styles) {
+	let out = "";
+	const walk = (child, list) => {
+		if (typeof child === "string") {
+			out += child.replace(/\s+/g, " ");
+			return;
+		}
+		const { type, props } = child;
+		const style = styles.get(child)?.style;
+		if (props.hidden != null || props["aria-hidden"] === "true" || style?.get("display") === "none") return;
+		switch (type) {
+			case "br":
+				out += "\n";
+				return;
+			case "hr":
+				out += `${BREAK}---${BREAK}`;
+				return;
+			case "img":
+				if (typeof props.alt === "string" && props.alt) out += props.alt;
+				return;
+			case "a": {
+				const start = out.length;
+				for (const c of child.children) walk(c, list);
+				const label = out.slice(start).trim();
+				const href = typeof props.href === "string" ? props.href : "";
+				const shown = href.replace(/^mailto:|^tel:/, "");
+				if (href && shown !== label) out = `${out.slice(0, start)}${label ? `${label}: ` : ""}${href}`;
+				return;
+			}
+			case "li":
+				out += `\n${list?.ordered ? `${++list.n}. ` : "- "}`;
+				for (const c of child.children) walk(c);
+				out += "\n";
+				return;
+			case "td":
+			case "th":
+				for (const c of child.children) walk(c, list);
+				out += " ";
+				return;
+		}
+		const block = BLOCKS.has(type);
+		if (block) out += BREAK;
+		const inner = type === "ol" || type === "ul" ? {
+			ordered: type === "ol",
+			n: 0
+		} : list;
+		for (const c of child.children) walk(c, inner);
+		if (block) out += BREAK;
+	};
+	for (const child of root) walk(child);
+	return out.split(BREAK).map((block) => block.split("\n").map((line) => line.replace(/[ \t]+/g, " ").trim()).filter(Boolean).join("\n")).filter(Boolean).join("\n\n");
+}
+//#endregion
+//#region src/index.ts
+function direction(locale) {
+	try {
+		const l = new Intl.Locale(locale);
+		return (l.getTextInfo?.() ?? l.textInfo)?.direction === "rtl" ? "rtl" : "ltr";
+	} catch {
+		return "ltr";
+	}
+}
+const escape$1 = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const RESET = "body{margin:0;padding:0;width:100%!important;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table,td{border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt}img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;height:auto;line-height:100%}a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}";
+const MSO = "<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><style>td,th,div,p,a,h1,h2,h3,h4,h5,h6{mso-line-height-rule:exactly}</style><![endif]-->";
+const FILLER = "&#847;&zwnj;&nbsp;".repeat(60);
+function shell(subject, preheader, body, rules, lang, dir) {
+	const dark = [...rules].some((r) => r.includes("prefers-color-scheme") || r.includes("[data-ogsc]") || r.includes("[data-ogsb]"));
+	const langAttrs = `${lang ? ` lang="${escape$1(lang)}"` : ""}${dir ? ` dir="${dir}"` : ""}`;
+	return `<!doctype html><html${langAttrs} xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="format-detection" content="telephone=no,date=no,address=no,email=no,url=no">` + (dark ? "<meta name=\"color-scheme\" content=\"light dark\"><meta name=\"supported-color-schemes\" content=\"light dark\">" : "") + `<title>${escape$1(subject)}</title>${MSO}<style>${RESET}${[...rules].join("")}</style></head><body style="margin:0;padding:0;word-spacing:normal"><div role="article" aria-roledescription="email" aria-label="${escape$1(subject)}"${langAttrs}>` + (preheader ? `<div style="display:none;max-height:0;overflow:hidden;mso-hide:all">${escape$1(preheader)}${FILLER}</div>` : "") + `<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>${body}</td></tr></table></div></body></html>`;
+}
+const list = (markup) => Array.isArray(markup) ? markup : [markup];
+/** Renders an email for one recipient: its subject, HTML and plain text. */
+async function render(mail, props, options = {}) {
+	const reg = registry();
+	const { locale, timeZone } = options;
+	const run = async () => {
+		const message = await mail.template(props);
+		const { lang, dir } = reg.i18n ? reg.i18n.htmlAttributes() : {
+			lang: locale,
+			dir: locale ? direction(locale) : void 0
+		};
+		const ctx = {
+			reg,
+			dir: dir ?? "ltr",
+			rules: /* @__PURE__ */ new Set(),
+			name: options.name ?? "email",
+			computed: /* @__PURE__ */ new WeakMap(),
+			warned: /* @__PURE__ */ new Set()
+		};
+		const roots = list(message.body);
+		let body = "";
+		for (const child of roots) body += write(child, ctx);
+		const text = textOf(roots, ctx.computed);
+		if (reg.checks && body.length > 1e5) warn(ctx, `the HTML is ${Math.round(body.length / 1e3)} KB; Gmail clips mail over about 102 KB. Shorten it.`);
+		return {
+			subject: message.subject,
+			html: shell(message.subject, message.preheader, body, ctx.rules, lang, dir),
+			text
+		};
+	};
+	if (reg.i18n) {
+		if (locale !== void 0) return reg.i18n.withLocale(locale, run, timeZone === void 0 ? {} : { timeZone });
+		try {
+			reg.i18n.htmlAttributes();
+		} catch (cause) {
+			throw new Error(`email: render(${options.name ?? "…"}) has no locale and runs outside a request, so t() has none. Pass the recipient's: render(email, props, { locale: user.locale }).`, { cause });
+		}
+	}
+	return run();
+}
+//#endregion
+//#region src/vite/preview.ts
+/**
+* The dev preview at `/__email` (PLAN D15): every `email()` export of the
+* project's files with each sample, and one page per sample with the
+* subject, the HTML, the text part, its size and the warnings.
+*/
+const PREFIX = "/__email";
+const SKIP = /* @__PURE__ */ new Set([
+	"node_modules",
+	"dist",
+	"build",
+	"coverage",
+	"test-results"
+]);
+const SOURCE = /\.(?:[cm]?[jt]sx?)$/;
+const escape = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+/** Files that import `@menapo/email` and call `email(`: where the emails are. */
+function emailFiles(root, dir = root, out = []) {
+	for (const entry of readdirSync(dir, { withFileTypes: true })) {
+		if (entry.name.startsWith(".") || SKIP.has(entry.name)) continue;
+		const path = join(dir, entry.name);
+		if (entry.isDirectory()) emailFiles(root, path, out);
+		else if (SOURCE.test(entry.name) && !/\.(test|spec)\./.test(entry.name)) {
+			const code = readFileSync(path, "utf8");
+			if (code.includes("@menapo/email") && /\bemail\s*\(/.test(code)) out.push(relative(root, path));
+		}
+	}
+	return out;
+}
+async function emails(server) {
+	const root = server.config.root;
+	const out = [];
+	for (const file of emailFiles(root).sort()) {
+		const mod = await server.ssrLoadModule(`/${file}`);
+		for (const [name, value] of Object.entries(mod)) if (isEmail(value)) out.push({
+			file,
+			name,
+			email: value
+		});
+	}
+	return out;
+}
+async function locales(server) {
+	const file = join(server.config.root, "vi18n.config.ts");
+	if (!existsSync(file)) return [];
+	return (await server.ssrLoadModule("/vi18n.config.ts")).default?.locales ?? [];
+}
+const page = (title, body) => `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${escape(title)}</title><style>body{font:14px/1.5 system-ui,sans-serif;margin:0 auto;max-width:960px;padding:24px;color:#111}a{color:#2563eb}iframe{width:100%;height:640px;border:1px solid #ddd;border-radius:6px}pre{white-space:pre-wrap;background:#f6f6f6;padding:12px;border-radius:6px}.warn{color:#9a3412}</style></head><body>${body}</body></html>`;
+function preview(server) {
+	return (req, res, next) => {
+		const url = new URL(req.url ?? "/", "http://localhost");
+		if (url.pathname !== PREFIX && url.pathname !== `${PREFIX}/`) return next();
+		(async () => {
+			const all = await emails(server);
+			const file = url.searchParams.get("file");
+			const name = url.searchParams.get("email");
+			const sample = url.searchParams.get("sample") ?? "default";
+			const known = await locales(server);
+			const locale = url.searchParams.get("locale") ?? known[0];
+			let body;
+			const found = all.find((e) => e.file === file && e.name === name);
+			if (!found) {
+				const items = all.map(({ file, name, email }) => {
+					const samples = Object.keys(email.samples);
+					const links = samples.length ? samples.map((s) => `<a href="${PREFIX}?file=${encodeURIComponent(file)}&email=${name}&sample=${encodeURIComponent(s)}">${escape(s)}</a>`).join(" · ") : "<em>no samples: add email(…, { samples: { default: {…} } })</em>";
+					return `<li><strong>${escape(name)}</strong> <small>${escape(file)}</small>: ${links}</li>`;
+				}).join("");
+				body = `<h1>Emails</h1>${items ? `<ul>${items}</ul>` : "<p>No email() exports found.</p>"}`;
+			} else {
+				const props = found.email.samples[sample];
+				if (props === void 0) throw new Error(`email: ${found.name} has no sample "${sample}".`);
+				const warnings = [];
+				const reg = registry();
+				const before = reg.warn;
+				reg.warn = (m) => warnings.push(m);
+				let out;
+				try {
+					out = await render(found.email, props, {
+						locale,
+						name: found.name
+					});
+				} finally {
+					reg.warn = before;
+				}
+				const here = `${PREFIX}?file=${encodeURIComponent(found.file)}&email=${found.name}&sample=${encodeURIComponent(sample)}`;
+				const switcher = known.map((l) => l === locale ? `<strong>${l}</strong>` : `<a href="${here}&locale=${l}">${l}</a>`).join(" · ");
+				body = `<p><a href="${PREFIX}">All emails</a>${switcher ? ` · ${switcher}` : ""}</p><h1>${escape(found.name)} <small>${escape(sample)}</small></h1><p>Subject: <strong id="subject">${escape(out.subject)}</strong> · ${(out.html.length / 1e3).toFixed(1)} KB</p>` + (warnings.length ? `<ul id="warnings">${warnings.map((w) => `<li class="warn">${escape(w)}</li>`).join("")}</ul>` : "") + `<iframe id="html" title="HTML part" srcdoc="${escape(out.html)}"></iframe><h2>Text</h2><pre id="text">${escape(out.text)}</pre>`;
+			}
+			res.setHeader("Content-Type", "text/html; charset=utf-8");
+			res.setHeader("Cache-Control", "no-cache");
+			res.end(page("Emails", body));
+		})().catch((error) => {
+			server.ssrFixStacktrace(error);
+			next(error);
+		});
+	};
+}
+//#endregion
+//#region src/vite/index.ts
+const REGISTRY = "globalThis[Symbol.for(\"@menapo/email\")] ??= { css: {} }";
+function email() {
+	let vicss;
+	let i18n = false;
+	let dev = false;
+	return {
+		name: "menapo:email",
+		enforce: "post",
+		configResolved(config) {
+			vicss = config.plugins.find((p) => p.name === "vicss")?.api;
+			i18n = config.plugins.some((p) => p.name.startsWith("vi18n:"));
+			dev = config.command === "serve";
+		},
+		async transform(code, id) {
+			if (this.environment.config.consumer !== "server") return null;
+			if (id.startsWith("\0") || id.includes("/node_modules/")) return null;
+			let imports = "";
+			let body = "";
+			if (vicss) {
+				const literals = await vicss.literals(code, this);
+				const css = {};
+				let any = false;
+				for (const name in literals) {
+					css[name] = entryOf(literals[name]);
+					any = true;
+				}
+				if (any) body += `Object.assign(r.css, ${JSON.stringify(css)});`;
+			}
+			if (/["']@menapo\/email["']/.test(code)) {
+				if (i18n) {
+					imports += "import { withLocale as __mew, htmlAttributes as __meh } from \"@menapo/vi18n/server\";\n";
+					body += "r.i18n ??= { withLocale: __mew, htmlAttributes: __meh };";
+				}
+				if (dev) body += `r.checks ??= ${JSON.stringify(CHECKS)};`;
+			}
+			if (!body) return null;
+			return {
+				code: `${code}\n${imports}{ const r = (${REGISTRY}); ${body} }\n`,
+				map: null
+			};
+		},
+		configureServer(server) {
+			server.middlewares.use(preview(server));
+		}
+	};
+}
+//#endregion
+export { email as default, email };