nexus-shared 3.0.0 → 3.1.0

package/dist/Interfaces/TableInterfaces.d.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties, ReactNode, Ref } from "react";
 import type { TableStore } from "../Helpers/TableStore.ts";
 import type { ExcelEndpoints } from "./ExcelInterfaces.ts";
+import type { InputParams } from "./FormInterfaces.ts";
 import type { Size, Tone } from "./TypeInterfaces.ts";
 /** A row's id: its `rowKey` field, such as `id`. */
 export type TableKey = string | number;
@@ -81,7 +82,13 @@ export interface TableSort {
     key: string;
     direction: TableSortDirection;
 }
-/** What the table shows: the search, the sort, and the page. */
+/**
+ * The advanced filter's values, by input name: only the inputs that hold a value, in the order of the inputs, so the
+ * same filters always serialize the same way (a cache key, a request). A date range is its pair ["2026-10-01", null],
+ * a range slider [2, 7], a multiple choice its list, a ticked checkbox `true`.
+ */
+export type TableFilters = Readonly<Record<string, unknown>>;
+/** What the table shows: the search, the filters, the sort, and the page. */
 export interface TableQuery {
     /** The search text, trimmed. */
     search: string;
@@ -89,13 +96,18 @@ export interface TableQuery {
     /** The page, from 1. */
     page: number;
     pageSize: number;
+    /**
+     * The advanced filter while any input holds a value; absent otherwise. A client table matches its rows; a server
+     * table's loader receives the raw values (`filterRequest` gives them in a server's names).
+     */
+    filters?: TableFilters;
 }
 /** One page of rows, as a server sends it. */
 export interface TablePage<TRow extends TableRow = TableRow> {
     rows: readonly TRow[];
     /** Every row there is. Default: the rows given. */
     total?: number;
-    /** The rows that match the search. Default: `total`. */
+    /** The rows that match the search and the filters. Default: `total`. */
     matches?: number;
 }
 /**
@@ -120,7 +132,7 @@ export interface TableState<TRow extends TableRow = TableRow> {
     offset: number;
     /** Every row there is. */
     total: number;
-    /** The rows that match the search. */
+    /** The rows that match the search and the filters. */
     matches: number;
     query: TableQuery;
     /** The selected rows by key (keys as text), in the order they were picked. */
@@ -175,10 +187,15 @@ export interface TableExcel {
     subject?: string;
     /** Values the endpoints' own params need, such as a parent's id. */
     params?: Record<string, string | number>;
-    /** The filters the page holds, beside the table's search and sort, read when an export is asked for. */
+    /** Filters the page holds outside the table, sent beside the table's own (`filterInputs`); the page's win a clash. */
     filters?: () => Record<string, unknown>;
-    /** After an import wrote something. The table reloads itself either way. */
+    /** After an import wrote something, before the table reads its rows again: drop here whatever the page keeps of them. */
     onImported?: () => void;
+    /**
+     * No **Bulk insert** entry. A sheet with a required list cannot be typed in - its key is picked in the spreadsheet -
+     * and its panel says so; this leaves the entry out instead.
+     */
+    bulk?: false;
 }
 /** An item of the table's options menu (⋮): Import, Print, a report of the page's own. */
 export interface TableMenuAction {
@@ -195,6 +212,12 @@ export interface TableMenuAction {
     separator?: boolean;
     onSelect: () => void;
 }
+/** A way to select rows by what they are, such as "Pinned" or "Not flagged". */
+export interface TableSelectBy<TRow extends TableRow = TableRow> {
+    label: string;
+    icon?: ReactNode;
+    test: (row: TRow) => boolean;
+}
 /** An action on one row, in its row: an icon button (`inline`) or an item of the row's menu. */
 export interface TableRowAction<TRow extends TableRow = TableRow> {
     /** Tells actions apart; a test or a style can find it by `data-action`. */
@@ -247,22 +270,33 @@ export interface DataTableProps<TRow extends TableRow = TableRow> {
     searchable?: boolean;
     /** Default "Search…". */
     searchPlaceholder?: string;
-    /** Before the search box, on the left of the bar: tabs, filters. */
+    /** On the left of the bar, after the Add section: tabs, filters. On a narrow table the line under the search. */
     toolbar?: ReactNode;
-    /** At the end of the bar: an Add button. */
+    /** The page's own buttons, in the Add section after the table's Add: first in the bar, last on a phone. */
     actions?: ReactNode;
+    /**
+     * The table's Add, first in the bar. With `excel`, its arrow holds the template, the import and the export, which
+     * then leave the options menu.
+     */
+    add?: {
+        label: ReactNode;
+        onClick: () => void;
+    };
     /** The Columns panel, where columns are shown, hidden, and dragged into another order. Default true. */
     columnsMenu?: boolean;
     /**
      * The spreadsheet side of this table, against the backend's Excel controller. The options menu (⋮) then offers
      * **Download template**, **Import from a spreadsheet** (the file is verified, the person goes over the rows, and the
-     * table reloads once they are written) and, where the endpoints have one, **Export to Excel** - which asks the
-     * server with the search and the sort on screen instead of writing a file of the rows this browser happens to hold.
+     * table reloads once they are written), **Bulk insert** (the same import with no file: the rows are typed into the
+     * same editor; offered only with `add`, as it is an Add of many rows) and, where the endpoints have one, **Export to
+     * Excel** - which asks the server with the search, the filters and the sort on screen instead of writing a file of
+     * the rows this browser happens to hold.
      *
-     * It replaces `onImport`, which is the hook for a page that imports its own way.
+     * It replaces `onImport`, which is the hook for a page that imports its own way. With `add`, they are under the
+     * Add's arrow instead of the options menu.
      */
     excel?: TableExcel;
-    /** A Reload button. Default true when rows are loaded. */
+    /** A Reload button (in the options menu on a table under 375px wide). Default true when rows are loaded. */
     reloadable?: boolean;
     /** When the user presses Reload, before the rows load again: drop a cache of your own. */
     onReload?: () => void;
@@ -288,6 +322,11 @@ export interface DataTableProps<TRow extends TableRow = TableRow> {
     maxSelection?: number;
     /** After the selection changes. */
     onSelectionChange?: (rows: TRow[]) => void;
+    /**
+     * While rows are selected, their count opens a menu that selects again by what the rows are: every row on the page,
+     * then these, each picking exactly the rows on the page that pass its test.
+     */
+    selectBy?: readonly TableSelectBy<TRow>[];
     /** Actions on the selected rows. A function gets the selected rows. */
     massActions?: readonly TableMassAction<TRow>[] | ((rows: TRow[]) => readonly TableMassAction<TRow>[]);
     /** Actions of each row. */
@@ -327,9 +366,17 @@ export interface DataTableProps<TRow extends TableRow = TableRow> {
     stateKey?: string;
     /** Milliseconds after the last key before a search goes to a server. Default 300; a table with every row searches at once. */
     searchDelay?: number;
+    /**
+     * The advanced filter: the inputs the rows can be filtered by, as a form takes them. Keep the array stable.
+     * With any, the options menu (⋮) offers **Filters**: a panel of these inputs under its button, applied as they change.
+     * Name an input after the column `key` it filters (else a path into the row); that name is also what a server gets.
+     * A `number` input named `{key}From` / `{key}To` is a lower / upper bound of column `{key}`.
+     * `required`, `defaultValue` and `defaultChecked` are ignored, so the Add form's params can be reused.
+     */
+    filterInputs?: readonly InputParams[];
     /** Shown when there are no rows at all. Default "No records yet." */
     emptyMessage?: ReactNode;
-    /** Beside the empty message, such as an Add button. */
+    /** Beside the empty message. Default: the table's Add (`add`); `null` for none. */
     emptyAction?: ReactNode;
     /** The tallest the table grows before its rows scroll under a header that stays: pixels or a CSS length. */
     maxHeight?: number | string;

package/dist/Interfaces/ThemeInterfaces.d.ts

@@ -9,9 +9,34 @@ export interface ThemeOption {
 /** The themes in `nexus-shared/styles.css`. Each has a light and a dark palette. */
 export declare const NEXUS_THEMES: readonly ThemeOption[];
 export declare const DEFAULT_THEME = "nexus";
+/** `compact` (default): today's sizes. `cozy`: every control and row a step taller, for touch screens and large monitors. */
+export type Density = "compact" | "cozy";
+/**
+ * Whether things move: `on` even when the operating system asks for less motion, `off` never, `system` as the
+ * operating system says (`prefers-reduced-motion`). Some people turn animations off for the whole desktop and still
+ * want them here, which is why this is a choice of its own.
+ */
+export type AnimationMode = "on" | "off" | "system";
+/** The scale grid, a development tool: off, a 4px sheet with a solid line every 48px, or millimetres and centimetres. */
+export type ScaleGrid = "off" | "px" | "cm";
 /** Browser storage keys for the saved choice. */
 export declare const THEME_STORAGE_KEY = "nx-theme";
 export declare const THEME_MODE_STORAGE_KEY = "nx-mode";
+export declare const DENSITY_STORAGE_KEY = "nx-density";
+export declare const ANIMATIONS_STORAGE_KEY = "nx-animations";
+export declare const GRID_STORAGE_KEY = "nx-grid";
 /** Attributes on `<html>` that select the theme and the mode. Without `data-nx-mode`, the system setting applies. */
 export declare const THEME_ATTRIBUTE = "data-nx-theme";
 export declare const THEME_MODE_ATTRIBUTE = "data-nx-mode";
+/** `compact` or `cozy`; the size tokens follow it. */
+export declare const DENSITY_ATTRIBUTE = "data-nx-density";
+/** The visitor's animations choice, `on` or `off`. Without it, the system setting applies. */
+export declare const ANIMATIONS_ATTRIBUTE = "data-nx-animations";
+/**
+ * What the stylesheets read: `reduce` while nothing may move, `full` otherwise. `ThemeScript` works it out from the
+ * choice and the system setting before the first paint, and again when the system setting changes, so no component
+ * asks `prefers-reduced-motion` itself.
+ */
+export declare const MOTION_ATTRIBUTE = "data-nx-motion";
+/** `px` or `cm` while the scale grid shows; development builds only. */
+export declare const GRID_ATTRIBUTE = "data-nx-grid";

package/dist/Interfaces/ThemeInterfaces.js

@@ -12,6 +12,21 @@ export const DEFAULT_THEME = "nexus";
 /** Browser storage keys for the saved choice. */
 export const THEME_STORAGE_KEY = "nx-theme";
 export const THEME_MODE_STORAGE_KEY = "nx-mode";
+export const DENSITY_STORAGE_KEY = "nx-density";
+export const ANIMATIONS_STORAGE_KEY = "nx-animations";
+export const GRID_STORAGE_KEY = "nx-grid";
 /** Attributes on `<html>` that select the theme and the mode. Without `data-nx-mode`, the system setting applies. */
 export const THEME_ATTRIBUTE = "data-nx-theme";
 export const THEME_MODE_ATTRIBUTE = "data-nx-mode";
+/** `compact` or `cozy`; the size tokens follow it. */
+export const DENSITY_ATTRIBUTE = "data-nx-density";
+/** The visitor's animations choice, `on` or `off`. Without it, the system setting applies. */
+export const ANIMATIONS_ATTRIBUTE = "data-nx-animations";
+/**
+ * What the stylesheets read: `reduce` while nothing may move, `full` otherwise. `ThemeScript` works it out from the
+ * choice and the system setting before the first paint, and again when the system setting changes, so no component
+ * asks `prefers-reduced-motion` itself.
+ */
+export const MOTION_ATTRIBUTE = "data-nx-motion";
+/** `px` or `cm` while the scale grid shows; development builds only. */
+export const GRID_ATTRIBUTE = "data-nx-grid";

package/dist/Services/ExcelApi.d.ts

@@ -43,4 +43,6 @@ export declare function verifyExcelFile(endpoints: ExcelEndpoints, file: File, o
  * they made on screen would be lost. Every check runs again on the way in: what the browser sends is a row, not a
  * decision.
  */
-export declare function importExcelRows(endpoints: ExcelEndpoints, rows: readonly ExcelSheetRow[], options?: ExcelCallOptions): Promise<ApiResult<ExcelImportAnswer>>;
+export declare function importExcelRows(endpoints: ExcelEndpoints, rows: readonly ExcelSheetRow[], options?: ExcelCallOptions & {
+    recordStatus?: number;
+}): Promise<ApiResult<ExcelImportAnswer>>;

package/dist/Services/ExcelApi.js

@@ -104,7 +104,7 @@ export async function verifyExcelFile(endpoints, file, options = {}) {
  */
 export async function importExcelRows(endpoints, rows, options = {}) {
     const backend = getExcelBackend();
-    const answer = await api.post(endpoints.import, backend.importRequest(rows), { ...call(options), count: rows.length, toast: options.toast === false ? false : { success: false } });
+    const answer = await api.post(endpoints.import, backend.importRequest(rows, options.recordStatus), { ...call(options), count: rows.length, toast: options.toast === false ? false : { success: false } });
     // An import that wrote nothing at all is the one failure; it still answers with what it refused, where it says so.
     return { ...answer, result: answer.result === undefined ? undefined : backend.readImport(answer.result) };
 }

package/dist/Services/ThemeService.d.ts

@@ -1,4 +1,4 @@
-import { type ThemeMode } from "../Interfaces/ThemeInterfaces.ts";
+import { type AnimationMode, type Density, type ScaleGrid, type ThemeMode } from "../Interfaces/ThemeInterfaces.ts";
 export interface ThemeState {
     /** The active theme id. */
     theme: string;
@@ -6,12 +6,28 @@ export interface ThemeState {
     mode: ThemeMode;
     /** The mode actually shown. */
     resolvedMode: "light" | "dark";
+    density: Density;
+    /** The chosen animations, which may be `system`. */
+    animations: AnimationMode;
+    /** Whether things move now: the choice, or the system setting under `system`. */
+    motion: boolean;
+    /** The scale grid; always `off` outside a development build. */
+    grid: ScaleGrid;
     setTheme: (theme: string) => void;
     setMode: (mode: ThemeMode) => void;
+    setDensity: (density: Density) => void;
+    setAnimations: (animations: AnimationMode) => void;
+    setGrid: (grid: ScaleGrid) => void;
 }
 /** Switches the theme on this page and saves it for the next visit. */
 export declare function setTheme(theme: string): void;
 /** Switches light, dark, or system on this page and saves it for the next visit. */
 export declare function setThemeMode(mode: ThemeMode): void;
-/** The current theme and mode, and functions to change them. */
+/** Switches compact or cozy on this page and saves it: every control and row follows at once. */
+export declare function setDensity(density: Density): void;
+/** Turns animations on, off, or back to the system setting on this page, and saves it. */
+export declare function setAnimations(animations: AnimationMode): void;
+/** Shows the scale grid (`px`, `cm`) or hides it (`off`), and saves it. Outside a development build it never shows. */
+export declare function setScaleGrid(grid: ScaleGrid): void;
+/** The current theme, mode, density, animations and scale grid, and functions to change them. */
 export declare function useTheme(): ThemeState;

package/dist/Services/ThemeService.js

@@ -1,11 +1,11 @@
 "use client";
 import { useSyncExternalStore } from "react";
-import { THEME_ID_PATTERN } from "../Helpers/ThemeHelpers.js";
-import { DEFAULT_THEME, THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE, THEME_MODE_STORAGE_KEY, THEME_STORAGE_KEY, } from "../Interfaces/ThemeInterfaces.js";
+import { isDevelopmentBuild, motionFor, REDUCED_MOTION_QUERY, THEME_ID_PATTERN } from "../Helpers/ThemeHelpers.js";
+import { ANIMATIONS_ATTRIBUTE, ANIMATIONS_STORAGE_KEY, DEFAULT_THEME, DENSITY_ATTRIBUTE, DENSITY_STORAGE_KEY, GRID_ATTRIBUTE, GRID_STORAGE_KEY, MOTION_ATTRIBUTE, THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE, THEME_MODE_STORAGE_KEY, THEME_STORAGE_KEY, } from "../Interfaces/ThemeInterfaces.js";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 // Before hydration there is no document; the real values follow right after.
-const SERVER_SNAPSHOT = `${DEFAULT_THEME} system light`;
-// Colors switch at once, instead of every button and border running its own transition.
+const SERVER_SNAPSHOT = `${DEFAULT_THEME} system light compact system full off`;
+// Colors and sizes switch at once, instead of every button and border running its own transition.
 function withoutTransitions(change) {
     const style = document.createElement("style");
     style.textContent = "*,*::before,*::after{transition:none!important}";
@@ -22,12 +22,33 @@ function save(key, value) {
         // Storage blocked (private mode, for example): the choice lasts until the page reloads.
     }
 }
+/** Sets an attribute on `<html>`, or takes it away for the choice that means "nothing chosen". */
+function mark(attribute, value, none) {
+    const root = document.documentElement;
+    if (value === none)
+        root.removeAttribute(attribute);
+    else
+        root.setAttribute(attribute, value);
+}
+const isMode = (value) => value === "light" || value === "dark" || value === "system";
+const isDensity = (value) => value === "compact" || value === "cozy";
+const isAnimations = (value) => value === "on" || value === "off" || value === "system";
+const isGrid = (value) => value === "off" || value === "px" || value === "cm";
 function applyTheme(theme) {
     withoutTransitions(() => document.documentElement.setAttribute(THEME_ATTRIBUTE, theme));
 }
 function applyMode(mode) {
-    const root = document.documentElement;
-    withoutTransitions(() => (mode === "system" ? root.removeAttribute(THEME_MODE_ATTRIBUTE) : root.setAttribute(THEME_MODE_ATTRIBUTE, mode)));
+    withoutTransitions(() => mark(THEME_MODE_ATTRIBUTE, mode, "system"));
+}
+function applyDensity(density) {
+    withoutTransitions(() => document.documentElement.setAttribute(DENSITY_ATTRIBUTE, density));
+}
+function applyAnimations(animations) {
+    mark(ANIMATIONS_ATTRIBUTE, animations, "system");
+    document.documentElement.setAttribute(MOTION_ATTRIBUTE, motionFor(animations, window.matchMedia(REDUCED_MOTION_QUERY).matches));
+}
+function applyGrid(grid) {
+    mark(GRID_ATTRIBUTE, isDevelopmentBuild() ? grid : "off", "off");
 }
 /** Switches the theme on this page and saves it for the next visit. */
 export function setTheme(theme) {
@@ -41,27 +62,63 @@ export function setThemeMode(mode) {
     applyMode(mode);
     save(THEME_MODE_STORAGE_KEY, mode);
 }
+/** Switches compact or cozy on this page and saves it: every control and row follows at once. */
+export function setDensity(density) {
+    if (!isDensity(density))
+        return;
+    applyDensity(density);
+    save(DENSITY_STORAGE_KEY, density);
+}
+/** Turns animations on, off, or back to the system setting on this page, and saves it. */
+export function setAnimations(animations) {
+    if (!isAnimations(animations))
+        return;
+    applyAnimations(animations);
+    save(ANIMATIONS_STORAGE_KEY, animations);
+}
+/** Shows the scale grid (`px`, `cm`) or hides it (`off`), and saves it. Outside a development build it never shows. */
+export function setScaleGrid(grid) {
+    if (!isGrid(grid))
+        return;
+    applyGrid(grid);
+    save(GRID_STORAGE_KEY, grid);
+}
 function readSnapshot() {
     const root = document.documentElement;
     const theme = root.getAttribute(THEME_ATTRIBUTE) || DEFAULT_THEME;
     const attribute = root.getAttribute(THEME_MODE_ATTRIBUTE);
     const mode = attribute === "light" || attribute === "dark" ? attribute : "system";
     const resolved = mode === "system" ? (window.matchMedia(DARK_QUERY).matches ? "dark" : "light") : mode;
-    return `${theme} ${mode} ${resolved}`;
+    const density = root.getAttribute(DENSITY_ATTRIBUTE) === "cozy" ? "cozy" : "compact";
+    const chosen = root.getAttribute(ANIMATIONS_ATTRIBUTE);
+    const animations = chosen === "on" || chosen === "off" ? chosen : "system";
+    // Read as the stylesheets read it; a page without ThemeScript has no attribute, and its animations run.
+    const motion = root.getAttribute(MOTION_ATTRIBUTE) === "reduce" ? "reduce" : "full";
+    const grid = root.getAttribute(GRID_ATTRIBUTE);
+    return `${theme} ${mode} ${resolved} ${density} ${animations} ${motion} ${grid === "px" || grid === "cm" ? grid : "off"}`;
 }
 // The attributes on <html> are the source of truth, so every picker on the page stays in step,
 // including changes made by the system setting or in another tab.
 function subscribe(onChange) {
     const observer = new MutationObserver(onChange);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: [THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE] });
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: [THEME_ATTRIBUTE, THEME_MODE_ATTRIBUTE, DENSITY_ATTRIBUTE, ANIMATIONS_ATTRIBUTE, MOTION_ATTRIBUTE, GRID_ATTRIBUTE],
+    });
     const media = window.matchMedia(DARK_QUERY);
     media.addEventListener("change", onChange);
     const onStorage = (event) => {
-        if (event.key === THEME_STORAGE_KEY && event.newValue && THEME_ID_PATTERN.test(event.newValue))
-            applyTheme(event.newValue);
-        if (event.key === THEME_MODE_STORAGE_KEY && (event.newValue === "light" || event.newValue === "dark" || event.newValue === "system")) {
-            applyMode(event.newValue);
-        }
+        const value = event.newValue;
+        if (event.key === THEME_STORAGE_KEY && value && THEME_ID_PATTERN.test(value))
+            applyTheme(value);
+        else if (event.key === THEME_MODE_STORAGE_KEY && isMode(value))
+            applyMode(value);
+        else if (event.key === DENSITY_STORAGE_KEY && isDensity(value))
+            applyDensity(value);
+        else if (event.key === ANIMATIONS_STORAGE_KEY && isAnimations(value))
+            applyAnimations(value);
+        else if (event.key === GRID_STORAGE_KEY && isGrid(value))
+            applyGrid(value);
     };
     window.addEventListener("storage", onStorage);
     return () => {
@@ -70,14 +127,21 @@ function subscribe(onChange) {
         window.removeEventListener("storage", onStorage);
     };
 }
-/** The current theme and mode, and functions to change them. */
+/** The current theme, mode, density, animations and scale grid, and functions to change them. */
 export function useTheme() {
-    const [theme, mode, resolvedMode] = useSyncExternalStore(subscribe, readSnapshot, () => SERVER_SNAPSHOT).split(" ");
+    const [theme, mode, resolvedMode, density, animations, motion, grid] = useSyncExternalStore(subscribe, readSnapshot, () => SERVER_SNAPSHOT).split(" ");
     return {
         theme: theme ?? DEFAULT_THEME,
-        mode: (mode ?? "system"),
+        mode: isMode(mode) ? mode : "system",
         resolvedMode: resolvedMode === "dark" ? "dark" : "light",
+        density: density === "cozy" ? "cozy" : "compact",
+        animations: isAnimations(animations) ? animations : "system",
+        motion: motion !== "reduce",
+        grid: isGrid(grid) ? grid : "off",
         setTheme,
         setMode: setThemeMode,
+        setDensity,
+        setAnimations,
+        setGrid: setScaleGrid,
     };
 }

package/dist/Shared.Index.d.ts

@@ -32,6 +32,7 @@ export * from "./Helpers/NumberHelpers.ts";
 export * from "./Helpers/Permissions.ts";
 export * from "./Helpers/RichTextHelpers.ts";
 export * from "./Helpers/RowsStore.ts";
+export * from "./Helpers/TableFilters.ts";
 export * from "./Helpers/TableHelpers.ts";
 export * from "./Helpers/TableStore.ts";
 export * from "./Helpers/ThemeHelpers.ts";
@@ -46,6 +47,7 @@ export * from "./Interfaces/ExcelInterfaces.ts";
 export * from "./Interfaces/FormInterfaces.ts";
 export * from "./Interfaces/InputInterfaces.ts";
 export * from "./Interfaces/MessageInterfaces.ts";
+export * from "./Interfaces/PreferenceInterfaces.ts";
 export * from "./Interfaces/TableInterfaces.ts";
 export * from "./Interfaces/ThemeInterfaces.ts";
 export * from "./Interfaces/TypeInterfaces.ts";

package/dist/Shared.Index.js

@@ -35,6 +35,7 @@ export * from "./Helpers/NumberHelpers.js";
 export * from "./Helpers/Permissions.js";
 export * from "./Helpers/RichTextHelpers.js";
 export * from "./Helpers/RowsStore.js";
+export * from "./Helpers/TableFilters.js";
 export * from "./Helpers/TableHelpers.js";
 export * from "./Helpers/TableStore.js";
 export * from "./Helpers/ThemeHelpers.js";
@@ -50,6 +51,7 @@ export * from "./Interfaces/ExcelInterfaces.js";
 export * from "./Interfaces/FormInterfaces.js";
 export * from "./Interfaces/InputInterfaces.js";
 export * from "./Interfaces/MessageInterfaces.js";
+export * from "./Interfaces/PreferenceInterfaces.js";
 export * from "./Interfaces/TableInterfaces.js";
 export * from "./Interfaces/ThemeInterfaces.js";
 export * from "./Interfaces/TypeInterfaces.js";

package/package.json

@@ -1,85 +1,85 @@
-{
-  "name": "nexus-shared",
-  "version": "3.0.0",
-  "description": "The Nexus component library for React and Next.js: params-driven inputs and forms, a data table with a CRUD on top, popups and toasts, an API layer with permissions, Markdown and rich text editors, and 7 themes in light and dark.",
-  "keywords": [
-    "react",
-    "nextjs",
-    "components",
-    "ui",
-    "forms",
-    "datatable",
-    "crud",
-    "inputs",
-    "design-system",
-    "typescript",
-    "nepali-calendar",
-    "nexus"
-  ],
-  "license": "MIT",
-  "author": "Bijay Adhikari",
-  "type": "module",
-  "sideEffects": [
-    "*.css"
-  ],
-  "exports": {
-    ".": {
-      "types": "./dist/Shared.Index.d.ts",
-      "default": "./dist/Shared.Index.js"
-    },
-    "./client": {
-      "types": "./dist/Client.Index.d.ts",
-      "default": "./dist/Client.Index.js"
-    },
-    "./server": {
-      "types": "./dist/Server.Index.d.ts",
-      "default": "./dist/Server.Index.js"
-    },
-    "./styles.css": "./src/Styles/Nexus.Index.css",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist",
-    "src/Styles",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "typecheck": "tsc -p tsconfig.json",
-    "test": "node scripts/test-all.mjs",
-    "check:themes": "node scripts/check-themes.mjs",
-    "test:api": "node scripts/test-api.mts",
-    "test:chat": "node scripts/test-chat.mts",
-    "test:dates": "node scripts/test-date-helpers.mts",
-    "test:datetimes": "node scripts/test-datetime-helpers.mts",
-    "test:drag": "node scripts/test-drag-helpers.mts",
-    "test:excel": "node scripts/test-excel.mts",
-    "test:dropdown": "node scripts/test-dropdown-helpers.mts",
-    "test:forms": "node scripts/test-form-store.mts",
-    "test:markdown": "node scripts/test-markdown.mts",
-    "test:numbers": "node scripts/test-number-helpers.mts",
-    "test:popups": "node scripts/test-popup-rules.mts",
-    "test:richtext": "node scripts/test-richtext.mts",
-    "test:rows": "node scripts/test-rows-store.mts",
-    "test:table": "node scripts/test-table.mts",
-    "test:times": "node scripts/test-time-helpers.mts",
-    "test:tree": "node scripts/test-tree-store.mts",
-    "test:types": "tsc -p scripts/type-checks/tsconfig.json"
-  },
-  "dependencies": {
-    "nexus-icons": "^1.1.0"
-  },
-  "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19"
-  },
-  "devDependencies": {
-    "@types/react": "19.3.0"
-  },
-  "engines": {
-    "node": ">=20.9"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "nexus-shared",
+  "version": "3.1.0",
+  "description": "The Nexus component library for React and Next.js: params-driven inputs and forms, a data table with a CRUD on top, popups and toasts, an API layer with permissions, Markdown and rich text editors, and 7 themes in light and dark.",
+  "keywords": [
+    "react",
+    "nextjs",
+    "components",
+    "ui",
+    "forms",
+    "datatable",
+    "crud",
+    "inputs",
+    "design-system",
+    "typescript",
+    "nepali-calendar",
+    "nexus"
+  ],
+  "license": "MIT",
+  "author": "Bijay Adhikari",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/Shared.Index.d.ts",
+      "default": "./dist/Shared.Index.js"
+    },
+    "./client": {
+      "types": "./dist/Client.Index.d.ts",
+      "default": "./dist/Client.Index.js"
+    },
+    "./server": {
+      "types": "./dist/Server.Index.d.ts",
+      "default": "./dist/Server.Index.js"
+    },
+    "./styles.css": "./src/Styles/Nexus.Index.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src/Styles",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "node scripts/test-all.mjs",
+    "check:themes": "node scripts/check-themes.mjs",
+    "test:api": "node scripts/test-api.mts",
+    "test:chat": "node scripts/test-chat.mts",
+    "test:dates": "node scripts/test-date-helpers.mts",
+    "test:datetimes": "node scripts/test-datetime-helpers.mts",
+    "test:drag": "node scripts/test-drag-helpers.mts",
+    "test:excel": "node scripts/test-excel.mts",
+    "test:dropdown": "node scripts/test-dropdown-helpers.mts",
+    "test:forms": "node scripts/test-form-store.mts",
+    "test:markdown": "node scripts/test-markdown.mts",
+    "test:numbers": "node scripts/test-number-helpers.mts",
+    "test:popups": "node scripts/test-popup-rules.mts",
+    "test:richtext": "node scripts/test-richtext.mts",
+    "test:rows": "node scripts/test-rows-store.mts",
+    "test:table": "node scripts/test-table.mts",
+    "test:times": "node scripts/test-time-helpers.mts",
+    "test:tree": "node scripts/test-tree-store.mts",
+    "test:types": "tsc -p scripts/type-checks/tsconfig.json"
+  },
+  "dependencies": {
+    "nexus-icons": "^1.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0"
+  },
+  "engines": {
+    "node": ">=20.9"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}