@lotics/ui 16.2.0 → 17.0.1

package/src/task.tsx

@@ -0,0 +1,287 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+
+/**
+ * The TASK compound — a list of things to be done, at any depth and any layout.
+ *
+ * It replaces `Checklist`/`ChecklistRow`, which was a configuration object: eight slot props,
+ * a `trailing`/`meta` pair that was mutually exclusive BY TYPE so an author had to predict
+ * "wide surface" or "narrow" when writing the JSX, and a `subtasks` array of
+ * `{label, checked}` a child could never outgrow. Every new task layout arrived as another
+ * prop. Composition takes those decisions back:
+ *
+ *   <TaskList fieldsWidth={168}>
+ *     <TaskItem>
+ *       <TaskStatus><CheckCircle …/></TaskStatus>
+ *       <TaskTitle><InlineTextInput variant="cell" struck={done} …/></TaskTitle>
+ *       <TaskFields><InlineDatePicker …/><InlineMemberSelect …/></TaskFields>
+ *       <TaskActions><ActionMenu …/></TaskActions>
+ *       <TaskCaption>Waiting on the signed copy</TaskCaption>
+ *       <TaskDetail>…</TaskDetail>
+ *       <TaskList>…</TaskList>          ← subtasks ARE tasks
+ *     </TaskItem>
+ *   </TaskList>
+ *
+ * Two properties follow from the shape rather than from props:
+ *
+ * **A subtask is a task.** Nesting a `TaskList` inside a `TaskItem` makes the child recursive
+ * by construction, so it carries a due date, a menu, its own children — everything the parent
+ * has. The old array shape made "subtasks need X" a permanent ticket queue.
+ *
+ * **The row reflows on its own.** `TaskTitle` claims a readable minimum width; when the row
+ * cannot seat the title and the fields together, flex-wrap drops `TaskFields` onto its own
+ * line. That is intrinsic — no viewport query, no measurement — so it behaves the same in a
+ * drawer, a split pane and a phone, which a breakpoint cannot.
+ *
+ * **A value and a sentence are different things.** `TaskFields` holds the cells the reader
+ * edits and scans DOWN a column (due, assignee), sized once by the list so they stay a column;
+ * `TaskCaption` holds a sentence ABOUT the row ("Needs: Carrier, Vehicle plate") on its own
+ * line under the title. The first cut of this family merged them, which pushed prose into the
+ * value column where it aligned with nothing.
+ *
+ * There is deliberately no `note` slot. A task's free text is its title, a caption, or detail;
+ * a fourth place to write invited writing it twice.
+ */
+
+interface TaskListContextValue {
+  /** Width of the leading control column — nested lists and detail blocks indent by it. */
+  controlWidth: number;
+  /** Shared width of every row's field cluster, so the cells form a COLUMN. */
+  fieldsWidth?: number;
+  /** 0 at the root. Any value above 0 means "I am rendered inside a task". */
+  depth: number;
+  density: TaskDensity;
+}
+
+export type TaskDensity = "comfortable" | "dense";
+
+const TaskListContext = createContext<TaskListContextValue>({
+  controlWidth: 20,
+  depth: 0,
+  density: "comfortable",
+});
+
+/** Below this a title is unreadable, so the fields take their own line instead. */
+const TITLE_MIN_WIDTH = 180;
+/** The minimum comfortable tap target — a finger, not a pointer. */
+const TOUCH_TARGET = 44;
+/** A pointer-driven register trades the target for rows on screen. */
+const DENSE_ROW = 32;
+/** Horizontal rhythm between the row's slots. */
+const ROW_GAP = 12;
+/**
+ * How far a `variant="cell"` control insets its own text: 1px of transparent border plus 8px
+ * of padding. Everything that hangs beneath a row — the caption, the detail, a nested list —
+ * adds the same, so it lines up with the WORDS rather than with the editor's invisible box. A
+ * plain-`Text` title carries it too, or it sits out of line with the editable titles around it.
+ *
+ * It was 8 — the padding alone, forgetting the border — which put every caption, detail block
+ * and nested list 1px left of the title it belonged to.
+ */
+export const TASK_TEXT_INSET = 9;
+
+export interface TaskListProps {
+  children: ReactNode;
+  /**
+   * Width of every row's leading control — `CheckCircle` 20 (the default), `CheckboxInput`
+   * 24. Detail blocks and nested lists indent by it so they sit on the title's text edge.
+   * Set on the ROOT list; a nested list inherits it.
+   */
+  controlWidth?: number;
+  /**
+   * `comfortable` (the default) gives every row a 44px minimum so a finger can hit it;
+   * `dense` drops to 32px for a pointer-driven register. Density belongs to the SURFACE, so
+   * it is set once here and inherited by nested lists.
+   */
+  density?: TaskDensity;
+  /**
+   * Fixed width for every row's `TaskFields`, so the due/assignee cells line up as a COLUMN
+   * down the list instead of drifting with each title's length. Set it once here — a row
+   * with fewer cells still reserves the width, which is what keeps the column straight.
+   * Omit it and each cluster hugs its own content (fine for a single row, jittery in a list).
+   */
+  fieldsWidth?: number;
+  accessibilityLabel?: string;
+}
+
+/**
+ * The list — owns geometry (control column, indent, density) for every descendant. Nest one
+ * inside a `TaskItem` and its rows become that task's subtasks, indented one column.
+ */
+export function TaskList(props: TaskListProps) {
+  const parent = useContext(TaskListContext);
+  const isNested = parent.depth > 0;
+  const controlWidth = props.controlWidth ?? parent.controlWidth;
+  const density = props.density ?? parent.density;
+  const fieldsWidth = props.fieldsWidth ?? parent.fieldsWidth;
+  return (
+    <TaskListContext.Provider value={{ controlWidth, depth: parent.depth + 1, density, fieldsWidth }}>
+      <View
+        style={[
+          styles.list,
+          // A nested list is a child-step list: indent it to the parent's title text edge.
+          isNested && { flexBasis: "100%", marginTop: 2, marginBottom: 2 },
+        ]}
+        role="list"
+        accessibilityLabel={props.accessibilityLabel}
+      >
+        {props.children}
+      </View>
+    </TaskListContext.Provider>
+  );
+}
+
+/**
+ * One task. Its children lay out as a WRAPPING row — `TaskStatus`, `TaskTitle`, `TaskFields`,
+ * `TaskActions` — while `TaskDetail` and a nested `TaskList` are full-width and fall beneath
+ * it. Order in JSX is order on screen; nothing inspects child types.
+ */
+export function TaskItem(props: { children: ReactNode }) {
+  const { controlWidth } = useContext(TaskListContext);
+  // The control is taken OUT of the wrapping flow and pinned to the left gutter, so the row's
+  // content — title, fields, caption, detail, a nested list — all share ONE column. Anything
+  // that wraps therefore lands under the title instead of under the checkbox, which is what
+  // made a wrapped field cluster read as a row of its own, belonging to nothing.
+  //
+  // The minimum tap target is the ROW's, not each slot's: boxing every slot at 44px centred
+  // the title in it and pushed the caption ~13px below the words it describes.
+  return (
+    <View
+      style={[styles.item, { minHeight: useRowMinHeight(), paddingLeft: controlWidth + ROW_GAP }]}
+      role="listitem"
+    >
+      {props.children}
+    </View>
+  );
+}
+
+function useRowMinHeight(): number {
+  const { density } = useContext(TaskListContext);
+  return density === "dense" ? DENSE_ROW : TOUCH_TARGET;
+}
+
+/** The leading control — a `CheckCircle`, a `CheckboxInput`, a status dot. Pinned to the
+ *  list's control column so every title starts on the same edge. */
+export function TaskStatus(props: { children: ReactNode }) {
+  const { controlWidth } = useContext(TaskListContext);
+  // Pinned to the gutter and sized to the FIRST line, so it stays beside the title however
+  // tall the row grows underneath it.
+  return (
+    <View style={[styles.status, { width: controlWidth, height: useRowMinHeight() }]}>
+      {props.children}
+    </View>
+  );
+}
+
+/** The task's identity — plain `Text` or an inline editor. Takes the row's spare width and
+ *  claims a readable minimum, which is what makes `TaskFields` wrap rather than crush it. */
+export function TaskTitle(props: { children: ReactNode }) {
+  return (
+    <View style={styles.title}>{props.children}</View>
+  );
+}
+
+/**
+ * The descriptor cluster — due date, assignee, chips, counts. Sits inline after the title
+ * while the row has room and takes its own line when it does not.
+ *
+ * Replaces the old `trailing` (wide) / `meta` (narrow) pair, which made the author pick one
+ * at authoring time and be wrong on the other surface.
+ */
+export function TaskFields(props: { children: ReactNode }) {
+  const { fieldsWidth } = useContext(TaskListContext);
+  return (
+    <View
+      style={[
+        styles.fields,
+        // A reserved width is what makes a COLUMN: every row gives its cells the same box,
+        // so a row missing a due date does not pull its assignee leftward out of line.
+        fieldsWidth !== undefined && { width: fieldsWidth },
+      ]}
+    >
+      {props.children}
+    </View>
+  );
+}
+
+/**
+ * A second line under the title — what this task's STATE is, in words: "Needs: Carrier,
+ * Vehicle plate", "Waiting on the yard", "3 of 5 papers received".
+ *
+ * Deliberately NOT part of `TaskFields`. A field is a VALUE the reader edits and scans down a
+ * column; a caption is a SENTENCE about this row. Merging them (as the first cut of this
+ * family did) pushes prose into the value column, where it aligns with nothing and squeezes
+ * the cells. It always takes its own line, on the title's text edge — never inline, never
+ * behind a disclosure, because a state the reader must open to see is a state they will miss.
+ */
+export function TaskCaption(props: { children: ReactNode }) {
+  return (
+    <View style={[styles.caption, { paddingLeft: TASK_TEXT_INSET }]}>{props.children}</View>
+  );
+}
+
+/** The row's actions — an `ActionMenu`, an `IconButton`. A destructive item belongs behind
+ *  the menu, never as a bare ✕ on the row, so a stray tap cannot destroy a task. */
+export function TaskActions(props: { children: ReactNode }) {
+  return (
+    <View style={styles.actions}>{props.children}</View>
+  );
+}
+
+/** A block beneath the row, indented to the title's text edge — an inline editor, a
+ *  drill-down, the task's own fields. Render it only while open. */
+export function TaskDetail(props: { children: ReactNode }) {
+  return (
+    <View style={[styles.detail, { marginLeft: TASK_TEXT_INSET }]}>{props.children}</View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // No gap: every row already carries the density's min-height, so the rhythm is the ROW,
+  // not the space between rows. A gap on top of it made the list read as loose pairs.
+  list: { gap: 0 },
+  item: {
+    position: "relative",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    // `align-items` centres within a LINE; with `flex-wrap: wrap` it is `align-content` that
+    // places the lines in the box. Without it a short row (a plain-text subtask, 20px) sat at
+    // the top of its 44px target while the gutter control centred — the control read as
+    // belonging to the row below.
+    alignContent: "center",
+    columnGap: ROW_GAP,
+    // Lines inside ONE task are the same thought (title → caption → detail), so they sit
+    // tight; `gap` would have applied the 12px column rhythm vertically too.
+    rowGap: 2,
+  },
+  status: { position: "absolute", left: 0, top: 0, justifyContent: "center", alignItems: "flex-start" },
+  // flexBasis at the minimum (not 0) is what drives the wrap: once title + fields cannot
+  // both fit, the fields — which never shrink — are pushed to the next line.
+  title: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: TITLE_MIN_WIDTH,
+    minWidth: TITLE_MIN_WIDTH,
+    justifyContent: "center",
+  },
+  fields: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    // NOWRAP: the cluster is a ROW of cells, and it wraps as a UNIT under the title. Letting
+    // it wrap internally split the cells across two lines with the ⋯ stranded between them.
+    // Too little room means the cells compress, never that they stack.
+    flexWrap: "nowrap",
+    gap: 8,
+    // Shrinkable, so a narrow container compresses the cells instead of shoving the ⋯ onto a
+    // line of its own. `fieldsWidth` still pins the column when a list wants one.
+    flexShrink: 1,
+    minWidth: 0,
+  },
+  // `flexBasis: "100%"` is the whole trick: the caption always breaks to its own line.
+  caption: { flexBasis: "100%" },
+  actions: { flexGrow: 0, flexShrink: 0, justifyContent: "center" },
+  detail: { flexBasis: "100%", borderLeftWidth: 1, borderLeftColor: colors.border, paddingLeft: ROW_GAP },
+});

package/src/checklist.tsx

@@ -1,377 +0,0 @@
-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 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. `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
-// list as its add affordance. There is deliberately NO monolithic Task
-// component — richer task-management rows (expand affordances, tag/clip meta,
-// board cards) compose their own anatomy directly.
-//
-//   <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} … />
-//     </ChecklistRow>
-//     <SuggestionChip label="Verify the tax ID" onAdd={materialize} onDismiss={dismiss} />
-//     <CaptureRow … />
-//   </Checklist>
-
-interface ChecklistContextValue {
-  trailingWidth?: number;
-  controlWidth: number;
-}
-
-const ChecklistContext = createContext<ChecklistContextValue>({ controlWidth: 20 });
-
-export interface ChecklistProps {
-  /** Fixed width of every row's trailing cell (an assignee select) — set it
-   *  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 `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;
-}
-
-export function Checklist(props: ChecklistProps) {
-  const { trailingWidth, controlWidth = 20, children } = props;
-  return (
-    <ChecklistContext.Provider value={{ trailingWidth, controlWidth }}>
-      <View style={styles.list}>{children}</View>
-    </ChecklistContext.Provider>
-  );
-}
-
-/** 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 };
-  /** 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;
-}
-
-/** `trailing` (wide surfaces) and `meta` (narrow) are exclusive by type. */
-export type ChecklistRowProps = ChecklistRowBaseProps &
-  (
-    | {
-        /** The trailing cell (an `InlineMemberSelect`); sized by the list's `trailingWidth`. */
-        trailing?: ReactNode;
-        meta?: never;
-      }
-    | {
-        /** SECOND line under the title (indented past the ring) for a NARROW
-         *  surface — a drawer or popover checklist: put the assignee/due
-         *  editors here so the title keeps the full width and stays readable. */
-        meta?: ReactNode;
-        trailing?: never;
-      }
-  );
-
-/** 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, note, subtasks, expansion } = props;
-  const { trailingWidth, controlWidth } = useContext(ChecklistContext);
-  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} 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>
-  );
-}
-
-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 },
-});