@samva/markup 0.13.0 → 0.14.0

package/dist/{ir-C-ubz6N3.js → ir-D-gTGquU.js}

@@ -1,6 +1,7 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { a as kebab, n as declarationValue, r as escapeAttribute } from "./html-eOZfDwVf.js";
 import { t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
+import { i as withinDarkScheme, t as DARK_SCHEME_MEDIA } from "./dark-scheme-CbCwGDWH.js";
 //#region src/email/font-stacks.ts
 /** Generic families every email client understands as the last resort in a stack. */
 const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
@@ -90,6 +91,73 @@ const fontFallbackDiagnostic = (value) => ({
 	message: `font-family ${JSON.stringify(value)} uses a project font without a generic fallback. Clients that drop webfonts (Gmail, classic Outlook) render this stack as written, so end it with sans-serif, serif or monospace.`
 });
 //#endregion
+//#region src/email/selectors.ts
+const classListOf = (element) => {
+	const value = element.props.class ?? element.props.className;
+	return typeof value === "string" ? value.split(/\s+/).filter((name) => name !== "") : [];
+};
+const attributeOf = (element, name) => {
+	const value = element.props[name];
+	if (value === void 0 || value === null || value === false) return void 0;
+	if (value === true) return "";
+	return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
+};
+const matchesAttribute = (element, test) => {
+	const actual = test.name === "class" ? classListOf(element).join(" ") : attributeOf(element, test.name);
+	if (actual === void 0) return false;
+	if (test.operator === void 0 || test.value === void 0) return true;
+	switch (test.operator) {
+		case "=": return actual === test.value;
+		case "~=": return actual.split(/\s+/).includes(test.value);
+		case "^=": return actual.startsWith(test.value);
+		case "$=": return actual.endsWith(test.value);
+		case "*=": return actual.includes(test.value);
+		case "|=": return actual === test.value || actual.startsWith(`${test.value}-`);
+		default: return false;
+	}
+};
+const matchesCompound = (element, compound) => {
+	if (compound.opaque) return false;
+	if (compound.tag !== void 0 && compound.tag !== element.tag) return false;
+	if (compound.id !== void 0 && attributeOf(element, "id") !== compound.id) return false;
+	if (compound.classes.length > 0) {
+		const classes = classListOf(element);
+		if (!compound.classes.every((name) => classes.includes(name))) return false;
+	}
+	return compound.attributes.every((test) => matchesAttribute(element, test));
+};
+const matchesFrom = (selector, index, ancestry) => {
+	if (ancestry === void 0) return false;
+	const part = selector.parts[index];
+	if (part === void 0) return false;
+	if (!matchesCompound(ancestry.element, part.compound)) return false;
+	const left = selector.parts[index - 1];
+	if (left === void 0) return true;
+	switch (left.after ?? "descendant") {
+		case "child": return matchesFrom(selector, index - 1, ancestry.parent);
+		case "descendant":
+			for (let parent = ancestry.parent; parent !== void 0; parent = parent.parent) if (matchesFrom(selector, index - 1, parent)) return true;
+			return false;
+		case "adjacent": {
+			const sibling = ancestry.previous.at(-1);
+			return sibling === void 0 ? false : matchesFrom(selector, index - 1, {
+				element: sibling,
+				parent: ancestry.parent,
+				previous: ancestry.previous.slice(0, -1)
+			});
+		}
+		case "sibling":
+			for (let position = ancestry.previous.length - 1; position >= 0; position--) if (matchesFrom(selector, index - 1, {
+				element: ancestry.previous[position],
+				parent: ancestry.parent,
+				previous: ancestry.previous.slice(0, position)
+			})) return true;
+			return false;
+	}
+};
+/** Match a compiled selector against one element in its tree position. */
+const matchesSelector = (selector, ancestry) => selector === void 0 || selector.parts.length === 0 ? false : matchesFrom(selector, selector.parts.length - 1, ancestry);
+//#endregion
 //#region src/email/css-values.ts
 const MAX_RESOLVED_VALUE_LENGTH = 65536;
 const MAX_RESOLUTION_WORK = 262144;
@@ -253,8 +321,12 @@ const downlevelMediaQuery = (condition) => condition.replace(RANGE_FEATURE, (who
 	return `(${comparison.startsWith(">") ? "min-" : "max-"}${feature}:${bound})`;
 });
 /** Render the rules that could not be inlined as one `<style>` body. */
-const renderHeadCss = (rules, headAtRules, variables) => {
+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);
@@ -267,8 +339,9 @@ const renderHeadCss = (rules, headAtRules, variables) => {
 		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, variables)}!important`).join(";");
+			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;
@@ -277,73 +350,6 @@ const renderHeadCss = (rules, headAtRules, variables) => {
 	return blocks.join("");
 };
 //#endregion
-//#region src/email/selectors.ts
-const classListOf = (element) => {
-	const value = element.props.class ?? element.props.className;
-	return typeof value === "string" ? value.split(/\s+/).filter((name) => name !== "") : [];
-};
-const attributeOf = (element, name) => {
-	const value = element.props[name];
-	if (value === void 0 || value === null || value === false) return void 0;
-	if (value === true) return "";
-	return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
-};
-const matchesAttribute = (element, test) => {
-	const actual = test.name === "class" ? classListOf(element).join(" ") : attributeOf(element, test.name);
-	if (actual === void 0) return false;
-	if (test.operator === void 0 || test.value === void 0) return true;
-	switch (test.operator) {
-		case "=": return actual === test.value;
-		case "~=": return actual.split(/\s+/).includes(test.value);
-		case "^=": return actual.startsWith(test.value);
-		case "$=": return actual.endsWith(test.value);
-		case "*=": return actual.includes(test.value);
-		case "|=": return actual === test.value || actual.startsWith(`${test.value}-`);
-		default: return false;
-	}
-};
-const matchesCompound = (element, compound) => {
-	if (compound.opaque) return false;
-	if (compound.tag !== void 0 && compound.tag !== element.tag) return false;
-	if (compound.id !== void 0 && attributeOf(element, "id") !== compound.id) return false;
-	if (compound.classes.length > 0) {
-		const classes = classListOf(element);
-		if (!compound.classes.every((name) => classes.includes(name))) return false;
-	}
-	return compound.attributes.every((test) => matchesAttribute(element, test));
-};
-const matchesFrom = (selector, index, ancestry) => {
-	if (ancestry === void 0) return false;
-	const part = selector.parts[index];
-	if (part === void 0) return false;
-	if (!matchesCompound(ancestry.element, part.compound)) return false;
-	const left = selector.parts[index - 1];
-	if (left === void 0) return true;
-	switch (left.after ?? "descendant") {
-		case "child": return matchesFrom(selector, index - 1, ancestry.parent);
-		case "descendant":
-			for (let parent = ancestry.parent; parent !== void 0; parent = parent.parent) if (matchesFrom(selector, index - 1, parent)) return true;
-			return false;
-		case "adjacent": {
-			const sibling = ancestry.previous.at(-1);
-			return sibling === void 0 ? false : matchesFrom(selector, index - 1, {
-				element: sibling,
-				parent: ancestry.parent,
-				previous: ancestry.previous.slice(0, -1)
-			});
-		}
-		case "sibling":
-			for (let position = ancestry.previous.length - 1; position >= 0; position--) if (matchesFrom(selector, index - 1, {
-				element: ancestry.previous[position],
-				parent: ancestry.parent,
-				previous: ancestry.previous.slice(0, position)
-			})) return true;
-			return false;
-	}
-};
-/** Match a compiled selector against one element in its tree position. */
-const matchesSelector = (selector, ancestry) => selector === void 0 || selector.parts.length === 0 ? false : matchesFrom(selector, selector.parts.length - 1, ancestry);
-//#endregion
 //#region src/email/cascade.ts
 const VARIABLE_REFERENCE = /var\(\s*--[\w-]+\s*(?:,[^()]*)?\)/g;
 /**
@@ -434,12 +440,98 @@ const physicalPadding = (property, value, context) => {
 	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>`.
+* 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();
@@ -462,7 +554,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	* 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, writing) => {
+	const visitChildren = (children, ancestry, variables, darkScope, writing) => {
 		const previous = [];
 		const visit = (nodes) => nodes.map((child) => {
 			if (child.type === "Element") {
@@ -470,7 +562,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 					element: child,
 					parent: ancestry,
 					previous: [...previous]
-				}, variables, writing);
+				}, variables, darkScope, writing);
 				previous.push(child);
 				return result;
 			}
@@ -489,7 +581,7 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	* 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, inheritedWriting) => {
+	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;
@@ -519,6 +611,10 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			...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;
@@ -537,24 +633,51 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			physical.set(name, lowered);
 		}
 		const bgcolor = element.props.bgcolor;
-		const props = typeof bgcolor === "string" && bgcolor.includes("var(") ? {
+		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, writing)
+			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, horizontalWriting) : root.type === "Fragment" ? EmailNode.Fragment({ children: visitChildren(root.children, void 0, sheet.variables, horizontalWriting) }) : root;
+	}, sheet.variables, rootDark, horizontalWriting) : root.type === "Fragment" ? EmailNode.Fragment({ 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),
@@ -568,7 +691,8 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	});
 	return {
 		tree,
-		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables),
+		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables, sheet.darkVariables),
+		darkRules,
 		fontFaceCss: sheet.fontFaces.map((face) => face.css).join(""),
 		diagnostics
 	};
@@ -578,4 +702,4 @@ const applyStylesheet = (root, sheet, options = {}) => {
 /** The IR version this package writes. A publication pins the version it was built with. */
 const SML_IR_VERSION = 1;
 //#endregion
-export { downlevelMediaQuery as a, renderHeadCss as c, matchesSelector as i, resolveVariables as l, applyStylesheet as n, finalizeValue as o, classListOf as r, foldCalc as s, SML_IR_VERSION as t, unquote as u };
+export { downlevelMediaQuery as a, renderHeadCss as c, matchesSelector as d, unquote as f, renderDarkRules as i, resolveVariables as l, DARK_CLASS_PREFIX as n, finalizeValue as o, applyStylesheet as r, foldCalc as s, SML_IR_VERSION as t, classListOf as u };

package/dist/{profile-CXnkfEMi.js → profile-Cc8VxOKA.js}

@@ -4,10 +4,10 @@ import { n as TEMPLATE_NAME_PATTERN, t as TEMPLATE_ID_PATTERN } from "./template
 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-eOZfDwVf.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, r as Columns, s as Link, t as Button, u as Spacer } from "./components-DycSEKva.js";
-import { n as applyStylesheet } from "./ir-C-ubz6N3.js";
-import { i as buildLineMap, s as lineColumn, t as DIAGNOSTIC_CODES } from "./diagnostic-codes-DdZ4tka5.js";
-import { l as isAssetPath, n as brandComponents } from "./brand-C45QBKX9.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-CwWSoG5N.js";
+import { i as renderDarkRules, n as DARK_CLASS_PREFIX, r as applyStylesheet } from "./ir-D-gTGquU.js";
+import { i as buildLineMap, s as lineColumn, t as DIAGNOSTIC_CODES } from "./diagnostic-codes-UXwOO3A-.js";
+import { l as isAssetPath, n as brandComponents } from "./brand-B-t62NJB.js";
 import { parse } from "css-tree";
 import { parse as parse$1 } from "@babel/parser";
 //#region src/email/theme-imports.ts
@@ -156,11 +156,13 @@ const mergeStylesheets = (sheets) => {
 		}));
 	});
 	const variables = {};
+	const darkVariables = {};
 	const headAtRules = [];
 	const fontFaces = /* @__PURE__ */ new Map();
 	const diagnostics = sheets.flatMap((sheet) => sheet.diagnostics);
 	for (const sheet of sheets) {
 		Object.assign(variables, sheet.variables);
+		Object.assign(darkVariables, sheet.darkVariables);
 		headAtRules.push(...sheet.headAtRules);
 		for (const face of sheet.fontFaces) fontFaces.set(face.css, face);
 	}
@@ -169,6 +171,7 @@ const mergeStylesheets = (sheets) => {
 		headAtRules,
 		fontFaces: [...fontFaces.values()],
 		variables,
+		darkVariables,
 		diagnostics
 	};
 };
@@ -974,6 +977,7 @@ const emailNodeToIr = (node, tokens, source) => {
 //#endregion
 //#region src/sml/components.ts
 const NUMERIC = {
+	Email: ["gutter"],
 	Button: [
 		"height",
 		"paddingX",
@@ -983,6 +987,7 @@ const NUMERIC = {
 		"width"
 	],
 	Spacer: ["height"],
+	Columns: ["gap"],
 	Divider: ["thickness"],
 	BrandLogo: ["width"]
 };
@@ -1043,7 +1048,7 @@ const equalWidth = (per, list) => {
 * items (all in one row without `per`), each cell from the callback. Returns the nodes to place
 * inside the Columns table, and a wrapper that repeats that table per chunk.
 */
-const columnsEach = (call, bindings) => {
+const columnsEach = (call, bindings, stack) => {
 	const { lowerer, ctx, node } = call;
 	const listValue = bindings.get("each");
 	const list = listValue === void 0 ? void 0 : bindingValue(listValue);
@@ -1070,7 +1075,8 @@ const columnsEach = (call, bindings) => {
 	const cellCtx = {
 		...ctx,
 		loops: row === void 0 ? ctx.loops : [...ctx.loops, row],
-		columnWidth: equalWidth(per, list)
+		columnWidth: equalWidth(per, list),
+		columnStack: stack
 	};
 	const cells = lowerer.eachOver(cellCtx, node, row === void 0 ? list : { bind: `$${row}` }, fn);
 	if (cells === void 0) return void 0;
@@ -1124,17 +1130,32 @@ const runBuiltinComponent = (call) => {
 	let bindings = declared;
 	let wrap = (table) => table;
 	let kids;
+	const stackBinding = declared.get("stack");
+	const stack = stackBinding === void 0 ? true : bindingValue(stackBinding);
+	if (exported === "Columns" && typeof stack !== "boolean") {
+		lowerer.error(ctx, node, "invalid-columns-stack", "<Columns stack> decides the layout at compile time, so it must be true or false.", "Write stack={false}, or leave it out to stack on narrow screens.");
+		return [];
+	}
 	const childCtx = {
 		...ctx,
-		columnWidth: void 0
+		columnWidth: void 0,
+		columnStack: exported === "Columns" ? stack === true : void 0
 	};
+	if (exported === "Columns" && declared.has("each") && declared.has("gap")) {
+		lowerer.error(ctx, node, "invalid-columns-gap", "<Columns gap> spaces Column children written out in the row; cells repeated with each cannot take it.", "Write the Columns out, or pad each repeated cell (className=\"px-2\").");
+		return [];
+	}
 	if (exported === "Columns" && declared.has("each")) {
-		const chunked = columnsEach(call, declared);
+		const chunked = columnsEach(call, declared, stack === true);
 		if (chunked === void 0) return [];
-		bindings = new Map([...declared].filter(([name]) => name !== "each" && name !== "per"));
+		bindings = new Map([...declared].filter(([name]) => name !== "each" && name !== "per" && name !== "stack"));
 		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))) {
+		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 [];
+	}
 	const tokens = new Tokens();
 	const props = {};
 	for (const [name, bound] of bindings) props[name] = bindingToProp(call, tokens, name, bound);
@@ -1146,6 +1167,7 @@ const runBuiltinComponent = (call) => {
 		}
 	}
 	if (exported === "Column" && props.width === void 0 && ctx.columnWidth !== void 0) props.width = propFor(tokens, ctx.columnWidth);
+	if (exported === "Column" && ctx.columnStack === true) props.className = typeof props.className === "string" && props.className !== "" ? `${PRIMITIVE_CLASSES.stack} ${props.className}` : PRIMITIVE_CLASSES.stack;
 	if (kids.length > 0) props.children = childrenProp(tokens, kids);
 	if (exported === "Button" && typeof props.children === "string" && props.children !== "" && props.width === void 0 && props.height !== void 0 && tokens.toValue(props.children) !== props.children) {
 		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} …>.");
@@ -2951,6 +2973,35 @@ const mapTree = (tree, leafStyle, counter = { next: 0 }) => {
 		else: otherwise
 	};
 };
+/** A class tree as the IR value it was read from: a literal, or a choice between literals. */
+const treeValue = (tree) => "leaf" in tree ? tree.leaf : {
+	if: tree.pred,
+	then: treeValue(tree.then),
+	else: treeValue(tree.else)
+};
+const appendClass = (classes, name) => name === void 0 ? classes : classes.trim() === "" ? name : `${classes} ${name}`;
+/**
+* An element's class with the dark-mode class each pass gave it. A choice between literal class
+* lists resolved one list per pass, so each list gains its own pass's class; any other class
+* value gains the first pass's. `undefined` when no pass gave the element one.
+*/
+const withDarkClass = (value, tree, perPass) => {
+	if (perPass.every((name) => name === void 0)) return void 0;
+	if (tree !== void 0 && leavesOf(tree).length > 1) {
+		let leaf = 0;
+		const extend = (node) => "leaf" in node ? { leaf: appendClass(node.leaf, perPass[Math.min(leaf++, perPass.length - 1)]) } : {
+			pred: node.pred,
+			then: extend(node.then),
+			else: extend(node.else)
+		};
+		return treeValue(extend(tree));
+	}
+	const name = perPass[0];
+	if (name === void 0) return value;
+	if (value === void 0) return name;
+	if (typeof value === "string") return appendClass(value, name);
+	return { concat: [value, ` ${name}`] };
+};
 const collect = (nodes, into) => {
 	for (const node of nodes) {
 		if (isValueNode(node)) continue;
@@ -3057,6 +3108,8 @@ const applyStyles = (root, sheet, options) => {
 		for (const node of nodes) if (node.type === "Fragment") read(node.children, into);
 		else if (node.type === "Raw") into.raws.push(node.html);
 		else if (node.type === "Element") {
+			const classes = typeof node.props.class === "string" ? node.props.class.split(" ") : [];
+			into.darkClasses.push(classes.find((name) => name.startsWith(DARK_CLASS_PREFIX)));
 			into.styles.push(node.props.style === void 0 ? void 0 : node.props.style);
 			into.bgcolors.push(typeof node.props.bgcolor === "string" ? node.props.bgcolor : void 0);
 			read(node.children, into);
@@ -3065,6 +3118,7 @@ const applyStyles = (root, sheet, options) => {
 	const results = [];
 	let headCss = "";
 	let fontFaceCss = "";
+	const darkRules = /* @__PURE__ */ new Map();
 	const seen = /* @__PURE__ */ new Set();
 	for (let pass = 0; pass < passes; pass++) {
 		const tree = shadow([root], pass, { next: 0 });
@@ -3073,6 +3127,7 @@ const applyStyles = (root, sheet, options) => {
 			headCss = applied.headCss;
 			fontFaceCss = applied.fontFaceCss;
 		}
+		for (const [name, body] of applied.darkRules) darkRules.set(name, body);
 		for (const diagnostic of applied.diagnostics) {
 			const key = `${diagnostic.code}\0${diagnostic.message}`;
 			if (seen.has(key)) continue;
@@ -3082,6 +3137,7 @@ const applyStyles = (root, sheet, options) => {
 		const result = {
 			styles: [],
 			bgcolors: [],
+			darkClasses: [],
 			raws: []
 		};
 		read([applied.tree], result);
@@ -3114,10 +3170,15 @@ const applyStyles = (root, sheet, options) => {
 			const baseStyle = first?.styles[ordinal];
 			const style = tree !== void 0 && leavesOf(tree).length > 1 ? mapTree(tree, (leaf) => styleOf(results[Math.min(leaf, results.length - 1)]?.styles[ordinal], node)) : styleOf(baseStyle, node);
 			const bgcolor = first?.bgcolors[ordinal];
-			const attrs = typeof node.attrs?.bgcolor === "string" && bgcolor !== void 0 && bgcolor !== node.attrs.bgcolor ? {
+			const painted = typeof node.attrs?.bgcolor === "string" && bgcolor !== void 0 && bgcolor !== node.attrs.bgcolor ? {
 				...node.attrs,
 				bgcolor: tokens.toValue(bgcolor) ?? bgcolor
 			} : node.attrs;
+			const darkClass = withDarkClass(node.attrs?.class, tree, results.map((result) => result.darkClasses[ordinal]));
+			const attrs = darkClass === void 0 ? painted : {
+				...painted,
+				class: darkClass
+			};
 			const kids = rebuild(node.children ?? []);
 			const { style: _authored, children: _children, attrs: _attrs, ...rest } = node;
 			return {
@@ -3152,7 +3213,7 @@ const applyStyles = (root, sheet, options) => {
 	});
 	return {
 		root: rebuild([root])[0] ?? root,
-		headCss,
+		headCss: `${renderDarkRules(darkRules)}${headCss}`,
 		fontFaceCss
 	};
 };

package/dist/{render-Cja448i0.js → render-6gLei61p.js}

@@ -1,7 +1,7 @@
 import { S as emailElement, o as serializeEmailHtml } from "./html-eOZfDwVf.js";
 import { i as drainEmailDiagnostics, t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
-import { f as preheaderNode } from "./components-DycSEKva.js";
-import { n as applyStylesheet } from "./ir-C-ubz6N3.js";
+import { f as preheaderNode } from "./components-CwWSoG5N.js";
+import { i as renderDarkRules, r as applyStylesheet } from "./ir-D-gTGquU.js";
 import { r as hasBlockingDiagnostic, t as EmailCompileError } from "./diagnostics-C0Tr8-eQ.js";
 //#region src/email/text.ts
 const PARAGRAPH = "\n\n";
@@ -219,12 +219,14 @@ const renderEmailContent = (stylesheet, render, options = {}) => {
 		tree: base,
 		headCss: "",
 		fontFaceCss: "",
-		diagnostics: []
+		diagnostics: [],
+		darkRules: /* @__PURE__ */ new Map()
 	} : applyStylesheet(base, stylesheet);
+	const headCss = `${renderDarkRules(styled.darkRules)}${styled.headCss}`;
 	const style = [...styled.diagnostics];
 	let tree = styled.tree;
-	if (styled.headCss !== "" || styled.fontFaceCss !== "") {
-		const placed = withHeadCss(tree, styled.headCss, styled.fontFaceCss);
+	if (headCss !== "" || styled.fontFaceCss !== "") {
+		const placed = withHeadCss(tree, headCss, styled.fontFaceCss);
 		if (placed === void 0) style.push({
 			code: "missing-head",
 			severity: "error",

package/dist/{render-C6OTH8BQ.d.ts → render-C1X3S5or.d.ts}

@@ -441,6 +441,11 @@ interface Stylesheet {
   readonly fontFaces: readonly FontFaceRule[];
   /** Unconditional custom properties, for resolving `var()` before inlining. */
   readonly variables: Readonly<Record<string, string>>;
+  /**
+   * The custom properties the dark-mode query redefines (a theme's dark-mode
+   * block). A declaration that reads one switches in dark mode.
+   */
+  readonly darkVariables: Readonly<Record<string, string>>;
   readonly diagnostics: readonly EmailDiagnostic[];
 }
 /** Compile a selector into the plain-data matcher the render lane uses. */

package/dist/render.d.ts

@@ -1,5 +1,5 @@
 import { C as isUrlAttribute, S as emailElement, _ as EmailGlobalProps, b as EmailStyle, g as EmailElementSpec, h as EmailAttributeSpec, m as EMAIL_GLOBAL_ATTRIBUTES, p as EMAIL_ELEMENTS, r as EmailNode, v as EmailIntrinsicElements, x as EmailTag, y as EmailLayout } from "./jsx-runtime-DC7xG0aA.js";
-import { $ as IrWhatsApp, A as emailAuthoringTarget, B as IrElement, D as EmittedPosition, E as EmailElementSelection, F as emailSelections, G as IrPredicate, H as IrFormatter, I as renderIrPreview, J as IrRawPart, K as IrPreheader, L as IrArithmetic, M as emailSelectionAncestry, N as emailSelectionIndex, O as INSTANCE_PATH_ATTRIBUTE, P as emailSelectionSiblings, Q as IrValue, R as IrComparison, U as IrIf, V as IrEmail, W as IrNode, X as IrSource, Y as IrSms, Z as IrStyle, a as renderEmailContent, at as RenderedPosition, c as checkAttribute, ct as TemplateIr, d as escapeText, et as IrWhatsAppButton, f as kebab, i as compileEmail, it as RenderedIrWhatsApp, j as emailDefinitionInstances, k as IrPreview, l as declarationValue, m as serializeStyle, n as EmailCompileOutput, nt as RenderOptions, o as EmailHtmlOutput, ot as RenderedWhatsAppButton, p as serializeEmailHtml, q as IrRaw, r as RenderedEmail, rt as RenderedIrEmail, s as SerializeEmailOptions, st as SML_IR_VERSION, t as EMAIL_DOCTYPE, tt as IrWhatsAppButtonNode, u as escapeAttribute, z as IrEach } from "./render-C6OTH8BQ.js";
+import { $ as IrWhatsApp, A as emailAuthoringTarget, B as IrElement, D as EmittedPosition, E as EmailElementSelection, F as emailSelections, G as IrPredicate, H as IrFormatter, I as renderIrPreview, J as IrRawPart, K as IrPreheader, L as IrArithmetic, M as emailSelectionAncestry, N as emailSelectionIndex, O as INSTANCE_PATH_ATTRIBUTE, P as emailSelectionSiblings, Q as IrValue, R as IrComparison, U as IrIf, V as IrEmail, W as IrNode, X as IrSource, Y as IrSms, Z as IrStyle, a as renderEmailContent, at as RenderedPosition, c as checkAttribute, ct as TemplateIr, d as escapeText, et as IrWhatsAppButton, f as kebab, i as compileEmail, it as RenderedIrWhatsApp, j as emailDefinitionInstances, k as IrPreview, l as declarationValue, m as serializeStyle, n as EmailCompileOutput, nt as RenderOptions, o as EmailHtmlOutput, ot as RenderedWhatsAppButton, p as serializeEmailHtml, q as IrRaw, r as RenderedEmail, rt as RenderedIrEmail, s as SerializeEmailOptions, st as SML_IR_VERSION, t as EMAIL_DOCTYPE, tt as IrWhatsAppButtonNode, u as escapeAttribute, z as IrEach } from "./render-C1X3S5or.js";
 //#region src/render-ir.d.ts
 interface IrRenderDiagnostic {
   readonly code: string;

package/dist/render.js

@@ -1,6 +1,6 @@
 import { C as isUrlAttribute, S as emailElement, _ as renderIr, a as kebab, b as EMAIL_ELEMENTS, c as INSTANCE_PATH_ATTRIBUTE, d as emailSelectionAncestry, f as emailSelectionIndex, g as IrRenderError, h as renderIrPreview, i as escapeText, l as emailAuthoringTarget, m as emailSelections, n as declarationValue, o as serializeEmailHtml, p as emailSelectionSiblings, r as escapeAttribute, s as serializeStyle, t as checkAttribute, u as emailDefinitionInstances, v as renderIrSms, x as EMAIL_GLOBAL_ATTRIBUTES, y as renderIrWhatsApp } from "./html-eOZfDwVf.js";
-import { t as SML_IR_VERSION } from "./ir-C-ubz6N3.js";
-import { i as deriveEmailText, n as compileEmail, r as renderEmailContent, t as EMAIL_DOCTYPE } from "./render-Cja448i0.js";
+import { t as SML_IR_VERSION } from "./ir-D-gTGquU.js";
+import { i as deriveEmailText, n as compileEmail, r as renderEmailContent, t as EMAIL_DOCTYPE } from "./render-6gLei61p.js";
 //#region src/sms-segments.ts
 const GSM7_EXTENDED = /* @__PURE__ */ new Set([
 	"[",