@lotics/ui 44.9.0 → 44.9.1

package/MIGRATION.md

@@ -4,6 +4,33 @@ 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.9.1 — a pivot's figures align, and a ledger row stops losing its own name
+
+No API is removed and nothing fails to compile. Three renders change.
+
+**`Matrix` right-aligns its figures instead of centring them.** Every value, column
+header and total was `align="center"` while the cells also set `tabular` — and tabular
+figures exist so digits line up in a column, which centring throws away. Measured on a
+real pivot: centred, 24 figures painted across **14 distinct right edges**; right-aligned,
+**12** — exactly one per column. No `align` prop came with this: a matrix is one measure
+across two dimensions, so its cells cannot want different alignments, and a prop for a
+centred case nobody has is surface without a consumer.
+
+**`Matrix` row labels carry default ink, not `muted`.** A pivot whose rows are entities
+rendered every entity name a step quieter than the numbers about it, inverting how the
+grid is read — you find the row by its name, then scan across.
+
+**`MATRIX_COL_GAP` is exported.** It was the literal `3` in four places, so a caller
+sizing its own column budget had to hard-code it and could drift from what the grid draws.
+
+**A `LedgerRow`'s `meta` yields before its label, and by 3×.** Only the label carried a
+`flexShrink`, and RN-web resolves the unstyled caption to `1` as well — so under pressure
+both shrank proportionally, and because a caption is usually the longer string, the
+SUBORDINATE text ended up wider than the row's identity. Measured in a 180px row: before,
+the label kept 31px of the 77 it needs while the caption kept 41 of 103; after, the label
+keeps 55 and the caption 16. Any caller that dropped `meta` at small widths to dodge this
+can stop.
+
 ## 44.8.0 — a value column gets its own floor, and eight defaults stop fighting their own docs
 
 No API is removed. Three of these change what an existing screen renders, so read them even

package/docs/catalog.md

@@ -1407,8 +1407,9 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`table`** — `Table` + `TableRow` + `TableCell`: the paginated high-volume register
   (columns defined once, `sortLabels` localizable; rows are `PressableRow`-based).
   CONTAINER-RESPONSIVE with no prop (measures itself, like `Breakdown`/`DetailTable`): when
-  the width can't fit every column it hides columns by `TableColumn.priority` (higher drops
-  first; default = column order, rightmost first; column 0 — the identity — never drops), and
+  the width can't fit every column it hides columns by `TableColumn.priority` (**`1` = highest,
+  as in P1/P2/P3** — the smallest number is the last to go; default = column order, rightmost
+  first; column 0 — the identity — never drops), and
   below the two-column floor every row STACKS: the identity cell (column 0) HEADS the pile
   unlabelled — its column name would only restate the value — and each REMAINING cell renders
   as a `DetailRow`-spread line (muted label left, value at the right edge — one vocabulary with
@@ -1705,7 +1706,11 @@ component rather than showing it at zero.
 - **`matrix`** — `Matrix`: the PIVOT cross-tab — band-compound `Matrix` root +
   `Matrix.Header` (corner + axis labels) + `Matrix.Grid` (`display` number|heat|both — the
   cells, pressable, the value IN the cell) + `Matrix.Totals` (row + column + grand) +
-  `Matrix.Legend`. Pick over `Heatmap` when the NUMBER and totals matter.
+  `Matrix.Legend`. Pick over `Heatmap` when the NUMBER and totals matter. Figures are
+  RIGHT-aligned — they are `tabular`, and centring them defeats the aligned column that is
+  the reason to read a pivot at all — and row labels carry default ink, because a row's
+  label is its identity, not chrome. `MATRIX_COL_GAP` is exported for a caller budgeting
+  its own column widths.
 - **`matrix_totals`** — the data layer for `Matrix`: `matrixTotals` (the cross-tab
   aggregation) + `MatrixAxisItem` / `MatrixCellRef` / `MatrixTotalsResult`; React-free, so a
   KPI can be driven off the same numbers the grid shows.

package/package.json

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

package/src/ledger.tsx

@@ -237,7 +237,7 @@ export function LedgerRow(props: LedgerRowProps) {
         {label}
       </Text>
       {meta ? (
-        <Text size="xs" color="muted" numberOfLines={1}>
+        <Text size="xs" color="muted" numberOfLines={1} style={styles.yield}>
           {meta}
         </Text>
       ) : null}
@@ -357,6 +357,13 @@ const styles = StyleSheet.create({
   rowHovered: { backgroundColor: colors.zinc[50] },
   grow: { flexGrow: 1, flexShrink: 1 },
   shrink: { flexShrink: 1 },
+  // The META yields BEFORE the label, and by more. Only the label carried a
+  // shrink, so under width pressure the row'''s IDENTITY was the one thing that
+  // gave way while its subordinate qualifier held full width — a narrow ledger
+  // read "Tổng thu (chư…" beside an intact "03/06, Cash". A caption qualifies a
+  // number; the label names it, and the name is what a reader needs when the
+  // row is too tight for both.
+  yield: { flexShrink: 3 },
   total: { gap: 6 },
   // The BASIS row, the only one whose two sides can differ in height: its label may
   // carry a stacked `meta` while the figure stays one line. Centring then measures the

package/src/matrix.tsx

@@ -25,6 +25,11 @@ interface MatrixContextValue {
   totalColWidth: number;
 }
 
+/** Gap between a matrix's columns. Exported because a caller sizing its own
+ *  column budget needs the same number the grid renders with — hard-coding it
+ *  is how a width budget and the layout drift apart. */
+export const MATRIX_COL_GAP = 3;
+
 const MatrixContext = createContext<MatrixContextValue | null>(null);
 
 function useMatrix(): MatrixContextValue {
@@ -138,12 +143,12 @@ function MatrixHeader({ corner, totalLabel }: MatrixHeaderProps) {
         )}
       </View>
       {cols.map((c) => (
-        <Text key={c.key} size="xs" color="muted" align="center" numberOfLines={1} style={styles.colCell}>
+        <Text key={c.key} size="xs" color="muted" align="right" numberOfLines={1} style={styles.colCell}>
           {c.label}
         </Text>
       ))}
       {hasTotals ? (
-        <Text size="xs" color="muted" weight="medium" align="center" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
+        <Text size="xs" color="muted" weight="medium" align="right" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
           {resolvedTotalLabel}
         </Text>
       ) : null}
@@ -163,14 +168,14 @@ function MatrixGrid({ display = "both" }: MatrixGridProps) {
     <View style={styles.grid}>
       {rows.map((r) => (
         <View key={r.key} style={styles.row}>
-          <Text size="sm" color="muted" numberOfLines={1} style={[styles.rowLabel, { width: rowLabelWidth }]}>
+          <Text size="sm" numberOfLines={1} style={[styles.rowLabel, { width: rowLabelWidth }]}>
             {r.label}
           </Text>
           {cols.map((c) => (
             <MatrixCell key={c.key} ctx={ctx} display={display} row={r} col={c} value={value(r.key, c.key)} />
           ))}
           {hasTotals ? (
-            <Text size="sm" weight="semibold" tabular align="center" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
+            <Text size="sm" weight="semibold" tabular align="right" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
               {formatValue(rowTotals.get(r.key) ?? 0)}
             </Text>
           ) : null}
@@ -206,7 +211,7 @@ function MatrixCell({ ctx, display, row, col, value }: MatrixCellProps) {
   const label = `${row.label}, ${col.label}: ${formatValue(value)}`;
 
   const content = showNumber ? (
-    <Text size="sm" weight="medium" tabular align="center" color={value === 0 ? "zinc-500" : "default"}>
+    <Text size="sm" weight="medium" tabular align="right" color={value === 0 ? "zinc-500" : "default"}>
       {value === 0 ? "" : formatValue(value)}
     </Text>
   ) : null;
@@ -254,11 +259,11 @@ function MatrixTotals({ label }: MatrixTotalsProps) {
         {label ?? locale.matrix.total}
       </Text>
       {cols.map((c) => (
-        <Text key={c.key} size="sm" weight="semibold" tabular align="center" numberOfLines={1} style={styles.colCell}>
+        <Text key={c.key} size="sm" weight="semibold" tabular align="right" numberOfLines={1} style={styles.colCell}>
           {formatValue(colTotals.get(c.key) ?? 0)}
         </Text>
       ))}
-      <Text size="sm" weight="semibold" tabular align="center" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
+      <Text size="sm" weight="semibold" tabular align="right" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
         {formatValue(grandTotal)}
       </Text>
     </View>
@@ -295,21 +300,21 @@ Matrix.Legend = MatrixLegend;
 
 const styles = StyleSheet.create({
   container: {
-    gap: 3,
+    gap: MATRIX_COL_GAP,
   },
   headRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 3,
+    gap: MATRIX_COL_GAP,
     paddingBottom: 2,
   },
   grid: {
-    gap: 3,
+    gap: MATRIX_COL_GAP,
   },
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 3,
+    gap: MATRIX_COL_GAP,
   },
   rowLabel: {
     paddingRight: 8,
@@ -333,7 +338,7 @@ const styles = StyleSheet.create({
   totalsRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 3,
+    gap: MATRIX_COL_GAP,
     marginTop: 3,
     paddingTop: 8,
     borderTopWidth: 1,

package/src/table_fit.ts

@@ -20,12 +20,22 @@ export interface TableFitColumn {
   key: string;
   /** Fixed width in px; omit for a flexible column. */
   width?: number;
-  /** Drop precedence when the container can't fit every column: HIGHER numbers
-   *  drop first, ties drop right-to-left. The FIRST column is the row's identity
-   *  — it never drops.
+  /** 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
+   *  column drops, and ties drop right-to-left. The FIRST column is the row's
+   *  identity and never drops.
    *
-   *  An unannotated column defaults to `columns.length + index`, which is above
-   *  every hand-written priority rather than interleaved with them, so an
+   *  Stated rank-first deliberately. "Higher drops first" is accurate and was
+   *  all this said, but a reader who takes `priority` to mean "bigger is more
+   *  important" inverts it and gives their most important column the LARGEST
+   *  number — which is then the first column the fit sheds. That failure is
+   *  invisible at desk width and shows only on a phone, so it reviews as
+   *  correct. It has been read backwards once already.
+   *
+   *  An unannotated column defaults to `columns.length + index`, which sits
+   *  above the small ranks a real annotation uses rather than interleaved with
+   *  them, so an
    *  unannotated register still sheds right-to-left AND an explicit priority is
    *  strictly safer than none. Defaulting to the bare index made annotation
    *  actively harmful: marking your most important column `priority: 1` TIED it