@samva/markup 0.10.0 → 0.11.0

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 };