@lotics/ui 17.0.1 → 17.0.2

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.1",
+  "version": "17.0.2",
   "type": "module",
   "exports": {
     "./vite": {