nexus-shared 2.0.0 → 3.1.0

package/dist/Components/Inputs/TabularForm.js

@@ -1,11 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconArrowDown, iconArrowUp, iconCopy, iconDotsVertical, iconRowInsertBottom, iconRowInsertTop, iconTrash, iconX, InlineIcon } from "nexus-icons";
+import { iconArrowDown, iconArrowUp, iconCopy, iconDotsVertical, iconLock, iconLockOpen, iconRowInsertBottom, iconRowInsertTop, iconTrash, InlineIcon } from "nexus-icons";
 import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { Button } from "../Documents/Button.js";
 import { Menu } from "../Documents/Menu.js";
-import { firstFocusable, labelText, RowCell, rowName, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
+import { firstFocusable, labelText, RowCell, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
 /** Height of a row: the input's box and the line under it. Measured from the first row once it renders. */
 const ROW_HEIGHT = { sm: 29, md: 35, lg: 41 };
 /** Rows rendered above and below the ones in view, so Tab and Enter always find the next row on the page. */
@@ -36,6 +35,8 @@ const COLUMN_WIDTH = {
 };
 /** Columns that keep their width instead of sharing the spare room. */
 const FIXED_TYPES = new Set(["checkbox", "switch", "radio"]);
+/** What a locked row's cells say when one is used. */
+const LOCKED_ROW = "Locked: unlock the row to change it.";
 const ENTER_MOVES = new Set(["text", "email", "tel", "url", "search", "password", "number"]);
 const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
 /** How a cell lines up: numbers at the end, checkboxes and radios in the middle, the rest at the start. */
@@ -52,23 +53,30 @@ function columnWidth(params) {
 /** One row of inputs. It renders again only when its position, its messages, or a value set from code change. */
 const TabularRow = memo(function TabularRow({ store, rowKey, index, count, columns, context, onAction }) {
     useRowVersion(store, rowKey);
-    const name = rowName(store, index);
     const title = `${store.names.title} ${index + 1}`;
     const invalid = context.showAll && store.rowProblems(rowKey) > 0;
     const items = [];
-    if (context.canAdd) {
+    // A row nobody may change (an inherited field) has nothing to offer: no copy of it, no move, no removal.
+    const fixed = Boolean(context.rowLock(rowKey, index));
+    if (context.canAdd && !fixed) {
         items.push({ value: "insert-above", label: "Insert above", icon: _jsx(InlineIcon, { icon: iconRowInsertTop }) }, { value: "insert-below", label: "Insert below", icon: _jsx(InlineIcon, { icon: iconRowInsertBottom }) }, { value: "duplicate", label: "Duplicate", icon: _jsx(InlineIcon, { icon: iconCopy }) });
     }
-    if (context.sortable) {
+    if (context.sortable && !fixed) {
         if (items.length)
             items.push({ separator: true });
-        items.push({ value: "move-up", label: "Move up", icon: _jsx(InlineIcon, { icon: iconArrowUp }), disabled: index === 0 }, { value: "move-down", label: "Move down", icon: _jsx(InlineIcon, { icon: iconArrowDown }), disabled: index === count - 1 });
+        items.push({ value: "move-up", label: "Move up", icon: _jsx(InlineIcon, { icon: iconArrowUp }), disabled: index === 0 || Boolean(context.rowLock(store.keyAt(index - 1), index - 1)) }, { value: "move-down", label: "Move down", icon: _jsx(InlineIcon, { icon: iconArrowDown }), disabled: index === count - 1 });
     }
-    if (context.removable) {
+    // At the end of the row, Remove and Lock are buttons of their own, as a data table's are; the menu holds the rest.
+    const atEnd = context.actionsAt === "end";
+    const locked = context.isLocked(rowKey);
+    const removable = context.removable && !fixed;
+    const lockable = context.lockable && !fixed;
+    if (removable && !atEnd) {
         if (items.length)
             items.push({ separator: true });
         items.push({ value: "remove", label: "Remove", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" });
     }
+    const menu = items.length > 0 && (_jsx(Menu, { items: items, align: atEnd ? "end" : undefined, onSelect: value => onAction(value, rowKey), "aria-label": `${title} actions`, children: _jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${title} actions`, title: `${title} actions`, "data-nx-row-actions": "", children: _jsx(InlineIcon, { icon: iconDotsVertical }) }) }));
     // Leaving an input counts as using it: a repeated value shows its message from then on.
     function onBlur(event) {
         const cell = event.target.closest("[data-nx-cell]");
@@ -76,7 +84,7 @@ const TabularRow = memo(function TabularRow({ store, rowKey, index, count, colum
             return;
         store.touch(rowKey, cell.dataset.nxCell ?? "");
     }
-    return (_jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": index + 2, "data-nx-row": rowKey, "data-problem": invalid || undefined, onBlur: onBlur, children: [context.numbered && (_jsx("div", { role: "cell", className: "nx-tabular__num", children: items.length > (context.removable ? 1 : 0) ? (_jsx(Menu, { items: items, onSelect: value => onAction(value, rowKey), "aria-label": `${title} actions`, children: _jsxs("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${title} actions`, title: `${title} actions`, "data-nx-row-actions": "", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), _jsx(InlineIcon, { icon: iconDotsVertical, className: "nx-tabular__num-icon" })] }) })) : (_jsx("span", { className: "nx-tabular__num-text", children: index + 1 })) })), columns.map(params => (_jsx("div", { role: "cell", className: cx("nx-tabular__cell", `nx-tabular__cell--${cellKind(params)}`), "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: params, index: index, error: store.shownError(rowKey, params.name), layout: "tabular", idPrefix: context.idPrefix, size: context.size, readOnly: context.readOnly, disabled: context.disabled }, store.revision(rowKey, params.name)) }, params.name))), context.removable && (_jsx("div", { role: "cell", className: "nx-tabular__end", children: _jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", className: "nx-tabular__remove", icon: _jsx(InlineIcon, { icon: iconX }), "aria-label": `Remove ${name}`, title: `Remove ${name}`, onClick: () => onAction("remove", rowKey) }) }))] }));
+    return (_jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": index + 2, "data-nx-row": rowKey, "data-problem": invalid || undefined, onBlur: onBlur, children: [context.numbered && (_jsxs("div", { role: "cell", className: "nx-tabular__num", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), !atEnd && menu] })), columns.map(params => (_jsx("div", { role: "cell", className: cx("nx-tabular__cell", `nx-tabular__cell--${cellKind(params)}`), "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: context.cellParams(rowKey, params, index), index: index, error: store.shownError(rowKey, params.name), layout: "tabular", idPrefix: context.idPrefix, size: context.size, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index) }, store.revision(rowKey, params.name)) }, params.name))), atEnd && (_jsxs("div", { role: "cell", className: "nx-tabular__actions", children: [removable && (_jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `Remove ${title}`, title: locked ? "Unlock the row to remove it" : "Remove", "data-tone": "danger", "data-nx-row-actions": "", disabled: locked || context.disabled, onClick: () => onAction("remove", rowKey), children: _jsx(InlineIcon, { icon: iconTrash }) })), lockable && (_jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${locked ? "Unlock" : "Lock"} ${title}`, "aria-pressed": locked, title: locked ? "Locked: unlock to change it" : "Lock, so it cannot be changed", "data-nx-row-actions": "", disabled: context.disabled, onClick: () => onAction(locked ? "unlock" : "lock", rowKey), children: _jsx(InlineIcon, { icon: locked ? iconLock : iconLockOpen }) })), menu] }))] }));
 });
 /**
  * Rows of inputs in a table, one column per input: a person's emails or addresses, invoice lines, a salary sheet. The
@@ -84,9 +92,13 @@ const TabularRow = memo(function TabularRow({ store, rowKey, index, count, colum
  * come as params, the same objects a form takes, so the same list can show as sections in a `GroupForm`.
  *
  * Only the rows in view are on the page, so a sheet of thousands of rows opens and types as fast as a short one; the
- * values live in a store outside React, and typing renders nothing. The header, the row numbers, and the remove buttons
- * stay in place while the table scrolls. A row number opens the row's menu (insert, duplicate, move, remove). Enter in
- * a text or number cell moves down the column, and on the last row adds a row.
+ * values live in a store outside React, and typing renders nothing. The header and the numbered column stay in place
+ * while the table scrolls. Each row has one control, beside its number and never in its place: a menu of insert,
+ * duplicate, move and remove. Enter in a text or number cell moves down the column, and on the last row adds a row.
+ *
+ * Every row is one line high, whatever it holds, so nothing shifts as the table is used; a column generated for every
+ * row (`cellReadOnly`) says so once on its header rather than on each of its cells; and `maxHeight` is brought down
+ * to whole rows, because a scroller that cuts the last one in half reads as broken rather than as scrollable.
  *
  * Inside a `<form>`, the rows are sent as JSON under `name`; a row with a problem blocks submit, and the first one
  * scrolls into view with focus.
@@ -104,6 +116,10 @@ export function TabularForm(props) {
     const addable = props.addable !== false && !readOnly;
     const removable = props.removable !== false && !readOnly && !disabled;
     const sortable = Boolean(props.sortable) && !readOnly && !disabled;
+    const actionsAt = props.actionsAt ?? "number";
+    const lockable = Boolean(props.lockable) && !readOnly;
+    /** The rows the person locked, by key: the screen's, never the value's. */
+    const [lockedKeys, setLockedKeys] = useState(() => new Set());
     const layoutRef = useRef(null);
     const rows = useRowsInput(props, "Row", layoutRef);
     const store = rows.store;
@@ -115,6 +131,7 @@ export function TabularForm(props) {
     const headRef = useRef(null);
     const bodyRef = useRef(null);
     const [rowHeight, setRowHeight] = useState(ROW_HEIGHT[size]);
+    const [viewportMax, setViewportMax] = useState(null);
     const pageRows = Math.ceil((typeof maxHeight === "number" ? maxHeight : 600) / rowHeight);
     const [range, setRange] = useState({ start: 0, end: pageRows + OVERSCAN });
     const [status, setStatus] = useState(null);
@@ -148,6 +165,27 @@ export function TabularForm(props) {
         if (height && height !== rowHeight)
             setRowHeight(height);
     });
+    /**
+     * `maxHeight`, brought down to whole rows. A scroller that cuts the last row in half reads as broken rather than as
+     * scrollable, and the header is not a row, so the arithmetic has to leave it out — as it does the frame and the
+     * horizontal scroll bar, neither of which is a row either.
+     */
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        const wanted = typeof maxHeight === "number" ? maxHeight : null;
+        if (!viewport || wanted === null || count === 0) {
+            if (viewportMax !== null)
+                setViewportMax(null);
+            return;
+        }
+        const head = headRef.current?.offsetHeight ?? 0;
+        const chrome = viewport.offsetHeight - viewport.clientHeight;
+        const room = wanted - chrome - head;
+        // Not even one row fits: leave what was asked for rather than showing a header and a sliver.
+        const next = room < rowHeight ? null : chrome + head + Math.floor(room / rowHeight) * rowHeight;
+        if (next !== viewportMax)
+            setViewportMax(next);
+    });
     // A resize, a new row height, or fewer rows change which rows are in view.
     useLayoutEffect(() => {
         const viewport = viewportRef.current;
@@ -212,9 +250,22 @@ export function TabularForm(props) {
             run.move(key, -1);
         else if (action === "move-down")
             run.move(key, 1);
+        else if (action === "lock" || action === "unlock") {
+            setLockedKeys(current => {
+                const next = new Set(current);
+                if (action === "lock")
+                    next.add(key);
+                else
+                    next.delete(key);
+                return next;
+            });
+        }
         else
             run.remove(key);
     }, [store]);
+    const isLocked = useCallback((key) => lockedKeys.has(key), [lockedKeys]);
+    // A locked row's cells are read-only with the lock's reason, as a row nobody may change has its own.
+    const cellLock = useCallback((key, name, index) => (lockedKeys.has(key) ? LOCKED_ROW : rows.cellLock(key, name, index)), [lockedKeys, rows.cellLock]);
     /** The message or hint of the input with focus, shown under the table: cells have no room for their own. */
     function readStatus() {
         const active = document.activeElement;
@@ -260,8 +311,50 @@ export function TabularForm(props) {
             layoutRef.current?.focusRow(key, name);
         }
     }
-    const context = useMemo(() => ({ idPrefix: frame.id, size, readOnly, disabled, numbered, removable, sortable, canAdd: rows.canAdd, showAll: snapshot.showAll }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll]);
-    const numberWidth = `calc(${Math.max(2, String(count).length)}ch + 24px)`;
+    const context = useMemo(() => ({ idPrefix: frame.id, size, readOnly, disabled, numbered, removable, sortable, canAdd: rows.canAdd, showAll: snapshot.showAll, cellLock, cellParams: rows.cellParams, rowLock: rows.rowLock, actionsAt, lockable, isLocked }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll, cellLock, rows.cellParams, rows.rowLock, actionsAt, lockable, isLocked]);
+    /**
+     * Which columns are generated for **every** row on the page. The lock is then said once, on the column header,
+     * instead of on each of its cells: eighteen locks down one column is eighteen times the ink for one fact. The cells
+     * keep their read-only tint and their reason, which shows under the table when one is used.
+     *
+     * Only the rows in view are asked, which is what a column-wide rule (`cellReadOnly` on a name) answers the same way
+     * however the table is scrolled. A lock that really is per row leaves the column unlocked, which is what it means.
+     */
+    const lockedColumns = useMemo(() => {
+        const locked = new Map();
+        for (const params of columns) {
+            if (readOnly || params.readOnly === true) {
+                locked.set(params.name, true);
+                continue;
+            }
+            if (!shownKeys.length)
+                continue;
+            let reason;
+            for (const [offset, key] of shownKeys.entries()) {
+                // A locked row says nothing about its columns: the rows around it decide whether a column is generated.
+                if (lockedKeys.has(key) || rows.rowLock(key, start + offset))
+                    continue;
+                const lock = rows.cellLock(key, params.name, start + offset);
+                if (!lock) {
+                    reason = undefined;
+                    break;
+                }
+                if (reason === undefined)
+                    reason = typeof lock === "string" ? lock : true;
+            }
+            if (reason !== undefined)
+                locked.set(params.name, reason);
+        }
+        return locked;
+        // `shownKeys` is a fresh array on every render; the work is a call per visible cell, and nothing memoised is
+        // handed to the rows, so recomputing it costs a map and never a re-render of a row.
+    }, [columns, readOnly, rows.cellLock, rows.rowLock, shownKeys, start, lockedKeys]);
+    // The number and the row's menu, side by side, plus the frame around them. Both are always there, so nothing moves.
+    const atEnd = actionsAt === "end";
+    const numberWidth = atEnd ? `calc(${Math.max(2, String(count).length)}ch + 16px)` : `calc(${Math.max(2, String(count).length)}ch + 18px + var(--nx-tabular-menu))`;
+    // At the end: a button for Remove, one for Lock, and one for the menu when there is anything else in it.
+    const buttons = atEnd ? Number(removable) + Number(lockable) + Number(addable || sortable) : 0;
+    const actionsWidth = buttons ? `calc(${buttons} * var(--nx-tabular-menu) + ${buttons - 1} * 2px + 9px)` : null;
     const widths = columns.map(columnWidth);
     const template = [
         numbered ? numberWidth : null,
@@ -269,15 +362,19 @@ export function TabularForm(props) {
             const grow = params.grow ?? (FIXED_TYPES.has(params.type) ? 0 : 1);
             return grow > 0 ? `minmax(${widths[index]}, ${grow}fr)` : widths[index];
         }),
-        removable ? "var(--nx-tabular-end)" : null,
+        actionsWidth,
     ]
         .filter(Boolean)
         .join(" ");
-    const minWidth = `calc(${[numbered ? numberWidth : "0px", ...widths, removable ? "var(--nx-tabular-end)" : "0px"].join(" + ")})`;
-    const tableStyle = { "--nx-tabular-columns": template, minWidth };
+    const minWidth = `calc(${[numbered ? numberWidth : "0px", ...widths, actionsWidth ?? "0px"].join(" + ")})`;
+    const tableStyle = { "--nx-tabular-columns": template, "--nx-tabular-num": numbered ? numberWidth : "0px", minWidth };
     const invalid = Boolean(error || snapshot.message || snapshot.invalidRows);
-    return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-tabular", `nx-tabular--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), _jsx("div", { ref: viewportRef, className: "nx-tabular__viewport", tabIndex: -1, style: { maxHeight: cssLength(maxHeight) }, onScroll: updateRange, children: _jsxs("div", { role: "table", className: "nx-tabular__table", style: tableStyle, "aria-labelledby": label ? frame.legendId : undefined, "aria-label": label ? undefined : props["aria-label"], "aria-rowcount": count + 1, children: [_jsx("div", { ref: headRef, role: "rowgroup", className: "nx-tabular__head", children: _jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": 1, children: [numbered && (_jsxs("div", { role: "columnheader", className: "nx-tabular__num", children: [_jsx("span", { "aria-hidden": "true", children: "#" }), _jsx("span", { className: "nx-visually-hidden", children: store.names.title })] })), columns.map(params => {
+    return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-tabular", `nx-tabular--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "data-actions-at": atEnd ? "end" : undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), _jsx("div", { ref: viewportRef, className: "nx-tabular__viewport", tabIndex: -1, 
+                // A focused cell scrolls clear of the actions fixed at the end, as it does of the number at the start.
+                style: { maxHeight: viewportMax ?? cssLength(maxHeight), scrollPaddingRight: actionsWidth ?? undefined }, onScroll: updateRange, children: _jsxs("div", { role: "table", className: "nx-tabular__table", style: tableStyle, "aria-labelledby": label ? frame.legendId : undefined, "aria-label": label ? undefined : props["aria-label"], "aria-rowcount": count + 1, children: [_jsx("div", { ref: headRef, role: "rowgroup", className: "nx-tabular__head", children: _jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": 1, children: [numbered && (_jsxs("div", { role: "columnheader", className: "nx-tabular__num", children: [_jsx("span", { "aria-hidden": "true", children: "#" }), _jsx("span", { className: "nx-visually-hidden", children: store.names.title })] })), columns.map(params => {
                                         const columnHint = params.hint;
-                                        return (_jsxs("div", { role: "columnheader", className: cx("nx-tabular__head-cell", `nx-tabular__cell--${cellKind(params)}`), title: typeof columnHint === "string" ? columnHint : undefined, children: [_jsx("span", { className: "nx-tabular__head-label", children: params.label ?? params.name }), params.required && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" }))] }, params.name));
-                                    }), removable && (_jsx("div", { role: "columnheader", className: "nx-tabular__end", children: _jsx("span", { className: "nx-visually-hidden", children: "Remove" }) }))] }) }), _jsx("div", { ref: bodyRef, role: "rowgroup", className: "nx-tabular__body", style: { paddingTop: start * rowHeight, paddingBottom: Math.max(0, count - end) * rowHeight }, onKeyDown: onBodyKeyDown, onFocus: readStatus, onBlur: readStatusSoon, onInput: readStatusSoon, children: count === 0 ? (_jsx("div", { role: "row", className: "nx-tabular__row nx-tabular__row--empty", children: _jsx("div", { role: "cell", className: "nx-tabular__empty", children: frame.emptyMessage }) })) : (shownKeys.map((key, offset) => (_jsx(TabularRow, { store: store, rowKey: key, index: start + offset, count: count, columns: columns, context: context, onAction: onAction }, `${snapshot.generation}:${key}`)))) })] }) }), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, status: status, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
+                                        const locked = lockedColumns.get(params.name);
+                                        const reason = typeof locked === "string" ? locked : locked ? "Read-only" : undefined;
+                                        return (_jsxs("div", { role: "columnheader", className: cx("nx-tabular__head-cell", `nx-tabular__cell--${cellKind(params)}`), title: reason ?? (typeof columnHint === "string" ? columnHint : undefined), "data-nx-locked": locked ? "" : undefined, children: [_jsx("span", { className: "nx-tabular__head-label", children: params.label ?? params.name }), params.required && !locked && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" })), locked && _jsx(InlineIcon, { icon: iconLock, className: "nx-tabular__head-lock", "aria-hidden": "true" })] }, params.name));
+                                    }), actionsWidth && (_jsx("div", { role: "columnheader", className: "nx-tabular__actions", children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }) }), _jsx("div", { ref: bodyRef, role: "rowgroup", className: "nx-tabular__body", style: { paddingTop: start * rowHeight, paddingBottom: Math.max(0, count - end) * rowHeight }, onKeyDown: onBodyKeyDown, onFocus: readStatus, onBlur: readStatusSoon, onInput: readStatusSoon, children: count === 0 ? (_jsx("div", { role: "row", className: "nx-tabular__row nx-tabular__row--empty", children: _jsx("div", { role: "cell", className: "nx-tabular__empty", children: frame.emptyMessage }) })) : (shownKeys.map((key, offset) => (_jsx(TabularRow, { store: store, rowKey: key, index: start + offset, count: count, columns: columns, context: context, onAction: onAction }, `${snapshot.generation}:${key}`)))) })] }) }), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, status: status, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
 }

package/dist/Components/Inputs/TimePanel.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef } from "react";
+import { smoothScrollAllowed } from "../../Helpers/AnimationHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { toDevanagariDigits } from "../../Helpers/DateHelpers.js";
 import { formatTime, getMeridiemNames, isSecondsInRange, isTwelveHourFormat, listTimeSlots, normalizeTimeStep, nowIsoTime, SECONDS_PER_DAY, secondsToIsoTime, timeToSeconds, toIsoTime, } from "../../Helpers/TimeHelpers.js";
@@ -157,15 +158,15 @@ export function TimePanel(props) {
         return (slots.find(slot => !slot.disabled) ?? slots[0]).value;
     }, [view, slots, selected]);
     // Chosen items scroll to the middle row of their column, so they line up across columns with their neighbours above
-    // and below; the list centers its slot the same way. At once when the panel opens, smoothly after that, unless the
-    // user asked for reduced motion. (Columns are positioned, so an item's offsetTop is measured from the column.)
+    // and below; the list centers its slot the same way. At once when the panel opens, smoothly after that, unless motion
+    // is off. (Columns are positioned, so an item's offsetTop is measured from the column.)
     // With `autoFocus`, focus then moves in once.
     useLayoutEffect(() => {
         const root = rootRef.current;
         if (!root)
             return;
         const align = () => {
-            const smooth = scrolledRef.current && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+            const smooth = scrolledRef.current && smoothScrollAllowed();
             for (const column of root.querySelectorAll("[data-column]")) {
                 const target = column.querySelector(view === "list" ? "[data-anchor]" : '[aria-selected="true"]');
                 if (!target)

package/dist/Components/Inputs/TimePicker.js

@@ -111,7 +111,8 @@ export function TimePicker(props) {
             return;
         if (!isPopoverOpen(panel))
             panel.showPopover();
-        const place = () => placeUnderAnchor(panel, box.getBoundingClientRect());
+        // No arrow: the panel opens flush under the box and is read as the field's own list.
+        const place = () => placeUnderAnchor(panel, box.getBoundingClientRect(), { arrow: false });
         place();
         const stopFollowing = followAnchor(place);
         const onPointerDown = (event) => {

package/dist/Components/Layouts/Popup.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconMinus, iconSquare, iconSquares, iconX, InlineIcon } from "nexus-icons";
 import { useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
-import { afterAnimation } from "../../Helpers/AnimationHelpers.js";
+import { afterAnimation, motionAllowed } from "../../Helpers/AnimationHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { cssVariablePosition, DRAG_CANCEL_SELECTOR, moveWithin, startDrag, viewportBounds } from "../../Helpers/DragHelpers.js";
 import { HostedPopupContext } from "./PopupContext.js";
@@ -12,9 +12,6 @@ const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([t
 // Where a minimized popup flies to: the newest bar of the dock, at the bottom right.
 const DOCK_EDGE = 16;
 const DOCK_BAR = { width: 300, height: 44 };
-function motionAllowed() {
-    return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
 function popupPosition(dialog) {
     return cssVariablePosition(dialog, "--nx-popup-x", "--nx-popup-y");
 }

package/dist/Components/Layouts/ThemePicker.d.ts

@@ -4,10 +4,27 @@ export interface ThemePickerProps {
     themes?: readonly ThemeOption[];
     /** Show the Light / Dark / System choice. Default `true`. */
     showMode?: boolean;
+    /** Show Compact / Cozy. Default `true`. */
+    showDensity?: boolean;
+    /** Show Animations: On / Off / System. Default `true`. */
+    showAnimations?: boolean;
+    /** Show the scale grid, a development tool. Default: in a development build only. */
+    showGrid?: boolean;
     className?: string;
 }
 /**
- * Light / Dark / System, and a card per theme with a live preview of its colors.
- * The choice applies at once and is saved in the browser.
+ * Light / Dark / System, a card per theme with a live preview of its colors, the density, the animations and, in a
+ * development build, the scale grid. Each choice applies at once and is saved in the browser.
  */
-export declare function ThemePicker({ themes, showMode, className }: ThemePickerProps): import("react").JSX.Element;
+export declare function ThemePicker({ themes, showMode, showDensity, showAnimations, showGrid, className }: ThemePickerProps): import("react").JSX.Element;
+export interface PreferencesPickerProps {
+    className?: string;
+}
+/**
+ * The person's quick preferences, each applied at once and saved on this device: the interface language and the
+ * calendar; the date picker's language, the clock and the date format (the date settings every date component reads);
+ * the number scale and the thousands separator (every number box, slider and table number without a locale of its
+ * own); and the page size tables open with and whether a row click opens a record (every table, once chosen, over what
+ * the table names itself). `ThemeSwitcher` shows it under the theme.
+ */
+export declare function PreferencesPicker({ className }: PreferencesPickerProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemePicker.js

@@ -1,22 +1,93 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconCheck, iconDeviceDesktop, iconMoon, iconSun, InlineIcon } from "nexus-icons";
+import { iconArrowsMaximize, iconArrowsMinimize, iconCheck, iconCircleCheck, iconCircleX, iconDeviceDesktop, iconEyeOff, iconLayoutGrid, iconMoon, iconSun, iconTable, InlineIcon, } from "nexus-icons";
 import { useId } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
+import { formatDate } from "../../Helpers/DateHelpers.js";
+import { setDatePreferences, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES } from "../../Helpers/TableHelpers.js";
+import { isDevelopmentBuild } from "../../Helpers/ThemeHelpers.js";
+import { setUserPreferences, useUserPreferences } from "../../Helpers/UserPreferences.js";
+import { DATE_FORMATS, DEFAULT_TIME_FORMAT } from "../../Interfaces/DateInterfaces.js";
+import { ENumberScales } from "../../Interfaces/PreferenceInterfaces.js";
 import { NEXUS_THEMES } from "../../Interfaces/ThemeInterfaces.js";
 import { useTheme } from "../../Services/ThemeService.js";
 import { TabButtons } from "../Documents/TabButtons.js";
+import { Switch } from "../Inputs/CheckBox.js";
+import { Dropdown } from "../Inputs/Dropdown.js";
 const MODES = [
     { value: "light", label: "Light", icon: _jsx(InlineIcon, { icon: iconSun }) },
     { value: "dark", label: "Dark", icon: _jsx(InlineIcon, { icon: iconMoon }) },
     { value: "system", label: "System", icon: _jsx(InlineIcon, { icon: iconDeviceDesktop }), title: "Follow the operating system" },
 ];
+const DENSITIES = [
+    { value: "compact", label: "Compact", icon: _jsx(InlineIcon, { icon: iconArrowsMinimize }) },
+    { value: "cozy", label: "Cozy", icon: _jsx(InlineIcon, { icon: iconArrowsMaximize }), title: "Taller controls and rows, for touch screens and large monitors" },
+];
+const ANIMATIONS = [
+    { value: "on", label: "On", icon: _jsx(InlineIcon, { icon: iconCircleCheck }), title: "Animate, even when the operating system asks for less motion" },
+    { value: "off", label: "Off", icon: _jsx(InlineIcon, { icon: iconCircleX }), title: "Nothing moves" },
+    { value: "system", label: "System", icon: _jsx(InlineIcon, { icon: iconDeviceDesktop }), title: "Follow the operating system's animations setting" },
+];
+const GRIDS = [
+    { value: "off", label: "Off", icon: _jsx(InlineIcon, { icon: iconEyeOff }) },
+    { value: "px", label: "px", icon: _jsx(InlineIcon, { icon: iconLayoutGrid }), title: "A line every 4px, a solid one every 48px" },
+    { value: "cm", label: "mm", icon: _jsx(InlineIcon, { icon: iconTable }), title: "A line every millimetre, a solid one every centimetre" },
+];
+/** A small heading and what it names: a row of tab buttons by default, or the control given. */
+function Choice({ id, legend, options, value, onChange, children }) {
+    return (_jsxs("div", { className: "nx-theme-picker__group", children: [_jsx("p", { id: id, className: "nx-theme-picker__legend", children: legend }), children ?? (options && value !== undefined && onChange && _jsx(TabButtons, { "aria-labelledby": id, name: id, options: options, value: value, onChange: onChange, block: true }))] }));
+}
+/**
+ * Light / Dark / System, a card per theme with a live preview of its colors, the density, the animations and, in a
+ * development build, the scale grid. Each choice applies at once and is saved in the browser.
+ */
+export function ThemePicker({ themes = NEXUS_THEMES, showMode = true, showDensity = true, showAnimations = true, showGrid = isDevelopmentBuild(), className }) {
+    const { theme, mode, density, animations, grid, setTheme, setMode, setDensity, setAnimations, setGrid } = useTheme();
+    const name = useId();
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [showMode && _jsx(Choice, { id: `${name}-mode`, legend: "Mode", options: MODES, value: mode, onChange: setMode }), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Theme" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] }), showDensity && _jsx(Choice, { id: `${name}-density`, legend: "Density", options: DENSITIES, value: density, onChange: setDensity }), showAnimations && _jsx(Choice, { id: `${name}-animations`, legend: "Animations", options: ANIMATIONS, value: animations, onChange: setAnimations }), showGrid && _jsx(Choice, { id: `${name}-grid`, legend: "Scale grid", options: GRIDS, value: grid, onChange: setGrid })] }));
+}
+/* The quick preferences: language, dates, numbers and tables, beside the theme. */
+const LANGUAGES = [
+    { value: "en", label: "English" },
+    { value: "ne", label: _jsx("span", { lang: "ne", children: "\u0928\u0947\u092A\u093E\u0932\u0940" }), title: "Nepali" },
+];
+const CALENDARS = [
+    { value: "ad", label: "AD", title: "Gregorian (AD)" },
+    { value: "bs", label: "BS", title: "Bikram Sambat (BS)" },
+];
+const SCRIPTS = [
+    { value: "latin", label: "English", title: "Month names and digits in English" },
+    { value: "devanagari", label: _jsx("span", { lang: "ne", children: "\u0928\u0947\u092A\u093E\u0932\u0940" }), title: "Month names and digits in Nepali" },
+];
+const CLOCKS = [
+    { value: "12", label: "12-hour", title: "2:30 PM" },
+    { value: "24", label: "24-hour", title: "14:30" },
+];
+const SCALES = [
+    { value: String(ENumberScales.International), label: "International", title: "1,234,567: thousand, million, billion" },
+    { value: String(ENumberScales.SouthAsian), label: "South Asian", title: "12,34,567: thousand, lakh, crore" },
+];
+const SEPARATORS = [
+    { value: "comma", label: "1,200", title: "Comma" },
+    { value: "period", label: "1.200", title: "Period, with a comma for decimals" },
+    { value: "space", label: "1\u00a0200", title: "Space" },
+    { value: "none", label: "1200", title: "None" },
+];
+const PAGE_SIZES = DEFAULT_PAGE_SIZES.map(size => ({ value: size, label: `${size} rows` }));
+// A fixed day, so the server and the browser write the same examples, and one past the 12th, so day and month differ.
+const SAMPLE_DATE = "2026-09-27";
 /**
- * Light / Dark / System, and a card per theme with a live preview of its colors.
- * The choice applies at once and is saved in the browser.
+ * The person's quick preferences, each applied at once and saved on this device: the interface language and the
+ * calendar; the date picker's language, the clock and the date format (the date settings every date component reads);
+ * the number scale and the thousands separator (every number box, slider and table number without a locale of its
+ * own); and the page size tables open with and whether a row click opens a record (every table, once chosen, over what
+ * the table names itself). `ThemeSwitcher` shows it under the theme.
  */
-export function ThemePicker({ themes = NEXUS_THEMES, showMode = true, className }) {
-    const { theme, mode, setTheme, setMode } = useTheme();
+export function PreferencesPicker({ className }) {
+    const dates = useDatePreferences();
+    const preferences = useUserPreferences();
     const name = useId();
-    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [showMode && (_jsxs("div", { className: "nx-theme-picker__group", children: [_jsx("p", { id: `${name}-mode`, className: "nx-theme-picker__legend", children: "Mode" }), _jsx(TabButtons, { "aria-labelledby": `${name}-mode`, name: `${name}-mode`, options: MODES, value: mode, onChange: setMode, block: true })] })), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Theme" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] })] }));
+    const formats = DATE_FORMATS.map(format => ({ value: format, label: formatDate(SAMPLE_DATE, { ...dates, format }), description: format }));
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsx("h3", { className: "nx-theme-picker__section", children: "Language and region" }), _jsx(Choice, { id: `${name}-language`, legend: "Interface language", options: LANGUAGES, value: preferences.language, onChange: language => setUserPreferences({ language }) }), _jsx(Choice, { id: `${name}-calendar`, legend: "Calendar", options: CALENDARS, value: dates.calendar, onChange: calendar => setDatePreferences({ calendar }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Dates and times" }), _jsx(Choice, { id: `${name}-script`, legend: "Date picker language", options: SCRIPTS, value: dates.script, onChange: script => setDatePreferences({ script }) }), _jsx(Choice, { id: `${name}-clock`, legend: "Clock", options: CLOCKS, value: /H/.test(dates.timeFormat) ? "24" : "12", onChange: clock => setDatePreferences({ timeFormat: clock === "24" ? "HH:mm" : DEFAULT_TIME_FORMAT }) }), _jsx(Choice, { id: `${name}-format`, legend: "Display date format", children: _jsx(Dropdown, { "aria-labelledby": `${name}-format`, options: formats, value: dates.format, clearable: false, searchable: false, onValueChange: format => format && setDatePreferences({ format }) }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Numbers" }), _jsx(Choice, { id: `${name}-scale`, legend: "Number scale", options: SCALES, value: String(preferences.numberScale), onChange: scale => setUserPreferences({ numberScale: Number(scale) === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : ENumberScales.International }) }), _jsx(Choice, { id: `${name}-thousands`, legend: "Thousands separator", options: SEPARATORS, value: preferences.thousands, onChange: thousands => setUserPreferences({ thousands }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Tables" }), _jsx(Choice, { id: `${name}-page-size`, legend: "Default page size", children: _jsx(Dropdown, { "aria-labelledby": `${name}-page-size`, options: PAGE_SIZES, value: preferences.pageSize ?? DEFAULT_PAGE_SIZE, clearable: false, searchable: false, onValueChange: pageSize => pageSize && setUserPreferences({ pageSize }) }) }), _jsx(Switch, { label: "A row click opens the record", labelPosition: "start", checked: preferences.rowClick ?? false, onValueChange: rowClick => setUserPreferences({ rowClick }) })] }));
 }

package/dist/Components/Layouts/ThemeScript.d.ts

@@ -4,8 +4,10 @@ export interface ThemeScriptProps extends ThemeScriptOptions {
     nonce?: string;
 }
 /**
- * Applies the saved theme and mode before the first paint. Render it in `<head>` of the root layout,
- * and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
+ * Applies the saved theme, mode, density, animations and (in a development build) scale grid before the first paint,
+ * and keeps `data-nx-motion` in step with the system's reduced-motion setting: the stylesheets read that attribute,
+ * not the media query, so an app without this script animates whatever the system says. Render it in `<head>` of the
+ * root layout, and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
  *
  * @example
  * <html lang="en" suppressHydrationWarning>

package/dist/Components/Layouts/ThemeScript.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { themeScript } from "../../Helpers/ThemeHelpers.js";
 /**
- * Applies the saved theme and mode before the first paint. Render it in `<head>` of the root layout,
- * and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
+ * Applies the saved theme, mode, density, animations and (in a development build) scale grid before the first paint,
+ * and keeps `data-nx-motion` in step with the system's reduced-motion setting: the stylesheets read that attribute,
+ * not the media query, so an app without this script animates whatever the system says. Render it in `<head>` of the
+ * root layout, and put `suppressHydrationWarning` on `<html>`, because the script sets attributes there.
  *
  * @example
  * <html lang="en" suppressHydrationWarning>

package/dist/Components/Layouts/ThemeSwitcher.d.ts

@@ -5,9 +5,12 @@ export interface ThemeSwitcherProps extends ThemePickerProps {
     label?: string;
     /** Default `ghost`. */
     variant?: ButtonVariant;
+    /** The quick preferences under the theme: language, dates, numbers and tables (`PreferencesPicker`). Default true. */
+    preferences?: boolean;
 }
 /**
- * A palette button that opens the theme picker below it. The panel is a native popover:
- * it closes with Esc or a click outside, and needs no library.
+ * A palette button that opens a quick preference panel below it, with the panel's arrow on the button: the theme
+ * (`ThemePicker`) and, under it, the language, dates, numbers and tables (`PreferencesPicker`). The panel is a native
+ * popover: it closes with Esc or a click outside, stays inside the window and scrolls inside itself.
  */
-export declare function ThemeSwitcher({ label, variant, className, ...pickerProps }: ThemeSwitcherProps): import("react").JSX.Element;
+export declare function ThemeSwitcher({ label, variant, className, preferences, ...pickerProps }: ThemeSwitcherProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemeSwitcher.js

@@ -1,29 +1,50 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { iconPalette, InlineIcon } from "nexus-icons";
-import { useId, useRef } from "react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { followAnchor, isPopoverOpen, placeUnderAnchor, showPanel } from "../../Helpers/PopoverHelpers.js";
 import { Button } from "../Documents/Button.js";
-import { ThemePicker } from "./ThemePicker.js";
-// Keep in step with the width of .nx-theme-switcher__panel.
-const PANEL_WIDTH = 340;
-const GAP = 8;
+import { PreferencesPicker, ThemePicker } from "./ThemePicker.js";
 /**
- * A palette button that opens the theme picker below it. The panel is a native popover:
- * it closes with Esc or a click outside, and needs no library.
+ * A palette button that opens a quick preference panel below it, with the panel's arrow on the button: the theme
+ * (`ThemePicker`) and, under it, the language, dates, numbers and tables (`PreferencesPicker`). The panel is a native
+ * popover: it closes with Esc or a click outside, stays inside the window and scrolls inside itself.
  */
-export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, ...pickerProps }) {
+export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, preferences = true, ...pickerProps }) {
     const panelId = useId();
     const buttonRef = useRef(null);
-    // Opens under the button, aligned to its right edge, and kept inside the window.
-    function place(event) {
+    const panelRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Set on pointer down while the panel is open: that press closes it (light dismiss), and its click must not reopen it.
+    const dismissingRef = useRef(false);
+    // The panel is shown from here rather than by the button's popovertarget, because it can be measured only once it is
+    // shown: placing it needs its size. It opens under the button, lined up with its right edge and inside the window.
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
         const button = buttonRef.current;
-        if (event.newState !== "open" || !button)
+        if (!open || !panel || !button)
             return;
-        const box = button.getBoundingClientRect();
-        const width = Math.min(PANEL_WIDTH, window.innerWidth - GAP * 2);
-        const left = Math.min(Math.max(GAP, box.right - width), window.innerWidth - width - GAP);
-        event.currentTarget.style.top = `${box.bottom + GAP}px`;
-        event.currentTarget.style.left = `${left}px`;
+        const place = () => placeUnderAnchor(panel, button.getBoundingClientRect(), { align: "end" });
+        place();
+        return followAnchor(place);
+    }, [open]);
+    // Opening sets the state in the click itself, so the panel is placed before the frame it first paints in; closing
+    // can also come from Esc or a click outside, which only the event reports.
+    function onToggle(event) {
+        if (event.newState === "closed")
+            setOpen(false);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, variant: variant, className: className, "aria-label": label, title: label, popoverTarget: panelId, icon: _jsx(InlineIcon, { icon: iconPalette }) }), _jsx("div", { id: panelId, popover: "auto", role: "dialog", "aria-label": label, className: "nx-popover nx-theme-switcher__panel", onBeforeToggle: place, children: _jsx(ThemePicker, { ...pickerProps }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, variant: variant, className: className, "aria-label": label, title: label, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, icon: _jsx(InlineIcon, { icon: iconPalette }), onPointerDown: () => {
+                    dismissingRef.current = isPopoverOpen(panelRef.current);
+                }, onClick: () => {
+                    const panel = panelRef.current;
+                    if (dismissingRef.current)
+                        dismissingRef.current = false;
+                    else if (isPopoverOpen(panel))
+                        panel?.hidePopover();
+                    else if (panel && typeof panel.showPopover === "function") {
+                        showPanel(panel);
+                        setOpen(true);
+                    }
+                } }), _jsx("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", "aria-label": label, className: "nx-popover nx-theme-switcher__panel", onToggle: onToggle, children: _jsxs("div", { className: "nx-popover__scroll nx-theme-switcher__body", children: [_jsx(ThemePicker, { ...pickerProps }), preferences && _jsx(PreferencesPicker, {})] }) })] }));
 }

package/dist/Components/Viewers/Avatar.d.ts

@@ -0,0 +1,21 @@
+export interface AvatarProps {
+    /** Whose picture it is: the initials stand in without one, and the name picks their tone. */
+    name: string;
+    /** Address of the picture. Anything but a non-empty string is no picture. */
+    src?: unknown;
+    /** `sm` 22px, `md` 28px, `lg` 44px. Default `md`; `--nx-avatar-size` sets any other. */
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    /** Makes the picture a button that offers to change it: a camera shows over it on hover, and a click calls this. */
+    onChangePicture?: () => void;
+    /** The button's name. Default "Change picture". */
+    changeLabel?: string;
+    /** For the button inside a menu: `role="menuitem"` and `tabIndex={-1}` let the arrow keys reach it. */
+    role?: string;
+    tabIndex?: number;
+}
+/**
+ * A person: a round picture, or their initials on a soft tone when there is none or it fails to load. The chat,
+ * the dropdown's avatar column and the admin bar all draw this one.
+ */
+export declare function Avatar({ name, src, size, className, onChangePicture, changeLabel, role, tabIndex }: AvatarProps): import("react").JSX.Element;