nexus-shared 3.1.0 → 3.2.0

package/dist/Components/Layouts/ThemePicker.d.ts

@@ -13,8 +13,9 @@ export interface ThemePickerProps {
     className?: string;
 }
 /**
- * Light / Dark / System, a card per theme with a live preview of its colors, the density, the animations and, in a
- * development build, the scale grid. Each choice applies at once and is saved in the browser.
+ * Two sections: the theme (Light / Dark / System and a card per theme with a live preview of its colors) and the
+ * appearance (the density, the animations and, in a development build, the scale grid). Each choice applies at once
+ * and is saved in the browser.
  */
 export declare function ThemePicker({ themes, showMode, showDensity, showAnimations, showGrid, className }: ThemePickerProps): import("react").JSX.Element;
 export interface PreferencesPickerProps {

package/dist/Components/Layouts/ThemePicker.js

@@ -15,6 +15,7 @@ import { useTheme } from "../../Services/ThemeService.js";
 import { TabButtons } from "../Documents/TabButtons.js";
 import { Switch } from "../Inputs/CheckBox.js";
 import { Dropdown } from "../Inputs/Dropdown.js";
+import { TextBox } from "../Inputs/TextBox.js";
 const MODES = [
     { value: "light", label: "Light", icon: _jsx(InlineIcon, { icon: iconSun }) },
     { value: "dark", label: "Dark", icon: _jsx(InlineIcon, { icon: iconMoon }) },
@@ -38,14 +39,20 @@ const GRIDS = [
 function Choice({ id, legend, options, value, onChange, children }) {
     return (_jsxs("div", { className: "nx-theme-picker__group", children: [_jsx("p", { id: id, className: "nx-theme-picker__legend", children: legend }), children ?? (options && value !== undefined && onChange && _jsx(TabButtons, { "aria-labelledby": id, name: id, options: options, value: value, onChange: onChange, block: true }))] }));
 }
+/** A group of settings under its name: one section of the panel, a line above it. */
+function Section({ title, wide, children }) {
+    const id = useId();
+    return (_jsxs("section", { className: cx("nx-theme-picker__block", wide && "nx-theme-picker__block--wide"), "aria-labelledby": id, children: [_jsx("h3", { id: id, className: "nx-theme-picker__section", children: title }), children] }));
+}
 /**
- * Light / Dark / System, a card per theme with a live preview of its colors, the density, the animations and, in a
- * development build, the scale grid. Each choice applies at once and is saved in the browser.
+ * Two sections: the theme (Light / Dark / System and a card per theme with a live preview of its colors) and the
+ * appearance (the density, the animations and, in a development build, the scale grid). Each choice applies at once
+ * and is saved in the browser.
  */
 export function ThemePicker({ themes = NEXUS_THEMES, showMode = true, showDensity = true, showAnimations = true, showGrid = isDevelopmentBuild(), className }) {
     const { theme, mode, density, animations, grid, setTheme, setMode, setDensity, setAnimations, setGrid } = useTheme();
     const name = useId();
-    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [showMode && _jsx(Choice, { id: `${name}-mode`, legend: "Mode", options: MODES, value: mode, onChange: setMode }), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Theme" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] }), showDensity && _jsx(Choice, { id: `${name}-density`, legend: "Density", options: DENSITIES, value: density, onChange: setDensity }), showAnimations && _jsx(Choice, { id: `${name}-animations`, legend: "Animations", options: ANIMATIONS, value: animations, onChange: setAnimations }), showGrid && _jsx(Choice, { id: `${name}-grid`, legend: "Scale grid", options: GRIDS, value: grid, onChange: setGrid })] }));
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsxs(Section, { title: "Theme", wide: true, children: [showMode && _jsx(Choice, { id: `${name}-mode`, legend: "Mode", options: MODES, value: mode, onChange: setMode }), _jsxs("fieldset", { className: "nx-theme-picker__group", children: [_jsx("legend", { className: "nx-theme-picker__legend", children: "Colors" }), _jsx("div", { className: "nx-theme-picker__grid", children: themes.map(option => (_jsxs("label", { className: "nx-theme-option", title: option.description, children: [_jsx("input", { type: "radio", className: "nx-visually-hidden", name: `${name}-theme`, value: option.id, checked: theme === option.id, onChange: () => setTheme(option.id) }), _jsx("span", { className: "nx-theme-option__preview", "data-nx-theme": option.id, "aria-hidden": "true", children: _jsxs("span", { className: "nx-theme-option__window", children: [_jsx("span", { className: "nx-theme-option__line" }), _jsx("span", { className: "nx-theme-option__line nx-theme-option__line--muted" }), _jsxs("span", { className: "nx-theme-option__swatches", children: [_jsx("span", { className: "nx-theme-option__pill" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--success" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--warning" }), _jsx("span", { className: "nx-theme-option__dot nx-theme-option__dot--danger" })] })] }) }), _jsxs("span", { className: "nx-theme-option__name", children: [option.name, _jsx(InlineIcon, { icon: iconCheck, className: "nx-theme-option__check" })] })] }, option.id))) })] })] }), (showDensity || showAnimations || showGrid) && (_jsxs(Section, { title: "Appearance", children: [showDensity && _jsx(Choice, { id: `${name}-density`, legend: "Density", options: DENSITIES, value: density, onChange: setDensity }), showAnimations && _jsx(Choice, { id: `${name}-animations`, legend: "Animations", options: ANIMATIONS, value: animations, onChange: setAnimations }), showGrid && _jsx(Choice, { id: `${name}-grid`, legend: "Scale grid", options: GRIDS, value: grid, onChange: setGrid })] }))] }));
 }
 /* The quick preferences: language, dates, numbers and tables, beside the theme. */
 const LANGUAGES = [
@@ -75,6 +82,11 @@ const SEPARATORS = [
     { value: "none", label: "1200", title: "None" },
 ];
 const PAGE_SIZES = DEFAULT_PAGE_SIZES.map(size => ({ value: size, label: `${size} rows` }));
+const DESIGNS = [
+    { value: "standard", label: "Standard", title: "The label above the box" },
+    { value: "outlined", label: "Outlined", title: "The label on the box's edge" },
+    { value: "inbox", label: "Inbox", title: "The label inside the top of the box" },
+];
 // A fixed day, so the server and the browser write the same examples, and one past the 12th, so day and month differ.
 const SAMPLE_DATE = "2026-09-27";
 /**
@@ -89,5 +101,5 @@ export function PreferencesPicker({ className }) {
     const preferences = useUserPreferences();
     const name = useId();
     const formats = DATE_FORMATS.map(format => ({ value: format, label: formatDate(SAMPLE_DATE, { ...dates, format }), description: format }));
-    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsx("h3", { className: "nx-theme-picker__section", children: "Language and region" }), _jsx(Choice, { id: `${name}-language`, legend: "Interface language", options: LANGUAGES, value: preferences.language, onChange: language => setUserPreferences({ language }) }), _jsx(Choice, { id: `${name}-calendar`, legend: "Calendar", options: CALENDARS, value: dates.calendar, onChange: calendar => setDatePreferences({ calendar }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Dates and times" }), _jsx(Choice, { id: `${name}-script`, legend: "Date picker language", options: SCRIPTS, value: dates.script, onChange: script => setDatePreferences({ script }) }), _jsx(Choice, { id: `${name}-clock`, legend: "Clock", options: CLOCKS, value: /H/.test(dates.timeFormat) ? "24" : "12", onChange: clock => setDatePreferences({ timeFormat: clock === "24" ? "HH:mm" : DEFAULT_TIME_FORMAT }) }), _jsx(Choice, { id: `${name}-format`, legend: "Display date format", children: _jsx(Dropdown, { "aria-labelledby": `${name}-format`, options: formats, value: dates.format, clearable: false, searchable: false, onValueChange: format => format && setDatePreferences({ format }) }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Numbers" }), _jsx(Choice, { id: `${name}-scale`, legend: "Number scale", options: SCALES, value: String(preferences.numberScale), onChange: scale => setUserPreferences({ numberScale: Number(scale) === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : ENumberScales.International }) }), _jsx(Choice, { id: `${name}-thousands`, legend: "Thousands separator", options: SEPARATORS, value: preferences.thousands, onChange: thousands => setUserPreferences({ thousands }) }), _jsx("h3", { className: "nx-theme-picker__section", children: "Tables" }), _jsx(Choice, { id: `${name}-page-size`, legend: "Default page size", children: _jsx(Dropdown, { "aria-labelledby": `${name}-page-size`, options: PAGE_SIZES, value: preferences.pageSize ?? DEFAULT_PAGE_SIZE, clearable: false, searchable: false, onValueChange: pageSize => pageSize && setUserPreferences({ pageSize }) }) }), _jsx(Switch, { label: "A row click opens the record", labelPosition: "start", checked: preferences.rowClick ?? false, onValueChange: rowClick => setUserPreferences({ rowClick }) })] }));
+    return (_jsxs("div", { className: cx("nx-theme-picker", className), children: [_jsxs(Section, { title: "Language and region", children: [_jsx(Choice, { id: `${name}-language`, legend: "Interface language", options: LANGUAGES, value: preferences.language, onChange: language => setUserPreferences({ language }) }), _jsx(Choice, { id: `${name}-calendar`, legend: "Calendar", options: CALENDARS, value: dates.calendar, onChange: calendar => setDatePreferences({ calendar }) })] }), _jsxs(Section, { title: "Dates and times", children: [_jsx(Choice, { id: `${name}-script`, legend: "Date picker language", options: SCRIPTS, value: dates.script, onChange: script => setDatePreferences({ script }) }), _jsx(Choice, { id: `${name}-clock`, legend: "Clock", options: CLOCKS, value: /H/.test(dates.timeFormat) ? "24" : "12", onChange: clock => setDatePreferences({ timeFormat: clock === "24" ? "HH:mm" : DEFAULT_TIME_FORMAT }) }), _jsx(Choice, { id: `${name}-format`, legend: "Display date format", children: _jsx(Dropdown, { "aria-labelledby": `${name}-format`, options: formats, value: dates.format, clearable: false, searchable: false, onValueChange: format => format && setDatePreferences({ format }) }) })] }), _jsxs(Section, { title: "Numbers", children: [_jsx(Choice, { id: `${name}-scale`, legend: "Number scale", options: SCALES, value: String(preferences.numberScale), onChange: scale => setUserPreferences({ numberScale: Number(scale) === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : ENumberScales.International }) }), _jsx(Choice, { id: `${name}-thousands`, legend: "Thousands separator", options: SEPARATORS, value: preferences.thousands, onChange: thousands => setUserPreferences({ thousands }) })] }), _jsxs(Section, { title: "Tables", children: [_jsx(Choice, { id: `${name}-page-size`, legend: "Default page size", children: _jsx(Dropdown, { "aria-labelledby": `${name}-page-size`, options: PAGE_SIZES, value: preferences.pageSize ?? DEFAULT_PAGE_SIZE, clearable: false, searchable: false, onValueChange: pageSize => pageSize && setUserPreferences({ pageSize }) }) }), _jsx(Switch, { label: "A row click opens the record", labelPosition: "start", checked: preferences.rowClick ?? false, onValueChange: rowClick => setUserPreferences({ rowClick }) })] }), _jsxs(Section, { title: "Forms", children: [_jsx(Choice, { id: `${name}-design`, legend: "Input design", options: DESIGNS, value: preferences.inputDesign ?? "standard", onChange: inputDesign => setUserPreferences({ inputDesign }) }), _jsx(TextBox, { label: "Example", placeholder: "Type to try it" })] })] }));
 }

package/dist/Components/Viewers/DataTable.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChecks, iconChevronDown, iconColumns3, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconFilter, iconFilterOff, iconPinnedOff, iconPlus, iconPrinter, iconRefresh, iconRestore, iconRowInsertBottom, iconSearch, iconSearchOff, iconSortAscending, iconSortDescending, iconX, InlineIcon, } from "nexus-icons";
+import { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChecks, iconChevronDown, iconColumns3, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconFilter, iconFilterOff, iconPin, iconPinnedOff, iconPlus, iconPrinter, iconRefresh, iconRestore, iconRowInsertBottom, iconSearch, iconSearchOff, iconSortAscending, iconSortDescending, iconX, InlineIcon, } from "nexus-icons";
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { flushSync } from "react-dom";
 import { cx } from "../../Helpers/ClassHelpers.js";
@@ -8,6 +8,7 @@ import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePrefer
 import { fitColumnWidth, headLeafCells, startColumnDrag, startColumnResize } from "../../Helpers/TableColumns.js";
 import { exportTableCsv, printTable } from "../../Helpers/TableExport.js";
 import { asFilterInput, filterNames, filterRequest } from "../../Helpers/TableFilters.js";
+import { joinKeys, joinSourceName, tableJoins } from "../../Helpers/TableJoins.js";
 import { canPinColumn, columnAlign, columnValue, cssLength, DEFAULT_MAX_SELECTION, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, formatCellText, headBands, MIN_COLUMN_WIDTH, orderColumns, TABLE_ACTIONS_COLUMN, TABLE_INDEX_COLUMN, viewColumns, } from "../../Helpers/TableHelpers.js";
 import { TableStore } from "../../Helpers/TableStore.js";
 import { readUserPreferences, useNumberLocale, useUserPreferences } from "../../Helpers/UserPreferences.js";
@@ -17,14 +18,15 @@ import { SplitButton } from "../Documents/SplitButton.js";
 import { TextBox } from "../Inputs/TextBox.js";
 import { toast } from "../Layouts/Toaster.js";
 import { downloadExcelTemplate, exportExcel } from "../../Services/ExcelApi.js";
+import { joinSource } from "../../Services/JoinSources.js";
 import { openExcelImport } from "../Forms/ExcelImport.js";
 import { TableColumnsPanel } from "./DataTableColumns.js";
 import { TableFiltersPanel } from "./DataTableFilters.js";
-import { columnStyle, formatCount, TableColumnGroup, TableFooter, TableIndexCell, TableMessageRow, TablePageSize, TablePinnedHead, TableRowView, TableSkeletonRows, } from "./DataTableParts.js";
+import { columnStyle, formatCount, TableColumnGroup, TableFooter, TableIndexCell, TableMessageRow, TablePageSize, TableRowView, TableSectionHead, TableSkeletonRows, } from "./DataTableParts.js";
 /*
  * DataTable: rows in a table with a search, sorting by column, pages, a selection with actions on the selected rows,
  * actions on each row, and columns the user arranges (shown or hidden, in any order, resized, pinned to a side). Rows
- * given as `pinnedRows` sit in a section above the page that folds open and shut. Rows are given, loaded once, or
+ * given as `sections` (the records pinned, the favourites) sit above the page, each folding open and shut. Rows are given, loaded once, or
  * loaded a page at a time; what the table shows lives in a `TableStore`, which pages (and the CRUD component) change
  * from outside.
  */
@@ -37,6 +39,10 @@ export function useTable() {
     return store;
 }
 const STATE_PREFIX = "nx-table:";
+/** The key of the section `pinnedRows` makes. */
+const PINS_SECTION = "pins";
+/** The lookups' version for a table with no `join` column, which never listens to them. */
+const NO_JOINS = () => 0;
 function readSaved(key) {
     if (!key || typeof localStorage === "undefined")
         return null;
@@ -48,7 +54,7 @@ function readSaved(key) {
         return null;
     }
 }
-// Settings are written in two places (the query and the columns together, the pinned section on its own click), so a
+// Settings are written in two places (the query and the columns together, a section's fold on its own click), so a
 // write keeps whatever it does not mention.
 function writeSaved(key, changes) {
     try {
@@ -93,7 +99,7 @@ const sameNumbers = (a, b) => {
  * />
  */
 export function DataTable(props) {
-    const { columns, rows: givenRows, load, loadKey, rowKey = "id", rowLabel, table: givenTable, searchable = true, searchPlaceholder = "Search…", toolbar, actions, add, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, selectBy, rowActions, onRowOpen, openOnClick: ownOpenOnClick, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize: ownPageSize, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
+    const { columns, rows: givenRows, load, loadKey, rowKey = "id", rowLabel, table: givenTable, searchable = true, searchPlaceholder = "Search…", toolbar, actions, add, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, selectBy, rowActions, onRowOpen, openOnClick: ownOpenOnClick, sections: ownSections, rowMarks, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize: ownPageSize, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
     const paging = givenRows ? "client" : (props.paging ?? "client");
     const reloadable = props.reloadable ?? Boolean(load);
     const searchDelay = props.searchDelay ?? (paging === "server" ? 300 : 0);
@@ -114,15 +120,22 @@ export function DataTable(props) {
     table.configure({ columns, rowKey, rows: givenRows, load, paging, maxSelection, onSelectionChange, filterInputs });
     useImperativeHandle(ref, () => table, [table]);
     const state = useSyncExternalStore(table.subscribe, table.getState, table.getState);
+    // The columns whose values are other records', looked up by key (`join`). Only a table with one listens to the page's
+    // lookups, and it draws again - its rows too, through `cellOptions` - each time names come in.
+    const joins = useMemo(() => columns.flatMap(column => (column.join ? [column.join] : [])), [columns]);
+    const subscribeJoins = useCallback((listener) => (joins.length ? tableJoins.subscribe(listener) : () => { }), [joins.length]);
+    const joinsVersion = useSyncExternalStore(subscribeJoins, joins.length ? tableJoins.getVersion : NO_JOINS, NO_JOINS);
     const dates = useDatePreferences();
     const timeZone = useBrowserTimeZone();
     const numbers = useNumberLocale();
-    const cellOptions = useMemo(() => ({ preferences: dates, timeZone: timeZone ?? undefined, locale: numbers }), [dates, timeZone, numbers]);
+    // `joinsVersion` is read by no cell option: a new object is what tells the memoized rows that their names came in.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const cellOptions = useMemo(() => ({ preferences: dates, timeZone: timeZone ?? undefined, locale: numbers }), [dates, timeZone, numbers, joinsVersion]);
     const tableId = useId();
     // The search box is uncontrolled: a new key clears it when a new list starts over.
     const [searchGeneration, setSearchGeneration] = useState(0);
-    // The pinned section starts folded shut, then takes the choice this device remembers (a layout effect: no flicker).
-    const [pinsOpen, setPinsOpen] = useState(false);
+    // Every section starts folded shut, then takes the choice this device remembers (a layout effect: no flicker).
+    const [openSections, setOpenSections] = useState(() => new Set());
     const searchTimer = useRef(undefined);
     const searchRef = useRef(null);
     const started = useRef(false);
@@ -141,8 +154,9 @@ export function DataTable(props) {
                 widths: saved?.widths,
                 pinned: saved?.pinned,
             });
-            if (saved?.pinsOpen)
-                setPinsOpen(true);
+            const open = saved?.openSections ?? (saved?.pinsOpen ? [PINS_SECTION] : []);
+            if (open.length)
+                setOpenSections(new Set(open));
             if (givenRows)
                 table.setRows(givenRows);
             else
@@ -198,6 +212,20 @@ export function DataTable(props) {
         table.setPageSize(openingPageSize());
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [preferences.pageSize]);
+    // Every key the rows hold for a join, asked for together: a client table's every row, since it searches and sorts them
+    // all, a server table's page, and the rows of the sections above it. What is known already is not asked again.
+    useEffect(() => {
+        if (!joins.length || state.status !== "ready")
+            return;
+        const shown = [...table.getRows(), ...(pinnedRows ?? []), ...(ownSections ?? []).flatMap(section => section.rows)];
+        for (const [source, keys] of joinKeys(joins, shown))
+            tableJoins.request(joinSource(source), keys);
+    }, [joins, state.status, state.rows, pinnedRows, ownSections, table]);
+    // Names came in: a client table searches and sorts again with them.
+    useEffect(() => {
+        if (joinsVersion)
+            table.refreshValues();
+    }, [joinsVersion, table]);
     const visible = useMemo(() => columns.filter(column => !state.hidden.has(column.key)), [columns, state.hidden]);
     // Every column in the order the user put them in, hidden ones among them: what the Columns panel lists.
     const ordered = useMemo(() => orderColumns(columns, state.order), [columns, state.order]);
@@ -463,7 +491,11 @@ export function DataTable(props) {
             cancelAnimationFrame(frame);
         };
     }, [addPart, listsPart, searchable, reloadable]);
+    // A person's Reload is a refresh of what the table shows, the names it looked up included: those are marked old - still
+    // drawn, asked again with the rows - and nothing else the page keeps is touched.
     const reload = () => {
+        for (const join of joins)
+            tableJoins.expire(joinSourceName(join.source));
         onReload?.();
         void table.reload({ quiet: true });
     };
@@ -544,24 +576,31 @@ export function DataTable(props) {
         body = rows.map((row, index) => {
             const key = pageKeys[index];
             const selected = state.selected.has(key);
-            return (_jsx(TableRowView, { row: row, rowKey: key, number: state.offset + index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, key || index));
+            return (_jsx(TableRowView, { row: row, rowKey: key, number: state.offset + index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, marks: rowMarks?.(row), frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, key || index));
         });
     }
-    /* The pinned section above the page: the records the user pinned, folded open or shut, remembered on this device */
+    /* The sections above the page: the records pinned, the favourites, each folded open or shut, remembered on this device */
+    const pinsSection = pinnedRows ? { key: PINS_SECTION, label: pinnedLabel, icon: iconPin, rows: pinnedRows, loading: pinnedLoading, max: pinnedMax } : null;
     // A section with nothing in it and nothing on its way would be an empty heading, so it does not show at all.
-    const pins = pinnedRows && (pinnedRows.length > 0 || pinnedLoading) ? pinnedRows : null;
-    const togglePins = () => {
-        const next = !pinsOpen;
-        setPinsOpen(next);
+    const sections = [...(pinsSection ? [pinsSection] : []), ...(ownSections ?? [])].filter(section => section.rows.length > 0 || section.loading);
+    const toggleSection = (key) => {
+        const next = new Set(openSections);
+        if (!next.delete(key))
+            next.add(key);
+        setOpenSections(next);
         if (stateKey)
-            writeSaved(stateKey, { pinsOpen: next });
+            writeSaved(stateKey, { openSections: [...next], pinsOpen: undefined });
     };
-    const pinnedBody = pinsOpen &&
-        pins?.map((row, index) => {
+    const sectionRows = (section) => {
+        // A row with no marks of its own still wears the section's icon.
+        const own = [{ icon: section.icon, label: section.label }];
+        return section.rows.map((row, index) => {
             const key = table.keyOf(row);
             const selected = state.selected.has(key);
-            return (_jsx(TableRowView, { row: row, rowKey: key, number: index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, pinned: true, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, `pin:${key || index}`));
+            const marks = rowMarks?.(row);
+            return (_jsx(TableRowView, { row: row, rowKey: key, number: index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, marks: marks?.length ? marks : own, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, key || index));
         });
+    };
     const selectedRows = selecting ? [...state.selected.values()] : [];
     // Select again by what the rows are: exactly the rows on the page that pass, or the whole page.
     const pick = (label, test) => {
@@ -590,7 +629,10 @@ export function DataTable(props) {
                                                                 lastToggled.current = null;
                                                                 if (table.selectPage(event.currentTarget.checked) > 0)
                                                                     warnFull();
-                                                            } }) })) })), bands.map(band => band.group === null ? (headingCell(band.columns[0], headRows)) : (_jsx(GroupHeading, { band: band }, `group:${band.group}:${band.columns[0].column.key}`))), sized && _jsx("td", { className: "nx-table__heading nx-table__cell--filler", rowSpan: headRows }), frame.actions && (_jsx("th", { scope: "col", className: "nx-table__heading nx-table__cell--actions", rowSpan: headRows, "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: { right: frame.actions.offset }, children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }), grouped && _jsx("tr", { className: "nx-table__head nx-table__head--leaves", children: bands.filter(band => band.group !== null).flatMap(band => band.columns.map(view => headingCell(view))) })] }), pins && (_jsxs("tbody", { className: "nx-table__pins", "data-open": pinsOpen || undefined, children: [_jsx(TablePinnedHead, { span: span, label: pinnedLabel, count: pins.length, max: pinnedMax, loading: pinnedLoading, open: pinsOpen, onToggle: togglePins }), pinnedBody] })), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, onPage: page => table.setPage(page) })] }));
+                                                            } }) })) })), bands.map(band => band.group === null ? (headingCell(band.columns[0], headRows)) : (_jsx(GroupHeading, { band: band }, `group:${band.group}:${band.columns[0].column.key}`))), sized && _jsx("td", { className: "nx-table__heading nx-table__cell--filler", rowSpan: headRows }), frame.actions && (_jsx("th", { scope: "col", className: "nx-table__heading nx-table__cell--actions", rowSpan: headRows, "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: { right: frame.actions.offset }, children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }), grouped && _jsx("tr", { className: "nx-table__head nx-table__head--leaves", children: bands.filter(band => band.group !== null).flatMap(band => band.columns.map(view => headingCell(view))) })] }), sections.map(section => {
+                                    const open = openSections.has(section.key);
+                                    return (_jsxs("tbody", { className: "nx-table__section", "data-section": section.key, "data-open": open || undefined, children: [_jsx(TableSectionHead, { span: span, label: section.label, icon: section.icon, count: section.rows.length, max: section.max, loading: Boolean(section.loading), open: open, onToggle: () => toggleSection(section.key) }), open && sectionRows(section)] }, section.key));
+                                }), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, onPage: page => table.setPage(page) })] }));
 }
 /** Where "Move left" and "Move right" put a column: the key it goes before, or null for the end of its side. */
 function moveTargets(views, key) {

package/dist/Components/Viewers/DataTableParts.d.ts

@@ -1,10 +1,14 @@
 import { type IconNode } from "nexus-icons";
 import { type CSSProperties, type MouseEvent, type ReactNode } from "react";
 import { type CellTextOptions } from "../../Helpers/TableHelpers.ts";
-import type { TableColumn, TableRow, TableRowAction, TableState, TableViewColumn } from "../../Interfaces/TableInterfaces.ts";
+import type { TableColumn, TableRow, TableRowAction, TableRowMark, TableState, TableViewColumn } from "../../Interfaces/TableInterfaces.ts";
 /** A number as the table writes counts: 1,234. */
 export declare const formatCount: (count: number) => string;
-/** A value in its column's format: text, a tag for an option with a tone, a check for `true`. Empty values show a dash. */
+/**
+ * A value in its column's format: text, a tag for an option with a tone, a check for `true`. Empty values show a dash.
+ * A `join` column shows a placeholder until the record it looks up is in, and "Not found" for a key with no record; a
+ * column with a `tag` shows it after the value: "Asia" then "Trashed".
+ */
 export declare function TableCellValue<TRow extends TableRow>({ column, row, options }: {
     column: TableColumn<TRow>;
     row: TRow;
@@ -66,8 +70,8 @@ export interface TableRowViewProps<TRow extends TableRow> {
     busy: boolean;
     flashed: boolean;
     numbered: boolean;
-    /** A row of the pinned section above the page: its number is a pin. */
-    pinned?: boolean;
+    /** The row's marks (pinned, a favourite), worn one under the other where a row without any shows its number. */
+    marks?: readonly TableRowMark[];
     /** Where the table's own columns sit; `null` for the ones it does not have. */
     frame: TableFrameColumns;
     /** The user gave a column a width, so the table lays its columns out from the `<colgroup>`. */
@@ -80,13 +84,27 @@ export interface TableRowViewProps<TRow extends TableRow> {
     openOnClick?: boolean;
 }
 /** One row. It renders again only when its row, its state, or the columns change. */
-declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }: TableRowViewProps<TRow>): import("react").JSX.Element;
+declare function TableRowViewInner<TRow extends TableRow>({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, marks, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }: TableRowViewProps<TRow>): import("react").JSX.Element;
 export declare const TableRowView: typeof TableRowViewInner;
 /**
- * The head of the pinned section: one row across the table with a button that folds the pinned records open and shut,
- * how many there are, and the most that can be pinned.
+ * The head of a section above the page: one row across the table with a button that folds the section's records open
+ * and shut, how many there are, and the most it can hold.
+ */
+export declare function TableSectionHead({ span, label, icon, count, max, loading, open, onToggle }: {
+    span: number;
+    label: string;
+    icon: IconNode;
+    count: number;
+    max?: number;
+    loading: boolean;
+    open: boolean;
+    onToggle: () => void;
+}): import("react").JSX.Element;
+/**
+ * The pinned section's head, by its 3.1.0 name: a `TableSectionHead` with the pin icon.
+ * @deprecated since 3.2.0, when favourites became a second section: use `TableSectionHead`, which takes the icon.
  */
-export declare function TablePinnedHead({ span, label, count, max, loading, open, onToggle }: {
+export declare function TablePinnedHead(props: {
     span: number;
     label: string;
     count: number;

package/dist/Components/Viewers/DataTableParts.js

@@ -1,21 +1,43 @@
 "use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconCheck, iconChevronDown, iconChevronLeft, iconChevronRight, iconDotsVertical, iconLoader2, iconPin, InlineIcon } from "nexus-icons";
 import { memo } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { columnAlign, columnOption, columnValue, cssLength, formatCellText, pageButtons, pageCount, TABLE_ACTIONS_COLUMN, TABLE_INDEX_COLUMN, } from "../../Helpers/TableHelpers.js";
+import { joinedState } from "../../Helpers/TableJoins.js";
 import { Button } from "../Documents/Button.js";
 import { Menu } from "../Documents/Menu.js";
 /*
  * The parts of a data table: a cell in its column's format, a row with its number and checkbox in one column and its
- * actions, the widths of the columns the user set, the head of the pinned section, the pager, and the footer. The
+ * actions, the widths of the columns the user set, the head of a section above the page, the pager, and the footer. The
  * details view of the CRUD draws values with the same `TableCellValue`.
  */
 const countFormat = new Intl.NumberFormat("en-US");
 /** A number as the table writes counts: 1,234. */
 export const formatCount = (count) => countFormat.format(count);
-/** A value in its column's format: text, a tag for an option with a tone, a check for `true`. Empty values show a dash. */
+/**
+ * A value in its column's format: text, a tag for an option with a tone, a check for `true`. Empty values show a dash.
+ * A `join` column shows a placeholder until the record it looks up is in, and "Not found" for a key with no record; a
+ * column with a `tag` shows it after the value: "Asia" then "Trashed".
+ */
 export function TableCellValue({ column, row, options }) {
+    const joined = column.join ? joinedState(column.join, row) : null;
+    if (joined?.status === "loading")
+        return _jsx("span", { className: "nx-table__bone", "aria-label": "Loading" });
+    if (joined?.status === "missing" || joined?.status === "failed") {
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: "nx-table__dash", children: "\u2014" }), joined.status === "missing" && _jsx(TableTagView, { tag: { label: "Not found", tone: "danger" } })] }));
+    }
+    const tag = column.tag?.(row, joined?.status === "ready" ? joined.record : undefined);
+    const value = _jsx(TableCellContent, { column: column, row: row, options: options });
+    if (!tag)
+        return value;
+    return (_jsxs(_Fragment, { children: [value, _jsx(TableTagView, { tag: tag })] }));
+}
+/** A short tag after a cell's value, in the look of a column option's tag. */
+function TableTagView({ tag }) {
+    return (_jsx("span", { className: "nx-table__tag nx-table__tag--after", "data-tone": tag.tone, children: tag.label }));
+}
+function TableCellContent({ column, row, options }) {
     const value = columnValue(column, row);
     if (column.render)
         return _jsx(_Fragment, { children: column.render(row, value) });
@@ -104,21 +126,28 @@ function opensRow(event, single) {
     return !(selection && !selection.isCollapsed && event.currentTarget.contains(selection.anchorNode));
 }
 /** One row. It renders again only when its row, its state, or the columns change. */
-function TableRowViewInner({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, pinned, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }) {
+function TableRowViewInner({ row, rowKey, number, label, columns, cellOptions, selectable, selected, selectionFull, busy, flashed, numbered, marks, frame, sized, actions, onToggle, onAction, onOpen, openOnClick, }) {
     const inline = actions?.filter(action => action.inline && action.icon) ?? [];
     const inMenu = actions?.filter(action => !(action.inline && action.icon)) ?? [];
     const items = inMenu.map(action => ({ value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled }));
-    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-pinned": pinned || undefined, "data-selected": selected || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, "data-open": (onOpen && openOnClick) || undefined, 
+    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-selected": selected || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, "data-open": (onOpen && openOnClick) || undefined, 
         // One way in: with a single click the row is already open by the time a double-click would arrive.
-        onClick: onOpen && openOnClick ? event => opensRow(event, true) && onOpen(row) : undefined, onDoubleClick: onOpen && !openOnClick ? event => opensRow(event, false) && onOpen(row) : undefined, children: [frame.index && (_jsx(TableIndexCell, { own: frame.index, number: pinned ? _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-mark" }) : formatCount(number), numbered: numbered || Boolean(pinned), selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", title: selectionFull ? "No more rows can be selected." : undefined, children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: selected, disabled: selectionFull && !selected, "aria-label": `Select ${label}`, onClick: event => onToggle(row, event.currentTarget.checked, event), onChange: () => undefined }) })) })), columns.map(view => (_jsx("td", { className: cx("nx-table__cell", `nx-table__cell--${columnAlign(view.column)}`, view.column.wrap && "nx-table__cell--wrap"), "data-col": view.column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, style: columnStyle(view, sized), children: _jsx("span", { className: "nx-table__value", children: _jsx(TableCellValue, { column: view.column, row: row, options: cellOptions }) }) }, view.column.key))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && (_jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: ownStyle(frame.actions, "right"), children: _jsxs("div", { className: "nx-table__actions", children: [inline.map(action => (_jsx(Button, { variant: "ghost", size: "sm", icon: action.icon, hoverTone: action.tone === "danger" ? "danger" : undefined, "aria-label": `${action.label}: ${label}`, title: action.label, "data-action": action.id, disabled: busy || action.disabled, onClick: () => onAction(row, action) }, action.id))), items.length > 0 && (_jsx(Menu, { items: items, align: "end", "aria-label": `Actions: ${label}`, onSelect: value => onAction(row, inMenu.find(action => action.id === value)), children: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), loading: busy, "aria-label": `More actions: ${label}`, title: "More actions" }) })), items.length === 0 && busy && _jsx(Button, { variant: "ghost", size: "sm", loading: true, "aria-label": `Working: ${label}` })] }) }))] }));
+        onClick: onOpen && openOnClick ? event => opensRow(event, true) && onOpen(row) : undefined, onDoubleClick: onOpen && !openOnClick ? event => opensRow(event, false) && onOpen(row) : undefined, children: [frame.index && (_jsx(TableIndexCell, { own: frame.index, number: marks?.length ? (_jsx("span", { className: "nx-table__marks", children: marks.map(mark => (_jsx(InlineIcon, { icon: mark.icon, className: "nx-table__mark", label: mark.label }, mark.label))) })) : (formatCount(number)), numbered: numbered || Boolean(marks?.length), selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", title: selectionFull ? "No more rows can be selected." : undefined, children: _jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: selected, disabled: selectionFull && !selected, "aria-label": `Select ${label}`, onClick: event => onToggle(row, event.currentTarget.checked, event), onChange: () => undefined }) })) })), columns.map(view => (_jsx("td", { className: cx("nx-table__cell", `nx-table__cell--${columnAlign(view.column)}`, view.column.wrap && "nx-table__cell--wrap"), "data-col": view.column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, style: columnStyle(view, sized), children: _jsx("span", { className: "nx-table__value", children: _jsx(TableCellValue, { column: view.column, row: row, options: cellOptions }) }) }, view.column.key))), sized && _jsx("td", { className: "nx-table__cell nx-table__cell--filler" }), frame.actions && (_jsx("td", { className: "nx-table__cell nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: ownStyle(frame.actions, "right"), children: _jsxs("div", { className: "nx-table__actions", children: [inline.map(action => (_jsx(Button, { variant: "ghost", size: "sm", icon: action.icon, hoverTone: action.tone === "danger" ? "danger" : undefined, "aria-label": `${action.label}: ${label}`, title: action.label, "data-action": action.id, disabled: busy || action.disabled, onClick: () => onAction(row, action) }, action.id))), items.length > 0 && (_jsx(Menu, { items: items, align: "end", "aria-label": `Actions: ${label}`, onSelect: value => onAction(row, inMenu.find(action => action.id === value)), children: _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), loading: busy, "aria-label": `More actions: ${label}`, title: "More actions" }) })), items.length === 0 && busy && _jsx(Button, { variant: "ghost", size: "sm", loading: true, "aria-label": `Working: ${label}` })] }) }))] }));
 }
 export const TableRowView = memo(TableRowViewInner);
 /**
- * The head of the pinned section: one row across the table with a button that folds the pinned records open and shut,
- * how many there are, and the most that can be pinned.
+ * The head of a section above the page: one row across the table with a button that folds the section's records open
+ * and shut, how many there are, and the most it can hold.
+ */
+export function TableSectionHead({ span, label, icon, count, max, loading, open, onToggle }) {
+    return (_jsx("tr", { className: "nx-table__row nx-table__section-row", children: _jsx("td", { colSpan: span, className: "nx-table__section-cell", children: _jsxs("button", { type: "button", className: "nx-table__section-toggle", "aria-expanded": open, onClick: onToggle, children: [_jsx(InlineIcon, { icon: iconChevronRight, className: "nx-table__section-caret" }), _jsx(InlineIcon, { icon: icon, className: "nx-table__section-icon" }), _jsx("span", { className: "nx-table__section-title", children: label }), (count > 0 || !loading) && (_jsx("span", { className: "nx-table__section-count", children: max ? `${formatCount(count)} of ${formatCount(max)}` : formatCount(count) })), loading && _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin nx-table__section-loading" })] }) }) }));
+}
+/**
+ * The pinned section's head, by its 3.1.0 name: a `TableSectionHead` with the pin icon.
+ * @deprecated since 3.2.0, when favourites became a second section: use `TableSectionHead`, which takes the icon.
  */
-export function TablePinnedHead({ span, label, count, max, loading, open, onToggle }) {
-    return (_jsx("tr", { className: "nx-table__row nx-table__pin-row", children: _jsx("td", { colSpan: span, className: "nx-table__pin-cell", children: _jsxs("button", { type: "button", className: "nx-table__pin-toggle", "aria-expanded": open, onClick: onToggle, "data-table-pins": true, children: [_jsx(InlineIcon, { icon: iconChevronRight, className: "nx-table__pin-caret" }), _jsx(InlineIcon, { icon: iconPin, className: "nx-table__pin-icon" }), _jsx("span", { className: "nx-table__pin-title", children: label }), (count > 0 || !loading) && (_jsx("span", { className: "nx-table__pin-count", children: max ? `${formatCount(count)} of ${formatCount(max)}` : formatCount(count) })), loading && _jsx(InlineIcon, { icon: iconLoader2, className: "nx-spin nx-table__pin-loading" })] }) }) }));
+export function TablePinnedHead(props) {
+    return _jsx(TableSectionHead, { ...props, icon: iconPin });
 }
 /** Placeholder rows while the first rows load, in the shape of the columns. */
 export function TableSkeletonRows({ count, cells, frame, sized }) {

package/dist/Helpers/ApiModules.d.ts

@@ -1,5 +1,5 @@
 import { NexusModule, type ApiEndpoint, type ApiModuleInfo, type ApiModuleValue } from "../Interfaces/ApiInterfaces.ts";
-import { apiEndpoint, type ApiEndpointExtras, type ApiUrlParts } from "./ApiRoutes.ts";
+import { apiEndpoint, type ApiControllerOptions, type ApiEndpointExtras, type ApiUrlParts } from "./ApiRoutes.ts";
 /** Where the proxy route sits in an app: `app/api/app/[module]/[...path]/route.ts`. */
 export declare const DEFAULT_PROXY_PATH = "/api/app";
 /** An environment variable, read when it is needed (never inlined at build time), so one build serves every environment. */
@@ -67,39 +67,8 @@ export declare abstract class ApiModules<TModule extends ApiModuleValue = ApiMod
     protected readEnv(name: string | undefined): string | undefined;
     /** Endpoints typed to this app's modules: `MODULES.endpoint.get(HrModule.Staff, "Employee/Birthdays")`. */
     readonly endpoint: Record<keyof typeof apiEndpoint, (module: TModule, path: string, extras?: ApiEndpointExtras) => ApiEndpoint<TModule>>;
-    /** A controller's standard endpoints, typed to this app's modules. See `apiController`. */
-    controller(module: TModule, controller: string, subject?: string): {
-        module: TModule;
-        controller: string;
-        listing: ApiEndpoint<TModule>;
-        activeListing: ApiEndpoint<TModule>;
-        findListing: ApiEndpoint<TModule>;
-        pagination: ApiEndpoint<TModule>;
-        lists: Record<import("../Shared.Index.ts").CrudMode, ApiEndpoint<TModule>>;
-        pages: Record<import("../Shared.Index.ts").CrudMode, ApiEndpoint<TModule>>;
-        pins: ApiEndpoint<TModule>;
-        details: ApiEndpoint<TModule>;
-        create: ApiEndpoint<TModule>;
-        update: ApiEndpoint<TModule>;
-        delete: ApiEndpoint<TModule>;
-        trash: ApiEndpoint<TModule>;
-        trashFromDelete: ApiEndpoint<TModule>;
-        recover: ApiEndpoint<TModule>;
-        flag: ApiEndpoint<TModule>;
-        pin: ApiEndpoint<TModule>;
-        audit: ApiEndpoint<TModule>;
-        accessActions: ApiEndpoint<TModule>;
-        mass: {
-            description: ApiEndpoint<TModule>;
-            trash: ApiEndpoint<TModule>;
-            trashFromDelete: ApiEndpoint<TModule>;
-            flag: ApiEndpoint<TModule>;
-            pin: ApiEndpoint<TModule>;
-            delete: ApiEndpoint<TModule>;
-            recover: ApiEndpoint<TModule>;
-        };
-        action: (method: import("../Shared.Index.ts").HttpMethod, action: string, extras?: Partial<Omit<ApiEndpoint<number>, "path" | "method" | "module">> | undefined) => ApiEndpoint<TModule>;
-    };
+    /** A controller's standard endpoints, typed to this app's modules: its generation and what it lacks in `options`. See `apiController`. */
+    controller(module: TModule, controller: string, subject?: string, options?: ApiControllerOptions): import("./ApiRoutes.ts").ApiControllerEndpoints<TModule>;
 }
 /** The Nexus modules, their names in proxy URLs, and the environment variables with their roots (as in the previous project). */
 export declare const NEXUS_MODULES: readonly ApiModuleInfo<NexusModule>[];

package/dist/Helpers/ApiModules.js

@@ -103,9 +103,9 @@ export class ApiModules {
     }
     /** Endpoints typed to this app's modules: `MODULES.endpoint.get(HrModule.Staff, "Employee/Birthdays")`. */
     endpoint = apiEndpoint;
-    /** A controller's standard endpoints, typed to this app's modules. See `apiController`. */
-    controller(module, controller, subject) {
-        return apiController(module, controller, subject);
+    /** A controller's standard endpoints, typed to this app's modules: its generation and what it lacks in `options`. See `apiController`. */
+    controller(module, controller, subject, options) {
+        return apiController(module, controller, subject, options);
     }
 }
 /** The Nexus modules, their names in proxy URLs, and the environment variables with their roots (as in the previous project). */