@lotics/ui 16.2.0 → 17.0.1

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
 
@@ -747,53 +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 `note`/`meta`/
-  `subtasks`/`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. **`note` is the row's own free-text line** —
-  `{value, onSave, addLabel?, editLabel?, placeholder?}` (`ChecklistRowNote`): the note
-  renders as a muted line directly under the title (above `meta`, on its text edge) and is
-  ALWAYS visible — never behind `expansion` — presses to edit in place, and saving EMPTY
-  removes it (`onSave("")`, whitespace trimmed first — clearing IS the delete, so a note
-  needs no ⋯ entry). A row with no note shows a small `sticky-note` add button instead,
-  which opens the focused empty editor. It composes with `trailing` AND `meta` (a second
-  LINE, not a replacement), the save may be async (spinner + inline error, editor stays
-  open), and chrome comes from the `checklist` locale slice (`addNote`, `editNote(note)` —
-  it wraps the text so the line announces with it — `notePlaceholder`). Never hand-roll a
-  muted sub-line + editor on a checklist row. **`subtasks` are the row's collapsible CHILD
-  STEPS** — `{items, expanded?, onToggleExpanded?, countLabel?}` (`ChecklistRowSubtasks`),
-  each item a `ChecklistSubtask` `{key, label, checked, onToggle}` and nothing more (no
-  note, no assignee, no ⋯: a step needing those is a TASK — give it a row). The parent grows
-  a chevron expander on the TRAILING side of the title (never the leading edge — that's
-  `control`, and a chevron there would knock the title off the text edge on every row
-  WITHOUT steps) carrying the count of UNCHECKED steps beside it; expanded, the children
-  render as compact `CheckboxInput` + label rows on the title's text edge, denser than the
-  parent (24 vs 32) and struck+muted when checked. `items: []` renders NOTHING, not even the
-  expander, so a row can pass the prop unconditionally. Expansion is controlled with
-  `expanded` + `onToggleExpanded`, or UNCONTROLLED (omit `expanded`): open on mount while any
-  step is unchecked, then the user's toggle wins — checking the last step must not yank the
-  list shut. A11y: the expander keeps ONE stable name (`countLabel(missing)` → the
-  `checklist` locale slice's `subtasks(missing)` → English) with `aria-expanded` carrying the
-  state, and the children sit in a `role="group"` named by the row's own title, so they are
-  announced UNDER their parent instead of as loose checkboxes. Never hand-roll indented child
-  rows with a bespoke chevron. `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/data_entry.md

@@ -255,34 +255,62 @@ 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 task's own free text — the "why it's stuck" nothing else on
-the record holds — is the row's **`note`** (`{value, onSave}`): a muted line under the title, ALWAYS
-visible (a note behind an expansion gets written twice), pressed to edit in place, and REMOVED by
-saving it empty — so it needs no ⋯ entry and no second field. A note-less row carries a small add
-button that opens the focused editor. It composes with `trailing` AND `meta` — a second LINE, not a
-replacement — so a per-row note is never a hand-rolled sub-line, a comment thread, or an
-expansion. A task made of several ticks takes **`subtasks`** (`{items, expanded?,
-onToggleExpanded?, countLabel?}`) rather than N sibling rows: the parent grows a chevron + the
-count of unchecked steps, and the children — `{key, label, checked, onToggle}` and NOTHING else —
-render indented to the title's text edge when open. The line is sharp: a step that needs its own
-note, due date, assignee, or ⋯ menu is a TASK, so give it a row; subtasks are for the ticks that
-only make sense under their parent. Omit `expanded` and the row opens itself while work is left,
-then hands the state to the user. 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 row's position is computable from what it owns, DERIVE
+it — a stored status is a second copy of what the fields already say, and two copies drift. Give
+the parent's ring the bulk gesture where its children ARE the fact (tick it, every child ticks);
+where the ring answers a DIFFERENT field the children do not determine — a date, say — coupling
+them asserts something the operator never said.
+
+**`TaskFields` holds CONTROLS.** Where exactly one field determines a row's status, that cell IS
+the field's editor: a read-only copy above an editable control puts one value on the row twice,
+under two labels. Everything else derived is prose in `TaskCaption`. A read-only pill parked in
+the column sits `TASK_TEXT_INSET` left of its neighbours (a `variant="cell"` control insets its
+text by that much; a bare `Badge` by nothing) and reads as pressable when it is not. A `Badge`
+INSIDE a cell control is fine — it inherits that cell's inset, and the 12px its label sits in by
+is the dot and its gap, not padding.
+
+**A status reports what is OUTSTANDING, never what is settled.** A finished row already says so
+twice — a full ring and its date — so naming the settled condition is a third copy of one fact.
+The empty end is worse than redundant: "every document is in" and "nobody has looked yet" are the
+same empty list, so a badge asserting the first states something no one established. Stay silent
+at both ends, and separate "is it under way" (which drives the ring) from "has it anything to
+say" (which drives the caption) — fusing them forces every pending state to invent a label.
+
+`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
@@ -290,9 +318,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,9 +284,9 @@ 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
@@ -353,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>
   );
 }