@1771technologies/lytenyte-pro 1.0.0-beta.11 → 1.0.0-beta.12

package/dist/state/use-lytenyte.js

@@ -2,7 +2,15 @@ import { atom, createStore } from "@1771technologies/atom";
 import {} from "../+types.js";
 import { useRef } from "react";
 import { makeColumnView } from "./helpers/column-view.js";
-import { applyLayoutUpdate, computeBounds, computeColumnPositions, computeRowPositions, DEFAULT_PREVIOUS_LAYOUT, makeGridAtom, makeRowDataStore, } from "@1771technologies/lytenyte-shared";
+import {
+  applyLayoutUpdate,
+  computeBounds,
+  computeColumnPositions,
+  computeRowPositions,
+  DEFAULT_PREVIOUS_LAYOUT,
+  makeGridAtom,
+  makeRowDataStore,
+} from "@1771technologies/lytenyte-shared";
 import { makeRowLayout } from "./helpers/row-layout/row-layout.js";
 import { equal } from "@1771technologies/lytenyte-js-utils";
 import { makeColumnLayout } from "./helpers/column-layout.js";
@@ -52,528 +60,560 @@ import { boundSelectionRect } from "../cell-selection/bound-selection-rect.js";
 const DEFAULT_HEADER_HEIGHT = 40;
 const COLUMN_GROUP_JOIN_DELIMITER = "-->";
 export function makeLyteNyte(p) {
-    const store = createStore();
-    /**
-     * Primitive ATOMS and State
-     */
-    const rtl = atom(p.rtl ?? false);
-    const columns = atom(p.columns ?? []);
-    const base = atom(p.columnBase ?? {});
-    const gridId = atom(p.gridId);
-    const headerHeight = atom(p.headerHeight ?? DEFAULT_HEADER_HEIGHT);
-    const headerGroupHeight = atom(p.headerGroupHeight ?? DEFAULT_HEADER_HEIGHT);
-    const columnSizeToFit = atom(p.columnSizeToFit ?? false);
-    const viewport = atom(null);
-    const viewportHeightInner = atom(0);
-    const viewportHeightOuter = atom(0);
-    const viewportWidthInner = atom(0);
-    const viewportWidthOuter = atom(0);
-    const columnGroupJoinDelimiter = atom(p.columnGroupJoinDelimiter ?? COLUMN_GROUP_JOIN_DELIMITER);
-    const columnGroupExpansions = atom(p.columnGroupExpansions ?? {});
-    const columnGroupDefaultExpansion = atom(p.columnGroupDefaultExpansion ?? true);
-    const rowDataSource = atom(emptyRowDataSource);
-    const rowHeight = atom(p.rowHeight ?? 40);
-    const rowAutoHeightGuess = atom(p.rowAutoHeightGuess ?? 40);
-    const rowScanDistance = atom(p.rowScanDistance ?? 100);
-    const colScanDistance = atom(p.colScanDistance ?? 100);
-    const rowOverscanTop = atom(p.rowOverscanTop ?? 10);
-    const rowOverscanBottom = atom(p.rowOverscanBottom ?? 10);
-    const colOverScanStart = atom(p.colOverscanStart ?? 2);
-    const colOverscanEnd = atom(p.colOverscanEnd ?? 2);
-    const xScroll = atom(0);
-    const yScroll = atom(0);
-    const cellRenderers = atom(p.cellRenderers ?? {});
-    const rowFullWidthPredicate = atom({ fn: p.rowFullWidthPredicate ?? (() => false) });
-    const rowFullWidthRenderer = atom({ fn: p.rowFullWidthRenderer ?? (() => "Not defined") });
-    const sortModel = atom(p.sortModel ?? []);
-    const filterModel = atom(p.filterModel ?? {});
-    const filterInModel = atom(p.filterInModel ?? {});
-    const rowGroupModel = atom(p.rowGroupModel ?? []);
-    const aggModel = atom(p.aggModel ?? {});
-    const rowGroupDisplayMode = atom(p.rowGroupDisplayMode ?? "single-column");
-    const rowGroupDefaultExpansion = atom(p.rowGroupDefaultExpansion ?? false);
-    const rowGroupExpansions = atom(p.rowGroupExpansions ?? {});
-    const rowGroupColumn = atom(p.rowGroupColumn ?? {});
-    const headerCellRenderers = atom(p.headerCellRenderers ?? {});
-    const floatingCellRenderers = atom(p.floatingCellRenderers ?? {});
-    const floatingRowEnabled = atom(p.floatingRowEnabled ?? false);
-    const floatingRowHeight = atom(p.floatingRowHeight ?? 40);
-    const editRenderers = atom(p.editRenderers ?? {});
-    const editRowValidatorFn = atom({ fn: p.editRowValidatorFn ?? (() => true) });
-    const editClickActivator = atom(p.editClickActivator ?? "single");
-    const editCellMode = atom(p.editCellMode ?? "readonly");
-    const columnMarker = atom(p.columnMarker ?? {});
-    const columnMarkerEnabled = atom(p.columnMarkerEnabled ?? false);
-    const columnDoubleClickToAutosize = atom(p.columnDoubleClickToAutosize ?? true);
-    const rowDetailHeight = atom(p.rowDetailHeight ?? 300);
-    const rowDetailAutoHeightGuess = atom(p.rowDetailAutoHeightGuess ?? 300);
-    const rowDetailExpansions = atom(p.rowDetailExpansions ?? new Set());
-    const rowDetailRenderer = atom({ fn: p.rowDetailRenderer ?? (() => "Not defined") });
-    const rowSelectedIds = atom(p.rowSelectedIds ?? new Set());
-    const rowSelectionMode = atom(p.rowSelectionMode ?? "none");
-    const rowSelectChildren = atom(p.rowSelectChildren ?? false);
-    const rowSelectionActivator = atom(p.rowSelectionActivator ?? "single-click");
-    const virtualizeRows = atom(p.virtualizeRows ?? true);
-    const virtualizeCols = atom(p.virtualizeCols ?? true);
-    const quickSearch = atom(p.quickSearch ?? null);
-    const quickSearchSensitivity = atom(p.quickSearchSensitivity ?? "case-insensitive");
-    const columnPivotMode = atom(p.columnPivotMode ?? false);
-    const columnPivotModel = atom(p.columnPivotModel ??
-        {
-            columns: [],
-            filters: {},
-            filtersIn: {},
-            rows: [],
-            sorts: [],
-            values: [],
-        });
-    const columnPivotColumns = atom([]);
-    const columnPivotColumnGroupExpansions = atom({});
-    const columnPivotRowGroupExpansions = atom({});
-    const cellSelections = atom(p.cellSelections ?? []);
-    const cellSelectionMode = atom(p.cellSelectionMode ?? "none");
-    const internal_cellSelectionPivot = atom(null);
-    const internal_cellSelectionAdditive = atom(null);
-    const internal_cellSelectionSplits = atom((g) => {
-        const selections = g(cellSelections);
-        const topCount = g(rdsAtoms.topCount);
-        const centerCount = g(rdsAtoms.rowCenterCount);
-        const meta = g(columnMeta);
-        return selections.flatMap((rect) => {
-            return splitCellSelectionRect({
-                rect,
-                rowTopCount: topCount,
-                rowCenterCount: centerCount,
-                colStartCount: meta.columnVisibleStartCount,
-                colCenterCount: meta.columnVisibleCenterCount,
-            });
-        });
+  const store = createStore();
+  /**
+   * Primitive ATOMS and State
+   */
+  const rtl = atom(p.rtl ?? false);
+  const columns = atom(p.columns ?? []);
+  const base = atom(p.columnBase ?? {});
+  const gridId = atom(p.gridId);
+  const headerHeight = atom(p.headerHeight ?? DEFAULT_HEADER_HEIGHT);
+  const headerGroupHeight = atom(p.headerGroupHeight ?? DEFAULT_HEADER_HEIGHT);
+  const columnSizeToFit = atom(p.columnSizeToFit ?? false);
+  const viewport = atom(null);
+  const viewportHeightInner = atom(0);
+  const viewportHeightOuter = atom(0);
+  const viewportWidthInner = atom(0);
+  const viewportWidthOuter = atom(0);
+  const columnGroupJoinDelimiter = atom(p.columnGroupJoinDelimiter ?? COLUMN_GROUP_JOIN_DELIMITER);
+  const columnGroupExpansions = atom(p.columnGroupExpansions ?? {});
+  const columnGroupDefaultExpansion = atom(p.columnGroupDefaultExpansion ?? true);
+  const rowDataSource = atom(emptyRowDataSource);
+  const rowHeight = atom(p.rowHeight ?? 40);
+  const rowAutoHeightGuess = atom(p.rowAutoHeightGuess ?? 40);
+  const rowScanDistance = atom(p.rowScanDistance ?? 100);
+  const colScanDistance = atom(p.colScanDistance ?? 100);
+  const rowOverscanTop = atom(p.rowOverscanTop ?? 10);
+  const rowOverscanBottom = atom(p.rowOverscanBottom ?? 10);
+  const colOverScanStart = atom(p.colOverscanStart ?? 2);
+  const colOverscanEnd = atom(p.colOverscanEnd ?? 2);
+  const xScroll = atom(0);
+  const yScroll = atom(0);
+  const cellRenderers = atom(p.cellRenderers ?? {});
+  const rowFullWidthPredicate = atom({ fn: p.rowFullWidthPredicate ?? (() => false) });
+  const rowFullWidthRenderer = atom({ fn: p.rowFullWidthRenderer ?? (() => "Not defined") });
+  const sortModel = atom(p.sortModel ?? []);
+  const filterModel = atom(p.filterModel ?? {});
+  const filterInModel = atom(p.filterInModel ?? {});
+  const rowGroupModel = atom(p.rowGroupModel ?? []);
+  const aggModel = atom(p.aggModel ?? {});
+  const rowGroupDisplayMode = atom(p.rowGroupDisplayMode ?? "single-column");
+  const rowGroupDefaultExpansion = atom(p.rowGroupDefaultExpansion ?? false);
+  const rowGroupExpansions = atom(p.rowGroupExpansions ?? {});
+  const rowGroupColumn = atom(p.rowGroupColumn ?? {});
+  const headerCellRenderers = atom(p.headerCellRenderers ?? {});
+  const floatingCellRenderers = atom(p.floatingCellRenderers ?? {});
+  const floatingRowEnabled = atom(p.floatingRowEnabled ?? false);
+  const floatingRowHeight = atom(p.floatingRowHeight ?? 40);
+  const editRenderers = atom(p.editRenderers ?? {});
+  const editRowValidatorFn = atom({ fn: p.editRowValidatorFn ?? (() => true) });
+  const editClickActivator = atom(p.editClickActivator ?? "single");
+  const editCellMode = atom(p.editCellMode ?? "readonly");
+  const columnMarker = atom(p.columnMarker ?? {});
+  const columnMarkerEnabled = atom(p.columnMarkerEnabled ?? false);
+  const columnDoubleClickToAutosize = atom(p.columnDoubleClickToAutosize ?? true);
+  const rowDetailHeight = atom(p.rowDetailHeight ?? 300);
+  const rowDetailAutoHeightGuess = atom(p.rowDetailAutoHeightGuess ?? 300);
+  const rowDetailExpansions = atom(p.rowDetailExpansions ?? new Set());
+  const rowDetailRenderer = atom({ fn: p.rowDetailRenderer ?? (() => "Not defined") });
+  const rowSelectedIds = atom(p.rowSelectedIds ?? new Set());
+  const rowSelectionMode = atom(p.rowSelectionMode ?? "none");
+  const rowSelectChildren = atom(p.rowSelectChildren ?? false);
+  const rowSelectionActivator = atom(p.rowSelectionActivator ?? "single-click");
+  const virtualizeRows = atom(p.virtualizeRows ?? true);
+  const virtualizeCols = atom(p.virtualizeCols ?? true);
+  const quickSearch = atom(p.quickSearch ?? null);
+  const quickSearchSensitivity = atom(p.quickSearchSensitivity ?? "case-insensitive");
+  const columnPivotMode = atom(p.columnPivotMode ?? false);
+  const columnPivotModel = atom(
+    p.columnPivotModel ?? {
+      columns: [],
+      filters: {},
+      filtersIn: {},
+      rows: [],
+      sorts: [],
+      values: [],
+    },
+  );
+  const columnPivotColumns = atom([]);
+  const columnPivotColumnGroupExpansions = atom({});
+  const columnPivotRowGroupExpansions = atom({});
+  const cellSelections = atom(p.cellSelections ?? []);
+  const cellSelectionMode = atom(p.cellSelectionMode ?? "none");
+  const internal_cellSelectionPivot = atom(null);
+  const internal_cellSelectionAdditive = atom(null);
+  const internal_cellSelectionSplits = atom((g) => {
+    const selections = g(cellSelections);
+    const topCount = g(rdsAtoms.topCount);
+    const centerCount = g(rdsAtoms.rowCenterCount);
+    const meta = g(columnMeta);
+    return selections.flatMap((rect) => {
+      return splitCellSelectionRect({
+        rect,
+        rowTopCount: topCount,
+        rowCenterCount: centerCount,
+        colStartCount: meta.columnVisibleStartCount,
+        colCenterCount: meta.columnVisibleCenterCount,
+      });
     });
-    const dialogFrame = atom(p.dialogFrames ?? {});
-    const popoverFrame = atom(p.popoverFrames ?? {});
-    const internal_rowSelectionPivot = atom(null);
-    const internal_rowSelectionLastWasDeselect = atom(false);
-    const rowSelectionPivot = atom((g) => g(internal_rowSelectionPivot));
-    const internal_draggingHeader = atom(null);
-    const internal_rowAutoHeightCache = atom({});
-    const internal_rowDetailHeightCache = atom({});
-    const internal_focusActive = atom(null);
-    const internal_focusPrevCol = atom(null);
-    const internal_focusPrevRow = atom(null);
-    const internal_editActivePosition = atom(null);
-    const internal_editData = atom(null);
-    const internal_editValidation = atom(true);
-    const internal_dialogFrames = atom({});
-    const internal_popoverFrames = atom({});
-    const layoutMap = atom((g) => {
-        g(rdsAtoms.bottomCount);
-        g(rdsAtoms.rowCenterCount);
-        g(rdsAtoms.topCount);
-        g(rdsAtoms.snapshotKey);
-        g(rowDataSource);
-        g(rowGroupModel);
-        g(sortModel);
-        g(filterModel);
-        g(filterInModel);
-        g(aggModel);
-        return new Map();
+  });
+  const dialogFrame = atom(p.dialogFrames ?? {});
+  const popoverFrame = atom(p.popoverFrames ?? {});
+  const internal_rowSelectionPivot = atom(null);
+  const internal_rowSelectionLastWasDeselect = atom(false);
+  const rowSelectionPivot = atom((g) => g(internal_rowSelectionPivot));
+  const internal_draggingHeader = atom(null);
+  const internal_rowAutoHeightCache = atom({});
+  const internal_rowDetailHeightCache = atom({});
+  const internal_focusActive = atom(null);
+  const internal_focusPrevCol = atom(null);
+  const internal_focusPrevRow = atom(null);
+  const internal_editActivePosition = atom(null);
+  const internal_editData = atom(null);
+  const internal_editValidation = atom(true);
+  const internal_dialogFrames = atom({});
+  const internal_popoverFrames = atom({});
+  const layoutMap = atom((g) => {
+    g(rdsAtoms.bottomCount);
+    g(rdsAtoms.rowCenterCount);
+    g(rdsAtoms.topCount);
+    g(rdsAtoms.snapshotKey);
+    g(rowDataSource);
+    g(rowGroupModel);
+    g(sortModel);
+    g(filterModel);
+    g(filterInModel);
+    g(aggModel);
+    return new Map();
+  });
+  /**
+   * VIEW BOUNDS
+   */
+  let prevBounds = null;
+  const bounds = atom((g) => {
+    const vpWidth = g(viewportWidthInner);
+    const vpHeight = g(viewportHeightInner);
+    const scrollTop = g(yScroll);
+    const scrollLeft = g(xScroll);
+    const xPos = g(xPositions);
+    const yPos = g(yPositions);
+    const topCount = g(rdsAtoms.topCount);
+    const bottomCount = g(rdsAtoms.bottomCount);
+    const start = g(startCount);
+    const end = g(endCount);
+    const bounds = computeBounds({
+      viewportWidth: vpWidth,
+      viewportHeight: vpHeight,
+      scrollTop,
+      scrollLeft,
+      xPositions: xPos,
+      yPositions: yPos,
+      topCount,
+      bottomCount,
+      startCount: start,
+      endCount: end,
+      rowOverscanTop: g(rowOverscanTop),
+      rowOverscanBottom: g(rowOverscanBottom),
+      colOverscanStart: g(colOverScanStart),
+      colOverscanEnd: g(colOverscanEnd),
     });
-    /**
-     * VIEW BOUNDS
-     */
-    let prevBounds = null;
-    const bounds = atom((g) => {
-        const vpWidth = g(viewportWidthInner);
-        const vpHeight = g(viewportHeightInner);
-        const scrollTop = g(yScroll);
-        const scrollLeft = g(xScroll);
-        const xPos = g(xPositions);
-        const yPos = g(yPositions);
-        const topCount = g(rdsAtoms.topCount);
-        const bottomCount = g(rdsAtoms.bottomCount);
-        const start = g(startCount);
-        const end = g(endCount);
-        const bounds = computeBounds({
-            viewportWidth: vpWidth,
-            viewportHeight: vpHeight,
-            scrollTop,
-            scrollLeft,
-            xPositions: xPos,
-            yPositions: yPos,
-            topCount,
-            bottomCount,
-            startCount: start,
-            endCount: end,
-            rowOverscanTop: g(rowOverscanTop),
-            rowOverscanBottom: g(rowOverscanBottom),
-            colOverscanStart: g(colOverScanStart),
-            colOverscanEnd: g(colOverscanEnd),
-        });
-        if (equal(prevBounds, bounds))
-            return prevBounds;
-        prevBounds = bounds;
-        return bounds;
-    });
-    /**
-     * COLUMN VIEW
-     * Compute the column layout. This impacts both the row layout and header layout. Column layout
-     * is impacted by the column definitions, the group expansions, the row group display mode.
-     */
-    const columnView = atom((g) => {
-        const pivotMode = g(columnPivotMode);
-        let cols;
-        if (pivotMode) {
-            const model = g(columnPivotModel);
-            cols = columnAddRowGroup({
-                columns: g(columnPivotColumns),
-                rowGroupDisplayMode: "single-column",
-                rowGroupModel: model.rows.filter((c) => c.active ?? true).map((c) => c.field),
-                rowGroupTemplate: g(rowGroupColumn),
-            });
-        }
-        else {
-            cols = columnAddRowGroup({
-                columns: g(columns),
-                rowGroupDisplayMode: g(rowGroupDisplayMode),
-                rowGroupModel: g(rowGroupModel),
-                rowGroupTemplate: g(rowGroupColumn),
-            });
-        }
-        const colsWithMarker = columnHandleMarker({
-            columns: cols,
-            marker: g(columnMarker),
-            markerEnabled: g(columnMarkerEnabled),
-        });
-        const view = makeColumnView({
-            columns: colsWithMarker,
-            base: g(base),
-            groupExpansionDefault: g(columnGroupDefaultExpansion),
-            groupExpansions: g(columnGroupExpansions),
-            groupJoinDelimiter: g(columnGroupJoinDelimiter),
-        });
-        return view;
-    });
-    /**
-     * COMPUTE ATOMS
-     */
-    const headerLayout = atom((g) => {
-        const view = g(columnView);
-        const layout = makeColumnLayout(view.combinedView, view.meta, g(bounds), g(internal_focusActive), g(floatingRowEnabled));
-        const dragged = g(internal_draggingHeader);
-        // When dragging a group column, we may end up removing that group column when joining
-        // the group with other columns in the same group (if they are separated). We want to ensure
-        // the group remains mounted until after the drag. Hence we check if there would've been a merge
-        // and add the dragged element to the layout. Once the drag ends the element will be removed. The
-        // isHiddenMove is important for this.
-        if (dragged) {
-            const row = dragged.rowStart;
-            const has = layout[row].findIndex((c) => c.kind === "group" && c.idOccurrence === dragged.idOccurrence);
-            if (has === -1) {
-                layout[row].push({ ...dragged, isHiddenMove: true });
-            }
-        }
-        return { maxCol: view.maxCol, maxRow: view.maxRow, layout: layout };
-    });
-    const columnGroupMeta = atom((g) => g(columnView).meta);
-    const columnMeta = atom((g) => {
-        const view = g(columnView);
-        return {
-            columnLookup: view.lookup,
-            columnsVisible: view.visibleColumns,
-            columnVisibleCenterCount: view.centerCount,
-            columnVisibleEndCount: view.endCount,
-            columnVisibleStartCount: view.startCount,
-        };
-    });
-    const xPositions = atom((g) => {
-        const view = g(columnView);
-        return computeColumnPositions(view.visibleColumns, g(base), g(viewportWidthInner), g(columnSizeToFit));
-    });
-    const widthTotal = atom((get) => get(xPositions).at(-1));
-    const headerHeightTotal = atom((g) => {
-        const groupHHeight = g(headerGroupHeight);
-        const hHeight = g(headerHeight);
-        const view = g(columnView);
-        const floating = g(floatingRowEnabled);
-        const floatingHeight = g(floatingRowHeight);
-        return (view.maxRow - 1) * groupHHeight + hHeight + (floating ? floatingHeight : 0);
-    });
-    const startCount = atom((g) => g(columnView).startCount);
-    const endCount = atom((g) => g(columnView).endCount);
-    /** ROWS */
-    const rowByIndex = makeGridAtom(atom((g) => g(rowDataSource).rowByIndex), store);
-    const { store: rowDataStore, atoms: rdsAtoms } = makeRowDataStore(store, rowByIndex);
-    const yPositions = atom((g) => {
-        const rowCount = g(rdsAtoms.rowCount);
-        const innerHeight = g(viewportHeightInner);
-        const detailExpansions = g(rowDetailExpansions);
-        g(internal_rowDetailHeightCache);
-        const rds = g(rowDataSource);
-        const rows = Object.fromEntries([...detailExpansions]
-            .map((x) => rds.rowToIndex(x))
-            .filter((x) => x != null)
-            .map((x) => [x, api.rowByIndex(x)]));
-        return computeRowPositions(rowCount, g(rowHeight), g(rowAutoHeightGuess), g(internal_rowAutoHeightCache), (i) => {
-            const row = rows[i];
-            if (!row || !api.rowDetailIsExpanded(row))
-                return 0;
-            return api.rowDetailRenderedHeight(row);
-        }, innerHeight);
-    });
-    const heightTotal = atom((g) => g(yPositions).at(-1));
-    let prevLayout = DEFAULT_PREVIOUS_LAYOUT;
-    const rowView = atom((g) => {
-        let n = g(bounds);
-        if (!g(virtualizeRows)) {
-            n = { ...n, rowCenterStart: n.rowTopEnd, rowCenterEnd: n.rowCenterLast };
-        }
-        if (!g(virtualizeCols)) {
-            n = { ...n, colCenterStart: n.colStartEnd, colCenterEnd: n.colCenterLast };
-        }
-        const rowScan = g(rowScanDistance);
-        const colScan = g(colScanDistance);
-        const columns = g(columnMeta).columnsVisible;
-        const rds = g(rowDataSource);
-        applyLayoutUpdate({
-            computeColSpan: getSpanFn(rds, grid, columns, "col"),
-            computeRowSpan: getSpanFn(rds, grid, columns, "row"),
-            colScanDistance: colScan,
-            rowScanDistance: rowScan,
-            invalidated: true,
-            isFullWidth: getFullWidthCallback(rds, g(rowFullWidthPredicate).fn, grid),
-            isRowCutoff: (r) => {
-                const row = rds.rowByIndex(r);
-                return !row || row.kind === "branch";
-            },
-            layoutMap: g(layoutMap),
-            nextLayout: n,
-            prevLayout,
-        });
-        prevLayout = n;
-        const topCount = g(rdsAtoms.topCount);
-        const botCount = g(rdsAtoms.bottomCount);
-        const rowCount = g(rdsAtoms.rowCount);
-        const yPos = g(yPositions);
-        const botStart = rowCount - botCount;
-        const focus = g(internal_focusActive);
-        const view = makeRowLayout({
-            layout: n,
-            layoutMap: g(layoutMap),
-            rds: rowDataStore,
-            columns,
-            focus: g(internal_focusActive),
-        });
-        const topHeight = yPos[topCount];
-        const botHeight = yPos.at(-1) - yPos[botStart];
-        const centerHeight = yPos.at(-1) - topHeight - botHeight;
-        return {
-            ...view,
-            rowFocusedIndex: focus?.kind === "cell" || focus?.kind === "full-width"
-                ? focus.rowIndex < topCount || focus.rowIndex >= rowCount - botCount
-                    ? null
-                    : focus.rowIndex
-                : null,
-            rowTopTotalHeight: topHeight,
-            rowBottomTotalHeight: botHeight,
-            rowCenterTotalHeight: centerHeight,
-            rowFirstCenter: n.rowCenterStart,
-        };
+    if (equal(prevBounds, bounds)) return prevBounds;
+    prevBounds = bounds;
+    return bounds;
+  });
+  /**
+   * COLUMN VIEW
+   * Compute the column layout. This impacts both the row layout and header layout. Column layout
+   * is impacted by the column definitions, the group expansions, the row group display mode.
+   */
+  const columnView = atom((g) => {
+    const pivotMode = g(columnPivotMode);
+    let cols;
+    if (pivotMode) {
+      const model = g(columnPivotModel);
+      cols = columnAddRowGroup({
+        columns: g(columnPivotColumns),
+        rowGroupDisplayMode: "single-column",
+        rowGroupModel: model.rows.filter((c) => c.active ?? true).map((c) => c.field),
+        rowGroupTemplate: g(rowGroupColumn),
+      });
+    } else {
+      cols = columnAddRowGroup({
+        columns: g(columns),
+        rowGroupDisplayMode: g(rowGroupDisplayMode),
+        rowGroupModel: g(rowGroupModel),
+        rowGroupTemplate: g(rowGroupColumn),
+      });
+    }
+    const colsWithMarker = columnHandleMarker({
+      columns: cols,
+      marker: g(columnMarker),
+      markerEnabled: g(columnMarkerEnabled),
     });
-    /**
-     * STATE VIEW AND API
-     */
-    const gridView = atom((g) => {
-        return {
-            header: g(headerLayout),
-            rows: g(rowView),
-        };
+    const view = makeColumnView({
+      columns: colsWithMarker,
+      base: g(base),
+      groupExpansionDefault: g(columnGroupDefaultExpansion),
+      groupExpansions: g(columnGroupExpansions),
+      groupJoinDelimiter: g(columnGroupJoinDelimiter),
     });
-    const state = {
-        rtl: makeGridAtom(rtl, store),
-        columns: makeGridAtom(columns, store),
-        columnMeta: makeGridAtom(columnMeta, store),
-        columnBase: makeGridAtom(base, store),
-        columnGroupExpansions: makeGridAtom(columnGroupExpansions, store),
-        columnGroupDefaultExpansion: makeGridAtom(columnGroupDefaultExpansion, store),
-        columnGroupJoinDelimiter: makeGridAtom(columnGroupJoinDelimiter, store),
-        columnGroupMeta: makeGridAtom(columnGroupMeta, store),
-        columnSizeToFit: makeGridAtom(columnSizeToFit, store),
-        gridId: makeGridAtom(gridId, store),
-        widthTotal: makeGridAtom(widthTotal, store),
-        heightTotal: makeGridAtom(heightTotal, store),
-        headerHeight: makeGridAtom(headerHeight, store),
-        headerGroupHeight: makeGridAtom(headerGroupHeight, store),
-        viewport: makeGridAtom(viewport, store),
-        viewportHeightInner: makeGridAtom(viewportHeightInner, store),
-        viewportHeightOuter: makeGridAtom(viewportHeightOuter, store),
-        viewportWidthInner: makeGridAtom(viewportWidthInner, store),
-        viewportWidthOuter: makeGridAtom(viewportWidthOuter, store),
-        xPositions: makeGridAtom(xPositions, store),
-        yPositions: makeGridAtom(yPositions, store),
-        rowDataStore,
-        rowDataSource: makeGridAtom(rowDataSource, store),
-        rowAutoHeightGuess: makeGridAtom(rowAutoHeightGuess, store),
-        rowHeight: makeGridAtom(rowHeight, store),
-        rowScanDistance: makeGridAtom(rowScanDistance, store),
-        colScanDistance: makeGridAtom(colScanDistance, store),
-        colOverscanStart: makeGridAtom(colOverScanStart, store),
-        colOverscanEnd: makeGridAtom(colOverscanEnd, store),
-        rowOverscanTop: makeGridAtom(rowOverscanTop, store),
-        rowOverscanBottom: makeGridAtom(rowOverscanBottom, store),
-        rowFullWidthPredicate: makeGridAtom(rowFullWidthPredicate, store),
-        rowFullWidthRenderer: makeGridAtom(rowFullWidthRenderer, store),
-        cellRenderers: makeGridAtom(cellRenderers, store),
-        sortModel: makeGridAtom(sortModel, store),
-        filterModel: makeGridAtom(filterModel, store),
-        filterInModel: makeGridAtom(filterInModel, store),
-        rowGroupModel: makeGridAtom(rowGroupModel, store),
-        aggModel: makeGridAtom(aggModel, store),
-        rowGroupColumn: makeGridAtom(rowGroupColumn, store),
-        rowGroupDefaultExpansion: makeGridAtom(rowGroupDefaultExpansion, store),
-        rowGroupDisplayMode: makeGridAtom(rowGroupDisplayMode, store),
-        rowGroupExpansions: makeGridAtom(rowGroupExpansions, store),
-        headerCellRenderers: makeGridAtom(headerCellRenderers, store),
-        floatingCellRenderers: makeGridAtom(floatingCellRenderers, store),
-        floatingRowEnabled: makeGridAtom(floatingRowEnabled, store),
-        floatingRowHeight: makeGridAtom(floatingRowHeight, store),
-        editRenderers: makeGridAtom(editRenderers, store),
-        editCellMode: makeGridAtom(editCellMode, store),
-        editClickActivator: makeGridAtom(editClickActivator, store),
-        editRowValidatorFn: makeGridAtom(editRowValidatorFn, store),
-        editActivePosition: makeGridAtom(atom((g) => g(internal_editActivePosition)), store),
-        columnMarker: makeGridAtom(columnMarker, store),
-        columnMarkerEnabled: makeGridAtom(columnMarkerEnabled, store),
-        columnDoubleClickToAutosize: makeGridAtom(columnDoubleClickToAutosize, store),
-        rowDetailExpansions: makeGridAtom(rowDetailExpansions, store),
-        rowDetailHeight: makeGridAtom(rowDetailHeight, store),
-        rowDetailRenderer: makeGridAtom(rowDetailRenderer, store),
-        rowDetailAutoHeightGuess: makeGridAtom(rowDetailAutoHeightGuess, store),
-        rowSelectedIds: makeGridAtom(rowSelectedIds, store),
-        rowSelectionMode: makeGridAtom(rowSelectionMode, store),
-        rowSelectionPivot: makeGridAtom(rowSelectionPivot, store),
-        rowSelectionActivator: makeGridAtom(rowSelectionActivator, store),
-        rowSelectChildren: makeGridAtom(rowSelectChildren, store),
-        viewBounds: makeGridAtom(bounds, store),
-        virtualizeRows: makeGridAtom(virtualizeRows, store),
-        virtualizeCols: makeGridAtom(virtualizeCols, store),
-        quickSearch: makeGridAtom(quickSearch, store),
-        quickSearchSensitivity: makeGridAtom(quickSearchSensitivity, store),
-        columnPivotMode: makeGridAtom(columnPivotMode, store),
-        columnPivotColumns: makeGridAtom(columnPivotColumns, store),
-        columnPivotModel: makeGridAtom(columnPivotModel, store),
-        columnPivotColumnGroupExpansions: makeGridAtom(columnPivotColumnGroupExpansions, store),
-        columnPivotRowGroupExpansions: makeGridAtom(columnPivotRowGroupExpansions, store),
-        dialogFrames: makeGridAtom(dialogFrame, store),
-        popoverFrames: makeGridAtom(popoverFrame, store),
-        cellSelections: makeGridAtom(cellSelections, store),
-        cellSelectionMode: makeGridAtom(cellSelectionMode, store),
+    return view;
+  });
+  /**
+   * COMPUTE ATOMS
+   */
+  const headerLayout = atom((g) => {
+    const view = g(columnView);
+    const layout = makeColumnLayout(
+      view.combinedView,
+      view.meta,
+      g(bounds),
+      g(internal_focusActive),
+      g(floatingRowEnabled),
+    );
+    const dragged = g(internal_draggingHeader);
+    // When dragging a group column, we may end up removing that group column when joining
+    // the group with other columns in the same group (if they are separated). We want to ensure
+    // the group remains mounted until after the drag. Hence we check if there would've been a merge
+    // and add the dragged element to the layout. Once the drag ends the element will be removed. The
+    // isHiddenMove is important for this.
+    if (dragged) {
+      const row = dragged.rowStart;
+      const has = layout[row].findIndex(
+        (c) => c.kind === "group" && c.idOccurrence === dragged.idOccurrence,
+      );
+      if (has === -1) {
+        layout[row].push({ ...dragged, isHiddenMove: true });
+      }
+    }
+    return { maxCol: view.maxCol, maxRow: view.maxRow, layout: layout };
+  });
+  const columnGroupMeta = atom((g) => g(columnView).meta);
+  const columnMeta = atom((g) => {
+    const view = g(columnView);
+    return {
+      columnLookup: view.lookup,
+      columnsVisible: view.visibleColumns,
+      columnVisibleCenterCount: view.centerCount,
+      columnVisibleEndCount: view.endCount,
+      columnVisibleStartCount: view.startCount,
     };
-    const api = {};
-    const grid = { state, view: makeGridAtom(gridView, store), api };
-    const listeners = makeEventListeners();
-    Object.assign(api, {
-        columnField: makeColumnField(grid),
-        columnFromIndex: makeColumnFromIndex(grid),
-        columnIndex: makeColumnIndex(grid),
-        columnById: makeColumnById(grid),
-        columnResize: makeColumnResize(grid),
-        columnUpdate: makeColumnUpdate(grid),
-        columnMove: makeColumnMove(grid),
-        sortForColumn: makeSortForColumn(grid),
-        rowIsGroup: (r) => r.kind === "branch",
-        rowIsLeaf: (r) => r.kind === "leaf",
-        eventAddListener: listeners.eventAddListener,
-        eventRemoveListener: listeners.eventRemoveListener,
-        eventFire: listeners.eventFire,
-        rowGroupColumnIndex: makeRowGroupColumnIndex(grid),
-        rowGroupIsExpanded: makeRowGroupIsExpanded(grid),
-        rowGroupToggle: makeRowGroupToggle(grid),
-        rowGroupApplyExpansions: makeRowGroupApplyExpansions(grid),
-        scrollIntoView: makeScrollIntoView(grid),
-        editBegin: makeEditBegin(grid),
-        editEnd: makeEditEnd(grid),
-        editIsCellActive: makeEditIsCellActive(grid),
-        editUpdate: makeEditUpdate(grid),
-        focusCell: makeFocusCell(grid),
-        rowById: makeRowById(grid),
-        rowByIndex: makeRowByIndex(grid),
-        rowDetailIsExpanded: makeRowDetailIsExpanded(grid),
-        rowDetailRenderedHeight: makeRowDetailRenderedHeight(grid),
-        rowDetailToggle: makeRowDetailToggle(grid),
-        rowSelect: makeRowSelect(grid),
-        rowSelectAll: makeRowSelectAll(grid),
-        rowSelected: makeRowSelected(grid),
-        rowHandleSelect: makeRowHandleSelect(grid),
-        columnToggleGroup: makeColumnGroupToggle(grid),
-        columnAutosize: makeColumnAutosize(grid),
-        useRowDrag: makeUseRowDrag(grid),
-        exportCsv: makeExportCsv(grid),
-        exportCsvFile: makeExportCsvFile(grid),
-        exportDataRect: makeExportDataRect(grid),
-        dialogFrameClose: makeDialogFrameClose(grid),
-        dialogFrameOpen: makeDialogFrameOpen(grid),
-        popoverFrameClose: makePopoverFrameClose(grid),
-        popoverFrameOpen: makePopoverFrameOpen(grid),
-        positionFromElement: makePositionFromElement(),
-    });
-    Object.assign(grid, {
-        internal: {
-            headerCols: makeGridAtom(atom((g) => g(columnView).maxCol), store),
-            headerRows: makeGridAtom(atom((g) => g(columnView).maxRow), store),
-            headerHeightTotal: makeGridAtom(headerHeightTotal, store),
-            xScroll: makeGridAtom(xScroll, store),
-            yScroll: makeGridAtom(yScroll, store),
-            refreshKey: makeGridAtom(rdsAtoms.snapshotKey, store),
-            layout: makeGridAtom(layoutMap, store),
-            focusActive: makeGridAtom(internal_focusActive, store),
-            focusPrevColIndex: makeGridAtom(internal_focusPrevCol, store),
-            focusPrevRowIndex: makeGridAtom(internal_focusPrevRow, store),
-            editActivePos: makeGridAtom(internal_editActivePosition, store),
-            editData: makeGridAtom(internal_editData, store),
-            editValidation: makeGridAtom(internal_editValidation, store),
-            rowAutoHeightCache: makeGridAtom(internal_rowAutoHeightCache, store),
-            rowDetailAutoHeightCache: makeGridAtom(internal_rowDetailHeightCache, store),
-            rowSelectedIds: rowSelectedIds,
-            rowSelectionPivot: makeGridAtom(internal_rowSelectionPivot, store),
-            rowSelectionLastWasDeselect: makeGridAtom(internal_rowSelectionLastWasDeselect, store),
-            draggingHeader: makeGridAtom(internal_draggingHeader, store),
-            dialogFrames: makeGridAtom(internal_dialogFrames, store),
-            popoverFrames: makeGridAtom(internal_popoverFrames, store),
-            cellSelectionPivot: makeGridAtom(internal_cellSelectionPivot, store),
-            cellSelectionAdditiveRects: makeGridAtom(internal_cellSelectionAdditive, store),
-            cellSelectionIsDeselect: makeGridAtom(atom(false), store),
-            cellSelectionSplits: makeGridAtom(internal_cellSelectionSplits, store),
-            store: store,
-        },
-    });
-    store.sub(rowDataSource, () => {
-        store.get(rowDataSource).init(grid);
-    });
-    store.set(rowDataSource, p.rowDataSource ?? emptyRowDataSource);
-    // Ensure cell selections are bounded.
-    store.sub(cellSelections, () => {
-        const selections = store.get(cellSelections);
-        const safeSelections = selections.map((c) => boundSelectionRect(grid, c));
-        if (equal(selections, safeSelections))
-            return;
-        store.set(cellSelections, safeSelections);
-    });
-    store.sub(rdsAtoms.rowCount, () => {
-        const selections = store.get(cellSelections);
-        const safeSelections = selections.map((c) => boundSelectionRect(grid, c));
-        store.set(cellSelections, safeSelections);
+  });
+  const xPositions = atom((g) => {
+    const view = g(columnView);
+    return computeColumnPositions(
+      view.visibleColumns,
+      g(base),
+      g(viewportWidthInner),
+      g(columnSizeToFit),
+    );
+  });
+  const widthTotal = atom((get) => get(xPositions).at(-1));
+  const headerHeightTotal = atom((g) => {
+    const groupHHeight = g(headerGroupHeight);
+    const hHeight = g(headerHeight);
+    const view = g(columnView);
+    const floating = g(floatingRowEnabled);
+    const floatingHeight = g(floatingRowHeight);
+    return (view.maxRow - 1) * groupHHeight + hHeight + (floating ? floatingHeight : 0);
+  });
+  const startCount = atom((g) => g(columnView).startCount);
+  const endCount = atom((g) => g(columnView).endCount);
+  /** ROWS */
+  const rowByIndex = makeGridAtom(
+    atom((g) => g(rowDataSource).rowByIndex),
+    store,
+  );
+  const { store: rowDataStore, atoms: rdsAtoms } = makeRowDataStore(store, rowByIndex);
+  const yPositions = atom((g) => {
+    const rowCount = g(rdsAtoms.rowCount);
+    const innerHeight = g(viewportHeightInner);
+    const detailExpansions = g(rowDetailExpansions);
+    g(internal_rowDetailHeightCache);
+    const rds = g(rowDataSource);
+    const rows = Object.fromEntries(
+      [...detailExpansions]
+        .map((x) => rds.rowToIndex(x))
+        .filter((x) => x != null)
+        .map((x) => [x, api.rowByIndex(x)]),
+    );
+    return computeRowPositions(
+      rowCount,
+      g(rowHeight),
+      g(rowAutoHeightGuess),
+      g(internal_rowAutoHeightCache),
+      (i) => {
+        const row = rows[i];
+        if (!row || !api.rowDetailIsExpanded(row)) return 0;
+        return api.rowDetailRenderedHeight(row);
+      },
+      innerHeight,
+    );
+  });
+  const heightTotal = atom((g) => g(yPositions).at(-1));
+  let prevLayout = DEFAULT_PREVIOUS_LAYOUT;
+  const rowView = atom((g) => {
+    let n = g(bounds);
+    if (!g(virtualizeRows)) {
+      n = { ...n, rowCenterStart: n.rowTopEnd, rowCenterEnd: n.rowCenterLast };
+    }
+    if (!g(virtualizeCols)) {
+      n = { ...n, colCenterStart: n.colStartEnd, colCenterEnd: n.colCenterLast };
+    }
+    const rowScan = g(rowScanDistance);
+    const colScan = g(colScanDistance);
+    const columns = g(columnMeta).columnsVisible;
+    const rds = g(rowDataSource);
+    applyLayoutUpdate({
+      computeColSpan: getSpanFn(rds, grid, columns, "col"),
+      computeRowSpan: getSpanFn(rds, grid, columns, "row"),
+      colScanDistance: colScan,
+      rowScanDistance: rowScan,
+      invalidated: true,
+      isFullWidth: getFullWidthCallback(rds, g(rowFullWidthPredicate).fn, grid),
+      isRowCutoff: (r) => {
+        const row = rds.rowByIndex(r);
+        return !row || row.kind === "branch";
+      },
+      layoutMap: g(layoutMap),
+      nextLayout: n,
+      prevLayout,
     });
-    store.sub(columnMeta, () => {
-        const selections = store.get(cellSelections);
-        const safeSelections = selections.map((c) => boundSelectionRect(grid, c));
-        store.set(cellSelections, safeSelections);
+    prevLayout = n;
+    const topCount = g(rdsAtoms.topCount);
+    const botCount = g(rdsAtoms.bottomCount);
+    const rowCount = g(rdsAtoms.rowCount);
+    const yPos = g(yPositions);
+    const botStart = rowCount - botCount;
+    const focus = g(internal_focusActive);
+    const view = makeRowLayout({
+      layout: n,
+      layoutMap: g(layoutMap),
+      rds: rowDataStore,
+      columns,
+      focus: g(internal_focusActive),
     });
-    return grid;
+    const topHeight = yPos[topCount];
+    const botHeight = yPos.at(-1) - yPos[botStart];
+    const centerHeight = yPos.at(-1) - topHeight - botHeight;
+    return {
+      ...view,
+      rowFocusedIndex:
+        focus?.kind === "cell" || focus?.kind === "full-width"
+          ? focus.rowIndex < topCount || focus.rowIndex >= rowCount - botCount
+            ? null
+            : focus.rowIndex
+          : null,
+      rowTopTotalHeight: topHeight,
+      rowBottomTotalHeight: botHeight,
+      rowCenterTotalHeight: centerHeight,
+      rowFirstCenter: n.rowCenterStart,
+    };
+  });
+  /**
+   * STATE VIEW AND API
+   */
+  const gridView = atom((g) => {
+    return {
+      header: g(headerLayout),
+      rows: g(rowView),
+    };
+  });
+  const state = {
+    rtl: makeGridAtom(rtl, store),
+    columns: makeGridAtom(columns, store),
+    columnMeta: makeGridAtom(columnMeta, store),
+    columnBase: makeGridAtom(base, store),
+    columnGroupExpansions: makeGridAtom(columnGroupExpansions, store),
+    columnGroupDefaultExpansion: makeGridAtom(columnGroupDefaultExpansion, store),
+    columnGroupJoinDelimiter: makeGridAtom(columnGroupJoinDelimiter, store),
+    columnGroupMeta: makeGridAtom(columnGroupMeta, store),
+    columnSizeToFit: makeGridAtom(columnSizeToFit, store),
+    gridId: makeGridAtom(gridId, store),
+    widthTotal: makeGridAtom(widthTotal, store),
+    heightTotal: makeGridAtom(heightTotal, store),
+    headerHeight: makeGridAtom(headerHeight, store),
+    headerGroupHeight: makeGridAtom(headerGroupHeight, store),
+    viewport: makeGridAtom(viewport, store),
+    viewportHeightInner: makeGridAtom(viewportHeightInner, store),
+    viewportHeightOuter: makeGridAtom(viewportHeightOuter, store),
+    viewportWidthInner: makeGridAtom(viewportWidthInner, store),
+    viewportWidthOuter: makeGridAtom(viewportWidthOuter, store),
+    xPositions: makeGridAtom(xPositions, store),
+    yPositions: makeGridAtom(yPositions, store),
+    rowDataStore,
+    rowDataSource: makeGridAtom(rowDataSource, store),
+    rowAutoHeightGuess: makeGridAtom(rowAutoHeightGuess, store),
+    rowHeight: makeGridAtom(rowHeight, store),
+    rowScanDistance: makeGridAtom(rowScanDistance, store),
+    colScanDistance: makeGridAtom(colScanDistance, store),
+    colOverscanStart: makeGridAtom(colOverScanStart, store),
+    colOverscanEnd: makeGridAtom(colOverscanEnd, store),
+    rowOverscanTop: makeGridAtom(rowOverscanTop, store),
+    rowOverscanBottom: makeGridAtom(rowOverscanBottom, store),
+    rowFullWidthPredicate: makeGridAtom(rowFullWidthPredicate, store),
+    rowFullWidthRenderer: makeGridAtom(rowFullWidthRenderer, store),
+    cellRenderers: makeGridAtom(cellRenderers, store),
+    sortModel: makeGridAtom(sortModel, store),
+    filterModel: makeGridAtom(filterModel, store),
+    filterInModel: makeGridAtom(filterInModel, store),
+    rowGroupModel: makeGridAtom(rowGroupModel, store),
+    aggModel: makeGridAtom(aggModel, store),
+    rowGroupColumn: makeGridAtom(rowGroupColumn, store),
+    rowGroupDefaultExpansion: makeGridAtom(rowGroupDefaultExpansion, store),
+    rowGroupDisplayMode: makeGridAtom(rowGroupDisplayMode, store),
+    rowGroupExpansions: makeGridAtom(rowGroupExpansions, store),
+    headerCellRenderers: makeGridAtom(headerCellRenderers, store),
+    floatingCellRenderers: makeGridAtom(floatingCellRenderers, store),
+    floatingRowEnabled: makeGridAtom(floatingRowEnabled, store),
+    floatingRowHeight: makeGridAtom(floatingRowHeight, store),
+    editRenderers: makeGridAtom(editRenderers, store),
+    editCellMode: makeGridAtom(editCellMode, store),
+    editClickActivator: makeGridAtom(editClickActivator, store),
+    editRowValidatorFn: makeGridAtom(editRowValidatorFn, store),
+    editActivePosition: makeGridAtom(
+      atom((g) => g(internal_editActivePosition)),
+      store,
+    ),
+    columnMarker: makeGridAtom(columnMarker, store),
+    columnMarkerEnabled: makeGridAtom(columnMarkerEnabled, store),
+    columnDoubleClickToAutosize: makeGridAtom(columnDoubleClickToAutosize, store),
+    rowDetailExpansions: makeGridAtom(rowDetailExpansions, store),
+    rowDetailHeight: makeGridAtom(rowDetailHeight, store),
+    rowDetailRenderer: makeGridAtom(rowDetailRenderer, store),
+    rowDetailAutoHeightGuess: makeGridAtom(rowDetailAutoHeightGuess, store),
+    rowSelectedIds: makeGridAtom(rowSelectedIds, store),
+    rowSelectionMode: makeGridAtom(rowSelectionMode, store),
+    rowSelectionPivot: makeGridAtom(rowSelectionPivot, store),
+    rowSelectionActivator: makeGridAtom(rowSelectionActivator, store),
+    rowSelectChildren: makeGridAtom(rowSelectChildren, store),
+    viewBounds: makeGridAtom(bounds, store),
+    virtualizeRows: makeGridAtom(virtualizeRows, store),
+    virtualizeCols: makeGridAtom(virtualizeCols, store),
+    quickSearch: makeGridAtom(quickSearch, store),
+    quickSearchSensitivity: makeGridAtom(quickSearchSensitivity, store),
+    columnPivotMode: makeGridAtom(columnPivotMode, store),
+    columnPivotColumns: makeGridAtom(columnPivotColumns, store),
+    columnPivotModel: makeGridAtom(columnPivotModel, store),
+    columnPivotColumnGroupExpansions: makeGridAtom(columnPivotColumnGroupExpansions, store),
+    columnPivotRowGroupExpansions: makeGridAtom(columnPivotRowGroupExpansions, store),
+    dialogFrames: makeGridAtom(dialogFrame, store),
+    popoverFrames: makeGridAtom(popoverFrame, store),
+    cellSelections: makeGridAtom(cellSelections, store),
+    cellSelectionMode: makeGridAtom(cellSelectionMode, store),
+  };
+  const api = {};
+  const grid = { state, view: makeGridAtom(gridView, store), api };
+  const listeners = makeEventListeners();
+  Object.assign(api, {
+    columnField: makeColumnField(grid),
+    columnFromIndex: makeColumnFromIndex(grid),
+    columnIndex: makeColumnIndex(grid),
+    columnById: makeColumnById(grid),
+    columnResize: makeColumnResize(grid),
+    columnUpdate: makeColumnUpdate(grid),
+    columnMove: makeColumnMove(grid),
+    sortForColumn: makeSortForColumn(grid),
+    rowIsGroup: (r) => r.kind === "branch",
+    rowIsLeaf: (r) => r.kind === "leaf",
+    eventAddListener: listeners.eventAddListener,
+    eventRemoveListener: listeners.eventRemoveListener,
+    eventFire: listeners.eventFire,
+    rowGroupColumnIndex: makeRowGroupColumnIndex(grid),
+    rowGroupIsExpanded: makeRowGroupIsExpanded(grid),
+    rowGroupToggle: makeRowGroupToggle(grid),
+    rowGroupApplyExpansions: makeRowGroupApplyExpansions(grid),
+    scrollIntoView: makeScrollIntoView(grid),
+    editBegin: makeEditBegin(grid),
+    editEnd: makeEditEnd(grid),
+    editIsCellActive: makeEditIsCellActive(grid),
+    editUpdate: makeEditUpdate(grid),
+    focusCell: makeFocusCell(grid),
+    rowById: makeRowById(grid),
+    rowByIndex: makeRowByIndex(grid),
+    rowDetailIsExpanded: makeRowDetailIsExpanded(grid),
+    rowDetailRenderedHeight: makeRowDetailRenderedHeight(grid),
+    rowDetailToggle: makeRowDetailToggle(grid),
+    rowSelect: makeRowSelect(grid),
+    rowSelectAll: makeRowSelectAll(grid),
+    rowSelected: makeRowSelected(grid),
+    rowHandleSelect: makeRowHandleSelect(grid),
+    columnToggleGroup: makeColumnGroupToggle(grid),
+    columnAutosize: makeColumnAutosize(grid),
+    useRowDrag: makeUseRowDrag(grid),
+    exportCsv: makeExportCsv(grid),
+    exportCsvFile: makeExportCsvFile(grid),
+    exportDataRect: makeExportDataRect(grid),
+    dialogFrameClose: makeDialogFrameClose(grid),
+    dialogFrameOpen: makeDialogFrameOpen(grid),
+    popoverFrameClose: makePopoverFrameClose(grid),
+    popoverFrameOpen: makePopoverFrameOpen(grid),
+    positionFromElement: makePositionFromElement(),
+  });
+  Object.assign(grid, {
+    internal: {
+      headerCols: makeGridAtom(
+        atom((g) => g(columnView).maxCol),
+        store,
+      ),
+      headerRows: makeGridAtom(
+        atom((g) => g(columnView).maxRow),
+        store,
+      ),
+      headerHeightTotal: makeGridAtom(headerHeightTotal, store),
+      xScroll: makeGridAtom(xScroll, store),
+      yScroll: makeGridAtom(yScroll, store),
+      refreshKey: makeGridAtom(rdsAtoms.snapshotKey, store),
+      layout: makeGridAtom(layoutMap, store),
+      focusActive: makeGridAtom(internal_focusActive, store),
+      focusPrevColIndex: makeGridAtom(internal_focusPrevCol, store),
+      focusPrevRowIndex: makeGridAtom(internal_focusPrevRow, store),
+      editActivePos: makeGridAtom(internal_editActivePosition, store),
+      editData: makeGridAtom(internal_editData, store),
+      editValidation: makeGridAtom(internal_editValidation, store),
+      rowAutoHeightCache: makeGridAtom(internal_rowAutoHeightCache, store),
+      rowDetailAutoHeightCache: makeGridAtom(internal_rowDetailHeightCache, store),
+      rowSelectedIds: rowSelectedIds,
+      rowSelectionPivot: makeGridAtom(internal_rowSelectionPivot, store),
+      rowSelectionLastWasDeselect: makeGridAtom(internal_rowSelectionLastWasDeselect, store),
+      draggingHeader: makeGridAtom(internal_draggingHeader, store),
+      dialogFrames: makeGridAtom(internal_dialogFrames, store),
+      popoverFrames: makeGridAtom(internal_popoverFrames, store),
+      cellSelectionPivot: makeGridAtom(internal_cellSelectionPivot, store),
+      cellSelectionAdditiveRects: makeGridAtom(internal_cellSelectionAdditive, store),
+      cellSelectionIsDeselect: makeGridAtom(atom(false), store),
+      cellSelectionSplits: makeGridAtom(internal_cellSelectionSplits, store),
+      store: store,
+    },
+  });
+  store.sub(rowDataSource, () => {
+    store.get(rowDataSource).init(grid);
+  });
+  store.set(rowDataSource, p.rowDataSource ?? emptyRowDataSource);
+  // Ensure cell selections are bounded.
+  store.sub(cellSelections, () => {
+    const selections = store.get(cellSelections);
+    const safeSelections = selections.map((c) => boundSelectionRect(grid, c));
+    if (equal(selections, safeSelections)) return;
+    store.set(cellSelections, safeSelections);
+  });
+  store.sub(rdsAtoms.rowCount, () => {
+    const selections = store.get(cellSelections);
+    const safeSelections = selections.map((c) => boundSelectionRect(grid, c));
+    store.set(cellSelections, safeSelections);
+  });
+  store.sub(columnMeta, () => {
+    const selections = store.get(cellSelections);
+    const safeSelections = selections.map((c) => boundSelectionRect(grid, c));
+    store.set(cellSelections, safeSelections);
+  });
+  return grid;
 }
 export function useLyteNyte(p) {
-    const m = useRef(null);
-    if (!m.current) {
-        m.current = makeLyteNyte(p);
-    }
-    return m.current;
+  const m = useRef(null);
+  if (!m.current) {
+    m.current = makeLyteNyte(p);
+  }
+  return m.current;
 }