@lotics/ui 46.3.0 → 46.8.0

package/src/inline_edit.tsx

@@ -207,6 +207,12 @@ interface InlineEditFrameProps {
    *  exists to avoid is not perceptible. `InlineEditView` already renders both;
    *  this only stops the frame from narrowing what it forwards. */
   display: string | ReactNode;
+  /** Which edge the RESTING value sits on. Money in a column takes "right", so
+   *  a typed figure shares its edge with the derived one beside it; anything
+   *  else keeps the default. reviewing.md probe 6: a sound money column lands
+   *  on TWO right edges (the typed one, the computed one) — a broken one lands
+   *  on as many as it has rows, and the reader can no longer add it up by eye. */
+  align?: "left" | "right";
   placeholder?: string;
   /** Enter edit mode (the view is pressed). */
   onBegin: () => void;
@@ -256,20 +262,26 @@ interface InlineEditFrameProps {
  */
 function fieldContent(o: {
   display: string | ReactNode;
+  /** Which edge the RESTING value sits on. Money in a column takes "right", so
+   *  a typed figure shares its edge with the derived one beside it; anything
+   *  else keeps the default. reviewing.md probe 6: a sound money column lands
+   *  on TWO right edges (the typed one, the computed one) — a broken one lands
+   *  on as many as it has rows, and the reader can no longer add it up by eye. */
+  align?: "left" | "right";
   placeholder?: string | ReactNode;
   struck?: boolean;
   tone?: TextColor;
   trailing?: ReactNode;
   numberOfLines?: number;
 }) {
-  const { display, placeholder, struck, tone, trailing, numberOfLines } = o;
+  const { display, placeholder, struck, tone, trailing, numberOfLines, align } = o;
   const isEmptyString = typeof display === "string" && display === "";
   return (
     <>
       {isEmptyString && placeholder != null && typeof placeholder !== "string" ? (
         <View style={styles.viewNode}>{placeholder}</View>
       ) : typeof display === "string" ? (
-        <Text numberOfLines={numberOfLines ?? 1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null, tone && display && !struck ? { color: getTextColor(tone) } : null]}>
+        <Text numberOfLines={numberOfLines ?? 1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null, tone && display && !struck ? { color: getTextColor(tone) } : null, align === "right" ? styles.viewRight : null]}>
           {display || (typeof placeholder === "string" ? placeholder : "") || "—"}
         </Text>
       ) : (
@@ -293,10 +305,10 @@ function fieldContent(o: {
  * ARRIVE (loud on its own), a `framed` field already has one, so it takes the
  * tint as well.
  */
-function fieldSurface(o: { variant: InlineEditVariant; disabled?: boolean; active?: boolean; editing?: boolean }) {
+function fieldSurface(o: { variant: InlineEditVariant; disabled?: boolean; inert?: boolean; active?: boolean; editing?: boolean }) {
   return (hovered: boolean): StyleProp<ViewStyle>[] => [
     styles.view,
-    (o.variant === "bare" || o.disabled) && styles.viewBare,
+    (o.variant === "bare" || o.disabled || o.inert) && 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
@@ -305,7 +317,7 @@ function fieldSurface(o: { variant: InlineEditVariant; disabled?: boolean; activ
     o.variant === "bare" && styles.viewBareBleed,
     CONTROL_TRANSITION,
     o.active && styles.viewActive,
-    !o.active && hovered && !o.disabled && (o.variant === "bare" ? styles.viewHovered : styles.viewHoveredFramed),
+    !o.active && hovered && !o.disabled && !o.inert && (o.variant === "bare" ? styles.viewHovered : styles.viewHoveredFramed),
     // While an input is mounted inside, it brings its own height — the surface
     // must not add its resting vertical padding on top.
     o.editing && styles.editHost,
@@ -373,9 +385,30 @@ interface InlineEditViewProps {
    *  rendered as-is — e.g. a `MemberChip` / `OptionBadge` for a rich resting
    *  value. A node takes the flex slot; the trailing adornment still right-aligns. */
   display: string | ReactNode;
+  /** Which edge the RESTING value sits on. Money in a column takes "right", so
+   *  a typed figure shares its edge with the derived one beside it; anything
+   *  else keeps the default. reviewing.md probe 6: a sound money column lands
+   *  on TWO right edges (the typed one, the computed one) — a broken one lands
+   *  on as many as it has rows, and the reader can no longer add it up by eye. */
+  align?: "left" | "right";
   /** Empty-state content. A string reads as muted placeholder text; a NODE (a dashed
    *  avatar "add" ghost, a placeholder chip) renders as-is in the value slot. */
   placeholder?: string | ReactNode;
+  /**
+   * Wear the DISABLED surface — flat, borderless, no hover, no trailing
+   * adornment — while staying pressable.
+   *
+   * The state `disabled` cannot express: a value nothing can CHANGE but anything
+   * can still OPEN. A reference on a closed record is the case — its link is
+   * fixed and its facts frozen, yet reading who it points at is ordinary. Marked
+   * `disabled` it would refuse the press that shows them; left framed it would
+   * be the one field on a read-only surface still advertising an edit.
+   *
+   * Like `disabled` and unlike `variant="bare"`, it does NOT take the −8px
+   * bleed: the field stays in the column its editable neighbours sit in, which
+   * is the whole reason a read-only surface reads as level.
+   */
+  inert?: boolean;
   onPress?: () => void;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -402,7 +435,15 @@ interface InlineEditViewProps {
   anchorRef?: Ref<View>;
   /** Right-aligned adornment — e.g. a chevron for a select, a spinner while saving.
    *  DECORATION only: it renders inside the press target, so it may never hold a
-   *  control (a button must not contain a button). A control goes in `actions`. */
+   *  control (a button must not contain a button). A control goes in `actions`.
+   *
+   *  **Suppressed while `disabled`.** The adornment is the field's PROMISE that
+   *  something opens — a chevron says "a list is behind this", a calendar glyph
+   *  says "a picker is". A disabled field keeps neither promise, and it has
+   *  already given up the frame and the hover wash, so the glyph is then the only
+   *  mark left saying "control" — which makes a read-only value read as an
+   *  editable one that ignores the click. Dropping it is what leaves plain text,
+   *  which is what a value you cannot change is. */
   trailing?: ReactNode;
   /** Verbs that live ON the field's surface — an `InlineButton` Copy, Open… Use
    *  this when the act is ABOUT THE VALUE, so it travels with what it acts on
@@ -480,7 +521,7 @@ function multilineBox(numberOfLines: number | undefined): ViewStyle | null {
 }
 
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef, numberOfLines, role = "button" } = props;
+  const { display, align, placeholder, onPress, disabled, inert, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef, numberOfLines, role = "button" } = props;
   // A combobox MUST expose its expanded state; a button must not. Deriving it from
   // the `active` the popover callers already pass keeps the two from drifting apart
   // — there is no way to take the role without the announcement.
@@ -493,8 +534,8 @@ export function InlineEditView(props: InlineEditViewProps) {
         onPress();
       }
     : undefined;
-  const content = fieldContent({ display, placeholder, struck, tone, trailing, numberOfLines });
-  const surface = fieldSurface({ variant, disabled, active });
+  const content = fieldContent({ display, align, placeholder, struck, tone, trailing: disabled || inert ? undefined : trailing, numberOfLines });
+  const surface = fieldSurface({ variant, disabled, inert, active });
 
   // WITH VERBS: the shell owns the surface, the pressable is just the value
   // region inside it. `ref` stays on the PRESSABLE — it means "the focusable
@@ -557,6 +598,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     editing,
     editOpen,
     display,
+    align,
     placeholder,
     onBegin,
     children,
@@ -604,6 +646,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
       <InlineEditView
         ref={viewRef}
         variant={variant}
+        align={align}
         display={display}
         placeholder={placeholder}
         onPress={onBegin}
@@ -662,7 +705,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
                   accessibilityLabel={accessibilityLabel}
                   style={styles.viewInner}
                 >
-                  {fieldContent({ display, placeholder, struck, trailing: affordance, numberOfLines })}
+                  {fieldContent({ display, align, placeholder, struck, trailing: disabled ? undefined : affordance, numberOfLines })}
                 </Pressable>
               )}
             </InlineFieldShell>
@@ -814,6 +857,7 @@ const styles = StyleSheet.create({
     borderColor: HOVER_BORDER,
   },
   placeholder: { color: colors.zinc[400] },
+  viewRight: { textAlign: "right" as const },
   struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
   // `textAlign` is not cosmetic here: the resting box is a button-role Pressable,
   // so the UA stylesheet centres every string inside it. A STRING display never

package/src/inline_number_input.tsx

@@ -20,6 +20,9 @@ export interface InlineNumberInputProps {
    *  BOTH modes so the field never changes width on focus; pass it
    *  UNCONDITIONALLY and `disabled` the verb when it has nothing to act on. */
   actions?: ReactNode;
+  /** Which edge the RESTING number sits on. A money column takes "right" so the
+   *  typed figure shares its edge with the derived one beside it. */
+  align?: "left" | "right";
   accessibilityLabel?: string;
 }
 
@@ -29,7 +32,7 @@ export interface InlineNumberInputProps {
  * the bare numeric field at the same height, so the form never reflows.
  */
 export function InlineNumberInput(props: InlineNumberInputProps) {
-  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel, variant, actions } = props;
+  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel, variant, actions, align } = props;
   const edit = useInlineEdit<number | null>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -52,6 +55,7 @@ export function InlineNumberInput(props: InlineNumberInputProps) {
   return (
     <InlineEditFrame
       variant={variant}
+      align={align}
       actions={actions}
       editing={edit.editing}
       display={display}

package/src/inline_text_input.tsx

@@ -210,7 +210,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
         // 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.
-        variant={variant}
+        variant={disabled ? "bare" : variant}
         style={
           struck
             ? { textDecorationLine: "line-through" as const, color: colors.zinc[500] }

package/src/locale.tsx

@@ -72,6 +72,9 @@ export interface LoticsLocale {
   inline: { saveError: string; save: string; cancel: string };
   /** `ChoiceList` custom-answer placeholder + `ClarifyWizard` navigation chrome. */
   clarify: { otherPlaceholder: string; back: string; next: string; cancel: string; submit: string };
+  /** `ChargeLines`: the screen-reader names of a charge line's three money
+   *  fields, each qualified by the charge it belongs to. */
+  chargeLines: { quantity: (label: string) => string; unitPrice: (label: string) => string; amount: (label: string) => string };
   /** `Ledger`: the screen-reader name of a peekable row. */
   ledger: { rowDetails: (label: string) => string };
   /** `RunningLedger`: the closing line's label ("Số dư hiện tại", "Tồn kho
@@ -111,6 +114,14 @@ export interface LoticsLocale {
   chip: { remove: string };
   /** `SequenceItem`: the reorder + drop controls on one position of a `Sequence`. */
   sequence: { moveUp: string; moveDown: string; remove: string };
+  /** `Board` / `BoardCard`: the card's keyboard door, its move control, the
+   *  destination menu's items, and a column holding nothing. */
+  board: {
+    open: (title: string) => string;
+    move: (title: string) => string;
+    moveTo: (column: string) => string;
+    empty: string;
+  };
   /** `TrendFooter`: the direction words of the trend sentence. */
   trendFooter: { up: string; down: string };
   /** The countdown vocabulary — see `deadline.ts`. 0 and 1 get their own words
@@ -323,6 +334,7 @@ export const en: LoticsLocale = {
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
   inline: { saveError: "Couldn't save. Try again.", save: "Save", cancel: "Cancel" },
   clarify: { otherPlaceholder: "Or type your own answer…", back: "Back", next: "Next", cancel: "Cancel", submit: "Submit" },
+  chargeLines: { quantity: (label) => `Quantity for ${label}`, unitPrice: (label) => `Unit price for ${label}`, amount: (label) => `Amount for ${label}` },
   ledger: { rowDetails: (label) => `${label} details` },
   runningLedger: { currentBalance: "Current balance" },
   stepper: { complete: "Complete step", progress: "Progress" },
@@ -338,6 +350,12 @@ export const en: LoticsLocale = {
   errorState: { retry: "Try again" },
   chip: { remove: "Remove" },
   sequence: { moveUp: "Move up", moveDown: "Move down", remove: "Remove" },
+  board: {
+    open: (title) => `Open ${title}`,
+    move: (title) => `Move ${title}`,
+    moveTo: (column) => `Move to ${column}`,
+    empty: "Nothing here",
+  },
   trendFooter: { up: "Up", down: "Down" },
   deadline: {
     overdue: (days) => `${days} ${days === 1 ? "day" : "days"} overdue`,
@@ -513,7 +531,7 @@ export const vi: LoticsLocale = {
     ascending: " (tăng dần)",
     descending: " (giảm dần)",
   },
-  referenceField: { open: "Mở", change: "Đổi", clear: "Bỏ chọn", edit: "Sửa", save: "Lưu", saving: "Đang lưu…", cancel: "Huỷ" },
+  referenceField: { open: "Mở", change: "Đổi", clear: "Bỏ chọn", edit: "Sửa", save: "Lưu", saving: "Đang lưu…", cancel: "Hủy" },
   optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…", someSelected: "một số đã chọn" },
   picker: { emptyOption: "Không có" },
   datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", chooseTime: "Chọn giờ", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
@@ -525,6 +543,7 @@ export const vi: LoticsLocale = {
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
   inline: { saveError: "Không lưu được. Thử lại.", save: "Lưu", cancel: "Hủy" },
   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" },
+  chargeLines: { quantity: (label) => `Số lượng ${label}`, unitPrice: (label) => `Đơn giá ${label}`, amount: (label) => `Số tiền ${label}` },
   ledger: { rowDetails: (label) => `Chi tiết ${label}` },
   runningLedger: { currentBalance: "Số dư hiện tại" },
   stepper: { complete: "Hoàn thành bước", progress: "Tiến trình" },
@@ -540,6 +559,12 @@ export const vi: LoticsLocale = {
   errorState: { retry: "Thử lại" },
   chip: { remove: "Xóa" },
   sequence: { moveUp: "Lên trên", moveDown: "Xuống dưới", remove: "Xóa" },
+  board: {
+    open: (title) => `Mở ${title}`,
+    move: (title) => `Chuyển ${title}`,
+    moveTo: (column) => `Chuyển sang ${column}`,
+    empty: "Chưa có gì",
+  },
   trendFooter: { up: "Tăng", down: "Giảm" },
   deadline: {
     overdue: (days) => `Quá hạn ${days} ngày`,

package/src/matrix.tsx

@@ -22,7 +22,6 @@ interface MatrixContextValue {
   heatBase: string;
   formatValue: (n: number) => string;
   rowLabelWidth: number;
-  totalColWidth: number;
 }
 
 /** Gap between a matrix's columns. Exported because a caller sizing its own
@@ -110,7 +109,6 @@ export function Matrix(props: MatrixProps) {
     heatBase: colors[heatColor][600],
     formatValue,
     rowLabelWidth,
-    totalColWidth: 64,
   };
 
   return (
@@ -128,7 +126,7 @@ export interface MatrixHeaderProps {
 }
 
 function MatrixHeader({ corner, totalLabel }: MatrixHeaderProps) {
-  const { cols, rowLabelWidth, totalColWidth, hasTotals } = useMatrix();
+  const { cols, rowLabelWidth, hasTotals } = useMatrix();
   const locale = useLoticsLocale();
   const resolvedTotalLabel = totalLabel ?? locale.matrix.total;
   return (
@@ -148,7 +146,7 @@ function MatrixHeader({ corner, totalLabel }: MatrixHeaderProps) {
         </Text>
       ))}
       {hasTotals ? (
-        <Text size="sm" color="muted" weight="medium" align="right" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
+        <Text size="sm" color="muted" weight="medium" align="right" numberOfLines={1} style={styles.totalCol}>
           {resolvedTotalLabel}
         </Text>
       ) : null}
@@ -163,7 +161,7 @@ export interface MatrixGridProps {
 
 function MatrixGrid({ display = "both" }: MatrixGridProps) {
   const ctx = useMatrix();
-  const { rows, cols, value, hasTotals, rowTotals, formatValue, rowLabelWidth, totalColWidth } = ctx;
+  const { rows, cols, value, hasTotals, rowTotals, formatValue, rowLabelWidth } = ctx;
   return (
     <View style={styles.grid}>
       {rows.map((r) => (
@@ -175,7 +173,7 @@ function MatrixGrid({ display = "both" }: MatrixGridProps) {
             <MatrixCell key={c.key} ctx={ctx} display={display} row={r} col={c} value={value(r.key, c.key)} />
           ))}
           {hasTotals ? (
-            <Text size="sm" weight="semibold" tabular align="right" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
+            <Text size="sm" weight="semibold" tabular align="right" numberOfLines={1} style={styles.totalCol}>
               {formatValue(rowTotals.get(r.key) ?? 0)}
             </Text>
           ) : null}
@@ -251,7 +249,7 @@ export interface MatrixTotalsProps {
 }
 
 function MatrixTotals({ label }: MatrixTotalsProps) {
-  const { cols, colTotals, grandTotal, formatValue, rowLabelWidth, totalColWidth } = useMatrix();
+  const { cols, colTotals, grandTotal, formatValue, rowLabelWidth } = useMatrix();
   const locale = useLoticsLocale();
   return (
     <View style={styles.totalsRow}>
@@ -263,7 +261,7 @@ function MatrixTotals({ label }: MatrixTotalsProps) {
           {formatValue(colTotals.get(c.key) ?? 0)}
         </Text>
       ))}
-      <Text size="sm" weight="semibold" tabular align="right" numberOfLines={1} style={[styles.totalCol, { width: totalColWidth }]}>
+      <Text size="sm" weight="semibold" tabular align="right" numberOfLines={1} style={styles.totalCol}>
         {formatValue(grandTotal)}
       </Text>
     </View>
@@ -344,6 +342,23 @@ const styles = StyleSheet.create({
     paddingRight: 2,
   },
   totalCol: {
+    // SIZED LIKE A DATA COLUMN, not to a fixed number. It was `width: 64`, and a
+    // total is by construction the LONGEST figure in its row — so the one number
+    // the pivot exists to state was the one guaranteed to hit the clamp first. In
+    // VND it does: `formatMoney(n, {compact:true})` gives "1,51 tỷ ₫" for a grand
+    // total whose row cells read "231 tr ₫", and at 64px the grand total rendered
+    // "1,51 t…" while every cell above it fit. Nothing in the type system or a
+    // snapshot sees that — the string is whole in the DOM — so it ships.
+    //
+    // A per-glyph width estimate would be the wrong repair (a font decides glyph
+    // widths, so the arithmetic is right only at the size it was measured at).
+    // The structural answer is that a total is the same KIND of figure as a cell
+    // at the same type size, so it takes the same sizing law: one flex share of
+    // the leftover, floored. The floor is the old fixed width, so a matrix with
+    // many columns in a narrow frame never gets a total column narrower than it
+    // used to have.
+    flex: 1,
+    minWidth: 64,
     paddingLeft: 4,
   },
   totalsRow: {

package/src/reference_field.tsx

@@ -113,15 +113,15 @@ export interface ReferenceFieldProps {
   onOpen?: () => void;
   openLabel?: string;
   /**
-   * Point this field at a DIFFERENT record. REQUIRED.
+   * Point this field at a DIFFERENT record.
    *
    * Unsets the reference so the call site's picker returns, and the caller
    * should hand that picker focus: the press said "wrong one", so the next move
    * is choosing the right one and the correction should cost one gesture.
    */
-  onChange: () => void;
+  onChange?: () => void;
   /**
-   * Leave the reference EMPTY — the plain detach. REQUIRED.
+   * Leave the reference EMPTY — the plain detach.
    *
    * The SAME write as `onChange`; they differ only in FOLLOW-THROUGH, and
    * nothing focuses after this one — auto-opening a picker would argue with the
@@ -131,14 +131,21 @@ export interface ReferenceFieldProps {
    * either steals the caret from someone who wanted an empty field or sends
    * someone who wanted a swap hunting for the input.
    *
-   * BOTH are required, including on a reference the record cannot do without.
-   * Hiding Clear there enforces nothing — Change, then decline to pick, lands on
-   * the same empty state — so it only removes the direct route to a place the
-   * reader can already reach, and makes the footer's shape vary for no gain.
-   * Whether empty is VALID is the row's business (its `warning`, its
-   * validation), never the peek's.
+   * They come as a PAIR — both, or neither. Supplying one alone enforces
+   * nothing: Change, then decline to pick, lands on the same empty state Clear
+   * reaches, so hiding Clear only removes the direct route to a place the reader
+   * can already get to, and makes the footer's shape vary for no gain. Whether
+   * empty is VALID is the row's business (its `warning`, its validation), never
+   * the peek's.
+   *
+   * **Omitting BOTH is different, and it is the read-only reference.** On a
+   * record that is closed — departed, posted, archived — nothing about the link
+   * may change, and a Change button that renders and then declines to act is the
+   * same broken promise as a disabled field still wearing its chevron. Without
+   * them the peek keeps its facts and its Open and simply carries no link verbs,
+   * which is what a reference you can read but not re-point looks like.
    */
-  onClear: () => void;
+  onClear?: () => void;
   /**
    * Commit the draft. Receives ONLY the facts whose value CHANGED, keyed by
    * `name` — never a full snapshot, so a lock or a `before_update` hook sees the
@@ -163,6 +170,10 @@ export function ReferenceField(props: ReferenceFieldProps) {
   const [error, setError] = useState<string | null>(null);
   const editing = draft !== null;
   const editable = onSave != null && facts.some((f) => f.name != null);
+  /** Chân trang chỉ có lý do tồn tại khi nó chở một động từ. Không có gì để
+   *  đổi, để bỏ, để sửa hay để mở thì cái peek chỉ còn là các dữ kiện — và một
+   *  đường kẻ dưới chúng chỉ nói rằng có thêm thứ gì đó, mà không có. */
+  const coVerb = editing || onChange != null || onClear != null || editable || onOpen != null;
 
   const openDraft = () => {
     const seed: Record<string, string> = {};
@@ -239,6 +250,12 @@ export function ReferenceField(props: ReferenceFieldProps) {
       <InlineEditView
         anchorRef={anchor}
         accessibilityLabel={accessibilityLabel}
+        /* Nothing here can be changed — no re-point, no detach, no fact edit —
+           so the field stops advertising one and rests like the read-only values
+           beside it. The peek still opens: reading who a closed record points at
+           is ordinary. Derived rather than a prop, so a caller cannot hand out
+           an editable surface over verbs it never passed. */
+        inert={onChange == null && onClear == null && onSave == null}
         onPress={() => setPeekOpen(true)}
         active={peekOpen}
         /* THE MARKER — what says this value is a RECORD and not typed text.
@@ -395,6 +412,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
             record being edited, one navigates off it — so offering either here
             would be offering to lose the typing. Cancel and Save are the only
             two exits, which is also what the pinned popover promised. */}
+        {coVerb ? (
         <PopoverFooter align={editing ? "end" : "space-between"}>
           {editing ? (
             <>
@@ -415,16 +433,18 @@ export function ReferenceField(props: ReferenceFieldProps) {
             </>
           ) : (
             <>
-              {/* LEFT acts on the LINK — which record this points at. Both are
-                  unconditional: the peek always offers "point it elsewhere" and
-                  "leave it empty", so its footer has ONE shape everywhere. */}
+              {/* LEFT acts on the LINK — which record this points at. The two
+                  travel together, so the footer has ONE shape wherever the link
+                  can be re-pointed, and no left group at all where it cannot. */}
               <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                {onChange ? (
                 <Button
                   title={t.change}
                   color="secondary"
                   accessibilityLabel={`${t.change} — ${name}`}
                   onPress={() => { setPeekOpen(false); onChange(); }}
                 />
+                ) : null}
                 {/* 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
@@ -433,12 +453,14 @@ export function ReferenceField(props: ReferenceFieldProps) {
                     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. */}
+                {onClear ? (
                 <Button
                   title={t.clear}
                   color="secondary"
                   accessibilityLabel={`${t.clear} — ${name}`}
                   onPress={() => { setPeekOpen(false); onClear(); }}
                 />
+                ) : null}
               </View>
               {/* RIGHT acts on the RECORD the link points at. Edit takes the ONE
                   filled-dark rung because it is the only verb here that leads to
@@ -459,6 +481,7 @@ export function ReferenceField(props: ReferenceFieldProps) {
             </>
           )}
         </PopoverFooter>
+        ) : null}
       </PopoverContent>
     </Popover>
   );

package/src/table.tsx

@@ -331,7 +331,12 @@ export function TableGroup(props: TableGroupProps) {
   return (
     <View>
       <View style={styles.groupHeading}>
-        {color ? <View style={[styles.groupDot, { backgroundColor: solid(color) }]} /> : null}
+        {/* Ô này giữ chỗ kể cả khi băng không có màu: bỏ hẳn nó đi thì nhãn của
+            băng trung tính bắt đầu sớm hơn nhãn băng có màu đúng một chấm cộng
+            khoảng cách, và hai băng nằm ngay cạnh nhau trong cùng một bảng. */}
+        <View
+          style={[styles.groupDot, color ? { backgroundColor: solid(color) } : { opacity: 0 }]}
+        />
         <Text size="sm" weight="semibold">
           {label}
         </Text>

package/src/tabs.tsx

@@ -77,7 +77,7 @@ export function Tabs<T extends string>(props: TabsProps<T>) {
 
   return (
     <View
-      style={{ flexDirection: "row", gap: 4 }}
+      style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 4, rowGap: 4 }}
       accessibilityRole="tablist"
       accessibilityLabel={accessibilityLabel}
     >