@lotics/ui 17.0.0 → 17.0.2

package/docs/data_entry.md

@@ -275,10 +275,26 @@ aligns with nothing.
 date, a menu and children of its own. There is no separate subtask shape to outgrow, and no
 built-in chevron: collapsing is the app's call (hold a boolean, render the nested list or don't).
 
-**State flows from the LEAVES.** Where a parent's position is computable from its children, DERIVE
-it and render the parent's status read-only — an editable copy lets a row disagree with its own
-children, and makes the operator enter one fact twice. Give the parent's ring the bulk gesture
-instead (tick it, every child ticks). A parent with nothing to derive from is set by hand.
+**State flows from the LEAVES.** Where a row's position is computable from what it owns, DERIVE
+it — a stored status is a second copy of what the fields already say, and two copies drift. Give
+the parent's ring the bulk gesture where its children ARE the fact (tick it, every child ticks);
+where the ring answers a DIFFERENT field the children do not determine — a date, say — coupling
+them asserts something the operator never said.
+
+**`TaskFields` holds CONTROLS.** Where exactly one field determines a row's status, that cell IS
+the field's editor: a read-only copy above an editable control puts one value on the row twice,
+under two labels. Everything else derived is prose in `TaskCaption`. A read-only pill parked in
+the column sits `TASK_TEXT_INSET` left of its neighbours (a `variant="cell"` control insets its
+text by that much; a bare `Badge` by nothing) and reads as pressable when it is not. A `Badge`
+INSIDE a cell control is fine — it inherits that cell's inset, and the 12px its label sits in by
+is the dot and its gap, not padding.
+
+**A status reports what is OUTSTANDING, never what is settled.** A finished row already says so
+twice — a full ring and its date — so naming the settled condition is a third copy of one fact.
+The empty end is worse than redundant: "every document is in" and "nobody has looked yet" are the
+same empty list, so a badge asserting the first states something no one established. Stay silent
+at both ends, and separate "is it under way" (which drives the ring) from "has it anything to
+say" (which drives the caption) — fusing them forces every pending state to invent a label.
 
 `CheckCircle` has THREE positions (`state="none" | "partial" | "done"`), and `partial` is not
 optional dressing: a step whose vocabulary reads "No portal account → Account created → Filed

package/docs/templates.md

@@ -355,9 +355,11 @@ billing, and quick-capture templates. Top → bottom:
   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 (the
-  `TaskFields` line: 13px `circle-alert` + "Needs: …" the actual field labels — muted at rest so
-  gaps show WITHOUT checking, warning once checked because it now blocks). The FIX sits
+  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,
+  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
   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_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, TaskDetail, TaskFields, TaskItem, TaskList, TaskStatus, TaskTitle } from "@lotics/ui/task";
+import { TaskActions, TaskCaption, TaskDetail, TaskFields, TaskItem, TaskList, TaskStatus, TaskTitle, TASK_TEXT_INSET } 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";
@@ -1900,7 +1900,10 @@ export function TplRecord() {
                                   <CheckCircle state={sub.done ? "done" : "none"} onChange={(on) => toggleSubtask(t.id, sub.key, on)} accessibilityLabel={sub.label} />
                                 </TaskStatus>
                                 <TaskTitle>
-                                  <Text size="sm" color={sub.done ? "muted" : "default"} decoration={sub.done ? "lineThrough" : undefined}>{sub.label}</Text>
+                                  {/* 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>
                               </TaskItem>
                             ))}
@@ -2261,15 +2264,23 @@ export function TplRecord() {
                             <CheckboxInput accessibilityLabel={f.label} checked={checked} onChange={(on) => toggleForm(f.id, on)} />
                           </TaskStatus>
                           <TaskTitle>
-                            <Text size="sm" style={{ flexShrink: 1 }}>{f.label}</Text>
+                            {/* 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>
+                          {/* "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. */}
                           {missing.length > 0 ? (
-                            <TaskFields>
-                            <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 5 }}>
-                              <Icon name="circle-alert" size={13} color={checked ? colors.amber[500] : colors.zinc[400]} />
-                              <Text size="xs" color={checked ? "warning" : "muted"} style={{ flexShrink: 1 }}>{`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")}`}</Text>
-                            </View>
-                            </TaskFields>
+                            <TaskCaption>
+                              <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 5 }}>
+                                <Icon name="circle-alert" size={13} color={checked ? colors.amber[500] : colors.zinc[400]} />
+                                <Text size="xs" color={checked ? "warning" : "muted"} style={{ flexShrink: 1 }}>{`Needs: ${missing.map((k) => NEEDS[k].label).join(", ")}`}</Text>
+                              </View>
+                            </TaskCaption>
                           ) : null}
                           {checked && missing.length > 0 ? (
                             <TaskDetail>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "17.0.0",
+  "version": "17.0.2",
   "type": "module",
   "exports": {
     "./vite": {

package/src/checkbox.tsx

@@ -9,6 +9,12 @@ interface CheckboxProps {
 
 export function Checkbox(props: CheckboxProps) {
   const { checked, indeterminate } = props;
+  // `indeterminate` FILLS the box, exactly as `checked` does — the mixed state is a painted
+  // box with a dash on every platform that has one, and the dash is drawn in `white`. Keying
+  // the fill on `checked` alone meant a mixed-but-unchecked control drew a white dash on the
+  // white background: invisible. Every `selectAll` therefore reported "nothing selected" while
+  // rows were selected — under-reporting, which is the worse direction to be wrong in.
+  const filled = checked || indeterminate === true;
 
   return (
     <View
@@ -19,7 +25,7 @@ export function Checkbox(props: CheckboxProps) {
         alignItems: "center",
         borderWidth: 1,
         borderColor: colors.border,
-        backgroundColor: checked ? colors.zinc["800"] : colors.background,
+        backgroundColor: filled ? colors.zinc["800"] : colors.background,
         borderRadius: 6,
       }}
     >

package/src/task.tsx

@@ -71,13 +71,15 @@ const DENSE_ROW = 32;
 /** Horizontal rhythm between the row's slots. */
 const ROW_GAP = 12;
 /**
- * The inline controls rest inside 8px of horizontal padding, so a `variant="cell"` title's
- * TEXT starts 8px inside its box. Everything that hangs beneath a row — the caption, the
- * detail, a nested list — adds the same inset, so it lines up with the words rather than with
- * the editor's invisible box. A plain-`Text` title should carry it too (`TASK_TEXT_INSET`),
- * or its caption will sit 8px to its right.
+ * How far a `variant="cell"` control insets its own text: 1px of transparent border plus 8px
+ * of padding. Everything that hangs beneath a row — the caption, the detail, a nested list —
+ * adds the same, so it lines up with the WORDS rather than with the editor's invisible box. A
+ * plain-`Text` title carries it too, or it sits out of line with the editable titles around it.
+ *
+ * It was 8 — the padding alone, forgetting the border — which put every caption, detail block
+ * and nested list 1px left of the title it belonged to.
  */
-export const TASK_TEXT_INSET = 8;
+export const TASK_TEXT_INSET = 9;
 
 export interface TaskListProps {
   children: ReactNode;