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

package/collections/table.js

@@ -0,0 +1,439 @@
+// Ported from @react-stately/table (TableCollection.ts, TableHeader.ts, TableBody.ts, Column.ts, Row.ts,
+// Cell.ts, useTableState.ts sort logic), Apache-2.0, © Adobe.
+//
+// Data level only: the table collection (header rows incl. nested columns + placeholders, body rows,
+// cells, row-header columns, selection / drag columns), builder components and sort descriptors.
+import { countChildren, defineCollectionComponent, forEachChild } from "./builder.js";
+import { getFirstItem, getLastItem } from "./nodes.js";
+import { GridCollection } from "./grid.js";
+import { isSlot } from "@rivetjs/runtime/slot";
+// Deviation: react-stately randomises these keys at import time; Rivet keys must match between the
+// server render and the resumed client, so they are fixed strings.
+export const ROW_HEADER_COLUMN_KEY = "row-header-column-$selection";
+export const ROW_HEADER_COLUMN_KEY_DRAG = "row-header-column-$drag";
+/** @private Build the header rows from (leaf) columns and their ancestors. */
+export function buildHeaderRows(keyMap, columnNodes) {
+    if (columnNodes.length === 0)
+        return [];
+    const columns = [];
+    const seen = new Map();
+    for (const column of columnNodes) {
+        let parentKey = column.parentKey;
+        const col = [column];
+        while (parentKey != null) {
+            const parent = keyMap.get(parentKey);
+            if (!parent)
+                break;
+            // If we've already seen this parent, then it is shared with a previous column. If the current
+            // column is taller than the previous column, then we need to shift the parent in the previous
+            // column so it's level with the current column.
+            if (seen.has(parent)) {
+                parent.colSpan ??= 0;
+                parent.colSpan++;
+                parent.colspan = parent.colSpan;
+                const { column: prevColumn, index } = seen.get(parent);
+                if (index > col.length)
+                    break;
+                for (let i = index; i < col.length; i++)
+                    prevColumn.splice(i, 0, null);
+                // Adjust shifted indices.
+                for (let i = col.length; i < prevColumn.length; i++) {
+                    const c = prevColumn[i];
+                    if (c && seen.has(c))
+                        seen.get(c).index = i;
+                }
+            }
+            else {
+                parent.colSpan = 1;
+                parent.colspan = 1;
+                col.push(parent);
+                seen.set(parent, { column: col, index: col.length - 1 });
+            }
+            parentKey = parent.parentKey;
+        }
+        columns.push(col);
+        column.index = columns.length - 1;
+    }
+    const maxLength = Math.max(...columns.map((c) => c.length));
+    const headerRows = Array(maxLength)
+        .fill(0)
+        .map(() => []);
+    // Convert columns into rows.
+    let colIndex = 0;
+    for (const column of columns) {
+        let i = maxLength - 1;
+        for (const item of column) {
+            if (item) {
+                // Fill the space up until the current column with a placeholder.
+                const row = headerRows[i];
+                const rowLength = row.reduce((p, c) => p + (c.colSpan ?? 1), 0);
+                if (rowLength < colIndex) {
+                    const placeholder = {
+                        type: "placeholder",
+                        key: "placeholder-" + item.key,
+                        colspan: colIndex - rowLength,
+                        colSpan: colIndex - rowLength,
+                        index: rowLength,
+                        value: null,
+                        rendered: null,
+                        level: i,
+                        hasChildNodes: false,
+                        childNodes: [],
+                        textValue: "",
+                    };
+                    if (row.length > 0) {
+                        row[row.length - 1].nextKey = placeholder.key;
+                        placeholder.prevKey = row[row.length - 1].key;
+                    }
+                    row.push(placeholder);
+                }
+                if (row.length > 0) {
+                    row[row.length - 1].nextKey = item.key;
+                    item.prevKey = row[row.length - 1].key;
+                }
+                item.level = i;
+                item.colIndex = colIndex;
+                row.push(item);
+            }
+            i--;
+        }
+        colIndex++;
+    }
+    // Add placeholders at the end of each row that is shorter than the maximum.
+    let i = 0;
+    for (const row of headerRows) {
+        const rowLength = row.reduce((p, c) => p + (c.colSpan ?? 1), 0);
+        if (rowLength < columnNodes.length) {
+            const placeholder = {
+                type: "placeholder",
+                key: "placeholder-" + row[row.length - 1].key,
+                colSpan: columnNodes.length - rowLength,
+                colspan: columnNodes.length - rowLength,
+                index: rowLength,
+                value: null,
+                rendered: null,
+                level: i,
+                hasChildNodes: false,
+                childNodes: [],
+                textValue: "",
+                prevKey: row[row.length - 1].key,
+            };
+            row.push(placeholder);
+        }
+        i++;
+    }
+    return headerRows.map((childNodes, index) => ({
+        type: "headerrow",
+        key: "headerrow-" + index,
+        index,
+        value: null,
+        rendered: null,
+        level: 0,
+        hasChildNodes: true,
+        childNodes,
+        textValue: "",
+    }));
+}
+export class TableCollection extends GridCollection {
+    headerRows;
+    columns;
+    rowHeaderColumnKeys;
+    body;
+    _size = 0;
+    constructor(nodes, _prev, opts) {
+        const rowHeaderColumnKeys = new Set();
+        let body = null;
+        const columns = [];
+        // Add cell for selection checkboxes if needed.
+        if (opts?.showSelectionCheckboxes) {
+            columns.unshift({
+                type: "column",
+                key: ROW_HEADER_COLUMN_KEY,
+                value: null,
+                textValue: "",
+                level: 0,
+                index: opts?.showDragButtons ? 1 : 0,
+                hasChildNodes: false,
+                rendered: null,
+                childNodes: [],
+                props: { isSelectionCell: true },
+            });
+        }
+        // Add cell for drag buttons if needed.
+        if (opts?.showDragButtons) {
+            columns.unshift({
+                type: "column",
+                key: ROW_HEADER_COLUMN_KEY_DRAG,
+                value: null,
+                textValue: "",
+                level: 0,
+                index: 0,
+                hasChildNodes: false,
+                rendered: null,
+                childNodes: [],
+                props: { isDragButtonCell: true },
+            });
+        }
+        const rows = [];
+        const columnKeyMap = new Map();
+        const visit = (node) => {
+            switch (node.type) {
+                case "body":
+                    body = node;
+                    break;
+                case "column":
+                    columnKeyMap.set(node.key, node);
+                    if (!node.hasChildNodes) {
+                        columns.push(node);
+                        if (node.props.isRowHeader)
+                            rowHeaderColumnKeys.add(node.key);
+                    }
+                    break;
+                case "item":
+                    rows.push(node);
+                    return; // do not go into childNodes
+            }
+            for (const child of node.childNodes)
+                visit(child);
+        };
+        for (const node of nodes)
+            visit(node);
+        const headerRows = buildHeaderRows(columnKeyMap, columns);
+        rows.unshift(...headerRows); // upstream: headerRows.forEach((row, i) => rows.splice(i, 0, row)) — same order, one move
+        super({
+            columnCount: columns.length,
+            items: rows,
+            visitNode: (node) => {
+                node.column = columns[node.index];
+                return node;
+            },
+        });
+        this.columns = columns;
+        this.rowHeaderColumnKeys = rowHeaderColumnKeys;
+        this.body = body;
+        this.headerRows = headerRows;
+        this._size = [...body.childNodes].length;
+        // Default row header column to the first one.
+        if (this.rowHeaderColumnKeys.size === 0) {
+            const col = this.columns.find((column) => !column.props?.isDragButtonCell && !column.props?.isSelectionCell);
+            if (col)
+                this.rowHeaderColumnKeys.add(col.key);
+        }
+    }
+    *[Symbol.iterator]() {
+        yield* this.body.childNodes;
+    }
+    get size() {
+        return this._size;
+    }
+    getKeys() {
+        return this.keyMap.keys();
+    }
+    getKeyBefore(key) {
+        return this.keyMap.get(key)?.prevKey ?? null;
+    }
+    getKeyAfter(key) {
+        return this.keyMap.get(key)?.nextKey ?? null;
+    }
+    getFirstKey() {
+        return getFirstItem(this.body.childNodes)?.key ?? null;
+    }
+    getLastKey() {
+        return getLastItem(this.body.childNodes)?.key ?? null;
+    }
+    getItem(key) {
+        if (key === this.body.key)
+            return this.body;
+        return this.keyMap.get(key) ?? null;
+    }
+    at(idx) {
+        const keys = [...this.getKeys()];
+        return this.getItem(keys[idx]);
+    }
+    getChildren(key) {
+        if (key === this.body.key)
+            return this.body.childNodes;
+        const node = this.getItem(key);
+        if (node?.type === "item")
+            return [...node.childNodes].filter((n) => n.type === "cell");
+        return super.getChildren(key);
+    }
+    getTextValue(key) {
+        const row = this.getItem(key);
+        if (!row)
+            return "";
+        // If the row has a textValue, use that.
+        if (row.textValue)
+            return row.textValue;
+        // Otherwise combine the text of each of the row header columns.
+        const rowHeaderColumnKeys = this.rowHeaderColumnKeys;
+        if (rowHeaderColumnKeys) {
+            const text = [];
+            for (const cell of row.childNodes) {
+                const column = this.columns[cell.index];
+                if (column && rowHeaderColumnKeys.has(column.key) && cell.textValue)
+                    text.push(cell.textValue);
+                if (text.length === rowHeaderColumnKeys.size)
+                    break;
+            }
+            return text.join(" ");
+        }
+        return "";
+    }
+}
+/** Context for building a table collection (`useTableState`'s memoized context). */
+export function tableBuilderContext(options = {}) {
+    const selectionMode = options.selectionMode ?? "none";
+    return {
+        showSelectionCheckboxes: !!options.showSelectionCheckboxes && selectionMode !== "none",
+        showDragButtons: !!options.showDragButtons,
+        selectionMode,
+        columns: [],
+    };
+}
+export const TableHeader = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props, context) {
+    const { children, columns } = props;
+    // Clear columns so they aren't double added.
+    context.columns = [];
+    if (typeof children === "function" && !isSlot(children)) {
+        if (!columns)
+            throw new Error("props.children was a function but props.columns is missing");
+        for (const column of columns)
+            yield { type: "column", value: column, renderer: children };
+    }
+    else {
+        const list = [];
+        forEachChild(children, (column) => list.push({ type: "column", element: column }));
+        yield* list;
+    }
+});
+export const TableBody = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props) {
+    const { children, items } = props;
+    yield {
+        type: "body",
+        hasChildNodes: true,
+        props,
+        *childNodes() {
+            if (typeof children === "function" && !isSlot(children)) {
+                if (!items)
+                    throw new Error("props.children was a function but props.items is missing");
+                for (const item of items)
+                    yield { type: "item", value: item, renderer: children };
+            }
+            else {
+                const list = [];
+                forEachChild(children, (item) => list.push({ type: "item", element: item }));
+                yield* list;
+            }
+        },
+    };
+});
+export const Column = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props, context) {
+    const { title, children, childColumns } = props;
+    const rendered = title || children;
+    const textValue = props.textValue || (typeof rendered === "string" ? rendered : "") || props["aria-label"];
+    const fullNodes = yield {
+        type: "column",
+        hasChildNodes: !!childColumns || (!!title && countChildren(children) > 0),
+        rendered,
+        textValue,
+        props,
+        *childNodes() {
+            if (childColumns) {
+                for (const child of childColumns)
+                    yield { type: "column", value: child };
+            }
+            else if (title) {
+                const list = [];
+                forEachChild(children, (child) => list.push({ type: "column", element: child }));
+                yield* list;
+            }
+        },
+        shouldInvalidate(newContext) {
+            // If this is called, a cached version of this node is available, but the list of columns in
+            // the new context must stay up to date.
+            updateContext(newContext);
+            return false;
+        },
+    };
+    const updateContext = (ctx) => {
+        // Register leaf columns on the context so that Row can access them.
+        for (const node of fullNodes)
+            if (!node.hasChildNodes)
+                ctx.columns.push(node);
+    };
+    updateContext(context);
+});
+export const Row = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props, context) {
+    const { children, textValue, UNSTABLE_childItems } = props;
+    yield {
+        type: "item",
+        props,
+        textValue,
+        "aria-label": props["aria-label"],
+        hasChildNodes: true,
+        *childNodes() {
+            // Process cells first.
+            if (context.showDragButtons)
+                yield { type: "cell", key: "header-drag", props: { isDragButtonCell: true } };
+            if (context.showSelectionCheckboxes && context.selectionMode !== "none")
+                yield { type: "cell", key: "header", props: { isSelectionCell: true } };
+            if (typeof children === "function" && !isSlot(children)) {
+                for (const column of context.columns)
+                    yield { type: "cell", element: children(column.key), key: column.key };
+                if (UNSTABLE_childItems)
+                    for (const child of UNSTABLE_childItems)
+                        yield { type: "item", value: child };
+            }
+            else {
+                const cells = [];
+                const childRows = [];
+                let columnCount = 0;
+                forEachChild(children, (node) => {
+                    if (node.type === Row) {
+                        if (cells.length < context.columns.length)
+                            throw new Error("All of a Row's child Cells must be positioned before any child Rows.");
+                        childRows.push({ type: "item", element: node });
+                    }
+                    else {
+                        cells.push({ type: "cell", element: node });
+                        columnCount += node.props.colSpan ?? 1;
+                    }
+                });
+                if (columnCount !== context.columns.length) {
+                    throw new Error(`Cell count must match column count. Found ${columnCount} cells and ${context.columns.length} columns.`);
+                }
+                yield* cells;
+                yield* childRows;
+            }
+        },
+        shouldInvalidate(newContext) {
+            // Invalidate all rows if the columns changed.
+            return (newContext.columns.length !== context.columns.length ||
+                newContext.columns.some((c, i) => c.key !== context.columns[i].key) ||
+                newContext.showSelectionCheckboxes !== context.showSelectionCheckboxes ||
+                newContext.showDragButtons !== context.showDragButtons ||
+                newContext.selectionMode !== context.selectionMode);
+        },
+    };
+});
+export const Cell = /* @__PURE__ */ defineCollectionComponent(function* getCollectionNode(props) {
+    const { children } = props;
+    const textValue = props.textValue || (typeof children === "string" ? children : "") || props["aria-label"] || "";
+    yield { type: "cell", props, rendered: children, textValue, "aria-label": props["aria-label"], hasChildNodes: false };
+});
+// --- Sorting -----------------------------------------------------------------------------------
+export const OPPOSITE_SORT_DIRECTION = { ascending: "descending", descending: "ascending" };
+/**
+ * The descriptor `useTableState().sort(columnKey, direction?)` passes to `onSortChange`: the given
+ * direction, else the opposite of the current one for the same column, else ascending.
+ */
+export function nextSortDescriptor(current, column, direction) {
+    return { column, direction: direction ?? (current?.column === column ? OPPOSITE_SORT_DIRECTION[current.direction] : "ascending") };
+}
+/** `aria-sort` value of a column under `descriptor` ("none" for sortable, unsorted columns). */
+export function ariaSort(descriptor, column, allowsSorting = true) {
+    if (descriptor?.column === column)
+        return descriptor.direction;
+    return allowsSorting ? "none" : undefined;
+}

package/collections/tree-state.d.ts

@@ -0,0 +1,47 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { TreeCollection } from "./tree.js";
+import type { Collection, CollectionChildren, Key, Node } from "./types.js";
+import { SelectionManager } from "../selection/manager.js";
+import { type MultipleSelectionState, type MultipleSelectionStateProps } from "../selection/state.js";
+export interface TreeProps<T> extends MultipleSelectionStateProps {
+    /** Item objects (array or accessor of one), rendered by `children`. */
+    items?: Iterable<T> | (() => Iterable<T>) | undefined;
+    /** Static `Item(…)` / `Section(…)` elements, or a renderer for `items`. */
+    children?: CollectionChildren<NoInfer<T>> | undefined;
+    /**
+     * A pre-built collection (RAC `Tree` passes its flattened, expanded-aware collection) or an
+     * accessor of one (`collectionOf`); used as is instead of building from `items` / `children`.
+     */
+    collection?: Collection<Node<T>> | (() => Collection<Node<T>>) | undefined;
+    /** Expanded keys: a signal (two-way), a plain value or an accessor returning a Set (controlled). */
+    expandedKeys?: Signal<Set<Key>> | (() => Set<Key>) | Iterable<Key> | undefined;
+    /** Initially expanded keys (uncontrolled). */
+    defaultExpandedKeys?: Iterable<Key> | undefined;
+    /** Handler that is called when items are expanded or collapsed. */
+    onExpandedChange?: ((keys: Set<Key>) => void) | undefined;
+}
+export interface TreeState<T = any> {
+    /** Selection + focus state. */
+    readonly selectionState: MultipleSelectionState;
+    /** A set of keys for items that are disabled. */
+    readonly disabledKeys: Set<Key>;
+    /** A set of keys for items that are expanded. */
+    readonly expandedKeys: Signal<Set<Key>>;
+    readonly expandedKeysControlled: boolean;
+    readonly onExpandedChange?: ((keys: Set<Key>) => void) | undefined;
+    readonly items?: Iterable<T> | (() => Iterable<T>) | undefined;
+    readonly children?: CollectionChildren<T> | undefined;
+    readonly collection?: Collection<Node<T>> | (() => Collection<Node<T>>) | undefined;
+}
+/** useTreeState: expanded keys + selection state for tree-like components. */
+export declare function createTreeState<T>(props: TreeProps<T>): TreeState<T>;
+/** The tree collection (react-stately `state.collection`); tracks `expandedKeys` and `items`. */
+export declare function treeCollection<T>(state: TreeState<T>): TreeCollection<T>;
+/** The selection manager (react-stately `state.selectionManager`). */
+export declare function treeSelectionManager<T>(state: TreeState<T>, collection?: Collection<Node<T>>): SelectionManager;
+/** Replaces the set of expanded keys. */
+export declare function setExpandedKeys<T>(state: TreeState<T>, keys: Set<Key>): void;
+/** Toggles the expanded state for an item by its key. */
+export declare function toggleTreeKey<T>(state: TreeState<T>, key: Key): void;
+/** Reset the focused key if that item was deleted from the collection (useTreeState's effect). */
+export declare function resetTreeFocusedKey<T>(state: TreeState<T>, collection?: Collection<Node<T>>): void;

package/collections/tree-state.js

@@ -0,0 +1,73 @@
+// Ported from @react-stately/tree (useTreeState.ts), Apache-2.0, © Adobe.
+//
+// Tree state: a TreeCollection built from `items` / `children` (only expanded rows are visible to
+// keyboard navigation) plus expanded keys and multiple-selection + focus state.
+//
+// Rivet: the state is serializable (signals + plain data); the collection and SelectionManager are
+// derived on demand by `treeCollection(state)` / `treeSelectionManager(state)` (cached per state,
+// items array and expanded-keys set), as in `@rivetjs/cdk/state/list`.
+import { signal, untrack } from "@rivetjs/reactivity";
+import { CollectionBuilder, createCollection } from "./builder.js";
+import { TreeCollection } from "./tree.js";
+import { SelectionManager } from "../selection/manager.js";
+import { createMultipleSelectionState } from "../selection/state.js";
+const isSignal = (value) => typeof value === "function" && typeof value.set === "function";
+/** useTreeState: expanded keys + selection state for tree-like components. */
+export function createTreeState(props) {
+    const prop = props.expandedKeys;
+    const controlled = prop !== undefined && !isSignal(prop);
+    // A Signal is two-way; an accessor (live prop, `liveKeys`: a Set) is controlled, read live, never written.
+    const expandedKeys = typeof prop === "function" ? prop : signal(new Set(controlled ? prop : (props.defaultExpandedKeys ?? [])));
+    const disabledKeys = new Set(props.disabledKeys ?? []);
+    return {
+        selectionState: createMultipleSelectionState({ ...props, disabledKeys }),
+        disabledKeys,
+        expandedKeys,
+        expandedKeysControlled: controlled,
+        onExpandedChange: props.onExpandedChange,
+        items: props.items,
+        children: props.children,
+        collection: props.collection,
+    };
+}
+const trees = new WeakMap();
+/** The tree collection (react-stately `state.collection`); tracks `expandedKeys` and `items`. */
+export function treeCollection(state) {
+    const provided = state.collection;
+    if (provided)
+        return (typeof provided === "function" ? provided() : provided);
+    const items = typeof state.items === "function" ? state.items() : state.items;
+    const expanded = state.expandedKeys();
+    const cached = trees.get(state);
+    if (cached && cached.items === items && cached.expanded === expanded)
+        return cached.collection;
+    const builder = cached?.builder ?? new CollectionBuilder();
+    const collection = createCollection({ children: state.children ?? null, items: items }, (nodes) => new TreeCollection(nodes, { expandedKeys: expanded }), null, builder);
+    trees.set(state, { items, expanded, collection, builder });
+    return collection;
+}
+/** The selection manager (react-stately `state.selectionManager`). */
+export function treeSelectionManager(state, collection = treeCollection(state)) {
+    return new SelectionManager(collection, state.selectionState);
+}
+/** Replaces the set of expanded keys. */
+export function setExpandedKeys(state, keys) {
+    if (!state.expandedKeysControlled)
+        state.expandedKeys.set(keys);
+    state.onExpandedChange?.(keys);
+}
+/** Toggles the expanded state for an item by its key. */
+export function toggleTreeKey(state, key) {
+    const res = new Set(untrack(state.expandedKeys));
+    if (res.has(key))
+        res.delete(key);
+    else
+        res.add(key);
+    setExpandedKeys(state, res);
+}
+/** Reset the focused key if that item was deleted from the collection (useTreeState's effect). */
+export function resetTreeFocusedKey(state, collection = treeCollection(state)) {
+    const focusedKey = untrack(state.selectionState.focusedKey);
+    if (focusedKey != null && !collection.getItem(focusedKey))
+        state.selectionState.focusedKey.set(null);
+}

package/collections/tree.d.ts

@@ -0,0 +1,20 @@
+import type { Collection, Key, Node } from "./types.js";
+/** A tree flattened in display order: children of sections and of expanded items are visited. */
+export declare class TreeCollection<T> implements Collection<Node<T>> {
+    private keyMap;
+    private iterable;
+    private firstKey;
+    private lastKey;
+    constructor(nodes: Iterable<Node<T>>, { expandedKeys }?: {
+        expandedKeys?: Set<Key>;
+    });
+    [Symbol.iterator](): IterableIterator<Node<T>>;
+    get size(): number;
+    getKeys(): IterableIterator<Key>;
+    getKeyBefore(key: Key): Key | null;
+    getKeyAfter(key: Key): Key | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getItem(key: Key): Node<T> | null;
+    at(idx: number): Node<T> | null;
+}

package/collections/tree.js

@@ -0,0 +1,66 @@
+/** A tree flattened in display order: children of sections and of expanded items are visited. */
+export class TreeCollection {
+    keyMap = new Map();
+    iterable;
+    firstKey = null;
+    lastKey = null;
+    constructor(nodes, { expandedKeys } = {}) {
+        this.iterable = nodes;
+        const expanded = expandedKeys || new Set();
+        const visit = (node) => {
+            this.keyMap.set(node.key, node);
+            if (node.childNodes && (node.type === "section" || expanded.has(node.key)))
+                for (const child of node.childNodes)
+                    visit(child);
+        };
+        for (const node of nodes)
+            visit(node);
+        let last = null;
+        let index = 0;
+        for (const [key, node] of this.keyMap) {
+            if (last) {
+                last.nextKey = key;
+                node.prevKey = last.key;
+            }
+            else {
+                this.firstKey = key;
+                node.prevKey = undefined;
+            }
+            if (node.type === "item")
+                node.index = index++;
+            last = node;
+            last.nextKey = undefined;
+        }
+        this.lastKey = last?.key ?? null;
+    }
+    *[Symbol.iterator]() {
+        yield* this.iterable;
+    }
+    get size() {
+        return this.keyMap.size;
+    }
+    getKeys() {
+        return this.keyMap.keys();
+    }
+    getKeyBefore(key) {
+        const node = this.keyMap.get(key);
+        return node ? (node.prevKey ?? null) : null;
+    }
+    getKeyAfter(key) {
+        const node = this.keyMap.get(key);
+        return node ? (node.nextKey ?? null) : null;
+    }
+    getFirstKey() {
+        return this.firstKey;
+    }
+    getLastKey() {
+        return this.lastKey;
+    }
+    getItem(key) {
+        return this.keyMap.get(key) ?? null;
+    }
+    at(idx) {
+        const keys = [...this.getKeys()];
+        return this.getItem(keys[idx]);
+    }
+}