@lotics/ui 44.7.0 → 44.8.0

package/src/inline_edit.tsx

@@ -259,6 +259,7 @@ function fieldSurface(o: { variant: InlineEditVariant; disabled?: boolean; activ
   return (hovered: boolean): StyleProp<ViewStyle>[] => [
     styles.view,
     (o.variant === "bare" || o.disabled) && styles.viewBare,
+    o.disabled === true && styles.viewInert,
     // Keyed on the VARIANT alone, never on `disabled` — a disabled `framed`
     // field shares the line above (it must not promise a press) but stays in its
     // column with the enabled fields beside it. Bleeding that one would pull a
@@ -396,9 +397,9 @@ interface InlineEditViewProps {
 /**
  * The view-mode box of an inline-editable field: the value as plain text on the
  * shared control surface — white with a 1px border when `framed`, frameless
- * until hover when `bare`. It hovers via its BORDER, never a grey wash, and the
- * cursor stays the default arrow: the surface itself is the affordance, and a
- * pointer would read as a button. The border is present at every state (merely
+ * until hover when `bare`. It hovers via its BORDER, never a grey wash, and it
+ * takes the pointer cursor every other control takes. The border is present at
+ * every state (merely
  * transparent when `bare` rests), so swapping to an input, or floating a
  * dropdown above it, never shifts the layout. Used by `InlineEditFrame`, and as
  * the overlay trigger for the select/date inline editors (it forwards ref +
@@ -459,7 +460,7 @@ export function InlineEditView(props: InlineEditViewProps) {
           onFocus={onFocus}
           accessibilityRole="button"
           accessibilityLabel={accessibilityLabel}
-          style={[styles.viewInner, multilineBox(numberOfLines)]}
+          style={[styles.viewInner, disabled === true && styles.viewInert, multilineBox(numberOfLines)]}
         >
           {content}
         </Pressable>
@@ -678,14 +679,33 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
-    // An inline editor is an INPUT, not a button — keep the default arrow
-    // cursor (the chip + hover-border carry the affordance; a pointer reads
-    // as a button press). Overrides the Pressable's pointer default.
-    cursor: "auto",
+    // THE POINTER, like every other control in the kit.
+    //
+    // This box used to force the arrow back, on the reasoning that an inline
+    // editor is an input rather than a button and the chip plus hover-border
+    // already carried the affordance. Both halves fail. `bare` HAS no chip —
+    // nothing at rest by design — so the whole affordance was a 1px edge that
+    // appears on hover, which is invisible to touch and to anyone who never
+    // happens to sweep the value; a member's actual question was "how am I
+    // supposed to edit this?". And the arrow does not read as "input", it
+    // reads as INERT: it is what the page's own prose gets, so the one thing
+    // on the row that is theirs to change looked like the one thing that
+    // wasn't.
+    //
+    // The I-beam is not the alternative. It promises a caret and a selection,
+    // and `userSelect: "none"` below deliberately denies both so a drag edits
+    // instead of selecting — a false promise in the same family as the arrow.
+    // What is true of every variant is that pressing DOES something, which is
+    // exactly what the pointer says.
+    cursor: "pointer",
   },
   // Nothing at rest — the frame arrives on hover. Also how a DISABLED field
   // rests, whatever its variant: an inert value must not promise a press.
   viewBare: { backgroundColor: "transparent", borderColor: "transparent" },
+  // ...and the cursor is half of that promise, so it goes back to the arrow
+  // for a disabled field only. `viewBare` cannot carry it: a `bare` field is
+  // enabled and wears the same style.
+  viewInert: { cursor: "auto" },
   // A bare field at rest looks like TEXT, so it aligns like text: its glyphs sit
   // on the column, not its invisible box. The frame's 8px inset is real padding
   // the eye cannot see at rest, and it put every bare value 8px right of the
@@ -716,7 +736,7 @@ const styles = StyleSheet.create({
   // The value region inside a verb-hosting resting field: carries the row layout
   // the surface would otherwise own. `userSelect` here rather than via the
   // `FocusRingPressable` prop — a drag across a value must edit, not select text.
-  viewInner: { flex: 1, minWidth: 0, alignSelf: "stretch", flexDirection: "row", alignItems: "center", gap: 6, ...({ userSelect: "none", cursor: "auto" } as ViewStyle) },
+  viewInner: { flex: 1, minWidth: 0, alignSelf: "stretch", flexDirection: "row", alignItems: "center", gap: 6, ...({ userSelect: "none" } as ViewStyle) },
   // Open (popover showing): the resting surface plus the 2px active ring — the
   // one thing that separates open from at-rest, and identical to a focused input.
   viewActive: {

package/src/inline_select.tsx

@@ -26,6 +26,11 @@ interface InlineSelectBaseProps<T extends string, D = unknown> {
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
    *  Omit for a plain label list — both render through the same `OptionList`. */
   renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
+  /** A second line under an option's label in the dropdown — a driver's phone
+   *  under their name, a code under a description. `OptionList` has always
+   *  rendered this two-line `MenuListItem`; this only forwards it, which is why
+   *  callers were hand-rebuilding the anatomy through `renderOptionContent`. */
+  getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
   /** Render ONE selected option as its resting chip — single: the value; multi:
    *  each tag. Falls back to `renderOptionContent`, then the plain label (single) /
    *  a zinc `Badge` (multi). The one seam for "how the selection looks". */
@@ -135,7 +140,7 @@ function InlineSelectShell(props: {
 }
 
 export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
+  const { options, renderOptionContent, getOptionDescription, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, customOptionPlacement, variant, actions, autoFocus = false } = props;
   const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(autoFocus);
   const [saving, setSaving] = useState(false);
@@ -191,6 +196,7 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
       >
         <OptionList<T, true, D>
           multi
+          getOptionDescription={getOptionDescription}
           search={{ mode: searchMode }}
           options={options}
           value={draft}
@@ -237,6 +243,7 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
       error={error}
     >
       <OptionList<T, false, D>
+        getOptionDescription={getOptionDescription}
         search={{ mode: searchMode }}
         options={options}
         value={value}

package/src/inline_text_input.tsx

@@ -184,19 +184,18 @@ export function InlineTextInput(props: InlineTextInputProps) {
         // Everything the resting VIEW used to draw, the input now draws, because
         // there is no resting view left to draw it. Both of these were its job:
         //
-        // `bare` — the transparent resting edge. Hover and the focus ring are
-        // applied after `style` inside `TextInputField`, so it still darkens on
-        // hover and still rings on focus, from the element that now owns it.
+        // `variant` — the resting frame, or none. It goes over as the PROP, not
+        // as a `style` override: the two are not equivalent, because `style` is
+        // applied after the hover rule and so erased the hover edge that is a
+        // bare field's only affordance. The field owns its own variants.
         //
         // `struck` — a completed item's value, line-through and muted. This was
         // applied in `fieldContent`, which only ever runs in the resting view, so
         // moving to one element silently dropped it: a done task on the board kept
         // its title upright. Anything else the view used to render has to move the
         // same way, or it goes the same way — quietly.
-        style={[
-          variant === "bare" ? { borderColor: "transparent", backgroundColor: "transparent" } : null,
-          struck ? { textDecorationLine: "line-through" as const, color: colors.zinc[500] } : null,
-        ]}
+        variant={variant}
+        style={struck ? { textDecorationLine: "line-through" as const, color: colors.zinc[500] } : null}
         // With verbs on the field, the FRAME owns the surface and the ring.
         seamless={actions != null}
       />

package/src/locale.tsx

@@ -74,11 +74,20 @@ export interface LoticsLocale {
   clarify: { otherPlaceholder: string; back: string; next: string; cancel: string; submit: string };
   /** `Ledger`: the screen-reader name of a peekable row. */
   ledger: { rowDetails: (label: string) => string };
-  /** `SectionHeadingTitle`: the info-popover trigger's screen-reader name. */
   /** `Step`/`ChecklistItem`'s toggleable MARKER, when the caller names no
    *  label of its own. A pipeline stage always passes its title, so this is the
    *  bare-`Step` fallback. */
   stepper: { complete: string; progress: string };
+  /** `StepProgress`: the built-in caption over NAMED stages, and the
+   *  screen-reader position when there is no caption to borrow. The counts are
+   *  interpolated by the pack rather than concatenated at the call site, because
+   *  where the number sits in the sentence is a property of the language. */
+  stepProgress: {
+    complete: (total: number) => string;
+    stage: (name: string, index: number, total: number) => string;
+    none: (total: number) => string;
+    position: (index: number, total: number) => string;
+  };
   /** `ChecklistGroup`'s disclosure — the small pressable text that shows or hides
    *  a phase's rows. The kit owns the wording so one app does not say "Show" while
    *  the next says "Expand" for the same gesture. */
@@ -89,6 +98,8 @@ export interface LoticsLocale {
    *  because word order is not shared: English puts the verb first, and a
    *  language that does not would otherwise be stuck with a prefix. */
   textDisclosure: { show: (label: string) => string; hide: (label: string) => string };
+  /** The info-popover trigger's screen-reader name on a heading — every level of
+   *  `SectionHeading*`, and `CardHeaderTitle`, which names the same altitude. */
   sectionHeading: { info: string };
   /** `ErrorState`'s retry button. The kit owns the wording so "try again" is
    *  phrased identically everywhere instead of hand-written per app. */
@@ -293,6 +304,12 @@ export const en: LoticsLocale = {
   clarify: { otherPlaceholder: "Or type your own answer…", back: "Back", next: "Next", cancel: "Cancel", submit: "Submit" },
   ledger: { rowDetails: (label) => `${label} details` },
   stepper: { complete: "Complete step", progress: "Progress" },
+  stepProgress: {
+    complete: (total) => `Complete (${total}/${total})`,
+    stage: (name, index, total) => `${name} (${index}/${total})`,
+    none: (total) => `0/${total}`,
+    position: (index, total) => `${index} of ${total}`,
+  },
   checklist: { expand: "Show", collapse: "Hide" },
   textDisclosure: { show: (label) => `Show ${label}`, hide: (label) => `Hide ${label}` },
   sectionHeading: { info: "About this data" },
@@ -472,6 +489,12 @@ export const vi: LoticsLocale = {
   clarify: { otherPlaceholder: "Hoặc nhập câu trả lời khác…", back: "Quay lại", next: "Tiếp", cancel: "Hủy", submit: "Gửi" },
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
   stepper: { complete: "Hoàn thành bước", progress: "Tiến trình" },
+  stepProgress: {
+    complete: (total) => `Hoàn tất (${total}/${total})`,
+    stage: (name, index, total) => `${name} (${index}/${total})`,
+    none: (total) => `0/${total}`,
+    position: (index, total) => `${index} trên ${total}`,
+  },
   checklist: { expand: "Mở", collapse: "Thu gọn" },
   textDisclosure: { show: (label) => `Xem ${label}`, hide: (label) => `Ẩn ${label}` },
   sectionHeading: { info: "Giải thích dữ liệu" },

package/src/number_input.tsx

@@ -18,6 +18,12 @@ export interface NumberInputProps {
   disabled?: boolean;
   testID?: string;
   accessibilityLabel?: string;
+  /** Hint text shown while the field is empty — a unit, a shape, an example
+   *  ("0,00", "kg"). `InlineNumberInput` has always had one; without it here the
+   *  only hint slot left on a `FormField` is `description`, which renders
+   *  BETWEEN label and input and so drops this field's input a line below its
+   *  neighbour's in a two-column form grid. */
+  placeholder?: string;
   /** The HOST paints the surface — drop this input's own border, fill, focus ring
    *  AND horizontal padding, so the page draws one box and the text lands on the
    *  host's inset rather than 8px further in. Set by an inline editor whose field
@@ -37,7 +43,7 @@ export interface NumberInputProps {
  * number in place on a record use `InlineNumberInput`.
  */
 export function NumberInput(props: NumberInputProps) {
-  const { value, onValueChange, min, max, disabled, onBlur, onKeyDown, autoFocus, testID, accessibilityLabel, seamless } = props;
+  const { value, onValueChange, min, max, disabled, onBlur, onKeyDown, autoFocus, testID, accessibilityLabel, placeholder, seamless } = props;
   const binding = useFormField();
   const describedBy = [binding?.descriptionId, binding?.warningId, binding?.errorId].filter(Boolean).join(" ") || undefined;
   const { focusVisible, focusProps } = useFocusRing({ always: true });
@@ -52,6 +58,7 @@ export function NumberInput(props: NumberInputProps) {
       aria-describedby={describedBy}
       aria-invalid={binding?.invalid || undefined}
       value={value ?? ""}
+      placeholder={placeholder}
       onChange={(e) =>
         e.target.value !== "" ? onValueChange(Number(e.target.value)) : onValueChange(null)
       }

package/src/reference_field.tsx

@@ -423,10 +423,17 @@ export function ReferenceField(props: ReferenceFieldProps) {
                   accessibilityLabel={`${t.change} — ${name}`}
                   onPress={() => { setPeekOpen(false); onChange(); }}
                 />
-                {/* No fill — the least-reached verb here, and the one whose
-                    result the reader is least likely to want by accident. */}
+                {/* Same resting surface as `change` beside it. It had NO
+                    color — which renders transparent, borderless and
+                    undecorated, i.e. the hover-only affordance composition.md
+                    bans: invisible to keyboard and touch, and a singleton
+                    no-ground among grounded siblings, which a reader parses
+                    before they read any label. Being the least-reached verb is
+                    said by PLACEMENT — second in the left group, far from the
+                    primary — not by drawing nothing. */}
                 <Button
                   title={t.clear}
+                  color="secondary"
                   accessibilityLabel={`${t.clear} — ${name}`}
                   onPress={() => { setPeekOpen(false); onClear(); }}
                 />

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/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)

package/src/tabs.tsx

@@ -12,6 +12,19 @@ export interface TabOption<T extends string> {
   /** A small status dot before the label — set only when the tab's area needs
    *  attention (a blocker / missing item). Omit for the resting state. */
   status?: ColorName;
+  /** How many rows the tab's band holds, shown after the label.
+   *
+   *  A PROP, never a count formatted into `label`. A tab band partitions a
+   *  register exactly as `TableGroup` does, and that component states its size
+   *  the same way for the same reason: a hand-built `"Trên tàu (4)"` is a second
+   *  copy of a number the screen already computes, and it is the copy that goes
+   *  stale. Pressing the tab is the filter, so the count is also the reason to
+   *  press it.
+   *
+   *  Yours to pass because it is rarely the child count — a paged or filtered
+   *  band counts what matched, not what rendered. Omit when every band is
+   *  always whole. */
+  count?: number;
 }
 
 interface TabsProps<T extends string> {
@@ -113,6 +126,12 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
       >
         {option.label}
       </Text>
+      {option.count != null ? (
+        <Text color="zinc-500" tabular userSelect="none">
+          {option.count}
+        </Text>
+      ) : null}
+
     </View>
   );