@lotics/ui 1.21.0 → 1.23.0

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@lotics/ui",
-  "version": "1.21.0",
+  "version": "1.23.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
     "./colors": "./src/colors.ts",
     "./mime": "./src/mime.ts",
     "./download": "./src/download.ts",
+    "./comments_thread": "./src/comments_thread.tsx",
     "./file_badge": "./src/file_badge.tsx",
     "./file_thumbnail": "./src/file_thumbnail.tsx",
     "./file_preview": {
@@ -150,9 +151,8 @@
     "./grid/data_grid": "./src/grid/data_grid.tsx",
     "./grid/data_grid_context": "./src/grid/data_grid_context.ts",
     "./grid/search_highlight": "./src/grid/search_highlight.ts",
-    "./grid/sortable_header_cell": "./src/grid/sortable_header_cell.tsx",
-    "./grid/column_filter": "./src/grid/column_filter.tsx",
-    "./grid/data_grid_picker": "./src/grid/data_grid_picker.tsx"
+    "./column_filter": "./src/column_filter.tsx",
+    "./table_picker": "./src/table_picker.tsx"
   },
   "files": [
     "src"

package/src/{grid/column_filter.tsx → column_filter.tsx}

@@ -1,13 +1,13 @@
-import { StyleSheet, View } from "react-native";
-import { colors } from "../colors";
-import { Text } from "../text";
-import { Icon } from "../icon";
-import { PressableHighlight } from "../pressable_highlight";
-import { TextInputField } from "../text_input_field";
-import { NumberInput } from "../number_input";
-import { PickerMenu } from "../picker_menu";
-import { Popover, PopoverTrigger, PopoverContent } from "../popover";
-import type { PickerOption } from "../picker";
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { colors } from "./colors";
+import { TextInputField } from "./text_input_field";
+import { NumberInput } from "./number_input";
+import { PickerMenu } from "./picker_menu";
+import { PillButton } from "./pill_button";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import type { PickerOption } from "./picker";
 
 /** A column the picker can filter on. `type` selects the control + operators. */
 export interface FilterableColumn {
@@ -72,18 +72,39 @@ export function isColumnFilterActive(value: ColumnFilterValue | undefined): bool
   return value.selected.length > 0;
 }
 
+/** A short human summary of an active value, for the pill label ("Vàng, Đỏ", "≥ 10"). */
+export function columnFilterSummary(
+  column: FilterableColumn,
+  value: ColumnFilterValue | undefined,
+): string {
+  if (!value) return "";
+  if (value.kind === "text") return value.query.trim();
+  if (value.kind === "number") {
+    const { min, max } = value;
+    if (min != null && max != null) return `${min}–${max}`;
+    if (min != null) return `≥ ${min}`;
+    if (max != null) return `≤ ${max}`;
+    return "";
+  }
+  return value.selected
+    .map((k) => column.options?.find((o) => o.value === k)?.label ?? k)
+    .join(", ");
+}
+
 export interface ColumnFilterProps {
   column: FilterableColumn;
   value: ColumnFilterValue | undefined;
   onChange: (value: ColumnFilterValue | undefined) => void;
-  /** Accessible name for the clear control. Pass a translated string. Default "Clear". */
+  /** Accessible name for the clear (X) control. Pass a translated string. Default "Clear". */
   clearLabel?: string;
 }
 
 /**
- * A reusable per-column filter: a pill that opens a type-aware editor (text
- * contains / number range / multi-select). Controlled — the consumer holds the
- * `ColumnFilterValue` and maps it to query conditions via
+ * A toolbar-style filter pill: the same `PillButton` the table toolbar uses, so
+ * a picker's filters read identically. Inactive → "Label ⌄"; active →
+ * "Label: summary" with an X to clear. Pressing the pill opens a type-aware
+ * editor (text contains / number range / multi-select). Controlled — the
+ * consumer holds the `ColumnFilterValue` and maps it to query conditions via
  * `columnFilterToConditions`. Pure UI; no data layer.
  */
 export function ColumnFilter(props: ColumnFilterProps) {
@@ -93,17 +114,15 @@ export function ColumnFilter(props: ColumnFilterProps) {
   return (
     <Popover side="bottom" align="start">
       <PopoverTrigger>
-        <PressableHighlight
-          accessibilityRole="button"
-          accessibilityLabel={column.label}
-          style={[styles.pill, active && styles.pillActive]}
+        <PillButton
+          onDismiss={active ? () => onChange(undefined) : undefined}
+          dismissTooltip={clearLabel}
         >
-          <Icon name="list-filter" size={13} color={active ? colors.zinc["950"] : colors.zinc["500"]} />
           <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
-            {column.label}
+            {active ? `${column.label}: ${columnFilterSummary(column, value)}` : column.label}
           </Text>
-          <Icon name="chevron-down" size={14} color={colors.zinc["400"]} />
-        </PressableHighlight>
+          {!active ? <Icon name="chevron-down" size={14} color={colors.zinc["400"]} /> : null}
+        </PillButton>
       </PopoverTrigger>
       <PopoverContent style={styles.content}>
         {column.type === "text" ? (
@@ -142,40 +161,12 @@ export function ColumnFilter(props: ColumnFilterProps) {
             onValueChange={(selected) => onChange({ kind: "select", selected })}
           />
         )}
-        {active ? (
-          <PressableHighlight
-            accessibilityRole="button"
-            accessibilityLabel={clearLabel}
-            onPress={() => onChange(undefined)}
-            style={styles.clear}
-          >
-            <Icon name="x" size={14} color={colors.zinc["500"]} />
-            <Text size="sm" color="zinc-500">
-              {clearLabel}
-            </Text>
-          </PressableHighlight>
-        ) : null}
       </PopoverContent>
     </Popover>
   );
 }
 
 const styles = StyleSheet.create({
-  pill: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 5,
-    height: 32,
-    paddingHorizontal: 10,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.background,
-  },
-  pillActive: {
-    borderColor: colors.zinc["400"],
-    backgroundColor: colors.zinc["100"],
-  },
   content: {
     minWidth: 240,
     gap: 8,
@@ -185,11 +176,4 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 8,
   },
-  clear: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingVertical: 6,
-    paddingHorizontal: 4,
-  },
 });

package/src/comments_thread.tsx

@@ -0,0 +1,378 @@
+import { useMemo, useState, type ReactNode } from "react";
+import { View } from "react-native";
+import { Text } from "./text";
+import { Spacer } from "./spacer";
+import { Stack } from "./stack";
+import { Avatar } from "./avatar";
+import { Button } from "./button";
+import { IconButton } from "./icon_button";
+import { MenuButton } from "./menu_button";
+import { FileBadge } from "./file_badge";
+import { TextInputField } from "./text_input_field";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+
+/**
+ * Presentational record-comments primitives — the view, edit, and delete of a
+ * comment thread, with every data, identity, file, and string concern injected.
+ * This is the one implementation shared by the product (`frontend`) and
+ * custom-code apps; neither owns a private copy of the per-comment rendering.
+ *
+ * Pure by the package contract: no data fetching, no i18n (strings come in via
+ * `labels`), no domain-type imports, no analytics. The consumer wires those —
+ * the product through its live-query + member directory, an app through
+ * `useComments` + `useMembers` from `@lotics/app-sdk`.
+ */
+
+export interface ThreadMember {
+  id: string;
+  name: string | null;
+  image?: string | null;
+  email?: string | null;
+}
+
+export interface ThreadFile {
+  id: string;
+  filename: string;
+  mime_type: string;
+  url?: string;
+  thumbnail_url?: string;
+}
+
+export interface ThreadComment {
+  id: string;
+  member_id: string;
+  content: string;
+  files?: ThreadFile[] | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface CommentListLabels {
+  empty: string;
+  edit: string;
+  delete: string;
+  edited: string;
+  save: string;
+  cancel: string;
+  /** Accessible name for the per-comment actions trigger. */
+  actions: string;
+  /** Shown when a comment's author can't be resolved. */
+  unknownMember: string;
+  editPlaceholder: string;
+}
+
+const DEFAULT_LABELS: CommentListLabels = {
+  empty: "No comments yet.",
+  edit: "Edit",
+  delete: "Delete",
+  edited: "edited",
+  save: "Save",
+  cancel: "Cancel",
+  actions: "Comment actions",
+  unknownMember: "Unknown member",
+  editPlaceholder: "Edit comment…",
+};
+
+/** Render-prop the consumer can supply to drive its own edit UI (e.g. with file editing). */
+export interface CommentEditFormProps {
+  comment: ThreadComment;
+  onSave: (content: string, files?: ThreadFile[] | null) => void;
+  onCancel: () => void;
+  submitting: boolean;
+  labels: CommentListLabels;
+}
+
+export interface CommentListProps {
+  comments: ThreadComment[];
+  /** The viewer's member id — drives the author-only edit/delete affordance. Null hides it. */
+  currentMemberId: string | null;
+  resolveMember: (memberId: string) => ThreadMember | null;
+  /** Called on inline-edit save. Omit to make comments read-only (no edit affordance). */
+  onEdit?: (id: string, content: string, files?: ThreadFile[] | null) => void | Promise<void>;
+  /** Called on delete. Omit to hide the delete affordance. */
+  onDelete?: (id: string) => void | Promise<void>;
+  /** Render a comment's attachments. Defaults to a row of file badges + names. */
+  renderFiles?: (files: ThreadFile[]) => ReactNode;
+  /** Render the inline edit form. Defaults to a text-only editor (preserves existing files). */
+  renderEditForm?: (props: CommentEditFormProps) => ReactNode;
+  /** Format a comment's `created_at`. Defaults to the locale date-time string. */
+  formatTimestamp?: (iso: string) => string;
+  /** Shown when there are no comments. Defaults to the `empty` label. */
+  emptyState?: ReactNode;
+  labels?: Partial<CommentListLabels>;
+}
+
+function defaultFormatTimestamp(iso: string): string {
+  const d = new Date(iso);
+  return isNaN(d.getTime()) ? iso : d.toLocaleString();
+}
+
+function DefaultFiles({ files }: { files: ThreadFile[] }) {
+  return (
+    <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+      {files.map((f) => (
+        <View key={f.id} style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+          <FileBadge mimeType={f.mime_type} />
+          <Text size="sm" numberOfLines={1}>
+            {f.filename}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function DefaultEditForm(props: CommentEditFormProps) {
+  const { comment, onSave, onCancel, submitting, labels } = props;
+  const [content, setContent] = useState(comment.content);
+  const canSave = content.trim().length > 0 || (comment.files?.length ?? 0) > 0;
+  return (
+    <View>
+      <TextInputField
+        autoFocus
+        value={content}
+        onChangeText={setContent}
+        multiline
+        numberOfLines={3}
+        placeholder={labels.editPlaceholder}
+      />
+      <Spacer size={8} />
+      <View style={{ flexDirection: "row", gap: 8, justifyContent: "flex-end" }}>
+        <Button title={labels.cancel} color="secondary" disabled={submitting} onPress={onCancel} />
+        <Button
+          title={labels.save}
+          color="primary"
+          disabled={!canSave || submitting}
+          loading={submitting}
+          // Preserve the comment's current files — a text edit never drops them.
+          onPress={() => onSave(content.trim(), comment.files)}
+        />
+      </View>
+    </View>
+  );
+}
+
+interface CommentRowProps {
+  comment: ThreadComment;
+  member: ThreadMember | null;
+  isOwn: boolean;
+  onEdit?: CommentListProps["onEdit"];
+  onDelete?: CommentListProps["onDelete"];
+  renderFiles: (files: ThreadFile[]) => ReactNode;
+  renderEditForm: (props: CommentEditFormProps) => ReactNode;
+  formatTimestamp: (iso: string) => string;
+  labels: CommentListLabels;
+}
+
+function CommentRow(props: CommentRowProps) {
+  const { comment, member, isOwn, onEdit, onDelete, renderFiles, renderEditForm } = props;
+  const { formatTimestamp, labels } = props;
+  const [isEditing, setIsEditing] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const displayName = member?.name || member?.email || labels.unknownMember;
+  const imageSrc = member?.image ? { uri: member.image } : undefined;
+  const files = comment.files ?? [];
+  const showActions = isOwn && !isEditing && (onEdit != null || onDelete != null);
+
+  const handleSave = async (content: string, savedFiles?: ThreadFile[] | null) => {
+    if (!onEdit) return;
+    setSubmitting(true);
+    try {
+      await onEdit(comment.id, content, savedFiles);
+      setIsEditing(false);
+    } catch {
+      // The data layer owns rollback + surfacing (the optimistic edit reverts);
+      // keep the form open for retry and don't let the rejection go unhandled.
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!onDelete || submitting) return;
+    setMenuOpen(false);
+    setSubmitting(true);
+    try {
+      await onDelete(comment.id);
+    } catch {
+      // Rollback re-shows the row (the visible feedback); swallow the rejection.
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <View style={{ flexDirection: "row", gap: 8 }}>
+      <View style={{ flex: 1, flexDirection: "row", gap: 8 }}>
+        <View style={{ paddingTop: 4 }}>
+          <Avatar source={imageSrc} name={displayName} />
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text weight="medium">{displayName}</Text>
+          <Text size="sm" color="zinc-500">
+            {formatTimestamp(comment.created_at)}
+            {comment.updated_at !== comment.created_at ? ` · ${labels.edited}` : ""}
+          </Text>
+          <Spacer size={8} />
+          {isEditing ? (
+            renderEditForm({
+              comment,
+              onSave: handleSave,
+              onCancel: () => setIsEditing(false),
+              submitting,
+              labels,
+            })
+          ) : (
+            <View>
+              {comment.content ? <Text>{comment.content}</Text> : null}
+              {files.length > 0 ? (
+                <>
+                  {comment.content ? <Spacer size={8} /> : null}
+                  {renderFiles(files)}
+                </>
+              ) : null}
+            </View>
+          )}
+        </View>
+      </View>
+      {showActions ? (
+        <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+          <PopoverTrigger>
+            <IconButton icon="ellipsis" tooltip={labels.actions} />
+          </PopoverTrigger>
+          <PopoverContent>
+            <Stack>
+              {onEdit ? (
+                <MenuButton
+                  icon="pencil"
+                  title={labels.edit}
+                  onPress={() => {
+                    setMenuOpen(false);
+                    setIsEditing(true);
+                  }}
+                />
+              ) : null}
+              {onDelete ? (
+                <MenuButton
+                  icon="trash"
+                  title={labels.delete}
+                  danger
+                  disabled={submitting}
+                  onPress={handleDelete}
+                />
+              ) : null}
+            </Stack>
+          </PopoverContent>
+        </Popover>
+      ) : null}
+    </View>
+  );
+}
+
+/**
+ * The comment list — one author/avatar/timestamp/content/files row per comment,
+ * oldest first, with an author-only edit/delete menu. Pair it with a composer
+ * (`CommentComposer`, or a richer consumer-owned one) for the full thread.
+ */
+export function CommentList(props: CommentListProps) {
+  const labels = { ...DEFAULT_LABELS, ...props.labels };
+  const renderFiles = props.renderFiles ?? ((files: ThreadFile[]) => <DefaultFiles files={files} />);
+  const renderEditForm = props.renderEditForm ?? ((p: CommentEditFormProps) => <DefaultEditForm {...p} />);
+  const formatTimestamp = props.formatTimestamp ?? defaultFormatTimestamp;
+
+  const sorted = useMemo(
+    () =>
+      [...props.comments].sort(
+        (a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime(),
+      ),
+    [props.comments],
+  );
+
+  if (sorted.length === 0) {
+    return <>{props.emptyState ?? <Text color="zinc-500">{labels.empty}</Text>}</>;
+  }
+
+  return (
+    <View>
+      {sorted.map((comment, i) => (
+        <View key={comment.id}>
+          {i > 0 ? <Spacer size={16} /> : null}
+          <CommentRow
+            comment={comment}
+            member={props.resolveMember(comment.member_id)}
+            isOwn={props.currentMemberId != null && props.currentMemberId === comment.member_id}
+            onEdit={props.onEdit}
+            onDelete={props.onDelete}
+            renderFiles={renderFiles}
+            renderEditForm={renderEditForm}
+            formatTimestamp={formatTimestamp}
+            labels={labels}
+          />
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export interface CommentComposerProps {
+  /** Submit a new comment. Cleared on success; left intact on throw so the draft survives. */
+  onSubmit: (content: string) => void | Promise<void>;
+  placeholder: string;
+  sendLabel: string;
+  /** Disable input + send (e.g. comments unavailable for an anonymous viewer). */
+  disabled?: boolean;
+  /** Extra controls left of the send button — e.g. an attach-file button. */
+  actions?: ReactNode;
+}
+
+/**
+ * A minimal text comment composer for consumers without a richer one of their
+ * own (the product uses its file-capable chat composer instead). Multiline
+ * input + a send button; attachments are opt-in via the `actions` slot.
+ */
+export function CommentComposer(props: CommentComposerProps) {
+  const { onSubmit, placeholder, sendLabel, disabled, actions } = props;
+  const [content, setContent] = useState("");
+  const [sending, setSending] = useState(false);
+
+  const send = async () => {
+    const text = content.trim();
+    if (!text || sending || disabled) return;
+    setSending(true);
+    try {
+      await onSubmit(text);
+      setContent("");
+    } catch {
+      // Keep the draft so the user can retry; the data layer surfaces the
+      // failure (the optimistic comment rolls back). Don't propagate.
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <View>
+      <TextInputField
+        value={content}
+        onChangeText={setContent}
+        placeholder={placeholder}
+        editable={!disabled}
+        multiline
+        numberOfLines={2}
+      />
+      <Spacer size={8} />
+      <View style={{ flexDirection: "row", gap: 8, justifyContent: "flex-end", alignItems: "center" }}>
+        {actions}
+        <Button
+          title={sendLabel}
+          color="primary"
+          disabled={disabled || !content.trim() || sending}
+          loading={sending}
+          onPress={send}
+        />
+      </View>
+    </View>
+  );
+}

package/src/table.tsx

@@ -16,7 +16,7 @@ const stickyHeader = [0];
 const CHEVRON_W = 44;
 
 export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
-  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow } = props;
+  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow, onRowPress } = props;
   const [internal, setInternal] = useState<Set<string>>(() => new Set());
   const expanded = expandedKeys ?? internal;
   const expandable = !!renderDetail;
@@ -89,6 +89,14 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
                   <Icon name={isOpen ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
                 </View>
               </Pressable>
+            ) : onRowPress ? (
+              <Pressable
+                accessibilityRole="button"
+                onPress={() => onRowPress(row)}
+                style={({ pressed }) => [styles.bodyRow, pressed ? styles.rowPressed : null, extra]}
+              >
+                {cells}
+              </Pressable>
             ) : (
               <View style={[styles.bodyRow, extra]}>{cells}</View>
             )}

package/src/table.web.tsx

@@ -19,11 +19,14 @@ function colWidth<TRow extends Record<string, unknown>>(col: Column<TRow>): CSSP
 }
 
 export function Table<TRow extends Record<string, unknown>>(props: TableProps<TRow>) {
-  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow } = props;
+  const { columns, rows, rowKey, rowStyle, sort, onSortChange, renderDetail, expandedKeys, onToggleRow, onRowPress } = props;
   const [internal, setInternal] = useState<Set<string>>(() => new Set());
   const [hoverKey, setHoverKey] = useState<string | null>(null);
   const expanded = expandedKeys ?? internal;
   const expandable = !!renderDetail;
+  // A row reacts to clicks for one of two reasons: expansion (renderDetail) or
+  // selection (onRowPress). Expansion wins if both are set.
+  const pressable = expandable || !!onRowPress;
 
   const toggle = (key: string, row: TRow) => {
     onToggleRow?.(key, row);
@@ -97,8 +100,8 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
         const extra = (rowStyle?.(row) as CSSProperties | undefined) ?? undefined;
         const rowStyleFinal: CSSProperties = {
           ...bodyRowStyle,
-          cursor: expandable ? "pointer" : "default",
-          background: hoverKey === key && expandable ? colors.zinc[50] : colors.white,
+          cursor: pressable ? "pointer" : "default",
+          background: hoverKey === key && pressable ? colors.zinc[50] : colors.white,
           ...extra,
         };
         return (
@@ -106,18 +109,19 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
             <div
               role="row"
               onClick={
-                expandable
+                pressable
                   ? (e: React.MouseEvent) => {
-                      // Whole-row click expands, EXCEPT clicks inside an interactive cell
-                      // (pickers/buttons) — they keep their own behaviour. The disclosure
-                      // chevron is the keyboard/AT affordance.
+                      // Whole-row click acts (expand or select), EXCEPT clicks inside an
+                      // interactive cell (pickers/buttons) — they keep their own behaviour.
+                      // The disclosure chevron is the keyboard/AT affordance for expansion.
                       if ((e.target as HTMLElement).closest("[data-interactive]")) return;
-                      toggle(key, row);
+                      if (expandable) toggle(key, row);
+                      else onRowPress?.(row);
                     }
                   : undefined
               }
-              onMouseEnter={expandable ? () => setHoverKey(key) : undefined}
-              onMouseLeave={expandable ? () => setHoverKey((k) => (k === key ? null : k)) : undefined}
+              onMouseEnter={pressable ? () => setHoverKey(key) : undefined}
+              onMouseLeave={pressable ? () => setHoverKey((k) => (k === key ? null : k)) : undefined}
               style={rowStyleFinal}
             >
               {columns.map((col) => (
@@ -165,7 +169,10 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
   );
 }
 
-const containerStyle: CSSProperties = { width: "100%", overflow: "auto" };
+// `maxHeight: 100%` is a no-op in a content-sized parent (a card grows to its
+// rows) but caps the table to a bounded parent (a modal's flex region), so
+// `overflow: auto` then scrolls and the sticky header engages.
+const containerStyle: CSSProperties = { width: "100%", maxHeight: "100%", overflow: "auto" };
 const headerRowStyle: CSSProperties = {
   display: "flex",
   position: "sticky",

package/src/{grid/data_grid_picker.tsx → table_picker.tsx}

@@ -1,50 +1,46 @@
 import { useCallback, useMemo } from "react";
 import { StyleSheet, View } from "react-native";
-import { colors } from "../colors";
-import { Text } from "../text";
-import { SearchInput } from "../search_input";
-import { ActivityIndicator } from "../activity_indicator";
-import { Dialog } from "../dialog";
-import { PressableHighlight } from "../pressable_highlight";
-import { DataGrid, type DataGridColumn, type DataGridGroup } from "./data_grid";
-import { SortableHeaderCell, type SortOrder } from "./sortable_header_cell";
-import {
-  ColumnFilter,
-  type FilterableColumn,
-  type ColumnFilterValue,
-} from "./column_filter";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { SearchInput } from "./search_input";
+import { ActivityIndicator } from "./activity_indicator";
+import { Dialog } from "./dialog";
+import { Table } from "@lotics/ui/table";
+import type { Column, TableSort } from "@lotics/ui/table_types";
+import { Pagination } from "./pagination";
+import { ColumnFilter, type FilterableColumn, type ColumnFilterValue } from "./column_filter";
 
-/** A grid column the picker displays. Sorting/filtering are opt-in per column. */
-export interface PickerColumn<TRow> {
+/** A grid column the picker displays. Sorting is opt-in per column. */
+export interface PickerColumn<TRow extends Record<string, unknown>> {
   key: string;
   label: string;
-  /** Fixed pixel width. Omit to let the grid size it. */
+  /** Fixed pixel width. Omit to flex. */
   width?: number;
+  align?: "left" | "right";
   /** Show a sortable header for this column. Requires `sort`/`onSortChange`. */
   sortable?: boolean;
-  /**
-   * Cell content for this column. Default: a single-line text of the row's
-   * value at `key` (objects render their `label`/`display`/`name`).
-   */
+  /** Cell content. Default: the row's value at `key` rendered as text. */
   renderCell?: (row: TRow) => React.ReactNode;
 }
 
 /** Single-column sort state — the picker sorts by one column at a time. */
-export interface DataGridPickerSort {
+export interface TablePickerSort {
   key: string;
-  order: SortOrder;
+  order: "asc" | "desc";
 }
 
-export interface DataGridPickerProps<TRow extends Record<string, unknown>> {
+export interface TablePickerProps<TRow extends Record<string, unknown>> {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   /** Heading shown above the search box. */
   title?: string;
 
   columns: PickerColumn<TRow>[];
+  /** Rows of the current page (the consumer paginates). */
   rows: TRow[];
-  /** Stable identity for a row — the value returned by selection. */
-  rowIdGetter: (row: TRow) => string;
+  /** The field holding each row's stable id — returned by selection and used to
+   *  highlight the picked row (e.g. `"__source_record_id"`). */
+  rowKey: keyof TRow & string;
 
   /** Currently selected row id, or null. Highlights the matching row. */
   value: string | null;
@@ -59,16 +55,15 @@ export interface DataGridPickerProps<TRow extends Record<string, unknown>> {
   searchPlaceholder?: string;
 
   /**
-   * Controlled single-column sort. Omit `onSortChange` to disable sorting
-   * entirely (headers render static). Toggling a column cycles asc → desc → off.
+   * Controlled single-column sort. Omit `onSortChange` to disable sorting.
+   * Toggling a column cycles asc → desc → off.
    */
-  sort?: DataGridPickerSort | null;
-  onSortChange?: (sort: DataGridPickerSort | null) => void;
+  sort?: TablePickerSort | null;
+  onSortChange?: (sort: TablePickerSort | null) => void;
 
   /**
-   * Per-column filters shown as a pill row. The consumer holds `filterValues`
-   * (keyed by column key) and maps them to query conditions via
-   * `columnFilterToConditions`.
+   * Per-column filter pills. The consumer holds `filterValues` (keyed by column
+   * key) and maps them to query conditions via `columnFilterToConditions`.
    */
   filters?: FilterableColumn[];
   filterValues?: Record<string, ColumnFilterValue>;
@@ -76,15 +71,18 @@ export interface DataGridPickerProps<TRow extends Record<string, unknown>> {
   /** Accessible name for the per-filter clear control. Pass a translated string. */
   clearLabel?: string;
 
-  /** Called when the grid scrolls near the end — load the next page. */
-  onEndReached?: () => void;
+  /** Pagination (page-model — the consumer owns the page cursor). */
+  page: number;
+  pageSize: number;
+  /** Total rows across all pages, when known — drives "Page 1 of N". */
+  total?: number;
+  hasMore: boolean;
+  onPageChange: (page: number) => void;
 
-  /** A request is in flight. Shows a spinner (overlay when rows exist). */
+  /** A request is in flight. */
   loading?: boolean;
   /** Message when there are no rows and nothing is loading. */
   emptyLabel?: string;
-
-  rowHeight?: number;
   testID?: string;
 }
 
@@ -103,22 +101,20 @@ function defaultCellText(value: unknown): string {
   return "";
 }
 
-const DEFAULT_ROW_HEIGHT = 48;
-
 /**
- * A data-agnostic record-style picker: a modal holding a virtualized grid the
- * user can browse, search, sort, and filter, then pick one row. It knows nothing
- * about records/tables/fields — the consumer supplies `columns` + `rows` and
- * owns the search/sort/filter/pagination state (so the same component drives a
- * server-side query, an in-memory list, or any other source). Compose it with a
- * domain hook (e.g. an app's `useRecordSearch`) to build a record picker, or
- * with any other row source for a different purpose.
+ * A data-agnostic record-style picker: a modal holding a table the user can
+ * browse (numbered pages), search, sort, and filter, then pick one row. It knows
+ * nothing about records/tables/fields — the consumer supplies `columns` + `rows`
+ * (one page) and owns the search/sort/filter/page state (so the same component
+ * drives a server query, an in-memory list, or any other source). Compose it
+ * with a domain hook (e.g. an app's `usePaginatedQuery`) to build a record
+ * picker, or with any other row source for a different purpose.
  *
- * Single-select: clicking any cell in a row picks that row's id. The selected
- * row is highlighted; `closeOnSelect` (default) dismisses the modal on pick.
+ * Single-select: clicking a row picks its id; the selected row is highlighted;
+ * `closeOnSelect` (default) dismisses the modal on pick.
  */
-export function DataGridPicker<TRow extends Record<string, unknown>>(
-  props: DataGridPickerProps<TRow>,
+export function TablePicker<TRow extends Record<string, unknown>>(
+  props: TablePickerProps<TRow>,
 ) {
   const {
     open,
@@ -126,7 +122,7 @@ export function DataGridPicker<TRow extends Record<string, unknown>>(
     title,
     columns,
     rows,
-    rowIdGetter,
+    rowKey,
     value,
     onValueChange,
     closeOnSelect = true,
@@ -139,21 +135,25 @@ export function DataGridPicker<TRow extends Record<string, unknown>>(
     filterValues,
     onFilterChange,
     clearLabel,
-    onEndReached,
+    page,
+    pageSize,
+    total,
+    hasMore,
+    onPageChange,
     loading = false,
     emptyLabel,
-    rowHeight = DEFAULT_ROW_HEIGHT,
     testID,
   } = props;
 
   const handleSelect = useCallback(
-    (id: string) => {
-      onValueChange(id);
+    (row: TRow) => {
+      onValueChange(String(row[rowKey]));
       if (closeOnSelect) onOpenChange(false);
     },
-    [onValueChange, closeOnSelect, onOpenChange],
+    [onValueChange, rowKey, closeOnSelect, onOpenChange],
   );
 
+  // Toggle this column's sort: asc → desc → off. The consumer holds the state.
   const toggleSort = useCallback(
     (key: string) => {
       if (!onSortChange) return;
@@ -164,51 +164,35 @@ export function DataGridPicker<TRow extends Record<string, unknown>>(
     [sort, onSortChange],
   );
 
-  const gridColumns = useMemo<DataGridColumn<TRow>[]>(
+  const tableColumns = useMemo<Column<TRow>[]>(
     () =>
       columns.map((col) => ({
         key: col.key,
-        name: col.label,
+        label: col.label,
         width: col.width,
-        renderHeaderCell:
-          col.sortable && onSortChange
-            ? () => (
-                <SortableHeaderCell
-                  label={col.label}
-                  order={sort?.key === col.key ? sort.order : null}
-                  onToggle={() => toggleSort(col.key)}
-                  testID={`picker-sort-${col.key}`}
-                />
-              )
-            : undefined,
-        renderCell: ({ row }: { row: TRow }) => (
-          <PressableHighlight
-            accessibilityRole="button"
-            onPress={() => handleSelect(rowIdGetter(row))}
-            style={styles.cell}
-          >
-            {col.renderCell ? (
-              col.renderCell(row)
-            ) : (
-              <Text size="sm" color="zinc-900" numberOfLines={1}>
-                {defaultCellText(row[col.key])}
-              </Text>
-            )}
-          </PressableHighlight>
-        ),
+        align: col.align,
+        sortable: col.sortable && !!onSortChange,
+        renderCell: ({ row }: { row: TRow }) =>
+          col.renderCell ? (
+            col.renderCell(row)
+          ) : (
+            <Text size="sm" color="zinc-900" numberOfLines={1}>
+              {defaultCellText(row[col.key])}
+            </Text>
+          ),
       })),
-    [columns, sort, onSortChange, toggleSort, handleSelect, rowIdGetter],
+    [columns, onSortChange],
   );
 
-  const groups = useMemo<DataGridGroup<TRow>[]>(
-    () => (rows.length > 0 ? [{ value: null, columnKey: "", rows }] : []),
-    [rows],
+  const tableSort = useMemo<TableSort<TRow> | null>(
+    () => (sort ? { key: sort.key, dir: sort.order } : null),
+    [sort],
   );
 
-  const rowColorGetter = useCallback(
+  const rowStyle = useCallback(
     (row: TRow) =>
-      value != null && rowIdGetter(row) === value ? colors.blue["50"] : undefined,
-    [value, rowIdGetter],
+      value != null && String(row[rowKey]) === value ? { backgroundColor: colors.blue["50"] } : undefined,
+    [value, rowKey],
   );
 
   return (
@@ -221,7 +205,7 @@ export function DataGridPicker<TRow extends Record<string, unknown>>(
         ) : null}
 
         <SearchInput
-          testID="data-grid-picker-search"
+          testID="table-picker-search"
           value={searchQuery}
           onChangeText={onSearchChange}
           placeholder={searchPlaceholder}
@@ -243,16 +227,15 @@ export function DataGridPicker<TRow extends Record<string, unknown>>(
         ) : null}
 
         <View style={styles.gridArea}>
-          {groups.length > 0 ? (
-            <DataGrid<TRow>
-              rowIdGetter={rowIdGetter}
-              rowHeight={rowHeight}
-              groups={groups}
-              columns={gridColumns}
-              rowColorGetter={rowColorGetter}
-              frozenColumnCount={0}
-              enableReordering={false}
-              onEndReached={onEndReached}
+          {rows.length > 0 ? (
+            <Table<TRow>
+              columns={tableColumns}
+              rows={rows}
+              rowKey={rowKey}
+              sort={tableSort}
+              onSortChange={onSortChange ? (key) => toggleSort(key as string) : undefined}
+              onRowPress={handleSelect}
+              rowStyle={rowStyle}
             />
           ) : (
             <View style={styles.center}>
@@ -265,12 +248,17 @@ export function DataGridPicker<TRow extends Record<string, unknown>>(
               )}
             </View>
           )}
-          {loading && groups.length > 0 ? (
-            <View style={styles.loadingOverlay} pointerEvents="none">
-              <ActivityIndicator />
-            </View>
-          ) : null}
         </View>
+
+        <Pagination
+          page={page}
+          pageSize={pageSize}
+          rowCount={rows.length}
+          hasMore={hasMore}
+          total={total}
+          loading={loading}
+          onPageChange={onPageChange}
+        />
       </View>
     </Dialog>
   );
@@ -297,26 +285,16 @@ const styles = StyleSheet.create({
   },
   gridArea: {
     flex: 1,
+    minHeight: 0,
     borderWidth: 1,
     borderColor: colors.border,
     borderRadius: 12,
     overflow: "hidden",
   },
-  cell: {
-    flex: 1,
-    height: "100%",
-    justifyContent: "center",
-    paddingHorizontal: 8,
-  },
   center: {
     flex: 1,
     alignItems: "center",
     justifyContent: "center",
     padding: 24,
   },
-  loadingOverlay: {
-    position: "absolute",
-    top: 8,
-    right: 8,
-  },
 });

package/src/table_types.ts

@@ -35,6 +35,11 @@ export interface TableProps<TRow extends Record<string, unknown>> {
    *  parent owns the actual sorting of `rows` — this only drives the indicator. */
   sort?: TableSort<TRow> | null;
   onSortChange?: (key: keyof TRow) => void;
+  /** Click-to-select: pressing a row (except `interactive` cells) calls this —
+   *  e.g. a picker that returns the chosen row. Mutually exclusive with
+   *  `renderDetail` (a row either expands or selects); `renderDetail` wins if
+   *  both are set. Pair with `rowStyle` to highlight the selected row. */
+  onRowPress?: (row: TRow) => void;
   /** Render an inline detail panel, full-width below the row. When set, the
    *  whole row (except `interactive` cells) is click-to-expand. */
   renderDetail?: (row: TRow) => ReactNode;

package/src/grid/sortable_header_cell.tsx

@@ -1,58 +0,0 @@
-import { StyleSheet } from "react-native";
-import { colors } from "../colors";
-import { Text } from "../text";
-import { Icon } from "../icon";
-import { PressableHighlight } from "../pressable_highlight";
-
-export type SortOrder = "asc" | "desc";
-
-export interface SortableHeaderCellProps {
-  label: string;
-  /** Current sort order for THIS column, or null when another (or no) column
-   *  is the sort key. */
-  order: SortOrder | null;
-  /** Toggle this column's sort. The consumer owns sort state and re-queries. */
-  onToggle: () => void;
-  testID?: string;
-}
-
-/**
- * A clickable column header that cycles/toggles sort and shows the direction —
- * drop it into any `DataGrid` column's `renderHeaderCell`. Pure presentation:
- * the consumer holds the sort state and reorders/re-queries the rows. Reusable
- * outside the picker (any sortable grid).
- */
-export function SortableHeaderCell(props: SortableHeaderCellProps) {
-  const { label, order, onToggle, testID } = props;
-  const active = order !== null;
-  return (
-    <PressableHighlight
-      testID={testID}
-      onPress={onToggle}
-      accessibilityRole="button"
-      accessibilityLabel={label}
-      style={styles.cell}
-    >
-      <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-500"} numberOfLines={1}>
-        {label}
-      </Text>
-      <Icon
-        name={order === "asc" ? "chevron-up" : order === "desc" ? "chevron-down" : "chevrons-up-down"}
-        size={14}
-        color={active ? colors.zinc["700"] : colors.zinc["400"]}
-      />
-    </PressableHighlight>
-  );
-}
-
-const styles = StyleSheet.create({
-  cell: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: 4,
-    flex: 1,
-    height: "100%",
-    paddingHorizontal: 8,
-  },
-});