@12-apps/notifications 4.7.1 → 4.9.0

package/dist/chunk-ZFIYBNZ7.js

@@ -0,0 +1,502 @@
+import {
+  __name
+} from "./chunk-7QVYU63E.js";
+
+// src/email/previews/react/message-view.tsx
+import { ToggleGroup } from "@12-apps/ui/form/ToggleGroup";
+import { Box } from "@12-apps/ui/mui/Box";
+import { Text } from "@12-apps/ui/typography/Text";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MOBILE_WIDTH = 390;
+function Monospace({ children, testId }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "pre",
+      "data-testid": testId,
+      sx: {
+        m: 0,
+        p: 2,
+        borderRadius: 1.5,
+        border: "1px solid",
+        borderColor: "divider",
+        background: "background.default",
+        fontSize: 13,
+        lineHeight: 1.6,
+        whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
+        maxHeight: 720,
+        overflow: "auto"
+      },
+      children
+    }
+  );
+}
+__name(Monospace, "Monospace");
+function HtmlFrame({
+  detail,
+  width,
+  title
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        borderRadius: 1.5,
+        border: "1px solid",
+        borderColor: "divider",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "iframe",
+          "data-testid": "email-preview-frame",
+          title,
+          srcDoc: detail.html,
+          sandbox: "",
+          sx: {
+            border: 0,
+            width: width === "mobile" ? MOBILE_WIDTH : "100%",
+            height: 760,
+            background: "#fff"
+          }
+        }
+      )
+    }
+  );
+}
+__name(HtmlFrame, "HtmlFrame");
+function MessageView(props) {
+  const { detail, copy, tab, width, onTabChange, onWidthChange } = props;
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, "data-testid": "email-preview-view", children: [
+    /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Text, { as: "p", size: "xs", color: "secondary", children: copy.subjectLabel }),
+      /* @__PURE__ */ jsx(Text, { as: "p", size: "md", weight: "medium", "data-testid": "email-preview-subject", children: detail.subject })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 1, alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          dataTestId: "email-preview-tabs",
+          exclusive: true,
+          value: tab,
+          size: "sm",
+          options: [
+            { value: "html", label: copy.tabHtml },
+            { value: "text", label: copy.tabText },
+            { value: "source", label: copy.tabSource }
+          ],
+          onChange: (_event, value) => {
+            if (value) onTabChange(value);
+          }
+        }
+      ),
+      tab === "html" ? /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          dataTestId: "email-preview-width",
+          exclusive: true,
+          value: width,
+          size: "sm",
+          options: [
+            { value: "desktop", label: copy.widthDesktop },
+            { value: "mobile", label: copy.widthMobile }
+          ],
+          onChange: (_event, value) => {
+            if (value) onWidthChange(value);
+          }
+        }
+      ) : null
+    ] }),
+    tab === "html" ? /* @__PURE__ */ jsx(HtmlFrame, { detail, width, title: copy.frameTitle }) : null,
+    tab === "text" ? /* @__PURE__ */ jsx(Monospace, { testId: "email-preview-text", children: detail.text }) : null,
+    tab === "source" ? /* @__PURE__ */ jsx(Monospace, { testId: "email-preview-source", children: detail.html }) : null
+  ] });
+}
+__name(MessageView, "MessageView");
+
+// src/email/previews/react/preview-screen.tsx
+import { useCallback, useMemo, useState as useState2 } from "react";
+import { Alert as Alert2 } from "@12-apps/ui/data-display/Alert";
+import { Input } from "@12-apps/ui/form/Input";
+import { ToggleGroup as ToggleGroup2 } from "@12-apps/ui/form/ToggleGroup";
+import { Box as Box4 } from "@12-apps/ui/mui/Box";
+import { Heading } from "@12-apps/ui/typography/Heading";
+import { Text as Text4 } from "@12-apps/ui/typography/Text";
+
+// src/email/previews/react/loadable.tsx
+import { useEffect, useState } from "react";
+import { Alert } from "@12-apps/ui/data-display/Alert";
+import { Button } from "@12-apps/ui/form/Button";
+import { Box as Box2 } from "@12-apps/ui/mui/Box";
+import { Text as Text2 } from "@12-apps/ui/typography/Text";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function useLoadable(load, options = {}) {
+  const [state, setState] = useState({ data: null, error: null });
+  const [nonce, setNonce] = useState(0);
+  const { keepPrevious = false } = options;
+  useEffect(() => {
+    let live = true;
+    setState((previous) => keepPrevious ? { ...previous, error: null } : { data: null, error: null });
+    load().then((data) => live && setState({ data, error: null })).catch(
+      (error) => live && setState({ data: null, error: error instanceof Error ? error.message : String(error) })
+    );
+    return () => {
+      live = false;
+    };
+  }, [load, nonce]);
+  return { ...state, reload: /* @__PURE__ */ __name(() => setNonce((n) => n + 1), "reload") };
+}
+__name(useLoadable, "useLoadable");
+function Failure({
+  message,
+  copy,
+  onRetry
+}) {
+  return /* @__PURE__ */ jsxs2(Box2, { "data-testid": "email-preview-error", sx: { display: "flex", flexDirection: "column", gap: 1, alignItems: "flex-start" }, children: [
+    /* @__PURE__ */ jsxs2(Alert, { severity: "error", children: [
+      /* @__PURE__ */ jsx2(Text2, { as: "p", size: "sm", children: copy.loadError }),
+      /* @__PURE__ */ jsx2(Text2, { as: "p", size: "sm", children: message })
+    ] }),
+    /* @__PURE__ */ jsx2(Button, { size: "sm", variant: "outline", onClick: onRetry, children: copy.retry })
+  ] });
+}
+__name(Failure, "Failure");
+
+// src/email/previews/react/message-list.tsx
+import { Chip } from "@12-apps/ui/data-display/Chip";
+import { Box as Box3 } from "@12-apps/ui/mui/Box";
+import { Text as Text3 } from "@12-apps/ui/typography/Text";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function groupByOwner(rows) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const bucket = groups.get(row.owner);
+    if (bucket) bucket.push(row);
+    else groups.set(row.owner, [row]);
+  }
+  return [...groups].map(([owner, ownerRows]) => ({ owner, rows: ownerRows }));
+}
+__name(groupByOwner, "groupByOwner");
+function matchesFilter(row, filter) {
+  const needle = filter.trim().toLowerCase();
+  if (needle === "") return true;
+  return [row.subject, row.key, row.owner, row.family].some(
+    (field) => field.toLowerCase().includes(needle)
+  );
+}
+__name(matchesFilter, "matchesFilter");
+function MessageRow({
+  row,
+  selected,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      component: "button",
+      type: "button",
+      "data-testid": `email-preview-row-${row.id}`,
+      "aria-current": selected,
+      onClick: () => onSelect(row.id),
+      sx: {
+        appearance: "none",
+        textAlign: "left",
+        width: "100%",
+        cursor: "pointer",
+        border: "1px solid",
+        borderColor: selected ? "primary.main" : "divider",
+        background: selected ? "action.selected" : "background.paper",
+        borderRadius: 1.5,
+        p: 1.25,
+        display: "flex",
+        flexDirection: "column",
+        gap: 0.5
+      },
+      children: [
+        /* @__PURE__ */ jsx3(Text3, { as: "span", size: "sm", weight: "medium", children: row.subject }),
+        /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+          /* @__PURE__ */ jsx3(Chip, { label: row.family, size: "sm", variant: "outlined", color: "neutral" }),
+          /* @__PURE__ */ jsx3(Text3, { as: "span", size: "xs", color: "secondary", children: row.key })
+        ] })
+      ]
+    }
+  );
+}
+__name(MessageRow, "MessageRow");
+function MessageList({
+  rows,
+  selectedId,
+  copy,
+  onSelect
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx3(Text3, { as: "p", size: "sm", color: "secondary", "data-testid": "email-preview-no-matches", children: copy.noMatches });
+  }
+  return /* @__PURE__ */ jsx3(Box3, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: groupByOwner(rows).map((group) => /* @__PURE__ */ jsxs3(
+    Box3,
+    {
+      "data-testid": `email-preview-owner-${group.owner}`,
+      sx: { display: "flex", flexDirection: "column", gap: 0.75 },
+      children: [
+        /* @__PURE__ */ jsx3(Text3, { as: "p", size: "xs", weight: "medium", color: "secondary", children: group.owner }),
+        group.rows.map((row) => /* @__PURE__ */ jsx3(
+          MessageRow,
+          {
+            row,
+            selected: row.id === selectedId,
+            onSelect
+          },
+          row.id
+        ))
+      ]
+    },
+    group.owner
+  )) });
+}
+__name(MessageList, "MessageList");
+
+// src/email/previews/react/transport.ts
+async function get(url) {
+  const response = await fetch(url, { headers: { Accept: "application/json" } });
+  let body = {};
+  try {
+    body = await response.json();
+  } catch {
+  }
+  if (!response.ok || body.data === void 0) {
+    throw new Error(body.error ?? `The request failed (${response.status}).`);
+  }
+  return body.data;
+}
+__name(get, "get");
+var withLocale = /* @__PURE__ */ __name((base, locale) => `${base}?locale=${encodeURIComponent(locale)}`, "withLocale");
+function fetchEmailPreviewIndex(apiBase, locale) {
+  return get(withLocale(apiBase, locale));
+}
+__name(fetchEmailPreviewIndex, "fetchEmailPreviewIndex");
+function fetchEmailPreview(apiBase, id, locale) {
+  return get(
+    withLocale(`${apiBase}/${encodeURIComponent(id)}`, locale)
+  );
+}
+__name(fetchEmailPreview, "fetchEmailPreview");
+
+// src/email/previews/react/preview-screen.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function searchParam(name) {
+  if (typeof window === "undefined") return null;
+  return new URLSearchParams(window.location.search).get(name);
+}
+__name(searchParam, "searchParam");
+function patchSearch(patch) {
+  if (typeof window === "undefined") return;
+  const next = new URLSearchParams(window.location.search);
+  for (const [key, value] of Object.entries(patch)) next.set(key, value);
+  const { pathname, hash } = window.location;
+  window.history.replaceState({}, "", `${pathname}?${next.toString()}${hash}`);
+}
+__name(patchSearch, "patchSearch");
+function CoverageNotice({
+  coverage,
+  copy
+}) {
+  if (coverage.missing.length === 0 && coverage.orphan.length === 0) return null;
+  return /* @__PURE__ */ jsxs4(Alert2, { severity: "warning", "data-testid": "email-preview-coverage", children: [
+    /* @__PURE__ */ jsx4(Text4, { as: "p", size: "sm", weight: "medium", children: copy.coverageTitle }),
+    coverage.missing.length > 0 ? /* @__PURE__ */ jsx4(Text4, { as: "p", size: "sm", children: copy.missingSamples(coverage.missing.join(", ")) }) : null,
+    coverage.orphan.length > 0 ? /* @__PURE__ */ jsx4(Text4, { as: "p", size: "sm", children: copy.orphanSamples(coverage.orphan.join(", ")) }) : null
+  ] });
+}
+__name(CoverageNotice, "CoverageNotice");
+function PreviewPane({
+  apiBase,
+  id,
+  locale,
+  copy,
+  tab,
+  width,
+  onTabChange,
+  onWidthChange
+}) {
+  const load = useCallback(
+    () => id === null ? Promise.resolve(null) : fetchEmailPreview(apiBase, id, locale),
+    [apiBase, id, locale]
+  );
+  const detail = useLoadable(load);
+  if (id === null) {
+    return /* @__PURE__ */ jsx4(Text4, { as: "p", size: "sm", color: "secondary", "data-testid": "email-preview-empty", children: copy.pickOne });
+  }
+  if (detail.error !== null) {
+    return /* @__PURE__ */ jsx4(Failure, { message: detail.error, copy, onRetry: detail.reload });
+  }
+  if (detail.data === null) {
+    return /* @__PURE__ */ jsx4(Text4, { as: "p", size: "sm", color: "secondary", "data-testid": "email-preview-detail-loading", children: copy.loading });
+  }
+  return /* @__PURE__ */ jsx4(
+    MessageView,
+    {
+      detail: detail.data,
+      copy,
+      tab,
+      width,
+      onTabChange,
+      onWidthChange
+    }
+  );
+}
+__name(PreviewPane, "PreviewPane");
+function CatalogueColumn({
+  index,
+  copy,
+  selectedId,
+  onSelect
+}) {
+  const [filter, setFilter] = useState2("");
+  const visible = useMemo(
+    () => index.items.filter((row) => matchesFilter(row, filter)),
+    [index.items, filter]
+  );
+  return (
+    /*
+          The list owns its OWN scroll rather than growing the page.
+    
+          A host's console is typically a fixed-viewport shell whose centre column
+          scrolls, and a twenty-mail catalogue then scrolls the preview frame off
+          the screen — the two things this screen exists to show side by side
+          cannot both be on it. `sticky` keeps the list put while the frame is
+          read; the height is the viewport minus the chrome above it, so the column
+          ends where the window does rather than at an arbitrary pixel count.
+        */
+    /* @__PURE__ */ jsxs4(
+      Box4,
+      {
+        sx: {
+          width: 320,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+          gap: 1.5,
+          position: "sticky",
+          top: 0,
+          maxHeight: "calc(100dvh - 220px)",
+          minHeight: 240
+        },
+        children: [
+          /* @__PURE__ */ jsx4(
+            Input,
+            {
+              label: copy.searchLabel,
+              placeholder: copy.searchPlaceholder,
+              value: filter,
+              "data-testid": "email-preview-filter",
+              onChange: (event) => setFilter(event.target.value),
+              fullWidth: true
+            }
+          ),
+          /* @__PURE__ */ jsx4(Box4, { sx: { overflowY: "auto", flex: 1, pr: 0.5 }, children: /* @__PURE__ */ jsx4(MessageList, { rows: visible, selectedId, copy, onSelect }) })
+        ]
+      }
+    )
+  );
+}
+__name(CatalogueColumn, "CatalogueColumn");
+function Browser({
+  apiBase,
+  index,
+  copy,
+  locale,
+  selectedId,
+  onPatch
+}) {
+  const [tab, setTab] = useState2("html");
+  const [width, setWidth] = useState2("desktop");
+  return /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+    /* @__PURE__ */ jsx4(CoverageNotice, { coverage: index.coverage, copy }),
+    /* @__PURE__ */ jsx4(
+      ToggleGroup2,
+      {
+        dataTestId: "email-preview-locale",
+        exclusive: true,
+        value: locale,
+        size: "sm",
+        options: index.locales.map((tag) => ({ value: tag, label: tag })),
+        onChange: (_event, value) => {
+          if (value) onPatch({ locale: String(value) });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs4(Box4, { sx: { display: "flex", gap: 3, alignItems: "flex-start", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx4(
+        CatalogueColumn,
+        {
+          index,
+          copy,
+          selectedId,
+          onSelect: (id) => onPatch({ id })
+        }
+      ),
+      /* @__PURE__ */ jsx4(Box4, { sx: { flex: 1, minWidth: 360 }, children: /* @__PURE__ */ jsx4(
+        PreviewPane,
+        {
+          apiBase,
+          id: selectedId,
+          locale,
+          copy,
+          tab,
+          width,
+          onTabChange: setTab,
+          onWidthChange: setWidth
+        }
+      ) })
+    ] })
+  ] });
+}
+__name(Browser, "Browser");
+function createEmailPreviewScreen(config) {
+  const { apiBase, copy } = config;
+  function EmailPreviewsPage() {
+    const [, setUrlNonce] = useState2(0);
+    const locale = searchParam("locale") ?? "";
+    const selectedId = searchParam("id");
+    const load = useCallback(
+      () => fetchEmailPreviewIndex(apiBase, locale),
+      [apiBase, locale]
+    );
+    const index = useLoadable(load, { keepPrevious: true });
+    const patch = /* @__PURE__ */ __name((next) => {
+      patchSearch(next);
+      setUrlNonce((n) => n + 1);
+    }, "patch");
+    return /* @__PURE__ */ jsxs4(Box4, { "data-testid": "page-email-previews", sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+      /* @__PURE__ */ jsxs4(Box4, { children: [
+        /* @__PURE__ */ jsx4(Heading, { level: "h2", children: copy.title }),
+        /* @__PURE__ */ jsx4(Text4, { as: "p", size: "sm", color: "secondary", children: copy.description })
+      ] }),
+      index.error !== null ? /* @__PURE__ */ jsx4(Failure, { message: index.error, copy, onRetry: index.reload }) : null,
+      index.error === null && index.data === null ? /* @__PURE__ */ jsx4(Text4, { as: "p", size: "sm", color: "secondary", "data-testid": "email-preview-index-loading", children: copy.loading }) : null,
+      index.data !== null ? /* @__PURE__ */ jsx4(
+        Browser,
+        {
+          apiBase,
+          index: index.data,
+          copy,
+          locale: index.data.locale,
+          selectedId,
+          onPatch: patch
+        }
+      ) : null
+    ] });
+  }
+  __name(EmailPreviewsPage, "EmailPreviewsPage");
+  return { page: EmailPreviewsPage };
+}
+__name(createEmailPreviewScreen, "createEmailPreviewScreen");
+
+export {
+  createEmailPreviewScreen
+};
+//# sourceMappingURL=chunk-ZFIYBNZ7.js.map

package/dist/chunk-ZFIYBNZ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/email/previews/react/message-view.tsx","../src/email/previews/react/preview-screen.tsx","../src/email/previews/react/loadable.tsx","../src/email/previews/react/message-list.tsx","../src/email/previews/react/transport.ts"],"sourcesContent":["import type { JSX } from 'react';\n\nimport { ToggleGroup } from '@12-apps/ui/form/ToggleGroup';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { Text } from '@12-apps/ui/typography/Text';\n\nimport type { EmailPreviewDetail } from '../catalog';\n\nimport type { EmailPreviewScreenCopy } from './copy';\n\n/**\n * One rendered message, in the three ways it is worth looking at.\n *\n * - **HTML** — what most people will see, in a sandboxed frame at either of the\n *   two widths that matter. A phone is not a nice-to-have: more than half of\n *   transactional mail is opened on one, and the 600px card is exactly the\n *   thing that either survives that or does not.\n * - **Text** — the plain-text twin. Worth its own tab because it is what a spam\n *   filter scores, what a watch shows, and what a screen reader in plain-text\n *   mode reads — and because it is the half nobody ever looks at, which is how\n *   it drifts out of step with the HTML.\n * - **Source** — the markup itself, for the moment somebody is debugging why a\n *   client rendered it oddly.\n *\n * ## Why an iframe, and why sandboxed\n *\n * The mail is a whole document with its own `<body>` background, and rendering\n * that inside the console's DOM would both break the mail (the console's CSS\n * reaches it) and break the console (the mail's body styles reach the page). A\n * frame is the only honest preview.\n *\n * `sandbox=\"\"` — no scripts, no forms, no top-level navigation. These documents\n * come from the host's own renderer and carry no script, so this is less a\n * containment measure than a statement that the preview is INERT: a click on a\n * CTA inside a previewed mail must never navigate the operator anywhere, least\n * of all to a sample verification link.\n */\n\n/** The two widths the HTML view renders at. */\nexport type PreviewWidth = 'desktop' | 'mobile';\n\n/** Which of the three views is showing. */\nexport type PreviewTab = 'html' | 'text' | 'source';\n\n/** A phone. 390px is a common iPhone CSS width, and among the narrowest. */\nconst MOBILE_WIDTH = 390;\n\nfunction Monospace({ children, testId }: { children: string; testId: string }): JSX.Element {\n  return (\n    <Box\n      component=\"pre\"\n      data-testid={testId}\n      sx={{\n        m: 0,\n        p: 2,\n        borderRadius: 1.5,\n        border: '1px solid',\n        borderColor: 'divider',\n        background: 'background.default',\n        fontSize: 13,\n        lineHeight: 1.6,\n        whiteSpace: 'pre-wrap',\n        wordBreak: 'break-word',\n        maxHeight: 720,\n        overflow: 'auto',\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\nfunction HtmlFrame({\n  detail,\n  width,\n  title,\n}: {\n  detail: EmailPreviewDetail;\n  width: PreviewWidth;\n  title: string;\n}): JSX.Element {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'center',\n        borderRadius: 1.5,\n        border: '1px solid',\n        borderColor: 'divider',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        component=\"iframe\"\n        data-testid=\"email-preview-frame\"\n        title={title}\n        srcDoc={detail.html}\n        sandbox=\"\"\n        sx={{\n          border: 0,\n          width: width === 'mobile' ? MOBILE_WIDTH : '100%',\n          height: 760,\n          background: '#fff',\n        }}\n      />\n    </Box>\n  );\n}\n\ninterface MessageViewProps {\n  detail: EmailPreviewDetail;\n  copy: EmailPreviewScreenCopy;\n  tab: PreviewTab;\n  width: PreviewWidth;\n  onTabChange: (tab: PreviewTab) => void;\n  onWidthChange: (width: PreviewWidth) => void;\n}\n\nexport function MessageView(props: MessageViewProps): JSX.Element {\n  const { detail, copy, tab, width, onTabChange, onWidthChange } = props;\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }} data-testid=\"email-preview-view\">\n      <Box>\n        <Text as=\"p\" size=\"xs\" color=\"secondary\">\n          {copy.subjectLabel}\n        </Text>\n        <Text as=\"p\" size=\"md\" weight=\"medium\" data-testid=\"email-preview-subject\">\n          {detail.subject}\n        </Text>\n      </Box>\n      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center' }}>\n        <ToggleGroup\n          dataTestId=\"email-preview-tabs\"\n          exclusive\n          value={tab}\n          size=\"sm\"\n          options={[\n            { value: 'html', label: copy.tabHtml },\n            { value: 'text', label: copy.tabText },\n            { value: 'source', label: copy.tabSource },\n          ]}\n          onChange={(_event, value) => {\n            if (value) onTabChange(value as PreviewTab);\n          }}\n        />\n        {tab === 'html' ? (\n          <ToggleGroup\n            dataTestId=\"email-preview-width\"\n            exclusive\n            value={width}\n            size=\"sm\"\n            options={[\n              { value: 'desktop', label: copy.widthDesktop },\n              { value: 'mobile', label: copy.widthMobile },\n            ]}\n            onChange={(_event, value) => {\n              if (value) onWidthChange(value as PreviewWidth);\n            }}\n          />\n        ) : null}\n      </Box>\n      {tab === 'html' ? <HtmlFrame detail={detail} width={width} title={copy.frameTitle} /> : null}\n      {tab === 'text' ? <Monospace testId=\"email-preview-text\">{detail.text}</Monospace> : null}\n      {tab === 'source' ? <Monospace testId=\"email-preview-source\">{detail.html}</Monospace> : null}\n    </Box>\n  );\n}\n","import { useCallback, useMemo, useState, type JSX } from 'react';\n\nimport { Alert } from '@12-apps/ui/data-display/Alert';\nimport { Input } from '@12-apps/ui/form/Input';\nimport { ToggleGroup } from '@12-apps/ui/form/ToggleGroup';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { Heading } from '@12-apps/ui/typography/Heading';\nimport { Text } from '@12-apps/ui/typography/Text';\n\nimport type { EmailPreviewCoverage, EmailPreviewDetail, EmailPreviewIndex } from '../catalog';\n\nimport type { EmailPreviewScreenCopy } from './copy';\nimport { Failure, useLoadable } from './loadable';\nimport { MessageList, matchesFilter } from './message-list';\nimport { MessageView, type PreviewTab, type PreviewWidth } from './message-view';\nimport { fetchEmailPreview, fetchEmailPreviewIndex } from './transport';\n\n/**\n * The operator screen over the `./email/previews` catalogue.\n *\n * ## What a host supplies, and what it does not\n *\n * `apiBase` — where the routes are mounted — and `copy`, by name. Nothing else:\n * the owners, the languages, the messages and their subjects all arrive from\n * the surface, because they are facts about the host's own mail that no prop\n * could usefully restate.\n *\n * ## The selection lives in the URL, without a router\n *\n * `?id=` and `?locale=`, read and written through `history.replaceState`. A\n * link to one mail in one language is the actual workflow this screen serves —\n * \"look at what the reset mail says now\" — and local state would make every\n * such conversation a set of instructions instead of a link.\n *\n * Deliberately NOT a router integration: this package cannot know whether a\n * host runs react-router, TanStack Router or a framework's own, and a screen\n * that imported one would be unmountable in the other two. `replaceState` is\n * the one API all of them are built on, and `replace` rather than `push` so\n * browsing twenty mails is not twenty back-button steps.\n */\n\nexport interface EmailPreviewScreenConfig {\n  /** Where the routes are mounted, e.g. `/api/platform/email-previews`. */\n  readonly apiBase: string;\n  /** The screen's words. REQUIRED — see `./copy`. */\n  readonly copy: EmailPreviewScreenCopy;\n}\n\n/** Read one search param without assuming a router owns the URL. */\nfunction searchParam(name: string): string | null {\n  if (typeof window === 'undefined') return null;\n  return new URLSearchParams(window.location.search).get(name);\n}\n\n/**\n * Patch the query string in place, keeping everything else about the URL.\n *\n * The HASH is carried over deliberately, and it is not defensive coding: a host\n * that routes on `location.hash` — the consumer harness does, and so does any\n * SPA served from a static file — would otherwise be navigated off this screen\n * by its own locale switch, because rebuilding the URL from `pathname` alone\n * silently drops the fragment that says which page this is.\n *\n * `replaceState` rather than `pushState` for the reason the screen exists:\n * browsing twenty messages is one place to come back from, not twenty\n * back-button steps.\n */\nfunction patchSearch(patch: Record<string, string>): void {\n  if (typeof window === 'undefined') return;\n  const next = new URLSearchParams(window.location.search);\n  for (const [key, value] of Object.entries(patch)) next.set(key, value);\n  const { pathname, hash } = window.location;\n  window.history.replaceState({}, '', `${pathname}?${next.toString()}${hash}`);\n}\n\n/** The surface's honest report about what it cannot show. */\nfunction CoverageNotice({\n  coverage,\n  copy,\n}: {\n  coverage: EmailPreviewCoverage;\n  copy: EmailPreviewScreenCopy;\n}): JSX.Element | null {\n  if (coverage.missing.length === 0 && coverage.orphan.length === 0) return null;\n  return (\n    <Alert severity=\"warning\" data-testid=\"email-preview-coverage\">\n      <Text as=\"p\" size=\"sm\" weight=\"medium\">\n        {copy.coverageTitle}\n      </Text>\n      {coverage.missing.length > 0 ? (\n        <Text as=\"p\" size=\"sm\">\n          {copy.missingSamples(coverage.missing.join(', '))}\n        </Text>\n      ) : null}\n      {coverage.orphan.length > 0 ? (\n        <Text as=\"p\" size=\"sm\">\n          {copy.orphanSamples(coverage.orphan.join(', '))}\n        </Text>\n      ) : null}\n    </Alert>\n  );\n}\n\n/** The right-hand pane: the selected message, or an invitation to pick one. */\nfunction PreviewPane({\n  apiBase,\n  id,\n  locale,\n  copy,\n  tab,\n  width,\n  onTabChange,\n  onWidthChange,\n}: {\n  apiBase: string;\n  id: string | null;\n  locale: string;\n  copy: EmailPreviewScreenCopy;\n  tab: PreviewTab;\n  width: PreviewWidth;\n  onTabChange: (tab: PreviewTab) => void;\n  onWidthChange: (width: PreviewWidth) => void;\n}): JSX.Element {\n  const load = useCallback(\n    () =>\n      id === null\n        ? Promise.resolve(null as EmailPreviewDetail | null)\n        : fetchEmailPreview(apiBase, id, locale),\n    [apiBase, id, locale],\n  );\n  const detail = useLoadable(load);\n\n  if (id === null) {\n    return (\n      <Text as=\"p\" size=\"sm\" color=\"secondary\" data-testid=\"email-preview-empty\">\n        {copy.pickOne}\n      </Text>\n    );\n  }\n  if (detail.error !== null) {\n    return <Failure message={detail.error} copy={copy} onRetry={detail.reload} />;\n  }\n  if (detail.data === null) {\n    return (\n      <Text as=\"p\" size=\"sm\" color=\"secondary\" data-testid=\"email-preview-detail-loading\">\n        {copy.loading}\n      </Text>\n    );\n  }\n  return (\n    <MessageView\n      detail={detail.data}\n      copy={copy}\n      tab={tab}\n      width={width}\n      onTabChange={onTabChange}\n      onWidthChange={onWidthChange}\n    />\n  );\n}\n\n/** The left column: the filter, and the rows under their owners. */\nfunction CatalogueColumn({\n  index,\n  copy,\n  selectedId,\n  onSelect,\n}: {\n  index: EmailPreviewIndex;\n  copy: EmailPreviewScreenCopy;\n  selectedId: string | null;\n  onSelect: (id: string) => void;\n}): JSX.Element {\n  const [filter, setFilter] = useState('');\n  const visible = useMemo(\n    () => index.items.filter((row) => matchesFilter(row, filter)),\n    [index.items, filter],\n  );\n  return (\n    /*\n      The list owns its OWN scroll rather than growing the page.\n\n      A host's console is typically a fixed-viewport shell whose centre column\n      scrolls, and a twenty-mail catalogue then scrolls the preview frame off\n      the screen — the two things this screen exists to show side by side\n      cannot both be on it. `sticky` keeps the list put while the frame is\n      read; the height is the viewport minus the chrome above it, so the column\n      ends where the window does rather than at an arbitrary pixel count.\n    */\n    <Box\n      sx={{\n        width: 320,\n        flexShrink: 0,\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 1.5,\n        position: 'sticky',\n        top: 0,\n        maxHeight: 'calc(100dvh - 220px)',\n        minHeight: 240,\n      }}\n    >\n      <Input\n        label={copy.searchLabel}\n        placeholder={copy.searchPlaceholder}\n        value={filter}\n        data-testid=\"email-preview-filter\"\n        onChange={(event) => setFilter(event.target.value)}\n        fullWidth\n      />\n      {/* Only the ROWS scroll — the filter field stays reachable. */}\n      <Box sx={{ overflowY: 'auto', flex: 1, pr: 0.5 }}>\n        <MessageList rows={visible} selectedId={selectedId} copy={copy} onSelect={onSelect} />\n      </Box>\n    </Box>\n  );\n}\n\n/** The catalogue and the preview, once the index has loaded. */\nfunction Browser({\n  apiBase,\n  index,\n  copy,\n  locale,\n  selectedId,\n  onPatch,\n}: {\n  apiBase: string;\n  index: EmailPreviewIndex;\n  copy: EmailPreviewScreenCopy;\n  locale: string;\n  selectedId: string | null;\n  onPatch: (patch: Record<string, string>) => void;\n}): JSX.Element {\n  const [tab, setTab] = useState<PreviewTab>('html');\n  const [width, setWidth] = useState<PreviewWidth>('desktop');\n\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n      <CoverageNotice coverage={index.coverage} copy={copy} />\n      <ToggleGroup\n        dataTestId=\"email-preview-locale\"\n        exclusive\n        value={locale}\n        size=\"sm\"\n        options={index.locales.map((tag) => ({ value: tag, label: tag }))}\n        onChange={(_event, value) => {\n          if (value) onPatch({ locale: String(value) });\n        }}\n      />\n      <Box sx={{ display: 'flex', gap: 3, alignItems: 'flex-start', flexWrap: 'wrap' }}>\n        <CatalogueColumn\n          index={index}\n          copy={copy}\n          selectedId={selectedId}\n          onSelect={(id) => onPatch({ id })}\n        />\n        <Box sx={{ flex: 1, minWidth: 360 }}>\n          <PreviewPane\n            apiBase={apiBase}\n            id={selectedId}\n            locale={locale}\n            copy={copy}\n            tab={tab}\n            width={width}\n            onTabChange={setTab}\n            onWidthChange={setWidth}\n          />\n        </Box>\n      </Box>\n    </Box>\n  );\n}\n\n/**\n * Build the screen. One call, one config object — the shape every factory in\n * this estate has.\n */\nexport function createEmailPreviewScreen(config: EmailPreviewScreenConfig): {\n  page: () => JSX.Element;\n} {\n  const { apiBase, copy } = config;\n\n  function EmailPreviewsPage(): JSX.Element {\n    // The VALUE is deliberately discarded: nothing reads the counter, and the\n    // only thing it has to do is change, so React re-renders and the URL is\n    // re-read below. It used to be a dependency of the catalogue fetch, which\n    // is what made every row click refetch the list.\n    const [, setUrlNonce] = useState(0);\n    const locale = searchParam('locale') ?? '';\n    const selectedId = searchParam('id');\n    // The catalogue depends on the LANGUAGE and on nothing else. `urlNonce` is\n    // deliberately absent: it counts every URL patch, selection included, and\n    // including it here refetched the whole catalogue on each row click — for a\n    // list whose contents cannot have changed. What the click actually needs is\n    // a re-RENDER, so `selectedId` is re-read, and `setUrlNonce` already does\n    // that on its own.\n    const load = useCallback(\n      () => fetchEmailPreviewIndex(apiBase, locale),\n      [apiBase, locale],\n    );\n    const index = useLoadable(load, { keepPrevious: true });\n\n    const patch = (next: Record<string, string>): void => {\n      patchSearch(next);\n      // `replaceState` does not notify React, so the screen re-reads the URL\n      // through this counter rather than through a router's own subscription.\n      setUrlNonce((n) => n + 1);\n    };\n\n    return (\n      <Box data-testid=\"page-email-previews\" sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n        <Box>\n          <Heading level=\"h2\">{copy.title}</Heading>\n          <Text as=\"p\" size=\"sm\" color=\"secondary\">\n            {copy.description}\n          </Text>\n        </Box>\n        {index.error !== null ? (\n          <Failure message={index.error} copy={copy} onRetry={index.reload} />\n        ) : null}\n        {index.error === null && index.data === null ? (\n          <Text as=\"p\" size=\"sm\" color=\"secondary\" data-testid=\"email-preview-index-loading\">\n            {copy.loading}\n          </Text>\n        ) : null}\n        {index.data !== null ? (\n          <Browser\n            apiBase={apiBase}\n            index={index.data}\n            copy={copy}\n            locale={index.data.locale}\n            selectedId={selectedId}\n            onPatch={patch}\n          />\n        ) : null}\n      </Box>\n    );\n  }\n\n  return { page: EmailPreviewsPage };\n}\n","import type { JSX } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { Alert } from '@12-apps/ui/data-display/Alert';\nimport { Button } from '@12-apps/ui/form/Button';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { Text } from '@12-apps/ui/typography/Text';\n\nimport type { EmailPreviewScreenCopy } from './copy';\n\n/**\n * The screen's async plumbing: one hook, and the state it cannot render itself.\n *\n * Its own module because it is the half with no opinion about e-mail. What is\n * left in `preview-screen.tsx` is composition — which columns, which panes,\n * what the URL says — and this is the machinery underneath all of it.\n *\n * `keepPrevious` is the load-bearing option and its docblock says why: a\n * consumer that renders children only while `data` is non-null gets those\n * children UNMOUNTED by a blanking reload, which silently discards whatever\n * state they held.\n */\n\n/** A load that can fail, in the two states a screen has to render. */\ninterface Loadable<T> {\n  data: T | null;\n  error: string | null;\n}\n\nexport function useLoadable<T>(\n  load: () => Promise<T>,\n  options: { keepPrevious?: boolean } = {},\n): Loadable<T> & { reload: () => void } {\n  const [state, setState] = useState<Loadable<T>>({ data: null, error: null });\n  const [nonce, setNonce] = useState(0);\n  const { keepPrevious = false } = options;\n  useEffect(() => {\n    let live = true;\n    // `keepPrevious` holds the last good answer on screen while the next one is\n    // in flight, and it is not a nicety. The consumer of this hook renders its\n    // children only while `data` is non-null, so blanking here UNMOUNTS them —\n    // taking the filter text, the open tab and the chosen width with it. On a\n    // fast connection the refetch lands before anyone notices; on a slow one\n    // the operator watches what they just typed disappear.\n    setState((previous) => (keepPrevious ? { ...previous, error: null } : { data: null, error: null }));\n    load()\n      .then((data) => live && setState({ data, error: null }))\n      .catch(\n        (error: unknown) =>\n          live &&\n          setState({ data: null, error: error instanceof Error ? error.message : String(error) }),\n      );\n    return () => {\n      // A language switched twice in a second must not let the FIRST answer\n      // land last — the screen would show a document the operator did not ask\n      // for, with the toggle disagreeing.\n      live = false;\n    };\n  }, [load, nonce]);\n  return { ...state, reload: () => setNonce((n) => n + 1) };\n}\n\nexport function Failure({\n  message,\n  copy,\n  onRetry,\n}: {\n  message: string;\n  copy: EmailPreviewScreenCopy;\n  onRetry: () => void;\n}): JSX.Element {\n  return (\n    <Box data-testid=\"email-preview-error\" sx={{ display: 'flex', flexDirection: 'column', gap: 1, alignItems: 'flex-start' }}>\n      <Alert severity=\"error\">\n        <Text as=\"p\" size=\"sm\">{copy.loadError}</Text>\n        <Text as=\"p\" size=\"sm\">{message}</Text>\n      </Alert>\n      <Button size=\"sm\" variant=\"outline\" onClick={onRetry}>\n        {copy.retry}\n      </Button>\n    </Box>\n  );\n}\n","import type { JSX } from 'react';\n\nimport { Chip } from '@12-apps/ui/data-display/Chip';\nimport { Box } from '@12-apps/ui/mui/Box';\nimport { Text } from '@12-apps/ui/typography/Text';\n\nimport type { EmailPreviewRow } from '../catalog';\n\nimport type { EmailPreviewScreenCopy } from './copy';\n\n/**\n * The catalogue, grouped by the PACKAGE that owns each message.\n *\n * Grouping by owner rather than by family is the whole answer to \"which parts\n * of this system send mail\": the section headers ARE that list, derived from\n * the rows the surface sent rather than written down anywhere, so a package\n * that starts sending mail appears the day it does.\n *\n * The family stays visible as a chip on each row, because it is the other\n * question an operator asks — and one owner can span two families.\n */\n\ninterface OwnerGroup {\n  owner: string;\n  rows: EmailPreviewRow[];\n}\n\n/** Group in FIRST-SEEN order, so the list does not reshuffle between renders. */\nfunction groupByOwner(rows: readonly EmailPreviewRow[]): OwnerGroup[] {\n  const groups = new Map<string, EmailPreviewRow[]>();\n  for (const row of rows) {\n    const bucket = groups.get(row.owner);\n    if (bucket) bucket.push(row);\n    else groups.set(row.owner, [row]);\n  }\n  return [...groups].map(([owner, ownerRows]) => ({ owner, rows: ownerRows }));\n}\n\n/** Does this row match what was typed? Subject, key, owner and family all count. */\nexport function matchesFilter(row: EmailPreviewRow, filter: string): boolean {\n  const needle = filter.trim().toLowerCase();\n  if (needle === '') return true;\n  return [row.subject, row.key, row.owner, row.family].some((field) =>\n    field.toLowerCase().includes(needle),\n  );\n}\n\nfunction MessageRow({\n  row,\n  selected,\n  onSelect,\n}: {\n  row: EmailPreviewRow;\n  selected: boolean;\n  onSelect: (id: string) => void;\n}): JSX.Element {\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      data-testid={`email-preview-row-${row.id}`}\n      aria-current={selected}\n      onClick={() => onSelect(row.id)}\n      sx={{\n        appearance: 'none',\n        textAlign: 'left',\n        width: '100%',\n        cursor: 'pointer',\n        border: '1px solid',\n        borderColor: selected ? 'primary.main' : 'divider',\n        background: selected ? 'action.selected' : 'background.paper',\n        borderRadius: 1.5,\n        p: 1.25,\n        display: 'flex',\n        flexDirection: 'column',\n        gap: 0.5,\n      }}\n    >\n      <Text as=\"span\" size=\"sm\" weight=\"medium\">\n        {row.subject}\n      </Text>\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>\n        <Chip label={row.family} size=\"sm\" variant=\"outlined\" color=\"neutral\" />\n        <Text as=\"span\" size=\"xs\" color=\"secondary\">\n          {row.key}\n        </Text>\n      </Box>\n    </Box>\n  );\n}\n\nexport function MessageList({\n  rows,\n  selectedId,\n  copy,\n  onSelect,\n}: {\n  rows: readonly EmailPreviewRow[];\n  selectedId: string | null;\n  copy: EmailPreviewScreenCopy;\n  onSelect: (id: string) => void;\n}): JSX.Element {\n  if (rows.length === 0) {\n    return (\n      <Text as=\"p\" size=\"sm\" color=\"secondary\" data-testid=\"email-preview-no-matches\">\n        {copy.noMatches}\n      </Text>\n    );\n  }\n  return (\n    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n      {groupByOwner(rows).map((group) => (\n        <Box\n          key={group.owner}\n          data-testid={`email-preview-owner-${group.owner}`}\n          sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}\n        >\n          <Text as=\"p\" size=\"xs\" weight=\"medium\" color=\"secondary\">\n            {group.owner}\n          </Text>\n          {group.rows.map((row) => (\n            <MessageRow\n              key={row.id}\n              row={row}\n              selected={row.id === selectedId}\n              onSelect={onSelect}\n            />\n          ))}\n        </Box>\n      ))}\n    </Box>\n  );\n}\n","import type { EmailPreviewDetail, EmailPreviewIndex } from '../catalog';\n\n/**\n * How the screen reaches its own endpoints.\n *\n * Plain `fetch` rather than a data library: this package cannot know whether a\n * host runs react-query, SWR or nothing at all, and a screen that dragged one\n * in would put a second cache beside whichever the host already has. The two\n * calls here are a list and a document — neither needs invalidation, retries or\n * shared state, which is most of what a data library is for.\n *\n * Both unwrap the `{ data }` envelope the routes write, and both surface a\n * non-2xx as a thrown `Error` carrying whatever the surface said, so the screen\n * can show the operator the real refusal (an unknown locale, a 403 from the\n * host's own gate) rather than a generic failure.\n */\n\n/** The envelope every route in this package answers with. */\ninterface Envelope<T> {\n  data?: T;\n  error?: string;\n}\n\nasync function get<T>(url: string): Promise<T> {\n  const response = await fetch(url, { headers: { Accept: 'application/json' } });\n  let body: Envelope<T> = {};\n  try {\n    body = (await response.json()) as Envelope<T>;\n  } catch {\n    // A gate that refuses before the router runs may answer HTML, not JSON.\n    // Falling through to the status line below is more useful than a parse\n    // error naming a character offset.\n  }\n  if (!response.ok || body.data === undefined) {\n    throw new Error(body.error ?? `The request failed (${response.status}).`);\n  }\n  return body.data;\n}\n\nconst withLocale = (base: string, locale: string): string =>\n  `${base}?locale=${encodeURIComponent(locale)}`;\n\n/** The catalogue, with every subject rendered in `locale`. */\nexport function fetchEmailPreviewIndex(\n  apiBase: string,\n  locale: string,\n): Promise<EmailPreviewIndex> {\n  return get<EmailPreviewIndex>(withLocale(apiBase, locale));\n}\n\n/** One rendered message. */\nexport function fetchEmailPreview(\n  apiBase: string,\n  id: string,\n  locale: string,\n): Promise<EmailPreviewDetail> {\n  return get<EmailPreviewDetail>(\n    withLocale(`${apiBase}/${encodeURIComponent(id)}`, locale),\n  );\n}\n"],"mappings":"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","names":["useState","Alert","ToggleGroup","Box","Text","Box","Text","jsx","jsxs","Box","Text","Box","Text","jsx","jsxs","Box","Text","jsx","jsxs","Alert","Text","useState","Box","ToggleGroup"]}

package/dist/{create-api-notifications-B3u6Kx3x.d.ts → create-api-notifications-B-VMezVB.d.ts}

@@ -1,7 +1,8 @@
-import { N as NotificationGeneratorRegistry } from './generators-B9xt3sRh.js';
-import { b as NotificationRow, C as ChannelMatrix, a as ChannelRow, L as ListNotificationsResult, h as NotificationsCopySource, c as NotificationWireMessages } from './wire-6dzyfDE7.js';
-import { b as NotificationChannel, D as DeliveryStatus, f as NotificationLogger, i as NotificationTransport, c as NotificationContent, a as NotificationCategory, d as NotificationEvent, e as NotificationGenerator } from './types-CXLAG3UU.js';
-import { e as WebPushSubscriptionSource, D as DriverDeclarationBase, a as WebPushDriverDeclaration, c as WebPushSender } from './web-push-Cs14Wp9u.js';
+import { N as NotificationGeneratorRegistry } from './generators-BsuXe8Mp.js';
+import { b as NotificationRow, C as ChannelMatrix, a as ChannelRow, L as ListNotificationsResult, h as NotificationsCopySource, c as NotificationWireMessages } from './wire-_coV3tJk.js';
+import { c as NotificationChannel, D as DeliveryStatus, g as NotificationLogger, j as NotificationTransport, d as NotificationContent, b as NotificationCategory, e as NotificationEvent, N as NotificationGenerator } from './types-BFmAY0P5.js';
+import { e as WebPushSubscriptionSource, D as DriverDeclarationBase, a as WebPushDriverDeclaration, c as WebPushSender } from './web-push-D-ysQd5h.js';
+import { d as EmailChromeCopy, f as EmailTheme } from './template-Dlt5S54z.js';
 
 /**
  * The database seam (12-15) — the exact, narrow slice of a Prisma-shaped
@@ -306,11 +307,19 @@ type NotificationsDbProvider = () => Promise<NotificationsDb>;
  * Returning `null` for a user id means "no such recipient", which `notify`
  * treats as a caller bug and throws on — a notification addressed to nobody is
  * never silently dropped.
+ *
+ * `locale` is the recipient's own language, and it is here rather than on the
+ * event because it is a fact about the PERSON, not about what happened
+ * The host owns it for the same reason it owns the address: this
+ * package has no user table to read it from. Absent — the field omitted, or
+ * `null` for a host that stores no language yet — means "nobody said", and
+ * every generator answers with its default exactly as before.
  */
 interface NotificationContactDirectory {
     getContact(userId: string): Promise<{
         email: string | null;
         phone: string | null;
+        locale?: string | null;
     } | null>;
 }
 
@@ -399,6 +408,31 @@ interface EmailDriverDeclaration extends DriverDeclarationBase {
      * `from` address.
      */
     linkLabel: string;
+    /**
+     * Render through `../../email` — the ONE layout — instead of the three bare
+     * `<p>` tags below.
+     *
+     * OPTIONAL, and its absence is the pre-layout behaviour verbatim. That is
+     * deliberate rather than timid: `brand` and `chrome` are REQUIRED with no
+     * default anywhere in the layout (a package that defaulted them would sign
+     * another company's mail, in a language nobody chose), so a required field
+     * here would break every host that already declares EMAIL — at runtime, on
+     * the first send, which is the worst place to find out.
+     *
+     * So the seam is opt-in and the ad-hoc path is what remains for a host that
+     * has not taken it. `layout.theme` may still be omitted; `../../email/theme`
+     * argues why that one asymmetry is allowed.
+     */
+    layout?: {
+        /** The product name in the header and the footer. */
+        brand: string;
+        /** The layout's own words. `@12-apps/notifications/email/locales` ships packs. */
+        chrome: EmailChromeCopy;
+        /** The recipient's language, for the document's `lang` attribute. */
+        locale: string;
+        /** Defaults to the layout's neutral palette. */
+        theme?: EmailTheme;
+    };
     logger?: NotificationLogger;
 }
 /** The built-in email vendors. A host adds one by extending this table. */
@@ -406,6 +440,11 @@ declare const EMAIL_DRIVERS: Record<string, (declaration: EmailDriverDeclaration
 /**
  * Agnostic content → subject/text/html. The link becomes a trailing CTA, only
  * when an app base URL is configured.
+ *
+ * Two renderings, and which one runs is the host's choice: with `layout`
+ * declared this is the shared document (`../../email`), and without it the
+ * three bare `<p>` tags that predate it. See `EmailDriverDeclaration.layout`
+ * for why the new path could not simply replace the old one.
  */
 declare function formatEmail(content: NotificationContent, declaration: EmailDriverDeclaration): EmailMessage;
 declare function emailTransport(declaration: EmailDriverDeclaration, extraDrivers?: Record<string, (d: EmailDriverDeclaration) => EmailDriver>): NotificationTransport<EmailMessage>;