nexus-shared 3.2.0 → 4.1.0

package/dist/Components/Forms/Crud.js

@@ -1,27 +1,40 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { iconArrowBackUp, iconEye, iconFlag, iconFlagOff, iconHistory, iconInfoCircle, iconList, iconLoader2, iconLock, iconNotes, iconPencil, iconPin, iconPinnedOff, iconPlus, iconStar, iconStarOff, iconTrash, iconTrashX, InlineIcon, } from "nexus-icons";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconArrowBackUp, iconEye, iconFlag, iconFlagOff, iconHistory, iconInfoCircle, iconList, iconLoader2, iconLock, iconNotes, iconPencil, iconPin, iconPinnedOff, iconStar, iconStarOff, iconTrash, iconTrashX, InlineIcon, } from "nexus-icons";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
 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, 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 { 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";
 import { expireLookups } from "../../Services/JoinSources.js";
+import { expireTreePages, writeTreeChanges } from "../../Helpers/TreeStore.js";
 import { Button } from "../Documents/Button.js";
 import { TabButtons } from "../Documents/TabButtons.js";
 import { openPopup } from "../Layouts/PopupHost.js";
 import { toast } from "../Layouts/Toaster.js";
 import { DataTable, useTable } from "../Viewers/DataTable.js";
 import { ApiForm } from "./ApiForm.js";
+import { CRUD_ACTION_WORDS, CRUD_ASKED, crudActionEntry, CrudFormBody, crudSubject, openCrudForm, sendCrudRowAction } from "./CrudActions.js";
 import { openAuditHistory } from "./CrudHistory.js";
 import { CrudDetails } from "./CrudParts.js";
+import { confirmLeaving, CrudWorkspace } from "./CrudWorkspace.js";
+import { FormLeaveGuard } from "./FormLeaveGuard.js";
 import { confirmDiscard, FormButtons } from "./SubmitForm.js";
 /*
  * Crud: a module's records in one component. It takes a controller's endpoints, the table's columns, and the form's
@@ -31,6 +44,11 @@ import { confirmDiscard, FormButtons } from "./SubmitForm.js";
  * answer instead of reloading.
  */
 const ALL_ACTIONS = ["create", "view", "edit", "flag", "pin", "favorite", "history", "trash", "recover", "delete", "trashFromDelete", "description"];
+/**
+ * The actions that change a record, which a locked one (`rowLock`) lists switched off. Pin and Favourite are left out on
+ * purpose: they are the user's own marks and change nothing on the record, as View and History change nothing.
+ */
+const CHANGES_RECORD = new Set(["edit", "flag", "trash", "recover", "delete", "trashFromDelete", "description"]);
 /** How each mark shows: its section above the list, the actions that put it on and take it off, and what its limit says. */
 const MARK_INFO = {
     pin: {
@@ -63,43 +81,14 @@ const MODE_INFO = {
     trash: { label: "Trash", icon: iconTrash, empty: () => "The trash is empty." },
     deleted: { label: "Deleted", icon: iconTrashX, empty: plural => `No deleted ${plural}.` },
 };
-/** Actions that move a record between the lists are asked about first; flags and pins are undone by a click. */
-const ASKED = new Set(["trash", "recover", "delete", "trashFromDelete"]);
 /** Actions that take a record out of the active lists, so it leaves the sections of its marks too. */
 const LEFT_ACTIVE = new Set(["trash", "delete", "trashFromDelete"]);
 const capitalize = (text) => (text ? text[0].toUpperCase() + text.slice(1) : text);
 const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
-function isInputList(inputs) {
-    return Array.isArray(inputs);
-}
-/** The subject the endpoints were given: `apiController(module, "Guest", "guest")` → "guest". */
-function endpointSubject(api) {
-    const endpoints = [api.create, api.update, api.details, ...Object.values(api.lists ?? {}), ...Object.values(api.pages ?? {})];
-    return endpoints.find(endpoint => endpoint?.subject)?.subject;
-}
-/**
- * The body of an Add, Edit or details popup. Without an `aside` it is the form (or the details) and nothing else, so
- * a popup that wants no panel carries no wrapper at all. With one, the two become columns that scroll on their own,
- * and the form is first in the DOM — which is also the order they stack in when there is no room for two. A details
- * popup is marked, because there the panel is what the popup is for and takes the larger share.
- */
-function CrudFormBody({ aside, details, children }) {
-    if (!aside)
-        return children;
-    return (_jsxs("div", { className: cx("nx-crud-aside", details && "nx-crud-aside--details"), children: [_jsx("div", { className: "nx-crud-aside__main", children: children }), _jsx("aside", { className: "nx-crud-aside__side", children: aside })] }));
-}
 /** Whether the details endpoint's record says anything the list's row did not. Plain JSON, compared field by field. */
 function addsToRow(row, full) {
     return Object.entries(full).some(([name, value]) => JSON.stringify(value) !== JSON.stringify(row[name]));
 }
-/**
- * A details record that lands sooner than this says nothing: the demo answers in about 0.3s and most backends sooner,
- * and a word shown for a frame or two is the flicker this avoids. Longer than the popup's 160ms fade, so the word
- * never lands on a half-faded popup.
- */
-const DETAILS_STATUS_DELAY = 400;
-/** Once "Loading…" shows, it stays at least this long, so a record that lands just after the delay does not blink it. */
-const DETAILS_STATUS_HOLD = 300;
 /** One details popup's load state, shared by the details (which load) and the footer (which says so), as a form popup shares its FormStore with FormButtons. */
 function detailsLoad(initial) {
     let state = initial;
@@ -123,32 +112,13 @@ function detailsLoad(initial) {
 }
 /**
  * A details popup's footer: a form's bar, its status line on the left and Edit and Close on the right. The line is
- * always there, so what it says never moves anything: "Loading…" only for a slow record, "Not all fields loaded." for
- * one that failed.
+ * always there, so what it says never moves anything: "Loading…" only for a slow record (`useSlowBusy`: the demo
+ * answers in about 0.3s), "Not all fields loaded." for one that failed.
  */
 function DetailsFooter({ load, children }) {
     const state = useSyncExternalStore(load.subscribe, load.get, load.get);
-    const [said, setSaid] = useState(null);
-    const since = useRef(0);
-    useEffect(() => {
-        if (state === "loading") {
-            if (said === "loading")
-                return;
-            const timer = window.setTimeout(() => {
-                since.current = performance.now();
-                setSaid("loading");
-            }, DETAILS_STATUS_DELAY);
-            return () => window.clearTimeout(timer);
-        }
-        const next = state === "failed" ? "failed" : null;
-        const left = said === "loading" ? since.current + DETAILS_STATUS_HOLD - performance.now() : 0;
-        if (left <= 0) {
-            setSaid(next);
-            return;
-        }
-        const timer = window.setTimeout(() => setSaid(next), left);
-        return () => window.clearTimeout(timer);
-    }, [state, said]);
+    const slow = useSlowBusy(state === "loading");
+    const said = slow ? "loading" : state === "failed" ? "failed" : null;
     return (_jsxs("div", { className: "nx-form-buttons nx-form-buttons--end nx-crud-details__foot", children: [_jsxs("p", { className: "nx-form-status nx-form-status--muted", "aria-live": "polite", children: [said === "loading" && (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin" }), _jsx("span", { children: "Loading\u2026" })] })), said === "failed" && (_jsxs(_Fragment, { children: [_jsx(InlineIcon, { icon: iconInfoCircle }), _jsx("span", { children: "Not all fields loaded." })] }))] }), _jsx("div", { className: "nx-form-buttons__actions", children: children })] }));
 }
 /**
@@ -165,21 +135,37 @@ function DetailsFooter({ load, children }) {
  *   paging="server"
  * />
  */
-export function Crud(props) {
+export function Crud(given) {
+    // A scope shows the same kind of record: its words, its popups and its saved settings' name are the CRUD's own.
+    const subject = given.subject ?? crudSubject(given.api) ?? "record";
+    const plural = given.subjectPlural ?? pluralize(subject);
+    // Where a narrowed list's record is picked, in the words its empty list, its Add and its Add form's fixed field use.
+    const pickWords = narrowPickWords(given.narrowPicker?.label, subject, plural);
+    // A list narrowed by a box of its own (`narrowPicker`) is one narrowed by the record picked there. While nothing is
+    // picked the box asks for a pick, and says why in the list's words.
+    const narrowPicker = useCrudNarrowPicker(given.narrowPicker, {
+        empty: given.narrowPicker?.emptyMessage ?? pickWords.empty,
+        add: given.narrowPicker?.addMessage ?? pickWords.add,
+    });
+    // Permissions: every list and action asks, again whenever the user's rights change.
+    const permissionsStamp = useSyncExternalStore(subscribePermissions, permissionsVersion, permissionsVersion);
+    const permissions = getPermissions();
+    const ready = permissions.ready;
+    const wantedModes = given.modes ?? CRUD_MODES;
+    const can = useCallback((endpoint) => permissions.can(endpoint), [permissions, permissionsStamp]); // eslint-disable-line react-hooks/exhaustive-deps
+    // A list widened to another scope (`scopes`) is the CRUD on that scope's endpoints, with what differs on it; one is
+    // offered only to a person who may call one of its lists.
+    const scoping = useCrudScopes(given.scopes, scope => ready && availableModes(scope.api, given.paging ?? "client", wantedModes, can).length > 0);
+    const givenRef = useRef(given);
+    givenRef.current = given;
+    const scoped = crudScopeProps(given, scoping.scope);
+    const props = narrowPicker.narrow ? { ...scoped, narrow: narrowPicker.narrow } : scoped;
     const { api, columns, rowKey = "id", paging = "client", table: tableOptions, id, className, style, ref } = props;
     const latest = useRef(props);
     latest.current = props;
-    const subject = props.subject ?? endpointSubject(api) ?? "record";
-    const plural = props.subjectPlural ?? pluralize(subject);
     const name = props.name ?? subject;
     const backend = props.backend ?? getCrudBackend();
-    // Permissions: every list and action asks, again whenever the user's rights change.
-    const permissionsStamp = useSyncExternalStore(subscribePermissions, permissionsVersion, permissionsVersion);
-    const permissions = getPermissions();
-    const ready = permissions.ready;
-    const wantedModes = props.modes ?? CRUD_MODES;
     const wantedActions = props.actions ?? ALL_ACTIONS;
-    const can = useCallback((endpoint) => permissions.can(endpoint), [permissions, permissionsStamp]); // eslint-disable-line react-hooks/exhaustive-deps
     const modes = useMemo(() => (ready ? availableModes(api, paging, wantedModes, can) : []), [ready, api, paging, wantedModes, can]);
     const allowed = useMemo(() => {
         const map = {};
@@ -200,18 +186,65 @@ export function Crud(props) {
     const mode = chosenMode && modes.includes(chosenMode) ? chosenMode : modes[0];
     const modeRef = useRef(mode);
     modeRef.current = mode;
+    // A list narrowed to the records of one picked in another (`narrow`): the picked record's value and name, and the
+    // part of the list's name it adds, so a list narrowed to one record is never filed or written as another's.
+    const narrowing = crudNarrowing(props.narrow);
+    const narrowingRef = useRef(narrowing);
+    narrowingRef.current = narrowing;
+    const scope = narrowing ? `@${narrowing.key}=${narrowing.value ?? ""}` : "";
+    const scopeRef = useRef(scope);
+    scopeRef.current = scope;
+    /** Whether a record belongs in the list's narrowing: always, without one. */
+    const inScope = (row) => crudInNarrowing(row, narrowingRef.current);
+    // The scope shown (`scopes`): "" for the CRUD's own list.
+    const scopeId = scoping.scope?.id ?? "";
+    // No list yet while the scope kept in this browser is read, or while the narrowing box settles as the page opens.
+    const scopeWaiting = scoping.waiting || narrowPicker.waiting;
+    const chooseScope = useRef(scoping.choose);
+    chooseScope.current = scoping.choose;
+    const scopeIdRef = useRef(scopeId);
+    scopeIdRef.current = scopeId;
+    /** The list on screen, as an action asked from it is told apart: its scope, its mode and its narrowing. */
+    const listNow = () => `${scopeIdRef.current}#${modeRef.current ?? ""}${scopeRef.current}`;
     const table = useTable();
     const lifetime = props.cache === false ? 0 : (props.cache?.lifetime ?? CRUD_CACHE_LIFETIME);
-    const [cache] = useState(() => new CrudCache(lifetime));
+    // The lists kept, one cache per scope: each scope's lists are its endpoints' answers.
+    const [caches] = useState(() => new Map());
+    const cacheOf = (scope) => {
+        let kept = caches.get(scope);
+        if (!kept)
+            caches.set(scope, (kept = new CrudCache(lifetime)));
+        return kept;
+    };
+    const cache = cacheOf(scopeId);
+    const clearCaches = useCallback(() => {
+        for (const kept of caches.values())
+            kept.clear();
+    }, [caches]);
     // The cache lives while the page is open, as the old CRUD's did.
-    useEffect(() => () => cache.clear(), [cache]);
+    useEffect(() => () => clearCaches(), [clearCaches]);
     const rawKey = (row) => readPath(row, rowKey);
+    /** Why a record may not be changed here (`rowLock`), or null when it may. */
+    const lockOf = (row) => latest.current.rowLock?.(row) || null;
+    /**
+     * Why one action may not run on a record, or null when it may: the whole record's lock (`rowLock`) for every action that
+     * changes it, else that action's own (`rowActionLock`), such as a head office that may be edited but never trashed.
+     */
+    const actionLockOf = (row, action) => {
+        if (!CHANGES_RECORD.has(action))
+            return null;
+        const whole = lockOf(row);
+        if (whole)
+            return whole;
+        const own = latest.current.rowActionLock?.(row)?.[action];
+        return own || null;
+    };
     const labelOf = useCallback((row) => {
         const custom = latest.current.rowLabel;
         if (custom)
             return custom(row);
-        const first = latest.current.columns[0];
-        const text = first ? formatCellText(first, columnValue(first, row)) : "";
+        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]);
     /*
@@ -287,18 +320,28 @@ export function Crud(props) {
     }
     /* Loading */
     const load = useCallback((query, signal) => {
-        if (!mode)
+        // No list before the permissions say which, nor before the scope kept in this browser is read.
+        if (!mode || scopeWaiting)
             return new Promise(() => undefined);
+        // A narrowed list with nothing picked shows nothing, and asks for nothing.
+        const narrowed = narrowingRef.current;
+        if (narrowed && narrowed.value === null)
+            return paging === "server" ? { rows: [], total: 0, matches: 0 } : [];
+        // A list that pages in the browser keeps every record of the list, whoever it names, and shows the picked one's:
+        // picking another shows its records from the same list, with no request. A server's pages are its own, and filtered.
+        const shown = (result) => (narrowed && Array.isArray(result) ? result.filter(inScope) : result);
         const endpoint = crudListEndpoint(api, mode, paging);
         const sortColumn = query.sort ? latest.current.columns.find(column => column.key === query.sort.key) : undefined;
         const filters = query.filters ? JSON.stringify(query.filters) : "";
-        const key = paging === "server" ? `${mode}|${query.search}|${query.sort ? `${query.sort.key}:${query.sort.direction}` : ""}|${query.page}|${query.pageSize}|${filters}` : mode;
+        const key = paging === "server" ? `${mode}|${query.search}|${query.sort ? `${query.sort.key}:${query.sort.direction}` : ""}|${query.page}|${query.pageSize}|${filters}|${scope}` : mode;
         const kept = cache.get(key);
         if (kept)
-            return kept;
+            return shown(kept);
         const options = { signal, toast: false, subject: plural };
-        if (paging === "server")
-            options.body = backend.pageRequest(query, sortColumn?.sortKey ?? sortColumn?.key, filterRequest(query.filters, latest.current.table?.filterInputs ?? [], latest.current.columns));
+        if (paging === "server") {
+            const named = filterRequest(query.filters, latest.current.table?.filterInputs ?? [], latest.current.columns);
+            options.body = backend.pageRequest(query, sortColumn?.sortKey ?? sortColumn?.key, narrowed ? { ...named, [narrowed.key]: narrowed.raw } : named);
+        }
         return browserApi.send(endpoint, options).then(answer => {
             if (answer.aborted)
                 throw abortError();
@@ -306,9 +349,12 @@ export function Crud(props) {
                 throw new Error(answer.message ?? `Could not load the ${plural}.`);
             const result = paging === "server" ? backend.readPage(answer.result) : backend.readList(answer.result);
             cache.set(key, result);
-            return result;
+            return shown(result);
         });
-    }, [mode, api, paging, cache, backend, plural]);
+    }, 
+    // `scope` is what tells one narrowing's loader from another's; the rest of the narrowing is read through its ref.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mode, api, paging, cache, backend, plural, scope, scopeWaiting]);
     /** Which list a record belongs in, as this backend reads the record. */
     const member = (row, of) => backend.listMembership(row, of);
     /**
@@ -326,24 +372,54 @@ export function Crud(props) {
             cache.map((key, value) => patchCachedList(value, crudCacheMode(key), changes, row => table.keyOf(row), member));
         else
             cache.clear();
+        // Another scope's lists (`scopes`) are the server's to say: whether a record belongs in them is not in the record (its
+        // branch, say), so they are dropped, and each loads when it is shown again.
+        for (const [kept, other] of caches)
+            if (kept !== scopeIdRef.current)
+                other.clear();
         // The list on screen is the table's own, every row of it, so it is written back whole rather than patched - when
         // the change was written into it. When it was not (see `holds`), the table is read again from the lists just
         // patched, or loaded when it has none, and a load still out for it is stopped: it may have been asked before the
-        // change, and would land without it.
+        // change, and would land without it. A narrowed table holds the picked record's rows of a list kept whole, which
+        // the patch above has already written.
         if (!written)
             void table.reload({ quiet: true });
-        else if (paging === "client" && shown)
+        else if (paging === "client" && shown && !narrowingRef.current)
             cache.update(shown, table.getRows());
     }
     /**
-     * Whether the table holds the list an action was asked from, every row of it, so the answer can be written into it.
-     * Not when the user moved to another list while a slow answer was out - the table holds that list then - and not
-     * while a list is loading: a switch keeps the old list's rows until the new ones land, and writing those back would
-     * file one list under another's name.
+     * Whether the table holds the list an action was asked from (`listNow()` then), every row of it, so the answer can be
+     * written into it. Not when the user moved to another list while a slow answer was out - another mode, or another
+     * record picked for a narrowed list - since the table holds that list then, and not while a list is loading: a switch
+     * keeps the old list's rows until the new ones land, and writing those back would file one list under another's name.
      */
     function holds(from) {
-        return (from === undefined || from === modeRef.current) && table.getState().status === "ready";
+        return (from === undefined || from === listNow()) && table.getState().status === "ready";
     }
+    /**
+     * Whether an answer came for another scope than the one shown now: the person switched while it was out. Which lists
+     * hold the record is then not known here, so every list kept is dropped and the one on screen read again, quietly;
+     * nothing is written into the table. `asked` is the scope shown when the action was asked for.
+     */
+    function answeredElsewhere(asked) {
+        if (asked === scopeIdRef.current)
+            return false;
+        clearCaches();
+        reloadMarks();
+        void table.reload({ quiet: true });
+        // Pickers, joins and trees elsewhere show the same records whatever the scope: what they looked up is old now (the
+        // scope's endpoints the change went through, and the list's on screen), and a tree's kept pages are dropped, as no
+        // tree change can be worked out from a list this CRUD no longer holds.
+        const askedApi = asked ? givenRef.current.scopes?.options.find(option => option.id === asked)?.api : givenRef.current.api;
+        if (askedApi)
+            expireLookups(askedApi);
+        expireLookups(latest.current.api);
+        for (const tree of latest.current.trees ?? [])
+            expireTreePages(tree.cacheKey);
+        return true;
+    }
+    /** Whether a record belongs in the list on screen: its band's list, and the narrowing's record. */
+    const shownMember = (row) => inScope(row) && member(row, modeRef.current ?? "normal") !== false;
     function afterChange(action, rows, changes, written) {
         syncCaches(changes, written);
         // What other tables and pickers looked up from this controller may now be wrong - a name, a status - so it is marked
@@ -351,14 +427,72 @@ export function Crud(props) {
         if (action !== "pin" && action !== "favorite")
             expireLookups(api);
         const shown = modeRef.current;
-        if (shown)
-            latest.current.onChange?.({ action, rows, mode: shown });
+        if (!shown)
+            return;
+        const before = new Map(changes.map(change => [change.key, change.before]));
+        const change = { action, rows, mode: shown, before: rows.map(row => before.get(table.keyOf(row))) };
+        // The parents' own rows this table holds count their children as the tree's parents do: each row once, however many
+        // placements of the same records the page gives, and counted from the rows as they were before any of them.
+        let held = null;
+        const counted = new Map();
+        for (const tree of latest.current.trees ?? []) {
+            // A tree elsewhere showing these records keeps its pages: the change is written into them, never read again.
+            const treeChanges = crudTreeChanges(change, tree, backend);
+            writeTreeChanges(tree.cacheKey, treeChanges, tree.rules);
+            if (treeChanges.length === 0 || !tree.rules.hasChildrenKey)
+                continue;
+            held ??= heldRows();
+            for (const parent of crudParentCounts(treeChanges, held, tree)) {
+                const key = table.keyOf(parent);
+                if (!counted.has(key))
+                    counted.set(key, parent);
+            }
+        }
+        if (counted.size > 0)
+            patchRows([...counted.values()]);
+        latest.current.onChange?.(change);
+    }
+    /**
+     * Records that changed with another one's change - a parent's count - written wherever they are held: the table, the
+     * lists kept, the marked sections. None of them joins or leaves a list, and nothing is loaded.
+     */
+    function patchRows(rows) {
+        const write = holds(undefined);
+        const changes = rows.map(row => {
+            const key = table.keyOf(row);
+            const held = table.getRow(key);
+            if (held && write)
+                table.upsert(row, { flash: false });
+            return { key, row, before: held ?? row };
+        });
+        cache.map((key, value) => patchCachedList(value, crudCacheMode(key), changes, row => table.keyOf(row), member));
+        if (write && paging === "client" && modeRef.current)
+            cache.update(modeRef.current, table.getRows());
+        patchMarked([...rows]);
+    }
+    /** Every record the table and the lists kept hold, once each (the table's own last): where a parent's row may be. */
+    function heldRows() {
+        const found = new Map();
+        const add = (rows) => {
+            for (const row of rows)
+                found.set(table.keyOf(row), row);
+        };
+        cache.map((_key, value) => {
+            add(Array.isArray(value) ? value : value.rows);
+            return value;
+        });
+        add(table.getRows());
+        return [...found.values()];
     }
     function applyChange(action, rows, options = {}) {
-        const { result, mass = false, markOn, values, from } = options;
+        const { result, mass = false, markOn, values, from, asked = scopeIdRef.current } = options;
         const shown = modeRef.current;
         if (!shown)
             return;
+        if (answeredElsewhere(asked)) {
+            latest.current.onChange?.({ action, rows, mode: shown });
+            return;
+        }
         // Every table write below is for the list the action was asked from; when the table holds another, none is made.
         const write = holds(from);
         const answered = rows.length > 1 ? backend.answeredKeys(result, rowKey) : null;
@@ -439,7 +573,9 @@ export function Crud(props) {
      * mark goes on top of its section, one that lost it leaves), and the record itself in the table and every list kept.
      * A mark never moves a record between lists: it stays where it is, on its page.
      */
-    function applyMarks(mark, rows, stored) {
+    function applyMarks(mark, rows, stored, asked = scopeIdRef.current) {
+        if (answeredElsewhere(asked))
+            return;
         const write = holds(undefined);
         const updated = [];
         const moved = [];
@@ -462,10 +598,13 @@ export function Crud(props) {
     }
     /**
      * Records a page's own action changed, written exactly where the built-in ones write theirs. The handle's `apply`.
+     * `held` gives, by key, a record as it was where the table does not hold it (a details popup's record from the pinned
+     * band, or from a page since turned): a record known to have been in the list on screen and still in it is then
+     * written in place in every page kept, and none is dropped or read again for it.
      */
-    function applyRows(rows, gone = false) {
+    function applyRows(rows, gone = false, held, asked = scopeIdRef.current) {
         const shown = modeRef.current;
-        if (!shown || rows.length === 0)
+        if (!shown || rows.length === 0 || answeredElsewhere(asked))
             return;
         const moved = [];
         const updated = [];
@@ -481,13 +620,15 @@ export function Crud(props) {
             const key = table.keyOf(next);
             if (!key)
                 continue;
-            const before = table.getRow(key);
-            // The record decides whether it is still in the list on screen; a backend that cannot say keeps it there.
-            if (gone || member(next, shown) === false)
+            const inTable = table.getRow(key);
+            const before = inTable ?? held?.get(key);
+            // The record decides whether it is still in the list on screen - its band, and the record a narrowed list shows the
+            // records of; a backend that cannot say keeps it there.
+            if (gone || !inScope(next) || member(next, shown) === false)
                 leaving.push(key);
             else if (!before && member(next, shown))
                 write = false;
-            else if (before && write)
+            else if (inTable && write)
                 table.upsert(next, { flash: false });
             if (before && backend.marksOf(next) !== backend.marksOf(before))
                 stored.set(key, backend.marksOf(next));
@@ -504,17 +645,13 @@ export function Crud(props) {
     }
     /* Row actions */
     async function runRowAction(action, row) {
-        const endpoint = crudRowEndpoint(api, action);
-        if (!endpoint)
-            return;
-        const key = rawKey(row);
-        const from = modeRef.current;
-        const markOn = action === "flag" ? !backend.isFlagged(row) : undefined;
+        const from = listNow();
+        const asked = scopeIdRef.current;
         // A flag carries the way it goes: never a toggle the server works out.
-        const options = { params: { id: key, [rowKey]: key }, subject: labelOf(row), action: crudMessageAction(action, markOn), ...(markOn !== undefined ? backend.flagRequest(markOn) : {}) };
-        const answer = ASKED.has(action) ? await browserApi.confirm(endpoint, options) : await browserApi.send(endpoint, options);
+        const markOn = action === "flag" ? !backend.isFlagged(row) : undefined;
+        const answer = await sendCrudRowAction(api, action, row, { rowKey, label: labelOf(row), backend, markOn });
         if (answer?.ok)
-            applyChange(action, [row], { result: answer.result, markOn, from });
+            applyChange(action, [row], { result: answer.result, markOn, from, asked });
     }
     /**
      * Puts a mark on one record, or takes it off: the way the record's marks say, never a toggle the server works out.
@@ -534,10 +671,11 @@ export function Crud(props) {
         const wanted = withMark(before, mark, on);
         const whole = Boolean(api.bookmark);
         const id = rawKey(row);
+        const asked = scopeIdRef.current;
         const answer = await browserApi.send(endpoint, { params: { id, [rowKey]: id }, subject: labelOf(row), action: crudMessageAction(mark, on), ...(whole ? backend.marksRequest(wanted) : {}) });
         if (!answer.ok)
             return;
-        applyMarks(mark, [row], new Map([[table.keyOf(row), (whole ? backend.answeredMarks(answer.result) : null) ?? wanted]]));
+        applyMarks(mark, [row], new Map([[table.keyOf(row), (whole ? backend.answeredMarks(answer.result) : null) ?? wanted]]), asked);
     }
     /**
      * Puts a mark on the selected records, or takes it off. Only the records the change is for are sent - the rest are
@@ -562,11 +700,12 @@ export function Crud(props) {
         const keys = sent.map(rawKey);
         const request = api.mass?.bookmark ? backend.massMarksRequest(keys, mark, on) : { body: backend.massRequest(mark, keys) };
         const action = crudMessageAction(mark, on);
+        const asked = scopeIdRef.current;
         const answer = await browserApi.send(endpoint, { ...request, subject, plural: props.subjectPlural, count: sent.length, action, toast: { success: false } });
         if (!answer.ok)
             return;
         const done = changedOf(sent, answer.result);
-        applyMarks(mark, done, new Map(done.map(row => [table.keyOf(row), withMark(marksOf(row), mark, on)])));
+        applyMarks(mark, done, new Map(done.map(row => [table.keyOf(row), withMark(marksOf(row), mark, on)])), asked);
         table.clearSelection();
         sayMassDone(action, sent.length, done.length);
         if (sent.length < wanted.length)
@@ -599,12 +738,13 @@ export function Crud(props) {
         if (!sent.length)
             return;
         const action = crudMessageAction("flag", on);
-        const from = modeRef.current;
+        const from = listNow();
+        const asked = scopeIdRef.current;
         const answer = await browserApi.send(endpoint, { body: backend.massRequest("flag", sent.map(rawKey)), ...backend.flagRequest(on), subject, plural: props.subjectPlural, count: sent.length, action, toast: { success: false } });
         if (!answer.ok)
             return;
         const done = changedOf(sent, answer.result);
-        applyChange("flag", done, { result: answer.result, mass: true, markOn: on, from });
+        applyChange("flag", done, { result: answer.result, mass: true, markOn: on, from, asked });
         table.clearSelection();
         sayMassDone(action, sent.length, done.length);
     }
@@ -617,88 +757,94 @@ export function Crud(props) {
         if (!endpoint)
             return;
         const options = { body: backend.massRequest(action, rows.map(rawKey)), subject, plural: props.subjectPlural, count: rows.length, action: crudMessageAction(action) };
-        const from = modeRef.current;
-        const answer = ASKED.has(action) ? await browserApi.confirm(endpoint, options) : await browserApi.send(endpoint, options);
+        const from = listNow();
+        const asked = scopeIdRef.current;
+        const answer = CRUD_ASKED.has(action) ? await browserApi.confirm(endpoint, options) : await browserApi.send(endpoint, options);
         if (!answer?.ok)
             return;
-        applyChange(action, rows, { result: answer.result, mass: true, from });
+        applyChange(action, rows, { result: answer.result, mass: true, from, asked });
         table.clearSelection();
     }
     /* Popups */
-    const addPopup = useRef(null);
-    async function inputsFor(action, row) {
-        const given = latest.current.inputs;
-        if (typeof given === "function")
-            return given(action, row);
-        if (isInputList(given))
-            return given;
-        return (action === "create" ? (given.create ?? given.edit) : (given.edit ?? given.create)) ?? [];
-    }
-    async function openForm(action, row, values) {
-        const endpoint = action === "create" ? api.create : api.update;
-        if (!endpoint)
-            return;
-        // An Add form with changes comes back as it was; an untouched one is replaced by a fresh form.
-        if (action === "create" && addPopup.current?.form.isChanged()) {
-            addPopup.current.handle.restore();
+    /**
+     * Why nothing can be added to a narrowed list now: no record picked, or one that may take none (`narrow.addLock`, by
+     * default the backend's rule: a record a picker would not offer takes no new records). `null` while Add adds, and
+     * always without a narrowing.
+     */
+    function narrowedAddLock() {
+        const narrow = latest.current.narrow;
+        const narrowed = narrowingRef.current;
+        if (!narrow || !narrowed)
+            return null;
+        if (!narrow.picked || narrowed.value === null)
+            return narrow.addMessage ?? pickWords.add;
+        if (narrow.addLock)
+            return narrow.addLock(narrow.picked) || null;
+        return backend.isPickable(narrow.picked) ? null : `${narrowed.label} cannot take a new ${subject} now.`;
+    }
+    /**
+     * 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, 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);
             return;
         }
-        const inputs = await inputsFor(action, row);
-        const options = latest.current.form ?? {};
-        const form = new FormStore();
-        const key = row ? table.keyOf(row) : "";
-        const label = row ? labelOf(row) : undefined;
-        const newValues = typeof options.newValues === "function" ? options.newValues() : options.newValues;
-        const loader = options.load;
-        const loadValue = action === "edit" && row && loader && loader !== "row"
-            ? loader === "details"
-                ? api.details
-                    ? (signal) => browserApi.get(api.details, { params: { id: rawKey(row), [rowKey]: rawKey(row) }, signal, toast: false }).then(answer => ({ ...row, ...unwrapApiResult(answer) }))
-                    : undefined
-                : (signal) => loader(row, signal).then(full => ({ ...row, ...full }))
-            : undefined;
-        const handle = openPopup({
-            key: action === "create" ? `${name}-new` : `${name}-edit-${key}`,
-            reopen: action === "create" ? "replace" : "restore",
-            title: action === "create" ? `Add ${subject}` : `Edit ${subject}`,
-            description: label,
-            icon: _jsx(InlineIcon, { icon: action === "create" ? iconPlus : iconPencil }),
-            size: options.size ?? (inputs.length > 8 ? "lg" : "md"),
-            closeOnBackdrop: false,
-            beforeClose: async () => {
-                const discard = await confirmDiscard(form);
-                if (discard)
-                    form.dropDraft();
-                return discard;
+        // A narrowed list adds for the record picked in the other one, and only while it may take one: its value fixed in
+        // the form, the form one of its own per picked record ("For Ram Thapa" in its title bar), and its box named from the
+        // picked record with no lookup.
+        const picked = latest.current.narrow?.picked;
+        const narrowed = narrowingRef.current;
+        // The scope the form was opened on: a save that lands after a switch is that scope's, on its endpoints and inputs.
+        const asked = opened ? opened.asked : scopeIdRef.current;
+        const scoped = opened ? opened.props : latest.current;
+        let place = { values, label: row ? labelOf(row) : undefined };
+        if (action === "create" && narrowed) {
+            if (narrowedAddLock() !== null || !picked)
+                return;
+            place = {
+                values: { ...values, [narrowed.key]: narrowed.raw },
+                locked: { [narrowed.key]: (latest.current.narrow?.fixedMessage ?? pickWords.fixed)(narrowed.label) },
+                known: [picked],
+                label: `For ${narrowed.label}`,
+            };
+        }
+        await openCrudForm({
+            api: scoped.api,
+            action,
+            row,
+            ...place,
+            inputs: scoped.inputs,
+            form: scoped.form,
+            subject,
+            // Each scope keeps its own Add (and its draft): one from another scope never comes back here. A record keeps one
+            // Edit wherever it is opened from.
+            name: action === "create" && asked ? `${name}@${asked}` : name,
+            rowKey,
+            key: row ? table.keyOf(row) : "",
+            onSaved: (result, sent, joined) => {
+                run.current.onSaved(action, row, result, sent, joined, asked);
+                after?.();
             },
-            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" ? { ...newValues, ...values } : (row ?? undefined)), loadValue: loadValue, api: endpoint, transform: options.transform ? formValues => options.transform(formValues, { action, row }) : undefined, validate: options.validate, onFieldChange: options.onFieldChange, design: options.design, draftKey: options.draftKey ? `${options.draftKey}:${name}:${action === "create" ? "new" : key}` : undefined, "aria-label": action === "create" ? `Add ${subject}` : `Edit ${label}`, onSuccess: (result, saved) => {
-                        onSaved(action, row, result, saved);
-                        popup.close();
-                    } }) })),
-            footer: popup => _jsx(FormButtons, { form: form, submitLabel: action === "create" ? `Add ${subject}` : "Save", onCancel: () => popup.close() }),
         });
-        if (action === "create") {
-            const entry = { handle, form };
-            addPopup.current = entry;
-            void handle.closed.then(() => {
-                if (addPopup.current === entry)
-                    addPopup.current = null;
-            });
-        }
     }
     /**
-     * The record a `Create` answered only the key of, read back on its own: the row goes in at once with what the form
-     * sent, and the fields the server owns - its status, its times, anything it worked out - land a moment later. One
-     * small request, where loading the list again was a request for every record on it.
+     * A saved record read back on its own - only where what the page holds cannot finish it: a backend whose saved record
+     * still does not say which list it belongs in (`savedRow` wrote no status; the Nexus backend's always does), or a name
+     * the database joins that no picked or held record gives (`crudJoinsMissing`: a `dbJoin` column without `from`). The row
+     * goes in at once with what the form sent, and the rest lands a moment later.
      */
-    async function fillSaved(key, record) {
+    async function fillSaved(key, record, asked = scopeIdRef.current) {
         const endpoint = api.details;
         if (!endpoint)
             return;
         const id = readPath(record, rowKey);
         const answer = await browserApi.get(endpoint, { params: { id, [rowKey]: id }, toast: false });
         const full = unwrapApiResult(answer);
-        if (!isRecord(full))
+        if (!isRecord(full) || answeredElsewhere(asked))
             return;
         const before = table.getRow(key);
         const next = { ...(before ?? record), ...full };
@@ -706,40 +852,70 @@ export function Crud(props) {
         if (write && before)
             table.upsert(next, { flash: false });
         syncCaches([{ key, row: next, before }], write);
+        patchMarked([next]);
+        for (const tree of latest.current.trees ?? [])
+            writeTreeChanges(tree.cacheKey, crudTreeChanges({ action: "edit", rows: [next], mode: modeRef.current ?? "normal", before: [record] }, tree, backend), tree.rules);
     }
-    function onSaved(action, row, result, values) {
+    /**
+     * A saved record finished with no call: the fields only the server keeps as the backend writes them (`savedRow`), the
+     * names the database joins from the records the form picked or the page holds (`crudJoinedNames`), and the count of its
+     * children each tree placement keeps (`crudSavedCount`: none for a new one, the held row's for an edited one). `held` is
+     * the record as the page holds it now (an edit). A narrowed list's picked record names the field it narrows by.
+     */
+    function finished(action, record, held, joined) {
+        let next = backend.savedRow(action, record, held);
+        const picked = latest.current.narrow?.picked;
+        next = crudJoinedNames(next, held, latest.current.columns, (from, key) => joined(from, key, picked ? [picked] : []));
+        for (const tree of latest.current.trees ?? [])
+            next = crudSavedCount(next, held, tree);
+        return next;
+    }
+    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.
-        // A backend that answers the record it wrote leaves nothing to load at all.
         const answered = backend.answeredRow(result);
-        const 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);
+            if (given !== null && !rowKey.includes("."))
+                record[rowKey] = given;
+        }
         const shown = modeRef.current;
+        if (answeredElsewhere(asked)) {
+            latest.current.onChange?.({ action, rows: [record], mode: shown ?? "normal" });
+            return;
+        }
         if (action === "edit") {
+            // The record as the page holds it now - flagged or counted since the form opened, perhaps - or, off the page shown
+            // (a pinned record, another page), as the form opened it.
             const key = table.keyOf(record);
-            const before = table.getRow(key);
+            const held = (key ? table.getRow(key) : undefined) ?? row ?? undefined;
+            record = finished(action, record, held, joined);
             const write = holds(undefined);
-            if (write)
+            // Into the table when it belongs in the list on screen; out of it when an edit took it elsewhere - to another
+            // record of a narrowed list's, say. Another list's record, saved while this one shows, never goes in.
+            if (write && shownMember(record))
                 table.upsert(record);
+            else if (write && key && table.getRow(key))
+                table.remove([key]);
             patchMarked([record]);
-            afterChange("edit", [record], key ? [{ key, row: record, before }] : [], write);
+            afterChange("edit", [record], key ? [{ key, row: record, before: held }] : [], write);
+            if (key && api.details && crudJoinsMissing(record, held, latest.current.columns))
+                void fillSaved(key, record, asked);
             return;
         }
-        // A new record belongs to the list of every record. An answer that is only the new key still gives it one, so
-        // the row goes in and the record is read back on its own; without even a key the list has to load again.
-        if (!answered && !readPath(record, rowKey)) {
-            const given = backend.answeredKey(result);
-            if (given !== null && !rowKey.includes("."))
-                record[rowKey] = given;
-        }
+        record = finished(action, record, undefined, joined);
+        // A new record belongs to the list of every record - in a narrowed list, of the record it names, which may no longer
+        // be the one picked when its form was opened; without even a key the lists are dropped and the one on screen loads
+        // again (`syncCaches`).
         const key = table.keyOf(record);
-        // Without a key the lists are dropped and the one on screen loads again (`syncCaches`).
         const write = Boolean(key) && holds(undefined);
-        if (write && shown === "normal")
+        if (write && shown === "normal" && inScope(record))
             table.upsert(record);
         afterChange("create", [record], key ? [{ key, row: record, before: undefined }] : [], write);
-        // The fields only the server knows - the status, the times - are read once, for this one record, when the answer
-        // did not carry them: a bare key, or the payload sent back (no list can place a record without its status).
-        if (key && api.details && (!answered || member(record, "normal") === undefined))
-            void fillSaved(key, record);
+        // Read back only what the page cannot finish: a list unknown (no list can place a record without it), or a name.
+        if (key && api.details && (member(record, "normal") === undefined || crudJoinsMissing(record, undefined, latest.current.columns)))
+            void fillSaved(key, record, asked);
     }
     /** A record's history, in a popup of its own: one per record, brought back if it is open. */
     function openHistory(row) {
@@ -752,57 +928,190 @@ export function Crud(props) {
         if (details === false)
             return;
         const key = table.keyOf(row);
-        const canEdit = allowed.edit && modeRef.current !== undefined && CRUD_ROW_ACTIONS[modeRef.current].includes("edit");
+        const canEdit = allowed.edit && modeRef.current !== undefined && CRUD_ROW_ACTIONS[modeRef.current].includes("edit") && !actionLockOf(row, "edit");
         const endpoint = api.details;
         const status = detailsLoad(endpoint ? "loading" : "done");
+        // A record's workspace: a profile and tabs, the details one tab among the page's own (`details.tabs`, `profile`).
+        const workspace = Boolean(details?.tabs || details?.profile);
         // The panel's record: the row at once, so it has something to show while the full one loads, and that one after.
-        const shown = typeof details?.aside === "function" ? new FormStore() : null;
+        const shown = typeof details?.aside === "function" || workspace ? new FormStore() : null;
+        // The forms a workspace's tabs draw: closing it with changes in one asks first, as a CRUD form's popup does.
+        const guard = new FormLeaveGuard();
+        const leave = () => confirmLeaving(guard);
         shown?.load(row, { draft: false });
         const aside = typeof details?.aside === "function" ? details.aside({ form: shown, row }) : details?.aside;
-        openPopup({
+        const idOf = () => rawKey(row);
+        // The scope the details were opened on, and its props: a refresh that lands after a switch is that scope's, and so is
+        // an Edit pressed in them.
+        const asked = scopeIdRef.current;
+        const opened = { asked, props: latest.current };
+        // The record from the details endpoint, over the row; a panel's record is loaded only when it adds something, since a
+        // panel that renders from the record would otherwise ask again for exactly what it is already showing.
+        const readDetails = (signal) => {
+            const loading = browserApi
+                .get(endpoint, { params: { id: idOf(), [rowKey]: idOf() }, signal, toast: false })
+                .then(unwrapApiResult)
+                .then(full => {
+                if (shown && isRecord(full) && addsToRow(row, full))
+                    shown.load({ ...row, ...full }, { draft: false });
+                return full;
+            });
+            // The footer follows the very promise the details do, with the same test for a popup closed meanwhile.
+            void loading.then(() => status.set("done"), error => {
+                if (!signal.aborted && !isAbortError(error))
+                    status.set("failed");
+            });
+            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, 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.
+        const reading = new AbortController();
+        let pending;
+        const startReading = () => (pending ??= readDetails(reading.signal));
+        const refresh = async () => {
+            if (!endpoint)
+                return table.getRow(key) ?? shown.getValue();
+            const answer = await browserApi.get(endpoint, { params: { id: idOf(), [rowKey]: idOf() } });
+            const full = answer.ok ? answer.result : null;
+            if (!isRecord(full))
+                return null;
+            // The record as the page holds it when the answer lands: the table's row, or, off the page shown (from the pinned
+            // band, a page turned since), the popup's.
+            const held = table.getRow(key) ?? shown.getValue();
+            // Into the table, the marks and every list kept, as an edit's answer is; and into every tree that shows the record.
+            const next = { ...held, ...full };
+            shown.load({ ...shown.getValue(), ...full }, { draft: false });
+            run.current.applyRows([next], false, new Map([[key, held]]), asked);
+            for (const tree of latest.current.trees ?? [])
+                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",
             title: `${capitalize(subject)} ${details?.label ?? "details"}`,
             description: labelOf(row),
             icon: _jsx(InlineIcon, { icon: iconEye }),
-            size: details?.size ?? "md",
-            // Focus goes where it goes without a panel, the footer, rather than to the first button the panel happens to
-            // draw: a panel that renders at once (a Copy button) would otherwise take it, and one that loads would not.
-            initialFocus: aside ? ".nx-popup__foot button" : undefined,
-            content: (_jsx(CrudFormBody, { aside: aside, details: true, children: _jsx(CrudDetails, { row: row, columns: details?.columns ?? latest.current.columns, render: details?.render, load: endpoint
-                        ? signal => {
-                            const loading = browserApi
-                                .get(endpoint, { params: { id: rawKey(row), [rowKey]: rawKey(row) }, signal, toast: false })
-                                .then(unwrapApiResult)
-                                .then(full => {
-                                // Only when it adds something: a panel that renders from the record would otherwise ask again
-                                // for exactly what it is already showing.
-                                if (shown && isRecord(full) && addsToRow(row, full))
-                                    shown.load({ ...row, ...full }, { draft: false });
-                                return full;
-                            });
-                            // The footer follows the very promise the details do, with the same test for a popup closed meanwhile.
-                            void loading.then(() => status.set("done"), error => {
-                                if (!signal.aborted && !isAbortError(error))
-                                    status.set("failed");
-                            });
-                            return loading;
-                        }
-                        : 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: () => {
-                            popup.close();
-                            void openForm("edit", table.getRow(key) ?? row);
-                        }, children: "Edit" })), _jsx(Button, { variant: "primary", onClick: () => popup.close(), children: "Close" })] })),
+            // A workspace is wide: a column of its own, and beside it a tab that holds a form or a list of its own.
+            size: details?.size ?? (details?.tabs ? "full" : "md"),
+            // The workspace meets the popup's edges: its column runs from the title bar to the footer.
+            flush: workspace,
+            // Focus goes to the chosen tab in a workspace. Elsewhere it goes where it goes without a panel, the footer, rather
+            // than to the first button the panel happens to draw: a panel that renders at once (a Copy button) would otherwise
+            // take it, and one that loads would not.
+            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, reread) => fields(shown.getValue(), endpoint && status.get() !== "done" ? () => startReading() : undefined, without, reread), onTab: tab => onTab(tab, popup) }))
+                : fields(row, endpoint ? readDetails : undefined),
+            footer,
+        });
+        void handle.closed.then(() => reading.abort());
+    }
+    /** A record as the CRUD holds it now: the table's row, else one of the lists kept, else a marked section's. */
+    function heldRecord(key) {
+        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.
+     * `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;
+        openCrudRowForm({
+            form,
+            row,
+            key,
+            id: form.target ? form.target(row) : rawKey(row),
+            rowKey,
+            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?.();
+            },
         });
     }
+    /**
+     * Fields a row form's answer changed, merged over the record as the CRUD holds it when the answer lands - never over
+     * the record as the form was opened on, which an Edit since may have changed - and written wherever it is held, as the
+     * handle's `apply` writes. A record held nowhere (another page, a list not kept) has nothing to write into.
+     */
+    function writeRow(key, patch, asked) {
+        if (answeredElsewhere(asked))
+            return undefined;
+        const held = heldRecord(key);
+        if (!held)
+            return undefined;
+        const next = { ...held, ...patch };
+        applyRows([next], false, new Map([[key, held]]));
+        return next;
+    }
     function openDescription(rows) {
         const endpoint = api.mass?.description;
         if (!endpoint)
             return;
         const form = new FormStore();
         const count = rows.length;
+        const asked = scopeIdRef.current;
         openPopup({
             key: `${name}-description`,
             title: "Description",
@@ -811,8 +1120,8 @@ export function Crud(props) {
             size: "sm",
             closeOnBackdrop: false,
             beforeClose: () => confirmDiscard(form),
-            content: popup => (_jsx(ApiForm, { form: form, buttons: false, inputs: [{ type: "textarea", name: "description", label: "Description", maxLength: 500, rows: 4, showCount: true }], api: endpoint, transform: values => backend.massRequest("description", rows.map(rawKey), values), "aria-label": `Description of ${count} ${count === 1 ? subject : plural}`, onSuccess: (result, values) => {
-                    applyChange("description", rows, { result, mass: true, values });
+            content: popup => (_jsx(ApiForm, { form: form, buttons: false, inputs: [{ type: EInputTypes.TextArea, name: "description", label: "Description", maxLength: 500, rows: 4, showCount: true }], api: endpoint, transform: values => backend.massRequest("description", rows.map(rawKey), values), "aria-label": `Description of ${count} ${count === 1 ? subject : plural}`, onSuccess: (result, values) => {
+                    applyChange("description", rows, { result, mass: true, values, asked });
                     table.clearSelection();
                     popup.close();
                 } })),
@@ -820,8 +1129,8 @@ export function Crud(props) {
         });
     }
     // Row actions and the handle call these through a ref, so the table's callbacks stay the same between renders.
-    const run = useRef({ runRowAction, runMassAction, switchMark, switchMarkMany, switchFlagMany, openForm, openDetails, openHistory, applyRows });
-    run.current = { runRowAction, runMassAction, switchMark, switchMarkMany, switchFlagMany, openForm, openDetails, openHistory, applyRows };
+    const run = useRef({ runRowAction, runMassAction, switchMark, switchMarkMany, switchFlagMany, openForm, openDetails, openHistory, applyRows, onSaved, openRowForm, writeRow, heldRecord });
+    run.current = { runRowAction, runMassAction, switchMark, switchMarkMany, switchFlagMany, openForm, openDetails, openHistory, applyRows, onSaved, openRowForm, writeRow, heldRecord };
     /* The table's callbacks */
     const rowActions = useCallback((row) => {
         if (!mode)
@@ -838,15 +1147,15 @@ export function Crud(props) {
         };
         const info = {
             view: { label: `View ${(latest.current.details || undefined)?.label ?? "details"}`, icon: _jsx(InlineIcon, { icon: iconEye }) },
-            edit: { label: "Edit", icon: _jsx(InlineIcon, { icon: iconPencil }), inline: true },
+            edit: { ...crudActionEntry("edit"), inline: true },
             flag: flagged ? { label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }) } : { label: "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }) },
             pin: markEntry("pin"),
             favorite: markEntry("favorite"),
-            history: { label: "History", icon: _jsx(InlineIcon, { icon: iconHistory }) },
-            trash: { label: "Move to trash", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" },
-            recover: { label: "Recover", description: "Back to the active list", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), inline: true },
-            delete: { label: "Delete permanently", icon: _jsx(InlineIcon, { icon: iconTrashX }), tone: "danger" },
-            trashFromDelete: { label: "Move back to trash", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), inline: true },
+            history: crudActionEntry("history"),
+            trash: crudActionEntry("trash"),
+            recover: { ...crudActionEntry("recover"), inline: true },
+            delete: crudActionEntry("delete"),
+            trashFromDelete: { ...crudActionEntry("trashFromDelete"), inline: true },
         };
         for (const action of crudRowActions(mode, candidate => allowed[candidate], trashless)) {
             if (action === "view" && latest.current.details === false)
@@ -854,6 +1163,14 @@ export function Crud(props) {
             // A record the backend will not flag either way (a pending one) is offered neither.
             if (action === "flag" && !backend.canFlag(row))
                 continue;
+            // Listed rather than left out, so the menu says why the record cannot change instead of looking short; in the
+            // menu, not on the row, since a switched-off icon button could not say it.
+            // One action's own lock (`rowActionLock`) is listed the same way, beside the actions that still run.
+            const locked = actionLockOf(row, action);
+            if (locked) {
+                list.push({ ...info[action], id: action, inline: false, disabled: true, description: locked, onSelect: () => undefined });
+                continue;
+            }
             const onSelect = action === "view"
                 ? () => run.current.openDetails(row)
                 : action === "edit"
@@ -866,22 +1183,40 @@ export function Crud(props) {
             const entry = info[action];
             list.push({ ...entry, id: action, inline: entry.inline && (primary ? action === "edit" : true), onSelect });
         }
+        // The page's own forms on a record (`rowForms`), where offered; one locked for it is listed switched off, saying why.
+        for (const form of latest.current.rowForms ?? []) {
+            if (!crudRowFormOffered(form, row, mode, can))
+                continue;
+            const locked = form.lock?.(row) || null;
+            list.push({
+                id: form.id,
+                label: form.label,
+                icon: form.icon,
+                description: locked ?? form.description,
+                inline: Boolean(form.inline) && !locked,
+                disabled: Boolean(locked),
+                onSelect: locked ? () => undefined : () => run.current.openRowForm(form, row),
+            });
+        }
         const extra = latest.current.rowActions?.(row, mode) ?? [];
         return [...list, ...extra];
-    }, [mode, allowed, backend, trashless, marksOf, marksWait]);
+    }, [mode, allowed, backend, trashless, marksOf, marksWait, can]);
     const massActionsFor = useCallback((rows) => {
         if (!mode)
             return [];
         const list = [];
         const marks = rows.map(marksOf);
+        // A locked record in the selection switches off every action that would change it (`rowLock`), and one whose own
+        // lock refuses an action (`rowActionLock`) switches that action off.
+        const holdsLocked = (action) => rows.some(row => Boolean(actionLockOf(row, action)));
         for (const action of crudMassActions(mode, candidate => massAllowed[candidate], massTrashless)) {
             if (action === "flag") {
                 // The same for the flag: Flag while one of them can be flagged, Unflag while one of them is.
                 const flaggable = rows.filter(row => backend.canFlag(row));
                 if (flaggable.some(row => !backend.isFlagged(row)))
-                    list.push({ id: "flag", label: "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }), onSelect: selected => run.current.switchFlagMany(selected, true) });
+                    list.push({ id: "flag", label: "Flag", icon: _jsx(InlineIcon, { icon: iconFlag }), disabled: holdsLocked("flag"), onSelect: selected => run.current.switchFlagMany(selected, true) });
                 if (flaggable.some(row => backend.isFlagged(row)))
-                    list.push({ id: "unflag", label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }), onSelect: selected => run.current.switchFlagMany(selected, false) });
+                    list.push({ id: "unflag", label: "Unflag", icon: _jsx(InlineIcon, { icon: iconFlagOff }), disabled: holdsLocked("flag"), onSelect: selected => run.current.switchFlagMany(selected, false) });
                 continue;
             }
             if (action === "pin" || action === "favorite") {
@@ -903,7 +1238,7 @@ export function Crud(props) {
                 trashFromDelete: { label: "Move back to trash", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }) },
                 description: { label: "Description", icon: _jsx(InlineIcon, { icon: iconNotes }) },
             };
-            list.push({ ...info[action], id: action, onSelect });
+            list.push({ ...info[action], id: action, disabled: holdsLocked(action), onSelect });
         }
         const extra = latest.current.massActions ? latest.current.massActions(rows, mode) : [];
         return [...list, ...extra];
@@ -920,8 +1255,12 @@ export function Crud(props) {
             return modeRef.current ?? "normal";
         },
         setMode: next => setChosenMode(next),
+        get scope() {
+            return scopeIdRef.current || null;
+        },
+        setScope: next => chooseScope.current(next),
         reload: () => {
-            cache.clear();
+            clearCaches();
             reloadMarks();
             return table.reload({ quiet: true });
         },
@@ -929,8 +1268,15 @@ export function Crud(props) {
         create: values => void run.current.openForm("create", null, values),
         edit: row => void run.current.openForm("edit", row),
         view: row => run.current.openDetails(row),
-    }), [table, cache, reloadMarks]);
-    const tableLabel = props["aria-label"] ?? (props["aria-labelledby"] ? undefined : capitalize(plural));
+        openRowForm: (formId, row) => {
+            const form = latest.current.rowForms?.find(entry => entry.id === formId);
+            if (form)
+                run.current.openRowForm(form, row);
+        },
+    }), [table, clearCaches, reloadMarks]);
+    const ownLabel = props["aria-label"] ?? (props["aria-labelledby"] ? undefined : capitalize(plural));
+    // A narrowed table is named with the record it shows the records of: "Places: Ram Thapa".
+    const tableLabel = ownLabel && narrowing && narrowing.value !== null ? `${ownLabel}: ${narrowing.label}` : ownLabel;
     const configured = CRUD_MODES.some(value => wantedModes.includes(value) && crudListEndpoint(api, value, paging));
     if (!configured) {
         return (_jsx("div", { id: id, className: cx("nx-crud", "nx-crud--denied", className), style: style, role: "alert", children: _jsxs("p", { className: "nx-crud__denied-title", children: ["Nothing to show: no ", paging === "server" ? "`pages`" : "`lists`", " endpoint for the ", plural, "."] }) }));
@@ -938,8 +1284,32 @@ export function Crud(props) {
     if (ready && !mode) {
         return (_jsxs("div", { id: id, className: cx("nx-crud", "nx-crud--denied", className), style: style, role: "status", children: [_jsx(InlineIcon, { icon: iconLock, className: "nx-crud__denied-icon" }), _jsxs("p", { className: "nx-crud__denied-title", children: ["You do not have permission to see ", plural, "."] }), _jsx("p", { className: "nx-crud__denied-detail", children: "Ask an administrator for access." })] }));
     }
+    // The switch (or tabs) between the CRUD's own list and its scopes, while one is offered. It is drawn before the kept
+    // choice is read too (on the CRUD's own list), so the bar does not move when it is.
+    const scopeControl = scoping.offered.length > 0 ? _jsx(CrudScopeControl, { scopes: given.scopes, state: scoping, plural: plural }) : null;
     const modeOptions = modes.map(value => ({ value, label: MODE_INFO[value].label, icon: _jsx(InlineIcon, { icon: MODE_INFO[value].icon }) }));
-    const add = allowed.create ? { label: `Add ${subject}`, onClick: () => void run.current.openForm("create", null) } : undefined;
+    // One fixed label on every CRUD's list, whatever its subject (the owner, 2026-10-10); the form it opens says "Add <subject>".
+    // A narrowed list's Add says for whom on its tooltip, and while it cannot add, why, on a press.
+    const addLock = narrowedAddLock();
+    const add = allowed.create
+        ? {
+            label: CRUD_ACTION_WORDS.create.label,
+            onClick: () => void run.current.openForm("create", null),
+            disabled: addLock !== null,
+            description: addLock ?? (narrowing ? `Adds a new ${subject} for ${narrowing.label}.` : undefined),
+            // Nothing picked in the CRUD's own box: a press sends the cursor there, rather than a note under Add.
+            onDisabledPress: () => narrowPicker.askForAdd(),
+        }
+        : undefined;
+    const nonePicked = narrowing !== null && narrowing.value === null;
+    /** What the list says when it has no rows: a narrowed one with nothing picked asks for a pick, and names whose list is empty. */
+    const emptyMessage = (shown) => {
+        if (nonePicked)
+            return props.narrow?.emptyMessage ?? pickWords.empty;
+        if (narrowing && shown === "normal")
+            return `${narrowing.label} has no ${plural} yet.`;
+        return MODE_INFO[shown].empty(plural);
+    };
     // In the main list, select again by mark and by flag, the way the mass actions act on them - marks once they are known.
     const markSelects = (mark, label, otherwise) => massAllowed[mark] && !marksWait
         ? [
@@ -966,22 +1336,33 @@ export function Crud(props) {
             key: MARK_INFO[mark].section,
             label: `${MARK_INFO[mark].title} ${plural}`,
             icon: MARK_INFO[mark].icon,
-            rows: marked?.rows[mark] ?? [],
+            // A narrowed list's sections hold the picked record's marked records alone, as its list does.
+            rows: (marked?.rows[mark] ?? []).filter(inScope),
             loading: marksState === "loading",
             max: markLimit(mark),
         }))
         : undefined;
-    return (_jsx("div", { id: id, className: cx("nx-crud", className), style: style, "data-mode": mode, children: _jsx(DataTable, { table: table, columns: columns, load: load, loadKey: mode ?? "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: props.toolbar, add: add, selectable: selectable, massActions: massActionsFor, selectBy: selectBy, rowActions: rowActions, sections: sections, rowMarks: marksShown ? rowMarks : undefined, onRowOpen: onRowOpen, openOnClick: tableOptions?.openOnClick, onReload: () => {
-                cache.clear();
+    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 ? MODE_INFO[mode].empty(plural) : undefined), emptyAction: mode === "normal" ? undefined : null, searchPlaceholder: tableOptions?.searchPlaceholder ?? `Search ${plural}…`, stateKey: tableOptions?.stateKey ?? `crud:${name}`, pageSize: tableOptions?.pageSize, pageSizes: tableOptions?.pageSizes, defaultSort: tableOptions?.defaultSort, numbered: tableOptions?.numbered, maxHeight: tableOptions?.maxHeight, fill: tableOptions?.fill, size: tableOptions?.size, maxSelection: tableOptions?.maxSelection, columnsMenu: tableOptions?.columnsMenu, searchDelay: tableOptions?.searchDelay, filterInputs: tableOptions?.filterInputs, reorderable: tableOptions?.reorderable, resizable: tableOptions?.resizable, pinnable: tableOptions?.pinnable, moreActions: tableOptions?.moreActions, exportable: tableOptions?.exportable, printable: tableOptions?.printable, exportName: tableOptions?.exportName, onImport: tableOptions?.onImport, excel: tableOptions?.excel && {
+            }, emptyMessage: tableOptions?.emptyMessage ?? (mode ? emptyMessage(mode) : undefined), 
+            // A list that asks for a pick in the CRUD's own box points at it: its button takes the cursor there.
+            emptyAction: nonePicked ? narrowPicker.pickButton : mode === "normal" ? undefined : null, searchPlaceholder: tableOptions?.searchPlaceholder ?? `Search ${plural}…`, stateKey: crudScopeStateKey(given.table?.stateKey ?? `crud:${name}`, scoping.scope), currency: tableOptions?.currency, pager: tableOptions?.pager, pageSize: tableOptions?.pageSize, pageSizes: tableOptions?.pageSizes, defaultSort: tableOptions?.defaultSort, numbered: tableOptions?.numbered, maxHeight: tableOptions?.maxHeight, fill: tableOptions?.fill, size: tableOptions?.size, maxSelection: tableOptions?.maxSelection, columnsMenu: tableOptions?.columnsMenu, searchDelay: tableOptions?.searchDelay, filterInputs: tableOptions?.filterInputs, reorderable: tableOptions?.reorderable, resizable: tableOptions?.resizable, pinnable: tableOptions?.pinnable, moreActions: tableOptions?.moreActions, exportable: tableOptions?.exportable, printable: tableOptions?.printable, exportName: tableOptions?.exportName, onImport: tableOptions?.onImport, excel: tableOptions?.excel && {
                 ...tableOptions.excel,
-                // The export writes the list on screen, as the backend names that list; the page's own filters win a clash.
-                filters: () => ({ ...backend.exportFilters(modeRef.current ?? "normal"), ...tableOptions.excel?.filters?.() }),
+                // The export writes the list on screen, as the backend names that list - a narrowed one by its record, as its
+                // pages are asked for; the page's own filters win a clash.
+                filters: () => {
+                    const narrowed = narrowingRef.current;
+                    const own = narrowed && narrowed.value !== null ? { [narrowed.key]: narrowed.raw } : {};
+                    return { ...backend.exportFilters(modeRef.current ?? "normal"), ...own, ...tableOptions.excel?.filters?.() };
+                },
                 // A spreadsheet wrote records straight into the database: every list this CRUD kept is out of date.
                 onImported: () => {
-                    cache.clear();
+                    clearCaches();
                     reloadMarks();
+                    // Records nobody here has seen: a tree elsewhere cannot have them written in, so its pages go.
+                    for (const tree of latest.current.trees ?? [])
+                        expireTreePages(tree.cacheKey);
                     tableOptions.excel?.onImported?.();
                 },
             } }) }));