nexus-shared 2.0.0 → 3.0.0

package/dist/Components/Chats/ChatParts.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconAlertCircle, iconCheck, iconChecks, iconCornerUpLeft, iconFile, iconLoader2, iconRefresh, iconTrash, iconX, InlineIcon } from "nexus-icons";
+import { useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { chatDeliveryState, chatFileSize, chatTimeLabel, sameChatId, CHAT_DELIVERY_LABELS } from "../../Helpers/ChatHelpers.js";
+import { avatarTone, initials } from "../../Helpers/DropdownHelpers.js";
+import { markdownToPlainText } from "../../Helpers/MarkdownHelpers.js";
+import { MarkdownView } from "../Viewers/MarkdownView.js";
+/*
+ * The pieces a chat is drawn from: the avatar, one message, the lines that break a thread into days and into read and
+ * unread, and the participants. Each one draws what it is given and nothing else — the state is in `ChatStore` — so
+ * the same pieces serve the panel, a page-wide chat, and a demo with messages in memory.
+ */
+/** A round photo, or the initials of the name on a tone picked from it — the same look and tones as a dropdown's. */
+export function ChatAvatar({ name, src, size = "md" }) {
+    const url = typeof src === "string" ? src.trim() : "";
+    const [failed, setFailed] = useState(null);
+    const photo = url !== "" && failed !== url;
+    return (_jsx("span", { className: cx("nx-chat-avatar", size === "sm" && "nx-chat-avatar--sm"), "data-tone": photo ? undefined : avatarTone(name), "aria-hidden": "true", children: photo ? _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setFailed(url) }) : initials(name) }));
+}
+/** The day a run of messages was written: "Today", "Yesterday", or the date in the user's calendar. */
+export function ChatDayDivider({ label }) {
+    return (_jsx("div", { className: "nx-chat-day", role: "separator", children: _jsx("span", { children: label }) }));
+}
+/** Where reading stopped last time. It stays where it was put, so it does not slide away as the thread is read. */
+export function ChatUnreadLine({ count, label = "New messages" }) {
+    return (_jsx("div", { className: "nx-chat-unread-line", role: "separator", children: _jsx("span", { children: count && count > 0 ? `${label} · ${count}` : label }) }));
+}
+/**
+ * How far a message of this user's has got, in the one place the time sits: a turning spinner while it is on its way,
+ * one tick once the server has it, two once it has reached somebody, and two in the accent once it has been read. The
+ * mark is the same size in every state, so the line under a message does not shift as it settles.
+ */
+export function ChatReadMark({ message, participants, userId }) {
+    const state = chatDeliveryState(message, userId, participants);
+    const read = (message.readBy ?? []).filter(id => !sameChatId(id, userId));
+    const label = state === "read" && read.length > 1 ? `Read by ${read.length}` : CHAT_DELIVERY_LABELS[state];
+    const icon = state === "sending" ? iconLoader2 : state === "failed" ? iconAlertCircle : state === "sent" ? iconCheck : iconChecks;
+    // The word is on the wrapper, so it is both the tooltip on hover and the name a screen reader reads for the mark.
+    return (_jsx("span", { className: cx("nx-chat-mark", `nx-chat-mark--${state}`, (state === "read" || state === "read-all") && "nx-chat-mark--seen", state === "sending" && "nx-spin"), role: "img", "aria-label": label, title: label, "data-state": state, children: _jsx(InlineIcon, { icon: icon }) }));
+}
+/** Files on a message: the name, the size, and a link when the file has a URL. */
+export function ChatAttachments({ attachments }) {
+    return (_jsx("ul", { className: "nx-chat-files", children: attachments.map((file, index) => {
+            const size = chatFileSize(file.size);
+            const body = (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconFile }), _jsx("span", { className: "nx-chat-file__name", children: file.name }), size && _jsx("span", { className: "nx-chat-file__size", children: size })] }));
+            return (_jsx("li", { className: "nx-chat-file", children: file.url ? (_jsx("a", { href: file.url, target: "_blank", rel: "noreferrer", children: body })) : (_jsx("span", { children: body })) }, `${String(file.id ?? file.name)}-${index}`));
+        }) }));
+}
+/** The message a reply answers, above the reply itself. */
+export function ChatQuote({ message, onOpen }) {
+    if (!message)
+        return _jsx("div", { className: "nx-chat-quote nx-chat-quote--gone", children: "The message this answers is no longer here." });
+    const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "nx-chat-quote__author", children: message.authorName || "Unknown" }), _jsx("span", { className: "nx-chat-quote__body", children: markdownToPlainText(message.body) })] }));
+    if (!onOpen)
+        return _jsx("div", { className: "nx-chat-quote", children: body });
+    return (_jsx("button", { type: "button", className: "nx-chat-quote", onClick: () => onOpen(message.id), children: body }));
+}
+/** A note the system wrote, not a person: no side, no avatar, no actions. */
+export function ChatSystemNote({ message, time }) {
+    return (_jsxs("div", { className: "nx-chat-note", children: [_jsx("span", { children: markdownToPlainText(message.body) }), _jsx("time", { dateTime: message.createdAt, children: chatTimeLabel(message.createdAt, time) })] }));
+}
+/**
+ * One message. Its own messages sit on the right in the primary tint, everyone else's on the left on a surface. The
+ * actions are one row of icon buttons that appear on hover or keyboard focus — and never move the message, so a long
+ * thread does not jump under the pointer.
+ */
+export function ChatMessageItem({ message, mine, first, last, time, participants, userId, quoted, onReply, onRemove, onRetry, onDiscard, onOpenQuoted }) {
+    const failed = message.status === "failed";
+    const waiting = message.status === "sending";
+    const actions = [];
+    if (onReply && !failed && !waiting)
+        actions.push(_jsx(ChatAction, { icon: iconCornerUpLeft, label: "Reply", onClick: () => onReply(message) }, "reply"));
+    if (onRemove && mine && !failed && !waiting)
+        actions.push(_jsx(ChatAction, { icon: iconTrash, label: "Delete", tone: "danger", onClick: () => onRemove(message) }, "remove"));
+    return (_jsxs("div", { className: cx("nx-chat-msg", mine ? "nx-chat-msg--mine" : "nx-chat-msg--theirs", first && "nx-chat-msg--first", last && "nx-chat-msg--last", failed && "nx-chat-msg--failed"), children: [_jsxs("div", { className: "nx-chat-msg__bubble", children: [first && !mine && _jsx("span", { className: "nx-chat-msg__author", children: message.authorName || "Unknown" }), message.replyToId !== null && message.replyToId !== undefined && _jsx(ChatQuote, { message: quoted, onOpen: onOpenQuoted }), message.body && _jsx(MarkdownView, { className: "nx-chat-msg__body", value: message.body }), message.attachments && message.attachments.length > 0 && _jsx(ChatAttachments, { attachments: message.attachments }), _jsxs("span", { className: "nx-chat-msg__meta", children: [message.editedAt && _jsx("span", { className: "nx-chat-msg__edited", children: "edited" }), _jsx("time", { dateTime: message.createdAt, children: chatTimeLabel(message.createdAt, time) }), mine && _jsx(ChatReadMark, { message: message, participants: participants, userId: userId })] }), actions.length > 0 && _jsx("span", { className: "nx-chat-msg__actions", children: actions })] }), failed && (_jsxs("div", { className: "nx-chat-msg__failure", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: message.error || "Not sent." }), message.clientId && onRetry && (_jsxs("button", { type: "button", onClick: () => onRetry(message.clientId), children: [_jsx(InlineIcon, { icon: iconRefresh }), " Retry"] })), message.clientId && onDiscard && (_jsxs("button", { type: "button", onClick: () => onDiscard(message.clientId), children: [_jsx(InlineIcon, { icon: iconX }), " Discard"] }))] }))] }));
+}
+/** One icon button in a message's action row. */
+function ChatAction({ icon, label, tone, onClick }) {
+    return (_jsx("button", { type: "button", className: cx("nx-chat-msg__action", tone === "danger" && "nx-chat-msg__action--danger"), onClick: onClick, "aria-label": label, title: label, children: _jsx(InlineIcon, { icon: icon }) }));
+}
+/** Everyone in a conversation, with what each one is here. */
+export function ChatParticipantList({ participants, userId, empty = "Nobody else yet." }) {
+    if (participants.length === 0)
+        return _jsx("p", { className: "nx-chat-aside__empty", children: empty });
+    return (_jsx("ul", { className: "nx-chat-people", children: participants.map(person => (_jsxs("li", { className: cx("nx-chat-person", person.inactive && "nx-chat-person--inactive"), children: [_jsx(ChatAvatar, { name: person.name, src: person.avatar, size: "sm" }), _jsxs("span", { className: "nx-chat-person__text", children: [_jsxs("span", { className: "nx-chat-person__name", children: [person.name, sameChatId(person.id, userId) && _jsx("span", { className: "nx-chat-person__you", children: "you" })] }), (person.role || person.readOnly) && _jsx("span", { className: "nx-chat-person__role", children: person.readOnly ? [person.role, "reads only"].filter(Boolean).join(" · ") : person.role })] })] }, String(person.id)))) }));
+}
+/** A thread with nothing in it yet. */
+export function ChatEmpty({ message = "No messages yet.", hint }) {
+    return (_jsxs("div", { className: "nx-chat-empty", children: [_jsx("p", { children: message }), hint && _jsx("p", { className: "nx-chat-empty__hint", children: hint })] }));
+}
+/** Something that did not load, with a way to try again. */
+export function ChatFailure({ message, onRetry }) {
+    return (_jsxs("div", { className: "nx-chat-failure", role: "alert", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: message }), onRetry && (_jsxs("button", { type: "button", onClick: onRetry, children: [_jsx(InlineIcon, { icon: iconRefresh }), " Try again"] }))] }));
+}
+/** Messages on their way in. */
+export function ChatLoading({ label = "Loading…" }) {
+    return (_jsxs("div", { className: "nx-chat-loading", "aria-live": "polite", children: [_jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }), _jsx("span", { children: label })] }));
+}

package/dist/Components/Chats/ChatThread.d.ts

@@ -0,0 +1,22 @@
+import { type ChatTimeOptions } from "../../Helpers/ChatHelpers.ts";
+import type { ChatSnapshot, ChatStore } from "../../Helpers/ChatStore.ts";
+import type { ChatId, ChatMessage } from "../../Interfaces/ChatInterfaces.ts";
+export interface ChatThreadProps {
+    store: ChatStore;
+    state: ChatSnapshot;
+    /** Who is reading: their messages sit on the right. */
+    userId: ChatId;
+    /** The user's date settings and zone. Default: their own, from local storage. */
+    time?: ChatTimeOptions;
+    /** A message can be answered. Default true. */
+    replies?: boolean;
+    /** A reply was started: the panel puts the message in the composer. */
+    onReply?: (message: ChatMessage) => void;
+    /** Reading the newest message marks the conversation read. Default true. */
+    marksRead?: boolean;
+    /** Shown when there is not a single message. */
+    emptyMessage?: string;
+    className?: string;
+}
+/** The messages of a conversation, in days and runs, with the lines that break them up. */
+export declare function ChatThread({ store, state, userId, time, replies, onReply, marksRead, emptyMessage, className }: ChatThreadProps): import("react").JSX.Element;

package/dist/Components/Chats/ChatThread.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconArrowDown, iconMessageCircle, InlineIcon } from "nexus-icons";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { chatBadgeText, chatMessageKey, groupChatMessages, sameChatId } from "../../Helpers/ChatHelpers.js";
+import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { Button } from "../Documents/Button.js";
+import { ChatAvatar, ChatDayDivider, ChatEmpty, ChatFailure, ChatLoading, ChatMessageItem, ChatSystemNote, ChatUnreadLine } from "./ChatParts.js";
+/*
+ * The thread: the conversation itself, scrolling. It opens at the newest message, keeps itself at the bottom while the
+ * reader is already there, and when they are not, it leaves the scroll alone and offers a button down to the newest
+ * with the number of messages that arrived. Reaching the top loads the page above and holds the reader's place.
+ *
+ * Reading marks the conversation read, but only once the newest message is actually on screen: a panel opened and left
+ * scrolled up has not been read.
+ */
+/** How close to an edge counts as being at it. */
+const EDGE = 32;
+/** How near the top loading the page above starts. */
+const TOP_EDGE = 120;
+/** The messages of a conversation, in days and runs, with the lines that break them up. */
+export function ChatThread({ store, state, userId, time, replies = true, onReply, marksRead = true, emptyMessage, className }) {
+    const preferences = useDatePreferences();
+    const zone = useBrowserTimeZone();
+    const settings = useMemo(() => ({ ...preferences, ...(zone && { timeZone: zone }), ...time }), [preferences, zone, time]);
+    const listRef = useRef(null);
+    const [atBottom, setAtBottom] = useState(true);
+    const [missed, setMissed] = useState(0);
+    // What the scroll looked like before a page of older messages arrived, so the reader's place can be given back.
+    const anchor = useRef(null);
+    const lastKey = useRef(null);
+    const count = useRef(0);
+    const days = useMemo(() => groupChatMessages(state.messages, { userId, unreadFrom: state.unreadFrom, ...settings }), [state.messages, state.unreadFrom, userId, settings]);
+    const byId = useMemo(() => new Map(state.messages.map(message => [String(message.id), message])), [state.messages]);
+    const scrollToEnd = useCallback((smooth) => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        // Windows with its animations off reports reduced motion, and a smooth scroll there may never run: jump instead.
+        const reduced = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        list.scrollTo({ top: list.scrollHeight, behavior: smooth && !reduced ? "smooth" : "auto" });
+    }, []);
+    // New messages: stay at the bottom when already there, otherwise hold the place and count what came in.
+    useLayoutEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        if (anchor.current) {
+            // A page of older messages: the scroll keeps the message it was on, rather than jumping to the new top.
+            list.scrollTop = anchor.current.top + (list.scrollHeight - anchor.current.height);
+            anchor.current = null;
+            count.current = state.messages.length;
+            return;
+        }
+        const newest = state.messages[state.messages.length - 1];
+        const key = newest ? chatMessageKey(newest) : null;
+        const grew = state.messages.length > count.current;
+        const changed = key !== lastKey.current;
+        count.current = state.messages.length;
+        lastKey.current = key;
+        if (!grew || !changed)
+            return;
+        if (atBottom || sameChatId(newest?.authorId, userId))
+            scrollToEnd(lastKey.current !== null && missed === 0);
+        else
+            setMissed(value => value + 1);
+        // `missed` is read, not depended on: a second message must not re-run the first one's scroll.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state.messages, atBottom, userId, scrollToEnd]);
+    // The conversation counts as read once its newest message has been on screen.
+    useEffect(() => {
+        if (!marksRead || !atBottom || state.loading || state.summary.unreadCount === 0)
+            return;
+        void store.markRead();
+    }, [marksRead, atBottom, state.loading, state.summary.unreadCount, store]);
+    const onScroll = useCallback(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const bottom = list.scrollHeight - list.scrollTop - list.clientHeight <= EDGE;
+        setAtBottom(bottom);
+        if (bottom)
+            setMissed(0);
+        if (list.scrollTop <= TOP_EDGE && state.hasMore && !state.loadingOlder) {
+            anchor.current = { height: list.scrollHeight, top: list.scrollTop };
+            void store.loadOlder();
+        }
+    }, [state.hasMore, state.loadingOlder, store]);
+    const quiet = !state.loading && state.messages.length === 0;
+    return (_jsxs("div", { className: cx("nx-chat-thread", className), children: [_jsxs("div", { className: "nx-chat-thread__list", ref: listRef, onScroll: onScroll, role: "log", "aria-live": "polite", "aria-relevant": "additions", tabIndex: 0, children: [state.loadingOlder && _jsx(ChatLoading, { label: "Loading earlier messages\u2026" }), !state.loadingOlder && state.hasMore && (_jsx("div", { className: "nx-chat-thread__older", children: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => void store.loadOlder(), children: "Earlier messages" }) })), state.loading && state.messages.length === 0 && _jsx(ChatLoading, { label: "Loading the conversation\u2026" }), state.error && _jsx(ChatFailure, { message: state.error, onRetry: () => void store.refresh() }), quiet && !state.error && _jsx(ChatEmpty, { message: emptyMessage ?? "No messages yet.", hint: _jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconMessageCircle }), " Write the first one below."] }) }), days.map(day => (_jsxs("section", { className: "nx-chat-thread__day", children: [_jsx(ChatDayDivider, { label: day.label }), day.runs.map((run, runIndex) => (_jsxs(Fragment, { children: [run.startsUnread && _jsx(ChatUnreadLine, { count: state.summary.unreadCount }), _jsx("div", { className: cx("nx-chat-run", run.mine && "nx-chat-run--mine", run.system && "nx-chat-run--system"), children: run.system ? (run.messages.map(message => _jsx(ChatSystemNote, { message: message, time: settings }, chatMessageKey(message)))) : (_jsxs(_Fragment, { children: [!run.mine && _jsx(ChatAvatarColumn, { name: run.authorName, src: run.authorAvatar }), _jsx("div", { className: "nx-chat-run__messages", children: run.messages.map((message, index) => (_jsx(ChatMessageItem, { message: message, mine: run.mine, first: index === 0, last: index === run.messages.length - 1, time: settings, participants: state.participants, userId: userId, quoted: message.replyToId ? byId.get(String(message.replyToId)) : undefined, onReply: replies && onReply ? onReply : undefined, onRemove: run.mine && state.features.remove ? message => void store.remove(message.id) : undefined, onRetry: store.retry, onDiscard: store.discard }, chatMessageKey(message)))) })] })) })] }, `${day.date}-${runIndex}`)))] }, day.date)))] }), !atBottom && (_jsxs("button", { type: "button", className: "nx-chat-thread__jump", onClick: () => scrollToEnd(true), "aria-label": missed > 0 ? `${missed} new, go to the newest` : "Go to the newest message", children: [_jsx(InlineIcon, { icon: iconArrowDown }), missed > 0 && _jsx("span", { className: "nx-chat-thread__jump-count", children: chatBadgeText(missed) })] }))] }));
+}
+/** The avatar beside a run of somebody else's messages, kept out of the bubbles so they line up under each other. */
+function ChatAvatarColumn({ name, src }) {
+    return (_jsx("div", { className: "nx-chat-run__avatar", children: _jsx(ChatAvatar, { name: name, src: src }) }));
+}

package/dist/Components/Documents/Menu.js

@@ -101,25 +101,27 @@ export function MenuPanel({ id, items, onSelect, kind = "menu", size = "md", clo
     const role = ITEM_ROLE[kind];
     // When any item has an icon, every item keeps the icon column, so the labels line up.
     const hasIcons = items.some(entry => isMenuItem(entry) && entry.icon);
-    return (_jsx("div", { ref: ref, id: id, popover: "auto", role: "menu", tabIndex: -1, className: cx("nx-popover", "nx-menu", `nx-menu--${size}`, className), onToggle: onToggle, onKeyDown: onKeyDown, ...labelling, children: items.map((entry, index) => {
-            if (!isMenuItem(entry)) {
-                if ("separator" in entry)
-                    return _jsx("div", { role: "separator", className: "nx-menu__separator" }, index);
-                return (_jsx("div", { role: "presentation", className: "nx-menu__heading", children: entry.heading }, index));
-            }
-            const item = entry;
-            const content = (_jsxs(_Fragment, { children: [kind !== "menu" && _jsx("span", { className: "nx-menu__check", children: item.checked && _jsx(InlineIcon, { icon: iconCheck }) }), hasIcons && _jsx("span", { className: "nx-menu__icon", children: item.icon }), _jsxs("span", { className: "nx-menu__body", children: [_jsx("span", { className: "nx-menu__label", children: item.label }), item.description && _jsx("span", { className: "nx-menu__description", children: item.description })] }), item.shortcut && _jsx("kbd", { className: "nx-menu__shortcut", children: item.shortcut })] }));
-            const shared = {
-                role,
-                className: cx("nx-menu__item", item.tone === "danger" && "nx-menu__item--danger", item.checked && "nx-menu__item--checked"),
-                tabIndex: -1,
-                title: item.title,
-                "aria-disabled": item.disabled || undefined,
-                "aria-checked": kind === "menu" ? undefined : Boolean(item.checked),
-                onPointerMove,
-            };
-            return item.href && !item.disabled ? (_jsx("a", { ...shared, href: item.href, target: item.target, rel: item.target === "_blank" ? "noopener" : undefined, onClick: event => choose(item, event), children: content }, item.value)) : (_jsx("button", { ...shared, type: "button", onClick: event => choose(item, event), children: content }, item.value));
-        }) }));
+    return (_jsx("div", { ref: ref, id: id, popover: "auto", role: "menu", tabIndex: -1, className: cx("nx-popover", "nx-menu", `nx-menu--${size}`, className), onToggle: onToggle, onKeyDown: onKeyDown, ...labelling, children: _jsx("div", { role: "none", className: "nx-menu__list", children: items.map((entry, index) => {
+                // Items are keyed by their value, so a separator keyed by its index alone collided with an item whose value
+                // was that number ("5" in a menu of projects). The prefix keeps the two apart.
+                if (!isMenuItem(entry)) {
+                    if ("separator" in entry)
+                        return _jsx("div", { role: "separator", className: "nx-menu__separator" }, `nx-at-${index}`);
+                    return (_jsx("div", { role: "presentation", className: "nx-menu__heading", children: entry.heading }, `nx-at-${index}`));
+                }
+                const item = entry;
+                const content = (_jsxs(_Fragment, { children: [kind !== "menu" && _jsx("span", { className: "nx-menu__check", children: item.checked && _jsx(InlineIcon, { icon: iconCheck }) }), hasIcons && _jsx("span", { className: "nx-menu__icon", children: item.icon }), _jsxs("span", { className: "nx-menu__body", children: [_jsx("span", { className: "nx-menu__label", children: item.label }), item.description && _jsx("span", { className: "nx-menu__description", children: item.description })] }), item.shortcut && _jsx("kbd", { className: "nx-menu__shortcut", children: item.shortcut })] }));
+                const shared = {
+                    role,
+                    className: cx("nx-menu__item", item.tone === "danger" && "nx-menu__item--danger", item.checked && "nx-menu__item--checked"),
+                    tabIndex: -1,
+                    title: item.title,
+                    "aria-disabled": item.disabled || undefined,
+                    "aria-checked": kind === "menu" ? undefined : Boolean(item.checked),
+                    onPointerMove,
+                };
+                return item.href && !item.disabled ? (_jsx("a", { ...shared, href: item.href, target: item.target, rel: item.target === "_blank" ? "noopener" : undefined, onClick: event => choose(item, event), children: content }, item.value)) : (_jsx("button", { ...shared, type: "button", onClick: event => choose(item, event), children: content }, item.value));
+            }) }) }));
 }
 /**
  * A dropdown menu: a button that opens a list of actions in a native popover under it (above it when there is no
@@ -212,7 +214,9 @@ export function ContextMenu({ children, "aria-label": ariaLabel = "Context menu"
     const panelId = useId();
     const panelRef = useRef(null);
     // When the last press happened: a contextmenu event right after one comes from the mouse or a long touch.
-    const pressedAtRef = useRef(0);
+    // When a pointer was last pressed. Never pressed has to be long ago, not zero: zero is 1.5 seconds after the page
+    // loaded, and a context menu opened from the keyboard in that moment would be placed as a pointer's.
+    const pressedAtRef = useRef(Number.NEGATIVE_INFINITY);
     function onContextMenu(event) {
         const panel = panelRef.current;
         if (disabled || !canShow(panel))

package/dist/Components/Documents/SplitButton.js

@@ -58,9 +58,11 @@ export function SplitButton({ options, onAction, defaultValue, value, onValueCha
         return null;
     function place() {
         const panel = panelRef.current;
-        const anchor = toggleRef.current?.parentElement;
-        if (panel && anchor)
-            placeUnderAnchor(panel, anchor.getBoundingClientRect(), { align });
+        const toggle = toggleRef.current;
+        const anchor = toggle?.parentElement;
+        // The menu lines up with the whole button, and its arrow points at the half that opened it.
+        if (panel && toggle && anchor)
+            placeUnderAnchor(panel, anchor.getBoundingClientRect(), { align, arrowAt: toggle.getBoundingClientRect() });
     }
     function show(focusFirst) {
         const panel = panelRef.current;

package/dist/Components/Documents/TabButtons.d.ts

@@ -19,9 +19,6 @@ export type TabButtonLabels = "all" | "selected";
 export type TabButtonDesign = "nav" | "list";
 interface TabButtonsBaseProps<T extends string> {
     options: readonly TabButtonOption<T>[];
-    /** The selected option. A value that matches no option leaves every option unselected. */
-    value: T;
-    onChange: (value: T) => void;
     /** Default `nav`. `list` stacks the options as full-width rows with a bar at the selected one. */
     design?: TabButtonDesign;
     /** Default `md`. */
@@ -35,7 +32,7 @@ interface TabButtonsBaseProps<T extends string> {
     labels?: TabButtonLabels;
     /** Fills the width of its container. With `labels="all"`, options share the width equally. A `list` always fills it. */
     block?: boolean;
-    /** Radio group name, for forms. Default: a unique id. */
+    /** Radio (or checkbox) group name, for forms. Default: a unique id. */
     name?: string;
     /**
      * Id of the form the choice belongs to, as the HTML `form` attribute. An id that matches no form keeps the choice out
@@ -44,8 +41,26 @@ interface TabButtonsBaseProps<T extends string> {
     form?: string;
     className?: string;
 }
+/** One option at a time: radio buttons, and an indicator that slides to the selection. */
+interface TabButtonsOneProps<T extends string> {
+    multiple?: false;
+    /** The selected option. A value that matches no option leaves every option unselected. */
+    value: T;
+    onChange: (value: T) => void;
+}
+/**
+ * Several options at once: checkboxes, each chosen option raised on its own, and the options wrap onto more rows when
+ * they do not fit, so a picker of 26 letters or 33 symbols stays one control on a phone.
+ */
+interface TabButtonsManyProps<T extends string> {
+    multiple: true;
+    /** The chosen options. Values that match no option are ignored, and never handed back. */
+    value: readonly T[];
+    /** The chosen values after each change, in option order. */
+    onChange: (values: T[]) => void;
+}
 /** A label is required: pass `aria-label`, or `aria-labelledby` pointing at a visible heading. */
-export type TabButtonsProps<T extends string = string> = TabButtonsBaseProps<T> & ({
+export type TabButtonsProps<T extends string = string> = TabButtonsBaseProps<T> & (TabButtonsOneProps<T> | TabButtonsManyProps<T>) & ({
     "aria-label": string;
     "aria-labelledby"?: never;
 } | {
@@ -57,6 +72,9 @@ export type TabButtonsProps<T extends string = string> = TabButtonsBaseProps<T>
  * The `nav` design slides an indicator to the selection; the `list` design stacks the options as rows, each with an
  * icon, a label, a description, and a badge, for settings pages and side panels. Built on native radio buttons, so
  * arrow keys move the selection and screen readers announce it. To switch between page panels, use tabs with panels instead.
+ *
+ * `multiple` picks several at once, such as the weekdays a rule runs on: native checkboxes (Tab moves between them,
+ * Space toggles one), every chosen option raised as the single choice's indicator is, and the options wrap.
  */
-export declare function TabButtons<T extends string>({ options, value, onChange, design, size, tone, labels, block, name, form, className, ...labelling }: TabButtonsProps<T>): import("react").JSX.Element;
+export declare function TabButtons<T extends string>(props: TabButtonsProps<T>): import("react").JSX.Element;
 export {};

package/dist/Components/Documents/TabButtons.js

@@ -7,13 +7,32 @@ import { cx } from "../../Helpers/ClassHelpers.js";
  * The `nav` design slides an indicator to the selection; the `list` design stacks the options as rows, each with an
  * icon, a label, a description, and a badge, for settings pages and side panels. Built on native radio buttons, so
  * arrow keys move the selection and screen readers announce it. To switch between page panels, use tabs with panels instead.
+ *
+ * `multiple` picks several at once, such as the weekdays a rule runs on: native checkboxes (Tab moves between them,
+ * Space toggles one), every chosen option raised as the single choice's indicator is, and the options wrap.
  */
-export function TabButtons({ options, value, onChange, design = "nav", size = "md", tone = "neutral", labels = "all", block = false, name, form, className, ...labelling }) {
+export function TabButtons(props) {
+    const { options, design = "nav", size = "md", tone = "neutral", labels = "all", block = false, name, form, className, multiple: _multiple, value: _value, onChange: _onChange, ...labelling } = props;
     const generatedName = useId();
     const groupName = name ?? generatedName;
-    const index = options.findIndex(option => option.value === value);
-    const style = { "--nx-tabs-count": Math.max(options.length, 1), "--nx-tabs-index": Math.max(index, 0) };
     const list = design === "list";
     const labelsSelected = !list && labels === "selected";
-    return (_jsxs("div", { role: "radiogroup", "aria-orientation": list ? "vertical" : undefined, ...labelling, className: cx("nx-tabs", `nx-tabs--${size}`, list && "nx-tabs--list", tone === "primary" && "nx-tabs--primary", labelsSelected && "nx-tabs--labels-selected", block && "nx-tabs--block", className), style: list ? undefined : style, children: [index >= 0 && !list && !labelsSelected && _jsx("span", { className: "nx-tabs__indicator", "aria-hidden": "true" }), options.map(option => (_jsxs("label", { className: "nx-tabs__option", title: option.title ?? (labelsSelected && typeof option.label === "string" ? option.label : undefined), children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: groupName, form: form, value: option.value, checked: option.value === value, disabled: option.disabled, onChange: () => onChange(option.value) }), option.icon, _jsxs("span", { className: "nx-tabs__label", children: [_jsx("span", { className: "nx-tabs__text", children: option.label }), list && option.description && _jsx("span", { className: "nx-tabs__description", children: option.description })] }), list && option.badge !== undefined && option.badge !== null && _jsx("span", { className: "nx-tabs__badge", children: option.badge })] }, option.value)))] }));
+    const chosen = props.multiple ? new Set(props.value) : null;
+    // One choice slides one indicator; several have no single place for it, so each chosen option draws its own.
+    const index = chosen ? -1 : options.findIndex(option => option.value === props.value);
+    const style = { "--nx-tabs-count": Math.max(options.length, 1), "--nx-tabs-index": Math.max(index, 0) };
+    const isChecked = (option) => (chosen ? chosen.has(option.value) : option.value === props.value);
+    const toggle = (option, checked) => {
+        if (!props.multiple) {
+            props.onChange(option.value);
+            return;
+        }
+        const next = new Set(props.value);
+        if (checked)
+            next.add(option.value);
+        else
+            next.delete(option.value);
+        props.onChange(options.filter(one => next.has(one.value)).map(one => one.value));
+    };
+    return (_jsxs("div", { role: chosen ? "group" : "radiogroup", "aria-orientation": list && !chosen ? "vertical" : undefined, ...labelling, className: cx("nx-tabs", `nx-tabs--${size}`, list && "nx-tabs--list", tone === "primary" && "nx-tabs--primary", labelsSelected && "nx-tabs--labels-selected", chosen && !list && "nx-tabs--multiple", block && "nx-tabs--block", className), style: list || chosen ? undefined : style, children: [index >= 0 && !list && !labelsSelected && _jsx("span", { className: "nx-tabs__indicator", "aria-hidden": "true" }), options.map(option => (_jsxs("label", { className: "nx-tabs__option", title: option.title ?? (labelsSelected && typeof option.label === "string" ? option.label : undefined), children: [_jsx("input", { type: chosen ? "checkbox" : "radio", className: "nx-visually-hidden", name: groupName, form: form, value: option.value, checked: isChecked(option), disabled: option.disabled, onChange: event => toggle(option, event.currentTarget.checked) }), option.icon, _jsxs("span", { className: "nx-tabs__label", children: [_jsx("span", { className: "nx-tabs__text", children: option.label }), list && option.description && _jsx("span", { className: "nx-tabs__description", children: option.description })] }), list && option.badge !== undefined && option.badge !== null && _jsx("span", { className: "nx-tabs__badge", children: option.badge })] }, option.value)))] }));
 }

package/dist/Components/Forms/ApiForm.d.ts

@@ -2,10 +2,12 @@ import type { ApiFormProps, FormValues } from "../../Interfaces/FormInterfaces.t
 /**
  * A `SubmitForm` that sends its values to an API: an endpoint (`ROOMS.update`, or `{ module, path, method }` in place),
  * a URL outside the app's modules (`{ url, method }`, as JSON), both sent through the app's `api` without its toasts, or
- * a function that sends them with a client of the app's own. The answer is read as Nexus API responses (`{ isSuccess, message,
- * inputName, result }`), ASP.NET Core problem details, or any JSON by its status. On success a toast says so and the
- * values become the form's own; on failure the server's messages show on the inputs they name, the rest under the form,
- * and the first input with a message takes focus. `loadValue` loads the record to edit, with placeholders and Retry.
+ * a function that sends them with a client of the app's own. The answer is read as Nexus API responses
+ * (`{ isSuccess, errorMessages: [{ message, inputName }], result }`, or one message at the top level), ASP.NET Core problem
+ * details, or any JSON by its status. On success a toast says so and the values become the form's own; on failure the
+ * server's own words show - every message it sent, on the inputs they name and the rest under the form, with our message
+ * by status only for an answer that explains nothing - and the first input with a message takes focus. `loadValue` loads
+ * the record to edit, with placeholders and Retry.
  *
  * @example
  * const ROOMS = apiController(NexusModule.Reservation, "Room", "room");

package/dist/Components/Forms/ApiForm.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconAlertCircle, iconRefresh, InlineIcon } from "nexus-icons";
 import { useEffect, useRef, useState } from "react";
-import { abortError, apiRequestOptions, matchFieldErrors, toApiResult } from "../../Helpers/ApiFormHelpers.js";
-import { apiStatusMessage, errorMessage, isAbortError, readApiResponse } from "../../Helpers/ApiResponses.js";
+import { abortError, apiRequestOptions, formErrorsFromResult, toApiResult } from "../../Helpers/ApiFormHelpers.js";
+import { errorMessage, isAbortError, readApiResponse } from "../../Helpers/ApiResponses.js";
 import { isApiEndpoint } from "../../Helpers/ApiRoutes.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { messages } from "../../Helpers/MessageBuilder.js";
-import { api as browserApi } from "../../Services/BrowserApi.js";
+import { api as browserApi, getApiReader } from "../../Services/BrowserApi.js";
 import { Button } from "../Documents/Button.js";
 import { toast } from "../Layouts/Toaster.js";
 import { useFormStore } from "./Form.js";
@@ -15,10 +15,12 @@ import { SubmitForm } from "./SubmitForm.js";
 /**
  * A `SubmitForm` that sends its values to an API: an endpoint (`ROOMS.update`, or `{ module, path, method }` in place),
  * a URL outside the app's modules (`{ url, method }`, as JSON), both sent through the app's `api` without its toasts, or
- * a function that sends them with a client of the app's own. The answer is read as Nexus API responses (`{ isSuccess, message,
- * inputName, result }`), ASP.NET Core problem details, or any JSON by its status. On success a toast says so and the
- * values become the form's own; on failure the server's messages show on the inputs they name, the rest under the form,
- * and the first input with a message takes focus. `loadValue` loads the record to edit, with placeholders and Retry.
+ * a function that sends them with a client of the app's own. The answer is read as Nexus API responses
+ * (`{ isSuccess, errorMessages: [{ message, inputName }], result }`, or one message at the top level), ASP.NET Core problem
+ * details, or any JSON by its status. On success a toast says so and the values become the form's own; on failure the
+ * server's own words show - every message it sent, on the inputs they name and the rest under the form, with our message
+ * by status only for an answer that explains nothing - and the first input with a message takes focus. `loadValue` loads
+ * the record to edit, with placeholders and Retry.
  *
  * @example
  * const ROOMS = apiController(NexusModule.Reservation, "Room", "room");
@@ -58,12 +60,13 @@ export function ApiForm(props) {
         return () => controller.abort();
     }, [store, attempt]);
     async function send(values, context) {
-        const { api, transform, readResponse = readApiResponse } = latest.current;
+        // No `readResponse` means the client's own reader: the app's (`configureApi({ read })`), else the built-in one.
+        const { api, transform, readResponse } = latest.current;
         answerRef.current = null;
         const body = transform ? await transform(values, context) : values;
         let answer;
         if (typeof api === "function")
-            answer = await toApiResult(await api(body, context), readResponse);
+            answer = await toApiResult(await api(body, context), readResponse ?? getApiReader() ?? readApiResponse);
         else {
             // The form shows its own messages, so the call shows no toasts.
             const options = isApiEndpoint(api) ? { body, signal: context.signal, read: readResponse } : apiRequestOptions(api, body, { signal: context.signal, read: readResponse });
@@ -76,12 +79,10 @@ export function ApiForm(props) {
             return { ok: true };
         }
         latest.current.onError?.(answer, values);
+        // Every message the server sent: the ones it put on inputs (Nexus `inputName`) show there, the rest under the form.
         const names = store.inputs.filter(params => !params.hidden).map(params => params.name);
-        const { fields, others } = matchFieldErrors(answer.errors, names);
-        // A message the server put on inputs (Nexus `inputName`) shows there, not twice.
-        const onInputs = Boolean(answer.message) && Object.values(fields).includes(answer.message);
-        const message = [onInputs ? undefined : answer.message, ...others].filter(Boolean).join(" ");
-        return { ok: false, errors: fields, message: message || (Object.keys(fields).length ? null : apiStatusMessage(answer.status)) };
+        const { errors, message } = formErrorsFromResult(answer, names);
+        return { ok: false, errors, message };
     }
     function saved(values) {
         const answer = answerRef.current;