@cloudgrid-io/ui 0.31.4 → 0.31.6

package/dist/email/index.d.ts

@@ -0,0 +1,204 @@
+/**
+ * THE CLOUDGRID EMAIL LAYOUT (ui#295). Content in, `{ html, text }` out.
+ *
+ * One layout for every email CloudGrid sends: the sign-in code, invites,
+ * reactions, activity and the expiry warnings. The platform calls it; the
+ * styleguide previews its real output (`/gallery/email`), so what a reviewer
+ * sees is the string the platform will send.
+ *
+ * ```ts
+ * import { renderEmail } from "@cloudgrid-io/ui/email"
+ * const { html, text } = renderEmail({ headline: "expiring-soon", title, points, action, note, footer })
+ * ```
+ *
+ * ## It speaks the library's language (founder revision, 2026-10-11)
+ *
+ * The first cut was a generic transactional email, and the founder rejected it:
+ * "it doesn't use our logo or our language". So every element here is taken
+ * from a library element and its tokens, the way the Console's sign-in and the
+ * `EmptyCreations` block draw them:
+ *
+ *   the logo       `Logo`'s own paths, as a PNG (wordmark.png), top left
+ *   the headline   Tanker, uppercase, brand purple, at the sign-in's size
+ *                  ("READY TO PLUG IN?"), as a PNG per headline, its words as
+ *                  styled alt text
+ *   the body       Space Grotesk where the client loads web fonts, else the
+ *                  system stack; the title is the first line under the
+ *                  headline, at the sign-in subline's 19px
+ *   the button     the `cta` button as `EmptyCreations` sets it: teal, ink
+ *                  label in Manrope bold, 40px tall, 16px corners, 20px sides
+ *   an item        the entity card: the identity media (field colour, the grid,
+ *                  the monogram tile), name and kind, and the expiring status
+ *                  pill exactly as `EntityExpiryStatus` draws it
+ *   the frame      lavender ground, the white container at the library's
+ *                  container radius, centred like the sign-in and the empty
+ *                  state, and the sign-in's footer
+ *
+ * ## No React, no dependencies
+ *
+ * The API runs this, not a browser. The module imports only its two generated
+ * siblings, `./palette.js` (colours and shape, from tokens.css at build) and
+ * `./assets.js` (the image manifest, from scripts/generate-email-assets.mjs).
+ * `test/email.test.mjs` asserts that.
+ *
+ * ## Email clients
+ *
+ * Outlook for Windows renders with Word: no flexbox, no `var()`, no rounded
+ * corners, no background images on a cell without VML. Gmail strips `<link>`
+ * and every custom property, and loads no web font. So: nested tables, inline
+ * styles, colours as hex and again as `bgcolor`, a fixed 560px column inside an
+ * Outlook-only table, and pictures for the two things a system font cannot be
+ * (the wordmark and the Tanker headline). Outlook draws the corners square and
+ * the identity field flat; everything else holds.
+ *
+ * ## Images off
+ *
+ * The wordmark and headline carry alt text styled as what they show (purple,
+ * bold, uppercase for a headline), so an inbox that blocks images still shows a
+ * purple "EXPIRING SOON" where the picture was. The identity media keeps its
+ * field colour without the grid; the monogram tile is not an image at all.
+ *
+ * ## Assets: the sender names the host, or there are none
+ *
+ * The library never chooses where a recipient's mail client fetches anything
+ * from (Gilad's review of ui#296: a third-party host sees every recipient's IP
+ * and open time, is blocked on some networks, and costs deliverability).
+ *
+ *   - `assetBaseUrl` set: the wordmark, the headline and the grid tile load from
+ *     there. The sender serves this package's `dist/brand/email/*` from its own
+ *     domain and passes that base.
+ *   - `assetBaseUrl` absent: the email is image-free for every client. The
+ *     wordmark and headline are live text, the treatment Outlook gets anyway,
+ *     and the identity field is plain colour. Nothing is requested from any
+ *     host the caller did not name.
+ *   - `webFontsUrl` likewise: the brand faces load only from a stylesheet the
+ *     caller names; without it the system stack renders.
+ *   - An item's `imageUrl` is the caller's own URL and is used as given.
+ *
+ * ## Escaping
+ *
+ * Every string the caller passes is text, never HTML: `&`, `<`, `>`, `"` and
+ * `'` are escaped wherever they land. A URL is percent-encoded where it is not
+ * already, then attribute-escaped. A URL with any scheme other than `http`,
+ * `https` or `mailto` (a `javascript:` link, say) is replaced by `#`.
+ */
+import { EMAIL_HEADLINES, type EmailHeadline } from "./assets.js";
+export type { EmailHeadline };
+export { EMAIL_HEADLINES };
+export type EmailTone = "page" | "app" | "agent";
+export type EmailLink = {
+    label: string;
+    url: string;
+};
+/** The `EntityExpiryStatus` pill: amber `soon`, red `urgent`. */
+export type EmailStatus = {
+    label: string;
+    tone: "soon" | "urgent";
+};
+export interface EmailItem {
+    /** "Pricing Grid" */
+    name: string;
+    /** The kind line. "Page · not opened in 25 days" */
+    detail: string;
+    /** "PG". One or two characters; anything longer is cut to two. */
+    monogram: string;
+    /** The identity colour. Absent: the app's purple. */
+    tone?: EmailTone;
+    /** The status pill, e.g. `{ label: "Expires tomorrow", tone: "urgent" }`. */
+    status?: EmailStatus;
+    /** The first cut's name for `status`. Still accepted; `status` wins when both are set. */
+    badge?: EmailStatus;
+    /** A button on the item itself, e.g. Keep it. */
+    action?: EmailLink;
+    /**
+     * The entity's picture, its public OG card (1200x630):
+     * `https://api.cloudgrid.io/api/v2/entities/<id>/og.png`. Shown full width in
+     * the card's media area, alt = the item's name. Absent (a never-published app
+     * has no screenshot), the tinted grid and the monogram tile show instead; with
+     * images off, the tinted grid shows behind the alt text.
+     */
+    imageUrl?: string;
+}
+export interface EmailContent {
+    /** Hidden inbox preview text. */
+    preheader?: string;
+    /** The Tanker display line, from the fixed set. A pre-made image; its words are the alt text. */
+    headline?: EmailHeadline;
+    /**
+     * The first body line, under the headline: "Pricing Grid expires in 5 days."
+     * Without a headline it is the email's heading. Also a good default subject.
+     */
+    title: string;
+    /**
+     * Short scannable facts under the title, as a compact bulleted list:
+     * "Not opened in 25 days", "Expires Friday, October 16". The expiry emails
+     * use these instead of `lines` (founder, 2026-10-11: "use short points").
+     */
+    points?: string[];
+    /** Paragraphs, plain text, for the emails that need prose. */
+    lines?: string[];
+    items?: EmailItem[];
+    /** A sign-in code, e.g. "482-913". */
+    code?: string;
+    /** The one main button. */
+    action?: EmailLink;
+    /** One small muted line directly under the main button: "Kept pages don't expire." */
+    note?: string;
+    /** "Or open it first:" and a link. */
+    secondary?: {
+        prefix: string;
+        link: EmailLink;
+    };
+    /** Lines of small print, then an optional link with a suffix. The copyright line follows them. */
+    footer: {
+        lines: string[];
+        link?: EmailLink & {
+            suffix?: string;
+        };
+    };
+    /**
+     * Absolute base URL where the sender serves this package's `brand/email/*`
+     * files (the wordmark, the headline images, the grid tile), on its own domain.
+     * No default: without it the email is image-free, with the wordmark and
+     * headline as live text.
+     */
+    assetBaseUrl?: string;
+    /**
+     * A stylesheet that loads Space Grotesk and Manrope, on a host the sender
+     * chooses (its own, or Google Fonts if it accepts that). No default: without
+     * it the system stack renders, which is what Gmail and Outlook do anyway.
+     */
+    webFontsUrl?: string;
+    /**
+     * The first cut's mark image. Accepted and ignored: the email's logo is the
+     * wordmark now (founder revision, 2026-10-11).
+     * @deprecated
+     */
+    markUrl?: string;
+}
+export interface RenderedEmail {
+    html: string;
+    text: string;
+}
+/**
+ * The Google Fonts stylesheet for the two faces the email names, for a sender
+ * that chooses to accept Google as a host. Passed as `webFontsUrl`; never used
+ * unless passed.
+ */
+export declare const GOOGLE_FONTS_EMAIL_CSS = "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap";
+/** Text to HTML text, safe in an element body and in a quoted attribute. */
+export declare function escapeHtml(value: string): string;
+/**
+ * A URL, percent-encoded where it is not already, with any scheme other than
+ * http, https or mailto replaced by `#`. Returns the URL for a text body; pass
+ * the result through `escapeHtml` before putting it in an attribute.
+ */
+export declare function safeUrl(url: string): string;
+/**
+ * The width an item's picture is drawn at: the 560 column, less the container's
+ * 1px border and 40px padding a side, less the card's own 1px border.
+ */
+export declare const EMAIL_ITEM_IMAGE_WIDTH: number;
+/** Render one email. Pure: the same content always gives the same strings (within a year). */
+export declare function renderEmail(content: EmailContent): RenderedEmail;
+//# sourceMappingURL=index.d.ts.map

package/dist/email/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/email/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFG;AAEH,OAAO,EAAE,eAAe,EAA8B,KAAK,aAAa,EAAE,MAAM,aAAa,CAAA;AAG7F,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,eAAe,EAAE,CAAA;AAE1B,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAA;AAEhD,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AAEtD,iEAAiE;AACjE,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAA;AAEpE,MAAM,WAAW,SAAS;IACxB,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,MAAM,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAA;IAChB,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,iDAAiD;IACjD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iGAAiG;IACjG,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,SAAS,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAA;KAAE,CAAA;IAC/C,kGAAkG;IAClG,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,IAAI,CAAC,EAAE,SAAS,GAAG;YAAE,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAA;IACnE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,6HACyF,CAAA;AAY5H,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD;AAOD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAwB3C;AAuCD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,QAA6B,CAAA;AA2ThE,8FAA8F;AAC9F,wBAAgB,WAAW,CAAC,OAAO,EAAE,YAAY,GAAG,aAAa,CAEhE"}

package/dist/email/index.js

@@ -0,0 +1,429 @@
+/**
+ * THE CLOUDGRID EMAIL LAYOUT (ui#295). Content in, `{ html, text }` out.
+ *
+ * One layout for every email CloudGrid sends: the sign-in code, invites,
+ * reactions, activity and the expiry warnings. The platform calls it; the
+ * styleguide previews its real output (`/gallery/email`), so what a reviewer
+ * sees is the string the platform will send.
+ *
+ * ```ts
+ * import { renderEmail } from "@cloudgrid-io/ui/email"
+ * const { html, text } = renderEmail({ headline: "expiring-soon", title, points, action, note, footer })
+ * ```
+ *
+ * ## It speaks the library's language (founder revision, 2026-10-11)
+ *
+ * The first cut was a generic transactional email, and the founder rejected it:
+ * "it doesn't use our logo or our language". So every element here is taken
+ * from a library element and its tokens, the way the Console's sign-in and the
+ * `EmptyCreations` block draw them:
+ *
+ *   the logo       `Logo`'s own paths, as a PNG (wordmark.png), top left
+ *   the headline   Tanker, uppercase, brand purple, at the sign-in's size
+ *                  ("READY TO PLUG IN?"), as a PNG per headline, its words as
+ *                  styled alt text
+ *   the body       Space Grotesk where the client loads web fonts, else the
+ *                  system stack; the title is the first line under the
+ *                  headline, at the sign-in subline's 19px
+ *   the button     the `cta` button as `EmptyCreations` sets it: teal, ink
+ *                  label in Manrope bold, 40px tall, 16px corners, 20px sides
+ *   an item        the entity card: the identity media (field colour, the grid,
+ *                  the monogram tile), name and kind, and the expiring status
+ *                  pill exactly as `EntityExpiryStatus` draws it
+ *   the frame      lavender ground, the white container at the library's
+ *                  container radius, centred like the sign-in and the empty
+ *                  state, and the sign-in's footer
+ *
+ * ## No React, no dependencies
+ *
+ * The API runs this, not a browser. The module imports only its two generated
+ * siblings, `./palette.js` (colours and shape, from tokens.css at build) and
+ * `./assets.js` (the image manifest, from scripts/generate-email-assets.mjs).
+ * `test/email.test.mjs` asserts that.
+ *
+ * ## Email clients
+ *
+ * Outlook for Windows renders with Word: no flexbox, no `var()`, no rounded
+ * corners, no background images on a cell without VML. Gmail strips `<link>`
+ * and every custom property, and loads no web font. So: nested tables, inline
+ * styles, colours as hex and again as `bgcolor`, a fixed 560px column inside an
+ * Outlook-only table, and pictures for the two things a system font cannot be
+ * (the wordmark and the Tanker headline). Outlook draws the corners square and
+ * the identity field flat; everything else holds.
+ *
+ * ## Images off
+ *
+ * The wordmark and headline carry alt text styled as what they show (purple,
+ * bold, uppercase for a headline), so an inbox that blocks images still shows a
+ * purple "EXPIRING SOON" where the picture was. The identity media keeps its
+ * field colour without the grid; the monogram tile is not an image at all.
+ *
+ * ## Assets: the sender names the host, or there are none
+ *
+ * The library never chooses where a recipient's mail client fetches anything
+ * from (Gilad's review of ui#296: a third-party host sees every recipient's IP
+ * and open time, is blocked on some networks, and costs deliverability).
+ *
+ *   - `assetBaseUrl` set: the wordmark, the headline and the grid tile load from
+ *     there. The sender serves this package's `dist/brand/email/*` from its own
+ *     domain and passes that base.
+ *   - `assetBaseUrl` absent: the email is image-free for every client. The
+ *     wordmark and headline are live text, the treatment Outlook gets anyway,
+ *     and the identity field is plain colour. Nothing is requested from any
+ *     host the caller did not name.
+ *   - `webFontsUrl` likewise: the brand faces load only from a stylesheet the
+ *     caller names; without it the system stack renders.
+ *   - An item's `imageUrl` is the caller's own URL and is used as given.
+ *
+ * ## Escaping
+ *
+ * Every string the caller passes is text, never HTML: `&`, `<`, `>`, `"` and
+ * `'` are escaped wherever they land. A URL is percent-encoded where it is not
+ * already, then attribute-escaped. A URL with any scheme other than `http`,
+ * `https` or `mailto` (a `javascript:` link, say) is replaced by `#`.
+ */
+import { EMAIL_HEADLINES, EMAIL_MESH, EMAIL_WORDMARK } from "./assets.js";
+import { EMAIL_PALETTE as C, EMAIL_SHAPE as S } from "./palette.js";
+export { EMAIL_HEADLINES };
+/**
+ * The Google Fonts stylesheet for the two faces the email names, for a sender
+ * that chooses to accept Google as a host. Passed as `webFontsUrl`; never used
+ * unless passed.
+ */
+export const GOOGLE_FONTS_EMAIL_CSS = "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap";
+// ---- text and URL safety ----------------------------------------------------
+const ESCAPES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+/** Text to HTML text, safe in an element body and in a quoted attribute. */
+export function escapeHtml(value) {
+    return String(value).replace(/[&<>"']/g, (c) => ESCAPES[c] ?? c);
+}
+/** The characters a URL may carry as they are (RFC 3986 reserved and unreserved). */
+const URL_SAFE = /[A-Za-z0-9\-._~:/?#[\]@!$&'()*+,;=%]/;
+const ALLOWED_SCHEMES = new Set(["http", "https", "mailto"]);
+/**
+ * A URL, percent-encoded where it is not already, with any scheme other than
+ * http, https or mailto replaced by `#`. Returns the URL for a text body; pass
+ * the result through `escapeHtml` before putting it in an attribute.
+ */
+export function safeUrl(url) {
+    const trimmed = String(url).trim();
+    // Browsers drop tabs, newlines and control characters before reading a
+    // scheme, so "java\nscript:" is javascript:. Read the scheme the same way.
+    const probe = trimmed.replace(/[\u0000- \u007f]/g, "");
+    const scheme = probe.match(/^([a-z][a-z0-9+.-]*):/i);
+    if (scheme && !ALLOWED_SCHEMES.has(scheme[1].toLowerCase()))
+        return "#";
+    // A `%` that does not start an escape is a literal percent sign.
+    const percent = trimmed.replace(/%(?![0-9A-Fa-f]{2})/g, "%25");
+    let out = "";
+    for (const ch of percent) {
+        if (URL_SAFE.test(ch)) {
+            out += ch;
+            continue;
+        }
+        try {
+            out += encodeURIComponent(ch);
+        }
+        catch {
+            // A lone surrogate cannot be encoded. U+FFFD, as a browser would.
+            out += "%EF%BF%BD";
+        }
+    }
+    return out;
+}
+const attrUrl = (url) => escapeHtml(safeUrl(url));
+// ---- Outlook ------------------------------------------------------------------
+//
+// Outlook for Windows blocks images by default, so it never gets one: every
+// picture has an Outlook twin made of live text and table cells, and the two are
+// fenced with Microsoft's conditional comments. Every other client reads the
+// `!mso` branch (its comment markers are plain comments to them) and never sees
+// the `mso` one.
+/** Only Outlook for Windows renders this. */
+const mso = (html) => `<!--[if mso]>${html}<![endif]-->`;
+/** Everyone except Outlook for Windows renders this. */
+const notMso = (html) => `<!--[if !mso]><!-->${html}<!--<![endif]-->`;
+/** A heavy system face for live-text stand-ins, where Tanker cannot reach. */
+const HEAVY = "'Arial Black', 'Helvetica Neue', Arial, sans-serif";
+/** The wordmark's stand-in face. */
+const WORDMARK_FACE = "Arial, Helvetica, sans-serif";
+/**
+ * A size for a headline's alt text that fits the image's own width in the heavy
+ * face, so a blocked headline sets as one designed line, not a clipped one.
+ * Arial Black's capitals average about 0.72em.
+ */
+function altSize(text, width) {
+    return Math.max(18, Math.min(30, Math.floor(width / (text.length * 0.72))));
+}
+// ---- the shape --------------------------------------------------------------
+const BODY = S.fontBody;
+const UI = S.fontUi;
+/** Every layout table: no spacing, no border, announced as nothing. */
+const TABLE = 'role="presentation" cellpadding="0" cellspacing="0" border="0"';
+/**
+ * The width an item's picture is drawn at: the 560 column, less the container's
+ * 1px border and 40px padding a side, less the card's own 1px border.
+ */
+export const EMAIL_ITEM_IMAGE_WIDTH = 560 - 2 * (1 + 40) - 2 * 1;
+/** How tall a blocked item picture's alt-text strip is. */
+const ALT_STRIP = 64;
+const TILE = { page: C.tilePage, app: C.tileApp, agent: C.tileAgent };
+const FIELD = { page: C.fieldPage, app: C.fieldApp, agent: C.fieldAgent };
+const STATUS = {
+    soon: { fill: C.soonFill, border: C.soonBorder, text: C.soon, dot: C.soonDot },
+    urgent: { fill: C.urgentFill, border: C.urgentBorder, text: C.urgent, dot: C.urgentDot },
+};
+/** The caller's web-font stylesheet, if it named one. Gmail drops the tag either way. */
+const fontLink = (url) => (url ? `<link rel="stylesheet" href="${attrUrl(url)}">` : "");
+function assetUrl(base, file) {
+    return attrUrl(`${base.endsWith("/") ? base : `${base}/`}${file}`);
+}
+/** The `cta` button, as EmptyCreations sets it. `small` is the per-item size. */
+function button(link, small = false) {
+    const pad = small ? "6px 16px" : "10px 20px";
+    const size = small ? 14 : 15;
+    return (`<table ${TABLE} style="border-collapse:separate;"><tr>` +
+        `<td align="center" bgcolor="${C.button}" style="background-color:${C.button};border-radius:${S.radiusButton}px;mso-padding-alt:${pad};">` +
+        `<a href="${attrUrl(link.url)}" target="_blank" rel="noopener" style="display:inline-block;padding:${pad};font-family:${UI};font-size:${size}px;font-weight:700;line-height:20px;color:${C.onButton};text-decoration:none;border-radius:${S.radiusButton}px;white-space:nowrap;">` +
+        `${escapeHtml(link.label)}</a></td></tr></table>`);
+}
+/** The `EntityExpiryStatus` pill: fill, border, dot and the word in the strong tone. */
+function statusPill(status) {
+    const t = STATUS[status.tone] ?? STATUS.soon;
+    return (`<table ${TABLE} style="border-collapse:separate;"><tr>` +
+        `<td bgcolor="${t.fill}" style="background-color:${t.fill};border:1px solid ${t.border};border-radius:999px;padding:2px 10px;font-family:${BODY};font-size:13px;line-height:19px;font-weight:500;color:${t.text};white-space:nowrap;">` +
+        `<span style="display:inline-block;width:6px;height:6px;border-radius:999px;background-color:${t.dot};vertical-align:middle;margin:0 6px 2px 0;font-size:0;line-height:0;">&nbsp;</span>` +
+        `${escapeHtml(status.label)}</td></tr></table>`);
+}
+function monogram(value) {
+    const chars = [...String(value).trim()];
+    return chars.length === 0 ? "?" : chars.slice(0, 2).join("");
+}
+/** One item, as an entity card: the identity media, then name, kind and status. */
+function item(it, base) {
+    const tone = it.tone ?? "app";
+    const status = it.status ?? it.badge;
+    // Inside url('...') too, so an apostrophe is percent-encoded rather than escaped.
+    // No base, no grid: the field is plain colour and nothing is fetched.
+    const mesh = base ? assetUrl(base, EMAIL_MESH.file).replace(/&#39;/g, "%27") : undefined;
+    const r = S.radiusCard;
+    // The tinted grid is the media area's ground either way: behind the picture,
+    // so a blocked image still sits on the entity's colour, and on its own with
+    // the monogram tile when there is no picture.
+    const ground = `bgcolor="${FIELD[tone]}" ${mesh ? `background="${mesh}" ` : ""}`;
+    const groundStyle = `background-color:${FIELD[tone]};` +
+        (mesh
+            ? `background-image:url('${mesh}');background-size:${EMAIL_MESH.size}px ${EMAIL_MESH.size}px;background-position:-1px -1px;background-repeat:repeat;`
+            : "") +
+        `border-radius:${r - 1}px ${r - 1}px 0 0;`;
+    const w = EMAIL_ITEM_IMAGE_WIDTH;
+    const tile = `<td align="center" valign="middle" height="112" ${ground}style="height:112px;${groundStyle}">` +
+        `<table ${TABLE} align="center" style="border-collapse:separate;"><tr>` +
+        `<td width="46" height="46" align="center" valign="middle" bgcolor="${TILE[tone]}" style="width:46px;height:46px;background-color:${TILE[tone]};border-radius:${S.radiusTile}px;font-family:${BODY};font-size:20px;line-height:46px;font-weight:700;color:${C.onPrimary};">` +
+        `${escapeHtml(monogram(it.monogram))}</td></tr></table></td>`;
+    const picture = it.imageUrl
+        ? `<td align="center" valign="middle" ${ground}style="${groundStyle}font-size:0;line-height:0;">` +
+            // width:100% with no max-width: on a phone the container's padding drops
+            // to 20px and the card grows past 476, and the picture must grow with it.
+            // No height attribute, so a blocked picture is not an empty 1200:630 box:
+            // it collapses to its alt text, the name in the tile's colour, on a
+            // ${ALT_STRIP}px strip of the tinted grid.
+            `<img src="${attrUrl(it.imageUrl)}" width="${w}" alt="${escapeHtml(it.name)}" ` +
+            `style="display:block;width:100%;height:auto;border:0;outline:none;border-radius:${r - 1}px ${r - 1}px 0 0;font-family:${BODY};font-size:16px;line-height:${ALT_STRIP}px;font-weight:700;color:${TILE[tone]};text-align:center;">` +
+            `</td>`
+        : undefined;
+    // Outlook never gets the picture: it blocks images by default, so it gets the tile.
+    const media = picture ? `${notMso(`<tr>${picture}</tr>`)}${mso(`<tr>${tile}</tr>`)}` : `<tr>${tile}</tr>`;
+    const meta = `<table ${TABLE} width="100%" style="width:100%;"><tr>` +
+        `<td valign="middle" style="font-family:${BODY};">` +
+        `<div style="font-size:16px;line-height:1.35;font-weight:500;color:${C.text};">${escapeHtml(it.name)}</div>` +
+        `<div style="font-size:13px;line-height:1.45;color:${C.textSecondary};">${escapeHtml(it.detail)}</div></td>` +
+        (status ? `<td align="right" valign="middle" style="padding-left:12px;">${statusPill(status)}</td>` : "") +
+        `</tr></table>` +
+        (it.action ? `<table ${TABLE} style="margin-top:14px;"><tr><td>${button(it.action, true)}</td></tr></table>` : "");
+    return (`<table ${TABLE} width="100%" bgcolor="${C.card}" style="width:100%;background-color:${C.card};border:1px solid ${C.hairline};border-radius:${r}px;border-collapse:separate;">` +
+        media +
+        `<tr><td style="padding:14px 16px 16px;">${meta}</td></tr>` +
+        `</table>`);
+}
+/** One block of the card, spaced from the one above it. */
+const row = (content, top, align = "center") => `<tr><td align="${align}" style="padding-top:${top}px;text-align:${align};">${content}</td></tr>`;
+function headlineBlock(content, base) {
+    const h = content.headline ? EMAIL_HEADLINES[content.headline] : undefined;
+    if (!h) {
+        // No headline: the title is the heading, in the body face.
+        return `<h1 style="margin:0;font-family:${BODY};font-size:24px;line-height:1.25;font-weight:700;color:${C.text};">${escapeHtml(content.title)}</h1>`;
+    }
+    const words = escapeHtml(h.text);
+    const live = `<span style="display:block;font-family:${HEAVY};font-size:34px;line-height:${h.height}px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:${C.primary};text-align:center;">${words}</span>`;
+    // No base: live text for everyone, the treatment Outlook gets.
+    if (!base)
+        return `<h1 style="margin:0;font-size:0;line-height:0;">${live}</h1>`;
+    return (`<h1 style="margin:0;font-size:0;line-height:0;">` +
+        // The picture, its alt text styled as a heading for a client that blocks it.
+        // No height attribute: a blocked image then takes the alt text's height
+        // rather than holding an empty box.
+        notMso(`<img src="${assetUrl(base, h.file)}" width="${h.width}" alt="${words}" ` +
+            `style="display:block;margin:0 auto;border:0;outline:none;max-width:100%;height:auto;font-family:${HEAVY};font-size:${altSize(h.text, h.width)}px;line-height:${h.height}px;font-weight:900;letter-spacing:0.02em;text-transform:uppercase;color:${C.primary};text-align:center;">`) +
+        // Outlook: the same words as live text, sized like the picture.
+        mso(live) +
+        `</h1>`);
+}
+/**
+ * The points: a small table centred in the card, one row per fact, a brand
+ * purple bullet and the words left-aligned beside it. The bullet is a text
+ * character rather than a drawn dot, so Outlook (which draws no inline-block
+ * box) shows it too; the same markup serves every branch.
+ */
+function pointsList(points) {
+    const rows = points
+        .map((p) => `<tr>` +
+        `<td valign="top" style="padding:3px 10px 3px 0;font-family:${BODY};font-size:15px;line-height:22px;font-weight:700;color:${C.primary};">•</td>` +
+        `<td valign="top" align="left" style="padding:3px 0;font-family:${BODY};font-size:15px;line-height:22px;color:${C.text};text-align:left;">${escapeHtml(p)}</td>` +
+        `</tr>`)
+        .join("");
+    return `<table ${TABLE} align="center" style="margin:0 auto;">${rows}</table>`;
+}
+function cardRows(content, base) {
+    const rows = [row(headlineBlock(content, base), 0)];
+    if (content.headline && EMAIL_HEADLINES[content.headline]) {
+        rows.push(row(`<p style="margin:0;font-family:${BODY};font-size:19px;line-height:1.46;color:${C.textSecondary};">${escapeHtml(content.title)}</p>`, 10));
+    }
+    if (content.code) {
+        rows.push(row(`<table ${TABLE} width="100%" style="width:100%;border-collapse:separate;"><tr>` +
+            `<td align="center" bgcolor="${C.raised}" style="background-color:${C.raised};border-radius:${S.radiusCard}px;padding:18px;font-family:${S.fontMono};font-size:30px;line-height:1;font-weight:600;letter-spacing:0.12em;color:${C.text};">` +
+            `${escapeHtml(content.code)}</td></tr></table>`, 24));
+    }
+    if (content.points?.length)
+        rows.push(row(pointsList(content.points), 18));
+    (content.lines ?? []).forEach((line, i) => {
+        rows.push(row(`<p style="margin:0;font-family:${BODY};font-size:15px;line-height:1.55;color:${C.textSecondary};">${escapeHtml(line)}</p>`, i === 0 ? 16 : 10));
+    });
+    (content.items ?? []).forEach((it, i) => rows.push(row(item(it, base), i === 0 ? 28 : 16, "left")));
+    if (content.action)
+        rows.push(row(`<table ${TABLE} align="center"><tr><td>${button(content.action)}</td></tr></table>`, 28));
+    if (content.note) {
+        rows.push(row(`<p style="margin:0;font-family:${BODY};font-size:13px;line-height:1.46;color:${C.textMuted};">${escapeHtml(content.note)}</p>`, content.action ? 12 : 20));
+    }
+    if (content.secondary) {
+        const { prefix, link } = content.secondary;
+        rows.push(row(`<p style="margin:0;font-family:${BODY};font-size:13px;line-height:1.5;color:${C.textSecondary};">${escapeHtml(prefix)} ` +
+            `<a href="${attrUrl(link.url)}" target="_blank" rel="noopener" style="color:${C.text};text-decoration:underline;">${escapeHtml(link.label)}</a></p>`, 16));
+    }
+    return rows.join("");
+}
+/** The sign-in footer's copyright line. */
+function copyright() {
+    return `© ${new Date().getUTCFullYear()}. CloudGrid. All Rights Reserved.`;
+}
+function footer(content) {
+    const { lines, link } = content.footer;
+    const p = (inner, last = false) => `<p style="margin:0 0 ${last ? 0 : 6}px;font-family:${BODY};font-size:13px;line-height:1.46;color:${C.textMuted};text-align:center;">${inner}</p>`;
+    const parts = lines.map((l) => p(escapeHtml(l)));
+    if (link) {
+        parts.push(p(`<a href="${attrUrl(link.url)}" target="_blank" rel="noopener" style="color:${C.text};text-decoration:underline;">${escapeHtml(link.label)}</a>${escapeHtml(link.suffix ?? "")}`));
+    }
+    parts.push(p(escapeHtml(copyright()), true));
+    return parts.join("");
+}
+/**
+ * The hidden preview line. The run of zero-width joiners after it stops an inbox
+ * filling the rest of the preview with the start of the body.
+ */
+function preheader(value) {
+    if (!value)
+        return "";
+    return (`<div style="display:none;max-height:0;max-width:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:${C.page};opacity:0;">` +
+        `${escapeHtml(value)}${"&zwnj;&nbsp;".repeat(60)}</div>`);
+}
+function renderHtml(content) {
+    const base = content.assetBaseUrl || undefined;
+    const w = EMAIL_WORDMARK;
+    const liveMark = `<span style="font-family:${WORDMARK_FACE};font-size:26px;line-height:${w.height}px;font-weight:700;letter-spacing:-0.5px;color:${C.primary};">cloudgrid</span>`;
+    return (`<!doctype html>` +
+        `<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">` +
+        `<head>` +
+        `<meta charset="utf-8">` +
+        `<meta name="viewport" content="width=device-width, initial-scale=1">` +
+        `<meta name="x-apple-disable-message-reformatting">` +
+        `<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">` +
+        `<meta name="color-scheme" content="light">` +
+        `<meta name="supported-color-schemes" content="light">` +
+        `<title>${escapeHtml(content.title)}</title>` +
+        fontLink(content.webFontsUrl) +
+        `<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->` +
+        `<style>body{margin:0;padding:0;width:100%!important;-webkit-text-size-adjust:100%;}table{border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}@media (max-width:600px){.cg-card{padding:32px 20px!important;}}</style>` +
+        `</head>` +
+        `<body bgcolor="${C.page}" style="margin:0;padding:0;background-color:${C.page};">` +
+        preheader(content.preheader) +
+        `<table ${TABLE} width="100%" bgcolor="${C.page}" style="width:100%;background-color:${C.page};"><tr>` +
+        `<td align="center" style="padding:32px 16px 40px;">` +
+        `<!--[if mso]><table ${TABLE} width="560" align="center"><tr><td><![endif]-->` +
+        // separate, not the reset's collapse: a collapsed table draws a rounded
+        // cell's border square, which showed as a faint edge behind the corners.
+        `<table ${TABLE} width="100%" style="width:100%;max-width:560px;border-collapse:separate;">` +
+        // the wordmark, top left
+        `<tr><td align="left" style="padding:0 4px 24px;">` +
+        // The alt says the name; blocked, it is set lowercase and purple, as the mark reads.
+        // No base: the live wordmark for everyone.
+        (base
+            ? notMso(`<img src="${assetUrl(base, w.file)}" width="${w.width}" alt="${escapeHtml(w.alt)}" ` +
+                `style="display:block;border:0;outline:none;width:${w.width}px;height:auto;font-family:${WORDMARK_FACE};font-size:24px;line-height:${w.height}px;font-weight:700;letter-spacing:-0.02em;text-transform:lowercase;color:${C.primary};">`) + mso(liveMark)
+            : liveMark) +
+        `</td></tr>` +
+        // the container
+        `<tr><td class="cg-card" bgcolor="${C.card}" style="background-color:${C.card};border:1px solid ${C.hairline};border-radius:${S.radiusContainer}px;padding:44px 40px 40px;">` +
+        `<table ${TABLE} width="100%" style="width:100%;">${cardRows(content, base)}</table>` +
+        `</td></tr>` +
+        // the footer
+        `<tr><td align="center" style="padding:24px 16px 0;">${footer(content)}</td></tr>` +
+        `</table>` +
+        `<!--[if mso]></td></tr></table><![endif]-->` +
+        `</td></tr></table>` +
+        `</body></html>`);
+}
+/**
+ * The plain-text part. Everything the HTML says, in the same order, with every
+ * link written out as its URL, so a text-only client loses nothing it can act on.
+ */
+function renderText(content) {
+    const h = content.headline ? EMAIL_HEADLINES[content.headline] : undefined;
+    const out = h ? [h.text, content.title] : [content.title];
+    if (content.code)
+        out.push(content.code);
+    if (content.points?.length)
+        out.push(content.points.map((p) => `- ${p}`).join("\n"));
+    out.push(...(content.lines ?? []));
+    for (const it of content.items ?? []) {
+        const status = it.status ?? it.badge;
+        const lines = [status ? `${it.name} (${status.label})` : it.name, it.detail];
+        if (it.action)
+            lines.push(`${it.action.label}: ${safeUrl(it.action.url)}`);
+        out.push(lines.join("\n"));
+    }
+    if (content.action)
+        out.push(`${content.action.label}: ${safeUrl(content.action.url)}`);
+    if (content.note)
+        out.push(content.note);
+    if (content.secondary) {
+        out.push(`${content.secondary.prefix} ${safeUrl(content.secondary.link.url)}`);
+    }
+    const foot = [...content.footer.lines];
+    const link = content.footer.link;
+    if (link)
+        foot.push(`${link.label}${link.suffix ?? ""}\n${safeUrl(link.url)}`);
+    foot.push(copyright());
+    out.push(`--\n${foot.join("\n")}`);
+    return `${out.join("\n\n")}\n`;
+}
+/** Render one email. Pure: the same content always gives the same strings (within a year). */
+export function renderEmail(content) {
+    return { html: renderHtml(content), text: renderText(content) };
+}
+//# sourceMappingURL=index.js.map