@ixfx/components 0.13.1 → 0.13.3

package/dist/{tree-DGveys4K.js → tree-DD8OaqsK.js}

@@ -2,7 +2,7 @@ import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 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-D91M4Ozq.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 { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-ZTh4htzr.js";
@@ -643,15 +643,10 @@ var TreeDropController = class {
 		if (clientY > rows[rows.length - 1].rect.bottom) return rows[rows.length - 1];
 		return rows.find((r) => clientY >= r.rect.top && clientY <= r.rect.bottom) ?? rows[rows.length - 1];
 	}
-	#parentRow(rows, index) {
-		const target = rows[index];
-		for (let i = index - 1; i >= 0; i--) if (rows[i].depth === target.depth - 1) return rows[i];
-	}
 	#resolveIntent(event, rows, source) {
 		if (rows.length === 0) return void 0;
 		const row = this.#rowAtPointer(rows, event.clientY);
 		if (!row) return void 0;
-		const rowIndex = rows.indexOf(row);
 		const f = clamp((event.clientY - row.rect.top) / row.rect.height, 0, 1);
 		let position = f < .25 ? `before` : f > .75 ? `after` : `inside`;
 		const isLeaf = row.node.item.isLeaf === true;
@@ -674,18 +669,21 @@ var TreeDropController = class {
 			const indent = this.#config.getIndentPx() || 1;
 			const treeLeft = rows[0].rect.left;
 			const effDepth = clamp(Math.round((event.clientX - treeLeft) / indent), 0, row.depth);
-			let anchorIndex = rowIndex;
-			for (let up = row.depth - effDepth; up > 0; up--) {
-				const parent = this.#parentRow(rows, anchorIndex);
-				if (!parent) break;
-				anchorIndex = rows.indexOf(parent);
+			let anchor = {
+				node: row.node,
+				depth: row.depth,
+				parentKey: this.#config.getRowInfo(row.key)?.parentKey
+			};
+			referenceKey = row.key;
+			for (let up = row.depth - effDepth; up > 0 && anchor.parentKey !== void 0; up--) {
+				const parentInfo = this.#config.getRowInfo(anchor.parentKey);
+				if (!parentInfo) break;
+				referenceKey = anchor.parentKey;
+				anchor = parentInfo;
 			}
-			const anchor = rows[anchorIndex];
-			referenceKey = anchor.key;
 			depth = anchor.depth;
-			const parent = this.#parentRow(rows, anchorIndex);
-			parentKey = parent?.key;
-			const refIdx = (parent ? parent.node.children ?? [] : rows.filter((r) => r.depth === 0).map((r) => r.node)).findIndex((n) => n.item.key === anchor.key);
+			parentKey = anchor.parentKey;
+			const refIdx = this.#config.getChildren(parentKey).findIndex((n) => n.item.key === referenceKey);
 			index = (refIdx < 0 ? 0 : refIdx) + (position === `after` ? 1 : 0);
 		}
 		if (source === `internal`) {
@@ -760,9 +758,333 @@ var TreeDropController = class {
 	}
 };
 //#endregion
+//#region src/tree/tree-flat.ts
+/**
+* Flatten the visible rows under `root` (root itself excluded).
+*
+* Iterative implementation using an explicit stack to avoid recursion depth
+* limits with deep trees. `posInSet` / `setSize` count only shown siblings.
+*
+* @param root - The root node (never included in output; its children are depth 0)
+* @param options - Callbacks determining expansion and visibility
+* @returns FlatTree with rows in display order and a key→index map
+*/
+function flattenTree(root, options) {
+	const rows = [];
+	const indexByKey = /* @__PURE__ */ new Map();
+	const stack = [];
+	const pushChildren = (children, depth, parentKey) => {
+		if (!children || children.length === 0) return;
+		const shown = children.filter((c) => options.isShown(c, depth));
+		for (let i = shown.length - 1; i >= 0; i--) stack.push({
+			node: shown[i],
+			depth,
+			parentKey,
+			posInSet: i + 1,
+			setSize: shown.length
+		});
+	};
+	pushChildren(root.children, 0, void 0);
+	while (stack.length > 0) {
+		const { node, depth, parentKey, posInSet, setSize } = stack.pop();
+		indexByKey.set(node.item.key, rows.length);
+		rows.push({
+			node,
+			depth,
+			parentKey,
+			posInSet,
+			setSize
+		});
+		if (node.children && node.children.length > 0 && options.isExpanded(node, depth)) pushChildren(node.children, depth + 1, node.item.key);
+	}
+	return {
+		rows,
+		indexByKey
+	};
+}
+/**
+* Build a whole-tree index over the currently loaded nodes.
+* This walks the entire loaded tree once and is cached on structure version.
+*
+* @param root - The root node
+* @returns TreeIndex with parent map and icon depth set
+*/
+function indexTree(root) {
+	const parentByKey = /* @__PURE__ */ new Map();
+	const depthsWithIcons = /* @__PURE__ */ new Set();
+	const stack = [];
+	if (root.children) for (const child of root.children) {
+		parentByKey.set(child.item.key, root.item.key);
+		stack.push({
+			node: child,
+			depth: 0,
+			parentKey: root.item.key
+		});
+	}
+	while (stack.length > 0) {
+		const { node, depth, parentKey } = stack.pop();
+		parentByKey.set(node.item.key, parentKey);
+		if (node.item.icon) depthsWithIcons.add(depth);
+		if (node.children) for (let i = node.children.length - 1; i >= 0; i--) {
+			const child = node.children[i];
+			stack.push({
+				node: child,
+				depth: depth + 1,
+				parentKey: node.item.key
+			});
+		}
+	}
+	return {
+		parentByKey,
+		depthsWithIcons
+	};
+}
+/**
+* Compute which nodes match a filter predicate.
+* Returns the set of keys for nodes that match OR have a matching descendant.
+*
+* One iterative post-order pass; every node is visited (no short-circuiting).
+*/
+function computeFilterMatches(root, predicate) {
+	const matches = /* @__PURE__ */ new Set();
+	if (!root.children) return matches;
+	const stack = [];
+	const enter = (node, depth) => {
+		stack.push({
+			node,
+			depth,
+			next: 0,
+			matched: predicate(node, depth)
+		});
+	};
+	for (const child of root.children) {
+		enter(child, 0);
+		while (stack.length > 0) {
+			const frame = stack[stack.length - 1];
+			const children = frame.node.children;
+			if (children && frame.next < children.length) {
+				enter(children[frame.next++], frame.depth + 1);
+				continue;
+			}
+			stack.pop();
+			if (frame.matched) {
+				matches.add(frame.node.item.key);
+				if (stack.length > 0) stack[stack.length - 1].matched = true;
+			}
+		}
+	}
+	return matches;
+}
+/**
+* Merge ghost rows back near their previous position.
+* Each ghost goes immediately before the first row that followed it last render
+* and still exists; otherwise at the end. Ghosts sharing an anchor keep their
+* previous relative order. O(rows + prevKeys).
+*
+* @param rows - Current flat rows (with node and depth)
+* @param prevKeys - Previous render's row keys in order
+* @param ghosts - Map of ghost keys to their row data
+* @returns Rows with ghosts woven in at their original relative positions
+*/
+function weaveGhosts(rows, prevKeys, ghosts) {
+	if (ghosts.size === 0) return [...rows];
+	const present = /* @__PURE__ */ new Set();
+	for (const r of rows) present.add(r.node.item.key);
+	const END = Symbol(`end`);
+	const before = /* @__PURE__ */ new Map();
+	let nextSurvivor = END;
+	for (let i = prevKeys.length - 1; i >= 0; i--) {
+		const key = prevKeys[i];
+		if (present.has(key)) {
+			nextSurvivor = key;
+			continue;
+		}
+		const ghost = ghosts.get(key);
+		if (!ghost) continue;
+		const list = before.get(nextSurvivor);
+		if (list) list.push(ghost);
+		else before.set(nextSurvivor, [ghost]);
+	}
+	const result = [];
+	for (const row of rows) {
+		const list = before.get(row.node.item.key);
+		if (list) for (let i = list.length - 1; i >= 0; i--) result.push(list[i]);
+		result.push(row);
+	}
+	const tail = before.get(END);
+	if (tail) for (let i = tail.length - 1; i >= 0; i--) result.push(tail[i]);
+	return result;
+}
+/**
+* Compute checkbox states for all nodes in a single iterative post-order pass.
+* A leaf (or a branch with no children) uses `selected.has(node)`; otherwise a
+* branch is checked if all children are checked, unchecked if all are
+* unchecked, else indeterminate.
+*
+* @param root - The root node
+* @param selected - Set of selected nodes
+* @returns Map from node key to checkbox state
+*/
+function computeCheckboxStates(root, selected) {
+	const states = /* @__PURE__ */ new Map();
+	if (!root.children) return states;
+	const stack = [];
+	for (const top of root.children) {
+		stack.push({
+			node: top,
+			next: 0,
+			checked: 0,
+			unchecked: 0
+		});
+		while (stack.length > 0) {
+			const frame = stack[stack.length - 1];
+			const { node } = frame;
+			const children = node.children;
+			const isLeafLike = node.item.isLeaf || !children?.length;
+			if (!isLeafLike && frame.next < children.length) {
+				stack.push({
+					node: children[frame.next++],
+					next: 0,
+					checked: 0,
+					unchecked: 0
+				});
+				continue;
+			}
+			stack.pop();
+			let state;
+			if (isLeafLike) state = selected.has(node) ? `checked` : `unchecked`;
+			else if (frame.checked === children.length) state = `checked`;
+			else if (frame.unchecked === children.length) state = `unchecked`;
+			else state = `indeterminate`;
+			states.set(node.item.key, state);
+			if (stack.length > 0) {
+				const parent = stack[stack.length - 1];
+				if (state === `checked`) parent.checked++;
+				else if (state === `unchecked`) parent.unchecked++;
+			}
+		}
+	}
+	return states;
+}
+function withKey(set, key) {
+	if (set.has(key)) return set;
+	const next = new Set(set);
+	next.add(key);
+	return next;
+}
+function withoutKey(set, key) {
+	if (!set.has(key)) return set;
+	const next = new Set(set);
+	next.delete(key);
+	return next;
+}
+/** Remove every key for which `pred` returns true. */
+function withoutKeys(set, pred) {
+	let next;
+	for (const key of set) if (pred(key)) {
+		next ??= new Set(set);
+		next.delete(key);
+	}
+	return next ?? set;
+}
+function treeStride(params) {
+	return Math.max(1, params.rowHeight + params.gap);
+}
+/** Content-space top of the row box at `index`. */
+function treeRowTop(params, index) {
+	return params.listOffset + index * treeStride(params) + params.gap;
+}
+function treeRowBottom(params, index) {
+	return treeRowTop(params, index) + params.rowHeight;
+}
+/** The window of rows to render for a given scroll offset. Always `0 <= start <= end <= count`. */
+function computeTreeWindow(params, scrollTop, overscan = 5) {
+	const { count } = params;
+	if (count <= 0) return {
+		start: 0,
+		end: 0
+	};
+	const stride = treeStride(params);
+	const top = Math.max(0, scrollTop - params.listOffset);
+	const firstVisible = Math.floor(top / stride);
+	const lastVisible = Math.ceil((top + params.viewportHeight) / stride);
+	const start = Math.min(count, Math.max(0, firstVisible - overscan));
+	return {
+		start,
+		end: Math.min(count, Math.max(start, lastVisible + overscan))
+	};
+}
+/**
+* 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).
+* Returns `scrollTop` unchanged when the row is already visible.
+*/
+function treeScrollTopToReveal(params, index, scrollTop, topInset = 0) {
+	if (index < 0 || index >= params.count) return scrollTop;
+	const top = treeRowTop(params, index);
+	const bottom = top + params.rowHeight;
+	if (top < scrollTop + topInset) return index === 0 ? 0 : Math.max(0, top - topInset);
+	if (bottom > scrollTop + params.viewportHeight) return Math.max(0, bottom - params.viewportHeight);
+	return scrollTop;
+}
+/** Rows that fit one viewport (PageUp / PageDown step), at least 1. */
+function treePageSize(params) {
+	return Math.max(1, Math.floor(params.viewportHeight / treeStride(params)) - 1);
+}
+/** Arithmetic `RowGeometryReader` over flat-row indices (the windowed counterpart of reading `offsetTop`). */
+function treeRowReader(params) {
+	return {
+		count: params.count,
+		topOf: (i) => treeRowTop(params, i),
+		bottomOf: (i) => treeRowBottom(params, i)
+	};
+}
+//#endregion
+//#region src/tree/tree-row-geometry.ts
+/**
+* First index whose bottom is greater than `y` (binary search; rows are
+* monotonic). Returns `reader.count` when no row qualifies.
+*/
+function firstRowBelow(reader, y) {
+	let lo = 0;
+	let hi = reader.count;
+	while (lo < hi) {
+		const mid = lo + hi >>> 1;
+		if (reader.bottomOf(mid) > y) hi = mid;
+		else lo = mid + 1;
+	}
+	return lo;
+}
+/**
+* Inclusive index range of rows that overlap `[top, bottom]`, widened by
+* `margin` rows on each side. Returns `undefined` when there are no rows.
+*/
+function rowRangeOverlapping(reader, top, bottom, margin = 0) {
+	if (reader.count === 0) return void 0;
+	const firstHit = Math.min(firstRowBelow(reader, top), reader.count - 1);
+	let lo = firstHit;
+	let hi = reader.count;
+	while (lo < hi) {
+		const mid = lo + hi >>> 1;
+		if (reader.topOf(mid) >= bottom) hi = mid;
+		else lo = mid + 1;
+	}
+	const lastHit = Math.max(firstHit, lo - 1);
+	return {
+		first: Math.max(0, firstHit - margin),
+		last: Math.min(reader.count - 1, lastHit + margin)
+	};
+}
+//#endregion
 //#region src/tree/tree-base.ts
 /** Above this many rows entering / leaving at once, skip the animation entirely. */
 const MAX_ANIMATED_ROWS = 50;
+const EMPTY_FLAT = {
+	rows: [],
+	indexByKey: /* @__PURE__ */ new Map()
+};
+/** Viewport height assumed until the container has been measured (or when it reads 0). */
+const FALLBACK_VIEWPORT_HEIGHT = 600;
 let TreeBaseElement = class TreeBaseElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -776,11 +1098,33 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.dndExpandHoverMs = 500;
 		this.reorderable = true;
 		this.stickyHeaders = true;
+		this.virtualize = `auto`;
+		this.virtualizeThreshold = 200;
 		this.applyInternalDrop = true;
 		this._expandedKeys = /* @__PURE__ */ new Set();
+		this.#structureVersion = 0;
+		this._selectionVersion = 0;
+		this._scrollTop = 0;
+		this.#metrics = {
+			rowHeight: 30,
+			gap: 1,
+			listOffset: 0
+		};
+		this.#viewportH = 0;
+		this.#virtualScrollRaf = 0;
+		this.#winStart = 0;
+		this.#winEnd = 0;
+		this.#scrollOnlyUpdate = false;
+		this.#onVirtualScroll = () => {
+			if (this.#virtualScrollRaf !== 0) return;
+			this.#virtualScrollRaf = requestAnimationFrame(() => {
+				this.#virtualScrollRaf = 0;
+				this.#syncWindowToScroll();
+			});
+		};
 		this.tickled = new TickledController(this, {
 			getItems: () => {
-				return this.#getAllNodes().map(({ node }) => ({
+				return this.#getFlat().rows.map(({ node }) => ({
 					id: node.item.key,
 					enabled: true
 				}));
@@ -797,6 +1141,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		}) });
 		this.#config = { indent: 20 };
 		this.#renderedKeys = [];
+		this.#renderedRowKeys = [];
+		this.#renderedRowIndex = /* @__PURE__ */ new Map();
 		this.#lastNodeByKey = /* @__PURE__ */ new Map();
 		this.#enteringKeys = /* @__PURE__ */ new Set();
 		this.#leaving = /* @__PURE__ */ new Map();
@@ -820,9 +1166,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#stickyDirty = true;
 		this.#stickyRaf = 0;
 		this.#stickyScrollBound = false;
+		this.#revealToken = 0;
 		this.#onKeyDown = (event) => {
 			if (this.search.isOpen) return;
-			const nodes = this.#getAllNodes();
+			const nodes = this.#getFlat().rows;
 			if (nodes.length === 0) return;
 			if ((event.ctrlKey || event.metaKey) && event.key === `a`) {
 				event.preventDefault();
@@ -834,29 +1181,41 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 				`ArrowUp`,
 				`ArrowLeft`,
 				`ArrowRight`,
+				`Home`,
+				`End`,
+				`PageUp`,
+				`PageDown`,
 				`Enter`,
 				` `
 			].includes(event.key)) this.tickled.setInputMode(`keyboard`);
 			const currentIdx = this.#getFocusedIndex();
 			switch (event.key) {
-				case `ArrowDown`: {
+				case `ArrowDown`:
 					event.preventDefault();
-					const nextIdx = Math.min(currentIdx + 1, nodes.length - 1);
-					if (this.interactionMode === `implicit`) this.select(nodes[nextIdx].node);
-					this.#setFocusedIndex(nextIdx);
-					if (event.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`)) this.#extendRangeSelection(nodes, currentIdx, nextIdx);
-					else if (this.interactionMode === `vscode`) this.#anchor = void 0;
-					this.requestUpdate();
+					this.#navigateToIndex(nodes, currentIdx, Math.min(currentIdx + 1, nodes.length - 1), event.shiftKey);
+					break;
+				case `ArrowUp`:
+					event.preventDefault();
+					this.#navigateToIndex(nodes, currentIdx, Math.max(currentIdx - 1, 0), event.shiftKey);
+					break;
+				case `Home`:
+					event.preventDefault();
+					this.#navigateToIndex(nodes, currentIdx, 0, event.shiftKey);
+					break;
+				case `End`:
+					event.preventDefault();
+					this.#navigateToIndex(nodes, currentIdx, nodes.length - 1, event.shiftKey);
+					break;
+				case `PageDown`: {
+					event.preventDefault();
+					const page = this.#pageSize();
+					this.#navigateToIndex(nodes, currentIdx, Math.min(currentIdx + page, nodes.length - 1), event.shiftKey);
 					break;
 				}
-				case `ArrowUp`: {
+				case `PageUp`: {
 					event.preventDefault();
-					const prevIdx = Math.max(currentIdx - 1, 0);
-					if (this.interactionMode === `implicit`) this.select(nodes[prevIdx].node);
-					this.#setFocusedIndex(prevIdx);
-					if (event.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`)) this.#extendRangeSelection(nodes, currentIdx, prevIdx);
-					else if (this.interactionMode === `vscode`) this.#anchor = void 0;
-					this.requestUpdate();
+					const page = this.#pageSize();
+					this.#navigateToIndex(nodes, currentIdx, Math.max(currentIdx - page, 0), event.shiftKey);
 					break;
 				}
 				case `ArrowRight`: {
@@ -873,7 +1232,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 					event.preventDefault();
 					const current = nodes[currentIdx];
 					if (current && this._expandedKeys.has(current.node.item.key)) {
-						this._expandedKeys.delete(current.node.item.key);
+						this.#setExpanded(withoutKey(this._expandedKeys, current.node.item.key));
 						this.dispatchEvent(new CustomEvent(`collapse`, {
 							detail: {
 								node: current.node,
@@ -927,7 +1286,9 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			if (!li) return;
 			const key = li.dataset.key;
 			if (!key) return;
-			const node = this.#getAllNodes().find((n) => n.node.item.key === key);
+			const flat = this.#getFlat();
+			const idx = flat.indexByKey.get(key);
+			const node = idx === void 0 ? void 0 : flat.rows[idx];
 			if (!node) return;
 			const detail = {
 				node: node.node,
@@ -948,6 +1309,206 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	get selectedNodes() {
 		return this._selectedNodes;
 	}
+	#setExpanded(next) {
+		if (next === this._expandedKeys) return;
+		this._expandedKeys = next;
+		this.#flat = void 0;
+		this.#stickyDirty = true;
+	}
+	#flat;
+	#flatRoot;
+	#flatFilter;
+	#structureVersion;
+	#treeIndexCache;
+	#filterCache;
+	/**
+	* Call after editing `node.children` / `node.item` in place (outside
+	* `TreeDataModel`). Drops the cached whole-tree indexes and re-renders.
+	*/
+	invalidateStructure() {
+		this.#structureVersion++;
+		this.#flat = void 0;
+		this.requestUpdate();
+	}
+	/** Visible rows in display order (cached for the current update). */
+	#getFlat() {
+		if (!this.root) return EMPTY_FLAT;
+		if (this.#flat && this.#flatRoot === this.root && this.#flatFilter === this.filterPredicate) return this.#flat;
+		const filter = this.#getFilter();
+		this.#flat = flattenTree(this.root, {
+			isExpanded: (node, depth) => this._isExpanded(node, depth),
+			isShown: filter ? (node) => filter.matches.has(node.item.key) : () => true
+		});
+		this.#flatRoot = this.root;
+		this.#flatFilter = this.filterPredicate;
+		return this.#flat;
+	}
+	/** Whole-loaded-tree index (parents, icon depths); cached on `(root, structureVersion)`. */
+	#getTreeIndex() {
+		const root = this.root;
+		if (!root) return {
+			parentByKey: /* @__PURE__ */ new Map(),
+			depthsWithIcons: /* @__PURE__ */ new Set()
+		};
+		const cached = this.#treeIndexCache;
+		if (cached && cached.root === root && cached.version === this.#structureVersion) return cached.index;
+		const index = indexTree(root);
+		this.#treeIndexCache = {
+			root,
+			version: this.#structureVersion,
+			index
+		};
+		return index;
+	}
+	/** Row height / gap / list offset as last measured from CSS + layout. */
+	#metrics;
+	/** Last non-zero container height (a hidden dock tab reads 0). */
+	#viewportH;
+	#virtualScrollRaf;
+	#virtualScrollContainer;
+	#resizeObserver;
+	#winStart;
+	#winEnd;
+	/** Set in `willUpdate` when only the scroll offset changed; consumed in `updated`. */
+	#scrollOnlyUpdate;
+	/** True when the current visible row count should be windowed. */
+	#virtualActive() {
+		if (this.virtualize === `off`) return false;
+		if (this.virtualize === `on`) return true;
+		return this.#getFlat().rows.length > this.virtualizeThreshold;
+	}
+	#layoutParams(count) {
+		return {
+			count,
+			rowHeight: this.#metrics.rowHeight,
+			gap: this.#metrics.gap,
+			listOffset: this.#metrics.listOffset,
+			viewportHeight: this.#viewportH > 0 ? this.#viewportH : FALLBACK_VIEWPORT_HEIGHT
+		};
+	}
+	/**
+	* Re-read the CSS metrics and viewport height. Returns true when anything
+	* that changes row positions moved (the caller re-renders).
+	*/
+	#measureMetrics() {
+		const list = this.renderRoot.querySelector(`ul.tree-list`);
+		const sample = list?.querySelector(`li.item:not(.leaving)`);
+		const measuredHeight = sample?.getBoundingClientRect().height ?? 0;
+		const rowHeight = measuredHeight > 0 ? measuredHeight : this.#getItemHeight();
+		const measuredGap = sample ? Number.parseFloat(getComputedStyle(sample).marginTop) : NaN;
+		const parsedGap = Number.isNaN(measuredGap) ? Number.parseFloat(getComputedStyle(this).getPropertyValue(`--tree-item-gap`)) : measuredGap;
+		const gap = Number.isNaN(parsedGap) ? 1 : parsedGap;
+		let listOffset = this.#metrics.listOffset;
+		if (list) {
+			const padTop = Number.parseFloat(getComputedStyle(list).paddingTop);
+			listOffset = list.offsetTop + (Number.isNaN(padTop) ? 0 : padTop);
+		}
+		const height = this.#container()?.clientHeight ?? 0;
+		const heightChanged = height > 0 && height !== this.#viewportH;
+		if (height > 0) this.#viewportH = height;
+		const prev = this.#metrics;
+		const changed = prev.rowHeight !== rowHeight || prev.gap !== gap || prev.listOffset !== listOffset;
+		this.#metrics = {
+			rowHeight,
+			gap,
+			listOffset
+		};
+		return changed || heightChanged;
+	}
+	/** The window for the current scroll offset. */
+	#currentWindow(count) {
+		return computeTreeWindow(this.#layoutParams(count), this._scrollTop);
+	}
+	/** Pull the container's real scroll offset into state (programmatic and clamped scrolls included). */
+	#syncScrollTopFromContainer() {
+		const top = this.#container()?.scrollTop;
+		if (top !== void 0 && top !== this._scrollTop) this._scrollTop = top;
+	}
+	#onVirtualScroll;
+	/** Re-render only when the scroll has moved the window; scrolling inside it is free. */
+	#syncWindowToScroll() {
+		const container = this.#container();
+		if (!container || !this.root || !this.#virtualActive()) return;
+		const top = container.scrollTop;
+		if (top === this._scrollTop) return;
+		const next = computeTreeWindow(this.#layoutParams(this.#getFlat().rows.length), top);
+		if (next.start !== this.#winStart || next.end !== this.#winEnd) this._scrollTop = top;
+	}
+	/** Bind the window's scroll listener and resize observer to the container once it exists. */
+	#syncVirtualObservers() {
+		const container = this.#container();
+		if (container === this.#virtualScrollContainer) return;
+		this.#virtualScrollContainer?.removeEventListener(`scroll`, this.#onVirtualScroll);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#virtualScrollContainer = container;
+		if (!container) return;
+		container.addEventListener(`scroll`, this.#onVirtualScroll, { passive: true });
+		if (typeof ResizeObserver !== `undefined`) {
+			this.#resizeObserver = new ResizeObserver((entries) => {
+				const height = entries.at(-1)?.contentRect.height ?? 0;
+				if (height > 0 && height !== this.#viewportH && this.#virtualActive()) this.requestUpdate();
+			});
+			this.#resizeObserver.observe(container);
+		}
+	}
+	#teardownVirtualObservers() {
+		this.#virtualScrollContainer?.removeEventListener(`scroll`, this.#onVirtualScroll);
+		this.#virtualScrollContainer = void 0;
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		if (this.#virtualScrollRaf !== 0) {
+			cancelAnimationFrame(this.#virtualScrollRaf);
+			this.#virtualScrollRaf = 0;
+		}
+	}
+	/**
+	* Scroll flat row `index` into view (below the sticky overlay). Writes the
+	* container's `scrollTop` and `_scrollTop` together, so the very next render
+	* already contains the target row — no frame where it is missing.
+	*/
+	#revealIndex(index) {
+		const container = this.#container();
+		if (!container) return;
+		const params = this.#layoutParams(this.#getFlat().rows.length);
+		const inset = this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0;
+		const next = treeScrollTopToReveal(params, index, container.scrollTop, inset);
+		if (next === container.scrollTop && next === this._scrollTop) return;
+		container.scrollTop = next;
+		this._scrollTop = next;
+	}
+	/** Filter match sets, or `undefined` when no filter is active. */
+	#getFilter() {
+		const predicate = this.filterPredicate;
+		const root = this.root;
+		if (!predicate || !root) return void 0;
+		const cached = this.#filterCache;
+		if (cached && cached.predicate === predicate && cached.root === root && cached.version === this.#structureVersion) return cached;
+		const matches = computeFilterMatches(root, predicate);
+		const { parentByKey } = this.#getTreeIndex();
+		const autoExpanded = /* @__PURE__ */ new Set();
+		for (const key of matches) {
+			const parent = parentByKey.get(key);
+			if (parent !== void 0) autoExpanded.add(parent);
+		}
+		const next = {
+			predicate,
+			root,
+			version: this.#structureVersion,
+			matches,
+			autoExpanded
+		};
+		this.#filterCache = next;
+		return next;
+	}
+	/** Structure version for cache keys in subclasses (bumped on root / model change and lazy loads). */
+	get _structureVersion() {
+		return this.#structureVersion;
+	}
+	/** Depths at which any loaded node carries an icon (stable across expansion). */
+	get _depthsWithIcons() {
+		return this.#getTreeIndex().depthsWithIcons;
+	}
 	#unregisterSearchCommands;
 	#effectiveSearchModes() {
 		const raw = this.searchModes?.trim();
@@ -968,6 +1529,9 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	#ownedRegistry;
 	#config;
 	#renderedKeys;
+	/** Keys in the exact DOM order of the last render (ghost rows woven in). */
+	#renderedRowKeys;
+	#renderedRowIndex;
 	#lastNodeByKey;
 	#enteringKeys;
 	#leaving;
@@ -1002,73 +1566,65 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		}
 	}
 	#onStickyScroll;
-	/** Real (non-sticky) row element for `key`, or `null`. */
-	#stickyRowEl(key) {
-		return this.renderRoot.querySelector(`ul.tree-list li[data-key="${CSS.escape(key)}"]`);
+	/**
+	* Row geometry over the rendered `<li>` elements (ghost rows included), in
+	* container content coordinates. `#container` is `position: relative`, so
+	* `offsetTop` is scroll-independent. Reads only — no layout writes.
+	*/
+	#rowReader(rows) {
+		return {
+			count: rows.length,
+			topOf: (i) => rows[i].offsetTop,
+			bottomOf: (i) => rows[i].offsetTop + rows[i].offsetHeight
+		};
 	}
 	/**
 	* Recompute which ancestors stick to the top: the ancestors of the first
 	* row whose bottom clears the container top, minus any ancestor that is
 	* itself still visible below the overlay. Synchronous — reads current
-	* geometry, renders nothing, expands nothing.
+	* geometry, renders nothing, expands nothing. O(log N) offset reads + O(depth).
 	*/
 	#updateStickyHeaders() {
 		this.#stickyDirty = false;
 		const empty = /* @__PURE__ */ new Map();
-		if (!this.stickyHeaders || !this.root) {
-			this.#setStickyKeys([], empty);
-			return;
-		}
+		const clear = () => this.#setStickyKeys([], empty);
+		if (!this.stickyHeaders || !this.root) return clear();
 		const container = this.#container();
-		if (!container) {
-			this.#setStickyKeys([], empty);
-			return;
-		}
-		const nodes = this.#getAllNodes();
-		if (nodes.length === 0) {
-			this.#setStickyKeys([], empty);
-			return;
-		}
-		const parent = /* @__PURE__ */ new Map();
-		const walk = (n) => {
-			for (const child of n.children ?? []) {
-				parent.set(child.item.key, n.item.key);
-				walk(child);
-			}
-		};
-		walk(this.root);
-		const containerTop = container.getBoundingClientRect().top;
-		const visibleThreshold = containerTop + (this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0);
-		let topKey;
-		for (const { node } of nodes) {
-			const li = this.#stickyRowEl(node.item.key);
-			if (!li || li.classList.contains(`leaving`)) continue;
-			if (li.getBoundingClientRect().bottom > containerTop) {
-				topKey = node.item.key;
-				break;
-			}
-		}
-		if (topKey === void 0) {
-			this.#setStickyKeys([], empty);
-			return;
-		}
-		const rootKey = this.root.item.key;
+		const list = this.renderRoot.querySelector(`ul.tree-list`);
+		if (!container || !list) return clear();
+		const flat = this.#getFlat();
+		const virtual = this.#virtualActive();
+		const rows = list.children;
+		const keys = this.#renderedRowKeys;
+		if (flat.rows.length === 0) return clear();
+		if (!virtual && (rows.length === 0 || rows.length !== keys.length)) return clear();
+		const reader = virtual ? treeRowReader(this.#layoutParams(flat.rows.length)) : this.#rowReader(rows);
+		const scrollTop = container.scrollTop;
+		const visibleThreshold = scrollTop + (this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0);
+		let topIdx = firstRowBelow(reader, scrollTop);
+		if (!virtual) while (topIdx < rows.length && rows[topIdx].classList.contains(`leaving`)) topIdx++;
+		if (topIdx >= reader.count) return clear();
+		const topFlat = virtual ? topIdx : flat.indexByKey.get(keys[topIdx]);
+		if (topFlat === void 0) return clear();
 		const chain = [];
-		let cursor = parent.get(topKey);
-		while (cursor !== void 0 && cursor !== rootKey) {
-			chain.unshift(cursor);
-			cursor = parent.get(cursor);
+		let cursor = flat.rows[topFlat].parentKey;
+		while (cursor !== void 0) {
+			const idx = flat.indexByKey.get(cursor);
+			if (idx === void 0) break;
+			chain.unshift(flat.rows[idx]);
+			cursor = flat.rows[idx].parentKey;
 		}
-		const byKey = new Map(nodes.map((entry) => [entry.node.item.key, entry]));
 		const entries = /* @__PURE__ */ new Map();
 		const stuck = [];
-		for (const key of chain) {
-			const li = this.#stickyRowEl(key);
-			if (!li || li.getBoundingClientRect().bottom > visibleThreshold) continue;
-			const entry = byKey.get(key);
-			if (!entry) continue;
+		for (const row of chain) {
+			const key = row.node.item.key;
+			const domIdx = virtual ? flat.indexByKey.get(key) : this.#renderedRowIndex.get(key);
+			if (domIdx === void 0 || reader.bottomOf(domIdx) > visibleThreshold) continue;
 			stuck.push(key);
-			entries.set(key, entry);
+			entries.set(key, {
+				node: row.node,
+				depth: row.depth
+			});
 		}
 		this.#setStickyKeys(stuck, entries);
 	}
@@ -1081,12 +1637,14 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	#renderStickyHeaders() {
 		if (!this.stickyHeaders || this._stickyKeys.length === 0) return nothing;
 		return html`
-      <div class="sticky-headers" part="sticky-headers">
-        ${this._stickyKeys.map((key) => {
+      <div class="sticky-anchor">
+        <div class="sticky-headers" part="sticky-headers">
+          ${this._stickyKeys.map((key) => {
 			const entry = this.#stickyEntries.get(key);
 			if (!entry) return nothing;
 			return this.#renderStickyHeader(entry.node, entry.depth);
 		})}
+        </div>
       </div>
     `;
 	}
@@ -1158,15 +1716,44 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	willUpdate(changedProps) {
 		super.willUpdate(changedProps);
-		this.#diffVisibleNodes();
+		const scrollOnly = this.#flat !== void 0 && changedProps.size === 1 && changedProps.has(`_scrollTop`) && this.#virtualActive();
+		this.#scrollOnlyUpdate = scrollOnly;
+		if (scrollOnly) {
+			this.#syncScrollTopFromContainer();
+			return;
+		}
+		this.#flat = void 0;
+		if (changedProps.has(`root`) || changedProps.has(`model`)) this.#structureVersion++;
+		this.#diffVisibleNodes(changedProps.has(`filterPredicate`));
+		const virtual = this.#virtualActive();
+		this.toggleAttribute(`data-virtual`, virtual);
+		if (virtual) {
+			this.#measureMetrics();
+			this.#syncScrollTopFromContainer();
+		}
 		if (changedProps.has(`root`) || changedProps.has(`model`) || changedProps.has(`filterPredicate`) || changedProps.has(`stickyHeaders`)) this.#stickyDirty = true;
 		if (this.#stickyDirty) this.#updateStickyHeaders();
 	}
-	#diffVisibleNodes() {
-		const nodes = this.root ? this.#getAllNodes() : [];
+	/**
+	* `filterChanged`: typing in a filter adds / removes whole rows from the DOM.
+	* That is not an expand / collapse, so skip the enter / leave animations
+	* (and any ghosts) for this update; `#renderedKeys` is still refreshed.
+	*/
+	#diffVisibleNodes(filterChanged) {
+		const nodes = this.#getFlat().rows;
+		if (this.#virtualActive()) {
+			this.#enteringKeys.clear();
+			this.#cancelAllLeavingAnimations();
+			this.#leaving.clear();
+			this.#renderedKeys = [];
+			return;
+		}
 		const nowKeys = new Set(nodes.map((n) => n.node.item.key));
 		this.#enteringKeys.clear();
-		if (this.#treeAnimReady && this.#renderedKeys.length > 0) {
+		if (filterChanged) {
+			this.#cancelAllLeavingAnimations();
+			this.#leaving.clear();
+		} else if (this.#treeAnimReady && this.#renderedKeys.length > 0) {
 			const prevSet = new Set(this.#renderedKeys);
 			for (const { node } of nodes) if (!prevSet.has(node.item.key)) this.#enteringKeys.add(node.item.key);
 			if (this.#enteringKeys.size > MAX_ANIMATED_ROWS) this.#enteringKeys.clear();
@@ -1189,30 +1776,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		return this.#leaving.has(node.item.key);
 	}
 	/**
-	* True when `filterPredicate` is set and neither `node` nor any descendant
-	* matches — the row should carry the `filtered` class (`display: none`).
+	* Kept for subclass compatibility. Filtered-out rows are no longer rendered
+	* at all (they are omitted from the flat list), so this is `false` for every
+	* rendered row.
 	*/
-	_isFilteredOut(node, depth) {
-		return this.filterPredicate !== void 0 && !this.#matchesFilter(node, depth);
-	}
-	/** Splice the fading ghost rows back into the visible list near where they were. */
-	#weaveLeaving(nodes) {
-		if (this.#leaving.size === 0) return nodes;
-		const result = [...nodes];
-		const indexOfKey = (key) => result.findIndex((e) => e.node.item.key === key);
-		for (const [key, entry] of this.#leaving) {
-			const prevIdx = this.#renderedKeys.indexOf(key);
-			let insertAt = result.length;
-			for (let j = prevIdx + 1; j < this.#renderedKeys.length; j++) {
-				const at = indexOfKey(this.#renderedKeys[j]);
-				if (at !== -1) {
-					insertAt = at;
-					break;
-				}
-			}
-			result.splice(insertAt, 0, entry);
-		}
-		return result;
+	_isFilteredOut(_node, _depth) {
+		return false;
 	}
 	#runItemAnimations() {
 		if (this.#enteringKeys.size > 0) {
@@ -1252,7 +1821,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 				});
 			});
 		}
-		const visible = this.root ? this.#getAllNodes() : [];
+		const visible = this.#getFlat().rows;
 		this.#renderedKeys = visible.map((n) => n.node.item.key);
 		this.#lastNodeByKey.clear();
 		for (const entry of visible) this.#lastNodeByKey.set(entry.node.item.key, entry);
@@ -1260,10 +1829,16 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	updated(changedProps) {
 		this.#rowsCache = void 0;
+		this.#syncVirtualObservers();
+		if (this.#scrollOnlyUpdate) {
+			this.#scrollOnlyUpdate = false;
+			this.#repaintSearchHighlights();
+			return;
+		}
 		this.#syncStickyScroll();
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
-			this._expandedKeys.clear();
+			this.#setExpanded(/* @__PURE__ */ new Set());
 			this.#clearSelectionInternal();
 			this.tickled.clearTickled();
 			this._focusedDepth = 0;
@@ -1283,8 +1858,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 						this.requestUpdate();
 					} else if (event.type === `invalidate`) {
 						if (this._expandedKeys.has(event.key)) {
-							this._expandedKeys.delete(event.key);
-							this.#stickyDirty = true;
+							this.#setExpanded(withoutKey(this._expandedKeys, event.key));
 							this.requestUpdate();
 						}
 					}
@@ -1298,7 +1872,16 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (changedProps.has(`selectedNode`) && this.selectedNode) {
 			if (changedProps.get(`selectedNode`) !== this.selectedNode) this.tickled.setTickled(this.selectedNode.item.key);
 		}
-		this.#runItemAnimations();
+		if (this.#virtualActive()) {
+			this.#renderedKeys = [];
+			this.#lastNodeByKey.clear();
+			if (this.#measureMetrics()) queueMicrotask(() => this.requestUpdate());
+			this.#repaintSearchHighlights();
+		} else this.#runItemAnimations();
+	}
+	/** Highlights are painted on rendered labels, so they move with the window. */
+	#repaintSearchHighlights() {
+		if (this.search.isOpen) this.search.repaintHighlights();
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -1330,8 +1913,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 				return target.closest(`ul.tree-list li[data-key]`)?.getAttribute(`data-key`) ?? void 0;
 			},
 			prepareSelection: (originKey) => {
-				const allNodes = this.#getAllNodes();
-				const originEntry = allNodes.find((n) => n.node.item.key === originKey);
+				const flat = this.#getFlat();
+				const allNodes = flat.rows;
+				const originIdx = flat.indexByKey.get(originKey);
+				const originEntry = originIdx === void 0 ? void 0 : allNodes[originIdx];
 				if (!originEntry) return void 0;
 				const selectedNodes = new Set(this._selectedNodes);
 				if (!selectedNodes.has(originEntry.node)) selectedNodes.clear();
@@ -1420,6 +2005,18 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			getDndMode: () => this.itemDnd,
 			getExpandHoverMs: () => this.dndExpandHoverMs,
 			getVisibleRows: () => this.#getVisibleRows(),
+			getRowInfo: (key) => {
+				const flat = this.#getFlat();
+				const idx = flat.indexByKey.get(key);
+				if (idx === void 0) return void 0;
+				const { node, depth, parentKey } = flat.rows[idx];
+				return {
+					node,
+					depth,
+					parentKey
+				};
+			},
+			getChildren: (parentKey) => this.#childrenOfKey(parentKey),
 			getIndentPx: () => this.#getIndentPx(),
 			getScrollContainer: () => this.#container(),
 			isSelfOrDescendant: (ancestorKey, key) => this.#isSelfOrDescendant(ancestorKey, key),
@@ -1492,44 +2089,121 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const parsed = Number.parseInt(getComputedStyle(this).getPropertyValue(`--tree-item-height`), 10);
 		return Number.isNaN(parsed) ? 30 : parsed;
 	}
-	/** Measured rows, cached for the duration of a drag and invalidated on scroll / update. */
-	#getVisibleRows() {
-		if (this.#rowsCache) return this.#rowsCache;
-		const rows = [];
-		for (const { node, depth } of this.#getAllNodes()) {
-			const li = this.shadowRoot?.querySelector(`ul.tree-list li[data-key="${CSS.escape(node.item.key)}"]`);
-			if (li) rows.push({
+	/** Children of `parentKey` (the root's children when undefined), straight from the tree. */
+	#childrenOfKey(parentKey) {
+		if (parentKey === void 0) return this.root?.children ?? [];
+		const flat = this.#getFlat();
+		const idx = flat.indexByKey.get(parentKey);
+		return idx === void 0 ? [] : flat.rows[idx].node.children ?? [];
+	}
+	/**
+	* Windowed counterpart of the measured rows: rects come from the layout
+	* arithmetic and one rendered row's horizontal extent, so nothing is looked
+	* up per row and rows outside the window still resolve.
+	*/
+	#collectVirtualDropRows(container, list, out) {
+		const flat = this.#getFlat();
+		const params = this.#layoutParams(flat.rows.length);
+		const range = rowRangeOverlapping(treeRowReader(params), container.scrollTop, container.scrollTop + container.clientHeight, 1);
+		if (!range) return;
+		const containerRect = container.getBoundingClientRect();
+		const sample = list.querySelector(`li.item`)?.getBoundingClientRect() ?? containerRect;
+		for (let i = range.first; i <= range.last; i++) {
+			const { node, depth } = flat.rows[i];
+			const top = containerRect.top - container.scrollTop + treeRowTop(params, i);
+			const rect = {
+				x: sample.left,
+				y: top,
+				left: sample.left,
+				right: sample.left + sample.width,
+				top,
+				bottom: top + params.rowHeight,
+				width: sample.width,
+				height: params.rowHeight,
+				toJSON: () => ({})
+			};
+			out.push({
 				key: node.item.key,
 				node,
 				depth,
-				rect: li.getBoundingClientRect()
+				index: i,
+				rect
 			});
 		}
+	}
+	/**
+	* Measured rows for the part of the list that intersects the scroll
+	* container (plus one row of margin each side), cached for the duration of a
+	* drag and invalidated on scroll / update. Each row carries its flat index;
+	* structural lookups (parents, siblings) come from `getRowInfo` / `getChildren`.
+	*/
+	#getVisibleRows() {
+		if (this.#rowsCache) return this.#rowsCache;
+		const rows = [];
+		const container = this.#container();
+		const list = this.renderRoot.querySelector(`ul.tree-list`);
+		const keys = this.#renderedRowKeys;
+		if (container && list && this.#virtualActive()) this.#collectVirtualDropRows(container, list, rows);
+		else if (container && list && list.children.length === keys.length) {
+			const flat = this.#getFlat();
+			const items = list.children;
+			const range = rowRangeOverlapping(this.#rowReader(items), container.scrollTop, container.scrollTop + container.clientHeight, 1);
+			if (range) for (let i = range.first; i <= range.last; i++) {
+				const li = items[i];
+				if (li.classList.contains(`leaving`)) continue;
+				const flatIdx = flat.indexByKey.get(keys[i]);
+				if (flatIdx === void 0) continue;
+				const { node, depth } = flat.rows[flatIdx];
+				rows.push({
+					key: node.item.key,
+					node,
+					depth,
+					index: flatIdx,
+					rect: li.getBoundingClientRect()
+				});
+			}
+		}
 		this.#rowsCache = rows;
 		return rows;
 	}
 	/** Route spring-load through the real expand path so lazy children load and `expand` fires with the right depth. */
 	#springLoadExpand(key) {
 		if (this._expandedKeys.has(key)) return;
-		const entry = this.#getAllNodes().find((n) => n.node.item.key === key);
+		const flat = this.#getFlat();
+		const idx = flat.indexByKey.get(key);
+		const entry = idx === void 0 ? void 0 : flat.rows[idx];
 		if (!entry || entry.node.item.isLeaf === true) return;
 		this.#toggleExpand(entry.node, entry.depth);
 		this.#rowsCache = void 0;
 		this.requestUpdate();
 	}
+	/** O(depth): walk up the whole-tree parent map. */
 	#isSelfOrDescendant(ancestorKey, key) {
 		if (ancestorKey === key) return true;
-		let node = this.#getAllNodes().find((n) => n.node.item.key === key)?.node;
-		let parent = node ? this.#findParentByKey(node.item.key) : void 0;
-		while (parent) {
-			if (parent.item.key === ancestorKey) return true;
-			node = parent;
-			parent = this.#findParentByKey(node.item.key);
+		const { parentByKey } = this.#getTreeIndex();
+		let cursor = parentByKey.get(key);
+		while (cursor !== void 0) {
+			if (cursor === ancestorKey) return true;
+			cursor = parentByKey.get(cursor);
 		}
 		return false;
 	}
 	#findParentByKey(key) {
-		for (const { node } of this.#getAllNodes()) if (node.children?.some((c) => c.item.key === key)) return node;
+		const parentKey = this.#getTreeIndex().parentByKey.get(key);
+		if (parentKey === void 0 || parentKey === this.root?.item.key) return void 0;
+		return this.#nodeByKey(parentKey);
+	}
+	/** Node for a key anywhere in the loaded tree (via the flat list when visible). */
+	#nodeByKey(key) {
+		const flat = this.#getFlat();
+		const idx = flat.indexByKey.get(key);
+		if (idx !== void 0) return flat.rows[idx].node;
+		const { parentByKey } = this.#getTreeIndex();
+		const path = [];
+		for (let cursor = key; cursor !== void 0 && cursor !== this.root?.item.key; cursor = parentByKey.get(cursor)) path.unshift(cursor);
+		let node = this.root;
+		for (const k of path) node = node?.children?.find((c) => c.item.key === k);
+		return node;
 	}
 	/**
 	* Decide whether a DataTransfer is acceptable and resolve the dragged set.
@@ -1553,7 +2227,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 				return {
 					source: `internal`,
 					keys,
-					nodes: keys.map((k) => this.#getAllNodes().find((n) => n.node.item.key === k)?.node).filter((n) => n !== void 0)
+					nodes: keys.map((k) => this.#nodeByKey(k)).filter((n) => n !== void 0)
 				};
 			}
 			if (phase === `drop`) try {
@@ -1597,7 +2271,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	#anyRowDraggable() {
 		if (this.itemDnd === `none`) return false;
-		const allNodes = this.#getAllNodes();
+		const allNodes = this.#getFlat().rows;
 		if (allNodes.length === 0) return false;
 		if (!this.canDrag) return true;
 		return allNodes.some(({ node }) => this.canDrag({
@@ -1619,6 +2293,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			this.#postDragSuppressTimer = void 0;
 		}
 		this.#container()?.removeEventListener(`scroll`, this.#onContainerScroll);
+		this.#teardownVirtualObservers();
 		if (this.#stickyScrollBound) {
 			this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
 			this.#stickyScrollContainer = void 0;
@@ -1672,12 +2347,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	selectAll() {
 		const prev = new Set(this._selectedNodes);
-		if (this.interactionMode === `checked`) for (const { node } of this.#getAllNodes()) {
+		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.#getAllNodes()) {
+			for (const { node } of this.#getFlat().rows) {
 				if (!this.#canSelect(node)) continue;
 				this._selectedNodes.add(node);
 			}
@@ -1688,7 +2363,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	deselectAll() {
 		const prev = new Set(this._selectedNodes);
-		if (this.interactionMode === `checked`) for (const { node } of this.#getAllNodes()) {
+		if (this.interactionMode === `checked`) for (const { node } of this.#getFlat().rows) {
 			if (!this.#canSelect(node)) continue;
 			this.#applyCheckedToggle(node, false);
 		}
@@ -1709,7 +2384,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			const found = children.find((n) => n.item.key === key);
 			if (!found) return false;
 			this.#applyExclusivity(found.item.key);
-			this._expandedKeys.add(found.item.key);
+			this.#setExpanded(withKey(this._expandedKeys, found.item.key));
 			if (key === keys.at(-1)) {
 				this.select(found);
 				this.tickled.setTickled(found.item.key);
@@ -1734,7 +2409,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (!path) return false;
 		for (let i = 0; i < path.length - 1; i++) {
 			this.#applyExclusivity(path[i]);
-			this._expandedKeys.add(path[i]);
+			this.#setExpanded(withKey(this._expandedKeys, path[i]));
 		}
 		this.tickled.setTickled(key);
 		this.#stickyDirty = true;
@@ -1770,10 +2445,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		return true;
 	}
 	#clearSelectionInternal() {
+		this._selectionVersion++;
 		this._selectedNodes.clear();
 		this.selectedNode = void 0;
 	}
 	#dispatchSelect(previous) {
+		this._selectionVersion++;
 		const detail = {
 			selected: new Set(this._selectedNodes),
 			previous
@@ -1879,9 +2556,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			return;
 		}
 		if (isShift && this.#anchor) {
-			const visible = this.#getAllNodes();
-			const anchorIdx = visible.findIndex((n) => n.node === this.#anchor.node);
-			const targetIdx = visible.findIndex((n) => n.node === node);
+			const flat = this.#getFlat();
+			const visible = flat.rows;
+			const anchorIdx = flat.indexByKey.get(this.#anchor.node.item.key) ?? -1;
+			const targetIdx = flat.indexByKey.get(node.item.key) ?? -1;
 			if (anchorIdx >= 0 && targetIdx >= 0) {
 				const prev = new Set(this._selectedNodes);
 				const from = Math.min(anchorIdx, targetIdx);
@@ -1931,9 +2609,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			return;
 		}
 		if (isShift && this.#anchor) {
-			const visible = this.#getAllNodes();
-			const anchorIdx = visible.findIndex((n) => n.node === this.#anchor.node);
-			const targetIdx = visible.findIndex((n) => n.node === node);
+			const flat = this.#getFlat();
+			const visible = flat.rows;
+			const anchorIdx = flat.indexByKey.get(this.#anchor.node.item.key) ?? -1;
+			const targetIdx = flat.indexByKey.get(node.item.key) ?? -1;
 			if (anchorIdx >= 0 && targetIdx >= 0) {
 				const prev = new Set(this._selectedNodes);
 				const from = Math.min(anchorIdx, targetIdx);
@@ -1976,7 +2655,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const isExpanded = this._expandedKeys.has(node.item.key);
 		this.#stickyDirty = true;
 		if (isExpanded) {
-			this._expandedKeys.delete(node.item.key);
+			this.#setExpanded(withoutKey(this._expandedKeys, node.item.key));
 			this.dispatchEvent(new CustomEvent(`collapse`, {
 				detail: {
 					node,
@@ -1995,7 +2674,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}
 		} else {
 			this.#applyExclusivity(node.item.key);
-			this._expandedKeys.add(node.item.key);
+			this.#setExpanded(withKey(this._expandedKeys, node.item.key));
 			this.dispatchEvent(new CustomEvent(`expand`, {
 				detail: {
 					node,
@@ -2019,7 +2698,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (node.children) for (const child of node.children) this.#applyCheckedToggle(child, selected);
 	}
 	#getFlatIndexOf(node) {
-		return this.#getAllNodes().findIndex((n) => n.node === node);
+		return this.#getFlat().indexByKey.get(node.item.key) ?? -1;
 	}
 	#extendRangeSelection(nodes, fromIdx, toIdx) {
 		if (!this.#anchor) {
@@ -2030,7 +2709,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			};
 		}
 		if (!this.#anchor) return;
-		const anchorIdx = nodes.findIndex((n) => n.node === this.#anchor.node);
+		const anchorIdx = this.#getFlat().indexByKey.get(this.#anchor.node.item.key) ?? -1;
 		if (anchorIdx < 0) return;
 		const from = Math.min(anchorIdx, toIdx);
 		const to = Math.max(anchorIdx, toIdx);
@@ -2066,8 +2745,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}, controller.signal), controller.signal)];
 			if (controller.signal.aborted) return;
 			node.children = children;
+			this.#structureVersion++;
 			this.#applyExclusivity(node.item.key);
-			this._expandedKeys.add(node.item.key);
+			this.#setExpanded(withKey(this._expandedKeys, node.item.key));
+			this.#flat = void 0;
 			this.#stickyDirty = true;
 			this.#pendingNode = void 0;
 			this.#pendingController = void 0;
@@ -2083,6 +2764,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		} catch {
 			if (controller.signal.aborted) return;
 			node.children = [];
+			this.#structureVersion++;
+			this.#flat = void 0;
 			this.#pendingNode = void 0;
 			this.#pendingController = void 0;
 			this.requestUpdate();
@@ -2094,33 +2777,44 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	_isFocused(node) {
 		return this.tickled.isTickled(node.item.key);
 	}
-	_isExpanded(node, depth = 0) {
+	_isExpanded(node, _depth = 0) {
 		if (this._expandedKeys.has(node.item.key)) return true;
-		if (this.filterPredicate && node.children) return node.children.some((child) => this.#matchesFilter(child, depth + 1));
-		return false;
-	}
-	#matchesFilter(node, depth) {
-		if (!this.filterPredicate) return true;
-		if (this.filterPredicate(node, depth)) return true;
-		return node.children?.some((child) => this.#matchesFilter(child, depth + 1)) ?? false;
+		return this.#getFilter()?.autoExpanded.has(node.item.key) ?? false;
 	}
 	get _pendingNode() {
 		return this.#pendingNode;
 	}
 	#scrollKeyIntoView(key) {
+		if (this.#virtualActive()) {
+			this.updateComplete.then(() => {
+				const idx = this.#getFlat().indexByKey.get(key);
+				if (idx !== void 0) this.#revealIndex(idx);
+			});
+			return;
+		}
+		const token = ++this.#revealToken;
 		requestAnimationFrame(() => {
-			const container = this.#container();
-			const el = this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(key)}"]`);
-			if (!el || !container) return;
-			const elRect = el.getBoundingClientRect();
-			const containerRect = container.getBoundingClientRect();
-			const relativeTop = elRect.top - containerRect.top;
-			const relativeBottom = relativeTop + elRect.height;
-			const overlayHeight = this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0;
-			if (relativeTop < overlayHeight) container.scrollTop += relativeTop - overlayHeight;
-			else if (relativeBottom > container.clientHeight) container.scrollTop += relativeBottom - container.clientHeight;
+			this.#revealRowElement(key);
+			const running = this.#container()?.getAnimations?.({ subtree: true }) ?? [];
+			if (running.length > 0) Promise.allSettled(running.map((a) => a.finished)).then(() => {
+				if (token === this.#revealToken) this.#revealRowElement(key);
+			});
 		});
 	}
+	#revealToken;
+	/** Scroll the rendered row for `key` into the container, below the sticky overlay. No-op if it isn't rendered or is already visible. */
+	#revealRowElement(key) {
+		const container = this.#container();
+		const el = this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(key)}"]`);
+		if (!el || !container) return;
+		const elRect = el.getBoundingClientRect();
+		const containerRect = container.getBoundingClientRect();
+		const relativeTop = elRect.top - containerRect.top;
+		const relativeBottom = relativeTop + elRect.height;
+		const overlayHeight = this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0;
+		if (relativeTop < overlayHeight) container.scrollTop += relativeTop - overlayHeight;
+		else if (relativeBottom > container.clientHeight) container.scrollTop += relativeBottom - container.clientHeight;
+	}
 	#abortPending() {
 		if (this.#pendingController) {
 			this.#pendingController.abort();
@@ -2134,14 +2828,15 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (this.exclusivity === `depth`) this.#collapseSiblingsAtDepth(expandKey);
 		else if (this.exclusivity === `global`) {
 			const ancestorKeys = this.#findAncestorKeys(expandKey);
-			for (const key of [...this._expandedKeys]) if (!ancestorKeys.has(key) && key !== expandKey) this._expandedKeys.delete(key);
+			this.#setExpanded(withoutKeys(this._expandedKeys, (key) => !ancestorKeys.has(key) && key !== expandKey));
 		}
 	}
 	#collapseSiblingsAtDepth(expandKey) {
 		if (!this.root) return;
 		const parent = this.#findParent(this.root, expandKey);
 		if (!parent?.children) return;
-		for (const child of parent.children) if (child.item.key !== expandKey && this._expandedKeys.has(child.item.key)) this._expandedKeys.delete(child.item.key);
+		const siblingKeys = new Set(parent.children.map((c) => c.item.key));
+		this.#setExpanded(withoutKeys(this._expandedKeys, (key) => key !== expandKey && siblingKeys.has(key)));
 	}
 	#findAncestorKeys(targetKey) {
 		const keys = /* @__PURE__ */ new Set();
@@ -2165,30 +2860,13 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			if (found) return found;
 		}
 	}
-	#getVisibleNodes(node, depth) {
-		const result = [];
-		const visit = (n, d) => {
-			result.push({
-				node: n,
-				depth: d
-			});
-			if (n.children && this._isExpanded(n, d)) for (const child of n.children) visit(child, d + 1);
-		};
-		if (node.children) for (const child of node.children) visit(child, depth + 1);
-		return result;
-	}
-	#getAllNodes() {
-		if (!this.root) return [];
-		return this.#getVisibleNodes(this.root, -1);
-	}
 	#getFocusedIndex() {
-		const nodes = this.#getAllNodes();
 		const tickledKey = this.tickled.tickledId;
 		if (!tickledKey) return 0;
-		return nodes.findIndex((n) => n.node.item.key === tickledKey);
+		return this.#getFlat().indexByKey.get(tickledKey) ?? 0;
 	}
 	#setFocusedIndex(index) {
-		const nodes = this.#getAllNodes();
+		const nodes = this.#getFlat().rows;
 		if (index < 0 || index >= nodes.length) return;
 		const { node, depth } = nodes[index];
 		this.tickled.setTickled(node.item.key);
@@ -2202,6 +2880,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			composed: true
 		}));
 		this.requestUpdate();
+		if (this.#virtualActive()) {
+			this.#revealIndex(index);
+			return;
+		}
 		this.updateComplete.then(() => this.#scrollTickledIntoView());
 	}
 	#scrollTickledIntoView() {
@@ -2212,12 +2894,25 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			behavior: `smooth`
 		});
 	}
+	/** Rows per PageUp / PageDown: one viewport, from the current CSS metrics. */
+	#pageSize() {
+		this.#measureMetrics();
+		return treePageSize(this.#layoutParams(this.#getFlat().rows.length));
+	}
+	/** Move the cursor to `nextIdx`, applying the interaction mode's selection side effects. */
+	#navigateToIndex(nodes, currentIdx, nextIdx, shiftKey) {
+		if (this.interactionMode === `implicit`) this.select(nodes[nextIdx].node);
+		this.#setFocusedIndex(nextIdx);
+		if (shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`)) this.#extendRangeSelection(nodes, currentIdx, nextIdx);
+		else if (this.interactionMode === `vscode`) this.#anchor = void 0;
+		this.requestUpdate();
+	}
 	#onKeyDown;
 	renderLoadingIndicator() {
 		return html`<span class="loading-spinner"></span>`;
 	}
 	render() {
-		const nodes = this.#getAllNodes();
+		const nodes = this.#getFlat().rows;
 		return html`
       <div
         id="container"
@@ -2240,12 +2935,51 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
           ${this.renderLoadingIndicator()}
         </div>
       `;
+		if (this.#virtualActive()) return this.#renderWindow(nodes);
+		const woven = weaveGhosts(nodes, this.#renderedRowKeys, this.#leaving);
+		this.#renderedRowKeys = woven.map((e) => e.node.item.key);
+		this.#renderedRowIndex = new Map(this.#renderedRowKeys.map((key, i) => [key, i]));
 		return html`
       <ul class="tree-list" role="tree">
-        ${repeat(this.#weaveLeaving(nodes), ({ node }) => node.item.key, ({ node, depth }) => this._renderNode(node, depth))}
+        ${repeat(woven, ({ node }) => node.item.key, ({ node, depth }) => this._renderNode(node, depth))}
+      </ul>
+    `;
+	}
+	/**
+	* Windowed render: the rows near the viewport between two spacers that hold
+	* the rest of the scroll height. Keyed, so a row that stays in the window
+	* keeps its element while others enter and leave at the edges.
+	*/
+	#renderWindow(nodes) {
+		const params = this.#layoutParams(nodes.length);
+		const { start, end } = this.#currentWindow(nodes.length);
+		this.#winStart = start;
+		this.#winEnd = end;
+		this.#renderedRowKeys = [];
+		this.#renderedRowIndex = /* @__PURE__ */ new Map();
+		const stride = treeStride(params);
+		return html`
+      <ul class="tree-list virtual" role="tree" aria-rowcount=${nodes.length}>
+        <li class="virtual-spacer" role="presentation" aria-hidden="true" style=${`height: ${start * stride}px`}></li>
+        ${repeat(nodes.slice(start, end), ({ node }) => node.item.key, ({ node, depth }) => this._renderNode(node, depth))}
+        <li class="virtual-spacer" role="presentation" aria-hidden="true" style=${`height: ${(nodes.length - end) * stride}px`}></li>
       </ul>
     `;
 	}
+	/**
+	* `{ posinset, setsize }` for `aria-posinset` / `aria-setsize`. A windowed
+	* list has most siblings out of the DOM, so assistive tech cannot count them.
+	*/
+	_ariaSetInfo(node) {
+		const flat = this.#getFlat();
+		const idx = flat.indexByKey.get(node.item.key);
+		if (idx === void 0) return void 0;
+		const { posInSet, setSize } = flat.rows[idx];
+		return {
+			posInSet,
+			setSize
+		};
+	}
 	/** Shared drag-and-drop render state for a row, used by every `_renderNode` variant. */
 	_dndRowState(node) {
 		const draggable = this.itemDnd !== `none` && (this.root?.children?.length ?? 0) > 0 && (this.itemDnd === `internal` || this.itemDnd === `both` || this.itemDnd === `external`) && (this.canDrag?.({
@@ -2269,17 +3003,18 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const isBranch = node.item.isLeaf !== true;
 		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this.#pendingNode === node;
-		const isFiltered = this._isFilteredOut(node, depth);
 		const isLeaving = this._isLeaving(node);
 		const dnd = this._dndRowState(node);
 		return html`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``} ${isLeaving ? `leaving` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isLeaving ? `leaving` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : nothing}
         aria-hidden=${isLeaving ? `true` : nothing}
         aria-level=${depth + 1}
+        aria-setsize=${this._ariaSetInfo(node)?.setSize ?? nothing}
+        aria-posinset=${this._ariaSetInfo(node)?.posInSet ?? nothing}
         data-key=${node.item.key}
         style=${`--depth: ${depth}`}
         draggable=${dnd.draggable ? `true` : nothing}
@@ -2320,6 +3055,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       --tree-muted-text: var(--surface-muted-text);
       --tree-indent: 1ch;
       --tree-item-height: 30px;
+      /* Margin above each row. A windowed list is positioned by (height + gap), so keep it in px. */
+      --tree-item-gap: 1px;
       --tree-caret-size: 30px;
       --tree-radius: var(--radius-s);
       --tree-drop-line: var(--accent);
@@ -2343,6 +3080,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
        The scroll lives here, not on :host, so the search popover (a sibling of
        #container, positioned against :host) stays put while the list scrolls. */
     #container {
+      /* offsetParent for rows: row offsets are scroll-independent (sticky / DnD geometry). */
+      position: relative;
       outline: none;
       min-height: 100%;
       max-height: 100%;
@@ -2389,7 +3128,40 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       font-size: var(--text-m);
       border-radius: var(--tree-radius);
       transition: background var(--transition, 0.15s ease-out);
-      margin: 1px 0;
+      margin: var(--tree-item-gap) 0;
+    }
+
+    /* Windowed list: rows are placed purely by stride arithmetic — a margin above
+       each row only (no collapsing), spacers hold the offscreen height. */
+    .tree-list.virtual .item {
+      margin: var(--tree-item-gap) 0 0;
+    }
+
+    .virtual-spacer {
+      display: block;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      pointer-events: none;
+    }
+
+    .sticky-anchor {
+      display: contents;
+    }
+
+    :host([data-virtual]) .sticky-anchor {
+      position: sticky;
+      top: 0;
+      z-index: 5;
+      display: block;
+      height: 0;
+    }
+
+    :host([data-virtual]) .sticky-headers {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
     }
 
     .tree-caret {
@@ -2444,10 +3216,6 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       to { transform: rotate(360deg); }
     }
 
-    .item.filtered {
-      display: none;
-    }
-
     /* Fading-out ghost row (see #runItemAnimations) — inert while it collapses. */
     .item.leaving {
       pointer-events: none;
@@ -2558,6 +3326,14 @@ __decorate([property({
 		toAttribute: (value) => value ? null : `false`
 	}
 })], TreeBaseElement.prototype, "stickyHeaders", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `virtualize`
+})], TreeBaseElement.prototype, "virtualize", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `virtualize-threshold`
+})], TreeBaseElement.prototype, "virtualizeThreshold", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewSource", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "canDrag", void 0);
@@ -2565,33 +3341,33 @@ __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([state()], TreeBaseElement.prototype, "_scrollTop", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_stickyKeys", void 0);
 TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
 //#endregion
 //#region src/tree/tree-list.ts
-function computeCheckboxState(node, selectedNodes) {
-	if (node.item.isLeaf || !node.children?.length) return selectedNodes.has(node) ? `checked` : `unchecked`;
-	const childStates = node.children.map((c) => computeCheckboxState(c, selectedNodes));
-	const allChecked = childStates.every((s) => s === `checked`);
-	const allUnchecked = childStates.every((s) => s === `unchecked`);
-	if (allChecked) return `checked`;
-	if (allUnchecked) return `unchecked`;
-	return `indeterminate`;
-}
 let TreeListElement = class TreeListElement extends TreeBaseElement {
-	#depthsWithIcons = /* @__PURE__ */ new Set();
-	render() {
-		this.#detectIcons();
-		return super.render();
+	/** Checkbox tri-states for the whole loaded tree, rebuilt only when the structure or selection changes. */
+	#checkboxCache;
+	willUpdate(changedProps) {
+		super.willUpdate(changedProps);
+		this.#syncCheckboxStates();
 	}
-	#detectIcons() {
-		this.#depthsWithIcons.clear();
-		const visit = (node, depth) => {
-			if (node.item.icon) this.#depthsWithIcons.add(depth);
-			if (node.children) for (const child of node.children) visit(child, depth + 1);
+	#syncCheckboxStates() {
+		const root = this.root;
+		if (this.interactionMode !== `checked` || !root) {
+			this.#checkboxCache = void 0;
+			return;
+		}
+		const c = this.#checkboxCache;
+		if (c && c.root === root && c.structureVersion === this._structureVersion && c.selectionVersion === this._selectionVersion) return;
+		this.#checkboxCache = {
+			root,
+			structureVersion: this._structureVersion,
+			selectionVersion: this._selectionVersion,
+			states: computeCheckboxStates(root, this._selectedNodes)
 		};
-		if (this.root) visit(this.root, -1);
 	}
 	renderNodeContent(node, depth) {
 		const isBranch = node.item.isLeaf !== true;
@@ -2609,7 +3385,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
       </span>
     `;
 		if (this.interactionMode === `checked`) {
-			const state = computeCheckboxState(node, this._selectedNodes);
+			const state = this.#checkboxCache?.states.get(node.item.key) ?? `unchecked`;
 			return html`${this.#renderCheckbox(node, depth, state)}${caretAndLabel}`;
 		}
 		return caretAndLabel;
@@ -2643,19 +3419,20 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		const isBranch = node.item.isLeaf !== true;
 		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this._pendingNode === node;
-		const hasIconAtDepth = this.#depthsWithIcons.has(depth);
+		const hasIconAtDepth = this._depthsWithIcons.has(depth);
 		const isLeaving = this._isLeaving(node);
-		const isFiltered = this._isFilteredOut(node, depth);
 		const dnd = this._dndRowState(node);
 		return html`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${isFiltered ? `filtered` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
         data-key=${node.item.key}
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : nothing}
         aria-hidden=${isLeaving ? `true` : nothing}
         aria-level=${depth + 1}
+        aria-setsize=${this._ariaSetInfo(node)?.setSize ?? nothing}
+        aria-posinset=${this._ariaSetInfo(node)?.posInSet ?? nothing}
         style=${`--depth: ${depth}`}
         draggable=${dnd.draggable ? `true` : nothing}
         part=${dnd.dropTarget ? `drop-target` : nothing}
@@ -2794,7 +3571,7 @@ var TreeController = class {
 			const treeNode = this.#nodeToTree.get(node);
 			if (!treeNode) return;
 			node.children = this.#childrenOf(treeNode);
-			this.#element.requestUpdate();
+			this.#element.invalidateStructure();
 		}, { signal });
 		this.#element.addEventListener(`collapse`, (_e) => {}, { signal });
 	}
@@ -2816,7 +3593,10 @@ var TreeController = class {
 				if (!node) return false;
 				if (node.children === void 0) {
 					const mapped = this.#nodeToTree.get(node);
-					if (mapped) node.children = this.#childrenOf(mapped);
+					if (mapped) {
+						node.children = this.#childrenOf(mapped);
+						this.#element.invalidateStructure();
+					}
 				}
 				currentColumn = node.children ?? [];
 			}
@@ -2851,4 +3631,4 @@ var TreeController = class {
 //#endregion
 export { TreeDataModel as a, pruneDraggedDescendants as c, TreeDropController as i, TreeListElement as n, applyTreeDrop as o, TreeBaseElement as r, dropTargetFor as s, TreeController as t };
 
-//# sourceMappingURL=tree-DGveys4K.js.map
+//# sourceMappingURL=tree-DD8OaqsK.js.map