@btndprojects/loam-ui-native 0.1.1 → 0.2.1

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

@@ -1,41 +1,133 @@
-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 { 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 { expandedProps } from './chunk-W23G6JLF.js';
+import { Button } from './chunk-E2E3I5W2.js';
+import { haptics } from './chunk-NY2U3PBI.js';
+import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-UXGIW7OK.js';
+import { useResolvedMotion, motionTiming } from './chunk-J64KGCGX.js';
 import * as React2 from 'react';
-import { View, Text, Pressable, ScrollView, FlatList } from 'react-native';
+import { View, Text, Pressable, ScrollView, LayoutAnimation, FlatList, Animated } 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 { getValue, formatValue, resolveColumns, useGridState, buildRowModel, DENSITY_ROW_PX } 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"
+// src/data-grid/data-grid-labels.ts
+var DEFAULT_DATA_GRID_LABELS = {
+  searchPlaceholder: (label) => `Search ${label.toLowerCase()}`,
+  searchLabel: (label) => `Search ${label}`,
+  sort: "Sort",
+  filter: "Filter",
+  display: "Display",
+  toolActive: (label, count) => `${label}, ${count} active`,
+  countLine: (shown, total, selected) => `${shown !== total ? `${shown} of ${total} rows` : `${total} rows`}${selected > 0 ? ` \xB7 ${selected} selected` : ""}`,
+  errorTitle: "These rows could not be loaded",
+  forbiddenTitle: "You do not have access to these rows",
+  offlineTitle: "You are offline",
+  offlineBody: "The rows below may be out of date until the connection is back.",
+  retry: "Try again",
+  loadingRows: "Loading rows",
+  noResultsTitle: "No rows match",
+  noResultsBody: "Clear a filter or widen the search to see rows again.",
+  clearFilters: "Clear filters",
+  emptyTitle: "Nothing here yet",
+  sortedAscending: (column) => `Sorted by ${column}, ascending.`,
+  sortedDescending: (column) => `Sorted by ${column}, descending.`,
+  sortingCleared: (column) => `Sorting cleared on ${column}.`,
+  selectRow: (name) => `Select ${name}`,
+  openRecordHint: "Double tap to see the whole record",
+  headerName: (header, unit, sorted) => `${header}${unit ? `, ${unit}` : ""}` + (sorted ? `, sorted ${sorted === "desc" ? "descending" : "ascending"}` : ""),
+  sortHint: "Double tap to change the sort",
+  groupName: (field, key, count) => `${field ? `${field}: ` : ""}${key}, ${count} rows`,
+  groupAggregate: (header, fn, value) => `${header} ${fn.toLowerCase()} ${value}`,
+  rowSummary: (fields) => fields.map((f) => `${f.header}: ${f.value}`).join(", "),
+  moreFields: (count) => `and ${count} more`,
+  footerCell: (header, fn) => `${header} \xB7 ${fn.toLowerCase()}`,
+  yes: "Yes",
+  no: "No",
+  durationHours: (n) => `${n}h`,
+  emptyCell: "\u2014",
+  scope: "Scope",
+  filteredRows: (count) => `${count} filtered rows`,
+  groupedBy: "Grouped by",
+  aggregations: {
+    sum: "Sum",
+    avg: "Average",
+    min: "Min",
+    max: "Max",
+    count: "Count",
+    countDistinct: "Distinct",
+    median: "Median"
+  },
+  selectedCount: (count) => `${count} selected`,
+  clearSelection: "Clear selection",
+  noSortable: "No column in this grid can be sorted.",
+  ascending: "ascending",
+  descending: "descending",
+  notSorted: "not sorted",
+  sortCycleHint: "Double tap to cycle ascending, descending, off",
+  clearSorting: "Clear sorting",
+  match: "Match",
+  matchAll: "All",
+  matchAny: "Any",
+  removeFilter: (column) => `Remove the filter on ${column}`,
+  columnTitle: "Column",
+  filterColumn: (column) => `Filter column, currently ${column}`,
+  conditionTitle: "Condition",
+  conditionCurrent: (operator) => `Condition, currently ${operator}`,
+  operators: {
+    contains: "contains",
+    notContains: "does not contain",
+    equals: "is exactly",
+    startsWith: "starts with",
+    endsWith: "ends with",
+    isEmpty: "is empty",
+    isNotEmpty: "is not empty",
+    is: "is",
+    isNot: "is not",
+    isAnyOf: "is any of",
+    eq: "is",
+    neq: "is not",
+    gt: "is more than",
+    gte: "is at least",
+    lt: "is less than",
+    lte: "is at most",
+    between: "is between",
+    before: "is before",
+    after: "is after",
+    hasAny: "has any of",
+    hasAll: "has all of"
+  },
+  valuePlaceholder: "Value",
+  valueLabel: (column) => `Value for the filter on ${column}`,
+  upperPlaceholder: "and",
+  upperLabel: (column) => `Upper bound for the filter on ${column}`,
+  addCondition: "Add a condition",
+  clearAllFilters: "Clear all filters",
+  rowHeight: "Row height",
+  densityCompact: "Compact",
+  densityStandard: "Standard",
+  densityComfortable: "Roomy",
+  rowHeightNote: "Every row opens a record, so the tiers are floored at the tap minimum \u2014 on a narrow screen compact and standard are the same height.",
+  shadeRows: "Shade alternating rows",
+  cardsSet: "This grid is set to cards.",
+  cardsNarrow: 'This grid is showing cards because its container is narrow. Widen it, or set layout="table".',
+  groupBy: "Group by",
+  noGrouping: "No grouping",
+  none: "None",
+  groupByColumn: (column) => `Group by ${column}`,
+  columns: "Columns",
+  lastColumnHint: "The last visible column cannot be hidden",
+  headerWithUnit: (header, unit) => `${header} (${unit})`,
+  saveFailed: "Could not save",
+  datePlaceholder: "YYYY-MM-DD"
 };
 var NULLARY = ["isEmpty", "isNotEmpty"];
 function SortSheet({
@@ -44,13 +136,15 @@ function SortSheet({
   columns,
   sorting,
   onToggle,
-  onClear
+  onClear,
+  labels: labelsProp
 }) {
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("data-grid");
   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,
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: labels.sort, children: /* @__PURE__ */ jsxs(View, { style: styles.body, children: [
+    sortable.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: labels.noSortable }) : null,
     sortable.map((column) => {
       const at = sorting.findIndex((s) => s.id === column.id);
       const spec = at >= 0 ? sorting[at] : void 0;
@@ -60,9 +154,9 @@ function SortSheet({
           accessibilityRole: "button",
           accessibilityLabel: column.header,
           accessibilityValue: {
-            text: spec ? spec.desc ? "descending" : "ascending" : "not sorted"
+            text: spec ? spec.desc ? labels.descending : labels.ascending : labels.notSorted
           },
-          accessibilityHint: "Double tap to cycle ascending, descending, off",
+          accessibilityHint: labels.sortCycleHint,
           onPress: () => onToggle(column.id),
           style: ({ pressed }) => [styles.row, pressed && styles.pressed],
           children: [
@@ -83,7 +177,7 @@ function SortSheet({
         column.id
       );
     }),
-    sorting.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", onPress: onClear, leadingIcon: "x", children: "Clear sorting" }) : null
+    sorting.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", onPress: onClear, leadingIcon: "x", children: labels.clearSorting }) : null
   ] }) });
 }
 function FilterSheet({
@@ -94,8 +188,10 @@ function FilterSheet({
   ctx,
   filters,
   logic,
-  onChange
+  onChange,
+  labels: labelsProp
 }) {
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   const filterable = columns.filter((c) => c.filterable);
   const update = (index, patch) => {
@@ -103,25 +199,29 @@ function FilterSheet({
     onChange(next, logic);
   };
   const remove = (index) => {
-    onChange(filters.filter((_, i) => i !== index), logic);
+    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: [
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: labels.filter, detents: ["half", "full"], children: /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.body, children: [
     filters.length > 1 ? /* @__PURE__ */ jsxs(View, { style: styles.logicRow, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Match" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.hint, children: labels.match }),
       /* @__PURE__ */ jsx(
         SegmentedControl,
         {
+          accessibilityLabel: labels.match,
           size: "sm",
           value: logic,
           onValueChange: (next) => onChange([...filters], next),
           items: [
-            { value: "and", label: "All" },
-            { value: "or", label: "Any" }
+            { value: "and", label: labels.matchAll },
+            { value: "or", label: labels.matchAny }
           ]
         }
       )
@@ -139,7 +239,7 @@ function FilterSheet({
             Pressable,
             {
               accessibilityRole: "button",
-              accessibilityLabel: `Remove the filter on ${column.header}`,
+              accessibilityLabel: labels.removeFilter(column.header),
               onPress: () => remove(index),
               style: ({ pressed }) => [styles.iconButton, pressed && styles.pressed],
               children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 16 })
@@ -149,8 +249,8 @@ function FilterSheet({
         /* @__PURE__ */ jsx(
           Picker,
           {
-            title: "Column",
-            accessibilityLabel: `Filter column, currently ${column.header}`,
+            title: labels.columnTitle,
+            accessibilityLabel: labels.filterColumn(column.header),
             value: filter.id,
             items: filterable.map((c) => ({ value: c.id, label: c.header })),
             onValueChange: (id) => {
@@ -163,10 +263,10 @@ function FilterSheet({
         /* @__PURE__ */ jsx(
           Picker,
           {
-            title: "Condition",
-            accessibilityLabel: `Condition, currently ${OPERATOR_LABELS[filter.op]}`,
+            title: labels.conditionTitle,
+            accessibilityLabel: labels.conditionCurrent(labels.operators[filter.op]),
             value: filter.op,
-            items: operators.map((op) => ({ value: op, label: OPERATOR_LABELS[op] })),
+            items: operators.map((op) => ({ value: op, label: labels.operators[op] })),
             onValueChange: (op) => update(index, { op }),
             size: "sm"
           }
@@ -196,8 +296,8 @@ function FilterSheet({
               size: "sm",
               value: String(filter.value ?? ""),
               onChangeText: (text) => update(index, { value: text }),
-              placeholder: "Value",
-              accessibilityLabel: `Value for the filter on ${column.header}`,
+              placeholder: labels.valuePlaceholder,
+              accessibilityLabel: labels.valueLabel(column.header),
               style: styles.operand
             }
           ),
@@ -207,16 +307,16 @@ function FilterSheet({
               size: "sm",
               value: String(filter.value2 ?? ""),
               onChangeText: (text) => update(index, { value2: text }),
-              placeholder: "and",
-              accessibilityLabel: `Upper bound for the filter on ${column.header}`,
+              placeholder: labels.upperPlaceholder,
+              accessibilityLabel: labels.upperLabel(column.header),
               style: styles.operand
             }
           ) : null
         ] })
       ] }, `${filter.id}-${index}`);
     }),
-    /* @__PURE__ */ jsx(Button, { variant: "tonal", leadingIcon: "plus", onPress: add, fullWidth: true, children: "Add a condition" }),
-    filters.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", leadingIcon: "x", onPress: () => onChange([], logic), fullWidth: true, children: "Clear all filters" }) : null
+    /* @__PURE__ */ jsx(Button, { variant: "tonal", leadingIcon: "plus", onPress: add, fullWidth: true, children: labels.addCondition }),
+    filters.length > 0 ? /* @__PURE__ */ jsx(Button, { variant: "ghost", leadingIcon: "x", onPress: () => onChange([], logic), fullWidth: true, children: labels.clearAllFilters }) : null
   ] }) });
 }
 function enumValues(column, rows, ctx) {
@@ -237,62 +337,59 @@ function DisplaySheet({
   state,
   layout,
   table,
-  onSetState
+  onSetState,
+  labels: labelsProp
 }) {
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
   const { styles } = useStyles(sheet);
   const groupable = columns.filter((c) => c.groupable);
   const visible = state.columnOrder.filter((id) => state.columnVisibility[id] !== false);
-  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: "Display", detents: ["half", "full"], children: /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.body, children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Row height" }),
+  return /* @__PURE__ */ jsx(Sheet, { open, onClose, title: labels.display, detents: ["half", "full"], children: /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.body, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.section, children: labels.rowHeight }),
     /* @__PURE__ */ jsx(
       SegmentedControl,
       {
+        accessibilityLabel: labels.rowHeight,
         value: state.density,
         onValueChange: (next) => onSetState({ density: next }, "density"),
         items: [
-          { value: "compact", label: "Compact" },
-          { value: "standard", label: "Standard" },
-          { value: "comfortable", label: "Roomy" }
+          { value: "compact", label: labels.densityCompact },
+          { value: "standard", label: labels.densityStandard },
+          { value: "comfortable", label: labels.densityComfortable }
         ]
       }
     ),
-    /* @__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." }),
+    /* @__PURE__ */ jsx(Text, { style: styles.hint, children: labels.rowHeightNote }),
     table ? /* @__PURE__ */ jsxs(
       Pressable,
       {
         accessibilityRole: "checkbox",
         accessibilityState: { checked: state.zebra },
-        accessibilityLabel: "Shade alternating rows",
+        accessibilityLabel: labels.shadeRows,
         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(Text, { style: styles.rowLabel, children: labels.shadeRows }),
           /* @__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".' }),
+    ) : /* @__PURE__ */ jsx(Text, { style: styles.hint, children: layout === "cards" ? labels.cardsSet : labels.cardsNarrow }),
     groupable.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Group by" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.section, children: labels.groupBy }),
       /* @__PURE__ */ jsxs(View, { style: styles.chips, children: [
         /* @__PURE__ */ jsx(
           Pressable,
           {
             accessibilityRole: "button",
             accessibilityState: { selected: state.grouping.length === 0 },
-            accessibilityLabel: "No grouping",
+            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: "None"
-              }
-            )
+            children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, state.grouping.length === 0 && styles.chipTextOn], children: labels.none })
           }
         ),
         groupable.map((column) => {
@@ -302,7 +399,7 @@ function DisplaySheet({
             {
               accessibilityRole: "button",
               accessibilityState: { selected: active },
-              accessibilityLabel: `Group by ${column.header}`,
+              accessibilityLabel: labels.groupByColumn(column.header),
               onPress: () => onSetState({ grouping: active ? [] : [column.id] }, "group"),
               style: ({ pressed }) => [
                 styles.chip,
@@ -316,7 +413,7 @@ function DisplaySheet({
         })
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx(Text, { style: styles.section, children: "Columns" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.section, children: labels.columns }),
     columns.map((column) => {
       const on = state.columnVisibility[column.id] !== false;
       const last = on && visible.length === 1;
@@ -326,7 +423,7 @@ function DisplaySheet({
           accessibilityRole: "checkbox",
           accessibilityState: { checked: on, disabled: !column.hideable || last },
           accessibilityLabel: column.header,
-          accessibilityHint: last ? "The last visible column cannot be hidden" : void 0,
+          accessibilityHint: last ? labels.lastColumnHint : void 0,
           disabled: !column.hideable || last,
           onPress: () => onSetState(
             { columnVisibility: { ...state.columnVisibility, [column.id]: !on } },
@@ -350,22 +447,195 @@ function DisplaySheet({
 function StateBox({ on, disabled }) {
   return /* @__PURE__ */ jsx(View, { pointerEvents: "none", ...{ "aria-hidden": true }, children: /* @__PURE__ */ jsx(Checkbox, { checked: on, disabled, size: "sm" }) });
 }
+var NUMERIC = ["number", "currency", "percent", "rating", "duration"];
+function canEdit(column, row) {
+  const e = column.editable;
+  return typeof e === "function" ? e(row) : e === true;
+}
+function coerce(column, raw) {
+  if (NUMERIC.includes(column.type)) {
+    const n = Number(raw.replace(/[^0-9.eE+-]/g, ""));
+    return raw.trim() === "" ? null : Number.isFinite(n) ? n : null;
+  }
+  if (column.type === "date") {
+    if (!raw) return null;
+    const t = (/* @__PURE__ */ new Date(`${raw}T00:00:00`)).getTime();
+    return Number.isNaN(t) ? null : t;
+  }
+  if (column.type === "tags") {
+    return raw.split(/[,\n]/).map((v) => v.trim()).filter(Boolean);
+  }
+  return raw;
+}
+function toField(column, value) {
+  if (value == null) return "";
+  if (column.type === "date") {
+    const d = new Date(Number(value));
+    return Number.isNaN(d.getTime()) ? "" : d.toISOString().slice(0, 10);
+  }
+  if (column.type === "tags") return Array.isArray(value) ? value.join(", ") : String(value);
+  return String(value);
+}
+function same(a, b) {
+  return Array.isArray(a) && Array.isArray(b) ? a.length === b.length && a.every((v, i) => v === b[i]) : Object.is(a, b);
+}
+function DetailField({
+  row,
+  column,
+  value,
+  onCommit,
+  motion,
+  labels
+}) {
+  const theme = useLoamTheme("data-grid");
+  const { styles } = useStyles(sheet);
+  const level = useResolvedMotion(motion, "data-grid");
+  const [draft, setDraft] = 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 commit = async (next) => {
+    if (same(next, value)) {
+      setError(null);
+      return;
+    }
+    const invalid = column.validate?.(next, row) ?? null;
+    if (invalid) {
+      setError(invalid);
+      haptics.notify("error");
+      return;
+    }
+    setError(null);
+    setPending(true);
+    try {
+      await onCommit(column, next, value);
+      haptics.notify("success");
+      if (level !== "none") {
+        wash.setValue(1);
+        Animated.timing(wash, {
+          toValue: 0,
+          // Full motion lets the wash linger on the collapse token; reduced
+          // keeps the short dissolve.
+          ...level === "full" ? { duration: theme.motion.collapse.duration } : motionTiming(level),
+          useNativeDriver: false
+        }).start();
+      }
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : labels.saveFailed);
+      haptics.notify("error");
+    } finally {
+      setPending(false);
+    }
+  };
+  const label = column.headerUnit ? labels.headerWithUnit(column.header, column.headerUnit) : column.header;
+  const field = column.type !== "boolean" && !(column.type === "enum" && column.options?.length);
+  let control;
+  if (column.type === "boolean") {
+    control = /* @__PURE__ */ jsx(
+      Switch,
+      {
+        value: value === true,
+        pending,
+        accessibilityLabel: label,
+        onValueChange: (on) => void commit(on),
+        motion
+      }
+    );
+  } else if (column.type === "enum" && column.options?.length) {
+    control = /* @__PURE__ */ jsx(View, { style: styles.chips, role: "radiogroup", accessibilityLabel: label, children: column.options.map((option) => {
+      const on = value === option;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          role: "radio",
+          "aria-checked": on,
+          accessibilityState: { checked: on },
+          onPress: () => void commit(option),
+          style: ({ pressed }) => [styles.chip, on && styles.chipOn, pressed && styles.pressed],
+          children: /* @__PURE__ */ jsx(Text, { style: [styles.chipText, on && styles.chipTextOn], children: option })
+        },
+        option
+      );
+    }) });
+  } else {
+    control = /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: draft,
+        onChangeText: (text) => {
+          setDraft(text);
+          if (error) setError(null);
+        },
+        onSubmitEditing: () => void commit(coerce(column, draft)),
+        onBlur: () => void commit(coerce(column, draft)),
+        accessibilityLabel: label,
+        keyboardType: NUMERIC.includes(column.type) ? "decimal-pad" : "default",
+        placeholder: column.type === "date" ? labels.datePlaceholder : void 0,
+        returnKeyType: "done",
+        loading: pending,
+        error: error != null,
+        message: error ?? void 0,
+        motion,
+        testID: `detail-field-${column.id}`
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      style: [
+        styles.detailRow,
+        styles.detailEdit,
+        {
+          backgroundColor: wash.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["transparent", styles.washOn.backgroundColor]
+          }),
+          borderColor: wash.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["transparent", styles.washOn.borderColor]
+          })
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.detailLabel, children: label }),
+        control,
+        error && !field ? /* @__PURE__ */ jsx(Text, { style: styles.detailError, role: "alert", children: error }) : null
+      ]
+    }
+  );
+}
 function DetailSheet({
   row,
   columns,
   ctx,
   title,
-  onClose
+  onClose,
+  onCommit,
+  motion = "full",
+  labels: labelsProp
 }) {
   const { styles } = useStyles(sheet);
+  const labels = useLabels("dataGrid", DEFAULT_DATA_GRID_LABELS, labelsProp);
   if (!row) return null;
-  return /* @__PURE__ */ jsx(Sheet, { open: true, onClose, title, detents: ["half", "full"], children: /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.body, children: columns.map((column) => /* @__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)) }) });
+  return /* @__PURE__ */ jsx(Sheet, { open: true, onClose, title, detents: ["half", "full"], children: /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.body, children: columns.map(
+    (column) => onCommit && canEdit(column, row) ? /* @__PURE__ */ jsx(
+      DetailField,
+      {
+        row,
+        column,
+        value: getValue(ctx, row, column.id),
+        onCommit,
+        motion,
+        labels
+      },
+      column.id
+    ) : /* @__PURE__ */ jsxs(View, { style: styles.detailRow, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.detailLabel, children: column.headerUnit ? labels.headerWithUnit(column.header, column.headerUnit) : column.header }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.detailValue, column.mono && styles.mono], children: formatValue(ctx, column, getValue(ctx, row, column.id), row) })
+    ] }, column.id)
+  ) }) });
 }
 var sheet = createStyleSheet((theme) => ({
   body: { gap: theme.space.s3, paddingBottom: theme.space.s4 },
@@ -464,10 +734,33 @@ var sheet = createStyleSheet((theme) => ({
     lineHeight: theme.type.body.lineHeight,
     color: theme.color.text
   },
+  detailEdit: {
+    marginHorizontal: -theme.space.s2,
+    paddingHorizontal: theme.space.s2,
+    paddingTop: theme.space.s1,
+    borderRadius: theme.radius.md,
+    // Always present (transparent at rest) so the wash's edge never moves layout.
+    borderWidth: theme.borderWidth.base,
+    borderColor: "transparent"
+  },
+  // The wash collapses to the surface under `contrast: 'more'`; the accent edge
+  // stops being transparent there and keeps the flash visible.
+  washOn: {
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent
+  },
+  detailError: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight,
+    color: theme.color.dangerOnSoft
+  },
   mono: { fontFamily: theme.font.mono },
   pressed: { opacity: theme.state.pressedOpacity }
 }));
 var TABLE_MIN_WIDTH = 680;
+var SKELETON_ROWS = 6;
 var CARD_FIELD_LIMIT = 4;
 function DataGrid({
   rows,
@@ -485,16 +778,23 @@ function DataGrid({
   selectionMode = "none",
   bulkActions,
   onRowPress,
+  onCellEditCommit,
   searchable = true,
   status = "ready",
   onRetry,
-  locale,
+  locale: localeProp,
+  labels: labelsProp,
   currency = "USD",
   now,
-  style
+  style,
+  motion = "full"
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
+  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(
     () => getRowId ?? ((row) => String(row.id)),
@@ -507,7 +807,7 @@ function DataGrid({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const { state, setState } = useGridState({
+  const { state, setState: writeState } = useGridState({
     columns: resolved,
     initialState: seed,
     state: controlled,
@@ -515,6 +815,19 @@ function DataGrid({
     gridId,
     storage
   });
+  const setState = React2.useCallback(
+    (...args) => {
+      if (args[1] === "sort" && level === "full") {
+        const ds = theme.spring.ds;
+        LayoutAnimation.configureNext({
+          duration: ds.duration,
+          update: { type: "spring", springDamping: ds.dampingRatio }
+        });
+      }
+      return writeState(...args);
+    },
+    [writeState, level, theme.spring.ds]
+  );
   const visibleColumns = 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]
@@ -526,9 +839,15 @@ function DataGrid({
       formulas: state.formulas,
       locale,
       currency,
-      now: now ?? Date.now()
+      now: now ?? Date.now(),
+      messages: {
+        yes: labels.yes,
+        no: labels.no,
+        emptyCell: labels.emptyCell,
+        duration: labels.durationHours
+      }
     }),
-    [resolved, identify, state.formulas, locale, currency, now]
+    [resolved, identify, state.formulas, locale, currency, now, labels]
   );
   const model = React2.useMemo(
     () => buildRowModel({
@@ -558,17 +877,17 @@ function DataGrid({
       const next = [...state.sorting];
       if (at < 0) {
         next.splice(0, next.length, { id: colId, desc: false });
-        setMessage(`Sorted by ${column.header}, ascending.`);
+        setMessage(labels.sortedAscending(column.header));
       } else if (!next[at].desc) {
         next[at] = { id: colId, desc: true };
-        setMessage(`Sorted by ${column.header}, descending.`);
+        setMessage(labels.sortedDescending(column.header));
       } else {
         next.splice(at, 1);
-        setMessage(`Sorting cleared on ${column.header}.`);
+        setMessage(labels.sortingCleared(column.header));
       }
       setState({ sorting: next }, "sort");
     },
-    [resolved, state.sorting, setState]
+    [resolved, state.sorting, setState, labels]
   );
   const selectedIds = React2.useMemo(
     () => Object.keys(state.rowSelection).filter((id) => state.rowSelection[id]),
@@ -603,13 +922,17 @@ function DataGrid({
     [state.expanded, setState]
   );
   const [openSheet, setOpenSheet] = React2.useState(null);
-  const [detail, setDetail] = React2.useState(null);
+  const [detailId, setDetailId] = React2.useState(null);
+  const detail = React2.useMemo(
+    () => detailId == null ? null : rows.find((row) => identify(row) === detailId) ?? null,
+    [rows, detailId, identify]
+  );
   const openRow = React2.useCallback(
     (row) => {
       if (onRowPress) onRowPress(row);
-      else setDetail(row);
+      else setDetailId(identify(row));
     },
-    [onRowPress]
+    [onRowPress, identify]
   );
   const [focusIndex, setFocusIndex] = React2.useState(0);
   const leaves = React2.useMemo(
@@ -619,7 +942,9 @@ function DataGrid({
   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))));
+      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);
@@ -636,18 +961,22 @@ function DataGrid({
     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,
+      title: status === "forbidden" ? labels.forbiddenTitle : status === "offline" ? labels.offlineTitle : labels.errorTitle,
+      description: status === "offline" ? labels.offlineBody : void 0,
+      actionLabel: onRetry ? labels.retry : void 0,
       onAction: onRetry
     }
-  ) }) : busy && model.nodes.length === 0 ? /* @__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(
+  ) }) : busy && model.nodes.length === 0 ? (
+    // The row layout is known, so wait on placeholder rows at the real row
+    // height (nothing shifts when data lands) rather than a bare spinner.
+    /* @__PURE__ */ jsx(View, { style: styles.skeletonRows, accessibilityLabel: labels.loadingRows, role: "status", children: /* @__PURE__ */ jsx(View, { "aria-hidden": true, style: styles.skeletonRows, children: Array.from({ length: SKELETON_ROWS }, (_, i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", height: rowHeight - theme.space.s2, radius: "md" }, i)) }) })
+  ) : model.nodes.length === 0 ? /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.stateScroll, children: /* @__PURE__ */ jsx(
     EmptyState,
     {
       variant: filterCount > 0 ? "no-results" : "empty",
-      title: filterCount > 0 ? "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,
+      title: filterCount > 0 ? labels.noResultsTitle : labels.emptyTitle,
+      description: filterCount > 0 ? labels.noResultsBody : void 0,
+      actionLabel: filterCount > 0 ? labels.clearFilters : void 0,
       onAction: filterCount > 0 ? () => setState({ columnFilters: [], globalFilter: "" }, "filter") : void 0
     }
   ) }) : table ? /* @__PURE__ */ jsx(
@@ -664,7 +993,8 @@ function DataGrid({
       onToggleSort: toggleSort,
       onToggleRow: toggleRow,
       onToggleGroup: toggleGroup,
-      onOpenRow: openRow
+      onOpenRow: openRow,
+      labels
     }
   ) : /* @__PURE__ */ jsx(
     CardSurface,
@@ -677,7 +1007,8 @@ function DataGrid({
       selectionMode,
       onToggleRow: toggleRow,
       onToggleGroup: toggleGroup,
-      onOpenRow: openRow
+      onOpenRow: openRow,
+      labels
     }
   );
   return /* @__PURE__ */ jsxs(
@@ -695,11 +1026,15 @@ function DataGrid({
             label,
             searchable,
             query: state.globalFilter,
-            onQuery: (text) => setState({ globalFilter: text, pagination: { ...state.pagination, pageIndex: 0 } }, "quickFilter"),
+            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
+            onOpen: setOpenSheet,
+            labels
           }
         ),
         /* @__PURE__ */ jsx(
@@ -708,18 +1043,29 @@ function DataGrid({
             shown: model.filteredCount,
             total: model.totalCount,
             selected: selectedIds.length,
-            busy
+            busy,
+            labels
           }
         ),
         /* @__PURE__ */ jsx(View, { style: styles.body, children: surface }),
-        model.nodes.length > 0 ? /* @__PURE__ */ jsx(FooterStrip, { model, columns: visibleColumns, ctx, state }) : null,
+        model.nodes.length > 0 ? /* @__PURE__ */ jsx(
+          FooterStrip,
+          {
+            model,
+            columns: visibleColumns,
+            ctx,
+            state,
+            labels
+          }
+        ) : null,
         selectedIds.length > 0 ? /* @__PURE__ */ jsx(
           BulkBar,
           {
             count: selectedIds.length,
             actions: bulkActions,
             rows: selectedRows,
-            onClear: clearSelection
+            onClear: clearSelection,
+            labels
           }
         ) : null,
         /* @__PURE__ */ jsx(
@@ -730,7 +1076,8 @@ function DataGrid({
             columns: resolved,
             sorting: state.sorting,
             onToggle: toggleSort,
-            onClear: () => setState({ sorting: [] }, "sort")
+            onClear: () => setState({ sorting: [] }, "sort"),
+            labels
           }
         ),
         /* @__PURE__ */ jsx(
@@ -743,7 +1090,8 @@ function DataGrid({
             ctx,
             filters: state.columnFilters,
             logic: state.filterLogic,
-            onChange: (filters, logic) => setState({ columnFilters: filters, filterLogic: logic }, "filter")
+            onChange: (filters, logic) => setState({ columnFilters: filters, filterLogic: logic }, "filter"),
+            labels
           }
         ),
         /* @__PURE__ */ jsx(
@@ -755,7 +1103,8 @@ function DataGrid({
             state,
             layout,
             table,
-            onSetState: setState
+            onSetState: setState,
+            labels
           }
         ),
         /* @__PURE__ */ jsx(
@@ -765,7 +1114,16 @@ function DataGrid({
             columns: visibleColumns,
             ctx,
             title: detail && primary ? formatValue(ctx, primary, getValue(ctx, detail, primary.id), detail) : "",
-            onClose: () => setDetail(null)
+            onClose: () => setDetailId(null),
+            onCommit: onCellEditCommit && detail ? (column, value, previous) => onCellEditCommit({
+              rowId: identify(detail),
+              row: detail,
+              colId: column.id,
+              value,
+              previous
+            }) : void 0,
+            motion,
+            labels
           }
         ),
         /* @__PURE__ */ jsx(
@@ -774,7 +1132,7 @@ function DataGrid({
             role: "status",
             style: styles.srOnly,
             accessibilityLabel: message,
-            ...{ "aria-live": "polite" },
+            accessibilityLiveRegion: "polite",
             children: /* @__PURE__ */ jsx(Text, { style: styles.srOnly, children: message })
           }
         )
@@ -790,7 +1148,8 @@ function GridToolbar({
   sortCount,
   filterCount,
   groupCount,
-  onOpen
+  onOpen,
+  labels
 }) {
   const { styles } = useStyles(sheet2);
   return /* @__PURE__ */ jsxs(View, { style: styles.toolbar, children: [
@@ -799,22 +1158,41 @@ function GridToolbar({
       {
         value: query,
         onChangeText: onQuery,
-        placeholder: `Search ${label.toLowerCase()}`,
-        accessibilityLabel: `Search ${label}`,
+        placeholder: labels.searchPlaceholder(label),
+        accessibilityLabel: labels.searchLabel(label),
         leadingIcon: "search",
         size: "sm",
         style: styles.search
       }
     ) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.toolbarButtons, children: [
-      /* @__PURE__ */ jsx(ToolPill, { icon: "arrow-down", label: "Sort", count: sortCount, onPress: () => onOpen("sort") }),
-      /* @__PURE__ */ jsx(ToolPill, { icon: "filter", label: "Filter", count: filterCount, onPress: () => onOpen("filter") }),
+      /* @__PURE__ */ jsx(
+        ToolPill,
+        {
+          icon: "arrow-down",
+          label: labels.sort,
+          count: sortCount,
+          activeLabel: labels.toolActive(labels.sort, sortCount),
+          onPress: () => onOpen("sort")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ToolPill,
+        {
+          icon: "filter",
+          label: labels.filter,
+          count: filterCount,
+          activeLabel: labels.toolActive(labels.filter, filterCount),
+          onPress: () => onOpen("filter")
+        }
+      ),
       /* @__PURE__ */ jsx(
         ToolPill,
         {
           icon: "settings",
-          label: "Display",
+          label: labels.display,
           count: groupCount,
+          activeLabel: labels.toolActive(labels.display, groupCount),
           onPress: () => onOpen("display")
         }
       )
@@ -825,15 +1203,16 @@ function ToolPill({
   icon,
   label,
   count,
+  activeLabel,
   onPress
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("data-grid");
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: "button",
-      accessibilityLabel: count > 0 ? `${label}, ${count} active` : label,
+      accessibilityLabel: count > 0 ? activeLabel : label,
       onPress,
       style: ({ pressed }) => [styles.toolPill, pressed && styles.pressed],
       children: [
@@ -848,15 +1227,12 @@ function CountLine({
   shown,
   total,
   selected,
-  busy
+  busy,
+  labels
 }) {
   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` : ""
-    ] }),
+    /* @__PURE__ */ jsx(Text, { style: styles.countText, children: labels.countLine(shown, total, selected) }),
     busy ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : null
   ] });
 }
@@ -872,10 +1248,11 @@ function TableSurface({
   onToggleSort,
   onToggleRow,
   onToggleGroup,
-  onOpenRow
+  onOpenRow,
+  labels
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
+  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;
@@ -890,7 +1267,8 @@ function TableSurface({
           width: total,
           height: rowHeight,
           inTable: true,
-          onToggle: onToggleGroup
+          onToggle: onToggleGroup,
+          labels
         }
       );
     }
@@ -898,7 +1276,7 @@ function TableSurface({
     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);
+    const name = rowLabel(ctx, columns, item.row, labels);
     return (
       // The checkbox is a **sibling** of the pressable body, never a child of it.
       // A control inside a control is `nested-interactive`, and it is not a
@@ -920,7 +1298,7 @@ function TableSurface({
               {
                 checked: selected,
                 onCheckedChange: () => onToggleRow(item.row),
-                accessibilityLabel: `Select ${name}`,
+                accessibilityLabel: labels.selectRow(name),
                 size: "sm"
               }
             ) }),
@@ -930,7 +1308,7 @@ function TableSurface({
                 accessibilityRole: "button",
                 accessibilityLabel: name,
                 accessibilityState: { selected },
-                accessibilityHint: "Double tap to see the whole record",
+                accessibilityHint: labels.openRecordHint,
                 onPress: () => onOpenRow(item.row),
                 onLongPress: selectionMode === "none" ? void 0 : () => onToggleRow(item.row),
                 style: ({ pressed }) => [styles.tableRowBody, pressed && styles.pressed],
@@ -952,37 +1330,46 @@ function TableSurface({
       )
     );
   };
-  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
-        })
-      }
-    )
-  ] }) });
+  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),
+              labels
+            },
+            column.id
+          ))
+        ] }),
+        /* @__PURE__ */ jsx(
+          FlatList,
+          {
+            data: model.nodes,
+            keyExtractor: (node) => node.id,
+            renderItem: renderNode,
+            style: styles.tableBody,
+            getItemLayout: (_, index) => ({
+              length: rowHeight,
+              offset: rowHeight * index,
+              index
+            })
+          }
+        )
+      ] })
+    }
+  );
 }
 function HeaderCell({
   column,
@@ -990,17 +1377,22 @@ function HeaderCell({
   sort,
   rank,
   multi,
-  onPress
+  onPress,
+  labels
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("data-grid");
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
       accessibilityRole: column.sortable ? "button" : void 0,
-      accessibilityLabel: `${column.header}${column.headerUnit ? `, ${column.headerUnit}` : ""}` + (sort ? `, sorted ${sort.desc ? "descending" : "ascending"}` : ""),
+      accessibilityLabel: labels.headerName(
+        column.header,
+        column.headerUnit,
+        sort ? sort.desc ? "desc" : "asc" : null
+      ),
       accessibilityState: { selected: !!sort },
-      accessibilityHint: column.sortable ? "Double tap to change the sort" : void 0,
+      accessibilityHint: column.sortable ? labels.sortHint : void 0,
       disabled: !column.sortable,
       onPress,
       style: ({ pressed }) => [
@@ -1041,7 +1433,7 @@ function Cell({
   depth
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("data-grid");
   const value = getValue(ctx, row, column.id);
   const text = formatValue(ctx, column, value, row);
   return /* @__PURE__ */ jsx(
@@ -1053,7 +1445,18 @@ function Cell({
         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 })
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          numberOfLines: 1,
+          style: [
+            styles.cellText,
+            column.mono && styles.mono,
+            column.align === "end" && styles.tabular
+          ],
+          children: text
+        }
+      )
     }
   );
 }
@@ -1064,14 +1467,19 @@ function GroupRow({
   width,
   height,
   inTable = false,
-  onToggle
+  onToggle,
+  labels
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("data-grid");
   const field = ctx.columnsById.get(node.field);
   const summary = columns.map((c) => {
     const cell = node.aggregates[c.id];
-    return cell && cell.value !== null ? `${c.header} ${AGGREGATION_LABELS[cell.fn].toLowerCase()} ${formatValue(ctx, c, cell.value, {})}` : null;
+    return cell && cell.value !== null ? labels.groupAggregate(
+      c.header,
+      labels.aggregations[cell.fn],
+      formatValue(ctx, c, cell.value, {})
+    ) : null;
   }).filter((s) => s !== null);
   const disclosure = /* @__PURE__ */ jsxs(
     Pressable,
@@ -1079,7 +1487,7 @@ function GroupRow({
       accessibilityRole: "button",
       accessibilityState: { expanded: node.expanded },
       ...expandedProps(node.expanded),
-      accessibilityLabel: `${field ? `${field.header}: ` : ""}${node.key}, ${node.leafCount} rows`,
+      accessibilityLabel: labels.groupName(field?.header, node.key, node.leafCount),
       accessibilityHint: summary.length ? summary.join(". ") : void 0,
       onPress: () => onToggle(node.id),
       style: ({ pressed }) => [
@@ -1114,7 +1522,8 @@ function CardSurface({
   selectionMode,
   onToggleRow,
   onToggleGroup,
-  onOpenRow
+  onOpenRow,
+  labels
 }) {
   const { styles } = useStyles(sheet2);
   const fields = columns.filter((c) => c.id !== primary?.id);
@@ -1122,7 +1531,16 @@ function CardSurface({
   const hidden = fields.length - shown.length;
   const renderNode = ({ item }) => {
     if (item.kind === "group") {
-      return /* @__PURE__ */ jsx(GroupRow, { node: item, columns, ctx, onToggle: onToggleGroup });
+      return /* @__PURE__ */ jsx(
+        GroupRow,
+        {
+          node: item,
+          columns,
+          ctx,
+          onToggle: onToggleGroup,
+          labels
+        }
+      );
     }
     if (item.kind === "detail") return /* @__PURE__ */ jsx(View, {});
     const rowId = ctx.getRowId(item.row);
@@ -1138,7 +1556,7 @@ function CardSurface({
           {
             checked: selected,
             onCheckedChange: () => onToggleRow(item.row),
-            accessibilityLabel: `Select ${title}`,
+            accessibilityLabel: labels.selectRow(title),
             size: "sm"
           }
         ),
@@ -1146,9 +1564,9 @@ function CardSurface({
           Pressable,
           {
             accessibilityRole: "button",
-            accessibilityLabel: rowLabel(ctx, columns, item.row),
+            accessibilityLabel: rowLabel(ctx, columns, item.row, labels),
             accessibilityState: { selected },
-            accessibilityHint: "Double tap to see the whole record",
+            accessibilityHint: labels.openRecordHint,
             onPress: () => onOpenRow(item.row),
             onLongPress: selectionMode === "none" ? void 0 : () => onToggleRow(item.row),
             style: ({ pressed }) => [styles.cardBody, pressed && styles.pressed],
@@ -1158,7 +1576,7 @@ function CardSurface({
                 /* @__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
+              hidden > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.cardMore, children: labels.moreFields(hidden) }) : null
             ]
           }
         )
@@ -1179,7 +1597,8 @@ function FooterStrip({
   model,
   columns,
   ctx,
-  state
+  state,
+  labels
 }) {
   const { styles } = useStyles(sheet2);
   const cells = columns.map((column) => ({ column, cell: model.footer[column.id] })).filter((entry) => !!entry.cell);
@@ -1187,15 +1606,15 @@ function FooterStrip({
   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, {}) })
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: labels.footerCell(column.header, labels.aggregations[cell.fn]) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: cell.value === null ? labels.emptyCell : formatValue(ctx, column, cell.value, {}) })
     ] }, column.id)),
     filtered ? /* @__PURE__ */ jsxs(View, { style: styles.footerCell, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: "Scope" }),
-      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: `${model.filteredCount} filtered rows` })
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: labels.scope }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: labels.filteredRows(model.filteredCount) })
     ] }) : null,
     state.grouping.length > 0 ? /* @__PURE__ */ jsxs(View, { style: styles.footerCell, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: "Grouped by" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.footerLabel, children: labels.groupedBy }),
       /* @__PURE__ */ jsx(Text, { style: styles.footerValue, children: state.grouping.map((id) => ctx.columnsById.get(id)?.header ?? id).join(" \u203A ") })
     ] }) : null
   ] }) });
@@ -1204,22 +1623,23 @@ function BulkBar({
   count,
   actions,
   rows,
-  onClear
+  onClear,
+  labels
 }) {
   const { styles } = useStyles(sheet2);
-  const theme = useLoamTheme();
-  return /* @__PURE__ */ jsxs(View, { role: "toolbar", accessibilityLabel: `${count} selected`, style: styles.bulkBar, children: [
+  const theme = useLoamTheme("data-grid");
+  return /* @__PURE__ */ jsxs(View, { role: "toolbar", accessibilityLabel: labels.selectedCount(count), style: styles.bulkBar, children: [
     /* @__PURE__ */ jsx(
       Pressable,
       {
         accessibilityRole: "button",
-        accessibilityLabel: "Clear selection",
+        accessibilityLabel: labels.clearSelection,
         onPress: onClear,
         style: ({ pressed }) => [styles.bulkClear, pressed && styles.pressed],
         children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: theme.color.accentInk })
       }
     ),
-    /* @__PURE__ */ jsx(Text, { style: styles.bulkCount, children: `${count} selected` }),
+    /* @__PURE__ */ jsx(Text, { style: styles.bulkCount, children: labels.selectedCount(count) }),
     /* @__PURE__ */ jsx(View, { style: styles.bulkActions, children: (actions ?? []).map((action) => /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -1253,8 +1673,13 @@ function BulkBar({
     )) })
   ] });
 }
-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(", ");
+function rowLabel(ctx, columns, row, labels) {
+  return labels.rowSummary(
+    columns.slice(0, CARD_FIELD_LIMIT + 1).map((column) => ({
+      header: column.header,
+      value: formatValue(ctx, column, getValue(ctx, row, column.id), row)
+    }))
+  );
 }
 var sheet2 = createStyleSheet((theme) => ({
   root: { flex: 1, alignSelf: "stretch", gap: theme.space.s2 },
@@ -1371,6 +1796,9 @@ var sheet2 = createStyleSheet((theme) => ({
     color: theme.color.text
   },
   mono: { fontFamily: theme.font.mono },
+  // Right-aligned columns hold figures; equal-width digits keep them lined up.
+  tabular: { fontVariant: ["tabular-nums"] },
+  skeletonRows: { alignSelf: "stretch", gap: theme.space.s2, padding: theme.space.s3 },
   alignEnd: { alignItems: "flex-end" },
   alignCentre: { alignItems: "center" },
   groupRow: {
@@ -1518,4 +1946,4 @@ var sheet2 = createStyleSheet((theme) => ({
   }
 }));
 
-export { DataGrid, DetailSheet, DisplaySheet, FilterSheet, SortSheet, TABLE_MIN_WIDTH };
+export { DEFAULT_DATA_GRID_LABELS, DataGrid, DetailSheet, DisplaySheet, FilterSheet, SortSheet, TABLE_MIN_WIDTH };