@1771technologies/lytenyte-pro 1.0.1 → 1.0.3

package/dist/state/use-lytenyte.js

@@ -1,10 +1,9 @@
-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 { computeBounds, computeColumnPositions, computed, computeRowPositions, effect, makeAtom, makeLayoutState, makeRowStore, signal, updateFull, } from "@1771technologies/lytenyte-shared";
 import { makeRowLayout } from "./helpers/row-layout/row-layout.js";
-import { equal } from "@1771technologies/lytenyte-js-utils";
+import { equal, rangesOverlap } from "@1771technologies/lytenyte-js-utils";
 import { makeColumnLayout } from "./helpers/column-layout.js";
 import { emptyRowDataSource } from "./helpers/empty-row-data-source.js";
 import { getFullWidthCallback } from "./helpers/get-full-width-callback.js";
@@ -47,84 +46,84 @@ import { makeExportDataRect } from "./api/export-data-rect.js";
 import { makeDialogFrameClose, makeDialogFrameOpen } from "./api/dialog-frame.js";
 import { makePopoverFrameClose, makePopoverFrameOpen } from "./api/popover-frame.js";
 import { makePositionFromElement } from "./api/position-from-element.js";
-import { splitCellSelectionRect } from "../cell-selection/split-cell-selection-rect.js";
+import { splitCellSelectionRect, } from "../cell-selection/split-cell-selection-rect.js";
 import { boundSelectionRect } from "../cell-selection/bound-selection-rect.js";
+import { makeCellRoot } from "./api/cell-root.js";
+import { splitOnPivot } from "../cell-selection/split-on-pivot.js";
+const EMPTY_POSITION_ARRAY = new Uint32Array();
 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(40);
-    if (typeof p.rowHeight === "function") {
-        store.set(rowHeight, () => p.rowHeight);
-    }
-    else {
-        store.set(rowHeight, 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 ??
+    const rtl = signal(p.rtl ?? false);
+    const columns = signal(p.columns ?? []);
+    const base = signal(p.columnBase ?? {});
+    const gridId = signal(p.gridId);
+    const headerHeight = signal(p.headerHeight ?? DEFAULT_HEADER_HEIGHT);
+    const headerGroupHeight = signal(p.headerGroupHeight ?? DEFAULT_HEADER_HEIGHT);
+    const columnSizeToFit = signal(p.columnSizeToFit ?? false);
+    const viewport = signal(null);
+    const viewportHeightInner = signal(0);
+    const viewportHeightOuter = signal(0);
+    const viewportWidthInner = signal(0);
+    const viewportWidthOuter = signal(0);
+    const columnGroupJoinDelimiter = signal(p.columnGroupJoinDelimiter ?? COLUMN_GROUP_JOIN_DELIMITER);
+    const columnGroupExpansions = signal(p.columnGroupExpansions ?? {});
+    const columnGroupDefaultExpansion = signal(p.columnGroupDefaultExpansion ?? true);
+    const rowDataSource = signal(emptyRowDataSource);
+    const rowHeight = signal(40);
+    if (typeof p.rowHeight === "function")
+        rowHeight.set(() => p.rowHeight);
+    else
+        rowHeight.set(p.rowHeight ?? 40);
+    const rowAutoHeightGuess = signal(p.rowAutoHeightGuess ?? 40);
+    const rowScanDistance = signal(p.rowScanDistance ?? 100);
+    const colScanDistance = signal(p.colScanDistance ?? 100);
+    const rowOverscanTop = signal(p.rowOverscanTop ?? 10);
+    const rowOverscanBottom = signal(p.rowOverscanBottom ?? 10);
+    const colOverScanStart = signal(p.colOverscanStart ?? 2);
+    const colOverscanEnd = signal(p.colOverscanEnd ?? 2);
+    const xScroll = signal(0);
+    const yScroll = signal(0);
+    const cellRenderers = signal(p.cellRenderers ?? {});
+    const rowFullWidthPredicate = signal({ fn: p.rowFullWidthPredicate ?? null });
+    const rowFullWidthRenderer = signal({ fn: p.rowFullWidthRenderer ?? (() => "Not defined") });
+    const sortModel = signal(p.sortModel ?? []);
+    const filterModel = signal(p.filterModel ?? {});
+    const filterInModel = signal(p.filterInModel ?? {});
+    const rowGroupModel = signal(p.rowGroupModel ?? []);
+    const aggModel = signal(p.aggModel ?? {});
+    const rowGroupDisplayMode = signal(p.rowGroupDisplayMode ?? "single-column");
+    const rowGroupDefaultExpansion = signal(p.rowGroupDefaultExpansion ?? false);
+    const rowGroupExpansions = signal(p.rowGroupExpansions ?? {});
+    const rowGroupColumn = signal(p.rowGroupColumn ?? {});
+    const headerCellRenderers = signal(p.headerCellRenderers ?? {});
+    const floatingCellRenderers = signal(p.floatingCellRenderers ?? {});
+    const floatingRowEnabled = signal(p.floatingRowEnabled ?? false);
+    const floatingRowHeight = signal(p.floatingRowHeight ?? 40);
+    const editRenderers = signal(p.editRenderers ?? {});
+    const editRowValidatorFn = signal({ fn: p.editRowValidatorFn ?? (() => true) });
+    const editClickActivator = signal(p.editClickActivator ?? "single");
+    const editCellMode = signal(p.editCellMode ?? "readonly");
+    const columnMarker = signal(p.columnMarker ?? {});
+    const columnMarkerEnabled = signal(p.columnMarkerEnabled ?? false);
+    const columnDoubleClickToAutosize = signal(p.columnDoubleClickToAutosize ?? true);
+    const rowDetailHeight = signal(p.rowDetailHeight ?? 300);
+    const rowDetailAutoHeightGuess = signal(p.rowDetailAutoHeightGuess ?? 300);
+    const rowDetailExpansions = signal(p.rowDetailExpansions ?? new Set());
+    const rowDetailRenderer = signal({ fn: p.rowDetailRenderer ?? (() => "Not defined") });
+    const rowSelectedIds = signal(p.rowSelectedIds ?? new Set());
+    const rowSelectionMode = signal(p.rowSelectionMode ?? "none");
+    const rowSelectChildren = signal(p.rowSelectChildren ?? false);
+    const rowSelectionActivator = signal(p.rowSelectionActivator ?? "single-click");
+    const virtualizeRows = signal(p.virtualizeRows ?? true);
+    const virtualizeCols = signal(p.virtualizeCols ?? true);
+    const quickSearch = signal(p.quickSearch ?? null);
+    const quickSearchSensitivity = signal(p.quickSearchSensitivity ?? "case-insensitive");
+    const columnPivotMode = signal(p.columnPivotMode ?? false);
+    const columnPivotModel = signal(p.columnPivotModel ??
         {
             columns: [],
             filters: {},
@@ -133,20 +132,21 @@ export function makeLyteNyte(p) {
             sorts: [],
             values: [],
         });
-    const columnPivotColumns = atom([]);
-    const columnPivotColumnGroupExpansions = atom({});
-    const columnPivotRowGroupExpansions = atom({});
-    const cellSelections = atom(p.cellSelections ?? []);
-    const cellSelectionMode = atom(p.cellSelectionMode ?? "none");
-    const internal__rowGroupColumnState = atom({});
-    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) => {
+    const columnPivotColumns = signal([]);
+    const columnPivotColumnGroupExpansions = signal({});
+    const columnPivotRowGroupExpansions = signal({});
+    const cellSelections = signal(p.cellSelections ?? []);
+    const cellSelectionMode = signal(p.cellSelectionMode ?? "none");
+    const internal__rowGroupColumnState = signal({});
+    const internal_cellSelectionPivot = signal(null);
+    const internal_cellSelectionAdditive = signal(null);
+    const internal_cellSelectionSplits = computed(() => {
+        const selections = cellSelections();
+        const topCount = rowDataStore.rowTopCount.$();
+        const centerCount = rowDataStore.rowCenterCount.$();
+        const meta = columnMeta();
+        const p = internal_cellSelectionPivot();
+        const splits = selections.flatMap((rect) => {
             return splitCellSelectionRect({
                 rect,
                 rowTopCount: topCount,
@@ -155,51 +155,79 @@ export function makeLyteNyte(p) {
                 colCenterCount: meta.columnVisibleCenterCount,
             });
         });
+        const firstWithinPivot = splits.findIndex((c) => p &&
+            p.rowStart >= c.rowStart &&
+            p.rowEnd <= c.rowEnd &&
+            p.columnStart >= c.columnStart &&
+            p.columnEnd <= c.columnEnd);
+        if (firstWithinPivot !== -1) {
+            const pivotSplits = splitOnPivot(splits[firstWithinPivot], p);
+            if (pivotSplits)
+                splits.splice(firstWithinPivot, 1, ...pivotSplits);
+            else
+                splits.splice(firstWithinPivot, 1);
+        }
+        return splits;
     });
-    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 = signal(p.dialogFrames ?? {});
+    const popoverFrame = signal(p.popoverFrames ?? {});
+    const internal_rowSelectionPivot = signal(null);
+    const internal_rowSelectionLastWasDeselect = signal(false);
+    const internal_draggingHeader = signal(null);
+    const internal_rowAutoHeightCache = signal({});
+    const internal_rowDetailHeightCache = signal({});
+    const internal_focusActive = signal(null);
+    const internal_focusPrevCol = signal(null);
+    const internal_focusPrevRow = signal(null);
+    const internal_editActivePosition = signal(null);
+    const internal_editData = signal(null);
+    const internal_editValidation = signal(true);
+    const internal_dialogFrames = signal({});
+    const internal_popoverFrames = signal({});
+    const columnCount$ = computed(() => {
+        const view = columnView();
+        return view.visibleColumns.length;
+    });
+    const layoutState = makeLayoutState(0);
+    const layoutState$ = computed(() => {
+        rowDataStore.rowBottomCount.$();
+        rowDataStore.rowCenterCount.$();
+        rowDataStore.rowTopCount.$();
+        rowDataSource();
+        rowGroupModel();
+        sortModel();
+        filterModel();
+        aggModel();
+        filterInModel();
+        columnPivotModel();
+        columns();
+        columnPivotColumns();
+        const rowCount = rowDataStore.rowCount.$();
+        const columnCount = columnCount$();
+        if (rowCount > layoutState.computed.length || columnCount != layoutState.base.length) {
+            Object.assign(layoutState, makeLayoutState(columnCount, rowCount + 2000));
+        }
+        else {
+            layoutState.computed.fill(0);
+            layoutState.special.fill(0);
+            layoutState.lookup.clear();
+        }
+        return { layout: { ...layoutState }, cache: 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 = computed(() => {
+        const vpWidth = viewportWidthInner();
+        const vpHeight = viewportHeightInner();
+        const scrollTop = yScroll();
+        const scrollLeft = xScroll();
+        const xPos = xPositions();
+        const yPos = yPositions();
+        const topCount = rowDataStore.rowTopCount.$();
+        const bottomCount = rowDataStore.rowBottomCount.$();
+        const start = startCount();
+        const end = endCount();
         const bounds = computeBounds({
             viewportWidth: vpWidth,
             viewportHeight: vpHeight,
@@ -211,65 +239,88 @@ export function makeLyteNyte(p) {
             bottomCount,
             startCount: start,
             endCount: end,
-            rowOverscanTop: g(rowOverscanTop),
-            rowOverscanBottom: g(rowOverscanBottom),
-            colOverscanStart: g(colOverScanStart),
-            colOverscanEnd: g(colOverscanEnd),
+            rowOverscanTop: rowOverscanTop(),
+            rowOverscanBottom: rowOverscanBottom(),
+            colOverscanStart: colOverScanStart(),
+            colOverscanEnd: colOverscanEnd(),
         });
-        if (equal(prevBounds, bounds))
-            return prevBounds;
-        prevBounds = bounds;
         return bounds;
-    });
+    }, { dirty: (prev, next) => !equal(prev, next) });
     /**
      * 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 groupState = g(internal__rowGroupColumnState);
-        const pivotMode = g(columnPivotMode);
+    const columnView = computed(() => {
+        const groupState = internal__rowGroupColumnState();
+        const pivotMode = columnPivotMode();
         let cols;
         if (pivotMode) {
-            const model = g(columnPivotModel);
+            const model = columnPivotModel();
             cols = columnAddRowGroup({
-                columns: g(columnPivotColumns),
+                columns: columnPivotColumns(),
                 rowGroupDisplayMode: "single-column",
                 rowGroupModel: model.rows.filter((c) => c.active ?? true).map((c) => c.field),
-                rowGroupTemplate: g(rowGroupColumn),
+                rowGroupTemplate: rowGroupColumn(),
                 rowGroupColumnState: groupState,
             });
         }
         else {
             cols = columnAddRowGroup({
-                columns: g(columns),
-                rowGroupDisplayMode: g(rowGroupDisplayMode),
-                rowGroupModel: g(rowGroupModel),
-                rowGroupTemplate: g(rowGroupColumn),
+                columns: columns(),
+                rowGroupDisplayMode: rowGroupDisplayMode(),
+                rowGroupModel: rowGroupModel(),
+                rowGroupTemplate: rowGroupColumn(),
                 rowGroupColumnState: groupState,
             });
         }
         const colsWithMarker = columnHandleMarker({
             columns: cols,
-            marker: g(columnMarker),
-            markerEnabled: g(columnMarkerEnabled),
+            marker: columnMarker(),
+            markerEnabled: columnMarkerEnabled(),
         });
         const view = makeColumnView({
             columns: colsWithMarker,
-            base: g(base),
-            groupExpansionDefault: g(columnGroupDefaultExpansion),
-            groupExpansions: g(columnGroupExpansions),
-            groupJoinDelimiter: g(columnGroupJoinDelimiter),
+            base: base(),
+            groupExpansionDefault: columnGroupDefaultExpansion(),
+            groupExpansions: columnGroupExpansions(),
+            groupJoinDelimiter: 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);
+    const headerLayoutFull = computed(() => {
+        const view = columnView();
+        const layout = makeColumnLayout(view, floatingRowEnabled());
+        return { maxCol: view.maxCol, maxRow: view.maxRow, layout };
+    });
+    const headerPosition$ = computed(() => {
+        const focus = internal_focusActive();
+        return focus?.kind === "header-cell" ||
+            focus?.kind === "floating-cell" ||
+            focus?.kind === "header-group-cell"
+            ? focus
+            : null;
+    });
+    const headerLayout = computed(() => {
+        const view = columnView();
+        const layout = headerLayoutFull();
+        const spanBounds = bounds();
+        const headerPos = headerPosition$();
+        const filtered = layout.layout.map((row) => {
+            return row.filter((col) => {
+                if (col.colPin)
+                    return true;
+                if (headerPos) {
+                    if (rangesOverlap(col.colStart, col.colEnd, headerPos.colIndex, headerPos.colIndex + 1))
+                        return true;
+                }
+                return col.colStart >= spanBounds.colCenterStart && col.colStart < spanBounds.colCenterEnd;
+            });
+        });
+        const dragged = 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
@@ -277,16 +328,16 @@ export function makeLyteNyte(p) {
         // isHiddenMove is important for this.
         if (dragged) {
             const row = dragged.rowStart;
-            const has = layout[row].findIndex((c) => c.kind === "group" && c.idOccurrence === dragged.idOccurrence);
+            const has = filtered[row].findIndex((c) => c.kind === "group" && c.idOccurrence === dragged.idOccurrence);
             if (has === -1) {
-                layout[row].push({ ...dragged, isHiddenMove: true });
+                filtered[row].push({ ...dragged, isHiddenMove: true });
             }
         }
-        return { maxCol: view.maxCol, maxRow: view.maxRow, layout: layout };
+        return { maxCol: view.maxCol, maxRow: view.maxRow, layout: filtered };
     });
-    const columnGroupMeta = atom((g) => g(columnView).meta);
-    const columnMeta = atom((g) => {
-        const view = g(columnView);
+    const columnGroupMeta = computed(() => columnView().meta);
+    const columnMeta = computed(() => {
+        const view = columnView();
         return {
             columnLookup: view.lookup,
             columnsVisible: view.visibleColumns,
@@ -295,84 +346,106 @@ export function makeLyteNyte(p) {
             columnVisibleStartCount: view.startCount,
         };
     });
-    const xPositions = atom((g) => {
-        const view = g(columnView);
-        return computeColumnPositions(view.visibleColumns, g(base), g(viewportWidthInner), g(columnSizeToFit));
+    const xPositions = computed(() => {
+        if (!viewport())
+            return EMPTY_POSITION_ARRAY;
+        const view = columnView();
+        return computeColumnPositions(view.visibleColumns, base(), viewportWidthInner(), 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);
+    const widthTotal = computed(() => xPositions().at(-1));
+    const headerHeightTotal = computed(() => {
+        const groupHHeight = headerGroupHeight();
+        const hHeight = headerHeight();
+        const view = columnView();
+        const floating = floatingRowEnabled();
+        const floatingHeight = floatingRowHeight();
         return (view.maxRow - 1) * groupHHeight + hHeight + (floating ? floatingHeight : 0);
     });
-    const startCount = atom((g) => g(columnView).startCount);
-    const endCount = atom((g) => g(columnView).endCount);
+    const startCount = computed(() => columnView().startCount);
+    const endCount = computed(() => 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 rowDataStore = makeRowStore({
+        getRow: (r) => {
+            return rowDataSource().rowByIndex(r);
+        },
+    });
+    const yPositions = computed(() => {
+        if (!viewport())
+            return EMPTY_POSITION_ARRAY;
+        const rowCount = rowDataStore.rowCount.$();
+        const innerHeight = viewportHeightInner();
+        const detailExpansions = rowDetailExpansions();
+        internal_rowDetailHeightCache();
+        const rds = rowDataSource();
         const rows = Object.fromEntries([...detailExpansions]
             .map((x) => rds.rowToIndex(x))
             .filter((x) => x != null)
             .map((x) => [x, api.rowByIndex(x)]));
-        const headerHeight = g(headerHeightTotal);
-        return computeRowPositions(rowCount, g(rowHeight), g(rowAutoHeightGuess), g(internal_rowAutoHeightCache), (i) => {
+        const headerHeight = headerHeightTotal();
+        return computeRowPositions(rowCount, rowHeight(), rowAutoHeightGuess(), internal_rowAutoHeightCache(), (i) => {
             const row = rows[i];
             if (!row || !api.rowDetailIsExpanded(row))
                 return 0;
             return api.rowDetailRenderedHeight(row);
         }, innerHeight - headerHeight);
     });
-    const heightTotal = atom((g) => g(yPositions).at(-1));
-    let prevLayout = DEFAULT_PREVIOUS_LAYOUT;
-    const rowView = atom((g) => {
-        let n = g(bounds);
-        if (!g(virtualizeRows)) {
+    const heightTotal = computed(() => yPositions().at(-1));
+    const rowView = computed(() => {
+        if (!viewport())
+            return {
+                bottom: [],
+                center: [],
+                rowBottomTotalHeight: 0,
+                rowCenterTotalHeight: 0,
+                rowFirstCenter: 0,
+                rowFocusedIndex: 0,
+                rowTopTotalHeight: 0,
+                top: [],
+            };
+        let n = bounds();
+        if (!virtualizeRows()) {
             n = { ...n, rowCenterStart: n.rowTopEnd, rowCenterEnd: n.rowCenterLast };
         }
-        if (!g(virtualizeCols)) {
+        if (!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({
+        const rowScan = rowScanDistance();
+        const columns = columnMeta().columnsVisible;
+        const rds = rowDataSource();
+        const { layout, cache } = layoutState$();
+        const topCount = rowDataStore.rowTopCount.$();
+        const botCount = rowDataStore.rowBottomCount.$();
+        const rowCount = rowDataStore.rowCount.$();
+        const fullWidthPredicate = rowFullWidthPredicate().fn;
+        updateFull({
+            topCount,
+            botCount,
+            startCount: n.colStartEnd,
+            endCount: n.colEndEnd - n.colEndStart,
+            centerCount: n.colCenterLast - n.colStartEnd,
             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),
+            isFullWidth: fullWidthPredicate ? getFullWidthCallback(rds, fullWidthPredicate, grid) : null,
             isRowCutoff: (r) => {
                 const row = rds.rowByIndex(r);
                 return !row || row.kind === "branch";
             },
-            layoutMap: g(layoutMap),
-            nextLayout: n,
-            prevLayout,
+            rowScanDistance: rowScan,
+            rowStart: n.rowCenterStart,
+            rowEnd: n.rowCenterEnd,
+            rowMax: n.rowCenterLast,
+            ...layout,
         });
-        prevLayout = n;
-        const topCount = g(rdsAtoms.topCount);
-        const botCount = g(rdsAtoms.bottomCount);
-        const rowCount = g(rdsAtoms.rowCount);
-        const yPos = g(yPositions);
+        const yPos = yPositions();
         const botStart = rowCount - botCount;
-        const focus = g(internal_focusActive);
+        const focus = internal_focusActive();
         const view = makeRowLayout({
-            layout: n,
-            layoutMap: g(layoutMap),
+            view: n,
+            viewCache: cache,
+            layout,
             rds: rowDataStore,
             columns,
-            focus: g(internal_focusActive),
+            focus: internal_focusActive(),
         });
         const topHeight = yPos[topCount];
         const botHeight = yPos.at(-1) - yPos[botStart];
@@ -393,96 +466,97 @@ export function makeLyteNyte(p) {
     /**
      * STATE VIEW AND API
      */
-    const gridView = atom((g) => {
+    const gridView = computed(() => {
         return {
-            header: g(headerLayout),
-            rows: g(rowView),
+            header: headerLayout(),
+            rows: 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),
+        rtl: makeAtom(rtl),
+        columns: makeAtom(columns),
+        columnMeta: makeAtom(columnMeta),
+        columnBase: makeAtom(base),
+        columnGroupExpansions: makeAtom(columnGroupExpansions),
+        columnGroupDefaultExpansion: makeAtom(columnGroupDefaultExpansion),
+        columnGroupJoinDelimiter: makeAtom(columnGroupJoinDelimiter),
+        columnGroupMeta: makeAtom(columnGroupMeta),
+        columnSizeToFit: makeAtom(columnSizeToFit),
+        gridId: makeAtom(gridId),
+        widthTotal: makeAtom(widthTotal),
+        heightTotal: makeAtom(heightTotal),
+        headerHeight: makeAtom(headerHeight),
+        headerGroupHeight: makeAtom(headerGroupHeight),
+        viewport: makeAtom(viewport),
+        viewportHeightInner: makeAtom(viewportHeightInner),
+        viewportHeightOuter: makeAtom(viewportHeightOuter),
+        viewportWidthInner: makeAtom(viewportWidthInner),
+        viewportWidthOuter: makeAtom(viewportWidthOuter),
+        xPositions: makeAtom(xPositions),
+        yPositions: makeAtom(yPositions),
         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),
+        rowDataSource: makeAtom(rowDataSource),
+        rowAutoHeightGuess: makeAtom(rowAutoHeightGuess),
+        rowHeight: makeAtom(rowHeight),
+        rowScanDistance: makeAtom(rowScanDistance),
+        colScanDistance: makeAtom(colScanDistance),
+        colOverscanStart: makeAtom(colOverScanStart),
+        colOverscanEnd: makeAtom(colOverscanEnd),
+        rowOverscanTop: makeAtom(rowOverscanTop),
+        rowOverscanBottom: makeAtom(rowOverscanBottom),
+        rowFullWidthPredicate: makeAtom(rowFullWidthPredicate),
+        rowFullWidthRenderer: makeAtom(rowFullWidthRenderer),
+        cellRenderers: makeAtom(cellRenderers),
+        sortModel: makeAtom(sortModel),
+        filterModel: makeAtom(filterModel),
+        filterInModel: makeAtom(filterInModel),
+        rowGroupModel: makeAtom(rowGroupModel),
+        aggModel: makeAtom(aggModel),
+        rowGroupColumn: makeAtom(rowGroupColumn),
+        rowGroupDefaultExpansion: makeAtom(rowGroupDefaultExpansion),
+        rowGroupDisplayMode: makeAtom(rowGroupDisplayMode),
+        rowGroupExpansions: makeAtom(rowGroupExpansions),
+        headerCellRenderers: makeAtom(headerCellRenderers),
+        floatingCellRenderers: makeAtom(floatingCellRenderers),
+        floatingRowEnabled: makeAtom(floatingRowEnabled),
+        floatingRowHeight: makeAtom(floatingRowHeight),
+        editRenderers: makeAtom(editRenderers),
+        editCellMode: makeAtom(editCellMode),
+        editClickActivator: makeAtom(editClickActivator),
+        editRowValidatorFn: makeAtom(editRowValidatorFn),
+        editActivePosition: makeAtom(computed(() => internal_editActivePosition())),
+        columnMarker: makeAtom(columnMarker),
+        columnMarkerEnabled: makeAtom(columnMarkerEnabled),
+        columnDoubleClickToAutosize: makeAtom(columnDoubleClickToAutosize),
+        rowDetailExpansions: makeAtom(rowDetailExpansions),
+        rowDetailHeight: makeAtom(rowDetailHeight),
+        rowDetailRenderer: makeAtom(rowDetailRenderer),
+        rowDetailAutoHeightGuess: makeAtom(rowDetailAutoHeightGuess),
+        rowSelectedIds: makeAtom(rowSelectedIds),
+        rowSelectionMode: makeAtom(rowSelectionMode),
+        rowSelectionPivot: makeAtom(internal_rowSelectionPivot),
+        rowSelectionActivator: makeAtom(rowSelectionActivator),
+        rowSelectChildren: makeAtom(rowSelectChildren),
+        viewBounds: makeAtom(bounds),
+        virtualizeRows: makeAtom(virtualizeRows),
+        virtualizeCols: makeAtom(virtualizeCols),
+        quickSearch: makeAtom(quickSearch),
+        quickSearchSensitivity: makeAtom(quickSearchSensitivity),
+        columnPivotMode: makeAtom(columnPivotMode),
+        columnPivotColumns: makeAtom(columnPivotColumns),
+        columnPivotModel: makeAtom(columnPivotModel),
+        columnPivotColumnGroupExpansions: makeAtom(columnPivotColumnGroupExpansions),
+        columnPivotRowGroupExpansions: makeAtom(columnPivotRowGroupExpansions),
+        dialogFrames: makeAtom(dialogFrame),
+        popoverFrames: makeAtom(popoverFrame),
+        cellSelections: makeAtom(cellSelections),
+        cellSelectionMode: makeAtom(cellSelectionMode),
     };
     const api = {};
-    const grid = { state, view: makeGridAtom(gridView, store), api };
+    const grid = { state, view: makeAtom(gridView), api };
     const listeners = makeEventListeners();
     Object.assign(api, {
+        cellRoot: makeCellRoot(grid),
         columnField: makeColumnField(grid),
         columnByIndex: makeColumnByIndex(grid),
         columnIndex: makeColumnIndex(grid),
@@ -529,56 +603,46 @@ export function makeLyteNyte(p) {
     });
     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),
+            headerCols: makeAtom(computed(() => columnView().maxCol)),
+            headerRows: makeAtom(computed(() => columnView().maxRow)),
+            headerHeightTotal: makeAtom(headerHeightTotal),
+            xScroll: makeAtom(xScroll),
+            yScroll: makeAtom(yScroll),
+            layout: layoutState,
+            focusActive: makeAtom(internal_focusActive),
+            focusPrevColIndex: makeAtom(internal_focusPrevCol),
+            focusPrevRowIndex: makeAtom(internal_focusPrevRow),
+            editActivePos: makeAtom(internal_editActivePosition),
+            editData: makeAtom(internal_editData),
+            editValidation: makeAtom(internal_editValidation),
+            rowAutoHeightCache: makeAtom(internal_rowAutoHeightCache),
+            rowDetailAutoHeightCache: makeAtom(internal_rowDetailHeightCache),
             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),
-            rowGroupColumnState: makeGridAtom(internal__rowGroupColumnState, store),
-            store: store,
+            rowSelectionPivot: makeAtom(internal_rowSelectionPivot),
+            rowSelectionLastWasDeselect: makeAtom(internal_rowSelectionLastWasDeselect),
+            draggingHeader: makeAtom(internal_draggingHeader),
+            rowGroupColumnState: makeAtom(internal__rowGroupColumnState),
+            dialogFrames: makeAtom(internal_dialogFrames),
+            popoverFrames: makeAtom(internal_popoverFrames),
+            cellSelectionPivot: makeAtom(internal_cellSelectionPivot),
+            cellSelectionAdditiveRects: makeAtom(internal_cellSelectionAdditive),
+            cellSelectionIsDeselect: makeAtom(signal(false)),
+            cellSelectionSplits: makeAtom(internal_cellSelectionSplits),
         },
     });
-    store.sub(rowDataSource, () => {
-        store.get(rowDataSource).init(grid);
+    effect(() => {
+        rowDataSource().init(grid);
     });
-    store.set(rowDataSource, p.rowDataSource ?? emptyRowDataSource);
+    rowDataSource.set(p.rowDataSource ?? emptyRowDataSource);
     // Ensure cell selections are bounded.
-    store.sub(cellSelections, () => {
-        const selections = store.get(cellSelections);
+    effect(() => {
+        rowDataStore.rowCount.$();
+        columnMeta();
+        const selections = 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);
+        cellSelections.set(selections);
     });
     return grid;
 }