@wtfalch/email 0.5.0 → 0.6.1

package/dist/mailbox/download.d.ts

@@ -0,0 +1,43 @@
+import type { MailClient } from './client.ts';
+import type { Attachment } from './types.ts';
+/**
+ * Fetching an attachment's bytes.
+ *
+ * **This module exists because a download URL is not a link.** JMAP's
+ * `downloadUrl` carries no credential of its own — RFC 8620 §6.2 expects the
+ * same authentication the API uses — so `<a href={downloadUrl} download>` and
+ * `<img src={cid}>` both fetch it without an `Authorization` header and get a
+ * 401. The bytes have to be fetched by code that holds the token, and the
+ * result handed to the browser as a blob it already has.
+ *
+ * That is the whole reason attachments were unreachable: `ThreadView` has
+ * taken an `onDownload` since it was written, and nothing could supply one
+ * without this.
+ *
+ * **`credentials: 'omit'`, for the reason `client.ts` gives at length.** A
+ * refused request makes Stalwart answer with `WWW-Authenticate: Basic` as
+ * well as `Bearer`, and a browser allowed to use credentials honours the
+ * second by opening its native password prompt — a modal that hides whatever
+ * the application was about to say. Declining that here keeps a 401 an
+ * ordinary response.
+ */
+/** How much of a message this will pull into memory before refusing. A mail
+ *  server will happily serve a 2GB blob and a browser tab will not survive
+ *  holding one; Stalwart's own default message size limit is well under this.
+ *  A caller that genuinely wants more passes its own `maxBytes`. */
+export declare const DEFAULT_MAX_DOWNLOAD_BYTES: number;
+export type DownloadOptions = {
+    /** Refuse a blob larger than this, rather than exhausting the tab. */
+    maxBytes?: number;
+    /** Abort the fetch — a person navigating away from a slow attachment. */
+    signal?: AbortSignal;
+};
+/**
+ * An attachment's bytes, as a `Blob`.
+ *
+ * The type comes from the message rather than from the response: a server
+ * that sends `application/octet-stream` for everything would otherwise turn
+ * every PDF into a file the operating system cannot open, and the part's
+ * declared type is the one the sender chose.
+ */
+export declare function downloadAttachment(client: MailClient, attachment: Pick<Attachment, 'blobId' | 'name' | 'type' | 'size' | 'downloadUrl'>, options?: DownloadOptions): Promise<Blob>;

package/dist/mailbox/download.js

@@ -0,0 +1,68 @@
+import { MailError, guard } from "./errors.js";
+/**
+ * Fetching an attachment's bytes.
+ *
+ * **This module exists because a download URL is not a link.** JMAP's
+ * `downloadUrl` carries no credential of its own — RFC 8620 §6.2 expects the
+ * same authentication the API uses — so `<a href={downloadUrl} download>` and
+ * `<img src={cid}>` both fetch it without an `Authorization` header and get a
+ * 401. The bytes have to be fetched by code that holds the token, and the
+ * result handed to the browser as a blob it already has.
+ *
+ * That is the whole reason attachments were unreachable: `ThreadView` has
+ * taken an `onDownload` since it was written, and nothing could supply one
+ * without this.
+ *
+ * **`credentials: 'omit'`, for the reason `client.ts` gives at length.** A
+ * refused request makes Stalwart answer with `WWW-Authenticate: Basic` as
+ * well as `Bearer`, and a browser allowed to use credentials honours the
+ * second by opening its native password prompt — a modal that hides whatever
+ * the application was about to say. Declining that here keeps a 401 an
+ * ordinary response.
+ */
+/** How much of a message this will pull into memory before refusing. A mail
+ *  server will happily serve a 2GB blob and a browser tab will not survive
+ *  holding one; Stalwart's own default message size limit is well under this.
+ *  A caller that genuinely wants more passes its own `maxBytes`. */
+export const DEFAULT_MAX_DOWNLOAD_BYTES = 100 * 1024 * 1024;
+/**
+ * An attachment's bytes, as a `Blob`.
+ *
+ * The type comes from the message rather than from the response: a server
+ * that sends `application/octet-stream` for everything would otherwise turn
+ * every PDF into a file the operating system cannot open, and the part's
+ * declared type is the one the sender chose.
+ */
+export async function downloadAttachment(client, attachment, options = {}) {
+    const max = options.maxBytes ?? DEFAULT_MAX_DOWNLOAD_BYTES;
+    /* Checked before the request as well as after. The message says how big
+       the part is, and refusing on that alone saves pulling a gigabyte over
+       the wire to then refuse it. */
+    if (attachment.size > max) {
+        throw new MailError(`${attachment.name} is ${attachment.size} bytes, over the ${max}-byte limit for a download`, { type: 'tooLarge', operation: 'download' });
+    }
+    /* The URL on the attachment was expanded when the message was read. A
+       caller that built an `Attachment` by hand may not have one, so it is
+       recomputed rather than assumed. */
+    const url = attachment.downloadUrl || (await client.downloadUrl(attachment));
+    return guard('download', async () => {
+        const response = await fetch(url, {
+            headers: { Authorization: client.authorization },
+            credentials: 'omit',
+            ...(options.signal ? { signal: options.signal } : {}),
+        });
+        if (!response.ok) {
+            throw new MailError(`the server refused to send ${attachment.name}`, {
+                status: response.status,
+                operation: 'download',
+            });
+        }
+        const bytes = await response.arrayBuffer();
+        /* A server is not obliged to send `Content-Length`, and a chunked
+           response can be any size whatever the message claimed. */
+        if (bytes.byteLength > max) {
+            throw new MailError(`${attachment.name} arrived at ${bytes.byteLength} bytes, over the ${max}-byte limit`, { type: 'tooLarge', operation: 'download' });
+        }
+        return new Blob([bytes], { type: attachment.type || 'application/octet-stream' });
+    });
+}

package/dist/mailbox/index.d.ts

@@ -23,6 +23,8 @@ export { draftToEmail, send, sentPatch } from './submit.ts';
 export type { SendOptions } from './submit.ts';
 export { moveThread, moveToRole, removeFromMailbox, setFlagged, setRead, } from './mutate.ts';
 export type { MoveOptions } from './mutate.ts';
+export { DEFAULT_MAX_DOWNLOAD_BYTES, downloadAttachment } from './download.ts';
+export type { DownloadOptions } from './download.ts';
 export { push } from './push.ts';
 export type { PushHandle, PushOptions } from './push.ts';
 export { expandTemplate } from './uri.ts';

package/dist/mailbox/index.js

@@ -14,5 +14,6 @@ export { identities } from "./identities.js";
 export { attribution, formatAddress, forwardDraft, forwardIntroduction, forwardSubject, quoteText, replyDraft, replySubject, } from "./drafts.js";
 export { draftToEmail, send, sentPatch } from "./submit.js";
 export { moveThread, moveToRole, removeFromMailbox, setFlagged, setRead, } from "./mutate.js";
+export { DEFAULT_MAX_DOWNLOAD_BYTES, downloadAttachment } from "./download.js";
 export { push } from "./push.js";
 export { expandTemplate } from "./uri.js";

package/dist/mailbox/mail.css

@@ -925,6 +925,10 @@
   color: var(--muted);
 }
 
+.attachment.is-busy {
+  cursor: progress;
+}
+
 .attachment-size {
   color: var(--muted);
   font-variant-numeric: tabular-nums;

package/dist/mailbox/react/Mail.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Command, Icon, Modal, SplitPane } from '@wtfalch/design';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { downloadAttachment } from "../download.js";
 import { forwardDraft, replyDraft } from "../drafts.js";
 import { findRole } from "../mailboxes.js";
 import { moveToRole, setFlagged, setRead } from "../mutate.js";
@@ -11,6 +12,7 @@ import { ThreadList } from "./ThreadList.js";
 import { ThreadView } from "./ThreadView.js";
 import { useIdentities, useMailboxes, usePush, useThread, useThreads } from "./hooks.js";
 import { usePanes } from "./layout.js";
+import { saveBlob } from "./save.js";
 /**
  * The whole client: mailboxes, a list, a message, and a way to write one.
  *
@@ -73,6 +75,10 @@ export function Mail({ client, location, onNavigate, account, onError, now, clas
     const [helpOpen, setHelpOpen] = useState(false);
     const [acting, setActing] = useState(false);
     const [note, setNote] = useState(null);
+    /* By blob id rather than a single flag: four attachments on one message can
+       be fetched at once, and one spinner for all of them would say the wrong
+       thing about three of them. */
+    const [downloading, setDownloading] = useState(new Set());
     const searchField = useRef(null);
     const boxes = useMailboxes(client);
     const identities = useIdentities(client);
@@ -227,6 +233,35 @@ export function Mail({ client, location, onNavigate, account, onError, now, clas
             return;
         void act(() => setRead(client, threadId, false), 'Marked unread.');
     }, [act, client, threadId]);
+    /**
+     * An attachment, fetched and handed to the browser.
+     *
+     * `ThreadView` has taken an `onDownload` since it was written and nothing
+     * ever supplied one, so every attachment button in this client rendered
+     * disabled. It could not be a link: a JMAP download URL carries no
+     * credential, so an anchor fetches it without the token and gets a 401.
+     *
+     * The name is said in the failure because "that did not work" over a list
+     * of four files does not say which.
+     */
+    const download = useCallback(async (file) => {
+        setDownloading((busy) => new Set(busy).add(file.blobId));
+        try {
+            saveBlob(await downloadAttachment(client, file), file.name);
+        }
+        catch (error) {
+            setNote(error instanceof Error
+                ? `${file.name} did not download: ${error.message}`
+                : `${file.name} did not download.`);
+        }
+        finally {
+            setDownloading((busy) => {
+                const next = new Set(busy);
+                next.delete(file.blobId);
+                return next;
+            });
+        }
+    }, [client]);
     const flag = useCallback((next) => {
         if (!threadId)
             return;
@@ -403,7 +438,7 @@ export function Mail({ client, location, onNavigate, account, onError, now, clas
                     setQuery('');
                 }, "aria-label": "Clear the search", children: _jsx(Icon, { name: "close", size: 13 }) })) : (_jsx("span", { className: "mail-search-key", "aria-hidden": "true", children: "/" }))] }));
     const list = (_jsx(ThreadList, { page: threads.data, selectedId: threadId, onSelect: openThread, onPage: (threads.data?.total ?? 0) > PAGE ? setPosition : undefined, limit: PAGE, loading: threads.loading, now: now, title: query ? `Results for “${query}”` : current?.name, empty: query ? _jsxs("p", { className: "threads-quiet", children: ["Nothing matches \u201C", query, "\u201D."] }) : undefined }));
-    const reader = (_jsx(ThreadView, { thread: thread.data, loading: thread.loading, onReply: startReply, onForward: startForward, onArchive: archiveBox ? archive : undefined, onTrash: trashBox ? trash : undefined, onMarkUnread: markUnread, onFlag: flag, flagged: summary?.isFlagged ?? false, busy: acting, onBack: panes === 'narrow' ? () => setThreadId(null) : undefined }));
+    const reader = (_jsx(ThreadView, { thread: thread.data, loading: thread.loading, onReply: startReply, onForward: startForward, onArchive: archiveBox ? archive : undefined, onTrash: trashBox ? trash : undefined, onMarkUnread: markUnread, onFlag: flag, onDownload: (file) => void download(file), downloading: downloading, flagged: summary?.isFlagged ?? false, busy: acting, onBack: panes === 'narrow' ? () => setThreadId(null) : undefined }));
     return (_jsxs("div", { className: `mail is-${panes}${className ? ` ${className}` : ''}`, children: [_jsxs("header", { className: "mail-bar", children: [_jsxs("div", { className: "mail-bar-start", children: [panes === 'narrow' && (_jsx(Button, { kind: "ghost", iconOnly: true, onClick: () => setDrawerOpen(true), "aria-label": "Mailboxes", children: _jsx(Icon, { name: "menu" }) })), _jsx("span", { className: "mail-wordmark", children: "Mail" })] }), searchBox, _jsxs("div", { className: "mail-bar-end", children: [_jsxs(Button, { kind: "primary", size: "sm", onClick: startNew, disabled: !identity, children: [_jsx(Icon, { name: "pen", size: 15 }), " ", _jsx("span", { className: "mail-compose-word", children: "Compose" })] }), account] })] }), panes === 'wide' && (_jsxs(SplitPane, { className: "mail-panes", label: "Mailbox list width", defaultSize: 15, min: 11, max: 28, storageKey: "mail-sidebar", children: [_jsx(MailboxTree, { mailboxes: boxes.data ?? [], selectedId: mailboxId, onSelect: go, loading: boxes.loading }), _jsxs(SplitPane, { label: "Conversation list width", defaultSize: 36, min: 26, max: 55, storageKey: "mail-list", children: [list, reader] })] })), panes === 'medium' && (_jsxs("div", { className: "mail-panes", children: [_jsx(MailboxTree, { mailboxes: boxes.data ?? [], selectedId: mailboxId, onSelect: go, loading: boxes.loading, rail: true }), _jsxs(SplitPane, { className: "mail-panes-split", label: "Conversation list width", defaultSize: 40, min: 28, max: 60, storageKey: "mail-list", children: [list, reader] })] })), panes === 'narrow' && _jsx("div", { className: "mail-panes", children: reading ? reader : list }), drawerOpen && (_jsx(Modal, { title: "Mailboxes", width: "20rem", onClose: () => setDrawerOpen(false), children: _jsx(MailboxTree, { mailboxes: boxes.data ?? [], selectedId: mailboxId, onSelect: go, loading: boxes.loading }) })), _jsx(Command, { open: paletteOpen, onOpenChange: setPaletteOpen, groups: paletteGroups }), helpOpen && (_jsx(Modal, { title: "Keyboard shortcuts", width: "26rem", onClose: () => setHelpOpen(false), children: _jsx(Shortcuts, {}) })), draft && (_jsx(Modal, { title: draft.subject ? draft.subject : '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 }) })), _jsx(Note, { said: note, onDone: () => setNote(null) })] }));
 }
 /**

package/dist/mailbox/react/ThreadList.js

@@ -10,14 +10,27 @@ import { useCallback, useEffect, useRef } from 'react';
  *  time is the thing they do not know. */
 export function shortTime(iso, now = new Date()) {
     const then = new Date(iso);
+    /* Before the elapsed-time branches, not after them, and that ordering is
+       the whole of this function's only sharp edge.
+  
+       Elapsed time and calendar day disagree for one hour out of every
+       twenty-four. Just after midnight a message sent forty-five minutes ago
+       was sent yesterday, so the row said "45m" under a heading that said
+       "Yesterday" -- both true, and together they read as a fault. Checking
+       elapsed time first is what let that through; the version before this one
+       only reached the clock after the hour was up, so the hour where it
+       mattered was the hour it never covered.
+  
+       The heading wins, because the heading is the thing the eye has already
+       read. A row under "Yesterday" says a time of day, always. */
+    if (dayGroup(iso, now) === 'Yesterday') {
+        return then.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+    }
     const minutes = Math.max(0, Math.round((now.getTime() - then.getTime()) / 60_000));
     if (minutes < 1)
         return 'now';
     if (minutes < 60)
         return `${minutes}m`;
-    if (dayGroup(iso, now) === 'Yesterday') {
-        return then.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
-    }
     const hours = Math.round(minutes / 60);
     if (hours < 24)
         return `${hours}h`;

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

@@ -49,10 +49,14 @@ export type ThreadViewProps = ThreadActions & {
     /** 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;
+    /** Blob ids currently being fetched, so each row can say so for itself.
+     *  A set rather than a boolean: four files on one message download
+     *  independently and one spinner for all of them lies about three. */
+    downloading?: ReadonlySet<string>;
     /** Back to the list, on a window too narrow to show both. */
     onBack?: () => void;
     className?: string;
 };
-export declare function ThreadView({ thread, loading, onReply, onForward, onArchive, onTrash, onMarkUnread, onFlag, flagged, busy, onDownload, onBack, className, }: ThreadViewProps): import("react").JSX.Element;
+export declare function ThreadView({ thread, loading, onReply, onForward, onArchive, onTrash, onMarkUnread, onFlag, flagged, busy, onDownload, downloading, onBack, className, }: ThreadViewProps): import("react").JSX.Element;
 /** Bytes, the way a mail client says them. */
 export declare function bytes(size: number): string;

package/dist/mailbox/react/ThreadView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Empty, Icon, Identity, Menu, ScrollArea, Skeleton } from '@wtfalch/design';
 import { useEffect, useState } from 'react';
-export function ThreadView({ thread, loading = false, onReply, onForward, onArchive, onTrash, onMarkUnread, onFlag, flagged = false, busy = false, onDownload, onBack, className, }) {
+export function ThreadView({ thread, loading = false, onReply, onForward, onArchive, onTrash, onMarkUnread, onFlag, flagged = false, busy = false, onDownload, downloading, onBack, className, }) {
     if (loading && !thread) {
         return (_jsxs("div", { className: `thread${className ? ` ${className}` : ''}`, "aria-busy": "true", children: [_jsxs("header", { className: "thread-head", children: [_jsx(Skeleton, { width: "52%", height: 5 }), _jsx(Skeleton, { width: "28%", height: 2.5 })] }), _jsx("div", { className: "thread-body", children: _jsxs("div", { className: "message open", children: [_jsxs("div", { className: "message-head", children: [_jsx(Skeleton, { variant: "circular", width: "2rem", height: 8 }), _jsx(Skeleton, { width: "30%", height: 3 })] }), _jsx("div", { className: "message-body", children: _jsx(Skeleton, { lines: 6, height: 2.5 }) })] }) })] }));
     }
@@ -13,7 +13,7 @@ export function ThreadView({ thread, loading = false, onReply, onForward, onArch
     const people = [
         ...new Map(thread.messages.flatMap((message) => message.from.map((who) => [who.email, who.name?.trim() || who.email]))).values(),
     ];
-    return (_jsxs("div", { className: `thread${className ? ` ${className}` : ''}`, children: [_jsxs("header", { className: "thread-head", children: [_jsxs("div", { className: "thread-headline", children: [onBack && (_jsx(Button, { kind: "ghost", iconOnly: true, onClick: onBack, "aria-label": "Back to the list", children: _jsx(Icon, { name: "back" }) })), _jsxs("div", { className: "thread-heading", children: [_jsx("h2", { className: "thread-title", children: thread.subject || '(no subject)' }), _jsxs("p", { className: "thread-meta", children: [people.join(', '), _jsx("span", { className: "thread-meta-sep", children: "\u00B7" }), thread.messages.length === 1 ? '1 message' : `${thread.messages.length} messages`] })] })] }), _jsx(Toolbar, { message: newest, onReply: onReply, onForward: onForward, onArchive: onArchive, onTrash: onTrash, onMarkUnread: onMarkUnread, onFlag: onFlag, flagged: flagged, busy: busy })] }), _jsxs(ScrollArea, { className: "thread-body", label: "Messages in this conversation", children: [_jsx("ol", { className: "messages", children: thread.messages.map((message, index) => (_jsx("li", { children: _jsx(MessageCard, { message: message, defaultOpen: index === last, onReply: onReply, onForward: onForward, onDownload: onDownload }) }, message.id))) }), onReply && newest && (_jsxs("div", { className: "thread-foot", children: [_jsxs(Button, { kind: "primary", onClick: () => onReply(newest, false), disabled: busy, children: [_jsx(Icon, { name: "reply" }), " Reply"] }), _jsx(Button, { kind: "ghost", onClick: () => onReply(newest, true), disabled: busy, children: "Reply all" }), onForward && (_jsx(Button, { kind: "ghost", onClick: () => onForward(newest), disabled: busy, children: "Forward" }))] }))] })] }));
+    return (_jsxs("div", { className: `thread${className ? ` ${className}` : ''}`, children: [_jsxs("header", { className: "thread-head", children: [_jsxs("div", { className: "thread-headline", children: [onBack && (_jsx(Button, { kind: "ghost", iconOnly: true, onClick: onBack, "aria-label": "Back to the list", children: _jsx(Icon, { name: "back" }) })), _jsxs("div", { className: "thread-heading", children: [_jsx("h2", { className: "thread-title", children: thread.subject || '(no subject)' }), _jsxs("p", { className: "thread-meta", children: [people.join(', '), _jsx("span", { className: "thread-meta-sep", children: "\u00B7" }), thread.messages.length === 1 ? '1 message' : `${thread.messages.length} messages`] })] })] }), _jsx(Toolbar, { message: newest, onReply: onReply, onForward: onForward, onArchive: onArchive, onTrash: onTrash, onMarkUnread: onMarkUnread, onFlag: onFlag, flagged: flagged, busy: busy })] }), _jsxs(ScrollArea, { className: "thread-body", label: "Messages in this conversation", children: [_jsx("ol", { className: "messages", children: thread.messages.map((message, index) => (_jsx("li", { children: _jsx(MessageCard, { message: message, defaultOpen: index === last, onReply: onReply, onForward: onForward, onDownload: onDownload, downloading: downloading }) }, message.id))) }), onReply && newest && (_jsxs("div", { className: "thread-foot", children: [_jsxs(Button, { kind: "primary", onClick: () => onReply(newest, false), disabled: busy, children: [_jsx(Icon, { name: "reply" }), " Reply"] }), _jsx(Button, { kind: "ghost", onClick: () => onReply(newest, true), disabled: busy, children: "Reply all" }), onForward && (_jsx(Button, { kind: "ghost", onClick: () => onForward(newest), disabled: busy, children: "Forward" }))] }))] })] }));
 }
 /** A hover hint on a control that has only a glyph. `aria-hidden` on the
  *  wrapper is wrong -- the button inside it has to stay in the tree -- so
@@ -74,7 +74,7 @@ function Toolbar({ message, onReply, onForward, onArchive, onTrash, onMarkUnread
     ];
     return (_jsxs("div", { className: "thread-tools", children: [onReply && (_jsx(Hint, { says: "Reply \u2014 R", children: _jsx(Button, { kind: "ghost", iconOnly: true, disabled: busy, onClick: () => onReply(message, false), "aria-label": "Reply", children: _jsx(Icon, { name: "reply" }) }) })), onForward && (_jsx(Hint, { says: "Forward \u2014 F", children: _jsx(Button, { kind: "ghost", iconOnly: true, disabled: busy, onClick: () => onForward?.(message), "aria-label": "Forward", children: _jsx(Icon, { name: "forward" }) }) })), _jsx("span", { className: "thread-tools-rule", "aria-hidden": "true" }), onFlag && (_jsx(Hint, { says: flagged ? 'Unflag — S' : 'Flag — S', children: _jsx(Button, { kind: "ghost", iconOnly: true, disabled: busy, onClick: () => onFlag(!flagged), "aria-pressed": flagged, "aria-label": flagged ? 'Unflag' : 'Flag', className: flagged ? 'is-flagged' : undefined, children: _jsx(Icon, { name: flagged ? 'star-filled' : 'star' }) }) })), onArchive && (_jsx(Hint, { says: "Archive \u2014 E", children: _jsx(Button, { kind: "ghost", iconOnly: true, disabled: busy, onClick: onArchive, "aria-label": "Archive", children: _jsx(Icon, { name: "folder" }) }) })), onTrash && (_jsx(Hint, { says: "Delete \u2014 #", children: _jsx(Button, { kind: "ghost", iconOnly: true, disabled: busy, onClick: onTrash, "aria-label": "Delete", children: _jsx(Icon, { name: "trash" }) }) })), overflow.length > 0 && (_jsx(Menu, { label: "More actions", placement: "bottom end", trigger: _jsx(Button, { kind: "ghost", iconOnly: true, disabled: busy, "aria-label": "More actions", children: _jsx(Icon, { name: "more" }) }), items: overflow }))] }));
 }
-function MessageCard({ message, defaultOpen, onReply, onForward, onDownload, }) {
+function MessageCard({ message, defaultOpen, onReply, onForward, onDownload, downloading, }) {
     const [open, setOpen] = useState(defaultOpen);
     /* The newest message changes when a reply arrives, and the card that was
        newest should not stay open while the new one opens under it. */
@@ -119,7 +119,10 @@ function MessageCard({ message, defaultOpen, onReply, onForward, onDownload, })
                        reflowing it destroys both. */
                     _jsx("pre", { className: "message-text", children: message.text })) : message.html !== null ? (_jsx(HtmlNotice, { html: message.html })) : (_jsx("p", { className: "message-quiet", children: "This message has no body." })), message.isTruncated && (_jsx("p", { className: "message-quiet", children: "This message was cut short at half a megabyte. The rest has not been fetched." })), message.attachments.length > 0 && (_jsx("ul", { className: "attachments", children: message.attachments
                             .filter((file) => file.disposition !== 'inline')
-                            .map((file) => (_jsx("li", { children: _jsxs("button", { type: "button", className: "attachment", onClick: () => onDownload?.(file), disabled: !onDownload, children: [_jsx(Icon, { name: "paperclip", className: "attachment-icon" }), _jsx("span", { className: "attachment-name", children: file.name }), _jsx("span", { className: "attachment-size", children: bytes(file.size) })] }) }, file.blobId))) }))] }))] }));
+                            .map((file) => {
+                            const busy = downloading?.has(file.blobId) ?? false;
+                            return (_jsx("li", { children: _jsxs("button", { type: "button", className: `attachment${busy ? ' is-busy' : ''}`, onClick: () => onDownload?.(file), disabled: !onDownload || busy, "aria-busy": busy || undefined, children: [_jsx(Icon, { name: busy ? 'spinner' : 'paperclip', className: `attachment-icon${busy ? ' spin' : ''}` }), _jsx("span", { className: "attachment-name", children: file.name }), _jsx("span", { className: "attachment-size", children: busy ? 'Fetching…' : bytes(file.size) })] }) }, file.blobId));
+                        }) }))] }))] }));
 }
 function Recipients({ message }) {
     const line = (label, people) => people.length === 0 ? null : (_jsxs("p", { className: "message-line", children: [_jsx("span", { className: "message-line-label", children: label }), _jsx("span", { children: people.map((p) => p.name?.trim() || p.email).join(', ') })] }));

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

@@ -23,4 +23,5 @@ export type { ComposerProps } from './Composer.tsx';
 export { Mail } from './Mail.tsx';
 export type { MailLocation, MailProps } from './Mail.tsx';
 export { usePanes } from './layout.ts';
+export { saveBlob } from './save.ts';
 export type { Panes } from './layout.ts';

package/dist/mailbox/react/index.js

@@ -17,3 +17,4 @@ export { ThreadView, bytes } from "./ThreadView.js";
 export { Composer, parseAddresses } from "./Composer.js";
 export { Mail } from "./Mail.js";
 export { usePanes } from "./layout.js";
+export { saveBlob } from "./save.js";

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

@@ -0,0 +1,25 @@
+/**
+ * Handing a blob to the browser as a file.
+ *
+ * Its own module, and in the react folder rather than beside `download.ts`,
+ * because this half is pure DOM: `download.ts` fetches bytes and runs
+ * anywhere, this needs a `document`. Splitting them keeps the fetch testable
+ * in Node and keeps an application that wants to do its own saving — write to
+ * a directory handle, open in a viewer, upload somewhere else — able to take
+ * the bytes and skip this.
+ */
+/**
+ * Save a blob under a filename.
+ *
+ * **The object URL is revoked on a timer, not immediately.** Revoking in the
+ * same tick as the click cancels the download in Chrome and Safari: the
+ * anchor's activation is queued, and by the time the browser reads the URL it
+ * has already been released. A tick is the usual fix and is still a race; a
+ * minute is not, and an object URL is a pointer to memory the page already
+ * holds, so holding it a little longer costs nothing.
+ *
+ * **The anchor is not appended in Firefox's case only.** A detached anchor's
+ * click is ignored there, so it goes into the document and comes straight
+ * back out, which is invisible and works everywhere.
+ */
+export declare function saveBlob(blob: Blob, name: string): void;

package/dist/mailbox/react/save.js

@@ -0,0 +1,42 @@
+/**
+ * Handing a blob to the browser as a file.
+ *
+ * Its own module, and in the react folder rather than beside `download.ts`,
+ * because this half is pure DOM: `download.ts` fetches bytes and runs
+ * anywhere, this needs a `document`. Splitting them keeps the fetch testable
+ * in Node and keeps an application that wants to do its own saving — write to
+ * a directory handle, open in a viewer, upload somewhere else — able to take
+ * the bytes and skip this.
+ */
+/**
+ * Save a blob under a filename.
+ *
+ * **The object URL is revoked on a timer, not immediately.** Revoking in the
+ * same tick as the click cancels the download in Chrome and Safari: the
+ * anchor's activation is queued, and by the time the browser reads the URL it
+ * has already been released. A tick is the usual fix and is still a race; a
+ * minute is not, and an object URL is a pointer to memory the page already
+ * holds, so holding it a little longer costs nothing.
+ *
+ * **The anchor is not appended in Firefox's case only.** A detached anchor's
+ * click is ignored there, so it goes into the document and comes straight
+ * back out, which is invisible and works everywhere.
+ */
+export function saveBlob(blob, name) {
+    if (typeof document === 'undefined') {
+        throw new Error('saveBlob needs a document; call it from the browser');
+    }
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    /* A filename with a path separator in it is a filename a server chose, and
+       browsers vary in how much of it they honour. Only the last segment is
+       ever a name. */
+    anchor.download = name.split(/[\\/]/).pop() || 'attachment';
+    anchor.rel = 'noopener';
+    anchor.style.display = 'none';
+    document.body.appendChild(anchor);
+    anchor.click();
+    anchor.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/email",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "The wtfalch estate: reading a mailbox over JMAP, and administering the Stalwart server it lives on. Two entries with no code in common.",
   "license": "MIT",
   "type": "module",
@@ -61,7 +61,7 @@
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@wtfalch/design": "^0.5.0",
+    "@wtfalch/design": "^0.7.0",
     "jsdom": "^30.0.1",
     "react": "^19",
     "react-dom": "^19",