nexus-shared 4.0.0 → 4.1.0

package/dist/Components/Forms/SubmitForm.js

@@ -9,7 +9,7 @@ import { formConfirmAsks, formConfirmQuestion } from "../../Helpers/FormConfirm.
 import { FORM_SAVED_EVENT } from "../../Helpers/InputMemory.js";
 import { Button } from "../Documents/Button.js";
 import { messageBox } from "../Layouts/MessageBox.js";
-import { CrudDetails } from "./CrudParts.js";
+import { askFormQuestion } from "./FormQuestion.js";
 import { Form, formatFormTime, formInputLabel, namesToShow, useFormStatus, useFormStore } from "./Form.js";
 import { FormLeaveGuardContext, pageLeaveGuard, PageLeaveGuardContext, unloadLeaveGuard } from "./FormLeaveGuard.js";
 /** The problems after a submit, each a button that goes to its input: "2 fields need attention: Email, Phone." */
@@ -159,20 +159,7 @@ async function askBeforeSaving(confirm, values, context, makeBody) {
     const body = makeBody ? await makeBody(values, context) : values;
     if (context.signal.aborted)
         return false;
-    const question = formConfirmQuestion(confirm, values, body);
-    const details = question.details;
-    return messageBox.confirm({
-        tone: "question",
-        closable: true,
-        closeOnBackdrop: false,
-        signal: context.signal,
-        size: question.size,
-        title: question.title,
-        message: question.message,
-        details: details ? _jsx(CrudDetails, { row: details.row, columns: details.columns, currency: details.currency }) : null,
-        confirmLabel: question.confirmLabel,
-        cancelLabel: question.cancelLabel,
-    });
+    return askFormQuestion(formConfirmQuestion(confirm, values, body), context.signal);
 }
 /** Asks "Discard your changes?" when the form holds changes worth keeping (`isWorthKeeping`): true to go on. */
 export async function confirmDiscard(form) {

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

@@ -0,0 +1,51 @@
+import { type FormValues, type InputParams } from "../../Interfaces/FormInterfaces.ts";
+import type { InputDesign } from "../../Interfaces/InputInterfaces.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+/** An input's name in messages: its `fieldName`, its label when it is text, or its name. */
+export declare function formInputLabel(params: InputParams | undefined, name?: string): string;
+/** What the line under a worked-out input that was typed in says: what was set, or why nothing was. */
+export interface ComputedNote {
+    text: string;
+    /** The figure was refused: nothing was set. */
+    refused: boolean;
+}
+export interface ComputedInputProps {
+    params: InputParams;
+    /** The control's id. */
+    id: string;
+    /** The values it is worked out from as they are now: the form's, or the row's. Read on every draw and commit. */
+    read: () => FormValues;
+    /** The page's `computeWith`, handed to `compute.value` and `compute.solve`. */
+    withValue?: unknown;
+    /** Takes the values `compute.solve` answered as the person's own change. Not called for a refusal or for nothing new. */
+    write: (values: FormValues) => void;
+    /** Another input's params by name, as they are now: its name in the note, its number format, and whether it may change. */
+    inputParams: (name: string) => InputParams | undefined;
+    /** The control id of an input it is worked out from, for the `<output>`'s `for`. */
+    sourceId?: (name: string) => string;
+    size: Size;
+    /** The design around it (a form's); its params' own wins. */
+    design?: InputDesign;
+    /** The values are loading: it shows nothing and takes nothing. */
+    loading?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    /** Why a box that can be typed in is read-only here, for its note. */
+    readOnlyMessage?: string;
+    /**
+     * Drawn in a table cell: no label (the column header is it), named `aria-label` for screen readers, the standard
+     * design, and the line under the box handed to `onNote` - a table cell has no line under it.
+     */
+    cell?: {
+        "aria-label": string;
+    };
+    /** Hears the note as it comes and goes (`cell`): a table shows it in the line under the rows. */
+    onNote?: (note: ComputedNote | null) => void;
+}
+/**
+ * An input worked out from others (`compute`): the field's frame (label, hint, prefix, suffix, size, design) around an
+ * `<output>` that says the value as it is now, in the person's number format, on the read-only tint - never typed in, so
+ * no lock, no note, no steppers and no Tab stop. Blank while the values load, and for a value that is no figure. A Number
+ * input with `compute.solve` is a box that can be typed in instead (`SolvableField`).
+ */
+export declare function ComputedInput(props: ComputedInputProps): import("react").JSX.Element;

package/dist/Components/Inputs/ComputedInput.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconAlertCircle, InlineIcon } from "nexus-icons";
+import { useLayoutEffect, useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { computedText, computedValue } from "../../Helpers/InputConditions.js";
+import { inputFieldName } from "../../Helpers/InputParamsHelpers.js";
+import { formatNumber, parseNumber, roundDecimal } from "../../Helpers/NumberHelpers.js";
+import { useInputDesign, useNumberLocale } from "../../Helpers/UserPreferences.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
+import { Field } from "./Field.js";
+import { NumberBox } from "./NumberBox.js";
+/*
+ * An input worked out from others (`compute`), wherever it is drawn: a form's cell or a row's. It holds no value of its
+ * own; it reads the values it comes from through `read` and, when it can be typed in (`compute.solve`), writes the ones
+ * the typed figure gives through `write`, as the person's own change (`FormStore.setFromPerson`, `RowsStore.setFromPerson`).
+ */
+/** An input's name in messages: its `fieldName`, its label when it is text, or its name. */
+export function formInputLabel(params, name = "") {
+    if (!params)
+        return name;
+    return inputFieldName(params) ?? (typeof params.label === "string" ? params.label : params.name);
+}
+/**
+ * An input worked out from others (`compute`): the field's frame (label, hint, prefix, suffix, size, design) around an
+ * `<output>` that says the value as it is now, in the person's number format, on the read-only tint - never typed in, so
+ * no lock, no note, no steppers and no Tab stop. Blank while the values load, and for a value that is no figure. A Number
+ * input with `compute.solve` is a box that can be typed in instead (`SolvableField`).
+ */
+export function ComputedInput(props) {
+    const { params, id, read, withValue, sourceId, size, loading = false, cell } = props;
+    const locale = useNumberLocale();
+    const own = params;
+    const design = useInputDesign(cell ? "standard" : (own.design ?? props.design));
+    const disabled = Boolean(props.disabled) || Boolean(own.disabled);
+    const text = loading ? "" : computedText(params, computedValue(params, read(), withValue), locale);
+    if (params.compute?.solve && params.type === EInputTypes.Number) {
+        return _jsx(SolvableField, { ...props, text: text, design: design, disabled: disabled });
+    }
+    const messageId = `${id}-message`;
+    const hint = cell ? undefined : own.hint;
+    // The inputs it is worked out from, as an output names them.
+    const from = sourceId ? params.compute?.from.map(sourceId).join(" ") : "";
+    return (_jsx(Field, { controlId: id, messageId: messageId, label: cell ? undefined : params.label, hint: hint, design: design, size: own.size ?? size, icon: own.icon, iconEnd: own.iconEnd, prefix: own.prefix, suffix: own.suffix, readOnly: true, disabled: disabled, raiseLabel: true, className: own.className, children: _jsx("output", { id: id, htmlFor: from || undefined, className: cx("nx-field__control", "nx-field__control--output", params.type === EInputTypes.Number && "nx-field__control--number"), "aria-live": "polite", "aria-label": cell?.["aria-label"], "aria-describedby": hint ? messageId : undefined, "aria-disabled": disabled || undefined, children: _jsx("span", { className: "nx-field__output-text", children: text }) }) }));
+}
+/**
+ * A worked-out Number input that can be typed in (`compute.solve`): a NumberBox showing the figure worked forward, its
+ * own Tab stop, in the person's number format. Typing does nothing until the person leaves the box or presses Enter;
+ * then `solve` answers the inputs' values that give the figure, `write` takes them as the person's change, and the box
+ * shows the figure worked forward again, with a line under it that says what was set (or why nothing was). The hint and
+ * that line share one place, so nothing below moves when it comes and goes. Escape puts back what the box showed.
+ */
+function SolvableField(props) {
+    const { params, id, read, withValue, write, inputParams, size, loading = false, cell, onNote, readOnlyMessage, text, design, disabled } = props;
+    const own = params;
+    const preferred = useNumberLocale();
+    const [note, setNote] = useState(null);
+    const format = { decimals: own.decimals, fixedDecimals: own.fixedDecimals ?? own.decimals !== undefined, grouping: own.grouping ?? true, locale: own.locale ?? preferred };
+    const readOnly = Boolean(props.readOnly) || Boolean(own.readOnly);
+    const shownNote = note && note.at === text ? note : null;
+    const shownText = shownNote?.text ?? null;
+    const shownRefused = Boolean(shownNote?.refused);
+    // A table hears the note as it comes and goes, and that it went with the cell (its row scrolled away).
+    useLayoutEffect(() => {
+        if (!onNote)
+            return;
+        onNote(shownText === null ? null : { text: shownText, refused: shownRefused });
+    }, [onNote, shownText, shownRefused]);
+    useLayoutEffect(() => (onNote ? () => onNote(null) : undefined), [onNote]);
+    /** The figure worked forward from the values as they are now: as a number, and as the box writes it. */
+    const forward = () => {
+        const value = computedValue(params, read(), withValue);
+        const number = typeof value === "number" ? value : typeof value === "string" && value.trim() !== "" ? Number(value) : Number.NaN;
+        return Number.isFinite(number) ? { number, text: formatNumber(number, format) } : { number: null, text: "" };
+    };
+    const number = loading ? null : forward().number;
+    /** The box shows the figure worked forward: without group marks while it is being typed in. */
+    function showForward(input) {
+        const now = forward();
+        input.value = now.number === null ? "" : formatNumber(now.number, document.activeElement === input ? { ...format, grouping: false } : format);
+    }
+    /** A source input's value as its box writes it, for the line under the box. */
+    function written(name, value) {
+        const sourceParams = inputParams(name);
+        if (typeof value === "number" && (!sourceParams || sourceParams.type === EInputTypes.Number)) {
+            const decimals = sourceParams?.decimals;
+            return formatNumber(value, { decimals, fixedDecimals: sourceParams?.fixedDecimals ?? decimals !== undefined, grouping: sourceParams?.grouping ?? true, locale: sourceParams?.locale ?? preferred });
+        }
+        return value === null || value === undefined ? "nothing" : String(value);
+    }
+    /** Works the typed figure back into the inputs it comes from. Answers whether the box had a new figure to take. */
+    function commit(input) {
+        const solve = params.compute?.solve;
+        const now = forward();
+        const parsed = parseNumber(input.value, format.locale);
+        if (!solve || loading || readOnly || disabled || parsed === null || Number.isNaN(parsed)) {
+            showForward(input);
+            return false;
+        }
+        const typed = own.decimals === undefined ? parsed : roundDecimal(parsed, own.decimals);
+        const typedText = formatNumber(typed, format);
+        if (typedText === now.text) {
+            showForward(input);
+            return false;
+        }
+        let answer;
+        try {
+            answer = solve.call(params.compute, typed, read(), withValue);
+        }
+        catch (error) {
+            console.error(`Working "${params.name}" backwards failed:`, error);
+            answer = `${typedText} could not be worked back into the figures it comes from.`;
+        }
+        if (answer && typeof answer === "object") {
+            // A figure is never written into an input the person could not change themselves.
+            const locked = Object.keys(answer.values)
+                .map(name => inputParams(name))
+                .find(found => found && (found.readOnly || found.disabled));
+            if (locked)
+                answer = `${formInputLabel(locked, locked.name)} cannot be changed here, so ${typedText} cannot be set.`;
+        }
+        if (typeof answer === "string") {
+            setNote({ text: answer, refused: true, at: now.text });
+            showForward(input);
+            return true;
+        }
+        if (!answer) {
+            showForward(input);
+            return true;
+        }
+        const before = read();
+        write(answer.values);
+        const after = read();
+        const reached = forward();
+        const set = Object.keys(answer.values)
+            .filter(name => !Object.is(before[name], after[name]))
+            .map(name => `${formInputLabel(inputParams(name), name)} set to ${written(name, after[name])}`);
+        const said = set.length ? `${set.join(", ")}.` : "";
+        const words = answer.note ?? (reached.text === typedText ? said : `${typedText} cannot be reached exactly; nearest is ${reached.text}.${said ? ` ${said}` : ""}`);
+        setNote(words ? { text: words, refused: false, at: reached.text } : null);
+        showForward(input);
+        return true;
+    }
+    const hint = own.hint;
+    // In a table the line goes under the rows (`onNote`); a hidden live region still says it from the cell.
+    const footer = cell ? undefined : (_jsxs("span", { className: "nx-field__notes", children: [_jsx("span", { className: cx(shownNote && "nx-field__note--off"), children: hint }), _jsxs("span", { className: cx("nx-field__note", shownNote?.refused && "nx-field__note--refused"), "aria-live": "polite", children: [shownNote?.refused && _jsx(InlineIcon, { icon: iconAlertCircle }), shownNote?.text] })] }));
+    const box = (_jsx(NumberBox, { id: id, label: cell ? undefined : params.label, "aria-label": cell?.["aria-label"], hint: footer, design: design, size: own.size ?? size, icon: own.icon, iconEnd: own.iconEnd, prefix: own.prefix, suffix: own.suffix, placeholder: own.placeholder, decimals: format.decimals, fixedDecimals: format.fixedDecimals, grouping: format.grouping, locale: own.locale, value: number, readOnly: readOnly, readOnlyMessage: readOnlyMessage, disabled: disabled || loading, className: own.className, onBlur: event => {
+            // Where the focus was going: a box the answer sets (a click into Price) mounts again with its value, so the
+            // focus would fall to the page; it goes to the box that took its place (the same id) instead.
+            const next = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : null;
+            if (!commit(event.currentTarget) || !next?.id)
+                return;
+            const nextId = next.id;
+            setTimeout(() => {
+                const active = document.activeElement;
+                if (next.isConnected || (active && active !== document.body))
+                    return;
+                document.getElementById(nextId)?.focus();
+            });
+        }, onKeyDown: event => {
+            if (event.key !== "Enter" && event.key !== "Escape")
+                return;
+            const input = event.currentTarget;
+            const parsed = parseNumber(input.value, format.locale);
+            const shown = parsed === null || Number.isNaN(parsed) ? "" : formatNumber(own.decimals === undefined ? parsed : roundDecimal(parsed, own.decimals), format);
+            // Nothing new in the box: Enter submits the form (or moves down a table's column) and Escape closes a popup.
+            if (shown === forward().text)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.key === "Enter")
+                commit(input);
+            else
+                showForward(input);
+        } }));
+    if (!cell)
+        return box;
+    return (_jsxs(_Fragment, { children: [box, _jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: shownNote?.text })] }));
+}

package/dist/Components/Inputs/Dropdown.js

@@ -305,7 +305,9 @@ export function Dropdown(props) {
     const activeIndex = !open ? -1 : active >= 0 && active < rows.length ? active : fallbackActive();
     const staleRows = Boolean(loadOptions) && server.status === "loading" && server.items.length > 0;
     // An open server list that has not started its first request yet is loading too: its placeholder rows already show.
-    const busy = loading || pendingRef.current.size > 0 || (Boolean(loadOptions) && (server.status === "loading" || server.status === "more" || (open && server.status === "idle")));
+    // The value itself is still coming (`loading`: a form asking a picker for a remembered value; or its items resolving).
+    const valueBusy = loading || pendingRef.current.size > 0;
+    const busy = valueBusy || (Boolean(loadOptions) && (server.status === "loading" || server.status === "more" || (open && server.status === "idle")));
     // Select all and Clear act on every option the list holds for the search, rendered yet or not, and on the current
     // values shown at its top. The options are split once per list and selection, not on every highlight move.
     const showBulk = open && multiple && selectAll;
@@ -809,7 +811,7 @@ export function Dropdown(props) {
     // The check column, the columns, and an empty last track whose gap keeps text off the row's end.
     const gridColumns = columns ? `auto ${columns.map(column => columnTrack(column)).join(" ")} 0px` : undefined;
     const panelStyle = panelWidth === undefined ? undefined : { width: typeof panelWidth === "number" ? `${panelWidth}px` : panelWidth };
-    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, invalid: invalid, icon: icon, actions: _jsxs(_Fragment, { children: [busy && (_jsx("span", { className: "nx-dropdown__spinner", title: "Loading", "aria-hidden": "true", children: _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) })), showClear && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__clear", tabIndex: -1, "aria-label": "Clear", title: "Clear", onMouseDown: event => event.preventDefault(), onClick: clear, children: _jsx(InlineIcon, { icon: iconX }) })), readOnlyNotice.lock, !readOnly && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__toggle", tabIndex: -1, "aria-label": open ? "Close the list" : "Open the list", "aria-expanded": open, "aria-controls": open ? listId : undefined, disabled: disabled, onMouseDown: event => event.preventDefault(), onClick: () => (open ? closePanel() : openPanel()), children: _jsx(InlineIcon, { icon: iconChevronDown }) }))] }), disabled: disabled, readOnly: readOnly, raiseLabel: values.length > 0 || Boolean(placeholder), className: cx("nx-field--dropdown", className), style: style, children: [_jsxs("div", { className: cx("nx-dropdown__control", multiple ? "nx-dropdown__control--multiple" : "nx-dropdown__control--single"), "data-searchable": searchable || undefined, "data-has-value": values.length > 0 || undefined, onMouseDown: handleControlMouseDown, children: [boxContent, _jsx("input", { autoComplete: "off", spellCheck: false, ...inputProps, ...field.controlProps, type: "text", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": open ? listId : undefined, "aria-activedescendant": activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined, "aria-autocomplete": searchable ? "list" : "none", "aria-busy": busy || undefined, inputMode: searchable ? inputProps.inputMode : "none", name: undefined, form: form, className: cx("nx-field__control", "nx-dropdown__input", inputClassName), placeholder: values.length > 0 ? " " : placeholder || " ", disabled: disabled, readOnly: readOnly, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onClick: handleClick }), _jsx("span", { id: selectionId, className: "nx-visually-hidden", children: values.length > 0 ? `Selected: ${namesOf(values)}` : busy ? "Loading" : "" })] }), name &&
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, invalid: invalid, icon: icon, actions: _jsxs(_Fragment, { children: [busy && (_jsx("span", { className: "nx-dropdown__spinner", title: "Loading", "aria-hidden": "true", children: _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) })), showClear && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__clear", tabIndex: -1, "aria-label": "Clear", title: "Clear", onMouseDown: event => event.preventDefault(), onClick: clear, children: _jsx(InlineIcon, { icon: iconX }) })), readOnlyNotice.lock, !readOnly && (_jsx("button", { type: "button", className: "nx-field__action nx-dropdown__toggle", tabIndex: -1, "aria-label": open ? "Close the list" : "Open the list", "aria-expanded": open, "aria-controls": open ? listId : undefined, disabled: disabled, onMouseDown: event => event.preventDefault(), onClick: () => (open ? closePanel() : openPanel()), children: _jsx(InlineIcon, { icon: iconChevronDown }) }))] }), disabled: disabled, readOnly: readOnly, raiseLabel: values.length > 0 || Boolean(placeholder), className: cx("nx-field--dropdown", className), style: style, children: [_jsxs("div", { className: cx("nx-dropdown__control", multiple ? "nx-dropdown__control--multiple" : "nx-dropdown__control--single"), "data-searchable": searchable || undefined, "data-has-value": values.length > 0 || undefined, onMouseDown: handleControlMouseDown, children: [boxContent, _jsx("input", { autoComplete: "off", spellCheck: false, ...inputProps, ...field.controlProps, type: "text", role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": open ? listId : undefined, "aria-activedescendant": activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined, "aria-autocomplete": searchable ? "list" : "none", "aria-busy": valueBusy || undefined, inputMode: searchable ? inputProps.inputMode : "none", name: undefined, form: form, className: cx("nx-field__control", "nx-dropdown__input", inputClassName), placeholder: values.length > 0 ? " " : placeholder || " ", disabled: disabled, readOnly: readOnly, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onClick: handleClick }), _jsx("span", { id: selectionId, className: "nx-visually-hidden", children: values.length > 0 ? `Selected: ${namesOf(values)}` : valueBusy ? "Loading" : "" })] }), name &&
                         (multiple ? (values.map(value => _jsx("input", { type: "hidden", name: name, form: form, disabled: disabled, value: optionKey(value) }, optionKey(value)))) : (_jsx("input", { type: "hidden", name: name, form: form, disabled: disabled, value: optionKey(values[0]) })))] }), readOnlyNotice.notice, !readOnly && (_jsx("div", { ref: panelRef, popover: "manual", className: cx("nx-popover", "nx-dropdown-panel", `nx-dropdown-panel--${size}`), style: panelStyle, onKeyDown: handlePanelKeyDown, onBlur: handlePanelBlur, 
                 // The box keeps focus while rows and buttons are pressed. A press on the list itself is left alone, so its
                 // scroll bar can be dragged.

package/dist/Components/Inputs/GroupForm.js

@@ -63,7 +63,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", isBooleanInput(params) && "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))) }))] }));
+    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", isBooleanInput(params) && "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), cells: context }, 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
@@ -154,6 +154,7 @@ export function GroupForm(props) {
         design,
         cellLock: rows.cellLock,
         cellParams: rows.cellParams,
+        computeWith: rows.computeWith,
         readOnly,
         disabled,
         removable,
@@ -165,7 +166,7 @@ export function GroupForm(props) {
         preferences,
         sectionTitle,
         summary,
-    }), [frame.id, size, design, rows.cellLock, rows.cellParams, readOnly, disabled, removable, sortable, rows.canAdd, collapsible, defaultCollapsed, snapshot.showAll, preferences, sectionTitle, summary]);
+    }), [frame.id, size, design, rows.cellLock, rows.cellParams, rows.computeWith, 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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import { type InputParams } from "../../Interfaces/FormInterfaces.ts";
+import { type InputParams, type RowsInputProps } from "../../Interfaces/FormInterfaces.ts";
 import type { InputDesign } from "../../Interfaces/InputInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 /** What a form sets on an input it renders from params. Keys given here replace the params' own, even when `undefined`. */
@@ -30,6 +30,10 @@ export interface InputOverrides {
     fieldName?: string;
     className?: string;
     "aria-label"?: string;
+    /** A tabular or group form's values of the form around it that its rows follow (`RowsInputProps.formValues`). */
+    formValues?: RowsInputProps["formValues"];
+    /** A tabular or group form's `computeWith`: the form's own, for row inputs worked out from it (`RowsInputProps.computeWith`). */
+    computeWith?: unknown;
 }
 /**
  * Renders an input from its params: `{ type: EInputTypes.Email, name: "email", label: "Email", required: true }` gives a

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

@@ -23,6 +23,12 @@ export interface MarkdownEditorProps extends NativeTextAreaProps, TextRules {
     modes?: readonly MarkdownEditorMode[];
     /** Toolbar buttons in order, `"|"` for a divider. Default `MARKDOWN_TOOLBAR`; `[]` hides them. Shortcuts work for the tools listed. */
     toolbar?: readonly MarkdownToolbarItem[];
+    /**
+     * What the buttons do when the bar is too narrow for them. `wrap` (the default): they take a row of their own and wrap.
+     * `menu`: the bar keeps one row and the buttons that do not fit go into a "More formatting" menu at its end, so a
+     * small editor (a chat's reply box on a phone) keeps its room for the text. Their shortcuts work either way.
+     */
+    toolbarOverflow?: "wrap" | "menu";
     /** Height of the text and preview, in pixels. Default 280. A double-click on the handle goes back to it. */
     height?: number;
     /** Smallest height the handle allows. Default 120. */

package/dist/Components/Inputs/MarkdownEditor.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { iconBlockquote, iconBold, iconCode, iconEye, iconHeading, iconItalic, iconLayoutColumns, iconLink, iconList, iconListCheck, iconListNumbers, iconMarkdown, iconPencil, iconPhoto, iconSeparatorHorizontal, iconSourceCode, iconStrikethrough, iconTable, InlineIcon, } from "nexus-icons";
+import { iconBlockquote, iconBold, iconCode, iconDots, iconEye, iconHeading, iconItalic, iconLayoutColumns, iconLink, iconList, iconListCheck, iconListNumbers, iconMarkdown, iconPencil, iconPhoto, iconSeparatorHorizontal, iconSourceCode, iconStrikethrough, iconTable, InlineIcon, } from "nexus-icons";
 import { startTransition, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { applyMarkdownTool, continueMarkdownList, linkPastedUrl, toggleMarkdownTask } from "../../Helpers/MarkdownEditing.js";
+import { fitToolbar } from "../../Helpers/ToolbarFit.js";
+import { Menu } from "../Documents/Menu.js";
 import { TabButtons } from "../Documents/TabButtons.js";
 import { MarkdownView } from "../Viewers/MarkdownView.js";
 import { EditorCount, useEditorShell, writeEditorCount } from "./EditorShell.js";
@@ -61,7 +63,7 @@ const ALL_MODES = ["write", "split", "preview"];
  * @example <MarkdownEditor name="description" label="Description" defaultMode="split" heightKey="room-description" maxLength={5000} />
  */
 export function MarkdownEditor(props) {
-    const { label, hint, error, defaultMode = "write", mode: modeProp, onModeChange, modes = ALL_MODES, toolbar = MARKDOWN_TOOLBAR, height = 280, minHeight = 120, maxHeight = 960, resizable = true, heightKey, fullscreen: canFullscreen = true, breaks = true, monospace = false, showCount = true, emptyPreview = "Nothing to preview", readOnlyMessage = "Read-only: this text cannot be changed.", fieldName, validateOn, onValueChange, className, textAreaClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, onPaste, onScroll, ...textAreaProps } = props;
+    const { label, hint, error, defaultMode = "write", mode: modeProp, onModeChange, modes = ALL_MODES, toolbar = MARKDOWN_TOOLBAR, toolbarOverflow = "wrap", height = 280, minHeight = 120, maxHeight = 960, resizable = true, heightKey, fullscreen: canFullscreen = true, breaks = true, monospace = false, showCount = true, emptyPreview = "Nothing to preview", readOnlyMessage = "Read-only: this text cannot be changed.", fieldName, validateOn, onValueChange, className, textAreaClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, onPaste, onScroll, ...textAreaProps } = props;
     const [modeState, setModeState] = useState(() => (modes.includes(defaultMode) ? defaultMode : (modes[0] ?? "write")));
     const mode = modeProp ?? modeState;
     const previewRef = useRef(null);
@@ -87,6 +89,30 @@ export function MarkdownEditor(props) {
     const tools = new Set(toolbar.filter((item) => item !== "|"));
     const firstTool = toolbar.findIndex(item => item !== "|");
     const editable = !readOnly && !disabled;
+    // One row: the buttons that fit the room the bar leaves them, measured with the row's own sizes (a cozy page's are
+    // larger), the rest in the "More formatting" menu. The row's width comes from the bar, never from its buttons, so
+    // drawing fewer of them does not change what was measured.
+    const toolsRef = useRef(null);
+    const [fit, setFit] = useState(null);
+    const showsTools = editable && mode !== "preview" && firstTool >= 0;
+    useLayoutEffect(() => {
+        const row = toolsRef.current;
+        if (toolbarOverflow !== "menu" || !showsTools || !row) {
+            setFit(null);
+            return;
+        }
+        const measure = () => {
+            const style = getComputedStyle(row);
+            const tool = parseFloat(style.getPropertyValue("--nx-control-sm")) || 28;
+            const next = fitToolbar(toolbar, row.clientWidth, { tool, divider: 11, gap: parseFloat(style.columnGap) || 2 });
+            setFit(held => (held && held.shown.length === next.shown.length && held.hidden.length === next.hidden.length ? held : next));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(row);
+        return () => observer.disconnect();
+    }, [toolbarOverflow, showsTools, toolbar]);
+    const shownTools = fit ? fit.shown : toolbar;
     const shell = useEditorShell({
         height,
         minHeight,
@@ -210,11 +236,11 @@ export function MarkdownEditor(props) {
         onScroll?.(event);
         follow(event.currentTarget, previewRef.current?.element);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, hint: hint, error: field.error, disabled: disabled, readOnly: readOnly, multiline: true, className: cx("nx-editor", "nx-md", monospace && "nx-md--mono", className), style: style, children: _jsxs("div", { ref: shell.frameRef, className: "nx-editor__frame", "data-fullscreen": shell.fullscreen || undefined, onKeyDown: shell.onFrameKeyDown, children: [_jsxs("div", { className: "nx-editor__bar", children: [modes.length > 1 && (_jsx(TabButtons, { "aria-label": "View", size: "sm", labels: "selected", options: modes.map(option => ({ value: option, label: MODES[option].label, icon: _jsx(InlineIcon, { icon: MODES[option].icon }), disabled })), value: mode, onChange: changeMode, 
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, hint: hint, error: field.error, disabled: disabled, readOnly: readOnly, multiline: true, className: cx("nx-editor", "nx-md", monospace && "nx-md--mono", className), style: style, children: _jsxs("div", { ref: shell.frameRef, className: "nx-editor__frame", "data-fullscreen": shell.fullscreen || undefined, onKeyDown: shell.onFrameKeyDown, children: [_jsxs("div", { className: cx("nx-editor__bar", toolbarOverflow === "menu" && "nx-editor__bar--one-row"), children: [modes.length > 1 && (_jsx(TabButtons, { "aria-label": "View", size: "sm", labels: "selected", options: modes.map(option => ({ value: option, label: MODES[option].label, icon: _jsx(InlineIcon, { icon: MODES[option].icon }), disabled })), value: mode, onChange: changeMode, 
                                     // An id that matches no form: the view is never sent with the form around the editor.
-                                    form: `${field.controlId}-view`, className: "nx-editor__modes" })), editable && mode !== "preview" && firstTool >= 0 && (_jsx("div", { role: "toolbar", "aria-label": "Formatting", "aria-controls": field.controlId, className: "nx-editor__tools", onKeyDown: shell.moveTool, children: toolbar.map((item, index) => item === "|" ? (_jsx("span", { className: "nx-editor__divider", "aria-hidden": "true" }, index)) : (_jsx("button", { type: "button", className: "nx-editor__tool", tabIndex: index === firstTool ? 0 : -1, "aria-label": TOOLS[item].label, "aria-keyshortcuts": TOOLS[item].keys, title: TOOLS[item].keys ? `${TOOLS[item].label} (${TOOLS[item].keys.replace("Control", "Ctrl")})` : TOOLS[item].label, 
-                                        // The text area keeps focus and its selection.
-                                        onMouseDown: event => event.preventDefault(), onClick: () => runTool(item), children: _jsx(InlineIcon, { icon: TOOLS[item].icon }) }, index))) })), _jsxs("span", { className: "nx-editor__end", children: [readOnlyNotice.lock, shell.fullscreenButton] })] }), _jsxs("div", { ref: shell.bodyRef, className: "nx-editor__body", "data-mode": mode, style: shell.bodyStyle, children: [_jsx("textarea", { ...textAreaProps, ...field.controlProps, className: cx("nx-field__control", "nx-md__input", textAreaClassName), disabled: disabled, readOnly: readOnly, onClick: handleClick, onBlur: handleBlur, onKeyDown: handleKeyDown, onPaste: handlePaste, onInvalid: handleInvalid, onScroll: handleScroll }), mode !== "write" && (_jsx(MarkdownPreview, { ref: previewRef, initialText: initialText(), breaks: breaks, empty: emptyPreview, onTaskToggle: editable ? toggleTask : undefined, onScroll: event => follow(event.currentTarget, field.elementRef.current), onRender: () => {
+                                    form: `${field.controlId}-view`, className: "nx-editor__modes" })), showsTools && (_jsxs("div", { ref: toolsRef, role: "toolbar", "aria-label": "Formatting", "aria-controls": field.controlId, className: "nx-editor__tools", onKeyDown: shell.moveTool, children: [shownTools.map((item, index) => item === "|" ? (_jsx("span", { className: "nx-editor__divider", "aria-hidden": "true" }, index)) : (_jsx("button", { type: "button", className: "nx-editor__tool", tabIndex: index === firstTool ? 0 : -1, "aria-label": TOOLS[item].label, "aria-keyshortcuts": TOOLS[item].keys, title: TOOLS[item].keys ? `${TOOLS[item].label} (${TOOLS[item].keys.replace("Control", "Ctrl")})` : TOOLS[item].label, 
+                                            // The text area keeps focus and its selection.
+                                            onMouseDown: event => event.preventDefault(), onClick: () => runTool(item), children: _jsx(InlineIcon, { icon: TOOLS[item].icon }) }, index))), fit && fit.hidden.length > 0 && (_jsx(Menu, { items: fit.hidden.map(tool => ({ value: tool, label: TOOLS[tool].label, icon: _jsx(InlineIcon, { icon: TOOLS[tool].icon }), shortcut: TOOLS[tool].keys?.replace("Control", "Ctrl") })), align: "end", size: "sm", "aria-label": "More formatting", onSelect: tool => runTool(tool), children: _jsx("button", { type: "button", className: "nx-editor__tool", tabIndex: -1, "aria-label": "More formatting", title: "More formatting", children: _jsx(InlineIcon, { icon: iconDots }) }) }))] })), _jsxs("span", { className: "nx-editor__end", children: [readOnlyNotice.lock, shell.fullscreenButton] })] }), _jsxs("div", { ref: shell.bodyRef, className: "nx-editor__body", "data-mode": mode, style: shell.bodyStyle, children: [_jsx("textarea", { ...textAreaProps, ...field.controlProps, className: cx("nx-field__control", "nx-md__input", textAreaClassName), disabled: disabled, readOnly: readOnly, onClick: handleClick, onBlur: handleBlur, onKeyDown: handleKeyDown, onPaste: handlePaste, onInvalid: handleInvalid, onScroll: handleScroll }), mode !== "write" && (_jsx(MarkdownPreview, { ref: previewRef, initialText: initialText(), breaks: breaks, empty: emptyPreview, onTaskToggle: editable ? toggleTask : undefined, onScroll: event => follow(event.currentTarget, field.elementRef.current), onRender: () => {
                                         if (field.elementRef.current)
                                             follow(field.elementRef.current, previewRef.current?.element);
                                     } }))] }), shell.footer(_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconMarkdown }), _jsx("span", { children: "Markdown" })] }), showCount && _jsx(EditorCount, { ref: countRef, text: initialText(), maxLength: maxLength }))] }) }), readOnlyNotice.notice] }));

package/dist/Components/Inputs/PictureInput.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconPencil, iconPhoto, iconTrash, iconUpload, InlineIcon } from "nexus-icons";
 import { useId, useRef, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
+import { allowsFileChange } from "../../Helpers/FileAdapter.js";
 import { getFileAdapter } from "../../Services/FileApi.js";
 import { preloadImageEditor } from "../../Services/ImageEditorLoader.js";
 import { Button } from "../Documents/Button.js";
@@ -28,7 +29,7 @@ export function PictureInput({ label, hint, size = "md", disabled = false, readO
     const fieldId = id ?? generated;
     const [failed, setFailed] = useState(null);
     const files = useOwnerFiles({ ...params, readOnly: readOnly || disabled });
-    const { status, data, busy, canWrite, readOnlyReason, editorProblem, actions } = files;
+    const { status, data, busy, canWrite, readOnlyReason, changes, changesNote, offer, editorProblem, actions } = files;
     // A keyboard's focus stays in the input through a change: on the button pressed, or the first left when it went.
     const rootRef = useRef(null);
     useFocusThroughChange(rootRef, busy);
@@ -41,6 +42,10 @@ export function PictureInput({ label, hint, size = "md", disabled = false, readO
     // A category that keeps one file: a new picture takes its place, and Remove deletes it (there is nothing else to show).
     const single = data?.category.maxCount === 1;
     const kept = data?.files ?? [];
+    // What this input offers, within the changes allowed: its Upload makes the new picture the main one, so it needs both.
+    const offered = offer(primary);
+    const canUpload = offered.upload && (single || allowsFileChange(changes, "primary"));
+    const canRemove = Boolean(primary) && (single ? offered.remove : offered.clearPrimary);
     const note = unsaved
         ? `Save the ${subject} first, then add its picture.`
         : status.kind === "failed"
@@ -51,7 +56,7 @@ export function PictureInput({ label, hint, size = "md", disabled = false, readO
                     ? // Why Upload or Edit did not open the editor, until a try opens it: never a button that does nothing.
                         editorProblem
                     : // Why it cannot be changed, when the page or the backend says (`lockReason`, a refused key): never a silent input.
-                        (readOnlyReason ?? hint ?? (data && canWrite ? `${data.files.length} of ${data.category.maxCount} ${single ? "picture" : "pictures"} kept.` : undefined));
+                        (readOnlyReason ?? changesNote ?? hint ?? (data && canWrite ? `${data.files.length} of ${data.category.maxCount} ${single ? "picture" : "pictures"} kept.` : undefined));
     const problem = status.kind === "failed" || (!unsaved && !busy && Boolean(editorProblem));
     const named = typeof label === "string" && label ? label : "Picture";
     /** The pictures window, as All pictures opens it: what changes there is read again here. */
@@ -66,5 +71,5 @@ export function PictureInput({ label, hint, size = "md", disabled = false, readO
     });
     const pictureClass = cx("nx-picture", params.shape === "circle" && "nx-picture--round", !shown && "nx-picture--empty", status.kind === "loading" && "nx-picture--loading");
     const face = shown ? _jsx("img", { src: url, alt: "", decoding: "async", onError: () => setFailed(url) }) : _jsx(InlineIcon, { icon: iconPhoto });
-    return (_jsxs("fieldset", { ref: rootRef, id: fieldId, className: cx("nx-choices", size !== "md" && `nx-choices--${size}`, "nx-picture-input", className), style: style, disabled: disabled, "aria-label": ariaLabel, "aria-busy": status.kind === "loading" || Boolean(busy) || undefined, "aria-describedby": note ? `${fieldId}-message` : undefined, "data-readonly": readOnly || undefined, children: [_jsx(ChoiceLegend, { label: label }), _jsxs("div", { className: "nx-picture-input__body", children: [!unsaved && data ? (_jsx("button", { type: "button", className: pictureClass, style: preview, "aria-label": primary ? `${named}: open the pictures` : `${named}: none yet, open the pictures`, "aria-haspopup": "dialog", title: "All pictures", ...busyProps(busy, openAll), onPointerEnter: preloadImageEditor, children: face })) : (_jsx("span", { className: pictureClass, style: preview, role: "img", "aria-label": primary ? `${named}: ${primary.name}` : "No picture", children: face })), !unsaved && data && (_jsxs("div", { className: "nx-picture-input__actions", role: "group", children: [canWrite && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconUpload }), ...busyProps(busy, () => void actions.replace()), onPointerEnter: preloadImageEditor, onFocus: preloadImageEditor, children: single && kept.length > 0 ? "Replace" : "Upload" })), canWrite && primary && (_jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconPencil }), ...busyProps(busy, () => void actions.edit(primary)), onPointerEnter: preloadImageEditor, onFocus: preloadImageEditor, children: "Edit" })), canWrite && primary && (_jsx(Button, { size: "sm", variant: "ghost", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), ...busyProps(busy, () => void (single ? actions.remove(primary) : actions.makePrimary(null))), children: single ? "Delete" : "Remove" })), (data.category.maxCount > 1 || kept.length > 1 || (kept.length > 0 && !primary)) && (_jsxs(Button, { size: "sm", variant: "ghost", ...busyProps(busy, openAll), children: ["All pictures (", data.files.length, ")"] }))] }))] }), _jsx(GroupFooter, { id: `${fieldId}-message`, hint: problem ? undefined : note, error: problem ? note : undefined })] }));
+    return (_jsxs("fieldset", { ref: rootRef, id: fieldId, className: cx("nx-choices", size !== "md" && `nx-choices--${size}`, "nx-picture-input", className), style: style, disabled: disabled, "aria-label": ariaLabel, "aria-busy": status.kind === "loading" || Boolean(busy) || undefined, "aria-describedby": note ? `${fieldId}-message` : undefined, "data-readonly": readOnly || undefined, children: [_jsx(ChoiceLegend, { label: label }), _jsxs("div", { className: "nx-picture-input__body", children: [!unsaved && data ? (_jsx("button", { type: "button", className: pictureClass, style: preview, "aria-label": primary ? `${named}: open the pictures` : `${named}: none yet, open the pictures`, "aria-haspopup": "dialog", title: "All pictures", ...busyProps(busy, openAll), onPointerEnter: preloadImageEditor, children: face })) : (_jsx("span", { className: pictureClass, style: preview, role: "img", "aria-label": primary ? `${named}: ${primary.name}` : "No picture", children: face })), !unsaved && data && (_jsxs("div", { className: "nx-picture-input__actions", role: "group", children: [canUpload && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconUpload }), ...busyProps(busy, () => void actions.replace()), onPointerEnter: preloadImageEditor, onFocus: preloadImageEditor, children: single && kept.length > 0 ? "Replace" : "Upload" })), primary && offered.edit && (_jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconPencil }), ...busyProps(busy, () => void actions.edit(primary)), onPointerEnter: preloadImageEditor, onFocus: preloadImageEditor, children: "Edit" })), canRemove && primary && (_jsx(Button, { size: "sm", variant: "ghost", hoverTone: "danger", icon: _jsx(InlineIcon, { icon: iconTrash }), ...busyProps(busy, () => void (single ? actions.remove(primary) : actions.makePrimary(null))), children: single ? "Delete" : "Remove" })), (data.category.maxCount > 1 || kept.length > 1 || (kept.length > 0 && !primary)) && (_jsxs(Button, { size: "sm", variant: "ghost", ...busyProps(busy, openAll), children: ["All pictures (", data.files.length, ")"] }))] }))] }), _jsx(GroupFooter, { id: `${fieldId}-message`, hint: problem ? undefined : note, error: problem ? note : undefined })] }));
 }

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

@@ -3,6 +3,7 @@ import { RowsStore, type RowsSnapshot } from "../../Helpers/RowsStore.ts";
 import { type InputParams, type RowsInputProps, type RowValue } from "../../Interfaces/FormInterfaces.ts";
 import type { InputDesign } from "../../Interfaces/InputInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+import { type ComputedNote } from "./ComputedInput.tsx";
 /** Form names of inputs inside rows that need one (radio and checkbox groups). They are taken out of the form's data. */
 export declare const ROW_INPUT_NAME = "nx-rows:";
 /** Where focus goes in a row once it is on the page: an input by name, the row's first input, or its actions button. */
@@ -37,6 +38,7 @@ export declare function useRowsInput<TRow extends RowValue>(props: RowsInputProp
     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;
+    computeWith: () => unknown;
 };
 /** 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;
@@ -44,6 +46,15 @@ export type CellLock = (key: string, name: string, index: number) => string | bo
 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;
+/** What a row input worked out from others (`compute`) asks its layout: the other cells' params and locks, `computeWith`. */
+export interface RowCellContext {
+    cellParams: CellParams;
+    cellLock: CellLock;
+    /** The rows' `computeWith` as it is now. */
+    computeWith?: () => unknown;
+    /** A typed-in figure's note, for a table to say under its rows (`null` once it no longer applies). */
+    onNote?: (key: string, name: string, note: ComputedNote | null) => void;
+}
 /** 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. */
@@ -66,13 +77,15 @@ export interface RowCellProps {
     disabled: boolean;
     /** This one cell holds a generated value: the reason, `true` for no reason, or nothing. From `cellReadOnly`. */
     lock?: string | boolean | null;
+    /** The layout's own, for a cell worked out from the row's others (`compute`). */
+    cells?: RowCellContext;
 }
 /**
  * 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, lock }: RowCellProps) => ReactNode>;
+export declare const RowCell: import("react").MemoExoticComponent<(props: RowCellProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined>;
 /** 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;