@gridkitjs/react 0.9.0 → 0.11.0

package/dist/index.js

@@ -1,24 +1,20 @@
+"use client";
+
 // src/DataGrid/DataGrid.tsx
 import {
-  useEffect as useEffect4,
+  useEffect as useEffect5,
+  useId,
   useImperativeHandle,
   useMemo as useMemo4,
-  useRef as useRef6,
-  useState as useState6
+  useRef as useRef13,
+  useState as useState15
 } from "react";
 import {
-  applyColumnOrder,
-  computeAggregates,
-  defineColumnsFromRows,
-  fitColumnsToWidth,
-  groupRows,
   moveColumnBefore,
-  paginateRows as paginateRows2,
-  resolveColumnWidths,
-  resolveRowId,
-  resolveShownRows,
-  totalColumnWidth,
-  withGroupAggregates
+  resolveColumnHeaderText,
+  resolveMessages,
+  resolveRows,
+  totalColumnWidth
 } from "@gridkitjs/core";
 
 // src/DataGrid/components/GridColgroup.tsx
@@ -29,7 +25,13 @@ function GridColgroup({ columns }) {
 
 // src/DataGrid/components/GridHeader.tsx
 import { createPortal } from "react-dom";
-import { buildKeyShortcuts, intentOf, KEYBOARD_STEP } from "@gridkitjs/core";
+import {
+  buildKeyShortcuts,
+  intentOf,
+  KEYBOARD_STEP,
+  sortDirectionFor,
+  sortPriorityFor
+} from "@gridkitjs/core";
 
 // src/DataGrid/ariaAttr.ts
 function ariaAttr(condition, key, value) {
@@ -41,30 +43,61 @@ function classNames(...values) {
   return values.filter(Boolean).join(" ");
 }
 
+// src/DataGrid/icons.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function Icon({ children }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+function ChevronsUpDownIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ jsx2("path", { d: "m7 9 5-5 5 5" })
+  ] });
+}
+function ChevronUpIcon() {
+  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }) });
+}
+function GroupIcon() {
+  return /* @__PURE__ */ jsxs(Icon, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "8.5", y: "14", width: "7", height: "7", rx: "1" })
+  ] });
+}
+
+// src/DataGrid/isOwnEvent.ts
+function isOwnEvent(event) {
+  return event.target instanceof Node && event.currentTarget.contains(event.target);
+}
+
 // src/DataGrid/useGridNavigation.ts
 import {
   useEffect,
-  useMemo,
-  useRef,
-  useState
+  useLayoutEffect,
+  useState,
+  useSyncExternalStore
 } from "react";
+import { HEADER_ROW } from "@gridkitjs/core";
 import {
-  clampFocus,
-  nextFocusForKey,
-  HEADER_ROW
-} from "@gridkitjs/core";
-var FALLBACK_PAGE = 10;
+  createGridFocus,
+  findBodyRow,
+  measurePageSize
+} from "@gridkitjs/dom";
 function tabIndexFor(columnIndex, focusedColumnIndex) {
   return columnIndex === focusedColumnIndex ? 0 : -1;
 }
-function cellAt(headerTable, bodyTable, focus) {
-  const row = focus.rowIndex === HEADER_ROW ? headerTable?.tHead?.rows[0] ?? null : bodyTable?.tBodies[0]?.rows[focus.rowIndex] ?? null;
-  if (row === null) {
-    return null;
-  }
-  const columnIndex = Math.min(focus.columnIndex, row.cells.length - 1);
-  return row.cells[columnIndex] ?? null;
-}
 function useGridNavigation({
   headerTableRef,
   bodyTableRef,
@@ -73,120 +106,52 @@ function useGridNavigation({
   isSkippableRow,
   virtualRange
 }) {
-  const [stored, setStored] = useState({
-    rowIndex: HEADER_ROW,
-    columnIndex: 0
-  });
-  const focus = useMemo(
-    () => clampFocus(stored, rowCount, columnCount),
-    [stored, rowCount, columnCount]
-  );
-  const pending = useRef(false);
-  useEffect(() => {
-    if (!pending.current) {
-      return;
-    }
-    const cell = cellAt(headerTableRef.current, bodyTableRef.current, {
-      rowIndex: focus.rowIndex,
-      columnIndex: focus.columnIndex
-    });
-    if (cell !== null) {
-      pending.current = false;
-      cell.focus();
-      return;
-    }
-    if (virtualRange != null && focus.rowIndex !== HEADER_ROW && (focus.rowIndex < virtualRange.startIndex || focus.rowIndex > virtualRange.endIndex)) {
-      virtualRange.scrollToIndex(focus.rowIndex);
-      return;
-    }
-    pending.current = false;
-  }, [
-    headerTableRef,
-    bodyTableRef,
-    focus.rowIndex,
-    focus.columnIndex,
+  const options = {
+    rowCount,
+    columnCount,
+    isSkippableRow,
     virtualRange
-  ]);
-  function pageSize() {
-    const table = bodyTableRef.current;
-    const firstRow = table?.tBodies[0]?.rows[0];
-    const viewport = table?.parentElement;
-    if (firstRow === void 0 || viewport === null || viewport === void 0 || firstRow.offsetHeight === 0) {
-      return FALLBACK_PAGE;
-    }
-    return Math.max(
-      1,
-      Math.floor(viewport.clientHeight / firstRow.offsetHeight)
-    );
-  }
-  function focusCell(rowIndex, columnIndex) {
-    const next = clampFocus({ rowIndex, columnIndex }, rowCount, columnCount);
-    if (next.rowIndex === focus.rowIndex && next.columnIndex === focus.columnIndex) {
-      return;
-    }
-    pending.current = true;
-    setStored(next);
-  }
-  function onKeyDown(event) {
-    const next = nextFocusForKey(
-      event.key,
-      {
-        ctrlKey: event.ctrlKey,
-        metaKey: event.metaKey,
-        altKey: event.altKey,
-        shiftKey: event.shiftKey
-      },
-      focus,
-      rowCount,
-      columnCount,
-      pageSize(),
-      isSkippableRow
-    );
-    if (next === null) {
-      return;
-    }
-    event.preventDefault();
-    focusCell(next.rowIndex, next.columnIndex);
-  }
+  };
+  const [gridFocus] = useState(() => createGridFocus(options));
+  gridFocus.setOptions(options);
+  const focus = useSyncExternalStore(gridFocus.subscribe, gridFocus.getFocus);
+  const [rows] = useState(() => ({
+    getHeaderRow: () => headerTableRef.current?.tHead?.rows[0] ?? null,
+    getBodyRow: (rowIndex) => findBodyRow(bodyTableRef.current, rowIndex)
+  }));
+  useLayoutEffect(() => gridFocus.attach(rows), [gridFocus, rows]);
+  useEffect(() => {
+    gridFocus.focusDrawnCell(focus);
+  });
   return {
     focus,
     tabIndexFor: (rowIndex, columnIndex) => tabIndexFor(
       columnIndex,
       rowIndex === focus.rowIndex ? focus.columnIndex : null
     ),
-    focusCell,
-    onKeyDown
+    focusCell: gridFocus.focusCell,
+    focusCellNow: (rowIndex, columnIndex) => {
+      gridFocus.focusCell(rowIndex, columnIndex);
+      gridFocus.focusDrawnCell(gridFocus.getFocus());
+    },
+    focusTabStop: () => {
+      const cells = (focus.rowIndex === HEADER_ROW ? rows.getHeaderRow() : rows.getBodyRow(focus.rowIndex))?.cells;
+      cells?.[Math.min(focus.columnIndex, cells.length - 1)]?.focus();
+    },
+    onKeyDown: (event) => {
+      if (gridFocus.handleKey(
+        event.key,
+        event,
+        measurePageSize(bodyTableRef.current)
+      )) {
+        event.preventDefault();
+      }
+    }
   };
 }
 
 // src/DataGrid/useGridSelection.ts
-import {
-  useMemo as useMemo2,
-  useRef as useRef2
-} from "react";
-import {
-  applySelectionIntent,
-  clearSelection,
-  diffSelection,
-  resolveCell,
-  resolveColumns,
-  resolveRows,
-  selectAll,
-  selectCell,
-  toggleCellSelection
-} from "@gridkitjs/core";
-
-// src/DataGrid/commitIfChanged.ts
-function commitIfChanged(current, next, setState, onCommit) {
-  if (next === current) {
-    return false;
-  }
-  setState(next);
-  onCommit?.(next);
-  return true;
-}
-
-// src/DataGrid/useGridSelection.ts
+import { useMemo } from "react";
 function keyboardSelectIntent(event) {
   return {
     ctrlKey: event.key === " " || event.ctrlKey,
@@ -194,238 +159,55 @@ function keyboardSelectIntent(event) {
     shiftKey: event.shiftKey
   };
 }
-function countMessage(count, noun) {
-  if (count === 0) {
-    return `No ${noun}s selected`;
-  }
-  return count === 1 ? `1 ${noun} selected` : `${String(count)} ${noun}s selected`;
-}
-function useAsSet(values) {
-  return useMemo2(() => new Set(values), [values]);
-}
-function useIndexedBy(values, key) {
-  return useMemo2(
-    () => new Map(values.map((value) => [value[key], value])),
-    [values, key]
-  );
-}
-function useMappedArray(values, key) {
-  return useMemo2(() => values.map((value) => value[key]), [values, key]);
-}
 function useGridSelection({
-  rows,
-  columns,
-  selectable,
-  rowSelection,
-  setRowSelection,
-  columnSelection,
-  setColumnSelection,
-  cellSelection,
-  setCellSelection,
-  callbacks,
-  announce,
-  columnName
+  controller,
+  state,
+  selectable
 }) {
-  const rowMode = selectable?.rows ?? false;
-  const columnMode = selectable?.columns ?? false;
-  const cellMode = selectable?.cells ?? false;
-  const rowsById = useIndexedBy(rows, "rowId");
-  const rowIds = useMappedArray(rows, "rowId");
-  const columnIds = useMappedArray(columns, "id");
-  const selectedRowIds = useAsSet(rowSelection);
-  const selectedColumnIds = useAsSet(columnSelection);
-  const rowAnchor = useRef2(null);
-  const columnAnchor = useRef2(null);
-  function announceCount(changed, total, noun) {
-    if (changed > 1) {
-      announce(countMessage(total, noun));
-    }
-  }
-  function commitRows(next) {
-    commitIfChanged(rowSelection, next, setRowSelection, (committed) => {
-      const { added, removed } = diffSelection(rowSelection, committed);
-      const addedRows = resolveRows(rowsById, added);
-      const removedRows = resolveRows(rowsById, removed);
-      for (const row of addedRows) {
-        callbacks.onRowSelect?.({ row, selection: committed });
-      }
-      if (addedRows.length > 0) {
-        callbacks.onRowsSelect?.({ rows: addedRows, selection: committed });
-      }
-      for (const row of removedRows) {
-        callbacks.onRowDeselect?.({ row, selection: committed });
-      }
-      if (removedRows.length > 0) {
-        callbacks.onRowsDeselect?.({ rows: removedRows, selection: committed });
-      }
-      callbacks.onRowSelectionChange?.({
-        added: addedRows,
-        removed: removedRows,
-        selected: resolveRows(rowsById, committed),
-        selection: committed
-      });
-      announceCount(added.length + removed.length, committed.length, "row");
-    });
-  }
-  function commitColumns(next) {
-    commitIfChanged(columnSelection, next, setColumnSelection, (committed) => {
-      const { added, removed } = diffSelection(columnSelection, committed);
-      const addedColumns = resolveColumns(columns, added);
-      const removedColumns = resolveColumns(columns, removed);
-      for (const column of addedColumns) {
-        callbacks.onColumnSelect?.({ column, selection: committed });
-      }
-      if (addedColumns.length > 0) {
-        callbacks.onColumnsSelect?.({
-          columns: addedColumns,
-          selection: committed
-        });
-      }
-      for (const column of removedColumns) {
-        callbacks.onColumnDeselect?.({ column, selection: committed });
-      }
-      if (removedColumns.length > 0) {
-        callbacks.onColumnsDeselect?.({
-          columns: removedColumns,
-          selection: committed
-        });
-      }
-      callbacks.onColumnSelectionChange?.({
-        added: addedColumns,
-        removed: removedColumns,
-        selected: resolveColumns(columns, committed),
-        selection: committed
-      });
-      announceCount(added.length + removed.length, committed.length, "column");
-    });
-  }
-  function commitCell(next) {
-    commitIfChanged(cellSelection, next, setCellSelection, (committed) => {
-      const selected = resolveCell(rowsById, columns, committed);
-      const deselected = resolveCell(rowsById, columns, cellSelection);
-      if (deselected !== null) {
-        callbacks.onCellDeselect?.({ cell: deselected, selection: committed });
-      }
-      if (selected !== null) {
-        callbacks.onCellSelect?.({ cell: selected, selection: committed });
-      }
-      callbacks.onCellSelectionChange?.({
-        selected,
-        deselected,
-        selection: committed
-      });
-      if (selected !== null) {
-        announce(
-          `${columnName(selected.columnId)}, row ${String(selected.rowIndex + 1)}, selected`
-        );
-      }
-    });
-  }
-  function selectRow(rowId, intent) {
-    const next = applySelectionIntent(
-      rowSelection,
-      rowIds,
-      rowAnchor.current,
-      rowId,
-      intent,
-      rowMode
-    );
-    if (intent !== "range") {
-      rowAnchor.current = rowId;
-    }
-    commitRows(next);
-  }
-  function selectColumn(columnId, intent) {
-    const next = applySelectionIntent(
-      columnSelection,
-      columnIds,
-      columnAnchor.current,
-      columnId,
-      intent,
-      columnMode
-    );
-    if (intent !== "range") {
-      columnAnchor.current = columnId;
-    }
-    commitColumns(next);
-  }
-  function selectCellAt(cell, intent) {
-    commitCell(
-      intent === "toggle" ? toggleCellSelection(cellSelection, cell, cellMode) : selectCell(cellSelection, cell, cellMode)
-    );
-  }
-  function selectAllRows() {
-    commitRows(selectAll(rowSelection, rowIds, rowMode));
-  }
-  function clear() {
-    commitRows(clearSelection(rowSelection));
-    commitColumns(clearSelection(columnSelection));
-    commitCell(null);
-  }
+  const selectedRowIds = useMemo(
+    () => new Set(state.rowSelection),
+    [state.rowSelection]
+  );
+  const selectedColumnIds = useMemo(
+    () => new Set(state.columnSelection),
+    [state.columnSelection]
+  );
   return {
-    rowMode,
-    columnMode,
-    cellMode,
+    rowMode: selectable?.rows ?? false,
+    columnMode: selectable?.columns ?? false,
+    cellMode: selectable?.cells ?? false,
+    toggleOnClick: selectable?.toggleOnClick ?? false,
     selectedRowIds,
     selectedColumnIds,
-    selectedCell: cellSelection,
-    selectRow,
-    selectColumn,
-    selectCell: selectCellAt,
-    selectAllRows,
-    clear
+    selectedCell: state.cellSelection,
+    selectRow: controller.selectRow,
+    selectColumn: controller.selectColumn,
+    selectCell: controller.selectCell,
+    selectAllRows: controller.selectAllRows,
+    clear: controller.clearSelection
   };
 }
 
 // src/DataGrid/components/GridHeader.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Icon({ children }) {
-  return /* @__PURE__ */ jsx2(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children
-    }
-  );
-}
-function ChevronsUpDownIcon() {
-  return /* @__PURE__ */ jsxs(Icon, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ jsx2("path", { d: "m7 9 5-5 5 5" })
-  ] });
-}
-function ChevronUpIcon() {
-  return /* @__PURE__ */ jsx2(Icon, { children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }) });
-}
-function GroupIcon() {
-  return /* @__PURE__ */ jsxs(Icon, { children: [
-    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx2("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ jsx2("rect", { x: "8.5", y: "14", width: "7", height: "7", rx: "1" })
-  ] });
-}
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function GridHeader({
   columns,
   resize,
   drag,
-  sort,
+  controller,
+  columnSort,
   sortableColumns,
-  grouping,
+  groupBy,
   groupableColumns,
   groupToggleIconColumns,
+  headerMenu,
   nav,
   selection
 }) {
   const beforeId = drag.dropTarget?.kind === "column-order" ? drag.dropTarget.beforeId : void 0;
   const draggedEntry = columns.find((entry) => entry.id === drag.draggedColumnId) ?? null;
-  return /* @__PURE__ */ jsxs("thead", { children: [
-    /* @__PURE__ */ jsx2("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
+  return /* @__PURE__ */ jsxs2("thead", { children: [
+    /* @__PURE__ */ jsx3("tr", { className: "grid-header", role: "row", "aria-rowindex": 1, children: columns.map((entry, index) => {
       const { column } = entry;
       const resizing = resize.activeColumnId === entry.id;
       const dragging = drag.draggedColumnId === entry.id;
@@ -433,20 +215,21 @@ function GridHeader({
       const dropAfter = beforeId === null && index === columns.length - 1;
       const selected = selection.selectedColumnIds.has(entry.id);
       const sortable = column.sortable ?? sortableColumns;
-      const sortDirection = sort.directionFor(entry.id);
-      const sortPriority = sort.priorityFor(entry.id);
+      const sortDirection = sortDirectionFor(columnSort, entry.id);
+      const sortPriority = sortPriorityFor(columnSort, entry.id);
       const groupable = column.groupable ?? groupableColumns;
       const showGroupToggleIcon = column.groupToggleIcon ?? groupToggleIconColumns;
-      const isGrouped = grouping.groupBy.some(
+      const isGrouped = groupBy.some(
         (level) => level.columnId === entry.id
       );
       const shortcuts = buildKeyShortcuts({
         reorderable: entry.reorderable,
         resizable: entry.resizable,
         sortable,
-        groupable
+        groupable,
+        contextMenu: headerMenu
       });
-      return /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsxs2(
         "th",
         {
           scope: "col",
@@ -472,6 +255,7 @@ function GridHeader({
             selection.selectColumn(entry.id, intentOf(event));
           },
           onKeyDown: (event) => {
+            if (!isOwnEvent(event)) return;
             const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
             const direction = event.key === "ArrowLeft" ? -1 : 1;
             if (horizontal && event.ctrlKey && entry.reorderable) {
@@ -491,12 +275,14 @@ function GridHeader({
             }
             if (event.key === "ArrowUp" && event.altKey && sortable) {
               event.preventDefault();
-              sort.toggle(entry, { shiftKey: event.shiftKey });
+              controller.toggleColumnSort(entry.id, {
+                stack: event.shiftKey
+              });
               return;
             }
             if (event.key === "ArrowDown" && event.altKey && groupable) {
               event.preventDefault();
-              grouping.toggleGroupBy(entry.id);
+              controller.toggleGroupBy(entry.id);
               return;
             }
             if (event.key === " " || event.key === "Enter") {
@@ -545,7 +331,7 @@ function GridHeader({
              * A pointer affordance only, same as the other two — the
              * keyboard equivalent is Alt+ArrowDown on the header itself.
              */
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "span",
               {
                 className: classNames(
@@ -559,9 +345,9 @@ function GridHeader({
                 },
                 onClick: (event) => {
                   event.stopPropagation();
-                  grouping.toggleGroupBy(entry.id);
+                  controller.toggleGroupBy(entry.id);
                 },
-                children: /* @__PURE__ */ jsx2(GroupIcon, {})
+                children: /* @__PURE__ */ jsx3(GroupIcon, {})
               }
             ),
             entry.label,
@@ -571,7 +357,7 @@ function GridHeader({
              * lives on the header itself, under Alt+ArrowUp (plain) /
              * Alt+Shift+ArrowUp (stacking).
              */
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsxs2(
               "span",
               {
                 className: classNames(
@@ -584,11 +370,13 @@ function GridHeader({
                   event.stopPropagation();
                 },
                 onClick: (event) => {
-                  sort.toggle(entry, { shiftKey: event.shiftKey });
+                  controller.toggleColumnSort(entry.id, {
+                    stack: event.shiftKey
+                  });
                 },
                 children: [
-                  sortDirection === null ? /* @__PURE__ */ jsx2(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx2(ChevronUpIcon, {}),
-                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx2("span", { className: "header-sort-priority", children: sortPriority })
+                  sortDirection === null ? /* @__PURE__ */ jsx3(ChevronsUpDownIcon, {}) : /* @__PURE__ */ jsx3(ChevronUpIcon, {}),
+                  sortPriority !== null && sortPriority > 1 && /* @__PURE__ */ jsx3("span", { className: "header-sort-priority", children: sortPriority })
                 ]
               }
             ),
@@ -598,7 +386,7 @@ function GridHeader({
              * put N tab stops inside a widget that is meant to have one.
              * The keyboard resizes from the header itself, under Alt.
              */
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               "span",
               {
                 className: "header-resize-handle",
@@ -618,7 +406,7 @@ function GridHeader({
       );
     }) }),
     draggedEntry !== null && drag.ghostTransform !== null && createPortal(
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           className: "gridkit-data-grid header-cell drag-ghost",
@@ -636,65 +424,82 @@ function GridHeader({
 }
 
 // src/DataGrid/components/GridBody.tsx
-import { useMemo as useMemo3 } from "react";
+import {
+  useMemo as useMemo2,
+  useState as useState2
+} from "react";
 import {
   groupRowId,
   intentOf as intentOf2
 } from "@gridkitjs/core";
+import {
+  bodyCellFrom,
+  bodyRowFrom,
+  groupRowFrom
+} from "@gridkitjs/dom";
+
+// src/DataGrid/rowProps.ts
+var NO_ATTRIBUTES = {};
+var NO_ROW_PROPS = {
+  className: "",
+  attributes: NO_ATTRIBUTES
+};
+function sameAttributes(a, b) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);
+}
+function createRowPropsResolver() {
+  let previous = /* @__PURE__ */ new Map();
+  return (rows, getRowProps) => {
+    if (getRowProps === void 0) {
+      previous = /* @__PURE__ */ new Map();
+      return () => NO_ROW_PROPS;
+    }
+    const resolved = /* @__PURE__ */ new Map();
+    const attributesById = /* @__PURE__ */ new Map();
+    for (const entry of rows) {
+      const { className = "", attributes = NO_ATTRIBUTES } = getRowProps(entry);
+      const last = previous.get(entry.rowId);
+      const stable = last !== void 0 && sameAttributes(last, attributes) ? last : attributes;
+      attributesById.set(entry.rowId, stable);
+      resolved.set(entry.rowId, { className, attributes: stable });
+    }
+    previous = attributesById;
+    return (rowId) => resolved.get(rowId) ?? NO_ROW_PROPS;
+  };
+}
 
 // src/DataGrid/components/GridGroupRow.tsx
 import { memo } from "react";
+import {
+  formatCellValue,
+  resolveColumnLabel
+} from "@gridkitjs/core";
 
-// src/DataGrid/components/formatAggregateValue.ts
-function formatAggregateValue(value) {
+// src/DataGrid/components/renderAggregate.ts
+import {
+  formatAggregateValue
+} from "@gridkitjs/core";
+function renderAggregate(value, spec, column, rows, locale) {
+  if (column?.footerTemplate) {
+    return column.footerTemplate({ value, rows });
+  }
   if (value === null || value === void 0) {
     return "\u2014";
   }
-  if (value instanceof Date) {
-    return value.toLocaleString();
-  }
-  switch (typeof value) {
-    case "string":
-    case "boolean":
-    case "bigint":
-    case "symbol":
-      return String(value);
-    case "number":
-      return value.toLocaleString();
-    case "function":
-      return "(function)";
-    default:
-      return JSON.stringify(value);
-  }
+  return formatAggregateValue(value, spec, column, locale);
 }
 
 // src/DataGrid/components/GridGroupRow.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function formatGroupValue(value) {
-  if (value === null || value === void 0) {
-    return "(blank)";
-  }
-  if (value instanceof Date) {
-    return value.toLocaleString();
-  }
-  switch (typeof value) {
-    case "string":
-    case "number":
-    case "boolean":
-    case "bigint":
-    case "symbol":
-      return String(value);
-    case "function":
-      return "(function)";
-    default:
-      return JSON.stringify(value);
-  }
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function formatGroupValue(value, column, locale, messages) {
+  return value === null || value === void 0 ? messages.blankGroupValue : formatCellValue(value, column, locale, void 0, messages);
 }
 function GridGroupRowComponent({
   columnCount,
   groupId,
   level,
-  columnLabel,
+  groupColumn,
   value,
   expanded,
   count,
@@ -703,13 +508,15 @@ function GridGroupRowComponent({
   posinset,
   setsize,
   focused,
+  contextMenu,
   aggregates,
   results,
-  columns,
+  definitions,
+  locale,
+  cellMessages,
   ref
 }) {
-  const byId = new Map(columns.map((entry) => [entry.id, entry]));
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "tr",
     {
       ref,
@@ -725,21 +532,21 @@ function GridGroupRowComponent({
         "grid-group-row",
         `is-group-level-${String(level)}`
       ),
-      children: /* @__PURE__ */ jsx3(
+      children: /* @__PURE__ */ jsx4(
         "td",
         {
           role: "gridcell",
           colSpan: columnCount,
           tabIndex: focused ? 0 : -1,
-          "aria-keyshortcuts": "Space Enter",
+          "aria-keyshortcuts": contextMenu ? "Space Enter Shift+F10" : "Space Enter",
           className: "grid-group-cell",
-          children: /* @__PURE__ */ jsxs2(
+          children: /* @__PURE__ */ jsxs3(
             "div",
             {
               className: "grid-group-cell-content",
               style: { paddingInlineStart: `${String(level * 1.25 + 0.5)}rem` },
               children: [
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "span",
                   {
                     className: classNames(
@@ -749,26 +556,30 @@ function GridGroupRowComponent({
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ jsxs2("span", { className: "group-label", children: [
-                  columnLabel,
-                  ": ",
-                  formatGroupValue(value)
+                /* @__PURE__ */ jsxs3("span", { className: "group-label", children: [
+                  resolveColumnLabel(groupColumn),
+                  ":",
+                  " ",
+                  formatGroupValue(value, groupColumn, locale, cellMessages)
                 ] }),
-                /* @__PURE__ */ jsxs2("span", { className: "group-count", children: [
+                /* @__PURE__ */ jsxs3("span", { className: "group-count", children: [
                   "(",
                   count,
                   ")"
                 ] }),
-                aggregates.length > 0 && /* @__PURE__ */ jsx3("span", { className: "group-aggregates", children: aggregates.map((spec) => {
+                aggregates.length > 0 && /* @__PURE__ */ jsx4("span", { className: "group-aggregates", children: aggregates.map((spec) => {
                   const key = spec.id ?? spec.columnId;
                   const aggregateValue = results.get(key);
-                  const column = byId.get(spec.columnId);
-                  const rendered = column?.column.footerTemplate ? column.column.footerTemplate({
-                    value: aggregateValue,
-                    rows: []
-                  }) : formatAggregateValue(aggregateValue);
-                  const aggregateLabel = spec.id ?? column?.label ?? spec.columnId;
-                  return /* @__PURE__ */ jsxs2("span", { className: "group-aggregate", children: [
+                  const column = definitions.get(spec.columnId);
+                  const rendered = renderAggregate(
+                    aggregateValue,
+                    spec,
+                    column,
+                    [],
+                    locale
+                  );
+                  const aggregateLabel = spec.id ?? (column === void 0 ? spec.columnId : resolveColumnLabel(column));
+                  return /* @__PURE__ */ jsxs3("span", { className: "group-aggregate", children: [
                     aggregateLabel,
                     ": ",
                     rendered
@@ -789,7 +600,7 @@ var GridGroupRow_default = GridGroupRow;
 
 // src/DataGrid/components/GridGroupSummaryRow.tsx
 import { memo as memo2 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function GridGroupSummaryRowComponent({
   groupId,
   level,
@@ -798,9 +609,10 @@ function GridGroupSummaryRowComponent({
   results,
   aggregates,
   columns,
+  locale,
   ref
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "tr",
     {
       ref,
@@ -816,8 +628,7 @@ function GridGroupSummaryRowComponent({
         const specs = aggregates.filter(
           (candidate) => candidate.columnId === entry.id
         );
-        const { column } = entry;
-        return /* @__PURE__ */ jsxs3(
+        return /* @__PURE__ */ jsxs4(
           "td",
           {
             role: "gridcell",
@@ -825,7 +636,7 @@ function GridGroupSummaryRowComponent({
             className: "grid-group-summary-cell",
             style: { textAlign: specs[0]?.alignment ?? entry.alignment },
             children: [
-              entry.id === columns[0]?.id && /* @__PURE__ */ jsx4(
+              entry.id === columns[0]?.id && /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: "grid-group-summary-indent",
@@ -833,10 +644,15 @@ function GridGroupSummaryRowComponent({
                   "aria-hidden": "true"
                 }
               ),
-              specs.map((spec) => {
-                const value = results.get(spec.id ?? spec.columnId);
-                return column.footerTemplate ? column.footerTemplate({ value, rows: [] }) : formatAggregateValue(value);
-              }).flatMap(
+              specs.map(
+                (spec) => renderAggregate(
+                  results.get(spec.id ?? spec.columnId),
+                  spec,
+                  entry.column,
+                  [],
+                  locale
+                )
+              ).flatMap(
                 (rendered, index) => index === 0 ? [rendered] : [", ", rendered]
               )
             ]
@@ -853,9 +669,12 @@ var GridGroupSummaryRow = memo2(
 var GridGroupSummaryRow_default = GridGroupSummaryRow;
 
 // src/DataGrid/components/GridRow.tsx
-import { accessDotted } from "@gridkitjs/core";
+import {
+  accessDotted,
+  formatCellValue as formatCellValue2
+} from "@gridkitjs/core";
 import { memo as memo3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function GridRowComponent({
   columns,
   rowId,
@@ -869,21 +688,36 @@ function GridRowComponent({
   focusedColumnIndex,
   rowsSelectable,
   cellsSelectable,
+  contextMenu,
+  locale,
+  cellMessages,
+  rowClassName,
+  rowAttributes,
   ref
 }) {
-  return /* @__PURE__ */ jsx5(
+  const shortcuts = [
+    cellsSelectable ? "Space Enter" : "",
+    contextMenu ? "Shift+F10" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6(
     "tr",
     {
+      ...rowAttributes,
       ref,
       role: "row",
       "aria-rowindex": datasetIndex + 2,
       "data-gridkit-row-index": rowIndex,
+      "data-gridkit-row-id": rowId,
       ...ariaAttr(rowsSelectable, "aria-selected", selected),
-      className: classNames("grid-row", selected ? "is-selected" : ""),
+      className: classNames(
+        "grid-row",
+        selected ? "is-selected" : "",
+        rowClassName
+      ),
       children: columns.map(({ id, column, alignment }, columnIndex) => {
         const value = accessDotted(row, column.field);
         const cellSelected = id === selectedColumnId;
-        return /* @__PURE__ */ jsx5(
+        return /* @__PURE__ */ jsx6(
           "td",
           {
             role: "gridcell",
@@ -891,7 +725,7 @@ function GridRowComponent({
             "aria-colindex": columnIndex + 1,
             tabIndex: tabIndexFor(columnIndex, focusedColumnIndex),
             ...ariaAttr(cellsSelectable, "aria-selected", cellSelected),
-            ...ariaAttr(cellsSelectable, "aria-keyshortcuts", "Space Enter"),
+            ...ariaAttr(shortcuts !== "", "aria-keyshortcuts", shortcuts),
             className: classNames(
               "grid-cell",
               id === activeColumnId ? "is-resizing" : "",
@@ -907,7 +741,7 @@ function GridRowComponent({
               datasetIndex,
               rowId,
               selected
-            }) : value
+            }) : formatCellValue2(value, column, locale, row, cellMessages)
           },
           id
         );
@@ -919,40 +753,7 @@ var GridRow = memo3(GridRowComponent);
 var GridRow_default = GridRow;
 
 // src/DataGrid/components/GridBody.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function rowIndexOf(row) {
-  const attribute = row.getAttribute("data-gridkit-row-index");
-  return attribute === null ? null : Number(attribute);
-}
-function cellFrom(target) {
-  if (!(target instanceof Element)) {
-    return null;
-  }
-  const cell = target.closest("td[data-gridkit-column]");
-  const row = cell?.parentElement;
-  const columnId = cell?.getAttribute("data-gridkit-column");
-  const rowIndex = row === null || row === void 0 ? null : rowIndexOf(row);
-  if (!(cell instanceof HTMLTableCellElement) || !(row instanceof HTMLTableRowElement) || columnId === null || columnId === void 0 || rowIndex === null) {
-    return null;
-  }
-  return {
-    rowIndex,
-    columnIndex: cell.cellIndex,
-    columnId
-  };
-}
-function groupRowFrom(target) {
-  if (!(target instanceof Element)) {
-    return null;
-  }
-  const row = target.closest("tr[data-gridkit-group]");
-  const groupId = row?.getAttribute("data-gridkit-group");
-  const rowIndex = row === null ? null : rowIndexOf(row);
-  if (!(row instanceof HTMLTableRowElement) || groupId === null || groupId === void 0 || rowIndex === null) {
-    return null;
-  }
-  return { rowIndex, groupId };
-}
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function groupAriaMeta(rows) {
   const totals = /* @__PURE__ */ new Map();
   for (const entry of rows) {
@@ -976,22 +777,42 @@ function groupAriaMeta(rows) {
 }
 function GridBody({
   columns,
+  definitions,
   rows,
   activeColumnId,
   nav,
   selection,
-  grouping,
+  controller,
   aggregates,
   groupAggregateDisplay,
   virtualRange,
   infiniteScroll,
-  sentinelRef
+  sentinelRef,
+  locale,
+  getRowProps,
+  onRowClick,
+  onRowDoubleClick,
+  messages,
+  cellMenu,
+  groupMenu
 }) {
-  const { selectedCell, rowMode, cellMode } = selection;
-  const ariaMeta = useMemo3(() => groupAriaMeta(rows), [rows]);
+  const { selectedCell, rowMode, cellMode, toggleOnClick } = selection;
+  const ariaMeta = useMemo2(() => groupAriaMeta(rows), [rows]);
   const visibleRows = virtualRange === null ? rows : rows.slice(virtualRange.startIndex, virtualRange.endIndex + 1);
+  const { booleanTrue, booleanFalse, blankGroupValue } = messages;
+  const cellMessages = useMemo2(
+    () => ({ booleanTrue, booleanFalse, blankGroupValue }),
+    [booleanTrue, booleanFalse, blankGroupValue]
+  );
+  const [resolveRowProps] = useState2(() => createRowPropsResolver());
+  const rowPropsOf = resolveRowProps(
+    visibleRows.filter(
+      (entry) => !("kind" in entry)
+    ),
+    getRowProps
+  );
   function targetOf(target) {
-    const position = cellFrom(target);
+    const position = bodyCellFrom(target);
     const entry = position === null ? void 0 : rows[position.rowIndex];
     if (position === null || entry === void 0 || "kind" in entry) {
       return null;
@@ -999,15 +820,39 @@ function GridBody({
     return { position, rowId: entry.rowId };
   }
   function select(rowId, columnId, modifiers) {
-    const intent = intentOf2(modifiers);
     if (rowMode !== false) {
-      selection.selectRow(rowId, intent);
+      selection.selectRow(rowId, intentOf2(modifiers, { toggleOnClick }));
     }
     if (cellMode !== false) {
-      selection.selectCell({ rowId, columnId }, intent);
+      selection.selectCell({ rowId, columnId }, intentOf2(modifiers));
+    }
+  }
+  function rowPointerEventOf(event) {
+    const target = bodyRowFrom(event.target);
+    const entry = target === null ? void 0 : rows[target.rowIndex];
+    if (target === null || entry === void 0 || "kind" in entry) {
+      return null;
+    }
+    return {
+      row: entry,
+      columnId: target.columnId,
+      native: {
+        ctrlKey: event.ctrlKey,
+        metaKey: event.metaKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        button: event.button
+      }
+    };
+  }
+  function reportRowPointer(event, callback) {
+    if (callback === void 0) return;
+    const pointer = rowPointerEventOf(event);
+    if (pointer !== null) {
+      callback(pointer);
     }
   }
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "tbody",
     {
       className: "grid-body",
@@ -1024,14 +869,20 @@ function GridBody({
       onClick: (event) => {
         const group = groupRowFrom(event.target);
         if (group !== null) {
-          grouping.toggleExpansion(group.groupId);
+          controller.toggleGroupExpansion(group.groupId);
           return;
         }
         const found = targetOf(event.target);
-        if (found === null) return;
-        select(found.rowId, found.position.columnId, event);
+        if (found !== null) {
+          select(found.rowId, found.position.columnId, event);
+        }
+        reportRowPointer(event, onRowClick);
+      },
+      onDoubleClick: (event) => {
+        reportRowPointer(event, onRowDoubleClick);
       },
       onKeyDown: (event) => {
+        if (!isOwnEvent(event)) return;
         const group = groupRowFrom(event.target);
         if (group !== null) {
           if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
@@ -1040,7 +891,7 @@ function GridBody({
           }
           if (event.key === " " || event.key === "Enter") {
             event.preventDefault();
-            grouping.toggleExpansion(group.groupId);
+            controller.toggleGroupExpansion(group.groupId);
             return;
           }
           nav.onKeyDown(event);
@@ -1061,12 +912,12 @@ function GridBody({
       },
       children: [
         virtualRange !== null && virtualRange.offsetBefore > 0 && // `aria-hidden` and carrying neither `data-gridkit-column` nor
-        // `data-gridkit-group`/`data-gridkit-row-index`, so `cellFrom`/
+        // `data-gridkit-group`/`data-gridkit-row-index`, so `bodyCellFrom`/
         // `groupRowFrom` never mistake it for a real row — it exists purely
         // to give the browser's scrollbar the correct total height and thumb
         // position, the same way `GridFooter`'s `<tfoot>` isn't a "row" to
         // any of this grid's own row-counting logic.
-        /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
           "td",
           {
             style: {
@@ -1078,7 +929,8 @@ function GridBody({
         ) }),
         visibleRows.map((entry) => {
           if (!("kind" in entry)) {
-            return /* @__PURE__ */ jsx6(
+            const rowProps = rowPropsOf(entry.rowId);
+            return /* @__PURE__ */ jsx7(
               GridRow_default,
               {
                 ref: virtualRange?.measureRow(entry.rowIndex),
@@ -1093,13 +945,18 @@ function GridBody({
                 selectedColumnId: selectedCell?.rowId === entry.rowId ? selectedCell.columnId : null,
                 focusedColumnIndex: nav.focus.rowIndex === entry.rowIndex ? nav.focus.columnIndex : null,
                 rowsSelectable: rowMode !== false,
-                cellsSelectable: cellMode !== false
+                cellsSelectable: cellMode !== false,
+                contextMenu: cellMenu,
+                locale,
+                cellMessages,
+                rowClassName: rowProps.className,
+                rowAttributes: rowProps.attributes
               },
               entry.rowId
             );
           }
           if (entry.kind === "group-summary") {
-            return /* @__PURE__ */ jsx6(
+            return /* @__PURE__ */ jsx7(
               GridGroupSummaryRow_default,
               {
                 ref: virtualRange?.measureRow(entry.rowIndex),
@@ -1109,19 +966,20 @@ function GridBody({
                 datasetIndex: entry.datasetIndex,
                 results: entry.aggregates,
                 aggregates,
-                columns
+                columns,
+                locale
               },
               `${entry.groupId}-summary`
             );
           }
-          return /* @__PURE__ */ jsx6(
+          return /* @__PURE__ */ jsx7(
             GridGroupRow_default,
             {
               ref: virtualRange?.measureRow(entry.rowIndex),
               columnCount: columns.length,
               groupId: entry.groupId,
               level: entry.level,
-              columnLabel: columns.find((column) => column.id === entry.columnId)?.label ?? entry.columnId,
+              groupColumn: definitions.get(entry.columnId) ?? { field: entry.columnId },
               value: entry.value,
               expanded: entry.expanded,
               count: entry.count,
@@ -1131,13 +989,16 @@ function GridBody({
               setsize: ariaMeta.get(entry.groupId)?.setsize ?? 1,
               aggregates: groupAggregateDisplay === "inline" ? aggregates : [],
               results: entry.aggregates,
-              columns,
-              focused: nav.focus.rowIndex === entry.rowIndex
+              definitions,
+              locale,
+              cellMessages,
+              focused: nav.focus.rowIndex === entry.rowIndex,
+              contextMenu: groupMenu
             },
             entry.groupId
           );
         }),
-        virtualRange !== null && virtualRange.offsetAfter > 0 && /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx6(
+        virtualRange !== null && virtualRange.offsetAfter > 0 && /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
           "td",
           {
             style: {
@@ -1147,15 +1008,15 @@ function GridBody({
             }
           }
         ) }),
-        infiniteScroll?.hasMore && /* @__PURE__ */ jsxs4(Fragment, { children: [
-          infiniteScroll.isLoadingMore === true && /* @__PURE__ */ jsx6("tr", { "aria-hidden": "true", className: "grid-loading-row", children: /* @__PURE__ */ jsx6("td", { colSpan: columns.length, className: "grid-loading-cell", children: infiniteScroll.loadingTemplate ? infiniteScroll.loadingTemplate() : "Loading more\u2026" }) }),
-          /* @__PURE__ */ jsx6(
+        infiniteScroll?.hasMore && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          infiniteScroll.isLoadingMore === true && /* @__PURE__ */ jsx7("tr", { "aria-hidden": "true", className: "grid-loading-row", children: /* @__PURE__ */ jsx7("td", { colSpan: columns.length, className: "grid-loading-cell", children: infiniteScroll.loadingTemplate ? infiniteScroll.loadingTemplate() : messages.loadingMore }) }),
+          /* @__PURE__ */ jsx7(
             "tr",
             {
               "aria-hidden": "true",
               ref: sentinelRef,
               className: "grid-sentinel-row",
-              children: /* @__PURE__ */ jsx6(
+              children: /* @__PURE__ */ jsx7(
                 "td",
                 {
                   colSpan: columns.length,
@@ -1171,29 +1032,34 @@ function GridBody({
 }
 
 // src/DataGrid/components/GridFooter.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function GridFooter({
   columns,
   aggregates,
   results,
-  rows
+  rows,
+  locale
 }) {
-  return /* @__PURE__ */ jsx7("tfoot", { children: /* @__PURE__ */ jsx7("tr", { className: "grid-footer", role: "row", children: columns.map((entry) => {
+  return /* @__PURE__ */ jsx8("tfoot", { children: /* @__PURE__ */ jsx8("tr", { className: "grid-footer", role: "row", children: columns.map((entry) => {
     const specs = aggregates.filter(
       (candidate) => candidate.columnId === entry.id
     );
-    const { column } = entry;
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       "td",
       {
         role: "gridcell",
         "data-gridkit-column": entry.id,
         className: "grid-footer-cell",
         style: { textAlign: specs[0]?.alignment ?? entry.alignment },
-        children: specs.map((spec) => {
-          const value = results.get(spec.id ?? spec.columnId);
-          return column.footerTemplate ? column.footerTemplate({ value, rows }) : formatAggregateValue(value);
-        }).flatMap(
+        children: specs.map(
+          (spec) => renderAggregate(
+            results.get(spec.id ?? spec.columnId),
+            spec,
+            entry.column,
+            rows,
+            locale
+          )
+        ).flatMap(
           (rendered, index) => index === 0 ? [rendered] : [", ", rendered]
         )
       },
@@ -1204,223 +1070,140 @@ function GridFooter({
 
 // src/DataGrid/components/GridPager.tsx
 import { paginationWindow } from "@gridkitjs/core";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function GridPager({ pager, config }) {
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function GridPager({ pager, config, messages }) {
   const { pagination, pageCount, currentPage } = pager;
   const variant = config?.variant ?? "compact";
   const sizeOptions = config?.sizeOptions;
-  return /* @__PURE__ */ jsxs5("div", { className: "gridkit-grid-pager", role: "group", "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx8(
-      "button",
-      {
-        type: "button",
-        className: "grid-pager-button",
-        disabled: pagination.pageIndex <= 0,
-        onClick: () => {
-          pager.previousPage();
-        },
-        children: "Previous"
-      }
-    ),
-    variant === "numbered" ? paginationWindow(currentPage, pageCount, {
-      boundaryCount: config?.boundaryCount,
-      siblingCount: config?.siblingCount
-    }).map(
-      (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx8(
-        "span",
-        {
-          className: "grid-pager-ellipsis",
-          "aria-hidden": "true",
-          children: "\u2026"
-        },
-        `ellipsis-${String(index)}`
-      ) : /* @__PURE__ */ jsx8(
-        "button",
-        {
-          type: "button",
-          className: "grid-pager-button",
-          "aria-label": `Page ${String(entry)}`,
-          "aria-current": entry === currentPage ? "page" : void 0,
-          onClick: () => {
-            pager.goToPage(entry - 1);
-          },
-          children: entry
-        },
-        entry
-      )
-    ) : /* @__PURE__ */ jsxs5("span", { className: "grid-pager-status", children: [
-      "Page ",
-      pageCount === 0 ? 0 : currentPage,
-      " of ",
-      pageCount
-    ] }),
-    /* @__PURE__ */ jsx8(
-      "button",
-      {
-        type: "button",
-        className: "grid-pager-button",
-        disabled: pagination.pageIndex >= pageCount - 1,
-        onClick: () => {
-          pager.nextPage();
-        },
-        children: "Next"
-      }
-    ),
-    sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs5("label", { className: "grid-pager-page-size", children: [
-      "Rows per page",
-      /* @__PURE__ */ jsx8(
-        "select",
-        {
-          value: pagination.pageSize,
-          onChange: (event) => {
-            pager.setPageSize(Number(event.target.value));
-          },
-          children: sizeOptions.map((size) => /* @__PURE__ */ jsx8("option", { value: size, children: size }, size))
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "gridkit-grid-pager",
+      role: "group",
+      "aria-label": messages.pagerLabel,
+      children: [
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: "grid-pager-button",
+            disabled: pagination.pageIndex <= 0,
+            onClick: () => {
+              pager.previousPage();
+            },
+            children: messages.previousPage
+          }
+        ),
+        variant === "numbered" ? paginationWindow(currentPage, pageCount, {
+          boundaryCount: config?.boundaryCount,
+          siblingCount: config?.siblingCount
+        }).map(
+          (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: "grid-pager-ellipsis",
+              "aria-hidden": "true",
+              children: "\u2026"
+            },
+            `ellipsis-${String(index)}`
+          ) : /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              className: "grid-pager-button",
+              "aria-label": messages.pageButtonLabel(entry),
+              "aria-current": entry === currentPage ? "page" : void 0,
+              onClick: () => {
+                pager.goToPage(entry - 1);
+              },
+              children: entry
+            },
+            entry
+          )
+        ) : /* @__PURE__ */ jsx9("span", { className: "grid-pager-status", children: messages.pageStatus(pageCount === 0 ? 0 : currentPage, pageCount) }),
+        /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            className: "grid-pager-button",
+            disabled: pagination.pageIndex >= pageCount - 1,
+            onClick: () => {
+              pager.nextPage();
+            },
+            children: messages.nextPage
+          }
+        ),
+        sizeOptions !== void 0 && sizeOptions.length > 0 && /* @__PURE__ */ jsxs6("label", { className: "grid-pager-page-size", children: [
+          messages.pageSizeLabel,
+          /* @__PURE__ */ jsx9(
+            "select",
+            {
+              value: pagination.pageSize,
+              onChange: (event) => {
+                pager.setPageSize(Number(event.target.value));
+              },
+              children: sizeOptions.map((size) => /* @__PURE__ */ jsx9("option", { value: size, children: size }, size))
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/DataGrid/components/GroupByBar.tsx
 import { createPortal as createPortal2 } from "react-dom";
-import { resolveKeyboardDropTarget } from "@gridkitjs/core";
-
-// src/DataGrid/groupByDropTarget.ts
 import {
-  movesGroupBy,
-  resolveDropBefore
+  resolveColumnLabel as resolveColumnLabel2,
+  resolveKeyboardDropTarget
 } from "@gridkitjs/core";
 
-// src/DataGrid/useDragReorder.ts
+// src/DataGrid/useGroupByDrag.ts
 import {
-  useRef as useRef3,
-  useState as useState2
-} from "react";
-
-// src/DataGrid/pointerGesture.ts
-function startPointerGesture(element, pointerId, handlers) {
-  element.setPointerCapture(pointerId);
-  function stop() {
-    element.removeEventListener("pointermove", move);
-    element.removeEventListener("pointerup", end);
-    element.removeEventListener("pointercancel", cancel);
-    window.removeEventListener("keydown", onKeyDown);
-    if (element.hasPointerCapture(pointerId)) {
-      element.releasePointerCapture(pointerId);
-    }
-  }
-  function move(event) {
-    handlers.onMove(event);
-  }
-  function end() {
-    stop();
-    handlers.onEnd();
-  }
-  function cancel() {
-    stop();
-    handlers.onCancel();
-  }
-  function onKeyDown(event) {
-    if (event.key === "Escape") {
-      cancel();
-    }
-  }
-  element.addEventListener("pointermove", move);
-  element.addEventListener("pointerup", end);
-  element.addEventListener("pointercancel", cancel);
-  window.addEventListener("keydown", onKeyDown);
-}
+  resolveGroupByDropTarget
+} from "@gridkitjs/dom";
 
 // src/DataGrid/useDragReorder.ts
-var DRAG_THRESHOLD = 4;
-function elementAt(x, y, selector) {
-  return document.elementFromPoint(x, y)?.closest(selector) ?? null;
-}
-function sideOf(element, x) {
-  const rect = element.getBoundingClientRect();
-  return x < rect.left + rect.width / 2 ? "before" : "after";
-}
+import {
+  useRef,
+  useState as useState3
+} from "react";
+import {
+  NO_DRAG,
+  startDragReorder
+} from "@gridkitjs/dom";
 function useDragReorder({
   resolveTarget,
   onDrop
 }) {
-  const [draggedId, setDraggedId] = useState2(null);
-  const [dropTarget, setDropTarget] = useState2(null);
-  const [ghostTransform, setGhostTransform] = useState2(null);
-  const dragged = useRef3(false);
+  const [drag, setDrag] = useState3(NO_DRAG);
+  const dragged = useRef(false);
   function justDragged() {
     const answer = dragged.current;
     dragged.current = false;
     return answer;
   }
   function startDrag(id, grabElement, event) {
-    const { pointerId, clientX: startX } = event;
-    const grabX = startX - grabElement.getBoundingClientRect().left;
-    let dragging = false;
-    let target = null;
-    function placeGhost(x, y) {
-      setGhostTransform(`translate(${String(x - grabX)}px, ${String(y)}px)`);
-    }
-    function reset() {
-      setGhostTransform(null);
-      setDraggedId(null);
-      setDropTarget(null);
-    }
-    startPointerGesture(grabElement, pointerId, {
-      onMove(moveEvent) {
-        const { clientX, clientY } = moveEvent;
-        if (!dragging) {
-          if (Math.abs(clientX - startX) < DRAG_THRESHOLD) {
-            return;
-          }
-          dragging = true;
+    startDragReorder(id, grabElement, event, {
+      resolveTarget,
+      onState(state) {
+        if (state.draggedId !== null) {
           dragged.current = true;
-          setDraggedId(id);
-        }
-        placeGhost(clientX, clientY);
-        target = resolveTarget(clientX, clientY, id);
-        setDropTarget(target);
-      },
-      onEnd() {
-        const dropped = target;
-        reset();
-        if (dragging && dropped !== null) {
-          onDrop(dropped, id);
         }
+        setDrag(state);
       },
-      // Escape and a cancelled pointer both leave the order as it was.
-      onCancel() {
-        target = null;
-        reset();
-      }
+      onDrop
     });
   }
   return {
-    draggedId,
-    dropTarget,
-    ghostTransform,
+    draggedId: drag.draggedId,
+    dropTarget: drag.dropTarget,
+    ghostTransform: drag.ghostTransform,
     startDrag,
     justDragged
   };
 }
 
-// src/DataGrid/groupByDropTarget.ts
-function resolveGroupByDropTarget(clientX, clientY, movedId, groupBy) {
-  const overBar = elementAt(clientX, clientY, "[data-gridkit-group-by-bar]");
-  if (overBar === null) {
-    return null;
-  }
-  const overChip = elementAt(clientX, clientY, "[data-gridkit-group-chip]");
-  const chipId = overChip?.getAttribute("data-gridkit-group-chip");
-  const beforeColumnId = overChip && chipId ? resolveDropBefore(
-    groupBy.map((entry) => entry.columnId),
-    chipId,
-    sideOf(overChip, clientX)
-  ) : null;
-  return movesGroupBy(groupBy, movedId, beforeColumnId) ? { kind: "group-by", beforeColumnId } : null;
-}
-
 // src/DataGrid/useGroupByDrag.ts
 function useGroupByDrag({
   groupBy,
@@ -1444,28 +1227,31 @@ function useGroupByDrag({
 }
 
 // src/DataGrid/components/GroupByBar.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function GroupByBar({
   columns,
-  grouping,
+  definitions,
+  groupBy,
+  controller,
   columnName,
   headerDragEligible,
   headerDragBlocked,
-  headerDropTarget
+  headerDropTarget,
+  messages
 }) {
-  const { groupBy } = grouping;
   const groupByIds = groupBy.map((entry) => entry.columnId);
   const chipDrag = useGroupByDrag({
     groupBy,
     onDrop: (movedId, beforeColumnId) => {
-      grouping.moveGroupBy(movedId, beforeColumnId);
+      controller.moveGroupBy(movedId, beforeColumnId);
     }
   });
   const activeDropTarget = chipDrag.dropTarget ?? headerDropTarget;
   const isDragTarget = chipDrag.draggedColumnId !== null || headerDragEligible;
   const showPlaceholder = groupBy.length === 0 && columns.some((entry) => entry.groupByDraggable);
   function labelFor(columnId) {
-    return columns.find((entry) => entry.id === columnId)?.label ?? columnId;
+    const definition = definitions.get(columnId);
+    return definition === void 0 ? columnId : resolveColumnLabel2(definition);
   }
   function moveByKeyboard(columnId, direction) {
     const beforeColumnId = resolveKeyboardDropTarget(
@@ -1476,9 +1262,9 @@ function GroupByBar({
     if (beforeColumnId === void 0) {
       return;
     }
-    grouping.moveGroupBy(columnId, beforeColumnId);
+    controller.moveGroupBy(columnId, beforeColumnId);
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: classNames(
@@ -1488,14 +1274,14 @@ function GroupByBar({
       ),
       "data-gridkit-group-by-bar": "",
       role: "group",
-      "aria-label": "Grouped by",
+      "aria-label": messages.groupByBarLabel,
       children: [
-        showPlaceholder && /* @__PURE__ */ jsx9("span", { className: "group-by-bar-placeholder", children: "Drag a column here to group by it" }),
+        showPlaceholder && /* @__PURE__ */ jsx10("span", { className: "group-by-bar-placeholder", children: messages.groupByBarPlaceholder }),
         groupBy.map((entry, index) => {
           const dropBefore = activeDropTarget?.beforeColumnId === entry.columnId;
           const dropAfter = activeDropTarget?.beforeColumnId === null && index === groupBy.length - 1;
           const dragging = chipDrag.draggedColumnId === entry.columnId;
-          return /* @__PURE__ */ jsxs6(
+          return /* @__PURE__ */ jsxs7(
             "span",
             {
               className: classNames(
@@ -1506,7 +1292,11 @@ function GroupByBar({
               ),
               "data-gridkit-group-chip": entry.columnId,
               tabIndex: 0,
-              "aria-label": groupBy.length > 1 ? `${columnName(entry.columnId)}, level ${String(index + 1)} of ${String(groupBy.length)}` : columnName(entry.columnId),
+              "aria-label": messages.groupByChipLabel(
+                columnName(entry.columnId),
+                index + 1,
+                groupBy.length
+              ),
               "aria-keyshortcuts": "Control+ArrowLeft Control+ArrowRight",
               onPointerDown: (event) => {
                 chipDrag.startDrag(entry.columnId, event);
@@ -1522,18 +1312,18 @@ function GroupByBar({
                 }
               },
               children: [
-                /* @__PURE__ */ jsx9("span", { className: "group-by-chip-label", children: labelFor(entry.columnId) }),
-                /* @__PURE__ */ jsx9(
+                /* @__PURE__ */ jsx10("span", { className: "group-by-chip-label", children: labelFor(entry.columnId) }),
+                /* @__PURE__ */ jsx10(
                   "button",
                   {
                     type: "button",
                     className: "group-by-chip-remove",
-                    "aria-label": `Stop grouping by ${columnName(entry.columnId)}`,
+                    "aria-label": messages.removeGroupBy(columnName(entry.columnId)),
                     onPointerDown: (event) => {
                       event.stopPropagation();
                     },
                     onClick: () => {
-                      grouping.toggleGroupBy(entry.columnId);
+                      controller.toggleGroupBy(entry.columnId);
                     },
                     children: "\xD7"
                   }
@@ -1544,7 +1334,7 @@ function GroupByBar({
           );
         }),
         chipDrag.draggedColumnId !== null && chipDrag.ghostTransform !== null && createPortal2(
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "span",
             {
               className: "group-by-chip drag-ghost",
@@ -1560,167 +1350,1553 @@ function GroupByBar({
   );
 }
 
-// src/DataGrid/useColumnDrag.ts
+// src/DataGrid/announcedCallbacks.ts
 import {
-  movesColumn,
-  resolveDropBefore as resolveDropBefore2,
-  resolveKeyboardDropTarget as resolveKeyboardDropTarget2
+  isColumnVisible
 } from "@gridkitjs/core";
-function useColumnDrag({
-  order,
-  groupBy,
-  groupByDraggableIds,
-  onDrop
+function announcedCallbacks({
+  callbacks,
+  announce,
+  messages,
+  columnName,
+  columnOf
 }) {
-  const drag = useDragReorder({
-    resolveTarget(clientX, clientY, movedId) {
-      const over = elementAt(clientX, clientY, "th[data-gridkit-column]");
-      const overId = over?.getAttribute("data-gridkit-column");
-      const beforeId = over && overId ? resolveDropBefore2(order, overId, sideOf(over, clientX)) : void 0;
-      if (beforeId !== void 0) {
-        return movesColumn(order, movedId, beforeId) ? { kind: "column-order", beforeId } : null;
+  return {
+    /**
+     * Announced only once the drag ends: the controller reports the
+     * continuous `"move"` phase as well, and a live region given every frame
+     * of a drag says nothing an assistive technology can keep up with.
+     */
+    onColumnResize: (event) => {
+      callbacks.onColumnResize?.(event);
+      if (event.phase === "end") {
+        announce(
+          messages.columnResized(
+            columnName(event.columnId),
+            Math.round(event.width)
+          )
+        );
+      }
+    },
+    /**
+     * Naming a column shown or hidden alone, and counting several — "Show
+     * all" in the column chooser, or `hideColumns` given a list. A change
+     * that shows some and hides others, as restoring a layout can, has no
+     * one thing to say, and says nothing.
+     */
+    onColumnVisibilityChange: (event) => {
+      callbacks.onColumnVisibilityChange?.(event);
+      const { columnIds, visibility } = event;
+      const [columnId] = columnIds;
+      const shownCount = columnIds.filter((id) => {
+        const column = columnOf(id);
+        return column !== void 0 && isColumnVisible(column, visibility);
+      }).length;
+      if (columnId === void 0 || shownCount !== 0 && shownCount !== columnIds.length) {
+        return;
+      }
+      const shown = shownCount > 0;
+      if (columnIds.length > 1) {
+        announce(
+          shown ? messages.columnsShown(columnIds.length) : messages.columnsHidden(columnIds.length)
+        );
+        return;
       }
-      const alreadyGrouped = groupBy.some(
-        (entry) => entry.columnId === movedId
+      announce(
+        shown ? messages.columnShown(columnName(columnId)) : messages.columnHidden(columnName(columnId))
       );
-      return groupByDraggableIds.has(movedId) && !alreadyGrouped ? resolveGroupByDropTarget(clientX, clientY, movedId, groupBy) : null;
     },
-    onDrop
-  });
-  function startDrag(entry, event) {
-    drag.startDrag(entry.id, event.currentTarget, event);
-  }
-  function moveByKeyboard(entry, direction) {
-    const beforeId = resolveKeyboardDropTarget2(order, entry.id, direction);
-    if (beforeId === void 0) {
-      return;
+    /** A toggle, a stack, or a clear back to "none" each get their own. */
+    onColumnSortChange: (event) => {
+      callbacks.onColumnSortChange?.(event);
+      const entry = event.sort.find(
+        (candidate) => candidate.columnId === event.columnId
+      );
+      if (entry === void 0) {
+        announce(messages.sortCleared(columnName(event.columnId)));
+        return;
+      }
+      announce(
+        messages.columnSorted(
+          columnName(event.columnId),
+          entry.direction,
+          event.sort.indexOf(entry) + 1,
+          event.sort.length
+        )
+      );
+    },
+    onGroupByChange: (event) => {
+      callbacks.onGroupByChange?.(event);
+      const entry = event.groupBy.find(
+        (candidate) => candidate.columnId === event.columnId
+      );
+      if (entry === void 0) {
+        announce(messages.groupingRemoved(columnName(event.columnId)));
+        return;
+      }
+      announce(
+        messages.groupedBy(
+          columnName(event.columnId),
+          event.groupBy.indexOf(entry) + 1,
+          event.groupBy.length
+        )
+      );
+    },
+    /**
+     * `groupId: null` marks `expandAll`/`collapseAll`, which touch every
+     * group in one call rather than one at a time — announced as a single
+     * summary instead of naming a group that doesn't apply.
+     */
+    onGroupExpansionChange: (event) => {
+      callbacks.onGroupExpansionChange?.(event);
+      if (event.groupId === null) {
+        announce(
+          event.expansion.length === 0 ? messages.allGroupsExpanded : messages.allGroupsCollapsed
+        );
+        return;
+      }
+      announce(
+        event.expansion.includes(event.groupId) ? messages.groupCollapsed : messages.groupExpanded
+      );
+    },
+    onPaginationChange: (event) => {
+      callbacks.onPaginationChange?.(event);
+      announce(
+        messages.pageStatus(event.pagination.pageIndex + 1, event.pageCount)
+      );
+    },
+    /**
+     * Unlike rows and columns, a cell selection is always exactly one cell —
+     * there is no multi-cell range — so it never crosses the count's >1
+     * threshold and the focused cell's own `aria-selected` is the only
+     * feedback a screen-reader user would otherwise get. Announced on every
+     * change that lands on a cell instead.
+     */
+    onCellSelectionChange: (event) => {
+      callbacks.onCellSelectionChange?.(event);
+      if (event.selected !== null) {
+        announce(
+          messages.cellSelected(
+            columnName(event.selected.columnId),
+            event.selected.rowIndex + 1
+          )
+        );
+      }
+    },
+    /**
+     * Announced only for a change touching more than one row or column. A
+     * single selection is already carried by the focused member's own
+     * `aria-selected`, and repeating it here would talk over that. Counted
+     * by id, so rows the change touched off screen — on another page, in a
+     * collapsed group — count too.
+     */
+    onSelectionDiff: (event) => {
+      if (event.added.length + event.removed.length > 1) {
+        announce(messages.selectedCount(event.selection.length, event.target));
+      }
     }
-    onDrop({ kind: "column-order", beforeId }, entry.id);
+  };
+}
+
+// src/DataGrid/commands/useGridCommands.ts
+import { useMemo as useMemo3 } from "react";
+import {
+  createCommandContext,
+  resolveCommands,
+  runCommand
+} from "@gridkitjs/core";
+function useGridCommands({
+  controller,
+  commands: appCommands,
+  onCommand,
+  messages,
+  announce,
+  resize,
+  openPanel
+}) {
+  const commands = useMemo3(() => resolveCommands(appCommands), [appCommands]);
+  const host = {
+    autoFitColumns: (columnIds) => {
+      const { columns } = controller.getView();
+      let fitted = 0;
+      for (const columnId of columnIds) {
+        const entry = columns.find((candidate) => candidate.id === columnId);
+        if (entry !== void 0 && resize.sizeToContent(entry)) {
+          fitted += 1;
+        }
+      }
+      if (fitted > 1) {
+        announce(messages.columnsAutoFitted(fitted));
+      }
+    },
+    openPanel,
+    announce
+  };
+  function contextFor(target) {
+    return createCommandContext({ controller, target, messages, host });
+  }
+  function report(commandId, target, source) {
+    onCommand?.({ commandId, target, source });
   }
   return {
-    draggedColumnId: drag.draggedId,
-    dropTarget: drag.dropTarget,
-    ghostTransform: drag.ghostTransform,
-    startDrag,
-    moveByKeyboard,
-    justDragged: drag.justDragged
+    commands,
+    host,
+    contextFor,
+    report,
+    run: (commandId, target, source) => {
+      const command = commands.get(commandId);
+      if (command === void 0) {
+        console.error(`DataGrid: there is no command \`${commandId}\` to run.`);
+        return false;
+      }
+      if (!runCommand(command, contextFor(target))) {
+        return false;
+      }
+      report(commandId, target, source);
+      return true;
+    }
   };
 }
 
-// src/DataGrid/useColumnResize.ts
+// src/DataGrid/menu/GridMenu.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState4 } from "react";
 import {
-  useState as useState3
-} from "react";
-import {
-  applyColumnResize,
-  beginColumnResize,
-  clampColumnWidth,
-  resolveColumnConstraints,
-  revertColumnSize,
-  sizeColumnToContent
-} from "@gridkitjs/core";
+  attachMenu
+} from "@gridkitjs/dom";
 
-// src/DataGrid/measureColumnContent.ts
-function measureColumnContent(table, columnId) {
-  const cells = table.querySelectorAll(
-    `td[data-gridkit-column="${CSS.escape(columnId)}"]`
-  );
-  const range = document.createRange();
-  let widest = null;
-  for (const cell of cells) {
-    range.selectNodeContents(cell);
-    const style = getComputedStyle(cell);
-    const width = range.getBoundingClientRect().width + parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
-    if (widest === null || width > widest) {
-      widest = width;
+// src/DataGrid/overlay/Overlay.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef2 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import {
+  attachOverlay
+} from "@gridkitjs/dom";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ANCHOR_GAP = 4;
+function overlayThemeClassName(element) {
+  const scope = element?.closest(".gridkit-light, .gridkit-dark");
+  if (scope === null || scope === void 0) {
+    return "";
+  }
+  return scope.classList.contains("gridkit-dark") ? "gridkit-dark" : "gridkit-light";
+}
+function Overlay({
+  anchor,
+  placement,
+  gap,
+  offset,
+  initialFocus,
+  returnFocusTo,
+  ignoreScrollAfterInput,
+  themeClassName,
+  onDismiss,
+  children
+}) {
+  const panelRef = useRef2(null);
+  const onDismissRef = useRef2(onDismiss);
+  useLayoutEffect2(() => {
+    onDismissRef.current = onDismiss;
+  });
+  useLayoutEffect2(() => {
+    const panel = panelRef.current;
+    if (panel === null) {
+      return void 0;
     }
-  }
-  return widest;
+    return attachOverlay(anchor, panel, {
+      placement,
+      gap,
+      offset,
+      initialFocus,
+      returnFocusTo,
+      ignoreScrollAfterInput,
+      onDismiss: (reason) => {
+        onDismissRef.current(reason);
+      }
+    });
+  }, [
+    anchor,
+    placement,
+    gap,
+    offset,
+    initialFocus,
+    returnFocusTo,
+    ignoreScrollAfterInput
+  ]);
+  return createPortal3(
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref: panelRef,
+        className: classNames("gridkit-overlay", themeClassName),
+        children
+      }
+    ),
+    document.body
+  );
 }
 
-// src/DataGrid/useColumnResize.ts
-function useColumnResize({
-  tableRef,
-  sizing,
-  setSizing,
-  columnSizeDefaults,
-  onColumnResize
+// src/DataGrid/menu/menuIcons.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+var BUILT_IN_ICONS = {
+  sortAscending: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "m3 8 4-4 4 4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M7 4v16" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 12h4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 16h7" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 20h10" })
+  ] }),
+  sortDescending: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "m3 16 4 4 4-4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M7 20V4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 4h10" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 8h7" }),
+    /* @__PURE__ */ jsx12("path", { d: "M11 12h4" })
+  ] }),
+  group: () => /* @__PURE__ */ jsx12(GroupIcon, {}),
+  hide: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+    /* @__PURE__ */ jsx12("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+    /* @__PURE__ */ jsx12("path", { d: "M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+    /* @__PURE__ */ jsx12("path", { d: "m2 2 20 20" })
+  ] }),
+  autoFit: () => /* @__PURE__ */ jsxs8(Icon, { children: [
+    /* @__PURE__ */ jsx12("path", { d: "m18 8 4 4-4 4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M2 12h20" }),
+    /* @__PURE__ */ jsx12("path", { d: "m6 8-4 4 4 4" })
+  ] })
+};
+var ICONS = new Map(Object.entries(BUILT_IN_ICONS));
+function MenuIcon({ name }) {
+  const draw = name === void 0 ? void 0 : ICONS.get(name);
+  return draw === void 0 ? null : draw();
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "M20 6 9 17l-5-5" }) });
+}
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" }) });
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx12(Icon, { children: /* @__PURE__ */ jsx12("path", { d: "m9 18 6-6-6-6" }) });
+}
+
+// src/DataGrid/menu/GridMenu.tsx
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function itemElement(menu, id) {
+  return Array.from(
+    menu.querySelectorAll("[data-gridkit-menu-item]")
+  ).find((item) => item.getAttribute("data-gridkit-menu-item") === id) ?? null;
+}
+function topInset(menu) {
+  const style = getComputedStyle(menu);
+  return parseFloat(style.borderTopWidth) + parseFloat(style.paddingTop);
+}
+function MenuItem({
+  entry,
+  expanded
 }) {
-  const [activeColumnId, setActiveColumnId] = useState3(null);
-  function commit(base, columnId, width, phase) {
-    const next = { ...base, [columnId]: width };
-    setSizing(next);
-    onColumnResize?.({ columnId, width, sizing: next, phase });
-  }
-  function startResize(entry, event) {
-    const handle = event.currentTarget;
-    const { pointerId } = event;
-    const session = beginColumnResize(
-      entry.column,
-      entry.width,
-      event.clientX,
-      columnSizeDefaults
-    );
-    const base = sizing;
-    let width = session.startWidth;
-    event.preventDefault();
-    event.stopPropagation();
-    setActiveColumnId(session.columnId);
-    startPointerGesture(handle, pointerId, {
-      onMove(moveEvent) {
-        width = applyColumnResize(session, moveEvent.clientX);
-        commit(base, session.columnId, width, "move");
+  const isItem = entry.type === "item";
+  const checked = isItem ? entry.checked : void 0;
+  const shortcut = isItem ? entry.shortcut : void 0;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      role: checked === void 0 ? "menuitem" : "menuitemcheckbox",
+      "data-gridkit-menu-item": entry.id,
+      className: "menu-item",
+      ...ariaAttr(isItem && entry.disabled, "aria-disabled", true),
+      ...ariaAttr(checked !== void 0, "aria-checked", checked),
+      ...ariaAttr(shortcut !== void 0, "aria-keyshortcuts", shortcut),
+      ...ariaAttr(!isItem, "aria-haspopup", "menu"),
+      ...ariaAttr(!isItem, "aria-expanded", expanded),
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: "menu-item-icon", "aria-hidden": "true", children: checked === true ? /* @__PURE__ */ jsx13(CheckIcon, {}) : /* @__PURE__ */ jsx13(MenuIcon, { name: entry.icon }) }),
+        /* @__PURE__ */ jsx13("span", { className: "menu-item-label", children: entry.label }),
+        shortcut !== void 0 && /* @__PURE__ */ jsx13("span", { className: "menu-item-shortcut", "aria-hidden": "true", children: shortcut }),
+        !isItem && /* @__PURE__ */ jsx13("span", { className: "menu-submenu-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx13(ChevronRightIcon, {}) })
+      ]
+    }
+  );
+}
+function GridMenu({
+  entries,
+  label,
+  themeClassName,
+  onRun,
+  onClose,
+  onCloseSubmenu,
+  behaviourRef
+}) {
+  const menuRef = useRef3(null);
+  const submenuBehaviourRef = useRef3(null);
+  const [submenu, setSubmenu] = useState4(null);
+  const isSubmenu = onCloseSubmenu !== void 0;
+  const latest = useRef3({ entries, submenu, onRun, onClose, onCloseSubmenu });
+  useLayoutEffect3(() => {
+    latest.current = { entries, submenu, onRun, onClose, onCloseSubmenu };
+  });
+  useLayoutEffect3(() => {
+    const menu = menuRef.current;
+    if (menu === null) {
+      return void 0;
+    }
+    const behaviour = attachMenu(menu, {
+      onActivate: (id) => {
+        const item = latest.current.entries.find(
+          (entry) => entry.type === "item" && entry.id === id
+        );
+        if (item !== void 0) {
+          latest.current.onRun(item);
+        }
       },
-      onEnd() {
-        setActiveColumnId(null);
-        if (width !== session.startWidth) {
-          commit(base, session.columnId, width, "end");
+      onOpenSubmenu: (id, { focus }) => {
+        if (latest.current.submenu?.id === id) {
+          if (focus === "first") {
+            submenuBehaviourRef.current?.focusItem(0);
+          }
+          return;
         }
+        const anchor = itemElement(menu, id);
+        if (anchor !== null) {
+          setSubmenu({ id, anchor, focus, offset: -topInset(menu) });
+        }
+      },
+      onCollapseSubmenu: () => {
+        setSubmenu(null);
       },
-      /**
-       * Escape puts back only the dragged column's pre-drag width, merged
-       * into whatever the sizing state is *now* — not the `base` snapshot
-       * taken at drag-start — so a different column resized via keyboard
-       * while this drag was still open keeps its change instead of being
-       * clobbered by a stale restore.
-       */
-      onCancel() {
-        setActiveColumnId(null);
-        setSizing((current) => {
-          const next = revertColumnSize(current, base, session.columnId);
-          onColumnResize?.({
-            columnId: session.columnId,
-            width: session.startWidth,
-            sizing: next,
-            phase: "end"
-          });
-          return next;
-        });
+      onCloseSubmenu: isSubmenu ? () => {
+        latest.current.onCloseSubmenu?.();
+      } : void 0,
+      onClose: () => {
+        latest.current.onClose();
       }
     });
-  }
-  function sizeToContent(entry) {
-    const table = tableRef.current;
-    if (table === null) {
-      return;
-    }
-    const measured = measureColumnContent(table, entry.id);
-    if (measured === null) {
-      return;
+    if (behaviourRef !== void 0) {
+      behaviourRef.current = behaviour;
     }
-    commit(
-      sizing,
-      entry.id,
-      sizeColumnToContent(
-        measured,
-        resolveColumnConstraints(entry.column, columnSizeDefaults)
-      ),
-      "end"
-    );
+    return () => {
+      if (behaviourRef !== void 0) {
+        behaviourRef.current = null;
+      }
+      behaviour.detach();
+    };
+  }, [isSubmenu, behaviourRef]);
+  function closeSubmenu() {
+    setSubmenu(null);
+  }
+  const openEntry = submenu === null ? void 0 : entries.find(
+    (entry) => entry.type === "submenu" && entry.id === submenu.id
+  );
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        "aria-label": label,
+        className: "gridkit-menu",
+        children: entries.map(
+          (entry) => entry.type === "separator" ? /* @__PURE__ */ jsx13("div", { role: "separator", className: "menu-separator" }, entry.key) : /* @__PURE__ */ jsx13(
+            MenuItem,
+            {
+              entry,
+              expanded: entry.id === submenu?.id
+            },
+            entry.id
+          )
+        )
+      }
+    ),
+    submenu !== null && openEntry !== void 0 && /* @__PURE__ */ jsx13(
+      Overlay,
+      {
+        anchor: submenu.anchor,
+        placement: "right-start",
+        offset: submenu.offset,
+        initialFocus: submenu.focus,
+        themeClassName,
+        onDismiss: closeSubmenu,
+        children: /* @__PURE__ */ jsx13(
+          GridMenu,
+          {
+            entries: openEntry.items,
+            label: openEntry.label,
+            themeClassName,
+            onRun,
+            onClose,
+            onCloseSubmenu: closeSubmenu,
+            behaviourRef: submenuBehaviourRef
+          }
+        )
+      },
+      submenu.id
+    )
+  ] });
+}
+
+// src/DataGrid/contextMenu/GridContextMenu.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function GridContextMenu({
+  contextMenu
+}) {
+  const { menu, run, close } = contextMenu;
+  if (menu === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx14(
+    Overlay,
+    {
+      anchor: menu.anchor,
+      gap: menu.anchor instanceof Element ? ANCHOR_GAP : 0,
+      returnFocusTo: menu.cell ?? void 0,
+      themeClassName: menu.themeClassName,
+      onDismiss: close,
+      children: /* @__PURE__ */ jsx14(
+        GridMenu,
+        {
+          entries: menu.entries,
+          label: menu.label,
+          themeClassName: menu.themeClassName,
+          onRun: run,
+          onClose: close
+        }
+      )
+    },
+    menu.key
+  );
+}
+
+// src/DataGrid/contextMenu/useContextMenu.ts
+import {
+  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect4,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+import {
+  contextMenuEntries,
+  hasContextMenu,
+  isSameCell,
+  resolveMenu
+} from "@gridkitjs/core";
+import {
+  attachContextMenuTrigger
+} from "@gridkitjs/dom";
+
+// src/DataGrid/contextMenu/contextMenuPlaces.ts
+import {
+  HEADER_ROW as HEADER_ROW2
+} from "@gridkitjs/core";
+import {
+  bodyCellFrom as bodyCellFrom2,
+  bodyRowFrom as bodyRowFrom2,
+  findBodyRow as findBodyRow2,
+  groupRowFrom as groupRowFrom2
+} from "@gridkitjs/dom";
+function headerCell(parts, columnIndex) {
+  const element = parts.headerTable?.tHead?.rows[0]?.cells[columnIndex];
+  return element === void 0 ? null : { element, rowIndex: HEADER_ROW2, columnIndex };
+}
+function bodyCell(parts, rowIndex, columnIndex) {
+  const element = findBodyRow2(parts.bodyTable, rowIndex)?.cells[columnIndex];
+  return element === void 0 ? null : { element, rowIndex, columnIndex };
+}
+function viewOf(element, parts) {
+  const root = parts.root?.getBoundingClientRect();
+  if (root === void 0) {
+    return null;
+  }
+  const body = parts.body?.contains(element) === true ? parts.body.getBoundingClientRect() : root;
+  const left = Math.max(root.left, body.left);
+  const top = Math.max(root.top, body.top);
+  return new DOMRect(
+    left,
+    top,
+    Math.max(0, Math.min(root.right, body.right) - left),
+    Math.max(0, Math.min(root.bottom, body.bottom) - top)
+  );
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function onCell(target, cell, parts) {
+  if (cell === null) {
+    return null;
+  }
+  const box = cell.element.getBoundingClientRect();
+  const view = viewOf(cell.element, parts);
+  if (view === null || box.right > view.left && box.left < view.right && box.bottom > view.top && box.top < view.bottom) {
+    return { target, cell, anchor: cell.element };
+  }
+  return {
+    target,
+    cell,
+    anchor: {
+      x: clamp(box.left, view.left, view.right),
+      y: clamp(box.bottom, view.top, view.bottom)
+    }
+  };
+}
+function onBody(body) {
+  const { left, top } = body.getBoundingClientRect();
+  return { target: { area: "body" }, cell: null, anchor: { x: left, y: top } };
+}
+function headerPlaceAt(element, parts) {
+  const cell = element.closest("th[data-gridkit-column]");
+  const columnId = cell?.getAttribute("data-gridkit-column");
+  if (cell === null || cell.parentElement !== parts.headerTable?.tHead?.rows[0] || columnId === null || columnId === void 0) {
+    return null;
+  }
+  return onCell(
+    { area: "header", columnId },
+    headerCell(parts, cell.cellIndex),
+    parts
+  );
+}
+function bodyPlaceAt(element, parts) {
+  const { body, pageRows } = parts;
+  if (body === null || !body.contains(element)) {
+    return null;
+  }
+  const group = groupRowFrom2(element);
+  if (group !== null) {
+    const entry = pageRows[group.rowIndex];
+    const cell = bodyCell(parts, group.rowIndex, 0);
+    return entry !== void 0 && "kind" in entry && entry.kind === "group" && cell?.element.contains(element) === true ? onCell(
+      { area: "group", groupId: entry.groupId, columnId: entry.columnId },
+      cell,
+      parts
+    ) : null;
+  }
+  const position = bodyCellFrom2(element);
+  if (position !== null) {
+    const entry = pageRows[position.rowIndex];
+    const cell = bodyCell(parts, position.rowIndex, position.columnIndex);
+    return entry !== void 0 && !("kind" in entry) && cell?.element.contains(element) === true ? onCell(
+      { area: "cell", rowId: entry.rowId, columnId: position.columnId },
+      cell,
+      parts
+    ) : null;
+  }
+  return bodyRowFrom2(element) === null ? onBody(body) : null;
+}
+function placeAt(element, parts) {
+  return headerPlaceAt(element, parts) ?? bodyPlaceAt(element, parts);
+}
+function placeOf(target, parts) {
+  const columnIndexOf = (columnId) => parts.columns.findIndex((column) => column.id === columnId);
+  switch (target.area) {
+    case "header":
+      return onCell(
+        target,
+        headerCell(parts, columnIndexOf(target.columnId)),
+        parts
+      );
+    case "cell": {
+      const rowIndex = parts.pageRows.findIndex(
+        (entry) => !("kind" in entry) && entry.rowId === target.rowId
+      );
+      return onCell(
+        target,
+        bodyCell(parts, rowIndex, columnIndexOf(target.columnId)),
+        parts
+      );
+    }
+    case "group": {
+      const rowIndex = parts.pageRows.findIndex(
+        (entry) => "kind" in entry && entry.kind === "group" && entry.groupId === target.groupId
+      );
+      return onCell(target, bodyCell(parts, rowIndex, 0), parts);
+    }
+    case "body":
+      return parts.body === null ? null : onBody(parts.body);
+  }
+}
+
+// src/DataGrid/contextMenu/useContextMenu.ts
+function useContextMenu({
+  rootRef,
+  headerTableRef,
+  bodyTableRef,
+  bodyScrollRef,
+  contextMenu,
+  onContextMenuOpenChange,
+  controller,
+  commands,
+  nav,
+  selection,
+  messages,
+  columnName
+}) {
+  const [menu, setMenu] = useState5(null);
+  const current = useRef4(null);
+  const openings = useRef4(0);
+  const enabled = contextMenu !== void 0 && contextMenu !== false;
+  function parts() {
+    const { columns, pageRows } = controller.getView();
+    return {
+      root: rootRef.current,
+      headerTable: headerTableRef.current,
+      bodyTable: bodyTableRef.current,
+      body: bodyScrollRef.current,
+      columns,
+      pageRows
+    };
+  }
+  function labelOf(target) {
+    switch (target.area) {
+      case "header":
+        return messages.headerMenuLabel(columnName(target.columnId));
+      case "cell":
+        return messages.cellMenuLabel;
+      case "group":
+        return messages.groupMenuLabel;
+      case "body":
+        return messages.bodyMenuLabel;
+    }
+  }
+  function selectTarget(target) {
+    const state = controller.getState();
+    if (target.area === "header") {
+      if (selection.columnMode === false || state.columnSelection.includes(target.columnId)) {
+        return false;
+      }
+      controller.selectColumn(target.columnId, "replace");
+      return true;
+    }
+    if (target.area !== "cell") {
+      return false;
+    }
+    const cell = { rowId: target.rowId, columnId: target.columnId };
+    const selectRow = selection.rowMode !== false && !state.rowSelection.includes(target.rowId);
+    const selectCell = selection.cellMode !== false && !isSameCell(state.cellSelection, cell);
+    if (selectRow) {
+      controller.selectRow(target.rowId, "replace");
+    }
+    if (selectCell) {
+      controller.selectCell(cell, "replace");
+    }
+    return selectRow || selectCell;
+  }
+  function resolveFor(target) {
+    const context = commands.contextFor(target);
+    return resolveMenu(contextMenuEntries(contextMenu, context), {
+      commands: commands.commands,
+      context
+    });
+  }
+  function show(next) {
+    const previous = current.current;
+    if (previous === next) {
+      return;
+    }
+    current.current = next;
+    setMenu(next);
+    if (previous !== null) {
+      onContextMenuOpenChange?.({ open: false, target: previous.target });
+    }
+    if (next !== null) {
+      onContextMenuOpenChange?.({ open: true, target: next.target });
+    }
+  }
+  function openAt({ target, cell, anchor }, point) {
+    let resolved = resolveFor(target);
+    if (resolved.length === 0) {
+      return false;
+    }
+    if (selectTarget(target)) {
+      resolved = resolveFor(target);
+    }
+    if (cell !== null && document.activeElement !== cell.element) {
+      cell.element.focus({ preventScroll: true });
+      nav.focusCellNow(cell.rowIndex, cell.columnIndex);
+    }
+    openings.current += 1;
+    show({
+      key: openings.current,
+      target,
+      entries: resolved,
+      label: labelOf(target),
+      anchor: point ?? anchor,
+      cell: cell?.element ?? null,
+      themeClassName: overlayThemeClassName(rootRef.current)
+    });
+    return true;
+  }
+  function handleRequest({ target, point }) {
+    const place = placeAt(target, parts());
+    return place !== null && openAt(place, point);
+  }
+  const latestRequest = useRef4(handleRequest);
+  useLayoutEffect4(() => {
+    latestRequest.current = handleRequest;
+  });
+  useEffect2(() => {
+    const root = rootRef.current;
+    if (!enabled || root === null) {
+      return void 0;
+    }
+    return attachContextMenuTrigger(root, {
+      onRequest: (request) => latestRequest.current(request)
+    });
+  }, [rootRef, enabled]);
+  const shown = useRef4(null);
+  useLayoutEffect4(() => {
+    const closed = shown.current;
+    shown.current = menu;
+    if (menu === null && closed !== null && closed.cell !== null && !closed.cell.isConnected && document.activeElement === document.body) {
+      nav.focusTabStop();
+    }
+  });
+  function close() {
+    show(null);
+  }
+  return {
+    menu,
+    opens: (area) => hasContextMenu(contextMenu, area),
+    open: (target, anchor) => {
+      const place = placeOf(target, parts());
+      return place !== null && openAt(place, anchor ?? null);
+    },
+    run: (item) => {
+      const open = current.current;
+      if (item.run() && open !== null) {
+        commands.report(item.id, open.target, "contextMenu");
+      }
+      close();
+    },
+    close
+  };
+}
+
+// src/DataGrid/columnChooser/ColumnChooser.tsx
+import { useLayoutEffect as useLayoutEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { resolveColumnChooser } from "@gridkitjs/core";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function ColumnChooser({
+  controller,
+  messages
+}) {
+  const [search, setSearch] = useState6("");
+  const showAllRef = useRef5(null);
+  const { entries, selectAll, toggleAll } = resolveColumnChooser({
+    columns: controller.getView().dataColumns,
+    visibility: controller.getState().columnVisibility,
+    search
+  });
+  useLayoutEffect5(() => {
+    if (showAllRef.current !== null) {
+      showAllRef.current.indeterminate = selectAll === "mixed";
+    }
+  });
+  function setVisible(columnIds, visible) {
+    if (visible) {
+      controller.showColumns(columnIds);
+    } else {
+      controller.hideColumns(columnIds);
+    }
+  }
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": messages.columnChooserLabel,
+      className: "gridkit-column-chooser",
+      children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            type: "search",
+            className: "column-chooser-search",
+            "aria-label": messages.columnChooserSearchLabel,
+            placeholder: messages.searchPlaceholder,
+            value: search,
+            onChange: (event) => {
+              setSearch(event.currentTarget.value);
+            }
+          }
+        ),
+        entries.length === 0 ? /* @__PURE__ */ jsx15("p", { role: "status", className: "column-chooser-empty", children: messages.noMatchingColumns }) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsxs10("label", { className: "column-chooser-option column-chooser-all", children: [
+            /* @__PURE__ */ jsx15(
+              "input",
+              {
+                ref: showAllRef,
+                type: "checkbox",
+                checked: selectAll === "checked",
+                disabled: toggleAll === null,
+                onChange: () => {
+                  if (toggleAll !== null) {
+                    setVisible(toggleAll.columnIds, toggleAll.visible);
+                  }
+                }
+              }
+            ),
+            messages.showAllColumns
+          ] }),
+          /* @__PURE__ */ jsx15("ul", { className: "column-chooser-list", children: entries.map((entry) => /* @__PURE__ */ jsx15("li", { children: /* @__PURE__ */ jsxs10("label", { className: "column-chooser-option", children: [
+            /* @__PURE__ */ jsx15(
+              "input",
+              {
+                type: "checkbox",
+                checked: entry.visible,
+                disabled: entry.disabled,
+                onChange: () => {
+                  setVisible([entry.columnId], !entry.visible);
+                }
+              }
+            ),
+            entry.label
+          ] }) }, entry.columnId)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/DataGrid/panels/GridPanels.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var panelComponents = {
+  columnChooser: ColumnChooser
+};
+function GridPanels({
+  panels,
+  controller,
+  messages
+}) {
+  const { panel, close } = panels;
+  if (panel === null) {
+    return null;
+  }
+  const Panel = panelComponents[panel.kind];
+  return /* @__PURE__ */ jsx16(
+    Overlay,
+    {
+      anchor: panel.anchor,
+      placement: panel.placement,
+      gap: panel.anchor instanceof Element ? ANCHOR_GAP : 0,
+      returnFocusTo: panel.returnFocusTo,
+      ignoreScrollAfterInput: true,
+      themeClassName: panel.themeClassName,
+      onDismiss: close,
+      children: /* @__PURE__ */ jsx16(
+        Panel,
+        {
+          target: panel.target,
+          controller,
+          messages
+        }
+      )
+    },
+    panel.key
+  );
+}
+
+// src/DataGrid/panels/useGridPanels.ts
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef6, useState as useState7 } from "react";
+function toolbarItem(root, itemId) {
+  const items = root.querySelectorAll(
+    ":scope > .gridkit-toolbar > [data-gridkit-toolbar-item]"
+  );
+  return Array.from(items).find(
+    (item) => item.getAttribute("data-gridkit-toolbar-item") === itemId
+  ) ?? // In "More" while the toolbar is narrow: the button it is chosen from.
+  Array.from(items).find(
+    (item) => item.hasAttribute("data-gridkit-toolbar-more")
+  ) ?? null;
+}
+function headerCell2(headerTable, columnId) {
+  const cells = headerTable?.tHead?.rows[0]?.cells;
+  return cells === void 0 ? null : Array.from(cells).find(
+    (cell) => cell.getAttribute("data-gridkit-column") === columnId
+  ) ?? null;
+}
+function useGridPanels({
+  rootRef,
+  headerTableRef,
+  nav
+}) {
+  const [panel, setPanel] = useState7(null);
+  const openings = useRef6(0);
+  function placeFor(root, target) {
+    const element = target.area === "toolbar" ? toolbarItem(root, target.itemId) : target.area === "header" ? headerCell2(headerTableRef.current, target.columnId) : null;
+    if (element !== null) {
+      return {
+        anchor: element,
+        // The toolbar's own button sits at its far end.
+        placement: target.area === "toolbar" ? "bottom-end" : "bottom-start",
+        returnFocusTo: element
+      };
+    }
+    const { right, top } = root.getBoundingClientRect();
+    return {
+      anchor: { x: right, y: top },
+      placement: "bottom-end",
+      returnFocusTo: void 0
+    };
+  }
+  const shown = useRef6(null);
+  useLayoutEffect6(() => {
+    const closed = shown.current;
+    shown.current = panel;
+    if (panel === null && closed?.returnFocusTo?.isConnected === false && document.activeElement === document.body) {
+      nav.focusTabStop();
+    }
+  });
+  return {
+    panel,
+    open: (kind, target) => {
+      const root = rootRef.current;
+      if (root === null) {
+        return;
+      }
+      openings.current += 1;
+      setPanel({
+        key: openings.current,
+        kind,
+        target,
+        ...placeFor(root, target),
+        themeClassName: overlayThemeClassName(root)
+      });
+    },
+    close: () => {
+      setPanel(null);
+    }
+  };
+}
+
+// src/DataGrid/toolbar/GridToolbar.tsx
+import { useLayoutEffect as useLayoutEffect9, useRef as useRef10 } from "react";
+import {
+  resolveToolbar,
+  splitToolbarItems,
+  toolbarEntries
+} from "@gridkitjs/core";
+import { attachToolbar } from "@gridkitjs/dom";
+
+// src/DataGrid/toolbar/ToolbarMenuButton.tsx
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef7, useState as useState8 } from "react";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function ToolbarMenuButton({
+  itemKey,
+  label,
+  icon,
+  entries,
+  more = false,
+  onMenuClose
+}) {
+  const [menu, setMenu] = useState8(null);
+  const menuBehaviourRef = useRef7(null);
+  useLayoutEffect7(() => {
+    if (menu !== null && menu.focusItem > 0) {
+      menuBehaviourRef.current?.focusItem(menu.focusItem);
+    }
+  }, [menu]);
+  function open(button, onLast = false) {
+    setMenu({
+      anchor: button,
+      themeClassName: overlayThemeClassName(button),
+      focusItem: onLast ? entries.filter((entry) => entry.type !== "separator").length - 1 : 0
+    });
+  }
+  function close() {
+    setMenu(null);
+    onMenuClose();
+  }
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
+    /* @__PURE__ */ jsxs11(
+      "button",
+      {
+        type: "button",
+        className: classNames("toolbar-button", more && "toolbar-more"),
+        "data-gridkit-toolbar-item": itemKey,
+        ...ariaAttr(more, "data-gridkit-toolbar-more", ""),
+        "aria-haspopup": "menu",
+        "aria-expanded": menu !== null,
+        onClick: (event) => {
+          if (menu === null) {
+            open(event.currentTarget);
+          } else {
+            close();
+          }
+        },
+        onKeyDown: (event) => {
+          if ((event.key === "ArrowDown" || event.key === "ArrowUp") && menu === null) {
+            event.preventDefault();
+            open(event.currentTarget, event.key === "ArrowUp");
+          }
+        },
+        children: [
+          icon !== void 0 && /* @__PURE__ */ jsx17("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx17(MenuIcon, { name: icon }) }),
+          label,
+          /* @__PURE__ */ jsx17("span", { className: "toolbar-button-indicator", "aria-hidden": "true", children: /* @__PURE__ */ jsx17(ChevronDownIcon, {}) })
+        ]
+      }
+    ),
+    menu !== null && /* @__PURE__ */ jsx17(
+      Overlay,
+      {
+        anchor: menu.anchor,
+        placement: "bottom-start",
+        gap: ANCHOR_GAP,
+        returnFocusTo: menu.anchor,
+        themeClassName: menu.themeClassName,
+        onDismiss: close,
+        children: /* @__PURE__ */ jsx17(
+          GridMenu,
+          {
+            entries,
+            label,
+            themeClassName: menu.themeClassName,
+            behaviourRef: menuBehaviourRef,
+            onRun: (item) => {
+              item.run();
+              close();
+            },
+            onClose: close
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/DataGrid/toolbar/ToolbarSearch.tsx
+import { useEffect as useEffect3, useRef as useRef8, useState as useState9 } from "react";
+import {
+  searchTextOf,
+  setSearchText
+} from "@gridkitjs/core";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SEARCH_DELAY_MS = 250;
+function ToolbarSearch({
+  itemKey,
+  controller,
+  messages,
+  announce
+}) {
+  const applied = searchTextOf(controller.getState().filter);
+  const [draft, setDraft] = useState9(null);
+  const timer = useRef8(void 0);
+  const unannounced = useRef8(null);
+  const text = draft !== null && draft.over === applied ? draft.text : applied;
+  function apply(next, over) {
+    clearTimeout(timer.current);
+    setDraft(null);
+    const filter = controller.getState().filter;
+    if (searchTextOf(filter) !== over) {
+      return;
+    }
+    const searched = setSearchText(filter, next);
+    if (searched !== filter) {
+      unannounced.current = next;
+      controller.setFilter(searched);
+    }
+  }
+  useEffect3(() => {
+    if (unannounced.current === applied) {
+      unannounced.current = null;
+      announce(messages.searchResults(controller.getView().rows.length));
+    }
+  });
+  useEffect3(
+    () => () => {
+      clearTimeout(timer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx18(
+    "input",
+    {
+      type: "search",
+      className: "toolbar-search",
+      "data-gridkit-toolbar-item": itemKey,
+      "aria-label": messages.searchLabel,
+      placeholder: messages.searchPlaceholder,
+      value: text,
+      onChange: (event) => {
+        const typed = event.target.value;
+        setDraft({ text: typed, over: applied });
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => {
+          apply(typed, applied);
+        }, SEARCH_DELAY_MS);
+      },
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          apply(text, applied);
+        } else if (event.key === "Escape" && text !== "") {
+          event.preventDefault();
+          apply("", applied);
+        }
+      }
+    }
+  );
+}
+
+// src/DataGrid/toolbar/useToolbarOverflow.ts
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef9, useState as useState10 } from "react";
+import { observeToolbarOverflow } from "@gridkitjs/dom";
+function useToolbarOverflow(toolbarRef, items) {
+  const [fit, setFit] = useState10(items.length);
+  const overflow = useRef9(null);
+  const measuredLayout = useRef9("");
+  const layout = JSON.stringify(
+    items.map((item) => [
+      item.type,
+      item.key,
+      "label" in item ? item.label : null
+    ])
+  );
+  useLayoutEffect8(() => {
+    const toolbar = toolbarRef.current;
+    if (toolbar === null || layout === measuredLayout.current) {
+      return;
+    }
+    measuredLayout.current = layout;
+    const options = { items, onChange: setFit };
+    if (overflow.current === null) {
+      overflow.current = observeToolbarOverflow(toolbar, options);
+    } else {
+      overflow.current.update(options);
+    }
+  }, [toolbarRef, layout, items]);
+  useLayoutEffect8(
+    () => () => {
+      overflow.current?.detach();
+      overflow.current = null;
+      measuredLayout.current = "";
+    },
+    []
+  );
+  return fit;
+}
+
+// src/DataGrid/toolbar/GridToolbar.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function reporting(run, report) {
+  return () => {
+    const ran = run();
+    if (ran) {
+      report();
+    }
+    return ran;
+  };
+}
+function reportingEntries(entries, report) {
+  return entries.map((entry) => {
+    switch (entry.type) {
+      case "item":
+        return {
+          ...entry,
+          run: reporting(entry.run, () => {
+            report(entry.id);
+          })
+        };
+      case "submenu":
+        return { ...entry, items: reportingEntries(entry.items, report) };
+      default:
+        return entry;
+    }
+  });
+}
+function reportingItem(item, report) {
+  switch (item.type) {
+    case "button":
+      return {
+        ...item,
+        run: reporting(item.run, () => {
+          report(item.id, item.id);
+        })
+      };
+    case "menu":
+      return {
+        ...item,
+        items: reportingEntries(item.items, (commandId) => {
+          report(commandId, item.id);
+        })
+      };
+    default:
+      return item;
+  }
+}
+function GridToolbar(props) {
+  const entries = toolbarEntries(props.toolbar);
+  if (entries.length === 0) {
+    return null;
+  }
+  const label = (typeof props.toolbar === "object" ? props.toolbar.label : void 0) ?? props.messages.toolbarLabel;
+  return /* @__PURE__ */ jsx19(Toolbar, { ...props, entries, label });
+}
+function Toolbar({
+  entries,
+  label,
+  renderItem,
+  gridId,
+  controller,
+  commands,
+  messages,
+  announce
+}) {
+  const toolbarRef = useRef10(null);
+  const menuClosed = useRef10(false);
+  const items = resolveToolbar(entries, {
+    commands: commands.commands,
+    contextFor: commands.contextFor
+  }).map(
+    (item) => reportingItem(item, (commandId, itemId) => {
+      commands.report(commandId, { area: "toolbar", itemId }, "toolbar");
+    })
+  );
+  const fit = useToolbarOverflow(toolbarRef, items);
+  const { shown, overflow } = splitToolbarItems(items, fit);
+  useLayoutEffect9(() => {
+    const toolbar = toolbarRef.current;
+    return toolbar === null ? void 0 : attachToolbar(toolbar);
+  }, []);
+  useLayoutEffect9(() => {
+    if (!menuClosed.current) {
+      return;
+    }
+    menuClosed.current = false;
+    const toolbar = toolbarRef.current;
+    if (toolbar !== null && document.activeElement === document.body) {
+      (toolbar.querySelector('[tabindex="0"]') ?? toolbar.querySelector("button, input"))?.focus();
+    }
+  });
+  function onMenuClose() {
+    menuClosed.current = true;
+  }
+  function draw(item) {
+    switch (item.type) {
+      case "button":
+        return /* @__PURE__ */ jsxs12(
+          "button",
+          {
+            type: "button",
+            className: "toolbar-button",
+            "data-gridkit-toolbar-item": item.key,
+            ...ariaAttr(item.disabled, "aria-disabled", true),
+            ...ariaAttr(
+              item.pressed !== void 0,
+              "aria-pressed",
+              item.pressed
+            ),
+            ...ariaAttr(
+              item.shortcut !== void 0,
+              "aria-keyshortcuts",
+              item.shortcut
+            ),
+            onClick: () => {
+              item.run();
+            },
+            children: [
+              item.icon !== void 0 && /* @__PURE__ */ jsx19("span", { className: "toolbar-button-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx19(MenuIcon, { name: item.icon }) }),
+              item.label
+            ]
+          },
+          item.key
+        );
+      case "menu":
+        return /* @__PURE__ */ jsx19(
+          ToolbarMenuButton,
+          {
+            itemKey: item.key,
+            label: item.label,
+            icon: item.icon,
+            entries: item.items,
+            onMenuClose
+          },
+          item.key
+        );
+      case "search":
+        return /* @__PURE__ */ jsx19(
+          ToolbarSearch,
+          {
+            itemKey: item.key,
+            controller,
+            messages,
+            announce
+          },
+          item.key
+        );
+      case "separator":
+        return /* @__PURE__ */ jsx19(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "vertical",
+            className: "toolbar-separator",
+            "data-gridkit-toolbar-item": item.key
+          },
+          item.key
+        );
+      case "spacer":
+        return /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: "toolbar-spacer",
+            "data-gridkit-toolbar-item": item.key
+          },
+          item.key
+        );
+      case "custom":
+        return /* @__PURE__ */ jsx19(
+          "div",
+          {
+            className: "toolbar-custom",
+            "data-gridkit-toolbar-item": item.key,
+            children: renderItem?.(item.id)
+          },
+          item.key
+        );
+    }
+  }
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref: toolbarRef,
+      role: "toolbar",
+      "aria-label": label,
+      "aria-controls": gridId,
+      className: "gridkit-toolbar",
+      children: [
+        shown.map(draw),
+        overflow.length > 0 && /* @__PURE__ */ jsx19(
+          ToolbarMenuButton,
+          {
+            itemKey: "more",
+            label: messages.moreToolbarItems,
+            entries: overflow,
+            more: true,
+            onMenuClose
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/DataGrid/useColumnDrag.ts
+import {
+  resolveKeyboardDropTarget as resolveKeyboardDropTarget2
+} from "@gridkitjs/core";
+import { resolveColumnDropTarget } from "@gridkitjs/dom";
+function useColumnDrag({
+  order,
+  groupBy,
+  groupByDraggableIds,
+  onDrop
+}) {
+  const drag = useDragReorder({
+    resolveTarget: (clientX, clientY, movedId) => resolveColumnDropTarget(clientX, clientY, movedId, {
+      order,
+      groupBy,
+      groupByDraggableIds
+    }),
+    onDrop
+  });
+  function startDrag(entry, event) {
+    drag.startDrag(entry.id, event.currentTarget, event);
+  }
+  function moveByKeyboard(entry, direction) {
+    const beforeId = resolveKeyboardDropTarget2(order, entry.id, direction);
+    if (beforeId === void 0) {
+      return;
+    }
+    onDrop({ kind: "column-order", beforeId }, entry.id);
+  }
+  return {
+    draggedColumnId: drag.draggedId,
+    dropTarget: drag.dropTarget,
+    ghostTransform: drag.ghostTransform,
+    startDrag,
+    moveByKeyboard,
+    justDragged: drag.justDragged
+  };
+}
+
+// src/DataGrid/useColumnResize.ts
+import {
+  useState as useState11
+} from "react";
+import {
+  beginColumnResize,
+  clampColumnWidth,
+  resolveColumnConstraints,
+  sizeColumnToContent
+} from "@gridkitjs/core";
+import { measureColumnContent, startColumnResizeGesture } from "@gridkitjs/dom";
+function useColumnResize({
+  tableRef,
+  controller,
+  columnSizeDefaults
+}) {
+  const [activeColumnId, setActiveColumnId] = useState11(null);
+  function startResize(entry, event) {
+    event.stopPropagation();
+    const session = beginColumnResize(
+      entry.column,
+      entry.width,
+      event.clientX,
+      columnSizeDefaults
+    );
+    const base = controller.getState().columnSizing;
+    const started = startColumnResizeGesture(
+      event.currentTarget,
+      event,
+      session,
+      {
+        onMove(width) {
+          controller.resizeColumn(session.columnId, width, "move");
+        },
+        onEnd(width) {
+          setActiveColumnId(null);
+          if (width !== null) {
+            controller.resizeColumn(session.columnId, width, "end");
+          }
+        },
+        /**
+         * Escape puts back only the dragged column's pre-drag width, merged
+         * into whatever the sizing state is *now* — not the `base` snapshot
+         * taken at drag-start — so a different column resized via keyboard
+         * while this drag was still open keeps its change instead of being
+         * clobbered by a stale restore.
+         */
+        onCancel() {
+          setActiveColumnId(null);
+          controller.cancelColumnResize(
+            session.columnId,
+            base,
+            session.startWidth
+          );
+        }
+      }
+    );
+    if (started) {
+      setActiveColumnId(session.columnId);
+    }
+  }
+  function sizeToContent(entry) {
+    const table = tableRef.current;
+    if (table === null) {
+      return false;
+    }
+    const measured = measureColumnContent(table, entry.id);
+    if (measured === null) {
+      return false;
+    }
+    controller.resizeColumn(
+      entry.id,
+      sizeColumnToContent(
+        measured,
+        resolveColumnConstraints(entry.column, columnSizeDefaults)
+      ),
+      "end"
+    );
+    return true;
   }
   function nudge(entry, delta) {
-    commit(
-      sizing,
+    controller.resizeColumn(
       entry.id,
       clampColumnWidth(
         entry.width + delta,
@@ -1729,238 +2905,107 @@ function useColumnResize({
       "end"
     );
   }
-  return { activeColumnId, startResize, sizeToContent, nudge };
-}
-
-// src/DataGrid/useColumnSort.ts
-import {
-  sortDirectionFor,
-  sortPriorityFor,
-  toggleColumnSort
-} from "@gridkitjs/core";
-function useColumnSort({
-  sort,
-  setSort,
-  onColumnSortChange
-}) {
-  function toggle(entry, event) {
-    const next = toggleColumnSort(sort, entry.id, { stack: event.shiftKey });
-    commitIfChanged(sort, next, setSort, (committed) => {
-      onColumnSortChange?.({ columnId: entry.id, sort: committed });
-    });
-  }
-  return {
-    sort,
-    directionFor: (columnId) => sortDirectionFor(sort, columnId),
-    priorityFor: (columnId) => sortPriorityFor(sort, columnId),
-    toggle
-  };
+  return { activeColumnId, startResize, sizeToContent, nudge };
 }
 
 // src/DataGrid/useElementWidth.ts
-import { useLayoutEffect, useState as useState4 } from "react";
+import { useLayoutEffect as useLayoutEffect10, useState as useState12 } from "react";
+import { observeElementWidth } from "@gridkitjs/dom";
 function useElementWidth(ref, enabled) {
-  const [width, setWidth] = useState4(null);
-  useLayoutEffect(() => {
+  const [width, setWidth] = useState12(null);
+  useLayoutEffect10(() => {
     const element = ref.current;
     if (element === null || !enabled) {
       return void 0;
     }
-    setWidth(element.clientWidth);
-    const observer = new ResizeObserver(() => {
-      setWidth(element.clientWidth);
-    });
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
+    return observeElementWidth(element, setWidth);
   }, [ref, enabled]);
   return width;
 }
 
+// src/DataGrid/useGridController.ts
+import { useState as useState13, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import {
+  createGridController
+} from "@gridkitjs/core";
+function useGridController(options) {
+  const [controller] = useState13(
+    () => createGridController(options)
+  );
+  controller.setOptions(options);
+  const state = useSyncExternalStore2(controller.subscribe, controller.getState);
+  return { controller, state, view: controller.getView() };
+}
+
 // src/DataGrid/useInfiniteScroll.ts
-import { useCallback, useEffect as useEffect2, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef11 } from "react";
+import { attachInfiniteScroll } from "@gridkitjs/dom";
 function useInfiniteScroll({
   rootRef,
   sentinelRef,
   config
 }) {
-  const hasMore = config?.hasMore ?? false;
-  const isLoadingMore = config?.isLoadingMore ?? false;
-  const rootMargin = config?.rootMargin ?? "200px";
-  const latestRef = useRef4({
-    hasMore,
-    isLoadingMore,
-    onLoadMore: config?.onLoadMore
-  });
-  useEffect2(() => {
-    latestRef.current = {
-      hasMore,
-      isLoadingMore,
-      onLoadMore: config?.onLoadMore
-    };
-  });
-  const firedRef = useRef4(false);
-  const intersectingRef = useRef4(false);
-  const maybeLoadMore = useCallback(() => {
-    const current = latestRef.current;
-    if (!intersectingRef.current || !current.hasMore || current.isLoadingMore || firedRef.current) {
-      return;
-    }
-    firedRef.current = true;
-    current.onLoadMore?.();
-  }, []);
-  const wasLoadingRef = useRef4(isLoadingMore);
-  useEffect2(() => {
-    if (wasLoadingRef.current && !isLoadingMore) {
-      firedRef.current = false;
-      maybeLoadMore();
-    }
-    wasLoadingRef.current = isLoadingMore;
-  }, [isLoadingMore, maybeLoadMore]);
-  useEffect2(() => {
-    if (!hasMore) {
-      return void 0;
-    }
+  const scroll = useRef11(null);
+  useEffect4(() => {
     const root = rootRef.current;
-    const sentinel = sentinelRef.current;
-    if (root === null || sentinel === null) {
+    if (root === null) {
       return void 0;
     }
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[entries.length - 1];
-        if (entry === void 0) {
-          return;
-        }
-        intersectingRef.current = entry.isIntersecting;
-        maybeLoadMore();
-      },
-      { root, rootMargin }
-    );
-    observer.observe(sentinel);
+    const attached = attachInfiniteScroll(root, {
+      sentinel: null,
+      hasMore: false
+    });
+    scroll.current = attached;
     return () => {
-      observer.disconnect();
-      intersectingRef.current = false;
+      attached.detach();
+      scroll.current = null;
     };
-  }, [hasMore, rootMargin, rootRef, sentinelRef, maybeLoadMore]);
-}
-
-// src/DataGrid/usePagination.ts
-import {
-  paginateRows
-} from "@gridkitjs/core";
-function usePagination({
-  pagination,
-  setPagination,
-  rows,
-  onPaginationChange
-}) {
-  const { pageCount, pageIndex } = paginateRows(rows, pagination);
-  function commit(next) {
-    commitIfChanged(pagination, next, setPagination, (committed) => {
-      const { pageCount: committedPageCount } = paginateRows(rows, committed);
-      onPaginationChange?.({
-        pagination: committed,
-        pageCount: committedPageCount
-      });
-    });
-  }
-  function goToPage(nextPageIndex) {
-    const { pageIndex: clamped } = paginateRows(rows, {
-      ...pagination,
-      pageIndex: nextPageIndex
+  }, [rootRef]);
+  useEffect4(() => {
+    scroll.current?.update({
+      sentinel: sentinelRef.current,
+      hasMore: config?.hasMore ?? false,
+      onLoadMore: config?.onLoadMore,
+      isLoadingMore: config?.isLoadingMore,
+      rootMargin: config?.rootMargin
     });
-    commit({ ...pagination, pageIndex: clamped });
-  }
-  return {
-    pagination,
-    pageCount,
-    currentPage: Math.min(pagination.pageIndex + 1, pageCount),
-    goToPage,
-    nextPage: () => {
-      goToPage(pageIndex + 1);
-    },
-    previousPage: () => {
-      goToPage(pageIndex - 1);
-    },
-    setPageSize: (pageSize) => {
-      const next = { pageIndex: 0, pageSize };
-      const { pageIndex: clamped } = paginateRows(rows, next);
-      commit({ ...next, pageIndex: clamped });
-    }
-  };
+  });
 }
 
-// src/DataGrid/useRowGrouping.ts
-import {
-  collapseAllGroups,
-  expandAllGroups,
-  moveGroupByBefore,
-  toggleGroupExpansion
-} from "@gridkitjs/core";
-function useRowGrouping({
-  groupBy,
-  setGroupBy,
-  expansion,
-  setExpansion,
-  onGroupByChange,
-  onGroupExpansionChange
-}) {
-  function commitExpansion(next, groupId) {
-    commitIfChanged(expansion, next, setExpansion, (committed) => {
-      onGroupExpansionChange?.({ groupId, expansion: committed });
-    });
-  }
-  function commitGroupBy(next, columnId) {
-    commitIfChanged(groupBy, next, setGroupBy, (committed) => {
-      onGroupByChange?.({ columnId, groupBy: committed });
-    });
-  }
-  function toggleGroupBy(columnId) {
-    const isGrouped = groupBy.some((entry) => entry.columnId === columnId);
-    const next = isGrouped ? groupBy.filter((entry) => entry.columnId !== columnId) : [...groupBy, { columnId }];
-    commitGroupBy(next, columnId);
-  }
-  function moveGroupBy(columnId, beforeColumnId) {
-    commitGroupBy(
-      moveGroupByBefore(groupBy, columnId, beforeColumnId),
-      columnId
-    );
-  }
-  return {
-    groupBy,
-    expansion,
-    isExpanded: (groupId) => !expansion.includes(groupId),
-    toggleExpansion: (groupId) => {
-      commitExpansion(toggleGroupExpansion(expansion, groupId), groupId);
-    },
-    expandAll: () => {
-      commitExpansion(expandAllGroups(expansion), null);
-    },
-    collapseAll: (rows) => {
-      commitExpansion(collapseAllGroups(rows), null);
-    },
-    toggleGroupBy,
-    moveGroupBy
-  };
+// src/DataGrid/useLiveAnnouncer.ts
+import { useCallback, useLayoutEffect as useLayoutEffect11, useRef as useRef12 } from "react";
+import { createLiveAnnouncer } from "@gridkitjs/dom";
+function useLiveAnnouncer(containerRef) {
+  const announcer = useRef12(null);
+  useLayoutEffect11(() => {
+    const container = containerRef.current;
+    if (container === null) {
+      return void 0;
+    }
+    const created = createLiveAnnouncer(container);
+    announcer.current = created;
+    return () => {
+      created.destroy();
+      announcer.current = null;
+    };
+  }, [containerRef]);
+  return useCallback((text) => {
+    announcer.current?.announce(text);
+  }, []);
 }
 
 // src/DataGrid/useRowVirtualizer.ts
-import {
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useLayoutEffect as useLayoutEffect2,
-  useRef as useRef5,
-  useState as useState5
-} from "react";
-import { visibleRange } from "@gridkitjs/core";
+import { useLayoutEffect as useLayoutEffect12, useState as useState14 } from "react";
+import { createRowVirtualizer } from "@gridkitjs/dom";
 var EMPTY_RANGE = {
   startIndex: 0,
   endIndex: -1,
   offsetBefore: 0,
   offsetAfter: 0
 };
+function ignoreRow() {
+  return () => void 0;
+}
 function useRowVirtualizer({
   enabled,
   rows,
@@ -1968,339 +3013,142 @@ function useRowVirtualizer({
   estimatedRowHeight,
   overscan
 }) {
-  const rowCount = rows.length;
-  const heightsRef = useRef5([]);
-  const scrollTopRef = useRef5(0);
-  const viewportHeightRef = useRef5(0);
-  const elementsRef = useRef5(/* @__PURE__ */ new Map());
-  const indexByElementRef = useRef5(/* @__PURE__ */ new Map());
-  const refCallbacksRef = useRef5(
-    /* @__PURE__ */ new Map()
-  );
-  const observerRef = useRef5(null);
-  const pendingScrollRef = useRef5(void 0);
-  const [range, setRange] = useState5(EMPTY_RANGE);
-  const recompute = useCallback2(() => {
-    setRange(
-      enabled ? visibleRange(
-        heightsRef.current,
-        estimatedRowHeight,
-        scrollTopRef.current,
-        viewportHeightRef.current,
-        overscan
-      ) : rowCount === 0 ? EMPTY_RANGE : {
-        startIndex: 0,
-        endIndex: rowCount - 1,
-        offsetBefore: 0,
-        offsetAfter: 0
-      }
-    );
-  }, [enabled, rowCount, estimatedRowHeight, overscan]);
-  useLayoutEffect2(() => {
-    heightsRef.current = new Array(rowCount).fill(
-      void 0
-    );
-    recompute();
-  }, [rows, rowCount, recompute]);
-  useLayoutEffect2(() => {
-    if (!enabled) {
-      return void 0;
-    }
+  const [virtualizer, setVirtualizer] = useState14(null);
+  const [range, setRange] = useState14(EMPTY_RANGE);
+  useLayoutEffect12(() => {
     const element = bodyScrollRef.current;
-    if (element === null) {
-      return void 0;
-    }
-    scrollTopRef.current = element.scrollTop;
-    viewportHeightRef.current = element.clientHeight;
-    recompute();
-    const handleScroll = () => {
-      scrollTopRef.current = element.scrollTop;
-      recompute();
-    };
-    element.addEventListener("scroll", handleScroll, { passive: true });
-    const resizeObserver = new ResizeObserver(() => {
-      viewportHeightRef.current = element.clientHeight;
-      recompute();
-    });
-    resizeObserver.observe(element);
-    return () => {
-      element.removeEventListener("scroll", handleScroll);
-      resizeObserver.disconnect();
-    };
-  }, [enabled, bodyScrollRef, recompute]);
-  useEffect3(() => {
-    if (!enabled) {
+    if (!enabled || element === null) {
       return void 0;
     }
-    const observer = new ResizeObserver((entries) => {
-      let changed = false;
-      for (const entry of entries) {
-        const index = indexByElementRef.current.get(entry.target);
-        if (index === void 0) continue;
-        const height = entry.target.getBoundingClientRect().height;
-        if (heightsRef.current[index] !== height) {
-          heightsRef.current[index] = height;
-          changed = true;
-        }
-      }
-      if (changed) {
-        recompute();
-      }
+    const created = createRowVirtualizer(element, {
+      estimatedRowHeight,
+      overscan,
+      onRange: setRange
     });
-    observerRef.current = observer;
-    for (const element of elementsRef.current.values()) {
-      observer.observe(element);
-    }
+    setVirtualizer(created);
     return () => {
-      observer.disconnect();
-      observerRef.current = null;
+      created.destroy();
     };
-  }, [enabled, recompute]);
-  function measureRow(index) {
-    let callback = refCallbacksRef.current.get(index);
-    if (callback === void 0) {
-      callback = (element) => {
-        const observer = observerRef.current;
-        const previous = elementsRef.current.get(index);
-        if (previous !== void 0) {
-          observer?.unobserve(previous);
-          indexByElementRef.current.delete(previous);
-          elementsRef.current.delete(index);
-        }
-        if (element === null) {
-          return;
-        }
-        elementsRef.current.set(index, element);
-        indexByElementRef.current.set(element, index);
-        observer?.observe(element);
-      };
-      refCallbacksRef.current.set(index, callback);
-    }
-    return callback;
-  }
-  useEffect3(() => {
-    const pending = pendingScrollRef.current;
-    if (pending === void 0) {
-      return;
-    }
-    const element = elementsRef.current.get(pending.index);
-    if (element === void 0) {
-      return;
-    }
-    element.scrollIntoView(pending.options);
-    pendingScrollRef.current = void 0;
-  }, [range]);
-  function estimateOffsetBefore(index) {
-    let total = 0;
-    for (let current = 0; current < index; current++) {
-      total += heightsRef.current[current] ?? estimatedRowHeight;
-    }
-    return total;
-  }
-  function scrollToIndex(index, options) {
-    const element = bodyScrollRef.current;
-    if (element === null || rowCount === 0) {
-      return;
-    }
-    const clamped = Math.max(0, Math.min(index, rowCount - 1));
-    const mounted = elementsRef.current.get(clamped);
-    if (mounted !== void 0) {
-      mounted.scrollIntoView(options);
-      return;
-    }
-    pendingScrollRef.current = { index: clamped, options };
-    element.scrollTop = estimateOffsetBefore(clamped);
-  }
+  }, [enabled, bodyScrollRef, estimatedRowHeight, overscan]);
+  useLayoutEffect12(() => {
+    virtualizer?.setRowCount(rows.length);
+    virtualizer?.resetHeights();
+  }, [virtualizer, rows]);
   return {
     startIndex: range.startIndex,
     endIndex: range.endIndex,
     offsetBefore: range.offsetBefore,
     offsetAfter: range.offsetAfter,
-    measureRow,
-    scrollToIndex
+    measureRow: virtualizer?.measureRow ?? ignoreRow,
+    scrollToIndex: (index, options) => {
+      virtualizer?.scrollToIndex(index, options);
+    }
   };
 }
 
 // src/DataGrid/DataGrid.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var DEFAULT_PAGE_SIZE = 25;
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var NO_AGGREGATES = [];
-function DataGridComponent({
-  dataSource,
-  columns,
-  getRowId,
-  borders,
-  hoverable,
-  selectable,
-  defaultRowSelection,
-  defaultColumnSelection,
-  defaultCellSelection,
-  resizableColumns = false,
-  reorderableColumns = false,
-  resizeMode = "fit",
-  defaultColumnSizing,
-  defaultColumnOrder,
-  columnSizeDefaults,
-  onColumnResize,
-  onColumnOrderChange,
-  sortableColumns = false,
-  defaultColumnSort,
-  onColumnSortChange,
-  groupableColumns = false,
-  groupToggleIconColumns = true,
-  groupByDraggableColumns = false,
-  groupByBarVisibility = "auto",
-  defaultGroupBy,
-  onGroupByChange,
-  defaultGroupExpansion,
-  onGroupExpansionChange,
-  defaultFilter,
-  paginated = false,
-  defaultPagination,
-  pager,
-  onPaginationChange,
-  infiniteScroll,
-  aggregates,
-  groupAggregateDisplay = "inline",
-  height,
-  virtualized = false,
-  overscan = 4,
-  estimatedRowHeight = 40,
-  label,
-  labelledBy,
-  ref,
-  ...callbacks
-}) {
+function paginationReader(controller) {
+  let last;
+  return () => {
+    const { pageIndex } = controller.getView();
+    const { pageSize } = controller.getState().pagination;
+    if (last?.pageIndex !== pageIndex || last.pageSize !== pageSize) {
+      last = { pageIndex, pageSize };
+    }
+    return last;
+  };
+}
+function selectedRowsReader(controller) {
+  let last;
+  return () => {
+    const { rows } = controller.getView();
+    const selection = controller.getState().rowSelection;
+    if (last?.rows !== rows || last.selection !== selection) {
+      const rowsById = new Map(rows.map((entry) => [entry.rowId, entry]));
+      last = { rows, selection, selected: resolveRows(rowsById, selection) };
+    }
+    return last.selected;
+  };
+}
+function DataGrid(props) {
+  const {
+    borders,
+    hoverable,
+    selectable,
+    resizeMode = "fit",
+    columnSizeDefaults,
+    sortableColumns = false,
+    groupableColumns = false,
+    groupToggleIconColumns = true,
+    groupByBarVisibility = "auto",
+    paginated = false,
+    pager,
+    infiniteScroll,
+    aggregates = NO_AGGREGATES,
+    groupAggregateDisplay = "inline",
+    height,
+    virtualized = false,
+    overscan = 4,
+    estimatedRowHeight = 40,
+    label,
+    labelledBy,
+    locale,
+    getRowProps,
+    onRowClick,
+    onRowDoubleClick,
+    messages: messageOverrides,
+    ref
+  } = props;
   const hoverRows = hoverable?.rows ?? true;
   const hoverColumns = hoverable?.columns ?? true;
   const hoverCells = hoverable?.cells ?? true;
-  const viewportRef = useRef6(null);
-  const headerTableRef = useRef6(null);
-  const bodyTableRef = useRef6(null);
-  const bodyScrollRef = useRef6(null);
-  const sentinelRef = useRef6(null);
+  const viewportRef = useRef13(null);
+  const headerTableRef = useRef13(null);
+  const bodyTableRef = useRef13(null);
+  const bodyScrollRef = useRef13(null);
+  const sentinelRef = useRef13(null);
   const viewportWidth = useElementWidth(viewportRef, resizeMode === "fit");
-  const subscribersRef = useRef6(/* @__PURE__ */ new Set());
-  const [sizing, setSizing] = useState6(
-    defaultColumnSizing ?? {}
-  );
-  const [order, setOrder] = useState6(
-    defaultColumnOrder ?? []
-  );
-  const [sort, setSort] = useState6(defaultColumnSort ?? []);
-  const [groupBy, setGroupBy] = useState6(defaultGroupBy ?? []);
-  const [expansion, setExpansion] = useState6(
-    defaultGroupExpansion ?? []
-  );
-  const [filter] = useState6(defaultFilter ?? []);
-  const [pagination, setPagination] = useState6(
-    defaultPagination ?? { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }
-  );
-  const [announcement, setAnnouncement] = useState6("");
-  const [rowSelection, setRowSelection] = useState6(
-    defaultRowSelection ?? []
-  );
-  const [columnSelection, setColumnSelection] = useState6(
-    defaultColumnSelection ?? []
-  );
-  const [cellSelection, setCellSelection] = useState6(
-    defaultCellSelection ?? null
+  const subscribersRef = useRef13(/* @__PURE__ */ new Set());
+  const gridId = useId();
+  const announce = useLiveAnnouncer(viewportRef);
+  const messages = useMemo4(
+    () => resolveMessages(messageOverrides),
+    [messageOverrides]
   );
-  const rows = useMemo4(
-    () => dataSource?.map((row, rowIndex) => ({
-      rowId: resolveRowId(row, rowIndex, getRowId),
-      row,
-      rowIndex,
-      datasetIndex: rowIndex
-    })) ?? [],
-    [dataSource, getRowId]
-  );
-  const definedColumns = useMemo4(() => {
-    if (columns && columns.length !== 0) return columns;
-    if (dataSource && dataSource.length > 0)
-      return defineColumnsFromRows(dataSource);
-    return [];
-  }, [columns, dataSource]);
-  const orderedColumns = useMemo4(
-    () => applyColumnOrder(definedColumns, order),
-    [definedColumns, order]
-  );
-  const resolved = useMemo4(() => {
-    const widths = resolveColumnWidths(orderedColumns, sizing, {
-      sizes: columnSizeDefaults,
-      resizable: resizableColumns,
-      reorderable: reorderableColumns,
-      groupByDraggable: groupByDraggableColumns
-    });
-    return resizeMode === "fit" && viewportWidth !== null ? fitColumnsToWidth(widths, viewportWidth, columnSizeDefaults) : widths;
-  }, [
-    orderedColumns,
-    sizing,
-    resizeMode,
+  const { controller, state, view } = useGridController({
+    ...props,
     viewportWidth,
-    columnSizeDefaults,
-    resizableColumns,
-    reorderableColumns,
-    groupByDraggableColumns
-  ]);
-  const shownRows = useMemo4(
-    () => resolveShownRows(rows, filter, sort, resolved),
-    [rows, filter, sort, resolved]
-  );
-  const displayRows = useMemo4(
-    () => groupRows(shownRows, groupBy, expansion, resolved),
-    [shownRows, groupBy, expansion, resolved]
-  );
-  const activeAggregates = aggregates ?? NO_AGGREGATES;
-  const aggregatedRows = useMemo4(
-    () => withGroupAggregates(
-      displayRows,
-      shownRows,
-      groupBy,
-      activeAggregates,
-      resolved,
-      groupAggregateDisplay
-    ),
-    [
-      displayRows,
-      shownRows,
-      groupBy,
-      activeAggregates,
-      resolved,
-      groupAggregateDisplay
-    ]
-  );
-  const grandTotal = useMemo4(
-    () => computeAggregates(
-      shownRows.map((entry) => entry.row),
-      activeAggregates,
-      resolved
-    ),
-    [shownRows, activeAggregates, resolved]
-  );
-  const paginatedRows = useMemo4(
-    () => paginated ? paginateRows2(aggregatedRows, pagination) : { rows: aggregatedRows, pageCount: 1, pageIndex: 0 },
-    [paginated, aggregatedRows, pagination]
-  );
+    ...announcedCallbacks({
+      callbacks: props,
+      announce,
+      messages,
+      columnName,
+      columnOf
+    })
+  });
+  const [readPagination] = useState15(() => paginationReader(controller));
+  const [readSelectedRows] = useState15(() => selectedRowsReader(controller));
   const virtualizer = useRowVirtualizer({
     enabled: virtualized,
-    rows: paginatedRows.rows,
+    rows: view.pageRows,
     bodyScrollRef,
     estimatedRowHeight,
     overscan
   });
-  useEffect4(() => {
+  useEffect5(() => {
     if (virtualized && height === void 0) {
       console.error(
-        "DataGridComponent: `virtualized` has no effect without `height` \u2014 a body with no bounded height has no viewport to window rows against."
+        "DataGrid: `virtualized` has no effect without `height` \u2014 a body with no bounded height has no viewport to window rows against."
       );
     }
   }, [virtualized, height]);
   const hasInfiniteScroll = infiniteScroll !== void 0;
-  useEffect4(() => {
+  useEffect5(() => {
     if (paginated && hasInfiniteScroll) {
       console.error(
-        "DataGridComponent: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
+        "DataGrid: `paginated` and `infiniteScroll` are mutually exclusive \u2014 only `paginated` takes effect while both are set."
       );
     }
   }, [paginated, hasInfiniteScroll]);
@@ -2309,79 +3157,21 @@ function DataGridComponent({
     sentinelRef,
     config: infiniteScroll
   });
-  const paginationSnapshot = useMemo4(
-    () => ({
-      pageIndex: paginatedRows.pageIndex,
-      pageSize: pagination.pageSize
-    }),
-    [paginatedRows.pageIndex, pagination.pageSize]
-  );
-  const displayDataRows = useMemo4(
-    () => groupBy.length === 0 && !paginated ? shownRows : paginatedRows.rows.filter(
-      (entry) => !("kind" in entry)
-    ),
-    [paginatedRows, groupBy.length, paginated, shownRows]
-  );
-  function columnName(columnId) {
-    const entry = resolved.find((candidate) => candidate.id === columnId);
-    if (entry === void 0) {
-      return columnId;
-    }
-    return typeof entry.label === "string" ? entry.label : entry.column.field;
-  }
-  function announce(message) {
-    setAnnouncement(message);
+  function columnOf(columnId) {
+    return view.dataColumns.find((candidate) => candidate.id === columnId)?.column;
   }
-  function handleColumnResize(event) {
-    onColumnResize?.(event);
-    if (event.phase === "end") {
-      announce(
-        `${columnName(event.columnId)}, ${String(Math.round(event.width))} pixels wide`
-      );
-    }
+  function columnName(columnId) {
+    const column = columnOf(columnId);
+    return column === void 0 ? columnId : resolveColumnHeaderText(column);
   }
   const resize = useColumnResize({
-    // `measureColumnContent` only ever matches `td[data-gridkit-column]`
-    // (never `th`), so the header table has nothing for it to find — the
-    // body table alone was already the effective scope before this split.
+    // `@gridkitjs/dom`'s `measureColumnContent` only ever matches
+    // `td[data-gridkit-column]` (never `th`), so the header table has nothing
+    // for it to find — the body table alone was already the effective scope
+    // before this split.
     tableRef: bodyTableRef,
-    sizing,
-    setSizing,
-    columnSizeDefaults,
-    onColumnResize: handleColumnResize
-  });
-  function handleGroupByChange(event) {
-    onGroupByChange?.(event);
-    const entry = event.groupBy.find(
-      (candidate) => candidate.columnId === event.columnId
-    );
-    if (entry === void 0) {
-      announce(`${columnName(event.columnId)}, grouping removed`);
-      return;
-    }
-    announce(
-      event.groupBy.length > 1 ? `Grouped by ${columnName(event.columnId)}, level ${String(event.groupBy.indexOf(entry) + 1)} of ${String(event.groupBy.length)}` : `Grouped by ${columnName(event.columnId)}`
-    );
-  }
-  function handleGroupExpansionChange(event) {
-    onGroupExpansionChange?.(event);
-    if (event.groupId === null) {
-      announce(
-        event.expansion.length === 0 ? "All groups expanded" : "All groups collapsed"
-      );
-      return;
-    }
-    announce(
-      event.expansion.includes(event.groupId) ? "Group collapsed" : "Group expanded"
-    );
-  }
-  const grouping = useRowGrouping({
-    groupBy,
-    setGroupBy,
-    expansion,
-    setExpansion,
-    onGroupByChange: handleGroupByChange,
-    onGroupExpansionChange: handleGroupExpansionChange
+    controller,
+    columnSizeDefaults
   });
   const nav = useGridNavigation({
     headerTableRef,
@@ -2392,131 +3182,106 @@ function DataGridComponent({
     // Group headers are addressable rows too — the whole point of the flat
     // `DisplayRow[]` shape is that they share one position space with data
     // rows, so navigation counts them the same way. Page-relative
-    // (`paginatedRows`, not `displayRows`): arrow keys operate on what's
+    // (`view.pageRows`, not `view.displayRows`): arrow keys operate on what's
     // actually in the DOM, which is the current page — a different "page"
     // concept than `useGridNavigation`'s own Page Up/Down viewport scrolling.
-    rowCount: paginatedRows.rows.length,
-    columnCount: resolved.length,
+    rowCount: view.pageRows.length,
+    columnCount: view.columns.length,
     // A group's own summary row (`groupAggregateDisplay: "row"`) occupies a
     // real slot in `rowCount` above — its DOM position has to line up with
     // everything else — but is presentational, never a tab stop: arrow-key
     // vertical movement steps over it rather than landing there.
     isSkippableRow: (rowIndex) => {
-      const entry = paginatedRows.rows[rowIndex];
+      const entry = view.pageRows[rowIndex];
       return entry !== void 0 && "kind" in entry && entry.kind === "group-summary";
     }
   });
+  const panels = useGridPanels({ rootRef: viewportRef, headerTableRef, nav });
+  const commands = useGridCommands({
+    controller,
+    commands: props.commands,
+    onCommand: props.onCommand,
+    messages,
+    announce,
+    resize,
+    openPanel: panels.open
+  });
+  const orderedIds = useMemo4(
+    () => view.dataColumns.map((entry) => entry.id),
+    [view.dataColumns]
+  );
   const displayedIds = useMemo4(
-    () => orderedColumns.map((column) => column.id ?? column.field),
-    [orderedColumns]
+    () => view.columns.map((entry) => entry.id),
+    [view.columns]
+  );
+  const definitions = useMemo4(
+    () => new Map(view.dataColumns.map((entry) => [entry.id, entry.column])),
+    [view.dataColumns]
   );
   const groupByDraggableIds = useMemo4(
     () => new Set(
-      resolved.filter((entry) => entry.groupByDraggable).map((entry) => entry.id)
+      view.columns.filter((entry) => entry.groupByDraggable).map((entry) => entry.id)
     ),
-    [resolved]
+    [view.columns]
   );
   function handleDrop(target, movedId) {
     if (target.kind === "group-by") {
-      grouping.moveGroupBy(movedId, target.beforeColumnId);
+      controller.moveGroupBy(movedId, target.beforeColumnId);
       return;
     }
-    const next = moveColumnBefore(displayedIds, movedId, target.beforeId);
-    if (next === displayedIds) {
+    const next = moveColumnBefore(orderedIds, movedId, target.beforeId);
+    if (next === orderedIds) {
       return;
     }
-    const position = next.indexOf(movedId);
-    setOrder(next);
-    onColumnOrderChange?.({ columnId: movedId, order: next });
+    controller.moveColumn(movedId, target.beforeId);
+    const shown = next.filter((id) => displayedIds.includes(id));
+    const position = shown.indexOf(movedId);
     announce(
-      `${columnName(movedId)}, column ${String(position + 1)} of ${String(next.length)}`
+      messages.columnMoved(columnName(movedId), position + 1, shown.length)
     );
     nav.focusCell(HEADER_ROW, position);
   }
   const drag = useColumnDrag({
     order: displayedIds,
-    groupBy,
+    groupBy: state.groupBy,
     groupByDraggableIds,
     onDrop: handleDrop
   });
-  const draggedColumnAlreadyGrouped = drag.draggedColumnId !== null && groupBy.some((entry) => entry.columnId === drag.draggedColumnId);
+  const draggedColumnAlreadyGrouped = drag.draggedColumnId !== null && state.groupBy.some((entry) => entry.columnId === drag.draggedColumnId);
   const dragEligibleForGroupBy = drag.draggedColumnId !== null && groupByDraggableIds.has(drag.draggedColumnId) && !draggedColumnAlreadyGrouped;
-  const showGroupByBar = groupByBarVisibility === "always" || groupByBarVisibility === "auto" && (groupBy.length > 0 || dragEligibleForGroupBy);
+  const showGroupByBar = groupByBarVisibility === "always" || groupByBarVisibility === "auto" && (state.groupBy.length > 0 || dragEligibleForGroupBy);
   const headerGroupByDropTarget = drag.dropTarget?.kind === "group-by" ? drag.dropTarget : null;
-  function handleColumnSortChange(event) {
-    onColumnSortChange?.(event);
-    const entry = event.sort.find(
-      (candidate) => candidate.columnId === event.columnId
-    );
-    if (entry === void 0) {
-      announce(`${columnName(event.columnId)}, sort cleared`);
-      return;
-    }
-    const direction = entry.direction === "asc" ? "ascending" : "descending";
-    announce(
-      event.sort.length > 1 ? `${columnName(event.columnId)} sorted ${direction}, key ${String(event.sort.indexOf(entry) + 1)} of ${String(event.sort.length)}` : `${columnName(event.columnId)} sorted ${direction}`
-    );
-  }
-  const columnSort = useColumnSort({
-    sort,
-    setSort,
-    onColumnSortChange: handleColumnSortChange
-  });
-  function handlePaginationChange(event) {
-    onPaginationChange?.(event);
-    announce(
-      `Page ${String(event.pagination.pageIndex + 1)} of ${String(event.pageCount)}`
-    );
-  }
-  const paginationApi = usePagination({
-    pagination,
-    setPagination,
-    rows: displayRows,
-    onPaginationChange: handlePaginationChange
-  });
-  const [previous, setPrevious] = useState6({ filter, sort, groupBy });
-  if (previous.filter !== filter || previous.sort !== sort || previous.groupBy !== groupBy) {
-    setPrevious({ filter, sort, groupBy });
-    if (pagination.pageIndex !== 0) {
-      setPagination({ ...pagination, pageIndex: 0 });
-    }
-  }
-  const selection = useGridSelection({
-    rows: displayDataRows,
-    columns: resolved,
-    selectable,
-    rowSelection,
-    setRowSelection,
-    columnSelection,
-    setColumnSelection,
-    cellSelection,
-    setCellSelection,
-    callbacks,
-    announce,
+  const pagerContext = {
+    pagination: state.pagination,
+    currentPage: Math.min(state.pagination.pageIndex + 1, view.pageCount),
+    pageCount: view.pageCount,
+    pageSizeOptions: pager?.sizeOptions,
+    goToPage: controller.goToPage,
+    nextPage: controller.nextPage,
+    previousPage: controller.previousPage,
+    setPageSize: controller.setPageSize
+  };
+  const selection = useGridSelection({ controller, state, selectable });
+  const multiselectable = selection.rowMode === "multiple" || selection.columnMode === "multiple";
+  const contextMenu = useContextMenu({
+    rootRef: viewportRef,
+    headerTableRef,
+    bodyTableRef,
+    bodyScrollRef,
+    contextMenu: props.contextMenu,
+    onContextMenuOpenChange: props.onContextMenuOpenChange,
+    controller,
+    commands,
+    nav,
+    selection,
+    messages,
     columnName
   });
-  const multiselectable = selection.rowMode === "multiple" || selection.columnMode === "multiple";
-  useEffect4(() => {
+  useEffect5(() => {
     for (const listener of subscribersRef.current) {
       listener();
     }
-  }, [
-    shownRows,
-    aggregatedRows,
-    resolved,
-    sizing,
-    order,
-    sort,
-    groupBy,
-    expansion,
-    paginationSnapshot,
-    paginatedRows.pageCount,
-    grandTotal,
-    rowSelection,
-    columnSelection,
-    cellSelection,
-    nav.focus
-  ]);
+  }, [view, state, nav.focus]);
   useImperativeHandle(ref, () => ({
     get element() {
       return viewportRef.current;
@@ -2524,38 +3289,70 @@ function DataGridComponent({
     get table() {
       return bodyTableRef.current;
     },
-    getRows: () => shownRows,
-    // `aggregatedRows`, not the plain `displayRows` it's derived from: the
-    // same array shape and content, except every group header's own
-    // `aggregates` field is populated — the whole reason `getDisplayRows()`
-    // is where a consumer reads a specific group's computed results from.
-    getDisplayRows: () => aggregatedRows,
-    getColumns: () => resolved,
-    getColumnSizing: () => sizing,
-    getColumnOrder: () => order,
-    getColumnSort: () => sort,
-    getGroupBy: () => groupBy,
-    getGroupExpansion: () => expansion,
-    getPagination: () => paginationSnapshot,
-    getPageCount: () => paginatedRows.pageCount,
-    getAggregates: () => grandTotal,
-    getRowSelection: () => rowSelection,
-    getColumnSelection: () => columnSelection,
-    getCellSelection: () => cellSelection,
+    getRows: () => controller.getView().rows,
+    // Every group header's own `aggregates` field is populated here — the
+    // whole reason `getDisplayRows()` is where a consumer reads a specific
+    // group's computed results from.
+    getDisplayRows: () => controller.getView().displayRows,
+    getPageRows: () => controller.getView().pageRows,
+    getColumns: () => controller.getView().columns,
+    getDataColumns: () => controller.getView().dataColumns,
+    getColumnSizing: () => controller.getState().columnSizing,
+    getColumnOrder: () => controller.getState().columnOrder,
+    getColumnVisibility: () => controller.getState().columnVisibility,
+    getColumnSort: () => controller.getState().columnSort,
+    getFilter: () => controller.getState().filter,
+    getGroupBy: () => controller.getState().groupBy,
+    getGroupExpansion: () => controller.getState().groupExpansion,
+    getPagination: readPagination,
+    getPageCount: () => controller.getView().pageCount,
+    getAggregates: () => controller.getView().grandTotal,
+    getRowSelection: () => controller.getState().rowSelection,
+    getSelectedRows: readSelectedRows,
+    getColumnSelection: () => controller.getState().columnSelection,
+    getCellSelection: () => controller.getState().cellSelection,
     getFocusedCell: () => nav.focus,
+    getState: controller.getState,
+    restoreState: controller.restoreState,
     focusCell: nav.focusCell,
-    clearSelection: selection.clear,
-    selectAllRows: selection.selectAllRows,
-    expandAllGroups: grouping.expandAll,
-    collapseAllGroups: () => {
-      grouping.collapseAll(displayRows);
+    clearSelection: controller.clearSelection,
+    selectAllRows: controller.selectAllRows,
+    selectRows: controller.selectRows,
+    expandAllGroups: controller.expandAllGroups,
+    collapseAllGroups: controller.collapseAllGroups,
+    goToPage: controller.goToPage,
+    nextPage: controller.nextPage,
+    previousPage: controller.previousPage,
+    setPageSize: controller.setPageSize,
+    showColumns: controller.showColumns,
+    hideColumns: controller.hideColumns,
+    setFilter: controller.setFilter,
+    setColumnSort: controller.setColumnSort,
+    setGroupBy: controller.setGroupBy,
+    setGroupExpansion: controller.setGroupExpansion,
+    setPagination: controller.setPagination,
+    setColumnSizing: controller.setColumnSizing,
+    setColumnOrder: controller.setColumnOrder,
+    setColumnVisibility: controller.setColumnVisibility,
+    setRowSelection: controller.setRowSelection,
+    setColumnSelection: controller.setColumnSelection,
+    setCellSelection: controller.setCellSelection,
+    autoFitColumn: (columnId) => {
+      commands.host.autoFitColumns([columnId]);
     },
-    goToPage: paginationApi.goToPage,
-    nextPage: paginationApi.nextPage,
-    previousPage: paginationApi.previousPage,
-    setPageSize: paginationApi.setPageSize,
+    autoFitColumns: (columnIds) => {
+      commands.host.autoFitColumns(
+        columnIds ?? controller.getView().columns.map((entry) => entry.id)
+      );
+    },
+    openContextMenu: contextMenu.open,
+    closeContextMenu: contextMenu.close,
+    openColumnChooser: () => {
+      panels.open("columnChooser", { area: "grid" });
+    },
+    runCommand: (commandId, target = { area: "grid" }) => commands.run(commandId, target, "api"),
     scrollToRow: (rowId, options) => {
-      const index = paginatedRows.rows.findIndex(
+      const index = controller.getView().pageRows.findIndex(
         (entry) => !("kind" in entry) && entry.rowId === rowId
       );
       if (index === -1) return;
@@ -2594,25 +3391,41 @@ function DataGridComponent({
     selection.columnMode === false ? "" : "selectable-columns",
     selection.cellMode === false ? "" : "selectable-cells"
   );
-  return /* @__PURE__ */ jsxs7("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
-    showGroupByBar && /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs13("div", { className: "gridkit-data-grid-viewport", ref: viewportRef, children: [
+    /* @__PURE__ */ jsx20(
+      GridToolbar,
+      {
+        toolbar: props.toolbar,
+        renderItem: props.renderToolbarItem,
+        gridId,
+        controller,
+        commands,
+        messages,
+        announce
+      }
+    ),
+    showGroupByBar && /* @__PURE__ */ jsx20(
       GroupByBar,
       {
-        columns: resolved,
-        grouping,
+        columns: view.columns,
+        definitions,
+        groupBy: state.groupBy,
+        controller,
         columnName,
         headerDragEligible: dragEligibleForGroupBy,
         headerDragBlocked: draggedColumnAlreadyGrouped,
-        headerDropTarget: headerGroupByDropTarget
+        headerDropTarget: headerGroupByDropTarget,
+        messages
       }
     ),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs13(
       "div",
       {
+        id: gridId,
         className: "gridkit-data-grid-tables",
-        role: groupBy.length > 0 ? "treegrid" : "grid",
-        "aria-rowcount": aggregatedRows.length + 1,
-        "aria-colcount": resolved.length,
+        role: state.groupBy.length > 0 ? "treegrid" : "grid",
+        "aria-rowcount": view.displayRows.length + 1,
+        "aria-colcount": view.columns.length,
         ...ariaAttr(multiselectable, "aria-multiselectable", true),
         ...ariaAttr(labelledBy !== void 0, "aria-labelledby", labelledBy),
         ...ariaAttr(
@@ -2621,6 +3434,7 @@ function DataGridComponent({
           label
         ),
         onKeyDown: (event) => {
+          if (!isOwnEvent(event)) return;
           if (event.key === "Escape") {
             if (drag.draggedColumnId !== null || resize.activeColumnId !== null)
               return;
@@ -2634,25 +3448,27 @@ function DataGridComponent({
           }
         },
         children: [
-          /* @__PURE__ */ jsxs7(
+          /* @__PURE__ */ jsxs13(
             "table",
             {
               ref: headerTableRef,
-              style: { width: totalColumnWidth(resolved) },
+              style: { width: totalColumnWidth(view.columns) },
               className: classNames(gridTableClassName, "gridkit-data-grid-header"),
               children: [
-                /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx20(
                   GridHeader,
                   {
-                    columns: resolved,
+                    columns: view.columns,
                     resize,
                     drag,
-                    sort: columnSort,
+                    controller,
+                    columnSort: state.columnSort,
                     sortableColumns,
-                    grouping,
+                    groupBy: state.groupBy,
                     groupableColumns,
                     groupToggleIconColumns,
+                    headerMenu: contextMenu.opens("header"),
                     nav,
                     selection
                   }
@@ -2660,7 +3476,7 @@ function DataGridComponent({
               ]
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx20(
             "div",
             {
               className: "gridkit-data-grid-body",
@@ -2668,28 +3484,36 @@ function DataGridComponent({
               style: height === void 0 ? void 0 : {
                 "--gridkit-body-height": typeof height === "number" ? `${String(height)}px` : height
               },
-              children: /* @__PURE__ */ jsxs7(
+              children: /* @__PURE__ */ jsxs13(
                 "table",
                 {
                   ref: bodyTableRef,
-                  style: { width: totalColumnWidth(resolved) },
+                  style: { width: totalColumnWidth(view.columns) },
                   className: gridTableClassName,
                   children: [
-                    /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
-                    /* @__PURE__ */ jsx10(
+                    /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
+                    /* @__PURE__ */ jsx20(
                       GridBody,
                       {
-                        columns: resolved,
-                        rows: paginatedRows.rows,
+                        columns: view.columns,
+                        definitions,
+                        rows: view.pageRows,
                         activeColumnId: resize.activeColumnId,
                         nav,
                         selection,
-                        grouping,
-                        aggregates: activeAggregates,
+                        controller,
+                        aggregates,
                         groupAggregateDisplay,
                         virtualRange: virtualized ? virtualizer : null,
                         infiniteScroll,
-                        sentinelRef
+                        sentinelRef,
+                        locale,
+                        getRowProps,
+                        onRowClick,
+                        onRowDoubleClick,
+                        messages,
+                        cellMenu: contextMenu.opens("cell"),
+                        groupMenu: contextMenu.opens("group")
                       }
                     )
                   ]
@@ -2697,23 +3521,24 @@ function DataGridComponent({
               )
             }
           ),
-          activeAggregates.length > 0 && /* @__PURE__ */ jsxs7(
+          aggregates.length > 0 && /* @__PURE__ */ jsxs13(
             "table",
             {
-              style: { width: totalColumnWidth(resolved) },
+              style: { width: totalColumnWidth(view.columns) },
               className: classNames(
                 gridTableClassName,
                 "gridkit-data-grid-footer"
               ),
               children: [
-                /* @__PURE__ */ jsx10(GridColgroup, { columns: resolved }),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx20(GridColgroup, { columns: view.columns }),
+                /* @__PURE__ */ jsx20(
                   GridFooter,
                   {
-                    columns: resolved,
-                    aggregates: activeAggregates,
-                    results: grandTotal,
-                    rows: shownRows.map((entry) => entry.row)
+                    columns: view.columns,
+                    aggregates,
+                    results: view.grandTotal,
+                    rows: view.rows.map((entry) => entry.row),
+                    locale
                   }
                 )
               ]
@@ -2722,27 +3547,22 @@ function DataGridComponent({
         ]
       }
     ),
-    paginated && (pager?.template ? pager.template({
-      pagination: paginationApi.pagination,
-      currentPage: paginationApi.currentPage,
-      pageCount: paginationApi.pageCount,
-      pageSizeOptions: pager.sizeOptions,
-      goToPage: paginationApi.goToPage,
-      nextPage: paginationApi.nextPage,
-      previousPage: paginationApi.previousPage,
-      setPageSize: paginationApi.setPageSize
-    }) : /* @__PURE__ */ jsx10(GridPager, { pager: paginationApi, config: pager })),
-    /* @__PURE__ */ jsx10("div", { className: "gridkit-sr-only", role: "status", "aria-live": "polite", children: announcement })
+    /* @__PURE__ */ jsx20(GridContextMenu, { contextMenu }),
+    /* @__PURE__ */ jsx20(GridPanels, { panels, controller, messages }),
+    paginated && (pager?.template ? pager.template(pagerContext) : /* @__PURE__ */ jsx20(GridPager, { pager: pagerContext, config: pager, messages }))
   ] });
 }
 
+// src/index.ts
+import { serializeGridState } from "@gridkitjs/core";
+
 // src/DataGrid/hooks/usePaginationState.ts
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback3 } from "react";
 
 // src/DataGrid/hooks/useGridSnapshot.ts
-import { useCallback as useCallback3, useSyncExternalStore } from "react";
+import { useCallback as useCallback2, useSyncExternalStore as useSyncExternalStore3 } from "react";
 function useGridSnapshot(gridRef, getSnapshot, fallback) {
-  const subscribe = useCallback3(
+  const subscribe = useCallback2(
     (listener) => {
       const api = gridRef.current;
       if (api === null) {
@@ -2753,7 +3573,7 @@ function useGridSnapshot(gridRef, getSnapshot, fallback) {
     },
     [gridRef]
   );
-  return useSyncExternalStore(subscribe, () => {
+  return useSyncExternalStore3(subscribe, () => {
     const api = gridRef.current;
     return api === null ? fallback : getSnapshot(api);
   });
@@ -2764,12 +3584,12 @@ var FALLBACK_PAGINATION = { pageIndex: 0, pageSize: 0 };
 function usePaginationState(gridRef) {
   const pagination = useGridSnapshot(
     gridRef,
-    useCallback4((api) => api.getPagination(), []),
+    useCallback3((api) => api.getPagination(), []),
     FALLBACK_PAGINATION
   );
   const pageCount = useGridSnapshot(
     gridRef,
-    useCallback4((api) => api.getPageCount(), []),
+    useCallback3((api) => api.getPageCount(), []),
     0
   );
   return {
@@ -2791,18 +3611,18 @@ function usePaginationState(gridRef) {
 }
 
 // src/DataGrid/hooks/useGroupByState.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback4 } from "react";
 var FALLBACK_GROUP_BY = [];
 var FALLBACK_EXPANSION = [];
 function useGroupByState(gridRef) {
   const groupBy = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getGroupBy(), []),
+    useCallback4((api) => api.getGroupBy(), []),
     FALLBACK_GROUP_BY
   );
   const groupExpansion = useGridSnapshot(
     gridRef,
-    useCallback5((api) => api.getGroupExpansion(), []),
+    useCallback4((api) => api.getGroupExpansion(), []),
     FALLBACK_EXPANSION
   );
   return {
@@ -2818,34 +3638,34 @@ function useGroupByState(gridRef) {
 }
 
 // src/DataGrid/hooks/useColumnSortState.ts
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback5 } from "react";
 var FALLBACK_SORT = [];
 function useColumnSortState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback6((api) => api.getColumnSort(), []),
+    useCallback5((api) => api.getColumnSort(), []),
     FALLBACK_SORT
   );
 }
 
 // src/DataGrid/hooks/useSelectionState.ts
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback6 } from "react";
 var FALLBACK_SELECTION = [];
 var FALLBACK_CELL_SELECTION = null;
 function useSelectionState(gridRef) {
   const rowSelection = useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getRowSelection(), []),
+    useCallback6((api) => api.getRowSelection(), []),
     FALLBACK_SELECTION
   );
   const columnSelection = useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getColumnSelection(), []),
+    useCallback6((api) => api.getColumnSelection(), []),
     FALLBACK_SELECTION
   );
   const cellSelection = useGridSnapshot(
     gridRef,
-    useCallback7((api) => api.getCellSelection(), []),
+    useCallback6((api) => api.getCellSelection(), []),
     FALLBACK_CELL_SELECTION
   );
   return {
@@ -2862,43 +3682,74 @@ function useSelectionState(gridRef) {
 }
 
 // src/DataGrid/hooks/useAggregateState.ts
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback7 } from "react";
 var FALLBACK_AGGREGATES = /* @__PURE__ */ new Map();
 function useAggregateState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback8((api) => api.getAggregates(), []),
+    useCallback7((api) => api.getAggregates(), []),
     FALLBACK_AGGREGATES
   );
 }
 
 // src/DataGrid/hooks/useColumnSizingState.ts
-import { useCallback as useCallback9 } from "react";
+import { useCallback as useCallback8 } from "react";
 var FALLBACK_SIZING = {};
 function useColumnSizingState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback9((api) => api.getColumnSizing(), []),
+    useCallback8((api) => api.getColumnSizing(), []),
     FALLBACK_SIZING
   );
 }
 
 // src/DataGrid/hooks/useColumnOrderState.ts
-import { useCallback as useCallback10 } from "react";
+import { useCallback as useCallback9 } from "react";
 var FALLBACK_ORDER = [];
 function useColumnOrderState(gridRef) {
   return useGridSnapshot(
     gridRef,
-    useCallback10((api) => api.getColumnOrder(), []),
+    useCallback9((api) => api.getColumnOrder(), []),
     FALLBACK_ORDER
   );
 }
+
+// src/DataGrid/hooks/useColumnVisibilityState.ts
+import { useCallback as useCallback10 } from "react";
+var FALLBACK_VISIBILITY = {};
+function useColumnVisibilityState(gridRef) {
+  return useGridSnapshot(
+    gridRef,
+    useCallback10((api) => api.getColumnVisibility(), []),
+    FALLBACK_VISIBILITY
+  );
+}
+
+// src/DataGrid/hooks/useFilterState.ts
+import { useCallback as useCallback11, useState as useState16 } from "react";
+function useFilterState(gridRef) {
+  const [fallback] = useState16(() => []);
+  const filter = useGridSnapshot(
+    gridRef,
+    useCallback11((api) => api.getFilter(), []),
+    fallback
+  );
+  return {
+    filter,
+    setFilter: (next) => {
+      gridRef.current?.setFilter(next);
+    }
+  };
+}
 export {
-  DataGridComponent,
+  DataGrid,
+  serializeGridState,
   useAggregateState,
   useColumnOrderState,
   useColumnSizingState,
   useColumnSortState,
+  useColumnVisibilityState,
+  useFilterState,
   useGroupByState,
   usePaginationState,
   useSelectionState