@syncello/auth 4.1.0 → 4.2.0

package/README.md

@@ -297,6 +297,29 @@ A `verify` hook that throws is logged and treated as "not invited": invitation m
 OAuth sign-up in open mode goes ahead unlinked, and a password signup with the token answers
 `400`.
 
+## Custom Emails
+
+`renderEmail` puts an app's own emails in the same template as the auth emails. Every value is
+plain text and escaped; every URL must be http(s) on `appUrl`'s host or a subdomain.
+
+```typescript
+import { renderEmail } from '@syncello/auth';
+
+const html = renderEmail({
+  heading: 'Your daily digest',
+  paragraphs: ['Here is what changed today.'],
+  sections: [
+    { title: 'Acme', url: `${appUrl}/accounts/1`, rows: [{ text: 'PO 1001 shipped', url: `${appUrl}/orders/1001` }] },
+  ],
+  button: { label: 'Open the portal', url: `${appUrl}/orders` },
+  notice: 'This link expires in 7 days.',
+  footerNote: 'You get this because you follow Acme.',
+  appUrl,
+  appName: 'My App',
+  branding: emailBranding,
+});
+```
+
 ## Direct Imports
 
 For advanced usage, you can import utilities directly:
@@ -319,6 +342,20 @@ import {
 
 ## Release Notes
 
+### 4.2.0
+
+- `renderEmail` renders an app's own emails (invitations, notifications, digests) in the
+  template the auth emails use, from plain text: a heading, paragraphs, optional sections of
+  rows, a button, a notice, a footer note and `EmailBranding`. It escapes every value and
+  refuses links off the app's host (see Custom Emails).
+- `emailBranding.logoWidth` and `logoHeight` (CSS px, positive integers, given together): the
+  header logo renders at that fixed size, with `width` and `height` attributes so mail clients
+  reserve its space and Outlook sizes it right, instead of filling half the email's width.
+- A cleaner template for every email, with no new options needed: a white card on a light grey
+  page, a left-aligned heading and body, the notice as a grey panel edged in `headingColor`
+  instead of the cyan box, and the link to copy small and grey under a thin rule. URLs in the
+  markup are now HTML-escaped (`&` is written `&`), which browsers read as the same URL.
+
 ### 4.1.0
 
 - `emailBranding.marketingUrl`: the site the email footer's Privacy Policy (`/privacy`) and Get

package/dist/index.cjs

@@ -121,6 +121,7 @@ __export(src_exports, {
   rateLimit: () => rateLimit,
   recentPasswordlessFailures: () => recentPasswordlessFailures,
   refreshSession: () => refreshSession,
+  renderEmail: () => renderEmail,
   requestEmailChange: () => requestEmailChange,
   requireAuth: () => requireAuth,
   requireVerifiedEmail: () => requireVerifiedEmail,
@@ -1417,36 +1418,140 @@ function escapeHtml(text) {
 }
 
 // src/core/email-template.ts
-function generateEmailTemplate(options) {
-  const {
-    heading,
-    body,
-    buttonText,
-    buttonUrl,
-    welcomeMessage,
-    securityWarning,
-    footerNote,
-    appUrl,
-    marketingUrl,
-    appName = "App",
-    buttonBgColor = "#00fe9a",
-    buttonTextColor = "#000004",
-    buttonFontWeight = 500,
-    buttonRadius = "6px",
-    logoUrl,
-    footerColor = "#1e1b4b",
-    headingColor = "#1e1b4b"
-  } = options;
-  const safeAppName = escapeHtml(appName);
-  const safeButtonUrl = buttonUrl ? sanitizeEmailUrl(buttonUrl, appUrl) : "";
-  const safeAppUrl = appUrl ? sanitizeEmailUrl(appUrl, appUrl) : "";
-  const safeMarketingUrl = marketingUrl ? sanitizeEmailUrl(marketingUrl, marketingUrl).replace(/\/$/, "") : "";
-  const safeLogoUrl = logoUrl ? sanitizeEmailUrl(logoUrl, appUrl) : `${safeAppUrl.replace(/\/$/, "")}/email-header-image.png`;
+var FONT = "'Montserrat',Arial,sans-serif";
+var PAGE = "#f4f5f7";
+var BODY_TEXT = "#404040";
+var MUTED = "#737373";
+var RULE = "#e5e7eb";
+var TABLE = 'width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;"';
+function logoDimensions(width, height) {
+  if (width === void 0 && height === void 0) return null;
+  if (width === void 0 || height === void 0) {
+    throw new Error("logoWidth and logoHeight must be given together");
+  }
+  return { width: pixels("logoWidth", width), height: pixels("logoHeight", height) };
+}
+function pixels(name, value) {
+  if (typeof value !== "number" || !Number.isSafeInteger(value) || value <= 0) {
+    throw new Error(`${name} must be a positive integer`);
+  }
+  return escapeHtml(String(value));
+}
+function brandColours(branding) {
+  return {
+    buttonBgColor: escapeHtml(branding.buttonBgColor ?? "#00fe9a"),
+    buttonTextColor: escapeHtml(branding.buttonTextColor ?? "#000004"),
+    buttonFontWeight: escapeHtml(String(branding.buttonFontWeight ?? 500)),
+    buttonRadius: escapeHtml(branding.buttonRadius ?? "6px"),
+    footerColor: escapeHtml(branding.footerColor ?? "#1e1b4b"),
+    headingColor: escapeHtml(branding.headingColor ?? "#1e1b4b")
+  };
+}
+function logoUrlFor(logoUrl, appUrl) {
+  if (logoUrl) return escapeHtml(sanitizeEmailUrl(logoUrl, appUrl));
+  const base = appUrl ? sanitizeEmailUrl(appUrl, appUrl) : "";
+  return escapeHtml(`${base.replace(/\/$/, "")}/email-header-image.png`);
+}
+function marketingUrlFor(marketingUrl) {
+  return marketingUrl ? escapeHtml(sanitizeEmailUrl(marketingUrl, marketingUrl).replace(/\/$/, "")) : "";
+}
+var cardRow = (padding, content) => `
+                              <table ${TABLE}>
+                                <tr>
+                                  <td class="pad" style="${padding}">
+                                    ${content}
+                                  </td>
+                                </tr>
+                              </table>`;
+function logoBlock({ logoUrl, logoSize, appName }) {
+  const img = logoSize ? `<img src="${logoUrl}" width="${logoSize.width}" height="${logoSize.height}" style="width: ${logoSize.width}px; max-width: 100%; height: auto; display: block; border: 0;" alt="${appName}" title="${appName}">` : `<div class="fullWidth" style="max-width: 50%;">
+                                        <img src="${logoUrl}" style="display: block; height: auto; border: 0; width: 100%;" alt="${appName}" title="${appName}" height="auto">
+                                      </div>`;
+  return `
+                              <!-- Header Image -->
+                              <table class="image_block" ${TABLE}>
+                                <tr>
+                                  <td class="pad" style="padding-top:40px;padding-left:40px;padding-right:40px;padding-bottom:8px;">
+                                    <div class="alignment" align="center">
+                                      ${img}
+                                    </div>
+                                  </td>
+                                </tr>
+                              </table>`;
+}
+function buttonBlock({ label, url }, brand) {
+  const font = `font-family: ${FONT}; font-size: 16px; font-weight: ${brand.buttonFontWeight};`;
+  return `
+                              <!-- Button -->${cardRow(
+    "padding-top:8px;padding-bottom:32px;padding-left:40px;padding-right:40px;text-align:center;",
+    `<div class="alignment" align="center">
+                                      <!--[if mso]>
+                                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${url}" style="height:48px;width:auto;v-text-anchor:middle;" arcsize="12%" fillcolor="${brand.buttonBgColor}">
+                                        <v:stroke dashstyle="Solid" weight="0px" color="${brand.buttonBgColor}"/>
+                                        <w:anchorlock/>
+                                        <v:textbox inset="0px,0px,0px,0px">
+                                          <center dir="false" style="color:${brand.buttonTextColor};${font}">
+                                      <![endif]-->
+                                      <a href="${url}" style="background-color: ${brand.buttonBgColor}; border: 0px solid transparent; border-radius: ${brand.buttonRadius}; color: ${brand.buttonTextColor}; display: inline-block; ${font} line-height: 24px; mso-border-alt: none; padding: 12px 28px; text-align: center; text-decoration: none; word-break: keep-all;">${label}</a>
+                                      <!--[if mso]>
+                                          </center>
+                                        </v:textbox>
+                                      </v:roundrect>
+                                      <![endif]-->
+                                    </div>`
+  )}
+
+                              <!-- Copy Link -->${cardRow(
+    "padding-bottom:24px;padding-left:40px;padding-right:40px;",
+    `<div style="border-top: 1px solid ${RULE}; padding-top: 16px; color:${MUTED};font-family:${FONT};font-size:12px;line-height:1.5;text-align:left;mso-line-height-alt:18px;">
+                                      <p style="margin: 0 0 4px 0; word-break: break-word;">Or copy and paste this link into your browser:</p>
+                                      <a href="${url}" style="color:${MUTED};text-decoration:underline;word-break:break-all;">${url}</a>
+                                    </div>`
+  )}`;
+}
+function renderLayout(parts) {
+  const { brand } = parts;
+  const welcome = parts.welcome ? `
+                              <!-- Welcome Message -->${cardRow(
+    "padding-top:24px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${brand.headingColor};font-family:${FONT};font-size:20px;font-weight:600;line-height:1.4;text-align:left;mso-line-height-alt:28px;">
+                                      <p style="margin: 0; word-break: break-word;">${parts.welcome}</p>
+                                    </div>`
+  )}` : "";
+  const heading = parts.heading ? `
+                              <!-- Heading -->${cardRow(
+    "padding-top:24px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${brand.headingColor};font-family:${FONT};font-size:24px;font-weight:700;line-height:1.3;text-align:left;mso-line-height-alt:31px;">
+                                      <p style="margin: 0; word-break: break-word;">${parts.heading}</p>
+                                    </div>`
+  )}` : "";
+  const notice = parts.notice ? `
+                              <!-- Notice -->${cardRow(
+    "padding-bottom:24px;padding-left:40px;padding-right:40px;",
+    `<table ${TABLE.replace('style="', `style="background-color: ${PAGE}; border-left: 3px solid ${brand.headingColor}; border-radius: 4px; `)}>
+                                      <tr>
+                                        <td style="padding: 14px 16px; color: ${BODY_TEXT}; font-family: ${FONT}; font-size: 13px; line-height: 1.5; text-align: left;">
+                                          ${parts.notice}
+                                        </td>
+                                      </tr>
+                                    </table>`
+  )}` : "";
+  const footerNote = parts.footerNote ? `
+                              <!-- Footer Note -->${cardRow(
+    "padding-bottom:32px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${MUTED};font-family:${FONT};font-size:13px;line-height:1.5;text-align:left;mso-line-height-alt:20px;">
+                                      <p style="margin: 0; word-break: break-word;">${parts.footerNote}</p>
+                                    </div>`
+  )}` : "";
+  const links = parts.marketingUrl ? `
+                                    <p style="margin: 0 0 12px 0; word-break: break-word;">
+                                      <a href="${parts.marketingUrl}/privacy" style="color: #ffffff; text-decoration: underline;">Privacy Policy</a> &nbsp;|&nbsp; <a href="${parts.marketingUrl}/contact" style="color: #ffffff; text-decoration: underline;">Get in Touch</a>
+                                    </p>` : "";
   return `
     <!DOCTYPE html>
     <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
     <head>
-      <title>${heading}</title>
+      <title>${parts.title}</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!--[if mso]>
@@ -1461,7 +1566,7 @@ function generateEmailTemplate(options) {
       </xml>
       <![endif]-->
       <!--[if !mso]><!-->
-      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet" type="text/css">
+      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css">
       <!--<![endif]-->
       <style>
         * {
@@ -1482,13 +1587,6 @@ function generateEmailTemplate(options) {
         p {
           line-height: inherit;
         }
-        .desktop_hide,
-        .desktop_hide table {
-          mso-hide: all;
-          display: none;
-          max-height: 0px;
-          overflow: hidden;
-        }
         .image_block img+div {
           display: none;
         }
@@ -1497,41 +1595,16 @@ function generateEmailTemplate(options) {
           line-height: 0;
         }
         @media (max-width:660px) {
-          .desktop_hide table.icons-inner {
-            display: inline-block !important;
-          }
-          .icons-inner {
-            text-align: center;
-          }
-          .icons-inner td {
-            margin: 0 auto;
-          }
-                    .mobile_hide {
-            display: none;
+          .page {
+            padding: 16px 8px !important;
           }
           .row-content {
             width: 100% !important;
             max-width: 100% !important;
           }
-          .stack .column {
-            width: 100%;
-            display: block;
-          }
-          .mobile_hide {
-            min-height: 0;
-            max-height: 0;
-            max-width: 0;
-            overflow: hidden;
-            font-size: 0px;
-          }
-          .desktop_hide,
-          .desktop_hide table {
-            display: table !important;
-            max-height: none !important;
-          }
           .pad {
-            padding-left: 20px !important;
-            padding-right: 20px !important;
+            padding-left: 24px !important;
+            padding-right: 24px !important;
           }
         }
       </style>
@@ -1543,235 +1616,46 @@ function generateEmailTemplate(options) {
       </style>
       <![endif]-->
     </head>
-    <body class="body" style="background-color: #f8f9fa; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
-      <table class="nl-container" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f8f9fa;">
+    <body class="body" style="background-color: ${PAGE}; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
+      <table class="nl-container" ${TABLE.replace('style="', `style="background-color: ${PAGE}; `)}>
         <tbody>
           <tr>
-            <td>
-              <!-- Main Content Row -->
-              <table class="row row-1" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+            <td class="page" style="padding: 32px 16px;">
+              <!-- Card -->
+              <table class="row-content" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; border: 1px solid ${RULE}; border-radius: 12px; max-width: 640px; width: 100%; margin: 0 auto;">
                 <tbody>
                   <tr>
-                    <td>
-                      <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; color: #000000; max-width: 640px; width: 100%; margin: 0 auto;">
-                        <tbody>
-                          <tr>
-                            <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top;">
-
-                              <!-- Top Spacer -->
-                              <table class="divider_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:12px;padding-top:30px;">
-                                    <div class="alignment" align="center">
-                                      <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                        <tr>
-                                          <td class="divider_inner" style="font-size: 1px; line-height: 1px; border-top: 0px solid #BBBBBB;">
-                                            <span style="word-break: break-word;">&#8202;</span>
-                                          </td>
-                                        </tr>
-                                      </table>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
+                    <td width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; text-align: left; vertical-align: top;">
+${logoBlock(parts)}
+${welcome}
+${heading}
+
+                              <!-- Body Text -->${cardRow(
+    "padding-top:16px;padding-bottom:24px;padding-left:40px;padding-right:40px;",
+    `<div style="color:${BODY_TEXT};font-family:${FONT};font-size:15px;line-height:1.6;text-align:left;mso-line-height-alt:24px;">
+                                      ${parts.body}
+                                    </div>`
+  )}
+${parts.button ? buttonBlock(parts.button, brand) : ""}
+${notice}
+${footerNote}
 
-                              <!-- Header Image -->
-                              <table class="image_block block-2" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad" style="padding-left:40px;padding-right:40px;width:100%;">
-                                    <div class="alignment" align="center">
-                                      <div class="fullWidth" style="max-width: 50%;">
-                                        <img src="${safeLogoUrl}" style="display: block; height: auto; border: 0; width: 100%;" alt="${safeAppName}" title="${safeAppName}" height="auto">
-                                      </div>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                              ${welcomeMessage ? `
-                              <!-- Welcome Message -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-top:30px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:${headingColor};font-family:'Montserrat',Arial,sans-serif;font-size:22px;font-weight:600;line-height:1.4;text-align:center;mso-line-height-alt:31px;">
-                                      <p style="margin: 0; word-break: break-word;">${welcomeMessage}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              ${heading ? `
-                              <!-- Heading -->
-                              <table class="paragraph_block block-4" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:10px;padding-left:40px;padding-right:40px;padding-top:10px;">
-                                    <div style="color:${headingColor};font-family:'Montserrat',Arial,sans-serif;font-size:30px;font-weight:700;line-height:1.2;text-align:center;mso-line-height-alt:36px;">
-                                      <p style="margin: 0; word-break: break-word;">${heading}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              <!-- Body Text -->
-                              <table class="paragraph_block block-5" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:30px;padding-left:40px;padding-right:40px;padding-top:30px;">
-                                    <div style="color:#404040;font-family:'Montserrat',Arial,sans-serif;font-size:15px;line-height:1.6;text-align:left;mso-line-height-alt:24px;">
-                                      <p style="margin: 0; word-break: break-word;">${body}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                              ${safeButtonUrl ? `
-                              <!-- Button -->
-                              <table class="button_block block-6" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad" style="padding-left:10px;padding-right:10px;padding-bottom:10px;text-align:center;">
-                                    <div class="alignment" align="center">
-                                      <!--[if mso]>
-                                      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${safeButtonUrl}" style="height:52px;width:auto;v-text-anchor:middle;" arcsize="12%" fillcolor="${buttonBgColor}">
-                                        <v:stroke dashstyle="Solid" weight="0px" color="${buttonBgColor}"/>
-                                        <w:anchorlock/>
-                                        <v:textbox inset="0px,0px,0px,0px">
-                                          <center dir="false" style="color:${buttonTextColor};font-family:'Montserrat',Arial,sans-serif;font-size:16px;font-weight:${buttonFontWeight};">
-                                      <![endif]-->
-                                      <a href="${safeButtonUrl}" style="background-color: ${buttonBgColor}; border: 0px solid transparent; border-radius: ${buttonRadius}; color: ${buttonTextColor}; display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; font-weight: ${buttonFontWeight}; mso-border-alt: none; padding: 10px 20px; text-align: center; text-decoration: none; text-transform: capitalize; word-break: keep-all;">
-                                        ${buttonText}
-                                      </a>
-                                      <!--[if mso]>
-                                          </center>
-                                        </v:textbox>
-                                      </v:roundrect>
-                                      <![endif]-->
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                              <!-- Copy Link -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:30px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:#737373;font-family:'Montserrat',Arial,sans-serif;font-size:12px;line-height:1.5;text-align:center;mso-line-height-alt:18px;">
-                                      <p style="margin: 0 0 5px 0; word-break: break-word;">or copy and paste this link into your browser:</p>
-                                      <a href="${safeButtonUrl}" style="color:#4a90d9;text-decoration:underline;word-break:break-all;">${safeButtonUrl}</a>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              ${securityWarning ? `
-                              <!-- Security Warning -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-left:40px;padding-right:40px;padding-bottom:20px;">
-                                    <div style="background-color: #a1f1ff; border-radius: 8px; padding: 16px; display: flex; align-items: center; justify-content: center;">
-                                      <p style="margin: 0; color: #01001b; font-family: 'Montserrat', Arial, sans-serif; font-size: 13px; line-height: 1.5; text-align: center;">
-                                        ${securityWarning}
-                                      </p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              <!-- Footer Note -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:30px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:#737373;font-family:'Montserrat',Arial,sans-serif;font-size:13px;line-height:1.5;text-align:center;mso-line-height-alt:20px;">
-                                      <p style="margin: 0; word-break: break-word;">${footerNote}</p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
                     </td>
                   </tr>
                 </tbody>
               </table>
 
-              <!-- Spacer Row -->
-              <table class="row row-2" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
+              <!-- Footer -->
+              <table class="row-content" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: ${brand.footerColor}; border-radius: 12px; max-width: 640px; width: 100%; margin: 16px auto 0 auto;">
                 <tbody>
                   <tr>
-                    <td>
-                      <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f8f9fa; color: #000000; max-width: 640px; width: 100%; margin: 0 auto;">
-                        <tbody>
-                          <tr>
-                            <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; padding-bottom: 5px; vertical-align: top;">
-                              <table class="empty_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                                <tr>
-                                  <td class="pad">
-                                    <div></div>
-                                  </td>
-                                </tr>
-                              </table>
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-
-              <!-- Footer Row -->
-              <table class="row row-3" align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-                <tbody>
-                  <tr>
-                    <td>
-                      <table class="row-content stack" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: ${footerColor}; color: #000000; max-width: 640px; width: 100%; margin: 0 auto;">
-                        <tbody>
-                          <tr>
-                            <td class="column column-1" width="100%" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; padding: 20px;">
-
-                              ${safeMarketingUrl ? `
-                              <!-- Policy Links -->
-                              <table class="paragraph_block" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:20px;padding-left:40px;padding-right:40px;padding-top:20px;">
-                                    <div style="color:#ffffff;font-family:'Montserrat',Arial,sans-serif;font-size:13px;line-height:1.5;text-align:center;mso-line-height-alt:20px;">
-                                      <p style="margin: 0; word-break: break-word;">
-                                        <a href="${safeMarketingUrl}/privacy" style="color: #ffffff; text-decoration: underline;">Privacy Policy</a> | <a href="${safeMarketingUrl}/contact" style="color: #ffffff; text-decoration: underline;">Get in Touch</a>
-                                      </p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-                              ` : ""}
-
-                              <!-- Copyright & Disclaimer -->
-                              <table class="paragraph_block block-1" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;">
-                                <tr>
-                                  <td class="pad" style="padding-bottom:15px;padding-left:40px;padding-right:40px;">
-                                    <div style="color:#a3a3a3;font-family:'Montserrat',Arial,sans-serif;font-size:12px;line-height:1.5;text-align:center;mso-line-height-alt:18px;">
-                                      <p style="margin: 0 0 12px 0; word-break: break-word;">\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${safeAppName}. All rights reserved.</p>
-                                      <p style="margin: 0; font-size: 11px; line-height: 1.5; word-break: break-word;">
-                                        Please do not reply to this email as this address does not accept incoming messages. This service email contains essential information relating to your ${safeAppName} account.
-                                      </p>
-                                    </div>
-                                  </td>
-                                </tr>
-                              </table>
-
-                            </td>
-                          </tr>
-                        </tbody>
-                      </table>
+                    <td class="pad" style="padding: 24px 40px; color:#a3a3a3; font-family:${FONT}; font-size:12px; line-height:1.5; text-align:center; mso-line-height-alt:18px;">${links}
+                                    <p style="margin: 0 0 8px 0; word-break: break-word;">\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${parts.appName}. All rights reserved.</p>
+                                    <p style="margin: 0; font-size: 11px; word-break: break-word;">Please do not reply to this email as this address does not accept incoming messages. This service email contains essential information relating to your ${parts.appName} account.</p>
                     </td>
                   </tr>
                 </tbody>
               </table>
-
             </td>
           </tr>
         </tbody>
@@ -1780,6 +1664,55 @@ function generateEmailTemplate(options) {
     </html>
   `;
 }
+function generateEmailTemplate(options) {
+  const { appUrl, buttonUrl } = options;
+  const safeButtonUrl = buttonUrl ? escapeHtml(sanitizeEmailUrl(buttonUrl, appUrl)) : "";
+  return renderLayout({
+    title: options.heading,
+    logoUrl: logoUrlFor(options.logoUrl, appUrl),
+    logoSize: logoDimensions(options.logoWidth, options.logoHeight),
+    appName: escapeHtml(options.appName ?? "App"),
+    welcome: options.welcomeMessage ?? "",
+    heading: options.heading,
+    body: options.body,
+    button: safeButtonUrl ? { label: options.buttonText, url: safeButtonUrl } : null,
+    notice: options.securityWarning?.trim() ?? "",
+    footerNote: options.footerNote,
+    marketingUrl: marketingUrlFor(options.marketingUrl),
+    brand: brandColours(options)
+  });
+}
+function renderEmail(content) {
+  const { appUrl, branding = {} } = content;
+  const link = (url) => escapeHtml(sanitizeEmailUrl(url, appUrl));
+  const text = (value) => escapeHtml(value).replace(/\r?\n/g, "<br>");
+  const brand = brandColours(branding);
+  const paragraphs = content.paragraphs.map(
+    (p) => `<p style="margin: 0 0 16px 0; word-break: break-word;">${text(p)}</p>`
+  );
+  const sections = (content.sections ?? []).map((section) => {
+    const title = section.url ? `<a href="${link(section.url)}" style="color: ${brand.headingColor}; font-weight: 600; text-decoration: none;">${text(section.title)}</a>` : `<span style="color: ${brand.headingColor}; font-weight: 600;">${text(section.title)}</span>`;
+    const rows = section.rows.map(
+      (row) => `<li style="margin: 0 0 4px 0;">${row.url ? `<a href="${link(row.url)}" style="color: ${BODY_TEXT}; text-decoration: underline;">${text(row.text)}</a>` : text(row.text)}</li>`
+    );
+    return `<p style="margin: 8px 0 4px 0; word-break: break-word;">${title}</p>
+                                      <ul style="margin: 0 0 16px 0; padding-left: 20px;">${rows.join("")}</ul>`;
+  });
+  return renderLayout({
+    title: escapeHtml(content.heading),
+    logoUrl: logoUrlFor(branding.logoUrl, appUrl),
+    logoSize: logoDimensions(branding.logoWidth, branding.logoHeight),
+    appName: escapeHtml(content.appName ?? "App"),
+    welcome: "",
+    heading: escapeHtml(content.heading),
+    body: [...paragraphs, ...sections].join("\n                                      "),
+    button: content.button ? { label: escapeHtml(content.button.label), url: link(content.button.url) } : null,
+    notice: content.notice ? text(content.notice) : "",
+    footerNote: content.footerNote ? text(content.footerNote) : "",
+    marketingUrl: marketingUrlFor(branding.marketingUrl),
+    brand
+  });
+}
 
 // src/core/passwordless.ts
 var PASSWORDLESS_TTL_MS = 10 * 60 * 1e3;
@@ -6461,6 +6394,7 @@ function verifyWebhookSignature(payload, headers, secret) {
   rateLimit,
   recentPasswordlessFailures,
   refreshSession,
+  renderEmail,
   requestEmailChange,
   requireAuth,
   requireVerifiedEmail,