@samva/markup 0.16.0 → 0.17.0

package/dist/{profile-BsY4dkan.js → profile-JTvgCD6X.js}

@@ -1,18 +1,115 @@
 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 { D as samvaBrandPlugin, E as reservedBrandAttributes, O as BRAND_FOOTER_MARKER, S as emailElement, T as parseBrandSpecifier, b as EMAIL_ELEMENTS, s as serializeStyle, t as checkAttribute } from "./html-BvRFepeO.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 { FORMATTER_NAMES } from "./fmt.js";
-import { i as drainEmailDiagnostics, t as EmailNode } from "./jsx-runtime-CBlexoeR.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-3XHjYD3i.js";
-import { n as applyStylesheet, r as renderDarkRules, t as DARK_CLASS_PREFIX } from "./cascade-DoLWZ66g.js";
-import { i as lineColumn, t as buildLineMap } from "./diagnostic-model-DJtqbETd.js";
-import { n as resolveFromDirectory, t as projectDirectory } from "./theme-imports-u_P0ygvQ.js";
-import { a as isAssetPath } from "./assets-BSpgZOSR.js";
-import { n as brandComponents } from "./brand-Ci05p37c.js";
-import { t as DIAGNOSTIC_CODES } from "./diagnostic-codes-8XDLR9ef.js";
-import "./ir-KJLFW08u.js";
-import { parse } from "@babel/parser";
+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 { 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). */
+const projectDirectory = (path) => path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : "";
+/** A relative or root-absolute stylesheet reference, resolved from a project directory. */
+const resolveFromDirectory = (directory, reference) => {
+	const segments = reference.startsWith("/") || directory === "" ? [] : directory.split("/");
+	for (const segment of reference.split("/")) {
+		if (segment === "" || segment === ".") continue;
+		if (segment === "..") {
+			if (segments.length === 0) return void 0;
+			segments.pop();
+		} else segments.push(segment);
+	}
+	return segments.length === 0 ? void 0 : segments.join("/");
+};
+const importTarget = (node) => {
+	if (node.type !== "Atrule" || node.prelude === null || node.prelude.type !== "AtrulePrelude") return { extra: true };
+	const parts = [...node.prelude.children].filter((part) => part.type !== "WhiteSpace");
+	const first = parts[0];
+	const target = first?.type === "String" ? first.value : first?.type === "Url" ? first.value : void 0;
+	return target === void 0 ? { extra: true } : {
+		target,
+		extra: parts.length > 1
+	};
+};
+/**
+* Walk the theme's `@import` graph. Project `.css` files resolve from the
+* importing file's directory; the plugin's brand specifier, bare or with a
+* slug, is recorded for the brand the build supplies. Anything else is an
+* error.
+*/
+const resolveThemeImports = (themePath, themeCss, files, brandPlugin) => {
+	const brand = JSON.stringify(brandPlugin.specifier);
+	const stylesheets = /* @__PURE__ */ new Map([[themePath, themeCss]]);
+	const brandSpecifiers = /* @__PURE__ */ new Set();
+	const diagnostics = [];
+	const visit = (path, source, chain) => {
+		const lineMap = buildLineMap(source);
+		const ast = parse(source, {
+			positions: true,
+			parseValue: false,
+			parseRulePrelude: false
+		});
+		if (ast.type !== "StyleSheet") return;
+		for (const node of ast.children) {
+			if (node.type !== "Atrule" || node.name.toLowerCase() !== "import") continue;
+			const position = lineColumn(lineMap, node.loc?.start.offset ?? 0);
+			const origins = [{
+				fileName: path,
+				lineNumber: position.line,
+				columnNumber: position.column
+			}];
+			const refuse = (message) => diagnostics.push({
+				code: "css-import-unresolved",
+				severity: "error",
+				message,
+				origins
+			});
+			const { target, extra } = importTarget(node);
+			if (target === void 0) {
+				refuse(`${path}: @import needs a quoted stylesheet path or ${brand}.`);
+				continue;
+			}
+			if (extra) {
+				refuse(`${path}: @import ${JSON.stringify(target)} takes no layer, supports or media conditions; the import order is the layering.`);
+				continue;
+			}
+			if (parseBrandSpecifier(target, { brandPlugin }) !== void 0) {
+				brandSpecifiers.add(target);
+				continue;
+			}
+			if (!/^\.{0,2}\//.test(target) || !/\.css$/i.test(target.replace(/[?#].*$/, ""))) {
+				refuse(`${path}: @import ${JSON.stringify(target)} is not a project stylesheet or ${brand}. The compiler supplies Tailwind itself; import project .css files by relative path.`);
+				continue;
+			}
+			const resolved = resolveFromDirectory(projectDirectory(path), target.replace(/[?#].*$/, ""));
+			const content = resolved === void 0 ? void 0 : files[resolved];
+			if (resolved === void 0 || typeof content !== "string") {
+				refuse(`${path}: @import ${JSON.stringify(target)} names no stylesheet in the project.`);
+				continue;
+			}
+			if (chain.includes(resolved)) {
+				refuse(`${path}: @import ${JSON.stringify(target)} imports itself through ${chain.join(" → ")}.`);
+				continue;
+			}
+			if (stylesheets.has(resolved)) continue;
+			stylesheets.set(resolved, content);
+			visit(resolved, content, [...chain, resolved]);
+		}
+	};
+	visit(themePath, themeCss, [themePath]);
+	return {
+		stylesheets,
+		brandSpecifiers: [...brandSpecifiers].sort(),
+		diagnostics
+	};
+};
+//#endregion
 //#region src/sml/diagnostics.ts
 /** Collects the findings of one compile. Every finding carries a code, a location and a fix. */
 var Findings = class {
@@ -134,7 +231,7 @@ const parseSource = (path, source) => {
 	const position = (offset) => lineColumn(lines, offset);
 	let program;
 	try {
-		program = parse(source, {
+		program = parse$1(source, {
 			plugins: ["typescript", "jsx"],
 			sourceType: "module"
 		}).program;
@@ -1078,14 +1175,14 @@ const runBuiltinComponent = (call) => {
 		lowerer.error(ctx, node, "button-dynamic-label", "Classic Outlook draws the button from a fixed box, and a label read at render time cannot size it.", "Give the button a width: <Button width={200} …>.");
 		return [];
 	}
-	drainEmailDiagnostics();
 	const output = fn(props);
 	const location = lowerer.findings.locate(ctx.module.parsed, node);
-	for (const diagnostic of drainEmailDiagnostics()) lowerer.findings.items.push({
+	const isNode = isObject(output) && typeof output.type === "string";
+	if (isNode) for (const diagnostic of collectEmailDiagnostics(output)) lowerer.findings.items.push({
 		...diagnostic,
 		origins: [location]
 	});
-	if (output !== null && (!isObject(output) || typeof output.type !== "string")) return [];
+	if (output !== null && !isNode) return [];
 	return wrap([...emailNodeToIr(output, tokens, lowerer.src(ctx.module, node))]);
 };
 //#endregion
@@ -2888,6 +2985,552 @@ const channelBodies = (input) => {
 	};
 };
 //#endregion
+//#region src/email/css-values.ts
+const MAX_RESOLVED_VALUE_LENGTH = 65536;
+const MAX_RESOLUTION_WORK = 262144;
+const resolveVariablesWithin = (value, variables, depth, budget, work) => {
+	if (value.length > work.remaining) return void 0;
+	work.remaining -= value.length;
+	if (value.length > budget) return void 0;
+	if (depth > 8 || !value.includes("var(")) return value;
+	const chunks = [];
+	let length = 0;
+	const append = (chunk) => {
+		length += chunk.length;
+		if (length > budget) return false;
+		chunks.push(chunk);
+		return true;
+	};
+	let cursor = 0;
+	while (cursor < value.length) {
+		const start = value.indexOf("var(", cursor);
+		if (start < 0) {
+			if (!append(value.slice(cursor))) return void 0;
+			break;
+		}
+		if (!append(value.slice(cursor, start))) return void 0;
+		let level = 0;
+		let end = -1;
+		for (let index = start + 3; index < value.length; index++) if (value[index] === "(") level += 1;
+		else if (value[index] === ")") {
+			level -= 1;
+			if (level === 0) {
+				end = index;
+				break;
+			}
+		}
+		if (end < 0) {
+			if (!append(value.slice(start))) return void 0;
+			break;
+		}
+		const body = value.slice(start + 4, end);
+		const comma = body.indexOf(",");
+		const name = (comma < 0 ? body : body.slice(0, comma)).trim();
+		const fallback = comma < 0 ? void 0 : body.slice(comma + 1).trim();
+		const replacement = variables[name] ?? fallback;
+		const resolved = replacement === void 0 ? value.slice(start, end + 1) : resolveVariablesWithin(replacement, variables, depth + 1, budget - length, work);
+		if (resolved === void 0 || !append(resolved)) return void 0;
+		cursor = end + 1;
+	}
+	return chunks.join("");
+};
+/**
+* Expand `var(--x, fallback)` against the collected custom properties.
+* Values whose expansion exceeds the render-time budget are left as authored.
+*/
+const resolveVariables = (value, variables, depth = 0) => resolveVariablesWithin(value, variables, depth, MAX_RESOLVED_VALUE_LENGTH, { remaining: MAX_RESOLUTION_WORK }) ?? value;
+/**
+* Fold a constant `calc()` to a plain value. Tailwind writes every spacing
+* utility as `calc(var(--spacing) * n)`, and classic Outlook does not implement
+* `calc()` at all, so an unfolded value is a silently missing style. An
+* expression that cannot be reduced to one term is left exactly as authored.
+*/
+const foldCalc = (value) => {
+	if (!value.includes("calc(")) return value;
+	let result = "";
+	let rest = value;
+	while (rest.length > 0) {
+		const start = rest.indexOf("calc(");
+		if (start < 0) {
+			result += rest;
+			break;
+		}
+		result += rest.slice(0, start);
+		let level = 0;
+		let end = -1;
+		for (let index = start + 4; index < rest.length; index++) if (rest[index] === "(") level += 1;
+		else if (rest[index] === ")") {
+			level -= 1;
+			if (level === 0) {
+				end = index;
+				break;
+			}
+		}
+		if (end < 0) {
+			result += rest.slice(start);
+			break;
+		}
+		const folded = evaluate(rest.slice(start + 5, end));
+		result += folded === void 0 ? rest.slice(start, end + 1) : format(folded);
+		rest = rest.slice(end + 1);
+	}
+	return result;
+};
+const format = (value) => `${Math.round(value.n * 1e6) / 1e6}${value.n === 0 && value.unit !== "%" ? "" : value.unit}`;
+const evaluate = (expression) => {
+	const tokens = expression.match(/\(|\)|[+-]\s|[*/]|[^\s()*/]+/g);
+	if (tokens === null) return void 0;
+	let position = 0;
+	const peek = () => tokens[position]?.trim();
+	const sum = () => {
+		let left = product();
+		while (left !== void 0 && (peek() === "+" || peek() === "-")) {
+			const operator = peek();
+			position += 1;
+			const right = product();
+			if (right === void 0 || left.unit !== right.unit) return void 0;
+			left = {
+				n: operator === "+" ? left.n + right.n : left.n - right.n,
+				unit: left.unit
+			};
+		}
+		return left;
+	};
+	const product = () => {
+		let left = term();
+		while (left !== void 0 && (peek() === "*" || peek() === "/")) {
+			const operator = peek();
+			position += 1;
+			const right = term();
+			if (right === void 0) return void 0;
+			if (operator === "*") {
+				if (left.unit !== "" && right.unit !== "") return void 0;
+				left = {
+					n: left.n * right.n,
+					unit: left.unit === "" ? right.unit : left.unit
+				};
+			} else {
+				if (right.unit !== "" || right.n === 0) return void 0;
+				left = {
+					n: left.n / right.n,
+					unit: left.unit
+				};
+			}
+		}
+		return left;
+	};
+	const term = () => {
+		const token = tokens[position];
+		if (token === void 0) return void 0;
+		if (token === "(") {
+			position += 1;
+			const inner = sum();
+			if (peek() !== ")") return void 0;
+			position += 1;
+			return inner;
+		}
+		const match = /^(-?(?:\d+\.?\d*|\.\d+))([a-z%]*)$/i.exec(token.trim());
+		if (match === null) return void 0;
+		position += 1;
+		return {
+			n: Number.parseFloat(match[1]),
+			unit: (match[2] ?? "").toLowerCase()
+		};
+	};
+	const value = sum();
+	return position === tokens.length ? value : void 0;
+};
+/** Resolve custom properties, then fold what the arithmetic allows. */
+const finalizeValue = (value, variables) => foldCalc(resolveVariables(value, variables));
+const RANGE_FEATURE = /\(\s*([a-z-]+)\s*(<=|>=|<|>)\s*([^)]+?)\s*\)/gi;
+/** Media Queries Level 4 range syntax down to the `min-`/`max-` prefixes clients support. */
+const downlevelMediaQuery = (condition) => condition.replace(RANGE_FEATURE, (whole, feature, comparison, bound) => {
+	return `(${comparison.startsWith(">") ? "min-" : "max-"}${feature}:${bound})`;
+});
+/** Render the rules that could not be inlined as one `<style>` body. */
+const renderHeadCss = (rules, headAtRules, variables, darkVariables = {}) => {
+	const blocks = [...headAtRules];
+	const darkScope = {
+		...variables,
+		...darkVariables
+	};
+	const grouped = /* @__PURE__ */ new Map();
+	for (const rule of rules) {
+		const conditions = rule.conditions.map(downlevelMediaQuery);
+		const key = conditions.join("\0");
+		const bucket = grouped.get(key);
+		if (bucket === void 0) grouped.set(key, {
+			conditions,
+			rules: [rule]
+		});
+		else bucket.rules.push(rule);
+	}
+	for (const { conditions, rules: bucket } of grouped.values()) {
+		const scope = withinDarkScheme(conditions) ? darkScope : variables;
+		const body = bucket.map((rule) => {
+			const declarations = rule.declarations.filter((declaration) => !declaration.property.startsWith("--")).map((declaration) => `${declaration.property}:${finalizeValue(declaration.value, scope)}!important`).join(";");
+			return declarations === "" ? "" : `${rule.selector}{${declarations}}`;
+		}).filter((block) => block !== "").join("");
+		if (body === "") continue;
+		blocks.push(conditions.reduceRight((inner, condition) => `${condition}{${inner}}`, body));
+	}
+	return blocks.join("");
+};
+//#endregion
+//#region src/email/cascade.ts
+const VARIABLE_REFERENCE = /var\(\s*--[\w-]+\s*(?:,[^()]*)?\)/g;
+/**
+* Compatibility markup a primitive emits (a Button's VML) and a presentational
+* `bgcolor` attribute are not CSS, so no client resolves `var()` in them. Their
+* theme variables resolve here, in the scope of the element they sit in, as a
+* declaration on that element would.
+*/
+const resolveMarkupVariables = (markup, variables) => markup.replace(VARIABLE_REFERENCE, (reference) => {
+	const value = finalizeValue(reference, variables);
+	return value === reference ? reference : escapeAttribute(value);
+});
+/**
+* Cascade rank as the tuple CSS actually sorts by: importance first, then
+* whether the declaration is attached to the element itself, then layer, then
+* specificity, then order of appearance down to the declaration. Normal
+* declarations sort by layer ascending (unlayered last, so it wins); important
+* declarations reverse the layer order, which is why the layer term is negated
+* for them. Element-attached declarations are compared before layers and
+* specificity, so an author's important inline value beats an important
+* stylesheet declaration exactly as it does in a browser. Two declarations never
+* tie: rule order is unique across every registered sheet, and the position
+* inside a rule separates the declarations that share it.
+*/
+const rank = (important, attached, layer, specificity, order, position) => [
+	important ? 1 : 0,
+	attached ? 1 : 0,
+	important ? -layer : layer,
+	specificity[0],
+	specificity[1],
+	specificity[2],
+	order,
+	position
+];
+const compareRank = (left, right) => {
+	for (let index = 0; index < Math.max(left.length, right.length); index++) {
+		const a = left[index] ?? 0;
+		const b = right[index] ?? 0;
+		if (a !== b) return a - b;
+	}
+	return 0;
+};
+const outranks = (left, right) => compareRank(left, right) >= 0;
+/** An authored `style` object becomes declarations with the same normalization the serializer uses. */
+const inlineDeclarations = (style) => {
+	if (!isObject(style) || Array.isArray(style)) return [];
+	const output = [];
+	for (const [property, value] of Object.entries(style)) {
+		if (value === void 0 || value === null) continue;
+		if (typeof value !== "string" && typeof value !== "number") continue;
+		const text = declarationValue(property, value);
+		const important = /!important\s*$/i.test(text);
+		output.push({
+			property: kebab(property),
+			value: important ? text.replace(/\s*!important\s*$/i, "") : text,
+			important
+		});
+	}
+	return output;
+};
+const horizontalWriting = {
+	direction: "ltr",
+	writingMode: "horizontal-tb"
+};
+const paddingValues = (value) => {
+	const values = [];
+	let depth = 0;
+	let start = 0;
+	for (let index = 0; index < value.length; index++) {
+		const character = value[index];
+		if (character === "(") depth++;
+		else if (character === ")") depth--;
+		else if (/\s/.test(character) && depth === 0) {
+			if (index > start) values.push(value.slice(start, index));
+			start = index + 1;
+		}
+	}
+	if (start < value.length) values.push(value.slice(start));
+	return values;
+};
+const physicalPadding = (property, value, context) => {
+	const original = [[property, value]];
+	const match = /^padding-(inline|block)(?:-(start|end))?$/.exec(property);
+	if (match === null || context.writingMode !== "horizontal-tb" || !["ltr", "rtl"].includes(context.direction) || /^(inherit|revert|revert-layer)$/.test(value) || value.includes("var(")) return original;
+	const values = paddingValues(value.trim());
+	if (values.length < 1 || values.length > (match[2] === void 0 ? 2 : 1)) return original;
+	const sides = match[1] === "block" ? ["top", "bottom"] : context.direction === "rtl" ? ["right", "left"] : ["left", "right"];
+	if (match[2] !== void 0) return [[`padding-${sides[match[2] === "start" ? 0 : 1]}`, values[0]]];
+	return [[`padding-${sides[0]}`, values[0]], [`padding-${sides[1]}`, values[1] ?? values[0]]];
+};
+/** 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) => {
+	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)}`;
+};
+const SIDES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+const BORDER_PARTS = [
+	"width",
+	"style",
+	"color"
+];
+const CORNERS = [
+	"top-left",
+	"top-right",
+	"bottom-right",
+	"bottom-left"
+];
+const BORDER_IMAGE = [
+	"source",
+	"slice",
+	"width",
+	"outset",
+	"repeat"
+].map((part) => `border-image-${part}`);
+/**
+* The longhands a border property writes: `border` writes the twelve per-side longhands and
+* resets the border image, `border-top` the top three, `border-color` the four colors,
+* `border-radius` the four corners.
+* `undefined` for a property outside the border box.
+*/
+const borderLonghands = (property) => {
+	if (property === "border") return [...SIDES.flatMap((side) => BORDER_PARTS.map((part) => `border-${side}-${part}`)), ...BORDER_IMAGE];
+	if (property === "border-image") return BORDER_IMAGE;
+	if (property === "border-radius") return CORNERS.map((corner) => `border-${corner}-radius`);
+	const side = /^border-(top|right|bottom|left)$/.exec(property)?.[1];
+	if (side !== void 0) return BORDER_PARTS.map((part) => `border-${side}-${part}`);
+	const part = /^border-(width|style|color)$/.exec(property)?.[1];
+	if (part !== void 0) return SIDES.map((each) => `border-${each}-${part}`);
+	return property.startsWith("border-") ? [property] : void 0;
+};
+/**
+* Whether two declarations can override one another because they write a property in common:
+* `background` and `background-color`, `border-color` and `border-top`, `font` and `line-height`.
+* `border-radius` shares nothing with `border-color`.
+*/
+const overlaps = (left, right) => {
+	if (left === right) return true;
+	const leftBorder = borderLonghands(left);
+	const rightBorder = borderLonghands(right);
+	if (leftBorder !== void 0 || rightBorder !== void 0) return leftBorder !== void 0 && rightBorder !== void 0 && leftBorder.some((longhand) => rightBorder.includes(longhand));
+	const sets = (shorthand, longhand) => longhand.startsWith(`${shorthand}-`) || shorthand === "font" && longhand === "line-height";
+	return sets(left, right) || sets(right, left);
+};
+/** Add a class to an element's props, whichever of `class` and `className` it uses. */
+const withClass = (props, name) => {
+	const key = typeof props.class === "string" || props.className === void 0 ? "class" : "className";
+	const current = props[key];
+	return {
+		...props,
+		[key]: typeof current === "string" && current.trim() !== "" ? `${current} ${name}` : name
+	};
+};
+/** 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("")}}`;
+/**
+* Resolve every stylesheet against the tree: inline what a client will honor on
+* the element, and keep the rest for `<head>`. Where the sheet has a dark-mode
+* theme, an element whose inlined styles read a color it redefines also gets a
+* generated class whose dark-mode rule restates those styles at their dark
+* values.
+*/
+const applyStylesheet = (root, sheet, options = {}) => {
+	const diagnostics = [...sheet.diagnostics];
+	const hasDarkTheme = Object.keys(sheet.darkVariables).length > 0;
+	const darkRules = /* @__PURE__ */ new Map();
+	const darkClassFor = (declarations) => {
+		const body = declarations.map(([property, value]) => `${property}:${value}!important`).join(";");
+		const name = darkClassName(body);
+		darkRules.set(name, body);
+		return name;
+	};
+	const inlinable = [];
+	const retained = [];
+	const styledClasses = /* @__PURE__ */ new Set();
+	for (const rule of sheet.rules) {
+		(rule.inlinable ? inlinable : retained).push(rule);
+		for (const name of rule.classes) styledClasses.add(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()));
+	const fallbackFindings = /* @__PURE__ */ new Map();
+	const checkFallback = (property, value, origins) => {
+		if (declaredFamilies.size === 0) return;
+		const stack = property === "font-family" ? value : property === "font" ? fontShorthandFamilies(value) : void 0;
+		if (stack === void 0 || fallbackFindings.has(stack)) return;
+		if (lacksGenericFallback(stack, declaredFamilies)) fallbackFindings.set(stack, origins);
+	};
+	/**
+	* Children are visited with their own preceding-sibling list so `+`/`~` work.
+	* A fragment is not an element in the serialized document, so its children
+	* join that same list rather than starting a new one.
+	*/
+	const visitChildren = (children, ancestry, variables, darkScope, writing) => {
+		const previous = [];
+		const visit = (nodes) => nodes.map((child) => {
+			if (child.type === "Element") {
+				const result = applyTo(child, {
+					element: child,
+					parent: ancestry,
+					previous: [...previous]
+				}, variables, darkScope, writing);
+				previous.push(child);
+				return result;
+			}
+			if (child.type === "Fragment") return EmailNode.Fragment({
+				...child,
+				children: visit(child.children)
+			});
+			if (child.type === "Raw" && child.html.includes("var(")) return EmailNode.Raw({
+				...child,
+				html: resolveMarkupVariables(child.html, variables)
+			});
+			return child;
+		});
+		return visit(children);
+	};
+	/**
+	* `inherited` is the custom-property scope this element sees from its
+	* ancestors, rooted in the sheet's unconditional properties. Custom properties
+	* cascade like any other declaration and then inherit, so a `--brand` declared
+	* on `.card` has to reach `var(--brand)` on `.card` and everything under it.
+	*/
+	const applyTo = (element, ancestry, inherited, inheritedDark, inheritedWriting) => {
+		const conditionalWriting = conditionalWritingRules.some((rule) => {
+			if (rule.matcher === void 0 || rule.matcher.parts.length === 0 || rule.matcher.parts.some((part) => part.compound.opaque)) return true;
+			for (let context = ancestry; context !== void 0; context = context.parent) if (matchesSelector(rule.matcher, context)) return true;
+			return false;
+		});
+		const winners = /* @__PURE__ */ new Map();
+		const claim = (declaration, key) => {
+			const current = winners.get(declaration.property);
+			if (current === void 0 || outranks(key, current.key)) winners.set(declaration.property, {
+				value: declaration.value,
+				key
+			});
+		};
+		for (const rule of inlinable) {
+			if (!matchesSelector(rule.matcher, ancestry)) continue;
+			for (const [position, declaration] of rule.declarations.entries()) claim(declaration, rank(declaration.important, false, rule.layer, rule.specificity, rule.order, position));
+		}
+		for (const [position, declaration] of inlineDeclarations(element.props.style).entries()) claim(declaration, rank(declaration.important, true, 0, [
+			0,
+			0,
+			0
+		], 0, position));
+		for (const name of classListOf(element)) if (!styledClasses.has(name) && options.knownClasses?.has(name) !== true) unmatched.set(name, [...unmatched.get(name) ?? [], ...element.origins]);
+		const declared = {};
+		for (const [property, entry] of winners) if (property.startsWith("--")) declared[property] = entry.value;
+		const variables = Object.keys(declared).length === 0 ? inherited : {
+			...inherited,
+			...declared
+		};
+		const darkScope = Object.keys(declared).length === 0 ? inheritedDark : {
+			...inheritedDark,
+			...declared
+		};
+		const inheritedValue = (property, parent, initial, fallback = parent) => {
+			const value = winners.get(property)?.value;
+			if (value === void 0) return fallback;
+			const resolved = finalizeValue(value, variables);
+			return resolved === "inherit" || resolved === "unset" ? parent : resolved === "initial" ? initial : resolved;
+		};
+		const writing = {
+			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)]);
+		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)) {
+			physical.delete(name);
+			physical.set(name, lowered);
+		}
+		const bgcolor = element.props.bgcolor;
+		const lightProps = typeof bgcolor === "string" && bgcolor.includes("var(") ? {
+			...element.props,
+			bgcolor: finalizeValue(bgcolor, variables)
+		} : element.props;
+		const dark = [];
+		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)) 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);
+		return EmailNode.Element({
+			...element,
+			props: emitted.length === 0 ? props : {
+				...props,
+				style: Object.fromEntries(physical)
+			},
+			children: visitChildren(element.children, ancestry, variables, darkScope, writing)
+		});
+	};
+	const rootDark = {
+		...sheet.variables,
+		...sheet.darkVariables
+	};
+	const tree = root.type === "Element" ? applyTo(root, {
+		element: root,
+		parent: void 0,
+		previous: []
+	}, sheet.variables, rootDark, horizontalWriting) : root.type === "Fragment" ? EmailNode.Fragment({
+		...root,
+		children: visitChildren(root.children, void 0, sheet.variables, rootDark, horizontalWriting)
+	}) : root;
+	for (const rule of retained) for (const declaration of rule.declarations) checkFallback(declaration.property, finalizeValue(declaration.value, sheet.variables), []);
+	for (const [value, origins] of fallbackFindings) diagnostics.push({
+		...fontFallbackDiagnostic(value),
+		origins
+	});
+	for (const [name, origins] of unmatched) diagnostics.push({
+		code: "unmatched-class",
+		severity: "warning",
+		message: `Class ${JSON.stringify(name)} produced no styles. If it is composed at run time, the compiler cannot discover it; list it in the template's declared classes or write the style inline.`,
+		origins: origins.slice(0, 1)
+	});
+	return {
+		tree,
+		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables, sheet.darkVariables),
+		darkRules,
+		fontFaceCss: sheet.fontFaces.map((face) => face.css).join(""),
+		diagnostics
+	};
+};
+//#endregion
 //#region src/sml/styles.ts
 const MAX_CLASS_VARIANTS = 8;
 const product = (left, right) => {
@@ -3298,18 +3941,45 @@ const editFirst = (nodes, matches, edit) => {
 };
 const HEAD_COMMENT_OPEN = { raw: ["<!--[if !mso]><!-->"] };
 const HEAD_COMMENT_CLOSE = { raw: ["<!--<![endif]-->"] };
-const completed = (findings, ir, fixtures = {}, assets = []) => ({
-	ir: findings.blocking ? void 0 : ir,
+/** Literal absolute http(s) image sources outside the project's asset base. */
+const externalImages = (root, assetBase) => {
+	const found = [];
+	const base = assetBase === void 0 ? void 0 : assetBase.replace(/\/+$/, "") + "/";
+	const visit = (node) => {
+		if (typeof node !== "object" || node === null) return;
+		if ("el" in node) {
+			const url = node.el === "img" ? node.attrs?.src : void 0;
+			if (typeof url === "string" && /^https?:\/\//i.test(url)) {
+				const host = /^https?:\/\/([^/?#]+)/i.exec(url)?.[1] ?? url;
+				if (base === void 0 || !url.toLowerCase().startsWith(base.toLowerCase())) found.push({
+					url,
+					host,
+					src: node.src
+				});
+			}
+		}
+		const nested = "el" in node || "each" in node ? node.children : void 0;
+		for (const item of nested ?? []) visit(item);
+		if ("if" in node && "then" in node && Array.isArray(node.then)) {
+			for (const item of node.then) visit(item);
+			if (Array.isArray(node.else)) for (const item of node.else) visit(item);
+		}
+	};
+	visit(root);
+	return found;
+};
+const completed = (findings, template, fixtures = {}, assets = []) => ({
+	template: findings.blocking ? void 0 : template,
 	fixtures,
 	assets,
 	diagnostics: findings.items
 });
 /**
-* Lower a loaded project to IR: the part of the compile that reads structure and needs no Tailwind
-* or brand. `checkStaticProfile` runs it with empty stylesheets.
+* Lower a loaded project to a compiled template: the part of the compile that reads structure and
+* needs no Tailwind or brand. `checkTemplate` runs it with empty stylesheets.
 */
 const lowerProject = (options, project, findings, inputs) => {
-	const done = (ir, fixtures = {}, assets = inputs.assets) => completed(findings, ir, fixtures, assets);
+	const done = (template, fixtures = {}, assets = inputs.assets) => completed(findings, template, fixtures, assets);
 	const urlFor = inputs.urlFor;
 	const staticContext = {
 		project,
@@ -3419,7 +4089,7 @@ const lowerProject = (options, project, findings, inputs) => {
 		"locale",
 		...CHANNELS
 	].includes(name)) findings.add(module.parsed, at(name), "unknown-field", `\`${name}\` is not a defineTemplate field.`, "The fields are id, schema, fixtures, locale, email, sms and whatsapp.");
-	let ir;
+	let template;
 	const checks = [];
 	const emailField = fields.get("email");
 	let emailIr;
@@ -3514,6 +4184,16 @@ const lowerProject = (options, project, findings, inputs) => {
 				else root = edited.nodes[0] ?? root;
 			}
 			checkStructure([root], (finding) => checks.push(finding));
+			for (const external of externalImages(root, options.assetBase)) {
+				const where = locate(external.src);
+				findings.report({
+					code: "email-external-asset",
+					severity: "warning",
+					message: `The image ${JSON.stringify(external.url)} is hosted on ${external.host}, outside the project. A hotlinked image can disappear, be blocked by the client, track recipients or slow the message.`,
+					fix: "Add the image to the project's files and import it (import logo from './logo.png'), then use the import as the src.",
+					origins: where === void 0 ? [] : [where]
+				});
+			}
 			if (schemaJson !== void 0) checks.push(...checkBindings(schemaJson, [root], [subject, ...preheader === void 0 ? [] : [preheader]]));
 			emailIr = {
 				subject,
@@ -3551,7 +4231,7 @@ const lowerProject = (options, project, findings, inputs) => {
 			}]
 		});
 	}
-	if (schemaJson !== void 0 && templateId !== "" && (emailIr !== void 0 || channelIr.sms !== void 0 || channelIr.whatsapp !== void 0)) ir = {
+	if (schemaJson !== void 0 && templateId !== "" && (emailIr !== void 0 || channelIr.sms !== void 0 || channelIr.whatsapp !== void 0)) template = {
 		sml: 1,
 		template: templateId,
 		...locale === void 0 ? {} : { locale },
@@ -3562,7 +4242,7 @@ const lowerProject = (options, project, findings, inputs) => {
 		schema: schemaJson
 	};
 	else if (emailField === void 0 && !fields.has("sms") && !fields.has("whatsapp")) findings.add(module.parsed, definition.call, "no-channel", "The template declares no channel.", "Add `email`, `sms` or `whatsapp`.");
-	return done(ir, fixtures);
+	return done(template, fixtures);
 };
 //#endregion
 //#region src/sml/project.ts
@@ -3667,7 +4347,7 @@ const loadProject = (files, entryPath, findings, loadOptions) => {
 					}
 					break;
 				}
-				if (parseBrandSpecifier(specifier, loadOptions.brandPlugin) !== void 0) {
+				if (parseBrandSpecifier(specifier, { brandPlugin: loadOptions.brandPlugin }) !== void 0) {
 					for (const item of specifiers) if (text(item, "importKind") !== "type") imports.set(local(item), {
 						kind: "brand",
 						specifier,
@@ -3792,6 +4472,8 @@ 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;
@@ -3800,7 +4482,9 @@ const asFiles = (files, entry) => typeof files === "string" ? { [entry]: 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 checkStaticProfile = (files, entry = DEFAULT_ENTRY, brandPlugin = samvaBrandPlugin) => {
+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,
@@ -3810,12 +4494,13 @@ const checkStaticProfile = (files, entry = DEFAULT_ENTRY, brandPlugin = samvaBra
 	lowerProject({
 		entry,
 		brand: void 0,
-		brandPlugin
+		brandPlugin,
+		assetBase: ASSET_BASE
 	}, project, findings, {
 		assets: [],
 		stylesheets: /* @__PURE__ */ new Map(),
 		tailwindSheet: void 0,
-		urlFor: (path) => `https://assets.invalid/${path}`
+		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}\``)));
@@ -3825,7 +4510,7 @@ 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 introducedProfileErrors = (before, after) => {
+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 = [];
@@ -3838,4 +4523,4 @@ const introducedProfileErrors = (before, after) => {
 	return added;
 };
 //#endregion
-export { lowerProject as a, WHATSAPP_HEADER_TYPES as c, completed as i, Findings as l, introducedProfileErrors as n, SMS_CATEGORIES as o, loadProject as r, WHATSAPP_CATEGORIES as s, checkStaticProfile as t };
+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 };