@broberg/mail-core 0.1.0

package/README.md

@@ -0,0 +1,52 @@
+# @broberg/mail-core
+
+Branded HTML email **shell + primitives** for the broberg.ai fleet — layer 1 (visual structure) of the mail stack. Generalized from sanneandersen's hand-rolled shell, cross-checked against xrt81/cardmem/cms's own branded templates.
+
+```bash
+npm i @broberg/mail-core      # exact-pin for prod-auth deps
+```
+
+**Not this package:** sending (→ `@broberg/mail`) or template-content/per-tenant override resolution (→ `@broberg/mail-templates`, F040). This package only turns brand params + body HTML into a complete, email-client-safe document.
+
+```ts
+import { renderShell, heading, paragraph, cta, factBox, signOff, makeLogoAttachment } from "@broberg/mail-core";
+
+const html = renderShell({
+  accentColor: "#2E6B62",       // required — no fleet-wide default, nothing silently branded
+  cardBg: "#FAF9F6",             // optional, default "#ffffff"
+  subject: "Welcome to X",
+  preheader: "Glad to have you",
+  logoUrl: "cid:logo",           // pair with makeLogoAttachment for inline CID logos
+  bodyHtml: [
+    heading("Welcome!"),
+    paragraph("Thanks for signing up."),
+    factBox([{ label: "Plan", value: "Pro" }, { label: "Started", value: "2026-07-02" }]),
+    cta("https://example.com/start", "Get started", { accentColor: "#2E6B62" }),
+    signOff("Talk soon,", "The team", "— X"),
+  ].join(""),
+  footerLines: ["Acme Inc · Some Street 1"],
+});
+```
+
+## Why `accentColor` is required, not defaulted
+
+Every other color has a sensible neutral default (`cardBg` white, `textColor` auto-derived for contrast against `cardBg`, `backdropColor` light grey) — but `accentColor` doesn't, on purpose. A default accent color IS a brand choice; shipping one would silently brand every consumer that forgets to set it. Pass your product's own accent explicitly.
+
+## Dark cards work
+
+`textColor` auto-derives from `cardBg`'s perceived luminance — a dark `cardBg` (e.g. `#1a1a1a`) gets light text by default, no manual `textColor` needed (though you can still override it).
+
+## Email-client compatibility
+
+Table-based layout throughout (`role="presentation"` tables, not flex/grid), inline styles, `prefers-color-scheme` + Outlook.com's `[data-ogsc]` dark-mode-inversion guards. `cta()` renders a table-cell button, never a bare `<a>`/`<button>` some clients strip styling from.
+
+## Logo attachments
+
+`makeLogoAttachment(filePath)` reads a file from a **caller-supplied full path** (never assumes `process.cwd()`) and returns a Resend-shaped inline (CID) attachment — or `null` if the file is missing, so a missing logo degrades gracefully instead of breaking a transactional send.
+
+```ts
+const attachment = makeLogoAttachment("/app/public/brand/logo.png");
+if (attachment) {
+  await resend.emails.send({ ..., attachments: [attachment] });
+}
+```

package/dist/index.cjs

@@ -0,0 +1,158 @@
+'use strict';
+
+var fs = require('fs');
+
+// src/index.ts
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);
+}
+function escapeAttr(s) {
+  return escapeHtml(s);
+}
+function isDark(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return false;
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255, g = n >> 8 & 255, b = n & 255;
+  return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
+}
+function resolveColors(b) {
+  const cardBg = b.cardBg ?? "#ffffff";
+  const textColor = b.textColor ?? (isDark(cardBg) ? "#f5f5f5" : "#1a1a1a");
+  const backdropColor = b.backdropColor ?? "#f4f4f5";
+  const fontSans = b.fontSans ?? "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif";
+  const fontSerif = b.fontSerif ?? "Georgia,'Times New Roman',serif";
+  return { accentColor: b.accentColor, cardBg, textColor, backdropColor, fontSans, fontSerif };
+}
+function renderShell(opts) {
+  const { accentColor, cardBg, textColor, backdropColor, fontSans } = resolveColors(opts);
+  const lang = opts.lang ?? "en";
+  const showFooter = opts.showFooter ?? true;
+  const logoBlock = opts.logoUrl ? `<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto 16px;">
+    <tr><td>
+      <img src="${escapeAttr(opts.logoUrl)}" alt="${escapeAttr(opts.logoAlt ?? "")}" style="display:block;margin:0 auto;max-width:180px;height:auto;border:0;">
+    </td></tr>
+  </table>` : "";
+  const footerBlock = showFooter ? `<tr>
+      <td bgcolor="${backdropColor}" style="background:${backdropColor};padding:16px 40px 32px;text-align:center;border-top:1px solid rgba(0,0,0,0.08);">
+        ${(opts.footerLines ?? []).map((l) => `<p style="margin:0 0 4px;font-size:11px;opacity:0.65;">${escapeHtml(l)}</p>`).join("")}
+        ${opts.footerHref ? `<p style="margin:0;font-size:11px;"><a href="${escapeAttr(opts.footerHref)}" style="color:${accentColor};text-decoration:none;font-weight:600;">${escapeHtml(opts.footerLabel ?? opts.footerHref)}</a></p>` : ""}
+      </td>
+    </tr>` : "";
+  return `<!doctype html>
+<html lang="${escapeAttr(lang)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="color-scheme" content="light only">
+<meta name="supported-color-schemes" content="light only">
+<title>${escapeHtml(opts.subject)}</title>
+<style>
+  :root { color-scheme: light only; supported-color-schemes: light only; }
+  @media (prefers-color-scheme: dark) {
+    .mc-bg-outer { background:${backdropColor} !important; }
+    .mc-bg-card  { background:${cardBg} !important; }
+    .mc-text     { color:${textColor} !important; }
+  }
+  [data-ogsc] .mc-bg-outer { background:${backdropColor} !important; }
+  [data-ogsc] .mc-bg-card  { background:${cardBg} !important; }
+  [data-ogsc] .mc-text     { color:${textColor} !important; }
+</style>
+</head>
+<body class="mc-bg-outer mc-text" bgcolor="${backdropColor}" style="margin:0;padding:0;background:${backdropColor};font-family:${fontSans};color:${textColor};-webkit-font-smoothing:antialiased;">
+${opts.preheader ? `<div style="display:none;font-size:1px;max-height:0;overflow:hidden;mso-hide:all;">${escapeHtml(opts.preheader)}</div>` : ""}
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="${backdropColor}" class="mc-bg-outer" style="background:${backdropColor};padding:32px 16px;">
+  <tr>
+    <td align="center">
+      <table role="presentation" width="520" cellpadding="0" cellspacing="0" border="0" bgcolor="${cardBg}" class="mc-bg-card" style="max-width:520px;width:100%;background:${cardBg};border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08);">
+        <tr><td bgcolor="${accentColor}" style="background:${accentColor};height:4px;line-height:4px;font-size:0;">&nbsp;</td></tr>
+        <tr>
+          <td bgcolor="${cardBg}" class="mc-bg-card" style="background:${cardBg};padding:40px 40px 0;text-align:center;">
+            ${logoBlock}
+          </td>
+        </tr>
+        <tr>
+          <td bgcolor="${cardBg}" class="mc-bg-card mc-text" style="background:${cardBg};padding:32px 40px;">
+            ${opts.bodyHtml}
+          </td>
+        </tr>
+        ${footerBlock}
+      </table>
+    </td>
+  </tr>
+</table>
+</body>
+</html>`;
+}
+function heading(text, opts) {
+  const fontSerif = opts?.fontSerif ?? "Georgia,'Times New Roman',serif";
+  const textColor = opts?.textColor ?? "#1a1a1a";
+  return `<h1 style="margin:0 0 12px;font-family:${fontSerif};font-size:28px;font-weight:400;color:${textColor};text-align:center;">${escapeHtml(text)}</h1>`;
+}
+function paragraph(text) {
+  return `<p style="margin:0 0 16px;font-size:15px;line-height:1.6;">${escapeHtml(text)}</p>`;
+}
+function paragraphHtml(html) {
+  return `<p style="margin:0 0 16px;font-size:15px;line-height:1.6;">${html}</p>`;
+}
+function signOff(line1, line2, sign) {
+  return `<div style="margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.1);text-align:center;">
+    <p style="margin:0;font-size:15px;line-height:1.8;">
+      ${escapeHtml(line1)}<br>
+      ${escapeHtml(line2)}<br>
+      <span style="font-size:20px;">${escapeHtml(sign)}</span>
+    </p>
+  </div>`;
+}
+function cta(href, label, opts) {
+  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:28px auto 8px;">
+    <tr>
+      <td bgcolor="${opts.accentColor}" style="background:${opts.accentColor};border-radius:999px;">
+        <a href="${escapeAttr(href)}" style="display:inline-block;padding:14px 28px;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;">${escapeHtml(label)}</a>
+      </td>
+    </tr>
+  </table>`;
+}
+function factBox(rows, opts) {
+  if (rows.length === 0) return "";
+  const border = opts?.accentColor ? `border-left:3px solid ${opts.accentColor};` : "border:1px solid rgba(0,0,0,0.1);";
+  const cells = rows.map(
+    (r) => `<tr>
+        <td style="padding:6px 12px 6px 0;font-size:13px;opacity:0.65;white-space:nowrap;vertical-align:top;">${escapeHtml(r.label)}</td>
+        <td style="padding:6px 0;font-size:13px;font-weight:600;">${escapeHtml(r.value)}</td>
+      </tr>`
+  ).join("");
+  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:16px 0;${border}border-radius:8px;">
+    <tr><td style="padding:12px 16px;">
+      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">${cells}</table>
+    </td></tr>
+  </table>`;
+}
+function fill(template, vars) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => key in vars ? String(vars[key]) : `{${key}}`);
+}
+function makeLogoAttachment(filePath, opts) {
+  if (!fs.existsSync(filePath)) return null;
+  try {
+    const content = fs.readFileSync(filePath);
+    const filename = filePath.split("/").pop() ?? "logo";
+    const contentType = opts?.contentType ?? (filename.endsWith(".svg") ? "image/svg+xml" : "image/png");
+    return { filename, content, contentId: opts?.contentId ?? "logo", contentType };
+  } catch {
+    return null;
+  }
+}
+
+exports.cta = cta;
+exports.escapeAttr = escapeAttr;
+exports.escapeHtml = escapeHtml;
+exports.factBox = factBox;
+exports.fill = fill;
+exports.heading = heading;
+exports.makeLogoAttachment = makeLogoAttachment;
+exports.paragraph = paragraph;
+exports.paragraphHtml = paragraphHtml;
+exports.renderShell = renderShell;
+exports.signOff = signOff;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":["existsSync","readFileSync"],"mappings":"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","file":"index.cjs","sourcesContent":["/**\n * Branded HTML email shell + primitives — layer 1 (visual structure) of the\n * fleet's mail stack. No sending (that's @broberg/mail) and no template\n * content/override-resolution (that's @broberg/mail-templates, F040) — this\n * package only turns brand params + body HTML into a complete, email-client-\n * safe HTML document, plus the small block builders every template needs.\n *\n * Generalizes sanneandersen's site/src/lib/mail-templates/shell.ts (table\n * layout, dark-mode [data-ogsc] Outlook guards, CID logo) — every color/font/\n * copy value that file hardcoded is now a caller-supplied option.\n */\n\nimport { readFileSync, existsSync } from \"node:fs\";\n\nexport function escapeHtml(s: string): string {\n  return s.replace(/[&<>\"']/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\", \"'\": \"&#39;\" })[c] ?? c);\n}\n\nexport function escapeAttr(s: string): string {\n  return escapeHtml(s);\n}\n\nexport interface BrandColors {\n  /** Top-of-card accent + CTA button color. Required — no fleet-wide default,\n   *  so nothing is silently branded as some other product's identity. */\n  accentColor: string;\n  /** Card background. Default '#ffffff' — pass a dark value (e.g. '#1a1a1a')\n   *  for a dark-card brand; textColor's default adapts automatically. */\n  cardBg?: string;\n  /** Body text color. Default derived from cardBg (light card → dark text,\n   *  dark card → light text) so a dark-card brand isn't illegible by default. */\n  textColor?: string;\n  /** Page background behind the card. Default '#f4f4f5'. */\n  backdropColor?: string;\n  fontSans?: string;\n  fontSerif?: string;\n}\n\nfunction isDark(hex: string): boolean {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());\n  if (!m) return false;\n  const n = parseInt(m[1], 16);\n  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n  // Perceived luminance (ITU-R BT.601).\n  return (r * 299 + g * 587 + b * 114) / 1000 < 128;\n}\n\nfunction resolveColors(b: BrandColors) {\n  const cardBg = b.cardBg ?? \"#ffffff\";\n  const textColor = b.textColor ?? (isDark(cardBg) ? \"#f5f5f5\" : \"#1a1a1a\");\n  const backdropColor = b.backdropColor ?? \"#f4f4f5\";\n  const fontSans = b.fontSans ?? \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\";\n  const fontSerif = b.fontSerif ?? \"Georgia,'Times New Roman',serif\";\n  return { accentColor: b.accentColor, cardBg, textColor, backdropColor, fontSans, fontSerif };\n}\n\nexport interface ShellOpts extends BrandColors {\n  subject: string;\n  /** Hidden preview text shown in the mail-client inbox list. */\n  preheader?: string;\n  lang?: string;\n  /** Pre-rendered body HTML — compose with heading/paragraph/cta/factBox/signOff. */\n  bodyHtml: string;\n  showFooter?: boolean;\n  footerLines?: string[];\n  footerHref?: string;\n  footerLabel?: string;\n  /** Resolved logo <img> src — a cid: reference (see makeLogoAttachment) or a hosted URL. */\n  logoUrl?: string;\n  logoAlt?: string;\n}\n\n/** Renders a complete, email-client-safe HTML document: table layout (not\n *  flex/grid — Outlook doesn't support it), dark-mode-inversion guards via\n *  both `prefers-color-scheme` and Outlook.com's `[data-ogsc]`, a rounded\n *  card with an accent-colored top strip, and an optional footer. */\nexport function renderShell(opts: ShellOpts): string {\n  const { accentColor, cardBg, textColor, backdropColor, fontSans } = resolveColors(opts);\n  const lang = opts.lang ?? \"en\";\n  const showFooter = opts.showFooter ?? true;\n\n  const logoBlock = opts.logoUrl\n    ? `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\" style=\"margin:0 auto 16px;\">\n    <tr><td>\n      <img src=\"${escapeAttr(opts.logoUrl)}\" alt=\"${escapeAttr(opts.logoAlt ?? \"\")}\" style=\"display:block;margin:0 auto;max-width:180px;height:auto;border:0;\">\n    </td></tr>\n  </table>`\n    : \"\";\n\n  const footerBlock = showFooter\n    ? `<tr>\n      <td bgcolor=\"${backdropColor}\" style=\"background:${backdropColor};padding:16px 40px 32px;text-align:center;border-top:1px solid rgba(0,0,0,0.08);\">\n        ${(opts.footerLines ?? []).map((l) => `<p style=\"margin:0 0 4px;font-size:11px;opacity:0.65;\">${escapeHtml(l)}</p>`).join(\"\")}\n        ${opts.footerHref ? `<p style=\"margin:0;font-size:11px;\"><a href=\"${escapeAttr(opts.footerHref)}\" style=\"color:${accentColor};text-decoration:none;font-weight:600;\">${escapeHtml(opts.footerLabel ?? opts.footerHref)}</a></p>` : \"\"}\n      </td>\n    </tr>`\n    : \"\";\n\n  return `<!doctype html>\n<html lang=\"${escapeAttr(lang)}\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<meta name=\"color-scheme\" content=\"light only\">\n<meta name=\"supported-color-schemes\" content=\"light only\">\n<title>${escapeHtml(opts.subject)}</title>\n<style>\n  :root { color-scheme: light only; supported-color-schemes: light only; }\n  @media (prefers-color-scheme: dark) {\n    .mc-bg-outer { background:${backdropColor} !important; }\n    .mc-bg-card  { background:${cardBg} !important; }\n    .mc-text     { color:${textColor} !important; }\n  }\n  [data-ogsc] .mc-bg-outer { background:${backdropColor} !important; }\n  [data-ogsc] .mc-bg-card  { background:${cardBg} !important; }\n  [data-ogsc] .mc-text     { color:${textColor} !important; }\n</style>\n</head>\n<body class=\"mc-bg-outer mc-text\" bgcolor=\"${backdropColor}\" style=\"margin:0;padding:0;background:${backdropColor};font-family:${fontSans};color:${textColor};-webkit-font-smoothing:antialiased;\">\n${opts.preheader ? `<div style=\"display:none;font-size:1px;max-height:0;overflow:hidden;mso-hide:all;\">${escapeHtml(opts.preheader)}</div>` : \"\"}\n<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" bgcolor=\"${backdropColor}\" class=\"mc-bg-outer\" style=\"background:${backdropColor};padding:32px 16px;\">\n  <tr>\n    <td align=\"center\">\n      <table role=\"presentation\" width=\"520\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" bgcolor=\"${cardBg}\" class=\"mc-bg-card\" style=\"max-width:520px;width:100%;background:${cardBg};border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08);\">\n        <tr><td bgcolor=\"${accentColor}\" style=\"background:${accentColor};height:4px;line-height:4px;font-size:0;\">&nbsp;</td></tr>\n        <tr>\n          <td bgcolor=\"${cardBg}\" class=\"mc-bg-card\" style=\"background:${cardBg};padding:40px 40px 0;text-align:center;\">\n            ${logoBlock}\n          </td>\n        </tr>\n        <tr>\n          <td bgcolor=\"${cardBg}\" class=\"mc-bg-card mc-text\" style=\"background:${cardBg};padding:32px 40px;\">\n            ${opts.bodyHtml}\n          </td>\n        </tr>\n        ${footerBlock}\n      </table>\n    </td>\n  </tr>\n</table>\n</body>\n</html>`;\n}\n\nexport function heading(text: string, opts?: { fontSerif?: string; textColor?: string }): string {\n  const fontSerif = opts?.fontSerif ?? \"Georgia,'Times New Roman',serif\";\n  const textColor = opts?.textColor ?? \"#1a1a1a\";\n  return `<h1 style=\"margin:0 0 12px;font-family:${fontSerif};font-size:28px;font-weight:400;color:${textColor};text-align:center;\">${escapeHtml(text)}</h1>`;\n}\n\nexport function paragraph(text: string): string {\n  return `<p style=\"margin:0 0 16px;font-size:15px;line-height:1.6;\">${escapeHtml(text)}</p>`;\n}\n\n/** Like paragraph(), but the string is injected as raw HTML (not escaped) —\n *  the caller must escapeHtml() any dynamic values themselves. */\nexport function paragraphHtml(html: string): string {\n  return `<p style=\"margin:0 0 16px;font-size:15px;line-height:1.6;\">${html}</p>`;\n}\n\nexport function signOff(line1: string, line2: string, sign: string): string {\n  return `<div style=\"margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.1);text-align:center;\">\n    <p style=\"margin:0;font-size:15px;line-height:1.8;\">\n      ${escapeHtml(line1)}<br>\n      ${escapeHtml(line2)}<br>\n      <span style=\"font-size:20px;\">${escapeHtml(sign)}</span>\n    </p>\n  </div>`;\n}\n\n/** A bulletproof (table-cell-based, not a bare <a>/<button>) call-to-action\n *  button — the pattern every surveyed template hand-rolled per-brand. */\nexport function cta(href: string, label: string, opts: { accentColor: string }): string {\n  return `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\" style=\"margin:28px auto 8px;\">\n    <tr>\n      <td bgcolor=\"${opts.accentColor}\" style=\"background:${opts.accentColor};border-radius:999px;\">\n        <a href=\"${escapeAttr(href)}\" style=\"display:inline-block;padding:14px 28px;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;\">${escapeHtml(label)}</a>\n      </td>\n    </tr>\n  </table>`;\n}\n\nexport interface FactRow {\n  label: string;\n  value: string;\n}\n\n/** A structured label/value block (table rows, not flex/grid — email-client\n *  safe) for rendering e.g. booking details or submitted form fields. */\nexport function factBox(rows: FactRow[], opts?: { accentColor?: string }): string {\n  if (rows.length === 0) return \"\";\n  const border = opts?.accentColor ? `border-left:3px solid ${opts.accentColor};` : \"border:1px solid rgba(0,0,0,0.1);\";\n  const cells = rows\n    .map(\n      (r) => `<tr>\n        <td style=\"padding:6px 12px 6px 0;font-size:13px;opacity:0.65;white-space:nowrap;vertical-align:top;\">${escapeHtml(r.label)}</td>\n        <td style=\"padding:6px 0;font-size:13px;font-weight:600;\">${escapeHtml(r.value)}</td>\n      </tr>`,\n    )\n    .join(\"\");\n  return `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"margin:16px 0;${border}border-radius:8px;\">\n    <tr><td style=\"padding:12px 16px;\">\n      <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">${cells}</table>\n    </td></tr>\n  </table>`;\n}\n\n/** Replace {token} placeholders with values. Unknown tokens are left as-is. */\nexport function fill(template: string, vars: Record<string, string | number>): string {\n  return template.replace(/\\{(\\w+)\\}/g, (_, key) => (key in vars ? String(vars[key]) : `{${key}}`));\n}\n\nexport interface MailAttachment {\n  filename: string;\n  content: Buffer;\n  contentId: string;\n  contentType: string;\n}\n\n/** Reads a logo file from a caller-supplied full path and returns a\n *  Resend-shaped inline (CID) attachment, or null if the file doesn't exist —\n *  never throws, so a missing logo degrades to no-logo, not a broken send. */\nexport function makeLogoAttachment(filePath: string, opts?: { contentId?: string; contentType?: string }): MailAttachment | null {\n  if (!existsSync(filePath)) return null;\n  try {\n    const content = readFileSync(filePath);\n    const filename = filePath.split(\"/\").pop() ?? \"logo\";\n    const contentType = opts?.contentType ?? (filename.endsWith(\".svg\") ? \"image/svg+xml\" : \"image/png\");\n    return { filename, content, contentId: opts?.contentId ?? \"logo\", contentType };\n  } catch {\n    return null;\n  }\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,88 @@
+/**
+ * Branded HTML email shell + primitives — layer 1 (visual structure) of the
+ * fleet's mail stack. No sending (that's @broberg/mail) and no template
+ * content/override-resolution (that's @broberg/mail-templates, F040) — this
+ * package only turns brand params + body HTML into a complete, email-client-
+ * safe HTML document, plus the small block builders every template needs.
+ *
+ * Generalizes sanneandersen's site/src/lib/mail-templates/shell.ts (table
+ * layout, dark-mode [data-ogsc] Outlook guards, CID logo) — every color/font/
+ * copy value that file hardcoded is now a caller-supplied option.
+ */
+declare function escapeHtml(s: string): string;
+declare function escapeAttr(s: string): string;
+interface BrandColors {
+    /** Top-of-card accent + CTA button color. Required — no fleet-wide default,
+     *  so nothing is silently branded as some other product's identity. */
+    accentColor: string;
+    /** Card background. Default '#ffffff' — pass a dark value (e.g. '#1a1a1a')
+     *  for a dark-card brand; textColor's default adapts automatically. */
+    cardBg?: string;
+    /** Body text color. Default derived from cardBg (light card → dark text,
+     *  dark card → light text) so a dark-card brand isn't illegible by default. */
+    textColor?: string;
+    /** Page background behind the card. Default '#f4f4f5'. */
+    backdropColor?: string;
+    fontSans?: string;
+    fontSerif?: string;
+}
+interface ShellOpts extends BrandColors {
+    subject: string;
+    /** Hidden preview text shown in the mail-client inbox list. */
+    preheader?: string;
+    lang?: string;
+    /** Pre-rendered body HTML — compose with heading/paragraph/cta/factBox/signOff. */
+    bodyHtml: string;
+    showFooter?: boolean;
+    footerLines?: string[];
+    footerHref?: string;
+    footerLabel?: string;
+    /** Resolved logo <img> src — a cid: reference (see makeLogoAttachment) or a hosted URL. */
+    logoUrl?: string;
+    logoAlt?: string;
+}
+/** Renders a complete, email-client-safe HTML document: table layout (not
+ *  flex/grid — Outlook doesn't support it), dark-mode-inversion guards via
+ *  both `prefers-color-scheme` and Outlook.com's `[data-ogsc]`, a rounded
+ *  card with an accent-colored top strip, and an optional footer. */
+declare function renderShell(opts: ShellOpts): string;
+declare function heading(text: string, opts?: {
+    fontSerif?: string;
+    textColor?: string;
+}): string;
+declare function paragraph(text: string): string;
+/** Like paragraph(), but the string is injected as raw HTML (not escaped) —
+ *  the caller must escapeHtml() any dynamic values themselves. */
+declare function paragraphHtml(html: string): string;
+declare function signOff(line1: string, line2: string, sign: string): string;
+/** A bulletproof (table-cell-based, not a bare <a>/<button>) call-to-action
+ *  button — the pattern every surveyed template hand-rolled per-brand. */
+declare function cta(href: string, label: string, opts: {
+    accentColor: string;
+}): string;
+interface FactRow {
+    label: string;
+    value: string;
+}
+/** A structured label/value block (table rows, not flex/grid — email-client
+ *  safe) for rendering e.g. booking details or submitted form fields. */
+declare function factBox(rows: FactRow[], opts?: {
+    accentColor?: string;
+}): string;
+/** Replace {token} placeholders with values. Unknown tokens are left as-is. */
+declare function fill(template: string, vars: Record<string, string | number>): string;
+interface MailAttachment {
+    filename: string;
+    content: Buffer;
+    contentId: string;
+    contentType: string;
+}
+/** Reads a logo file from a caller-supplied full path and returns a
+ *  Resend-shaped inline (CID) attachment, or null if the file doesn't exist —
+ *  never throws, so a missing logo degrades to no-logo, not a broken send. */
+declare function makeLogoAttachment(filePath: string, opts?: {
+    contentId?: string;
+    contentType?: string;
+}): MailAttachment | null;
+
+export { type BrandColors, type FactRow, type MailAttachment, type ShellOpts, cta, escapeAttr, escapeHtml, factBox, fill, heading, makeLogoAttachment, paragraph, paragraphHtml, renderShell, signOff };

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Branded HTML email shell + primitives — layer 1 (visual structure) of the
+ * fleet's mail stack. No sending (that's @broberg/mail) and no template
+ * content/override-resolution (that's @broberg/mail-templates, F040) — this
+ * package only turns brand params + body HTML into a complete, email-client-
+ * safe HTML document, plus the small block builders every template needs.
+ *
+ * Generalizes sanneandersen's site/src/lib/mail-templates/shell.ts (table
+ * layout, dark-mode [data-ogsc] Outlook guards, CID logo) — every color/font/
+ * copy value that file hardcoded is now a caller-supplied option.
+ */
+declare function escapeHtml(s: string): string;
+declare function escapeAttr(s: string): string;
+interface BrandColors {
+    /** Top-of-card accent + CTA button color. Required — no fleet-wide default,
+     *  so nothing is silently branded as some other product's identity. */
+    accentColor: string;
+    /** Card background. Default '#ffffff' — pass a dark value (e.g. '#1a1a1a')
+     *  for a dark-card brand; textColor's default adapts automatically. */
+    cardBg?: string;
+    /** Body text color. Default derived from cardBg (light card → dark text,
+     *  dark card → light text) so a dark-card brand isn't illegible by default. */
+    textColor?: string;
+    /** Page background behind the card. Default '#f4f4f5'. */
+    backdropColor?: string;
+    fontSans?: string;
+    fontSerif?: string;
+}
+interface ShellOpts extends BrandColors {
+    subject: string;
+    /** Hidden preview text shown in the mail-client inbox list. */
+    preheader?: string;
+    lang?: string;
+    /** Pre-rendered body HTML — compose with heading/paragraph/cta/factBox/signOff. */
+    bodyHtml: string;
+    showFooter?: boolean;
+    footerLines?: string[];
+    footerHref?: string;
+    footerLabel?: string;
+    /** Resolved logo <img> src — a cid: reference (see makeLogoAttachment) or a hosted URL. */
+    logoUrl?: string;
+    logoAlt?: string;
+}
+/** Renders a complete, email-client-safe HTML document: table layout (not
+ *  flex/grid — Outlook doesn't support it), dark-mode-inversion guards via
+ *  both `prefers-color-scheme` and Outlook.com's `[data-ogsc]`, a rounded
+ *  card with an accent-colored top strip, and an optional footer. */
+declare function renderShell(opts: ShellOpts): string;
+declare function heading(text: string, opts?: {
+    fontSerif?: string;
+    textColor?: string;
+}): string;
+declare function paragraph(text: string): string;
+/** Like paragraph(), but the string is injected as raw HTML (not escaped) —
+ *  the caller must escapeHtml() any dynamic values themselves. */
+declare function paragraphHtml(html: string): string;
+declare function signOff(line1: string, line2: string, sign: string): string;
+/** A bulletproof (table-cell-based, not a bare <a>/<button>) call-to-action
+ *  button — the pattern every surveyed template hand-rolled per-brand. */
+declare function cta(href: string, label: string, opts: {
+    accentColor: string;
+}): string;
+interface FactRow {
+    label: string;
+    value: string;
+}
+/** A structured label/value block (table rows, not flex/grid — email-client
+ *  safe) for rendering e.g. booking details or submitted form fields. */
+declare function factBox(rows: FactRow[], opts?: {
+    accentColor?: string;
+}): string;
+/** Replace {token} placeholders with values. Unknown tokens are left as-is. */
+declare function fill(template: string, vars: Record<string, string | number>): string;
+interface MailAttachment {
+    filename: string;
+    content: Buffer;
+    contentId: string;
+    contentType: string;
+}
+/** Reads a logo file from a caller-supplied full path and returns a
+ *  Resend-shaped inline (CID) attachment, or null if the file doesn't exist —
+ *  never throws, so a missing logo degrades to no-logo, not a broken send. */
+declare function makeLogoAttachment(filePath: string, opts?: {
+    contentId?: string;
+    contentType?: string;
+}): MailAttachment | null;
+
+export { type BrandColors, type FactRow, type MailAttachment, type ShellOpts, cta, escapeAttr, escapeHtml, factBox, fill, heading, makeLogoAttachment, paragraph, paragraphHtml, renderShell, signOff };

package/dist/index.js

@@ -0,0 +1,146 @@
+import { existsSync, readFileSync } from 'fs';
+
+// src/index.ts
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c] ?? c);
+}
+function escapeAttr(s) {
+  return escapeHtml(s);
+}
+function isDark(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) return false;
+  const n = parseInt(m[1], 16);
+  const r = n >> 16 & 255, g = n >> 8 & 255, b = n & 255;
+  return (r * 299 + g * 587 + b * 114) / 1e3 < 128;
+}
+function resolveColors(b) {
+  const cardBg = b.cardBg ?? "#ffffff";
+  const textColor = b.textColor ?? (isDark(cardBg) ? "#f5f5f5" : "#1a1a1a");
+  const backdropColor = b.backdropColor ?? "#f4f4f5";
+  const fontSans = b.fontSans ?? "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif";
+  const fontSerif = b.fontSerif ?? "Georgia,'Times New Roman',serif";
+  return { accentColor: b.accentColor, cardBg, textColor, backdropColor, fontSans, fontSerif };
+}
+function renderShell(opts) {
+  const { accentColor, cardBg, textColor, backdropColor, fontSans } = resolveColors(opts);
+  const lang = opts.lang ?? "en";
+  const showFooter = opts.showFooter ?? true;
+  const logoBlock = opts.logoUrl ? `<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:0 auto 16px;">
+    <tr><td>
+      <img src="${escapeAttr(opts.logoUrl)}" alt="${escapeAttr(opts.logoAlt ?? "")}" style="display:block;margin:0 auto;max-width:180px;height:auto;border:0;">
+    </td></tr>
+  </table>` : "";
+  const footerBlock = showFooter ? `<tr>
+      <td bgcolor="${backdropColor}" style="background:${backdropColor};padding:16px 40px 32px;text-align:center;border-top:1px solid rgba(0,0,0,0.08);">
+        ${(opts.footerLines ?? []).map((l) => `<p style="margin:0 0 4px;font-size:11px;opacity:0.65;">${escapeHtml(l)}</p>`).join("")}
+        ${opts.footerHref ? `<p style="margin:0;font-size:11px;"><a href="${escapeAttr(opts.footerHref)}" style="color:${accentColor};text-decoration:none;font-weight:600;">${escapeHtml(opts.footerLabel ?? opts.footerHref)}</a></p>` : ""}
+      </td>
+    </tr>` : "";
+  return `<!doctype html>
+<html lang="${escapeAttr(lang)}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="color-scheme" content="light only">
+<meta name="supported-color-schemes" content="light only">
+<title>${escapeHtml(opts.subject)}</title>
+<style>
+  :root { color-scheme: light only; supported-color-schemes: light only; }
+  @media (prefers-color-scheme: dark) {
+    .mc-bg-outer { background:${backdropColor} !important; }
+    .mc-bg-card  { background:${cardBg} !important; }
+    .mc-text     { color:${textColor} !important; }
+  }
+  [data-ogsc] .mc-bg-outer { background:${backdropColor} !important; }
+  [data-ogsc] .mc-bg-card  { background:${cardBg} !important; }
+  [data-ogsc] .mc-text     { color:${textColor} !important; }
+</style>
+</head>
+<body class="mc-bg-outer mc-text" bgcolor="${backdropColor}" style="margin:0;padding:0;background:${backdropColor};font-family:${fontSans};color:${textColor};-webkit-font-smoothing:antialiased;">
+${opts.preheader ? `<div style="display:none;font-size:1px;max-height:0;overflow:hidden;mso-hide:all;">${escapeHtml(opts.preheader)}</div>` : ""}
+<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="${backdropColor}" class="mc-bg-outer" style="background:${backdropColor};padding:32px 16px;">
+  <tr>
+    <td align="center">
+      <table role="presentation" width="520" cellpadding="0" cellspacing="0" border="0" bgcolor="${cardBg}" class="mc-bg-card" style="max-width:520px;width:100%;background:${cardBg};border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08);">
+        <tr><td bgcolor="${accentColor}" style="background:${accentColor};height:4px;line-height:4px;font-size:0;">&nbsp;</td></tr>
+        <tr>
+          <td bgcolor="${cardBg}" class="mc-bg-card" style="background:${cardBg};padding:40px 40px 0;text-align:center;">
+            ${logoBlock}
+          </td>
+        </tr>
+        <tr>
+          <td bgcolor="${cardBg}" class="mc-bg-card mc-text" style="background:${cardBg};padding:32px 40px;">
+            ${opts.bodyHtml}
+          </td>
+        </tr>
+        ${footerBlock}
+      </table>
+    </td>
+  </tr>
+</table>
+</body>
+</html>`;
+}
+function heading(text, opts) {
+  const fontSerif = opts?.fontSerif ?? "Georgia,'Times New Roman',serif";
+  const textColor = opts?.textColor ?? "#1a1a1a";
+  return `<h1 style="margin:0 0 12px;font-family:${fontSerif};font-size:28px;font-weight:400;color:${textColor};text-align:center;">${escapeHtml(text)}</h1>`;
+}
+function paragraph(text) {
+  return `<p style="margin:0 0 16px;font-size:15px;line-height:1.6;">${escapeHtml(text)}</p>`;
+}
+function paragraphHtml(html) {
+  return `<p style="margin:0 0 16px;font-size:15px;line-height:1.6;">${html}</p>`;
+}
+function signOff(line1, line2, sign) {
+  return `<div style="margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.1);text-align:center;">
+    <p style="margin:0;font-size:15px;line-height:1.8;">
+      ${escapeHtml(line1)}<br>
+      ${escapeHtml(line2)}<br>
+      <span style="font-size:20px;">${escapeHtml(sign)}</span>
+    </p>
+  </div>`;
+}
+function cta(href, label, opts) {
+  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" style="margin:28px auto 8px;">
+    <tr>
+      <td bgcolor="${opts.accentColor}" style="background:${opts.accentColor};border-radius:999px;">
+        <a href="${escapeAttr(href)}" style="display:inline-block;padding:14px 28px;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;">${escapeHtml(label)}</a>
+      </td>
+    </tr>
+  </table>`;
+}
+function factBox(rows, opts) {
+  if (rows.length === 0) return "";
+  const border = opts?.accentColor ? `border-left:3px solid ${opts.accentColor};` : "border:1px solid rgba(0,0,0,0.1);";
+  const cells = rows.map(
+    (r) => `<tr>
+        <td style="padding:6px 12px 6px 0;font-size:13px;opacity:0.65;white-space:nowrap;vertical-align:top;">${escapeHtml(r.label)}</td>
+        <td style="padding:6px 0;font-size:13px;font-weight:600;">${escapeHtml(r.value)}</td>
+      </tr>`
+  ).join("");
+  return `<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:16px 0;${border}border-radius:8px;">
+    <tr><td style="padding:12px 16px;">
+      <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">${cells}</table>
+    </td></tr>
+  </table>`;
+}
+function fill(template, vars) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => key in vars ? String(vars[key]) : `{${key}}`);
+}
+function makeLogoAttachment(filePath, opts) {
+  if (!existsSync(filePath)) return null;
+  try {
+    const content = readFileSync(filePath);
+    const filename = filePath.split("/").pop() ?? "logo";
+    const contentType = opts?.contentType ?? (filename.endsWith(".svg") ? "image/svg+xml" : "image/png");
+    return { filename, content, contentId: opts?.contentId ?? "logo", contentType };
+  } catch {
+    return null;
+  }
+}
+
+export { cta, escapeAttr, escapeHtml, factBox, fill, heading, makeLogoAttachment, paragraph, paragraphHtml, renderShell, signOff };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Branded HTML email shell + primitives — layer 1 (visual structure) of the\n * fleet's mail stack. No sending (that's @broberg/mail) and no template\n * content/override-resolution (that's @broberg/mail-templates, F040) — this\n * package only turns brand params + body HTML into a complete, email-client-\n * safe HTML document, plus the small block builders every template needs.\n *\n * Generalizes sanneandersen's site/src/lib/mail-templates/shell.ts (table\n * layout, dark-mode [data-ogsc] Outlook guards, CID logo) — every color/font/\n * copy value that file hardcoded is now a caller-supplied option.\n */\n\nimport { readFileSync, existsSync } from \"node:fs\";\n\nexport function escapeHtml(s: string): string {\n  return s.replace(/[&<>\"']/g, (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\", '\"': \"&quot;\", \"'\": \"&#39;\" })[c] ?? c);\n}\n\nexport function escapeAttr(s: string): string {\n  return escapeHtml(s);\n}\n\nexport interface BrandColors {\n  /** Top-of-card accent + CTA button color. Required — no fleet-wide default,\n   *  so nothing is silently branded as some other product's identity. */\n  accentColor: string;\n  /** Card background. Default '#ffffff' — pass a dark value (e.g. '#1a1a1a')\n   *  for a dark-card brand; textColor's default adapts automatically. */\n  cardBg?: string;\n  /** Body text color. Default derived from cardBg (light card → dark text,\n   *  dark card → light text) so a dark-card brand isn't illegible by default. */\n  textColor?: string;\n  /** Page background behind the card. Default '#f4f4f5'. */\n  backdropColor?: string;\n  fontSans?: string;\n  fontSerif?: string;\n}\n\nfunction isDark(hex: string): boolean {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim());\n  if (!m) return false;\n  const n = parseInt(m[1], 16);\n  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;\n  // Perceived luminance (ITU-R BT.601).\n  return (r * 299 + g * 587 + b * 114) / 1000 < 128;\n}\n\nfunction resolveColors(b: BrandColors) {\n  const cardBg = b.cardBg ?? \"#ffffff\";\n  const textColor = b.textColor ?? (isDark(cardBg) ? \"#f5f5f5\" : \"#1a1a1a\");\n  const backdropColor = b.backdropColor ?? \"#f4f4f5\";\n  const fontSans = b.fontSans ?? \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\";\n  const fontSerif = b.fontSerif ?? \"Georgia,'Times New Roman',serif\";\n  return { accentColor: b.accentColor, cardBg, textColor, backdropColor, fontSans, fontSerif };\n}\n\nexport interface ShellOpts extends BrandColors {\n  subject: string;\n  /** Hidden preview text shown in the mail-client inbox list. */\n  preheader?: string;\n  lang?: string;\n  /** Pre-rendered body HTML — compose with heading/paragraph/cta/factBox/signOff. */\n  bodyHtml: string;\n  showFooter?: boolean;\n  footerLines?: string[];\n  footerHref?: string;\n  footerLabel?: string;\n  /** Resolved logo <img> src — a cid: reference (see makeLogoAttachment) or a hosted URL. */\n  logoUrl?: string;\n  logoAlt?: string;\n}\n\n/** Renders a complete, email-client-safe HTML document: table layout (not\n *  flex/grid — Outlook doesn't support it), dark-mode-inversion guards via\n *  both `prefers-color-scheme` and Outlook.com's `[data-ogsc]`, a rounded\n *  card with an accent-colored top strip, and an optional footer. */\nexport function renderShell(opts: ShellOpts): string {\n  const { accentColor, cardBg, textColor, backdropColor, fontSans } = resolveColors(opts);\n  const lang = opts.lang ?? \"en\";\n  const showFooter = opts.showFooter ?? true;\n\n  const logoBlock = opts.logoUrl\n    ? `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\" style=\"margin:0 auto 16px;\">\n    <tr><td>\n      <img src=\"${escapeAttr(opts.logoUrl)}\" alt=\"${escapeAttr(opts.logoAlt ?? \"\")}\" style=\"display:block;margin:0 auto;max-width:180px;height:auto;border:0;\">\n    </td></tr>\n  </table>`\n    : \"\";\n\n  const footerBlock = showFooter\n    ? `<tr>\n      <td bgcolor=\"${backdropColor}\" style=\"background:${backdropColor};padding:16px 40px 32px;text-align:center;border-top:1px solid rgba(0,0,0,0.08);\">\n        ${(opts.footerLines ?? []).map((l) => `<p style=\"margin:0 0 4px;font-size:11px;opacity:0.65;\">${escapeHtml(l)}</p>`).join(\"\")}\n        ${opts.footerHref ? `<p style=\"margin:0;font-size:11px;\"><a href=\"${escapeAttr(opts.footerHref)}\" style=\"color:${accentColor};text-decoration:none;font-weight:600;\">${escapeHtml(opts.footerLabel ?? opts.footerHref)}</a></p>` : \"\"}\n      </td>\n    </tr>`\n    : \"\";\n\n  return `<!doctype html>\n<html lang=\"${escapeAttr(lang)}\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n<meta name=\"color-scheme\" content=\"light only\">\n<meta name=\"supported-color-schemes\" content=\"light only\">\n<title>${escapeHtml(opts.subject)}</title>\n<style>\n  :root { color-scheme: light only; supported-color-schemes: light only; }\n  @media (prefers-color-scheme: dark) {\n    .mc-bg-outer { background:${backdropColor} !important; }\n    .mc-bg-card  { background:${cardBg} !important; }\n    .mc-text     { color:${textColor} !important; }\n  }\n  [data-ogsc] .mc-bg-outer { background:${backdropColor} !important; }\n  [data-ogsc] .mc-bg-card  { background:${cardBg} !important; }\n  [data-ogsc] .mc-text     { color:${textColor} !important; }\n</style>\n</head>\n<body class=\"mc-bg-outer mc-text\" bgcolor=\"${backdropColor}\" style=\"margin:0;padding:0;background:${backdropColor};font-family:${fontSans};color:${textColor};-webkit-font-smoothing:antialiased;\">\n${opts.preheader ? `<div style=\"display:none;font-size:1px;max-height:0;overflow:hidden;mso-hide:all;\">${escapeHtml(opts.preheader)}</div>` : \"\"}\n<table role=\"presentation\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" bgcolor=\"${backdropColor}\" class=\"mc-bg-outer\" style=\"background:${backdropColor};padding:32px 16px;\">\n  <tr>\n    <td align=\"center\">\n      <table role=\"presentation\" width=\"520\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" bgcolor=\"${cardBg}\" class=\"mc-bg-card\" style=\"max-width:520px;width:100%;background:${cardBg};border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08);\">\n        <tr><td bgcolor=\"${accentColor}\" style=\"background:${accentColor};height:4px;line-height:4px;font-size:0;\">&nbsp;</td></tr>\n        <tr>\n          <td bgcolor=\"${cardBg}\" class=\"mc-bg-card\" style=\"background:${cardBg};padding:40px 40px 0;text-align:center;\">\n            ${logoBlock}\n          </td>\n        </tr>\n        <tr>\n          <td bgcolor=\"${cardBg}\" class=\"mc-bg-card mc-text\" style=\"background:${cardBg};padding:32px 40px;\">\n            ${opts.bodyHtml}\n          </td>\n        </tr>\n        ${footerBlock}\n      </table>\n    </td>\n  </tr>\n</table>\n</body>\n</html>`;\n}\n\nexport function heading(text: string, opts?: { fontSerif?: string; textColor?: string }): string {\n  const fontSerif = opts?.fontSerif ?? \"Georgia,'Times New Roman',serif\";\n  const textColor = opts?.textColor ?? \"#1a1a1a\";\n  return `<h1 style=\"margin:0 0 12px;font-family:${fontSerif};font-size:28px;font-weight:400;color:${textColor};text-align:center;\">${escapeHtml(text)}</h1>`;\n}\n\nexport function paragraph(text: string): string {\n  return `<p style=\"margin:0 0 16px;font-size:15px;line-height:1.6;\">${escapeHtml(text)}</p>`;\n}\n\n/** Like paragraph(), but the string is injected as raw HTML (not escaped) —\n *  the caller must escapeHtml() any dynamic values themselves. */\nexport function paragraphHtml(html: string): string {\n  return `<p style=\"margin:0 0 16px;font-size:15px;line-height:1.6;\">${html}</p>`;\n}\n\nexport function signOff(line1: string, line2: string, sign: string): string {\n  return `<div style=\"margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.1);text-align:center;\">\n    <p style=\"margin:0;font-size:15px;line-height:1.8;\">\n      ${escapeHtml(line1)}<br>\n      ${escapeHtml(line2)}<br>\n      <span style=\"font-size:20px;\">${escapeHtml(sign)}</span>\n    </p>\n  </div>`;\n}\n\n/** A bulletproof (table-cell-based, not a bare <a>/<button>) call-to-action\n *  button — the pattern every surveyed template hand-rolled per-brand. */\nexport function cta(href: string, label: string, opts: { accentColor: string }): string {\n  return `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"center\" style=\"margin:28px auto 8px;\">\n    <tr>\n      <td bgcolor=\"${opts.accentColor}\" style=\"background:${opts.accentColor};border-radius:999px;\">\n        <a href=\"${escapeAttr(href)}\" style=\"display:inline-block;padding:14px 28px;font-size:15px;font-weight:600;color:#ffffff;text-decoration:none;\">${escapeHtml(label)}</a>\n      </td>\n    </tr>\n  </table>`;\n}\n\nexport interface FactRow {\n  label: string;\n  value: string;\n}\n\n/** A structured label/value block (table rows, not flex/grid — email-client\n *  safe) for rendering e.g. booking details or submitted form fields. */\nexport function factBox(rows: FactRow[], opts?: { accentColor?: string }): string {\n  if (rows.length === 0) return \"\";\n  const border = opts?.accentColor ? `border-left:3px solid ${opts.accentColor};` : \"border:1px solid rgba(0,0,0,0.1);\";\n  const cells = rows\n    .map(\n      (r) => `<tr>\n        <td style=\"padding:6px 12px 6px 0;font-size:13px;opacity:0.65;white-space:nowrap;vertical-align:top;\">${escapeHtml(r.label)}</td>\n        <td style=\"padding:6px 0;font-size:13px;font-weight:600;\">${escapeHtml(r.value)}</td>\n      </tr>`,\n    )\n    .join(\"\");\n  return `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" style=\"margin:16px 0;${border}border-radius:8px;\">\n    <tr><td style=\"padding:12px 16px;\">\n      <table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\">${cells}</table>\n    </td></tr>\n  </table>`;\n}\n\n/** Replace {token} placeholders with values. Unknown tokens are left as-is. */\nexport function fill(template: string, vars: Record<string, string | number>): string {\n  return template.replace(/\\{(\\w+)\\}/g, (_, key) => (key in vars ? String(vars[key]) : `{${key}}`));\n}\n\nexport interface MailAttachment {\n  filename: string;\n  content: Buffer;\n  contentId: string;\n  contentType: string;\n}\n\n/** Reads a logo file from a caller-supplied full path and returns a\n *  Resend-shaped inline (CID) attachment, or null if the file doesn't exist —\n *  never throws, so a missing logo degrades to no-logo, not a broken send. */\nexport function makeLogoAttachment(filePath: string, opts?: { contentId?: string; contentType?: string }): MailAttachment | null {\n  if (!existsSync(filePath)) return null;\n  try {\n    const content = readFileSync(filePath);\n    const filename = filePath.split(\"/\").pop() ?? \"logo\";\n    const contentType = opts?.contentType ?? (filename.endsWith(\".svg\") ? \"image/svg+xml\" : \"image/png\");\n    return { filename, content, contentId: opts?.contentId ?? \"logo\", contentType };\n  } catch {\n    return null;\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@broberg/mail-core",
+  "version": "0.1.0",
+  "description": "Branded HTML email shell + primitives for the broberg.ai fleet — renderShell, heading/paragraph/cta/factBox/signOff, and a CID logo-attachment helper. No sending (@broberg/mail) and no template-content/override-resolution (@broberg/mail-templates) — layer 1 (visual structure) only. Every brand value is a caller-supplied param.",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "files": ["dist", "README.md"],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vitest": "^2.1.0"
+  },
+  "keywords": [
+    "email",
+    "mail",
+    "html-email",
+    "email-template",
+    "transactional-email",
+    "email-shell",
+    "broberg"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/broberg-ai/components",
+    "directory": "packages/mail-core"
+  },
+  "publishConfig": { "access": "public" }
+}