@wtfalch/email 0.1.0

package/dist/mailbox/push.js

@@ -0,0 +1,127 @@
+/**
+ * Push, as server-sent events.
+ *
+ * RFC 8620 §7.3 puts the event source behind the same authentication as the
+ * API, and the browser `EventSource` cannot send an `Authorization` header —
+ * it has no way to set headers at all. `jmap-jam`'s `connectEventSource`
+ * therefore only works against a server that accepts a cookie or a token in
+ * the query string, which is not what a bearer token is.
+ *
+ * So the stream is read with `fetch`, which takes the same header every other
+ * request carries, and the handful of lines of SSE framing are parsed here.
+ * This works unchanged in a browser and in Node.
+ */
+const FRAME_SEPARATOR = /\r?\n\r?\n/;
+const RETRY_START_MS = 1_000;
+const RETRY_CAP_MS = 30_000;
+/** Parse one SSE frame's field lines into an event. */
+function parseFrame(frame) {
+    let event = 'message';
+    let id = null;
+    const data = [];
+    // A stream may use CR, LF or CRLF line endings, so splitting on '\n' alone
+    // leaves a trailing '\r' on every field value and `event` stops matching.
+    for (const line of frame.split(/\r\n|\r|\n/)) {
+        if (line === '' || line.startsWith(':'))
+            continue;
+        const colon = line.indexOf(':');
+        const field = colon === -1 ? line : line.slice(0, colon);
+        // "If the line starts with a colon the field value is the rest of the
+        // line after the colon, with one leading space removed."
+        let value = colon === -1 ? '' : line.slice(colon + 1);
+        if (value.startsWith(' '))
+            value = value.slice(1);
+        if (field === 'event')
+            event = value;
+        else if (field === 'data')
+            data.push(value);
+        else if (field === 'id')
+            id = value;
+    }
+    return { event, data: data.join('\n'), id };
+}
+/**
+ * Watch for changes on the account.
+ *
+ * `handler` is called with the changed state strings for this account; a
+ * value that differs from the one a previous read returned means that type
+ * has changed and its list should be refetched. The stream reconnects on its
+ * own with a backoff, so the handle only has to be closed when the caller is
+ * finished with it.
+ */
+export function push(client, handler, options = {}) {
+    const controller = new AbortController();
+    const types = options.types === undefined || options.types === '*' ? '*' : options.types.join(',');
+    const ping = options.ping ?? 30;
+    let stopped = false;
+    let lastEventId = null;
+    const loop = async () => {
+        let delay = RETRY_START_MS;
+        while (!stopped) {
+            try {
+                const { accountId } = await client.connect();
+                const url = await client.eventSourceUrl({ types, ping });
+                const headers = {
+                    Authorization: client.authorization,
+                    Accept: 'text/event-stream',
+                };
+                if (lastEventId !== null)
+                    headers['Last-Event-ID'] = lastEventId;
+                const response = await fetch(url, { headers, signal: controller.signal });
+                if (!response.ok || !response.body) {
+                    throw new Error(`the event source answered ${response.status}`);
+                }
+                options.onConnectionChange?.(true);
+                delay = RETRY_START_MS;
+                const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+                let buffer = '';
+                while (!stopped) {
+                    const { done, value } = await reader.read();
+                    if (done)
+                        break;
+                    buffer += value;
+                    // Frames are separated by a blank line; \r\n is as legal as \n.
+                    let boundary = FRAME_SEPARATOR.exec(buffer);
+                    while (boundary !== null) {
+                        const frame = buffer.slice(0, boundary.index);
+                        buffer = buffer.slice(boundary.index + boundary[0].length);
+                        const parsed = parseFrame(frame);
+                        if (parsed.id !== null)
+                            lastEventId = parsed.id;
+                        if (parsed.event === 'state' && parsed.data !== '') {
+                            try {
+                                const change = JSON.parse(parsed.data);
+                                const mine = change.changed?.[accountId];
+                                if (mine)
+                                    handler(mine);
+                            }
+                            catch (error) {
+                                // One malformed frame is not a reason to drop the stream.
+                                options.onError?.(error);
+                            }
+                        }
+                        boundary = FRAME_SEPARATOR.exec(buffer);
+                    }
+                }
+                await reader.cancel().catch(() => { });
+            }
+            catch (error) {
+                if (stopped || controller.signal.aborted)
+                    return;
+                options.onError?.(error);
+            }
+            if (stopped)
+                return;
+            options.onConnectionChange?.(false);
+            await new Promise((resolve) => setTimeout(resolve, delay));
+            delay = Math.min(delay * 2, RETRY_CAP_MS);
+        }
+    };
+    void loop();
+    return {
+        close: () => {
+            stopped = true;
+            controller.abort();
+        },
+    };
+}

package/dist/mailbox/react/Composer.d.ts

@@ -0,0 +1,37 @@
+import type { Draft, EmailAddress, MailIdentity } from '../types.ts';
+/**
+ * Writing one.
+ *
+ * **Recipients are chips, not a comma-separated string.** A text field holding
+ * `ada@example.com, charles@example.com` is a field where one missing comma
+ * sends to nobody and one stray space sends to an address that does not
+ * exist; and it cannot show you who you are about to write to. Each address
+ * becomes a chip as you commit it, and a chip can be removed without editing
+ * a sentence.
+ *
+ * **Enter, comma and semicolon all commit an address**, because people type
+ * all three and a composer that only accepts one of them silently swallows
+ * the others into the next address.
+ *
+ * **Cc and Bcc are hidden until wanted.** Three empty address fields at the
+ * top of every message is three fields to tab through to reach the subject.
+ *
+ * The draft is the caller's state, so a reply arrives already filled in by
+ * `replyDraft` and this is only the surface that edits it.
+ */
+export type ComposerProps = {
+    draft: Draft;
+    onChange: (draft: Draft) => void;
+    onSend: () => void | Promise<void>;
+    onCancel?: () => void;
+    identities: readonly MailIdentity[];
+    /** Set while a send is in flight, so the buttons cannot be pressed twice. */
+    sending?: boolean;
+    /** What went wrong with the last send. */
+    error?: string;
+    className?: string;
+};
+/** Split what somebody typed into addresses. Commas and semicolons both
+ *  separate, because both get typed and both get pasted. */
+export declare function parseAddresses(text: string): EmailAddress[];
+export declare function Composer({ draft, onChange, onSend, onCancel, identities, sending, error, className, }: ComposerProps): import("react").JSX.Element;

package/dist/mailbox/react/Composer.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Field, Identity, Input, Select, Textarea } from '@wtfalch/design';
+import { useState } from 'react';
+/** Split what somebody typed into addresses. Commas and semicolons both
+ *  separate, because both get typed and both get pasted. */
+export function parseAddresses(text) {
+    return text
+        .split(/[,;]/)
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .map((part) => {
+        // `Ada Lovelace <ada@example.com>` as well as the bare address, because
+        // that is what a paste out of another mail client looks like.
+        const angled = part.match(/^(.*?)\s*<([^>]+)>$/);
+        if (angled?.[2]) {
+            const name = angled[1]?.replace(/^["']|["']$/g, '').trim();
+            return name ? { name, email: angled[2].trim() } : { email: angled[2].trim() };
+        }
+        return { email: part };
+    });
+}
+export function Composer({ draft, onChange, onSend, onCancel, identities, sending = false, error, className, }) {
+    const [showCopies, setShowCopies] = useState((draft.cc?.length ?? 0) > 0 || (draft.bcc?.length ?? 0) > 0);
+    const set = (patch) => onChange({ ...draft, ...patch });
+    const canSend = draft.to.length > 0 && !sending;
+    return (_jsxs("form", { className: `composer${className ? ` ${className}` : ''}`, onSubmit: (event) => {
+            event.preventDefault();
+            if (canSend)
+                void onSend();
+        }, children: [identities.length > 1 && (_jsx(Field, { label: "From", children: (field) => (_jsx(Select, { id: field.id, block: true, value: draft.identityId, onChange: (event) => set({ identityId: event.target.value }), children: identities.map((identity) => (_jsx("option", { value: identity.id, children: identity.name ? `${identity.name} <${identity.email}>` : identity.email }, identity.id))) })) })), _jsx(AddressField, { label: "To", people: draft.to, onChange: (to) => set({ to }), trail: !showCopies && (_jsx(Button, { kind: "ghost", size: "sm", onClick: () => setShowCopies(true), type: "button", children: "Cc / Bcc" })) }), showCopies && (_jsxs(_Fragment, { children: [_jsx(AddressField, { label: "Cc", people: draft.cc ?? [], onChange: (cc) => set({ cc }) }), _jsx(AddressField, { label: "Bcc", people: draft.bcc ?? [], onChange: (bcc) => set({ bcc }) })] })), _jsx(Field, { label: "Subject", children: (field) => (_jsx(Input, { ...field, block: true, value: draft.subject, onChange: (event) => set({ subject: event.target.value }) })) }), _jsx(Field, { label: "Message", children: (field) => (_jsx(Textarea, { ...field, rows: 12, value: draft.text ?? '', onChange: (event) => set({ text: event.target.value }) })) }), (draft.attachments?.length ?? 0) > 0 && (_jsx("ul", { className: "composer-files", children: draft.attachments?.map((file) => (_jsxs("li", { children: [_jsx("span", { className: "composer-file", children: file.name }), _jsx(Button, { kind: "ghost", size: "sm", type: "button", onClick: () => set({ attachments: draft.attachments?.filter((f) => f.blobId !== file.blobId) }), "aria-label": `Remove ${file.name}`, children: "Remove" })] }, file.blobId))) })), error && (_jsx("p", { className: "composer-error", role: "alert", children: error })), _jsxs("div", { className: "composer-actions", children: [_jsx(Button, { kind: "primary", type: "submit", disabled: !canSend, busy: sending, children: sending ? 'Sending…' : 'Send' }), onCancel && (_jsx(Button, { kind: "ghost", type: "button", onClick: onCancel, disabled: sending, children: "Discard" })), draft.to.length === 0 && _jsx("span", { className: "composer-hint", children: "Add a recipient to send." })] })] }));
+}
+function AddressField({ label, people, onChange, trail, }) {
+    const [typed, setTyped] = useState('');
+    const commit = (text) => {
+        const parsed = parseAddresses(text);
+        if (parsed.length === 0)
+            return;
+        const seen = new Set(people.map((p) => p.email.toLowerCase()));
+        onChange([...people, ...parsed.filter((p) => !seen.has(p.email.toLowerCase()))]);
+        setTyped('');
+    };
+    return (_jsx(Field, { label: label, children: (field) => (_jsxs("div", { className: "composer-addresses", children: [people.map((person) => (_jsx(Identity, { kind: "chip", name: person.name, address: person.email, onRemove: () => onChange(people.filter((p) => p.email !== person.email)) }, person.email))), _jsx(Input, { ...field, className: "composer-address-input", value: typed, placeholder: people.length === 0 ? 'name@example.com' : '', onChange: (event) => {
+                        const value = event.target.value;
+                        // A comma or semicolon ends an address wherever it appears,
+                        // which is what makes a pasted list of five become five chips.
+                        if (/[,;]/.test(value))
+                            commit(value);
+                        else
+                            setTyped(value);
+                    }, onKeyDown: (event) => {
+                        if (event.key === 'Enter') {
+                            event.preventDefault();
+                            commit(typed);
+                        }
+                        else if (event.key === 'Backspace' && typed === '' && people.length > 0) {
+                            // Backspace on an empty field takes the last chip, which is
+                            // what every chip field does and what fingers expect.
+                            onChange(people.slice(0, -1));
+                        }
+                    }, 
+                    /* Committed on blur too: a half-typed address left behind when
+                       somebody tabs to the subject is one they meant to add. */
+                    onBlur: () => commit(typed) }), trail] })) }));
+}

package/dist/mailbox/react/Mail.d.ts

@@ -0,0 +1,8 @@
+import type { MailClient } from '../client.ts';
+export type MailProps = {
+    client: MailClient;
+    /** Now, for the list's relative times. Passed in so stories hold still. */
+    now?: Date;
+    className?: string;
+};
+export declare function Mail({ client, now, className }: MailProps): import("react").JSX.Element;

package/dist/mailbox/react/Mail.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Command, Icon, Input, Modal, SplitPane } from '@wtfalch/design';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { forwardDraft, replyDraft } from "../drafts.js";
+import { findRole } from "../mailboxes.js";
+import { send } from "../submit.js";
+import { Composer } from "./Composer.js";
+import { MailboxTree, flatMailboxes } from "./MailboxTree.js";
+import { ThreadList } from "./ThreadList.js";
+import { ThreadView } from "./ThreadView.js";
+import { useIdentities, useMailboxes, usePush, useThread, useThreads } from "./hooks.js";
+/**
+ * The whole client: mailboxes, a list, a message, and a way to write one.
+ *
+ * Everything below this is a pure component taking props, so each can be drawn
+ * in a gallery and tested without a server. This is the only piece that holds
+ * state and calls the hooks, which is what makes the rest of the package worth
+ * having on its own -- an application with its own layout can take the four
+ * views and skip this entirely.
+ *
+ * **Push moves the list, not the message.** A state change refetches the
+ * mailbox counts and the current page; it deliberately does not refetch the
+ * thread being read, because replacing the message under somebody mid-sentence
+ * is worse than showing them a copy that is thirty seconds old.
+ *
+ * **The palette is the keyboard.** Cmd-K opens it, and it carries the
+ * mailboxes as "go to" entries, so moving around never requires the mouse.
+ */
+const PAGE = 50;
+export function Mail({ client, now, className }) {
+    const [mailboxId, setMailboxId] = useState(null);
+    const [threadId, setThreadId] = useState(null);
+    const [position, setPosition] = useState(0);
+    const [query, setQuery] = useState('');
+    const [text, setText] = useState('');
+    const [draft, setDraft] = useState(null);
+    const [sending, setSending] = useState(false);
+    const [sendError, setSendError] = useState();
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    const boxes = useMailboxes(client);
+    const identities = useIdentities(client);
+    /* The inbox, once, when the mailboxes first arrive. Not in an effect that
+       depends on `boxes.data`, which would fight a person who has since picked
+       another mailbox: it only fires while nothing is selected. */
+    useEffect(() => {
+        if (mailboxId || !boxes.data)
+            return;
+        const inbox = findRole(boxes.data, 'inbox') ?? boxes.data[0];
+        if (inbox)
+            setMailboxId(inbox.id);
+    }, [boxes.data, mailboxId]);
+    const threads = useThreads({ mailboxId: mailboxId ?? undefined, text: query, position, limit: PAGE, calculateTotal: true }, client);
+    const thread = useThread(threadId, client);
+    const refresh = useCallback(() => {
+        boxes.reload();
+        threads.reload();
+    }, [boxes.reload, threads.reload]);
+    usePush(refresh, client);
+    const go = useCallback((mailbox) => {
+        setMailboxId(mailbox.id);
+        setThreadId(null);
+        setPosition(0);
+        setQuery('');
+        setText('');
+    }, []);
+    const openThread = useCallback((summary) => setThreadId(summary.id), []);
+    /* Cmd-K, and Escape out of a search. Bound on the window rather than on a
+       container, because the palette has to open from wherever focus is --
+       including from inside the message being read. */
+    useEffect(() => {
+        const onKey = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+                event.preventDefault();
+                setPaletteOpen(true);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, []);
+    const identity = identities.data?.[0];
+    const startReply = (message, all) => {
+        if (!identity)
+            return;
+        setSendError(undefined);
+        setDraft(replyDraft(message, { identity, all }));
+    };
+    const startForward = (message) => {
+        if (!identity)
+            return;
+        setSendError(undefined);
+        setDraft(forwardDraft(message, { identity }));
+    };
+    const startNew = useCallback(() => {
+        if (!identity)
+            return;
+        setSendError(undefined);
+        setDraft({ identityId: identity.id, to: [], subject: '', text: '' });
+    }, [identity]);
+    const doSend = async () => {
+        if (!draft)
+            return;
+        setSending(true);
+        setSendError(undefined);
+        try {
+            await send(client, draft, {
+                ...(identity ? { identity } : {}),
+                ...(boxes.data ? { mailboxes: boxes.data } : {}),
+            });
+            setDraft(null);
+            refresh();
+        }
+        catch (error) {
+            setSendError(error instanceof Error ? error.message : 'The message was not sent.');
+        }
+        finally {
+            setSending(false);
+        }
+    };
+    const paletteGroups = useMemo(() => [
+        {
+            title: 'Go to',
+            commands: flatMailboxes(boxes.data ?? []).map((box) => ({
+                id: box.id,
+                label: box.name,
+                keywords: [box.role ?? ''],
+                onRun: () => go(box),
+            })),
+        },
+        {
+            title: 'Message',
+            commands: [
+                { id: 'new', label: 'New message', shortcut: 'C', onRun: startNew },
+                { id: 'refresh', label: 'Refresh', shortcut: 'R', onRun: refresh },
+            ],
+        },
+    ], [boxes.data, go, refresh, startNew]);
+    const current = boxes.data?.find((box) => box.id === mailboxId);
+    return (_jsxs("div", { className: `mail${className ? ` ${className}` : ''}`, children: [_jsxs("header", { className: "mail-bar", children: [_jsxs(Button, { kind: "primary", onClick: startNew, disabled: !identity, children: [_jsx(Icon, { name: "chat" }), " New"] }), _jsx("form", { className: "mail-search", onSubmit: (event) => {
+                            event.preventDefault();
+                            setQuery(text);
+                            setPosition(0);
+                            setThreadId(null);
+                        }, children: _jsx(Input, { block: true, value: text, placeholder: `Search${current ? ` ${current.name}` : ''}…`, "aria-label": "Search mail", onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+                                if (event.key !== 'Escape')
+                                    return;
+                                setText('');
+                                setQuery('');
+                            } }) }), _jsx(Button, { kind: "ghost", onClick: () => setPaletteOpen(true), "aria-label": "Open the palette", children: _jsx(Icon, { name: "bolt" }) })] }), _jsxs(SplitPane, { className: "mail-panes", label: "Mailbox list width", defaultSize: 22, min: 14, max: 40, storageKey: "mail-sidebar", children: [_jsx(MailboxTree, { mailboxes: boxes.data ?? [], selectedId: mailboxId, onSelect: go, loading: boxes.loading }), _jsxs(SplitPane, { label: "Conversation list width", defaultSize: 38, min: 22, max: 60, storageKey: "mail-list", children: [_jsx(ThreadList, { page: threads.data, selectedId: threadId, onSelect: openThread, onPage: setPosition, limit: PAGE, loading: threads.loading, now: now, empty: query ? _jsxs("p", { className: "threads-quiet", children: ["Nothing matches \u201C", query, "\u201D."] }) : undefined }), _jsx(ThreadView, { thread: thread.data, loading: thread.loading, onReply: startReply, onForward: startForward })] })] }), _jsx(Command, { open: paletteOpen, onOpenChange: setPaletteOpen, groups: paletteGroups }), draft && (_jsx(Modal, { title: "New message", width: "46rem", onClose: sending ? undefined : () => setDraft(null), closeDisabled: sending, children: _jsx(Composer, { draft: draft, onChange: setDraft, onSend: doSend, onCancel: () => setDraft(null), identities: identities.data ?? [], sending: sending, error: sendError }) }))] }));
+}

package/dist/mailbox/react/MailboxTree.d.ts

@@ -0,0 +1,14 @@
+import type { MailboxNode } from '../types.ts';
+export declare function orderForReading(nodes: readonly MailboxNode[]): MailboxNode[];
+export type MailboxTreeProps = {
+    mailboxes: readonly MailboxNode[];
+    selectedId?: string | null;
+    onSelect: (mailbox: MailboxNode) => void;
+    /** Shown in place of the list while the first fetch is out. */
+    loading?: boolean;
+    className?: string;
+};
+export declare function MailboxTree({ mailboxes, selectedId, onSelect, loading, className, }: MailboxTreeProps): import("react").JSX.Element;
+/** Every mailbox flattened, for a caller that needs the list rather than the
+ *  tree -- a command palette's "go to" entries, say. */
+export declare function flatMailboxes(nodes: readonly MailboxNode[]): MailboxNode[];

package/dist/mailbox/react/MailboxTree.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, ScrollArea } from '@wtfalch/design';
+import { walk } from "../mailboxes.js";
+/**
+ * The mailboxes, down the side.
+ *
+ * **Ordered by role, not by name.** The server sends them alphabetical --
+ * Stalwart gives all five `sortOrder: 0`, so the tie-break by name decides --
+ * which puts Deleted Items first and Inbox third. Nobody reading mail wants
+ * their trash at the top. So the roles a mail client knows about are drawn in
+ * the order a mail client draws them, and everything else follows in the
+ * server's order underneath. That reordering belongs here rather than in
+ * `mailboxes()`, which reports what the server said.
+ *
+ * **The unread count is threads, not messages**, to agree with the list beside
+ * it: a conversation with four unread replies is one bold row there and should
+ * be one in the count.
+ */
+/** The order a mail client draws the roles it knows. Anything else sorts
+ *  after, in the order the server gave. */
+const ROLE_ORDER = ['inbox', 'drafts', 'sent', 'archive', 'junk', 'trash'];
+const ROLE_ICON = {
+    inbox: 'chat',
+    drafts: 'file',
+    sent: 'download',
+    archive: 'folder',
+    junk: 'warning',
+    trash: 'close',
+};
+export function orderForReading(nodes) {
+    const rank = (node) => {
+        const index = node.role ? ROLE_ORDER.indexOf(node.role) : -1;
+        return index === -1 ? ROLE_ORDER.length : index;
+    };
+    return [...nodes].sort((a, b) => rank(a) - rank(b));
+}
+export function MailboxTree({ mailboxes, selectedId, onSelect, loading = false, className, }) {
+    if (loading && mailboxes.length === 0) {
+        return (_jsx("nav", { className: `mailboxes${className ? ` ${className}` : ''}`, "aria-label": "Mailboxes", children: _jsx("p", { className: "mailboxes-quiet", children: "Loading\u2026" }) }));
+    }
+    const ordered = orderForReading(mailboxes);
+    return (_jsx(ScrollArea, { className: `mailboxes${className ? ` ${className}` : ''}`, label: "Mailboxes", children: _jsx("nav", { "aria-label": "Mailboxes", children: _jsx("ul", { className: "mailboxes-list", children: ordered.map((node) => (_jsx(MailboxRow, { node: node, depth: 0, selectedId: selectedId, onSelect: onSelect }, node.id))) }) }) }));
+}
+function MailboxRow({ node, depth, selectedId, onSelect, }) {
+    const unread = node.unreadThreads;
+    return (_jsxs("li", { children: [_jsxs("button", { type: "button", className: `mailbox${node.id === selectedId ? ' on' : ''}${unread > 0 ? ' unread' : ''}`, style: { '--depth': depth }, onClick: () => onSelect(node), "aria-current": node.id === selectedId ? 'true' : undefined, children: [node.role && ROLE_ICON[node.role] && (_jsx(Icon, { name: ROLE_ICON[node.role], className: "mailbox-icon" })), _jsx("span", { className: "mailbox-name", children: node.name }), unread > 0 && (_jsxs("span", { className: "mailbox-count", children: [unread, _jsx("span", { className: "sr-only", children: " unread" })] }))] }), node.children.length > 0 && (_jsx("ul", { className: "mailboxes-list", children: node.children.map((child) => (_jsx(MailboxRow, { node: child, depth: depth + 1, selectedId: selectedId, onSelect: onSelect }, child.id))) }))] }));
+}
+/** Every mailbox flattened, for a caller that needs the list rather than the
+ *  tree -- a command palette's "go to" entries, say. */
+export function flatMailboxes(nodes) {
+    return [...walk(orderForReading(nodes))];
+}

package/dist/mailbox/react/ThreadList.d.ts

@@ -0,0 +1,37 @@
+import type { ThreadPage, ThreadSummary } from '../types.ts';
+/**
+ * The list of conversations, and what a row of it has to say.
+ *
+ * **Unread is weight, not colour.** A blue dot beside a subject is invisible
+ * to a reader who cannot distinguish it and disappears on a projector; the
+ * whole row goes to the strong weight instead, which survives both. The dot
+ * is there as well, because two signals are better than one, and it carries
+ * the accessible text that says which rows they are.
+ *
+ * **The time is relative and titled.** "12m" is what you scan; the full
+ * timestamp is in the `title` and the `dateTime`, so hovering and a screen
+ * reader both get the real thing. A list of absolute timestamps is a list
+ * nobody reads.
+ *
+ * **A conversation says how many messages it holds**, because "3" beside a
+ * subject is the difference between one mail and a thread you are behind on.
+ */
+export type ThreadListProps = {
+    page: ThreadPage | undefined;
+    selectedId?: string | null;
+    onSelect: (thread: ThreadSummary) => void;
+    /** Called with the new first-item index. Absent, no pager is drawn. */
+    onPage?: (position: number) => void;
+    limit?: number;
+    loading?: boolean;
+    /** Shown when there is nothing, instead of an empty box. */
+    empty?: React.ReactNode;
+    /** Now, for the relative times. Passed in so a story and a screenshot are
+     *  stable rather than drifting with the clock. */
+    now?: Date;
+    className?: string;
+};
+/** "12m", "3h", "Tue", "14 Mar" -- coarser the further back it is, because
+ *  precision stops being useful and starts being noise. */
+export declare function shortTime(iso: string, now?: Date): string;
+export declare function ThreadList({ page, selectedId, onSelect, onPage, limit, loading, empty, now, className, }: ThreadListProps): import("react").JSX.Element;

package/dist/mailbox/react/ThreadList.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Empty, Identity, Pagination, Pill, ScrollArea } from '@wtfalch/design';
+/** "12m", "3h", "Tue", "14 Mar" -- coarser the further back it is, because
+ *  precision stops being useful and starts being noise. */
+export function shortTime(iso, now = new Date()) {
+    const then = new Date(iso);
+    const minutes = Math.max(0, Math.round((now.getTime() - then.getTime()) / 60_000));
+    if (minutes < 1)
+        return 'now';
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.round(minutes / 60);
+    if (hours < 24)
+        return `${hours}h`;
+    const days = Math.round(hours / 24);
+    if (days < 7)
+        return then.toLocaleDateString('en-GB', { weekday: 'short' });
+    if (then.getUTCFullYear() === now.getUTCFullYear()) {
+        return then.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' });
+    }
+    return then.toLocaleDateString('en-GB', { year: 'numeric', month: 'short' });
+}
+export function ThreadList({ page, selectedId, onSelect, onPage, limit = 50, loading = false, empty, now, className, }) {
+    const items = page?.items ?? [];
+    if (loading && items.length === 0) {
+        return _jsx("p", { className: "threads-quiet", children: "Loading\u2026" });
+    }
+    if (items.length === 0) {
+        return (_jsx("div", { className: `threads${className ? ` ${className}` : ''}`, children: empty ?? _jsx(Empty, { icon: "chat", children: "Nothing here." }) }));
+    }
+    return (_jsxs("div", { className: `threads${className ? ` ${className}` : ''}`, children: [_jsx(ScrollArea, { className: "threads-scroll", label: "Conversations", children: _jsx("ul", { className: "threads-list", children: items.map((item) => (_jsx("li", { children: _jsx(ThreadRow, { thread: item, selected: item.id === selectedId, onSelect: onSelect, now: now }) }, item.id))) }) }), onPage && page && (_jsx(Pagination, { className: "threads-pager", position: page.position, limit: limit, total: page.total, count: items.length, onChange: onPage, label: "Conversation pages", unit: "conversations" }))] }));
+}
+function ThreadRow({ thread, selected, onSelect, now, }) {
+    const unread = thread.unreadCount > 0;
+    /* The sender a list shows is whoever wrote last, except in Sent and Drafts
+       where that is always you -- but this component does not know which
+       mailbox it is drawing, so it shows the last writer and lets the row's
+       participants carry the rest. */
+    const who = thread.from ?? thread.participants[thread.participants.length - 1] ?? null;
+    return (_jsxs("button", { type: "button", className: `thread-row${selected ? ' on' : ''}${unread ? ' unread' : ''}`, onClick: () => onSelect(thread), "aria-current": selected ? 'true' : undefined, children: [_jsxs("span", { className: "thread-top", children: [who ? (_jsx(Identity, { name: who.name, address: who.email, size: "sm", className: "thread-who" })) : (_jsx("span", { className: "thread-who thread-nobody", children: "Unknown sender" })), _jsx("time", { className: "thread-when", dateTime: thread.receivedAt, title: new Date(thread.receivedAt).toLocaleString('en-GB'), children: shortTime(thread.receivedAt, now) })] }), _jsxs("span", { className: "thread-subject", children: [unread && (_jsx("span", { className: "thread-dot", "aria-hidden": "true", children: "\u2022" })), _jsx("span", { className: "thread-subject-text", children: thread.subject || '(no subject)' }), thread.emailCount > 1 && (_jsxs("span", { className: "thread-count", children: [thread.emailCount, _jsx("span", { className: "sr-only", children: " messages" })] }))] }), _jsx("span", { className: "thread-preview", children: thread.preview }), (thread.hasAttachment || thread.isFlagged || thread.isDraft) && (_jsxs("span", { className: "thread-marks", children: [thread.isDraft && _jsx(Pill, { tone: "warn", children: "Draft" }), thread.isFlagged && _jsx(Pill, { tone: "info", children: "Flagged" }), thread.hasAttachment && _jsx(Pill, { children: "Attachment" })] })), unread && _jsxs("span", { className: "sr-only", children: [thread.unreadCount, " unread"] })] }));
+}

package/dist/mailbox/react/ThreadView.d.ts

@@ -0,0 +1,33 @@
+import type { Attachment, Message, ThreadDetail } from '../types.ts';
+/**
+ * A conversation, opened.
+ *
+ * **The newest message is expanded and the rest are collapsed**, because that
+ * is the one you came to read. A thread view that opens everything makes you
+ * scroll past mail you have already seen to reach the mail you have not.
+ *
+ * **The HTML body is not rendered.** It arrives from strangers, and a mail
+ * client that injects it into its own document is a mail client with a
+ * cross-site scripting hole in the one place attackers reliably look. Text is
+ * shown; where a message has only HTML, this says so and offers the raw
+ * source rather than silently showing nothing. Rendering it safely means a
+ * sandboxed frame with a sanitiser and a content policy, which is its own
+ * piece of work.
+ *
+ * **A truncated body says it is truncated.** `core` fetches the first half
+ * megabyte of each part; a message longer than that would otherwise appear to
+ * end mid-sentence with no explanation.
+ */
+export type ThreadViewProps = {
+    thread: ThreadDetail | undefined;
+    loading?: boolean;
+    onReply?: (message: Message, all: boolean) => void;
+    onForward?: (message: Message) => void;
+    /** Fetches an attachment's bytes; the URL needs the same credential the API
+     *  does, so a bare link cannot do it. */
+    onDownload?: (attachment: Attachment) => void;
+    className?: string;
+};
+export declare function ThreadView({ thread, loading, onReply, onForward, onDownload, className, }: ThreadViewProps): import("react").JSX.Element;
+/** Bytes, the way a mail client says them. */
+export declare function bytes(size: number): string;