@ixfx/components 0.13.1 → 0.13.3

package/bundle/index.js

@@ -10,6 +10,7 @@ import { Colour } from "@ixfx/visual";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { Easings } from "@ixfx/modulation";
 import "@clinth/vcanvas";
@@ -2073,7 +2074,11 @@ function createElementListSearchAdapter(host, options = {}) {
 	const getLabel = options.getLabel ?? defaultLabel;
 	const getKey = options.getKey ?? ((el) => keyForElement(el) ?? defaultLabel(el));
 	const hidden = /* @__PURE__ */ new Set();
-	const items = () => Array.from(host.querySelectorAll(itemSelector));
+	const observeContainer = options.observeContainer ?? true;
+	const items = () => {
+		if (options.getAllItems) return options.getAllItems();
+		return Array.from(host.querySelectorAll(itemSelector));
+	};
 	return {
 		getItems: items,
 		getLabel,
@@ -2082,7 +2087,9 @@ function createElementListSearchAdapter(host, options = {}) {
 			if (el) host.focusKey(getKey(el));
 		},
 		activateItem: (el) => {
-			el.dispatchEvent(new MouseEvent(`click`, {
+			const key = getKey(el);
+			if (host.activateKey) host.activateKey(key);
+			else el.dispatchEvent(new MouseEvent(`click`, {
 				bubbles: true,
 				composed: true
 			}));
@@ -2108,7 +2115,7 @@ function createElementListSearchAdapter(host, options = {}) {
 		highlightKeyOf: (el) => getKey(el),
 		highlightText: getLabel,
 		highlightKey: options.highlightKey,
-		container: () => host
+		container: observeContainer ? () => host : void 0
 	};
 }
 //#endregion
@@ -2426,6 +2433,10 @@ var ListSearchController = class {
 		}
 		this.#search.setItems(items);
 	}
+	/** Re-paint highlights without rebuilding the item set. Use when the rendered window changes. */
+	repaintHighlights() {
+		this.#applyHighlights();
+	}
 	/** Popover markup. Pair with `listSearchStyles` in the host's `static styles`. */
 	renderField() {
 		if (!this.enabled) return nothing;
@@ -2547,9 +2558,10 @@ var ListSearchController = class {
 			return;
 		}
 		const state = this.#search.state;
+		const itemByKey = new Map(state.results.map((r) => [r.item.key, r.item]));
 		const targets = buildHighlightTargets(root, selector, state.positionsByItem, (el) => {
 			const key = keyOf(el);
-			return key === void 0 ? void 0 : state.results.find((r) => r.item.key === key)?.item;
+			return key === void 0 ? void 0 : itemByKey.get(key);
 		}, this.#adapter.highlightText ?? ((el) => el.textContent ?? ``));
 		try {
 			applyHighlights(targets, { key: this.#highlightKey });
@@ -2673,6 +2685,16 @@ const listSearchStyles = css`
 //#endregion
 //#region src/incr-search/tree-list-search-adapter.ts
 /**
+* The label's own text. Highlights are painted on one text node matched by its
+* exact content, but a Lit-rendered label also holds template whitespace and
+* sibling bindings (tooltips), so `textContent` is padded and never equals the
+* node's content. Take the first non-blank text node instead.
+*/
+function labelText(el) {
+	for (const node of el.childNodes) if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? ``).trim().length > 0) return node.textContent ?? ``;
+	return el.textContent ?? ``;
+}
+/**
 * A {@link ListSearchAdapter} over any `TreeSearchHost` (`ixfx-tree-list`,
 * `ixfx-miller-list`, `ixfx-crumb-navigation`). Navigate reveals the match
 * (expands its ancestors, moves the cursor); select drives `selectMany`; filter
@@ -2700,6 +2722,7 @@ function createTreeListSearchAdapter(host, options = {}) {
 		},
 		highlightRoot: () => host.shadowRoot,
 		highlightSelector: options.labelSelector ?? `.tree-label`,
+		highlightText: labelText,
 		highlightKeyOf: (el) => el.closest(`[data-key]`)?.dataset.key,
 		highlightKey: options.highlightKey
 	};
@@ -15220,6 +15243,10 @@ function sameKeys$4(a, b) {
 	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
 	return true;
 }
+/** Element-wise reference equality, treating `undefined` (never computed) as different. */
+function sameRefs(a, b) {
+	return a !== void 0 && a.length === b.length && a.every((v, i) => v === b[i]);
+}
 let DataGridElement = class DataGridElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -15237,7 +15264,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
-		this.columnMenu = `auto`;
+		this.columnMenu = `none`;
 		this.textColorColumn = ``;
 		this.iconColumn = ``;
 		this.badgeColumn = ``;
@@ -15258,9 +15285,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._lastClickedCell = null;
 		this._editValue = ``;
 		this._tickled = new TickledController(this, {
-			getItems: () => this._flatKeys.map((k) => ({
-				id: k,
-				enabled: true
+			getItems: () => this.#tickledItems ??= this._flat.map((f) => ({
+				id: f.key,
+				enabled: f.type === `row`
 			})),
 			onStateChange: () => this.requestUpdate(),
 			hoverDisabled: () => this.#nativeDrag.isDragging
@@ -15307,6 +15334,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._sortedRows = [];
 		this._flat = [];
 		this._flatKeys = [];
+		this.#flatIndexByKey = /* @__PURE__ */ new Map();
+		this.#flatVersion = 0;
+		this.#notedFlatVersion = -1;
 		this.#searchKeyByRow = /* @__PURE__ */ new Map();
 		this.search = new ListSearchController(this, { adapter: this.#createSearchAdapter() });
 		this.#prevFlatKeys = [];
@@ -15318,7 +15348,6 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._colWidthSum = 0;
 		this._raf = 0;
 		this.#viewportChangeRaf = 0;
-		this.#appendInProgress = false;
 		this.#resortRaf = 0;
 		this._drag = null;
 		this._onFocusOut = (e) => {
@@ -15335,10 +15364,12 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const el = e.target;
 			cancelAnimationFrame(this._raf);
 			this._raf = requestAnimationFrame(() => {
+				const before = this.#windowRows(2);
 				this._scrollTop = el.scrollTop;
 				this._scrollLeft = el.scrollLeft;
 				if (this._headerScrollEl) this._headerScrollEl.scrollLeft = el.scrollLeft;
-				this.requestUpdate();
+				const after = this.#windowRows(2);
+				if (before.start !== after.start || before.end !== after.end) this.requestUpdate();
 				cancelAnimationFrame(this.#viewportChangeRaf);
 				this.#viewportChangeRaf = 0;
 				this.#emitViewportChangeIfChanged();
@@ -15377,7 +15408,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 				let nextIdx = idx + dir;
 				while (nextIdx >= 0 && nextIdx < rowKeys.length) {
 					const nk = rowKeys[nextIdx];
-					const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === nk);
+					const row = this.#rowEntry(nk)?.row;
 					const col = this._visibleColumns.find((c) => c.key === colKey);
 					if (row && col && this._isEditable(row, col)) {
 						this._startEdit(nk, colKey);
@@ -15426,9 +15457,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 					if (!key) break;
 					e.preventDefault();
 					if (!this._editing && this.editability === `user`) {
-						const idx = this._sortedRows.findIndex((r, i) => this.getRowKey(r, i) === key);
-						if (idx >= 0) {
-							const row = this._sortedRows[idx];
+						const entry = this.#rowEntry(key);
+						if (entry) {
+							const row = entry.row;
 							if (this._lastClickedCell?.rowKey === key) {
 								const col = this._visibleColumns.find((c) => c.key === this._lastClickedCell.colKey);
 								if (col && this._isEditable(row, col)) {
@@ -15444,9 +15475,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 						}
 					}
 					if (!this._editing) {
-						const idx = this._sortedRows.findIndex((r, i) => this.getRowKey(r, i) === key);
+						const entry = this.#rowEntry(key);
+						const idx = entry?.idx ?? -1;
 						if (this._selectedKeys.has(key)) {
-							this._activateRow(key, idx >= 0 ? this._sortedRows[idx] : void 0, idx);
+							this._activateRow(key, entry?.row, idx);
 							break;
 						}
 						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this._replaceSelection(key);
@@ -15476,7 +15508,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 								next = !active.checked;
 								active.checked = next;
 							} else {
-								const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+								const row = this.#rowEntry(rowKey)?.row;
 								next = !(this._editValue !== `` ? Boolean(this._editValue) : Boolean(row?.[colKey]));
 							}
 							if (isImmediate) this._commitImmediate(rowKey, colKey, next);
@@ -15745,6 +15777,15 @@ let DataGridElement = class DataGridElement extends LitElement {
 			this.#postDragSuppressTimer = 0;
 		}, 0);
 	}
+	#flatIndexByKey;
+	/** Bumped whenever `_flat` changes; drives `#noteFlatMutation`. */
+	#flatVersion;
+	#notedFlatVersion;
+	/** Inputs `_sortedRows` / `_flat` were last derived from — see `#syncDerivedRows`. */
+	#sortInputs;
+	#flatInputs;
+	/** `_flat` projected for the tickled controller, cached until `_flat` changes. */
+	#tickledItems;
 	#searchRegistry;
 	#unregisterSearchCommands;
 	#searchKeyByRow;
@@ -15803,7 +15844,6 @@ let DataGridElement = class DataGridElement extends LitElement {
 	/** Key sets as of the last `datagrid-viewport-change` dispatch, for dedupe. */
 	#lastViewportRenderedKeys;
 	#lastViewportVisibleKeys;
-	#appendInProgress;
 	#resortRaf;
 	connectedCallback() {
 		super.connectedCallback();
@@ -15876,7 +15916,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	updated(changed) {
 		super.updated(changed);
 		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`filterPredicate`) || changed.has(`rowHeight`)) this.#scheduleViewportChangeEmit();
-		if (changed.has(`_editing`) || changed.has(`_editingRow`)) requestAnimationFrame(() => {
+		if (changed.has(`_editing`) || changed.has(`_editingRow`)) this.updateComplete.then(() => {
 			let sel = null;
 			if (this._editing) sel = `.row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] input, .row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] select`;
 			else if (this._editingRow) sel = `.row[data-key="${this._editingRow}"] .cell input, .row[data-key="${this._editingRow}"] .cell select`;
@@ -15890,10 +15930,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
 		if (changed.has(`searchModes`)) this.#syncSearchCommands();
-		if (!this.#appendInProgress) {
-			if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
-			this._rebuildFlat();
-		}
+		this.#syncDerivedRows();
 		this._visibleColumns = this.columns.filter((c) => c.visible !== false);
 		let off = 0;
 		this._colOffsets = this._visibleColumns.map((c) => {
@@ -15903,7 +15940,53 @@ let DataGridElement = class DataGridElement extends LitElement {
 		});
 		this._colWidthSum = off;
 		if (this.interactionMode === `checked`) this._colWidthSum += 28;
-		this.#noteFlatMutation();
+		if (this.#flatVersion !== this.#notedFlatVersion) {
+			this.#notedFlatVersion = this.#flatVersion;
+			this.#noteFlatMutation();
+		}
+	}
+	/**
+	* Re-derive `_sortedRows` / `_flat` only when one of their inputs changed
+	* identity. Scroll, hover, selection and edit-state updates touch none of
+	* them, so those frames cost O(window) instead of O(rows).
+	*/
+	#syncDerivedRows() {
+		const sortInputs = [
+			this.rows,
+			this.sortState,
+			this.columns
+		];
+		const flatInputs = [
+			this.filterPredicate,
+			this.groupBy,
+			this.groupLabel,
+			this._collapsedGroups,
+			this.getRowKey
+		];
+		const resort = !sameRefs(this.#sortInputs, sortInputs);
+		if (resort) {
+			this.#sortInputs = sortInputs;
+			this._sortedRows = this._applySort([...this.rows]);
+		}
+		if (resort || !sameRefs(this.#flatInputs, flatInputs)) {
+			this.#flatInputs = flatInputs;
+			this._rebuildFlat();
+		}
+	}
+	/** Mark the derived rows as matching the current inputs (after an incremental update). */
+	#markDerivedRowsSynced() {
+		this.#sortInputs = [
+			this.rows,
+			this.sortState,
+			this.columns
+		];
+		this.#flatInputs = [
+			this.filterPredicate,
+			this.groupBy,
+			this.groupLabel,
+			this._collapsedGroups,
+			this.getRowKey
+		];
 	}
 	/**
 	* Diff the row-key list against the previous update. Rows that appeared get an
@@ -15924,10 +16007,9 @@ let DataGridElement = class DataGridElement extends LitElement {
 			return;
 		}
 		const before = new Set(prev);
-		const after = new Set(now);
 		const added = now.filter((k) => !before.has(k));
-		const removed = prev.filter((k) => !after.has(k));
-		if (added.length === now.length || added.length === 0 && removed.length === 0) return;
+		const removedCount = prev.length - (now.length - added.length);
+		if (added.length === now.length || added.length === 0 && removedCount === 0) return;
 		this.#enteringRowKeys = new Set(added);
 		this.toggleAttribute(`reflowing`, true);
 		if (this.#rowReflowTimer) clearTimeout(this.#rowReflowTimer);
@@ -15944,55 +16026,64 @@ let DataGridElement = class DataGridElement extends LitElement {
 		return String(this.groupBy(row));
 	}
 	_rebuildFlat() {
-		const filtered = this.filterPredicate !== void 0;
-		const source = filtered ? this._sortedRows.filter((r) => this.filterPredicate(r)) : this._sortedRows;
-		if (!this.groupBy) {
-			this._flat = source.map((r, i) => {
-				const idx = filtered ? this._sortedRows.indexOf(r) : i;
-				return {
-					type: `row`,
-					key: this.getRowKey(r, idx),
-					row: r,
-					idx
-				};
-			});
-			this._flatKeys = this._flat.map((f) => f.key);
-			return;
-		}
-		const groups = /* @__PURE__ */ new Map();
-		for (const r of source) {
-			const k = this._getGroupKey(r) ?? ``;
-			const arr = groups.get(k);
-			if (arr) arr.push(r);
-			else groups.set(k, [r]);
-		}
+		const pred = this.filterPredicate;
+		const sourceIdx = [];
+		for (let i = 0; i < this._sortedRows.length; i++) if (!pred || pred(this._sortedRows[i])) sourceIdx.push(i);
 		const flat = [];
 		const keys = [];
-		for (const [gKey, rows] of groups) {
-			const label = this.groupLabel ? this.groupLabel(gKey, rows) : gKey;
-			const gId = `__group__${gKey}`;
+		const pushRow = (idx) => {
+			const row = this._sortedRows[idx];
+			const key = this.getRowKey(row, idx);
 			flat.push({
-				type: `group`,
-				key: gId,
-				label,
-				count: rows.length
+				type: `row`,
+				key,
+				row,
+				idx
 			});
-			keys.push(gId);
-			if (this._collapsedGroups.has(gKey)) continue;
-			for (const r of rows) {
-				const idx = this._sortedRows.indexOf(r);
-				const rk = this.getRowKey(r, idx);
+			keys.push(key);
+		};
+		if (!this.groupBy) sourceIdx.forEach(pushRow);
+		else {
+			const groups = /* @__PURE__ */ new Map();
+			for (const idx of sourceIdx) {
+				const k = this._getGroupKey(this._sortedRows[idx]) ?? ``;
+				const arr = groups.get(k);
+				if (arr) arr.push(idx);
+				else groups.set(k, [idx]);
+			}
+			for (const [gKey, idxs] of groups) {
+				const label = this.groupLabel ? this.groupLabel(gKey, idxs.map((i) => this._sortedRows[i])) : gKey;
+				const gId = `__group__${gKey}`;
 				flat.push({
-					type: `row`,
-					key: rk,
-					row: r,
-					idx
+					type: `group`,
+					key: gId,
+					label,
+					count: idxs.length
 				});
-				keys.push(rk);
+				keys.push(gId);
+				if (!this._collapsedGroups.has(gKey)) idxs.forEach(pushRow);
 			}
 		}
 		this._flat = flat;
 		this._flatKeys = keys;
+		this.#rebuildFlatIndex();
+	}
+	#rebuildFlatIndex() {
+		this.#flatIndexByKey.clear();
+		this._flat.forEach((f, i) => this.#flatIndexByKey.set(f.key, i));
+		this.#flatVersion++;
+		this.#tickledItems = void 0;
+	}
+	/** Flat entry for a row key, or `undefined` for unknown keys and group headers. */
+	#rowEntry(key) {
+		const i = this.#flatIndexByKey.get(key);
+		const entry = i === void 0 ? void 0 : this._flat[i];
+		if (entry?.type === `row`) return entry;
+		const idx = this._sortedRows.findIndex((r, j) => this.getRowKey(r, j) === key);
+		return idx < 0 ? void 0 : {
+			row: this._sortedRows[idx],
+			idx
+		};
 	}
 	_toggleGroup(gKey) {
 		const next = new Set(this._collapsedGroups);
@@ -16222,17 +16313,26 @@ let DataGridElement = class DataGridElement extends LitElement {
 		}));
 	}
 	_scrollRowIntoView(key) {
-		const idx = this._flat.findIndex((f) => f.key === key);
-		if (idx < 0 || !this._viewportEl) return;
-		const top = idx * this.rowHeight;
-		const bottom = top + this.rowHeight;
+		const idx = this.#flatIndexByKey.get(key);
+		if (idx === void 0 || !this._viewportEl) return;
+		const rh = this.rowHeight;
+		const top = (idx > 0 && this._flat[idx - 1].type === `group` ? idx - 1 : idx) * rh;
+		const bottom = (idx + 1) * rh;
 		const vt = this._viewportEl.scrollTop;
-		const vb = vt + this._viewportEl.clientHeight;
-		if (top < vt) this._viewportEl.scrollTop = top;
-		else if (bottom > vb) this._viewportEl.scrollTop = bottom - this._viewportEl.clientHeight;
+		const vh = this._viewportEl.clientHeight;
+		let next = vt;
+		if (top < vt) next = top;
+		else if (bottom > vt + vh) next = bottom - vh;
+		if (next !== vt) {
+			this._viewportEl.scrollTop = next;
+			this._scrollTop = next;
+			this.requestUpdate();
+		}
 	}
 	_getRowForKey(key) {
-		return this._flat.find((f) => f.key === key)?.row;
+		const i = this.#flatIndexByKey.get(key);
+		const entry = i === void 0 ? void 0 : this._flat[i];
+		return entry?.type === `row` ? entry.row : void 0;
 	}
 	/** The selected row keys (read-only). */
 	get selectedKeys() {
@@ -16249,8 +16349,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	* set when the selection actually changes.
 	*/
 	selectKeys(keys) {
-		const known = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
-		let next = new Set([...keys].filter((k) => known.has(k)));
+		let next = new Set([...keys].filter((k) => this._getRowForKey(k) !== void 0));
 		const multi = this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode`;
 		if (this.selectionMode === `none`) next = /* @__PURE__ */ new Set();
 		else if (!multi && next.size > 1) {
@@ -16276,7 +16375,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	/** Move the cursor to this row key and scroll it into view. */
 	tickleRow(key) {
-		if (!this._flatKeys.includes(key)) return;
+		if (!this.#flatIndexByKey.has(key) || key.startsWith(`__group__`)) return;
 		this._tickled.focus(key);
 		this._scrollRowIntoView(key);
 	}
@@ -16290,25 +16389,21 @@ let DataGridElement = class DataGridElement extends LitElement {
 	appendRows(rows) {
 		if (rows.length === 0) return;
 		const startIdx = this.rows.length;
-		this.#appendInProgress = true;
+		const inSync = this._sortedRows.length === startIdx && sameRefs(this.#sortInputs, [
+			this.rows,
+			this.sortState,
+			this.columns
+		]);
 		this.rows = [...this.rows, ...rows];
+		if (!inSync) return;
 		const appended = this.rows.slice(startIdx);
-		if (this._sortedRows.length === startIdx) this._sortedRows = [...this._sortedRows, ...appended];
-		else {
-			this._sortedRows = this._applySort([...this.rows]);
-			this._rebuildFlat();
-			this.#appendInProgress = false;
-			this.requestUpdate();
-			return;
-		}
+		this._sortedRows = [...this._sortedRows, ...appended];
 		this.#appendToFlat(appended, startIdx);
-		this.#appendInProgress = false;
-		this.requestUpdate();
+		this.#markDerivedRowsSynced();
 		if (this.sortState != null) {
 			cancelAnimationFrame(this.#resortRaf);
 			this.#resortRaf = requestAnimationFrame(() => {
-				this._sortedRows = this._applySort([...this.rows]);
-				this._rebuildFlat();
+				this.#sortInputs = void 0;
 				this.requestUpdate();
 			});
 		}
@@ -16320,6 +16415,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		}
 		for (let j = 0; j < appended.length; j++) {
 			const idx = startIdx + j;
+			if (this.filterPredicate && !this.filterPredicate(appended[j])) continue;
 			const key = this.getRowKey(appended[j], idx);
 			this._flat.push({
 				type: `row`,
@@ -16328,7 +16424,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 				idx
 			});
 			this._flatKeys.push(key);
+			this.#flatIndexByKey.set(key, this._flat.length - 1);
 		}
+		this.#flatVersion++;
+		this.#tickledItems = void 0;
 	}
 	_replaceSelection(key) {
 		if (this.selectionMode === `none`) return;
@@ -16434,8 +16533,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 		return !e || e === `auto`;
 	}
 	_isCellEditing(rowKey, colKey) {
-		if (this.editability === `immediate` && this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey))) return true;
-		if (this._editingRow === rowKey) return this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey));
+		if (this.editability === `immediate` && this._isEditable(this.#rowEntry(rowKey)?.row ?? {}, this.columns.find((c) => c.key === colKey))) return true;
+		if (this._editingRow === rowKey) return this._isEditable(this.#rowEntry(rowKey)?.row ?? {}, this.columns.find((c) => c.key === colKey));
 		return this._editing?.rowKey === rowKey && this._editing?.colKey === colKey;
 	}
 	_activateRow(rowKey, row, rowIndex) {
@@ -16451,7 +16550,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	_startEdit(rowKey, colKey) {
 		if (this.editability === `disabled`) return;
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) return;
 		const col = this.columns.find((c) => c.key === colKey);
 		if (!col || !this._isEditable(row, col)) return;
@@ -16469,7 +16568,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	/** Programmatic: put all editable cells of a row in edit mode. */
 	startRowEdit(rowKey) {
 		if (this.editability === `disabled`) return;
-		if (!this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey)) return;
+		if (!this.#rowEntry(rowKey)?.row) return;
 		this._editing = null;
 		this._editingRow = rowKey;
 		this.requestUpdate();
@@ -16537,7 +16636,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		const target = this._editing;
 		if (!target) return;
 		const { rowKey, colKey } = target;
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) {
 			this._editing = null;
 			return;
@@ -16562,7 +16661,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		}));
 	}
 	_tabToNext(rowKey, curColKey, dir) {
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) return;
 		const cols = this._visibleColumns;
 		let next = cols.findIndex((c) => c.key === curColKey) + dir;
@@ -16583,7 +16682,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.requestUpdate();
 	}
 	_commitImmediate(rowKey, colKey, value) {
-		const row = this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey);
+		const row = this.#rowEntry(rowKey)?.row;
 		if (!row) return;
 		const oldValue = row[colKey];
 		if (oldValue === value) return;
@@ -16706,11 +16805,19 @@ let DataGridElement = class DataGridElement extends LitElement {
 		window.addEventListener(`pointermove`, onMove);
 		window.addEventListener(`pointerup`, onUp);
 	}
-	getVisibleRange() {
+	/** Flat-index window `[start, end)` intersecting the viewport, widened by `overscan` rows each side. */
+	#windowRows(overscan) {
 		const rh = this.rowHeight;
 		return {
-			startRow: Math.max(0, Math.floor(this._scrollTop / rh) - 2),
-			endRow: Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + 2),
+			start: Math.max(0, Math.floor(this._scrollTop / rh) - overscan),
+			end: Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + overscan)
+		};
+	}
+	getVisibleRange() {
+		const { start: startRow, end: endRow } = this.#windowRows(2);
+		return {
+			startRow,
+			endRow,
 			startCol: this._findFirstVisibleCol(this._scrollLeft),
 			endCol: this._findLastVisibleCol(this._scrollLeft + this._viewportW)
 		};
@@ -16725,10 +16832,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 	* `ixfx-grid-list.visibleKeys()` for the `datagrid-viewport-change` detail.
 	*/
 	#visibleKeys() {
-		const rh = this.rowHeight;
-		const startRow = Math.max(0, Math.floor(this._scrollTop / rh));
-		const endRow = Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh));
-		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
+		const { start, end } = this.#windowRows(0);
+		return this._flat.slice(start, end).filter((f) => f.type === `row`).map((f) => f.key);
 	}
 	/** Coalesce viewport-change dispatches to at most one per animation frame. */
 	#scheduleViewportChangeEmit() {
@@ -16777,17 +16882,28 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	render() {
 		const rh = this.rowHeight;
-		const startRow = Math.max(0, Math.floor(this._scrollTop / rh) - 2);
-		const endRow = Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh) + 2);
-		const visibleFlat = this._flat.slice(startRow, endRow);
+		const { start: startRow, end: endRow } = this.#windowRows(2);
+		const visibleFlat = this._flat.slice(startRow, endRow).map((entry, i) => ({
+			entry,
+			absIdx: startRow + i
+		}));
+		const pinnedKey = this._editing?.rowKey ?? this._editingRow;
+		const pinnedIdx = pinnedKey ? this.#flatIndexByKey.get(pinnedKey) : void 0;
+		if (pinnedIdx !== void 0) {
+			if (pinnedIdx >= startRow && pinnedIdx < endRow) visibleFlat.splice(pinnedIdx - startRow, 1);
+			visibleFlat.unshift({
+				entry: this._flat[pinnedIdx],
+				absIdx: pinnedIdx
+			});
+		}
 		const showCheckbox = this.interactionMode === `checked`;
 		return html`
-      <div class="grid">
+      <div class="grid" role="grid" aria-rowcount=${this._flat.length + 1} aria-colcount=${this._visibleColumns.length} aria-multiselectable=${this.selectionMode === `multiple` ? `true` : `false`}>
         <div class="header-bar">
-          <div class="header-scroll scroll-fade-x">
-            ${showCheckbox ? html`<div class="header-cell checkbox-col"></div>` : nothing}
+          <div class="header-scroll scroll-fade-x" role="row" aria-rowindex="1">
+            ${showCheckbox ? html`<div class="header-cell checkbox-col" role="columnheader"></div>` : nothing}
             ${repeat(this._visibleColumns, (c) => c.key, (col, idx) => html`
-              <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
+              <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" role="columnheader" aria-sort=${this.sortState?.key === col.key ? this.sortState.direction === `asc` ? `ascending` : `descending` : `none`} style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
                 @click=${(e) => this._onHeaderClick(col, e)}
                 @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
                 ${col.reorderable !== false ? html`<span class="reorder-handle" draggable="false"
@@ -16810,7 +16926,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
 		})()}px"></div>` : nothing}
           </div>
-          ${this.columnMenu === `none` ? nothing : html`
+          ${this.columnMenu !== `auto` ? nothing : html`
           <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
 			const cmd = e.detail.command;
 			const checked = e.detail.checked;
@@ -16854,12 +16970,11 @@ let DataGridElement = class DataGridElement extends LitElement {
         </div>
         <div class="viewport scroll-fade-y" @scroll=${this._onScroll}>
           <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
-            ${repeat(visibleFlat, (f) => f.key, (entry, i) => {
-			const absIdx = startRow + i;
+            ${repeat(visibleFlat, (f) => f.entry.key, ({ entry, absIdx }) => {
 			if (entry.type === `group`) {
 				const gKey = entry.key.replace(/^__group__/, ``);
 				const collapsed = this._collapsedGroups.has(gKey);
-				return html`<div class="group-row ${collapsed ? `collapsed` : ``}" style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret"><ixfx-icon name="chevron-down" size="12"></ixfx-icon></span><span>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
+				return html`<div class="group-row ${collapsed ? `collapsed` : ``}" role="row" aria-rowindex=${absIdx + 2} style="top:${absIdx * rh}px; height:${rh}px" @click=${() => this._toggleGroup(gKey)}><span class="caret"><ixfx-icon name="chevron-down" size="12"></ixfx-icon></span><span role="rowheader" aria-expanded=${collapsed ? `false` : `true`}>${entry.label}</span><span class="count">(${entry.count})</span><span class="divider"></span></div>`;
 			}
 			const row = entry.row;
 			const absIdx2 = entry.idx;
@@ -16867,7 +16982,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return html`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" role="row" aria-rowindex=${absIdx + 2} aria-selected=${selected ? `true` : `false`} style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
                   draggable=${this.#nativeDrag.draggableAttr}
                   @click=${(e) => {
@@ -16896,7 +17011,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 					const immediate = this.editability === `immediate` || this._editingRow === rowKey;
 					const curVal = immediate ? val : this._editValue ?? val;
 					const effectiveDataType = col.dataType ?? `text`;
-					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
+					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
 						const v = e.target.checked;
 						if (immediate) this._commitImmediate(rowKey, col.key, v);
 						else {
@@ -16906,7 +17021,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 					}} /></div>`;
 					if (col.editor === `select`) {
 						const opts = col.editorOptions ?? [];
-						return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><select @change=${(e) => {
+						return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px"><select @change=${(e) => {
 							const v = e.target.value;
 							if (immediate) this._commitImmediate(rowKey, col.key, v);
 							else {
@@ -16952,11 +17067,11 @@ let DataGridElement = class DataGridElement extends LitElement {
 								this._editingRow = null;
 							}
 						};
-						return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
+						return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
 					}
 					const inputType = effectiveDataType === `number` ? `number` : `text`;
 					const inputValue = effectiveDataType === `number` ? String(curVal ?? ``) : String(curVal ?? ``);
-					return html`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
+					return html`<div class="cell" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
 						if (e.key === `Enter`) this._commitEdit();
 						if (e.key === `Escape`) {
 							this._editing = null;
@@ -16980,7 +17095,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 				const canPan = this.cellOverflow === `pan-text` && !col.renderer && (selected || tickled);
 				const look = this._cellLook(row, col.key);
 				const cellStyle = look.textColor === void 0 ? `` : `color:${look.textColor};`;
-				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent} ${cellStyle}"
+				return html`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" role="gridcell" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent} ${cellStyle}"
                       @click=${(e) => {
 					this._lastClickedCell = {
 						rowKey,
@@ -17095,8 +17210,6 @@ __decorate([property({
 __decorate([state()], DataGridElement.prototype, "_resizingColKey", void 0);
 __decorate([state()], DataGridElement.prototype, "_animatingColKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
-__decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
-__decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);
 __decorate([state()], DataGridElement.prototype, "_viewportH", void 0);
 __decorate([state()], DataGridElement.prototype, "_viewportW", void 0);
 __decorate([state()], DataGridElement.prototype, "_collapsedGroups", void 0);
@@ -17374,6 +17487,123 @@ __decorate([state()], DataTableElement.prototype, "_detailIndex", void 0);
 __decorate([state()], DataTableElement.prototype, "_stacked", void 0);
 DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableElement);
 //#endregion
+//#region src/detail-list/detail-list-geometry.ts
+const EMPTY_GEOMETRY = {
+	columns: [],
+	positions: /* @__PURE__ */ new Map(),
+	tops: /* @__PURE__ */ new Map(),
+	lefts: /* @__PURE__ */ new Map()
+};
+function contentOrigin(scroller) {
+	const r = scroller.getBoundingClientRect();
+	return {
+		left: r.left - scroller.scrollLeft,
+		top: r.top - scroller.scrollTop
+	};
+}
+/** Items closer than this (px) horizontally share a column (sub-pixel layout). */
+const COLUMN_TOLERANCE_PX = 1;
+/**
+* Measure `items` (one rect read each — a single layout flush) and bucket them
+* into columns. Zero-sized items (e.g. `display:none`) are skipped.
+*/
+function measureGeometry(items, origin) {
+	const measured = [];
+	for (const el of items) {
+		const r = el.getBoundingClientRect();
+		if (r.width === 0 && r.height === 0) continue;
+		measured.push({
+			el,
+			left: r.left - origin.left,
+			top: r.top - origin.top,
+			width: r.width
+		});
+	}
+	measured.sort((a, b) => a.left - b.left || a.top - b.top);
+	const columns = [];
+	const positions = /* @__PURE__ */ new Map();
+	const tops = /* @__PURE__ */ new Map();
+	const lefts = /* @__PURE__ */ new Map();
+	for (const m of measured) {
+		let col = columns.at(-1);
+		if (!col || m.left - col.left > COLUMN_TOLERANCE_PX) {
+			col = {
+				left: m.left,
+				width: m.width,
+				items: []
+			};
+			columns.push(col);
+		}
+		positions.set(m.el, {
+			col: columns.length - 1,
+			row: col.items.length
+		});
+		col.items.push(m.el);
+		col.width = Math.max(col.width, m.width);
+		tops.set(m.el, m.top);
+		lefts.set(m.el, m.left);
+	}
+	return {
+		columns,
+		positions,
+		tops,
+		lefts
+	};
+}
+/**
+* Whether `geometry` still matches layout, judged by re-reading a few probe
+* elements. Layout shifts that matter (column width, row height, reflow after
+* an insert) move at least one of first / cursor / last.
+*/
+function geometryMatches(geometry, probes, origin) {
+	for (const el of probes) {
+		if (!el) continue;
+		const left = geometry.lefts.get(el);
+		const top = geometry.tops.get(el);
+		if (left === void 0 || top === void 0) return false;
+		const r = el.getBoundingClientRect();
+		if (Math.abs(r.left - origin.left - left) > .5 || Math.abs(r.top - origin.top - top) > .5) return false;
+	}
+	return true;
+}
+/** First index in `[lo, hi)` for which `pred` holds, given `pred` is monotonic (false… then true…). */
+function partitionPoint(lo, hi, pred) {
+	while (lo < hi) {
+		const mid = lo + hi >> 1;
+		if (pred(mid)) hi = mid;
+		else lo = mid + 1;
+	}
+	return lo;
+}
+/**
+* Items (in DOM order) whose box intersects the content-space span
+* `[start, end)`, found with O(log n) layout reads — no full measure.
+* Relies on column flow: DOM order is column order, so `left` only moves in
+* one direction along the list (increasing for LTR, decreasing for RTL).
+*/
+function itemsInSpanByOrder(items, origin, start, end) {
+	if (items.length === 0) return [];
+	const box = (i) => {
+		const r = items[i].getBoundingClientRect();
+		return {
+			left: r.left - origin.left,
+			right: r.right - origin.left
+		};
+	};
+	const first = box(0);
+	const last = box(items.length - 1);
+	if (first.left === last.left) return first.right > start && first.left < end ? items : [];
+	const n = items.length;
+	if (last.left > first.left) {
+		const from = partitionPoint(0, n, (i) => box(i).right > start);
+		const to = partitionPoint(from, n, (i) => box(i).left >= end);
+		return items.slice(from, to);
+	}
+	const from = partitionPoint(0, n, (i) => box(i).left < end);
+	const to = partitionPoint(from, n, (i) => box(i).right <= start);
+	return items.slice(from, to);
+}
+//#endregion
 //#region src/list-group-header/list-group-header.ts
 let ListGroupHeaderElement = class ListGroupHeaderElement extends LitElement {
 	constructor(..._args) {
@@ -17534,6 +17764,50 @@ function sameKeys$3(a, b) {
 	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
 	return true;
 }
+function sameMembers(a, b) {
+	if (a.size !== b.size) return false;
+	for (const el of a) if (!b.has(el)) return false;
+	return true;
+}
+/** Remove `attr` from elements leaving the set, add it to elements entering it. */
+function applySetDiff(prev, next, attr) {
+	for (const el of prev) if (!next.has(el)) el.removeAttribute(attr);
+	for (const el of next) if (!prev.has(el)) el.setAttribute(attr, ``);
+}
+/** Attributes on an item that change list membership, visibility, keys or selectability. */
+const ITEM_CACHE_ATTRS = [
+	`hidden`,
+	GROUP_COLLAPSED_ATTR,
+	`not-checked`,
+	`data-key`,
+	`data-value`
+];
+/** Whether a mutation record can change the item caches (direct children / their cache attributes). */
+function affectsItemCaches(host, record) {
+	if (record.type === `childList`) return record.target === host;
+	return record.target.parentElement === host;
+}
+/**
+* Make `parent`'s managed children equal `nodes`, in order, with the fewest
+* DOM moves — a single insert stays a single move instead of re-appending
+* every row. `nodes` must contain every managed child; unmanaged children
+* (text, foreign elements) are left where they are.
+*/
+function syncChildOrder(parent, nodes, managed) {
+	const nextManaged = (from) => {
+		let el = from;
+		while (el && !managed(el)) el = el.nextElementSibling;
+		return el;
+	};
+	let cursor = nextManaged(parent.firstElementChild);
+	for (const node of nodes) {
+		if (node === cursor) {
+			cursor = nextManaged(cursor.nextElementSibling);
+			continue;
+		}
+		parent.insertBefore(node, cursor);
+	}
+}
 let DetailListElement = class DetailListElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -17554,10 +17828,15 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.crossGroupSelection = false;
 		this._collapsedGroups = /* @__PURE__ */ new Set();
 		this.#itemData = /* @__PURE__ */ new WeakMap();
-		this.#grid = [];
-		this.#positions = /* @__PURE__ */ new Map();
-		this.#tops = /* @__PURE__ */ new Map();
+		this.#itemIndex = /* @__PURE__ */ new WeakMap();
+		this.#geometry = EMPTY_GEOMETRY;
+		this.#geometryDirty = true;
 		this.#geometryScheduled = false;
+		this.#appliedSelected = /* @__PURE__ */ new Set();
+		this.#appliedChecked = /* @__PURE__ */ new Set();
+		this.#itemStatesFullSync = true;
+		this.#hasCheckboxes = false;
+		this.#draggableApplied = false;
 		this.#sortRaf = 0;
 		this.#viewportScrollRaf = 0;
 		this.#animatedItems = /* @__PURE__ */ new WeakSet();
@@ -17596,10 +17875,14 @@ let DetailListElement = class DetailListElement extends LitElement {
 			}
 		});
 		this.tickled = new TickledController(this, {
-			getItems: () => this._getVisibleItems().map((el) => ({
-				id: el,
-				enabled: !el.hasAttribute(`not-checked`)
-			})),
+			getItems: () => {
+				const visible = this._getVisibleItems();
+				this.#tickledItemsCache ??= visible.map((el) => ({
+					id: el,
+					enabled: !el.hasAttribute(`not-checked`)
+				}));
+				return this.#tickledItemsCache;
+			},
 			onTickle: (id) => {
 				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
 			},
@@ -17703,7 +17986,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 				}
 				return;
 			}
-			if (NAV_KEYS.has(e.key)) this.setAttribute(`data-keyboard-nav`, ``);
+			if (NAV_KEYS.has(e.key) && !this.hasAttribute(`data-keyboard-nav`)) this.setAttribute(`data-keyboard-nav`, ``);
 			switch (e.key) {
 				case `ArrowDown`:
 					e.preventDefault();
@@ -17782,11 +18065,32 @@ let DetailListElement = class DetailListElement extends LitElement {
 		};
 	}
 	#itemData;
-	#grid;
-	#positions;
-	/** Viewport-relative `top` per item at the last geometry pass — lines rows up across columns. */
-	#tops;
+	/** The `index` each object item was formatted with — reuse is only safe at the same index. */
+	#itemIndex;
+	/** Measured column grid (content coordinates). See `#ensureGeometry`. */
+	#geometry;
+	/** Layout may have changed since `#geometry` was measured. */
+	#geometryDirty;
 	#geometryScheduled;
+	/**
+	* Watches child / visibility / key changes so the item caches below can be
+	* validated synchronously (via `takeRecords()`) on every read — they are
+	* never stale, even within the same task as the mutation.
+	*/
+	#cacheObserver;
+	#allItemsCache;
+	#visibleCache;
+	#visibleCachePredicate;
+	#tickledItemsCache;
+	#renderedKeysCache;
+	#keyIndexCache;
+	/** Item states as last written to the DOM, so `_syncItemStates` can apply just the diff. */
+	#appliedTickled;
+	#appliedSelected;
+	#appliedChecked;
+	#itemStatesFullSync;
+	#hasCheckboxes;
+	#draggableApplied;
 	#sortRaf;
 	#viewportScrollRaf;
 	/** Key sets as of the last viewport-change dispatch, for dedupe. */
@@ -17840,6 +18144,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 	}
 	_syncNativeDraggable() {
 		if (!this.isConnected) return;
+		if (!this.itemsDraggable && !this.#draggableApplied) return;
+		this.#draggableApplied = this.itemsDraggable;
 		for (const el of this.querySelectorAll(`li`)) if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
 	}
 	#startPostDragSuppressTimer() {
@@ -17921,7 +18227,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
 		this.#resizeObserver.observe(this);
 		this.#mutationObserver = new MutationObserver((records) => {
-			this.#processChildren();
+			this.#processAddedChildren(records);
 			this.#animateChildMutations(records);
 			this.#scheduleGeometry();
 			this.#scheduleGroups();
@@ -17932,6 +18238,16 @@ let DetailListElement = class DetailListElement extends LitElement {
 			attributeFilter: [`hidden`]
 		});
 		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) this.#animatedItems.add(el);
+		this.#cacheObserver = new MutationObserver((records) => {
+			if (records.some((r) => affectsItemCaches(this, r))) this.#dropItemCaches();
+		});
+		this.#cacheObserver.observe(this, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ITEM_CACHE_ATTRS
+		});
+		this.#dropItemCaches();
 		this.#searchRegistry ??= createCommandRegistry();
 		this.#syncSearchCommands();
 		this.#scheduleGroups();
@@ -17951,7 +18267,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			fresh.push(node);
 		}
 		if (fresh.length === 0) return;
-		const total = this.querySelectorAll(ITEM_SELECTOR$3).length;
+		const total = this.#allItems().length;
 		if (fresh.length >= total) return;
 		for (const el of fresh) animateListItemIn(el);
 		window.setTimeout(() => this.#scheduleGeometry(), 230);
@@ -17978,6 +18294,9 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#mutationObserver = void 0;
 		this.#groupObserver?.disconnect();
 		this.#groupObserver = void 0;
+		this.#cacheObserver?.disconnect();
+		this.#cacheObserver = void 0;
+		this.#dropItemCaches();
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
@@ -17990,6 +18309,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#processChildren();
 		if (this.filterPredicate) this.#applyFilterPredicate();
 		this.#recomputeGeometry();
+		this.#scheduleViewportChangeEmit();
 		this._syncNativeDraggable();
 	}
 	willUpdate(changed) {
@@ -18018,7 +18338,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 			});
 			return;
 		}
-		if ((changed.has(`items`) || changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`)) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items);
+		const shapeChanged = changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`);
+		if ((changed.has(`items`) || shapeChanged) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items, !shapeChanged);
 		this.#syncFromProvider();
 		if (changed.has(`sort`) || changed.has(`sortBy`) || changed.has(`sortComparator`)) this.#applySort();
 		if (changed.has(`filterPredicate`)) {
@@ -18028,6 +18349,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		}
 		if (changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
+			this.#itemStatesFullSync = true;
 			this._syncItemStates();
 			this._syncNativeDraggable();
 		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
@@ -18051,6 +18373,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 	*/
 	refreshLayout() {
 		this.#recomputeGeometry();
+		this.#scheduleViewportChangeEmit();
 	}
 	addItem(item, options) {
 		let el;
@@ -18076,7 +18399,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			item.remove();
 			this.#scheduleGroups();
 			if (this.interactionMode === `checked`) this._syncCheckboxes();
-			this.#recomputeGeometry();
+			this.#scheduleGeometry();
 		});
 	}
 	/** {@link removeItem} for several items at once. */
@@ -18125,13 +18448,12 @@ let DetailListElement = class DetailListElement extends LitElement {
 	visibleKeys() {
 		const container = this._listEl;
 		if (!container) return [];
-		const box = container.getBoundingClientRect();
+		const start = container.scrollLeft;
+		const end = start + container.getBoundingClientRect().width;
 		const out = [];
-		for (const el of this._getVisibleItems()) {
+		for (const el of itemsInSpanByOrder(this._getVisibleItems(), contentOrigin(container), start, end)) {
 			const key = keyForElement(el);
-			if (key === void 0) continue;
-			const r = el.getBoundingClientRect();
-			if (r.right > box.left && r.left < box.right) out.push(key);
+			if (key !== void 0) out.push(key);
 		}
 		return out;
 	}
@@ -18190,7 +18512,15 @@ let DetailListElement = class DetailListElement extends LitElement {
 		});
 	}
 	#itemForKey(key) {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) if (keyForElement(el) === key) return el;
+		if (!this.#keyIndexCache) {
+			const index = /* @__PURE__ */ new Map();
+			for (const el of this.#allItems()) {
+				const k = keyForElement(el);
+				if (k !== void 0 && !index.has(k)) index.set(k, el);
+			}
+			this.#keyIndexCache = index;
+		}
+		return this.#keyIndexCache.get(key);
 	}
 	*selectedFilter(kind) {
 		const wanted = (el) => {
@@ -18205,11 +18535,12 @@ let DetailListElement = class DetailListElement extends LitElement {
 			if (wanted(el)) yield el;
 		}
 	}
-	#rebuildFromObjects(items) {
+	#rebuildFromObjects(items, reuseRows = false) {
 		const keyOf = (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? null;
 		const previousKeys = new Set([...this.selection.selected].map(keyOf).filter((k) => k !== null));
 		const anchorKey = this.selection.anchor ? keyOf(this.selection.anchor) : null;
-		this.replaceChildren(...items.map((item, index) => this.#createItemEl(item, index)));
+		if (reuseRows) this.#reconcileObjectRows(items);
+		else this.replaceChildren(...items.map((item, index) => this.#createItemEl(item, index)));
 		if (previousKeys.size > 0 || anchorKey !== null) {
 			const next = [];
 			let anchor;
@@ -18226,9 +18557,38 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#scheduleGeometry();
 		this.#scheduleGroups();
 	}
+	/**
+	* Update the rows to match `items`, keeping the `<li>` of every object that
+	* is still present (by identity) instead of rebuilding all of them — so
+	* `items = [...items, next]` creates one row, not thousands. A row built by
+	* a `formatter` is only kept at the same index, since the formatter receives
+	* the index.
+	*/
+	#reconcileObjectRows(items) {
+		const reusable = /* @__PURE__ */ new Map();
+		for (const li of this.#allItems()) if (this.#itemData.has(li) && !reusable.has(this.#itemData.get(li))) reusable.set(this.#itemData.get(li), li);
+		const next = items.map((item, index) => {
+			const li = reusable.get(item);
+			if (li && (!this.formatter || this.#itemIndex.get(li) === index)) {
+				reusable.delete(item);
+				return li;
+			}
+			return this.#createItemEl(item, index);
+		});
+		const keep = new Set(next);
+		for (const li of this.#allItems()) if (!keep.has(li)) li.remove();
+		if (this.#groupingActive()) {
+			for (const li of next) this.#seq.set(li, this.#seqNext++);
+			this.append(...next.filter((li) => li.parentElement !== this));
+			this.#scheduleGroups();
+			return;
+		}
+		syncChildOrder(this, next, (el) => el.localName === `li`);
+	}
 	#createItemEl(item, index) {
 		const li = document.createElement(`li`);
 		this.#itemData.set(li, item);
+		this.#itemIndex.set(li, index);
 		const content = this.formatter ? this.formatter(item, index) : this.displayProperty ? this.#propertyValue(item, this.displayProperty) : item;
 		const textColor = this.#colorValue(item, this.textColorProperty);
 		const iconColor = this.#colorValue(item, this.iconColorProperty);
@@ -18299,42 +18659,40 @@ let DetailListElement = class DetailListElement extends LitElement {
 			this.#scheduleGroups();
 			return;
 		}
-		for (const el of this.#sortRows(rows)) this.appendChild(el);
+		syncChildOrder(this, this.#sortRows(rows), (el) => el.localName === `li`);
 		this.#scheduleGeometry();
 		this.#scheduleGroups();
 	}
 	/** Stable sort of `rows` by the current `sort` / `sortBy` / `sortComparator`. */
 	#sortRows(rows) {
 		const dir = this.sort === `descending` ? -1 : 1;
-		const meta = (el) => ({
+		const metas = rows.map((el) => ({
 			element: el,
 			data: this.getItemData(el),
 			label: el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``
-		});
+		}));
+		const collator = new Intl.Collator(void 0, { numeric: true });
 		let cmp;
 		if (this.sortComparator) {
 			const user = this.sortComparator;
-			cmp = (a, b) => user(meta(a), meta(b));
+			cmp = (a, b) => user(metas[a], metas[b]);
 		} else if (this.sortBy) {
 			const prop = this.sortBy;
-			const key = (el) => {
-				const v = this.#propertyValue(this.getItemData(el), prop);
+			const keys = metas.map((m) => {
+				const v = this.#propertyValue(m.data, prop);
 				if (typeof v === `number`) return v;
 				return v === void 0 || v === null ? `` : String(v);
-			};
+			});
 			cmp = (a, b) => {
-				const ka = key(a);
-				const kb = key(b);
+				const ka = keys[a];
+				const kb = keys[b];
 				if (typeof ka === `number` && typeof kb === `number`) return ka - kb;
-				return String(ka).localeCompare(String(kb), void 0, { numeric: true });
+				return collator.compare(String(ka), String(kb));
 			};
-		} else cmp = (a, b) => meta(a).label.localeCompare(meta(b).label, void 0, { numeric: true });
-		const indexed = rows.map((el, i) => ({
-			el,
-			i
-		}));
-		indexed.sort((a, b) => cmp(a.el, b.el) * dir || a.i - b.i);
-		return indexed.map(({ el }) => el);
+		} else cmp = (a, b) => collator.compare(metas[a].label, metas[b].label);
+		const order = rows.map((_, i) => i);
+		order.sort((a, b) => cmp(a, b) * dir || a - b);
+		return order.map((i) => rows[i]);
 	}
 	#groupingActive() {
 		return this.groupBy !== null && this.groupBy !== void 0 && this.groupBy !== ``;
@@ -18378,7 +18736,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 	#syncGroups() {
 		const active = this.#groupingActive();
 		if (!active && !this.#wasGrouped) return;
-		const items = [...this.querySelectorAll(ITEM_SELECTOR$3)];
+		const items = this.#allItems();
 		for (const el of items) if (!this.#seq.has(el)) this.#seq.set(el, this.#seqNext++);
 		let ordered = items.toSorted((a, b) => this.#seq.get(a) - this.#seq.get(b));
 		if (this.sort !== `none` && ordered.length > 1) ordered = this.#sortRows(ordered);
@@ -18423,8 +18781,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#groupIndex = index;
 		this.#groupList = info;
 		this.#wasGrouped = active;
-		const current = [...this.children].filter((c) => c.matches(`li`) || c.hasAttribute(GROUP_HEADER_ATTR));
-		if (current.length !== nodes.length || current.some((c, i) => c !== nodes[i])) this.append(...nodes);
+		syncChildOrder(this, nodes, (c) => c.localName === `li` || c.hasAttribute(GROUP_HEADER_ATTR));
 		if (this.tickled.tickledId?.hasAttribute(GROUP_COLLAPSED_ATTR)) this.tickled.focus(void 0);
 		this.#syncGroupObserver(active);
 		this.#scheduleGeometry();
@@ -18475,59 +18832,65 @@ let DetailListElement = class DetailListElement extends LitElement {
 			if (target instanceof HTMLElement && target.parentElement === this && target.hasAttribute(GROUP_HEADER_ATTR)) return target;
 		}
 	}
+	/**
+	* Mark the layout dirty and, next frame, check for a viewport change.
+	* Geometry moves (resize, filter, sort, DOM changes) can change the visible
+	* set without a scroll, so every layout-changing path comes through here.
+	* The grid itself is re-measured lazily, by whoever needs it next.
+	*/
 	#scheduleGeometry() {
+		this.#geometryDirty = true;
 		if (this.#geometryScheduled) return;
 		this.#geometryScheduled = true;
 		requestAnimationFrame(() => {
 			this.#geometryScheduled = false;
-			this.#recomputeGeometry();
+			this.#emitViewportChangeIfChanged();
 		});
 	}
+	/** Re-measure the column grid now (one layout read per visible item). */
 	#recomputeGeometry() {
-		this.#grid = [];
-		this.#positions.clear();
-		this.#tops.clear();
-		if (!this.isConnected) return;
-		const columns = [];
-		for (const el of this._getVisibleItems()) {
-			const rect = el.getBoundingClientRect();
-			if (rect.width === 0 && rect.height === 0) continue;
-			this.#tops.set(el, rect.top);
-			let ci = columns.findIndex((c) => Math.abs(c.left - rect.left) <= 1);
-			if (ci === -1) {
-				columns.push({
-					left: rect.left,
-					items: []
-				});
-				ci = columns.length - 1;
-			}
-			columns[ci].items.push(el);
+		this.#geometryDirty = false;
+		this.#geometry = this.isConnected && this._listEl ? measureGeometry(this._getVisibleItems(), contentOrigin(this._listEl)) : EMPTY_GEOMETRY;
+	}
+	/**
+	* The column grid, re-measured only if it's known dirty or a few probe items
+	* have moved (catches layout changes nothing told us about, e.g. a CSS
+	* variable change). Cheap enough to call per keypress / scroll frame.
+	*/
+	#ensureGeometry() {
+		const visible = this._getVisibleItems();
+		if (this.#geometryDirty || !this._listEl) {
+			this.#recomputeGeometry();
+			return this.#geometry;
 		}
-		columns.sort((a, b) => a.left - b.left);
-		for (const col of columns) col.items.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
-		this.#grid = columns.map((c) => c.items);
-		this.#grid.forEach((col, colIdx) => col.forEach((el, rowIdx) => this.#positions.set(el, {
-			col: colIdx,
-			row: rowIdx
-		})));
-		this.#scheduleViewportChangeEmit();
+		const cursor = this.tickled.tickledId;
+		const probes = [
+			visible[0],
+			cursor && this.#geometry.positions.has(cursor) ? cursor : void 0,
+			visible.at(-1)
+		];
+		if (!geometryMatches(this.#geometry, probes, contentOrigin(this._listEl))) this.#recomputeGeometry();
+		return this.#geometry;
 	}
 	#positionOf(el) {
-		let pos = this.#positions.get(el);
+		let pos = this.#geometry.positions.get(el);
 		if (pos === void 0) {
 			this.#recomputeGeometry();
-			pos = this.#positions.get(el);
+			pos = this.#geometry.positions.get(el);
 		}
 		return pos;
 	}
+	#column(col) {
+		return this.#geometry.columns[col]?.items;
+	}
 	#itemAt(col, row) {
-		return this.#grid[col]?.[row];
+		return this.#column(col)?.[row];
 	}
 	#gridSize() {
-		if (this.#grid.length === 0) this.#recomputeGeometry();
+		const { columns } = this.#ensureGeometry();
 		return {
-			cols: this.#grid.length,
-			rows: Math.max(0, ...this.#grid.map((c) => c.length))
+			cols: columns.length,
+			rows: Math.max(0, ...columns.map((c) => c.items.length))
 		};
 	}
 	#navigateTo(target) {
@@ -18545,7 +18908,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		let row = deltaRow !== 0 ? fromRow + deltaRow : fromRow;
 		let wrappedColumns = false;
 		for (let iterations = 0; iterations < maxIterations; iterations++) {
-			const colLength = this.#grid[col]?.length ?? 0;
+			const colLength = this.#column(col)?.length ?? 0;
 			if (row < 0 || row >= colLength) {
 				if (deltaCol !== 0 || wrappedColumns) {
 					if (this.itemWrap === `wrap`) {
@@ -18567,15 +18930,15 @@ let DetailListElement = class DetailListElement extends LitElement {
 				} else if (deltaRow < 0) {
 					if (col - 1 >= 0) {
 						col = col - 1;
-						row = (this.#grid[col]?.length ?? 1) - 1;
+						row = (this.#column(col)?.length ?? 1) - 1;
 						wrappedColumns = true;
 					} else if (this.itemWrap === `wrap`) {
 						col = cols - 1;
-						row = (this.#grid[col]?.length ?? 1) - 1;
+						row = (this.#column(col)?.length ?? 1) - 1;
 						wrappedColumns = true;
 					} else return;
 				} else if (deltaCol !== 0) {
-					const targetColLength = this.#grid[col]?.length ?? 0;
+					const targetColLength = this.#column(col)?.length ?? 0;
 					if (row >= targetColLength && targetColLength > 0) row = targetColLength - 1;
 				}
 				if (col === fromCol && row === fromRow + deltaRow) return;
@@ -18594,7 +18957,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		for (let i = visibleItems.length - 1; i >= 0; i--) if (this._isCheckable(visibleItems[i])) return visibleItems[i];
 	}
 	#navigateDown() {
-		this.#recomputeGeometry();
+		this.#ensureGeometry();
 		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
 		if (!cur) {
 			this.#navigateTo(this.#findFirstCheckable());
@@ -18604,7 +18967,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		if (next) this.#navigateTo(next);
 	}
 	#navigateUp() {
-		this.#recomputeGeometry();
+		this.#ensureGeometry();
 		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
 		if (!cur) {
 			this.#navigateTo(this.#findLastCheckable());
@@ -18621,15 +18984,15 @@ let DetailListElement = class DetailListElement extends LitElement {
 	*/
 	#horizontalTarget(from, dir) {
 		if (this.#groupList.length === 0) return this.#findNextCheckable(from.col, from.row, dir, 0);
-		const column = this.#grid[from.col + dir];
+		const column = this.#column(from.col + dir);
 		const current = this.tickled.tickledId;
-		const top = current ? this.#tops.get(current) : void 0;
+		const top = current ? this.#geometry.tops.get(current) : void 0;
 		if (!column || top === void 0) return void 0;
 		let best;
 		let bestDelta = Number.POSITIVE_INFINITY;
 		for (const el of column) {
 			if (!this._isCheckable(el)) continue;
-			const delta = Math.abs((this.#tops.get(el) ?? Number.POSITIVE_INFINITY) - top);
+			const delta = Math.abs((this.#geometry.tops.get(el) ?? Number.POSITIVE_INFINITY) - top);
 			if (delta < bestDelta) {
 				best = el;
 				bestDelta = delta;
@@ -18638,7 +19001,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		return best;
 	}
 	#navigateRight() {
-		this.#recomputeGeometry();
+		this.#ensureGeometry();
 		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
 		if (!cur) {
 			this.#navigateTo(this.#findFirstCheckable());
@@ -18649,7 +19012,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findFirstCheckable());
 	}
 	#navigateLeft() {
-		this.#recomputeGeometry();
+		this.#ensureGeometry();
 		const cur = this.tickled.tickledId ? this.#positionOf(this.tickled.tickledId) : void 0;
 		if (!cur) {
 			this.#navigateTo(this.#findFirstCheckable());
@@ -18659,13 +19022,49 @@ let DetailListElement = class DetailListElement extends LitElement {
 		if (next) this.#navigateTo(next);
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
 	}
+	/**
+	* Visible items in DOM order. Cached — every per-hover / per-frame path
+	* reads it — and validated on each call, so it is never stale.
+	*/
 	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR$3)).filter((el) => {
+		this.#validateItemCaches();
+		if (this.#visibleCachePredicate !== this.filterPredicate) {
+			this.#dropVisibleCaches();
+			this.#visibleCachePredicate = this.filterPredicate;
+		}
+		this.#visibleCache ??= this.#allItems().filter((el) => {
 			if (el.hidden) return false;
 			if (el.hasAttribute(GROUP_COLLAPSED_ATTR)) return false;
 			if (this.filterPredicate && !this.filterPredicate(el)) return false;
 			return true;
 		});
+		return this.#visibleCache;
+	}
+	/** Every item (`<li>` child), in DOM order. Cached like `_getVisibleItems`. */
+	#allItems() {
+		this.#validateItemCaches();
+		this.#allItemsCache ??= [...this.querySelectorAll(ITEM_SELECTOR$3)];
+		return this.#allItemsCache;
+	}
+	/** Drop the item caches if anything relevant changed since they were built. */
+	#validateItemCaches() {
+		if (!this.#cacheObserver) {
+			this.#dropItemCaches();
+			return;
+		}
+		if (this.#cacheObserver.takeRecords().some((r) => affectsItemCaches(this, r))) this.#dropItemCaches();
+	}
+	#dropItemCaches() {
+		this.#allItemsCache = void 0;
+		this.#keyIndexCache = void 0;
+		this.#itemStatesFullSync = true;
+		this.#dropVisibleCaches();
+	}
+	#dropVisibleCaches() {
+		this.#visibleCache = void 0;
+		this.#tickledItemsCache = void 0;
+		this.#renderedKeysCache = void 0;
+		this.#geometryDirty = true;
 	}
 	/**
 	* Set the column width to fit the widest visible item.
@@ -18738,21 +19137,48 @@ let DetailListElement = class DetailListElement extends LitElement {
 	}
 	/** Scan light-DOM children for unprocessed `data-icon` items. */
 	#processChildren() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) this.#ensureIcon(el);
+		for (const el of this.#allItems()) this.#ensureIcon(el);
 	}
+	/** `#processChildren` for just the items a batch of mutations added. */
+	#processAddedChildren(records) {
+		for (const record of records) for (const node of record.addedNodes) if (node instanceof HTMLLIElement && node.parentElement === this) this.#ensureIcon(node);
+	}
+	/**
+	* Reflect cursor / selection / checked state onto the items. After the item
+	* set changes (or the interaction mode does) every item is visited; otherwise
+	* only the items whose state changed are touched, so hovering is O(1).
+	*/
 	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) {
-			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
-			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
-			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !el.hasAttribute(`not-checked`) && this.selection.selected.has(el));
-			else el.removeAttribute(`data-checked`);
+		const selected = this.selection.selected;
+		const checked = this.interactionMode === `checked` ? new Set([...selected].filter((el) => !el.hasAttribute(`not-checked`))) : /* @__PURE__ */ new Set();
+		const tickled = this.tickled.tickledId;
+		const selectionChanged = this.#itemStatesFullSync || !sameMembers(this.#appliedSelected, selected) || !sameMembers(this.#appliedChecked, checked);
+		if (this.#itemStatesFullSync) {
+			for (const el of this.#allItems()) {
+				el.toggleAttribute(`data-tickled`, el === tickled);
+				el.toggleAttribute(`data-selected`, selected.has(el));
+				el.toggleAttribute(`data-checked`, checked.has(el));
+			}
+			this.#itemStatesFullSync = false;
+		} else {
+			if (tickled !== this.#appliedTickled) {
+				this.#appliedTickled?.removeAttribute(`data-tickled`);
+				tickled?.setAttribute(`data-tickled`, ``);
+			}
+			applySetDiff(this.#appliedSelected, selected, `data-selected`);
+			applySetDiff(this.#appliedChecked, checked, `data-checked`);
 		}
-		this.dataset.inputMode = this.tickled.inputMode;
-		this._syncCheckboxes();
+		this.#appliedTickled = tickled;
+		this.#appliedSelected = new Set(selected);
+		this.#appliedChecked = checked;
+		if (this.dataset.inputMode !== this.tickled.inputMode) this.dataset.inputMode = this.tickled.inputMode;
+		if (selectionChanged) this._syncCheckboxes();
 	}
 	_syncCheckboxes() {
 		const inCheckedMode = this.interactionMode === `checked`;
 		const wantsCustom = typeof this.checkboxRenderer === `function`;
+		if (!inCheckedMode && !this.#hasCheckboxes) return;
+		this.#hasCheckboxes = inCheckedMode;
 		for (const el of this.querySelectorAll(`li`)) {
 			const existing = el.querySelector(`.ixfx-list-checkbox`);
 			if (!inCheckedMode) {
@@ -18865,12 +19291,12 @@ let DetailListElement = class DetailListElement extends LitElement {
 	* `ixfx-vertical-list.renderedKeys()` in its non-virtualized mode.
 	*/
 	#renderedKeys() {
-		const out = [];
-		for (const el of this._getVisibleItems()) {
+		const visible = this._getVisibleItems();
+		this.#renderedKeysCache ??= visible.flatMap((el) => {
 			const key = keyForElement(el);
-			if (key !== void 0) out.push(key);
-		}
-		return out;
+			return key === void 0 ? [] : [key];
+		});
+		return this.#renderedKeysCache;
 	}
 	/**
 	* Dispatch `detail-list-viewport-change` with the current key sets — unless
@@ -18970,6 +19396,12 @@ let DetailListElement = class DetailListElement extends LitElement {
       display: flex;
       align-items: center;
       flex: none;
+      /* Paint-isolates each row, so restyling one row (hover, selection)
+         doesn't repaint the whole list: ~3.5x less render work per hover at
+         10k rows, for ~0.6ms more compositor commit per scroll frame. Paint
+         only: layout/style containment add nothing here, and no size
+         containment — fitColumnWidth() measures rows at max-content. */
+      contain: paint;
       width: var(--detail-list-column-width, 220px);
       height: var(--detail-list-item-height, 28px);
       padding: var(--_detail-list-item-padding);
@@ -20850,6 +21282,11 @@ let SplitLayoutElement = class SplitLayoutElement extends LitElement {
         height: 100%;
       }
 
+      /* ::part() doesn't match inside our own shadow root, so target directly. */
+      [part="panel"] {
+        contain: strict;
+      }
+
       .gutter {
         z-index: 2;
         background: var(--split-gutter-color);
@@ -21045,9 +21482,20 @@ let TabListElement = class TabListElement extends LitElement {
 			window.addEventListener(`pointerup`, this.#onPointerUp);
 			window.addEventListener(`pointercancel`, this.#onPointerCancel);
 		};
+		this.#pendingMove = null;
+		this.#moveRaf = null;
 		this.#onPointerMove = (event) => {
 			const state = this.#dragState;
 			if (!state || event.pointerId !== state.pointerId) return;
+			this.#pendingMove = event;
+			this.#moveRaf ??= requestAnimationFrame(this.#flushMove);
+		};
+		this.#flushMove = () => {
+			const event = this.#pendingMove;
+			this.#pendingMove = null;
+			this.#moveRaf = null;
+			const state = this.#dragState;
+			if (!state || !event) return;
 			const dx = event.clientX - state.startX;
 			const dy = event.clientY - state.startY;
 			const distance = Math.hypot(dx, dy);
@@ -21232,7 +21680,17 @@ let TabListElement = class TabListElement extends LitElement {
 		return item;
 	}
 	#onPointerDown;
+	#pendingMove;
+	#moveRaf;
 	#onPointerMove;
+	#cancelPendingMove() {
+		if (this.#moveRaf !== null) {
+			cancelAnimationFrame(this.#moveRaf);
+			this.#moveRaf = null;
+		}
+		this.#pendingMove = null;
+	}
+	#flushMove;
 	#onPointerUp;
 	#onPointerCancel;
 	#beginDrag(event) {
@@ -21258,6 +21716,7 @@ let TabListElement = class TabListElement extends LitElement {
 	#endDrag(pointerId) {
 		const state = this.#dragState;
 		if (!state) return;
+		this.#cancelPendingMove();
 		state.ghost?.destroy();
 		state.ghost = null;
 		this.#dragState = null;
@@ -21580,6 +22039,22 @@ __decorate([property({
 TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
 //#endregion
 //#region src/tabs/tab-list-item.ts
+const resizeHandlers = /* @__PURE__ */ new WeakMap();
+const sharedResizeObserver = new ResizeObserver((entries) => {
+	for (const entry of entries) resizeHandlers.get(entry.target)?.(entry.contentRect.width);
+});
+const mutationHandlers = /* @__PURE__ */ new Map();
+const sharedMutationObserver = new MutationObserver((records) => {
+	const touched = /* @__PURE__ */ new Set();
+	for (const record of records) for (let node = record.target; node; node = node.parentNode) {
+		const handler = mutationHandlers.get(node);
+		if (handler) {
+			touched.add(handler);
+			break;
+		}
+	}
+	for (const handler of touched) handler();
+});
 let TabListItemElement = class TabListItemElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -21593,7 +22068,11 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 		this._compact = false;
 		this._hasToolbarContent = false;
 		this._hasStatusContent = false;
-		this._labelObserver = null;
+		this._onLabelMutation = () => {
+			this._syncLabelSizer();
+			this._updateToolbarContent();
+			this._updateStatusContent();
+		};
 		this._onToolbarSlotChange = () => {
 			this._updateToolbarContent();
 		};
@@ -21606,17 +22085,13 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 	}
 	connectedCallback() {
 		super.connectedCallback();
-		this._resizeObserver = new ResizeObserver(([entry]) => {
-			this._compact = entry.contentRect.width < 64;
+		resizeHandlers.set(this, (width) => {
+			this._compact = width < 64;
 		});
-		this._resizeObserver.observe(this);
+		sharedResizeObserver.observe(this);
 		this._wireSlotListeners();
-		this._labelObserver = new MutationObserver(() => {
-			this._syncLabelSizer();
-			this._updateToolbarContent();
-			this._updateStatusContent();
-		});
-		this._labelObserver.observe(this, {
+		mutationHandlers.set(this, this._onLabelMutation);
+		sharedMutationObserver.observe(this, {
 			childList: true,
 			characterData: true,
 			subtree: true,
@@ -21626,12 +22101,11 @@ let TabListItemElement = class TabListItemElement extends LitElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._resizeObserver?.disconnect();
-		this._resizeObserver = void 0;
+		sharedResizeObserver.unobserve(this);
+		resizeHandlers.delete(this);
 		this._commandCleanup?.();
 		this._commandCleanup = void 0;
-		this._labelObserver?.disconnect();
-		this._labelObserver = null;
+		mutationHandlers.delete(this);
 		this._unwireSlotListeners();
 	}
 	updated(changed) {
@@ -24726,8 +25200,8 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				});
 			}
 		});
-		this.tickled = new TickledController(this, {
-			getItems: () => this._getVisibleItems().map((el) => ({
+		this.tickled = ((self) => new TickledController(self, {
+			getItems: () => self.#selectionOrder().map((el) => ({
 				id: el,
 				enabled: !el.hasAttribute(`not-checked`)
 			})),
@@ -24735,9 +25209,11 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
 			},
 			onStateChange: () => this._syncItemStates(),
-			itemWrap: this.itemWrap,
+			get itemWrap() {
+				return self.itemWrap;
+			},
 			hoverDisabled: () => this.#dragSelect.isDragging || this.#nativeDrag.isDragging
-		});
+		}))(this);
 		this.#nativeDragging = false;
 		this.#postDragSuppressTimer = 0;
 		this.#nativeDrag = new ListNativeDragController(this, {
@@ -24769,6 +25245,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				this.toggleAttribute(`data-native-dragging`, false);
 				this.removeAttribute(`aria-label`);
 				for (const el of this._getVisibleItems()) el.removeAttribute(`data-drag-origin`);
+				if (this.#virtualActive()) for (const el of this.#allItems) el.removeAttribute(`data-drag-origin`);
 				this.#startPostDragSuppressTimer();
 			},
 			syncLightDomDraggable: () => this._syncNativeDraggable()
@@ -24797,7 +25274,9 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
 			itemSelector: ITEM_SELECTOR$2,
 			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			highlightKey: `vertical-list-search`
+			highlightKey: `vertical-list-search`,
+			getAllItems: () => this.#selectionOrder(),
+			observeContainer: false
 		}) });
 		this.#onScroll = () => {
 			if (this.#scrollRaf !== 0) return;
@@ -24836,10 +25315,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				case `ArrowDown`:
 					e.preventDefault();
 					this.tickled.handleKeyboardNavigation(`next`);
-					this.tickled.tickledId?.scrollIntoView({
-						block: `nearest`,
-						inline: `nearest`
-					});
+					this.#revealCursor();
 					if (e.shiftKey && this.interactionMode === `vscode`) {
 						const cur = this.tickled.tickledId;
 						if (cur) this.selection.rangeTo(cur);
@@ -24848,15 +25324,30 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				case `ArrowUp`:
 					e.preventDefault();
 					this.tickled.handleKeyboardNavigation(`previous`);
-					this.tickled.tickledId?.scrollIntoView({
-						block: `nearest`,
-						inline: `nearest`
-					});
+					this.#revealCursor();
 					if (e.shiftKey && this.interactionMode === `vscode`) {
 						const cur = this.tickled.tickledId;
 						if (cur) this.selection.rangeTo(cur);
 					}
 					break;
+				case `Home`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`first`);
+					this.#revealCursor();
+					break;
+				case `End`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`last`);
+					this.#revealCursor();
+					break;
+				case `PageDown`:
+					e.preventDefault();
+					this.#handlePage(1);
+					break;
+				case `PageUp`:
+					e.preventDefault();
+					this.#handlePage(-1);
+					break;
 				case `Enter`: {
 					const id = this.tickled.tickledId;
 					if (id) {
@@ -24978,16 +25469,17 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	#postDragSuppressTimer;
 	#nativeDrag;
 	#prepareNativeDrag(originKey) {
-		const visible = this._getVisibleItems();
-		const originEl = visible.find((el) => keyForElement(el) === originKey);
+		const originEl = this.#itemForKey(originKey);
 		if (!originEl || !this._isCheckable(originEl)) return void 0;
 		if (!this.selection.selected.has(originEl)) this.selection.replace(originEl);
+		const ordered = this.#selectionOrder();
 		const selected = [];
-		visible.forEach((el, index) => {
+		ordered.forEach((el) => {
 			if (!this.selection.selected.has(el)) return;
+			const idx = this.#registryIndexOf(el);
 			selected.push({
 				key: keyForElement(el) ?? originKey,
-				index,
+				index: idx,
 				item: el,
 				element: el
 			});
@@ -25214,6 +25706,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			return;
 		}
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.search.refresh();
 	}
 	/**
 	* Collapse + fade `item` out, then detach it. The rows below slide up to
@@ -25250,6 +25743,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.replaceChildren();
 		this.selection.reset();
 		this._syncItemStates();
+		this.search.refresh();
 		if (this.#virtualActive()) this.#syncVirtualWindow(true);
 	}
 	/**
@@ -25265,11 +25759,13 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.#allItems = [...items];
 			for (const el of this.#allItems) this.#animatedItems.add(el);
 			this.selection.reset();
+			this.search.refresh();
 			this.#syncVirtualWindow(true);
 			return;
 		}
 		for (const item of items) this.appendChild(item);
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
+		this.search.refresh();
 	}
 	/**
 	* Dispatch a command to this list — used by `ixfx-grouped-item-lister` to
@@ -25326,7 +25822,16 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			if (index < 0) return;
 			const ul = this.renderRoot.querySelector(`ul`);
 			if (ul) {
-				ul.scrollTop = index * this.itemHeight;
+				const stride = this.itemHeight;
+				const viewportH = ul.clientHeight;
+				const top = index * stride;
+				const bottom = (index + 1) * stride;
+				const vt = ul.scrollTop;
+				const vh = viewportH;
+				let next = vt;
+				if (top < vt) next = top;
+				else if (bottom > vt + vh) next = bottom - vh;
+				if (next !== vt) ul.scrollTop = next;
 				this.#syncVirtualWindow(true);
 			}
 		}
@@ -25338,6 +25843,33 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			inline: `nearest`
 		});
 	}
+	#revealCursor() {
+		const el = this.tickled.tickledId;
+		const key = el ? keyForElement(el) : void 0;
+		if (key !== void 0) this.focusKey(key);
+	}
+	#pageSize() {
+		const ul = this.#scrollList();
+		if (!ul) return 1;
+		const viewportH = ul.clientHeight;
+		if (this.#virtualActive()) return Math.max(1, Math.floor(viewportH / this.itemHeight));
+		const first = this.querySelector(`li[data-key]`);
+		if (!first) return 1;
+		const firstH = first.offsetHeight || this.itemHeight;
+		return Math.max(1, Math.floor(viewportH / firstH));
+	}
+	/** Move the cursor one page up (-1) or down (1) across the whole registry. */
+	#handlePage(direction) {
+		const page = this.#pageSize();
+		const items = this.#selectionOrder().filter((el) => !el.hasAttribute(`not-checked`));
+		if (items.length === 0) return;
+		const currentKey = this.tickled.tickledId ? keyForElement(this.tickled.tickledId) : void 0;
+		const currentIdx = currentKey !== void 0 ? items.findIndex((i) => keyForElement(i) === currentKey) : -1;
+		const fallback = direction === 1 ? page - 1 : 0;
+		const nextIdx = currentIdx < 0 ? fallback : currentIdx + direction * page;
+		this.tickled.handleKeyboardNavigation(items[Math.min(items.length - 1, Math.max(0, nextIdx))]);
+		this.#revealCursor();
+	}
 	#itemForKey(key) {
 		if (this.#virtualActive()) return this.#allItems.find((el) => keyForElement(el) === key);
 		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
@@ -25686,6 +26218,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			else this.#pendingAnimate.push(...fresh);
 		}
 		if (changed && this.interactionMode === `checked`) this._syncCheckboxes();
+		if (changed) this.search.refresh();
 		return changed;
 	}
 	/** Consume queued observer records first so a sync never drops a row. */
@@ -25763,9 +26296,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.#windowEnd = end;
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 		this._syncItemStates();
+		const totalCount = this.#selectionOrder().length;
 		for (let i = start; i < end; i++) {
 			const el = this.#allItems[i];
-			if (el) this.#applyRowState(el);
+			if (el) this.#applyRowState(el, i + 1, totalCount);
 		}
 		const pending = this.#pendingAnimate;
 		this.#pendingAnimate = [];
@@ -25773,12 +26307,25 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.#animatedItems.add(el);
 			if (el.parentNode === this) animateListItemIn(el);
 		}
+		this.search.repaintHighlights();
 	}
 	/** Per-attach state the attached sweep can't cover (it only sees the window). */
-	#applyRowState(el) {
-		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el) && !el.hasAttribute(`data-editing`);
+	#applyRowState(el, posInSet, setSize) {
+		if (el instanceof HTMLElement) {
+			el.draggable = this.itemsDraggable && this._isCheckable(el) && !el.hasAttribute(`data-editing`);
+			if (posInSet !== void 0 && setSize !== void 0) {
+				el.setAttribute(`aria-setsize`, String(setSize));
+				el.setAttribute(`aria-posinset`, String(posInSet));
+				if (!el.hasAttribute(`role`) || el.hasAttribute(`data-aria-role`)) {
+					el.setAttribute(`role`, `option`);
+					el.setAttribute(`data-aria-role`, ``);
+					el.setAttribute(`aria-selected`, String(this.selection.selected.has(el)));
+				}
+			}
+		}
 		el.removeAttribute(`data-marquee`);
 		el.removeAttribute(`data-drag-origin`);
+		el.removeAttribute(`data-drop-target`);
 	}
 	/**
 	* Leave virtualization: reattach every registry row in order and drop the
@@ -25843,6 +26390,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			const item = this.#customWrappers.get(el) ?? el;
 			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
 			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+			if (el.hasAttribute(`data-aria-role`)) el.setAttribute(`aria-selected`, String(this.selection.selected.has(el)));
 			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !item.hasAttribute(`not-checked`) && this.selection.selected.has(el));
 			else el.removeAttribute(`data-checked`);
 		}
@@ -25986,6 +26534,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
 	}
+	activateKey(key) {
+		const item = this.#itemForKey(key);
+		if (item) this._activateItem(item);
+	}
 	/** The row (or `undefined` for empty space) the last `list-drag-over` was fired for. */
 	#dragOver;
 	/** Tell the consumer the drag left its last target and drop the highlight. */
@@ -25995,9 +26547,11 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.#highlightDropTarget(void 0, false);
 		if (last) this._dispatch(`list-drag-leave`, { key: last.item ? keyForElement(last.item) : void 0 });
 	}
+	#dropTargetEl;
 	/** Mark one row (or, for empty space, the host) as the drop target. */
 	#highlightDropTarget(item, active) {
-		for (const el of this.querySelectorAll(`[data-drop-target]`)) el.removeAttribute(`data-drop-target`);
+		this.#dropTargetEl?.removeAttribute(`data-drop-target`);
+		this.#dropTargetEl = active ? item : void 0;
 		this.toggleAttribute(`data-drop-target`, active && item === void 0);
 		if (active && item) item.setAttribute(`data-drop-target`, ``);
 	}
@@ -26282,9 +26836,17 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		];
 	}
 	render() {
+		const role = this.getAttribute(`role`) ? void 0 : `listbox`;
+		const ariaMulti = this.selectionMode === `multiple`;
 		return html`
       <div class="container">
-        <ul part="list" class="scroll-fade-y" @scroll=${this.#onScroll}>
+        <ul
+          part="list"
+          class="scroll-fade-y"
+          role=${ifDefined(role)}
+          aria-multiselectable=${ariaMulti ? `true` : `false`}
+          @scroll=${this.#onScroll}
+        >
           <slot></slot>
         </ul>
         ${this.#marqueeRect ? html`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
@@ -26411,6 +26973,7 @@ let FlatListElement = class FlatListElement extends LitElement {
 		this.hideRoot = false;
 		this.emptyText = `Empty`;
 		this._focusVisible = false;
+		this._hasToolbar = false;
 		this._rows = [];
 		this._loading = false;
 		this.#lastPath = [];
@@ -26502,6 +27065,9 @@ let FlatListElement = class FlatListElement extends LitElement {
 				composed: true
 			}));
 		};
+		this.#onToolbarSlotChange = (e) => {
+			this._hasToolbar = e.target.assignedNodes({ flatten: true }).some((n) => n.nodeType === Node.ELEMENT_NODE || !!n.textContent?.trim());
+		};
 		this.#syncFocusVisible = () => {
 			this._focusVisible = this.list?.matches(`:focus-visible`) ?? false;
 		};
@@ -26744,16 +27310,21 @@ let FlatListElement = class FlatListElement extends LitElement {
 	#onListEditCancel;
 	#onListSelect;
 	#onListActivate;
+	#onToolbarSlotChange;
 	#syncFocusVisible;
 	#onKeyDown;
 	/** A crumb was chosen (or the Up button used): go to that node, or to its parent and select it if it is a leaf. */
 	#onCrumbSelect;
+	#markedEl;
 	/** Flag the marked row. Rows are rebuilt with the level, so this runs after each rebuild. */
 	async #applyMarked() {
 		const list = this.list;
 		if (!list) return;
 		await list.updateComplete;
-		for (const row of list.querySelectorAll(`li[data-key]`)) row.toggleAttribute(`data-marked`, row.getAttribute(`data-key`) === this.markedKey);
+		this.#markedEl?.removeAttribute(`data-marked`);
+		const key = this.markedKey;
+		this.#markedEl = key === void 0 ? void 0 : list.getItemByKey(key);
+		this.#markedEl?.setAttribute(`data-marked`, ``);
 	}
 	/** After the inner list has rebuilt, place the cursor / selection / focus. */
 	async #settleList() {
@@ -26795,6 +27366,9 @@ let FlatListElement = class FlatListElement extends LitElement {
           ?hide-root=${this.hideRoot}
           @select=${this.#onCrumbSelect}
         ></ixfx-crumb-navigation>
+        <div class="toolbar" part="toolbar" ?hidden=${!this._hasToolbar}>
+          <slot @slotchange=${this.#onToolbarSlotChange}></slot>
+        </div>
       </div>
       <div class="body">
         <ixfx-vertical-list
@@ -26845,12 +27419,31 @@ let FlatListElement = class FlatListElement extends LitElement {
     }
 
     .crumbs {
+      display: flex;
+      align-items: center;
+      gap: var(--flat-list-toolbar-gap, var(--space-xs));
       flex: none;
       font-size: var(--flat-list-crumb-font-size, var(--text-s));
       padding: var(--flat-list-crumb-padding, var(--space-xs));
       border-bottom: 1px solid var(--flat-list-border, var(--list-border, var(--border)));
     }
 
+    .crumbs ixfx-crumb-navigation {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+
+    .toolbar {
+      display: flex;
+      flex: none;
+      align-items: center;
+      gap: var(--flat-list-toolbar-gap, var(--space-xs));
+    }
+
+    .toolbar[hidden] {
+      display: none;
+    }
+
     .body {
       position: relative;
       flex: 1 1 auto;
@@ -26984,6 +27577,7 @@ __decorate([property({
 	reflect: true,
 	attribute: `data-focus-visible`
 })], FlatListElement.prototype, "_focusVisible", void 0);
+__decorate([state()], FlatListElement.prototype, "_hasToolbar", void 0);
 __decorate([state()], FlatListElement.prototype, "_rows", void 0);
 __decorate([state()], FlatListElement.prototype, "_loading", void 0);
 FlatListElement = __decorate([safeCustomElement(`ixfx-flat-list`)], FlatListElement);
@@ -27498,16 +28092,24 @@ function warnDuplicateKeys(keys) {
 	}
 	if (dupes.size > 0) console.warn(`ixfx-grid-list: duplicate item key(s) ${[...dupes].map((k) => `"${k}"`).join(`, `)} — the first occurrence wins for key-based operations.`);
 }
+/** Key → first effective index, built from `keys` (first occurrence wins on duplicates). */
+function indexByKey(keys) {
+	const index = /* @__PURE__ */ new Map();
+	keys.forEach((k, i) => {
+		if (!index.has(k)) index.set(k, i);
+	});
+	return index;
+}
 var ElementGridListSource = class {
 	#host;
 	#items = [];
-	#slotNames = /* @__PURE__ */ new WeakMap();
 	#syntheticKeys = /* @__PURE__ */ new WeakMap();
 	#seq = 0;
 	#predicate;
 	#searchKeys;
 	#effectiveIndices = [];
 	#keysCache;
+	#indexCache;
 	#grouping;
 	#groups = [];
 	#groupByKey = /* @__PURE__ */ new Map();
@@ -27526,7 +28128,8 @@ var ElementGridListSource = class {
 		return eff === void 0 ? `` : this.#itemKey(this.#items[eff]);
 	}
 	indexOfKey(key) {
-		return this.#effectiveIndices.findIndex((i) => this.#itemKey(this.#items[i]) === key);
+		this.#indexCache ??= indexByKey(this.keys());
+		return this.#indexCache.get(key) ?? -1;
 	}
 	keys() {
 		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#itemKey(this.#items[i]));
@@ -27549,11 +28152,11 @@ var ElementGridListSource = class {
 		const eff = this.#effectiveIndices[index];
 		return eff !== void 0 && !this.#items[eff].hasAttribute(`not-checked`);
 	}
-	renderCellContent(index) {
-		const eff = this.#effectiveIndices[index];
-		if (eff === void 0) return void 0;
-		return html`<slot name=${this.slotNameFor(this.#items[eff])}></slot>`;
-	}
+	/**
+	* Element mode cells project their item through a per-cell `<slot>` that
+	* `GridListElement` renders and assigns itself (see its `#applyCellSlots`).
+	*/
+	renderCellContent(_index) {}
 	iconAt(_index) {}
 	iconColorAt(_index) {}
 	textColorAt(_index) {}
@@ -27575,10 +28178,6 @@ var ElementGridListSource = class {
 	}
 	refresh() {
 		this.#items = Array.from(this.#host.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => !el.hidden);
-		for (const el of this.#items) {
-			const name = this.slotNameFor(el);
-			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
-		}
 		warnDuplicateKeys(this.#items.map((el) => this.#itemKey(el)));
 		this.#recomputeEffective();
 	}
@@ -27590,16 +28189,6 @@ var ElementGridListSource = class {
 	rawElementAt(index) {
 		return this.#items[index];
 	}
-	/** Stable per-element `<slot>` name. */
-	slotNameFor(el) {
-		let name = this.#slotNames.get(el);
-		if (name === void 0) {
-			this.#seq += 1;
-			name = `gl-item-${this.#seq}`;
-			this.#slotNames.set(el, name);
-		}
-		return name;
-	}
 	resolveKeyToElement(key) {
 		if (isSyntheticKey(key)) return this.#items.find((el) => this.#syntheticKeys.get(el) === key);
 		return this.#items.find((el) => keyForElement(el) === key);
@@ -27617,6 +28206,7 @@ var ElementGridListSource = class {
 		}
 		this.#applyGroupingTo(effective);
 		this.#keysCache = void 0;
+		this.#indexCache = void 0;
 	}
 	#applyGroupingTo(effective) {
 		if (this.#grouping === void 0) {
@@ -27652,6 +28242,7 @@ var DataGridListSource = class {
 	#searchKeys;
 	#effectiveIndices = [];
 	#keysCache;
+	#indexCache;
 	#grouping;
 	#groups = [];
 	#groupByKey = /* @__PURE__ */ new Map();
@@ -27672,7 +28263,8 @@ var DataGridListSource = class {
 		return eff === void 0 ? `` : this.#adapter.key(this.#items[eff], eff);
 	}
 	indexOfKey(key) {
-		return this.#effectiveIndices.findIndex((i) => this.#adapter.key(this.#items[i], i) === key);
+		this.#indexCache ??= indexByKey(this.keys());
+		return this.#indexCache.get(key) ?? -1;
 	}
 	keys() {
 		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#adapter.key(this.#items[i], i));
@@ -27765,6 +28357,7 @@ var DataGridListSource = class {
 			this.#groupByKey = grouped.groupByKey;
 		}
 		this.#keysCache = void 0;
+		this.#indexCache = void 0;
 	}
 };
 //#endregion
@@ -27791,6 +28384,15 @@ function sameKeys(a, b) {
 	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
 	return true;
 }
+/**
+* Set `attr` on exactly the elements in `now`, removing it from those in
+* `previous` that no longer qualify. Returns the new marked set.
+*/
+function syncMarker(attr, previous, now) {
+	for (const el of previous) if (!now.has(el)) el.removeAttribute(attr);
+	for (const el of now) if (!el.hasAttribute(attr)) el.setAttribute(attr, ``);
+	return now;
+}
 let GridListElement = class GridListElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -27825,6 +28427,11 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#snapTimer = 0;
 		this.#items = [];
 		this.#itemWrap = `stop`;
+		this.#cellIds = /* @__PURE__ */ new Map();
+		this.#nextCellId = 0;
+		this.#recycledKeys = /* @__PURE__ */ new Set();
+		this.#windowSlots = [];
+		this.#slottedItems = /* @__PURE__ */ new Map();
 		this.#entering = /* @__PURE__ */ new Set();
 		this.#reflowTimer = 0;
 		this.#sourceElement = new ElementGridListSource(this);
@@ -27948,6 +28555,8 @@ let GridListElement = class GridListElement extends LitElement {
 			}
 		});
 		this.#groupByChanged = false;
+		this.#markedTickled = /* @__PURE__ */ new Set();
+		this.#markedSelected = /* @__PURE__ */ new Set();
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
 			const el = e.target;
@@ -28437,6 +29046,14 @@ let GridListElement = class GridListElement extends LitElement {
       .cell.entering {
         animation: ixfx-list-item-in var(--grid-list-item-move-duration, 200ms) ease both;
       }
+      /* A recycled cell has just been handed from one item to another (see
+         #assignCellIds); it must not animate from the previous item's state
+         or position. */
+      .cell.recycled,
+      .cell.recycled > .thumb,
+      .cell.recycled > .thumb::after {
+        transition: none !important;
+      }
       @media (prefers-reduced-motion: reduce) {
         :host([reflowing]) .group-header { transition: none; }
         :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
@@ -28468,11 +29085,39 @@ let GridListElement = class GridListElement extends LitElement {
 	#viewportRef;
 	#resizeObserver;
 	#mutationObserver;
+	/**
+	* Watches item (direct child) attributes that change the item set: `hidden`
+	* drops an item from layout, `data-key` / `data-value` change its identity.
+	* Separate from {@link #mutationObserver} because attribute observation of
+	* children needs `subtree`, which must not apply to the child list.
+	*/
+	#itemAttrObserver;
 	#scrollRaf;
 	/** Debounce handle for {@link snapToItem} — fires once scrolling settles. */
 	#snapTimer;
 	#items;
 	#itemWrap;
+	/**
+	* Cell recycling. Each rendered key holds a stable cell id, and `repeat` is
+	* keyed by that id rather than the item key, so a cell scrolled out of the
+	* window hands its DOM to an item scrolling in instead of being destroyed and
+	* recreated. Item-keyed `repeat` gets steadily slower in Chrome when every key
+	* in the window is new (a scrollbar drag / fling), and recreating ~100 cells a
+	* frame is costly in any case. See {@link #assignCellIds}.
+	*/
+	#cellIds;
+	#nextCellId;
+	/** Keys whose cell was taken over from another item in the latest render. */
+	#recycledKeys;
+	/**
+	* Element mode: each cell has a fixed `<slot name="gl-cell-<id>">`, and the
+	* light-DOM item it shows is pointed at it via its `slot` attribute. Moving
+	* that attribute is far cheaper than renaming slots, which makes the browser
+	* re-match every light-DOM child. `#windowSlots` is the assignment the latest
+	* render wants (applied in `updated()`); `#slottedItems` is what's applied.
+	*/
+	#windowSlots;
+	#slottedItems;
 	/** Items added mid-list that are still playing their enter animation. */
 	#entering;
 	/** Timer that ends the `[reflowing]` window opened by a mid-list insertion. */
@@ -28660,9 +29305,15 @@ let GridListElement = class GridListElement extends LitElement {
 		this.addEventListener(`pointermove`, this.#onHostPointerMove, { passive: true });
 		this.addEventListener(`pointerleave`, this.#onHostPointerLeave);
 		this.#mutationObserver ??= new MutationObserver((records) => this.#onChildrenChanged(records));
-		this.#mutationObserver.observe(this, {
-			childList: true,
-			attributeFilter: [`hidden`]
+		this.#mutationObserver.observe(this, { childList: true });
+		this.#itemAttrObserver ??= new MutationObserver((records) => this.#onItemAttributesChanged(records));
+		this.#itemAttrObserver.observe(this, {
+			subtree: true,
+			attributeFilter: [
+				`hidden`,
+				`data-key`,
+				`data-value`
+			]
 		});
 		this.#searchRegistry ??= createCommandRegistry();
 		this.#ensureSearch();
@@ -28678,6 +29329,7 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
 		this.#mutationObserver?.disconnect();
+		this.#itemAttrObserver?.disconnect();
 		this.#cancelScrollRaf();
 		this.#cancelSnapTimer();
 		this.#unregisterSearchCommands?.();
@@ -28689,6 +29341,10 @@ let GridListElement = class GridListElement extends LitElement {
 		}
 		if (this.#nativeDragging || this.#nativeDrag.isDragging) this.#clearNativeDragState();
 	}
+	/** Only attribute changes on items themselves matter, not on their content. */
+	#onItemAttributesChanged(records) {
+		if (records.some((r) => r.target.parentNode === this)) this.#onChildrenChanged([]);
+	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
 		this.#syncItems();
@@ -28705,7 +29361,7 @@ let GridListElement = class GridListElement extends LitElement {
 			const tickledId = this.tickled.tickledId;
 			if (tickledId && gone.includes(tickledId)) this.tickled.focus(void 0);
 		}
-		this._syncItemStates();
+		this._syncItemStates(true);
 		this.#noteChildMutation(previousLength, records);
 		this.requestUpdate();
 		this.updateComplete.then(() => this.#emitViewportChange());
@@ -28777,6 +29433,11 @@ let GridListElement = class GridListElement extends LitElement {
 				const w = entry.contentRect.width;
 				const h = entry.contentRect.height;
 				if (w <= 0 || h <= 0) return;
+				if (w === this._viewportWidth && h === this._viewportHeight) continue;
+				const horizontal = this.orientation === `row`;
+				const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+				const prevExtent = horizontal ? this._viewportWidth : this._viewportHeight;
+				if (prevExtent > 0 && prevOffset > 1) this.#captureCentreAnchor(prevOffset, prevExtent, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
 				this._viewportWidth = w;
 				this._viewportHeight = h;
 			}
@@ -28938,7 +29599,11 @@ let GridListElement = class GridListElement extends LitElement {
 	}
 	updated(changed) {
 		super.updated(changed);
-		this.#syncItems();
+		const pending = this.#mutationObserver?.takeRecords();
+		const pendingAttrs = this.#itemAttrObserver?.takeRecords();
+		if (pending !== void 0 && pending.length > 0) this.#onChildrenChanged(pending);
+		else if (pendingAttrs !== void 0 && pendingAttrs.length > 0) this.#onItemAttributesChanged(pendingAttrs);
+		if (this.#source instanceof ElementGridListSource) this.#applyCellSlots();
 		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
 			this.#syncAriaMultiselectable();
@@ -29290,13 +29955,36 @@ let GridListElement = class GridListElement extends LitElement {
 			this._scrollTop = next;
 		}
 	}
-	_syncItemStates() {
+	/** Light-DOM items currently carrying `data-tickled` / `data-selected`. */
+	#markedTickled;
+	#markedSelected;
+	/**
+	* Mirror cursor / selection onto the light-DOM items as `data-tickled` /
+	* `data-selected`. Only the items whose state changed are touched, so a
+	* cursor move costs O(selection), not O(items). `full` re-checks every item —
+	* used when the child list changes, so markers set before the item was
+	* ours (or left on a removed item) are corrected.
+	*/
+	_syncItemStates(full = false) {
 		const selected = this.selection.selectedKeys;
-		for (const el of this.#items) {
-			const key = keyForElement(el);
-			el.toggleAttribute(`data-tickled`, key !== void 0 && this.tickled.isTickled(key));
-			el.toggleAttribute(`data-selected`, key !== void 0 && selected.has(key));
+		const tickledId = this.tickled.tickledId;
+		const elementFor = (key) => {
+			if (isSyntheticKey(key)) return void 0;
+			const index = this.#source.indexOfKey(key);
+			return index < 0 ? void 0 : this.#items[index];
+		};
+		const tickledEl = tickledId === void 0 ? void 0 : elementFor(tickledId);
+		const selectedEls = /* @__PURE__ */ new Set();
+		for (const key of selected) {
+			const el = elementFor(key);
+			if (el) selectedEls.add(el);
 		}
+		if (full) for (const el of this.#items) {
+			this.#markedTickled.add(el);
+			this.#markedSelected.add(el);
+		}
+		this.#markedTickled = syncMarker(`data-tickled`, this.#markedTickled, tickledEl ? /* @__PURE__ */ new Set([tickledEl]) : /* @__PURE__ */ new Set());
+		this.#markedSelected = syncMarker(`data-selected`, this.#markedSelected, selectedEls);
 		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 	}
 	#emitSelect(selected, previous) {
@@ -29366,8 +30054,57 @@ let GridListElement = class GridListElement extends LitElement {
     `;
 	}
 	#renderDataCells(win) {
+		const slice = this.#windowSlice(win);
+		return repeat(slice, (index) => this.#cellIds.get(this.#source.keyAt(index)), (index) => this.#renderDataCell(index, win));
+	}
+	#cellSlotName(key) {
+		return `gl-cell-${this.#cellIds.get(key)}`;
+	}
+	/**
+	* Element mode: point each rendered item's `slot` at its cell, and clear it on
+	* items that left the window (or the DOM) so they project nowhere.
+	*/
+	#applyCellSlots() {
+		const next = /* @__PURE__ */ new Map();
+		for (const [el, name] of this.#windowSlots) {
+			next.set(el, name);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+		for (const el of this.#slottedItems.keys()) if (!next.has(el)) el.removeAttribute(`slot`);
+		this.#slottedItems = next;
+	}
+	/** Effective indices in the rendered window, with cell ids assigned to their keys. */
+	#windowSlice(win) {
 		const slice = win.ranges.flatMap(([start, end]) => Array.from({ length: end - start }, (_, i) => start + i));
-		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderDataCell(index, win));
+		this.#assignCellIds(slice.map((index) => this.#source.keyAt(index)));
+		return slice;
+	}
+	/**
+	* Give every key in the window a cell id: keys already rendered keep theirs;
+	* new keys take the ids freed by keys that left the window (recycling that
+	* cell's DOM), and only mint a fresh id when none is free.
+	*/
+	#assignCellIds(keys) {
+		const inWindow = new Set(keys);
+		const free = [];
+		for (const [key, id] of this.#cellIds) if (!inWindow.has(key)) free.push(id);
+		const next = /* @__PURE__ */ new Map();
+		for (const key of keys) {
+			const id = this.#cellIds.get(key);
+			if (id !== void 0) next.set(key, id);
+		}
+		const recycled = /* @__PURE__ */ new Set();
+		for (const key of keys) {
+			if (next.has(key)) continue;
+			const id = free.pop();
+			if (id === void 0) next.set(key, this.#nextCellId++);
+			else {
+				next.set(key, id);
+				recycled.add(key);
+			}
+		}
+		this.#cellIds = next;
+		this.#recycledKeys = recycled;
 	}
 	#renderDataCell(index, win) {
 		const key = this.#source.keyAt(index);
@@ -29387,10 +30124,12 @@ let GridListElement = class GridListElement extends LitElement {
 		const icon = appearanceAbsent(rawIcon) ? void 0 : rawIcon;
 		return html`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
+        aria-setsize=${this.#source.count}
+        aria-posinset=${index + 1}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
@@ -29467,8 +30206,9 @@ let GridListElement = class GridListElement extends LitElement {
 		current.startLoop?.();
 	}
 	#renderElementCells(win) {
-		const slice = win.ranges.flatMap(([start, end]) => Array.from({ length: end - start }, (_, i) => start + i));
-		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderCell(this.#items[index], index, win));
+		const slice = this.#windowSlice(win);
+		this.#windowSlots = slice.map((index) => [this.#items[index], this.#cellSlotName(this.#source.keyAt(index))]);
+		return repeat(slice, (index) => this.#cellIds.get(this.#source.keyAt(index)), (index) => this.#renderCell(this.#items[index], index, win));
 	}
 	#renderHeaders(win) {
 		if (win.headers.length === 0) return nothing;
@@ -29477,6 +30217,7 @@ let GridListElement = class GridListElement extends LitElement {
         <ixfx-list-group-header
           class="group-header"
           part="group-header"
+          role="presentation"
           data-group-key=${h.key}
           label=${h.label}
           count=${h.count}
@@ -29505,10 +30246,12 @@ let GridListElement = class GridListElement extends LitElement {
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return html`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
+        aria-setsize=${this.#source.count}
+        aria-posinset=${index + 1}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
@@ -29521,7 +30264,7 @@ let GridListElement = class GridListElement extends LitElement {
         @pointerenter=${() => this.#handleCellPointerEnter(key)}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
-          ${this.#source.renderCellContent(index)}
+          <slot name=${this.#cellSlotName(key)}></slot>
         </div>
         ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
@@ -30373,15 +31116,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$4((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;
@@ -30404,18 +31142,21 @@ var TreeDropController = class {
 			const indent = this.#config.getIndentPx() || 1;
 			const treeLeft = rows[0].rect.left;
 			const effDepth = clamp$4(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);
-			}
-			const anchor = rows[anchorIndex];
-			referenceKey = anchor.key;
+			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;
+			}
 			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`) {
@@ -30490,9 +31231,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);
@@ -30506,11 +31571,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
 				}));
@@ -30527,6 +31614,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();
@@ -30550,9 +31639,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();
@@ -30564,29 +31654,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`: {
@@ -30603,7 +31705,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,
@@ -30657,7 +31759,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,
@@ -30678,6 +31782,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();
@@ -30698,6 +32002,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;
@@ -30732,73 +32039,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);
 	}
@@ -30811,12 +32110,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>
     `;
 	}
@@ -30888,15 +32189,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();
@@ -30919,30 +32249,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`).
-	*/
-	_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;
+	* 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 false;
 	}
 	#runItemAnimations() {
 		if (this.#enteringKeys.size > 0) {
@@ -30982,7 +32294,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);
@@ -30990,10 +32302,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;
@@ -31013,8 +32331,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();
 						}
 					}
@@ -31028,7 +32345,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();
@@ -31060,8 +32386,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();
@@ -31150,6 +32478,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),
@@ -31222,44 +32562,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.
@@ -31283,7 +32700,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 {
@@ -31327,7 +32744,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({
@@ -31349,6 +32766,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;
@@ -31402,12 +32820,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);
 			}
@@ -31418,7 +32836,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);
 		}
@@ -31439,7 +32857,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);
@@ -31464,7 +32882,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;
@@ -31500,10 +32918,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
@@ -31609,9 +33029,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);
@@ -31661,9 +33082,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);
@@ -31706,7 +33128,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,
@@ -31725,7 +33147,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,
@@ -31749,7 +33171,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) {
@@ -31760,7 +33182,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);
@@ -31796,8 +33218,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;
@@ -31813,6 +33237,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();
@@ -31824,33 +33250,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();
@@ -31864,14 +33301,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();
@@ -31895,30 +33333,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);
@@ -31932,6 +33353,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			composed: true
 		}));
 		this.requestUpdate();
+		if (this.#virtualActive()) {
+			this.#revealIndex(index);
+			return;
+		}
 		this.updateComplete.then(() => this.#scrollTickledIntoView());
 	}
 	#scrollTickledIntoView() {
@@ -31942,12 +33367,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"
@@ -31970,12 +33408,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?.({
@@ -31999,17 +33476,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}
@@ -32050,6 +33528,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);
@@ -32073,6 +33553,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%;
@@ -32119,7 +33601,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 {
@@ -32174,10 +33689,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;
@@ -32288,6 +33799,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);
@@ -32295,33 +33814,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$1(node, selectedNodes) {
-	if (node.item.isLeaf || !node.children?.length) return selectedNodes.has(node) ? `checked` : `unchecked`;
-	const childStates = node.children.map((c) => computeCheckboxState$1(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;
@@ -32339,7 +33858,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
       </span>
     `;
 		if (this.interactionMode === `checked`) {
-			const state = computeCheckboxState$1(node, this._selectedNodes);
+			const state = this.#checkboxCache?.states.get(node.item.key) ?? `unchecked`;
 			return html`${this.#renderCheckbox(node, depth, state)}${caretAndLabel}`;
 		}
 		return caretAndLabel;
@@ -32373,19 +33892,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}
@@ -40891,86 +42411,30 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 				return;
 			}
 			switch (event.key) {
-				case `ArrowDown`: {
+				case `ArrowDown`:
 					event.preventDefault();
-					const current = this.#getTickledNodeAndDepth();
-					let targetIndex = 0;
-					if (current && current.depth === currentDepth) targetIndex = Math.min(current.index + 1, col.length - 1);
-					const targetNode = col[targetIndex];
-					if (!targetNode) break;
-					this.#setTickledNode(targetNode, currentDepth);
-					if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-						const prevIndex = current?.index ?? 0;
-						if (event.shiftKey) {
-							if (!this.#anchor || this.#anchor.depth !== currentDepth) {
-								const anchorNode = col[prevIndex];
-								if (anchorNode) this.#anchor = {
-									key: anchorNode.item.key,
-									depth: currentDepth,
-									index: prevIndex,
-									selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : void 0
-								};
-							}
-							if (this.#anchor) {
-								const from = Math.min(this.#anchor.index, targetIndex);
-								const to = Math.max(this.#anchor.index, targetIndex);
-								const rangeKeys = col.slice(from, to + 1).map((n) => n.item.key);
-								if (this.interactionMode === `vscode`) {
-									const snap = this.#anchor.selectionSnapshot;
-									for (const k of rangeKeys) if (snap.has(k)) this._selectedKeys.delete(k);
-									else this._selectedKeys.add(k);
-								} else this._selectedKeys = new Set(rangeKeys);
-							}
-						} else if (this.interactionMode === `standard`) this.#anchor = {
-							key: targetNode.item.key,
-							depth: currentDepth,
-							index: targetIndex
-						};
-						else this.#anchor = void 0;
-					}
-					this.requestUpdate();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.min(current + 1, col.length - 1));
 					break;
-				}
-				case `ArrowUp`: {
+				case `ArrowUp`:
 					event.preventDefault();
-					const current = this.#getTickledNodeAndDepth();
-					let targetIndex = 0;
-					if (current && current.depth === currentDepth) targetIndex = Math.max(current.index - 1, 0);
-					const targetNode = col[targetIndex];
-					if (!targetNode) break;
-					this.#setTickledNode(targetNode, currentDepth);
-					if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-						const prevIndex = current?.index ?? 0;
-						if (event.shiftKey) {
-							if (!this.#anchor || this.#anchor.depth !== currentDepth) {
-								const anchorNode = col[prevIndex];
-								if (anchorNode) this.#anchor = {
-									key: anchorNode.item.key,
-									depth: currentDepth,
-									index: prevIndex,
-									selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : void 0
-								};
-							}
-							if (this.#anchor) {
-								const from = Math.min(this.#anchor.index, targetIndex);
-								const to = Math.max(this.#anchor.index, targetIndex);
-								const rangeKeys = col.slice(from, to + 1).map((n) => n.item.key);
-								if (this.interactionMode === `vscode`) {
-									const snap = this.#anchor.selectionSnapshot;
-									for (const k of rangeKeys) if (snap.has(k)) this._selectedKeys.delete(k);
-									else this._selectedKeys.add(k);
-								} else this._selectedKeys = new Set(rangeKeys);
-							}
-						} else if (this.interactionMode === `standard`) this.#anchor = {
-							key: targetNode.item.key,
-							depth: currentDepth,
-							index: targetIndex
-						};
-						else this.#anchor = void 0;
-					}
-					this.requestUpdate();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.max(current - 1, 0));
+					break;
+				case `Home`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, () => 0, true);
+					break;
+				case `End`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, () => col.length - 1, true);
+					break;
+				case `PageUp`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.max(current - this.#pageSize(currentDepth), 0), true);
+					break;
+				case `PageDown`:
+					event.preventDefault();
+					this.#moveCursor(col, currentDepth, event, (current) => Math.min(current + this.#pageSize(currentDepth), col.length - 1), true);
 					break;
-				}
 				case `ArrowRight`: {
 					event.preventDefault();
 					const tickled = this.#getTickledNodeAndDepth();
@@ -41063,14 +42527,28 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			window.addEventListener(`pointermove`, this.#onResizeMove);
 			window.addEventListener(`pointerup`, this.#onResizeEnd);
 		};
+		this.#resizeRaf = null;
+		this.#resizePendingWidth = 0;
 		this.#onResizeMove = (event) => {
 			if (this.#resizingDepth < 0) return;
-			const delta = event.clientX - this.#resizeStartX;
-			const newWidth = Math.max(32, this.#resizeStartWidth + delta);
-			this.#columnWidths.set(this.#resizingDepth, newWidth);
-			this.requestUpdate();
+			this.#resizePendingWidth = Math.max(32, this.#resizeStartWidth + (event.clientX - this.#resizeStartX));
+			this.#resizeRaf ??= requestAnimationFrame(this.#applyResizeWidth);
+		};
+		this.#applyResizeWidth = () => {
+			this.#resizeRaf = null;
+			if (this.#resizingDepth < 0) return;
+			(this.shadowRoot?.querySelectorAll(`.column`)[this.#resizingDepth])?.setAttribute(`style`, this.#explicitWidthStyle(this.#resizePendingWidth));
 		};
 		this.#onResizeEnd = () => {
+			if (this.#resizeRaf !== null) {
+				cancelAnimationFrame(this.#resizeRaf);
+				this.#resizeRaf = null;
+			}
+			if (this.#resizingDepth >= 0 && this.#resizePendingWidth > 0) {
+				this.#columnWidths.set(this.#resizingDepth, this.#resizePendingWidth);
+				this.requestUpdate();
+			}
+			this.#resizePendingWidth = 0;
 			this.#resizingDepth = -1;
 			window.removeEventListener(`pointermove`, this.#onResizeMove);
 			window.removeEventListener(`pointerup`, this.#onResizeEnd);
@@ -41677,7 +43155,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 				this.#handleStandardClick(node, depth, event);
 				break;
 			case `manual`: break;
-			case `checked`: this.#expandNode(node, depth);
+			case `checked`: this.#expandNode(node, depth, true);
 		}
 	}
 	#handleImplicitClick(node, depth) {
@@ -41687,7 +43165,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		this._selectedKeys = /* @__PURE__ */ new Set([node.item.key]);
 		this._selectedNodes.clear();
 		this._selectedNodes.add(node);
-		this.#expandNode(node, depth);
+		this.#expandNode(node, depth, true);
 		if (!previous.has(node)) this.#dispatchSelectEvent(previous);
 	}
 	#handleStandardClick(node, depth, event) {
@@ -41730,16 +43208,22 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		} : void 0;
 		this._selectedByDepth.set(depth, node);
 		this.#lastSelectedNode = node;
-		this.#expandNode(node, depth);
+		this.#expandNode(node, depth, true);
 		if (!previous.has(node) || previous.size !== 1) this.#dispatchSelectEvent(previous);
 	}
-	#expandNode(node, depth) {
+	/**
+	* Open the column for `node`. `immediate` skips the lazy-load debounce: use
+	* it for deliberate clicks, where the user has committed to this node. The
+	* debounce is kept for keyboard navigation, which can sweep over many
+	* branches in quick succession.
+	*/
+	#expandNode(node, depth, immediate = false) {
 		if (node.item.isLeaf) {
 			this._columns = this._columns.slice(0, depth + 1);
 			this.requestUpdate();
 			return;
 		}
-		if (node.children === void 0) this.#loadUnloadedChildren(node, depth, true);
+		if (node.children === void 0) this.#loadUnloadedChildren(node, depth, true, immediate);
 		else {
 			const newColumns = this._columns.slice(0, depth + 1);
 			newColumns.push(node.children);
@@ -41764,10 +43248,11 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 	* own depth: its column for expansions, -1 for a view root (it sits above
 	* column 0, so loaders computing child depth as `depth + 1` stay correct).
 	*/
-	#loadUnloadedChildren(node, parentDepth, fireExpandEvent) {
+	#loadUnloadedChildren(node, parentDepth, fireExpandEvent, immediate = false) {
 		const nodeDepth = parentDepth + 1;
 		this._columns = this._columns.slice(0, nodeDepth);
 		this._loadingDepth = nodeDepth;
+		this.#pendingController?.abort();
 		this.#pendingNode = node;
 		const controller = new AbortController();
 		this.#pendingController = controller;
@@ -41798,15 +43283,20 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			this.requestUpdate();
 		};
 		if (this.model || this.loadChildren) {
-			if (this.#expandTimer !== void 0) clearTimeout(this.#expandTimer);
-			this.#expandTimer = setTimeout(() => {
+			if (this.#expandTimer !== void 0) {
+				clearTimeout(this.#expandTimer);
+				this.#expandTimer = void 0;
+			}
+			const load = () => {
 				this.#expandTimer = void 0;
 				if (this.#pendingNode !== node) return;
 				(this.model ? this.model.getChildren(node, nodeDepth - 1, controller.signal) : collectDataResult(this.loadChildren({
 					node,
 					depth: nodeDepth - 1
 				}, controller.signal), controller.signal)).then((children) => applyChildren([...children])).catch(handleError);
-			}, EXPAND_DEBOUNCE_MS);
+			};
+			if (immediate) load();
+			else this.#expandTimer = setTimeout(load, EXPAND_DEBOUNCE_MS);
 		} else {
 			this._loadingDepth = void 0;
 			this.#pendingNode = void 0;
@@ -41817,10 +43307,12 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		}
 	}
 	#onCheckboxClick(node) {
+		const previous = new Set(this._selectedNodes);
 		const currentlySelected = this._selectedKeys.has(node.item.key);
 		if (!!node.children?.length ? this.#allDescendantsSelected(node) : currentlySelected) this.#applyCheckedToggle(node, false);
 		else this.#applyCheckedToggle(node, true);
 		this.requestUpdate();
+		this.#dispatchSelectEvent(previous);
 	}
 	#allDescendantsSelected(node) {
 		if (!this._selectedKeys.has(node.item.key)) return false;
@@ -41857,7 +43349,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			index
 		};
 	}
-	#scrollNavigatedItemIntoView() {
+	#scrollNavigatedItemIntoView(behavior = `smooth`) {
 		requestAnimationFrame(() => {
 			const tickled = this.#getTickledNodeAndDepth();
 			if (!tickled) return;
@@ -41865,7 +43357,7 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			if (!container) return;
 			container.querySelectorAll(`.item`)[tickled.index]?.scrollIntoView({
 				block: `nearest`,
-				behavior: `smooth`
+				behavior
 			});
 		});
 	}
@@ -41880,9 +43372,67 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 			composed: true
 		}));
 	}
+	/**
+	* Number of items a PageUp/PageDown moves: how many rows fit in the column's
+	* visible area, less one so the previous page's last row stays in view.
+	*/
+	#pageSize(depth) {
+		const content = this.shadowRoot?.querySelectorAll(`.column`)[depth]?.querySelector(`.column-content`);
+		const item = content?.querySelector(`.item`);
+		if (!content || !item || item.offsetHeight === 0) return 10;
+		return Math.max(1, Math.floor(content.clientHeight / item.offsetHeight) - 1);
+	}
+	/**
+	* Move the cursor within column `col` to the index returned by `target`
+	* (given the current cursor index, or -1 when the cursor isn't in this
+	* column, which behaves as "before the first item"). Handles Shift range
+	* extension and anchor seating for `standard` / `vscode` modes.
+	* `scroll` brings the new item into view (for jumps larger than one row).
+	*/
+	#moveCursor(col, currentDepth, event, target, scroll = false) {
+		const current = this.#getTickledNodeAndDepth();
+		const targetIndex = target(current !== void 0 && current.depth === currentDepth ? current.index : -1);
+		const targetNode = col[targetIndex];
+		if (!targetNode) return;
+		this.#setTickledNode(targetNode, currentDepth);
+		if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
+			const prevIndex = current?.index ?? 0;
+			if (event.shiftKey) {
+				if (!this.#anchor || this.#anchor.depth !== currentDepth) {
+					const anchorNode = col[prevIndex];
+					if (anchorNode) this.#anchor = {
+						key: anchorNode.item.key,
+						depth: currentDepth,
+						index: prevIndex,
+						selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : void 0
+					};
+				}
+				if (this.#anchor) {
+					const from = Math.min(this.#anchor.index, targetIndex);
+					const to = Math.max(this.#anchor.index, targetIndex);
+					const rangeKeys = col.slice(from, to + 1).map((n) => n.item.key);
+					if (this.interactionMode === `vscode`) {
+						const snap = this.#anchor.selectionSnapshot;
+						for (const k of rangeKeys) if (snap.has(k)) this._selectedKeys.delete(k);
+						else this._selectedKeys.add(k);
+					} else this._selectedKeys = new Set(rangeKeys);
+				}
+			} else if (this.interactionMode === `standard`) this.#anchor = {
+				key: targetNode.item.key,
+				depth: currentDepth,
+				index: targetIndex
+			};
+			else this.#anchor = void 0;
+		}
+		this.requestUpdate();
+		if (scroll) this.#scrollNavigatedItemIntoView(`auto`);
+	}
 	#onKeyDown;
 	#onResizeStart;
+	#resizeRaf;
+	#resizePendingWidth;
 	#onResizeMove;
+	#applyResizeWidth;
 	#onResizeEnd;
 	#getColumnHeader(depth) {
 		if (depth === 0) return this.#displayRoot?.item.label ?? ``;
@@ -41896,9 +43446,12 @@ let MillerBaseElement = class MillerBaseElement extends LitElement {
 		}
 		return ``;
 	}
+	#explicitWidthStyle(width) {
+		return `width:${width}px;flex-grow:0;flex-shrink:0;flex-basis:auto;max-width:none`;
+	}
 	#columnStyle(depth, isLast) {
 		const w = this.#columnWidths.get(depth);
-		if (w !== void 0) return `width:${w}px;flex-grow:0;flex-shrink:0;flex-basis:auto;max-width:none`;
+		if (w !== void 0) return this.#explicitWidthStyle(w);
 		if (this.stretchLastColumn && isLast) return `width:max-content;flex-grow:1;flex-shrink:0;flex-basis:auto;min-width:0`;
 		return `width:max-content;flex-grow:0;flex-shrink:0;flex-basis:auto`;
 	}
@@ -42148,8 +43701,24 @@ __decorate([state()], MillerBaseElement.prototype, "_selectedNodes", void 0);
 MillerBaseElement = __decorate([safeCustomElement(`ixfx-miller-base`)], MillerBaseElement);
 //#endregion
 //#region src/miller/miller-list.ts
+const HAS_CHECKED = 1;
+const HAS_UNCHECKED = 2;
 /**
-* Recursively compute the checkbox state for a node based on `selectedKeys`.
+* Walk the loaded subtree under `node`, returning which kinds of leaf were
+* seen (`HAS_CHECKED` | `HAS_UNCHECKED`). Stops as soon as both have been
+* seen, since the result can no longer change.
+*/
+function scanCheckState(node, selectedKeys) {
+	if (node.item.isLeaf || !node.children?.length) return selectedKeys.has(node.item.key) ? HAS_CHECKED : HAS_UNCHECKED;
+	let seen = 0;
+	for (const child of node.children) {
+		seen |= scanCheckState(child, selectedKeys);
+		if (seen === 3) break;
+	}
+	return seen;
+}
+/**
+* Compute the checkbox state for a node based on `selectedKeys`.
 *
 * - Unloaded branch (`children === undefined`): treated as a leaf — we can only
 *   report on what is known.
@@ -42158,12 +43727,9 @@ MillerBaseElement = __decorate([safeCustomElement(`ixfx-miller-base`)], MillerBa
 *   indeterminate otherwise.
 */
 function computeCheckboxState(node, selectedKeys) {
-	if (node.item.isLeaf || !node.children?.length) return selectedKeys.has(node.item.key) ? `checked` : `unchecked`;
-	const childStates = node.children.map((c) => computeCheckboxState(c, selectedKeys));
-	const allChecked = childStates.every((s) => s === `checked`);
-	const allUnchecked = childStates.every((s) => s === `unchecked`);
-	if (allChecked) return `checked`;
-	if (allUnchecked) return `unchecked`;
+	const seen = scanCheckState(node, selectedKeys);
+	if (seen === HAS_CHECKED) return `checked`;
+	if (seen === HAS_UNCHECKED) return `unchecked`;
 	return `indeterminate`;
 }
 let MillerListElement = class MillerListElement extends MillerBaseElement {
@@ -50378,9 +51944,12 @@ var TabController = class {
 	}
 	/** The tab's visible label text, excluding any `slot="toolbar"` content. */
 	#labelOf(item) {
-		const clone = item.cloneNode(true);
-		clone.querySelectorAll(`[slot="toolbar"]`).forEach((el) => el.remove());
-		return (clone.textContent ?? ``).trim();
+		let text = ``;
+		for (const node of item.childNodes) {
+			if (node instanceof Element && node.getAttribute(`slot`) === `toolbar`) continue;
+			text += node.textContent ?? ``;
+		}
+		return text.trim();
 	}
 	#registerCommand(tab) {
 		if (!this.#commands) return;
@@ -50497,9 +52066,12 @@ let TabPanelsElement = class TabPanelsElement extends LitElement {
 	}
 	/** The tab's visible label text, excluding any `slot="toolbar"` content. */
 	#labelOf(item) {
-		const clone = item.cloneNode(true);
-		clone.querySelectorAll(`[slot="toolbar"]`).forEach((el) => el.remove());
-		return (clone.textContent ?? ``).trim();
+		let text = ``;
+		for (const node of item.childNodes) {
+			if (node instanceof Element && node.getAttribute(`slot`) === `toolbar`) continue;
+			text += node.textContent ?? ``;
+		}
+		return text.trim();
 	}
 	static {
 		this.styles = css`
@@ -53368,7 +54940,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 });
 	}
@@ -53390,7 +54962,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 ?? [];
 			}