@lotics/ui 16.1.0 → 17.0.0

package/MIGRATION.md

@@ -4,6 +4,53 @@ 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.
 
+## v17 from 16.x
+
+**`Checklist` / `ChecklistRow` are DELETED.** They are replaced by the `Task` compound
+(`@lotics/ui/task`), which composes the anatomy instead of configuring it:
+
+```tsx
+<TaskList>                              {/* was <Checklist trailingWidth={152}> */}
+  <TaskItem>                            {/* was <ChecklistRow …>                */}
+    <TaskStatus><CheckCircle …/></TaskStatus>        {/* was control=           */}
+    <TaskTitle><InlineTextInput …/></TaskTitle>      {/* was children           */}
+    <TaskFields><InlineDatePicker …/></TaskFields>   {/* was trailing= OR meta= */}
+    <TaskActions><ActionMenu …/></TaskActions>       {/* was menu=              */}
+    <TaskDetail>…</TaskDetail>                       {/* was expansion=         */}
+    <TaskList>…</TaskList>                           {/* was subtasks=          */}
+  </TaskItem>
+</TaskList>
+```
+
+Three of those are behaviour changes, not renames:
+
+- **`trailing` and `meta` collapse into `TaskFields`.** They were mutually exclusive by type,
+  so an author had to decide "wide surface" or "narrow" while writing the JSX and was wrong on
+  the other one. `TaskFields` sits inline while the row has room and takes its own line when it
+  does not — intrinsically, with no viewport query, so it is also right inside a drawer.
+- **`subtasks` becomes a NESTED `TaskList`.** The old `{key, label, checked, onToggle}[]` meant
+  a child could never carry a due date, a menu or children of its own. A subtask is now a task.
+  What you lose is the built-in chevron and remaining-count: collapsing is the app's call now —
+  hold a boolean and render the nested list or don't.
+- **`note` is GONE, with no replacement.** A task's free text is its title, a descriptor
+  (`TaskFields`) or detail (`TaskDetail`); a fourth place to write invited writing it twice.
+  Move the value into whichever of those it actually is, or drop it.
+
+Rows are now **44px minimum** (`density="dense"` opts down to 32 for a pointer-driven
+register, set once on the list). The old row was 32 and the old subtask row 24 — under the
+minimum tap target. `controlWidth` moves from `Checklist` to `TaskList` unchanged; the
+`checklist` locale slice is deleted (its strings were all note/subtask chrome).
+
+**`CheckCircle`'s `checked: boolean` is replaced by `state: "none" | "partial" | "done"`.**
+Migrate with `checked={x}` → `state={x ? "done" : "none"}`; `onChange` is untouched (still
+`(done: boolean) => void`, since the ring's GESTURE stays binary — finish or reopen). The new
+middle position exists because a binary ring has to lie about it: a task at "doing", or a step
+whose vocabulary reads "No portal account → Account created → Filed online", is neither finished
+nor untouched in the middle, and an empty ring reports untouched — in the gutter column that is
+the fastest scan on a task surface. Wherever a row already carries a three-position status, feed
+it through (`state={s.status === "done" ? "done" : s.status === "doing" ? "partial" : "none"}`)
+rather than leaving the ring binary.
+
 ## v16 from 15.x
 
 **`Confidence` IS now a callout with a REQUIRED basis** — `children` (what was checked and

package/docs/catalog.md

@@ -105,12 +105,13 @@ summary is `Ledger`.
 ### Tasks / to-dos — pick by ALTITUDE
 
 A task-management PAGE (many tasks, grouping, filters, expandable rows) is COMPOSITION —
-there is NO Task component: `CheckCircle` + a struck `InlineTextInput` + your meta cells
-(`InlineDatePicker`/`InlineMemberSelect`/`InlineSelect`, all `variant="cell"`); see `tpl_record`'s
-Tasks section (the canonical task pattern) and [`tpl_task_board`](../examples/tpl_task_board.tsx) (columns). A record's own small CHECKLIST
-(the 5–8 tasks living in a drawer/section) is the `Checklist`/`ChecklistRow` compound +
-`SuggestionChip` commons + `CaptureRow` — see [`tpl_record`](../examples/tpl_record.tsx) /
-[`tpl_item_list`](../examples/tpl_item_list.tsx).
+the `Task` compound owns the row — `TaskStatus` (a `CheckCircle`), `TaskTitle` (a struck
+`InlineTextInput`), `TaskFields` (your `InlineDatePicker`/`InlineMemberSelect`/`InlineSelect`
+cells, all `variant="cell"`), `TaskActions`. The SAME composition serves a record's 5–8-task
+drawer checklist and a grouped desk board, because `TaskFields` reflows instead of being
+authored per surface; add `SuggestionChip` commons + `CaptureRow` for the checklist case. See
+[`tpl_record`](../examples/tpl_record.tsx) / [`tpl_item_list`](../examples/tpl_item_list.tsx),
+and [`tpl_task_board`](../examples/tpl_task_board.tsx) for columns.
 
 ### Tabular data — pick by SCALE + intent
 
@@ -571,7 +572,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   select.
 - **`form_date_picker`** — `FormDatePicker`: `FormField` wrapping a `DatePicker` — one
   labeled date field. (Omits `style`; for a grid cell use a bare `FormField style={half}`
-  around `DatePicker`.)
+  around `DatePicker`.) Defaults the picker's `accessibilityLabel` to its own visible label
+  — the FormField label text is not otherwise associated with the segment inputs. A bare
+  `DatePicker` outside a FormField must be given `accessibilityLabel` explicitly; range
+  formats suffix each half with the locale's start/end-date names.
 - **`switch_button`** — `SwitchButton`: the full-ROW toggle — a `PressableHighlight` row
   (optional icon + medium title left, `Switch` pinned right) where the whole row IS the
   switch (`accessibilityRole="switch"`, the inner Switch read-only). The settings-panel/menu
@@ -605,7 +609,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 ### Inline editing & record surfaces
 
 - **`inline_edit`** — `useInlineEdit` + `InlineEditView` / `InlineEditFrame` +
-  `INLINE_CONTROL_HEIGHT` (40) + `inlineValueTextStyle`: the engine custom inline editors
+  `useInlineEditFocusRestore` (returns focus to the RESTING control when a KEYBOARD close drops
+  it to `<body>` — what an editor with its own resting shape, e.g. the checklist `note` line,
+  reaches for instead of the frame) + `INLINE_CONTROL_HEIGHT` (40) +
+  `inlineValueTextStyle`: the engine custom inline editors
   join through — a view ⇄ edit toggle, a draft buffer, async `onSave` with the spinner
   INSIDE the control and inline error, commit on blur (Enter saves, Escape reverts) or
   `controls="buttons"`; KEYBOARD focus on the closed view opens edit mode with the input
@@ -657,7 +664,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   label+value row for drawer/peek detail; in FORM mode (`labelWidth` set) the value column
   FILLS the row so a stack of inline editors all span the same width + none jumps wider on
   edit; optional `trailing` slot renders a right-side action/badge after the value (units
-  belong IN the value via `InlineNumberInput format`). The FIELD-ANNOTATION vocabulary (same
+  belong IN the value via `InlineNumberInput format`). The LABEL WRAPS inside its column and
+  is never clipped — a fixed `labelWidth` would otherwise ellipsize every long field name
+  ("Registered business address"), and a name the reader can't finish is worse than a taller
+  row; a wrapped label's FIRST line stays level with the value's first control line while a
+  one-line label still centers on it (both modes, no prop). The FIELD-ANNOTATION vocabulary (same
   names + meanings as `FormField`), always EXPLICIT — a row never hides guidance behind an ⓘ:
   **`description`** = a fact / persistent guidance (muted), under the VALUE (stacked mode
   mirrors the form order label · description · control); **`warning`** = a consequence to weigh
@@ -737,27 +748,37 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 
 ### Tasks & checklists
 
-- **`check_circle`** — `CheckCircle`: the completion ring — an empty ring that springs to a
-  filled check when done, distinct from the square checkbox; the task/to-do/checklist
-  toggle.
-- **`checklist`** — `Checklist` + `ChecklistRow` — the record-scoped checklist COMPOUND: it
-  owns GEOMETRY only (row minHeight 32, gap 12, control/title alignment, the `meta`/
-  `expansion` indent, ONE `trailingWidth` so assignee cells column-align) while content
-  stays composed — `control` takes the `CheckCircle` (omit onChange = read-only ring; a
-  PICKER list puts a `CheckboxInput` here and sets `controlWidth={24}` so the indent
-  tracks), children the struck transparent `InlineTextInput` or plain `Text`, `trailing` an
-  `InlineMemberSelect`, `menu` the row's ⋯ options
-  (`{items: ActionMenuItem[], accessibilityLabel}`) — Delete lives BEHIND the menu,
-  danger-styled and last, never a bare ✕ (omit on read-only rows). NARROW surfaces (a
-  drawer/peek checklist) put the editors on the `meta` line instead of `trailing` — the
-  second line indents to the title's text edge so the TITLE keeps the full width; wide
-  surfaces use `trailing`; never both. `expansion` is a BLOCK slot under the row on the
-  same indent — a transient inline fill editor, a drill-down — rendered only while open
-  (`tpl_record`'s Document set rows are the worked example). SUGGESTIONS are never rows:
-  offer the commons as `SuggestionChip`s under the list. Close the list with `CaptureRow`.
-  There is deliberately NO monolithic Task component — richer task-management rows compose
-  their own anatomy directly. Hand-rolling this checkbox-row anatomy in a template is how
-  alignment drifts — the compound exists so it can't.
+- **`check_circle`** — `CheckCircle`: the completion ring — `state="none" | "partial" | "done"`,
+  springing to a filled check when done, distinct from the square checkbox; the
+  task/to-do/checklist control. `partial` half-fills it, for the row that is underway but not
+  finished (a task at "doing", a step whose children are half ticked) — a binary ring reports
+  that row as untouched, in the column readers scan fastest. The CLICK stays binary
+  (`onChange(done)`) so the ring means one thing everywhere; `partial` is reached through
+  whatever NAMES it — a status cell, or children ticking off — never by cycling the ring. Keep
+  it monochrome and let colour live in the status cell.
+- **`task`** — `TaskList` + `TaskItem` + `TaskStatus` / `TaskTitle` / `TaskFields` /
+  `TaskActions` / `TaskDetail` — the task COMPOUND, for anything from a 5-item drawer
+  checklist to a grouped desk board. `TaskList` owns geometry only (the `controlWidth`
+  column every title aligns on, the indent, and `density`: `comfortable` = a 44px minimum
+  tap target, `dense` = 32 for a pointer-driven register). Everything else is composed, and
+  JSX order is screen order — nothing inspects child types.
+
+  `TaskStatus` takes the `CheckCircle` (omit `onChange` for a read-only ring; a PICKER list
+  puts a `CheckboxInput` here and sets `controlWidth={24}`). `TaskTitle` takes the struck
+  transparent `InlineTextInput` or plain `Text`, and claims a readable minimum width — which
+  is what makes the rest reflow. `TaskFields` is the descriptor cluster (due, assignee,
+  chips): it sits inline after the title while the row has room and takes its own line when
+  it does not. That is intrinsic, so the SAME JSX is right on a record page and in a drawer —
+  never author two variants, and never reach for a viewport query. `TaskActions` carries the
+  row's ⋯ `ActionMenu`; Delete lives BEHIND it, danger-styled and last, never a bare ✕.
+  `TaskDetail` is a block under the row on the title's text edge — an inline fill editor, a
+  drill-down — rendered only while open.
+
+  **Subtasks are a nested `TaskList`**, so a step IS a task: give one a due date, a menu or
+  children of its own and it works. Collapsing belongs to the app — hold a boolean and render
+  the nested list or don't. There is deliberately **no note slot**: a task's free text is its
+  title, a descriptor, or detail, and a fourth place to write invited writing it twice.
+
 - **`suggestion_chip`** — `SuggestionChip`: the dismissible SUGGESTION pill — an item the
   record could have but doesn't yet (a common task, an expected line) as a `Chip` whose
   press MATERIALIZES it (plus glyph + label, one tuned anatomy) and whose ✕ refuses it;

package/docs/composition.md

@@ -440,7 +440,9 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   fact or consequence, never widget mechanics, never a second sentence; `warning` marks a
   consequence, not decoration. Rows share ONE
   alignment law: the row top-aligns and label · control · trailing each center within the
-  first control line — a tall value block never drags the label. A FLAT value row
+  first control line — a tall value block never drags the label, and a LABEL too long for its
+  column WRAPS (never clipped, never abbreviated to fit) with its first line still level with
+  the value. A FLAT value row
   (`InlineStatic`, plain `Text`) sets **`DetailRow flat`**: the annotation tucks up by the
   control band's slack so the perceived gap under the text equals the gap under a chip —
   the band's invisible bottom half must never read as a hole above the description.

package/docs/data_entry.md

@@ -157,7 +157,9 @@ narrower than its neighbours'. Rows share ONE alignment law: the row top-aligns
 control · trailing each center within the first control line — annotations (the three tones
 under the value: `description` muted · `warning` amber · `error` danger, each indented to the
 chip's 8px text inset) grow the row downward without dragging the label. The full annotation
-vocabulary lives in composition.md §Field annotations.
+vocabulary lives in composition.md §Field annotations. A long LABEL wraps inside its column
+instead of clipping — never shorten a field name to fit the label width, and never reach for a
+tooltip to recover the tail; the wrapped label's first line stays level with the value.
 
 ### The editability affordance
 
@@ -253,22 +255,46 @@ When work crosses departments (sales → operations → accounting), the HANDOFF
 changing desks — never an inbox, a notification, or a copied task. Two types:
 
 **(A) Same entity** → a STAGE field on the shared record: sections carry OWNER dot tags, and the
-handoff is MANAGED AS TASKS — each desk's checklist on the record. The **`Checklist`** compound
-OWNS the list geometry (row height, ring/title alignment, and the one trailing column, set once
-via `trailingWidth`) — compose it, never hand-roll the row. Each **`ChecklistRow`** takes a
-`control` (a `CheckCircle` — a read-only ring when it has no `onChange`), its title as children (a
-struck transparent `InlineTextInput`, or plain `Text`), then EITHER a `trailing` cell on wide
-surfaces (the per-task assignee `InlineMemberSelect`, sized by the list's `trailingWidth`) OR a
-`meta` line under the title on NARROW surfaces (a drawer/popover checklist — the two are mutually
-exclusive), plus a `menu` for the row's ⋯ options — never a decorative progress strip. `CaptureRow`
-closes the list as its add-affordance. A NEW record starts with an EMPTY checklist — tasks truly
+handoff is MANAGED AS TASKS — each desk's checklist on the record. The **`Task`** compound owns
+the list geometry (the control column, the indent, and `density` — 44px targets by default) —
+compose it, never hand-roll the row. A **`TaskItem`** carries a `TaskStatus` (a `CheckCircle` — a
+read-only ring when it has no `onChange`), a `TaskTitle` (a struck transparent `InlineTextInput`,
+or plain `Text`), a `TaskFields` cluster (the per-task assignee `InlineMemberSelect`, the due
+date) and a `TaskActions` ⋯ menu — never a decorative progress strip. `TaskFields` sits inline
+while the row has room and takes its own line when it does not, so the drawer and the record page
+run the SAME composition. `CaptureRow` closes the list as its add-affordance.
+
+A task's own free text is its TITLE, a **`TaskCaption`** or a **`TaskDetail`** — there is no
+fourth place to write, because a fourth place gets written in twice. `TaskCaption` is the row's
+state IN WORDS ("3 of 5 papers received", "waiting on the yard") on its own line under the title;
+it is not a `TaskFields` cell, because a field is a VALUE the reader scans down a column and a
+caption is a SENTENCE about one row — merging them pushes prose into the value column, where it
+aligns with nothing.
+
+**Subtasks are TASKS** — nest a `TaskList` inside the `TaskItem`, and the child carries a due
+date, a menu and children of its own. There is no separate subtask shape to outgrow, and no
+built-in chevron: collapsing is the app's call (hold a boolean, render the nested list or don't).
+
+**State flows from the LEAVES.** Where a parent's position is computable from its children, DERIVE
+it and render the parent's status read-only — an editable copy lets a row disagree with its own
+children, and makes the operator enter one fact twice. Give the parent's ring the bulk gesture
+instead (tick it, every child ticks). A parent with nothing to derive from is set by hand.
+
+`CheckCircle` has THREE positions (`state="none" | "partial" | "done"`), and `partial` is not
+optional dressing: a step whose vocabulary reads "No portal account → Account created → Filed
+online" is neither finished nor untouched in the middle, and a binary ring calls it untouched — in
+the gutter column, which is the fastest scan on the surface. Its CLICK stays binary (finish /
+reopen) so the ring means one thing everywhere; `partial` is reached through whatever NAMES it —
+an `InlineSelect` status cell in that step's own words, or children ticking off — never by cycling
+the ring. Keep the ring MONOCHROME and let colour live in the status cell, or the row double-codes
+one fact. A NEW record starts with an EMPTY checklist — tasks truly
 vary. The commons split in two: MANDATORY tasks are seeded by the app (a workflow on create, per
 record type) — no human types them; common-but-OPTIONAL tasks appear as `SuggestionChip`s under
 the list — a PILL, never a row, so a suggestion can't be mistaken for a task (tap = materialize,
 ✕ = dismiss for this record; already-present labels filter out; suggestions never count in
 done/total and pause while a filter narrows the view) — the same suggestion grammar as the billing
-Standard pill. The row's `menu` (an `ActionMenu`; Delete lives BEHIND it, danger-styled and last —
-never a bare ✕ a stray tap can hit) completes the checklist's CRUD.
+Standard pill. `TaskActions` holds an `ActionMenu` (Delete lives BEHIND it, danger-styled and last
+— never a bare ✕ a stray tap can hit), which completes the list's CRUD.
 
 Open tasks INFORM the handoff, they NEVER block it: the CTA stays enabled, the count warns, and
 open tasks carry over. The handoff CTA opens a DIALOG for the receiving desk (assignee
@@ -276,9 +302,9 @@ open tasks carry over. The handoff CTA opens a DIALOG for the receiving desk (as
 the record left this register.
 
 Tasks PEEK from the register: the done/total column is a pressable compact-`ProgressBar` trigger
-whose popover holds the same `Checklist` on FIXED columns (`trailingWidth={140}`) — every
-`ChecklistRow`'s ring `control` · struck `InlineTextInput` title (flex) · quick-reassign
-`InlineMemberSelect` `trailing` — no expandable rows (tags/files depth is
+whose popover holds the same `Task` list — every `TaskItem`'s ring `TaskStatus` · struck
+`InlineTextInput` `TaskTitle` (flex) · quick-reassign `InlineMemberSelect` in `TaskFields`, which
+takes its own line at popover width — no expandable rows (tags/files depth is
 the Task list template's lesson, not the peek's); the popover body is `PopoverContent`'s own
 ScrollView (`disableBodyScroll` is ONLY for children that manage their own scroll, like
 `OptionList`). The DRAWER carries a real Tasks SECTION in the Record template's shape (heading +

package/docs/templates.md

@@ -284,15 +284,20 @@ billing, and quick-capture templates. Top → bottom:
   file-capable edit form injected via `renderEditForm`) + THE kit `Composer` (attach via
   `actionsButton`, staged files in its `files` slot) — never a bespoke comment box.
 - **Tasks** — the full task-list grammar: clearable Group-by `FilterChip` (+ assignee/status
-  chips), the `CaptureRow` on top, `Checklist`/`ChecklistRow` rows and per-row menus,
+  chips), the `CaptureRow` on top, `TaskList`/`TaskItem` rows and per-row `TaskActions` menus,
   suggestions as `SuggestionChip`s; groups divide via the `SubsectionStack` beat with plain
-  text heads (no dot badges). Each row's trailing carries **due + assignee as COMPACT grid CELLS** —
+  text heads (no dot badges). Each row's `TaskFields` carries **due + assignee as COMPACT grid CELLS** —
   the SAME `InlineDatePicker` / `InlineMemberSelect` used in the General section, in **`variant="cell"`**
   (transparent rest + wash on hover, no glyph/chevron): the due a urgency-coloured date (`tone`
   = `dueTone` — red past due, amber ≤3d, else muted), the assignee an **`avatarOnly`** bare avatar
   (dashed add-ghost when unset), sized to the list's `trailingWidth` so the title never overlaps.
   (Contrast the General section's dates/assignee, the same editors in the default `variant="form"`
-  — a zinc-50 chip + hover-border + the full member chip.)
+  — a zinc-50 chip + hover-border + the full member chip.) Two rows carry a **`note`** — the kit's
+  per-row muted second line (press to edit, save empty to remove); the rest show its add button.
+  ONE row ("Book the carrier") carries **`subtasks`** — four child ticks behind the kit's chevron +
+  remaining-count expander, open because work is left; every other row passes an EMPTY list, which
+  renders nothing at all. It is the line to copy: a booking's steps carry only a tick, so they stay
+  child rows — anything needing its own note/due/assignee would be a task instead.
 - **Documents** — the Agents "Document desk" pattern (this template is its worked example —
   see the Agents chapter below): the register `Table` (search · Add files) whose selection
   feeds the `FloatingActionBar` → ONE "Use AI" fork (extract / cross-check / edit-with-AI).
@@ -348,13 +353,12 @@ billing, and quick-capture templates. Top → bottom:
   REPLACES the set — derived paperwork, never intake; the desk register above keeps what
   arrived. **READINESS**: a form declares the RECORD FIELDS it reads (`needs`); the fields'
   HOME stays their DATA section (the colocation law) with descriptions naming their
-  consumers ("printed on the delivery note"). The picker rows ride `Checklist`/
-  `ChecklistRow` (`controlWidth={24}` for the `CheckboxInput`) — the compound owns the row
-  geometry and the `meta`/`expansion` indent; hand-rolling the anatomy is how alignment
-  drifts. Warning and fix are CO-LOCATED on the row. The mark NAMES what's missing (the
-  `meta` line: 13px `circle-alert` + "Needs: …" the actual field labels — muted at rest so
+  consumers ("printed on the delivery note"). The picker rows ride `TaskList`/`TaskItem`
+  (`controlWidth={24}` for the `CheckboxInput` in `TaskStatus`) — the compound owns the row
+  geometry and the indent; hand-rolling the anatomy is how alignment drifts. Warning and fix are CO-LOCATED on the row. The mark NAMES what's missing (the
+  `TaskFields` line: 13px `circle-alert` + "Needs: …" the actual field labels — muted at rest so
   gaps show WITHOUT checking, warning once checked because it now blocks). The FIX sits
-  right under it in the row's `expansion` — an `Inset` (a FORM surface, NEVER a `Callout`:
+  right under it in the row's `TaskDetail` — an `Inset` (a FORM surface, NEVER a `Callout`:
   a warning Callout is an ARIA `alert`, wrong around a form) with a `FormTextInput` per gap
   (label + the consumer hint as `description`) and a "Save fields" (secondary — the section
   keeps ONE primary, disabled while every draft is empty). Save writes the record fields

package/examples/tpl_item_list.tsx

@@ -21,7 +21,7 @@ import { IconButton } from "@lotics/ui/icon_button";
 import { ListItem } from "@lotics/ui/list_item";
 import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { CaptureRow } from "@lotics/ui/capture_row";
-import { Checklist, ChecklistRow } from "@lotics/ui/checklist";
+import { TaskActions, TaskFields, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
 import { SuggestionChip } from "@lotics/ui/suggestion_chip";
 import { Screen, ScreenRouter, useScreenRouter } from "@lotics/ui/screen_router";
 import { SummaryLine } from "@lotics/ui/summary_line";
@@ -203,49 +203,52 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
   const addSuggested = (label: string) => onChange([...tasks, { id: newTaskId(), label, done: false, assignee: null, due: "" }]);
   const pending = suggestions.filter((l) => !tasks.some((t) => t.label === l));
   return (
-    <Checklist>
-      {/* NARROW anatomy: the title owns its full line (readable in a drawer
-          or peek); assignee + due edit on the indented meta line below */}
+    <TaskList>
+      {/* ONE anatomy for every surface. The assignee and due editors sit inline
+          after the title when the row has room, and take their own line when it
+          does not — a drawer, a peek, a phone. The template no longer picks. */}
       {tasks.map((t) => (
-        <ChecklistRow
-          key={t.id}
-          control={<CheckCircle checked={t.done} onChange={(on) => patch(t.id, { done: on })} accessibilityLabel={t.label} />}
-          menu={{
-            items: [{ key: "xoa", label: "Delete task", icon: "trash", danger: true, onPress: () => onChange(tasks.filter((x) => x.id !== t.id)) }],
-            accessibilityLabel: `Task options: ${t.label}`,
-          }}
-          meta={
-            <>
-              <View style={{ width: 150 }}>
-                <InlineMemberSelect
-                  variant="cell"
-                  members={MEMBERS}
-                  value={t.assignee}
-                  onSave={(m) => patch(t.id, { assignee: m })}
-                  placeholder="Assign…"
-                  accessibilityLabel={`Assignee · ${t.label}`}
-                />
-              </View>
-              <View style={{ width: 130 }}>
-                <InlineDatePicker
-                  variant="cell"
-                  value={t.due}
-                  onSave={(v) => patch(t.id, { due: v })}
-                  placeholder="Set due…"
-                  accessibilityLabel={`Due · ${t.label}`}
-                />
-              </View>
-            </>
-          }
-        >
-          <InlineTextInput
-            variant="cell"
-            value={t.label}
-            onSave={(v) => patch(t.id, { label: v })}
-            struck={t.done}
-            accessibilityLabel="Task title"
-          />
-        </ChecklistRow>
+        <TaskItem key={t.id}>
+          <TaskStatus>
+            <CheckCircle state={t.done ? "done" : "none"} onChange={(on) => patch(t.id, { done: on })} accessibilityLabel={t.label} />
+          </TaskStatus>
+          <TaskTitle>
+            <InlineTextInput
+              variant="cell"
+              value={t.label}
+              onSave={(v) => patch(t.id, { label: v })}
+              struck={t.done}
+              accessibilityLabel="Task title"
+            />
+          </TaskTitle>
+          <TaskFields>
+            <View style={{ width: 150 }}>
+              <InlineMemberSelect
+                variant="cell"
+                members={MEMBERS}
+                value={t.assignee}
+                onSave={(m) => patch(t.id, { assignee: m })}
+                placeholder="Assign…"
+                accessibilityLabel={`Assignee · ${t.label}`}
+              />
+            </View>
+            <View style={{ width: 130 }}>
+              <InlineDatePicker
+                variant="cell"
+                value={t.due}
+                onSave={(v) => patch(t.id, { due: v })}
+                placeholder="Set due…"
+                accessibilityLabel={`Due · ${t.label}`}
+              />
+            </View>
+          </TaskFields>
+          <TaskActions>
+            <ActionMenu
+              items={[{ key: "xoa", label: "Delete task", icon: "trash", danger: true, onPress: () => onChange(tasks.filter((x) => x.id !== t.id)) }]}
+              accessibilityLabel={`Task options: ${t.label}`}
+            />
+          </TaskActions>
+        </TaskItem>
       ))}
       {/* SUGGESTIONS are pills, not rows — a chip can't be mistaken for a
           task. Tap = materialize; ✕ = dismiss it for this record. */}
@@ -257,7 +260,7 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
         </View>
       ) : null}
       <CaptureRow value={draft} onChangeText={setDraft} onSubmit={add} placeholder="Add a task…" accessibilityLabel="Add a task" />
-    </Checklist>
+    </TaskList>
   );
 }