@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/virtualizer/table-layout.js

@@ -0,0 +1,482 @@
+import { getChildNodes } from "./collection.js";
+import { LayoutInfo } from "./layout-info.js";
+import { ListLayout } from "./list-layout.js";
+import { Rect } from "./rect.js";
+import { Size } from "./size.js";
+import { TableColumnLayout } from "./table-column-layout.js";
+const DEFAULT_ROW_HEIGHT = 48;
+/** Arranges items in rows and columns (sticky header, row groups, per-cell virtualization along x). */
+export class TableLayout extends ListLayout {
+    lastCollection = null;
+    columnWidths = new Map();
+    stickyColumnIndices;
+    lastPersistedKeys = null;
+    persistedIndices = new Map();
+    constructor(options) {
+        super(options);
+        this.stickyColumnIndices = [];
+    }
+    // Backward compatibility for subclassing.
+    get collection() {
+        return this.virtualizer.collection;
+    }
+    get table() {
+        return this.virtualizer.collection;
+    }
+    columnsChanged(newCollection, oldCollection) {
+        return (!oldCollection ||
+            (newCollection.columns !== oldCollection.columns && newCollection.columns.length !== oldCollection.columns.length) ||
+            newCollection.columns.some((c, i) => c.key !== oldCollection.columns[i].key ||
+                c.props.width !== oldCollection.columns[i].props.width ||
+                c.props.minWidth !== oldCollection.columns[i].props.minWidth ||
+                c.props.maxWidth !== oldCollection.columns[i].props.maxWidth));
+    }
+    shouldInvalidateLayoutOptions(newOptions, oldOptions) {
+        return newOptions.columnWidths !== oldOptions.columnWidths || super.shouldInvalidateLayoutOptions(newOptions, oldOptions);
+    }
+    update(invalidationContext) {
+        const newCollection = this.table;
+        // Column widths from layoutOptions, else computed here.
+        if (invalidationContext.layoutOptions?.columnWidths) {
+            for (const [key, val] of invalidationContext.layoutOptions.columnWidths) {
+                if (this.columnWidths.get(key) !== val) {
+                    this.columnWidths = invalidationContext.layoutOptions.columnWidths;
+                    invalidationContext.sizeChanged = true;
+                    break;
+                }
+            }
+        }
+        else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
+            const columnLayout = new TableColumnLayout({});
+            this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer.size.width - this.padding * 2, newCollection, new Map());
+            invalidationContext.sizeChanged = true;
+        }
+        super.update(invalidationContext);
+    }
+    buildCollection() {
+        this.stickyColumnIndices = [];
+        const collection = this.table;
+        for (const column of collection.columns) {
+            // Sticky columns (selection cell) always need to be visible; row headers stay in the DOM for labeling.
+            if (this.isStickyColumn(column) || collection.rowHeaderColumnKeys.has(column.key))
+                this.stickyColumnIndices.push(column.index);
+        }
+        let layoutNodes = [];
+        let y = 0;
+        let width = 0;
+        if (!collection.head) {
+            const header = this.buildTableHeader();
+            this.layoutNodes.set(header.layoutInfo.key, header);
+            const body = this.buildBody(header.layoutInfo.rect.maxY + this.gap);
+            body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
+            y = body.layoutInfo.rect.maxY;
+            width = body.layoutInfo.rect.width;
+            layoutNodes = [header, body];
+        }
+        else {
+            for (const node of collection) {
+                switch (node.type) {
+                    case "tableheader": {
+                        const header = this.buildTableHeader();
+                        y = header.layoutInfo.rect.maxY + this.gap;
+                        width = Math.max(width, header.layoutInfo.rect.width);
+                        this.layoutNodes.set(header.layoutInfo.key, header);
+                        layoutNodes.push(header);
+                        break;
+                    }
+                    case "tablebody":
+                    case "tablefooter": {
+                        const body = this.buildRowGroup(y, node);
+                        y = body.layoutInfo.rect.maxY + this.gap;
+                        width = Math.max(width, body.layoutInfo.rect.width);
+                        this.layoutNodes.set(body.layoutInfo.key, body);
+                        layoutNodes.push(body);
+                        break;
+                    }
+                }
+            }
+            if (y > 0)
+                y -= this.gap;
+            for (const layoutNode of layoutNodes)
+                layoutNode.layoutInfo.rect.width = width;
+        }
+        this.lastPersistedKeys = null;
+        this.contentSize = new Size(width + this.padding * 2, y + this.padding);
+        return layoutNodes;
+    }
+    buildTableHeader() {
+        const collection = this.table;
+        const rect = new Rect(this.padding, this.padding, 0, 0);
+        const layoutInfo = new LayoutInfo("header", collection.head?.key ?? "header", rect);
+        layoutInfo.isSticky = true;
+        layoutInfo.zIndex = 1;
+        let y = this.padding;
+        let width = 0;
+        const children = [];
+        for (const headerRow of collection.headerRows) {
+            const layoutNode = this.buildChild(headerRow, this.padding, y, layoutInfo.key);
+            layoutNode.layoutInfo.parentKey = layoutInfo.key;
+            y = layoutNode.layoutInfo.rect.maxY;
+            width = Math.max(width, layoutNode.layoutInfo.rect.width);
+            layoutNode.index = children.length;
+            children.push(layoutNode);
+        }
+        rect.width = width;
+        rect.height = y - this.padding;
+        return { layoutInfo, children, validRect: layoutInfo.rect, node: collection.head };
+    }
+    buildHeaderRow(headerRow, x, y) {
+        const rect = new Rect(x, y, 0, 0);
+        const row = new LayoutInfo("headerrow", headerRow.key, rect);
+        let height = 0;
+        const columns = [];
+        for (const cell of getChildNodes(headerRow, this.virtualizer.collection)) {
+            const layoutNode = this.buildChild(cell, x, y, row.key);
+            layoutNode.layoutInfo.parentKey = row.key;
+            x = layoutNode.layoutInfo.rect.maxX;
+            height = Math.max(height, layoutNode.layoutInfo.rect.height);
+            layoutNode.index = columns.length;
+            columns.push(layoutNode);
+        }
+        for (const [i, layout] of columns.entries())
+            layout.layoutInfo.zIndex = columns.length - i + 1;
+        this.setChildHeights(columns, height);
+        rect.height = height;
+        rect.width = x - rect.x;
+        return { layoutInfo: row, children: columns, validRect: rect, node: headerRow };
+    }
+    setChildHeights(children, height) {
+        for (const child of children) {
+            if (child.layoutInfo.rect.height !== height) {
+                // Copy the layout info before mutating it.
+                child.layoutInfo = child.layoutInfo.copy();
+                child.layoutInfo.rect.height = height;
+            }
+        }
+    }
+    // Column widths when rendering to the DOM.
+    getRenderedColumnWidth(node) {
+        const collection = this.table;
+        const colSpan = node.colSpan ?? 1;
+        const colIndex = node.colIndex ?? node.index;
+        let width = 0;
+        for (let i = colIndex; i < colIndex + colSpan; i++) {
+            const column = collection.columns[i];
+            if (column?.key != null)
+                width += this.columnWidths.get(column.key) ?? 0;
+        }
+        return width;
+    }
+    getEstimatedHeight(node, width, height, estimatedHeight) {
+        let isEstimated = false;
+        // If no explicit height is available, use an estimated height.
+        if (height == null) {
+            // Reuse a previous height; estimated if the collection view size or the item content changed.
+            const previousLayoutNode = this.layoutNodes.get(node.key);
+            if (previousLayoutNode) {
+                height = previousLayoutNode.layoutInfo.rect.height;
+                isEstimated = node !== previousLayoutNode.node || width !== previousLayoutNode.layoutInfo.rect.width || previousLayoutNode.layoutInfo.estimatedSize;
+            }
+            else {
+                height = estimatedHeight ?? DEFAULT_ROW_HEIGHT;
+                isEstimated = true;
+            }
+        }
+        return { height, isEstimated };
+    }
+    getEstimatedRowHeight() {
+        return this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_ROW_HEIGHT;
+    }
+    buildColumn(node, x, y) {
+        const width = this.getRenderedColumnWidth(node);
+        const { height, isEstimated } = this.getEstimatedHeight(node, width, this.headingHeight ?? this.rowHeight, this.estimatedHeadingHeight ?? this.estimatedRowHeight);
+        const layoutInfo = new LayoutInfo(node.type, node.key, new Rect(x, y, width, height));
+        layoutInfo.isSticky = this.isStickyColumn(node);
+        layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
+        layoutInfo.estimatedSize = isEstimated;
+        return { layoutInfo, children: [], validRect: layoutInfo.rect, node };
+    }
+    // For subclasses.
+    isStickyColumn(_node) {
+        return false;
+    }
+    buildBody(y) {
+        return this.buildRowGroup(y, this.table.body);
+    }
+    buildRowGroup(y, node) {
+        const collection = this.table;
+        const rect = new Rect(this.padding, y, 0, 0);
+        const layoutInfo = new LayoutInfo("rowgroup", node.key, rect);
+        const startY = y;
+        let width = 0;
+        const children = [];
+        const rowHeight = this.getEstimatedRowHeight() + this.gap;
+        for (const child of getChildNodes(node, collection)) {
+            // Skip rows outside the valid rectangle unless they are already cached.
+            if ((y + rowHeight < this.requestedRect.y && !this.isValid(child, y)) || (y > this.requestedRect.maxY && child.type !== "loader")) {
+                y += rowHeight;
+                continue;
+            }
+            const layoutNode = this.buildChild(child, this.padding, y, layoutInfo.key);
+            layoutNode.layoutInfo.parentKey = layoutInfo.key;
+            layoutNode.index = children.length;
+            y = layoutNode.layoutInfo.rect.maxY + this.gap;
+            width = Math.max(width, layoutNode.layoutInfo.rect.width);
+            children.push(layoutNode);
+        }
+        // The table body gets a height when empty or performing the initial load.
+        if (collection?.size === 0)
+            y = this.virtualizer.size.height;
+        else
+            y -= this.gap;
+        rect.width = width;
+        rect.height = y - startY;
+        return { layoutInfo, children, validRect: layoutInfo.rect.intersection(this.requestedRect), node };
+    }
+    buildLoader(node, x, y) {
+        const layoutNode = super.buildLoader(node, x, y);
+        // Same approach as buildRow for the loader width (else outdated).
+        layoutNode.layoutInfo.rect.width = this.layoutNodes.get(this.table.head?.key ?? "header").layoutInfo.rect.width;
+        layoutNode.validRect = layoutNode.layoutInfo.rect.intersection(this.requestedRect);
+        return layoutNode;
+    }
+    buildNode(node, x, y) {
+        switch (node.type) {
+            case "headerrow":
+                return this.buildHeaderRow(node, x, y);
+            case "item":
+                return this.buildRow(node, x, y);
+            case "column":
+            case "placeholder":
+                return this.buildColumn(node, x, y);
+            case "cell":
+                return this.buildCell(node, x, y);
+            case "loader":
+                return this.buildLoader(node, x, y);
+            default:
+                throw new Error("Unknown node type " + node.type);
+        }
+    }
+    buildRow(node, x, y) {
+        const collection = this.table;
+        const rect = new Rect(x, y, 0, 0);
+        const layoutInfo = new LayoutInfo("row", node.key, rect);
+        const children = [];
+        let height = 0;
+        for (const child of getChildNodes(node, collection)) {
+            if (child.type !== "cell")
+                continue;
+            if (x > this.requestedRect.maxX) {
+                // Move an existing cached layoutInfo out of view (column resizing).
+                const layoutNode = this.layoutNodes.get(child.key);
+                if (layoutNode) {
+                    layoutNode.layoutInfo.rect.x = x;
+                    x += layoutNode.layoutInfo.rect.width;
+                }
+                else {
+                    break;
+                }
+            }
+            else {
+                const layoutNode = this.buildChild(child, x, y, layoutInfo.key);
+                x = layoutNode.layoutInfo.rect.maxX;
+                height = Math.max(height, layoutNode.layoutInfo.rect.height);
+                layoutNode.index = children.length;
+                children.push(layoutNode);
+            }
+        }
+        this.setChildHeights(children, height);
+        rect.width = this.layoutNodes.get(collection.head?.key ?? "header").layoutInfo.rect.width;
+        rect.height = height;
+        return { layoutInfo, children, validRect: rect.intersection(this.requestedRect), node };
+    }
+    buildCell(node, x, y) {
+        const width = this.getRenderedColumnWidth(node);
+        const { height, isEstimated } = this.getEstimatedHeight(node, width, this.rowHeight, this.estimatedRowHeight);
+        const rect = new Rect(x, y, width, height);
+        const layoutInfo = new LayoutInfo(node.type, node.key, rect);
+        layoutInfo.isSticky = this.isStickyColumn(node);
+        layoutInfo.zIndex = layoutInfo.isSticky ? 2 : 1;
+        layoutInfo.estimatedSize = isEstimated;
+        return { layoutInfo, children: [], validRect: rect, node };
+    }
+    getVisibleLayoutInfos(rect) {
+        // Keep the number of visible rows consistent (only if > 1 px, for getDropTargetFromPoint).
+        if (rect.height > 1) {
+            const rowHeight = this.getEstimatedRowHeight();
+            // Mutates `rect` like the original (getDropTargetFromPoint then tests candidates against the snapped rect).
+            rect.y = Math.floor(rect.y / rowHeight) * rowHeight;
+            rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;
+        }
+        // If layout hasn't yet been done for the requested rect, union it with the valid rect, and recompute.
+        this.layoutIfNeeded(rect);
+        const res = [];
+        this.buildPersistedIndices();
+        for (const node of this.rootNodes) {
+            res.push(node.layoutInfo);
+            this.addVisibleLayoutInfos(res, node, rect);
+        }
+        return res;
+    }
+    addVisibleLayoutInfos(res, node, rect) {
+        if (!node.children || node.children.length === 0)
+            return;
+        switch (node.layoutInfo.type) {
+            case "header": {
+                for (const child of node.children) {
+                    res.push(child.layoutInfo);
+                    this.addVisibleLayoutInfos(res, child, rect);
+                }
+                break;
+            }
+            case "rowgroup": {
+                const firstVisibleRow = this.binarySearch(node.children, rect.topLeft, "y");
+                const lastVisibleRow = this.binarySearch(node.children, rect.bottomRight, "y");
+                // Persisted rows before the visible rows.
+                const persistedRowIndices = this.persistedIndices.get(node.layoutInfo.key);
+                let persistIndex = 0;
+                while (persistedRowIndices && persistIndex < persistedRowIndices.length && persistedRowIndices[persistIndex] < firstVisibleRow) {
+                    const idx = persistedRowIndices[persistIndex];
+                    if (idx < node.children.length) {
+                        res.push(node.children[idx].layoutInfo);
+                        this.addVisibleLayoutInfos(res, node.children[idx], rect);
+                    }
+                    persistIndex++;
+                }
+                for (let i = firstVisibleRow; i <= lastVisibleRow; i++) {
+                    // Skip persisted rows that overlap with visible cells.
+                    while (persistedRowIndices && persistIndex < persistedRowIndices.length && persistedRowIndices[persistIndex] < i)
+                        persistIndex++;
+                    res.push(node.children[i].layoutInfo);
+                    this.addVisibleLayoutInfos(res, node.children[i], rect);
+                }
+                // Persisted rows after the visible rows.
+                while (persistedRowIndices && persistIndex < persistedRowIndices.length) {
+                    const idx = persistedRowIndices[persistIndex++];
+                    if (idx < node.children.length) {
+                        res.push(node.children[idx].layoutInfo);
+                        this.addVisibleLayoutInfos(res, node.children[idx], rect);
+                    }
+                }
+                // Always include the loading sentinel (assumed to be the last child).
+                const lastRow = node.children.at(-1);
+                if (lastRow?.layoutInfo.type === "loader")
+                    res.push(lastRow.layoutInfo);
+                break;
+            }
+            case "headerrow":
+            case "row": {
+                const firstVisibleCell = this.binarySearch(node.children, rect.topLeft, "x");
+                const lastVisibleCell = this.binarySearch(node.children, rect.topRight, "x");
+                let stickyIndex = 0;
+                // Persisted / sticky cells before the visible cells.
+                const persistedCellIndices = this.persistedIndices.get(node.layoutInfo.key) || this.stickyColumnIndices;
+                while (stickyIndex < persistedCellIndices.length && persistedCellIndices[stickyIndex] < firstVisibleCell) {
+                    const idx = persistedCellIndices[stickyIndex];
+                    if (idx < node.children.length)
+                        res.push(node.children[idx].layoutInfo);
+                    stickyIndex++;
+                }
+                for (let i = firstVisibleCell; i <= lastVisibleCell; i++) {
+                    // Skip sticky cells that overlap with visible cells.
+                    while (stickyIndex < persistedCellIndices.length && persistedCellIndices[stickyIndex] < i)
+                        stickyIndex++;
+                    res.push(node.children[i].layoutInfo);
+                }
+                // Remaining sticky cells after the visible cells.
+                while (stickyIndex < persistedCellIndices.length) {
+                    const idx = persistedCellIndices[stickyIndex++];
+                    if (idx < node.children.length)
+                        res.push(node.children[idx].layoutInfo);
+                }
+                break;
+            }
+            default:
+                throw new Error("Unknown node type " + node.layoutInfo.type);
+        }
+    }
+    binarySearch(items, point, axis) {
+        let low = 0;
+        let high = items.length - 1;
+        while (low <= high) {
+            const mid = (low + high) >> 1;
+            const item = items[mid];
+            if ((axis === "x" && item.layoutInfo.rect.maxX <= point.x) || (axis === "y" && item.layoutInfo.rect.maxY <= point.y))
+                low = mid + 1;
+            else if ((axis === "x" && item.layoutInfo.rect.x > point.x) || (axis === "y" && item.layoutInfo.rect.y > point.y))
+                high = mid - 1;
+            else
+                return mid;
+        }
+        return Math.max(0, Math.min(items.length - 1, low));
+    }
+    buildPersistedIndices() {
+        if (this.virtualizer.persistedKeys === this.lastPersistedKeys)
+            return;
+        this.lastPersistedKeys = this.virtualizer.persistedKeys;
+        this.persistedIndices.clear();
+        // parentKey => indices of children to persist.
+        for (const key of this.virtualizer.persistedKeys) {
+            let layoutInfo = this.layoutNodes.get(key)?.layoutInfo;
+            // Walk up ancestors so parents are also persisted if children are.
+            while (layoutInfo && layoutInfo.parentKey) {
+                const collectionNode = this.virtualizer.collection.getItem(layoutInfo.key);
+                let indices = this.persistedIndices.get(layoutInfo.parentKey);
+                if (!indices) {
+                    // Sticky columns are always persisted along with any cells from persistedKeys.
+                    indices = collectionNode?.type === "cell" || collectionNode?.type === "column" ? [...this.stickyColumnIndices] : [];
+                    this.persistedIndices.set(layoutInfo.parentKey, indices);
+                }
+                const index = this.layoutNodes.get(layoutInfo.key)?.index;
+                if (index != null && !indices.includes(index))
+                    indices.push(index);
+                layoutInfo = this.layoutNodes.get(layoutInfo.parentKey)?.layoutInfo;
+            }
+        }
+        for (const indices of this.persistedIndices.values())
+            indices.sort((a, b) => a - b);
+    }
+    getDropTargetFromPoint(x, y, isValidDropTarget) {
+        x += this.virtualizer.visibleRect.x;
+        y += this.virtualizer.visibleRect.y;
+        // Find the closest row within on either side of the point using the gap width.
+        const searchRect = new Rect(x, Math.max(0, y - this.gap), 1, Math.max(1, this.gap * 2));
+        let key = null;
+        let minDistance = Infinity;
+        for (const candidate of this.getVisibleLayoutInfos(searchRect)) {
+            // Ignore items outside the search rect, e.g. persisted keys.
+            if (candidate.type !== "row" || !candidate.rect.intersects(searchRect))
+                continue;
+            const dist = Math.min(Math.abs(candidate.rect.y - y), Math.abs(candidate.rect.maxY - y));
+            if (dist < minDistance) {
+                minDistance = dist;
+                key = candidate.key;
+            }
+        }
+        if (key == null || this.virtualizer.collection.size === 0)
+            return { type: "root" };
+        const layoutInfo = this.getLayoutInfo(key);
+        if (!layoutInfo)
+            return null;
+        const rect = layoutInfo.rect;
+        const target = { type: "item", key: layoutInfo.key, dropPosition: "on" };
+        if (!isValidDropTarget(target)) {
+            if (y <= rect.y + rect.height / 2 && isValidDropTarget({ ...target, dropPosition: "before" }))
+                target.dropPosition = "before";
+            else if (isValidDropTarget({ ...target, dropPosition: "after" }))
+                target.dropPosition = "after";
+        }
+        else if (y <= rect.y + 10 && isValidDropTarget({ ...target, dropPosition: "before" })) {
+            target.dropPosition = "before";
+        }
+        else if (y >= rect.maxY - 10 && isValidDropTarget({ ...target, dropPosition: "after" })) {
+            target.dropPosition = "after";
+        }
+        return target;
+    }
+    getDropTargetLayoutInfo(target) {
+        const layoutInfo = super.getDropTargetLayoutInfo(target);
+        layoutInfo.parentKey = this.virtualizer.collection.getItem(target.key)?.parentKey ?? null;
+        return layoutInfo;
+    }
+}

package/virtualizer/types.d.ts

@@ -0,0 +1,63 @@
+import type { Key } from "../collections/index.js";
+import type { Collection } from "./collection.js";
+import type { Layout } from "./layout.js";
+import type { Rect } from "./rect.js";
+import type { Size } from "./size.js";
+export interface InvalidationContext<O = any> {
+    contentChanged?: boolean;
+    offsetChanged?: boolean;
+    sizeChanged?: boolean;
+    widthChanged?: boolean;
+    heightChanged?: boolean;
+    itemSizeChanged?: boolean;
+    layoutOptionsChanged?: boolean;
+    layoutOptions?: O;
+}
+export interface VirtualizerDelegate<T extends object, V> {
+    setVisibleRect(rect: Rect): void;
+    renderView(type: string, content: T | null): V;
+    invalidate(ctx: InvalidationContext): void;
+}
+export interface VirtualizerRenderOptions<T extends object, O = any> {
+    layout: Layout<T>;
+    collection: Collection<T>;
+    persistedKeys?: Set<Key> | null;
+    visibleRect: Rect;
+    size: Size;
+    invalidationContext: InvalidationContext;
+    isScrolling: boolean;
+    layoutOptions?: O;
+}
+export type Mutable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+export type { Direction, Orientation } from "../collections/types.js";
+export type DropPosition = "on" | "before" | "after";
+export interface RootDropTarget {
+    /** The event type. */
+    type: "root";
+}
+export interface ItemDropTarget {
+    /** The drop target type. */
+    type: "item";
+    /** The item key. */
+    key: Key;
+    /** The drop position relative to the item. */
+    dropPosition: DropPosition;
+}
+export type DropTarget = RootDropTarget | ItemDropTarget;
+export interface DropTargetDelegate {
+    /** Returns a drop target within a collection for the given x and y coordinates (relative to the visible rect). */
+    getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null;
+}
+/** A LayoutDelegate provides layout information for collection items. */
+export interface LayoutDelegate {
+    /** Returns a rectangle for the item with the given key. */
+    getItemRect(key: Key): Rect | null;
+    /** Returns the visible rectangle of the collection. */
+    getVisibleRect(): Rect;
+    /** Returns the size of the scrollable content in the collection. */
+    getContentSize(): Size;
+    /** Returns a list of keys between `from` and `to`. */
+    getKeyRange?(from: Key, to: Key): Key[];
+}

package/virtualizer/types.js

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

package/virtualizer/utils.d.ts

@@ -0,0 +1,2 @@
+/** Returns whether two sets are equal. */
+export declare function isSetEqual<T>(a: Set<T>, b: Set<T>): boolean;

package/virtualizer/utils.js

@@ -0,0 +1,12 @@
+// Ported from React Spectrum (react-stately/src/virtualizer/utils.ts), Apache-2.0, © Adobe.
+/** Returns whether two sets are equal. */
+export function isSetEqual(a, b) {
+    if (a === b)
+        return true;
+    if (a.size !== b.size)
+        return false;
+    for (const key of a)
+        if (!b.has(key))
+            return false;
+    return true;
+}

package/virtualizer/virtualizer-core.d.ts

@@ -0,0 +1,61 @@
+import type { Key } from "../collections/index.js";
+import type { Collection } from "./collection.js";
+import type { Layout } from "./layout.js";
+import type { LayoutInfo } from "./layout-info.js";
+import type { Point } from "./point.js";
+import { Rect } from "./rect.js";
+import { type ReusableView } from "./reusable-view.js";
+import { Size } from "./size.js";
+import type { InvalidationContext, VirtualizerDelegate, VirtualizerRenderOptions } from "./types.js";
+export interface VirtualizerOptions<T extends object, V> {
+    delegate: VirtualizerDelegate<T, V>;
+    collection: Collection<T>;
+    layout: Layout<T>;
+}
+/**
+ * Renders a scrollable collection using customizable layouts: only visible views exist, reused as the user
+ * scrolls. Layouts compute what is visible and where (LayoutInfo); the delegate renders each view.
+ */
+export declare class Virtualizer<T extends object, V> {
+    /** The virtualizer delegate, used to create and configure views. */
+    delegate: VirtualizerDelegate<T, V>;
+    /** The current content of the virtualizer. */
+    readonly collection: Collection<T>;
+    /** The layout object that determines the visible views. */
+    readonly layout: Layout<T>;
+    /** The size of the scrollable content. */
+    readonly contentSize: Size;
+    /** The currently visible rectangle. */
+    readonly visibleRect: Rect;
+    /** The size of the virtualizer scroll view. */
+    readonly size: Size;
+    /** The set of persisted keys that are always present in the DOM, even if not currently in view. */
+    readonly persistedKeys: Set<Key>;
+    private _visibleViews;
+    private _renderedContent;
+    private _rootView;
+    private _isScrolling;
+    private _invalidationContext;
+    private _overscanManager;
+    private _scrollAnchor;
+    private _viewKey;
+    constructor(options: VirtualizerOptions<T, V>);
+    /** @private Next ReusableView key. */
+    _nextViewKey(): number;
+    /** Returns whether the given key, or an ancestor, is persisted. */
+    isPersistedKey(key: Key): boolean;
+    private getParentView;
+    private getReusableView;
+    private _renderView;
+    private _renderContent;
+    /** Returns the key for the item view currently at the given point. */
+    keyAtPoint(point: Point): Key | null;
+    private relayout;
+    getVisibleLayoutInfos(): Map<Key, LayoutInfo>;
+    private updateSubviews;
+    /** Performs layout and updates visible views as needed. */
+    render(opts: VirtualizerRenderOptions<T>): ReusableView<T, V>[];
+    getVisibleView(key: Key): ReusableView<T, V> | undefined;
+    invalidate(context: InvalidationContext): void;
+    updateItemSize(key: Key, size: Size): void;
+}