nexus-shared 4.0.0 → 4.1.0

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

@@ -16,13 +16,20 @@ export interface CrudDetailsProps<TRow extends FormValues = FormValues> {
     render?: (row: TRow) => ReactNode;
     /** The currency of a `money` field without its own, as the table writes it (`DataTableProps.currency`). */
     currency?: string | null;
+    /**
+     * Drawn at the end of a section's heading, by the section's `group`: a section's own Edit button
+     * (`CrudDetailsOptions.sections`). Nothing for a section it answers nothing for.
+     */
+    headingEnd?: (group: string) => ReactNode;
 }
 /**
- * A record's fields as label and value, two to a line where there is room, in the formats of the table's columns. Where
- * columns name a `group` (a table's band), each run of neighbouring columns with one group is a section under that
- * heading; columns with no group draw as before, without one.
+ * A record's fields, each a label and its value in a box: two pairs to a line where the details are wide, one where they
+ * are not, in the formats of the table's columns. Where columns name a `group` (a table's band), each run of
+ * neighbouring columns with one group is a section under a numbered heading ("01. Contact"); columns with no group come
+ * without one. A `wrap` column takes the whole line, and a `table` column whose value is a list of rows is a small table
+ * across it ("None" for an empty list).
  */
-export declare function CrudDetails<TRow extends FormValues = FormValues>({ row, columns, load, render, currency }: CrudDetailsProps<TRow>): import("react").JSX.Element;
+export declare function CrudDetails<TRow extends FormValues = FormValues>({ row, columns, load, render, currency, headingEnd }: CrudDetailsProps<TRow>): import("react").JSX.Element;
 export interface CrudTabFooterProps {
     /** Its words first (a `<p>`: what saving does), then the buttons (`FormButtons`, or `Button`s). */
     children: ReactNode;

package/dist/Components/Forms/CrudParts.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { motionAllowed } from "../../Helpers/AnimationHelpers.js";
 import { isAbortError } from "../../Helpers/ApiResponses.js";
@@ -7,7 +7,7 @@ import { cx } from "../../Helpers/ClassHelpers.js";
 import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
 import { isAwaitedCrudField } from "../../Helpers/CrudDetailsTabs.js";
 import { crudDetailsRuns } from "../../Helpers/FormConfirm.js";
-import { readPath } from "../../Helpers/TableHelpers.js";
+import { columnValue, formatCellText, readPath } from "../../Helpers/TableHelpers.js";
 import { useNumberLocale } from "../../Helpers/UserPreferences.js";
 import { TableCellValue } from "../Viewers/DataTableParts.js";
 import { MarkdownView } from "../Viewers/MarkdownView.js";
@@ -17,13 +17,46 @@ import { MarkdownView } from "../Viewers/MarkdownView.js";
  * not drawn.
  */
 const usedHeight = (element) => parseFloat(getComputedStyle(element).height);
+/** A section's number before its heading: "01. ", "02. ", in the order the sections come. */
+const sectionNumber = (index) => `${String(index + 1).padStart(2, "0")}. `;
+/** A section's numbered heading, and what the page puts at its end (its Edit button) beside it on the same line. */
+function CrudDetailsHeading({ number, group, end }) {
+    const heading = (_jsxs("h3", { className: "nx-crud-details__heading", children: [sectionNumber(number), group] }));
+    if (end === null || end === undefined || end === false)
+        return heading;
+    return (_jsxs("div", { className: "nx-crud-details__head", children: [heading, end] }));
+}
+/** One cell of a field's small table: the table's look of the value, but a yes or no in words (not the table's tick). */
+function CrudDetailsCell({ column, row, options }) {
+    if (column.format === "boolean" && !column.options && !column.render)
+        return _jsx(_Fragment, { children: formatCellText(column, columnValue(column, row), options, row) });
+    return _jsx(TableCellValue, { column: column, row: row, options: options });
+}
 /**
- * A record's fields as label and value, two to a line where there is room, in the formats of the table's columns. Where
- * columns name a `group` (a table's band), each run of neighbouring columns with one group is a section under that
- * heading; columns with no group draw as before, without one.
+ * A field whose value is a list of rows (`column.table`), as a small read-only table: a header row, each row's number
+ * first, every cell in its column's format (an option's tone as its tag, a yes or no in words). The Markdown view's
+ * table look, across the whole line, scrolling sideways inside itself when its columns are wider than the line.
  */
-export function CrudDetails({ row, columns, load, render, currency }) {
+function CrudDetailsTable({ label, columns, rows, options }) {
+    return (_jsx("div", { className: "nx-markdown nx-crud-details__rows", children: _jsxs("table", { "aria-label": label, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "#" }), columns.map(column => (_jsx("th", { scope: "col", children: column.label }, column.key)))] }) }), _jsx("tbody", { children: rows.map((one, index) => (_jsxs("tr", { children: [_jsx("td", { children: index + 1 }), columns.map(column => (_jsx("td", { children: _jsx(CrudDetailsCell, { column: column, row: one, options: options }) }, column.key)))] }, index))) })] }) }));
+}
+/**
+ * A record's fields, each a label and its value in a box: two pairs to a line where the details are wide, one where they
+ * are not, in the formats of the table's columns. Where columns name a `group` (a table's band), each run of
+ * neighbouring columns with one group is a section under a numbered heading ("01. Contact"); columns with no group come
+ * without one. A `wrap` column takes the whole line, and a `table` column whose value is a list of rows is a small table
+ * across it ("None" for an empty list).
+ */
+export function CrudDetails({ row, columns, load, render, currency, headingEnd }) {
     const [record, setRecord] = useState(row);
+    // A record read again (a workspace's `refresh()`) is drawn in place, so what has the focus (a section's Edit) keeps it.
+    const given = useRef(row);
+    useEffect(() => {
+        if (row === given.current)
+            return;
+        given.current = row;
+        setRecord(current => ({ ...current, ...row }));
+    }, [row]);
     const [state, setState] = useState(load ? "loading" : "done");
     const rootRef = useRef(null);
     // The details' height just before the full record went in, kept only when the change may be animated.
@@ -73,11 +106,20 @@ export function CrudDetails({ row, columns, load, render, currency }) {
     const awaited = (column) => isAwaitedCrudField(column, record, state);
     // Sections only where a column names a group: without one the list is drawn exactly as it always was.
     const runs = useMemo(() => (columns.some(column => column.group) ? crudDetailsRuns(columns) : null), [columns]);
-    const list = (fields) => (_jsx("dl", { className: "nx-crud-details__list", children: fields.map(column => (_jsxs("div", { className: cx("nx-crud-details__item", column.wrap && "nx-crud-details__item--wide"), children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__value", children: awaited(column) ? (state === "failed" ? _jsx("span", { className: "nx-crud-details__missing", children: "Not loaded" }) : null) : column.markdown && !column.render ? (_jsx(MarkdownView, { value: String(readPath(record, column.key) ?? ""), placeholder: `No ${column.label.toLowerCase()}` })) : (_jsx(TableCellValue, { column: column, row: record, options: options })) })] }, column.key))) }));
+    const list = (fields) => (_jsx("dl", { className: "nx-crud-details__list", children: fields.map(column => {
+            const waiting = awaited(column);
+            const rows = column.table && !waiting ? columnValue(column, record) : undefined;
+            if (column.table && Array.isArray(rows) && rows.length > 0) {
+                return (_jsxs("div", { className: "nx-crud-details__item nx-crud-details__item--table", children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__table", children: _jsx(CrudDetailsTable, { label: column.label, columns: column.table, rows: rows.filter(one => typeof one === "object" && one !== null), options: options }) })] }, column.key));
+            }
+            return (_jsxs("div", { className: cx("nx-crud-details__item", (column.wrap || column.markdown) && "nx-crud-details__item--wide"), children: [_jsx("dt", { className: "nx-crud-details__label", children: column.label }), _jsx("dd", { className: "nx-crud-details__value", children: waiting ? (state === "failed" ? _jsx("span", { className: "nx-crud-details__missing", children: "Not loaded" }) : null) : column.table ? (_jsx("span", { className: "nx-crud-details__missing", children: "None" })) : column.markdown && !column.render ? (_jsx(MarkdownView, { value: String(readPath(record, column.key) ?? ""), placeholder: `No ${column.label.toLowerCase()}` })) : (_jsx(TableCellValue, { column: column, row: record, options: options })) })] }, column.key));
+        }) }));
+    // Only the sections with a heading are numbered; a run of columns with no group has none.
+    let numbered = 0;
     return (_jsx("div", { ref: rootRef, className: "nx-crud-details", "aria-busy": state === "loading" || undefined, children: render
             ? render(record)
             : runs
-                ? runs.map((run, index) => (_jsxs("div", { className: "nx-crud-details__section", children: [run.group && _jsx("h3", { className: "nx-crud-details__heading", children: run.group }), list(run.columns)] }, `${index}:${run.group ?? ""}`)))
+                ? runs.map((run, index) => (_jsxs("div", { className: "nx-crud-details__section", children: [run.group && _jsx(CrudDetailsHeading, { number: numbered++, group: run.group, end: headingEnd?.(run.group) }), list(run.columns)] }, `${index}:${run.group ?? ""}`)))
                 : list(columns) }));
 }
 /**
@@ -106,13 +148,37 @@ export function CrudTabFooter({ children, className }) {
             return;
         const write = () => panel.style.setProperty("--nx-crud-tab-footer-size", `${bar.getBoundingClientRect().height}px`);
         write();
+        // Chrome scrolls a text box's caret into view, not the box: a text area whose first line is clear of the bar keeps
+        // its other lines under it. Once the browser has scrolled, the rest of the field is brought up above the bar, never
+        // so far that its top leaves the panel.
+        let frame = 0;
+        const onFocus = (event) => {
+            const field = event.target;
+            if (!(field instanceof HTMLElement) || bar.contains(field))
+                return;
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => {
+                const box = field.getBoundingClientRect();
+                const under = box.bottom + 4 - bar.getBoundingClientRect().top;
+                const room = box.top - (panel.getBoundingClientRect().top + 4);
+                const by = Math.min(under, room);
+                if (by > 0.5)
+                    panel.scrollBy({ top: by });
+            });
+        };
+        panel.addEventListener("focusin", onFocus);
+        const stop = () => {
+            cancelAnimationFrame(frame);
+            panel.removeEventListener("focusin", onFocus);
+            panel.style.removeProperty("--nx-crud-tab-footer-size");
+        };
         if (typeof ResizeObserver === "undefined")
-            return () => panel.style.removeProperty("--nx-crud-tab-footer-size");
+            return stop;
         const observer = new ResizeObserver(write);
         observer.observe(bar);
         return () => {
             observer.disconnect();
-            panel.style.removeProperty("--nx-crud-tab-footer-size");
+            stop();
         };
     }, []);
     return (_jsx("div", { ref: ref, className: cx("nx-crud-tab-footer", className), children: children }));

package/dist/Components/Forms/CrudRowForms.js

@@ -1,18 +1,23 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
-import { unwrapApiResult } from "../../Helpers/ApiResponses.js";
+import { errorMessage, unwrapApiResult } from "../../Helpers/ApiResponses.js";
 import { isApiEndpoint } from "../../Helpers/ApiRoutes.js";
+import { formConfirmAsks } from "../../Helpers/FormConfirm.js";
+import { crudRowFormAsksOnly, crudRowFormConfirm, crudRowFormQuestion } from "../../Helpers/CrudRowForms.js";
 import { FormStore } from "../../Helpers/FormStore.js";
 import { api as browserApi } from "../../Services/BrowserApi.js";
 import { openPopup } from "../Layouts/PopupHost.js";
 import { popupRuleFor } from "../Layouts/PopupRules.js";
+import { toast } from "../Layouts/Toaster.js";
 import { ApiForm } from "./ApiForm.js";
+import { askFormQuestion } from "./FormQuestion.js";
 import { confirmDiscard, FormButtons } from "./SubmitForm.js";
 /*
  * A row action that opens a form of its own for the record, in a popup (`Crud` `rowForms`): its inputs, the values it
- * opens on (`load`), where a save goes (`submit`, `transform`), and the answer handed back so the CRUD writes what it
- * names into the record (`writes`, Helpers/CrudRowForms.ts). The CRUD decides where it is offered and does the writing.
+ * opens on (`load`), the question before a save (`confirm`), where a save goes (`submit`, `transform`), and the answer
+ * handed back so the CRUD writes what it names into the record (`writes`, Helpers/CrudRowForms.ts). One with no inputs
+ * is its question alone, with no popup. The CRUD decides where it is offered and does the writing.
  */
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
 const isPromise = (value) => typeof value?.then === "function";
@@ -44,6 +49,10 @@ function rowFormLoad(initial) {
  */
 export function openCrudRowForm(request) {
     const { form: params, key, name, label } = request;
+    if (crudRowFormAsksOnly(params)) {
+        void askCrudRowForm(request);
+        return;
+    }
     const form = new FormStore();
     const status = rowFormLoad(params.load ? "loading" : "done");
     const popupKey = `${name}-${params.id}-${key}`;
@@ -65,6 +74,55 @@ export function openCrudRowForm(request) {
         footer: popup => _jsx(CrudRowFormFooter, { form: form, status: status, submitLabel: params.submitLabel, onCancel: () => popup.close() }),
     });
 }
+/** The questions alone on their way, by popup key: choosing one again while it asks or sends does nothing. */
+const asking = new Set();
+/**
+ * A row form with no inputs: what `load` read (else the record as the list has it) through `transform`, asked about
+ * (`confirm`, else "{label} {name}?"), then sent. A read or a save that fails shows the API's message as a toast, and a
+ * refusal writes nothing; Cancel, Esc or the close button send nothing. One at a time per record and action.
+ */
+async function askCrudRowForm(request) {
+    const { form: params, row, id, rowKey, key, name, label } = request;
+    const busy = `${name}-${params.id}-${key}`;
+    if (asking.has(busy))
+        return;
+    asking.add(busy);
+    try {
+        let loaded = null;
+        const load = params.load;
+        if (load) {
+            if (isApiEndpoint(load)) {
+                // The API's own toast says why a read failed; an answer with no record says it here.
+                const answer = await browserApi.get(load, { params: { id, [rowKey]: id } });
+                if (!answer.ok)
+                    return;
+                loaded = isRecord(answer.result) ? answer.result : null;
+            }
+            else
+                loaded = ((await load(row, new AbortController().signal)) ?? null);
+            if (!isRecord(loaded)) {
+                toast.error(`The values of ${label} could not be read.`);
+                return;
+            }
+        }
+        const values = (loaded ?? row);
+        const body = params.transform ? params.transform(values, row, loaded) : values;
+        const confirm = crudRowFormConfirm(params, row, loaded, label);
+        if (confirm && formConfirmAsks(confirm, values) && !(await askFormQuestion(crudRowFormQuestion(params, confirm, values, body))))
+            return;
+        // The API's toasts say it was done, or why not; the record is named in them.
+        const answer = await browserApi.send(params.submit, { body, params: { id, [rowKey]: id }, subject: label });
+        if (answer.ok)
+            request.onSaved(answer.result, values);
+    }
+    catch (error) {
+        // A load, a transform or a rule of the question that throws: said, and nothing sent.
+        toast.error(errorMessage(error));
+    }
+    finally {
+        asking.delete(busy);
+    }
+}
 /** The footer: the form's bar, its Save out of reach while the values could not be read. */
 function CrudRowFormFooter({ form, status, submitLabel, onCancel }) {
     const state = useSyncExternalStore(status.subscribe, status.get, status.get);
@@ -75,7 +133,9 @@ function CrudRowFormBody({ request, form, status, onSaved, }) {
     const { form: params, row, id, rowKey, label } = request;
     const [loaded, setLoaded] = useState(null);
     // The inputs: given, or made from the record and what was read - at once, or when a promise of them lands.
-    const made = useMemo(() => (typeof params.inputs === "function" ? params.inputs(row, loaded) : params.inputs), [params, row, loaded]);
+    const made = useMemo(() => (typeof params.inputs === "function" ? params.inputs(row, loaded) : (params.inputs ?? [])), [params, row, loaded]);
+    // The question before a save, for this record and what was read: the form asks it after its checks.
+    const confirm = useMemo(() => crudRowFormConfirm(params, row, loaded, label) ?? undefined, [params, row, loaded, label]);
     const [later, setLater] = useState(null);
     useEffect(() => {
         if (!isPromise(made))
@@ -110,5 +170,5 @@ function CrudRowFormBody({ request, form, status, onSaved, }) {
             });
         }
         : undefined;
-    return (_jsx(ApiForm, { form: form, inputs: inputs, buttons: false, defaultValue: load ? undefined : row, loadValue: loadValue, api: params.submit, transform: params.transform ? values => params.transform(values, row, loaded) : undefined, "aria-label": `${params.title ?? params.label}: ${label}`, onSuccess: (result, values) => onSaved(result, values) }));
+    return (_jsx(ApiForm, { form: form, inputs: inputs, buttons: false, defaultValue: load ? undefined : row, loadValue: loadValue, api: params.submit, transform: params.transform ? values => params.transform(values, row, loaded) : undefined, confirm: confirm, "aria-label": `${params.title ?? params.label}: ${label}`, onSuccess: (result, values) => onSaved(result, values) }));
 }

package/dist/Components/Forms/CrudTree.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { unwrapApiResult } from "../../Helpers/ApiResponses.js";
 import { getCrudBackend } from "../../Helpers/CrudBackend.js";
-import { actionAllowed, crudJoinedNames, crudJoinsMissing, crudRowActions, crudSavedCount, crudTreeChanges } from "../../Helpers/CrudHelpers.js";
+import { actionAllowed, crudJoinedNames, crudJoinsMissing, crudRowActions, crudSavedCount, crudSavedRecord, crudTreeChanges } from "../../Helpers/CrudHelpers.js";
 import { pluralize } from "../../Helpers/MessageBuilder.js";
 import { getPermissions, permissionsVersion, subscribePermissions } from "../../Helpers/Permissions.js";
-import { columnValue, formatCellText, readPath } from "../../Helpers/TableHelpers.js";
+import { columnValue, formatCellText, namingColumn, readPath } from "../../Helpers/TableHelpers.js";
 import { tableJoins } from "../../Helpers/TableJoins.js";
 import { TREE_DEFAULT_KEYS, writeTreeChanges } from "../../Helpers/TreeStore.js";
 import { api as browserApi } from "../../Services/BrowserApi.js";
@@ -92,7 +92,7 @@ export function CrudTree(props) {
         const custom = latest.current.rowLabel;
         if (custom)
             return custom(row);
-        const first = latest.current.columns[0];
+        const first = namingColumn(latest.current.columns);
         const text = first ? formatCellText(first, columnValue(first, row), {}, row) : "";
         return text || `${capitalize(subject)} ${keyOf(row)}`;
     }
@@ -177,7 +177,7 @@ export function CrudTree(props) {
             rowKey,
             // Says where, in the title bar and on the dock: two Adds minimized inside two rows read apart.
             label: inside ? `Inside ${itemLabel(inside)}` : undefined,
-            onSaved: (result, saved, joined) => void afterSave(null, result, saved, joined),
+            onSaved: (result, sent, joined) => void afterSave(null, result, sent, joined),
         });
     }
     /** Opens a record's Edit form; with `placeKeys` its place stays as it is, fixed, and moves only where it is offered. */
@@ -197,7 +197,7 @@ export function CrudTree(props) {
             rowKey,
             key: keyOf(row),
             label: labelOf(row),
-            onSaved: (result, saved, joined) => void afterSave(row, result, saved, joined),
+            onSaved: (result, sent, joined) => void afterSave(row, result, sent, joined),
         });
     }
     /**
@@ -207,10 +207,10 @@ export function CrudTree(props) {
      * the tree counts it (`crudSavedCount`: a new one has no children, an edited one the count the tree keeps now). An
      * edited record is finished from the row as the tree holds it now, not as the form opened it.
      */
-    async function afterSave(row, result, saved, joined) {
+    async function afterSave(row, result, sent, joined) {
         const action = row ? "edit" : "create";
         const answered = backend.answeredRow(result);
-        let record = { ...row, ...saved, ...answered };
+        let record = crudSavedRecord(row, sent, answered);
         if (!answered && !readPath(record, rowKey)) {
             const given = backend.answeredKey(result);
             if (given !== null && !rowKey.includes("."))

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

@@ -18,8 +18,11 @@ export interface CrudWorkspaceProps<TRow extends FormValues = FormValues> {
     columns: readonly TableColumn<TRow>[];
     /** The currency of a `money` field without its own, as the table writes it. */
     currency?: string | null;
-    /** The built-in details: the fields, with the `aside` beside them, less the fields the profile shows (`fields`). */
-    details: (without: readonly (TableColumn<TRow> | string)[] | undefined) => ReactNode;
+    /**
+     * The built-in details: the fields, with the `aside` beside them, less the fields the profile shows (`fields`), given
+     * the workspace's `refresh` (a section's own Edit reads the record again with it once saved).
+     */
+    details: (without: readonly (TableColumn<TRow> | string)[] | undefined, refresh: () => Promise<TRow | null>) => ReactNode;
     /** Starts reading the record from the details endpoint, once: called when the workspace is first drawn. */
     load?: () => void;
     /**
@@ -38,6 +41,11 @@ export interface CrudWorkspaceProps<TRow extends FormValues = FormValues> {
      * closing, ask "Discard your changes?" while one has changes.
      */
     guard: FormLeaveGuard;
+    /**
+     * Told the chosen tab when the workspace opens and on every switch: the Crud shows the popup's footer (View history,
+     * Edit, Close) only while the built-in Details tab is chosen.
+     */
+    onTab?: (tab: string) => void;
 }
 /**
  * Asks "Discard your changes?" when a form in a place that is about to go away (a `FormLeaveGuard`: a tab of a record's
@@ -48,16 +56,18 @@ export declare function confirmLeaving(guard: FormLeaveGuard): Promise<boolean>;
 /**
  * A record's picture where it is shown large (a workspace's profile, a record page's hero): by its Drive params, a button
  * that opens the pictures window, the record's initials standing in; or what the page draws in its place. `size` is a
- * CSS length. Read-only shows the pictures with no way to change them.
+ * CSS length. Read-only shows the pictures with no way to change them. `round` draws it as a circle whatever the
+ * picture's own shape (a workspace's profile); the pictures window keeps the picture's shape and aspect.
  */
-export declare function ProfilePicture({ picture, title, size, readOnly }: {
+export declare function ProfilePicture({ picture, title, size, readOnly, round }: {
     picture: CrudDetailsProfile["picture"];
     title: ReactNode;
     size: string;
     readOnly?: boolean;
+    round?: boolean;
 }): ReactNode;
 /**
  * The workspace: profile and tabs on the left, the chosen tab on the right. Only the chosen tab is drawn; a switch
  * keeps the focus on the tabs, or puts it on the chosen tab when the panel that held it went away.
  */
-export declare function CrudWorkspace<TRow extends FormValues>({ options, form, current, popup, columns, currency, details, load, read, refresh, subject, guard }: CrudWorkspaceProps<TRow>): import("react").JSX.Element;
+export declare function CrudWorkspace<TRow extends FormValues>({ options, form, current, popup, columns, currency, details, load, read, refresh, subject, guard, onTab }: CrudWorkspaceProps<TRow>): import("react").JSX.Element;

package/dist/Components/Forms/CrudWorkspace.js

@@ -45,15 +45,16 @@ export async function confirmLeaving(guard) {
 /**
  * A record's picture where it is shown large (a workspace's profile, a record page's hero): by its Drive params, a button
  * that opens the pictures window, the record's initials standing in; or what the page draws in its place. `size` is a
- * CSS length. Read-only shows the pictures with no way to change them.
+ * CSS length. Read-only shows the pictures with no way to change them. `round` draws it as a circle whatever the
+ * picture's own shape (a workspace's profile); the pictures window keeps the picture's shape and aspect.
  */
-export function ProfilePicture({ picture, title, size, readOnly = false }) {
+export function ProfilePicture({ picture, title, size, readOnly = false, round = false }) {
     if (!isCrudPicture(picture))
         return picture ?? null;
     const named = typeof title === "string" ? title : undefined;
     const { name, module, category, ownerId, aspect, shape, ...gallery } = picture;
     const owner = { module, category, ownerId };
-    return (_jsx(OwnerPicture, { owner: owner, size: size, aspect: aspect, shape: shape, name: name ?? named ?? null, label: named ? `${named}: pictures` : "Pictures", onClick: () => openPictureGallery({ ...gallery, ...owner, aspect, shape, title: gallery.title ?? named, readOnly: gallery.readOnly || readOnly }) }));
+    return (_jsx(OwnerPicture, { owner: owner, size: size, aspect: round ? 1 : aspect, shape: round ? "circle" : shape, name: name ?? named ?? null, label: named ? `${named}: pictures` : "Pictures", onClick: () => openPictureGallery({ ...gallery, ...owner, aspect, shape, title: gallery.title ?? named, readOnly: gallery.readOnly || readOnly }) }));
 }
 /**
  * A few of the record's fields under the profile's tags (`profile.fields`): label and value, the value drawn as the
@@ -68,19 +69,19 @@ function CrudProfileFields({ fields, row, currency, read }) {
     return (_jsx("dl", { className: "nx-crud-profile__fields", "aria-busy": (awaiting && read === "loading") || undefined, children: fields.map(column => (_jsxs("div", { className: "nx-crud-profile__field", children: [_jsx("dt", { className: "nx-crud-profile__label", children: column.label }), " ", _jsx("dd", { className: "nx-crud-profile__value", children: !isAwaitedCrudField(column, row, read) ? (_jsx(TableCellValue, { column: column, row: row, options: options })) : read === "failed" ? (_jsx("span", { className: "nx-crud-details__missing", children: "Not loaded" })) : (_jsx("span", { className: "nx-table__bone nx-record__bone nx-crud-profile__bone", "aria-hidden": "true" })) })] }, column.key))) }));
 }
 /**
- * The profile at the top of the column: the picture (a button that opens the pictures), the name, a line, tags, and a
- * few of the record's fields.
+ * The profile at the top of the column: the picture in a circle (a button that opens the pictures), the name, a line,
+ * tags, and a few of the record's fields. A profile of a picture and a name alone is those two, in the middle.
  */
 function CrudProfile({ profile, row, columns, currency, read }) {
     const { picture, title, subtitle, tags } = profile;
     const fields = crudProfileFields(profile.fields, columns, row, read);
-    return (_jsxs("div", { className: "nx-crud-profile", children: [picture !== undefined && picture !== null && picture !== false && (_jsx("div", { className: "nx-crud-profile__picture", children: _jsx(ProfilePicture, { picture: picture, title: title, size: "var(--nx-crud-profile-picture)" }) })), _jsxs("div", { className: "nx-crud-profile__text", children: [_jsx("p", { className: "nx-crud-profile__title", children: title }), subtitle !== undefined && subtitle !== null && subtitle !== "" && _jsx("p", { className: "nx-crud-profile__subtitle", children: subtitle }), tags && tags.length > 0 && (_jsx("p", { className: "nx-crud-profile__tags", children: tags.map((tag, index) => (_jsx("span", { className: "nx-table__tag", "data-tone": tag.tone, children: tag.label }, index))) })), fields.length > 0 && _jsx(CrudProfileFields, { fields: fields, row: row, currency: currency, read: read })] })] }));
+    return (_jsxs("div", { className: "nx-crud-profile", children: [picture !== undefined && picture !== null && picture !== false && (_jsx("div", { className: "nx-crud-profile__picture", children: _jsx(ProfilePicture, { picture: picture, title: title, size: "var(--nx-crud-profile-picture)", round: true }) })), _jsxs("div", { className: "nx-crud-profile__text", children: [_jsx("p", { className: "nx-crud-profile__title", children: title }), subtitle !== undefined && subtitle !== null && subtitle !== "" && _jsx("p", { className: "nx-crud-profile__subtitle", children: subtitle }), tags && tags.length > 0 && (_jsx("p", { className: "nx-crud-profile__tags", children: tags.map((tag, index) => (_jsx("span", { className: "nx-table__tag", "data-tone": tag.tone, children: tag.label }, index))) })), fields.length > 0 && _jsx(CrudProfileFields, { fields: fields, row: row, currency: currency, read: read })] })] }));
 }
 /**
  * The workspace: profile and tabs on the left, the chosen tab on the right. Only the chosen tab is drawn; a switch
  * keeps the focus on the tabs, or puts it on the chosen tab when the panel that held it went away.
  */
-export function CrudWorkspace({ options, form, current, popup, columns, currency, details, load, read, refresh, subject, guard }) {
+export function CrudWorkspace({ options, form, current, popup, columns, currency, details, load, read, refresh, subject, guard, onTab }) {
     const id = useId();
     const recordRead = useSyncExternalStore(read?.subscribe ?? subscribeNothing, read?.get ?? readDone, read?.get ?? readDone);
     // The record as it is now: the profile and the tabs' rules follow it.
@@ -92,8 +93,9 @@ export function CrudWorkspace({ options, form, current, popup, columns, currency
     const storage = useMemo(() => crudTabStorageKey(options.remember), [options.remember?.key, options.remember?.viewer]); // eslint-disable-line react-hooks/exhaustive-deps
     const [asked, setAsked] = useState(() => readCrudTab(browserStorage(), storage));
     const chosen = openingCrudTab(offered, asked) ?? CRUD_DETAILS_TAB;
-    // Bumped by each refresh, so the built-in details are drawn again from the record read again.
-    const [version, setVersion] = useState(0);
+    // Bumped by each refresh, so the built-in details are drawn again from the record read again (in place: what has the
+    // focus keeps it).
+    const [, setVersion] = useState(0);
     const rootRef = useRef(null);
     // Set when a switch took the panel that held the focus: the chosen tab takes it once drawn.
     const refocus = useRef(false);
@@ -110,10 +112,16 @@ export function CrudWorkspace({ options, form, current, popup, columns, currency
         }
         const active = document.activeElement;
         const panel = rootRef.current?.querySelector(".nx-crud-workspace__panel");
-        refocus.current = !active || active === document.body || Boolean(panel?.contains(active));
+        // The focus in the panel, or in the popup's footer, which only the Details tab has: the chosen tab takes it.
+        refocus.current = !active || active === document.body || Boolean(panel?.contains(active)) || Boolean(active.closest(".nx-popup__foot"));
         setAsked(tab);
         writeCrudTab(browserStorage(), storage, tab);
     }
+    // Before the paint, so the footer of a tab that does not have one is never drawn.
+    useLayoutEffect(() => {
+        onTab?.(chosen);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [chosen]);
     useLayoutEffect(() => {
         if (!refocus.current)
             return;
@@ -160,7 +168,7 @@ export function CrudWorkspace({ options, form, current, popup, columns, currency
     const row = current();
     let body;
     if (!tab || tab.builtIn)
-        body = _jsx("div", { children: details(profileFields) }, `details:${version}`);
+        body = _jsx("div", { children: details(profileFields, refreshed) });
     else
         body = tab.render?.({ row, form, popup, tab: tab.id, select: next => void select(next), refresh: refreshed });
     const shownProfile = profile !== undefined && profile !== null && profile !== false;

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

@@ -1,6 +1,7 @@
 import { FormStore, type AnyFormStore, type FormStatus } from "../../Helpers/FormStore.ts";
 import type { DatePreferences } from "../../Interfaces/DateInterfaces.ts";
-import { type FormProps, type FormValues, type InputParams } from "../../Interfaces/FormInterfaces.ts";
+import { type FormProps, type FormValues } from "../../Interfaces/FormInterfaces.ts";
+import { formInputLabel } from "../Inputs/ComputedInput.tsx";
 /**
  * A form store for the page to hold: pass it to a form as `form`, then read, watch, set, and submit through it.
  *
@@ -19,7 +20,7 @@ export declare function useFormStatus(form: AnyFormStore): FormStatus;
 /** The form's own store, or the one given. */
 export declare function useFormStore<TValues extends FormValues>(given: FormStore<TValues> | undefined): FormStore<TValues>;
 /** An input's name in the form's messages: its `fieldName`, its label when it is text, or its name. */
-export declare function formInputLabel(params: InputParams | undefined, name?: string): string;
+export { formInputLabel };
 /** The names a list shows: all of them up to one more than `most` ("and 1 more" says less than the name), else the first `most`. */
 export declare function namesToShow<T>(names: readonly T[], most?: number): {
     shown: readonly T[];

package/dist/Components/Forms/Form.js

@@ -4,17 +4,17 @@ import { Fragment } from "react";
 import { iconAlertCircle, iconHistory, iconX, InlineIcon } from "nexus-icons";
 import { memo, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { useInputDesign, useNumberLocale } from "../../Helpers/UserPreferences.js";
+import { useInputDesign } from "../../Helpers/UserPreferences.js";
 import { formatDate, toIsoDate, usesDevanagari } from "../../Helpers/DateHelpers.js";
 import { useDatePreferences } from "../../Helpers/DatePreferences.js";
 import { FormStore } from "../../Helpers/FormStore.js";
-import { computedText, computedValue, withInputConditions } from "../../Helpers/InputConditions.js";
-import { narrowInputParams } from "../../Helpers/InputNarrowing.js";
-import { inputFieldName, isBooleanInput } from "../../Helpers/InputParamsHelpers.js";
+import { withInputConditions } from "../../Helpers/InputConditions.js";
+import { formNarrowingNames, narrowInputParamsBy } from "../../Helpers/InputNarrowing.js";
+import { isBooleanInput, isRowsInput } from "../../Helpers/InputParamsHelpers.js";
 import { formatTime } from "../../Helpers/TimeHelpers.js";
 import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
-import { Field } from "../Inputs/Field.js";
+import { ComputedInput, formInputLabel } from "../Inputs/ComputedInput.js";
 import { isFirstInvalid } from "../Inputs/InputField.js";
 import { renderInput } from "../Inputs/InputRenderer.js";
 import { firstFocusable } from "../Inputs/RowsInput.js";
@@ -27,6 +27,9 @@ import { firstFocusable } from "../Inputs/RowsInput.js";
 /** 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";
+const NO_INPUTS = [];
+const NO_SUBSCRIBE = () => () => { };
+const NO_VERSION = () => 0;
 /** This browser's local storage, or nothing where it cannot be reached (storage switched off). */
 function browserStorage() {
     try {
@@ -72,11 +75,7 @@ export function useFormStore(given) {
 }
 /* Text */
 /** An input's name in the form's messages: its `fieldName`, its label when it is text, or its name. */
-export function formInputLabel(params, name = "") {
-    if (!params)
-        return name;
-    return inputFieldName(params) ?? (typeof params.label === "string" ? params.label : params.name);
-}
+export { formInputLabel };
 /** The names a list shows: all of them up to one more than `most` ("and 1 more" says less than the name), else the first `most`. */
 export function namesToShow(names, most = 3) {
     return names.length <= most + 1 ? { shown: names, more: 0 } : { shown: names.slice(0, most), more: names.length - most };
@@ -165,29 +164,37 @@ function FieldInput({ store, params, stamp, error, context, cell, heldFocus }) {
     // Options another input narrows (`narrowedBy`): read with its value as it is now; the cell draws again when it changes.
     // Copied afresh on every draw, never kept: the copy reads the params' getters, and one that `dependsOn` follows
     // (readOnly, hint, label, options; span is read by the cell) must answer for the values of this draw. The box keeps its loaded pages by `loadKey`.
-    const narrowing = params.narrowedBy;
-    const other = narrowing?.name;
-    const shown = narrowing ? narrowInputParams(params, other === undefined ? undefined : store.get(other), other === undefined ? undefined : store.inputParams(other)?.label) : params;
+    const shown = params.narrowedBy ? narrowInputParamsBy(params, narrowing => ({ value: store.get(narrowing.name), label: store.inputParams(narrowing.name)?.label })) : params;
+    // Rows whose inputs follow this form's values (`narrowedBy` `from: "form"`): handed them as they are now; the rows input
+    // draws again when one changes (it follows them as `dependsOn` would).
+    const rowInputs = isRowsInput(params) ? (params.inputs ?? []) : NO_INPUTS;
+    if (rowInputs.length) {
+        const names = formNarrowingNames(rowInputs);
+        if (names.length)
+            overrides.formValues = Object.fromEntries(names.map(name => [name, { value: store.get(name), label: store.inputParams(name)?.label }]));
+    }
+    // Rows with inputs worked out from others (`compute`) get the form's `computeWith`, unless their params name their own;
+    // the rows input draws again when the page passes a new one.
+    const handsCompute = rowInputs.some(input => input.compute) && !("computeWith" in params);
+    const source = context.computeWith;
+    useSyncExternalStore(handsCompute ? source.subscribe : NO_SUBSCRIBE, handsCompute ? source.getVersion : NO_VERSION, handsCompute ? source.getVersion : NO_VERSION);
+    if (handsCompute)
+        overrides.computeWith = source.value;
     return renderInput(shown, overrides);
 }
 /**
- * An input worked out from others (`compute`): the field's frame (label, hint, prefix, suffix, size, design) around an
- * `<output>` that says the value as it is now, in the person's number format, on the read-only tint - never typed in, so
- * no lock, no note, no steppers and no Tab stop. Blank while the values load, and for a value that is no figure.
+ * An input worked out from others (`compute`) in a form: `ComputedInput` reading the form's values and its `computeWith`
+ * (it alone draws again when the page passes a new one), and writing a typed-in figure's answer as the person's change.
  */
 function ComputedField({ store, params, context }) {
     const source = context.computeWith;
     useSyncExternalStore(source.subscribe, source.getVersion, source.getVersion);
-    const locale = useNumberLocale();
-    const own = params;
-    const design = useInputDesign(own.design ?? context.design);
-    const controlId = `${context.idPrefix}-${params.name}`;
-    const messageId = `${controlId}-message`;
-    const text = context.loading ? "" : computedText(params, computedValue(params, store.getValue(), source.value), locale);
-    const disabled = context.disabled || Boolean(own.disabled);
-    // The inputs it is worked out from, as an output names them.
-    const from = params.compute?.from.map(name => `${context.idPrefix}-${name}`).join(" ");
-    return (_jsx(Field, { controlId: controlId, messageId: messageId, label: params.label, hint: own.hint, design: design, size: own.size ?? context.size, icon: own.icon, iconEnd: own.iconEnd, prefix: own.prefix, suffix: own.suffix, readOnly: true, disabled: disabled, raiseLabel: true, className: own.className, children: _jsx("output", { id: controlId, htmlFor: from || undefined, className: cx("nx-field__control", "nx-field__control--output", params.type === EInputTypes.Number && "nx-field__control--number"), "aria-live": "polite", "aria-describedby": own.hint ? messageId : undefined, "aria-disabled": disabled || undefined, children: _jsx("span", { className: "nx-field__output-text", children: text }) }) }));
+    const { idPrefix } = context;
+    const read = useCallback(() => store.getValue(), [store]);
+    const write = useCallback((values) => void store.setFromPerson(values), [store]);
+    const inputParams = useCallback((name) => store.inputParams(name), [store]);
+    const sourceId = useCallback((name) => `${idPrefix}-${name}`, [idPrefix]);
+    return (_jsx(ComputedInput, { params: params, id: `${idPrefix}-${params.name}`, read: read, withValue: source.value, write: write, inputParams: inputParams, sourceId: sourceId, size: context.size, design: context.design, loading: context.loading, readOnly: context.readOnly, disabled: context.disabled }));
 }
 /** The control an input mounted again takes the focus back in: its box, a list's combobox, a choice, an editor. */
 const REFOCUSABLE = '[role="combobox"]:not([disabled]), input:not([type="hidden"]):not([disabled]):not([tabindex="-1"]), textarea:not([disabled]), select:not([disabled]), [contenteditable="true"], button:not([disabled]):not([tabindex="-1"])';

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

@@ -0,0 +1,6 @@
+import type { FormConfirmQuestion } from "../../Helpers/FormConfirm.ts";
+/**
+ * Asks a settled question (`formConfirmQuestion`): a question box with what will be saved drawn as a record's details,
+ * Confirm holding the focus, a press outside it changing nothing. Resolves whether to go on; an abort answers no.
+ */
+export declare function askFormQuestion(question: FormConfirmQuestion, signal?: AbortSignal): Promise<boolean>;

package/dist/Components/Forms/FormQuestion.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { messageBox } from "../Layouts/MessageBox.js";
+import { CrudDetails } from "./CrudParts.js";
+/*
+ * The question asked before a save, drawn once for every place that asks it: a form's `confirm` (SubmitForm) and a row
+ * form's, including a row action that is its question alone (CrudRowForms.tsx). Not exported from the package: a page
+ * asks through those params.
+ */
+/**
+ * Asks a settled question (`formConfirmQuestion`): a question box with what will be saved drawn as a record's details,
+ * Confirm holding the focus, a press outside it changing nothing. Resolves whether to go on; an abort answers no.
+ */
+export function askFormQuestion(question, signal) {
+    const details = question.details;
+    return messageBox.confirm({
+        tone: "question",
+        closable: true,
+        closeOnBackdrop: false,
+        signal,
+        size: question.size,
+        title: question.title,
+        message: question.message,
+        details: details ? _jsx(CrudDetails, { row: details.row, columns: details.columns, currency: details.currency }) : null,
+        confirmLabel: question.confirmLabel,
+        cancelLabel: question.cancelLabel,
+    });
+}