nexus-shared 3.0.0 → 3.2.0

package/dist/Helpers/UserPreferences.d.ts

@@ -0,0 +1,22 @@
+import type { InputDesign } from "../Interfaces/InputInterfaces.ts";
+import { type UserPreferences } from "../Interfaces/PreferenceInterfaces.ts";
+/** The saved settings, with the defaults for anything missing or invalid. Safe to call on the server. */
+export declare function readUserPreferences(): UserPreferences;
+/** Saves settings and updates every component that shows them. Settings left out keep their value. */
+export declare function setUserPreferences(changes: Partial<UserPreferences>): void;
+/** Calls back when the settings change here or in another tab. Returns the function that stops listening. */
+export declare function subscribeUserPreferences(listener: () => void): () => void;
+/** The current settings; the component renders again when they change. */
+export declare function useUserPreferences(): UserPreferences;
+/**
+ * The locale for the person's number settings (`numberLocale`): what a number box, a slider and a table's number cells
+ * use when they are given no `locale` of their own.
+ */
+export declare function useNumberLocale(): string;
+/**
+ * The design an input takes: its own (its page's or its form's), else the person's choice in the quick preferences,
+ * else `standard`. A grid's cells and a demo of the designs name theirs, so they keep it. An input with no label of its
+ * own - a table's search box, a picker named by a heading above it - has no label to place, so the choice passes it by:
+ * a design for one would only leave an empty strip where the label would be.
+ */
+export declare function useInputDesign(own: InputDesign | undefined, labelled?: boolean): InputDesign;

package/dist/Helpers/UserPreferences.js

@@ -0,0 +1,116 @@
+"use client";
+import { useSyncExternalStore } from "react";
+import { DEFAULT_USER_PREFERENCES, ENumberScales, PREFERENCE_STORAGE_KEYS } from "../Interfaces/PreferenceInterfaces.js";
+import { numberLocale } from "./NumberHelpers.js";
+/*
+ * The person's settings for the interface language, numbers and tables, saved in local storage under the
+ * PREFERENCE_STORAGE_KEYS and read by the components that show them: a change here redraws every number and table on
+ * the page at once, and in other open tabs. The same pattern as the date settings (DatePreferences.ts). On the server
+ * there is no storage, so pages render with the defaults and take the saved settings right after hydration.
+ */
+const listeners = new Set();
+let snapshot = DEFAULT_USER_PREFERENCES;
+const SEPARATORS = ["comma", "period", "space", "none"];
+const INPUT_DESIGNS = ["standard", "outlined", "inbox"];
+function read(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+/** The saved settings, with the defaults for anything missing or invalid. Safe to call on the server. */
+export function readUserPreferences() {
+    if (typeof localStorage === "undefined")
+        return DEFAULT_USER_PREFERENCES;
+    const language = read(PREFERENCE_STORAGE_KEYS.language);
+    const scale = Number(read(PREFERENCE_STORAGE_KEYS.numberScale));
+    const thousands = read(PREFERENCE_STORAGE_KEYS.thousands);
+    const pageSize = Number(read(PREFERENCE_STORAGE_KEYS.pageSize));
+    const rowClick = read(PREFERENCE_STORAGE_KEYS.rowClick);
+    const inputDesign = read(PREFERENCE_STORAGE_KEYS.inputDesign);
+    const next = {
+        language: language === "ne" ? "ne" : DEFAULT_USER_PREFERENCES.language,
+        numberScale: scale === ENumberScales.SouthAsian ? ENumberScales.SouthAsian : DEFAULT_USER_PREFERENCES.numberScale,
+        thousands: thousands && SEPARATORS.includes(thousands) ? thousands : DEFAULT_USER_PREFERENCES.thousands,
+        pageSize: Number.isInteger(pageSize) && pageSize > 0 ? pageSize : DEFAULT_USER_PREFERENCES.pageSize,
+        rowClick: rowClick === "1" ? true : rowClick === "0" ? false : DEFAULT_USER_PREFERENCES.rowClick,
+        inputDesign: inputDesign && INPUT_DESIGNS.includes(inputDesign) ? inputDesign : DEFAULT_USER_PREFERENCES.inputDesign,
+    };
+    // The same object while nothing changed, so React sees a stable snapshot.
+    const keys = Object.keys(next);
+    if (keys.some(key => next[key] !== snapshot[key]))
+        snapshot = next;
+    return snapshot;
+}
+/** Saves settings and updates every component that shows them. Settings left out keep their value. */
+export function setUserPreferences(changes) {
+    try {
+        if (changes.language !== undefined)
+            localStorage.setItem(PREFERENCE_STORAGE_KEYS.language, changes.language);
+        if (changes.numberScale !== undefined)
+            localStorage.setItem(PREFERENCE_STORAGE_KEYS.numberScale, String(changes.numberScale));
+        if (changes.thousands !== undefined)
+            localStorage.setItem(PREFERENCE_STORAGE_KEYS.thousands, changes.thousands);
+        // `null` goes back to each table's own.
+        if (changes.pageSize === null)
+            localStorage.removeItem(PREFERENCE_STORAGE_KEYS.pageSize);
+        else if (changes.pageSize !== undefined)
+            localStorage.setItem(PREFERENCE_STORAGE_KEYS.pageSize, String(changes.pageSize));
+        if (changes.rowClick === null)
+            localStorage.removeItem(PREFERENCE_STORAGE_KEYS.rowClick);
+        else if (changes.rowClick !== undefined)
+            localStorage.setItem(PREFERENCE_STORAGE_KEYS.rowClick, changes.rowClick ? "1" : "0");
+        if (changes.inputDesign === null)
+            localStorage.removeItem(PREFERENCE_STORAGE_KEYS.inputDesign);
+        else if (changes.inputDesign !== undefined)
+            localStorage.setItem(PREFERENCE_STORAGE_KEYS.inputDesign, changes.inputDesign);
+    }
+    catch {
+        // Storage blocked (private mode, for example): the components keep what they have.
+    }
+    for (const listener of listeners)
+        listener();
+}
+// One storage listener for the page, however many components are mounted.
+const STORAGE_KEY_LIST = Object.values(PREFERENCE_STORAGE_KEYS);
+const onStorage = (event) => {
+    if (event.key === null || STORAGE_KEY_LIST.includes(event.key))
+        for (const listener of listeners)
+            listener();
+};
+/** Calls back when the settings change here or in another tab. Returns the function that stops listening. */
+export function subscribeUserPreferences(listener) {
+    if (listeners.size === 0)
+        window.addEventListener("storage", onStorage);
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0)
+            window.removeEventListener("storage", onStorage);
+    };
+}
+const serverSnapshot = () => DEFAULT_USER_PREFERENCES;
+/** The current settings; the component renders again when they change. */
+export function useUserPreferences() {
+    return useSyncExternalStore(subscribeUserPreferences, readUserPreferences, serverSnapshot);
+}
+/**
+ * The locale for the person's number settings (`numberLocale`): what a number box, a slider and a table's number cells
+ * use when they are given no `locale` of their own.
+ */
+export function useNumberLocale() {
+    const { numberScale, thousands } = useUserPreferences();
+    return numberLocale(numberScale, thousands);
+}
+/**
+ * The design an input takes: its own (its page's or its form's), else the person's choice in the quick preferences,
+ * else `standard`. A grid's cells and a demo of the designs name theirs, so they keep it. An input with no label of its
+ * own - a table's search box, a picker named by a heading above it - has no label to place, so the choice passes it by:
+ * a design for one would only leave an empty strip where the label would be.
+ */
+export function useInputDesign(own, labelled = true) {
+    const chosen = useSyncExternalStore(subscribeUserPreferences, () => readUserPreferences().inputDesign, () => DEFAULT_USER_PREFERENCES.inputDesign);
+    return own ?? (labelled ? chosen : null) ?? "standard";
+}

package/dist/Interfaces/CrudInterfaces.d.ts

@@ -1,6 +1,8 @@
 import type { CSSProperties, ReactNode, Ref } from "react";
 import type { PopupSize } from "../Components/Layouts/Popup.tsx";
+import type { PopupHandle } from "../Components/Layouts/PopupHost.tsx";
 import type { FormStore } from "../Helpers/FormStore.ts";
+import type { CrudBackend } from "../Helpers/CrudBackend.ts";
 import type { TableStore } from "../Helpers/TableStore.ts";
 import type { ApiEndpoint } from "./ApiInterfaces.ts";
 import type { FormProps, FormValues, InputParams } from "./FormInterfaces.ts";
@@ -8,14 +10,19 @@ import type { InputDesign } from "./InputInterfaces.ts";
 import type { DataTableProps, TableColumn, TableMassAction, TablePaging, TableRowAction } from "./TableInterfaces.ts";
 /**
  * The lists of a controller: every active record (`normal`), the flagged ones, the trash, and the deleted ones
- * (which can go back to the trash). The records the user pinned are not a list of their own: they sit above the
- * active list, and in it.
+ * (which can go back to the trash). The records the user pinned or made favourites are not lists of their own: they
+ * sit in sections above the active list, and in it.
  */
 export type CrudMode = "normal" | "flag" | "trash" | "deleted";
 /** The built-in actions on one record. */
-export type CrudRowActionName = "view" | "edit" | "flag" | "pin" | "trash" | "recover" | "delete" | "trashFromDelete";
+export type CrudRowActionName = "view" | "edit" | "flag" | "pin" | "favorite" | "history" | "trash" | "recover" | "delete" | "trashFromDelete";
 /** The built-in actions on many records at once. */
-export type CrudMassActionName = "flag" | "pin" | "trash" | "recover" | "delete" | "trashFromDelete" | "description";
+export type CrudMassActionName = "flag" | "pin" | "favorite" | "trash" | "recover" | "delete" | "trashFromDelete" | "description";
+/**
+ * A mark a user puts on a record for themselves: pinned, or one of their favourites. Each has a section above the
+ * active list and its own limit, and a record may carry both.
+ */
+export type CrudMark = "pin" | "favorite";
 /** Every built-in action: Add, the row actions, and a new description for many records. */
 export type CrudActionName = "create" | CrudRowActionName | "description";
 /**
@@ -28,8 +35,15 @@ export interface CrudEndpoints {
     /** One page of a list, for tables that page on the server: `Room/NormalPagination`, … */
     pages?: Partial<Record<CrudMode, ApiEndpoint>>;
     /**
-     * The records the user pinned: `Room/PinListing`. They show in a section above the active list, which the user folds
-     * open, and in the list itself. Without it there is no pinned section, and nothing counts the pins against the limit.
+     * This user's marked records, pins and favourites in one list: `Room/BookmarkListing`. Each record says which marks
+     * it has (`CrudBackend.marksOf`), and the CRUD splits them into the Pinned and Favourites sections above the active
+     * list. It is also where the CRUD learns every record's marks, so a list's own rows need not carry them. Without it
+     * (or `pins`) there are no sections, and nothing counts the marks against their limits.
+     */
+    bookmarks?: ApiEndpoint;
+    /**
+     * The records the user pinned, from a backend that keeps no favourites: `Room/PinListing`. A Pinned section and no
+     * Favourites. `bookmarks` wins when both are given.
      */
     pins?: ApiEndpoint;
     /** One record by its key: `{id}` in the path. */
@@ -37,14 +51,34 @@ export interface CrudEndpoints {
     create?: ApiEndpoint;
     update?: ApiEndpoint;
     flag?: ApiEndpoint;
-    /** Pins a record, or unpins it: `Room/Pin/{id}`. */
+    /**
+     * Sets this user's marks on a record: `Room/SwitchBookmarks/{id}`, sent the whole set the record is to have, never a
+     * toggle (`CrudBackend.marksRequest`). Pin and Favourite both use it.
+     */
+    bookmark?: ApiEndpoint;
+    /** Pins a record or unpins it, on a backend without `bookmark`: `Room/Pin/{id}`, a toggle. `bookmark` wins when both are given. */
     pin?: ApiEndpoint;
+    /**
+     * A record's history, 50 entries a call: `Room/AuditListing/{ownerId}/{skipCount}`. With it every row offers History
+     * and the details View history, to a person who may call it.
+     */
+    audit?: ApiEndpoint;
     trash?: ApiEndpoint;
     recover?: ApiEndpoint;
     delete?: ApiEndpoint;
     trashFromDelete?: ApiEndpoint;
-    /** Actions on many records, sent the selected keys. */
-    mass?: Partial<Record<CrudMassActionName, ApiEndpoint>>;
+    /**
+     * Actions on many records, sent the selected keys. `bookmark` puts one mark on every record sent or takes it off, and
+     * leaves their other marks alone (`Room/MassSwitchBookmarks`): Pin and Favourite both use it, and it wins over `pin`.
+     */
+    mass?: Partial<Record<Exclude<CrudMassActionName, "favorite"> | "bookmark", ApiEndpoint>>;
+    /**
+     * Where other pages look this controller's records up: by key (`Room/FindListing`, a table's client join and a
+     * picker's saved values) and as a picker's list (`Room/ActiveListing`). The CRUD calls neither; a change it makes marks
+     * what was looked up through them as old, so a name or a status shown elsewhere is read again.
+     */
+    findListing?: ApiEndpoint;
+    activeListing?: ApiEndpoint;
 }
 /** Inputs of the Add and Edit forms: one list for both, a list for each, or a function of the action and the row. */
 export type CrudInputs<TRow extends FormValues = FormValues> = readonly InputParams[] | {
@@ -128,6 +162,24 @@ export interface CrudDetailsOptions<TRow extends FormValues = FormValues> {
      * "{Subject} {label}". Default `details`. A popup whose panel is the point says so: `schema`, `preview`.
      */
     label?: string;
+    /** Buttons of the page's own in the footer, before Edit and Close: "View history". */
+    actions?: readonly CrudDetailsAction<TRow>[];
+}
+/**
+ * A button in the details popup's footer. One that names the endpoint it calls shows only to a user who may call
+ * it, by the same rule every built-in action follows - so it appears and disappears with the user's rights, with
+ * nothing to change here when they come from the backend.
+ */
+export interface CrudDetailsAction<TRow extends FormValues = FormValues> {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** What it calls: the button shows only when the user may call it. */
+    endpoint?: ApiEndpoint;
+    /** Hidden for this record, by a rule of the page's own. */
+    hidden?: (row: TRow) => boolean;
+    /** On a click, with the record and the popup (close it, or leave it open beside what this opens). */
+    onSelect: (row: TRow, popup: PopupHandle) => void;
 }
 /** What changed, for `onChange`. */
 export interface CrudChange<TRow extends FormValues = FormValues> {
@@ -137,7 +189,7 @@ export interface CrudChange<TRow extends FormValues = FormValues> {
     mode: CrudMode;
 }
 /** Table settings a CRUD passes on to its `DataTable`. */
-export type CrudTableOptions<TRow extends FormValues = FormValues> = Pick<DataTableProps<TRow>, "pageSize" | "pageSizes" | "defaultSort" | "numbered" | "maxHeight" | "fill" | "excel" | "size" | "searchPlaceholder" | "maxSelection" | "emptyMessage" | "columnsMenu" | "stateKey" | "searchDelay" | "reorderable" | "resizable" | "pinnable" | "moreActions" | "exportable" | "printable" | "exportName" | "onImport" | "openOnClick">;
+export type CrudTableOptions<TRow extends FormValues = FormValues> = Pick<DataTableProps<TRow>, "pageSize" | "pageSizes" | "defaultSort" | "numbered" | "maxHeight" | "fill" | "excel" | "size" | "searchPlaceholder" | "maxSelection" | "emptyMessage" | "columnsMenu" | "stateKey" | "searchDelay" | "filterInputs" | "reorderable" | "resizable" | "pinnable" | "moreActions" | "exportable" | "printable" | "exportName" | "onImport" | "openOnClick">;
 /** Props of `Crud`. */
 export interface CrudProps<TRow extends FormValues = FormValues> {
     /** The endpoints: `MODULES.controller(NexusModule.Reservation, "Guest", "guest")`, or an object of your own. */
@@ -187,6 +239,11 @@ export interface CrudProps<TRow extends FormValues = FormValues> {
     table?: CrudTableOptions<TRow>;
     /** After every change the CRUD made: a record added, saved, trashed, deleted. */
     onChange?: (change: CrudChange<TRow>) => void;
+    /**
+     * The conventions of this controller's backend, when they differ from the app's (`defineCrudBackend`): an app whose
+     * pages sit on two backends gives the other one here. Default the app's, else the Nexus backend's.
+     */
+    backend?: CrudBackend;
     /** The table's name for screen readers. Default: the plural of the subject ("Guests"). */
     "aria-label"?: string;
     "aria-labelledby"?: string;

package/dist/Interfaces/ExcelInterfaces.d.ts

@@ -84,6 +84,18 @@ export interface ExcelSettings {
      * what the editors draw from until it is not.
      */
     inputs?: readonly unknown[];
+    /**
+     * The statuses a new record may start in when it is imported, each with its words: the import offers them as a
+     * choice. Empty, or absent, when the model offers none, and then no choice is shown.
+     */
+    recordStatuses?: ExcelRecordStatus[];
+    /** The status picked unless the person picks another: the backend's "Imported". */
+    defaultRecordStatus?: number;
+}
+/** One status an imported record may start in: the backend's number, and the words for it. */
+export interface ExcelRecordStatus {
+    value: number;
+    label: string;
 }
 /** One thing wrong with one cell, told so the person can find it. */
 export interface ExcelCellProblem {

package/dist/Interfaces/FormInterfaces.d.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactNode, Ref } from "react";
 import type { CheckBoxOnlyProps, CheckBoxProps } from "../Components/Inputs/CheckBox.tsx";
 import type { CheckBoxGroupProps } from "../Components/Inputs/CheckBoxGroup.tsx";
+import type { CodeBoxProps } from "../Components/Inputs/CodeBox.tsx";
 import type { DatePickerProps } from "../Components/Inputs/DatePicker.tsx";
 import type { DateRangePickerProps } from "../Components/Inputs/DateRangePicker.tsx";
 import type { DateTimePickerProps } from "../Components/Inputs/DateTimePicker.tsx";
@@ -63,6 +64,8 @@ export type InputParamsOf<TType extends string, TProps> = DistributiveOmit<TProp
 export type TextInputParams = InputParamsOf<TextBoxType, TextBoxProps>;
 export type TextAreaParams = InputParamsOf<"textarea", TextAreaProps>;
 export type NumberInputParams = InputParamsOf<"number", NumberBoxProps>;
+/** `CodeBox`: a box per character. The value is the code's characters, without separators. */
+export type CodeInputParams = InputParamsOf<"code", CodeBoxProps>;
 /** A checkbox: `true` or `false`. `defaultChecked` is the value of a new row. */
 export type CheckBoxParams = InputParamsOf<"checkbox", CheckBoxProps & CheckBoxOnlyProps>;
 export type SwitchParams = InputParamsOf<"switch", CheckBoxProps>;
@@ -90,7 +93,7 @@ export type TabularParams = InputParamsOf<"tabular", TabularFormProps>;
 /** `GroupForm`: the same rows, each as a section of inputs. */
 export type GroupParams = InputParamsOf<"group", GroupFormProps>;
 /** The params of any input: the root type every form takes as `inputs`. */
-export type InputParams = TextInputParams | TextAreaParams | NumberInputParams | CheckBoxParams | SwitchParams | RadioParams | CheckBoxGroupParams | RadioGroupParams | DropdownParams | DateParams | DateRangeParams | TimeParams | DateTimeParams | SliderParams | RangeSliderParams | MarkdownParams | RichTextParams | TreeParams | TabularParams | GroupParams;
+export type InputParams = TextInputParams | TextAreaParams | NumberInputParams | CodeInputParams | CheckBoxParams | SwitchParams | RadioParams | CheckBoxGroupParams | RadioGroupParams | DropdownParams | DateParams | DateRangeParams | TimeParams | DateTimeParams | SliderParams | RangeSliderParams | MarkdownParams | RichTextParams | TreeParams | TabularParams | GroupParams;
 export type InputType = InputParams["type"];
 /** Settings a check needs to write its message the way the field shows values: the user's date and time settings. */
 export interface InputValidationContext {
@@ -213,8 +216,13 @@ export interface RowsInputHandle<TRow extends RowValue = RowValue> {
     setValue: (rows: readonly TRow[]) => void;
     /** Adds a row with these values (over `newRow`), at `index` or at the end, and focuses its first input. */
     add: (values?: Partial<TRow>, index?: number) => void;
-    /** Removes the row at `index`. */
-    remove: (index: number) => void;
+    /**
+     * Removes the row at `index`, with an Undo under the rows - or none with `undo: false`, for a row the code drops
+     * rather than the person, such as one nothing was typed in.
+     */
+    remove: (index: number, options?: {
+        undo?: boolean;
+    }) => void;
     /** Checks every row, shows every message, and focuses the first problem. Returns whether all is valid. */
     validate: () => boolean;
     /** Brings the row at `index` into view and focuses its input named `name`, or its first input. */
@@ -228,6 +236,17 @@ export interface TabularFormProps<TRow extends RowValue = RowValue> extends Rows
     maxHeight?: number | string;
     /** The row number column. Default true; it is also the button of each row's menu. */
     numbered?: boolean;
+    /**
+     * Where each row's actions sit. `"number"` (the default): a menu beside the row's number. `"end"`: a column fixed at
+     * the right edge, as a data table has them - Remove and Lock as buttons of their own, any other action in a menu
+     * after them.
+     */
+    actionsAt?: "number" | "end";
+    /**
+     * The person can lock a row, and unlock it: a locked row's inputs are read-only and it cannot be removed. The locks
+     * are the screen's, never part of the value - a locked row is still sent. Its button is with the row's actions.
+     */
+    lockable?: boolean;
 }
 /** `GroupForm`: each row as a section of inputs, laid out on a 12-column grid by each input's `span`. */
 export interface GroupFormProps<TRow extends RowValue = RowValue> extends RowsInputProps<TRow> {
@@ -292,7 +311,10 @@ export interface FormProps<TValues extends FormValues = FormValues> {
     readOnly?: boolean;
     /** Every input is disabled, and nothing is checked. */
     disabled?: boolean;
-    /** Shows placeholders in place of the inputs, e.g. while the values load. */
+    /**
+     * The values are loading: the inputs show at once, disabled, so the form has its final size from the first frame, and
+     * nothing typed is taken (even with `disabled` taken off by hand) until it ends. A submit waits too.
+     */
     loading?: boolean;
     id?: string;
     className?: string;
@@ -325,6 +347,13 @@ export type FormSubmitResult<TValues extends FormValues = FormValues> = void | u
 };
 /** Where `SubmitForm` puts its buttons: at the end with the status line before them, at the start, or nowhere (`FormButtons` elsewhere). */
 export type FormButtonsPlacement = "end" | "start" | false;
+/**
+ * What a form's status line reports. `full`: loading, saving, what needs attention, unsaved changes, and when it saved.
+ * `errors`: only an error that belongs to no field, such as the server's "The sign-in took too long", for a short form
+ * that keeps nothing (a sign-in, a search, a code to verify): "Unsaved changes" would be untrue there, the button's
+ * spinner already says it is working, and every field is in view with its own message under it.
+ */
+export type FormStatusLineMode = "full" | "errors";
 /** Props of `SubmitForm`: a `Form` in a `<form>`, checked on submit, with Save, Cancel, and Reset. */
 export interface SubmitFormProps<TValues extends FormValues = FormValues> extends FormProps<TValues> {
     /**
@@ -353,6 +382,8 @@ export interface SubmitFormProps<TValues extends FormValues = FormValues> extend
     resetOnSuccess?: boolean;
     /** Where the buttons go. Default `end`. With `false`, put a `FormButtons` with the same `form` elsewhere, such as a popup's footer. */
     buttons?: FormButtonsPlacement;
+    /** What the status line reports. Default `full`; `errors` for a short form that keeps nothing, such as a sign-in or a search. */
+    statusLine?: FormStatusLineMode;
     /** Asks before the page closes or reloads with unsaved changes. Default: true without a `draftKey` (a draft keeps them). */
     confirmLeave?: boolean;
     /** Name for screen readers. */
@@ -394,8 +425,8 @@ export interface ApiFormProps<TValues extends FormValues = FormValues> extends O
     /** The toast after a save: text, or `false` for none. Default: the server's message, else the endpoint's ("Room saved."), else "Saved." */
     successMessage?: ReactNode | false;
     /**
-     * Loads the values to edit, e.g. a record by id. Placeholders show while it runs, and a failure offers Retry. It runs
-     * once; give the form a new `key` to load another record.
+     * Loads the values to edit, e.g. a record by id. The inputs show disabled while it runs, and a failure offers Retry.
+     * It runs once; give the form a new `key` to load another record.
      */
     loadValue?: (signal: AbortSignal) => Promise<Partial<TValues> | null | undefined>;
 }

package/dist/Interfaces/InputInterfaces.d.ts

@@ -31,6 +31,30 @@ export interface TextRules {
     /** Runs after the built-in rules pass. */
     validate?: TextValidator;
 }
+/**
+ * What a code box takes, one character to a box:
+ * - `digits`: 0–9, with the phone's number pad. A one-time code, a PIN, an SSN.
+ * - `letters`: A–Z.
+ * - `alphanumeric`: letters and digits, such as a licence key or a booking reference.
+ * - `hex`: 0–9 and A–F, such as a colour or a device id.
+ */
+export type CodeCharacters = "digits" | "letters" | "alphanumeric" | "hex";
+/** The shape and rules of a code: how many boxes, in which groups, and what each box takes. Plain values, so params stay serializable. */
+export interface CodeRules {
+    /** How many boxes. Default 6. Left out when `groups` is given. */
+    length?: number;
+    /** Boxes in groups, with a gap or a `separator` between them: `[3, 2, 4]` for an SSN, `[3, 3]` for a one-time code. */
+    groups?: readonly number[];
+    /** Default `digits`. */
+    characters?: CodeCharacters;
+    /** A regular expression for one character, in place of `characters`: `"[A-HJ-NP-Z2-9]"` leaves out I, O, 0 and 1. */
+    allowed?: string;
+    /** Letters as typed are turned to this case. Default `upper`; `any` keeps them as typed. */
+    letterCase?: "upper" | "lower" | "any";
+    required?: boolean;
+    /** Runs after the built-in rules pass, with the code. */
+    validate?: TextValidator;
+}
 /** Custom check for a number. Receives the value, or `null` when the field is empty; returns a message to fail. */
 export type NumberValidator = (value: number | null) => string | null | undefined;
 /** Validation rules for a number, named like the HTML attributes. */

package/dist/Interfaces/MessageInterfaces.d.ts

@@ -1,5 +1,5 @@
 /** The actions the builder knows by name (`MESSAGE_ACTION_NAMES`); `actionWords(name)` gives their words. */
-export type MessageActionName = "load" | "save" | "create" | "update" | "delete" | "trash" | "restore" | "recover" | "flag" | "unflag" | "pin" | "unpin" | "send" | "submit" | "upload" | "download" | "import" | "export" | "copy" | "approve" | "reject" | "cancel";
+export type MessageActionName = "load" | "save" | "create" | "update" | "delete" | "trash" | "restore" | "recover" | "flag" | "unflag" | "pin" | "unpin" | "favorite" | "unfavorite" | "send" | "submit" | "upload" | "download" | "import" | "export" | "copy" | "approve" | "reject" | "cancel";
 /** The words of an action. */
 export interface ActionWords {
     /** "save", or with the object inside: "move {object} to the trash". */

package/dist/Interfaces/PreferenceInterfaces.d.ts

@@ -0,0 +1,51 @@
+import type { InputDesign } from "./InputInterfaces.ts";
+/** The words of the app itself. Data keeps the language it was entered in. */
+export type InterfaceLanguage = "en" | "ne";
+/**
+ * The core's `ENumberScales`, by member value: where the groups of a number fall. `International` writes 1,234,567
+ * (thousand, million, billion); `SouthAsian` writes 12,34,567 (thousand, lakh, crore).
+ */
+export declare const ENumberScales: {
+    readonly International: 0;
+    readonly SouthAsian: 1;
+};
+export type ENumberScales = (typeof ENumberScales)[keyof typeof ENumberScales];
+/**
+ * The mark between groups of digits: 1,200, 1.200, 1 200 (a no-break space) or 1200. A period between the groups
+ * takes a comma for the decimal mark, as it does in much of Europe; every other choice keeps the period.
+ */
+export type ThousandsSeparator = "comma" | "period" | "space" | "none";
+export interface UserPreferences {
+    /** Default `en`. */
+    language: InterfaceLanguage;
+    /** Default `International`. */
+    numberScale: ENumberScales;
+    /** Default `comma`. */
+    thousands: ThousandsSeparator;
+    /**
+     * The rows every table opens with, over the size the table names itself, when the table offers it; a size picked in a
+     * table with a `stateKey` still wins there. `null` (the default): not chosen, each table's own.
+     */
+    pageSize: number | null;
+    /**
+     * A single click on a row opens its record (`true`) or only a double-click does (`false`), in every table, over what
+     * the table says itself. `null` (the default): not chosen, each table's own `openOnClick`.
+     */
+    rowClick: boolean | null;
+    /**
+     * The design every input takes when its page or form names none: the label above the box (`standard`), on its edge
+     * (`outlined`) or inside its top (`inbox`). `null` (the default): not chosen, `standard`. An input whose page fixes a
+     * design - a grid's cells, a demo of the designs - keeps it.
+     */
+    inputDesign: InputDesign | null;
+}
+export declare const DEFAULT_USER_PREFERENCES: UserPreferences;
+/** Local storage keys of the settings. A number scale is kept as its member value ("0", "1"), a row click as "1" or "0". */
+export declare const PREFERENCE_STORAGE_KEYS: {
+    readonly language: "nx-language";
+    readonly numberScale: "nx-number-scale";
+    readonly thousands: "nx-thousands";
+    readonly pageSize: "nx-page-size";
+    readonly rowClick: "nx-row-click";
+    readonly inputDesign: "nx-input-design";
+};

package/dist/Interfaces/PreferenceInterfaces.js

@@ -0,0 +1,25 @@
+/**
+ * The core's `ENumberScales`, by member value: where the groups of a number fall. `International` writes 1,234,567
+ * (thousand, million, billion); `SouthAsian` writes 12,34,567 (thousand, lakh, crore).
+ */
+export const ENumberScales = {
+    International: 0,
+    SouthAsian: 1,
+};
+export const DEFAULT_USER_PREFERENCES = {
+    language: "en",
+    numberScale: ENumberScales.International,
+    thousands: "comma",
+    pageSize: null,
+    rowClick: null,
+    inputDesign: null,
+};
+/** Local storage keys of the settings. A number scale is kept as its member value ("0", "1"), a row click as "1" or "0". */
+export const PREFERENCE_STORAGE_KEYS = {
+    language: "nx-language",
+    numberScale: "nx-number-scale",
+    thousands: "nx-thousands",
+    pageSize: "nx-page-size",
+    rowClick: "nx-row-click",
+    inputDesign: "nx-input-design",
+};