@tradalab/lyra 3.6.2 → 3.8.0

package/README.md

@@ -1,131 +1,166 @@
-# @tradalab/lyra
-
-> Tradalab's UI kit — shadcn (`radix-lyra` style) primitives, composed
-> components, and an app shell for **React 19 / Next 16 / Tailwind v4**.
-
-ESM-only. Extracted from Tradalab's foundation kit so every company app shares
-the same component surface.
-
-## Install
-
-```bash
-pnpm add @tradalab/lyra
-# peers: react ^19, react-dom ^19  (next ^16 only if you use /shell)
-```
-
-The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
-
-```css
-/* app/globals.css */
-@import "@tradalab/lyra/styles.css";
-```
-
-## Subpaths
-
-| Subpath | Exports | Boundary |
-|---|---|---|
-| `@tradalab/lyra/utils` | `cn` | server-safe |
-| `@tradalab/lyra/hooks` | `useMobile` | client |
-| `@tradalab/lyra/ui` | 60 shadcn primitives + `AccountMenu`, `ActionButton`, `Container`, `EmptyState`, `StatusBadge` | client |
-| `@tradalab/lyra/blocks` | `Form`/`FormField` + RHF glue, `Panel`, `Confirm`/`useConfirm`, `Tree`, `TzPicker`, `OptionPicker`, `McpSettings`, `LlmSettings`, `PlatePicker`, `usePlate`, `useCompact`, `PreferenceScript` | client |
-| `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
-| `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
-
-Client subpaths carry a build-injected `"use client"`; import them inside a
-client tree or pass via `children` — don't import them into a Server Component's
-own module.
-
-```tsx
-import { Button, Card, CardHeader } from "@tradalab/lyra/ui"
-import { AppShell, NavItem } from "@tradalab/lyra/shell"
-```
-
-## Toast
-
-`2.0.0` replaced the sonner-based toast with shadcn's Base UI Toast. `sonner` is
-gone — it is no longer a peer dependency, and apps should drop it.
-
-`toast` is a **manager object, not a callable**:
-
-```tsx
-import { Toaster, toast } from "@tradalab/lyra/ui"
-
-toast.add({ title: "Saved" })
-toast.add({ title: "Upload failed", description: err.message, type: "error" })
-const id = toast.add({ title: "Uploading…", type: "loading", timeout: 0 })
-toast.close(id)
-```
-
-`type` is `"success" | "error" | "info" | "warning" | "loading"` — there is no
-`toast.success("x")`. `timeout: 0` never auto-dismisses (sonner's `duration:
-Infinity`). Position belongs to the viewport this package styles, so sonner's
-`position` and `richColors` props have no equivalent. Mount `<Toaster/>` once —
-apps on `@tradalab/nekit` already get it from `NekitProvider`.
-
-## Plate and density
-
-`3.4.0` added a palette the reader picks. The colours live in `styles.css` behind
-`[data-plate="<name>"]`, so an app only wires the choice:
-
-```tsx
-import { PlatePicker, PreferenceScript, useCompact, usePlate } from "@tradalab/lyra/blocks"
-
-// In the root layout, as early in the tree as possible.
-<PreferenceScript />
-
-// On a settings screen.
-const [plate, setPlate] = usePlate()
-<PlatePicker value={plate} onChange={setPlate} label="Accent colour" resetLabel="Default" />
-```
-
-`usePlate` and `useCompact` remember the choice per DEVICE, in `localStorage`
-under `lyra.plate` and `lyra.compact`, which is the same granularity as the
-theme. Absence means the default, so turning one off removes its key rather than
-storing "off".
-
-Keep `suppressHydrationWarning` on `<html>`. The script writes attributes the
-server did not render, which is the same reason `next-themes` needs it; every
-tradalab layout and `template-web` already carry it.
-
-Leaving out `<PreferenceScript />` is neither a compile error nor a runtime one.
-The attributes then arrive from an effect, so the first paint is always the
-neutral default and every reader who chose a colour watches it flip. It has to be
-a raw inline script to beat that paint, which is why lyra renders it instead of
-leaving it to each app.
-
-## Develop
-
-```bash
-make install            # pnpm install
-make build              # tsup + inject-use-client + verify-build-output
-make verify             # typecheck + lint + test
-make ui-add <name>      # scaffold a shadcn primitive, adapt, rebuild barrel
-make ui-update <name>   # overwrite a primitive with the latest upstream version
-make ui-sync            # re-adapt every primitive + rebuild barrel
-make ui-diff            # report which primitives changed upstream (exit 1 if any)
-```
-
-**Staying current with shadcn** — `make ui-diff` compares every primitive
-against the live `radix-lyra` registry and exits non-zero when one has moved.
-It normalises away everything the CLI would rewrite anyway (icon-library
-placeholders, `cn-*` template classes, import aliases, prettier line-wrapping),
-so what it prints is real change. Prefer it over `shadcn add --diff`, which
-caps its output at five files per run.
-
-A primitive lyra deliberately diverges from carries a `customised` note in
-`primitives.lock.json`; `ui-diff` lists those separately instead of failing on
-them forever. Document the divergence in a JSDoc block in the file too —
-`make ui-update` will overwrite it, and that note is what tells the next person
-to put it back.
-
-**Layout** — `src/<layer>/` with a barrel `index.ts`; one tsup entry per
-subpath; ESM-only to `dist/`. **Layers** (enforced by `eslint-plugin-boundaries`):
-`utils`/`hooks` (foundation) → `ui` → `shell`. No upward imports.
-
-**`"use client"` is not in source** — it is injected onto the client entry
-artifacts post-build by `scripts/inject-use-client.mjs`, then asserted by
-`scripts/verify-build-output.mjs`. `scripts/sync-ui.mjs` adapts shadcn-CLI
-output to repo conventions.
-
-**Release** — `pnpm publish --no-git-checks` (the `prepublishOnly` hook builds
-first). Published to the npm public registry.
+# @tradalab/lyra
+
+> Tradalab's UI kit — shadcn (`radix-lyra` style) primitives, composed
+> components, and an app shell for **React 19 / Next 16 / Tailwind v4**.
+
+ESM-only. Extracted from Tradalab's foundation kit so every company app shares
+the same component surface.
+
+## Install
+
+```bash
+pnpm add @tradalab/lyra
+# peers: react ^19, react-dom ^19  (next ^16 only if you use /shell)
+```
+
+The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
+
+```css
+/* app/globals.css */
+@import "@tradalab/lyra/styles.css";
+```
+
+## Subpaths
+
+| Subpath | Exports | Boundary |
+|---|---|---|
+| `@tradalab/lyra/utils` | `cn` | server-safe |
+| `@tradalab/lyra/hooks` | `useMobile` | client |
+| `@tradalab/lyra/ui` | 60 shadcn primitives + `AccountMenu`, `ActionButton`, `Container`, `EmptyState`, `StatusBadge` | client |
+| `@tradalab/lyra/blocks` | `Form`/`FormField` + RHF glue, `Panel`, `Confirm`/`useConfirm`, `Tree`, `TzPicker`, `OptionPicker`, `McpSettings`, `LlmSettings`, `PlatePicker`, `usePlate`, `useCompact`, `PreferenceScript` | client |
+| `@tradalab/lyra/data-table` | `DataTable` + `usePager`, `TableFilterBar`, `TableSearch`, `TableReload`, `filterRows`, `pageWindow` | client |
+| `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
+| `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
+
+Client subpaths carry a build-injected `"use client"`; import them inside a
+client tree or pass via `children` — don't import them into a Server Component's
+own module.
+
+```tsx
+import { Button, Card, CardHeader } from "@tradalab/lyra/ui"
+import { AppShell, NavItem } from "@tradalab/lyra/shell"
+```
+
+## Tables: four modes, and the list decides which
+
+`DataTable` owns the controls; `usePager` (3.8.0) owns the wiring that every console used to
+write out by hand. Pick the mode from what is behind the list, not from habit.
+
+| Mode | Pass | For |
+|---|---|---|
+| numbered | `{...pager.bind(total)}` | the server pages it and returns a `total` - a list somebody **audits** |
+| cursor | `onLoadMore` + `hasMore` + `loadingMore` | the store only gives a continuation token and no count |
+| client-paged | `{...pager.slice(rows).props}` | the fetch IS the whole answer: a list derived from two endpoints, one operation's result |
+| unpaged | `unpaged` | the row count does not grow with tenants or with time - a declared inventory, a fixed catalogue |
+
+```tsx
+const pager = usePager({ pageSize: 25, labels })   // labels come from the app's i18n
+const { data } = useThings({ page: pager.page, pageSize: pager.size })
+
+<TableFilterBar actions={<TableReload onClick={refetch} loading={isFetching} />}>
+  <TableSearch onChange={pager.onFilter(setQuery)} placeholder="Name or code" />
+</TableFilterBar>
+<DataTable columns={columns} data={data?.things ?? []} {...pager.bind(data?.total ?? 0)} />
+```
+
+Two rules the components enforce rather than document:
+
+- **`TableFilterBar` replaces `DataTable`'s own bar** (`searchable`/`toolbar`/`onReload`). Two
+  bars on one table is how a screen ends up with two search boxes that search different things.
+- **`searchable` stays off on anything the server pages.** It filters the rows already in the
+  browser, so it answers "no results" about a row on page three. Send the query instead;
+  `filterRows` is for the unpaged case, where local filtering is the truth.
+
+lyra ships **no copy and no number formatting**: `usePager` takes `labels`, including
+`range: ({from, to, total}) => string`. That keeps `next-intl` out of the library, which matters
+because `data-table` must stay loadable by a consumer that is not a Next app.
+
+## Toast
+
+`2.0.0` replaced the sonner-based toast with shadcn's Base UI Toast. `sonner` is
+gone — it is no longer a peer dependency, and apps should drop it.
+
+`toast` is a **manager object, not a callable**:
+
+```tsx
+import { Toaster, toast } from "@tradalab/lyra/ui"
+
+toast.add({ title: "Saved" })
+toast.add({ title: "Upload failed", description: err.message, type: "error" })
+const id = toast.add({ title: "Uploading…", type: "loading", timeout: 0 })
+toast.close(id)
+```
+
+`type` is `"success" | "error" | "info" | "warning" | "loading"` — there is no
+`toast.success("x")`. `timeout: 0` never auto-dismisses (sonner's `duration:
+Infinity`). Position belongs to the viewport this package styles, so sonner's
+`position` and `richColors` props have no equivalent. Mount `<Toaster/>` once —
+apps on `@tradalab/nekit` already get it from `NekitProvider`.
+
+## Plate and density
+
+`3.4.0` added a palette the reader picks. The colours live in `styles.css` behind
+`[data-plate="<name>"]`, so an app only wires the choice:
+
+```tsx
+import { PlatePicker, PreferenceScript, useCompact, usePlate } from "@tradalab/lyra/blocks"
+
+// In the root layout, as early in the tree as possible.
+<PreferenceScript />
+
+// On a settings screen.
+const [plate, setPlate] = usePlate()
+<PlatePicker value={plate} onChange={setPlate} label="Accent colour" resetLabel="Default" />
+```
+
+`usePlate` and `useCompact` remember the choice per DEVICE, in `localStorage`
+under `lyra.plate` and `lyra.compact`, which is the same granularity as the
+theme. Absence means the default, so turning one off removes its key rather than
+storing "off".
+
+Keep `suppressHydrationWarning` on `<html>`. The script writes attributes the
+server did not render, which is the same reason `next-themes` needs it; every
+tradalab layout and `template-web` already carry it.
+
+Leaving out `<PreferenceScript />` is neither a compile error nor a runtime one.
+The attributes then arrive from an effect, so the first paint is always the
+neutral default and every reader who chose a colour watches it flip. It has to be
+a raw inline script to beat that paint, which is why lyra renders it instead of
+leaving it to each app.
+
+## Develop
+
+```bash
+make install            # pnpm install
+make build              # tsup + inject-use-client + verify-build-output
+make verify             # typecheck + lint + test
+make ui-add <name>      # scaffold a shadcn primitive, adapt, rebuild barrel
+make ui-update <name>   # overwrite a primitive with the latest upstream version
+make ui-sync            # re-adapt every primitive + rebuild barrel
+make ui-diff            # report which primitives changed upstream (exit 1 if any)
+```
+
+**Staying current with shadcn** — `make ui-diff` compares every primitive
+against the live `radix-lyra` registry and exits non-zero when one has moved.
+It normalises away everything the CLI would rewrite anyway (icon-library
+placeholders, `cn-*` template classes, import aliases, prettier line-wrapping),
+so what it prints is real change. Prefer it over `shadcn add --diff`, which
+caps its output at five files per run.
+
+A primitive lyra deliberately diverges from carries a `customised` note in
+`primitives.lock.json`; `ui-diff` lists those separately instead of failing on
+them forever. Document the divergence in a JSDoc block in the file too —
+`make ui-update` will overwrite it, and that note is what tells the next person
+to put it back.
+
+**Layout** — `src/<layer>/` with a barrel `index.ts`; one tsup entry per
+subpath; ESM-only to `dist/`. **Layers** (enforced by `eslint-plugin-boundaries`):
+`utils`/`hooks` (foundation) → `ui` → `shell`. No upward imports.
+
+**`"use client"` is not in source** — it is injected onto the client entry
+artifacts post-build by `scripts/inject-use-client.mjs`, then asserted by
+`scripts/verify-build-output.mjs`. `scripts/sync-ui.mjs` adapts shadcn-CLI
+output to repo conventions.
+
+**Release** — `pnpm publish --no-git-checks` (the `prepublishOnly` hook builds
+first). Published to the npm public registry.

package/dist/data-table/index.d.ts

@@ -3,6 +3,129 @@ import { ReactNode, HTMLAttributes } from 'react';
 import { ColumnDef, Row, Cell, Column, Table, Header, HeaderGroup } from '@tanstack/react-table';
 export { ColumnDef } from '@tanstack/react-table';
 
+/**
+ * Case-insensitive search over chosen fields, for a list the server does NOT page.
+ *
+ * Honest only there: when the fetch is the whole answer, filtering here searches everything
+ * the reader could have seen. On a server-paged list the same code searches one page and then
+ * reports "no results" about rows it never had - which is why those lists send the query to
+ * the server instead.
+ *
+ * Takes a field selector rather than key names so a derived value (a joined label, a formatted
+ * code) is searchable too - on the tables this exists for, the derived column is usually the
+ * one people type into the box.
+ */
+declare function filterRows<T>(rows: T[], q: string, fields: (r: T) => (string | undefined | null)[]): T[];
+
+/**
+ * The row above a table: narrowing on the left, actions on the right.
+ *
+ * This REPLACES `DataTable`'s own bar (`searchable` + `toolbar` + `onReload`) rather than
+ * sitting beside it. Two bars on one table is how a screen ends up with two search boxes that
+ * search different things, and `searchable` in particular must stay off on a server-paged
+ * table: it filters the rows already in the browser, so it answers "no results" about a row
+ * that is on page three.
+ */
+declare function TableFilterBar({ children, actions, className, }: {
+    children?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * A search box that reports the settled value, debounced here so no call site has to remember.
+ *
+ * 300ms, because on a server-paged list every keystroke is both a round trip and a new query
+ * key - and a new query key throws away the page already loaded.
+ */
+declare function TableSearch({ onChange, placeholder, className, icon, }: {
+    /** Called with the trimmed value once typing settles. */
+    onChange: (q: string) => void;
+    placeholder?: string;
+    className?: string;
+    /** Set false where the surrounding bar already says what the box is for. */
+    icon?: boolean;
+}): React.JSX.Element;
+/** Refetch, spinning while it does. Belongs in the filter bar, not in DataTable's own bar. */
+declare function TableReload({ onClick, loading, label, }: {
+    onClick: () => void;
+    loading?: boolean;
+    label?: string;
+}): React.JSX.Element;
+
+/**
+ * The state behind `DataTable`'s numbered pager, so a screen configures paging instead of
+ * owning it.
+ *
+ * Every console that grew a numbered table had written the same twelve lines - page state,
+ * size state, the 0-based/1-based conversion, the range string, the back-to-page-1 wrapper -
+ * and the copies had already drifted into pagers that behaved slightly differently on screens
+ * next to each other. `DataTable` owned the controls; nothing owned the wiring.
+ *
+ * Two shapes, because the lists behind these tables are not all the same:
+ *
+ *   `bind(total)`  the SERVER paged it. Feed `page`/`size` into the request and hand back the
+ *                  `total` it answered with.
+ *   `slice(rows)`  the fetch IS the whole answer - a list derived from two endpoints, the
+ *                  result of one operation, a parsed file - so the page is cut here.
+ *
+ * `slice` is honest only in that second case. Over a list the server truncated it reports a
+ * page count that does not exist, which tells the reader they have seen everything.
+ */
+/** Sizes offered in the rows-per-page selector. */
+declare const PAGE_SIZE_OPTIONS: number[];
+/** Rows per page before anyone chooses. Smaller than a screenful is churn; larger buries the pager. */
+declare const DEFAULT_PAGE_SIZE = 25;
+/**
+ * Copy for the pager. lyra ships none of it: `range` also decides number formatting, which is
+ * a locale decision the app's i18n already makes.
+ */
+type PagerLabels = {
+    first?: string;
+    previous?: string;
+    next?: string;
+    last?: string;
+    size?: string;
+    range?: (r: {
+        from: number;
+        to: number;
+        total: number;
+    }) => string;
+};
+/** The `DataTable` props that make up the numbered pager. Spread them; never spell them out. */
+type PagerProps = {
+    pageIndex: number;
+    pageCount: number;
+    onPageChange: (index: number) => void;
+    pageSize: number;
+    pageSizeOptions: number[];
+    onPageSizeChange: (size: number) => void;
+    rangeLabel: string;
+    pageLabels: {
+        first?: string;
+        previous?: string;
+        next?: string;
+        last?: string;
+        size?: string;
+    };
+};
+type UsePagerOptions = {
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    labels?: PagerLabels;
+};
+declare function usePager(options?: UsePagerOptions): {
+    page: number;
+    size: number;
+    setPage: React.Dispatch<React.SetStateAction<number>>;
+    onFilter: <T>(apply: (v: T) => void) => (v: T) => void;
+    bind: (total: number) => PagerProps;
+    /** Cut the current page out of a complete list. */
+    slice<T>(rows: T[]): {
+        rows: T[];
+        props: PagerProps;
+    };
+};
+
 declare const TableContext: React.Context<{
     data: unknown[];
     columns: ColumnDef<unknown, unknown>[];
@@ -83,6 +206,16 @@ interface DataTableProps<TData, TValue> {
     nextLabel?: string;
     /** Rows per page (default 10). Pagination controls appear only when needed. */
     pageSize?: number;
+    /**
+     * Render every row and no pager at all.
+     *
+     * For the list whose row count does not grow with tenants or with time - a declared
+     * inventory, a fixed catalogue, the handful of providers somebody configured by hand. There
+     * the fetch is the whole answer, so a pager is a control nobody needs and a page count is a
+     * number nobody asked for. Opt-in rather than the default, because the default (slice by
+     * `pageSize`, Prev/Next) is what eleven existing call sites already rely on.
+     */
+    unpaged?: boolean;
     /** Extra classes on the bordered table wrapper. */
     className?: string;
     /** Show a search box that globally filters rows across all accessor columns. */
@@ -134,6 +267,6 @@ interface DataTableProps<TData, TValue> {
  * reader opened it with.
  */
 declare function pageWindow(index: number, count: number, radius?: number): (number | null)[];
-declare function DataTable<TData, TValue>({ columns, data, loading, emptyText, empty, loadingText, previousLabel, nextLabel, pageSize, className, searchable, searchPlaceholder, onReload, reloadLabel, toolbar, onLoadMore, hasMore, loadingMore, loadingMoreText, pageIndex, pageCount, onPageChange, pageSizeOptions, onPageSizeChange, rangeLabel, pageLabels, }: DataTableProps<TData, TValue>): React.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, loading, emptyText, empty, loadingText, previousLabel, nextLabel, pageSize, unpaged, className, searchable, searchPlaceholder, onReload, reloadLabel, toolbar, onLoadMore, hasMore, loadingMore, loadingMoreText, pageIndex, pageCount, onPageChange, pageSizeOptions, onPageSizeChange, rangeLabel, pageLabels, }: DataTableProps<TData, TValue>): React.JSX.Element;
 
-export { DataTable, type DataTableProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumnHeader, type TableColumnHeaderProps, TableContext, TableHead, type TableHeadProps, TableHeader, TableHeaderGroup, type TableHeaderGroupProps, type TableHeaderProps, TableProvider, type TableProviderProps, TableRow, type TableRowProps, pageWindow };
+export { DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, PAGE_SIZE_OPTIONS, type PagerLabels, type PagerProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumnHeader, type TableColumnHeaderProps, TableContext, TableFilterBar, TableHead, type TableHeadProps, TableHeader, TableHeaderGroup, type TableHeaderGroupProps, type TableHeaderProps, TableProvider, type TableProviderProps, TableReload, TableRow, type TableRowProps, TableSearch, type UsePagerOptions, filterRows, pageWindow, usePager };

package/dist/data-table/index.js

@@ -1,13 +1,134 @@
 "use client";
 import { TableHead, Table, TableRow, TableHeader, TableCell, TableBody, NativeSelect, NativeSelectOption } from '../chunk-AM6UJ666.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../chunk-VEWKPOMS.js';
-import { Button, Input } from '../chunk-VGOGWZCF.js';
+import { Input, Button } from '../chunk-VGOGWZCF.js';
 import { cn } from '../chunk-XH55BHUU.js';
 import { flexRender, useReactTable, getSortedRowModel, getCoreRowModel, getPaginationRowModel, getFilteredRowModel } from '@tanstack/react-table';
-import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, SearchIcon, RefreshCwIcon, Loader2Icon } from 'lucide-react';
-import { createContext, memo, useState, useContext, useCallback, useRef, useEffect } from 'react';
+import { SearchIcon, RefreshCwIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, Loader2Icon } from 'lucide-react';
+import { createContext, memo, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/data-table/filter-rows.ts
+function filterRows(rows, q, fields) {
+  const needle = q.trim().toLowerCase();
+  if (!needle) return rows;
+  return rows.filter((r) => fields(r).some((v) => v?.toLowerCase().includes(needle)));
+}
+function TableFilterBar({
+  children,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    children,
+    actions ? /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions }) : null
+  ] });
+}
+function TableSearch({
+  onChange,
+  placeholder = "Search\u2026",
+  className,
+  icon = true
+}) {
+  const [text, setText] = useState("");
+  const sink = useRef(onChange);
+  useEffect(() => {
+    sink.current = onChange;
+  }, [onChange]);
+  useEffect(() => {
+    const id = setTimeout(() => sink.current(text.trim()), 300);
+    return () => clearTimeout(id);
+  }, [text]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full max-w-xs", className), children: [
+    icon ? /* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2" }) : null,
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: text,
+        onChange: (e) => setText(e.target.value),
+        placeholder,
+        className: icon ? "pl-8" : void 0
+      }
+    )
+  ] });
+}
+function TableReload({
+  onClick,
+  loading,
+  label = "Reload"
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "outline",
+      size: "icon-sm",
+      onClick,
+      disabled: loading,
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ jsx(RefreshCwIcon, { className: cn("size-4", loading && "animate-spin") })
+    }
+  );
+}
+var PAGE_SIZE_OPTIONS = [25, 50, 100, 200];
+var DEFAULT_PAGE_SIZE = 25;
+function usePager(options = {}) {
+  const { pageSize: initialSize = DEFAULT_PAGE_SIZE, pageSizeOptions = PAGE_SIZE_OPTIONS, labels } = options;
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(initialSize);
+  const props = useCallback(
+    (total) => ({
+      pageIndex: page - 1,
+      pageCount: Math.max(1, Math.ceil(total / size)),
+      onPageChange: (i) => setPage(i + 1),
+      pageSize: size,
+      pageSizeOptions,
+      // A different size means a different page 1; staying on page 7 of the old size lands
+      // past the end of the new one.
+      onPageSizeChange: (n) => {
+        setSize(n);
+        setPage(1);
+      },
+      rangeLabel: total > 0 ? labels?.range?.({
+        from: (page - 1) * size + 1,
+        to: Math.min(page * size, total),
+        total
+      }) ?? "" : "",
+      pageLabels: {
+        first: labels?.first,
+        previous: labels?.previous,
+        next: labels?.next,
+        last: labels?.last,
+        size: labels?.size
+      }
+    }),
+    [page, size, pageSizeOptions, labels]
+  );
+  const onFilter = useCallback(
+    (apply) => (v) => {
+      apply(v);
+      setPage(1);
+    },
+    []
+  );
+  return {
+    page,
+    size,
+    setPage,
+    onFilter,
+    bind: props,
+    /** Cut the current page out of a complete list. */
+    slice(rows) {
+      const last = Math.max(1, Math.ceil(rows.length / size));
+      const at = Math.min(page, last);
+      return {
+        rows: rows.slice((at - 1) * size, at * size),
+        props: { ...props(rows.length), pageIndex: at - 1 }
+      };
+    }
+  };
+}
 var TableContext = createContext({
   data: [],
   columns: [],
@@ -107,6 +228,7 @@ function DataTable({
   previousLabel = "Previous",
   nextLabel = "Next",
   pageSize = 10,
+  unpaged,
   className,
   searchable,
   searchPlaceholder = "Search\u2026",
@@ -128,6 +250,7 @@ function DataTable({
   const [globalFilter, setGlobalFilter] = useState("");
   const infinite = Boolean(onLoadMore);
   const served = !infinite && Boolean(onPageChange);
+  const sliced = !infinite && !served && !unpaged;
   const table = useReactTable({
     data,
     columns,
@@ -135,9 +258,10 @@ function DataTable({
     onGlobalFilterChange: setGlobalFilter,
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    // Infinite mode renders every accumulated row; pagination is only wired for
-    // the default finite table.
-    ...infinite || served ? {} : { getPaginationRowModel: getPaginationRowModel(), initialState: { pagination: { pageSize } } }
+    // Only the default finite table slices rows itself. The other three modes each hand the
+    // table exactly what to render: infinite every accumulated row, served the one page the
+    // server answered with, unpaged the whole list.
+    ...sliced ? { getPaginationRowModel: getPaginationRowModel(), initialState: { pagination: { pageSize } } } : {}
   });
   const rows = table.getRowModel().rows;
   const showBar = Boolean(searchable || onReload || toolbar);
@@ -303,13 +427,13 @@ function DataTable({
         )
       ] })
     ] }) : null,
-    !infinite && !served && table.getPageCount() > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 py-4", children: [
+    sliced && table.getPageCount() > 1 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 py-4", children: [
       /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: previousLabel }),
       /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: nextLabel })
     ] }) : null
   ] });
 }
 
-export { DataTable, TableBody2 as TableBody, TableCell2 as TableCell, TableColumnHeader, TableContext, TableHead2 as TableHead, TableHeader2 as TableHeader, TableHeaderGroup, TableProvider, TableRow2 as TableRow, pageWindow };
+export { DEFAULT_PAGE_SIZE, DataTable, PAGE_SIZE_OPTIONS, TableBody2 as TableBody, TableCell2 as TableCell, TableColumnHeader, TableContext, TableFilterBar, TableHead2 as TableHead, TableHeader2 as TableHeader, TableHeaderGroup, TableProvider, TableReload, TableRow2 as TableRow, TableSearch, filterRows, pageWindow, usePager };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map