@samva/markup 0.15.0 → 0.16.0

package/AGENTS.md

@@ -45,8 +45,9 @@ entry?)` is the synchronous structural check: it runs the compiler's lowering wi
   brand or the files an import names, and returns only findings the source itself owns.
   `introducedProfileErrors(before, after)` is what a visual edit is refused on. It also holds the
   compiler's building blocks (`transformProject`, Tailwind, the cascade, CSS), the brand footer and
-  sample renders (`renderBrandFooter`, `renderBrandSample`), and `TEMPLATE_NAME_PATTERN`. It imports no Vite, esbuild, or Node builtins, so it runs in any
-  JavaScript host.
+  sample renders (`renderBrandFooter`, `renderBrandSample`), and `TEMPLATE_NAME_PATTERN`. It imports
+  no Vite, esbuild, or Node builtins, so it runs in Node, Bun and Workers; caniemail's glob
+  dependency reads `process` when it loads, so a browser takes `./brand-sample` instead.
 - `@samva/markup/diagnostics` — source spans and line maps, the `DIAGNOSTIC_CODES` registry with
   each code's fix and upgrade recipe, and `EmailDiagnostic`/`EmailCompileError`. It does not load
   the compiler, so a host that only reports imports it.
@@ -70,6 +71,10 @@ entry?)` is the synchronous structural check: it runs the compiler's lowering wi
   assets (`isAssetPath`, `ASSET_CONTENT_TYPES`, `assetUrl`): which imported files become
   content-addressed assets. The send path imports it, so its closure holds only the css-tree parser
   `theme.css` needs; rendering a footer compiles Tailwind and lives in `./compiler`.
+- `@samva/markup/brand-sample` — `renderBrandSample`, the brand preview a dashboard compiles in
+  the browser against an unsaved brand. Its closure holds Tailwind, Babel and css-tree but not
+  caniemail (`tests/entry-closure.test.ts`), and it loads without `process`
+  (`tests/brand-sample-entry.test.ts`).
 
 `tests/published-dependencies.test.ts` pins this list. The compiler's libraries (Babel, Tailwind,
 css-tree, caniemail) are dependencies, because a template project depends on this package alone and

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## @samva/markup@0.16.0
+
+### The brand footer is one line
+
+`BrandFooter` renders the company name, social links and the unsubscribe link on one line,
+separated by `·`, with the postal address on the line below. It follows a `text-left` or
+`text-right` `className` instead of always centering. Sends without an unsubscribe group drop only
+the unsubscribe link and its separator, and still strip the row of footers compiled before this
+release.
+
+This is an intended change to published output: the email parity digests
+(`packages/markup/tests/support/email-parity.ts`) move with the new footer markup, and Samva's hosted
+runtime must take the same values when it repins to this release.
+
+### Render a brand sample in the browser
+
+`@samva/markup/brand-sample` exports `renderBrandSample` without caniemail, whose glob dependency
+reads Node's `process` when it loads. Import it to preview a brand in a browser; `./compiler`
+still exports `renderBrandSample` for Node, Bun and Workers.
+
 ## @samva/markup@0.15.0
 
 ### WhatsApp template FLOW buttons

package/dist/assets-BSpgZOSR.js

@@ -0,0 +1,61 @@
+//#region src/email/assets.ts
+/** Files a template may import, and what they are served as. */
+const ASSET_CONTENT_TYPES = {
+	".png": "image/png",
+	".jpg": "image/jpeg",
+	".jpeg": "image/jpeg",
+	".gif": "image/gif",
+	".webp": "image/webp",
+	".avif": "image/avif",
+	".svg": "image/svg+xml",
+	".ico": "image/x-icon",
+	".woff": "font/woff",
+	".woff2": "font/woff2",
+	".ttf": "font/ttf",
+	".otf": "font/otf",
+	".pdf": "application/pdf",
+	".txt": "text/plain"
+};
+const extensionOf = (path) => {
+	const dot = path.lastIndexOf(".");
+	return dot < 0 ? "" : path.slice(dot).toLowerCase();
+};
+/** True when the compiler turns this import into a content-addressed asset. */
+const isAssetPath = (path) => Object.hasOwn(ASSET_CONTENT_TYPES, extensionOf(path));
+const hex = (buffer) => Array.from(new Uint8Array(buffer), (byte) => byte.toString(16).padStart(2, "0")).join("");
+/** Address one file by its content. */
+const assetEntry = async (path, bytes) => {
+	const extension = extensionOf(path);
+	const view = new Uint8Array(bytes.byteLength);
+	view.set(bytes);
+	const digest = hex(await crypto.subtle.digest("SHA-256", view));
+	return {
+		path,
+		digest,
+		bytes: bytes.byteLength,
+		contentType: ASSET_CONTENT_TYPES[extension] ?? "application/octet-stream",
+		fileName: `${digest}${extension}`
+	};
+};
+/**
+* The URL an asset has under a base. The base is a build input: publication
+* passes its hosted origin, and a local export passes whatever it will serve
+* the exported files from.
+*/
+const assetUrl = (entry, base) => `${base.replace(/\/+$/, "")}/${entry.fileName}`;
+const EXTERNAL_IMAGE = /^https:\/\//i;
+/** Record, but never fetch, a URL the template points at. */
+const isExternalAsset = (reference) => EXTERNAL_IMAGE.test(reference);
+/**
+* Reject an asset base that would produce URLs a client will not load. The
+* relative forms are the ones a page on disk resolves against its own
+* directory, which is what a local export writes.
+*/
+const checkAssetBase = (base) => /^(https:\/\/|\.{1,2}\/|\/)/i.test(base) ? [] : [{
+	code: "invalid-asset-base",
+	severity: "error",
+	message: `Asset base ${JSON.stringify(base)} must be an https URL, an absolute path, or a relative path for a local export.`,
+	origins: []
+}];
+//#endregion
+export { isAssetPath as a, checkAssetBase as i, assetEntry as n, isExternalAsset as o, assetUrl as r, ASSET_CONTENT_TYPES as t };

package/dist/assets-BSuNT9gr.d.ts

@@ -0,0 +1,39 @@
+import { r as EmailDiagnostic } from "./diagnostics-CUYlQ_6x.js";
+//#region src/email/assets.d.ts
+/** Files a template may import, and what they are served as. */
+declare const ASSET_CONTENT_TYPES: Readonly<Record<string, string>>;
+interface AssetEntry {
+  /** Project-relative path the template imported. */
+  readonly path: string;
+  /** SHA-256 of the exact bytes, lowercase hex. */
+  readonly digest: string;
+  readonly bytes: number;
+  readonly contentType: string;
+  /** `<digest><ext>` — the name the asset has under any base. */
+  readonly fileName: string;
+}
+interface AssetManifest {
+  /** Where these assets are served from in this build. */
+  readonly base: string;
+  readonly assets: readonly AssetEntry[];
+}
+/** True when the compiler turns this import into a content-addressed asset. */
+declare const isAssetPath: (path: string) => boolean;
+/** Address one file by its content. */
+declare const assetEntry: (path: string, bytes: Uint8Array) => Promise<AssetEntry>;
+/**
+ * The URL an asset has under a base. The base is a build input: publication
+ * passes its hosted origin, and a local export passes whatever it will serve
+ * the exported files from.
+ */
+declare const assetUrl: (entry: AssetEntry, base: string) => string;
+/** Record, but never fetch, a URL the template points at. */
+declare const isExternalAsset: (reference: string) => boolean;
+/**
+ * Reject an asset base that would produce URLs a client will not load. The
+ * relative forms are the ones a page on disk resolves against its own
+ * directory, which is what a local export writes.
+ */
+declare const checkAssetBase: (base: string) => readonly EmailDiagnostic[];
+//#endregion
+export { assetUrl as a, isExternalAsset as c, assetEntry as i, AssetEntry as n, checkAssetBase as o, AssetManifest as r, isAssetPath as s, ASSET_CONTENT_TYPES as t };

package/dist/brand-Ci05p37c.js

@@ -0,0 +1,132 @@
+import { D as samvaBrandPlugin, O as BRAND_FOOTER_MARKER, k as UNSUBSCRIBE_LINK, r as escapeAttribute } from "./html-BvRFepeO.js";
+import { a as jsx, c as rawMarkup, n as Fragment } from "./jsx-runtime-CBlexoeR.js";
+//#region src/email/brand.ts
+/** Every class the brand components use, compiled for any project that imports them. */
+const BRAND_COMPONENT_CLASSES = [
+	"dark:hidden!",
+	"hidden",
+	"dark:block!",
+	"text-xs",
+	"text-muted-foreground",
+	"text-center",
+	"font-semibold",
+	"underline"
+];
+const addressLines = (address) => [
+	address.street1,
+	address.street2,
+	[
+		address.city,
+		address.region,
+		address.postalCode
+	].filter((part) => part.trim() !== "").join(", "),
+	address.country
+].filter((line) => line !== void 0 && line.trim() !== "");
+const classes = (...names) => {
+	const joined = names.filter((name) => name !== void 0 && name !== "").join(" ");
+	return joined === "" ? void 0 : joined;
+};
+const line = (children, last) => jsx("p", {
+	style: { margin: last ? "0" : "0 0 8px 0" },
+	children
+});
+/** The alignment a footer `className` asks for; the footer centers when it names none. */
+const footerAlignment = (className) => /(?:^|\s)text-(left|center|right)(?:\s|$)/.exec(className ?? "")?.[1] ?? "center";
+/** Bind `BrandLogo` and `BrandFooter` to one brand, marked as the plugin names. */
+const brandComponents = (brand, plugin = samvaBrandPlugin) => {
+	const assets = brand.assets ?? {};
+	const footer = brand.footer ?? {};
+	const BrandLogo = ({ width = 120, alt, align, className }) => {
+		if (assets.logoUrl === void 0) return null;
+		const label = alt ?? footer.companyName ?? "";
+		const image = (src, imageClass, imageAlt) => jsx("img", {
+			src,
+			alt: imageAlt,
+			width,
+			border: 0,
+			...align === void 0 ? {} : { align },
+			className: classes(imageClass, className),
+			style: {
+				display: "block",
+				outline: "none",
+				border: "none",
+				height: "auto"
+			}
+		});
+		if (assets.logoDarkUrl === void 0) return image(assets.logoUrl, void 0, label);
+		return jsx(Fragment, { children: [image(assets.logoUrl, "dark:hidden!", label), jsx("div", {
+			className: "hidden dark:block!",
+			style: {
+				msoHide: "all",
+				maxHeight: 0,
+				overflow: "hidden"
+			},
+			children: image(assets.logoDarkUrl, void 0, "")
+		})] });
+	};
+	const BrandFooter = ({ unsubscribeLabel = "Unsubscribe", className }) => {
+		const items = [];
+		const separator = () => items.length === 0 ? [] : [" · "];
+		if (footer.companyName !== void 0 && footer.companyName.trim() !== "") items.push(jsx("span", {
+			className: "font-semibold",
+			children: footer.companyName
+		}));
+		for (const link of footer.socialLinks ?? []) items.push(...separator(), jsx("a", {
+			href: link.url,
+			className: "text-muted-foreground underline",
+			children: link.label
+		}));
+		items.push(jsx("span", {
+			[plugin.unsubscribeRowAttribute]: "",
+			[BRAND_FOOTER_MARKER]: true,
+			children: [...items.length === 0 ? [] : [rawMarkup(" · ", "\n")], unsubscribeLink(unsubscribeLabel, plugin)]
+		}));
+		const address = footer.address === void 0 ? [] : addressLines(footer.address);
+		const alignment = footerAlignment(className);
+		return jsx("table", {
+			role: "presentation",
+			width: "100%",
+			border: 0,
+			cellpadding: 0,
+			cellspacing: 0,
+			[plugin.footerAttribute]: "",
+			[BRAND_FOOTER_MARKER]: true,
+			children: jsx("tbody", { children: jsx("tr", { children: jsx("td", {
+				align: alignment,
+				className: classes("text-xs text-muted-foreground", alignment === "center" ? "text-center" : void 0, className),
+				style: { padding: "32px 16px" },
+				children: [line(items, address.length === 0), ...address.length === 0 ? [] : [line([address.join(", ")], true)]]
+			}) }) })
+		});
+	};
+	return {
+		BrandLogo,
+		BrandFooter
+	};
+};
+/**
+* The unsubscribe link. Its href is the placeholder, which no author-written
+* link may carry: the serializer accepts it only on this node, and writes the
+* plugin's no-track marker on it so click tracking never rewrites it.
+*/
+const unsubscribeLink = (label, plugin) => jsx("a", {
+	href: plugin.unsubscribeUrlPlaceholder,
+	className: "text-muted-foreground underline",
+	[UNSUBSCRIBE_LINK]: true,
+	children: label
+});
+/** Read the plugin's footer markers from rendered HTML. */
+const renderedFooterMarkers = (html, plugin = samvaBrandPlugin) => ({
+	footer: html.includes(`${plugin.footerAttribute}=""`),
+	unsubscribeLink: html.includes(`href="${escapeAttribute(plugin.unsubscribeUrlPlaceholder)}"`)
+});
+/**
+* Drop the unsubscribe row from a rendered message, for a send that resolved
+* no unsubscribe group: there is no link to put there, so the row goes.
+*/
+const withoutUnsubscribeRow = (rendered, plugin = samvaBrandPlugin) => ({
+	html: rendered.html?.replace(new RegExp(`<(span|tr) ${plugin.unsubscribeRowAttribute}=""[^>]*>[\\s\\S]*?</\\1>`, "g"), ""),
+	text: rendered.text?.split("\n").filter((textLine) => !textLine.includes(plugin.unsubscribeUrlPlaceholder)).join("\n")
+});
+//#endregion
+export { withoutUnsubscribeRow as i, brandComponents as n, renderedFooterMarkers as r, BRAND_COMPONENT_CLASSES as t };

package/dist/brand-footer-ClRtWnIc.d.ts

@@ -0,0 +1,40 @@
+import { n as EmailContent } from "./template-B-UDXK8a.js";
+import { t as BrandPlugin } from "./brand-plugin-CHhcei-j.js";
+import { a as EmailBrand, n as BrandComponents } from "./brand-jFV6YtSV.js";
+import { r as RenderedEmail } from "./render-CuZej25A.js";
+//#region src/email/brand-footer.d.ts
+/** A footer block for the send path to append, and its plain-text tail. */
+interface RenderedBrandFooter {
+  readonly html: string;
+  readonly text: string;
+  /**
+   * The rules the footer needs in the message's `<head>`: its dark-mode colors and the
+   * `dark:` swap of the brand logo. Empty when it needs none.
+   */
+  readonly headCss: string;
+}
+/**
+ * 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 its brand import. Without `unsubscribe` the unsubscribe row is
+ * left out.
+ */
+declare const renderBrandFooter: (brand: EmailBrand, options: {
+  readonly unsubscribe: boolean;
+  readonly brandPlugin?: BrandPlugin | undefined;
+}) => Promise<RenderedBrandFooter>;
+/**
+ * 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.
+ */
+declare const renderBrandSample: (brand: EmailBrand, sample: {
+  /** Every class the content names; nothing is discovered from source here. */
+  readonly classes: readonly string[];
+  readonly render: (components: BrandComponents) => EmailContent;
+}, brandPlugin?: BrandPlugin) => Promise<RenderedEmail>;
+//#endregion
+export { renderBrandFooter as n, renderBrandSample as r, RenderedBrandFooter as t };