@samva/markup 0.10.0 → 0.11.1

package/dist/compiler.js

@@ -1,13 +1,13 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { n as TEMPLATE_NAME_PATTERN } from "./template-zLUjcwfF.js";
-import { k as renderIr } from "./components-BZCqegS8.js";
-import { c as parseBrandCss, d as formatColor, f as parseColor, i as brandTailwindCss, u as downlevelColors } from "./theme-css-JtRCm1fb.js";
-import { a as downlevelMediaQuery, c as renderHeadCss, i as matchesSelector, l as resolveVariables, n as applyStylesheet, o as finalizeValue, r as classListOf, s as foldCalc, u as unquote } from "./ir-CLhlklKV.js";
+import { D as samvaBrandPlugin, T as parseBrandSpecifier, _ as renderIr, w as brandSpecifierPattern } from "./html-DjPxwjLi.js";
+import { c as parseBrandCss, d as formatColor, f as parseColor, i as brandTailwindCss, u as downlevelColors } from "./theme-css-CEUrDpqq.js";
+import { a as downlevelMediaQuery, c as renderHeadCss, i as matchesSelector, l as resolveVariables, n as applyStylesheet, o as finalizeValue, r as classListOf, s as foldCalc, u as unquote } from "./ir-De6pTH51.js";
 import { i as lineColumn, t as buildLineMap } from "./diagnostic-model-DJtqbETd.js";
-import { a as lowerProject, d as parseBrandSpecifier, f as projectDirectory, i as completed, l as Findings, m as resolveThemeImports, n as introducedProfileErrors, p as resolveFromDirectory, r as loadProject, t as checkStaticProfile, u as BRAND_SPECIFIER } from "./profile-pWGtWZXF.js";
-import { c as assetEntry, d as isAssetPath, i as brandComponents, l as assetUrl, o as withoutUnsubscribeRow, t as BRAND_COMPONENT_CLASSES, u as checkAssetBase } from "./brand-C0MKTwmX.js";
+import { a as lowerProject, d as resolveFromDirectory, f as resolveThemeImports, i as completed, l as Findings, n as introducedProfileErrors, r as loadProject, t as checkStaticProfile, u as projectDirectory } from "./profile-PUfi3GPH.js";
+import { c as checkAssetBase, i as withoutUnsubscribeRow, l as isAssetPath, n as brandComponents, o as assetEntry, s as assetUrl, t as BRAND_COMPONENT_CLASSES } from "./brand-DTctcDmf.js";
 import { t as EmailCompileError } from "./diagnostics-CnKFefKz.js";
-import { n as compileEmail, r as renderEmailContent } from "./render-BQmfh94k.js";
+import { n as compileEmail, r as renderEmailContent } from "./render-D2ht57ZZ.js";
 import { caniemail, parseHtml, rawData } from "caniemail";
 import { generate, ident, parse, walk } from "css-tree";
 import { parse as parse$1 } from "@babel/parser";
@@ -869,7 +869,7 @@ const compileTailwind = async (candidates, options = {}, imports = { stylesheets
 				base,
 				content: builtIn
 			});
-			if (/^samva:brand(?:\/|$)/.test(id)) {
+			if (parseBrandSpecifier(id, imports.brandPlugin) !== void 0) {
 				if (imports.brandCss === void 0) throw new TypeError(`${id} has no brand in this build`);
 				return Promise.resolve({
 					path: id,
@@ -1047,12 +1047,12 @@ const readFile = async (id, source, options, assets) => {
 };
 /** The Tailwind sheet's stylesheet origin. */
 const TAILWIND_ORIGIN = ".samva-tailwind.css";
-/** `samva:brand` / `samva:brand/<slug>` as a module specifier in an import or export. */
-const BRAND_MODULE_SPECIFIER = /(\b(?:from|import)\s*\(?\s*)(["'])(samva:brand(?:\/[a-z0-9](?:[a-z0-9-]{0,62}[a-z0-9])?)?)\2/g;
-/** The `samva:brand` specifiers a script imports, with where it asks for each. */
-const scriptBrandImports = (path, source) => {
+/** The brand specifier, bare or with a slug, as a module specifier in an import or export. */
+const brandModuleSpecifier = (plugin) => new RegExp(`(\\b(?:from|import)\\s*\\(?\\s*)(["'])(${brandSpecifierPattern(plugin)})\\2`, "g");
+/** The brand specifiers a script imports, with where it asks for each. */
+const scriptBrandImports = (path, source, plugin) => {
 	const lines = buildLineMap(source);
-	return [...source.matchAll(BRAND_MODULE_SPECIFIER)].map((match) => {
+	return [...source.matchAll(brandModuleSpecifier(plugin))].map((match) => {
 		const at = lineColumn(lines, match.index + match[1].length);
 		return {
 			specifier: match[3],
@@ -1065,15 +1065,15 @@ const scriptBrandImports = (path, source) => {
 	});
 };
 /**
-* The `samva:brand` specifier a project imports — from its theme's `@import`s
-* or its TSX — so a host can fetch that brand before it compiles. `undefined`
-* when the project imports no brand. A project that names two brands gets the
+* The brand specifier a project imports — from its theme's `@import`s or its
+* TSX — so a host can fetch that brand before it compiles. `undefined` when
+* the project imports no brand. A project that names two brands gets the
 * first here and a refusal from the compile.
 */
-const projectBrandSpecifier = (files, themePath = "theme.css") => {
+const projectBrandSpecifier = (files, themePath = "theme.css", brandPlugin = samvaBrandPlugin) => {
 	const theme = files[themePath];
-	const fromTheme = typeof theme === "string" ? resolveThemeImports(themePath, theme, files).brandSpecifiers : [];
-	const fromScripts = Object.keys(files).sort().filter((path) => SCRIPT.test(path) && typeof files[path] === "string").flatMap((path) => scriptBrandImports(path, files[path])).map((request) => request.specifier);
+	const fromTheme = typeof theme === "string" ? resolveThemeImports(themePath, theme, files, brandPlugin).brandSpecifiers : [];
+	const fromScripts = Object.keys(files).sort().filter((path) => SCRIPT.test(path) && typeof files[path] === "string").flatMap((path) => scriptBrandImports(path, files[path], brandPlugin)).map((request) => request.specifier);
 	return [...fromTheme, ...fromScripts][0];
 };
 /**
@@ -1083,11 +1083,11 @@ const projectBrandSpecifier = (files, themePath = "theme.css") => {
 * outside its grammar refuses the whole compile: a theme that silently lost a
 * layer would ship the wrong look.
 */
-const resolveTheme = (files, tailwind, brand) => {
+const resolveTheme = (files, tailwind, brand, brandPlugin) => {
 	const refusals = [];
 	const css = tailwind?.css;
 	const themePath = tailwind?.cssPath ?? "theme.css";
-	const imports = css === void 0 ? void 0 : resolveThemeImports(themePath, css, files);
+	const imports = css === void 0 ? void 0 : resolveThemeImports(themePath, css, files, brandPlugin);
 	refusals.push(...imports?.diagnostics ?? []);
 	const themeOrigin = {
 		fileName: themePath,
@@ -1098,7 +1098,7 @@ const resolveTheme = (files, tailwind, brand) => {
 		specifier,
 		origin: themeOrigin
 	}));
-	const scriptRequests = Object.keys(files).sort().filter((path) => SCRIPT.test(path) && typeof files[path] === "string").flatMap((path) => scriptBrandImports(path, files[path]));
+	const scriptRequests = Object.keys(files).sort().filter((path) => SCRIPT.test(path) && typeof files[path] === "string").flatMap((path) => scriptBrandImports(path, files[path], brandPlugin));
 	const requests = [...cssRequests, ...scriptRequests];
 	const specifiers = [...new Set(requests.map((request) => request.specifier))];
 	if (specifiers.length > 1) refusals.push({
@@ -1109,7 +1109,7 @@ const resolveTheme = (files, tailwind, brand) => {
 	});
 	else if (specifiers.length === 1) {
 		const specifier = specifiers[0];
-		const named = parseBrandSpecifier(specifier)?.slug;
+		const named = parseBrandSpecifier(specifier, brandPlugin)?.slug;
 		const origins = [requests[0].origin];
 		if (brand === void 0) refusals.push({
 			code: "brand-unavailable",
@@ -1150,6 +1150,7 @@ const resolveTheme = (files, tailwind, brand) => {
 	return {
 		stylesheets: imports?.stylesheets ?? /* @__PURE__ */ new Map(),
 		brandCss,
+		brandPlugin,
 		brandModule: scriptRequests.length > 0 ? brand : void 0
 	};
 };
@@ -1160,7 +1161,7 @@ const transformProject = async (files, options) => {
 	const stylesheets = /* @__PURE__ */ new Map();
 	const classes = /* @__PURE__ */ new Set();
 	const wanted = options.tailwind === false ? void 0 : options.tailwind ?? {};
-	const theme = resolveTheme(files, wanted, options.brand);
+	const theme = resolveTheme(files, wanted, options.brand, options.brandPlugin ?? samvaBrandPlugin);
 	if (theme.brandModule !== void 0) for (const name of BRAND_COMPONENT_CLASSES) classes.add(name);
 	const paths = Object.keys(files).sort();
 	const binaries = new Map(await Promise.all(paths.filter(isAssetPath).map(async (path) => [path, await readFile(path, files[path], options)])));
@@ -1194,12 +1195,12 @@ const transformProject = async (files, options) => {
 //#endregion
 //#region src/email/brand-footer.ts
 /** The brand theme as Tailwind compiles it; a theme outside the grammar is a compile refusal. */
-const brandTheme = (brand) => {
+const brandTheme = (brand, plugin) => {
 	const parsed = parseBrandCss(brand.css);
 	if (parsed.isErr()) throw new EmailCompileError({ diagnostics: parsed.error.map((finding) => ({
 		code: finding.code,
 		severity: "error",
-		message: `samva:brand: ${finding.message}`,
+		message: `${plugin.specifier}: ${finding.message}`,
 		origins: []
 	})) });
 	return brandTailwindCss(parsed.value);
@@ -1208,22 +1209,23 @@ const brandTheme = (brand) => {
 * Render `BrandFooter` against a brand on its own, for the send path to
 * append to a message whose template renders no footer of its own. It
 * compiles the same component, styled by the same brand theme, a template
-* would get from `samva:brand`. Without `unsubscribe` the unsubscribe row is
+* would get from its brand import. Without `unsubscribe` the unsubscribe row is
 * left out.
 */
 const renderBrandFooter = async (brand, options) => {
-	const tailwind = await compileTailwind(BRAND_COMPONENT_CLASSES, { css: brandTheme(brand) });
-	const node = brandComponents(brand).BrandFooter({});
+	const plugin = options.brandPlugin ?? samvaBrandPlugin;
+	const tailwind = await compileTailwind(BRAND_COMPONENT_CLASSES, { css: brandTheme(brand, plugin) });
+	const node = brandComponents(brand, plugin).BrandFooter({});
 	if (node === null) return {
 		html: "",
 		text: ""
 	};
-	const styled = applyStylesheet(node, parseStylesheet(tailwind.css, { origin: "samva:brand" }));
-	const compiled = compileEmail(styled.tree);
+	const styled = applyStylesheet(node, parseStylesheet(tailwind.css, { origin: plugin.specifier }));
+	const compiled = compileEmail(styled.tree, { brandPlugin: plugin });
 	const rendered = options.unsubscribe ? compiled : withoutUnsubscribeRow({
 		html: compiled.html,
 		text: compiled.text
-	});
+	}, plugin);
 	const text = (rendered.text ?? "").trim();
 	return {
 		html: rendered.html ?? "",
@@ -1231,26 +1233,27 @@ const renderBrandFooter = async (brand, options) => {
 	};
 };
 /**
-* Render content against a brand as a project whose `theme.css` is
-* `@import "samva:brand";` renders it: Tailwind compiles the brand theme for
+* Render content against a brand as a project whose `theme.css` imports only
+* the brand renders it: Tailwind compiles the brand theme for
 * the classes the content names, `BrandLogo` and `BrandFooter` are bound to the
 * brand, and the render inlines the result. A brand preview renders through
 * this, so it shows what a template importing the brand compiles to.
 */
-const renderBrandSample = async (brand, sample) => {
-	const tailwind = await compileTailwind([...BRAND_COMPONENT_CLASSES, ...sample.classes], { css: "@import \"samva:brand\";" }, {
+const renderBrandSample = async (brand, sample, brandPlugin = samvaBrandPlugin) => {
+	const tailwind = await compileTailwind([...BRAND_COMPONENT_CLASSES, ...sample.classes], { css: `@import ${JSON.stringify(brandPlugin.specifier)};` }, {
 		stylesheets: /* @__PURE__ */ new Map(),
-		brandCss: brandTheme(brand)
+		brandCss: brandTheme(brand, brandPlugin),
+		brandPlugin
 	});
-	const components = brandComponents(brand);
-	return renderEmailContent(parseStylesheet(tailwind.css, { origin: "samva:brand" }), () => sample.render(components));
+	const components = brandComponents(brand, brandPlugin);
+	return renderEmailContent(parseStylesheet(tailwind.css, { origin: brandPlugin.specifier }), () => sample.render(components), { brandPlugin });
 };
 //#endregion
 //#region src/sml/compile.ts
 /** Compile a project's entry template to IR without evaluating any of it. */
 const compileTemplate = async (options) => {
 	const findings = new Findings();
-	const project = loadProject(options.files, options.entry, findings);
+	const project = loadProject(options.files, options.entry, findings, { brandPlugin: options.brandPlugin ?? samvaBrandPlugin });
 	if (project === void 0) return completed(findings, void 0);
 	let transformed;
 	try {
@@ -1307,6 +1310,6 @@ const checkTemplateCompatibility = (ir, fixtures, options = {}) => {
 	return findings;
 };
 //#endregion
-export { BRAND_SPECIFIER, COMPATIBILITY_PROVENANCE, EMAIL_CLIENT_MATRIX, ESSENTIAL_CONSTRUCTS, TAILWIND_VERSION, TEMPLATE_NAME_PATTERN, applyStylesheet, checkEmailCompatibility, checkStaticProfile, checkTemplateCompatibility, classListOf, compileSelector, compileTailwind, compileTemplate, discoverClassCandidates, downlevelColors, downlevelMediaQuery, finalizeValue, foldCalc, formatColor, hasBlockingCompatibility, introducedProfileErrors, matchesSelector, parseBrandSpecifier, parseColor, parseStylesheet, projectBrandSpecifier, renderBrandFooter, renderBrandSample, renderHeadCss, resolveVariables, transformProject, unknownCoverage };
+export { COMPATIBILITY_PROVENANCE, EMAIL_CLIENT_MATRIX, ESSENTIAL_CONSTRUCTS, TAILWIND_VERSION, TEMPLATE_NAME_PATTERN, applyStylesheet, checkEmailCompatibility, checkStaticProfile, checkTemplateCompatibility, classListOf, compileSelector, compileTailwind, compileTemplate, discoverClassCandidates, downlevelColors, downlevelMediaQuery, finalizeValue, foldCalc, formatColor, hasBlockingCompatibility, introducedProfileErrors, matchesSelector, parseBrandSpecifier, parseColor, parseStylesheet, projectBrandSpecifier, renderBrandFooter, renderBrandSample, renderHeadCss, resolveVariables, transformProject, unknownCoverage };
 
 //# sourceMappingURL=compiler.js.map

package/dist/components-Bl6DT21n.js

@@ -0,0 +1,275 @@
+import { i as escapeText, r as escapeAttribute } from "./html-DjPxwjLi.js";
+import { a as jsx, c as rawMarkup, l as reportEmailDiagnostic, n as Fragment, s as normalizeChildren, t as EmailNode } from "./jsx-runtime-CBlexoeR.js";
+//#region src/email/components.ts
+/** Marks the hidden preview block so the renderer can read it back and the text lane can keep it. */
+const PREHEADER_ATTRIBUTE = "data-samva-preheader";
+const PREHEADER_PADDING_ATTRIBUTE = "data-samva-preheader-padding";
+const PREHEADER_TARGET_LENGTH = 200;
+const PREHEADER_PADDING = "\xA0‌​‍‎‏";
+const presentation = (table, row, rowProps = {}) => jsx("table", {
+	role: "presentation",
+	border: 0,
+	cellpadding: 0,
+	cellspacing: 0,
+	...table,
+	children: jsx("tbody", { children: jsx("tr", {
+		...rowProps,
+		children: row
+	}) })
+});
+/** The hidden inbox preview block. Padding characters stop the client borrowing body copy. */
+const preheaderNode = (text) => jsx("div", {
+	[PREHEADER_ATTRIBUTE]: text,
+	style: {
+		display: "none",
+		overflow: "hidden",
+		lineHeight: "1px",
+		opacity: 0,
+		maxHeight: 0,
+		maxWidth: 0
+	},
+	children: [text, text.length >= PREHEADER_TARGET_LENGTH ? null : jsx("div", {
+		[PREHEADER_PADDING_ATTRIBUTE]: true,
+		children: PREHEADER_PADDING.repeat(Math.ceil((PREHEADER_TARGET_LENGTH - text.length) / 7))
+	})]
+});
+/** Document shell: the head every target client needs, plus the body content cell. */
+const Email = ({ className, lang = "en", dir = "ltr", title, backgroundColor, style, children }) => jsx("html", {
+	lang,
+	dir,
+	xmlns: "http://www.w3.org/1999/xhtml",
+	"xmlns:o": "urn:schemas-microsoft-com:office:office",
+	children: [jsx("head", { children: [
+		jsx("meta", { charset: "utf-8" }),
+		jsx("meta", {
+			"http-equiv": "Content-Type",
+			content: "text/html; charset=UTF-8"
+		}),
+		jsx("meta", {
+			name: "viewport",
+			content: "width=device-width, initial-scale=1"
+		}),
+		jsx("meta", { name: "x-apple-disable-message-reformatting" }),
+		jsx("meta", {
+			name: "color-scheme",
+			content: "light dark"
+		}),
+		jsx("meta", {
+			name: "supported-color-schemes",
+			content: "light dark"
+		}),
+		title === void 0 ? null : jsx("title", { children: title }),
+		rawMarkup("<!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->")
+	] }), jsx("body", {
+		style: {
+			margin: 0,
+			padding: 0,
+			...backgroundColor === void 0 ? {} : { backgroundColor }
+		},
+		children: [presentation({
+			align: "center",
+			width: "100%",
+			...backgroundColor === void 0 ? {} : { bgcolor: backgroundColor }
+		}, jsx("td", {
+			className,
+			...style === void 0 ? {} : { style },
+			children
+		}))]
+	})]
+});
+/** A full-width band of content, as the single-cell table every client agrees on. */
+const Section = ({ className, align = "center", width = "100%", bgcolor, style, tableStyle, children }) => presentation({
+	align,
+	width,
+	...bgcolor === void 0 ? {} : { bgcolor },
+	...tableStyle === void 0 ? {} : { style: tableStyle }
+}, jsx("td", {
+	className,
+	...style === void 0 ? {} : { style },
+	children
+}));
+/** The equal share of a row that each of `count` cells takes, whole percent rounded down. */
+const equalColumnWidth = (count) => `${Math.floor(100 / count)}%`;
+/** Give a `Column` that states no width its equal share, keeping the primitive's attribute order. */
+const withColumnWidth = (node, width) => {
+	if (node.type === "Fragment") return EmailNode.Fragment({ children: node.children.map((child) => withColumnWidth(child, width)) });
+	if (node.type !== "Element" || node.tag !== "td" || node.props.width !== void 0) return node;
+	const props = {};
+	for (const [key, value] of Object.entries(node.props)) {
+		if (key === "style") props.width = width;
+		props[key] = value;
+	}
+	if (props.width === void 0) props.width = width;
+	return EmailNode.Element({
+		...node,
+		props
+	});
+};
+/**
+* A row of side-by-side `Column`s. No flex or grid conversion happens here. With `each` it repeats
+* its cells over a list, `per` to a row, and splits the row equally between cells that state no
+* width.
+*/
+const Columns = ({ className, align = "center", width = "100%", style, each, per, children }) => {
+	const table = {
+		className,
+		align,
+		width,
+		...style === void 0 ? {} : { style }
+	};
+	if (each === void 0 || typeof children !== "function") return presentation(table, children, { style: { width: "100%" } });
+	if (per !== void 0 && (!Number.isInteger(per) || per < 1)) reportEmailDiagnostic({
+		code: "invalid-columns-per",
+		severity: "error",
+		message: "<Columns per> must be a positive integer."
+	});
+	const size = per !== void 0 && Number.isInteger(per) && per >= 1 ? per : void 0;
+	const chunks = [];
+	if (size === void 0) chunks.push(each);
+	else for (let at = 0; at < each.length; at += size) chunks.push(each.slice(at, at + size));
+	const share = equalColumnWidth(size ?? Math.max(each.length, 1));
+	return jsx(Fragment, { children: chunks.map((chunk) => presentation(table, chunk.flatMap((item, index) => normalizeChildren(children(item, index)).map((cell) => withColumnWidth(cell, share))), { style: { width: "100%" } })) });
+};
+/** One cell of a `Columns` row. */
+const Column = ({ className, align, valign, width, style, children }) => jsx("td", {
+	className,
+	...align === void 0 ? {} : { align },
+	...valign === void 0 ? {} : { valign },
+	...width === void 0 ? {} : { width },
+	...style === void 0 ? {} : { style },
+	children
+});
+const DEFAULT_BUTTON_FONT = "Helvetica, Arial, sans-serif";
+/** Average advance of a bold sans-serif glyph, as a fraction of the font size. */
+const BOLD_GLYPH_ADVANCE = .6;
+const invalidButtonNumber = (name) => reportEmailDiagnostic({
+	code: "invalid-button-number",
+	severity: "error",
+	message: `<Button ${name}> must be a finite number.`
+});
+const buttonNumber = (name, value, fallback) => {
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+	invalidButtonNumber(name);
+	return fallback;
+};
+const optionalButtonNumber = (name, value) => {
+	if (value === void 0) return void 0;
+	if (typeof value === "number" && Number.isFinite(value)) return value;
+	invalidButtonNumber(name);
+};
+const optionalPositiveButtonNumber = (name, value) => {
+	if (value === void 0) return void 0;
+	if (typeof value === "number" && Number.isFinite(value) && value > 0) return value;
+	reportEmailDiagnostic({
+		code: "invalid-button-number",
+		severity: "error",
+		message: `<Button ${name}> must be a positive finite number.`
+	});
+};
+/** A link styled as a button, with a VML fallback so classic Outlook draws the shape. */
+const Button = ({ className, href, width, height, paddingX = 16, backgroundColor = "#000000", color = "#ffffff", borderRadius = 0, borderColor, borderWidth = 0, fontSize = 16, fontFamily = DEFAULT_BUTTON_FONT, align = "left", style, children }) => {
+	const safeWidth = optionalButtonNumber("width", width);
+	const safeHeight = optionalPositiveButtonNumber("height", height);
+	const safePaddingX = buttonNumber("paddingX", paddingX, 16);
+	const safeBorderRadius = buttonNumber("borderRadius", borderRadius, 0);
+	const safeBorderWidth = buttonNumber("borderWidth", borderWidth, 0);
+	const safeFontSize = buttonNumber("fontSize", fontSize, 16);
+	const label = typeof children === "string" ? children : void 0;
+	const fallback = safeHeight !== void 0 && label !== void 0;
+	if (!fallback) reportEmailDiagnostic({
+		code: "button-outlook-fallback",
+		severity: "warning",
+		message: "<Button> draws its classic Outlook shape from VML, which needs a height and a plain string label. Without both, classic Windows Outlook shows an unstyled link.",
+		clients: ["outlook-windows"]
+	});
+	const arcsize = safeHeight === void 0 ? 0 : Math.round(safeBorderRadius / safeHeight * 100);
+	const fallbackWidth = safeWidth ?? Math.ceil((label?.length ?? 0) * safeFontSize * BOLD_GLYPH_ADVANCE) + 2 * safePaddingX;
+	return presentation({
+		width: "100%",
+		style: { borderCollapse: "collapse" }
+	}, jsx("td", {
+		align,
+		children: [fallback ? rawMarkup(`<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${escapeAttribute(href)}" style="height:${safeHeight}px;v-text-anchor:middle;width:${fallbackWidth}px;" arcsize="${arcsize}%" ${borderColor === void 0 ? "stroke=\"false\"" : `strokecolor="${escapeAttribute(borderColor)}" strokeweight="${safeBorderWidth}px"`} fillcolor="${escapeAttribute(backgroundColor)}"><w:anchorlock/><center style="color:${escapeAttribute(color)};font-family:${escapeAttribute(fontFamily)};font-size:${safeFontSize}px;font-weight:bold;">${escapeText(label)}</center></v:roundrect><![endif]-->`) : null, jsx("a", {
+			className,
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			style: {
+				backgroundColor,
+				color,
+				borderRadius: `${safeBorderRadius}px`,
+				display: "inline-block",
+				fontFamily,
+				fontSize: `${safeFontSize}px`,
+				fontWeight: "bold",
+				lineHeight: safeHeight === void 0 ? "120%" : `${safeHeight - 2 * safeBorderWidth}px`,
+				textAlign: "center",
+				textDecoration: "none",
+				...safeWidth === void 0 ? { padding: `0 ${safePaddingX}px` } : {
+					width: `${safeWidth}px`,
+					maxWidth: "100%"
+				},
+				...borderColor === void 0 ? {} : { border: `${safeBorderWidth}px solid ${borderColor}` },
+				...fallback ? { msoHide: "all" } : {},
+				...style
+			},
+			children
+		})]
+	}));
+};
+/** Vertical space that survives clients which collapse margins. */
+const Spacer = ({ height }) => presentation({ width: "100%" }, jsx("td", {
+	height,
+	style: {
+		height: `${height}px`,
+		lineHeight: `${height}px`,
+		fontSize: "1px"
+	},
+	children: "​"
+}));
+/** A horizontal rule drawn as a cell border, which every target client renders. */
+const Divider = ({ className, color = "#e5e7eb", thickness = 1, style }) => presentation({ width: "100%" }, jsx("td", {
+	className,
+	style: {
+		borderTop: `${thickness}px solid ${color}`,
+		fontSize: "1px",
+		lineHeight: "1px",
+		...style
+	},
+	children: "​"
+}));
+/** An image with the width/height attributes Outlook sizes from before CSS applies. */
+const Image = ({ className, src, alt, width, height, align, style }) => jsx("img", {
+	className,
+	src,
+	alt,
+	border: 0,
+	...width === void 0 ? {} : { width },
+	...height === void 0 ? {} : { height },
+	...align === void 0 ? {} : { align },
+	style: {
+		display: "block",
+		outline: "none",
+		border: "none",
+		textDecoration: "none",
+		maxWidth: "100%",
+		...style
+	}
+});
+/** A text link that opens outside the client and cannot reach back at the opener. */
+const Link = ({ className, href, target = "_blank", rel = "noopener noreferrer", style, children }) => jsx("a", {
+	className,
+	href,
+	target,
+	rel,
+	style: {
+		color: "#067df7",
+		textDecoration: "none",
+		...style
+	},
+	children
+});
+//#endregion
+export { Email as a, PREHEADER_ATTRIBUTE as c, equalColumnWidth as d, preheaderNode as f, Divider as i, Section as l, Column as n, Image as o, Columns as r, Link as s, Button as t, Spacer as u };
+
+//# sourceMappingURL=components-Bl6DT21n.js.map

package/dist/diagnostics.d.ts

@@ -153,7 +153,7 @@ declare const DIAGNOSTIC_CODES: {
   };
   readonly "reserved-attribute": {
     readonly summary: "An attribute is written only by a brand component.";
-    readonly fix: "Render BrandFooter from samva:brand instead of marking an element as the footer.";
+    readonly fix: "Render BrandFooter from the brand import instead of marking an element as the footer.";
   };
   readonly "dynamic-class": {
     readonly summary: "A class name is built at run time, and Tailwind cannot see it.";
@@ -181,7 +181,7 @@ declare const DIAGNOSTIC_CODES: {
   };
   readonly "unknown-component": {
     readonly summary: "A component the profile cannot read.";
-    readonly fix: "Import components from @samva/markup/email, samva:brand, or the project.";
+    readonly fix: "Import components from @samva/markup/email, the brand import, or the project.";
   };
   readonly "dynamic-numeric-prop": {
     readonly summary: "A prop that sizes layout at compile time is not a number literal.";
@@ -328,7 +328,7 @@ declare const DIAGNOSTIC_CODES: {
     readonly fix: "Use an https URL, an absolute path, or a relative path.";
   };
   readonly "brand-unavailable": {
-    readonly summary: "The build has no brand to resolve a samva:brand import.";
+    readonly summary: "The build has no brand to resolve a brand import.";
     readonly fix: "Create or select the brand the import names.";
   };
   readonly "brand-import-conflict": {

package/dist/diagnostics.js

@@ -151,7 +151,7 @@ const DIAGNOSTIC_CODES = codes({
 	},
 	"reserved-attribute": {
 		summary: "An attribute is written only by a brand component.",
-		fix: "Render BrandFooter from samva:brand instead of marking an element as the footer."
+		fix: "Render BrandFooter from the brand import instead of marking an element as the footer."
 	},
 	"dynamic-class": {
 		summary: "A class name is built at run time, and Tailwind cannot see it.",
@@ -179,7 +179,7 @@ const DIAGNOSTIC_CODES = codes({
 	},
 	"unknown-component": {
 		summary: "A component the profile cannot read.",
-		fix: "Import components from @samva/markup/email, samva:brand, or the project."
+		fix: "Import components from @samva/markup/email, the brand import, or the project."
 	},
 	"dynamic-numeric-prop": {
 		summary: "A prop that sizes layout at compile time is not a number literal.",
@@ -326,7 +326,7 @@ const DIAGNOSTIC_CODES = codes({
 		fix: "Use an https URL, an absolute path, or a relative path."
 	},
 	"brand-unavailable": {
-		summary: "The build has no brand to resolve a samva:brand import.",
+		summary: "The build has no brand to resolve a brand import.",
 		fix: "Create or select the brand the import names."
 	},
 	"brand-import-conflict": {

package/dist/edit.js

@@ -1,7 +1,7 @@
 import { n as isObject } from "./guards-eV1qLbf2.js";
 import { d as completeJsxSourceLocation, u as JSX_SOURCE_LOCATION_PROP } from "./jsx-runtime-CBlexoeR.js";
 import { t as buildLineMap } from "./diagnostic-model-DJtqbETd.js";
-import { c as WHATSAPP_HEADER_TYPES, n as introducedProfileErrors, o as SMS_CATEGORIES, s as WHATSAPP_CATEGORIES, t as checkStaticProfile } from "./profile-pWGtWZXF.js";
+import { c as WHATSAPP_HEADER_TYPES, n as introducedProfileErrors, o as SMS_CATEGORIES, s as WHATSAPP_CATEGORIES, t as checkStaticProfile } from "./profile-PUfi3GPH.js";
 import { parse } from "@babel/parser";
 //#region src/source-edit.ts
 const node = (value) => isObject(value) && "type" in value && typeof value.type === "string" && "start" in value && typeof value.start === "number" && "end" in value && typeof value.end === "number";

package/dist/email.js

@@ -1,2 +1,2 @@
-import { a as Email, c as PREHEADER_ATTRIBUTE, d as equalColumnWidth, f as preheaderNode, 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-BZCqegS8.js";
+import { a as Email, c as PREHEADER_ATTRIBUTE, d as equalColumnWidth, f as preheaderNode, 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-Bl6DT21n.js";
 export { Button, Column, Columns, Divider, Email, Image, Link, PREHEADER_ATTRIBUTE, Section, Spacer, equalColumnWidth, preheaderNode };