@lotics/ui 47.0.0 → 47.1.1

package/docs/catalog.md

@@ -86,6 +86,13 @@ inline: a picker option, an assignee, a `select_member` value. Pure: resolve the
 your directory and pass `name` / `image`; never hand-roll `Avatar` + `Text`. (`MemberSelect`
 renders these per option.)
 
+**`showAvatar={false}` where the member is ONE FIELD AMONG COLUMNS** — an owner, an assignee,
+a last-edited-by. Keep the face where the member IS the subject (a roster, a picker option, a
+profile). In a supporting column it fails twice: it competes with the mark the row already
+carries for its own subject, and on a real book a few people own hundreds of rows, so the
+column draws one repeated disc — which `composition.md` §Identity marks calls a mark that
+"carries nothing and is the largest, brightest thing there".
+
 **To answer "who IS this?" — `MemberPeek`**, the same chip made a door onto a
 `MemberProfileCard`: a 72px avatar, what they sign in as, their role, their teams and when they
 joined. The trigger takes `Peek`'s `variant="control"` there, so the chip seats in the 40px
@@ -130,7 +137,11 @@ that a whole office shares.
 `ThumbnailStack` is `AvatarGroup`'s sibling over a different subject: a capped, overlapping set
 of PICTURES answering "an order of what?", "which parts?", "what arrived?" in one register cell.
 Pass `{ id, label, image }` per thing; `max` (default 3) caps it and the rest become the `+N`
-mark at the end of the stack. Both components read their separating edge from `mark_stack.ts`,
+mark at the end of the stack. Each mark ANNOUNCES its label by default — a standalone stack is
+unreadable otherwise — so pass **`decorative`** where the row already names the thing in text, or
+the pictures read it a second time on every row. (The default is the opposite of
+`Avatar.announce`, and for the same reason: an avatar almost always sits beside its name, a stack
+often does not. The default follows where the component actually sits.) Both components read their separating edge from `mark_stack.ts`,
 so a row carrying people in one column and goods in the next reads as one device used twice
 rather than two — but they **tuck by different fractions, and that is deliberate**: a face is
 edge-anchored and survives being covered two thirds of the way, while a product shot centres its
@@ -279,7 +290,12 @@ by size.)
   search, you don't group. Worked example: [`tpl_item_list`](../examples/tpl_item_list.tsx).
   Never an HTML `<table>` or a `.map` of rows. The register adapts to its container on its
   own — hides columns by `priority`, stacks rows below the two-column floor (see the `table`
-  inventory entry) — so a narrow screen or panel needs NO branching; compose a hand-designed
+  inventory entry) — so a narrow screen or panel needs NO branching. **A flexible column that
+  carries fixed chrome inside its cell declares it as `lead`** (a leading mark plus its gap): the
+  fit guarantees a READ floor for the text, and without `lead` the mark eats part of that floor,
+  so a register reports "fitted" while its subject clips. `composition.md` requires a leading mark
+  on every register row and `tpl_item_list` puts it inside the subject cell, so this is the
+  ordinary case, not an exotic one; compose a hand-designed
   card pile (`PressableRow` + your own hierarchy) over `useScreenSize` only when a screen
   deserves a better mobile shape than the automatic stack.
 - **Inline-managed grouped table** (MODERATE — hundreds, low-thousands — you MANAGE in view)
@@ -1351,7 +1367,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   EXACTLY (height, padding, 1px transparent border) so a non-editable field — a computed
   total, a system ID, a synced/locked value — aligns pixel-for-pixel in the same column;
   non-interactive, NOT a disabled input; `muted`/`tabular`/`align="right"` for a number
-  column, `weight="medium"` to emphasise a total among plain rows, `multiline` to WRAP rather
+  column, `weight="medium"` to emphasise a total among plain rows, **`actions` for a verb about
+  the value** (look this id up, copy it, request the gated change) — a static value is still a
+  field, and its verb belongs on the field's surface, never on the row's ground where an
+  `InlineButton` has nothing under it; `multiline` to WRAP rather
   than truncate (single-line is the default, because a field column reads as a column only if
   its rows are one height — pass it where the counterpart editor is itself `multiline`, or a
   truncated value beside a wrapping input reintroduces the misalignment on the other axis).
@@ -1376,7 +1395,18 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`inline_button`** — `InlineButton`: a verb that sits INSIDE an inline field's surface
   (the `Open` on a reference, a `Copy` on a value worth copying) rather than in the row's
   trailing column — put it inside when the act is ABOUT THE VALUE, so it travels with what it
-  acts on and the trailing column stays free for row-level verbs. FILLED (`Button secondary`'s own
+  acts on and the trailing column stays free for row-level verbs.
+
+  **NEVER use it outside an inline field.** Not in a section header, not in a toolbar, not as a
+  row action, not as a card's own verb — it is an *inner* control of a field, and the whole of its
+  design says so: it is FILLED against the field's white ground (a relationship to a surface it no
+  longer has when you move it), it is 28px against a 40px band, it carries no border because the
+  field already draws one, and **it stops propagation** because the field beneath it is pressable.
+  Outside a field every one of those becomes wrong: it reads as a heavier `Button secondary` that
+  is mysteriously too small, it sits on a ground it was not contrasted against, and its swallowed
+  press is now swallowing nothing. If the verb is about the ROW use the row's trailing action; if
+  it is about the SECTION use its heading row; if it is about the SCREEN it is a `Button`. The
+  test is one question — **is there a field surface under it?** If not, it is the wrong control. FILLED (`Button secondary`'s own
   zinc-100) on the field's white surface — the contrast is a RELATIONSHIP, not a colour: invert it
   if the resting field surface ever changes, or the verb dissolves into the value. 28px, radius 8,
   no border (the field already has one) and no shadow (depth belongs to the primary action alone). **It stops propagation** — that is the contract: the

package/docs/composition.md

@@ -556,9 +556,25 @@ have decided the thing itself (which one they want).
 The toggle earns its place when the two states differ in more than a number — different rows,
 different units, a different shape of answer. Swapping `1.700.000` for `2.000.000` is not that.
 
+**A container's own gap must exceed the largest gap INSIDE its children — not just the gap to its
+siblings.** The comparison authors are told to make is within-group against between-group, which
+reads as "compare the two numbers *you* wrote". The failure that actually ships compares a number
+you wrote against one the KIT wrote inside a component you dropped in: a section body at 12 or 14
+around a field table that spaces its own rows at 16. Both are conventional, neither looks wrong
+alone, and the boundary BETWEEN two objects ends up tighter than the boundary inside one. Measured
+form: per container, collect its own `row-gap` and the **max `row-gap` of its visible children**;
+`own <= child-max` is the finding.
+
 ## Numbers, money, dates
 
 - Free-standing numerals: `<Text tabular>` — always.
+- **A kit component that RENDERS a number takes the app's formatter — it must never `String()` a
+  decimal.** In a locale that writes `28,9`, the one figure the kit prints for itself becomes the
+  one figure on the screen that is wrong, sitting beside numbers the app formatted correctly — and
+  in a locale where `.` is the *thousands* separator that is not a cosmetic difference, it is a
+  different quantity. `ChargeLines` takes `formatMoney` and `formatQuantity` for this reason, both
+  at the BAND so two lines cannot disagree, and threads them to the locked value and the inline
+  editor alike. Any new component that displays a caller's number owes the same hook.
 - **A column states its unit ONCE — which is only possible if it holds ONE unit.** State it in the
   header band and leave the cells bare. The corollary is the one that bites: a label/value list
   whose rows are a date range, a sum of money and a COUNT has no single unit to state, so each
@@ -1665,6 +1681,19 @@ information.
   identity a reader actually scans for — a deal takes its account's mark, since "whose deal is
   this" is the question being asked of the list. Only rows with genuinely no identity are exempt:
   a list of amounts, a log of events.
+- **A member as one FIELD among columns is TEXT, not a face** (`MemberChip showAvatar={false}`).
+  Keep the face where the member IS the subject — a roster, a picker option, a profile. In an
+  owner / assignee / last-edited-by column it fails twice over: it competes with the mark the row
+  already carries for its own subject, and on a real book a handful of people own hundreds of rows,
+  so the column draws the same disc over and over. Shipped example: an owner column rendering four
+  identical discs for two people, both initial "T", both hashed to a purple.
+- **A mark derived from POSITION is not identity — the list already draws position.** An ordinal
+  disc, a rank badge, an index chip *does* vary per row, so it passes "the mark must not look the
+  same on every row" and every probe built on that test. It fails for a different reason: it
+  restates what top-to-bottom order says, and it spends the one slot that could have carried the
+  subject. Keep the ordinal where order is the thing being EDITED, and then as text in the
+  supporting line — never as the mark. A surface that needs to state position has its own readout
+  (a drawer's `3/8`, a stepper's rail).
 - **The rung follows what the row is ABOUT**: `lg` where the entity is the row's subject, `md`
   where it is one field among columns (see `avatar_size`).
 - **A column of faces must not draw an UNBOUNDED audience as faces.** Where a cell answers "who
@@ -1692,12 +1721,19 @@ Every rule above removes a defect. None of them ADDS anything, so a screen can p
 and still be reported as plain, boring, or unfinished — which is a different complaint with a
 different fix.
 
-- **What is inherently visual in THIS data?** Work software has no photography, so the data itself
-  is the imagery: identity marks (above), status colour, file-type badges, sparklines, proportion
-  bars, tabular figures aligning down a column. Every one of these is information first and
-  decoration never — which is why they are the only kind of visual interest that survives contact
-  with a real dataset. Reaching instead for a gradient, an illustration or a hero band adds weight
-  without adding a single fact.
+- **What is inherently visual in THIS data?** Mostly the data itself: identity marks (above),
+  status colour, file-type badges, sparklines, proportion bars, tabular figures aligning down a
+  column. Every one of these is information first and decoration never — which is why they are the
+  only kind of visual interest that survives contact with a real dataset. Reaching instead for a
+  gradient, an illustration or a hero band adds weight without adding a single fact.
+- **But some entities DO have a likeness, and then it is the strongest mark available.** A product,
+  a property, a vehicle, a dish, a person — a reader recognises the thing itself faster than any
+  derived initial, and the picture is doing the identifying rather than decorating. Where the entity
+  has one, an empty image field is a **DATA gap, not a design constraint**: the fix is to put the
+  image on the record, not to restyle the row around its absence. A catalogue of sixty rows opening
+  with text reads as a fixture no treatment pass will rescue. The test is unchanged — it must make
+  the screen clearer AND better-looking — which is exactly what a thumbnail that is also the
+  identifier does, and exactly what a stock photo bolted onto a task list does not.
 - **What does the screen DECIDE?** A register listing every row at equal weight has no point of
   view: it hands the reader the same undifferentiated wall the query returned. A screen with a
   point of view puts what needs attention first (`TableGroup`), spends its one accent on where the

package/docs/reviewing.md

@@ -543,15 +543,23 @@ this converges on *distinctive*.
   largest, brightest thing there.
 - **What does the screen DECIDE?** A register listing every row at equal weight has no point of
   view. Usually the real answer when treatment fixes keep not landing.
-- **What is inherently visual in THIS data?** Where there is no photography — most work software —
-  the data is the imagery: identity marks, status colour, file-type badges, sparklines, proportion
-  bars, tabular figures.
+- **What is inherently visual in THIS data?** Usually the data itself: identity marks, status
+  colour, file-type badges, sparklines, proportion bars, tabular figures. **But check whether the
+  entity has a LIKENESS** — a product, a property, a vehicle, a person. If it does and the rows
+  open without one, query the image field's fill rate before writing a treatment finding: an empty
+  field makes this a DATA defect, and no amount of restyling fixes it.
 - **What makes this belong to THIS product?** Default typeface, default greys, default accent,
   default control shapes is a well-built generic screen, and no polish changes that. The fix is a
   theme, not another treatment pass.
 
 → [composition.md](./composition.md) §"Identity marks", §"Character comes from the DATA", §"Where the accent goes".
 
+**A driver's `.focus()` does not set `:focus-visible`** — so a focus-ring check driven
+programmatically reports *no ring* on a control whose ring is fine, and the audit spends its time
+on a defect that does not exist. Walk the surface with real `Tab` presses and read the computed
+`box-shadow` at each stop; `.focus()` is only good for asking what CAN take focus, never for how it
+looks when it does.
+
 ### 10. Microcopy
 - **No punctuation doing a word's job.** ` · ` is banned outright — it claims a relationship while
   refusing to name it, and it is the loudest templated-metadata tell there is. If a mark cannot be
@@ -637,6 +645,32 @@ variant that walks ELEMENTS rather than text nodes. Those tags hold text nodes t
 sees, and counting them produces confident nonsense — a page "with eight nodes in Times New Roman"
 that has none, or a clean tally on a screen with an untracked component still on it.
 
+### Identity marks — N identical is a finding, and only a per-COLUMN count sees it
+Probe 9 says "count them. Zero is the finding, and so is N identical" — and every other snippet
+here reads type, rules, gaps, states or reachability, so nothing fired on a column of identical
+discs. Group by the x band (i.e. by column), because that is what separates the row's own subject
+mark from a supporting column that borrowed identity weight.
+
+```js
+// → [{ x, count, distinct, sample }] — flag any band with count > 1 && distinct === 1
+Object.values(
+  [...document.querySelectorAll('[data-avatar], [class*="avatar"], img')]
+    .filter((n) => n.getBoundingClientRect().width > 0)
+    .reduce((acc, n) => {
+      const band = Math.round(n.getBoundingClientRect().x / 24) * 24;   // column, not pixel
+      const cs = getComputedStyle(n);
+      const key = [cs.backgroundColor, n.textContent?.trim(), n.getAttribute("src") ?? ""].join("|");
+      acc[band] ??= { x: band, keys: new Set(), count: 0 };
+      acc[band].keys.add(key);
+      acc[band].count++;
+      return acc;
+    }, {}),
+).map((b) => ({ x: b.x, count: b.count, distinct: b.keys.size, sample: [...b.keys][0] }));
+```
+
+A band with `count > 1 && distinct === 1` is the reported defect. A band whose `distinct` is well
+under `count` is the softer version — a palette collapsing on real names — and worth reading by eye.
+
 ### Separator beats — is the biggest boundary the widest?
 
 **A rule is a painted LINE, and it is drawn two ways.** Selecting "thin and wide" alone gets both

package/examples/tpl_item_list.tsx

@@ -1244,8 +1244,13 @@ export function TplItemList() {
         <Text size="xxl" weight="semibold">Records</Text>
 
         {/* toolbar — search + consolidated filters LEFT, New case RIGHT, one row.
-            A search is present, so status is a dropdown (Select), not pills. */}
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            A search is present, so status is a dropdown (Select), not pills.
+
+            `flex-start`, not `center`: the filter block wraps to two or three
+            lines on a phone, and centring floats the CTA against the whole
+            wrapped block — measured landing level with the SECOND row of chips,
+            anchored to nothing. The band's top edge is what it belongs to. */}
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
           <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center", flex: 1 }}>
             <View style={{ flexGrow: 1, flexBasis: 220, minWidth: 200, maxWidth: 340 }}>
               <SearchInput

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.0.0",
+  "version": "47.1.1",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/accordion.tsx

@@ -175,9 +175,14 @@ export interface AccordionContentProps {
 }
 
 /** The collapsible body, revealed in place under the header. Plain by
- * design — flush with the header's left edge (aligns with the title), no
- * tinted well; the chevron + position already say "inside". Compose
- * rows/dividers/actions directly. */
+ * design — flush with the header BOX's left edge, no tinted well; the chevron
+ * + position already say "inside". Compose rows/dividers/actions directly.
+ *
+ * It does NOT align with the title text: `AccordionTitle` always reserves a
+ * 16px icon slot plus a 12px gap, so the title starts 28px in while the content
+ * starts at 0. That is deliberate — the body belongs to the section, not to the
+ * heading — but it means a header with no icon shows the offset with nothing
+ * explaining it, so pass an icon when the gap reads as a mistake. */
 export function AccordionContent(props: AccordionContentProps) {
   const { expanded } = useAccordionContext();
   if (!expanded) return null;
@@ -210,8 +215,9 @@ const styles = StyleSheet.create({
   meta: {
     flexShrink: 1,
   },
-  // Flush with the header's left edge — aligns with the title, like a Section
-  // body. The chevron + position already say "inside"; no indent needed.
+  // Flush with the header BOX's left edge, like a Section body — NOT with the
+  // title text, which the icon slot pushes 28px in. The chevron + position
+  // already say "inside"; no indent needed.
   content: {
     paddingBottom: 10,
   },

package/src/bar_chart.tsx

@@ -300,7 +300,9 @@ export function BarChart(props: BarChartProps) {
                   <Text numberOfLines={1} weight="medium">
                     {item.label}
                   </Text>
-                  <Text color="muted">{formatNumber(item.value)}</Text>
+                  <Text numberOfLines={1} color="muted">
+                    {formatNumber(item.value)}
+                  </Text>
                 </View>
               ) : null}
             </View>

package/src/breakdown.tsx

@@ -85,7 +85,9 @@ export function Breakdown(props: BreakdownProps) {
               <Text size="sm" color={dimmed ? "muted" : "default"} numberOfLines={1} style={styles.label}>
                 {item.label}
               </Text>
-              <Text size="sm" weight={selected ? "semibold" : "regular"} color={dimmed ? "muted" : "default"} tabular>
+              {/* medium, matching `StackedBarChart`'s figure — the value is what the
+                  row is read for. `semibold` stays reserved for selection. */}
+              <Text size="sm" weight={selected ? "semibold" : "medium"} color={dimmed ? "muted" : "default"} tabular>
                 {formatValue(item.value)}
               </Text>
               <Text size="xs" color="muted" tabular align="right" style={styles.share}>

package/src/charge_lines.tsx

@@ -120,6 +120,11 @@ export interface ChargeLinesProps {
    *  not the sum of something visible is the one figure a reader cannot check. */
   total: number;
   formatMoney: (n: number) => string;
+  /** Format a QUANTITY. Band-level for the same reason `formatMoney` is: a
+   *  locale that writes `28,9` must not have the one figure the kit renders
+   *  itself print `28.9` while every number the app formats beside it reads
+   *  correctly. Defaults to the platform's own `String`. */
+  formatQuantity?: (n: number) => string;
   /** Sits in the closing row beside the total — the issue/collect action. */
   action?: ReactNode;
   /** Shown in place of the lines when there are none. */
@@ -129,7 +134,12 @@ export interface ChargeLinesProps {
 const QTY_W = 76;
 const OP_W = 14;
 const PRICE_W = 132;
-const QTY_W_NARROW = 48;
+// 48 fitted an integer and clipped `28,9` — 33px of text in the 30 left after the
+// inset and border, on 4 of 7 lines of a real record. A quantity with one decimal
+// is the ordinary case wherever goods are sold by weight, and `formatQuantity`
+// now makes the separator a comma in the locales that use one, which is no wider
+// but no narrower either. 60 seats four glyphs and a unit's worth of slack.
+const QTY_W_NARROW = 60;
 const PRICE_W_NARROW = 92;
 const AMOUNT_W = 108;
 const ACTION_W = 32;
@@ -138,7 +148,7 @@ const ACTION_W = 32;
 const FORK_AT = 520;
 
 export function ChargeLines(props: ChargeLinesProps) {
-  const { children, totalLabel, total, formatMoney, action, empty } = props;
+  const { children, totalLabel, total, formatMoney, formatQuantity, action, empty } = props;
   const [width, setWidth] = useState(0);
   const narrow = width > 0 && width < FORK_AT;
   const onLayout = useCallback((e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width), []);
@@ -146,7 +156,7 @@ export function ChargeLines(props: ChargeLinesProps) {
   const isEmpty = Array.isArray(rows) ? rows.length === 0 : !rows;
 
   return (
-    <ChargeLinesContext.Provider value={{ narrow, formatMoney }}>
+    <ChargeLinesContext.Provider value={{ narrow, formatMoney, formatQuantity }}>
       <View onLayout={onLayout} style={styles.band}>
         {isEmpty ? (
           <View style={styles.empty}>{empty}</View>
@@ -188,6 +198,10 @@ export function ChargeLine(props: ChargeLineProps) {
   const band = useChargeLines();
   const words = useLoticsLocale().chargeLines;
   const money = props.formatMoney ?? band.formatMoney;
+  const qty = band.formatQuantity ?? ((n: number) => String(n));
+  const fmtQty = band.formatQuantity
+    ? (v: number | null) => (v == null ? "" : qty(v))
+    : undefined;
   const priced = quantity !== undefined || unitPrice !== undefined;
   const amount = priced ? (quantity ?? 0) * (unitPrice ?? 0) : (props.amount ?? 0);
   /** The row's money verb — the unit price's on a priced line, the amount's on a
@@ -212,12 +226,13 @@ export function ChargeLine(props: ChargeLineProps) {
       <View style={{ width: band.narrow ? QTY_W_NARROW : QTY_W }}>
         {locked || !onQuantityChange ? (
           <Text size="sm" tabular style={styles.inset}>
-            {quantity ?? "—"}
+            {quantity == null ? "—" : qty(quantity)}
           </Text>
         ) : (
           <InlineNumberInput
             value={quantity ?? null}
             onSave={onQuantityChange}
+            format={fmtQty}
             min={0}
             placeholder="1"
             align="right"
@@ -340,7 +355,11 @@ export function ChargeLine(props: ChargeLineProps) {
   );
 }
 
-const ChargeLinesContext = createContext<{ narrow: boolean; formatMoney: (n: number) => string }>({
+const ChargeLinesContext = createContext<{
+  narrow: boolean;
+  formatMoney: (n: number) => string;
+  formatQuantity?: (n: number) => string;
+}>({
   narrow: false,
   formatMoney: (n) => String(n),
 });

package/src/finding.tsx

@@ -220,7 +220,7 @@ const styles = StyleSheet.create({
   // being read aloud, the same defect `CommentsButton` was fixed for. It also
   // wrapped: at phone width a line could BEGIN with the separator. Stacking pairs
   // each source with its own value at every width and needs no separator at all.
-  readings: { flexDirection: "column", alignItems: "flex-start", gap: 4 },
+  readings: { flexDirection: "column", alignItems: "stretch", gap: 4 },
   reading: { flexDirection: "row", alignItems: "baseline", gap: 5, minWidth: 0 },
   // The same split as `title`/`delta` one row up, for the same reason: the SOURCE
   // is a label and gives way, the VALUE is the figure and never does. Both halves

package/src/form_text_input.tsx

@@ -7,10 +7,17 @@ export interface FormTextInputProps extends Omit<FormFieldProps, "style">, TextI
 /** `FormField` (label / description / warning / error / optional) wrapping a `TextInputField` — one
  *  labeled text field. For a 2-col grid cell, prefer a bare `FormField style={half}` around the input. */
 export function FormTextInput(props: FormTextInputProps) {
-  const { label, description, warning, optional, error, ...textInputProps } = props;
+  const { label, description, warning, optional, optionalLabel, error, ...textInputProps } = props;
 
   return (
-    <FormField label={label} description={description} warning={warning} error={error} optional={optional}>
+    <FormField
+      label={label}
+      description={description}
+      warning={warning}
+      error={error}
+      optional={optional}
+      optionalLabel={optionalLabel}
+    >
       <TextInputField {...textInputProps} />
     </FormField>
   );

package/src/inline_edit.tsx

@@ -823,7 +823,11 @@ const styles = StyleSheet.create({
   // the row's own menu. With `marginLeft` alone the box grows leftward, its right
   // edge stays on the container, and `paddingRight` still holds the text off the
   // border.
-  viewBareBleed: { marginLeft: -8 },
+  // Stretches for the same reason `editRow` does — it is the outermost element
+  // when there are no verbs, so a right-aligned cell would size IT to content
+  // instead. The negative margin is the bare variant's deliberate 8px bleed, so
+  // the field reads 8px wider than its column by design.
+  viewBareBleed: { marginLeft: -8, alignSelf: "stretch", minWidth: 0 },
   // The shell's own inset: the right edge tightens to 4 so an `InlineButton` sits
   // on the surface's edge with the same air a `Chip`'s dismiss gets.
   shell: { paddingRight: 4 },
@@ -864,7 +868,13 @@ const styles = StyleSheet.create({
   // showed it — `Text` sets its own alignment — so the centring only surfaced
   // once `display` accepted a node and rendered prose that inherited it.
   viewNode: { flex: 1, minWidth: 0, textAlign: "left" },
-  editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6 },
+  // `alignSelf: stretch` because an inline edit takes its width from the COLUMN
+  // it sits in, never from what it happens to contain. Without it a right-aligned
+  // cell (`alignItems: flex-end`) sizes this row to its content, and in edit mode
+  // the content is a native `<input>`, whose default `size=20` is ~236px it will
+  // not shrink below. In a 104px quantity column that overflowed 132px LEFTWARD —
+  // pinned to the cell's right edge, spilling across the column beside it.
+  editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6, alignSelf: "stretch", minWidth: 0 },
   editControl: { flex: 1, position: "relative" },
   // The input brings its own 40px height, so the surface must not add its resting
   // vertical padding on top — that was a 12px jump the moment the field focused.

package/src/inline_slot.tsx

@@ -6,6 +6,10 @@ import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 export interface InlineSlotProps {
   /** Whatever sits in the value column — a `DiffValue`, a chip, a pair. */
   children: ReactNode;
+  /** Verbs about the value, pinned right ON the slot's surface — the same place
+   *  an editable `Inline*` puts its `actions`, so a static row and an editable
+   *  one carry their verbs on one edge. */
+  actions?: ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -32,11 +36,21 @@ export interface InlineSlotProps {
  * NOT for a table cell: a `Table` sets its own row rhythm, and a 40px control
  * band inside one only makes the rows taller.
  */
-export function InlineSlot({ children, style }: InlineSlotProps) {
-  return <View style={[styles.box, style]}>{children}</View>;
+export function InlineSlot({ children, actions, style }: InlineSlotProps) {
+  if (!actions) return <View style={[styles.box, style]}>{children}</View>;
+  return (
+    <View style={[styles.box, styles.withActions, style]}>
+      <View style={styles.grow}>{children}</View>
+      {actions}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
+  // The value takes the slack and the verbs pin right, so a column of rows —
+  // some with a verb, some without — keeps one right edge.
+  withActions: { flexDirection: "row", alignItems: "center", gap: 8 },
+  grow: { flex: 1, minWidth: 0 },
   // Matches `inline_edit`'s view box exactly (height, radius, padding, 1px
   // transparent border) so the content's baseline aligns with the editors —
   // minus the FocusRingPressable, so it never reads as an interactive control.

package/src/inline_static.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { StyleSheet } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
@@ -28,6 +29,18 @@ export interface InlineStaticProps {
    * misalignment this component exists to prevent, just on the other axis.
    */
   multiline?: boolean;
+  /**
+   * Verbs about THIS value, on the value's own surface — an `InlineButton`, the
+   * same slot every editable `Inline*` exposes.
+   *
+   * A read-only value often still has an act attached to it: look this id up,
+   * copy it, request the change that is gated behind an approval. Without this
+   * slot that verb has nowhere to sit but the row's ground, and an `InlineButton`
+   * outside a field surface is the wrong control (see `catalog.md`
+   * §`inline_button`). A static value is still a field; it just is not editable
+   * in place.
+   */
+  actions?: ReactNode;
 }
 
 /**
@@ -37,15 +50,16 @@ export interface InlineStaticProps {
  * locked value — sits flush in the same column as the editable rows. It is
  * NON-interactive (no hover, no pointer, no focus ring): it reads as a plain
  * value, NOT a disabled input. Pair with `DetailRow` exactly like the `Inline*`
- * editors; wrap it in a `flex:1` View when the row also carries a `trailing`
- * slot, so the value takes the slack and the trailing pins right.
+ * editors. A verb about the value goes in `actions`, on the value's own surface —
+ * `DetailRow` has no trailing slot, and a verb on the row's ground is an
+ * `InlineButton` without a field under it.
  */
 export function InlineStatic(props: InlineStaticProps) {
-  const { value, placeholder, muted, tabular, align = "left", weight, multiline } = props;
+  const { value, placeholder, muted, tabular, align = "left", weight, multiline, actions } = props;
   const isEmpty = value.length === 0;
   const display = isEmpty ? (placeholder ?? "—") : value;
   return (
-    <InlineSlot>
+    <InlineSlot actions={actions}>
       <Text
         numberOfLines={multiline ? undefined : 1}
         tabular={tabular}

package/src/member_chip.tsx

@@ -29,6 +29,20 @@ 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;
+  /**
+   * Drop the face and render the person as TEXT.
+   *
+   * Pass it wherever the member is ONE FIELD AMONG COLUMNS rather than the row's
+   * subject — an owner column, an assignee cell, a "last edited by". Two reasons,
+   * both from `composition.md` §Identity marks: a second mark competes with the
+   * mark the row already carries for its own subject, and a handful of people
+   * owning hundreds of rows draws the same disc over and over, which "carries
+   * nothing and is the largest, brightest thing there".
+   *
+   * Keep the face where the member IS the subject — a roster, a picker option, a
+   * profile, a directory row.
+   */
+  showAvatar?: boolean;
   /** 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
@@ -58,6 +72,7 @@ export function MemberChip({
   image,
   secondary,
   size = "md",
+  showAvatar = true,
   inactive,
   style,
 }: MemberChipProps) {
@@ -101,7 +116,9 @@ export function MemberChip({
     secondary && AVATAR_PX[size] < AVATAR_PX.lg ? "lg" : size;
   return (
     <View style={[styles.row, style]}>
-      <Avatar size={markSize} name={displayName} source={image ? { uri: image } : undefined} />
+      {showAvatar ? (
+        <Avatar size={markSize} name={displayName} source={image ? { uri: image } : undefined} />
+      ) : null}
       <View style={styles.text}>
         <Text
           userSelect="none"

package/src/menu_button.tsx

@@ -91,7 +91,11 @@ export function MenuButton(props: MenuButtonProps) {
 
   const resolvedIcon =
     typeof icon === "string" ? (
-      <Icon size={20} name={icon as IconName} color={danger ? colors.red["900"] : undefined} />
+      <Icon
+        size={20}
+        name={icon as IconName}
+        color={disabled ? colors.zinc["400"] : danger ? colors.red["900"] : undefined}
+      />
     ) : (
       icon
     );
@@ -102,7 +106,7 @@ export function MenuButton(props: MenuButtonProps) {
         weight="medium"
         numberOfLines={1}
         userSelect="none"
-        color={danger ? "danger" : undefined}
+        color={disabled ? "muted" : danger ? "danger" : undefined}
       >
         {title}
       </Text>
@@ -125,6 +129,7 @@ export function MenuButton(props: MenuButtonProps) {
     styles.container,
     highlighted && styles.highlighted,
     focused && !highlighted && styles.focused,
+    disabled && styles.disabled,
     style,
   ];
 
@@ -182,6 +187,11 @@ const styles = StyleSheet.create({
   highlighted: {
     backgroundColor: colors.zinc["100"],
   },
+  // A blocked row keeps its geometry and loses its weight — the label and icon
+  // go muted above, and the row itself stops inviting the press.
+  disabled: {
+    opacity: 0.6,
+  },
   focused: {
     backgroundColor: colors.zinc["50"],
   },

package/src/number_input.tsx

@@ -73,6 +73,13 @@ export function NumberInput(props: NumberInputProps) {
       autoFocus={autoFocus}
       style={{
         height: 40,
+        // A native input carries `size=20` — about 236px of intrinsic width it
+        // refuses to shrink below, because a flex item's `min-width` defaults to
+        // `auto`. In any column narrower than that the field overflowed rather
+        // than fitting. Width comes from the container; the input never states
+        // its own.
+        width: "100%",
+        minWidth: 0,
         paddingLeft: seamless ? 0 : 8,
         paddingRight: seamless ? 0 : 8,
         borderRadius: CONTROL_RADIUS,

package/src/progress_bar.tsx

@@ -92,8 +92,15 @@ export function ProgressBar(props: ProgressBarProps) {
         <View style={[styles.track, styles.compactTrack]}>
           <View style={[styles.fill, { width: `${percentage}%`, backgroundColor: isComplete ? completeColor : color }]} />
         </View>
+        {/* The caption is MUTED at every ratio, matching the non-compact anatomy.
+            A meter can mean "done" (a task, an upload) or "used up" (a credit
+            limit, a quota), and the same 100% is good in one and bad in the
+            other — so the component cannot colour the number without asserting
+            something it does not know. It used to draw a green caption beside a
+            red bar on every cap meter. The verdict stays where the caller states
+            it: the FILL, via `completeColor`. */}
         {format === "none" ? null : (
-          <Text size="sm" tabular color={isComplete ? "success" : "muted"}>
+          <Text size="sm" tabular color="muted">
             {label}
           </Text>
         )}
@@ -151,6 +158,12 @@ const styles = StyleSheet.create({
   },
   compactTrack: {
     flex: 1,
+    // A shrink-to-fit parent — a stacked `Table` cell, a `DetailRow` with no
+    // `DetailTable` above it — gives `flex: 1` nothing to divide, so the track
+    // measures 0 and the meter renders as its caption alone. It passes every
+    // treatment probe because there is nothing left to measure. The floor is
+    // what makes it a bar rather than a number.
+    minWidth: 64,
   },
   header: {
     flexDirection: "row",

package/src/record_summary.tsx

@@ -102,6 +102,11 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "flex-start",
     gap: 16,
+    // The metric sizes to its content while `identity` is `flex: 1`, so without
+    // this the title is the only thing that can give — and it gave down to three
+    // wrapped lines in a 358px column while the metric's note kept its full width.
+    // A record's identity is the last thing on the surface that should yield.
+    flexWrap: "wrap",
   },
   identity: {
     flex: 1,

package/src/stacked_bar_chart.tsx

@@ -129,7 +129,10 @@ export function StackedBarChart(props: StackedBarChartProps) {
                   <View style={styles.leading}>{row.leading}</View>
                 ) : null}
                 <View style={styles.headText}>
-                  <Text size="sm" weight="medium" numberOfLines={2} leading="tight">
+                  {/* regular, matching `Breakdown`'s label: the two components draw
+                      the same row and a card may sit them side by side. The figure
+                      carries the weight; the series name does not. */}
+                  <Text size="sm" numberOfLines={2} leading="tight">
                     {row.label}
                   </Text>
                   {row.meta ? (

package/src/table_fit.ts

@@ -26,6 +26,23 @@ export interface TableFitColumn {
   key: string;
   /** Fixed width in px; omit for a flexible column. */
   width?: number;
+  /**
+   * Fixed CHROME inside this flexible cell, in px — a leading mark, a badge, a
+   * swatch, plus its gap. Added to the read floor so the cell keeps
+   * {@link FLEX_READ_WIDTH} for the TEXT rather than spending part of it on
+   * furniture.
+   *
+   * `composition.md` requires every register row to carry a leading mark and
+   * `tpl_item_list` puts it INSIDE the subject cell (the `leading` slot holds
+   * the checkbox), so obeying the kit's own rule silently adds ~50px the fit
+   * could not see: a register reports "fitted" while its subject clips. Measured
+   * in the wild — a subject handed 154px for strings needing 283, with every
+   * other signal green.
+   *
+   * Ignored on a fixed-`width` column, which already states its total. Default
+   * 0, so a caller that passes nothing gets exactly the previous behaviour.
+   */
+  lead?: number;
   /** This column's claim on space, **`1` = highest**, the way P1/P2/P3 rank a
    *  bug: the column you least want to lose gets the SMALLEST number. Said the
    *  other way round it is the same rule — the larger the number, the sooner the
@@ -133,7 +150,7 @@ export function computeTableFit(
   const requiredWidth = (cols: TableFitColumn[]): number => {
     const slots = cols.length + (leading > 0 ? 1 : 0) + (trailing > 0 ? 1 : 0);
     const gaps = Math.max(0, slots - 1) * COLUMN_GAP;
-    const colsWidth = cols.reduce((sum, c) => sum + (c.width ?? FLEX_READ_WIDTH), 0);
+    const colsWidth = cols.reduce((sum, c) => sum + (c.width ?? FLEX_READ_WIDTH + (c.lead ?? 0)), 0);
     return ROW_H_PADDING + (leading > 0 ? leading : 0) + (trailing > 0 ? trailing : 0) + colsWidth + gaps;
   };
 

package/src/text_input_field.tsx

@@ -291,6 +291,12 @@ const styles = StyleSheet.create({
     // overrides via `style` (it lands after this in the array).
     backgroundColor: colors.white,
     height: 40,
+    // Same reason `NumberInput` states it: a native input carries `size=20`,
+    // about 236px of intrinsic width, and a flex item's `min-width` defaults to
+    // `auto` — so in any column narrower than that the field overflows instead
+    // of fitting. Width comes from the container; the input never states its own.
+    width: "100%",
+    minWidth: 0,
     paddingVertical: INPUT_PADDING_Y,
     paddingHorizontal: 8,
     fontFamily: fontFamilyRegular,

package/src/thumbnail_stack.tsx

@@ -62,6 +62,19 @@ export interface ThumbnailStackProps {
   items: readonly ThumbnailStackItem[];
   /** Pictures shown before the remainder becomes `+N`. Default 3. */
   max?: number;
+  /**
+   * Silence the marks for assistive tech — they become decoration.
+   *
+   * The DEFAULT is to announce each `label`, and that is deliberate: a stack is
+   * often the only statement of what is there, and a run of unlabelled pictures
+   * is unreadable. Pass this where the row ALREADY names the thing in text, so
+   * the pictures do not read it a second time on every row.
+   *
+   * Note the default is the opposite of `Avatar.announce`, and for the same
+   * reason: an avatar almost always sits beside its name, a stack often does
+   * not. The default follows where the component actually sits.
+   */
+  decorative?: boolean;
   /**
    * A rung on the shared avatar scale — the same scale the marks in the
    * neighbouring columns take, so a row of goods and a row of people sit on one
@@ -73,7 +86,7 @@ export interface ThumbnailStackProps {
 }
 
 export function ThumbnailStack(props: ThumbnailStackProps) {
-  const { items, max = DEFAULT_MAX, size = "md", style, testID } = props;
+  const { items, max = DEFAULT_MAX, size = "md", decorative, style, testID } = props;
   const locale = useLoticsLocale();
 
   if (items.length === 0) return null;
@@ -92,8 +105,10 @@ export function ThumbnailStack(props: ThumbnailStackProps) {
       {shown.map((item, index) => (
         <View
           key={item.id}
-          accessible
-          accessibilityLabel={item.label}
+          // Announced by default — a standalone stack is unreadable otherwise.
+          // `decorative` silences it where the row already names the thing.
+          accessible={decorative ? undefined : true}
+          accessibilityLabel={decorative ? undefined : item.label}
           style={{
             width: px,
             height: px,