@cosmicdrift/kumiko-samples 0.369.0 → 0.370.0

package/packages/bundled-features/src/delivery/handlers/unsubscribe-page-chrome.query.ts

@@ -0,0 +1,56 @@
+import { access, defineQueryHandler, type TenantId } from "@cosmicdrift/kumiko-framework/engine";
+import { InternalError } from "@cosmicdrift/kumiko-framework/errors";
+import * as z from "zod";
+import {
+  collectRendererPlugins,
+  createRendererFoundationApi,
+  type MailChrome,
+  RendererError,
+  type RendererPlugin,
+} from "../../renderer-foundation/index.ts";
+
+function mailChromePlugin(
+  plugins: readonly RendererPlugin[],
+  tenantId: TenantId,
+): RendererPlugin | null {
+  try {
+    const plugin = createRendererFoundationApi(plugins).createRendererForTenant({
+      tenantId,
+      kind: "mail",
+    });
+    return plugin.readMailChrome === undefined ? null : plugin;
+  } catch (e) {
+    if (e instanceof RendererError && e.code === "no_plugin_for_kind") return null;
+    throw e;
+  }
+}
+
+export const unsubscribePageChromeQuery = defineQueryHandler({
+  name: "unsubscribePageChrome",
+  schema: z.object({ locale: z.string().min(2).max(35) }),
+  access: { roles: access.systemAdmin },
+  // Only reachable via createUnsubscribeRoutes' dispatchSystemQuery once verify()
+  // proved the token signature.
+  agent: { expose: false },
+  description:
+    "Returns the tenant's mail brand row and footer resolved for one locale, or null without a mail renderer; dispatched by the signed unsubscribe route to dress its pages like the mail, not meant for UI callers.",
+  handler: async (query, ctx): Promise<MailChrome | null> => {
+    const { tenantId } = query.user;
+    if (!ctx.systemDb) {
+      throw new InternalError({
+        message: "unsubscribePageChrome: ctx.systemDb missing on a system-scoped handler",
+      });
+    }
+    const plugin = mailChromePlugin(collectRendererPlugins(ctx.registry), tenantId);
+    if (plugin?.readMailChrome === undefined) return null;
+    return plugin.readMailChrome(
+      { locale: query.payload.locale },
+      {
+        db: ctx.systemDb.assertTenantMatch(tenantId),
+        registry: ctx.registry,
+        tenantId,
+        ...(ctx.config !== undefined && { config: ctx.config }),
+      },
+    );
+  },
+});

package/packages/bundled-features/src/delivery/handlers/unsubscribe-user.write.ts

@@ -1,8 +1,8 @@
 import { access, defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
 import { InternalError } from "@cosmicdrift/kumiko-framework/errors";
 import * as z from "zod";
-import { currentNotificationType } from "../notification-type-aliases.js";
-import { upsertPreference } from "../upsert-preference.js";
+import { currentNotificationType } from "../notification-type-aliases.ts";
+import { upsertPreference } from "../upsert-preference.ts";
 
 export const unsubscribeUserWrite = defineWriteHandler({
   name: "unsubscribeUser",

package/packages/bundled-features/src/delivery/i18n.ts

@@ -4,7 +4,7 @@ import {
   type DeliveryFailureCode,
   type DeliverySkipReason,
 } from "@cosmicdrift/kumiko-framework/engine";
-import { DeliveryStatus, type DeliveryStatusValue } from "./public-names.js";
+import { DeliveryStatus, type DeliveryStatusValue } from "./public-names.ts";
 
 type LocalizedString = { readonly en: string };
 

package/packages/bundled-features/src/delivery/index.ts

@@ -1,5 +1,5 @@
-export { sanitizePdfAttachmentFileName } from "../shared/index.js";
-export { hashUnsubscribeAddress } from "./address-opt-out.js";
+export { sanitizePdfAttachmentFileName } from "../shared/index.ts";
+export { hashUnsubscribeAddress } from "./address-opt-out.ts";
 export {
   DELIVERY_ENVELOPE_DATA_KEYS,
   type EmailAttachmentRef,
@@ -14,24 +14,24 @@ export {
   renderedPdfAttachmentRefSchema,
   toAttachmentRef,
   withoutDeliveryEnvelopeKeys,
-} from "./attachment-ref.js";
+} from "./attachment-ref.ts";
 export {
   type AttemptLogRetentionOptions,
   DEFAULT_ATTEMPT_LOG_RETENTION_DAYS,
   runAttemptLogRetention,
-} from "./attempt-log-retention.js";
+} from "./attempt-log-retention.ts";
 export {
   buildChannelContext,
   createEmailAttachmentReader,
   createTemplateMailRenderer,
-} from "./channel-context.js";
+} from "./channel-context.ts";
 export {
   type ChatWebhookChannelOptions,
   chatMessageText,
   createChatWebhookChannel,
   resolveChatWebhookTarget,
   toChannelResult,
-} from "./chat-webhook-channel.js";
+} from "./chat-webhook-channel.ts";
 export {
   type ChatSendFailureCode,
   type ChatSendResult,
@@ -44,8 +44,8 @@ export {
   DEFAULT_CHAT_TIMEOUT_MS,
   postChatWebhook,
   truncateChars,
-} from "./chat-webhook-sender.js";
-export type { DeliveryStatusValue } from "./constants.js";
+} from "./chat-webhook-sender.ts";
+export type { DeliveryStatusValue } from "./constants.ts";
 export {
   DELIVERY_ATTEMPT_ADDRESS_ERASED_EVENT,
   DELIVERY_CHANNEL_EXTENSION,
@@ -58,29 +58,29 @@ export {
   DeliveryQueries,
   DeliveryStatus,
   EMAIL_CHANNEL_NAME,
-} from "./constants.js";
+} from "./constants.ts";
 export {
   collectChannels,
   createDeliveryService,
   type DeliveryServiceOptions,
   type KillSwitchResolver,
   type RateLimitConfig,
-} from "./delivery-service.js";
-export { createDeliveryFeature, type DeliveryFeatureOptions } from "./feature.js";
+} from "./delivery-service.ts";
+export { createDeliveryFeature, type DeliveryFeatureOptions } from "./feature.ts";
 export {
   type UnsubscribeAddressPayload,
   unsubscribeAddressPayloadSchema,
-} from "./handlers/unsubscribe-address.write.js";
-export { currentNotificationType } from "./notification-type-aliases.js";
-export { createDeliveryNotifyFactory } from "./notify-factory.js";
+} from "./handlers/unsubscribe-address.write.ts";
+export { currentNotificationType } from "./notification-type-aliases.ts";
+export { createDeliveryNotifyFactory } from "./notify-factory.ts";
 export {
   deliveryAttemptsTable,
   notificationAddressOptOutEntity,
   notificationAddressOptOutsTable,
   notificationPreferenceEntity,
   notificationPreferencesTable,
-} from "./tables.js";
-export { type CreateDeliveryTestContextOptions, createDeliveryTestContext } from "./testing.js";
+} from "./tables.ts";
+export { type CreateDeliveryTestContextOptions, createDeliveryTestContext } from "./testing.ts";
 export {
   type AttachmentOrigin,
   type ChannelContext,
@@ -93,7 +93,7 @@ export {
   type DeliveryService,
   isDeliveryChannelPlugin,
   type RenderedMessage,
-} from "./types.js";
+} from "./types.ts";
 export {
   type AddressUnsubscribeTokenPayload,
   createUnsubscribeRoutes,
@@ -104,6 +104,6 @@ export {
   type UnsubscribeResultPage,
   type UnsubscribeRouteOptions,
   type UnsubscribeTokenPayload,
-} from "./unsubscribe.js";
-export type { UnsubscribeLinkConfig } from "./unsubscribe-link.js";
-export { UNSUBSCRIBE_PAGE_EN } from "./unsubscribe-page-strings.js";
+} from "./unsubscribe.ts";
+export type { UnsubscribeLinkConfig } from "./unsubscribe-link.ts";
+export { UNSUBSCRIBE_PAGE_EN } from "./unsubscribe-page-strings.ts";

package/packages/bundled-features/src/delivery/jobs.ts

@@ -16,22 +16,22 @@ import type {
 import { InternalError } from "@cosmicdrift/kumiko-framework/errors";
 import type { JobRunner } from "@cosmicdrift/kumiko-framework/jobs";
 import * as z from "zod";
-import { fileContextForTenant } from "../file-foundation/index.js";
+import { fileContextForTenant } from "../file-foundation/index.ts";
 import {
   emailAttachmentRefSchema,
   MAX_EMAIL_ATTACHMENTS,
   toAttachmentRef,
-} from "./attachment-ref.js";
-import { appendAttemptEvent } from "./attempt-log.js";
-import { buildChannelContext } from "./channel-context.js";
-import { DeliveryJobs, deliveryIdempotencyRedisKey, deliveryPriorityRank } from "./constants.js";
-import { collectChannels, redactedMessageOf } from "./delivery-service.js";
+} from "./attachment-ref.ts";
+import { appendAttemptEvent } from "./attempt-log.ts";
+import { buildChannelContext } from "./channel-context.ts";
+import { DeliveryJobs, deliveryIdempotencyRedisKey, deliveryPriorityRank } from "./constants.ts";
+import { collectChannels, redactedMessageOf } from "./delivery-service.ts";
 import type {
   ChannelMessage,
   DeliveryChannel,
   DeliveryLogEntry,
   RenderedMessage,
-} from "./types.js";
+} from "./types.ts";
 
 const channelMessageSchema = z.object({
   notificationType: z.string(),

package/packages/bundled-features/src/delivery/notify-factory.ts

@@ -1,5 +1,5 @@
 import type { NotifyFactory, NotifyFn, NotifyOptions } from "@cosmicdrift/kumiko-framework/engine";
-import type { DeliveryService } from "./types.js";
+import type { DeliveryService } from "./types.ts";
 
 // The same binding runProdApp wires into the app context: the calling context's
 // job dispatcher is handed to notify() per call, so queued channels go through

package/packages/bundled-features/src/delivery/public-names.ts

@@ -25,6 +25,7 @@ export const DELIVERY_RESUBSCRIBE_PATH = "/api/delivery/resubscribe" as const;
 export const DeliveryQueries = {
   log: "delivery:query:log",
   preferences: "delivery:query:preferences",
+  unsubscribePageChrome: "delivery:query:unsubscribe-page-chrome",
 } as const;
 
 export const DELIVERY_LOG_SCREEN_ID = "delivery-log" as const;

package/packages/bundled-features/src/delivery/testing.ts

@@ -11,11 +11,11 @@ import type { JobRunner } from "@cosmicdrift/kumiko-framework/jobs";
 import type { Logger } from "@cosmicdrift/kumiko-framework/logging";
 import type { SecretsContext } from "@cosmicdrift/kumiko-framework/secrets";
 import type { Redis } from "ioredis";
-import type { KillSwitchResolver, RateLimitConfig } from "./delivery-service.js";
-import { collectChannels, createDeliveryService } from "./delivery-service.js";
-import { createDeliveryNotifyFactory } from "./notify-factory.js";
-import type { DeliveryService } from "./types.js";
-import type { UnsubscribeLinkConfig } from "./unsubscribe-link.js";
+import type { KillSwitchResolver, RateLimitConfig } from "./delivery-service.ts";
+import { collectChannels, createDeliveryService } from "./delivery-service.ts";
+import { createDeliveryNotifyFactory } from "./notify-factory.ts";
+import type { DeliveryService } from "./types.ts";
+import type { UnsubscribeLinkConfig } from "./unsubscribe-link.ts";
 
 export type CreateDeliveryTestContextOptions = {
   readonly tenantUserIdsQuery?: string;

package/packages/bundled-features/src/delivery/types.ts

@@ -14,9 +14,9 @@ import type {
 } from "@cosmicdrift/kumiko-framework/engine";
 import type { FileProviderResolver } from "@cosmicdrift/kumiko-framework/files";
 import type { SecretsContext } from "@cosmicdrift/kumiko-framework/secrets";
-import type { MailPayload, RenderedTemplateRef } from "../renderer-foundation/index.js";
-import type { EmailAttachmentRef } from "./attachment-ref.js";
-import { DELIVERY_CHANNEL_EXTENSION } from "./constants.js";
+import type { MailPayload, RenderedTemplateRef } from "../renderer-foundation/index.ts";
+import type { EmailAttachmentRef } from "./attachment-ref.ts";
+import { DELIVERY_CHANNEL_EXTENSION } from "./constants.ts";
 
 // --- Channel Interface ---
 

package/packages/bundled-features/src/delivery/unsubscribe-link.ts

@@ -1,9 +1,9 @@
 import { publicOriginOf } from "@cosmicdrift/kumiko-framework/api";
 import type { TenantId } from "@cosmicdrift/kumiko-framework/engine";
-import { hashUnsubscribeAddress } from "./address-opt-out.js";
-import { DELIVERY_UNSUBSCRIBE_PATH } from "./constants.js";
-import type { ChannelContext } from "./types.js";
-import { signAddressUnsubscribeToken, signUnsubscribeToken } from "./unsubscribe.js";
+import { hashUnsubscribeAddress } from "./address-opt-out.ts";
+import { DELIVERY_UNSUBSCRIBE_PATH } from "./constants.ts";
+import type { ChannelContext } from "./types.ts";
+import { signAddressUnsubscribeToken, signUnsubscribeToken } from "./unsubscribe.ts";
 
 /** Secret shared with `createUnsubscribeRoutes` plus the public origin the links point at. */
 export type UnsubscribeLinkConfig = {

package/packages/bundled-features/src/delivery/unsubscribe-page-strings.ts

@@ -9,9 +9,14 @@ export const UNSUBSCRIBE_PAGE_EN = {
   "mail.unsubscribe.doneTitle": "Unsubscribed",
   "mail.unsubscribe.doneMessage": "You have been unsubscribed.",
   "mail.unsubscribe.undoButton": "Undo",
+  "mail.unsubscribe.undoHint": "Unsubscribed by mistake? You can undo it within the next hour.",
   "mail.unsubscribe.resubscribedTitle": "Subscribed again",
   "mail.unsubscribe.resubscribedMessage": "You have been subscribed again.",
   "mail.unsubscribe.failed": "That did not work. Please try again later.",
+  "mail.unsubscribe.failedTitle": "Something went wrong",
+  "mail.unsubscribe.invalidTitle": "Link no longer valid",
+  "mail.unsubscribe.invalidMessage":
+    "This link is invalid or has expired. Please use the unsubscribe link in a more recent email.",
 } as const;
 
 registerMailTranslations("en", UNSUBSCRIBE_PAGE_EN);

package/packages/bundled-features/src/delivery/unsubscribe-page.ts

@@ -0,0 +1,226 @@
+import { createHash } from "node:crypto";
+import { mailT } from "@cosmicdrift/kumiko-framework/i18n";
+import { escapeHtml, escapeHtmlAttr } from "@cosmicdrift/kumiko-headless";
+import type { MailChrome, MailChromeLink } from "../renderer-foundation/index.ts";
+import { DELIVERY_RESUBSCRIBE_PATH, DELIVERY_UNSUBSCRIBE_PATH } from "./public-names.ts";
+import "./unsubscribe-page-strings.ts";
+
+export type UnsubscribePageState =
+  | { readonly kind: "confirm"; readonly token: string }
+  // Without a resubscribeToken the page offers no undo button.
+  | { readonly kind: "unsubscribed"; readonly resubscribeToken?: string }
+  | { readonly kind: "resubscribed" }
+  | { readonly kind: "failed" }
+  | { readonly kind: "invalid" };
+
+export type UnsubscribePageInput = {
+  readonly state: UnsubscribePageState;
+  /** A locale with registered mail translations (see resolveMailLocale). */
+  readonly locale: string;
+  /** The tenant's mail look; without it the page shows the plain card. */
+  readonly chrome?: MailChrome | null | undefined;
+};
+
+// Same values as the in-code mail layout of renderer-mail-html, so the page reads as the mail's sequel.
+const DEFAULT_ACCENT_COLOR = "#1f5468";
+const HEX_COLOR = /^#[0-9a-fA-F]{6}$/;
+const FONT_URL_PREFIX = "/assets/kumiko/fonts/ibm-plex-sans-latin-";
+
+function accentOf(chrome: MailChrome | null | undefined): string {
+  const accent = chrome?.accentColor;
+  return accent !== undefined && HEX_COLOR.test(accent) ? accent : DEFAULT_ACCENT_COLOR;
+}
+
+function httpsOrigin(url: string | undefined): string | undefined {
+  if (url === undefined) return undefined;
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" ? parsed.origin : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function webHost(url: string): string | undefined {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" || parsed.protocol === "http:" ? parsed.host : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+const SAFE_LINK_URL = /^(https?:|mailto:)/i;
+
+function linkHtml(link: MailChromeLink): string {
+  const url = link.url.trim();
+  if (!SAFE_LINK_URL.test(url) || link.label.trim() === "") return "";
+  return `<a href="${escapeHtmlAttr(url)}">${escapeHtml(link.label)}</a>`;
+}
+
+// The style block is static apart from the validated hex accent and the markup carries
+// no style attributes, so the CSP admits exactly this block by its hash.
+function pageStyle(accent: string): string {
+  return `@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("${FONT_URL_PREFIX}400.woff2") format("woff2")}
+@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("${FONT_URL_PREFIX}600.woff2") format("woff2")}
+:root{--accent:${accent}}
+*{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{background:#ecedea;color:#2a2f3a;font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
+.page{max-width:560px;margin:0 auto;padding:48px 16px}
+.card{background:#fff;border:1px solid #dcdfda;border-radius:14px;overflow:hidden}
+.accent{height:4px;background:var(--accent)}
+.brand{display:flex;align-items:center;gap:10px;padding:32px 40px 0}
+.brand img{height:28px;width:auto;max-width:140px;display:block}
+.tile{width:28px;height:28px;line-height:28px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;text-align:center;flex:none}
+.name{font-size:15px;font-weight:600;color:#0b0d12}
+.suffix{font-size:13px;color:#5a6170}
+.content{padding:28px 40px 36px}
+h1{margin:0 0 8px;font-size:22px;line-height:1.3;font-weight:600;color:#0b0d12}
+p{margin:0}
+form{margin:24px 0 0}
+.button{display:inline-block;font:inherit;font-weight:600;font-size:15px;line-height:1.4;padding:10px 20px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
+.button.secondary{background:#fff;color:var(--accent)}
+.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.hint{margin-top:24px;font-size:14px;color:#5a6170}
+.hint+form{margin-top:12px}
+.band{background:#fbfbfa;border-top:1px solid #ecedea;padding:16px 40px;font-size:13px;color:#5a6170}
+.band a{color:#4a515e}
+.footer{padding:20px 24px 0;text-align:center;font-size:12px;color:#5a6170}
+.footer a{color:#5a6170}
+@media (max-width:480px){.page{padding:24px 12px}.brand{padding:24px 20px 0}.content{padding:20px 20px 28px}.band{padding:14px 20px}h1{font-size:20px}.button{width:100%}}`;
+}
+
+function brandRowHtml(chrome: MailChrome): string {
+  const name = chrome.tenantName.trim();
+  const initial = Array.from(name)[0]?.toLocaleUpperCase() ?? "";
+  const mark =
+    httpsOrigin(chrome.logoUrl) !== undefined && chrome.logoUrl !== undefined
+      ? `<img src="${escapeHtmlAttr(chrome.logoUrl)}" alt="">`
+      : initial === ""
+        ? ""
+        : `<span class="tile" aria-hidden="true">${escapeHtml(initial)}</span>`;
+  const suffix = chrome.brandSuffix.trim();
+  if (mark === "" && name === "") return "";
+  return `<div class="brand">${mark}${name === "" ? "" : `<span class="name">${escapeHtml(name)}</span>`}${suffix === "" ? "" : `<span class="suffix">${escapeHtml(suffix)}</span>`}</div>`;
+}
+
+function bandHtml(chrome: MailChrome): string {
+  const host = chrome.siteUrl === undefined ? undefined : webHost(chrome.siteUrl);
+  if (host === undefined || chrome.siteUrl === undefined) return "";
+  return `<div class="band"><a href="${escapeHtmlAttr(chrome.siteUrl)}">${escapeHtml(host)}</a></div>`;
+}
+
+function footerHtml(chrome: MailChrome): string {
+  const text = chrome.footerText?.trim() ?? "";
+  const links = [chrome.imprint, chrome.privacy]
+    .map((link) => (link === undefined ? "" : linkHtml(link)))
+    .filter((html) => html !== "");
+  const lineHtmls = [
+    ...(text === "" ? [] : [escapeHtml(text)]),
+    ...(links.length === 0 ? [] : [links.join(" · ")]),
+  ];
+  const linesHtml = lineHtmls.join("<br>");
+  return linesHtml === "" ? "" : `<footer class="footer">${linesHtml}</footer>`;
+}
+
+function tokenForm(action: string, token: string, label: string, variant: string): string {
+  return `<form method="post" action="${escapeHtmlAttr(action)}">
+<input type="hidden" name="token" value="${escapeHtmlAttr(token)}">
+<button type="submit" class="${escapeHtmlAttr(variant)}">${escapeHtml(label)}</button>
+</form>`;
+}
+
+type PageText = { readonly title: string; readonly bodyHtml: string };
+
+function pageText(state: UnsubscribePageState, lang: string): PageText {
+  const paragraph = (key: string): string => `<p>${escapeHtml(mailT(lang, key))}</p>`;
+  switch (state.kind) {
+    case "confirm":
+      return {
+        title: mailT(lang, "mail.unsubscribe.confirmTitle"),
+        bodyHtml: `${paragraph("mail.unsubscribe.confirmQuestion")}
+${tokenForm(DELIVERY_UNSUBSCRIBE_PATH, state.token, mailT(lang, "mail.unsubscribe.confirmButton"), "button")}`,
+      };
+    case "unsubscribed":
+      return {
+        title: mailT(lang, "mail.unsubscribe.doneTitle"),
+        bodyHtml:
+          state.resubscribeToken === undefined
+            ? paragraph("mail.unsubscribe.doneMessage")
+            : `${paragraph("mail.unsubscribe.doneMessage")}
+<p class="hint">${escapeHtml(mailT(lang, "mail.unsubscribe.undoHint"))}</p>
+${tokenForm(DELIVERY_RESUBSCRIBE_PATH, state.resubscribeToken, mailT(lang, "mail.unsubscribe.undoButton"), "button secondary")}`,
+      };
+    case "resubscribed":
+      return {
+        title: mailT(lang, "mail.unsubscribe.resubscribedTitle"),
+        bodyHtml: paragraph("mail.unsubscribe.resubscribedMessage"),
+      };
+    case "failed":
+      return {
+        title: mailT(lang, "mail.unsubscribe.failedTitle"),
+        bodyHtml: paragraph("mail.unsubscribe.failed"),
+      };
+    case "invalid":
+      return {
+        title: mailT(lang, "mail.unsubscribe.invalidTitle"),
+        bodyHtml: paragraph("mail.unsubscribe.invalidMessage"),
+      };
+  }
+}
+
+export type RenderedUnsubscribePage = {
+  readonly html: string;
+  readonly contentSecurityPolicy: string;
+};
+
+// The page loads nothing but its own style block, the same-origin font and, with
+// branding, the tenant's https logo. Forms only post back to the same origin.
+function contentSecurityPolicy(style: string, chrome: MailChrome | null | undefined): string {
+  const styleHash = createHash("sha256").update(style).digest("base64");
+  const logoOrigin = httpsOrigin(chrome?.logoUrl);
+  return [
+    "default-src 'none'",
+    `style-src 'sha256-${styleHash}'`,
+    "font-src 'self'",
+    `img-src 'self' data:${logoOrigin === undefined ? "" : ` ${logoOrigin}`}`,
+    "form-action 'self'",
+    "base-uri 'none'",
+    "frame-ancestors 'none'",
+  ].join("; ");
+}
+
+export function renderUnsubscribePage(input: UnsubscribePageInput): RenderedUnsubscribePage {
+  const { state, locale, chrome } = input;
+  const { title, bodyHtml } = pageText(state, locale);
+  const style = pageStyle(accentOf(chrome));
+  const branded = chrome !== null && chrome !== undefined;
+  // html-ok: static CSS whose only variable is the hex-validated accent; escaping would break its quotes and the CSP hash.
+  const styleBlockHtml = `<style>${style}</style>`;
+  const html = `<!doctype html>
+<html lang="${escapeHtmlAttr(locale)}">
+<head>
+<meta charset="utf-8">
+<meta name="robots" content="noindex">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapeHtml(title)}</title>
+${styleBlockHtml}
+</head>
+<body>
+<main class="page">
+<div class="card">
+<div class="accent"></div>
+${branded ? brandRowHtml(chrome) : ""}
+<div class="content">
+<h1>${escapeHtml(title)}</h1>
+${bodyHtml}
+</div>
+${branded ? bandHtml(chrome) : ""}
+</div>
+${branded ? footerHtml(chrome) : ""}
+</main>
+</body>
+</html>`;
+  return { html, contentSecurityPolicy: contentSecurityPolicy(style, chrome) };
+}