@ixfx/components 0.15.5 → 0.16.0

package/dist/tree-CftHwtEb.js

@@ -0,0 +1,146 @@
+import { a as capKeys, i as capFlags, n as EMPTY_KEYS } from "./pending-BGidHppL.js";
+//#region src/common/view-state/tree.ts
+/**
+* - live expanded keys that are no longer loaded → pending `true`
+* - pending keys that are now loaded → applied (`true` opens, `false` closes)
+* - pending-open keys whose node can't open yet (`canOpen` false: children
+*   unloaded) stay pending and are listed in `needsLoad`
+*/
+function reconcileExpansion(live, pending, has, canOpen) {
+	let nextLive;
+	let nextPending;
+	const needsLoad = [];
+	for (const key of live) {
+		if (has(key)) continue;
+		nextLive ??= new Set(live);
+		nextLive.delete(key);
+		nextPending ??= new Map(pending);
+		nextPending.set(key, true);
+	}
+	for (const [key, open] of pending) {
+		if (!has(key)) continue;
+		if (open && !canOpen(key)) {
+			needsLoad.push(key);
+			continue;
+		}
+		nextPending ??= new Map(pending);
+		nextPending.delete(key);
+		if (open !== (nextLive ?? live).has(key)) {
+			nextLive ??= new Set(live);
+			if (open) nextLive.add(key);
+			else nextLive.delete(key);
+		}
+	}
+	return {
+		live: nextLive ?? live,
+		pending: nextPending ? capFlags(nextPending) : pending,
+		needsLoad,
+		changed: nextLive !== void 0 || nextPending !== void 0
+	};
+}
+/**
+* Re-key the node selection onto the current tree: selected nodes are swapped
+* for the loaded node with the same key, or go pending when the key is gone;
+* pending keys that resolve (and pass `canSelect`) are selected. With
+* `single`, at most one node stays selected (a restored key wins).
+*/
+function reconcileSelection(selected, pending, nodeByKey, canSelect, single) {
+	if (selected.size === 0 && pending.size === 0) return {
+		selected,
+		pending,
+		restored: false,
+		changed: false
+	};
+	const next = /* @__PURE__ */ new Set();
+	const nextPending = /* @__PURE__ */ new Set();
+	let changed = false;
+	for (const node of selected) {
+		const current = nodeByKey(node.item.key);
+		if (current) {
+			next.add(current);
+			if (current !== node) changed = true;
+		} else {
+			nextPending.add(node.item.key);
+			changed = true;
+		}
+	}
+	let restored;
+	for (const key of pending) {
+		const node = nodeByKey(key);
+		if (node && canSelect(node)) {
+			next.add(node);
+			restored = node;
+			changed = true;
+		} else nextPending.add(key);
+	}
+	if (!changed) return {
+		selected,
+		pending,
+		restored: false,
+		changed: false
+	};
+	let finalSelected = next;
+	let finalPending = nextPending;
+	if (single && next.size > 0) {
+		finalSelected = /* @__PURE__ */ new Set([restored ?? [...next].at(-1)]);
+		finalPending = EMPTY_KEYS;
+	}
+	return {
+		selected: finalSelected,
+		pending: capKeys(finalPending),
+		restored: restored !== void 0,
+		changed: true
+	};
+}
+/**
+* Keyboard cursor: a cursor key that left the data goes pending (`clear`);
+* a pending key that is now visible is applied (`apply`).
+*/
+function reconcileCursor(cursor, pending, has, isVisible) {
+	let nextPending = pending;
+	let clear = false;
+	if (cursor !== void 0 && !has(cursor)) {
+		nextPending ??= cursor;
+		clear = true;
+	}
+	if (nextPending !== void 0 && isVisible(nextPending)) return {
+		clear,
+		apply: nextPending,
+		pending: void 0
+	};
+	return {
+		clear,
+		apply: void 0,
+		pending: nextPending
+	};
+}
+/** Sanitise a JSON zoom / centre path: strings only, `undefined` when not an array. */
+function pathFromJson(value) {
+	return Array.isArray(value) ? value.filter((k) => typeof k === `string`) : void 0;
+}
+/**
+* Follow `keys` from the children of `root`. When the walk reaches a node
+* whose children aren't loaded, reports it as `load` if `canLoad` allows.
+*/
+function resolveKeyPath(root, keys, canLoad) {
+	if (!root) return { status: `missing` };
+	const nodes = [];
+	let current = root;
+	for (const key of keys) {
+		if (current.children === void 0) return canLoad(current) ? {
+			status: `load`,
+			node: current,
+			depth: nodes.length - 1
+		} : { status: `missing` };
+		const next = current.children.find((c) => c.item.key === key);
+		if (!next) return { status: `missing` };
+		nodes.push(next);
+		current = next;
+	}
+	return {
+		status: `found`,
+		nodes
+	};
+}
+//#endregion
+export { resolveKeyPath as a, reconcileSelection as i, reconcileCursor as n, reconcileExpansion as r, pathFromJson as t };

package/dist/{tree-D8VxvR9u.js → tree-Crdpl4nc.js}

@@ -4,8 +4,12 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-JIhwB49y.js";
 import { i as animateListItemOut, o as prefersReducedMotion, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
+import { a as capKeys, c as keysAsFlags, f as withoutFlag, i as capFlags, l as keysToArray, n as EMPTY_KEYS, o as flagsFromRecord, s as flagsToRecord, t as EMPTY_FLAGS } from "./pending-BGidHppL.js";
+import { n as createScrollHoverGuard } from "./scroll-hover-guard-Cjw6179Q.js";
 import "./interaction-E-uMGHkJ.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
+import { n as anchorFromRow, o as scrollToOffset, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
+import { i as reconcileSelection, r as reconcileExpansion } from "./tree-CftHwtEb.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -1112,6 +1116,12 @@ function computeTreeWindow(params, scrollTop, overscan = 5) {
 		end: Math.min(count, Math.max(start, lastVisible + overscan))
 	};
 }
+/** Index of the row whose slot contains content-space `y`, clamped to `[0, count - 1]`. */
+function treeIndexAt(params, y) {
+	if (params.count <= 0) return -1;
+	const index = Math.floor((y - params.listOffset) / treeStride(params));
+	return Math.min(params.count - 1, Math.max(0, index));
+}
 /**
 * The scroll offset that brings row `index` fully into view with the least
 * movement, leaving `topInset` px at the top clear (the sticky-header overlay).
@@ -1204,6 +1214,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.interactionMode = `standard`;
 		this._selectedNodes = /* @__PURE__ */ new Set();
 		this.disableKeyboardNavigation = false;
+		this.scrollHoverTickle = false;
 		this.registry = void 0;
 		this.itemDnd = `none`;
 		this.dndExpandHoverMs = 500;
@@ -1214,6 +1225,14 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.animation = `auto`;
 		this.applyInternalDrop = true;
 		this._expandedKeys = /* @__PURE__ */ new Set();
+		this.restoreLoads = true;
+		this.#viewState = new ViewStateController(this, {
+			kind: `tree-list`,
+			capture: () => this.getViewState()
+		});
+		this.#pendingExpanded = EMPTY_FLAGS;
+		this.#pendingSelected = EMPTY_KEYS;
+		this.#reconciledVersion = -1;
 		this.#structureVersion = 0;
 		this._selectionVersion = 0;
 		this._scrollTop = 0;
@@ -1246,6 +1265,17 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 				this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 			}
 		});
+		this.#scrollHover = createScrollHoverGuard({
+			host: this,
+			enabled: () => !this.scrollHoverTickle,
+			onResume: (x, y) => {
+				const key = (this.shadowRoot?.elementFromPoint?.(x, y)?.closest(`li.item`))?.dataset.key;
+				const flat = this.#getFlat();
+				const idx = key === void 0 ? void 0 : flat.indexByKey.get(key);
+				const row = idx === void 0 ? void 0 : flat.rows[idx];
+				if (row) this._handleRowPointerEnter(row.node, row.depth);
+			}
+		});
 		this._focusedDepth = 0;
 		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
 			labelSelector: `.tree-label`,
@@ -1278,6 +1308,9 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#stickyDirty = true;
 		this.#stickyRaf = 0;
 		this.#stickyScrollBound = false;
+		this.#onViewStateScroll = () => {
+			this.#viewState.notifyScroll();
+		};
 		this.#selectOrigin = `user`;
 		this.#selectSilent = false;
 		this.#revealToken = 0;
@@ -1287,7 +1320,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			if (nodes.length === 0) return;
 			if ((event.ctrlKey || event.metaKey) && event.key === `a`) {
 				event.preventDefault();
-				this.selectAll();
+				this.selectAll({ visibleOnly: true });
 				return;
 			}
 			if ([
@@ -1428,7 +1461,23 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this._expandedKeys = next;
 		this.#flat = void 0;
 		this.#stickyDirty = true;
-	}
+		this.#viewState.notify();
+	}
+	#viewState;
+	/** Saved expansion for keys not (yet) loaded, or loaded but awaiting children. */
+	#pendingExpanded;
+	/** Saved selection for keys not (yet) loaded. */
+	#pendingSelected;
+	#pendingFocus;
+	/**
+	* Cursor key applied from saved state. Recorded as `focus` while the cursor
+	* stays there, even though the input mode isn't `keyboard` (switching the
+	* mode would reset the shared hover guard).
+	*/
+	#restoredFocus;
+	/** Structure version the view state was last reconciled against. */
+	#reconciledVersion;
+	#viewStateScrollTarget;
 	#flat;
 	#flatRoot;
 	#flatFilter;
@@ -1623,6 +1672,25 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	get _depthsWithIcons() {
 		return this.#getTreeIndex().depthsWithIcons;
 	}
+	#scrollHover;
+	/**
+	* Row `pointerenter` funnel: moves the hover cursor unless a scroll gesture
+	* is sliding rows beneath a stationary pointer (see `scrollHoverTickle`).
+	* Subclasses rendering their own rows should call this rather than the
+	* tickled controller directly.
+	*/
+	_handleRowPointerEnter(node, depth) {
+		if (this.#scrollHover.suppressed()) return;
+		this.tickled.handlePointerEnter(node.item.key);
+		this.dispatchEvent(new CustomEvent(`tickle`, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	#unregisterSearchCommands;
 	#effectiveSearchModes() {
 		const raw = this.searchModes?.trim();
@@ -1844,10 +1912,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		}
 		this.#flat = void 0;
 		if (changedProps.has(`root`) || changedProps.has(`model`)) this.#structureVersion++;
-		if (changedProps.has(`root`) && this.root && this._expandedKeys.size > 0) {
-			const { parentByKey } = this.#getTreeIndex();
-			this.#setExpanded(withoutKeys(this._expandedKeys, (key) => !parentByKey.has(key)));
-		}
+		if (this.#reconciledVersion !== this.#structureVersion) this.#reconcileViewState();
 		this.#diffVisibleNodes(changedProps.has(`filterPredicate`));
 		const virtual = this.#virtualActive();
 		this.toggleAttribute(`data-virtual`, virtual);
@@ -1970,6 +2035,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	updated(changedProps) {
 		this.#rowsCache = void 0;
 		this.#syncVirtualObservers();
+		if (changedProps.has(`scrollHoverTickle`) && this.scrollHoverTickle) this.#scrollHover.end();
 		if (this.#scrollOnlyUpdate) {
 			this.#scrollOnlyUpdate = false;
 			this.#repaintSearchHighlights();
@@ -1978,8 +2044,6 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#syncStickyScroll();
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
-			this.#clearSelectionInternal();
-			this.tickled.clearTickled();
 			this._focusedDepth = 0;
 			this.#cancelAllLeavingAnimations();
 			this.#leaving.clear();
@@ -2004,7 +2068,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 				});
 			}
 		}
-		if (changedProps.has(`interactionMode`)) {
+		if (changedProps.has(`interactionMode`) && changedProps.get(`interactionMode`) !== void 0) {
 			this.#anchor = void 0;
 			this.clearSelection();
 		}
@@ -2018,6 +2082,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			this.#repaintSearchHighlights();
 		} else this.#runItemAnimations();
 		this.#animationOverride = void 0;
+		this.#syncViewStateAfterRender();
 	}
 	/** Highlights are painted on rendered labels, so they move with the window. */
 	#repaintSearchHighlights() {
@@ -2031,7 +2096,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			id: `select-all`,
 			label: `Select All`,
 			description: `Select all visible items`,
-			execute: () => this.selectAll()
+			execute: () => this.selectAll({ visibleOnly: true })
 		});
 		registry.register({
 			id: `deselect-all`,
@@ -2433,6 +2498,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			this.#postDragSuppressTimer = void 0;
 		}
 		this.#container()?.removeEventListener(`scroll`, this.#onContainerScroll);
+		this.#scrollHover.end();
 		this.#teardownVirtualObservers();
 		if (this.#stickyScrollBound) {
 			this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
@@ -2461,6 +2527,145 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		};
 		this.requestUpdate();
 	}
+	/**
+	* Snapshot selection, expansion, cursor and scroll as plain JSON, keyed by
+	* `item.key`. Includes pending state for keys not currently loaded.
+	*/
+	getViewState(options) {
+		const withPending = options?.includePending ?? true;
+		const tickled = this.tickled.tickledId;
+		const focus = this.tickled.inputMode === `keyboard` || tickled !== void 0 && tickled === this.#restoredFocus ? tickled : void 0;
+		return this.#viewState.shape({
+			selected: keysToArray([...this._selectedNodes].map((n) => n.item.key), withPending ? this.#pendingSelected : []),
+			expanded: flagsToRecord(withPending ? this.#pendingExpanded : [], keysAsFlags(this._expandedKeys)),
+			focus: focus ?? (withPending ? this.#pendingFocus : void 0),
+			scroll: (withPending ? this.#viewState.pendingScroll : void 0) ?? this.#captureScroll()
+		}, options);
+	}
+	/**
+	* Apply saved view state. Fields present replace the current ones; keys
+	* that aren't loaded yet are applied as they appear — including via
+	* `loadChildren` / `model` for saved-open branches when `restoreLoads`.
+	*/
+	setViewState(state) {
+		if (!this.#viewState.accepts(state)) return;
+		this.#viewState.restoring(() => {
+			if (state.expanded) {
+				this.#pendingExpanded = capFlags(flagsFromRecord(state.expanded));
+				this.#setExpanded(/* @__PURE__ */ new Set());
+			}
+			if (state.selected) {
+				this.#pendingSelected = capKeys(new Set(state.selected));
+				if (this._selectedNodes.size > 0) {
+					const prev = new Set(this._selectedNodes);
+					this.#clearSelectionInternal();
+					this.#dispatchSelect(prev);
+				}
+			}
+			if (state.focus !== void 0) this.#pendingFocus = state.focus;
+			if (state.scroll) this.#viewState.pendingScroll = state.scroll;
+			this.#reconcileViewState();
+		});
+		this.requestUpdate();
+	}
+	clearPendingViewState() {
+		this.#pendingExpanded = EMPTY_FLAGS;
+		this.#pendingSelected = EMPTY_KEYS;
+		this.#pendingFocus = void 0;
+		this.#viewState.pendingScroll = void 0;
+	}
+	/** Move state for missing keys to pending; apply pending state for keys now loaded. */
+	#reconcileViewState() {
+		this.#reconciledVersion = this.#structureVersion;
+		if (!this.root) return;
+		const { parentByKey } = this.#getTreeIndex();
+		const has = (key) => parentByKey.has(key);
+		this.#viewState.restoring(() => {
+			const exp = reconcileExpansion(this._expandedKeys, this.#pendingExpanded, has, (key) => this.#nodeByKey(key)?.children !== void 0);
+			if (exp.changed) {
+				let pending = exp.pending;
+				for (const key of exp.needsLoad) if (this.#nodeByKey(key)?.item.isLeaf !== false) pending = withoutFlag(pending, key);
+				this.#pendingExpanded = pending;
+				if (exp.live !== this._expandedKeys) {
+					this.#animationOverride ??= false;
+					this.#setExpanded(exp.live);
+				}
+			}
+			const sel = reconcileSelection(this._selectedNodes, this.#pendingSelected, (key) => has(key) ? this.#nodeByKey(key) : void 0, (node) => this.#canSelect(node), this.interactionMode === `implicit`);
+			if (sel.changed) {
+				const prev = this._selectedNodes;
+				this._selectedNodes = new Set(sel.selected);
+				this.#pendingSelected = sel.pending;
+				const selectedKey = this.selectedNode?.item.key;
+				this.selectedNode = (selectedKey === void 0 ? void 0 : [...sel.selected].find((n) => n.item.key === selectedKey)) ?? [...sel.selected].at(-1);
+				if (sel.restored) this.#dispatchSelect(prev);
+				else this._selectionVersion++;
+			}
+			const tickled = this.tickled.tickledId;
+			if (tickled !== void 0 && !has(tickled)) {
+				this.#pendingFocus ??= tickled;
+				this.tickled.clearTickled();
+			}
+			if (this.#pendingFocus !== void 0 && this.#getFlat().indexByKey.has(this.#pendingFocus)) {
+				this.tickled.setTickled(this.#pendingFocus);
+				this.#restoredFocus = this.#pendingFocus;
+				this.#pendingFocus = void 0;
+			}
+		});
+	}
+	/** Post-render: bind scroll tracking, apply a pending scroll, continue restore loads. */
+	#syncViewStateAfterRender() {
+		const container = this.#container();
+		if (container && container !== this.#viewStateScrollTarget) {
+			this.#viewStateScrollTarget?.removeEventListener(`scroll`, this.#onViewStateScroll);
+			this.#viewStateScrollTarget = container;
+			container.addEventListener(`scroll`, this.#onViewStateScroll, { passive: true });
+			this.#viewState.observeScrollTarget(container);
+		}
+		this.#viewState.applyPendingScroll((scroll) => this.#applyScroll(scroll));
+		this.#continueRestoreLoads();
+	}
+	#onViewStateScroll;
+	#captureScroll() {
+		const container = this.#container();
+		if (!container) return void 0;
+		const rows = this.#getFlat().rows;
+		if (!this.#virtualActive()) this.#measureMetrics();
+		const params = this.#layoutParams(rows.length);
+		const top = container.scrollTop;
+		const index = treeIndexAt(params, top);
+		const key = index >= 0 ? rows[index]?.node.item.key : void 0;
+		return anchorFromRow(top, key, index >= 0 ? treeRowTop(params, index) : 0);
+	}
+	/** Returns `true` once the saved position is fully reached. */
+	#applyScroll(scroll) {
+		const container = this.#container();
+		if (!container) return false;
+		let target = scroll.top;
+		if (scroll.anchor) {
+			const flat = this.#getFlat();
+			const index = flat.indexByKey.get(scroll.anchor.key);
+			if (index === void 0) return false;
+			if (!this.#virtualActive()) this.#measureMetrics();
+			target = treeRowTop(this.#layoutParams(flat.rows.length), index) + scroll.anchor.offset;
+		}
+		return scrollToOffset(container, target);
+	}
+	/** Open the next saved-open branch whose children aren't loaded (one load at a time). */
+	#continueRestoreLoads() {
+		if (!this.restoreLoads || this.#pendingNode || this.#pendingExpanded.size === 0 || !this.root || !this.#hasLoader()) return;
+		const { parentByKey } = this.#getTreeIndex();
+		for (const [key, open] of this.#pendingExpanded) {
+			if (!open || !parentByKey.has(key)) continue;
+			const node = this.#nodeByKey(key);
+			if (node && node.children === void 0 && node.item.isLeaf === false) {
+				let depth = 0;
+				for (let k = parentByKey.get(key); k !== void 0 && k !== this.root.item.key; k = parentByKey.get(k)) depth++;
+				this.#startLoad(node, depth);
+				return;
+			}
+		}
+	}
 	select(node) {
 		if (!this.#canSelect(node)) return;
 		const prev = new Set(this._selectedNodes);
@@ -2479,39 +2684,53 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.requestUpdate();
 	}
 	clearSelection() {
+		this.#pendingSelected = EMPTY_KEYS;
 		if (this._selectedNodes.size === 0) return;
 		const prev = new Set(this._selectedNodes);
 		this.#clearSelectionInternal();
 		this.#dispatchSelect(prev);
 		this.requestUpdate();
 	}
-	selectAll() {
+	/**
+	* Select every selectable node in the tree, or only the matches while a
+	* `filterPredicate` is active. Nodes inside collapsed branches are included;
+	* unloaded (lazy) children are not. With `visibleOnly`, only rows that are
+	* showing are selected (Ctrl+A). In `checked` mode checking a row checks its
+	* descendants, so `visibleOnly` makes no difference there.
+	*/
+	selectAll(options = {}) {
 		const prev = new Set(this._selectedNodes);
-		if (this.interactionMode === `checked`) for (const { node } of this.#getFlat().rows) {
-			if (!this.#canSelect(node)) continue;
-			this.#applyCheckedToggle(node, true);
-		}
-		else {
-			for (const { node } of this.#getFlat().rows) {
-				if (!this.#canSelect(node)) continue;
-				this._selectedNodes.add(node);
-			}
-			this.selectedNode = [...this._selectedNodes].at(-1);
-		}
+		for (const node of this.#bulkSelectionScope(options)) if (this.#canSelect(node)) this._selectedNodes.add(node);
+		if (this.selectedNode === void 0 || !this._selectedNodes.has(this.selectedNode)) this.selectedNode = [...this._selectedNodes].at(-1);
 		this.#dispatchSelect(prev);
 		this.requestUpdate();
 	}
-	deselectAll() {
+	/** Mirror of {@link selectAll}: deselect the same set of nodes it would select. */
+	deselectAll(options = {}) {
 		const prev = new Set(this._selectedNodes);
-		if (this.interactionMode === `checked`) for (const { node } of this.#getFlat().rows) {
-			if (!this.#canSelect(node)) continue;
-			this.#applyCheckedToggle(node, false);
-		}
-		else this.#clearSelectionInternal();
+		for (const node of this.#bulkSelectionScope(options)) this._selectedNodes.delete(node);
+		if (this.selectedNode !== void 0 && !this._selectedNodes.has(this.selectedNode)) this.selectedNode = [...this._selectedNodes].at(-1);
 		this.#dispatchSelect(prev);
 		this.requestUpdate();
 	}
 	/**
+	* Nodes `selectAll` / `deselectAll` act on (before `canSelect`): the showing
+	* rows for `visibleOnly` outside `checked` mode, otherwise every loaded node
+	* that the active filter (if any) matches.
+	*/
+	#bulkSelectionScope(options) {
+		if (options.visibleOnly === true && this.interactionMode !== `checked`) return this.#getFlat().rows.map((r) => r.node);
+		const matches = this.#getFilter()?.matches;
+		const result = [];
+		const visit = (node) => {
+			if (matches && !matches.has(node.item.key)) return;
+			result.push(node);
+			node.children?.forEach(visit);
+		};
+		this.root?.children?.forEach(visit);
+		return result;
+	}
+	/**
 	* Expand every already-loaded branch in a single update. With `maxDepth`,
 	* only branches at depth < `maxDepth` are expanded (the root's children are
 	* depth 0), so rows at depth `maxDepth` become visible but stay collapsed.
@@ -2680,6 +2899,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	#selectSilent;
 	#dispatchSelect(previous) {
 		this._selectionVersion++;
+		if (!this.#viewState.isRestoring) this.#pendingSelected = EMPTY_KEYS;
+		this.#viewState.notify();
 		if (this.#selectSilent) return;
 		const detail = {
 			selected: new Set(this._selectedNodes),
@@ -2897,12 +3118,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}));
 		} else if (node.children === void 0) {
 			if (node.item.isLeaf !== false) return;
-			if (this.model ?? (this.loadChildren ? this : void 0)) {
-				this.#pendingNode = node;
-				const controller = new AbortController();
-				this.#pendingController = controller;
-				this.#invokeLoadChildren(node, depth, controller).catch(() => {});
-			}
+			if (this.#hasLoader()) this.#startLoad(node, depth);
 		} else {
 			this.#applyExclusivity(node.item.key);
 			this.#setExpanded(withKey(this._expandedKeys, node.item.key));
@@ -2970,6 +3186,15 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			this.#dispatchSelect(prev);
 		}
 	}
+	#hasLoader() {
+		return this.model !== void 0 || this.loadChildren !== void 0;
+	}
+	#startLoad(node, depth) {
+		this.#pendingNode = node;
+		const controller = new AbortController();
+		this.#pendingController = controller;
+		this.#invokeLoadChildren(node, depth, controller).catch(() => {});
+	}
 	async #invokeLoadChildren(node, depth, controller) {
 		try {
 			let children;
@@ -3114,6 +3339,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const { node, depth } = nodes[index];
 		this.tickled.setTickled(node.item.key);
 		this._focusedDepth = depth;
+		this.#pendingFocus = void 0;
+		this.#viewState.notify();
 		this.dispatchEvent(new CustomEvent(`tickle`, {
 			detail: {
 				node,
@@ -3162,7 +3389,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
         data-input-mode=${this.tickled.inputMode}
         @keydown=${this.#onKeyDown}
         @dblclick=${this.#onDblClick}
-        @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
+        @scroll=${this.#scrollHover.onScroll}
+        @pointermove=${this.#scrollHover.onPointerMove}
+        @pointerleave=${(e) => {
+			this.#scrollHover.onPointerLeave();
+			this.tickled.handlePointerLeave(e);
+		}}
         tabindex="0"
       >
         ${this.#renderStickyHeaders()}
@@ -3263,17 +3495,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
         draggable=${dnd.draggable ? `true` : nothing}
         part=${dnd.dropTarget ? `drop-target` : nothing}
         @click=${(e) => this._handleItemClick(node, depth, e)}
-        @pointerenter=${() => {
-			this.tickled.handlePointerEnter(node.item.key);
-			this.dispatchEvent(new CustomEvent(`tickle`, {
-				detail: {
-					node,
-					depth
-				},
-				bubbles: true,
-				composed: true
-			}));
-		}}
+        @pointerenter=${() => this._handleRowPointerEnter(node, depth)}
       >
         ${dnd.dropTarget && (dnd.dropPosition === `before` || dnd.dropPosition === `after`) ? html`<div
             class="drop-line drop-line-${dnd.dropPosition}"
@@ -3535,6 +3757,11 @@ __decorate([property({
 	type: Boolean,
 	attribute: `disable-keyboard-navigation`
 })], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `scroll-hover-tickle`,
+	reflect: true
+})], TreeBaseElement.prototype, "scrollHoverTickle", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "registry", void 0);
 __decorate([property({
 	type: String,
@@ -3588,6 +3815,7 @@ __decorate([property({ attribute: false })], TreeBaseElement.prototype, "canDrop
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "parseExternalDrop", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "applyInternalDrop", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
+__decorate([property({ attribute: false })], TreeBaseElement.prototype, "restoreLoads", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_scrollTop", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_stickyKeys", void 0);
@@ -3689,7 +3917,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
         draggable=${dnd.draggable ? `true` : nothing}
         part=${dnd.dropTarget ? `drop-target` : nothing}
         @click=${(e) => this._handleItemClick(node, depth, e)}
-        @pointerenter=${() => this.tickled.handlePointerEnter(node.item.key)}
+        @pointerenter=${() => this._handleRowPointerEnter(node, depth)}
       >
         ${dnd.dropTarget && (dnd.dropPosition === `before` || dnd.dropPosition === `after`) ? html`<div
             class="drop-line drop-line-${dnd.dropPosition}"