@samva/markup 0.13.0 → 0.14.0

package/dist/components-CwWSoG5N.js

@@ -0,0 +1,401 @@
+import { i as escapeText, r as escapeAttribute } from "./html-eOZfDwVf.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/primitive-css.ts
+/** The classes the primitives put on the elements they generate. */
+const PRIMITIVE_CLASSES = {
+	email: "sml-email",
+	button: "sml-button",
+	link: "sml-link",
+	divider: "sml-divider",
+	stack: "sml-stack"
+};
+const PRIMITIVE_CSS = `@layer components {
+  .${PRIMITIVE_CLASSES.email} {
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .${PRIMITIVE_CLASSES.button} {
+    background-color: var(--color-primary);
+    color: var(--color-primary-foreground);
+    font-family: var(--font-sans);
+    border-radius: var(--radius);
+  }
+  .${PRIMITIVE_CLASSES.link} {
+    color: var(--color-primary);
+    text-decoration: underline;
+  }
+  .${PRIMITIVE_CLASSES.divider} {
+    border-top: 1px solid var(--color-border);
+  }
+}
+@media only screen and (max-width: 599px) {
+  .${PRIMITIVE_CLASSES.stack} {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+}
+`;
+//#endregion
+//#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
+	}) })
+});
+/** A primitive's own class, then the author's. */
+const classNames = (own, authored) => authored === void 0 || authored.trim() === "" ? own : `${own} ${authored}`;
+const optionalNumber = (component, name, value, bounds = {}) => {
+	if (value === void 0) return void 0;
+	if (typeof value === "number" && Number.isFinite(value) && (bounds.min === void 0 || value >= bounds.min)) return value;
+	reportEmailDiagnostic({
+		code: "invalid-number-prop",
+		severity: "error",
+		message: `<${component} ${name}> must be a finite number${bounds.min === void 0 ? "" : ` of at least ${bounds.min}`}.`
+	});
+};
+/** 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, a body painted with the page color, and
+* the content cell. The content cell sets the theme's text color and body font
+* (`--color-foreground`, `--font-sans`) for everything inside it, and pads the content off the
+* screen edge (`gutter`).
+*/
+const Email = ({ className, lang = "en", dir = "ltr", title, backgroundColor = "var(--color-background)", gutter, style, children }) => {
+	const safeGutter = optionalNumber("Email", "gutter", gutter, { min: 0 });
+	const cellStyle = {
+		...safeGutter === void 0 ? {} : {
+			paddingLeft: `${safeGutter}px`,
+			paddingRight: `${safeGutter}px`
+		},
+		...style
+	};
+	return 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,
+				width: "100%",
+				backgroundColor
+			},
+			children: [presentation({
+				align: "center",
+				width: "100%",
+				bgcolor: backgroundColor,
+				style: {
+					width: "100%",
+					backgroundColor
+				}
+			}, jsx("td", {
+				className: classNames(PRIMITIVE_CLASSES.email, className),
+				...Object.keys(cellStyle).length === 0 ? {} : { style: cellStyle },
+				children
+			}))]
+		})]
+	});
+};
+/** A pixel width as `width: 100%` capped at it, so a fixed-width table still fits a phone. */
+const fluidWidth = (width) => {
+	const pixels = typeof width === "number" ? width : /^\d+(?:\.\d+)?(?:px)?$/.test(width) ? width : void 0;
+	if (pixels === void 0) return void 0;
+	return {
+		width: "100%",
+		maxWidth: typeof pixels === "number" ? `${pixels}px` : `${Number.parseFloat(pixels)}px`
+	};
+};
+/** 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 }) => {
+	const fluid = fluidWidth(width);
+	const table = fluid === void 0 ? tableStyle : {
+		...fluid,
+		...tableStyle
+	};
+	return presentation({
+		align,
+		width,
+		...bgcolor === void 0 ? {} : { bgcolor },
+		...table === void 0 ? {} : { style: table }
+	}, 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,
+* and the stacking class when its row stacks.
+*/
+const withColumnLayout = (node, width, stack) => {
+	if (node.type === "Fragment") return EmailNode.Fragment({ children: node.children.map((child) => withColumnLayout(child, width, stack)) });
+	if (node.type !== "Element" || node.tag !== "td") return node;
+	const props = {};
+	const sized = width === void 0 || node.props.width !== void 0;
+	for (const [key, value] of Object.entries(node.props)) {
+		if (key === "style" && !sized) props.width = width;
+		props[key] = value;
+	}
+	if (!sized && props.width === void 0) props.width = width;
+	if (stack) props.className = classNames(PRIMITIVE_CLASSES.stack, typeof props.className === "string" ? props.className : void 0);
+	return EmailNode.Element({
+		...node,
+		props
+	});
+};
+/** The cell between two `Column`s: `gap` wide in a row, `gap` tall once the row stacks. */
+const gapCell = (gap, stack) => jsx("td", {
+	...stack ? { className: PRIMITIVE_CLASSES.stack } : {},
+	width: gap,
+	style: {
+		width: `${gap}px`,
+		...stack ? { height: `${gap}px` } : {},
+		fontSize: "1px",
+		lineHeight: "1px"
+	},
+	children: "​"
+});
+/** Cells with a gap cell between each two that render something. */
+const withGaps = (cells, gap, stack) => {
+	if (gap === void 0 || gap === 0) return cells;
+	const output = [];
+	for (const cell of cells) {
+		if (cell.type === "Text" && cell.value.trim() === "") {
+			output.push(cell);
+			continue;
+		}
+		if (output.some((placed) => placed.type !== "Text" || placed.value.trim() !== "")) output.push(gapCell(gap, stack));
+		output.push(cell);
+	}
+	return output;
+};
+/**
+* A row of side-by-side `Column`s that stacks on a narrow viewport (`stack`). 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, stack = true, gap, children }) => {
+	const table = {
+		className,
+		align,
+		width,
+		...style === void 0 ? {} : { style }
+	};
+	const safeGap = optionalNumber("Columns", "gap", gap, { min: 0 });
+	if (each === void 0 || typeof children !== "function") return presentation(table, withGaps(normalizeChildren(children).map((cell) => withColumnLayout(cell, void 0, stack)), safeGap, stack), { 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, withGaps(chunk.flatMap((item, index) => normalizeChildren(children(item, index)).map((cell) => withColumnLayout(cell, share, stack))), safeGap, stack), { 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
+});
+/** 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. Its fill,
+* label color, font and corners default to the theme (`bg-primary`, `text-primary-foreground`,
+* `font-sans`, `rounded`), so a class on the button restyles it. Classic Outlook draws the VML
+* shape from the props alone: set `backgroundColor`, `color` and `borderRadius` when the button
+* does not use the theme's primary fill.
+*/
+const Button = ({ className, href, width, height, paddingX = 16, backgroundColor, color, borderRadius, borderColor, borderWidth = 0, fontSize = 16, fontFamily, align = "left", style, children }) => {
+	const safeWidth = optionalButtonNumber("width", width);
+	const safeHeight = optionalPositiveButtonNumber("height", height);
+	const safePaddingX = buttonNumber("paddingX", paddingX, 16);
+	const safeBorderRadius = optionalButtonNumber("borderRadius", borderRadius);
+	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 ?? 0) / safeHeight * 100);
+	const fallbackWidth = safeWidth ?? Math.ceil((label?.length ?? 0) * safeFontSize * BOLD_GLYPH_ADVANCE) + 2 * safePaddingX;
+	const fill = backgroundColor ?? "var(--color-primary)";
+	const ink = color ?? "var(--color-primary-foreground)";
+	const family = fontFamily ?? "var(--font-sans)";
+	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(fill)}"><w:anchorlock/><center style="color:${escapeAttribute(ink)};font-family:${escapeAttribute(family)};font-size:${safeFontSize}px;font-weight:bold;">${escapeText(label)}</center></v:roundrect><![endif]-->`) : null, jsx("a", {
+			className: classNames(PRIMITIVE_CLASSES.button, className),
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			style: {
+				...backgroundColor === void 0 ? {} : { backgroundColor },
+				...color === void 0 ? {} : { color },
+				...safeBorderRadius === void 0 ? {} : { borderRadius: `${safeBorderRadius}px` },
+				display: "inline-block",
+				...fontFamily === void 0 ? {} : { 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. It defaults to a
+* 1px line in the theme's `--color-border`.
+*/
+const Divider = ({ className, color, thickness, style }) => presentation({ width: "100%" }, jsx("td", {
+	className: classNames(PRIMITIVE_CLASSES.divider, className),
+	style: {
+		...color === void 0 && thickness === void 0 ? {} : { borderTop: `${thickness ?? 1}px solid ${color ?? "var(--color-border)"}` },
+		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. It defaults to
+* the theme's `--color-primary`, underlined.
+*/
+const Link = ({ className, href, target = "_blank", rel = "noopener noreferrer", style, children }) => jsx("a", {
+	className: classNames(PRIMITIVE_CLASSES.link, className),
+	href,
+	target,
+	rel,
+	...style === void 0 ? {} : { style },
+	children
+});
+//#endregion
+export { Email as a, PREHEADER_ATTRIBUTE as c, equalColumnWidth as d, preheaderNode as f, Divider as i, Section as l, PRIMITIVE_CSS as m, Column as n, Image as o, PRIMITIVE_CLASSES as p, Columns as r, Link as s, Button as t, Spacer as u };

package/dist/dark-scheme-CbCwGDWH.js

@@ -0,0 +1,12 @@
+//#region src/email/dark-scheme.ts
+/** The media query a theme's dark-mode block and every generated dark-mode rule sit in. */
+const DARK_SCHEME_MEDIA = "@media (prefers-color-scheme: dark)";
+const DARK_SCHEME_QUERY = /^(?:only\s+)?(?:screen\s+and\s+)?\(\s*prefers-color-scheme\s*:\s*dark\s*\)$/i;
+/** Whether a `@media` prelude is exactly the dark-mode query. */
+const isDarkSchemeQuery = (prelude) => DARK_SCHEME_QUERY.test(prelude.trim());
+/** Whether a rule's enclosing conditions are exactly the dark-mode query. */
+const isDarkSchemeCondition = (conditions) => conditions.length === 1 && /^@media\s/i.test(conditions[0]) && isDarkSchemeQuery(conditions[0].replace(/^@media\s+/i, ""));
+/** Whether any enclosing condition is the dark-mode query, as in a size query nested inside it. */
+const withinDarkScheme = (conditions) => conditions.some((condition) => isDarkSchemeCondition([condition]));
+//#endregion
+export { withinDarkScheme as i, isDarkSchemeCondition as n, isDarkSchemeQuery as r, DARK_SCHEME_MEDIA as t };

package/dist/{diagnostic-codes-DdZ4tka5.js → diagnostic-codes-UXwOO3A-.js}

@@ -230,10 +230,22 @@ const DIAGNOSTIC_CODES = codes({
 		summary: "<Columns per> is not a positive integer literal.",
 		fix: "Write per={2}."
 	},
+	"invalid-columns-gap": {
+		summary: "<Columns gap> is set on a Columns whose cells are repeated with each or rendered conditionally.",
+		fix: "Write each Column out unconditionally, or pad the cells instead of using gap."
+	},
+	"invalid-columns-stack": {
+		summary: "<Columns stack> is not a true or false literal.",
+		fix: "Write stack={false}, or leave it out to stack on narrow screens."
+	},
 	"invalid-button-number": {
 		summary: "A Button size prop is not a finite number.",
 		fix: "Pass a finite number."
 	},
+	"invalid-number-prop": {
+		summary: "A primitive's numeric prop, such as <Email gutter>, is not a finite number in range.",
+		fix: "Pass a finite number the message allows, for example gutter={16}."
+	},
 	"unsupported-element": {
 		summary: "An element outside the supported email vocabulary.",
 		fix: "Use an element from the contract's element table."
@@ -334,6 +346,16 @@ const DIAGNOSTIC_CODES = codes({
 		summary: "A custom property is redefined inside a conditional at-rule.",
 		fix: "Keep the override on a class rule."
 	},
+	"email-contrast": {
+		summary: "Text, or a filled button against its surroundings, falls below the contrast ratio in light or dark mode (below 1.5:1 a button is indistinguishable from its surface; WCAG 1.4.11 asks 3:1).",
+		fix: "Pair background and text tokens (bg-primary with text-primary-foreground), give the theme's dark-mode @theme a value for the token, or choose colors that reach the required ratio.",
+		upgrade: [
+			"Move the project's theme onto the theme vocabulary with one dark-mode block. In starter.css and theme.css, rename each color token to the vocabulary name for its role (reference.md, Theme): a page color to --color-background, the main text to --color-foreground, a surface to --color-card with --color-card-foreground, the brand or action color to --color-primary with --color-primary-foreground, subdued text to --color-muted-foreground, a highlight to --color-accent with --color-accent-foreground, rules to --color-border, body and heading fonts to --font-sans and --font-heading, and a corner radius to --radius. Keep every value.",
+			"Move each --color-<name>-dark value into @media (prefers-color-scheme: dark) { @theme { --color-<name>: <value>; } } under the renamed token, and delete the -dark tokens. In every template and partial, rename the utilities to match (bg-surface to bg-card, text-muted to text-muted-foreground, and so on) and delete each dark:…-dark class whose token now has a dark value; keep a dark: class only where it picks a different token in dark mode.",
+			"Then fix what email-contrast still reports at its location: pair each fill with its -foreground token, or give the dark block a value that reaches the ratio. Do not weaken the design to pass: keep the brand's colors and adjust the paired token.",
+			"Compile every entry and render every fixture in light and dark mode; confirm the light render is unchanged apart from fixes. Resolve errors before requesting one saved version for the whole project, approved by the user; do not publish."
+		].join("\n\n")
+	},
 	"email-font-fallback": {
 		summary: "A font stack names a project font without a generic fallback.",
 		fix: "End the stack with sans-serif, serif or monospace."

package/dist/diagnostics.d.ts

@@ -199,10 +199,22 @@ declare const DIAGNOSTIC_CODES: {
     readonly summary: "<Columns per> is not a positive integer literal.";
     readonly fix: "Write per={2}.";
   };
+  readonly "invalid-columns-gap": {
+    readonly summary: "<Columns gap> is set on a Columns whose cells are repeated with each or rendered conditionally.";
+    readonly fix: "Write each Column out unconditionally, or pad the cells instead of using gap.";
+  };
+  readonly "invalid-columns-stack": {
+    readonly summary: "<Columns stack> is not a true or false literal.";
+    readonly fix: "Write stack={false}, or leave it out to stack on narrow screens.";
+  };
   readonly "invalid-button-number": {
     readonly summary: "A Button size prop is not a finite number.";
     readonly fix: "Pass a finite number.";
   };
+  readonly "invalid-number-prop": {
+    readonly summary: "A primitive's numeric prop, such as <Email gutter>, is not a finite number in range.";
+    readonly fix: "Pass a finite number the message allows, for example gutter={16}.";
+  };
   readonly "unsupported-element": {
     readonly summary: "An element outside the supported email vocabulary.";
     readonly fix: "Use an element from the contract's element table.";
@@ -303,6 +315,11 @@ declare const DIAGNOSTIC_CODES: {
     readonly summary: "A custom property is redefined inside a conditional at-rule.";
     readonly fix: "Keep the override on a class rule.";
   };
+  readonly "email-contrast": {
+    readonly summary: "Text, or a filled button against its surroundings, falls below the contrast ratio in light or dark mode (below 1.5:1 a button is indistinguishable from its surface; WCAG 1.4.11 asks 3:1).";
+    readonly fix: "Pair background and text tokens (bg-primary with text-primary-foreground), give the theme's dark-mode @theme a value for the token, or choose colors that reach the required ratio.";
+    readonly upgrade: string;
+  };
   readonly "email-font-fallback": {
     readonly summary: "A font stack names a project font without a generic fallback.";
     readonly fix: "End the stack with sans-serif, serif or monospace.";

package/dist/diagnostics.js

@@ -1,3 +1,3 @@
-import { a as createDiagnosticFormatter, i as buildLineMap, n as DIAGNOSTIC_CODE_FAMILIES, o as formatDiagnostic, r as hasUpgradeRecipe, s as lineColumn, t as DIAGNOSTIC_CODES } from "./diagnostic-codes-DdZ4tka5.js";
+import { a as createDiagnosticFormatter, i as buildLineMap, n as DIAGNOSTIC_CODE_FAMILIES, o as formatDiagnostic, r as hasUpgradeRecipe, s as lineColumn, t as DIAGNOSTIC_CODES } from "./diagnostic-codes-UXwOO3A-.js";
 import { n as formatEmailDiagnostic, r as hasBlockingDiagnostic, t as EmailCompileError } from "./diagnostics-C0Tr8-eQ.js";
 export { DIAGNOSTIC_CODES, DIAGNOSTIC_CODE_FAMILIES, EmailCompileError, buildLineMap, createDiagnosticFormatter, formatDiagnostic, formatEmailDiagnostic, hasBlockingDiagnostic, hasUpgradeRecipe, lineColumn };

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 { i as buildLineMap } from "./diagnostic-codes-DdZ4tka5.js";
-import { c as WHATSAPP_HEADER_TYPES, n as introducedProfileErrors, o as SMS_CATEGORIES, s as WHATSAPP_CATEGORIES, t as checkStaticProfile } from "./profile-CXnkfEMi.js";
+import { i as buildLineMap } from "./diagnostic-codes-UXwOO3A-.js";
+import { c as WHATSAPP_HEADER_TYPES, n as introducedProfileErrors, o as SMS_CATEGORIES, s as WHATSAPP_CATEGORIES, t as checkStaticProfile } from "./profile-Cc8VxOKA.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.d.ts

@@ -9,19 +9,38 @@ interface EmailProps {
   readonly dir?: "ltr" | "rtl" | undefined;
   /** Document title; several clients use it as the fallback preview line. */
   readonly title?: string | undefined;
+  /**
+   * The page color, painted across the whole body and, as `bgcolor`, on the wrapper table for
+   * clients that drop body styles. Defaults to the theme's `--color-background`, which switches
+   * in dark mode.
+   */
   readonly backgroundColor?: string | undefined;
+  /**
+   * Pixels of space each side of the content, so it never touches the screen edge on a narrow
+   * viewport. Defaults to 16; `0` lets content run edge to edge.
+   */
+  readonly gutter?: number | undefined;
   /** Applied to the content cell, where Yahoo and AOL keep body styling. */
   readonly style?: EmailStyle | undefined;
   readonly children?: EmailChild;
 }
 /** The hidden inbox preview block. Padding characters stop the client borrowing body copy. */
 declare const preheaderNode: (text: string) => EmailNode;
-/** Document shell: the head every target client needs, plus the body content cell. */
-declare const Email: ({ className, lang, dir, title, backgroundColor, style, children }: EmailProps) => EmailNode;
+/**
+ * Document shell: the head every target client needs, a body painted with the page color, and
+ * the content cell. The content cell sets the theme's text color and body font
+ * (`--color-foreground`, `--font-sans`) for everything inside it, and pads the content off the
+ * screen edge (`gutter`).
+ */
+declare const Email: ({ className, lang, dir, title, backgroundColor, gutter, style, children }: EmailProps) => EmailNode;
 interface SectionProps {
   /** CSS classes applied to the primitive's content element. */
   readonly className?: string | undefined;
   readonly align?: "left" | "center" | "right" | undefined;
+  /**
+   * The band's width. A pixel width (`600`) is a maximum: the band fills a narrower screen, and
+   * classic Outlook, which ignores `max-width`, draws it at that width.
+   */
   readonly width?: number | string | undefined;
   readonly bgcolor?: string | undefined;
   /** Applied to the content cell so padding survives Outlook and Klaviyo. */
@@ -44,17 +63,29 @@ interface ColumnsProps<Item = never> {
   readonly each?: readonly Item[] | undefined;
   /** With `each`, the cells in a row; each chunk of items is its own `Columns` table. */
   readonly per?: number | undefined;
+  /**
+   * Stack the cells into one column, each full width, on a viewport narrower than 600px. On by
+   * default; `stack={false}` keeps a row of small cells (icons, a price beside a label) side by
+   * side. Clients that ignore media queries keep the row.
+   */
+  readonly stack?: boolean | undefined;
+  /**
+   * Pixels between the cells of a row. A stacked row puts the same space between the stacked
+   * cells instead, so a gap needs no padding on the cells that would misalign them when stacked.
+   * The cells must be written out and always render.
+   */
+  readonly gap?: number | undefined;
   /** `Column` elements, or with `each` a function that returns one. */
   readonly children?: EmailChild | ((item: Item, index: number) => EmailChild);
 }
 /** The equal share of a row that each of `count` cells takes, whole percent rounded down. */
 declare const equalColumnWidth: (count: number) => string;
 /**
- * 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.
+ * A row of side-by-side `Column`s that stacks on a narrow viewport (`stack`). 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.
  */
-declare const Columns: <Item = never>({ className, align, width, style, each, per, children }: ColumnsProps<Item>) => EmailNode;
+declare const Columns: <Item = never>({ className, align, width, style, each, per, stack, gap, children }: ColumnsProps<Item>) => EmailNode;
 interface ColumnProps {
   /** CSS classes applied to the primitive's content element. */
   readonly className?: string | undefined;
@@ -91,7 +122,13 @@ interface ButtonProps {
   /** The label. A string label is required for the classic Outlook fallback. */
   readonly children?: EmailChild;
 }
-/** A link styled as a button, with a VML fallback so classic Outlook draws the shape. */
+/**
+ * A link styled as a button, with a VML fallback so classic Outlook draws the shape. Its fill,
+ * label color, font and corners default to the theme (`bg-primary`, `text-primary-foreground`,
+ * `font-sans`, `rounded`), so a class on the button restyles it. Classic Outlook draws the VML
+ * shape from the props alone: set `backgroundColor`, `color` and `borderRadius` when the button
+ * does not use the theme's primary fill.
+ */
 declare const Button: ({ className, href, width, height, paddingX, backgroundColor, color, borderRadius, borderColor, borderWidth, fontSize, fontFamily, align, style, children }: ButtonProps) => EmailNode;
 interface SpacerProps {
   readonly height: number;
@@ -105,7 +142,10 @@ interface DividerProps {
   readonly thickness?: number | undefined;
   readonly style?: EmailStyle | undefined;
 }
-/** A horizontal rule drawn as a cell border, which every target client renders. */
+/**
+ * A horizontal rule drawn as a cell border, which every target client renders. It defaults to a
+ * 1px line in the theme's `--color-border`.
+ */
 declare const Divider: ({ className, color, thickness, style }: DividerProps) => EmailNode;
 interface ImageProps {
   /** CSS classes applied to the primitive's content element. */
@@ -129,7 +169,10 @@ interface LinkProps {
   readonly style?: EmailStyle | undefined;
   readonly children?: EmailChild;
 }
-/** A text link that opens outside the client and cannot reach back at the opener. */
+/**
+ * A text link that opens outside the client and cannot reach back at the opener. It defaults to
+ * the theme's `--color-primary`, underlined.
+ */
 declare const Link: ({ className, href, target, rel, style, children }: LinkProps) => EmailNode;
 //#endregion
 export { Button, ButtonProps, Column, ColumnProps, Columns, ColumnsProps, Divider, DividerProps, Email, EmailProps, Image, ImageProps, Link, LinkProps, PREHEADER_ATTRIBUTE, Section, SectionProps, Spacer, SpacerProps, equalColumnWidth, preheaderNode };

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-DycSEKva.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-CwWSoG5N.js";
 export { Button, Column, Columns, Divider, Email, Image, Link, PREHEADER_ATTRIBUTE, Section, Spacer, equalColumnWidth, preheaderNode };