@samva/markup 0.1.2 → 0.2.0

package/dist/compile.js

@@ -1,938 +1,29 @@
 import { SmlCompileError } from "./diagnostics.js";
-import { isHiddenNode, numberAttribute, stringAttribute } from "./ast.js";
-import { GRADIENT_DIRECTION_PROPERTY, GRADIENT_FROM_PROPERTY, GRADIENT_TO_PROPERTY } from "./registry.js";
-import { resolveClasses } from "./classes.js";
 import { parseSml } from "./parser.js";
 import { t as COMPILER_VERSION } from "./version-BITr58kk.js";
 import { compileSmsRoot } from "./compile-sms.js";
 import { compileWhatsAppRoot } from "./compile-whatsapp.js";
-import { escapeCssString, resolveTokenTable } from "./theme.js";
-import { baseTokens } from "./tokens.js";
 import { Result } from "effect";
 //#region src/compile.ts
-const element = (tag, attrs, style, children, options) => ({
-	kind: "element",
-	tag,
-	attrs,
-	style,
-	children,
-	void: options?.void === true ? true : void 0
-});
-const text = (value) => ({
-	kind: "text",
-	value
-});
-const raw = (html) => ({
-	kind: "raw",
-	html
-});
-const INLINE_HTML_TAGS = /* @__PURE__ */ new Set([
-	"a",
-	"span",
-	"strong",
-	"em",
-	"i",
-	"title"
-]);
-const escapeHtmlText = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
-const escapeHtmlAttribute = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll("\"", "&quot;");
-const serializeStyle = (style) => style.map((declaration) => `${declaration.property}:${declaration.value}`).join(";");
-const serializeOpenTag = (node, selfClose) => {
-	let result = `<${node.tag}`;
-	for (const [name, value] of node.attrs) result += value === "" ? ` ${name}=""` : ` ${name}="${escapeHtmlAttribute(value)}"`;
-	if (node.style.length > 0) result += ` style="${escapeHtmlAttribute(serializeStyle(node.style))}"`;
-	return result + (selfClose ? "/>" : ">");
-};
-const isInlineNode = (node) => node.kind === "fragment" ? false : node.kind !== "element" || INLINE_HTML_TAGS.has(node.tag);
-const serializeHtmlNode = (node) => {
-	if (node.kind === "text") return escapeHtmlText(node.value);
-	if (node.kind === "raw") return node.html;
-	if (node.kind === "fragment") return node.children.map(serializeHtmlNode).join("\n");
-	if (node.void === true || node.children.length === 0) {
-		if (node.void === true) return serializeOpenTag(node, true);
-		return `${serializeOpenTag(node, false)}</${node.tag}>`;
-	}
-	const inlineContent = node.children.every(isInlineNode);
-	const children = node.children.map(serializeHtmlNode);
-	if (inlineContent) return `${serializeOpenTag(node, false)}${children.join("")}</${node.tag}>`;
-	return `${serializeOpenTag(node, false)}\n${children.join("\n")}\n</${node.tag}>`;
-};
-const GRADIENT_PROPERTIES = /* @__PURE__ */ new Set([
-	GRADIENT_DIRECTION_PROPERTY,
-	GRADIENT_FROM_PROPERTY,
-	GRADIENT_TO_PROPERTY
-]);
-const isGradientClass = (resolved) => resolved.declarations.some((declaration) => GRADIENT_PROPERTIES.has(declaration.property));
-const combineGradient = (state, baseClasses) => {
-	const gradientClasses = baseClasses.filter(isGradientClass);
-	if (gradientClasses.length === 0) return baseClasses.flatMap((resolved) => [...resolved.declarations]);
-	const slots = /* @__PURE__ */ new Map();
-	for (const resolved of gradientClasses) for (const declaration of resolved.declarations) slots.set(declaration.property, declaration.value);
-	const direction = slots.get(GRADIENT_DIRECTION_PROPERTY);
-	const from = slots.get(GRADIENT_FROM_PROPERTY);
-	const to = slots.get(GRADIENT_TO_PROPERTY);
-	const anchor = gradientClasses[0];
-	const missing = [];
-	if (direction === void 0) missing.push("a direction (bg-gradient-to-b/t/l/r)");
-	if (from === void 0) missing.push("a start color (from-{color})");
-	if (to === void 0) missing.push("an end color (to-{color})");
-	if (missing.length > 0) {
-		state.errors.push({
-			code: "incomplete-gradient",
-			message: `incomplete gradient near "${anchor.raw}" — add ${missing.join(" and ")}`,
-			span: anchor.span
-		});
-		return baseClasses.filter((resolved) => !isGradientClass(resolved)).flatMap((resolved) => [...resolved.declarations]);
-	}
-	const combined = [{
-		property: "background-color",
-		value: from
-	}];
-	if (state.base === "modern") combined.push({
-		property: "background-image",
-		value: `linear-gradient(${direction},${from},${to})`
-	});
-	const out = [];
-	for (const resolved of baseClasses) {
-		if (isGradientClass(resolved)) {
-			if (resolved === anchor) out.push(...combined);
-			continue;
-		}
-		out.push(...resolved.declarations);
-	}
-	return out;
-};
-const resolveNodeStyles = (state, node, defaults = {
-	inline: [],
-	dark: []
-}) => {
-	const classAttribute = node.attributes.find((attribute) => attribute.name === "class");
-	if (classAttribute === void 0 || classAttribute.value.kind !== "string") {
-		if (defaults.dark.length === 0) return {
-			inline: [...defaults.inline],
-			className: null
-		};
-		const className = `sml-${node.id}`;
-		state.darkRules.push({
-			selector: `.${className}`,
-			declarations: defaults.dark
-		});
-		return {
-			inline: [...defaults.inline],
-			className
-		};
-	}
-	const resolution = resolveClasses(classAttribute.value.value, state.theme, classAttribute.valueSpan.start);
-	state.errors.push(...resolution.errors);
-	state.warnings.push(...resolution.warnings);
-	const byVariant = (variant) => resolution.classes.filter((resolved) => resolved.variant === variant);
-	const base = byVariant("base");
-	const inline = [...defaults.inline, ...combineGradient(state, base)];
-	const smDeclarations = byVariant("sm").flatMap((resolved) => [...resolved.declarations]);
-	const darkDeclarations = [
-		...defaults.dark,
-		...base.flatMap((resolved) => [...resolved.darkDeclarations ?? []]),
-		...byVariant("dark").flatMap((resolved) => [...resolved.declarations])
-	];
-	if (smDeclarations.length === 0 && darkDeclarations.length === 0) return {
-		inline,
-		className: null
-	};
-	const className = `sml-${node.id}`;
-	if (smDeclarations.length > 0) state.smRules.push({
-		selector: `.${className}`,
-		declarations: smDeclarations
-	});
-	if (darkDeclarations.length > 0) state.darkRules.push({
-		selector: `.${className}`,
-		declarations: darkDeclarations
-	});
-	return {
-		inline,
-		className
-	};
-};
-/**
-* Inline anchors are deliberately a narrower surface than block primitives:
-* classes resolve through the exact same safe registry, but source IDs stay on
-* their block owner so the canvas does not expose links as independent nodes.
-*
-* A link always has a concrete color and decoration. That prevents each email
-* client from choosing its browser-default blue/underline treatment; authored
-* classes follow these defaults and therefore win by normal CSS last-wins.
-*/
-const resolveInlineLinkStyles = (state, node) => resolveNodeStyles(state, node, {
-	inline: [{
-		property: "color",
-		value: state.theme.colors.brand
-	}, {
-		property: "text-decoration",
-		value: "underline"
-	}],
-	dark: state.theme.colorsDark.brand === void 0 ? [] : [{
-		property: "color",
-		value: state.theme.colorsDark.brand
-	}]
-});
-const nodeAttrs = (state, node, styles, extra = [], options) => {
-	const attrs = state.stripInstrumentation ? [...extra] : [["data-sml-id", node.id], ...extra];
-	const classNames = [styles.className, options?.extraClassName].filter((className) => className !== null && className !== void 0);
-	if (classNames.length > 0) attrs.push(["class", classNames.join(" ")]);
-	return attrs;
-};
-const isPaddingProperty = (property) => property === "padding" || property.startsWith("padding-");
-const splitPadding = (declarations) => {
-	const padding = [];
-	const rest = [];
-	for (const declaration of declarations) (isPaddingProperty(declaration.property) ? padding : rest).push(declaration);
-	return {
-		padding,
-		rest
-	};
-};
-const BACKGROUND_POSITION_DEFAULT = "center";
-const BACKGROUND_SIZE_DEFAULT = "cover";
-const backgroundImageUrl = (node) => {
-	const url = stringAttribute(node, "backgroundImage");
-	return url === void 0 || url === "" ? void 0 : url;
-};
-const backgroundImageStyle = (node) => {
-	const url = backgroundImageUrl(node);
-	if (url === void 0) return [];
-	return [
-		{
-			property: "background-image",
-			value: `url('${escapeCssString(url)}')`
-		},
-		{
-			property: "background-position",
-			value: stringAttribute(node, "backgroundPosition") ?? BACKGROUND_POSITION_DEFAULT
-		},
-		{
-			property: "background-size",
-			value: stringAttribute(node, "backgroundSize") ?? BACKGROUND_SIZE_DEFAULT
-		},
-		{
-			property: "background-repeat",
-			value: "no-repeat"
-		}
-	];
-};
-const MAX_FONT_WIDTH = 5;
-const computeFontWidthAndSpaceCount = (expectedWidth) => {
-	if (expectedWidth === 0) return [0, 0];
-	let spaceCount = 0;
-	const requiredFontWidth = () => spaceCount > 0 ? expectedWidth / spaceCount / 2 : Number.POSITIVE_INFINITY;
-	while (requiredFontWidth() > MAX_FONT_WIDTH) spaceCount++;
-	return [requiredFontWidth(), spaceCount];
-};
-const pxToPt = (px) => px * 3 / 4;
-const paddingPx = (declarations) => {
-	const padding = {
-		top: 0,
-		right: 0,
-		bottom: 0,
-		left: 0
-	};
-	const parse = (value) => {
-		const match = /^([\d.]+)px$/.exec(value);
-		return match === null ? 0 : Number.parseFloat(match[1]);
-	};
-	for (const declaration of declarations) switch (declaration.property) {
-		case "padding":
-			padding.top = padding.right = padding.bottom = padding.left = parse(declaration.value);
-			break;
-		case "padding-top":
-			padding.top = parse(declaration.value);
-			break;
-		case "padding-right":
-			padding.right = parse(declaration.value);
-			break;
-		case "padding-bottom":
-			padding.bottom = parse(declaration.value);
-			break;
-		case "padding-left": padding.left = parse(declaration.value);
-	}
-	return padding;
-};
-const PREVIEW_MAX_LENGTH = 200;
-const PREVIEW_WHITESPACE = "\xA0‌​‍‎‏";
-const TABLE_RESET = [
-	["border", "0"],
-	["cellpadding", "0"],
-	["cellspacing", "0"],
-	["role", "presentation"]
-];
-const expandInline = (state, nodes) => nodes.map((node) => {
-	if (node.kind === "text") return text(node.value);
-	if (node.kind === "interpolation") return text(node.syntax === "curly" ? `{{${node.name}}}` : `\${${node.name}}`);
-	if (node.tag === "a") {
-		const styles = resolveInlineLinkStyles(state, node);
-		const attrs = [["href", stringAttribute(node, "href") ?? ""], ["target", "_blank"]];
-		if (styles.className !== null) attrs.push(["class", styles.className]);
-		return element("a", attrs, styles.inline, expandInline(state, node.children));
-	}
-	return element(node.tag, [], [], expandInline(state, node.children));
-});
-const expandBlock = (state, node) => {
-	const styles = resolveNodeStyles(state, node);
-	switch (node.tag) {
-		case "Container":
-		case "Section": {
-			const { padding, rest } = splitPadding(styles.inline);
-			const bgStyle = backgroundImageStyle(node);
-			const bgUrl = backgroundImageUrl(node);
-			const children = node.children.flatMap((child) => child.kind === "element" ? [expandBlock(state, child)] : []);
-			if (state.base === "modern") {
-				const style = node.tag === "Container" ? [
-					{
-						property: "max-width",
-						value: `${state.emailWidth}px`
-					},
-					{
-						property: "margin-left",
-						value: "auto"
-					},
-					{
-						property: "margin-right",
-						value: "auto"
-					}
-				] : [];
-				return element("div", nodeAttrs(state, node, styles), [
-					...style,
-					...rest,
-					...bgStyle,
-					...padding
-				], children);
-			}
-			const tableStyle = node.tag === "Container" ? [{
-				property: "max-width",
-				value: `${state.emailWidth}px`
-			}, ...rest] : rest;
-			const tdAttrs = bgUrl === void 0 ? [] : [["background", bgUrl]];
-			return element("table", nodeAttrs(state, node, styles, [
-				["align", "center"],
-				["width", "100%"],
-				...TABLE_RESET
-			]), tableStyle, [element("tbody", [], [], [element("tr", [], [{
-				property: "width",
-				value: "100%"
-			}], [element("td", tdAttrs, [...bgStyle, ...padding], children)])])]);
-		}
-		case "Row": {
-			const columns = node.children.flatMap((child) => child.kind === "element" ? [expandBlock(state, child)] : []);
-			const { padding, rest } = splitPadding(styles.inline);
-			const rowTable = (tableStyle) => element("table", nodeAttrs(state, node, styles, [
-				["align", "center"],
-				["width", "100%"],
-				...TABLE_RESET
-			]), tableStyle, [element("tbody", [], [{
-				property: "width",
-				value: "100%"
-			}], [element("tr", [], [{
-				property: "width",
-				value: "100%"
-			}], columns)])]);
-			if (state.base === "modern" || padding.length === 0) return rowTable(styles.inline);
-			return element("table", [
-				["align", "center"],
-				["width", "100%"],
-				...TABLE_RESET
-			], [], [element("tbody", [], [], [element("tr", [], [{
-				property: "width",
-				value: "100%"
-			}], [element("td", [], padding, [rowTable(rest)])])])]);
-		}
-		case "Column": {
-			const width = stringAttribute(node, "width");
-			const valign = stringAttribute(node, "valign");
-			const children = node.children.flatMap((child) => child.kind === "element" ? [expandBlock(state, child)] : []);
-			return element("td", nodeAttrs(state, node, styles, [...width === void 0 ? [] : [["width", width]], ...valign === void 0 ? [] : [["valign", valign]]]), [...valign === void 0 ? [] : [{
-				property: "vertical-align",
-				value: valign
-			}], ...styles.inline], children);
-		}
-		case "Heading": {
-			const level = numberAttribute(node, "level") ?? 1;
-			return element(`h${level}`, nodeAttrs(state, node, styles), styles.inline, expandInline(state, node.children));
-		}
-		case "Text": return element("p", nodeAttrs(state, node, styles), [...[
-			{
-				property: "font-size",
-				value: "14px"
-			},
-			{
-				property: "line-height",
-				value: "24px"
-			},
-			{
-				property: "margin-top",
-				value: "16px"
-			},
-			{
-				property: "margin-bottom",
-				value: "16px"
-			}
-		], ...styles.inline], expandInline(state, node.children));
-		case "Button": return expandButton(state, node, styles);
-		case "List": {
-			const tag = stringAttribute(node, "type") === "ordered" ? "ol" : "ul";
-			const defaults = [
-				{
-					property: "margin-top",
-					value: "16px"
-				},
-				{
-					property: "margin-bottom",
-					value: "16px"
-				},
-				{
-					property: "padding-left",
-					value: "24px"
-				}
-			];
-			const items = node.children.flatMap((child) => child.kind === "element" ? [expandBlock(state, child)] : []);
-			return element(tag, nodeAttrs(state, node, styles), [...defaults, ...styles.inline], items);
-		}
-		case "ListItem": return element("li", nodeAttrs(state, node, styles), [...[
-			{
-				property: "font-size",
-				value: "14px"
-			},
-			{
-				property: "line-height",
-				value: "24px"
-			},
-			{
-				property: "margin-top",
-				value: "0px"
-			},
-			{
-				property: "margin-bottom",
-				value: "8px"
-			}
-		], ...styles.inline], expandInline(state, node.children));
-		case "If": {
-			const test = stringAttribute(node, "test") ?? "";
-			const elements = node.children.filter((child) => child.kind === "element");
-			const elseNode = elements.find((child) => child.tag === "Else");
-			const children = [raw(`<!--sml:if:${node.id} ${test}-->`)];
-			for (const child of elements) if (child.tag !== "Else") children.push(expandBlock(state, child));
-			if (elseNode !== void 0) {
-				children.push(raw(`<!--sml:else:${node.id}-->`));
-				for (const child of elseNode.children) if (child.kind === "element") children.push(expandBlock(state, child));
-			}
-			children.push(raw(`<!--sml:endif:${node.id}-->`));
-			return {
-				kind: "fragment",
-				children
-			};
-		}
-		case "Image": {
-			const width = numberAttribute(node, "width");
-			const height = numberAttribute(node, "height");
-			const src = stringAttribute(node, "src") ?? "";
-			const alt = stringAttribute(node, "alt") ?? "";
-			const darkSource = node.children.find((child) => child.kind === "element" && child.tag === "Source" && stringAttribute(child, "scheme") === "dark");
-			const darkImageSource = darkSource === void 0 ? void 0 : stringAttribute(darkSource, "src");
-			const attrs = nodeAttrs(state, node, styles, [
-				["alt", alt],
-				["src", src],
-				...width === void 0 ? [] : [["width", String(width)]],
-				...height === void 0 ? [] : [["height", String(height)]]
-			]);
-			const reset = [
-				{
-					property: "display",
-					value: "block"
-				},
-				{
-					property: "outline",
-					value: "none"
-				},
-				{
-					property: "border",
-					value: "none"
-				},
-				{
-					property: "text-decoration",
-					value: "none"
-				}
-			];
-			if (darkImageSource !== void 0) {
-				const lightClassName = `sml-${node.id}-theme-light`;
-				const darkClassName = `sml-${node.id}-theme-dark`;
-				state.darkRules.push({
-					selector: state.stripInstrumentation ? `.${lightClassName}` : `[data-sml-id="${node.id}"][data-sml-theme="light"]`,
-					declarations: [{
-						property: "display",
-						value: "none"
-					}]
-				}, {
-					selector: state.stripInstrumentation ? `.${darkClassName}` : `[data-sml-id="${node.id}"][data-sml-theme="dark"]`,
-					declarations: [{
-						property: "display",
-						value: "block"
-					}]
-				});
-				const themedAttrs = (theme, imageSrc) => {
-					const themeClassName = theme === "light" ? lightClassName : darkClassName;
-					return nodeAttrs(state, node, styles, [
-						...state.stripInstrumentation ? [] : [["data-sml-theme", theme]],
-						["alt", alt],
-						["src", imageSrc],
-						...width === void 0 ? [] : [["width", String(width)]],
-						...height === void 0 ? [] : [["height", String(height)]]
-					], state.stripInstrumentation ? { extraClassName: themeClassName } : void 0);
-				};
-				return {
-					kind: "fragment",
-					children: [element("img", themedAttrs("light", src), [...reset, ...styles.inline], [], { void: true }), element("img", themedAttrs("dark", darkImageSource), [
-						{
-							property: "display",
-							value: "none"
-						},
-						...reset.slice(1),
-						...styles.inline
-					], [], { void: true })]
-				};
-			}
-			return element("img", attrs, [...reset, ...styles.inline], [], { void: true });
-		}
-		case "Divider": return element("hr", nodeAttrs(state, node, styles), [...[
-			{
-				property: "width",
-				value: "100%"
-			},
-			{
-				property: "border",
-				value: "none"
-			},
-			{
-				property: "border-top",
-				value: "1px solid #eaeaea"
-			}
-		], ...styles.inline], [], { void: true });
-		case "Spacer": {
-			const height = numberAttribute(node, "height") ?? 0;
-			return element("div", nodeAttrs(state, node, styles), [
-				{
-					property: "height",
-					value: `${height}px`
-				},
-				{
-					property: "line-height",
-					value: `${height}px`
-				},
-				{
-					property: "font-size",
-					value: "1px"
-				}
-			], [raw("&#8202;")]);
-		}
-		default:
-			state.errors.push({
-				code: "internal-unexpected-node",
-				message: `unexpected <${node.tag}> during expansion`,
-				span: node.span
-			});
-			return raw("");
-	}
-};
-const expandButton = (state, node, styles) => {
-	const href = stringAttribute(node, "href") ?? "";
-	const label = expandInline(state, node.children);
-	const baseStyle = [
-		{
-			property: "line-height",
-			value: "100%"
-		},
-		{
-			property: "text-decoration",
-			value: "none"
-		},
-		{
-			property: "display",
-			value: "inline-block"
-		},
-		{
-			property: "max-width",
-			value: "100%"
-		},
-		{
-			property: "mso-padding-alt",
-			value: "0px"
-		}
-	];
-	const attrs = nodeAttrs(state, node, styles, [["href", href], ["target", "_blank"]]);
-	if (state.base === "modern") return element("a", attrs, [...baseStyle, ...styles.inline], label);
-	const padding = paddingPx(styles.inline);
-	const verticalPadding = padding.top + padding.bottom;
-	const textRaise = pxToPt(verticalPadding);
-	const [leftFontWidth, leftSpaceCount] = computeFontWidthAndSpaceCount(padding.left);
-	const [rightFontWidth, rightSpaceCount] = computeFontWidthAndSpaceCount(padding.right);
-	const innerSpanStyle = [
-		{
-			property: "max-width",
-			value: "100%"
-		},
-		{
-			property: "display",
-			value: "inline-block"
-		},
-		{
-			property: "line-height",
-			value: "120%"
-		},
-		{
-			property: "mso-padding-alt",
-			value: "0px"
-		},
-		...padding.bottom > 0 ? [{
-			property: "mso-text-raise",
-			value: `${pxToPt(padding.bottom)}`
-		}] : []
-	];
-	return element("a", attrs, [...baseStyle, ...styles.inline], [
-		element("span", [], [], [raw(`<!--[if mso]><i style="mso-font-width:${leftFontWidth * 100}%;mso-text-raise:${textRaise}" hidden>${"&#8202;".repeat(leftSpaceCount)}</i><![endif]-->`)]),
-		element("span", [], innerSpanStyle, label),
-		element("span", [], [], [raw(`<!--[if mso]><i style="mso-font-width:${rightFontWidth * 100}%" hidden>${"&#8202;".repeat(rightSpaceCount)}&#8203;</i><![endif]-->`)])
-	]);
-};
-const expandPreview = (state, node) => {
-	let previewText = scalarElementText(node);
-	let literalLength = 0;
-	for (const child of node.children) if (child.kind === "text") literalLength += child.value.length;
-	previewText = previewText.substring(0, PREVIEW_MAX_LENGTH);
-	const guaranteedLength = Math.min(literalLength, PREVIEW_MAX_LENGTH);
-	const children = [text(previewText)];
-	if (guaranteedLength < PREVIEW_MAX_LENGTH) children.push(element("div", [], [], [text(PREVIEW_WHITESPACE.repeat(PREVIEW_MAX_LENGTH - guaranteedLength))]));
-	return element("div", [...state.stripInstrumentation ? [] : [["data-sml-id", node.id]], ["data-skip-in-text", "true"]], [
-		{
-			property: "display",
-			value: "none"
-		},
-		{
-			property: "overflow",
-			value: "hidden"
-		},
-		{
-			property: "line-height",
-			value: "1px"
-		},
-		{
-			property: "opacity",
-			value: "0"
-		},
-		{
-			property: "max-height",
-			value: "0"
-		},
-		{
-			property: "max-width",
-			value: "0"
-		}
-	], children);
-};
-const serializeRules = (rules, indent, important) => rules.map((rule) => `${indent}${rule.selector}{${rule.declarations.map((d) => `${d.property}:${d.value}${important ? " !important" : ""}`).join(";")}}`).join("\n");
-const isBackgroundProperty = (property) => property.startsWith("background");
-const buildHeadStyle = (state) => {
-	const parts = [":root{color-scheme:light dark;supported-color-schemes:light dark}"];
-	if (state.smRules.length > 0) parts.push(`@media (min-width:640px){\n${serializeRules(state.smRules, "  ", true)}\n}`);
-	if (state.darkRules.length > 0) {
-		parts.push(`@media (prefers-color-scheme:dark){\n${serializeRules(state.darkRules, "  ", true)}\n}`);
-		const ogscRules = state.darkRules.flatMap((rule) => {
-			const declarations = rule.declarations.filter((d) => !isBackgroundProperty(d.property));
-			return declarations.length > 0 ? [{
-				selector: `[data-ogsc] ${rule.selector}`,
-				declarations
-			}] : [];
-		});
-		const ogsbRules = state.darkRules.flatMap((rule) => {
-			const declarations = rule.declarations.filter((d) => isBackgroundProperty(d.property));
-			return declarations.length > 0 ? [{
-				selector: `[data-ogsb] ${rule.selector}`,
-				declarations
-			}] : [];
-		});
-		if (ogscRules.length > 0) parts.push(serializeRules(ogscRules, "", true));
-		if (ogsbRules.length > 0) parts.push(serializeRules(ogsbRules, "", true));
-	}
-	return parts.join("\n");
-};
-/**
-* The @font-face block for self-hosted webfont tokens, emitted into a SEPARATE
-* <style> that is hidden from Outlook for Windows.
-*
-* Outlook-Windows must not SEE these rules: it would register an @font-face whose
-* family matches a used font, fail to load the distant src, and render the text in
-* Times New Roman — actively ignoring the inline font-family stack. Hiding the
-* block behind a downlevel-hidden conditional comment makes Outlook treat the font
-* as merely missing, so it falls through the inline stack to its generic instead.
-* (The head's OTHER <style> stays visible — it carries the Outlook.com [data-ogsc]
-* dark rules — so only this sibling is wrapped.) Empty when no token self-hosts.
-*/
-const UNICODE_RANGE = /^U\+[0-9A-Fa-f?]{1,6}(-[0-9A-Fa-f]{1,6})?$/;
-const isUnicodeRange = (value) => value.split(",").every((token) => UNICODE_RANGE.test(token.trim()) && token.trim() !== "");
-const buildFontFaceCss = (state) => {
-	return Object.entries(state.theme.fontFaces).flatMap(([name, set]) => {
-		const family = escapeCssString(set.family);
-		const stack = state.theme.fontFamilies[name];
-		if (stack === void 0 || !stack.startsWith(`'${family}',`)) return [];
-		return set.faces.map((face) => {
-			const range = face.unicodeRange && isUnicodeRange(face.unicodeRange) ? `unicode-range:${face.unicodeRange};` : "";
-			return `@font-face{font-family:'${family}';font-style:${face.style};font-weight:${face.weight};font-display:swap;src:url('${escapeCssString(face.src)}') format('woff2');${range}}`;
-		});
-	}).join("");
-};
-const buildFontFaceStyle = (css) => css === "" ? "" : `<!--[if !mso]><!--><style>${css}</style><!--<![endif]-->`;
-const inlinePlainText = (nodes) => {
-	let result = "";
-	for (const node of nodes) if (node.kind === "text") result += node.value;
-	else if (node.kind === "interpolation") result += node.syntax === "curly" ? `{{${node.name}}}` : `\${${node.name}}`;
-	else if (node.kind === "element" && node.tag === "a") {
-		const label = inlinePlainText(node.children);
-		const href = stringAttribute(node, "href") ?? "";
-		result += href === "" ? label : `${label} (${href})`;
-	} else if (node.kind === "element") result += inlinePlainText(node.children);
-	return result;
-};
-const blockPlainText = (node, blocks) => {
-	switch (node.tag) {
-		case "Subject":
-		case "Preview": return;
-		case "Heading":
-		case "Text": {
-			const value = inlinePlainText(node.children).trim();
-			if (value.length > 0) blocks.push(value);
-			return;
-		}
-		case "Button": {
-			const label = inlinePlainText(node.children).trim();
-			const href = stringAttribute(node, "href") ?? "";
-			blocks.push(href === "" ? label : `${label} (${href})`);
-			return;
-		}
-		case "Image": {
-			const alt = stringAttribute(node, "alt");
-			if (alt !== void 0 && alt.length > 0) blocks.push(alt);
-			return;
-		}
-		case "Divider":
-		case "Spacer": return;
-		case "List": {
-			const ordered = stringAttribute(node, "type") === "ordered";
-			const lines = [];
-			let position = 0;
-			for (const child of node.children) {
-				if (child.kind !== "element" || child.tag !== "ListItem") continue;
-				position += 1;
-				const value = inlinePlainText(child.children).trim();
-				if (value.length === 0) continue;
-				lines.push(ordered ? `${position}. ${value}` : `- ${value}`);
-			}
-			if (lines.length > 0) blocks.push(lines.join("\n"));
-			return;
-		}
-		case "If": {
-			const test = stringAttribute(node, "test") ?? "";
-			const elements = node.children.filter((child) => child.kind === "element");
-			const elseNode = elements.find((child) => child.tag === "Else");
-			blocks.push(`<!--sml:if:${node.id} ${test}-->`);
-			for (const child of elements) if (child.tag !== "Else") blockPlainText(child, blocks);
-			if (elseNode !== void 0) {
-				blocks.push(`<!--sml:else:${node.id}-->`);
-				for (const child of elseNode.children) if (child.kind === "element") blockPlainText(child, blocks);
-			}
-			blocks.push(`<!--sml:endif:${node.id}-->`);
-			return;
-		}
-		default: for (const child of node.children) if (child.kind === "element") blockPlainText(child, blocks);
-	}
-};
-const XHTML_DOCTYPE = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
-/** Compile a parsed document; the root tag routes to its channel backend. */
-const compileSml = (document, options) => {
-	switch (document.root.tag) {
-		case "Sms": return Result.succeed(compileSmsRoot(document.root));
-		case "WhatsApp": return compileWhatsAppRoot(document.root);
-		default: return compileEmailSml(document, options);
-	}
-};
-const compileSmlArtifact = (document, options) => {
+/** Compile a structured document; email definitions execute through the email runtime. */
+const compileSml = (document) => {
 	switch (document.root.tag) {
 		case "Sms": return Result.succeed(compileSmsRoot(document.root));
 		case "WhatsApp": return compileWhatsAppRoot(document.root);
-		default: return compileEmailSmlArtifact(document, options);
+		default: return Result.fail(new SmlCompileError({ diagnostics: [{
+			code: "email-requires-object-template",
+			message: "Email templates must default-export defineEmail with an input schema and fixtures.",
+			span: document.root.span
+		}] }));
 	}
 };
-/**
-* Drop `hidden="true"` elements (and their subtrees) before expansion, so a
-* hidden node leaves the artifact exactly as if it were never authored — no
-* stray whitespace, and the surviving nodes keep their positional ids (hiding
-* one node never renumbers the rest). The root itself is never filtered.
-*/
-const stripHiddenNodes = (node) => ({
-	...node,
-	children: node.children.flatMap((child) => {
-		if (child.kind !== "element") return [child];
-		return isHiddenNode(child) ? [] : [stripHiddenNodes(child)];
-	})
-});
-const addNodeId = (map, id, elementNode) => {
-	const current = map[id];
-	if (current === void 0) map[id] = [elementNode];
-	else current.push(elementNode);
-};
-const collectNodeIdMap = (node, map) => {
-	if (node.kind === "fragment") {
-		for (const child of node.children) collectNodeIdMap(child, map);
-		return;
-	}
-	if (node.kind !== "element") return;
-	const id = node.attrs.find(([name]) => name === "data-sml-id")?.[1];
-	if (id !== void 0) addNodeId(map, id, node);
-	for (const child of node.children) collectNodeIdMap(child, map);
-};
-const createNodeIdMap = (tree) => {
-	const map = {};
-	collectNodeIdMap(tree, map);
-	return map;
-};
-const compiledEmailFromArtifact = (artifact) => ({
-	channel: artifact.channel,
-	html: artifact.html,
-	text: artifact.text,
-	subjectText: artifact.subjectText,
-	warnings: artifact.warnings,
-	base: artifact.base,
-	compilerVersion: artifact.compilerVersion
-});
-const scalarElementText = (node) => {
-	let result = "";
-	for (const child of node.children) if (child.kind === "text") result += child.value;
-	else if (child.kind === "interpolation") result += child.syntax === "curly" ? `{{${child.name}}}` : `\${${child.name}}`;
-	return result;
-};
-const compileEmailSml = (inputDocument, options) => {
-	const artifact = compileEmailSmlArtifact(inputDocument, options);
-	if (Result.isFailure(artifact)) return Result.fail(artifact.failure);
-	return Result.succeed(compiledEmailFromArtifact(artifact.success));
-};
-const compileEmailSmlArtifact = (inputDocument, options) => {
-	const document = {
-		...inputDocument,
-		root: stripHiddenNodes(inputDocument.root)
-	};
-	const base = options?.base ?? "outlook-safe";
-	const emailWidth = numberAttribute(document.root, "width") ?? 600;
-	const state = {
-		base,
-		emailWidth,
-		theme: resolveTokenTable({
-			base: options?.theme?.base ?? baseTokens,
-			overrides: options?.theme?.overrides
-		}),
-		stripInstrumentation: options?.stripInstrumentation ?? false,
-		errors: [],
-		warnings: [],
-		smRules: [],
-		darkRules: []
-	};
-	const root = document.root;
-	const rootStyles = resolveNodeStyles(state, root);
-	const lang = stringAttribute(root, "lang") ?? "en";
-	const dir = stringAttribute(root, "dir") ?? "ltr";
-	const preview = root.children.find((child) => child.kind === "element" && child.tag === "Preview");
-	const subject = root.children.find((child) => child.kind === "element" && child.tag === "Subject");
-	const blocks = root.children.flatMap((child) => child.kind === "element" && child.tag !== "Preview" && child.tag !== "Subject" ? [expandBlock(state, child)] : []);
-	if (state.errors.length > 0) return Result.fail(new SmlCompileError({ diagnostics: state.errors }));
-	const bodyBackground = rootStyles.inline.filter((d) => isBackgroundProperty(d.property));
-	const bodyChildren = [];
-	if (preview !== void 0) bodyChildren.push(expandPreview(state, preview));
-	bodyChildren.push(element("table", [
-		["align", "center"],
-		["width", "100%"],
-		...TABLE_RESET
-	], [], [element("tbody", [], [], [element("tr", [], [], [element("td", [
-		["dir", dir],
-		["lang", lang],
-		...rootStyles.className !== null ? [["class", rootStyles.className]] : []
-	], [...rootStyles.inline], blocks)])])]));
-	const bodyAttrs = [
-		...state.stripInstrumentation ? [] : [["data-sml-id", root.id]],
-		["dir", dir],
-		["lang", lang]
-	];
-	if (rootStyles.className !== null) bodyAttrs.push(["class", rootStyles.className]);
-	const body = element("body", bodyAttrs, [...bodyBackground, {
-		property: "margin",
-		value: "0"
-	}], bodyChildren);
-	const headStyle = buildHeadStyle(state);
-	const fontFaceCss = buildFontFaceCss(state);
-	const fontFaceStyle = buildFontFaceStyle(fontFaceCss);
-	const headAssets = {
-		styles: [{
-			kind: "style",
-			css: headStyle,
-			html: `<style>${headStyle}</style>`,
-			outlookHidden: false
-		}, ...fontFaceCss === "" ? [] : [{
-			kind: "style",
-			css: fontFaceCss,
-			html: fontFaceStyle,
-			outlookHidden: true
-		}]],
-		links: []
-	};
-	const head = element("head", [], [], [
-		element("meta", [["content", "text/html; charset=UTF-8"], ["http-equiv", "Content-Type"]], [], [], { void: true }),
-		element("meta", [["name", "viewport"], ["content", "width=device-width"]], [], [], { void: true }),
-		element("meta", [["name", "x-apple-disable-message-reformatting"]], [], [], { void: true }),
-		element("meta", [["name", "color-scheme"], ["content", "light dark"]], [], [], { void: true }),
-		element("meta", [["name", "supported-color-schemes"], ["content", "light dark"]], [], [], { void: true }),
-		element("style", [], [], [raw(headStyle)]),
-		...fontFaceStyle !== "" ? [raw(fontFaceStyle)] : []
-	]);
-	const htmlAttrs = base === "outlook-safe" ? [
-		["dir", dir],
-		["lang", lang],
-		["xmlns", "http://www.w3.org/1999/xhtml"],
-		["xmlns:o", "urn:schemas-microsoft-com:office:office"],
-		["xmlns:v", "urn:schemas-microsoft-com:vml"]
-	] : [["dir", dir], ["lang", lang]];
-	const doctype = base === "outlook-safe" ? XHTML_DOCTYPE : "<!DOCTYPE html>";
-	const tree = element("html", htmlAttrs, [], [head, body]);
-	const html = `${doctype}\n${serializeHtmlNode(tree)}\n`;
-	const textBlocks = [];
-	for (const child of root.children) if (child.kind === "element") blockPlainText(child, textBlocks);
-	return Result.succeed({
-		channel: "email",
-		width: emailWidth,
-		html,
-		text: textBlocks.join("\n\n"),
-		subjectText: subject === void 0 ? null : scalarElementText(subject),
-		warnings: state.warnings,
-		base,
-		compilerVersion: COMPILER_VERSION,
-		tree,
-		doctype,
-		headAssets,
-		nodeIdMap: createNodeIdMap(tree)
-	});
-};
-const compileSource = (source, options) => {
-	const parsed = parseSml(source);
-	if (Result.isFailure(parsed)) return Result.fail(parsed.failure);
-	return compileSml(parsed.success, options);
-};
-const compileSourceArtifact = (source, options) => {
+/** Parse and compile a structured SMS or WhatsApp document. */
+const compileSource = (source) => {
 	const parsed = parseSml(source);
 	if (Result.isFailure(parsed)) return Result.fail(parsed.failure);
-	return compileSmlArtifact(parsed.success, options);
+	return compileSml(parsed.success);
 };
 //#endregion
-export { COMPILER_VERSION, compileSml, compileSmlArtifact, compileSource, compileSourceArtifact, serializeHtmlNode };
+export { COMPILER_VERSION, compileSml, compileSource };
 
 //# sourceMappingURL=compile.js.map