@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-FIF2M24N.js

@@ -0,0 +1,1521 @@
+import { Picker } from './chunk-NKB7BZYK.js';
+import { EmptyState } from './chunk-LZLHELAG.js';
+import { SegmentedControl } from './chunk-5YNTNN5A.js';
+import { Sheet } from './chunk-ZVFE5QGU.js';
+import { Spinner } from './chunk-O7AE6DAF.js';
+import { Checkbox } from './chunk-JXJB2X6M.js';
+import { Input } from './chunk-ITTYJZWX.js';
+import { expandedProps } from './chunk-RQ3HASCC.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React2 from 'react';
+import { View, Text, Pressable, ScrollView, FlatList } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { getValue, formatValue, resolveColumns, useGridState, buildRowModel, DENSITY_ROW_PX, AGGREGATION_LABELS } from '@btndprojects/loam-data-grid-core';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var OPERATOR_LABELS = {
+  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"
+};
+var NULLARY = ["isEmpty", "isNotEmpty"];
+function SortSheet({
+  open,
+  onClose,
+  columns,
+  sorting,
+  onToggle,
+  onClear
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme();
+  const sortable = columns.filter((c) => c.sortable);
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: "Sort", children: /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+    sortable.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "No column in this grid can be sorted." }) : 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 ? "descending" : "ascending" : "not sorted"
+          },
+          accessibilityHint: "Double tap to cycle ascending, descending, off",
+          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: "Clear sorting" }) : null
+  ] }) });
+}
+function FilterSheet({
+  open,
+  onClose,
+  columns,
+  rows,
+  ctx,
+  filters,
+  logic,
+  onChange
+}) {
+  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: "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: "Match" }),
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          size: "sm",
+          value: logic,
+          onValueChange: (next) => onChange([...filters], next),
+          items: [
+            { value: "and", label: "All" },
+            { value: "or", label: "Any" }
+          ]
+        }
+      )
+    ] }) : 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: `Remove the filter on ${column.header}`,
+              onPress: () => remove(index),
+              style: ({ pressed }) => [styles.iconButton, pressed && styles.pressed],
+              children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Picker,
+          {
+            title: "Column",
+            accessibilityLabel: `Filter column, currently ${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: "Condition",
+            accessibilityLabel: `Condition, currently ${OPERATOR_LABELS[filter.op]}`,
+            value: filter.op,
+            items: operators.map((op) => ({ value: op, label: OPERATOR_LABELS[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(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: { selected: active },
+              accessibilityLabel: value,
+              onPress: () => update(index, { value: active ? "" : value }),
+              style: ({ pressed }) => [
+                styles.chip,
+                active && styles.chipOn,
+                pressed && styles.pressed
+              ],
+              children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, active && styles.chipTextOn], 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: "Value",
+              accessibilityLabel: `Value for the filter on ${column.header}`,
+              style: styles.operand
+            }
+          ),
+          filter.op === "between" ? /* @__PURE__ */ jsx(
+            Input,
+            {
+              size: "sm",
+              value: String(filter.value2 ?? ""),
+              onChangeText: (text) => update(index, { value2: text }),
+              placeholder: "and",
+              accessibilityLabel: `Upper bound for the filter on ${column.header}`,
+              style: styles.operand
+            }
+          ) : null
+        ] })
+      ] }, `${filter.id}-${index}`);
+    }),
+    /* @__PURE__ */ jsx(Button, { variant: "tonal", leadingIcon: "plus", onPress: add, fullWidth: true, children: "Add a condition" }),
+    filters.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", leadingIcon: "x", onPress: () => onChange([], logic), fullWidth: true, children: "Clear all filters" }) : 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
+}) {
+  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: "Display", detents: ["half", "full"], children: /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.body, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Row height" }),
+    /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        value: state.density,
+        onValueChange: (next) => onSetState({ density: next }, "density"),
+        items: [
+          { value: "compact", label: "Compact" },
+          { value: "standard", label: "Standard" },
+          { value: "comfortable", label: "Roomy" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "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." }),
+    table ? /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "checkbox",
+        accessibilityState: { checked: state.zebra },
+        accessibilityLabel: "Shade alternating rows",
+        onPress: () => onSetState({ zebra: !state.zebra }, "display"),
+        style: ({ pressed }) => [styles.row, pressed && styles.pressed],
+        children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: "Shade alternating rows" }),
+          /* @__PURE__ */ jsx(StateBox, { on: state.zebra })
+        ]
+      }
+    ) : /* @__PURE__ */ jsx(Text, { style: styles.hint, children: layout === "cards" ? "This grid is set to cards." : 'This grid is showing cards because its container is narrow. Widen it, or set layout="table".' }),
+    groupable.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Group by" }),
+      /* @__PURE__ */ jsxs(View, { style: styles.chips, children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityState: { selected: state.grouping.length === 0 },
+            accessibilityLabel: "No grouping",
+            onPress: () => onSetState({ grouping: [] }, "group"),
+            style: ({ pressed }) => [
+              styles.chip,
+              state.grouping.length === 0 && styles.chipOn,
+              pressed && styles.pressed
+            ],
+            children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: [styles.chipText, state.grouping.length === 0 && styles.chipTextOn],
+                children: "None"
+              }
+            )
+          }
+        ),
+        groupable.map((column) => {
+          const active = state.grouping[0] === column.id;
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              accessibilityRole: "button",
+              accessibilityState: { selected: active },
+              accessibilityLabel: `Group by ${column.header}`,
+              onPress: () => onSetState({ grouping: active ? [] : [column.id] }, "group"),
+              style: ({ pressed }) => [
+                styles.chip,
+                active && styles.chipOn,
+                pressed && styles.pressed
+              ],
+              children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, active && styles.chipTextOn], children: column.header })
+            },
+            column.id
+          );
+        })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(Text, { style: styles.section, children: "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 },
+          accessibilityLabel: column.header,
+          accessibilityHint: last ? "The last visible column cannot be hidden" : 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" }) });
+}
+function DetailSheet({
+  row,
+  columns,
+  ctx,
+  title,
+  onClose
+}) {
+  const { styles } = useStyles(sheet);
+  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) => /* @__PURE__ */ jsxs(View, { style: styles.detailRow, children: [
+    /* @__PURE__ */ jsxs(Text, { style: styles.detailLabel, children: [
+      column.header,
+      column.headerUnit ? ` (${column.headerUnit})` : ""
+    ] }),
+    /* @__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 },
+  chip: {
+    minHeight: theme.tapMin,
+    justifyContent: "center",
+    paddingHorizontal: theme.space.s3,
+    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, fontWeight: theme.fontWeight.bold },
+  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
+  },
+  mono: { fontFamily: theme.font.mono },
+  pressed: { opacity: theme.state.pressedOpacity }
+}));
+var TABLE_MIN_WIDTH = 680;
+var CARD_FIELD_LIMIT = 4;
+function DataGrid({
+  rows,
+  columns,
+  label,
+  getRowId,
+  primaryColumn,
+  layout = "auto",
+  density,
+  initialState,
+  state: controlled,
+  onStateChange,
+  gridId,
+  storage,
+  selectionMode = "none",
+  bulkActions,
+  onRowPress,
+  searchable = true,
+  status = "ready",
+  onRetry,
+  locale,
+  currency = "USD",
+  now,
+  style
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  const resolved = React2.useMemo(() => resolveColumns(columns), [columns]);
+  const identify = React2.useMemo(
+    () => getRowId ?? ((row) => String(row.id)),
+    [getRowId]
+  );
+  const seed = React2.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 } = useGridState({
+    columns: resolved,
+    initialState: seed,
+    state: controlled,
+    onStateChange,
+    gridId,
+    storage
+  });
+  const visibleColumns = React2.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 = React2.useMemo(
+    () => ({
+      columnsById: new Map(resolved.map((c) => [c.id, c])),
+      getRowId: identify,
+      formulas: state.formulas,
+      locale,
+      currency,
+      now: now ?? Date.now()
+    }),
+    [resolved, identify, state.formulas, locale, currency, now]
+  );
+  const model = React2.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] = React2.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 rowHeight = Math.max(DENSITY_ROW_PX[state.density], theme.tapMin);
+  const [message, setMessage] = React2.useState("");
+  const toggleSort = React2.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(`Sorted by ${column.header}, ascending.`);
+      } else if (!next[at].desc) {
+        next[at] = { id: colId, desc: true };
+        setMessage(`Sorted by ${column.header}, descending.`);
+      } else {
+        next.splice(at, 1);
+        setMessage(`Sorting cleared on ${column.header}.`);
+      }
+      setState({ sorting: next }, "sort");
+    },
+    [resolved, state.sorting, setState]
+  );
+  const selectedIds = React2.useMemo(
+    () => Object.keys(state.rowSelection).filter((id) => state.rowSelection[id]),
+    [state.rowSelection]
+  );
+  const selectedRows = React2.useMemo(
+    () => model.filteredRows.filter((row) => state.rowSelection[identify(row)]),
+    [model.filteredRows, state.rowSelection, identify]
+  );
+  const toggleRow = React2.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 = React2.useCallback(() => {
+    setState({ rowSelection: {} }, "select");
+  }, [setState]);
+  const toggleGroup = React2.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] = React2.useState(null);
+  const [detail, setDetail] = React2.useState(null);
+  const openRow = React2.useCallback(
+    (row) => {
+      if (onRowPress) onRowPress(row);
+      else setDetail(row);
+    },
+    [onRowPress]
+  );
+  const [focusIndex, setFocusIndex] = React2.useState(0);
+  const leaves = React2.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 = React2.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" ? "You do not have access to these rows" : status === "offline" ? "You are offline" : "These rows could not be loaded",
+      description: status === "offline" ? "The rows below may be out of date until the connection is back." : void 0,
+      actionLabel: onRetry ? "Try again" : void 0,
+      onAction: onRetry
+    }
+  ) }) : busy && model.nodes.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles.centre, accessibilityLabel: "Loading rows", role: "status", children: /* @__PURE__ */ jsx(Spinner, { size: "lg" }) }) : model.nodes.length === 0 ? /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.stateScroll, children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      variant: filterCount > 0 ? "no-results" : "empty",
+      title: filterCount > 0 ? "No rows match" : "Nothing here yet",
+      description: filterCount > 0 ? "Clear a filter or widen the search to see rows again." : void 0,
+      actionLabel: filterCount > 0 ? "Clear filters" : void 0,
+      onAction: filterCount > 0 ? () => setState({ columnFilters: [], globalFilter: "" }, "filter") : void 0
+    }
+  ) }) : table ? /* @__PURE__ */ jsx(
+    TableSurface,
+    {
+      model,
+      columns: visibleColumns,
+      ctx,
+      state,
+      rowHeight,
+      selectionMode,
+      focusIndex,
+      leaves,
+      onToggleSort: toggleSort,
+      onToggleRow: toggleRow,
+      onToggleGroup: toggleGroup,
+      onOpenRow: openRow
+    }
+  ) : /* @__PURE__ */ jsx(
+    CardSurface,
+    {
+      model,
+      columns: visibleColumns,
+      primary,
+      ctx,
+      state,
+      selectionMode,
+      onToggleRow: toggleRow,
+      onToggleGroup: toggleGroup,
+      onOpenRow: openRow
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      role: "group",
+      accessibilityLabel: label,
+      onLayout,
+      style: [styles.root, style],
+      ...keyProps,
+      children: [
+        /* @__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
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CountLine,
+          {
+            shown: model.filteredCount,
+            total: model.totalCount,
+            selected: selectedIds.length,
+            busy
+          }
+        ),
+        /* @__PURE__ */ jsx(View, { style: styles.body, children: surface }),
+        model.nodes.length > 0 ? /* @__PURE__ */ jsx(FooterStrip, { model, columns: visibleColumns, ctx, state }) : null,
+        selectedIds.length > 0 ? /* @__PURE__ */ jsx(
+          BulkBar,
+          {
+            count: selectedIds.length,
+            actions: bulkActions,
+            rows: selectedRows,
+            onClear: clearSelection
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          SortSheet,
+          {
+            open: openSheet === "sort",
+            onClose: () => setOpenSheet(null),
+            columns: resolved,
+            sorting: state.sorting,
+            onToggle: toggleSort,
+            onClear: () => setState({ sorting: [] }, "sort")
+          }
+        ),
+        /* @__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")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DisplaySheet,
+          {
+            open: openSheet === "display",
+            onClose: () => setOpenSheet(null),
+            columns: resolved,
+            state,
+            layout,
+            table,
+            onSetState: setState
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DetailSheet,
+          {
+            row: detail,
+            columns: visibleColumns,
+            ctx,
+            title: detail && primary ? formatValue(ctx, primary, getValue(ctx, detail, primary.id), detail) : "",
+            onClose: () => setDetail(null)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "status",
+            style: styles.srOnly,
+            accessibilityLabel: message,
+            ...{ "aria-live": "polite" },
+            children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
+          }
+        )
+      ]
+    }
+  );
+}
+function GridToolbar({
+  label,
+  searchable,
+  query,
+  onQuery,
+  sortCount,
+  filterCount,
+  groupCount,
+  onOpen
+}) {
+  const { styles } = useStyles(sheet2);
+  return /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
+    searchable ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: query,
+        onChangeText: onQuery,
+        placeholder: `Search ${label.toLowerCase()}`,
+        accessibilityLabel: `Search ${label}`,
+        leadingIcon: "search",
+        size: "sm",
+        style: styles.search
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.toolbarButtons, children: [
+      /* @__PURE__ */ jsx(ToolPill, { icon: "arrow-down", label: "Sort", count: sortCount, onPress: () => onOpen("sort") }),
+      /* @__PURE__ */ jsx(ToolPill, { icon: "filter", label: "Filter", count: filterCount, onPress: () => onOpen("filter") }),
+      /* @__PURE__ */ jsx(
+        ToolPill,
+        {
+          icon: "settings",
+          label: "Display",
+          count: groupCount,
+          onPress: () => onOpen("display")
+        }
+      )
+    ] })
+  ] });
+}
+function ToolPill({
+  icon,
+  label,
+  count,
+  onPress
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: count > 0 ? `${label}, ${count} active` : 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
+}) {
+  const { styles } = useStyles(sheet2);
+  const filtered = shown !== total;
+  return /* @__PURE__ */ jsxs(View, { style: styles.countLine, children: [
+    /* @__PURE__ */ jsxs(Text, { style: styles.countText, children: [
+      filtered ? `${shown} of ${total} rows` : `${total} rows`,
+      selected > 0 ? ` \xB7 ${selected} selected` : ""
+    ] }),
+    busy ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null
+  ] });
+}
+function TableSurface({
+  model,
+  columns,
+  ctx,
+  state,
+  rowHeight,
+  selectionMode,
+  focusIndex,
+  leaves,
+  onToggleSort,
+  onToggleRow,
+  onToggleGroup,
+  onOpenRow
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  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 renderNode = ({ item, index }) => {
+    if (item.kind === "group") {
+      return /* @__PURE__ */ jsx(
+        GroupRow,
+        {
+          node: item,
+          columns,
+          ctx,
+          width: total,
+          height: rowHeight,
+          inTable: true,
+          onToggle: onToggleGroup
+        }
+      );
+    }
+    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);
+    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,
+            focused && styles.focusedRow
+          ],
+          children: [
+            selectionMode === "none" ? null : /* @__PURE__ */ jsx(View, { style: [styles.selectCell, { width: selectWidth }], children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selected,
+                onCheckedChange: () => onToggleRow(item.row),
+                accessibilityLabel: `Select ${name}`,
+                size: "sm"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: name,
+                accessibilityState: { selected },
+                accessibilityHint: "Double tap to see the whole record",
+                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, contentContainerStyle: { minWidth: "100%" }, children: /* @__PURE__ */ jsxs(View, { style: { width: total, flex: 1 }, children: [
+    /* @__PURE__ */ jsxs(View, { 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)
+        },
+        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
+        })
+      }
+    )
+  ] }) });
+}
+function HeaderCell({
+  column,
+  width,
+  sort,
+  rank,
+  multi,
+  onPress
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: column.sortable ? "button" : void 0,
+      accessibilityLabel: `${column.header}${column.headerUnit ? `, ${column.headerUnit}` : ""}` + (sort ? `, sorted ${sort.desc ? "descending" : "ascending"}` : ""),
+      accessibilityState: { selected: !!sort },
+      accessibilityHint: column.sortable ? "Double tap to change the sort" : void 0,
+      disabled: !column.sortable,
+      onPress,
+      style: ({ pressed }) => [
+        styles.headerCell,
+        { width },
+        column.align === "end" && styles.alignEnd,
+        column.align === "center" && styles.alignCentre,
+        pressed && styles.pressed
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(Text, { numberOfLines: 1, style: styles.headerText, 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 Cell({
+  column,
+  ctx,
+  row,
+  width,
+  depth
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  const value = getValue(ctx, row, column.id);
+  const text = formatValue(ctx, column, value, row);
+  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, column.mono && styles.mono], children: text })
+    }
+  );
+}
+function GroupRow({
+  node,
+  columns,
+  ctx,
+  width,
+  height,
+  inTable = false,
+  onToggle
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  const field = ctx.columnsById.get(node.field);
+  const summary = columns.map((c) => {
+    const cell = node.aggregates[c.id];
+    return cell && cell.value !== null ? `${c.header} ${AGGREGATION_LABELS[cell.fn].toLowerCase()} ${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: `${field ? `${field.header}: ` : ""}${node.key}, ${node.leafCount} rows`,
+      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
+}) {
+  const { styles } = useStyles(sheet2);
+  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 });
+    }
+    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: `Select ${title}`,
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: rowLabel(ctx, columns, item.row),
+            accessibilityState: { selected },
+            accessibilityHint: "Double tap to see the whole record",
+            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: `and ${hidden} more` }) : null
+            ]
+          }
+        )
+      ] })
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    FlatList,
+    {
+      data: model.nodes,
+      keyExtractor: (node) => node.id,
+      renderItem: renderNode,
+      contentContainerStyle: styles.cardList
+    }
+  );
+}
+function FooterStrip({
+  model,
+  columns,
+  ctx,
+  state
+}) {
+  const { styles } = useStyles(sheet2);
+  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: `${column.header} \xB7 ${AGGREGATION_LABELS[cell.fn].toLowerCase()}` }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: cell.value === null ? "\u2014" : formatValue(ctx, column, cell.value, {}) })
+    ] }, column.id)),
+    filtered ? /* @__PURE__ */ jsxs(View, { style: styles.footerCell, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: "Scope" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: `${model.filteredCount} filtered rows` })
+    ] }) : null,
+    state.grouping.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.footerCell, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: "Grouped by" }),
+      /* @__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
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsxs(View, { role: "toolbar", accessibilityLabel: `${count} selected`, style: styles.bulkBar, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear selection",
+        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: `${count} selected` }),
+    /* @__PURE__ */ jsx(View, { style: styles.bulkActions, children: (actions ?? []).map((action) => /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: action.label,
+        onPress: () => action.onRun(rows),
+        style: ({ pressed }) => [
+          styles.bulkAction,
+          action.destructive && styles.bulkActionDanger,
+          pressed && styles.pressed
+        ],
+        children: [
+          action.icon ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: action.icon,
+              size: theme.icon.sm,
+              color: action.destructive ? theme.color.dangerInk : theme.color.accentInk
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [styles.bulkActionText, action.destructive && styles.bulkActionTextDanger],
+              children: action.label
+            }
+          )
+        ]
+      },
+      action.id
+    )) })
+  ] });
+}
+function rowLabel(ctx, columns, row) {
+  return columns.slice(0, CARD_FIELD_LIMIT + 1).map((column) => `${column.header}: ${formatValue(ctx, column, getValue(ctx, row, column.id), row)}`).join(", ");
+}
+var sheet2 = 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,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    fontWeight: theme.fontWeight.bold,
+    color: theme.color.text
+  },
+  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 },
+  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 },
+  focusedRow: {
+    borderStartWidth: theme.borderWidth.heavy,
+    borderStartColor: theme.focus.ringColor
+  },
+  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 },
+  alignEnd: { alignItems: "flex-end" },
+  alignCentre: { alignItems: "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
+  },
+  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 { DataGrid, DetailSheet, DisplaySheet, FilterSheet, SortSheet, TABLE_MIN_WIDTH };