@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/{chunk-SATMR6SG.js → chunk-MG4SKWLL.js}

@@ -1,22 +1,25 @@
-import { Picker } from './chunk-PID3NJB7.js';
-import { EmptyState } from './chunk-KFJGFLMW.js';
-import { Switch } from './chunk-FZGAAOKS.js';
-import { SegmentedControl } from './chunk-TQVAIKFD.js';
-import { Sheet } from './chunk-QYPE5JX3.js';
-import { Spinner } from './chunk-KQZ3GLHR.js';
-import { Skeleton } from './chunk-PNF3NKB5.js';
-import { Checkbox } from './chunk-Q6NKEPRE.js';
-import { Input } from './chunk-7BUIKDD6.js';
+import { Checkbox } from './chunk-KNILMM4H.js';
+import { EmptyState } from './chunk-QJMMM4RC.js';
+import { Chip } from './chunk-7NGMUVNU.js';
+import { Picker } from './chunk-MCOZJWPU.js';
+import { Sheet } from './chunk-B7JZ3N5G.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Skeleton } from './chunk-YJ5PXOX3.js';
 import { expandedProps } from './chunk-W23G6JLF.js';
-import { Button } from './chunk-E2E3I5W2.js';
+import { Switch } from './chunk-VFDQAAIW.js';
+import { SegmentedControl } from './chunk-NZG75DGA.js';
+import { Input } from './chunk-KXLDK6HB.js';
 import { haptics } from './chunk-NY2U3PBI.js';
+import { Spinner } from './chunk-G7H3NX3G.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
 import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import { useResolvedMotion, motionTiming } from './chunk-J64KGCGX.js';
-import * as React2 from 'react';
-import { View, Text, Pressable, ScrollView, LayoutAnimation, FlatList, Animated } from 'react-native';
+import * as React3 from 'react';
+import { View, Text, Pressable, ScrollView, LayoutAnimation, Animated, FlatList, PanResponder } from 'react-native';
 import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { getValue, formatValue, resolveColumns, useGridState, buildRowModel, DENSITY_ROW_PX } from '@btndprojects/loam-data-grid-core';
+import { getValue, formatValue, resolveColumns, useGridState, buildRowModel, DENSITY_ROW_PX, rangeRect, parseClipboardMatrix, NUMERIC_TYPES } from '@btndprojects/loam-data-grid-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/data-grid/data-grid-labels.ts
@@ -126,6 +129,19 @@ var DEFAULT_DATA_GRID_LABELS = {
   columns: "Columns",
   lastColumnHint: "The last visible column cannot be hidden",
   headerWithUnit: (header, unit) => `${header} (${unit})`,
+  copy: "Copy",
+  paste: "Paste",
+  fill: "Fill",
+  clear: "Clear",
+  rangeSummary: (rows, cols, cells) => `${rows} ${rows === 1 ? "row" : "rows"} by ${cols} ${cols === 1 ? "column" : "columns"}, ${cells} ${cells === 1 ? "cell" : "cells"}`,
+  copiedCells: (cells) => `Copied ${cells} ${cells === 1 ? "cell" : "cells"}`,
+  filledCells: (cells, rejected) => `Filled ${cells} ${cells === 1 ? "cell" : "cells"}${rejected ? ` \xB7 ${rejected} rejected` : ""}`,
+  clearedCells: (cells) => `Cleared ${cells} ${cells === 1 ? "cell" : "cells"}`,
+  pastedCells: (cells, rejected) => `Pasted ${cells} ${cells === 1 ? "cell" : "cells"}${rejected ? ` \xB7 ${rejected} rejected` : ""}`,
+  rangeStartHandle: "Range start",
+  rangeEndHandle: "Range end",
+  rangeHandleHint: "Drag to change the range",
+  cellName: (header, value) => `${header}: ${value}`,
   saveFailed: "Could not save",
   datePlaceholder: "YYYY-MM-DD"
 };
@@ -274,18 +290,13 @@ function FilterSheet({
         nullary ? null : values ? /* @__PURE__ */ jsx(View, { style: styles.chips, children: values.map((value) => {
           const active = String(filter.value ?? "") === value;
           return /* @__PURE__ */ jsx(
-            Pressable,
+            Chip,
             {
-              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 })
+              size: "sm",
+              selectable: true,
+              selected: active,
+              onSelectedChange: () => update(index, { value: active ? "" : value }),
+              children: value
             },
             value
           );
@@ -365,6 +376,7 @@ function DisplaySheet({
       {
         accessibilityRole: "checkbox",
         accessibilityState: { checked: state.zebra },
+        "aria-checked": state.zebra,
         accessibilityLabel: labels.shadeRows,
         onPress: () => onSetState({ zebra: !state.zebra }, "display"),
         style: ({ pressed }) => [styles.row, pressed && styles.pressed],
@@ -378,35 +390,27 @@ function DisplaySheet({
       /* @__PURE__ */ jsx(Text, { style: styles.section, children: labels.groupBy }),
       /* @__PURE__ */ jsxs(View, { style: styles.chips, children: [
         /* @__PURE__ */ jsx(
-          Pressable,
+          Chip,
           {
-            accessibilityRole: "button",
-            accessibilityState: { selected: state.grouping.length === 0 },
+            size: "sm",
+            selectable: true,
+            selected: state.grouping.length === 0,
+            onSelectedChange: () => onSetState({ grouping: [] }, "group"),
             accessibilityLabel: labels.noGrouping,
-            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: labels.none })
+            children: labels.none
           }
         ),
         groupable.map((column) => {
           const active = state.grouping[0] === column.id;
           return /* @__PURE__ */ jsx(
-            Pressable,
+            Chip,
             {
-              accessibilityRole: "button",
-              accessibilityState: { selected: active },
+              size: "sm",
+              selectable: true,
+              selected: active,
+              onSelectedChange: () => onSetState({ grouping: active ? [] : [column.id] }, "group"),
               accessibilityLabel: labels.groupByColumn(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 })
+              children: column.header
             },
             column.id
           );
@@ -422,6 +426,7 @@ function DisplaySheet({
         {
           accessibilityRole: "checkbox",
           accessibilityState: { checked: on, disabled: !column.hideable || last },
+          "aria-checked": on,
           accessibilityLabel: column.header,
           accessibilityHint: last ? labels.lastColumnHint : void 0,
           disabled: !column.hideable || last,
@@ -490,11 +495,11 @@ function DetailField({
   const theme = useLoamTheme("data-grid");
   const { styles } = useStyles(sheet);
   const level = useResolvedMotion(motion, "data-grid");
-  const [draft, setDraft] = React2.useState(() => toField(column, value));
-  const [error, setError] = React2.useState(null);
-  const [pending, setPending] = React2.useState(false);
-  const wash = React2.useRef(new Animated.Value(0)).current;
-  React2.useEffect(() => setDraft(toField(column, value)), [column, value]);
+  const [draft, setDraft] = React3.useState(() => toField(column, value));
+  const [error, setError] = React3.useState(null);
+  const [pending, setPending] = React3.useState(false);
+  const wash = React3.useRef(new Animated.Value(0)).current;
+  React3.useEffect(() => setDraft(toField(column, value)), [column, value]);
   const commit = async (next) => {
     if (same(next, value)) {
       setError(null);
@@ -696,10 +701,12 @@ var sheet = createStyleSheet((theme) => ({
   operands: { flexDirection: "row", gap: theme.space.s2 },
   operand: { flex: 1 },
   chips: { flexDirection: "row", flexWrap: "wrap", gap: theme.space.s1 },
+  // The record sheet's enum radios: Chip sm metrics, drawn here because a
+  // radio group needs `role="radio"` on each one. On keeps the label weight.
   chip: {
-    minHeight: theme.tapMin,
+    minHeight: theme.ctl.sm,
     justifyContent: "center",
-    paddingHorizontal: theme.space.s3,
+    paddingHorizontal: theme.ctl.px.sm,
     borderRadius: theme.radius.full,
     borderWidth: theme.borderWidth.base,
     borderColor: theme.color.border,
@@ -715,7 +722,7 @@ var sheet = createStyleSheet((theme) => ({
     lineHeight: theme.type.footnote.lineHeight,
     color: theme.color.text
   },
-  chipTextOn: { color: theme.color.accentOnSoft, fontWeight: theme.fontWeight.bold },
+  chipTextOn: { color: theme.color.accentOnSoft },
   detailRow: {
     gap: theme.space[2],
     paddingBottom: theme.space.s2,
@@ -759,6 +766,384 @@ var sheet = createStyleSheet((theme) => ({
   mono: { fontFamily: theme.font.mono },
   pressed: { opacity: theme.state.pressedOpacity }
 }));
+function isEditable(column, row) {
+  const e = column.editable;
+  return typeof e === "function" ? e(row) : e === true;
+}
+function coerce2(column, row, raw) {
+  let value = raw;
+  if (typeof raw === "string") {
+    if (NUMERIC_TYPES.includes(column.type)) {
+      const n = Number(raw.replace(/[^0-9.eE+-]/g, ""));
+      if (!Number.isFinite(n)) return null;
+      value = n;
+    } else if (column.type === "date") {
+      const time = new Date(raw).getTime();
+      if (Number.isNaN(time)) return null;
+      value = time;
+    } else if (column.type === "boolean") {
+      value = /^(true|yes|1|y)$/i.test(raw.trim());
+    } else if (column.type === "tags") {
+      value = raw.split(/[,;]/).map((s) => s.trim()).filter(Boolean);
+    }
+  }
+  return column.validate?.(value, row) ? null : { value };
+}
+function useNativeRange(o) {
+  const {
+    enabled,
+    nodes,
+    columns,
+    ctx,
+    range,
+    setRange,
+    onCellEditCommit,
+    clipboard,
+    labels,
+    announce
+  } = o;
+  const [touched, setTouched] = React3.useState(false);
+  const nodeIndex = React3.useMemo(() => new Map(nodes.map((n, i) => [n.id, i])), [nodes]);
+  const colIndex = React3.useMemo(() => new Map(columns.map((c, i) => [c.id, i])), [columns]);
+  const rect = enabled ? rangeRect(range, nodeIndex, colIndex) : null;
+  const cellAt = (row, col) => {
+    const node = nodes[Math.max(0, Math.min(nodes.length - 1, row))];
+    const column = columns[Math.max(0, Math.min(columns.length - 1, col))];
+    return node && column ? { rowId: node.id, colId: column.id } : null;
+  };
+  const summary = (r) => {
+    const rows = r.r1 - r.r0 + 1;
+    const cols = r.c1 - r.c0 + 1;
+    return labels.rangeSummary(rows, cols, rows * cols);
+  };
+  const press = (row, col) => {
+    const cell = cellAt(row, col);
+    if (!cell) return;
+    setTouched(false);
+    setRange({ anchor: cell, focus: cell });
+  };
+  const longPress = (row, col) => {
+    const cell = cellAt(row, col);
+    if (!cell) return;
+    setTouched(true);
+    setRange({ anchor: cell, focus: cell });
+    announce(labels.rangeSummary(1, 1, 1));
+  };
+  const extend = (edge, row, col) => {
+    if (!rect) return;
+    const fixed = edge === "start" ? cellAt(rect.r1, rect.c1) : cellAt(rect.r0, rect.c0);
+    const moving = cellAt(row, col);
+    if (!fixed || !moving) return;
+    if (range && range.anchor.rowId === fixed.rowId && range.anchor.colId === fixed.colId && range.focus.rowId === moving.rowId && range.focus.colId === moving.colId)
+      return;
+    setRange({ anchor: fixed, focus: moving });
+  };
+  const settle = () => {
+    if (rect) announce(summary(rect));
+  };
+  const cells = (r) => {
+    const out = [];
+    for (let i = r.r0; i <= r.r1; i++) {
+      const node = nodes[i];
+      if (!node || node.kind !== "leaf") continue;
+      for (let c = r.c0; c <= r.c1; c++) {
+        const column = columns[c];
+        if (column) out.push({ node, column, dr: i - r.r0, dc: c - r.c0 });
+      }
+    }
+    return out;
+  };
+  const write = (list) => {
+    for (const { node, column, value } of list) {
+      void onCellEditCommit?.({
+        rowId: node.id,
+        row: node.row,
+        colId: column.id,
+        value,
+        previous: getValue(ctx, node.row, column.id)
+      });
+    }
+  };
+  const done = (message) => {
+    setTouched(false);
+    announce(message);
+  };
+  const copy = () => {
+    if (!rect) return;
+    const lines = [];
+    for (const { node, column, dr } of cells(rect)) {
+      (lines[dr] ??= []).push(
+        String(formatValue(ctx, column, getValue(ctx, node.row, column.id), node.row))
+      );
+    }
+    clipboard?.setString(
+      lines.filter(Boolean).map((l) => l.join("	")).join("\n")
+    );
+    done(labels.copiedCells(lines.reduce((n, l) => n + (l?.length ?? 0), 0)));
+  };
+  const editing = !!onCellEditCommit;
+  const paste = async () => {
+    if (!rect || !clipboard) return;
+    const matrix = parseClipboardMatrix(String(await clipboard.getString()));
+    const out = [];
+    let rejected = 0;
+    matrix.forEach((line, dr) => {
+      const node = nodes[rect.r0 + dr];
+      if (!node || node.kind !== "leaf") return;
+      line.forEach((raw, dc) => {
+        const column = columns[rect.c0 + dc];
+        const ok = column && isEditable(column, node.row) ? coerce2(column, node.row, raw) : null;
+        if (!column || !ok) rejected += 1;
+        else out.push({ node, column, value: ok.value });
+      });
+    });
+    write(out);
+    done(labels.pastedCells(out.length, rejected));
+  };
+  const fill = () => {
+    if (!rect) return;
+    const all = cells(rect);
+    const source = new Map(all.filter((c) => c.dr === all[0]?.dr).map((c) => [c.dc, c]));
+    const out = [];
+    let rejected = 0;
+    for (const cell of all) {
+      const from = source.get(cell.dc);
+      if (!from || cell.dr === from.dr) continue;
+      const raw = getValue(ctx, from.node.row, from.column.id);
+      const ok = isEditable(cell.column, cell.node.row) ? coerce2(cell.column, cell.node.row, raw) : null;
+      if (!ok) rejected += 1;
+      else out.push({ node: cell.node, column: cell.column, value: ok.value });
+    }
+    write(out);
+    done(labels.filledCells(out.length, rejected));
+  };
+  const clear = () => {
+    if (!rect) return;
+    const out = cells(rect).filter(
+      ({ node, column }) => isEditable(column, node.row) && getValue(ctx, node.row, column.id) != null
+    ).map(({ node, column }) => ({ node, column, value: null }));
+    write(out);
+    done(labels.clearedCells(out.length));
+  };
+  return {
+    rect,
+    anchor: rect ? range.anchor : null,
+    touched: touched && !!rect,
+    press,
+    longPress,
+    extend,
+    settle,
+    copy,
+    paste: editing && clipboard ? () => void paste() : null,
+    fill: editing && rect && rect.r1 > rect.r0 ? fill : null,
+    clear: editing ? clear : null
+  };
+}
+function colAt(g, x) {
+  for (let i = g.lefts.length - 1; i >= 0; i--) if (x >= g.lefts[i]) return i;
+  return 0;
+}
+function Handle({
+  x,
+  y,
+  edge,
+  geometry,
+  onMove,
+  onEnd,
+  label,
+  hint
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme("data-grid");
+  const hit = isAndroidIdiom(theme) ? theme.space[48] : theme.tapMin;
+  const latest = React3.useRef({ x, y, geometry, onMove, onEnd });
+  latest.current = { x, y, geometry, onMove, onEnd };
+  const origin = React3.useRef({ x: 0, y: 0 });
+  const responder = React3.useMemo(
+    () => (
+      // eslint-disable-next-line loam/no-pan-responder -- a range handle is a free 2-D drag; no RN gesture covers it
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: () => {
+          origin.current = { x: latest.current.x, y: latest.current.y };
+        },
+        onPanResponderMove: (_, g) => {
+          const { geometry: geo } = latest.current;
+          const inset = edge === "start" ? 1 : -1;
+          const px = origin.current.x + g.dx + inset;
+          const py = origin.current.y + g.dy + inset;
+          const row = Math.max(0, Math.min(geo.rows - 1, Math.floor(py / geo.rowHeight)));
+          latest.current.onMove(row, colAt(geo, px));
+        },
+        onPanResponderRelease: () => latest.current.onEnd(),
+        onPanResponderTerminate: () => latest.current.onEnd()
+      })
+    ),
+    [edge]
+  );
+  const step = (by) => {
+    const { geometry: geo } = latest.current;
+    const row = Math.floor((y + (edge === "start" ? 1 : -1)) / geo.rowHeight) + by;
+    onMove(Math.max(0, Math.min(geo.rows - 1, row)), colAt(geo, x + (edge === "start" ? 1 : -1)));
+    onEnd();
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...responder.panHandlers,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: label,
+      accessibilityHint: hint,
+      accessibilityActions: [{ name: "increment" }, { name: "decrement" }],
+      onAccessibilityAction: (e) => step(e.nativeEvent.actionName === "increment" ? 1 : -1),
+      testID: `range-handle-${edge}`,
+      style: [styles.handleHit, { width: hit, height: hit, left: x - hit / 2, top: y - hit / 2 }],
+      children: /* @__PURE__ */ jsx(View, { style: styles.handle })
+    }
+  );
+}
+function RangeOverlay({
+  range,
+  geometry,
+  scrollY,
+  top,
+  labels
+}) {
+  const { styles } = useStyles(sheet2);
+  const theme = useLoamTheme("data-grid");
+  const android = isAndroidIdiom(theme);
+  const { rect } = range;
+  if (!rect) return null;
+  const x0 = geometry.lefts[rect.c0] ?? 0;
+  const x1 = (geometry.lefts[rect.c1] ?? 0) + (geometry.widths[rect.c1] ?? 0);
+  const y0 = rect.r0 * geometry.rowHeight;
+  const y1 = (rect.r1 + 1) * geometry.rowHeight;
+  const items = [
+    { key: "copy", label: labels.copy, run: range.copy },
+    { key: "paste", label: labels.paste, run: range.paste },
+    { key: "fill", label: labels.fill, run: range.fill },
+    { key: "clear", label: labels.clear, run: range.clear }
+  ].filter((i) => !!i.run);
+  const menuH = android ? theme.space[48] : theme.tapMin;
+  const menuTop = y0 >= menuH + theme.space.s2 ? y0 - menuH - theme.space.s2 : y1 + theme.space.s2;
+  return /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: [styles.layer, { top }], children: /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      pointerEvents: "box-none",
+      style: [styles.fill, { transform: [{ translateY: Animated.multiply(scrollY, -1) }] }],
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            pointerEvents: "none",
+            testID: "range-edge",
+            style: [styles.edge, { left: x0, top: y0, width: x1 - x0, height: y1 - y0 }]
+          }
+        ),
+        range.touched ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              x: x0,
+              y: y0,
+              edge: "start",
+              geometry,
+              onMove: (r, c) => range.extend("start", r, c),
+              onEnd: range.settle,
+              label: labels.rangeStartHandle,
+              hint: labels.rangeHandleHint
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              x: x1,
+              y: y1,
+              edge: "end",
+              geometry,
+              onMove: (r, c) => range.extend("end", r, c),
+              onEnd: range.settle,
+              label: labels.rangeEndHandle,
+              hint: labels.rangeHandleHint
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            View,
+            {
+              role: "menu",
+              style: [
+                styles.menu,
+                android && styles.menuAndroid,
+                {
+                  top: menuTop,
+                  left: Math.max(0, (x0 + x1) / 2 - items.length * theme.space[72] / 2)
+                }
+              ],
+              children: items.map((item, i) => /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  role: "menuitem",
+                  accessibilityRole: "button",
+                  accessibilityLabel: item.label,
+                  onPress: item.run,
+                  style: ({ pressed }) => [
+                    styles.menuItem,
+                    { minHeight: menuH },
+                    i > 0 && !android && styles.menuSeparator,
+                    pressed && styles.pressed
+                  ],
+                  children: /* @__PURE__ */ jsx(Text, { style: [styles.menuText, android && styles.menuTextAndroid], children: item.label })
+                },
+                item.key
+              ))
+            }
+          )
+        ] }) : null
+      ]
+    }
+  ) });
+}
+var sheet2 = createStyleSheet((theme) => ({
+  layer: { position: "absolute", start: 0, end: 0, bottom: 0, overflow: "hidden" },
+  fill: { position: "absolute", top: 0, start: 0, end: 0, bottom: 0 },
+  edge: {
+    position: "absolute",
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.focus.ringColor
+  },
+  handleHit: { position: "absolute", alignItems: "center", justifyContent: "center" },
+  handle: {
+    width: theme.space.s3,
+    height: theme.space.s3,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.focus.ringColor,
+    backgroundColor: theme.color.surface
+  },
+  menu: {
+    position: "absolute",
+    flexDirection: "row",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.surface,
+    borderWidth: theme.borderWidth.hair,
+    borderColor: theme.color.border,
+    overflow: "hidden",
+    ...theme.shadow.md
+  },
+  menuAndroid: { borderRadius: theme.radius.sm },
+  menuItem: { justifyContent: "center", paddingHorizontal: theme.space.s3 },
+  menuSeparator: { borderStartWidth: theme.borderWidth.hair, borderStartColor: theme.color.border },
+  menuText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    color: theme.color.text
+  },
+  menuTextAndroid: { fontWeight: theme.fontWeight.medium },
+  pressed: { backgroundColor: theme.state.pressed }
+}));
 var TABLE_MIN_WIDTH = 680;
 var SKELETON_ROWS = 6;
 var CARD_FIELD_LIMIT = 4;
@@ -770,12 +1155,14 @@ function DataGrid({
   primaryColumn,
   layout = "auto",
   density,
+  size,
   initialState,
   state: controlled,
   onStateChange,
   gridId,
   storage,
-  selectionMode = "none",
+  selectionMode: selectionProp = "none",
+  clipboard,
   bulkActions,
   onRowPress,
   onCellEditCommit,
@@ -789,18 +1176,18 @@ function DataGrid({
   style,
   motion = "full"
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const theme = useLoamTheme("data-grid");
   const level = useResolvedMotion(motion, "data-grid");
   const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
   const providerLocale = useLoamLocale();
   const locale = localeProp ?? providerLocale;
-  const resolved = React2.useMemo(() => resolveColumns(columns), [columns]);
-  const identify = React2.useMemo(
+  const resolved = React3.useMemo(() => resolveColumns(columns), [columns]);
+  const identify = React3.useMemo(
     () => getRowId ?? ((row) => String(row.id)),
     [getRowId]
   );
-  const seed = React2.useMemo(
+  const seed = React3.useMemo(
     () => density ? { ...initialState, density } : initialState ?? {},
     // `density` is a starting tier, not a controlled slice — a caller that wants
     // to own it passes `state={{ density }}`, which is the one write path.
@@ -815,7 +1202,7 @@ function DataGrid({
     gridId,
     storage
   });
-  const setState = React2.useCallback(
+  const setState = React3.useCallback(
     (...args) => {
       if (args[1] === "sort" && level === "full") {
         const ds = theme.spring.ds;
@@ -828,11 +1215,11 @@ function DataGrid({
     },
     [writeState, level, theme.spring.ds]
   );
-  const visibleColumns = React2.useMemo(
+  const visibleColumns = React3.useMemo(
     () => state.columnOrder.map((id) => resolved.find((c) => c.id === id)).filter((c) => !!c && state.columnVisibility[c.id] !== false),
     [resolved, state.columnOrder, state.columnVisibility]
   );
-  const ctx = React2.useMemo(
+  const ctx = React3.useMemo(
     () => ({
       columnsById: new Map(resolved.map((c) => [c.id, c])),
       getRowId: identify,
@@ -849,7 +1236,7 @@ function DataGrid({
     }),
     [resolved, identify, state.formulas, locale, currency, now, labels]
   );
-  const model = React2.useMemo(
+  const model = React3.useMemo(
     () => buildRowModel({
       rows,
       visibleColumns,
@@ -861,15 +1248,30 @@ function DataGrid({
     }),
     [rows, visibleColumns, state, ctx]
   );
-  const [width, setWidth] = React2.useState(0);
+  const [width, setWidth] = React3.useState(0);
   const onLayout = (event) => {
     const next = event.nativeEvent.layout.width;
     if (next > 0 && Math.abs(next - width) > 1) setWidth(next);
   };
   const table = layout === "table" || layout === "auto" && width >= TABLE_MIN_WIDTH;
-  const rowHeight = Math.max(DENSITY_ROW_PX[state.density], theme.tapMin);
-  const [message, setMessage] = React2.useState("");
-  const toggleSort = React2.useCallback(
+  const rangeMode = selectionProp === "range" && table;
+  const selectionMode = selectionProp === "range" ? table ? "none" : "multi" : selectionProp;
+  const android = isAndroidIdiom(theme);
+  const rowHeight = size ? theme.ctl[size] : Math.max(DENSITY_ROW_PX[state.density], android ? theme.space[56] : theme.tapMin);
+  const [message, setMessage] = React3.useState("");
+  const range = useNativeRange({
+    enabled: rangeMode,
+    nodes: model.nodes,
+    columns: visibleColumns,
+    ctx,
+    range: state.range,
+    setRange: (next) => setState({ range: next, focusedCell: next?.focus ?? null }, "range"),
+    onCellEditCommit,
+    clipboard,
+    labels,
+    announce: setMessage
+  });
+  const toggleSort = React3.useCallback(
     (colId) => {
       const column = resolved.find((c) => c.id === colId);
       if (!column?.sortable) return;
@@ -889,15 +1291,15 @@ function DataGrid({
     },
     [resolved, state.sorting, setState, labels]
   );
-  const selectedIds = React2.useMemo(
+  const selectedIds = React3.useMemo(
     () => Object.keys(state.rowSelection).filter((id) => state.rowSelection[id]),
     [state.rowSelection]
   );
-  const selectedRows = React2.useMemo(
+  const selectedRows = React3.useMemo(
     () => model.filteredRows.filter((row) => state.rowSelection[identify(row)]),
     [model.filteredRows, state.rowSelection, identify]
   );
-  const toggleRow = React2.useCallback(
+  const toggleRow = React3.useCallback(
     (row) => {
       const id = identify(row);
       const next = selectionMode === "single" ? state.rowSelection[id] ? {} : { [id]: true } : { ...state.rowSelection };
@@ -909,10 +1311,10 @@ function DataGrid({
     },
     [identify, selectionMode, state.rowSelection, setState]
   );
-  const clearSelection = React2.useCallback(() => {
+  const clearSelection = React3.useCallback(() => {
     setState({ rowSelection: {} }, "select");
   }, [setState]);
-  const toggleGroup = React2.useCallback(
+  const toggleGroup = React3.useCallback(
     (key) => {
       const next = { ...state.expanded };
       if (next[key]) delete next[key];
@@ -921,21 +1323,21 @@ function DataGrid({
     },
     [state.expanded, setState]
   );
-  const [openSheet, setOpenSheet] = React2.useState(null);
-  const [detailId, setDetailId] = React2.useState(null);
-  const detail = React2.useMemo(
+  const [openSheet, setOpenSheet] = React3.useState(null);
+  const [detailId, setDetailId] = React3.useState(null);
+  const detail = React3.useMemo(
     () => detailId == null ? null : rows.find((row) => identify(row) === detailId) ?? null,
     [rows, detailId, identify]
   );
-  const openRow = React2.useCallback(
+  const openRow = React3.useCallback(
     (row) => {
       if (onRowPress) onRowPress(row);
       else setDetailId(identify(row));
     },
     [onRowPress, identify]
   );
-  const [focusIndex, setFocusIndex] = React2.useState(0);
-  const leaves = React2.useMemo(
+  const [focusIndex, setFocusIndex] = React3.useState(0);
+  const leaves = React3.useMemo(
     () => model.nodes.filter((n) => n.kind === "leaf"),
     [model.nodes]
   );
@@ -951,7 +1353,7 @@ function DataGrid({
     }
   };
   const keyProps = { onKeyDown: onGridKey };
-  const primary = React2.useMemo(
+  const primary = React3.useMemo(
     () => visibleColumns.find((c) => c.id === primaryColumn) ?? visibleColumns[0],
     [visibleColumns, primaryColumn]
   );
@@ -990,6 +1392,7 @@ function DataGrid({
       selectionMode,
       focusIndex,
       leaves,
+      range: rangeMode ? range : null,
       onToggleSort: toggleSort,
       onToggleRow: toggleRow,
       onToggleGroup: toggleGroup,
@@ -1020,7 +1423,16 @@ function DataGrid({
       style: [styles.root, style],
       ...keyProps,
       children: [
-        /* @__PURE__ */ jsx(
+        android && selectedIds.length > 0 ? /* @__PURE__ */ jsx(
+          ContextualAppBar,
+          {
+            count: selectedIds.length,
+            actions: bulkActions,
+            rows: selectedRows,
+            onClear: clearSelection,
+            labels
+          }
+        ) : /* @__PURE__ */ jsx(
           GridToolbar,
           {
             label,
@@ -1058,7 +1470,7 @@ function DataGrid({
             labels
           }
         ) : null,
-        selectedIds.length > 0 ? /* @__PURE__ */ jsx(
+        !android && selectedIds.length > 0 ? /* @__PURE__ */ jsx(
           BulkBar,
           {
             count: selectedIds.length,
@@ -1151,7 +1563,7 @@ function GridToolbar({
   onOpen,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   return /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
     searchable ? /* @__PURE__ */ jsx(
       Input,
@@ -1206,7 +1618,7 @@ function ToolPill({
   activeLabel,
   onPress
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const theme = useLoamTheme("data-grid");
   return /* @__PURE__ */ jsxs(
     Pressable,
@@ -1230,7 +1642,7 @@ function CountLine({
   busy,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   return /* @__PURE__ */ jsxs(View, { style: styles.countLine, children: [
     /* @__PURE__ */ jsx(Text, { style: styles.countText, children: labels.countLine(shown, total, selected) }),
     busy ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null
@@ -1246,16 +1658,28 @@ function TableSurface({
   focusIndex,
   leaves,
   onToggleSort,
+  range,
   onToggleRow,
   onToggleGroup,
   onOpenRow,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const theme = useLoamTheme("data-grid");
   const selectWidth = selectionMode === "none" ? 0 : theme.tapMin;
   const widths = columns.map((c) => state.columnSizing[c.id] ?? c.size);
   const total = widths.reduce((sum, w) => sum + w, 0) + selectWidth;
+  const scrollY = React3.useRef(new Animated.Value(0)).current;
+  const [headerH, setHeaderH] = React3.useState(rowHeight);
+  const geometry = React3.useMemo(() => {
+    const lefts = [];
+    let x = selectWidth;
+    for (const w of widths) {
+      lefts.push(x);
+      x += w;
+    }
+    return { lefts, widths, rowHeight, rows: model.nodes.length };
+  }, [widths, selectWidth, rowHeight, model.nodes.length]);
   const renderNode = ({ item, index }) => {
     if (item.kind === "group") {
       return /* @__PURE__ */ jsx(
@@ -1289,20 +1713,52 @@ function TableSurface({
             styles.tableRow,
             { width: total, minHeight: rowHeight },
             state.zebra && index % 2 === 1 && styles.zebra,
-            selected && styles.selectedRow,
-            focused && styles.focusedRow
+            selected && styles.selectedRow
           ],
           children: [
+            focused ? /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.focusedRow }) : null,
             selectionMode === "none" ? null : /* @__PURE__ */ jsx(View, { style: [styles.selectCell, { width: selectWidth }], children: /* @__PURE__ */ jsx(
-              Checkbox,
+              RowMark,
               {
-                checked: selected,
-                onCheckedChange: () => onToggleRow(item.row),
-                accessibilityLabel: labels.selectRow(name),
-                size: "sm"
+                selected,
+                onToggle: () => onToggleRow(item.row),
+                accessibilityLabel: labels.selectRow(name)
               }
             ) }),
-            /* @__PURE__ */ jsx(
+            range ? /* @__PURE__ */ jsx(View, { style: styles.tableRowBody, children: columns.map((column, i) => {
+              const rect = range.rect;
+              const inRange = !!rect && index >= rect.r0 && index <= rect.r1 && i >= rect.c0 && i <= rect.c1;
+              const anchor = range.anchor?.rowId === item.id && range.anchor.colId === column.id;
+              const multi = !!rect && (rect.r1 > rect.r0 || rect.c1 > rect.c0);
+              return /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  accessibilityLabel: labels.cellName(
+                    column.header,
+                    String(formatValue(ctx, column, getValue(ctx, item.row, column.id), item.row))
+                  ),
+                  accessibilityState: { selected: inRange },
+                  onPress: () => anchor && !multi ? onOpenRow(item.row) : range.press(index, i),
+                  onLongPress: () => range.longPress(index, i),
+                  style: ({ pressed }) => [
+                    inRange && multi && !anchor && styles.rangeWash,
+                    pressed && styles.pressed
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    Cell,
+                    {
+                      column,
+                      ctx,
+                      row: item.row,
+                      width: widths[i],
+                      depth: i === 0 ? item.depth : 0
+                    }
+                  )
+                },
+                column.id
+              );
+            }) }) : /* @__PURE__ */ jsx(
               Pressable,
               {
                 accessibilityRole: "button",
@@ -1335,24 +1791,32 @@ function TableSurface({
     {
       horizontal: true,
       showsHorizontalScrollIndicator: true,
+      style: styles.tableScroll,
       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),
-              labels
-            },
-            column.id
-          ))
-        ] }),
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            onLayout: (e) => setHeaderH(e.nativeEvent.layout.height),
+            style: [styles.headerRow, { width: total, minHeight: rowHeight }],
+            children: [
+              selectionMode === "none" ? null : /* @__PURE__ */ jsx(View, { style: { width: selectWidth } }),
+              columns.map((column, i) => /* @__PURE__ */ jsx(
+                HeaderCell,
+                {
+                  column,
+                  width: widths[i],
+                  sort: state.sorting.find((s) => s.id === column.id),
+                  rank: state.sorting.findIndex((s) => s.id === column.id),
+                  multi: state.sorting.length > 1,
+                  onPress: () => onToggleSort(column.id),
+                  labels
+                },
+                column.id
+              ))
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           FlatList,
           {
@@ -1364,9 +1828,24 @@ function TableSurface({
               length: rowHeight,
               offset: rowHeight * index,
               index
-            })
+            }),
+            onScroll: range ? Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+              useNativeDriver: false
+            }) : void 0,
+            scrollEventThrottle: 16,
+            extraData: range?.rect
           }
-        )
+        ),
+        range ? /* @__PURE__ */ jsx(
+          RangeOverlay,
+          {
+            range,
+            geometry,
+            scrollY,
+            top: headerH,
+            labels
+          }
+        ) : null
       ] })
     }
   );
@@ -1380,8 +1859,10 @@ function HeaderCell({
   onPress,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const theme = useLoamTheme("data-grid");
+  const android = isAndroidIdiom(theme);
+  const head = resolveTextRole(theme, android ? "labelLarge" : "footnote", android);
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -1398,18 +1879,32 @@ function HeaderCell({
       style: ({ pressed }) => [
         styles.headerCell,
         { width },
-        column.align === "end" && styles.alignEnd,
-        column.align === "center" && styles.alignCentre,
+        column.align === "end" && styles.headerEnd,
+        column.align === "center" && styles.headerCentre,
         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
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            numberOfLines: 1,
+            style: [
+              styles.headerText,
+              {
+                fontSize: head.fontSize,
+                lineHeight: head.lineHeight,
+                fontWeight: android ? head.fontWeight : theme.fontWeight.semibold
+              }
+            ],
+            children: [
+              column.header,
+              column.headerUnit ? /* @__PURE__ */ jsxs(Text, { style: styles.headerUnit, children: [
+                " ",
+                column.headerUnit
+              ] }) : null
+            ]
+          }
+        ),
         sort ? /* @__PURE__ */ jsxs(View, { style: styles.sortMark, children: [
           /* @__PURE__ */ jsx(
             Icon,
@@ -1425,6 +1920,45 @@ function HeaderCell({
     }
   );
 }
+function RowMark({
+  selected,
+  onToggle,
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  if (isAndroidIdiom(theme)) {
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: selected,
+        onCheckedChange: onToggle,
+        accessibilityLabel,
+        size: "sm"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "checkbox",
+      accessibilityState: { checked: selected },
+      "aria-checked": selected,
+      accessibilityLabel,
+      onPress: onToggle,
+      style: styles.rowMarkHit,
+      children: /* @__PURE__ */ jsx(View, { style: [styles.rowMark, selected && styles.rowMarkOn], children: selected ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: "check",
+          size: theme.icon.sm,
+          color: theme.color.accentInk,
+          strokeWidth: theme.icon.strokeBold
+        }
+      ) : null })
+    }
+  );
+}
 function Cell({
   column,
   ctx,
@@ -1432,10 +1966,11 @@ function Cell({
   width,
   depth
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const theme = useLoamTheme("data-grid");
   const value = getValue(ctx, row, column.id);
   const text = formatValue(ctx, column, value, row);
+  const body = resolveTextRole(theme, "body", isAndroidIdiom(theme));
   return /* @__PURE__ */ jsx(
     View,
     {
@@ -1451,6 +1986,7 @@ function Cell({
           numberOfLines: 1,
           style: [
             styles.cellText,
+            { fontSize: body.fontSize, lineHeight: body.lineHeight },
             column.mono && styles.mono,
             column.align === "end" && styles.tabular
           ],
@@ -1470,7 +2006,7 @@ function GroupRow({
   onToggle,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const theme = useLoamTheme("data-grid");
   const field = ctx.columnsById.get(node.field);
   const summary = columns.map((c) => {
@@ -1525,7 +2061,7 @@ function CardSurface({
   onOpenRow,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const fields = columns.filter((c) => c.id !== primary?.id);
   const shown = fields.slice(0, CARD_FIELD_LIMIT);
   const hidden = fields.length - shown.length;
@@ -1600,7 +2136,7 @@ function FooterStrip({
   state,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const cells = columns.map((column) => ({ column, cell: model.footer[column.id] })).filter((entry) => !!entry.cell);
   if (cells.length === 0) return null;
   const filtered = model.filteredCount !== model.totalCount;
@@ -1626,7 +2162,7 @@ function BulkBar({
   onClear,
   labels
 }) {
-  const { styles } = useStyles(sheet2);
+  const { styles } = useStyles(sheet3);
   const theme = useLoamTheme("data-grid");
   return /* @__PURE__ */ jsxs(View, { role: "toolbar", accessibilityLabel: labels.selectedCount(count), style: styles.bulkBar, children: [
     /* @__PURE__ */ jsx(
@@ -1645,10 +2181,10 @@ function BulkBar({
       {
         accessibilityRole: "button",
         accessibilityLabel: action.label,
-        onPress: () => action.onRun(rows),
+        onPress: () => action.onSelect(rows),
         style: ({ pressed }) => [
           styles.bulkAction,
-          action.destructive && styles.bulkActionDanger,
+          action.danger && styles.bulkActionDanger,
           pressed && styles.pressed
         ],
         children: [
@@ -1657,22 +2193,69 @@ function BulkBar({
             {
               name: action.icon,
               size: theme.icon.sm,
-              color: action.destructive ? theme.color.dangerInk : theme.color.accentInk
+              color: action.danger ? theme.color.dangerInk : theme.color.accentInk
             }
           ) : null,
-          /* @__PURE__ */ jsx(
-            Text,
-            {
-              style: [styles.bulkActionText, action.destructive && styles.bulkActionTextDanger],
-              children: action.label
-            }
-          )
+          /* @__PURE__ */ jsx(Text, { style: [styles.bulkActionText, action.danger && styles.bulkActionTextDanger], children: action.label })
         ]
       },
       action.id
     )) })
   ] });
 }
+function ContextualAppBar({
+  count,
+  actions,
+  rows,
+  onClear,
+  labels
+}) {
+  const { styles } = useStyles(sheet3);
+  const theme = useLoamTheme("data-grid");
+  const title = resolveTextRole(theme, "titleLarge", true);
+  return /* @__PURE__ */ jsxs(View, { role: "toolbar", accessibilityLabel: labels.selectedCount(count), style: styles.cab, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: labels.clearSelection,
+        onPress: onClear,
+        style: ({ pressed }) => [styles.cabIcon, pressed && styles.pressed],
+        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.color.text })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        numberOfLines: 1,
+        accessibilityRole: "header",
+        style: [styles.cabTitle, { fontSize: title.fontSize, lineHeight: title.lineHeight }],
+        children: labels.selectedCount(count)
+      }
+    ),
+    (actions ?? []).map((action) => /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel: action.label,
+        onPress: () => action.onSelect(rows),
+        style: ({ pressed }) => [
+          action.icon ? styles.cabIcon : styles.cabText,
+          pressed && styles.pressed
+        ],
+        children: action.icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: action.icon,
+            size: theme.icon.md,
+            color: action.danger ? theme.color.dangerOnSoft : theme.color.text2
+          }
+        ) : /* @__PURE__ */ jsx(Text, { style: [styles.cabActionText, action.danger && styles.cabActionDanger], children: action.label })
+      },
+      action.id
+    ))
+  ] });
+}
 function rowLabel(ctx, columns, row, labels) {
   return labels.rowSummary(
     columns.slice(0, CARD_FIELD_LIMIT + 1).map((column) => ({
@@ -1681,7 +2264,7 @@ function rowLabel(ctx, columns, row, labels) {
     }))
   );
 }
-var sheet2 = createStyleSheet((theme) => ({
+var sheet3 = createStyleSheet((theme) => ({
   root: { flex: 1, alignSelf: "stretch", gap: theme.space.s2 },
   body: { flex: 1, minHeight: theme.space[40] },
   centre: { flex: 1, alignItems: "center", justifyContent: "center", padding: theme.space.s6 },
@@ -1759,11 +2342,10 @@ var sheet2 = createStyleSheet((theme) => ({
   },
   headerText: {
     flexShrink: 1,
+    ...theme.type.footnote,
     fontFamily: theme.font.sans,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    fontWeight: theme.fontWeight.bold,
-    color: theme.color.text
+    fontWeight: theme.platform === "Android" ? theme.fontWeight.medium : theme.fontWeight.semibold,
+    color: theme.color.text2
   },
   headerUnit: { fontWeight: theme.fontWeight.regular, color: theme.color.text2 },
   sortMark: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
@@ -1773,6 +2355,7 @@ var sheet2 = createStyleSheet((theme) => ({
     color: theme.color.accentOnSoft
   },
   tableBody: { flex: 1 },
+  tableScroll: { flex: 1 },
   tableRow: {
     flexDirection: "row",
     alignItems: "stretch",
@@ -1782,9 +2365,33 @@ var sheet2 = createStyleSheet((theme) => ({
   },
   zebra: { backgroundColor: theme.color.surface2 },
   selectedRow: { backgroundColor: theme.state.selected },
+  // loam-contrast-ignore — a selection-range wash spanning cells; a per-cell edge would stripe the grid.
+  rangeWash: { backgroundColor: theme.color.accentSoft },
   focusedRow: {
-    borderStartWidth: theme.borderWidth.heavy,
-    borderStartColor: theme.focus.ringColor
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    end: 0,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.focus.ringColor
+  },
+  // iOS edit-mode mark: a 20 circle, accent filled with the check when on.
+  rowMark: {
+    width: theme.icon.lg,
+    height: theme.icon.lg,
+    borderRadius: theme.radius.full,
+    borderWidth: theme.borderWidth.thick,
+    borderColor: theme.color.borderStrong,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  rowMarkOn: { backgroundColor: theme.color.accent, borderColor: theme.color.accent },
+  rowMarkHit: {
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    alignItems: "center",
+    justifyContent: "center"
   },
   selectCell: { alignItems: "center", justifyContent: "center" },
   tableRowBody: { flex: 1, flexDirection: "row", alignItems: "center" },
@@ -1801,6 +2408,9 @@ var sheet2 = createStyleSheet((theme) => ({
   skeletonRows: { alignSelf: "stretch", gap: theme.space.s2, padding: theme.space.s3 },
   alignEnd: { alignItems: "flex-end" },
   alignCentre: { alignItems: "center" },
+  // The header cell lays out in a row, so its alignment is on the main axis.
+  headerEnd: { justifyContent: "flex-end" },
+  headerCentre: { justifyContent: "center" },
   groupRow: {
     flexDirection: "row",
     alignItems: "center",
@@ -1907,6 +2517,34 @@ var sheet2 = createStyleSheet((theme) => ({
     backgroundColor: theme.color.accent,
     ...theme.shadow.md
   },
+  cab: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[2],
+    minHeight: theme.layout.appbarH,
+    paddingHorizontal: theme.space[2],
+    backgroundColor: theme.state.selected
+  },
+  cabIcon: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  cabText: {
+    minHeight: theme.tapMin,
+    paddingHorizontal: theme.space.s3,
+    justifyContent: "center"
+  },
+  cabTitle: { flex: 1, fontFamily: theme.font.sans, color: theme.color.text },
+  cabActionText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.accentOnSoft
+  },
+  cabActionDanger: { color: theme.color.dangerOnSoft },
   bulkClear: {
     minWidth: theme.tapMin,
     minHeight: theme.tapMin,