@1771technologies/lytenyte-pro 0.9.3 → 1.0.0-beta.0

package/dist/state/api/popover-frame.d.ts

@@ -0,0 +1,8 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makePopoverFrameOpen: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["popoverFrameOpen"];
+export declare const makePopoverFrameClose: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["popoverFrameClose"];

package/dist/state/api/popover-frame.js

@@ -0,0 +1,16 @@
+export const makePopoverFrameOpen = (grid) => {
+    return (id, target, context) => {
+        grid.internal.popoverFrames.set((prev) => ({ ...prev, [id]: { target, context } }));
+    };
+};
+export const makePopoverFrameClose = (grid) => {
+    return (id) => {
+        grid.internal.popoverFrames.set((prev) => {
+            if (!id)
+                return {};
+            const next = { ...prev };
+            delete next[id];
+            return next;
+        });
+    };
+};

package/dist/state/api/position-from-element.d.ts

@@ -0,0 +1,2 @@
+import type { GridApi } from "../../+types";
+export declare const makePositionFromElement: () => GridApi<any>["positionFromElement"];

package/dist/state/api/position-from-element.js

@@ -0,0 +1,9 @@
+import { getNearestFocusable, getPositionFromFocusable } from "@1771technologies/lytenyte-shared";
+export const makePositionFromElement = () => {
+    return (el) => {
+        const focusable = getNearestFocusable(el);
+        if (!focusable)
+            return null;
+        return getPositionFromFocusable(focusable);
+    };
+};

package/dist/state/api/row-by-id.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowById: (grid: Grid<any>) => GridApi<any>["rowById"];

package/dist/state/api/row-by-id.js

@@ -0,0 +1,5 @@
+export const makeRowById = (grid) => {
+    return (id) => {
+        return grid.state.rowDataSource.get().rowById(id);
+    };
+};

package/dist/state/api/row-by-index.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowByIndex: (grid: Grid<any>) => GridApi<any>["rowByIndex"];

package/dist/state/api/row-by-index.js

@@ -0,0 +1,9 @@
+import { rowIndexForSection } from "@1771technologies/lytenyte-shared";
+export const makeRowByIndex = (grid) => {
+    return (index, section = "flat") => {
+        const rowIndex = rowIndexForSection(index, section, grid.state.rowDataStore.rowTopCount.get(), grid.state.rowDataStore.rowBottomCount.get(), grid.state.rowDataStore.rowCount.get());
+        if (rowIndex == null)
+            return null;
+        return grid.state.rowDataSource.get().rowByIndex(rowIndex);
+    };
+};

package/dist/state/api/row-detail-is-expanded.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowDetailIsExpanded: (grid: Grid<any>) => GridApi<any>["rowDetailIsExpanded"];

package/dist/state/api/row-detail-is-expanded.js

@@ -0,0 +1,6 @@
+export const makeRowDetailIsExpanded = (grid) => {
+    return (rowOrId) => {
+        const id = typeof rowOrId === "string" ? rowOrId : rowOrId.id;
+        return grid.state.rowDetailExpansions.get().has(id);
+    };
+};

package/dist/state/api/row-detail-rendered-height.d.ts

@@ -0,0 +1,5 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowDetailRenderedHeight: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["rowDetailRenderedHeight"];

package/dist/state/api/row-detail-rendered-height.js

@@ -0,0 +1,14 @@
+export const makeRowDetailRenderedHeight = (grid) => {
+    return (rowOrId) => {
+        const index = grid.state.rowDataSource
+            .get()
+            .rowToIndex(typeof rowOrId === "string" ? rowOrId : rowOrId.id);
+        if (index == null || !grid.api.rowDetailIsExpanded(rowOrId))
+            return 0;
+        const rowDetailHeight = grid.state.rowDetailHeight.get();
+        if (typeof rowDetailHeight === "number")
+            return rowDetailHeight;
+        const cache = grid.internal.rowDetailAutoHeightCache.get();
+        return cache[index] ?? grid.state.rowDetailAutoHeightGuess.get();
+    };
+};

package/dist/state/api/row-detail-toggle.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowDetailToggle: (grid: Grid<any>) => GridApi<any>["rowDetailToggle"];

package/dist/state/api/row-detail-toggle.js

@@ -0,0 +1,32 @@
+export const makeRowDetailToggle = (grid) => {
+    return (rowOrId, state) => {
+        const row = typeof rowOrId === "string" ? grid.api.rowById(rowOrId) : grid.api.rowById(rowOrId.id);
+        if (!row)
+            return;
+        const isExpanded = grid.api.rowDetailIsExpanded(rowOrId);
+        const v = state != null ? state : !isExpanded;
+        if (v === isExpanded)
+            return;
+        const s = grid.state.rowDetailExpansions.get();
+        const next = new Set(s);
+        if (v)
+            next.add(row.id);
+        else
+            next.delete(row.id);
+        let prevented = false;
+        grid.api.eventFire("rowDetailExpansionBegin", {
+            expansions: next,
+            grid: grid,
+            preventDefault: () => {
+                prevented = true;
+            },
+        });
+        if (prevented)
+            return;
+        grid.state.rowDetailExpansions.set(next);
+        grid.api.eventFire("rowDetailExpansionEnd", {
+            expansions: next,
+            grid: grid,
+        });
+    };
+};

package/dist/state/api/row-group-apply-expansions.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowGroupApplyExpansions: (grid: Grid<any>) => GridApi<any>["rowGroupApplyExpansions"];

package/dist/state/api/row-group-apply-expansions.js

@@ -0,0 +1,20 @@
+export const makeRowGroupApplyExpansions = (grid) => {
+    return (expansions) => {
+        const api = grid.api;
+        let prevented = false;
+        const preventNext = () => {
+            prevented = true;
+        };
+        try {
+            api.eventFire("rowExpandBegin", { expansions, grid, preventDefault: preventNext });
+            if (prevented)
+                return;
+            const rds = grid.state.rowDataSource.get();
+            rds.rowExpand(expansions);
+            api.eventFire("rowExpand", { expansions, grid });
+        }
+        catch (error) {
+            api.eventFire("rowExpandError", { expansions, grid, error });
+        }
+    };
+};

package/dist/state/api/row-group-column-index.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowGroupColumnIndex: (grid: Grid<any>) => GridApi<any>["rowGroupColumnIndex"];

package/dist/state/api/row-group-column-index.js

@@ -0,0 +1,14 @@
+import { GROUP_COLUMN_PREFIX, GROUP_COLUMN_SINGLE_ID, GROUP_COLUMN_TREE_DATA, } from "@1771technologies/lytenyte-shared";
+export const makeRowGroupColumnIndex = (grid) => {
+    return (c) => {
+        if (!grid.state.rowGroupModel.get().length || !c.id.startsWith(GROUP_COLUMN_PREFIX)) {
+            return -1;
+        }
+        if (c.id === GROUP_COLUMN_SINGLE_ID || c.id === GROUP_COLUMN_TREE_DATA)
+            return 0;
+        const n = c.id.split(":").at(-1);
+        if (n == null)
+            return -1;
+        return Number.parseInt(n);
+    };
+};

package/dist/state/api/row-group-is-expanded.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowGroupIsExpanded: (grid: Grid<any>) => GridApi<any>["rowGroupIsExpanded"];

package/dist/state/api/row-group-is-expanded.js

@@ -0,0 +1,15 @@
+export const makeRowGroupIsExpanded = (grid) => {
+    return (row) => {
+        const mode = grid.state.columnPivotMode.get();
+        const expansions = mode
+            ? grid.state.columnPivotRowGroupExpansions.get()
+            : grid.state.rowGroupExpansions.get();
+        const expanded = expansions[row.id];
+        if (typeof expanded === "boolean")
+            return expanded;
+        const defaultExpansion = grid.state.rowGroupDefaultExpansion.get();
+        if (typeof defaultExpansion === "boolean")
+            return defaultExpansion;
+        return row.depth <= defaultExpansion;
+    };
+};

package/dist/state/api/row-group-toggle.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowGroupToggle: (grid: Grid<any>) => GridApi<any>["rowGroupToggle"];

package/dist/state/api/row-group-toggle.js

@@ -0,0 +1,7 @@
+export const makeRowGroupToggle = (grid) => {
+    return (row, state) => {
+        const api = grid.api;
+        const next = state == null ? !api.rowGroupIsExpanded(row) : state;
+        api.rowGroupApplyExpansions({ [row.id]: next });
+    };
+};

package/dist/state/api/row-handle-select.d.ts

@@ -0,0 +1,5 @@
+import type { Grid, GridApi } from "../../+types";
+import type { InternalAtoms } from "../+types";
+export declare const makeRowHandleSelect: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["rowHandleSelect"];

package/dist/state/api/row-handle-select.js

@@ -0,0 +1,43 @@
+import { getNearestRow, getRowIndexFromEl } from "@1771technologies/lytenyte-shared";
+export const makeRowHandleSelect = (grid) => {
+    return (e) => {
+        const mode = grid.state.rowSelectionMode.get();
+        if (mode === "none")
+            return;
+        const rowEl = getNearestRow(e.target);
+        if (!rowEl)
+            return;
+        const row = grid.api.rowByIndex(getRowIndexFromEl(rowEl));
+        if (!row)
+            return;
+        if (mode === "single") {
+            grid.api.rowSelect({
+                selected: row.id,
+                deselect: grid.state.rowSelectedIds.get().has(row.id),
+            });
+            return;
+        }
+        if (mode === "multiple") {
+            // We are doing an additive select
+            if (e.shiftKey) {
+                const isDeselect = grid.internal.rowSelectionLastWasDeselect.get();
+                grid.api.rowSelect({
+                    selected: row.id,
+                    deselect: isDeselect,
+                    selectBetweenPivot: true,
+                    selectChildren: grid.state.rowSelectChildren.get(),
+                });
+            }
+            else {
+                const isDeselect = grid.state.rowSelectedIds.get().has(row.id);
+                grid.api.rowSelect({
+                    selected: row.id,
+                    deselect: isDeselect,
+                    pivot: row.id,
+                    selectBetweenPivot: false,
+                    selectChildren: grid.state.rowSelectChildren.get(),
+                });
+            }
+        }
+    };
+};

package/dist/state/api/row-select-all.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowSelectAll: (grid: Grid<any>) => GridApi<any>["rowSelectAll"];

package/dist/state/api/row-select-all.js

@@ -0,0 +1,17 @@
+export const makeRowSelectAll = (grid) => {
+    return (p) => {
+        let stop = false;
+        grid.api.eventFire("rowSelectAllBegin", {
+            deselect: p?.deselect ?? false,
+            grid,
+            preventDefault: () => {
+                stop = true;
+            },
+        });
+        if (stop)
+            return;
+        const rds = grid.state.rowDataSource.get();
+        rds.rowSelectAll(p ?? {});
+        grid.api.eventFire("rowSelectAllEnd", { deselect: !!p?.deselect, grid });
+    };
+};

package/dist/state/api/row-select.d.ts

@@ -0,0 +1,5 @@
+import type { InternalAtoms } from "../+types";
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowSelect: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["rowSelect"];

package/dist/state/api/row-select.js

@@ -0,0 +1,35 @@
+export const makeRowSelect = (grid) => {
+    return (params) => {
+        let stop = false;
+        grid.api.eventFire("rowSelectBegin", {
+            grid,
+            preventDefault: () => {
+                stop = true;
+            },
+            selected: params.selected,
+            deselect: !!params.deselect,
+        });
+        if (stop)
+            return;
+        const rds = grid.state.rowDataSource.get();
+        if (params.pivot)
+            grid.internal.rowSelectionPivot.set(params.selected);
+        else if (!params.selectBetweenPivot)
+            grid.internal.rowSelectionPivot.set(null);
+        const pivot = grid.internal.rowSelectionPivot.get() ?? params.selected;
+        rds.rowSelect({
+            deselect: !!params.deselect,
+            startId: params.selected,
+            endId: params.selectBetweenPivot ? pivot : params.selected,
+            selectChildren: !!params.selectChildren,
+            mode: grid.state.rowSelectionMode.get(),
+        });
+        if (!params.selectBetweenPivot)
+            grid.internal.rowSelectionLastWasDeselect.set(!!params.deselect);
+        grid.api.eventFire("rowSelectEnd", {
+            grid,
+            selected: params.selected,
+            deselect: !!params.deselect,
+        });
+    };
+};

package/dist/state/api/row-selected.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeRowSelected: (grid: Grid<any>) => GridApi<any>["rowSelected"];

package/dist/state/api/row-selected.js

@@ -0,0 +1,13 @@
+export const makeRowSelected = (grid) => {
+    return () => {
+        const selected = grid.state.rowSelectedIds.get();
+        const rds = grid.state.rowDataSource.get();
+        const rows = [];
+        for (const id of selected) {
+            const row = rds.rowById(id);
+            if (row)
+                rows.push(row);
+        }
+        return rows;
+    };
+};

package/dist/state/api/scroll-into-view.d.ts

@@ -0,0 +1,5 @@
+import type { Grid, GridApi } from "../../+types";
+import type { InternalAtoms } from "../+types";
+export declare const makeScrollIntoView: (grid: Grid<any> & {
+    internal: InternalAtoms;
+}) => GridApi<any>["scrollIntoView"];

package/dist/state/api/scroll-into-view.js

@@ -0,0 +1,50 @@
+import { columnScrollIntoViewValue, rowScrollIntoViewValue, } from "@1771technologies/lytenyte-shared";
+export const makeScrollIntoView = (grid) => {
+    return (opts) => {
+        const vp = grid.state.viewport.get();
+        if (!vp)
+            return;
+        let x = undefined;
+        let y = undefined;
+        const col = opts.column;
+        if (col != null) {
+            const meta = grid.state.columnMeta.get();
+            let colIndex;
+            if (typeof col === "number")
+                colIndex = col;
+            else if (typeof col === "string")
+                colIndex = meta.columnsVisible.findIndex((c) => c.id === col);
+            else
+                colIndex = meta.columnsVisible.findIndex((c) => c.id === col.id);
+            if (colIndex !== -1) {
+                x = columnScrollIntoViewValue({
+                    centerCount: meta.columnsVisible.filter((c) => c.pin !== "start" && c.pin !== "end")
+                        .length,
+                    startCount: meta.columnsVisible.filter((c) => c.pin === "start").length,
+                    endCount: meta.columnsVisible.filter((c) => c.pin === "end").length,
+                    columnIndex: colIndex,
+                    columnPositions: grid.state.xPositions.get(),
+                    viewport: vp,
+                });
+            }
+        }
+        const row = opts.row;
+        if (row != null) {
+            y = rowScrollIntoViewValue({
+                bottomCount: grid.state.rowDataStore.rowBottomCount.get(),
+                topCount: grid.state.rowDataStore.rowTopCount.get(),
+                rowCount: grid.state.rowDataStore.rowCount.get(),
+                headerHeight: grid.internal.headerHeightTotal.get(),
+                rowIndex: row,
+                rowPositions: grid.state.yPositions.get(),
+                viewport: vp,
+            });
+        }
+        const rtl = grid.state.rtl.get();
+        vp.scrollTo({
+            left: x != null ? x * (rtl ? -1 : 1) : undefined,
+            top: y,
+            behavior: opts.behavior ?? "auto",
+        });
+    };
+};

package/dist/state/api/sort-for-column.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeSortForColumn: (grid: Grid<any>) => GridApi<any>["sortForColumn"];

package/dist/state/api/sort-for-column.js

@@ -0,0 +1,9 @@
+export const makeSortForColumn = (grid) => {
+    return (id) => {
+        const model = grid.state.sortModel.get();
+        const index = model.findIndex((c) => c.columnId === id);
+        if (index === -1)
+            return null;
+        return { index, sort: model[index] };
+    };
+};

package/dist/state/api/use-row-drag.d.ts

@@ -0,0 +1,2 @@
+import type { Grid, GridApi } from "../../+types";
+export declare const makeUseRowDrag: (grid: Grid<any>) => GridApi<any>["useRowDrag"];

package/dist/state/api/use-row-drag.js

@@ -0,0 +1,27 @@
+import { getNearestRow, getRowIndexFromEl, useDraggable } from "@1771technologies/lytenyte-shared";
+export const makeUseRowDrag = (grid) => {
+    return (params) => {
+        const c = useDraggable({
+            ...params,
+            placeholder: params.placeholder
+                ? (d) => {
+                    return params.placeholder({
+                        grid,
+                        dragData: d,
+                    });
+                }
+                : undefined,
+            getItems: (el) => {
+                const nearestRow = getNearestRow(el);
+                if (!nearestRow)
+                    return {};
+                const rowIndex = getRowIndexFromEl(nearestRow);
+                const row = grid.api.rowByIndex(rowIndex);
+                if (!row)
+                    return {};
+                return params.getDragData({ grid, row });
+            },
+        });
+        return c;
+    };
+};

package/dist/state/helpers/cell-row-group.d.ts

@@ -0,0 +1,2 @@
+import type { CellRendererParams } from "../../+types";
+export declare function CellRowGroup<T>({ column, row, grid }: CellRendererParams<T>): import("react/jsx-runtime").JSX.Element;

package/dist/state/helpers/cell-row-group.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CellRowGroup({ column, row, grid }) {
+    if (grid.api.rowIsLeaf(row))
+        return _jsx("div", {});
+    const multi = grid.state.rowGroupDisplayMode.get() === "multi-column";
+    if (multi) {
+        const index = grid.api.rowGroupColumnIndex(column);
+        if (index !== row.depth)
+            return _jsx("div", {});
+    }
+    return (_jsx("div", { onClick: () => grid.api.rowGroupToggle(row), style: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            height: "100%",
+            paddingInline: "8px",
+            boxSizing: "border-box",
+        }, children: row.key }));
+}

package/dist/state/helpers/column-add-row-group.d.ts

@@ -0,0 +1,9 @@
+import type { Column, RowGroupColumn, RowGroupDisplayMode, RowGroupModelItem } from "../../+types.js";
+interface ColumnHandleGroupColumnArgs<T> {
+    readonly columns: Column<T>[];
+    readonly rowGroupTemplate: RowGroupColumn<T>;
+    readonly rowGroupModel: RowGroupModelItem<T>[];
+    readonly rowGroupDisplayMode: RowGroupDisplayMode;
+}
+export declare function columnAddRowGroup<T>({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, }: ColumnHandleGroupColumnArgs<T>): Column<T>[];
+export {};

package/dist/state/helpers/column-add-row-group.js

@@ -0,0 +1,66 @@
+import { GROUP_COLUMN_MULTI_PREFIX, GROUP_COLUMN_PREFIX, GROUP_COLUMN_SINGLE_ID, } from "@1771technologies/lytenyte-shared";
+import { itemsWithIdToMap } from "@1771technologies/lytenyte-js-utils";
+import { CellRowGroup } from "./cell-row-group.js";
+const baseGroup = {
+    name: "Group",
+    cellRenderer: CellRowGroup,
+    field: (d) => {
+        if (d.data.kind === "leaf")
+            return null;
+        return d.data.key;
+    },
+};
+export function columnAddRowGroup({ columns, rowGroupModel, rowGroupDisplayMode, rowGroupTemplate, }) {
+    const lookup = itemsWithIdToMap(columns);
+    rowGroupModel.forEach((c) => {
+        if (typeof c === "string")
+            return;
+        lookup.set(c.id, c);
+    });
+    const isSingleGroupDisplay = rowGroupDisplayMode === "single-column";
+    const isMultiGroupDisplay = rowGroupDisplayMode === "multi-column";
+    const hasGroupColumn = rowGroupModel.length > 0 && (isSingleGroupDisplay || isMultiGroupDisplay);
+    if (hasGroupColumn && isSingleGroupDisplay) {
+        columns = columns.filter((c) => !c.id.startsWith(GROUP_COLUMN_MULTI_PREFIX));
+        if (!lookup.has(GROUP_COLUMN_SINGLE_ID)) {
+            const groupColumn = { ...baseGroup, ...rowGroupTemplate, id: GROUP_COLUMN_SINGLE_ID };
+            columns.unshift(groupColumn);
+        }
+    }
+    if (hasGroupColumn && isMultiGroupDisplay) {
+        const weNeedXColumns = rowGroupModel.length;
+        columns = columns.filter((c) => {
+            const posCnt = c.id.startsWith(GROUP_COLUMN_MULTI_PREFIX)
+                ? Number.parseInt(c.id.split(":").at(-1))
+                : null;
+            if (c.id === GROUP_COLUMN_SINGLE_ID || (posCnt != null && posCnt >= weNeedXColumns))
+                return false;
+            return true;
+        });
+        let reorder = false;
+        for (let i = weNeedXColumns - 1; i >= 0; i--) {
+            const columnId = `${GROUP_COLUMN_MULTI_PREFIX}${i}`;
+            if (!lookup.has(columnId)) {
+                const column = { ...baseGroup, ...rowGroupTemplate, id: columnId };
+                columns.unshift(column);
+                reorder = true;
+                lookup.set(columnId, column);
+            }
+            const groupColumn = lookup.get(columnId);
+            const modelItem = rowGroupModel[i];
+            const referenceColumn = lookup.get(typeof modelItem === "string" ? modelItem : modelItem.id);
+            groupColumn.headerName =
+                referenceColumn?.name ?? referenceColumn?.id ?? `Group ${i}`;
+        }
+        if (reorder) {
+            const group = columns
+                .filter((c) => c.id.startsWith(GROUP_COLUMN_MULTI_PREFIX))
+                .sort((l, r) => l.id.localeCompare(r.id));
+            const nonGroup = columns.filter((c) => !c.id.startsWith(GROUP_COLUMN_MULTI_PREFIX));
+            columns = [...group, ...nonGroup];
+        }
+    }
+    if (!hasGroupColumn)
+        columns = columns.filter((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX));
+    return columns;
+}

package/dist/state/helpers/column-layout.d.ts

@@ -0,0 +1,3 @@
+import type { PathTableItem, SpanLayout } from "@1771technologies/lytenyte-shared";
+import type { Column, ColumnGroupMeta, HeaderLayoutCell, PositionUnion } from "../../+types";
+export declare function makeColumnLayout<T>(combinedView: PathTableItem<Column<T>>[][], groupMeta: ColumnGroupMeta, b: SpanLayout, focus: PositionUnion | null, floatingRowEnabled: boolean): HeaderLayoutCell<T>[][];

package/dist/state/helpers/column-layout.js

@@ -0,0 +1,65 @@
+import { rangesOverlap } from "@1771technologies/lytenyte-js-utils";
+export function makeColumnLayout(combinedView, groupMeta, b, focus, floatingRowEnabled) {
+    const layout = [];
+    const floatingRow = [];
+    for (let r = 0; r < combinedView.length; r++) {
+        const row = combinedView[r];
+        const rowLayout = [];
+        for (let i = 0; i < row.length; i++) {
+            const c = row[i];
+            const colS = c.colStart;
+            const colE = c.colStart + c.colSpan;
+            if (!rangesOverlap(colS, colE, b.colStartStart, b.colStartEnd) && // not in start area
+                !rangesOverlap(colS, colE, b.colCenterStart, b.colCenterEnd) && // not in center area
+                !rangesOverlap(colS, colE, b.colEndStart, b.colEndEnd) && // not in end area
+                !(focus && rangesOverlap(colS, colE, focus.colIndex, focus.colIndex + 1)) // not if a cell in the column is focused
+            ) {
+                continue;
+            }
+            const colPin = colS < b.colStartEnd ? "start" : colS >= b.colEndStart ? "end" : null;
+            if (c.kind === "leaf") {
+                const vals = {
+                    id: c.data.id,
+                    colPin,
+                    column: c.data,
+                    rowStart: c.rowStart,
+                    rowEnd: c.rowStart + c.rowSpan,
+                    rowSpan: c.rowSpan,
+                    colStart: c.colStart,
+                    colEnd: c.colStart + c.colSpan,
+                    colSpan: c.colSpan,
+                    colFirstEndPin: c.colStart === b.colCenterLast ? true : undefined,
+                    colLastStartPin: c.colStart + c.colSpan === b.colStartEnd ? true : undefined,
+                };
+                rowLayout.push({ kind: "cell", ...vals });
+                if (floatingRowEnabled) {
+                    floatingRow.push({ kind: "floating", ...vals });
+                }
+                continue;
+            }
+            rowLayout.push({
+                kind: "group",
+                colPin,
+                id: c.data.id,
+                isCollapsible: groupMeta.groupIsCollapsible.get(c.data.id),
+                idOccurrence: c.data.idOccurrence,
+                rowStart: c.rowStart,
+                rowEnd: c.rowStart + c.rowSpan,
+                rowSpan: c.rowSpan,
+                colStart: c.colStart,
+                colEnd: c.colStart + c.colSpan,
+                colSpan: c.colSpan,
+                columnIds: [...c.data.idsInNode],
+                groupPath: c.data.groupPath,
+                start: c.data.start,
+                end: c.data.end,
+                colFirstEndPin: c.colStart === b.colCenterLast ? true : undefined,
+                colLastStartPin: c.colStart + c.colSpan === b.colStartEnd ? true : undefined,
+            });
+        }
+        layout.push(rowLayout);
+    }
+    if (floatingRowEnabled)
+        layout.push(floatingRow);
+    return layout;
+}

package/dist/state/helpers/column-marker.d.ts

@@ -0,0 +1,8 @@
+import type { Column, ColumnMarker } from "../../+types";
+interface ColumnHandleMarkerArgs<T> {
+    readonly columns: Column<T>[];
+    readonly marker: ColumnMarker<T>;
+    readonly markerEnabled: boolean;
+}
+export declare function columnHandleMarker<T>({ columns, marker, markerEnabled, }: ColumnHandleMarkerArgs<T>): Column<T>[];
+export {};