@lotics/ui 5.10.0 → 5.10.1

package/AGENTS.md

@@ -690,7 +690,11 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
   rows). For thousands+ you BROWSE, that's `tpl_dossier`'s paginated register, not this.** Both build
   on the `DataGrid` primitive (the grid shape, extracted once these two uses confirmed it); each owns
   only its data, toolbar, columns and per-group add. There is NO Task component — a task ROW varies
-  too much to bake into one, so rows compose `CheckCircle` + `InlineTextInput` + inline-editor cells.
+  too much to bake into one, so rows compose `CheckCircle` + `InlineTextInput` + inline-editor cells
+  as **sibling** controls in a plain `View`. NEVER wrap the whole row in a `Pressable accessibilityRole="button"`
+  (for tap-to-expand) with those controls nested inside: RNW renders the row AND each control as a `<button>`,
+  so you get `<button>`s inside a `<button>` — invalid DOM + the inner controls drop out of the keyboard tab
+  order. Give "expand" its own affordance (a trailing `Pressable` over the meta/chevron), as `tpl_tasks` does.
 - **Data capture** — `tpl_intake` (multi-fieldset form + attachments) · `tpl_order` (the
   transactional form: find-or-create + line items + attachment CRUD + 2-col grid) · `tpl_billing`
   (charges→invoice→collect: the invoice DOCUMENT is the unit — editable charge lines + method,

package/examples/tpl_tasks.tsx

@@ -285,25 +285,38 @@ export function TplTasks() {
                 const d = dueInfo(t.due);
                 return (
                   <View key={t.id}>
-                    <Pressable onPress={() => toggleExpand(t.id, !open)} accessibilityRole="button" accessibilityLabel={t.title} style={({ hovered }: { hovered?: boolean }) => [styles.row, hovered ? styles.rowHover : null]}>
+                    {/* A row is NOT a single button: the ring, the title, and the expand
+                        affordance are SIBLING controls in a plain View. Wrapping the row in a
+                        Pressable accessibilityRole="button" while nesting CheckCircle +
+                        InlineTextInput (each renders a <button> on web) would put <button>s
+                        inside a <button> — invalid DOM + the inner controls drop out of the
+                        keyboard tab order. So the expand affordance is its own Pressable. */}
+                    <View style={styles.row}>
                       <CheckCircle checked={done} onChange={(on) => patch(t.id, { status: on ? "done" : "todo" })} accessibilityLabel={t.title} />
                       <View style={{ flex: 1 }}>
                         <InlineTextInput value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={done} accessibilityLabel="Title" />
                       </View>
-                      <View style={styles.meta}>
-                        {t.files.length > 0 ? (
-                          <View style={styles.clip}>
-                            <Icon name="paperclip" size={13} color={colors.zinc[400]} />
-                            <Text size="xs" color="muted" tabular>{t.files.length}</Text>
-                          </View>
-                        ) : null}
-                        {t.tags.length > 0 ? (
-                          <View style={styles.dots}>{t.tags.map((tag) => <View key={tag.value} style={[styles.dot, { backgroundColor: tagColor(tag) }]} />)}</View>
-                        ) : null}
-                        {d ? <Text size="xs" weight="medium" color={d.overdue && !done ? "danger" : "muted"}>{d.label}</Text> : null}
-                      </View>
-                      <Icon name={open ? "chevron-up" : "chevron-down"} size={16} color={colors.zinc[300]} />
-                    </Pressable>
+                      <Pressable
+                        onPress={() => toggleExpand(t.id, !open)}
+                        accessibilityRole="button"
+                        accessibilityLabel={open ? `Collapse ${t.title}` : `Expand ${t.title}`}
+                        style={({ hovered }: { hovered?: boolean }) => [styles.expand, hovered ? styles.rowHover : null]}
+                      >
+                        <View style={styles.meta}>
+                          {t.files.length > 0 ? (
+                            <View style={styles.clip}>
+                              <Icon name="paperclip" size={13} color={colors.zinc[400]} />
+                              <Text size="xs" color="muted" tabular>{t.files.length}</Text>
+                            </View>
+                          ) : null}
+                          {t.tags.length > 0 ? (
+                            <View style={styles.dots}>{t.tags.map((tag) => <View key={tag.value} style={[styles.dot, { backgroundColor: tagColor(tag) }]} />)}</View>
+                          ) : null}
+                          {d ? <Text size="xs" weight="medium" color={d.overdue && !done ? "danger" : "muted"}>{d.label}</Text> : null}
+                        </View>
+                        <Icon name={open ? "chevron-up" : "chevron-down"} size={16} color={colors.zinc[300]} />
+                      </Pressable>
+                    </View>
                     {open ? (
                       <View style={styles.detail}>
                         <Field label="Due">
@@ -414,6 +427,9 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
   rowHover: { backgroundColor: colors.zinc[50] },
+  // The expand affordance — its own button (meta + chevron), sibling to the ring
+  // and title so no interactive control nests inside another.
+  expand: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 36, paddingHorizontal: 8, borderRadius: 8 },
   capture: {
     borderBottomWidth: 1,
     borderBottomColor: colors.zinc[100],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.10.0",
+  "version": "5.10.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",