@lotics/ui 43.7.1 → 44.0.0

package/MIGRATION.md

@@ -4,6 +4,44 @@ Breaking changes, newest first — normally per major, plus the rare minor that
 anyway (recorded under its exact version). The current contract lives in `AGENTS.md` + `docs/`;
 this file exists only to move an app from one release to the next.
 
+## 44.0.0 — `Finding` is horizontal, and `FindingComparison` is gone
+
+`Finding` stacked six blocks — badge, title, detail, a labelled row per side, a hairline, the
+delta, then `Sources` chips. It spent roughly 200px to say one sentence and one figure, buried
+the delta in the middle where nothing scans it, and named every source twice: once in the
+comparison rows, again in the chips below them.
+
+It is now two lines: a severity dot, the title, and the delta right-aligned on that line, over
+one dim line of readings. **`FindingComparison` is removed** — its job is the new `readings`
+prop, and the readings line carries the provenance, so `sources`/`onOpenSource` on `Finding` are
+replaced by `onOpenSource(source: string)` against a reading's own name.
+
+```tsx
+// before
+<Finding severity="critical" title="Quantity disagrees" detail="…"
+         sources={[{ id: "inv", label: "invoice.pdf", kind: "document" }]}>
+  <FindingComparison
+    values={[{ label: "invoice.pdf", value: "480 pcs" },
+             { label: "packing-list.pdf", value: "440 pcs" }]}
+    delta="−40 pcs" />
+</Finding>
+
+// after
+<Finding
+  severity="critical"
+  title="Quantity disagrees"
+  detail="…"
+  readings={[{ source: "invoice.pdf", value: "480 pcs" },
+             { source: "packing-list.pdf", value: "440 pcs" }]}
+  delta="−40 pcs"
+/>
+```
+
+`metric`/`metricCaption` are gone with it: a one-number finding is a `delta` with no readings.
+The `children` slot is unchanged, so a `Table`, `ProgressBar` or `Confidence` body still
+composes. Readings render at `sm` rather than `xs` — they are the values the finding rests on,
+and hierarchy comes from weight and colour, never from shrinking the evidence.
+
 ## 43.5.0 — registers, type and theming all change appearance
 
 No API is removed and nothing throws, but four DEFAULTS moved, so every register and every avatar

package/docs/ai_patterns.md

@@ -550,17 +550,24 @@ fail → low) — never render a fabricated score.
 ## Findings — evidence, not writes
 
 `Finding` (`@lotics/ui/finding`) is one ranked insight from an AI check — a cross-check
-discrepancy, an audit observation, a briefing item: severity dot-badge + localized word,
-`title`, `detail`, the PROMINENT `metric` (lg semibold, never a side note) + `metricCaption`,
-`Sources` chips at the bottom (`sources`/`onOpenSource`), with a `children` slot between body and
-sources. Severity → colour: `critical` red, `warning` amber, `info` zinc ("Note"), `positive`
-emerald ("On track"); words come from the `finding` locale slice. **Display-only**: a finding
-informs the action the human takes in the app; it decides nothing itself — no phantom "record
-verdict" write (a persisted check-status goes stale on the next edit). Stack several most-severe
-first — render each as its own section separated by a `Divider` (a finding that only informs
-apply). `FindingComparison` is the expected-vs-actual body: each disagreeing side a labeled row
-(source, value), a hairline, then the DELTA emphasized — compose it as the finding's children
-for any one-value-disagrees insight (quantities, totals, dates).
+discrepancy, an audit observation, a briefing item — laid out HORIZONTALLY, in the order a reader
+needs it: a severity dot, the `title`, and the `delta` right-aligned on that same line, then one
+dim line of `readings` (`source value · source value`) beneath. Two lines carry all four things a
+reader wants, and scanning a stack gives severity down the left edge and magnitude down the
+right. `detail` is the CONSEQUENCE and is optional — a second sentence restating the title in
+longer words costs a line and adds nothing.
+
+BOTH readings stay on screen and NEITHER is struck through or marked wrong: a finding reports
+that two sources disagree, and which one is right is the reader's call. Omit `delta` where the
+fields are not commensurable — two spellings of a name have no difference to compute. The
+readings ARE the provenance, so a `Sources` chip row underneath would name every document a
+second time; chips belong on surfaces that cite a source without quoting it.
+
+Severity → colour: `critical` red, `warning` amber, `info` zinc ("Note"), `positive` emerald
+("On track"); words come from the `finding` locale slice and reach assistive tech as the dot's
+label, since colour alone carries nothing. **Display-only**: a finding informs the action the
+human takes in the app; it decides nothing itself — no phantom "record verdict" write (a
+persisted check-status goes stale on the next edit). Stack several most-severe first.
 
 ## Session, not chat
 

package/docs/catalog.md

@@ -350,11 +350,13 @@ is a `DiffValue` over `CardSelectItem` candidates — and the ROW around any of
 your screen. See the AI-patterns doc indexed in [AGENTS.md](../AGENTS.md) for the laws; `Clarify` (the agent asks back — selectable
 `ChoiceList` options), `Sources` (provenance chips for AI output — at review scale,
 `label={null}` slots the chips at a section's bottom), `Finding` (one ranked insight from an
-AI check — localized severity word, title, detail, `Sources` chips, a `children` slot;
-**`FindingComparison`** is the expected-vs-actual body: each disagreeing side a labeled row,
-the DELTA emphasized under a hairline (localized "Difference") — quantities, totals, dates;
-a plain `metric` prop remains for one-number findings. The children slot composes ANY visual
-result — a compact `Table` for per-line detail (danger color on the offending cells),
+AI check, laid out HORIZONTALLY: a severity dot, the title, and the `delta` right-aligned on
+that same line, over one dim line of `readings` — `source value · source value`, both kept on
+screen with NEITHER marked as the wrong one, since a finding reports that two sources disagree
+and which is right is the reader's call. `detail` is the optional consequence. A reader scanning
+a stack gets severity down the left edge and magnitude down the right. The readings ARE the
+provenance, so there are no `Sources` chips under it repeating the same names. The children slot
+composes ANY visual result — a compact `Table` for per-line detail (danger color on the offending cells),
 `ProgressBar` for consumption-toward-a-cliff (free time, credit), dot `Badge`s for a
 present/missing checklist, `Confidence` for judgment calls. Display-only — it informs the
 verdict the host records; `finding` locale slice). `ApprovalPrompt` (the surface that ANSWERS
@@ -1915,7 +1917,7 @@ component rather than showing it at zero.
   **`before === after` collapses to ONE plain value** —
   agreement is not a change, and a document confirming what the record already says is the
   GOOD case, not a diff of a value against itself. **`delta`** (a host-formatted string, the
-  same contract as `FindingComparison.delta`) prints HOW FAR it moved, because
+  same contract as `Finding.delta`) prints HOW FAR it moved, because
   `1.600.000 → 1.481.481` otherwise makes the reader subtract to find out whether a
   correction is trivial or alarming. `layout` stacked (a column of figures) | inline (prose, dense
   rows); `align`/`tabular` for money; `tone` for whether the change is good news. Omit `before`
@@ -1990,9 +1992,10 @@ component rather than showing it at zero.
   text IS the value (a value not in `options` reads as the custom answer).
 - **`sources`** — `Sources` + `SourceRef`/`SourceKind` (record | document | table | web |
   knowledge): provenance chips, per-kind glyphs.
-- **`finding`** — `Finding` + `FindingComparison` + `FindingSeverity`/`FindingLabels`: one
-  ranked AI-check insight — severity word, title, detail, `Sources`, children slot; the
-  expected-vs-actual body with the emphasized delta; the `finding` locale slice.
+- **`finding`** — `Finding` + `FindingReading` + `FindingSeverity`/`FindingLabels`: one ranked
+  AI-check insight on two lines — severity dot, title, right-aligned `delta`, then the
+  `readings` with the source each came from; optional `detail` consequence, children slot, and
+  the `finding` locale slice.
 - **`result_header`** — `ResultHeader` (+ `ResultTone`): the save-direct RECEIPT's outcome
   strip, on the page grid — tone mark (`ok`/`attention`/`error`/`skipped`) inline on the
   title row, outcome-first title, right-slot `action` (the open-record jump / a retry),

package/examples/tpl_record.tsx

@@ -63,7 +63,7 @@ import { pickFiles } from "@lotics/ui/file_picker";
 import { FileDropTarget } from "@lotics/ui/file_drop_target";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
-import { Finding, FindingComparison } from "@lotics/ui/finding";
+import { Finding } from "@lotics/ui/finding";
 import { FormTextInput } from "@lotics/ui/form_text_input";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
 import { ChipGroup, type ChipOption } from "@lotics/ui/chip_group";
@@ -76,7 +76,6 @@ import { CardSelectItem } from "@lotics/ui/card_select_item";
 import { AgentRun } from "@lotics/ui/agent_run";
 import { FollowScroll } from "@lotics/ui/follow_scroll";
 import { useContainerSize } from "@lotics/ui/size_boundary";
-import { type SourceRef } from "@lotics/ui/sources";
 import { DiffValue } from "@lotics/ui/diff_value";
 import { DiffMark } from "@lotics/ui/diff_mark";
 import { useChangeSet, type ChangeSet } from "@lotics/ui/use_change_set";
@@ -1371,18 +1370,17 @@ const UNTOUCHED_LINES: { id: string; item: string; qty: string; doc?: LineDoc }[
 // Cross-check findings — severity reads through ONE colored dot badge (red /
 // amber / zinc), the rest stays calm text.
 type Severity = "critical" | "warning" | "info";
-interface Check { id: string; severity: Severity; title: string; detail?: string; comparison?: { values: { label: string; value: string }[]; delta?: string }; sources?: string[] }
+interface Check { id: string; severity: Severity; title: string; detail?: string; readings?: { source: string; value: string }[]; delta?: string }
 const FINDINGS: Check[] = [
   {
     id: "q1", severity: "critical", title: "Quantity disagrees between the invoice and the packing list",
     detail: "Short-shipping against the invoice risks a customs query and a client claim.",
-    comparison: { values: [{ label: "invoice.pdf", value: "480 pcs" }, { label: "packing-list.pdf", value: "440 pcs" }], delta: "−40 pcs" },
-    sources: ["invoice.pdf", "packing-list.pdf"],
+    readings: [{ source: "invoice.pdf", value: "480 pcs" }, { source: "packing-list.pdf", value: "440 pcs" }], delta: "−40 pcs",
   },
   {
     id: "q2", severity: "warning", title: "Consignee differs between the invoice and the booking",
     detail: "The invoice names the buyer's own warehouse; the booking routes delivery through a distribution partner. One of them files wrong.",
-    sources: ["invoice.pdf", "booking-confirmation.pdf"],
+    readings: [{ source: "invoice.pdf", value: "Buyer warehouse" }, { source: "booking-confirmation.pdf", value: "Distribution partner" }],
   },
   {
     id: "q4", severity: "warning", title: "No certificate of origin among the documents",
@@ -1391,7 +1389,7 @@ const FINDINGS: Check[] = [
   {
     id: "q3", severity: "info", title: "Booking cut-off is earlier than the invoiced ship week",
     detail: "Documents close 14 Jul on the booking; the invoice quotes shipment in the week of 18 Jul. No conflict if the cargo is ready.",
-    sources: ["booking-confirmation.pdf"],
+    readings: [{ source: "booking-confirmation.pdf", value: "Cut-off 14 Jul" }, { source: "invoice.pdf", value: "Ships w/c 18 Jul" }],
   },
 ];
 
@@ -5048,8 +5046,8 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
             <View style={{ gap: 14 }}>
               <Text size="md" weight="semibold">Findings</Text>
               {/* Display-only: findings inform the verdict the footer records.
-                  The kit `Finding` owns severity word, title, detail, the
-                  PROMINENT metric, Sources; hairlines separate them. */}
+                  The kit `Finding` owns the severity dot, the title, the delta
+                  and the readings line; hairlines separate them. */}
               {FINDINGS.map((c, i) => (
                 <Fragment key={c.id}>
                   {i > 0 ? <Divider /> : null}
@@ -5057,11 +5055,10 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
                     severity={c.severity}
                     title={c.title}
                     detail={c.detail}
-                    sources={(c.sources ?? []).map((name): SourceRef => ({ id: name, label: name, kind: "document" }))}
+                    readings={c.readings}
+                    delta={c.delta}
                     onOpenSource={() => { /* preview stub */ }}
-                  >
-                    {c.comparison ? <FindingComparison values={c.comparison.values} delta={c.comparison.delta} /> : null}
-                  </Finding>
+                  />
                 </Fragment>
               ))}
             </View>

package/package.json

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

package/src/diff_value.tsx

@@ -74,7 +74,7 @@ export interface DiffValueProps {
    * a correction is trivial or alarming; the delta is the thing they were going
    * to work out anyway. A string, not a number, because only the host knows the
    * unit, the sign convention and the rounding — the same contract
-   * `FindingComparison.delta` already uses.
+   * `Finding.delta` already uses.
    */
   delta?: string;
   style?: StyleProp<ViewStyle>;

package/src/finding.tsx

@@ -1,19 +1,29 @@
 import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { type ReactNode } from "react";
-import { Badge } from "./badge";
 import { Text } from "./text";
-import { Sources, type SourceRef } from "./sources";
+import { PressableHighlight } from "./pressable_highlight";
 import { useLoticsLocale } from "./locale";
-import { colors, type ColorName } from "./colors";
+import { solid, type ColorName } from "./colors";
 
 export type FindingSeverity = "critical" | "warning" | "info" | "positive";
 
 /** The localized strings — the `finding` LoticsLocale slice. */
 export type FindingLabels = Record<FindingSeverity, string> & {
-  /** The delta row's label in `FindingComparison`. */
+  /** The delta's label, read to assistive tech beside the figure. */
   difference: string;
 };
 
+/**
+ * The dot's offset is COMPUTED, not eyeballed: centre it in the title's line
+ * box, then add where that box starts inside the row — RN-Web's `Text` sits a
+ * couple of px below its parent's top, and ignoring that left the dot 2px high
+ * even once the centring was right. Both numbers were measured off the rendered
+ * row rather than guessed; a guess put it 4.5px out.
+ */
+const TITLE_LINE = 24;
+const TITLE_INSET = 2;
+const DOT = 7;
+
 const SEVERITY_COLOR: Record<FindingSeverity, ColorName> = {
   critical: "red",
   warning: "amber",
@@ -21,121 +31,164 @@ const SEVERITY_COLOR: Record<FindingSeverity, ColorName> = {
   positive: "emerald",
 };
 
+/** One reading: what a source says, and which source said it. */
+export interface FindingReading {
+  /** Where it came from — a document, a table, a rate card. */
+  source: string;
+  /** What that source says the value is. */
+  value: string;
+}
+
 export interface FindingProps {
-  /** Ranked severity — the dot badge + its localized word. */
+  /** Ranked severity — sets the dot's colour and its localized word. */
   severity: FindingSeverity;
-  /** What the agent found — one line. */
+  /** What was found, in one line, in the reader's own nouns. */
   title: string;
-  /** The explanation under the title. */
+  /**
+   * The readings that disagree, in source order. Rendered inline beneath the
+   * title as `source value · source value`.
+   *
+   * NEITHER is marked as the wrong one. A finding reports that two sources
+   * disagree; which one is right is the reader's call, and a struck-through or
+   * red-inked side would make that call for them.
+   */
+  readings?: FindingReading[];
+  /**
+   * The computed difference — "+170 USD", "−40 pcs", "3 days late".
+   *
+   * The most actionable thing on a finding, which is why it sits right-aligned
+   * on the title's own line rather than below the readings: it is the figure
+   * the reader acts on, and `1,450 → 1,280` makes them do the subtraction
+   * themselves. Omit where the fields are not commensurable — two spellings of
+   * a name have no delta.
+   */
+  delta?: string;
+  /**
+   * The CONSEQUENCE, when the title does not already carry it — what happens if
+   * this ships. Optional on purpose: a second sentence that restates the title
+   * in longer words costs a line and adds nothing.
+   */
   detail?: string;
-  /** The emphasized MEASURE of the finding ("−40 pcs") — prominent in the
-   *  body (lg, semibold), never a side note. */
-  metric?: string;
-  /** What the metric compares ("invoice vs packing list"). */
-  metricCaption?: string;
-  /** Provenance — the one `Sources` idiom, chips at the bottom. */
-  sources?: SourceRef[];
-  onOpenSource?: (source: SourceRef) => void;
-  /** Compose anything extra between the body and the sources — a band pair,
-   *  an action row, a custom block. */
+  /** Makes each source name pressable — the host navigates to it. */
+  onOpenSource?: (source: string) => void;
+  /** Anything richer than readings — a table, a chart, a confidence bar. */
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
 /**
- * One ranked insight from an AI check — a cross-check discrepancy, an audit
- * observation, a briefing item. Good defaults (severity word, title, detail,
- * the PROMINENT metric, `Sources` chips) with a `children` slot for any
- * extra composition. Display-only: a finding informs the verdict the host
- * records; it decides nothing itself. Stack several most-severe first,
- * separated by a `Divider`.
+ * ONE RANKED INSIGHT from an AI check — a cross-check discrepancy, an audit
+ * observation, a briefing item.
+ *
+ * The readings sit at `sm`, the same size as the title. They were `xs` — a
+ * miniature that said "secondary" by being hard to read, which is the wrong
+ * trade for the values the whole finding rests on. Hierarchy comes from WEIGHT
+ * and colour here, never from shrinking the evidence.
+ *
+ * Laid out HORIZONTALLY, in the order a reader needs it: the dot says whether
+ * to care, the title says what is wrong, the delta on that same line says how
+ * far off, and one dim line underneath says who said what. Two lines carry all
+ * four, so a reader scanning a stack reads severity down the left edge and
+ * magnitude down the right.
+ *
+ * The predecessor stacked six blocks — badge, title, detail, a labelled row per
+ * side, a hairline, the delta, then source chips. It spent roughly 200px to say
+ * one sentence and one figure, buried the delta in the middle where nothing
+ * scans it, and named every source twice: once in the comparison rows, again in
+ * the chips below them. The readings line IS the provenance, so the chips went
+ * with it, and `FindingComparison` is gone — its job is the `readings` prop.
+ *
+ * **Display-only**: a finding informs the action the human takes; it decides
+ * nothing itself. Stack several most-severe first.
  */
 export function Finding(props: FindingProps) {
   const words = useLoticsLocale().finding;
+  const readings = props.readings ?? [];
+
   return (
     <View style={[styles.root, props.style]}>
-      <Badge variant="dot" color={SEVERITY_COLOR[props.severity]} label={words[props.severity]} />
-      <Text size="sm" weight="medium">
-        {props.title}
-      </Text>
-      {props.detail ? (
-        <Text size="sm" color="muted">
-          {props.detail}
-        </Text>
-      ) : null}
-      {props.metric ? (
-        <View style={styles.metricBlock}>
-          <Text size="lg" weight="semibold" tabular>
-            {props.metric}
+      <View
+        style={[styles.dot, { backgroundColor: solid(SEVERITY_COLOR[props.severity]) }]}
+        accessibilityLabel={words[props.severity]}
+      />
+
+      <View style={styles.body}>
+        <View style={styles.headline}>
+          <Text size="sm" weight="medium" style={styles.title}>
+            {props.title}
           </Text>
-          {props.metricCaption ? (
-            <Text size="xs" color="muted">
-              {props.metricCaption}
+          {props.delta ? (
+            <Text
+              size="md"
+              weight="semibold"
+              tabular
+              style={[styles.delta, { color: solid(SEVERITY_COLOR[props.severity]) }]}
+              accessibilityLabel={`${words.difference}: ${props.delta}`}
+            >
+              {props.delta}
             </Text>
           ) : null}
         </View>
-      ) : null}
-      {props.children}
-      {props.sources && props.sources.length > 0 ? (
-        <Sources label={null} sources={props.sources} onOpen={props.onOpenSource} />
-      ) : null}
+
+        {readings.length > 0 ? (
+          <View style={styles.readings}>
+            {readings.map((reading, index) => (
+              <View key={`${reading.source}-${index}`} style={styles.reading}>
+                {index > 0 ? (
+                  <Text size="sm" color="muted">
+                    ·
+                  </Text>
+                ) : null}
+                <SourceName label={reading.source} onOpen={props.onOpenSource} />
+                <Text size="sm" weight="medium" tabular numberOfLines={1}>
+                  {reading.value}
+                </Text>
+              </View>
+            ))}
+          </View>
+        ) : null}
+
+        {props.detail ? (
+          <Text size="sm" color="muted">
+            {props.detail}
+          </Text>
+        ) : null}
+
+        {props.children}
+      </View>
     </View>
   );
 }
 
-export interface FindingComparisonProps {
-  /** The disagreeing sides — each value with where it came from
-   *  ("invoice.pdf", "480 pcs"). Two or more. */
-  values: { label: string; value: string }[];
-  /** The computed difference, EMPHASIZED ("−40 pcs"). */
-  delta?: string;
-  /** Label for the delta row. Defaults to the localized "Difference". */
-  deltaLabel?: string;
-}
-
-/**
- * The expected-vs-actual body of a `Finding` — each side a labeled row
- * (source, value), a hairline, then the DELTA emphasized. Compose it as the
- * finding's children; it replaces ad-hoc metric text for any
- * one-value-disagrees insight (quantities, totals, dates).
- */
-export function FindingComparison(props: FindingComparisonProps) {
-  const words = useLoticsLocale().finding;
+/** The source behind a reading. Pressable only when the host can navigate to
+ *  it — an affordance on something that goes nowhere is a broken promise. */
+function SourceName({ label, onOpen }: { label: string; onOpen?: (source: string) => void }) {
+  const name = (
+    <Text size="sm" color="muted" numberOfLines={1}>
+      {label}
+    </Text>
+  );
+  if (!onOpen) return name;
   return (
-    <View style={styles.comparison}>
-      {props.values.map((v, i) => (
-        <View key={`${v.label}-${i}`} style={styles.comparisonRow}>
-          <Text size="sm" color="muted" style={styles.comparisonLabel} numberOfLines={1}>
-            {v.label}
-          </Text>
-          <Text size="sm" weight="semibold" tabular numberOfLines={1} style={{ flexShrink: 1 }}>
-            {v.value}
-          </Text>
-        </View>
-      ))}
-      {props.delta ? (
-        <>
-          <View style={styles.comparisonRule} />
-          <View style={styles.comparisonRow}>
-            <Text size="sm" color="muted" style={styles.comparisonLabel} numberOfLines={1}>
-              {props.deltaLabel ?? words.difference}
-            </Text>
-            <Text size="lg" weight="semibold" tabular>
-              {props.delta}
-            </Text>
-          </View>
-        </>
-      ) : null}
-    </View>
+    <PressableHighlight onPress={() => onOpen(label)} accessibilityRole="link" accessibilityLabel={label}>
+      {name}
+    </PressableHighlight>
   );
 }
 
 const styles = StyleSheet.create({
-  root: { gap: 6, alignItems: "flex-start" },
-  metricBlock: { gap: 1, paddingVertical: 2 },
-  comparison: { gap: 6, paddingVertical: 4, alignSelf: "stretch", maxWidth: 420 },
-  comparisonRow: { flexDirection: "row", alignItems: "baseline", gap: 12 },
-  comparisonLabel: { width: 130 },
-  comparisonRule: { height: 1, backgroundColor: colors.zinc[100] },
+  root: { flexDirection: "row", gap: 8, alignItems: "flex-start" },
+  // See TITLE_LINE above — centred on the title's line box, plus where that box
+  // begins in the row.
+  dot: { width: DOT, height: DOT, borderRadius: DOT / 2, marginTop: TITLE_INSET + (TITLE_LINE - DOT) / 2 },
+  body: { flex: 1, gap: 3, minWidth: 0 },
+  headline: { flexDirection: "row", alignItems: "baseline", gap: 12 },
+  title: { flex: 1, minWidth: 0 },
+  // Never shrinks: the figure is the point of the row, and a clipped delta is
+  // worse than a title that wraps. Its COLOUR is the severity's, set on the
+  // instance — the dot marks the left edge and the figure the right, so a
+  // reader scanning a stack gets rank and magnitude in one pass.
+  delta: { flexShrink: 0 },
+  readings: { flexDirection: "row", flexWrap: "wrap", alignItems: "baseline", gap: 6 },
+  reading: { flexDirection: "row", alignItems: "baseline", gap: 5, minWidth: 0 },
 });
-