@lotics/ui 45.6.0 → 45.6.1

package/docs/catalog.md

@@ -1477,6 +1477,15 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   when a slot is passed: `right` is routinely conditional, and an anatomy that flipped on that
   would make two rows in one list press differently. Nothing to opt into — a decorative
   `right` simply stops being part of the press target.
+  **The row OWNS its `title`/`description` pair, so do not hand-roll one beside it.** Both
+  lines are `sm`, `leading="tight"`, no gap between them — the stacked-pair law in
+  [composition.md](./composition.md), applied by the component rather than restated at each
+  call site. It shipped rendering that pair as PROSE (two 24px boxes plus a 2px gap = 12px
+  between the lines, against the 6px the rule prescribes), and the height was sized around
+  that mistake at 64, which left a correctly-sized `md` mark adrift in it; the row is 56 now.
+  A `description` passed as a NODE keeps its own leading — the component only sets it on the
+  string branch, because forcing a line box on somebody else's subtree re-spaces content that
+  may not be a line of text at all.
 - **`table`** — `Table` + `TableRow` + `TableCell`: the paginated high-volume register
   (columns defined once, `sortLabels` localizable; rows are `PressableRow`-based).
   CONTAINER-RESPONSIVE with no prop (measures itself, like `Breakdown`/`DetailTable`): when

package/package.json

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

package/src/list_item.tsx

@@ -57,15 +57,29 @@ export function ListItem(props: ListItemProps) {
   const body = (
     <>
       {left}
+      {/* A STACKED PAIR, and it was rendered as prose. Both lines are `sm`, so
+          the rungs were never the problem — the LEADING was: two 24px prose line
+          boxes around 14px glyphs leave 5px of empty box above and below each,
+          which is 10px between them, and a `gap: 2` on the container made 12. The
+          composition rule this surface is supposed to follow puts a pair at 6:
+          `leading="tight"` on both body-rung lines and NO gap, because each tight
+          box already contributes 3px a side. Twice the intended distance is what
+          makes a name and its role read as two separate lines rather than one
+          object, which is how the defect gets reported — as "too far apart",
+          never as its cause.
+
+          `tight` goes on the string branch only. A caller passing a NODE owns its
+          own leading, and forcing one on somebody else's subtree would silently
+          re-space a description that is not a line of text at all. */}
       <View style={styles.textContainer}>
         {!!title && (
-          <Text weight="medium" numberOfLines={1} userSelect="none">
+          <Text weight="medium" leading="tight" numberOfLines={1} userSelect="none">
             {title}
           </Text>
         )}
         {!!description &&
           (typeof description === "string" ? (
-            <Text size="sm" color="zinc-500" numberOfLines={1} userSelect="none">
+            <Text size="sm" color="zinc-500" leading="tight" numberOfLines={1} userSelect="none">
               {description}
             </Text>
           ) : (
@@ -157,18 +171,27 @@ function PressRow(props: {
 }
 
 const styles = StyleSheet.create({
+  // 56, not 64. The height was sized around a pair rendered as prose — two 24px
+  // boxes plus a 2px gap is 50, and 64 left 14px of slack the row did not ask
+  // for, which is what made a correctly-sized `md` mark (28px, the documented
+  // rung for a person in a list) look adrift in it. A tight pair is 40, so 56
+  // gives it the same 8-a-side the rest of the kit's rows carry. A title-only
+  // row keeps one 20px line centred in the same box, so the two shapes still
+  // share a beat.
   container: {
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
-    height: 64,
+    height: 56,
     paddingHorizontal: 8,
     marginHorizontal: -8,
     borderRadius: 12,
   },
+  // NO GAP. Each tight line box already contributes 3px above and below its
+  // glyphs, so the pair reads at 6px — a gap here is a third source of space
+  // between two lines meant to read as one object.
   textContainer: {
     flex: 1,
-    gap: 2,
     alignItems: "flex-start",
   },
   selected: {