@lotics/ui 47.13.0 → 47.14.0

package/src/date_filter_presets.ts

@@ -10,7 +10,11 @@ export type PresetId =
   | "tomorrow"
   | "this_week"
   | "this_month"
-  | "last_month";
+  | "last_month"
+  | "this_quarter"
+  | "last_quarter"
+  | "this_year"
+  | "last_year";
 
 /**
  * Display order. Every id here SETS a range — that is what makes the list a set
@@ -22,6 +26,9 @@ export type PresetId =
  * the obvious move for "let me pick my own dates", threw the range away. The
  * calendar above it is the custom picker, and the panel's Clear button is the
  * clear; the item was a third name for two controls that were already there.
+ *
+ * Ordered by GRAIN, shortest first — a reader scanning for "this quarter"
+ * looks past the days and the month rather than hunting an alphabetical list.
  */
 export const PRESET_IDS: PresetId[] = [
   "today",
@@ -30,6 +37,10 @@ export const PRESET_IDS: PresetId[] = [
   "this_week",
   "this_month",
   "last_month",
+  "this_quarter",
+  "last_quarter",
+  "this_year",
+  "last_year",
 ];
 
 function startOfDay(date: Date): Date {
@@ -73,6 +84,27 @@ function range(start: Date, end: Date): DateFilterValue {
   return { start: { date: start, time: null }, end: { date: end, time: null } };
 }
 
+/** The 0-based quarter a month falls in. */
+function quarterOf(date: Date): number {
+  return Math.floor(date.getMonth() / 3);
+}
+
+/**
+ * The whole quarter `q` (0-based) of `year`, as a range.
+ *
+ * Built from the quarter INDEX rather than by shifting a date three months:
+ * `setMonth(getMonth() - 3)` on the 31st of a month lands in the month after
+ * the one meant (31 May → 31 February → 3 March), and the quarter then comes
+ * out one too late for every long month.
+ */
+function quarterRange(year: number, q: number): DateFilterValue {
+  return range(new Date(year, q * 3, 1), new Date(year, q * 3 + 3, 0, 23, 59, 59, 999));
+}
+
+function yearRange(year: number): DateFilterValue {
+  return range(new Date(year, 0, 1), new Date(year, 11, 31, 23, 59, 59, 999));
+}
+
 /**
  * Resolve a preset to a concrete date range relative to `now`. Total — every
  * `PresetId` names a range. The boundary math is identical to the view-page
@@ -101,5 +133,181 @@ export function getPresetValue(id: PresetId, now: Date): DateFilterValue {
       d.setMonth(d.getMonth() - 1);
       return range(startOfMonth(d), endOfMonth(d));
     }
+    case "this_quarter":
+      return quarterRange(now.getFullYear(), quarterOf(now));
+    case "last_quarter": {
+      const q = quarterOf(now) - 1;
+      return q < 0 ? quarterRange(now.getFullYear() - 1, 3) : quarterRange(now.getFullYear(), q);
+    }
+    case "this_year":
+      return yearRange(now.getFullYear());
+    case "last_year":
+      return yearRange(now.getFullYear() - 1);
   }
 }
+
+const DAY_MS = 86_400_000;
+
+function isWholeMonth(start: Date, end: Date): boolean {
+  return (
+    start.getDate() === 1 &&
+    start.getFullYear() === end.getFullYear() &&
+    start.getMonth() === end.getMonth() &&
+    end.getDate() === new Date(end.getFullYear(), end.getMonth() + 1, 0).getDate()
+  );
+}
+
+function isWholeQuarter(start: Date, end: Date): boolean {
+  return (
+    start.getDate() === 1 &&
+    start.getMonth() % 3 === 0 &&
+    start.getFullYear() === end.getFullYear() &&
+    end.getMonth() === start.getMonth() + 2 &&
+    end.getDate() === new Date(end.getFullYear(), end.getMonth() + 1, 0).getDate()
+  );
+}
+
+function isWholeYear(start: Date, end: Date): boolean {
+  return (
+    start.getFullYear() === end.getFullYear() &&
+    start.getMonth() === 0 &&
+    start.getDate() === 1 &&
+    end.getMonth() === 11 &&
+    end.getDate() === 31
+  );
+}
+
+/**
+ * THE COMPARATOR for a selected range — the period a report means by "so với kỳ
+ * trước". Derived from the range the reader already picked, so a dashboard needs
+ * no second control beside its date field to say what it is comparing against.
+ *
+ * A range that IS a whole calendar month, quarter or year steps back one WHOLE
+ * period, never a fixed number of days: February against March is 28 days
+ * against 31, and sliding a 31-day window back would compare March against the
+ * last three days of January plus February. Any other complete range — a
+ * hand-picked fortnight, a week — steps back by its own LENGTH, ending the day
+ * before it starts, so two adjacent windows of equal size are compared.
+ *
+ * Whole days only. The bounds come back day-aligned and untimed, matching the
+ * presets, because a period comparison is a comparison of periods; a timed
+ * window has no previous one to speak of. `null` when either bound is missing —
+ * an open range names no period, and a comparator invented for one would be a
+ * figure the reader never asked for.
+ */
+export function previousPeriod(value: DateFilterValue): DateFilterValue | null {
+  const { date: startDate } = value.start;
+  const { date: endDate } = value.end;
+  if (!startDate || !endDate) return null;
+
+  const start = startOfDay(startDate);
+  const end = startOfDay(endDate);
+
+  if (isWholeYear(start, end)) return yearRange(start.getFullYear() - 1);
+  if (isWholeQuarter(start, end)) {
+    const q = quarterOf(start) - 1;
+    return q < 0 ? quarterRange(start.getFullYear() - 1, 3) : quarterRange(start.getFullYear(), q);
+  }
+  if (isWholeMonth(start, end)) {
+    const d = new Date(start.getFullYear(), start.getMonth() - 1, 1);
+    return range(startOfMonth(d), endOfMonth(d));
+  }
+
+  // Rounded, not floored: a range spanning a DST change is 23 or 25 hours short
+  // of a whole number of days, and a floor would silently drop one from it.
+  const days = Math.round((end.getTime() - start.getTime()) / DAY_MS) + 1;
+  const prevEnd = new Date(start);
+  prevEnd.setDate(prevEnd.getDate() - 1);
+  const prevStart = new Date(prevEnd);
+  prevStart.setDate(prevStart.getDate() - (days - 1));
+  return range(startOfDay(prevStart), endOfDay(prevEnd));
+}
+
+/** A selected period read against the clock, with its comparator already cut. */
+export interface PeriodToDate {
+  /** The selection, ending at `now` while the period is still RUNNING. */
+  current: DateFilterValue;
+  /** `previousPeriod`, cut to the same elapsed days. `null` when the selection
+   *  is open-ended and so names no period to step back from. */
+  previous: DateFilterValue | null;
+  /** `now` falls before the selection's last day. */
+  running: boolean;
+  /** Days of the selection already behind us — 0 for a period still ahead. */
+  elapsedDays: number;
+  /** Days the whole selection holds, elapsed or not. */
+  totalDays: number;
+}
+
+/** Whole days between two day-aligned dates, inclusive. Rounded for the reason
+ *  `previousPeriod` rounds: a DST change makes a span 23 or 25 hours. */
+function dayCount(from: Date, to: Date): number {
+  return Math.round((to.getTime() - from.getTime()) / DAY_MS) + 1;
+}
+
+function addDays(date: Date, days: number): Date {
+  const d = new Date(date);
+  d.setDate(d.getDate() + days);
+  return d;
+}
+
+/**
+ * A RUNNING period is compared TO DATE: both sides cut to the days that have
+ * actually elapsed.
+ *
+ * Six days of this month placed beside a whole previous month reads as a
+ * collapse that never happened, and it lands on the first figure anyone looks
+ * at. So the selection ends at `now` while it is still running, and the
+ * comparator `previousPeriod` names is cut to the same count from ITS first
+ * day — six days against the first six, a quarter's 68 days against the
+ * previous quarter's first 68. The cut is clamped to the previous period's own
+ * end, so thirty elapsed days of March compare against all 28 of February
+ * rather than running past it.
+ *
+ * A period already closed keeps both sides whole. A period entirely in the
+ * future has nothing elapsed: `current` holds its first day and `elapsedDays`
+ * is 0, so a caller can say it has not started instead of drawing a −100%.
+ *
+ * `null` when either bound is missing, matching `previousPeriod`.
+ */
+export function periodToDate(value: DateFilterValue, now: Date): PeriodToDate | null {
+  const { date: startDate } = value.start;
+  const { date: endDate } = value.end;
+  if (!startDate || !endDate) return null;
+
+  const from = startOfDay(startDate);
+  const to = startOfDay(endDate);
+  const today = startOfDay(now);
+  const totalDays = dayCount(from, to);
+  const whole = previousPeriod(value);
+
+  if (today.getTime() >= to.getTime()) {
+    return {
+      current: range(from, endOfDay(to)),
+      previous: whole,
+      running: false,
+      elapsedDays: totalDays,
+      totalDays,
+    };
+  }
+
+  const elapsedDays = today.getTime() < from.getTime() ? 0 : dayCount(from, today);
+  const previous = (() => {
+    const prevStart = whole?.start.date;
+    const prevEnd = whole?.end.date;
+    if (!prevStart || !prevEnd) return null;
+    const opens = startOfDay(prevStart);
+    const closes = startOfDay(prevEnd);
+    // `max(elapsed, 1)`: a period not yet begun still names one day on each
+    // side, so the pair has the same shape whichever side of `now` it sits.
+    const cut = addDays(opens, Math.max(elapsedDays, 1) - 1);
+    return range(opens, endOfDay(cut.getTime() > closes.getTime() ? closes : cut));
+  })();
+
+  return {
+    current: range(from, endOfDay(elapsedDays === 0 ? from : today)),
+    previous,
+    running: true,
+    elapsedDays,
+    totalDays,
+  };
+}

package/src/date_range_filter_field.tsx

@@ -63,20 +63,30 @@ function formatBound(date: Date | null, time: string | null, locale: string | un
 /**
  * Recognized whole periods display compactly — a range that IS a calendar
  * month reads "Tháng 6 năm 2026" (sentence-cased via the locale), a whole
- * year "2026", a single day one date. Anything else falls back to
- * "start – end". Keeps the trigger scannable where dashboards live in
- * period rhythm, not date pairs.
+ * quarter "Quý 2 năm 2026", a whole year "2026", a single day one date.
+ * Anything else falls back to "start – end". Keeps the trigger scannable where
+ * dashboards live in period rhythm, not date pairs.
  */
 function formatRangeDisplay(start: Date, end: Date, locale: string | undefined): string {
   if (start.toDateString() === end.toDateString()) return formatDate(start, { locale });
 
+  const lastDayOfEndMonth = new Date(end.getFullYear(), end.getMonth() + 1, 0).getDate();
+
   const wholeMonth =
     start.getDate() === 1 &&
     start.getMonth() === end.getMonth() &&
     start.getFullYear() === end.getFullYear() &&
-    end.getDate() === new Date(end.getFullYear(), end.getMonth() + 1, 0).getDate();
+    end.getDate() === lastDayOfEndMonth;
   if (wholeMonth) return formatDate(start, { format: "monthYear", locale });
 
+  const wholeQuarter =
+    start.getDate() === 1 &&
+    start.getMonth() % 3 === 0 &&
+    start.getFullYear() === end.getFullYear() &&
+    end.getMonth() === start.getMonth() + 2 &&
+    end.getDate() === lastDayOfEndMonth;
+  if (wholeQuarter) return formatDate(start, { format: "quarterYear", locale });
+
   const wholeYear =
     start.getFullYear() === end.getFullYear() &&
     start.getMonth() === 0 &&

package/src/detail_row.tsx

@@ -167,32 +167,32 @@ export function DetailRow(props: DetailRowProps) {
   // thing on two surfaces; they may not say a fault two different ways.
   const annotations = <FieldAnnotations description={description} warning={warning} error={error} flat={flat} />;
   if (table?.stacked) {
-    // Stacked mode wears the FORM grammar: the label renders exactly like a
-    // `FormField` label (medium, default ink), so a narrow record surface
-    // reads as one vocabulary with forms. The COMPONENTS stay separate — a
-    // FormField wraps a draft control validated and committed together, an
-    // inline editor self-persists — only the look converges.
+    // Stacked mode wears the form LOOK — the label renders like a `FormField`
+    // label (medium, default ink), so a narrow record surface reads as one
+    // vocabulary with forms — but keeps the RECORD's reading order: label,
+    // value, then whatever has to be said about it.
+    //
+    // Not the form ORDER, which puts the description above the control. A form's
+    // description is guidance you need BEFORE typing; a record's qualifies a
+    // value that already exists, so ahead of it the reader gets "còn 116 ngày"
+    // before any date and "con số là cho cả hợp đồng" before any con số. Reading
+    // a caption before its subject is not one job per element, and it made one
+    // row read two ways at two widths — the horizontal branch has always put
+    // annotations UNDER the value.
+    //
+    // The annotations are the shared `FieldAnnotations` anatomy, the same one
+    // the horizontal branch renders, so a fault says itself one way at both
+    // widths — hand-rolled here they came out a rung larger and off the
+    // control's own text inset.
     return (
       <View style={styles.stackedRow}>
         {/* Wraps, like the horizontal label — a stacked row has the FULL width
             to spend, so clipping here would be gratuitous. */}
         <Text weight="medium">{label}</Text>
-        {/* stacked wears the FORM grammar exactly: label, description,
-            control, warning, error (the `FormField` order) */}
-        {description != null ? <Text color="muted">{description}</Text> : null}
         <View style={[styles.stackedValueRow, { minHeight }]}>
           <View style={styles.value}>{children}</View>
         </View>
-        {warning != null ? (
-          <Text size="xs" color="warning" accessibilityRole="alert" aria-live="polite">
-            {warning}
-          </Text>
-        ) : null}
-        {error != null ? (
-          <Text size="xs" color="danger" accessibilityRole="alert" aria-live="polite">
-            {error}
-          </Text>
-        ) : null}
+        {annotations}
       </View>
     );
   }

package/src/drawer.tsx

@@ -104,6 +104,30 @@ export function Drawer(props: DrawerProps) {
     return () => document.removeEventListener("keydown", handler);
   }, [open, onPrev, onNext]);
 
+  // ONE definition for both placements. Written twice, the wide bar and the
+  // narrow line would drift the first time either gained a control.
+  const RecordNav = () => (
+    <View style={styles.nav}>
+      <IconButton
+        icon="chevron-left"
+        accessibilityLabel={loc.previous}
+        onPress={onPrev ?? (() => {})}
+        disabled={!onPrev}
+      />
+      {position ? (
+        <Text size="xs" color="muted" tabular>
+          {position}
+        </Text>
+      ) : null}
+      <IconButton
+        icon="chevron-right"
+        accessibilityLabel={loc.next}
+        onPress={onNext ?? (() => {})}
+        disabled={!onNext}
+      />
+    </View>
+  );
+
   // Mounted only while OPEN — see `overlay_layer.ts`. react-native-web appends a
   // `Modal`'s body-level div on first render and never re-orders it, so an
   // always-mounted overlay claims its slot ahead of one opened later and covers
@@ -117,36 +141,32 @@ export function Drawer(props: DrawerProps) {
         <Pressable style={styles.scrim} onPress={handleClose} accessibilityLabel={loc.close} tabIndex={-1} />
         <View style={[styles.panel, { width: screenSize.small ? "100%" : width }]}>
           <PortalHost>
-            <View style={styles.header}>
-              {typeof title === "string" ? (
-                <Text size="lg" weight="semibold" style={{ flex: 1 }}>
-                  {title}
-                </Text>
-              ) : (
-                <View style={{ flex: 1 }}>{title}</View>
-              )}
-              {hasNav ? (
-                <View style={styles.nav}>
-                  <IconButton
-                    icon="chevron-left"
-                    accessibilityLabel={loc.previous}
-                    onPress={onPrev ?? (() => {})}
-                    disabled={!onPrev}
-                  />
-                  {position ? (
-                    <Text size="xs" color="muted" tabular>
-                      {position}
-                    </Text>
-                  ) : null}
-                  <IconButton
-                    icon="chevron-right"
-                    accessibilityLabel={loc.next}
-                    onPress={onNext ?? (() => {})}
-                    disabled={!onNext}
-                  />
+            {/* THE TITLE IS THE LAST THING THE BAR GIVES UP.
+                It names the record — whose file is open — and on one bar with a
+                pager and three icon buttons it is the only element that CAN
+                give way, because every one of those is a fixed width. At 375
+                that made the drawer cut its own subject ("Hộ kinh doanh Vận tải
+                Đức Thắng" needed 261px and got 206) while the chrome beside it
+                sat whole. So below the split width the record navigation drops
+                to its own line and the name takes the full bar; the close stays
+                up top, where a reader reaches for it. */}
+            <View style={[styles.header, screenSize.small && hasNav ? styles.headerStacked : null]}>
+              <View style={styles.headerTopLine}>
+                {typeof title === "string" ? (
+                  <Text size="lg" weight="semibold" style={{ flex: 1 }}>
+                    {title}
+                  </Text>
+                ) : (
+                  <View style={{ flex: 1, minWidth: 0 }}>{title}</View>
+                )}
+                {hasNav && !screenSize.small ? <RecordNav /> : null}
+                <IconButton icon="x" size="lg" accessibilityLabel={loc.close} onPress={handleClose} />
+              </View>
+              {hasNav && screenSize.small ? (
+                <View style={styles.navLine}>
+                  <RecordNav />
                 </View>
               ) : null}
-              <IconButton icon="x" size="lg" accessibilityLabel={loc.close} onPress={handleClose} />
             </View>
             <SizeBoundary testID={testID} style={styles.body}>
               {children}
@@ -263,6 +283,24 @@ const styles = StyleSheet.create({
     borderLeftColor: colors.border,
     boxShadow: "-8px 0 24px rgba(0, 0, 0, 0.08)",
   },
+  // The narrow bar is a COLUMN: the title's line, then the record navigation
+  // under it. Two lines cost 32px; a cut record name costs the reader the one
+  // fact that says which file they are in.
+  headerStacked: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: 4,
+  },
+  headerTopLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    minWidth: 0,
+  },
+  navLine: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+  },
   header: {
     flexDirection: "row",
     alignItems: "center",

package/src/format_date.ts

@@ -9,7 +9,8 @@ export type DateFormatStyle =
   | "medium" // 22 thg 5, 2026 / Sep 22, 2026 — readable, abbreviated month
   | "long" // 22 tháng 5, 2026 / September 22, 2026 — readable, full month
   | "dayMonth" // 22 thg 5 / Sep 22 — day + abbreviated month, no year
-  | "monthYear"; // Tháng 5 2026 / May 2026 — a period label (sentence-cased)
+  | "monthYear" // Tháng 5 năm 2026 / May 2026 — a period label (sentence-cased)
+  | "quarterYear"; // Quý 2 năm 2026 / Q2 2026 — the quarter the value falls in
 
 export interface FormatDateOptions {
   /** The date style. Default "date". */
@@ -34,6 +35,20 @@ const READABLE_OPTS: Record<"medium" | "long" | "dayMonth" | "monthYear", Intl.D
   monthYear: { month: "long", year: "numeric" },
 };
 
+/**
+ * How a quarter is SAID, by language.
+ *
+ * A table rather than `Intl`: CLDR carries no quarter pattern for
+ * `DateTimeFormat`, so there is nothing to ask it for. Every other language
+ * falls to the international "Q2 2026" — which is what an unlocalized surface
+ * should print, rather than a Vietnamese sentence it never asked for.
+ */
+const QUARTER_YEAR: Record<string, (quarter: number, year: number) => string> = {
+  vi: (quarter, year) => `Quý ${quarter} năm ${year}`,
+};
+
+const defaultQuarterYear = (quarter: number, year: number): string => `Q${quarter} ${year}`;
+
 const ISO_YEAR = /^(\d{4})$/;
 const ISO_YEAR_MONTH = /^(\d{4})-(\d{2})$/;
 const ISO_DATE_TIME = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?$/;
@@ -104,7 +119,8 @@ export function toISODate(value: Date | string | null | undefined): string {
  * THE date-value formatter — the date sibling of `formatMoney`. Accepts a `Date` OR an ISO string
  * and returns a localized display string; defaults to the home market. `format` picks the date
  * style: `date` → `22/05/2026`; `medium` → `22 thg 5, 2026`; `long` → `22 tháng 5, 2026`;
- * `dayMonth` → `22 thg 5`, `monthYear` → `Tháng 5 2026`. **`time: true` prepends the 24h time to
+ * `dayMonth` → `22 thg 5`, `monthYear` → `Tháng 5 năm 2026`, `quarterYear` → `Quý 2 năm 2026`
+ * (`Q2 2026` outside Vietnamese). **`time: true` prepends the 24h time to
  * ANY style** — `14:30 22/05/2026`, `14:30 22 tháng 5, 2026` (time-first). `compact` drops the
  * year on the numeric `date` style. Never hand-roll a date with `padStart` / `getMonth` / a raw
  * `Intl.DateTimeFormat` for VALUE display — call this. (Component-internal chrome is exempt — see
@@ -124,6 +140,16 @@ export function formatDate(value: Date | string | null | undefined, options: For
   if (precision === "year") {
     return String(date.getFullYear());
   }
+  // A quarter is read off the MONTH, so a month-precision value serves it
+  // exactly as a full date does — and, being a calendar period, it carries no
+  // day and no clock whatever `time` says.
+  if (format === "quarterYear") {
+    const language = locale.split("-")[0].toLowerCase();
+    return (QUARTER_YEAR[language] ?? defaultQuarterYear)(
+      Math.floor(date.getMonth() / 3) + 1,
+      date.getFullYear(),
+    );
+  }
   if (precision === "month") {
     return formatMonthYear(date, format, locale, compact, emptyLabel);
   }
@@ -166,7 +192,9 @@ export function formatDate(value: Date | string | null | undefined, options: For
  */
 function formatMonthYear(
   date: Date,
-  format: DateFormatStyle,
+  // `quarterYear` never arrives here — it answers before precision is consulted,
+  // and it takes no month options to strip a day out of.
+  format: Exclude<DateFormatStyle, "quarterYear">,
   locale: string,
   compact: boolean,
   emptyLabel: string,

package/src/index.css

@@ -351,6 +351,24 @@ html {
   outline: none;
 }
 
+/* Native UA number-stepper reset — subtractive, like the focus reset above.
+   `NumberInput` renders `type="number"` for the numeric keypad and the parse,
+   and the browser throws in a stepper: two arrows that sit ON the right edge of
+   a right-aligned figure and take width out of the field, so a numeric column is
+   one width at rest and a narrower one the moment somebody focuses a cell.
+   Nothing in the kit steps a value by pressing an arrow — `Counter` draws its
+   own — so it is a control that costs layout and does nothing. */
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
 /* @font-face declarations are NOT included here — each app provides its own
    font loading because paths differ per platform:
    - Frontend: /fonts/Inter_*.woff2 (served from public/)

package/src/ledger.tsx

@@ -256,24 +256,27 @@ export function LedgerRow(props: LedgerRowProps) {
   const { label, meta, value, tone = "default", peek, peekWidth = 300, reference, accessibilityLabel } = props;
   const rowDetails = useLoticsLocale().ledger.rowDetails;
   const { format, dropMeta } = useLedger();
-  // The caption goes entirely rather than shrinking to nothing. Yielding first
-  // (below) is the right ORDER but not a floor: at phone width a long caption
-  // still claims most of the text budget, clips, and takes the label down with
-  // it. Two separate
-  // authors had already worked around this by dropping `meta` at small widths
-  // in their own apps, which is the component's job.
+  // Below `META_MIN_ROW_WIDTH` the caption goes entirely rather than surviving as
+  // a sliver. Yielding first (see `yield`) is the right ORDER but not a floor: at
+  // phone width a caption clipped to two syllables is noise, and the space reads
+  // better spent on nothing. Two separate authors had already worked around this
+  // by dropping `meta` at small widths in their own apps, which is the
+  // component's job.
   const showMeta = meta != null && meta !== "" && !dropMeta;
   const content = (
     <>
       <Text size="sm" numberOfLines={1} style={styles.shrink}>
         {label}
       </Text>
+      {/* The caption IS the row's filler — it takes what the label and the figure
+          leave. With no caption to hold it open, an empty one does the same job. */}
       {showMeta ? (
         <Text size="xs" color="muted" numberOfLines={1} style={styles.yield}>
           {meta}
         </Text>
-      ) : null}
-      <View style={styles.grow} />
+      ) : (
+        <View style={styles.grow} />
+      )}
       {!peek && reference ? (
         <Link size="xs" onPress={reference.onPress} accessibilityLabel={reference.label}>
           {reference.label}
@@ -389,13 +392,18 @@ 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 },
+  // The META yields ENTIRELY before the label yields at all. A shrink RATIO (this
+  // was 3 against the label's 1) buys an order of magnitude, not an order of
+  // service: flexbox scales a shrink factor by the item's own width, so a caption
+  // longer than the label still handed part of the loss back to it, and a 375px
+  // ledger read "Ghi công … / nằm trong số còn phải t…" — both halves clipped,
+  // and the FIGURE squeezed along with them. Sizing the caption off the leftovers
+  // instead (`flexBasis: 0` + `flexGrow: 1`, so it is also the row's filler) makes
+  // the order exact: the label and the figure take their content width first, the
+  // caption gets what remains, and only once it is down to nothing does the label
+  // start clipping. 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: { flexGrow: 1, flexShrink: 1, flexBasis: 0 },
   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