@lotics/ui 44.7.1 → 44.9.0

package/src/related_record_row.tsx

@@ -0,0 +1,80 @@
+import { type ReactNode } from "react";
+import { View } from "react-native";
+import { Text } from "./text";
+import { Eyebrow } from "./eyebrow";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+import { PressableHighlight } from "./pressable_highlight";
+import { useLoticsLocale } from "./locale";
+
+export interface RelatedRecordRowProps {
+  /** What KIND of record this is — the table/app it lives in ("Kế hoạch sản
+   *  xuất", "Lệnh sản xuất"). Rendered as an `Eyebrow` naming the value below
+   *  it, the same job an `Eyebrow` does in a cell or a metric caption. */
+  kind: string;
+  /** The record's own human code ("KH-2026-0001"). */
+  code: string;
+  /** The record's status, rendered as-is beside the code — pass a `Badge`.
+   *  Omit for a reference with no lifecycle state worth carrying here. */
+  status?: ReactNode;
+  /**
+   * Opens the record. THE HOST performs the navigation — typically
+   * `openExternal(url)` from `@lotics/app-sdk` into a sibling app's own
+   * deployed URL, since a suite of apps like this one is several SEPARATELY
+   * DEPLOYED bundles with no shared router; only the calling app knows the
+   * target app's subdomain and its own route shape for a record page. Omit
+   * for a report-only reference with nowhere to send the reader (a linked
+   * record whose app cannot be reached, or a same-app case better served by
+   * an in-app navigate instead of this component at all).
+   */
+  onOpen?: () => void;
+  /** Accessible name for the row when `onOpen` is set. Defaults to
+   *  "<kind> <code>" — override when that reads ambiguously (the same kind
+   *  repeated down a list of several). */
+  accessibilityLabel?: string;
+}
+
+/**
+ * A pointer to ONE record living in a DIFFERENT app's table — never a route
+ * inside this bundle, because a document-desk suite deploys one app per
+ * department with no in-app path to a sibling's record. Composes as a
+ * `DetailRow`'s value for a single relationship ("Kế hoạch sản xuất" →
+ * one linked plan) or repeats plainly in a list for several (an order's
+ * three downstream production plans) — the surrounding label/heading is the
+ * caller's choice, this renders one reference.
+ *
+ * NOT `ReferenceField`: that component edits an in-workspace link (peek,
+ * Change, Clear, an editable facts draft) for a reference the CURRENT app's
+ * own table holds. This one only ever reports — the target record's fields
+ * live in a table another app's bundle renders, so there is no draft to
+ * open and no picker to reassign from here.
+ */
+export function RelatedRecordRow(props: RelatedRecordRowProps) {
+  const { kind, code, status, onOpen, accessibilityLabel } = props;
+  const locale = useLoticsLocale();
+  const content = (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <Eyebrow numberOfLines={1}>{kind}</Eyebrow>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Text size="sm" numberOfLines={1}>
+            {code}
+          </Text>
+          {status}
+        </View>
+      </View>
+      {onOpen ? <Icon name="external-link" size={14} color={colors.zinc[400]} /> : null}
+    </View>
+  );
+  if (!onOpen) return content;
+  return (
+    <PressableHighlight
+      focusRing
+      onPress={onOpen}
+      accessibilityLabel={accessibilityLabel ?? locale.relatedRecordRow.open(kind, code)}
+      style={{ paddingVertical: 4 }}
+    >
+      {content}
+    </PressableHighlight>
+  );
+}

package/src/running_ledger.tsx

@@ -0,0 +1,196 @@
+import { StyleSheet, View } from "react-native";
+import { Divider } from "./divider";
+import { Link } from "./link";
+import { signed } from "./ledger";
+import { Text } from "./text";
+import { formatDate } from "./format_date";
+import { useLoticsLocale } from "./locale";
+
+export interface RunningLedgerOpening {
+  /** What the anchor IS ("Tồn đầu kỳ", "Số dư đầu kỳ"). */
+  label: string;
+  /** ISO date, when the anchor has one — a stock count date, a statement's
+   *  period start. Omit for a balance with no dated origin. */
+  date?: string;
+  /** The balance BEFORE the first row. */
+  balance: number;
+}
+
+export interface RunningLedgerRow {
+  id: string;
+  /** ISO date. Rows render in the order given — this component does not sort
+   *  them, so the caller's own query order IS the chronology on screen. */
+  date: string;
+  /** What happened ("Nhập kho theo PO-2026-0001", "Thu tiền hóa đơn HD-014"). */
+  label: string;
+  /** The movement. Signed: positive is IN/debit, negative is OUT/credit — ONE
+   *  field rather than paired in/out columns, so the same row shape serves a
+   *  stock quantity and a money statement without either caller picking the
+   *  other's vocabulary. */
+  amount: number;
+  /** A trailing reference link (the source PO, the invoice this receipt was
+   *  matched against). */
+  reference?: { label: string; onPress: () => void };
+}
+
+export interface RunningLedgerProps {
+  opening: RunningLedgerOpening;
+  /** Chronological rows — oldest first. Each row's running balance is this
+   *  component's own DERIVED value (`opening.balance` plus every `amount` up
+   *  to and including that row), never a value the caller supplies: a running
+   *  balance is exactly the row that MUST equal what it accumulates, and a
+   *  caller-supplied figure is the one shape of drift no reader can catch by
+   *  looking. */
+  rows: RunningLedgerRow[];
+  /** Formats every figure on the balance/amount column — `formatMoney` for a
+   *  statement, or a quantity formatter (`(n) => \`${n.toLocaleString()} kg\`
+   *  `) for a stock ledger. ONE formatter for the whole ledger: every row here
+   *  shares one unit, which is what lets the column state it once instead of
+   *  per row. */
+  format: (n: number) => string;
+  /** A row whose running balance lands AT OR BELOW this reads in danger tone
+   *  — a stock-out, an account gone negative. Omit for a ledger with no
+   *  critical floor (most money statements; a stock ledger typically passes
+   *  0). */
+  criticalAtOrBelow?: number;
+  /**
+   * The closing line's label. Default resolves from the locale pack
+   * ("Current balance"), which fits a money statement but not every domain
+   * this serves both of on day one — a stock kardex wants "Tồn kho hiện
+   * tại", specific vocabulary the locale pack cannot own for every future
+   * caller. Override per instance the same way `Sources.label` does.
+   */
+  closingLabel?: string;
+}
+
+/**
+ * A chronological, self-totalling ledger — a stock kardex, a statement of
+ * account — where every row carries the balance AS OF that row. NOT `Ledger`:
+ * that component closes a fixed set of charge/receipt GROUPS into one total
+ * and has no chronological concept at all; reaching for it here would mean
+ * inventing a "group" for what is actually a time series and losing the
+ * running balance a kardex or a statement is FOR. Composes a `Divider`-closed
+ * current-balance line the same way `Ledger`'s own `LedgerTotal` does, so a
+ * page mixing this with a `Ledger` elsewhere still reads as one design
+ * language.
+ *
+ * The balance column is DERIVED — see `rows`' own doc. A platform whose
+ * rollup engine cannot produce an ordered cumulative aggregate (no per-row
+ * stored balance exists for a stock movement today) is exactly the case this
+ * is for: opening balance + a plain list of signed deltas needs no schema
+ * change on either side to render correctly.
+ */
+export function RunningLedger(props: RunningLedgerProps) {
+  const { opening, rows, format, criticalAtOrBelow, closingLabel } = props;
+  const locale = useLoticsLocale();
+  let running = opening.balance;
+  const computed = rows.map((r) => {
+    running += r.amount;
+    return { row: r, balance: running };
+  });
+  const closing = computed.length > 0 ? computed[computed.length - 1].balance : opening.balance;
+  const closingCritical = criticalAtOrBelow != null && closing <= criticalAtOrBelow;
+  // Evaluated independently of `closingCritical` (and of whether there are
+  // any rows at all) — an opening balance that already sits at/below the
+  // floor must read as critical on ITS OWN row; the closing line below only
+  // renders when there is at least one row, so it can never be the sole
+  // carrier of this signal.
+  const openingCritical = criticalAtOrBelow != null && opening.balance <= criticalAtOrBelow;
+
+  return (
+    <View style={styles.ledger}>
+      <View style={styles.openingRow}>
+        <View style={styles.grow}>
+          <Text size="sm" weight="medium">
+            {opening.label}
+          </Text>
+          {opening.date ? (
+            <Text size="xs" color="muted">
+              {formatDate(opening.date)}
+            </Text>
+          ) : null}
+        </View>
+        <Text size="sm" weight="medium" tabular color={openingCritical ? "danger" : undefined}>
+          {signed(format, opening.balance)}
+        </Text>
+      </View>
+      {computed.map(({ row, balance }) => {
+        const critical = criticalAtOrBelow != null && balance <= criticalAtOrBelow;
+        return (
+          <View key={row.id} style={styles.row}>
+            <Text size="xs" color="muted" numberOfLines={1} style={styles.date}>
+              {formatDate(row.date)}
+            </Text>
+            <Text size="sm" numberOfLines={1} style={styles.shrink}>
+              {row.label}
+            </Text>
+            {row.reference ? (
+              <Link size="xs" onPress={row.reference.onPress} accessibilityLabel={row.reference.label}>
+                {row.reference.label}
+              </Link>
+            ) : null}
+            <View style={styles.grow} />
+            {/* Neutral, never auto-toned by sign: an OUT movement is routine
+                business (a stock issue to a filled order, a payment applied)
+                as often as an IN one, and colouring every negative red would
+                claim a meaning the number alone does not carry — the same
+                restraint `LedgerRow`'s own `tone` leaves to its caller. The
+                one signal this component DOES own is `criticalAtOrBelow`,
+                which is a real domain rule the caller opted into, not a
+                guess from the arithmetic sign. */}
+            <Text size="sm" tabular style={styles.amount}>
+              {signed(format, row.amount)}
+            </Text>
+            <Text size="sm" weight="medium" tabular color={critical ? "danger" : undefined} style={styles.balance}>
+              {signed(format, balance)}
+            </Text>
+          </View>
+        );
+      })}
+      {computed.length > 0 ? (
+        <View style={styles.total}>
+          <Divider />
+          <View style={styles.row}>
+            <Text size="md" weight="semibold" style={styles.grow}>
+              {closingLabel ?? locale.runningLedger.currentBalance}
+            </Text>
+            <Text size="md" weight="semibold" tabular color={closingCritical ? "danger" : undefined}>
+              {signed(format, closing)}
+            </Text>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Mirrors `Ledger`'s own outdent + row rhythm so the two read as one design
+  // language wherever a page uses both.
+  ledger: { gap: 0, marginHorizontal: -8 },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 28,
+    paddingHorizontal: 8,
+  },
+  openingRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: 10,
+    minHeight: 28,
+    paddingHorizontal: 8,
+    marginBottom: 4,
+  },
+  grow: { flexGrow: 1, flexShrink: 1 },
+  shrink: { flexShrink: 1 },
+  date: { width: 72 },
+  // Fixed widths so the amount and balance columns each keep ONE right edge
+  // down the whole run, whatever an individual figure's digit count — the
+  // same reasoning `Ledger`'s single money column applies to two columns
+  // instead of one.
+  amount: { minWidth: 90, textAlign: "right" },
+  balance: { minWidth: 100, textAlign: "right" },
+  total: { gap: 6, marginTop: 6 },
+});

package/src/section_heading.tsx

@@ -77,9 +77,21 @@ export interface SubsectionHeadingProps {
   style?: StyleProp<ViewStyle>;
 }
 
+/**
+ * The narrowest a heading's TITLE column may be before its row wraps and the
+ * trailing slot (an ADD verb, a meta, a badge) drops to the next line.
+ *
+ * Needed because RN-Web resolves `flex: 1` to `flex-basis: 0%` with
+ * `min-width: 0`: with no floor, a title beside a button that holds its
+ * intrinsic width is the half that gives way, so the HEADING breaks — one word
+ * per line — while the verb beside it sits untouched. That is backwards. The
+ * title names the section; the verb is the thing that can move.
+ */
+const HEADING_TITLE_MIN_WIDTH = 200;
+
 export function SubsectionHeading(props: SubsectionHeadingProps) {
   return (
-    <View style={[{ flexDirection: "row", alignItems: "center", gap: 10 }, props.style]}>
+    <View style={[{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 10 }, props.style]}>
       {props.children}
     </View>
   );
@@ -116,7 +128,7 @@ export function SubsectionHeadingTitle(props: SubsectionHeadingTitleProps) {
   // wrapper carries the `flex: 1` that lets a heading row push meta to its right
   // edge. Without the wrapper the description would land on the title's LINE.
   return (
-    <View style={{ flex: 1, gap: 2 }}>
+    <View style={{ flex: 1, minWidth: HEADING_TITLE_MIN_WIDTH, gap: 2 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
         <Text level={level} size="lg" weight="semibold">
           {children}
@@ -173,7 +185,7 @@ export function DialogSectionHeadingTitle(props: DialogSectionHeadingTitleProps)
   const { children, description, icon, level = 4, info } = props;
   const words = useLoticsLocale();
   return (
-    <View style={{ flex: 1, gap: 2 }}>
+    <View style={{ flex: 1, minWidth: HEADING_TITLE_MIN_WIDTH, gap: 2 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
         {icon ? <Icon name={icon} size={16} /> : null}
         <Text level={level} size="md" weight="semibold">
@@ -197,7 +209,7 @@ export interface SectionHeadingProps {
 
 export function SectionHeading(props: SectionHeadingProps) {
   return (
-    <View style={[{ flexDirection: "row", alignItems: "center", gap: 12 }, props.style]}>
+    <View style={[{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 12 }, props.style]}>
       {props.children}
     </View>
   );
@@ -229,7 +241,7 @@ export function SectionHeadingTitle(props: SectionHeadingTitleProps) {
   // render `info` appears or disappears.
   const words = useLoticsLocale();
   return (
-    <View style={{ flex: 1, gap: 2 }}>
+    <View style={{ flex: 1, minWidth: HEADING_TITLE_MIN_WIDTH, gap: 2 }}>
       <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
         {icon ? <Icon name={icon} size={20} /> : null}
         <Text level={level} weight={weight} size="xl">

package/src/select.tsx

@@ -8,8 +8,8 @@ import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { OptionList } from "./option_list";
 import type { PickerOption, PickerValue, PickerOnValueChange, PickerOnClose } from "./picker";
 
-export interface SelectProps<T extends string = string, MULTI extends boolean = false> {
-  options?: (PickerOption<T> | undefined | false)[];
+export interface SelectProps<T extends string = string, MULTI extends boolean = false, D = unknown> {
+  options?: (PickerOption<T, D> | undefined | false)[];
   placeholder?: string;
   /** Accessible name for the control. Required in spirit whenever there's no
    *  visible label beside it — the selected text describes the value, not the control. */
@@ -17,15 +17,15 @@ export interface SelectProps<T extends string = string, MULTI extends boolean =
   /** How each OPTION renders in the menu (a colour-dot badge, a member chip).
    *  Also the default for the trigger's selection display when `renderSelected`
    *  is omitted. */
-  renderOptionContent?: (option: PickerOption<T>) => ReactNode;
+  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
   /** How each SELECTED item renders in the anchor — a render FUNCTION, not a preset.
    *  Use `controls.remove` to detach it in place: render `<Chip onDismiss={remove}>`
    *  for a removable chip box, an `OptionBadge`, or any custom display. Omit it for
    *  a comma summary (single: the one value, `remove` clears it). The single seam
    *  for "how the selection looks" — there's no `display` mode. */
-  renderSelected?: (item: PickerOption<T>, controls: { remove: () => void }) => ReactNode;
+  renderSelected?: (item: PickerOption<T, D>, controls: { remove: () => void }) => ReactNode;
   /** A single-line subtitle under each option's label in the menu. */
-  getOptionDescription?: (option: PickerOption<T>) => string | undefined;
+  getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
   /** Show a search field in the menu to filter the options. */
   searchable?: boolean;
   /** Offer a "create" row when the query matches no option — picking it adds the
@@ -59,7 +59,7 @@ export interface SelectProps<T extends string = string, MULTI extends boolean =
  * select use the native `Picker`; to SEARCH a large/remote set with the input AS
  * the control (type-in-place, free text reflected in the field) use `Combobox`.
  */
-export function Select<T extends string, MULTI extends boolean = false>(props: SelectProps<T, MULTI>) {
+export function Select<T extends string, MULTI extends boolean = false, D = unknown>(props: SelectProps<T, MULTI, D>) {
   const {
     testID,
     options = [],
@@ -139,7 +139,7 @@ export function Select<T extends string, MULTI extends boolean = false>(props: S
           field/footer OUTSIDE it. The default body ScrollView would be a redundant
           second scroll that also clips the autofocused search field's outset ring. */}
       <PopoverContent disableBodyScroll>
-        <OptionList<T, MULTI>
+        <OptionList<T, MULTI, D>
           search={{ mode: searchable || allowCustom ? "internal" : "none" }}
           options={options}
           multi={multi}
@@ -163,18 +163,18 @@ export function Select<T extends string, MULTI extends boolean = false>(props: S
   );
 }
 
-function useSelectedItems<T extends string>(
+function useSelectedItems<T extends string, D = unknown>(
   multi: boolean,
   value: T | T[] | undefined | null,
-  options: (PickerOption<T> | undefined | false)[],
-): PickerOption<T>[] {
+  options: (PickerOption<T, D> | undefined | false)[],
+): PickerOption<T, D>[] {
   return useMemo(() => {
     const optionsMap = new Map(
-      options.filter((opt): opt is PickerOption<T> => !!opt).map((opt) => [opt.value, opt]),
+      options.filter((opt): opt is PickerOption<T, D> => !!opt).map((opt) => [opt.value, opt]),
     );
     // A value not in `options` (e.g. an `allowCustom` creation) still shows —
     // fall back to a {value, label} so it renders.
-    const resolve = (val: T): PickerOption<T> => optionsMap.get(val) ?? { value: val, label: val };
+    const resolve = (val: T): PickerOption<T, D> => optionsMap.get(val) ?? { value: val, label: val };
     if (multi) {
       const multiValue = Array.isArray(value) ? value : [];
       return multiValue.map(resolve);
@@ -187,7 +187,7 @@ function useSelectedItems<T extends string>(
   }, [multi, value, options]);
 }
 
-function SelectTrigger<T extends string>({
+function SelectTrigger<T extends string, D = unknown>({
   ref,
   testID,
   open,
@@ -206,10 +206,10 @@ function SelectTrigger<T extends string>({
   open: boolean;
   style?: StyleProp<ViewStyle>;
   onPress: () => void;
-  renderOptionContent?: (option: PickerOption<T>) => ReactNode;
-  renderSelected?: (item: PickerOption<T>, controls: { remove: () => void }) => ReactNode;
+  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
+  renderSelected?: (item: PickerOption<T, D>, controls: { remove: () => void }) => ReactNode;
   onRemove?: (value: T) => void;
-  selectedItems: PickerOption<T>[];
+  selectedItems: PickerOption<T, D>[];
   placeholder?: string;
   accessibilityLabel?: string;
   disabled?: boolean;

package/src/sequence.tsx

@@ -77,8 +77,11 @@ export interface SequenceItemProps {
   role?: string;
   /** The item's editors / content. */
   children: ReactNode;
-  /** Swap with the item above. Omit (or leave undefined on the first item) and
-   *  the control renders disabled, so the column never changes width. */
+  /** Swap with the item above. On an item that is editable at all, omitting
+   *  this (or leaving it undefined on the first item) renders the control
+   *  DISABLED rather than absent, so the column never changes width between
+   *  items. Omit all three and the item is not editable: the control column
+   *  goes away entirely — see the note on the component. */
   onMoveUp?: () => void;
   onMoveDown?: () => void;
   onRemove?: () => void;
@@ -98,6 +101,13 @@ export interface SequenceItemProps {
  * phone, and a list of three-to-six positions does not need the expressiveness.
  * They render even where they cannot act (first item, last item) so the row's
  * right edge never shifts between items.
+ *
+ * That steadiness is between items that CAN be edited. An item passing NO
+ * handler at all is not an edge case of editing, it is a read-only row, and it
+ * renders no control column: three permanently dead buttons on every row of a
+ * sequence nobody can reorder are dead affordances, which the kit's own
+ * reviewing gates count as a defect. A read-only `Sequence` is a legitimate and
+ * common shape — an ordered list of legs already run, a route as recorded.
  */
 export function SequenceItem(props: SequenceItemProps) {
   const { role, children, onMoveUp, onMoveDown, onRemove, accessibilityName, roleWidth = 74 } = props;
@@ -106,6 +116,10 @@ export function SequenceItem(props: SequenceItemProps) {
   const first = pos == null || pos.index === 0;
   const last = pos == null || pos.index === pos.count - 1;
   const named = (verb: string) => (accessibilityName ? `${verb} ${accessibilityName}` : verb);
+  // Any ONE handler makes the item editable and brings the whole cluster, so a
+  // row that can be removed but not reordered still holds the column steady
+  // against its neighbours. Only "no handler at all" drops it.
+  const editable = onMoveUp != null || onMoveDown != null || onRemove != null;
   return (
     <View style={styles.item}>
       {/* THE RAIL — a leading segment, the dot on the control line, then a
@@ -126,29 +140,31 @@ export function SequenceItem(props: SequenceItemProps) {
           </View>
         ) : null}
         <View style={styles.content}>{children}</View>
-        <View style={styles.controls}>
-          <IconButton
-            icon="chevron-up"
-            tooltip={labels.moveUp}
-            accessibilityLabel={named(labels.moveUp)}
-            disabled={first || onMoveUp == null}
-            onPress={() => onMoveUp?.()}
-          />
-          <IconButton
-            icon="chevron-down"
-            tooltip={labels.moveDown}
-            accessibilityLabel={named(labels.moveDown)}
-            disabled={last || onMoveDown == null}
-            onPress={() => onMoveDown?.()}
-          />
-          <IconButton
-            icon="x"
-            tooltip={labels.remove}
-            accessibilityLabel={named(labels.remove)}
-            disabled={onRemove == null}
-            onPress={() => onRemove?.()}
-          />
-        </View>
+        {editable ? (
+          <View style={styles.controls}>
+            <IconButton
+              icon="chevron-up"
+              tooltip={labels.moveUp}
+              accessibilityLabel={named(labels.moveUp)}
+              disabled={first || onMoveUp == null}
+              onPress={() => onMoveUp?.()}
+            />
+            <IconButton
+              icon="chevron-down"
+              tooltip={labels.moveDown}
+              accessibilityLabel={named(labels.moveDown)}
+              disabled={last || onMoveDown == null}
+              onPress={() => onMoveDown?.()}
+            />
+            <IconButton
+              icon="x"
+              tooltip={labels.remove}
+              accessibilityLabel={named(labels.remove)}
+              disabled={onRemove == null}
+              onPress={() => onRemove?.()}
+            />
+          </View>
+        ) : null}
       </View>
     </View>
   );

package/src/step_progress.tsx

@@ -3,6 +3,7 @@ import { colors } from "./colors";
 import { Text } from "./text";
 import { Eyebrow } from "./eyebrow";
 import { useTooltip } from "./tooltip";
+import { useLoticsLocale } from "./locale";
 
 export interface StepProgressProps {
   /** The stages: pass the NAMES (enables the built-in "In (4/7)" caption
@@ -50,6 +51,7 @@ export function StepProgress(props: StepProgressProps) {
   // much is done", the same claim the one filled button makes. Still a prop, so a
   // caller that means a specific hue (a status, a series) passes one.
   const { steps, current, color = colors.primary, title, label, captionTone = "default", captionBelow = false, height = 10, accessibilityLabel } = props;
+  const words = useLoticsLocale();
   const captionColor = captionTone === "danger" ? "danger" : "muted";
   const names = typeof steps === "number" ? null : steps;
   const count = Math.max(1, typeof steps === "number" ? steps : steps.length);
@@ -59,10 +61,10 @@ export function StepProgress(props: StepProgressProps) {
     label ??
     (names
       ? isComplete
-        ? `Complete (${count}/${count})`
+        ? words.stepProgress.complete(count)
         : safe >= 0
-          ? `${names[safe]} (${safe + 1}/${count})`
-          : `0/${count}`
+          ? words.stepProgress.stage(names[safe], safe + 1, count)
+          : words.stepProgress.none(count)
       : undefined);
 
   // `progressbar` IS right here — the segments are decoration over one quantity,
@@ -73,7 +75,7 @@ export function StepProgress(props: StepProgressProps) {
   const bar = (
     <View
       accessibilityRole="progressbar"
-      accessibilityLabel={accessibilityLabel ?? caption ?? `${Math.max(0, safe + 1)} of ${count}`}
+      accessibilityLabel={accessibilityLabel ?? caption ?? words.stepProgress.position(Math.max(0, safe + 1), count)}
       aria-valuenow={isComplete ? count : Math.max(0, safe + 1)}
       aria-valuemin={0}
       aria-valuemax={count}

package/src/stepper.tsx

@@ -23,8 +23,13 @@ import { NODE, STEP_HEAD_TEXT_LINE, STEP_MARKER_GAP, STEP_ROW_INSET, STEP_ROW_PA
 // A node's place in a sequence. `upcoming` = not reached (greyish); `current` =
 // where we are (ring + white centre, pulses when live); `done` = passed (filled);
 // `complete` = the terminal "finished" marker (filled + check); `warning` = an
-// issue at a reached step.
-export type StepStatus = "upcoming" | "current" | "done" | "warning" | "complete";
+// issue at a reached step; `fail` = a reached step whose OUTCOME is negative —
+// a verdict, not an issue still open. Distinct from `warning`: amber asks the
+// reader to look, red tells them the answer is already no (a QC reject, a
+// failed match) — collapsing the two into one amber "something's off" loses
+// the one bit that actually matters, whether the row is still actionable or
+// already decided.
+export type StepStatus = "upcoming" | "current" | "done" | "warning" | "fail" | "complete";
 export type StepOrientation = "horizontal" | "vertical";
 
 const reached = (s: StepStatus) => s !== "upcoming";
@@ -302,6 +307,14 @@ export function Step(props: StepProps) {
             {onToggle && mark === "box" ? (
               // SELECTION: the square, in the ring's own box so the column and the
               // spine keep their rhythm whichever mark a surface uses.
+              // `fail` deliberately reads as unchecked here, not done: neither
+              // mark below has a fail-shaped state, and forcing one to `done`
+              // would draw a rejected step in the same ink as a passed one —
+              // the one distinction a verdict exists to keep. A verdict is
+              // reported, not toggled, so a real caller never reaches this
+              // combination (`ChecklistItem` withholds `onToggle` once
+              // `verdict` is set); this stays correct for anyone driving
+              // `Step` directly.
               <View style={{ width: NODE, height: NODE, alignItems: "center", justifyContent: "center" }}>
                 <CheckboxInput
                   checked={status === "done" || status === "complete"}
@@ -376,6 +389,17 @@ export function Marker({ status, color, live }: { status: StepStatus; color: str
       </View>
     );
   }
+  if (status === "fail") {
+    // A decided negative: filled in the same solid-red the kit uses for danger
+    // everywhere else (deadline.ts's own tone→hue mapping), with a white X —
+    // the "done" disc's shape, wrong-answer color, so a scanning eye reads
+    // both as "reached and settled" and only the color says which way.
+    return (
+      <View style={[styles.disc, { backgroundColor: solid("red") }]}>
+        <Icon name="x" size={10} color={colors.white} />
+      </View>
+    );
+  }
   if (status === "current") {
     return (
       <View style={styles.discWrap}>

package/src/table_fit.ts

@@ -21,9 +21,17 @@ export interface TableFitColumn {
   /** 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. Default = the column's index (so an
-   *  unannotated register sheds from the right). The FIRST column is the row's
-   *  identity — it never drops. */
+   *  drop first, ties drop right-to-left. The FIRST column is the row's identity
+   *  — it never drops.
+   *
+   *  An unannotated column defaults to `columns.length + index`, which is above
+   *  every hand-written priority 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
+   *  with the unannotated column at index 1, and the right-to-left tie-break
+   *  then dropped yours — losing the amount column, the fact the register exists
+   *  for, on a screen that reviewed as correctly annotated. */
   priority?: number;
 }
 
@@ -59,10 +67,12 @@ export const ROW_HEIGHT = 72;
  */
 export const ROW_GUTTER = 0;
 const ROW_H_PADDING = ROW_GUTTER * 2;
-/** Fit-math width a flexible column needs to stay usable — below this the flex
- *  column is crushed to ellipsis soup, so it counts as this wide when deciding
- *  what fits. Layout still lets it grow (`flex`) or shrink (`minWidth: 0`). */
-const FLEX_MIN_WIDTH = 120;
+/** Width a flexible column needs to stay usable — below this it is crushed to
+ *  ellipsis soup. `Table` counts a flex column as this wide when deciding what
+ *  fits; `DataGrid`, which sheds nothing, uses it as the column's hard floor so
+ *  the squeeze overflows the grid instead of erasing its identity column.
+ *  Exported so the two cannot drift. */
+export const FLEX_MIN_WIDTH = 120;
 /** Fewer side-by-side columns than this stops being a register — stack instead. */
 const MIN_VISIBLE_COLUMNS = 2;
 
@@ -91,7 +101,7 @@ export function computeTableFit(
   };
 
   const allKeys = new Set(columns.map((c) => c.key));
-  const priorityOf = (c: TableFitColumn) => c.priority ?? columns.indexOf(c);
+  const priorityOf = (c: TableFitColumn) => c.priority ?? columns.length + columns.indexOf(c);
   // Column 0 never enters the drop order — it's the row's identity.
   const dropOrder = columns
     .slice(1)