nexus-shared 3.0.0 → 3.1.0

package/dist/Components/Forms/ExcelImport.js

@@ -1,24 +1,31 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { iconAlertTriangle, iconChevronDown, iconCircleCheck, iconCopy, iconDownload, iconFileImport, iconTable, iconUpload, InlineIcon } from "nexus-icons";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { iconAlertTriangle, iconChevronDown, iconCircleCheck, iconCopy, iconDownload, iconFile, iconFileImport, iconRefresh, iconTable, iconUpload, InlineIcon } from "nexus-icons";
+import { createRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { EXCEL_FILE_ACCEPT, excelColumnInputs, excelCount, excelEditorRows, excelPlural, excelProblemPlace, excelProblems, excelRowsOfKind, excelSheetRows, excelText, excelWritableRows, isExcelRowEdited, } from "../../Helpers/ExcelHelpers.js";
+import { EXCEL_FILE_ACCEPT, EXCEL_ROW_NUMBER, excelColumnInputs, excelCount, excelEditorRows, excelPlural, excelProblemPlace, excelProblems, excelRowNumber, excelRowsOfKind, excelSheetRows, excelText, excelWritableRows, hasExcelValues, isExcelRowTyped, } from "../../Helpers/ExcelHelpers.js";
 import { ExcelRowKind } from "../../Interfaces/ExcelInterfaces.js";
 import { downloadExcelTemplate, excelSettings, importExcelRows, verifyExcelFile } from "../../Services/ExcelApi.js";
 import { toast } from "../Layouts/Toaster.js";
+import { messageBox } from "../Layouts/MessageBox.js";
 import { openPopup } from "../Layouts/PopupHost.js";
 import { Button } from "../Documents/Button.js";
+import { Dropdown } from "../Inputs/Dropdown.js";
 import { TabularForm } from "../Inputs/TabularForm.js";
 const DEFAULT_MAX_HEIGHT = 320;
+/** A bulk insert starts from one empty row: the editor gives each column its own empty value. */
+const BULK_ROWS = [{}];
 /**
- * The three steps of an import in one panel: the template, the file, and the review.
+ * The three steps of an import in one panel: the template, the file, and the review - or, for a bulk insert, the rows
+ * typed in and the import.
  *
  * @example
  * <ExcelImport endpoints={CITY_SHEET} subject="city" onImported={() => table.reload()} />
+ * <ExcelImport endpoints={REGION_SHEET} subject="region" mode="bulk" onImported={() => table.reload()} />
  */
-export function ExcelImport({ endpoints, subject: given, params, onImported, onClose, templateDownload, maxHeight = DEFAULT_MAX_HEIGHT, className }) {
+export function ExcelImport({ endpoints, subject: given, params, onImported, onClose, templateDownload, maxHeight = DEFAULT_MAX_HEIGHT, mode = "file", ref, className }) {
     const id = useId();
+    const bulk = mode === "bulk";
     const fileRef = useRef(null);
     const newRef = useRef(null);
     const sameRef = useRef(null);
@@ -26,10 +33,19 @@ export function ExcelImport({ endpoints, subject: given, params, onImported, onC
     const [file, setFile] = useState(null);
     const [verify, setVerify] = useState(null);
     const [imported, setImported] = useState(null);
+    /** The rows already there when the import was sent: skipped, and named in its report. */
+    const [skipped, setSkipped] = useState([]);
     const [failure, setFailure] = useState(null);
+    /** What an import that wrote nothing refused, row by row: listed under the rows, which stay to be fixed. */
+    const [refused, setRefused] = useState(null);
+    /** The status the person picked for the new records; until they pick, the backend's default. */
+    const [pickedStatus, setPickedStatus] = useState(null);
     const [busy, setBusy] = useState("settings");
     /** Bumped on every answer: the editors take their rows again instead of being told to change them. */
     const [generation, setGeneration] = useState(0);
+    /** The new rows' editor as the person changes it: its rows, and those an import would send. Null: as it started. */
+    const [editorRows, setEditorRows] = useState(null);
+    const [sendableRows, setSendableRows] = useState(null);
     // A page may well write its endpoints and its params as literals, which are a new object every render. What they
     // say is what matters, so the settings are asked for again only when that changes.
     const sheetKey = `${String(endpoints.settings.module)}|${endpoints.settings.path}|${JSON.stringify(params ?? null)}`;
@@ -43,6 +59,9 @@ export function ExcelImport({ endpoints, subject: given, params, onImported, onC
                 return;
             if (answer.ok && answer.result)
                 setSettings(answer.result);
+            // A file brings its own columns, but rows typed here have nothing else to be drawn from.
+            else if (bulk)
+                setFailure(answer.message ?? excelText("bulkUnavailable"));
             setBusy(null);
         })();
         return () => {
@@ -51,18 +70,52 @@ export function ExcelImport({ endpoints, subject: given, params, onImported, onC
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sheetKey]);
     const subject = given ?? verify?.subject ?? settings?.subject ?? "row";
+    const statuses = settings?.recordStatuses ?? [];
+    const recordStatus = statuses.length ? (pickedStatus ?? settings?.defaultRecordStatus ?? statuses[0].value) : undefined;
+    const statusLabel = statuses.find(status => status.value === recordStatus)?.label;
     const columns = verify?.columns ?? settings?.columns ?? [];
     const inputs = useMemo(() => excelColumnInputs(columns), [columns]);
     const fresh = useMemo(() => (verify ? excelWritableRows(verify.rows) : []), [verify]);
     const same = useMemo(() => (verify ? excelRowsOfKind(verify.rows, ExcelRowKind.Duplicate) : []), [verify]);
     const freshRows = useMemo(() => excelEditorRows(fresh, columns), [fresh, columns]);
     const sameRows = useMemo(() => excelEditorRows(same, columns), [same, columns]);
+    /**
+     * The columns a row typed here can never fill: a required list is picked in the spreadsheet, under a key made for the
+     * person who downloaded it, which no browser can make. A sheet with one is imported from a file only, and its review
+     * takes no rows but the file's.
+     */
+    const requiredLists = useMemo(() => columns.filter(column => column.isReference && column.isRequired), [columns]);
+    const startRows = bulk ? BULK_ROWS : freshRows;
+    const rowCount = editorRows ?? startRows.length;
+    const sendable = sendableRows ?? (bulk ? 0 : freshRows.length);
+    const typing = bulk && requiredLists.length === 0;
+    /** The rows only this screen has - typed here, or a sheet's row edited here - which closing or starting over loses. */
+    const unsavedRows = () => (newRef.current?.getValue() ?? []).filter(row => isExcelRowTyped(row, columns)).length;
+    useImperativeHandle(ref, () => ({ unsavedRows }), [columns]);
+    /** As the person changes the rows: a sheet's row is sent as it is, and a row added here only with something in it. */
+    function onRowsChange(rows) {
+        setEditorRows(rows.length);
+        setSendableRows(rows.filter(row => excelRowNumber(row) > 0 || hasExcelValues(row, columns)).length);
+    }
+    function startEditor() {
+        setEditorRows(null);
+        setSendableRows(null);
+        setRefused(null);
+        setGeneration(value => value + 1);
+    }
+    /** Starting over clears what was typed here too, so it asks first, as closing the window does. */
+    async function onStartOver() {
+        if (await confirmDiscardRows(unsavedRows()))
+            reset();
+    }
     function reset() {
         setFile(null);
         setVerify(null);
         setImported(null);
+        setSkipped([]);
+        setPickedStatus(null);
         setFailure(null);
-        setGeneration(value => value + 1);
+        startEditor();
         if (fileRef.current)
             fileRef.current.value = "";
     }
@@ -89,102 +142,178 @@ export function ExcelImport({ endpoints, subject: given, params, onImported, onC
             return;
         }
         setVerify(answer.result);
-        setGeneration(value => value + 1);
+        startEditor();
     }
     async function onImport() {
-        if (!verify)
-            return;
-        const newValues = newRef.current?.getValue() ?? freshRows;
-        const sameValues = sameRef.current?.getValue() ?? sameRows;
-        // A duplicate is never updated, so one the person left alone is not sent at all; one they edited is a new record.
-        const edited = sameValues.filter(row => isExcelRowEdited(row, columns));
-        if (newValues.length && newRef.current && !newRef.current.validate())
+        const editor = newRef.current;
+        if (!editor || (!verify && !bulk))
             return;
-        if (edited.length && sameRef.current && !sameRef.current.validate())
+        // A row added here and left empty is not a row - Enter on the last one makes one - so it is dropped, not refused.
+        const before = editor.getValue();
+        for (let index = before.length - 1; index >= 0; index--) {
+            const row = before[index];
+            if (excelRowNumber(row) === 0 && !hasExcelValues(row, columns))
+                editor.remove(index, { undo: false });
+        }
+        const newValues = editor.getValue();
+        if (newValues.length && !editor.validate())
             return;
-        const rows = excelSheetRows([...newValues, ...edited], columns);
+        // A row already there is never updated and cannot be edited here, so only the new rows are sent. A row added here
+        // goes after every row the file had - those already there and those taken out of the review too - so none takes a
+        // number the file uses; a bulk insert has no file, and numbers its rows from 1.
+        const lastRow = verify ? verify.rows.reduce((last, row) => Math.max(last, row.number), 0) : 0;
+        const rows = excelSheetRows(newValues, columns, lastRow);
         if (!rows.length) {
             setFailure(excelText("importNothing"));
             return;
         }
         setBusy("importing");
-        const answer = await importExcelRows(endpoints, rows, callOptions);
+        const answer = await importExcelRows(endpoints, rows, { ...callOptions, recordStatus });
         setBusy(null);
+        // An import that wrote nothing - and a call that never answered - leaves the rows where they are, to be fixed and
+        // sent again: the panel says why, and lists under them each row the backend refused, when it sent its report.
         if (!answer.ok) {
             setFailure(answer.message ?? excelText("importedNone"));
-            if (answer.result)
-                setImported(answer.result);
+            if (answer.result?.refused?.length)
+                setRefused(byRowNumber(answer.result.refused));
             return;
         }
         const written = answer.result;
         if (!written)
             return;
+        // Anything else ends the import: the panel shows what was written, what was not and why, and what was skipped.
+        // Another file, or another batch, is a Start over.
         setFailure(null);
+        setSkipped(same);
         setImported(written);
-        toast.success(`${excelCount(written.created, subject)} imported`, { message: written.note });
-        // What was written is gone from the file's point of view: only what was refused stays to be fixed and sent again,
-        // and the counts are what those rows are now - not what the verify said about a file that has been half written.
-        const left = written.refused ?? [];
-        setVerify(current => current
-            ? {
-                ...current,
-                rows: left,
-                read: left.length,
-                new: left.filter(row => row.kind === ExcelRowKind.New).length,
-                duplicates: left.filter(row => row.kind === ExcelRowKind.Duplicate).length,
-                invalid: left.filter(row => row.kind === ExcelRowKind.Invalid).length,
-                isReady: false,
-            }
-            : current);
-        setGeneration(value => value + 1);
-        onImported?.(written);
+        if (written.created > 0) {
+            toast.success(`${excelCount(written.created, subject)} imported`, { message: written.note });
+            onImported?.(written);
+        }
     }
-    /** A problem names a cell: clicking it brings that row into view and puts the caret in it. */
-    const goTo = (editor, list) => (problem) => {
-        const index = list.findIndex(row => row.number === problem.row);
-        if (index >= 0)
+    /**
+     * A problem names a row: clicking it brings that row into view, wherever it has moved to, and puts the caret in it.
+     * A typed row has no sheet row; the import numbered it by its place in the editor.
+     */
+    const goTo = (editor) => (problem) => {
+        const rows = editor.current?.getValue() ?? [];
+        let index = rows.findIndex(row => excelRowNumber(row) === problem.row);
+        if (index < 0 && bulk)
+            index = problem.row - 1;
+        if (index >= 0 && index < rows.length)
             editor.current?.focusRow(index, problem.field);
     };
     const checking = busy === "checking";
     const importing = busy === "importing";
-    const canImport = Boolean(verify) && !busy && (fresh.length > 0 || same.length > 0);
-    return (_jsxs("section", { className: cx("nx-excel", className), "aria-label": `Import ${excelPlural(subject)} from a spreadsheet`, "data-nx-excel": "", children: [_jsxs("ol", { className: "nx-excel__steps", children: [_jsxs("li", { children: ["Download the template", templateDownload === false ? "" : " below", ": every list in it is a dropdown, and the ids beside a choice fill themselves."] }), _jsxs("li", { children: ["Fill in one row per ", subject, ". Leave the locked columns alone."] }), _jsx("li", { children: "Send it here to be checked. Nothing is written until you import." })] }), _jsxs("div", { className: "nx-excel__pick", children: [templateDownload !== false && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconDownload }), loading: busy === "template", onClick: onTemplate, children: excelText("template") })), _jsx("input", { ref: fileRef, id: `${id}-file`, className: "nx-visually-hidden", type: "file", accept: EXCEL_FILE_ACCEPT, onChange: event => void onPicked(event.currentTarget.files?.[0]) }), _jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconFileImport }), loading: checking, onClick: () => fileRef.current?.click(), children: file ? excelText("change") : excelText("choose") }), _jsx("p", { className: "nx-excel__file", "data-nx-excel-file": "", children: checking ? (_jsxs(_Fragment, { children: [excelText("checking"), " ", _jsx("strong", { children: file?.name }), String.fromCharCode(8230)] })) : file ? (_jsx("strong", { children: file.name })) : (_jsx("span", { className: "nx-excel__muted", children: excelText("nothingPicked") })) }), settings && (_jsxs("p", { className: "nx-excel__limits", children: [excelCount(settings.maxImportRows, "row"), " at most per file"] }))] }), failure && (_jsxs("p", { className: "nx-excel__failure", role: "alert", "data-nx-excel-failure": "", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: failure })] })), imported && _jsx(ImportedReport, { answer: imported, subject: subject }), verify && (_jsxs("div", { className: "nx-excel__review", "data-nx-excel-review": "", children: [!imported && _jsx("p", { className: "nx-excel__note", children: verify.note }), _jsx(ReviewSection, { id: `${id}-new`, title: excelText("newRows"), tone: verify.invalid > 0 ? "warning" : "neutral", count: fresh.length, hint: verify.invalid > 0 ? `${excelCount(verify.invalid, "row")} to fix before anything is written.` : undefined, rows: fresh, onGo: goTo(newRef, fresh), open: true, children: _jsx(TabularForm, { ref: newRef, "aria-label": excelText("newRows"), inputs: inputs, itemLabel: subject, defaultValue: freshRows, addable: false, sortable: false, maxHeight: maxHeight, size: "sm" }, `new-${generation}`) }), _jsx(ReviewSection, { id: `${id}-same`, title: excelText("duplicates"), tone: "muted", count: same.length, hint: excelText("duplicateHint"), rows: same, onGo: goTo(sameRef, same), children: _jsx(TabularForm, { ref: sameRef, "aria-label": excelText("duplicates"), inputs: inputs, itemLabel: subject, defaultValue: sameRows, addable: false, removable: false, sortable: false, maxHeight: maxHeight, size: "sm" }, `same-${generation}`) })] })), _jsxs("footer", { className: "nx-excel__actions", children: [verify && (fresh.length > 0 || same.length > 0) && (_jsxs("p", { className: "nx-excel__sending", "data-nx-excel-sending": "", children: [fresh.length > 0 ? `${excelCount(fresh.length, subject)} to send.` : "Nothing to send yet.", same.length > 0 ? ` Edit ${same.length === 1 ? `the one ${subject}` : `one of the ${excelCount(same.length, subject)}`} already there to send it too.` : ""] })), _jsxs("div", { className: "nx-excel__buttons", children: [file && !busy && (_jsx(Button, { variant: "ghost", onClick: reset, children: excelText("startOver") })), onClose && (_jsx(Button, { variant: "secondary", onClick: onClose, children: excelText("close") })), _jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconUpload }), loading: importing, disabled: !canImport, onClick: () => void onImport(), children: excelText("importLabel") })] })] })] }));
+    const reviewing = !imported && (bulk ? settings !== null : verify !== null);
+    const canImport = !busy && sendable > 0 && (bulk ? typing : Boolean(verify));
+    const note = bulk
+        ? typing
+            ? `Type one ${subject} per row, up to ${(settings?.maxImportRows ?? 0).toLocaleString("en-US")}. Nothing is written until you import.`
+            : `${requiredLists.map(column => column.header).join(", ")} can only be picked in the spreadsheet, so ${excelPlural(subject)} are imported from one: use Import from a spreadsheet.`
+        : verify?.note;
+    /** What the new rows' line says needs doing: what the import refused, or what the file's check found. */
+    const toFix = refused
+        ? `${excelCount(refused.length, "row")} not written: fix or remove ${refused.length === 1 ? "it" : "them"}, and import again.`
+        : verify && verify.invalid > 0
+            ? `${excelCount(verify.invalid, "row")} to fix before anything is written.`
+            : undefined;
+    return (_jsxs("section", { className: cx("nx-excel", className), "aria-label": bulk ? `Bulk insert ${excelPlural(subject)}` : `Import ${excelPlural(subject)} from a spreadsheet`, "data-nx-excel": "", children: [!bulk && !file && (_jsxs("ol", { className: "nx-excel__steps", children: [_jsxs("li", { children: ["Download the template", templateDownload === false ? "" : " below", ": every list in it is a dropdown, and the ids beside a choice fill themselves."] }), _jsxs("li", { children: ["Fill in one row per ", subject, ". Leave the locked columns alone."] }), _jsx("li", { children: "Send it here to be checked. Nothing is written until you import." })] })), !bulk && (_jsxs("div", { className: "nx-excel__pick", children: [!file && templateDownload !== false && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconDownload }), loading: busy === "template", onClick: onTemplate, children: excelText("template") })), _jsx("input", { ref: fileRef, id: `${id}-file`, className: "nx-visually-hidden", type: "file", accept: EXCEL_FILE_ACCEPT, onChange: event => void onPicked(event.currentTarget.files?.[0]) }), !file && (_jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconFileImport }), onClick: () => fileRef.current?.click(), children: excelText("choose") })), _jsx("p", { className: "nx-excel__file", "data-nx-excel-file": "", children: checking ? (_jsxs(_Fragment, { children: [excelText("checking"), " ", _jsx("strong", { children: file?.name }), String.fromCharCode(8230)] })) : file ? (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconFile, "aria-hidden": "true" }), _jsx("strong", { children: file.name })] })) : (_jsx("span", { className: "nx-excel__muted", children: excelText("nothingPicked") })) }), settings && (_jsxs("p", { className: "nx-excel__limits", children: [excelCount(settings.maxImportRows, "row"), " at most per file"] }))] })), failure && (_jsxs("p", { className: "nx-excel__failure", role: "alert", "data-nx-excel-failure": "", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: failure })] })), imported && _jsx(ImportedReport, { answer: imported, subject: subject, skipped: skipped, status: statusLabel, byRow: bulk }), reviewing && (_jsxs("div", { className: "nx-excel__review", "data-nx-excel-review": "", inert: importing, children: [_jsx("p", { className: "nx-excel__note", children: note }), statuses.length > 0 && (bulk ? typing : fresh.length > 0) && (_jsx("div", { className: "nx-excel__status", children: _jsx(Dropdown, { name: `${id}-status`, label: "New records start as", size: "sm", options: statuses, 
+                            // Always one: there is no record without a status, so nothing to clear.
+                            clearable: false, value: recordStatus, onValueChange: (value) => setPickedStatus(value), hint: "Change it later on each record." }) })), (bulk ? typing : fresh.length > 0) && (_jsx(ReviewSection, { id: `${id}-new`, title: excelText("newRows"), tone: toFix ? "warning" : "neutral", count: rowCount, hint: toFix, rows: refused ?? fresh, byRow: bulk, onGo: goTo(newRef), 
+                        // What the person types is in this editor only, and folding the section away would take it with it.
+                        fixed: true, children: _jsx(TabularForm, { ref: newRef, "aria-label": excelText("newRows"), inputs: inputs, itemLabel: subject, defaultValue: startRows, 
+                            // A sheet's row is the row's id: a copy leaves it behind, so it is never sent as that row of the file.
+                            rowKey: EXCEL_ROW_NUMBER, 
+                            // A row added here could never fill a required list, so such a sheet's review takes the file's rows only.
+                            addable: requiredLists.length === 0, max: settings?.maxImportRows, sortable: false, actionsAt: "end", lockable: true, maxHeight: maxHeight, size: "sm", onValueChange: onRowsChange }, `new-${generation}`) })), same.length > 0 && (_jsx(ReviewSection, { id: `${id}-same`, title: excelText("duplicates"), tone: "muted", count: same.length, hint: excelText("duplicateHint"), rows: same, onGo: goTo(sameRef), children: _jsx(TabularForm, { ref: sameRef, "aria-label": excelText("duplicates"), inputs: inputs, itemLabel: subject, defaultValue: sameRows, readOnly: true, readOnlyMessage: excelText("duplicateHint"), maxHeight: maxHeight, size: "sm" }, `same-${generation}`) }))] })), _jsxs("footer", { className: "nx-excel__actions", children: [imported ? (_jsx("p", { className: "nx-excel__sending", children: excelText(bulk ? "addAgain" : "importAgain") })) : (reviewing &&
+                        (bulk ? typing : rowCount > 0 || same.length > 0) && (_jsxs("p", { className: "nx-excel__sending", "data-nx-excel-sending": "", children: [sendable > 0 ? `${excelCount(sendable, subject)} to send.` : "Nothing to send.", same.length > 0 ? ` ${excelCount(same.length, subject)} already there ${same.length === 1 ? "is" : "are"} skipped.` : ""] }))), _jsxs("div", { className: "nx-excel__buttons", children: [!busy && (file || (bulk && imported)) && (_jsx(Button, { variant: "secondary", icon: _jsx(InlineIcon, { icon: iconRefresh }), onClick: () => void onStartOver(), children: excelText("startOver") })), onClose && (_jsx(Button, { variant: "secondary", onClick: onClose, children: excelText("close") })), !imported && (_jsx(Button, { variant: "primary", icon: _jsx(InlineIcon, { icon: iconUpload }), loading: importing, disabled: !canImport, onClick: () => void onImport(), children: excelText("importLabel") }))] })] })] }));
 }
 /**
- * One half of the review: a line that says what these rows are and how many, and the editor under it. Collapsible,
- * because a person with twenty duplicates and three new rows is looking at the three.
+ * One half of the review: a line that says what these rows are and how many, and the editor under it. The duplicates
+ * fold away, because a person with twenty of them and three new rows is looking at the three; the new rows do not, as
+ * folding them would take what the person typed with them.
  */
-function ReviewSection({ id, title, count, tone, hint, rows, onGo, open: openByDefault = false, children }) {
-    const [open, setOpen] = useState(openByDefault);
+function ReviewSection({ id, title, count, tone, hint, rows, onGo, byRow = false, open: openByDefault = false, fixed = false, children }) {
+    const [opened, setOpened] = useState(openByDefault);
+    const open = fixed || opened;
     const problems = useMemo(() => excelProblems(rows), [rows]);
     const duplicates = useMemo(() => rows.filter(row => row.duplicate), [rows]);
-    if (count === 0)
-        return null;
-    return (_jsxs("section", { className: "nx-excel__section", "data-open": open || undefined, "data-tone": tone, "data-nx-excel-section": title, children: [_jsx("h3", { className: "nx-excel__section-head", children: _jsxs("button", { type: "button", className: "nx-excel__toggle", "aria-expanded": open, "aria-controls": open ? id : undefined, onClick: () => setOpen(!open), children: [_jsx(InlineIcon, { icon: iconChevronDown, className: "nx-excel__chevron", "aria-hidden": "true" }), _jsx("span", { className: "nx-excel__title", children: title }), _jsx("span", { className: "nx-excel__tag", children: count.toLocaleString("en-US") }), hint && _jsx("span", { className: "nx-excel__hint", children: hint })] }) }), open && (_jsxs("div", { className: "nx-excel__section-body", id: id, children: [children, problems.length > 0 && _jsx(ProblemList, { problems: problems, onGo: onGo }), duplicates.length > 0 && (_jsxs("div", { className: "nx-excel__problems nx-excel__problems--same", "data-nx-excel-duplicates": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconCopy, "aria-hidden": "true" }), _jsx("span", { children: excelText("whyDuplicate") })] }), _jsx("ul", { children: duplicates.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate })] }, row.number))) })] }))] }))] }));
+    const head = (_jsxs(_Fragment, { children: [!fixed && _jsx(InlineIcon, { icon: iconChevronDown, className: "nx-excel__chevron", "aria-hidden": "true" }), _jsx("span", { className: "nx-excel__title", children: title }), _jsx("span", { className: "nx-excel__tag", children: count.toLocaleString("en-US") }), hint && _jsx("span", { className: "nx-excel__hint", children: hint })] }));
+    return (_jsxs("section", { className: "nx-excel__section", "data-open": open || undefined, "data-tone": tone, "data-nx-excel-section": title, children: [_jsx("h3", { className: "nx-excel__section-head", children: fixed ? (_jsx("span", { className: "nx-excel__toggle", "data-fixed": "", children: head })) : (_jsx("button", { type: "button", className: "nx-excel__toggle", "aria-expanded": open, "aria-controls": open ? id : undefined, onClick: () => setOpened(!open), children: head })) }), open && (_jsxs("div", { className: "nx-excel__section-body", id: id, children: [children, problems.length > 0 && _jsx(ProblemList, { problems: problems, onGo: onGo, byRow: byRow }), duplicates.length > 0 && (_jsxs("div", { className: "nx-excel__problems nx-excel__problems--same", "data-nx-excel-duplicates": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconCopy, "aria-hidden": "true" }), _jsx("span", { children: excelText("whyDuplicate") })] }), _jsx("ul", { children: duplicates.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate })] }, row.number))) })] }))] }))] }));
 }
-/** What the server found wrong, each naming the cell the person reads, and taking them to it. */
-function ProblemList({ problems, onGo }) {
-    return (_jsxs("div", { className: "nx-excel__problems", "data-nx-excel-problems": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: excelText("toFix") })] }), _jsx("ul", { children: problems.map(problem => (_jsxs("li", { children: [onGo ? (_jsx("button", { type: "button", className: "nx-excel__place nx-excel__go", onClick: () => onGo(problem), children: excelProblemPlace(problem) })) : (_jsx("span", { className: "nx-excel__place", children: excelProblemPlace(problem) })), _jsx("span", { children: problem.message })] }, `${problem.row}:${problem.column}:${problem.message}`))) })] }));
+/** What the server found wrong, each naming the cell the person reads - or, for rows typed here, the row - and taking them to it. */
+function ProblemList({ problems, onGo, byRow = false }) {
+    return (_jsxs("div", { className: "nx-excel__problems", "data-nx-excel-problems": "", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsx("span", { children: excelText("toFix") })] }), _jsx("ul", { children: problems.map(problem => (_jsxs("li", { children: [onGo ? (_jsx("button", { type: "button", className: "nx-excel__place nx-excel__go", onClick: () => onGo(problem), children: excelProblemPlace(problem, byRow) })) : (_jsx("span", { className: "nx-excel__place", children: excelProblemPlace(problem, byRow) })), _jsx("span", { children: problem.message })] }, `${problem.row}:${problem.column}:${problem.message}`))) })] }));
 }
-/** What the import did, in the backend's own words, and what it did not write. */
-function ImportedReport({ answer, subject }) {
+/**
+ * What the import did, in three parts side by side rather than inside one another: what was written, in the backend's
+ * own words; what was not, and why, problem by problem; and what was skipped because it is already a record. Rows
+ * typed here have no sheet, so `byRow` names a problem by its row rather than by a spreadsheet's cell.
+ */
+function ImportedReport({ answer, subject, skipped, status, byRow }) {
     const wrote = answer.created > 0;
-    return (_jsxs("div", { className: cx("nx-excel__result", wrote ? "nx-excel__result--ok" : "nx-excel__result--none"), role: "status", "data-nx-excel-result": "", children: [_jsxs("p", { className: "nx-excel__result-head", children: [_jsx(InlineIcon, { icon: wrote ? iconCircleCheck : iconAlertTriangle, "aria-hidden": "true" }), _jsx("strong", { children: wrote ? `${excelCount(answer.created, subject)} added` : excelText("importedNone") })] }), _jsx("p", { className: "nx-excel__result-note", children: answer.note }), (answer.refused?.length ?? 0) > 0 && (_jsx("ul", { className: "nx-excel__refused", children: answer.refused?.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate ?? row.problems?.[0]?.message ?? excelText("refused") })] }, row.number))) }))] }));
+    const refused = byRowNumber(answer.refused ?? []);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cx("nx-excel__result", wrote ? "nx-excel__result--ok" : "nx-excel__result--none"), role: "status", "data-nx-excel-result": "", children: [_jsxs("p", { className: "nx-excel__result-head", children: [_jsx(InlineIcon, { icon: wrote ? iconCircleCheck : iconAlertTriangle, "aria-hidden": "true" }), _jsx("strong", { children: wrote ? `${excelCount(answer.created, subject)} added${status ? ` as ${status}` : ""}` : excelText("importedNone") })] }), _jsx("p", { className: "nx-excel__result-note", children: answer.note })] }), refused.length > 0 && (_jsxs("div", { className: "nx-excel__problems", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconAlertTriangle, "aria-hidden": "true" }), _jsxs("span", { children: [excelText("failedHead"), " (", refused.length.toLocaleString("en-US"), ")"] })] }), _jsx("ul", { children: refused.flatMap(row => row.problems?.length
+                            ? row.problems.map(problem => (_jsxs("li", { children: [_jsx("span", { className: "nx-excel__place", children: excelProblemPlace(problem, byRow) }), _jsx("span", { children: problem.message })] }, `${row.number}:${problem.column}:${problem.message}`)))
+                            : [
+                                _jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate ?? excelText("refused") })] }, row.number),
+                            ]) })] })), skipped.length > 0 && (_jsxs("div", { className: "nx-excel__problems nx-excel__problems--same", children: [_jsxs("p", { className: "nx-excel__problems-head", children: [_jsx(InlineIcon, { icon: iconCopy, "aria-hidden": "true" }), _jsxs("span", { children: [excelText("skippedHead"), " (", skipped.length.toLocaleString("en-US"), ")"] })] }), _jsx("ul", { children: skipped.map(row => (_jsxs("li", { children: [_jsxs("span", { className: "nx-excel__place", children: ["Row ", row.number] }), _jsx("span", { children: row.duplicate ?? excelText("duplicateHint") })] }, row.number))) })] }))] }));
+}
+/** Rows in the order the person reads them: by their row, whatever order the backend listed them in. */
+function byRowNumber(rows) {
+    return [...rows].sort((a, b) => a.number - b.number);
 }
+/** The import windows open now, by popup key, so a second opening can see what the first one holds. */
+const openPanels = new Map();
 /**
- * Opens the import panel as a window. This is the one line a data table's Import entry needs.
+ * Opens the import panel as a window. This is the one line a data table's Import entry needs - and, with
+ * `mode: "bulk"`, its Bulk insert entry.
  *
  * @example onImport={() => openExcelImport({ endpoints: CITY_SHEET, subject: "city", onImported: reload })}
  */
 export function openExcelImport({ title, popupKey, ...props }) {
     const subject = props.subject ?? "row";
-    return openPopup({
-        key: popupKey ?? `nx-excel:${String(props.endpoints.import.module)}:${props.endpoints.import.path}`,
-        title: title ?? `Import ${excelPlural(subject)} from a spreadsheet`,
+    const bulk = props.mode === "bulk";
+    // A key of its own for a bulk insert, so opening one never closes an import whose review is half gone over.
+    const key = popupKey ?? `${bulk ? "nx-excel-bulk" : "nx-excel"}:${String(props.endpoints.import.module)}:${props.endpoints.import.path}`;
+    // Picked again while its window is still open - minimized, say - a window holding rows typed or changed in it comes
+    // back as it was, as a CRUD's Add form with changes does; an untouched one, or one showing an import's report, is
+    // replaced by a fresh panel.
+    const open = openPanels.get(key);
+    if (open && (open.panel.current?.unsavedRows() ?? 0) > 0) {
+        open.handle.restore();
+        return open.handle;
+    }
+    const panel = createRef();
+    const handle = openPopup({
+        key,
+        title: title ?? (bulk ? `Bulk insert ${excelPlural(subject)}` : `Import ${excelPlural(subject)} from a spreadsheet`),
         icon: _jsx(InlineIcon, { icon: iconTable }),
         size: "xl",
         closeOnBackdrop: false,
+        // What was typed or changed here is in no file: closing over it asks first, as a form with changes does.
+        beforeClose: () => confirmDiscardRows(panel.current?.unsavedRows() ?? 0),
         // No Close of its own: the window's title bar already has one, and two ways out of one panel is one too many.
-        content: _jsx(ExcelImport, { ...props }),
+        content: _jsx(ExcelImport, { ...props, ref: panel }),
+    });
+    const entry = { handle, panel };
+    openPanels.set(key, entry);
+    void handle.closed.then(() => {
+        if (openPanels.get(key) === entry)
+            openPanels.delete(key);
+    });
+    return handle;
+}
+/** Asks before rows only this screen has are thrown away. With nothing to lose, nothing is asked. */
+function confirmDiscardRows(rows) {
+    if (rows === 0)
+        return true;
+    return messageBox.confirm({
+        title: excelText("discardTitle"),
+        message: `${excelCount(rows, "row")} you typed or changed here will be lost.`,
+        tone: "warning",
+        confirmLabel: excelText("discardLabel"),
+        cancelLabel: excelText("keepEditing"),
     });
 }

package/dist/Components/Forms/Form.js

@@ -10,7 +10,6 @@ import { FormStore } from "../../Helpers/FormStore.js";
 import { inputFieldName } from "../../Helpers/InputParamsHelpers.js";
 import { formatTime } from "../../Helpers/TimeHelpers.js";
 import { Button } from "../Documents/Button.js";
-import { hasContent } from "../Inputs/Field.js";
 import { isFirstInvalid } from "../Inputs/InputField.js";
 import { renderInput } from "../Inputs/InputRenderer.js";
 import { firstFocusable } from "../Inputs/RowsInput.js";
@@ -22,8 +21,6 @@ import { firstFocusable } from "../Inputs/RowsInput.js";
  */
 /** Inputs without a box: they line up with the boxes beside them. */
 const CHOICE_TYPES = new Set(["checkbox", "switch", "radio"]);
-/** Inputs taller than one line, for the placeholders shown while the values load. */
-const TALL_TYPES = new Set(["textarea", "markdown", "rich-text", "tree", "tabular", "group", "checkbox-group", "radio-group"]);
 /** What takes focus in an input's cell: a control to type in or pick, before any button of its toolbar. */
 const TYPING_TARGETS = 'input:not([type="hidden"]):not(.nx-visually-hidden):not(:disabled), textarea:not(.nx-visually-hidden):not(:disabled), select:not(:disabled), [contenteditable="true"]';
 const INVALID_CONTROLS = ":is(input, textarea, select):invalid";
@@ -136,13 +133,6 @@ const FormCell = memo(function FormCell({ store, params, context }) {
     }
     return (_jsx("div", { className: cx("nx-form__cell", CHOICE_TYPES.has(params.type) && "nx-form__cell--choice"), style: { "--nx-span": span }, "data-span": span, "data-beside": besideBoxes(params, span, context.design) || undefined, "data-nx-field": name, onBlur: onBlur, children: _jsx(FieldInput, { store: store, params: params, stamp: stamp, error: store.shownError(name), context: context }, stamp) }));
 });
-/** A placeholder in an input's shape while the values load. */
-function SkeletonCell({ params, design }) {
-    const span = spanOf(params);
-    const choice = CHOICE_TYPES.has(params.type);
-    const ownDesign = params.design ?? design ?? "standard";
-    return (_jsxs("div", { className: cx("nx-form__cell", "nx-form__skeleton", choice && "nx-form__cell--choice"), style: { "--nx-span": span }, "data-span": span, "data-beside": besideBoxes(params, span, design) || undefined, children: [!choice && ownDesign === "standard" && hasContent(params.label) && _jsx("span", { className: "nx-form__skeleton-label" }), _jsx("span", { className: cx("nx-form__skeleton-box", TALL_TYPES.has(params.type) && "nx-form__skeleton-box--tall", choice && "nx-form__skeleton-box--choice") })] }));
-}
 /** The note over a form whose unsaved changes came back from a draft. */
 function DraftNotice({ store, restored, inputs, preferences }) {
     const label = (name) => formInputLabel(inputs.find(params => params.name === name), name);
@@ -186,7 +176,7 @@ export function Form(props) {
     // that already has values (from `useForm`, a form shown again) keeps them.
     if (!store.started) {
         store.configure(options, false);
-        store.load(props.defaultValue ?? {}, { draft: !loading, quiet: true });
+        store.load(props.defaultValue ?? {}, { draft: !loading, quiet: true, loading });
     }
     useLayoutEffect(() => store.announce(), [store]);
     // Inputs or settings that change what is valid check every value again; callbacks only swap.
@@ -316,8 +306,10 @@ export function Form(props) {
         if (first && isFirstInvalid(event.currentTarget))
             focusInput(first);
     }
-    const context = useMemo(() => ({ idPrefix, size, design, readOnly, disabled, scopeNames: !inForm }), [idPrefix, size, design, readOnly, disabled, inForm]);
+    // While the values load, the real inputs show, disabled: the form has its final shape from the first frame, so a
+    // popup around it never jumps when the record lands. The store refuses anything typed until then.
+    const context = useMemo(() => ({ idPrefix, size, design, readOnly, disabled: disabled || loading, scopeNames: !inForm }), [idPrefix, size, design, readOnly, disabled, loading, inForm]);
     // With FormButtons on the page, the form's message is in their status line.
     const ownMessage = status.buttons === 0 ? status.message : null;
-    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-form", `nx-form--${size}`, className), style: style, "data-nx-form": "", "aria-busy": loading || undefined, children: [status.restored && !loading && _jsx(DraftNotice, { store: anyStore, restored: status.restored, inputs: inputs, preferences: preferences }), _jsx("div", { className: "nx-form__grid", children: inputs.filter(params => params.dependsOn?.length || !params.hidden).map((params, index, visible) => (_jsxs(Fragment, { children: [params.section && (index === 0 || visible[index - 1]?.section !== params.section) && _jsx("h3", { className: "nx-form__section", children: params.section }), loading ? _jsx(SkeletonCell, { params: params, design: design }) : _jsx(FormCell, { store: anyStore, params: params, context: context })] }, params.name))) }), loading && (_jsx("p", { className: "nx-visually-hidden", role: "status", children: "Loading\u2026" })), _jsx("input", { ref: proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", disabled: locked, onInvalid: onProxyInvalid }), ownMessage && (_jsxs("p", { className: "nx-form__message nx-field__message nx-field__message--error", role: "alert", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: ownMessage })] }))] }));
+    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-form", `nx-form--${size}`, className), style: style, "data-nx-form": "", "aria-busy": loading || undefined, children: [status.restored && !loading && _jsx(DraftNotice, { store: anyStore, restored: status.restored, inputs: inputs, preferences: preferences }), _jsx("div", { className: "nx-form__grid", children: inputs.filter(params => params.dependsOn?.length || !params.hidden).map((params, index, visible) => (_jsxs(Fragment, { children: [params.section && (index === 0 || visible[index - 1]?.section !== params.section) && _jsx("h3", { className: "nx-form__section", children: params.section }), _jsx(FormCell, { store: anyStore, params: params, context: context })] }, params.name))) }), loading && (_jsx("p", { className: "nx-visually-hidden", role: "status", children: "Loading\u2026" })), _jsx("input", { ref: proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", disabled: locked, onInvalid: onProxyInvalid }), ownMessage && (_jsxs("p", { className: "nx-form__message nx-field__message nx-field__message--error", role: "alert", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsx("span", { children: ownMessage })] }))] }));
 }

package/dist/Components/Forms/SubmitForm.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
 import type { AnyFormStore, FormStore } from "../../Helpers/FormStore.ts";
-import type { FormValues, SubmitFormProps } from "../../Interfaces/FormInterfaces.ts";
+import type { FormStatusLineMode, FormValues, SubmitFormProps } from "../../Interfaces/FormInterfaces.ts";
 import type { Size } from "../../Interfaces/TypeInterfaces.ts";
 export interface FormButtonsProps<TValues extends FormValues = FormValues> {
     /** The form's store: the one given to the form as `form`. */
@@ -25,6 +25,15 @@ export interface FormButtonsProps<TValues extends FormValues = FormValues> {
     size?: Size;
     /** Nothing to save: only Cancel shows. */
     readOnly?: boolean;
+    /** What the status line reports. Default `full`; `errors` for a short form that keeps nothing, such as a sign-in or a search. */
+    statusLine?: FormStatusLineMode;
+    /** The buttons share the bar's whole width, such as a sign-in's one button across its card. */
+    block?: boolean;
+    /**
+     * With `statusLine="errors"` the line keeps quiet, so while the form loads the submit button says it instead: a
+     * spinner and this. Default "Loading…".
+     */
+    loadingLabel?: ReactNode;
     className?: string;
 }
 /**
@@ -43,7 +52,7 @@ export declare function confirmDiscard(form: AnyFormStore): Promise<boolean>;
  *   <ApiForm form={form} buttons={false} inputs={inputs} api={api} />
  * </Popup>
  */
-export declare function FormButtons<TValues extends FormValues = FormValues>({ form, submitLabel, submitIcon, onCancel, confirmCancel, cancelLabel, resettable, resetLabel, align, size, readOnly, className, }: FormButtonsProps<TValues>): import("react").JSX.Element;
+export declare function FormButtons<TValues extends FormValues = FormValues>({ form, submitLabel, submitIcon, onCancel, confirmCancel, cancelLabel, resettable, resetLabel, align, size, readOnly, statusLine, block, loadingLabel, className, }: FormButtonsProps<TValues>): import("react").JSX.Element;
 /**
  * A `Form` that submits: every value is checked on Save (the inputs' own rules, the form's `validate`, rows not on the
  * page), each message shows, and the first problem takes focus; then `onSubmit` gets the values, and while it runs Save

package/dist/Components/Forms/SubmitForm.js

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

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

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

package/dist/Components/Inputs/DropdownParts.js

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