@samva/markup 0.13.1 → 0.15.0

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

@@ -1,13 +1,13 @@
 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-eOZfDwVf.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 { 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-3XHjYD3i.js";
+import { i as renderDarkRules, n as DARK_CLASS_PREFIX, r as applyStylesheet } from "./ir-DNL6H7jA.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-nreeKWxF.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} …>.");
@@ -2508,7 +2530,12 @@ const BUTTON_TEXT_LIMIT = 25;
 const URL_BUTTON_LIMIT = 2;
 const PHONE_BUTTON_LIMIT = 1;
 const QUICK_REPLY_LIMIT = 10;
+const FLOW_BUTTON_LIMIT = 1;
 const BUTTON_LIMIT = 10;
+const FLOW_HANDLE_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+const FLOW_HANDLE_LIMIT = 64;
+const FLOW_SCREEN_PATTERN = /^[A-Za-z_]{1,100}$/;
+const FLOW_ACTIONS = ["navigate", "data_exchange"];
 const jsxName = (name) => {
 	if (name.type === "JSXIdentifier") return text(name, "name") ?? "";
 	if (name.type === "JSXMemberExpression") return `${jsxName(child(name, "object") ?? name)}.${text(child(name, "property") ?? name, "name") ?? ""}`;
@@ -2614,6 +2641,7 @@ const ZERO = {
 	url: 0,
 	phone: 0,
 	quickReply: 0,
+	flow: 0,
 	total: 0
 };
 /** The most buttons of each kind any combination of the conditions can produce. */
@@ -2628,18 +2656,21 @@ const maximalCounts = (nodes) => {
 				url: Math.max(then.url, otherwise.url),
 				phone: Math.max(then.phone, otherwise.phone),
 				quickReply: Math.max(then.quickReply, otherwise.quickReply),
+				flow: Math.max(then.flow, otherwise.flow),
 				total: Math.max(then.total, otherwise.total)
 			};
 		} else add = {
 			url: node.type === "url" ? 1 : 0,
 			phone: node.type === "phone" ? 1 : 0,
 			quickReply: node.type === "quick-reply" ? 1 : 0,
+			flow: node.type === "flow" ? 1 : 0,
 			total: 1
 		};
 		counts = {
 			url: counts.url + add.url,
 			phone: counts.phone + add.phone,
 			quickReply: counts.quickReply + add.quickReply,
+			flow: counts.flow + add.flow,
 			total: counts.total + add.total
 		};
 	}
@@ -2657,6 +2688,7 @@ const buttonNodes = (buttons) => buttons.flatMap((button) => {
 		case "url": return [button.text, button.url];
 		case "phone": return [button.text, button.phone];
 		case "copy-code": return [button.code];
+		case "flow": return [button.text];
 	}
 });
 const whatsappChannel = (input, field) => {
@@ -2750,6 +2782,7 @@ const whatsappChannel = (input, field) => {
 		over("URL buttons", counts.url, URL_BUTTON_LIMIT);
 		over("phone buttons", counts.phone, PHONE_BUTTON_LIMIT);
 		over("quick-reply buttons", counts.quickReply, QUICK_REPLY_LIMIT);
+		over("flow buttons", counts.flow, FLOW_BUTTON_LIMIT);
 		over("buttons in all", counts.total, BUTTON_LIMIT);
 		roots.push(...buttonNodes(buttons));
 	}
@@ -2768,7 +2801,8 @@ const BUTTON_TAGS = [
 	"UrlButton",
 	"QuickReplyButton",
 	"PhoneButton",
-	"CopyCodeButton"
+	"CopyCodeButton",
+	"FlowButton"
 ];
 const buttonList = (input, ctx, local, parent) => {
 	const { lowerer } = input;
@@ -2793,6 +2827,54 @@ const buttonList = (input, ctx, local, parent) => {
 		if (value === void 0) lowerer.error(ctx, element, "missing-attribute", `This button needs \`${name}\`.`, `Write ${name}="…" or ${name}={input.field}.`);
 		return value;
 	};
+	const flowButton = (element) => {
+		const label_ = label(element, "label");
+		const values = /* @__PURE__ */ new Map();
+		let valid = true;
+		const refuse = (node, code, message, fix) => {
+			valid = false;
+			lowerer.error(ctx, node, code, message, fix);
+		};
+		for (const item of attributesOf(element)) {
+			if (item.type === "JSXSpreadAttribute") {
+				refuse(item, "invalid-attribute", "A spread attribute runs code, and templates render without running code.", "Write flow, action and screen as string literals.");
+				continue;
+			}
+			const nameNode = child(item, "name");
+			const name = nameNode === void 0 ? "" : jsxName(nameNode);
+			if (name === "key") continue;
+			if (name !== "flow" && name !== "action" && name !== "screen") {
+				refuse(item, "invalid-attribute", `\`${name}\` is not an attribute of this button.`, "The attributes are flow, action and screen.");
+				continue;
+			}
+			const raw = child(item, "value");
+			const literal = raw?.type === "JSXExpressionContainer" ? child(raw, "expression") : raw;
+			if (literal?.type !== "StringLiteral") {
+				refuse(item, "invalid-attribute", `\`${name}\` is fixed when the template is registered, so it is a string literal, not a binding.`, `Write ${name}="…".`);
+				continue;
+			}
+			values.set(name, text(literal, "value") ?? "");
+		}
+		const flow = values.get("flow");
+		if (flow === void 0) {
+			if (valid) refuse(element, "missing-attribute", "This button needs `flow`.", "Write flow=\"handle\".");
+		} else if (flow.length > FLOW_HANDLE_LIMIT || !FLOW_HANDLE_PATTERN.test(flow)) refuse(element, "invalid-attribute", `\`${flow}\` is not a flow handle.`, `Use the lowercase kebab-case handle of flows/<handle>.json, at most ${FLOW_HANDLE_LIMIT} characters.`);
+		const action = values.get("action") ?? "navigate";
+		if (!FLOW_ACTIONS.includes(action)) refuse(element, "invalid-attribute", `\`${action}\` is not a flow action.`, `Use one of ${FLOW_ACTIONS.join(", ")}.`);
+		const screen = values.get("screen");
+		if (screen !== void 0) {
+			if (action === "data_exchange") refuse(element, "invalid-attribute", "A data_exchange flow has its endpoint choose the first screen, so it takes no `screen`.", "Remove screen, or use action=\"navigate\".");
+			else if (!FLOW_SCREEN_PATTERN.test(screen) || screen === "SUCCESS") refuse(element, "invalid-attribute", `\`${screen}\` is not a flow screen id.`, "Use the screen's id: letters and underscores, at most 100 characters, and not SUCCESS.");
+		}
+		if (!valid || flow === void 0 || label_ === void 0) return void 0;
+		return {
+			type: "flow",
+			text: label_,
+			flow,
+			action,
+			...screen === void 0 ? {} : { screen }
+		};
+	};
 	const single = (element) => {
 		const tag = tagOf(element);
 		switch (tag.startsWith(`${local}.`) ? tag.slice(local.length + 1) : "") {
@@ -2829,6 +2911,7 @@ const buttonList = (input, ctx, local, parent) => {
 					code
 				};
 			}
+			case "FlowButton": return flowButton(element);
 			default:
 				lowerer.error(ctx, element, "whatsapp-structure", `<WhatsApp.Buttons> holds ${BUTTON_TAGS.map((name) => `<WhatsApp.${name}>`).join(", ")}.`, "Use one of the button components.");
 				return;
@@ -2951,6 +3034,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 +3169,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 +3179,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 +3188,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 +3198,7 @@ const applyStyles = (root, sheet, options) => {
 		const result = {
 			styles: [],
 			bgcolors: [],
+			darkClasses: [],
 			raws: []
 		};
 		read([applied.tree], result);
@@ -3114,10 +3231,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 +3274,7 @@ const applyStyles = (root, sheet, options) => {
 	});
 	return {
 		root: rebuild([root])[0] ?? root,
-		headCss,
+		headCss: `${renderDarkRules(darkRules)}${headCss}`,
 		fontFaceCss
 	};
 };

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

@@ -167,6 +167,14 @@ type IrWhatsAppButton = {
 } | {
   readonly type: "copy-code";
   readonly code: IrValue;
+} | {
+  readonly type: "flow";
+  readonly text: IrValue;
+  /** The Samva flow handle, resolved to Meta's flow id when the template is registered. */
+  readonly flow: string;
+  readonly action: "navigate" | "data_exchange";
+  /** Meta's `navigate_screen`; absent opens the flow's first entry screen. */
+  readonly screen?: string;
 };
 /** A button, or buttons that appear when a condition over the input holds. */
 type IrWhatsAppButtonNode = IrWhatsAppButton | {
@@ -243,6 +251,12 @@ type RenderedWhatsAppButton = {
 } | {
   readonly type: "copy-code";
   readonly code: string;
+} | {
+  readonly type: "flow";
+  readonly text: string;
+  readonly flow: string;
+  readonly action: "navigate" | "data_exchange";
+  readonly screen?: string;
 };
 /** A WhatsApp message with every text rendered and every conditional button resolved. */
 interface RenderedIrWhatsApp {
@@ -441,6 +455,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-Cja448i0.js → render-DpYouYYG.js}

@@ -1,7 +1,7 @@
-import { S as emailElement, o as serializeEmailHtml } from "./html-eOZfDwVf.js";
+import { S as emailElement, o as serializeEmailHtml } from "./html-BvRFepeO.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-3XHjYD3i.js";
+import { i as renderDarkRules, r as applyStylesheet } from "./ir-DNL6H7jA.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.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-BdvewoQt.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 { 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-BvRFepeO.js";
+import { t as SML_IR_VERSION } from "./ir-DNL6H7jA.js";
+import { i as deriveEmailText, n as compileEmail, r as renderEmailContent, t as EMAIL_DOCTYPE } from "./render-DpYouYYG.js";
 //#region src/sms-segments.ts
 const GSM7_EXTENDED = /* @__PURE__ */ new Set([
 	"[",

package/dist/{theme-css-CEUrDpqq.js → theme-css-s9QwD5Ko.js}

@@ -1,3 +1,4 @@
+import { r as isDarkSchemeQuery } from "./dark-scheme-CbCwGDWH.js";
 import { generate, parse, walk } from "css-tree";
 import { Result } from "better-result";
 //#region src/email/css-color.ts
@@ -322,14 +323,15 @@ const BRAND_NAMESPACES = [
 	"--text-",
 	"--leading-",
 	"--tracking-",
-	"--radius-",
+	"--radius",
 	"--spacing",
 	"--container-",
 	"--shadow-"
 ];
+/** `--color-` names a prefix; `--radius` is the variable itself or a `--radius-*` prefix. */
+const inNamespace = (property, namespace) => namespace.endsWith("-") ? property.startsWith(namespace) : property === namespace || property.startsWith(`${namespace}-`);
 const BRAND_PROPERTY = /^--[a-z][a-z0-9-]*$/;
 const BRAND_UNSAFE_VALUE = /[{};<>\\@]|url\s*\(|expression\s*\(|\/\*/i;
-const BRAND_DARK_MEDIA = /^\(\s*prefers-color-scheme\s*:\s*dark\s*\)$/i;
 const BRAND_FONT_DESCRIPTORS = /* @__PURE__ */ new Set([
 	"font-family",
 	"src",
@@ -338,8 +340,6 @@ const BRAND_FONT_DESCRIPTORS = /* @__PURE__ */ new Set([
 	"font-display",
 	"unicode-range"
 ]);
-/** The theme variable a dark-mode color lowers to: `--color-brand` → `--color-brand-dark`. */
-const darkVariableName = (property) => `${property}-dark`;
 const spanOfNode = (node) => ({
 	start: node.loc?.start.offset ?? 0,
 	end: node.loc?.end.offset ?? 0
@@ -390,7 +390,7 @@ const parseBrandCss = (css) => {
 				report("brand-css-property", `${property} is not a theme variable; name theme variables --namespace-name.`, span);
 				continue;
 			}
-			if (!BRAND_NAMESPACES.some((namespace) => property.startsWith(namespace))) {
+			if (!BRAND_NAMESPACES.some((namespace) => inNamespace(property, namespace))) {
 				report("brand-css-namespace", `${property} is outside the brand namespaces (${BRAND_NAMESPACES.map((namespace) => namespace.endsWith("-") ? `${namespace}*` : namespace).join(", ")}).`, span);
 				continue;
 			}
@@ -476,7 +476,7 @@ const parseBrandCss = (css) => {
 				readFontFace(node);
 				continue;
 			}
-			if (name === "media" && node.prelude !== null && BRAND_DARK_MEDIA.test(generate(node.prelude).trim())) {
+			if (name === "media" && node.prelude !== null && isDarkSchemeQuery(generate(node.prelude))) {
 				for (const child of node.block.children) if (child.type === "Atrule" && child.name.toLowerCase() === "theme") readTheme(child, dark, "dark");
 				else report("brand-css-unsupported", "The dark-mode block may contain only @theme.", spanOfNode(child));
 				continue;
@@ -484,10 +484,6 @@ const parseBrandCss = (css) => {
 		}
 		report("brand-css-unsupported", "A brand theme contains only @theme, a dark-mode @theme (@media (prefers-color-scheme: dark)), and @font-face.", spanOfNode(node));
 	}
-	for (const property of Object.keys(dark)) if (darkVariableName(property) in variables) report("brand-css-dark-conflict", `${darkVariableName(property)} and the dark-mode ${property} name the same theme variable; keep one.`, {
-		start: 0,
-		end: 0
-	});
 	return diagnostics.length > 0 ? Result.err(diagnostics) : Result.ok({
 		variables,
 		dark,
@@ -518,9 +514,92 @@ const printBrandCss = (brand) => {
 	];
 	return blocks.length === 0 ? "" : `${blocks.join("\n\n")}\n`;
 };
-/** The brand color, and the text color that sits on it. */
-const BRAND_COLOR_VARIABLE = "--color-brand";
-const BRAND_FOREGROUND_VARIABLE = "--color-brand-foreground";
+/**
+* The semantic color tokens, as Tailwind color names (`bg-card`,
+* `text-primary-foreground`, `border-border`), each with the role a block uses
+* it for. A block reads only these, so swapping the theme reskins it.
+*/
+const THEME_COLOR_ROLES = {
+	background: "The page, behind everything.",
+	foreground: "Text on the page.",
+	card: "A surface that groups the message's content.",
+	"card-foreground": "Text on a card.",
+	primary: "The main action's fill (a button), and links.",
+	"primary-foreground": "Text on a primary fill.",
+	secondary: "A quieter action's fill.",
+	"secondary-foreground": "Text on a secondary fill.",
+	muted: "A subdued surface: a code block, a table header.",
+	"muted-foreground": "Secondary text on the page, a card or a muted surface: labels, captions, the footer.",
+	accent: "A highlighted surface: a callout, a selected row.",
+	"accent-foreground": "Text on an accent surface.",
+	border: "Rules, dividers and outlines."
+};
+const THEME_COLORS = Object.keys(THEME_COLOR_ROLES);
+/**
+* The non-color tokens: the corner radius (`rounded`; `rounded-sm` to `rounded-xl` follow it) and
+* the body and heading families (`font-sans`, `font-heading`).
+*/
+const THEME_TOKENS = [
+	"--radius",
+	"--font-sans",
+	"--font-heading"
+];
+const colorVariables = (colors) => Object.fromEntries(THEME_COLORS.map((name) => [`--color-${name}`, colors[name]]));
+/**
+* The theme every project compiles with, beneath its own: a neutral light and
+* dark palette, an 8px radius and the system sans-serif stack. A project's
+* `theme.css`, its imported stylesheets and its brand layer over it.
+*/
+const DEFAULT_THEME = {
+	variables: {
+		...colorVariables({
+			background: "#ffffff",
+			foreground: "#0a0a0a",
+			card: "#ffffff",
+			"card-foreground": "#0a0a0a",
+			primary: "#171717",
+			"primary-foreground": "#fafafa",
+			secondary: "#f5f5f5",
+			"secondary-foreground": "#171717",
+			muted: "#f5f5f5",
+			"muted-foreground": "#737373",
+			accent: "#f5f5f5",
+			"accent-foreground": "#171717",
+			border: "#e5e5e5"
+		}),
+		"--radius": "8px",
+		"--radius-sm": "calc(var(--radius) - 4px)",
+		"--radius-md": "calc(var(--radius) - 2px)",
+		"--radius-lg": "var(--radius)",
+		"--radius-xl": "calc(var(--radius) + 4px)",
+		"--font-sans": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+		"--font-heading": "var(--font-sans)"
+	},
+	dark: colorVariables({
+		background: "#0a0a0a",
+		foreground: "#fafafa",
+		card: "#171717",
+		"card-foreground": "#fafafa",
+		primary: "#fafafa",
+		"primary-foreground": "#171717",
+		secondary: "#262626",
+		"secondary-foreground": "#fafafa",
+		muted: "#262626",
+		"muted-foreground": "#a3a3a3",
+		accent: "#262626",
+		"accent-foreground": "#fafafa",
+		border: "#2e2e2e"
+	}),
+	fontFaces: []
+};
+/** `DEFAULT_THEME` as theme CSS. */
+const DEFAULT_THEME_CSS = printBrandCss(DEFAULT_THEME);
+/** The fills whose text color a brand may leave out: `--color-primary` and `--color-primary-foreground`, and so on. */
+const FILL_COLORS = [
+	"primary",
+	"secondary",
+	"accent"
+];
 /** WCAG relative luminance of an sRGB channel triple in 0–1. */
 const relativeLuminance = (r, g, b) => {
 	const linear = (channel) => {
@@ -545,41 +624,24 @@ const contrastForeground = (color) => {
 	return 1.05 / (luminance + .05) > (luminance + .05) / .05 ? "#ffffff" : "#000000";
 };
 /**
-* The text-on-brand colors a brand gets when it leaves them out: for the light
-* theme and, when the brand sets a dark-mode brand color, for dark mode. Each
-* is the `contrastForeground` of the brand color it sits on. A brand that sets
-* the foreground, or whose brand color does not evaluate, gets no default.
-*/
-const brandForegroundDefaults = (brand) => {
-	const light = brand.variables["--color-brand-foreground"] === void 0 && brand.variables["--color-brand"] !== void 0 ? contrastForeground(brand.variables[BRAND_COLOR_VARIABLE]) : void 0;
-	const darkBrand = brand.dark[BRAND_COLOR_VARIABLE];
-	return {
-		light,
-		dark: darkBrand !== void 0 && brand.dark["--color-brand-foreground"] === void 0 && brand.variables[darkVariableName("--color-brand-foreground")] === void 0 ? contrastForeground(darkBrand) : void 0
-	};
-};
-/**
-* A brand theme as flat theme variables, the way a build compiles it. Email
-* inlining resolves `var()` once, so a dark-mode `@theme` cannot switch a
-* value at run time; each dark color lowers to its `-dark` theme variable,
-* which `dark:` utilities read (`dark:bg-brand-dark`). A text-on-brand color
-* the brand leaves out is filled in by `brandForegroundDefaults`, so every
-* build compiles the same default and the stored CSS never carries it.
+* The text colors a theme layer gets for the fills it sets without one: for
+* each of `FILL_COLORS`, the `contrastForeground` of the fill, in light mode
+* and, where the layer's dark-mode block sets the fill, in dark mode. A layer
+* that sets the foreground, or whose fill does not evaluate, gets no default.
+* Every build lowers each theme layer with these, so stored theme CSS never
+* carries them.
 */
-const brandThemeVariables = (brand) => {
-	const defaults = brandForegroundDefaults(brand);
+const foregroundDefaults = (light, dark) => {
+	const defaults = (colors) => Object.fromEntries(FILL_COLORS.flatMap((fill) => {
+		const color = colors[`--color-${fill}`];
+		const foreground = `--color-${fill}-foreground`;
+		const picked = color === void 0 || colors[foreground] !== void 0 ? void 0 : contrastForeground(color);
+		return picked === void 0 ? [] : [[foreground, picked]];
+	}));
 	return {
-		...brand.variables,
-		...defaults.light === void 0 ? {} : { [BRAND_FOREGROUND_VARIABLE]: defaults.light },
-		...Object.fromEntries(Object.entries(brand.dark).map(([property, value]) => [darkVariableName(property), value])),
-		...defaults.dark === void 0 ? {} : { [darkVariableName(BRAND_FOREGROUND_VARIABLE)]: defaults.dark }
+		light: defaults(light),
+		dark: defaults(dark)
 	};
 };
-/** The stylesheet Tailwind compiles for the theme's brand import: `brandThemeVariables` and the font faces. */
-const brandTailwindCss = (brand) => printBrandCss({
-	fontFaces: brand.fontFaces,
-	variables: brandThemeVariables(brand),
-	dark: {}
-});
 //#endregion
-export { brandThemeVariables as a, parseBrandCss as c, formatColor as d, parseColor as f, brandTailwindCss as i, printBrandCss as l, BRAND_FOREGROUND_VARIABLE as n, contrastForeground as o, brandForegroundDefaults as r, darkVariableName as s, BRAND_COLOR_VARIABLE as t, downlevelColors as u };
+export { THEME_COLOR_ROLES as a, foregroundDefaults as c, downlevelColors as d, formatColor as f, THEME_COLORS as i, parseBrandCss as l, DEFAULT_THEME_CSS as n, THEME_TOKENS as o, parseColor as p, FILL_COLORS as r, contrastForeground as s, DEFAULT_THEME as t, printBrandCss as u };