@menapo/email 0.0.0-stage → 0.1.0

package/dist/src-nwP-sVbY.js

@@ -0,0 +1,707 @@
+//#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$1(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$1(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$1(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$1(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 ../../node_modules/.pnpm/htm@3.1.1/node_modules/htm/dist/htm.mjs
+var n = function(t, s, r, e) {
+	var u;
+	s[0] = 0;
+	for (var h = 1; h < s.length; h++) {
+		var p = s[h++], a = s[h] ? (s[0] |= p ? 1 : 2, r[s[h++]]) : s[++h];
+		3 === p ? e[0] = a : 4 === p ? e[1] = Object.assign(e[1] || {}, a) : 5 === p ? (e[1] = e[1] || {})[s[++h]] = a : 6 === p ? e[1][s[++h]] += a + "" : p ? (u = t.apply(a, n(t, a, r, ["", null])), e.push(u), a[0] ? s[0] |= 2 : (s[h - 2] = 0, s[h] = u)) : e.push(a);
+	}
+	return e;
+};
+var t = /* @__PURE__ */ new Map();
+function htm_default(s) {
+	var r = t.get(this);
+	return r || (r = /* @__PURE__ */ new Map(), t.set(this, r)), (r = n(this, r.get(s) || (r.set(s, r = function(n) {
+		for (var t, s, r = 1, e = "", u = "", h = [0], p = function(n) {
+			1 === r && (n || (e = e.replace(/^\s*\n\s*|\s*\n\s*$/g, ""))) ? h.push(0, n, e) : 3 === r && (n || e) ? (h.push(3, n, e), r = 2) : 2 === r && "..." === e && n ? h.push(4, n, 0) : 2 === r && e && !n ? h.push(5, 0, !0, e) : r >= 5 && ((e || !n && 5 === r) && (h.push(r, 0, e, s), r = 6), n && (h.push(r, n, 0, s), r = 6)), e = "";
+		}, a = 0; a < n.length; a++) {
+			a && (1 === r && p(), p(a));
+			for (var l = 0; l < n[a].length; l++) t = n[a][l], 1 === r ? "<" === t ? (p(), h = [h], r = 3) : e += t : 4 === r ? "--" === e && ">" === t ? (r = 1, e = "") : e = t + e[0] : u ? t === u ? u = "" : e += t : "\"" === t || "'" === t ? u = t : ">" === t ? (p(), r = 1) : r && ("=" === t ? (r = 5, s = e, e = "") : "/" === t && (r < 5 || ">" === n[a][l + 1]) ? (p(), 3 === r && (h = h[0]), r = h, (h = h[0]).push(2, 0, r), r = 0) : " " === t || "	" === t || "\n" === t || "\r" === t ? (p(), r = 2) : e += t), 3 === r && "!--" === e && (r = 4, h = h[0]);
+		}
+		return p(), h;
+	}(s)), r), arguments, [])).length > 1 ? r : r[0];
+}
+//#endregion
+//#region ../markup/src/index.ts
+/**
+* `@menapo/markup`: kit's templates (og PLAN §5). `html` is htm's parser
+* bound to a node builder of ours, so a template becomes a plain tree that
+* any renderer can walk (og's images now, e-mail's HTML later) with no
+* framework. Holes are values: text is never parsed as markup, so a prop
+* cannot inject an element.
+*/
+/**
+* vicss's `sx()` merge (packages/vicss/src/runtime/merge.ts), restated so
+* templates need no `sx()` and markup no vicss: class names are kept in
+* order, and a style's merge ids replace the same id and drop the ids below
+* them in their chain (`p` drops `p-b-s`, `md:p` does not). A test checks
+* the two agree, so they cannot drift.
+*/
+function classOf(value, style) {
+	const names = /* @__PURE__ */ new Set();
+	const kept = /* @__PURE__ */ new Map();
+	const add = (list) => {
+		for (const name of list.split(/\s+/)) if (name) names.add(name);
+	};
+	for (let arg of [value].flat(Infinity)) {
+		if (!arg) continue;
+		if (typeof arg === "string") {
+			add(arg);
+			continue;
+		}
+		const dynamic = arg;
+		if (dynamic.$c) {
+			Object.assign(style, dynamic.$s);
+			arg = dynamic.$c;
+		}
+		const record = arg;
+		for (const id of kept.keys()) for (const key in record) if (id[key.length] === "-" && id.startsWith(key) && !id.includes(":", key.length)) {
+			kept.delete(id);
+			break;
+		}
+		for (const id in record) if (id === "$n") add(record[id]);
+		else kept.set(id, record[id]);
+	}
+	return [...names, ...[...kept.keys()].sort().map((id) => kept.get(id))].join(" ");
+}
+function children(list, into = []) {
+	for (const child of list) {
+		if (child == null || typeof child === "boolean") continue;
+		if (Array.isArray(child)) children(child, into);
+		else if (typeof child === "object") into.push(child);
+		else into.push(String(child));
+	}
+	return into;
+}
+function h(type, attributes, ...kids) {
+	if (typeof type === "function") return type({
+		...attributes,
+		children: children(kids)
+	});
+	const props = {};
+	const style = {};
+	let cls;
+	for (const name in attributes) {
+		const value = attributes[name];
+		if (name === "class" || name === "className") (cls ??= []).push(value);
+		else if (name === "style") {
+			if (typeof value === "string") throw new TypeError(`markup: <${type} style="…"> is a string; pass an object: style=\${{ color: "red" }}.`);
+			Object.assign(style, value);
+		} else if (value != null && value !== false) props[name] = value;
+	}
+	if (cls) {
+		const merged = classOf(cls, style);
+		if (merged) props.class = merged;
+	}
+	for (const _ in style) {
+		props.style = style;
+		break;
+	}
+	return {
+		type,
+		props,
+		children: children(kids)
+	};
+}
+const bound = htm_default.bind(h);
+/**
+* A template: `` html`<p class=${card} ...${attrs}>${text}</p>` `` → a node
+* tree. Several roots give an array.
+*/
+const html = (strings, ...values) => bound(strings, ...values);
+//#endregion
+//#region src/email.ts
+const KIND = Symbol.for("@menapo/email:email");
+/** A defined email: pass it to `render()`. */
+var Email = class {
+	[KIND] = true;
+	template;
+	samples;
+	constructor(template, samples = {}) {
+		this.template = template;
+		this.samples = samples;
+	}
+};
+/** Whether `value` is an `email()`, whichever copy of this package made it. */
+const isEmail = (value) => typeof value === "object" && value !== null && value[KIND] === true;
+/** Defines an email. The props type is the parameter's. */
+function email(template, options = {}) {
+	return new Email(template, options.samples);
+}
+//#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 = (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(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(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(subject)}"${langAttrs}>` + (preheader ? `<div style="display:none;max-height:0;overflow:hidden;mso-hide:all">${escape(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
+export { registry as a, html as i, email as n, isEmail as r, render as t };