npm - @lotics/ui - Versions diffs - 16.1.0 → 16.2.0 - Mend

@lotics/ui 16.1.0 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/docs/catalog.md CHANGED Viewed

@@ -571,7 +571,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 +608,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 +663,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
@@ -741,8 +751,8 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   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
+  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
@@ -751,8 +761,34 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   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
+  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

package/docs/composition.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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
@@ -261,7 +263,19 @@ struck transparent `InlineTextInput`, or plain `Text`), then EITHER a `trailing`
 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
+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
 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,

package/docs/templates.md CHANGED Viewed

@@ -292,7 +292,12 @@ billing, and quick-capture templates. Top → bottom:
   = `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).

package/examples/tpl_record.tsx CHANGED Viewed

@@ -165,6 +165,16 @@ interface StageTask {
   /** ISO date (`""` = no due). The row shows it in a `variant="cell"` date field —
    *  no calendar glyph, coloured by urgency (`tone`), press to edit. */
   due: string;
+  /** The task's own note (`""` = none). The `ChecklistRow` `note` contract owns
+   *  the whole affordance — the muted second line, the tap-to-edit, the add
+   *  button on a note-less row, and removal by saving empty. */
+  note: string;
+  /** The task's CHILD STEPS (`[]` = none, and then nothing renders — not even
+   *  the expander). The `ChecklistRow` `subtasks` contract owns the whole
+   *  affordance: the chevron + remaining count on the parent, the open/closed
+   *  state, and the indented child rows. A step that needs its own note, due
+   *  date, or assignee is a TASK — give it a row, not a subtask. */
+  subtasks: { key: string; label: string; done: boolean }[];
 }
 // A due date N days from today — keeps the seeded urgency states (overdue / soon /
@@ -203,13 +213,23 @@ const newTaskId = () => `t_${(taskSeq += 1)}`;
 // The in-flight demo record's existing checklist (a NEW record gets []).
 const TASK_SEEDS: StageTask[] = [
-  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01", due: dueIn(-10) },
-  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "" },
-  { id: "t3", label: "Verify the customer's tax ID", stage: "sales", done: false, assignee: null, due: dueIn(-2) },
-  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02", due: dueIn(1) },
-  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null, due: dueIn(6) },
-  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03", due: "" },
-  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null, due: dueIn(14) },
+  { id: "t1", label: "Confirm pricing with the customer", stage: "sales", done: true, assignee: "mem_01", due: dueIn(-10), note: "", subtasks: [] },
+  { id: "t2", label: "Attach the signed quote", stage: "sales", done: true, assignee: "mem_01", due: "", note: "", 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), note: "Their finance desk answers after 15:00 only.", 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)
+  { id: "t4", label: "Book the carrier", stage: "operations", done: false, assignee: "mem_02", due: dueIn(1), note: "", subtasks: [
+    { key: "s1", label: "Confirm the pickup window", done: true },
+    { key: "s2", label: "Send the packing list", done: false },
+    { key: "s3", label: "Get the booking reference", done: false },
+    { key: "s4", label: "Share the reference with the customer", done: false },
+  ] },
+  { id: "t5", label: "Attach the delivery documents", stage: "operations", done: false, assignee: null, due: dueIn(6), note: "Waiting on the signed copy from the yard.", subtasks: [] },
+  { id: "t6", label: "Issue every invoice", stage: "accounting", done: false, assignee: "mem_03", due: "", note: "", subtasks: [] },
+  { id: "t7", label: "Reconcile the receipts", stage: "accounting", done: false, assignee: null, due: dueIn(14), note: "", subtasks: [] },
 ];
 // The assignable roster — an app feeds `useMembers()` here.
@@ -1138,11 +1158,11 @@ export function TplRecord() {
   const addTask = () => {
     const label = newTask.trim();
     if (!label) return;
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null, due: "" }]);
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: captureDesk, done: false, assignee: null, due: "", note: "", subtasks: [] }]);
     setNewTask("");
   };
   const addSuggested = (desk: Desk, label: string) =>
-    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null, due: "" }]);
+    setTasks((prev) => [...prev, { id: newTaskId(), label, stage: desk, done: false, assignee: null, due: "", note: "", subtasks: [] }]);
   const removeTask = (tid: string) => setTasks((prev) => prev.filter((t) => t.id !== tid));
   const moveTask = (tid: string, desk: Desk) =>
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, stage: desk } : t)));
@@ -1153,6 +1173,15 @@ export function TplRecord() {
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, assignee: member } : t)));
   const dueTask = (tid: string, due: string) =>
     setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, due } : t)));
+  // Saving an EMPTY note is the removal — one write path, no separate delete.
+  const noteTask = (tid: string, note: string) =>
+    setTasks((prev) => prev.map((t) => (t.id === tid ? { ...t, note } : t)));
+  // A child step patches by key — the kit owns the expander and the count, the
+  // app owns nothing but the tick.
+  const toggleSubtask = (tid: string, key: string, done: boolean) =>
+    setTasks((prev) =>
+      prev.map((t) => (t.id === tid ? { ...t, subtasks: t.subtasks.map((s) => (s.key === key ? { ...s, done } : s)) } : t)),
+    );
   // The Task-list grammar: a clearable Group-by + filter chips derive the
   // sections; empty groups drop (except desks — the journey stays visible).
   const [taskGroup, setTaskGroup] = useState<"desk" | "assignee" | "status" | null>("desk");
@@ -1866,6 +1895,23 @@ export function TplRecord() {
                             <InlineMemberSelect variant="cell" avatarOnly members={TEAM} value={t.assignee} onSave={(m) => assignTask(t.id, m)} accessibilityLabel={`Assignee · ${t.label}`} />
                           </View>
                         }
+                        // the row's own NOTE — the muted second line under the
+                        // title (the "why it's stuck" a task carries); the kit
+                        // owns the whole affordance, so nothing here hand-rolls
+                        // a line + editor. Empty = the add button on the row.
+                        note={{ value: t.note, onSave: (v) => noteTask(t.id, v), addLabel: `Add note: ${t.label}` }}
+                        // the row's CHILD STEPS — one task made of several
+                        // ticks. The kit renders the chevron + remaining count
+                        // on the parent and the indented child rows when open;
+                        // an EMPTY list renders nothing, so every row can pass
+                        // the prop unconditionally. Expansion is left
+                        // UNCONTROLLED: a row with work left opens itself.
+                        subtasks={{
+                          items: t.subtasks.map((s) => ({ key: s.key, label: s.label, checked: s.done, onToggle: (on) => toggleSubtask(t.id, s.key, on) })),
+                          // the row name matters once the list is long — the
+                          // locale default ("Subtasks: 3 left") can't know it
+                          countLabel: (missing) => (missing > 0 ? `Subtasks · ${t.label}: ${missing} left` : `Subtasks · ${t.label}: all done`),
+                        }}
                         menu={{ items: menuItems, accessibilityLabel: `Task options: ${t.label}` }}
                       >
                         <InlineTextInput

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "16.1.0",
+  "version": "16.2.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -314,4 +314,4 @@
     "unified": "^11.0.5",
     "vite": "^7.2.4"
   }
-}
+}

package/src/checklist.tsx CHANGED Viewed

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

package/src/date_picker.tsx CHANGED Viewed

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

package/src/detail_row.tsx CHANGED Viewed

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

package/src/form_date_picker.tsx CHANGED Viewed

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

package/src/form_field.tsx CHANGED Viewed

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

package/src/icon.tsx CHANGED Viewed

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

package/src/inline_edit.tsx CHANGED Viewed

@@ -90,6 +90,34 @@ export function useInlineEdit<T>(opts: {
   return { editing, draft, setDraft, saving, error, begin, cancel, commit };
 }
+/**
+ * Keyboard TAB-ORDER continuity for any inline editor: when edit mode closes
+ * while its input still holds focus (Enter, Escape, a ✓/✕), the unmount drops
+ * focus to `<body>` and the next Tab would restart from the top of the page —
+ * so `restore` is called to put focus back on the RESTING control.
+ *
+ * Gated on KEYBOARD modality: a POINTER close also drops focus to `<body>`, but
+ * restoring there both steals focus from a mouse user AND — because a bare
+ * `.focus()` scrolls the target into view — jumps the scroll position. A mouse
+ * user has no "next Tab" to preserve. A Tab-away blur-commit leaves focus on the
+ * next field (not `<body>`), so this never steals focus back either.
+ */
+export function useInlineEditFocusRestore(editing: boolean, restore: () => void) {
+  const wasEditing = useRef(editing);
+  useEffect(() => {
+    if (
+      wasEditing.current &&
+      !editing &&
+      typeof document !== "undefined" &&
+      document.activeElement === document.body &&
+      shouldRestoreFocusOnClose(getInteractionModality())
+    ) {
+      restore();
+    }
+    wasEditing.current = editing;
+  }, [editing, restore]);
+}
 /** Which surface an inline editor lives on — the ONE axis that separates a FORM
  *  field from a data-grid CELL:
  *  - `"form"` (default): the zinc-50 chip at rest + a hover-BORDER. THE editability
@@ -243,7 +271,6 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
   const viewRef = useRef<View>(null);
   const suppressedAt = useRef<number | null>(null);
-  const wasEditing = useRef(editing);
   // Keyboard focus opens edit mode immediately; the input's own `autoFocus`
   // then moves focus into it. Pointer focus never lands here (mousedown records
@@ -255,32 +282,15 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     onBegin();
   }, [disabled, onBegin]);
-  // When edit mode closes while its input (or a ✓/✕ button) still holds focus —
-  // Enter, Escape, the buttons — the unmount drops focus to <body> and the next
-  // Tab would restart from the top of the page. Return focus to the view button,
-  // arming the suppression window so the programmatic focus doesn't re-open the
-  // editor it just closed. A Tab-away blur-commit leaves focus on the next field
-  // (not <body>), so this never steals focus back.
-  //
-  // Gate on KEYBOARD modality: this restore exists solely for keyboard Tab-order
-  // continuity. A POINTER close (click ✓/✕, or click away onto non-focusable
-  // space) also drops focus to <body>, but restoring it there both steals focus
-  // from a mouse user AND — because a bare `.focus()` scrolls the target into
-  // view — jumps the scroll position (often to the top of the page). A mouse
-  // user has no "next Tab" to preserve, so skip the restore for pointer closes.
-  useEffect(() => {
-    if (
-      wasEditing.current &&
-      !editing &&
-      typeof document !== "undefined" &&
-      document.activeElement === document.body &&
-      shouldRestoreFocusOnClose(getInteractionModality())
-    ) {
+  // Focus returns to the view button on a keyboard close, arming the suppression
+  // window so the programmatic focus doesn't re-open the editor it just closed.
+  useInlineEditFocusRestore(
+    editing,
+    useCallback(() => {
       suppressedAt.current = Date.now();
       viewRef.current?.focus();
-    }
-    wasEditing.current = editing;
-  }, [editing]);
+    }, []),
+  );
   if (!editing) {
     return (

package/src/locale.tsx CHANGED Viewed

@@ -69,6 +69,18 @@ export interface LoticsLocale {
   trendFooter: { up: string; down: string };
   /** `SuggestionChip`: the press target's default name and the ✕ tooltip. */
   suggestionChip: { add: (label: string) => string; dismiss: string };
+  /** `ChecklistRow`'s per-row NOTE: the add affordance's name/tooltip, the note
+   *  line's press name (it WRAPS the note text so the line is announced with
+   *  it), and the editor's placeholder — plus the SUBTASK expander's name,
+   *  given the count of unchecked children. The expander's open/closed state
+   *  rides `aria-expanded`, so `subtasks` must NOT name it: one stable name,
+   *  or every toggle re-announces the control. */
+  checklist: {
+    addNote: string;
+    editNote: (note: string) => string;
+    notePlaceholder: string;
+    subtasks: (missing: number) => string;
+  };
   /** `Confidence`: the full level phrase ("High confidence" …). */
   confidence: ConfidenceLabels;
   /** `Finding`: the severity badge word ("Critical" …). */
@@ -162,7 +174,7 @@ export const en: LoticsLocale = {
     descending: ", descending",
   },
   optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
-  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
+  datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
@@ -176,6 +188,12 @@ export const en: LoticsLocale = {
   chip: { remove: "Remove" },
   trendFooter: { up: "Up", down: "Down" },
   suggestionChip: { add: (label) => `Add: ${label}`, dismiss: "Dismiss suggestion" },
+  checklist: {
+    addNote: "Add note",
+    editNote: (note) => `Edit note: ${note}`,
+    notePlaceholder: "Add a note…",
+    subtasks: (missing) => (missing > 0 ? `Subtasks: ${missing} left` : "Subtasks: all done"),
+  },
   confidence: { high: "High confidence", medium: "Medium confidence", low: "Low confidence" },
   remainderMeter: {
     applied: (allocated, total) => `${allocated} of ${total} applied`,
@@ -260,7 +278,7 @@ export const vi: LoticsLocale = {
     descending: " (giảm dần)",
   },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
-  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
+  datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },
@@ -274,6 +292,12 @@ export const vi: LoticsLocale = {
   chip: { remove: "Xóa" },
   trendFooter: { up: "Tăng", down: "Giảm" },
   suggestionChip: { add: (label) => `Thêm: ${label}`, dismiss: "Bỏ gợi ý" },
+  checklist: {
+    addNote: "Thêm ghi chú",
+    editNote: (note) => `Sửa ghi chú: ${note}`,
+    notePlaceholder: "Thêm ghi chú…",
+    subtasks: (missing) => (missing > 0 ? `Việc con: còn ${missing}` : "Việc con: đã xong"),
+  },
   confidence: { high: "Độ tin cậy cao", medium: "Độ tin cậy trung bình", low: "Độ tin cậy thấp" },
   remainderMeter: {
     applied: (allocated, total) => `Đã phân bổ ${allocated}/${total}`,