nexus-shared 3.2.0 → 4.0.0

package/dist/Components/Inputs/PictureInput.js

@@ -0,0 +1,70 @@
+"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 { 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, 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 ?? [];
+    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 ?? 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: [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 })] }));
+}

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,6 +1,6 @@
 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";
 /** Form names of inputs inside rows that need one (radio and checkbox groups). They are taken out of the form's data. */

package/dist/Components/Inputs/RowsInput.js

@@ -4,8 +4,10 @@ import { iconAlertCircle, iconArrowBackUp, iconPlus, InlineIcon } from "nexus-ic
 import { memo, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { browserInputMemory, FORM_SAVED_EVENT } from "../../Helpers/InputMemory.js";
 import { inputFieldName } from "../../Helpers/InputParamsHelpers.js";
 import { RowsStore } from "../../Helpers/RowsStore.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
 import { hasContent } from "./Field.js";
 import { isFirstInvalid } from "./InputField.js";
@@ -64,7 +66,14 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
         });
     }, [store, syncValidity]);
     useEffect(syncValidity);
-    // Inside a form: the rows go into its data as JSON under `name`, and a reset brings back the rows loaded last.
+    // Remembered row inputs (`remember`) read and keep their values in this browser: rows added from now on open on them.
+    // Given once drawn, so the server's draw and the first one in the browser are the same.
+    useLayoutEffect(() => {
+        if (inputs.some(params => params.remember))
+            store.attachMemory(browserInputMemory());
+    }, [store, inputs]);
+    // Inside a form: the rows go into its data as JSON under `name`, a reset brings back the rows loaded last, and a save
+    // (a SubmitForm's) keeps the remembered values of the row added last.
     useEffect(() => {
         const form = proxyRef.current?.form;
         if (!form)
@@ -79,11 +88,17 @@ export function useRowsInput(props, fallbackItem, layoutRef) {
         };
         // The reset event comes before the browser restores the fields.
         const onReset = () => setTimeout(() => store.reset());
+        const onSaved = () => {
+            if (!latest.current.disabled)
+                store.rememberAdded();
+        };
         form.addEventListener("formdata", onFormData);
         form.addEventListener("reset", onReset);
+        form.addEventListener(FORM_SAVED_EVENT, onSaved);
         return () => {
             form.removeEventListener("formdata", onFormData);
             form.removeEventListener("reset", onReset);
+            form.removeEventListener(FORM_SAVED_EVENT, onSaved);
         };
     }, [store, props.form, name]);
     function focusProblem(place) {
@@ -236,7 +251,7 @@ export function labelText(params) {
 export const RowCell = memo(function RowCell({ store, rowKey, params, index, error, layout, idPrefix, size, design, readOnly, disabled, lock }) {
     const [initial] = useState(() => store.get(rowKey, params.name));
     const onValueChange = useCallback((next) => store.set(rowKey, params.name, next, "input"), [store, rowKey, params.name]);
-    const needsName = params.type === "radio-group" || params.type === "checkbox-group";
+    const needsName = params.type === EInputTypes.RadioGroup || params.type === EInputTypes.CheckBoxGroup;
     const overrides = {
         id: `${idPrefix}-${rowKey.replace(/[^A-Za-z0-9_-]/g, "_")}-${params.name}`,
         // Nothing goes into a parent form by itself: the rows go in whole, under the rows input's name.
@@ -257,7 +272,7 @@ export const RowCell = memo(function RowCell({ store, rowKey, params, index, err
     if (error !== undefined)
         overrides.error = error;
     // A required radio means one row has it on, which the rows check; each radio alone is not required.
-    if (params.type === "radio")
+    if (params.type === EInputTypes.Radio)
         overrides.required = false;
     if (layout === "tabular") {
         overrides.label = undefined;

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

@@ -1,4 +1,4 @@
-import type { RowValue, TabularFormProps } from "../../Interfaces/FormInterfaces.ts";
+import { type RowValue, type TabularFormProps } from "../../Interfaces/FormInterfaces.ts";
 /**
  * Rows of inputs in a table, one column per input: a person's emails or addresses, invoice lines, a salary sheet. The
  * value is an array of row objects, one value per input, with any other fields the rows came with (such as ids). Inputs
@@ -18,10 +18,10 @@ import type { RowValue, TabularFormProps } from "../../Interfaces/FormInterfaces
  *
  * @example
  * <TabularForm name="emails" label="Emails" itemLabel="Email" max={5} unique={["email"]} inputs={[
- *   { type: "email", name: "email", label: "Email", required: true, pattern: TEXT_PATTERNS.email },
- *   { type: "dropdown", name: "type", label: "Type", options: EMAIL_TYPES },
- *   { type: "checkbox", name: "isVerified", label: "Verified" },
- *   { type: "radio", name: "isPrimary", label: "Primary", required: true },
+ *   { type: EInputTypes.Email, name: "email", label: "Email", required: true, pattern: TEXT_PATTERNS.email },
+ *   { type: EInputTypes.Dropdown, name: "type", label: "Type", options: EMAIL_TYPES },
+ *   { type: EInputTypes.CheckBox, name: "isVerified", label: "Verified" },
+ *   { type: EInputTypes.Radio, name: "isPrimary", label: "Primary", required: true },
  * ]} />
  */
 export declare function TabularForm<TRow extends RowValue = RowValue>(props: TabularFormProps<TRow>): import("react").JSX.Element;

package/dist/Components/Inputs/TabularForm.js

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconArrowDown, iconArrowUp, iconCopy, iconDotsVertical, iconLock, iconLockOpen, iconRowInsertBottom, iconRowInsertTop, iconTrash, InlineIcon } from "nexus-icons";
 import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
+import { isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Menu } from "../Documents/Menu.js";
 import { firstFocusable, labelText, RowCell, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
 /** Height of a row: the input's box and the line under it. Measured from the first row once it renders. */
@@ -12,38 +14,36 @@ const OVERSCAN = 8;
 const DEFAULT_MAX_HEIGHT = 440;
 /** A column's width by input type, when its params give none. */
 const COLUMN_WIDTH = {
-    text: "10rem",
-    email: "13rem",
-    password: "10rem",
-    search: "10rem",
-    tel: "9rem",
-    url: "13rem",
-    textarea: "14rem",
-    number: "7.5rem",
-    checkbox: "6rem",
-    switch: "6rem",
-    radio: "6rem",
-    "checkbox-group": "16rem",
-    "radio-group": "16rem",
-    dropdown: "10rem",
-    date: "10rem",
-    "date-range": "15rem",
-    time: "8rem",
-    "date-time": "14rem",
-    slider: "10rem",
-    "range-slider": "12rem",
+    [EInputTypes.Text]: "10rem",
+    [EInputTypes.Email]: "13rem",
+    [EInputTypes.Password]: "10rem",
+    [EInputTypes.Search]: "10rem",
+    [EInputTypes.Tel]: "9rem",
+    [EInputTypes.Url]: "13rem",
+    [EInputTypes.TextArea]: "14rem",
+    [EInputTypes.Number]: "7.5rem",
+    [EInputTypes.CheckBox]: "6rem",
+    [EInputTypes.Switch]: "6rem",
+    [EInputTypes.Radio]: "6rem",
+    [EInputTypes.CheckBoxGroup]: "16rem",
+    [EInputTypes.RadioGroup]: "16rem",
+    [EInputTypes.Dropdown]: "10rem",
+    [EInputTypes.Date]: "10rem",
+    [EInputTypes.DateRange]: "15rem",
+    [EInputTypes.Time]: "8rem",
+    [EInputTypes.DateTime]: "14rem",
+    [EInputTypes.Slider]: "10rem",
+    [EInputTypes.RangeSlider]: "12rem",
 };
-/** Columns that keep their width instead of sharing the spare room. */
-const FIXED_TYPES = new Set(["checkbox", "switch", "radio"]);
 /** What a locked row's cells say when one is used. */
 const LOCKED_ROW = "Locked: unlock the row to change it.";
 const ENTER_MOVES = new Set(["text", "email", "tel", "url", "search", "password", "number"]);
 const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
 /** How a cell lines up: numbers at the end, checkboxes and radios in the middle, the rest at the start. */
 function cellKind(params) {
-    if (params.type === "number")
+    if (params.type === EInputTypes.Number)
         return "number";
-    if (FIXED_TYPES.has(params.type))
+    if (isBooleanInput(params))
         return "check";
     return "text";
 }
@@ -105,10 +105,10 @@ const TabularRow = memo(function TabularRow({ store, rowKey, index, count, colum
  *
  * @example
  * <TabularForm name="emails" label="Emails" itemLabel="Email" max={5} unique={["email"]} inputs={[
- *   { type: "email", name: "email", label: "Email", required: true, pattern: TEXT_PATTERNS.email },
- *   { type: "dropdown", name: "type", label: "Type", options: EMAIL_TYPES },
- *   { type: "checkbox", name: "isVerified", label: "Verified" },
- *   { type: "radio", name: "isPrimary", label: "Primary", required: true },
+ *   { type: EInputTypes.Email, name: "email", label: "Email", required: true, pattern: TEXT_PATTERNS.email },
+ *   { type: EInputTypes.Dropdown, name: "type", label: "Type", options: EMAIL_TYPES },
+ *   { type: EInputTypes.CheckBox, name: "isVerified", label: "Verified" },
+ *   { type: EInputTypes.Radio, name: "isPrimary", label: "Primary", required: true },
  * ]} />
  */
 export function TabularForm(props) {
@@ -359,7 +359,7 @@ export function TabularForm(props) {
     const template = [
         numbered ? numberWidth : null,
         ...columns.map((params, index) => {
-            const grow = params.grow ?? (FIXED_TYPES.has(params.type) ? 0 : 1);
+            const grow = params.grow ?? (isBooleanInput(params) ? 0 : 1);
             return grow > 0 ? `minmax(${widths[index]}, ${grow}fr)` : widths[index];
         }),
         actionsWidth,

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

@@ -22,6 +22,12 @@ export interface TextAreaProps extends NativeTextAreaProps, TextRules {
     maxRows?: number;
     /** Shows the character count, and the limit when `maxLength` is set. */
     showCount?: boolean;
+    /**
+     * Text that is code (HTML, JSON): the monospace font, lines kept as typed (no wrapping, a long line scrolls sideways
+     * inside the box), a tab two spaces wide, and no spelling, capitals, corrections, suggestions or translation. Tab still
+     * leaves the box, so a keyboard is never trapped in it.
+     */
+    code?: boolean;
     /** What a read-only field says when someone tries to change it. Default "Read-only: this field cannot be changed." */
     readOnlyMessage?: string;
     /** Name used in messages. Default: the label, when it is text. */

package/dist/Components/Inputs/TextArea.js

@@ -5,13 +5,22 @@ import { Field } from "./Field.js";
 import { useReadOnlyNotice } from "./ReadOnlyNotice.js";
 import { useTextField } from "./TextField.js";
 import { useInputDesign } from "../../Helpers/UserPreferences.js";
+/** A `code` text area's attributes: lines kept as typed, and nothing that would change what was typed. A page's own props win. */
+const CODE_PROPS = {
+    wrap: "off",
+    spellCheck: false,
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    autoComplete: "off",
+    translate: "no",
+};
 /**
  * A multi-line text input with the same label, hint, validation, and designs as `TextBox`.
  *
  * @example <TextArea label="Description" maxLength={500} showCount autoResize />
  */
 export function TextArea(props) {
-    const { label, hint, error, design: ownDesign, size = "md", icon, rows = 3, autoResize = false, maxRows = 12, showCount = false, readOnlyMessage = "Read-only: this field cannot be changed.", fieldName, validateOn, onValueChange, className, textAreaClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, placeholder, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, ...textAreaProps } = props;
+    const { label, hint, error, design: ownDesign, size = "md", icon, rows = 3, autoResize = false, maxRows = 12, showCount = false, code = false, readOnlyMessage = "Read-only: this field cannot be changed.", fieldName, validateOn, onValueChange, className, textAreaClassName, style, required, minLength, maxLength, pattern, patternMessage, validate, placeholder, disabled, readOnly, ref, onChange, onBlur, onInvalid, onKeyDown, onClick, ...textAreaProps } = props;
     // The person's input design (the quick preferences) when this page and its form name none, for a labelled input.
     const design = useInputDesign(ownDesign, Boolean(label));
     const field = useTextField(props);
@@ -30,5 +39,5 @@ export function TextArea(props) {
         readOnlyNotice.hide();
         field.controlProps.onBlur(event);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, icon: icon, actions: readOnlyNotice.lock, aside: field.count, disabled: disabled, readOnly: readOnly, raiseLabel: Boolean(placeholder), multiline: true, className: className, style: { ...rowsStyle, ...style }, children: _jsx("textarea", { ...textAreaProps, ...field.controlProps, className: cx("nx-field__control", autoResize && "nx-field__control--auto", textAreaClassName), rows: rows, placeholder: placeholder || " ", disabled: disabled, readOnly: readOnly, onClick: handleClick, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), readOnlyNotice.notice] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { controlId: field.controlId, messageId: field.messageId, label: label, required: required, design: design, size: size, hint: hint, error: field.error, icon: icon, actions: readOnlyNotice.lock, aside: field.count, disabled: disabled, readOnly: readOnly, raiseLabel: Boolean(placeholder), multiline: true, className: className, style: { ...rowsStyle, ...style }, children: _jsx("textarea", { ...(code ? CODE_PROPS : null), ...textAreaProps, ...field.controlProps, className: cx("nx-field__control", autoResize && "nx-field__control--auto", code && "nx-field__control--code", textAreaClassName), rows: rows, placeholder: placeholder || " ", disabled: disabled, readOnly: readOnly, onClick: handleClick, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), readOnlyNotice.notice] }));
 }

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

@@ -0,0 +1,6 @@
+import { EInputTypes, type TextInputType } from "../../Interfaces/FormInterfaces.ts";
+import type { TextBoxType } from "./TextBox.tsx";
+/** The HTML type of each text box kind. */
+export declare const TEXT_BOX_TYPES: Readonly<Record<TextInputType, TextBoxType>>;
+/** Whether a `TextBox` renders this input type, e.g. `true` for `EInputTypes.Email`, `false` for `EInputTypes.TextArea`. */
+export declare const isTextInputType: (type: EInputTypes) => type is TextInputType;

package/dist/Components/Inputs/TextBoxTypes.js

@@ -0,0 +1,17 @@
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
+/*
+ * Which input types a `TextBox` renders, and the HTML type each one gets: the one place an input type becomes a string.
+ * `renderInput` reads it; it is its own file, not exported from the package, so the unit suites can check it without
+ * a browser (scripts/test-form-store.mts).
+ */
+/** The HTML type of each text box kind. */
+export const TEXT_BOX_TYPES = {
+    [EInputTypes.Text]: "text",
+    [EInputTypes.Email]: "email",
+    [EInputTypes.Password]: "password",
+    [EInputTypes.Search]: "search",
+    [EInputTypes.Tel]: "tel",
+    [EInputTypes.Url]: "url",
+};
+/** Whether a `TextBox` renders this input type, e.g. `true` for `EInputTypes.Email`, `false` for `EInputTypes.TextArea`. */
+export const isTextInputType = (type) => Object.hasOwn(TEXT_BOX_TYPES, type);

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

@@ -1,7 +1,17 @@
 import { type CSSProperties, type ReactNode, type Ref } from "react";
-import { type TreeChildrenPage, type TreeChildrenRequest, type TreeItem, type TreeValue, type TreeValueMode } from "../../Helpers/TreeStore.ts";
+import { type TreeChangeRules, type TreeChildrenPage, type TreeChildrenRequest, type TreeItem, type TreeItemChange, type TreeValue, type TreeValueMode } from "../../Helpers/TreeStore.ts";
+import type { TableRowAction } from "../../Interfaces/TableInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 export type TreeAction = "create" | "update" | "delete";
+/**
+ * An action of the page's own on one item: an icon button on its row when `inline` (shown under the pointer or with
+ * focus, always on a touch screen), and an entry of the row's context menu either way. The row is busy while a
+ * promise `onSelect` returns runs.
+ */
+export interface TreeRowAction<TItem extends TreeItem = TreeItem> extends TableRowAction<TItem> {
+    /** The key that runs it on the focused row, as Insert adds, F2 renames and Delete deletes in a tree that edits its own items. */
+    shortcut?: "Insert" | "F2" | "Delete";
+}
 export interface TreeCreateRequest<TItem extends TreeItem = TreeItem> {
     /** The item the new one goes under, or `null` at the top level. */
     parent: TItem | null;
@@ -31,7 +41,10 @@ export interface TreeViewHandle<TItem extends TreeItem = TreeItem> {
     /** Expands an item and its parents. */
     expand: (value: TreeValue) => void;
     collapse: (value: TreeValue) => void;
-    /** Expands the parents of an item, scrolls to it, and focuses it unless `focus` is false. */
+    /**
+     * Expands the parents of an item, scrolls to it, and focuses it unless `focus` is false. An item not loaded yet is
+     * revealed when the page that brings it comes (opened by `expand`, or Load more), unless the user moves on first.
+     */
     reveal: (value: TreeValue, focus?: boolean) => void;
     getValue: () => TreeValue[];
     /** Checks exactly these values, locked items included. For a tree without `value`. */
@@ -40,6 +53,8 @@ export interface TreeViewHandle<TItem extends TreeItem = TreeItem> {
     checkAll: (checked: boolean) => void;
     /** Every item in tree order, with the changes made in the tree. */
     getItems: () => TItem[];
+    /** The item of a value, as the tree holds it now; `undefined` when it is not loaded. */
+    getItem: (value: TreeValue) => TItem | undefined;
     /** Opens the editor for a new item under `parentValue`, or at the top level for `null`. */
     startCreate: (parentValue: TreeValue | null) => void;
     startRename: (value: TreeValue) => void;
@@ -53,6 +68,12 @@ export interface TreeViewHandle<TItem extends TreeItem = TreeItem> {
      * when it scrolls in, a closed one when it is next expanded. What is drawn stays until the fresh pages replace it.
      */
     refresh: (value?: TreeValue) => void;
+    /**
+     * Writes changes made elsewhere into this tree, as `writeTreeChanges` does into every tree with a `cacheKey` (which
+     * calls this): items placed, moved and taken out, the parents' counts and chevrons, and focus kept on its row, or on the
+     * row in its place when the item left. `rules` gives `compare`, the order of siblings.
+     */
+    apply: (changes: readonly TreeItemChange<TItem>[], rules?: TreeChangeRules<TItem>) => void;
 }
 export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
     /**
@@ -159,6 +180,30 @@ export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
     onItemsChange?: (items: TItem[]) => void;
     /** Asks before deleting. Default true; needs `<PopupHost />` on the page. */
     confirmDelete?: boolean;
+    /**
+     * Actions of the page's own on each item - Add under it, Edit, Move to trash - for a tree whose items are records
+     * changed through forms rather than renamed in the row: icon buttons on the row for the `inline` ones, all of them in
+     * the row's context menu, and the key each names. Not offered on locked items, nor in a read-only or disabled tree.
+     */
+    rowActions?: (item: TItem) => readonly TreeRowAction<TItem>[];
+    /**
+     * A button of the page's own at the end of the toolbar, such as Add New for a form. Its `description` is its tooltip
+     * and what a screen reader hears after its name. `disabled` with a `description` says why it cannot be pressed yet: it
+     * stays in the Tab order, looks unavailable, and a press - a click, a tap, Enter - shows the description in a note under
+     * it rather than doing nothing.
+     */
+    add?: {
+        label: ReactNode;
+        onClick: () => void;
+        disabled?: boolean;
+        description?: string;
+    };
+    /**
+     * The row shown as selected: the item the page picked - through `onItemClick`, say - marked `aria-selected` with a tint
+     * that stays when focus moves on. The page decides it: moving focus, a chevron, and opening or closing a row leave it
+     * where it is. Not on a `checkable` tree, whose rows are checked instead.
+     */
+    selectedValue?: TreeValue | null;
     /** The longest name the editor takes. Default 100. */
     maxLabelLength?: number;
     /** A click on a row without a checkbox, or Enter on it. Without it, a click expands or collapses a parent. */
@@ -173,6 +218,12 @@ export interface TreeViewProps<TItem extends TreeItem = TreeItem> {
     height?: number | string;
     /** The tallest the rows' area grows before it scrolls. Default 420. */
     maxHeight?: number | string;
+    /**
+     * Takes the height it is given, as a data table's `fill` does: the toolbar stays on top and the rows scroll inside
+     * under it, so the page around it never has to. `height` and `maxHeight` are ignored while it is on. Give it a cell
+     * that has a height: a side of an `AdminSplit` on an `AdminPage` with `fill` (nexus-admin), or a parent of your own.
+     */
+    fill?: boolean;
     /** Can be browsed, expanded, and focused, but not changed. A lock follows the label, and a try shows a note. */
     readOnly?: boolean;
     /** What a read-only tree says when someone tries to change it. Default "Read-only: this tree cannot be changed." */