@lotics/ui 18.1.0 → 19.0.0

package/MIGRATION.md

@@ -4,6 +4,71 @@ 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.
 
+## v19 from 18.x
+
+**`TaskFields` is DELETED, with `fieldsWidth`.** A task row was carrying a
+value COLUMN — a width declared on the list and reserved by every row. It aligned, and it read
+badly: a two-word field name sat at the title's origin while its control started a quarter of
+the surface away, and nothing could close the gap because the column was sized for the widest
+value on the page. A task row now carries its TITLE; the fields a user can SET hang under it as
+`TaskSubRow`s, name beside value.
+
+```tsx
+// BEFORE
+<TaskList fieldsWidth={320}>
+  <TaskItem>
+    <TaskStatus><CheckCircle …/></TaskStatus>
+    <TaskTitle>File it on the portal</TaskTitle>
+    <TaskFields>
+      <View style={{ flexBasis: 208 }}><InlineSelect variant="cell" …/></View>
+      <View style={{ width: 104 }}><InlineDatePicker variant="cell" …/></View>
+    </TaskFields>
+    <TaskActions><ActionMenu …/></TaskActions>
+  </TaskItem>
+</TaskList>
+
+// AFTER
+<TaskList>
+  <TaskItem>
+    <TaskStatus><CheckCircle …/></TaskStatus>
+    <TaskTitle>File it on the portal</TaskTitle>
+    <TaskActions><ActionMenu …/></TaskActions>
+    <TaskSubRow label="Hard copy"><InlineSelect …/></TaskSubRow>
+    <TaskSubRow label="Completed on"><InlineDatePicker …/></TaskSubRow>
+  </TaskItem>
+</TaskList>
+```
+
+Porting a row, cell by cell:
+
+- **Every cell becomes one `TaskSubRow`, and it needs a NAME.** The column header the cells
+  never had is now the label — write what the value IS ("Due", "Assignee", "Completed on"), not
+  what it does.
+- **Drop the wrapper `View`s and the widths.** A sub-row's label column sizes itself to that
+  ONE task's labels and its value takes the slack up to a field's width; nothing is passed in.
+- **Drop `variant="cell"`.** A cell variant is for a grid; a sub-row's value is a form-variant
+  `Inline*` editor (the default) — the zinc-50 chip that says "editable".
+- **A row that needed SCANNABLE columns — the same four values compared down twenty rows — was
+  never a task list.** Move it to `Table`/`DataGrid`.
+
+`TaskCaption` (prose about the row) and `TaskDetail` (a free-form block: a chart, a table, a
+form with its own submit) are unchanged.
+
+**`TaskList` gains `actionWidth` — the ⋯ is a COLUMN, the mirror of the control gutter.** Both
+pinned controls sit outside the row's flow and the ROW reserves each edge (`controlWidth` on the
+left, `actionWidth` on the right, each plus the row gap); what is left between them is ONE content
+box every line spans exactly — title, caption, sub-row, detail, nested list. Nothing to pass in
+the normal case: it defaults to 28, an `ActionMenu`'s own width, so every task surface reserves
+the same column for free. **Pass `actionWidth={0}` on a list where NO row carries actions**, so it
+does not pay for a column it never uses — that is the only call site this adds.
+
+It is not decoration. With the fields hung under the row, a self-sizing menu in the row's FLOW
+made the first line stop where the menu began while every full-width line beneath it ran on to
+the container — and a row without a menu ended somewhere else again, so no two right edges on the
+surface agreed. `TaskTitle` therefore no longer claims a minimum width (nothing shares its line to
+wrap against), and `TaskDetail` now ends on the content edge instead of overhanging it by its own
+inset.
+
 ## v18 from 17.x
 
 **`TimePicker` is a segmented field, not `<input type="time">`.** A native time input takes

package/docs/catalog.md

@@ -106,10 +106,13 @@ summary is `Ledger`.
 
 A task-management PAGE (many tasks, grouping, filters, expandable rows) is COMPOSITION —
 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
+`InlineTextInput`), `TaskActions`. **The row carries the TITLE; the fields a user can SET hang
+under it as `TaskSubRow`s** (`InlineDatePicker`/`InlineMemberSelect`/`InlineSelect`, each with
+its NAME beside it), never a `DetailTable` in a `TaskDetail`, which declares a grid of its own.
+The SAME composition serves a record's 5–8-task drawer checklist and a grouped desk board,
+because a sub-row reflows instead of being authored per surface; add `SuggestionChip` commons +
+`CaptureRow` for the checklist case. **A list you scan DOWN columns — the same four values
+compared across twenty rows — is a `Table`, not a `TaskList`.** 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.
 
@@ -487,7 +490,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   they are exclusive at the type level**: WITH it (+ the required `doorLabel`) the whole box is a
   keyboard door into the record's detail and `facts` values are TEXT (`""` → "—"); WITHOUT it the
   box is a STATIC card — no door, no tab stop, no pointer, nothing announced as a button — and a
-  `facts` value may be a NODE (an inline editor; a node prints as authored, no "—"). Reach for the
+  `facts` value may be a NODE (an inline editor; a node prints as authored, no "—"). A node fact
+  gets the CONTROL BAND on both cells — its label centres on the control instead of printing at
+  the band's top — while a string fact keeps its bare text line, so a long value that wraps still
+  tops out level with its label. Reach for the
   static one when the linked record has NO page of its own: nothing to open, so the box is where
   its values are read and edited, and the only interactive parts are `actions` + the fact nodes.
   Under a door, `actions` is the ONLY place a control may live (a fact editor there would compete
@@ -635,8 +641,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 
 - **`inline_edit`** — `useInlineEdit` + `InlineEditView` / `InlineEditFrame` +
   `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) +
+  it to `<body>` — what a CUSTOM editor that renders its own resting control reaches for instead
+  of the frame, which already calls it) + `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
@@ -703,7 +709,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   on a flat-text value row (`InlineStatic`, plain `Text`) tucks the annotation up by the
   control band's slack so its gap matches a chip row's.
   `DetailTable`: the compound parent of
-  a row STACK — `labelWidth` (default 130) / `trailingWidth` / `minHeight` (default 40, the
+  a row STACK — `labelWidth` (default `DETAIL_LABEL_WIDTH`, 130 — the kit's label column, also
+  the floor a `TaskSubRow`'s label sizes from) / `trailingWidth` / `minHeight` (default 40, the
   inline-control grid) declared ONCE + the 8px row gap; with `trailingWidth` every row
   reserves the trailing column so value cells share one width and trailing items align at
   one x, like a table. RESPONSIVE with no prop: it measures its own container (onLayout, not
@@ -781,28 +788,73 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   (`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.
+- **`task`** — `TaskList` + `TaskItem` + `TaskStatus` / `TaskTitle` / `TaskCaption` /
+  `TaskActions` / `TaskSubRow` / `TaskDetail` — the task COMPOUND, for anything
+  from a 5-item drawer checklist to a grouped desk board. `TaskList` owns geometry only: the two
+  GUTTERS — `controlWidth` (the left one, that every title aligns on, and so the INDENT step) and
+  `actionWidth` (the right one, that every ⋯ pins into; `0` on a list whose rows carry no
+  actions) — plus `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
+  puts a `CheckboxInput` here and sets `controlWidth={24}`). `TaskTitle` takes the
+  `variant="cell"` `InlineTextInput` — or the title TEXT itself as a string child
+  (`<TaskTitle struck={done}>{label}</TaskTitle>`), which is the READ-ONLY form: the compound
+  applies the cell inset and the row's band, so a plain `<Text>` + a hand-rolled
+  `TASK_TEXT_INSET` is never needed and a long title that wraps keeps its first line beside the
+  control. It spans the content box between the gutters, like every line hung beneath it.
+  `TaskCaption` is the row's state IN WORDS on its own line under the title — a
+  sentence, never a field. `TaskActions` carries the row's ⋯ `ActionMenu`, pinned into the RIGHT
+  gutter on the first line (Delete lives BEHIND it, danger-styled and last, never a bare ✕).
+  `TaskDetail` is a FREE-FORM block under the row on the title's text edge — a chart, a table, a
+  form with its own submit — rendered only while open. The module also exports
+  **`TASK_TEXT_INSET`** (9), the inset a `variant="cell"` control puts on its own text: every
+  slot above already applies it, so reach for it ONLY when a custom title NODE (not a cell
+  control) has to land on the same text edge.
+
+  **THE ⋯ IS A COLUMN, THE MIRROR OF THE CONTROL GUTTER.** Both pinned controls sit outside the
+  flow and the ROW reserves each edge (`actionWidth` + the row gap), so what is left between them
+  is ONE content box every line spans exactly — title, caption, sub-row, detail, nested list. That
+  is what keeps a list where only SOME rows carry a menu straight: a menu-less row's content ends
+  on the same x as a menu-carrying one's, and so does everything hanging under either. A nested
+  list hands the parent's reservation back before its own rows re-take it, so the column does not
+  step inward per level. Declare `actionWidth={0}` when NO row in the list carries actions.
+
+  **THE ROW CARRIES THE TITLE; THE FIELDS THE USER CAN SET ARE SUB-ROWS BENEATH IT.** One task's
+  own fields hang under it as **`TaskSubRow`** (`label` · the control · an optional muted
+  `description`), indented ONE step — the same step a nested `TaskList` takes, because belonging
+  is expressed by indentation and there is only one device for it. Label and value sit ADJACENT
+  so the eye pairs them, and the sub-rows of ONE task share a label column sized to THEIR OWN
+  labels: nothing is declared on the list and no width is passed in, so a name is never sized for
+  a field three tasks further down. The value takes the slack between a readable minimum and a
+  field's maximum — on a phone or in a narrow drawer it drops onto its own line under the label
+  rather than ellipsizing beside it. Pass a form-variant `Inline*` editor (the default), not
+  `variant="cell"`: a cell variant belongs to a grid.
+
+  **ANYTHING THAT NEEDS SCANNABLE COLUMNS IS A `Table`, NOT A `TaskList`.** The compound spent a
+  version carrying a declared value column so cells would line up down the list; it aligned and
+  it read worse — each field's name ended up a quarter of the surface from its control, sized for
+  the widest value on the page. If the job is comparing the same four values across twenty rows,
+  that is a table, and `Table`/`DataGrid` are built for it. A `DetailTable labelWidth={…}` inside
+  a `TaskDetail` is the other shape to avoid: it declares a grid whose label and control land at
+  two x positions matching nothing above them — a form pasted into a list.
+
+  **A row's FIRST LINE is a BAND** — 44px `comfortable`, 32 `dense`. Both gutter controls centre
+  in it and `TaskTitle` claims it, which is what keeps both columns of
+  controls straight as rows grow: a caption, a sub-row, a detail block, a nested list or a
+  wrapped title all hang BELOW the band instead of dragging the control down into the gap under
+  the title. So every sub-line sits the band's slack (12px comfortable) beneath the title's
+  words, the same whether the title is text or an editor. A title node TALLER than the band
+  overrides it — an inline editor is 40px, so a `dense` list of editable titles renders 40px rows
+  and its ring reads a few px high; `dense` is for text/static rows. A sub-row takes the TALLER
+  of the band and the 40px inline-control height, so its label's first line still meets its
+  control's centre in a `dense` list.
+
+  **Subtasks are a nested `TaskList`**, so a step IS a task: give one a field, 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.
+  title, a caption, 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

package/docs/data_entry.md

@@ -258,22 +258,58 @@ changing desks — never an inbox, a notification, or a copied task. Two types:
 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.
+read-only ring when it has no `onChange`), a `TaskTitle` (a `variant="cell"` `InlineTextInput`,
+or the title TEXT as a string child — `<TaskTitle struck={done}>{label}</TaskTitle>` is the
+read-only form, and the compound owns its inset and band, so never hand-roll a `Text` title) and
+a `TaskActions` ⋯ menu — never a decorative progress strip. The fields the desk SETS (the
+assignee `InlineMemberSelect`, the due date) hang UNDER the row as `TaskSubRow`s, which reflow on
+their own, so the drawer and the record page run the SAME composition. `CaptureRow` closes the
+list as its add-affordance.
+
+**A row's first line is a BAND** (44px comfortable, 32 dense): both gutter controls centre in it,
+`TaskTitle` claims it, and everything else — caption, detail, nested list, a title's wrapped
+second line — hangs below it. That is what keeps a column of controls straight down a list of
+mixed-height rows, so a control never drifts into the gap under the title it belongs to.
 
 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).
+it is not a field, because a field is a NAMED VALUE the reader sets and a caption is a SENTENCE
+about one row — labelling prose makes it read as a field nobody can edit.
+
+**THE ROW CARRIES THE TITLE; THE FIELDS THE USER CAN SET ARE SUB-ROWS BENEATH IT.** A field
+belonging to ONE task — its due date, its assignee, a portal login, a reference number — hangs
+under it as a **`TaskSubRow`** (`label` · the control · an optional muted `description`), indented
+ONE step, with the NAME beside its VALUE so the eye pairs them. Belonging is expressed by that
+indentation, which is the same step a nested `TaskList` takes — one device, at every depth. The
+sub-rows of ONE task share a label column sized to THEIR OWN labels: nothing is declared on the
+list, no width is passed in, and no field is sized for a name three tasks further down. The value
+takes the slack between a readable minimum and a field's maximum, dropping onto its own line under
+the label on a surface too narrow to seat both. Use the form-variant `Inline*` editor (the
+default) — `variant="cell"` belongs to a grid.
+
+**Anything that needs SCANNABLE COLUMNS is a `Table`, not a `TaskList`.** The compound once
+carried a declared value column so cells lined up down the list; it aligned, and it read worse —
+each name ended up a quarter of the surface from its control, sized for the widest value on the
+page. Comparing the same four values across twenty rows is a table's job. A `DetailTable` inside a
+`TaskDetail` is the same mistake in miniature: a grid whose label and control land at two x
+positions matching nothing above them, a form pasted into a list. `TaskDetail` keeps the FREE-FORM
+block (a chart, a table, a form with its own submit) — it has no name to hang on the indent, so a
+rule down its left edge is what ties it to the row.
+
+**The ⋯ is a COLUMN — the mirror of the control gutter.** Both pinned controls sit outside the
+row's flow and the ROW reserves each edge (`controlWidth` on the left, `actionWidth` on the
+right, each plus the row gap), leaving ONE content box between them that every line spans exactly:
+the title, a caption, a sub-row, a detail block, a nested list. That is what keeps a list where
+only SOME rows carry a menu straight — a menu-less row's content ends on the same x as a
+menu-carrying one's, and so does everything hanging beneath either. A nested list hands the
+parent's reservation back before its own rows re-take it, so the column does not step inward per
+level. Declare `actionWidth={0}` when NO row in the list carries actions, so it pays nothing for a
+column it never uses.
+
+**Subtasks are TASKS** — nest a `TaskList` inside the `TaskItem`, and the child carries fields,
+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
@@ -281,13 +317,11 @@ the parent's ring the bulk gesture where its children ARE the fact (tick it, eve
 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 sub-row holds a CONTROL.** Where exactly one field determines a row's status, the sub-row IS
+that field's editor: a read-only copy of it elsewhere on the row puts one value on screen twice,
+under two names. Everything else derived is prose in `TaskCaption` — a read-only pill given a
+field's label reads as pressable when it is not. A `Badge` INSIDE the editor (an
+`InlineSelect renderSelected`) is fine: it inherits the control's own inset.
 
 **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.
@@ -319,8 +353,8 @@ 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 `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
+`InlineTextInput` `TaskTitle` (flex) · a quick-reassign `InlineMemberSelect` in a `TaskSubRow`
+under it — 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

@@ -286,18 +286,17 @@ billing, and quick-capture templates. Top → bottom:
 - **Tasks** — the full task-list grammar: clearable Group-by `FilterChip` (+ assignee/status
   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 `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.) 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.
+  text heads (no dot badges). Each row's **due + assignee are `TaskSubRow`s UNDER the title** —
+  the SAME `InlineDatePicker` / `InlineMemberSelect` used in the General section, in the default
+  form variant, each with its NAME beside it one indent step in: the due an urgency-coloured date
+  (`tone` = `dueTone` — red past due, amber ≤3d, else muted), the assignee the full member chip.
+  A task row is not a table row — a value column reserved on the list put each name a quarter of
+  the record from its own control. ONE row ("Book the carrier") carries **SUBTASKS** — a nested
+  `TaskList` of four child ticks, each a `TaskItem` with a STRING `TaskTitle`; every other row
+  holds an empty array and renders no list at all. There is no built-in expander: collapsing is
+  the app's call, and this template always shows them. It is the line to copy — a booking's steps
+  carry only a tick, so they stay child rows; anything needing its own due date or assignee is 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).
@@ -354,12 +353,13 @@ billing, and quick-capture templates. Top → bottom:
   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 `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 — a
-  **`TaskCaption`**, not a field cell: 13px `circle-alert` + "Needs: …" the actual field labels,
+  (`controlWidth={24}` for the `CheckboxInput` in `TaskStatus`, and `actionWidth={0}` because no
+  row here carries a ⋯, so the list pays nothing for the action gutter) — the compound owns the
+  row geometry and both gutters; hand-rolling the anatomy is how alignment drifts. Warning and fix are CO-LOCATED on the row. The mark NAMES what's missing — a
+  **`TaskCaption`**, not a field: 13px `circle-alert` + "Needs: …" the actual field labels,
   muted at rest so gaps show WITHOUT checking, warning once checked because it now blocks. It is
-  a SENTENCE about the row, and `TaskFields` is the column the reader edits and scans down, so
-  prose put there lines up with nothing and reads as a control it is not. The FIX sits
+  a SENTENCE about the row, and a `TaskSubRow` is a NAMED value the reader sets, so prose given a
+  label reads as a field nobody can edit. The FIX sits
   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

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 { TaskActions, TaskFields, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
+import { TaskActions, TaskItem, TaskList, TaskStatus, TaskSubRow, 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";
@@ -204,9 +204,10 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
   const pending = suggestions.filter((l) => !tasks.some((t) => t.label === l));
   return (
     <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. */}
+      {/* ONE anatomy for every surface. The row is the title; the assignee and
+          the due date hang under it as named fields, and the pair splits onto
+          two lines only when the surface is too narrow to seat both — a drawer,
+          a peek, a phone. The template no longer picks. */}
       {tasks.map((t) => (
         <TaskItem key={t.id}>
           <TaskStatus>
@@ -221,33 +222,32 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
               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>
+          {/* the task's own FIELDS hang UNDER it, name beside value, one indent
+              step in — never cells in a shared column, which put each name a
+              quarter of the surface from the control it names */}
+          <TaskSubRow label="Assignee">
+            <InlineMemberSelect
+              members={MEMBERS}
+              value={t.assignee}
+              onSave={(m) => patch(t.id, { assignee: m })}
+              placeholder="Assign…"
+              accessibilityLabel={`Assignee · ${t.label}`}
+            />
+          </TaskSubRow>
+          <TaskSubRow label="Due">
+            <InlineDatePicker
+              value={t.due}
+              onSave={(v) => patch(t.id, { due: v })}
+              placeholder="Set due…"
+              accessibilityLabel={`Due · ${t.label}`}
+            />
+          </TaskSubRow>
         </TaskItem>
       ))}
       {/* SUGGESTIONS are pills, not rows — a chip can't be mistaken for a
@@ -652,7 +652,7 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
         </Section>
         <Divider />
         {/* TASKS — the Record template's section shape: heading + the compact
-            meter, the shared columnar checklist below (capture at the end);
+            meter, the shared checklist below (capture at the end);
             the same state feeds the register column + its peek. */}
         <Section>
           <SectionHeading>

package/examples/tpl_record.tsx

@@ -32,7 +32,7 @@ import { CheckCircle } from "@lotics/ui/check_circle";
 import { ProgressBar } from "@lotics/ui/progress_bar";
 import { FilterChip } from "@lotics/ui/filter_chip";
 import { CaptureRow } from "@lotics/ui/capture_row";
-import { TaskActions, TaskCaption, TaskDetail, TaskFields, TaskItem, TaskList, TaskStatus, TaskTitle, TASK_TEXT_INSET } from "@lotics/ui/task";
+import { TaskActions, TaskCaption, TaskDetail, TaskItem, TaskList, TaskStatus, TaskSubRow, TaskTitle } from "@lotics/ui/task";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { SuggestionChip } from "@lotics/ui/suggestion_chip";
 import { OptionList } from "@lotics/ui/option_list";
@@ -162,8 +162,8 @@ interface StageTask {
   stage: Desk;
   done: boolean;
   assignee: string | null;
-  /** ISO date (`""` = no due). The row shows it in a `variant="cell"` date field —
-   *  no calendar glyph, coloured by urgency (`tone`), press to edit. */
+  /** ISO date (`""` = no due). It hangs under the row as a named `TaskSubRow`
+   *  field, coloured by urgency (`tone`), press to edit. */
   due: string;
   /** The task's CHILD STEPS (`[]` = none). They render as a NESTED `TaskList`,
    *  so a step is a task: give one a due date, a menu or children of its own and
@@ -209,12 +209,10 @@ const newTaskId = () => `t_${(taskSeq += 1)}`;
 const TASK_SEEDS: StageTask[] = [
   { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01", due: dueIn(-10), subtasks: [] },
   { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "", subtasks: [] },
-  // two seeded NOTES — the "why it's stuck" a task carries and nothing else
-  // holds; every other row shows the add affordance instead
   { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null, due: dueIn(-2), subtasks: [] },
   // the one task with SUBTASKS — a booking is a sequence, and its steps carry
   // nothing but a tick, so they stay child rows instead of four more tasks
-  // (the row opens with work left; press the chevron to close it)
+  // (collapsing is the app's call — this template always renders them)
   { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02", due: dueIn(1), subtasks: [
     { key: "s1", label: "Confirm the pickup window", done: true },
     { key: "s2", label: "Send the packing list", done: false },
@@ -1851,7 +1849,7 @@ export function TplRecord() {
                     ) : null}
                   </SubsectionHeading>
                 ) : null}
-                {/* rows ride the Checklist compound — one geometry, EVERY
+                {/* rows ride the Task compound — one geometry, EVERY
                     desk's rows fully editable (the stage gates the handoff
                     and Billing, never task editing — planning ahead on a
                     later desk is normal work) */}
@@ -1879,19 +1877,22 @@ export function TplRecord() {
                         <TaskTitle>
                           <InlineTextInput variant="cell" value={t.label} onSave={(v) => renameTask(t.id, v)} struck={t.done} accessibilityLabel="Task title" />
                         </TaskTitle>
-                        {/* Due + assignee as COMPACT grid cells (`variant="cell"`): the due an
-                            urgency-coloured date (no calendar glyph), the assignee a bare AVATAR
-                            (`avatarOnly`). They sit inline on a wide record and take their own
-                            line in a drawer — the SAME JSX, no surface guess. */}
-                        <TaskFields>
-                          <View style={{ width: 104 }}>
-                            <InlineDatePicker variant="cell" tone={dueTone(t.due, t.done)} value={t.due || null} onSave={(v) => dueTask(t.id, v)} onClear={() => dueTask(t.id, "")} placeholder="Due…" locale="en-US" accessibilityLabel={`Due · ${t.label}`} />
-                          </View>
-                          <InlineMemberSelect variant="cell" avatarOnly members={TEAM} value={t.assignee} onSave={(m) => assignTask(t.id, m)} accessibilityLabel={`Assignee · ${t.label}`} />
-                        </TaskFields>
                         <TaskActions>
                           <ActionMenu items={menuItems} accessibilityLabel={`Task options: ${t.label}`} />
                         </TaskActions>
+                        {/* Due + assignee are the task's own FIELDS, so they hang UNDER it —
+                            each name beside the control it names, indented one step. They were
+                            cells in a value column the LIST declared, which is what put a
+                            two-word label a quarter of the record away from its own editor.
+                            The due keeps its urgency tone; the assignee names the member
+                            rather than showing a bare avatar, because a labelled field has the
+                            room for it. */}
+                        <TaskSubRow label="Due">
+                          <InlineDatePicker tone={dueTone(t.due, t.done)} value={t.due || null} onSave={(v) => dueTask(t.id, v)} onClear={() => dueTask(t.id, "")} placeholder="Not set" locale="en-US" accessibilityLabel={`Due · ${t.label}`} />
+                        </TaskSubRow>
+                        <TaskSubRow label="Assignee">
+                          <InlineMemberSelect members={TEAM} value={t.assignee} onSave={(m) => assignTask(t.id, m)} placeholder="Unassigned" accessibilityLabel={`Assignee · ${t.label}`} />
+                        </TaskSubRow>
                         {t.subtasks.length > 0 ? (
                           <TaskList>
                             {t.subtasks.map((sub) => (
@@ -1899,12 +1900,11 @@ export function TplRecord() {
                                 <TaskStatus>
                                   <CheckCircle state={sub.done ? "done" : "none"} onChange={(on) => toggleSubtask(t.id, sub.key, on)} accessibilityLabel={sub.label} />
                                 </TaskStatus>
-                                <TaskTitle>
-                                  {/* The parent's title is an inline editor, which insets its
-                                      own text; a plain `Text` child must add the same or the
-                                      two columns of titles do not line up. */}
-                                  <Text size="sm" color={sub.done ? "muted" : "default"} decoration={sub.done ? "lineThrough" : undefined} style={{ paddingHorizontal: TASK_TEXT_INSET }}>{sub.label}</Text>
-                                </TaskTitle>
+                                {/* A STRING title: the compound insets it like the parent's
+                                    inline editor and seats it in the row's band, so the two
+                                    columns of titles line up and the ring stays beside the
+                                    words even when a long subtask wraps. `struck` for done. */}
+                                <TaskTitle struck={sub.done}>{sub.label}</TaskTitle>
                               </TaskItem>
                             ))}
                           </TaskList>
@@ -2243,11 +2243,14 @@ export function TplRecord() {
                   <SubsectionHeading>
                     <SubsectionHeadingTitle>{g.party(customer?.name ?? null)}</SubsectionHeadingTitle>
                   </SubsectionHeading>
-                  {/* the PICKER rows ride the Checklist primitive — IT owns
-                      the geometry (row height, control/title alignment, the
-                      meta/expansion indent); hand-rolling this anatomy is how
-                      alignment drifts. controlWidth 24 = CheckboxInput. */}
-                  <TaskList controlWidth={24}>
+                  {/* the PICKER rows ride the Task compound — IT owns the
+                      geometry (the row band, the two gutters, the indent
+                      everything hung under a row takes); hand-rolling this
+                      anatomy is how alignment drifts. controlWidth 24 =
+                      CheckboxInput; and no row here carries a ⋯, so the list
+                      declines the action gutter and its captions run to the
+                      surface's edge. */}
+                  <TaskList controlWidth={24} actionWidth={0}>
                     {shown.map((f) => {
                       // READINESS per row, CO-LOCATED: a not-ready row's mark NAMES what's
                       // missing (muted at rest — discoverable without checking; warning once
@@ -2263,17 +2266,14 @@ export function TplRecord() {
                           <TaskStatus>
                             <CheckboxInput accessibilityLabel={f.label} checked={checked} onChange={(on) => toggleForm(f.id, on)} />
                           </TaskStatus>
-                          <TaskTitle>
-                            {/* A plain-`Text` title carries the cell inset itself, or it sits
-                                out of line with the editable titles elsewhere on the page and
-                                with its own caption below. */}
-                            <Text size="sm" style={{ flexShrink: 1, paddingHorizontal: TASK_TEXT_INSET }}>{f.label}</Text>
-                          </TaskTitle>
+                          {/* A STRING title carries the cell inset and the row's band from the
+                              compound, so it sits in line with the editable titles elsewhere on
+                              the page and the checkbox stays beside it above its caption. */}
+                          <TaskTitle>{f.label}</TaskTitle>
                           {/* "Needs: Tax ID, Delivery address" is a SENTENCE about this row, so it
-                              is a `TaskCaption` — its own line under the title. It was a
-                              `TaskFields` cell, which is the column the reader EDITS and scans
-                              down: prose there lines up with nothing, squeezes the cells beside
-                              it, and reads as a control it is not. */}
+                              is a `TaskCaption` — its own line under the title. Not a
+                              `TaskSubRow`, which is a NAMED value the reader SETS: prose given a
+                              label reads as a field nobody can edit. */}
                           {missing.length > 0 ? (
                             <TaskCaption>
                               <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 5 }}>