makersclaw 0.2.0 → 0.3.1

package/registry/blocks/email-render/README.md

@@ -0,0 +1,151 @@
+# EmailRender
+
+Email HTML from React, in the workspace theme. A layout with the 600px
+column every client draws well and the preview line inboxes show after
+the subject; a brand line for the top; a footer with the sender's address
+and the unsubscribe link; buttons, headings and text; and `DocEmail`,
+which draws a `doc-editor` document as email markup. `renderEmail` turns
+the tree into `{ html, text }`: the HTML for the send and the plain-text
+part beside it.
+
+It is [react-email](https://react.email) (MIT) underneath:
+`@react-email/components` for the parts and `@react-email/render` for the
+HTML. The blocks built on this one (`newsletter-builder` first) import it,
+never `@react-email/*` directly.
+
+```jsx
+import { EmailLayout, EmailCard, DocEmail, renderEmail, resolveEmailTheme } from "../components/blocks/email-render";   // a Makersclaw app ("./blocks/email-render" from components/)
+import { EmailLayout, EmailCard, DocEmail, renderEmail, resolveEmailTheme } from "@/components/makersclaw/blocks/email-render";   // a shadcn project
+```
+
+Everything here is server-safe (no hooks, no context), except
+`resolveEmailTheme`, which reads the page. `makersclaw add email-render`
+adds `@react-email/components` and `@react-email/render` (pinned, exact)
+to package.json: run `npm install` after.
+
+## Email cannot read the theme
+
+**An email never sees the app's stylesheet, and most clients ignore CSS
+variables. So an email carries concrete colours, copied from the theme
+when it is rendered.**
+
+- In the browser, `resolveEmailTheme(root)` reads every token where
+  `root` sits (its light or dark scheme, any `[data-theme]` scope) and
+  returns plain hex values, the theme's typefaces with web-safe
+  fallbacks, and its corner radius. A colour with transparency is laid
+  over the background first: email has none to rely on.
+- On the server there is no page to read. Pass the theme the browser
+  resolved (it is plain JSON; send it along with the email), or use
+  `EMAIL_FALLBACK`, a neutral light theme of greys.
+- The source of truth stays the theme. Re-render to pick up a change.
+
+The theme object:
+
+```js
+{
+  colors: { background: "…", foreground: "…", card: "…", "card-foreground": "…",
+            primary: "…", "primary-foreground": "…", muted: "…", "muted-foreground": "…",
+            border: "…", accent: "…", … },   // every name in EMAIL_TOKENS, as hex
+  font: "\"Schibsted Grotesk\", -apple-system, … sans-serif",
+  fontDisplay: "…", fontMono: "…",
+  radius: "8px",
+  scheme: "light" | "dark",   // from the background; sets the color-scheme meta
+}
+```
+
+## Props
+
+Every part takes `theme` (above). Leave it out and the part uses
+`EMAIL_FALLBACK`.
+
+- `EmailLayout` — the whole email. `preview` (the preheader: the line an
+  inbox shows after the subject, up to ~110 characters), `title`, `lang`
+  (`"en"`), `children`.
+- `EmailCard` — a raised panel in the column: card colour, hairline,
+  the theme's corner. `padding` (px, `32`).
+- `EmailHeader` — the brand line. `name`, `logoUrl`, `logoAlt`,
+  `logoHeight` (`28`), `href`, `tagline`, `band` (`"none"` ·
+  `"primary"` · `"muted"` · `"card"`: a filled strip, the words in the
+  matching foreground), `align` (`"left"` · `"center"`).
+- `EmailFooter` — the small print. `note` (why the reader gets this),
+  `address` (the sender's postal address; the law in most places wants
+  it), `unsubscribeUrl` (what your sender fills in, e.g.
+  `"{{unsubscribe_url}}"`), `unsubscribeLabel` (`"Unsubscribe"`), `links`
+  (`[{ label, href }]`), `align` (`"center"`).
+- `EmailButton` — a padded link that works in every client. `href`,
+  `tone` (`"primary"` · `"secondary"` · `"foreground"`), `align`.
+- `EmailHeading` (`level` 1–3, `align`), `EmailText` (`muted`, `size`
+  `"md"` · `"sm"`, `align`), `EmailDivider`.
+- `DocEmail` — a `doc-editor` document as email markup. `doc` (the
+  BlockNote JSON), `fields` (merge fields: `{ key: value }` or
+  `(key, props) => value`; a key with no value stays `{key}`). Headings,
+  paragraphs, nested lists, checklists, quotes, code, tables, images with
+  captions, dividers; bold, italic, underline, strike, inline code and
+  links. A mention reads `@Label`. Text colours are dropped.
+
+The functions:
+
+- `await renderEmail(element, { pretty? })` → `{ ok: true, html, text }`
+  or `{ ok: false, error }` (in words, never a throw). `html` is a whole
+  `<!DOCTYPE html>` document with inline styles; `text` is its plain-text
+  part (headings in their own case, tables as rows).
+- `resolveEmailTheme(root?)` — browser only; on the server it returns
+  `EMAIL_FALLBACK`.
+- `emailColor(theme, token)` — a token name to its hex.
+- `emailThemeKey(theme)` — a fingerprint: equal keys, nothing to
+  re-render.
+- `emailPlainText(html)`, `fieldText(props, fields)`, `emailFontStack`,
+  `luminance`, `toHex`, `EMAIL_TOKENS`, `EMAIL_WIDTH` (600).
+
+## Example
+
+A preview in the browser:
+
+```jsx
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { DocEmail, EmailButton, EmailCard, EmailFooter, EmailHeader, EmailLayout, renderEmail, resolveEmailTheme } from "./blocks/email-render";
+
+export function InvitePreview({ doc, team }) {
+  const box = useRef(null);
+  const [html, setHtml] = useState("");
+  useEffect(() => {
+    const theme = resolveEmailTheme(box.current);
+    renderEmail(
+      <EmailLayout theme={theme} preview={`${team.name} invited you to plan with them.`}>
+        <EmailHeader theme={theme} name={team.name} />
+        <EmailCard theme={theme}>
+          <DocEmail doc={doc} theme={theme} fields={{ first_name: "Ana" }} />
+          <EmailButton theme={theme} href={team.inviteUrl}>Accept the invite</EmailButton>
+        </EmailCard>
+        <EmailFooter theme={theme} address={team.address} />
+      </EmailLayout>,
+    ).then((r) => r.ok && setHtml(r.html));
+  }, [doc, team]);
+  return <div ref={box}><iframe title="Invite email" srcDoc={html} sandbox="" className="h-[600px] w-full rounded-md border border-border" /></div>;
+}
+```
+
+The same tree on the server, for the send (a server action):
+
+```js
+const { ok, html, text, error } = await renderEmail(<Newsletter theme={savedTheme} … />);
+if (ok) await sender.send({ to, subject, html, text });
+```
+
+## What it will not do
+
+- Send email. It makes the HTML; your sender (Resend, Postmark, SES, the
+  app's server) sends it.
+- Follow a later theme change inside an email already sent: the colours
+  are a copy made at render time.
+- Dark-mode variants inside one email. It is drawn in the scheme it was
+  resolved in, and says so in its `color-scheme` meta.
+- Tailwind classes in email. Styles are inline, which is what clients
+  keep.
+
+## Credits
+
+react-email (https://github.com/resend/react-email), MIT, © Resend —
+installed from npm as dependencies, not copied here. See
+THIRD-PARTY-NOTICES.md.

package/registry/blocks/email-render/block.json

@@ -0,0 +1,14 @@
+{
+  "name": "email-render",
+  "title": "EmailRender",
+  "description": "Email HTML from React (react-email) in the workspace theme: a layout with the 600px column and the inbox preview line, a header brand line, a footer with the address and unsubscribe link, buttons, headings and text, and DocEmail, which draws a doc-editor document as email markup (lists, quotes, code, tables, images, merge fields). Email cannot read CSS variables, so resolveEmailTheme reads the tokens where the editor sits and hands the email plain hex values; renderEmail returns { html, text }, in the browser for a preview and on the server for a send.",
+  "useWhen": "Code that must produce an email's HTML: a newsletter, a transactional email (receipt, invite, reset), a digest, a notification, a test send from an editor. newsletter-builder is built on it. Not for writing the email (doc-editor or email-composer), sending it (your sender or the app's server) or a web page (page-builder).",
+  "tags": ["email", "html email", "react-email", "newsletter", "transactional email", "render", "template", "inbox", "preheader", "unsubscribe", "merge field", "plain text"],
+  "exports": ["EmailLayout", "EmailCard", "EmailHeader", "EmailFooter", "EmailButton", "EmailHeading", "EmailText", "EmailDivider", "EMAIL_WIDTH", "DocEmail", "fieldText", "renderEmail", "emailPlainText", "EMAIL_TOKENS", "EMAIL_FALLBACK", "resolveEmailTheme", "emailColor", "emailFontStack", "emailThemeKey", "luminance", "toHex"],
+  "files": ["index.js", "email.jsx", "doc-email.jsx", "render.js", "theme.js"],
+  "requires": [],
+  "dependencies": {
+    "@react-email/components": "1.0.12",
+    "@react-email/render": "2.1.0"
+  }
+}

package/registry/blocks/email-render/demo.jsx

@@ -0,0 +1,153 @@
+"use client";
+
+// EmailRender — the gallery's and the smoke test's surface. Not installed
+// into apps. A short product update, drawn with the email parts and a
+// doc, rendered to real email HTML in the workspace theme (switch the
+// theme: the email follows), shown in a frame at desktop or phone width,
+// with its plain-text part and a copy button.
+import { useEffect, useRef, useState } from "react";
+import { Badge, Button, Card, Skeleton, TabPanel, Tabs, ToggleGroup, toast } from "../components/ui";
+import {
+  DocEmail,
+  EmailButton,
+  EmailCard,
+  EmailFooter,
+  EmailHeader,
+  EmailLayout,
+  renderEmail,
+  resolveEmailTheme,
+  emailThemeKey,
+} from "../components/blocks/email-render";
+
+const UPDATE_DOC = [
+  { type: "heading", props: { level: 1 }, content: "Shared calendars are here" },
+  {
+    type: "paragraph",
+    content: [
+      { type: "text", text: "Hi ", styles: {} },
+      { type: "field", props: { key: "first_name", label: "First name" } },
+      { type: "text", text: ", your team can now see one week, together. ", styles: {} },
+      { type: "text", text: "No more asking who is out on Friday.", styles: { bold: true } },
+    ],
+  },
+  { type: "bulletListItem", content: "Everyone's time off, in one view" },
+  { type: "bulletListItem", content: "Drag a task onto a day to plan it" },
+  { type: "bulletListItem", content: "Subscribe from Google or Apple Calendar" },
+  { type: "quote", content: "We cancelled our Monday planning call the week this shipped. — Dana, ops lead at Brightline" },
+];
+
+export default function EmailRenderDemo() {
+  const doc = UPDATE_DOC;
+  const box = useRef(null);
+  const [theme, setTheme] = useState(null);
+  const [out, setOut] = useState(null);
+  const [width, setWidth] = useState("desktop");
+  const [tab, setTab] = useState("email");
+
+  // Read the theme where the demo sits, again when it changes.
+  useEffect(() => {
+    const read = () => setTheme((prev) => {
+      const next = resolveEmailTheme(box.current);
+      return prev && emailThemeKey(prev) === emailThemeKey(next) ? prev : next;
+    });
+    read();
+    const watch = new MutationObserver(read);
+    watch.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme"] });
+    return () => watch.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!theme) return;
+    let live = true;
+    renderEmail(
+      <EmailLayout theme={theme} preview="Your whole team's week, in one place — and three other things we shipped." title="Shared calendars are here">
+        <EmailHeader theme={theme} name="Tidewater" href="https://tidewater.example" />
+        <EmailCard theme={theme}>
+          <DocEmail doc={doc} theme={theme} fields={{ first_name: "Ana" }} />
+          <EmailButton theme={theme} href="https://tidewater.example/calendar">Open your calendar</EmailButton>
+        </EmailCard>
+        <EmailFooter
+          theme={theme}
+          note="You get this because you have a Tidewater account."
+          address="Tidewater Labs, 14 Harbour Row, Bristol BS1 5TY"
+          unsubscribeUrl="https://tidewater.example/unsubscribe"
+        />
+      </EmailLayout>,
+    ).then((r) => live && setOut(r));
+    return () => {
+      live = false;
+    };
+  }, [theme, doc]);
+
+  return (
+    <div ref={box} className="grid gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <Tabs
+          aria-label="What to show"
+          tabs={[
+            { key: "email", label: "Email" },
+            { key: "text", label: "Plain text" },
+          ]}
+          value={tab}
+          onChange={setTab}
+        />
+        <div className="flex flex-wrap items-center gap-2">
+          {out?.ok ? <Badge variant="soft">{`${Math.round(out.html.length / 102.4) / 10} KB of HTML`}</Badge> : null}
+          <ToggleGroup
+            size="sm"
+            type="single"
+            value={width}
+            onChange={setWidth}
+            items={[
+              { value: "desktop", label: "Desktop", icon: "monitor", iconOnly: true },
+              { value: "mobile", label: "Phone", icon: "smartphone", iconOnly: true },
+            ]}
+          />
+          <Button
+            size="sm"
+            variant="secondary"
+            icon="copy"
+            disabled={!out?.ok}
+            onClick={async () => {
+              try {
+                await navigator.clipboard.writeText(out.html);
+                toast.success("Email HTML copied");
+              } catch {
+                toast.error("Could not copy", { description: "Your browser blocked the clipboard." });
+              }
+            }}
+          >
+            Copy HTML
+          </Button>
+        </div>
+      </div>
+      <TabPanel tab="email" value={tab}>
+        <Card padding="none">
+          <div className="flex justify-center bg-muted p-4">
+            {out?.ok ? (
+              <iframe
+                title="Email preview"
+                srcDoc={out.html}
+                sandbox=""
+                className="h-[640px] rounded-md border border-border bg-background transition-[width] duration-150 motion-reduce:transition-none"
+                style={{ width: width === "mobile" ? 375 : "100%", maxWidth: "100%" }}
+              />
+            ) : out ? (
+              <p className="p-6 text-sm text-destructive">{out.error}</p>
+            ) : (
+              <div className="grid w-full max-w-xl gap-3 py-8" aria-busy="true">
+                <Skeleton className="h-5 w-32" />
+                <Skeleton shape="block" className="h-64 w-full" />
+              </div>
+            )}
+          </div>
+        </Card>
+      </TabPanel>
+      <TabPanel tab="text" value={tab}>
+        <Card>
+          <pre className="max-h-[520px] overflow-auto whitespace-pre-wrap font-mono text-sm text-muted-foreground">{out?.ok ? out.text : "Rendering…"}</pre>
+        </Card>
+      </TabPanel>
+    </div>
+  );
+}

package/registry/blocks/email-render/doc-email.jsx

@@ -0,0 +1,210 @@
+// DocEmail — a doc-editor document (BlockNote JSON) drawn as email markup.
+//
+// The doc is plain JSON, so this walks it directly; it does not import the
+// editor (a server send never loads BlockNote). What email can show, it
+// shows: headings, paragraphs, lists (nested), checklists, quotes, code,
+// tables, images, dividers; bold, italic, underline, strike, inline code,
+// links. A mention is @Label; a merge field is its value, or what
+// `fields` makes of its key (a tag your sender fills in, "{{first_name}}").
+// Text and highlight colours are dropped: an email wears the theme.
+import { Img, Link, Section, Text } from "@react-email/components";
+import { EMAIL_FALLBACK, emailColor } from "./theme";
+
+const blocksOf = (doc) => (Array.isArray(doc) ? doc : []);
+const inlineOf = (content) => (typeof content === "string" ? [{ type: "text", text: content, styles: {} }] : Array.isArray(content) ? content : []);
+
+/** A merge field's words: `fields` is { key: value } or (key, props) → value.
+ *  Nothing given leaves "{key}", as docToText does. */
+export function fieldText(props, fields) {
+  const key = props?.key ?? "";
+  const v = typeof fields === "function" ? fields(key, props) : fields && typeof fields === "object" ? fields[key] : undefined;
+  return v === undefined || v === null || v === "" ? `{${key}}` : String(v);
+}
+
+function Inline({ content, t, fields, linkColor }) {
+  return inlineOf(content).map((c, i) => {
+    if (!c) return null;
+    if (c.type === "link") {
+      return (
+        <Link key={i} href={c.href ?? "#"} style={{ color: linkColor, textDecoration: "underline" }}>
+          <Inline content={c.content} t={t} fields={fields} linkColor={linkColor} />
+        </Link>
+      );
+    }
+    if (c.type === "mention") return <span key={i}>{`@${c.props?.label ?? c.props?.id ?? ""}`}</span>;
+    if (c.type === "field") return <span key={i}>{fieldText(c.props, fields)}</span>;
+    if (c.type !== "text") return Array.isArray(c.content) ? <Inline key={i} content={c.content} t={t} fields={fields} linkColor={linkColor} /> : null;
+    const s = c.styles ?? {};
+    let node = c.text ?? "";
+    if (s.code) {
+      node = (
+        <code style={{ fontFamily: t.fontMono, fontSize: "0.9em", backgroundColor: emailColor(t, "muted"), borderRadius: "4px", padding: "1px 4px" }}>{node}</code>
+      );
+    }
+    if (s.bold) node = <strong>{node}</strong>;
+    if (s.italic) node = <em>{node}</em>;
+    if (s.underline) node = <u>{node}</u>;
+    if (s.strike) node = <s>{node}</s>;
+    return <span key={i}>{node}</span>;
+  });
+}
+
+const HEAD = {
+  1: { fontSize: "28px", lineHeight: "34px", margin: "8px 0 16px" },
+  2: { fontSize: "22px", lineHeight: "28px", margin: "28px 0 12px" },
+  3: { fontSize: "18px", lineHeight: "24px", margin: "24px 0 8px" },
+};
+
+const LIST = new Set(["bulletListItem", "numberedListItem", "checkListItem", "toggleListItem"]);
+
+/** Consecutive list items of one kind become one list. */
+function runs(blocks) {
+  const out = [];
+  for (const b of blocksOf(blocks)) {
+    if (!b || typeof b !== "object") continue;
+    const kind = LIST.has(b.type) ? (b.type === "numberedListItem" ? "ol" : b.type === "checkListItem" ? "check" : "ul") : null;
+    const last = out[out.length - 1];
+    if (kind && last?.kind === kind) last.items.push(b);
+    else out.push(kind ? { kind, items: [b] } : { kind: null, block: b });
+  }
+  return out;
+}
+
+function Blocks({ blocks, t, fields, depth = 0 }) {
+  const text = emailColor(t, "card-foreground");
+  const muted = emailColor(t, "muted-foreground");
+  const link = emailColor(t, "primary");
+  const para = { margin: "0 0 16px", fontSize: "16px", lineHeight: "26px", color: text };
+  return runs(blocks).map((run, i) => {
+    if (run.kind === "ul" || run.kind === "ol") {
+      const Tag = run.kind;
+      return (
+        <Tag key={i} style={{ margin: depth ? "4px 0 4px" : "0 0 16px", paddingLeft: "24px", color: text }}>
+          {run.items.map((b, j) => (
+            <li key={b.id ?? j} style={{ margin: "0 0 6px", fontSize: "16px", lineHeight: "26px" }}>
+              <Inline content={b.content} t={t} fields={fields} linkColor={link} />
+              {b.children?.length ? <Blocks blocks={b.children} t={t} fields={fields} depth={depth + 1} /> : null}
+            </li>
+          ))}
+        </Tag>
+      );
+    }
+    if (run.kind === "check") {
+      return (
+        <Section key={i} style={{ margin: "0 0 16px" }}>
+          {run.items.map((b, j) => (
+            <Text key={b.id ?? j} style={{ ...para, margin: "0 0 6px", paddingLeft: `${depth * 24}px` }}>
+              <span style={{ color: b.props?.checked ? link : muted }}>{b.props?.checked ? "☑\u00a0 " : "☐\u00a0 "}</span>
+              <span style={b.props?.checked ? { color: muted, textDecoration: "line-through" } : undefined}>
+                <Inline content={b.content} t={t} fields={fields} linkColor={link} />
+              </span>
+            </Text>
+          ))}
+        </Section>
+      );
+    }
+    const b = run.block;
+    const kids = b.children?.length ? <Blocks blocks={b.children} t={t} fields={fields} depth={depth + 1} /> : null;
+    switch (b.type) {
+      case "heading": {
+        const level = Math.min(3, Math.max(1, Number(b.props?.level) || 2));
+        const Tag = `h${level}`;
+        return (
+          <div key={i}>
+            <Tag style={{ ...HEAD[level], fontFamily: t.fontDisplay, fontWeight: 700, letterSpacing: "-0.015em", color: text }}>
+              <Inline content={b.content} t={t} fields={fields} linkColor={link} />
+            </Tag>
+            {kids}
+          </div>
+        );
+      }
+      case "quote":
+        return (
+          <Section key={i} style={{ margin: "0 0 16px", borderLeft: `3px solid ${link}`, padding: "2px 0 2px 16px" }}>
+            <Text style={{ ...para, margin: 0, fontSize: "17px", lineHeight: "28px", fontStyle: "italic" }}>
+              <Inline content={b.content} t={t} fields={fields} linkColor={link} />
+            </Text>
+            {kids}
+          </Section>
+        );
+      case "codeBlock":
+        return (
+          <pre
+            key={i}
+            style={{
+              margin: "0 0 16px",
+              padding: "14px 16px",
+              backgroundColor: emailColor(t, "muted"),
+              color: emailColor(t, "foreground"),
+              border: `1px solid ${emailColor(t, "border")}`,
+              borderRadius: t.radius,
+              fontFamily: t.fontMono,
+              fontSize: "13px",
+              lineHeight: "20px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+            }}
+          >
+            {inlineOf(b.content)
+              .map((c) => c?.text ?? "")
+              .join("")}
+          </pre>
+        );
+      case "divider":
+        return <hr key={i} style={{ border: 0, borderTop: `1px solid ${emailColor(t, "border")}`, margin: "28px 0" }} />;
+      case "image":
+        if (!b.props?.url) return null;
+        return (
+          <Section key={i} style={{ margin: "0 0 20px" }}>
+            <Img src={b.props.url} alt={b.props?.caption || b.props?.name || ""} width="100%" style={{ display: "block", width: "100%", maxWidth: "100%", height: "auto", borderRadius: t.radius, border: 0 }} />
+            {b.props?.caption ? <Text style={{ margin: "8px 0 0", fontSize: "13px", lineHeight: "18px", color: muted, textAlign: "center" }}>{b.props.caption}</Text> : null}
+          </Section>
+        );
+      case "table": {
+        const rows = b.content?.rows ?? [];
+        if (!rows.length) return null;
+        const cell = { padding: "8px 10px", borderBottom: `1px solid ${emailColor(t, "border")}`, fontSize: "14px", lineHeight: "20px", color: text, textAlign: "left", verticalAlign: "top" };
+        return (
+          <table key={i} role="presentation" cellPadding="0" cellSpacing="0" width="100%" style={{ margin: "0 0 20px", borderCollapse: "collapse", width: "100%" }}>
+            <tbody>
+              {rows.map((r, ri) => (
+                <tr key={ri}>
+                  {(r.cells ?? []).map((c, ci) => {
+                    const Cell = ri === 0 ? "th" : "td";
+                    return (
+                      <Cell key={ci} style={{ ...cell, fontWeight: ri === 0 ? 600 : 400 }}>
+                        <Inline content={c?.content ?? c} t={t} fields={fields} linkColor={link} />
+                      </Cell>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        );
+      }
+      default: {
+        const empty = !inlineOf(b.content).some((c) => c && (c.type !== "text" || (c.text ?? "") !== ""));
+        return (
+          <div key={i}>
+            <Text style={empty ? { ...para, margin: "0 0 8px", lineHeight: "8px" } : para}>{empty ? " " : <Inline content={b.content} t={t} fields={fields} linkColor={link} />}</Text>
+            {kids}
+          </div>
+        );
+      }
+    }
+  });
+}
+
+/**
+ * A doc as email markup, inside whatever frame you give it (EmailCard).
+ *   doc      the doc-editor document (BlockNote JSON)
+ *   theme    resolveEmailTheme(root) or EMAIL_FALLBACK
+ *   fields   merge fields: { key: value } or (key, props) → value; a key
+ *            with no value stays "{key}"
+ */
+export function DocEmail({ doc, theme, fields }) {
+  const t = theme ?? EMAIL_FALLBACK;
+  return <Blocks blocks={doc} t={t} fields={fields} />;
+}
+