@1771technologies/lytenyte-pro 1.0.12-dev.1 → 1.0.12-dev.3

package/dist/+types.js

@@ -0,0 +1 @@
+export {};

package/dist/cell-selection/adjust-rect-for-row-and-cell-span.d.ts

@@ -0,0 +1,2 @@
+import type { DataRect, Grid } from "../+types.js";
+export declare function adjustRectForRowAndCellSpan<T>(grid: Grid<T>, rect: DataRect): DataRect;

package/dist/cell-selection/adjust-rect-for-row-and-cell-span.js

@@ -0,0 +1,43 @@
+import { getRootCell } from "./get-root-cell.js";
+export function adjustRectForRowAndCellSpan(grid, rect) {
+    let { rowStart, rowEnd, columnStart, columnEnd } = rect;
+    // Check the top row of the rect.
+    for (let i = columnStart; i < columnEnd; i++) {
+        let cell = getRootCell(grid, rowStart, i);
+        if (cell) {
+            columnStart = Math.min(columnStart, cell.colIndex);
+            columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);
+            rowStart = Math.min(rowStart, cell.rowIndex);
+            rowEnd = Math.max(rowEnd, cell.rowIndex + cell.rowSpan);
+        }
+        cell = getRootCell(grid, rowEnd - 1, i);
+        if (cell) {
+            columnStart = Math.min(columnStart, cell.colIndex);
+            columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);
+            rowStart = Math.min(rowStart, cell.rowIndex);
+            rowEnd = Math.max(rowEnd, cell.rowIndex + cell.rowSpan);
+        }
+    }
+    for (let i = rowStart; i < rowEnd; i++) {
+        let cell = getRootCell(grid, i, columnStart);
+        if (cell) {
+            columnStart = Math.min(columnStart, cell.colIndex);
+            columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);
+            rowStart = Math.min(rowStart, cell.rowIndex);
+            rowEnd = Math.max(rowEnd, cell.rowIndex + cell.rowSpan);
+        }
+        cell = getRootCell(grid, i, columnEnd - 1);
+        if (cell) {
+            columnStart = Math.min(columnStart, cell.colIndex);
+            columnEnd = Math.max(columnEnd, cell.colIndex + cell.colSpan);
+            rowStart = Math.min(rowStart, cell.rowIndex);
+            rowEnd = Math.max(rowEnd, cell.rowIndex + cell.rowSpan);
+        }
+    }
+    return {
+        rowStart,
+        rowEnd,
+        columnStart,
+        columnEnd,
+    };
+}

package/dist/cell-selection/are-rects-equal.d.ts

@@ -0,0 +1,2 @@
+import type { DataRect } from "../+types.js";
+export declare function areRectsEqual(left: DataRect, right: DataRect): boolean;

package/dist/cell-selection/are-rects-equal.js

@@ -0,0 +1,6 @@
+export function areRectsEqual(left, right) {
+    return (left.rowStart === right.rowStart &&
+        left.rowEnd === right.rowEnd &&
+        left.columnStart === right.columnStart &&
+        left.columnEnd === right.columnEnd);
+}

package/dist/cell-selection/bound-selection-rect.d.ts

@@ -0,0 +1,2 @@
+import type { DataRect, Grid } from "../+types.js";
+export declare function boundSelectionRect(grid: Grid<any>, rect: DataRect): DataRect;

package/dist/cell-selection/bound-selection-rect.js

@@ -0,0 +1,17 @@
+import { clamp } from "@1771technologies/lytenyte-js-utils";
+export function boundSelectionRect(grid, rect) {
+    const rowCount = grid.state.rowDataStore.rowCount.get();
+    const maxRow = rowCount;
+    const minRow = 0;
+    const maxColumn = grid.state.columnMeta.get().columnsVisible.length;
+    const minColumn = 0;
+    const rowStartMaybe = clamp(minRow, rect.rowStart, maxRow);
+    const rowEndMaybe = clamp(minRow, rect.rowEnd, maxRow);
+    const colStartMaybe = clamp(minColumn, rect.columnStart, maxColumn);
+    const colEndMaybe = clamp(minColumn, rect.columnEnd, maxColumn);
+    const rowStart = Math.min(rowStartMaybe, rowEndMaybe);
+    const rowEnd = Math.max(rowStartMaybe, rowEndMaybe);
+    const columnStart = Math.min(colStartMaybe, colEndMaybe);
+    const columnEnd = Math.max(colStartMaybe, colEndMaybe);
+    return { rowStart, rowEnd, columnStart, columnEnd };
+}

package/dist/cell-selection/cell-selection-containers.d.ts

@@ -0,0 +1,3 @@
+export declare const CellSelectionTop: import("react").NamedExoticComponent<object>;
+export declare const CellSelectionCenter: import("react").NamedExoticComponent<object>;
+export declare const CellSelectionBottom: import("react").NamedExoticComponent<object>;

package/dist/cell-selection/cell-selection-containers.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { CellStyleRow } from "./cell-style-row.js";
+import { useGridRoot } from "../context.js";
+import { isTopRect } from "./is-top-rect.js";
+import { isCenterRect } from "./is-center-rect.js";
+import { isBottomRect } from "./is-bottom-rect.js";
+export const CellSelectionTop = memo(function CellSelectionTop() {
+    const cx = useGridRoot();
+    const allRects = cx.grid.internal.cellSelectionSplits.useValue();
+    const topRects = useMemo(() => {
+        return allRects.filter((rect) => isTopRect(cx.grid, rect));
+    }, [allRects, cx.grid]);
+    const mode = cx.grid.state.cellSelectionMode.useValue();
+    const showPivot = mode === "multi-range" || mode === "range";
+    const additive = cx.grid.internal.cellSelectionAdditiveRects.useValue();
+    const isDeselect = cx.grid.internal.cellSelectionIsDeselect.useValue();
+    const pivot = cx.grid.internal.cellSelectionPivot.useValue();
+    const additiveRects = useMemo(() => {
+        if (!additive)
+            return [];
+        return additive.filter((rect) => isTopRect(cx.grid, rect));
+    }, [additive, cx.grid]);
+    return (_jsxs("div", { role: "presentation", style: {
+            width: "100%",
+            height: 0,
+            display: "grid",
+            gridTemplateRows: "0px",
+            gridTemplateColumns: "0px",
+        }, children: [topRects.map((rect, i) => {
+                return _jsx(CellStyleRow, { rect: rect, isRowPinnedTop: true }, i);
+            }), additiveRects.map((rect) => {
+                return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
+            }), showPivot && pivot && isTopRect(cx.grid, pivot) && (_jsx(CellStyleRow, { rect: pivot, isPivot: true, isRowPinnedTop: true }))] }));
+});
+export const CellSelectionCenter = memo(function CellSelectionCenter() {
+    const cx = useGridRoot();
+    const allRects = cx.grid.internal.cellSelectionSplits.useValue();
+    const pivot = cx.grid.internal.cellSelectionPivot.useValue();
+    const centerRects = useMemo(() => {
+        return allRects.filter((rect) => isCenterRect(cx.grid, rect));
+    }, [allRects, cx.grid]);
+    const additive = cx.grid.internal.cellSelectionAdditiveRects.useValue();
+    const isDeselect = cx.grid.internal.cellSelectionIsDeselect.useValue();
+    const additiveRects = useMemo(() => {
+        if (!additive)
+            return [];
+        return additive.filter((rect) => isCenterRect(cx.grid, rect));
+    }, [additive, cx.grid]);
+    const mode = cx.grid.state.cellSelectionMode.useValue();
+    const showPivot = mode === "multi-range" || mode === "range";
+    return (_jsxs("div", { role: "presentation", style: {
+            width: "100%",
+            height: 0,
+            display: "grid",
+            gridTemplateRows: "0px",
+            gridTemplateColumns: "0px",
+        }, children: [centerRects.map((rect, i) => {
+                return _jsx(CellStyleRow, { rect: rect }, i);
+            }), additiveRects.map((rect) => {
+                return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
+            }), showPivot && pivot && isCenterRect(cx.grid, pivot) && _jsx(CellStyleRow, { rect: pivot, isPivot: true })] }));
+});
+export const CellSelectionBottom = memo(function CellSelectionBottom() {
+    const cx = useGridRoot();
+    const allRects = cx.grid.internal.cellSelectionSplits.useValue();
+    const pivot = cx.grid.internal.cellSelectionPivot.useValue();
+    const bottomRects = useMemo(() => {
+        return allRects.filter((rect) => isBottomRect(cx.grid, rect));
+    }, [allRects, cx.grid]);
+    const additive = cx.grid.internal.cellSelectionAdditiveRects.useValue();
+    const isDeselect = cx.grid.internal.cellSelectionIsDeselect.useValue();
+    const additiveRects = useMemo(() => {
+        if (!additive)
+            return [];
+        return additive.filter((rect) => isBottomRect(cx.grid, rect));
+    }, [additive, cx.grid]);
+    const mode = cx.grid.state.cellSelectionMode.useValue();
+    const showPivot = mode === "multi-range" || mode === "range";
+    return (_jsxs("div", { role: "presentation", style: {
+            width: "100%",
+            height: 0,
+            display: "grid",
+            gridTemplateRows: "0px",
+            gridTemplateColumns: "0px",
+        }, children: [bottomRects.map((rect, i) => {
+                return _jsx(CellStyleRow, { rect: rect, isRowPinnedBottom: true }, i);
+            }), additiveRects.map((rect) => {
+                return _jsx(CellStyleRow, { rect: rect, isDeselect: isDeselect }, rect.columnStart);
+            }), showPivot && pivot && isBottomRect(cx.grid, pivot) && (_jsx(CellStyleRow, { rect: pivot, isPivot: true, isRowPinnedBottom: true }))] }));
+});

package/dist/cell-selection/cell-selection-driver.d.ts

@@ -0,0 +1 @@
+export declare function CellSelectionDriver(): import("react/jsx-runtime").JSX.Element;

package/dist/cell-selection/cell-selection-driver.js

@@ -0,0 +1,285 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useGridRoot } from "../context.js";
+import { useEdgeScroll } from "./use-edge-scroll.js";
+import { equal, getClientX, getClientY, getRelativeXPosition, getRelativeYPosition, } from "@1771technologies/lytenyte-js-utils";
+import { getNearestFocusable, getPositionFromFocusable } from "@1771technologies/lytenyte-shared";
+import { isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
+import { updateAdditiveCellSelection } from "./update-additive-cell-selection.js";
+import { deselectRectRange } from "./deselect-rect-range.js";
+import { isWithinSelectionRect } from "./is-within-selection-rect.js";
+import { expandCellSelectionStart } from "./expand-cell-selection-start.js";
+import { expandCellSelectionEnd } from "./expand-cell-selection-end.js";
+import { expandCellSelectionDown } from "./expand-cell-selection-down.js";
+import { expandCellSelectionUp } from "./expand-cell-selection-up.js";
+function isNormalClick(event) {
+    return event.button === 0 && !event.altKey;
+}
+export function CellSelectionDriver() {
+    const cx = useGridRoot();
+    const grid = cx.grid;
+    const viewport = cx.grid.state.viewport.useValue();
+    const mode = cx.grid.state.cellSelectionMode.useValue();
+    const { cancelX, cancelY, edgeScrollX, edgeScrollY } = useEdgeScroll(cx.grid);
+    useEffect(() => {
+        if (!viewport || mode === "none")
+            return;
+        const isMultiRange = mode === "multi-range";
+        let isAdditive = false;
+        let startSelection = null;
+        let pointerStartX = 0;
+        let pointerStartY = 0;
+        let lastRect = null;
+        let animFrame = null;
+        const pointerMove = (event) => {
+            if (animFrame)
+                cancelAnimationFrame(animFrame);
+            animFrame = requestAnimationFrame(() => {
+                animFrame = null;
+                const clientX = getClientX(event);
+                const clientY = getClientY(event);
+                const target = event.target;
+                if (!isHTMLElement(target))
+                    return;
+                const focusable = getNearestFocusable(target);
+                if (!focusable)
+                    return;
+                const position = getPositionFromFocusable(focusable);
+                if (position.kind !== "cell" && position.kind !== "full-width")
+                    return;
+                const rowIndex = position.rowIndex;
+                const columnIndex = position.colIndex;
+                if (pointerStartX != null && pointerStartY != null) {
+                    const moveDeltaX = Math.abs(pointerStartX - clientX);
+                    const moveDeltaY = Math.abs(pointerStartY - clientY);
+                    if (moveDeltaX < 20 && moveDeltaY < 20)
+                        return;
+                    pointerStartX = null;
+                    pointerStartY = null;
+                }
+                if (!startSelection)
+                    return;
+                const meta = grid.state.columnMeta.get();
+                const startCount = meta.columnVisibleStartCount;
+                const firstEnd = meta.columnVisibleCenterCount + startCount;
+                const ds = grid.state.rowDataStore;
+                const topCount = ds.rowTopCount.get();
+                const centerCount = ds.rowCenterCount.get();
+                const firstEndRow = centerCount + topCount;
+                const relativeX = getRelativeXPosition(viewport, clientX);
+                const isRtl = grid.state.rtl.get();
+                const visualX = isRtl ? relativeX.right : relativeX.left;
+                const startColSection = startSelection.columnStart < startCount
+                    ? "start"
+                    : startSelection.columnStart >= firstEnd
+                        ? "end"
+                        : "center";
+                const colSection = columnIndex < startCount ? "start" : columnIndex >= firstEnd ? "end" : "center";
+                const rowSection = rowIndex < topCount ? "top" : rowIndex >= firstEnd ? "bottom" : "center";
+                const startRowSection = startSelection.rowStart < topCount
+                    ? "top"
+                    : startSelection.rowStart >= firstEndRow
+                        ? "bottom"
+                        : "center";
+                const isSameColPin = startColSection === colSection;
+                const isSameRowPin = startRowSection === rowSection;
+                edgeScrollX(visualX, isRtl);
+                const relativeY = getRelativeYPosition(viewport, clientY);
+                edgeScrollY(relativeY.top);
+                const scrollY = viewport.scrollTop;
+                if (!isSameRowPin && rowIndex < topCount && scrollY > 0)
+                    return;
+                const maxScroll = viewport.scrollHeight - viewport.clientHeight - 4;
+                if (!isSameRowPin && rowIndex > topCount + centerCount - 1 && scrollY < maxScroll)
+                    return;
+                const scrollX = Math.abs(viewport.scrollLeft);
+                if (!isSameColPin && columnIndex < startCount && scrollX > 0)
+                    return;
+                const maxScrollX = viewport.scrollWidth - viewport.clientWidth - 4;
+                if (!isSameColPin && columnIndex >= firstEnd && scrollX < maxScrollX)
+                    return;
+                const startRow = rowIndex < startSelection.rowStart ? rowIndex : startSelection.rowStart;
+                const endRow = rowIndex < startSelection.rowStart ? startSelection.rowEnd : rowIndex + 1;
+                const startCol = columnIndex < startSelection.columnStart ? columnIndex : startSelection.columnStart;
+                const endCol = columnIndex < startSelection.columnStart ? startSelection.columnEnd : columnIndex + 1;
+                const active = [
+                    { rowStart: startRow, rowEnd: endRow, columnStart: startCol, columnEnd: endCol },
+                ];
+                if (isAdditive) {
+                    updateAdditiveCellSelection(grid, active[0]);
+                }
+                else {
+                    grid.state.cellSelections.set(active);
+                }
+                lastRect = active[0];
+            });
+        };
+        const pointerDown = (event) => {
+            if (!isNormalClick(event)) {
+                document.removeEventListener("pointermove", pointerMove);
+                // Prevent the default for the context menu, otherwise the cell right clicked will be focused,
+                // resulting in the cell selection changing.        if (event.button == 2) event.preventDefault();
+                return;
+            }
+            isAdditive = isMultiRange && (event.ctrlKey || event.metaKey);
+            const target = event.target;
+            if (!isHTMLElement(target))
+                return;
+            const focusable = getNearestFocusable(target);
+            if (!focusable)
+                return;
+            const position = getPositionFromFocusable(focusable);
+            if (position.kind !== "cell" && position.kind !== "full-width")
+                return;
+            const rowIndex = position.rowIndex;
+            const columnIndex = position.colIndex;
+            // If the columnIndex or rowIndex is null then we haven't clicked a valid cell position.
+            // This ends the row selection.
+            if (columnIndex == null || rowIndex == null) {
+                grid.state.cellSelections.set([]);
+                grid.internal.cellSelectionPivot.set(null);
+                return;
+            }
+            const isSelected = grid.state.cellSelections
+                .get()
+                .some((c) => isWithinSelectionRect(c, rowIndex, columnIndex));
+            const isDeselect = isAdditive && isSelected;
+            pointerStartX = event.clientX;
+            pointerStartY = event.clientY;
+            startSelection = {
+                columnStart: columnIndex,
+                columnEnd: columnIndex + 1,
+                rowStart: rowIndex,
+                rowEnd: rowIndex + 1,
+            };
+            // If shift key down we select an area. We can only select an area if a pivot has been established.
+            // The pivot will always expand the last cell selection rect if there are multiple ones.
+            const pivot = grid.internal.cellSelectionPivot.get();
+            if (event.shiftKey && pivot) {
+                const active = { ...pivot };
+                active.columnStart = Math.min(columnIndex, active.columnStart);
+                active.columnEnd = Math.max(columnIndex + 1, active.columnEnd);
+                active.rowStart = Math.min(rowIndex, active.rowStart);
+                active.rowEnd = Math.max(rowIndex + 1, active.rowEnd);
+                grid.state.cellSelections.set([active]);
+                // We need to prevent the default otherwise the cell to go to will be
+                // focused. This leads to awkward behavior around the cell selection pivot
+                event.preventDefault();
+                document.addEventListener("mousemove", pointerMove);
+                document.addEventListener("contextmenu", pointerUp);
+                document.addEventListener("pointerup", pointerUp);
+                return;
+            }
+            // We need to prevent the default for multi
+            if (mode === "multi-range" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+            }
+            if (!isDeselect && grid.state.cellSelections.get().length <= 1)
+                grid.internal.cellSelectionPivot.set({ ...startSelection, isUnit: true });
+            grid.internal.cellSelectionIsDeselect.set(isDeselect);
+            if (isAdditive) {
+                updateAdditiveCellSelection(grid, startSelection);
+            }
+            else {
+                grid.state.cellSelections.set([startSelection]);
+            }
+            lastRect = startSelection;
+            document.addEventListener("mousemove", pointerMove);
+            document.addEventListener("contextmenu", pointerUp);
+            document.addEventListener("pointerup", pointerUp);
+        };
+        const pointerUp = () => {
+            startSelection = null;
+            if (isAdditive) {
+                const isDeselect = grid.internal.cellSelectionIsDeselect.get();
+                const rects = isDeselect
+                    ? grid.state.cellSelections.get().flatMap((r) => deselectRectRange(r, lastRect))
+                    : [...grid.state.cellSelections.get(), lastRect];
+                grid.state.cellSelections.set(rects);
+                grid.internal.cellSelectionAdditiveRects.set(null);
+                grid.internal.cellSelectionIsDeselect.set(false);
+                isAdditive = false;
+            }
+            cancelX();
+            cancelY();
+            document.removeEventListener("pointerup", pointerUp);
+            document.removeEventListener("contextmenu", pointerUp);
+            document.removeEventListener("pointermove", pointerMove);
+        };
+        viewport.addEventListener("pointerdown", pointerDown);
+        const handleKey = (ev) => {
+            const rtl = grid.state.rtl.get();
+            const start = rtl ? "ArrowRight" : "ArrowLeft";
+            const end = rtl ? "ArrowLeft" : "ArrowRight";
+            if (!ev.shiftKey)
+                return;
+            let handled = false;
+            if (ev.key === start) {
+                expandCellSelectionStart(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            else if (ev.key === end) {
+                expandCellSelectionEnd(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            else if (ev.key === "ArrowDown") {
+                expandCellSelectionDown(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            else if (ev.key === "ArrowUp") {
+                expandCellSelectionUp(grid, ev.ctrlKey || ev.metaKey);
+                handled = true;
+            }
+            if (handled) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        };
+        viewport.addEventListener("keydown", handleKey);
+        return () => {
+            viewport.removeEventListener("pointerdown", pointerDown);
+            viewport.removeEventListener("keydown", handleKey);
+        };
+    }, [cancelX, cancelY, edgeScrollX, edgeScrollY, grid, mode, viewport]);
+    useEffect(() => {
+        let prev = null;
+        return grid.internal.focusActive.watch(() => {
+            const focus = grid.internal.focusActive.get();
+            // If the focus is null, then we should just return. This keeps the existing selection
+            // in place - for things like copy and paste.
+            if (!focus)
+                return;
+            if (equal(prev, focus))
+                return;
+            prev = focus;
+            if (focus?.kind !== "cell" && focus?.kind !== "full-width") {
+                grid.state.cellSelections.set([]);
+                grid.internal.cellSelectionPivot.set(null);
+                grid.internal.cellSelectionAdditiveRects.set([]);
+            }
+            else {
+                grid.state.cellSelections.set([
+                    {
+                        rowStart: focus.rowIndex,
+                        rowEnd: focus.rowIndex + 1,
+                        columnStart: focus.colIndex,
+                        columnEnd: focus.colIndex + 1,
+                    },
+                ]);
+                grid.internal.cellSelectionPivot.set({
+                    rowStart: focus.rowIndex,
+                    rowEnd: focus.rowIndex + 1,
+                    columnStart: focus.colIndex,
+                    columnEnd: focus.colIndex + 1,
+                    isUnit: true,
+                });
+            }
+        });
+    }, [
+        grid.internal.cellSelectionAdditiveRects,
+        grid.internal.cellSelectionPivot,
+        grid.internal.focusActive,
+        grid.state.cellSelections,
+    ]);
+    return _jsx(_Fragment, {});
+}

package/dist/cell-selection/cell-style-row.d.ts

@@ -0,0 +1,8 @@
+import type { DataRectSplit } from "./split-cell-selection-rect";
+export declare function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBottom, isPivot, }: {
+    rect: DataRectSplit;
+    isRowPinnedTop?: boolean;
+    isDeselect?: boolean;
+    isRowPinnedBottom?: boolean;
+    isPivot?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/cell-selection/cell-style-row.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useGridRoot } from "../context.js";
+import { getTranslate, sizeFromCoord } from "@1771technologies/lytenyte-shared";
+export function CellStyleRow({ rect, isRowPinnedTop, isDeselect, isRowPinnedBottom, isPivot, }) {
+    const cx = useGridRoot();
+    const xPositions = cx.grid.state.xPositions.useValue();
+    const yPositions = cx.grid.state.yPositions.useValue();
+    const rtl = cx.grid.state.rtl.useValue();
+    const meta = cx.grid.state.columnMeta.useValue();
+    const startCount = meta.columnVisibleStartCount;
+    const centerCount = meta.columnVisibleCenterCount;
+    const ds = cx.grid.state.rowDataStore;
+    const rowCount = ds.rowCount.useValue();
+    const rowTopCount = ds.rowTopCount.useValue();
+    const rowBotCount = ds.rowBottomCount.useValue();
+    const vpWidth = cx.grid.state.viewportWidthInner.useValue();
+    const style = useMemo(() => {
+        const isStart = rect.columnStart < startCount;
+        const isEnd = rect.columnStart >= startCount + centerCount;
+        const isTop = isRowPinnedTop;
+        const isBot = isRowPinnedBottom;
+        const columnIndex = rect.columnStart;
+        const rowIndex = rect.rowStart;
+        const width = sizeFromCoord(rect.columnStart, xPositions, rect.columnEnd - rect.columnStart);
+        const height = sizeFromCoord(rect.rowStart, yPositions, rect.rowEnd - rect.rowStart);
+        const firstBotIndex = rowCount - rowBotCount;
+        const x = isEnd
+            ? xPositions[columnIndex] - xPositions.at(-1) + vpWidth
+            : xPositions[columnIndex];
+        let y;
+        if (isBot)
+            y = yPositions[rowIndex] - yPositions[firstBotIndex];
+        else if (isTop)
+            y = yPositions[rowIndex] - yPositions[rowTopCount];
+        else {
+            y = `calc(${yPositions[rowIndex] - yPositions[rowTopCount]}px - var(--ln-y-offset, 0px))`;
+        }
+        const transform = getTranslate(x * (rtl ? -1 : 1), y);
+        const pinnedRow = isTop || isBot;
+        const pinnedCell = isStart || isEnd;
+        const style = {
+            height,
+            width,
+            transform,
+            position: "absolute",
+            pointerEvents: "none",
+            top: 0,
+            zIndex: 1,
+            gridRowStart: "1",
+            gridRowEnd: "2",
+            gridColumnStart: "1",
+            gridColumnEnd: "2",
+        };
+        if (pinnedCell) {
+            style.insetInlineStart = "0px";
+            style.position = "sticky";
+            style.zIndex = pinnedRow ? 6 : 3;
+        }
+        if (pinnedRow) {
+            style.position = "sticky";
+            style.top = "0px";
+            style.zIndex = pinnedCell ? 6 : 3;
+        }
+        return style;
+    }, [
+        centerCount,
+        isRowPinnedBottom,
+        isRowPinnedTop,
+        rect.columnEnd,
+        rect.columnStart,
+        rect.rowEnd,
+        rect.rowStart,
+        rowBotCount,
+        rowCount,
+        rowTopCount,
+        rtl,
+        startCount,
+        vpWidth,
+        xPositions,
+        yPositions,
+    ]);
+    return (_jsx("div", { style: style, "data-ln-cell-selection-rect": true, "data-ln-cell-selection-is-deselect": isDeselect, "data-ln-cell-selection-is-pivot": isPivot, "data-ln-cell-selection-is-unit": rect.isUnit, "data-ln-cell-selection-border-top": rect.borderTop, "data-ln-cell-selection-border-bottom": rect.borderBottom, "data-ln-cell-selection-border-start": rect.borderStart, "data-ln-cell-selection-border-end": rect.borderEnd }));
+}

package/dist/cell-selection/deselect-rect-range.d.ts

@@ -0,0 +1,2 @@
+import type { DataRect } from "../+types.js";
+export declare function deselectRectRange(rect: DataRect, deselectRect: DataRect): DataRect[];

package/dist/cell-selection/deselect-rect-range.js

@@ -0,0 +1,43 @@
+import { isOverlappingRect } from "./is-overlapping-rect.js";
+export function deselectRectRange(rect, deselectRect) {
+    if (!isOverlappingRect(rect, deselectRect))
+        return [rect];
+    const result = [];
+    // Check for top split
+    if (deselectRect.rowStart > rect.rowStart) {
+        result.push({
+            rowStart: rect.rowStart,
+            rowEnd: deselectRect.rowStart,
+            columnStart: rect.columnStart,
+            columnEnd: rect.columnEnd,
+        });
+    }
+    // Check for bottom split
+    if (deselectRect.rowEnd < rect.rowEnd) {
+        result.push({
+            rowStart: deselectRect.rowEnd,
+            rowEnd: rect.rowEnd,
+            columnStart: rect.columnStart,
+            columnEnd: rect.columnEnd,
+        });
+    }
+    // Check for left split
+    if (deselectRect.columnStart > rect.columnStart) {
+        result.push({
+            rowStart: Math.max(deselectRect.rowStart, rect.rowStart),
+            rowEnd: Math.min(deselectRect.rowEnd, rect.rowEnd),
+            columnStart: rect.columnStart,
+            columnEnd: deselectRect.columnStart,
+        });
+    }
+    // Check for right split
+    if (deselectRect.columnEnd < rect.columnEnd) {
+        result.push({
+            rowStart: Math.max(deselectRect.rowStart, rect.rowStart),
+            rowEnd: Math.min(deselectRect.rowEnd, rect.rowEnd),
+            columnStart: deselectRect.columnEnd,
+            columnEnd: rect.columnEnd,
+        });
+    }
+    return result.filter((rect) => !(rect.rowStart >= rect.rowEnd || rect.columnStart >= rect.columnEnd));
+}

package/dist/cell-selection/expand-cell-selection-down.d.ts

@@ -0,0 +1,5 @@
+import type { Grid } from "../+types.js";
+import type { InternalAtoms } from "../state/+types.js";
+export declare function expandCellSelectionDown(grid: Grid<any> & {
+    internal: InternalAtoms;
+}, meta: boolean): void;

package/dist/cell-selection/expand-cell-selection-down.js

@@ -0,0 +1,39 @@
+import { getRootCell } from "./get-root-cell.js";
+export function expandCellSelectionDown(grid, meta) {
+    const cellSelections = grid.state.cellSelections.get();
+    const rect = cellSelections.at(-1);
+    const pivot = grid.internal.cellSelectionPivot.get();
+    if (!rect || !pivot)
+        return;
+    if (meta) {
+        const rowCount = grid.state.rowDataStore.rowCount.get();
+        if (pivot.rowStart === rowCount - 1)
+            return;
+        const next = { ...rect, rowStart: pivot.rowStart, rowEnd: rowCount };
+        const nextSelections = [...cellSelections];
+        nextSelections[nextSelections.length - 1] = next;
+        grid.state.cellSelections.set(nextSelections);
+        return;
+    }
+    let next;
+    let focusRow;
+    if (rect.rowStart < pivot.rowStart) {
+        let rowOffset = 1;
+        for (let i = rect.columnStart; i < rect.columnEnd; i++) {
+            const cell = getRootCell(grid, rect.rowStart, i);
+            if (cell)
+                rowOffset = Math.max(rowOffset, cell.rowSpan);
+        }
+        focusRow = rect.rowStart + rowOffset;
+        next = { ...rect, rowStart: focusRow };
+    }
+    else {
+        focusRow = rect.rowEnd + 1;
+        next = { ...rect, rowEnd: focusRow };
+        focusRow -= 1;
+    }
+    grid.api.scrollIntoView({ row: focusRow });
+    const nextSelections = [...cellSelections];
+    nextSelections[nextSelections.length - 1] = next;
+    grid.state.cellSelections.set(nextSelections);
+}

package/dist/cell-selection/expand-cell-selection-end.d.ts

@@ -0,0 +1,5 @@
+import type { Grid } from "../+types.js";
+import type { InternalAtoms } from "../state/+types.js";
+export declare function expandCellSelectionEnd(grid: Grid<any> & {
+    internal: InternalAtoms;
+}, meta: boolean): void;