@lotics/ui 43.3.1 → 43.4.0

package/docs/composition.md

@@ -884,6 +884,15 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   the row is filled. In a label-left grid, ONE FIELD PER ROW is not a failure to compact; it is
   the only shape that keeps the column a reader scans. Both attempts are recorded here so nobody
   re-runs them.
+  **A spread `DetailRow` gives its VALUE the squeeze, never its label.** The two share one flex
+  row, so whichever of them cannot shrink forces the other to. A flex child defaults to
+  `min-width: auto`, which floors the value at its longest word — and the label, having no floor
+  of its own, absorbs everything left: on a narrow register a two-word label collapsed to a 4px
+  column 200px tall, one character per line. The `minWidth: 0` on the value is what stops it, and
+  it is load-bearing rather than housekeeping. **The probe generalises past this component**:
+  wherever a fixed-ish label shares a row with a `flex: 1` value, measure the LABEL's width and
+  height across rows whose values differ in length — a label whose box changes shape from row to
+  row is the signature, and it is invisible at any width where every value happens to fit.
   The other caveat: that research studies COMPLETION forms, where the failure mode is a skipped
   required field, while a record page is read-mostly.
   A SUMMARY belongs to the RECORD, not to a section. The highlights-panel precedent (a strip of

package/package.json

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

package/src/detail_row.tsx

@@ -252,7 +252,16 @@ const styles = StyleSheet.create({
   // is the one that gives way, because it is the one that is long. Both stay
   // shrinkable on purpose: a long LABEL against a short value has to wrap too,
   // and pinning the label unshrinkable would just overflow the row the other way.
-  flexLabel: { flexGrow: 1, flexShrink: 1, flexBasis: "auto" },
+  // Spread mode's label. It does NOT shrink, and that is the whole rule: both
+  // items in this row are floorless under React Native Web (which defaults flex
+  // children to `min-width: 0`, unlike the web's `auto`), so with shrink on both
+  // the flex algorithm splits the deficit and the LABEL loses — measured on a
+  // narrow register, a two-word column name collapsed to a 4px box 200px tall,
+  // one character per line, while its neighbour with a short value measured a
+  // clean 251x20. A label the reader cannot finish makes the row meaningless,
+  // and the value beside it wraps for free (`spreadValue` already carries the
+  // `minWidth: 0` that lets it), so the value is the one that gives way.
+  flexLabel: { flexGrow: 1, flexShrink: 0, flexBasis: "auto" },
   // `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

package/src/member_chip.tsx

@@ -15,6 +15,11 @@ interface MemberChipProps {
   /** A rung on the shared avatar scale. Default `md`, which is sized to seat in a
    *  40px control band; drop to `sm` for a dense cell. See `AVATAR_PX`. */
   size?: AvatarSize;
+  /** This person is no longer active — they left, their account was closed.
+   *  Mutes the name so a record that still names them reads as history rather
+   *  than as a current assignment. The chip keeps its height, because its usual
+   *  home is a fixed row: this is a colour change, never an extra line. */
+  inactive?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -34,7 +39,14 @@ interface MemberChipProps {
  * preserve by hand: it is why `md` is 28 rather than the 36 that used to grow
  * those three surfaces to 46, 50 and 54 for the very same chip.
  */
-export function MemberChip({ name, image, secondary, size = "md", style }: MemberChipProps) {
+export function MemberChip({
+  name,
+  image,
+  secondary,
+  size = "md",
+  inactive,
+  style,
+}: MemberChipProps) {
   const displayName = name?.trim() || "Unknown";
   // THE TEXT FOLLOWS THE RUNG. `size` used to scale the avatar alone, so a chip
   // asked for the dense rung got a 24px avatar beside a 14px name — half-dense,
@@ -50,7 +62,12 @@ export function MemberChip({ name, image, secondary, size = "md", style }: Membe
     <View style={[styles.row, style]}>
       <Avatar size={size} name={displayName} source={image ? { uri: image } : undefined} />
       <View style={styles.text}>
-        <Text userSelect="none" size={textSize} numberOfLines={1}>
+        <Text
+          userSelect="none"
+          size={textSize}
+          color={inactive ? "zinc-500" : undefined}
+          numberOfLines={1}
+        >
           {displayName}
         </Text>
         {secondary ? (