@samva/markup 0.18.0 → 0.19.0

package/dist/{profile-JTvgCD6X.js → project-B6D64SZS.js}

@@ -1,16 +1,15 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { n as inputSchema, r as jsonSchema } from "./input-schema-zjkgrXn2.js";
 import { n as TEMPLATE_NAME_PATTERN, t as TEMPLATE_ID_PATTERN } from "./template-zLUjcwfF.js";
-import { a as kebab, g as BRAND_FOOTER_MARKER, n as declarationValue, r as escapeAttribute, s as serializeStyle, t as checkAttribute } from "./html-DJUK2YJF.js";
-import { a as EMAIL_ELEMENTS, d as reservedBrandAttributes, f as samvaBrandPlugin, s as emailElement, u as parseBrandSpecifier } from "./render-template-DwPDm3Hq.js";
+import { $ as reservedBrandAttributes, B as brandComponents, F as propFor, G as emailPresentationOverrides, I as rawParts, K as isValueNode, L as PRIMITIVE_CLASSES, M as lowerEmailNodes, N as Tokens, P as emailNodeToIr, Q as parseBrandSpecifier, R as PRIMITIVE_CSS, Y as emailElement, _ as kebab, a as Email, d as equalColumnWidth, et as samvaBrandPlugin, h as escapeAttribute, i as Divider, l as Section, m as declarationValue, n as Column, o as Image, p as checkAttribute, q as EMAIL_ELEMENTS, r as Columns, s as Link, t as Button, u as Spacer, y as serializeStyle } from "./components-DNBCz20_.js";
 import { FORMATTER_NAMES } from "./fmt.js";
 import { r as collectEmailDiagnostics, t as EmailNode } from "./jsx-runtime-qL19u3Fy.js";
-import { a as Email, d as equalColumnWidth, i as Divider, l as Section, n as Column, o as Image, p as PRIMITIVE_CLASSES, r as Columns, s as Link, t as Button, u as Spacer } from "./components-C5850-Qg.js";
-import { l as isAssetPath, n as brandComponents } from "./brand-CIiEqkU7.js";
-import { i as buildLineMap, s as lineColumn, t as DIAGNOSTIC_CODES } from "./diagnostic-codes-DZKb0Xcg.js";
-import { i as withinDarkScheme, t as DARK_SCHEME_MEDIA } from "./dark-scheme-CbCwGDWH.js";
-import { a as lacksGenericFallback, i as fontShorthandFamilies, n as matchesSelector, r as fontFallbackDiagnostic, t as classListOf } from "./selectors-CYWCoxZr.js";
-import { parse } from "css-tree";
+import { a as isAssetPath } from "./assets-BSpgZOSR.js";
+import { i as lineColumn, t as buildLineMap } from "./diagnostic-model-DJtqbETd.js";
+import { i as withinDarkScheme, t as DARK_SCHEME_MEDIA } from "./dark-scheme-BGDCCaUq.js";
+import { a as fontShorthandFamilies, i as fontFallbackDiagnostic, n as matchesSelector, o as lacksGenericFallback, r as parseStylesheet, t as classListOf } from "./selectors-CKGuc9MO.js";
+import { t as DIAGNOSTIC_CODES } from "./diagnostic-codes-BCwfUgnF.js";
+import { generate, parse } from "css-tree";
 import { parse as parse$1 } from "@babel/parser";
 //#region src/email/theme-imports.ts
 /** The directory part of a project path, with no trailing slash (`""` at the root). */
@@ -145,6 +144,69 @@ var Findings = class {
 	}
 };
 //#endregion
+//#region src/sml/issue-content.ts
+/** Copy parser nodes into the layout's source table and resolve its host-owned brand. */
+const issueNodes = (nodes, sourceIndex, brand) => nodes.map((node) => {
+	if (isValueNode(node) || !("type" in node)) return node;
+	const kids = node.children === void 0 ? {} : { children: issueNodes(node.children, sourceIndex, brand) };
+	const src = node.src === void 0 ? {} : { src: [
+		node.src[0],
+		node.src[1],
+		sourceIndex
+	] };
+	if (node.type === "component" && (node.name === "BrandLogo" || node.name === "BrandFooter") && brand !== void 0) {
+		const { css: _css, ...resolved } = brand;
+		return {
+			...node,
+			...kids,
+			...src,
+			brand: resolved
+		};
+	}
+	return {
+		...node,
+		...kids,
+		...src
+	};
+});
+/** Literal classes on parsed issue nodes join Tailwind's candidate set before the cascade. */
+const issueClasses = (nodes) => nodes.flatMap((node) => {
+	if (isValueNode(node) || !("type" in node)) return [];
+	const value = node.type === "component" ? node.props?.className : node.attrs?.className ?? node.attrs?.class;
+	return [...typeof value === "string" ? value.split(/\s+/).filter(Boolean) : [], ...issueClasses(node.children ?? [])];
+});
+/** Internal marker: authored intrinsic tags cannot use this compiler-owned name. */
+const ISSUE_SLOT_TAG = "sml-issue-content";
+/** Resolve the final expanded layout, where partials have already used or discarded children. */
+const replaceIssueSlots = (nodes, content, report) => {
+	let count = 0;
+	const walk = (items, conditional) => items.flatMap((node) => {
+		if (isValueNode(node)) return [node];
+		if ("type" in node && node.type !== "component" && node.tag === "sml-issue-content") {
+			count++;
+			if (conditional) report(node.src);
+			return [...content];
+		}
+		if ("if" in node) return [{
+			...node,
+			then: walk(node.then, true),
+			...node.else === void 0 ? {} : { else: walk(node.else, true) }
+		}];
+		if ("each" in node) return [{
+			...node,
+			children: walk(node.children, true)
+		}];
+		return [{
+			...node,
+			..."children" in node && node.children !== void 0 ? { children: walk(node.children, conditional) } : {}
+		}];
+	});
+	return {
+		nodes: walk(nodes, false),
+		count
+	};
+};
+//#endregion
 //#region src/email/stylesheets.ts
 /** Sheets flattened into one, with rule order preserved across sheets. */
 const mergeStylesheets = (sheets) => {
@@ -178,6 +240,112 @@ const mergeStylesheets = (sheets) => {
 	};
 };
 //#endregion
+//#region src/ir/web-presentation.ts
+/** Parse compiler-owned font and keyframe rules once; send time only serializes checked data. */
+const cssNodes = (node, tokens) => {
+	if (node.type === "StyleSheet") return [...node.children].flatMap((child) => cssNodes(child, tokens));
+	if (node.type !== "Rule" && node.type !== "Atrule") return [];
+	const style = [];
+	const children = [];
+	for (const child of node.block?.children ?? []) if (child.type === "Declaration") style.push([child.property, tokens?.toValue(`${generate(child.value)}${child.important ? "!important" : ""}`) ?? `${generate(child.value)}${child.important ? "!important" : ""}`]);
+	else children.push(...cssNodes(child, tokens));
+	return [{
+		...node.type === "Rule" ? { selector: generate(node.prelude) } : { at: `${node.name}${node.prelude === null ? "" : ` ${generate(node.prelude)}`}` },
+		...style.length === 0 ? {} : { style },
+		...children.length === 0 ? {} : { children }
+	}];
+};
+/** Retain project selectors, conditions and fonts independently of the email cascade. */
+const webPresentation = (sheets, tailwind, body) => {
+	const rules = [];
+	const layers = [...new Set(sheets.flatMap((sheet) => sheet.rules.map((rule) => rule.layer)).filter((layer) => layer !== Number.MAX_SAFE_INTEGER))].sort((a, b) => a - b);
+	rules.push({ at: `layer sml-web-components${layers.map((layer) => `,sml-web-${layer}`).join("")}` });
+	const signature = (rule) => JSON.stringify([
+		rule.selector,
+		rule.declarations,
+		rule.conditions
+	]);
+	const defaults = new Set(parseStylesheet(PRIMITIVE_CSS).rules.map(signature));
+	const fonts = /* @__PURE__ */ new Set();
+	for (const sheet of sheets) {
+		if (Object.keys(sheet.variables).length > 0) rules.push({
+			selector: ":root",
+			style: Object.entries(sheet.variables)
+		});
+		if (Object.keys(sheet.darkVariables).length > 0) rules.push({
+			at: "media (prefers-color-scheme:dark)",
+			children: [{
+				selector: ":root",
+				style: Object.entries(sheet.darkVariables)
+			}]
+		});
+		for (const rule of sheet.rules) {
+			if (sheet === tailwind && defaults.has(signature(rule))) continue;
+			let out = {
+				selector: rule.selector,
+				style: rule.declarations.filter(({ property }) => !/^mso-/i.test(property)).map(({ property, value, important }) => [property, `${value}${important ? "!important" : ""}`])
+			};
+			for (const condition of rule.conditions.toReversed()) out = {
+				at: condition.replace(/^@/, ""),
+				children: [out]
+			};
+			if (rule.layer !== Number.MAX_SAFE_INTEGER) out = {
+				at: `layer sml-web-${rule.layer}`,
+				children: [out]
+			};
+			rules.push(out);
+		}
+		for (const face of sheet.fontFaces) if (!fonts.has(face.css)) {
+			fonts.add(face.css);
+			rules.push(...cssNodes(parse(face.css)));
+		}
+		for (const css of sheet.headAtRules) rules.push(...cssNodes(parse(css)));
+	}
+	const componentLayer = tailwind?.rules.find((rule) => rule.selector === ".sml-email")?.layer;
+	let inlineSpecificity = sheets.reduce((max, sheet) => sheet.rules.reduce((highest, rule) => Math.max(highest, rule.specificity[0]), max), 0) + 1;
+	const stylesheets = [];
+	const authored = (node) => {
+		if (isValueNode(node)) return;
+		if ("type" in node && node.type !== "component" && node.tag === "style" || "el" in node && node.el === "style") {
+			const tokens = new Tokens();
+			const cssValue = (part) => {
+				if (typeof part === "string") return part;
+				if (part === null || typeof part === "boolean") return "";
+				if (typeof part === "number") return String(part);
+				if ("concat" in part) return part.concat.map(cssValue).join("");
+				return tokens.value(part);
+			};
+			const css = (node.children ?? []).map((part) => isValueNode(part) ? cssValue(part) : "unsupported").join("");
+			let parsed;
+			try {
+				parsed = cssNodes(parse(css), tokens);
+			} catch {
+				parsed = [];
+			}
+			stylesheets.push(parsed.length === 0 && css.trim() !== "" ? [{ at: "unsupported-dynamic-stylesheet" }] : parsed);
+			const selectorIds = (list) => {
+				for (const rule of list) {
+					inlineSpecificity = Math.max(inlineSpecificity, (rule.selector?.match(/#/g)?.length ?? 0) + 1);
+					selectorIds(rule.children ?? []);
+				}
+			};
+			selectorIds(parsed);
+			return;
+		}
+		if ("if" in node) {
+			for (const part of node.then) authored(part);
+			for (const part of node.else ?? []) authored(part);
+		} else if ("children" in node) for (const part of node.children ?? []) authored(part);
+	};
+	authored(body);
+	return {
+		rules,
+		...componentLayer === void 0 ? {} : { componentLayer },
+		inlineSpecificity,
+		...stylesheets.length === 0 ? {} : { stylesheets }
+	};
+};
+//#endregion
 //#region src/sml/ast.ts
 const isNode = (value) => isObject(value) && typeof value.type === "string" && typeof value.start === "number" && typeof value.end === "number";
 /** The child node under `key`, or `undefined`. */
@@ -260,14 +428,6 @@ const bindingValue = (binding) => {
 		default: return;
 	}
 };
-const isStaticScalar = (value) => value === null || typeof value === "string" || typeof value === "number" || typeof value === "boolean";
-/** True when a node in child position is a value (rendered as text) rather than structure. */
-const isValueNode = (node) => {
-	if (typeof node !== "object" || node === null) return true;
-	if ("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/channel-specs.ts
 const SMS_CATEGORIES = [
@@ -847,136 +1007,6 @@ const checkStructure = (roots, report) => {
 	visit(roots);
 };
 //#endregion
-//#region src/sml/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/sml/components.ts
 const NUMERIC = {
 	Email: ["gutter"],
@@ -1154,7 +1184,7 @@ const runBuiltinComponent = (call) => {
 		kids = [chunked.cells];
 		wrap = chunked.wrap;
 	} else kids = lowerer.jsxChildren(childCtx, node);
-	if (exported === "Columns" && declared.has("gap") && kids.some((kid) => !isValueNode(kid) && !("el" in kid))) {
+	if (exported === "Columns" && declared.has("gap") && kids.some((kid) => !isValueNode(kid) && !("el" in kid) && !("type" in kid))) {
 		lowerer.error(ctx, node, "invalid-columns-gap", "<Columns gap> spaces Column children that always render; a conditional or repeated Column would leave a stray gap.", "Pad the cells instead (className=\"pr-6\"), or write each Column unconditionally.");
 		return [];
 	}
@@ -1183,7 +1213,40 @@ const runBuiltinComponent = (call) => {
 		origins: [location]
 	});
 	if (output !== null && !isNode) return [];
-	return wrap([...emailNodeToIr(output, tokens, lowerer.src(ctx.module, node))]);
+	if (ctx.semantic !== true) return wrap([...emailNodeToIr(output, tokens, lowerer.src(ctx.module, node))]);
+	const semanticProp = (bound) => {
+		if (bound.k === "object") {
+			const object = {};
+			for (const [name, field] of bound.fields) {
+				const value = semanticProp(field);
+				if (value !== void 0) object[name] = value;
+			}
+			return { object };
+		}
+		return bindingValue(bound);
+	};
+	const authored = {};
+	for (const [name, bound] of declared) {
+		const value = semanticProp(bound);
+		if (value !== void 0) authored[name] = value;
+	}
+	const brand = isBrand && call.brand !== void 0 ? {
+		slug: call.brand.slug,
+		...call.brand.assets === void 0 ? {} : { assets: call.brand.assets },
+		...call.brand.footer === void 0 ? {} : { footer: call.brand.footer }
+	} : void 0;
+	return wrap([{
+		type: "component",
+		name: exported,
+		...Object.keys(authored).length === 0 ? {} : { props: authored },
+		...kids.length === 0 ? {} : { children: kids },
+		...brand === void 0 ? {} : { brand },
+		...exported === "Column" ? { emailColumn: {
+			...ctx.columnWidth === void 0 ? {} : { width: ctx.columnWidth },
+			stack: ctx.columnStack === true
+		} } : {},
+		src: lowerer.src(ctx.module, node)
+	}]);
 };
 //#endregion
 //#region src/sml/values.ts
@@ -2202,7 +2265,15 @@ var Lowerer = class {
 		}
 		const kids = spec.content === "void" ? [] : this.jsxChildren(ctx, node);
 		return [{
-			el: tag,
+			...ctx.semantic === true ? {
+				type: [
+					"inline",
+					"link",
+					"image",
+					"break"
+				].includes(spec.layout) ? "inline" : "block",
+				tag
+			} : { el: tag },
 			...Object.keys(attrs).length === 0 ? {} : { attrs },
 			...style === void 0 ? {} : { style },
 			...kids.length === 0 ? {} : { children: kids },
@@ -2317,6 +2388,23 @@ var Lowerer = class {
 		const imported = ctx.module.imports.get(head);
 		const local = ctx.module.declarations.get(head);
 		const attributes = children(opening, "attributes");
+		if (imported?.kind === "markup" && imported.specifier === "@samva/markup/email" && imported.imported === "IssueContent") {
+			const issue = this.options.issueContent;
+			if (issue === void 0 || ctx.semantic !== true || attributes.length > 0 || children(node, "children").some((item) => item.type !== "JSXText" || (text(item, "value") ?? "").trim() !== "")) {
+				this.error(ctx, node, "issue-slot", "IssueContent needs parsed issue content and takes no props or children; its layout position must be unconditional.", "Place one <IssueContent /> outside loops and conditions in the email layout.");
+				return [];
+			}
+			const needsBrand = (nodes) => nodes.some((item) => typeof item === "object" && item !== null && "type" in item && (item.type === "component" && (item.name === "BrandLogo" || item.name === "BrandFooter") || needsBrand(item.children ?? [])));
+			if (this.options.brand === void 0 && needsBrand(issue.nodes)) {
+				this.error(ctx, node, "brand-unavailable", "This issue uses brand components but no brand was resolved.", "Supply the host-resolved brand when compiling the issue.");
+				return [];
+			}
+			return [{
+				type: "block",
+				tag: ISSUE_SLOT_TAG,
+				src: this.src(ctx.module, node)
+			}];
+		}
 		if (imported?.kind === "markup" || imported?.kind === "brand") return runBuiltinComponent({
 			lowerer: this,
 			ctx,
@@ -2464,7 +2552,8 @@ var Lowerer = class {
 			env: /* @__PURE__ */ new Map(),
 			stack: [...ctx.stack, id],
 			loops: ctx.loops,
-			depth: ctx.depth + 1
+			depth: ctx.depth + 1,
+			semantic: ctx.semantic
 		};
 		const env = /* @__PURE__ */ new Map();
 		const param = children(fn, "params")[0];
@@ -3269,15 +3358,25 @@ const physicalPadding = (property, value, context) => {
 };
 /** Generated dark-mode classes share this prefix; it is reserved for the compiler. */
 const DARK_CLASS_PREFIX = "sml-dark-";
-/** A class named for its declarations, so equal sets share one rule and builds are stable. */
-const darkClassName = (body) => {
+/**
+* Generated lock classes share this prefix; it is reserved for the compiler.
+* An important color the dark-mode class restates is inlined without
+* `!important`, so a weaker retained rule (also marked `!important`) would
+* otherwise take it. The lock class carries that color on a more specific copy
+* of the retained selector.
+*/
+const LOCK_CLASS_PREFIX = "sml-lock-";
+/** FNV-1a, 32-bit, so equal declaration sets share one class and builds are stable. */
+const classSuffix = (body) => {
 	let hash = 2166136261;
 	for (let index = 0; index < body.length; index++) {
 		hash ^= body.charCodeAt(index);
 		hash = Math.imul(hash, 16777619) >>> 0;
 	}
-	return `${DARK_CLASS_PREFIX}${hash.toString(36)}`;
+	return hash.toString(36);
 };
+/** A class named for its declarations, so equal sets share one rule and builds are stable. */
+const darkClassName = (body) => `${DARK_CLASS_PREFIX}${classSuffix(body)}`;
 const SIDES = [
 	"top",
 	"right",
@@ -3340,6 +3439,154 @@ const withClass = (props, name) => {
 		[key]: typeof current === "string" && current.trim() !== "" ? `${current} ${name}` : name
 	};
 };
+/** Index where the subject compound starts, after the last combinator. */
+const subjectSplit = (selector) => {
+	let depth = 0;
+	let split = 0;
+	for (let index = 0; index < selector.length; index++) {
+		const character = selector[index];
+		if (character === "\\") {
+			index += 1;
+			continue;
+		}
+		if (character === "(" || character === "[") depth++;
+		else if (character === ")" || character === "]") depth = Math.max(0, depth - 1);
+		else if (depth === 0 && (character === ">" || character === "+" || character === "~")) split = index + 1;
+		else if (depth === 0 && character === " ") split = index + 1;
+	}
+	return selector.slice(split).trim() === "" ? void 0 : split;
+};
+/** Single-colon names that still select a pseudo-element, not a pseudo-class. */
+const LEGACY_PSEUDO_ELEMENTS = /* @__PURE__ */ new Set([
+	"before",
+	"after",
+	"first-line",
+	"first-letter"
+]);
+/**
+* A pseudo-element is a different box. An important color on the element does
+* not override a color the pseudo-element sets for itself, so a lock guard must
+* not be copied onto `::before`.
+*/
+const targetsPseudoElement = (selector) => {
+	const split = subjectSplit(selector);
+	if (split === void 0) return false;
+	const subject = selector.slice(split);
+	let depth = 0;
+	for (let index = 0; index < subject.length; index++) {
+		const character = subject[index];
+		if (character === "\\") {
+			index += 1;
+			continue;
+		}
+		if (character === "(" || character === "[") depth++;
+		else if (character === ")" || character === "]") depth = Math.max(0, depth - 1);
+		else if (depth !== 0 || character !== ":") continue;
+		if (subject[index + 1] === ":") return true;
+		const name = /^:([A-Za-z-]+)/.exec(subject.slice(index))?.[1]?.toLowerCase();
+		if (name !== void 0 && LEGACY_PSEUDO_ELEMENTS.has(name)) return true;
+	}
+	return false;
+};
+/** Insert `className` into the subject compound, before its first pseudo. */
+const strengthenSelector = (selector, className) => {
+	const split = subjectSplit(selector);
+	if (split === void 0) return void 0;
+	const subject = selector.slice(split);
+	const token = `.${className}`;
+	let depth = 0;
+	let pseudo = -1;
+	for (let index = 0; index < subject.length; index++) {
+		const character = subject[index];
+		if (character === "\\") {
+			index += 1;
+			continue;
+		}
+		if (character === "(" || character === "[") depth++;
+		else if (character === ")" || character === "]") depth = Math.max(0, depth - 1);
+		else if (depth === 0 && character === ":") {
+			pseudo = index;
+			break;
+		}
+	}
+	const strengthened = pseudo < 0 ? `${subject}${token}` : `${subject.slice(0, pseudo)}${token}${subject.slice(pseudo)}`;
+	return `${selector.slice(0, split)}${strengthened}`;
+};
+const retainedKey = (rule, declaration, position) => rank(declaration.important, false, rule.layer, rule.specificity, rule.order, position);
+/** Whether `item` wins the real cascade over this rule's overlapping declaration. */
+const threatens = (item, rule) => rule.declarations.some((declaration, position) => overlaps(declaration.property, item.property) && compareRank(item.key, retainedKey(rule, declaration, position)) > 0);
+const nestConditions = (conditions, body) => conditions.reduceRight((inner, condition) => `${condition}{${inner}}`, body);
+/**
+* Restate important colors that were inlined without `!important` on a copy of
+* each weaker retained selector. The copy carries one more class, so it beats
+* the retained rule, and the dark-scheme copy of it keeps the theme switch.
+* A rule that outranks the themed color is copied again afterwards, on that
+* same class, so the guard does not bury it. A shorthand in that copy also
+* restates every locked declaration that still outranks it, in cascade order,
+* so the shorthand does not reset a stronger inline longhand. When either
+* value changes in dark mode, the copy is repeated inside the dark-mode query
+* at the dark values. Pseudo-elements are left alone: their color is not the
+* element's.
+*/
+const renderLockGuards = (locks, rules, variables, darkVariables) => {
+	const seen = /* @__PURE__ */ new Set();
+	const blocks = [];
+	const guarded = /* @__PURE__ */ new Set();
+	const darkQuery = DARK_SCHEME_MEDIA.replace(": ", ":");
+	const emit = (wrapping, selector, body) => {
+		const block = nestConditions(wrapping, `${selector}{${body}}`);
+		if (seen.has(block)) return;
+		seen.add(block);
+		blocks.push(block);
+	};
+	for (const rule of rules) {
+		if (targetsPseudoElement(rule.selector)) continue;
+		const conditions = rule.conditions.map(downlevelMediaQuery);
+		for (const [className, declarations] of locks) {
+			const beaten = declarations.filter((item) => threatens(item, rule));
+			if (beaten.length === 0) continue;
+			const selector = strengthenSelector(rule.selector, className);
+			if (selector === void 0) continue;
+			const inDark = withinDarkScheme(conditions);
+			const lightBody = beaten.map((item) => `${item.property}:${item.light}!important`).join(";");
+			const darkBody = beaten.map((item) => `${item.property}:${item.dark}!important`).join(";");
+			if (!inDark) emit(conditions, selector, lightBody);
+			emit(inDark ? conditions : [...conditions, darkQuery], selector, darkBody);
+			guarded.add(className);
+		}
+	}
+	for (const [className, declarations] of locks) {
+		if (!guarded.has(className)) continue;
+		for (const rule of rules) {
+			if (targetsPseudoElement(rule.selector)) continue;
+			const selector = strengthenSelector(rule.selector, className);
+			if (selector === void 0) continue;
+			const conditions = rule.conditions.map(downlevelMediaQuery);
+			const inDark = withinDarkScheme(conditions);
+			const replay = (mode) => {
+				const scope = mode === "dark" ? {
+					...variables,
+					...darkVariables
+				} : variables;
+				const parts = [];
+				for (const [position, declaration] of rule.declarations.entries()) {
+					const key = retainedKey(rule, declaration, position);
+					if (!declarations.some((item) => overlaps(declaration.property, item.property) && compareRank(key, item.key) > 0)) continue;
+					parts.push(`${declaration.property}:${finalizeValue(declaration.value, scope)}!important`);
+					for (const item of declarations) if (overlaps(declaration.property, item.property) && compareRank(item.key, key) > 0) parts.push(`${item.property}:${mode === "dark" ? item.dark : item.light}!important`);
+				}
+				return parts.join(";");
+			};
+			const lightBody = replay(inDark ? "dark" : "light");
+			if (lightBody === "") continue;
+			emit(conditions, selector, lightBody);
+			if (inDark) continue;
+			const darkBody = replay("dark");
+			if (darkBody !== lightBody) emit([...conditions, darkQuery], selector, darkBody);
+		}
+	}
+	return blocks.join("");
+};
 /** The generated dark-mode classes as one `@media (prefers-color-scheme:dark)` block, written as the head CSS writes its media queries. */
 const renderDarkRules = (rules) => rules.size === 0 ? "" : `${DARK_SCHEME_MEDIA.replace(": ", ":")}{${[...rules].sort(([left], [right]) => left.localeCompare(right)).map(([name, body]) => `.${name}{${body}}`).join("")}}`;
 /**
@@ -3366,6 +3613,14 @@ const applyStylesheet = (root, sheet, options = {}) => {
 		(rule.inlinable ? inlinable : retained).push(rule);
 		for (const name of rule.classes) styledClasses.add(name);
 	}
+	const locks = /* @__PURE__ */ new Map();
+	const lockClassFor = (declarations) => {
+		if (!declarations.some((item) => retained.some((rule) => !targetsPseudoElement(rule.selector) && threatens(item, rule)))) return void 0;
+		const body = declarations.map((item) => `${item.property}:${item.light}=${item.dark}@${item.key.join(".")}`).join(";");
+		const name = `${LOCK_CLASS_PREFIX}${classSuffix(body)}`;
+		locks.set(name, declarations);
+		return name;
+	};
 	const conditionalWritingRules = retained.filter((rule) => rule.declarations.some((declaration) => declaration.property === "direction" || declaration.property === "writing-mode" || declaration.property === "all"));
 	const unmatched = /* @__PURE__ */ new Map();
 	const declaredFamilies = new Set(sheet.fontFaces.map((face) => face.family.toLowerCase()));
@@ -3455,12 +3710,32 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			direction: inheritedValue("direction", inheritedWriting.direction, "ltr", typeof element.props.dir === "string" ? element.props.dir : element.tag === "bdi" ? "auto" : inheritedWriting.direction),
 			writingMode: winners.has("all") ? "unknown" : inheritedValue("writing-mode", inheritedWriting.writingMode, "horizontal-tb")
 		};
-		const emitted = [...winners].filter(([property]) => !property.startsWith("--")).sort(([, left], [, right]) => compareRank(left.key, right.key)).map(([property, entry]) => [property, finalizeValue(entry.value, variables)]);
+		const restated = /* @__PURE__ */ new Set();
+		if (hasDarkTheme) {
+			for (const [property, entry] of winners) {
+				if (property.startsWith("--") || !entry.value.includes("var(")) continue;
+				if (finalizeValue(entry.value, darkScope) !== finalizeValue(entry.value, variables)) restated.add(property);
+			}
+			for (let grew = restated.size > 0; grew;) {
+				grew = false;
+				for (const property of winners.keys()) if (!property.startsWith("--") && !restated.has(property) && [...restated].some((candidate) => overlaps(candidate, property))) {
+					restated.add(property);
+					grew = true;
+				}
+			}
+		}
+		const emitted = [...winners].filter(([property]) => !property.startsWith("--")).sort(([, left], [, right]) => compareRank(left.key, right.key)).map(([property, entry]) => {
+			return [
+				property,
+				finalizeValue(entry.value, variables),
+				entry.key[0] === 1 && !restated.has(property)
+			];
+		});
 		for (const [property, value] of emitted) checkFallback(property, value, element.origins.slice(0, 1));
 		const physical = /* @__PURE__ */ new Map();
-		for (const [property, value] of emitted) for (const [name, lowered] of conditionalWriting ? [[property, value]] : physicalPadding(property, value, writing)) {
+		for (const [property, value, important] of emitted) for (const [name, lowered] of conditionalWriting ? [[property, value]] : physicalPadding(property, value, writing)) {
 			physical.delete(name);
-			physical.set(name, lowered);
+			physical.set(name, important ? `${lowered}!important` : lowered);
 		}
 		const bgcolor = element.props.bgcolor;
 		const lightProps = typeof bgcolor === "string" && bgcolor.includes("var(") ? {
@@ -3468,28 +3743,28 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			bgcolor: finalizeValue(bgcolor, variables)
 		} : element.props;
 		const dark = [];
+		const locked = [];
 		if (hasDarkTheme) {
-			const changed = [];
-			for (const [property, entry] of winners) {
-				if (property.startsWith("--") || !entry.value.includes("var(")) continue;
-				if (finalizeValue(entry.value, darkScope) !== finalizeValue(entry.value, variables)) changed.push(property);
-			}
-			const restated = new Set(changed);
-			for (let grew = changed.length > 0; grew;) {
-				grew = false;
-				for (const property of winners.keys()) if (!property.startsWith("--") && !restated.has(property) && [...restated].some((candidate) => overlaps(candidate, property))) {
-					restated.add(property);
-					grew = true;
-				}
+			for (const [property, entry] of [...winners].sort(([, left], [, right]) => compareRank(left.key, right.key))) {
+				if (!restated.has(property)) continue;
+				const darkValue = finalizeValue(entry.value, darkScope);
+				dark.push([property, darkValue]);
+				if (entry.key[0] === 1) locked.push({
+					property,
+					light: finalizeValue(entry.value, variables),
+					dark: darkValue,
+					key: entry.key
+				});
 			}
-			for (const [property, entry] of [...winners].sort(([, left], [, right]) => compareRank(left.key, right.key))) if (restated.has(property)) dark.push([property, finalizeValue(entry.value, darkScope)]);
 			if (typeof bgcolor === "string" && bgcolor.includes("var(") && !winners.has("background-color") && !winners.has("background")) {
 				const value = finalizeValue(bgcolor, darkScope);
 				if (value !== finalizeValue(bgcolor, variables)) dark.push(["background-color", value]);
 			}
 		}
 		const darkClass = dark.length === 0 ? void 0 : darkClassFor(dark);
-		const props = darkClass === void 0 ? lightProps : withClass(lightProps, darkClass);
+		const lockClass = lockClassFor(locked);
+		const themed = darkClass === void 0 ? lightProps : withClass(lightProps, darkClass);
+		const props = lockClass === void 0 ? themed : withClass(themed, lockClass);
 		return EmailNode.Element({
 			...element,
 			props: emitted.length === 0 ? props : {
@@ -3524,7 +3799,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	});
 	return {
 		tree,
-		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables, sheet.darkVariables),
+		headCss: `${renderHeadCss(retained, sheet.headAtRules, sheet.variables, sheet.darkVariables)}${renderLockGuards(locks, retained, sheet.variables, sheet.darkVariables)}`,
 		darkRules,
 		fontFaceCss: sheet.fontFaces.map((face) => face.css).join(""),
 		diagnostics
@@ -4042,13 +4317,17 @@ const lowerProject = (options, project, findings, inputs) => {
 	const localeRead = fields.has("locale") ? readStatic(staticContext, module, fields.get("locale")) : void 0;
 	const locale = localeRead?.ok === true && typeof localeRead.value === "string" ? localeRead.value : void 0;
 	if (fields.has("locale") && locale === void 0) findings.add(module.parsed, at("locale"), "invalid-locale", "The locale is a string literal.", "Write locale: \"en-US\".");
-	const lowerer = new Lowerer({
+	const staticPart = {
 		project,
 		findings,
+		issueContent: options.issueContent,
 		staticContext,
 		assetUrl: urlFor,
 		brand: options.brand,
-		brandPlugin: options.brandPlugin ?? samvaBrandPlugin,
+		brandPlugin: options.brandPlugin ?? samvaBrandPlugin
+	};
+	const lowerer = new Lowerer({
+		...staticPart,
 		channel: channelLowering
 	});
 	const rootContext = (target) => ({
@@ -4117,17 +4396,47 @@ const lowerProject = (options, project, findings, inputs) => {
 		if (!parts.has("subject") && object.type === "ObjectExpression") findings.add(module.parsed, emailField, "missing-subject", "The email channel needs a subject.", "Add `subject: (input) => …`.");
 		const preheader = value("preheader");
 		let body;
+		let expanded;
 		const bodyNode = parts.get("body");
 		if (bodyNode === void 0 && object.type === "ObjectExpression") findings.add(module.parsed, emailField, "missing-body", "The email channel needs a body.", "Add `body: (input) => (<Email>…</Email>)`.");
 		else if (bodyNode !== void 0) {
 			const opened = openFunction(bodyNode);
 			if (opened !== void 0) {
-				const nodes = lowerer.content(opened.ctx, opened.body);
-				if (nodes.length === 1) body = nodes[0];
-				else if (!findings.blocking) findings.add(opened.ctx.module.parsed, opened.body, "multiple-roots", nodes.length === 0 ? "The email body renders nothing." : "The email body renders more than one root.", "Wrap the body in a single element such as <Email>.");
+				let nodes = lowerer.content({
+					...opened.ctx,
+					semantic: true
+				}, opened.body);
+				if (options.issueContent !== void 0) {
+					let index = lowerer.sources.indexOf(options.issueContent.file);
+					if (index < 0) {
+						index = lowerer.sources.length;
+						lowerer.sources.push(options.issueContent.file);
+					}
+					const content = issueNodes(options.issueContent.nodes, index + 1, options.brand);
+					const resolved = replaceIssueSlots(nodes, content, (source) => {
+						const file = source?.[2] === void 0 ? options.entry : lowerer.sources[source[2] - 1] ?? options.entry;
+						findings.report({
+							code: "issue-slot",
+							severity: "error",
+							message: "IssueContent must render unconditionally, outside loops and conditions.",
+							origins: [{
+								fileName: file,
+								lineNumber: source?.[0] ?? 1,
+								columnNumber: source?.[1] ?? 1
+							}]
+						});
+					});
+					nodes = resolved.nodes;
+					if (resolved.count !== 1) findings.add(opened.ctx.module.parsed, opened.body, "issue-slot", "An issue layout must render exactly one IssueContent slot after expanding partials.", "Render one <IssueContent /> outside loops and conditions; do not discard or duplicate its children.");
+				}
+				const roots = lowerEmailNodes(nodes, staticPart.brandPlugin);
+				if (nodes.length === 1 && roots.length === 1) {
+					body = nodes[0];
+					expanded = roots[0];
+				} else if (!findings.blocking) findings.add(opened.ctx.module.parsed, opened.body, "multiple-roots", roots.length === 0 ? "The email body renders nothing." : "The email body renders more than one root.", "Wrap the body in a single element such as <Email>.");
 			}
 		}
-		if (subject !== void 0 && body !== void 0) {
+		if (subject !== void 0 && body !== void 0 && expanded !== void 0) {
 			const sheets = [];
 			if (inputs.tailwindSheet !== void 0) sheets.push(inputs.tailwindSheet);
 			for (const path of stylesheetOrder(project)) {
@@ -4143,7 +4452,7 @@ const lowerProject = (options, project, findings, inputs) => {
 					columnNumber: source[1]
 				};
 			};
-			const styled = applyStyles(body, mergeStylesheets(sheets), {
+			const styled = applyStyles(expanded, mergeStylesheets(sheets), {
 				locate,
 				report: (diagnostic) => {
 					findings.items.push(diagnostic);
@@ -4198,7 +4507,14 @@ const lowerProject = (options, project, findings, inputs) => {
 			emailIr = {
 				subject,
 				...preheader === void 0 ? {} : { preheader },
-				body: root
+				body,
+				web: webPresentation(sheets, inputs.tailwindSheet, body),
+				presentation: {
+					nodes: emailPresentationOverrides(expanded, styled.root),
+					headCss: styled.headCss,
+					fontFaceCss: styled.fontFaceCss,
+					brandPlugin: staticPart.brandPlugin
+				}
 			};
 		}
 	}
@@ -4232,7 +4548,7 @@ const lowerProject = (options, project, findings, inputs) => {
 		});
 	}
 	if (schemaJson !== void 0 && templateId !== "" && (emailIr !== void 0 || channelIr.sms !== void 0 || channelIr.whatsapp !== void 0)) template = {
-		sml: 1,
+		sml: 2,
 		template: templateId,
 		...locale === void 0 ? {} : { locale },
 		sources,
@@ -4470,57 +4786,4 @@ const loadProject = (files, entryPath, findings, loadOptions) => {
 	};
 };
 //#endregion
-//#region src/sml/profile.ts
-const DEFAULT_ENTRY = "template.tsx";
-/** A stand-in base: a structural check has no build, and an imported asset must read as a project asset. */
-const ASSET_BASE = "https://assets.invalid";
-/** Findings that come from the inputs this check leaves out, not from the source. */
-const MISSING_INPUT_CODES = /* @__PURE__ */ new Set(["brand-unavailable", "unmatched-class"]);
-const asFiles = (files, entry) => typeof files === "string" ? { [entry]: files } : files;
-/**
-* Check an entry against the static profile. Pass the entry's source alone, or the project's files
-* and the entry's path. Imports of files that are absent are trusted to exist, and the brand,
-* Tailwind and theme are not resolved, so the result holds only findings the source itself owns.
-*/
-const checkTemplate = (files, options = {}) => {
-	const entry = options.entry ?? DEFAULT_ENTRY;
-	const brandPlugin = options.brandPlugin ?? samvaBrandPlugin;
-	const findings = new Findings();
-	const project = loadProject(asFiles(files, entry), entry, findings, {
-		brandPlugin,
-		lenient: true
-	});
-	if (project === void 0) return findings.items;
-	lowerProject({
-		entry,
-		brand: void 0,
-		brandPlugin,
-		assetBase: ASSET_BASE
-	}, project, findings, {
-		assets: [],
-		stylesheets: /* @__PURE__ */ new Map(),
-		tailwindSheet: void 0,
-		urlFor: (path) => `${ASSET_BASE}/${path}`
-	});
-	const unresolved = [...project.unresolved];
-	return findings.items.filter((item) => !MISSING_INPUT_CODES.has(item.code) && !item.code.startsWith("tailwind-") && !unresolved.some((name) => item.message.includes(`<${name}`) || item.message.includes(`\`${name}\``)));
-};
-const key = (item) => `${item.code}\0${item.message}`;
-/**
-* The errors in `after` that `before` did not already have, compared by code and message so a
-* finding that only moved does not count as new.
-*/
-const introducedErrors = (before, after) => {
-	const known = /* @__PURE__ */ new Map();
-	for (const item of before) if (item.severity === "error") known.set(key(item), (known.get(key(item)) ?? 0) + 1);
-	const added = [];
-	for (const item of after) {
-		if (item.severity !== "error") continue;
-		const remaining = known.get(key(item)) ?? 0;
-		if (remaining > 0) known.set(key(item), remaining - 1);
-		else added.push(item);
-	}
-	return added;
-};
-//#endregion
-export { lowerProject as a, SMS_CATEGORIES as c, Findings as d, projectDirectory as f, completed as i, WHATSAPP_CATEGORIES as l, resolveThemeImports as m, introducedErrors as n, applyStylesheet as o, resolveFromDirectory as p, loadProject as r, renderDarkRules as s, checkTemplate as t, WHATSAPP_HEADER_TYPES as u };
+export { renderDarkRules as a, WHATSAPP_HEADER_TYPES as c, projectDirectory as d, resolveFromDirectory as f, applyStylesheet as i, issueClasses as l, completed as n, SMS_CATEGORIES as o, resolveThemeImports as p, lowerProject as r, WHATSAPP_CATEGORIES as s, loadProject as t, Findings as u };