@lotics/ui 46.2.0 → 46.8.0

package/src/file_row.tsx

@@ -3,11 +3,25 @@ import { Pressable, StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
 import { FileBadge } from "./file_badge";
+import { FileThumbnail, type DisplayFile } from "./file_thumbnail";
 import { CURSOR_DEFAULT, FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
+import { isImageMimeType } from "./mime";
 import { useLoticsLocale } from "./locale";
+import { FieldAnnotations, type FieldAnnotationProps } from "./field_annotations";
 
-export interface FileRowProps {
+/**
+ * A document-checklist row is a FIELD SURFACE — an expected document is a value
+ * the reader supplies — so it carries the kit's one annotation anatomy
+ * (`description` / `warning` / `error`), the same block `DetailRow` renders.
+ *
+ * Without it a row whose document FAILS could only say so in `meta`, which is
+ * muted single-line prose, or by demoting the fault to a callout about the whole
+ * SECTION — which says something different: the callout summarises, the field
+ * pinpoints. It is `flat`: the value above is the file's own name, not a painted
+ * control, so the annotation sits on that name's left edge with no inset.
+ */
+export interface FileRowProps extends FieldAnnotationProps {
   /** The file / document name — the primary line. */
   name: string;
   /**
@@ -25,6 +39,32 @@ export interface FileRowProps {
   /** File type → the FileBadge glyph + color. Omit (with `placeholder`) for an
    *  expected-but-not-yet-provided document. */
   mimeType?: string;
+  /**
+   * The stored file, so an IMAGE shows the scan itself where the glyph would be.
+   *
+   * A checklist of photographed paperwork — a permit, a certificate, an ID — is
+   * a list of documents that all carry the SAME badge, so the badge stops
+   * telling one row from another and only says "this is a picture". The picture
+   * says which picture. A non-image (a PDF) falls back to the badge, so a mixed
+   * list keeps one footprint down the column.
+   *
+   * It replaces the badge rather than sitting beside it: two marks on one row is
+   * the same fact twice, and `leading` is reserved for a mark ABOUT the row (a
+   * `DiffMark`, a checkbox) which must line up outside the file's own identity.
+   */
+  file?: DisplayFile;
+  /**
+   * Makes the THUMBNAIL its own press target, separate from the row's.
+   *
+   * A document row often has two different destinations: the row opens what the
+   * row is ABOUT (expand its fields, drill to the record), while the picture
+   * opens the picture. Without this the row's single door swallows both, so the
+   * only way to see the scan is whatever the row happens to do.
+   *
+   * It is a sibling press, not a nested one — the thumbnail sits outside the
+   * row's own `Pressable`, so this never puts a button inside a button.
+   */
+  onOpenFile?: () => void;
   /** Ghost badge — an expected document that hasn't been provided yet. */
   placeholder?: boolean;
   /** Marks the badge as a template (TMPL). */
@@ -36,6 +76,12 @@ export interface FileRowProps {
    *  control. An independently-interactive SIBLING: never swallowed by the row
    *  press (a button never nests in the door button). */
   trailing?: React.ReactNode;
+  /**
+   * What the row IS — a status `Badge`, a verdict. Rides INSIDE the press door,
+   * because a status is part of what the row says and pressing it should open
+   * the row. `trailing` is for what you DO to the row and stays outside.
+   */
+  status?: React.ReactNode;
   /**
    * Leading slot, BEFORE the badge — a `DiffMark` saying what happened to this
    * document, a selection checkbox, a status dot.
@@ -79,11 +125,17 @@ export function FileRow({
   meta,
   mimeType,
   placeholder,
+  file,
+  onOpenFile,
   isTemplate,
   onPress,
   trailing,
   leading,
   size = "sm",
+  description,
+  warning,
+  error,
+  status,
 }: FileRowProps) {
   const locale = useLoticsLocale();
   const md = size === "md";
@@ -97,9 +149,28 @@ export function FileRow({
     onMouseLeave: () => setHovered(false),
   } as object;
 
-  const content = (
+  const mark = (
+    <>
+      {file && isImageMimeType(file.mimeType) ? (
+        /* A PHOTO is worth looking at, so it gets more room than a glyph would
+           earn — but only on `md`, and only for an image: a non-image above
+           `COMPACT_THUMBNAIL_SIZE` turns into a CARD that prints the filename,
+           which the row already says. */
+        <FileThumbnail
+          file={file}
+          size={md ? IMAGE_THUMB_MD : 30}
+          disablePress={!onOpenFile}
+          onPress={onOpenFile}
+          accessibilityLabel={name}
+        />
+      ) : (
+        <FileBadge size={md ? 38 : 30} mimeType={mimeType} placeholder={placeholder} isTemplate={isTemplate} />
+      )}
+    </>
+  );
+
+  const body = (
     <>
-      <FileBadge size={md ? 38 : 30} mimeType={mimeType} placeholder={placeholder} isTemplate={isTemplate} />
       <View style={styles.text}>
         <Text size="sm" weight="medium" numberOfLines={1}>
           {name}
@@ -114,7 +185,15 @@ export function FileRow({
         ) : (
           meta
         )}
+        <FieldAnnotations description={description} warning={warning} error={error} flat />
       </View>
+      {/* STATUS rides INSIDE the door, unlike `trailing`. What a row IS belongs
+          to the row, so pressing its status opens the row like pressing its
+          name does; what you DO to a row is a control and stays a sibling.
+          Put a status Badge in `trailing` instead and it becomes a dead patch
+          in the middle of a pressable row — the reader presses the most
+          eye-catching thing on the line and nothing happens. */}
+      {status == null ? null : <View style={styles.status}>{status}</View>}
     </>
   );
 
@@ -122,7 +201,8 @@ export function FileRow({
     return (
       <View style={[styles.row, md && styles.rowMd]}>
         {leading}
-        {content}
+        {mark}
+        {body}
         {trailing}
       </View>
     );
@@ -139,6 +219,11 @@ export function FileRow({
       {...mouseProps}
     >
       {leading}
+      {/* With its own press, the mark is a SIBLING of the door — nesting it
+          would put a button inside a button, and the browser would rather
+          reparent the DOM than render it. Without one it rides inside, where
+          pressing the file's face opens the row like the rest of it. */}
+      {onOpenFile ? mark : null}
       <Pressable
         onPress={onPress}
         {...focusProps}
@@ -148,7 +233,8 @@ export function FileRow({
         accessibilityLabel={locale.fileRow.open(name)}
         style={[styles.door, focusVisible && { boxShadow: FOCUS_RING }]}
       >
-        {content}
+        {onOpenFile ? null : mark}
+        {body}
       </Pressable>
       {trailing}
     </View>
@@ -168,6 +254,12 @@ export function FileRow({
  * `TableRow` 52, this component's own `md` 56 — which is what "squeezed"
  * literally was: a file line packed tighter than any list it sits beside.
  */
+/** An image thumbnail on the DOCUMENT-DESK row. Bigger than the 38 a badge
+ *  takes, because a scan is read rather than recognised — at badge size a
+ *  photographed certificate is an indistinct grey rectangle, and the whole
+ *  reason to show the picture is to tell one document from another. */
+export const IMAGE_THUMB_MD = 56;
+
 const ROW_MIN_HEIGHT = 48;
 const ROW_PAD_Y = 6;
 
@@ -202,5 +294,6 @@ const styles = StyleSheet.create({
   rowPressed: { backgroundColor: colors.zinc["100"] },
   // The accessible "Open" door — fills the row left of the trailing sibling.
   door: { flex: 1, flexDirection: "row", alignItems: "center", gap: 12, cursor: CURSOR_DEFAULT },
+  status: { marginLeft: "auto", paddingLeft: 12 },
   text: { flex: 1, gap: 1 },
 });

package/src/icon.tsx

@@ -71,6 +71,9 @@ import Columns3Cog from "lucide-react-native/dist/esm/icons/columns-3-cog";
 import Construction from "lucide-react-native/dist/esm/icons/construction";
 import Copy from "lucide-react-native/dist/esm/icons/copy";
 import CreditCard from "lucide-react-native/dist/esm/icons/credit-card";
+import Banknote from "lucide-react-native/dist/esm/icons/banknote";
+import ArrowRightLeft from "lucide-react-native/dist/esm/icons/arrow-right-left";
+import HandCoins from "lucide-react-native/dist/esm/icons/hand-coins";
 import Database from "lucide-react-native/dist/esm/icons/database";
 import Download from "lucide-react-native/dist/esm/icons/download";
 import Ellipsis from "lucide-react-native/dist/esm/icons/ellipsis";
@@ -271,6 +274,9 @@ const iconComponents = {
   construction: Construction,
   copy: Copy,
   "credit-card": CreditCard,
+  banknote: Banknote,
+  "arrow-right-left": ArrowRightLeft,
+  "hand-coins": HandCoins,
   database: Database,
   download: Download,
   ellipsis: Ellipsis,

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/line_chart.tsx

@@ -4,7 +4,7 @@ import { colors } from "./colors";
 import { useMemo, useState, useCallback } from "react";
 import Svg, { Circle, Defs, Line, LinearGradient, Polygon, Polyline, Stop } from "react-native-svg";
 import { useLoticsLocale } from "./locale";
-import { lineChartLabelIndices } from "./line_chart_labels";
+import { axisLabelIndices } from "./axis_label_indices";
 
 export interface LineChartPoint {
   x: string | number;
@@ -97,7 +97,7 @@ export function LineChart(props: LineChartProps) {
   const visibleLabels = useMemo(() => {
     if (data.length === 0 || chartWidth === 0) return [];
 
-    return lineChartLabelIndices(data.length, chartWidth).map((index) => ({
+    return axisLabelIndices(data.length, chartWidth).map((index) => ({
       index,
       label: formatXLabel(data[index].x),
     }));

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/modal.tsx

@@ -7,6 +7,7 @@ import { PortalHost } from "@lotics/ui/portal";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
 import { useLoticsLocale } from "@lotics/ui/locale";
 import { HeadingAltitudeContext } from "./heading_altitude";
+import { useScrollSeam } from "./use_scroll_seam";
 
 export interface ModalProps {
   open: boolean;
@@ -34,8 +35,17 @@ export function Modal(props: ModalProps) {
   const { open, onClose, children, testID } = props;
   useOverlayScope(open);
 
+  // Mounted only while OPEN — see `overlay_layer.ts`. react-native-web appends a
+  // `Modal`'s body-level div on first render and never re-orders it, so an
+  // always-mounted overlay claims its slot ahead of one opened later and covers
+  // it. Mounting on open makes DOM order open order. `animationType` still
+  // FADES IN (the element mounts already visible and the animation runs on the
+  // first paint); the exit is immediate, exactly as `FileGalleryModal`'s
+  // full-screen takeover has always closed.
+  if (!open) return null;
+
   return (
-    <RNModal visible={open} onRequestClose={onClose} animationType="fade">
+    <RNModal visible onRequestClose={onClose} animationType="fade">
       <View testID={testID} style={styles.surface}>
         <PortalHost>{children}</PortalHost>
       </View>
@@ -93,6 +103,13 @@ export function ModalHeader(props: ModalHeaderProps) {
 
 export interface ModalBodyProps {
   children: ReactNode;
+  /**
+   * The IDENTITY of the content in the scroller, for a takeover that SWAPS its
+   * body in place — a wizard stepping between steps, a console changing subject.
+   * Changing it opens the new content at the top and restores the previous
+   * content's offset when the key comes back. See `DrawerScrollArea`.
+   */
+  scrollKey?: string;
 }
 
 /**
@@ -100,14 +117,17 @@ export interface ModalBodyProps {
  * footer. Fills the remaining height; its content scrolls.
  */
 export function ModalBody(props: ModalBodyProps) {
-  const { children } = props;
+  const { children, scrollKey } = props;
+  const seam = useScrollSeam(scrollKey);
   // A takeover is still a panel: `ModalHeader`'s title is `lg`, so a section
   // heading inside the body takes the ramp's `####` rung. Same rule as the
   // drawer and the dialog, published from the same kind of region — the one
   // that owns the surface's padding. See `heading_altitude.ts`.
   return (
     <HeadingAltitudeContext.Provider value="panel">
-      <ScrollView contentContainerStyle={styles.bodyContent}>{children}</ScrollView>
+      <ScrollView {...seam} contentContainerStyle={styles.bodyContent}>
+        {children}
+      </ScrollView>
     </HeadingAltitudeContext.Provider>
   );
 }