@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-MG4SKWLL.js

@@ -0,0 +1,2587 @@
+import { Checkbox } from './chunk-KNILMM4H.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Picker } from './chunk-MCOZJWPU.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
+import { expandedProps } from './chunk-W23G6JLF.js';
+import { Switch } from './chunk-VFDQAAIW.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { Input } from './chunk-KXLDK6HB.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion, motionTiming } from './chunk-J64KGCGX.js';
+import * as React3 from 'react';
+import { View, Text, Pressable, ScrollView, LayoutAnimation, Animated, FlatList, PanResponder } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { getValue, formatValue, resolveColumns, useGridState, buildRowModel, DENSITY_ROW_PX, rangeRect, parseClipboardMatrix, NUMERIC_TYPES } from '@btndprojects/loam-data-grid-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/data-grid/data-grid-labels.ts
+var DEFAULT_DATA_GRID_LABELS = {
+  searchPlaceholder: (label) => `Search ${label.toLowerCase()}`,
+  searchLabel: (label) => `Search ${label}`,
+  sort: "Sort",
+  filter: "Filter",
+  display: "Display",
+  toolActive: (label, count) => `${label}, ${count} active`,
+  countLine: (shown, total, selected) => `${shown !== total ? `${shown} of ${total} rows` : `${total} rows`}${selected > 0 ? ` \xB7 ${selected} selected` : ""}`,
+  errorTitle: "These rows could not be loaded",
+  forbiddenTitle: "You do not have access to these rows",
+  offlineTitle: "You are offline",
+  offlineBody: "The rows below may be out of date until the connection is back.",
+  retry: "Try again",
+  loadingRows: "Loading rows",
+  noResultsTitle: "No rows match",
+  noResultsBody: "Clear a filter or widen the search to see rows again.",
+  clearFilters: "Clear filters",
+  emptyTitle: "Nothing here yet",
+  sortedAscending: (column) => `Sorted by ${column}, ascending.`,
+  sortedDescending: (column) => `Sorted by ${column}, descending.`,
+  sortingCleared: (column) => `Sorting cleared on ${column}.`,
+  selectRow: (name) => `Select ${name}`,
+  openRecordHint: "Double tap to see the whole record",
+  headerName: (header, unit, sorted) => `${header}${unit ? `, ${unit}` : ""}` + (sorted ? `, sorted ${sorted === "desc" ? "descending" : "ascending"}` : ""),
+  sortHint: "Double tap to change the sort",
+  groupName: (field, key, count) => `${field ? `${field}: ` : ""}${key}, ${count} rows`,
+  groupAggregate: (header, fn, value) => `${header} ${fn.toLowerCase()} ${value}`,
+  rowSummary: (fields) => fields.map((f) => `${f.header}: ${f.value}`).join(", "),
+  moreFields: (count) => `and ${count} more`,
+  footerCell: (header, fn) => `${header} \xB7 ${fn.toLowerCase()}`,
+  yes: "Yes",
+  no: "No",
+  durationHours: (n) => `${n}h`,
+  emptyCell: "\u2014",
+  scope: "Scope",
+  filteredRows: (count) => `${count} filtered rows`,
+  groupedBy: "Grouped by",
+  aggregations: {
+    sum: "Sum",
+    avg: "Average",
+    min: "Min",
+    max: "Max",
+    count: "Count",
+    countDistinct: "Distinct",
+    median: "Median"
+  },
+  selectedCount: (count) => `${count} selected`,
+  clearSelection: "Clear selection",
+  noSortable: "No column in this grid can be sorted.",
+  ascending: "ascending",
+  descending: "descending",
+  notSorted: "not sorted",
+  sortCycleHint: "Double tap to cycle ascending, descending, off",
+  clearSorting: "Clear sorting",
+  match: "Match",
+  matchAll: "All",
+  matchAny: "Any",
+  removeFilter: (column) => `Remove the filter on ${column}`,
+  columnTitle: "Column",
+  filterColumn: (column) => `Filter column, currently ${column}`,
+  conditionTitle: "Condition",
+  conditionCurrent: (operator) => `Condition, currently ${operator}`,
+  operators: {
+    contains: "contains",
+    notContains: "does not contain",
+    equals: "is exactly",
+    startsWith: "starts with",
+    endsWith: "ends with",
+    isEmpty: "is empty",
+    isNotEmpty: "is not empty",
+    is: "is",
+    isNot: "is not",
+    isAnyOf: "is any of",
+    eq: "is",
+    neq: "is not",
+    gt: "is more than",
+    gte: "is at least",
+    lt: "is less than",
+    lte: "is at most",
+    between: "is between",
+    before: "is before",
+    after: "is after",
+    hasAny: "has any of",
+    hasAll: "has all of"
+  },
+  valuePlaceholder: "Value",
+  valueLabel: (column) => `Value for the filter on ${column}`,
+  upperPlaceholder: "and",
+  upperLabel: (column) => `Upper bound for the filter on ${column}`,
+  addCondition: "Add a condition",
+  clearAllFilters: "Clear all filters",
+  rowHeight: "Row height",
+  densityCompact: "Compact",
+  densityStandard: "Standard",
+  densityComfortable: "Roomy",
+  rowHeightNote: "Every row opens a record, so the tiers are floored at the tap minimum \u2014 on a narrow screen compact and standard are the same height.",
+  shadeRows: "Shade alternating rows",
+  cardsSet: "This grid is set to cards.",
+  cardsNarrow: 'This grid is showing cards because its container is narrow. Widen it, or set layout="table".',
+  groupBy: "Group by",
+  noGrouping: "No grouping",
+  none: "None",
+  groupByColumn: (column) => `Group by ${column}`,
+  columns: "Columns",
+  lastColumnHint: "The last visible column cannot be hidden",
+  headerWithUnit: (header, unit) => `${header} (${unit})`,
+  copy: "Copy",
+  paste: "Paste",
+  fill: "Fill",
+  clear: "Clear",
+  rangeSummary: (rows, cols, cells) => `${rows} ${rows === 1 ? "row" : "rows"} by ${cols} ${cols === 1 ? "column" : "columns"}, ${cells} ${cells === 1 ? "cell" : "cells"}`,
+  copiedCells: (cells) => `Copied ${cells} ${cells === 1 ? "cell" : "cells"}`,
+  filledCells: (cells, rejected) => `Filled ${cells} ${cells === 1 ? "cell" : "cells"}${rejected ? ` \xB7 ${rejected} rejected` : ""}`,
+  clearedCells: (cells) => `Cleared ${cells} ${cells === 1 ? "cell" : "cells"}`,
+  pastedCells: (cells, rejected) => `Pasted ${cells} ${cells === 1 ? "cell" : "cells"}${rejected ? ` \xB7 ${rejected} rejected` : ""}`,
+  rangeStartHandle: "Range start",
+  rangeEndHandle: "Range end",
+  rangeHandleHint: "Drag to change the range",
+  cellName: (header, value) => `${header}: ${value}`,
+  saveFailed: "Could not save",
+  datePlaceholder: "YYYY-MM-DD"
+};
+var NULLARY = ["isEmpty", "isNotEmpty"];
+function SortSheet({
+  open,
+  onClose,
+  columns,
+  sorting,
+  onToggle,
+  onClear,
+  labels: labelsProp
+}) {
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("data-grid");
+  const sortable = columns.filter((c) => c.sortable);
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: labels.sort, children: /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+    sortable.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: labels.noSortable }) : null,
+    sortable.map((column) => {
+      const at = sorting.findIndex((s) => s.id === column.id);
+      const spec = at >= 0 ? sorting[at] : void 0;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "button",
+          accessibilityLabel: column.header,
+          accessibilityValue: {
+            text: spec ? spec.desc ? labels.descending : labels.ascending : labels.notSorted
+          },
+          accessibilityHint: labels.sortCycleHint,
+          onPress: () => onToggle(column.id),
+          style: ({ pressed }) => [styles.row, pressed && styles.pressed],
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: column.header }),
+            spec ? /* @__PURE__ */ jsxs(View, { style: styles.rowTrail, children: [
+              sorting.length > 1 ? /* @__PURE__ */ jsx(Text, { style: styles.rank, children: at + 1 }) : null,
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: spec.desc ? "arrow-down" : "arrow-up",
+                  size: theme.icon.sm,
+                  color: theme.color.accentOnSoft
+                }
+              )
+            ] }) : null
+          ]
+        },
+        column.id
+      );
+    }),
+    sorting.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", onPress: onClear, leadingIcon: "x", children: labels.clearSorting }) : null
+  ] }) });
+}
+function FilterSheet({
+  open,
+  onClose,
+  columns,
+  rows,
+  ctx,
+  filters,
+  logic,
+  onChange,
+  labels: labelsProp
+}) {
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const filterable = columns.filter((c) => c.filterable);
+  const update = (index, patch) => {
+    const next = filters.map((f, i) => i === index ? { ...f, ...patch } : f);
+    onChange(next, logic);
+  };
+  const remove = (index) => {
+    onChange(
+      filters.filter((_, i) => i !== index),
+      logic
+    );
+  };
+  const add = () => {
+    const column = filterable[0];
+    if (!column) return;
+    onChange([...filters, { id: column.id, op: column.operators[0], value: "" }], logic);
+  };
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: labels.filter, detents: ["half", "full"], children: /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.body, children: [
+    filters.length > 1 ? /* @__PURE__ */ jsxs(View, { style: styles.logicRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.hint, children: labels.match }),
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          accessibilityLabel: labels.match,
+          size: "sm",
+          value: logic,
+          onValueChange: (next) => onChange([...filters], next),
+          items: [
+            { value: "and", label: labels.matchAll },
+            { value: "or", label: labels.matchAny }
+          ]
+        }
+      )
+    ] }) : null,
+    filters.map((filter, index) => {
+      const column = columns.find((c) => c.id === filter.id);
+      if (!column) return null;
+      const operators = column.operators;
+      const nullary = NULLARY.includes(filter.op);
+      const values = column.type === "enum" ? enumValues(column, rows, ctx) : null;
+      return /* @__PURE__ */ jsxs(View, { style: styles.condition, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.conditionHead, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: column.header }),
+          /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityLabel: labels.removeFilter(column.header),
+              onPress: () => remove(index),
+              style: ({ pressed }) => [styles.iconButton, pressed && styles.pressed],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Picker,
+          {
+            title: labels.columnTitle,
+            accessibilityLabel: labels.filterColumn(column.header),
+            value: filter.id,
+            items: filterable.map((c) => ({ value: c.id, label: c.header })),
+            onValueChange: (id) => {
+              const next = columns.find((c) => c.id === id);
+              update(index, { id, op: next?.operators[0] ?? "contains", value: "" });
+            },
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Picker,
+          {
+            title: labels.conditionTitle,
+            accessibilityLabel: labels.conditionCurrent(labels.operators[filter.op]),
+            value: filter.op,
+            items: operators.map((op) => ({ value: op, label: labels.operators[op] })),
+            onValueChange: (op) => update(index, { op }),
+            size: "sm"
+          }
+        ),
+        nullary ? null : values ? /* @__PURE__ */ jsx(View, { style: styles.chips, children: values.map((value) => {
+          const active = String(filter.value ?? "") === value;
+          return /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "sm",
+              selectable: true,
+              selected: active,
+              onSelectedChange: () => update(index, { value: active ? "" : value }),
+              children: value
+            },
+            value
+          );
+        }) }) : /* @__PURE__ */ jsxs(View, { style: styles.operands, children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "sm",
+              value: String(filter.value ?? ""),
+              onChangeText: (text) => update(index, { value: text }),
+              placeholder: labels.valuePlaceholder,
+              accessibilityLabel: labels.valueLabel(column.header),
+              style: styles.operand
+            }
+          ),
+          filter.op === "between" ? /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "sm",
+              value: String(filter.value2 ?? ""),
+              onChangeText: (text) => update(index, { value2: text }),
+              placeholder: labels.upperPlaceholder,
+              accessibilityLabel: labels.upperLabel(column.header),
+              style: styles.operand
+            }
+          ) : null
+        ] })
+      ] }, `${filter.id}-${index}`);
+    }),
+    /* @__PURE__ */ jsx(Button, { variant: "tonal", leadingIcon: "plus", onPress: add, fullWidth: true, children: labels.addCondition }),
+    filters.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", leadingIcon: "x", onPress: () => onChange([], logic), fullWidth: true, children: labels.clearAllFilters }) : null
+  ] }) });
+}
+function enumValues(column, rows, ctx) {
+  if (column.options?.length) return [...column.options];
+  const seen = /* @__PURE__ */ new Set();
+  for (const row of rows) {
+    const value = getValue(ctx, row, column.id);
+    if (value == null || value === "") continue;
+    seen.add(String(value));
+    if (seen.size >= 24) break;
+  }
+  return [...seen].sort();
+}
+function DisplaySheet({
+  open,
+  onClose,
+  columns,
+  state,
+  layout,
+  table,
+  onSetState,
+  labels: labelsProp
+}) {
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
+  const { styles } = useStyles(sheet);
+  const groupable = columns.filter((c) => c.groupable);
+  const visible = state.columnOrder.filter((id) => state.columnVisibility[id] !== false);
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: labels.display, detents: ["half", "full"], children: /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.body, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.section, children: labels.rowHeight }),
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        accessibilityLabel: labels.rowHeight,
+        value: state.density,
+        onValueChange: (next) => onSetState({ density: next }, "density"),
+        items: [
+          { value: "compact", label: labels.densityCompact },
+          { value: "standard", label: labels.densityStandard },
+          { value: "comfortable", label: labels.densityComfortable }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.hint, children: labels.rowHeightNote }),
+    table ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "checkbox",
+        accessibilityState: { checked: state.zebra },
+        "aria-checked": state.zebra,
+        accessibilityLabel: labels.shadeRows,
+        onPress: () => onSetState({ zebra: !state.zebra }, "display"),
+        style: ({ pressed }) => [styles.row, pressed && styles.pressed],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: labels.shadeRows }),
+          /* @__PURE__ */ jsx(StateBox, { on: state.zebra })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(Text, { style: styles.hint, children: layout === "cards" ? labels.cardsSet : labels.cardsNarrow }),
+    groupable.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.section, children: labels.groupBy }),
+      /* @__PURE__ */ jsxs(View, { style: styles.chips, children: [
+        /* @__PURE__ */ jsx(
+          Chip,
+          {
+            size: "sm",
+            selectable: true,
+            selected: state.grouping.length === 0,
+            onSelectedChange: () => onSetState({ grouping: [] }, "group"),
+            accessibilityLabel: labels.noGrouping,
+            children: labels.none
+          }
+        ),
+        groupable.map((column) => {
+          const active = state.grouping[0] === column.id;
+          return /* @__PURE__ */ jsx(
+            Chip,
+            {
+              size: "sm",
+              selectable: true,
+              selected: active,
+              onSelectedChange: () => onSetState({ grouping: active ? [] : [column.id] }, "group"),
+              accessibilityLabel: labels.groupByColumn(column.header),
+              children: column.header
+            },
+            column.id
+          );
+        })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(Text, { style: styles.section, children: labels.columns }),
+    columns.map((column) => {
+      const on = state.columnVisibility[column.id] !== false;
+      const last = on && visible.length === 1;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          accessibilityRole: "checkbox",
+          accessibilityState: { checked: on, disabled: !column.hideable || last },
+          "aria-checked": on,
+          accessibilityLabel: column.header,
+          accessibilityHint: last ? labels.lastColumnHint : void 0,
+          disabled: !column.hideable || last,
+          onPress: () => onSetState(
+            { columnVisibility: { ...state.columnVisibility, [column.id]: !on } },
+            "visibility"
+          ),
+          style: ({ pressed }) => [
+            styles.row,
+            (!column.hideable || last) && styles.rowDisabled,
+            pressed && styles.pressed
+          ],
+          children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: column.header }),
+            /* @__PURE__ */ jsx(StateBox, { on, disabled: !column.hideable || last })
+          ]
+        },
+        column.id
+      );
+    })
+  ] }) });
+}
+function StateBox({ on, disabled }) {
+  return /* @__PURE__ */ jsx(View, { pointerEvents: "none", ...{ "aria-hidden": true }, children: /* @__PURE__ */ jsx(Checkbox, { checked: on, disabled, size: "sm" }) });
+}
+var NUMERIC = ["number", "currency", "percent", "rating", "duration"];
+function canEdit(column, row) {
+  const e = column.editable;
+  return typeof e === "function" ? e(row) : e === true;
+}
+function coerce(column, raw) {
+  if (NUMERIC.includes(column.type)) {
+    const n = Number(raw.replace(/[^0-9.eE+-]/g, ""));
+    return raw.trim() === "" ? null : Number.isFinite(n) ? n : null;
+  }
+  if (column.type === "date") {
+    if (!raw) return null;
+    const t = (/* @__PURE__ */ new Date(`${raw}T00:00:00`)).getTime();
+    return Number.isNaN(t) ? null : t;
+  }
+  if (column.type === "tags") {
+    return raw.split(/[,\n]/).map((v) => v.trim()).filter(Boolean);
+  }
+  return raw;
+}
+function toField(column, value) {
+  if (value == null) return "";
+  if (column.type === "date") {
+    const d = new Date(Number(value));
+    return Number.isNaN(d.getTime()) ? "" : d.toISOString().slice(0, 10);
+  }
+  if (column.type === "tags") return Array.isArray(value) ? value.join(", ") : String(value);
+  return String(value);
+}
+function same(a, b) {
+  return Array.isArray(a) && Array.isArray(b) ? a.length === b.length && a.every((v, i) => v === b[i]) : Object.is(a, b);
+}
+function DetailField({
+  row,
+  column,
+  value,
+  onCommit,
+  motion,
+  labels
+}) {
+  const theme = useLoamTheme("data-grid");
+  const { styles } = useStyles(sheet);
+  const level = useResolvedMotion(motion, "data-grid");
+  const [draft, setDraft] = React3.useState(() => toField(column, value));
+  const [error, setError] = React3.useState(null);
+  const [pending, setPending] = React3.useState(false);
+  const wash = React3.useRef(new Animated.Value(0)).current;
+  React3.useEffect(() => setDraft(toField(column, value)), [column, value]);
+  const commit = async (next) => {
+    if (same(next, value)) {
+      setError(null);
+      return;
+    }
+    const invalid = column.validate?.(next, row) ?? null;
+    if (invalid) {
+      setError(invalid);
+      haptics.notify("error");
+      return;
+    }
+    setError(null);
+    setPending(true);
+    try {
+      await onCommit(column, next, value);
+      haptics.notify("success");
+      if (level !== "none") {
+        wash.setValue(1);
+        Animated.timing(wash, {
+          toValue: 0,
+          // Full motion lets the wash linger on the collapse token; reduced
+          // keeps the short dissolve.
+          ...level === "full" ? { duration: theme.motion.collapse.duration } : motionTiming(level),
+          useNativeDriver: false
+        }).start();
+      }
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : labels.saveFailed);
+      haptics.notify("error");
+    } finally {
+      setPending(false);
+    }
+  };
+  const label = column.headerUnit ? labels.headerWithUnit(column.header, column.headerUnit) : column.header;
+  const field = column.type !== "boolean" && !(column.type === "enum" && column.options?.length);
+  let control;
+  if (column.type === "boolean") {
+    control = /* @__PURE__ */ jsx(
+      Switch,
+      {
+        value: value === true,
+        pending,
+        accessibilityLabel: label,
+        onValueChange: (on) => void commit(on),
+        motion
+      }
+    );
+  } else if (column.type === "enum" && column.options?.length) {
+    control = /* @__PURE__ */ jsx(View, { style: styles.chips, role: "radiogroup", accessibilityLabel: label, children: column.options.map((option) => {
+      const on = value === option;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          role: "radio",
+          "aria-checked": on,
+          accessibilityState: { checked: on },
+          onPress: () => void commit(option),
+          style: ({ pressed }) => [styles.chip, on && styles.chipOn, pressed && styles.pressed],
+          children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, on && styles.chipTextOn], children: option })
+        },
+        option
+      );
+    }) });
+  } else {
+    control = /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: draft,
+        onChangeText: (text) => {
+          setDraft(text);
+          if (error) setError(null);
+        },
+        onSubmitEditing: () => void commit(coerce(column, draft)),
+        onBlur: () => void commit(coerce(column, draft)),
+        accessibilityLabel: label,
+        keyboardType: NUMERIC.includes(column.type) ? "decimal-pad" : "default",
+        placeholder: column.type === "date" ? labels.datePlaceholder : void 0,
+        returnKeyType: "done",
+        loading: pending,
+        error: error != null,
+        message: error ?? void 0,
+        motion,
+        testID: `detail-field-${column.id}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      style: [
+        styles.detailRow,
+        styles.detailEdit,
+        {
+          backgroundColor: wash.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["transparent", styles.washOn.backgroundColor]
+          }),
+          borderColor: wash.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["transparent", styles.washOn.borderColor]
+          })
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.detailLabel, children: label }),
+        control,
+        error && !field ? /* @__PURE__ */ jsx(Text, { style: styles.detailError, role: "alert", children: error }) : null
+      ]
+    }
+  );
+}
+function DetailSheet({
+  row,
+  columns,
+  ctx,
+  title,
+  onClose,
+  onCommit,
+  motion = "full",
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
+  if (!row) return null;
+  return /* @__PURE__ */ jsx(Sheet, { open: true, onClose, title, detents: ["half", "full"], children: /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.body, children: columns.map(
+    (column) => onCommit && canEdit(column, row) ? /* @__PURE__ */ jsx(
+      DetailField,
+      {
+        row,
+        column,
+        value: getValue(ctx, row, column.id),
+        onCommit,
+        motion,
+        labels
+      },
+      column.id
+    ) : /* @__PURE__ */ jsxs(View, { style: styles.detailRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.detailLabel, children: column.headerUnit ? labels.headerWithUnit(column.header, column.headerUnit) : column.header }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.detailValue, column.mono && styles.mono], children: formatValue(ctx, column, getValue(ctx, row, column.id), row) })
+    ] }, column.id)
+  ) }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  body: { gap: theme.space.s3, paddingBottom: theme.space.s4 },
+  section: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text2,
+    marginTop: theme.space.s2
+  },
+  hint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.s3,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s2,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface2
+  },
+  rowDisabled: { opacity: theme.state.disabledOpacity },
+  rowLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  rowTrail: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  rank: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.accentOnSoft
+  },
+  logicRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  condition: {
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  conditionHead: { flexDirection: "row", alignItems: "center", gap: theme.space.s2 },
+  iconButton: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  operands: { flexDirection: "row", gap: theme.space.s2 },
+  operand: { flex: 1 },
+  chips: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s1 },
+  // The record sheet's enum radios: Chip sm metrics, drawn here because a
+  // radio group needs `role="radio"` on each one. On keeps the label weight.
+  chip: {
+    minHeight: theme.ctl.sm,
+    justifyContent: "center",
+    paddingHorizontal: theme.ctl.px.sm,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  chipOn: {
+    borderColor: theme.edge.accent,
+    backgroundColor: theme.color.accentSoft
+  },
+  chipText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    color: theme.color.text
+  },
+  chipTextOn: { color: theme.color.accentOnSoft },
+  detailRow: {
+    gap: theme.space[2],
+    paddingBottom: theme.space.s2,
+    borderBottomWidth: theme.borderWidth.hair,
+    borderBottomColor: theme.color.border
+  },
+  detailLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  detailValue: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text
+  },
+  detailEdit: {
+    marginHorizontal: -theme.space.s2,
+    paddingHorizontal: theme.space.s2,
+    paddingTop: theme.space.s1,
+    borderRadius: theme.radius.md,
+    // Always present (transparent at rest) so the wash's edge never moves layout.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  // The wash collapses to the surface under `contrast: 'more'`; the accent edge
+  // stops being transparent there and keeps the flash visible.
+  washOn: {
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  detailError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
+  mono: { fontFamily: theme.font.mono },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+function isEditable(column, row) {
+  const e = column.editable;
+  return typeof e === "function" ? e(row) : e === true;
+}
+function coerce2(column, row, raw) {
+  let value = raw;
+  if (typeof raw === "string") {
+    if (NUMERIC_TYPES.includes(column.type)) {
+      const n = Number(raw.replace(/[^0-9.eE+-]/g, ""));
+      if (!Number.isFinite(n)) return null;
+      value = n;
+    } else if (column.type === "date") {
+      const time = new Date(raw).getTime();
+      if (Number.isNaN(time)) return null;
+      value = time;
+    } else if (column.type === "boolean") {
+      value = /^(true|yes|1|y)$/i.test(raw.trim());
+    } else if (column.type === "tags") {
+      value = raw.split(/[,;]/).map((s) => s.trim()).filter(Boolean);
+    }
+  }
+  return column.validate?.(value, row) ? null : { value };
+}
+function useNativeRange(o) {
+  const {
+    enabled,
+    nodes,
+    columns,
+    ctx,
+    range,
+    setRange,
+    onCellEditCommit,
+    clipboard,
+    labels,
+    announce
+  } = o;
+  const [touched, setTouched] = React3.useState(false);
+  const nodeIndex = React3.useMemo(() => new Map(nodes.map((n, i) => [n.id, i])), [nodes]);
+  const colIndex = React3.useMemo(() => new Map(columns.map((c, i) => [c.id, i])), [columns]);
+  const rect = enabled ? rangeRect(range, nodeIndex, colIndex) : null;
+  const cellAt = (row, col) => {
+    const node = nodes[Math.max(0, Math.min(nodes.length - 1, row))];
+    const column = columns[Math.max(0, Math.min(columns.length - 1, col))];
+    return node && column ? { rowId: node.id, colId: column.id } : null;
+  };
+  const summary = (r) => {
+    const rows = r.r1 - r.r0 + 1;
+    const cols = r.c1 - r.c0 + 1;
+    return labels.rangeSummary(rows, cols, rows * cols);
+  };
+  const press = (row, col) => {
+    const cell = cellAt(row, col);
+    if (!cell) return;
+    setTouched(false);
+    setRange({ anchor: cell, focus: cell });
+  };
+  const longPress = (row, col) => {
+    const cell = cellAt(row, col);
+    if (!cell) return;
+    setTouched(true);
+    setRange({ anchor: cell, focus: cell });
+    announce(labels.rangeSummary(1, 1, 1));
+  };
+  const extend = (edge, row, col) => {
+    if (!rect) return;
+    const fixed = edge === "start" ? cellAt(rect.r1, rect.c1) : cellAt(rect.r0, rect.c0);
+    const moving = cellAt(row, col);
+    if (!fixed || !moving) return;
+    if (range && range.anchor.rowId === fixed.rowId && range.anchor.colId === fixed.colId && range.focus.rowId === moving.rowId && range.focus.colId === moving.colId)
+      return;
+    setRange({ anchor: fixed, focus: moving });
+  };
+  const settle = () => {
+    if (rect) announce(summary(rect));
+  };
+  const cells = (r) => {
+    const out = [];
+    for (let i = r.r0; i <= r.r1; i++) {
+      const node = nodes[i];
+      if (!node || node.kind !== "leaf") continue;
+      for (let c = r.c0; c <= r.c1; c++) {
+        const column = columns[c];
+        if (column) out.push({ node, column, dr: i - r.r0, dc: c - r.c0 });
+      }
+    }
+    return out;
+  };
+  const write = (list) => {
+    for (const { node, column, value } of list) {
+      void onCellEditCommit?.({
+        rowId: node.id,
+        row: node.row,
+        colId: column.id,
+        value,
+        previous: getValue(ctx, node.row, column.id)
+      });
+    }
+  };
+  const done = (message) => {
+    setTouched(false);
+    announce(message);
+  };
+  const copy = () => {
+    if (!rect) return;
+    const lines = [];
+    for (const { node, column, dr } of cells(rect)) {
+      (lines[dr] ??= []).push(
+        String(formatValue(ctx, column, getValue(ctx, node.row, column.id), node.row))
+      );
+    }
+    clipboard?.setString(
+      lines.filter(Boolean).map((l) => l.join("	")).join("\n")
+    );
+    done(labels.copiedCells(lines.reduce((n, l) => n + (l?.length ?? 0), 0)));
+  };
+  const editing = !!onCellEditCommit;
+  const paste = async () => {
+    if (!rect || !clipboard) return;
+    const matrix = parseClipboardMatrix(String(await clipboard.getString()));
+    const out = [];
+    let rejected = 0;
+    matrix.forEach((line, dr) => {
+      const node = nodes[rect.r0 + dr];
+      if (!node || node.kind !== "leaf") return;
+      line.forEach((raw, dc) => {
+        const column = columns[rect.c0 + dc];
+        const ok = column && isEditable(column, node.row) ? coerce2(column, node.row, raw) : null;
+        if (!column || !ok) rejected += 1;
+        else out.push({ node, column, value: ok.value });
+      });
+    });
+    write(out);
+    done(labels.pastedCells(out.length, rejected));
+  };
+  const fill = () => {
+    if (!rect) return;
+    const all = cells(rect);
+    const source = new Map(all.filter((c) => c.dr === all[0]?.dr).map((c) => [c.dc, c]));
+    const out = [];
+    let rejected = 0;
+    for (const cell of all) {
+      const from = source.get(cell.dc);
+      if (!from || cell.dr === from.dr) continue;
+      const raw = getValue(ctx, from.node.row, from.column.id);
+      const ok = isEditable(cell.column, cell.node.row) ? coerce2(cell.column, cell.node.row, raw) : null;
+      if (!ok) rejected += 1;
+      else out.push({ node: cell.node, column: cell.column, value: ok.value });
+    }
+    write(out);
+    done(labels.filledCells(out.length, rejected));
+  };
+  const clear = () => {
+    if (!rect) return;
+    const out = cells(rect).filter(
+      ({ node, column }) => isEditable(column, node.row) && getValue(ctx, node.row, column.id) != null
+    ).map(({ node, column }) => ({ node, column, value: null }));
+    write(out);
+    done(labels.clearedCells(out.length));
+  };
+  return {
+    rect,
+    anchor: rect ? range.anchor : null,
+    touched: touched && !!rect,
+    press,
+    longPress,
+    extend,
+    settle,
+    copy,
+    paste: editing && clipboard ? () => void paste() : null,
+    fill: editing && rect && rect.r1 > rect.r0 ? fill : null,
+    clear: editing ? clear : null
+  };
+}
+function colAt(g, x) {
+  for (let i = g.lefts.length - 1; i >= 0; i--) if (x >= g.lefts[i]) return i;
+  return 0;
+}
+function Handle({
+  x,
+  y,
+  edge,
+  geometry,
+  onMove,
+  onEnd,
+  label,
+  hint
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme("data-grid");
+  const hit = isAndroidIdiom(theme) ? theme.space[48] : theme.tapMin;
+  const latest = React3.useRef({ x, y, geometry, onMove, onEnd });
+  latest.current = { x, y, geometry, onMove, onEnd };
+  const origin = React3.useRef({ x: 0, y: 0 });
+  const responder = React3.useMemo(
+    () => (
+      // eslint-disable-next-line loam/no-pan-responder -- a range handle is a free 2-D drag; no RN gesture covers it
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+          origin.current = { x: latest.current.x, y: latest.current.y };
+        },
+        onPanResponderMove: (_, g) => {
+          const { geometry: geo } = latest.current;
+          const inset = edge === "start" ? 1 : -1;
+          const px = origin.current.x + g.dx + inset;
+          const py = origin.current.y + g.dy + inset;
+          const row = Math.max(0, Math.min(geo.rows - 1, Math.floor(py / geo.rowHeight)));
+          latest.current.onMove(row, colAt(geo, px));
+        },
+        onPanResponderRelease: () => latest.current.onEnd(),
+        onPanResponderTerminate: () => latest.current.onEnd()
+      })
+    ),
+    [edge]
+  );
+  const step = (by) => {
+    const { geometry: geo } = latest.current;
+    const row = Math.floor((y + (edge === "start" ? 1 : -1)) / geo.rowHeight) + by;
+    onMove(Math.max(0, Math.min(geo.rows - 1, row)), colAt(geo, x + (edge === "start" ? 1 : -1)));
+    onEnd();
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...responder.panHandlers,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: label,
+      accessibilityHint: hint,
+      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+      onAccessibilityAction: (e) => step(e.nativeEvent.actionName === "increment" ? 1 : -1),
+      testID: `range-handle-${edge}`,
+      style: [styles.handleHit, { width: hit, height: hit, left: x - hit / 2, top: y - hit / 2 }],
+      children: /* @__PURE__ */ jsx(View, { style: styles.handle })
+    }
+  );
+}
+function RangeOverlay({
+  range,
+  geometry,
+  scrollY,
+  top,
+  labels
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme("data-grid");
+  const android = isAndroidIdiom(theme);
+  const { rect } = range;
+  if (!rect) return null;
+  const x0 = geometry.lefts[rect.c0] ?? 0;
+  const x1 = (geometry.lefts[rect.c1] ?? 0) + (geometry.widths[rect.c1] ?? 0);
+  const y0 = rect.r0 * geometry.rowHeight;
+  const y1 = (rect.r1 + 1) * geometry.rowHeight;
+  const items = [
+    { key: "copy", label: labels.copy, run: range.copy },
+    { key: "paste", label: labels.paste, run: range.paste },
+    { key: "fill", label: labels.fill, run: range.fill },
+    { key: "clear", label: labels.clear, run: range.clear }
+  ].filter((i) => !!i.run);
+  const menuH = android ? theme.space[48] : theme.tapMin;
+  const menuTop = y0 >= menuH + theme.space.s2 ? y0 - menuH - theme.space.s2 : y1 + theme.space.s2;
+  return /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: [styles.layer, { top }], children: /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      pointerEvents: "box-none",
+      style: [styles.fill, { transform: [{ translateY: Animated.multiply(scrollY, -1) }] }],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            pointerEvents: "none",
+            testID: "range-edge",
+            style: [styles.edge, { left: x0, top: y0, width: x1 - x0, height: y1 - y0 }]
+          }
+        ),
+        range.touched ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              x: x0,
+              y: y0,
+              edge: "start",
+              geometry,
+              onMove: (r, c) => range.extend("start", r, c),
+              onEnd: range.settle,
+              label: labels.rangeStartHandle,
+              hint: labels.rangeHandleHint
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              x: x1,
+              y: y1,
+              edge: "end",
+              geometry,
+              onMove: (r, c) => range.extend("end", r, c),
+              onEnd: range.settle,
+              label: labels.rangeEndHandle,
+              hint: labels.rangeHandleHint
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              role: "menu",
+              style: [
+                styles.menu,
+                android && styles.menuAndroid,
+                {
+                  top: menuTop,
+                  left: Math.max(0, (x0 + x1) / 2 - items.length * theme.space[72] / 2)
+                }
+              ],
+              children: items.map((item, i) => /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  role: "menuitem",
+                  accessibilityRole: "button",
+                  accessibilityLabel: item.label,
+                  onPress: item.run,
+                  style: ({ pressed }) => [
+                    styles.menuItem,
+                    { minHeight: menuH },
+                    i > 0 && !android && styles.menuSeparator,
+                    pressed && styles.pressed
+                  ],
+                  children: /* @__PURE__ */ jsx(Text, { style: [styles.menuText, android && styles.menuTextAndroid], children: item.label })
+                },
+                item.key
+              ))
+            }
+          )
+        ] }) : null
+      ]
+    }
+  ) });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  layer: { position: "absolute", start: 0, end: 0, bottom: 0, overflow: "hidden" },
+  fill: { position: "absolute", top: 0, start: 0, end: 0, bottom: 0 },
+  edge: {
+    position: "absolute",
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.focus.ringColor
+  },
+  handleHit: { position: "absolute", alignItems: "center", justifyContent: "center" },
+  handle: {
+    width: theme.space.s3,
+    height: theme.space.s3,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.color.surface
+  },
+  menu: {
+    position: "absolute",
+    flexDirection: "row",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.hair,
+    borderColor: theme.color.border,
+    overflow: "hidden",
+    ...theme.shadow.md
+  },
+  menuAndroid: { borderRadius: theme.radius.sm },
+  menuItem: { justifyContent: "center", paddingHorizontal: theme.space.s3 },
+  menuSeparator: { borderStartWidth: theme.borderWidth.hair, borderStartColor: theme.color.border },
+  menuText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  menuTextAndroid: { fontWeight: theme.fontWeight.medium },
+  pressed: { backgroundColor: theme.state.pressed }
+}));
+var TABLE_MIN_WIDTH = 680;
+var SKELETON_ROWS = 6;
+var CARD_FIELD_LIMIT = 4;
+function DataGrid({
+  rows,
+  columns,
+  label,
+  getRowId,
+  primaryColumn,
+  layout = "auto",
+  density,
+  size,
+  initialState,
+  state: controlled,
+  onStateChange,
+  gridId,
+  storage,
+  selectionMode: selectionProp = "none",
+  clipboard,
+  bulkActions,
+  onRowPress,
+  onCellEditCommit,
+  searchable = true,
+  status = "ready",
+  onRetry,
+  locale: localeProp,
+  labels: labelsProp,
+  currency = "USD",
+  now,
+  style,
+  motion = "full"
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  const level = useResolvedMotion(motion, "data-grid");
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
+  const providerLocale = useLoamLocale();
+  const locale = localeProp ?? providerLocale;
+  const resolved = React3.useMemo(() => resolveColumns(columns), [columns]);
+  const identify = React3.useMemo(
+    () => getRowId ?? ((row) => String(row.id)),
+    [getRowId]
+  );
+  const seed = React3.useMemo(
+    () => density ? { ...initialState, density } : initialState ?? {},
+    // `density` is a starting tier, not a controlled slice — a caller that wants
+    // to own it passes `state={{ density }}`, which is the one write path.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const { state, setState: writeState } = useGridState({
+    columns: resolved,
+    initialState: seed,
+    state: controlled,
+    onStateChange,
+    gridId,
+    storage
+  });
+  const setState = React3.useCallback(
+    (...args) => {
+      if (args[1] === "sort" && level === "full") {
+        const ds = theme.spring.ds;
+        LayoutAnimation.configureNext({
+          duration: ds.duration,
+          update: { type: "spring", springDamping: ds.dampingRatio }
+        });
+      }
+      return writeState(...args);
+    },
+    [writeState, level, theme.spring.ds]
+  );
+  const visibleColumns = React3.useMemo(
+    () => state.columnOrder.map((id) => resolved.find((c) => c.id === id)).filter((c) => !!c && state.columnVisibility[c.id] !== false),
+    [resolved, state.columnOrder, state.columnVisibility]
+  );
+  const ctx = React3.useMemo(
+    () => ({
+      columnsById: new Map(resolved.map((c) => [c.id, c])),
+      getRowId: identify,
+      formulas: state.formulas,
+      locale,
+      currency,
+      now: now ?? Date.now(),
+      messages: {
+        yes: labels.yes,
+        no: labels.no,
+        emptyCell: labels.emptyCell,
+        duration: labels.durationHours
+      }
+    }),
+    [resolved, identify, state.formulas, locale, currency, now, labels]
+  );
+  const model = React3.useMemo(
+    () => buildRowModel({
+      rows,
+      visibleColumns,
+      state,
+      ctx,
+      // The native surface has no inline detail row — a record opens in a
+      // sheet, which is the platform's own answer to "show me all of it".
+      hasDetail: () => false
+    }),
+    [rows, visibleColumns, state, ctx]
+  );
+  const [width, setWidth] = React3.useState(0);
+  const onLayout = (event) => {
+    const next = event.nativeEvent.layout.width;
+    if (next > 0 && Math.abs(next - width) > 1) setWidth(next);
+  };
+  const table = layout === "table" || layout === "auto" && width >= TABLE_MIN_WIDTH;
+  const rangeMode = selectionProp === "range" && table;
+  const selectionMode = selectionProp === "range" ? table ? "none" : "multi" : selectionProp;
+  const android = isAndroidIdiom(theme);
+  const rowHeight = size ? theme.ctl[size] : Math.max(DENSITY_ROW_PX[state.density], android ? theme.space[56] : theme.tapMin);
+  const [message, setMessage] = React3.useState("");
+  const range = useNativeRange({
+    enabled: rangeMode,
+    nodes: model.nodes,
+    columns: visibleColumns,
+    ctx,
+    range: state.range,
+    setRange: (next) => setState({ range: next, focusedCell: next?.focus ?? null }, "range"),
+    onCellEditCommit,
+    clipboard,
+    labels,
+    announce: setMessage
+  });
+  const toggleSort = React3.useCallback(
+    (colId) => {
+      const column = resolved.find((c) => c.id === colId);
+      if (!column?.sortable) return;
+      const at = state.sorting.findIndex((s) => s.id === colId);
+      const next = [...state.sorting];
+      if (at < 0) {
+        next.splice(0, next.length, { id: colId, desc: false });
+        setMessage(labels.sortedAscending(column.header));
+      } else if (!next[at].desc) {
+        next[at] = { id: colId, desc: true };
+        setMessage(labels.sortedDescending(column.header));
+      } else {
+        next.splice(at, 1);
+        setMessage(labels.sortingCleared(column.header));
+      }
+      setState({ sorting: next }, "sort");
+    },
+    [resolved, state.sorting, setState, labels]
+  );
+  const selectedIds = React3.useMemo(
+    () => Object.keys(state.rowSelection).filter((id) => state.rowSelection[id]),
+    [state.rowSelection]
+  );
+  const selectedRows = React3.useMemo(
+    () => model.filteredRows.filter((row) => state.rowSelection[identify(row)]),
+    [model.filteredRows, state.rowSelection, identify]
+  );
+  const toggleRow = React3.useCallback(
+    (row) => {
+      const id = identify(row);
+      const next = selectionMode === "single" ? state.rowSelection[id] ? {} : { [id]: true } : { ...state.rowSelection };
+      if (selectionMode === "multi") {
+        if (next[id]) delete next[id];
+        else next[id] = true;
+      }
+      setState({ rowSelection: next }, "select");
+    },
+    [identify, selectionMode, state.rowSelection, setState]
+  );
+  const clearSelection = React3.useCallback(() => {
+    setState({ rowSelection: {} }, "select");
+  }, [setState]);
+  const toggleGroup = React3.useCallback(
+    (key) => {
+      const next = { ...state.expanded };
+      if (next[key]) delete next[key];
+      else next[key] = true;
+      setState({ expanded: next }, "expand");
+    },
+    [state.expanded, setState]
+  );
+  const [openSheet, setOpenSheet] = React3.useState(null);
+  const [detailId, setDetailId] = React3.useState(null);
+  const detail = React3.useMemo(
+    () => detailId == null ? null : rows.find((row) => identify(row) === detailId) ?? null,
+    [rows, detailId, identify]
+  );
+  const openRow = React3.useCallback(
+    (row) => {
+      if (onRowPress) onRowPress(row);
+      else setDetailId(identify(row));
+    },
+    [onRowPress, identify]
+  );
+  const [focusIndex, setFocusIndex] = React3.useState(0);
+  const leaves = React3.useMemo(
+    () => model.nodes.filter((n) => n.kind === "leaf"),
+    [model.nodes]
+  );
+  const onGridKey = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault?.();
+      setFocusIndex(
+        (i) => Math.max(0, Math.min(leaves.length - 1, i + (event.key === "ArrowDown" ? 1 : -1)))
+      );
+    } else if (event.key === "Enter" && leaves[focusIndex]) {
+      event.preventDefault?.();
+      openRow(leaves[focusIndex].row);
+    }
+  };
+  const keyProps = { onKeyDown: onGridKey };
+  const primary = React3.useMemo(
+    () => visibleColumns.find((c) => c.id === primaryColumn) ?? visibleColumns[0],
+    [visibleColumns, primaryColumn]
+  );
+  const filterCount = state.columnFilters.length + (state.globalFilter ? 1 : 0);
+  const busy = status === "loading";
+  const surface = status === "error" || status === "forbidden" || status === "offline" ? /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.stateScroll, children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      variant: status === "forbidden" ? "no-permission" : status === "offline" ? "offline" : "error",
+      title: status === "forbidden" ? labels.forbiddenTitle : status === "offline" ? labels.offlineTitle : labels.errorTitle,
+      description: status === "offline" ? labels.offlineBody : void 0,
+      actionLabel: onRetry ? labels.retry : void 0,
+      onAction: onRetry
+    }
+  ) }) : busy && model.nodes.length === 0 ? (
+    // The row layout is known, so wait on placeholder rows at the real row
+    // height (nothing shifts when data lands) rather than a bare spinner.
+    /* @__PURE__ */ jsx(View, { style: styles.skeletonRows, accessibilityLabel: labels.loadingRows, role: "status", children: /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.skeletonRows, children: Array.from({ length: SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: rowHeight - theme.space.s2, radius: "md" }, i)) }) })
+  ) : model.nodes.length === 0 ? /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.stateScroll, children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      variant: filterCount > 0 ? "no-results" : "empty",
+      title: filterCount > 0 ? labels.noResultsTitle : labels.emptyTitle,
+      description: filterCount > 0 ? labels.noResultsBody : void 0,
+      actionLabel: filterCount > 0 ? labels.clearFilters : void 0,
+      onAction: filterCount > 0 ? () => setState({ columnFilters: [], globalFilter: "" }, "filter") : void 0
+    }
+  ) }) : table ? /* @__PURE__ */ jsx(
+    TableSurface,
+    {
+      model,
+      columns: visibleColumns,
+      ctx,
+      state,
+      rowHeight,
+      selectionMode,
+      focusIndex,
+      leaves,
+      range: rangeMode ? range : null,
+      onToggleSort: toggleSort,
+      onToggleRow: toggleRow,
+      onToggleGroup: toggleGroup,
+      onOpenRow: openRow,
+      labels
+    }
+  ) : /* @__PURE__ */ jsx(
+    CardSurface,
+    {
+      model,
+      columns: visibleColumns,
+      primary,
+      ctx,
+      state,
+      selectionMode,
+      onToggleRow: toggleRow,
+      onToggleGroup: toggleGroup,
+      onOpenRow: openRow,
+      labels
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: label,
+      onLayout,
+      style: [styles.root, style],
+      ...keyProps,
+      children: [
+        android && selectedIds.length > 0 ? /* @__PURE__ */ jsx(
+          ContextualAppBar,
+          {
+            count: selectedIds.length,
+            actions: bulkActions,
+            rows: selectedRows,
+            onClear: clearSelection,
+            labels
+          }
+        ) : /* @__PURE__ */ jsx(
+          GridToolbar,
+          {
+            label,
+            searchable,
+            query: state.globalFilter,
+            onQuery: (text) => setState(
+              { globalFilter: text, pagination: { ...state.pagination, pageIndex: 0 } },
+              "quickFilter"
+            ),
+            sortCount: state.sorting.length,
+            filterCount: state.columnFilters.length,
+            groupCount: state.grouping.length,
+            onOpen: setOpenSheet,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CountLine,
+          {
+            shown: model.filteredCount,
+            total: model.totalCount,
+            selected: selectedIds.length,
+            busy,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: styles.body, children: surface }),
+        model.nodes.length > 0 ? /* @__PURE__ */ jsx(
+          FooterStrip,
+          {
+            model,
+            columns: visibleColumns,
+            ctx,
+            state,
+            labels
+          }
+        ) : null,
+        !android && selectedIds.length > 0 ? /* @__PURE__ */ jsx(
+          BulkBar,
+          {
+            count: selectedIds.length,
+            actions: bulkActions,
+            rows: selectedRows,
+            onClear: clearSelection,
+            labels
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          SortSheet,
+          {
+            open: openSheet === "sort",
+            onClose: () => setOpenSheet(null),
+            columns: resolved,
+            sorting: state.sorting,
+            onToggle: toggleSort,
+            onClear: () => setState({ sorting: [] }, "sort"),
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FilterSheet,
+          {
+            open: openSheet === "filter",
+            onClose: () => setOpenSheet(null),
+            columns: resolved,
+            rows,
+            ctx,
+            filters: state.columnFilters,
+            logic: state.filterLogic,
+            onChange: (filters, logic) => setState({ columnFilters: filters, filterLogic: logic }, "filter"),
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DisplaySheet,
+          {
+            open: openSheet === "display",
+            onClose: () => setOpenSheet(null),
+            columns: resolved,
+            state,
+            layout,
+            table,
+            onSetState: setState,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DetailSheet,
+          {
+            row: detail,
+            columns: visibleColumns,
+            ctx,
+            title: detail && primary ? formatValue(ctx, primary, getValue(ctx, detail, primary.id), detail) : "",
+            onClose: () => setDetailId(null),
+            onCommit: onCellEditCommit && detail ? (column, value, previous) => onCellEditCommit({
+              rowId: identify(detail),
+              row: detail,
+              colId: column.id,
+              value,
+              previous
+            }) : void 0,
+            motion,
+            labels
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "status",
+            style: styles.srOnly,
+            accessibilityLabel: message,
+            accessibilityLiveRegion: "polite",
+            children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
+          }
+        )
+      ]
+    }
+  );
+}
+function GridToolbar({
+  label,
+  searchable,
+  query,
+  onQuery,
+  sortCount,
+  filterCount,
+  groupCount,
+  onOpen,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  return /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
+    searchable ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: query,
+        onChangeText: onQuery,
+        placeholder: labels.searchPlaceholder(label),
+        accessibilityLabel: labels.searchLabel(label),
+        leadingIcon: "search",
+        size: "sm",
+        style: styles.search
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.toolbarButtons, children: [
+      /* @__PURE__ */ jsx(
+        ToolPill,
+        {
+          icon: "arrow-down",
+          label: labels.sort,
+          count: sortCount,
+          activeLabel: labels.toolActive(labels.sort, sortCount),
+          onPress: () => onOpen("sort")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolPill,
+        {
+          icon: "filter",
+          label: labels.filter,
+          count: filterCount,
+          activeLabel: labels.toolActive(labels.filter, filterCount),
+          onPress: () => onOpen("filter")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolPill,
+        {
+          icon: "settings",
+          label: labels.display,
+          count: groupCount,
+          activeLabel: labels.toolActive(labels.display, groupCount),
+          onPress: () => onOpen("display")
+        }
+      )
+    ] })
+  ] });
+}
+function ToolPill({
+  icon,
+  label,
+  count,
+  activeLabel,
+  onPress
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: count > 0 ? activeLabel : label,
+      onPress,
+      style: ({ pressed }) => [styles.toolPill, pressed && styles.pressed],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: theme.color.text2 }),
+        /* @__PURE__ */ jsx(Text, { style: styles.toolPillText, children: label }),
+        count > 0 ? /* @__PURE__ */ jsx(View, { style: styles.toolCount, children: /* @__PURE__ */ jsx(Text, { style: styles.toolCountText, children: count }) }) : null
+      ]
+    }
+  );
+}
+function CountLine({
+  shown,
+  total,
+  selected,
+  busy,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  return /* @__PURE__ */ jsxs(View, { style: styles.countLine, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.countText, children: labels.countLine(shown, total, selected) }),
+    busy ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null
+  ] });
+}
+function TableSurface({
+  model,
+  columns,
+  ctx,
+  state,
+  rowHeight,
+  selectionMode,
+  focusIndex,
+  leaves,
+  onToggleSort,
+  range,
+  onToggleRow,
+  onToggleGroup,
+  onOpenRow,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  const selectWidth = selectionMode === "none" ? 0 : theme.tapMin;
+  const widths = columns.map((c) => state.columnSizing[c.id] ?? c.size);
+  const total = widths.reduce((sum, w) => sum + w, 0) + selectWidth;
+  const scrollY = React3.useRef(new Animated.Value(0)).current;
+  const [headerH, setHeaderH] = React3.useState(rowHeight);
+  const geometry = React3.useMemo(() => {
+    const lefts = [];
+    let x = selectWidth;
+    for (const w of widths) {
+      lefts.push(x);
+      x += w;
+    }
+    return { lefts, widths, rowHeight, rows: model.nodes.length };
+  }, [widths, selectWidth, rowHeight, model.nodes.length]);
+  const renderNode = ({ item, index }) => {
+    if (item.kind === "group") {
+      return /* @__PURE__ */ jsx(
+        GroupRow,
+        {
+          node: item,
+          columns,
+          ctx,
+          width: total,
+          height: rowHeight,
+          inTable: true,
+          onToggle: onToggleGroup,
+          labels
+        }
+      );
+    }
+    if (item.kind === "detail") return /* @__PURE__ */ jsx(View, { style: { width: total } });
+    const rowId = ctx.getRowId(item.row);
+    const selected = state.rowSelection[rowId] === true;
+    const focused = leaves[focusIndex]?.id === item.id;
+    const name = rowLabel(ctx, columns, item.row, labels);
+    return (
+      // The checkbox is a **sibling** of the pressable body, never a child of it.
+      // A control inside a control is `nested-interactive`, and it is not a
+      // technicality: a screen reader user lands on the row, is told it is a
+      // button, and has no way to reach the checkbox inside it.
+      /* @__PURE__ */ jsxs(
+        View,
+        {
+          style: [
+            styles.tableRow,
+            { width: total, minHeight: rowHeight },
+            state.zebra && index % 2 === 1 && styles.zebra,
+            selected && styles.selectedRow
+          ],
+          children: [
+            focused ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.focusedRow }) : null,
+            selectionMode === "none" ? null : /* @__PURE__ */ jsx(View, { style: [styles.selectCell, { width: selectWidth }], children: /* @__PURE__ */ jsx(
+              RowMark,
+              {
+                selected,
+                onToggle: () => onToggleRow(item.row),
+                accessibilityLabel: labels.selectRow(name)
+              }
+            ) }),
+            range ? /* @__PURE__ */ jsx(View, { style: styles.tableRowBody, children: columns.map((column, i) => {
+              const rect = range.rect;
+              const inRange = !!rect && index >= rect.r0 && index <= rect.r1 && i >= rect.c0 && i <= rect.c1;
+              const anchor = range.anchor?.rowId === item.id && range.anchor.colId === column.id;
+              const multi = !!rect && (rect.r1 > rect.r0 || rect.c1 > rect.c0);
+              return /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.cellName(
+                    column.header,
+                    String(formatValue(ctx, column, getValue(ctx, item.row, column.id), item.row))
+                  ),
+                  accessibilityState: { selected: inRange },
+                  onPress: () => anchor && !multi ? onOpenRow(item.row) : range.press(index, i),
+                  onLongPress: () => range.longPress(index, i),
+                  style: ({ pressed }) => [
+                    inRange && multi && !anchor && styles.rangeWash,
+                    pressed && styles.pressed
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    Cell,
+                    {
+                      column,
+                      ctx,
+                      row: item.row,
+                      width: widths[i],
+                      depth: i === 0 ? item.depth : 0
+                    }
+                  )
+                },
+                column.id
+              );
+            }) }) : /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: name,
+                accessibilityState: { selected },
+                accessibilityHint: labels.openRecordHint,
+                onPress: () => onOpenRow(item.row),
+                onLongPress: selectionMode === "none" ? void 0 : () => onToggleRow(item.row),
+                style: ({ pressed }) => [styles.tableRowBody, pressed && styles.pressed],
+                children: columns.map((column, i) => /* @__PURE__ */ jsx(
+                  Cell,
+                  {
+                    column,
+                    ctx,
+                    row: item.row,
+                    width: widths[i],
+                    depth: i === 0 ? item.depth : 0
+                  },
+                  column.id
+                ))
+              }
+            )
+          ]
+        }
+      )
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: true,
+      style: styles.tableScroll,
+      contentContainerStyle: { minWidth: "100%" },
+      children: /* @__PURE__ */ jsxs(View, { style: { width: total, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            onLayout: (e) => setHeaderH(e.nativeEvent.layout.height),
+            style: [styles.headerRow, { width: total, minHeight: rowHeight }],
+            children: [
+              selectionMode === "none" ? null : /* @__PURE__ */ jsx(View, { style: { width: selectWidth } }),
+              columns.map((column, i) => /* @__PURE__ */ jsx(
+                HeaderCell,
+                {
+                  column,
+                  width: widths[i],
+                  sort: state.sorting.find((s) => s.id === column.id),
+                  rank: state.sorting.findIndex((s) => s.id === column.id),
+                  multi: state.sorting.length > 1,
+                  onPress: () => onToggleSort(column.id),
+                  labels
+                },
+                column.id
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FlatList,
+          {
+            data: model.nodes,
+            keyExtractor: (node) => node.id,
+            renderItem: renderNode,
+            style: styles.tableBody,
+            getItemLayout: (_, index) => ({
+              length: rowHeight,
+              offset: rowHeight * index,
+              index
+            }),
+            onScroll: range ? Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+              useNativeDriver: false
+            }) : void 0,
+            scrollEventThrottle: 16,
+            extraData: range?.rect
+          }
+        ),
+        range ? /* @__PURE__ */ jsx(
+          RangeOverlay,
+          {
+            range,
+            geometry,
+            scrollY,
+            top: headerH,
+            labels
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+function HeaderCell({
+  column,
+  width,
+  sort,
+  rank,
+  multi,
+  onPress,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  const android = isAndroidIdiom(theme);
+  const head = resolveTextRole(theme, android ? "labelLarge" : "footnote", android);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: column.sortable ? "button" : void 0,
+      accessibilityLabel: labels.headerName(
+        column.header,
+        column.headerUnit,
+        sort ? sort.desc ? "desc" : "asc" : null
+      ),
+      accessibilityState: { selected: !!sort },
+      accessibilityHint: column.sortable ? labels.sortHint : void 0,
+      disabled: !column.sortable,
+      onPress,
+      style: ({ pressed }) => [
+        styles.headerCell,
+        { width },
+        column.align === "end" && styles.headerEnd,
+        column.align === "center" && styles.headerCentre,
+        pressed && styles.pressed
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            numberOfLines: 1,
+            style: [
+              styles.headerText,
+              {
+                fontSize: head.fontSize,
+                lineHeight: head.lineHeight,
+                fontWeight: android ? head.fontWeight : theme.fontWeight.semibold
+              }
+            ],
+            children: [
+              column.header,
+              column.headerUnit ? /* @__PURE__ */ jsxs(Text, { style: styles.headerUnit, children: [
+                " ",
+                column.headerUnit
+              ] }) : null
+            ]
+          }
+        ),
+        sort ? /* @__PURE__ */ jsxs(View, { style: styles.sortMark, children: [
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: sort.desc ? "arrow-down" : "arrow-up",
+              size: theme.icon.xs,
+              color: theme.color.accentOnSoft
+            }
+          ),
+          multi && rank >= 0 ? /* @__PURE__ */ jsx(Text, { style: styles.sortRank, children: rank + 1 }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+function RowMark({
+  selected,
+  onToggle,
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  if (isAndroidIdiom(theme)) {
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: selected,
+        onCheckedChange: onToggle,
+        accessibilityLabel,
+        size: "sm"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: selected },
+      "aria-checked": selected,
+      accessibilityLabel,
+      onPress: onToggle,
+      style: styles.rowMarkHit,
+      children: /* @__PURE__ */ jsx(View, { style: [styles.rowMark, selected && styles.rowMarkOn], children: selected ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "check",
+          size: theme.icon.sm,
+          color: theme.color.accentInk,
+          strokeWidth: theme.icon.strokeBold
+        }
+      ) : null })
+    }
+  );
+}
+function Cell({
+  column,
+  ctx,
+  row,
+  width,
+  depth
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  const value = getValue(ctx, row, column.id);
+  const text = formatValue(ctx, column, value, row);
+  const body = resolveTextRole(theme, "body", isAndroidIdiom(theme));
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles.cell,
+        { width, paddingStart: theme.space.s3 + depth * theme.space.s4 },
+        column.align === "end" && styles.alignEnd,
+        column.align === "center" && styles.alignCentre
+      ],
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          numberOfLines: 1,
+          style: [
+            styles.cellText,
+            { fontSize: body.fontSize, lineHeight: body.lineHeight },
+            column.mono && styles.mono,
+            column.align === "end" && styles.tabular
+          ],
+          children: text
+        }
+      )
+    }
+  );
+}
+function GroupRow({
+  node,
+  columns,
+  ctx,
+  width,
+  height,
+  inTable = false,
+  onToggle,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  const field = ctx.columnsById.get(node.field);
+  const summary = columns.map((c) => {
+    const cell = node.aggregates[c.id];
+    return cell && cell.value !== null ? labels.groupAggregate(
+      c.header,
+      labels.aggregations[cell.fn],
+      formatValue(ctx, c, cell.value, {})
+    ) : null;
+  }).filter((s) => s !== null);
+  const disclosure = /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { expanded: node.expanded },
+      ...expandedProps(node.expanded),
+      accessibilityLabel: labels.groupName(field?.header, node.key, node.leafCount),
+      accessibilityHint: summary.length ? summary.join(". ") : void 0,
+      onPress: () => onToggle(node.id),
+      style: ({ pressed }) => [
+        styles.groupRow,
+        width !== void 0 && { width },
+        height !== void 0 && { minHeight: height },
+        { paddingStart: theme.space.s3 + node.depth * theme.space.s4 },
+        pressed && styles.pressed
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: node.expanded ? "chevron-down" : "chevron-right",
+            size: theme.icon.sm,
+            color: theme.color.text2
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.groupLabel, children: node.key }),
+        /* @__PURE__ */ jsx(Text, { style: styles.groupCount, children: node.leafCount })
+      ]
+    }
+  );
+  return inTable ? /* @__PURE__ */ jsx(View, { style: width !== void 0 ? { width } : void 0, children: disclosure }) : disclosure;
+}
+function CardSurface({
+  model,
+  columns,
+  primary,
+  ctx,
+  state,
+  selectionMode,
+  onToggleRow,
+  onToggleGroup,
+  onOpenRow,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const fields = columns.filter((c) => c.id !== primary?.id);
+  const shown = fields.slice(0, CARD_FIELD_LIMIT);
+  const hidden = fields.length - shown.length;
+  const renderNode = ({ item }) => {
+    if (item.kind === "group") {
+      return /* @__PURE__ */ jsx(
+        GroupRow,
+        {
+          node: item,
+          columns,
+          ctx,
+          onToggle: onToggleGroup,
+          labels
+        }
+      );
+    }
+    if (item.kind === "detail") return /* @__PURE__ */ jsx(View, {});
+    const rowId = ctx.getRowId(item.row);
+    const selected = state.rowSelection[rowId] === true;
+    const title = primary ? formatValue(ctx, primary, getValue(ctx, item.row, primary.id), item.row) : rowId;
+    return (
+      // The checkbox sits **beside** the pressable body, not inside it. A control
+      // nested in a control is `nested-interactive`, and a screen reader user who
+      // lands on the card is told it is a button with no way to reach the box.
+      /* @__PURE__ */ jsxs(View, { style: [styles.card, selected && styles.cardSelected], children: [
+        selectionMode === "none" ? null : /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: selected,
+            onCheckedChange: () => onToggleRow(item.row),
+            accessibilityLabel: labels.selectRow(title),
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: rowLabel(ctx, columns, item.row, labels),
+            accessibilityState: { selected },
+            accessibilityHint: labels.openRecordHint,
+            onPress: () => onOpenRow(item.row),
+            onLongPress: selectionMode === "none" ? void 0 : () => onToggleRow(item.row),
+            style: ({ pressed }) => [styles.cardBody, pressed && styles.pressed],
+            children: [
+              /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.cardTitle, children: title }),
+              /* @__PURE__ */ jsx(View, { style: styles.cardFields, children: shown.map((column) => /* @__PURE__ */ jsxs(View, { style: styles.cardField, children: [
+                /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.cardFieldLabel, children: column.header }),
+                /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.cardFieldValue, column.mono && styles.mono], children: formatValue(ctx, column, getValue(ctx, item.row, column.id), item.row) })
+              ] }, column.id)) }),
+              hidden > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.cardMore, children: labels.moreFields(hidden) }) : null
+            ]
+          }
+        )
+      ] })
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    FlatList,
+    {
+      data: model.nodes,
+      keyExtractor: (node) => node.id,
+      renderItem: renderNode,
+      contentContainerStyle: styles.cardList
+    }
+  );
+}
+function FooterStrip({
+  model,
+  columns,
+  ctx,
+  state,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const cells = columns.map((column) => ({ column, cell: model.footer[column.id] })).filter((entry) => !!entry.cell);
+  if (cells.length === 0) return null;
+  const filtered = model.filteredCount !== model.totalCount;
+  return /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.footer, children: /* @__PURE__ */ jsxs(View, { style: styles.footerRow, children: [
+    cells.map(({ column, cell }) => /* @__PURE__ */ jsxs(View, { style: styles.footerCell, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: labels.footerCell(column.header, labels.aggregations[cell.fn]) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: cell.value === null ? labels.emptyCell : formatValue(ctx, column, cell.value, {}) })
+    ] }, column.id)),
+    filtered ? /* @__PURE__ */ jsxs(View, { style: styles.footerCell, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: labels.scope }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: labels.filteredRows(model.filteredCount) })
+    ] }) : null,
+    state.grouping.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.footerCell, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: labels.groupedBy }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: state.grouping.map((id) => ctx.columnsById.get(id)?.header ?? id).join(" \u203A ") })
+    ] }) : null
+  ] }) });
+}
+function BulkBar({
+  count,
+  actions,
+  rows,
+  onClear,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  return /* @__PURE__ */ jsxs(View, { role: "toolbar", accessibilityLabel: labels.selectedCount(count), style: styles.bulkBar, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.clearSelection,
+        onPress: onClear,
+        style: ({ pressed }) => [styles.bulkClear, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.accentInk })
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.bulkCount, children: labels.selectedCount(count) }),
+    /* @__PURE__ */ jsx(View, { style: styles.bulkActions, children: (actions ?? []).map((action) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: action.label,
+        onPress: () => action.onSelect(rows),
+        style: ({ pressed }) => [
+          styles.bulkAction,
+          action.danger && styles.bulkActionDanger,
+          pressed && styles.pressed
+        ],
+        children: [
+          action.icon ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: action.icon,
+              size: theme.icon.sm,
+              color: action.danger ? theme.color.dangerInk : theme.color.accentInk
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Text, { style: [styles.bulkActionText, action.danger && styles.bulkActionTextDanger], children: action.label })
+        ]
+      },
+      action.id
+    )) })
+  ] });
+}
+function ContextualAppBar({
+  count,
+  actions,
+  rows,
+  onClear,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  const title = resolveTextRole(theme, "titleLarge", true);
+  return /* @__PURE__ */ jsxs(View, { role: "toolbar", accessibilityLabel: labels.selectedCount(count), style: styles.cab, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.clearSelection,
+        onPress: onClear,
+        style: ({ pressed }) => [styles.cabIcon, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        numberOfLines: 1,
+        accessibilityRole: "header",
+        style: [styles.cabTitle, { fontSize: title.fontSize, lineHeight: title.lineHeight }],
+        children: labels.selectedCount(count)
+      }
+    ),
+    (actions ?? []).map((action) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: action.label,
+        onPress: () => action.onSelect(rows),
+        style: ({ pressed }) => [
+          action.icon ? styles.cabIcon : styles.cabText,
+          pressed && styles.pressed
+        ],
+        children: action.icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: action.icon,
+            size: theme.icon.md,
+            color: action.danger ? theme.color.dangerOnSoft : theme.color.text2
+          }
+        ) : /* @__PURE__ */ jsx(Text, { style: [styles.cabActionText, action.danger && styles.cabActionDanger], children: action.label })
+      },
+      action.id
+    ))
+  ] });
+}
+function rowLabel(ctx, columns, row, labels) {
+  return labels.rowSummary(
+    columns.slice(0, CARD_FIELD_LIMIT + 1).map((column) => ({
+      header: column.header,
+      value: formatValue(ctx, column, getValue(ctx, row, column.id), row)
+    }))
+  );
+}
+var sheet3 = createStyleSheet((theme) => ({
+  root: { flex: 1, alignSelf: "stretch", gap: theme.space.s2 },
+  body: { flex: 1, minHeight: theme.space[40] },
+  centre: { flex: 1, alignItems: "center", justifyContent: "center", padding: theme.space.s6 },
+  stateScroll: { flexGrow: 1, justifyContent: "center" },
+  // ---- toolbar ----
+  toolbar: { gap: theme.space.s2 },
+  search: { alignSelf: "stretch" },
+  toolbarButtons: { flexDirection: "row", gap: theme.space.s2, flexWrap: "wrap" },
+  toolPill: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  toolPillText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    fontWeight: theme.type.footnote.fontWeight,
+    color: theme.color.text
+  },
+  // The tint alone carries the badge at normal contrast; under
+  // `prefers-contrast: more` it collapses to the plain surface, and without an
+  // edge the badge would simply stop existing. The edge is `transparent` until
+  // then, so it costs nothing here.
+  toolCount: {
+    minWidth: theme.space.s5,
+    paddingHorizontal: theme.space[2],
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    backgroundColor: theme.color.accentSoft,
+    alignItems: "center"
+  },
+  toolCountText: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    // On the accent tint, the tone itself is under AA — the measured `-on-soft`
+    // ink is the only legible foreground here.
+    color: theme.color.accentOnSoft
+  },
+  countLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space.s2,
+    minHeight: theme.space.s5
+  },
+  countText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  // ---- table ----
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: theme.color.surface2,
+    borderBottomWidth: theme.borderWidth.strong,
+    borderBottomColor: theme.color.border
+  },
+  headerCell: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    height: "100%",
+    paddingHorizontal: theme.space.s3
+  },
+  headerText: {
+    flexShrink: 1,
+    ...theme.type.footnote,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.platform === "Android" ? theme.fontWeight.medium : theme.fontWeight.semibold,
+    color: theme.color.text2
+  },
+  headerUnit: { fontWeight: theme.fontWeight.regular, color: theme.color.text2 },
+  sortMark: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
+  sortRank: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    color: theme.color.accentOnSoft
+  },
+  tableBody: { flex: 1 },
+  tableScroll: { flex: 1 },
+  tableRow: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    borderBottomWidth: theme.borderWidth.hair,
+    borderBottomColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  zebra: { backgroundColor: theme.color.surface2 },
+  selectedRow: { backgroundColor: theme.state.selected },
+  // loam-contrast-ignore — a selection-range wash spanning cells; a per-cell edge would stripe the grid.
+  rangeWash: { backgroundColor: theme.color.accentSoft },
+  focusedRow: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.focus.ringColor
+  },
+  // iOS edit-mode mark: a 20 circle, accent filled with the check when on.
+  rowMark: {
+    width: theme.icon.lg,
+    height: theme.icon.lg,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  rowMarkOn: { backgroundColor: theme.color.accent, borderColor: theme.color.accent },
+  rowMarkHit: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  selectCell: { alignItems: "center", justifyContent: "center" },
+  tableRowBody: { flex: 1, flexDirection: "row", alignItems: "center" },
+  cell: { justifyContent: "center", paddingEnd: theme.space.s3, height: "100%" },
+  cellText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  mono: { fontFamily: theme.font.mono },
+  // Right-aligned columns hold figures; equal-width digits keep them lined up.
+  tabular: { fontVariant: ["tabular-nums"] },
+  skeletonRows: { alignSelf: "stretch", gap: theme.space.s2, padding: theme.space.s3 },
+  alignEnd: { alignItems: "flex-end" },
+  alignCentre: { alignItems: "center" },
+  // The header cell lays out in a row, so its alignment is on the main axis.
+  headerEnd: { justifyContent: "flex-end" },
+  headerCentre: { justifyContent: "center" },
+  groupRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.tapMin,
+    paddingEnd: theme.space.s3,
+    backgroundColor: theme.color.surface3,
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  groupLabel: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  groupCell: { flex: 1 },
+  groupCount: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text2
+  },
+  // ---- cards ----
+  cardList: { gap: theme.space.s2, paddingBottom: theme.space.s2 },
+  card: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s2,
+    padding: theme.space.s3,
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface
+  },
+  // A selection edge is a graphical object held to 3:1, and the raw accent does
+  // not clear that on every ground the card sits on. `focus.ringColor` is the
+  // accent already lifted to meet it.
+  cardSelected: {
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.state.selected
+  },
+  cardBody: { flex: 1, gap: theme.space.s2 },
+  cardTitle: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    fontWeight: theme.type.headline.fontWeight,
+    color: theme.color.text
+  },
+  cardFields: { gap: theme.space.s1 },
+  cardField: { flexDirection: "row", alignItems: "baseline", gap: theme.space.s2 },
+  // `space` is keyed by px, so `[28]` was a 28px gutter that cut every
+  // header to "Tea…". 96 holds a one-word header at caption size.
+  cardFieldLabel: {
+    width: theme.space[96],
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.text2
+  },
+  cardFieldValue: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  cardMore: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    color: theme.color.text3
+  },
+  // ---- footer ----
+  footer: {
+    flexGrow: 0,
+    borderTopWidth: theme.borderWidth.base,
+    borderTopColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  footerRow: { flexDirection: "row", gap: theme.space.s4, padding: theme.space.s2 },
+  footerCell: { gap: theme.space[2] },
+  footerLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption2.fontSize,
+    lineHeight: theme.type.caption2.lineHeight,
+    color: theme.color.text2
+  },
+  footerValue: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text
+  },
+  // ---- selection bar ----
+  bulkBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s2,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.accent,
+    ...theme.shadow.md
+  },
+  cab: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[2],
+    minHeight: theme.layout.appbarH,
+    paddingHorizontal: theme.space[2],
+    backgroundColor: theme.state.selected
+  },
+  cabIcon: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cabText: {
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    justifyContent: "center"
+  },
+  cabTitle: { flex: 1, fontFamily: theme.font.sans, color: theme.color.text },
+  cabActionText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.accentOnSoft
+  },
+  cabActionDanger: { color: theme.color.dangerOnSoft },
+  bulkClear: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  bulkCount: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.accentInk
+  },
+  bulkActions: { flexDirection: "row", gap: theme.space.s1 },
+  bulkAction: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s1,
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    borderRadius: theme.radius.md
+  },
+  bulkActionDanger: { backgroundColor: theme.color.danger },
+  bulkActionText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.accentInk
+  },
+  bulkActionTextDanger: { color: theme.color.dangerInk },
+  pressed: { opacity: theme.state.pressedOpacity },
+  srOnly: {
+    position: "absolute",
+    width: theme.space[1],
+    height: theme.space[1],
+    overflow: "hidden"
+  }
+}));
+
+export { DEFAULT_DATA_GRID_LABELS, DataGrid, DetailSheet, DisplaySheet, FilterSheet, SortSheet, TABLE_MIN_WIDTH };