@wtfalch/design 0.3.1 → 0.4.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/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;
+}

package/dist/index.d.ts

@@ -26,26 +26,52 @@ export type { Props as ButtonProps } from './components/Button.js';
 export { default as Callout } from './components/Callout.js';
 export { default as Card } from './components/Card.js';
 export { default as Checkbox } from './components/Checkbox.js';
+/** Type what you want to do: the keyboard's front door over the application. */
+export { default as Command } from './components/Command.js';
+export type { Command as CommandItem, Group as CommandGroup } from './components/Command.js';
 export { DangerAction, default as DangerZone } from './components/DangerZone.js';
 export { default as Dialog } from './components/Dialog.js';
 export { default as Empty } from './components/Empty.js';
 export { default as Field } from './components/Field.js';
 export type { FieldWiring } from './components/Field.js';
 export { default as Icon } from './components/Icon.js';
+/** A person in one line -- initials, name, address -- and the two pure
+ *  functions behind the disc, exported so a caller colouring something else
+ *  by sender agrees with it. */
+export { default as Identity } from './components/Identity.js';
+export { hueOf, initialsOf } from './components/initials.js';
 export { ICON_NAMES } from './components/iconNames.js';
 export type { IconName } from './components/iconNames.js';
 export { default as Illustration } from './components/Illustration.js';
 export { default as Input } from './components/Input.js';
 export type { Props as InputProps } from './components/Input.js';
 export { default as Markdown } from './components/Markdown.js';
+export { default as Menu } from './components/Menu.js';
+export type { Item as MenuItem, Section as MenuSection } from './components/Menu.js';
 export { default as Modal } from './components/Modal.js';
+/** Moving through a list that does not fit, counted in items rather than
+ *  pages. `pageWindow` is the elision, exported because it is the arithmetic
+ *  worth testing on its own. */
+export { default as Pagination } from './components/Pagination.js';
+export { pageWindow } from './components/pageWindow.js';
 export { default as Pill } from './components/Pill.js';
+/** A small surface anchored to what opened it: the middle term between
+ *  `Tooltip`, which only says something, and `Modal`, which takes the
+ *  application away. */
+export { default as Popover } from './components/Popover.js';
 export { default as Progress } from './components/Progress.js';
 export { Row, Rows } from './components/Rows.js';
+/** A box that scrolls and says so. */
+export { default as ScrollArea } from './components/ScrollArea.js';
+export type { Props as ScrollAreaProps } from './components/ScrollArea.js';
 export { default as Select } from './components/Select.js';
 export { default as SizeGrid } from './components/SizeGrid.js';
 export { default as Skeleton } from './components/Skeleton.js';
 export { default as Slider } from './components/Slider.js';
+/** Two panes and a handle between them, the handle being a real `separator`
+ *  widget rather than a div with a mousedown listener. */
+export { default as SplitPane } from './components/SplitPane.js';
+export type { Props as SplitPaneProps } from './components/SplitPane.js';
 export { default as Table } from './components/Table.js';
 export type { Column } from './components/Table.js';
 export { default as Tabs } from './components/Tabs.js';

package/dist/index.js

@@ -24,6 +24,8 @@ export { default as Button } from './components/Button.js';
 export { default as Callout } from './components/Callout.js';
 export { default as Card } from './components/Card.js';
 export { default as Checkbox } from './components/Checkbox.js';
+/** Type what you want to do: the keyboard's front door over the application. */
+export { default as Command } from './components/Command.js';
 /* `DangerAction` is a component -- a row inside the zone -- and was exported as
    a type until the first consumer wrote `<DangerAction>` and TypeScript refused
    it (TS1362). Nothing in this repo renders one, which is how it went unseen. */
@@ -32,18 +34,38 @@ export { default as Dialog } from './components/Dialog.js';
 export { default as Empty } from './components/Empty.js';
 export { default as Field } from './components/Field.js';
 export { default as Icon } from './components/Icon.js';
+/** A person in one line -- initials, name, address -- and the two pure
+ *  functions behind the disc, exported so a caller colouring something else
+ *  by sender agrees with it. */
+export { default as Identity } from './components/Identity.js';
+export { hueOf, initialsOf } from './components/initials.js';
 export { ICON_NAMES } from './components/iconNames.js';
 export { default as Illustration } from './components/Illustration.js';
 export { default as Input } from './components/Input.js';
 export { default as Markdown } from './components/Markdown.js';
+export { default as Menu } from './components/Menu.js';
 export { default as Modal } from './components/Modal.js';
+/** Moving through a list that does not fit, counted in items rather than
+ *  pages. `pageWindow` is the elision, exported because it is the arithmetic
+ *  worth testing on its own. */
+export { default as Pagination } from './components/Pagination.js';
+export { pageWindow } from './components/pageWindow.js';
 export { default as Pill } from './components/Pill.js';
+/** A small surface anchored to what opened it: the middle term between
+ *  `Tooltip`, which only says something, and `Modal`, which takes the
+ *  application away. */
+export { default as Popover } from './components/Popover.js';
 export { default as Progress } from './components/Progress.js';
 export { Row, Rows } from './components/Rows.js';
+/** A box that scrolls and says so. */
+export { default as ScrollArea } from './components/ScrollArea.js';
 export { default as Select } from './components/Select.js';
 export { default as SizeGrid } from './components/SizeGrid.js';
 export { default as Skeleton } from './components/Skeleton.js';
 export { default as Slider } from './components/Slider.js';
+/** Two panes and a handle between them, the handle being a real `separator`
+ *  widget rather than a div with a mousedown listener. */
+export { default as SplitPane } from './components/SplitPane.js';
 export { default as Table } from './components/Table.js';
 export { default as Tabs } from './components/Tabs.js';
 export { default as Textarea } from './components/Textarea.js';