@wtfalch/email 0.4.1 → 0.6.0

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

@@ -2,19 +2,35 @@ 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.
+ * **Two lines, not four.** The row that was here stacked sender, subject,
+ * preview and a row of word-shaped pills, which came to about 140px: four
+ * conversations to a laptop screen, and a mailbox with sixty in it takes
+ * fifteen screens to scan. Sender and time on one line, subject and preview
+ * sharing the second, marks as glyphs rather than words -- that is around
+ * 60px, and the whole point of a list is how much of it you can see at once.
+ *
+ * **Unread is weight and a rail, not colour and not a bullet in the text.**
+ * A blue dot beside a subject is invisible to a reader who cannot distinguish
+ * it and disappears on a projector. The row goes to the strong weight, and a
+ * 3px bar sits in the gutter -- outside the text, so a read row and an unread
+ * row start their subjects at the same x. The bullet that used to be inline
+ * moved every subject two characters to the right and only on unread rows,
+ * which read as a rendering fault.
+ *
+ * **The rows are grouped by day, and the heading sticks.** Scrolling a long
+ * mailbox with no landmarks is how you lose your place; "Yesterday" pinned to
+ * the top of the viewport is the cheapest orientation there is. Groups are
+ * computed from the same `now` the relative times use, so a story and a
+ * screenshot hold still.
  *
  * **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.
+ * reader both get the real thing.
  *
- * **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.
+ * **Arrow keys move, and focus follows.** The list is a single tab stop --
+ * one row is `tabIndex=0` and the rest are `-1` -- so tabbing through the
+ * client does not mean tabbing through sixty conversations. Within it, the
+ * arrows and `j`/`k` move the selection.
  */
 export type ThreadListProps = {
     page: ThreadPage | undefined;
@@ -26,12 +42,28 @@ export type ThreadListProps = {
     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. */
+    /** The mailbox being listed, for the heading above the rows. */
+    title?: string;
+    /** Now, for the relative times and the day grouping. 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. */
+/** "12m", "3h", "09:42", "Tue", "14 Mar" -- coarser the further back it is,
+ *  because precision stops being useful and starts being noise.
+ *
+ *  Yesterday is the clock rather than the weekday, and that is not a detail:
+ *  the row sits under a heading that already says "Yesterday", so printing
+ *  "Wed" beside it spends the column on a word the reader has just read. The
+ *  time is the thing they do not know. */
 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;
+/**
+ * The heading a row sits under.
+ *
+ * Calendar days apart, not hours apart: a message at 00:30 and one at 23:30
+ * are 23 hours apart and both "today", and a rule written in hours puts them
+ * in different groups, which is the sort of thing nobody reports as a bug and
+ * everybody finds confusing.
+ */
+export declare function dayGroup(iso: string, now?: Date): string;
+export declare function ThreadList({ page, selectedId, onSelect, onPage, limit, loading, empty, title, now, className, }: ThreadListProps): import("react").JSX.Element;

package/dist/mailbox/react/ThreadList.js

@@ -1,7 +1,13 @@
 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. */
+import { Empty, Icon, Pagination, ScrollArea, Skeleton } from '@wtfalch/design';
+import { useCallback, useEffect, useRef } from 'react';
+/** "12m", "3h", "09:42", "Tue", "14 Mar" -- coarser the further back it is,
+ *  because precision stops being useful and starts being noise.
+ *
+ *  Yesterday is the clock rather than the weekday, and that is not a detail:
+ *  the row sits under a heading that already says "Yesterday", so printing
+ *  "Wed" beside it spends the column on a word the reader has just read. The
+ *  time is the thing they do not know. */
 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));
@@ -9,6 +15,9 @@ export function shortTime(iso, now = new Date()) {
         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`;
@@ -20,15 +29,102 @@ export function shortTime(iso, now = new Date()) {
     }
     return then.toLocaleDateString('en-GB', { year: 'numeric', month: 'short' });
 }
-export function ThreadList({ page, selectedId, onSelect, onPage, limit = 50, loading = false, empty, now, className, }) {
+/**
+ * The heading a row sits under.
+ *
+ * Calendar days apart, not hours apart: a message at 00:30 and one at 23:30
+ * are 23 hours apart and both "today", and a rule written in hours puts them
+ * in different groups, which is the sort of thing nobody reports as a bug and
+ * everybody finds confusing.
+ */
+export function dayGroup(iso, now = new Date()) {
+    const then = new Date(iso);
+    const midnight = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    const days = Math.round((midnight(now) - midnight(then)) / 86_400_000);
+    if (days <= 0)
+        return 'Today';
+    if (days === 1)
+        return 'Yesterday';
+    if (days < 7)
+        return 'Earlier this week';
+    if (days < 30)
+        return 'Earlier this month';
+    if (then.getFullYear() === now.getFullYear()) {
+        return then.toLocaleDateString('en-GB', { month: 'long' });
+    }
+    return then.toLocaleDateString('en-GB', { year: 'numeric', month: 'long' });
+}
+/** The rows, in order, with the heading each one begins. */
+function group(items, now) {
+    const out = [];
+    for (const item of items) {
+        const heading = dayGroup(item.receivedAt, now);
+        const last = out[out.length - 1];
+        if (last?.heading === heading)
+            last.items.push(item);
+        else
+            out.push({ heading, items: [item] });
+    }
+    return out;
+}
+export function ThreadList({ page, selectedId, onSelect, onPage, limit = 50, loading = false, empty, title, now, className, }) {
     const items = page?.items ?? [];
+    const at = now ?? new Date();
+    const list = useRef(null);
+    /* Keep the selected row in view when the selection moved from somewhere
+       else -- the command palette, a keyboard shortcut, a URL that was pasted.
+       `nearest` rather than `center`, which would scroll on every click. */
+    useEffect(() => {
+        if (!selectedId)
+            return;
+        const row = list.current?.querySelector(`[data-thread="${CSS.escape(selectedId)}"]`);
+        row?.scrollIntoView({ block: 'nearest' });
+    }, [selectedId]);
+    /**
+     * Arrow keys, and `j`/`k` for the people who never left mutt.
+     *
+     * Handled on the container rather than per row: the rows are a moving set
+     * and the container is not, so there is one listener whatever the page
+     * size. `preventDefault` matters -- without it the arrows scroll the pane
+     * as well as move the selection, and the two disagree.
+     */
+    const onKeyDown = useCallback((event) => {
+        const forward = event.key === 'ArrowDown' || event.key === 'j';
+        const back = event.key === 'ArrowUp' || event.key === 'k';
+        if (!forward && !back)
+            return;
+        if (event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        event.preventDefault();
+        const index = items.findIndex((item) => item.id === selectedId);
+        const next = index === -1 ? 0 : Math.min(items.length - 1, Math.max(0, index + (forward ? 1 : -1)));
+        const target = items[next];
+        if (target)
+            onSelect(target);
+    }, [items, selectedId, onSelect]);
     if (loading && items.length === 0) {
-        return _jsx("p", { className: "threads-quiet", children: "Loading\u2026" });
+        return (_jsxs("div", { className: `threads${className ? ` ${className}` : ''}`, children: [title && _jsx(Head, { title: title }), _jsx(LoadingRows, {})] }));
     }
     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: [title && _jsx(Head, { title: title }), _jsx("div", { className: "threads-empty", children: empty ?? _jsx(Empty, { icon: "mail", 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" }))] }));
+    return (_jsxs("div", { className: `threads${className ? ` ${className}` : ''}`, children: [title && _jsx(Head, { title: title, count: page?.total }), _jsx(ScrollArea, { className: "threads-scroll", label: "Conversations", children: _jsx("div", { ref: list, className: "threads-list", onKeyDown: onKeyDown, "aria-busy": loading || undefined, children: group(items, at).map((section) => (_jsxs("section", { className: "threads-group", children: [_jsx("h3", { className: "threads-day", children: section.heading }), _jsx("ul", { className: "threads-rows", "aria-label": section.heading, children: section.items.map((item) => (_jsx("li", { children: _jsx(ThreadRow, { thread: item, selected: item.id === selectedId, onSelect: onSelect, now: at }) }, item.id))) })] }, section.heading))) }) }), 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" }))] }));
+}
+/** The mailbox's name over its list, so the middle column says where it is.
+ *  Without it the only label for these rows is a highlight in another pane. */
+function Head({ title, count }) {
+    return (_jsxs("header", { className: "threads-head", children: [_jsx("h2", { className: "threads-title", children: title }), count !== undefined && (_jsxs("span", { className: "threads-total", children: [count.toLocaleString('en-GB'), _jsx("span", { className: "sr-only", children: " conversations" })] }))] }));
+}
+/**
+ * Placeholder rows at the real row's geometry.
+ *
+ * Six of them, and each one the height of the row it stands in for, so the
+ * list does not jump when the mail arrives. A spinner in the middle of an
+ * empty column tells you nothing about what is coming; this tells you it is a
+ * list and roughly how much of one.
+ */
+function LoadingRows() {
+    return (_jsx("div", { className: "threads-scroll", "aria-busy": "true", "aria-live": "polite", "aria-label": "Loading conversations", children: _jsx("div", { className: "threads-list", children: [0, 1, 2, 3, 4, 5].map((n) => (_jsxs("div", { className: "thread-row is-skeleton", children: [_jsx("span", { className: "thread-rail" }), _jsxs("span", { className: "thread-main", children: [_jsxs("span", { className: "thread-top", children: [_jsx(Skeleton, { width: `${38 + ((n * 13) % 26)}%`, height: 2.5 }), _jsx(Skeleton, { width: "2.5rem", height: 2.5, className: "thread-when" })] }), _jsx("span", { className: "thread-bottom", children: _jsx(Skeleton, { width: `${60 + ((n * 17) % 30)}%`, height: 2.5 }) })] })] }, n))) }) }));
 }
 function ThreadRow({ thread, selected, onSelect, now, }) {
     const unread = thread.unreadCount > 0;
@@ -37,5 +133,10 @@ function ThreadRow({ thread, selected, onSelect, now, }) {
        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"] })] }));
+    const name = who?.name?.trim() || who?.email || 'Unknown sender';
+    const when = new Date(thread.receivedAt);
+    return (_jsxs("button", { type: "button", "data-thread": thread.id, className: `thread-row${selected ? ' on' : ''}${unread ? ' unread' : ''}`, onClick: () => onSelect(thread), "aria-current": selected ? 'true' : undefined, 
+        /* One tab stop for the list: the selected row is the one the tab order
+           knows about, and the arrows move between them from there. */
+        tabIndex: selected ? 0 : -1, children: [_jsx("span", { className: "thread-rail", "aria-hidden": "true" }), _jsxs("span", { className: "thread-main", children: [_jsxs("span", { className: "thread-top", children: [_jsx("span", { className: "thread-who", children: name }), _jsxs("span", { className: "thread-marks", children: [thread.isDraft && _jsx("span", { className: "thread-draft", children: "Draft" }), thread.emailCount > 1 && (_jsxs("span", { className: "thread-count", children: [thread.emailCount, _jsx("span", { className: "sr-only", children: " messages" })] })), thread.hasAttachment && (_jsx(Icon, { name: "paperclip", size: 13, title: "Has an attachment", className: "thread-mark" })), thread.isFlagged && (_jsx(Icon, { name: "star-filled", size: 13, title: "Flagged", className: "thread-mark is-flag" }))] }), _jsx("time", { className: "thread-when", dateTime: thread.receivedAt, title: when.toLocaleString('en-GB'), children: shortTime(thread.receivedAt, now) })] }), _jsxs("span", { className: "thread-bottom", children: [_jsx("span", { className: "thread-subject", children: thread.subject || '(no subject)' }), thread.preview && _jsx("span", { className: "thread-preview", children: thread.preview })] })] }), unread && _jsxs("span", { className: "sr-only", children: [thread.unreadCount, " unread"] })] }));
 }

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

@@ -2,6 +2,17 @@ import type { Attachment, Message, ThreadDetail } from '../types.ts';
 /**
  * A conversation, opened.
  *
+ * **The actions are a toolbar, not a menu behind a gear.** Reply, archive and
+ * delete are the three things anybody does to a message, and they were three
+ * clicks deep behind an icon that means "settings" everywhere else in the
+ * system. They are buttons now, in reach, in the order of how often they are
+ * pressed; the rest is behind `more`.
+ *
+ * **The head stays put.** Subject, participants and toolbar are pinned, so
+ * archiving the twelfth message of a thread does not mean scrolling back up
+ * to find the button. It is the one piece of chrome that has to survive the
+ * scroll.
+ *
  * **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.
@@ -18,16 +29,34 @@ import type { Attachment, Message, ThreadDetail } from '../types.ts';
  * 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;
+/** What the toolbar can do. Every one is optional: a caller that has not
+ *  wired an action does not get a button that does nothing. */
+export type ThreadActions = {
     onReply?: (message: Message, all: boolean) => void;
     onForward?: (message: Message) => void;
+    onArchive?: () => void;
+    onTrash?: () => void;
+    onMarkUnread?: () => void;
+    onFlag?: (flagged: boolean) => void;
+    /** True when the thread carries `$flagged`, for the star's pressed state. */
+    flagged?: boolean;
+    /** Set while an action is in flight, so it cannot be pressed twice. */
+    busy?: boolean;
+};
+export type ThreadViewProps = ThreadActions & {
+    thread: ThreadDetail | undefined;
+    loading?: boolean;
     /** 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, onDownload, 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,37 +1,104 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Empty, Icon, Identity, Menu, ScrollArea } from '@wtfalch/design';
-import { useState } from 'react';
-export function ThreadView({ thread, loading = false, onReply, onForward, onDownload, className, }) {
-    if (loading && !thread)
-        return _jsx("p", { className: "message-quiet", children: "Loading\u2026" });
+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, 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 }) })] }) })] }));
+    }
     if (!thread || thread.messages.length === 0) {
-        return (_jsx("div", { className: `thread${className ? ` ${className}` : ''}`, children: _jsx(Empty, { icon: "chat", children: "Pick a conversation to read it." }) }));
+        return (_jsx("div", { className: `thread is-empty${className ? ` ${className}` : ''}`, children: _jsxs(Empty, { icon: "mail", children: ["Pick a conversation to read it.", _jsxs("span", { className: "thread-hint", children: [_jsx("kbd", { children: "\u2191" }), " ", _jsx("kbd", { children: "\u2193" }), " to move, ", _jsx("kbd", { children: "\u2318K" }), " for anywhere else"] })] }) }));
     }
     const last = thread.messages.length - 1;
-    return (_jsxs("div", { className: `thread${className ? ` ${className}` : ''}`, children: [_jsxs("header", { className: "thread-head", children: [_jsx("h2", { className: "thread-title", children: thread.subject || '(no subject)' }), _jsx("p", { className: "thread-meta", children: thread.messages.length === 1 ? '1 message' : `${thread.messages.length} messages` })] }), _jsx(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))) }) })] }));
+    const newest = thread.messages[last];
+    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, 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
+ *  this is a bare span whose only job is to own the `title`. */
+function Hint({ says, children }) {
+    return (_jsx("span", { className: "thread-tool", title: says, children: children }));
+}
+/**
+ * The actions, in the order they are used.
+ *
+ * Icon-only, because a row of six labelled buttons is wider than the pane at
+ * the width this has to survive -- and every one carries an `aria-label` and
+ * a `title`, which is the trade an icon-only control has to make. The
+ * keyboard letter goes in the `title`: that is where somebody looks when they
+ * are wondering whether there is a faster way.
+ *
+ * Not the design system's `Tooltip`, which is an explainer -- its trigger is
+ * a question mark and its child is the tip. Wrapping a button in it makes the
+ * button the tip text and puts a "?" on the toolbar, which is exactly what
+ * the first version of this did.
+ *
+ * The `title` sits on a wrapping span rather than the button, because the
+ * system's `Button` types its props off React Aria's and `title` is not
+ * among them. Hovering the button hovers the span, so the hint appears
+ * either way.
+ */
+function Toolbar({ message, onReply, onForward, onArchive, onTrash, onMarkUnread, onFlag, flagged, busy, }) {
+    if (!message)
+        return null;
+    /* Reply all lives here rather than on the bar. It has no glyph that says
+       "all" -- the speech bubble it briefly had reads as "chat" everywhere else
+       in the system -- and a toolbar of two arrows that plainly mean reply and
+       forward is worth more than a third that has to be guessed at. It is also
+       under the message as a word, which is where it is actually used. */
+    const overflow = [
+        ...(onReply
+            ? [
+                {
+                    id: 'reply-all',
+                    label: 'Reply all',
+                    icon: 'reply',
+                    shortcut: 'A',
+                    onAction: () => onReply(message, true),
+                },
+            ]
+            : []),
+        ...(onMarkUnread
+            ? [
+                {
+                    id: 'unread',
+                    label: 'Mark unread',
+                    icon: 'mail',
+                    shortcut: 'U',
+                    onAction: 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. */
+    useEffect(() => setOpen(defaultOpen), [defaultOpen]);
     const sender = message.from[0];
     const when = new Date(message.sentAt ?? message.receivedAt);
-    return (_jsxs("article", { className: `message${open ? ' open' : ''}`, children: [_jsxs("header", { className: "message-head", children: [_jsxs("button", { type: "button", className: "message-toggle", onClick: () => setOpen((was) => !was), "aria-expanded": open, children: [sender ? (_jsx(Identity, { name: sender.name, address: sender.email, kind: open ? 'full' : 'line' })) : (_jsx("span", { className: "message-nobody", children: "Unknown sender" })), _jsx("time", { className: "message-when", dateTime: when.toISOString(), children: when.toLocaleString('en-GB', {
-                                    day: 'numeric',
-                                    month: 'short',
-                                    hour: '2-digit',
-                                    minute: '2-digit',
-                                }) })] }), open && (onReply || onForward) && (_jsx(Menu, { label: "Message actions", trigger: _jsx(Button, { kind: "ghost", "aria-label": "Message actions", children: _jsx(Icon, { name: "settings" }) }), items: [
+    return (_jsxs("article", { className: `message${open ? ' open' : ''}`, children: [_jsxs("header", { className: "message-head", children: [_jsxs("button", { type: "button", className: "message-toggle", onClick: () => setOpen((was) => !was), "aria-expanded": open, children: [sender ? (_jsx(Identity, { name: sender.name, address: sender.email, kind: open ? 'full' : 'line' })) : (_jsx("span", { className: "message-nobody", children: "Unknown sender" })), !open && _jsx("span", { className: "message-peek", children: message.preview }), _jsxs("span", { className: "message-aside", children: [message.attachments.some((file) => file.disposition !== 'inline') && (_jsx(Icon, { name: "paperclip", size: 13, title: "Has an attachment" })), _jsx("time", { className: "message-when", dateTime: when.toISOString(), children: when.toLocaleString('en-GB', {
+                                            day: 'numeric',
+                                            month: 'short',
+                                            hour: '2-digit',
+                                            minute: '2-digit',
+                                        }) })] })] }), open && (onReply || onForward) && (_jsx(Menu, { label: "Message actions", placement: "bottom end", trigger: _jsx(Button, { kind: "ghost", iconOnly: true, "aria-label": "Message actions", children: _jsx(Icon, { name: "more" }) }), items: [
                             ...(onReply
                                 ? [
                                     {
                                         id: 'reply',
                                         label: 'Reply',
-                                        shortcut: 'R',
+                                        icon: 'reply',
                                         onAction: () => onReply(message, false),
                                     },
                                     {
                                         id: 'reply-all',
                                         label: 'Reply all',
-                                        shortcut: '⇧R',
+                                        icon: 'chat',
                                         onAction: () => onReply(message, true),
                                     },
                                 ]
@@ -41,7 +108,7 @@ function MessageCard({ message, defaultOpen, onReply, onForward, onDownload, })
                                     {
                                         id: 'forward',
                                         label: 'Forward',
-                                        shortcut: 'F',
+                                        icon: 'forward',
                                         onAction: () => onForward(message),
                                     },
                                 ]
@@ -52,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: "file", 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(', ') })] }));
@@ -68,7 +138,7 @@ function Recipients({ message }) {
  */
 function HtmlNotice({ html }) {
     const [shown, setShown] = useState(false);
-    return (_jsxs("div", { className: "message-html", children: [_jsx("p", { className: "message-quiet", children: "This message has an HTML body and no plain-text one. It is not rendered here: a mail client that puts a stranger's markup into its own page is one script tag from being read by them." }), _jsx(Button, { kind: "ghost", onClick: () => setShown((was) => !was), children: shown ? 'Hide the source' : 'Show the source' }), shown && _jsx("pre", { className: "message-source", children: html })] }));
+    return (_jsxs("div", { className: "message-html", children: [_jsx("p", { className: "message-quiet", children: "This message has an HTML body and no plain-text one. It is not rendered here: a mail client that puts a stranger's markup into its own page is one script tag from being read by them." }), _jsx(Button, { kind: "ghost", size: "sm", onClick: () => setShown((was) => !was), children: shown ? 'Hide the source' : 'Show the source' }), shown && _jsx("pre", { className: "message-source", children: html })] }));
 }
 /** Bytes, the way a mail client says them. */
 export function bytes(size) {

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

@@ -6,7 +6,7 @@
  * and reused by an application with its own layout. `Mail` is the one piece
  * that holds state and calls the hooks.
  *
- * On `@wtfalch/design` 0.4.0 and `@wtfalch/mail`. Import `@wtfalch/mail/mail.css`
+ * On `@wtfalch/design` 0.5.0 and `@wtfalch/mail`. Import `@wtfalch/mail/mail.css`
  * after the design stylesheet.
  */
 export { MailProvider, useMailClient, useOptionalMailClient } from './context.tsx';
@@ -14,11 +14,14 @@ export { useIdentities, useMailboxes, usePush, useThread, useThreads, } from './
 export type { Resource, ThreadsQuery } from './hooks.ts';
 export { MailboxTree, flatMailboxes, orderForReading } from './MailboxTree.tsx';
 export type { MailboxTreeProps } from './MailboxTree.tsx';
-export { ThreadList, shortTime } from './ThreadList.tsx';
+export { ThreadList, dayGroup, shortTime } from './ThreadList.tsx';
 export type { ThreadListProps } from './ThreadList.tsx';
 export { ThreadView, bytes } from './ThreadView.tsx';
-export type { ThreadViewProps } from './ThreadView.tsx';
+export type { ThreadActions, ThreadViewProps } from './ThreadView.tsx';
 export { Composer, parseAddresses } from './Composer.tsx';
 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

@@ -6,13 +6,15 @@
  * and reused by an application with its own layout. `Mail` is the one piece
  * that holds state and calls the hooks.
  *
- * On `@wtfalch/design` 0.4.0 and `@wtfalch/mail`. Import `@wtfalch/mail/mail.css`
+ * On `@wtfalch/design` 0.5.0 and `@wtfalch/mail`. Import `@wtfalch/mail/mail.css`
  * after the design stylesheet.
  */
 export { MailProvider, useMailClient, useOptionalMailClient } from "./context.js";
 export { useIdentities, useMailboxes, usePush, useThread, useThreads, } from "./hooks.js";
 export { MailboxTree, flatMailboxes, orderForReading } from "./MailboxTree.js";
-export { ThreadList, shortTime } from "./ThreadList.js";
+export { ThreadList, dayGroup, shortTime } from "./ThreadList.js";
 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/layout.d.ts

@@ -0,0 +1,31 @@
+/**
+ * How many panes fit.
+ *
+ * A mail client is three columns on a desk and one column on a phone, and the
+ * difference is not a matter of styling: at one column the list and the
+ * message are the *same* space, so which of them is on screen becomes state
+ * the shell has to hold. CSS can narrow a column and cannot answer that, which
+ * is why this is a hook and not a media query in the stylesheet.
+ *
+ * Three, not a continuum:
+ *
+ * - `wide` — mailboxes, list and message side by side. Selecting a
+ *   conversation reveals it; there is nothing to navigate to.
+ * - `medium` — the mailboxes collapse to a rail of icons, and the list and
+ *   the message share what is left. Below about 1150px a 3-column layout puts
+ *   the reading measure under 45 characters, which is where prose stops being
+ *   readable, and the mailbox names are the least valuable of the three.
+ * - `narrow` — one at a time, with the mailboxes in a drawer. Measured at
+ *   860px, where the list's two-line row can no longer hold a sender, a time
+ *   and a subject without the subject truncating to nothing.
+ */
+export type Panes = 'wide' | 'medium' | 'narrow';
+/**
+ * The current layout, updated as the window changes.
+ *
+ * `useState` with an initialiser rather than an effect that sets state on
+ * mount: the effect version renders `wide` once and then corrects itself,
+ * which on a phone is a visible flash of a three-column layout in a
+ * 390px-wide window.
+ */
+export declare function usePanes(): Panes;

package/dist/mailbox/react/layout.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+const WIDE = '(min-width: 1150px)';
+const MEDIUM = '(min-width: 860px)';
+function read() {
+    /* Server rendering, and jsdom without the shim, both land here. `wide` is
+       the right default for both: it is the layout with no hidden state, so a
+       render that never gets a second chance still shows everything. */
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+        return 'wide';
+    if (window.matchMedia(WIDE).matches)
+        return 'wide';
+    if (window.matchMedia(MEDIUM).matches)
+        return 'medium';
+    return 'narrow';
+}
+/**
+ * The current layout, updated as the window changes.
+ *
+ * `useState` with an initialiser rather than an effect that sets state on
+ * mount: the effect version renders `wide` once and then corrects itself,
+ * which on a phone is a visible flash of a three-column layout in a
+ * 390px-wide window.
+ */
+export function usePanes() {
+    const [panes, setPanes] = useState(read);
+    useEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        const queries = [window.matchMedia(WIDE), window.matchMedia(MEDIUM)];
+        const update = () => setPanes(read());
+        for (const query of queries)
+            query.addEventListener('change', update);
+        // Once on mount as well: the window can have been resized between the
+        // initialiser running and the listeners being attached.
+        update();
+        return () => {
+            for (const query of queries)
+                query.removeEventListener('change', update);
+        };
+    }, []);
+    return panes;
+}

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;