@anthusai/papyrus 5.20.0 → 5.22.0

package/lib/newsletter-fixture.ts

@@ -0,0 +1,184 @@
+/**
+ * A pretend Newsletter service for `?demo=1` and the tests: the same operations and answers as the functions, held in memory.
+ * Placeholders only (reader addresses are @example.com); nothing here is a real subscriber, issue or postal address.
+ */
+import type { NewsletterApi, NewsletterOperation } from "./newsletter-client";
+import type {
+  NewsletterDelivery,
+  NewsletterEvent,
+  NewsletterExportRow,
+  NewsletterIssue,
+  NewsletterList,
+  NewsletterSubscriber,
+} from "./newsletter-model";
+
+export const FIXTURE_TIME_ZONE = "America/New_York";
+
+const LISTS: NewsletterList[] = [
+  { id: "weekly", name: "Weekly roundup", kind: "roundup", confirmed: 412, pending: 17, unsubscribed: 38, timezone: FIXTURE_TIME_ZONE },
+  { id: "alerts-security", name: "Security alerts", kind: "alert", confirmed: 96, pending: 4, unsubscribed: 9 },
+];
+
+export function fixtureIssues(): NewsletterIssue[] {
+  const counts = { queued: 0, sent: 0, failed: 0, suppressed: 0, skipped: 0, delivered: 0, bounced: 0, complained: 0, softBounced: 0 };
+  return [
+    {
+      issueId: "a1", listId: "weekly", listName: "Weekly roundup", kind: "roundup", itemId: "item-weekly-0122", status: "draft",
+      subject: "Weekly roundup: Jan 15 to Jan 22, 2027", counts,
+    },
+    {
+      issueId: "a2", listId: "alerts-security", listName: "Security alerts", kind: "alert", itemId: "item-alert-1", status: "awaiting_approval",
+      subject: "A critical patch is out for the build tool", counts,
+    },
+    {
+      issueId: "a3", listId: "weekly", listName: "Weekly roundup", kind: "roundup", itemId: "item-weekly-0115", status: "scheduled",
+      subject: "Weekly roundup: Jan 8 to Jan 15, 2027", sendAt: "2027-01-15T14:00:00Z", approvedBy: "admin-user", approvedAt: "2027-01-14T18:30:00Z",
+      counts, editedSinceApproval: true,
+    },
+    {
+      issueId: "a4", listId: "weekly", listName: "Weekly roundup", kind: "roundup", itemId: "item-weekly-0108", status: "blocked",
+      subject: "Weekly roundup: Jan 1 to Jan 8, 2027", sendAt: "2027-01-08T14:00:00Z", note: "postal address missing", counts,
+    },
+    {
+      issueId: "a5", listId: "weekly", listName: "Weekly roundup", kind: "roundup", itemId: "item-weekly-0101", status: "sending",
+      subject: "Weekly roundup: Dec 25 to Jan 1, 2027", sendAt: "2027-01-01T14:00:00Z", approvedBy: "admin-user",
+      counts: { ...counts, queued: 429, sent: 240, delivered: 188 },
+    },
+    {
+      issueId: "a6", listId: "weekly", listName: "Weekly roundup", kind: "roundup", itemId: "item-weekly-1225", status: "sent",
+      subject: "Weekly roundup: Dec 18 to Dec 25, 2026", sendAt: "2026-12-25T14:00:00Z", sentAt: "2026-12-25T14:09:40Z", approvedBy: "admin-user",
+      archiveUrl: "https://news.example.com/roundup/2026-12-25.html",
+      counts: { ...counts, queued: 421, sent: 418, delivered: 409, bounced: 3, complained: 1, failed: 1, suppressed: 2, softBounced: 2 },
+    },
+    {
+      issueId: "a7", listId: "alerts-security", listName: "Security alerts", kind: "alert", itemId: "item-alert-0", status: "quarantined",
+      subject: "An alert with a status this panel does not know", counts,
+    },
+  ];
+}
+
+function deliveriesFor(issueId: string, full: boolean): NewsletterDelivery[] {
+  const address = (index: number) => (full ? `reader${index}@example.com` : `r***@example.com`);
+  const rows: NewsletterDelivery[] = [
+    { address: address(1), status: "delivered", at: "2026-12-25T14:00:04Z", eventAt: "2026-12-25T14:00:09Z" },
+    { address: address(2), status: "delivered", at: "2026-12-25T14:00:05Z", eventAt: "2026-12-25T14:00:12Z" },
+    { address: address(3), status: "bounced", at: "2026-12-25T14:00:06Z", eventAt: "2026-12-25T14:00:20Z" },
+    { address: address(4), status: "complained", at: "2026-12-25T14:00:07Z", eventAt: "2026-12-25T14:02:31Z" },
+    { address: address(5), status: "failed", at: "2026-12-25T14:00:08Z", error: "MessageRejected" },
+    { address: "(erased)", status: "sent", at: "2026-12-25T14:00:09Z" },
+  ];
+  return issueId === "a6" || issueId === "a5" ? rows : [];
+}
+
+const SUBSCRIBERS: NewsletterSubscriber[] = [
+  { email: "reader1@example.com", status: "confirmed", lists: [{ id: "weekly", status: "subscribed" }, { id: "alerts-security", status: "subscribed" }], createdAt: "2026-11-02T10:11:00Z", confirmedAt: "2026-11-02T10:13:00Z" },
+  { email: "reader2@example.com", status: "confirmed", lists: [{ id: "weekly", status: "subscribed" }], createdAt: "2026-11-09T08:00:00Z", confirmedAt: "2026-11-09T08:02:00Z" },
+  { email: "reader3@example.com", status: "pending", lists: [{ id: "alerts-security", status: "pending" }], createdAt: "2026-12-30T21:45:00Z" },
+  { email: "=reader4@example.com", status: "unsubscribed", lists: [{ id: "weekly", status: "unsubscribed" }], createdAt: "2026-10-01T09:00:00Z", confirmedAt: "2026-10-01T09:05:00Z" },
+];
+
+const EVENTS: NewsletterEvent[] = [
+  { type: "Complaint", at: "2026-12-25T14:02:31Z", issue: "a6", list: "weekly" },
+  { type: "Bounce", at: "2026-12-25T14:00:20Z", issue: "a6", list: "weekly", detail: "Permanent" },
+  { type: "Delivery", at: "2026-12-25T14:00:12Z", issue: "a6", list: "weekly" },
+  { type: "Delivery", at: "2026-12-25T14:00:09Z", issue: "a6", list: "weekly" },
+  { type: "Bounce", at: "2026-12-25T13:59:50Z", issue: "a5", list: "weekly", detail: "Transient" },
+];
+
+const SAMPLE_HTML = `<!doctype html><html><body style="margin:0;font-family:Georgia,serif;color:#111"><div style="max-width:560px;margin:0 auto;padding:24px"><h1 style="font-size:24px;margin:0 0 12px">Weekly roundup</h1><p>A short introduction goes here.</p><h2 style="font-size:18px">Security</h2><ul><li><a href="#preview">A critical patch is out</a>: update today.</li></ul><hr><p style="font-size:12px;color:#555">You get this because you subscribed. <a href="#preview">Manage</a> &middot; <a href="#preview">Unsubscribe</a><br>1 Example Street, Example City</p></div></body></html>`;
+
+export type FixtureOptions = { postalAddress?: boolean; admin?: boolean };
+
+/** One fixture service per mounted panel, so a demo session keeps its changes until reload. */
+export function createFixtureApi(options: FixtureOptions = {}): NewsletterApi {
+  const full = options.admin !== false;
+  const issues = fixtureIssues();
+  const subscribers = [...SUBSCRIBERS];
+  const paused = { paused: true, reason: "papyrus-newsletter-example-bounce-rate: bounce rate above 4%", pausedAt: "2026-12-26T09:12:00Z" } as { paused: boolean; reason?: string; pausedAt?: string };
+  const findIssue = (input: Record<string, unknown>) => issues.find((issue) => issue.issueId === input.issueId);
+  const failure = (error: string, message = "") => ({ ok: false as const, error, message });
+
+  const handlers: Record<NewsletterOperation, (input: Record<string, unknown>) => object> = {
+    newsletterOverview: () => ({
+      ok: true,
+      lists: LISTS,
+      totals: { confirmed: 488, pending: 20, unsubscribed: 45 },
+      suppressed: 12,
+      paused: { ...paused },
+      events: EVENTS,
+    }),
+    newsletterIssues: (input) => ({
+      ok: true,
+      issues: issues.filter((issue) => (!input.status || issue.status === input.status) && (!input.listId || issue.listId === input.listId)).map(({ editedSinceApproval: _edited, ...rest }) => rest),
+    }),
+    newsletterIssue: (input) => {
+      const issue = findIssue(input);
+      return issue ? { ok: true, issue } : failure("not_found");
+    },
+    newsletterPreview: (input) => {
+      const issue = findIssue(input);
+      if (!issue) return failure("not_found");
+      return { ok: true, subject: issue.subject, html: SAMPLE_HTML, text: `${issue.subject}\n\nA short introduction goes here.\n\nSecurity\n- A critical patch is out: update today.\n\nYou get this because you subscribed.`, bytes: SAMPLE_HTML.length, postalAddress: options.postalAddress !== false };
+    },
+    newsletterIssueDeliveries: (input) => (findIssue(input) ? { ok: true, deliveries: deliveriesFor(String(input.issueId), full) } : failure("not_found")),
+    newsletterSubscribers: (input) => ({
+      ok: true,
+      subscribers: subscribers.filter((row) => (!input.status || row.status === input.status) && (!input.listId || row.lists.some((entry) => entry.id === input.listId))),
+    }),
+    newsletterExport: () => ({
+      ok: true,
+      rows: subscribers.filter((row) => row.status !== "unsubscribed").map((row): NewsletterExportRow => ({
+        email: row.email, status: row.status, lists: row.lists.map((entry) => `${entry.id}:${entry.status}`).join(";"), createdAt: row.createdAt,
+        consentRequestedAt: row.createdAt, consentConfirmedAt: row.confirmedAt ?? "", consentFormId: "newsletter",
+        consentPageUrl: "https://news.example.com/roundup/", consentWording: "Send me the weekly email.",
+      })),
+    }),
+    newsletterApproveIssue: (input) => {
+      const issue = findIssue(input);
+      if (!issue) return failure("not_found");
+      if (!["draft", "awaiting_approval", "scheduled", "blocked"].includes(issue.status)) return failure("invalid_state");
+      issue.status = "scheduled";
+      issue.sendAt = String(input.sendAt);
+      issue.approvedBy = "admin-user";
+      delete issue.note;
+      delete issue.editedSinceApproval;
+      return { ok: true, issue, adjusted: false, warnings: options.postalAddress === false ? ["postal address missing: the send will be blocked until an operator sets it"] : [] };
+    },
+    newsletterCancelIssue: (input) => {
+      const issue = findIssue(input);
+      if (!issue) return failure("not_found");
+      if (issue.status !== "scheduled") return failure("invalid_state");
+      issue.status = "draft";
+      issue.note = "cancelled by admin-user";
+      delete issue.sendAt;
+      delete issue.editedSinceApproval;
+      return { ok: true, issue };
+    },
+    newsletterStopIssue: (input) => {
+      const issue = findIssue(input);
+      if (!issue) return failure("not_found");
+      if (issue.status !== "sending") return failure("invalid_state");
+      issue.status = "stopped";
+      issue.note = "stopped by admin-user";
+      return { ok: true, issue };
+    },
+    newsletterTestSend: (input) => (findIssue(input) ? { ok: true } : failure("not_found")),
+    newsletterCreateDraft: (input) => (input.listId === "weekly" ? { ok: true, status: "exists", issueId: "a1", itemId: "item-weekly-0122" } : failure("bad_request")),
+    newsletterErase: (input) => {
+      const at = subscribers.findIndex((row) => row.email === input.email);
+      if (at >= 0) subscribers.splice(at, 1);
+      return { ok: true, removed: at >= 0 ? 3 : 2 };
+    },
+    newsletterResume: () => {
+      paused.paused = false;
+      paused.reason = undefined;
+      return { ok: true, paused: false };
+    },
+  };
+
+  return (async (operation: NewsletterOperation, input: Record<string, unknown> = {}) => {
+    const admin = ["newsletterApproveIssue", "newsletterCancelIssue", "newsletterStopIssue", "newsletterSubscribers", "newsletterExport", "newsletterErase", "newsletterResume"];
+    if (options.admin === false && admin.includes(operation)) return { ok: false, error: "forbidden" };
+    return handlers[operation](input);
+  }) as NewsletterApi;
+}

package/lib/newsletter-model.ts

@@ -0,0 +1,202 @@
+/** Shapes and wording for the newsroom Newsletter panel. `src/papyrus_content/newsletter/` (panel.py, issues.py) produces them. */
+import { getNewsroomNavHref } from "./newsroom-nav";
+import { csvCell } from "./signup-csv";
+
+export type NewsletterCounts = Partial<Record<"queued" | "sent" | "failed" | "suppressed" | "skipped" | "delivered" | "bounced" | "complained" | "softBounced", number>>;
+
+export type NewsletterList = { id: string; name: string; kind: string; confirmed: number; pending: number; unsubscribed: number; timezone?: string };
+
+export type NewsletterEvent = { type: string; at: string; issue?: string; list?: string; detail?: string };
+
+export type NewsletterOverview = {
+  lists: NewsletterList[];
+  totals: { confirmed: number; pending: number; unsubscribed: number };
+  suppressed: number;
+  paused: { paused: boolean; reason?: string; pausedAt?: string; resumedAt?: string };
+  events: NewsletterEvent[];
+};
+
+export type NewsletterIssue = {
+  issueId: string;
+  listId: string;
+  listName?: string;
+  kind: string;
+  itemId?: string;
+  subject: string;
+  status: string;
+  sendAt?: string;
+  approvedBy?: string;
+  approvedAt?: string;
+  sentAt?: string;
+  counts: NewsletterCounts;
+  note?: string;
+  archiveUrl?: string;
+  editedSinceApproval?: boolean;
+};
+
+export type NewsletterPreview = { subject: string; html: string; text: string; bytes: number; postalAddress: boolean };
+
+export type NewsletterDelivery = { address: string; status: string; at: string; eventAt?: string; error?: string };
+
+export type NewsletterSubscriber = { email: string; status: string; lists: { id: string; status: string }[]; createdAt: string; confirmedAt?: string };
+
+export type NewsletterExportRow = {
+  email: string;
+  status: string;
+  lists: string;
+  createdAt: string;
+  consentRequestedAt: string;
+  consentConfirmedAt: string;
+  consentFormId: string;
+  consentPageUrl: string;
+  consentWording: string;
+};
+
+export type NewsletterFailure = { ok: false; error: string; message?: string };
+
+/** The newsroom words for the statuses the functions write. A status this panel does not know is shown as written, never hidden. */
+const STATUS_LABELS: Record<string, string> = {
+  draft: "Draft",
+  awaiting_approval: "Awaiting approval",
+  scheduled: "Scheduled",
+  sending: "Sending",
+  sent: "Sent",
+  stopped: "Stopped",
+  cancelled: "Cancelled",
+  blocked: "Blocked",
+};
+/** A mark beside the word, so no status relies on colour alone. */
+const STATUS_MARKS: Record<string, string> = { draft: "✎", awaiting_approval: "?", scheduled: "◷", sending: "▶", sent: "✓", stopped: "■", cancelled: "–", blocked: "!" };
+
+export function statusLabel(status: string): string {
+  if (STATUS_LABELS[status]) return STATUS_LABELS[status];
+  const words = status.replace(/_/g, " ").trim();
+  return words ? words.charAt(0).toUpperCase() + words.slice(1) : "Unknown";
+}
+
+export function statusMark(status: string): string {
+  return STATUS_MARKS[status] ?? "·";
+}
+
+export const ISSUE_STATUS_FILTERS = ["draft", "awaiting_approval", "scheduled", "sending", "sent", "blocked", "stopped", "cancelled"] as const;
+
+/** Approval accepts a draft, an alert awaiting approval, a scheduled issue (a new time) and a blocked one (cause fixed). */
+export function canApprove(status: string): boolean {
+  return status === "draft" || status === "awaiting_approval" || status === "scheduled" || status === "blocked";
+}
+export const canCancel = (status: string): boolean => status === "scheduled";
+export const canStop = (status: string): boolean => status === "sending";
+
+export function issueEditorHref(itemId: string, demo?: boolean): string {
+  return getNewsroomNavHref(`/newsroom/articles/${encodeURIComponent(itemId)}`, demo);
+}
+
+const ERROR_WORDS: Record<string, string> = {
+  forbidden: "Your role cannot do this.",
+  not_found: "That issue no longer exists.",
+  invalid_state: "The issue changed state. Refresh and try again.",
+  item_missing: "The issue's item no longer exists.",
+  render_failed: "The issue cannot be rendered. Open it in the editor and fix the body.",
+  bad_request: "The request was not understood.",
+  no_address: "Your account has no email address to send a test to.",
+  unavailable: "The newsletter service could not be reached. Try again in a minute.",
+};
+
+/** One sentence for a failed operation. A missing postal address is an operator task, so the panel says where it is set. */
+export function failureText(failure: NewsletterFailure): string {
+  if (failure.error === "postal_address_missing") {
+    return "This site has no postal address for the email footer, and mail law requires one. An operator sets it in the site's AWS configuration (an SSM parameter); it cannot be set from the newsroom.";
+  }
+  return ERROR_WORDS[failure.error] ?? failure.message ?? "The request failed.";
+}
+
+// -- times ---------------------------------------------------------------------------------------------------------------
+
+export function formatUtc(iso: string | null | undefined): string {
+  if (!iso) return "never";
+  const match = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2})/.exec(iso);
+  return match ? `${match[1]} ${match[2]} UTC` : iso;
+}
+
+export function validTimeZone(zone: string | null | undefined): string | null {
+  if (!zone) return null;
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone: zone });
+    return zone;
+  } catch {
+    return null;
+  }
+}
+
+function wallParts(instant: Date, zone: string): { year: number; month: number; day: number; hour: number; minute: number } {
+  const parts = new Intl.DateTimeFormat("en-US", {
+    timeZone: zone, hourCycle: "h23", year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit",
+  }).formatToParts(instant);
+  const pick = (type: string) => Number(parts.find((part) => part.type === type)?.value ?? "0");
+  return { year: pick("year"), month: pick("month"), day: pick("day"), hour: pick("hour") % 24, minute: pick("minute") };
+}
+
+/** Minutes the zone is ahead of UTC at that instant. */
+function offsetMinutes(instant: Date, zone: string): number {
+  const wall = wallParts(instant, zone);
+  const asUtc = Date.UTC(wall.year, wall.month - 1, wall.day, wall.hour, wall.minute);
+  return Math.round((asUtc - Math.floor(instant.getTime() / 60000) * 60000) / 60000);
+}
+
+const pad = (value: number) => String(value).padStart(2, "0");
+
+/** Local wall time `YYYY-MM-DDTHH:mm` (a datetime-local value) as an ISO instant, for the given zone. */
+export function zonedInputToIso(local: string, zone: string): string | null {
+  const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(local);
+  if (!match) return null;
+  const [, year, month, day, hour, minute] = match.map(Number) as unknown as number[];
+  const wallAsUtc = Date.UTC(year, month - 1, day, hour, minute);
+  let guess = wallAsUtc - offsetMinutes(new Date(wallAsUtc), zone) * 60000;
+  guess = wallAsUtc - offsetMinutes(new Date(guess), zone) * 60000; // once more: the offset can differ across a clock change
+  const instant = new Date(guess);
+  return Number.isNaN(instant.getTime()) ? null : instant.toISOString().replace(".000Z", "Z");
+}
+
+/** The next whole hour on the zone's clock, as a datetime-local value. */
+export function nextWholeHourInput(now: Date, zone: string): string {
+  const wall = wallParts(now, zone);
+  const next = new Date(Date.UTC(wall.year, wall.month - 1, wall.day, wall.hour + 1, 0));
+  return `${next.getUTCFullYear()}-${pad(next.getUTCMonth() + 1)}-${pad(next.getUTCDate())}T${pad(next.getUTCHours())}:00`;
+}
+
+/** An ISO instant as a datetime-local value in the zone. */
+export function isoToZonedInput(iso: string, zone: string): string {
+  const wall = wallParts(new Date(iso), zone);
+  return `${wall.year}-${pad(wall.month)}-${pad(wall.day)}T${pad(wall.hour)}:${pad(wall.minute)}`;
+}
+
+/** `2027-01-15 09:00 EST` in the zone. */
+export function formatInZone(iso: string | null | undefined, zone: string): string {
+  if (!iso) return "not set";
+  const instant = new Date(iso);
+  if (Number.isNaN(instant.getTime())) return iso;
+  const label = new Intl.DateTimeFormat("en-US", { timeZone: zone, timeZoneName: "short" }).formatToParts(instant).find((part) => part.type === "timeZoneName")?.value ?? zone;
+  return `${isoToZonedInput(iso, zone).replace("T", " ")} ${label}`;
+}
+
+// -- counts and CSV ------------------------------------------------------------------------------------------------------
+
+/** "12 sent, 2 delivered, 1 bounced"; only counters above zero, in reading order. */
+export function countsText(counts: NewsletterCounts): string {
+  const order: [keyof NewsletterCounts, string][] = [
+    ["queued", "queued"], ["sent", "sent"], ["delivered", "delivered"], ["bounced", "bounced"], ["complained", "complained"],
+    ["failed", "failed"], ["suppressed", "suppressed"], ["skipped", "skipped"], ["softBounced", "soft bounced"],
+  ];
+  const parts = order.filter(([name]) => (counts[name] ?? 0) > 0).map(([name, label]) => `${counts[name]} ${label}`);
+  return parts.length ? parts.join(", ") : "nothing sent yet";
+}
+
+export const NEWSLETTER_CSV_HEADER = [
+  "email", "status", "lists", "createdAt", "consentRequestedAt", "consentConfirmedAt", "consentFormId", "consentPageUrl", "consentWording",
+] as const;
+
+/** Every cell goes through the formula neutraliser: addresses and consent wording are text people typed. */
+export function subscribersToCsv(rows: NewsletterExportRow[]): string {
+  const lines = rows.map((row) => NEWSLETTER_CSV_HEADER.map((column) => csvCell(String(row[column] ?? ""))).join(","));
+  return `${[NEWSLETTER_CSV_HEADER.join(","), ...lines].join("\r\n")}\r\n`;
+}

package/lib/newsletter-pages.ts

@@ -0,0 +1,264 @@
+import { NextResponse } from "next/server";
+
+/**
+ * The small server-rendered pages of the newsletter plugin (confirm prompt, confirmed, expired).
+ * Plain HTML, no scripts, themed from the plugin's public settings. Every dynamic value is escaped, the token never
+ * reaches a link, and the pages are never cached or indexed.
+ */
+export type NewsletterPageTheme = { accent: string; text: string; background: string; surface: string; muted: string; fontFamily: string };
+
+export const DEFAULT_PAGE_THEME: NewsletterPageTheme = {
+  accent: "#1a4d8f",
+  text: "#1b1b1b",
+  background: "#ffffff",
+  surface: "#f4f4f4",
+  muted: "#555555",
+  fontFamily: "Georgia, 'Times New Roman', serif",
+};
+
+const UNSAFE_CSS = /[<>{};"\\`]|url\(|expression\(|@import/i;
+const MAXIMUM_LISTS_SHOWN = 20;
+
+export function escapeHtml(value: string): string {
+  return value.replace(/[&<>"']/g, (character) => `&#${character.charCodeAt(0)};`);
+}
+
+/** Theme tokens from `custom.papyrusPlugins.newsletter.theme`; a missing or unsafe value falls back to the default. */
+export function pageTheme(raw: unknown): NewsletterPageTheme {
+  const theme: NewsletterPageTheme = { ...DEFAULT_PAGE_THEME };
+  if (typeof raw !== "object" || raw === null) return theme;
+  for (const key of Object.keys(theme) as Array<keyof NewsletterPageTheme>) {
+    const value = (raw as Record<string, unknown>)[key];
+    if (typeof value === "string" && value.length > 0 && value.length <= 200 && !UNSAFE_CSS.test(value)) theme[key] = value;
+  }
+  return theme;
+}
+
+export type FormSpec = {
+  action: string;
+  /** Hidden fields, such as the token. */
+  hidden: Record<string, string>;
+  checkboxes?: Array<{ name: string; value: string; label: string; checked: boolean }>;
+  /** Every button says what it does in words. `secondary` only changes how it looks. */
+  buttons: Array<{ label: string; name?: string; value?: string; secondary?: boolean }>;
+};
+
+export type PageContent = {
+  siteName: string;
+  theme: NewsletterPageTheme;
+  heading: string;
+  /** A short status line shown above the text (for example "Saved"), as words. */
+  notice?: string;
+  paragraphs: string[];
+  lists?: string[];
+  forms?: FormSpec[];
+  links?: Array<{ href: string; label: string }>;
+};
+
+function renderForm(form: FormSpec): string {
+  const hidden = Object.entries(form.hidden)
+    .map(([name, value]) => `<input type="hidden" name="${escapeHtml(name)}" value="${escapeHtml(value)}">`)
+    .join("");
+  const boxes = (form.checkboxes ?? [])
+    .map(
+      (box, index) =>
+        `<p class="box"><input type="checkbox" id="c${index}" name="${escapeHtml(box.name)}" value="${escapeHtml(box.value)}"${box.checked ? " checked" : ""}> <label for="c${index}">${escapeHtml(box.label)}</label></p>`,
+    )
+    .join("");
+  const buttons = form.buttons
+    .map(
+      (button) =>
+        `<button type="submit"${button.name ? ` name="${escapeHtml(button.name)}" value="${escapeHtml(button.value ?? "")}"` : ""}${button.secondary ? ' class="secondary"' : ""}>${escapeHtml(button.label)}</button>`,
+    )
+    .join(" ");
+  return `<form method="post" action="${escapeHtml(form.action)}">${hidden}${boxes}<p class="actions">${buttons}</p></form>`;
+}
+
+export function renderPage(page: PageContent): string {
+  const { theme } = page;
+  const lists = (page.lists ?? []).slice(0, MAXIMUM_LISTS_SHOWN);
+  const links = (page.links ?? []).map((link) => `<p><a href="${escapeHtml(link.href)}">${escapeHtml(link.label)}</a></p>`).join("\n");
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex"><meta name="referrer" content="no-referrer">
+<title>${escapeHtml(page.heading)} - ${escapeHtml(page.siteName)}</title>
+<style>
+body{margin:0;background:${theme.background};color:${theme.text};font-family:${theme.fontFamily};line-height:1.5}
+main{max-width:34rem;margin:0 auto;padding:3rem 1.25rem}
+.site{color:${theme.muted};font-size:.95rem;margin:0 0 1.5rem}
+h1{font-size:1.6rem;line-height:1.2;margin:0 0 1rem}
+.notice{background:${theme.surface};border-left:4px solid ${theme.accent};padding:.5rem .75rem;font-weight:bold}
+ul{background:${theme.surface};margin:1rem 0;padding:.75rem 1.25rem 1rem 2rem}
+.box{margin:.6rem 0}
+input[type=checkbox]{width:1.1rem;height:1.1rem;vertical-align:middle}
+.actions{margin:1.25rem 0}
+button{background:${theme.accent};color:#fff;border:2px solid ${theme.accent};font:inherit;font-weight:bold;padding:.7rem 1.4rem;cursor:pointer;border-radius:4px;margin:0 .5rem .5rem 0}
+button.secondary{background:${theme.background};color:${theme.accent}}
+button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid ${theme.text};outline-offset:2px}
+a{color:${theme.accent}}
+</style></head><body><main>
+<p class="site">${escapeHtml(page.siteName)}</p>
+<h1>${escapeHtml(page.heading)}</h1>
+${page.notice ? `<p class="notice" role="status">${escapeHtml(page.notice)}</p>` : ""}
+${page.paragraphs.map((paragraph) => `<p>${escapeHtml(paragraph)}</p>`).join("\n")}
+${lists.length > 0 ? `<ul>${lists.map((name) => `<li>${escapeHtml(name)}</li>`).join("")}</ul>` : ""}
+${(page.forms ?? []).map(renderForm).join("\n")}
+${links}
+</main></body></html>`;
+}
+
+export const PAGE_HEADERS = {
+  "content-type": "text/html; charset=utf-8",
+  "cache-control": "no-store",
+  "referrer-policy": "no-referrer",
+  "x-content-type-options": "nosniff",
+  "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; form-action 'self'; base-uri 'none'; frame-ancestors 'none'",
+} as const;
+
+export function pageResponse(page: PageContent, status = 200): NextResponse {
+  return new NextResponse(renderPage(page), { status, headers: PAGE_HEADERS });
+}
+
+export const CONFIRM_PATH = "/api/newsletter/confirm";
+
+type Base = Pick<PageContent, "siteName" | "theme">;
+const home = (base: Base) => ({ href: "/", label: `Back to ${base.siteName}` });
+
+export function confirmPromptPage(base: Base, lists: string[], token: string): PageContent {
+  return {
+    ...base,
+    heading: "Confirm your subscription",
+    paragraphs: [`Press the button to start getting email from ${base.siteName}.${lists.length > 0 ? " You are signing up for:" : ""}`],
+    lists,
+    forms: [{ action: CONFIRM_PATH, hidden: { t: token }, buttons: [{ label: "Confirm subscription" }] }],
+  };
+}
+
+export function confirmedPage(base: Base, lists: string[], preferencesHref?: string): PageContent {
+  return {
+    ...base,
+    heading: "You are subscribed",
+    paragraphs: [lists.length > 0 ? "Thank you. You will get:" : "Thank you. Your subscription is confirmed."],
+    lists,
+    links: [...(preferencesHref ? [{ href: preferencesHref, label: "Manage your subscriptions" }] : []), home(base)],
+  };
+}
+
+export function expiredPage(base: Base): PageContent {
+  return {
+    ...base,
+    heading: "This link has expired",
+    paragraphs: [
+      "This confirmation link has expired or was already used. If you already confirmed, you are all set.",
+      "If you did not finish signing up, go back to the site and sign up again to get a new link.",
+    ],
+    links: [home(base)],
+  };
+}
+
+export function unavailablePage(base: Base): PageContent {
+  return {
+    ...base,
+    heading: "Something went wrong",
+    paragraphs: ["We could not complete this just now. Open the link in your email again in a minute."],
+    links: [home(base)],
+  };
+}
+
+export const UNSUBSCRIBE_PATH = "/api/newsletter/unsubscribe";
+export const PREFERENCES_PATH = "/api/newsletter/preferences";
+
+export function preferencesHref(token: string): string {
+  return `${PREFERENCES_PATH}?t=${encodeURIComponent(token)}`;
+}
+
+export function invalidManagePage(base: Base): PageContent {
+  return {
+    ...base,
+    heading: "This link is not valid",
+    paragraphs: ["This link is not valid, or the subscription it belongs to has been deleted. Use the link in a recent email from us."],
+    links: [home(base)],
+  };
+}
+
+export function unsubscribePromptPage(base: Base, token: string, listId: string | null, listName: string | null): PageContent {
+  return {
+    ...base,
+    heading: "Unsubscribe",
+    paragraphs: [listName ? `Stop getting "${listName}" from ${base.siteName}?` : `Stop getting all email from ${base.siteName}?`],
+    forms: [
+      {
+        action: UNSUBSCRIBE_PATH,
+        hidden: { t: token, ...(listId ? { l: listId } : {}), page: "1" },
+        buttons: [{ label: listName ? "Unsubscribe from this list" : "Unsubscribe from everything" }],
+      },
+    ],
+    links: [{ href: preferencesHref(token), label: "Choose which lists you get instead" }],
+  };
+}
+
+export function unsubscribedPage(base: Base, names: string[], token: string | null): PageContent {
+  return {
+    ...base,
+    heading: "You are unsubscribed",
+    paragraphs: [names.length > 0 ? `You will no longer get these from ${base.siteName}:` : `You will no longer get this email from ${base.siteName}.`],
+    lists: names,
+    links: [...(token ? [{ href: preferencesHref(token), label: "Change your mind? Manage your subscriptions" }] : []), home(base)],
+  };
+}
+
+export type PreferenceList = { id: string; name: string; description: string; subscribed: boolean };
+
+export function preferencesPage(base: Base, input: { token: string; email: string; lists: PreferenceList[]; notice?: string }): PageContent {
+  return {
+    ...base,
+    heading: "Your subscriptions",
+    notice: input.notice,
+    paragraphs: [`Email preferences for ${input.email}. Tick the lists you want.`],
+    forms: [
+      {
+        action: PREFERENCES_PATH,
+        hidden: { t: input.token },
+        checkboxes: input.lists.map((list) => ({
+          name: "l",
+          value: list.id,
+          label: list.description ? `${list.name}: ${list.description}` : list.name,
+          checked: list.subscribed,
+        })),
+        buttons: [
+          { label: "Save preferences", name: "action", value: "save" },
+          { label: "Unsubscribe from everything", name: "action", value: "unsubscribe_all", secondary: true },
+          { label: "Delete my data", name: "action", value: "delete", secondary: true },
+        ],
+      },
+    ],
+    links: [home(base)],
+  };
+}
+
+export function deleteConfirmPage(base: Base, token: string): PageContent {
+  return {
+    ...base,
+    heading: "Delete your data?",
+    paragraphs: [
+      `This erases your address and everything ${base.siteName} holds about your subscriptions. You will not get any more email. This cannot be undone.`,
+    ],
+    forms: [
+      {
+        action: PREFERENCES_PATH,
+        hidden: { t: token, action: "delete", confirm: "1" },
+        buttons: [{ label: "Yes, delete my data" }],
+      },
+    ],
+    links: [{ href: preferencesHref(token), label: "No, go back" }],
+  };
+}
+
+export function deletedPage(base: Base): PageContent {
+  return {
+    ...base,
+    heading: "Your data is deleted",
+    paragraphs: ["Your address and subscriptions have been erased. You will not get any more email from us."],
+    links: [home(base)],
+  };
+}