@lotics/ui 18.0.0 → 18.1.0

package/docs/catalog.md

@@ -171,7 +171,7 @@ component — children are the body), `Subsection` (+ `SubsectionHeading`/
 `SubsectionHeadingTitle` — the named group INSIDE a section, `###` lg-semibold title),
 `SectionStack` (the flat page's content column — owns the fixed 56px beat + hairline between
 top-level blocks), `SubsectionStack` (a section's `Subsection` groups — fixed 32px beat,
-SPACE-ONLY: titles carry the grouping, hairlines stay at the section level), `SectionCard`, `PageHeader` /
+space-only while the groups are SHORT, `divided` once they run long), `SectionCard`, `PageHeader` /
 `PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`,
 `Stepper`, `DangerZone` (the destructive section — delete/archive — set apart at the bottom
 of a record/settings surface).
@@ -388,9 +388,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `@lotics/ui/section` only when you specifically want this collapsible titled block.
 - **`section_stack`** — `SectionStack` · `SubsectionStack` — stacks that own the
   between-block law, skipping null children: `SectionStack` = a fixed 56px beat + a hairline
-  `Divider` between top-level blocks; `SubsectionStack` = a fixed 32px beat, space-only (no
-  hairline — titles carry the grouping, `divided` an opt-in for a rare headingless stack);
-  stop hand-rolling gap + `<Divider />` pairs.
+  `Divider` between top-level blocks; `SubsectionStack` = a fixed 32px beat, space-only while
+  the groups are SHORT (the titles carry the grouping, hairlines stay at the section level) and
+  `divided` once they run LONG — past a screenful, 32px reads as one more row gap and the next
+  title arrives unmarked. Length decides, not headings. Stop hand-rolling gap + `<Divider />` pairs.
 - **`section_card`** — `SectionCard`: a titled card with a one-line description and an
   optional hairline-set `footer` (where `TrendFooter` and source notes go).
 - **`stack`** — `Stack`: gap-spaced row/column; `useSeparator` inserts `Separator`s between
@@ -454,8 +455,13 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`action_menu`** — `ActionMenu`: the ⋯ overflow menu (`ActionMenuItem[]`; danger items
   last).
 - **`menu_button`** — `MenuButton`: the menu/rail row (icon · title · `right` slot;
-  `selected`/`focused`/`danger`; `role` menuitem|button|option) — popover menus, outline
-  rails, section pickers.
+  `focused`/`danger`; `role` menuitem|button|option) — popover menus, outline rails, section
+  pickers. Its resting highlight has TWO meanings and they are not interchangeable:
+  **`selected`** is listbox SELECTION (emitted as `aria-selected`, and only under
+  `role="option"` — the attribute is invalid anywhere else), **`current`** is the current
+  item of a NAVIGATION set (`aria-current`, global, so any role) — `true`, or the token
+  naming the set (`"page"` for a routed pane, `"step"`, `"location"`). An outline rail and a
+  section picker take `current`; a picker option takes `selected`.
 - **`menu_list_item`** — `MenuListItem`: the richer listbox/menu row (title + description +
   `right`; `selected` vs roving `focused` via `aria-activedescendant`). No fixed height — it
   GROWS with its content, and `title` takes a node, so it is what `OptionList`/`Combobox` render
@@ -474,11 +480,18 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   matches the surface it spans. `TableRow` / `LinkedRecordBox` are the in-kit consumers —
   reach for it when designing a row those don't cover.
 - **`linked_record_box`** — `LinkedRecordBox`: a bordered box scoping ANOTHER record's data
-  (`icon` · `name` · `subtitle` · vertical `facts`), the WHOLE box a keyboard door into its
-  detail (`onOpen`/`doorLabel`); verbs ride an `actions` slot in a hairline-fenced footer at the
-  bottom (destructive LEFT, go-to RIGHT — the divider draws itself when `actions` is present, so
-  don't hand-add one). Use it wherever a record points at another (a shipment's customer, an invoice's
-  party, a case's sibling). It **enforces the a11y contract** copy-pasting got wrong: a
+  (`icon` · `name` · `subtitle` · vertical `facts`); verbs ride an `actions` slot in a
+  hairline-fenced footer at the bottom (destructive LEFT, go-to RIGHT — the divider draws itself
+  when `actions` is present, so don't hand-add one). Use it wherever a record points at another (a
+  shipment's customer, an invoice's party, a case's sibling). **`onOpen` picks the variant, and
+  they are exclusive at the type level**: WITH it (+ the required `doorLabel`) the whole box is a
+  keyboard door into the record's detail and `facts` values are TEXT (`""` → "—"); WITHOUT it the
+  box is a STATIC card — no door, no tab stop, no pointer, nothing announced as a button — and a
+  `facts` value may be a NODE (an inline editor; a node prints as authored, no "—"). Reach for the
+  static one when the linked record has NO page of its own: nothing to open, so the box is where
+  its values are read and edited, and the only interactive parts are `actions` + the fact nodes.
+  Under a door, `actions` is the ONLY place a control may live (a fact editor there would compete
+  with the press). The door variant **enforces the a11y contract** copy-pasting got wrong: a
   container with interactive descendants is never `role="button"` (invalid HTML) — an internal
   empty door sibling carries the tab stop / name / focus ring, verbs lift above via `zIndex`.
   The reassign picker / empty state that swaps in for the box is the consumer's.
@@ -495,7 +508,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`count`** — `Count`: a small circular count bubble (`color` highlight|muted|red).
 - **`shortcut_badge`** — `ShortcutBadge`: the keycap hint pill — a zinc-50 badge rendering a
   shortcut from a raw string or `ShortcutDescriptor` (⌘B on Mac, Ctrl+B elsewhere); null on
-  small screens. `TextInputField shortcut` renders it built-in.
+  small screens. `TextInputField shortcut` renders it built-in, while the field is EMPTY —
+  it hints at reaching the field, so a value replaces it (with the clear ✕, when `clearable`).
 - **`keyboard`** — `isMac` · `ShortcutDescriptor` · `formatShortcut` (platform-aware
   shortcut formatting behind `ShortcutBadge`).
 
@@ -555,7 +569,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`text_input_field`** — `TextInputField`: the standard text input (multiline grows via
   the auto-grow engine; `shortcut` renders a `ShortcutBadge`). Its surface is WHITE on any
   background — on a tinted panel the input still reads as an open well, never blending into
-  the tint; override via `style` only when a surface genuinely wants otherwise.
+  the tint; override via `style` only when a surface genuinely wants otherwise. It RESERVES
+  its own right gutter whenever a trailing affordance is up (the `clearable` ✕, the `shortcut`
+  badge), so a long value is held off it — never hand-roll a `paddingRight` to compensate. A
+  field with an empty slot reserves nothing, so its text starts and ends where it always did.
 - **`number_input`** — `NumberInput`: numeric input; `format` for currency/units.
 - **`search_input`** — `SearchInput`: the search box for toolbars/filters.
 - **`form_field`** — `FormField` + `useFormField`: label / description / warning / error /
@@ -857,8 +874,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   is open. Lives in the primitives — never call it from a screen.
 - **`use_section_nav`** — `useSectionNav`: scroll-spy for a LONG record surface with a left
   outline rail — keys in page order → `{scrollRef, onScroll, register(key)→onLayout,
-  jumpTo(key), activeKey}`; rail items are `MenuButton`s (`selected={activeKey===key}`);
-  section wrappers must be DIRECT children of the ScrollView content. On NARROW containers
+  jumpTo(key), activeKey}`; rail items are `MenuButton`s (`current={activeKey===key}` — a
+  rail item is navigation, never a selected option);
+  section wrappers must be DIRECT children of the ScrollView content. The highlight and the
+  jump both re-measure the live DOM on web, so content loading in above a section never
+  strands them. On NARROW containers
   the rail becomes a PINNED bar naming the CURRENT section that opens a full-page
   section-picker `Modal` — never a horizontal tab strip. Worked example:
   [`tpl_record`](../examples/tpl_record.tsx).

package/docs/composition.md

@@ -63,9 +63,12 @@ restyle a heading level per-page.
   `SubsectionHeading` › `SubsectionHeadingTitle` (`###` — lg semibold, with the same `info` ⓘ
   affordance as `SectionHeadingTitle`; siblings — a `Badge`, a
   `SectionHeadingMeta`, an action — ride the heading row's right edge). Sibling subsections stack
-  in a **`SubsectionStack`** (a fixed 32px beat, SPACE-ONLY — subsection titles carry the
-  grouping; hairlines belong to the SECTION level, one rule per altitude; no margins, no
-  hand-rolled dividers); a headingless `Subsection` is the
+  in a **`SubsectionStack`** (a fixed 32px beat; no margins, no hand-rolled dividers).
+  It is SPACE-ONLY while the groups are SHORT — the titles carry the grouping and hairlines
+  belong to the SECTION level, one rule per altitude — and takes `divided` once the groups run
+  LONG: past a screenful of rows the 32px beat reads as one more row gap and the next title
+  arrives with nothing marking that a new group started. LENGTH is the discriminator, not
+  whether the groups are titled. A headingless `Subsection` is the
   section's lead group. Group leads INSIDE a subsection's rows are `md` medium at most. Do NOT
   hand-roll `Text weight="semibold"` group leads inside a section, and never promote a subsection
   to its own section-level heading just to separate it.
@@ -448,13 +451,19 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   the band's invisible bottom half must never read as a hole above the description.
 - **A LINKED record never renders as field rows** — another record's data must not read as
   fields on THIS one. Use **`LinkedRecordBox`** (`tpl_record`'s Customer/sibling are the worked
-  examples): a BORDERED, fully pressable box (glyph anchor · identity · facts stacked
-  vertically) whose press opens the record's detail drawer; the verbs ride its `actions` slot
-  in a hairline-fenced footer INSIDE the box — destructive LEFT in danger, go-to RIGHT. One verb
-  set across every box of a group (a party wall's five links all read "Gỡ", not a mix of
+  examples): a BORDERED box (glyph anchor · identity · facts stacked vertically) whose verbs
+  ride its `actions` slot in a hairline-fenced footer INSIDE the box — destructive LEFT in
+  danger, go-to RIGHT. One verb set across every box of a group (a party wall's five links all read "Gỡ", not a mix of
   "Đổi"/"Gỡ"): with a clearable link, changing = remove → the empty-state picker re-prompts, so
-  the destructive verb covers both required anchors and optional adds. Editing the linked record happens on
-  ITS page, never here.
+  the destructive verb covers both required anchors and optional adds.
+  **`onOpen` decides whether the box is a DOOR, and the kit makes the two exclusive.** Pass it
+  (with `doorLabel`) when the linked record HAS a detail surface: the whole box presses open, its
+  facts are TEXT, and editing that record happens on ITS page, never here. OMIT it when the record
+  has NO page of its own — the box renders static (no tab stop, no pointer, nothing announced as a
+  button), the explicit `actions` verbs are its only affordances, and a `facts` value may then be a
+  NODE holding the inline editor, since there is no destination a press could steal. Never wire a
+  door "so the box presses": it sends the reader somewhere they did not ask to go and duplicates
+  whatever change verb the footer already shows.
   **The empty / attach state is a find-or-create `Combobox`, never a bare picker** (`tpl_record`'s
   Customer is the worked example): rows are `renderOptionContent`-rich, NOT a wall of bare names —
   the premium shape is a **glyph tile (28·radius 7·zinc-100) · the name over a muted metadata line**
@@ -468,13 +477,15 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   WITHOUT leaving the record. `customOptionPlacement:"top"` keeps the create row visible while the
   keyboard highlight stays on the first MATCH, so Enter on a partial never makes a duplicate. A
   linked record seeded by a workflow (not user-attached) skips the picker — show the box or an
-  `EmptyState`, no create affordance. The component OWNS the press ANATOMY (the error-prone part hand-rolling
-  got wrong): the box is a `PressableRow` (role-less, non-focusable surface — hover wash spans
+  `EmptyState`, no create affordance. The component OWNS the door variant's press ANATOMY (the
+  error-prone part hand-rolling got wrong): the box is a `PressableRow` (role-less, non-focusable surface — hover wash spans
   the nested verbs) with the keyboard DOOR — an EMPTY absolutely-positioned `role="button"`
   sibling carrying the tab stop, the accessible name and the focus ring — beneath the content,
   the interior verbs lifted above it via `zIndex: 1`. NEVER `role="button"` on a container with
   interactive descendants: a button must not contain a button (invalid HTML, a hydration error,
-  and AT double-announcement).
+  and AT double-announcement). That fenced, lifted footer is the ONLY place a control may sit
+  inside a door box — a control in the facts column would compete with the press for the same
+  click, which is why a node fact typechecks only on the doorless variant.
 
 ## Color discipline — solid / tint / ramp + ONE accent
 

package/docs/data_entry.md

@@ -346,7 +346,9 @@ level up — money never reads as one pot); each closes with a SEQUENTIAL confir
 its blockers ("Confirm check-in first."). The header status chip carries the phase.
 
 A LONG record surface pairs with a LEFT OUTLINE RAIL — `MenuButton` items + `useSectionNav`
-(scroll-spy: jump to a section, the highlight follows the scroll); on narrow containers the rail
+(scroll-spy: jump to a section, the highlight follows the scroll); the active item is
+`current={activeKey === key}`, the NAVIGATION state, never `selected`, which is listbox
+selection. On narrow containers the rail
 becomes a PINNED bar naming the current section that opens a full-page section-picker `Modal`. A
 per-phase dot on a rail item carries its confirmed state. A direction that is a TYPE (one record
 per event) is instead a discriminator chosen ONCE at creation — a `SegmentedControl` in the

package/docs/templates.md

@@ -392,8 +392,9 @@ billing, and quick-capture templates. Top → bottom:
   section; the fenced red `DangerZone` card is the section's BODY.
 - A LEFT OUTLINE RAIL (`MenuButton` + `useSectionNav`) — **the rail is the page's COMPLETE
   map** (every section including Danger zone; subsections never join it) — headed by the
-  bare circular `BackButton`; it scroll-spies the active section, and on narrow containers
-  becomes the pinned current-section bar opening a section-picker `Modal`.
+  bare circular `BackButton`; it scroll-spies the active section (`current={activeKey === key}`
+  on each item — navigation, not selection), and on narrow containers becomes the pinned
+  current-section bar opening a section-picker `Modal` whose items carry the same `current`.
 - **The page layout is the DOCS layout — the reading column is CENTRED IN THE VIEWPORT, and
   the rail sits in its left gutter.** The `ScrollView` is FULL-WIDTH — **never cap it at
   `CONTENT_MAX`, or the scroll container becomes the column and the gutters go wheel-dead**

package/examples/tpl_record.tsx

@@ -2552,7 +2552,7 @@ export function TplRecord() {
                 key={sec.key}
                 icon={sec.icon}
                 title={sec.label}
-                selected={nav.activeKey === sec.key}
+                current={nav.activeKey === sec.key}
                 onPress={() => {
                   setSectionsOpen(false);
                   nav.jumpTo(sec.key);
@@ -3075,7 +3075,7 @@ export function TplRecord() {
         <BackButton label="Records" onPress={() => {}} />
         <View style={{ gap: 2 }}>
           {SECTIONS.map((sec) => (
-            <MenuButton key={sec.key} icon={sec.icon} title={sec.label} selected={nav.activeKey === sec.key} onPress={() => nav.jumpTo(sec.key)} />
+            <MenuButton key={sec.key} icon={sec.icon} title={sec.label} current={nav.activeKey === sec.key} onPress={() => nav.jumpTo(sec.key)} />
           ))}
         </View>
       </View>

package/package.json

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

package/src/combobox.tsx

@@ -360,12 +360,13 @@ export interface ComboboxInputProps {
 export function ComboboxInput(props: ComboboxInputProps) {
   const { icon, placeholder, clearable = false, onClear, clearLabel, accessibilityLabel, testID } = props;
   const ctx = useComboboxContext("ComboboxInput");
-  // Select mode (no leading icon): the right slot holds the clear ✕ when the field
-  // carries text (a reflected selection or a live query) AND it's clearable;
-  // otherwise the trailing chevron, so an EMPTY picker still reads as a picker.
-  // The two never show together — ✕ replaces the chevron once there's something to
-  // clear, and pressing it resets the query + reopens the browse list (via
-  // `handleChangeText("")`) so the consumer's `onClear` lands back on the full set.
+  // `showClear` MIRRORS `TextInputField`'s own clear-✕ condition — the field
+  // carries text (a reflected selection or a live query) AND it's clearable — so
+  // the ✕ that renders there and the chevron decided here can never both be up.
+  // The chevron is what THIS file owns, and it is select-mode only (no leading
+  // icon), so an EMPTY picker still reads as a picker; ✕ replaces it once there's
+  // something to clear, and pressing that resets the query + reopens the browse
+  // list (via `handleChangeText("")`) so `onClear` lands back on the full set.
   const showClear = clearable && ctx.query.length > 0;
   const showChevron = !icon && !showClear;
 
@@ -391,9 +392,12 @@ export function ComboboxInput(props: ComboboxInputProps) {
         autoCorrect={false}
         accessibilityLabel={accessibilityLabel}
         style={[
-          // Select mode reserves the right gutter for whichever trailing affordance
-          // is up (chevron when empty, ✕ when there's text) so neither overlaps it.
-          !icon ? styles.selectInput : undefined,
+          // Only the CHEVRON's gutter belongs here — it is the one trailing
+          // affordance this file owns. `TextInputField` reserves its own slot for
+          // the clear ✕, so gating this on "select mode" instead would both
+          // over-ride that reserve with the wrong width and leave a SEARCH-mode
+          // (`icon`) combobox with no gutter at all.
+          showChevron ? styles.withChevron : undefined,
           // Gate on `showList`, not `open`: an empty query with no options has
           // `open=true` but renders NO dropdown, so a ring tied to `open` would
           // show with nothing below it AND linger after blur (no popover fires a
@@ -408,7 +412,7 @@ export function ComboboxInput(props: ComboboxInputProps) {
       />
       {showChevron ? (
         <View style={styles.chevron}>
-          <Icon name="chevrons-up-down" size={16} color={colors.zinc["400"]} />
+          <Icon name="chevrons-up-down" size={CHEVRON_SIZE} color={colors.zinc["400"]} />
         </View>
       ) : null}
     </View>
@@ -562,17 +566,23 @@ export function ComboboxFooter(props: { children: ReactNode }) {
   return <View style={styles.footer}>{props.children}</View>;
 }
 
+/** The chevron is absolutely positioned — out of flow — so the text reserves the
+ *  span it occupies: the offset, the glyph, and a gap (a bare `Icon` carries no
+ *  interior padding of its own). One source for the offset and the reserve. */
+const CHEVRON_INSET = 10;
+const CHEVRON_SIZE = 16;
+const CHEVRON_GUTTER = CHEVRON_INSET + CHEVRON_SIZE + 6;
+
 const styles = StyleSheet.create({
   openRing: {
     boxShadow: FOCUS_RING,
   },
-  // Select mode: room on the right for the trailing chevron.
-  selectInput: {
-    paddingRight: 32,
+  withChevron: {
+    paddingRight: CHEVRON_GUTTER,
   },
   chevron: {
     position: "absolute",
-    right: 10,
+    right: CHEVRON_INSET,
     top: 0,
     bottom: 0,
     justifyContent: "center",

package/src/linked_record_box.tsx

@@ -6,21 +6,21 @@ import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { colors } from "./colors";
 
-interface LinkedRecordBoxProps {
+/** One reference fact. `V` is the value the variant admits — text under a door, any node without one. */
+interface LinkedRecordFact<V = ReactNode> {
+  label: string;
+  value: V;
+}
+
+interface LinkedRecordBoxBaseProps {
   /** The linked record's kind glyph (building-2 for a company, file-text for a record…). */
   icon: IconName;
   /** The linked record's display name. */
   name: string;
   /** A secondary identity line — a code, tax id, country, or "<desk> record". */
   subtitle?: string;
-  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). */
-  facts?: { label: string; value: string }[];
   /** Width of the facts' label column (default 80). Widen for longer labels. */
   factLabelWidth?: number;
-  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
-  doorLabel: string;
-  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
-  onOpen: () => void;
   /** The verbs, in a hairline-fenced footer at the bottom of the box, lifted above the door's
    *  hit area. Convention: destructive LEFT, go-to RIGHT (a `<View style={{ flex: 1 }} />`
    *  spacer between). The divider is drawn automatically when actions are present. Supplied by
@@ -28,22 +28,61 @@ interface LinkedRecordBoxProps {
   actions?: ReactNode;
 }
 
+/** The box that OPENS — the whole surface is the door into the linked record's own detail. */
+interface LinkedRecordBoxDoorProps extends LinkedRecordBoxBaseProps {
+  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
+  onOpen: () => void;
+  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
+  doorLabel: string;
+  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). TEXT only
+   *  (`""` renders "—"): the box is one press target, so the only controls it may hold are the
+   *  `actions` verbs, which the footer fences off and lifts above the door. A fact the reader
+   *  must EDIT belongs on the linked record's own page — that is what the door is for. */
+  facts?: LinkedRecordFact<string>[];
+}
+
+/** The box with nothing to open — the linked record has no detail surface of its own. */
+interface LinkedRecordBoxStaticProps extends LinkedRecordBoxBaseProps {
+  /** Absent by construction. Typed `never` rather than left off so `doorLabel` can never arrive
+   *  without a handler — a named door that goes nowhere. */
+  onOpen?: never;
+  doorLabel?: never;
+  /** Reference facts, stacked VERTICALLY. A string renders as text (`""` → "—"); a NODE renders
+   *  as given (no placeholder), so a fact can carry its own inline editor — safe here precisely
+   *  because nothing about this box presses. */
+  facts?: LinkedRecordFact[];
+}
+
+type LinkedRecordBoxProps = LinkedRecordBoxDoorProps | LinkedRecordBoxStaticProps;
+
 /**
  * A LINKED RECORD shown for reference — a bordered box scoping ANOTHER record's data
- * (identity glyph · name · facts), the WHOLE box a keyboard-accessible door into that record's
- * detail. Use it wherever one record points at another (a shipment's customer, an invoice's
- * party, a case's sibling); the picker / empty-state that REASSIGNS the link is the consumer's,
- * shown in place of the box.
+ * (identity glyph · name · facts). Use it wherever one record points at another (a shipment's
+ * customer, an invoice's party, a case's sibling); the picker / empty-state that REASSIGNS the
+ * link is the consumer's, shown in place of the box.
+ *
+ * `onOpen` picks the variant:
+ *
+ * - **With `onOpen`** (+ `doorLabel`) the WHOLE box is a keyboard-accessible door into the
+ *   record's detail. Its facts are TEXT, and the `actions` footer is the one place a control
+ *   may live — everything else is press-through to the door.
+ * - **Without it** the box is a STATIC reference card: no door, no tab stop, no pointer, nothing
+ *   announced as a button; the only interactive parts are `actions` and whatever a fact node
+ *   holds. This is the shape for a record with NO page of its own — there is nothing to open, so
+ *   the box IS where its values are read and edited, and an inline editor in a fact is honest.
  *
- * The a11y contract it enforces (the error-prone part, hence a primitive): a container with
- * interactive descendants must NEVER be `role="button"` (invalid HTML). So the box is a
- * role-less `PressableRow`, a `PressDoor` sibling carries the tab stop / accessible name /
- * focus ring, and the interior verbs lift above it via `zIndex`.
+ * The a11y contract the door variant enforces (the error-prone part, hence a primitive): a
+ * container with interactive descendants must NEVER be `role="button"` (invalid HTML). So the
+ * box is a role-less `PressableRow`, a `PressDoor` sibling carries the tab stop / accessible
+ * name / focus ring, and the interior verbs lift above it via `zIndex`.
  */
-export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth = 80, doorLabel, onOpen, actions }: LinkedRecordBoxProps) {
-  return (
-    <PressableRow onPress={onOpen} style={styles.box}>
-      <PressDoor accessibilityLabel={doorLabel} onPress={onOpen} />
+export function LinkedRecordBox(props: LinkedRecordBoxProps) {
+  const { icon, name, subtitle, factLabelWidth = 80, actions } = props;
+  // A door box's facts are strings, and a string IS a ReactNode — so both variants render
+  // through one path typed at the wider value.
+  const facts: LinkedRecordFact[] = props.facts ?? [];
+  const body = (
+    <>
       <View style={styles.identity}>
         <View style={styles.glyph}>
           <Icon name={icon} size={17} color={colors.zinc[600]} />
@@ -53,12 +92,18 @@ export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth =
           {subtitle ? <Text size="xs" color="muted" numberOfLines={1}>{subtitle}</Text> : null}
         </View>
       </View>
-      {facts && facts.length > 0 ? (
+      {facts.length > 0 ? (
         <View style={{ gap: 6 }}>
           {facts.map((f) => (
             <View key={f.label} style={styles.fact}>
               <Text size="sm" color="muted" style={{ width: factLabelWidth }}>{f.label}</Text>
-              <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
+              {typeof f.value === "string" ? (
+                <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
+              ) : (
+                // A node prints as authored — the "—" placeholder is a TEXT affordance, and a
+                // control renders its own empty state.
+                <View style={{ flex: 1, minWidth: 0 }}>{f.value}</View>
+              )}
             </View>
           ))}
         </View>
@@ -70,6 +115,17 @@ export function LinkedRecordBox({ icon, name, subtitle, facts, factLabelWidth =
           <View style={styles.actions}>{actions}</View>
         </>
       ) : null}
+    </>
+  );
+
+  // Nothing to open → a plain View, so the box takes no tab stop, announces no role, and paints
+  // no pointer/hover promise of a destination it doesn't have.
+  if (!props.onOpen) return <View style={styles.box}>{body}</View>;
+
+  return (
+    <PressableRow onPress={props.onOpen} style={styles.box}>
+      <PressDoor accessibilityLabel={props.doorLabel} onPress={props.onOpen} />
+      {body}
     </PressableRow>
   );
 }

package/src/menu_button.tsx

@@ -12,7 +12,23 @@ export interface MenuButtonProps {
   right?: React.ReactNode;
   onPress?: () => void;
   onHoverIn?: () => void;
+  /**
+   * Persistent SELECTION highlight — the listbox pattern, where the row is an
+   * `option` and `aria-selected` is the property that carries its state. On any
+   * other role it is the highlight only: `aria-selected` is valid on
+   * option/tab/row/gridcell and nowhere else, so it is not emitted there (a menu
+   * carries state in the `right` slot — a check glyph).
+   */
   selected?: boolean;
+  /**
+   * This row is the CURRENT item in a set of NAVIGATION items — the section an
+   * outline rail sits on (`useSectionNav`'s `activeKey`), the open pane of a
+   * settings dialog. Renders `aria-current`, which is global (valid on any
+   * role): `true` is the generic "this is the current one", or name the set it
+   * is current WITHIN. Navigation is not selection — a rail item is `current`,
+   * a listbox row is `selected`. Both paint the same highlight.
+   */
+  current?: boolean | "page" | "step" | "location";
   focused?: boolean;
   disabled?: boolean;
   danger?: boolean;
@@ -42,6 +58,7 @@ export function MenuButton(props: MenuButtonProps) {
     onPress,
     onHoverIn,
     selected,
+    current,
     focused,
     disabled,
     danger,
@@ -84,18 +101,26 @@ export function MenuButton(props: MenuButtonProps) {
     </>
   );
 
+  // Selection and current-ness are different states with the same visual weight
+  // — a row is at most one of them, and either owns the resting highlight.
+  const highlighted = !!selected || !!current;
   const containerStyle = [
     styles.container,
-    selected && styles.selected,
-    focused && !selected && styles.focused,
+    highlighted && styles.highlighted,
+    focused && !highlighted && styles.focused,
     style,
   ];
 
+  // `aria-current` takes a TOKEN, and absence — never `false` — is how the other
+  // items in the set say "not this one".
+  const ariaCurrent = current === true ? "true" : current === false ? undefined : current;
+
   if (onPress) {
     return (
       <PressableHighlight
         focusRing
-        ref={ref}        testID={testID}
+        ref={ref}
+        testID={testID}
         nativeID={nativeID}
         onPress={() => {
           onPress?.();
@@ -106,7 +131,9 @@ export function MenuButton(props: MenuButtonProps) {
         style={containerStyle}
         role={role}
         accessibilityLabel={resolvedLabel}
-        aria-selected={!!selected} aria-disabled={disabled || undefined}
+        aria-selected={role === "option" ? !!selected : undefined}
+        aria-current={ariaCurrent}
+        aria-disabled={disabled || undefined}
       >
         {inner}
       </PressableHighlight>
@@ -133,7 +160,7 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: "flex-start",
   },
-  selected: {
+  highlighted: {
     backgroundColor: colors.zinc["100"],
   },
   focused: {

package/src/pressable_highlight.tsx

@@ -50,6 +50,13 @@ export interface PressableHighlightProps extends PressableProps {
    * explicitly because the base React Native `PressableProps` type omits it.
    */
   onKeyDown?: (event: { key: string; preventDefault?: () => void }) => void;
+  /**
+   * The item is the current one in a set of navigation items. Exposed
+   * explicitly because React Native's accessibility props carry only the ARIA
+   * attributes with a native counterpart, and `aria-current` has none —
+   * react-native-web forwards it to the DOM like any other `aria-*` prop.
+   */
+  "aria-current"?: "true" | "page" | "step" | "location";
   /**
    * Pass "none" on row/card surfaces: a pressable surface is a button, not a
    * text-selection surface — drag jitter on selectable text starts a

package/src/section_heading.tsx

@@ -53,7 +53,8 @@ export interface SubsectionProps {
  * One named group INSIDE a `Section` — the level below `Section` on a long
  * record surface (`###` in the heading ramp). Compose a `SubsectionHeading`
  * then the group's rows; sibling subsections stack in a `SubsectionStack`
- * (24 + hairline between groups — no margins, no hand-rolled dividers). A
+ * (32, space-only while the groups are short — no margins, no hand-rolled
+ * dividers; see `SubsectionStack` for when length earns `divided`). A
  * headingless `Subsection` is fine for the section's lead group.
  *
  *   <Section>

package/src/section_stack.tsx

@@ -4,8 +4,9 @@ import { Divider } from "./divider";
 
 interface StackProps {
   children: React.ReactNode;
-  /** Hairline between blocks (default true). Turn off for a short surface
-   *  where the beat alone is enough. */
+  /** Hairline between blocks. Each stack defaults to what its altitude wants
+   *  (on for sections, off for subsections); the rule for overriding it is on
+   *  `SubsectionStack`. */
   divided?: boolean;
   style?: StyleProp<ViewStyle>;
 }
@@ -49,12 +50,17 @@ export function SectionStack(props: SectionStackProps) {
 export type SubsectionStackProps = StackProps;
 
 /**
- * The stack of `Subsection` groups INSIDE a `Section` — a fixed 32px beat,
- * SPACE-ONLY: subsection titles carry the grouping; hairlines belong to the
- * SECTION level (`SectionStack`), one rule per altitude. Compose it as the
- * section's body (after the `SectionHeading`); a section's groups divide
- * without hand-rolled gaps. `divided` stays an explicit opt-in for a rare
- * headingless stack that still needs a rule.
+ * The stack of `Subsection` groups INSIDE a `Section` — a fixed 32px beat.
+ * Compose it as the section's body (after the `SectionHeading`); a section's
+ * groups divide without hand-rolled gaps.
+ *
+ * SPACE-ONLY while the groups are SHORT (a handful of rows, taken in at a
+ * glance): the titles carry the grouping, and hairlines belong to the SECTION
+ * level (`SectionStack`), one rule per altitude. Turn `divided` on once the
+ * groups are LONG — past a screenful of rows, 32px reads as one more row gap
+ * and the next title arrives with nothing marking that a new group started, so
+ * the hairline becomes the boundary. LENGTH is the discriminator, not whether
+ * the groups are titled: a headingless stack follows the same rule.
  *
  *   <Section>
  *     <SectionHeading><SectionHeadingTitle>Delivery</SectionHeadingTitle></SectionHeading>

package/src/text_input_field.tsx

@@ -3,12 +3,13 @@ import {
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
   View,
+  type LayoutChangeEvent,
 } from "react-native";
 import { colors } from "./colors";
 import { CONTROL_RADIUS, FOCUS_RING, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { useFocusRing, composeHandler } from "./use_focus_ring";
 import { useHover } from "./use_hover";
-import { Ref, useCallback } from "react";
+import { Ref, useCallback, useState } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
 import { ShortcutBadge } from "./shortcut_badge";
@@ -99,6 +100,23 @@ export function TextInputField(props: TextInputFieldProps) {
 
   const editable = !!(!disabled || inputProps.editable);
 
+  // The ONE source for what occupies the trailing slot — the same flags decide
+  // which affordance renders AND how much the text reserves for it. Derived once
+  // so the two can never disagree (a gutter gated on anything else is how a long
+  // value ends up running underneath the ✕).
+  const showClear = !!clearable && !!value;
+  // The badge is a hint for reaching an EMPTY field; once there's a value the
+  // clear ✕ owns the slot and the hint is spent.
+  const showShortcut = !!shortcut && !value;
+  // The badge's width is content- AND screen-dependent (⌘B vs Ctrl+Shift+S;
+  // `ShortcutBadge` renders NOTHING on small screens), so unlike the fixed-size
+  // ✕ its gutter cannot be a constant — it is measured, which also makes the
+  // small-screen reserve correctly zero.
+  const [shortcutWidth, setShortcutWidth] = useState(0);
+  const onShortcutLayout = useCallback((e: LayoutChangeEvent) => {
+    setShortcutWidth(e.nativeEvent.layout.width);
+  }, []);
+
   const { measure, inputRef } = autoGrowResult;
 
   const handleChangeText = useCallback(
@@ -145,6 +163,8 @@ export function TextInputField(props: TextInputFieldProps) {
           autoGrow && !autoGrowResult.scrollEnabled && { overflow: "hidden" as const },
           !editable && styles.disabled,
           icon && styles.withIcon,
+          showClear && styles.withClear,
+          showShortcut && shortcutWidth > 0 && { paddingRight: SHORTCUT_INSET + shortcutWidth },
           hovered && editable && { borderColor: HOVER_BORDER },
           style,
           focusVisible && { boxShadow: FOCUS_RING },
@@ -157,7 +177,7 @@ export function TextInputField(props: TextInputFieldProps) {
         scrollEnabled={autoGrow ? autoGrowResult.scrollEnabled : undefined}
         onContentSizeChange={autoGrow ? autoGrowResult.onContentSizeChange : undefined}
       />
-      {!!clearable && !!value ? (
+      {showClear ? (
         <IconButton
           icon="x"
           tooltip={clearLabel}
@@ -167,8 +187,8 @@ export function TextInputField(props: TextInputFieldProps) {
           }}
           style={styles.clear}
         />
-      ) : shortcut ? (
-        <View style={styles.shortcut}>
+      ) : showShortcut ? (
+        <View style={styles.shortcut} onLayout={onShortcutLayout}>
           <ShortcutBadge shortcut={shortcut} />
         </View>
       ) : null}
@@ -176,6 +196,20 @@ export function TextInputField(props: TextInputFieldProps) {
   );
 }
 
+/**
+ * The trailing slot (the clear ✕, the shortcut badge) is ABSOLUTELY POSITIONED —
+ * out of flow, so the input's text does not stop at it. Whichever affordance is
+ * up, the text reserves the span it occupies; these constants drive BOTH the
+ * affordance's `right` offset and the reserved padding, so the two cannot drift
+ * apart. A slot standing empty reserves nothing, so an input with no trailing
+ * affordance is untouched.
+ */
+const CLEAR_INSET = 6;
+/** `IconButton size="md"` is a 28px box around an 18px glyph, so the button's own
+ *  interior padding IS the visual gap — text may sit against the box edge. */
+const CLEAR_GUTTER = CLEAR_INSET + 28;
+const SHORTCUT_INSET = 12;
+
 const styles = StyleSheet.create({
   input: {
     borderRadius: CONTROL_RADIUS,
@@ -200,19 +234,24 @@ const styles = StyleSheet.create({
   withIcon: {
     paddingLeft: 34,
   },
+  withClear: {
+    paddingRight: CLEAR_GUTTER,
+  },
   icon: {
     top: 9,
     left: 8,
     position: "absolute",
   },
   clear: {
-    top: 6,
-    right: 6,
+    // Pinned to the TOP, not centred: on a multiline/auto-grow field the ✕ must
+    // stay reachable at the first line, not float in the middle of a tall box.
+    top: CLEAR_INSET,
+    right: CLEAR_INSET,
     position: "absolute",
   },
   shortcut: {
     position: "absolute",
-    right: 12,
+    right: SHORTCUT_INSET,
     top: 0,
     bottom: 0,
     justifyContent: "center",

package/src/use_section_nav.test.ts

@@ -4,7 +4,13 @@ import { act, renderHook } from "@testing-library/react";
 import { useSectionNav } from "./use_section_nav";
 import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent } from "react-native";
 
-const layoutAt = (y: number) => ({ nativeEvent: { layout: { y } } }) as LayoutChangeEvent;
+// RN-web's layout event carries the measured node as `nativeEvent.target`; RN's
+// own (native-only) types don't model it, so it goes on after the cast.
+const layoutAt = (y: number, target?: Element) => {
+  const e = { nativeEvent: { layout: { y } } } as LayoutChangeEvent;
+  if (target) Object.assign(e.nativeEvent, { target });
+  return e;
+};
 const scrollTo = (y: number) => ({ nativeEvent: { contentOffset: { y } } }) as NativeSyntheticEvent<NativeScrollEvent>;
 
 function mounted() {
@@ -17,6 +23,68 @@ function mounted() {
   return hook;
 }
 
+const rect = (top: number): DOMRect => ({
+  top,
+  bottom: top,
+  left: 0,
+  right: 0,
+  width: 0,
+  height: 0,
+  x: 0,
+  y: top,
+  toJSON: () => ({}),
+});
+
+/**
+ * A web page in miniature: a scroll container pinned at the viewport top plus
+ * section nodes sitting at live content offsets. `scrolledTo` moves the scroll
+ * position and every rect together (as a browser does), `shift` is the async
+ * content growth that moves sections WITHOUT an `onLayout` — the case a cached
+ * offset cannot see. A detached node measures as 0, like a real one.
+ */
+function webPage<K extends string>(keys: readonly K[], contentY: Record<K, number>) {
+  let scrollY = 0;
+  let live: Record<K, number> = { ...contentY };
+  const node = document.createElement("div");
+  document.body.appendChild(node);
+  Object.defineProperty(node, "scrollTop", { get: () => scrollY });
+  node.getBoundingClientRect = () => rect(0);
+  const els = {} as Record<K, HTMLElement>;
+  for (const key of keys) {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    el.getBoundingClientRect = () => (el.isConnected ? rect(live[key] - scrollY) : rect(0));
+    els[key] = el;
+  }
+  return {
+    node,
+    els,
+    shift: (next: Partial<Record<K, number>>) => {
+      live = { ...live, ...next };
+    },
+    scrolledTo: (y: number) => {
+      scrollY = y;
+      return scrollTo(y);
+    },
+  };
+}
+
+/** The registered page above, wired to a hook whose `scrollTo` calls are recorded. */
+function webMounted(contentY: Record<"a" | "b" | "c", number>) {
+  const keys = ["a", "b", "c"] as const;
+  const page = webPage(keys, contentY);
+  const calls: { y: number }[] = [];
+  const hook = renderHook(() => useSectionNav(keys));
+  (hook.result.current.scrollRef as { current: unknown }).current = {
+    getScrollableNode: () => page.node,
+    scrollTo: (opts: { y: number }) => calls.push(opts),
+  };
+  act(() => {
+    for (const key of keys) hook.result.current.register(key)(layoutAt(contentY[key], page.els[key]));
+  });
+  return { result: hook.result, page, calls };
+}
+
 describe("useSectionNav", () => {
   it("starts on the first key", () => {
     const { result } = renderHook(() => useSectionNav(["a", "b"] as const));
@@ -66,4 +134,38 @@ describe("useSectionNav", () => {
     act(() => result.current.jumpTo("a"));
     expect(calls[1]?.y).toBe(0);
   });
+
+  it("on web the highlight follows content that shifted after layout", () => {
+    const { result, page } = webMounted({ a: 0, b: 400, c: 900 });
+    act(() => result.current.onScroll(page.scrolledTo(321)));
+    expect(result.current.activeKey).toBe("b");
+
+    // a table above b finishes loading and pushes everything below it down 300px
+    page.shift({ b: 700, c: 1200 });
+    act(() => result.current.onScroll(page.scrolledTo(321)));
+    expect(result.current.activeKey).toBe("a");
+    act(() => result.current.onScroll(page.scrolledTo(700)));
+    expect(result.current.activeKey).toBe("b");
+
+    // and back: content above collapses, pulling the sections up again
+    page.shift({ b: 200, c: 500 });
+    act(() => result.current.onScroll(page.scrolledTo(450)));
+    expect(result.current.activeKey).toBe("c");
+  });
+
+  it("on web jumpTo lands on the section's shifted position", () => {
+    const { result, page, calls } = webMounted({ a: 0, b: 400, c: 900 });
+    page.shift({ b: 700 });
+    act(() => result.current.jumpTo("b"));
+    expect(calls[0]?.y).toBe(688);
+  });
+
+  it("a section removed from the DOM keeps its last offset instead of measuring as the page top", () => {
+    const { result, page } = webMounted({ a: 0, b: 400, c: 900 });
+    page.els.c.remove();
+    // 500 + 80 = 580: past b, still short of c — a detached c measured live
+    // would read as the current scroll position and steal the highlight.
+    act(() => result.current.onScroll(page.scrolledTo(500)));
+    expect(result.current.activeKey).toBe("b");
+  });
 });

package/src/use_section_nav.ts

@@ -4,7 +4,7 @@ import type { LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, Scroll
 export interface SectionNavHandle<K extends string> {
   /** Attach to the content `ScrollView` (with `onScroll` + `scrollEventThrottle={16}`). */
   scrollRef: RefObject<ScrollView | null>;
-  /** The section the scroll currently sits in — drives the rail's `selected`. */
+  /** The section the scroll currently sits in — drives the rail item's `current`. */
   activeKey: K;
   /** `onLayout={register(key)}` on each section wrapper. The wrapper must be a
    *  DIRECT child of the ScrollView content (layout.y is content-relative). */
@@ -21,28 +21,30 @@ export interface SectionNavHandle<K extends string> {
  * top has passed the viewport edge is the active one).
  *
  *   const nav = useSectionNav(["details", "gatein", "gateout"] as const);
- *   <MenuButton title="Gate in" selected={nav.activeKey === "gatein"}
+ *   <MenuButton title="Gate in" current={nav.activeKey === "gatein"}
  *               onPress={() => nav.jumpTo("gatein")} />
  *   <ScrollView ref={nav.scrollRef} onScroll={nav.onScroll} scrollEventThrottle={16}>
  *     <View onLayout={nav.register("gatein")}>…</View>
  *
+ * A rail item is the CURRENT item in a set of navigation links, so it takes
+ * `current` (→ `aria-current`), never `selected` (that is listbox selection).
+ *
  * Pass the keys in PAGE ORDER — the spy walks them top-down. Hide the rail on
  * narrow containers (the page still scrolls; the rail is a wide-screen aid).
  *
  * Contract: every key's section stays MOUNTED (an unmounted section leaves its
  * last offset registered — conditional sections belong inside an always-mounted
- * wrapper that carries the `onLayout`). On WEB, `jumpTo` re-measures the live
- * DOM position, so async content growing ABOVE a section (a photo grid, a
- * late-loading table) can never stale a jump; the cached offsets only drive
- * the scroll-spy highlight, which self-corrects as jumps refresh them. On
- * native there is no re-measure — content above should settle before precision
- * matters (`onLayout` won't refire on a pure position shift).
+ * wrapper that carries the `onLayout`). On WEB both the jump AND the highlight
+ * read the live DOM position, so async content growing ABOVE a section (a photo
+ * grid, a late-loading table) can never stale either. On native there is no
+ * re-measure — content above should settle before precision matters
+ * (`onLayout` won't refire on a pure position shift).
  */
 export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): SectionNavHandle<K> {
   const scrollRef = useRef<ScrollView>(null);
   const sectionY = useRef<Partial<Record<K, number>>>({});
   // The registered wrapper's DOM node (web only) — RN-web's layout event
-  // exposes it as `nativeEvent.target`, which lets jumpTo re-measure live.
+  // exposes it as `nativeEvent.target`, which lets us re-measure live.
   const sectionEl = useRef<Partial<Record<K, Element>>>({});
   const [activeKey, setActiveKey] = useState<K>(keys[0]);
   const register = (key: K) => (e: LayoutChangeEvent) => {
@@ -50,27 +52,52 @@ export function useSectionNav<K extends string>(keys: readonly [K, ...K[]]): Sec
     const target: unknown = (e.nativeEvent as { target?: unknown }).target;
     if (typeof Element !== "undefined" && target instanceof Element) sectionEl.current[key] = target;
   };
-  /** The section's CURRENT content-relative offset — measured live on web
-   *  (immune to async content shifting the page), cached `layout.y` otherwise. */
-  const currentY = (key: K): number => {
-    const el = sectionEl.current[key];
+  /**
+   * The sections' CURRENT content-relative offsets: refreshed from the live DOM
+   * on web, the cached `layout.y` otherwise. THE source of truth for both the
+   * jump and the highlight — a spy reading a different number than the jump is
+   * a spy that points at the wrong section.
+   *
+   * WHY measure on every scroll event rather than trust the cache: `onLayout`
+   * does not refire when a section merely MOVES, so any async shift above it (a
+   * table finishing load, a disclosure opening, an image settling) strands the
+   * cache and the rail highlights the wrong section until something re-measures.
+   *
+   * WHY that is not the per-frame layout thrash it looks like: reading a rect
+   * forces a reflow only while layout is DIRTY — which is exactly the case where
+   * the cache would have lied. A pure scroll dirties no layout, so these reads
+   * hit a clean tree and cost about a property access. The pass only READS
+   * (container once, then each section), so a dirty frame costs ONE flush for
+   * all sections, not one per section. Coalescing behind rAF was rejected: it
+   * cannot beat "free when nothing changed", and it would make the highlight
+   * lag the scroll by a frame while adding a cancel-on-unmount lifecycle.
+   */
+  const measure = (): Partial<Record<K, number>> => {
     const sv = scrollRef.current as (ScrollView & { getScrollableNode?: () => unknown }) | null;
     const sc = typeof sv?.getScrollableNode === "function" ? sv.getScrollableNode() : null;
-    if (typeof Element !== "undefined" && el instanceof Element && sc instanceof Element) {
-      const y = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop;
-      sectionY.current[key] = y; // refresh the spy's cache while we're here
-      return y;
+    if (typeof Element === "undefined" || !(sc instanceof Element)) return sectionY.current;
+    // The content origin in viewport coordinates; a section's top minus it is
+    // the content-relative offset both `scrollTo` and the spy speak in.
+    const origin = sc.getBoundingClientRect().top - sc.scrollTop;
+    for (const k of keys) {
+      const el = sectionEl.current[k];
+      // A detached node measures as 0, which would pin the spy to the last
+      // section — a section that broke the mounted contract keeps its last
+      // known offset instead, exactly as it does on native.
+      if (el?.isConnected) sectionY.current[k] = el.getBoundingClientRect().top - origin;
     }
-    return sectionY.current[key] ?? 0;
+    return sectionY.current;
   };
   const jumpTo = (key: K) => {
-    scrollRef.current?.scrollTo({ y: Math.max(0, currentY(key) - 12), animated: true });
+    const y = measure()[key] ?? 0;
+    scrollRef.current?.scrollTo({ y: Math.max(0, y - 12), animated: true });
   };
   const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     const y = e.nativeEvent.contentOffset.y + 80;
+    const offsets = measure();
     let cur: K = keys[0];
     for (const k of keys) {
-      const sy = sectionY.current[k];
+      const sy = offsets[k];
       if (sy != null && sy <= y) cur = k;
     }
     if (cur !== activeKey) setActiveKey(cur);