@affino/datagrid-vue-app 0.1.1

package/dist/stage/useDataGridTableStageRuntime.js

@@ -0,0 +1,526 @@
+import { computed, nextTick, ref } from "vue";
+import { createDataGridAppRowHeightMetrics, useDataGridAppActiveCellViewport, useDataGridAppCellSelection, useDataGridAppClipboard, useDataGridAppHeaderResize, useDataGridAppInlineEditing, useDataGridAppInteractionController, useDataGridAppRowPresentation, useDataGridAppRowSizing, useDataGridAppViewport, useDataGridAppRuntimeSync, useDataGridAppViewportLifecycle, } from "@affino/datagrid-vue";
+import { useDataGridTableStageBindings } from "./useDataGridTableStageBindings";
+import { useDataGridTableStageCellIo } from "./useDataGridTableStageCellIo";
+import { useDataGridTableStageColumns } from "./useDataGridTableStageColumns";
+import { useDataGridTableStageFillAction } from "./useDataGridTableStageFillAction";
+import { useDataGridTableStageHistory } from "./useDataGridTableStageHistory";
+import { useDataGridTableStageRowSelection } from "./useDataGridTableStageRowSelection";
+import { useDataGridTableStageScrollSync } from "./useDataGridTableStageScrollSync";
+import { useDataGridTableStageViewportKeyboard } from "./useDataGridTableStageViewportKeyboard";
+import { useDataGridTableStageVisualSelection } from "./useDataGridTableStageVisualSelection";
+const DEFAULT_COLUMN_WIDTH = 140;
+const INDEX_COLUMN_WIDTH = 72;
+const MIN_COLUMN_WIDTH = 80;
+const MIN_ROW_HEIGHT = 24;
+const AUTO_RESIZE_SAMPLE_LIMIT = 400;
+export function useDataGridTableStageRuntime(options) {
+    const syncRowSelectionSnapshotFromRuntime = options.syncRowSelectionSnapshotFromRuntime ?? (() => undefined);
+    const rowSelectionSnapshotRef = options.rowSelectionSnapshot ?? ref(null);
+    const showRowIndex = computed(() => options.showRowIndex?.value !== false);
+    const totalBodyRows = computed(() => options.runtime.rowPartition.value.bodyRowCount);
+    const totalSelectableRows = computed(() => Math.max(0, options.totalRuntimeRows.value));
+    const effectiveIndexColumnWidth = computed(() => (showRowIndex.value ? INDEX_COLUMN_WIDTH : 0));
+    const columnService = useDataGridTableStageColumns({
+        runtime: options.runtime,
+        visibleColumns: options.visibleColumns,
+        showRowSelection: options.showRowSelection,
+        isCellEditable: options.isCellEditable,
+    });
+    const { orderedVisibleColumns, centerColumns, resolveColumnWidth, isRowSelectionColumnKey, isRowSelectionColumn, isCellEditable, isCellEditableByKey, rowSelectionColumn, } = columnService;
+    const rowHeightMetrics = createDataGridAppRowHeightMetrics({
+        totalRows: () => totalBodyRows.value,
+        resolveBaseRowHeight: () => options.normalizedBaseRowHeight.value,
+        resolveRowHeightOverride: rowIndex => options.runtime.api.view.getRowHeightOverride(rowIndex),
+        resolveRowHeightVersion: () => options.runtime.api.view.getRowHeightVersion(),
+        hasRowHeightOverrides: () => options.runtime.api.view.getRowHeightVersion() > 0,
+    });
+    let isEditingCellForSelection = () => false;
+    const { headerViewportRef, bodyViewportRef, displayRows, pinnedBottomRows, renderedColumns, viewportRowStart, viewportColumnStart, topSpacerHeight, bottomSpacerHeight, leftColumnSpacerWidth, rightColumnSpacerWidth, gridContentStyle, mainTrackStyle, indexColumnStyle, columnStyle: _viewportColumnStyle, handleViewportScroll, syncViewportFromDom, scheduleViewportSync, cancelScheduledViewportSync, } = useDataGridAppViewport({
+        runtime: options.runtime,
+        mode: options.mode,
+        rowRenderMode: options.rowRenderMode,
+        rowVirtualizationEnabled: computed(() => options.virtualization.value.rows),
+        columnVirtualizationEnabled: computed(() => options.virtualization.value.columns),
+        totalRows: totalBodyRows,
+        visibleColumns: centerColumns,
+        sizingColumns: orderedVisibleColumns,
+        normalizedBaseRowHeight: options.normalizedBaseRowHeight,
+        resolveColumnWidth,
+        defaultColumnWidth: DEFAULT_COLUMN_WIDTH,
+        indexColumnWidth: 0,
+        flexFillOffsetWidth: effectiveIndexColumnWidth.value,
+        rowOverscan: computed(() => options.virtualization.value.rowOverscan),
+        columnOverscan: computed(() => options.virtualization.value.columnOverscan),
+        measureVisibleRowHeights: () => measureVisibleRowHeights(),
+        resolveRowHeight: rowHeightMetrics.resolveRowHeight,
+        resolveRowOffset: rowHeightMetrics.resolveRowOffset,
+        resolveRowIndexAtOffset: rowHeightMetrics.resolveRowIndexAtOffset,
+        resolveTotalRowHeight: rowHeightMetrics.resolveTotalHeight,
+    });
+    const resolveStageColumnStyle = (columnKey) => {
+        return _viewportColumnStyle(columnKey);
+    };
+    const getSelectableRowAtIndex = (rowIndex) => {
+        if (totalSelectableRows.value <= 0) {
+            return null;
+        }
+        const normalizedIndex = Math.max(0, Math.min(totalSelectableRows.value - 1, Math.trunc(rowIndex)));
+        return options.runtime.api.rows.get(normalizedIndex) ?? null;
+    };
+    const resolveSelectableRowIndexById = (rowId) => {
+        for (let rowIndex = 0; rowIndex < totalSelectableRows.value; rowIndex += 1) {
+            if (options.runtime.api.rows.get(rowIndex)?.rowId === rowId) {
+                return rowIndex;
+            }
+        }
+        return options.runtime.resolveBodyRowIndexById(rowId);
+    };
+    const selectableRuntime = {
+        ...options.runtime,
+        getBodyRowAtIndex: getSelectableRowAtIndex,
+        resolveBodyRowIndexById: resolveSelectableRowIndexById,
+    };
+    const { rowStyle, isRowAutosizeProbe, measureVisibleRowHeights, startRowResize, autosizeRow, dispose: disposeRowSizing, } = useDataGridAppRowSizing({
+        mode: options.mode,
+        rowHeightMode: options.rowHeightMode,
+        normalizedBaseRowHeight: options.normalizedBaseRowHeight,
+        viewportRowStart,
+        bodyViewportRef,
+        runtime: options.runtime,
+        minRowHeight: MIN_ROW_HEIGHT,
+        syncViewport: () => syncViewportFromDom(),
+    });
+    const selectionController = useDataGridAppCellSelection({
+        mode: options.mode,
+        runtime: selectableRuntime,
+        totalRows: totalSelectableRows,
+        visibleColumns: orderedVisibleColumns,
+        viewportRowStart,
+        selectionSnapshot: options.selectionSnapshot,
+        selectionAnchor: options.selectionAnchor,
+        isEditingCell: (row, columnKey) => isEditingCellForSelection(row, columnKey),
+    });
+    const { normalizeRowId, normalizeCellCoord, resolveSelectionRange: resolveSelectionRangeForClipboard, resolveCurrentCellCoord: resolveCurrentCellCoordForClipboard, applySelectionRange: applyClipboardSelectionRange, applyCellSelectionByCoord, setCellSelection, clearCellSelection, isCellSelected: isCommittedCellSelected, } = selectionController;
+    const isCommittedSelectionAnchorCell = selectionController.isSelectionAnchorCell ?? (() => false);
+    const shouldHighlightCommittedSelectedCell = selectionController.shouldHighlightSelectedCell
+        ?? ((rowOffset, columnIndex) => isCommittedCellSelected(rowOffset, columnIndex));
+    const isCommittedCellOnSelectionEdge = selectionController.isCellOnSelectionEdge
+        ?? (() => false);
+    const selectionAnchorCell = computed(() => {
+        const snapshot = options.selectionSnapshot.value;
+        if (!snapshot || snapshot.ranges.length === 0) {
+            return null;
+        }
+        const activeIndex = snapshot.activeRangeIndex ?? 0;
+        const anchor = snapshot.ranges[activeIndex]?.anchor ?? snapshot.ranges[0]?.anchor ?? null;
+        if (!anchor
+            || typeof anchor.rowIndex !== "number"
+            || typeof anchor.colIndex !== "number"
+            || !Number.isFinite(anchor.rowIndex)
+            || !Number.isFinite(anchor.colIndex)) {
+            return null;
+        }
+        return {
+            rowIndex: Math.trunc(anchor.rowIndex),
+            columnIndex: Math.trunc(anchor.colIndex),
+        };
+    });
+    const rowSelectionService = useDataGridTableStageRowSelection({
+        runtime: options.runtime,
+        rowSelectionColumn,
+        orderedVisibleColumns,
+        displayRows,
+        rowSelectionSnapshot: rowSelectionSnapshotRef,
+        viewportRowStart,
+        selectionAnchorCell,
+        applySelectionRange: applyClipboardSelectionRange,
+    });
+    const { readRowSelectionCell, readRowSelectionDisplayCell, toggleRowCheckboxSelected, } = rowSelectionService;
+    const stageIndexColumnStyle = computed(() => {
+        const width = `${effectiveIndexColumnWidth.value}px`;
+        return {
+            ...indexColumnStyle.value,
+            width,
+            minWidth: width,
+            maxWidth: width,
+        };
+    });
+    const historyService = useDataGridTableStageHistory({
+        runtime: options.runtime,
+        cloneRowData: options.cloneRowData,
+        syncViewport: () => syncViewportFromDom(),
+        history: options.history,
+    });
+    const { captureHistorySnapshot, recordHistoryIntentTransaction, canUndoHistory, canRedoHistory, runHistoryAction, } = historyService;
+    const { rowIndexLabel, readCell, readDisplayCell, rowClass, toggleGroupRow, } = useDataGridAppRowPresentation({
+        mode: options.mode,
+        runtime: options.runtime,
+        viewportRowStart,
+        firstColumnKey: options.firstColumnKey,
+    });
+    const cellIoService = useDataGridTableStageCellIo({
+        runtime: options.runtime,
+        viewportRowStart,
+        isRowSelectionColumnKey,
+        isRowSelectionColumn,
+        isCellEditableByKey,
+        readRowSelectionCell,
+        readRowSelectionDisplayCell,
+        readCell,
+        readDisplayCell,
+        toggleRowCheckboxSelected,
+        captureHistorySnapshot,
+        recordHistoryIntentTransaction,
+        syncViewport: () => syncViewportFromDom(),
+    });
+    const { readStageCell, } = cellIoService;
+    const clipboard = useDataGridAppClipboard({
+        mode: options.mode,
+        runtime: selectableRuntime,
+        totalRows: totalSelectableRows,
+        visibleColumns: orderedVisibleColumns,
+        viewportRowStart,
+        resolveSelectionRange: resolveSelectionRangeForClipboard,
+        resolveCurrentCellCoord: resolveCurrentCellCoordForClipboard,
+        applySelectionRange: applyClipboardSelectionRange,
+        clearCellSelection,
+        captureRowsSnapshot: captureHistorySnapshot,
+        recordEditTransaction: beforeSnapshot => {
+            recordHistoryIntentTransaction({
+                intent: "edit",
+                label: "Cell edit",
+            }, beforeSnapshot);
+        },
+        readCell: (row, columnKey) => readStageCell(row, columnKey),
+        readClipboardCell: options.readClipboardCell
+            ? (row, columnKey) => options.readClipboardCell?.(row, columnKey) ?? ""
+            : undefined,
+        isCellEditable: isCellEditableByKey,
+        syncViewport: () => syncViewportFromDom(),
+        applyClipboardEdits: options.applyClipboardEdits,
+        buildFillMatrixFromRange: options.buildFillMatrixFromRange,
+    });
+    const { normalizeClipboardRange, applyClipboardEdits, rangesEqual, buildFillMatrixFromRange, clearPendingClipboardOperation, copySelectedCells, pasteSelectedCells, cutSelectedCells, isCellInPendingClipboardRange, isCellOnPendingClipboardEdge, } = clipboard;
+    const { ensureKeyboardActiveCellVisible, } = useDataGridAppActiveCellViewport({
+        bodyViewportRef,
+        visibleColumns: orderedVisibleColumns,
+        resolveColumnWidth,
+        normalizedBaseRowHeight: options.normalizedBaseRowHeight,
+        resolveRowHeight: rowHeightMetrics.resolveRowHeight,
+        resolveRowOffset: rowHeightMetrics.resolveRowOffset,
+        indexColumnWidth: effectiveIndexColumnWidth.value,
+        defaultColumnWidth: DEFAULT_COLUMN_WIDTH,
+        syncViewport: () => syncViewportFromDom(),
+    });
+    const { editingCell, editingCellValue, editingCellInitialFilter, editingCellOpenOnMount, isEditingCell, startInlineEdit, commitInlineEdit, cancelInlineEdit, handleEditorKeydown, } = useDataGridAppInlineEditing({
+        mode: options.mode,
+        bodyViewportRef,
+        visibleColumns: orderedVisibleColumns,
+        totalRows: totalSelectableRows,
+        runtime: selectableRuntime,
+        readCell: (row, columnKey) => readStageCell(row, columnKey),
+        resolveRowIndexById: resolveSelectableRowIndexById,
+        applyCellSelection: coord => {
+            applyCellSelectionByCoord(coord, false);
+        },
+        ensureActiveCellVisible: (rowIndex, columnIndex) => {
+            ensureKeyboardActiveCellVisible(rowIndex, columnIndex);
+        },
+        isCellEditable: isCellEditableByKey,
+        captureRowsSnapshot: captureHistorySnapshot,
+        recordEditTransaction: beforeSnapshot => {
+            recordHistoryIntentTransaction({
+                intent: "edit",
+                label: "Cell edit",
+            }, beforeSnapshot);
+        },
+    });
+    isEditingCellForSelection = isEditingCell;
+    const editingCellRef = computed(() => editingCell.value);
+    const interactionControllerOptions = {
+        mode: options.mode,
+        runtime: selectableRuntime,
+        totalRows: totalSelectableRows,
+        visibleColumns: orderedVisibleColumns,
+        viewportRowStart,
+        selectionSnapshot: options.selectionSnapshot,
+        bodyViewportRef,
+        indexColumnWidth: effectiveIndexColumnWidth.value,
+        resolveColumnWidth,
+        resolveRowHeight: rowHeightMetrics.resolveRowHeight,
+        resolveRowIndexAtOffset: rowHeightMetrics.resolveRowIndexAtOffset,
+        normalizeRowId,
+        normalizeCellCoord,
+        resolveSelectionRange: resolveSelectionRangeForClipboard,
+        applySelectionRange: applyClipboardSelectionRange,
+        applyCellSelectionByCoord,
+        setCellSelection,
+        clearCellSelection,
+        readCell: (row, columnKey) => readStageCell(row, columnKey),
+        isCellEditable: isCellEditableByKey,
+        cloneRowData: options.cloneRowData,
+        resolveRowIndexById: resolveSelectableRowIndexById,
+        captureRowsSnapshot: captureHistorySnapshot,
+        recordIntentTransaction: (descriptor, beforeSnapshot) => {
+            recordHistoryIntentTransaction(descriptor, beforeSnapshot);
+        },
+        clearPendingClipboardOperation,
+        clearExternalPendingClipboardOperation: options.clearExternalPendingClipboardOperation,
+        copySelectedCells,
+        pasteSelectedCells,
+        cutSelectedCells,
+        normalizeClipboardRange,
+        applyClipboardEdits,
+        rangesEqual,
+        buildFillMatrixFromRange,
+        applyRangeMove: options.applyRangeMove,
+        syncViewport: () => syncViewportFromDom(),
+        editingCell: editingCellRef,
+        startInlineEdit,
+        commitInlineEdit,
+        canUndo: canUndoHistory,
+        canRedo: canRedoHistory,
+        runHistoryAction,
+        ensureKeyboardActiveCellVisible,
+        isContextMenuVisible: options.isContextMenuVisible,
+        closeContextMenu: options.closeContextMenu,
+        openContextMenuFromCurrentCell: options.openContextMenuFromCurrentCell,
+        runRowIndexKeyboardAction: options.runRowIndexKeyboardAction,
+        handleToggleCellAction: (row, rowIndex, columnIndex, column) => {
+            if (!isRowSelectionColumn(column)) {
+                return false;
+            }
+            void rowIndex;
+            void columnIndex;
+            toggleRowCheckboxSelected(row);
+            return true;
+        },
+    };
+    const interactionController = (useDataGridAppInteractionController(interactionControllerOptions));
+    const { isPointerSelectingCells, isFillDragging, fillPreviewRange, lastAppliedFill, isRangeMoving, selectionRange: interactionSelectionRange, rangeMovePreviewRange, stopPointerSelection, stopFillSelection, startFillHandleDrag, startFillHandleDoubleClick, applyLastFillBehavior, handleCellMouseDown, handleCellKeydown, handleRowIndexKeydown, handleWindowMouseMove: handleInteractionWindowMouseMove, handleWindowMouseUp: handleInteractionWindowMouseUp, isCellInFillPreview, isFillHandleCell, clearSelectedCells, dispose: disposeInteractionController, } = interactionController;
+    const viewportKeyboardService = useDataGridTableStageViewportKeyboard({
+        runtime: selectableRuntime,
+        selectionSnapshot: options.selectionSnapshot,
+        totalRows: totalSelectableRows,
+        orderedVisibleColumns,
+        viewportRowStart,
+        applySelectionRange: applyClipboardSelectionRange,
+        handleCellKeydown,
+    });
+    const { isColumnResizing, startResize, handleResizeDoubleClick, applyColumnResizeFromPointer, stopColumnResize, dispose: disposeHeaderResize, } = useDataGridAppHeaderResize({
+        visibleColumns: orderedVisibleColumns,
+        rows: options.rows,
+        persistColumnWidth: (columnKey, width) => {
+            options.runtime.api.columns.setWidth(columnKey, width);
+        },
+        defaultColumnWidth: DEFAULT_COLUMN_WIDTH,
+        minColumnWidth: MIN_COLUMN_WIDTH,
+        autoSizeSampleLimit: AUTO_RESIZE_SAMPLE_LIMIT,
+        autoSizeCharWidth: 7.2,
+        autoSizeHorizontalPadding: 42,
+        autoSizeMaxWidth: 640,
+        isFillDragging: () => isFillDragging.value,
+        stopFillSelection: () => {
+            stopFillSelection(false);
+        },
+        isDragSelecting: () => isPointerSelectingCells.value,
+        stopDragSelection: () => {
+            stopPointerSelection();
+        },
+        readCellText: (row, columnKey) => {
+            const value = row[columnKey];
+            return value == null ? "" : String(value);
+        },
+    });
+    const visualSelectionService = useDataGridTableStageVisualSelection({
+        mode: options.mode,
+        viewportRowStart,
+        selectionAnchorCell,
+        fillPreviewRange,
+        isFillDragging,
+        interactionSelectionRange,
+        resolveCommittedSelectionRange: resolveSelectionRangeForClipboard,
+        isCommittedSelectionAnchorCell,
+        isCommittedCellSelected,
+        shouldHighlightCommittedSelectedCell,
+        isCommittedCellOnSelectionEdge,
+    });
+    const { selectionRange } = visualSelectionService;
+    const fillActionService = useDataGridTableStageFillAction({
+        lastAppliedFill,
+        selectionRange,
+        isFillDragging,
+    });
+    const scrollSyncService = useDataGridTableStageScrollSync({
+        bodyViewportRef,
+        isColumnResizing,
+        applyColumnResizeFromPointer,
+        stopColumnResize,
+        handleInteractionWindowMouseMove,
+        handleInteractionWindowMouseUp,
+        syncViewport: syncViewportFromDom,
+    });
+    const stageServices = {
+        columns: columnService,
+        rowSelection: rowSelectionService,
+        history: historyService,
+        cellIo: cellIoService,
+        viewportKeyboard: viewportKeyboardService,
+        visualSelection: visualSelectionService,
+        fillAction: fillActionService,
+        scrollSync: scrollSyncService,
+    };
+    const { tableStageProps, tableStageContext, } = useDataGridTableStageBindings({
+        mode: options.mode,
+        rowHeightMode: options.rowHeightMode,
+        visibleColumns: orderedVisibleColumns,
+        renderedColumns,
+        displayRows,
+        pinnedBottomRows,
+        sourceRows: options.sourceRows ?? options.rows,
+        showRowIndex,
+        rowHover: computed(() => options.rowHover?.value === true),
+        stripedRows: computed(() => options.stripedRows?.value === true),
+        columnFilterTextByKey: options.columnFilterTextByKey,
+        gridContentStyle,
+        mainTrackStyle,
+        indexColumnStyle: stageIndexColumnStyle,
+        topSpacerHeight,
+        bottomSpacerHeight,
+        viewportRowStart,
+        columnWindowStart: viewportColumnStart,
+        leftColumnSpacerWidth,
+        rightColumnSpacerWidth,
+        editingCellValueRef: editingCellValue,
+        editingCellInitialFilter,
+        editingCellOpenOnMount,
+        selectionRange,
+        selectionAnchorCell,
+        fillPreviewRange,
+        rangeMovePreviewRange,
+        isFillDragging,
+        isRangeMoving,
+        headerViewportRef,
+        bodyViewportRef,
+        columnStyle: resolveStageColumnStyle,
+        toggleSortForColumn: options.toggleSortForColumn,
+        sortIndicator: options.sortIndicator,
+        setColumnFilterText: options.setColumnFilterText,
+        columnMenuEnabled: options.columnMenuEnabled,
+        columnMenuValueFilterEnabled: options.columnMenuValueFilterEnabled,
+        columnMenuValueFilterRowLimit: options.columnMenuValueFilterRowLimit,
+        columnMenuMaxFilterValues: options.columnMenuMaxFilterValues,
+        resolveColumnMenuItems: options.resolveColumnMenuItems,
+        resolveColumnMenuDisabledItems: options.resolveColumnMenuDisabledItems,
+        resolveColumnMenuDisabledReasons: options.resolveColumnMenuDisabledReasons,
+        resolveColumnMenuLabels: options.resolveColumnMenuLabels,
+        resolveColumnMenuActionOptions: options.resolveColumnMenuActionOptions,
+        isColumnFilterActive: options.isColumnFilterActive,
+        isColumnGrouped: options.isColumnGrouped,
+        resolveColumnGroupOrder: options.resolveColumnGroupOrder,
+        resolveColumnMenuSortDirection: options.resolveColumnMenuSortDirection,
+        resolveColumnMenuSelectedTokens: options.resolveColumnMenuSelectedTokens,
+        applyColumnMenuSort: options.applyColumnMenuSort,
+        applyColumnMenuPin: options.applyColumnMenuPin,
+        applyColumnMenuGroupBy: options.applyColumnMenuGroupBy,
+        applyColumnMenuFilter: options.applyColumnMenuFilter,
+        clearColumnMenuFilter: options.clearColumnMenuFilter,
+        handleHeaderWheel: stageServices.scrollSync.handleHeaderWheel,
+        handleHeaderScroll: stageServices.scrollSync.handleHeaderScroll,
+        handleViewportScroll,
+        handleViewportKeydown: stageServices.viewportKeyboard.handleViewportKeydown,
+        rowClass,
+        isRowAutosizeProbe,
+        rowStyle,
+        isRowInPendingClipboardCut: options.isRowInPendingClipboardCut,
+        isRowFocused: stageServices.rowSelection.isRowFocused,
+        isRowCheckboxSelected: stageServices.rowSelection.isRowCheckboxSelected,
+        allVisibleRowsSelected: stageServices.rowSelection.areAllVisibleRowsSelected,
+        someVisibleRowsSelected: stageServices.rowSelection.areSomeVisibleRowsSelected,
+        handleRowClick: stageServices.rowSelection.focusRow,
+        handleRowIndexClick: stageServices.rowSelection.selectRowRange,
+        handleRowIndexKeydown,
+        handleToggleAllVisibleRows: stageServices.rowSelection.toggleVisibleRowsSelected,
+        toggleGroupRow,
+        rowIndexLabel,
+        startResize,
+        handleResizeDoubleClick,
+        startRowResize,
+        autosizeRow,
+        isCellSelected: stageServices.visualSelection.isCellSelected,
+        isSelectionAnchorCell: stageServices.visualSelection.isSelectionAnchorCell,
+        shouldHighlightSelectedCell: stageServices.visualSelection.shouldHighlightSelectedCell,
+        isCellOnSelectionEdge: stageServices.visualSelection.isCellOnSelectionEdge,
+        isCellInFillPreview,
+        isCellInPendingClipboardRange,
+        isCellOnPendingClipboardEdge,
+        isEditingCell,
+        isCellEditable: (row, rowOffset, column, columnIndex) => {
+            void columnIndex;
+            return isCellEditable(row, viewportRowStart.value + rowOffset, column);
+        },
+        handleCellMouseDown,
+        handleCellClick: stageServices.cellIo.handleCellClick,
+        handleCellKeydown,
+        startInlineEdit,
+        isFillHandleCell,
+        startFillHandleDrag,
+        startFillHandleDoubleClick,
+        fillActionAnchorCell: stageServices.fillAction.fillActionAnchorCell,
+        fillActionBehavior: stageServices.fillAction.fillActionBehavior,
+        applyFillActionBehavior: applyLastFillBehavior,
+        handleEditorKeydown,
+        commitInlineEdit,
+        cancelInlineEdit,
+        readCell: stageServices.cellIo.readStageCell,
+        readDisplayCell: stageServices.cellIo.readStageDisplayCell,
+    });
+    useDataGridAppRuntimeSync({
+        mode: options.mode,
+        rows: options.rows,
+        runtime: options.runtime,
+        totalRows: totalBodyRows,
+        rowVersion: options.rowVersion,
+        rowHeightMode: options.rowHeightMode,
+        normalizedBaseRowHeight: options.normalizedBaseRowHeight,
+        syncSelectionSnapshotFromRuntime: options.syncSelectionSnapshotFromRuntime,
+        syncRowSelectionSnapshotFromRuntime,
+        syncViewport: syncViewportFromDom,
+        scheduleViewportSync,
+        measureVisibleRowHeights,
+        applyRowHeightSettings: options.applyRowHeightSettings,
+    });
+    useDataGridAppViewportLifecycle({
+        bodyViewportRef,
+        syncViewport: syncViewportFromDom,
+        handleWindowMouseMove: stageServices.scrollSync.handleWindowMouseMove,
+        handleWindowMouseUp: stageServices.scrollSync.handleWindowMouseUp,
+        cancelScheduledViewportSync,
+        onAfterMount: () => {
+            options.syncSelectionSnapshotFromRuntime();
+            syncRowSelectionSnapshotFromRuntime();
+            void nextTick(() => {
+                options.applyRowHeightSettings();
+                syncViewportFromDom();
+            });
+        },
+        dispose: [
+            disposeRowSizing,
+            disposeHeaderResize,
+            disposeInteractionController,
+            stageServices.history.disposeIntentHistory,
+        ],
+    });
+    return {
+        tableStageProps,
+        tableStageContext,
+        syncViewportFromDom,
+        copySelectedCells,
+        pasteSelectedCells,
+        cutSelectedCells,
+        clearSelectedCells,
+        captureHistorySnapshot,
+        recordHistoryIntentTransaction,
+    };
+}

package/dist/stage/useDataGridTableStageScrollSync.d.ts

@@ -0,0 +1,17 @@
+import type { Ref } from "vue";
+export interface UseDataGridTableStageScrollSyncOptions {
+    bodyViewportRef: Ref<HTMLElement | null>;
+    isColumnResizing: Ref<boolean>;
+    applyColumnResizeFromPointer: (clientX: number) => void;
+    stopColumnResize: () => void;
+    handleInteractionWindowMouseMove: (event: MouseEvent) => void;
+    handleInteractionWindowMouseUp: () => void;
+    syncViewport: () => void;
+}
+export interface UseDataGridTableStageScrollSyncResult {
+    handleWindowMouseMove: (event: MouseEvent) => void;
+    handleHeaderWheel: (event: WheelEvent) => void;
+    handleHeaderScroll: (event: Event) => void;
+    handleWindowMouseUp: () => void;
+}
+export declare function useDataGridTableStageScrollSync(options: UseDataGridTableStageScrollSyncOptions): UseDataGridTableStageScrollSyncResult;

package/dist/stage/useDataGridTableStageScrollSync.js

@@ -0,0 +1,49 @@
+export function useDataGridTableStageScrollSync(options) {
+    const handleWindowMouseMove = (event) => {
+        if (options.isColumnResizing.value) {
+            options.applyColumnResizeFromPointer(event.clientX);
+            return;
+        }
+        options.handleInteractionWindowMouseMove(event);
+    };
+    const handleHeaderWheel = (event) => {
+        const bodyViewport = options.bodyViewportRef.value;
+        if (!bodyViewport) {
+            return;
+        }
+        const horizontalDelta = Math.abs(event.deltaX) > 0 ? event.deltaX : (event.shiftKey ? event.deltaY : 0);
+        const verticalDelta = horizontalDelta === 0 ? event.deltaY : 0;
+        if (horizontalDelta === 0 && verticalDelta === 0) {
+            return;
+        }
+        event.preventDefault();
+        if (horizontalDelta !== 0) {
+            bodyViewport.scrollLeft += horizontalDelta;
+        }
+        if (verticalDelta !== 0) {
+            bodyViewport.scrollTop += verticalDelta;
+        }
+        options.syncViewport();
+    };
+    const handleHeaderScroll = (event) => {
+        const headerViewport = event.target;
+        const bodyViewport = options.bodyViewportRef.value;
+        if (!headerViewport || !bodyViewport) {
+            return;
+        }
+        if (bodyViewport.scrollLeft !== headerViewport.scrollLeft) {
+            bodyViewport.scrollLeft = headerViewport.scrollLeft;
+        }
+        options.syncViewport();
+    };
+    const handleWindowMouseUp = () => {
+        options.stopColumnResize();
+        options.handleInteractionWindowMouseUp();
+    };
+    return {
+        handleWindowMouseMove,
+        handleHeaderWheel,
+        handleHeaderScroll,
+        handleWindowMouseUp,
+    };
+}

package/dist/stage/useDataGridTableStageViewportKeyboard.d.ts

@@ -0,0 +1,20 @@
+import type { ComputedRef, Ref } from "vue";
+import type { DataGridColumnSnapshot, DataGridSelectionSnapshot } from "@affino/datagrid-vue";
+export interface UseDataGridTableStageViewportKeyboardOptions<TRow extends Record<string, unknown>> {
+    runtime: Pick<import("@affino/datagrid-vue").UseDataGridRuntimeResult<TRow>, "getBodyRowAtIndex">;
+    selectionSnapshot: Ref<DataGridSelectionSnapshot | null>;
+    totalRows: Ref<number>;
+    orderedVisibleColumns: ComputedRef<readonly DataGridColumnSnapshot[]>;
+    viewportRowStart: Ref<number>;
+    applySelectionRange: (range: {
+        startRow: number;
+        endRow: number;
+        startColumn: number;
+        endColumn: number;
+    }) => void;
+    handleCellKeydown: (event: KeyboardEvent, row: import("@affino/datagrid-vue").DataGridRowNode<TRow>, rowOffset: number, columnIndex: number) => void;
+}
+export interface UseDataGridTableStageViewportKeyboardResult {
+    handleViewportKeydown: (event: KeyboardEvent) => void;
+}
+export declare function useDataGridTableStageViewportKeyboard<TRow extends Record<string, unknown>>(options: UseDataGridTableStageViewportKeyboardOptions<TRow>): UseDataGridTableStageViewportKeyboardResult;

package/dist/stage/useDataGridTableStageViewportKeyboard.js

@@ -0,0 +1,58 @@
+export function useDataGridTableStageViewportKeyboard(options) {
+    const isViewportOwnedKeyboardEvent = (event) => {
+        if (event.ctrlKey || event.metaKey || event.altKey) {
+            return false;
+        }
+        return (event.key.startsWith("Arrow")
+            || event.key === "Home"
+            || event.key === "End"
+            || event.key === "PageUp"
+            || event.key === "PageDown"
+            || event.key === "Tab"
+            || event.key === "Enter"
+            || event.key === " "
+            || event.key === "Spacebar"
+            || event.key === "F2"
+            || event.key === "Escape"
+            || event.key.length === 1);
+    };
+    const isViewportSelectAllKeyboardEvent = (event) => {
+        return (event.ctrlKey || event.metaKey)
+            && !event.altKey
+            && !event.shiftKey
+            && event.key.toLowerCase() === "a";
+    };
+    const selectAllVisibleCells = () => {
+        const lastRowIndex = options.totalRows.value - 1;
+        const lastColumnIndex = options.orderedVisibleColumns.value.length - 1;
+        if (lastRowIndex < 0 || lastColumnIndex < 0) {
+            return;
+        }
+        options.applySelectionRange({
+            startRow: 0,
+            endRow: lastRowIndex,
+            startColumn: 0,
+            endColumn: lastColumnIndex,
+        });
+    };
+    const handleViewportKeydown = (event) => {
+        if (isViewportOwnedKeyboardEvent(event) || isViewportSelectAllKeyboardEvent(event)) {
+            event.preventDefault();
+        }
+        const activeCell = options.selectionSnapshot.value?.activeCell;
+        if (!activeCell) {
+            if (isViewportSelectAllKeyboardEvent(event)) {
+                selectAllVisibleCells();
+            }
+            return;
+        }
+        const row = options.runtime.getBodyRowAtIndex(activeCell.rowIndex);
+        if (!row) {
+            return;
+        }
+        options.handleCellKeydown(event, row, activeCell.rowIndex - options.viewportRowStart.value, activeCell.colIndex);
+    };
+    return {
+        handleViewportKeydown,
+    };
+}