@lotics/ui 23.2.0 → 24.0.2

package/examples/tpl_task_board.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View, type ViewStyle } from "react-native";
 import { Text } from "@lotics/ui/text";
-import { TextLink } from "@lotics/ui/text_link";
+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 +527,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}>
-      <TextLink size="sm" numberOfLines={1} onPress={onPress}>{a.label}</TextLink>
+      <TextButton numberOfLines={1} onPress={onPress}>{a.label}</TextButton>
     </View>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "23.2.0",
+  "version": "24.0.2",
   "type": "module",
   "exports": {
     "./vite": {
@@ -9,6 +9,7 @@
     },
     "./tokens": "./src/tokens.ts",
     "./colors": "./src/colors.ts",
+    "./deadline": "./src/deadline.ts",
     "./option_badge": "./src/option_badge.tsx",
     "./member_chip": "./src/member_chip.tsx",
     "./member_select": "./src/member_select.tsx",
@@ -176,6 +177,8 @@
     "./slider_math": "./src/slider_math.ts",
     "./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",
@@ -266,7 +269,7 @@
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@lotics/docx": "^0.2.0",
+    "@lotics/docx": "^0.3.0",
     "@lotics/xlsx": "^0.1.0",
     "ai": "^7.0.30",
     "mdast-util-from-markdown": "^2.0.3",

package/src/deadline.ts

@@ -0,0 +1,157 @@
+import { type ColorName } from "./colors";
+
+/**
+ * DEADLINES — the countdown vocabulary: how many days are left, what to CALL
+ * that number, and how loud it should read.
+ *
+ * It lives in the kit because all three are contracts, not layout. A screen
+ * that invents its own thresholds says "urgent" at a different distance than
+ * the screen beside it; one that invents its own wording says "2 days late" in
+ * four different phrasings; and one that renders the countdown as a trailing
+ * badge detaches it from the date it is about. Every departmental register
+ * ordered by "what is due next" needs the same three answers.
+ *
+ * RN-free on purpose: the rules are unit-testable, and a component renders
+ * their result rather than owning them.
+ */
+
+/** What a deadline's proximity means. Directly usable as a `Text` `color` —
+ *  text collapses to these tokens rather than wearing a hue (see `deadlineColor`
+ *  for the badge/dot side, which keeps hue nuance). */
+export type DeadlineTone = "danger" | "warning" | "muted";
+
+/** Where "act now" and "act soon" start, in whole days.
+ *
+ *  The defaults (1 / 3) come from freight, where a missed cut-off costs a
+ *  sailing and demurrage accrues inside three days. A domain whose consequences
+ *  arrive slower moves them out; the point is that ONE screen never disagrees
+ *  with the next about where the line sits. */
+export interface DeadlineThresholds {
+  /** ≤ this many days out reads `danger`. Default 1 (today and tomorrow). */
+  dangerWithinDays?: number;
+  /** ≤ this many days out reads `warning`. Default 3. */
+  warningWithinDays?: number;
+}
+
+/** The four things a countdown can say. Resolved from `LoticsLocale.deadline`
+ *  (English defaults, Vietnamese pack shipped) or passed per instance. */
+export interface DeadlineLabels {
+  /** Past due, given the count as a POSITIVE number of days. */
+  overdue: (days: number) => string;
+  /** Due today — the count is 0, and "0 days left" is not what a reader wants. */
+  today: string;
+  /** Due tomorrow. Named for the same reason as `today`. */
+  tomorrow: string;
+  /** Any distance further out, in whole days. */
+  inDays: (days: number) => string;
+}
+
+/** A milestone resolved against a clock: what it is, when, how far off. */
+export interface Deadline {
+  label: string;
+  date: Date;
+  /** Calendar days from now — NEGATIVE when the date has passed. */
+  days: number;
+}
+
+const MS_DAY = 86_400_000;
+const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+
+/**
+ * Whole CALENDAR days until `due`, negative once it has passed.
+ *
+ * Both ends collapse to midnight first, because the vocabulary this feeds is
+ * DAY-granular and so the arithmetic has to be. Diffing the raw instants and
+ * rounding lands on the wrong day whenever `now` and the deadline sit on
+ * opposite sides of noon — and carriers really do set cut-offs at 02:00:
+ *
+ *   now 14:30, cut-off 02:00 TOMORROW  → 1 "Tomorrow".  Raw: 0, "Today".
+ *   now 14:30, cut-off 02:00 TODAY     → 0 "Today".     Raw: -1, "1 day overdue"
+ *                                                       for something 12h old.
+ *   now 00:30, cut-off 23:00 TONIGHT   → 0 "Today".     Raw: 1, "Tomorrow".
+ *
+ * Each wrong answer makes the countdown contradict the date printed beside it.
+ */
+export function daysUntil(due: Date, now: Date): number {
+  return Math.round((startOfDay(due).getTime() - startOfDay(now).getTime()) / MS_DAY);
+}
+
+/** How loud a day-count reads. Overdue folds into `danger` — a missed deadline
+ *  and one due today both mean ACT NOW, and the LABEL is what distinguishes
+ *  them ("2 days overdue" vs "Today"), so the tone does not have to. */
+export function deadlineTone(days: number, thresholds?: DeadlineThresholds): DeadlineTone {
+  const { dangerWithinDays = 1, warningWithinDays = 3 } = thresholds ?? {};
+  if (days <= dangerWithinDays) return "danger";
+  if (days <= warningWithinDays) return "warning";
+  return "muted";
+}
+
+/** The same decision as a `ColorName`, for a `Badge` / `Badge variant="dot"`
+ *  where hue nuance survives. `muted` becomes `zinc`: a deadline comfortably
+ *  out is a standing fact, and coloring it spends the page's attention budget
+ *  on the one row that needs none. */
+export function deadlineColor(days: number, thresholds?: DeadlineThresholds): ColorName {
+  const tone = deadlineTone(days, thresholds);
+  return tone === "danger" ? "red" : tone === "warning" ? "amber" : "zinc";
+}
+
+/** A day-count as words: "2 days overdue" / "Today" / "Tomorrow" / "5 days left".
+ *
+ *  0 and 1 get their own words because a countdown that renders them
+ *  arithmetically ("0 days left") reads as broken at exactly the moment it
+ *  matters most. */
+export function countdownLabel(days: number, labels: DeadlineLabels): string {
+  if (days < 0) return labels.overdue(-days);
+  if (days === 0) return labels.today;
+  if (days === 1) return labels.tomorrow;
+  return labels.inDays(days);
+}
+
+/**
+ * The countdown as a FIELD ANNOTATION rather than a trailing badge — spread it
+ * onto the `DetailRow` holding the date.
+ *
+ * A deadline is a property OF the date it sits on, so it annotates that field
+ * the way every other field annotation does, and the three annotation slots
+ * carry the three urgency levels exactly: past due or due today is the field
+ * being WRONG (`error`), the warning window is "accepted, and something
+ * downstream is worse for it" (`warning`), and anything further out is the
+ * standing fact (`description`). A badge at the end of the row would say the
+ * same thing in a vocabulary the rest of the field grid does not speak.
+ *
+ *     <DetailRow label="SI cut-off" {...deadlineAnnotation(days, words.deadline)}>
+ */
+export function deadlineAnnotation(
+  days: number,
+  labels: DeadlineLabels,
+  thresholds?: DeadlineThresholds,
+): { description?: string; warning?: string; error?: string } {
+  const text = countdownLabel(days, labels);
+  const tone = deadlineTone(days, thresholds);
+  return tone === "danger" ? { error: text } : tone === "warning" ? { warning: text } : { description: text };
+}
+
+/**
+ * The nearest of several milestones — the one a desk is actually working to.
+ *
+ * Undated candidates drop out; the rest sort by date, so an OVERDUE milestone
+ * comes back FIRST. That is deliberate: a cut-off you missed yesterday is the
+ * most urgent thing on the record, and a "next deadline" that skips past it to
+ * the following one silently stops reporting the failure.
+ *
+ * Which means the CALLER passes only the milestones still OPEN. Done-ness is
+ * not knowable from a date — a met cut-off and a missed one are both in the
+ * past — and a milestone left in after it was satisfied would dominate this
+ * answer forever.
+ */
+export function nearestDeadline(
+  candidates: ReadonlyArray<{ label: string; date: Date | null | undefined }>,
+  now: Date,
+): Deadline | null {
+  // `flatMap` hands back a FRESH array, so sorting it in place cannot reach the
+  // caller's — the copy a defensive `[...dated]` would add is dead weight.
+  const dated = candidates.flatMap((c) =>
+    c.date ? [{ label: c.label, date: c.date, days: daysUntil(c.date, now) }] : [],
+  );
+  return dated.sort((a, b) => a.date.getTime() - b.date.getTime())[0] ?? null;
+}

package/src/filter_chip.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
-import { TextLink } from "./text_link";
+import { TextButton } from "./text_button";
 import { Chip } from "./chip";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import type { PopoverSide, PopoverAlign } from "./popover";
@@ -110,7 +110,7 @@ export function FilterChip(props: FilterChipProps) {
           <PopoverFooter>{footer}</PopoverFooter>
         ) : showClear ? (
           <PopoverFooter align="start">
-            <TextLink onPress={onClear}>{clearLabel}</TextLink>
+            <TextButton onPress={onClear}>{clearLabel}</TextButton>
           </PopoverFooter>
         ) : null}
       </PopoverContent>

package/src/locale.tsx

@@ -8,6 +8,7 @@ import { type RemainderMeterLabels } from "./remainder_meter";
 import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
 import { type GalleryLabels } from "./file_preview_types";
 import { type FindingLabels } from "./finding";
+import { type DeadlineLabels } from "./deadline";
 
 /**
  * The kit's localizable strings, one slice per string-bearing component. A
@@ -36,6 +37,11 @@ export interface LoticsLocale {
   pagination: Required<PaginationLabels>;
   /** `SortHeader` a11y prefix + asc/desc suffixes. */
   sortHeader: Required<SortHeaderLabels>;
+  /** `ReferenceField`'s peek footer — the go-to and detach verbs. `openLabel`
+   *  stays a per-instance PROP because it names the DESTINATION ("Open
+   *  customer"), which is a11y text only a caller knows; these two are the
+   *  VISIBLE chrome, which the pack owns. */
+  referenceField: { open: string; remove: string };
   /** `OptionList` (and everything built on it — `Select`, `Combobox`, the
    *  in-cell editors): the select-all/deselect-all links, the empty state, the
    *  internal search-field placeholder, and the `Combobox` recents header. */
@@ -69,6 +75,9 @@ export interface LoticsLocale {
   sequence: { moveUp: string; moveDown: string; remove: string };
   /** `TrendFooter`: the direction words of the trend sentence. */
   trendFooter: { up: string; down: string };
+  /** The countdown vocabulary — see `deadline.ts`. 0 and 1 get their own words
+   *  because "0 days left" reads as broken exactly when it matters most. */
+  deadline: DeadlineLabels;
   /** `SuggestionChip`: the press target's default name and the ✕ tooltip. */
   suggestionChip: { add: (label: string) => string; dismiss: string };
   /** `Confidence`: the full level phrase ("High confidence" …). */
@@ -211,6 +220,7 @@ export const en: LoticsLocale = {
     ascending: ", ascending",
     descending: ", descending",
   },
+  referenceField: { open: "Open", remove: "Remove" },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
   datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
@@ -226,6 +236,12 @@ export const en: LoticsLocale = {
   chip: { remove: "Remove" },
   sequence: { moveUp: "Move up", moveDown: "Move down", remove: "Remove" },
   trendFooter: { up: "Up", down: "Down" },
+  deadline: {
+    overdue: (days) => `${days} ${days === 1 ? "day" : "days"} overdue`,
+    today: "Today",
+    tomorrow: "Tomorrow",
+    inDays: (days) => `${days} days left`,
+  },
   suggestionChip: { add: (label) => `Add: ${label}`, dismiss: "Dismiss suggestion" },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
@@ -363,6 +379,7 @@ export const vi: LoticsLocale = {
     ascending: " (tăng dần)",
     descending: " (giảm dần)",
   },
+  referenceField: { open: "Mở", remove: "Gỡ" },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
   datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
@@ -378,6 +395,12 @@ export const vi: LoticsLocale = {
   chip: { remove: "Xóa" },
   sequence: { moveUp: "Lên trên", moveDown: "Xuống dưới", remove: "Xóa" },
   trendFooter: { up: "Tăng", down: "Giảm" },
+  deadline: {
+    overdue: (days) => `Quá hạn ${days} ngày`,
+    today: "Hôm nay",
+    tomorrow: "Ngày mai",
+    inDays: (days) => `Còn ${days} ngày`,
+  },
   suggestionChip: { add: (label) => `Thêm: ${label}`, dismiss: "Bỏ gợi ý" },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {

package/src/option_list.tsx

@@ -7,7 +7,7 @@ import { Checkbox } from "./checkbox";
 import { MenuButton } from "./menu_button";
 import { MenuListItem } from "./menu_list_item";
 import { Button } from "./button";
-import { TextLink } from "./text_link";
+import { TextButton } from "./text_button";
 import { ActivityIndicator } from "./activity_indicator";
 import { TextInputField } from "./text_input_field";
 import { useScreenSize } from "./use_screen_size";
@@ -176,9 +176,9 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
 
       {list.showSelectAll || list.showDeselectAll ? (
         <View style={styles.selectAllContainer}>
-          {list.showSelectAll ? <TextLink onPress={list.selectAll}>{selectAllLabel}</TextLink> : null}
+          {list.showSelectAll ? <TextButton onPress={list.selectAll}>{selectAllLabel}</TextButton> : null}
           {list.showDeselectAll ? (
-            <TextLink onPress={list.deselectAll}>{deselectAllLabel}</TextLink>
+            <TextButton onPress={list.deselectAll}>{deselectAllLabel}</TextButton>
           ) : null}
         </View>
       ) : null}

package/src/reference_field.tsx

@@ -0,0 +1,178 @@
+import { useRef, useState } from "react";
+import { View } from "react-native";
+import { Button } from "./button";
+import { DetailRow, DetailTable } from "./detail_row";
+import { Divider } from "./divider";
+import { InlineEditView } from "./inline_edit";
+import { Popover, PopoverContent } from "./popover";
+import { DialogSectionHeadingTitle } from "./section_heading";
+import { Text } from "./text";
+import { TextButton } from "./text_button";
+import { TextLink } from "./text_link";
+import { useLoticsLocale } from "./locale";
+
+/**
+ * A REFERENCE to another record, rendered as a FIELD VALUE.
+ *
+ * It wears the inline editor's resting surface — same 40px band, same zinc-50
+ * chip, same radius — so a pointer at another record sits in the value column
+ * exactly like the editors above and below it, rather than announcing itself as
+ * a different species of thing. (The chip's usual promise is "editable"; here it
+ * reads as "pressable", which is what `InlineSelect` and `InlineDatePicker`
+ * already mean by it — they open a popover too.)
+ *
+ * ONE act on the surface, the rest one layer in:
+ *   press the value  → the facts, in a popover (free, so it's the whole surface)
+ *   Open, in the peek → the referenced record's own page
+ *   Remove, in the peek → detach (destructive and rare)
+ *
+ * Open used to sit ON the field as an `InlineButton`, justified as "the common
+ * act". It was neither common nor an act about the value. `actions` is for verbs
+ * ABOUT the value, so they travel with what they act on — Call this number, Copy
+ * this reference, set this date to Today; "Open" is DEPARTURE to another record,
+ * and on a record page leaving is the rare move, not the frequent one. It also
+ * put two different destinations behind one word: press the box → a summary,
+ * press "Open" 8px away → navigate. And the kit had already ruled — `LedgerRow`
+ * IGNORES `reference` while `peek` is set, because a reference belongs inside
+ * the peek. Dropping it hands the field its plain anatomy back: the press target
+ * is the whole box again and the focus ring rings the field, not a narrower
+ * region inside it.
+ *
+ * Remove earns its depth twice over. It is the answer to the question the PEEK
+ * asks — "is this the right one?" — so the check and the correction are the same
+ * gesture; and a detach link repeated down a column of references is noise in the
+ * scan path for an act most readers never perform. Depth is not a hiding place
+ * here: pressing a field-shaped value is the first thing anyone tries, and the
+ * verb is plainly visible once open.
+ *
+ * What it encodes is the PEEK CONTRACT — the marker, the popover's grammar, and
+ * where each verb sits — not a layout convenience. It was a template composition
+ * until a second surface needed it (a register's workspace drawer lists the same
+ * references), which is the bar for lifting one here.
+ */
+export interface ReferenceFieldProps {
+  name: string;
+  code?: string;
+  facts: { label: string; value: string }[];
+  /** Announced name of the peek trigger, e.g. "Harbor Freight Lines — details". */
+  accessibilityLabel: string;
+  onOpen: () => void;
+  openLabel: string;
+  /** Detach — omit where the link cannot be broken (a handoff's sibling record). */
+  onRemove?: () => void;
+}
+
+export function ReferenceField(props: ReferenceFieldProps) {
+  const { name, code, facts, accessibilityLabel, onOpen, openLabel, onRemove } = props;
+  // The peek's two verbs are the component's OWN chrome, so they come from the
+  // pack — hardcoding them shipped "Open"/"Remove" into every localized app.
+  const t = useLoticsLocale().referenceField;
+  const anchor = useRef<View>(null);
+  const [peekOpen, setPeekOpen] = useState(false);
+  return (
+    <Popover open={peekOpen} onOpenChange={setPeekOpen} triggerRef={anchor} side="bottom" align="start">
+      {/* THE KIT'S FIELD, not a lookalike. This was hand-rolled — a Pressable
+          wearing copies of the field's border, radius, height and hover — and it
+          promptly fell out of step the moment the kit's field changed: it kept a
+          pointer cursor no editor has, and missed the hover TINT that every other
+          field gained. A copied surface always drifts; the fix is to stop copying.
+
+          `InlineEditView` gives all of it: the surface and its states, hover, and
+          focus-within. `anchorRef` hands the popover the FIELD's box, which is
+          what the peek must line up with; it happens to equal `ref` now that the
+          field carries no verbs, and stays correct if one is ever added.
+
+          OPEN, never toggle: the press target and the popover's own dismissal
+          would otherwise fight, and idempotent `true` makes the pair safe. The
+          popover closes on outside press / Escape. */}
+      <InlineEditView
+        anchorRef={anchor}
+        accessibilityLabel={accessibilityLabel}
+        onPress={() => setPeekOpen(true)}
+        active={peekOpen}
+        /* THE MARKER — what says this value is a RECORD and not typed text.
+           `TextLink` with neither `href` nor `onPress` is exactly that: the kit's
+           underline, non-interactive, so it drops inside the field's own press
+           target without a button landing inside a button. NOT a `Badge` (that
+           is STATUS only, and a reference is not a state) and NOT `Link`'s fixed
+           blue + role="link", which would promise navigation this press does not
+           perform — it opens a summary. The underline says "there is more here";
+           where to go is the peek's business. */
+        display={
+          <View style={{ flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: 6 }}>
+            <TextLink size="sm" numberOfLines={1}>{name}</TextLink>
+            {code ? <Text size="sm" color="muted" numberOfLines={1}>{code}</Text> : null}
+          </View>
+        }
+      />
+      {/* THE PEEK'S FORMAT — the kit's own grammar, not a bespoke one. A popover
+          is dialog-scale, so the identity takes the ramp's dialog rung
+          (`DialogSectionHeadingTitle`, ####) with the code as its description
+          rather than a hand-picked font weight; the facts are `DetailRow`s, which
+          is what label-beside-value IS everywhere else on this page; and the
+          destructive verb is fenced off by a `Divider` instead of floating after
+          the last fact. Width matches `Peek`'s own content width so every peek in
+          an app is the same object.
+          `labelWidth` is the one override, and it is not arbitrary: a `DetailTable`
+          STACKS its columns below `labelWidth + MIN_CONTROL_WIDTH + 24`, so the
+          page's 150 would flip a 320 popover into stacked form grammar. 88 keeps
+          the summary side-by-side, which is the whole point of a glance. */}
+      <PopoverContent style={{ width: 320 }} disableBodyScroll>
+        <View style={{ gap: 12 }}>
+          <DialogSectionHeadingTitle description={code}>{name}</DialogSectionHeadingTitle>
+          {/* PLAIN `Text`, not `InlineStatic` — and `minHeight` 28, `DetailRow`'s
+              own default, instead of the `DetailTable`'s 40.
+
+              Both come from one fact: this grid has NO editors. `InlineStatic`
+              exists to align pixel-for-pixel with the `Inline*` controls — it
+              hard-sets `INLINE_CONTROL_HEIGHT` so a computed total sits flush
+              beside editable rows in a record. Here there is nothing to sit flush
+              WITH, so it only reserved a 40px control band for a 20px value:
+              three facts, 60px of air, in a popover whose whole job is a glance.
+              `minHeight` alone does not fix it (the value's own box still forces
+              40) and `Text` alone does not either (the table's band re-imposes
+              it) — the row is the max of the two, so both have to go. */}
+          <DetailTable labelWidth={88} minHeight={28}>
+            {facts.map((f) => (
+              <DetailRow key={f.label} label={f.label} flat>
+                <Text size="sm">{f.value || "—"}</Text>
+              </DetailRow>
+            ))}
+          </DetailTable>
+          {/* THE FOOTER — destructive LEFT, go-to RIGHT, the kit's convention.
+              Open repeats the verb on the surface deliberately: the popover now
+              covers the button that opened it, and having read the facts, "take me
+              there" is the next move. That is the shape `Peek` prescribes — a
+              summary with one action to the full record. Remove closes the peek
+              first, because the surface it is anchored to is about to stop
+              existing. */}
+          <Divider />
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            {onRemove ? (
+              // `TextButton color="danger"` — this act wanted the component, not a
+              // Button wearing three corrections. It went `danger` (solid, too
+              // loud for the rarest verb here) → `danger-secondary` (a ghost, so
+              // its ink sat a padding's width inside the column every fact label
+              // starts on) → `+ flush` (that geometry, patched). A text-weight
+              // destructive act aligned to a column of text IS this component: red
+              // ink, no fill, its own bleed, and a hover wash and focus ring a bare
+              // pressable Text never had.
+              //
+              // Pairing a text action with the filled `secondary` "Open" is the
+              // standard footer shape, not a mismatch — Material and HIG both put
+              // the quiet/destructive verb at text weight beside a filled primary.
+              // No icon: an ✕ beside "Remove" says it twice, and the glyph alone
+              // made this read as the popover's dismiss rather than a decision.
+              <TextButton color="danger" onPress={() => { setPeekOpen(false); onRemove(); }}>{t.remove}</TextButton>
+            ) : null}
+            <View style={{ flex: 1 }} />
+            {/* `openLabel` names the DESTINATION ("Open customer"): a page carries
+                four of these peeks, and four buttons announcing a bare "Open"
+                are four controls a screen reader cannot tell apart. */}
+            <Button title={t.open} color="secondary" accessibilityLabel={openLabel} onPress={() => { setPeekOpen(false); onOpen(); }} />
+          </View>
+        </View>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/table.tsx

@@ -339,9 +339,18 @@ const styles = StyleSheet.create({
   // The expanded detail. Indented to the identity column's text edge so it reads
   // as belonging to the row above rather than as a new row, and given the row's
   // own gutter so its content lines up with the cells it explains.
+  //
+  // Vertical padding is measured from the row's WASH, not its text: an expanded
+  // row wears the `selected` highlight, so the band's edge is the hard line the
+  // eye reads. With no top padding the detail's first control sat 3px off that
+  // edge while the bottom had a designed 16 — visibly cramped for an editor
+  // detail. Matching 16 both ends frames the detail evenly inside the band, and
+  // equals a `DetailTable`'s own row gap so a field grid keeps one rhythm from
+  // the row above it to the hairline below.
   detail: {
     paddingLeft: ROW_GUTTER,
     paddingRight: ROW_GUTTER,
+    paddingTop: 16,
     paddingBottom: 16,
   },
   // A hairline under the column header anchors the columns; the rows below it are

package/src/text_button.tsx

@@ -0,0 +1,139 @@
+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" },
+});