nexus-shared 4.0.0 → 4.1.0

package/dist/Components/Domains/DomainCard.js

@@ -0,0 +1,182 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { iconArrowRight, iconChevronDown, iconChevronUp, iconLoader2, iconLock, InlineIcon } from "nexus-icons";
+import { useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { chatDomainLabel } from "../../Helpers/ChatBackend.js";
+import { chatTimeLabel } from "../../Helpers/ChatHelpers.js";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
+import { domainCardContext, domainCardFailedText, domainCardFields, domainCardNoun, domainCardOf, domainCardRefusedText, domainCardShape, domainCardValueText, DomainCardRun, heldDomainCardShape, rememberDomainCardShape, } from "../../Helpers/DomainCards.js";
+import { useNumberLocale } from "../../Helpers/UserPreferences.js";
+import { ChatFailure } from "../Chats/ChatParts.js";
+import { Button } from "../Documents/Button.js";
+/** A record's card, read live from its module: see the notes at the top of this file. */
+export function DomainCard({ card: given, kind: givenKind, ...props }) {
+    const registered = domainCardOf(props.domain);
+    const card = given === undefined ? registered?.card : (given ?? undefined);
+    const kind = givenKind ?? registered?.info.label ?? chatDomainLabel(props.domain);
+    const { id } = props;
+    if (!card || id === null || id === undefined || id === "")
+        return _jsx(DomainLine, { kind: kind, label: props.label, className: props.className });
+    // A record of its own is a read of its own: another id starts from its placeholder, never from the last record.
+    return _jsx(LiveDomainCard, { ...props, id: id, card: card, kind: kind }, `${String(props.domain)}|${String(id)}|${String(props.viewer ?? "")}`);
+}
+/** One record's card read, for a page that draws it its own way: the snapshot, and `run.reload()` / `run.retry()`. */
+export function useDomainCard({ domain, id, card, viewer, label, kind, revision }) {
+    const context = useMemo(() => domainCardContext(domain, id, { ...(viewer !== null && viewer !== undefined && { viewer }), label, kind }), [domain, id, viewer, label, kind]);
+    const latest = useRef({ card, context });
+    latest.current = { card, context };
+    const run = useMemo(() => new DomainCardRun({ domainType: domain, id, viewer, lifetime: card.lifetime, load: signal => latest.current.card.load(id, signal, latest.current.context) }), 
+    // A new card definition for the same record keeps the run: `load` is read when it is called.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [domain, id, viewer]);
+    useEffect(() => {
+        run.start();
+        return () => run.stop();
+    }, [run]);
+    const snapshot = useSyncExternalStore(run.subscribe, run.getSnapshot, run.getSnapshot);
+    // A change seen after the card was drawn reads the record again; the revision it opened with does not.
+    const seen = useRef(revision);
+    useEffect(() => {
+        if (revision === seen.current)
+            return;
+        seen.current = revision;
+        run.reload();
+    }, [revision, run]);
+    const shown = useMemo(() => {
+        if (snapshot.data === undefined)
+            return {};
+        try {
+            return { params: card.view(snapshot.data, context) };
+        }
+        catch (error) {
+            console.error("A record's card could not be drawn from its answer:", error);
+            return { viewError: error };
+        }
+    }, [snapshot.data, card, context]);
+    useEffect(() => {
+        if (shown.params)
+            rememberDomainCardShape(domain, domainCardShape(shown.params));
+    }, [domain, shown.params]);
+    return { run, snapshot, context, ...shown };
+}
+function LiveDomainCard({ domain, id, label, revision, viewer, card, kind, headingLevel = 3, collapsible = true, defaultCollapsed = false, collapsed: heldCollapsed, onCollapsedChange, className, ref }) {
+    const state = useDomainCard({ domain, id, card, viewer, label, kind, revision });
+    const { run, snapshot, params, viewError, context } = state;
+    const [ownCollapsed, setOwnCollapsed] = useState(defaultCollapsed);
+    const collapsed = heldCollapsed ?? ownCollapsed;
+    const setCollapsed = (next) => {
+        setOwnCollapsed(next);
+        onCollapsedChange?.(next);
+    };
+    useImperativeHandle(ref, () => ({ reload: () => run.reload() }), [run]);
+    // Said aloud once, when a read again changes what is on screen or fails.
+    const [spoken, setSpoken] = useState("");
+    const noun = domainCardNoun(kind);
+    useEffect(() => {
+        if (snapshot.changedAt)
+            setSpoken(`The ${noun} was updated.`);
+    }, [snapshot.changedAt, noun]);
+    useEffect(() => {
+        if (snapshot.refreshFailed)
+            setSpoken(`The ${noun} could not be read again.`);
+    }, [snapshot.refreshFailed, noun]);
+    const live = (_jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: spoken }));
+    if (snapshot.status === "refused") {
+        return (_jsxs("section", { className: cx("nx-domain-card", className), "data-state": "refused", "aria-label": kind ?? label ?? undefined, "aria-busy": snapshot.refreshing || undefined, children: [_jsx(DomainLine, { kind: kind, label: label }), _jsxs("p", { className: "nx-domain-card__notice", children: [_jsx(InlineIcon, { icon: iconLock }), domainCardRefusedText(kind)] }), live] }));
+    }
+    if (snapshot.status === "failed" || (viewError !== undefined && !params)) {
+        return (_jsxs("section", { className: cx("nx-domain-card", className), "data-state": "failed", "aria-label": kind ?? label ?? undefined, children: [_jsx(DomainLine, { kind: kind, label: label }), _jsx(ChatFailure, { message: domainCardFailedText(kind), onRetry: () => run.retry() }), live] }));
+    }
+    if (snapshot.status === "loading" || !params) {
+        return (_jsxs(_Fragment, { children: [_jsx(DomainCardHeld, { shape: heldDomainCardShape(domain, card), kind: kind, label: label, headingLevel: headingLevel, collapsible: collapsible, collapsed: collapsed, onCollapsedChange: setCollapsed, className: className }), live] }));
+    }
+    const status = snapshot.refreshing ? (_jsx("span", { className: "nx-domain-card__meta", title: "Reading again", children: _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }) })) : snapshot.refreshFailed ? (_jsxs("span", { className: "nx-domain-card__meta nx-domain-card__meta--failed", children: ["Not up to date", _jsx("button", { type: "button", className: "nx-domain-card__retry", onClick: () => run.retry(), children: "Try again" })] })) : snapshot.changedAt ? (_jsx(DomainCardUpdated, { at: snapshot.changedAt })) : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(DomainCardFrame, { params: params, kind: kind, headingLevel: headingLevel, status: status, busy: snapshot.refreshing, collapsible: collapsible, collapsed: collapsed, onCollapsedChange: setCollapsed, className: className, "data-state": "ready", children: card.extra && snapshot.data !== undefined ? card.extra(snapshot.data, context) : null }), live] }));
+}
+/** "Updated 2:45 PM": the record changed while its card was open. */
+function DomainCardUpdated({ at }) {
+    const preferences = useDatePreferences();
+    const zone = useBrowserTimeZone();
+    const moment = new Date(at).toISOString();
+    return (_jsxs("span", { className: "nx-domain-card__meta", children: ["Updated ", _jsx("time", { dateTime: moment, children: chatTimeLabel(moment, { ...preferences, ...(zone && { timeZone: zone }) }) })] }));
+}
+/**
+ * A card drawn from params alone: the look every record's card shares. `DomainCard` draws it once a record is read; a
+ * page that already holds a record (a dashboard, a print preview) can draw it straight.
+ */
+export function DomainCardFrame({ params, kind, headingLevel = 3, status, busy = false, collapsible = false, collapsed: heldCollapsed, defaultCollapsed = false, onCollapsedChange, children, className, "data-state": dataState, }) {
+    const [ownCollapsed, setOwnCollapsed] = useState(defaultCollapsed);
+    const collapsed = collapsible && (heldCollapsed ?? ownCollapsed);
+    const titleId = useId();
+    const detailsId = useId();
+    const preferences = useDatePreferences();
+    const zone = useBrowserTimeZone();
+    const locale = useNumberLocale();
+    const values = { preferences, timeZone: zone, locale, currency: params.currency };
+    const Heading = `h${headingLevel}`;
+    const fields = domainCardFields(params);
+    const figures = params.figures ?? [];
+    const lines = params.lines && params.lines.rows.length > 0 ? params.lines : null;
+    const extra = children === undefined || children === null || children === false ? null : children;
+    // Only what can fold has a fold button: the fields, the lines and what a kind adds; the figures always show.
+    const foldable = collapsible && (fields.length > 0 || lines !== null || extra !== null);
+    const toggle = () => {
+        const next = !collapsed;
+        setOwnCollapsed(next);
+        onCollapsedChange?.(next);
+    };
+    return (_jsxs("section", { className: cx("nx-domain-card", className), "aria-labelledby": titleId, "aria-busy": busy || undefined, "data-state": dataState, children: [_jsxs("div", { className: "nx-domain-card__head", children: [_jsxs(Heading, { className: "nx-domain-card__title", id: titleId, children: [kind && _jsx("span", { className: "nx-table__tag nx-table__tag--plain nx-domain-card__kind", children: kind }), kind && " ", _jsx("span", { children: params.title })] }), _jsxs("div", { className: "nx-domain-card__status", children: [status, params.state && (_jsx("span", { className: "nx-table__tag nx-domain-card__state", "data-tone": params.state.tone && params.state.tone !== "neutral" ? params.state.tone : undefined, children: params.state.label })), foldable && (_jsx(Button, { variant: "ghost", size: "sm", className: "nx-domain-card__toggle", icon: _jsx(InlineIcon, { icon: collapsed ? iconChevronDown : iconChevronUp }), "aria-expanded": !collapsed, "aria-controls": detailsId, "aria-label": `${collapsed ? "Show" : "Hide"} the details: ${params.title}`, title: collapsed ? "Show the details" : "Hide the details", onClick: toggle }))] }), (params.code || params.subtitle || params.link) && (_jsxs("div", { className: "nx-domain-card__subtitle", children: [_jsxs("span", { title: [params.code, params.subtitle].filter(Boolean).join(" · ") || undefined, children: [params.code && _jsx("span", { className: "nx-domain-card__code", children: params.code }), params.code && params.subtitle && " · ", params.subtitle] }), params.link && (_jsxs("a", { className: "nx-domain-card__link", href: params.link.href, target: params.link.target, rel: params.link.target === "_blank" ? "noopener" : undefined, children: [params.link.label, _jsx(InlineIcon, { icon: iconArrowRight })] }))] }))] }), _jsxs("div", { className: "nx-domain-card__body", hidden: collapsed && figures.length === 0, children: [figures.length > 0 && (_jsx("dl", { className: "nx-domain-card__figures", children: figures.map((figure, index) => (_jsxs("div", { className: "nx-domain-card__figure", "data-tone": figure.tone && figure.tone !== "neutral" ? figure.tone : undefined, children: [_jsx("dt", { children: figure.label }), _jsx("dd", { children: _jsx(DomainFigureValue, { figure: figure, values: values }) }), figure.hint && _jsx("dd", { className: "nx-domain-card__hint", children: figure.hint })] }, `${figure.label}-${index}`))) })), _jsxs("div", { className: "nx-domain-card__details", id: detailsId, hidden: collapsed || (fields.length === 0 && lines === null && extra === null), children: [fields.length > 0 && (_jsx("dl", { className: "nx-domain-card__fields", children: fields.map((field, index) => {
+                                    const text = domainCardValueText(field.value, field.kind, { ...values, currency: field.currency ?? values.currency });
+                                    return (_jsxs("div", { className: "nx-domain-card__field", "data-kind": field.kind ?? "text", "data-empty": text ? undefined : "", children: [_jsx("dt", { children: field.label }), _jsxs("dd", { children: [text || field.empty, field.note && _jsxs("span", { className: "nx-domain-card__note", children: [" \u00B7 ", field.note] })] })] }, `${field.label}-${index}`));
+                                }) })), lines && (_jsxs(_Fragment, { children: [_jsxs("table", { className: "nx-domain-card__lines", children: [_jsx("caption", { className: "nx-visually-hidden", children: lines.label ?? "Lines" }), _jsx("thead", { children: _jsx("tr", { children: lines.columns.map((column, index) => (_jsx("th", { scope: "col", "data-align": alignOf(column.kind, column.align), children: column.label }, `${column.label}-${index}`))) }) }), _jsx("tbody", { children: lines.rows.map((row, rowIndex) => (_jsx("tr", { children: lines.columns.map((column, index) => {
+                                                        const text = domainCardValueText(row[index], column.kind, values);
+                                                        // The first column keeps to one line, cut with "..." on a narrow card: its whole words on hover.
+                                                        return (_jsx("td", { "data-align": alignOf(column.kind, column.align), title: index === 0 && text ? text : undefined, children: text }, index));
+                                                    }) }, rowIndex))) })] }), (lines.more ?? 0) > 0 && _jsxs("p", { className: "nx-domain-card__more", children: ["and ", lines.more, " more"] })] })), extra] })] })] }));
+}
+const alignOf = (kind, align) => align ?? (kind === "number" || kind === "money" || kind === "days" ? "end" : "start");
+/** A figure's parts: the words before it (money's currency), the figure, the words after it (days, a unit). */
+function figureParts(figure, values) {
+    const { value } = figure;
+    if (value === null || value === undefined || value === "" || (typeof value === "number" && !Number.isFinite(value)))
+        return { shown: "-" };
+    if (figure.kind === "money") {
+        const currency = (figure.currency ?? values.currency ?? "").trim();
+        return { before: currency || undefined, shown: domainCardValueText(value, "money", { ...values, currency: null }) };
+    }
+    if (figure.kind === "days") {
+        // "14 days": the same helper as every other days value, its number large and its word small.
+        const text = domainCardValueText(value, "days", values);
+        const space = text.lastIndexOf(" ");
+        return space > 0 ? { shown: text.slice(0, space), after: text.slice(space + 1) } : { shown: text };
+    }
+    return { shown: typeof value === "string" ? value : domainCardValueText(value, "number", values), after: figure.unit };
+}
+/** A figure's value: large, its unit smaller beside it, a real space between them for a screen reader. */
+function DomainFigureValue({ figure, values }) {
+    const { before, shown, after } = figureParts(figure, values);
+    return (_jsxs(_Fragment, { children: [before && _jsx("span", { className: "nx-domain-card__unit", children: before }), before && " ", _jsx("span", { className: "nx-domain-card__value", children: shown }), after && " ", after && _jsx("span", { className: "nx-domain-card__unit", children: after })] }));
+}
+/** A bone on the line of the text it stands for. */
+const Bone = ({ width }) => _jsx("span", { className: "nx-table__bone nx-domain-card__bone", style: { width } });
+/**
+ * The card while it loads: the frame's own parts, each holding its line with a bone, in the shape of the kind's last
+ * card - so when the record lands the thread under it does not move. The record's words name it for a screen reader.
+ */
+function DomainCardHeld({ shape, kind, label, headingLevel, collapsible, collapsed, onCollapsedChange, className }) {
+    const titleId = useId();
+    const detailsId = useId();
+    const Heading = `h${headingLevel}`;
+    const details = shape.fields > 0 || shape.lines > 0;
+    const foldable = collapsible && details;
+    const folded = foldable && collapsed;
+    const columns = Math.max(shape.columns, 1);
+    return (_jsxs("section", { className: cx("nx-domain-card", className), "aria-labelledby": titleId, "aria-busy": "true", "data-state": "loading", children: [_jsxs("div", { className: "nx-domain-card__head", children: [_jsxs(Heading, { className: "nx-domain-card__title", id: titleId, children: [kind && _jsx("span", { className: "nx-table__tag nx-table__tag--plain nx-domain-card__kind", children: kind }), kind && " ", _jsxs("span", { children: [_jsx(Bone, { width: "8rem" }), _jsx("span", { className: "nx-visually-hidden", children: label ? `${label}, loading` : "Loading" })] })] }), _jsxs("div", { className: "nx-domain-card__status", children: [shape.state && _jsx("span", { className: "nx-table__tag nx-table__tag--plain nx-domain-card__bone-tag", "aria-hidden": "true" }), foldable && (_jsx(Button, { variant: "ghost", size: "sm", className: "nx-domain-card__toggle", icon: _jsx(InlineIcon, { icon: folded ? iconChevronDown : iconChevronUp }), "aria-expanded": !folded, "aria-controls": detailsId, "aria-label": `${folded ? "Show" : "Hide"} the details`, title: folded ? "Show the details" : "Hide the details", onClick: () => onCollapsedChange(!folded) }))] }), shape.subtitle && (_jsxs("div", { className: "nx-domain-card__subtitle", "aria-hidden": "true", children: [_jsx("span", { children: _jsx(Bone, { width: "10rem" }) }), shape.link && (_jsx("span", { className: "nx-domain-card__link", children: _jsx(Bone, { width: "7rem" }) }))] }))] }), _jsxs("div", { className: "nx-domain-card__body", hidden: folded && shape.figures === 0, "aria-hidden": "true", children: [shape.figures > 0 && (_jsx("dl", { className: "nx-domain-card__figures", children: Array.from({ length: shape.figures }, (_, index) => (_jsxs("div", { className: "nx-domain-card__figure", children: [_jsx("dt", { children: _jsx(Bone, { width: "3.5rem" }) }), _jsx("dd", { children: _jsx("span", { className: "nx-domain-card__value", children: _jsx(Bone, { width: "2.5rem" }) }) }), shape.hints.includes(index) && (_jsx("dd", { className: "nx-domain-card__hint", children: _jsx(Bone, { width: "5rem" }) }))] }, index))) })), _jsxs("div", { className: "nx-domain-card__details", id: detailsId, hidden: folded || !details, children: [shape.fields > 0 && (_jsx("dl", { className: "nx-domain-card__fields", children: Array.from({ length: shape.fields }, (_, index) => (_jsxs("div", { className: "nx-domain-card__field", children: [_jsx("dt", { children: _jsx(Bone, { width: "3.5rem" }) }), _jsx("dd", { children: _jsx(Bone, { width: "6rem" }) })] }, index))) })), shape.lines > 0 && (_jsxs(_Fragment, { children: [_jsxs("table", { className: "nx-domain-card__lines", children: [_jsx("thead", { children: _jsx("tr", { children: Array.from({ length: columns }, (_, index) => (_jsx("th", { children: _jsx(Bone, { width: "3rem" }) }, index))) }) }), _jsx("tbody", { children: Array.from({ length: shape.lines }, (_, row) => (_jsx("tr", { children: Array.from({ length: columns }, (_, index) => (_jsx("td", { children: _jsx(Bone, { width: index === 0 ? "7rem" : "2.5rem" }) }, index))) }, row))) })] }), shape.more && (_jsx("p", { className: "nx-domain-card__more", children: _jsx(Bone, { width: "5rem" }) }))] }))] })] })] }));
+}
+/** A record named by its kind and its words, with nothing read: a message about a kind with no card. */
+export function DomainLine({ kind, label, className }) {
+    if (!kind && !label)
+        return null;
+    return (_jsxs("p", { className: cx("nx-domain-line", className), children: [kind && _jsx("span", { className: "nx-table__tag nx-table__tag--plain", children: kind }), kind && label && " ", label && _jsx("span", { className: "nx-domain-line__label", children: label })] }));
+}

package/dist/Components/Forms/ApiForm.js

@@ -39,6 +39,8 @@ export function ApiForm(props) {
     const latest = useRef(props);
     latest.current = props;
     const answerRef = useRef(null);
+    // What the save that answered sent: the values and the body made of them, for `onSuccess`.
+    const sentRef = useRef(null);
     // The body the question before a save showed (`confirm`), and the submit it is for.
     const keptRef = useRef(null);
     const [load, setLoad] = useState(() => (loadValue ? { state: "loading" } : { state: "done" }));
@@ -76,6 +78,7 @@ export function ApiForm(props) {
         // No `readResponse` means the client's own reader: the app's (`configureApi({ read })`), else the built-in one.
         const { api, transform, readResponse } = latest.current;
         answerRef.current = null;
+        sentRef.current = null;
         const kept = keptRef.current;
         keptRef.current = null;
         const body = kept && kept.context === context ? kept.body : transform ? await transform(values, context) : values;
@@ -91,6 +94,7 @@ export function ApiForm(props) {
         }
         if (answer.ok) {
             answerRef.current = answer;
+            sentRef.current = { values, body };
             return { ok: true };
         }
         latest.current.onError?.(answer, values);
@@ -106,7 +110,7 @@ export function ApiForm(props) {
         const endpoint = isApiEndpoint(api) ? api : undefined;
         if (successMessage !== false)
             toast.success(successMessage ?? answer?.message ?? messages.success(endpoint?.action ?? "save", endpoint?.subject));
-        onSuccess?.(answer?.result, values, store);
+        onSuccess?.(answer?.result, values, store, sentRef.current ?? { values, body: values });
     }
     if (load.state === "failed") {
         return (_jsxs("div", { className: cx("nx-form-load-failed", rest.className), style: rest.style, role: "alert", children: [_jsx(InlineIcon, { icon: iconAlertCircle }), _jsxs("p", { children: [_jsx("strong", { children: "Could not load the values." }), " ", load.message] }), _jsxs("div", { className: "nx-form-load-failed__actions", children: [rest.onCancel && (_jsx(Button, { size: "sm", onClick: rest.onCancel, children: rest.cancelLabel ?? "Cancel" })), _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh }), onClick: () => setAttempt(count => count + 1), children: "Retry" })] })] }));

package/dist/Components/Forms/Crud.js

@@ -6,19 +6,19 @@ import { abortError } from "../../Helpers/ApiFormHelpers.js";
 import { useSlowBusy } from "../../Helpers/BusyHooks.js";
 import { isAbortError, unwrapApiResult } from "../../Helpers/ApiResponses.js";
 import { getCrudBackend } from "../../Helpers/CrudBackend.js";
-import { actionAllowed, availableModes, CRUD_CACHE_LIFETIME, CRUD_MARK_BITS, CRUD_MARKS, CRUD_MODES, CRUD_ROW_ACTIONS, CrudCache, crudCacheMode, crudInNarrowing, crudJoinedNames, crudJoinsMissing, crudNarrowing, crudParentCounts, crudSavedCount, crudTreeChanges, crudListEndpoint, crudMassActions, crudMassEndpoint, crudMessageAction, crudRowActions, crudRowEndpoint, dropMarkedRows, hasMark, leavesList, markDirections, markedRecords, markLimit, massActionAllowed, patchCachedList, patchMarkedRecords, pinRoom, withMark, } from "../../Helpers/CrudHelpers.js";
+import { actionAllowed, availableModes, CRUD_CACHE_LIFETIME, CRUD_MARK_BITS, CRUD_MARKS, CRUD_MODES, CRUD_ROW_ACTIONS, CrudCache, crudCacheMode, crudInNarrowing, crudJoinedNames, crudJoinsMissing, crudNarrowing, crudParentCounts, crudSavedCount, crudSavedRecord, crudTreeChanges, crudListEndpoint, crudMassActions, crudMassEndpoint, crudMessageAction, crudRowActions, crudRowEndpoint, dropMarkedRows, hasMark, leavesList, markDirections, markedRecords, markLimit, massActionAllowed, patchCachedList, patchMarkedRecords, pinRoom, withMark, } from "../../Helpers/CrudHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { FormStore } from "../../Helpers/FormStore.js";
 import { buildMessage, pluralize } from "../../Helpers/MessageBuilder.js";
 import { getPermissions, permissionsVersion, subscribePermissions } from "../../Helpers/Permissions.js";
 import { filterRequest } from "../../Helpers/TableFilters.js";
-import { columnValue, formatCellText, readPath } from "../../Helpers/TableHelpers.js";
+import { columnValue, formatCellText, namingColumn, readPath } from "../../Helpers/TableHelpers.js";
 import { narrowPickWords } from "../../Helpers/CrudNarrowPick.js";
 import { useCrudNarrowPicker } from "./CrudNarrowPicker.js";
 import { CrudScopeControl, useCrudScopes } from "./CrudScopes.js";
 import { openCrudRowForm } from "./CrudRowForms.js";
 import { crudRowFormOffered, crudRowFormWrites } from "../../Helpers/CrudRowForms.js";
-import { crudDetailsWithoutProfile } from "../../Helpers/CrudDetailsTabs.js";
+import { CRUD_DETAILS_TAB, crudDetailsWithoutProfile } from "../../Helpers/CrudDetailsTabs.js";
 import { crudScopeProps, crudScopeStateKey } from "../../Helpers/CrudScopes.js";
 import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { api as browserApi } from "../../Services/BrowserApi.js";
@@ -243,7 +243,7 @@ export function Crud(given) {
         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), { currency: tableOptions?.currency }, row) : "";
         return text || `${capitalize(subject)} ${table.keyOf(row)}`;
     }, [subject, table]);
@@ -785,8 +785,9 @@ export function Crud(given) {
     /**
      * Opens Add or Edit. `opened`: the scope the form belongs to and its props - a details popup's, captured when it opened,
      * so an Edit pressed in it after a switch is that scope's form on that scope's endpoints; default the scope shown.
+     * `after`: called once the save is written (a workspace section's Edit reads the record again).
      */
-    async function openForm(action, row, values, opened) {
+    async function openForm(action, row, values, opened, after) {
         // A locked record is shown, not edited: its details say what it is, and the page's columns can say why.
         if (action === "edit" && row && actionLockOf(row, "edit")) {
             openDetails(row);
@@ -824,7 +825,10 @@ export function Crud(given) {
             name: action === "create" && asked ? `${name}@${asked}` : name,
             rowKey,
             key: row ? table.keyOf(row) : "",
-            onSaved: (result, saved, joined) => run.current.onSaved(action, row, result, saved, joined, asked),
+            onSaved: (result, sent, joined) => {
+                run.current.onSaved(action, row, result, sent, joined, asked);
+                after?.();
+            },
         });
     }
     /**
@@ -866,10 +870,10 @@ export function Crud(given) {
             next = crudSavedCount(next, held, tree);
         return next;
     }
-    function onSaved(action, row, result, values, joined, asked = scopeIdRef.current) {
+    function onSaved(action, row, result, sent, joined, asked = scopeIdRef.current) {
         // The record as the server now has it: what was sent, over the row it came from, with whatever the answer added.
         const answered = backend.answeredRow(result);
-        let record = { ...row, ...values, ...answered };
+        let record = crudSavedRecord(row, sent, answered);
         // A new record whose answer is only its key still gets it, so its row goes in.
         if (action === "create" && !answered && !readPath(record, rowKey)) {
             const given = backend.answeredKey(result);
@@ -959,8 +963,34 @@ export function Crud(given) {
             });
             return loading;
         };
+        // A section's own Edit in a workspace's Details tab (`details.sections`): the Crud's Edit form or one of its row forms,
+        // offered by the rules the row's menu uses, the record read again once saved. Nothing where the form is not offered.
+        const sectionEdit = (reread) => (group) => {
+            const section = details?.sections?.find(one => one.group === group);
+            if (!section?.edit)
+                return null;
+            const record = table.getRow(key) ?? shown.getValue();
+            const mode = modeRef.current;
+            if (mode === undefined || section.hidden?.(record))
+                return null;
+            const again = () => void reread();
+            let open = null;
+            if (section.edit === "edit") {
+                if (allowed.edit && CRUD_ROW_ACTIONS[mode].includes("edit") && !actionLockOf(record, "edit"))
+                    open = () => void openForm("edit", table.getRow(key) ?? shown.getValue(), undefined, opened, again);
+            }
+            else {
+                const form = latest.current.rowForms?.find(one => one.id === section.edit);
+                if (form && crudRowFormOffered(form, record, mode, can) && !form.lock?.(record))
+                    open = () => openRowForm(form, table.getRow(key) ?? shown.getValue(), again);
+            }
+            if (!open)
+                return null;
+            const word = section.label ?? "Edit";
+            return (_jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconPencil }), "aria-label": `${word} ${group}`, "data-action": "section-edit", onClick: open, children: word }));
+        };
         // A workspace's Details tab leaves out the fields its profile shows (`profile.fields`).
-        const fields = (record, load, without) => (_jsx(CrudFormBody, { aside: aside, details: true, below: (details?.asidePlace ?? (workspace ? "below" : "beside")) === "below", children: _jsx(CrudDetails, { row: record, columns: crudDetailsWithoutProfile(details?.columns ?? latest.current.columns, without), render: details?.render, currency: tableOptions?.currency, load: load }) }));
+        const fields = (record, load, without, reread) => (_jsx(CrudFormBody, { aside: aside, details: true, below: (details?.asidePlace ?? (workspace ? "below" : "beside")) === "below", children: _jsx(CrudDetails, { row: record, columns: crudDetailsWithoutProfile(details?.columns ?? latest.current.columns, without), render: details?.render, currency: tableOptions?.currency, load: load, headingEnd: reread && details?.sections?.length ? sectionEdit(reread) : undefined }) }));
         // The workspace reads the record once for the whole popup - the profile, every tab and the fields share it - and
         // again on each `refresh()`. Closing the popup stops the first read, never a refresh's: a tab saved something on
         // the server, and the lists must hear of it even when the popup closed before the record came back.
@@ -985,6 +1015,27 @@ export function Crud(given) {
                 writeTreeChanges(tree.cacheKey, crudTreeChanges({ action: "edit", rows: [next], mode: modeRef.current ?? "normal", before: [held] }, tree, backend), tree.rules);
             return next;
         };
+        // The popup's footer: the load's line, the page's actions, View history, Edit and Close. In a workspace it is the
+        // Details tab's alone (`onTab`): another tab has its own footer (`CrudTabFooter`) and the title bar's X still closes.
+        const footer = (popup) => (_jsxs(DetailsFooter, { load: status, children: [details?.actions
+                    ?.filter(action => (!action.endpoint || (ready && can(action.endpoint))) && !action.hidden?.(row))
+                    .map(action => (_jsx(Button, { icon: action.icon, "data-action": action.id, onClick: () => action.onSelect(table.getRow(key) ?? row, popup), children: action.label }, action.id))), allowed.history && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconHistory }), "data-action": "history", onClick: () => openHistory(table.getRow(key) ?? row), children: "View history" })), canEdit && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: async () => {
+                        if (!(await leave()))
+                            return;
+                        popup.close();
+                        void openForm("edit", table.getRow(key) ?? row, undefined, opened);
+                    }, children: "Edit" })), _jsx(Button, { variant: "primary", onClick: async () => {
+                        if (await leave())
+                            popup.close();
+                    }, children: "Close" })] }));
+        let footerShown = true;
+        const onTab = (tab, popup) => {
+            const shows = tab === CRUD_DETAILS_TAB;
+            if (shows === footerShown)
+                return;
+            footerShown = shows;
+            popup.update({ footer: shows ? footer : undefined });
+        };
         const handle = openPopup({
             key: `${name}-view-${key}`,
             reopen: "restore",
@@ -1001,19 +1052,9 @@ export function Crud(given) {
             initialFocus: workspace ? '.nx-crud-workspace [role="tab"][aria-selected="true"], .nx-popup__foot button' : aside ? ".nx-popup__foot button" : undefined,
             beforeClose: workspace ? leave : undefined,
             content: workspace
-                ? popup => (_jsx(CrudWorkspace, { options: details, form: shown, current: () => table.getRow(key) ?? shown.getValue(), popup: popup, subject: capitalize(subject), load: endpoint ? startReading : undefined, read: status, refresh: refresh, guard: guard, columns: details?.columns ?? latest.current.columns, currency: tableOptions?.currency, details: without => fields(shown.getValue(), endpoint && status.get() !== "done" ? () => startReading() : undefined, without) }))
+                ? popup => (_jsx(CrudWorkspace, { options: details, form: shown, current: () => table.getRow(key) ?? shown.getValue(), popup: popup, subject: capitalize(subject), load: endpoint ? startReading : undefined, read: status, refresh: refresh, guard: guard, columns: details?.columns ?? latest.current.columns, currency: tableOptions?.currency, details: (without, reread) => fields(shown.getValue(), endpoint && status.get() !== "done" ? () => startReading() : undefined, without, reread), onTab: tab => onTab(tab, popup) }))
                 : fields(row, endpoint ? readDetails : undefined),
-            footer: popup => (_jsxs(DetailsFooter, { load: status, children: [details?.actions
-                        ?.filter(action => (!action.endpoint || (ready && can(action.endpoint))) && !action.hidden?.(row))
-                        .map(action => (_jsx(Button, { icon: action.icon, "data-action": action.id, onClick: () => action.onSelect(table.getRow(key) ?? row, popup), children: action.label }, action.id))), allowed.history && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconHistory }), "data-action": "history", onClick: () => openHistory(table.getRow(key) ?? row), children: "View history" })), canEdit && (_jsx(Button, { icon: _jsx(InlineIcon, { icon: iconPencil }), onClick: async () => {
-                            if (!(await leave()))
-                                return;
-                            popup.close();
-                            void openForm("edit", table.getRow(key) ?? row, undefined, opened);
-                        }, children: "Edit" })), _jsx(Button, { variant: "primary", onClick: async () => {
-                            if (await leave())
-                                popup.close();
-                        }, children: "Close" })] })),
+            footer,
         });
         void handle.closed.then(() => reading.abort());
     }
@@ -1022,8 +1063,11 @@ export function Crud(given) {
         const sections = marked ? [...marked.rows.pin, ...marked.rows.favorite] : [];
         return table.getRow(key) ?? heldRows().find(row => table.keyOf(row) === key) ?? sections.find(row => table.keyOf(row) === key);
     }
-    /** Opens one of the page's own row forms (`rowForms`) for a record; its save writes the fields its answer names. */
-    function openRowForm(form, row) {
+    /**
+     * Opens one of the page's own row forms (`rowForms`) for a record; its save writes the fields its answer names.
+     * `after`: called once the save is written (a workspace section's Edit reads the record again).
+     */
+    function openRowForm(form, row, after) {
         const key = table.keyOf(row);
         // The scope the form was opened on: a save that lands after a switch is that scope's.
         const asked = scopeIdRef.current;
@@ -1036,9 +1080,13 @@ export function Crud(given) {
             name,
             label: labelOf(row),
             onSaved: (result, values) => {
+                // A save there changed the record: what pickers and joins elsewhere looked up from this controller (a run's state
+                // in another page's box) is asked again where it is next shown, as after any change the CRUD makes.
+                expireLookups(api);
                 const patch = crudRowFormWrites(form.writes, result, row, values);
                 const now = patch ? run.current.writeRow(key, patch, asked) : run.current.heldRecord(key);
                 form.onSaved?.(result, now ?? row, values);
+                after?.();
             },
         });
     }
@@ -1294,7 +1342,7 @@ export function Crud(given) {
             max: markLimit(mark),
         }))
         : undefined;
-    return (_jsx("div", { id: id, className: cx("nx-crud", className), style: style, "data-mode": mode, children: _jsx(DataTable, { table: table, caption: narrowing && (_jsxs("p", { className: "nx-crud__scope", children: [capitalize(plural), " of:", " ", nonePicked ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "nx-visually-hidden", children: "no row picked" })] })) : (_jsx("strong", { className: "nx-crud__scope-name", children: narrowing.label }))] })), columns: columns, load: load, loadKey: mode && !scopeWaiting ? `${scopeId}#${mode}${scope}` : "waiting", paging: paging, rowKey: rowKey, rowLabel: labelOf, "aria-label": tableLabel, "aria-labelledby": props["aria-labelledby"], toolbar: modes.length > 1 && mode ? (_jsx(TabButtons, { size: "sm", labels: "auto", options: modeOptions, value: mode, onChange: setChosenMode, "aria-label": `${capitalize(plural)}: lists` })) : undefined, actions: scopeControl || narrowPicker.box ? (_jsxs(_Fragment, { children: [scopeControl, narrowPicker.box, props.toolbar] })) : (props.toolbar), add: add, selectable: selectable, massActions: massActionsFor, selectBy: selectBy, rowActions: rowActions, sections: sections, rowMarks: marksShown ? rowMarks : undefined, onRowOpen: onRowOpen, openOnClick: tableOptions?.openOnClick, onPick: props.onPick, onReload: () => {
+    return (_jsx("div", { id: id, className: cx("nx-crud", className), style: style, "data-mode": mode, children: _jsx(DataTable, { table: table, caption: narrowing && (_jsxs("p", { className: "nx-crud__scope", children: [capitalize(plural), " of:", " ", nonePicked ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", children: "\u2014" }), _jsx("span", { className: "nx-visually-hidden", children: "no row picked" })] })) : (_jsx("strong", { className: "nx-crud__scope-name", children: narrowing.label }))] })), columns: columns, load: load, loadKey: mode && !scopeWaiting ? `${scopeId}#${mode}${scope}` : "waiting", paging: paging, rowKey: rowKey, rowLabel: labelOf, "aria-label": tableLabel, "aria-labelledby": props["aria-labelledby"], toolbar: modes.length > 1 && mode ? (_jsx(TabButtons, { size: "sm", labels: "auto", options: modeOptions, value: mode, onChange: setChosenMode, "aria-label": `${capitalize(plural)}: lists` })) : undefined, actions: scopeControl || narrowPicker.box ? (_jsxs(_Fragment, { children: [scopeControl, narrowPicker.box, props.toolbar] })) : (props.toolbar), add: add, selectable: selectable, massActions: massActionsFor, selectBy: selectBy, rowActions: rowActions, sections: sections, rowMarks: marksShown ? rowMarks : undefined, onRowOpen: onRowOpen, openOnClick: tableOptions?.openOnClick, rowStrong: tableOptions?.rowStrong, onPick: props.onPick, onReload: () => {
                 clearCaches();
                 reloadMarks();
             }, emptyMessage: tableOptions?.emptyMessage ?? (mode ? emptyMessage(mode) : undefined), 

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

@@ -1,7 +1,7 @@
 import { type IconNode } from "nexus-icons";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 import type { CrudBackend } from "../../Helpers/CrudBackend.ts";
-import { type CrudJoinedRecord } from "../../Helpers/CrudHelpers.ts";
+import { type CrudJoinedRecord, type CrudSent } from "../../Helpers/CrudHelpers.ts";
 import type { ApiResult } from "../../Interfaces/ApiInterfaces.ts";
 import type { CrudEndpoints, CrudFormOptions, CrudInputs, CrudMassActionName, CrudRowActionName } from "../../Interfaces/CrudInterfaces.ts";
 import { type FormValues, type InputParams } from "../../Interfaces/FormInterfaces.ts";
@@ -98,10 +98,11 @@ export interface CrudFormRequest<TRow extends FormValues = FormValues> {
     /** Beside the title, and under it on the dock while minimized: the record an Edit is of, where an Add adds ("Inside Bagmati"). */
     label?: string;
     /**
-     * After the save: the answer, the values sent, and what the form's dropdowns know of the records their keys name
+     * After the save: the answer, what was sent (the values, the body `transform` made, the inputs `showWhen` hid - the
+     * record is built from them, `crudSavedRecord`), and what the form's dropdowns know of the records their keys name
      * (`joined`), so the record's joined names are written with no call. The popup closes itself.
      */
-    onSaved: (result: unknown, saved: TRow, joined: CrudJoinedLookup) => void;
+    onSaved: (result: unknown, sent: CrudSent, joined: CrudJoinedLookup) => void;
 }
 /**
  * The record behind a key of a form's dropdown (`name`), as a save names its joins (`crudJoinedNames`): the item the

package/dist/Components/Forms/CrudActions.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconArrowBackUp, iconHistory, iconPencil, iconPlus, iconTrash, iconTrashX, InlineIcon } from "nexus-icons";
-import { unwrapApiResult } from "../../Helpers/ApiResponses.js";
-import { crudFormPlace, crudMessageAction, crudRowEndpoint } from "../../Helpers/CrudHelpers.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { isAbortError, unwrapApiResult } from "../../Helpers/ApiResponses.js";
+import { crudComputeWith, crudFormPlace, crudHiddenOnSave, crudMessageAction, crudRowEndpoint } from "../../Helpers/CrudHelpers.js";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { FormStore } from "../../Helpers/FormStore.js";
 import { lockedFieldChange, lockInputs } from "../../Helpers/InputParamsHelpers.js";
@@ -53,6 +54,24 @@ export function CrudFormBody({ aside, details, below, children }) {
         return children;
     return (_jsxs("div", { className: cx("nx-crud-aside", details && "nx-crud-aside--details", below && "nx-crud-aside--below"), children: [_jsx("div", { className: "nx-crud-aside__main", children: children }), _jsx("aside", { className: "nx-crud-aside__side", children: aside })] }));
 }
+/**
+ * The Add or Edit form's `computeWith` (`CrudFormOptions.computeWith`), worked out from the form's values after every
+ * change - before the browser paints, so a worked-out cell never shows the old figure - and kept the same object while
+ * the rule answers the same fields and values, so the form's worked-out cells redraw only when it says something new.
+ */
+function CrudComputeWith({ form, rule, action, row, children, }) {
+    const latest = useRef({ rule, action, row });
+    latest.current = { rule, action, row };
+    const [computeWith, setComputeWith] = useState(() => crudComputeWith(rule, form.getValue(), { action, row }, undefined));
+    useLayoutEffect(() => {
+        if (!latest.current.rule)
+            return;
+        const read = () => setComputeWith((was) => crudComputeWith(latest.current.rule, form.getValue(), { action: latest.current.action, row: latest.current.row }, was));
+        read();
+        return form.subscribeValue(read);
+    }, [form]);
+    return children(computeWith);
+}
 /** The inputs of the Add or the Edit form, from one list, a list each, or a function of the action and the record. */
 export async function crudInputsFor(inputs, action, row) {
     if (typeof inputs === "function")
@@ -126,13 +145,24 @@ export async function openCrudForm(request) {
     const form = new FormStore();
     const loader = options.load;
     const id = row ? readPath(row, rowKey) : undefined;
-    const loadValue = action === "edit" && row && loader && loader !== "row"
-        ? loader === "details"
-            ? api.details
-                ? (signal) => browserApi.get(api.details, { params: { id, [rowKey]: id }, signal, toast: false }).then(answer => ({ ...row, ...unwrapApiResult(answer) }))
-                : undefined
-            : (signal) => loader(row, signal).then(full => ({ ...row, ...full }))
+    const defaultsLoader = options.createDefaults;
+    // A new record's defaults read as the form opens: a help, so a failed read opens the form on the values it has.
+    const loadDefaults = action === "create" && defaultsLoader
+        ? (signal) => defaultsLoader(signal).then(loaded => ({ ...newValues, ...loaded, ...values }), (error) => {
+            if (signal.aborted || isAbortError(error))
+                throw error;
+            toast.warning(`The usual values of a new ${subject} could not be filled in`, error instanceof Error && error.message ? error.message : "The server did not answer.");
+            return opening;
+        })
         : undefined;
+    const loadValue = loadDefaults ??
+        (action === "edit" && row && loader && loader !== "row"
+            ? loader === "details"
+                ? api.details
+                    ? (signal) => browserApi.get(api.details, { params: { id, [rowKey]: id }, signal, toast: false }).then(answer => ({ ...row, ...unwrapApiResult(answer) }))
+                    : undefined
+                : (signal) => loader(row, signal).then(full => ({ ...row, ...full }))
+            : undefined);
     const handle = openPopup({
         key: popupKey,
         // One still open under this key was untouched, or opened for another place: a fresh form takes its place.
@@ -150,10 +180,10 @@ export async function openCrudForm(request) {
                 form.dropDraft();
             return discard;
         },
-        content: popup => (_jsx(CrudFormBody, { aside: typeof options.aside === "function" ? options.aside({ form, action, row }) : options.aside, children: _jsx(ApiForm, { form: form, inputs: inputs, buttons: false, defaultValue: (action === "create" ? opening : (row ?? undefined)), loadValue: loadValue, api: endpoint, transform: options.transform ? formValues => options.transform(formValues, { action, row }) : undefined, confirm: options.confirm, validate: options.validate, onFieldChange: onFieldChange, design: options.design, draftKey: options.draftKey ? `${options.draftKey}:${name}:${action === "create" ? "new" : key}${place}` : undefined, "aria-label": action === "create" ? `Add ${subject}` : `Edit ${label}`, onSuccess: (result, saved) => {
-                    onSaved(result, saved, joinedLookup(inputs, form));
-                    popup.close();
-                } }) })),
+        content: popup => (_jsx(CrudFormBody, { aside: typeof options.aside === "function" ? options.aside({ form, action, row }) : options.aside, children: _jsx(CrudComputeWith, { form: form, rule: options.computeWith, action: action, row: row, children: computeWith => (_jsx(ApiForm, { form: form, computeWith: computeWith, inputs: inputs, buttons: false, defaultValue: (action === "create" ? opening : (row ?? undefined)), loadValue: loadValue, api: endpoint, transform: options.transform ? formValues => options.transform(formValues, { action, row }) : undefined, confirm: options.confirm, validate: options.validate, onFieldChange: onFieldChange, design: options.design, draftKey: options.draftKey ? `${options.draftKey}:${name}:${action === "create" ? "new" : key}${place}` : undefined, "aria-label": action === "create" ? `Add ${subject}` : `Edit ${label}`, onSuccess: (result, _values, _form, sent) => {
+                        onSaved(result, { values: sent.values, body: sent.body, hidden: crudHiddenOnSave(inputs, sent.values) }, joinedLookup(inputs, form));
+                        popup.close();
+                    } })) }) })),
         footer: popup => _jsx(FormButtons, { form: form, submitLabel: action === "create" ? `Add ${subject}` : "Save", onCancel: () => popup.close() }),
     });
     const entry = { name, action, handle, form: form, place };

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

@@ -21,8 +21,13 @@ export interface AuditChange {
 export interface AuditEntry {
     /** When, in UTC. Every entry of one mass call shares it. */
     creationTime: string;
-    /** Who made the change. */
+    /** Who made the change, as a token made for the reader. */
     creatorUserId?: string;
+    /**
+     * Who made the change, by name, when the backend's answer carries it (`AuditResponseContract.CreatorName`): the entry
+     * says "by Sita Rai" in place of the token.
+     */
+    creatorName?: string | null;
     /** The company they made it in. */
     companyId?: string;
     /** The branch they made it in. */

package/dist/Components/Forms/CrudHistory.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { iconAlertCircle, iconHistory, iconInfoCircle, iconLoader2, iconRefresh, InlineIcon } from "nexus-icons";
 import { Fragment, useEffect, useMemo, useState } from "react";
+import { auditActorText, resolveAuditActors, shortToken } from "../../Helpers/AuditEntries.js";
 import { getCrudBackend } from "../../Helpers/CrudBackend.js";
 import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
 import { pluralize } from "../../Helpers/MessageBuilder.js";
@@ -27,11 +28,6 @@ const ID = 6;
 /** When an entry happened, written as the table writes a date-time column: the user's settings, in their zone. */
 const WHEN = { key: "creationTime", label: "When", format: "date-time" };
 const NEWLINE = String.fromCharCode(10);
-/**
- * A token, short. It names nobody and only tells two apart, so its first characters are enough. A token is the same
- * text for one id on every entry this reader is given (the id is encrypted for the reader, not at random).
- */
-const shortToken = (token) => (token.length > 8 ? `${token.slice(0, 6)}…` : token);
 /** One side of a change, in words; "" when that side has no value. */
 function sideText(change, value, label, options) {
     if (label)
@@ -53,7 +49,8 @@ function SideCell({ text, missing }) {
 function HistoryEntry({ entry, words, subject, plural, options }) {
     const changes = entry.changes ?? [];
     const count = entry.massCount;
-    return (_jsxs(_Fragment, { children: [_jsx("h3", { children: whatOf(entry, words) }), _jsxs("p", { children: [_jsx("time", { dateTime: entry.creationTime, children: formatCellText(WHEN, entry.creationTime, options) }), entry.creatorUserId && ` · User ${shortToken(entry.creatorUserId)}`, count > 1 && ` · ${count} ${plural} at once`, count === 1 && " · from a selection"] }), changes.length > 0 ? (_jsx("div", { className: "nx-markdown__table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Field" }), _jsx("th", { scope: "col", children: "Before" }), _jsx("th", { scope: "col", children: "After" })] }) }), _jsx("tbody", { children: changes.map((change, index) => (_jsxs("tr", { children: [_jsx("td", { children: change.label || change.column }), _jsx(SideCell, { text: sideText(change, change.oldValue, change.oldLabel, options), missing: "Not set" }), _jsx(SideCell, { text: sideText(change, change.newValue, change.newLabel, options), missing: "Cleared" })] }, `${change.column}:${index}`))) })] }) })) : (_jsxs("p", { className: "nx-markdown__empty", children: ["Nothing changed: the ", subject, " was already as asked."] }))] }));
+    const actor = auditActorText(entry);
+    return (_jsxs(_Fragment, { children: [_jsx("h3", { children: whatOf(entry, words) }), _jsxs("p", { children: [_jsx("time", { dateTime: entry.creationTime, children: formatCellText(WHEN, entry.creationTime, options) }), actor && ` · ${actor}`, count > 1 && ` · ${count} ${plural} at once`, count === 1 && " · from a selection"] }), changes.length > 0 ? (_jsx("div", { className: "nx-markdown__table", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Field" }), _jsx("th", { scope: "col", children: "Before" }), _jsx("th", { scope: "col", children: "After" })] }) }), _jsx("tbody", { children: changes.map((change, index) => (_jsxs("tr", { children: [_jsx("td", { children: change.label || change.column }), _jsx(SideCell, { text: sideText(change, change.oldValue, change.oldLabel, options), missing: "Not set" }), _jsx(SideCell, { text: sideText(change, change.newValue, change.newLabel, options), missing: "Cleared" })] }, `${change.column}:${index}`))) })] }) })) : (_jsxs("p", { className: "nx-markdown__empty", children: ["Nothing changed: the ", subject, " was already as asked."] }))] }));
 }
 /** One page of a record's history, newest first: the entries after the first `skipCount`. */
 function readHistory(endpoint, id, skipCount, options = {}) {
@@ -101,6 +98,17 @@ export function AuditHistory({ endpoint, id, subject = "record", subjectPlural,
         });
         return () => controller.abort();
     }, [endpoint, id, attempt]);
+    // The people the answer names nobody for, named by the app (`setAuditActorNames`): one call for each page shown, for
+    // the tokens it has had no answer for. A page shown meanwhile stops the call and asks for both pages' people.
+    const [, setNamed] = useState(0);
+    useEffect(() => {
+        const controller = new AbortController();
+        void resolveAuditActors(entries, controller.signal).then(learnt => {
+            if (learnt)
+                setNamed(count => count + 1);
+        });
+        return () => controller.abort();
+    }, [entries]);
     /** The next page, after the entries already shown. A failure is the api's own toast, and the button stays to try again. */
     async function showMore() {
         setBusy(true);