@lotics/ui 7.12.0 → 7.12.2

package/AGENTS.md

@@ -115,7 +115,7 @@ Pick by capability, not by name. (→ the source file for the API.)
   `PageHeader` /
   `PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`, `Stepper`,
   `DangerZone` (the destructive section — delete/archive — set apart at the bottom of a record/settings surface).
-- **Rows & registers** — `PressableRow` (THE register row), `ListItem`, `MenuButton`,
+- **Rows & registers** — `PressableRow` (THE register row; forwards its `ref`, so wrapping it in a `PopoverTrigger` anchors a row-triggered peek Popover — without the ref the trigger is unmeasurable and the popover renders off-screen), `ListItem`, `MenuButton`,
   `MenuListItem`, `DetailRow` (label+value for drawers/peeks; optional `trailing` slot for a
   right-side action/badge/unit), `ActionMenu` (⋯), `FloatingActionBar` (bulk-select bar).
 - **Filters & view controls** — `SearchInput`, `ChipGroup`, `FilterChip` (+ `RangeSlider`,
@@ -302,7 +302,9 @@ marked + disabled), not a generic text menu. A composition (Badge + Button + Pop
 **Default: `<FilesEditor files onAdd onRemove>`** — it bundles the grid + a toolbar (Upload · Select ·
 Download all) + a batch SELECT mode + the gallery + confirmed-remove; the host only owns `files` and
 wires `onAdd` (picked → its upload) / `onRemove`. The destructive per-tile ✕ shows only in SELECT mode
-(the default view is a clean preview — no stray-tap deletes); the built-in gallery is Download +
+(the default view is a clean preview — no stray-tap deletes); pass `selectTileRemove={false}` to drop
+that ✕ entirely so select mode deletes ONLY via Select → Menu → Delete (the batch gating flow — how the
+cell popover's `cell_files_editor` does it). The built-in gallery is Download +
 inline preview (no "open in new tab" — it's redundant once everything previews inline). In a
 height-bounded container (a popover/drawer) pass `gridMaxHeight` so the grid SCROLLS and the toolbar
 pins below it; omit it in free-flow layouts (a form field) where the grid grows. Reach for the
@@ -669,7 +671,9 @@ was only ever about the review surfaces' sparkles/severity glyphs, not functiona
     + cells align. The Divider BETWEEN rows is the resting separation. The COLUMNAR register is
     `Table`/`TableRow`/`TableCell` (columns once → header + widths can't drift; ONE hairline under the
     header; the rows below it Divider-separated; a sortable column shows its `SortHeader` sort glyph
-    ALWAYS so it reads as sortable). Make it SELECTABLE with the `Table` `leading` gutter + `selectAll`
+    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`
     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
@@ -878,7 +882,7 @@ CalloutText · CalloutActions) · kpi_card · kpi_strip · summary_line (Summary
 bar_chart · line_chart · pie_chart · ring_gauge · progress_bar · stacked_progress_bar · breakdown ·
 funnel (Funnel — conversion funnel: narrowing bars + the step rate as a bold aligned headline row, count below; `orientation` vertical|horizontal, `onSelect`/`selectedKey` press-to-drill; the subset/drop-off sibling of stacked_progress_bar's whole-split) ·
 status_grid (StatusGrid + StatusLegend) · heatmap (density cross-tab — colour-only, no numbers) · matrix (Matrix — the PIVOT cross-tab: band-compound `Matrix` root + `Matrix.Header` (corner + axis labels) + `Matrix.Grid` (`display` number|heat|both — the cells, pressable, the value IN the cell) + `Matrix.Totals` (row + column + grand) + `Matrix.Legend`; the data layer `matrixTotals`/`MatrixAxisItem`/`MatrixCellRef` import from `@lotics/ui/matrix_totals`. Pick over `Heatmap` when the NUMBER and totals matter, not just where it clusters) · legend_item · remainder_meter · allocation_row ·
-scan_field · file_dropzone · files_editor (FilesEditor — THE all-in-one attachment field: FileGrid + a toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only, never in the default view) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines are LAZY (dynamic-imported, ~free until a doc of that type is opened) so custom-code APPS can use it too — they just add `@lotics/docx` + `@lotics/xlsx` to their deps. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
+scan_field · file_dropzone · files_editor (FilesEditor — THE all-in-one attachment field: FileGrid + a toolbar (Upload primary · Select · Download all) that swaps into a batch SELECT mode (Select all · a Menu of Download/Share/Delete · Done; the per-tile ✕ is select-mode-only, never in the default view; `selectTileRemove={false}` drops even that so delete is menu-only) + built-in gallery (Download + inline preview; no "open in new tab") + Alert-confirmed remove; host wires `files` + `onAdd`/`onRemove` (+ optional `uploads`, `onShareSelected`, `readOnly`, `selectTileRemove`, `labels`, `galleryLabels`, `gridMaxHeight` — cap the grid height so it scrolls and the toolbar pins, for a popover/drawer); mirrors the frontend cell_files_editor. Use FileGrid/FileRows bare only when you own the chrome) · file_grid (FileGrid — the upload-aware grid: completed files + a live upload queue in one surface; FileUpload/PendingUpload types; the add-files default) · uploading_thumbnail (UploadingThumbnail — the single in-flight upload tile FileGrid renders; reach for it only when hand-rolling a non-grid upload layout) · file_thumbnail · file_thumbnail_grid · file_row · file_rows (FileRows — batteries-included file list: row press → built-in gallery + a ⋯ Download/Open-external/Remove menu; composes FileRow + ActionMenu + FileGalleryModal) · file_preview (FilePreview — the universal inline preview: image/PDF/video/audio + Word via `@lotics/docx` + Excel/CSV via `@lotics/xlsx`; the heavy engines are LAZY (dynamic-imported, ~free until a doc of that type is opened) so custom-code APPS can use it too — they just add `@lotics/docx` + `@lotics/xlsx` to their deps. Renders to canvas/DOM, never a nested iframe — works in the sandboxed app iframe) ·
 file_gallery_modal · image_gallery · use_selection (useSelection — always-on multi-select state for a register/list: the `selected` Set + `toggle`/`setAll`/`allSelected`/`indeterminate`/`count`/`clear`; selectability gating stays with the caller. The checkbox-always-visible counterpart to `use_selection_mode`) · use_selection_mode · share_or_download · rotate_image · avatar · skeleton · activity_indicator · loading · divider ·
 spacer · stack · section_card · page_header · page_content · calendar (calendar/index.ts) · gantt ·
 comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating

package/package.json

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

package/src/files_editor.tsx

@@ -64,6 +64,12 @@ export interface FilesEditorProps {
   onDownloadZipSelected?: (files: DisplayFile[]) => void;
   /** Remove a completed file. Omit (or `readOnly`) for a view-only surface. */
   onRemove?: (id: string) => void;
+  /** Show the per-tile ✕ during SELECT mode (default `true`). The default
+   *  (non-select) view NEVER shows a ✕ regardless — this governs select mode
+   *  only. Set `false` when batch Select → Menu → Delete is the sole delete
+   *  path (e.g. a cell popover), so a tile in select mode toggles selection and
+   *  nothing else. */
+  selectTileRemove?: boolean;
   /** Cancel an in-flight upload / retry a failed one (when using `uploads`). */
   onUploadRemove?: (id: string) => void;
   onRetry?: (id: string) => void;
@@ -112,6 +118,7 @@ export function FilesEditor(props: FilesEditorProps) {
     onUpload,
     onDownloadZipSelected,
     onRemove,
+    selectTileRemove = true,
     onUploadRemove,
     onRetry,
     onRetryAll,
@@ -163,9 +170,12 @@ export function FilesEditor(props: FilesEditorProps) {
       selectedIds={selectMode ? selected : undefined}
       onToggleSelect={selectMode ? toggle : undefined}
       onFilePress={selectMode ? undefined : (f) => setGalleryIndex(files.findIndex((x) => x.id === f.id))}
-      // The per-tile ✕ is a SELECT-mode affordance — the default view stays a clean
-      // preview surface so a stray tap can't drop a file.
-      onDisplayRemove={!readOnly && selectMode && onRemove ? (id) => confirmRemove(() => onRemove(id)) : undefined}
+      // The per-tile ✕ is a SELECT-mode affordance (opt-out via `selectTileRemove`)
+      // — the default view stays a clean preview surface so a stray tap can't drop a
+      // file, and a `selectTileRemove={false}` surface deletes only via the menu.
+      onDisplayRemove={
+        !readOnly && selectMode && selectTileRemove && onRemove ? (id) => confirmRemove(() => onRemove(id)) : undefined
+      }
       onUploadRemove={onUploadRemove}
       onRetry={onRetry}
       onRetryAll={onRetryAll}

package/src/pressable_row.tsx

@@ -1,5 +1,5 @@
-import { ReactNode, useState } from "react";
-import { Pressable, StyleProp, StyleSheet, ViewStyle } from "react-native";
+import { ReactNode, Ref, useState } from "react";
+import { Pressable, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { colors } from "./colors";
 
 export interface PressableRowProps {
@@ -31,6 +31,11 @@ export interface PressableRowProps {
   /** Layout only (gap, minHeight overrides). The surface owns its press
    * states — never pass backgroundColor for hover/selected. */
   style?: StyleProp<ViewStyle>;
+  /** Forwarded to the underlying Pressable's DOM node so a `Popover`/`Tooltip`
+   * can anchor to (measure) the row — RN-Web forwards it to the rendered element.
+   * Without it, wrapping this row in a `PopoverTrigger` yields an unmeasurable
+   * trigger and the popover renders unpositioned. */
+  ref?: Ref<View>;
 }
 
 /**
@@ -45,7 +50,7 @@ export interface PressableRowProps {
  * `variant` picks bleed (registers) or inset (Accordion drill-down rows).
  */
 export function PressableRow(props: PressableRowProps) {
-  const { onPress, selected = false, marked = false, variant = "register", children, style } = props;
+  const { onPress, selected = false, marked = false, variant = "register", children, style, ref } = props;
   const [hovered, setHovered] = useState(false);
 
   // RN's types don't declare mouse handlers; react-native-web forwards them
@@ -57,6 +62,7 @@ export function PressableRow(props: PressableRowProps) {
 
   return (
     <Pressable
+      ref={ref}
       onPress={onPress}
       // Non-focusable surface: tabIndex, NOT focusable — RN-Web's Pressable
       // ignores `focusable` and writes its own tabIndex (the keyboard target is

package/src/table.tsx

@@ -144,11 +144,25 @@ export function TableRow(props: TableRowProps) {
   );
   const { focusVisible, focusProps } = useFocusRing();
 
+  // Read-only row (no `onPress`): a static, non-interactive row — no hover wash,
+  // no pointer cursor, no focusable door — so a `Table` can present read-only
+  // tabular data (a fee breakdown, a spec sheet) without implying the rows open
+  // something. An interactive row (with `onPress`) keeps the full register surface.
+  if (!onPress) {
+    return (
+      <View style={styles.staticRow}>
+        {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
+        <View style={[styles.door, { minHeight }]}>{cells}</View>
+        {ctx.trailing > 0 ? <View style={{ width: ctx.trailing, alignItems: "flex-end" }}>{trailing}</View> : null}
+      </View>
+    );
+  }
+
   return (
-    <PressableRow onPress={onPress ?? noop} selected={selected} marked={marked} style={styles.row}>
+    <PressableRow onPress={onPress} selected={selected} marked={marked} style={styles.row}>
       {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
       <Pressable
-        accessibilityRole={onPress ? "button" : undefined}
+        accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
         onPress={onPress}
         {...focusProps}
@@ -173,8 +187,6 @@ export function TableCell(props: TableCellProps) {
   return <View style={_column ? colStyle(_column) : undefined}>{children}</View>;
 }
 
-const noop = () => {};
-
 const styles = StyleSheet.create({
   // A hairline under the column header anchors the columns; the rows below it are
   // Divider-separated.
@@ -194,6 +206,14 @@ const styles = StyleSheet.create({
   row: {
     gap: 14,
   },
+  // Read-only row (a `TableRow` with no `onPress`): the register row's gutter +
+  // layout so cells still align with the header, minus the hover/press surface.
+  staticRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+    paddingHorizontal: 20,
+  },
   door: {
     flex: 1,
     flexDirection: "row",