@lotics/ui 16.0.0 → 16.2.0

package/src/checklist.tsx

@@ -1,15 +1,28 @@
-import { createContext, useContext, type ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
+import { createContext, useCallback, useContext, useId, useRef, useState, type ReactNode } from "react";
+import { StyleSheet, View, type NativeSyntheticEvent, type TextInputKeyPressEventData } from "react-native";
 import { ActionMenu, type ActionMenuItem } from "./action_menu";
+import { ActivityIndicator } from "./activity_indicator";
+import { CheckboxInput } from "./checkbox_input";
+import { colors } from "./colors";
+import { CONTROL_RADIUS, CONTROL_TRANSITION } from "./control_surface";
+import { FocusRingPressable } from "./focus_ring_pressable";
+import { Icon } from "./icon";
+import { IconButton } from "./icon_button";
+import { useInlineEdit, useInlineEditFocusRestore } from "./inline_edit";
+import { useLoticsLocale } from "./locale";
+import { Text } from "./text";
+import { TextInputField } from "./text_input_field";
 
 // The record-scoped CHECKLIST — the compound that owns the list's GEOMETRY
-// (row height, control/title alignment, the meta/expansion indent, one
-// trailing column width) while the CONTENT stays composed: tasks (a
+// (row height, control/title alignment, the note/meta/subtask/expansion
+// indent, one trailing column width) while the CONTENT stays composed: tasks (a
 // `CheckCircle` in `control`, a struck `InlineTextInput` title) and PICKER
 // rows (a `CheckboxInput` in `control` — set `controlWidth={24}` — with a
 // readiness `meta` line and a fill editor in `expansion`) are the same
-// anatomy. `menu` carries the row's ⋯ options (Delete lives BEHIND the menu
-// — indirection that prevents
+// anatomy. `note` is the row's own free-text second line (see
+// {@link ChecklistRowNote}) and `subtasks` its collapsible CHILD steps (see
+// {@link ChecklistRowSubtasks}). `menu` carries the row's ⋯ options (Delete lives
+// BEHIND the menu — indirection that prevents
 // accidental destructive taps). Suggested tasks are NOT rows: offer the record
 // type's commons as `SuggestionChip`s under the list (tap = materialize,
 // ✕ = dismiss) — a pill can't be mistaken for a task. `CaptureRow` closes the
@@ -19,6 +32,9 @@ import { ActionMenu, type ActionMenuItem } from "./action_menu";
 //
 //   <Checklist trailingWidth={140}>
 //     <ChecklistRow control={<CheckCircle …/>} trailing={<InlineMemberSelect …/>}
+//                   note={{ value: task.note, onSave: (v) => saveNote(task.id, v) }}
+//                   subtasks={{ items: task.steps.map((s) => ({ key: s.id, label: s.label,
+//                                 checked: s.done, onToggle: (on) => toggleStep(s.id, on) })) }}
 //                   menu={{ items: [{ key: "delete", label: "Delete task", danger: true, … }],
 //                           accessibilityLabel: "Task options: …" }}>
 //       <InlineTextInput variant="cell" struck={done} … />
@@ -39,8 +55,9 @@ export interface ChecklistProps {
    *  once so the column lines up; omit when rows carry no trailing. */
   trailingWidth?: number;
   /** Width of every row's leading control — `CheckCircle` 20 (the default),
-   *  `CheckboxInput` 24. The `meta`/`expansion` indent derives from it, so
-   *  the second line always sits on the title's text edge. */
+   *  `CheckboxInput` 24. The `note`/`meta`/`subtasks`/`expansion` indent
+   *  derives from it, so every second line and child row sits on the title's
+   *  text edge. */
   controlWidth?: number;
   children: ReactNode;
 }
@@ -54,20 +71,100 @@ export function Checklist(props: ChecklistProps) {
   );
 }
 
+/** The row's own NOTE — the free-text second line a checklist item needs
+ *  ("waiting on the signed copy") without promoting it to a record. One
+ *  contract, so the muted line, the tap-to-edit, the removal, and the empty-row
+ *  add affordance behave identically in every app. */
+export interface ChecklistRowNote {
+  /** The note text. `""` = the row has NO note: the line is absent and a small
+   *  add affordance sits on the row instead. */
+  value: string;
+  /** Persist the edited note. An EMPTY value REMOVES the note (`onSave("")`) —
+   *  clearing the text IS the delete gesture, so the note needs no ⋯ entry of
+   *  its own. Whitespace-only input is trimmed to `""` first. May be async: the
+   *  line shows a saving spinner and surfaces a thrown error inline, staying
+   *  open so the typing isn't lost. */
+  onSave: (next: string) => void | Promise<void>;
+  /** Accessible name (and tooltip) of the add affordance; defaults to the
+   *  locale's `checklist.addNote`. Name the ROW when the list is long
+   *  ("Add note: Book the carrier"). */
+  addLabel?: string;
+  /** Accessible name of the note line's press target; defaults to the locale's
+   *  `checklist.editNote`, which WRAPS the note text so the line is announced
+   *  with it ("Edit note: waiting on the signed copy"). */
+  editLabel?: string;
+  /** The editor's placeholder; defaults to the locale's
+   *  `checklist.notePlaceholder`. */
+  placeholder?: string;
+}
+
+/** ONE child step under a checklist row: a checkbox and a short label, and
+ *  deliberately NOTHING else — no note, no assignee, no ⋯ menu. A step that
+ *  needs any of those is a TASK, so promote it to a row of its own rather than
+ *  growing a second row anatomy inside the first. */
+export interface ChecklistSubtask {
+  /** Stable identity — the React key, and what the caller patches on toggle. */
+  key: string;
+  /** The step's title AND its checkbox's accessible name. Keep it to a phrase:
+   *  a child row has no second line to overflow into. */
+  label: string;
+  checked: boolean;
+  onToggle: (checked: boolean) => void;
+}
+
+/** The row's collapsible CHILD STEPS — the "3 things this one task is made of"
+ *  that apps otherwise hand-roll as indented rows with a bespoke chevron. One
+ *  contract, so the expander, the remaining-count, the indent, and the
+ *  announcement behave identically in every app. */
+export interface ChecklistRowSubtasks {
+  /** The child steps — see {@link ChecklistSubtask}. EMPTY renders nothing at
+   *  all (not even the expander): an affordance that opens onto nothing is
+   *  noise, so a row with no steps is indistinguishable from one that can't
+   *  have them. */
+  items: ChecklistSubtask[];
+  /** CONTROLLED expansion. Omit it and the ROW owns the state: open on mount
+   *  while ANY step is unchecked, closed when they're all done — and the
+   *  user's toggle wins from then on, so checking the last step never yanks
+   *  the list shut under the pointer. */
+  expanded?: boolean;
+  /** Fires with the NEXT state on every expander press — in BOTH modes, so an
+   *  uncontrolled row can still persist "the user opened this one". */
+  onToggleExpanded?: (open: boolean) => void;
+  /** Accessible name of the expander, given the count of UNCHECKED steps;
+   *  defaults to the locale's `checklist.subtasks`, which takes the same
+   *  argument. Name the ROW when the list is long ("Steps · Book the carrier:
+   *  2 left"). The open/closed STATE is NOT its job — `aria-expanded` carries
+   *  that, and a name that flips on toggle re-announces the whole control. */
+  countLabel?: (missing: number) => string;
+}
+
 interface ChecklistRowBaseProps {
   /** The leading toggle — a `CheckCircle` (omit `onChange` for a read-only ring). */
   control: ReactNode;
   /** The title — a struck transparent `InlineTextInput`, or plain `Text`. */
   children: ReactNode;
+  /** The row's free-text second line — see {@link ChecklistRowNote}. It sits
+   *  directly under the title (above `meta`) on the title's text edge, ALWAYS
+   *  visible — never behind `expansion`, because a note the reader must open to
+   *  see gets written twice. Composes with `trailing` AND `meta`: the note is a
+   *  second LINE, not a replacement for either. */
+  note?: ChecklistRowNote;
   /** The row's ⋯ options menu (destructive items last, `danger: true`) —
    *  Delete lives HERE, never as a bare ✕ on the row, so a stray tap can't
    *  destroy a task. Name the task in the label ("Task options: Book the
    *  carrier"). The ⋯ column aligns only when every row in the list carries
    *  a menu — keep its presence uniform per list. */
   menu?: { items: ActionMenuItem[]; accessibilityLabel: string };
-  /** A BLOCK slot under the row (below `meta`), indented to the title's text
-   *  edge — a transient inline fill editor, a drill-down. Render it only
-   *  while open; the list's geometry (the indent) is owned here. */
+  /** The row's collapsible CHILD STEPS — see {@link ChecklistRowSubtasks}. The
+   *  parent grows a chevron expander (with the unchecked count beside it) on
+   *  the TRAILING side of the title, never a leading one: the leading slot is
+   *  `control`, and a chevron there would push the title off the text edge on
+   *  the rows that have no steps. */
+  subtasks?: ChecklistRowSubtasks;
+  /** A BLOCK slot under the row (below `meta` and the open `subtasks`),
+   *  indented to the title's text edge — a transient inline fill editor, a
+   *  drill-down. Render it only while open; the list's geometry (the indent)
+   *  is owned here. */
   expansion?: ReactNode;
 }
 
@@ -88,23 +185,166 @@ export type ChecklistRowProps = ChecklistRowBaseProps &
       }
   );
 
-/** One checklist line: control · title (flex) · the aligned trailing cell · ⋯,
- *  with an optional indented `meta` line below for narrow surfaces and an
- *  optional `expansion` block under that (both sit on the title's text edge). */
+/** One checklist line: control · title (flex) · the subtask expander · the note
+ *  affordance · the aligned trailing cell · ⋯, with the optional `note` line
+ *  below it, an optional indented `meta` line for narrow surfaces, the expanded
+ *  `subtasks`, and an optional `expansion` block under that (all of them sit on
+ *  the title's text edge). */
 export function ChecklistRow(props: ChecklistRowProps) {
-  const { control, children, trailing, menu, meta, expansion } = props;
+  const { control, children, trailing, menu, meta, note, subtasks, expansion } = props;
   const { trailingWidth, controlWidth } = useContext(ChecklistContext);
-  // Indent past the control + the row gap so meta/expansion align with the title.
+  const labels = useLoticsLocale().checklist;
+  // The title names the subtask GROUP (`aria-labelledby`), so a screen reader
+  // announces the children under the parent they belong to instead of as a run
+  // of loose checkboxes.
+  const titleId = useId();
+  const subtaskItems = subtasks?.items;
+  const missing = subtaskItems == null ? 0 : subtaskItems.reduce((n, item) => (item.checked ? n : n + 1), 0);
+  // Uncontrolled expansion is seeded ONCE (lazily): a row with work left opens,
+  // and the user owns it from then on. Re-deriving it every render would slam
+  // the panel shut the instant the last step is checked — mid-interaction.
+  const [selfExpanded, setSelfExpanded] = useState(() => subtaskItems?.some((item) => !item.checked) ?? false);
+  const expanded = subtasks?.expanded ?? selfExpanded;
+  const toggleSubtasks = useCallback(() => {
+    const next = !expanded;
+    setSelfExpanded(next);
+    subtasks?.onToggleExpanded?.(next);
+  }, [expanded, subtasks]);
+  // ONE editor per row, opened by either note affordance (the add button on an
+  // empty row, or a press on the note line itself). The optional call is
+  // unreachable without a `note` — nothing that opens the editor renders then.
+  const noteEdit = useInlineEdit<string>({ value: note?.value ?? "", onSave: (next) => note?.onSave(next) });
+  // Whichever resting affordance is mounted (the line, or the add button once
+  // the note is removed) takes focus back when a keyboard close drops it.
+  const noteRestRef = useRef<View>(null);
+  useInlineEditFocusRestore(
+    noteEdit.editing,
+    useCallback(() => noteRestRef.current?.focus(), []),
+  );
+  // A note is trimmed on the way out, so trailing whitespace never fakes a note
+  // and a whitespace-only entry lands as the removal (`""`).
+  const commitNote = useCallback(() => void noteEdit.commit(noteEdit.draft.trim()), [noteEdit]);
+  const onNoteKeyPress = useCallback(
+    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      const key = e.nativeEvent.key;
+      if (key === "Escape") noteEdit.cancel();
+      else if (key === "Enter") commitNote();
+    },
+    [noteEdit, commitNote],
+  );
+  const notePlaceholder = note?.placeholder ?? labels.notePlaceholder;
+  // Indent past the control + the row gap so note/meta/expansion align with the title.
   const indent = controlWidth + 12;
   return (
     <View>
       <View style={styles.row}>
         {control}
-        <View style={styles.title}>{children}</View>
+        <View style={styles.title} nativeID={titleId}>
+          {children}
+        </View>
+        {/* The DISCLOSURE: one stable name + `aria-expanded` for the state (a
+            name that flips on toggle re-announces the whole control), and the
+            remaining count beside the chevron — a collapsed row's only signal
+            that work hangs below it. */}
+        {subtaskItems != null && subtaskItems.length > 0 ? (
+          <FocusRingPressable
+            onPress={toggleSubtasks}
+            accessibilityRole="button"
+            accessibilityLabel={subtasks?.countLabel?.(missing) ?? labels.subtasks(missing)}
+            aria-expanded={expanded}
+            userSelect="none"
+            style={(state) => [styles.expander, CONTROL_TRANSITION, state.hovered ? styles.expanderHovered : null]}
+          >
+            <Icon name={expanded ? "chevron-down" : "chevron-right"} size={14} color={colors.zinc[400]} />
+            {missing > 0 ? (
+              <Text size="xs" color="muted" tabular>
+                {missing}
+              </Text>
+            ) : null}
+          </FocusRingPressable>
+        ) : null}
+        {/* The add affordance stands in for the missing line — always visible
+            (not hover-only: a hidden note affordance is undiscoverable, and
+            unreachable by touch), quiet enough to stay out of the row's scan. */}
+        {note != null && note.value === "" && !noteEdit.editing ? (
+          <IconButton
+            ref={noteRestRef}
+            icon="sticky-note"
+            size="sm"
+            iconColor={colors.zinc[400]}
+            // The tooltip IS the accessible name (`IconButton` falls back to it).
+            tooltip={note.addLabel ?? labels.addNote}
+            onPress={noteEdit.begin}
+          />
+        ) : null}
         {trailing != null ? <View style={trailingWidth != null ? { width: trailingWidth } : null}>{trailing}</View> : null}
         {menu != null ? <ActionMenu items={menu.items} accessibilityLabel={menu.accessibilityLabel} /> : null}
       </View>
+      {note != null && (noteEdit.editing || note.value !== "") ? (
+        <View style={[styles.note, { paddingLeft: indent }]}>
+          {noteEdit.editing ? (
+            <View>
+              <View style={styles.noteEditor}>
+                <TextInputField
+                  value={noteEdit.draft}
+                  onChangeText={noteEdit.setDraft}
+                  onBlur={commitNote}
+                  onKeyPress={onNoteKeyPress}
+                  autoFocus
+                  placeholder={notePlaceholder}
+                  accessibilityLabel={notePlaceholder}
+                  style={styles.noteInput}
+                />
+                {/* The spinner floats inside the field's right edge — an async
+                    save must never resize the line. */}
+                {noteEdit.saving ? (
+                  <View style={styles.noteSaving} pointerEvents="none">
+                    <ActivityIndicator size={14} color={colors.zinc[400]} />
+                  </View>
+                ) : null}
+              </View>
+              {noteEdit.error ? (
+                <Text size="xs" color="danger" style={styles.noteError}>
+                  {noteEdit.error}
+                </Text>
+              ) : null}
+            </View>
+          ) : (
+            <FocusRingPressable
+              ref={noteRestRef}
+              onPress={noteEdit.begin}
+              accessibilityRole="button"
+              accessibilityLabel={note.editLabel ?? labels.editNote(note.value)}
+              userSelect="none"
+              // An editable VALUE, not a button: the arrow cursor stays and the
+              // hover is the dense-cell wash (the `InlineEditView` language).
+              style={(state) => [styles.noteLine, CONTROL_TRANSITION, state.hovered ? styles.noteLineHovered : null]}
+            >
+              <Text size="xs" color="muted">
+                {note.value}
+              </Text>
+            </FocusRingPressable>
+          )}
+        </View>
+      ) : null}
       {meta != null ? <View style={[styles.meta, { paddingLeft: indent }]}>{meta}</View> : null}
+      {subtaskItems != null && subtaskItems.length > 0 && expanded ? (
+        <View style={[styles.subtasks, { paddingLeft: indent }]} role="group" aria-labelledby={titleId}>
+          {subtaskItems.map((item) => (
+            <View key={item.key} style={styles.subtask}>
+              <CheckboxInput checked={item.checked} onChange={item.onToggle} accessibilityLabel={item.label} />
+              <Text
+                size="sm"
+                color={item.checked ? "muted" : "default"}
+                decoration={item.checked ? "lineThrough" : undefined}
+                style={styles.subtaskLabel}
+              >
+                {item.label}
+              </Text>
+            </View>
+          ))}
+        </View>
+      ) : null}
       {expansion != null ? <View style={[styles.expansion, { paddingLeft: indent }]}>{expansion}</View> : null}
     </View>
   );
@@ -114,6 +354,24 @@ const styles = StyleSheet.create({
   list: { gap: 4 },
   row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
   title: { flex: 1 },
+  note: { paddingBottom: 2 },
+  // Resting and editing occupy the SAME 28px band on the title's text inset,
+  // so opening the note never nudges the rows below it.
+  noteLine: { alignSelf: "flex-start", minHeight: 28, justifyContent: "center", borderRadius: CONTROL_RADIUS, paddingHorizontal: 8, paddingVertical: 4, cursor: "auto" },
+  noteLineHovered: { backgroundColor: colors.zinc[100] },
+  noteEditor: { position: "relative" },
+  noteInput: { borderWidth: 0, backgroundColor: "transparent", height: 28, paddingVertical: 2, paddingHorizontal: 8 },
+  noteSaving: { position: "absolute", right: 8, top: 0, bottom: 0, justifyContent: "center" },
+  noteError: { paddingHorizontal: 8 },
+  // The expander rides the row's 24px affordance band beside the note button —
+  // never the leading edge, which belongs to `control`.
+  expander: { flexDirection: "row", alignItems: "center", gap: 2, height: 24, paddingHorizontal: 4, borderRadius: CONTROL_RADIUS },
+  expanderHovered: { backgroundColor: colors.zinc[100] },
   meta: { paddingBottom: 4, flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 2 },
+  // Child rows are DENSER than the parent (24 vs 32): the indent alone doesn't
+  // read as subordinate on a long list — the rhythm has to say it too.
+  subtasks: { paddingTop: 2, paddingBottom: 4, gap: 2 },
+  subtask: { flexDirection: "row", alignItems: "center", gap: 8, minHeight: 24 },
+  subtaskLabel: { flex: 1 },
   expansion: { paddingTop: 2, paddingBottom: 6 },
 });

package/src/date_picker.tsx

@@ -48,6 +48,10 @@ export interface DatePickerLabels extends SegmentLabels {
   startTime: string;
   /** Accessible name for the end-time field (datetime range). */
   endTime: string;
+  /** Accessible name for the start-date segment group (range formats). */
+  startDate: string;
+  /** Accessible name for the end-date segment group (range formats). */
+  endDate: string;
   /** Footer action: commit and close the popover. */
   done: string;
   /** Inline error when a typed date is left incomplete/invalid (never committed). */
@@ -79,6 +83,11 @@ export interface DatePickerProps {
   locale?: string;
   /** Shown in the field when nothing is selected yet. */
   placeholder?: string;
+  /** Accessible name for the field's segment group (both groups on a range,
+   *  suffixed with the start/end names). `FormDatePicker` defaults it to its own
+   *  visible label; a bare `DatePicker` must be given one — a visible label
+   *  beside the field is not programmatically associated. */
+  accessibilityLabel?: string;
 }
 
 // =============================================================================
@@ -328,6 +337,7 @@ export function DatePicker(props: DatePickerProps) {
     labels,
     locale,
     placeholder,
+    accessibilityLabel,
   } = props;
 
   const isRange = isRangeFormat(format);
@@ -385,10 +395,21 @@ export function DatePicker(props: DatePickerProps) {
     <Icon name="calendar" size={20} color={disabled ? colors.zinc["300"] : colors.zinc["400"]} />
   );
 
+  // Each segment group's accessible name. A range names both halves even without
+  // a field label — an unnamed pair of identical-looking groups is unnavigable.
+  const partLabels = isRange
+    ? ([mergedLabels.startDate, mergedLabels.endDate].map((part) =>
+        accessibilityLabel ? `${accessibilityLabel} — ${part}` : part,
+      ) as string[])
+    : accessibilityLabel
+      ? [accessibilityLabel]
+      : undefined;
+
   const trigger = (
     <DateField
       triggerRef={triggerRef}
       testID={testID}
+      partLabels={partLabels}
       parts={isRange ? halves : [value ?? ""]}
       onPartChange={isRange ? setHalf : (_, next) => onValueChange(next)}
       hasTime={hasTime}

package/src/detail_row.tsx

@@ -155,7 +155,11 @@ export function DetailRow(props: DetailRowProps) {
   const flatTuck = flat && annotated ? -Math.max(0, Math.round((minHeight - getInputLineHeight(false)) / 2)) : 0;
   const labelCell = (cellStyle: StyleProp<ViewStyle>) => (
     <View style={[styles.labelCell, { minHeight }, cellStyle]}>
-      <Text size={labelSize} color="muted" numberOfLines={1}>
+      {/* The label WRAPS inside its column — it is NEVER clipped. A field name
+          the reader can't finish is worse than a taller row, and a fixed
+          `labelWidth` guarantees the clip on every long name ("Registered
+          business address"), not just the odd one. */}
+      <Text size={labelSize} color="muted">
         {label}
       </Text>
     </View>
@@ -191,9 +195,9 @@ export function DetailRow(props: DetailRowProps) {
     // inline editor self-persists — only the look converges.
     return (
       <View style={styles.stackedRow}>
-        <Text weight="medium" numberOfLines={1}>
-          {label}
-        </Text>
+        {/* Wraps, like the horizontal label — a stacked row has the FULL width
+            to spend, so clipping here would be gratuitous. */}
+        <Text weight="medium">{label}</Text>
         {/* stacked wears the FORM grammar exactly: label · description ·
             control · warning · error (the `FormField` order) */}
         {description != null ? <Text color="muted">{description}</Text> : null}
@@ -259,6 +263,12 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   flexLabel: { flex: 1 },
+  // `center` is what makes a WRAPPED label align sanely, and it does both jobs
+  // with no measurement: a one-line label is shorter than the control band, so
+  // it centers on the control line (the alignment law); a wrapped label is as
+  // tall as the band or taller, so it fills it and its FIRST line tops out
+  // level with the value's first control line. Do not "fix" this to
+  // `flex-start` — that drops every single-line label to the band's top edge.
   labelCell: { justifyContent: "center" },
   // The first line of the value cell — the control centers in it exactly like
   // the label and trailing cells do.

package/src/form_date_picker.tsx

@@ -19,7 +19,9 @@ export function FormDatePicker(props: FormDatePickerProps) {
       optional={optional}
       optionalLabel={optionalLabel}
     >
-      <DatePicker {...datePickerProps} />
+      {/* The visible FormField label is not programmatically associated with the
+          segment inputs, so it doubles as the accessible name unless overridden. */}
+      <DatePicker accessibilityLabel={label} {...datePickerProps} />
     </FormField>
   );
 }

package/src/form_field.tsx

@@ -75,8 +75,11 @@ export function FormField(props: FormFieldProps & { children: React.ReactNode })
             justifyContent: "space-between",
           }}
         >
+          {/* The label WRAPS (same law as DetailRow) — a clamp plus a fixed row
+              width guaranteed the clip. The optional marker keeps its single
+              line and never shrinks; the label yields. */}
           {!!label && (
-            <Text nativeID={labelId} numberOfLines={1} weight="medium">
+            <Text nativeID={labelId} weight="medium" style={{ flexShrink: 1 }}>
               {label}
             </Text>
           )}

package/src/icon.tsx

@@ -176,6 +176,7 @@ import Square from "lucide-react-native/dist/esm/icons/square";
 import SquareCheck from "lucide-react-native/dist/esm/icons/square-check";
 import SquarePen from "lucide-react-native/dist/esm/icons/square-pen";
 import SquareSigma from "lucide-react-native/dist/esm/icons/square-sigma";
+import StickyNote from "lucide-react-native/dist/esm/icons/sticky-note";
 import Table from "lucide-react-native/dist/esm/icons/table";
 import Table2 from "lucide-react-native/dist/esm/icons/table-2";
 import Tag from "lucide-react-native/dist/esm/icons/tag";
@@ -372,6 +373,7 @@ const iconComponents = {
   "square-check": SquareCheck,
   "square-pen": SquarePen,
   "square-sigma": SquareSigma,
+  "sticky-note": StickyNote,
   table: Table,
   "table-2": Table2,
   tag: Tag,

package/src/icon_button.tsx

@@ -4,8 +4,9 @@ import { colors } from "./colors";
 import { PressableHighlight } from "./pressable_highlight";
 import { type ButtonColor } from "./button";
 import { getButtonIconColor } from "./button_colors";
-import { Ref, useCallback } from "react";
+import { Ref } from "react";
 import { TooltipSide } from "./tooltip";
+import { useGatedPress } from "./use_gated_press";
 
 interface IconButtonBase {
   ref?: Ref<View>;
@@ -61,14 +62,12 @@ export function IconButton(props: IconButtonProps) {
     style,
   } = props;
 
-  const handlePress = useCallback(
-    (event: GestureResponderEvent) => {
-      onPress?.(event);
-    },
-    [onPress],
-  );
+  // The press waits out an inline commit the same gesture started (pending_commits.ts)
+  // and reports busy while it does — `busy` drives the spinner + the double-press block.
+  const { handlePress, waiting } = useGatedPress<GestureResponderEvent>(onPress);
+  const busy = loading || waiting;
 
-  const disabledOrLoading = disabled || loading;
+  const disabledOrLoading = disabled || busy;
   const tint =
     iconColor ??
     (color === "none" ? colors.zinc[700] : color === "white" ? colors.white : getButtonIconColor(color));
@@ -88,7 +87,7 @@ export function IconButton(props: IconButtonProps) {
       // without shifting surrounding layouts.
       hitSlop={size === "lg" ? 0 : size === "sm" ? 8 : 6}
     >
-      {loading ? (
+      {busy ? (
         <ActivityIndicator size="small" color={tint} />
       ) : (
         <Icon size={size === "sm" ? 14 : size === "lg" ? 20 : 18} name={icon} color={tint} />

package/src/inline_edit.tsx

@@ -10,6 +10,7 @@ import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./
 import { fontFamilyRegular, getInputTextStyle, getTextColor, type TextColor } from "./text_utils";
 import { getInteractionModality } from "./interaction_modality";
 import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
+import { trackCommit } from "./pending_commits";
 
 /** The kit's standard control height (TextInputField, NumberInput, Picker, …).
  *  The view box matches it — same height, padding, and a 1px transparent border
@@ -69,7 +70,11 @@ export function useInlineEdit<T>(opts: {
       setSaving(true);
       setError(null);
       try {
-        await onSave(candidate);
+        // Registered so an action pressed in the SAME gesture (the press that caused
+        // this blur) waits for the write instead of reading the pre-edit record —
+        // see pending_commits.ts. The IIFE starts `onSave` synchronously, so the
+        // write still leaves on mousedown, and turns a sync throw into a rejection.
+        await trackCommit((async () => onSave(candidate))());
         setEditing(false);
       } catch (e) {
         // Stay in edit mode so the entry isn't lost — show the error, re-arm.
@@ -85,6 +90,34 @@ export function useInlineEdit<T>(opts: {
   return { editing, draft, setDraft, saving, error, begin, cancel, commit };
 }
 
+/**
+ * Keyboard TAB-ORDER continuity for any inline editor: when edit mode closes
+ * while its input still holds focus (Enter, Escape, a ✓/✕), the unmount drops
+ * focus to `<body>` and the next Tab would restart from the top of the page —
+ * so `restore` is called to put focus back on the RESTING control.
+ *
+ * Gated on KEYBOARD modality: a POINTER close also drops focus to `<body>`, but
+ * restoring there both steals focus from a mouse user AND — because a bare
+ * `.focus()` scrolls the target into view — jumps the scroll position. A mouse
+ * user has no "next Tab" to preserve. A Tab-away blur-commit leaves focus on the
+ * next field (not `<body>`), so this never steals focus back either.
+ */
+export function useInlineEditFocusRestore(editing: boolean, restore: () => void) {
+  const wasEditing = useRef(editing);
+  useEffect(() => {
+    if (
+      wasEditing.current &&
+      !editing &&
+      typeof document !== "undefined" &&
+      document.activeElement === document.body &&
+      shouldRestoreFocusOnClose(getInteractionModality())
+    ) {
+      restore();
+    }
+    wasEditing.current = editing;
+  }, [editing, restore]);
+}
+
 /** Which surface an inline editor lives on — the ONE axis that separates a FORM
  *  field from a data-grid CELL:
  *  - `"form"` (default): the zinc-50 chip at rest + a hover-BORDER. THE editability
@@ -238,7 +271,6 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
 
   const viewRef = useRef<View>(null);
   const suppressedAt = useRef<number | null>(null);
-  const wasEditing = useRef(editing);
 
   // Keyboard focus opens edit mode immediately; the input's own `autoFocus`
   // then moves focus into it. Pointer focus never lands here (mousedown records
@@ -250,32 +282,15 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     onBegin();
   }, [disabled, onBegin]);
 
-  // When edit mode closes while its input (or a ✓/✕ button) still holds focus —
-  // Enter, Escape, the buttons — the unmount drops focus to <body> and the next
-  // Tab would restart from the top of the page. Return focus to the view button,
-  // arming the suppression window so the programmatic focus doesn't re-open the
-  // editor it just closed. A Tab-away blur-commit leaves focus on the next field
-  // (not <body>), so this never steals focus back.
-  //
-  // Gate on KEYBOARD modality: this restore exists solely for keyboard Tab-order
-  // continuity. A POINTER close (click ✓/✕, or click away onto non-focusable
-  // space) also drops focus to <body>, but restoring it there both steals focus
-  // from a mouse user AND — because a bare `.focus()` scrolls the target into
-  // view — jumps the scroll position (often to the top of the page). A mouse
-  // user has no "next Tab" to preserve, so skip the restore for pointer closes.
-  useEffect(() => {
-    if (
-      wasEditing.current &&
-      !editing &&
-      typeof document !== "undefined" &&
-      document.activeElement === document.body &&
-      shouldRestoreFocusOnClose(getInteractionModality())
-    ) {
+  // Focus returns to the view button on a keyboard close, arming the suppression
+  // window so the programmatic focus doesn't re-open the editor it just closed.
+  useInlineEditFocusRestore(
+    editing,
+    useCallback(() => {
       suppressedAt.current = Date.now();
       viewRef.current?.focus();
-    }
-    wasEditing.current = editing;
-  }, [editing]);
+    }, []),
+  );
 
   if (!editing) {
     return (