@lotics/ui 44.4.0 → 44.6.0

package/MIGRATION.md

@@ -4,6 +4,29 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 44.5.0 — `Pagination` drops the page index
+
+The pager rendered a range AND a page index — `16–30 of 45` beside `Page 2 of 3`. Both answer
+"where am I", and the second enables no decision the first does not: how much is left is in the
+total, and whether this is the end is in the disabled arrow. The index is gone; the range is the
+whole label.
+
+**`PaginationLabels.pageWithTotal` and `.page` are removed.** Delete them from any `labels` object
+— every other field is unchanged, so that is the whole edit.
+
+```tsx
+// before
+labels={{ rangeWithTotal: (s, e, t) => `${s}–${e} trên ${t}`,
+          pageWithTotal: (p, n) => `Trang ${p} / ${n}`, page: (p) => `Trang ${p}`,
+          previous: "Trước", next: "Sau" }}
+// after
+labels={{ rangeWithTotal: (s, e, t) => `${s}–${e} trên ${t}`, previous: "Trước", next: "Sau" }}
+```
+
+Not breaking, but do it in the same pass: the range is now the register's only statement of the
+total, so a `Table` paired with the pager takes **`counted`** instead of `count`. Left as `count`,
+the matched total prints twice a few rows apart.
+
 ## 44.4.0 — `MemberChip`'s `marker` is gone
 
 A minor that broke a type, recorded here under its exact version rather than held

package/docs/catalog.md

@@ -1366,7 +1366,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`data_grid`** — `DataGrid` + `gridRowStyle`: the inline-managed grouped table (see
   [Tabular data](#tabular-data--pick-by-scale--intent)); `labels` localizes the sort-header
   a11y via `SortHeaderLabels`.
-- **`pagination`** — `Pagination` (+ `PaginationLabels`): the register's pager.
+- **`pagination`** — `Pagination` (+ `PaginationLabels`): the register's pager — a range and two
+  arrows, no page index. ONE per register, ABOVE the rows on the `SummaryLine` row; its range is
+  the register's count (pair with `Table` `counted`), and `onPageChange` owes a scroll reset the
+  control cannot do itself — see [composition.md](./composition.md) §register.
 - **`column_filter`** — `ColumnFilter` + `columnFilterToConditions` +
   `isColumnFilterActive` + `columnFilterSummary`: the typed per-column filter pill; for a
   register filtering on several columns.

package/docs/composition.md

@@ -587,8 +587,41 @@ hook (`@lotics/ui/use_selection`: `selected` / `has` / `count` / `toggle` / `set
 `allSelected` / `indeterminate` / `clear`) — gating which rows CAN be ticked stays with you: pass
 only the selectable ids to `setAll`/`allSelected`/`indeterminate` (a non-selectable row gets a
 disabled checkbox, keeping the gutter aligned). Selection persists across pages, so `count` is the
-running total. `tpl_item_list` is the reference. Paginate OUTSIDE (slice + `Pagination` in the
-`CardFooter`).
+running total. `tpl_item_list` is the reference. Paginate OUTSIDE (slice + `Pagination`).
+
+**A paginated register owes the reader a scroll reset, and it is not the pager's to give.** Putting
+the pager under the rows is inherited from full page loads, where the browser reset the scroll for
+free; an SPA swaps the rows under a viewport that does not move, so paging from the bottom lands on
+the LAST rows of the next page with its first ones already scrolled past. Every control that changes
+WHICH rows are on screen owes the same reset — page, tab, search, sort, each filter — so route them
+all through ONE function that moves the window and scrolls (`goToPage` / `resetPaging` in
+`tpl_item_list`), never a `setPage(0)` at each call site that also has to remember to scroll.
+
+**ONE pager, ABOVE the rows.** Once the reset returns the viewport to the top on every press, the
+top is where the reader's cursor already is. A second copy under the rows is the same state said
+twice, and two identical clusters of arrows read as two controls.
+
+**Put it on the `SummaryLine` row, not a row of its own** — summary at `flex: 1`, pager sized to its
+content, the row aligned `flex-start` so the arrows stay on the summary's FIRST line when it wraps.
+Both describe the window the toolbar just set (what matched, and which slice is on screen), so they
+are one line. A pager given its own row is a small cluster against a mostly empty band — measure it
+before believing the row is needed; a four-item summary and a full pager leave a quarter of a
+1000px band spare.
+
+Never hand `Pagination` the full width with an empty left slot. It gives its range `flex: 1` so a
+band whose left slot HOLDS something pushes the arrows to the far edge; with nothing there, that
+same rule strands the range hundreds of pixels from the arrows it belongs to — two halves of one
+control reading as two unrelated things on a line.
+
+**The pager's range IS the register's count** (`16–30 of 45`), so pair it with `Table` `counted`,
+never `count` — the latter prints the matched total again a few rows below, and one number in two
+places is two numbers that can disagree. Row totals beside the pager go the same way when a
+`SummaryLine` above already states them.
+
+There is deliberately no page index. `Page 2 of 3` beside `16–30 of 45` answers the same question a
+second way and enables no decision the range does not — how much is left is in the total, whether
+this is the end is in the disabled arrow. A control that is reached for rarely (a register built
+around search and filters is meant to be NARROWED, not paged) earns one label, not two.
 
 Right-hand columns align only if every trailing element is FIXED-width — give each trailing action
 a fixed `width`, so amount/status columns don't jitter.

package/docs/reviewing.md

@@ -236,6 +236,13 @@ A resting register is the cheapest thing to screenshot and the least likely to h
   (a feed, a thread) above a bounded one buries it, and the burial deepens with use.
 - **Press every control** and look at the state you land in. Commonest miss: a value rendering as
   a coloured chip in a register and as bare grey text in its own EDITOR.
+- **TAB through it, then diff what a keyboard reaches against what LOOKS pressable.** A pointer
+  finds anything with an `onPress`; a keyboard finds only what carries a role and a tab stop, and
+  the two lists come apart silently — the screen looks identical either way, and the author
+  testing with a mouse never learns. The reliable producer is styled text: underline, a hover
+  wash, a "verb" colour applied to a plain container, which reads as a control to the eye while
+  announcing as prose. Anything the eye calls a control and the tab order omits is unreachable,
+  not merely awkward. Count both lists; a difference is the finding.
 - **Diff a promoted field against where it came from.** Promoting means MOVING; a copy left behind
   gives one field two editors.
 - **Read every string in its SETTLED state**, not the streaming one.
@@ -419,6 +426,20 @@ is the usual cause.
 Note the RN-Web trap: once a `Text` contains a nested pressable, `numberOfLines` degrades to bare
 `overflow: hidden` and loses the ellipsis.
 
+### Measure INK, not the box — a stretched label hides the gap it sits in
+
+```js
+// getBoundingClientRect on an RN-Web Text returns the DIV, which stretches to
+// its flex slot. Range over the contents to get where the glyphs actually end.
+(sel) => { const rg = document.createRange(); rg.selectNodeContents(document.querySelector(sel)); return rg.getBoundingClientRect(); }
+```
+
+A label inside a `flex: 1` slot measures as wide as the slot, so a box-to-box gap between it and
+its neighbour reads as the container's `gap` — 12px — while the reader sees hundreds of pixels of
+void between the last glyph and the next element. Any gap RATIO taken across a stretching text is
+wrong in the reassuring direction. Use this whenever one side of a measured gap is text that could
+be filling a flex slot rather than sizing to its content.
+
 ### Grouping — is one `gap` flattening the hierarchy?
 
 ```js
@@ -459,6 +480,36 @@ receives `mouseenter`, because the pointer is already stationary over it — so
 dies at the moment of the swap and reads as a flash. Keep one node across the swap rather than
 restoring the state by hand.
 
+### Reachability — what the eye calls a control against what the tab order holds
+
+Two lists off one render. The first is what a keyboard can operate; the second is everything that
+LOOKS operable — styled text is the producer, so underline is the cheapest thing to sweep for.
+
+```js
+() => {
+  const root = document.querySelector('[role="dialog"]') ?? document.body;
+  const operable = [...root.querySelectorAll(
+    'a[href], button, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"]), input, select, textarea',
+  )];
+  const looksPressable = [...root.querySelectorAll("*")].filter((e) => {
+    if (e.children.length || !(e.textContent || "").trim()) return false;
+    const cs = getComputedStyle(e);
+    return cs.textDecorationLine.includes("underline") || cs.cursor === "pointer";
+  });
+  const unreachable = looksPressable.filter((e) => !e.closest(
+    'a[href], button, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])',
+  ));
+  return {
+    operable: operable.length,
+    unreachable: unreachable.map((e) => (e.textContent || "").trim().slice(0, 40)),
+  };
+}
+```
+
+`unreachable` must come back empty. A name in it is a control only a pointer can reach — and the
+count beside it is the other half of the reading: a whole pane offering two or three tab stops is
+usually not a minimal screen, it is a screen whose verbs are all prose.
+
 Driving the kit's own anatomies — a `PressDoor` row, a portalled overlay, a custom pointer drag —
 has three gotchas of its own: [testing.md](./testing.md).
 

package/examples/tpl_item_list.tsx

@@ -159,6 +159,34 @@ const HO_SO: HoSo[] = [
   { ma: "RC-2026-0061", binhLuan: 1, khach: "Harbor Industries", dienThoai: "(555) 047-5829", trangThai: "dangxuly", phi: 6_800_000, daThu: true, ngayThu: "11/06", ngayNhan: "10/06", phuTrach: "Maria Lopez" },
   { ma: "RC-2026-0062", binhLuan: 0, khach: "Grace Holloway", dienThoai: "(555) 826-3050", trangThai: "hoantat", phi: 3_100_000, daThu: true, ngayThu: "05/06", ngayNhan: "31/05", phuTrach: "David Park" },
   { ma: "RC-2026-0063", binhLuan: 3, khach: "Olivia Manning", dienThoai: "(555) 631-2904", trangThai: "dangxuly", phi: 1_200_000, daThu: false, ngayNhan: "11/06", phuTrach: "Sarah Chen" },
+  // The book runs past one SCREEN on purpose, not just past one page. A register
+  // whose page fits the viewport cannot exhibit the defect the paging controls
+  // below are shaped around — the reader never has to scroll, so it never
+  // matters where the viewport is left when the rows change. This example ran on
+  // 23 records at 8 a page for exactly that reason, and the reset was missing
+  // from the reference the whole time.
+  { ma: "RC-2026-0064", binhLuan: 0, khach: "Marcus Webb", dienThoai: "(555) 318-7742", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "07/06", ngayNhan: "01/06", phuTrach: "David Park" },
+  { ma: "RC-2026-0065", binhLuan: 2, khach: "Ironwood Textiles", dienThoai: "(555) 924-6018", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "12/06", phuTrach: "Maria Lopez" },
+  { ma: "RC-2026-0066", binhLuan: 0, khach: "Helen Vargas", dienThoai: "(555) 673-2295", trangThai: "chobosung", phi: 1_800_000, daThu: true, ngayThu: "11/06", ngayNhan: "10/06", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0067", binhLuan: 4, khach: "Peter Nakamura", dienThoai: "(555) 405-8830", trangThai: "dangxuly", phi: 3_100_000, daThu: true, ngayThu: "12/06", ngayNhan: "11/06", phuTrach: "James Walker" },
+  { ma: "RC-2026-0068", binhLuan: 0, khach: "Redstone Millwork", dienThoai: "(555) 217-5546", trangThai: "hoantat", phi: 6_800_000, daThu: true, ngayThu: "04/06", ngayNhan: "30/05", phuTrach: "David Park" },
+  { ma: "RC-2026-0069", binhLuan: 1, khach: "Sandra Piper", dienThoai: "(555) 860-3971", trangThai: "dangxuly", phi: 1_200_000, daThu: false, ngayNhan: "12/06", phuTrach: "Maria Lopez" },
+  { ma: "RC-2026-0070", binhLuan: 0, khach: "Owen Fitzgerald", dienThoai: "(555) 592-1487", trangThai: "chobosung", phi: 2_500_000, daThu: false, ngayNhan: "13/06", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0071", binhLuan: 3, khach: "Lakeshore Dairy", dienThoai: "(555) 736-9204", trangThai: "hoantat", phi: 4_200_000, daThu: true, ngayThu: "02/06", ngayNhan: "27/05", phuTrach: "James Walker" },
+  { ma: "RC-2026-0072", binhLuan: 0, khach: "Deborah Quinn", dienThoai: "(555) 148-6673", trangThai: "dangxuly", phi: 1_800_000, daThu: true, ngayThu: "13/06", ngayNhan: "12/06", phuTrach: "David Park" },
+  { ma: "RC-2026-0073", binhLuan: 2, khach: "Vincent Osei", dienThoai: "(555) 389-2015", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "13/06", phuTrach: "Maria Lopez" },
+  { ma: "RC-2026-0074", binhLuan: 0, khach: "Pinehill Ceramics", dienThoai: "(555) 651-4738", trangThai: "hoantat", phi: 5_600_000, daThu: true, ngayThu: "06/06", ngayNhan: "31/05", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0075", binhLuan: 1, khach: "Alan Whitcombe", dienThoai: "(555) 902-8564", trangThai: "dangxuly", phi: 2_500_000, daThu: false, ngayNhan: "14/06", phuTrach: "James Walker" },
+  { ma: "RC-2026-0076", binhLuan: 0, khach: "Priya Raghavan", dienThoai: "(555) 473-1290", trangThai: "dangxuly", phi: 6_800_000, daThu: true, ngayThu: "14/06", ngayNhan: "13/06", phuTrach: "David Park" },
+  { ma: "RC-2026-0077", binhLuan: 5, khach: "Fairview Optics", dienThoai: "(555) 260-7451", trangThai: "chobosung", phi: 1_200_000, daThu: false, ngayNhan: "14/06", phuTrach: "Maria Lopez" },
+  { ma: "RC-2026-0078", binhLuan: 0, khach: "Gregory Salazar", dienThoai: "(555) 815-3607", trangThai: "hoantat", phi: 3_100_000, daThu: true, ngayThu: "03/06", ngayNhan: "29/05", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0079", binhLuan: 2, khach: "Tessa Lindqvist", dienThoai: "(555) 547-9382", trangThai: "dangxuly", phi: 4_200_000, daThu: true, ngayThu: "15/06", ngayNhan: "14/06", phuTrach: "James Walker" },
+  { ma: "RC-2026-0080", binhLuan: 0, khach: "Copperfield Tools", dienThoai: "(555) 031-6825", trangThai: "chobosung", phi: 1_800_000, daThu: false, ngayNhan: "15/06", phuTrach: "David Park" },
+  { ma: "RC-2026-0081", binhLuan: 1, khach: "Naomi Ferrell", dienThoai: "(555) 794-2158", trangThai: "hoantat", phi: 2_500_000, daThu: true, ngayThu: "05/06", ngayNhan: "01/06", phuTrach: "Maria Lopez" },
+  { ma: "RC-2026-0082", binhLuan: 0, khach: "Bridgeport Marine", dienThoai: "(555) 368-5093", trangThai: "dangxuly", phi: 5_600_000, daThu: false, ngayNhan: "16/06", phuTrach: "Sarah Chen" },
+  { ma: "RC-2026-0083", binhLuan: 3, khach: "Ethan Castellanos", dienThoai: "(555) 620-4716", trangThai: "dangxuly", phi: 1_200_000, daThu: true, ngayThu: "16/06", ngayNhan: "15/06", phuTrach: "James Walker" },
+  { ma: "RC-2026-0084", binhLuan: 0, khach: "Willow Creek Farms", dienThoai: "(555) 187-9340", trangThai: "chobosung", phi: 3_100_000, daThu: false, ngayNhan: "16/06", phuTrach: "David Park" },
+  { ma: "RC-2026-0085", binhLuan: 2, khach: "Simone Beaufort", dienThoai: "(555) 452-8671", trangThai: "hoantat", phi: 6_800_000, daThu: true, ngayThu: "07/06", ngayNhan: "02/06", phuTrach: "Maria Lopez" },
 ];
 
 const TABS: { value: Tab; label: string }[] = [
@@ -168,7 +196,9 @@ const TABS: { value: Tab; label: string }[] = [
   { value: "hoantat", label: "Complete" },
 ];
 
-const PAGE_SIZE = 8;
+// Fifteen rows at the register's rhythm is taller than the viewport, which is
+// the point: paging only has ergonomics once a page is something you SCROLL.
+const PAGE_SIZE = 15;
 
 // Distinct case handlers — the secondary filter dimension (a multi-select FilterChip).
 const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label: n, value: n }));
@@ -1041,7 +1071,34 @@ export function TplItemList() {
   // The register rows are state: the create dialog PREPENDS a real row and
   // opens its drawer — create-then-refine.
   const [rows, setRows] = useState<HoSo[]>(HO_SO);
-  const nextMa = useRef(64);
+  // Past the LAST seeded code, not past the old one — a created row that reuses
+  // an existing `ma` collides on the register's key and on every lookup by code.
+  const nextMa = useRef(86);
+
+  /** The page's scroll container, so a control that changes the rows can put the
+   *  reader back at the first of them. */
+  const scrollRef = useRef<ScrollView>(null);
+
+  /**
+   * Move the window, and return the viewport to the top of it.
+   *
+   * The scroll is HALF the act, not a courtesy on top of it. Bottom pagination
+   * is inherited from full page loads, where the browser reset the scroll for
+   * free; an SPA swaps the rows under a viewport that does not move, so paging
+   * from the bottom lands the reader on the LAST rows of the next page with its
+   * first ones already behind them.
+   *
+   * EVERY control that changes which rows are on screen goes through here —
+   * paging, tabs, search, sort, each filter — rather than each one calling
+   * `setPage(0)` and remembering the scroll. That list is the reason this is one
+   * function: nine call sites each responsible for two things is nine chances to
+   * do one of them, and the one that gets forgotten fails silently.
+   */
+  const goToPage = (p: number) => {
+    setPage(p);
+    scrollRef.current?.scrollTo({ y: 0, animated: false });
+  };
+  const resetPaging = () => goToPage(0);
   const addRow = (khach: string, dienThoai: string, phi: number): string => {
     const now = new Date();
     const ma = `RC-2026-${String(nextMa.current++).padStart(4, "0")}`;
@@ -1067,7 +1124,7 @@ export function TplItemList() {
     setAssignee([]);
     setFeeStatus(null);
     setSort(null);
-    setPage(0);
+    resetPaging();
   };
   const createRecord = (khach: string, dienThoai: string, phi: number) => {
     const ma = addRow(khach, dienThoai, phi);
@@ -1101,16 +1158,16 @@ export function TplItemList() {
   // meaningless under the new one.
   const chonTab = (t: Tab) => {
     setTab(t);
-    setPage(0);
+    resetPaging();
   };
   const doiTimKiem = (s: string) => {
     setSearch(s);
-    setPage(0);
+    resetPaging();
   };
   // One sort at a time; the third toggle on a column clears it.
   const onSort = (key: string) => {
     setSort(cycleSort(sort, key));
-    setPage(0);
+    resetPaging();
   };
 
   // Search + status tab filter FIRST, then paging over the filtered ordering.
@@ -1140,7 +1197,6 @@ export function TplItemList() {
     : key === "ngayNhan" ? r.ngayNhan.split("/").reverse().join("")
     : r.ma,
   );
-  const tongPhi = filtered.reduce((s, r) => s + r.phi, 0);
   const pageRows = sorted.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
   const hasMore = (page + 1) * PAGE_SIZE < sorted.length;
 
@@ -1171,7 +1227,7 @@ export function TplItemList() {
         on top); the accent ring frames the page on drag. A real app opts in
         per-app — this page is the reference shape. */}
     <FileDropTarget onFiles={openIntakeSeeded} paste style={{ flex: 1 }}>
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView ref={scrollRef} style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
         {/* The page band — the screen's TYPE ANCHOR before it is a label. Without
             it this page's largest text is 16px against a 12px floor, and a 1.33x
@@ -1208,7 +1264,7 @@ export function TplItemList() {
             <FilterChip
               label="Assignee"
               summary={assigneeSummary}
-              onClear={() => { setAssignee([]); setPage(0); }}
+              onClear={() => { setAssignee([]); resetPaging(); }}
               clearLabel="Clear assignee filter"
             >
               <OptionList
@@ -1216,7 +1272,7 @@ export function TplItemList() {
                 multi
                 options={ASSIGNEES}
                 value={assignee}
-                onValueChange={(v) => { setAssignee(v); setPage(0); }}
+                onValueChange={(v) => { setAssignee(v); resetPaging(); }}
               />
             </FilterChip>
             {/* Single-select sibling — the render-prop `close` shuts the popover on
@@ -1224,7 +1280,7 @@ export function TplItemList() {
             <FilterChip
               label="Payment"
               summary={feeStatus === "paid" ? "Paid" : feeStatus === "unpaid" ? "Unpaid" : undefined}
-              onClear={() => { setFeeStatus(null); setPage(0); }}
+              onClear={() => { setFeeStatus(null); resetPaging(); }}
               clearLabel="Clear payment filter"
             >
               {({ close }) => (
@@ -1232,7 +1288,7 @@ export function TplItemList() {
                   search={{ mode: "none" }}
                   options={[{ value: "paid", label: "Paid" }, { value: "unpaid", label: "Unpaid" }]}
                   value={feeStatus}
-                  onValueChange={(v) => { setFeeStatus(v); setPage(0); }}
+                  onValueChange={(v) => { setFeeStatus(v); resetPaging(); }}
                   onRequestClose={close}
                 />
               )}
@@ -1243,7 +1299,7 @@ export function TplItemList() {
             <ColumnFilter
               column={{ key: "phi", label: "Fee", type: "number" }}
               value={feeAmount}
-              onChange={(v) => { setFeeAmount(v); setPage(0); }}
+              onChange={(v) => { setFeeAmount(v); resetPaging(); }}
             />
           </View>
           {/* the intake TRIGGER — the register's whole-surface drop/paste opens
@@ -1262,25 +1318,66 @@ export function TplItemList() {
             It is not a page-band subtitle for the same reason. A subtitle
             describes the screen; these describe the QUERY, and the query is what
             the toolbar above just wrote. */}
-        <SummaryLine
-          items={[
-            { label: "processing", value: dem("dangxuly") },
-            { label: "awaiting docs", value: dem("chobosung"), tone: "warning", info: "Records waiting on customer paperwork — they aren't complete, so they can't be ticked for export until the docs arrive." },
-            { label: "complete", value: dem("hoantat") },
-            { label: "fees collected", value: phiDaThu, format: "currency", compact: true },
-          ]}
-        />
-
-        {/* the register — eyebrow band (Table header) → list rows → totals + paging */}
+        {/* THE SUMMARY ROW IS THE PAGING ROW. Both describe the window the
+            toolbar above just set — what matched, and which slice of it is on
+            screen — so they are one line, not two.
+
+            PAGING SITS ABOVE THE ROWS, and there is only one of it. Under them is
+            where it has always gone, and that is inherited from full page loads:
+            the browser reset the scroll, so a reader who pressed Next at the
+            bottom arrived at the top of the next page for free. An SPA swaps the
+            rows under a viewport that does not move, so the same press now lands
+            on that page's LAST rows with its first ones already scrolled past.
+            `goToPage` restores the reset — and once the viewport returns here on
+            every press, here is where the control should be: under the reader's
+            cursor, not a page-height below it. A second copy at the bottom would
+            be the same state said twice.
+
+            It carries the RANGE and nothing else. The totals that used to ride
+            the old footer (`45 records, ₫X in fees`) said what this summary
+            already says, and `Table`'s own `count` prints the matched total in
+            the eyebrow below.
+
+            The pager sizes to its CONTENT and the summary takes `flex: 1`.
+            Reversed — the pager handed the full width — its own `flex: 1` range
+            stretches and strands the range hundreds of pixels from the arrows it
+            belongs to, two halves of one control reading as two things. Given a
+            row of its own it read worse still: 236px of control against 778px of
+            nothing. `flex-start` keeps the arrows on the summary's FIRST line
+            when the summary wraps at a narrow width. */}
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 24 }}>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <SummaryLine
+              items={[
+                { label: "processing", value: dem("dangxuly") },
+                { label: "awaiting docs", value: dem("chobosung"), tone: "warning", info: "Records waiting on customer paperwork — they aren't complete, so they can't be ticked for export until the docs arrive." },
+                { label: "complete", value: dem("hoantat") },
+                { label: "fees collected", value: phiDaThu, format: "currency", compact: true },
+              ]}
+            />
+          </View>
+          <Pagination
+            page={page}
+            pageSize={PAGE_SIZE}
+            rowCount={pageRows.length}
+            hasMore={hasMore}
+            total={filtered.length}
+            onPageChange={goToPage}
+          />
+        </View>
+
+        {/* the register — eyebrow band (Table header) → list rows */}
         <View>
-          {/* THE COUNTED REGISTER. `count` is what MATCHED, not what this page
-              shows — the reader's "how many" survives paging — and each row's
-              `ordinal` continues across pages rather than restarting at 1, so the
-              last row of page 2 reads 100 under a header that says 100. */}
+          {/* THE COUNTED REGISTER — `counted`, not `count`, because the PAGER
+              states the total now (`16–30 of 45`) and a number printed twice a
+              few rows apart is two numbers that can disagree. `counted` keeps the
+              ordinal gutter reserved and leaves the figure to the row that owns
+              it. Each row's `ordinal` still continues across pages rather than
+              restarting at 1, so the last row of page 2 reads 30, not 15. */}
           <Table
             columns={COLUMNS}
             leading={24}
-            count={filtered.length}
+            counted
             trailing={132}
             sort={sort}
             onSort={onSort}
@@ -1304,25 +1401,6 @@ export function TplItemList() {
               <EmptyState message="No matching records" hint="Try another keyword or switch status" />
             </>
           ) : null}
-          {/* NOT `CardFooter` — that is a Card PART, and its 20px is the card's
-              interior gutter. There is no card here, so it put the totals 20px
-              right of the register's own rows and of the toolbar above them.
-              A bare table's footer is a divider and a row; borrowing furniture
-              from a container that is not there is what put it out of true. */}
-          <Divider />
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 12 }}>
-            <Text size="sm" color="muted" tabular style={{ flex: 1 }}>
-              {`${filtered.length} records, ${formatMoney(tongPhi)} in fees`}
-            </Text>
-            <Pagination
-              page={page}
-              pageSize={PAGE_SIZE}
-              rowCount={pageRows.length}
-              hasMore={hasMore}
-              total={filtered.length}
-              onPageChange={setPage}
-            />
-          </View>
         </View>
       </View>
     </ScrollView>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "44.4.0",
+  "version": "44.6.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/locale.tsx

@@ -83,6 +83,12 @@ export interface LoticsLocale {
    *  a phase's rows. The kit owns the wording so one app does not say "Show" while
    *  the next says "Expand" for the same gesture. */
   checklist: { expand: string; collapse: string };
+  /** `TextDisclosure` supplies the VERB so one app cannot say "Show" where the
+   *  next says "View" for the same gesture — the same reason `checklist` above
+   *  owns its pair. It takes the revealed thing as a noun and builds the phrase,
+   *  because word order is not shared: English puts the verb first, and a
+   *  language that does not would otherwise be stuck with a prefix. */
+  textDisclosure: { show: (label: string) => string; hide: (label: string) => string };
   sectionHeading: { info: string };
   /** `ErrorState`'s retry button. The kit owns the wording so "try again" is
    *  phrased identically everywhere instead of hand-written per app. */
@@ -265,8 +271,6 @@ export const en: LoticsLocale = {
   pagination: {
     rangeWithTotal: (start, end, total) => `${start}–${end} of ${total.toLocaleString()}`,
     range: (start, end) => `${start}–${end}`,
-    pageWithTotal: (page, pageCount) => `Page ${page} of ${pageCount}`,
-    page: (page) => `Page ${page}`,
     previous: "Previous",
     next: "Next",
   },
@@ -290,6 +294,7 @@ export const en: LoticsLocale = {
   ledger: { rowDetails: (label) => `${label} details` },
   stepper: { complete: "Complete step", progress: "Progress" },
   checklist: { expand: "Show", collapse: "Hide" },
+  textDisclosure: { show: (label) => `Show ${label}`, hide: (label) => `Hide ${label}` },
   sectionHeading: { info: "About this data" },
   errorState: { retry: "Try again" },
   chip: { remove: "Remove" },
@@ -445,8 +450,6 @@ export const vi: LoticsLocale = {
   pagination: {
     rangeWithTotal: (start, end, total) => `${start}–${end} trên ${total.toLocaleString("vi-VN")}`,
     range: (start, end) => `${start}–${end}`,
-    pageWithTotal: (page, pageCount) => `Trang ${page} / ${pageCount}`,
-    page: (page) => `Trang ${page}`,
     previous: "Trang trước",
     next: "Trang sau",
   },
@@ -470,6 +473,7 @@ export const vi: LoticsLocale = {
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
   stepper: { complete: "Hoàn thành bước", progress: "Tiến trình" },
   checklist: { expand: "Mở", collapse: "Thu gọn" },
+  textDisclosure: { show: (label) => `Xem ${label}`, hide: (label) => `Ẩn ${label}` },
   sectionHeading: { info: "Giải thích dữ liệu" },
   errorState: { retry: "Thử lại" },
   chip: { remove: "Xóa" },

package/src/pagination.tsx

@@ -16,10 +16,6 @@ export interface PaginationLabels {
   rangeWithTotal?: (start: number, end: number, total: number) => string;
   /** Range summary without a total. Default `${start}–${end}`. */
   range?: (start: number, end: number) => string;
-  /** Page indicator with a known total. Default `Page ${page} of ${pageCount}`. */
-  pageWithTotal?: (page: number, pageCount: number) => string;
-  /** Page indicator without a total. Default `Page ${page}`. */
-  page?: (page: number) => string;
   /** Previous-page button tooltip. Default "Previous". */
   previous?: string;
   /** Next-page button tooltip. Default "Next". */
@@ -46,11 +42,34 @@ export interface PaginationProps {
 }
 
 /**
- * Pagination control: range summary on the left, page indicator + arrows on the
- * right. A pure control — it owns no border, background, or padding. The
- * container that frames it (a `CardFooter`, a grid footer, a bordered band)
- * supplies the divider and insets, so the same control composes anywhere without
- * doubling up a border.
+ * Pagination control: which rows are on screen, and arrows to change them. A
+ * pure control — it owns no border, background, or padding. The container that
+ * frames it (a summary row, a grid footer, a bordered band) supplies the divider
+ * and insets, so the same control composes anywhere without doubling up a border.
+ *
+ * The range is the WHOLE label. A page index beside it ("Page 2 of 3") answers
+ * the same question a second way and enables no decision the range does not —
+ * how much is left is in the total, and whether this is the end is in the
+ * disabled arrow. It was rendered here once and cut.
+ *
+ * The range is also the register's COUNT. Pass `counted` rather than `count` to
+ * a `Table` paired with this, or the matched total is printed twice a few rows
+ * apart.
+ *
+ * **`onPageChange` must also return the viewport to the first row.** This
+ * control cannot do it: the scroll container belongs to the page, not to the
+ * kit. Bottom pagination is a browser-reload-era convention — a full page load
+ * reset the scroll, and that reset is what made it work. An SPA changes the rows
+ * underneath a viewport that does not move, so a reader who pages from the
+ * bottom lands on the LAST rows of the next page and never sees its first ones.
+ * The same is true of every other control that changes which rows are on screen
+ * — a filter, a sort, a search — so the reset belongs to "the window changed",
+ * not to this component's arrows. `tpl_item_list` is the reference.
+ *
+ * ONE per register, ABOVE the rows. Once the reset returns the viewport here on
+ * every press, this is where the reader's cursor already is; a second copy under
+ * the rows is the same state said twice, and two identical clusters of arrows
+ * read as two controls rather than one.
  */
 export function Pagination(props: PaginationProps): React.ReactNode {
   const { page, pageSize, rowCount, hasMore, total, loading, onPageChange, labels } = props;
@@ -65,11 +84,6 @@ export function Pagination(props: PaginationProps): React.ReactNode {
       : (labels?.range ?? loc.range)(start, end)
     : "";
 
-  const pageLabel =
-    total !== undefined
-      ? (labels?.pageWithTotal ?? loc.pageWithTotal)(page + 1, Math.max(1, Math.ceil(total / pageSize)))
-      : (labels?.page ?? loc.page)(page + 1);
-
   return (
     <View style={styles.container}>
       <View style={styles.summary}>
@@ -78,9 +92,6 @@ export function Pagination(props: PaginationProps): React.ReactNode {
         </Text>
       </View>
       <View style={styles.controls}>
-        <Text size="sm" color="zinc-500">
-          {pageLabel}
-        </Text>
         <IconButton
           icon="chevron-left"
           color="secondary"

package/src/text_disclosure.tsx

@@ -1,5 +1,6 @@
 import { Pressable } from "react-native";
 import { TextLink } from "./text_link";
+import { useLoticsLocale } from "./locale";
 import type { TextSize } from "./text";
 
 export interface TextDisclosureProps {
@@ -52,6 +53,7 @@ export interface TextDisclosureProps {
  */
 export function TextDisclosure(props: TextDisclosureProps) {
   const { expanded, onToggle, label, size = "sm", accessibilityLabel, testID } = props;
+  const locale = useLoticsLocale();
   return (
     <Pressable
       onPress={() => onToggle(!expanded)}
@@ -63,7 +65,7 @@ export function TextDisclosure(props: TextDisclosureProps) {
       testID={testID}
     >
       <TextLink size={size} color="muted">
-        {expanded ? `Hide ${label}` : `Show ${label}`}
+        {expanded ? locale.textDisclosure.hide(label) : locale.textDisclosure.show(label)}
       </TextLink>
     </Pressable>
   );