nexus-shared 3.2.0 → 4.0.0

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

@@ -1,6 +1,6 @@
 import { type Ref, type RefObject } from "react";
 import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
-import type { InputParams } from "../../Interfaces/FormInterfaces.ts";
+import { type InputParams } from "../../Interfaces/FormInterfaces.ts";
 import type { TableFilters } from "../../Interfaces/TableInterfaces.ts";
 export interface TableFiltersPanelProps {
     /** The filter inputs, as the table prepared them (`asFilterInput`). */

package/dist/Components/Viewers/DataTableFilters.js

@@ -4,6 +4,7 @@ import { iconFilterOff, InlineIcon } from "nexus-icons";
 import { useEffect, useId, useRef } from "react";
 import { usePopoverPanel } from "../../Helpers/PopoverHooks.js";
 import { activeFilters } from "../../Helpers/TableFilters.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
 import { Form, useForm } from "../Forms/Form.js";
 import { formatCount } from "./DataTableParts.js";
@@ -14,7 +15,21 @@ import { formatCount } from "./DataTableParts.js";
  * never clears a filter on its way out.
  */
 /** Inputs typed into or dragged: their value waits until the person stops. A date box reads a date from part of one. */
-const TYPED = new Set(["text", "email", "search", "tel", "url", "textarea", "number", "slider", "range-slider", "date", "date-range", "time", "date-time"]);
+const TYPED = new Set([
+    EInputTypes.Text,
+    EInputTypes.Email,
+    EInputTypes.Search,
+    EInputTypes.Tel,
+    EInputTypes.Url,
+    EInputTypes.TextArea,
+    EInputTypes.Number,
+    EInputTypes.Slider,
+    EInputTypes.RangeSlider,
+    EInputTypes.Date,
+    EInputTypes.DateRange,
+    EInputTypes.Time,
+    EInputTypes.DateTime,
+]);
 /** The Filters panel, opened through its `open()` handle: a `Form` of the filter inputs, the count, and Clear all. */
 export function TableFiltersPanel({ inputs, value, delay, matches, total, onChange, anchor, ref }) {
     const titleId = useId();
@@ -57,7 +72,7 @@ export function TableFiltersPanel({ inputs, value, delay, matches, total, onChan
         }, children: [_jsxs("div", { className: "nx-table-panel__head", children: [_jsx("span", { className: "nx-table-panel__title", id: titleId, children: "Filters" }), _jsx("span", { className: "nx-table-panel__count", children: count ? `${count} on` : "None" })] }), _jsx("div", { className: "nx-popover__scroll", children: shown && (_jsx(Form, { form: form, inputs: inputs, size: "sm", defaultValue: value, className: "nx-table-filters__form", onValueChange: (_, name) => {
                         if (name === null)
                             return;
-                        if (delay > 0 && TYPED.has(inputs.find(params => params.name === name)?.type ?? ""))
+                        if (delay > 0 && TYPED.has(inputs.find(params => params.name === name)?.type ?? 0))
                             wait();
                         else
                             apply();

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

@@ -41,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;
@@ -55,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;
@@ -82,9 +87,15 @@ 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, marks, 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 a section above the page: one row across the table with a button that folds the section's records open
@@ -146,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

@@ -52,7 +52,7 @@ function TableCellContent({ 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 });
@@ -96,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,
@@ -107,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. */
@@ -126,13 +129,16 @@ 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, marks, 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-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: 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}` })] }) }))] }));
+        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);
 /**
@@ -173,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 {};