@samva/markup 0.9.0 → 0.10.0

package/dist/email/components.js

@@ -1,275 +0,0 @@
-import { EmailNode, Fragment, jsx, normalizeChildren, rawMarkup, reportEmailDiagnostic } from "./jsx-runtime.js";
-import { escapeAttribute, escapeText } from "./html.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 { Button, Column, Columns, Divider, Email, Image, Link, PREHEADER_ATTRIBUTE, Section, Spacer, equalColumnWidth, preheaderNode };
-
-//# sourceMappingURL=components.js.map

package/dist/email/diagnostics.d.ts

@@ -1,2 +0,0 @@
-import { a as TemplateDiagnostic, i as EmailDiagnosticSeverity, n as EmailCompileError, o as formatEmailDiagnostic, r as EmailDiagnostic, s as hasBlockingDiagnostic, t as EmailCompatibilityAssessment } from "../diagnostics-B-Gym34R.js";
-export { EmailCompatibilityAssessment, EmailCompileError, EmailDiagnostic, EmailDiagnosticSeverity, TemplateDiagnostic, formatEmailDiagnostic, hasBlockingDiagnostic };

package/dist/email/elements.d.ts

@@ -1,2 +0,0 @@
-import { a as EmailGlobalProps, c as EmailStyle, d as isUrlAttribute, i as EmailElementSpec, l as EmailTag, n as EMAIL_GLOBAL_ATTRIBUTES, o as EmailIntrinsicElements, r as EmailAttributeSpec, s as EmailLayout, t as EMAIL_ELEMENTS, u as emailElement } from "../elements-cqldpaJt.js";
-export { EMAIL_ELEMENTS, EMAIL_GLOBAL_ATTRIBUTES, EmailAttributeSpec, EmailElementSpec, EmailGlobalProps, EmailIntrinsicElements, EmailLayout, EmailStyle, EmailTag, emailElement, isUrlAttribute };

package/dist/email/elements.js

@@ -1,299 +0,0 @@
-//#region src/email/elements.ts
-/** Attributes every supported element accepts. `class`/`className`/`style` are handled separately. */
-const EMAIL_GLOBAL_ATTRIBUTES = {
-	id: { type: "string" },
-	title: { type: "string" },
-	lang: { type: "string" },
-	dir: {
-		type: "string",
-		values: [
-			"ltr",
-			"rtl",
-			"auto"
-		]
-	},
-	role: { type: "string" }
-};
-const alignment = {
-	type: "string",
-	values: [
-		"left",
-		"center",
-		"right"
-	]
-};
-const verticalAlignment = {
-	type: "string",
-	values: [
-		"top",
-		"middle",
-		"bottom"
-	]
-};
-const flowAttributes = { align: alignment };
-const cellAttributes = {
-	align: alignment,
-	valign: verticalAlignment,
-	width: { type: "measure" },
-	height: { type: "measure" },
-	bgcolor: { type: "string" },
-	colspan: { type: "number" },
-	rowspan: { type: "number" }
-};
-const block = (attributes) => ({
-	content: "flow",
-	layout: "block",
-	attributes
-});
-const inline = () => ({
-	content: "flow",
-	layout: "inline",
-	attributes: {}
-});
-/** The complete supported vocabulary. Anything outside it is a compile error with a source location. */
-const EMAIL_ELEMENTS = {
-	html: {
-		content: "flow",
-		layout: "document",
-		attributes: {
-			xmlns: { type: "string" },
-			"xmlns:o": { type: "string" },
-			"xmlns:v": { type: "string" },
-			"xmlns:w": { type: "string" }
-		},
-		childElements: ["head", "body"]
-	},
-	head: {
-		content: "flow",
-		layout: "metadata",
-		attributes: {},
-		childElements: [
-			"title",
-			"meta",
-			"style"
-		]
-	},
-	title: {
-		content: "text",
-		layout: "metadata",
-		attributes: {}
-	},
-	style: {
-		content: "raw",
-		layout: "metadata",
-		attributes: { type: { type: "string" } }
-	},
-	meta: {
-		content: "void",
-		layout: "metadata",
-		attributes: {
-			name: { type: "string" },
-			content: { type: "string" },
-			charset: { type: "string" },
-			"http-equiv": { type: "string" }
-		}
-	},
-	body: {
-		content: "flow",
-		layout: "block",
-		attributes: { bgcolor: { type: "string" } }
-	},
-	div: block(flowAttributes),
-	section: block(flowAttributes),
-	article: block(flowAttributes),
-	header: block(flowAttributes),
-	footer: block(flowAttributes),
-	main: block(flowAttributes),
-	center: block({}),
-	p: block(flowAttributes),
-	blockquote: block(flowAttributes),
-	pre: {
-		content: "flow",
-		layout: "preformatted",
-		attributes: {}
-	},
-	h1: block(flowAttributes),
-	h2: block(flowAttributes),
-	h3: block(flowAttributes),
-	h4: block(flowAttributes),
-	h5: block(flowAttributes),
-	h6: block(flowAttributes),
-	span: inline(),
-	strong: inline(),
-	b: inline(),
-	em: inline(),
-	i: inline(),
-	u: inline(),
-	s: inline(),
-	small: inline(),
-	code: inline(),
-	a: {
-		content: "flow",
-		layout: "link",
-		attributes: {
-			href: {
-				type: "url",
-				required: true
-			},
-			target: { type: "string" },
-			rel: { type: "string" },
-			name: { type: "string" }
-		}
-	},
-	img: {
-		content: "void",
-		layout: "image",
-		attributes: {
-			src: {
-				type: "url",
-				required: true
-			},
-			alt: {
-				type: "string",
-				required: true
-			},
-			width: { type: "measure" },
-			height: { type: "measure" },
-			border: { type: "measure" },
-			align: alignment
-		}
-	},
-	table: {
-		content: "flow",
-		layout: "table",
-		attributes: {
-			width: { type: "measure" },
-			height: { type: "measure" },
-			border: { type: "measure" },
-			cellpadding: { type: "measure" },
-			cellspacing: { type: "measure" },
-			align: alignment,
-			bgcolor: { type: "string" }
-		},
-		childElements: [
-			"caption",
-			"colgroup",
-			"thead",
-			"tbody",
-			"tfoot",
-			"tr"
-		]
-	},
-	caption: {
-		content: "flow",
-		layout: "block",
-		attributes: flowAttributes
-	},
-	colgroup: {
-		content: "flow",
-		layout: "table-section",
-		attributes: {
-			span: { type: "number" },
-			width: { type: "measure" }
-		},
-		childElements: ["col"]
-	},
-	col: {
-		content: "void",
-		layout: "table-section",
-		attributes: {
-			span: { type: "number" },
-			width: { type: "measure" }
-		}
-	},
-	thead: {
-		content: "flow",
-		layout: "table-section",
-		attributes: {
-			align: alignment,
-			valign: verticalAlignment,
-			bgcolor: { type: "string" }
-		},
-		childElements: ["tr"]
-	},
-	tbody: {
-		content: "flow",
-		layout: "table-section",
-		attributes: {
-			align: alignment,
-			valign: verticalAlignment,
-			bgcolor: { type: "string" }
-		},
-		childElements: ["tr"]
-	},
-	tfoot: {
-		content: "flow",
-		layout: "table-section",
-		attributes: {
-			align: alignment,
-			valign: verticalAlignment,
-			bgcolor: { type: "string" }
-		},
-		childElements: ["tr"]
-	},
-	tr: {
-		content: "flow",
-		layout: "row",
-		attributes: {
-			align: alignment,
-			valign: verticalAlignment,
-			bgcolor: { type: "string" },
-			height: { type: "measure" }
-		},
-		childElements: ["td", "th"]
-	},
-	td: {
-		content: "flow",
-		layout: "cell",
-		attributes: cellAttributes
-	},
-	th: {
-		content: "flow",
-		layout: "cell",
-		attributes: cellAttributes
-	},
-	ul: {
-		content: "flow",
-		layout: "list",
-		attributes: {},
-		childElements: ["li"]
-	},
-	ol: {
-		content: "flow",
-		layout: "list",
-		attributes: {
-			start: { type: "number" },
-			type: { type: "string" }
-		},
-		childElements: ["li"]
-	},
-	li: {
-		content: "flow",
-		layout: "list-item",
-		attributes: {}
-	},
-	br: {
-		content: "void",
-		layout: "break",
-		attributes: {}
-	},
-	hr: {
-		content: "void",
-		layout: "rule",
-		attributes: {
-			width: { type: "measure" },
-			size: { type: "number" },
-			align: alignment
-		}
-	}
-};
-/** Attributes that must carry a URL; these are checked against the safe-scheme rule. */
-const isUrlAttribute = (tag, attribute) => {
-	return EMAIL_ELEMENTS[tag]?.attributes[attribute]?.type === "url";
-};
-/** Look up one supported element, or `undefined` when the tag is outside the vocabulary. */
-const emailElement = (tag) => Object.hasOwn(EMAIL_ELEMENTS, tag) ? EMAIL_ELEMENTS[tag] : void 0;
-//#endregion
-export { EMAIL_ELEMENTS, EMAIL_GLOBAL_ATTRIBUTES, emailElement, isUrlAttribute };
-
-//# sourceMappingURL=elements.js.map

package/dist/email/html.d.ts

@@ -1,2 +0,0 @@
-import { a as escapeAttribute, c as serializeEmailHtml, i as declarationValue, l as serializeStyle, n as SerializeEmailOptions, o as escapeText, r as checkAttribute, s as kebab, t as EmailHtmlOutput } from "../html-BJepOwZ4.js";
-export { EmailHtmlOutput, SerializeEmailOptions, checkAttribute, declarationValue, escapeAttribute, escapeText, kebab, serializeEmailHtml, serializeStyle };