nexus-shared 3.1.0 → 4.0.0

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;
@@ -37,8 +41,11 @@ export declare function TableColumnGroup<TRow extends TableRow>({ columns, width
     frame: TableFrameColumns;
     colRefs: Map<string, HTMLTableColElement>;
 }): import("react").JSX.Element;
-/** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
-export declare function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }: {
+/**
+ * The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. A
+ * row of a table whose rows are picked (`onPick`) also holds its radio button here, out of sight.
+ */
+export declare function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, pick, }: {
     heading?: boolean;
     /** 2 in the heading while the header has a band of group headings above the columns' own. */
     rowSpan?: number;
@@ -51,6 +58,8 @@ export declare function TableIndexCell({ heading, rowSpan, own, number, numbered
     numbered: boolean;
     selectable: boolean;
     checkbox?: ReactNode;
+    /** The row's radio button, when rows are picked. */
+    pick?: ReactNode;
 }): import("react").JSX.Element;
 export interface TableRowViewProps<TRow extends TableRow> {
     row: TRow;
@@ -66,8 +75,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>`. */
@@ -78,15 +87,35 @@ export interface TableRowViewProps<TRow extends TableRow> {
     onOpen?: (row: TRow) => void;
     /** A single click opens the row, as a double-click does. */
     openOnClick?: boolean;
+    /** Rows are picked: a click picks this one (a double-click still opens it), whatever `openOnClick` says. */
+    onPick?: (row: TRow) => void;
+    /** This row is the picked one. */
+    picked?: boolean;
+    /** The name of the table's radio group, for the row's own radio button; none in a section above the page. */
+    pickName?: string;
 }
 /** 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, onPick, picked, pickName, }: 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;
@@ -128,11 +157,16 @@ export declare function TablePageSize({ pageSize, pageSizes, compact, onChange }
 }): import("react").JSX.Element | null;
 /**
  * Under the table: which rows show and how many the search and the filters left ("Showing 41–50 of 234 · filtered
- * from 1,000"), the page of how many, and the pager.
+ * from 1,000"), the page of how many, the rows per page when the table keeps them here (`pageSize`), and the pager.
+ *
+ * A table read whole (`whole`, every row on one page) has nothing to page: its footer shows only while a search or the
+ * filters leave rows out, and is otherwise kept for screen readers alone, so the count is still heard as it changes.
  */
-export declare function TableFooter<TRow extends TableRow>({ state, disabled, onPage }: {
+export declare function TableFooter<TRow extends TableRow>({ state, disabled, whole, pageSize, onPage }: {
     state: TableState<TRow>;
     disabled: boolean;
+    whole?: boolean;
+    pageSize?: ReactNode;
     onPage: (page: number) => void;
 }): import("react").JSX.Element;
 export {};

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) });
@@ -30,7 +52,7 @@ export function TableCellValue({ column, row, options }) {
     // A moment needs the browser's zone, unknown while the page hydrates: nothing shows until then, not another zone's time.
     if (column.format === "date-time" && !options.timeZone && value)
         return _jsx("span", { className: "nx-table__pending" });
-    const text = formatCellText(column, value, options);
+    const text = formatCellText(column, value, options, row);
     if (!text)
         return _jsx("span", { className: "nx-table__dash", children: "\u2014" });
     return _jsx(_Fragment, { children: text });
@@ -74,8 +96,11 @@ export function TableColumnGroup({ columns, widths, frame, colRefs, }) {
     const own = (key, on) => on && _jsx("col", { ref: hold(key), style: { width: widths[key] } }, key);
     return (_jsxs("colgroup", { children: [own(TABLE_INDEX_COLUMN, Boolean(frame.index)), columns.map(view => (_jsx("col", { ref: hold(view.column.key), style: { width: widths[view.column.key] ?? cssLength(view.column.width) ?? FALLBACK_COLUMN_WIDTH } }, view.column.key))), _jsx("col", { className: "nx-table__col-filler" }), own(TABLE_ACTIONS_COLUMN, Boolean(frame.actions))] }));
 }
-/** The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. */
-export function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, }) {
+/**
+ * The number of a row, its checkbox, or both: the number until the pointer is over the row or something is selected. A
+ * row of a table whose rows are picked (`onPick`) also holds its radio button here, out of sight.
+ */
+export function TableIndexCell({ heading, rowSpan, own, number, numbered, selectable, checkbox, pick, }) {
     const shared = {
         className: cx(heading ? "nx-table__heading" : "nx-table__cell", "nx-table__cell--index"),
         "data-col": TABLE_INDEX_COLUMN,
@@ -85,7 +110,7 @@ export function TableIndexCell({ heading, rowSpan, own, number, numbered, select
         "data-swap": (numbered && selectable) || undefined,
         style: ownStyle(own, "left"),
     };
-    const content = (_jsxs(_Fragment, { children: [numbered && (_jsx("span", { className: "nx-table__number", "aria-hidden": selectable || undefined, children: number })), checkbox] }));
+    const content = (_jsxs(_Fragment, { children: [numbered && (_jsx("span", { className: "nx-table__number", "aria-hidden": selectable || undefined, children: number })), checkbox, pick] }));
     return heading ? (_jsx("th", { scope: "col", rowSpan: rowSpan, ...shared, children: content })) : (_jsx("td", { ...shared, children: content }));
 }
 /** What in a row is a control of its own: a click there does what the control does, and never opens the row. */
@@ -104,21 +129,31 @@ 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, onPick, picked = false, pickName, }) {
     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, 
+    // A click picks a row where rows are picked; opening it is then the double-click's.
+    const clickOpens = Boolean(onOpen && openOnClick && !onPick);
+    return (_jsxs("tr", { className: "nx-table__row", "data-key": rowKey, "data-selected": selected || undefined, "data-picked": picked || undefined, "data-busy": busy || undefined, "data-flash": flashed || undefined, "aria-busy": busy || undefined, "data-open": clickOpens || undefined, "data-pick": onPick ? "" : 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: onPick ? event => opensRow(event, true) && onPick(row) : clickOpens ? event => opensRow(event, true) && onOpen?.(row) : undefined, onDoubleClick: onOpen && !clickOpens ? 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 }) })), pick: onPick &&
+                    pickName && (_jsx("input", { type: "radio", className: "nx-visually-hidden nx-table__pick", name: pickName, checked: picked, "aria-label": label, onChange: () => onPick(row) })) })), 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 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 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(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 }) {
@@ -144,14 +179,20 @@ export function TablePageSize({ pageSize, pageSizes, compact = false, onChange }
 }
 /**
  * Under the table: which rows show and how many the search and the filters left ("Showing 41–50 of 234 · filtered
- * from 1,000"), the page of how many, and the pager.
+ * from 1,000"), the page of how many, the rows per page when the table keeps them here (`pageSize`), and the pager.
+ *
+ * A table read whole (`whole`, every row on one page) has nothing to page: its footer shows only while a search or the
+ * filters leave rows out, and is otherwise kept for screen readers alone, so the count is still heard as it changes.
  */
-export function TableFooter({ state, disabled, onPage }) {
+export function TableFooter({ state, disabled, whole = false, pageSize, onPage }) {
     const { status, rows, offset, matches, total, query } = state;
-    if (status !== "ready" || total === 0)
+    const ready = status === "ready" && total > 0;
+    const narrowed = Boolean(query.search || query.filters);
+    const range = ready && (_jsxs(_Fragment, { children: [rows.length ? (_jsxs(_Fragment, { children: ["Showing ", _jsx("b", { children: `${formatCount(rows.length ? offset + 1 : 0)}–${formatCount(offset + rows.length)}` }), " of ", _jsx("b", { children: formatCount(matches) })] })) : (_jsx(_Fragment, { children: "No rows on this page" })), narrowed && matches !== total && _jsxs("span", { className: "nx-table__range-all", children: [" \u00B7 filtered from ", formatCount(total)] })] }));
+    if (whole) {
+        return (_jsx("div", { className: ready && narrowed ? "nx-table__footer" : "nx-visually-hidden", children: _jsx("p", { className: "nx-table__range", "aria-live": "polite", children: range }) }));
+    }
+    if (!ready)
         return _jsx("div", { className: "nx-table__footer" });
-    const first = rows.length ? offset + 1 : 0;
-    const last = offset + rows.length;
-    const pages = pageCount(matches, query.pageSize);
-    return (_jsxs("div", { className: "nx-table__footer", children: [_jsxs("p", { className: "nx-table__range", "aria-live": "polite", children: [rows.length ? (_jsxs(_Fragment, { children: ["Showing ", _jsx("b", { children: `${formatCount(first)}–${formatCount(last)}` }), " of ", _jsx("b", { children: formatCount(matches) })] })) : (_jsx(_Fragment, { children: "No rows on this page" })), (query.search || query.filters) && matches !== total && _jsxs("span", { className: "nx-table__range-all", children: [" \u00B7 filtered from ", formatCount(total)] })] }), _jsxs("div", { className: "nx-table__paging", children: [_jsxs("span", { className: "nx-table__page-info", children: ["Page ", formatCount(query.page), " of ", formatCount(pages)] }), _jsx(TablePager, { page: query.page, matches: matches, pageSize: query.pageSize, disabled: disabled, onPage: onPage })] })] }));
+    return (_jsxs("div", { className: "nx-table__footer", children: [_jsx("p", { className: "nx-table__range", "aria-live": "polite", children: range }), _jsxs("div", { className: "nx-table__paging", children: [pageSize, _jsxs("span", { className: "nx-table__page-info", children: ["Page ", formatCount(query.page), " of ", formatCount(pageCount(matches, query.pageSize))] }), _jsx(TablePager, { page: query.page, matches: matches, pageSize: query.pageSize, disabled: disabled, onPage: onPage })] })] }));
 }

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

@@ -0,0 +1,175 @@
+import { type ReactNode, type RefObject } from "react";
+import type { ApiModuleValue, ApiResult, AppModule } from "../../Interfaces/ApiInterfaces.ts";
+import { type FileOwner, type OwnerFiles, type PictureType, type StoredFile } from "../../Interfaces/FileInterfaces.ts";
+import type { TableColumn, TableRow } from "../../Interfaces/TableInterfaces.ts";
+import { type PopupHandle } from "../Layouts/PopupHost.tsx";
+/** What a page declares for an owner's pictures: whose they are, and how a picture is made. */
+export interface OwnerFilesParams<TModule extends ApiModuleValue = AppModule> extends FileOwner<TModule> {
+    /** The shape every picture is cropped to: `1` for a logo or a person, `4 / 3`, or `free` (default). */
+    aspect?: number | "free";
+    /** `circle` shows a person's picture round, and the editor's guide with it. Default `rect`. */
+    shape?: "rect" | "circle";
+    /** The largest picture kept, in pixels. Default the category's `pictureMaxSide` (1920), which it never passes. */
+    maxWidth?: number;
+    maxHeight?: number;
+    /**
+     * The kind a picture is saved as, fixed. Default: the kind it came in, and a PNG over the size limit becomes a JPEG
+     * (nothing see-through) or a WebP (keeping its see-through parts where the browser writes WebP).
+     */
+    type?: PictureType;
+    /** 0-1, for JPEG and WebP, where the editor starts. Never above the category's `pictureQuality`. */
+    quality?: number;
+    /** Whose they are, in the window's title and the pictures' names: "Kathmandu branch". */
+    title?: string;
+    /** Shows the files with no way to change them, whatever the backend allows. */
+    readOnly?: boolean;
+    /**
+     * Why the files may not be changed here, said under them: a record that is closed, a year that is locked. Set, the
+     * files are read only, as with `readOnly`. Without it, a person the backend lets only look is told the backend's own
+     * reason (`OwnerFiles.readOnlyReason`), or that they may look but not change.
+     *
+     * @example lockReason: row?.isClosed ? "The branch is closed: open it again to change its picture." : null
+     */
+    lockReason?: string | null;
+    /** After a change on this page: the owner's picture now (null for none). */
+    onChange?: (primary: StoredFile | null) => void;
+}
+/** What a person the backend lets only look at an owner's files is told, when it gave no words of its own. */
+export declare const READ_ONLY_REASON = "You can see these files, but you may not change them.";
+/** The longest side of a stored picture when neither the params nor the backend say: Drive's default (`PICTURE_LIMITS`). */
+export declare const MAX_PICTURE_SIDE: 1920;
+type Status = {
+    kind: "idle";
+} | {
+    kind: "loading";
+} | {
+    kind: "ready";
+    data: OwnerFiles;
+} | {
+    kind: "failed";
+    message: string;
+};
+/** Tells what a refused or failed call said, once, in the server's own words. */
+export declare function toastFileFailure(title: string, answer: Pick<ApiResult, "message" | "aborted">): void;
+/** One owner's files, and every change a person can make to them. `ownerId` null: nothing is read (a record not saved yet). */
+export declare function useOwnerFiles(params: Omit<OwnerFilesParams<ApiModuleValue>, "ownerId"> & {
+    ownerId?: string | null;
+}): {
+    status: Status;
+    data: OwnerFiles | null;
+    busy: string | null;
+    canWrite: boolean;
+    readOnlyReason: string | null;
+    pictures: boolean;
+    editorProblem: string | null;
+    actions: {
+        reload: () => Promise<void | StoredFile | null>;
+        /**
+         * Chooses a picture, edits it, and makes it the owner's picture (the picture input's Upload). In a category that
+         * keeps one file, the new picture takes the place of the one kept (Replace).
+         */
+        replace: () => Promise<void>;
+        /** Chooses several files and stores them: each picture through the editor, one at a time (the gallery's Upload). */
+        upload: () => Promise<void>;
+        /**
+         * Edits a stored picture; what is saved is a new picture, the owner's picture when the edited one was. In a category
+         * that keeps one file, the edited picture takes its place.
+         */
+        edit: (file: StoredFile) => Promise<void>;
+        makePrimary: (file: StoredFile | null) => Promise<void> | null;
+        rename: (file: StoredFile) => Promise<void>;
+        remove: (file: StoredFile) => Promise<void>;
+        /** Shows the pictures in the editor module's viewer, from `file`. */
+        view: (file: StoredFile) => Promise<void>;
+    };
+};
+/**
+ * Keeps the keyboard focus in an owner's files through a change (`busy`). Its buttons stay focusable while it runs
+ * (`aria-disabled`, never `disabled`: a focused control switched off sends the focus to the page in every browser), and
+ * when it ends with the focused button gone - a deleted file's, Edit after Remove, a star once its picture is the main
+ * one - the focus goes to the first control left in the same tile, row or `role="group"` (the picture input's buttons),
+ * else the first in `root`. Only when the focus
+ * was in `root` as the change began (or on the page, after a confirmation, while `root` had it last), and only when it
+ * has dropped to the page since: a person who moved on keeps their place.
+ */
+export declare function useFocusThroughChange(root: RefObject<HTMLElement | null>, busy: string | null): void;
+/** A control's props while a change runs: still focusable and announced as unavailable, its press ignored. */
+export declare function busyProps(busy: string | null, run: () => void): {
+    readonly "aria-disabled": true | undefined;
+    readonly onClick: () => void;
+};
+/** The owner's picture as the page keeps it, read with the other rows' in one call. */
+export declare function usePrimaryPicture(owner: FileOwner<ApiModuleValue> | null): StoredFile | null | undefined;
+export interface OwnerPictureProps {
+    owner: FileOwner<ApiModuleValue> | null;
+    /** The picture's height: pixels, or any CSS length (`var(--a-size)`). Default 28, a table row's. */
+    size?: number | string;
+    aspect?: number | "free";
+    shape?: "rect" | "circle";
+    /** What it shows, for a screen reader and the tooltip: "Kathmandu branch's picture". */
+    label?: string;
+    /**
+     * Whose picture it is, by name: without a picture, their initials stand in, on the tone the shared `Avatar` gives that
+     * name ("Ram Thapa" -> "RT"), rather than the picture icon. A person's or a company's row passes it.
+     */
+    name?: string | null;
+    /** Makes it a button: a table cell opens the gallery with it. */
+    onClick?: () => void;
+    className?: string;
+}
+/** An owner's picture, small: its thumbnail, or, when it has none, the initials of its `name` or a picture icon. */
+export declare function OwnerPicture({ owner, size, aspect, shape, label, name, onClick, className }: OwnerPictureProps): import("react").JSX.Element;
+export interface PictureGalleryProps extends OwnerFilesParams<ApiModuleValue> {
+    /** `pictures` (two panes) or `documents` (a list). Default: documents when the category takes anything but pictures. */
+    view?: "pictures" | "documents";
+    /** Once the files are read: the view shown, `documents` or `pictures` (a window's title follows it). */
+    onViewKnown?: (view: "pictures" | "documents") => void;
+}
+/**
+ * An owner's pictures, or documents for a category that takes PDF: upload several up to the category's limit, make
+ * one the main picture, view them in the editor module's viewer, edit one (saved as a new picture), delete.
+ *
+ * Pictures come in two panes, as the 2026-06-20 gallery did: the main picture large, with Upload and Remove (no main
+ * picture; the pictures stay) under it and the count and kinds; beside it the pictures as a grid, each with its own
+ * buttons inside it - View, Make main, Edit, Delete (Make main and Delete not on the main one) - shown on hover, on a
+ * keyboard's focus in the picture, and always where nothing can hover (a touch screen). Under 560px of its own width
+ * the main picture sits small beside its buttons, over the grid.
+ */
+export declare function PictureGallery(props: PictureGalleryProps): import("react").JSX.Element;
+/** An owner's documents as a list: `PictureGallery` with `view="documents"`. */
+export declare function DocumentList(props: OwnerFilesParams<ApiModuleValue>): import("react").JSX.Element;
+export interface OpenPictureGalleryOptions extends PictureGalleryProps {
+    /** The window's title. Default: "Pictures" or "Documents", and whose. */
+    popupTitle?: ReactNode;
+}
+/**
+ * Opens an owner's pictures (or documents) in a window; one window per owner and category. Pictures fill a wide
+ * window edge to edge in their two panes, the grid scrolling; documents are a list in a narrower one. Without `view`,
+ * the title, icon and size follow what the category takes once its files are read: a category that takes PDF says
+ * "Documents".
+ */
+export declare function openPictureGallery({ popupTitle, ...props }: OpenPictureGalleryOptions): PopupHandle;
+export interface PictureColumnParams<TRow extends TableRow> extends Omit<OwnerFilesParams<ApiModuleValue>, "ownerId" | "title" | "onChange" | "lockReason">, Partial<Omit<TableColumn<TRow>, "render" | "value">> {
+    /** The row's field that holds the owner's id. Default `id`. */
+    ownerKey?: string;
+    /** Whose the row's pictures are, for the window's title: `row => row.branchName`. */
+    rowTitle?: (row: TRow) => string;
+    /**
+     * The row's field with a name whose initials stand in for a row with no picture (`"fullname"`), as the shared `Avatar`
+     * draws a person. Without it, such a row shows the picture icon.
+     */
+    nameKey?: string;
+    /** Why a row's pictures may not be changed (its window shows them read only, with this sentence), or nothing. */
+    lockReason?: string | null | ((row: TRow) => string | null | undefined);
+    /** After a change in the window a row opened. */
+    onChange?: (row: TRow, primary: StoredFile | null) => void;
+}
+/**
+ * A column with each row's picture: every visible row's read in one call per page, and a click opens the row's
+ * gallery. A change there redraws the row's picture without a reload.
+ *
+ * @example
+ * columns: [pictureColumn({ module: NexusModule.Enterprise, category: "branch-picture", rowTitle: row => row.branchName }), ...]
+ */
+export declare function pictureColumn<TRow extends TableRow>({ module, category, ownerKey, rowTitle, nameKey, lockReason, onChange, aspect, shape, maxWidth, maxHeight, type, quality, readOnly, view, ...column }: PictureColumnParams<TRow> & Pick<PictureGalleryProps, "view">): TableColumn<TRow>;
+export {};