@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/components/canvas-grid/index.js

@@ -0,0 +1,3260 @@
+import { tokenize as defaultFormulaTokenizer } from "@rowsncolumns/calculator";
+import { Direction, isAreasEqual } from "@rowsncolumns/grid";
+import { canUseDOM } from "@rowsncolumns/grid";
+import { getBoundedCells, MouseButtonCodes } from "@rowsncolumns/grid";
+import { isCellWithinBounds } from "@rowsncolumns/grid";
+import { cellIdentifier, Grid as BaseGrid, isEqualCells, } from "@rowsncolumns/grid";
+import { defaultCellCoords } from "@rowsncolumns/spreadsheet-state";
+import { cn, Skeleton, tryParseRichText } from "@rowsncolumns/ui";
+import { cellToAddress, getCellEffectiveFormat, getContrastColor, isConditionalFormatFormulaRule, isDataValidationFormulaRule, isNil, isNilOrBlank, iterateCellsInRange, log, ssfFormatColor, uuid, } from "@rowsncolumns/utils";
+import { useStore } from "jotai";
+import merge from "lodash/merge";
+import throttle from "lodash/throttle";
+import React, { forwardRef, memo, startTransition, useCallback, useMemo, useRef, useState, } from "react";
+import { getBandedCells } from "../../api/banded-ranges";
+import { CF_INITIAL_WINDOW, cfWindowForViewport, isSameCfWindow, } from "../../api/cf-window";
+import { generateSelectionsFromFormula } from "../../api/selections";
+import { SpreadsheetApi } from "../../api/spreadsheet-api";
+import { findActiveTableWithinCell } from "../../api/table";
+import { checkBooleanRule, decideValidationCommit, isCellLockedUnderProtection, isProtectedCell, isProtectedSheet, showValidationDropdownArrow, } from "../../api/validation";
+import { useFormulaModeValue, useSetNoteEditorCell, useSetPinnedTooltip, useShowPasteMenu, useShowValidationAlert, } from "../../atoms";
+import { useActiveEditor } from "../../atoms/active-editor.atom";
+import { useEditingCell } from "../../atoms/editing-cell.atom";
+import { useCellEditorInstance, useSetFormulabarEditorValue, useSetFormulaBarTextFormatRuns, } from "../../atoms/formula-bar-editor-value.atom";
+import { useFormulaCanSelectCells, useFormulaSelectionMode, useSetFormulaSelectionState, } from "../../atoms/formula-selection-state.atom";
+import { useFormulaSelections } from "../../atoms/formula-selections.atom";
+import { useQuickEditState } from "../../atoms/magic-fill-state.atom";
+import { useOnHideFormulaHelp, useOnShowFormulaHelp, useShowFormulaHelpValue, } from "../../atoms/show-formula-help.atom";
+import { useSetSpreadsheetApi } from "../../atoms/spreadsheet-api.atom";
+import { ARROW_DOWN_WIDTH, CALCULATED_ICON_WIDTH, CELL_HORIZONTAL_ALIGNMENT, CF_ICON_SPACING, CF_ICON_WIDTH, CHIP_COLOR, CHIP_SPACING, COLUMN_HEADER_HEIGHT, DEFAULT_ACTIVE_CELL, DEFAULT_ARRAY, DEFAULT_CELL_BACKGROUND_COLOR, DEFAULT_CELL_COLOR, DEFAULT_CELL_SPACING, DEFAULT_COLUMN_COUNT, DEFAULT_COLUMN_WIDTH, DEFAULT_FONT_SIZE_PT, DEFAULT_HEADER_ACTIVE_BG, DEFAULT_HEADER_ACTIVE_TABLE_BG, DEFAULT_HEADER_BG, DEFAULT_HEADER_BORDER_COLOR, DEFAULT_HEADER_COLOR, DEFAULT_HEADER_SELECTED_BG, DEFAULT_HEADER_SELECTED_TABLE_BG, DEFAULT_HEADER_TABLE_BG, DEFAULT_ROW_COUNT, DEFAULT_ROW_HEIGHT, DEFAULT_SCROLL_POSITION, DEFAULT_TEXT_FORMAT, defaultSpreadsheetTheme, EXPAND_COLLAPSE_ICON_WIDTH, FILTER_ICON_WIDTH, GRIDLINE_COLOR, HEADER_TEXT_FORMAT, INDENT_SPACING, MAX_COLUMN_COUNT, MAX_ROW_COUNT, MIN_COLUMN_WIDTH, ROW_HEADER_WIDTH, SCROLLBAR_SIZE, SELECTION_BG, SELECTION_BORDER, } from "../../config";
+import { definedProps, getCellEffectiveValue, getCellFormattedValue, getCellUserEnteredValue, getDefaultColumnHeader, getDefaultRowHeader, getExtendedValueBool, getExtendedValueError, getExtendedValueFormula, getExtendedValueNumber, getExtendedValueString, getTableHeaderCells, isFirefox, isStyleReference, isTouchDevice, } from "../../helpers";
+import { useBorderStyles } from "../../hooks/use-border-styles";
+import { useCallbackRef } from "../../hooks/use-callback-ref";
+import { useCellPopover } from "../../hooks/use-cell-popover";
+import { useCellRenderer } from "../../hooks/use-cell-renderer";
+import { useConditionalFormatting } from "../../hooks/use-conditional-formatting";
+import { DefaultContextMenuWrapper, useContextMenu, } from "../../hooks/use-context-menu";
+import { useContextSetter } from "../../hooks/use-context-setter";
+import { useCopyPasteCut } from "../../hooks/use-copy-paste-cut";
+import { useCreateAddressFromSelection } from "../../hooks/use-create-address-from-selection";
+import { useCreateFormulaTokenizer } from "../../hooks/use-create-formula-tokenizer";
+import { useEditable } from "../../hooks/use-editable";
+import { useEditorCancel } from "../../hooks/use-editor-cancel";
+import { useEditorChange } from "../../hooks/use-editor-change";
+import { useEditorKeydown } from "../../hooks/use-editor-keydown";
+import { useEditorSubmit } from "../../hooks/use-editor-submit";
+import { useEmbedsCharts } from "../../hooks/use-embeds-charts";
+import { useExpandCell } from "../../hooks/use-expand-cell";
+import { useExportRange } from "../../hooks/use-export-range";
+import { useFilter } from "../../hooks/use-filter";
+import { useFlash } from "../../hooks/use-flash";
+import { useGetTooltip } from "../../hooks/use-get-tooltip";
+import { useGetValuesFromRange } from "../../hooks/use-get-values-from-range";
+import { useGridChildren } from "../../hooks/use-grid-children";
+import { useHeaderActions } from "../../hooks/use-header-actions";
+import { useHiddenDimensionMarkers } from "../../hooks/use-hidden-dimension-markers";
+import { useHiddenDimensions } from "../../hooks/use-hidden-dimensions";
+import { useHoveredSelectionIds } from "../../hooks/use-hovered-selection-ids";
+import { useIsomorphicLayoutEffect } from "../../hooks/use-isomorphic-layout-effect";
+import { useKeyboardHandler } from "../../hooks/use-keyboard-handler";
+import { useLicenseKeyValidator } from "../../hooks/use-licensekey-validator";
+import { useMoveColumnsAndRows } from "../../hooks/use-move-columns-rows";
+import { useNavigateToSheetRange } from "../../hooks/use-navigate-sheet-range";
+import { useRaf } from "../../hooks/use-raf";
+import { useResizeObserver } from "../../hooks/use-resize-observer";
+import { useScaleListener } from "../../hooks/use-scale-listener";
+import { useSelectedRowsColumns } from "../../hooks/use-selected-rows-columns";
+import { useSelection } from "../../hooks/use-selection";
+import { useSelectionChange } from "../../hooks/use-selection-change";
+import { useSelectionInterceptors } from "../../hooks/use-selection-interceptors";
+import { useSelectionMove } from "../../hooks/use-selection-move";
+import { useSelectionRenderer } from "../../hooks/use-selection-renderer";
+import { useSelectionResize } from "../../hooks/use-selection-resize";
+import { useSheetChangeHandler } from "../../hooks/use-sheet-change-handler";
+import { useSizer } from "../../hooks/use-sizer";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { useOnStructuredReferenceSelection } from "../../hooks/use-structured-reference-selection";
+import { useTableResizer } from "../../hooks/use-table-resizer";
+import { useDelayedValue } from "../../hooks/use-delayed-value";
+import { useTooltip } from "../../hooks/use-tooltip";
+import { useTouch } from "../../hooks/use-touch";
+import { multiInstanceStore } from "../../providers/spreadsheet-provider";
+import { scrollSubscriber } from "../../signals/scroll-subscriber";
+import { getStringifiedColor } from "../../themes";
+import { Cell as DefaultCell } from "../cell";
+import { CellEditor as DefaultCellEditor } from "../cell-editor";
+import { ContextMenu as DefaultContextMenu } from "../context-menu";
+import { FillHandle } from "../fill-handle";
+import { FilterBox as DefaultFilterBox } from "../filter-box";
+import { HeaderCell as DefaultHeaderCell } from "../header-cell";
+import { HeaderMoveDragComponent as DefaultHeaderMoveDragComponent } from "../header-move";
+import { PivotPlaceholder } from "../pivot-placeholder";
+import { SelectionTitle } from "../selection/title";
+import { StructuredResultRenderer as DefaultStructuredResult } from "./../cell-structured";
+import { getNestedPropertyNames } from "./helpers";
+/**
+ * CanvasGrid Component
+ * @param ShetGridProps
+ * @param CanvasGridMethods
+ * @returns
+ */
+function CanvasGridComponent(props, forwardedRef) {
+    const { licenseKey, sheetId, instanceId, activeCell = DEFAULT_ACTIVE_CELL, selections = DEFAULT_ARRAY, frozenColumnCount = 0, frozenRowCount = 0, rowCount = DEFAULT_ROW_COUNT, columnCount = DEFAULT_COLUMN_COUNT, autoFocus, basicFilter, tables, namedRanges, bandedRanges = DEFAULT_ARRAY, tableBorderColor = "#008000", filterIconColor = "#008000", conditionalFormats, showFilterIcon = true, showCalculatedColumnIcon = true, showHeaders = true, defaultColumnWidth = DEFAULT_COLUMN_WIDTH, defaultRowHeight = DEFAULT_ROW_HEIGHT, columnHeaderHeight = COLUMN_HEADER_HEIGHT, rowHeaderWidth = ROW_HEADER_WIDTH, gridLineColor = GRIDLINE_COLOR, cellBackgroundColor = DEFAULT_CELL_BACKGROUND_COLOR, cellColor = DEFAULT_CELL_COLOR, headerBorderColor = DEFAULT_HEADER_BORDER_COLOR, headerBackgroundColor = DEFAULT_HEADER_BG, headerColor = DEFAULT_HEADER_COLOR, headerActiveBackgroundColor = DEFAULT_HEADER_ACTIVE_BG, headerSelectedBackgroundColor = DEFAULT_HEADER_SELECTED_BG, headerSelectedColor = "white", headerTableBackgroundColor = DEFAULT_HEADER_TABLE_BG, headerTableActiveBackgroundColor = DEFAULT_HEADER_ACTIVE_TABLE_BG, headerTableSelectedBackgroundColor = DEFAULT_HEADER_SELECTED_TABLE_BG, frozenShadowColor = headerBorderColor, frozenShadowThickness = 1, selectionBackgroundColor = SELECTION_BG, selectionBorderColor = SELECTION_BORDER, selectionDragBorderColor = SELECTION_BORDER, chartSelectedColor, chipBackgroundColor = CHIP_COLOR, merges = DEFAULT_ARRAY, borderStyles, protectedRanges, isWorkbookProtected: isWorkbookProtectedProp = false, getSheetProtection, pivotTables, charts, embeds, slicers, rowMetadata = DEFAULT_ARRAY, columnMetadata = DEFAULT_ARRAY, scale = 1, zoomSpeed = 1, overscanCount = 3, enableEditOnEnterKey = true, enableTextOverflow = true, showGridLines: _showGridLines, showFormulas = false, protectFormulas = false, showFrozenSeparator = true, HeaderCell = DefaultHeaderCell, Cell = DefaultCell, SelectionTitleComponent = SelectionTitle, CellEditor = DefaultCellEditor, CellTooltip, ContextMenu = DefaultContextMenu, ContextMenuWrapper = DefaultContextMenuWrapper, FilterBox = DefaultFilterBox, HeaderMoveDragComponent = DefaultHeaderMoveDragComponent, SuggestionsDropdown, stickyEditor = true, scrollSnap = false, scrollThrottleTimeout, preventBrowserDefaultScroll, mouseMoveThrottleTimeout = 60, tooltipIntentInterval = 60, selectionPolicy, users, userId, renderCollaboratorCursor, functionDescriptions, showHeaderMenuButton = true, scrollbarSize = SCROLLBAR_SIZE, theme = defaultSpreadsheetTheme, showNotes = true, showComments = true, locale, agentSuggestions, onReviewSuggestion, onShowFormulas, getDataRowCount, getChartComponent, getEmbedComponent, getSlicerComponent, onChange, onChangeBatch, onExpandCollapse, onPivotDrillDown, onDelete, onChangeEditorValue, onFill, onRequestCalculate, onChangeActiveCell, onChangeActiveSheet, onChangeSelections, getSheetName, getSheetId, getCellData, getNote: getNoteProp, getTextFormatRuns, getDataValidation, getEffectiveFormat, getFormattedValue: getFormattedValueProp, getTooltipContent, errorResolutionComponent, getEffectiveValue: getEffectiveValueProp, getUserEnteredExtendedValue, getEffectiveExtendedValue, getSheetRowCount, getSheetColumnCount, getCellPopoverContent, onScroll, onViewPortChange, windowConditionalFormats = false, engineConditionalFormatResults = false, onResize, onAutoResize, onHideColumn, onHideRow, onShowColumn, onShowRow, onGroupRows, onUngroupRows, onCollapseRowGroup, onExpandRowGroup, onGroupColumns, onUngroupColumns, onCollapseColumnGroup, onExpandColumnGroup, onSetOutlineDepth, onDeleteRow, onDeleteColumn, onInsertRow, onInsertColumn, onInsertCellsShiftDown, onInsertCellsShiftRight, onDeleteCellsShiftLeft, onDeleteCellsShiftUp, onClearContents, onMoveColumns, onMoveRows, onSelectNextSheet, onSelectPreviousSheet, onCreateNewSheet, onKeyDown, onChangeFormatting, onRepeatFormatting, onClearFormatting, onRequestEditProtectedRange, onMoveChart, onResizeChart, onDeleteChart, onMoveEmbed, onResizeEmbed, onDeleteEmbed, onRequestEditEmbed, onMoveSlicer, onResizeSlicer, onDeleteSlicer, onRequestEditSlicer, onFillRange, disableFillRightShortcut, onMoveSelection, onInsertTime, onInsertDate, onInsertDateTime, onInsertAutoSum, onUndo, onRedo, onPaste, onCopy, onCut, onSortColumn, onSortTable, onFilterTable, onFilterPivot, onResizeTable, onRequestEditTable, onRequestEditPivotTable, onRequestDeletePivotTable, onRemoveTable, onCreateTable, onInsertTableColumn, onDeleteTableColumn, onInsertTableRow, onDeleteTableRow, onCreateBasicFilter, onRequestDefineNamedRange, onRequestFormatCells, onRequestConditionalFormat, onRequestDataValidation, onRequestInsertComment, onRequestInsertLink, onFreezeColumn, onFreezeRow, onUpdateNote, onProtectRange, onUnProtectRange, onSortRange, onRequestSearch, onRequestReplace, onRequestResize, getRowHeaderText = getDefaultRowHeader, getColumnHeaderText = getDefaultColumnHeader, getAdditionalCellSpacing, tokenizer: defaultTokenizer = defaultFormulaTokenizer, onChangeScale, onRemoveLink, onSelectLink, onSplitTextToColumns, onRemoveDuplicates, onRequestExpand, cellExpandPredicate, StructuredResult = DefaultStructuredResult, getMentions, getStructuredProperties: getStructuredPropertiesProp, getFunctionParameterSuggestions, shouldFetchFunctionParameters, MentionTagComponent, MentionDropdownItemComponent, showSelectionResizeHandles = true, enableMagicFill, enableQuickEdit = true, MagicFillComponent, MagicFillContent, QuickEdit, PasteMenu, SuggestionAction, HiddenRowMarkers, HiddenColumnMarkers, enableResizerOverflow, className, defaultFontSizePoint = DEFAULT_FONT_SIZE_PT, readonly, isComparing = false, getCellDiff, enableDataBoundaryNavigation, footerHeight, footerComponent, arrowComponents, 
+    // Host-driven filter props. `hostHiddenRowRanges`
+    // supplies compact [start, end] hidden-row tuples; `getFilterValues` supplies a
+    // column's distinct values. Both let a million-row filter render without scanning
+    // or materializing per-row state. Destructured here so they're excluded from
+    // `...rest` (never spread onto BaseGrid).
+    hostHiddenRowRanges, getFilterValues, getFilterColors, 
+    // Optional full-store per-cell reader for data-validation source ranges (dropdown
+    // options + commit-time checks). Windowed hosts supply an off-window-safe reader;
+    // defaults to `getFormattedValue` inside `useGetValuesFromRange`.
+    getValidationSourceValue, 
+    // Unused props only for api
+    onChangeBorder, onDuplicateSheet, onCreateConditionalFormattingRule, onDeleteConditionalFormattingRule, onUpdateConditionalFormattingRule, onCreateDataValidationRule, onUpdateDataValidationRule, onDeleteDataValidationRule, onCreateChart, onDeleteSheet, onCreateEmbed, onDecreaseIndent, onIncreaseIndent, onChangeTheme, onChangeDecimals, onUpdateSheet, onChangeBatchStream, onBlur, ...rest } = props;
+    /**
+     * Fire onBlur only when the cell editor blurs to an element outside the
+     * spreadsheet. Routed through `useEditable` so we hook the always-focused
+     * cell editor rather than relying on descendant blur bubbling.
+     */
+    const handleEditorBlur = useCallback((e, isEditing) => {
+        if (gridContainerRef.current?.contains(e.relatedTarget)) {
+            return;
+        }
+        onBlur?.(e, isEditing);
+    }, [onBlur]);
+    const showGridLines = _showGridLines ?? true;
+    const gridRef = useRef(null);
+    // Hovered cell state (immediate, updated on mousemove)
+    const [hoveredCell, setHoveredCell] = useState();
+    // Delayed hovered cell for tooltips and selection titles
+    const delayedHoveredCell = useDelayedValue(hoveredCell, tooltipIntentInterval);
+    // Text overflow functionality
+    // Store overflow width AND the x-offset of the cell to avoid recalculating on scroll
+    const overflowMapRef = useRef(new Map());
+    // Calculate overflow buffer JIT to avoid re-renders
+    const getOverflowBuffer = useCallback((scrollLeft) => {
+        const map = overflowMapRef.current;
+        let maxBuffer = 0;
+        for (const { width, x: cellX } of map.values()) {
+            // Check if the overflowing content intersects with the viewport
+            if (cellX < scrollLeft && cellX + width > scrollLeft) {
+                const requiredBuffer = scrollLeft - cellX;
+                if (requiredBuffer > maxBuffer) {
+                    maxBuffer = requiredBuffer;
+                }
+            }
+        }
+        return maxBuffer;
+    }, []);
+    // Get frozen column cells that overflow into the body area
+    // These need to be rendered in the body cells so the overflow scrolls with the body
+    // Caches the previous Set and returns the same reference when membership is unchanged
+    // so downstream consumers can rely on referential equality.
+    const frozenColumnOverflowCellsRef = useRef(new Set());
+    const getFrozenColumnOverflowCells = useCallback((frozenColumnWidth, frozenCols) => {
+        const map = overflowMapRef.current;
+        const next = new Set();
+        for (const [cellId, { width, x: cellX }] of map.entries()) {
+            // cellIdentifier format: "rowIndex,columnIndex"
+            const [, colStr] = cellId.split(",");
+            const columnIndex = parseInt(colStr, 10);
+            // Only include cells in frozen columns that overflow beyond the frozen boundary
+            if (columnIndex < frozenCols && cellX + width > frozenColumnWidth) {
+                next.add(cellId);
+            }
+        }
+        const prev = frozenColumnOverflowCellsRef.current;
+        if (prev.size === next.size) {
+            let same = true;
+            for (const id of next) {
+                if (!prev.has(id)) {
+                    same = false;
+                    break;
+                }
+            }
+            if (same)
+                return prev;
+        }
+        frozenColumnOverflowCellsRef.current = next;
+        return next;
+    }, []);
+    // Show formula help dropdown
+    const showFormulaHelp = useShowFormulaHelpValue();
+    const onHideFormulaHelp = useOnHideFormulaHelp();
+    const onShowFormulaHelp = useOnShowFormulaHelp();
+    // Cell editor
+    const cellEditorInstance = useCellEditorInstance();
+    // Paste menu
+    const [showPasteMenu, setShowPasteMenu] = useShowPasteMenu();
+    // Shared state
+    const formulaMode = useFormulaModeValue();
+    const formulaSelections = useFormulaSelections();
+    const [editingCellCoordinate, setEditingCellCoordinate] = useEditingCell();
+    const setFormulabarEditorValue = useSetFormulabarEditorValue();
+    const setFormulaBarTextFormatRuns = useSetFormulaBarTextFormatRuns();
+    const canSelectCells = useFormulaCanSelectCells();
+    const selectionMode = useFormulaSelectionMode();
+    const setFormulaState = useSetFormulaSelectionState();
+    const activeEditor = useActiveEditor();
+    // Magic fill state
+    const [quickEditValues, setQuickEditState] = useQuickEditState();
+    const setNoteEditorCell = useSetNoteEditorCell();
+    const setPinnedTooltip = useSetPinnedTooltip();
+    const setSpreadsheetApi = useSetSpreadsheetApi();
+    const propsReferenceRef = useRef(null);
+    const lastScheduledScrollRef = useRef(0);
+    // Spreadsheet jotai store
+    const store = useStore();
+    const instanceStore = useStore({ store: multiInstanceStore });
+    // To access closures
+    const hoveredCellRef = useStableRef(hoveredCell);
+    const [gridContainerRef, { width, height }] = useResizeObserver();
+    const defaultFrozenDims = showHeaders ? 1 : 0;
+    const frozenRows = Math.max(defaultFrozenDims, (frozenRowCount ?? 0) + defaultFrozenDims);
+    const frozenColumns = Math.max(defaultFrozenDims, (frozenColumnCount ?? 0) + defaultFrozenDims);
+    const selectionTopBound = 1;
+    const selectionLeftBound = 1;
+    const fillHandleSize = 8;
+    // Clamp to max allowable columns/rows in excel
+    // Rows start with zero index. Header is considered 1 row. Hence + 1
+    const sheetRowCount = Math.min(MAX_ROW_COUNT + 1, rowCount + 1);
+    const sheetColumnCount = Math.min(MAX_COLUMN_COUNT + 1, columnCount + 1);
+    // License key validator
+    const [_, licenseType, validatorResult] = useLicenseKeyValidator({
+        licenseKey,
+    });
+    const isRestricted = licenseType === "solo";
+    // Grid line width
+    const gridLineWidth = 1 * scale;
+    // When sheet is changed, we have to scroll to the last saved scroll
+    // position of the sheet
+    // It can happen that user switched to a sheet
+    // And triggered a scroll to a cell in an inactive sheet
+    // scrollToCell() + onChangeActiveSheet()
+    // This triggers multiple scrolls, one that happens immediately and another in useEffect
+    // So we check if introduce a simple hack to check if there is enough interval
+    // between scrollToCell and sheet-change scroll
+    const isSheetScrollScheduled = useCallback(() => {
+        return Date.now() - lastScheduledScrollRef.current > 100;
+    }, []);
+    // Get sheet dimensions
+    const getSheetDimensions = useCallbackRef(useCallback(() => {
+        return [
+            width - scrollbarSize - rowHeaderWidth,
+            height - scrollbarSize - columnHeaderHeight,
+        ];
+    }, [width, height, rowHeaderWidth, columnHeaderHeight, scrollbarSize]));
+    // Row header
+    const isRowHeader = useCallback((columnIndex) => columnIndex === 0, []);
+    // Column header header
+    const isColumnHeader = useCallback((rowIndex) => rowIndex === 0, []);
+    /**
+     * Hidden rows for
+     * Used for basicFilter + tables + manual show hide of cols/rows
+     */
+    // When the host supplies the basic filter's hidden
+    // body-row ranges as compact sorted [start, end] (inclusive, grid row-index space)
+    // tuples, derive row-hidden state via binary search instead of materializing a
+    // per-row `hiddenByFilter` flag for every hidden row in `rowMetadata`. This lets a
+    // million-row filter render without ~1M rowMetadata entries. `undefined` = host is
+    // not driving filter visibility, so the original `rowMetadata.hiddenByFilter` path
+    // is used unchanged.
+    const isRowHiddenByHostFilter = useCallback((rowIndex) => {
+        const ranges = hostHiddenRowRanges;
+        if (!ranges) {
+            return false;
+        }
+        let lo = 0;
+        let hi = ranges.length - 1;
+        while (lo <= hi) {
+            const mid = (lo + hi) >> 1;
+            const range = ranges[mid];
+            if (rowIndex < range[0]) {
+                hi = mid - 1;
+            }
+            else if (rowIndex > range[1]) {
+                lo = mid + 1;
+            }
+            else {
+                return true;
+            }
+        }
+        return false;
+    }, [hostHiddenRowRanges]);
+    const isHiddenRow = useCallback((rowIndex) => {
+        if (isColumnHeader(rowIndex)) {
+            return !showHeaders;
+        }
+        // Host filter ranges replace per-row hiddenByFilter when supplied.
+        if (hostHiddenRowRanges) {
+            return !!(isRowHiddenByHostFilter(rowIndex) ||
+                rowMetadata?.[rowIndex]?.hiddenByUser ||
+                rowMetadata?.[rowIndex]?.hiddenByGroup);
+        }
+        return !!(rowMetadata?.[rowIndex]?.hiddenByFilter ||
+            rowMetadata?.[rowIndex]?.hiddenByUser ||
+            rowMetadata?.[rowIndex]?.hiddenByGroup);
+    }, [
+        rowMetadata,
+        isColumnHeader,
+        showHeaders,
+        hostHiddenRowRanges,
+        isRowHiddenByHostFilter,
+    ]);
+    /**
+     * Check if a row is hidden by filter
+     */
+    const isHiddenRowByFilter = useCallback((rowIndex) => {
+        if (isColumnHeader(rowIndex)) {
+            return !showHeaders;
+        }
+        // Host filter ranges replace per-row hiddenByFilter when supplied.
+        if (hostHiddenRowRanges) {
+            return isRowHiddenByHostFilter(rowIndex);
+        }
+        return !!rowMetadata?.[rowIndex]?.hiddenByFilter;
+    }, [
+        rowMetadata,
+        isColumnHeader,
+        showHeaders,
+        hostHiddenRowRanges,
+        isRowHiddenByHostFilter,
+    ]);
+    /**
+     * For hidden columns
+     * Grid skips rendering gridlines and cell rendering
+     * Used for basicFilter + tables + manual show hide of cols/rows
+     */
+    const isHiddenColumn = useCallback((columnIndex) => {
+        if (isRowHeader(columnIndex)) {
+            return !showHeaders;
+        }
+        return !!(columnMetadata?.[columnIndex]?.hiddenByFilter ||
+            columnMetadata?.[columnIndex]?.hiddenByUser ||
+            columnMetadata?.[columnIndex]?.hiddenByGroup);
+    }, [columnMetadata, isRowHeader, showHeaders]);
+    /**
+     * Compute visible row ranges for efficient Grid iteration.
+     * Instead of checking isHiddenRow for each row (O(n)),
+     * we compute ranges from the sparse rowMetadata (O(h log h) where h = hidden rows).
+     */
+    const visibleRowRanges = useMemo(() => {
+        // When the host supplies compact filter-hidden
+        // ranges, build visible ranges by complementing them merged with the SPARSE
+        // user/group hides — no per-row hiddenByFilter materialization, so a million-row
+        // filter doesn't allocate ~1M rowMetadata entries.
+        if (hostHiddenRowRanges) {
+            const hidden = [];
+            for (const range of hostHiddenRowRanges) {
+                hidden.push([range[0], range[1]]);
+            }
+            for (const key of Object.keys(rowMetadata ?? {})) {
+                const i = Number(key);
+                if (rowMetadata?.[i]?.hiddenByUser || rowMetadata?.[i]?.hiddenByGroup) {
+                    hidden.push([i, i]);
+                }
+            }
+            hidden.sort((a, b) => a[0] - b[0]);
+            const visible = [];
+            let cursor = 0;
+            for (const [s, e] of hidden) {
+                if (s > cursor) {
+                    visible.push({ start: cursor, end: s - 1 });
+                }
+                cursor = Math.max(cursor, e + 1);
+            }
+            if (cursor <= sheetRowCount - 1) {
+                visible.push({ start: cursor, end: sheetRowCount - 1 });
+            }
+            return visible.length ? visible : [{ start: 0, end: sheetRowCount - 1 }];
+        }
+        // Get sorted hidden row indices from rowMetadata. Must include
+        // `hiddenByGroup` (outline collapse) — without it BaseGrid skips
+        // the row-iteration fast path and still calls the cell renderer
+        // with height=0, which makes overlays like conditional-format icon
+        // sets stack on top of each other at the collapse boundary.
+        const hiddenRows = Object.keys(rowMetadata ?? {})
+            .map(Number)
+            .filter((i) => rowMetadata?.[i]?.hiddenByFilter ||
+            rowMetadata?.[i]?.hiddenByUser ||
+            rowMetadata?.[i]?.hiddenByGroup)
+            .sort((a, b) => a - b);
+        // Use `sheetRowCount - 1` (not `rowCount - 1`) as the upper bound.
+        // BaseGrid is fed `sheetRowCount = rowCount + 1` so index 0 can hold
+        // the column-header row; data rows shift to 1..rowCount. Capping at
+        // `rowCount - 1` here drops the last data row from the visible
+        // ranges — BaseGrid is told the slot exists but `getVisibleRowIndices`
+        // never emits it, so the renderer skips it and selections that clamp
+        // to that index hang in empty space below the last painted row.
+        if (hiddenRows.length === 0) {
+            return [{ start: 0, end: sheetRowCount - 1 }];
+        }
+        // Build visible ranges from gaps between hidden rows
+        const ranges = [];
+        let prevEnd = -1;
+        for (const hiddenRow of hiddenRows) {
+            if (hiddenRow > prevEnd + 1) {
+                ranges.push({ start: prevEnd + 1, end: hiddenRow - 1 });
+            }
+            prevEnd = hiddenRow;
+        }
+        // Add final range if there are visible rows after the last hidden row
+        if (prevEnd < sheetRowCount - 1) {
+            ranges.push({ start: prevEnd + 1, end: sheetRowCount - 1 });
+        }
+        return ranges;
+    }, [hostHiddenRowRanges, rowMetadata, sheetRowCount]);
+    /**
+     * The pivot table (if any) whose output range covers a cell on the
+     * given sheet. Used to make pivot output read-only and to offer the
+     * drill-down context-menu action.
+     */
+    const getPivotTableAtCell = useCallback((sheetId, rowIndex, columnIndex) => pivotTables?.find((pv) => pv.pivotRange?.sheetId === sheetId &&
+        isCellWithinBounds({ rowIndex, columnIndex }, pv.pivotRange)), [pivotTables]);
+    /**
+     * Worksheet-protection lookup, identity-stable so it can ride the grid
+     * context without churning it on re-renders.
+     */
+    const getSheetProtectionStable = useCallbackRef(getSheetProtection);
+    /**
+     * Check if  the cell can be edited
+     */
+    const canEditCell = useCallbackRef(useCallback((sheetId, cell) => {
+        // Readonly mode
+        if (readonly) {
+            return false;
+        }
+        const { rowIndex, columnIndex } = cell;
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return false;
+        }
+        // Pivot output is read-only in Excel — you can't type into a
+        // pivot cell. Treat every cell inside a pivot range as
+        // non-editable; mutations happen through the pivot editor.
+        if (getPivotTableAtCell(sheetId, rowIndex, columnIndex)) {
+            return false;
+        }
+        // Excel worksheet protection: while `<sheetProtection sheet>` is
+        // active, LOCKED cells refuse edits — a cell is locked unless its
+        // `protection.locked` is `false` (Excel's default) — and unlocked
+        // cells stay editable.
+        const lockedBySheetProtection = isCellLockedUnderProtection(getSheetProtection?.(sheetId), getCellData?.(sheetId, rowIndex, columnIndex)?.protection);
+        const canEdit = !lockedBySheetProtection &&
+            (protectedRanges
+                ? !isProtectedCell(sheetId, cell, protectedRanges)
+                : true);
+        // User is trying to edit a protected cell
+        if (!canEdit) {
+            onRequestEditProtectedRange?.(sheetId, cell);
+        }
+        return canEdit;
+    }, [
+        readonly,
+        protectedRanges,
+        getSheetProtection,
+        getCellData,
+        isRowHeader,
+        isColumnHeader,
+        onRequestEditProtectedRange,
+        getPivotTableAtCell,
+    ]));
+    /**
+     * Can edit sheet
+     */
+    const isSheetProtected = useCallbackRef(useCallback((sheetId) => {
+        // Protected sheet
+        if (readonly) {
+            return true;
+        }
+        return isProtectedSheet(sheetId, protectedRanges ?? undefined);
+    }, [protectedRanges, readonly]));
+    /**
+     * Workbook-level structural protection. Readonly mode implies
+     * workbook protection too — nothing structural should mutate.
+     */
+    const isWorkbookProtected = useCallbackRef(useCallback(() => readonly || isWorkbookProtectedProp, [readonly, isWorkbookProtectedProp]));
+    // Active sheet tables
+    const activeTables = useMemo(() => tables?.filter((table) => table.sheetId === sheetId), [tables, sheetId]);
+    /**
+     * Get filter header cells for both
+     * basicFilter + tables
+     */
+    const tableHeaderCells = useMemo(() => {
+        return getTableHeaderCells(activeTables, basicFilter);
+    }, [activeTables, basicFilter]);
+    /**
+     * Retrieve banded cells
+     */
+    const bandedCells = useMemo(() => {
+        return getBandedCells((bandedRanges ?? undefined) || [], theme, sheetId, isHiddenRow, isHiddenColumn);
+    }, [bandedRanges, theme, sheetId, isHiddenRow, isHiddenColumn]);
+    /**
+     * Focus active editor
+     */
+    const focusActiveEditor = useCallback((moveSelectionToEnd = true) => {
+        if (!activeEditor) {
+            return;
+        }
+        // Slate editor looses focus on Formula bar input otherwise
+        // Edit: Remove scheduleNormalPriorityCallback(() => {
+        activeEditor?.focus(moveSelectionToEnd);
+    }, [activeEditor]);
+    /**
+     * Scroll to cell in the grid
+     * @param cell
+     * @returns
+     */
+    const scrollToCell = useCallback((cell, align) => {
+        lastScheduledScrollRef.current = Date.now();
+        gridRef.current?.scrollToCell(cell, align);
+    }, []);
+    /**
+     * Scroll to bottom of the sheet
+     */
+    const scrollToBottom = useCallback(() => {
+        gridRef.current?.scrollToBottom();
+    }, []);
+    /**
+     * Get current grid ref
+     */
+    const getGridRef = useCallback(() => gridRef.current, []);
+    /**
+     * Redraws a grid
+     */
+    const redrawGrid = useCallback(() => {
+        gridRef.current?.redrawGrid();
+    }, []);
+    /**
+     * Scroll to a portion of the grid
+     */
+    const scrollTo = useCallback((scrollCoords, immediate) => gridRef.current?.scrollTo(scrollCoords, immediate), []);
+    /**
+     * Get Absolute position (to document)
+     */
+    const getAbsolutePositionFromOffset = useCallback((x, y) => gridRef.current?.getAbsolutePositionFromOffset(x, y), []);
+    /**
+     * Get row offset
+     */
+    const getRowOffset = useCallback((rowIndex) => gridRef.current?.getRowOffset(rowIndex) ?? 0, []);
+    /**
+     * Get column offset
+     */
+    const getColumnOffset = useCallback((columnIndex) => gridRef.current?.getColumnOffset(columnIndex) ?? 0, []);
+    // Handle text overflow
+    const handleOverflow = useCallback((rowIndex, columnIndex, overflow) => {
+        const id = cellIdentifier(rowIndex, columnIndex);
+        const map = overflowMapRef.current;
+        const current = map.get(id)?.width ?? 0;
+        if (current !== overflow) {
+            if (overflow === 0) {
+                map.delete(id);
+            }
+            else {
+                // Only fetch column offset when the overflow state *changes*, not on every scroll
+                const cellX = getColumnOffset(columnIndex);
+                map.set(id, { width: overflow, x: cellX });
+            }
+        }
+    }, [getColumnOffset]);
+    const mergedCellMap = useMemo(() => {
+        const mergedCellMap = new Map();
+        if (merges) {
+            for (let i = 0; i < merges.length; i++) {
+                const bounds = merges[i];
+                for (const cell of getBoundedCells(bounds)) {
+                    mergedCellMap.set(cell, bounds);
+                }
+            }
+        }
+        return mergedCellMap;
+    }, [merges]);
+    /**
+     * Check if a cell is merged cell
+     */
+    const isMergedCell = useCallback(({ rowIndex, columnIndex }) => {
+        return mergedCellMap.has(cellIdentifier(rowIndex, columnIndex));
+    }, [mergedCellMap]);
+    /**
+     * Get cell bounds
+     * @param cell
+     * @returns
+     */
+    const getCellBounds = useCallback(({ rowIndex, columnIndex }, spanMerges = true) => {
+        if (spanMerges) {
+            const isMerged = isMergedCell({ rowIndex, columnIndex });
+            if (isMerged)
+                return mergedCellMap.get(cellIdentifier(rowIndex, columnIndex));
+        }
+        return {
+            startRowIndex: rowIndex,
+            startColumnIndex: columnIndex,
+            endColumnIndex: columnIndex,
+            endRowIndex: rowIndex,
+        };
+        // gridRef.current?.getCellBounds(cell) ?? convertCellToRange(cell),
+    }, [mergedCellMap, isMergedCell]);
+    /* Get viewport of the grid */
+    const getViewPort = useCallback(() => gridRef.current?.getViewPort() ?? {
+        rowStartIndex: 0,
+        rowStopIndex: 0,
+        columnStartIndex: 0,
+        columnStopIndex: 0,
+        visibleRowStartIndex: 0,
+        visibleRowStopIndex: 0,
+        visibleColumnStartIndex: 0,
+        visibleColumnStopIndex: 0,
+    }, [scale]);
+    /**
+     * Get cell coordinates from x and y position
+     * @param x
+     * @param y
+     * @returns
+     */
+    const getCellCoordsFromOffset = useCallback((x, y, includeFrozen) => gridRef.current?.getCellCoordsFromOffset(x, y, includeFrozen), [scale]);
+    /**
+     * Get cells coords
+     * caters to merged cells
+     */
+    const getActualCellCoords = useCallback((coords) => gridRef.current?.getActualCellCoords(coords), [scale]);
+    /**
+     * Get cell offset from cell coords. Readonly mode, so
+     * lastMeasuredColumnIndex or lastMeasuredRowIndex will
+     * not get updated
+     * @param cell
+     * @returns
+     */
+    const getCellOffsetFromCoords = useCallback((cell) => gridRef.current?.getCellOffsetFromCoords(cell, true), [scale]);
+    /**
+     * Canvas grid keeps track of lastMeasuredColumnIndex and
+     * lastMeasuredRowIndex so that it does not recalc grid
+     * dimension on every render
+     */
+    const resetLastMeasuredIndices = useCallback((cell) => gridRef.current?.resetAfterIndices(cell, false), [scale]);
+    /**
+     * Focus sheet
+     */
+    const focusSheet = useRaf(() => {
+        // Only suppress refocus when we're certain focus moved to a focusable
+        // element outside the grid (e.g. another asset pane in a split view).
+        // Mirrors the relatedTarget-outside-grid guard in handleEditorBlur. A
+        // user gesture on the grid focuses the tabIndex=0 container first, so
+        // this only suppresses render-driven refocus; a null container ref
+        // (mid mount/unmount) falls through to the original focus behavior.
+        const activeElement = canUseDOM ? document.activeElement : null;
+        const gridContainer = gridContainerRef.current;
+        if (activeElement &&
+            activeElement !== document.body &&
+            gridContainer &&
+            !gridContainer.contains(activeElement)) {
+            return;
+        }
+        if (!activeEditor || activeEditor === cellEditorInstance) {
+            cellEditorInstance?.focus();
+        }
+    }, [activeEditor, cellEditorInstance]);
+    /**
+     * Canvas layers
+     */
+    const getCanvasLayers = useCallback(() => gridRef.current?.stage?.getLayers(), []);
+    /**
+     * Row Header canvas layer layers
+     */
+    const getRowHeaderCanvasLayer = useCallback(() => gridRef.current?.rowHeaderStage?.getLayers(), []);
+    /**
+     * Column Header canvas layer layers
+     */
+    const getColumnHeaderCanvasLayer = useCallback(() => gridRef.current?.columnHeaderStage?.getLayers(), []);
+    /**
+     * Get relative position from
+     * position offset
+     */
+    const getRelativePositionFromOffset = useCallback((x, y) => {
+        return gridRef.current?.getRelativePositionFromOffset(x, y);
+    }, []);
+    /**
+     * Get scroll position
+     * @returns ScrollCoords
+     */
+    const getScrollPosition = useCallback(() => gridRef.current?.getScrollPosition() ?? DEFAULT_SCROLL_POSITION, []);
+    // Does the column contains a table
+    const columnContainsTable = useCallback((columnIndex) => {
+        const [_, tableColumnHeaderIds] = tableHeaderCells;
+        return tableColumnHeaderIds.get(columnIndex);
+    }, [tableHeaderCells]);
+    // Does the row contains a table
+    const rowsContainsTable = useCallback((rowIndex) => {
+        const [_, , tableRowHeaderIds] = tableHeaderCells;
+        return tableRowHeaderIds.get(rowIndex);
+    }, [tableHeaderCells]);
+    // Is table header
+    const isTableHeader = useCallback((rowIndex, columnIndex) => {
+        const [headerCells] = tableHeaderCells;
+        return headerCells.has(cellIdentifier(rowIndex, columnIndex));
+    }, [tableHeaderCells]);
+    // Is table header filter active
+    const isTableHeaderFilterActive = useCallback((rowIndex, columnIndex) => {
+        const [headerCells] = tableHeaderCells;
+        return headerCells.get(cellIdentifier(rowIndex, columnIndex))
+            ?.isFilterActive;
+    }, [tableHeaderCells]);
+    // Is table header filter active
+    const getTableHeaderSortOrder = useCallback((rowIndex, columnIndex) => {
+        const [headerCells] = tableHeaderCells;
+        return headerCells.get(cellIdentifier(rowIndex, columnIndex))?.sortOrder;
+    }, [tableHeaderCells]);
+    // Is calculated column header
+    const isCalculatedColumnHeader = useCallback((rowIndex, columnIndex) => {
+        const [, , , calculatedColumnHeaders] = tableHeaderCells;
+        return calculatedColumnHeaders.has(cellIdentifier(rowIndex, columnIndex));
+    }, [tableHeaderCells]);
+    // Check if table header is themed
+    // So it will not be displayed in bold font
+    const isTableHeaderThemed = useCallback((rowIndex, columnIndex) => {
+        const [headerCells] = tableHeaderCells;
+        const cell = headerCells.get(cellIdentifier(rowIndex, columnIndex));
+        return cell?.theme && cell?.theme !== "None";
+    }, [tableHeaderCells]);
+    // Is Filter icon visible
+    const isTableFilterVisible = useCallback((rowIndex, columnIndex) => {
+        const [headerCells] = tableHeaderCells;
+        return showFilterIcon
+            ? headerCells.get(cellIdentifier(rowIndex, columnIndex))?.filterButton
+            : false;
+    }, [tableHeaderCells, showFilterIcon]);
+    // Frozen row
+    const isFrozenRow = useCallback((rowIndex) => rowIndex < frozenRows, [frozenRows]);
+    // Frozen column
+    const isFrozenColumn = useCallback((columnIndex) => columnIndex < frozenColumns, [frozenColumns]);
+    /**
+     * Get hyperlink of a cell
+     */
+    const getCellMetaType = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getCellData?.(sheetId, rowIndex, columnIndex)?.metaType;
+    }, [getCellData]);
+    /**
+     * Get hyperlink of a cell
+     */
+    const getHyperlink = useCallback((sheetId, rowIndex, columnIndex) => {
+        return (getCellData?.(sheetId, rowIndex, columnIndex)?.hyperlink ?? undefined);
+    }, [getCellData]);
+    /**
+     * Get value entered by the user in a cell
+     */
+    const getUserEnteredValue = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getUserEnteredExtendedValue
+            ? getUserEnteredExtendedValue(sheetId, rowIndex, columnIndex)
+            : getCellUserEnteredValue(getCellData?.(sheetId, rowIndex, columnIndex));
+    }, [getUserEnteredExtendedValue, getCellData]);
+    /**
+     * Get boolean value
+     */
+    const getBooleanValue = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getExtendedValueBool(getUserEnteredValue?.(sheetId, rowIndex, columnIndex));
+    }, [getUserEnteredValue]);
+    /**
+     * Get formula value entered by user
+     */
+    const getFormulaValue = useCallbackRef(useCallback((sheetId, rowIndex, columnIndex) => {
+        return getExtendedValueFormula(getUserEnteredValue?.(sheetId, rowIndex, columnIndex));
+    }, [getUserEnteredValue]));
+    /**
+     * Get cell display value
+     */
+    const getFormattedValue = useCallback((sheetId, rowIndex, columnIndex) => {
+        // Row header (~1,2)
+        if (isRowHeader(columnIndex)) {
+            return getRowHeaderText(rowIndex);
+        }
+        // Column header (~A,B)
+        if (isColumnHeader(rowIndex)) {
+            return getColumnHeaderText(columnIndex);
+        }
+        if (showFormulas && !protectFormulas) {
+            const formulaValue = getFormulaValue(sheetId, rowIndex, columnIndex);
+            if (formulaValue) {
+                return formulaValue;
+            }
+        }
+        const formattedValue = getFormattedValueProp
+            ? getFormattedValueProp?.(sheetId, rowIndex, columnIndex)
+            : getCellFormattedValue(getCellData?.(sheetId, rowIndex, columnIndex));
+        // Temporary workaround for `richText`
+        if (!isNil(formattedValue) && typeof formattedValue === "object") {
+            return tryParseRichText(formattedValue);
+        }
+        return formattedValue ?? undefined;
+    }, [
+        getFormattedValueProp,
+        getCellData,
+        getFormulaValue,
+        showFormulas,
+        protectFormulas,
+        isRowHeader,
+        isColumnHeader,
+        getRowHeaderText,
+        getColumnHeaderText,
+    ]);
+    /**
+     * Get information about cell grouping
+     */
+    const getCellGroupingInfo = useCallback((sheetId, rowIndex, columnIndex) => {
+        const cellData = getCellData?.(sheetId, rowIndex, columnIndex);
+        return [
+            cellData?.expandable ?? undefined,
+            cellData?.expanded ?? undefined,
+        ];
+    }, [getCellData]);
+    /**
+     * Get effective value of a cell
+     */
+    const getEffectiveValue = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getEffectiveExtendedValue
+            ? getEffectiveExtendedValue(sheetId, rowIndex, columnIndex)
+            : getCellEffectiveValue(getCellData?.(sheetId, rowIndex, columnIndex));
+    }, [getEffectiveExtendedValue, getCellData]);
+    /**
+     * Get validation value of a cell
+     */
+    const getFormulaValidationValue = useCallback((sheetId, rowIndex, columnIndex, ruleId) => {
+        return getCellData?.(sheetId, rowIndex, columnIndex)
+            ?.conditionalFormattingResultById?.[ruleId];
+    }, [getCellData]);
+    /**
+     * Get formula error value entered by user
+     */
+    const getErrorValue = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getExtendedValueError(getEffectiveValue?.(sheetId, rowIndex, columnIndex));
+    }, [getEffectiveValue]);
+    /**
+     * Get notes. The host's `getNote` wins when provided — engines that keep
+     * notes off the cell data (rnc serves notes over their own channel) have
+     * no `.note` on `getCellData` cells to fall back to.
+     */
+    const getNote = useCallback((sheetId, rowIndex, columnIndex) => {
+        return (getNoteProp?.(sheetId, rowIndex, columnIndex) ??
+            getCellData?.(sheetId, rowIndex, columnIndex)?.note ??
+            undefined);
+    }, [getNoteProp, getCellData]);
+    /**
+     * Get comment
+     */
+    const getComment = useCallback((sheetId, rowIndex, columnIndex) => {
+        return (getCellData?.(sheetId, rowIndex, columnIndex)?.commentThreadId ??
+            undefined);
+    }, [getCellData]);
+    /**
+     * Get citation
+     */
+    const getCitation = useCallback((sheetId, rowIndex, columnIndex) => {
+        return (getCellData?.(sheetId, rowIndex, columnIndex)?.citationId ?? undefined);
+    }, [getCellData]);
+    /**
+     * Get Image url in a cell
+     * Users can add images in a cell using imageUrl property
+     */
+    const getCellImageUrl = useCallback((sheetId, rowIndex, columnIndex) => {
+        return (getCellData?.(sheetId, rowIndex, columnIndex)?.imageUrl ?? undefined);
+    }, [getCellData]);
+    /**
+     * Returns cellFormat of a cell
+     * cellFormat = userEnteredFormat + formatFromFormulaCalculation
+     * Readable field.
+     *
+     * Use userEnteredFormat for write and generate effectiveFormat
+     */
+    const getCellFormat = useCallback((sheetId, rowIndex, columnIndex) => {
+        if (getEffectiveFormat) {
+            return getEffectiveFormat?.(sheetId, rowIndex, columnIndex);
+        }
+        // For backwards compatiblity
+        const cellData = getCellData?.(sheetId, rowIndex, columnIndex);
+        const effectiveFormat = getCellEffectiveFormat(cellData);
+        if (!isStyleReference(effectiveFormat)) {
+            return effectiveFormat;
+        }
+        return undefined;
+    }, [getEffectiveFormat, getCellData]);
+    /**
+     * Get cell indent
+     */
+    const getCellIndent = useCallback((sheetId, rowIndex, columnIndex) => {
+        const fmt = getCellFormat(sheetId, rowIndex, columnIndex);
+        const indent = (fmt?.indent ?? 0) + (fmt?.relativeIndent ?? 0);
+        return indent || undefined;
+    }, [getCellFormat]);
+    /**
+     * Check if a cell data is a number
+     */
+    const isNumberValue = useCallback((sheetId, rowIndex, columnIndex) => {
+        const cellFormat = getCellFormat?.(sheetId, rowIndex, columnIndex);
+        return !!cellFormat?.numberFormat?.type;
+    }, [getCellFormat]);
+    /**
+     * Get value entered by the user in a cell
+     * If its a formula cell, formulaValue is used
+     * Order of retrieval
+     * 1. formulaValue
+     * 2. numberValue
+     * 3. stringValue
+     * 4. formattedValue
+     *    If number -> trim formatted value
+     */
+    const getUserEnteredStringValue = useCallback((sheetId, rowIndex, columnIndex) => {
+        const formulaValue = getFormulaValue(sheetId, rowIndex, columnIndex);
+        if (formulaValue && !protectFormulas) {
+            return formulaValue;
+        }
+        const userEnteredValue = getUserEnteredValue(sheetId, rowIndex, columnIndex);
+        // Look for sv
+        const stringValue = getExtendedValueString(userEnteredValue);
+        if (stringValue) {
+            return stringValue;
+        }
+        // Check for date value
+        const numberFormatType = getCellFormat(sheetId, rowIndex, columnIndex)
+            ?.numberFormat?.type;
+        if (numberFormatType === "DATE" || numberFormatType === "DATE_TIME") {
+            return getFormattedValue(sheetId, rowIndex, columnIndex);
+        }
+        // If the cell is of type number, fallback to number
+        const numberValue = getExtendedValueNumber(userEnteredValue);
+        if (!isNil(numberValue)) {
+            return String(numberValue);
+        }
+        // This is used for Array return values, which do not have
+        // formula value or user entered value
+        return getFormattedValue(sheetId, rowIndex, columnIndex);
+    }, [
+        getUserEnteredValue,
+        getFormulaValue,
+        getFormattedValue,
+        getCellFormat,
+        protectFormulas,
+    ]);
+    // Add a stable reference to get userEnteredString value
+    const getUserEnteredStringValueStable = useCallbackRef(getUserEnteredStringValue);
+    /**
+     * Get cell value used for validations
+     */
+    const getValidationValue = useCallback((sheetId, rowIndex, columnIndex, rule) => {
+        // Formula-backed rules use the custom formula path
+        if (rule && isConditionalFormatFormulaRule(rule)) {
+            return getFormulaValidationValue(sheetId, rowIndex, columnIndex, rule.id);
+        }
+        const effectiveValue = getEffectiveValue(sheetId, rowIndex, columnIndex);
+        if (rule?.booleanRule?.condition?.type === "ERROR" ||
+            rule?.booleanRule?.condition?.type === "NOT_ERROR") {
+            return getExtendedValueError(effectiveValue);
+        }
+        return (getExtendedValueBool(effectiveValue) ??
+            getExtendedValueNumber(effectiveValue) ??
+            getExtendedValueString(effectiveValue));
+    }, [getEffectiveValue, getFormulaValidationValue]);
+    /**
+     * Touch support
+     * Mainly for scrolling
+     */
+    const { onTouchStart, onDimensionsChange, scrollToTouchDevice, onAfterScrollToCell, } = useTouch({
+        scrollTo,
+        scale,
+        onChangeScale,
+    });
+    /**
+     * Conditional-formatting evaluation window: the padded, tile-quantized
+     * viewport. The raw viewport lives in a ref (no render per scroll frame);
+     * state only updates when a tile boundary is crossed, inside
+     * `startTransition` so the CF recompute is low-priority and interruptible —
+     * scrolling never blocks on it.
+     */
+    const [cfWindow, setCfWindow] = useState(CF_INITIAL_WINDOW);
+    const cfWindowRef = useRef(null);
+    const handleViewPortChange = useCallback((viewport) => {
+        onViewPortChange?.(viewport);
+        if (!windowConditionalFormats)
+            return;
+        const next = cfWindowForViewport(viewport);
+        if (!isSameCfWindow(cfWindowRef.current, next)) {
+            cfWindowRef.current = next;
+            startTransition(() => setCfWindow(next));
+        }
+    }, [onViewPortChange, windowConditionalFormats]);
+    /**
+     * Conditional Styles that should be applied to cell
+     */
+    const conditionalFormatByCell = useConditionalFormatting({
+        locale,
+        sheetId,
+        conditionalFormats: conditionalFormats ?? undefined,
+        getValidationValue,
+        isNumberValue,
+        theme,
+        getSheetRowCount,
+        getSheetColumnCount,
+        window: windowConditionalFormats ? cfWindow : undefined,
+        // Aggregate rules (TOP/BOTTOM-N, DUPLICATE/UNIQUE, above/below-average)
+        // consume the engine's per-cell stamps when the host declares them.
+        getConditionalFormatResult: engineConditionalFormatResults
+            ? getFormulaValidationValue
+            : undefined,
+    });
+    /**
+     * Get conditional format of a cell
+     */
+    const getConditionalCellFormat = useCallback((sheetId, rowIndex, columnIndex) => {
+        return conditionalFormatByCell.get(cellIdentifier(rowIndex, columnIndex));
+    }, [conditionalFormatByCell]);
+    /**
+     * Get conditional format of a cell
+     */
+    const getBandedCellFormat = useCallback((sheetId, rowIndex, columnIndex) => {
+        return bandedCells.get(cellIdentifier(rowIndex, columnIndex));
+    }, [bandedCells]);
+    /**
+     * Get data validation of a cell
+     */
+    const getDataValidationRule = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getDataValidation
+            ? getDataValidation(sheetId, rowIndex, columnIndex)
+            : getCellData?.(sheetId, rowIndex, columnIndex)
+                ?.dataValidation;
+    }, [getCellData, getDataValidation]);
+    // Get default horizontal alignment
+    const getDefaultHorizontalAlignment = useCallback((sheetId, rowIndex, columnIndex) => {
+        const isBoolean = !isNil(getBooleanValue(sheetId, rowIndex, columnIndex));
+        const errorValue = getErrorValue(sheetId, rowIndex, columnIndex);
+        // A checkbox cell centers regardless of its VALUE (Google Sheets):
+        // a blank checkbox (no `ue` at all) and a windowed host whose lean
+        // read reconstructs the boolean as text both miss the `bv` probe.
+        const isCheckbox = getDataValidationRule(sheetId, rowIndex, columnIndex)?.condition
+            ?.type === "BOOLEAN";
+        const nv = getExtendedValueNumber(getEffectiveValue(sheetId, rowIndex, columnIndex));
+        if (errorValue || isBoolean || isCheckbox) {
+            return "center";
+        }
+        if (typeof nv !== "undefined") {
+            return "right";
+        }
+        return undefined;
+    }, [getBooleanValue, getDataValidationRule, getEffectiveValue, getErrorValue]);
+    /**
+     * Get format specified in the cellData = effectiveFormat + conditonalFormat
+     * https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets/cells#effectiveFormat
+     *
+     * More work to be done with effectiveFormat
+     * G and MS combines effectiveformat
+     * effectiveFormat = cellFormat (effective + user entered + formula) + conditionalFormatting
+     *
+     * We are generating conditionalFormatting on the component level,
+     */
+    const getEffectiveCellFormat = useCallback((sheetId, rowIndex, columnIndex) => {
+        const cellFormat = getCellFormat(sheetId, rowIndex, columnIndex);
+        const isHyperlink = Boolean(getHyperlink(sheetId, rowIndex, columnIndex));
+        const conditionalCellFormat = getConditionalCellFormat(sheetId, rowIndex, columnIndex);
+        const bandedCellFormat = getBandedCellFormat(sheetId, rowIndex, columnIndex);
+        // Conditional format cell color for
+        // light and dark themes
+        const conditionalFormatColor = conditionalCellFormat?.backgroundColor &&
+            !conditionalCellFormat?.textFormat?.color
+            ? getContrastColor(getStringifiedColor(conditionalCellFormat.backgroundColor, theme), getStringifiedColor({ theme: 1 }, theme), getStringifiedColor({ theme: 1, tint: 1 }, theme))
+            : undefined;
+        // Excel / Google Sheets: a number-format pattern can carry per-section
+        // color directives like `[Blue]#,##0.00;[Red]-#,##0.00;[Green]"zero";[Magenta]@`.
+        // The section is picked by the effective value's sign / type — section
+        // 3 (the `@` branch) applies to string values. Excel applies the
+        // matched section's color OVER the cell's font color at display time
+        // (only conditional-format font colors rank higher), so the resolved
+        // color is layered on top of `uf.textFormat.color` after the merge
+        // below — the import path stores the cell's real font color and relies
+        // on this value-current resolution for `[Red]`-style display colors.
+        //
+        // Prefer the string branch when both are present so non-numeric text
+        // picks the `@` section instead of a number section computed from a
+        // coerced NaN.
+        const numberFormatPattern = cellFormat?.numberFormat?.pattern;
+        const effectiveValueForColor = numberFormatPattern
+            ? getEffectiveValue(sheetId, rowIndex, columnIndex)
+            : undefined;
+        const valueForColor = effectiveValueForColor
+            ? getExtendedValueString(effectiveValueForColor) ??
+                getExtendedValueNumber(effectiveValueForColor) ??
+                getExtendedValueBool(effectiveValueForColor)
+            : undefined;
+        const patternColor = numberFormatPattern && valueForColor !== undefined
+            ? ssfFormatColor(numberFormatPattern, valueForColor)
+            : undefined;
+        // Final text format. Hyperlink cells auto-derive underline at paint
+        // time — `uf.textFormat.underline` is merged on top below, so a user
+        // who explicitly sets underline=false still wins.
+        const defaultTextFormat = {
+            bold: isTableHeader(rowIndex, columnIndex) &&
+                isTableHeaderThemed(rowIndex, columnIndex)
+                ? true
+                : undefined,
+            fontFamily: theme.primaryFontFamily,
+            color: isHyperlink
+                ? theme.themeColors.hyperlink
+                : patternColor ??
+                    bandedCellFormat?.textFormat?.color ??
+                    conditionalFormatColor ??
+                    getStringifiedColor(cellColor, theme),
+            underline: isHyperlink ? true : undefined,
+        };
+        const mergedFormat = merge({
+            textFormat: defaultTextFormat,
+        }, definedProps(cellFormat), conditionalCellFormat);
+        // Number-format section colors beat the cell's font color (Excel
+        // parity), but never a conditional-format font color or the
+        // hyperlink color.
+        if (patternColor &&
+            !isHyperlink &&
+            !conditionalCellFormat?.textFormat?.color) {
+            mergedFormat.textFormat = {
+                ...mergedFormat.textFormat,
+                color: patternColor,
+            };
+        }
+        return {
+            ...bandedCellFormat,
+            ...mergedFormat,
+        };
+    }, [
+        getCellFormat,
+        getConditionalCellFormat,
+        getBandedCellFormat,
+        getHyperlink,
+        isTableHeader,
+        isTableHeaderThemed,
+        getEffectiveValue,
+        theme,
+        cellColor,
+    ]);
+    /**
+     * Get horizontal alignment of editor
+     */
+    const getEditorHorizontalAlignment = useCallback((sheetId, rowIndex, columnIndex) => {
+        const isFormula = !!getFormulaValue(sheetId, rowIndex, columnIndex);
+        const isBoolean = !isNil(getBooleanValue(sheetId, rowIndex, columnIndex));
+        // Boolean cell: Center align text
+        // Formula cell: Always left align text in editor
+        return isFormula
+            ? "left"
+            : isBoolean
+                ? "center"
+                : getEffectiveCellFormat(sheetId, rowIndex, columnIndex)
+                    ?.horizontalAlignment ??
+                    getDefaultHorizontalAlignment(sheetId, rowIndex, columnIndex) ??
+                    CELL_HORIZONTAL_ALIGNMENT;
+    }, [
+        getFormulaValue,
+        getBooleanValue,
+        getEffectiveCellFormat,
+        getDefaultHorizontalAlignment,
+    ]);
+    // Check if we need to wrap a cell
+    const shouldWrapCell = useCallback((sheetId, rowIndex, columnIndex) => {
+        return (getEffectiveCellFormat(sheetId, rowIndex, columnIndex)?.wrapStrategy ===
+            "wrap");
+    }, [getEffectiveCellFormat]);
+    /**
+     * Get formatting applied to a cell
+     */
+    const getTextFormat = useCallback((sheetId, rowIndex, columnIndex) => {
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return HEADER_TEXT_FORMAT;
+        }
+        return (getEffectiveCellFormat?.(sheetId, rowIndex, columnIndex)?.textFormat ??
+            DEFAULT_TEXT_FORMAT);
+    }, [getEffectiveCellFormat, isRowHeader, isColumnHeader]);
+    /**
+     * Get cell selections from structured tables
+     */
+    const getSelectionFromTable = useOnStructuredReferenceSelection({
+        tables: tables ?? undefined,
+        getSheetName,
+    });
+    // Build case-insensitive lookup map for O(1) named range access
+    const namedRangeMap = useMemo(() => {
+        const map = new Map();
+        namedRanges?.forEach((range) => {
+            map.set(range.name.toLowerCase(), range);
+        });
+        return map;
+    }, [namedRanges]);
+    /**
+     * Get cell selections from named ranges
+     */
+    const getSelectionFromNamedRange = useCallback((variableName) => {
+        // O(1) hash lookup instead of O(n) linear search
+        const namedRange = namedRangeMap.get(variableName.toLowerCase());
+        // Only return selection for names with ranges
+        if (namedRange?.range) {
+            return {
+                range: namedRange.range,
+                sheetName: getSheetName?.(namedRange.range.sheetId),
+            };
+        }
+        // Get static or formula value
+        const result = namedRange?.value;
+        if (!isNil(result)) {
+            return result;
+        }
+        return undefined;
+    }, [namedRangeMap, getSheetName]);
+    /**
+     * Create a tokenizer for Rich text editor
+     */
+    const tokenizer = useCreateFormulaTokenizer({
+        getSelectionFromNamedRange,
+        getSelectionFromTable,
+        editingCellCoordinate,
+        sheetId,
+        activeCell,
+        tokenizer: defaultTokenizer,
+    });
+    // Helper function to convert a selection to readable selection address
+    const [getAddressFromSelection, getR1C1AddressFromSelection] = useCreateAddressFromSelection({
+        sheetId,
+        rowCount,
+        columnCount,
+        tables: tables ?? undefined,
+        namedRanges: namedRanges ?? undefined,
+        merges,
+    });
+    /**
+     * Exports a data region as image
+     */
+    const exportRange = useExportRange({
+        sheetId,
+        cellBackgroundColor,
+        gridLineWidth,
+        getCanvasLayers,
+        getRowHeaderCanvasLayer,
+        getColumnHeaderCanvasLayer,
+        getCellOffsetFromCoords,
+        getR1C1AddressFromSelection,
+        getSheetName,
+        getScrollPosition,
+        getViewPort,
+        getRowOffset,
+        getColumnOffset,
+        getSheetDimensions,
+        scrollTo,
+        scrollToCell,
+        scale,
+        onChangeScale,
+    });
+    /**
+     * Get all cell selections from formula string
+     */
+    const getSelectionsFromFormula = useCallbackRef(useCallback((value, cell) => {
+        const editingSheetName = getSheetName?.(editingCellCoordinate?.sheetId ?? sheetId);
+        const editingSheetId = editingCellCoordinate?.sheetId ?? sheetId;
+        return generateSelectionsFromFormula(value, editingSheetId, editingSheetName, cell, rowCount, columnCount, tokenizer, getSelectionFromTable, getSelectionFromNamedRange);
+    }, [
+        rowCount,
+        columnCount,
+        editingCellCoordinate,
+        tokenizer,
+        getSelectionFromTable,
+        getSheetName,
+        getSelectionFromNamedRange,
+        sheetId,
+    ]));
+    /**
+     * Get user entered value from a range
+     * of cells
+     */
+    const [getFormattedValuesFromAddress, getEffectiveValuesFromRange, getFormattedValuesFromAddressAsync,] = useGetValuesFromRange({
+        sheetId,
+        getSelectionsFromFormula,
+        getFormattedValue,
+        getValidationValue,
+        getSheetId,
+        onRequestCalculate,
+        getValidationSourceValue,
+    });
+    /**
+     * Get all formatted values from range as a single 1d array
+     */
+    const getFormattedValuesFromRange = useCallback((sheetId, selections) => {
+        const values = new Set();
+        for (const { range } of selections) {
+            for (const [rowIndex, columnIndex] of iterateCellsInRange(range)) {
+                const formattedValue = getFormattedValue(sheetId, rowIndex, columnIndex);
+                if (!isNil(formattedValue)) {
+                    values.add(formattedValue);
+                }
+            }
+        }
+        return [...values];
+    }, [getFormattedValue]);
+    /**
+     * Resolve commit-time data validation enforcement for a value being entered.
+     * Returns the alert + decision when the value is invalid and the rule has an
+     * error alert; otherwise `undefined` (no enforcement — the cell still gets the
+     * flag-only red marker via `SheetCell.validate`). Formula-backed rules resolve
+     * asynchronously through the calculator, so they fall back to flag-only here.
+     */
+    const getCommitValidation = useCallback((validationSheetId, rowIndex, columnIndex, value, previousValue) => {
+        const rule = getDataValidationRule(validationSheetId, rowIndex, columnIndex);
+        const alert = rule?.alert;
+        if (!rule || !alert) {
+            return undefined;
+        }
+        const isBlank = value === undefined ||
+            value === null ||
+            (typeof value === "string" && value === "");
+        if (rule.allowBlank && isBlank) {
+            return undefined;
+        }
+        if (isDataValidationFormulaRule(rule)) {
+            // Enforce synchronously only where `checkBooleanRule` can decide the typed
+            // value without the calculator: CUSTOM_FORMULA's sync branch is a stub, the
+            // DATE_* comparisons expect serial values (commit hands us the raw typed
+            // string), and literal bounds may themselves be formulas/references. Those
+            // stay flag-only via the async calc path; everything else (dropdown
+            // lists/ranges, number/text bounds, blank/boolean/email/url) blocks or
+            // warns at commit like Excel.
+            const conditionType = rule.condition?.type;
+            const conditionValues = rule.condition?.values ?? [];
+            const hasFormulaBound = conditionValues.some((entry) => typeof entry?.userEnteredValue === "string" &&
+                entry.userEnteredValue.trim().startsWith("="));
+            const syncEnforceable = conditionType !== "CUSTOM_FORMULA" &&
+                !conditionType?.startsWith("DATE_") &&
+                (conditionType === "ONE_OF_RANGE" || !hasFormulaBound);
+            if (!syncEnforceable) {
+                return undefined;
+            }
+        }
+        const isValid = checkBooleanRule(rule, value, previousValue ?? undefined, getFormattedValuesFromAddress, { locale });
+        const decision = decideValidationCommit(alert, Boolean(isValid));
+        if (decision === "proceed") {
+            return undefined;
+        }
+        return { decision, alert };
+    }, [getDataValidationRule, getFormattedValuesFromAddress, locale]);
+    /**
+     * Opens the blocking data-validation alert dialog (Excel error alert).
+     */
+    const showValidationAlert = useShowValidationAlert();
+    /**
+     * Screen-reader announcement for the active cell (address + value). Rendered
+     * into a visually-hidden aria-live region below so keyboard navigation of the
+     * canvas grid is audible to assistive technology.
+     */
+    const activeCellAnnouncement = useMemo(() => {
+        if (!activeCell)
+            return "";
+        const address = cellToAddress(activeCell) ?? "";
+        const value = getFormattedValue(sheetId, activeCell.rowIndex, activeCell.columnIndex);
+        return !isNilOrBlank(value) ? `${address} ${value}` : address;
+    }, [activeCell, getFormattedValue, sheetId]);
+    /**
+     * Has the row been resized by user
+     */
+    const isRowResizedByUser = useCallback((rowIndex) => !!rowMetadata?.[rowIndex]?.resizedByUser, [rowMetadata]);
+    /**
+     * Check if the cell is banded
+     */
+    const isBandedCell = useCallback((rowIndex, columnIndex) => {
+        return bandedCells.has(cellIdentifier(rowIndex, columnIndex));
+    }, [bandedCells]);
+    /**
+     * Check if table header cell is calculated column
+     */
+    const isCalculatedColumnHeaderCell = useCallback((rowIndex, columnIndex) => {
+        /* Table header cells, Cell has filter icon */
+        const [, , , calculatedHeaderCell] = tableHeaderCells;
+        return calculatedHeaderCell.has(cellIdentifier(rowIndex, columnIndex));
+    }, [tableHeaderCells]);
+    /**
+     * If a cell is hidden,
+     * We tell the grid to skip rendering
+     */
+    const isHiddenCell = useCallback((rowIndex, columnIndex) => {
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return false;
+        }
+        if (isTableHeader(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (isBandedCell(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (getDataValidationRule(sheetId, rowIndex, columnIndex)) {
+            return false;
+        }
+        // Show cells with diffs when comparing (including deleted cells)
+        if (isComparing && getCellDiff?.(sheetId, rowIndex, columnIndex)) {
+            return false;
+        }
+        const effectiveCellFormat = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        const formattedValue = getFormattedValue?.(sheetId, rowIndex, columnIndex);
+        // Structured result
+        const structuredValue = getEffectiveValue(sheetId, rowIndex, columnIndex)?.structuredValue;
+        return (getNote(sheetId, rowIndex, columnIndex) === undefined &&
+            getComment(sheetId, rowIndex, columnIndex) === undefined &&
+            getCitation(sheetId, rowIndex, columnIndex) === undefined &&
+            isNilOrBlank(formattedValue) &&
+            isNil(structuredValue) &&
+            getCellImageUrl(sheetId, rowIndex, columnIndex) === undefined &&
+            effectiveCellFormat?.backgroundColor === undefined &&
+            effectiveCellFormat?.borders === undefined);
+    }, [
+        sheetId,
+        getFormattedValue,
+        getCellImageUrl,
+        getNote,
+        getComment,
+        getCitation,
+        getEffectiveCellFormat,
+        getDataValidationRule,
+        getEffectiveValue,
+        isRowHeader,
+        isColumnHeader,
+        isTableHeader,
+        isBandedCell,
+        isComparing,
+        getCellDiff,
+    ]);
+    /**
+     * Can a cell overflow to adjoining cell
+     */
+    const canOverflowToNextCell = useCallback(({ rowIndex, columnIndex }) => {
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return false;
+        }
+        if (isTableHeader(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (isBandedCell(rowIndex, columnIndex)) {
+            return false;
+        }
+        if (getDataValidationRule(sheetId, rowIndex, columnIndex)) {
+            return false;
+        }
+        const [expandable] = getCellGroupingInfo(sheetId, rowIndex, columnIndex);
+        if (expandable) {
+            return false;
+        }
+        const formattedValue = getFormattedValue?.(sheetId, rowIndex, columnIndex);
+        return (getNote(sheetId, rowIndex, columnIndex) === undefined &&
+            isNilOrBlank(formattedValue) &&
+            getCellImageUrl(sheetId, rowIndex, columnIndex) === undefined);
+    }, [
+        sheetId,
+        getFormattedValue,
+        getCellGroupingInfo,
+        getCellImageUrl,
+        getNote,
+        getDataValidationRule,
+        isRowHeader,
+        isColumnHeader,
+        isTableHeader,
+        isBandedCell,
+    ]);
+    /**
+     * If a cell is hidden,
+     * We tell the grid to skip rendering
+     */
+    const isHiddenOverlay = useCallback((rowIndex, columnIndex) => {
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return true;
+        }
+        return (getEffectiveCellFormat(sheetId, rowIndex, columnIndex)?.borders ===
+            undefined);
+    }, [getEffectiveCellFormat, isRowHeader, isColumnHeader, sheetId]);
+    /**
+     * If a cell is hidden,
+     * We tell the grid to skip rendering
+     */
+    const isHiddenBackground = useCallback((rowIndex, columnIndex) => {
+        if (isRowHeader(columnIndex) || isColumnHeader(rowIndex)) {
+            return true;
+        }
+        if (isMergedCell({ rowIndex, columnIndex })) {
+            return false;
+        }
+        // Skip the bg shape only when the cell has NO visible fill at all.
+        // A cell counts as "has fill" if any of these are present:
+        //   - backgroundColor (solid)
+        //   - fillPattern (other than "none")
+        //   - gradient (with at least one stop)
+        // The earlier version only checked backgroundColor, which
+        // incorrectly hid pattern-only and gradient-only cells.
+        const fmt = getEffectiveCellFormat(sheetId, rowIndex, columnIndex);
+        if (!fmt)
+            return true;
+        if (!isNil(fmt.backgroundColor)) {
+            return false;
+        }
+        if (fmt.fillPattern && fmt.fillPattern !== "none") {
+            return false;
+        }
+        if (fmt.gradient && (fmt.gradient.stops?.length ?? 0) > 0) {
+            return false;
+        }
+        return true;
+    }, [
+        getEffectiveCellFormat,
+        isRowHeader,
+        isColumnHeader,
+        isMergedCell,
+        sheetId,
+    ]);
+    /**
+     * Row height getter
+     */
+    const rowHeight = useCallback((rowIndex) => {
+        if (isColumnHeader(rowIndex)) {
+            return showHeaders ? columnHeaderHeight : 0;
+        }
+        if (isHiddenRow(rowIndex)) {
+            return 0;
+        }
+        return rowMetadata?.[rowIndex]?.size ?? defaultRowHeight;
+    }, [
+        isHiddenRow,
+        isColumnHeader,
+        rowMetadata,
+        columnHeaderHeight,
+        defaultRowHeight,
+        showHeaders,
+    ]);
+    /**
+     * Column width getter
+     */
+    const columnWidth = useCallback((columnIndex) => {
+        if (isRowHeader(columnIndex)) {
+            return showHeaders ? rowHeaderWidth : 0;
+        }
+        if (isHiddenColumn(columnIndex)) {
+            return 0;
+        }
+        return columnMetadata?.[columnIndex]?.size ?? defaultColumnWidth;
+    }, [
+        isHiddenColumn,
+        isRowHeader,
+        columnMetadata,
+        rowHeaderWidth,
+        defaultColumnWidth,
+        showHeaders,
+    ]);
+    /**
+     * Get actual cell width with merged cells
+     */
+    const getActualCellWidth = useCallback((sheetId, rowIndex, columnIndex) => {
+        const actualBounds = mergedCellMap.get(cellIdentifier(rowIndex, columnIndex));
+        let cellWidth = columnWidth(columnIndex);
+        if (actualBounds) {
+            let left = actualBounds.startColumnIndex + 1;
+            while (left <= actualBounds.endColumnIndex) {
+                cellWidth += columnWidth(left);
+                left++;
+            }
+            return cellWidth;
+        }
+        return cellWidth;
+    }, [columnWidth, mergedCellMap]);
+    /**
+     * Gather selected headers
+     * O(n)
+     * Reduces Space Complexity by using `all`
+     */
+    const [selectedRows, selectedColumns, selectedRowHeaders, selectedColumnHeaders, selectedRowHeadersIds, selectedColumnHeadersIds,] = useSelectedRowsColumns({
+        activeCell,
+        selections,
+        selectionLeftBound,
+        selectionTopBound,
+        rowCount,
+        columnCount,
+        getCellBounds,
+    });
+    // Named ranges for editor dropdown
+    const getNamedRanges = useCallbackRef(useCallback(() => namedRanges?.map((range) => ({
+        title: range.name,
+        category: "namedrange",
+    })), [namedRanges]));
+    // Get cell properties
+    const getStructuredProperties = useCallback((sheetName, rowIndex, columnIndex) => {
+        const newSheetId = sheetName
+            ? getSheetId?.(sheetName) ?? sheetId
+            : sheetId;
+        // Pass it along to parent prop
+        if (getStructuredPropertiesProp) {
+            return getStructuredPropertiesProp(newSheetId, rowIndex, columnIndex);
+        }
+        // Get cell data
+        const structuredValue = getEffectiveValue(newSheetId, rowIndex, columnIndex)?.structuredValue;
+        const propertyNames = structuredValue
+            ? getNestedPropertyNames(structuredValue)
+            : [];
+        return propertyNames.map((title) => {
+            return {
+                title,
+                category: "property",
+            };
+        });
+    }, [
+        getSheetId,
+        getEffectiveValue,
+        getCellData,
+        sheetId,
+        getStructuredPropertiesProp,
+    ]);
+    // Table names for editor dropdown
+    const getTableNames = useCallbackRef(useCallback(() => {
+        return tables?.map(({ title }) => ({ title, category: "table" }));
+    }, [tables]));
+    // Column names for editor dropdown
+    const getTableColumnNames = useCallbackRef(useCallback((tableName) => {
+        const editingCell = editingCellCoordinate;
+        const editingSheetId = editingCellCoordinate?.sheetId;
+        const table = tables?.find((table) => {
+            if (tableName) {
+                return table.title === tableName;
+            }
+            return editingCell
+                ? isCellWithinBounds(editingCell, table.range) &&
+                    table.sheetId === editingSheetId
+                : true;
+        });
+        if (!table) {
+            return DEFAULT_ARRAY;
+        }
+        return table.columns?.map((column) => ({
+            title: column.name,
+            category: "column",
+        }));
+    }, [tables, editingCellCoordinate]));
+    /**
+     * Mosue down interceptors for useSelection hook so
+     * user can select entire column or row when selecting
+     * header cells
+     */
+    const { onMouseDownInterceptor, onMouseMoveInterceptor } = useSelectionInterceptors({
+        sheetId,
+        rowCount,
+        columnCount,
+        frozenColumns,
+        frozenRows,
+        selectionLeftBound,
+        selectionTopBound,
+        isHiddenColumn,
+        isHiddenRow,
+        isRowHeader,
+        isColumnHeader,
+        getViewPort,
+        onChangeActiveCell,
+        scrollToCell,
+        isMergedCell,
+    });
+    /**
+     * When user selections full rows
+     * or columns, we have to ignore
+     * merged cells
+     */
+    const canSelectionSpanMergedCells = useCallback((start, end) => {
+        if (start.rowIndex < selectionTopBound && end.rowIndex === rowCount) {
+            return false;
+        }
+        if (start.columnIndex < selectionLeftBound &&
+            end.columnIndex === columnCount) {
+            return false;
+        }
+        return true;
+    }, [rowCount, columnCount, selectionTopBound, selectionLeftBound]);
+    /**
+     * For autofitting text, extra space is
+     * added for filter icon, dropdown icon etc
+     */
+    const getCellSpacing = useCallback((sheetId, rowIndex, columnIndex, axis) => {
+        /**
+         * Icons in cells do not affect
+         * height of the rows. Explore later
+         */
+        if (axis === "x") {
+            return 0;
+        }
+        /* Data validation arrow */
+        const dataValidation = getDataValidationRule(sheetId, rowIndex, columnIndex);
+        const additionalCellSpacing = getAdditionalCellSpacing?.(sheetId, rowIndex, columnIndex) ?? 0;
+        const showArrow = showValidationDropdownArrow(dataValidation);
+        const showChip = getCellMetaType(sheetId, rowIndex, columnIndex) === "people";
+        const [expandable] = getCellGroupingInfo(sheetId, rowIndex, columnIndex);
+        const iconSpacing = DEFAULT_CELL_SPACING;
+        const expandableSpacing = expandable
+            ? (EXPAND_COLLAPSE_ICON_WIDTH + iconSpacing) * scale
+            : 0;
+        const indentSpacing = (getCellIndent(sheetId, rowIndex, columnIndex) ?? 0) * INDENT_SPACING;
+        // Cell has dropdown icon
+        const arrowSpacing = showArrow
+            ? (ARROW_DOWN_WIDTH + iconSpacing) * scale
+            : 0;
+        // Cell has chip
+        const chipSpacing = showChip ? (CHIP_SPACING + iconSpacing) * scale : 0;
+        /* Calculated column icon */
+        const calculatedIconWidth = showCalculatedColumnIcon &&
+            isTableHeader(rowIndex, columnIndex) &&
+            isCalculatedColumnHeaderCell(rowIndex, columnIndex)
+            ? (CALCULATED_ICON_WIDTH + iconSpacing) * scale
+            : 0;
+        /* Table header cells, Cell has filter icon */
+        const tableFilterSpacing = isTableFilterVisible(rowIndex, columnIndex)
+            ? (FILTER_ICON_WIDTH + iconSpacing) * scale
+            : 0;
+        /* Conditional-format iconSet glyph reserved on the left of the cell.
+           The cell renderer subtracts this from the text area, so row-height
+           autofit must include it to measure wrapped text at the same width. */
+        const conditionalIconSpacing = getEffectiveCellFormat(sheetId, rowIndex, columnIndex)?.conditionalIcon
+            ? (CF_ICON_WIDTH + CF_ICON_SPACING) * scale
+            : 0;
+        return (arrowSpacing +
+            chipSpacing +
+            indentSpacing +
+            expandableSpacing +
+            calculatedIconWidth +
+            tableFilterSpacing +
+            conditionalIconSpacing +
+            additionalCellSpacing);
+    }, [
+        isTableFilterVisible,
+        getDataValidationRule,
+        getCellMetaType,
+        getCellIndent,
+        showCalculatedColumnIcon,
+        isTableHeader,
+        isCalculatedColumnHeaderCell,
+        scale,
+        getCellGroupingInfo,
+        getAdditionalCellSpacing,
+        getEffectiveCellFormat,
+    ]);
+    /**
+     * Column resizer
+     * Enables auto resizing
+     * rows and columns
+     */
+    const { getColumnWidth, getRowHeight, getCellDimensions, getCellDimensionsStable, getTextDimension, } = useSizer({
+        frozenRows,
+        frozenColumns,
+        scale,
+        minColumnDimension: MIN_COLUMN_WIDTH,
+        minRowDimension: defaultRowHeight,
+        cellHorizontalSpacing: 5, // 2 + 2 + (padding) + 1 border
+        cellVerticalSpacing: 5, // 2 + 2 (padding) + 1 border
+        isHiddenRow,
+        isHiddenColumn,
+        getTextFormat,
+        getTextFormatRuns,
+        getTextValue: getFormattedValue,
+        getSpacing: getCellSpacing,
+        getActualCellWidth,
+        shouldWrapCell,
+        columnWidth,
+        getViewPort,
+        columnCount,
+        rowCount,
+        getDataRowCount,
+        fontSize: defaultFontSizePoint,
+        resizeStrategy: "full",
+    });
+    /**
+     * Called when user tries to
+     * autofit a column or row
+     */
+    const handleAutoFit = useCallback((index, axis) => {
+        const indexes = axis === "x" ? selectedRowHeadersIds : selectedColumnHeadersIds;
+        // Callback
+        onAutoResize?.(sheetId, indexes.length && indexes.includes(index) ? indexes : [index], axis);
+        // Keep the focus back
+        focusSheet();
+    }, [
+        onAutoResize,
+        focusSheet,
+        selectedColumnHeadersIds,
+        selectedRowHeadersIds,
+        sheetId,
+    ]);
+    /* Check if sheet is focused */
+    const isSheetFocused = useCallback(() => canUseDOM ? document.activeElement === cellEditorInstance?.el() : false, [cellEditorInstance]);
+    /**
+     * Get Cell Editor
+     */
+    const getEditor = useCallback((props) => {
+        const { cell = defaultCellCoords, sheetId, editingSheetId = sheetId, } = props;
+        const { rowIndex, columnIndex } = cell ?? defaultCellCoords;
+        const cellFormat = !isNil(props.editingSheetId)
+            ? getEffectiveCellFormat(props.editingSheetId, rowIndex, columnIndex)
+            : undefined;
+        const dataValidation = getDataValidationRule(editingSheetId, rowIndex, columnIndex);
+        const address = cellToAddress(cell);
+        const sheetName = getSheetName?.(sheetId);
+        const editingSheetName = getSheetName?.(editingSheetId);
+        const effectiveValue = getEffectiveValue(editingSheetId, rowIndex, columnIndex);
+        const horizontalAlignment = getEditorHorizontalAlignment(editingSheetId, rowIndex, columnIndex);
+        return (React.createElement(CellEditor, { ...props, locale: locale, effectiveValue: effectiveValue, format: cellFormat, dataValidation: dataValidation, getRangeValues: getFormattedValuesFromAddress, getRangeValuesAsync: getFormattedValuesFromAddressAsync, scale: scale, sheetName: sheetName, editingSheetId: editingSheetId, sheetId: sheetId, editingSheetName: editingSheetName, address: address, theme: theme, tokenizer: tokenizer, horizontalAlignment: horizontalAlignment, defaultBackgroundColor: cellBackgroundColor, defaultTextColor: getStringifiedColor(cellColor, theme), functionDescriptions: functionDescriptions ?? undefined, getNamedRanges: getNamedRanges, getTableNames: getTableNames, getStructuredProperties: getStructuredProperties, getTableColumnNames: getTableColumnNames, showFormulaHelp: showFormulaHelp, onHideFormulaHelp: onHideFormulaHelp, onShowFormulaHelp: onShowFormulaHelp, onRequestCalculate: onRequestCalculate, SuggestionsDropdown: SuggestionsDropdown, stickyEditor: stickyEditor, defaultFontSizePoint: defaultFontSizePoint, getMentions: getMentions, getFunctionParameterSuggestions: getFunctionParameterSuggestions, shouldFetchFunctionParameters: shouldFetchFunctionParameters, MentionTagComponent: MentionTagComponent, MentionDropdownItemComponent: MentionDropdownItemComponent }));
+    }, [
+        scale,
+        getEffectiveCellFormat,
+        getDataValidationRule,
+        getFormattedValuesFromAddress,
+        CellEditor,
+        getSheetName,
+        showFormulaHelp,
+        onHideFormulaHelp,
+        onShowFormulaHelp,
+        tokenizer,
+        cellBackgroundColor,
+        cellColor,
+        functionDescriptions,
+        getNamedRanges,
+        getTableNames,
+        getStructuredProperties,
+        getTableColumnNames,
+        onRequestCalculate,
+        getEffectiveValue,
+        getEditorHorizontalAlignment,
+        locale,
+        theme,
+        SuggestionsDropdown,
+        stickyEditor,
+        defaultFontSizePoint,
+        getMentions,
+        getFunctionParameterSuggestions,
+        shouldFetchFunctionParameters,
+        MentionTagComponent,
+        MentionDropdownItemComponent,
+    ]);
+    /**
+     * Popover cell
+     */
+    const { popoverComponent, popoverRange, showCellPopover, hideCellPopover } = useCellPopover({
+        sheetId,
+        getCellPopoverContent: getCellPopoverContent ?? getFormattedValue,
+        getCellOffsetFromCoords,
+        getScrollPosition,
+        isFrozenColumn,
+        isFrozenRow,
+        onChangeActiveSheet,
+    });
+    /**
+     * Get tooltip component of a cell
+     * Only error, invalid values are
+     * shown in tooltip
+     */
+    /**
+     * Compose host tooltip content with the data-validation input message.
+     * Host-provided content wins; otherwise, when the cell is not already showing
+     * an error / invalid marker, surface the rule's input message (Excel's
+     * "show input message when cell is selected").
+     */
+    const getTooltipContentWithValidation = useCallback((tooltipSheetId, rowIndex, columnIndex) => {
+        const hostContent = getTooltipContent?.(tooltipSheetId, rowIndex, columnIndex);
+        if (hostContent != null) {
+            return hostContent;
+        }
+        const error = getErrorValue(tooltipSheetId, rowIndex, columnIndex);
+        if (error?.type === "Error" || error?.type === "Invalid") {
+            return undefined;
+        }
+        const rule = getDataValidationRule(tooltipSheetId, rowIndex, columnIndex);
+        const inputMessage = rule?.inputMessage;
+        if (!inputMessage || (!inputMessage.title && !inputMessage.message)) {
+            return undefined;
+        }
+        return (React.createElement("div", { className: "bg-rnc-background text-rnc-foreground p-2 shadow-md rounded-md border-l-4 border-solid border-l-blue-700 max-w-[300px] flex flex-col gap-0.5" },
+            inputMessage.title ? (React.createElement("div", { className: "font-bold font-system text-sm" }, inputMessage.title)) : null,
+            inputMessage.message ? (React.createElement("div", { className: "text-xs font-system whitespace-pre-wrap" }, inputMessage.message)) : null));
+    }, [getTooltipContent, getErrorValue, getDataValidationRule]);
+    const getTooltip = useGetTooltip({
+        sheetId,
+        getErrorValue,
+        getNote,
+        getFormattedValue,
+        getHyperlink,
+        getTooltipContent: getTooltipContentWithValidation,
+        errorResolutionComponent,
+        CellTooltip,
+        showNotes,
+    });
+    /**
+     * Selection change handler
+     */
+    const onSelectionChange = useSelectionChange({
+        onChangeSelections,
+        getSheetName,
+        sheetId,
+    });
+    // DataRegion boundaries for selection
+    const dataRegionBoundaries = useMemo(() => tables
+        ?.filter((table) => table.sheetId === sheetId)
+        .map((table) => table.range), [tables, sheetId]);
+    /**
+     * Handle grid selections
+     */
+    const { onMouseDown: onMouseDownSelection, onPointerDown: onPointerDownSelection, onKeyDown: onKeyDownSelection, fillSelection, onFillHandleMouseDown, onFillHandleDoubleClick, isDragging, isFilling, isSelectionInProgress, draggedSelection, onSelectionMouseDown, setActiveCell, initialDraggedSelection, updateSelectionStartEndReference, selectColumn, getContentfulGridRangeAroundCell, newSelection, modifySelection, clearSelections, } = useSelection({
+        sheetId,
+        getDataRowCount,
+        enableDataBoundaryNavigation,
+        allowDeselectSelection: false,
+        formulaMode,
+        enableSelectOnEnterKey: !enableEditOnEnterKey,
+        newSelectionMode: formulaMode && canSelectCells ? selectionMode : "clear",
+        activeCell,
+        selections,
+        onChangeSelections: onSelectionChange,
+        onChangeActiveCell,
+        columnCount,
+        rowCount,
+        getValue: getUserEnteredStringValue,
+        selectionLeftBound,
+        selectionTopBound,
+        canSelectionSpanMergedCells,
+        mouseDownInterceptor: onMouseDownInterceptor,
+        mouseMoveInterceptor: onMouseMoveInterceptor,
+        selectionPolicy,
+        getCellCoordsFromOffset,
+        getCellBounds,
+        getViewPort,
+        focus: focusSheet,
+        scrollToCell,
+        isMergedCell,
+        onFill,
+        onMoveSelection,
+        isHiddenColumn,
+        isHiddenRow,
+        isRowHeader,
+        isColumnHeader,
+        isTouchDevice,
+        dataRegionBoundaries,
+    });
+    /**
+     * Copy, Paste and Cut hook
+     */
+    const { copiedSelections, clearCopiedSelections, copy, cut, paste, onInternalCopy, onInternalCut, onInternalPaste, } = useCopyPasteCut({
+        activeCell,
+        selections,
+        sheetId,
+        focusSheet,
+        onPaste,
+        onCopy,
+        onCut,
+    });
+    /**
+     * After formula mode
+     * Recover old selections
+     */
+    const restoreSelections = useCallbackRef(useCallback(() => {
+        if (!formulaMode || !formulaSelections.length) {
+            return;
+        }
+        const len = selections.length - formulaSelections.length;
+        onChangeSelections?.(sheetId, selections.filter((_, i) => i < len));
+    }, [
+        sheetId,
+        selections,
+        formulaMode,
+        formulaSelections,
+        onChangeSelections,
+    ]));
+    /**
+     * Callback when editor value changes
+     */
+    const onEditorChange = useEditorChange({
+        selections,
+        onChangeActiveCell,
+        onChangeSelections,
+        getSelectionsFromFormula,
+        onChangeEditorValue,
+    });
+    // Get final row height to expand to based on value of a cell
+    const getFinalRowHeight = useCallbackRef(useCallback((sheetId, rowIndex, columnIndex, options) => {
+        if (isRowResizedByUser(rowIndex)) {
+            return undefined;
+        }
+        const { height } = getCellDimensions(sheetId, rowIndex, columnIndex, "x", options);
+        // The rest of the row's required height — the max content height
+        // over every OTHER cell in the row (the edited column is excluded;
+        // its requirement is the freshly measured `height` above). Already
+        // floored at the default row height by `getRowHeight`.
+        const currentRowHeight = getRowHeight?.(sheetId, rowIndex, 
+        // Exclude columns within the selection
+        (colIndex) => colIndex >= columnIndex && colIndex <= columnIndex) ?? defaultRowHeight;
+        // Row auto-height = max requirement across ALL cells in the row —
+        // committing a short value into one cell must not shrink a row that
+        // another cell's wrapped/multi-line content keeps tall. Rows pinned
+        // by a user drag never reach this point (`isRowResizedByUser` above).
+        const finalHeight = Math.max(currentRowHeight, height / scale);
+        if (finalHeight !== rowHeight(rowIndex)) {
+            return finalHeight;
+        }
+    }, [
+        scale,
+        defaultRowHeight,
+        isRowResizedByUser,
+        getCellDimensions,
+        rowHeight,
+        getRowHeight,
+    ]));
+    /**
+     * Called when user submits a value
+     * from the cell editor
+     */
+    const onEditorSubmit = useEditorSubmit({
+        sheetId,
+        onChangeActiveSheet,
+        setActiveCell,
+        onComplete: restoreSelections,
+        onChange,
+        getCommitValidation,
+        showValidationAlert,
+    });
+    /**
+     * User cancels editing the cell
+     */
+    const onEditorCancel = useEditorCancel({
+        sheetId,
+        onChangeActiveSheet,
+        setActiveCell,
+        onComplete: restoreSelections,
+    });
+    /**
+     * Use before edit to store editing cell reference
+     */
+    const handleBeforeEdit = useCallback((sheetId, cell) => {
+        setEditingCellCoordinate({
+            ...cell,
+            sheetId,
+        });
+    }, [setEditingCellCoordinate]);
+    /**
+     * Callback on editor keydown
+     * User can navigate between sheets
+     * In formula mode, user can select cells
+     */
+    const onEditorKeyDown = useEditorKeydown({
+        sheetId,
+        onSelectNextSheet,
+        onSelectPreviousSheet,
+        onKeyDownSelection,
+    });
+    /**
+     * Get bounds of chart overlay
+     * Within the grid body
+     */
+    const getChartBounds = useCallback(() => {
+        return {
+            left: getColumnOffset(1),
+            top: getRowOffset(1),
+        };
+    }, [getRowOffset, getColumnOffset]);
+    // Show notes editor
+    const onInsertNote = useCallback((sheetId, cell) => {
+        setNoteEditorCell({
+            ...cell,
+            sheetId,
+        });
+    }, [setNoteEditorCell]);
+    // Show pinned tooltip
+    const onPinToolTip = useCallback((sheetId, cell) => {
+        setPinnedTooltip({
+            sheetId,
+            ...cell,
+        });
+    }, [setPinnedTooltip]);
+    // Unpin  tooltip
+    const onUnpinTooltip = useCallback(() => {
+        setPinnedTooltip(undefined);
+    }, [setPinnedTooltip]);
+    /**
+     * Add quick edit range
+     */
+    const onAddQuickEdit = useCallback((range) => {
+        if (!enableQuickEdit) {
+            return;
+        }
+        setQuickEditState((prev) => {
+            return [...prev, { id: uuid(), range }];
+        });
+    }, [setQuickEditState, enableQuickEdit]);
+    /**
+     * Remove quick edit
+     */
+    const onRemoveQuickEdit = useCallback((range) => {
+        if (!enableQuickEdit) {
+            return;
+        }
+        setQuickEditState((prev) => {
+            return prev.filter((item) => {
+                return !(range.sheetId === item.range.sheetId &&
+                    isAreasEqual(item.range, range));
+            });
+        });
+        focusSheet();
+    }, [setQuickEditState, enableQuickEdit, focusSheet]);
+    /**
+     * Get context Menu component
+     */
+    const getContextMenu = useCallback((cell) => {
+        return (React.createElement(ContextMenu, { activeCell: activeCell, selections: selections, sheetId: sheetId, frozenRows: frozenRows, frozenColumns: frozenColumns, onHideColumn: isRestricted ? undefined : onHideColumn, onShowColumn: isRestricted ? undefined : onShowColumn, onShowRow: isRestricted ? undefined : onShowRow, onHideRow: isRestricted ? undefined : onHideRow, onGroupRows: isRestricted ? undefined : onGroupRows, onUngroupRows: isRestricted ? undefined : onUngroupRows, onGroupColumns: isRestricted ? undefined : onGroupColumns, onUngroupColumns: isRestricted ? undefined : onUngroupColumns, isHiddenColumn: isHiddenColumn, isHiddenRow: isHiddenRow, onDeleteColumn: onDeleteColumn, onDeleteRow: onDeleteRow, onInsertRow: onInsertRow, onInsertColumn: onInsertColumn, onInsertCellsShiftDown: onInsertCellsShiftDown, onInsertCellsShiftRight: onInsertCellsShiftRight, onDeleteCellsShiftLeft: onDeleteCellsShiftLeft, onDeleteCellsShiftUp: onDeleteCellsShiftUp, onClearContents: onClearContents, onFreezeColumn: onFreezeColumn, onFreezeRow: onFreezeRow, focusSheet: focusSheet, onSortColumn: onSortColumn, onInsertNote: onInsertNote, onProtectRange: onProtectRange, onUnProtectRange: onUnProtectRange, onSortRange: onSortRange, onRequestDefineNamedRange: onRequestDefineNamedRange, protectedRanges: protectedRanges, isRowHeader: isRowHeader(cell.columnIndex), isColumnHeader: isColumnHeader(cell.rowIndex), selectedRowHeadersIds: selectedRowHeadersIds, selectedColumnHeadersIds: selectedColumnHeadersIds, onCopy: copy, onCut: cut, onPaste: paste, onRequestResize: onRequestResize, isSheetFocused: isSheetFocused, tables: activeTables, pivotTables: pivotTables, basicFilter: basicFilter, onRequestEditTable: onRequestEditTable, onRequestEditPivotTable: onRequestEditPivotTable, onRemoveTable: onRemoveTable, onRequestDeletePivotTable: onRequestDeletePivotTable, onPivotDrillDown: onPivotDrillDown, onRequestFormatCells: onRequestFormatCells, onRequestConditionalFormat: onRequestConditionalFormat, onRequestDataValidation: onRequestDataValidation, onClearFormatting: onClearFormatting, onCreateTable: onCreateTable, onCreateBasicFilter: onCreateBasicFilter, onInsertTableColumn: onInsertTableColumn, onDeleteTableColumn: onDeleteTableColumn, onInsertTableRow: onInsertTableRow, onDeleteTableRow: onDeleteTableRow, onFilterTable: onFilterTable, onSortTable: onSortTable, getFormattedValue: getFormattedValue, getFormattedValuesFromRange: getFormattedValuesFromRange, isTableHeader: isTableHeader, readonly: readonly, onSplitTextToColumns: onSplitTextToColumns, onRemoveDuplicates: onRemoveDuplicates, onAddQuickEdit: onAddQuickEdit, enableMagicFill: enableMagicFill }));
+    }, [
+        isRestricted,
+        activeCell,
+        sheetId,
+        selections,
+        frozenRows,
+        frozenColumns,
+        onHideColumn,
+        ContextMenu,
+        onHideRow,
+        onDeleteColumn,
+        onDeleteRow,
+        onInsertColumn,
+        onInsertRow,
+        onInsertCellsShiftDown,
+        onInsertCellsShiftRight,
+        onDeleteCellsShiftLeft,
+        onDeleteCellsShiftUp,
+        onClearContents,
+        onFreezeColumn,
+        onFreezeRow,
+        focusSheet,
+        onSortColumn,
+        copy,
+        paste,
+        cut,
+        onInsertNote,
+        onProtectRange,
+        onUnProtectRange,
+        onSortRange,
+        onRequestDefineNamedRange,
+        onRequestResize,
+        isRowHeader,
+        isColumnHeader,
+        selectedRowHeadersIds,
+        selectedColumnHeadersIds,
+        protectedRanges,
+        isSheetFocused,
+        activeTables,
+        basicFilter,
+        pivotTables,
+        isTableHeader,
+        onFilterTable,
+        onSortTable,
+        onRequestEditTable,
+        onRequestEditPivotTable,
+        onRemoveTable,
+        onRequestFormatCells,
+        onClearFormatting,
+        onRequestConditionalFormat,
+        onRequestDataValidation,
+        onCreateBasicFilter,
+        onCreateTable,
+        onDeleteTableColumn,
+        onInsertTableRow,
+        getFormattedValue,
+        getFormattedValuesFromRange,
+        onInsertTableColumn,
+        onDeleteTableRow,
+        readonly,
+        onAddQuickEdit,
+        enableMagicFill,
+        onSplitTextToColumns,
+        onRemoveDuplicates,
+        onRequestDeletePivotTable,
+        isHiddenColumn,
+        isHiddenRow,
+        onShowColumn,
+        onShowRow,
+        onGroupRows,
+        onUngroupRows,
+        onGroupColumns,
+        onUngroupColumns,
+    ]);
+    /**
+     * Context menu hook
+     * Displays Context menu when user right clicks
+     * the grid
+     */
+    const { onContextMenu, contextMenuComponent, onRequestClose: onRequestCloseContextMenu, showContextMenu, } = useContextMenu({
+        getCellCoordsFromOffset,
+        getRelativePositionFromOffset,
+        isRowHeader,
+        isColumnHeader,
+        getContextMenu,
+        getCellOffsetFromCoords,
+        getScrollPosition,
+        ContextMenuWrapper,
+    });
+    /**
+     * Shortcut handlers for formatting
+     * TODO: Decide on the output
+     */
+    const onKeyDownFormatting = useKeyboardHandler({
+        sheetId,
+        locale,
+        showFormulas,
+        canEditCell,
+        onShowFormulas,
+        getCellFormat: getEffectiveCellFormat,
+        activeCell,
+        selections,
+        selectedColumns,
+        selectedRows,
+        onChangeFormatting,
+        onRepeatFormatting,
+        onInsertNote,
+        onClearFormatting,
+        onSelectNextSheet,
+        onSelectPreviousSheet,
+        onCreateNewSheet,
+        onFillRange,
+        disableFillRightShortcut,
+        onInsertTime,
+        onInsertDate,
+        onInsertDateTime,
+        onUndo,
+        onRedo,
+        onCreateTable,
+        onCreateBasicFilter,
+        clearCopiedSelections,
+        onRequestSearch,
+        onRequestReplace,
+        onRequestFormatCells,
+        onRequestInsertComment,
+        onRequestInsertLink,
+        onShowContextMenu: showContextMenu,
+        onHideColumn,
+        onHideRow,
+        onGroupRows,
+        onUngroupRows,
+        onGroupColumns,
+        onUngroupColumns,
+        onDeleteRow,
+        onInsertRow,
+        onInsertAutoSum,
+        onShowColumn,
+        onShowRow,
+        onAddQuickEdit,
+        isSheetFocused,
+        defaultFontSizePoint,
+    });
+    /**
+     * Bind to keydown events
+     * in the grid
+     */
+    const handleKeyDown = useCallback((e) => {
+        // For moving around in the sheet
+        onKeyDownSelection(e);
+        // Disable all keys
+        if (readonly) {
+            return;
+        }
+        onKeyDown?.(e);
+        onKeyDownFormatting?.(e);
+    }, [onKeyDownSelection, onKeyDown, onKeyDownFormatting, readonly]);
+    /**
+     * Allow grid to be ediable
+     */
+    const { onMouseDown: onMouseDownEditable, onDoubleClick: onDoubleClickEditable, editorComponent, isEditInProgress, makeEditable, editCell, setEditorValue, hideEditor, getNextFocusableCell, submitEditor, cancelEditor, commit, } = useEditable({
+        sheetId,
+        enableEditOnEnterKey,
+        canEdit: canEditCell,
+        sticky: stickyEditor,
+        getScrollPosition,
+        hideOnBlur: formulaMode && canSelectCells ? false : true,
+        isHiddenRow,
+        isHiddenColumn,
+        columnCount,
+        rowCount,
+        frozenColumns,
+        frozenRows,
+        activeCell,
+        selections,
+        getSheetColumnCount,
+        getSheetRowCount,
+        getValue: getUserEnteredStringValue,
+        getTextFormatRuns,
+        getBooleanValue,
+        getDataValidation: getDataValidationRule,
+        selectionLeftBound,
+        selectionTopBound,
+        editorBorderColor: selectionBorderColor,
+        getEditor,
+        onBeforeEdit: handleBeforeEdit,
+        onSubmit: onEditorSubmit,
+        onCancel: onEditorCancel,
+        onBlur: handleEditorBlur,
+        onChange: onEditorChange,
+        onChangeBatch,
+        setActiveCell,
+        onDelete,
+        onKeyDown: handleKeyDown,
+        onEditorKeyDown,
+        getCellOffsetFromCoords,
+        getCellCoordsFromOffset,
+        getCellBounds,
+        getRowOffset,
+        getColumnOffset,
+        getEditorAlignment: getEditorHorizontalAlignment,
+        focus: focusSheet,
+        getActualCellCoords,
+        scrollToCell,
+        containerWidth: width,
+        containerHeight: height,
+        onCopy: onInternalCopy,
+        onPaste: onInternalPaste,
+        onCut: onInternalCut,
+    });
+    /**
+     * Move rows and columns
+     */
+    const { draggableColumns, draggableRows, isDragging: isDraggingRowsAndColumns, } = useMoveColumnsAndRows({
+        getCellOffsetFromCoords,
+        getCellCoordsFromOffset,
+        getRelativePositionFromOffset,
+        scrollToCell,
+        focusSheet,
+        columns: formulaMode ? undefined : selectedColumnHeadersIds,
+        rows: formulaMode ? undefined : selectedRowHeadersIds,
+        selectionLeftBound,
+        selectionTopBound,
+        onMoveColumns,
+        onMoveRows,
+        containerWidth: width - scrollbarSize,
+        containerHeight: height - scrollbarSize,
+        getScrollPosition,
+        onChangeSelections,
+        onChangeActiveCell,
+        activeCell,
+        rowCount,
+        columnCount,
+        sheetId,
+        disabled: isRestricted,
+        HeaderMoveDragComponent,
+    });
+    /**
+     * Header actions
+     */
+    const { headerMenuComponent, isHeaderMenuInFrozenColumn, headerResizer, isDragging: isDraggingHeader, } = useHeaderActions({
+        activeCell: isSelectionInProgress || isFilling || isDragging ? null : hoveredCell,
+        getScrollPosition,
+        getCellOffsetFromCoords,
+        getRelativePositionFromOffset,
+        showContextMenu,
+        selectColumn,
+        setActiveCell,
+        getViewPort,
+        frozenRows,
+        frozenColumns,
+        selectionTopBound,
+        showHeaderMenuButton,
+        scale,
+        onResize,
+        focusSheet,
+        isRowHeader,
+        isColumnHeader,
+        isHiddenColumn,
+        containerWidth: width - scrollbarSize,
+        containerHeight: height - scrollbarSize,
+        onAutoFit: handleAutoFit,
+        backgroundColor: selectionBorderColor,
+        sheetId,
+        selectedRowHeadersIds,
+        selectedColumnHeadersIds,
+        enableResizerOverflow,
+    });
+    /**
+     * Close tooltip
+     */
+    const onRequestCloseTooltip = useCallback(() => {
+        setHoveredCell(undefined);
+    }, []);
+    // Scroll subscriber
+    const handleScroll = useCallback((scrollPosition) => {
+        // Pass it to rxjs subscriber
+        if (!isEditInProgress) {
+            scrollSubscriber.next(scrollPosition);
+        }
+        onScroll?.(scrollPosition);
+    }, [onScroll, isEditInProgress]);
+    /**
+     * Tooltips
+     */
+    const { tooltipComponent } = useTooltip({
+        sheetId,
+        getCellOffsetFromCoords,
+        activeCell: isDraggingHeader || isSelectionInProgress || isFilling || isDragging
+            ? null
+            : delayedHoveredCell,
+        getScrollPosition,
+        getTooltip,
+        isFrozenColumn,
+        isFrozenRow,
+        onUpdateNote,
+        onRemoveLink,
+        onSelectLink,
+        onRequestClose: onRequestCloseTooltip,
+    });
+    /**
+     * Get filter component
+     */
+    const getFilterComponent = useCallback((props) => {
+        return React.createElement(FilterBox, { ...props, sheetId: sheetId });
+    }, [sheetId, FilterBox]);
+    /**
+     * Show basicFilter panels
+     */
+    const { showFilter, hideFilter, filterComponent } = useFilter({
+        sheetId,
+        scale,
+        theme,
+        getActualCellCoords,
+        getScrollPosition,
+        getCellOffsetFromCoords,
+        getFilterComponent,
+        getFormattedValue,
+        getEffectiveFormat,
+        conditionalFormatByCell,
+        isFrozenColumn,
+        isFrozenRow,
+        isHiddenRowByFilter,
+        onSortTable,
+        onFilterTable,
+        onInsertTableColumn,
+        onDeleteTableColumn,
+        // Host-computed distinct values for the checklist.
+        getFilterValues,
+        // Host-computed swatches for the "Filter by color" picker (windowed engines).
+        getFilterColors,
+        // Live filter state so the open popup tracks Auto-apply spec changes.
+        basicFilter,
+        tables: activeTables,
+    });
+    // Table resize
+    const { tableResizers, isResizingTable } = useTableResizer({
+        sheetId,
+        tables: tables ?? undefined,
+        theme,
+        newSelection,
+        modifySelection,
+        clearSelections,
+        getCellCoordsFromOffset,
+        scrollToCell,
+        onResizeTable,
+        focusSheet,
+    });
+    /**
+     * Displays resizable/draggable charts
+     */
+    const { chartComponents, embedComponents, slicerComponents, onMouseDown: onMouseDownCharts, } = useEmbedsCharts({
+        charts,
+        embeds,
+        slicers,
+        sheetId,
+        scale,
+        frozenRows,
+        frozenColumns,
+        getCellOffsetFromCoords,
+        getAbsolutePositionFromOffset,
+        getCellCoordsFromOffset,
+        getScrollPosition,
+        selectedColor: chartSelectedColor,
+        onMoveChart,
+        onResizeChart,
+        onMoveEmbed,
+        onResizeEmbed,
+        onDeleteEmbed,
+        onDeleteChart,
+        onRequestEditEmbed,
+        onMoveSlicer,
+        onResizeSlicer,
+        onDeleteSlicer,
+        onRequestEditSlicer,
+        onFilterTable,
+        onFilterPivot,
+        tables,
+        pivotTables,
+        getFormattedValue,
+        getChartComponent,
+        getEmbedComponent,
+        getSlicerComponent,
+        getBounds: getChartBounds,
+        theme,
+        backgroundColor: cellBackgroundColor,
+        disabled: isRestricted,
+        readonly,
+    });
+    /**
+     * Callback when user clicks Filter icon
+     * Show Filter dropdown here
+     */
+    const handleFilterClick = useCallback((cell) => {
+        const activeFilter = basicFilter && isCellWithinBounds(cell, basicFilter?.range)
+            ? basicFilter
+            : activeTables?.find((table) => isCellWithinBounds(cell, table.range));
+        if (activeFilter) {
+            showFilter(cell, activeFilter);
+        }
+    }, [showFilter, basicFilter, activeTables]);
+    /**
+     * Callback when user checks a cell
+     */
+    const onChangeRef = useCallbackRef(onChange);
+    const handleCheckboxClick = useCallback((cell, checked) => {
+        // If the checkbox is derived from a formula calculation
+        // do not let users change it by toggling the checkbox
+        const { rowIndex, columnIndex } = cell;
+        const isFormula = !!getFormulaValue(sheetId, rowIndex, columnIndex);
+        if (isFormula) {
+            log("Checkbox selection is disabled for formula cells.");
+        }
+        else {
+            onChangeRef?.(sheetId, cell, checked, undefined, !checked, true);
+        }
+    }, [sheetId, getFormulaValue, onChangeRef]);
+    /**
+     * Get group keys of a cell
+     */
+    const getCellGroupKeys = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getCellData?.(sheetId, rowIndex, columnIndex)?.groupKeys;
+    }, [getCellData]);
+    /**
+     * Get children count
+     */
+    const getChildrenCount = useCallback((sheetId, rowIndex, columnIndex) => {
+        return getCellData?.(sheetId, rowIndex, columnIndex)?.childrenCount ?? 0;
+    }, [getCellData]);
+    /**
+     * Callback when user checks a cell
+     */
+    const handleExpandCollapse = useCallback((sheetId, cell, newExpandedState) => {
+        const groupKeys = getCellGroupKeys(sheetId, cell.rowIndex, cell.columnIndex);
+        const childrenCount = getChildrenCount(sheetId, cell.rowIndex, cell.columnIndex);
+        if (groupKeys?.length) {
+            onExpandCollapse?.(sheetId, cell, groupKeys, newExpandedState, childrenCount);
+        }
+    }, [onExpandCollapse, getCellGroupKeys, getChildrenCount]);
+    /**
+     * Capture mouse move events
+     */
+    const handleMouseMove = useCallback((e) => {
+        // A little bit of optimization here
+        if (isDragging ||
+            isDraggingRowsAndColumns ||
+            isDraggingHeader ||
+            isSelectionInProgress ||
+            isFilling) {
+            return;
+        }
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY);
+        if (!coords || isEqualCells(hoveredCellRef.current, coords)) {
+            return;
+        }
+        setHoveredCell(coords);
+    }, [
+        getCellCoordsFromOffset,
+        isDragging,
+        isDraggingRowsAndColumns,
+        isDraggingHeader,
+        isSelectionInProgress,
+        isFilling,
+        hoveredCellRef,
+    ]);
+    // Mouse move throttler
+    const mouseMoveThrottler = useCallbackRef(throttle(handleMouseMove, mouseMoveThrottleTimeout, {
+        trailing: true,
+        leading: true,
+    }));
+    /**
+     * Bind to mousedown events
+     * in the grid
+     */
+    const handleMouseDown = useCallback((e) => {
+        // Ignore mousedown for touch devices
+        // since we use onPointerDown
+        if (isTouchDevice) {
+            return;
+        }
+        const isMetaKey = e.nativeEvent.metaKey || e.nativeEvent.ctrlKey;
+        const isRightClick = e.button === MouseButtonCodes.right || e.ctrlKey;
+        // Keep focus on grid
+        if (!isRightClick && !e.isDefaultPrevented()) {
+            focusSheet();
+        }
+        /**
+         * In use-selection, we use a scheduler to append
+         * cells
+         *
+         * This state update is queued, and update only
+         * happens after selection changes.
+         *
+         */
+        if (formulaMode && isMetaKey) {
+            setFormulaState((prev) => ({
+                ...prev,
+                selectionMode: "append",
+            }));
+        }
+        // Pass it on to use selection hook
+        onMouseDownSelection(e);
+        // Charts
+        onMouseDownCharts?.();
+        /**
+         * Only hide contextmenu if user
+         * is not pressing right click
+         */
+        if (!isRightClick) {
+            onRequestCloseContextMenu();
+        }
+        // Hide filter
+        hideFilter();
+        // Hide popover
+        hideCellPopover();
+        // Hide paste mnenu
+        setShowPasteMenu(false);
+        // Remove pinned tooltip
+        onUnpinTooltip();
+    }, [
+        onMouseDownSelection,
+        onRequestCloseContextMenu,
+        hideFilter,
+        onMouseDownCharts,
+        formulaMode,
+        setFormulaState,
+        hideCellPopover,
+        setShowPasteMenu,
+        onUnpinTooltip,
+        focusSheet,
+    ]);
+    /**
+     * Only for touch devices
+     */
+    const handlePointerDown = useCallback((event) => {
+        onPointerDownSelection?.(event);
+        // // // Charts
+        onMouseDownCharts?.();
+        // // // Pass it on to use editable hook
+        onMouseDownEditable(event);
+        // // Hide filter
+        hideFilter();
+    }, [
+        hideFilter,
+        onPointerDownSelection,
+        onMouseDownEditable,
+        onMouseDownCharts,
+    ]);
+    /**
+     * Keep focus on the editor
+     */
+    const handlePointerUp = useCallback((event) => {
+        const isRightClick = event.button === MouseButtonCodes.right || event.ctrlKey;
+        // Always keep the focus on
+        // on cell editor
+        // If another editor is active, keep that
+        if (!isRightClick) {
+            focusSheet();
+        }
+    }, [focusSheet]);
+    /**
+     * Handle double clicks in the grid
+     */
+    const handleDoubleClick = useCallback((e) => {
+        // Excel "Show Details": double-clicking a pivot VALUE cell drills
+        // into the source rows behind it instead of entering edit mode. We
+        // gate on a numeric effective value so only data / total cells
+        // trigger it — text row-labels and headers fall through to the
+        // editor (which is a no-op for pivot cells anyway).
+        if (onPivotDrillDown) {
+            const coords = getCellCoordsFromOffset(e.clientX, e.clientY);
+            if (coords) {
+                // Resolve the owning pivot from its range, not cellData.pivotId
+                // — not every pivot cell carries that field, but range
+                // containment is authoritative (same check canEditCell uses).
+                const pivotTable = getPivotTableAtCell(sheetId, coords.rowIndex, coords.columnIndex);
+                const numericValue = getExtendedValueNumber(getEffectiveValue(sheetId, coords.rowIndex, coords.columnIndex));
+                if (pivotTable && !isNil(numericValue)) {
+                    onPivotDrillDown(pivotTable.pivotId, coords.rowIndex, coords.columnIndex);
+                    return;
+                }
+            }
+        }
+        // Pass it on to editor
+        onDoubleClickEditable?.(e);
+    }, [
+        onDoubleClickEditable,
+        onPivotDrillDown,
+        getCellCoordsFromOffset,
+        getPivotTableAtCell,
+        getEffectiveValue,
+        sheetId,
+    ]);
+    /**
+     * Get maximum text width
+     * before it overflows into next cell
+     */
+    const getMaximumOverflowTextWidth = useCallback((formattedValue, sheetId, rowIndex, columnIndex, canOverflowToNextCell, textFormat, shouldWrapOverride, direction = Direction.Right) => {
+        // A format override makes the sizer measure the whole text
+        // uniformly, ignoring per-segment rich-text runs. For cells that
+        // carry runs (e.g. imported xlsx titles with mixed font sizes),
+        // skip the override so run-aware measurement is used.
+        const hasRichRuns = (getTextFormatRuns?.(sheetId, rowIndex, columnIndex)?.length ?? 0) > 0;
+        const textWidth = getCellDimensions(sheetId, rowIndex, columnIndex, "y", {
+            textOverride: formattedValue,
+            ...(hasRichRuns ? {} : { textFormatOverride: textFormat }),
+            shouldWrapOverride,
+        }).width;
+        let colWidth = columnWidth(columnIndex) * scale;
+        if (textWidth < colWidth) {
+            return [textWidth, DEFAULT_ARRAY];
+        }
+        let start = columnIndex;
+        const columnSpans = [];
+        const isMovingRight = direction === Direction.Right;
+        while (canOverflowToNextCell({
+            rowIndex,
+            columnIndex: isMovingRight ? ++start : --start,
+        }) &&
+            colWidth < textWidth) {
+            const prev = isMovingRight ? start - 1 : start + 1;
+            // For right aligned texts
+            const borderColor = getEffectiveCellFormat(sheetId, rowIndex, isMovingRight ? start : prev)?.backgroundColor ??
+                getEffectiveCellFormat(sheetId, rowIndex, isMovingRight ? prev : start)?.backgroundColor;
+            const nextColWidth = columnWidth(start) * scale;
+            columnSpans.push([
+                start,
+                getColumnOffset(start),
+                nextColWidth,
+                borderColor,
+            ]);
+            colWidth += nextColWidth;
+        }
+        return [Math.min(textWidth, colWidth), columnSpans];
+    }, [
+        scale,
+        getCellDimensions,
+        getTextFormatRuns,
+        columnWidth,
+        getColumnOffset,
+        getEffectiveCellFormat,
+    ]);
+    /**
+     * Render Cells in the grid
+     */
+    const [cellBackgroundRenderer, cellRenderer, cellOverlayRenderer, headerCellRenderer,] = useCellRenderer({
+        sheetId,
+        showGridLines,
+        scale,
+        enableTextOverflow,
+        isRowHeader,
+        isColumnHeader,
+        canOverflowToNextCell,
+        getDefaultHorizontalAlignment,
+        selectedRows,
+        selectedColumns,
+        selectedRowHeaders,
+        selectedColumnHeaders,
+        cellBackgroundColor,
+        headerBorderColor,
+        headerBackgroundColor,
+        headerColor,
+        headerActiveBackgroundColor,
+        headerSelectedBackgroundColor,
+        headerSelectedColor,
+        headerTableBackgroundColor,
+        headerTableActiveBackgroundColor,
+        headerTableSelectedBackgroundColor,
+        chipBackgroundColor,
+        filterIconColor,
+        columnContainsTable,
+        rowsContainsTable,
+        isTableHeader,
+        isCalculatedColumnHeader,
+        isTableHeaderFilterActive,
+        isTableFilterVisible,
+        getTableHeaderSortOrder,
+        showCalculatedColumnIcon,
+        showHeaders,
+        getDataValidation: getDataValidationRule,
+        getErrorValue,
+        getNote,
+        getComment,
+        getEffectiveValue,
+        getFormattedValue,
+        getCellImageUrl,
+        getEffectiveCellFormat,
+        getCellBounds,
+        getCellMetaType,
+        getRowHeaderText,
+        getColumnHeaderText,
+        getMaximumOverflowTextWidth,
+        getTextDimension,
+        getCellGroupingInfo,
+        getTextFormatRuns,
+        onRequestEdit: makeEditable,
+        onFilterClick: handleFilterClick,
+        onCheckboxClick: handleCheckboxClick,
+        onExpandCollapse: handleExpandCollapse,
+        defaultFontSizePoint,
+        Cell,
+        HeaderCell,
+        theme,
+        gridLineWidth,
+        showNotes,
+        showComments,
+        StructuredResult,
+        readonly,
+        onOverflow: handleOverflow,
+        isComparing,
+        getCellDiff,
+    });
+    /**
+     * When user selects a selection for moving
+     * If its a table, we select the entire column
+     * if user selects a table header column
+     */
+    const onSelectionElementMouseDown = useCallback((e, cell, selection, index, shouldClamp) => {
+        // Find the first cell in selection and
+        // Check if its a table column
+        // Disabled for now
+        const firstCell = cell;
+        const table = firstCell && isTableHeader(firstCell.rowIndex, firstCell.columnIndex)
+            ? findActiveTableWithinCell(sheetId, firstCell, tables)
+            : undefined;
+        if (firstCell && table) {
+            const columnSelection = {
+                range: {
+                    ...table.range,
+                    startColumnIndex: firstCell.columnIndex,
+                    endColumnIndex: Math.max(firstCell.columnIndex, selection?.range.endColumnIndex ?? 0),
+                },
+            };
+            // Update column selection
+            onChangeSelections?.(sheetId, [columnSelection]);
+            // Pass column
+            onSelectionMouseDown?.(e, cell, columnSelection, index, shouldClamp);
+        }
+        else {
+            onSelectionMouseDown?.(e, cell, selection, index, shouldClamp);
+        }
+    }, [onSelectionMouseDown, onChangeSelections, isTableHeader, tables, sheetId]);
+    // Selection resize
+    const onMouseDownResizeHandle = useSelectionResize({
+        getCellBounds,
+        getCellCoordsFromOffset,
+        scrollToCell,
+        tokenizer,
+    });
+    // Selection move: drag a formula reference via its border covers
+    const { onMouseDownMoveSelection, isDragging: isDraggingMoveSelection } = useSelectionMove({
+        getCellCoordsFromOffset,
+        scrollToCell,
+        tokenizer,
+    });
+    /**
+     * Hide fill handle
+     * 1. When user is in edit mode
+     * 2. When user is in formula mode and user has made selections
+     */
+    const showFillHandle = !isSelectionInProgress &&
+        !isEditInProgress &&
+        !isResizingTable &&
+        !(formulaMode && formulaSelections.length);
+    /**
+     * Flashing
+     */
+    const { flash, mark, unmark, onFlashEnd, flashingBorders } = useFlash({
+        theme,
+    });
+    // Cache hover ids
+    const cachedHoveredSelectionIds = useHoveredSelectionIds({
+        selections,
+        hoveredCell: delayedHoveredCell,
+        activeCell,
+    });
+    /**
+     * Selection Renderer
+     */
+    const selectionRenderer = useSelectionRenderer({
+        sheetId,
+        scale,
+        onSelectionMouseDown: onSelectionElementMouseDown,
+        onMouseDownResizeHandle: onMouseDownResizeHandle,
+        onMouseDownMoveSelection: onMouseDownMoveSelection,
+        isDraggingMoveSelection: isDraggingMoveSelection,
+        onChangeActiveCell,
+        onChangeSelections,
+        SelectionTitleComponent,
+        selectionCount: (formulaMode ? formulaSelections : selections).length,
+        selectionBackgroundColor,
+        selectionBorderColor,
+        getSheetName,
+        onRequestEditTable,
+        onRequestEditPivotTable,
+        isResizingTable,
+        resizeHandleBorderColor: cellBackgroundColor,
+        showSelectionResizeHandles,
+        fillHandleSize,
+        showFillHandle,
+        onFlashEnd,
+        enableMagicFill: enableMagicFill && !isEditInProgress,
+        MagicFillComponent,
+        MagicFillContent,
+        QuickEdit,
+        PasteMenu,
+        SuggestionAction,
+        readonly,
+        onSplitTextToColumns,
+        showPasteMenu,
+        hoveredCell: delayedHoveredCell,
+        onRemoveQuickEdit,
+        onAddQuickEdit,
+        cachedHoveredSelectionIds,
+    });
+    /**
+     * Create Range borders in the Grid
+     * Used for
+     * 1. Tables and basicFilter - check
+     * 2. Selection drag/drop - check
+     * 3. Collaborators - check
+     */
+    const finalBorderStyles = useBorderStyles({
+        sheetId,
+        activeCell,
+        hoveredCell: delayedHoveredCell,
+        tables: activeTables,
+        pivotTables,
+        basicFilter,
+        borderStyles,
+        copiedSelections,
+        flashingBorders,
+        draggedSelection,
+        initialDraggedSelection,
+        selectionDragBorderColor,
+        selectionBorderColor,
+        tableBorderColor,
+        users: isRestricted ? DEFAULT_ARRAY : users,
+        userId,
+        renderCollaboratorCursor,
+        theme,
+        agentSuggestions,
+        quickEditValues,
+    });
+    // Hidden column markers
+    const [hiddenColumnMarkers, frozenHiddenColumnMarkers, hiddenRowMarkers, frozenHiddenRowMarkers,] = useHiddenDimensionMarkers({
+        sheetId,
+        columnMetadata,
+        rowMetadata,
+        onShowColumn,
+        onShowRow,
+        isFrozenColumn,
+        isFrozenRow,
+        focusSheet,
+        rowCount,
+        columnCount,
+        HiddenRowMarkers,
+        HiddenColumnMarkers,
+    });
+    // Zoom lister
+    const onMouseWheel = useScaleListener({
+        zoomSpeed,
+        scale,
+        onChangeScale,
+    });
+    /**
+     * Frozen shadow settings
+     */
+    const shadowSettings = useMemo(() => {
+        return {
+            stroke: frozenShadowColor,
+            strokeWidth: frozenShadowThickness,
+        };
+    }, [frozenShadowColor, frozenShadowThickness]);
+    /**
+     * Helper function to navigate to sheet range
+     */
+    const navigateToSheetRange = useNavigateToSheetRange({
+        onChangeActiveSheet,
+        onChangeSelections,
+        setActiveCell,
+        flash,
+    });
+    // Dispatch keyboard event
+    const dispatchEvent = useCallback((event) => {
+        gridRef.current?.container?.dispatchEvent(event);
+    }, []);
+    // --- START SIDE EFFECTS ---
+    // Expose grid methods in context and ref
+    // Make sure these are useCallbackRef, so re-render
+    // dont trigger infinite loop
+    useContextSetter(forwardedRef, {
+        submitEditor,
+        cancelEditor,
+        commit,
+        makeEditable,
+        editCell,
+        getNextFocusableCell,
+        onEditorKeyDown,
+        scrollToCell,
+        scrollToBottom,
+        focusSheet,
+        canEditCell,
+        isSheetProtected,
+        isWorkbookProtected,
+        getSheetProtection: getSheetProtectionStable,
+        getSelectionsFromFormula,
+        getAddressFromSelection,
+        getR1C1AddressFromSelection,
+        tokenizer,
+        setEditorValue,
+        getCellBounds,
+        getNamedRanges,
+        getTableNames,
+        getStructuredProperties,
+        getMentions,
+        getSheetName,
+        getSheetId,
+        getTableColumnNames,
+        updateSelectionStartEndReference,
+        getCellDimensions: getCellDimensionsStable,
+        getRowHeight,
+        getColumnWidth,
+        getContentfulGridRangeAroundCell,
+        getCellCoordsFromOffset,
+        getCellOffsetFromCoords,
+        getEffectiveValuesFromRange,
+        getSheetDimensions,
+        getFinalRowHeight,
+        onInsertNote,
+        onPinToolTip,
+        onUnpinTooltip,
+        showCellPopover,
+        redrawGrid,
+        flash,
+        navigateToSheetRange,
+        mark,
+        unmark,
+        exportRange,
+        getViewPort,
+        setActiveCell,
+        getGridRef,
+        dispatchEvent,
+        splitTextToColumns: onSplitTextToColumns,
+        copy,
+        paste,
+        cut,
+    });
+    const cellExpandComponent = useExpandCell({
+        sheetId,
+        theme,
+        activeCell: hoveredCell,
+        iconColor: filterIconColor,
+        onRequestExpand,
+        cellExpandPredicate,
+        getCellSpacing,
+        onChangeActiveCell,
+        getCellOffsetFromCoords,
+        getScrollPosition,
+        isFrozenColumn,
+        isFrozenRow,
+    });
+    // Pivot placeholders
+    const pivotPlaceholders = useMemo(() => {
+        const placeholders = [];
+        let displayIdx = 0;
+        for (const pivotTable of pivotTables ?? []) {
+            if (!pivotTable.pivotRange &&
+                pivotTable.targetPosition.sheetId === sheetId) {
+                displayIdx++;
+                const cellOffset = getCellOffsetFromCoords?.(pivotTable.targetPosition);
+                const displayName = pivotTable.name || `PivotTable${displayIdx}`;
+                placeholders.push(React.createElement(PivotPlaceholder, { pivotTable: pivotTable, onRequestEditPivotTable: onRequestEditPivotTable, left: cellOffset?.x ?? 0, top: cellOffset?.y ?? 0, displayName: displayName, key: pivotTable.pivotId }));
+            }
+        }
+        return placeholders;
+    }, [pivotTables, sheetId, onRequestEditPivotTable, getCellOffsetFromCoords]);
+    /**
+     * Helper function to reset grid cache if column or
+     * row dimension changes
+     */
+    useHiddenDimensions(columnMetadata, rowMetadata, sheetId, scale, resetLastMeasuredIndices, hostHiddenRowRanges, visibleRowRanges);
+    // Callback when sheet changes
+    useSheetChangeHandler(sheetId, 
+    // Immediate callback for imperative methods
+    () => {
+        if (activeCell && selections) {
+            updateSelectionStartEndReference(activeCell, selections);
+        }
+        // Clear text overflow values
+        overflowMapRef.current.clear();
+    }, 
+    // Effects callbacks
+    (newScrollPosition) => {
+        // Update scrollPosition
+        if (newScrollPosition && isSheetScrollScheduled()) {
+            if (isTouchDevice) {
+                scrollToTouchDevice(newScrollPosition);
+            }
+            else {
+                scrollTo(newScrollPosition);
+            }
+        }
+        // Wait for sheet change to finish
+        requestAnimationFrame(() => {
+            // If user is not in formula mode and changing sheet.
+            // The edit belongs to the sheet it was started on, so flush it —
+            // `hideEditor()` alone threw the typed value away, leaving the cell
+            // empty while the formula bar kept showing the abandoned text. Hosts
+            // no longer need to call `commit()` before switching sheets.
+            // `preserveActiveSheet` keeps the user on the sheet they moved to; the
+            // value is still written back to the sheet it was typed on.
+            // Formula mode is excluded: switching sheets mid-formula is how a
+            // cross-sheet range is picked, so the editor has to stay open.
+            //
+            // Ordering here is load-bearing in both directions. It has to run
+            // inside the rAF, after the sheet-change render has committed:
+            // `useSpreadsheetState`'s `onChange` mints the shared-string id inside
+            // the `onChangeSheetData` updater and flushes the registry right
+            // after, which only lines up because React evaluates an updater
+            // eagerly when the component has no pending update. Flushing from the
+            // layout effect — while the host's active-sheet update is still in
+            // flight — defers that updater past the flush, and the cell keeps an
+            // `ss` pointer to an entry that never reaches the shared-strings table
+            // and renders blank. It also has to run before the focus handling
+            // below, so a throw in `focusSheet()` can't cost the user their edit.
+            if (!formulaMode && !commit({ preserveActiveSheet: true })) {
+                // Nothing was being edited — keep the original reset.
+                hideEditor();
+            }
+            // Focus editor
+            if (formulaMode && !activeEditor?.isFocused()) {
+                // When sheet is changed, we
+                // need to keep the focus in the current
+                // cursor
+                focusActiveEditor(false);
+            }
+            else {
+                // Keep focus back on sheet
+                // Check if user is focused on the context menu
+                if (canUseDOM &&
+                    document.activeElement?.getAttribute("role") !== "menu") {
+                    focusSheet();
+                }
+            }
+        });
+    });
+    // props reference for spreadsheet api
+    propsReferenceRef.current = props;
+    // Expose a spreadsheet API
+    useIsomorphicLayoutEffect(() => {
+        const stableMethods = {
+            getUserEnteredValue: getUserEnteredStringValueStable,
+            scrollToCell,
+            commit,
+        };
+        setSpreadsheetApi(new SpreadsheetApi(propsReferenceRef, stableMethods, store, instanceStore, instanceId));
+    }, []);
+    // Update formulabar input value when activecell changes
+    useIsomorphicLayoutEffect(() => {
+        if (formulaMode) {
+            return;
+        }
+        if (editingCellCoordinate ||
+            isEqualCells(editingCellCoordinate, activeCell)) {
+            // We are currently in edit mode
+            // We should only update if the editing value changes
+            return;
+        }
+        const { rowIndex, columnIndex } = activeCell;
+        const value = getUserEnteredStringValue(sheetId, rowIndex, columnIndex);
+        const textFormatRuns = getTextFormatRuns?.(sheetId, rowIndex, columnIndex);
+        // Update formula bar input
+        setFormulabarEditorValue(value ?? "");
+        setFormulaBarTextFormatRuns(textFormatRuns);
+    }, [
+        activeCell,
+        formulaMode,
+        sheetId,
+        editingCellCoordinate,
+        getUserEnteredStringValue,
+        setFormulabarEditorValue,
+        setFormulaBarTextFormatRuns,
+    ]);
+    // Keep active editor in focus
+    // When user shows and hides the formula help
+    useIsomorphicLayoutEffect(() => {
+        focusActiveEditor(false);
+    }, [showFormulaHelp]);
+    // --- END SIDE EFFECTS ---
+    /**
+     * Insert components inside the grid viewport
+     */
+    const gridChildren = useGridChildren({
+        stickyEditor,
+        editorComponent,
+        chartComponents,
+        embedComponents,
+        slicerComponents,
+        pivotPlaceholders,
+        tableResizers,
+        hiddenColumnMarkers,
+        frozenHiddenColumnMarkers,
+        hiddenRowMarkers,
+        frozenHiddenRowMarkers,
+        frozenRows,
+        frozenColumns,
+        headerMenuComponent,
+        isHeaderMenuInFrozenColumn,
+        popoverComponent,
+        popoverRange,
+        cellExpandComponent,
+    });
+    /**
+     * Only enable selection drag if user is not editing and not
+     * in formula mode
+     */
+    const enableSelectionDrag = !isSelectionInProgress && !isEditInProgress && !formulaMode;
+    return (React.createElement("div", { className: cn("rnc-canvas-wrapper after:box-border before:box-border [&_*]:box-border flex min-h-0 min-w-0 relative z-[1] flex-1 bg-rnc-background", className), ref: gridContainerRef, 
+        // The grid paints to <canvas>, so there is no per-cell DOM for a screen
+        // reader to traverse. role="application" passes keystrokes through to our
+        // custom keyboard handling, and the aria-live region below announces the
+        // active cell on navigation. (A full off-screen role=grid/gridcell mirror
+        // is a larger follow-up.)
+        role: "application", "aria-label": "Spreadsheet grid", 
+        // css={{
+        //   backgroundColor: cellBackgroundColor,
+        // }}
+        onContextMenu: onContextMenu, 
+        // Bind to outer container, so it always takes
+        // priority over other components
+        // generated by hooks
+        onMouseMove: mouseMoveThrottler, onWheel: onMouseWheel, ...rest },
+        width === 0 || height === 0 ? (React.createElement("div", { className: "flex border-solid border-rnc-border border border-t border-b flex-1 justify-center items-center" },
+            React.createElement("div", { className: "space-y-2" },
+                React.createElement(Skeleton, { className: "h-4 w-[250px]" }),
+                React.createElement(Skeleton, { className: "h-4 w-[250px]" })))) : (React.createElement(BaseGrid, { ref: gridRef, overscanCount: overscanCount, rowCount: sheetRowCount, columnCount: sheetColumnCount, rowHeight: rowHeight, columnWidth: columnWidth, itemRenderer: cellRenderer, headerRenderer: headerCellRenderer, selectionRenderer: selectionRenderer, gridLineColor: gridLineColor, gridLineWidth: gridLineWidth, borderStyles: finalBorderStyles, mergedCells: merges, scale: scale, width: width, height: height, frozenColumns: frozenColumns, frozenRows: frozenRows, activeCell: activeCell, selections: formulaMode ? formulaSelections : selections, FillHandle: FillHandle, showFillHandle: showFillHandle, fillHandleSize: fillHandleSize, showGridLines: showGridLines, enableCellOverlay: true, enableCellBackground: true, enableSelectionDrag: enableSelectionDrag, showFrozenColumnShadow: showFrozenSeparator, showFrozenRowShadow: showFrozenSeparator, selectionBorderColor: selectionBorderColor, selectionBackgroundColor: selectionBackgroundColor, fillhandleBorderColor: cellBackgroundColor, isDraggingSelection: isDragging, fillSelection: fillSelection, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp, onMouseDown: handleMouseDown, onDoubleClick: handleDoubleClick, onFillHandleMouseDown: onFillHandleMouseDown, onFillHandleDoubleClick: onFillHandleDoubleClick, 
+            // Dimension of fill handle
+            scrollToCellOffset: 4, scrollbarSize: scrollbarSize, isHiddenCell: isHiddenCell, isHiddenColumn: isHiddenColumn, isHiddenRow: isHiddenRow, visibleRowRanges: visibleRowRanges, isHiddenOverlay: isHiddenOverlay, isHiddenBackground: isHiddenBackground, overlayRenderer: cellOverlayRenderer, backgroundRenderer: cellBackgroundRenderer, shadowSettings: shadowSettings, onScroll: handleScroll, onViewPortChange: handleViewPortChange, autoFocus: autoFocus, snap: scrollSnap, scrollThrottleTimeout: scrollThrottleTimeout, preventBrowserDefaultScroll: preventBrowserDefaultScroll, showHeaders: showHeaders, gridChildren: gridChildren, onTouchStart: onTouchStart, onDimensionsChange: onDimensionsChange, extendScrollSize: isTouchDevice || isFirefox, isTouchDevice: isTouchDevice, frozenShadowThickness: frozenShadowThickness, onAfterScrollToCell: onAfterScrollToCell, estimatedRowHeight: defaultRowHeight, estimatedColumnWidth: defaultColumnWidth, footerHeight: footerHeight, footerComponent: footerComponent, getOverflowBuffer: getOverflowBuffer, getFrozenColumnOverflowCells: getFrozenColumnOverflowCells })),
+        tooltipComponent,
+        stickyEditor ? editorComponent : null,
+        draggableColumns,
+        draggableRows,
+        contextMenuComponent,
+        filterComponent,
+        headerResizer,
+        validatorResult,
+        React.createElement("div", { "aria-live": "polite", "aria-atomic": "true", style: {
+                position: "absolute",
+                width: 1,
+                height: 1,
+                margin: -1,
+                padding: 0,
+                overflow: "hidden",
+                clip: "rect(0, 0, 0, 0)",
+                whiteSpace: "nowrap",
+                border: 0,
+            } }, activeCellAnnouncement)));
+}
+export const CanvasGrid = memo(forwardRef(CanvasGridComponent));