nexus-shared 3.0.0 → 3.1.0

package/dist/Components/Inputs/NumberBox.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { InlineIcon, iconMinus, iconPlus } from "nexus-icons";
 import { useEffect, useLayoutEffect, useRef, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { clampNumber, cleanNumberText, DEFAULT_NUMBER_LOCALE, formatNumber, getNumberSymbols, isPartialNumber, parseNumber, readPastedNumber, roundDecimal, stepNumber, } from "../../Helpers/NumberHelpers.js";
+import { clampNumber, cleanNumberText, formatNumber, getNumberSymbols, isPartialNumber, parseNumber, readPastedNumber, roundDecimal, stepNumber, } from "../../Helpers/NumberHelpers.js";
+import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { validateNumber } from "../../Helpers/ValidationHelpers.js";
 import { Field, hasContent } from "./Field.js";
 import { setInputValue, useInputField } from "./InputField.js";
@@ -23,7 +24,10 @@ const isNumber = (value) => value !== null && !Number.isNaN(value);
  * @example <NumberBox label="Amount" prefix="Rs" min={0} decimals={2} fixedDecimals grouping required />
  */
 export function NumberBox(props) {
-    const { label, hint, error, design = "standard", size = "md", icon, iconEnd, prefix, suffix, step = 1, stepper = false, clamp = false, readOnlyMessage = "Read-only: this number cannot be changed.", fieldName, validateOn, value, defaultValue, onValueChange, decimals, fixedDecimals = false, grouping = false, locale = DEFAULT_NUMBER_LOCALE, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onPaste, onClick, ...inputProps } = props;
+    const { label, hint, error, design = "standard", size = "md", icon, iconEnd, prefix, suffix, step = 1, stepper = false, clamp = false, readOnlyMessage = "Read-only: this number cannot be changed.", fieldName, validateOn, value, defaultValue, onValueChange, decimals, fixedDecimals = false, grouping = false, locale: ownLocale, className, inputClassName, style, required, min, max, validate, name, form, placeholder, disabled, readOnly, ref, onChange, onBlur, onFocus, onInvalid, onKeyDown, onPaste, onClick, ...inputProps } = props;
+    // Without a locale of its own, the box writes and reads numbers the way the person chose (Number scale, Thousands).
+    const preferred = useNumberLocale();
+    const locale = ownLocale ?? preferred;
     const format = { decimals, fixedDecimals, grouping, locale };
     const { decimal, group } = getNumberSymbols(locale);
     const textRules = { decimals, negative: min === undefined || min < 0 };
@@ -55,8 +59,11 @@ export function NumberBox(props) {
     const readOnlyNotice = useReadOnlyNotice(Boolean(readOnly) && !disabled, field.elementRef, readOnlyMessage, {
         keys: ["ArrowUp", "ArrowDown", "PageUp", "PageDown"],
     });
+    // The number the box holds, as last read in the marks it was written in.
+    const numberRef = useRef(initial);
     /** Writes what depends on the value straight to the DOM, so typing re-renders nothing: the hidden input and the button limits. */
     function sync(number) {
+        numberRef.current = number;
         if (hiddenRef.current)
             hiddenRef.current.value = isNumber(number) ? String(number) : "";
         for (const [button, direction] of [
@@ -69,6 +76,21 @@ export function NumberBox(props) {
                 button?.removeAttribute("aria-disabled");
         }
     }
+    // The person changed how numbers are written (Number scale, Thousands): the number the box held is written again in
+    // the new marks. Its text is not read again, because by now it may be either: React has already rewritten an untouched
+    // box's default text, and "1,250.5" read with a decimal comma would be 1.2505. Runs before the effects below read it.
+    const localeRef = useRef(locale);
+    useLayoutEffect(() => {
+        const previous = localeRef.current;
+        localeRef.current = locale;
+        const input = field.elementRef.current;
+        const number = numberRef.current;
+        if (previous === locale || !input || !input.value || !isNumber(number))
+            return;
+        input.value = document.activeElement === input ? editText(number) : displayText(number);
+        sync(number);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [locale]);
     // A controlled value that differs from the box's text replaces it. Text that already means this number ("12.") stays.
     useLayoutEffect(() => {
         const input = field.elementRef.current;

package/dist/Components/Inputs/RowsInput.js

@@ -135,10 +135,10 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
         add: (values, index) => {
             actions.add(values, index);
         },
-        remove: index => {
+        remove: (index, options) => {
             const key = store.keyAt(index);
             if (key)
-                store.remove(key);
+                store.remove(key, options);
         },
         validate: () => {
             const place = store.validateAll();

package/dist/Components/Inputs/Slider.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useEffect, useEffectEvent, useRef, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { clampNumber, countDecimals, formatNumber, roundDecimal } from "../../Helpers/NumberHelpers.js";
+import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { GroupFooter, leavesField, OPTION_ATTRIBUTE, useChoiceField } from "./ChoiceField.js";
 import { hasContent } from "./Field.js";
 import { setInputValue } from "./InputField.js";
@@ -54,7 +55,9 @@ function SliderField(props) {
     const { readOnlyMessage = range ? "Read-only: this range cannot be changed." : "Read-only: this value cannot be changed." } = props;
     const span = max - min || 1;
     const initial = (values ?? defaultValues).map(value => clampNumber(value, min, max));
-    const text = (value) => (format ? format(value) : `${prefix ?? ""}${formatNumber(value, { decimals, fixedDecimals, grouping, locale })}${suffix ?? ""}`);
+    // Without a locale of its own, the values are written the way the person chose.
+    const numbers = useNumberLocale();
+    const text = (value) => (format ? format(value) : `${prefix ?? ""}${formatNumber(value, { decimals, fixedDecimals, grouping, locale: locale ?? numbers })}${suffix ?? ""}`);
     const fraction = (value) => (clampNumber(value, min, max) - min) / span;
     const controlRef = useRef(null);
     const valueRef = useRef(null);

package/dist/Components/Inputs/TabularForm.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconArrowDown, iconArrowUp, iconCopy, iconDotsVertical, iconLock, iconRowInsertBottom, iconRowInsertTop, iconTrash, 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 { Menu } from "../Documents/Menu.js";
@@ -35,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. */
@@ -64,11 +66,17 @@ const TabularRow = memo(function TabularRow({ store, rowKey, index, count, colum
             items.push({ separator: true });
         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 && !fixed) {
+    // 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 && (_jsxs("div", { role: "cell", className: "nx-tabular__num", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), items.length > 0 && (_jsx(Menu, { items: items, 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 }) }) }))] })), 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)))] }));
+    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
@@ -108,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;
@@ -238,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;
@@ -286,7 +311,7 @@ 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, cellLock: rows.cellLock, cellParams: rows.cellParams, rowLock: rows.rowLock }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll, rows.cellLock, rows.cellParams, rows.rowLock]);
+    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
@@ -307,7 +332,7 @@ export function TabularForm(props) {
             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 (rows.rowLock(key, start + offset))
+                if (lockedKeys.has(key) || rows.rowLock(key, start + offset))
                     continue;
                 const lock = rows.cellLock(key, params.name, start + offset);
                 if (!lock) {
@@ -323,9 +348,13 @@ export function TabularForm(props) {
         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]);
+    }, [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 numberWidth = `calc(${Math.max(2, String(count).length)}ch + 18px + var(--nx-tabular-menu))`;
+    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,
@@ -333,16 +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];
         }),
+        actionsWidth,
     ]
         .filter(Boolean)
         .join(" ");
-    const minWidth = `calc(${[numbered ? numberWidth : "0px", ...widths].join(" + ")})`;
+    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: viewportMax ?? 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;
                                         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));
-                                    })] }) }), _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() })] }));
+                                    }), 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/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, with the panel's arrow on the button. 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,15 +1,16 @@
 "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, useLayoutEffect, useRef, useState } from "react";
-import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { followAnchor, isPopoverOpen, placeUnderAnchor, showPanel } from "../../Helpers/PopoverHelpers.js";
 import { Button } from "../Documents/Button.js";
-import { ThemePicker } from "./ThemePicker.js";
+import { PreferencesPicker, ThemePicker } from "./ThemePicker.js";
 /**
- * A palette button that opens the theme picker below it, with the panel's arrow on the button. 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);
     const panelRef = useRef(null);
@@ -42,8 +43,8 @@ export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, .
                     else if (isPopoverOpen(panel))
                         panel?.hidePopover();
                     else if (panel && typeof panel.showPopover === "function") {
-                        panel.showPopover();
+                        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: _jsx(ThemePicker, { ...pickerProps }) })] }));
+                } }), _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;

package/dist/Components/Viewers/Avatar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "nexus-icons";
+import { useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { avatarTone, initials } from "../../Helpers/DropdownHelpers.js";
+/**
+ * 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 function Avatar({ name, src, size = "md", className, onChangePicture, changeLabel = "Change picture", role, tabIndex }) {
+    const url = typeof src === "string" ? src.trim() : "";
+    const [failed, setFailed] = useState(null);
+    const photo = url !== "" && failed !== url;
+    const face = photo ? _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setFailed(url) }) : initials(name);
+    const shared = { className: cx("nx-avatar", size !== "md" && `nx-avatar--${size}`, className), "data-tone": photo ? undefined : avatarTone(name) };
+    if (!onChangePicture) {
+        return (_jsx("span", { ...shared, "aria-hidden": "true", children: face }));
+    }
+    return (_jsxs("button", { ...shared, type: "button", role: role, tabIndex: tabIndex, "aria-label": changeLabel, title: changeLabel, onClick: onChangePicture, children: [face, _jsx("span", { className: "nx-avatar__veil", "aria-hidden": "true", children: _jsx(Icon, { name: "camera", size: "40%" }) })] }));
+}