@lotics/ui 7.17.0 → 7.19.0

package/AGENTS.md

@@ -21,9 +21,11 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
   app stays English. Wired so far: `Pagination`, `SortHeader`/`Table.sortLabels`, `OptionList`
   (+ `Select`/`Combobox` built on it), `FilterChip`, `Drawer`, `Confidence`, `RemainderMeter`,
   `ChangeReview`/`ChangeReviewActions`, `DateRangeFilterField`/`DateFilter` (presets + footer +
-  time-segment a11y, one `dateRange` slice), and `FormField` (the `optional` marker). Adding a string to a wired component's `*Labels` forces
+  time-segment a11y, one `dateRange` slice), `FormField` (the `optional` marker), and
+  `FileRows`/`FileGalleryModal`/`FilePreview` (one `gallery` slice: the ⋯ menu incl. remove+confirm,
+  the gallery chrome, and the preview captions). Adding a string to a wired component's `*Labels` forces
   both packs in `locale.tsx` to fill it (compile error) — that's how the kit avoids a silent English
-  leak. Not yet on the provider (pass `labels` for now): calendar/gantt, the file/preview/comment labels.
+  leak. Not yet on the provider (pass `labels` for now): calendar/gantt, the comment labels.
 
 ---
 
@@ -682,7 +684,8 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
     header; the rows below it Divider-separated; a sortable column shows its `SortHeader` sort glyph
     ALWAYS so it reads as sortable). A `TableRow` with no `onPress` renders a STATIC read-only row (no
     hover wash / pointer cursor) so `Table` also serves read-only tabular data (a fee breakdown, a spec
-    sheet), not just interactive registers. Make it SELECTABLE with the `Table` `leading` gutter + `selectAll`
+    sheet), not just interactive registers. A pressable `TableRow` REQUIRES `accessibilityLabel`
+    ("Open …") — its keyboard door is an empty overlay with no content to derive a name from. Make it SELECTABLE with the `Table` `leading` gutter + `selectAll`
     slot — a `CheckboxInput` per `TableRow` (`leading`) + a select-all in the header band, the ticked
     rows `marked`, paired with a `FloatingActionBar`; the selection state is the **`useSelection()`**
     hook (`selected`/`count`/`toggle`/`setAll`/`allSelected`/`indeterminate`/`clear` — gating which
@@ -696,9 +699,13 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
   a fixed `width`, so amount/status columns don't jitter).
 - **Row actions are ALWAYS-VISIBLE siblings, never hover-revealed, never nested.** A pressable row =
   a role-less surface (the hover/press wash, via DOM `mouseenter` so it covers the whole row) + an
-  accessible "Open …" door (the body, a button) + trailing actions (⋯, remove ✕, edit) as SIBLINGS of
+  accessible "Open …" door (a button) + trailing actions (⋯, remove ✕, edit) as SIBLINGS of
   the door — a button must not contain another button, so the action is independently pressable and
-  the ✕ isn't swallowed by the row press (`FileRow` and `PressableRow` are the references). Actions
+  the ✕ isn't swallowed by the row press (`FileRow` and `PressableRow` are the references). The door
+  wraps the row body ONLY when that body is non-interactive by construction (`FileRow`'s name/meta);
+  where the body is arbitrary app content — `TableRow`'s cells, which legitimately carry a `Link` or
+  a popover trigger — the door is an EMPTY absolutely-positioned sibling under the cells (tab stop +
+  name + focus ring; mouse rides the surface), so a control in a cell never nests inside it. Actions
   stay **visible** — a hover-only action is invisible to keyboard and touch users. The ONLY exception
   is a DENSE tree/register where a persistent per-row action would clutter (e.g. the DB sidebar):
   reveal on hover **OR focus-within**, keeping the action in the DOM + tab order and gating only its

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.17.0",
+  "version": "7.19.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/file_gallery_modal.tsx

@@ -18,7 +18,8 @@ import type { DisplayFile } from "./file_thumbnail";
 import { FilePreview } from "./file_preview";
 import { isImageMimeType } from "./mime";
 import { useImageRotation, type ImageRotation } from "./use_image_rotation";
-import { resolveGalleryLabels, type GalleryLabels } from "./file_preview_types";
+import { type GalleryLabels } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 import { downloadFileFromUrl } from "./download";
 import { ActionMenu, type ActionMenuItem } from "./action_menu";
 import { useScreenSize } from "./use_screen_size";
@@ -153,7 +154,7 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
   const file = files[activeIndex];
   if (!file) return null;
 
-  const l = resolveGalleryLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
   const isImage = isImageMimeType(file.mimeType);
   const total = files.length;
   const rotated = rot.rotationFor(file.id) !== 0;

package/src/file_preview.tsx

@@ -3,7 +3,8 @@ import { Text } from "./text";
 import { DocumentCard } from "./file_thumbnail";
 import { isImageMimeType } from "./mime";
 import { RotatableImage } from "./rotatable_image";
-import { type FilePreviewProps, resolveLabels } from "./file_preview_types";
+import { type FilePreviewProps } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 
 /**
  * Native (mobile) fallback: images render full-bleed; everything else shows a
@@ -11,7 +12,7 @@ import { type FilePreviewProps, resolveLabels } from "./file_preview_types";
  * the `.web.tsx` variant carries it; native consumers download instead.
  */
 export function FilePreview({ file, labels, rotation }: FilePreviewProps) {
-  const l = resolveLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
   if (isImageMimeType(file.mimeType)) {
     return <RotatableImage uri={file.url} alt={file.filename} rotation={rotation} />;
   }

package/src/file_preview.web.tsx

@@ -13,7 +13,8 @@ import {
   isAudioMimeType,
   isPreviewableMimeType,
 } from "./mime";
-import { type FilePreviewProps, resolveLabels, type PreviewLabels } from "./file_preview_types";
+import { type FilePreviewProps, type PreviewLabels } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 import { SpreadsheetView } from "./spreadsheet_view";
 import { RotatableImage } from "./rotatable_image";
 import { downloadFileFromUrl } from "./download";
@@ -36,7 +37,7 @@ import { colors } from "./colors";
  * (purity test). Lifted from the frontend gallery so both share one renderer.
  */
 export function FilePreview({ file, labels, onError, rotation, credentials }: FilePreviewProps) {
-  const l = resolveLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
 
   if (isImageMimeType(file.mimeType)) {
     return (

package/src/file_preview_types.ts

@@ -2,8 +2,9 @@ import type { DisplayFile } from "./file_thumbnail";
 
 /**
  * Caption/error strings shown inside the preview. `@lotics/ui` is i18n-free
- * (purity test forbids lingui), so the host passes translated strings; English
- * is the fallback.
+ * (purity test forbids lingui): the strings resolve from the `LoticsLocale`
+ * `gallery` slice (`LoticsLocaleProvider`, default English) with a per-instance
+ * `labels` prop as the one-off override.
  */
 export interface PreviewLabels {
   notAvailable: string;
@@ -12,13 +13,6 @@ export interface PreviewLabels {
   passwordProtected: string;
 }
 
-export const defaultPreviewLabels: PreviewLabels = {
-  notAvailable: "Preview not available",
-  loadFailed: "Failed to load preview",
-  download: "Download file",
-  passwordProtected: "This file is password-protected and cannot be previewed",
-};
-
 export interface FilePreviewProps {
   file: DisplayFile;
   /** Override any subset of the English default labels. */
@@ -40,14 +34,10 @@ export interface FilePreviewProps {
   credentials?: RequestCredentials;
 }
 
-export function resolveLabels(labels: Partial<PreviewLabels> | undefined): PreviewLabels {
-  return labels ? { ...defaultPreviewLabels, ...labels } : defaultPreviewLabels;
-}
-
 /**
  * Strings for the full-screen `FileGalleryModal` chrome (toolbar + nav), on top
- * of the inner `PreviewLabels`. Same i18n-free contract: host passes translated
- * strings, English is the fallback.
+ * of the inner `PreviewLabels`. Same contract: the `LoticsLocale` `gallery`
+ * slice supplies them; a per-instance `labels` prop overrides.
  */
 export interface GalleryLabels extends PreviewLabels {
   close: string;
@@ -65,22 +55,3 @@ export interface GalleryLabels extends PreviewLabels {
   saveRotation: string;
 }
 
-export const defaultGalleryLabels: GalleryLabels = {
-  ...defaultPreviewLabels,
-  close: "Close",
-  previous: "Previous",
-  next: "Next",
-  actions: "Actions",
-  openExternal: "Open in new tab",
-  remove: "Remove",
-  removeConfirmTitle: "Remove file",
-  removeConfirmMessage: (filename) => `Remove "${filename}"?`,
-  cancel: "Cancel",
-  rotateLeft: "Rotate left",
-  rotateRight: "Rotate right",
-  saveRotation: "Save rotation",
-};
-
-export function resolveGalleryLabels(labels: Partial<GalleryLabels> | undefined): GalleryLabels {
-  return labels ? { ...defaultGalleryLabels, ...labels } : defaultGalleryLabels;
-}

package/src/file_rows.tsx

@@ -12,7 +12,8 @@ import { ActionMenu, type ActionMenuItem } from "./action_menu";
 import { FileGalleryModal } from "./file_gallery_modal";
 import { resolveMime } from "./file_badge";
 import { downloadFileFromUrl } from "./download";
-import { resolveGalleryLabels, type GalleryLabels } from "./file_preview_types";
+import { type GalleryLabels } from "./file_preview_types";
+import { useLoticsLocale } from "./locale";
 import type { DisplayFile } from "./file_thumbnail";
 
 export interface FileRowsProps {
@@ -47,7 +48,7 @@ export interface FileRowsProps {
  */
 export function FileRows({ files, meta, onRemove, onOpenExternal, onDownload, onError, labels, gap = 8, credentials }: FileRowsProps) {
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
-  const l = resolveGalleryLabels(labels);
+  const l = { ...useLoticsLocale().gallery, ...labels };
 
   if (files.length === 0) return null;
 

package/src/locale.tsx

@@ -5,6 +5,7 @@ import { type ConfidenceLabels } from "./confidence";
 import { type FindingLabels } from "./finding";
 import { type RemainderMeterLabels } from "./remainder_meter";
 import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
+import { type GalleryLabels } from "./file_preview_types";
 
 /**
  * The kit's localizable strings, one slice per string-bearing component. A
@@ -61,6 +62,10 @@ export interface LoticsLocale {
    *  from/to, the footer Clear/Done, the trigger placeholder, and the time-field
    *  segment a11y names. */
   dateRange: DateRangeFilterFieldLabels;
+  /** `FileRows` / `FileGalleryModal` / `FilePreview`: the per-row ⋯ menu
+   *  (open/download/remove + the confirm), the gallery chrome (close, prev/next,
+   *  rotate), and the preview captions (not-available / load-failed / password). */
+  gallery: GalleryLabels;
 }
 
 /** The platform default — English. Every component's hardcoded default lives
@@ -112,6 +117,24 @@ export const en: LoticsLocale = {
     selectDateRange: "Select date range", selectDate: "Select date",
     clear: "Clear", done: "Done", placeholder: "All time",
   },
+  gallery: {
+    close: "Close",
+    previous: "Previous",
+    next: "Next",
+    actions: "Actions",
+    openExternal: "Open in new tab",
+    remove: "Remove",
+    removeConfirmTitle: "Remove file",
+    removeConfirmMessage: (filename) => `Remove "${filename}"?`,
+    cancel: "Cancel",
+    rotateLeft: "Rotate left",
+    rotateRight: "Rotate right",
+    saveRotation: "Save rotation",
+    notAvailable: "Preview not available",
+    loadFailed: "Failed to load preview",
+    download: "Download file",
+    passwordProtected: "This file is password-protected and cannot be previewed",
+  },
 };
 
 /** Vietnamese. Maintained once here so every app (and the frontend) shares one
@@ -163,6 +186,24 @@ export const vi: LoticsLocale = {
     selectDateRange: "Chọn khoảng ngày", selectDate: "Chọn ngày",
     clear: "Xóa", done: "Xong", placeholder: "Tất cả thời gian",
   },
+  gallery: {
+    close: "Đóng",
+    previous: "Trước",
+    next: "Sau",
+    actions: "Thao tác",
+    openExternal: "Mở trong thẻ mới",
+    remove: "Gỡ tệp",
+    removeConfirmTitle: "Gỡ tệp",
+    removeConfirmMessage: (filename) => `Gỡ "${filename}"?`,
+    cancel: "Hủy",
+    rotateLeft: "Xoay trái",
+    rotateRight: "Xoay phải",
+    saveRotation: "Lưu ảnh đã xoay",
+    notAvailable: "Không xem trước được định dạng này",
+    loadFailed: "Không tải được bản xem trước",
+    download: "Tải xuống",
+    passwordProtected: "Tệp có mật khẩu — không xem trước được",
+  },
 };
 
 const LoticsLocaleContext = createContext<LoticsLocale>(en);

package/src/pressable_row.tsx

@@ -26,7 +26,10 @@ export interface PressableRowProps {
   variant?: "register" | "bleed" | "inset";
   /** Cells + trailing controls. Nested pressables (CTAs, checkboxes, ⋯)
    * claim their own presses; put the accessible door inside — a plain
-   * `Pressable` with role="button" + "Open …" label around the row body. */
+   * `Pressable` with role="button" + "Open …" label. Wrap the row body with it
+   * only when the body is non-interactive by construction; a body that can
+   * carry its own controls gets an EMPTY absolutely-positioned door as their
+   * sibling instead (a button must not contain a button — see `TableRow`). */
   children: ReactNode;
   /** Layout only (gap, minHeight overrides). The surface owns its press
    * states — never pass backgroundColor for hover/selected. */

package/src/table.tsx

@@ -114,14 +114,10 @@ export function Table(props: TableProps) {
   );
 }
 
-export interface TableRowProps {
-  /** Opens the record (the drawer). The door + the full-row surface both call it. */
-  onPress?: () => void;
+export type TableRowProps = {
   selected?: boolean;
   /** Part of a multi-select set — a resting blue tint (the open/hover wash overrides it). */
   marked?: boolean;
-  /** Accessible name for the door (the keyboard-focusable open target). */
-  accessibilityLabel?: string;
   /** Outside the door, BEFORE the cells (a selection checkbox) — width = Table `leading`. */
   leading?: ReactNode;
   /** Outside the door, AFTER the cells (a ⋯ menu / a button) — width = Table `trailing`. */
@@ -130,14 +126,31 @@ export interface TableRowProps {
   minHeight?: number;
   /** The `TableCell`s, one per column, in column order. */
   children: ReactNode;
-}
+} & (
+  | {
+      /** Opens the record (the drawer). The door + the full-row surface both call it. */
+      onPress: () => void;
+      /** Accessible name for the door (the keyboard-focusable open target). REQUIRED
+       *  on a pressable row: the door is an empty overlay (cells are its siblings, so
+       *  a cell control never nests in a button), which means it has no text content
+       *  to derive a name from — without a label it's a nameless button. */
+      accessibilityLabel: string;
+    }
+  | { onPress?: undefined; accessibilityLabel?: undefined }
+);
 
 /**
  * A register row: a full-bleed `PressableRow` (its hover wash spans the whole row,
- * incl. the leading/trailing controls) wrapping the door — an inner
- * `role="button"` `Pressable` (the keyboard-accessible open) around the cells —
- * with optional `leading`/`trailing` slots OUTSIDE the door so their own presses
- * win. Cells map to `Table`'s columns by position.
+ * incl. the leading/trailing controls) holding the cells, with the door — the
+ * keyboard-accessible `role="button"` open target — as an EMPTY absolutely-
+ * positioned SIBLING beneath them, never their ancestor. A button must not
+ * contain interactive descendants, and cells legitimately carry their own
+ * controls (a popover trigger, a `Link`); wrapping the cells in the door nests
+ * `<button>` in `<button>` (invalid HTML — React hydration warning). The door
+ * carries the tab stop, the accessible name, and the focus ring (spanning the
+ * row, rounded to the register wash); mouse presses ride the `PressableRow`
+ * surface, and nested controls claim their own. `leading`/`trailing` slots stay
+ * independently pressable. Cells map to `Table`'s columns by position.
  */
 export function TableRow(props: TableRowProps) {
   const { onPress, selected, marked, accessibilityLabel, leading, trailing, minHeight = 52, children } = props;
@@ -157,7 +170,7 @@ export function TableRow(props: TableRowProps) {
     return (
       <View style={styles.staticRow}>
         {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
-        <View style={[styles.door, { minHeight }]}>{cells}</View>
+        <View style={[styles.cells, { minHeight }]}>{cells}</View>
         {ctx.trailing > 0 ? <View style={{ width: ctx.trailing, alignItems: "flex-end" }}>{trailing}</View> : null}
       </View>
     );
@@ -165,17 +178,21 @@ export function TableRow(props: TableRowProps) {
 
   return (
     <PressableRow onPress={onPress} selected={selected} marked={marked} style={styles.row}>
-      {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
+      {ctx.leading > 0 ? <View style={[styles.slot, { width: ctx.leading }]}>{leading}</View> : null}
+      {/* An absolutely-positioned sibling paints — and hit-tests — above in-flow
+          content, which would swallow every cell control's press; the slots lift
+          above it via zIndex 1 (z-index applies to flex items), so the door gets
+          only the keyboard. Negative z on the door instead would escape the row
+          (no stacking context) and bury the focus ring under the Card background. */}
       <Pressable
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
         onPress={onPress}
         {...focusProps}
-        style={[styles.door, { minHeight }, focusVisible && { boxShadow: FOCUS_RING }]}
-      >
-        {cells}
-      </Pressable>
-      {ctx.trailing > 0 ? <View style={{ width: ctx.trailing, alignItems: "flex-end" }}>{trailing}</View> : null}
+        style={[styles.door, focusVisible && { boxShadow: FOCUS_RING }]}
+      />
+      <View style={[styles.cells, { minHeight }]}>{cells}</View>
+      {ctx.trailing > 0 ? <View style={[styles.slot, { width: ctx.trailing, alignItems: "flex-end" }]}>{trailing}</View> : null}
     </PressableRow>
   );
 }
@@ -219,10 +236,27 @@ const styles = StyleSheet.create({
     gap: 14,
     paddingHorizontal: 20,
   },
+  // The keyboard door: an empty overlay spanning the row — the tab stop + focus
+  // ring live here, the cells are its SIBLINGS (see TableRow's doc). Radius
+  // matches the register wash.
   door: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderRadius: 10,
+  },
+  cells: {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
     gap: 14,
+    zIndex: 1,
+  },
+  // Leading/trailing gutters carry their own controls — lifted above the door
+  // like the cells.
+  slot: {
+    zIndex: 1,
   },
 });