@lotics/ui 26.4.1 → 27.6.0

package/MIGRATION.md

@@ -4,6 +4,76 @@ 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.
 
+## 27.4.0 — a `Select` trigger announces as `combobox`, not `button`
+
+No API change, but the DOM and the accessibility tree changed, so **a test or script that
+finds a Select by its button role must be updated**:
+
+```ts
+getByRole("button", { name: "Tags" })    // BEFORE — a <button> element
+getByRole("combobox", { name: "Tags" })  // AFTER  — a <div role="combobox">
+```
+
+The trigger had to stop being a `<button>` element: the sanctioned chip box
+(`renderSelected` → `<Chip onDismiss>`) puts a remove button inside the trigger, and
+`<button>`'s content model forbids interactive descendants — so every multi Select with
+chips rendered invalid HTML and threw a React error on mount. `combobox` is also the role
+the APG pattern this control already follows calls for. Focus, Enter/Space, pointer open,
+Escape, and chip removal are unchanged.
+
+Note for `searchable`: `OptionList`'s filter input is a combobox too, so scope such a query
+to the trigger (or use `.first()`) rather than assuming one match per Select.
+
+## 27.2.0 — a `LedgerGroup`'s sum moved below its rows
+
+No API change; the rendering moved. A summed group used to print `LABEL … sum` as an eyebrow
+ABOVE its rows and now closes them: the rows come first, then `Label   sum` at `sm/medium`,
+with no eyebrow (the label travels with the sum instead of being said twice).
+
+**If you mix summed and unsummed groups in one `Ledger`, that now looks inconsistent** — an
+unsummed group still captions from above, so the group names land in two different places.
+This is the one case that wants an edit: give every group a `total`, and let a lone row stand
+bare rather than grouping it (a one-row group's sum only restates the row). Omitting `total`
+remains fully supported for a statement whose groups all name categories without summing them.
+
+## 27.0.0 — `TextButton` is REMOVED; an act carries a control surface
+
+**`@lotics/ui/text_button` is gone, with no replacement component.** It was the wrong
+abstraction, and 25.0.0 had already retreated from it inside `ReferenceField`.
+
+It existed to solve one real problem: a fill-less `Button`'s optical edge is its INK, inset by its
+padding, so it reads as indented against a column of labels. But paying for that with a third rung
+cost more than it bought — **underline came to mean two things at once**, separable only by ink
+(blue navigates, zinc acts), so the affordance stopped answering the only question a reader has:
+does this take me away, or does it do something here. And it duplicated the `Button` colour ladder,
+where `muted` already IS the quiet rung.
+
+**The new law: an ACT carries a control surface; only NAVIGATION is underlined text.** Chrome has
+two rungs — `Button` (40px, a surface) and `InlineButton` (28px, filled, on a field's own surface).
+`Link`/`TextLink` stay underlined and go somewhere.
+
+```tsx
+<TextButton onPress={selectAll}>Select all</TextButton>            // BEFORE
+<Button title="Select all" color="muted" onPress={selectAll} />    // AFTER
+
+<TextButton color="danger" onPress={del}>Remove fee</TextButton>   // BEFORE
+<Button title="Remove fee" color="danger" onPress={del} />         // AFTER — rule 9's convention
+```
+
+**Per call site, pick by WHERE the act sits, not by how quiet you want it to look:**
+
+- In **chrome** — a `PopoverFooter`, a heading row, a select-all band — use `Button color="muted"`.
+  Nothing there establishes a text edge, so the padding inset costs nothing. (`FilterChip`'s Clear
+  and `OptionList`'s select-all/deselect-all moved this way inside the kit.)
+- **Destructive** — `Button color="danger"`, bottom-left after the entity's fields, per composition
+  rule 9. That is the page-wide convention a text-weight verb was quietly opting out of.
+- **An add** — `Button` below the list it extends, per rule 8.
+- Still tempted to align a quiet verb to a column of TEXT? **Move the act, don't restyle it.** That
+  pull is what produced the rung in the first place.
+
+`TextLink` is unchanged. Its `onPress`-free forms — an `href` link, or a passive underlined marker
+on a value whose press opens a peek — were never this component's job and keep working.
+
 ## 26.0.0 — a section's ADD moves to its heading row; `EmptyState` loses its verb
 
 **`EmptyState.action` is REMOVED — no replacement on that component.** Two different things

package/docs/catalog.md

@@ -467,8 +467,9 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 
 - **`button`** — `Button`: the labelled action; `title` MANDATORY (it is the accessible
   name), `color` = emphasis/risk. A fill-less `Button` shows no box, so its optical
-  edge is its INK, inset by its padding — don't align one to a column of TEXT; that
-  is `TextButton`'s job.
+  edge is its INK, inset by its padding — don't align one to a column of TEXT. There is
+  no text-weight rung to reach for: move the act into chrome (a `PopoverFooter`, a
+  heading row) where no text edge exists to betray, or give it the filled tier.
 - **`icon_button`** — `IconButton`: the icon-only circular action (see
   [Actions](#actions)).
 - **`back_button`** — `BackButton`: the one go-back control — don't hand-roll it (an
@@ -485,18 +486,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   with no `href` it stays NEUTRAL: plain underlined text to wrap in your own pressable,
   or a MARKER that a value leads somewhere (a record reference whose press opens a peek,
   not a trip). `color` overrides either way; inherits every `Text` prop. It does NOT
-  act — that's `TextButton`.
-- **`text_button`** — `TextButton`: a low-chrome ACTION at text weight ("Select all",
-  "Clear", "Add stop") — the third rung of chrome after `Button` (40px surface) and
-  `InlineButton` (28px, filled, on a field's surface). **Underlined, in neutral ink**:
-  underline marks interactive, blue marks navigation — so `Link` goes somewhere and
-  this acts. Choose by what the press DOES. The underline is not optional (position is
-  a learned convention, hover is absent on touch). `TextButtonColor` is
-  `default | danger` only — `muted` would mute the thing carrying the act (use
-  `Button color="muted"`). `onPress` REQUIRED; `disabled` greys to zinc-400, drops the
-  press + wash, announces `aria-disabled`. Hover wash, focus ring and a 40px target
-  (32px box + `hitSlop`) come from `PressableHighlight` — a pressable `Text` has
-  none of them. ONE size, no icon (a verb needing a glyph is a `Button`).
+  act: an act carries a control surface (`Button`/`InlineButton`), and underlined text
+  is the NAVIGATION affordance only.
 - **`chip`** — `Chip`: the generic pill — pressable when `onPress` (announces as a button;
   pass `accessibilityLabel` when children aren't self-describing text) + an
   absolutely-positioned dismiss ✕ sibling when `onDismiss` (its name = `dismissTooltip` ??
@@ -588,7 +579,14 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   also home of the shared `PickerOption` type.
 - **`select`** — `Select`: rich/custom-rendered, single/multi, select-all, chips via
   `renderSelected(item, { remove })` + `searchable` + `allowCustom` — the tag field is just
-  a multi Select; opens `OptionList`.
+  a multi Select; opens `OptionList`. Its trigger is `role="combobox"` (a `<div>`), never
+  `role="button"`: the chip box legitimately puts a remove button INSIDE the trigger, and a
+  real `<button>` may not contain one. **Any trigger that renders caller-supplied content
+  must not take `accessibilityRole="button"`** — react-native-web picks the element from the
+  role, and `<button>`'s content model forbids interactive descendants, so the first caller
+  to pass a chip, link, or menu makes the markup invalid. Either take a non-button role, or
+  keep the verbs OUTSIDE the pressable as siblings (`Chip`'s absolute ✕, `InlineEditView`'s
+  shell-owned `actions`).
 - **`option_list`** — `OptionList`: the ONE shared searchable listbox body every selector
   opens — single/multi, optional internal search, create row, keyboard + native-`<select>`
   typeahead; host it directly in a `Popover`/`Dialog` for a command palette.
@@ -838,14 +836,44 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `metric` {label,value,tone,note} pinned right, the band's ONE accent. The record's FIELDS
   never live in the header: compose them as `DetailTable`s in the sections below. Replaces
   hand-rolled record headers (mixed scales, several competing figures, color noise).
-- **`ledger`** — `Ledger` + `LedgerGroup` + `LedgerRow` + `LedgerTotal` — the record-level
-  money list: charge/receipt GROUPS with sums in their headers, every figure on ONE
-  right-aligned tabular column, `peek` turns a row into a pressable door floating its
-  particulars in an anchored popover (put links INSIDE the peek — never a button in a
-  button; `reference` is the trailing-link alternative for static rows), `LedgerTotal` = the
-  divider-set emphasized close with `zeroLabel` for settled. The financial-statement grammar
-  at record density; worked example: [`tpl_item_list`](../examples/tpl_item_list.tsx)
-  drawer.
+- **`ledger`** — `Ledger` + `LedgerGroup` + `LedgerBasis` + `LedgerRow` + `LedgerTotal` — the
+  record-level money list: every figure on ONE right-aligned tabular column, `peek` turns a row
+  into a pressable door floating its particulars in an anchored popover (put links INSIDE the
+  peek — never a button in a button; `reference` is the trailing-link alternative for static
+  rows), `LedgerTotal` = the divider-set emphasized close with `zeroLabel` for settled. **`meta` is a
+  neutral QUALIFIER** (a date, a method) at caption weight — never a problem or a state: one
+  row's meta being a fact and another's a complaint is what makes a column read inconsistent,
+  and a caption is the wrong weight for something wanting action. A problem goes on the row
+  that can FIX it, and in a statement the arithmetic has usually said it already.
+  **Pick the shape by what the statement IS**, because there are two and they read differently:
+  - **`charges → total`** — `LedgerGroup`s, each **closed by its own sum** ("Charges" vs
+    "Received"), giving three ascending rungs: row `sm/regular`, subtotal `sm/medium`, total
+    `md/semibold` over its rule. A summed group's label travels WITH its sum and takes no
+    eyebrow, so its rows are met before its name and must carry the side themselves, by opposite
+    SIGNS. Two same-signed groups are two statements, not two sides; give them two `Ledger`s.
+    A `total` must equal the rows it closes — derive the rows and the sum from ONE list, never
+    from two predicates that can drift apart — and it earns its place only by adding what the
+    rows don't already say, which a one-row group's sum doesn't. **Omitting `total` is a shape,
+    not a degradation**: the label becomes a caption ABOVE the rows, for a group that names a
+    category rather than summing a side. **Don't mix the two in one `Ledger`** — the label would
+    sit above some groups and below others, reading as an accident; if any group earns a sum,
+    give every group one and let a lone row stand bare instead of grouping it.
+  - **`basis → derived → total`** — duty off a customs value, commission off gross, interest
+    off principal. The base is **`LedgerBasis`** (label + value + optional `meta` for how it was
+    arrived at), which takes the third treatment on the money column and sets its `Divider`
+    BELOW it, since a premise separates itself from what it feeds. Do not render a base as a
+    `LedgerRow` — that claims it is a peer you could add to the rows under it — and do not wrap
+    it in a one-row group. With one side there is no group at all: the levies are bare
+    `LedgerRow`s between the basis and the total.
+  Worked example: [`tpl_record`](../examples/tpl_record.tsx) § Billing — a three-sided closing
+  statement (billed, less credited, less received) exercising every row state: a `peek` door
+  whose lookup link sits INSIDE the popover, a flat `reference` on the row with nothing to
+  expand, `meta` + `success` tone on money coming back, and a one-row `Adjustments` group that
+  takes no `total`. `Received` is derived from the charges carrying a payment METHOD rather than
+  a second flag to keep in step, and the refundable deposit stays OUT because a ledger earns
+  trust by summing exactly what its label claims. `LedgerBasis` is demoed on the gallery's
+  Charts page instead — a delivery order has no base to compute from, and inventing one to
+  place a component is how invented needs start.
 - **`reference_field`** — `ReferenceField`: a reference to ANOTHER RECORD, rendered as a
   FIELD VALUE — the kit's inline-editor surface (so a pointer sits in the value column
   like the editors above and below it), whose press opens a PEEK of that record's facts.
@@ -948,7 +976,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`filter_chip`** — `FilterChip` + `selectSummary`: the toolbar filter pill hosting a
   facet (options, a `Slider range`, a `Counter`).
 - **`summary_line`** — `SummaryLine`: the light inline summary of a register/list's FILTERED
-  view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band.
+  view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band. Every item is an
+  AGGREGATE over the rows in view (a count, a sum, a fill), and the strip goes with the set it
+  summarizes — including a record's child list (a consol's houses, an order's lines). **Never on
+  a record's identity band reporting that record's own state**: derived verdicts on one record
+  ("documents incomplete", "2 fields need checking") are the checklist a record must not carry
+  (§`pipeline`) and restate at a distance what the sections below state in place.
 - **`use_selection`** — `useSelection`: always-on multi-select state for a register/list —
   the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`;
   selectability gating stays with the caller. The checkbox-always-visible counterpart to

package/docs/composition.md

@@ -471,17 +471,19 @@ All view controls are 40px tall (`CONTROL_HEIGHT`), `sm` labels, in ONE wrapping
   `danger` (and its quieter `danger-secondary`) marks destructive — that's the whole axis. A
   fill-less `Button` (`danger-secondary`, `muted`, un-colored) shows no box, so its optical edge is
   its INK, inset by its padding: **never align one to a column of TEXT** — it reads as indented
-  against every label starting on the true edge, and reaching for the filled tier to fix that buys
-  alignment with prominence, on what is usually the rarest act on the surface. A text-weight act is
-  `TextButton`, which lands its ink on the column by construction. Chrome has three rungs: `Button` (a 40px control with a
-  surface) → `InlineButton` (28px, filled, on a field's own surface) → `TextButton` (no surface,
-  sitting in a line of text). **UNDERLINE MARKS INTERACTIVE, BLUE MARKS NAVIGATION** — so
-  `Link`/`TextLink` are blue + underline and GO somewhere, `TextButton` is zinc + underline and
-  ACTS. Pick by what the press DOES. The underline is not optional on a surface-less control:
-  POSITION is a learned convention rather than an affordance (invisible to a first-time reader) and
-  hover is not one either (absent on touch, revealed only once you're already there). A tint is the
-  other way to say it — the Material/HIG answer — but blue is spoken for here and a second accent
-  for "actionable" would collide with one-accent-per-purpose. Never a `muted` text action: it mutes
+  against every label starting on the true edge. The answer is to move the act, not to invent a
+  rung for it: a quiet verb belongs in CHROME (a `PopoverFooter`, a heading row, a select-all
+  band) where nothing establishes a text edge to betray, and a destructive one belongs where rule 9
+  already puts it. Chrome has TWO rungs: `Button` (a 40px control with a surface) →
+  `InlineButton` (28px, filled, on a field's own surface).
+
+  **AN ACT CARRIES A CONTROL; ONLY NAVIGATION IS UNDERLINED TEXT.** `Link`/`TextLink` are the
+  underlined pair and they GO somewhere; everything that acts is a `Button` or an `InlineButton`.
+  A surface-less ACT was tried as a third rung and removed: it made underline mean two things at
+  once, separable only by ink, so the affordance stopped answering the one question a reader has —
+  does this take me away, or does it do something here. It also competed with the `Button` colour
+  ladder for the same job, since `muted` already IS the quiet rung. Pick by what the press DOES,
+  and let the surface say which kind it is. Never a `muted` text action: it mutes
   the one thing carrying the act. No
   "success"/green button. Decision UIs put positive/negative color on the STATUS (dot) and verdict
   (colored `Text`), not the buttons.
@@ -711,10 +713,10 @@ selection washes).
 (rose vs orange) stays on `Badge`s.
 
 Links use `Link`/`TextLink` (blue-600), never `solid("blue")` — and blue-600 means NAVIGATION
-specifically, not "interactive" generally: the underline is what marks a surface-less control
-interactive (see the button ladder above), so a `TextButton` ACTS and stays zinc. `TextLink` takes
-the blue only when it has an `href`; as a passive marker on a value it stays neutral, because a
-press that opens a PEEK is not a trip.
+specifically, not "interactive" generally. Underlined text is the NAVIGATION affordance and nothing
+else (see the button ladder above): an act carries a control surface. `TextLink` takes the blue only
+when it has an `href`; as a passive marker on a value it stays neutral, because a press that opens a
+PEEK is not a trip.
 
 ## `Badge` is for STATUS only — everything else is text
 

package/docs/templates.md

@@ -42,8 +42,7 @@ the package index is [../AGENTS.md](../AGENTS.md).
 | A guided sequence of physical tasks (scan, confirm, next) | `tpl_pick` |
 | Splitting one source amount across many targets | `tpl_allocate` |
 | A record's create/edit surface — also the settings shape | `tpl_record` |
-| A checklist ON a record (the canonical task-list grammar) | `tpl_item_list` (its Tasks section) |
-| A team task board (inline-managed grouped table) | `tpl_task_board` |
+| A surface whose SUBJECT is tasks (the canonical task-list grammar) | `tpl_task_board` |
 | One record HANDED between desks — stages that each own their controls | `tpl_record` (its Progress section) |
 | Financial statements | `tpl_statements` |
 | A scoped lookup report with export | `tpl_report` |
@@ -336,25 +335,36 @@ billing, and quick-capture templates. Top → bottom:
   `DrawerFooter`. "Add fee" rides the section heading's right edge — the one place it does not
   move as rows arrive — and is create-then-refine: a blank fee opens straight in the drawer. The
   empty state carries no button of its own, because that one is already on screen.
-- **Billing — a REGISTER, the same shape as Fees.** Both sections are a list of money items
-  where each item has detail and a per-item act, so both are a compact `Table` whose row opens
-  its FULL detail in a right-docked `Drawer` (◀ ▶ step the invoices) — the drill-down law.
-  It was three inline bands stacked, each with its own charge table, callout and action row,
-  plus two more bands after them: five subsections and four primaries in one section, which is
-  what made the area read as spread. A row now carries title, lines, total, a DERIVED state
-  `Badge`, the issued ref; the charge editors (ghost list prices with one-tap "Standard …"
-  fill, "How paid…" selects) live in the drawer with the lines they bill, and the section ends
-  with ONE summary (`SummaryLine`: to collect, deposit, issued) and ONE action row.
+- **Billing — INLINE bands, closed by a STATEMENT.** Each invoice is a `Subsection` costing ONE
+  line of chrome (its name, its total, its issued ref) over its charge rows in a `DetailTable`;
+  the charge editors carry ghost list prices with a one-tap "Standard …" fill and a "How paid…"
+  select. Three shapes were tried. Inline bands with a heading rung, a band callout and an
+  action row each made the CHROME three times the content; a `Table` + right-docked `Drawer`
+  then hid four charge lines behind three expansions, which trades a real fault for a worse one
+  — you can no longer see what you are paying for. So the lines all stay and the chrome
+  shrank, and a per-invoice problem rides the CHARGE ROW that has it (`warning` on the line
+  missing its method), which is smaller than a callout and more precise: it names the offender
+  instead of counting offenders.
+  The section then CLOSES with a `Ledger` — the money grammar's worked example, and the answer
+  the bands cannot give: three invoice totals down the page are three facts the reader has to
+  add up, and "is anything still owed" appeared nowhere. THREE sides — `Invoiced`, a one-row
+  `Adjustments` credit, and `Received` with its rows negative and `success`-toned — so the total
+  states arithmetic rather than a difference, over a `LedgerTotal` carrying `zeroLabel="Paid in
+  full"`. Every row state is on screen: a `peek` door on the multi-line invoice (its lookup link
+  INSIDE the popover, since a button cannot hold a button), a flat `reference` on the single-line
+  one, `meta` qualifying how money came back. `Received` is DERIVED from the charges that carry a
+  payment method — not a second flag to keep in step — and the refundable deposit stays OUT,
+  because a ledger earns trust by summing exactly what its label claims. The fixture is
+  deliberately uneven (an unpriced charge, one issued invoice, a one-row group) because a tidy
+  one verifies nothing.
   THE ACTION-GATING LAW is still the worked example: a not-ready Issue is DISABLED and the
-  reason is a co-located `Callout` at the gate's SCOPE, once — an invoice's own inconsistency
-  (a charged line with no method) in its drawer, a broken record premise (no customer / invalid
-  tax ID) at the section top; self-evident empties stay silent, and NEVER prose beside a CTA.
-  Issuing gates on record premises only — never silently on stage. Issue sits in the DRAWER's
-  footer, which is the one place a CTA right-aligns (an overlay footer; on the page it would
-  ride the control column). It is also the worked example of **an irreversible action taking an
-  ID, not a captured object** — the confirm re-resolves the invoice from its key, so the quoted
-  total is the one that will be billed even when the press was held for a charge cell's write
-  (data_entry.md § Inline edit).
+  reason is a co-located `Callout` at the gate's SCOPE, once — an invoice's own inconsistency (a
+  charged line with no method) on that line, a broken record premise (no customer / invalid tax
+  ID) at the section top; self-evident empties stay silent, and NEVER prose beside a CTA.
+  Issuing gates on record premises only — never silently on stage. It is also the worked example
+  of **an irreversible action taking an ID, not a captured object** — the confirm re-resolves the
+  invoice from its key, so the quoted total is the one that will be billed even when the press
+  was held for a charge cell's write (data_entry.md § Inline edit).
 - **Document set — the OUTPUT desk, the last WORK section** (the composition rules' output
   law worked on the record surface: the top is intake, the bottom produces on demand).
   Forms group PER PARTY on the `SubsectionStack` beat — each party a `SubsectionHeading` +

package/examples/tpl_item_list.tsx

@@ -159,7 +159,7 @@ const ASSIGNEES = [...new Set(HO_SO.map((r) => r.phuTrach))].map((n) => ({ label
 // Columns defined ONCE — Table renders the header from these and each
 // TableCell takes its width/align by position; the ⋯ is the trailing gutter.
 // `priority` = the MOBILE contract: when the container can't fit every column
-// the highest numbers drop first (Received → Tasks → Status), the identity +
+// the highest numbers drop first (Received → Status), the identity +
 // Customer + Fee survive longest, and at the register floor rows STACK
 // (label-over-value) so nothing is lost — the drawer carries full detail
 // either way.
@@ -715,8 +715,8 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
           <View style={{ paddingHorizontal: 24, paddingBottom: 12, gap: 12 }}>
             <Text size="xs" color="muted">
               {variant === "export"
-                ? "The export case starts in Processing — details, tasks, and payment live on the record itself."
-                : "The import case starts in Processing — details, tasks, and payment live on the record itself."}
+                ? "The export case starts in Processing — details and payment live on the record itself."
+                : "The import case starts in Processing — details and payment live on the record itself."}
             </Text>
             <FormField label="Customer">
               {khach === "" ? (
@@ -779,9 +779,8 @@ export function TplItemList() {
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
   const [openMa, setOpenMa] = useState<string | null>(null);
-  // ONE task state per record — the register column, its peek popover, and the
-  // drawer all read and write the same list. Paid state lifts the same way:
-  // settling the ledger in the drawer flips the row's Unpaid/Print/menu live.
+  // Paid state is LIFTED, not owned by the drawer: settling the ledger inside the
+  // drawer flips the row's Unpaid/Print/menu live, because both read one source.
   const [paidMap, setPaidMap] = useState<Record<string, boolean>>({});
   const daThuOf = (r: HoSo) => paidMap[r.ma] ?? r.daThu;
   // The register rows are state: the create dialog PREPENDS a real row and

package/examples/tpl_record.tsx

@@ -35,6 +35,7 @@ import { FileRows } from "@lotics/ui/file_rows";
 import { FileGrid } from "@lotics/ui/file_grid";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { InlineStatic } from "@lotics/ui/inline_static";
+import { Ledger, LedgerGroup, LedgerRow, LedgerTotal } from "@lotics/ui/ledger";
 import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { InlineNumberInput } from "@lotics/ui/inline_number_input";
 import { InlineSelect } from "@lotics/ui/inline_select";
@@ -59,7 +60,6 @@ import { CheckboxInput } from "@lotics/ui/checkbox_input";
 import { ChipGroup, type ChipOption } from "@lotics/ui/chip_group";
 import { Sequence, SequenceItem, SEQUENCE_INSET } from "@lotics/ui/sequence";
 import { ReferenceField } from "@lotics/ui/reference_field";
-import { TextButton } from "@lotics/ui/text_button";
 import { InlineButton } from "@lotics/ui/inline_button";
 import { useSelection } from "@lotics/ui/use_selection";
 import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
@@ -278,9 +278,12 @@ interface Invoice {
 
 const BILLING_INITIAL: Invoice[] = [
   {
+    // Issued AND multi-line, which is the row that exercises the precedence: `peek` wins,
+    // so its lookup link renders INSIDE the popover and the flat `reference` is ignored.
+    // Storage is the mirror case (one charge, issued) and takes the flat link instead.
     key: "delivery",
     title: "Delivery",
-    ref: "",
+    ref: "INV-0029",
     charges: [
       { key: "freight", label: "Freight", standard: 1_200_000, amount: 1_200_000, method: "cash" },
       { key: "insurance", label: "Insurance", standard: 250_000, amount: 0, method: "" },
@@ -293,13 +296,19 @@ const BILLING_INITIAL: Invoice[] = [
     charges: [{ key: "handling", label: "Handling fee", standard: 150_000, amount: 150_000, method: "" }],
   },
   {
+    // Seeded ISSUED, so the section renders both states at rest: the Re-issue path, the
+    // band's lookup link, and the ledger's trailing `reference`. A fixture where nothing
+    // has happened yet only ever exercises the first half of a flow.
     key: "storage",
     title: "Storage",
-    ref: "",
+    ref: "INV-0031",
     charges: [{ key: "storage", label: "Storage fee", standard: 80_000, amount: 80_000, method: "transfer" }],
   },
 ];
 
+/** A settled credit against the record — the statement's third side, and its only line. */
+const CREDIT = { key: "cn-0031", label: "Credit note CN-0031", amount: 120_000, meta: "Storage waived, 3 days" };
+
 const invoiceTotal = (inv: Invoice) => inv.charges.reduce((s, c) => s + c.amount, 0);
 const missingMethods = (inv: Invoice) => inv.charges.filter((c) => c.amount > 0 && !c.method);
 
@@ -640,6 +649,38 @@ interface Stop {
  * The kit draws the rail, the reorder/remove controls and the spacing; the
  * template supplies what a stop CONTAINS and what its position MEANS.
  */
+/**
+ * What sits behind ONE invoice figure in the closing statement — the charges that add up
+ * to it, and the lookup link once it is issued.
+ *
+ * The link belongs in HERE rather than beside the row: a `peek` row is already a button,
+ * and a button inside a button is invalid markup. That is also why the flat `reference`
+ * link and `peek` are alternatives, never companions — the component renders `reference`
+ * only on a row that is not a door.
+ *
+ * Unpriced charges are listed too, as "—" rather than 0: a charge nobody has priced is
+ * not a charge of nothing, and this is the popover that explains why the figure above is
+ * smaller than the invoice's line count suggests.
+ */
+function InvoiceParticulars({ inv }: { inv: Invoice }) {
+  return (
+    <View style={{ gap: 8, padding: 12, minWidth: 240 }}>
+      <Text size="xs" color="muted">{inv.title}</Text>
+      {inv.charges.map((c) => (
+        <View key={c.key} style={{ flexDirection: "row", alignItems: "baseline", gap: 12 }}>
+          <Text size="sm" style={{ flexGrow: 1, flexShrink: 1 }}>{c.label}</Text>
+          <Text size="sm" tabular color={c.amount > 0 ? undefined : "muted"}>
+            {c.amount > 0 ? formatMoney(c.amount) : "—"}
+          </Text>
+        </View>
+      ))}
+      {inv.ref ? (
+        <Link size="xs" onPress={() => {}} accessibilityLabel={`Open invoice ${inv.ref}`}>{inv.ref}</Link>
+      ) : null}
+    </View>
+  );
+}
+
 function RouteStops({ stops, onChange }: { stops: Stop[]; onChange: (next: Stop[]) => void }) {
   const patch = (id: string, next: Partial<Stop>) =>
     onChange(stops.map((s) => (s.id === id ? { ...s, ...next } : s)));
@@ -691,7 +732,9 @@ function RouteStops({ stops, onChange }: { stops: Stop[]; onChange: (next: Stop[
       <View style={{ flexDirection: "row", paddingLeft: SEQUENCE_INSET }}>
         {/* A stop is added BEFORE the destination — a new leg is always in the
             middle of a journey; nobody adds one past the end. */}
-        <TextButton
+        <Button
+          title="Add stop"
+          color="secondary"
           onPress={() =>
             onChange([
               ...stops.slice(0, -1),
@@ -699,9 +742,7 @@ function RouteStops({ stops, onChange }: { stops: Stop[]; onChange: (next: Stop[
               stops[stops.length - 1],
             ])
           }
-        >
-          Add stop
-        </TextButton>
+        />
       </View>
     </View>
   );
@@ -1282,6 +1323,22 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
   // total that will actually be billed, including a charge that landed after the press.
   const confirmIssue = invoices.find((i) => i.key === confirmIssueKey) ?? null;
   const grandTotal = invoices.reduce((sum, inv) => sum + invoiceTotal(inv), 0);
+  // A charge carrying a METHOD has been paid — the statement below is derived from
+  // that, not from a second "paid" flag somebody has to keep in step with it. The
+  // record already knows; asking again is how the two answers start disagreeing.
+  //
+  // ONE list, and both the rows and the subtotal read it. Deriving them from two
+  // separate predicates is how a ledger comes to disagree with itself: filter the
+  // rows on `method && amount > 0` while summing on `method` alone and any charge
+  // that fails only the second test lands in the total with no line to explain it.
+  // The component cannot catch that — it renders the `total` it is handed.
+  const receipts = invoices.flatMap((inv) =>
+    inv.charges.filter((c) => c.method !== "" && c.amount > 0).map((c) => ({ inv, charge: c })),
+  );
+  const received = receipts.reduce((sum, r) => sum + r.charge.amount, 0);
+  // Three sides now, so the total states the arithmetic rather than a difference of two:
+  // what was billed, less what was credited, less what arrived.
+  const outstanding = grandTotal - CREDIT.amount - received;
   const allMissing = invoices.flatMap(missingMethods);
 
   const issue = (inv: Invoice) => {
@@ -2441,12 +2498,13 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                             convention, which is the kit's. It replaces the
                             DrawerFooter that used to pin it.
 
-                            `TextButton`, same as the peek's detach: a text-weight
-                            destructive act aligned to a column of text. It lands its
-                            ink ON the label column by construction, keeps a 40px
-                            target via hitSlop, and drops the trash glyph — "Remove
-                            fee" already names the object, which is the safeguard the
-                            icon was only decorating.
+                            Solid `danger`, which is the destructive convention
+                            page-wide (composition rule 9) — not a text-weight act.
+                            A quiet destructive verb had been tried here and the
+                            surface-less rung is gone: an act now always carries a
+                            control, and only NAVIGATION is underlined text. The trash
+                            glyph stays off — "Remove fee" already names the object,
+                            which is the safeguard the icon was only decorating.
 
                             NO Divider. Every hairline a `Table` draws is
                             full-bleed (the row `Divider`s carry no padding, the
@@ -2457,7 +2515,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
                             wrapper is required, not decoration: a `Button` alone
                             in a column View stretches to full width. */}
                         <View style={{ flexDirection: "row" }}>
-                          <TextButton color="danger" onPress={() => deleteFee(f)}>Remove fee</TextButton>
+                          <Button title="Remove fee" color="danger" onPress={() => deleteFee(f)} />
                         </View>
                       </View>
                     }
@@ -2591,6 +2649,88 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418" }: { chrome?:
             })}
           </SubsectionStack>
 
+          {/* THE CLOSING STATEMENT — `Ledger`, the money grammar, and the answer to
+              the one question the bands above cannot give: what does this record come
+              to, and how much of it has arrived. Each invoice states its own total on
+              its lead line, but three totals down the page are three facts the reader
+              has to add up, and "is anything still owed" was nowhere on the section.
+
+              It is a STATEMENT, not another band: no `Subsection`, no heading rung. It
+              closes the invoices, so it sits directly under them and above the record's
+              own fields — a conclusion goes after what it concludes.
+
+              THREE sides, which is what makes the total state arithmetic rather than a
+              difference: billed, less credited, less received. Money coming back is
+              NEGATIVE (the component renders "− ") and `success`-toned, because a
+              receipt and a credit are both the good outcome; `zeroLabel` gives a settled
+              record "Paid in full" instead of a proud zero.
+
+              The DEPOSIT is deliberately absent. It is refundable — never part of the
+              total to collect — so folding it in would make the closing figure answer a
+              different question than the one it is labelled with. A ledger earns trust
+              by summing exactly what its label claims.
+
+              A row opens where there is something to open, and the two ways are not
+              interchangeable. `peek` floats an invoice's PARTICULARS — the charges behind
+              its one figure — and the lookup link lives INSIDE that popover, never beside
+              the trigger, because a button inside a button is invalid. `reference` is the
+              flat alternative for a row with nothing to expand: one charge IS its own
+              particulars, so Storage carries a trailing link instead of a door.
+
+              The `Adjustments` group holds ONE row and therefore no `total`: a sum over a
+              single line states the same fact twice, at two weights. That is the honest
+              fixture rather than a tidy one — real groups are built from data, so some
+              arrive with one row — and it puts the grammar's open question on screen: an
+              unsummed group captions from ABOVE while a summed one closes from below, so
+              this statement names its groups in two places. */}
+          <Ledger formatValue={money}>
+            <LedgerGroup label="Invoiced" total={grandTotal}>
+              {invoices.map((inv) => {
+                /* NO meta on this side. It briefly carried "awaiting payment method",
+                   and that was `meta` doing two jobs: on the Received rows it holds a
+                   neutral QUALIFIER (how the money arrived), here it held a PROBLEM.
+                   Two unlike things in one treatment is what makes a caption read as
+                   inconsistent — the size was never the fault.
+                   The problem also had a home already: the charge row above carries
+                   `warning="Choose how this was paid"`, on the line with the editor that
+                   fixes it. A statement's job is the arithmetic, and the arithmetic
+                   already says it — `Outstanding` IS the unpaid money. Saying it again in
+                   weaker words adds a second voice for one fact. */
+                /* A door where there are PARTICULARS, and the count that decides it is the
+                   charges, not the priced ones. An invoice whose second line is unpriced is
+                   exactly the row whose figure looks too small for it, which is the question
+                   the popover answers — gating on `amount > 0` would hide the door precisely
+                   when it is most useful. */
+                return (
+                  <LedgerRow
+                    key={inv.key}
+                    label={inv.title}
+                    value={invoiceTotal(inv)}
+                    peek={inv.charges.length > 1 ? <InvoiceParticulars inv={inv} /> : undefined}
+                    reference={inv.ref ? { label: inv.ref, onPress: () => {} } : undefined}
+                  />
+                );
+              })}
+            </LedgerGroup>
+            <LedgerGroup label="Adjustments">
+              <LedgerRow label={CREDIT.label} meta={CREDIT.meta} value={-CREDIT.amount} tone="success" />
+            </LedgerGroup>
+            {received > 0 ? (
+              <LedgerGroup label="Received" total={-received}>
+                {receipts.map(({ inv, charge }) => (
+                  <LedgerRow
+                    key={`${inv.key}-${charge.key}`}
+                    label={charge.label}
+                    meta={METHODS.find((m) => m.value === charge.method)?.label}
+                    value={-charge.amount}
+                    tone="success"
+                  />
+                ))}
+              </LedgerGroup>
+            ) : null}
+            <LedgerTotal label="Outstanding" value={outstanding} tone={outstanding > 0 ? "danger" : "default"} zeroLabel="Paid in full" />
+          </Ledger>
+
           {/* ONE action row for the section, on the control column. The deposit
               is a field of the record, not a band of its own — its receipt is a
               second act on the same row. */}

package/examples/tpl_task_board.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View, type ViewStyle } from "react-native";
 import { Text } from "@lotics/ui/text";
-import { TextButton } from "@lotics/ui/text_button";
 import { colors, solid, asColorName } from "@lotics/ui/colors";
 import { Icon } from "@lotics/ui/icon";
 import { CheckCircle } from "@lotics/ui/check_circle";
@@ -527,7 +526,7 @@ function RowActionCell({ task, result, onAttach, onApprove }: { task: Task; resu
   const onPress = a.kind === "attach" ? () => onAttach(task.id) : a.kind === "approve" ? () => onApprove(task.id) : () => {};
   return (
     <View style={styles.action}>
-      <TextButton numberOfLines={1} onPress={onPress}>{a.label}</TextButton>
+      <Button title={a.label} color="muted" onPress={onPress} />
     </View>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "26.4.1",
+  "version": "27.6.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -179,7 +179,6 @@
     "./counter": "./src/counter.tsx",
     "./link": "./src/link.tsx",
     "./reference_field": "./src/reference_field.tsx",
-    "./text_button": "./src/text_button.tsx",
     "./text_link": "./src/text_link.tsx",
     "./sort_header": "./src/sort_header.tsx",
     "./skeleton": "./src/skeleton.tsx",

package/src/filter_chip.tsx

@@ -3,11 +3,11 @@ import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
-import { TextButton } from "./text_button";
 import { Chip } from "./chip";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import type { PopoverSide, PopoverAlign } from "./popover";
 import { useLoticsLocale } from "./locale";
+import { Button } from "./button";
 
 export interface FilterChipProps {
   /** The dimension name — shown alone when inactive ("Owner"), prefixed when
@@ -110,7 +110,7 @@ export function FilterChip(props: FilterChipProps) {
           <PopoverFooter>{footer}</PopoverFooter>
         ) : showClear ? (
           <PopoverFooter align="start">
-            <TextButton onPress={onClear}>{clearLabel}</TextButton>
+            <Button title={clearLabel} color="muted" onPress={onClear} />
           </PopoverFooter>
         ) : null}
       </PopoverContent>

package/src/ledger.tsx

@@ -9,9 +9,12 @@ import { useLoticsLocale } from "./locale";
 import { Text } from "./text";
 
 // The record-level money list — a compact financial STATEMENT for one record's
-// drawer/section: charge/receipt GROUPS with their sums in the group headers,
-// every figure on ONE right-aligned tabular column, closed by a divider-set
-// emphasized total. A row with `peek` is a door: pressing it floats the fee's
+// drawer/section: charge/receipt GROUPS each closed by their own sum, every
+// figure on ONE right-aligned tabular column, closed by a divider-set
+// emphasized total. Three ascending rungs and no more — a row, a group's
+// subtotal, the total — so the reader's eye lands on the conclusion.
+//
+// A row with `peek` is a door: pressing it floats the fee's
 // PARTICULARS (basis, who charged it, the invoice it landed on) in an anchored
 // popover — the list stays flat and scannable, the depth is on demand. A row
 // with `reference` carries a trailing link instead (an issued invoice, a
@@ -63,31 +66,125 @@ export function Ledger(props: LedgerProps) {
 }
 
 export interface LedgerGroupProps {
-  /** The group name ("Charges", "Received") — xs muted, with the sum opposite. */
+  /** The group name ("Charges", "Received", a category). It travels WITH the sum when
+   *  there is one, and captions the rows from above when there is not. */
   label: string;
-  /** The group's sum, shown right-aligned in the header. Sign renders as
-   *  "−" (pass receipts negative). Omit to leave the header sumless. */
+  /** The group's sum, closing the rows BELOW it. Sign renders as "−" (pass receipts
+   *  negative). It must EQUAL the rows it closes — derive the rows and the sum from one
+   *  list, never from two predicates that can drift apart.
+   *
+   *  Omit it for a group that only NAMES its rows: a sum earns its place by adding
+   *  something the rows do not already say, which a one-row group's sum does not. */
   total?: number;
   children: ReactNode;
 }
 
-/** One side of the ledger — a labelled run of rows with its sum in the header. */
+/**
+ * One side of the ledger — a run of rows, closed by its sum.
+ *
+ * **The sum FOLLOWS its rows.** It sat in the header for a version, which is how a
+ * caption behaves, not how a subtotal does: every invoice, statement and receipt puts
+ * a subtotal after the lines it sums, and above them the reader either trusts a figure
+ * before seeing its parts or reads down and jumps back up to find it.
+ *
+ * It also sat at the LABEL's weight — xs muted — so the number summarising three rows
+ * came out smaller and greyer than the rows themselves. A subtotal is of the same
+ * magnitude class as its lines, so it takes their SIZE and one step of weight above
+ * them: `sm/medium` against rows at `sm/regular`, under a total at `md/semibold`. Three
+ * rungs, each one step, and the eye can rank them without reading a word.
+ *
+ * The LABEL travels with the sum rather than being repeated: a group that closes with
+ * "Invoiced  1.430.000 ₫" does not also need to announce "INVOICED" before its rows —
+ * that is the same word twice for one group. A group with no `total` therefore keeps the
+ * caption ABOVE its rows, because there is nothing for its label to travel with — and a
+ * group can legitimately have no sum: naming a category is one job, summing it is
+ * another, and a one-row group's sum only restates the row.
+ *
+ * **Do not mix the two inside one `Ledger`.** The label sits above an unsummed group and
+ * below a summed one, so a statement holding both moves its own group names around and
+ * reads as though the placement were an accident. Pick one shape per statement: if any
+ * group earns a sum, give every group one (grouping a single row is then the thing to
+ * avoid — let that row stand bare, or fold it into a neighbouring group).
+ *
+ * Naming a side at the BOTTOM means the reader meets its rows before its name, so the
+ * rows must say which side they are on by themselves — which they do when the sides
+ * carry opposite SIGNS (charges positive, receipts "−" and `tone="success"`). Two
+ * same-signed groups are not two sides of one statement; they are two statements, and
+ * they want two `Ledger`s under their own headings.
+ */
 export function LedgerGroup(props: LedgerGroupProps) {
   const { label, total, children } = props;
   const { format } = useLedger();
+  const closed = total != null;
   return (
     <View style={styles.group}>
-      <View style={styles.groupHead}>
-        <Text size="xs" weight="medium" color="muted" style={styles.grow}>
-          {label}
-        </Text>
-        {total != null ? (
-          <Text size="xs" color="muted" tabular>
+      {!closed ? (
+        <View style={styles.groupHead}>
+          <Text size="xs" weight="medium" color="muted" style={styles.grow}>
+            {label}
+          </Text>
+        </View>
+      ) : null}
+      {children}
+      {closed ? (
+        <View style={styles.row}>
+          <Text size="sm" weight="medium" style={styles.grow}>
+            {label}
+          </Text>
+          <Text size="sm" weight="medium" tabular>
             {signed(format, total)}
           </Text>
-        ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+export interface LedgerBasisProps {
+  /** What the figure IS ("Customs value (CIF)", "Gross revenue", "Principal"). */
+  label: string;
+  value: number;
+  /** How the figure was arrived at — the FX rate it was converted at, the period
+   *  it covers. Not a second label: it qualifies the number, it does not name it. */
+  meta?: string;
+}
+
+/**
+ * The figure the rows below are computed FROM — a statement's premise, not one of
+ * its lines.
+ *
+ * Some statements are not `charges → total`. Duty is `customs value → levies →
+ * payable`; commission is `gross → rates → owed`; interest is `principal → accrual
+ * → balance`. In all of them one number is the BASE and the rest are derived from
+ * it, and a ledger that can only say "row" has to lie about which is which.
+ *
+ * Rendering the base as a `LedgerRow` claims it is a peer of the levies — that you
+ * could add it to them. Putting it in a one-row `LedgerGroup` is worse: a group's
+ * sum earns its place only when it sums more than one visible row, so a single-row
+ * group states the same fact twice, at two weights, and the reader has to work out
+ * that the repetition means nothing.
+ *
+ * So it takes the THIRD treatment on the ledger's one money column — between a
+ * plain row and the total — and its `Divider` sits BELOW it, because a premise
+ * separates itself from what it feeds. (`LedgerTotal`'s rule sits above, closing
+ * what came before.) Order is the caller's: a basis first reads as "from this",
+ * which is the only order that makes the levies beneath it legible.
+ */
+export function LedgerBasis(props: LedgerBasisProps) {
+  const { label, value, meta } = props;
+  const { format } = useLedger();
+  return (
+    <View style={styles.basis}>
+      <View style={[styles.row, styles.baselineRow]}>
+        <View style={styles.grow}>
+          <Text size="sm" weight="medium">{label}</Text>
+          {meta != null ? <Text size="xs" color="muted">{meta}</Text> : null}
+        </View>
+        <Text size="sm" weight="medium" tabular>
+          {signed(format, value)}
+        </Text>
       </View>
-      {children}
+      <Divider />
     </View>
   );
 }
@@ -95,7 +192,18 @@ export function LedgerGroup(props: LedgerGroupProps) {
 export interface LedgerRowProps {
   /** The line's name — what was charged / received. */
   label: string;
-  /** Inline context after the label — a date, method, a basis, a period. */
+  /**
+   * Inline context after the label — a date, a method, a basis, a period. A neutral
+   * QUALIFIER on the figure, rendered as a caption (xs, muted) because it is
+   * subordinate to the thing it qualifies.
+   *
+   * Never a PROBLEM or a state ("awaiting approval", "missing method"). It reads
+   * inconsistent the moment one row's meta is a fact and another's is a complaint —
+   * two unlike things in one treatment — and a caption is the wrong weight for
+   * something that wants acting on. A problem belongs on the row that can FIX it (a
+   * `DetailRow`'s `warning` beside its editor), and in a statement the arithmetic has
+   * usually said it already: an unpaid line is what the outstanding total IS.
+   */
   meta?: string;
   /** The amount. Negative renders "− <abs>" (a receipt). */
   value: number;
@@ -174,7 +282,23 @@ export interface LedgerTotalProps {
   zeroLabel?: string;
 }
 
-/** The divider-set closing line — the ledger's ONE emphasized number. */
+/**
+ * The divider-set closing line — the ledger's ONE emphasized number.
+ *
+ * **Both sides take the same size.** The figure spent a version at `lg` against an
+ * `sm` label, which on web is 20px beside 14px (the scale steps `lg` up past 768px) —
+ * a 1.4× mismatch between two texts that are PEERS on one line, and a mismatch on one
+ * line reads as a slip however principled its reason. Raising the label to match is
+ * worse: `lg` puts it within a few px of the section heading above it and the record's
+ * conclusion starts competing with the record's structure.
+ *
+ * So the line is `md/semibold` throughout, and the emphasis comes from everything
+ * except size: it is the only line above a `Divider`, the only one at semibold, and
+ * the only one allowed a tone. Against rows at `sm/regular` and subtotals at
+ * `sm/medium` that is still a clear third rung — 2px and a weight step, plus a rule
+ * and a colour — and the ledger ends up using exactly two type sizes for its money
+ * and one for its captions.
+ */
 export function LedgerTotal(props: LedgerTotalProps) {
   const { label, value, tone = "default", zeroLabel } = props;
   const { format } = useLedger();
@@ -183,10 +307,10 @@ export function LedgerTotal(props: LedgerTotalProps) {
     <View style={styles.total}>
       <Divider />
       <View style={styles.row}>
-        <Text size="sm" weight="semibold" style={styles.grow}>
+        <Text size="md" weight="semibold" style={styles.grow}>
           {label}
         </Text>
-        <Text size="lg" weight="semibold" tabular color={settled ? "success" : tone === "default" ? undefined : tone}>
+        <Text size="md" weight="semibold" tabular color={settled ? "success" : tone === "default" ? undefined : tone}>
           {settled ? zeroLabel : signed(format, value)}
         </Text>
       </View>
@@ -199,13 +323,15 @@ const styles = StyleSheet.create({
   // the money column align with the section heading and the container edges;
   // the pressable door's wash bleeds into the gutter instead of squeezing text.
   // Grouping reads by PROXIMITY: the gap between groups must be decisively larger
-  // than the gap inside one, or the eyebrow floats midway and belongs to neither
-  // the group above nor the rows below. 18 between, 2 within.
+  // than the gap inside one, or a line floats midway and belongs to neither the
+  // group above nor the rows below. 16 between, 0 within — a row's own 28px
+  // minHeight already sets the beat inside a group, so adding a gap on top of it
+  // would loosen the group toward the between-group distance and undo the ranking.
   ledger: { gap: 16, marginHorizontal: -8 },
   group: { gap: 0 },
-  // EVERY line (group header, rows, the total) shares the 8px text inset, so
-  // labels and the money column sit on one edge whether a row peeks or not —
-  // the pressable door's wash simply fills the same padded box.
+  // EVERY line (rows, a group's caption or sum, the basis, the total) shares the 8px
+  // text inset, so labels and the money column sit on one edge whether a row peeks or
+  // not — the pressable door's wash simply fills the same padded box.
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -213,9 +339,8 @@ const styles = StyleSheet.create({
     minHeight: 28,
     paddingHorizontal: 8,
   },
-  // The group eyebrow is a CAPTION on the rows beneath it, not a line of its own —
-  // it takes only the height its xs text needs, so it hugs what it labels instead
-  // of sitting in a full 28px row box.
+  // An unsummed group's caption labels the rows beneath it, so it takes only the height
+  // its xs text needs — hugging what it labels instead of sitting in a full 28px row.
   groupHead: {
     flexDirection: "row",
     alignItems: "center",
@@ -230,4 +355,16 @@ const styles = StyleSheet.create({
   grow: { flexGrow: 1, flexShrink: 1 },
   shrink: { flexShrink: 1 },
   total: { gap: 6 },
+  // The BASIS row, the only one whose two sides can differ in height: its label may
+  // carry a stacked `meta` while the figure stays one line. Centring then measures the
+  // figure against the whole block and lands it in the gap between the label and its
+  // caption instead of level with the label it belongs to. On a shared baseline the
+  // figure sits on the label's FIRST line — the law `DetailRow` already follows for a
+  // wrapped label, and the alignment `KPICard`, `RemainderMeter`, `ProgressBar` and
+  // `Funnel` already use wherever a figure meets smaller text on one row. Every other
+  // line here is same-size on both sides, where centring and baseline agree.
+  baselineRow: { alignItems: "baseline" },
+  // Mirrors `total`'s gap so the premise and the conclusion frame the levies with
+  // the same air — the rule just sits on the other side.
+  basis: { gap: 6 },
 });

package/src/option_list.tsx

@@ -7,7 +7,6 @@ import { Checkbox } from "./checkbox";
 import { MenuButton } from "./menu_button";
 import { MenuListItem } from "./menu_list_item";
 import { Button } from "./button";
-import { TextButton } from "./text_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { TextInputField } from "./text_input_field";
 import { useScreenSize } from "./use_screen_size";
@@ -176,9 +175,9 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
 
       {list.showSelectAll || list.showDeselectAll ? (
         <View style={styles.selectAllContainer}>
-          {list.showSelectAll ? <TextButton onPress={list.selectAll}>{selectAllLabel}</TextButton> : null}
+          {list.showSelectAll ? <Button title={selectAllLabel} color="muted" onPress={list.selectAll} /> : null}
           {list.showDeselectAll ? (
-            <TextButton onPress={list.deselectAll}>{deselectAllLabel}</TextButton>
+            <Button title={deselectAllLabel} color="muted" onPress={list.deselectAll} />
           ) : null}
         </View>
       ) : null}
@@ -200,8 +199,12 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 16,
     paddingVertical: 4,
-    // Matches a MenuButton option's 8px text inset so the select-all / deselect-all
-    // links line up under the option labels above.
+    // Matches a MenuButton option's 8px inset, so the Button's SURFACE starts on the
+    // same edge as the option rows above it. Not its ink: a Button's ink sits 10px
+    // further in (measured 458 against option labels at 480, which begin after the
+    // checkbox), and no inset here makes text-to-text alignment possible in a list
+    // whose rows lead with a control. The surface is the edge a surfaced control
+    // aligns on.
     paddingHorizontal: 8,
     borderTopWidth: 1,
     borderTopColor: colors.border,

package/src/select.tsx

@@ -226,12 +226,27 @@ function SelectTrigger<T extends string>({
     <FocusRingPressable
       ref={ref}
       testID={testID}
-      // Without a role this Pressable renders as an unfocusable <div> on web — the
-      // trigger drops out of the tab order and Enter/Space can't open it. `button`
-      // makes it tab-focusable and maps keyboard activation to onPress; `aria-expanded`
-      // announces open/closed to assistive tech. The W3C props, NOT `accessibilityState` —
-      // this react-native-web build drops the latter silently.
-      accessibilityRole="button"
+      // `combobox`, NOT `button`, and the reason is structural rather than semantic.
+      // A role is what react-native-web picks the ELEMENT from, and `button` gave a real
+      // <button> — whose content model forbids interactive descendants. The sanctioned
+      // chip-box (`renderSelected` → `<Chip onDismiss>`, the reason there is no separate
+      // TagInput) puts a remove button inside the trigger, so the trigger rendered a
+      // <button> inside a <button>: invalid HTML, a React error on every mount, and a
+      // removal control of doubtful reachability. `combobox` renders a <div>, which may
+      // legally contain buttons, and it is the role the APG pattern this control already
+      // follows actually calls for (docs/accessibility.md: a popup opens on Enter/Space,
+      // never on Tab arrival). Verified on the chip demo: tab-focusable (tabindex 0),
+      // Enter opens, pointer opens, Escape closes, and the ✕ removes without opening.
+      //
+      // Without any role this Pressable would render an unfocusable <div> — out of the
+      // tab order, no keyboard activation. `aria-expanded` announces open/closed. The
+      // W3C props, NOT `accessibilityState` — this build drops the latter silently.
+      //
+      // When `searchable`, OptionList's filter input is ALSO a combobox (it owns
+      // aria-controls + aria-activedescendant, the editable half of the pattern). Two
+      // combobox-shaped controls across two focus events is redundant, not wrong — and
+      // strictly better than the invalid nesting it replaced.
+      accessibilityRole="combobox"
       accessibilityLabel={accessibilityLabel}
       aria-expanded={open}
       aria-disabled={disabled}

package/src/summary_line.tsx

@@ -32,6 +32,20 @@ export interface SummaryLineProps {
  * dashboard stat band: that's `KPIStrip` (a boxed metric grid for dashboard
  * pages, left untouched). Here there's no card, no big numbers, no column rules
  * — a small `Metric` value + a muted label, items wrapping, separated by space.
+ *
+ * **It summarizes a SET, and it goes with the set it summarizes.** Every item must be
+ * an aggregate over the rows in view — a count, a sum, a fill — so the strip earns its
+ * place by answering something no single row can. Nesting counts as a set: a record
+ * that gathers children (a consol of house shipments, an order of lines) may carry one
+ * above THAT list.
+ *
+ * **Never on a record's identity band, reporting that record's own state.** Derived
+ * verdicts about one record — "documents incomplete", "2 fields need checking", "no
+ * next milestone" — are a checklist, and a record does not carry a checklist
+ * (`docs/catalog.md`); work state belongs to `Pipeline`, a field's problem to a
+ * `Callout` on the field that can fix it. Such a strip also restates at a distance
+ * what the sections below state in place, so it goes stale against its own record and
+ * gives the reader two versions of one truth.
  */
 export function SummaryLine(props: SummaryLineProps) {
   const { items } = props;

package/src/text_link.tsx

@@ -20,11 +20,15 @@ export interface TextLinkProps extends TextProps {
  * "this opens somewhere else" signal.
  *
  * It does NOT act. An `onPress` here used to resolve to `role="button"`, so one
- * export was three components — a link, a button, and a passive marker — behind
- * one name, inside `OptionList`, `FilterChip` and others. That mode is
- * `TextButton` now — also underlined, since that is what marks a surface-less
- * control interactive, but in ZINC: blue is reserved for navigation, so the ink is
- * what says whether a press moves you or acts. Pick by what the press DOES.
+ * export was three components — a link, a button, and a passive marker — behind one
+ * name, inside `OptionList`, `FilterChip` and others.
+ *
+ * The act mode briefly became its own surface-less component and is now gone
+ * entirely: it made underline mean two things separable only by ink, and it competed
+ * with the `Button` colour ladder for the job `muted` already does. **Underlined text
+ * is the NAVIGATION affordance; anything that acts carries a control surface** —
+ * `Button` in chrome, `InlineButton` on a field. A quiet verb that cannot sit against
+ * a text column belongs in chrome, not in a rung of its own.
  */
 export function TextLink(props: TextLinkProps) {
   const { icon, href, children, color, style, ...textProps } = props;

package/src/text_button.tsx

@@ -1,139 +0,0 @@
-import { type ReactNode } from "react";
-import { StyleSheet } from "react-native";
-import { PressableHighlight } from "./pressable_highlight";
-import { Text } from "./text";
-
-/** Two only. Deliberately NOT the whole `TextColor` palette: `muted` would mute the
- *  one thing carrying the act's weight, and the rest (warning/success/inverted) name
- *  states, not verbs. Reach for `Button color="muted"` when an act must be quieter. */
-export type TextButtonColor = "default" | "danger";
-
-export interface TextButtonProps {
-  /** The verb, as words. */
-  children: ReactNode;
-  /** The act. REQUIRED — a text button with nothing to do is just `Text`. */
-  onPress: () => void;
-  /** `default` = neutral ink; `danger` = destructive. */
-  color?: TextButtonColor;
-  /**
-   * Nothing to act on. Pass it UNCONDITIONALLY and disable it rather than
-   * rendering the verb only once its target exists — an action that appears and
-   * disappears reflows the line it sits in, which is the one thing a control in
-   * a row of text must never do.
-   */
-  disabled?: boolean;
-  /** Announced name, when the words alone are ambiguous ("Open" → "Open customer"). */
-  accessibilityLabel?: string;
-  /** Truncate at this many lines (a label in a narrow row). */
-  numberOfLines?: number;
-  tooltip?: string;
-}
-
-/**
- * A low-chrome ACTION rendered at text weight — "Select all", "Clear",
- * "Add stop". The third member of the action family, by CHROME:
- * `Button` (a 40px control with a surface) → `InlineButton` (28px, filled, living
- * on a field's own surface) → this (no surface AT REST, sitting in a line of text).
- *
- * UNDERLINED, in NEUTRAL ink — what Airbnb ships for a text action, and the shape
- * that keeps this kit's own colour rule intact:
- *
- *   underline = INTERACTIVE      blue = NAVIGATION
- *   `Link`/`TextLink`  blue + underline  → navigates
- *   `TextButton`       zinc + underline  → acts
- *
- * The underline is the affordance and it is not optional. With no surface and no
- * tint, nothing else says at rest that the words can be pressed: POSITION is a
- * learned convention rather than an affordance (invisible to a first-time reader),
- * and hover is not one either — absent on touch, and revealed only once you are
- * already there. A tint is the other way to say it, the one Material and HIG take,
- * but blue is spoken for here and a second accent for "actionable" would collide
- * with the one-accent-per-purpose rule.
- *
- * This is also why it holds INSIDE a run of prose, where colour alone could not
- * distinguish an embedded control at all (WCAG 1.4.1 / F73).
- *
- * Built on `PressableHighlight` rather than a pressable `Text`, because a `Text`
- * with `onPress` gets NEITHER hover nor a focus ring: it renders a real
- * `<button>` with `tabIndex=0`, `outline: none` and no box-shadow, so a keyboard
- * user lands on it with no indication they have. A focusable control with no focus
- * treatment is a bug, and hand-rolling hover + focus onto `Text` would duplicate
- * machinery this already owns. The inherited hover wash is Material's state layer
- * by another name, and it costs nothing at rest, so the chrome ladder above holds.
- *
- * The padding/negative-margin bleed is `Peek`'s: the wash and the focus ring need
- * room off the glyphs, and the margins give it back so the line's layout never
- * shifts — `OptionList` depends on that, insetting 8px so its select-all verbs
- * line up under the option labels above.
- *
- * ONE SIZE (`Text`'s own `sm`) and no icon: it sits in a line of text and matches
- * it. A verb needing an icon or a real hit target is a `Button`.
- *
- * It is TEXT-height, not control-height, and that is deliberate: `marginVertical`
- * absorbs the touch box so the height IN FLOW stays 24 and dropping one into a
- * dense band (`OptionList`'s select-all, `FilterChip`'s Clear) cannot grow that
- * band. Do NOT match `Button`'s 40 to make a mixed row line up — that inflates
- * every inline use and collapses the chrome ladder above, turning this into a
- * Button without a fill. A row that mixes rungs aligns them the way such a row
- * should anyway: `alignItems: "center"`, which lands a centred 32px box's text on
- * the same line as a centred 40px one (measured: 0px apart in a peek footer).
- *
- * It sets NO `alignSelf`, so it obeys its parent — which is what a row wants, and
- * a baked `flex-start` top-aligned it against a taller sibling and silently
- * overrode a footer's `alignItems: center`. In a COLUMN container a `Pressable`
- * stretches, so the hover wash would run the full width for a two-word verb: wrap
- * it in a `flexDirection: "row"` View there, the same thing a `Button` needs.
- */
-export function TextButton(props: TextButtonProps) {
-  const { children, onPress, color = "default", disabled, accessibilityLabel, numberOfLines, tooltip } = props;
-  // `TextColor` tokens throughout, no raw palette access: neutral ink IS `default`,
-  // and `zinc-400` is `Button`'s own disabled ink — an inert control should read the
-  // same whatever its chrome, where muting to zinc-600 left it looking merely quiet.
-  const ink = disabled === true ? "zinc-400" : color === "danger" ? "danger" : "default";
-  return (
-    <PressableHighlight
-      focusRing
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel}
-      aria-disabled={disabled === true ? true : undefined}
-      disabled={disabled}
-      tooltip={tooltip}
-      // 32px box + 4px slop = the 40px target `Peek` keeps for the same shape. A
-      // text action measured 24px on its own, which clears WCAG 2.5.8's 24×24
-      // floor and nothing else — and it sits in dense rows, exactly where a thumb
-      // needs the margin most.
-      hitSlop={4}
-      onPress={onPress}
-      // After the inherited wash, so a disabled verb does not light up under the
-      // pointer — `hovered` still fires on a disabled Pressable.
-      style={[styles.trigger, disabled === true ? styles.dead : null]}
-    >
-      <Text decoration="underline" weight="medium" color={ink} numberOfLines={numberOfLines}>
-        {children}
-      </Text>
-    </PressableHighlight>
-  );
-}
-
-const styles = StyleSheet.create({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    // NO `alignSelf` here — see the prop. A baked `flex-start` is a CROSS-axis
-    // instruction, so it means "hug the words" only in a column; in a row it means
-    // top-align, and it silently overrode a footer's `alignItems: center`.
-    borderRadius: 6,
-    // Room for the wash + focus ring, given straight back as margin so adding a
-    // TextButton to a line cannot move anything around it (`Peek`'s idiom). The
-    // 32px box carries the touch target; `marginVertical` absorbs 8 of it, so the
-    // height IN FLOW stays 24 and a row's rhythm is unchanged.
-    minHeight: 32,
-    marginVertical: -4,
-    // 6 rather than `Peek`'s 8: these come in GROUPS (OptionList's select-all /
-    // deselect-all sit 16 apart), and an 8px bleed each side would leave adjacent
-    // washes touching.
-    paddingHorizontal: 6,
-    marginHorizontal: -6,
-  },
-  dead: { backgroundColor: "transparent" },
-});