@wtfalch/design 0.3.2 → 0.5.0

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,66 @@
+/**
+ * A box that scrolls, and says so.
+ *
+ * **A list that overflows with no mark at its edge reads as a list that ended.**
+ * That is the bug this exists to stop. A thread list showing eleven of four
+ * hundred conversations looks exactly like a mailbox with eleven conversations
+ * in it: the content runs to the bottom edge of its box and stops, and on a
+ * trackpad there is no scrollbar to contradict it. People do not scroll things
+ * they have no reason to believe continue.
+ *
+ * So the edges are drawn. A soft fade appears at whichever end has more behind
+ * it and goes when that end is reached, which means the affordance is *absent*
+ * exactly when the list really has ended -- the one case where a permanent
+ * gradient would lie.
+ *
+ * **The scrollbar is the theme's, not the platform's.** Same argument as
+ * `Select`: an overlay scrollbar drawn by macOS in the platform's grey, over a
+ * Night panel, is the one part of the surface the design does not reach. It is
+ * also 15px of white on Windows, which is the widest single element in a mail
+ * sidebar. `scrollbar-color` covers Firefox and `::-webkit-scrollbar` the rest;
+ * both are in `scrollarea.css`.
+ *
+ * **`overscroll-behavior: contain`**, because a scroll that reaches the end of
+ * a pane and carries on into the page behind it is how a thread list scrolls
+ * the whole application away. In a split view that is disorienting rather than
+ * merely untidy.
+ *
+ * **Pad the content, not the box.** Padding on the scroller itself insets the
+ * fade and the scrollbar along with everything else, so the gradient stops
+ * short of the sides and the bar floats in from the edge; and vertical padding
+ * on a box whose rows already have their own reads as extra space above the
+ * first item, because it is. Put the inset on the child.
+ *
+ * Not a virtualiser. Ten thousand rows still cost ten thousand nodes; this
+ * decides how the box behaves, not how much is in it.
+ */
+export interface Props {
+    /** Which way it scrolls. `y` is the common case and the default; `both` is
+     *  for a table too wide as well as too tall. */
+    axis?: 'x' | 'y' | 'both';
+    /**
+     * Draw the fade at a vertical edge with more behind it. On by default.
+     *
+     * Vertical only: the misreading is "the list ended", which is a claim about
+     * the bottom edge. A word sliced in half at the right edge is already its
+     * own affordance, so `axis="x"` draws no fade whatever this says.
+     *
+     * Turn it off where the content ends in something solid -- a sticky footer,
+     * cards on a coloured ground -- because the gradient is mixed towards
+     * `--panel` and over anything else it reads as a smudge.
+     */
+    fade?: boolean;
+    /** Removes the visible scrollbar and keeps every other behaviour, for a
+     *  strip that is scrolled by a control beside it rather than by dragging. */
+    hideBar?: boolean;
+    className?: string;
+    children: React.ReactNode;
+    /** The scrolling element, for a caller that has to drive it -- scrolling a
+     *  newly selected row into view, or restoring a position. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Names the region when it is one a screen reader should be able to reach
+     *  directly. A scroll box that is keyboard-focusable owes an accessible
+     *  name; one that is not owes nothing, so this is optional on purpose. */
+    label?: string;
+}
+export default function ScrollArea({ axis, fade, hideBar, className, children, ref, label, }: Props): import("react").JSX.Element;

package/dist/components/ScrollArea.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from 'react';
+export default function ScrollArea({ axis = 'y', fade = true, hideBar = false, className, children, ref, label, }) {
+    const own = useRef(null);
+    /* The edge state lives in data attributes rather than React state.
+       
+       This runs on every scroll frame. Setting state there re-renders the
+       subtree -- which, for the thing this is usually wrapped around, is the
+       whole list -- sixty times a second while a finger is on the trackpad.
+       Writing two attributes touches one element and never re-renders, and CSS
+       reads them. */
+    const measure = useCallback(() => {
+        const el = own.current;
+        if (!el)
+            return;
+        const room = 1;
+        el.dataset.top = String(el.scrollTop > room);
+        el.dataset.bottom = String(el.scrollTop + el.clientHeight < el.scrollHeight - room);
+        el.dataset.left = String(el.scrollLeft > room);
+        el.dataset.right = String(el.scrollLeft + el.clientWidth < el.scrollWidth - room);
+    }, []);
+    useEffect(() => {
+        const el = own.current;
+        if (!el)
+            return;
+        measure();
+        el.addEventListener('scroll', measure, { passive: true });
+        /* Content arriving is the case a scroll listener alone misses: a mailbox
+           that loads its second page grows the box without anyone scrolling, and
+           the bottom fade has to appear for content nobody has touched. */
+        const resize = new ResizeObserver(measure);
+        resize.observe(el);
+        for (const child of Array.from(el.children))
+            resize.observe(child);
+        return () => {
+            el.removeEventListener('scroll', measure);
+            resize.disconnect();
+        };
+    }, [measure]);
+    return (_jsx("div", { ref: (node) => {
+            own.current = node;
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: `scroller axis-${axis}${fade ? ' faded' : ''}${hideBar ? ' barless' : ''}${className ? ` ${className}` : ''}`, ...(label ? { tabIndex: 0, role: 'region', 'aria-label': label } : {}), children: children }));
+}

package/dist/components/SplitPane.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Two panes and a handle between them.
+ *
+ * A mail client is a list beside a message, a forum is threads beside a
+ * thread, and in both the right width depends on the reader rather than on us:
+ * a wide list to scan senders, a narrow one to give the message room. So it is
+ * theirs to set, and it has to survive a reload or setting it was a waste of
+ * their time.
+ *
+ * **The handle is a control, not a decoration, and that is the part everybody
+ * skips.** Nearly every split view on the web is a `<div>` with a mousedown
+ * listener: no role, no tab stop, no way to move it without a pointer. The
+ * ARIA pattern for this is `separator` with a value, which makes it a real
+ * widget -- focusable, announced as "splitter, 30 percent", and moved with the
+ * arrow keys. Home and End take it to its limits, and Enter collapses the
+ * first pane and restores it, which is the thing a mouse does by dragging to
+ * the edge.
+ *
+ * **The size is a percentage of the container**, not pixels, because the
+ * window is resized more often than the split is. A pixel width chosen on a
+ * wide monitor is most of a laptop screen.
+ *
+ * **The panes are `min-width: 0`.** Without it a flex child refuses to shrink
+ * below the intrinsic width of its content, so one long unbroken subject line
+ * silently pins the list open and the handle stops halfway with no explanation.
+ * That is in `splitpane.css` and it is the reason the file exists.
+ */
+export interface Props {
+    /** Exactly two: the first pane and the second. */
+    children: [React.ReactNode, React.ReactNode];
+    /** `row` puts them side by side with a vertical handle. `column` stacks
+     *  them. */
+    direction?: 'row' | 'column';
+    /** The first pane's share, as a percentage, before anyone moves it. */
+    defaultSize?: number;
+    /** How small and how large the first pane may get, as percentages. The
+     *  limits are the design's: a list narrower than its own row content is not
+     *  a smaller list, it is a broken one. */
+    min?: number;
+    max?: number;
+    /**
+     * Remember the size under this key, per browser.
+     *
+     * Without it the handle resets on every reload, which makes moving it feel
+     * like it did not work. Storage can throw -- a private window, a browser set
+     * to block site data -- so a failure to remember is silent and the default
+     * stands.
+     */
+    storageKey?: string;
+    /** Names the handle. "Sidebar width", not "splitter": the name is announced
+     *  and should say what moving it does. */
+    label: string;
+    /** Called as the handle moves, with the first pane's percentage. */
+    onResize?: (size: number) => void;
+    className?: string;
+}
+export default function SplitPane({ children, direction, defaultSize, min, max, storageKey, label, onResize, className, }: Props): import("react").JSX.Element;

package/dist/components/SplitPane.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function remembered(key, fallback) {
+    if (!key)
+        return fallback;
+    try {
+        const stored = window.localStorage.getItem(`design.split.${key}`);
+        const parsed = stored === null ? Number.NaN : Number.parseFloat(stored);
+        return Number.isFinite(parsed) ? parsed : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+export default function SplitPane({ children, direction = 'row', defaultSize = 30, min = 15, max = 70, storageKey, label, onResize, className, }) {
+    const [first, second] = children;
+    const frame = useRef(null);
+    const firstPaneId = useId();
+    const [size, setSize] = useState(() => clamp(remembered(storageKey, defaultSize), min, max));
+    /* Where the pane was before Enter collapsed it, so Enter puts it back where
+       it was rather than at the default. Collapsing and restoring should be the
+       same gesture undone, not a reset. */
+    const restore = useRef(size);
+    const move = useCallback((next) => {
+        const bounded = clamp(next, min, max);
+        setSize(bounded);
+        onResize?.(bounded);
+        if (!storageKey)
+            return;
+        try {
+            window.localStorage.setItem(`design.split.${storageKey}`, String(bounded));
+        }
+        catch {
+            // A browser that will not remember is not a reason to refuse to resize.
+        }
+    }, [min, max, onResize, storageKey]);
+    /* Pointer events rather than mouse events, so a pen and a touch drag work
+       with the same code; and pointer capture, so a drag that leaves the window
+       -- which is what dragging to the edge *is* -- keeps sending moves instead
+       of freezing the handle where the cursor left. */
+    const onPointerDown = (event) => {
+        if (event.button !== 0)
+            return;
+        const box = frame.current?.getBoundingClientRect();
+        if (!box)
+            return;
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const onMove = (e) => {
+            const along = direction === 'row' ? e.clientX - box.left : e.clientY - box.top;
+            const total = direction === 'row' ? box.width : box.height;
+            if (total > 0)
+                move((along / total) * 100);
+        };
+        const onUp = (e) => {
+            handle.releasePointerCapture(e.pointerId);
+            handle.removeEventListener('pointermove', onMove);
+            handle.removeEventListener('pointerup', onUp);
+            handle.removeEventListener('pointercancel', onUp);
+            document.body.classList.remove('splitting');
+        };
+        handle.addEventListener('pointermove', onMove);
+        handle.addEventListener('pointerup', onUp);
+        handle.addEventListener('pointercancel', onUp);
+        /* The cursor is set on the body for the duration, because a drag that
+           passes over a text pane otherwise flickers to an I-beam the whole way
+           across. */
+        document.body.classList.add('splitting');
+    };
+    useEffect(() => () => document.body.classList.remove('splitting'), []);
+    const onKeyDown = (event) => {
+        const back = direction === 'row' ? 'ArrowLeft' : 'ArrowUp';
+        const forward = direction === 'row' ? 'ArrowRight' : 'ArrowDown';
+        const step = event.shiftKey ? 10 : 2;
+        if (event.key === back)
+            move(size - step);
+        else if (event.key === forward)
+            move(size + step);
+        else if (event.key === 'Home')
+            move(min);
+        else if (event.key === 'End')
+            move(max);
+        else if (event.key === 'Enter') {
+            if (size <= min)
+                move(restore.current);
+            else {
+                restore.current = size;
+                move(min);
+            }
+        }
+        else
+            return;
+        event.preventDefault();
+    };
+    return (_jsxs("div", { ref: frame, className: `split dir-${direction}${className ? ` ${className}` : ''}`, style: { '--split': `${size}%` }, children: [_jsx("div", { className: "split-pane split-first", id: firstPaneId, children: first }), _jsx("div", { role: "separator", tabIndex: 0, "aria-label": label, "aria-orientation": direction === 'row' ? 'vertical' : 'horizontal', "aria-controls": firstPaneId, "aria-valuenow": Math.round(size), "aria-valuemin": min, "aria-valuemax": max, className: "split-handle", onPointerDown: onPointerDown, onKeyDown: onKeyDown, 
+                /* Back to where it started. A drag has no undo, and the size is
+                   remembered, so without this a mis-drag is permanent until you get it
+                   right by hand. */
+                onDoubleClick: () => move(defaultSize), children: _jsx("span", { className: "split-grip", "aria-hidden": "true" }) }), _jsx("div", { className: "split-pane split-second", children: second })] }));
+}

package/dist/components/Toggle.js

@@ -65,6 +65,16 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
        is stopped at the track a tap on the knob no longer reaches the input by
        itself (measured, in `keyboard.spec.ts`).
   
+       **The knob goes where the pointer is, not where the pointer has been.**
+       This measured the drag as a delta from the knob's resting side, which made
+       a click that drifted a few pixels answer the opposite of the click: press
+       the far side of an off switch, wander seven pixels, and the delta is about
+       zero, so it resolves to off -- it refuses the very thing you pressed. And
+       it refuses *silently*, because the knob is back where it started and
+       nothing on screen says a gesture was even seen. Reading the pointer's
+       position on the track instead means a press and a press-with-a-wobble give
+       the same answer, which is the one the pointer is over.
+  
        `onChange` is called once per gesture, or not at all if the knob was put
        back where it started -- a consumer that saves on change must not see a
        drag as two saves. The keyboard is untouched: the input is still the
@@ -126,9 +136,16 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
     const [held, setHeld] = useState(false);
     const gesture = useRef(null);
     const swallowClick = useRef(false);
-    const position = (track, g, x) => {
-        const travel = track.clientWidth - KNOB[size] - 4;
-        return Math.min(1, Math.max(0, g.from + (x - g.startX) / travel));
+    /** Where the knob would sit, 0 to 1, if its centre were under `x`. The
+     *  2px and the knob's width are the inset `toggle.css` draws it at:
+     *  `left: calc(2px + var(--knob-x) * var(--knob-travel))`. */
+    const position = (track, x) => {
+        const box = track.getBoundingClientRect();
+        const knobWidth = KNOB[size];
+        const travel = box.width - knobWidth - 4;
+        if (travel <= 0)
+            return 0;
+        return Math.min(1, Math.max(0, (x - box.left - 2 - knobWidth / 2) / travel));
     };
     return (_jsxs(Switch, { ref: rowRef, className: `switch-row switch-${size}${className ? ` ${className}` : ''}`, isSelected: shown, onChange: commit, isDisabled: disabled, 
         /* Read-only, not disabled, while a request is out: focus stays where it
@@ -143,7 +160,6 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
                         id: e.pointerId,
                         startX: e.clientX,
                         startY: e.clientY,
-                        from: shown ? 1 : 0,
                         moved: false,
                     };
                     setHeld(true);
@@ -154,16 +170,15 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
                     if (!g.moved) {
                         const dx = e.clientX - g.startX;
                         const dy = e.clientY - g.startY;
-                        /* Mostly sideways and past the slop, or it is still a press. A
-                           drag begins where the threshold was crossed, not where the
-                           pointer first landed, so the knob starts from rest instead of
-                           jumping the slop's width the moment it engages. */
+                        /* Mostly sideways and past the slop, or it is still a press. The
+                           slop is what keeps a click a click: under it nothing is drawn
+                           and nothing moves, so a hand that is not quite still does not
+                           turn a press into a drag. */
                         if (Math.abs(dx) < SLOP || Math.abs(dx) <= Math.abs(dy))
                             return;
                         g.moved = true;
-                        g.startX = e.clientX;
                     }
-                    setKnob(position(e.currentTarget, g, e.clientX));
+                    setKnob(position(e.currentTarget, e.clientX));
                 }, onPointerUp: (e) => {
                     const g = gesture.current;
                     if (!g || e.pointerId !== g.id)
@@ -172,7 +187,7 @@ export default function Toggle({ label, hint, checked, onChange, disabled, said,
                     setHeld(false);
                     setKnob(null);
                     swallowClick.current = true;
-                    const on = g.moved ? position(e.currentTarget, g, e.clientX) > 0.5 : !shown;
+                    const on = g.moved ? position(e.currentTarget, e.clientX) > 0.5 : !shown;
                     if (on !== shown)
                         commit(on);
                 }, onPointerCancel: () => {

package/dist/components/iconNames.d.ts

@@ -14,5 +14,5 @@
  * derived from this, so the type, the glyph table and the gallery cannot
  * disagree.
  */
-export declare const ICON_NAMES: readonly ["chat", "settings", "refresh", "minimize", "code", "wifi", "wifi-off", "check", "close", "info", "warning", "error", "expand", "download", "image", "bolt", "speaker", "mic", "back", "spinner", "folder", "book", "eye", "eye-off", "palette", "stars", "wrench", "cloud", "file"];
+export declare const ICON_NAMES: readonly ["chat", "settings", "refresh", "minimize", "code", "wifi", "wifi-off", "check", "close", "info", "warning", "error", "expand", "download", "image", "bolt", "speaker", "mic", "back", "spinner", "folder", "book", "eye", "eye-off", "palette", "stars", "wrench", "cloud", "file", "mail", "mail-open", "pen", "send", "trash", "paperclip", "star", "star-filled", "search", "more", "menu", "reply", "forward"];
 export type IconName = (typeof ICON_NAMES)[number];

package/dist/components/iconNames.js

@@ -57,4 +57,29 @@ export const ICON_NAMES = [
     // is the wrong noun: you are handing over one file, not opening a place
     // that holds several.
     'file',
+    // A mail client's vocabulary, added for `@wtfalch/email`'s mailbox. The set
+    // had no noun for a message, a folder to file one in, or any of the four
+    // things you do to one, so the mailbox was drawing Inbox with `chat`, Sent
+    // with `download` and Deleted Items with `close` -- three right shapes for
+    // three wrong words. Measured the same way as the rest; see the `Glyph`
+    // docstring in `Icon.tsx`.
+    'mail',
+    'mail-open',
+    'pen',
+    'send',
+    'trash',
+    'paperclip',
+    // `star` is a rating or a flagged message; `stars` above it is the
+    // sparkles, and means generated. One letter apart and unrelated, which is
+    // worth the comment: reach for the wrong one and it still compiles.
+    'star',
+    'star-filled',
+    'search',
+    'more',
+    'menu',
+    // Diagonal arrows, which is what every minimal set draws reply and forward
+    // as. Pepicons has no curved corner arrow, and a horizontal `arrow-left`
+    // reads as going back rather than answering.
+    'reply',
+    'forward',
 ];

package/dist/components/icons.js

@@ -250,4 +250,101 @@ export const ICONS = {
             'M11 3h-1a4 4 0 0 0-3.874 3H6a4 4 0 1 0 0 8h8a4 4 0 0 0 .899-7.899A4 4 0 0 0 11 3M6.901 7l.193-.75A3 3 0 0 1 10 4h1c1.405 0 2.614.975 2.924 2.325l.14.61l.61.141A3.001 3.001 0 0 1 14 13H6a3 3 0 1 1 0-6z',
         ],
     },
+    /* The mail set. Every one of these is a Pepicons Pencil glyph measured the
+       way the paragraph above describes: bounding box from `getBBox()`,
+       re-centred, grown to 78% fill, magnification clamped to 0.85x-1.45x of
+       its own 20-unit grid. `reply` and `forward` sit on the upper clamp, as
+       `close` does -- small drawings that would otherwise come out at twice
+       the ink weight of their neighbours. */
+    mail: {
+        view: '0.38 0.38 19.23 19.23',
+        d: [
+            'M17 4H3a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h14a.5.5 0 0 0 .5-.5v-11A.5.5 0 0 0 17 4M3.5 15V5h13v10z',
+            'm17.324 4.88l-7.045 6a.5.5 0 0 1-.65-.001l-6.956-6A.5.5 0 0 1 3 4h14a.5.5 0 0 1 .324.88M15.642 5H4.345l5.612 4.841z',
+        ],
+    },
+    'mail-open': {
+        view: '-0.26 -0.26 20.51 20.51',
+        d: [
+            'M2.5 8a.5.5 0 0 1 .5.5V17h14V8.5a.5.5 0 0 1 1 0v9a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5',
+            'M3 5.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v4.67a.5.5 0 0 1-.223.416l-6.5 4.33a.5.5 0 0 1-.554 0l-6.5-4.33A.5.5 0 0 1 3 10.17zM4 6v3.902l6 3.997l6-3.997V6z',
+            'M9.723 2.084a.5.5 0 0 1 .554 0l4.5 3l-.554.832L10 3.101L5.777 5.916l-.554-.832zm7.131 5.062l1 1l-.708.708l-1-1zm-13 .708l-1 1l-.708-.708l1-1zM6.75 8A.25.25 0 0 1 7 7.75h6a.25.25 0 1 1 0 .5H7A.25.25 0 0 1 6.75 8m.5 2a.25.25 0 0 1 .25-.25h5a.25.25 0 1 1 0 .5h-5a.25.25 0 0 1-.25-.25',
+        ],
+    },
+    pen: {
+        view: '1.02 -0.92 20.09 20.09',
+        d: [
+            'M3.944 11.79a.5.5 0 0 1 .141-.277L14.163 1.435a.5.5 0 0 1 .707 0l3.89 3.89a.5.5 0 0 1 0 .706L8.68 16.11a.5.5 0 0 1-.277.14l-4.595.706a.5.5 0 0 1-.57-.57zm.964.314l-.577 3.76l3.759-.578l9.609-9.608l-3.183-3.182z',
+            'm15.472 8.173l-3.537-3.53l.707-.708l3.536 3.53z',
+        ],
+    },
+    send: {
+        view: '-2.09 -1.79 21.9 21.9',
+        d: [
+            'M.874 7.454L8.697 9.5l2.803 7.868a.5.5 0 0 0 .95-.026l4.746-16.085a.5.5 0 0 0-.655-.61L.826 6.502a.5.5 0 0 0 .048.952m1.783-.567l13.296-4.954l-4.027 13.652l-2.376-6.67a.5.5 0 0 0-.344-.315z',
+            'm16 1.293l.707.707L9 9.707L8.293 9z',
+        ],
+    },
+    trash: {
+        view: '0.74 1.01 18.52 18.52',
+        d: [
+            'M8.5 14.999a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm2 0a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 1 0zm-1-10.5h-3a1.501 1.501 0 0 1 3-.001',
+            'M4.5 4.999a.5.5 0 1 1 0-1h11a.5.5 0 0 1 0 1z',
+            'M14.5 5.5h-9A.5.5 0 0 0 5 6v11a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5M6 16.5v-10h8v10z',
+        ],
+    },
+    paperclip: {
+        view: '-0.99 -0.41 21.47 21.47',
+        d: [
+            'M9.455 3.188a4 4 0 0 1 5.79 5.521l-5.349 5.608a2.25 2.25 0 0 1-3.258-3.106l4.485-4.706a.5.5 0 1 1 .724.69L7.362 11.9a1.25 1.25 0 0 0 1.81 1.726l5.349-5.608a3 3 0 1 0-4.342-4.141L5.348 8.944a.5.5 0 1 1-.724-.69z',
+            'M4.463 16.391c-.439-.419-.824-1.056-1.145-1.758c-.71-1.552-.17-3.383 1.097-4.712L8.8 5.325a.5.5 0 0 0-.724-.69L3.692 9.231c-1.455 1.526-2.214 3.783-1.284 5.818c.342.747.791 1.518 1.365 2.066c.566.54 1.342.947 2.094 1.251c2.095.849 4.337-.039 5.791-1.593l5.692-6.081a.5.5 0 1 0-.73-.684l-5.692 6.082c-1.267 1.354-3.089 1.996-4.686 1.35c-.704-.286-1.346-.636-1.779-1.049',
+        ],
+    },
+    star: {
+        view: '-0.25 -0.51 20.51 20.51',
+        d: [
+            'M10 2a.5.5 0 0 1 .435.253l2.425 4.274l4.745 1.023a.5.5 0 0 1 .27.82l-3.253 3.667l.51 4.911a.5.5 0 0 1-.703.507L10 15.448l-4.429 2.007a.5.5 0 0 1-.704-.507l.51-4.91l-3.25-3.668a.5.5 0 0 1 .269-.82L7.14 6.527l2.425-4.274A.5.5 0 0 1 10 2m0 1.513L7.9 7.215a.5.5 0 0 1-.33.242l-4.128.89l2.83 3.191a.5.5 0 0 1 .123.384l-.443 4.263l3.842-1.74a.5.5 0 0 1 .412 0l3.842 1.74l-.443-4.263a.5.5 0 0 1 .123-.384l2.83-3.191l-4.128-.89a.5.5 0 0 1-.33-.242z',
+        ],
+    },
+    'star-filled': {
+        view: '-1.03 -1.3 22.07 22.07',
+        d: [
+            'm10 15.97l-4.295 1.915a1 1 0 0 1-1.402-1.018l.494-4.677L1.65 8.698a1 1 0 0 1 .535-1.647l4.6-.976L9.134 2a1 1 0 0 1 1.732 0l2.35 4.074l4.6.976a1 1 0 0 1 .535 1.647l-3.148 3.494l.494 4.676a1 1 0 0 1-1.402 1.018z',
+        ],
+    },
+    search: {
+        view: '1.62 1.66 15.87 15.87',
+        d: [
+            'M4.828 4.828A5 5 0 1 0 11.9 11.9a5 5 0 0 0-7.07-7.07m6.364 6.364a4 4 0 1 1-5.656-5.657a4 4 0 0 1 5.656 5.657',
+            'M11.192 12.627a1 1 0 0 1 1.415-1.414l2.828 2.829a1 1 0 1 1-1.414 1.414z',
+        ],
+    },
+    more: {
+        view: '2.24 2.24 16.03 16.03',
+        d: [
+            'M14 10.25a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0m-5 0a1.25 1.25 0 1 1 2.5 0a1.25 1.25 0 0 1-2.5 0m-5 0a1.249 1.249 0 1 1 2.5 0a1.25 1.25 0 1 1-2.5 0',
+        ],
+    },
+    menu: {
+        view: '-0.26 0.24 20.51 20.51',
+        d: [
+            'M2 8.5a.5.5 0 0 1 .5-.5h11.308a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5m0 4a.5.5 0 0 1 .5-.5h11.308a.5.5 0 0 1 0 1H2.5a.5.5 0 0 1-.5-.5',
+        ],
+    },
+    reply: {
+        view: '2.87 2.87 13.79 13.79',
+        d: [
+            'M5.948 12.145a.5.5 0 0 1-.453-.543l.471-5.186a.5.5 0 0 1 .996.09l-.471 5.186a.5.5 0 0 1-.543.453',
+            'M12.148 5.945a.5.5 0 0 1-.453.543L6.51 6.96a.5.5 0 0 1-.09-.996l5.185-.472a.5.5 0 0 1 .543.453',
+            'M6.647 6.643a.5.5 0 0 1 .707 0l6.535 6.536a.5.5 0 1 1-.707.707L6.646 7.351a.5.5 0 0 1 0-.708',
+        ],
+    },
+    forward: {
+        view: '3.34 2.87 13.79 13.79',
+        d: [
+            'M7.852 5.952a.5.5 0 0 1 .543-.453l5.186.472a.5.5 0 0 1-.09.996l-5.186-.472a.5.5 0 0 1-.453-.543',
+            'M14.052 12.152a.5.5 0 0 1-.543-.453l-.472-5.185a.5.5 0 0 1 .996-.09l.472 5.185a.5.5 0 0 1-.453.543',
+            'M13.354 6.65a.5.5 0 0 1 0 .708l-6.536 6.535a.5.5 0 0 1-.707-.707l6.535-6.536a.5.5 0 0 1 .707 0',
+        ],
+    },
 };

package/dist/components/initials.d.ts

@@ -0,0 +1,36 @@
+/**
+ * How an identity disc is drawn: its two letters and its hue.
+ *
+ * **Its own module so `Identity.tsx` stays a Fast Refresh boundary.** A
+ * component module that exports a value beside its component loses the
+ * boundary, and editing it re-runs every importer instead of swapping the
+ * component in place. `iconNames.ts` and `tourMarker.ts` exist for the same
+ * reason.
+ *
+ * Exported from the package as well, because anything else colouring by
+ * sender -- a thread list's left rule, a chart of who writes most -- has to
+ * agree with the discs or the second cue contradicts the first.
+ */
+/**
+ * Up to two initials.
+ *
+ * From the name's first and last word, which is right for "Ada Lovelace" and
+ * for "Ada Byron King Lovelace"; from the address's local part when there is
+ * no name, which is most machine senders. Split on whitespace only --
+ * splitting on punctuation turns "O'Brien" into "OB" and "Smith-Jones" into
+ * "SJ", which are worse than the single letter they replace.
+ */
+export declare function initialsOf(name: string | null | undefined, address: string): string;
+/**
+ * A hue from the address.
+ *
+ * A cheap, stable string hash. Not a cryptographic one and not trying to be:
+ * the requirement is that the same address gives the same number everywhere
+ * and on every machine, which any deterministic function satisfies, and that
+ * neighbouring addresses do not land on the same hue, which multiplying by an
+ * odd prime handles well enough.
+ *
+ * Case- and whitespace-insensitive, because `Ada@Example.com ` and
+ * `ada@example.com` are one person and two colours would say they were two.
+ */
+export declare function hueOf(address: string): number;

package/dist/components/initials.js

@@ -0,0 +1,51 @@
+/**
+ * How an identity disc is drawn: its two letters and its hue.
+ *
+ * **Its own module so `Identity.tsx` stays a Fast Refresh boundary.** A
+ * component module that exports a value beside its component loses the
+ * boundary, and editing it re-runs every importer instead of swapping the
+ * component in place. `iconNames.ts` and `tourMarker.ts` exist for the same
+ * reason.
+ *
+ * Exported from the package as well, because anything else colouring by
+ * sender -- a thread list's left rule, a chart of who writes most -- has to
+ * agree with the discs or the second cue contradicts the first.
+ */
+/**
+ * Up to two initials.
+ *
+ * From the name's first and last word, which is right for "Ada Lovelace" and
+ * for "Ada Byron King Lovelace"; from the address's local part when there is
+ * no name, which is most machine senders. Split on whitespace only --
+ * splitting on punctuation turns "O'Brien" into "OB" and "Smith-Jones" into
+ * "SJ", which are worse than the single letter they replace.
+ */
+export function initialsOf(name, address) {
+    const words = (name ?? '').trim().split(/\s+/).filter(Boolean);
+    if (words.length > 0) {
+        const first = words[0]?.[0] ?? '';
+        const last = words.length > 1 ? (words[words.length - 1]?.[0] ?? '') : '';
+        return (first + last).toUpperCase();
+    }
+    const local = address.split('@')[0] ?? address;
+    return (local[0] ?? '?').toUpperCase();
+}
+/**
+ * A hue from the address.
+ *
+ * A cheap, stable string hash. Not a cryptographic one and not trying to be:
+ * the requirement is that the same address gives the same number everywhere
+ * and on every machine, which any deterministic function satisfies, and that
+ * neighbouring addresses do not land on the same hue, which multiplying by an
+ * odd prime handles well enough.
+ *
+ * Case- and whitespace-insensitive, because `Ada@Example.com ` and
+ * `ada@example.com` are one person and two colours would say they were two.
+ */
+export function hueOf(address) {
+    let hash = 0;
+    for (const character of address.trim().toLowerCase()) {
+        hash = (hash * 31 + (character.codePointAt(0) ?? 0)) % 360;
+    }
+    return hash;
+}

package/dist/components/pageWindow.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Which page buttons a pager draws.
+ *
+ * **Its own module so `Pagination.tsx` stays a Fast Refresh boundary**, the
+ * same rule `iconNames.ts` and `initials.ts` exist under.
+ *
+ * Never more than seven slots, with the first and last always present and a
+ * gap standing in for the run that is elided. A pager that lists twenty-six
+ * pages is wider than the table above it; one that lists only the current
+ * page's neighbours loses the jump to the end, which is the second most
+ * common thing anybody does with one.
+ *
+ * The width is held at seven even near an end, so the row does not change size
+ * as you move through it -- otherwise the button under the cursor shifts
+ * between clicks, which is how somebody lands two pages from where they meant.
+ *
+ * The gap is where the pager puts its "go to page" field, because that is
+ * exactly where the pages you cannot see are. What the gap *does* is the
+ * component's business; this only says where one goes.
+ */
+export declare function pageWindow(current: number, pages: number): (number | 'gap')[];

package/dist/components/pageWindow.js

@@ -0,0 +1,46 @@
+/**
+ * Which page buttons a pager draws.
+ *
+ * **Its own module so `Pagination.tsx` stays a Fast Refresh boundary**, the
+ * same rule `iconNames.ts` and `initials.ts` exist under.
+ *
+ * Never more than seven slots, with the first and last always present and a
+ * gap standing in for the run that is elided. A pager that lists twenty-six
+ * pages is wider than the table above it; one that lists only the current
+ * page's neighbours loses the jump to the end, which is the second most
+ * common thing anybody does with one.
+ *
+ * The width is held at seven even near an end, so the row does not change size
+ * as you move through it -- otherwise the button under the cursor shifts
+ * between clicks, which is how somebody lands two pages from where they meant.
+ *
+ * The gap is where the pager puts its "go to page" field, because that is
+ * exactly where the pages you cannot see are. What the gap *does* is the
+ * component's business; this only says where one goes.
+ */
+export function pageWindow(current, pages) {
+    if (pages <= 7)
+        return Array.from({ length: pages }, (_, i) => i + 1);
+    const near = [current - 1, current, current + 1].filter((p) => p > 1 && p < pages);
+    const slots = new Set([1, ...near, pages]);
+    /* Near an end there is only one gap instead of two, so the run has to be one
+       longer to keep the row at seven. Four rather than three: 1 2 3 4 5 … 26,
+       not 1 2 3 4 … 26, which is six slots and a row that changes width as you
+       leave the first page. */
+    if (current <= 3)
+        for (const p of [2, 3, 4, 5])
+            slots.add(p);
+    if (current >= pages - 2) {
+        for (const p of [pages - 4, pages - 3, pages - 2, pages - 1])
+            slots.add(p);
+    }
+    const out = [];
+    let previous = 0;
+    for (const page of [...slots].filter((p) => p >= 1 && p <= pages).sort((a, b) => a - b)) {
+        if (previous && page - previous > 1)
+            out.push('gap');
+        out.push(page);
+        previous = page;
+    }
+    return out;
+}