@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-FMYDDECK.js

@@ -1,1521 +0,0 @@
-import { Picker } from './chunk-NKB7BZYK.js';
-import { EmptyState } from './chunk-LZLHELAG.js';
-import { SegmentedControl } from './chunk-5YNTNN5A.js';
-import { Checkbox } from './chunk-JXJB2X6M.js';
-import { Sheet } from './chunk-ZVFE5QGU.js';
-import { Input } from './chunk-ITTYJZWX.js';
-import { Spinner } from './chunk-O7AE6DAF.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 };