@samva/markup 0.18.1 → 0.19.0

package/dist/components-DNBCz20_.js

@@ -0,0 +1,3267 @@
+import { n as isObject } from "./guards-eV1qLbf2.js";
+import { callFormatter, createFmt } from "./fmt.js";
+import { a as jsx, c as rawMarkup, l as withEmailDiagnostics, n as Fragment, r as collectEmailDiagnostics, s as normalizeChildren, t as EmailNode } from "./jsx-runtime-qL19u3Fy.js";
+import { TaggedError } from "better-result";
+//#region src/internal/unsubscribe-link.ts
+/**
+* Marks the one link the serializer lets carry the brand plugin's unsubscribe
+* placeholder as its href. Only `BrandFooter` sets it; nothing public exports
+* it, so no author-written link can claim the exemption.
+*/
+const UNSUBSCRIBE_LINK = Symbol("samva.unsubscribe-link");
+/**
+* Marks the elements `BrandFooter` writes the brand plugin's footer markers
+* on. The serializer emits those reserved attributes only for an element
+* carrying it, so an author cannot claim a footer the send path would then
+* not append.
+*/
+const BRAND_FOOTER_MARKER = Symbol("samva.brand-footer-marker");
+//#endregion
+//#region src/compiled-template.ts
+/** The version this package writes. A publication pins the version it was built with. */
+const COMPILED_TEMPLATE_VERSION = 2;
+//#endregion
+//#region src/email/samva-brand-plugin.ts
+/**
+* Samva's brand plugin, the compiler's default. A template imports its
+* organization's brand from `samva:brand`, and Samva's send path fills
+* `%samva:unsubscribe-url%` per delivery and turns `data-samva-no-track` into
+* its email provider's own no-track marker.
+*/
+const samvaBrandPlugin = {
+	specifier: "samva:brand",
+	footerAttribute: "data-samva-footer",
+	unsubscribeRowAttribute: "data-samva-unsubscribe",
+	unsubscribeUrlPlaceholder: "%samva:unsubscribe-url%",
+	noTrackAttribute: "data-samva-no-track"
+};
+//#endregion
+//#region src/email/brand-plugin.ts
+const SLUG = "[a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?";
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\/]/g, "\\$&");
+/** `<specifier>` or `<specifier>/<slug>`, as a regular expression source with no groups. */
+const brandSpecifierPattern = (plugin) => `${escapeRegExp(plugin.specifier)}(?:\\/${SLUG})?`;
+/** The brand a specifier names: `undefined` slug means the default brand; `undefined` when it names none. */
+const parseBrandSpecifier = (specifier, options = {}) => {
+	const plugin = options.brandPlugin ?? samvaBrandPlugin;
+	const match = new RegExp(`^${escapeRegExp(plugin.specifier)}(?:\\/(${SLUG}))?$`).exec(specifier);
+	return match === null ? void 0 : { slug: match[1] };
+};
+/** The attributes only `BrandFooter` writes; an authored element carrying one is refused. */
+const reservedBrandAttributes = (plugin) => /* @__PURE__ */ new Set([
+	plugin.footerAttribute,
+	plugin.unsubscribeRowAttribute,
+	plugin.noTrackAttribute
+]);
+//#endregion
+//#region src/email/elements.ts
+/** Attributes every supported element accepts. `class`/`className`/`style` are handled separately. */
+const EMAIL_GLOBAL_ATTRIBUTES = {
+	id: { type: "string" },
+	title: { type: "string" },
+	lang: { type: "string" },
+	dir: {
+		type: "string",
+		values: [
+			"ltr",
+			"rtl",
+			"auto"
+		]
+	},
+	role: { type: "string" }
+};
+const alignment = {
+	type: "string",
+	values: [
+		"left",
+		"center",
+		"right"
+	]
+};
+const verticalAlignment = {
+	type: "string",
+	values: [
+		"top",
+		"middle",
+		"bottom"
+	]
+};
+const flowAttributes = { align: alignment };
+const cellAttributes = {
+	align: alignment,
+	valign: verticalAlignment,
+	width: { type: "measure" },
+	height: { type: "measure" },
+	bgcolor: { type: "string" },
+	colspan: { type: "number" },
+	rowspan: { type: "number" }
+};
+const block = (attributes) => ({
+	content: "flow",
+	layout: "block",
+	attributes
+});
+const inline = () => ({
+	content: "flow",
+	layout: "inline",
+	attributes: {}
+});
+/** The complete supported vocabulary. Anything outside it is a compile error with a source location. */
+const EMAIL_ELEMENTS = {
+	html: {
+		content: "flow",
+		layout: "document",
+		attributes: {
+			xmlns: { type: "string" },
+			"xmlns:o": { type: "string" },
+			"xmlns:v": { type: "string" },
+			"xmlns:w": { type: "string" }
+		},
+		childElements: ["head", "body"]
+	},
+	head: {
+		content: "flow",
+		layout: "metadata",
+		attributes: {},
+		childElements: [
+			"title",
+			"meta",
+			"style"
+		]
+	},
+	title: {
+		content: "text",
+		layout: "metadata",
+		attributes: {}
+	},
+	style: {
+		content: "raw",
+		layout: "metadata",
+		attributes: { type: { type: "string" } }
+	},
+	meta: {
+		content: "void",
+		layout: "metadata",
+		attributes: {
+			name: { type: "string" },
+			content: { type: "string" },
+			charset: { type: "string" },
+			"http-equiv": { type: "string" }
+		}
+	},
+	body: {
+		content: "flow",
+		layout: "block",
+		attributes: { bgcolor: { type: "string" } }
+	},
+	div: block(flowAttributes),
+	section: block(flowAttributes),
+	article: block(flowAttributes),
+	header: block(flowAttributes),
+	footer: block(flowAttributes),
+	main: block(flowAttributes),
+	center: block({}),
+	p: block(flowAttributes),
+	blockquote: block(flowAttributes),
+	pre: {
+		content: "flow",
+		layout: "preformatted",
+		attributes: {}
+	},
+	h1: block(flowAttributes),
+	h2: block(flowAttributes),
+	h3: block(flowAttributes),
+	h4: block(flowAttributes),
+	h5: block(flowAttributes),
+	h6: block(flowAttributes),
+	span: inline(),
+	strong: inline(),
+	b: inline(),
+	em: inline(),
+	i: inline(),
+	u: inline(),
+	s: inline(),
+	small: inline(),
+	code: inline(),
+	a: {
+		content: "flow",
+		layout: "link",
+		attributes: {
+			href: {
+				type: "url",
+				required: true
+			},
+			target: { type: "string" },
+			rel: { type: "string" },
+			name: { type: "string" }
+		}
+	},
+	img: {
+		content: "void",
+		layout: "image",
+		attributes: {
+			src: {
+				type: "url",
+				required: true
+			},
+			alt: {
+				type: "string",
+				required: true
+			},
+			width: { type: "measure" },
+			height: { type: "measure" },
+			border: { type: "measure" },
+			align: alignment
+		}
+	},
+	table: {
+		content: "flow",
+		layout: "table",
+		attributes: {
+			width: { type: "measure" },
+			height: { type: "measure" },
+			border: { type: "measure" },
+			cellpadding: { type: "measure" },
+			cellspacing: { type: "measure" },
+			align: alignment,
+			bgcolor: { type: "string" }
+		},
+		childElements: [
+			"caption",
+			"colgroup",
+			"thead",
+			"tbody",
+			"tfoot",
+			"tr"
+		]
+	},
+	caption: {
+		content: "flow",
+		layout: "block",
+		attributes: flowAttributes
+	},
+	colgroup: {
+		content: "flow",
+		layout: "table-section",
+		attributes: {
+			span: { type: "number" },
+			width: { type: "measure" }
+		},
+		childElements: ["col"]
+	},
+	col: {
+		content: "void",
+		layout: "table-section",
+		attributes: {
+			span: { type: "number" },
+			width: { type: "measure" }
+		}
+	},
+	thead: {
+		content: "flow",
+		layout: "table-section",
+		attributes: {
+			align: alignment,
+			valign: verticalAlignment,
+			bgcolor: { type: "string" }
+		},
+		childElements: ["tr"]
+	},
+	tbody: {
+		content: "flow",
+		layout: "table-section",
+		attributes: {
+			align: alignment,
+			valign: verticalAlignment,
+			bgcolor: { type: "string" }
+		},
+		childElements: ["tr"]
+	},
+	tfoot: {
+		content: "flow",
+		layout: "table-section",
+		attributes: {
+			align: alignment,
+			valign: verticalAlignment,
+			bgcolor: { type: "string" }
+		},
+		childElements: ["tr"]
+	},
+	tr: {
+		content: "flow",
+		layout: "row",
+		attributes: {
+			align: alignment,
+			valign: verticalAlignment,
+			bgcolor: { type: "string" },
+			height: { type: "measure" }
+		},
+		childElements: ["td", "th"]
+	},
+	td: {
+		content: "flow",
+		layout: "cell",
+		attributes: cellAttributes
+	},
+	th: {
+		content: "flow",
+		layout: "cell",
+		attributes: cellAttributes
+	},
+	ul: {
+		content: "flow",
+		layout: "list",
+		attributes: {},
+		childElements: ["li"]
+	},
+	ol: {
+		content: "flow",
+		layout: "list",
+		attributes: {
+			start: { type: "number" },
+			type: { type: "string" }
+		},
+		childElements: ["li"]
+	},
+	li: {
+		content: "flow",
+		layout: "list-item",
+		attributes: {}
+	},
+	br: {
+		content: "void",
+		layout: "break",
+		attributes: {}
+	},
+	hr: {
+		content: "void",
+		layout: "rule",
+		attributes: {
+			width: { type: "measure" },
+			size: { type: "number" },
+			align: alignment
+		}
+	}
+};
+/** Attributes that must carry a URL; these are checked against the safe-scheme rule. */
+const isUrlAttribute = (tag, attribute) => {
+	return EMAIL_ELEMENTS[tag]?.attributes[attribute]?.type === "url";
+};
+/** Look up one supported element, or `undefined` when the tag is outside the vocabulary. */
+const emailElement = (tag) => Object.hasOwn(EMAIL_ELEMENTS, tag) ? EMAIL_ELEMENTS[tag] : void 0;
+//#endregion
+//#region src/ir/nodes.ts
+const isStaticScalar = (value) => value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+/** Structural discrimination of this package's IR, shared by compilation and target lowering. */
+const isValueNode = (node) => {
+	if (typeof node !== "object" || node === null) return true;
+	if ("type" in node || "el" in node || "each" in node || "raw" in node || "preheader" in node) return false;
+	if ("if" in node && Array.isArray(node.then)) return false;
+	return true;
+};
+//#endregion
+//#region src/ir/email-presentation.ts
+/** Visit only the deterministic email expansion, including both conditional branches once. */
+const mapEmailPresentation = (nodes, edit) => {
+	let ordinal = 0;
+	const walk = (list) => list.map((node) => {
+		if (isValueNode(node)) return node;
+		if ("el" in node) return {
+			...edit(node, ordinal++),
+			...node.children === void 0 ? {} : { children: walk(node.children) }
+		};
+		if ("raw" in node) return edit(node, ordinal++);
+		if ("each" in node) return {
+			...node,
+			children: walk(node.children)
+		};
+		if ("if" in node) return {
+			...node,
+			then: walk(node.then),
+			...node.else === void 0 ? {} : { else: walk(node.else) }
+		};
+		return node;
+	});
+	return walk(nodes);
+};
+/** Save changed presentation fields, never tags, text children or a second body tree. */
+const emailPresentationOverrides = (before, styled) => {
+	const originals = [];
+	mapEmailPresentation([before], (node) => {
+		originals.push(node);
+		return node;
+	});
+	const overrides = {};
+	mapEmailPresentation([styled], (node, ordinal) => {
+		const original = originals[ordinal];
+		if (typeof node !== "object" || node === null || typeof original !== "object" || original === null) return node;
+		if ("el" in node && "el" in original) {
+			const attrs = JSON.stringify(node.attrs) === JSON.stringify(original.attrs) ? void 0 : node.attrs;
+			const style = JSON.stringify(node.style) === JSON.stringify(original.style) ? void 0 : node.style ?? "";
+			if (attrs !== void 0 || style !== void 0) overrides[ordinal] = {
+				...attrs === void 0 ? {} : { attrs },
+				...style === void 0 ? {} : { style }
+			};
+		} else if ("raw" in node && "raw" in original && JSON.stringify(node.raw) !== JSON.stringify(original.raw)) overrides[ordinal] = { raw: node.raw };
+		return node;
+	});
+	return overrides;
+};
+/** Apply the resolved cascade and append head-only CSS after all ordinal-based overrides. */
+const applyEmailPresentation = (nodes, presentation) => {
+	const painted = mapEmailPresentation(nodes, (node, ordinal) => ({
+		...node,
+		...presentation.nodes[ordinal]
+	}));
+	if (presentation.headCss === "" && presentation.fontFaceCss === "") return painted;
+	let done = false;
+	const additions = [...presentation.headCss === "" ? [] : [{
+		el: "style",
+		children: [presentation.headCss]
+	}], ...presentation.fontFaceCss === "" ? [] : [
+		{ raw: ["<!--[if !mso]><!-->"] },
+		{
+			el: "style",
+			children: [presentation.fontFaceCss]
+		},
+		{ raw: ["<!--<![endif]-->"] }
+	]];
+	const walk = (list) => list.map((node) => {
+		if (done || isValueNode(node)) return node;
+		if ("el" in node) {
+			if (node.el === "head") {
+				done = true;
+				return {
+					...node,
+					children: [...node.children ?? [], ...additions]
+				};
+			}
+			return {
+				...node,
+				...node.children === void 0 ? {} : { children: walk(node.children) }
+			};
+		}
+		if ("each" in node) return {
+			...node,
+			children: walk(node.children)
+		};
+		if ("if" in node) return {
+			...node,
+			then: walk(node.then),
+			...node.else === void 0 ? {} : { else: walk(node.else) }
+		};
+		return node;
+	});
+	return walk(painted);
+};
+//#endregion
+//#region src/ir/degradations.ts
+/** Content fidelity declarations; client-specific presentation is checked against the HTML. */
+const COMPONENT_DEGRADATIONS = {
+	Email: {
+		kind: "same",
+		note: "Recipients get the full message with the theme's colors and font."
+	},
+	Section: {
+		kind: "same",
+		note: "Recipients see the section and everything in it."
+	},
+	Columns: {
+		kind: "same",
+		note: "Recipients see every cell of every row."
+	},
+	Column: {
+		kind: "same",
+		note: "Recipients see the cell and everything in it."
+	},
+	Button: {
+		kind: "same",
+		note: "Recipients see the button's label and can follow its link."
+	},
+	Spacer: {
+		kind: "same",
+		note: "Recipients see the space between blocks."
+	},
+	Divider: {
+		kind: "same",
+		note: "Recipients see the horizontal rule."
+	},
+	Image: {
+		kind: "same",
+		note: "Recipients get the image and its alternative text."
+	},
+	Link: {
+		kind: "same",
+		note: "Recipients can follow the link."
+	},
+	BrandLogo: {
+		kind: "same",
+		note: "Recipients get the brand logo, with the dark version where their client supports it."
+	},
+	BrandFooter: {
+		kind: "same",
+		note: "Recipients see the brand's contact details and links, including the unsubscribe link when supplied."
+	}
+};
+/** The content fidelity declaration for one supported component. */
+const componentDegradation = (name) => COMPONENT_DEGRADATIONS[name];
+//#endregion
+//#region src/ir/validate.ts
+/** Bound the static artifact as well as the renderer's dynamic iteration and expression limits. */
+const validateEmailIr = (body, presentation, reject) => {
+	const record = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+	let visited = 0;
+	const bound = (value, depth) => {
+		if (depth > 512 || ++visited > 1e5) reject("The compiled email exceeds its depth or size limit.", "render-limit");
+		if (typeof value === "string" && /[]/.test(value)) reject("Compiled strings cannot contain internal token delimiters.");
+		if (typeof value === "number" && !Number.isFinite(value)) reject("Compiled numbers must be finite.");
+		if (typeof value === "function" || typeof value === "symbol" || typeof value === "bigint") reject("A compiled email contains only JSON data.");
+		if (Array.isArray(value)) {
+			if (value.length > 1e4) reject("A compiled list contains at most 10000 entries.", "render-limit");
+			for (const item of value) bound(item, depth + 1);
+		} else if (record(value)) for (const item of Object.values(value)) bound(item, depth + 1);
+	};
+	bound(body, 0);
+	bound(presentation, 0);
+	const list = (value) => {
+		if (!Array.isArray(value)) reject("Node children must be an array.");
+		for (const child of value) node(child);
+	};
+	const node = (value) => {
+		if (value === void 0) reject("A compiled node cannot be undefined.");
+		if (typeof value !== "object" || value === null) return;
+		if (!record(value)) reject("An array cannot be rendered as a node.");
+		if (value.src !== void 0 && (!Array.isArray(value.src) || value.src.length < 2 || value.src.length > 3 || !value.src.every((part) => Number.isInteger(part) && Number(part) >= 0))) reject("A source reference is a line, column and optional file index.");
+		if ("type" in value) {
+			if (value.type === "component") {
+				if (typeof value.name !== "string" || !Object.hasOwn(COMPONENT_DEGRADATIONS, value.name)) reject("Unknown semantic component.");
+				if (value.props !== void 0 && !record(value.props)) reject("Component props must be an object.");
+				if (value.emailColumn !== void 0 && (value.name !== "Column" || !record(value.emailColumn) || typeof value.emailColumn.stack !== "boolean")) reject("Column email layout requires its compile-resolved stacking flag.");
+				if ((value.name === "BrandLogo" || value.name === "BrandFooter") && (!record(value.brand) || typeof value.brand.slug !== "string")) reject("Brand components require resolved brand data.");
+			} else if (value.type === "block" || value.type === "inline") {
+				if (typeof value.tag !== "string" || emailElement(value.tag) === void 0) reject("Unknown semantic intrinsic.");
+				if (value.attrs !== void 0 && !record(value.attrs)) reject("Intrinsic attributes must be an object.");
+			} else reject("Unknown semantic node kind.");
+			if (value.children !== void 0) list(value.children);
+		} else if ("each" in value) {
+			if (typeof value.as !== "string" || value.as === "") reject("A loop requires a variable name.");
+			list(value.children);
+		} else if ("if" in value && Array.isArray(value.then)) {
+			list(value.then);
+			if (value.else !== void 0) list(value.else);
+		} else if ("el" in value) {
+			if (value.attrs !== void 0 && !record(value.attrs)) reject("Element attributes must be an object.");
+			if (value.children !== void 0) list(value.children);
+		} else if ("raw" in value && !Array.isArray(value.raw)) reject("Compatibility markup requires a list of parts.");
+	};
+	node(body);
+	if (presentation === void 0) return;
+	if (!record(presentation) || !record(presentation.nodes) || typeof presentation.headCss !== "string" || typeof presentation.fontFaceCss !== "string" || !record(presentation.brandPlugin)) reject("Invalid email presentation plan.");
+	for (const [ordinal, entry] of Object.entries(presentation.nodes)) {
+		if (!/^(0|[1-9]\d*)$/.test(ordinal) || !record(entry)) reject("Invalid email presentation ordinal.");
+		if (Object.keys(entry).some((key) => ![
+			"attrs",
+			"style",
+			"raw"
+		].includes(key))) reject("A presentation override cannot contain document structure.");
+		if (entry.attrs !== void 0 && !record(entry.attrs)) reject("Presentation attributes must be an object.");
+		if (entry.raw !== void 0 && !Array.isArray(entry.raw)) reject("Presentation compatibility markup requires a list of parts.");
+	}
+};
+//#endregion
+//#region src/email/brand.ts
+/** Every class the brand components use, compiled for any project that imports them. */
+const BRAND_COMPONENT_CLASSES = [
+	"dark:hidden!",
+	"hidden",
+	"dark:block!",
+	"text-xs",
+	"text-muted-foreground",
+	"text-center",
+	"font-semibold",
+	"underline"
+];
+const addressLines = (address) => [
+	address.street1,
+	address.street2,
+	[
+		address.city,
+		address.region,
+		address.postalCode
+	].filter((part) => part.trim() !== "").join(", "),
+	address.country
+].filter((line) => line !== void 0 && line.trim() !== "");
+const classes = (...names) => {
+	const joined = names.filter((name) => name !== void 0 && name !== "").join(" ");
+	return joined === "" ? void 0 : joined;
+};
+const line = (children, last) => jsx("p", {
+	style: { margin: last ? "0" : "0 0 8px 0" },
+	children
+});
+/** The alignment a footer `className` asks for; the footer centers when it names none. */
+const footerAlignment = (className) => /(?:^|\s)text-(left|center|right)(?:\s|$)/.exec(className ?? "")?.[1] ?? "center";
+/** Bind `BrandLogo` and `BrandFooter` to one brand, marked as the plugin names. */
+const brandComponents = (brand, plugin = samvaBrandPlugin) => {
+	const assets = brand.assets ?? {};
+	const footer = brand.footer ?? {};
+	const BrandLogo = ({ width = 120, alt, align, className }) => {
+		if (assets.logoUrl === void 0) return null;
+		const label = alt ?? footer.companyName ?? "";
+		const image = (src, imageClass, imageAlt) => jsx("img", {
+			src,
+			alt: imageAlt,
+			width,
+			border: 0,
+			...align === void 0 ? {} : { align },
+			className: classes(imageClass, className),
+			style: {
+				display: "block",
+				outline: "none",
+				border: "none",
+				height: "auto"
+			}
+		});
+		if (assets.logoDarkUrl === void 0) return image(assets.logoUrl, void 0, label);
+		return jsx(Fragment, { children: [image(assets.logoUrl, "dark:hidden!", label), jsx("div", {
+			className: "hidden dark:block!",
+			style: {
+				msoHide: "all",
+				maxHeight: 0,
+				overflow: "hidden"
+			},
+			children: image(assets.logoDarkUrl, void 0, "")
+		})] });
+	};
+	const BrandFooter = ({ unsubscribeLabel = "Unsubscribe", className }) => {
+		const items = [];
+		const separator = () => items.length === 0 ? [] : [" · "];
+		if (footer.companyName !== void 0 && footer.companyName.trim() !== "") items.push(jsx("span", {
+			className: "font-semibold",
+			children: footer.companyName
+		}));
+		for (const link of footer.socialLinks ?? []) items.push(...separator(), jsx("a", {
+			href: link.url,
+			className: "text-muted-foreground underline",
+			children: link.label
+		}));
+		items.push(jsx("span", {
+			[plugin.unsubscribeRowAttribute]: "",
+			[BRAND_FOOTER_MARKER]: true,
+			children: [...items.length === 0 ? [] : [rawMarkup(" · ", "\n")], unsubscribeLink(unsubscribeLabel, plugin)]
+		}));
+		const address = footer.address === void 0 ? [] : addressLines(footer.address);
+		const alignment = footerAlignment(className);
+		return jsx("table", {
+			role: "presentation",
+			width: "100%",
+			border: 0,
+			cellpadding: 0,
+			cellspacing: 0,
+			[plugin.footerAttribute]: "",
+			[BRAND_FOOTER_MARKER]: true,
+			children: jsx("tbody", { children: jsx("tr", { children: jsx("td", {
+				align: alignment,
+				className: classes("text-xs text-muted-foreground", alignment === "center" ? "text-center" : void 0, className),
+				style: { padding: "32px 16px" },
+				children: [line(items, address.length === 0), ...address.length === 0 ? [] : [line([address.join(", ")], true)]]
+			}) }) })
+		});
+	};
+	return {
+		BrandLogo,
+		BrandFooter
+	};
+};
+/**
+* The unsubscribe link. Its href is the placeholder, which no author-written
+* link may carry: the serializer accepts it only on this node, and writes the
+* plugin's no-track marker on it so click tracking never rewrites it.
+*/
+const unsubscribeLink = (label, plugin) => jsx("a", {
+	href: plugin.unsubscribeUrlPlaceholder,
+	className: "text-muted-foreground underline",
+	[UNSUBSCRIBE_LINK]: true,
+	children: label
+});
+/** Read the plugin's footer markers from rendered HTML. */
+const renderedFooterMarkers = (html, plugin = samvaBrandPlugin) => ({
+	footer: html.includes(`${plugin.footerAttribute}=""`),
+	unsubscribeLink: html.includes(`href="${escapeAttribute(plugin.unsubscribeUrlPlaceholder)}"`)
+});
+/**
+* Drop the unsubscribe row from a rendered message, for a send that resolved
+* no unsubscribe group: there is no link to put there, so the row goes.
+*/
+const withoutUnsubscribeRow = (rendered, plugin = samvaBrandPlugin) => ({
+	html: rendered.html?.replace(new RegExp(`<(span|tr) ${plugin.unsubscribeRowAttribute}=""[^>]*>[\\s\\S]*?</\\1>`, "g"), ""),
+	text: rendered.text?.split("\n").filter((textLine) => !textLine.includes(plugin.unsubscribeUrlPlaceholder)).join("\n")
+});
+//#endregion
+//#region src/email/primitive-css.ts
+/** The classes the primitives put on the elements they generate. */
+const PRIMITIVE_CLASSES = {
+	email: "sml-email",
+	button: "sml-button",
+	link: "sml-link",
+	divider: "sml-divider",
+	stack: "sml-stack"
+};
+const PRIMITIVE_CSS = `@layer components {
+  .${PRIMITIVE_CLASSES.email} {
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .${PRIMITIVE_CLASSES.button} {
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+    font-family: var(--font-sans);
+    border-radius: var(--radius);
+  }
+  .${PRIMITIVE_CLASSES.link} {
+    color: var(--color-primary);
+    text-decoration: underline;
+  }
+  .${PRIMITIVE_CLASSES.divider} {
+    border-top: 1px solid var(--color-border);
+  }
+}
+@media only screen and (max-width: 599px) {
+  .${PRIMITIVE_CLASSES.stack} {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+`;
+//#endregion
+//#region src/ir/tokens.ts
+const OPEN = "";
+const CLOSE = "";
+const TOKEN = /(\d+)/g;
+/** Values and node lists a component call reads at render time, addressable from inside a string. */
+var Tokens = class {
+	entries = [];
+	value(value) {
+		if (typeof value === "string") return value;
+		this.entries.push({ value });
+		return `${OPEN}${this.entries.length - 1}${CLOSE}`;
+	}
+	nodes(nodes) {
+		this.entries.push({ nodes });
+		return `${OPEN}${this.entries.length - 1}${CLOSE}`;
+	}
+	/** A string with tokens in it, as static text and the entries it names. */
+	parse(input) {
+		const parts = [];
+		let last = 0;
+		for (const match of input.matchAll(TOKEN)) {
+			if (match.index > last) parts.push(input.slice(last, match.index));
+			const entry = this.entries[Number(match[1])];
+			if (entry !== void 0) parts.push(entry);
+			last = match.index + match[0].length;
+		}
+		if (last < input.length) parts.push(input.slice(last));
+		return parts;
+	}
+	/** The value a string with tokens stands for: itself, one entry's value, or their concatenation. */
+	toValue(input) {
+		const parts = this.parse(input);
+		if (parts.length === 0) return "";
+		const values = [];
+		for (const part of parts) if (typeof part === "string") values.push(part);
+		else if ("value" in part) values.push(part.value);
+		else return void 0;
+		return values.length === 1 ? values[0] : { concat: values };
+	}
+};
+/** A prop value for a primitive: a literal stays itself and anything else becomes a token. */
+const propFor = (tokens, value) => isStaticScalar(value) ? value : tokens.value(value);
+const SOURCE = (source) => source === void 0 ? {} : { src: source };
+/** Split compatibility markup into parts, deciding by position whether a token is in a tag. */
+const rawParts = (tokens, html) => {
+	const parts = [];
+	let inTag = false;
+	let quote;
+	let buffer = "";
+	const flush = () => {
+		if (buffer !== "") parts.push(buffer);
+		buffer = "";
+	};
+	for (let index = 0; index < html.length; index++) {
+		const character = html[index];
+		if (character === OPEN) {
+			const end = html.indexOf(CLOSE, index);
+			const entry = tokens.parse(html.slice(index, end + 1))[0];
+			if (end > index && entry !== void 0 && typeof entry !== "string" && "value" in entry) {
+				flush();
+				parts.push(inTag ? { attr: entry.value } : { text: entry.value });
+				index = end;
+				continue;
+			}
+		}
+		if (!inTag && character === "<") inTag = true;
+		else if (inTag && quote === void 0 && (character === "\"" || character === "'")) quote = character;
+		else if (inTag && quote === character) quote = void 0;
+		else if (inTag && quote === void 0 && character === ">") inTag = false;
+		buffer += character;
+	}
+	flush();
+	return parts;
+};
+const styleList = (tokens, style) => {
+	if (!isObject(style)) return void 0;
+	const entries = [];
+	for (const [property, value] of Object.entries(style)) {
+		if (value === void 0 || value === null) continue;
+		if (typeof value === "number") entries.push([property, value]);
+		else if (typeof value === "string") {
+			const resolved = tokens.toValue(value);
+			if (resolved !== void 0) entries.push([property, resolved]);
+		}
+	}
+	return entries;
+};
+/** Turn the tree a primitive returned back into IR, restoring each token to what it stood for. */
+const emailNodeToIr = (node, tokens, source) => {
+	if (node === null) return [];
+	switch (node.type) {
+		case "Text": {
+			const output = [];
+			for (const part of tokens.parse(node.value)) if (typeof part === "string") output.push(part);
+			else if ("value" in part) output.push(part.value);
+			else output.push(...part.nodes);
+			return output;
+		}
+		case "Fragment": return node.children.flatMap((childNode) => emailNodeToIr(childNode, tokens, source));
+		case "Raw": return [{
+			raw: rawParts(tokens, node.html),
+			...node.text === "" ? {} : { text: node.text },
+			...SOURCE(source)
+		}];
+		case "Element": {
+			const attrs = {};
+			let style;
+			for (const [key, value] of Object.entries(node.props)) {
+				if (key === "key" || value === void 0 || value === null || value === false) continue;
+				if (key === "style") {
+					style = styleList(tokens, value);
+					continue;
+				}
+				const name = key === "className" ? "class" : key;
+				if (typeof value === "string") attrs[name] = tokens.toValue(value) ?? value;
+				else if (typeof value === "number" || value === true) attrs[name] = value;
+			}
+			const reserved = node.props[BRAND_FOOTER_MARKER] === true;
+			return [{
+				el: node.tag,
+				...Object.keys(attrs).length === 0 ? {} : { attrs },
+				...style === void 0 || Array.isArray(style) && style.length === 0 ? {} : { style },
+				...node.children.length === 0 ? {} : { children: node.children.flatMap((childNode) => emailNodeToIr(childNode, tokens, source)) },
+				...reserved ? { reserved: true } : {},
+				...SOURCE(source)
+			}];
+		}
+	}
+};
+//#endregion
+//#region src/lower/email.ts
+const prop = (tokens, value) => {
+	if (typeof value === "object" && value !== null && "object" in value) return Object.fromEntries(Object.entries(value.object).map(([key, field]) => [key, prop(tokens, field)]));
+	return propFor(tokens, value);
+};
+/** Pass tokens through the real primitives, preserving their string-child/VML behavior. */
+const childrenProp = (tokens, nodes) => {
+	const only = nodes.length === 1 ? nodes[0] : void 0;
+	if (only !== void 0 && isValueNode(only) && only !== null && typeof only !== "boolean") return typeof only === "string" ? only : tokens.value(only);
+	return nodes.map((node) => isValueNode(node) ? typeof node === "string" ? node : tokens.value(node) : tokens.nodes([node]));
+};
+/**
+* Expand one semantic document through the existing email primitives. Input expressions remain
+* expressions: expansion does not evaluate input, call the compiler or resolve any stylesheet.
+* Both compiler CSS preparation and send-time rendering use this exact lowering.
+*/
+const lowerEmailNodes = (nodes, brandPlugin = samvaBrandPlugin, report) => {
+	const components = {
+		Email,
+		Section,
+		Columns,
+		Column,
+		Button,
+		Spacer,
+		Divider,
+		Image,
+		Link
+	};
+	const walk = (list) => list.flatMap((node) => {
+		if (isValueNode(node)) return [node];
+		if ("type" in node) {
+			if (node.type !== "component") {
+				const { type: _type, tag, children, ...rest } = node;
+				return [{
+					el: tag,
+					...rest,
+					...children === void 0 ? {} : { children: walk(children) }
+				}];
+			}
+			const kids = walk(node.children ?? []);
+			const tokens = new Tokens();
+			const props = {};
+			for (const [name, value] of Object.entries(node.props ?? {})) {
+				if (node.name === "Columns" && (name === "each" || name === "per" || name === "stack" && node.props?.each !== void 0)) continue;
+				props[name] = prop(tokens, value);
+			}
+			if (node.name === "Column") {
+				if (props.width === void 0 && node.emailColumn?.width !== void 0) props.width = propFor(tokens, node.emailColumn.width);
+				if (node.emailColumn?.stack === true) props.className = typeof props.className === "string" && props.className !== "" ? `${PRIMITIVE_CLASSES.stack} ${props.className}` : PRIMITIVE_CLASSES.stack;
+			}
+			if (kids.length > 0) props.children = childrenProp(tokens, kids);
+			if (node.name === "Button" && typeof props.children === "string" && props.children !== "" && props.width === void 0 && props.height !== void 0 && tokens.toValue(props.children) !== props.children) report?.({
+				code: "button-dynamic-label",
+				severity: "error",
+				message: "A button with a dynamic label requires an explicit width for its Outlook fallback."
+			});
+			const output = (node.name === "BrandLogo" || node.name === "BrandFooter" ? brandComponents({
+				...node.brand,
+				css: ""
+			}, brandPlugin)[node.name] : components[node.name])(props);
+			if (output !== null) for (const diagnostic of collectEmailDiagnostics(output)) report?.(diagnostic);
+			return [...emailNodeToIr(output, tokens, node.src)];
+		}
+		if ("el" in node) return [{
+			...node,
+			...node.children === void 0 ? {} : { children: walk(node.children) }
+		}];
+		if ("each" in node) return [{
+			...node,
+			children: walk(node.children)
+		}];
+		if ("if" in node) return [{
+			...node,
+			then: walk(node.then),
+			...node.else === void 0 ? {} : { else: walk(node.else) }
+		}];
+		return [node];
+	});
+	return walk(nodes);
+};
+//#endregion
+//#region src/lower/web.ts
+/** Web-only defaults live below project utilities; explicit props are emitted separately. */
+const WEB_BASE_STYLES = [{
+	at: "layer sml-web-components",
+	children: [
+		{
+			selector: ":where(.sml-web-email,.sml-web-email *)",
+			style: [["box-sizing", "border-box"]]
+		},
+		{
+			selector: ".sml-web-email",
+			style: [
+				["color", "var(--color-foreground)"],
+				["font-family", "var(--font-sans)"],
+				["background-color", "var(--color-background)"],
+				["padding-inline", "16px"]
+			]
+		},
+		{
+			selector: ".sml-web-section",
+			style: [["width", "100%"], ["margin-inline", "auto"]]
+		},
+		{
+			selector: ".sml-web-columns",
+			style: [
+				["display", "grid"],
+				["grid-auto-flow", "column"],
+				["grid-auto-columns", "minmax(0,1fr)"],
+				["grid-template-columns", "var(--sml-web-columns,none)"],
+				["width", "100%"],
+				["margin-inline", "auto"]
+			]
+		},
+		{
+			selector: ".sml-web-column",
+			style: [["min-width", "0"]]
+		},
+		{
+			selector: ".sml-web-button",
+			style: [
+				["display", "inline-flex"],
+				["align-items", "center"],
+				["justify-content", "center"],
+				["box-sizing", "border-box"],
+				["background-color", "var(--color-primary)"],
+				["color", "var(--color-primary-foreground)"],
+				["font-family", "var(--font-sans)"],
+				["border-radius", "var(--radius)"],
+				["font-size", "16px"],
+				["font-weight", "bold"],
+				["line-height", "1.2"],
+				["padding-inline", "16px"],
+				["text-align", "center"],
+				["text-decoration", "none"],
+				["max-width", "100%"]
+			]
+		},
+		{
+			selector: ".sml-web-link",
+			style: [["color", "var(--color-primary)"], ["text-decoration", "underline"]]
+		},
+		{
+			selector: ".sml-web-divider",
+			style: [["border", "0"], ["border-top", "1px solid var(--color-border)"]]
+		},
+		{
+			selector: ".sml-web-image",
+			style: [
+				["display", "block"],
+				["max-width", "100%"],
+				["height", "auto"]
+			]
+		},
+		{
+			selector: ".sml-web-logo-dark",
+			style: [["display", "none"]]
+		},
+		{
+			selector: ".sml-web-footer",
+			style: [
+				["padding", "32px 16px"],
+				["font-size", "0.75rem"],
+				["color", "var(--color-muted-foreground)"],
+				["text-align", "center"]
+			]
+		},
+		{
+			selector: ".sml-web-footer address",
+			style: [["font-style", "normal"]]
+		},
+		{
+			at: "media (max-width:599px)",
+			children: [{
+				selector: ".sml-web-columns-stack",
+				style: [["grid-auto-flow", "row"], ["grid-template-columns", "minmax(0,1fr)"]]
+			}, {
+				selector: ".sml-web-columns-stack > .sml-web-column",
+				style: [["width", "100%!important"], ["max-width", "100%!important"]]
+			}]
+		},
+		{
+			at: "media (prefers-color-scheme:dark)",
+			children: [{
+				selector: ".sml-web-logo-light",
+				style: [["display", "none"]]
+			}, {
+				selector: ".sml-web-logo-dark",
+				style: [["display", "block"]]
+			}]
+		}
+	]
+}];
+/** Only the semantic web tags added by lowering extend the shared serializer vocabulary. */
+const webElement = (tag) => [
+	"main",
+	"section",
+	"footer",
+	"address"
+].includes(tag) ? emailElement("div") : emailElement(tag);
+const value = (prop) => typeof prop === "object" && prop !== null && "object" in prop ? void 0 : prop;
+const choose = (prop, expected, yes, no) => ({
+	if: {
+		cmp: "eq",
+		args: [prop, expected]
+	},
+	then: yes,
+	else: no
+});
+const styleFields = (prop) => {
+	if (typeof prop !== "object" || prop === null || !("object" in prop)) return [];
+	return Object.entries(prop.object).flatMap(([key, field]) => {
+		const resolved = value(field);
+		return resolved === void 0 ? [] : [[key, resolved]];
+	});
+};
+const layoutStyle = (entries) => entries.filter(([property]) => !/^(?:mso|borderCollapse$|borderSpacing$|tableLayout$|border-collapse$|border-spacing$|table-layout$)/i.test(property));
+/** Lower identity and layout only. Shared renderer evaluation resolves all bindings and loops. */
+const lowerWebNodes = (nodes, plugin, reject, presentation) => {
+	const headHints = /* @__PURE__ */ new Map();
+	const stylesheets = /* @__PURE__ */ new Map();
+	const gridTracks = /* @__PURE__ */ new Map();
+	let stylesheet = 0;
+	const titleNodes = (list) => list.flatMap((node) => {
+		if (isValueNode(node)) return [];
+		if ("if" in node) {
+			const then = titleNodes(node.then);
+			const otherwise = titleNodes(node.else ?? []);
+			return then.length === 0 && otherwise.length === 0 ? [] : [{
+				...node,
+				then,
+				...node.else === void 0 ? {} : { else: otherwise }
+			}];
+		}
+		if ("each" in node) {
+			const children = titleNodes(node.children);
+			return children.length === 0 ? [] : [{
+				...node,
+				children
+			}];
+		}
+		if ("type" in node && node.type === "component") return [];
+		if ("type" in node || "el" in node) {
+			const tag = "type" in node ? node.tag : node.el;
+			if (tag === "title") return [...node.children ?? []];
+			if (tag === "head") return titleNodes(node.children ?? []);
+		}
+		return [];
+	});
+	const walk = (list, sizedTracks = false) => list.flatMap((node) => {
+		if (isValueNode(node)) return [node];
+		if ("type" in node && node.type === "component") return component(node, sizedTracks);
+		if ("type" in node || "el" in node) {
+			const tag = "type" in node ? node.tag : node.el;
+			if (tag === "head") return walk(node.children ?? []);
+			if (tag === "title" || tag === "meta") return [];
+			if (tag === "style") {
+				const marker = { el: "style" };
+				const rules = presentation?.stylesheets?.[stylesheet++];
+				if (rules === void 0) return reject("Authored styles require a compiler-parsed web stylesheet.");
+				stylesheets.set(marker, rules);
+				return [marker];
+			}
+			if (["script", "link"].includes(tag)) return reject("Web bodies cannot contain raw text or shell metadata elements.");
+			const mapped = tag === "html" ? "main" : tag === "body" ? "div" : tag;
+			const attrs = tag === "html" ? Object.fromEntries(Object.entries(node.attrs ?? {}).filter(([key]) => !key.startsWith("xmlns"))) : tag === "body" ? Object.fromEntries(Object.entries(node.attrs ?? {}).filter(([key]) => key !== "bgcolor")) : node.attrs;
+			const output = {
+				el: mapped,
+				...attrs === void 0 ? {} : { attrs },
+				...node.style === void 0 ? {} : { style: node.style },
+				...node.src === void 0 ? {} : { src: node.src },
+				...node.children === void 0 ? {} : { children: walk(node.children) }
+			};
+			if (tag === "html") headHints.set(output, {
+				...node.attrs?.lang === void 0 ? {} : { lang: node.attrs.lang },
+				...node.attrs?.dir === void 0 ? {} : { dir: node.attrs.dir },
+				titleNodes: titleNodes(node.children ?? [])
+			});
+			if (tag === "body" && node.attrs?.bgcolor !== void 0) return [{
+				el: "div",
+				style: [["backgroundColor", node.attrs.bgcolor]],
+				children: [output],
+				...node.src === void 0 ? {} : { src: node.src }
+			}];
+			return [output];
+		}
+		if ("each" in node) return [{
+			...node,
+			children: walk(node.children, sizedTracks)
+		}];
+		if ("if" in node) return [{
+			...node,
+			then: walk(node.then, sizedTracks),
+			...node.else === void 0 ? {} : { else: walk(node.else, sizedTracks) }
+		}];
+		if ("preheader" in node) return [];
+		return reject("Raw email compatibility markup cannot be rendered to the web.");
+	});
+	const component = (node, sizedTracks) => {
+		const p = node.props ?? {};
+		const get = (key) => {
+			const field = p[key];
+			if (typeof field === "object" && field !== null && "object" in field) return reject(`Component prop ${key} must be a scalar expression.`);
+			return field;
+		};
+		for (const key of ["style", "tableStyle"]) {
+			const field = p[key];
+			if (field !== void 0 && (typeof field !== "object" || field === null || !("object" in field))) return reject(`Component ${key} must contain named declarations.`);
+			if (typeof field === "object" && field !== null && "object" in field && Object.values(field.object).some((v) => typeof v === "object" && v !== null && "object" in v)) return reject("Style declarations cannot contain nested objects.");
+		}
+		const attrs = {};
+		const css = /* @__PURE__ */ new Map();
+		const set = (key, v) => {
+			if (v !== void 0) css.set(key, v);
+		};
+		const copy = (...keys) => {
+			for (const key of keys) {
+				const v = get(key);
+				if (v !== void 0) attrs[key] = v;
+			}
+		};
+		const style = (...keys) => {
+			for (const key of keys) set(key, get(key));
+		};
+		const alignment = (v) => {
+			if (v === void 0) return;
+			set("marginLeft", choose(v, "right", "auto", choose(v, "center", "auto", "0")));
+			set("marginRight", choose(v, "left", "auto", choose(v, "center", "auto", "0")));
+		};
+		let tag;
+		let own = `sml-web-${node.name.toLowerCase()}`;
+		const fixedTracks = node.name === "Columns" && (node.children?.length ?? 0) > 0 && node.children.every((kid) => typeof kid === "object" && kid !== null && "type" in kid && kid.type === "component" && kid.name === "Column");
+		let kids = walk(node.children ?? [], fixedTracks);
+		if ((node.children?.length ?? 0) === 0) {
+			const content = get("children");
+			if (content !== void 0) kids = [content];
+		}
+		const child = (el, children, extra = {}) => ({
+			el,
+			children,
+			...extra,
+			...node.src === void 0 ? {} : { src: node.src }
+		});
+		switch (node.name) {
+			case "Email":
+				tag = "main";
+				own += " sml-email";
+				copy("lang", "dir");
+				style("backgroundColor");
+				set("paddingInline", get("gutter"));
+				break;
+			case "Section":
+				tag = "section";
+				set("maxWidth", get("width"));
+				set("backgroundColor", get("bgcolor"));
+				alignment(get("align"));
+				for (const [key, field] of layoutStyle(styleFields(p.tableStyle))) set(key, field);
+				break;
+			case "Columns":
+				tag = "div";
+				if (get("stack") !== false) own += " sml-web-columns-stack";
+				set("maxWidth", get("width"));
+				set("gap", get("gap"));
+				alignment(get("align"));
+				if (typeof p.per === "number") set("--sml-web-columns", `repeat(${p.per},minmax(0,1fr))`);
+				else if (fixedTracks) {
+					const widths = node.children.map((kid) => {
+						if (typeof kid !== "object" || kid === null || !("type" in kid) || kid.type !== "component") return void 0;
+						return value(kid.props?.width);
+					});
+					const tracks = { concat: widths.flatMap((width, index) => [...index === 0 ? [] : [" "], width ?? "minmax(0,1fr)"]) };
+					gridTracks.set(tracks, widths);
+					set("--sml-web-columns", tracks);
+				}
+				break;
+			case "Column": {
+				tag = "div";
+				const width = get("width");
+				if (!sizedTracks) set("width", width);
+				set("textAlign", get("align"));
+				if (get("valign") !== void 0) set("alignSelf", choose(get("valign"), "middle", "center", choose(get("valign"), "bottom", "end", "start")));
+				break;
+			}
+			case "Button":
+				tag = "a";
+				own += " sml-button";
+				copy("href");
+				style("width", "height", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "fontFamily");
+				set("paddingInline", get("paddingX"));
+				if (get("borderColor") !== void 0) set("borderStyle", "solid");
+				alignment(get("align"));
+				if (get("align") !== void 0) {
+					set("display", "flex");
+					set("width", get("width") ?? "fit-content");
+				}
+				break;
+			case "Spacer":
+				tag = "div";
+				attrs["aria-hidden"] = "true";
+				style("height");
+				kids = [];
+				break;
+			case "Divider":
+				tag = "hr";
+				own += " sml-divider";
+				set("borderTopColor", get("color"));
+				set("borderTopWidth", get("thickness"));
+				break;
+			case "Image":
+				tag = "img";
+				copy("src", "alt", "width", "height");
+				alignment(get("align"));
+				break;
+			case "Link":
+				tag = "a";
+				own += " sml-link";
+				copy("href", "target", "rel");
+				break;
+			case "BrandLogo": {
+				const brand = node.brand;
+				if (brand.assets?.logoUrl === void 0) return [];
+				const alt = get("alt") ?? brand.footer?.companyName ?? "";
+				const image = (src, dark) => child("img", [], { attrs: {
+					src,
+					alt,
+					width: get("width") ?? 120,
+					class: { concat: [`sml-web-image${brand.assets?.logoDarkUrl === void 0 ? "" : dark ? " sml-web-logo-dark" : " sml-web-logo-light"}`, ...get("className") === void 0 ? [] : [" ", get("className")]] }
+				} });
+				tag = "div";
+				if (get("align") !== void 0) {
+					set("display", "grid");
+					set("justifyItems", choose(get("align"), "right", "end", choose(get("align"), "center", "center", "start")));
+				}
+				kids = [image(brand.assets.logoUrl, false), ...brand.assets.logoDarkUrl === void 0 ? [] : [image(brand.assets.logoDarkUrl, true)]];
+				break;
+			}
+			case "BrandFooter": {
+				tag = "footer";
+				own = "sml-web-footer";
+				attrs[plugin.footerAttribute] = "";
+				const footer = node.brand.footer ?? {};
+				const items = [];
+				const add = (item) => {
+					if (items.length > 0) items.push(" · ");
+					items.push(item);
+				};
+				if (footer.companyName?.trim()) add(child("strong", [footer.companyName]));
+				for (const link of footer.socialLinks ?? []) add(child("a", [link.label], { attrs: { href: link.url } }));
+				const unsubscribe = child("span", [...items.length === 0 ? [] : [" · "], child("a", [get("unsubscribeLabel") ?? "Unsubscribe"], {
+					attrs: { href: plugin.unsubscribeUrlPlaceholder },
+					reserved: true
+				})], {
+					attrs: { [plugin.unsubscribeRowAttribute]: "" },
+					reserved: true
+				});
+				kids = [child("p", [...items, unsubscribe])];
+				if (footer.address !== void 0) {
+					const a = footer.address;
+					const lines = [
+						a.street1,
+						a.street2,
+						[
+							a.city,
+							a.region,
+							a.postalCode
+						].filter((part) => part.trim() !== "").join(", "),
+						a.country
+					].filter((line) => line !== void 0 && line.trim() !== "");
+					kids.push(child("address", lines.flatMap((line, i) => i === 0 ? [line] : [child("br", []), line])));
+				}
+				break;
+			}
+		}
+		const authored = node.name === "BrandLogo" ? void 0 : get("className");
+		attrs.class = authored === void 0 ? own : { concat: [
+			own,
+			" ",
+			authored
+		] };
+		for (const [key, field] of layoutStyle(styleFields(p.style))) set(key, field);
+		const output = {
+			el: tag,
+			attrs,
+			...css.size === 0 ? {} : { style: [...css] },
+			...kids.length === 0 ? {} : { children: kids },
+			...node.name === "BrandFooter" ? { reserved: true } : {},
+			...node.src === void 0 ? {} : { src: node.src }
+		};
+		if (node.name === "Email") headHints.set(output, {
+			...get("title") === void 0 ? {} : { title: get("title") },
+			lang: get("lang") ?? "en",
+			dir: get("dir") ?? "ltr"
+		});
+		return [output];
+	};
+	return {
+		nodes: walk(nodes),
+		headHints,
+		stylesheets,
+		gridTracks
+	};
+};
+//#endregion
+//#region src/sms-segments.ts
+const GSM7_EXTENDED = /* @__PURE__ */ new Set([
+	"[",
+	"]",
+	"{",
+	"}",
+	"\\",
+	"~",
+	"|",
+	"€",
+	"^",
+	"\f"
+]);
+const GSM7_BASIC_PATTERN = /^[@£$¥èéùìòÇ\nØø\rÅåΔ_ΦΓΛΩΠΨΣΘΞÆæßÉ !"#¤%&'()*+,\-./:;<=>?¡0-9ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÑܧ¿abcdefghijklmnopqrstuvwxyzäöñüà]*$/;
+const containsNonGsmCharacters = (text) => {
+	for (const char of text) {
+		if (GSM7_EXTENDED.has(char)) continue;
+		if (!GSM7_BASIC_PATTERN.test(char)) return true;
+	}
+	return false;
+};
+const smsSegmentInfo = (text) => {
+	if (containsNonGsmCharacters(text)) {
+		const codePoints = [...text].length;
+		const segmentCount = codePoints <= 70 ? 1 : Math.ceil(codePoints / 67);
+		return {
+			encoding: "ucs2",
+			characterCount: text.length,
+			segmentCount
+		};
+	}
+	let encodedLength = 0;
+	for (const char of text) encodedLength += GSM7_EXTENDED.has(char) ? 2 : 1;
+	const segmentCount = encodedLength <= 160 ? 1 : Math.ceil(encodedLength / 153);
+	return {
+		encoding: "gsm7",
+		characterCount: text.length,
+		segmentCount
+	};
+};
+//#endregion
+//#region src/render-template.ts
+var RenderError = class extends TaggedError("RenderError") {
+	constructor(args) {
+		super({
+			diagnostics: args.diagnostics,
+			message: `Template render rejected: ${args.diagnostics.map((item) => `${item.code}: ${item.message}`).join("; ")}`
+		});
+	}
+};
+const fail = (code, message) => {
+	throw new RenderError({ diagnostics: [{
+		code,
+		message
+	}] });
+};
+const MAX_ITERATIONS = 1e4;
+const MAX_DEPTH = 64;
+/** Classic Outlook lays a document out correctly only under a transitional doctype. */
+const EMAIL_DOCTYPE = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
+const PREHEADER_TARGET_LENGTH$1 = 200;
+const PREHEADER_PADDING$1 = "\xA0‌​‍‎‏";
+const escapeText$1 = (value) => value.replace(/[&<>]/g, (character) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;"
+})[character] ?? character);
+const escapeAttribute$1 = (value) => value.replace(/[&<>"']/g, (character) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+})[character] ?? character);
+const CONTROL_CHARACTERS$1 = /[\u0000-\u001f\u007f]/;
+const SAFE_URL_SCHEME$1 = /^(https:\/\/|mailto:|tel:|cid:|#)/i;
+/** A delivered message can resolve only an absolute URL, so relative references are refused. */
+const isSafeUrl$1 = (value) => !/^[\u0000- ]/.test(value) && !CONTROL_CHARACTERS$1.test(value) && !value.includes("\\") && SAFE_URL_SCHEME$1.test(value);
+const CSS_PROPERTY$1 = /^(--[a-zA-Z0-9-]+|[a-zA-Z][a-zA-Z0-9-]*)$/;
+const CSS_UNSAFE$1 = /[;{}<>\\]|expression\s*\(|@import|\/\*/i;
+const CSS_URL$1 = /url\(\s*(?:"([^"]*)"|'([^']*)'|([^)]*))\s*\)/gi;
+const kebab$1 = (property) => property.startsWith("--") ? property : property.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
+const UNITLESS$1 = /* @__PURE__ */ new Set([
+	"opacity",
+	"zIndex",
+	"fontWeight",
+	"lineHeight",
+	"order",
+	"flexGrow",
+	"flexShrink",
+	"columnCount",
+	"orphans",
+	"widows",
+	"zoom",
+	"fillOpacity",
+	"strokeOpacity"
+]);
+const declarationValue$1 = (property, value) => typeof value === "number" && value !== 0 && !UNITLESS$1.has(property) && !property.startsWith("--") ? `${value}px` : String(value);
+const webWidth = (value) => typeof value === "number" || /^\d+(?:\.\d+)?$/.test(value) ? `${value}px` : value;
+const report$1 = (ctx, code, message) => {
+	ctx.diagnostics.push({
+		code,
+		message
+	});
+};
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const has = (value, key) => Object.hasOwn(value, key);
+const FORBIDDEN_SEGMENTS = /* @__PURE__ */ new Set([
+	"__proto__",
+	"constructor",
+	"prototype"
+]);
+const ARRAY_INDEX = /^(0|[1-9]\d*)$/;
+const step = (value, segment) => {
+	if (FORBIDDEN_SEGMENTS.has(segment)) return void 0;
+	if (Array.isArray(value)) return ARRAY_INDEX.test(segment) && Object.hasOwn(value, segment) ? value[Number(segment)] : void 0;
+	if (isRecord(value) && Object.hasOwn(value, segment)) return value[segment];
+};
+const resolvePath = (ctx, scope, path) => {
+	if (typeof path !== "string" || path === "") return void 0;
+	const [first = "", ...rest] = path.split(".");
+	if (FORBIDDEN_SEGMENTS.has(first)) return void 0;
+	let current = first.startsWith("$") ? scope.get(first) : step(ctx.input, first);
+	for (const segment of rest) {
+		if (current === void 0 || current === null) return void 0;
+		current = step(current, segment);
+	}
+	return current;
+};
+const invalid = (message) => fail("invalid-value", message);
+/** The text a value contributes: strings as is, finite numbers, nothing for null and booleans. */
+const textOf = (value) => {
+	if (typeof value === "string") return value;
+	if (typeof value === "number") return Number.isFinite(value) ? String(value) : invalid("A non-finite number cannot be text.");
+	if (value === null || value === void 0 || typeof value === "boolean") return "";
+	return invalid("An object or array cannot be rendered as text.");
+};
+const finiteNumber = (value, what) => typeof value === "number" && Number.isFinite(value) ? value : invalid(`${what} must be a finite number.`);
+const arithmetic = (op, left, right) => {
+	if ((op === "/" || op === "%") && right === 0) return invalid("Division by zero.");
+	let result;
+	switch (op) {
+		case "+":
+			result = left + right;
+			break;
+		case "-":
+			result = left - right;
+			break;
+		case "*":
+			result = left * right;
+			break;
+		case "/":
+			result = left / right;
+			break;
+		case "%":
+			result = left % right;
+			break;
+		default: return invalid(`Unknown arithmetic operator ${JSON.stringify(op)}.`);
+	}
+	return Number.isFinite(result) ? result : invalid("Arithmetic produced a non-finite number.");
+};
+const formatterContext = (ctx) => {
+	ctx.fmt ??= createFmt({
+		locale: ctx.locale,
+		timeZone: ctx.timeZone
+	});
+	return ctx.fmt;
+};
+const applyFormat = (ctx, name, args) => {
+	if (typeof name !== "string") return invalid("A format node needs a formatter name.");
+	try {
+		return callFormatter(formatterContext(ctx), name, args);
+	} catch (error) {
+		return fail("format-error", error instanceof Error ? error.message : String(error));
+	}
+};
+const nullish = (value) => value === void 0 ? null : value;
+const compare = (op, left, right) => {
+	switch (op) {
+		case "eq": return nullish(left) === nullish(right);
+		case "ne": return nullish(left) !== nullish(right);
+		case "lt":
+		case "gt":
+		case "le":
+		case "ge": {
+			if (!(typeof left === "number" && typeof right === "number" || typeof left === "string" && typeof right === "string")) return false;
+			const a = left;
+			const b = right;
+			if (op === "lt") return a < b;
+			if (op === "gt") return a > b;
+			return op === "le" ? a <= b : a >= b;
+		}
+		default: return invalid(`Unknown comparison ${JSON.stringify(op)}.`);
+	}
+};
+const checkDepth = (depth) => {
+	if (depth > MAX_DEPTH) fail("render-limit", `Templates nest at most ${MAX_DEPTH} levels deep.`);
+};
+const evalArgs = (ctx, scope, args, depth) => Array.isArray(args) ? args.map((arg) => evalValue(ctx, scope, arg, depth + 1)) : invalid("Arguments must be an array.");
+const evalValue = (ctx, scope, value, depth) => {
+	checkDepth(depth);
+	if (value === null || typeof value !== "object") return value;
+	if (Array.isArray(value)) return invalid("Unknown value node.");
+	const node = value;
+	if (has(node, "bind")) return resolvePath(ctx, scope, node.bind);
+	if (has(node, "lit")) return node.lit;
+	if (has(node, "concat")) return evalArgs(ctx, scope, node.concat, depth).map(textOf).join("");
+	if (has(node, "format")) return applyFormat(ctx, node.format, evalArgs(ctx, scope, node.args, depth));
+	if (has(node, "if")) return evalPredicate(ctx, scope, node.if, depth + 1) ? evalValue(ctx, scope, node.then, depth + 1) : evalValue(ctx, scope, node.else, depth + 1);
+	if (has(node, "op")) {
+		const [left, right] = evalArgs(ctx, scope, node.args, depth);
+		return arithmetic(node.op, finiteNumber(left, "An arithmetic operand"), finiteNumber(right, "An arithmetic operand"));
+	}
+	if (has(node, "count")) {
+		const items = evalValue(ctx, scope, node.count, depth + 1);
+		if (!Array.isArray(items)) return invalid("count applies to an array.");
+		return selectItems(ctx, scope, items, String(node.as), node.where, depth).length;
+	}
+	if (has(node, "length")) {
+		const measured = evalValue(ctx, scope, node.length, depth + 1);
+		return typeof measured === "string" || Array.isArray(measured) ? measured.length : invalid("length applies to a string or an array.");
+	}
+	return invalid("Unknown value node.");
+};
+const evalPredicate = (ctx, scope, predicate, depth) => {
+	checkDepth(depth);
+	if (typeof predicate !== "object" || predicate === null || Array.isArray(predicate)) return invalid("Unknown predicate.");
+	const node = predicate;
+	if (has(node, "present")) return Boolean(resolvePath(ctx, scope, node.present));
+	if (has(node, "truthy")) return Boolean(evalValue(ctx, scope, node.truthy, depth + 1));
+	if (has(node, "not")) return !evalPredicate(ctx, scope, node.not, depth + 1);
+	if (has(node, "and")) return asArray(node.and).every((item) => evalPredicate(ctx, scope, item, depth + 1));
+	if (has(node, "or")) return asArray(node.or).some((item) => evalPredicate(ctx, scope, item, depth + 1));
+	if (has(node, "cmp")) {
+		const [left, right] = evalArgs(ctx, scope, node.args, depth);
+		return compare(node.cmp, left, right);
+	}
+	return invalid("Unknown predicate.");
+};
+const asArray = (value) => Array.isArray(value) ? value : invalid("Expected an array.");
+const declarations$1 = (ctx, scope, entries, depth) => {
+	const parts = [];
+	for (const entry of entries) {
+		if (!Array.isArray(entry) || entry.length !== 2) {
+			report$1(ctx, "invalid-style", "A style declaration is a [property, value] pair.");
+			continue;
+		}
+		const [property, raw] = entry;
+		const tracks = ctx.web?.gridTracks.get(raw);
+		const value = tracks === void 0 ? evalValue(ctx, scope, raw, depth + 1) : tracks.map((track) => {
+			const width = track === void 0 ? void 0 : evalValue(ctx, scope, track, depth + 1);
+			if (width === void 0 || width === null) return "minmax(0,1fr)";
+			if (typeof width !== "string" && !(typeof width === "number" && Number.isFinite(width))) return invalid("A Column width must be a string or finite number.");
+			return webWidth(width);
+		}).join(" ");
+		if (value === void 0 || value === null) continue;
+		if (typeof property !== "string" || !CSS_PROPERTY$1.test(property)) {
+			report$1(ctx, "unsupported-style-property", `Style property ${JSON.stringify(property)} is not a CSS property name.`);
+			continue;
+		}
+		if (typeof value !== "string" && !(typeof value === "number" && Number.isFinite(value))) {
+			report$1(ctx, "invalid-style-value", `Style ${property} must be a string or finite number.`);
+			continue;
+		}
+		const text = ctx.web !== void 0 && ["width", "max-width"].includes(kebab$1(property)) && typeof value === "string" ? webWidth(value) : declarationValue$1(property, value);
+		if (CSS_UNSAFE$1.test(text) || CONTROL_CHARACTERS$1.test(text)) {
+			report$1(ctx, "unsafe-style-value", `Style ${property} contains CSS that could break out of the declaration.`);
+			continue;
+		}
+		let unsafeUrl;
+		const urls = [...text.matchAll(CSS_URL$1)];
+		for (const match of urls) {
+			const url = match[1] ?? match[2] ?? (match[3] ?? "").trim();
+			if (!isSafeUrl$1(url)) unsafeUrl = url;
+		}
+		if ([...text.matchAll(/url\(/gi)].length !== urls.length) unsafeUrl = text;
+		if (unsafeUrl !== void 0) {
+			report$1(ctx, "unsafe-url", `Style ${property} points at ${JSON.stringify(unsafeUrl)}; email URLs must use https:, mailto:, tel:, cid: or a fragment.`);
+			continue;
+		}
+		parts.push(`${kebab$1(property)}:${text}`);
+	}
+	return parts.join(";");
+};
+const styleText = (ctx, scope, style, depth) => {
+	checkDepth(depth);
+	if (typeof style === "string") {
+		if (ctx.web !== void 0) {
+			const fields = style.split(";").filter((part) => part.trim() !== "").map((part) => {
+				const at = part.indexOf(":");
+				if (at < 1) return invalid("A static web style contains property:value declarations.");
+				return [part.slice(0, at).trim(), part.slice(at + 1).trim()];
+			});
+			return declarations$1(ctx, scope, fields, depth);
+		}
+		if (CONTROL_CHARACTERS$1.test(style)) {
+			report$1(ctx, "unsafe-style-value", "A style contains control characters.");
+			return "";
+		}
+		return style;
+	}
+	if (Array.isArray(style)) return declarations$1(ctx, scope, style, depth);
+	if (isRecord(style) && has(style, "if")) return evalPredicate(ctx, scope, style.if, depth + 1) ? styleText(ctx, scope, style.then, depth + 1) : styleText(ctx, scope, style.else, depth + 1);
+	report$1(ctx, "invalid-style", "An element style is a string, a declaration list or a conditional.");
+	return "";
+};
+const attributeText = (ctx, tag, name, spec, value) => {
+	if (value === void 0 || value === null || value === false) return void 0;
+	if (value === true) return "";
+	if (typeof value !== "string" && !(typeof value === "number" && Number.isFinite(value))) {
+		report$1(ctx, "invalid-attribute-value", `<${tag} ${name}> must be a string or finite number, not ${typeof value}.`);
+		return;
+	}
+	const text = String(value);
+	if (CONTROL_CHARACTERS$1.test(text)) {
+		report$1(ctx, "invalid-attribute-value", `<${tag} ${name}> contains control characters.`);
+		return;
+	}
+	if (spec.values !== void 0 && !spec.values.includes(text)) {
+		report$1(ctx, "invalid-attribute-value", `<${tag} ${name}> accepts ${spec.values.join(", ")}; received ${JSON.stringify(text)}.`);
+		return;
+	}
+	if (spec.type === "number" && !/^-?\d+$/.test(text)) {
+		report$1(ctx, "invalid-attribute-value", `<${tag} ${name}> must be an integer.`);
+		return;
+	}
+	if (spec.type === "measure" && !/^\d+(\.\d+)?%?$/.test(text)) {
+		report$1(ctx, "invalid-attribute-value", `<${tag} ${name}> must be a pixel count or a percentage.`);
+		return;
+	}
+	if (spec.type === "url" && !isSafeUrl$1(text)) {
+		report$1(ctx, "unsafe-url", `<${tag} ${name}> must use https:, mailto:, tel:, cid: or a fragment; received ${JSON.stringify(text)}. A relative path resolves only in an export, never in a delivered message.`);
+		return;
+	}
+	return text;
+};
+const buildAttributes = (ctx, scope, tag, spec, node, props, depth) => {
+	const emitted = [];
+	const present = /* @__PURE__ */ new Set();
+	let classes;
+	const source = node.attrs ?? {};
+	if (!isRecord(source)) {
+		report$1(ctx, "invalid-attribute-value", `<${tag}> attrs must be an object.`);
+		return "";
+	}
+	for (const [key, raw] of Object.entries(source)) {
+		if (key === "key") continue;
+		const name = key === "className" ? "class" : key;
+		const value = evalValue(ctx, scope, raw, depth + 1);
+		props.set(name, value);
+		if (tag === "a" && name === "href" && raw === ctx.brandPlugin.unsubscribeUrlPlaceholder) {
+			if (ctx.web !== void 0 && node.reserved !== true) {
+				report$1(ctx, "reserved-url", "Only a brand footer can write its unsubscribe placeholder.");
+				continue;
+			}
+			present.add(name);
+			emitted.push(` href="${escapeAttribute$1(ctx.brandPlugin.unsubscribeUrlPlaceholder)}" ${ctx.brandPlugin.noTrackAttribute}`);
+			continue;
+		}
+		if (name === "class") {
+			if (value === void 0 || value === null) continue;
+			if (typeof value !== "string") {
+				report$1(ctx, "invalid-attribute-value", `<${tag} class> must be a string.`);
+				continue;
+			}
+			if (CONTROL_CHARACTERS$1.test(value)) {
+				report$1(ctx, "invalid-attribute-value", `<${tag} class> contains control characters.`);
+				continue;
+			}
+			if (classes !== void 0) {
+				report$1(ctx, "duplicate-attribute", `<${tag}> sets both class and className; keep one.`);
+				continue;
+			}
+			classes = value;
+			emitted.push(` class="${escapeAttribute$1(value)}"`);
+			continue;
+		}
+		if (name === "style") {
+			report$1(ctx, "invalid-style", `<${tag}> writes its style on the element, not as an attribute.`);
+			continue;
+		}
+		if (/^on/i.test(name)) {
+			report$1(ctx, "event-handler", `<${tag} ${name}> is an event handler; email clients strip scripting and Samva refuses it.`);
+			continue;
+		}
+		if (ctx.reservedAttributes.has(name) && node.reserved !== true) {
+			report$1(ctx, "reserved-attribute", `<${tag} ${name}> is reserved for the brand footer.`);
+			continue;
+		}
+		if (/^(data|aria)-[a-z0-9-]+$/.test(name)) {
+			const text = attributeText(ctx, tag, name, { type: "string" }, value);
+			if (text !== void 0) emitted.push(` ${name}="${escapeAttribute$1(text)}"`);
+			continue;
+		}
+		const globals = EMAIL_GLOBAL_ATTRIBUTES;
+		const attribute = Object.hasOwn(globals, name) ? globals[name] : Object.hasOwn(spec.attributes, name) ? spec.attributes[name] : void 0;
+		if (attribute === void 0) {
+			report$1(ctx, "unsupported-attribute", `<${tag}> does not support the ${name} attribute.`);
+			continue;
+		}
+		present.add(name);
+		const text = attributeText(ctx, tag, name, attribute, value);
+		if (text !== void 0) emitted.push(` ${name}="${escapeAttribute$1(text)}"`);
+	}
+	for (const [name, attribute] of Object.entries(spec.attributes)) if (attribute.required === true && !present.has(name)) report$1(ctx, "missing-attribute", `<${tag}> requires the ${name} attribute.`);
+	if (node.style !== void 0 && ctx.web === void 0) {
+		const css = styleText(ctx, scope, node.style, depth + 1);
+		if (css !== "") emitted.push(` style="${escapeAttribute$1(css)}"`);
+	}
+	if (node.style !== void 0 && ctx.web !== void 0) {
+		const css = styleText(ctx, scope, node.style, depth + 1);
+		if (css !== "") {
+			let name = ctx.web.styles.get(css);
+			if (name === void 0) {
+				name = `sml-web-style-${ctx.web.styles.size}`;
+				ctx.web.styles.set(css, name);
+			}
+			const classAt = emitted.findIndex((part) => part.startsWith(" class=\""));
+			const combined = ` class="${escapeAttribute$1(classes === void 0 || classes === "" ? name : `${classes} ${name}`)}"`;
+			if (classAt < 0) emitted.push(combined);
+			else emitted[classAt] = combined;
+		}
+	}
+	return emitted.join("");
+};
+const checkContentModel$1 = (ctx, tag, spec, children) => {
+	if (spec.content === "void") {
+		if (children.length > 0) report$1(ctx, "void-element-children", `<${tag}> cannot have children.`);
+		return;
+	}
+	if (spec.content === "text" || spec.content === "raw") {
+		for (const child of children) if (child.t !== "text") report$1(ctx, "invalid-content", `<${tag}> accepts text only.`);
+		return;
+	}
+	if (spec.childElements === void 0) return;
+	for (const child of children) {
+		if (child.t === "raw") continue;
+		if (child.t === "text") {
+			if (child.v.trim() !== "") report$1(ctx, "invalid-content", `<${tag}> cannot contain text directly; put it inside <${spec.childElements[0]}>.`);
+			continue;
+		}
+		if (!spec.childElements.includes(child.tag)) report$1(ctx, "invalid-content", `<${tag}> accepts only ${spec.childElements.map((name) => `<${name}>`).join(", ")}; found <${child.tag}>.`);
+	}
+};
+const pushText = (out, value) => {
+	if (value === null || value === void 0 || typeof value === "boolean") return;
+	out.push({
+		t: "text",
+		v: textOf(value)
+	});
+};
+const evalElement = (ctx, scope, node, depth, out) => {
+	const tag = node.el;
+	if (ctx.plain) {
+		report$1(ctx, "unsupported-element", "A plain-text body cannot contain elements.");
+		return;
+	}
+	const spec = typeof tag === "string" ? ctx.web === void 0 ? emailElement(tag) : webElement(tag) : void 0;
+	if (spec === void 0) {
+		report$1(ctx, "unsupported-element", `<${String(tag)}> is not part of the supported email vocabulary.`);
+		return;
+	}
+	if (ctx.web !== void 0) {
+		const hints = ctx.web.hints.get(node);
+		if (hints !== void 0 && !ctx.web.hinted) {
+			ctx.web.hinted = true;
+			if (hints.title !== void 0) ctx.web.title = textOf(evalValue(ctx, scope, hints.title, depth + 1));
+			if (hints.titleNodes !== void 0 && hints.titleNodes.length > 0) {
+				const title = [];
+				for (const part of hints.titleNodes) evalNode(ctx, scope, part, depth + 1, title);
+				if (title.some((part) => part.t !== "text")) invalid("A page title contains text only.");
+				ctx.web.title = title.map((part) => part.t === "text" ? part.v : "").join("");
+			}
+			if (hints.lang !== void 0) ctx.web.lang = textOf(evalValue(ctx, scope, hints.lang, depth + 1));
+			const dir = hints.dir === void 0 ? void 0 : evalValue(ctx, scope, hints.dir, depth + 1);
+			if (dir !== void 0 && dir !== "ltr" && dir !== "rtl" && dir !== "auto") invalid("Page direction must be ltr, rtl or auto.");
+			if (dir === "ltr" || dir === "rtl" || dir === "auto") ctx.web.dir = dir;
+		}
+		if (spec.content === "raw" || [
+			"html",
+			"head",
+			"body",
+			"meta",
+			"link",
+			"title"
+		].includes(tag)) return invalid("Web output is a body fragment without shell metadata or raw CSS.");
+	}
+	const children = [];
+	for (const child of node.children ?? []) evalNode(ctx, scope, child, depth + 1, children);
+	checkContentModel$1(ctx, tag, spec, children);
+	if (spec.content === "raw") {
+		const css = children.map((child) => child.t === "text" ? child.v : "").join("");
+		if (/<\/|<!--/i.test(css)) {
+			report$1(ctx, "unsafe-raw-text", `<${tag}> content cannot contain markup.`);
+			return;
+		}
+	}
+	const props = /* @__PURE__ */ new Map();
+	const attrs = buildAttributes(ctx, scope, tag, spec, node, props, depth);
+	out.push({
+		t: "el",
+		tag,
+		content: spec.content,
+		layout: spec.layout,
+		attrs,
+		props,
+		children,
+		src: node.src
+	});
+};
+const evalRaw = (ctx, scope, node, depth, out) => {
+	if (ctx.plain) {
+		out.push({
+			t: "text",
+			v: node.text === void 0 ? "" : textOf(evalValue(ctx, scope, node.text, depth + 1))
+		});
+		return;
+	}
+	const html = asArray(node.raw).map((part) => rawPart(ctx, scope, part, depth + 1)).join("");
+	const text = node.text === void 0 ? "" : textOf(evalValue(ctx, scope, node.text, depth + 1));
+	out.push({
+		t: "raw",
+		html,
+		text
+	});
+};
+const rawPart = (ctx, scope, part, depth) => {
+	if (typeof part === "string") return part;
+	const record = part;
+	if (isRecord(record) && has(record, "attr")) return escapeAttribute$1(textOf(evalValue(ctx, scope, record.attr, depth + 1)));
+	if (isRecord(record) && has(record, "text")) return escapeText$1(textOf(evalValue(ctx, scope, record.text, depth + 1)));
+	return invalid("A raw part is a string, {attr} or {text}.");
+};
+const loopKey = (name) => name.startsWith("$") ? name : `$${name}`;
+/** The items that satisfy a `where` clause, each bound as the loop variable while it is tested. */
+const selectItems = (ctx, scope, items, as, where, depth) => {
+	if (where === void 0) return items;
+	const key = loopKey(as);
+	return items.filter((item) => {
+		if (++ctx.iterations > MAX_ITERATIONS) fail("render-limit", `A render iterates at most ${MAX_ITERATIONS} times.`);
+		const inner = new Map(scope);
+		inner.set(key, item);
+		return evalPredicate(ctx, inner, where, depth + 1);
+	});
+};
+const evalEach = (ctx, scope, node, depth, out) => {
+	const source = evalValue(ctx, scope, node.each, depth + 1);
+	if (!Array.isArray(source)) invalid("each needs an array.");
+	const selected = selectItems(ctx, scope, source, String(node.as), node.where, depth);
+	let items = selected;
+	if (node.chunk !== void 0) {
+		if (!Number.isInteger(node.chunk) || node.chunk < 1) invalid("chunk is a positive integer.");
+		const slices = [];
+		for (let at = 0; at < selected.length; at += node.chunk) slices.push(selected.slice(at, at + node.chunk));
+		items = slices;
+	}
+	const itemKey = loopKey(String(node.as));
+	const indexKey = node.index === void 0 ? void 0 : loopKey(String(node.index));
+	for (const [index, item] of items.entries()) {
+		if (++ctx.iterations > MAX_ITERATIONS) fail("render-limit", `A render iterates at most ${MAX_ITERATIONS} times.`);
+		const inner = new Map(scope);
+		inner.set(itemKey, item);
+		if (indexKey !== void 0) inner.set(indexKey, index);
+		for (const child of asArray(node.children)) evalNode(ctx, inner, child, depth + 1, out);
+	}
+};
+const evalNode = (ctx, scope, node, depth, out) => {
+	checkDepth(depth);
+	if (node === null || typeof node !== "object") {
+		pushText(out, node);
+		return;
+	}
+	if (!isRecord(node)) {
+		invalid("An array cannot be rendered as a node.");
+		return;
+	}
+	if (ctx.web !== void 0) {
+		const css = ctx.web.stylesheets.get(node);
+		if (css !== void 0) {
+			ctx.web.authoredCss.push(webCss(ctx, css, depth, scope));
+			return;
+		}
+	}
+	if (has(node, "el")) return evalElement(ctx, scope, node, depth, out);
+	if (has(node, "each")) return evalEach(ctx, scope, node, depth, out);
+	if (has(node, "raw")) return evalRaw(ctx, scope, node, depth, out);
+	if (has(node, "preheader")) {
+		if (!ctx.markerUsed && ctx.preheader !== void 0 && !ctx.plain) {
+			ctx.markerUsed = true;
+			out.push(preheaderBlock(ctx, ctx.preheader));
+		}
+		return;
+	}
+	if (has(node, "if") && Array.isArray(node.then)) {
+		const branch = evalPredicate(ctx, scope, node.if, depth + 1) ? node.then : node.else ?? [];
+		for (const child of branch) evalNode(ctx, scope, child, depth + 1, out);
+		return;
+	}
+	pushText(out, evalValue(ctx, scope, node, depth + 1));
+};
+const PREHEADER_STYLE = [
+	["display", "none"],
+	["overflow", "hidden"],
+	["lineHeight", "1px"],
+	["opacity", 0],
+	["maxHeight", 0],
+	["maxWidth", 0]
+];
+/** The hidden inbox-preview block: the text, then padding so the client cannot borrow body copy. */
+const preheaderBlock = (ctx, text) => {
+	const children = [text];
+	if (text.length < PREHEADER_TARGET_LENGTH$1) children.push({
+		el: "div",
+		attrs: { "data-samva-preheader-padding": true },
+		children: [PREHEADER_PADDING$1.repeat(Math.ceil((PREHEADER_TARGET_LENGTH$1 - text.length) / 7))]
+	});
+	const out = [];
+	evalElement(ctx, /* @__PURE__ */ new Map(), {
+		el: "div",
+		attrs: { "data-samva-preheader": text },
+		style: PREHEADER_STYLE,
+		children
+	}, 0, out);
+	return out[0] ?? {
+		t: "text",
+		v: ""
+	};
+};
+/** Put the block first inside `<body>`, or return undefined when there is no body. */
+const insertPreheader = (nodes, block) => {
+	for (const [index, node] of nodes.entries()) {
+		if (node.t !== "el") continue;
+		if (node.tag === "body") return nodes.with(index, {
+			...node,
+			children: [block, ...node.children]
+		});
+		const replaced = insertPreheader(node.children, block);
+		if (replaced !== void 0) return nodes.with(index, {
+			...node,
+			children: replaced
+		});
+	}
+};
+const serialize$1 = (node) => {
+	switch (node.t) {
+		case "text": return escapeText$1(node.v);
+		case "raw": return node.html;
+		case "el":
+			if (node.content === "raw") {
+				const css = node.children.map((child) => child.t === "text" ? child.v : "").join("");
+				return css === "" ? "" : `<${node.tag}${node.attrs}>${css}</${node.tag}>`;
+			}
+			if (node.content === "void") return `<${node.tag}${node.attrs} />`;
+			return `<${node.tag}${node.attrs}>${node.children.map(serialize$1).join("")}</${node.tag}>`;
+	}
+};
+/** Serialize while recording where each element lands, for the same document `serialize` writes. */
+const serializeWithPositions = (nodes, offset) => {
+	const positions = [];
+	let written = offset;
+	const write = (node) => {
+		switch (node.t) {
+			case "text": {
+				const out = escapeText$1(node.v);
+				written += out.length;
+				return out;
+			}
+			case "raw":
+				written += node.html.length;
+				return node.html;
+			case "el": {
+				const start = written;
+				let out;
+				if (node.content === "raw") {
+					const css = node.children.map((child) => child.t === "text" ? child.v : "").join("");
+					out = css === "" ? "" : `<${node.tag}${node.attrs}>${css}</${node.tag}>`;
+					written += out.length;
+				} else if (node.content === "void") {
+					out = `<${node.tag}${node.attrs} />`;
+					written += out.length;
+				} else {
+					const open = `<${node.tag}${node.attrs}>`;
+					written += open.length;
+					const inner = node.children.map(write).join("");
+					const close = `</${node.tag}>`;
+					written += close.length;
+					out = `${open}${inner}${close}`;
+				}
+				positions.push({
+					start,
+					end: written,
+					tag: node.tag,
+					...node.src === void 0 ? {} : { src: node.src }
+				});
+				return out;
+			}
+		}
+	};
+	return {
+		html: nodes.map(write).join(""),
+		positions
+	};
+};
+const PARAGRAPH = "\n\n";
+const LINE = "\n";
+const INVISIBLE = /​|‌|‍|‎|‏|⁠|/g;
+const TABLE_SECTIONS = /* @__PURE__ */ new Set([
+	"thead",
+	"tbody",
+	"tfoot"
+]);
+const isLayoutTable = (props) => props.get("role") === "presentation" || props.get("role") === "none";
+const wrap = (inner, separator) => {
+	const trimmed = inner.replace(/^\s+/, "").replace(/\s+$/, "");
+	return trimmed === "" ? "" : `${separator}${trimmed}${separator}`;
+};
+const collect = (nodes, keep, descend) => nodes.flatMap((child) => {
+	if (child.t !== "el") return [];
+	if (keep(child.tag)) return [child];
+	return descend(child.tag) ? collect(child.children, keep, descend) : [];
+});
+const childText = (node, context) => node.children.map((child) => derive(child, context)).join("");
+const isDecorativeCell = (cell, context) => {
+	const images = collect(cell.children, (tag) => tag === "img", () => true);
+	return images.length > 0 && images.every((image) => image.props.get("alt") === "") && childText(cell, context).trim() === "";
+};
+const deriveList = (node, context) => {
+	const indent = "  ".repeat(context.listDepth);
+	const start = Number(node.props.get("start") ?? 1);
+	const first = Number.isFinite(start) ? start : 1;
+	const nested = {
+		...context,
+		listDepth: context.listDepth + 1
+	};
+	const lines = collect(node.children, (tag) => tag === "li", () => false).map((item, index) => {
+		const marker = node.tag === "ol" ? `${first + index}.` : "-";
+		const continuation = `${indent}${" ".repeat(marker.length + 1)}`;
+		const [head = "", ...rest] = derive(item, nested).replace(/^\s+/, "").replace(/\s+$/, "").replace(/\n{2,}/g, LINE).split("\n");
+		return [`${indent}${marker} ${head}`, ...rest.map((line) => line.trim() === "" ? "" : /^\s/.test(line) ? line : `${continuation}${line}`)].join(LINE);
+	});
+	return wrap(lines.join(LINE), PARAGRAPH);
+};
+const deriveTable = (node, context) => {
+	if (isLayoutTable(node.props)) return childText(node, context);
+	const rows = collect(node.children, (tag) => tag === "tr", (tag) => TABLE_SECTIONS.has(tag)).map((row) => collect(row.children, (tag) => tag === "td" || tag === "th", () => false).filter((cell) => !isDecorativeCell(cell, context)).map((cell) => childText(cell, context).replace(/\s+/g, " ").trim()).join(" | "));
+	return wrap(rows.join(LINE), PARAGRAPH);
+};
+const deriveElement = (node, context) => {
+	switch (node.layout) {
+		case "metadata": return "";
+		case "document":
+		case "inline":
+		case "list-item": return childText(node, context);
+		case "break": return LINE;
+		case "rule": return `${PARAGRAPH}---${PARAGRAPH}`;
+		case "image": {
+			const alt = node.props.get("alt");
+			const trimmed = typeof alt === "string" ? alt.trim() : "";
+			return trimmed === "" ? "" : `[${trimmed}]`;
+		}
+		case "link": {
+			const label = childText(node, context).replace(/\s+/g, " ").trim();
+			const target = node.props.get("href");
+			const href = typeof target === "string" ? target : "";
+			if (href === "" || href === label) return label;
+			return label === "" ? href : `${label} (${href})`;
+		}
+		case "list": return deriveList(node, context);
+		case "table": return deriveTable(node, context);
+		case "row": return wrap(collect(node.children, (tag) => tag === "td" || tag === "th", () => false).map((cell) => childText(cell, context).replace(/^\s+|\s+$/g, "")).filter((cell) => cell !== "").join(LINE), LINE);
+		case "table-section":
+		case "cell": return wrap(childText(node, context), LINE);
+		case "preformatted": return wrap(childText(node, {
+			...context,
+			preformatted: true
+		}), PARAGRAPH);
+		case "block": return wrap(childText(node, context), PARAGRAPH);
+	}
+};
+const derive = (node, context) => {
+	switch (node.t) {
+		case "text": return context.preformatted ? node.v : node.v.replace(INVISIBLE, "").replace(/[^\S\n]+/g, " ");
+		case "raw": return node.text;
+		case "el": return deriveElement(node, context);
+	}
+};
+const normalize = (value) => value.replace(/\r\n?/g, "\n").split("\n").map((line) => line.replace(/[^\S\n]+$/, "")).join("\n").replace(/\n{3,}/g, PARAGRAPH).trim();
+const createContext = (template, input, options, plain) => {
+	if (template.sml !== 2) fail("unsupported-version", `The template was compiled as version ${String(template.sml)}; this renderer reads version 2.`);
+	const brandPlugin = options.brandPlugin ?? samvaBrandPlugin;
+	return {
+		input,
+		locale: options.locale ?? template.locale,
+		timeZone: options.timeZone,
+		plain,
+		brandPlugin,
+		reservedAttributes: reservedBrandAttributes(brandPlugin),
+		diagnostics: [],
+		iterations: 0,
+		fmt: void 0,
+		preheader: void 0,
+		markerUsed: false
+	};
+};
+const settle = (ctx) => {
+	if (ctx.diagnostics.length > 0) throw new RenderError({ diagnostics: ctx.diagnostics });
+};
+/**
+* Render the email channel against one validated input. `positions` also returns where each
+* element landed in the HTML, which compatibility findings and editor selections map back to source.
+*/
+const renderEmailBody = (template, input, options = {}) => {
+	const ctx = createContext(template, input, options, false);
+	const email = template.email;
+	if (email === void 0) return fail("missing-channel", "The template has no email channel.");
+	const empty = /* @__PURE__ */ new Map();
+	const subject = textOf(evalValue(ctx, empty, email.subject, 0));
+	if (/[\r\n\u0000]/.test(subject)) fail("invalid-subject", "Invalid email subject: it must be one line of text.");
+	if (email.preheader !== void 0) {
+		const value = evalValue(ctx, empty, email.preheader, 0);
+		if (value !== void 0 && value !== null) ctx.preheader = textOf(value);
+	}
+	const preheader = ctx.preheader;
+	let tree = [];
+	const nodes = [];
+	validateEmailIr(email.body, email.presentation, (message, code) => fail(code ?? "invalid-value", message));
+	const expanded = lowerEmailNodes([email.body], email.presentation?.brandPlugin ?? ctx.brandPlugin, (diagnostic) => {
+		if (diagnostic.severity === "error") report$1(ctx, diagnostic.code, diagnostic.message);
+	});
+	const lowered = email.presentation === void 0 ? expanded : applyEmailPresentation(expanded, email.presentation);
+	for (const node of lowered) evalNode(ctx, empty, node, 0, nodes);
+	tree = nodes;
+	if (preheader !== void 0 && !ctx.markerUsed) {
+		const block = preheaderBlock(ctx, preheader);
+		tree = insertPreheader(tree, block) ?? [block, ...tree];
+	}
+	settle(ctx);
+	const text = normalize(tree.map((node) => derive(node, {
+		preformatted: false,
+		listDepth: 0
+	})).join(""));
+	if (options.positions === true) {
+		const prefix = serializeWithPositions(tree, 0).html.startsWith("<html") ? EMAIL_DOCTYPE : "";
+		const shifted = serializeWithPositions(tree, prefix.length);
+		return {
+			subject,
+			preheader,
+			html: `${prefix}${shifted.html}`,
+			text,
+			positions: shifted.positions
+		};
+	}
+	const serialized = tree.map(serialize$1).join("");
+	return {
+		subject,
+		preheader,
+		html: serialized.startsWith("<html") ? `${EMAIL_DOCTYPE}${serialized}` : serialized,
+		text
+	};
+};
+/** Render malformed artifacts through the same typed boundary as unsafe bound values. */
+const renderEmail = (template, input, options = {}) => {
+	try {
+		return renderEmailBody(template, input, options);
+	} catch (error) {
+		if (RenderError.is(error)) throw error;
+		return fail("invalid-ir", "Malformed compiled email.");
+	}
+};
+/** Serialize parsed CSS through the same declaration and URL boundary as bound element styles. */
+const webCss = (ctx, rules, depth = 0, scope = /* @__PURE__ */ new Map()) => {
+	checkDepth(depth);
+	if (!Array.isArray(rules)) invalid("Web CSS rules must be an array.");
+	return rules.map((rule) => {
+		if (!isRecord(rule) || rule.selector === void 0 === (rule.at === void 0)) invalid("A web CSS rule has one selector or at-rule.");
+		const header = rule.selector ?? rule.at;
+		if (typeof header !== "string" || header === "" || /[{};\u0000-\u001f\u007f]|<[/!]|\/\*|\*\//.test(header) || /\\$/.test(header)) return invalid("Unsafe web CSS rule header.");
+		if (rule.selector !== void 0 && header.includes("@")) invalid("A CSS selector cannot contain an at-rule.");
+		if (rule.at !== void 0 && !/^(?:layer [\w.,-]+|(?:media|supports|container) [^{};\\]+|font-face|(?:keyframes|counter-style) [\w-]+|page(?: [\w :(),-]+)?)$/.test(header)) invalid("Unsupported web CSS at-rule.");
+		const entries = rule.style ?? [];
+		if (!Array.isArray(entries) || entries.some((entry) => !Array.isArray(entry) || entry.length !== 2 || typeof entry[0] !== "string")) invalid("Web CSS declarations are property and value pairs.");
+		const css = declarations$1(ctx, scope, entries, depth + 1);
+		const children = rule.children === void 0 ? "" : webCss(ctx, rule.children, depth + 1, scope);
+		const prefix = rule.at === void 0 ? header : `@${header}`;
+		if (rule.at?.startsWith("layer ") && rule.children === void 0 && rule.style === void 0) return `${prefix};`;
+		return `${prefix}{${css}${css === "" || children === "" ? "" : ";"}${children}}`;
+	}).join("");
+};
+const renderWeb = (template, input, options) => {
+	try {
+		const initial = createContext(template, input, options, false);
+		const email = template.email;
+		if (email === void 0) return fail("missing-channel", "The web target requires an email channel.");
+		validateEmailIr(email.body, void 0, (message, code) => fail(code ?? "invalid-value", message));
+		validateEmailIr({ lit: email.web }, void 0, (message, code) => fail(code ?? "invalid-value", message));
+		if (email.web !== void 0 && (!isRecord(email.web) || !Array.isArray(email.web.rules))) invalid("Invalid web presentation plan.");
+		const plugin = options.brandPlugin ?? email.presentation?.brandPlugin ?? initial.brandPlugin;
+		if (!isRecord(plugin) || typeof plugin.specifier !== "string" || ![
+			plugin.footerAttribute,
+			plugin.unsubscribeRowAttribute,
+			plugin.noTrackAttribute
+		].every((name) => typeof name === "string" && /^data-[a-z0-9-]+$/.test(name)) || typeof plugin.unsubscribeUrlPlaceholder !== "string" || CONTROL_CHARACTERS$1.test(plugin.unsubscribeUrlPlaceholder) || /^[a-z][a-z0-9+.-]*:/i.test(plugin.unsubscribeUrlPlaceholder) && !isSafeUrl$1(plugin.unsubscribeUrlPlaceholder)) invalid("Invalid web brand plugin.");
+		const lowered = lowerWebNodes([email.body], plugin, invalid, email.web);
+		const web = {
+			styles: /* @__PURE__ */ new Map(),
+			hints: lowered.headHints,
+			stylesheets: lowered.stylesheets,
+			gridTracks: lowered.gridTracks,
+			authoredCss: [],
+			hinted: false
+		};
+		const webCtx = {
+			...initial,
+			web,
+			brandPlugin: plugin,
+			reservedAttributes: reservedBrandAttributes(plugin)
+		};
+		const nodes = [];
+		for (const node of lowered.nodes) evalNode(webCtx, /* @__PURE__ */ new Map(), node, 0, nodes);
+		const title = web.title ?? textOf(evalValue(webCtx, /* @__PURE__ */ new Map(), email.subject, 0));
+		const componentLayer = email.web?.componentLayer;
+		const specificity = email.web?.inlineSpecificity ?? 1;
+		if (componentLayer !== void 0 && (!Number.isSafeInteger(componentLayer) || componentLayer < 0)) invalid("Invalid web component layer.");
+		if (!Number.isInteger(specificity) || specificity < 1 || specificity > 1e5) invalid("Invalid web style specificity.");
+		const projectRules = email.web?.rules ?? [];
+		const baseRules = componentLayer === void 0 ? WEB_BASE_STYLES : WEB_BASE_STYLES.map((rule) => ({
+			...rule,
+			at: `layer sml-web-${componentLayer}`
+		}));
+		const css = webCss(webCtx, [
+			...projectRules.filter((rule) => rule.at?.startsWith("layer ") && rule.children === void 0 && rule.style === void 0),
+			...baseRules,
+			...projectRules.filter((rule) => !(rule.at?.startsWith("layer ") && rule.children === void 0 && rule.style === void 0))
+		]);
+		const ids = "#sml-web-inline".repeat(specificity);
+		const styles = `${css}${web.authoredCss.join("")}${[...web.styles].map(([style, name]) => `:is(${ids},.${name}){${style}}`).join("")}`;
+		settle(webCtx);
+		const serialized = serializeWithPositions(nodes, 0);
+		return {
+			html: serialized.html,
+			positions: serialized.positions,
+			headHints: {
+				title,
+				...web.lang === void 0 ? {} : { lang: web.lang },
+				...web.dir === void 0 ? {} : { dir: web.dir },
+				styles
+			}
+		};
+	} catch (error) {
+		if (RenderError.is(error)) throw error;
+		return fail("invalid-ir", "Malformed compiled web document.");
+	}
+};
+const plainText = (ctx, nodes) => {
+	const out = [];
+	for (const node of asArray(nodes)) evalNode(ctx, /* @__PURE__ */ new Map(), node, 0, out);
+	return out.map((node) => node.t === "text" ? node.v : node.t === "raw" ? node.text : "").join("");
+};
+const renderSms = (template, input, options) => {
+	const ctx = createContext(template, input, options, true);
+	const sms = template.sms;
+	if (sms === void 0) return fail("missing-channel", "The template has no SMS channel.");
+	const text = plainText(ctx, sms.body);
+	settle(ctx);
+	return {
+		text,
+		segments: smsSegmentInfo(text)
+	};
+};
+const resolveButtons = (ctx, nodes, out, depth) => {
+	checkDepth(depth);
+	const scope = /* @__PURE__ */ new Map();
+	const value = (part) => textOf(evalValue(ctx, scope, part, 0));
+	for (const node of asArray(nodes)) {
+		if ("if" in node) {
+			const branch = evalPredicate(ctx, scope, node.if, depth + 1) ? node.then : node.else ?? [];
+			resolveButtons(ctx, branch, out, depth + 1);
+			continue;
+		}
+		switch (node.type) {
+			case "quick-reply":
+				out.push({
+					type: "quick-reply",
+					text: value(node.text)
+				});
+				break;
+			case "url": {
+				const url = value(node.url);
+				if (!isSafeUrl$1(url)) invalid("A button URL must be an absolute https URL.");
+				out.push({
+					type: "url",
+					text: value(node.text),
+					url
+				});
+				break;
+			}
+			case "phone":
+				out.push({
+					type: "phone",
+					text: value(node.text),
+					phone: value(node.phone)
+				});
+				break;
+			case "copy-code":
+				out.push({
+					type: "copy-code",
+					code: value(node.code)
+				});
+				break;
+			case "flow":
+				out.push({
+					type: "flow",
+					text: value(node.text),
+					flow: node.flow,
+					action: node.action,
+					...node.screen === void 0 ? {} : { screen: node.screen }
+				});
+				break;
+			default: invalid("Unknown WhatsApp button.");
+		}
+	}
+};
+/** The WhatsApp channel with every text rendered and conditional buttons resolved. */
+const renderWhatsApp = (template, input, options) => {
+	const ctx = createContext(template, input, options, true);
+	const whatsapp = template.whatsapp;
+	if (whatsapp === void 0) return fail("missing-channel", "The template has no WhatsApp channel.");
+	const header = whatsapp.header === void 0 ? void 0 : {
+		type: whatsapp.header.type,
+		text: plainText(ctx, whatsapp.header.content)
+	};
+	if (header !== void 0 && header.type !== "text" && !isSafeUrl$1(header.text)) invalid("A media header URL must be an absolute https URL.");
+	const body = plainText(ctx, whatsapp.body);
+	const footer = whatsapp.footer === void 0 ? void 0 : plainText(ctx, whatsapp.footer);
+	const buttons = [];
+	resolveButtons(ctx, whatsapp.buttons ?? [], buttons, 0);
+	settle(ctx);
+	return {
+		language: whatsapp.language,
+		category: whatsapp.category,
+		...header === void 0 ? {} : { header },
+		body,
+		...footer === void 0 ? {} : { footer },
+		buttons
+	};
+};
+const TARGET_RENDERERS = {
+	email: (template, input, options) => renderEmail(template, input, options),
+	web: renderWeb,
+	sms: renderSms,
+	whatsapp: renderWhatsApp
+};
+/**
+* Render one target of a compiled template against one validated input. It throws only
+* `RenderError`: a template compiled by another version, a target the template does not support,
+* or input or markup the renderer refuses.
+*/
+const render = (template, input, options) => {
+	if (!Object.hasOwn(TARGET_RENDERERS, options.target)) return fail("unsupported-target", "Unknown render target.");
+	return TARGET_RENDERERS[options.target](template, input, options);
+};
+//#endregion
+//#region src/preview.ts
+/**
+* The attribute a preview stamps so a click in a rendered document resolves to exactly one
+* rendered element. A delivered message never carries it.
+*/
+const INSTANCE_PATH_ATTRIBUTE = "data-samva-instance";
+const locationKey = (origin) => `${origin.fileName}:${origin.lineNumber}:${origin.columnNumber}`;
+const originKey = (selection) => `${selection.tag}\u0000${selection.origins.map(locationKey).join("\0")}`;
+const parentOf = (instancePath) => {
+	const cut = instancePath.lastIndexOf(".");
+	return cut === -1 ? void 0 : instancePath.slice(0, cut);
+};
+/**
+* Turn one render's positions into selections, in document order. `occurrence` and `occurrences`
+* count the rendered elements that share an authored origin and tag.
+*/
+const emailSelections = (positions) => {
+	const counts = /* @__PURE__ */ new Map();
+	for (const position of positions) {
+		const key = originKey(position);
+		counts.set(key, (counts.get(key) ?? 0) + 1);
+	}
+	const seen = /* @__PURE__ */ new Map();
+	return [...positions].toSorted((left, right) => left.start === right.start ? right.end - left.end : left.start - right.start).map((position) => {
+		const key = originKey(position);
+		const occurrence = (seen.get(key) ?? 0) + 1;
+		seen.set(key, occurrence);
+		const parentPath = parentOf(position.instancePath);
+		return {
+			instancePath: position.instancePath,
+			tag: position.tag,
+			origins: position.origins,
+			authored: position.authored,
+			occurrence,
+			occurrences: counts.get(key) ?? 1,
+			...parentPath === void 0 ? {} : { parentPath },
+			start: position.start,
+			end: position.end
+		};
+	});
+};
+/**
+* Render one fixture with an instance path stamped on every element, and the selection each path
+* resolves to. The selections come from the spans the compiler recorded, so a click on the canvas
+* lands on the exact node of the source that produced it.
+*/
+const previewEmail = (template, input, options = {}) => {
+	const rendered = renderEmail(template, input, {
+		...options,
+		positions: true
+	});
+	const sources = template.sources ?? [];
+	const ordered = (rendered.positions ?? []).map((position) => {
+		const src = position.src;
+		const origins = src === void 0 ? [] : [{
+			fileName: sources[src[2] ?? 0] ?? "",
+			lineNumber: src[0],
+			columnNumber: src[1]
+		}];
+		return {
+			start: position.start,
+			end: position.end,
+			tag: position.tag,
+			src: src === void 0 ? void 0 : src.join(":"),
+			origins,
+			path: "",
+			parent: void 0
+		};
+	}).toSorted((left, right) => left.start === right.start ? right.end - left.end : left.start - right.start);
+	const open = [];
+	const childCount = /* @__PURE__ */ new Map();
+	for (const element of ordered) {
+		while (open.length > 0 && open[open.length - 1].end <= element.start) open.pop();
+		const parent = open[open.length - 1];
+		const index = childCount.get(parent) ?? 0;
+		childCount.set(parent, index + 1);
+		element.parent = parent;
+		element.path = parent === void 0 ? String(index) : `${parent.path}.${index}`;
+		open.push(element);
+	}
+	const inserts = ordered.map((element) => ({
+		at: element.start + 1 + element.tag.length,
+		text: ` ${INSTANCE_PATH_ATTRIBUTE}="${element.path}"`
+	}));
+	inserts.sort((left, right) => left.at - right.at);
+	let html = "";
+	let cursor = 0;
+	for (const insert of inserts) {
+		html += rendered.html.slice(cursor, insert.at) + insert.text;
+		cursor = insert.at;
+	}
+	html += rendered.html.slice(cursor);
+	const shift = (offset) => {
+		let moved = 0;
+		for (const insert of inserts) {
+			if (insert.at > offset) break;
+			moved += insert.text.length;
+		}
+		return offset + moved;
+	};
+	const positions = ordered.map((element) => ({
+		start: shift(element.start),
+		end: shift(element.end),
+		origins: element.origins,
+		instancePath: element.path,
+		tag: element.tag,
+		authored: element.src !== void 0 && (element.parent === void 0 || element.parent.src !== element.src)
+	}));
+	const selections = emailSelections(positions);
+	return {
+		subject: rendered.subject,
+		preheader: rendered.preheader,
+		html,
+		text: rendered.text,
+		selections
+	};
+};
+/** Look selections up by the instance path a rendered document carries. */
+const emailSelectionIndex = (selections) => new Map(selections.map((selection) => [selection.instancePath, selection]));
+/**
+* The authoring element a selection edits. For an authored element that is the element itself; for
+* a generated wrapper it is the primitive that asked for it. Undefined only where the compiler
+* generated markup with no authoring behind it, which nothing can edit in place.
+*/
+const emailAuthoringTarget = (selection) => selection.origins[0];
+/** Root-first ancestry of a selection, itself last. */
+const emailSelectionAncestry = (index, instancePath) => {
+	const chain = [];
+	let current = index.get(instancePath);
+	while (current !== void 0) {
+		chain.unshift(current);
+		current = current.parentPath === void 0 ? void 0 : index.get(current.parentPath);
+	}
+	return chain;
+};
+/**
+* Every rendered instance produced by the same authored element, in document order. One entry
+* means it rendered once; several mean it repeated.
+*/
+const emailSelectionSiblings = (selections, selection) => {
+	const key = originKey(selection);
+	return selections.filter((candidate) => originKey(candidate) === key);
+};
+/**
+* Every rendered instance of the same authored element. A partial edited at its definition changes
+* all of these, which is the scope a control has to name before it applies.
+*/
+const emailDefinitionInstances = (selections, selection) => {
+	const authoring = selection.origins[0];
+	const key = `${selection.tag}\u0000${authoring === void 0 ? "" : locationKey(authoring)}`;
+	return selections.filter((candidate) => {
+		const origin = candidate.origins[0];
+		return `${candidate.tag}\u0000${origin === void 0 ? "" : locationKey(origin)}` === key;
+	});
+};
+//#endregion
+//#region src/email/html.ts
+/** Escape a value for element content. */
+const escapeText = (value) => value.replace(/[&<>]/g, (character) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;"
+})[character] ?? character);
+/** Escape a value for a double-quoted attribute. */
+const escapeAttribute = (value) => value.replace(/[&<>"']/g, (character) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;",
+	"'": "&#39;"
+})[character] ?? character);
+const CONTROL_CHARACTERS = /[\u0000-\u001f\u007f]/;
+const SAFE_URL_SCHEME = /^(https:\/\/|mailto:|tel:|cid:|#)/i;
+const RELATIVE_URL = /^(\.{1,2}\/|\/(?!\/))/;
+/**
+* Only references an email client will follow safely; no `javascript:`, no
+* `data:`. A relative reference is legal only for an export: a file on disk can
+* resolve one against its own directory, and a delivered message cannot resolve
+* anything but an absolute URL.
+*/
+const isSafeUrl = (value, relative) => !/^[\u0000-\u0020]/.test(value) && !CONTROL_CHARACTERS.test(value) && !value.includes("\\") && (SAFE_URL_SCHEME.test(value) || relative && RELATIVE_URL.test(value));
+const CSS_PROPERTY = /^(--[a-zA-Z0-9-]+|[a-zA-Z][a-zA-Z0-9-]*)$/;
+const CSS_UNSAFE = /[;{}<>\\]|expression\s*\(|@import|\/\*/i;
+const CSS_URL = /url\(\s*(['"]?)([^'")]*)\1\s*\)/gi;
+/** camelCase to kebab-case; already-kebab names pass through unchanged. */
+const kebab = (property) => property.startsWith("--") ? property : property.replace(/[A-Z]/g, (l) => `-${l.toLowerCase()}`);
+const UNITLESS = /* @__PURE__ */ new Set([
+	"opacity",
+	"zIndex",
+	"fontWeight",
+	"lineHeight",
+	"order",
+	"flexGrow",
+	"flexShrink",
+	"columnCount",
+	"orphans",
+	"widows",
+	"zoom",
+	"fillOpacity",
+	"strokeOpacity"
+]);
+/** A bare number is pixels for every property that takes a length. */
+const declarationValue = (property, value) => typeof value === "number" && value !== 0 && !UNITLESS.has(property) && !property.startsWith("--") ? `${value}px` : String(value);
+const report = (sink, code, message, origins, severity = "error") => {
+	sink.diagnostics.push({
+		code,
+		severity,
+		message,
+		origins
+	});
+};
+const declarations = (sink, style, origins) => {
+	const parts = [];
+	for (const [property, value] of Object.entries(style)) {
+		if (value === void 0 || value === null) continue;
+		if (!CSS_PROPERTY.test(property)) {
+			report(sink, "unsupported-style-property", `Style property ${JSON.stringify(property)} is not a CSS property name; write it in camelCase (backgroundColor) or as a custom property (--brand).`, origins);
+			continue;
+		}
+		if (typeof value !== "string" && typeof value !== "number") {
+			report(sink, "invalid-style-value", `Style ${property} must be a string or number, not ${typeof value}.`, origins);
+			continue;
+		}
+		const text = declarationValue(property, value);
+		if (CSS_UNSAFE.test(text) || CONTROL_CHARACTERS.test(text)) {
+			report(sink, "unsafe-style-value", `Style ${property} contains CSS that could break out of the declaration; remove ${JSON.stringify(text)}.`, origins);
+			continue;
+		}
+		let unsafeUrl;
+		for (const match of text.matchAll(CSS_URL)) if (!isSafeUrl(match[2] ?? "", sink.relativeUrls)) unsafeUrl = match[2] ?? "";
+		if (unsafeUrl !== void 0) {
+			report(sink, "unsafe-url", `Style ${property} points at ${JSON.stringify(unsafeUrl)}; email URLs must use https:, mailto:, tel:, cid: or a fragment${sink.relativeUrls ? ", or a relative path" : ""}.`, origins);
+			continue;
+		}
+		parts.push(`${kebab(property)}:${text}`);
+	}
+	return parts.join(";");
+};
+const attributeValue = (sink, tag, name, spec, value, origins) => {
+	if (value === void 0 || value === null || value === false) return void 0;
+	if (value === true) return "";
+	if (typeof value !== "string" && typeof value !== "number") {
+		report(sink, "invalid-attribute-value", `<${tag} ${name}> must be a string or number, not ${typeof value}.`, origins);
+		return;
+	}
+	const text = String(value);
+	if (CONTROL_CHARACTERS.test(text)) {
+		report(sink, "invalid-attribute-value", `<${tag} ${name}> contains control characters.`, origins);
+		return;
+	}
+	if (spec.values !== void 0 && !spec.values.includes(text)) {
+		report(sink, "invalid-attribute-value", `<${tag} ${name}> accepts ${spec.values.join(", ")}; received ${JSON.stringify(text)}.`, origins);
+		return;
+	}
+	if (spec.type === "number" && !/^-?\d+$/.test(text)) {
+		report(sink, "invalid-attribute-value", `<${tag} ${name}> must be an integer.`, origins);
+		return;
+	}
+	if (spec.type === "measure" && !/^\d+(\.\d+)?%?$/.test(text)) {
+		report(sink, "invalid-attribute-value", `<${tag} ${name}> must be a pixel count or a percentage.`, origins);
+		return;
+	}
+	if (spec.type === "url" && !isSafeUrl(text, sink.relativeUrls)) {
+		report(sink, "unsafe-url", sink.relativeUrls ? `<${tag} ${name}> must use https:, mailto:, tel:, cid:, a fragment, or a relative path; received ${JSON.stringify(text)}.` : `<${tag} ${name}> must use https:, mailto:, tel:, cid: or a fragment; received ${JSON.stringify(text)}. A relative path resolves only in an export, never in a delivered message.`, origins);
+		return;
+	}
+	return text;
+};
+const attributes = (sink, tag, spec, props, origins) => {
+	const emitted = [];
+	const present = /* @__PURE__ */ new Set();
+	let classes;
+	const unsubscribeLink = tag === "a" && props[UNSUBSCRIBE_LINK] === true;
+	const { unsubscribeUrlPlaceholder, noTrackAttribute } = sink.brandPlugin;
+	for (const [key, value] of Object.entries(props)) {
+		if (key === "key") continue;
+		const name = key === "className" ? "class" : key;
+		if (unsubscribeLink && name === "href" && value === unsubscribeUrlPlaceholder) {
+			present.add(name);
+			emitted.push(` href="${escapeAttribute(unsubscribeUrlPlaceholder)}" ${noTrackAttribute}`);
+			continue;
+		}
+		if (name === "class") {
+			if (value === void 0 || value === null) continue;
+			if (typeof value !== "string") {
+				report(sink, "invalid-attribute-value", `<${tag} class> must be a string.`, origins);
+				continue;
+			}
+			if (classes !== void 0) {
+				report(sink, "duplicate-attribute", `<${tag}> sets both class and className; keep one.`, origins);
+				continue;
+			}
+			classes = value;
+			emitted.push(` class="${escapeAttribute(value)}"`);
+			continue;
+		}
+		if (name === "style") {
+			if (value === void 0 || value === null) continue;
+			if (!isObject(value) || Array.isArray(value)) {
+				report(sink, "invalid-style", `<${tag} style> must be a property object, for example style={{ backgroundColor: "#fff" }}.`, origins);
+				continue;
+			}
+			const css = declarations(sink, value, origins);
+			if (css !== "") emitted.push(` style="${escapeAttribute(css)}"`);
+			continue;
+		}
+		if (/^on/i.test(name)) {
+			report(sink, "event-handler", `<${tag} ${name}> is an event handler; email clients strip scripting and Samva refuses it.`, origins);
+			continue;
+		}
+		if (sink.reservedAttributes.has(name) && props[BRAND_FOOTER_MARKER] !== true) {
+			report(sink, "reserved-attribute", `<${tag} ${name}> is written only by BrandFooter from ${sink.brandPlugin.specifier}; render BrandFooter instead of marking an element as the footer.`, origins);
+			continue;
+		}
+		if (/^(data|aria)-[a-z0-9-]+$/.test(name)) {
+			const text = attributeValue(sink, tag, name, { type: "string" }, value, origins);
+			if (text !== void 0) emitted.push(` ${name}="${escapeAttribute(text)}"`);
+			continue;
+		}
+		const globalAttributes = EMAIL_GLOBAL_ATTRIBUTES;
+		const attribute = Object.hasOwn(globalAttributes, name) ? globalAttributes[name] : Object.hasOwn(spec.attributes, name) ? spec.attributes[name] : void 0;
+		if (attribute === void 0) {
+			const supported = [
+				...Object.keys(EMAIL_GLOBAL_ATTRIBUTES),
+				...Object.keys(spec.attributes),
+				"class",
+				"style"
+			].sort().join(", ");
+			report(sink, "unsupported-attribute", `<${tag}> does not support the ${name} attribute. Supported: ${supported}, plus data-* and aria-*.`, origins);
+			continue;
+		}
+		present.add(name);
+		const text = attributeValue(sink, tag, name, attribute, value, origins);
+		if (text !== void 0) emitted.push(` ${name}="${escapeAttribute(text)}"`);
+	}
+	for (const [name, attribute] of Object.entries(spec.attributes)) if (attribute.required === true && !present.has(name)) report(sink, "missing-attribute", `<${tag}> requires the ${name} attribute.`, origins);
+	return emitted.join("");
+};
+/** Fragments are transparent to a content model; raw compatibility markup is not content. */
+const contentChildren = (children) => children.flatMap((child) => child.type === "Fragment" ? contentChildren(child.children) : [child]);
+const checkContentModel = (sink, tag, spec, children, origins) => {
+	if (spec.content === "void") {
+		if (contentChildren(children).length > 0) report(sink, "void-element-children", `<${tag}> cannot have children.`, origins);
+		return;
+	}
+	if (spec.content === "text" || spec.content === "raw") {
+		for (const child of contentChildren(children)) if (child.type !== "Text") report(sink, "invalid-content", `<${tag}> accepts text only.`, child.type === "Element" ? child.origins : origins);
+		return;
+	}
+	if (spec.childElements === void 0) return;
+	for (const child of contentChildren(children)) {
+		if (child.type === "Raw") continue;
+		if (child.type === "Text") {
+			if (child.value.trim() !== "") report(sink, "invalid-content", `<${tag}> cannot contain text directly; put it inside <${spec.childElements[0]}>.`, origins);
+			continue;
+		}
+		if (child.type === "Element" && !spec.childElements.includes(child.tag)) report(sink, "invalid-content", `<${tag}> accepts only ${spec.childElements.map((name) => `<${name}>`).join(", ")}; found <${child.tag}>.`, child.origins);
+	}
+};
+/** Every write goes through here so `sink.written` stays the emitted offset. */
+const emit = (sink, text) => {
+	sink.written += text.length;
+	return text;
+};
+const serialize = (sink, node, parentPath, counter) => {
+	switch (node.type) {
+		case "Text": return emit(sink, escapeText(node.value));
+		case "Raw": return emit(sink, node.html);
+		case "Fragment": return node.children.map((child) => serialize(sink, child, parentPath, counter)).join("");
+		case "Element": {
+			const start = sink.written;
+			const index = counter.next++;
+			const path = parentPath === "" ? String(index) : `${parentPath}.${index}`;
+			const own = { next: 0 };
+			const stamp = sink.instancePaths ? ` ${INSTANCE_PATH_ATTRIBUTE}="${path}"` : "";
+			const spec = emailElement(node.tag);
+			if (spec === void 0) {
+				report(sink, "unsupported-element", `<${node.tag}> is not part of the supported email vocabulary. Supported elements: ${Object.keys(EMAIL_ELEMENTS).join(", ")}.`, node.origins);
+				return "";
+			}
+			checkContentModel(sink, node.tag, spec, node.children, node.origins);
+			if (spec.content === "raw") {
+				const css = node.children.map((child) => child.type === "Text" ? child.value : "").join("");
+				if (/<\/|<!--/i.test(css)) {
+					report(sink, "unsafe-raw-text", `<${node.tag}> content cannot contain markup.`, node.origins);
+					return "";
+				}
+				const rawAttrs = attributes(sink, node.tag, spec, node.props, node.origins);
+				const raw = css === "" ? "" : `<${node.tag}${rawAttrs}${stamp}>${css}</${node.tag}>`;
+				return record(sink, start, node, path, emit(sink, raw));
+			}
+			const attrs = attributes(sink, node.tag, spec, node.props, node.origins);
+			if (spec.content === "void") return record(sink, start, node, path, emit(sink, `<${node.tag}${attrs}${stamp} />`));
+			const open = emit(sink, `<${node.tag}${attrs}${stamp}>`);
+			const children = node.children.map((child) => serialize(sink, child, path, own)).join("");
+			const close = emit(sink, `</${node.tag}>`);
+			return record(sink, start, node, path, `${open}${children}${close}`);
+		}
+	}
+};
+/** Record an element's emitted range once its content is written. */
+const record = (sink, start, node, instancePath, text) => {
+	sink.positions.push({
+		start,
+		end: sink.written,
+		origins: node.origins,
+		instancePath,
+		tag: node.tag,
+		authored: node.authored
+	});
+	return text;
+};
+const serializationSink = (options) => {
+	const brandPlugin = options.brandPlugin ?? samvaBrandPlugin;
+	return {
+		diagnostics: [],
+		positions: [],
+		written: 0,
+		relativeUrls: options.relativeUrls === true,
+		instancePaths: options.instancePaths === true,
+		brandPlugin,
+		reservedAttributes: reservedBrandAttributes(brandPlugin)
+	};
+};
+/** Lower the derived tree to email HTML, reporting every unsupported construct with its origin. */
+const serializeEmailHtml = (node, options = {}) => {
+	const sink = serializationSink(options);
+	return {
+		html: serialize(sink, node, "", { next: 0 }),
+		diagnostics: sink.diagnostics,
+		positions: sink.positions
+	};
+};
+/** An authored style object as a declaration list, checked by the same rules as a serialized tree. */
+const serializeStyle = (style, origins) => {
+	const sink = serializationSink({});
+	return {
+		css: declarations(sink, style, origins),
+		diagnostics: sink.diagnostics
+	};
+};
+/**
+* Check one static attribute value against its element's spec, as serialization does. Returns
+* the text that would be emitted, or `undefined` when the attribute is dropped or invalid.
+*/
+const checkAttribute = (tag, name, value, origins) => {
+	const sink = serializationSink({});
+	const element = emailElement(tag);
+	const globals = EMAIL_GLOBAL_ATTRIBUTES;
+	const attributeSpec = () => {
+		if (/^(data|aria)-[a-z0-9-]+$/.test(name)) return { type: "string" };
+		if (Object.hasOwn(globals, name)) return globals[name];
+		if (element !== void 0 && Object.hasOwn(element.attributes, name)) return element.attributes[name];
+	};
+	const spec = attributeSpec();
+	if (spec === void 0) return {
+		text: void 0,
+		diagnostics: sink.diagnostics
+	};
+	return {
+		text: attributeValue(sink, tag, name, spec, value, origins),
+		diagnostics: sink.diagnostics
+	};
+};
+//#endregion
+//#region src/email/components.ts
+/** Marks the hidden preview block so the renderer can read it back and the text lane can keep it. */
+const PREHEADER_ATTRIBUTE = "data-samva-preheader";
+const PREHEADER_PADDING_ATTRIBUTE = "data-samva-preheader-padding";
+const PREHEADER_TARGET_LENGTH = 200;
+const PREHEADER_PADDING = "\xA0‌​‍‎‏";
+const presentation = (table, row, rowProps = {}) => jsx("table", {
+	role: "presentation",
+	border: 0,
+	cellpadding: 0,
+	cellspacing: 0,
+	...table,
+	children: jsx("tbody", { children: jsx("tr", {
+		...rowProps,
+		children: row
+	}) })
+});
+/** A primitive's own class, then the author's. */
+const classNames = (own, authored) => authored === void 0 || authored.trim() === "" ? own : `${own} ${authored}`;
+const optionalNumber = (found, component, name, value, bounds = {}) => {
+	if (value === void 0) return void 0;
+	if (typeof value === "number" && Number.isFinite(value) && (bounds.min === void 0 || value >= bounds.min)) return value;
+	found.push({
+		code: "invalid-number-prop",
+		severity: "error",
+		message: `<${component} ${name}> must be a finite number${bounds.min === void 0 ? "" : ` of at least ${bounds.min}`}.`
+	});
+};
+/** The hidden inbox preview block. Padding characters stop the client borrowing body copy. */
+const preheaderNode = (text) => jsx("div", {
+	[PREHEADER_ATTRIBUTE]: text,
+	style: {
+		display: "none",
+		overflow: "hidden",
+		lineHeight: "1px",
+		opacity: 0,
+		maxHeight: 0,
+		maxWidth: 0
+	},
+	children: [text, text.length >= PREHEADER_TARGET_LENGTH ? null : jsx("div", {
+		[PREHEADER_PADDING_ATTRIBUTE]: true,
+		children: PREHEADER_PADDING.repeat(Math.ceil((PREHEADER_TARGET_LENGTH - text.length) / 7))
+	})]
+});
+/**
+* Document shell: the head every target client needs, a body painted with the page color, and
+* the content cell. The content cell sets the theme's text color and body font
+* (`--color-foreground`, `--font-sans`) for everything inside it, and pads the content off the
+* screen edge (`gutter`).
+*/
+const Email = ({ className, lang = "en", dir = "ltr", title, backgroundColor = "var(--color-background)", gutter, style, children }) => {
+	const found = [];
+	const safeGutter = optionalNumber(found, "Email", "gutter", gutter, { min: 0 });
+	const cellStyle = {
+		...safeGutter === void 0 ? {} : {
+			paddingLeft: `${safeGutter}px`,
+			paddingRight: `${safeGutter}px`
+		},
+		...style
+	};
+	const document = jsx("html", {
+		lang,
+		dir,
+		xmlns: "http://www.w3.org/1999/xhtml",
+		"xmlns:o": "urn:schemas-microsoft-com:office:office",
+		children: [jsx("head", { children: [
+			jsx("meta", { charset: "utf-8" }),
+			jsx("meta", {
+				"http-equiv": "Content-Type",
+				content: "text/html; charset=UTF-8"
+			}),
+			jsx("meta", {
+				name: "viewport",
+				content: "width=device-width, initial-scale=1"
+			}),
+			jsx("meta", { name: "x-apple-disable-message-reformatting" }),
+			jsx("meta", {
+				name: "color-scheme",
+				content: "light dark"
+			}),
+			jsx("meta", {
+				name: "supported-color-schemes",
+				content: "light dark"
+			}),
+			title === void 0 ? null : jsx("title", { children: title }),
+			rawMarkup("<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->")
+		] }), jsx("body", {
+			style: {
+				margin: 0,
+				padding: 0,
+				width: "100%",
+				backgroundColor
+			},
+			children: [presentation({
+				align: "center",
+				width: "100%",
+				bgcolor: backgroundColor,
+				style: {
+					width: "100%",
+					backgroundColor
+				}
+			}, jsx("td", {
+				className: classNames(PRIMITIVE_CLASSES.email, className),
+				...Object.keys(cellStyle).length === 0 ? {} : { style: cellStyle },
+				children
+			}))]
+		})]
+	});
+	return withEmailDiagnostics(document, found);
+};
+/** A pixel width as `width: 100%` capped at it, so a fixed-width table still fits a phone. */
+const fluidWidth = (width) => {
+	const pixels = typeof width === "number" ? width : /^\d+(?:\.\d+)?(?:px)?$/.test(width) ? width : void 0;
+	if (pixels === void 0) return void 0;
+	return {
+		width: "100%",
+		maxWidth: typeof pixels === "number" ? `${pixels}px` : `${Number.parseFloat(pixels)}px`
+	};
+};
+/** A full-width band of content, as the single-cell table every client agrees on. */
+const Section = ({ className, align = "center", width = "100%", bgcolor, style, tableStyle, children }) => {
+	const fluid = fluidWidth(width);
+	const table = fluid === void 0 ? tableStyle : {
+		...fluid,
+		...tableStyle
+	};
+	return presentation({
+		align,
+		width,
+		...bgcolor === void 0 ? {} : { bgcolor },
+		...table === void 0 ? {} : { style: table }
+	}, jsx("td", {
+		className,
+		...style === void 0 ? {} : { style },
+		children
+	}));
+};
+/** The equal share of a row that each of `count` cells takes, whole percent rounded down. */
+const equalColumnWidth = (count) => `${Math.floor(100 / count)}%`;
+/**
+* Give a `Column` that states no width its equal share, keeping the primitive's attribute order,
+* and the stacking class when its row stacks.
+*/
+const withColumnLayout = (node, width, stack) => {
+	if (node.type === "Fragment") return EmailNode.Fragment({ children: node.children.map((child) => withColumnLayout(child, width, stack)) });
+	if (node.type !== "Element" || node.tag !== "td") return node;
+	const props = {};
+	const sized = width === void 0 || node.props.width !== void 0;
+	for (const [key, value] of Object.entries(node.props)) {
+		if (key === "style" && !sized) props.width = width;
+		props[key] = value;
+	}
+	if (!sized && props.width === void 0) props.width = width;
+	if (stack) props.className = classNames(PRIMITIVE_CLASSES.stack, typeof props.className === "string" ? props.className : void 0);
+	return EmailNode.Element({
+		...node,
+		props
+	});
+};
+/** The cell between two `Column`s: `gap` wide in a row, `gap` tall once the row stacks. */
+const gapCell = (gap, stack) => jsx("td", {
+	...stack ? { className: PRIMITIVE_CLASSES.stack } : {},
+	width: gap,
+	style: {
+		width: `${gap}px`,
+		...stack ? { height: `${gap}px` } : {},
+		fontSize: "1px",
+		lineHeight: "1px"
+	},
+	children: "​"
+});
+/** Cells with a gap cell between each two that render something. */
+const withGaps = (cells, gap, stack) => {
+	if (gap === void 0 || gap === 0) return cells;
+	const output = [];
+	for (const cell of cells) {
+		if (cell.type === "Text" && cell.value.trim() === "") {
+			output.push(cell);
+			continue;
+		}
+		if (output.some((placed) => placed.type !== "Text" || placed.value.trim() !== "")) output.push(gapCell(gap, stack));
+		output.push(cell);
+	}
+	return output;
+};
+/**
+* A row of side-by-side `Column`s that stacks on a narrow viewport (`stack`). No flex or grid
+* conversion happens here. With `each` it repeats its cells over a list, `per` to a row, and
+* splits the row equally between cells that state no width.
+*/
+const Columns = ({ className, align = "center", width = "100%", style, each, per, stack = true, gap, children }) => {
+	const table = {
+		className,
+		align,
+		width,
+		...style === void 0 ? {} : { style }
+	};
+	const found = [];
+	const safeGap = optionalNumber(found, "Columns", "gap", gap, { min: 0 });
+	if (each === void 0 || typeof children !== "function") return withEmailDiagnostics(presentation(table, withGaps(normalizeChildren(children).map((cell) => withColumnLayout(cell, void 0, stack)), safeGap, stack), { style: { width: "100%" } }), found);
+	if (per !== void 0 && (!Number.isInteger(per) || per < 1)) found.push({
+		code: "invalid-columns-per",
+		severity: "error",
+		message: "<Columns per> must be a positive integer."
+	});
+	const size = per !== void 0 && Number.isInteger(per) && per >= 1 ? per : void 0;
+	const chunks = [];
+	if (size === void 0) chunks.push(each);
+	else for (let at = 0; at < each.length; at += size) chunks.push(each.slice(at, at + size));
+	const share = equalColumnWidth(size ?? Math.max(each.length, 1));
+	const rows = jsx(Fragment, { children: chunks.map((chunk) => presentation(table, withGaps(chunk.flatMap((item, index) => normalizeChildren(children(item, index)).map((cell) => withColumnLayout(cell, share, stack))), safeGap, stack), { style: { width: "100%" } })) });
+	return withEmailDiagnostics(rows, found);
+};
+/** One cell of a `Columns` row. */
+const Column = ({ className, align, valign, width, style, children }) => jsx("td", {
+	className,
+	...align === void 0 ? {} : { align },
+	...valign === void 0 ? {} : { valign },
+	...width === void 0 ? {} : { width },
+	...style === void 0 ? {} : { style },
+	children
+});
+/** Average advance of a bold sans-serif glyph, as a fraction of the font size. */
+const BOLD_GLYPH_ADVANCE = .6;
+const invalidButtonNumber = (found, name) => {
+	found.push({
+		code: "invalid-button-number",
+		severity: "error",
+		message: `<Button ${name}> must be a finite number.`
+	});
+};
+const buttonNumber = (found, name, value, fallback) => {
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+	invalidButtonNumber(found, name);
+	return fallback;
+};
+const optionalButtonNumber = (found, name, value) => {
+	if (value === void 0) return void 0;
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+	invalidButtonNumber(found, name);
+};
+const optionalPositiveButtonNumber = (found, name, value) => {
+	if (value === void 0) return void 0;
+	if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
+	found.push({
+		code: "invalid-button-number",
+		severity: "error",
+		message: `<Button ${name}> must be a positive finite number.`
+	});
+};
+/**
+* A link styled as a button, with a VML fallback so classic Outlook draws the shape. Its fill,
+* label color, font and corners default to the theme (`bg-primary`, `text-primary-foreground`,
+* `font-sans`, `rounded`), so a class on the button restyles it. Classic Outlook draws the VML
+* shape from the props alone: set `backgroundColor`, `color` and `borderRadius` when the button
+* does not use the theme's primary fill.
+*/
+const Button = ({ className, href, width, height, paddingX = 16, backgroundColor, color, borderRadius, borderColor, borderWidth = 0, fontSize = 16, fontFamily, align = "left", style, children }) => {
+	const found = [];
+	const safeWidth = optionalButtonNumber(found, "width", width);
+	const safeHeight = optionalPositiveButtonNumber(found, "height", height);
+	const safePaddingX = buttonNumber(found, "paddingX", paddingX, 16);
+	const safeBorderRadius = optionalButtonNumber(found, "borderRadius", borderRadius);
+	const safeBorderWidth = buttonNumber(found, "borderWidth", borderWidth, 0);
+	const safeFontSize = buttonNumber(found, "fontSize", fontSize, 16);
+	const label = typeof children === "string" ? children : void 0;
+	const fallback = safeHeight !== void 0 && label !== void 0;
+	if (!fallback) found.push({
+		code: "button-outlook-fallback",
+		severity: "warning",
+		message: "<Button> draws its classic Outlook shape from VML, which needs a height and a plain string label. Without both, classic Windows Outlook shows an unstyled link.",
+		clients: ["outlook-windows"]
+	});
+	const arcsize = safeHeight === void 0 ? 0 : Math.round((safeBorderRadius ?? 0) / safeHeight * 100);
+	const fallbackWidth = safeWidth ?? Math.ceil((label?.length ?? 0) * safeFontSize * BOLD_GLYPH_ADVANCE) + 2 * safePaddingX;
+	const fill = backgroundColor ?? "var(--color-primary)";
+	const ink = color ?? "var(--color-primary-foreground)";
+	const family = fontFamily ?? "var(--font-sans)";
+	const button = presentation({
+		width: "100%",
+		style: { borderCollapse: "collapse" }
+	}, jsx("td", {
+		align,
+		children: [fallback ? rawMarkup(`<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${escapeAttribute(href)}" style="height:${safeHeight}px;v-text-anchor:middle;width:${fallbackWidth}px;" arcsize="${arcsize}%" ${borderColor === void 0 ? "stroke=\"false\"" : `strokecolor="${escapeAttribute(borderColor)}" strokeweight="${safeBorderWidth}px"`} fillcolor="${escapeAttribute(fill)}"><w:anchorlock/><center style="color:${escapeAttribute(ink)};font-family:${escapeAttribute(family)};font-size:${safeFontSize}px;font-weight:bold;">${escapeText(label)}</center></v:roundrect><![endif]-->`) : null, jsx("a", {
+			className: classNames(PRIMITIVE_CLASSES.button, className),
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			style: {
+				...backgroundColor === void 0 ? {} : { backgroundColor },
+				...color === void 0 ? {} : { color },
+				...safeBorderRadius === void 0 ? {} : { borderRadius: `${safeBorderRadius}px` },
+				display: "inline-block",
+				...fontFamily === void 0 ? {} : { fontFamily },
+				fontSize: `${safeFontSize}px`,
+				fontWeight: "bold",
+				lineHeight: safeHeight === void 0 ? "120%" : `${safeHeight - 2 * safeBorderWidth}px`,
+				textAlign: "center",
+				textDecoration: "none",
+				...safeWidth === void 0 ? { padding: `0 ${safePaddingX}px` } : {
+					width: `${safeWidth}px`,
+					maxWidth: "100%"
+				},
+				...borderColor === void 0 ? {} : { border: `${safeBorderWidth}px solid ${borderColor}` },
+				...fallback ? { msoHide: "all" } : {},
+				...style
+			},
+			children
+		})]
+	}));
+	return withEmailDiagnostics(button, found);
+};
+/** Vertical space that survives clients which collapse margins. */
+const Spacer = ({ height }) => presentation({ width: "100%" }, jsx("td", {
+	height,
+	style: {
+		height: `${height}px`,
+		lineHeight: `${height}px`,
+		fontSize: "1px"
+	},
+	children: "​"
+}));
+/**
+* A horizontal rule drawn as a cell border, which every target client renders. It defaults to a
+* 1px line in the theme's `--color-border`.
+*/
+const Divider = ({ className, color, thickness, style }) => presentation({ width: "100%" }, jsx("td", {
+	className: classNames(PRIMITIVE_CLASSES.divider, className),
+	style: {
+		...color === void 0 && thickness === void 0 ? {} : { borderTop: `${thickness ?? 1}px solid ${color ?? "var(--color-border)"}` },
+		fontSize: "1px",
+		lineHeight: "1px",
+		...style
+	},
+	children: "​"
+}));
+/** An image with the width/height attributes Outlook sizes from before CSS applies. */
+const Image = ({ className, src, alt, width, height, align, style }) => jsx("img", {
+	className,
+	src,
+	alt,
+	border: 0,
+	...width === void 0 ? {} : { width },
+	...height === void 0 ? {} : { height },
+	...align === void 0 ? {} : { align },
+	style: {
+		display: "block",
+		outline: "none",
+		border: "none",
+		textDecoration: "none",
+		maxWidth: "100%",
+		...style
+	}
+});
+/**
+* A text link that opens outside the client and cannot reach back at the opener. It defaults to
+* the theme's `--color-primary`, underlined.
+*/
+const Link = ({ className, href, target = "_blank", rel = "noopener noreferrer", style, children }) => jsx("a", {
+	className: classNames(PRIMITIVE_CLASSES.link, className),
+	href,
+	target,
+	rel,
+	...style === void 0 ? {} : { style },
+	children
+});
+//#endregion
+export { reservedBrandAttributes as $, renderEmail as A, brandComponents as B, emailSelectionAncestry as C, previewEmail as D, emailSelections as E, propFor as F, emailPresentationOverrides as G, withoutUnsubscribeRow as H, rawParts as I, EMAIL_GLOBAL_ATTRIBUTES as J, isValueNode as K, PRIMITIVE_CLASSES as L, lowerEmailNodes as M, Tokens as N, RenderError as O, emailNodeToIr as P, parseBrandSpecifier as Q, PRIMITIVE_CSS as R, emailDefinitionInstances as S, emailSelectionSiblings as T, COMPONENT_DEGRADATIONS as U, renderedFooterMarkers as V, componentDegradation as W, isUrlAttribute as X, emailElement as Y, brandSpecifierPattern as Z, kebab as _, Email as a, INSTANCE_PATH_ATTRIBUTE as b, PREHEADER_ATTRIBUTE as c, equalColumnWidth as d, samvaBrandPlugin as et, preheaderNode as f, escapeText as g, escapeAttribute as h, Divider as i, smsSegmentInfo as j, render as k, Section as l, declarationValue as m, Column as n, Image as o, checkAttribute as p, EMAIL_ELEMENTS as q, Columns as r, Link as s, Button as t, COMPILED_TEMPLATE_VERSION as tt, Spacer as u, serializeEmailHtml as v, emailSelectionIndex as w, emailAuthoringTarget as x, serializeStyle as y, BRAND_COMPONENT_CLASSES as z };