@cloudgrid-io/ui 0.31.3 → 0.31.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"assets.d.ts","sourceRoot":"","sources":["../../src/email/assets.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc;;;;;CAA8E,CAAA;AAEzG,eAAO,MAAM,UAAU;;;CAA0C,CAAA;AAEjE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOlB,CAAA;AAEV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,eAAe,CAAA"}

package/dist/email/assets.js

@@ -0,0 +1,16 @@
+// GENERATED by scripts/generate-email-assets.mjs. Do not edit; regenerate.
+//
+// The email's images, in packages/ui/src/brand/email/ (shipped as
+// dist/brand/email/). Each PNG is 2x the width and height below; the email shows
+// it at these sizes. A headline's `text` is its alt text.
+export const EMAIL_WORDMARK = { file: "wordmark.png", width: 110, height: 26, alt: "CloudGrid" };
+export const EMAIL_MESH = { file: "mesh.png", size: 22 };
+export const EMAIL_HEADLINES = {
+    "expiring-soon": { text: "EXPIRING SOON", file: "headline-expiring-soon.png", width: 236, height: 47 },
+    "expires-tomorrow": { text: "EXPIRES TOMORROW", file: "headline-expires-tomorrow.png", width: 314, height: 47 },
+    "expired": { text: "IT EXPIRED", file: "headline-expired.png", width: 165, height: 47 },
+    "sign-in-code": { text: "YOUR SIGN-IN CODE", file: "headline-sign-in-code.png", width: 297, height: 47 },
+    "invited": { text: "YOU'RE INVITED", file: "headline-invited.png", width: 236, height: 47 },
+    "activity": { text: "WHAT'S HAPPENING", file: "headline-activity.png", width: 301, height: 47 },
+};
+//# sourceMappingURL=assets.js.map

package/dist/email/assets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assets.js","sourceRoot":"","sources":["../../src/email/assets.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,EAAE;AACF,kEAAkE;AAClE,iFAAiF;AACjF,0DAA0D;AAE1D,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAW,CAAA;AAEzG,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,EAAW,CAAA;AAEjE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,eAAe,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,4BAA4B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IACtG,kBAAkB,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,+BAA+B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAC/G,SAAS,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IACvF,cAAc,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,IAAI,EAAE,2BAA2B,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IACxG,SAAS,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,sBAAsB,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;IAC3F,UAAU,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,IAAI,EAAE,uBAAuB,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE;CACvF,CAAA"}

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