@lotics/ui 47.10.0 → 47.12.1

package/AGENTS.md

@@ -14,7 +14,7 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
 
 | Doc | Read it for |
 |---|---|
-| [docs/catalog.md](./docs/catalog.md) | **The complete inventory** — incl. `just_arrived` (`useJustArrived` + `TableRow`'s `justArrived`: the one-shot wash a row wears when it LANDS, so a realtime push is visible rather than one row of two hundred silently changing) — Reach-by-role (each data role → the ONE canonical component) + every `@lotics/ui/<module>` entry point (incl. `@lotics/ui/vite`'s `loticsOptimizeDeps` + `loticsResolve()` — the pre-bundle list and the whole `resolve` block a custom-code app's `vite.config.ts` imports rather than hand-carries, dev-link included). Read before building any screen; reuse first. |
+| [docs/catalog.md](./docs/catalog.md) | **The complete inventory** — incl. `just_arrived` (`useJustArrived` + `TableRow`'s `justArrived`: the one-shot wash a row wears when it LANDS, so a realtime push is visible rather than one row of two hundred silently changing) and `SplitRow`/`SplitPane` (the responsive pane row — a weight that survives into a stacked column divides HEIGHT and clips a pane) — Reach-by-role (each data role → the ONE canonical component) + every `@lotics/ui/<module>` entry point (incl. `@lotics/ui/vite`'s `loticsOptimizeDeps` + `loticsResolve()` — the pre-bundle list and the whole `resolve` block a custom-code app's `vite.config.ts` imports rather than hand-carries, dev-link included). Read before building any screen; reuse first. |
 | [docs/data_entry.md](./docs/data_entry.md) | Which editing pattern for which job — inline edit, fieldset forms, choosing a CHOICE control by option count, find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments (`InlineFiles` for a record ROW, the `FilesEditor` COMPOUND for a whole section, plus the three-way file INTAKE), stage gates, and the commit-on-blur vs action-press ordering law. |
 | [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split — it turns on WHO supplied the values; findings, provenance, confidence (`Finding` is filed here because AI produces most of them, NOT because it is AI-only — a rules-derived contradiction is as in scope as an extraction's); **after the run** — a stored record that fills up from several writers; the whole run in a dialog, **stopping**; **review surfaces compose from atoms** — `DiffValue`, `DiffMark`, `useChangeSet`. |
 | [docs/composition.md](./docs/composition.md) | The design-language contract — **the form comes before the treatment** (name what the subject IS before reaching for parts), canvas + content column, heading altitude, register vs inset rows, the button ladder, master-detail `Drawer`, the register's rhythm, craft and TRIAGE bands, where the accent goes, theming as an app-level ESCAPE HATCH, color discipline, typography, **one fact one surface** (a chooser over the thing it chooses is a SELECTOR, not a second card grid; a control that only swaps one number for another is replaced by showing both), **a width floor answers can this be READ and never can this be operated** (the operating question passes a row whose every string is already cut), **a status column earns its slot by carrying a REASON rather than a state** (the floor asks for the fact to be visible, not for a badge), **an identity mark's GLYPH is derived from the name's distinguishing part** (an organization's first word is its legal form, so untreated every row marks one letter), **a row subject's supporting line takes a REFERENCE and never a sentence** (an explanation truncates to the clause the reader already knew), **a list stays fast by keeping IDENTITY rather than memoizing** (key by the record not the index; `memo` is the last resort and does nothing against a freshly-built prop), and where a commit sits. |

package/docs/catalog.md

@@ -425,7 +425,13 @@ component — children are the body), `Subsection` (+ `SubsectionHeading`/
 `SectionStack` (the flat page's content column — owns the fixed 56px beat + hairline between
 top-level blocks), `SubsectionStack` (a section's `Subsection` groups — fixed 32px beat,
 space-only while the groups are SHORT, `divided` once they run long), `SectionCard`, `PageHeader` /
-`PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `PipelineTabs` (Tabs plus order —
+`PageContent`, `Stack`, `SplitRow`/`SplitPane` (+ `useInSplitPane()`, which a card reads to take `flex: 1` only when it has a sibling to align with — the same card alone in a page column would fill the SCROLLER; two or more panes side by side that STACK when the
+container is phone-narrow — a dashboard's chart pair, a summary beside its detail; the pane's
+`weight` is dropped on the way down, because `flex` divides the MAIN axis and a weight left on a
+column splits HEIGHT instead, clipping the lighter pane and gapping the heavier one. Reach for it
+over a hand-rolled `flexDirection: "row"` on any row of two CARDS. NOT for a pair that is
+meaningless apart — a value and its unit, a control and its field — which is `never`, and not for a
+row of controls, which is `FilterBand`), `Spacer`, `Divider`, `Accordion`, `Tabs`, `PipelineTabs` (Tabs plus order —
 the stage strip of a lifecycle desk, outcomes set apart), `SegmentedControl`,
 `Stepper`, `DangerZone` (the destructive section — delete/archive — set apart at the bottom
 of a record/settings surface).

package/docs/composition.md

@@ -168,6 +168,15 @@ control is 40. Stack three of those in one column and it reads as three rhythms,
 alone. The page picks one beat and the primitives take it (`minHeight` on the row, `spacing` on
 the table).
 
+**A two-pane row that STACKS must drop its `flex` weights with the direction.** `flex` distributes
+along the MAIN axis, so the moment a row becomes a column those width shares become HEIGHT shares:
+the pane that asked for less is clipped mid-content and the one that asked for more carries a gap
+under it, and both look like bugs in the panes rather than in the row. Compute the share from the
+same condition that picks the direction — `stacked ? {} : { flex: n }` — never a constant `flex`
+on a direction that varies. And check WHICH condition: `medium` spans 768–1727, so it is an
+ordinary desktop, and stacking on `small || medium` collapses the layout for nearly every reader
+while measuring perfectly at the one width nobody uses.
+
 ## The heading ramp — one construct per altitude, no drift
 
 **The ramp is FIXED — the markdown ladder, no size knobs.** One outline on every surface; never
@@ -563,6 +572,40 @@ INFORMATIONAL — they never filter or navigate (that's the tabs/chips' job); if
 cross-cutting numbers, drop them. Do NOT put a `KPIStrip` on a register page or a `SummaryLine` on
 a dashboard. Card stat rails use `KPICard`.
 
+**A card either IS a control or CONTAINS them — never both.** Making a whole card
+pressable is right when its content is inert (a chart, a meter, a read-only
+list): the card is the target, and `PressableHighlight` + the kit ring carries
+the affordance, since a verb parked in the header reads as one more thing on a
+crowded band. It is wrong the moment anything inside is its own door — a row, a
+segment, a legend that filters. The outer press swallows them: the finer target
+still exists, still announces itself, and never fires. Decide per card, and
+where the inner doors are the useful ones, drop the outer press rather than
+nesting.
+
+**A container bucket carries SCREEN thresholds — `small` is not "narrow".**
+`useContainerSize()` reports the same three buckets as the screen, so `small`
+means under 768: a perfectly ordinary two-of-five pane on a wide display is
+`small`, and a component keyed on it flips to its phone layout on a desktop.
+Ask the question the component actually has — how much room do six columns
+need — and measure the width with `onLayout` against that number. The bucket
+answers "which device", never "does my content fit".
+
+**Cards in a row END ON ONE LINE — fill the pane, and fix the imbalance in the CONTENT.** A card
+in a `SplitPane` takes `flex: 1` so the row closes on a single bottom edge; ragged card bottoms
+read as a broken layout, and no reader has ever mistaken breathing room inside a card for missing
+data. That makes short content a CONTENT problem, and equal heights only move the emptiness, so
+fix it where it is: cap the tall neighbour (a chart's `height` is a prop for this reason), give
+the short card the fact it is missing — a denominator, a comparison, the affordance that opens its
+detail — or pair it with a card of its own weight. A card that still cannot fill its half is
+telling you the row is wrong.
+
+**Never total counts over sets that OVERLAP.** A card of checks — stalled, overdue, unassigned,
+past due — is a list of QUESTIONS, and one record answers several of them, so a header summing the
+rows reports more records than exist and the reader cannot tell which figure to believe. Count the
+checks, name the largest set, or carry no total at all. The tell is a total that exceeds the
+population it is drawn from; the fix is never to de-duplicate in the header, because a reader who
+adds the visible rows would then get a different answer from the one printed above them.
+
 ## One fact, one surface — and no control that only reveals a number
 
 Two rules that catch the same defect from opposite ends: a screen saying one thing twice.
@@ -877,6 +920,17 @@ sized by its HEADER over single-character data. Measure the header row's cells a
 content per column; where a column's width is set by its label rather than its values, that
 difference is the identity column's, not its own.
 
+**A table in a DRAWER holds three columns, and the one it drops is the LAST
+DECLARED.** A drawer's table area measures ~520px and the identity column claims
+about 220 of it, so an identity plus two figures is the ceiling: a fourth is
+dropped with no error, no warning and no gap where it was. Two things make this
+bite. `priority` does not rescue you — the drop follows declaration order, so
+the column you thought was safest goes first if you happened to write it last.
+And the columns worth dropping are rarely the ones at the end: a drill opened to
+show a value and an age lost exactly those and kept the owner. Put the identity
+and the two figures the drawer was OPENED for in columns, and everything else in
+the identity cell's caption, where it costs no width at all.
+
 **Space by the RATIO of within-group to between-group, never by absolutes.** Collect the gap
 inside a composed band and the gap between that band and its neighbours, and divide. Near 1 is
 the defect however sensible each number is alone. Aim for roughly 2 or more, and change the

package/docs/reviewing.md

@@ -333,8 +333,17 @@ defect, so finding it on one panel is a reason to sweep the siblings.
   that drifts across the track means each one was offset by a guess at its own width.
 - **A row beat belongs to the PAGE** — collect every row primitive's height on one screen before
   calling any of them right.
-
-→ [composition.md](./composition.md) §"Canvas & content column", §"No dead rows", §"The register's own craft".
+- **Cards laid side by side: collect their BOTTOM edges, not their tops.** Tops align for free —
+  the row sets them — so every horizontal check passes while the row ends on a staircase. One
+  `getBoundingClientRect().bottom` per card in a row: more than one value is the finding, and the
+  spread tells you which card is starved. It has two causes and they need opposite fixes. The card
+  did not fill its pane (no `flex`), which is a LAYOUT fix; or it filled it and its content stops
+  early, which is a CONTENT one — and equal heights only relocate that emptiness, so cap the tall
+  neighbour, give the short card the fact it is missing, or re-pair the row. Screenshots are how
+  this is noticed and the rects are how it is aimed: a staircase is obvious on sight and invisible
+  to every probe above this one.
+
+→ [composition.md](./composition.md) §"Canvas & content column", §"Cards — banded and composable", §"No dead rows", §"The register's own craft".
 
 ### 7. Surface walk — open it, press it, read it
 A resting register is the cheapest thing to screenshot and the least likely to hold the defect.
@@ -604,6 +613,32 @@ the data, which is worse than a constant one because the controls no longer form
 column. Non-zero-but-constant is the same defect with luckier data.
 
 
+### 8j. Does every cell sit under the header that names it?
+**Collect** per table: the header cells' boxes, every row's cells' boxes, and where the INK
+starts inside each. Report three sets — cells-per-row against columns-declared, each cell's
+box edges against its header's, each cell's ink edge against its header's.
+
+Three failures, and only the first is a defect on sight:
+
+- **A row with fewer cells than the table declares columns.** A row's children map to columns
+  POSITIONALLY, so a fragment wrapping two cells counts as one and the cells inside it are
+  handed no column: they size to content and pack against whatever the flexible column leaves.
+  The declared width and alignment are gone with no error, and the result reads as a table
+  until you look down a column. Cells are an array, never a fragment.
+- **A box that does not match its header's** means something other than the column style moved
+  the cell — the row and the column list disagree about how many columns there are.
+- **Ink starting N px right of its header, by the same N on every row**, is fixed chrome
+  leading a flexible cell — an avatar, a dot, a badge. Legitimate where that mark is the row's
+  own subject, and then the column owes `lead` those pixels or the fit believes the cell has
+  more room for text than it has. Illegitimate in a supporting column, where §Identity marks
+  bans the mark outright.
+
+*Two traps in the measurement, both of which invent findings.* A pressable row keeps its press
+target in the same wrapper as its cells, absolutely positioned — count it and every register
+reports two cells. And a `Text` wrapping another `Text` keeps its own words in a bare text node,
+so a walk over leaf ELEMENTS measures only the nested span and reports the cell starting a
+hundred pixels in; measure text nodes with a `Range`.
+
 ### 9. The absence pass — what catches "bland"
 Every probe above reads an element that EXISTS. None fires on a screen where nothing is wrong and
 nothing is right, which is the screen reported as bland. Defect-removal converges on *inoffensive*;

package/examples/tpl_dashboard.tsx

@@ -33,6 +33,7 @@ import { KPIStrip } from "@lotics/ui/kpi_strip";
 import { Peek } from "@lotics/ui/peek";
 import { StackedProgressBar } from "@lotics/ui/stacked_progress_bar";
 import { Funnel } from "@lotics/ui/funnel";
+import { SplitRow, SplitPane } from "@lotics/ui/split_row";
 import { formatMoney } from "@lotics/ui/format_money";
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -330,8 +331,9 @@ export function TplDashboard() {
         />
 
         {/* chart row 1: revenue by month (BarChart + TrendFooter), margin trend (LineChart) */}
-        <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch" }}>
-          <Card style={{ padding: 0, flex: 3 }}>
+        <SplitRow>
+          <SplitPane weight={3}>
+          <Card style={{ padding: 0, flex: 1 }}>
             <CardHeader>
               <CardHeaderTitle info="Revenue recognized by invoice date, before discounts">
                 Revenue by month
@@ -350,8 +352,10 @@ export function TplDashboard() {
               <TrendFooter value={11} periodLabel="vs last month" detail="May: ₫1.15B" />
             </View>
           </Card>
+          </SplitPane>
 
-          <Card style={{ padding: 0, flex: 2 }}>
+          <SplitPane weight={2}>
+          <Card style={{ padding: 0, flex: 1 }}>
             <CardHeader>
               <CardHeaderTitle info="Gross margin per month — revenue minus snapshotted cost of goods">
                 Margin trend
@@ -362,11 +366,13 @@ export function TplDashboard() {
               <LineChart points={BIEN_LAI_THANG} height={150} lineColor={solid("blue")} formatNumber={(n) => `${n}%`} />
             </View>
           </Card>
-        </View>
+          </SplitPane>
+        </SplitRow>
 
         {/* chart row 2: pipeline funnel, revenue mix, on-time delivery */}
-        <View style={{ flexDirection: "row", gap: 16, alignItems: "stretch" }}>
-          <Card style={{ padding: 0, flex: 3 }}>
+        <SplitRow>
+          <SplitPane weight={3}>
+          <Card style={{ padding: 0, flex: 1 }}>
             <CardHeader>
               <CardHeaderTitle info="Open opportunities at each stage, updated from Quotes">
                 Sales pipeline
@@ -385,8 +391,10 @@ export function TplDashboard() {
               <Text size="xs" color="muted">Quote-to-close rate: 32% — up on last quarter</Text>
             </View>
           </Card>
+          </SplitPane>
 
-          <Card style={{ padding: 0, flex: 3 }}>
+          <SplitPane weight={3}>
+          <Card style={{ padding: 0, flex: 1 }}>
             <CardHeader>
               <CardHeaderTitle info="Period revenue split by customer industry">
                 Revenue mix
@@ -397,8 +405,10 @@ export function TplDashboard() {
               <PieChart slices={CO_CAU} size={140} showLegend formatNumber={(n) => n.toLocaleString("en-GB")} />
             </View>
           </Card>
+          </SplitPane>
 
-          <Card style={{ padding: 0, flex: 2 }}>
+          <SplitPane weight={2}>
+          <Card style={{ padding: 0, flex: 1 }}>
             <CardHeader>
               <CardHeaderTitle info="Deliveries that arrived on or before the needed-by date this period">
                 On-time delivery
@@ -408,7 +418,8 @@ export function TplDashboard() {
               <ProgressRing value={87} label="On time" caption="33 of 38 deliveries" color={solid("emerald")} />
             </View>
           </Card>
-        </View>
+          </SplitPane>
+        </SplitRow>
 
         {/* chart row 3: the SAME pipeline as a CONVERSION funnel — narrowing
             cohorts + step drop-off rates, the subset lens vs the composition bar above */}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.10.0",
+  "version": "47.12.1",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",
@@ -261,6 +261,7 @@
     "./spacer": "./src/spacer.tsx",
     "./spacing": "./src/spacing.ts",
     "./sparkline": "./src/sparkline.tsx",
+    "./split_row": "./src/split_row.tsx",
     "./stack": "./src/stack.tsx",
     "./stacked_bar_chart": "./src/stacked_bar_chart.tsx",
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",

package/src/bar_chart.tsx

@@ -50,6 +50,14 @@ export interface BarChartProps {
    * name runs is the caller's fact, not the chart's.
    */
   labelWidth?: number;
+  /**
+   * Plot height for `vertical`, in px (default 200) — the same knob
+   * `LineChart` and `WaterfallChart` carry. It is the caller's because height
+   * is what balances a chart against the card BESIDE it: a row of cards ends
+   * on one bottom edge, so a chart that cannot be capped forces its neighbour
+   * to carry the difference as dead space.
+   */
+  height?: number;
 }
 
 function useAxisTicks(maxValue: number) {
@@ -108,11 +116,11 @@ export function BarChart(props: BarChartProps) {
     formatNumber = defaultFormatNumber,
     emptyLabel = locale.chart.noData,
     labelWidth = DEFAULT_LABEL_WIDTH,
+    height: barAreaHeight = 200,
   } = props;
   const maxValue = Math.max(...data.map((d) => d.value), 1);
   const axisTicks = useAxisTicks(maxValue);
   const axisMax = axisTicks[axisTicks.length - 1] || maxValue;
-  const barAreaHeight = 200;
 
   // The vertical axis prints as many labels as the row fits and thins the rest —
   // the same rule `LineChart` runs, because it is the axis's rule and not one

package/src/pressable_row.tsx

@@ -32,7 +32,12 @@ export interface PressableRowProps {
    * `Pressable` with role="button" + "Open …" label. Wrap the row body with it
    * only when the body is non-interactive by construction; a body that can
    * carry its own controls gets an EMPTY absolutely-positioned door as their
-   * sibling instead (a button must not contain a button — see `TableRow`). */
+   * sibling instead (a button must not contain a button — see `TableRow`).
+   *
+   * The cell that takes the slack says so: `flex: 1, minWidth: 0`. This is a
+   * flex row, and a react-native `View` in one sizes to its max-content and
+   * never shrinks (`flexShrink: 0`, unlike the web), so a body left unstated
+   * lays out at the width of its longest line and overflows the container. */
   children: ReactNode;
   /** Layout only (gap, minHeight overrides). The surface owns its press
    * states — never pass backgroundColor for hover/selected. */

package/src/split_row.tsx

@@ -0,0 +1,110 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { View, type StyleProp, type ViewStyle } from "react-native";
+import { useScreenSize } from "./use_screen_size";
+import { SizeBoundary } from "./size_boundary";
+
+/** Whether the enclosing `SplitRow` has stacked. Private: a pane's only job is
+ *  to drop its weight, and nothing outside this pair needs to know. */
+const StackedContext = createContext(false);
+
+const InPaneContext = createContext(false);
+
+/**
+ * Whether this subtree is inside a `SplitPane` laid out beside a sibling.
+ *
+ * A card in a pane takes `flex: 1` so the row closes on one bottom edge; the
+ * same card standing alone in a page column would then fill the SCROLLER and
+ * paint a hundred pixels of nothing under its last row. The two cases need
+ * opposite answers and look identical at the call site, which is why the row
+ * publishes it rather than every card carrying a `fill` prop somebody has to
+ * remember. False when nothing encloses it, and false while the row is stacked
+ * — a stacked pane has no sibling to align with.
+ */
+export function useInSplitPane(): boolean {
+  return useContext(InPaneContext) && !useContext(StackedContext);
+}
+
+export interface SplitRowProps {
+  /** `SplitPane`s. Anything else is laid out as an unweighted child. */
+  children: ReactNode;
+  /** Gap between panes, in both directions. Default 16 — the dashboard band gap. */
+  gap?: number;
+  /**
+   * Keep the panes on one line no matter how narrow the container gets. For a
+   * row whose halves are meaningless apart — a value beside the unit it is in,
+   * a control beside the field it edits. Never for two cards.
+   */
+  never?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface SplitPaneProps {
+  children: ReactNode;
+  /**
+   * Share of the ROW's width, as `flex`. Dropped entirely when the row stacks,
+   * which is the whole reason this component exists — see below.
+   */
+  weight?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Two or more panes side by side that STACK when the container is phone-narrow.
+ *
+ * It exists because the hand-rolled version has a failure mode that measures
+ * clean and is invisible in review: `flex` distributes along the MAIN axis, so
+ * the moment a `flexDirection: "row"` becomes `"column"`, `flex: 3` and
+ * `flex: 2` stop dividing the WIDTH and start dividing the HEIGHT. The pane
+ * that asked for less is clipped mid-content; the one that asked for more
+ * carries a gap under it. Both read as bugs in the panes rather than in the
+ * row, so the fix gets aimed at the wrong component.
+ *
+ * The second trap is the condition. `useScreenSize` reports three buckets and
+ * `medium` spans 768–1727 — an ordinary desktop, not a narrow one — so a row
+ * that stacks on `small || medium` collapses for nearly every reader while
+ * measuring perfectly at the one width nobody uses. This component owns that
+ * decision so no caller has to get it right.
+ *
+ *   <SplitRow>
+ *     <SplitPane weight={3}><Card>…</Card></SplitPane>
+ *     <SplitPane weight={2}><Card>…</Card></SplitPane>
+ *   </SplitRow>
+ *
+ * Panes are `stretch`ed to equal height while side by side, which is what makes
+ * a row of cards read as one band. A pane with far less content than its
+ * neighbour will show that as white space — the answer is to give it the fact
+ * it is missing (a denominator, a comparison), not to unstretch the row.
+ */
+export function SplitRow({ children, gap = 16, never = false, style }: SplitRowProps) {
+  const screen = useScreenSize();
+  const stacked = !never && screen.small;
+  return (
+    <StackedContext.Provider value={stacked}>
+      <View
+        style={[
+          { flexDirection: stacked ? "column" : "row", gap, alignItems: "stretch" },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </StackedContext.Provider>
+  );
+}
+
+/**
+ * One pane. Also a `SizeBoundary`, because a pane is precisely the box whose
+ * width stops tracking the window: a chart inside a 2-of-5 pane on a wide
+ * screen is in a narrow box, and `useContainerSize()` is how it finds out. That
+ * is why the row's stacked state is NOT published — a descendant asking "did
+ * the row stack" is asking the wrong question, and would keep a vertical
+ * six-column chart in a 300px pane just because the screen is wide.
+ */
+export function SplitPane({ children, weight = 1, style }: SplitPaneProps) {
+  const stacked = useContext(StackedContext);
+  return (
+    <InPaneContext.Provider value={true}>
+      <SizeBoundary style={[stacked ? null : { flex: weight }, style]}>{children}</SizeBoundary>
+    </InPaneContext.Provider>
+  );
+}

package/src/stacked_progress_bar.tsx

@@ -28,6 +28,7 @@ interface StackedProgressBarProps {
    * when the bar IS the section's main visualization. */
   height?: number;
   loading?: boolean;
+  testID?: string;
 }
 
 /**
@@ -43,17 +44,27 @@ interface StackedProgressBarProps {
  * legend, the colored bar is decorative.
  */
 export function StackedProgressBar(props: StackedProgressBarProps) {
-  const { segments, total, title, caption, height = 14, loading } = props;
+  const { segments, total, title, caption, height = 14, loading, testID } = props;
+  // Segments are measured against the TOTAL, and the shortfall is drawn as the
+  // unfilled tail. Sizing them against each OTHER — `flex: seg.value` with no
+  // remainder — makes the bar full at every input, so the gap a caller passes a
+  // larger `total` to reveal can never appear: a forecast 40% short of its
+  // target paints identically to one that beat it.
+  const filled = segments.reduce((s, seg) => s + Math.max(seg.value, 0), 0);
+  // Over-target is a real state. Keep the segments' proportions and let the row
+  // read as full, rather than spilling one past the track.
+  const remainder = Math.max(total - filled, 0);
   const bar =
     loading || total === 0 ? (
-      <View style={[styles.bar, { height, backgroundColor: colors.zinc[100] }]} />
+      <View testID={testID} style={[styles.bar, { height, backgroundColor: colors.zinc[100] }]} />
     ) : (
-      <View style={[styles.bar, styles.barFilled, { height }]}>
+      <View testID={testID} style={[styles.bar, styles.barFilled, { height }]}>
         {segments
           .filter((s) => s.value > 0)
           .map((seg) => (
             <View key={seg.key} style={{ flex: seg.value, backgroundColor: seg.color }} />
           ))}
+        {remainder > 0 ? <View style={{ flex: remainder }} /> : null}
       </View>
     );
 

package/src/table.tsx

@@ -609,6 +609,11 @@ export function TableRow(props: TableRowProps) {
   const rowMinHeight = minHeight ?? ROW_HEIGHT;
   const showDetail = detail != null && expanded === true;
 
+  // ONE CELL PER COLUMN, POSITIONALLY — so a row's children may never be wrapped
+  // in a fragment. `Children.toArray` counts a fragment as ONE child, and the cells
+  // inside it are then handed no column at all: they size to content instead of to
+  // the declared width, and the register renders plausibly with its columns silently
+  // detached from their headers. Build a conditional group as an ARRAY of cells.
   const cells = (Children.toArray(children).filter(isValidElement) as ReactElement<TableCellProps>[])
     .map((cell, i) => ({ cell, column: ctx.columns[i] as TableColumn | undefined }))
     // A dropped column drops its cell (stacked shows everything). Cells beyond