@samva/markup 0.7.0 → 0.9.0

package/dist/{render-aaJBnsXK.js → cascade-t6kxlgEI.js}

@@ -1,10 +1,95 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
-import { EmailNode, drainEmailDiagnostics } from "./email/jsx-runtime.js";
-import { declarationValue, kebab, serializeEmailHtml } from "./email/html.js";
-import { PREHEADER_ATTRIBUTE, preheaderNode } from "./email/components.js";
-import { EmailCompileError, hasBlockingDiagnostic } from "./email/diagnostics.js";
-import { snapshotStylesheets } from "./email/stylesheets.js";
-import { deriveEmailText } from "./email/text.js";
+import { EmailNode } from "./email/jsx-runtime.js";
+import { declarationValue, escapeAttribute, kebab } from "./email/html.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([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy"
+]);
+/** One family name as written, without its quotes and with runs of spaces collapsed. */
+const unquote = (value) => {
+	const trimmed = value.trim();
+	const quote = trimmed[0];
+	return (quote === "\"" || quote === "'") && trimmed.endsWith(quote) && trimmed.length >= 2 ? trimmed.slice(1, -1) : trimmed.replace(/\s+/g, " ");
+};
+/** The families of a `font-family` value, unquoted, in stack order. */
+const fontStackFamilies = (value) => {
+	const families = [];
+	let start = 0;
+	let quote;
+	for (let index = 0; index < value.length; index++) {
+		const character = value[index];
+		if (quote !== void 0) {
+			if (character === quote) quote = void 0;
+		} else if (character === "'" || character === "\"") quote = character;
+		else if (character === ",") {
+			families.push(unquote(value.slice(start, index)));
+			start = index + 1;
+		}
+	}
+	families.push(unquote(value.slice(start)));
+	return families.filter((family) => family !== "");
+};
+const FONT_SIZE = /^(?:xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|larger|smaller|[+-]?(?:\d+\.?\d*|\.\d+)(?:[a-z]+|%)|(?:calc|clamp|min|max|var)\(.*\))$/i;
+/** Whitespace-separated tokens at the top level, keeping parentheses and quotes whole. */
+const shorthandTokens = (value) => {
+	const tokens = [];
+	let current = "";
+	let depth = 0;
+	let quote;
+	for (const character of value.trim()) {
+		if (quote !== void 0) {
+			if (character === quote) quote = void 0;
+		} else if (character === "'" || character === "\"") quote = character;
+		else if (character === "(") depth++;
+		else if (character === ")") depth--;
+		else if (/\s/.test(character) && depth === 0) {
+			if (current !== "") tokens.push(current);
+			current = "";
+			continue;
+		}
+		current += character;
+	}
+	if (current !== "") tokens.push(current);
+	return tokens;
+};
+/**
+* The family list of a `font` shorthand: everything after the size (and its
+* optional line height), or `undefined` for a system-font keyword that names
+* no family.
+*/
+const fontShorthandFamilies = (value) => {
+	const tokens = shorthandTokens(value);
+	const size = tokens.findIndex((token) => FONT_SIZE.test(token.replace(/\/.*$/, "")));
+	if (size < 0) return void 0;
+	let next = size + 1;
+	const sizeToken = tokens[size];
+	if (sizeToken.endsWith("/")) next += 1;
+	else if (!sizeToken.includes("/") && tokens[next]?.startsWith("/")) next += tokens[next] === "/" ? 2 : 1;
+	const family = tokens.slice(next).join(" ");
+	return family === "" ? void 0 : family;
+};
+/**
+* True when a stack names a declared project family without ending in a
+* generic. `declared` holds lowercased family names. A quoted `"sans-serif"`
+* names a font called sans-serif, not the generic, so it does not count.
+*/
+const lacksGenericFallback = (value, declared) => {
+	const stack = value.replace(/\s*!important\s*$/i, "");
+	if (!fontStackFamilies(stack).some((family) => declared.has(family.toLowerCase()))) return false;
+	const last = stack.slice(stack.lastIndexOf(",") + 1).trim();
+	return !GENERIC_FAMILIES.has(last.toLowerCase());
+};
+const fontFallbackDiagnostic = (value) => ({
+	code: "email-font-fallback",
+	severity: "error",
+	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/css-values.ts
 const MAX_RESOLVED_VALUE_LENGTH = 65536;
 const MAX_RESOLUTION_WORK = 262144;
@@ -260,6 +345,17 @@ const matchesFrom = (selector, index, ancestry) => {
 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;
+/**
+* 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
@@ -353,6 +449,14 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	}
 	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
@@ -371,6 +475,10 @@ const applyStylesheet = (root, sheet, options = {}) => {
 				return result;
 			}
 			if (child.type === "Fragment") return EmailNode.Fragment({ 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);
@@ -422,15 +530,21 @@ const applyStylesheet = (root, sheet, options = {}) => {
 			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 props = typeof bgcolor === "string" && bgcolor.includes("var(") ? {
+			...element.props,
+			bgcolor: finalizeValue(bgcolor, variables)
+		} : element.props;
 		return EmailNode.Element({
 			...element,
-			props: emitted.length === 0 ? element.props : {
-				...element.props,
+			props: emitted.length === 0 ? props : {
+				...props,
 				style: Object.fromEntries(physical)
 			},
 			children: visitChildren(element.children, ancestry, variables, writing)
@@ -441,6 +555,11 @@ const applyStylesheet = (root, sheet, options = {}) => {
 		parent: void 0,
 		previous: []
 	}, sheet.variables, horizontalWriting) : root.type === "Fragment" ? EmailNode.Fragment({ children: visitChildren(root.children, void 0, sheet.variables, 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",
@@ -450,160 +569,11 @@ const applyStylesheet = (root, sheet, options = {}) => {
 	return {
 		tree,
 		headCss: renderHeadCss(retained, sheet.headAtRules, sheet.variables),
+		fontFaceCss: sheet.fontFaces.map((face) => face.css).join(""),
 		diagnostics
 	};
 };
 //#endregion
-//#region src/email/render.ts
-/** Classic Outlook lays a document out correctly only under a transitional doctype. */
-const EMAIL_DOCTYPE = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
-const settle = (diagnostics) => {
-	if (hasBlockingDiagnostic(diagnostics)) throw new EmailCompileError({ diagnostics });
-	return diagnostics;
-};
-/** Lower the derived tree to HTML and its plain-text alternative. */
-const compileEmail = (node, options = {}) => {
-	const serialized = serializeEmailHtml(node, options);
-	const diagnostics = settle([...drainEmailDiagnostics(), ...serialized.diagnostics]);
-	return {
-		html: serialized.html,
-		text: deriveEmailText(node),
-		diagnostics,
-		positions: serialized.positions
-	};
-};
-/** The preview text already present in the tree, from `<Email preheader>`. */
-const declaredPreheader = (node) => {
-	switch (node.type) {
-		case "Text":
-		case "Raw": return;
-		case "Fragment": return node.children.reduce((found, child) => found ?? declaredPreheader(child), void 0);
-		case "Element": {
-			const declared = node.props[PREHEADER_ATTRIBUTE];
-			if (typeof declared === "string") return declared;
-			return node.children.reduce((found, child) => found ?? declaredPreheader(child), void 0);
-		}
-	}
-};
-/** Put the hidden preview block first inside `<body>`, or first overall when there is no shell. */
-const withPreheader = (node, text) => {
-	const insert = (current) => {
-		if (current.type === "Fragment") {
-			for (const [index, child] of current.children.entries()) {
-				const replaced = insert(child);
-				if (replaced !== void 0) return EmailNode.Fragment({ children: current.children.with(index, replaced) });
-			}
-			return;
-		}
-		if (current.type !== "Element") return void 0;
-		if (current.tag === "body") return EmailNode.Element({
-			...current,
-			children: [preheaderNode(text), ...current.children]
-		});
-		for (const [index, child] of current.children.entries()) {
-			const replaced = insert(child);
-			if (replaced !== void 0) return EmailNode.Element({
-				...current,
-				children: current.children.with(index, replaced)
-			});
-		}
-	};
-	return insert(node) ?? EmailNode.Fragment({ children: [preheaderNode(text), node] });
-};
-/** Put the retained rules in a `<style>` at the end of `<head>`. */
-const withHeadCss = (node, css) => {
-	const insert = (current) => {
-		if (current.type === "Fragment") {
-			for (const [index, child] of current.children.entries()) {
-				const replaced = insert(child);
-				if (replaced !== void 0) return EmailNode.Fragment({ children: current.children.with(index, replaced) });
-			}
-			return;
-		}
-		if (current.type !== "Element") return void 0;
-		if (current.tag === "head") return EmailNode.Element({
-			...current,
-			children: [...current.children, EmailNode.Element({
-				tag: "style",
-				props: {},
-				children: [EmailNode.Text({ value: css })],
-				origins: current.origins,
-				authored: false
-			})]
-		});
-		for (const [index, child] of current.children.entries()) {
-			const replaced = insert(child);
-			if (replaced !== void 0) return EmailNode.Element({
-				...current,
-				children: current.children.with(index, replaced)
-			});
-		}
-	};
-	return insert(node);
-};
-/** Render one validated input through the template's only content function. Host isolation is required for untrusted source. */
-const renderEmail = (template, data, options = {}) => renderEmailWith(snapshotStylesheets(), template, data, options);
-/**
-* A render bound to the sheets registered so far. A compiled project's wrapper
-* calls this once its own stylesheet imports have run, so a later project
-* loaded into the same process cannot restyle an entry that is rendered again.
-*/
-const bindStylesheets = (stylesheet = snapshotStylesheets()) => (template, data, options = {}) => renderEmailWith(stylesheet, template, data, options);
-const renderEmailWith = (stylesheet, template, data, options) => {
-	if (!template.schema.validate(data)) throw new TypeError(`Invalid template input: ${JSON.stringify(template.schema.validate.errors)}`);
-	drainEmailDiagnostics();
-	const content = template.render(data);
-	const invalid = [];
-	const fail = (code, message) => invalid.push({
-		code,
-		severity: "error",
-		message,
-		origins: []
-	});
-	if (typeof content.subject !== "string" || /[\r\n\u0000]/.test(content.subject)) fail("invalid-subject", "Invalid email subject: it must be one line of text.");
-	if (content.preheader !== void 0 && typeof content.preheader !== "string") fail("invalid-preheader", "Invalid email preheader: it must be a string.");
-	if (content.text !== void 0 && typeof content.text !== "string") fail("invalid-text", "Invalid plain text: it must be a string.");
-	const declared = declaredPreheader(content.body);
-	if (content.preheader !== void 0 && declared !== void 0) fail("duplicate-preheader", "Preheader is set on both the template content and <Email preheader>; keep one.");
-	settle(invalid);
-	const base = content.preheader === void 0 ? content.body : withPreheader(content.body, content.preheader);
-	const styled = stylesheet === void 0 ? {
-		tree: base,
-		headCss: "",
-		diagnostics: []
-	} : applyStylesheet(base, stylesheet);
-	const style = [...styled.diagnostics];
-	let tree = styled.tree;
-	if (styled.headCss !== "") {
-		const placed = withHeadCss(tree, styled.headCss);
-		if (placed === void 0) style.push({
-			code: "missing-head",
-			severity: "error",
-			message: "Styles that cannot be inlined — media queries, dark-scheme rules and pseudo-selectors — need a <head> to live in. Wrap the message in <Email>, or write those declarations as inline styles.",
-			origins: []
-		});
-		else tree = placed;
-	}
-	settle(style);
-	const compiled = compileEmail(tree, options);
-	const prefix = compiled.html.startsWith("<html") ? EMAIL_DOCTYPE : "";
-	const html = `${prefix}${compiled.html}`;
-	const positions = prefix === "" ? compiled.positions : compiled.positions.map((position) => ({
-		...position,
-		start: position.start + prefix.length,
-		end: position.end + prefix.length
-	}));
-	return {
-		subject: content.subject,
-		preheader: content.preheader ?? declared,
-		html,
-		text: content.text ?? compiled.text,
-		tree,
-		diagnostics: [...style, ...compiled.diagnostics],
-		positions
-	};
-};
-//#endregion
-export { applyStylesheet as a, downlevelMediaQuery as c, renderHeadCss as d, resolveVariables as f, renderEmail as i, finalizeValue as l, bindStylesheets as n, classListOf as o, compileEmail as r, matchesSelector as s, EMAIL_DOCTYPE as t, foldCalc as u };
+export { finalizeValue as a, resolveVariables as c, downlevelMediaQuery as i, unquote as l, classListOf as n, foldCalc as o, matchesSelector as r, renderHeadCss as s, applyStylesheet as t };
 
-//# sourceMappingURL=render-aaJBnsXK.js.map
+//# sourceMappingURL=cascade-t6kxlgEI.js.map

package/dist/channel-edit.d.ts

@@ -0,0 +1,121 @@
+import { n as WhatsAppCategory, r as WhatsAppHeaderType, t as SmsCategory } from "./channel-specs-C2feJwuP.js";
+import { SourceReplacement } from "./source-edit.js";
+//#region src/channel-edit.d.ts
+/** A run of body text between two locked segments. It is empty when nothing sits between them. */
+interface TextSegment {
+  readonly kind: "text";
+  readonly text: string;
+  /** The source range the text is written back over. */
+  readonly start: number;
+  readonly end: number;
+}
+/** An expression, conditional or element the form does not edit, kept as authored. */
+interface LockedSegment {
+  readonly kind: "locked";
+  /** The authored source, shortened for display. */
+  readonly summary: string;
+  readonly start: number;
+  readonly end: number;
+}
+type ChannelSegment = TextSegment | LockedSegment;
+/** How an attribute appears on an element. Only a literal is editable. */
+type AttributeState = {
+  readonly kind: "absent";
+} | {
+  readonly kind: "literal";
+  readonly value: string;
+} | {
+  readonly kind: "expression";
+  readonly source: string;
+};
+interface SmsChannelForm {
+  readonly category: AttributeState;
+  readonly segments: readonly ChannelSegment[];
+  /** The input fields the body reads, as dotted paths. */
+  readonly variables: readonly string[];
+}
+type WhatsAppButtonKind = "quick-reply" | "url" | "phone" | "copy-code";
+type WhatsAppButtonRow = {
+  readonly kind: "editable";
+  readonly type: WhatsAppButtonKind;
+  /** The label, or the copied code for a copy-code button. */
+  readonly text: string;
+  readonly url: AttributeState;
+  readonly phone: AttributeState;
+} | {
+  /** A conditional, or a button whose label reads the input. */
+  readonly kind: "locked";
+  readonly summary: string;
+};
+interface WhatsAppChannelForm {
+  readonly name: AttributeState;
+  readonly language: AttributeState;
+  readonly category: AttributeState;
+  /** Null when the template has no header. */
+  readonly header: readonly ChannelSegment[] | null;
+  readonly headerType: AttributeState;
+  readonly body: readonly ChannelSegment[];
+  /** Null when the template has no footer. */
+  readonly footer: readonly ChannelSegment[] | null;
+  readonly buttons: readonly WhatsAppButtonRow[];
+  readonly variables: readonly string[];
+}
+type ChannelEditResult = {
+  readonly ok: true;
+  readonly edits: readonly SourceReplacement[];
+} | {
+  readonly ok: false;
+  readonly reason: string;
+};
+type SmsEdit = {
+  readonly kind: "category";
+  readonly value: SmsCategory | undefined;
+} | {
+  readonly kind: "text";
+  readonly segment: number;
+  readonly text: string;
+};
+type WhatsAppPart = "header" | "body" | "footer";
+type WhatsAppEdit = {
+  readonly kind: "attribute";
+  readonly name: "name" | "language" | "category";
+  readonly value: string | undefined;
+} | {
+  readonly kind: "headerType";
+  readonly value: WhatsAppHeaderType;
+} | {
+  readonly kind: "text";
+  readonly part: WhatsAppPart;
+  readonly segment: number;
+  readonly text: string;
+} | {
+  readonly kind: "buttonText";
+  readonly button: number;
+  readonly text: string;
+} | {
+  readonly kind: "buttonAttribute";
+  readonly button: number;
+  readonly name: "url" | "phone";
+  readonly value: string;
+} | {
+  readonly kind: "buttonType";
+  readonly button: number;
+  readonly type: WhatsAppButtonKind;
+} | {
+  readonly kind: "buttonAdd";
+  readonly type: WhatsAppButtonKind;
+} | {
+  readonly kind: "buttonRemove";
+  readonly button: number;
+};
+/** The form model of the template's SMS body, or null when it is not a `<Sms>` written in place. */
+declare const readSmsChannel: (source: string) => SmsChannelForm | null;
+/** The source replacements that apply one form change to the SMS body. */
+declare const editSmsChannel: (source: string, edit: SmsEdit) => ChannelEditResult;
+/** The form model of the template's WhatsApp body, or null when it is not a `<WhatsApp>` written in place. */
+declare const readWhatsAppChannel: (source: string) => WhatsAppChannelForm | null;
+/** The source replacements that apply one form change to the WhatsApp body. */
+declare const editWhatsAppChannel: (source: string, edit: WhatsAppEdit) => ChannelEditResult;
+//#endregion
+export { AttributeState, ChannelEditResult, ChannelSegment, LockedSegment, type SmsCategory, SmsChannelForm, SmsEdit, TextSegment, WhatsAppButtonKind, WhatsAppButtonRow, type WhatsAppCategory, WhatsAppChannelForm, WhatsAppEdit, type WhatsAppHeaderType, WhatsAppPart, editSmsChannel, editWhatsAppChannel, readSmsChannel, readWhatsAppChannel };
+//# sourceMappingURL=channel-edit.d.ts.map