@1771technologies/lytenyte-pro 1.0.20 → 2.0.0-dev.1

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

@@ -0,0 +1,73 @@
+import { dataRectFromCellPosition } from "./data-rect-from-cell-position.js";
+import { isOverlappingRect } from "./is-overlapping-rect.js";
+import { isFullyWithinRect } from "./is-fully-within-rect.js";
+export function expandSelectionStart(api, selections, setSelections, meta, position, excludeMarker, view) {
+    const pos = dataRectFromCellPosition(position);
+    const rect = selections.at(-1);
+    if (!rect || !isOverlappingRect(rect, pos) || isFullyWithinRect(pos, rect))
+        return;
+    const first = excludeMarker ? 1 : 0;
+    if (meta) {
+        const next = { ...rect, columnStart: first, columnEnd: pos.columnStart + 1 };
+        const nextSelections = [...selections];
+        nextSelections[nextSelections.length - 1] = next;
+        setSelections(nextSelections);
+        if (pos.columnStart !== view.visibleColumns.length - 1)
+            api.scrollIntoView({ column: first });
+        return;
+    }
+    const isAtEdge = pos.columnStart == rect.columnStart || pos.columnEnd === rect.columnEnd;
+    let pivotStart = pos.columnStart;
+    let pivotEnd = pos.columnEnd;
+    // Our cell some how is spanned over. so for the current rowIndex, find the maximum span along the columns
+    if (!isAtEdge) {
+        for (let i = rect.rowStart; i < rect.rowEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(pos.columnStart, i));
+            pivotStart = Math.min(pivotStart, cell.columnStart);
+            pivotEnd = Math.max(pivotEnd, cell.columnEnd);
+        }
+    }
+    let next;
+    if (rect.columnEnd <= pivotEnd) {
+        if (rect.columnStart === first)
+            return;
+        let highestColEnd = -Infinity;
+        let setCell = rect;
+        for (let i = rect.rowStart; i < rect.rowEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(i, rect.columnStart - 1));
+            if (cell.columnStart > highestColEnd) {
+                highestColEnd = cell.columnStart;
+                setCell = cell;
+            }
+        }
+        next = {
+            ...rect,
+            columnStart: highestColEnd,
+            rowStart: Math.min(setCell.rowStart, rect.rowStart),
+            rowEnd: Math.max(setCell.rowEnd, rect.rowEnd),
+        };
+        api.scrollIntoView({ column: highestColEnd });
+    }
+    else {
+        let highestColEnd = -Infinity;
+        let setCell = rect;
+        for (let i = rect.rowStart; i < rect.rowEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(i, rect.columnEnd - 1));
+            if (cell.columnStart > highestColEnd) {
+                highestColEnd = cell.columnStart;
+                setCell = cell;
+            }
+        }
+        next = {
+            ...rect,
+            columnEnd: highestColEnd,
+            rowStart: Math.min(setCell.rowStart, rect.rowStart),
+            rowEnd: Math.max(setCell.rowEnd, rect.rowEnd),
+        };
+        api.scrollIntoView({ column: highestColEnd - 1 });
+    }
+    const nextSelections = [...selections];
+    nextSelections[nextSelections.length - 1] = next;
+    setSelections(nextSelections);
+    return;
+}

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

@@ -0,0 +1,3 @@
+import type { PositionGridCell } from "@1771technologies/lytenyte-shared";
+import type { API, DataRect } from "../types/api.js";
+export declare function expandSelectionUp(api: API, selections: DataRect[], setSelections: (d: DataRect[]) => void, meta: boolean, position: PositionGridCell, rowCount: number): void;

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

@@ -0,0 +1,74 @@
+import { dataRectFromCellPosition } from "./data-rect-from-cell-position.js";
+import { isOverlappingRect } from "./is-overlapping-rect.js";
+import { isFullyWithinRect } from "./is-fully-within-rect.js";
+export function expandSelectionUp(api, selections, setSelections, meta, position, rowCount) {
+    const pos = dataRectFromCellPosition(position);
+    const rect = selections.at(-1);
+    if (!rect || !isOverlappingRect(rect, pos) || isFullyWithinRect(pos, rect))
+        return;
+    if (meta) {
+        const next = { ...rect, rowStart: 0, rowEnd: pos.rowStart + 1 };
+        const nextSelections = [...selections];
+        nextSelections[nextSelections.length - 1] = next;
+        setSelections(nextSelections);
+        if (pos.rowStart !== rowCount - 1)
+            api.scrollIntoView({ row: 0 });
+        return;
+    }
+    const isAtEdge = pos.rowStart == rect.rowStart || pos.rowEnd === rect.rowEnd;
+    let pivotStart = pos.rowStart;
+    let pivotEnd = pos.rowEnd;
+    // Our cell some how is spanned over. so for the current rowIndex, find the maximum span along the columns
+    if (!isAtEdge) {
+        for (let i = rect.columnStart; i < rect.columnEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(pos.rowStart, i));
+            pivotStart = Math.min(pivotStart, cell.rowStart);
+            pivotEnd = Math.max(pivotEnd, cell.rowEnd);
+        }
+    }
+    let next;
+    if (rect.rowEnd > pivotEnd) {
+        let lowestRowStart = Infinity;
+        let c = rect;
+        for (let i = rect.columnStart; i < rect.columnEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(rect.rowEnd - 1, i));
+            lowestRowStart = Math.min(cell.rowStart, lowestRowStart);
+            if (cell.rowStart < lowestRowStart) {
+                lowestRowStart = cell.rowStart;
+                c = cell;
+            }
+        }
+        api.scrollIntoView({ row: lowestRowStart - 1 });
+        next = {
+            ...rect,
+            rowEnd: lowestRowStart,
+            columnStart: Math.min(c.columnStart, rect.columnStart),
+            columnEnd: Math.max(c.columnEnd, rect.columnEnd),
+        };
+    }
+    else {
+        if (rect.rowStart === 0)
+            return;
+        let lowestRowStart = Infinity;
+        let c = rect;
+        for (let i = rect.columnStart; i < rect.columnEnd; i++) {
+            const cell = dataRectFromCellPosition(api.cellRoot(rect.rowStart - 1, i));
+            lowestRowStart = Math.min(cell.rowStart, lowestRowStart);
+            if (cell.rowStart < lowestRowStart) {
+                lowestRowStart = cell.rowStart;
+                c = cell;
+            }
+        }
+        api.scrollIntoView({ row: lowestRowStart });
+        next = {
+            ...rect,
+            rowStart: lowestRowStart,
+            columnStart: Math.min(c.columnStart, rect.columnStart),
+            columnEnd: Math.max(c.columnEnd, rect.columnEnd),
+        };
+    }
+    const nextSelections = [...selections];
+    nextSelections[nextSelections.length - 1] = next;
+    setSelections(nextSelections);
+    return;
+}

package/dist/cell-selection/full-width-start-end-index.d.ts

@@ -1,2 +1,2 @@
-import type { Grid } from "../+types.js";
-export declare function fullWidthStartEndIndex(grid: Grid<any>): number[];
+import type { ColumnView } from "@1771technologies/lytenyte-shared";
+export declare function fullWidthStartEndIndex(view: ColumnView): number[];

package/dist/cell-selection/full-width-start-end-index.js

@@ -1,5 +1,4 @@
-export function fullWidthStartEndIndex(grid) {
-    const meta = grid.state.columnMeta.get();
-    const lastIndex = meta.columnsVisible.length;
+export function fullWidthStartEndIndex(view) {
+    const lastIndex = view.visibleColumns.length;
     return [0, lastIndex];
 }

package/dist/cell-selection/get-root-cell.d.ts

@@ -1,2 +1,3 @@
-import type { Grid, PositionGridCell } from "../+types.js";
-export declare const getRootCell: (grid: Grid<any>, rowIndex: number, columnIndex: number) => PositionGridCell["root"];
+import type { PositionGridCell } from "@1771technologies/lytenyte-shared";
+import type { API } from "../types/api.js";
+export declare const getRootCell: (cellRoot: API["cellRoot"], rowIndex: number, columnIndex: number) => PositionGridCell["root"];

package/dist/cell-selection/get-root-cell.js

@@ -1,5 +1,5 @@
-export const getRootCell = (grid, rowIndex, columnIndex) => {
-    const c = grid.api.cellRoot(rowIndex, columnIndex);
+export const getRootCell = (cellRoot, rowIndex, columnIndex) => {
+    const c = cellRoot(rowIndex, columnIndex);
     if (!c || c.kind === "full-width")
         return null;
     return c.root;

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

@@ -4,12 +4,7 @@ export { boundSelectionRect } from "./bound-selection-rect.js";
 export { fullWidthStartEndIndex } from "./full-width-start-end-index.js";
 export { areRectsEqual } from "./are-rects-equal.js";
 export { deselectRectRange } from "./deselect-rect-range.js";
-export { adjustRectForRowAndCellSpan } from "./adjust-rect-for-row-and-cell-span.js";
 export { updateAdditiveCellSelection } from "./update-additive-cell-selection.js";
-export { expandCellSelectionDown } from "./expand-cell-selection-down.js";
-export { expandCellSelectionUp } from "./expand-cell-selection-up.js";
-export { expandCellSelectionStart } from "./expand-cell-selection-start.js";
-export { expandCellSelectionEnd } from "./expand-cell-selection-end.js";
 export { isBottomRect } from "./is-bottom-rect.js";
 export { isCenterRect } from "./is-center-rect.js";
 export { isTopRect } from "./is-top-rect.js";

package/dist/cell-selection/index.js

@@ -4,12 +4,7 @@ export { boundSelectionRect } from "./bound-selection-rect.js";
 export { fullWidthStartEndIndex } from "./full-width-start-end-index.js";
 export { areRectsEqual } from "./are-rects-equal.js";
 export { deselectRectRange } from "./deselect-rect-range.js";
-export { adjustRectForRowAndCellSpan } from "./adjust-rect-for-row-and-cell-span.js";
 export { updateAdditiveCellSelection } from "./update-additive-cell-selection.js";
-export { expandCellSelectionDown } from "./expand-cell-selection-down.js";
-export { expandCellSelectionUp } from "./expand-cell-selection-up.js";
-export { expandCellSelectionStart } from "./expand-cell-selection-start.js";
-export { expandCellSelectionEnd } from "./expand-cell-selection-end.js";
 export { isBottomRect } from "./is-bottom-rect.js";
 export { isCenterRect } from "./is-center-rect.js";
 export { isTopRect } from "./is-top-rect.js";

package/dist/cell-selection/is-bottom-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect, Grid } from "../+types.js";
-export declare function isBottomRect(grid: Grid<any>, rect: DataRect): boolean;
+import type { DataRect } from "../types/api.js";
+export declare function isBottomRect(rowCount: number, botCount: number, rect: DataRect): boolean;

package/dist/cell-selection/is-bottom-rect.js

@@ -1,7 +1,4 @@
-export function isBottomRect(grid, rect) {
-    const s = grid.state.rowDataStore;
-    const rowCount = s.rowCount.get();
-    const botCount = s.rowBottomCount.get();
+export function isBottomRect(rowCount, botCount, rect) {
     const bottomStart = rowCount - botCount;
     return rect.rowStart >= bottomStart;
 }

package/dist/cell-selection/is-center-col-rect.d.ts

@@ -1,5 +1,5 @@
-import type { Grid } from "../+types.js";
-export declare function isCenterColRect(grid: Grid<any>, rect: {
+import type { ColumnView } from "@1771technologies/lytenyte-shared";
+export declare function isCenterColRect(view: ColumnView, rect: {
     columnStart: number;
     columnEnd: number;
 }): boolean;

package/dist/cell-selection/is-center-col-rect.js

@@ -1,5 +1,3 @@
-export function isCenterColRect(grid, rect) {
-    const s = grid.state.columnMeta.get();
-    return (rect.columnStart >= s.columnVisibleStartCount &&
-        rect.columnStart < s.columnVisibleCenterCount + s.columnVisibleStartCount);
+export function isCenterColRect(view, rect) {
+    return rect.columnStart >= view.startCount && rect.columnStart < view.centerCount + view.startCount;
 }

package/dist/cell-selection/is-center-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect, Grid } from "../+types.js";
-export declare function isCenterRect(grid: Grid<any>, rect: DataRect): boolean;
+import type { DataRect } from "../types/api";
+export declare function isCenterRect(rowCount: number, rowBottomCount: number, rowTopCount: number, rect: DataRect): boolean;

package/dist/cell-selection/is-center-rect.js

@@ -1,5 +1,4 @@
-export function isCenterRect(grid, rect) {
-    const ds = grid.state.rowDataStore;
-    const bottomStart = ds.rowCount.get() - ds.rowBottomCount.get();
-    return rect.rowStart < bottomStart && rect.rowStart >= ds.rowTopCount.get();
+export function isCenterRect(rowCount, rowBottomCount, rowTopCount, rect) {
+    const bottomStart = rowCount - rowBottomCount;
+    return rect.rowStart < bottomStart && rect.rowStart >= rowTopCount;
 }

package/dist/cell-selection/is-end-rect.d.ts

@@ -1,5 +1,5 @@
-import type { Grid } from "../+types.js";
-export declare function isEndRect(grid: Grid<any>, rect: {
+import type { ColumnView } from "@1771technologies/lytenyte-shared";
+export declare function isEndRect(view: ColumnView, rect: {
     columnStart: number;
     columnEnd: number;
 }): boolean;

package/dist/cell-selection/is-end-rect.js

@@ -1,4 +1,3 @@
-export function isEndRect(grid, rect) {
-    const meta = grid.state.columnMeta.get();
-    return rect.columnStart >= meta.columnVisibleStartCount + meta.columnVisibleCenterCount;
+export function isEndRect(view, rect) {
+    return rect.columnStart >= view.startCount + view.centerCount;
 }

package/dist/cell-selection/is-fully-within-rect.d.ts

@@ -0,0 +1,2 @@
+import type { DataRect } from "../types";
+export declare function isFullyWithinRect(pos: DataRect, rect: DataRect): boolean;

package/dist/cell-selection/is-fully-within-rect.js

@@ -0,0 +1,6 @@
+export function isFullyWithinRect(pos, rect) {
+    return (pos.rowStart !== rect.rowStart &&
+        pos.rowEnd !== rect.rowEnd &&
+        pos.columnStart !== rect.columnStart &&
+        pos.columnEnd !== rect.columnEnd);
+}

package/dist/cell-selection/is-overlapping-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect } from "../+types.js";
-export declare function isOverlappingRect(rect1: DataRect, rect2: DataRect): boolean;
+import type { DataRect } from "../types/api.js";
+export declare function isOverlappingRect(a: DataRect, b: DataRect): boolean;

package/dist/cell-selection/is-overlapping-rect.js

@@ -1,6 +1,5 @@
-export function isOverlappingRect(rect1, rect2) {
-    return !(rect1.rowEnd < rect2.rowStart ||
-        rect1.rowStart > rect2.rowEnd ||
-        rect1.columnEnd < rect2.columnStart ||
-        rect1.columnStart > rect2.columnEnd);
+export function isOverlappingRect(a, b) {
+    const rowsOverlap = a.rowStart < b.rowEnd && b.rowStart < a.rowEnd;
+    const columnsOverlap = a.columnStart < b.columnEnd && b.columnStart < a.columnEnd;
+    return rowsOverlap && columnsOverlap;
 }

package/dist/cell-selection/is-start-rect.d.ts

@@ -1,5 +1,5 @@
-import type { Grid } from "../+types.js";
-export declare function isStartRect(grid: Grid<any>, rect: {
+import type { ColumnView } from "@1771technologies/lytenyte-shared";
+export declare function isStartRect(view: ColumnView, rect: {
     columnStart: number;
     columnEnd: number;
 }): boolean;

package/dist/cell-selection/is-start-rect.js

@@ -1,4 +1,3 @@
-export function isStartRect(grid, rect) {
-    const meta = grid.state.columnMeta.get();
-    return rect.columnStart < meta.columnVisibleStartCount;
+export function isStartRect(view, rect) {
+    return rect.columnStart < view.startCount;
 }

package/dist/cell-selection/is-top-rect.d.ts

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

package/dist/cell-selection/is-top-rect.js

@@ -1,4 +1,3 @@
-export function isTopRect(grid, rect) {
-    const topCount = grid.state.rowDataStore.rowTopCount.get();
+export function isTopRect(topCount, rect) {
     return rect.rowStart < topCount;
 }

package/dist/cell-selection/is-within-selection-rect.d.ts

@@ -1,2 +1,2 @@
-import type { DataRect } from "../+types.js";
+import type { DataRect } from "../types/api.js";
 export declare function isWithinSelectionRect(rect: DataRect, r: number, c: number): boolean;

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

@@ -1,10 +1,11 @@
-import type { DataRect } from "../+types.js";
+import type { DataRect } from "../types/api.js";
 interface SplitCellSelectionRectArgs {
     readonly rect: DataRect;
     readonly colStartCount: number;
     readonly colCenterCount: number;
     readonly rowTopCount: number;
     readonly rowCenterCount: number;
+    readonly isDeselect?: boolean;
 }
 export interface DataRectSplit extends DataRect {
     readonly isUnit: boolean;

package/dist/cell-selection/split-on-pivot.d.ts

@@ -1,3 +1,3 @@
-import type { DataRect } from "../+types";
 import type { DataRectSplit } from "./split-cell-selection-rect";
+import type { DataRect } from "../types/api.js";
 export declare function splitOnPivot(rect: DataRectSplit, pivot: DataRect): DataRectSplit[] | null;

package/dist/cell-selection/update-additive-cell-selection.d.ts

@@ -1,5 +1,4 @@
-import type { DataRect, Grid } from "../+types.js";
-import type { InternalAtoms } from "../state/+types.js";
-export declare function updateAdditiveCellSelection(grid: Grid<any> & {
-    internal: InternalAtoms;
-}, rect: DataRect): void;
+import { type DataRectSplit } from "./split-cell-selection-rect.js";
+import type { ColumnView } from "@1771technologies/lytenyte-shared";
+import type { API, DataRect } from "../types/api.js";
+export declare function updateAdditiveCellSelection(api: API, view: ColumnView, rowTopCount: number, rowCount: number, rowBottomCount: number, rect: DataRect, cellSelectionAdditiveRects: DataRectSplit[] | null, setSelectionAdditiveRects: (d: DataRectSplit[] | null) => void): void;

package/dist/cell-selection/update-additive-cell-selection.js

@@ -2,22 +2,20 @@ import { boundSelectionRect } from "./bound-selection-rect.js";
 import { adjustRectForRowAndCellSpan } from "./adjust-rect-for-row-and-cell-span.js";
 import { areRectsEqual } from "./are-rects-equal.js";
 import { splitCellSelectionRect } from "./split-cell-selection-rect.js";
-export function updateAdditiveCellSelection(grid, rect) {
-    const s = grid.state.columnMeta.get();
-    const ds = grid.state.rowDataStore;
-    const rowTopCount = ds.rowTopCount.get();
-    const adjustedRect = adjustRectForRowAndCellSpan(grid, rect);
+export function updateAdditiveCellSelection(api, view, rowTopCount, rowCount, rowBottomCount, rect, cellSelectionAdditiveRects, setSelectionAdditiveRects) {
+    const s = view;
+    const adjustedRect = adjustRectForRowAndCellSpan(api.cellRoot, rect);
     const rects = splitCellSelectionRect({
-        rect: boundSelectionRect(grid, adjustedRect),
-        colCenterCount: s.columnVisibleCenterCount,
-        colStartCount: s.columnVisibleStartCount,
-        rowCenterCount: ds.rowCenterCount.get(),
+        rect: boundSelectionRect(view, rowCount, adjustedRect),
+        colCenterCount: s.centerCount,
+        colStartCount: s.startCount,
+        rowCenterCount: rowCount - rowTopCount - rowBottomCount,
         rowTopCount: rowTopCount,
     });
-    const current = grid.internal.cellSelectionAdditiveRects.get();
+    const current = cellSelectionAdditiveRects;
     if (current && current.length === rects.length) {
         if (current.every((c, i) => areRectsEqual(c, rects[i])))
             return;
     }
-    grid.internal.cellSelectionAdditiveRects.set(rects);
+    setSelectionAdditiveRects(rects);
 }

package/dist/cell-selection/use-edge-scroll.d.ts

@@ -1,10 +1,6 @@
-import type { Grid } from "../+types.js";
-import type { InternalAtoms } from "../state/+types.js";
-export declare function useEdgeScroll(grid: Grid<any> & {
-    internal: InternalAtoms;
-}): {
+export declare function useEdgeScroll(): {
     cancelX: () => void;
     edgeScrollX: (visualPositionX: number, isRtl: boolean) => void;
     cancelY: () => void;
-    edgeScrollY: (visualPositionY: number) => void;
+    edgeScrollY: (visualPositionY: number, startY: number) => void;
 };

package/dist/cell-selection/use-edge-scroll.js

@@ -1,5 +1,11 @@
+import { useRoot } from "@1771technologies/lytenyte-core/internal";
 import { useCallback, useRef } from "react";
-export function useEdgeScroll(grid) {
+export function useEdgeScroll() {
+    const { viewport, dimensions, totalHeaderHeight, yPositions, source } = useRoot();
+    const rowTopCount = source.useTopCount();
+    const rowBottomCount = source.useBottomCount();
+    const bottomHeight = yPositions.at(-1) - yPositions.at(-1 - rowBottomCount);
+    const topHeight = yPositions.at(rowTopCount);
     const intervalIdX = useRef(null);
     const intervalIdY = useRef(null);
     const cancelX = useCallback(() => {
@@ -14,35 +20,34 @@ export function useEdgeScroll(grid) {
             intervalIdY.current = null;
         }
     }, []);
-    const edgeScrollY = useCallback((visualPositionY) => {
-        const viewport = grid.state.viewport.get();
+    const edgeScrollY = useCallback((visualPositionY, startY) => {
         if (!viewport)
             return;
-        const viewportClientHeight = grid.state.viewportHeightInner.get();
-        const viewportHeight = Math.min(viewportClientHeight * 0.1, 100);
-        const buffer = viewportHeight;
-        const topBound = buffer + grid.internal.headerHeightTotal.get();
-        const botBound = viewportClientHeight - buffer;
+        const viewportClientHeight = dimensions.innerHeight;
+        const topBound = totalHeaderHeight + topHeight;
+        const botBound = viewportClientHeight - bottomHeight;
+        const scrollTop = startY > topBound && visualPositionY <= totalHeaderHeight + 20;
+        const scrollBottom = startY < botBound && visualPositionY >= viewportClientHeight - 20;
         const speed = 6;
-        if (visualPositionY < topBound && !intervalIdY.current) {
+        if (scrollTop && !intervalIdY.current) {
             intervalIdY.current = setInterval(() => {
                 viewport.scrollBy({ top: -speed });
             }, 6);
         }
-        else if (visualPositionY > botBound && !intervalIdY.current) {
+        else if (scrollBottom && !intervalIdY.current) {
             intervalIdY.current = setInterval(() => {
                 viewport.scrollBy({ top: speed });
             }, 6);
         }
-        if (intervalIdY.current && visualPositionY > topBound && visualPositionY < botBound) {
-            cancelY();
+        if (!scrollBottom && !scrollTop && intervalIdY.current) {
+            clearInterval(intervalIdY.current);
+            intervalIdY.current = null;
         }
-    }, [cancelY, grid.internal.headerHeightTotal, grid.state.viewport, grid.state.viewportHeightInner]);
+    }, [bottomHeight, dimensions.innerHeight, topHeight, totalHeaderHeight, viewport]);
     const edgeScrollX = useCallback((visualPositionX, isRtl) => {
-        const viewport = grid.state.viewport.get();
         if (!viewport)
             return;
-        const viewportClientWidth = grid.state.viewportWidthInner.get();
+        const viewportClientWidth = dimensions.innerWidth;
         const viewportWidth = Math.min(viewportClientWidth * 0.1, 100);
         const buffer = viewportWidth;
         const leftBound = buffer;
@@ -61,6 +66,6 @@ export function useEdgeScroll(grid) {
         if (intervalIdX.current && visualPositionX > leftBound && visualPositionX < rightBound) {
             cancelX();
         }
-    }, [cancelX, grid.state.viewport, grid.state.viewportWidthInner]);
+    }, [cancelX, dimensions.innerWidth, viewport]);
     return { cancelX, edgeScrollX, cancelY, edgeScrollY };
 }

package/dist/components/checkbox/checkbox.d.ts

@@ -0,0 +1,15 @@
+import { type JSX } from "react";
+import { type SlotComponent } from "../../hooks/use-slot/index.js";
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Checkbox.Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare namespace Checkbox {
+    type State = {
+        readonly indeterminate: boolean;
+        readonly checked: boolean;
+    };
+    type Props = JSX.IntrinsicElements["input"] & {
+        readonly indeterminate?: boolean;
+        readonly initialChecked?: boolean;
+        readonly renderMarker?: SlotComponent<State>;
+        readonly onCheckChange?: (b: boolean) => void;
+    };
+}

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useSlot } from "../../hooks/use-slot/index.js";
+import { useControlled, useEvent } from "@1771technologies/lytenyte-core/internal";
+function CheckboxBase({ indeterminate, renderMarker, onCheckChange: onCheck, ...props }, ref) {
+    const [checked, setChecked] = useControlled({
+        controlled: props.checked,
+        default: props.initialChecked ?? false,
+    });
+    const onCheckChanged = useEvent((b) => {
+        setChecked(b);
+        onCheck?.(b);
+    });
+    const marker = useSlot({
+        slot: renderMarker ?? (checked ? _jsx(CheckIcon, {}) : indeterminate ? _jsx(DashIcon, {}) : _jsx(_Fragment, {})),
+        state: {
+            indeterminate: indeterminate ?? false,
+            checked,
+        },
+    });
+    return (_jsxs("div", { "data-ln-checkbox": true, "data-ln-checked": checked, "data-ln-indeterminate": indeterminate, "data-ln-disabled": props.disabled, style: { position: "relative" }, children: [marker, _jsx("input", { "data-ln-checkbox-input": true, onChange: (e) => {
+                    props.onChange?.(e);
+                    if (e.defaultPrevented || e.isPropagationStopped())
+                        return;
+                    onCheckChanged(e.target.checked);
+                }, type: "checkbox", ref: ref, ...props, style: {
+                    width: "100%",
+                    height: "100%",
+                    opacity: 0,
+                    margin: 0,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                } })] }));
+}
+function CheckIcon(props) {
+    return (_jsx("svg", { width: "11", height: "11", viewBox: "0 0 10 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: _jsx("path", { d: "M1.00024 4.34783C2.53871 5.26087 3.76948 7.08696 4.07717 8C5.61563 4.34783 7.76948 1.91304 9.00024 1", stroke: "currentcolor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function DashIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", ...props, children: _jsx("path", { d: "M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z" }) }));
+}
+export const Checkbox = forwardRef(CheckboxBase);

package/dist/components/checkbox/checkbox.play.d.ts

@@ -0,0 +1,2 @@
+import "../../../css/light-dark.css";
+export default function Play(): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox/checkbox.play.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../../../css/light-dark.css";
+import { Checkbox } from "./checkbox.js";
+export default function Play() {
+    return _jsx(Checkbox, {});
+}

package/dist/components/column-manager/column-manager.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import type { Column, GridSpec, RowNode } from "../../types";
+import type { Grid } from "../..";
+export interface ColumnManagerProps<Spec extends GridSpec = GridSpec> {
+    readonly columns: Column<Spec>[];
+    readonly onColumnsChange: (change: Column<Spec>[]) => void;
+    readonly base?: Grid.ColumnBase<Spec>;
+    readonly endElement?: (params: {
+        columns: Column<Spec>[];
+        row: RowNode<Spec["data"]>;
+    }) => ReactNode;
+}
+export declare function ColumnManager<Spec extends GridSpec = GridSpec>({ columns, base, onColumnsChange, endElement, }: ColumnManagerProps<Spec>): import("react/jsx-runtime").JSX.Element;