@lotics/ui 42.3.0 → 43.0.0

package/MIGRATION.md

@@ -4,6 +4,121 @@ 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.
 
+## 43.0.0 — a time is PICKED, and there is nothing to type
+
+`TimePicker` is no longer a segmented text field. It is the value on a pressable
+control — the bordered surface a `Select` uses — that opens an **hour / minute /
+day-period** picker. `InlineTimePicker` is the same thing on the inline shell.
+
+**Why the segments went.** A time was typed, with a picker bolted on as a small
+glyph inside the field, and each half of that was wrong:
+
+- **The glyph was undiscoverable, and worse than undiscoverable.** It sat exactly
+  where `DateField` puts a display-only calendar icon — same slot, same size,
+  same colour — so the one affordance for picking was indistinguishable from
+  decoration. A control nobody can identify is not a control.
+- **A day period is not something to spell.** AM/PM is a choice between two named
+  things; asking someone to type "PM" is asking them to type an answer to a
+  yes/no question. It is now a column.
+- **Composed times cannot cover the clock.** The old list offered whole times at
+  a fixed step, so anything between the rungs — a 13:07 cut-off — was reachable
+  only by typing, and the list had to splice odd values back in to stay honest.
+  Split by UNIT, every minute is offered and that whole class of special case is
+  gone.
+
+The value is unchanged: canonical 24-hour `"HH:mm"`. The locale still decides 12-
+vs 24-hour, and now also decides the SHAPE — a 24-hour locale gets two columns
+and hours 00–23, a 12-hour locale gets a clock face starting at 12 plus the
+period column. Tab reaches each column once and arrows move within it (roving
+tabindex), so sixty minutes are not sixty tab stops.
+
+**To migrate:**
+
+- **`TimePicker` drops `onBlur`, `onEscape`, `onIncompleteChange`, `autoFocus`
+  and `segmentLabels`.** They all served typed entry. A pick is always a complete
+  time, so there is no half-entered state to report and nothing to cancel back
+  to; `placeholder` replaces them as the empty-state control. Delete the props —
+  the compiler will point at each one.
+- **`InlineTimePicker` gains `locale` and drops `controls`.** It commits when the
+  popover closes, not on blur, so a `"buttons"` mode has nothing to confirm.
+- **Add `chooseTime` to any complete `DatePickerLabels` you build** — it names the
+  control and doubles as the empty placeholder. A `labels` prop passed to
+  `DatePicker` is `Partial`, so only a hand-built full set breaks.
+
+**Two kit-wide `OptionList` fixes ride along**, both pre-existing and both
+invisible until a long list met them:
+
+- **A chosen option carries `aria-selected`.** It had only the check GLYPH, so
+  which option was selected was information available to whoever could see the
+  row and to nobody else. It comes with `MenuButton`'s resting `zinc.100`
+  highlight — one weight above the `zinc.50` the keyboard/hover row takes — so
+  **every** `Select`, `Combobox` and option list now tints its selected row.
+  Nothing to change; expect the pixels to move.
+- **An opening list scrolls to its seat.** The initial highlight was seated
+  without scrolling to it, so any list longer than its own box opened at the top
+  with the current value below the fold.
+
+`MenuButton` gains `tabIndex` + `onKeyDown` so a listbox row can hold a roving
+tab stop. Additive.
+
+**A pressable `ListItem` presses BESIDE its `right` slot.** The slot is documented as holding
+a control, and a button may not contain one: `<button>` inside `<button>` is invalid HTML and
+buries a second tab stop and a second accessible name inside one control. The anatomy carries
+this rather than a prop opting into safety, so every call site already passing a control there
+is fixed without being touched, and it applies whether or not a slot is passed — `right` is
+routinely conditional, and an anatomy that flipped on that would make two rows in one list
+press differently. The one visible consequence: a DECORATIVE `right` (a badge, a chevron) is no
+longer part of the press target — the row still presses everywhere else.
+
+**The pointer cursor is now reserved for controls that ACT** — buttons, links, disclosures.
+Rows, menu options, cards, tabs, field triggers, checkboxes, switches, chips and calendar
+days all show the arrow. No API changes; every affected component is one you already use, so
+the only thing to expect is that the cursor stops changing over most of a screen. The rule and
+its reasoning are in `docs/composition.md` § The pointer cursor. If a component of your own
+needs the pointer, set `CURSOR_ACTION` in its style — and if it is built on the bare
+react-native `Pressable`, note that the pointer is what you get by DEFAULT, from
+react-native-web, unless you set `CURSOR_DEFAULT`.
+## 42.4.0 — `Picker` is named by its `FormField`, and its way back to empty has a name
+
+Two fixes to the same control, both about a thing on screen that the control did
+not actually say.
+
+### A `FormPicker` rendered a label the select was never associated with
+
+`Picker` never consumed `useFormField()`, so the label above it was decoration
+for sighted readers: the select announced its current value and no name.
+`NumberInput` and `TextInputField` had always consumed the binding;
+`FormDatePicker` and `FormSwitch` work around it by passing
+`accessibilityLabel={label}` down. `FormPicker` passed nothing, so it was the one
+wrapper whose control was anonymous.
+
+`Picker` now takes `id` / `aria-labelledby` / `aria-describedby` / `aria-invalid`
+from the enclosing field, exactly as the other two inputs do — so a `FormField`'s
+description, warning and error are announced with it as well. An explicit
+`accessibilityLabel` still applies OUTSIDE a field and is ignored inside one,
+because an aria-label diverging from the visible text is what breaks
+label-in-name. Nothing to change at a call site; a bare `Picker` is unaffected.
+
+### The way back to empty has a name
+
+Not a type break, but it changes text you will see: every `Picker` with
+`includeEmptyOption` used to render its empty row **unlabelled once a value was selected**,
+and that row is the only way to clear the field. So the control offered a blank line as its
+escape, at precisely the moment the reader needed it — and every select cell editor, form
+select and filter condition in an app inherited that.
+
+The row is now named. `includeEmptyOption` declares empty a **choice**, and a choice the
+reader picks the way they pick any other row has to read like one: it takes the locale pack's
+word (`picker.emptyOption` — "None" / "Không có") and keeps it whether or not something is
+selected. Override per instance with the new **`emptyOptionLabel`** when the field has a
+truer word ("No skill", "Unassigned").
+
+`placeholder` is unchanged and stays a different job: the hint shown while nothing is chosen,
+which disappears on selection. It is no longer consulted when the row is a choice, so a call
+site passing `placeholder` **as** the empty option's name should move that string to
+`emptyOptionLabel`. Nothing else has to change — no existing caller in this repo passed one,
+which is why they were all rendering blanks.
+
 ## 42.0.0 — `DateFilter`'s presets are a listbox, and "Custom" is not one of them
 
 Three defects with one root: the preset row used EMPHASIS to mean "current state", inside a

package/docs/catalog.md

@@ -765,7 +765,17 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 ### Pickers & selection controls
 
 - **`picker`** — `Picker`: native `<select>`, plain label-only single, native typeahead;
-  also home of the shared `PickerOption` type.
+  also home of the shared `PickerOption` type. Its empty row does one of two jobs and they
+  are not interchangeable: `includeEmptyOption` makes empty a **choice** the reader picks to
+  clear the field, so it is NAMED ("None", from the locale pack; override per instance with
+  `emptyOptionLabel`) and keeps that name after a selection — a name that disappears once
+  something is chosen is missing exactly when it is the only route back to empty. Without
+  that flag the row is a **placeholder**: it carries `placeholder` and leaves on selection.
+  Don't reach for `placeholder` to name a choice — a hint and a value read differently.
+  Inside a `FormField` (so inside `FormPicker`) it takes its NAME from the visible label
+  via the field's binding, along with the description/warning/error — pass `accessibilityLabel`
+  only for a bare `Picker` with no label beside it, since inside a field an aria-label that
+  differs from the visible text is what breaks label-in-name.
 - **`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`. Its trigger is `role="combobox"` (a `<div>`), never
@@ -778,7 +788,12 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   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.
+  typeahead; host it directly in a `Popover`/`Dialog` for a command palette. A chosen row is
+  `selected`: the kit's `zinc.100` resting highlight AND `aria-selected`, one weight above the
+  `zinc.50` the keyboard/hover row takes — a check glyph alone said nothing to a screen reader.
+  It opens SCROLLED to its seat (the selected row in `search.mode:"none"`, else the first real
+  option), which only shows on a list longer than its own box and is the difference between a
+  96-row list opening on your value and opening at the top.
 - **`combobox`** — COMPOUND single-select editable search: `Combobox` root +
   `ComboboxInput` + `ComboboxContent`, optional `ComboboxEmpty`/`ComboboxFooter`,
   `useCombobox()`; over the shared option-list engine; browses on focus; no `multi` —
@@ -855,6 +870,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   localized weekday/month names via BCP-47 `locale`, `firstDayOfWeek` (default Monday),
   `ref.navigateToMonth`. The engine `DatePicker`/`DateFilter` wrap in field chrome — reach
   for it bare only when the calendar lives permanently on the surface, not behind a field.
+  While a range is OPEN (a start, no end), hovering a day fills the span it would close on,
+  across both months — including the day under the pointer, which a committed range draws
+  dark and a previewed one has nothing else to mark. It shares its open-ness test with the
+  click (`previewEndFor` beside `nextRangeSelection`), so the span shown is always the span
+  the next click produces; hovering backwards from the start previews just as well.
 - **`date_filter`** — `DateFilter`: the date+time period filter panel — presets
   (`PresetId`), calendar, optional time segments; the body `DateRangeFilterField` opens.
   **Every preset SETS a range** — the list holds no mode and no null case, so a hand-picked
@@ -870,10 +890,25 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   end that is still open.
 - **`date_range_filter_field`** — `DateRangeFilterField`: the register's period filter field
   (presets + footer + time-segment a11y; localized via the `dateRange` locale slice).
-- **`time_picker`** — `TimePicker`: the time-of-day field. Segments (hour / minute / AM-PM),
-  **12- vs 24-hour derived from `locale`** — never from the browser, which is why this is not
-  an `<input type="time">`. The value is always canonical 24-hour `"HH:mm"`; `locale` changes
-  only what is displayed and typed.
+- **`time_picker`** — `TimePicker`: the time-of-day FIELD. The value on a pressable
+  control (the bordered surface a `Select` uses, so it reads as pickable by the same
+  shape as every other field that opens something), and `TimeColumns` behind it.
+  **No text entry** — a glyph inside a field is indistinguishable from `DateField`'s
+  display-only calendar icon, and a day period is a choice between two named things
+  rather than a word to spell. `placeholder` covers the empty state (defaults to the
+  `chooseTime` label). The value is always canonical 24-hour `"HH:mm"`; `locale`
+  decides what is displayed AND the picker's shape.
+- **`time_columns`** — `TimeColumns`: the picking face — hour, minute, and a day
+  period **only where the locale uses one** (a 24-hour locale gets two columns and
+  hours 00–23). Every minute is offered, so no time is unreachable and no step has
+  to be chosen; each column commits on its own, so the value is always a real time
+  and there is no draft to confirm. Roving tabindex per column — Tab reaches a
+  column once, arrows move within it, and selection follows focus.
+- **`time_options`** — the columns' vocabulary, RN-free and pure: `decomposeTime` /
+  `composeTime` (the split into `displayHour` / `minute` / `pm` and back — a
+  12-hour locale's displayed hour means two different times and only the period
+  says which, which is why composing takes both), `hourOptions`, `minuteOptions`,
+  `dayPeriodOptions`, `dayPeriodLabels`, `formatTimeOfDay`, `timeToMinuteOfDay`.
 - **`deadline`** — the COUNTDOWN vocabulary, RN-free and pure: `daysUntil`, `countdownLabel`,
   `deadlineTone` / `deadlineColor`, `deadlineAnnotation`, `nearestDeadline` (+ `DeadlineLabels`,
   `DeadlineThresholds`, `Deadline`). Three contracts a screen must not invent for itself — how
@@ -1162,7 +1197,14 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 ### Lists, tables & registers
 
 - **`list`** — `List`: children separated by hairline `Divider`s.
-- **`list_item`** — `ListItem`: the plain list row.
+- **`list_item`** — `ListItem`: the plain list row. A pressable row with a `right` slot
+  presses BESIDE it, never around it: the slot holds a control, and a button may not contain
+  one — `<button>` inside `<button>` is invalid HTML and buries a second tab stop and name
+  inside one control. So the surface is a wrapper, the press target is `left` + the text, and
+  the slot sits outside it (the anatomy `InlineEditView`'s `actions` uses). ALWAYS, not only
+  when a slot is passed: `right` is routinely conditional, and an anatomy that flipped on that
+  would make two rows in one list press differently. Nothing to opt into — a decorative
+  `right` simply stops being part of the press target.
 - **`table`** — `Table` + `TableRow` + `TableCell`: the paginated high-volume register
   (columns defined once, `sortLabels` localizable; rows are `PressableRow`-based).
   CONTAINER-RESPONSIVE with no prop (measures itself, like `Breakdown`/`DetailTable`): when

package/docs/composition.md

@@ -396,7 +396,7 @@ shows a zinc-100 highlight; `marked` (a bulk-ticked row) a resting blue-50 tint.
 band + every row's cell widths derive from it and can't drift. ONE hairline under the header; the
 rows below it Divider-separated. A sortable column shows its `SortHeader` glyph ALWAYS (a neutral
 up/down glyph when unsorted) so it reads as sortable; pressing cycles none → asc → desc → none.
-A `TableRow` with no `onPress` renders a STATIC read-only row (no hover wash, no pointer cursor) —
+A `TableRow` with no `onPress` renders a STATIC read-only row (no hover wash) —
 so `Table` also serves read-only tabular data (a fee breakdown, a spec sheet), not just interactive
 registers. A pressable `TableRow` REQUIRES `accessibilityLabel` ("Open …") — its keyboard door is
 an empty overlay with no content to derive a name from.
@@ -966,6 +966,26 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   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.
 
+## The pointer cursor
+
+**Only a control that ACTS ON ITS OWN shows a pointer** — a button, a link, a disclosure.
+Everything else shows the arrow: a row, a menu option, a card, a tab, a field trigger, a
+checkbox, a switch, a chip. The line is not "is it pressable" (nearly everything is) but
+"does pressing it DO something, or does it set a value / open the thing you are already
+looking at".
+
+Drawn tightly because a signal on half the screen is not a signal. A pointer everywhere says
+only "this is a web page"; reserved, it marks the few things that act. What carries "you can
+press this" elsewhere is the hover treatment the surface already owns — a row's wash, a
+field's border, a chip's fill — which is what a native list or menu uses too, where the
+cursor stays an arrow throughout.
+
+The arrow is never the default and always has to be asked for: react-native-web ships
+`cursor: pointer` inside `Pressable`'s own base style, so a component that says nothing gets
+a pointer. `PressableHighlight` and `FocusRingPressable` set the arrow for everything built
+on them (`CURSOR_DEFAULT`); a component on the bare `Pressable` sets it itself, and the few
+that act set `CURSOR_ACTION` back over the top.
+
 ## Color discipline — solid / tint / ramp + ONE accent
 
 Every status / data-viz / accent color comes from a NAMED helper (`@lotics/ui/colors`), never a

package/docs/data_entry.md

@@ -123,7 +123,7 @@ dialog save, a debounced autosave).
 ### Keyboard entry — type → Tab → type
 
 Bulk entry never needs the mouse. KEYBOARD focus (Tab / Shift+Tab) landing on a closed
-SWAP editor — `InlineNumberInput`, `InlineTimePicker`, `InlineDatePicker` — opens edit mode
+SWAP editor — `InlineNumberInput`, `InlineDatePicker` — opens edit mode
 immediately with the input focused; commit-on-blur then makes Tab itself the commit, so the chain
 is type → Tab → type with the next editor already open. Pointer focus never auto-opens (mousedown
 records "pointer" modality before focus fires — `interaction_modality.ts`), so the click path is
@@ -172,21 +172,26 @@ One per type:
 - **`InlineDatePicker`** — `format="datetime"` for always-on time; `optionalTime` to let the user
   ADD/REMOVE a time — the value's own shape, date vs datetime, is the source of truth
   (`optionalTime` is ignored when `format="datetime"`).
-- **`InlineTimePicker`** — a time-only value.
+- **`InlineTimePicker`** — a time-only value, PICKED: the value at rest, the hour /
+  minute / period columns in a popover anchored to the field, committing when the
+  popover closes. On the POPOVER shell beside `InlineDatePicker`, not the typed one
+  — `useInlineEdit` commits when the field blurs, and a picker cannot live there,
+  because opening one moves focus into it, which reads as a blur and unmounts the
+  editor before the picker can paint.
 - **`InlineSelect multi`** — the MULTI mode of `InlineSelect` (there's no separate tag component):
   a tag SET (`value: T[]`), selected tags render as badges inside the standard chip, clicking floats
   a multi `OptionList` (checkbox rows), CLOSING commits the new set in one `onSave` — never a borderless `Select` posing as an inline
   field.
 
 They split across two shared shells. The same-height **typed** editors (`InlineTextInput`,
-`InlineNumberInput`, `InlineTimePicker`) render **`InlineEditFrame`** driven by the
+`InlineNumberInput`) render **`InlineEditFrame`** driven by the
 **`useInlineEdit`** hook (the draft buffer, async save, and — for the two that swap — the view⇄edit
 toggle) — pass a custom input to that pair to join the family. On the frame, **`editing` means an
 input is MOUNTED** (which element renders, and whether the surface drops its resting padding to
 host one); an always-mounted editor passes it constant and passes the real state as **`editOpen`**,
 which the ✓/✕ verbs read — they assert "there is an edit to accept or reject", so on a resting
 field they would be both a false claim and dead buttons. The **popover** editors (`InlineSelect`,
-`InlineMemberSelect`, `InlineDatePicker`) instead compose **`InlineEditView`**
+`InlineMemberSelect`, `InlineDatePicker`, `InlineTimePicker`) instead compose **`InlineEditView`**
 (the resting box, wired as the popover trigger) with their OWN `useState` for open/draft/saving/
 error — a pick, not a keystroke, is the edit, so `useInlineEdit` doesn't fit. `onSave` is async
 either way: the saving spinner sits INSIDE the control at its right edge (never a sibling — that

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "42.3.0",
+  "version": "43.0.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -244,6 +244,8 @@
     "./date_filter": "./src/date_filter.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
     "./time_picker": "./src/time_picker.tsx",
+    "./time_options": "./src/time_options.ts",
+    "./time_columns": "./src/time_columns.tsx",
     "./date_calendar": "./src/date_calendar.tsx",
     "./dialog": "./src/dialog.tsx",
     "./drawer": "./src/drawer.tsx",

package/src/back_button.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { Icon } from "./icon";
 import { Text } from "./text";
 import { colors } from "./colors";
+import { CURSOR_ACTION } from "./control_surface";
 import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
 
@@ -44,7 +45,9 @@ export function BackButton(props: BackButtonProps) {
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
       onPress={onPress}
-      style={{ flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start", borderRadius: 999, paddingRight: 14 }}
+      // Going back ACTS, exactly as the bare variant's `IconButton` does —
+      // without this, one component shows two cursors decided by a label.
+      style={{ cursor: CURSOR_ACTION, flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start", borderRadius: 999, paddingRight: 14 }}
     >
       <View style={{ width: 40, height: 40, borderRadius: 999, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
         <Icon name="chevron-left" size={20} color={colors.zinc[900]} />

package/src/check_circle.tsx

@@ -118,8 +118,7 @@ const styles = StyleSheet.create({
   tap: {
     alignItems: "center",
     justifyContent: "center",
-    // @ts-ignore rn-web
-    cursor: "pointer",
+    cursor: "auto",
   },
   disabled: { opacity: 0.4 },
   ring: {

package/src/checkbox_input.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { Pressable } from "react-native";
 import { Checkbox } from "./checkbox";
-import { FOCUS_RING } from "./control_surface";
+import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
 interface CheckboxInputProps {
   /**
@@ -32,7 +32,7 @@ export function CheckboxInput(props: CheckboxInputProps) {
       onPress={handlePress}
       disabled={disabled}
       {...focusProps}
-      style={[{ opacity: disabled ? 0.5 : 1, borderRadius: 6 }, focusVisible && { boxShadow: FOCUS_RING }]}
+      style={[{ opacity: disabled ? 0.5 : 1, borderRadius: 6, cursor: CURSOR_DEFAULT }, focusVisible && { boxShadow: FOCUS_RING }]}
       // Use the W3C ARIA props directly: RN-web 0.21 no longer maps
       // `accessibilityState={{ checked }}` to `aria-checked`, which dropped the
       // checked state from the accessibility tree (a role="checkbox" with no

package/src/choice_list.tsx

@@ -6,7 +6,7 @@ import { Icon } from "./icon";
 import { Divider } from "./divider";
 import { composeHandler, useFocusRing } from "./use_focus_ring";
 import { useHover } from "./use_hover";
-import { CONTROL_RADIUS, FOCUS_RING, ROW_WASH_BLEED } from "./control_surface";
+import { CONTROL_RADIUS, CURSOR_DEFAULT, FOCUS_RING, ROW_WASH_BLEED } from "./control_surface";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { fontFamilyMedium, getInputTextStyle } from "./text_utils";
 import { useLoticsLocale } from "./locale";
@@ -55,7 +55,7 @@ function ChoiceRow({ option, selected, onSelect }: { option: ChoiceOption; selec
         // Bleeds like every other washed row, so the option TEXT sits on the
         // container's edge — level with the question above it, which no longer
         // has to hand-pad itself to match.
-        { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 14, paddingHorizontal: ROW_WASH_BLEED, marginHorizontal: -ROW_WASH_BLEED, borderRadius: CONTROL_RADIUS },
+        { cursor: CURSOR_DEFAULT, flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 14, paddingHorizontal: ROW_WASH_BLEED, marginHorizontal: -ROW_WASH_BLEED, borderRadius: CONTROL_RADIUS },
         // Selected reads as a persistent tint (zinc-100); an unselected row only
         // washes on hover (zinc-50). The check below reserves its slot always.
         selected ? { backgroundColor: colors.zinc[100] } : hovered || pressed ? { backgroundColor: colors.zinc[50] } : null,

package/src/comments_button.tsx

@@ -2,7 +2,7 @@ import { StyleSheet, type GestureResponderEvent } from "react-native";
 import { colors } from "./colors";
 import { Icon } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
-import { ROW_CONTROL_HOVER, ROW_CONTROL_PRESS } from "./control_surface";
+import { CURSOR_ACTION, ROW_CONTROL_HOVER, ROW_CONTROL_PRESS } from "./control_surface";
 import { Text } from "./text";
 import { useLoticsLocale } from "./locale";
 
@@ -105,6 +105,8 @@ export function CommentsButton(props: CommentsButtonProps) {
 
 const styles = StyleSheet.create({
   button: {
+    // Opening the thread ACTS — see `CURSOR_ACTION`.
+    cursor: CURSOR_ACTION,
     flexDirection: "row",
     alignItems: "center",
     // Tight: the glyph and its number are ONE word, not two things in a row.

package/src/control_surface.ts

@@ -159,3 +159,30 @@ export function chipSurfaceStyle(
     boxShadow: selected ? `0 0 0 1px ${colors.zinc[900]}` : undefined,
   };
 }
+
+/**
+ * Which controls show a POINTER, and which show the arrow.
+ *
+ * **Only a control that ACTS ON ITS OWN gets the pointer** — a button, a link, a
+ * disclosure. Everything else takes the arrow: a row, a menu option, a card, a
+ * tab, a field trigger, a checkbox, a switch, a chip. The line is not "is it
+ * pressable" (nearly everything here is) but "does pressing it DO something, or
+ * does it set a value / open the thing you are already looking at".
+ *
+ * The reason to draw it tightly is that a signal on half the screen is not a
+ * signal. A pointer everywhere says only "this is a web page"; reserved, it
+ * marks the handful of things that act. What carries "you can press this"
+ * elsewhere is the hover treatment each surface already owns — a row's wash, a
+ * field's border, a chip's fill — which is the affordance a native list or menu
+ * uses too, where the cursor stays an arrow throughout.
+ *
+ * **The arrow is never the default and always has to be asked for.**
+ * react-native-web ships `cursor: pointer` inside `Pressable`'s own base style,
+ * so a component that says nothing gets a pointer. `PressableHighlight` and
+ * `FocusRingPressable` set the arrow for everything built on them, and a
+ * component on the bare `Pressable` sets it itself; the few that act set
+ * {@link CURSOR_ACTION} back over the top.
+ */
+export const CURSOR_DEFAULT = "auto";
+/** For a button, a link, a disclosure — see {@link CURSOR_DEFAULT}. */
+export const CURSOR_ACTION = "pointer";

package/src/data_grid.tsx

@@ -185,7 +185,7 @@ const styles = StyleSheet.create({
   // Padded for the hover pill but zero-width in flow (negative margin), so the label
   // sits on its cell's edge instead of 8px inside it.
   sortLabel: { flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 6, marginHorizontal: -6, paddingVertical: 2, borderRadius: 6 },
-  sortLabelPressable: { cursor: "pointer" },
+  sortLabelPressable: { cursor: "auto" },
   sortLabelHover: { backgroundColor: colors.zinc[50] },
   groupSep: { borderTopWidth: 1, borderTopColor: colors.zinc[100], marginTop: 8, paddingTop: 8 },
   section: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 8, marginHorizontal: -8, paddingVertical: 7, borderRadius: 8 },