@gtkx/components 2.0.0-beta.11 → 2.0.0-beta.13

package/src/internal/drop-down.tsx

@@ -1,16 +1,30 @@
-import type * as GObject from "@gtkx/gi/gobject";
+import type * as Adw from "@gtkx/gi/adw";
 import type { ElementType, ReactNode, Ref } from "react";
-import { GtkLabel, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
+import * as GObject from "@gtkx/gi/gobject";
+import * as Gtk from "@gtkx/gi/gtk";
+import type * as Pango from "@gtkx/gi/pango";
+import { GtkBox, GtkImage, GtkLabel, GtkSignalListItemFactory } from "@gtkx/jsx/gtk";
+import { useProperty } from "@gtkx/react";
+import { useLatestRef } from "@gtkx/react/internal";
 import { omit, type Primitive } from "@gtkx/utils";
-import { useRef } from "react";
-import type { DropDownOwnProps, ListItemRenderArgs, ListItemRenderer } from "../types.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import type { DropDownOwnProps, ListItemRenderer } from "../types.js";
 import { ItemPortals, useItemCells, useSectionHeader } from "./cells.js";
+import { type SlotRef, slotRefFor } from "./collection-model.js";
 import { type Collection, isCollectionIdle } from "./collection.js";
 import { useControlledSync } from "./controlled-sync.js";
+import { showFirstHeader } from "./first-header.js";
 import { useCollectionData } from "./use-collection.js";
 import { useWidgetRef } from "./use-widget-ref.js";
 
-type SelectableWidget = GObject.Object & { getSelected: () => number; selected: number };
+type SelectableWidget = Gtk.DropDown | Adw.ComboRow;
+
+/** Label settings of the widget's own default item factory, kept by the default renderers. */
+type ItemLabelProps = {
+    ellipsize?: Pango.EllipsizeMode;
+    maxWidthChars?: number;
+    widthChars?: number;
+};
 
 type DropDownBaseProps = DropDownOwnProps<unknown, unknown> & {
     onNotifySelected?: ((value: number | null, self: SelectableWidget) => void) | null | undefined;
@@ -25,6 +39,7 @@ type SelectionOptions = {
 
 type NotifySelectedHandler = NonNullable<DropDownBaseProps["onNotifySelected"]>;
 type ApplyState = { isApplying: boolean; isReady: boolean };
+type ShownSelection = { ref: SlotRef | null; text: string };
 
 type NotifyContext = {
     options: SelectionOptions;
@@ -40,6 +55,7 @@ type KnownSelection = {
 
 const DROP_DOWN_PROPS: string[] = [
     "component",
+    "itemLabel",
     "items",
     "sections",
     "selectedId",
@@ -55,15 +71,84 @@ function newApplyState(): ApplyState {
     return { isApplying: false, isReady: false };
 }
 
-const defaultRenderItem = ({ item }: ListItemRenderArgs<Primitive>): ReactNode =>
-    item == null ? null : <GtkLabel>{String(item)}</GtkLabel>;
-const faceRenderer = (props: DropDownBaseProps): ListItemRenderer<never> => props.renderItem ?? defaultRenderItem;
+const defaultRenderer =
+    (itemLabel: ItemLabelProps): ListItemRenderer<Primitive> =>
+    ({ item }) =>
+        item == null ? null : <GtkLabel {...itemLabel}>{String(item)}</GtkLabel>;
+const faceRenderer = (props: DropDownBaseProps, itemLabel: ItemLabelProps): ListItemRenderer<never> =>
+    props.renderItem ?? defaultRenderer(itemLabel);
+
+const selectionMarkedRenderer =
+    (selected: number | undefined, itemLabel: ItemLabelProps): ListItemRenderer<Primitive> =>
+    ({ item, index }) => (
+        <GtkBox>
+            <GtkLabel xalign={0} {...itemLabel}>
+                {item == null ? "" : String(item)}
+            </GtkLabel>
+            <GtkImage
+                iconName="object-select-symbolic"
+                accessibleRole={Gtk.AccessibleRole.PRESENTATION}
+                opacity={index === selected ? 1 : 0}
+            />
+        </GtkBox>
+    );
 
-const resolvePosition = (
-    widget: SelectableWidget,
-    collection: Collection,
-    selectedId: string | undefined,
-): number => {
+const popupRenderer = (
+    props: DropDownBaseProps,
+    selected: number | undefined,
+    itemLabel: ItemLabelProps,
+): ListItemRenderer<never> | null =>
+    props.renderListItem ?? (props.renderItem == null ? selectionMarkedRenderer(selected, itemLabel) : null);
+
+const textOf = (value: unknown): string => {
+    switch (typeof value) {
+        case "string":
+            return value;
+        case "number":
+        case "bigint":
+        case "boolean":
+            return String(value);
+        case "symbol":
+            return value.toString();
+        default:
+            return "";
+    }
+};
+
+const slotText = (collection: Collection, ref: SlotRef | null): string =>
+    ref === null ? "" : textOf(collection.itemAt(ref)?.value);
+
+/**
+ * AdwComboRow reads the selected item's text for its subtitle only when the selected item or the expression changes.
+ * Slots keep their objects when an item's value changes in place, so the expression is replaced when the selected
+ * item's text changes without a selection change.
+ */
+const useItemTextExpression = (widget: SelectableWidget | null, collection: Collection): Gtk.Expression => {
+    const latest = useLatestRef(collection);
+    const shown = useRef<ShownSelection>({ ref: null, text: "" });
+    const createExpression = (): Gtk.Expression =>
+        Gtk.ClosureExpression.new(
+            GObject.TYPE_STRING,
+            (object: GObject.Object | null) => slotText(latest.current, slotRefFor(object)),
+            null,
+        );
+    const [expression, setExpression] = useState(createExpression);
+
+    useLayoutEffect(() => {
+        const ref = slotRefFor(widget?.getSelectedItem() ?? null);
+        const text = slotText(collection, ref);
+        const isRenamed = ref !== null && ref === shown.current.ref && text !== shown.current.text;
+        shown.current = { ref, text };
+
+        if (isRenamed) {
+            setExpression(createExpression());
+        }
+    });
+
+    return expression;
+};
+
+const resolvePosition = (widget: SelectableWidget, collection: Collection, selectedId: string | undefined): number => {
     if (selectedId === undefined) {
         return widget.getSelected();
     }
@@ -179,31 +264,39 @@ const useDropDownSelection = (options: SelectionOptions): NotifySelectedHandler
     };
 };
 
-function DropDownBase(props: DropDownBaseProps & { component: ElementType }): ReactNode {
-    const { component: Component, items, sections, renderListItem, renderHeader, ref } = props;
+function DropDownBase(props: DropDownBaseProps & { component: ElementType; itemLabel?: ItemLabelProps }): ReactNode {
+    const { component: Component, itemLabel = {}, items, sections, renderHeader, ref } = props;
     const rest = omit(props, DROP_DOWN_PROPS);
     const [widget, refCallback] = useWidgetRef<SelectableWidget>(ref);
-    const { collection, model } = useCollectionData({ items, sections, isFlat: true });
+    const { collection, model } = useCollectionData({
+        items,
+        sections,
+        isFlat: true,
+        onSectionsFilled: () => showFirstHeader(widget),
+    });
     const faceCells = useItemCells({ width: -1, height: -1 });
     const listCells = useItemCells({ width: -1, height: -1 });
     const header = useSectionHeader(renderHeader, collection, { width: -1, height: -1 });
     const handleNotifySelected = useDropDownSelection({ widget, collection, props });
+    const renderListItem = popupRenderer(props, useProperty(widget, "selected"), itemLabel);
+    const expression = useItemTextExpression(widget, collection);
 
     return (
         <>
             <Component
                 ref={refCallback}
                 model={model}
+                expression={expression}
                 factory={<GtkSignalListItemFactory {...faceCells.handlers} />}
-                {...(renderListItem != null && {
+                {...(renderListItem !== null && {
                     listFactory: <GtkSignalListItemFactory {...listCells.handlers} />,
                 })}
                 {...header.factoryProps}
                 {...rest}
                 onNotifySelected={handleNotifySelected}
             />
-            <ItemPortals registry={faceCells} render={faceRenderer(props)} collection={collection} />
-            {renderListItem != null && (
+            <ItemPortals registry={faceCells} render={faceRenderer(props, itemLabel)} collection={collection} />
+            {renderListItem !== null && (
                 <ItemPortals registry={listCells} render={renderListItem} collection={collection} />
             )}
             {header.portals}

package/src/internal/expansion.ts

@@ -3,7 +3,7 @@ import type { Collection } from "./collection.js";
 import type { TreeExpansion } from "./tree-expansion.js";
 import type { VisibleOrder, WalkOptions } from "./tree-order.js";
 import { isCollectionIdle } from "./collection.js";
-import { useControlledSync } from "./controlled-sync.js";
+import { hasSameIds, useControlledSync } from "./controlled-sync.js";
 import { joinParts } from "./keys.js";
 import { trackPaths } from "./slots.js";
 import { adoptOrder, markExpanded, orderFor } from "./tree-expansion.js";
@@ -34,29 +34,44 @@ function hasSameExpansion(expanded: Set<string>, wanted: Set<string>): boolean {
     return expanded.size === wanted.size && wanted.isSubsetOf(expanded);
 }
 
-function toggleOptions(collection: Collection, wanted: Set<string>): WalkOptions {
+function collapsingPositions(expansion: TreeExpansion, wanted: Set<string>): number[] {
+    const positions: number[] = [];
+
+    walkVisible({
+        index: expansion.index,
+        slots: expansion.slots,
+        marks: trackPaths(expansion.expanded.difference(wanted)),
+        visit: (row) => {
+            if (row.isMarked) {
+                positions.push(row.position);
+            }
+        },
+    });
+
+    return positions;
+}
+
+function expandOptions(collection: Collection, wanted: Set<string>): WalkOptions {
     const { expansion } = collection;
 
     return {
         index: expansion.index,
         slots: trackPaths(wanted),
-        marks: trackPaths(wanted.symmetricDifference(expansion.expanded)),
+        marks: trackPaths(wanted.difference(expansion.expanded)),
         visit: (row) => {
             if (row.isMarked) {
-                collection.rowAt(row.position)?.setExpanded(row.isOpen);
+                collection.rowAt(row.position)?.setExpanded(true);
             }
         },
     };
 }
 
-function walkApplying(expansion: TreeExpansion, options: WalkOptions): VisibleOrder {
-    expansion.isApplying = true;
-
-    try {
-        return walkVisible(options);
-    } finally {
-        expansion.isApplying = false;
+function toggleRows(collection: Collection, wanted: Set<string>): VisibleOrder {
+    for (const position of collapsingPositions(collection.expansion, wanted).toReversed()) {
+        collection.rowAt(position)?.setExpanded(false);
     }
+
+    return walkVisible(expandOptions(collection, wanted));
 }
 
 function applyWanted(collection: Collection, expandedIds: string[]): void {
@@ -67,19 +82,29 @@ function applyWanted(collection: Collection, expandedIds: string[]): void {
         return;
     }
 
-    adoptOrder(expansion, walkApplying(expansion, toggleOptions(collection, wanted)));
+    expansion.isApplying = true;
+
+    try {
+        adoptOrder(expansion, toggleRows(collection, wanted));
+    } finally {
+        expansion.isApplying = false;
+    }
+}
+
+function rememberExpansion(context: ExpansionContext, expandedPaths: string[]): boolean {
+    const key = joinParts(expandedPaths);
+    const isKnown = context.last.key === key;
+    context.last.key = key;
+
+    return isKnown;
 }
 
 function reportExpansion(context: ExpansionContext): void {
     const { expandedIds, expandedPaths } = orderFor(context.collection.expansion);
-    const key = joinParts(expandedPaths);
 
-    if (context.last.key === key) {
-        return;
+    if (!rememberExpansion(context, expandedPaths)) {
+        context.onExpandedChange?.([...expandedIds]);
     }
-
-    context.last.key = key;
-    context.onExpandedChange?.([...expandedIds]);
 }
 
 function applyControlledExpansion(context: ExpansionContext, expandedIds: string[] | null | undefined): void {
@@ -87,8 +112,15 @@ function applyControlledExpansion(context: ExpansionContext, expandedIds: string
         return;
     }
 
-    applyWanted(context.collection, expandedIds ?? []);
-    reportExpansion(context);
+    const requested = expandedIds ?? [];
+    applyWanted(context.collection, requested);
+    const order = orderFor(context.collection.expansion);
+
+    if (hasSameIds(order.expandedIds, requested)) {
+        rememberExpansion(context, order.expandedPaths);
+    } else {
+        reportExpansion(context);
+    }
 }
 
 function didRowDrift(collection: Collection, change: ItemsChange): boolean {

package/src/internal/first-header.ts

@@ -0,0 +1,23 @@
+import type * as Adw from "@gtkx/gi/adw";
+import * as Gtk from "@gtkx/gi/gtk";
+
+type SectionedWidget = Gtk.ListView | Gtk.ColumnView | Gtk.DropDown | Adw.ComboRow;
+
+/**
+ * TODO: GTK 4.22 anchors a list whose model fills after the list holds it at the first row, scrolled past that
+ * row's section header. Scrolling a view to its first row, or handing a drop-down its filled model again, starts
+ * it at the header. Remove once a GTK release fixes the anchor and GTKX requires it.
+ */
+function showFirstHeader(widget: SectionedWidget | null): void {
+    if (widget instanceof Gtk.ListView) {
+        widget.scrollTo(0, Gtk.ListScrollFlags.NONE, null);
+    } else if (widget instanceof Gtk.ColumnView) {
+        widget.scrollTo(0, null, Gtk.ListScrollFlags.NONE, null);
+    } else if (widget !== null) {
+        const model = widget.getModel();
+        widget.setModel(null);
+        widget.setModel(model);
+    }
+}
+
+export { showFirstHeader };

package/src/internal/level-splice.ts

@@ -0,0 +1,157 @@
+import { joinParts } from "./keys.js";
+
+type Splice = {
+    start: number;
+    removed: number;
+    added: number;
+};
+
+type KeyAt = (slot: number) => string;
+
+type LevelKeys = {
+    previousLength: number;
+    nextLength: number;
+    previousKey: KeyAt;
+    nextKey: KeyAt;
+};
+
+type Relocate = (slot: number) => number | undefined;
+
+const NO_MOVES: Map<number, number> = new Map();
+const NO_SPLICE: Splice = { start: 0, removed: 0, added: 0 };
+const MOVE_SEARCH_LIMIT = 1024;
+
+function findSplice(keys: LevelKeys): Splice {
+    const { previousLength, nextLength, previousKey, nextKey } = keys;
+    const overlap = Math.min(previousLength, nextLength);
+    let start = 0;
+
+    while (start < overlap && previousKey(start) === nextKey(start)) {
+        start += 1;
+    }
+
+    let shared = 0;
+
+    while (shared < overlap - start && previousKey(previousLength - 1 - shared) === nextKey(nextLength - 1 - shared)) {
+        shared += 1;
+    }
+
+    return { start, removed: previousLength - start - shared, added: nextLength - start - shared };
+}
+
+function hasSplice(splice: Splice): boolean {
+    return splice.removed > 0 || splice.added > 0;
+}
+
+function isRemoved(splice: Splice, slot: number): boolean {
+    return slot >= splice.start && slot < splice.start + splice.removed;
+}
+
+function occurrenceKeys(key: KeyAt, from: number, length: number, wanted: Set<string>): Map<number, string> {
+    const counts: Map<string, number> = new Map();
+    const keys: Map<number, string> = new Map();
+
+    for (let slot = from; slot < from + length; slot++) {
+        const id = key(slot);
+
+        if (!wanted.has(id)) {
+            continue;
+        }
+
+        const occurrence = counts.get(id) ?? 0;
+        counts.set(id, occurrence + 1);
+        keys.set(slot, joinParts([id, String(occurrence)]));
+    }
+
+    return keys;
+}
+
+function matchMoves(keys: LevelKeys, splice: Splice, candidates: Iterable<number>): Map<number, number> {
+    const removed = Iterator.from(candidates)
+        .filter((slot) => isRemoved(splice, slot))
+        .toArray();
+
+    if (removed.length === 0 || splice.added === 0) {
+        return NO_MOVES;
+    }
+
+    const wanted = new Set(removed.map((slot) => keys.previousKey(slot)));
+    const previous = occurrenceKeys(keys.previousKey, splice.start, splice.removed, wanted);
+    const bySlotKey: Map<string, number> = new Map();
+
+    for (const slot of removed) {
+        const key = previous.get(slot);
+
+        if (key !== undefined) {
+            bySlotKey.set(key, slot);
+        }
+    }
+
+    const moves: Map<number, number> = new Map();
+
+    for (const [slot, key] of occurrenceKeys(keys.nextKey, splice.start, splice.added, wanted)) {
+        const origin = bySlotKey.get(key);
+
+        if (origin !== undefined) {
+            moves.set(origin, slot);
+        }
+    }
+
+    return moves;
+}
+
+function relocateSlot(splice: Splice, slot: number, moves: Map<number, number> = NO_MOVES): number | undefined {
+    if (slot < splice.start) {
+        return slot;
+    }
+
+    if (isRemoved(splice, slot)) {
+        return moves.get(slot);
+    }
+
+    return slot + splice.added - splice.removed;
+}
+
+function relocateEntries<V>(entries: Map<number, V>, relocate: Relocate, onDrop: (value: V) => void): Map<number, V> {
+    const relocated: Map<number, V> = new Map();
+
+    for (const [slot, value] of entries) {
+        const next = relocate(slot);
+
+        if (next === undefined) {
+            onDrop(value);
+        } else {
+            relocated.set(next, value);
+        }
+    }
+
+    return relocated;
+}
+
+/**
+ * GTK looks up every added item for a moved row whenever a splice removes a row it tracks, such as the scroll
+ * anchor or the focus, which makes every lazily created item real. Past a limit, the overlapping slots are
+ * rewritten in place instead and only the difference is spliced, so rows that move there remount.
+ */
+function searchableSplice(splice: Splice, addedRows: number): Splice {
+    if (addedRows <= MOVE_SEARCH_LIMIT) {
+        return splice;
+    }
+
+    const rewritten = Math.min(splice.removed, splice.added);
+
+    return { start: splice.start + rewritten, removed: splice.removed - rewritten, added: splice.added - rewritten };
+}
+
+export {
+    NO_SPLICE,
+    findSplice,
+    hasSplice,
+    matchMoves,
+    relocateEntries,
+    relocateSlot,
+    searchableSplice,
+    type LevelKeys,
+    type Relocate,
+    type Splice,
+};

package/src/internal/selection.tsx

@@ -6,7 +6,7 @@ import type { Collection } from "./collection.js";
 import type { ItemsChangeHandler } from "./expansion.js";
 import type { MatchedRows } from "./tree-order.js";
 import { isCollectionIdle } from "./collection.js";
-import { useControlledSync } from "./controlled-sync.js";
+import { hasSameIds, useControlledSync } from "./controlled-sync.js";
 import { joinParts } from "./keys.js";
 
 type SelectionOptions = {
@@ -89,10 +89,6 @@ function plannedSelection(context: SelectionContext, ids: string[]): MatchedRows
 
     const rows = collection.rowsFor(ids);
 
-    if (ids.length > 0 && rows.positions.length === 0) {
-        return null;
-    }
-
     if (selection instanceof Gtk.SingleSelection) {
         return { positions: rows.positions.slice(0, 1), ids: rows.ids.slice(0, 1) };
     }
@@ -150,16 +146,27 @@ function applySelection(selection: Gtk.SelectionModel, positions: number[]): Gtk
     return selected;
 }
 
-function reportSelection(context: SelectionContext, ids: string[]): void {
+function rememberSelection(context: SelectionContext, ids: string[]): boolean {
     const key = joinParts(ids);
+    const isKnown = context.last.selection === context.selection && context.last.key === key;
+    context.last.selection = context.selection;
+    context.last.key = key;
 
-    if (context.last.selection === context.selection && context.last.key === key) {
-        return;
+    return isKnown;
+}
+
+function reportSelection(context: SelectionContext, ids: string[]): void {
+    if (!rememberSelection(context, ids)) {
+        context.onSelectionChanged?.(ids);
     }
+}
 
-    context.last.selection = context.selection;
-    context.last.key = key;
-    context.onSelectionChanged?.(ids);
+function settleSelection(context: SelectionContext, ids: string[], selectedIds: string[]): void {
+    if (hasSameIds(ids, selectedIds)) {
+        rememberSelection(context, ids);
+    } else {
+        reportSelection(context, ids);
+    }
 }
 
 function hasSelectionDrifted(actual: number[], planned: number[]): boolean {
@@ -198,15 +205,16 @@ function applyControlledSelection(context: SelectionContext, selectedIds: string
         return;
     }
 
-    const planned = plannedSelection(context, selectedIds ?? []);
+    const requested = selectedIds ?? [];
+    const planned = plannedSelection(context, requested);
 
     if (planned !== null && didApplyPlanned(context, selection, planned.positions)) {
-        reportSelection(context, planned.ids);
+        settleSelection(context, planned.ids, requested);
 
         return;
     }
 
-    reportSelection(context, collection.idsAt(selectedPositions(selection)));
+    settleSelection(context, collection.idsAt(selectedPositions(selection)), requested);
 }
 
 function reportDrift(
@@ -229,16 +237,13 @@ function observeSelection(
 ): void {
     const { selection, collection, state } = context;
 
-    if (selection === null || state.isApplying) {
+    if (selection === null || state.isApplying || !isCollectionIdle(collection)) {
         return;
     }
 
     const positions = selectedPositions(selection);
     reportSelection(context, collection.idsAt(positions));
-
-    if (isCollectionIdle(collection)) {
-        reportDrift(context, selectedIds, positions, onDrift);
-    }
+    reportDrift(context, selectedIds, positions, onDrift);
 }
 
 function newLastSelection(): LastSelection {

package/src/internal/tree-expansion.ts

@@ -1,7 +1,8 @@
 import type { CollectionIndex } from "./collection-index.js";
 import type { SlotMap } from "./slots.js";
 import type { VisibleOrder } from "./tree-order.js";
-import { encodePart } from "./keys.js";
+import type { Relocate } from "./level-splice.js";
+import { decodePartAt, encodePart } from "./keys.js";
 import { getSlotKey, trackPath, trackPaths } from "./slots.js";
 import { walkVisible } from "./tree-order.js";
 
@@ -75,6 +76,46 @@ function pruneSlots(expansion: TreeExpansion, levelPath: string, isPruned: (slot
     expansion.order = null;
 }
 
+function relocatePath(path: string, levelPath: string, relocate: Relocate): string | null {
+    if (path.length === levelPath.length || !path.startsWith(levelPath)) {
+        return path;
+    }
+
+    const part = decodePartAt(path, levelPath.length);
+
+    if (part === null) {
+        return path;
+    }
+
+    const slot = relocate(Number(part));
+
+    if (slot === undefined) {
+        return null;
+    }
+
+    return levelPath + encodePart(String(slot)) + path.slice(levelPath.length + encodePart(part).length);
+}
+
+function relocateSlots(expansion: TreeExpansion, levelPath: string, relocate: Relocate): void {
+    if (expansion.expanded.size === 0) {
+        return;
+    }
+
+    const expanded: Set<string> = new Set();
+
+    for (const path of expansion.expanded) {
+        const relocated = relocatePath(path, levelPath, relocate);
+
+        if (relocated !== null) {
+            expanded.add(relocated);
+        }
+    }
+
+    expansion.expanded = expanded;
+    expansion.slots = trackPaths(expanded);
+    expansion.order = null;
+}
+
 function markExpanded(expansion: TreeExpansion, path: string, isExpanded: boolean): void {
     if (isExpanded) {
         expansion.expanded.add(path);
@@ -99,5 +140,6 @@ export {
     markExpanded,
     orderFor,
     pruneSlots,
+    relocateSlots,
     type TreeExpansion,
 };

package/src/internal/tree-order.ts

@@ -12,6 +12,7 @@ type VisibleRow = {
 type VisibleOrder = {
     expandedPaths: string[];
     expandedIds: string[];
+    positions: Map<string, number>;
 };
 
 type MatchedRows = {
@@ -39,6 +40,7 @@ function walkLevel(options: WalkOptions, level: Level, state: WalkState): void {
 
     for (const [slot, item] of level.items.entries()) {
         const isOpen = open?.has(slot) ?? false;
+        state.order.positions.set(item.id, state.position);
         options.visit?.({ item, position: state.position, isOpen, isMarked: marked?.has(slot) ?? false });
         state.position += 1;
 
@@ -57,7 +59,7 @@ function walkLevel(options: WalkOptions, level: Level, state: WalkState): void {
 }
 
 function walkVisible(options: WalkOptions): VisibleOrder {
-    const state: WalkState = { position: 0, order: { expandedPaths: [], expandedIds: [] } };
+    const state: WalkState = { position: 0, order: { expandedPaths: [], expandedIds: [], positions: new Map() } };
 
     for (const level of options.index.groups) {
         walkLevel(options, level, state);
@@ -133,12 +135,4 @@ function findIds(index: CollectionIndex, slots: SlotMap, positions: Set<number>)
     return found;
 }
 
-export {
-    expandedPathsFor,
-    findIds,
-    findRows,
-    walkVisible,
-    type MatchedRows,
-    type VisibleOrder,
-    type WalkOptions,
-};
+export { expandedPathsFor, findIds, findRows, walkVisible, type MatchedRows, type VisibleOrder, type WalkOptions };