@sdxc/mail 0.0.0-pre.1

package/dist/lib/html-to-text.js

@@ -0,0 +1,149 @@
+/**
+ * Derives the plain-text alternative of an email from its rendered HTML, so every
+ * message ships both parts without a second authoring step. The conversion is
+ * heuristic by design: it keeps link targets and block structure, and drops
+ * anything a reader cannot act on.
+ *
+ * @author [Sergio Xalambrí](https://sergiodxa.com)
+ * @copyright Sergio Xalambrí 2026
+ */
+/** HTML comments, which never carry reader-visible content. */
+const COMMENT = /<!--[\s\S]*?-->/g;
+/** A document type declaration, which describes the document format. */
+const DOCTYPE = /<!doctype[^>]*>/gi;
+/**
+ * Blocks hidden from sighted readers with `display:none`, such as a preheader.
+ * Non-greedy matching closes at the first same-tag closing tag, which is correct
+ * for the hidden single-element blocks email layouts use.
+ */
+const HIDDEN_BLOCK = /<(div|span|p)\b[^>]*display\s*:\s*none[^>]*>[\s\S]*?<\/\1>/gi;
+/**
+ * Blocks marked `data-skip-in-text`, the explicit signal an author gives that an
+ * element belongs to the HTML part alone, covering visible content such as a
+ * decorative rule, a spacer, or a logo's alt text.
+ */
+const SKIPPED_BLOCK = /<(\w+)\b[^>]*\bdata-skip-in-text\b[^>]*>[\s\S]*?<\/\1>/gi;
+/** The same marker on an element that closes itself, which has nothing to drop between tags. */
+const SKIPPED_VOID = /<\w+\b[^>]*\bdata-skip-in-text\b[^>]*\/?>/gi;
+/** Elements whose content belongs to the document structure. */
+const DROPPED_BLOCK = /<(head|script|style|title)\b[^>]*>[\s\S]*?<\/\1>/gi;
+/** Explicit line breaks, the one inline element that carries layout meaning. */
+const LINE_BREAK = /<br\s*\/?>/gi;
+/** A link with its target, captured as double-quoted, single-quoted, or bare. */
+const ANCHOR = /<a\b[^>]*href\s*=\s*("([^"]*)"|'([^']*)'|([^\s>]+))[^>]*>([\s\S]*?)<\/a>/gi;
+/** End of a list item, which separates entries with a single newline. */
+const LIST_ITEM_END = /<\/li\s*>/gi;
+/** Start of a list item, replaced by a bullet marker. */
+const LIST_ITEM_START = /<li\b[^>]*>/gi;
+/**
+ * An ordered list, whose items are numbered in the order they appear. Matching
+ * closes at the first same-tag closing tag, so a nested ordered list numbers
+ * as part of its parent's sequence.
+ */
+const ORDERED_LIST = /<ol\b[^>]*>[\s\S]*?<\/ol\s*>/gi;
+/**
+ * An image, replaced by what it says. Alt text is the whole of an image in a text part,
+ * and often in the HTML one too: every major client blocks remote images until asked.
+ */
+const IMAGE = /<img\b[^>]*\balt\s*=\s*("([^"]*)"|'([^']*)')[^>]*>/gi;
+/** Boundaries that read as a paragraph break. */
+const PARAGRAPH_BOUNDARY = /<\/?(p|div|h[1-6]|table|ul|ol|dl|blockquote|section|article|header|footer|hr|address|pre|figure)\b[^>]*>/gi;
+/** End of a table cell, which separates cells on the same line with a space. */
+const CELL_END = /<\/(td|th)\s*>/gi;
+/** End of a table row or definition entry, which ends the line so the next row starts immediately below it. */
+const ROW_END = /<\/(tr|dt|dd|caption)\s*>/gi;
+/** Any remaining tag, dropped once its structural meaning has been applied. */
+const TAG = /<[^>]+>/g;
+/** A character reference in named, decimal, or hexadecimal form. */
+const ENTITY = /&(#\d+|#x[0-9a-f]+|[a-z]+);/gi;
+/** Named references worth decoding: the ones a renderer emits or copy commonly uses. */
+const NAMED_ENTITIES = {
+    amp: "&",
+    apos: "'",
+    gt: ">",
+    hellip: "…",
+    lt: "<",
+    mdash: "—",
+    nbsp: " ",
+    ndash: "–",
+    quot: '"',
+};
+/** Runs of horizontal whitespace, including the no-break space entities decode to. */
+const HORIZONTAL_WHITESPACE = /[ \t\r\f\v\u00a0]+/g;
+/** Three or more newlines, collapsed so structure never turns into empty screens. */
+const EXTRA_NEWLINES = /\n{3,}/g;
+/** Removes markup from a fragment that has already had its structure applied. */
+function stripTags(html) {
+    return html.replace(TAG, "");
+}
+/** Resolves character references to the characters they stand for, leaving unknown ones intact. */
+function decodeEntities(text) {
+    return text.replace(ENTITY, (match, reference) => {
+        let name = reference.toLowerCase();
+        let code = name.startsWith("#x")
+            ? Number.parseInt(name.slice(2), 16)
+            : name.startsWith("#")
+                ? Number.parseInt(name.slice(1), 10)
+                : Number.NaN;
+        if (Number.isNaN(code))
+            return NAMED_ENTITIES[name] ?? match;
+        if (code < 1 || code > 0x10ffff)
+            return match;
+        return String.fromCodePoint(code);
+    });
+}
+/**
+ * Renders a link as text. The target is kept beside the label because a plain-text
+ * reader has no other way to reach it, and dropped when the label already is the
+ * target so the URL is not printed twice.
+ */
+function formatLink(href, label) {
+    let target = href.trim();
+    let text = label.trim();
+    if (!target)
+        return text;
+    if (!text)
+        return target;
+    if (text === target || text === target.replace(/^mailto:/i, ""))
+        return text;
+    return `${text} (${target})`;
+}
+/**
+ * Converts rendered email HTML into its plain-text alternative, preserving link
+ * targets as `label (href)`, image alt text, and block structure as blank lines
+ * so the text part carries the same content the HTML conveys visually.
+ *
+ * @param html - Rendered HTML of an email body.
+ * @returns The plain-text alternative, trimmed and with runs of blank lines collapsed.
+ * @example htmlToText('<p>Hi <a href="https://x.dev">here</a></p>'); // "Hi here (https://x.dev)"
+ */
+export function htmlToText(html) {
+    let text = html
+        .replace(COMMENT, "")
+        .replace(DOCTYPE, "")
+        .replace(HIDDEN_BLOCK, "")
+        .replace(SKIPPED_BLOCK, "")
+        .replace(SKIPPED_VOID, "")
+        .replace(DROPPED_BLOCK, "")
+        .replace(LINE_BREAK, "\n")
+        .replace(ANCHOR, (_match, _target, double, single, bare, label) => formatLink(double ?? single ?? bare ?? "", stripTags(label)))
+        .replace(IMAGE, (_match, _quoted, double, single) => {
+        return double ?? single ?? "";
+    })
+        .replace(ORDERED_LIST, (list) => {
+        let position = 0;
+        return list.replace(LIST_ITEM_START, () => `${(position += 1)}. `);
+    })
+        .replace(LIST_ITEM_END, "\n")
+        .replace(LIST_ITEM_START, "- ")
+        .replace(CELL_END, " ")
+        .replace(ROW_END, "\n")
+        .replace(PARAGRAPH_BOUNDARY, "\n\n");
+    return decodeEntities(stripTags(text))
+        .replace(HORIZONTAL_WHITESPACE, " ")
+        .split("\n")
+        .map((line) => line.trim())
+        .join("\n")
+        .replace(EXTRA_NEWLINES, "\n\n")
+        .trim();
+}

package/dist/mailer.d.ts

@@ -0,0 +1,82 @@
+/**
+ * The mailer: it owns normalization (defaults, address coercion, plain-text
+ * derivation, validation) and hands the result to a transport. Delivery is a
+ * value, so `send()` reports failure as a `Result` and never throws, and
+ * `later()` gives fire-and-forget mail a defined lifetime instead of an
+ * unawaited promise.
+ *
+ * @author [Sergio Xalambrí](https://sergiodxa.com)
+ * @copyright Sergio Xalambrí 2026
+ */
+import type { Result } from "@sdxc/result";
+import type { Address, Email, Message, SentMessage, Transport } from "./types.js";
+import { MailError } from "./errors.js";
+/**
+ * Fields that replace what a `Message` or an `Email` already provides for a single
+ * send, such as redirecting an email to a forwarded address.
+ */
+export type SendOptions = Partial<Message>;
+/** Configuration every message a mailer sends inherits. */
+export interface MailerOptions {
+    transport: Transport;
+    /** Sender identity for the app; a message may override it. */
+    from: Address;
+    /** Where replies go by default; a message or email may override it. */
+    replyTo?: Address | Address[];
+    /** Headers added to every message, with per-message headers winning. */
+    headers?: Record<string, string>;
+}
+/**
+ * Reports whether a value is an `Email` rather than a plain `Message`.
+ * Discrimination is structural: a callable `body` is the one member only an email
+ * has, so anything else is a message.
+ *
+ * @param value - The value handed to `send()` or `later()`.
+ * @returns `true` when the value carries a callable `body`.
+ */
+export declare function isEmail(value: Message | Email): value is Email;
+/**
+ * Sends mail through a transport, applying one app's sender identity to every
+ * message. The instance is request-scoped when `later()` is used, because the
+ * queue it fills belongs to whoever flushes it.
+ */
+export declare class Mailer {
+    #private;
+    /**
+     * Creates a mailer.
+     *
+     * @param options - Transport and sender configuration; see {@link MailerOptions}.
+     */
+    constructor(options: MailerOptions);
+    /** Number of messages waiting for the next `flush()`. */
+    get pending(): number;
+    /**
+     * Normalizes and delivers a message, awaiting the outcome. Never throws: a
+     * render failure, an invalid message, a rejected delivery, and a transport
+     * that throws all arrive as a `MailError` failure for the caller to inspect.
+     *
+     * @param input - A plain message, or an email object that renders its own body.
+     * @param overrides - Fields that replace what the input provides for this send.
+     * @returns The provider's identifier on success, a `MailError` on failure.
+     * @example let result = await mailer.send(new TeamInviteEmail(invite));
+     */
+    send(input: Message | Email, overrides?: SendOptions): Promise<Result<SentMessage, MailError>>;
+    /**
+     * Queues a message to be sent once the caller flushes, which is how a send whose
+     * failure must not affect the response gets a defined lifetime. Nothing is
+     * rendered or validated yet; that happens at flush time.
+     *
+     * @param input - A plain message, or an email object that renders its own body.
+     * @param overrides - Fields that replace what the input provides for this send.
+     * @example ctx.email.later(new PasswordResetEmail(user));
+     */
+    later(input: Message | Email, overrides?: SendOptions): void;
+    /**
+     * Sends everything `later()` queued and empties the queue. Results come back in
+     * queue order for the caller to log; like `send()`, it never throws, so a failed
+     * deferred message cannot break whoever is flushing.
+     *
+     * @returns One result per queued message, in the order they were queued.
+     */
+    flush(): Promise<Result<SentMessage, MailError>[]>;
+}

package/dist/mailer.js

@@ -0,0 +1,188 @@
+/**
+ * The mailer: it owns normalization (defaults, address coercion, plain-text
+ * derivation, validation) and hands the result to a transport. Delivery is a
+ * value, so `send()` reports failure as a `Result` and never throws, and
+ * `later()` gives fire-and-forget mail a defined lifetime instead of an
+ * unawaited promise.
+ *
+ * @author [Sergio Xalambrí](https://sergiodxa.com)
+ * @copyright Sergio Xalambrí 2026
+ */
+import { failure, isFailure, success, wrap } from "@sdxc/result";
+import { MailError } from "./errors.js";
+import { isValidAddress, toAddressList } from "./lib/address.js";
+import { htmlToText } from "./lib/html-to-text.js";
+import { render } from "./render.js";
+/**
+ * Reports whether a value is an `Email` rather than a plain `Message`.
+ * Discrimination is structural: a callable `body` is the one member only an email
+ * has, so anything else is a message.
+ *
+ * @param value - The value handed to `send()` or `later()`.
+ * @returns `true` when the value carries a callable `body`.
+ */
+export function isEmail(value) {
+    return typeof value.body === "function";
+}
+/**
+ * Chooses the plain-text part. An explicit one always wins, so a caller can
+ * replace a derived version that reads badly; otherwise it derives from the
+ * HTML actually sent, keeping the two parts from disagreeing on an override.
+ */
+function derivePlainText(message, overrides) {
+    if (overrides?.text !== undefined)
+        return overrides.text;
+    if (overrides?.html !== undefined)
+        return htmlToText(overrides.html);
+    if (message.text !== undefined)
+        return message.text;
+    if (message.html !== undefined)
+        return htmlToText(message.html);
+    return undefined;
+}
+/**
+ * Builds a `Message-ID` inside the sender's domain, which is what receivers expect
+ * of a generated identifier. Callers that need a stable value set `messageId` on
+ * the message instead of reaching for a clock or id seam.
+ */
+function generateMessageId(from) {
+    let domain = from.email.split("@").at(1) ?? "localhost";
+    return `<${crypto.randomUUID()}@${domain}>`;
+}
+/**
+ * Rejects messages no transport could deliver, so the failure names the mistake
+ * instead of surfacing as a provider error later: a missing sender or recipient,
+ * an address that cannot be routed, or a message with no body at all.
+ */
+function validate(message) {
+    if (!message.from.email)
+        return failure(new MailError("A message needs a sender address."));
+    if (message.to.length === 0) {
+        return failure(new MailError("A message needs at least one recipient."));
+    }
+    let addresses = [message.from, ...message.to, ...message.cc, ...message.bcc, ...message.replyTo];
+    for (let address of addresses) {
+        if (isValidAddress(address))
+            continue;
+        return failure(new MailError(`"${address.email}" is not a valid email address.`));
+    }
+    if (!message.html && !message.text) {
+        return failure(new MailError("A message needs an HTML or a plain-text body."));
+    }
+    return success(message);
+}
+/**
+ * Sends mail through a transport, applying one app's sender identity to every
+ * message. The instance is request-scoped when `later()` is used, because the
+ * queue it fills belongs to whoever flushes it.
+ */
+export class Mailer {
+    /** Configuration shared by every message this mailer sends. */
+    #options;
+    /** Messages queued by `later()`, drained by `flush()`. */
+    #queue = [];
+    /**
+     * Creates a mailer.
+     *
+     * @param options - Transport and sender configuration; see {@link MailerOptions}.
+     */
+    constructor(options) {
+        this.#options = options;
+    }
+    /** Number of messages waiting for the next `flush()`. */
+    get pending() {
+        return this.#queue.length;
+    }
+    /**
+     * Normalizes and delivers a message, awaiting the outcome. Never throws: a
+     * render failure, an invalid message, a rejected delivery, and a transport
+     * that throws all arrive as a `MailError` failure for the caller to inspect.
+     *
+     * @param input - A plain message, or an email object that renders its own body.
+     * @param overrides - Fields that replace what the input provides for this send.
+     * @returns The provider's identifier on success, a `MailError` on failure.
+     * @example let result = await mailer.send(new TeamInviteEmail(invite));
+     */
+    async send(input, overrides) {
+        let prepared = await this.#normalize(input, overrides);
+        if (isFailure(prepared))
+            return prepared;
+        let message = prepared.data;
+        let outcome = await wrap(() => this.#options.transport.send(message));
+        if (isFailure(outcome)) {
+            return failure(new MailError("The transport threw while sending the message.", {
+                cause: outcome.error,
+            }));
+        }
+        return outcome.data;
+    }
+    /**
+     * Queues a message to be sent once the caller flushes, which is how a send whose
+     * failure must not affect the response gets a defined lifetime. Nothing is
+     * rendered or validated yet; that happens at flush time.
+     *
+     * @param input - A plain message, or an email object that renders its own body.
+     * @param overrides - Fields that replace what the input provides for this send.
+     * @example ctx.email.later(new PasswordResetEmail(user));
+     */
+    later(input, overrides) {
+        this.#queue.push({ input, overrides });
+    }
+    /**
+     * Sends everything `later()` queued and empties the queue. Results come back in
+     * queue order for the caller to log; like `send()`, it never throws, so a failed
+     * deferred message cannot break whoever is flushing.
+     *
+     * @returns One result per queued message, in the order they were queued.
+     */
+    async flush() {
+        let queued = this.#queue.splice(0, this.#queue.length);
+        return await Promise.all(queued.map((entry) => this.send(entry.input, entry.overrides)));
+    }
+    /**
+     * Turns an email object into a plain message by reading its addressing and
+     * rendering its body to both parts. Plain messages pass through untouched.
+     */
+    async #toMessage(input) {
+        if (!isEmail(input))
+            return success(input);
+        let rendered = await wrap(() => render(input.body()));
+        if (isFailure(rendered)) {
+            return failure(new MailError("Failed to render the email body.", { cause: rendered.error }));
+        }
+        return success({
+            to: input.to,
+            subject: input.subject,
+            replyTo: input.replyTo,
+            headers: input.headers,
+            html: rendered.data.html,
+            text: rendered.data.text,
+        });
+    }
+    /**
+     * Produces the shape transports read: configured defaults filled in, address
+     * lists coerced, a plain-text part derived, and the source email recorded for
+     * type-based lookup. Validation runs last, so a failure describes the final message.
+     */
+    async #normalize(input, overrides) {
+        let converted = await this.#toMessage(input);
+        if (isFailure(converted))
+            return converted;
+        let message = { ...converted.data, ...overrides };
+        let from = message.from ?? this.#options.from;
+        return validate({
+            from,
+            to: toAddressList(message.to),
+            cc: toAddressList(message.cc),
+            bcc: toAddressList(message.bcc),
+            replyTo: toAddressList(message.replyTo ?? this.#options.replyTo),
+            subject: message.subject,
+            html: message.html,
+            text: derivePlainText(converted.data, overrides),
+            headers: { ...this.#options.headers, ...message.headers },
+            date: message.date ?? new Date(),
+            messageId: message.messageId ?? generateMessageId(from),
+            email: isEmail(input) ? input : undefined,
+        });
+    }
+}

package/dist/markdown.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Markdown as an email body, and the highlighted code block it renders fences with.
+ *
+ * A separate entry point keeps the highlighter out of mail bundles that carry no markdown.
+ *
+ * @author [Sergio Xalambrí](https://sergiodxa.com)
+ * @copyright Sergio Xalambrí 2026
+ */
+import type { Token } from "@sdxc/highlight";
+import type { Markdown as Ast } from "@sdxc/markdown";
+import type { Handle } from "remix/ui";
+export declare namespace CodeBlock {
+    /** Props accepted by {@link CodeBlock}. */
+    interface Props {
+        code: string;
+        /** Language to highlight as; an unknown one still renders, left unpainted. */
+        language?: string;
+        /** Already-highlighted runs, as a painted document carries them. */
+        tokens?: Token[];
+    }
+}
+/**
+ * A fenced block of code, highlighted, inside a single-cell table.
+ *
+ * The table keeps the block's background solid in Outlook, which paints a `<pre>`
+ * no wider than its text, so long lines wrap since an inbox offers no scrollbar.
+ *
+ * @example <CodeBlock language="bash" code="bun run deploy" />
+ */
+export declare function CodeBlock(handle: Handle<CodeBlock.Props>): () => import("remix/ui").RemixElement;
+export declare namespace Markdown {
+    /** Props accepted by {@link Markdown}. */
+    interface Props {
+        /** The document to render; its code blocks arrive painted when the caller painted them. */
+        document: Ast.Document;
+    }
+}
+/**
+ * Renders a parsed document as an email body, using the layout kit for every element.
+ *
+ * The document arrives parsed, so a caller holding one pays for no parser here, and the
+ * same tree an inbox receives is the tree a page renders.
+ *
+ * @example <Markdown document={notes} />
+ */
+export declare function Markdown(handle: Handle<Markdown.Props>): () => import("remix/ui").RemixElement;

package/dist/markdown.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "remix/ui/jsx-runtime";
+import { tokenize } from "@sdxc/highlight";
+import { CODE_COLOR, CodeInline, Heading, Hr, Img, Link, MONO_FAMILY, Text } from "./components.js";
+/**
+ * The colour of each token type, and the class that recolours it in dark mode.
+ *
+ * Six colours for twenty types, because an inbox reads at a glance and every
+ * colour spent here is another rule the dark-mode stylesheet has to carry.
+ */
+const TOKENS = {
+    comment: { color: "#6a737d", class: "mail-tok-comment" },
+    keyword: { color: "#d73a49", class: "mail-tok-keyword" },
+    operator: { color: "#24292e", class: "mail-tok-punctuation" },
+    punctuation: { color: "#24292e", class: "mail-tok-punctuation" },
+    string: { color: "#032f62", class: "mail-tok-string" },
+    regex: { color: "#032f62", class: "mail-tok-string" },
+    "attr-value": { color: "#032f62", class: "mail-tok-string" },
+    builtin: { color: "#032f62", class: "mail-tok-string" },
+    number: { color: "#005cc5", class: "mail-tok-number" },
+    boolean: { color: "#005cc5", class: "mail-tok-number" },
+    constant: { color: "#005cc5", class: "mail-tok-number" },
+    property: { color: "#005cc5", class: "mail-tok-number" },
+    function: { color: "#6f42c1", class: "mail-tok-function" },
+    "class-name": { color: "#6f42c1", class: "mail-tok-function" },
+    tag: { color: "#6f42c1", class: "mail-tok-function" },
+    "attr-name": { color: "#6f42c1", class: "mail-tok-function" },
+    variable: { color: "#6f42c1", class: "mail-tok-function" },
+    inserted: { color: "#22863a", class: "mail-tok-inserted" },
+    deleted: { color: "#b31d28", class: "mail-tok-deleted" },
+    plain: undefined,
+};
+/** Hairline colour around a data table's cells, matching the kit's own rules. */
+const TABLE_BORDER_COLOR = "#e4e4e7";
+/** One highlighted run, as a coloured span or as bare text where nothing paints it. */
+function highlight(tokens) {
+    return tokens.map((token, index) => {
+        let painted = TOKENS[token.type];
+        if (!painted)
+            return token.value;
+        return (_jsx("span", { class: painted.class, style: `color:${painted.color};`, children: token.value }, index));
+    });
+}
+/**
+ * A fenced block of code, highlighted, inside a single-cell table.
+ *
+ * The table keeps the block's background solid in Outlook, which paints a `<pre>`
+ * no wider than its text, so long lines wrap since an inbox offers no scrollbar.
+ *
+ * @example <CodeBlock language="bash" code="bun run deploy" />
+ */
+export function CodeBlock(handle) {
+    return () => {
+        let { code, language, tokens } = handle.props;
+        let content = highlight(tokens ?? tokenize(code, language ?? "plain"));
+        return (_jsx("table", { role: "presentation", width: "100%", cellPadding: "0", cellSpacing: "0", style: "width:100%;margin:0 0 16px;border-collapse:collapse;", children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { class: "mail-code", style: `padding:12px 16px;border-radius:6px;background-color:${CODE_COLOR};`, children: _jsx("pre", { style: `margin:0;padding:0;font-family:${MONO_FAMILY};font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word;`, children: content }) }) }) }) }));
+    };
+}
+/** An image's alternative text is inline content in the source and an attribute in the markup. */
+function textOf(nodes) {
+    return nodes.map(textOfNode).join("");
+}
+/** Reads the prose out of one node, a break becoming the space it stands for. */
+function textOfNode(node) {
+    switch (node.type) {
+        case "text":
+        case "inlineCode":
+        case "inlineHtml":
+        case "html":
+            return node.value;
+        case "code":
+            return node.content;
+        case "softBreak":
+        case "hardBreak":
+            return " ";
+        case "variable":
+            return `{% $${node.name} %}`;
+        case "footnoteReference":
+            return `[${node.identifier}]`;
+        case "thematicBreak":
+            return "";
+        default:
+            return textOf([...node.children]);
+    }
+}
+/** Renders a run of nodes in order, which is what every parent does with its children. */
+function children(nodes) {
+    return nodes.map(convert);
+}
+/** Each cell takes the alignment of the column it sits in, which the table carries once. */
+function convertRow(node, key, align) {
+    return (_jsx("tr", { children: node.children.map((cell, index) => convertCell(cell, index, node.header, align[index] ?? null)) }, key));
+}
+/** A header row's cells are the column headings, so they carry the weight a reader scans for. */
+function convertCell(node, key, header, align) {
+    let style = `padding:8px 12px;border:1px solid ${TABLE_BORDER_COLOR};font-family:inherit;font-size:14px;line-height:1.4;text-align:${align ?? "left"};vertical-align:top;`;
+    if (header) {
+        return (_jsx("th", { class: "mail-rule", style: `${style}font-weight:600;`, children: children(node.children) }, key));
+    }
+    return (_jsx("td", { class: "mail-rule", style: style, children: children(node.children) }, key));
+}
+/**
+ * Turns one node into email components.
+ *
+ * Content an inbox cannot lay out still renders, in whatever form reads: an
+ * ordered list becomes a real `<ol>`, so its plain-text conversion numbers each item.
+ */
+function convert(node, key) {
+    switch (node.type) {
+        case "heading": {
+            if (node.level === 1)
+                return _jsx(Heading, { children: children(node.children) }, key);
+            if (node.level === 2) {
+                return (_jsx(Heading, { level: 2, children: children(node.children) }, key));
+            }
+            return (_jsx(Heading, { level: 3, children: children(node.children) }, key));
+        }
+        case "paragraph":
+            return _jsx(Text, { children: children(node.children) }, key);
+        case "code":
+            return (_jsx(CodeBlock, { code: node.content, language: node.language, tokens: node.tokens }, key));
+        case "list": {
+            if (node.ordered) {
+                return (_jsx("ol", { start: node.start, style: "margin:0 0 16px;padding:0 0 0 20px;list-style-type:decimal;", children: children(node.children) }, key));
+            }
+            return (_jsx("ul", { style: "margin:0 0 16px;padding:0 0 0 20px;list-style-type:disc;", children: children(node.children) }, key));
+        }
+        case "listItem":
+            return (_jsx("li", { style: "margin:0 0 6px;font-family:inherit;line-height:1.6;", children: node.children.map((child, index) => child.type === "paragraph" ? children(child.children) : convert(child, index)) }, key));
+        case "blockquote":
+            return (_jsx("blockquote", { class: "mail-rule", style: "margin:0 0 16px;padding:0 0 0 16px;border-left:3px solid #e4e4e7;", children: children(node.children) }, key));
+        case "alert":
+            return (_jsxs("blockquote", { class: "mail-rule", style: "margin:0 0 16px;padding:0 0 0 16px;border-left:3px solid #e4e4e7;", children: [_jsx(Text, { size: 13, muted: true, children: node.kind.toUpperCase() }), children(node.children)] }, key));
+        case "table":
+            return (_jsx("table", { width: "100%", cellPadding: "0", cellSpacing: "0", style: "width:100%;margin:0 0 16px;border-collapse:collapse;", children: _jsx("tbody", { children: node.children.map((row, index) => convertRow(row, index, node.align)) }) }, key));
+        case "tableRow":
+            return convertRow(node, key, []);
+        case "tableCell":
+            return convertCell(node, key, false, null);
+        case "thematicBreak":
+            return _jsx(Hr, {}, key);
+        case "html":
+        case "inlineHtml":
+            return node.value;
+        case "footnoteDefinition":
+            return (_jsxs("div", { style: "margin:0 0 16px;font-family:inherit;font-size:14px;line-height:1.6;", children: [_jsx("strong", { style: "font-weight:600;", children: `[${node.identifier}] ` }), children(node.children)] }, key));
+        case "tag":
+            return children([...node.children]);
+        case "text":
+            return node.value;
+        case "emphasis":
+            return (_jsx("em", { style: "font-style:italic;", children: children(node.children) }, key));
+        case "strong":
+            return (_jsx("strong", { style: "font-weight:600;", children: children(node.children) }, key));
+        case "strikethrough":
+            return (_jsx("s", { style: "text-decoration:line-through;", children: children(node.children) }, key));
+        case "inlineCode":
+            return _jsx(CodeInline, { children: node.value }, key);
+        case "link":
+            return (_jsx(Link, { href: node.href, children: children(node.children) }, key));
+        case "image":
+            return _jsx(Img, { src: node.src, alt: textOf(node.children), gap: 16 }, key);
+        case "softBreak":
+            return "\n";
+        case "hardBreak":
+            return _jsx("br", {}, key);
+        case "footnoteReference":
+            return _jsx("sup", { style: "font-size:0.75em;line-height:1;", children: `[${node.identifier}]` }, key);
+        case "variable":
+            return `{% $${node.name} %}`;
+    }
+}
+/**
+ * Renders a parsed document as an email body, using the layout kit for every element.
+ *
+ * The document arrives parsed, so a caller holding one pays for no parser here, and the
+ * same tree an inbox receives is the tree a page renders.
+ *
+ * @example <Markdown document={notes} />
+ */
+export function Markdown(handle) {
+    return () => _jsx(_Fragment, { children: children(handle.props.document.children) });
+}