nexus-shared 2.0.0 → 3.1.0

package/dist/Components/Forms/SubmitForm.js

@@ -13,20 +13,29 @@ function ProblemList({ form, names }) {
     const { shown, more } = namesToShow(names);
     return (_jsxs(_Fragment, { children: [names.length === 1 ? "1 field needs attention: " : `${names.length} fields need attention: `, shown.map((name, index) => (_jsxs("span", { children: [index > 0 && (index === shown.length - 1 && !more ? (shown.length > 2 ? ", and " : " and ") : ", "), _jsx("button", { type: "button", className: "nx-form-status__jump", onClick: () => form.focus(name), children: formInputLabel(form.inputs.find(params => params.name === name), name) })] }, name))), more > 0 && `, and ${more} more`, "."] }));
 }
-/** One line of what the form is doing: loading, saving, what needs attention, unsaved changes, or when it saved. */
-function FormStatusLine({ form, status }) {
+/**
+ * One line of what the form is doing: loading, saving, what needs attention, unsaved changes, or when it saved. In
+ * `errors` mode only an error that belongs to no field: each field already shows its own, all of them in view.
+ */
+function FormStatusLine({ form, status, mode }) {
     const preferences = useDatePreferences();
     let tone = "muted";
     let content = null;
-    if (status.loading) {
+    const errorsOnly = mode === "errors";
+    const names = errorsOnly ? [] : status.problems;
+    const problems = Boolean(status.message || names.length);
+    if (errorsOnly && !problems) {
+        // Nothing went wrong outside the fields, and nothing else is this form's to say.
+    }
+    else if (status.loading) {
         content = (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }), _jsx("span", { children: "Loading\u2026" })] }));
     }
     else if (status.submitting) {
         content = _jsx("span", { children: "Saving\u2026" });
     }
-    else if (status.message || status.problems.length) {
+    else if (problems) {
         tone = "error";
-        content = (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsxs("span", { children: [status.message, status.message && status.problems.length > 0 && " ", status.problems.length > 0 && _jsx(ProblemList, { form: form, names: status.problems })] })] }));
+        content = (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsxs("span", { children: [status.message, status.message && names.length > 0 && " ", names.length > 0 && _jsx(ProblemList, { form: form, names: names })] })] }));
     }
     else if (status.changed) {
         content = _jsx("span", { children: status.draftSavedAt ? "Unsaved changes, kept on this device." : "Unsaved changes." });
@@ -35,7 +44,7 @@ function FormStatusLine({ form, status }) {
         tone = "success";
         content = (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconCircleCheck }), _jsxs("span", { children: ["Saved at ", formatFormTime(status.savedAt, preferences), "."] })] }));
     }
-    return (_jsx("p", { className: cx("nx-form-status", `nx-form-status--${tone}`), "aria-live": "polite", children: content }));
+    return (_jsx("p", { className: cx("nx-form-status", `nx-form-status--${tone}`, errorsOnly && "nx-form-status--errors"), "aria-live": "polite", children: content }));
 }
 /**
  * Asks "Discard your changes?" when the form has changes. Resolves `true` to go on (nothing changed, or the user chose
@@ -63,10 +72,12 @@ export async function confirmDiscard(form) {
  *   <ApiForm form={form} buttons={false} inputs={inputs} api={api} />
  * </Popup>
  */
-export function FormButtons({ form, submitLabel = "Save", submitIcon, onCancel, confirmCancel = true, cancelLabel = "Cancel", resettable = false, resetLabel = "Reset", align = "end", size = "md", readOnly = false, className, }) {
+export function FormButtons({ form, submitLabel = "Save", submitIcon, onCancel, confirmCancel = true, cancelLabel = "Cancel", resettable = false, resetLabel = "Reset", align = "end", size = "md", readOnly = false, statusLine = "full", block = false, loadingLabel = "Loading…", className, }) {
     const store = form;
     const status = useFormStatus(store);
     useEffect(() => store.addButtons(), [store]);
+    // The quiet line says nothing while the values load, so the button does: same place, same size, no jump after.
+    const loadingInButton = statusLine === "errors" && status.loading;
     async function cancel() {
         if (confirmCancel && !(await confirmDiscard(store)))
             return;
@@ -77,13 +88,13 @@ export function FormButtons({ form, submitLabel = "Save", submitIcon, onCancel,
     const actions = [
         resettable && !readOnly && (_jsx(Button, { size: buttonSize, variant: "ghost", icon: _jsx(InlineIcon, { icon: iconRefresh }), disabled: !status.changed || status.submitting || status.loading, onClick: () => store.reset(), children: resetLabel }, "reset")),
         onCancel && (_jsx(Button, { size: buttonSize, onClick: () => void cancel(), children: cancelLabel }, "cancel")),
-        !readOnly && (_jsx(Button, { type: "submit", form: status.formId ?? undefined, size: buttonSize, variant: "primary", loading: status.submitting, disabled: status.loading, icon: submitIcon === undefined ? _jsx(InlineIcon, { icon: iconDeviceFloppy }) : (submitIcon ?? undefined), children: submitLabel }, "submit")),
+        !readOnly && (_jsx(Button, { type: "submit", form: status.formId ?? undefined, size: buttonSize, variant: "primary", loading: status.submitting || loadingInButton, disabled: status.loading, icon: submitIcon === undefined ? _jsx(InlineIcon, { icon: iconDeviceFloppy }) : (submitIcon ?? undefined), children: loadingInButton ? loadingLabel : submitLabel }, "submit")),
     ].filter(Boolean);
     if (align === "start")
         actions.reverse();
-    const line = _jsx(FormStatusLine, { form: store, status: status }, "status");
+    const line = _jsx(FormStatusLine, { form: store, status: status, mode: statusLine }, "status");
     const bar = actions.length ? (_jsx("div", { className: "nx-form-buttons__actions", children: actions }, "actions")) : null;
-    return _jsx("div", { className: cx("nx-form-buttons", `nx-form-buttons--${align}`, className), children: align === "start" ? [bar, line] : [line, bar] });
+    return _jsx("div", { className: cx("nx-form-buttons", `nx-form-buttons--${align}`, block && "nx-form-buttons--block", className), children: align === "start" ? [bar, line] : [line, bar] });
 }
 /**
  * A `Form` that submits: every value is checked on Save (the inputs' own rules, the form's `validate`, rows not on the
@@ -104,7 +115,7 @@ export function FormButtons({ form, submitLabel = "Save", submitIcon, onCancel,
  * />
  */
 export function SubmitForm(props) {
-    const { onSubmit: _onSubmit, onSaved: _onSaved, onCancel, confirmCancel, submitLabel, submitIcon, cancelLabel, resettable, resetLabel, resetOnSuccess: _resetOnSuccess, buttons = "end", confirmLeave, id, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...formProps } = props;
+    const { onSubmit: _onSubmit, onSaved: _onSaved, onCancel, confirmCancel, submitLabel, submitIcon, cancelLabel, resettable, resetLabel, resetOnSuccess: _resetOnSuccess, buttons = "end", statusLine, confirmLeave, id, className, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...formProps } = props;
     const store = useFormStore(props.form);
     const formRef = useRef(null);
     const generatedId = useId();
@@ -194,5 +205,5 @@ export function SubmitForm(props) {
     return (_jsxs("form", { ref: formRef, id: formId, className: cx("nx-submit-form", className), style: style, noValidate: true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onSubmit: event => {
             event.preventDefault();
             void submit();
-        }, onKeyDown: onKeyDown, children: [_jsx(Form, { ...formProps, form: store }), buttons !== false && (_jsx(FormButtons, { form: store, align: buttons, submitLabel: submitLabel, submitIcon: submitIcon, onCancel: onCancel, confirmCancel: confirmCancel, cancelLabel: cancelLabel, resettable: resettable, resetLabel: resetLabel, size: formProps.size, readOnly: locked }))] }));
+        }, onKeyDown: onKeyDown, children: [_jsx(Form, { ...formProps, form: store }), buttons !== false && (_jsx(FormButtons, { form: store, align: buttons, submitLabel: submitLabel, submitIcon: submitIcon, onCancel: onCancel, confirmCancel: confirmCancel, cancelLabel: cancelLabel, resettable: resettable, resetLabel: resetLabel, size: formProps.size, readOnly: locked, statusLine: statusLine }))] }));
 }

package/dist/Components/Inputs/DateTimePicker.js

@@ -188,7 +188,8 @@ export function DateTimePicker(props) {
             const cap = natural > room ? `${Math.max(0, room)}px` : "";
             if (panel.style.maxHeight !== cap)
                 panel.style.maxHeight = cap;
-            placeUnderAnchor(panel, anchor, { gap: PANEL_GAP, margin: PANEL_MARGIN });
+            // No arrow: the panel opens flush under the box and is read as the field's own calendar.
+            placeUnderAnchor(panel, anchor, { gap: PANEL_GAP, margin: PANEL_MARGIN, arrow: false });
         };
         place();
         if (focusPanelRef.current) {

package/dist/Components/Inputs/DropdownParts.d.ts

@@ -11,7 +11,7 @@ export declare const DROPDOWN_STATE_LABELS: Record<DropdownValueState, string>;
 /** The tooltip of a current value that cannot be picked again. */
 export declare const DROPDOWN_STATE_NOTES: Record<DropdownValueState, string>;
 type AnyColumn = DropdownColumn<never>;
-/** A round photo, or the initials of the name on a soft tone when there is no photo or it fails to load. */
+/** The shared `Avatar`, sized to the dropdown's pictures by its class. */
 export declare function DropdownAvatar({ src, name }: {
     src: unknown;
     name: string;

package/dist/Components/Inputs/DropdownParts.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Icon, iconCheck, iconX, InlineIcon } from "nexus-icons";
 import { isValidElement, memo, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { avatarTone, initials, isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { isMediaColumn, readField } from "../../Helpers/DropdownHelpers.js";
+import { Avatar } from "../Viewers/Avatar.js";
 export const DROPDOWN_STATE_LABELS = {
     inactive: "Inactive",
     unavailable: "Unavailable",
@@ -15,12 +16,9 @@ export const DROPDOWN_STATE_NOTES = {
     unavailable: "No longer in the list: kept as the current value. Once removed, it cannot be chosen again.",
     unknown: "Not found in the list: kept as the current value. Once removed, it cannot be chosen again.",
 };
-/** A round photo, or the initials of the name on a soft tone when there is no photo or it fails to load. */
+/** The shared `Avatar`, sized to the dropdown's pictures by its class. */
 export function DropdownAvatar({ src, name }) {
-    const url = typeof src === "string" ? src.trim() : "";
-    const [failed, setFailed] = useState(null);
-    const photo = url !== "" && failed !== url;
-    return (_jsx("span", { className: "nx-dropdown-avatar", "data-tone": photo ? undefined : avatarTone(name), "aria-hidden": "true", children: photo ? _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setFailed(url) }) : initials(name) }));
+    return _jsx(Avatar, { name: name, src: src, className: "nx-dropdown-avatar" });
 }
 /** A small 4:3 picture, such as a flag or a logo; an empty frame when there is none or it fails to load. */
 export function DropdownImage({ src }) {

package/dist/Components/Inputs/GroupForm.js

@@ -64,7 +64,7 @@ const GroupSection = memo(function GroupSection({ store, rowKey, index, count, i
         store.touch(rowKey, cell.dataset.nxCell ?? "");
     }
     const heading = (_jsxs(_Fragment, { children: [_jsx("span", { id: titleId, className: "nx-group-form__title", children: title }), tags.map(tag => (_jsx("span", { className: "nx-group-form__tag", children: tag }, tag))), summary && _jsx("span", { className: "nx-group-form__summary", children: summary }), problems > 0 && (_jsxs("span", { className: "nx-group-form__problems", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), problems, " to fix"] }))] }));
-    return (_jsxs("li", { className: "nx-group-form__section", "data-nx-row": rowKey, "data-open": open || undefined, "data-problem": problems > 0 || undefined, children: [_jsxs("div", { className: "nx-group-form__head", children: [context.collapsible ? (_jsxs("button", { type: "button", className: "nx-group-form__toggle", "aria-expanded": open, "aria-controls": open ? bodyId : undefined, "data-nx-row-actions": "", onClick: () => setCollapsed(open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-group-form__chevron" }), heading] })) : (_jsx("div", { className: "nx-group-form__heading", children: heading })), (context.sortable || context.canAdd || context.removable) && (_jsxs("div", { className: "nx-group-form__actions", children: [context.sortable && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowUp }), "aria-label": `Move ${name} up`, title: "Move up", disabled: index === 0, onClick: () => onAction("move-up", rowKey) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowDown }), "aria-label": `Move ${name} down`, title: "Move down", disabled: index === count - 1, onClick: () => onAction("move-down", rowKey) })] })), context.canAdd && (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconCopy }), "aria-label": `Duplicate ${name}`, title: "Duplicate", onClick: () => onAction("duplicate", rowKey) })), context.removable && (_jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": `Remove ${name}`, title: "Remove", onClick: () => onAction("remove", rowKey) }))] }))] }), open && (_jsx("div", { id: bodyId, role: "group", "aria-labelledby": titleId, className: "nx-group-form__body", onBlur: onBlur, children: inputs.map(params => params.hidden ? null : (_jsx("div", { className: cx("nx-group-form__cell", CHOICE_TYPES.has(params.type) && "nx-group-form__cell--choice"), style: { "--nx-span": Math.max(1, Math.min(12, params.span ?? 12)) }, "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: params, index: index, error: store.shownError(rowKey, params.name), layout: "group", idPrefix: context.idPrefix, size: context.size, design: context.design, readOnly: context.readOnly, disabled: context.disabled }, store.revision(rowKey, params.name)) }, params.name))) }))] }));
+    return (_jsxs("li", { className: "nx-group-form__section", "data-nx-row": rowKey, "data-open": open || undefined, "data-problem": problems > 0 || undefined, children: [_jsxs("div", { className: "nx-group-form__head", children: [context.collapsible ? (_jsxs("button", { type: "button", className: "nx-group-form__toggle", "aria-expanded": open, "aria-controls": open ? bodyId : undefined, "data-nx-row-actions": "", onClick: () => setCollapsed(open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-group-form__chevron" }), heading] })) : (_jsx("div", { className: "nx-group-form__heading", children: heading })), (context.sortable || context.canAdd || context.removable) && (_jsxs("div", { className: "nx-group-form__actions", children: [context.sortable && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowUp }), "aria-label": `Move ${name} up`, title: "Move up", disabled: index === 0, onClick: () => onAction("move-up", rowKey) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconArrowDown }), "aria-label": `Move ${name} down`, title: "Move down", disabled: index === count - 1, onClick: () => onAction("move-down", rowKey) })] })), context.canAdd && (_jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconCopy }), "aria-label": `Duplicate ${name}`, title: "Duplicate", onClick: () => onAction("duplicate", rowKey) })), context.removable && (_jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), "aria-label": `Remove ${name}`, title: "Remove", onClick: () => onAction("remove", rowKey) }))] }))] }), open && (_jsx("div", { id: bodyId, role: "group", "aria-labelledby": titleId, className: "nx-group-form__body", onBlur: onBlur, children: inputs.map(params => params.hidden ? null : (_jsx("div", { className: cx("nx-group-form__cell", CHOICE_TYPES.has(params.type) && "nx-group-form__cell--choice"), style: { "--nx-span": Math.max(1, Math.min(12, params.span ?? 12)) }, "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: "group", idPrefix: context.idPrefix, size: context.size, design: context.design, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index) }, store.revision(rowKey, params.name)) }, params.name))) }))] }));
 });
 /**
  * The rows of a `TabularForm` as sections: each row's inputs with their own labels, on a 12-column grid (`span` in
@@ -153,6 +153,8 @@ export function GroupForm(props) {
         idPrefix: frame.id,
         size,
         design,
+        cellLock: rows.cellLock,
+        cellParams: rows.cellParams,
         readOnly,
         disabled,
         removable,
@@ -164,7 +166,7 @@ export function GroupForm(props) {
         preferences,
         sectionTitle,
         summary,
-    }), [frame.id, size, design, readOnly, disabled, removable, sortable, rows.canAdd, collapsible, defaultCollapsed, snapshot.showAll, preferences, sectionTitle, summary]);
+    }), [frame.id, size, design, rows.cellLock, rows.cellParams, readOnly, disabled, removable, sortable, rows.canAdd, collapsible, defaultCollapsed, snapshot.showAll, preferences, sectionTitle, summary]);
     const invalid = Boolean(error || snapshot.message || snapshot.invalidRows);
     return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-group-form", `nx-group-form--${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 }), count === 0 ? (_jsx("p", { className: "nx-group-form__empty", children: frame.emptyMessage })) : (_jsx("ol", { ref: listRef, className: "nx-group-form__list", children: snapshot.keys.map((key, index) => (_jsx(GroupSection, { store: store, rowKey: key, index: index, count: count, inputs: inputs, context: context, isNew: !loadedKeys.has(key), onAction: onAction }, `${snapshot.generation}:${key}`))) })), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, 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/InputRenderer.d.ts

@@ -21,6 +21,8 @@ export interface InputOverrides {
     design?: InputDesign;
     /** On top of the params: `true` makes the input read-only even when its params do not. */
     readOnly?: boolean;
+    /** Replaces the params' own read-only note, for a cell locked by `cellReadOnly` rather than by its params. */
+    readOnlyMessage?: string;
     /** On top of the params, like `readOnly`. */
     disabled?: boolean;
     fieldName?: string;

package/dist/Components/Inputs/InputRenderer.js

@@ -25,7 +25,7 @@ import { TreeView } from "./TreeView.js";
 export function renderInput(params, overrides = {}) {
     if (params.hidden)
         return null;
-    const { type, span: _span, width: _width, grow: _grow, hidden: _hidden, onValueChange: ownChange, ...rest } = params;
+    const { type, section: _section, span: _span, width: _width, grow: _grow, hidden: _hidden, dependsOn: _dependsOn, onValueChange: ownChange, ...rest } = params;
     const { defaultValue, onValueChange, readOnly, disabled, ...set } = overrides;
     const props = { ...rest, ...set };
     if (readOnly)

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/ReadOnlyNotice.js

@@ -88,7 +88,8 @@ function ReadOnlyNote({ ref, message }) {
             return;
         if (!isPopoverOpen(note))
             note.showPopover?.();
-        const place = () => placeUnderAnchor(note, shown.anchor.getBoundingClientRect(), { align: shown.align });
+        // No arrow: the note is not a panel, and it answers the whole box rather than one button in it.
+        const place = () => placeUnderAnchor(note, shown.anchor.getBoundingClientRect(), { align: shown.align, arrow: false });
         place();
         return followAnchor(place);
     }, [shown]);

package/dist/Components/Inputs/RowsInput.d.ts

@@ -34,7 +34,16 @@ export declare function useRowsInput<TRow extends RowValue>(props: RowsInputProp
         move(key: string, delta: number): void;
         undo(): void;
     };
+    cellLock: (key: string, name: string, index: number) => string | boolean | null | undefined;
+    rowLock: (key: string | null, index: number) => string | boolean | null | undefined;
+    cellParams: (key: string, params: InputParams, index: number) => InputParams;
 };
+/** What a layout asks for each cell: the reason it is generated, `true` for no reason, or nothing. */
+export type CellLock = (key: string, name: string, index: number) => string | boolean | null | undefined;
+/** What a layout asks for each cell: its own params, which are the column's unless `cellParams` answers for its row. */
+export type CellParams = (key: string, params: InputParams, index: number) => InputParams;
+/** What a layout asks for each row: the reason nobody may change it, `true` for no reason, or nothing. From `rowReadOnly`. */
+export type RowLock = (key: string | null, index: number) => string | boolean | null | undefined;
 /** The first control of an element that takes focus. */
 export declare function firstFocusable(element: Element | null): HTMLElement | null;
 /** Subscribes a row's component to its row: it renders again only when the row's messages or code-set values change. */
@@ -55,13 +64,15 @@ export interface RowCellProps {
     design?: InputDesign;
     readOnly: boolean;
     disabled: boolean;
+    /** This one cell holds a generated value: the reason, `true` for no reason, or nothing. From `cellReadOnly`. */
+    lock?: string | boolean | null;
 }
 /**
  * One input of one row. It starts from the store's value when it mounts and writes every change back, so typing renders
  * nothing; a value set from code mounts it again (its key holds the value's revision). In a table the column header is
  * the label, so the input is named "City, row 2" for screen readers and its messages still say "City".
  */
-export declare const RowCell: import("react").MemoExoticComponent<({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled }: RowCellProps) => ReactNode>;
+export declare const RowCell: import("react").MemoExoticComponent<({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled, lock }: RowCellProps) => ReactNode>;
 /** The legend of the rows, with the required mark and, when read-only, a lock. */
 export declare function RowsLegend({ id, label, required, lock }: {
     id: string;

package/dist/Components/Inputs/RowsInput.js

@@ -26,9 +26,9 @@ function sameRows(a, b) {
  * listener, a parent form's data and reset, and the handle given to `ref`.
  */
 export function useRowsInput(props, fallbackItem, layoutRef) {
-    const { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, itemLabel, itemLabelPlural, value, defaultValue, name, readOnly = false, disabled = false, ref } = props;
+    const { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, deriveRows, itemLabel, itemLabelPlural, value, defaultValue, name, readOnly = false, disabled = false, ref } = props;
     const preferences = useDatePreferences();
-    const options = { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, itemLabel, itemLabelPlural, fallbackItem, context: { preferences } };
+    const options = { inputs, required, min, max, unique, validate, rowKey, newRow, onRowChange, deriveRows, itemLabel, itemLabelPlural, fallbackItem, context: { preferences } };
     const [store] = useState(() => new RowsStore(options, value ?? defaultValue ?? []));
     const snapshot = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
     const proxyRef = useRef(null);
@@ -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();
@@ -160,7 +160,49 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [store]);
-    return { store, snapshot, proxyRef, onInvalid, canAdd, actions };
+    // Stable, so a sheet of thousands of rows does not render again because the parent handed a new function.
+    const rowLock = useCallback((key, index) => {
+        const ask = latest.current.props.rowReadOnly;
+        if (!ask || !key)
+            return undefined;
+        const row = store.row(key);
+        return row ? ask(row, index) : undefined;
+    }, [store]);
+    const cellLock = useCallback((key, name, index) => {
+        // A row nobody may change locks every one of its cells, with the row's reason.
+        const whole = rowLock(key, index);
+        if (whole)
+            return whole;
+        const ask = latest.current.props.cellReadOnly;
+        if (!ask)
+            return undefined;
+        const row = store.row(key);
+        return row ? ask(row, name, index) : undefined;
+    }, [store, rowLock]);
+    // A cell's own params, merged once per answer: the same answer gives the same object, so the cell does not draw again.
+    const merged = useRef(new WeakMap());
+    const cellParams = useCallback((key, params, index) => {
+        const ask = latest.current.props.cellParams;
+        if (!ask)
+            return params;
+        const row = store.row(key);
+        const own = row ? ask(row, params.name, index) : null;
+        if (!own)
+            return params;
+        let byColumn = merged.current.get(own);
+        if (!byColumn)
+            merged.current.set(own, (byColumn = new WeakMap()));
+        let result = byColumn.get(params);
+        if (!result) {
+            // Descriptors rather than a spread, so a getter on either side is still read as the cell draws, as it would be
+            // on the column's own params; the column keeps its type and its name whatever the answer holds.
+            const { type: _type, name: _name, ...rest } = Object.getOwnPropertyDescriptors(own);
+            result = Object.defineProperties({}, { ...Object.getOwnPropertyDescriptors(params), ...rest });
+            byColumn.set(params, result);
+        }
+        return result;
+    }, [store]);
+    return { store, snapshot, proxyRef, onInvalid, canAdd, actions, cellLock, rowLock, cellParams };
 }
 function addButtonOf(proxy) {
     return proxy?.closest(".nx-rows")?.querySelector(":scope > .nx-rows__footer .nx-rows__add:not(:disabled)") ?? null;
@@ -191,7 +233,7 @@ export function labelText(params) {
  * nothing; a value set from code mounts it again (its key holds the value's revision). In a table the column header is
  * the label, so the input is named "City, row 2" for screen readers and its messages still say "City".
  */
-export const RowCell = memo(function RowCell({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled }) {
+export const RowCell = memo(function RowCell({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled, lock }) {
     const [initial] = useState(() => store.get(rowKey, params.name));
     const onValueChange = useCallback((next) => store.set(rowKey, params.name, next, "input"), [store, rowKey, params.name]);
     const needsName = params.type === "radio-group" || params.type === "checkbox-group";
@@ -205,6 +247,13 @@ export const RowCell = memo(function RowCell({ store, rowKey, params, index, err
         readOnly,
         disabled,
     };
+    // A generated cell: read-only however its params have it, and saying why, since a box that ignores typing without a
+    // word reads as broken. Code still writes it — that is what makes it generated rather than merely locked.
+    if (lock) {
+        overrides.readOnly = true;
+        if (typeof lock === "string")
+            overrides.readOnlyMessage = lock;
+    }
     if (error !== undefined)
         overrides.error = error;
     // A required radio means one row has it on, which the rows check; each radio alone is not required.

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.d.ts

@@ -5,9 +5,13 @@ import type { RowValue, TabularFormProps } from "../../Interfaces/FormInterfaces
  * 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.