nexus-shared 3.2.0 → 4.1.0

package/dist/Components/Inputs/GroupForm.js

@@ -4,13 +4,12 @@ import { iconAlertCircle, iconArrowDown, iconArrowUp, iconChevronDown, iconCopy,
 import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useDatePreferences } from "../../Helpers/DatePreferences.js";
-import { formatInputValue } from "../../Helpers/InputParamsHelpers.js";
+import { formatInputValue, isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
 import { firstFocusable, labelText, RowCell, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
 /** Inputs that read as a line of text in a collapsed section's summary. */
-const SUMMARY_SKIP = new Set(["checkbox", "switch", "radio", "tree", "tabular", "group", "markdown"]);
-/** Inputs without a box: they line up with the boxes beside them. */
-const CHOICE_TYPES = new Set(["checkbox", "switch", "radio"]);
+const SUMMARY_SKIP = new Set([EInputTypes.CheckBox, EInputTypes.Switch, EInputTypes.Radio, EInputTypes.Tree, EInputTypes.Tabular, EInputTypes.Group, EInputTypes.Markdown, EInputTypes.Picture]);
 function defaultSummary(row, inputs, preferences) {
     const parts = [];
     for (const params of inputs) {
@@ -46,7 +45,7 @@ const GroupSection = memo(function GroupSection({ store, rowKey, index, count, i
             setCollapsed(false);
     }, [problems, collapsed]);
     // Radio columns this row has on show as tags: "Primary".
-    const tags = inputs.filter(params => params.type === "radio" && !params.hidden && row[params.name] === true).map(labelText);
+    const tags = inputs.filter(params => params.type === EInputTypes.Radio && !params.hidden && row[params.name] === true).map(labelText);
     let summary = null;
     if (!open) {
         const { summary: pick } = context;
@@ -64,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", 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))) }))] }));
+    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
@@ -77,11 +76,11 @@ const GroupSection = memo(function GroupSection({ store, rowKey, index, count, i
  *
  * @example
  * <GroupForm name="addresses" label="Addresses" itemLabel="Address" max={5} inputs={[
- *   { type: "dropdown", name: "country", label: "Country", required: true, options: countries, span: 6 },
- *   { type: "text", name: "city", label: "City", required: true, span: 6 },
- *   { type: "text", name: "zipCode", label: "Zip code", span: 4 },
- *   { type: "dropdown", name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
- *   { type: "radio", name: "isPrimary", label: "Primary address", span: 4, required: true },
+ *   { type: EInputTypes.Dropdown, name: "country", label: "Country", required: true, options: countries, span: 6 },
+ *   { type: EInputTypes.Text, name: "city", label: "City", required: true, span: 6 },
+ *   { type: EInputTypes.Text, name: "zipCode", label: "Zip code", span: 4 },
+ *   { type: EInputTypes.Dropdown, name: "type", label: "Type", options: ADDRESS_TYPES, span: 4 },
+ *   { type: EInputTypes.Radio, name: "isPrimary", label: "Primary address", span: 4, required: true },
  * ]} />
  */
 export function GroupForm(props) {
@@ -155,6 +154,7 @@ export function GroupForm(props) {
         design,
         cellLock: rows.cellLock,
         cellParams: rows.cellParams,
+        computeWith: rows.computeWith,
         readOnly,
         disabled,
         removable,
@@ -166,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`. */
@@ -10,8 +10,8 @@ export interface InputOverrides {
     form?: string;
     /** The value the input starts with: `defaultChecked` for a checkbox, switch, or radio, `defaultValue` for the rest. */
     defaultValue?: unknown;
-    /** The new value after each change, before the params' own `onValueChange`. */
-    onValueChange?: (value: unknown) => void;
+    /** The new value after each change, before the params' own `onValueChange`; a dropdown's item (items) with it. */
+    onValueChange?: (value: unknown, item?: unknown) => void;
     error?: string | null;
     /** Replaces the params' own, e.g. `false` for a radio in rows, where "required" means one row has it. */
     required?: boolean;
@@ -25,13 +25,20 @@ export interface InputOverrides {
     readOnlyMessage?: string;
     /** On top of the params, like `readOnly`. */
     disabled?: boolean;
+    /** A dropdown's value is on its way: its spinner shows, as a form's does while a picker is asked about a remembered value. */
+    loading?: boolean;
     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: "email", name: "email", label: "Email", required: true }` gives a
- * `TextBox` of type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
- * Layout keys (`span`, `width`, `grow`) stay out of the component's props; `hidden` renders nothing.
+ * Renders an input from its params: `{ type: EInputTypes.Email, name: "email", label: "Email", required: true }` gives a
+ * `TextBox` of HTML type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
+ * Layout keys (`span`, `width`, `grow`, and the Form-only ones such as `showWhen` and `compute`) stay out of the
+ * component's props; `hidden` renders nothing.
  */
 export declare function renderInput(params: InputParams, overrides?: InputOverrides): ReactNode;

package/dist/Components/Inputs/InputRenderer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { CheckBox, RadioButton, Switch } from "./CheckBox.js";
 import { CheckBoxGroup } from "./CheckBoxGroup.js";
 import { CodeBox } from "./CodeBox.js";
@@ -10,23 +11,26 @@ import { Dropdown } from "./Dropdown.js";
 import { GroupForm } from "./GroupForm.js";
 import { MarkdownEditor } from "./MarkdownEditor.js";
 import { NumberBox } from "./NumberBox.js";
+import { PictureInput } from "./PictureInput.js";
 import { RadioGroup } from "./RadioGroup.js";
 import { RichTextEditor } from "./RichTextEditor.js";
 import { RangeSlider, Slider } from "./Slider.js";
 import { TabularForm } from "./TabularForm.js";
 import { TextArea } from "./TextArea.js";
 import { TextBox } from "./TextBox.js";
+import { isTextInputType, TEXT_BOX_TYPES } from "./TextBoxTypes.js";
 import { TimePicker } from "./TimePicker.js";
 import { TreeView } from "./TreeView.js";
 /**
- * Renders an input from its params: `{ type: "email", name: "email", label: "Email", required: true }` gives a
- * `TextBox` of type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
- * Layout keys (`span`, `width`, `grow`) stay out of the component's props; `hidden` renders nothing.
+ * Renders an input from its params: `{ type: EInputTypes.Email, name: "email", label: "Email", required: true }` gives a
+ * `TextBox` of HTML type email. Forms render their `inputs` with it, and tabular and group forms render each row's inputs.
+ * Layout keys (`span`, `width`, `grow`, and the Form-only ones such as `showWhen` and `compute`) stay out of the
+ * component's props; `hidden` renders nothing.
  */
 export function renderInput(params, overrides = {}) {
     if (params.hidden)
         return null;
-    const { type, section: _section, span: _span, width: _width, grow: _grow, hidden: _hidden, dependsOn: _dependsOn, onValueChange: ownChange, ...rest } = params;
+    const { type, section: _section, span: _span, width: _width, grow: _grow, hidden: _hidden, dependsOn: _dependsOn, narrowedBy: _narrowedBy, showWhen: _showWhen, readOnlyWhen: _readOnlyWhen, remember: _remember, labelWhen: _labelWhen, spanWhen: _spanWhen, compute: _compute, onValueChange: ownChange, ...rest } = params;
     const { defaultValue, onValueChange, readOnly, disabled, ...set } = overrides;
     const props = { ...rest, ...set };
     if (readOnly)
@@ -43,59 +47,60 @@ export function renderInput(params, overrides = {}) {
     }
     if (onValueChange || ownChange) {
         props.onValueChange = (value, ...more) => {
-            onValueChange?.(value);
+            // A dropdown says which item it picked; the other inputs' second argument is their event.
+            onValueChange?.(value, type === EInputTypes.Dropdown ? more[0] : undefined);
             ownChange?.(value, ...more);
         };
     }
+    if (isTextInputType(type))
+        return _jsx(TextBox, { ...props, type: TEXT_BOX_TYPES[type] });
     switch (type) {
-        case "text":
-        case "email":
-        case "password":
-        case "search":
-        case "tel":
-        case "url":
-            return _jsx(TextBox, { ...props, type: type });
-        case "textarea":
+        case EInputTypes.TextArea:
             return _jsx(TextArea, { ...props });
-        case "number":
+        case EInputTypes.Number:
             return _jsx(NumberBox, { ...props });
-        case "code":
+        case EInputTypes.Code:
             return _jsx(CodeBox, { ...props });
-        case "checkbox":
+        case EInputTypes.CheckBox:
             return _jsx(CheckBox, { ...props });
-        case "switch":
+        case EInputTypes.Switch:
             return _jsx(Switch, { ...props });
-        case "radio":
+        case EInputTypes.Radio:
             return _jsx(RadioButton, { ...props });
-        case "checkbox-group":
+        case EInputTypes.CheckBoxGroup:
             return _jsx(CheckBoxGroup, { ...props });
-        case "radio-group":
+        case EInputTypes.RadioGroup:
             return _jsx(RadioGroup, { ...props });
-        case "dropdown":
+        case EInputTypes.Dropdown:
             // Either overload: `multiple` travels in the props.
             return _jsx(Dropdown, { ...props });
-        case "date":
+        case EInputTypes.Date:
             return _jsx(DatePicker, { ...props });
-        case "date-range":
+        case EInputTypes.DateRange:
             return _jsx(DateRangePicker, { ...props });
-        case "time":
+        case EInputTypes.Time:
             return _jsx(TimePicker, { ...props });
-        case "date-time":
+        case EInputTypes.DateTime:
             return _jsx(DateTimePicker, { ...props });
-        case "slider":
+        case EInputTypes.Slider:
             return _jsx(Slider, { ...props });
-        case "range-slider":
+        case EInputTypes.RangeSlider:
             return _jsx(RangeSlider, { ...props });
-        case "markdown":
+        case EInputTypes.Markdown:
             return _jsx(MarkdownEditor, { ...props });
-        case "rich-text":
+        case EInputTypes.RichText:
             return _jsx(RichTextEditor, { ...props });
-        case "tree":
+        case EInputTypes.Tree:
             return _jsx(TreeView, { ...props });
-        case "tabular":
+        case EInputTypes.Tabular:
             return _jsx(TabularForm, { ...props });
-        case "group":
+        case EInputTypes.Group:
             return _jsx(GroupForm, { ...props });
+        case EInputTypes.Picture: {
+            // A picture is the owner's file, not a value: the form's value and field name stay out of it.
+            const { defaultValue: _value, name: _name, form: _form, ...picture } = props;
+            return _jsx(PictureInput, { ...picture });
+        }
         default:
             return null;
     }

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

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { ApiModuleValue } from "../../Interfaces/ApiInterfaces.ts";
+import type { Size } from "../../Interfaces/TypeInterfaces.ts";
+import { type OwnerFilesParams } from "../Viewers/OwnerFiles.tsx";
+export interface PictureInputProps extends Omit<OwnerFilesParams<ApiModuleValue>, "ownerId"> {
+    /**
+     * The owner's id: the record the form edits (`row?.id` in a CRUD's inputs). Null or missing for a record not saved
+     * yet, which has no pictures until it is: the input says so.
+     */
+    ownerId?: string | null;
+    label?: ReactNode;
+    /**
+     * Help text under the picture. Default: what the category takes, once it is known. There is no `required`: the
+     * picture is saved at once, apart from the form, so a form could not refuse a save without one.
+     */
+    hint?: ReactNode;
+    /** The preview's height: `sm` 72px, `md` 112px, `lg` 152px. Default `md`. */
+    size?: Size;
+    disabled?: boolean;
+    /** What the record is, for the note a new one shows: "branch". Default "record". */
+    subject?: string;
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    "aria-label"?: string;
+}
+/**
+ * A record's picture in a form: the owner's main picture, with Upload (a new one, edited first, made the main picture),
+ * Edit (the main one, saved as a new picture), Remove (no main picture; the pictures stay) and, when the category keeps
+ * more than one, All pictures (the gallery). In a category that keeps one file, Upload is Replace and Remove deletes it.
+ * Clicking or pressing the picture opens the pictures window too, read only where the input is. The change is saved at
+ * once, not with the form: a picture is the owner's file, not one of the record's values, so the form keeps no field for
+ * it and sends nothing under its name.
+ *
+ * @example
+ * inputs: (action, row) => [
+ *   { type: EInputTypes.Picture, name: "logo", label: "Logo", module: NexusModule.Enterprise, category: "company-logo", ownerId: row?.id, aspect: 1 },
+ *   ...
+ * ]
+ */
+export declare function PictureInput({ label, hint, size, disabled, readOnly, subject, id, className, style, "aria-label": ariaLabel, ...params }: PictureInputProps): import("react").JSX.Element;

package/dist/Components/Inputs/PictureInput.js

@@ -0,0 +1,75 @@
+"use client";
+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";
+import { busyProps, openPictureGallery, useFocusThroughChange, useOwnerFiles } from "../Viewers/OwnerFiles.js";
+import { ChoiceLegend, GroupFooter } from "./ChoiceField.js";
+const HEIGHTS = { sm: 72, md: 112, lg: 152 };
+/**
+ * A record's picture in a form: the owner's main picture, with Upload (a new one, edited first, made the main picture),
+ * Edit (the main one, saved as a new picture), Remove (no main picture; the pictures stay) and, when the category keeps
+ * more than one, All pictures (the gallery). In a category that keeps one file, Upload is Replace and Remove deletes it.
+ * Clicking or pressing the picture opens the pictures window too, read only where the input is. The change is saved at
+ * once, not with the form: a picture is the owner's file, not one of the record's values, so the form keeps no field for
+ * it and sends nothing under its name.
+ *
+ * @example
+ * inputs: (action, row) => [
+ *   { type: EInputTypes.Picture, name: "logo", label: "Logo", module: NexusModule.Enterprise, category: "company-logo", ownerId: row?.id, aspect: 1 },
+ *   ...
+ * ]
+ */
+export function PictureInput({ label, hint, size = "md", disabled = false, readOnly = false, subject = "record", id, className, style, "aria-label": ariaLabel, ...params }) {
+    const generated = useId();
+    const fieldId = id ?? generated;
+    const [failed, setFailed] = useState(null);
+    const files = useOwnerFiles({ ...params, readOnly: readOnly || disabled });
+    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);
+    const primary = data?.files.find(file => file.isPrimary) ?? null;
+    const url = primary ? getFileAdapter().fileUrl(primary, "thumbnail") : null;
+    const shown = url && failed !== url;
+    const ratio = typeof params.aspect === "number" && params.aspect > 0 ? params.aspect : 1;
+    const preview = { "--nx-picture-h": `${HEIGHTS[size]}px`, "--nx-picture-ratio": ratio };
+    const unsaved = !params.ownerId;
+    // 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"
+            ? status.message
+            : busy
+                ? `${busy}…`
+                : editorProblem
+                    ? // 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 ?? 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. */
+    const openAll = () => openPictureGallery({
+        ...params,
+        ownerId: params.ownerId,
+        readOnly: readOnly || disabled,
+        onChange: primary => {
+            void actions.reload();
+            params.onChange?.(primary);
+        },
+    });
+    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: [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/RadioGroup.d.ts

@@ -1,7 +1,19 @@
 import type { ChangeEvent } from "react";
-import type { OptionValue } from "../../Interfaces/InputInterfaces.ts";
+import type { ChoiceDesign, OptionValue } from "../../Interfaces/InputInterfaces.ts";
 import { type ChoiceGroupProps } from "./ChoiceField.tsx";
-export interface RadioGroupProps<T extends OptionValue = string> extends ChoiceGroupProps<T> {
+/**
+ * How a `RadioGroup` draws its options: `default` (a circle beside each label), `cards` (a card each, with its
+ * description), or `tabs` (nav-style tabs on one track, as `TabButtons` draws them).
+ */
+export type RadioGroupDesign = ChoiceDesign | "tabs";
+export interface RadioGroupProps<T extends OptionValue = string> extends Omit<ChoiceGroupProps<T>, "design"> {
+    /**
+     * `default`: a circle beside each label. `cards`: each option is a card. `tabs`: the options as nav-style tabs on one
+     * track (`TabButtons`' look), wrapping onto more rows where they do not fit; each option's `description` is its
+     * tooltip and what a screen reader hears with it, and the chosen option's shows under the track. `orientation` and
+     * `columns` do not apply to tabs.
+     */
+    design?: RadioGroupDesign;
     /** The chosen value, or `null` for none. With `value`, the group is controlled; pair it with `onValueChange`. */
     value?: T | null;
     defaultValue?: T | null;
@@ -12,7 +24,8 @@ export interface RadioGroupProps<T extends OptionValue = string> extends ChoiceG
 }
 /**
  * One choice from a list of options, such as a room type or a payment method. Native radio buttons, so the arrow keys
- * move the choice. `design="cards"` shows each option as a card with its description. Read-only (default note
+ * move the choice. `design="cards"` shows each option as a card with its description, `design="tabs"` as nav-style tabs
+ * whose descriptions are tooltips (the chosen one's under the track). Read-only (default note
  * "Read-only: this choice cannot be changed.") shows a lock after the label and a note under a clicked option.
  *
  * @example <RadioGroup name="roomType" label="Room type" required design="cards" options={[{ value: "deluxe", label: "Deluxe" }]} />

package/dist/Components/Inputs/RadioGroup.js

@@ -1,11 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { validateSelection } from "../../Helpers/ValidationHelpers.js";
-import { ChoiceItem, ChoiceLegend, GroupFooter, groupLayout, leavesField, OPTION_ATTRIBUTE, optionAnchor, useChoiceField } from "./ChoiceField.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { ChoiceItem, ChoiceLegend, ChoiceTab, ChoiceTabNotes, GroupFooter, groupLayout, leavesField, OPTION_ATTRIBUTE, optionAnchor, showChosenNote, useChoiceField } from "./ChoiceField.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 /**
  * One choice from a list of options, such as a room type or a payment method. Native radio buttons, so the arrow keys
- * move the choice. `design="cards"` shows each option as a card with its description. Read-only (default note
+ * move the choice. `design="cards"` shows each option as a card with its description, `design="tabs"` as nav-style tabs
+ * whose descriptions are tooltips (the chosen one's under the track). Read-only (default note
  * "Read-only: this choice cannot be changed.") shows a lock after the label and a note under a clicked option.
  *
  * @example <RadioGroup name="roomType" label="Room type" required design="cards" options={[{ value: "deluxe", label: "Deluxe" }]} />
@@ -14,6 +16,7 @@ export function RadioGroup(props) {
     const { options, name, label, hint, required, validate, value, defaultValue, readOnly = false, disabled, onValueChange } = props;
     const { readOnlyMessage = "Read-only: this choice cannot be changed." } = props;
     const { size = "md" } = props;
+    const tabs = props.design === "tabs";
     const chosen = (inputs) => {
         const input = inputs.find(item => item.checked);
         return input ? [options[Number(input.getAttribute(OPTION_ATTRIBUTE))].value] : [];
@@ -21,6 +24,8 @@ export function RadioGroup(props) {
     const field = useChoiceField(props, {
         check: (inputs, fieldName) => validateSelection(chosen(inputs), { required, validate: validate && (values => validate(values[0] ?? null)) }, fieldName),
         checkKeys: [value, required, validate, options],
+        // Tabs show the chosen option's description under the track: it follows every change and a form's reset.
+        sync: tabs ? showChosenNote : undefined,
     });
     function handleChange(event) {
         if (readOnly)
@@ -39,5 +44,5 @@ export function RadioGroup(props) {
     }
     const invalid = Boolean(field.error);
     const layout = groupLayout(props);
-    return (_jsxs("fieldset", { ref: field.containerRef, id: field.fieldId, role: "radiogroup", className: layout.className, style: props.style, disabled: disabled, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": field.error || hint ? field.messageId : undefined, "aria-required": required || undefined, "aria-invalid": invalid || undefined, "aria-readonly": readOnly || undefined, onChange: handleChange, onClick: readOnlyNotice.onClick, onKeyDown: readOnlyNotice.onKeyDown, onBlur: handleBlur, children: [_jsx(ChoiceLegend, { label: label, required: required, lock: readOnlyNotice.lock }), _jsx("div", { className: "nx-choices__options", style: layout.optionsStyle, children: options.map((option, index) => (_jsx(ChoiceItem, { type: "radio", groupId: field.fieldId, name: name ?? field.fieldId, option: option, index: index, size: size, checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, invalid: invalid, readOnly: readOnly, onInvalid: field.onInvalid }, String(option.value)))) }), _jsx(GroupFooter, { id: field.messageId, hint: hint, error: field.error }), readOnlyNotice.notice] }));
+    return (_jsxs("fieldset", { ref: field.containerRef, id: field.fieldId, role: "radiogroup", className: layout.className, style: props.style, disabled: disabled, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-describedby": field.error || hint ? field.messageId : undefined, "aria-required": required || undefined, "aria-invalid": invalid || undefined, "aria-readonly": readOnly || undefined, onChange: handleChange, onClick: readOnlyNotice.onClick, onKeyDown: readOnlyNotice.onKeyDown, onBlur: handleBlur, children: [_jsx(ChoiceLegend, { label: label, required: required, lock: readOnlyNotice.lock }), tabs ? (_jsx("div", { className: cx("nx-tabs", `nx-tabs--${size}`, "nx-tabs--wrap"), children: options.map((option, index) => (_jsx(ChoiceTab, { type: "radio", groupId: field.fieldId, name: name ?? field.fieldId, option: option, index: index, checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, invalid: invalid, readOnly: readOnly, onInvalid: field.onInvalid }, String(option.value)))) })) : (_jsx("div", { className: "nx-choices__options", style: layout.optionsStyle, children: options.map((option, index) => (_jsx(ChoiceItem, { type: "radio", groupId: field.fieldId, name: name ?? field.fieldId, option: option, index: index, size: size, checked: value !== undefined ? value === option.value : undefined, defaultChecked: defaultValue === option.value, invalid: invalid, readOnly: readOnly, onInvalid: field.onInvalid }, String(option.value)))) })), tabs && _jsx(ChoiceTabNotes, { groupId: field.fieldId, options: options, chosen: options.findIndex(option => option.value === (value !== undefined ? value : defaultValue)) }), _jsx(GroupFooter, { id: field.messageId, hint: hint, error: field.error }), readOnlyNotice.notice] }));
 }

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

@@ -1,8 +1,9 @@
 import { type FormEvent, type ReactNode } from "react";
 import { RowsStore, type RowsSnapshot } from "../../Helpers/RowsStore.ts";
-import type { InputParams, RowsInputProps, RowValue } from "../../Interfaces/FormInterfaces.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;