@ixfx/components 0.7.3 → 0.7.5

package/bundle/index.js

@@ -8,8 +8,9 @@ import { createCommandRegistry } from "@clinth/ui-commands";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
-import { Easings } from "@ixfx/modulation";
+import { createRef, ref } from "lit/directives/ref.js";
 import { classMap } from "lit/directives/class-map.js";
+import { Easings } from "@ixfx/modulation";
 import "@clinth/vcanvas";
 import { keyed } from "lit/directives/keyed.js";
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
@@ -752,6 +753,21 @@ var TickledController = class TickledController {
 		return this._tickledId;
 	}
 	/**
+	* The item currently under the cursor, or `undefined`. Alias of `tickledId`
+	* for parity with other controllers.
+	*/
+	get current() {
+		return this._tickledId;
+	}
+	/**
+	* Move the cursor programmatically (e.g. to reveal a match or re-seat it
+	* after the item set changed). Does not change the input mode. Alias of
+	* `setTickled`.
+	*/
+	focus(id) {
+		this.setTickled(id);
+	}
+	/**
 	* Check if a specific item is tickled
 	*/
 	isTickled(id) {
@@ -2384,14 +2400,15 @@ function createIncrSearch(options = {}) {
 }
 //#endregion
 //#region src/incr-search/controller-tree.ts
-const DEFAULT_HIGHLIGHT_KEY = `incr-search-highlight`;
+const DEFAULT_HIGHLIGHT_KEY$1 = `incr-search-highlight`;
 /**
-* Incremental-search controller for any component implementing `TreeSearchHost`
-* (i.e. `ixfx-tree-list`, `ixfx-miller-list`, `ixfx-crumb-navigation`).
+* External-input filter-search controller for `TreeSearchHost` components.
 *
-* Replaces the previous separate `IncrSearchTreeController` / `IncrSearchMillerController`
-* classes — the unified `TreeFilterPredicate` (with depth) means one implementation works
-* for all tree-like components.
+* @deprecated `ixfx-tree-list` / `ixfx-miller-list` now have a built-in
+* incremental-search popover with navigate / select / filter modes — invoke
+* `el.registry.invoke('list.search.filter')` (see `docs/infra-incremental.md`)
+* instead of wiring an external `<input>`. This class remains for existing
+* consumers and covers filter mode only.
 *
 * @example Using with ixfx-tree-list:
 * ```typescript
@@ -2445,7 +2462,7 @@ var IncrSearchTreeController = class {
 			this.#opts.input.removeEventListener(`keydown`, this.#onKeydown);
 		}
 		this.#el.filterPredicate = void 0;
-		clearHighlights({ key: this.#opts.highlightKey ?? DEFAULT_HIGHLIGHT_KEY });
+		clearHighlights({ key: this.#opts.highlightKey ?? DEFAULT_HIGHLIGHT_KEY$1 });
 		this.#labelMap.clear();
 	}
 	async setQuery(query) {
@@ -2468,7 +2485,7 @@ var IncrSearchTreeController = class {
 		const matched = new Set(state.results.map((r) => r.item.node.item.key));
 		const hasQuery = state.query.trim().length > 0;
 		this.#el.filterPredicate = hasQuery && matched.size > 0 ? (node, _depth) => matched.has(node.item.key) : void 0;
-		const key = this.#opts.highlightKey ?? DEFAULT_HIGHLIGHT_KEY;
+		const key = this.#opts.highlightKey ?? DEFAULT_HIGHLIGHT_KEY$1;
 		if (!this.#el.shadowRoot) return;
 		if (!state.query.trim()) {
 			clearHighlights({ key });
@@ -2482,11 +2499,149 @@ var IncrSearchTreeController = class {
 	}
 };
 //#endregion
+//#region src/interaction/keyed-list.ts
+/**
+* Helpers for key-based selection on the Element-flavoured list components
+* (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-grid-list`).
+*
+* A "key" is a stable string the host puts on each item element — `data-key`
+* (preferred) or `data-value`. It survives the host rebuilding the item set
+* (re-fetch, re-sort, filter) where raw `Element` references do not.
+*/
+/**
+* The stable key for an item element: `data-key`, then `data-value`, else
+* `undefined`.
+*/
+function keyForElement(el) {
+	return el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? void 0;
+}
+/**
+* A lazily-built key → element index over a container. Rebuilt on first use
+* and after any child-list mutation under `root`; `invalidate()` forces a
+* rebuild on the next `get()`.
+*
+* ```ts
+* #keyIndex = new KeyedElementIndex(this);
+* // ...
+* const el = this.#keyIndex.get(`row-42`);
+* // on disconnect:
+* this.#keyIndex.dispose();
+* ```
+*/
+var KeyedElementIndex = class {
+	#root;
+	#selector;
+	#map = /* @__PURE__ */ new Map();
+	#dirty = true;
+	#observer;
+	/**
+	* @param root Container whose descendants are indexed.
+	* @param itemSelector Which descendants count as items (default: any `[data-key]`).
+	*/
+	constructor(root, itemSelector = `[data-key]`) {
+		this.#root = root;
+		this.#selector = itemSelector;
+		this.#observer = new MutationObserver(() => {
+			this.#dirty = true;
+		});
+		this.#observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+	}
+	/** The element with this key, or `undefined`. First match wins on duplicates. */
+	get(key) {
+		if (this.#dirty) this.#rebuild();
+		return this.#map.get(key);
+	}
+	/** Force a rebuild on the next `get()` — e.g. after a `data-key` attribute change. */
+	invalidate() {
+		this.#dirty = true;
+	}
+	/** Stop observing and drop the cache. */
+	dispose() {
+		this.#observer.disconnect();
+		this.#map.clear();
+	}
+	#rebuild() {
+		this.#map.clear();
+		for (const el of this.#root.querySelectorAll(this.#selector)) {
+			const key = keyForElement(el);
+			if (key !== void 0 && !this.#map.has(key)) this.#map.set(key, el);
+		}
+		this.#dirty = false;
+	}
+};
+//#endregion
+//#region src/incr-search/element-list-search-adapter.ts
+function defaultLabel(el) {
+	return el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``;
+}
+/**
+* A {@link ListSearchAdapter} over the light-DOM item elements of a list
+* component. Filter mode toggles `hidden` (only on elements it hid itself, so a
+* consumer's own `hidden` items are left alone). Highlights are painted on the
+* item elements in the light DOM — the consuming page styles
+* `::highlight(<highlightKey>)`. See `docs/infra-incremental.md`.
+*/
+function createElementListSearchAdapter(host, options = {}) {
+	const itemSelector = options.itemSelector ?? `:scope > *`;
+	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));
+	return {
+		getItems: items,
+		getLabel,
+		getKey,
+		focusItem: (el) => {
+			if (el) host.focusKey(getKey(el));
+		},
+		activateItem: (el) => {
+			el.dispatchEvent(new MouseEvent(`click`, {
+				bubbles: true,
+				composed: true
+			}));
+		},
+		selectItems: (els) => {
+			host.selectKeys(els.map(getKey));
+		},
+		applyFilter: (matched) => {
+			if (matched === void 0) {
+				for (const el of hidden) el.hidden = false;
+				hidden.clear();
+				return;
+			}
+			for (const el of items()) if (matched.has(getKey(el))) {
+				if (hidden.delete(el)) el.hidden = false;
+			} else {
+				el.hidden = true;
+				hidden.add(el);
+			}
+		},
+		highlightRoot: () => host,
+		highlightSelector: itemSelector,
+		highlightKeyOf: (el) => getKey(el),
+		highlightText: getLabel,
+		highlightKey: options.highlightKey,
+		container: () => host
+	};
+}
+//#endregion
 //#region src/incr-search/element-search.ts
 const defaultGetLabel = (el) => el.textContent?.trim() ?? ``;
 function defaultGetKey(el) {
 	return el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? el.textContent?.trim() ?? ``;
 }
+/**
+* DOM filter-search over a container's item elements (sets `hidden` on
+* non-matches, applies highlights).
+*
+* @deprecated The list components (`ixfx-grid-list`, `ixfx-vertical-list`,
+* `ixfx-detail-list`, …) now have a built-in navigate / select / filter search
+* popover — see `docs/infra-incremental.md` and `ListSearchController`. Kept for
+* standalone / non-component use.
+*/
 function createElementIncrSearch(opts) {
 	const { container, itemSelector, getLabel = defaultGetLabel, getKey = defaultGetKey, labelSelector, highlightKey } = opts;
 	let elementByKey = /* @__PURE__ */ new Map();
@@ -2560,6 +2715,512 @@ function createElementIncrSearch(opts) {
 	};
 }
 //#endregion
+//#region src/incr-search/list-search-commands.ts
+/** Command ids registered by {@link registerListSearchCommands}, keyed by mode. */
+const LIST_SEARCH_COMMAND_IDS = {
+	navigate: `list.search.navigate`,
+	select: `list.search.select`,
+	filter: `list.search.filter`
+};
+const LABELS = {
+	navigate: {
+		label: `Find`,
+		description: `Type to move the cursor to the best match`
+	},
+	select: {
+		label: `Find & Select`,
+		description: `Type to select every matching item`
+	},
+	filter: {
+		label: `Filter`,
+		description: `Type to hide items that don't match`
+	}
+};
+/**
+* Register one command per mode the controller offers (see
+* `controller.registeredModes`). Each command opens the search popover in its
+* mode. Returns a function that unregisters them again — call it from
+* `disconnectedCallback`. See `docs/infra-incremental.md`.
+*/
+function registerListSearchCommands(registry, controller, options = {}) {
+	const id = (mode) => options.idPrefix ? `${options.idPrefix}.search.${mode}` : LIST_SEARCH_COMMAND_IDS[mode];
+	const registered = [];
+	for (const mode of controller.registeredModes) {
+		const commandId = id(mode);
+		if (registry.has(commandId)) continue;
+		registry.register({
+			id: commandId,
+			label: LABELS[mode].label,
+			description: LABELS[mode].description,
+			execute: () => controller.open(mode)
+		});
+		registered.push(commandId);
+	}
+	return () => {
+		for (const commandId of registered) registry.unregister(commandId);
+	};
+}
+//#endregion
+//#region src/incr-search/list-search-controller.ts
+/** Canonical order — used for the switch-row and to normalise a requested set. */
+const LIST_SEARCH_MODES = [
+	`navigate`,
+	`select`,
+	`filter`
+];
+const DEFAULT_HIGHLIGHT_KEY = `incr-search-highlight`;
+const INPUT_CLASS = `list-search-input`;
+/**
+* Shared brain for the three-mode incremental-search popover. A Lit
+* `ReactiveController`: the host adds `listSearchStyles` to `static styles`,
+* drops `${controller.renderField()}` into `render()`, and registers the
+* commands with {@link registerListSearchCommands}. See `docs/infra-incremental.md`.
+*/
+var ListSearchController = class {
+	#host;
+	#adapter;
+	#modes;
+	#placeholder;
+	#search;
+	#unsub;
+	#observer;
+	#itemByKey = /* @__PURE__ */ new Map();
+	#open = false;
+	#mode = `filter`;
+	#query = ``;
+	#matchIndex = 0;
+	#matches = [];
+	/** Whether a filter has been pushed to the adapter and still needs undoing. */
+	#filterActive = false;
+	constructor(host, options) {
+		this.#host = host;
+		host.addController(this);
+		this.#adapter = options.adapter;
+		const requested = new Set(options.modes ?? LIST_SEARCH_MODES);
+		this.#modes = LIST_SEARCH_MODES.filter((m) => requested.has(m));
+		this.#mode = this.#modes[0] ?? `filter`;
+		this.#placeholder = options.placeholder ?? `Search…`;
+		this.#search = createIncrSearch({
+			selector: (i) => i.label,
+			fzf: options.fzf
+		});
+		this.#unsub = this.#search.onChange((state) => this.#onState(state));
+	}
+	/** `false` when no modes are available — the host should register no commands and render no field. */
+	get enabled() {
+		return this.#modes.length > 0;
+	}
+	/** The modes actually offered (component capability ∩ consumer request). */
+	get registeredModes() {
+		return this.#modes;
+	}
+	/**
+	* Replace the offered mode set (normalised to {@link LIST_SEARCH_MODES}
+	* order). If the current mode is dropped the popover closes and falls back to
+	* the first remaining mode. Callers should re-run
+	* {@link registerListSearchCommands} afterwards.
+	*/
+	setModes(modes) {
+		const set = new Set(modes);
+		this.#modes = LIST_SEARCH_MODES.filter((m) => set.has(m));
+		if (!this.#modes.includes(this.#mode)) {
+			if (this.#open) this.close();
+			this.#mode = this.#modes[0] ?? `filter`;
+		}
+		this.#host.requestUpdate();
+	}
+	get isOpen() {
+		return this.#open;
+	}
+	get mode() {
+		return this.#mode;
+	}
+	get query() {
+		return this.#query;
+	}
+	get matchCount() {
+		return this.#matches.length;
+	}
+	get matchIndex() {
+		return this.#matchIndex;
+	}
+	hostConnected() {
+		const container = this.#adapter.container?.();
+		if (container) {
+			this.#observer = new MutationObserver(() => this.refresh());
+			this.#observer.observe(container, {
+				childList: true,
+				subtree: false
+			});
+		}
+		this.refresh();
+	}
+	hostDisconnected() {
+		this.#observer?.disconnect();
+		this.#observer = void 0;
+		if (this.#open) this.#teardownEffects();
+		this.#open = false;
+		this.#unsub?.();
+		this.#unsub = void 0;
+		this.#search.dispose();
+	}
+	/** Open the popover in `mode` (clamped to the available set). */
+	open(mode) {
+		if (!this.enabled) return;
+		this.#mode = this.#modes.includes(mode) ? mode : this.#modes[0];
+		this.#open = true;
+		this.#query = ``;
+		this.#matchIndex = 0;
+		this.#matches = [];
+		this.refresh();
+		this.#search.setQuery(``);
+		this.#host.requestUpdate();
+		this.#host.updateComplete.then(() => this.#focusInput());
+	}
+	/** Close the popover, restoring any live filter. Selection / cursor stay put. */
+	close() {
+		if (!this.#open) return;
+		this.#open = false;
+		this.#teardownEffects();
+		this.#query = ``;
+		this.#matches = [];
+		this.#search.clearQuery();
+		this.#host.requestUpdate();
+		this.#host.focus();
+	}
+	setQuery(query) {
+		this.#query = query;
+		this.#matchIndex = 0;
+		this.#search.setQuery(query);
+	}
+	/** Re-interpret the current query under a new mode (undoing the old mode's effect). */
+	switchMode(next) {
+		if (!this.#modes.includes(next) || next === this.#mode) return;
+		if (this.#mode === `filter` && this.#filterActive) {
+			this.#adapter.applyFilter(void 0);
+			this.#filterActive = false;
+		}
+		this.#mode = next;
+		this.#applyMode();
+		this.#host.requestUpdate();
+		this.#host.updateComplete.then(() => this.#focusInput());
+	}
+	/** One-shot: turn the current match set into the selection, staying in the current mode. */
+	selectMatches() {
+		if (!this.#modes.includes(`select`)) return;
+		this.#adapter.selectItems(this.#currentItems());
+		this.#host.requestUpdate();
+	}
+	nextMatch() {
+		this.#cycle(1);
+	}
+	prevMatch() {
+		this.#cycle(-1);
+	}
+	/** Enter: in `navigate` activate the current match; then close. */
+	commit() {
+		if (this.#mode === `navigate`) {
+			const item = this.#itemFor(this.#matches[this.#matchIndex]);
+			if (item) {
+				if (this.#adapter.activateItem) this.#adapter.activateItem(item);
+				else this.#adapter.focusItem(item);
+			}
+		}
+		this.close();
+	}
+	/** Rebuild the searchable item set from the adapter. Called on open and on container mutation. */
+	refresh() {
+		this.#itemByKey.clear();
+		const items = [];
+		for (const it of this.#adapter.getItems()) {
+			const key = this.#adapter.getKey(it);
+			this.#itemByKey.set(key, it);
+			items.push({
+				key,
+				label: this.#adapter.getLabel(it)
+			});
+		}
+		this.#search.setItems(items);
+	}
+	/** Popover markup. Pair with `listSearchStyles` in the host's `static styles`. */
+	renderField() {
+		if (!this.enabled) return A;
+		const hasQuery = this.#query.trim().length > 0;
+		const others = this.#modes.filter((m) => m !== this.#mode);
+		const showSelectMatches = this.#modes.includes(`select`) && this.#mode !== `select`;
+		return b`
+      <div class="list-search" part="search" ?hidden=${!this.#open}>
+        <div class="list-search-row">
+          <span class="list-search-mode">${this.#mode}</span>
+          <input
+            class=${INPUT_CLASS}
+            type="text"
+            part="search-input"
+            placeholder=${this.#placeholder}
+            .value=${this.#query}
+            @input=${this.#onInput}
+            @keydown=${this.#onKeydown}
+          />
+          ${hasQuery ? b`<span class="list-search-count">${this.#matches.length === 0 ? `0` : this.#matchIndex + 1} / ${this.#matches.length}</span>` : A}
+          ${this.#mode === `navigate` && this.#matches.length > 1 ? b`
+                <button class="list-search-icon-btn" title="Previous match (↑)" @click=${() => this.prevMatch()}>‹</button>
+                <button class="list-search-icon-btn" title="Next match (↓)" @click=${() => this.nextMatch()}>›</button>
+              ` : A}
+          <button class="list-search-icon-btn" title="Close (Esc)" @click=${() => this.close()}>✕</button>
+        </div>
+        ${others.length > 0 || showSelectMatches ? b`
+              <div class="list-search-switch">
+                ${others.map((m) => b`<button class="list-search-btn" @click=${() => this.switchMode(m)}>${m}</button>`)}
+                ${showSelectMatches ? b`<button class="list-search-btn" @click=${() => this.selectMatches()}>Select matches</button>` : A}
+              </div>
+            ` : A}
+      </div>
+    `;
+	}
+	#focusInput() {
+		this.#host.renderRoot?.querySelector(`.${INPUT_CLASS}`)?.focus();
+	}
+	#onInput = (e) => {
+		this.setQuery(e.target.value);
+	};
+	#onKeydown = (e) => {
+		switch (e.key) {
+			case `Escape`:
+				e.preventDefault();
+				e.stopPropagation();
+				this.close();
+				break;
+			case `Enter`:
+				e.preventDefault();
+				e.stopPropagation();
+				this.commit();
+				break;
+			case `ArrowDown`:
+				if (this.#mode === `navigate`) {
+					e.preventDefault();
+					this.nextMatch();
+				}
+				break;
+			case `ArrowUp`: if (this.#mode === `navigate`) {
+				e.preventDefault();
+				this.prevMatch();
+			}
+		}
+	};
+	#cycle(delta) {
+		if (this.#matches.length === 0) return;
+		const n = this.#matches.length;
+		this.#matchIndex = (this.#matchIndex + delta + n) % n;
+		if (this.#mode === `navigate`) this.#adapter.focusItem(this.#itemFor(this.#matches[this.#matchIndex]));
+		this.#host.requestUpdate();
+	}
+	#itemFor(match) {
+		return match ? this.#itemByKey.get(match.item.key) : void 0;
+	}
+	#currentItems() {
+		return this.#matches.map((m) => this.#itemFor(m)).filter((x) => x !== void 0);
+	}
+	get #highlightKey() {
+		return this.#adapter.highlightKey ?? DEFAULT_HIGHLIGHT_KEY;
+	}
+	#onState(state) {
+		if (!this.#open) return;
+		const hasQuery = state.query.trim().length > 0;
+		this.#matches = hasQuery ? [...state.results] : [];
+		if (this.#matchIndex >= this.#matches.length) this.#matchIndex = 0;
+		this.#applyMode();
+		this.#host.requestUpdate();
+	}
+	#applyMode() {
+		if (!(this.#query.trim().length > 0)) {
+			if (this.#filterActive) {
+				this.#adapter.applyFilter(void 0);
+				this.#filterActive = false;
+			}
+			this.#applyHighlights();
+			return;
+		}
+		switch (this.#mode) {
+			case `navigate`:
+				this.#adapter.focusItem(this.#itemFor(this.#matches[this.#matchIndex]));
+				break;
+			case `select`:
+				this.#adapter.selectItems(this.#currentItems());
+				break;
+			case `filter`:
+				this.#adapter.applyFilter(new Set(this.#matches.map((m) => m.item.key)));
+				this.#filterActive = true;
+		}
+		this.#applyHighlights();
+	}
+	#applyHighlights() {
+		const root = this.#adapter.highlightRoot?.();
+		const selector = this.#adapter.highlightSelector;
+		const keyOf = this.#adapter.highlightKeyOf;
+		if (!root || !selector || !keyOf) return;
+		if (this.#query.trim().length === 0) {
+			clearHighlights({ key: this.#highlightKey });
+			return;
+		}
+		const state = this.#search.state;
+		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;
+		}, this.#adapter.highlightText ?? ((el) => el.textContent ?? ``));
+		try {
+			applyHighlights(targets, { key: this.#highlightKey });
+		} catch {
+			clearHighlights({ key: this.#highlightKey });
+		}
+	}
+	#teardownEffects() {
+		if (this.#filterActive) {
+			this.#adapter.applyFilter(void 0);
+			this.#filterActive = false;
+		}
+		clearHighlights({ key: this.#highlightKey });
+	}
+};
+//#endregion
+//#region src/incr-search/list-search-styles.ts
+/**
+* Styles for the incremental-search popover rendered by
+* `ListSearchController.renderField()`. Add to a component's `static styles`;
+* the class names are the contract between this fragment and `renderField()`.
+*
+* The host must give the popover a positioned ancestor (a wrapper with
+* `position: relative`, or `:host { position: relative }`). Tunables:
+* `--list-search-inset` (default `8px`) offsets it from the top-right corner.
+*
+* See `docs/infra-incremental.md`.
+*/
+const listSearchStyles = i$3`
+  .list-search {
+    position: absolute;
+    top: var(--list-search-inset, 8px);
+    right: var(--list-search-inset, 8px);
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 6px;
+    box-sizing: border-box;
+    background: var(--surface-4, #2a2a2a);
+    color: var(--surface-3-text, inherit);
+    border: 1px solid var(--border, #444);
+    border-radius: var(--radius-m, 6px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
+    font-size: var(--text-s, 0.85em);
+  }
+
+  .list-search[hidden] {
+    display: none;
+  }
+
+  .list-search-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .list-search-mode {
+    flex: none;
+    padding: 1px 7px;
+    border-radius: 999px;
+    font-weight: 600;
+    text-transform: capitalize;
+    background: var(--accent, #60a5fa);
+    color: var(--accent-text, #000);
+  }
+
+  .list-search-input {
+    flex: 1;
+    min-width: 140px;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: inherit;
+    font: inherit;
+  }
+
+  .list-search-count {
+    flex: none;
+    opacity: 0.6;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+  }
+
+  .list-search-switch {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  .list-search-btn {
+    padding: 1px 7px;
+    background: var(--surface-3, #333);
+    color: inherit;
+    border: 1px solid var(--border, #444);
+    border-radius: var(--radius-s, 4px);
+    cursor: pointer;
+    font: inherit;
+    text-transform: capitalize;
+  }
+
+  .list-search-btn:hover {
+    background: var(--item-bg-tickled, #444);
+  }
+
+  .list-search-icon-btn {
+    flex: none;
+    padding: 0 2px;
+    background: transparent;
+    border: none;
+    color: var(--surface-muted-text, #888);
+    cursor: pointer;
+    font-size: 1.1em;
+    line-height: 1;
+  }
+
+  .list-search-icon-btn:hover {
+    color: inherit;
+  }
+`;
+//#endregion
+//#region src/incr-search/tree-list-search-adapter.ts
+/**
+* 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
+* sets `filterPredicate`. The item set is the whole tree — `getNodes()` returns
+* every node regardless of expansion or an active filter — so refining a query
+* can always re-surface a node. See `docs/infra-incremental.md`.
+*/
+function createTreeListSearchAdapter(host, options = {}) {
+	return {
+		getItems: () => host.getNodes(),
+		getLabel: options.getLabel ?? ((item) => item.node.item.label),
+		getKey: (item) => item.node.item.key,
+		focusItem: (item) => {
+			if (item) host.revealKey(item.node.item.key);
+		},
+		activateItem: (item) => {
+			host.revealKey(item.node.item.key);
+			host.select(item.node);
+		},
+		selectItems: (items) => {
+			host.selectMany(items.map((i) => i.node));
+		},
+		applyFilter: (matched) => {
+			host.filterPredicate = matched === void 0 ? void 0 : (node) => matched.has(node.item.key);
+		},
+		highlightRoot: () => host.shadowRoot,
+		highlightSelector: options.labelSelector ?? `.tree-label`,
+		highlightKeyOf: (el) => el.closest(`[data-key]`)?.dataset.key,
+		highlightKey: options.highlightKey
+	};
+}
+//#endregion
 //#region src/ac-token/ac-token.ts
 const DEFAULT_TOKENIZER = (text) => text.split(/[\s,;]+/);
 function makeLruCache(maxSize) {
@@ -3861,6 +4522,114 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/list-item-animation.ts
+/**
+* Shared insertion / removal animation for the list & tree components.
+*
+* Two flavours, because the components split into two layout families:
+*
+* - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —
+*   rows sit in normal flow, so a new row can collapse in from zero height and a
+*   leaving row can collapse back to zero, and the rows around it slide to make
+*   or close the gap for free. Use {@link animateListItemIn} /
+*   {@link animateListItemOut} (Web Animations API, exact measured sizes).
+*
+* - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are
+*   absolutely positioned (`transform` / `top`), so collapsing a row's box moves
+*   nothing. Those components instead fade the entering / leaving row with the
+*   {@link listItemFadeKeyframes} keyframes and slide the survivors by
+*   transitioning their position for a short window after the change.
+*
+* Everything here is a no-op under `prefers-reduced-motion: reduce`.
+*/
+/** Default duration (ms) for both flavours; overridable per call / per component. */
+const LIST_ITEM_MOTION_MS = 200;
+function prefersReducedMotion() {
+	return typeof window !== `undefined` && typeof window.matchMedia === `function` && window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+}
+/**
+* Opacity keyframes for the virtualised components. Each one adds its own
+* one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to
+* these, plus a `prefers-reduced-motion` guard on its own selectors.
+*/
+const listItemFadeKeyframes = i$3`
+  @keyframes ixfx-list-item-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes ixfx-list-item-out {
+    from { opacity: 1; }
+    to { opacity: 0; }
+  }
+`;
+function measure(el, axis) {
+	const rect = el.getBoundingClientRect();
+	return axis === `inline` ? rect.width : rect.height;
+}
+function resolveDuration(el, explicit) {
+	if (explicit !== void 0) return explicit;
+	const raw = getComputedStyle(el).getPropertyValue(`--ixfx-list-item-move-duration`).trim();
+	if (raw) {
+		const n = Number.parseFloat(raw);
+		if (!Number.isNaN(n)) return raw.endsWith(`ms`) ? n : raw.endsWith(`s`) ? n * 1e3 : n;
+	}
+	return 200;
+}
+function collapsedFrame(axis) {
+	const prop = axis === `inline` ? `width` : `height`;
+	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
+	return {
+		[prop]: `0px`,
+		[minProp]: `0px`,
+		opacity: 0,
+		overflow: `hidden`
+	};
+}
+function fullFrame(size, axis) {
+	const prop = axis === `inline` ? `width` : `height`;
+	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
+	return {
+		[prop]: `${size}px`,
+		[minProp]: `0px`,
+		opacity: 1,
+		overflow: `hidden`
+	};
+}
+/**
+* Collapse + fade `el` in from nothing to its natural size. Call it just after
+* the element has been inserted (it must already be laid out at full size so it
+* can be measured). No-op under reduced motion.
+*/
+function animateListItemIn(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
+	const { axis = `block`, easing = `ease` } = options;
+	const duration = resolveDuration(el, options.duration);
+	const size = measure(el, axis);
+	if (size <= 0) return void 0;
+	return el.animate([collapsedFrame(axis), fullFrame(size, axis)], {
+		duration,
+		easing
+	});
+}
+/**
+* Collapse + fade `el` out. Resolves once the animation finishes (or straight
+* away under reduced motion); the caller detaches the element after. The final
+* collapsed state is held (`fill: forwards`) so there's no flash back to full
+* size in the gap before removal.
+*/
+function animateListItemOut(el, options = {}) {
+	if (prefersReducedMotion()) return Promise.resolve();
+	const { axis = `block`, easing = `ease` } = options;
+	const duration = resolveDuration(el, options.duration);
+	const size = measure(el, axis);
+	if (size <= 0) return Promise.resolve();
+	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
+		duration,
+		easing,
+		fill: `forwards`
+	}).finished.then(() => void 0, () => void 0);
+}
+//#endregion
 //#region src/interaction/list-selection-controller.ts
 /** Whether the interaction mode allows building a multi-item selection. */
 function isMultiMode(mode) {
@@ -3901,6 +4670,20 @@ var ListSelectionController = class {
 	get selected() {
 		return this.#selected;
 	}
+	/**
+	* The current selection as stable string keys (read-only). Empty unless a
+	* `getKey` was supplied in config. Items whose `getKey` returns `undefined`
+	* are omitted.
+	*/
+	get selectedKeys() {
+		const getKey = this.#config.getKey;
+		const out = /* @__PURE__ */ new Set();
+		if (getKey) for (const item of this.#selected) {
+			const key = getKey(item);
+			if (key !== void 0) out.add(key);
+		}
+		return out;
+	}
 	/** Anchor for range (shift) selection — the last plainly-selected item. */
 	get anchor() {
 		return this.#anchor;
@@ -3984,6 +4767,66 @@ var ListSelectionController = class {
 		next.delete(item);
 		this.#apply(next);
 	}
+	/**
+	* Whether the current modes permit a selection of more than one item.
+	* Stricter than `canSelectMultiple()`: `standard` / `implicit` only count
+	* as multi when `selectionMode="multiple"`.
+	*/
+	#effectiveMulti() {
+		const { selectionMode, interactionMode } = this.#config.getModes();
+		return selectionMode === `multiple` || interactionMode === `checked` || interactionMode === `sticky` || interactionMode === `vscode`;
+	}
+	/**
+	* Replace the selection with the items resolved from `keys`. Keys that
+	* `resolve` cannot map, or that resolve to a non-selectable item, are
+	* ignored. `selectionMode="none"` is a no-op. When multi-select is not
+	* available, only the last resolvable key is kept. `onChange` fires once.
+	*/
+	selectKeys(keys, resolve) {
+		if (this.#config.getModes().selectionMode === `none`) return;
+		let next = /* @__PURE__ */ new Set();
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && this.#config.isSelectable(item)) next.add(item);
+		}
+		if (!this.#effectiveMulti() && next.size > 1) {
+			const last = [...next].at(-1);
+			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
+		}
+		this.#anchor = [...next].at(-1);
+		this.#apply(next);
+	}
+	/**
+	* Add the items resolved from `keys` to the selection (multi-select only;
+	* a no-op otherwise). `onChange` fires once if anything changed.
+	*/
+	addKeys(keys, resolve) {
+		if (!this.#effectiveMulti()) return;
+		const next = new Set(this.#selected);
+		let changed = false;
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && !next.has(item) && this.#config.isSelectable(item)) {
+				next.add(item);
+				changed = true;
+			}
+		}
+		if (changed) this.#apply(next);
+	}
+	/**
+	* Remove the items resolved from `keys` from the selection. `onChange`
+	* fires once if anything changed.
+	*/
+	removeKeys(keys, resolve) {
+		if (this.#selected.size === 0) return;
+		const next = new Set(this.#selected);
+		let changed = false;
+		for (const key of new Set(keys)) {
+			const item = resolve(key);
+			if (item !== void 0 && next.delete(item)) changed = true;
+		}
+		if (changed) this.#apply(next);
+	}
 	/** Route a click on `item` according to the current interaction mode. */
 	handleClick(item, gesture) {
 		const { selectionMode, interactionMode: mode } = this.#config.getModes();
@@ -8285,6 +9128,16 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i {
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
+	/** `TreeComponent` parity — a crumb path always follows the selection, so this just navigates to `key`. */
+	revealKey(key) {
+		return this.navigateToNode((n) => n.item.key === key);
+	}
+	/** `TreeComponent` parity — a crumb path is a single selection, so only the last node is kept. */
+	selectMany(nodes) {
+		const last = [...nodes].at(-1);
+		if (last) this.select(last);
+		else this.clearSelection();
+	}
 	#findNodePath(nodes, predicate, prefix = []) {
 		for (const node of nodes) {
 			const path = [...prefix, node.item.key];
@@ -10772,6 +11625,7 @@ let DataGridElement = class DataGridElement extends i {
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
+		this.columnMenu = `auto`;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
@@ -10794,10 +11648,18 @@ let DataGridElement = class DataGridElement extends i {
 		this._sortedRows = [];
 		this._flat = [];
 		this._flatKeys = [];
+		this.#searchKeyByRow = /* @__PURE__ */ new Map();
+		this.search = new ListSearchController(this, { adapter: this.#createSearchAdapter() });
+		this.#prevFlatKeys = [];
+		this.#enteringRowKeys = /* @__PURE__ */ new Set();
+		this.#rowReflowTimer = 0;
+		this.#dataGridRenderedOnce = false;
 		this._visibleColumns = [];
 		this._colOffsets = [];
 		this._colWidthSum = 0;
 		this._raf = 0;
+		this.#appendInProgress = false;
+		this.#resortRaf = 0;
 		this._drag = null;
 		this._onFocusOut = (e) => {
 			if (this._suppressBlurCommit) return;
@@ -10992,6 +11854,8 @@ let DataGridElement = class DataGridElement extends i {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listItemFadeKeyframes,
+			listSearchStyles,
 			i$3`
     :host {
       --data-grid-row-height: 28px;
@@ -11000,6 +11864,7 @@ let DataGridElement = class DataGridElement extends i {
       --data-grid-header-bg: var(--surface-2);
       --data-grid-border: var(--border);
       --data-grid-header-text: var(--surface-3-text);
+      position: relative;
       display: block;
       overflow: hidden;
       border: var(--data-grid-border);
@@ -11048,6 +11913,22 @@ let DataGridElement = class DataGridElement extends i {
     .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
     .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
     .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
+
+    /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
+       the row set changes — do rows slide (their top transitions) to make or
+       close a gap; a freshly inserted row also fades in. Kept scoped so it
+       never fires while scrolling the virtualised list. */
+    :host([reflowing]) .row.item,
+    :host([reflowing]) .group-row {
+      transition: top var(--data-grid-row-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1);
+    }
+    .row.item.entering {
+      animation: ixfx-list-item-in var(--data-grid-row-move-duration, 200ms) ease both;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([reflowing]) .row.item, :host([reflowing]) .group-row { transition: none; }
+      .row.item.entering { animation: none; }
+    }
     .cell {
       flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-s);
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: var(--border-subtle);
@@ -11077,17 +11958,89 @@ let DataGridElement = class DataGridElement extends i {
   `
 		];
 	}
+	#searchRegistry;
+	#unregisterSearchCommands;
+	#searchKeyByRow;
+	/** Command registry carrying this grid's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#rowSearchText(row) {
+		if (this.rowSearchText) return this.rowSearchText(row);
+		const rec = row;
+		return this._visibleColumns.map((c) => String(rec[c.key] ?? ``)).join(` `);
+	}
+	#createSearchAdapter() {
+		return {
+			getItems: () => {
+				this.#searchKeyByRow.clear();
+				this._sortedRows.forEach((r, i) => this.#searchKeyByRow.set(r, this.getRowKey(r, i)));
+				return this._sortedRows;
+			},
+			getLabel: (row) => this.#rowSearchText(row),
+			getKey: (row) => this.#searchKeyByRow.get(row) ?? String(this._sortedRows.indexOf(row)),
+			focusItem: (row) => {
+				if (row === void 0) return;
+				const key = this.#searchKeyByRow.get(row);
+				if (key !== void 0) this.tickleRow(key);
+			},
+			selectItems: (rows) => {
+				this.selectKeys(rows.map((r) => this.#searchKeyByRow.get(r)).filter((k) => k !== void 0));
+			},
+			applyFilter: (matched) => {
+				this.filterPredicate = matched === void 0 ? void 0 : (row) => {
+					const k = this.#searchKeyByRow.get(row);
+					return k === void 0 || matched.has(k);
+				};
+			}
+		};
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
+	/** Row-key snapshot from the previous update, for the insertion / removal animation. */
+	#prevFlatKeys;
+	#enteringRowKeys;
+	#rowReflowTimer;
+	#dataGridRenderedOnce;
+	#appendInProgress;
+	#resortRaf;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`focusout`, this._onFocusOut);
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`focusout`, this._onFocusOut);
 		cancelAnimationFrame(this._raf);
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
+		if (this.#rowReflowTimer) {
+			clearTimeout(this.#rowReflowTimer);
+			this.#rowReflowTimer = 0;
+		}
+	}
+	/**
+	* Dispatch a command to this grid — routes through the command registry so
+	* `list.search.*` (and any other registered commands) work.
+	*/
+	dispatch(commandId, args) {
+		this.#searchRegistry?.invoke(commandId, args);
 	}
 	firstUpdated() {
 		new ResizeObserver(() => {
@@ -11114,8 +12067,11 @@ let DataGridElement = class DataGridElement extends i {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
-		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
-		this._rebuildFlat();
+		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._visibleColumns = this.columns.filter((c) => c.visible !== false);
 		let off = 0;
 		this._colOffsets = this._visibleColumns.map((c) => {
@@ -11125,6 +12081,40 @@ let DataGridElement = class DataGridElement extends i {
 		});
 		this._colWidthSum = off;
 		if (this.interactionMode === `checked`) this._colWidthSum += 28;
+		this.#noteFlatMutation();
+	}
+	/**
+	* Diff the row-key list against the previous update. Rows that appeared get an
+	* enter fade; any add/remove opens a short `[reflowing]` window so the rows
+	* that shift slide (their `top` transitions) instead of snapping. Bounded in
+	* time so it never bleeds into scroll virtualisation.
+	*/
+	#noteFlatMutation() {
+		const now = this._flatKeys;
+		const prev = this.#prevFlatKeys;
+		this.#prevFlatKeys = now.slice();
+		if (!this.#dataGridRenderedOnce) {
+			this.#dataGridRenderedOnce = true;
+			return;
+		}
+		if (prev.length === 0 || now.length === 0) {
+			this.#enteringRowKeys.clear();
+			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;
+		this.#enteringRowKeys = new Set(added);
+		this.toggleAttribute(`reflowing`, true);
+		if (this.#rowReflowTimer) clearTimeout(this.#rowReflowTimer);
+		this.#rowReflowTimer = window.setTimeout(() => {
+			this.#rowReflowTimer = 0;
+			this.#enteringRowKeys.clear();
+			this.toggleAttribute(`reflowing`, false);
+			this.requestUpdate();
+		}, 320);
 	}
 	_getGroupKey(row) {
 		if (!this.groupBy) return null;
@@ -11132,18 +12122,23 @@ let DataGridElement = class DataGridElement extends i {
 		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 = this._sortedRows.map((r, i) => ({
-				type: `row`,
-				key: this.getRowKey(r, i),
-				row: r,
-				idx: i
-			}));
+			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 this._sortedRows) {
+		for (const r of source) {
 			const k = this._getGroupKey(r) ?? ``;
 			const arr = groups.get(k);
 			if (arr) arr.push(r);
@@ -11372,6 +12367,102 @@ let DataGridElement = class DataGridElement extends i {
 	_getRowForKey(key) {
 		return this._flat.find((f) => f.key === key)?.row;
 	}
+	/** The selected row keys (read-only). */
+	get selectedKeys() {
+		return this._selectedKeys;
+	}
+	/** Replace the selection with these row keys (clamped to known rows). */
+	set selectedKeys(keys) {
+		this.selectKeys(keys);
+	}
+	/**
+	* Replace the selection with the given row keys. Unknown keys are dropped;
+	* in a single-select mode only the last surviving key is kept;
+	* `selectionMode="none"` clears. Fires `datagrid-select` with the previous
+	* 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)));
+		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) {
+			const last = [...next].at(-1);
+			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
+		}
+		const prev = new Set(this._selectedKeys);
+		if (prev.size === next.size && [...next].every((k) => prev.has(k))) return;
+		this._selectedKeys = next;
+		this._anchorKey = [...next].at(-1);
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(next),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** The row key under the cursor, or `undefined`. */
+	get tickledKey() {
+		return this._tickled.tickledId;
+	}
+	/** Move the cursor to this row key and scroll it into view. */
+	tickleRow(key) {
+		if (!this._flatKeys.includes(key)) return;
+		this._tickled.focus(key);
+		this._scrollRowIntoView(key);
+	}
+	/**
+	* Append rows without the full O(n log n) rebuild that reassigning `rows`
+	* incurs. `rows` still gets a new array reference (reactivity is preserved),
+	* but the derived arrays are extended over the appended slice only. When a
+	* sort is active the new rows show unsorted for one frame, then a single
+	* coalesced re-sort runs. Scroll position, selection and cursor are kept.
+	*/
+	appendRows(rows) {
+		if (rows.length === 0) return;
+		const startIdx = this.rows.length;
+		this.#appendInProgress = true;
+		this.rows = [...this.rows, ...rows];
+		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.#appendToFlat(appended, startIdx);
+		this.#appendInProgress = false;
+		this.requestUpdate();
+		if (this.sortState != null) {
+			cancelAnimationFrame(this.#resortRaf);
+			this.#resortRaf = requestAnimationFrame(() => {
+				this._sortedRows = this._applySort([...this.rows]);
+				this._rebuildFlat();
+				this.requestUpdate();
+			});
+		}
+	}
+	#appendToFlat(appended, startIdx) {
+		if (this.groupBy) {
+			this._rebuildFlat();
+			return;
+		}
+		for (let j = 0; j < appended.length; j++) {
+			const idx = startIdx + j;
+			const key = this.getRowKey(appended[j], idx);
+			this._flat.push({
+				type: `row`,
+				key,
+				row: appended[j],
+				idx
+			});
+			this._flatKeys.push(key);
+		}
+	}
 	_replaceSelection(key) {
 		if (this.selectionMode === `none`) return;
 		const prev = new Set(this._selectedKeys);
@@ -11727,6 +12818,7 @@ let DataGridElement = class DataGridElement extends i {
 			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
 		})()}px"></div>` : A}
           </div>
+          ${this.columnMenu === `none` ? A : b`
           <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
 			const cmd = e.detail.command;
 			const checked = e.detail.checked;
@@ -11766,7 +12858,7 @@ let DataGridElement = class DataGridElement extends i {
                 </ixfx-menu-radio-group>
               ` : A}
             </ixfx-menu-container>
-          </ixfx-menu-trigger>
+          </ixfx-menu-trigger>`}
         </div>
         <div class="viewport" @scroll=${this._onScroll}>
           <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
@@ -11783,7 +12875,7 @@ let DataGridElement = class DataGridElement extends i {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return b`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
@@ -11916,6 +13008,7 @@ let DataGridElement = class DataGridElement extends i {
 		})}
           </div>
         </div>
+        ${this.search.renderField()}
       </div>
     `;
 	}
@@ -11954,7 +13047,18 @@ __decorate([property({
 	attribute: `cross-group-selection`,
 	reflect: true
 })], DataGridElement.prototype, "crossGroupSelection", void 0);
+__decorate([property({
+	type: String,
+	attribute: `column-menu`
+})], DataGridElement.prototype, "columnMenu", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], DataGridElement.prototype, "searchModes", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);
@@ -11970,13 +13074,278 @@ __decorate([query(`.viewport`)], DataGridElement.prototype, "_viewportEl", void
 __decorate([query(`.header-scroll`)], DataGridElement.prototype, "_headerScrollEl", void 0);
 DataGridElement = __decorate([safeCustomElement(`ixfx-data-grid`)], DataGridElement);
 //#endregion
+//#region src/data-table/data-table.ts
+let DataTableElement = class DataTableElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.rows = [];
+		this.tickleDelay = 400;
+		this.layout = `auto`;
+		this.narrowBreakpoint = 420;
+		this._tickled = new TickledController(this, { getItems: () => this.rows.map((_, i) => ({
+			id: i,
+			enabled: true
+		})) });
+		this._stacked = false;
+		this.#lastWidth = 0;
+	}
+	static {
+		this.styles = [
+			tickledStyles,
+			tickledItemStyles,
+			i$3`
+      :host {
+        display: block;
+        container-type: inline-size;
+      }
+
+      .properties {
+        display: grid;
+        grid-template-columns: var(--data-table-name-width, max-content)
+          var(--data-table-value-width, minmax(0, 1fr));
+        /* No column gap: the tickled highlight reads as one solid block.
+           Separation comes from cell padding, which the highlight covers. */
+        gap: 2px 0;
+      }
+
+      /* Widening: 2 then 3 property-pairs per row on roomy containers.
+         Suppressed when stacked, or when locked to 'columns'. */
+      @container (min-width: 650px) {
+        :host(:not([layout='columns'])) .properties:not(.stacked) {
+          grid-template-columns:
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr));
+        }
+      }
+
+      @container (min-width: 1000px) {
+        :host(:not([layout='columns'])) .properties:not(.stacked) {
+          grid-template-columns:
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr))
+            var(--data-table-name-width, max-content) var(--data-table-value-width, minmax(0, 1fr));
+        }
+      }
+
+      /* Stacked (key above value). Threshold is JS-driven via 'narrowBreakpoint'.
+         minmax(0, 1fr) — not 1fr — so a long value's min-content size can't
+         blow the column out past the container; the value then ellipsises. */
+      .properties.stacked {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      /* A pair is its own subgrid so the whole row is one element:
+         the tickled highlight can't split, and key/value share a baseline. */
+      .pair {
+        display: grid;
+        grid-column: span 2;
+        grid-template-columns: subgrid;
+        align-items: var(--data-table-cell-align, baseline);
+        cursor: pointer;
+      }
+
+      .pair[data-full] {
+        grid-column: 1 / -1;
+      }
+
+      .pair[data-full] > .value {
+        grid-column: 2 / -1;
+      }
+
+      .properties.stacked .pair {
+        display: block;
+        grid-column: 1 / -1;
+        /* Let the block shrink below its content so .value-text can clip. */
+        min-width: 0;
+      }
+
+      .properties.stacked .pair:not(:last-child) {
+        margin-bottom: var(--space-s);
+      }
+
+      /* Stacked keys get their own line, so a long label must wrap rather than
+         run off the edge (nowrap is only wanted for the max-content column). */
+      .properties.stacked .key {
+        white-space: normal;
+        overflow-wrap: break-word;
+      }
+
+      .key,
+      .value {
+        min-width: 0;
+        /* Row rhythm comes from this padding (tunable), not line-height. */
+        padding: var(--data-table-row-padding, 0.35em) 0;
+      }
+
+      .key {
+        padding-right: var(--space-m);
+        opacity: 0.6;
+        white-space: nowrap;
+        text-align: var(--data-table-name-align, left);
+        font-size: 10px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        /* Uppercase keys have no descenders, so both edges can be trimmed to
+           the glyphs for tight baseline / centre alignment. */
+        text-box: trim-both cap alphabetic;
+      }
+
+      .value {
+        position: relative;
+        padding-right: var(--space-l);
+        font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+
+      /* The value text is clipped here — never on .value itself — so a long
+         value stays within its cell even while tickled, and the detail
+         popover (a child of .value) can still escape the cell. */
+      .value-text {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        /* No text-box trim here: the natural line box gives descenders the room
+           overflow:hidden would otherwise clip. Baseline alignment of key and
+           value comes from align-items on .pair, which needs no trimming. */
+      }
+
+      .pair.tickled {
+        background: var(--item-bg-tickled, color-mix(in oklch, var(--surface-2), var(--accent) 10%));
+      }
+
+      /* Lift the row whose detail is open above the rows it slides over. */
+      .pair.show-detail {
+        position: relative;
+        z-index: 1;
+      }
+
+      .detail {
+        position: absolute;
+        z-index: 2;
+        /* Flush with the bottom of the value (no gap) so the pointer can travel
+           from value to panel without crossing a dead zone that would dismiss it.
+           Left-aligned with the value; only as wide as its content, capped at
+           the table width. */
+        top: 100%;
+        left: 0;
+        right: auto;
+        width: max-content;
+        max-width: 100cqi;
+        padding: var(--space-xs);
+        background: var(--surface-2);
+        visibility: hidden;
+        transform: translateY(-4px);
+        pointer-events: none;
+        transition: transform var(--transition);
+      }
+
+      .pair.show-detail .detail {
+        visibility: visible;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+    `
+		];
+	}
+	#detailTimer;
+	#resizeObserver;
+	#lastWidth;
+	connectedCallback() {
+		super.connectedCallback();
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry) return;
+			this.#lastWidth = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+			this.#updateStacked();
+		});
+		this.#resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		clearTimeout(this.#detailTimer);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+	}
+	willUpdate(changed) {
+		if (changed.has(`layout`) || changed.has(`narrowBreakpoint`)) this.#updateStacked();
+	}
+	#updateStacked() {
+		const stacked = this.layout === `rows` ? true : this.layout === `columns` ? false : this.#lastWidth > 0 && this.#lastWidth <= this.narrowBreakpoint;
+		if (stacked !== this._stacked) this._stacked = stacked;
+	}
+	#handlePointerEnter(i) {
+		this._tickled.handlePointerEnter(i);
+		clearTimeout(this.#detailTimer);
+		if (this._detailIndex !== void 0) this._detailIndex = void 0;
+		this.#detailTimer = setTimeout(() => {
+			if (this._tickled.isTickled(i)) this._detailIndex = i;
+		}, this.tickleDelay);
+	}
+	#handlePointerLeave(e) {
+		clearTimeout(this.#detailTimer);
+		this._detailIndex = void 0;
+		this._tickled.handlePointerLeave(e);
+	}
+	#select(i) {
+		clearTimeout(this.#detailTimer);
+		this.selectedIndex = this.selectedIndex === i ? void 0 : i;
+		this._tickled.setTickled(i);
+		this._detailIndex = i;
+		this.dispatchEvent(new CustomEvent(`data-table-row-click`, {
+			bubbles: true,
+			composed: true,
+			detail: {
+				row: this.rows[i],
+				index: i,
+				selected: this.selectedIndex === i
+			}
+		}));
+	}
+	render() {
+		return b`<div
+      class="properties ${this._stacked ? `stacked` : ``}"
+      @pointerleave=${(e) => this.#handlePointerLeave(e)}
+    >
+      ${this.rows.map((r, i) => b`<div
+          class="pair ${this._tickled.isTickled(i) ? `tickled` : ``} ${this._detailIndex === i ? `show-detail` : ``}"
+          ?data-full=${r.fullWidth}
+          @pointerenter=${() => this.#handlePointerEnter(i)}
+          @click=${() => this.#select(i)}
+        ><div class="key">${r.label}</div><div class="value"><span class="value-text">${typeof r.value === `boolean` ? r.value ? `Yes` : `No` : r.value}</span>${r.detail === void 0 ? A : b`<div class="detail" part="detail">${r.detail}</div>`}</div></div>`)}</div>`;
+	}
+};
+__decorate([property({
+	type: Array,
+	attribute: false
+})], DataTableElement.prototype, "rows", void 0);
+__decorate([property({
+	type: Number,
+	attribute: false
+})], DataTableElement.prototype, "selectedIndex", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `tickle-delay`
+})], DataTableElement.prototype, "tickleDelay", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], DataTableElement.prototype, "layout", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `narrow-breakpoint`
+})], DataTableElement.prototype, "narrowBreakpoint", void 0);
+__decorate([state()], DataTableElement.prototype, "_tickled", void 0);
+__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.ts
-const ITEM_SELECTOR$1 = `:scope > li`;
+const ITEM_SELECTOR$2 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
 let DetailListElement = class DetailListElement extends i {
-	constructor(..._args2) {
-		super(..._args2);
+	constructor(..._args) {
+		super(..._args);
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
 		this.sort = `none`;
@@ -11986,12 +13355,11 @@ let DetailListElement = class DetailListElement extends i {
 		this.iconProperty = ``;
 		this.keyProperty = ``;
 		this.itemWrap = `stop`;
-		this._searchVisible = false;
-		this._searchQuery = ``;
 		this.#itemData = /* @__PURE__ */ new WeakMap();
 		this.#grid = [];
 		this.#positions = /* @__PURE__ */ new Map();
 		this.#geometryScheduled = false;
+		this.#animatedItems = /* @__PURE__ */ new WeakSet();
 		this.#builtFromProvider = [];
 		this.#providerBuilt = 0;
 		this.#data = new DataController(this);
@@ -12002,11 +13370,13 @@ let DetailListElement = class DetailListElement extends i {
 				selectionMode: this.selectionMode,
 				interactionMode: this.interactionMode
 			}),
+			getKey: keyForElement,
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this._dispatch(`list-select`, {
 					selected,
-					previous
+					previous,
+					selectedKeys: this.selection.selectedKeys
 				});
 			}
 		});
@@ -12021,6 +13391,11 @@ let DetailListElement = class DetailListElement extends i {
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.itemWrap
 		});
+		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
+			itemSelector: ITEM_SELECTOR$2,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: SEARCH_HIGHLIGHT_KEY
+		}) });
 		this._onPointerOver = (e) => {
 			const item = this._findListItem(e.composedPath());
 			if (item) this.tickled.handlePointerEnter(item);
@@ -12029,11 +13404,7 @@ let DetailListElement = class DetailListElement extends i {
 			this.tickled.handlePointerLeave(e);
 		};
 		this._onKeyDown = (e) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
-				e.preventDefault();
-				this._openSearch();
-				return;
-			}
+			if (this.search.isOpen) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
@@ -12041,11 +13412,6 @@ let DetailListElement = class DetailListElement extends i {
 				}
 				return;
 			}
-			if (this._searchVisible && e.key === `Escape`) {
-				e.preventDefault();
-				this._closeSearch();
-				return;
-			}
 			switch (e.key) {
 				case `ArrowDown`:
 					e.preventDefault();
@@ -12114,53 +13480,36 @@ let DetailListElement = class DetailListElement extends i {
 			e.preventDefault();
 			this._listEl.scrollLeft += e.deltaY;
 		};
-		this._onSearchInput = (e) => {
-			const input = e.target;
-			this._searchQuery = input.value;
-			this.#search?.setQuery(this._searchQuery).then(() => this.#recomputeGeometry());
-		};
-		this._onSearchKeydown = (e) => {
-			if (e.key === `Escape`) {
-				e.stopPropagation();
-				this._closeSearch();
-			} else if (e.key === `ArrowDown`) {
-				e.preventDefault();
-				this.focus();
-				this.#navigateDown();
-			} else if (e.key === `ArrowUp`) {
-				e.preventDefault();
-				this.focus();
-				this.#navigateUp();
-			} else if (e.key === `ArrowRight`) e.preventDefault();
-			else if (e.key === `ArrowLeft`) e.preventDefault();
-			else if (e.key === `Enter`) {
-				e.preventDefault();
-				e.stopPropagation();
-				const id = this.tickled.tickledId ?? this.#findFirstCheckable();
-				if (id) {
-					this._dispatch(`list-item-click`, { item: id });
-					this._activateItem(id);
-					this._closeSearch();
-				}
-			} else if (e.key === ` `) {
-				const id = this.tickled.tickledId;
-				if (id) {
-					e.preventDefault();
-					this.selection.handleSpace(id);
-				}
-			}
-		};
 	}
-	#search;
 	#itemData;
 	#grid;
 	#positions;
 	#geometryScheduled;
 	#resizeObserver;
 	#mutationObserver;
+	/** Items that have already played (or been skipped for) their enter animation. */
+	#animatedItems;
 	#builtFromProvider;
 	#providerBuilt;
 	#data;
+	#searchRegistry;
+	#unregisterSearchCommands;
+	/** Command registry carrying this list's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -12172,8 +13521,9 @@ let DetailListElement = class DetailListElement extends i {
 		this.addEventListener(`wheel`, this._onWheel);
 		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
 		this.#resizeObserver.observe(this);
-		this.#mutationObserver = new MutationObserver(() => {
+		this.#mutationObserver = new MutationObserver((records) => {
 			this.#processChildren();
+			this.#animateChildMutations(records);
 			this.#scheduleGeometry();
 		});
 		this.#mutationObserver.observe(this, {
@@ -12181,6 +13531,29 @@ let DetailListElement = class DetailListElement extends i {
 			subtree: false,
 			attributeFilter: [`hidden`]
 		});
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#animatedItems.add(el);
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
+	}
+	/**
+	* Collapse-in items appended to the light DOM (however they got there). A bulk
+	* populate is left alone. Geometry is re-read once the animations settle so
+	* keyboard navigation lines back up with the final layout.
+	*/
+	#animateChildMutations(records) {
+		if (!this.isConnected) return;
+		const fresh = [];
+		for (const record of records) for (const node of record.addedNodes) {
+			if (!(node instanceof HTMLElement) || node.parentElement !== this || node.localName !== `li`) continue;
+			if (this.#animatedItems.has(node)) continue;
+			this.#animatedItems.add(node);
+			fresh.push(node);
+		}
+		if (fresh.length === 0) return;
+		const total = this.querySelectorAll(ITEM_SELECTOR$2).length;
+		if (fresh.length >= total) return;
+		for (const el of fresh) animateListItemIn(el);
+		window.setTimeout(() => this.#scheduleGeometry(), 230);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -12194,23 +13567,18 @@ let DetailListElement = class DetailListElement extends i {
 		this.#resizeObserver = void 0;
 		this.#mutationObserver?.disconnect();
 		this.#mutationObserver = void 0;
-		this.#search?.dispose();
-		this.#search = void 0;
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
 	}
 	firstUpdated() {
 		this.#processChildren();
 		if (this.filterPredicate) this.#applyFilterPredicate();
-		this.#search = createElementIncrSearch({
-			container: this,
-			itemSelector: ITEM_SELECTOR$1,
-			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			highlightKey: SEARCH_HIGHLIGHT_KEY
-		});
 		this.#recomputeGeometry();
 	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
 		if (changed.has(`provider`)) {
 			this.#builtFromProvider = [];
 			this.#providerBuilt = 0;
@@ -12261,8 +13629,21 @@ let DetailListElement = class DetailListElement extends i {
 		if (this.sort !== `none`) this.#applySort();
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 	}
+	/**
+	* Collapse + fade `item` out, then detach it; the rows after it slide up to
+	* close the gap. Resolves once removed. Immediate under reduced motion.
+	*/
 	removeItem(item) {
-		item.remove();
+		this.selection.deselect(item);
+		return animateListItemOut(item).then(() => {
+			item.remove();
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+			this.#recomputeGeometry();
+		});
+	}
+	/** {@link removeItem} for several items at once. */
+	removeItems(items) {
+		return Promise.all([...items].map((item) => this.removeItem(item))).then(() => void 0);
 	}
 	clearItems() {
 		this.replaceChildren();
@@ -12291,8 +13672,14 @@ let DetailListElement = class DetailListElement extends i {
 	getItemData(item) {
 		return this.#itemData.get(item);
 	}
-	/** Dispatch a command to this list. No-op by default (grouped-lister parity). */
-	dispatch(_commandId, _args) {}
+	/**
+	* Dispatch a command to this list — used by `ixfx-grouped-item-lister` to
+	* forward commands. Routes through the command registry (so `list.search.*`
+	* and any other registered commands work).
+	*/
+	dispatch(commandId, args) {
+		this.#searchRegistry?.invoke(commandId, args);
+	}
 	select(item) {
 		this.selection.replace(item);
 	}
@@ -12308,6 +13695,40 @@ let DetailListElement = class DetailListElement extends i {
 	selectAll() {
 		if (this.selection.canSelectAll()) this.selection.selectAll();
 	}
+	/** The selection as stable `data-key` / `data-value` strings. */
+	get selectedKeys() {
+		return this.selection.selectedKeys;
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		const id = this.tickled.tickledId;
+		return id ? keyForElement(id) : void 0;
+	}
+	/** Replace the selection with the items carrying these keys (unknown keys ignored). */
+	selectKeys(keys) {
+		this.selection.selectKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		const el = this.#itemForKey(key);
+		if (!el) return;
+		this.tickled.focus(el);
+		el.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+	}
+	#itemForKey(key) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (keyForElement(el) === key) return el;
+	}
 	*selectedFilter(kind) {
 		const wanted = (el) => {
 			switch (kind) {
@@ -12316,7 +13737,7 @@ let DetailListElement = class DetailListElement extends i {
 				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
 			}
 		};
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
 			if (el.hidden) continue;
 			if (wanted(el)) yield el;
 		}
@@ -12329,7 +13750,7 @@ let DetailListElement = class DetailListElement extends i {
 		if (previousKeys.size > 0 || anchorKey !== null) {
 			const next = [];
 			let anchor;
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) {
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
 				const key = keyOf(el);
 				if (key !== null && previousKeys.has(key)) next.push(el);
 				if (key !== null && key === anchorKey) anchor = el;
@@ -12384,15 +13805,15 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	#applyFilterPredicate() {
 		if (!this.filterPredicate) {
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) el.removeAttribute(`hidden`);
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) el.removeAttribute(`hidden`);
 			return;
 		}
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
 		else el.setAttribute(`hidden`, ``);
 	}
 	#applySort() {
 		if (this.sort === `none`) return;
-		const rows = [...this.querySelectorAll(ITEM_SELECTOR$1)];
+		const rows = [...this.querySelectorAll(ITEM_SELECTOR$2)];
 		if (rows.length < 2) return;
 		const dir = this.sort === `descending` ? -1 : 1;
 		const meta = (el) => ({
@@ -12584,7 +14005,7 @@ let DetailListElement = class DetailListElement extends i {
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
 	}
 	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR$2)).filter((el) => {
 			if (el.hidden) return false;
 			if (this.filterPredicate && !this.filterPredicate(el)) return false;
 			return true;
@@ -12639,10 +14060,10 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	/** Scan light-DOM children for unprocessed `data-icon` items. */
 	#processChildren() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) this.#ensureIcon(el);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#ensureIcon(el);
 	}
 	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$1)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
 			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));
@@ -12742,16 +14163,6 @@ let DetailListElement = class DetailListElement extends i {
 			composed: true
 		}));
 	}
-	_openSearch() {
-		this._searchVisible = true;
-		this.updateComplete.then(() => this._searchInputEl?.focus());
-	}
-	_closeSearch() {
-		this._searchVisible = false;
-		this._searchQuery = ``;
-		this.#search?.clearQuery().then(() => this.#recomputeGeometry());
-		this.focus();
-	}
 	_activateItem(item) {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
@@ -12760,6 +14171,7 @@ let DetailListElement = class DetailListElement extends i {
 		this.styles = [
 			themeFallbacks,
 			scrollFadeStyles(`x`),
+			listSearchStyles,
 			i$3`
     :host {
       display: block;
@@ -12881,48 +14293,6 @@ let DetailListElement = class DetailListElement extends i {
     .loading[hidden] {
       display: none;
     }
-
-    .search-overlay {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      background: var(--surface-4, #2a2a2a);
-      border: 1px solid var(--border, #444);
-      border-radius: var(--radius-m, 4px);
-      padding: 4px 6px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-
-    .search-overlay[hidden] {
-      display: none;
-    }
-
-    .search-input {
-      background: transparent;
-      border: none;
-      outline: none;
-      color: inherit;
-      font-size: var(--text-m, 0.875em);
-      min-width: 140px;
-    }
-
-    .search-close {
-      background: transparent;
-      border: none;
-      color: var(--surface-muted-text, #888);
-      cursor: pointer;
-      font-size: 1.1em;
-      line-height: 1;
-      padding: 0 2px;
-    }
-
-    .search-close:hover {
-      color: inherit;
-    }
   `
 		];
 	}
@@ -12937,21 +14307,7 @@ let DetailListElement = class DetailListElement extends i {
         <div class="loading" part="loading" ?hidden=${!loading}>
           ${loading ? progress !== void 0 ? `${Math.round(progress * 100)}%` : `loading…` : A}
         </div>
-        <div
-          class="search-overlay"
-          part="search-overlay"
-          ?hidden=${!this._searchVisible}
-        >
-          <input
-            type="text"
-            class="search-input"
-            placeholder="Search…"
-            .value=${this._searchQuery}
-            @input=${this._onSearchInput}
-            @keydown=${this._onSearchKeydown}
-          />
-          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
-        </div>
+        ${this.search.renderField()}
       </div>
     `;
 	}
@@ -12991,9 +14347,11 @@ __decorate([property({
 	attribute: `item-wrap`
 })], DetailListElement.prototype, "itemWrap", void 0);
 __decorate([property({ attribute: false })], DetailListElement.prototype, "checkboxRenderer", void 0);
-__decorate([state()], DetailListElement.prototype, "_searchVisible", void 0);
-__decorate([state()], DetailListElement.prototype, "_searchQuery", void 0);
-__decorate([query(`.search-input`)], DetailListElement.prototype, "_searchInputEl", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], DetailListElement.prototype, "searchModes", void 0);
 __decorate([query(`ul`)], DetailListElement.prototype, "_listEl", void 0);
 DetailListElement = __decorate([safeCustomElement(`ixfx-detail-list`)], DetailListElement);
 //#endregion
@@ -18701,6 +20059,983 @@ let FormElement = class FormElement extends i {
 };
 FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
 //#endregion
+//#region src/grid-list/grid-list.ts
+const ITEM_SELECTOR$1 = `:scope > *`;
+const MIN_ITEM_SIZE = 16;
+/**
+* How long the host keeps the `[reflowing]` attribute after items are inserted
+* mid-list — long enough for the cell move-transition and the enter animation
+* to finish. Kept a touch above the default `--grid-list-item-move-duration`.
+*/
+const REFLOW_WINDOW_MS = 320;
+function computeGridWindow(count, itemWidth, rowHeight, gap, viewportWidth, viewportHeight, scrollOffset, orientation, overscan = 2) {
+	const w = Math.max(1, itemWidth);
+	const h = Math.max(1, rowHeight);
+	const g = Math.max(0, gap);
+	const colStride = w + g;
+	const rowStride = h + g;
+	const offset = Math.max(0, scrollOffset);
+	if (orientation === `row`) {
+		const rows = count === 0 ? 0 : 1;
+		const totalWidth = count === 0 ? 0 : (count - 1) * colStride + w;
+		if (count === 0 || viewportWidth <= 0) return {
+			cols: count,
+			rows,
+			totalHeight: 0,
+			totalWidth,
+			startIndex: 0,
+			endIndex: 0,
+			colStride,
+			rowStride,
+			horizontal: true
+		};
+		const firstVisible = Math.max(0, Math.floor(offset / colStride));
+		const lastVisible = Math.ceil((offset + viewportWidth) / colStride);
+		return {
+			cols: count,
+			rows,
+			totalHeight: 0,
+			totalWidth,
+			startIndex: Math.max(0, firstVisible - overscan),
+			endIndex: Math.min(count, lastVisible + overscan),
+			colStride,
+			rowStride,
+			horizontal: true
+		};
+	}
+	const cols = orientation === `column` ? 1 : Math.max(1, Math.floor((Math.max(0, viewportWidth) + g) / colStride));
+	const rows = count === 0 ? 0 : Math.ceil(count / cols);
+	const totalHeight = rows === 0 ? 0 : (rows - 1) * rowStride + h;
+	if (count === 0 || viewportHeight <= 0) return {
+		cols,
+		rows,
+		totalHeight,
+		totalWidth: 0,
+		startIndex: 0,
+		endIndex: 0,
+		colStride,
+		rowStride,
+		horizontal: false
+	};
+	const firstVisibleRow = Math.max(0, Math.floor(offset / rowStride));
+	const lastVisibleRow = Math.ceil((offset + viewportHeight) / rowStride);
+	const rowStart = Math.max(0, firstVisibleRow - overscan);
+	const rowEnd = Math.min(rows, lastVisibleRow + overscan);
+	return {
+		cols,
+		rows,
+		totalHeight,
+		totalWidth: 0,
+		startIndex: rowStart * cols,
+		endIndex: Math.min(count, rowEnd * cols),
+		colStride,
+		rowStride,
+		horizontal: false
+	};
+}
+function columnOf(index, cols) {
+	return cols <= 1 ? 0 : index % cols;
+}
+function rowOf(index, cols) {
+	return cols <= 1 ? index : Math.floor(index / cols);
+}
+let GridListElement = class GridListElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.itemSize = 160;
+		this.gap = 8;
+		this.orientation = `grid`;
+		this.captionStyle = `under`;
+		this.captionAlign = `middle`;
+		this.captionPosition = `bottom`;
+		this.captionBackdrop = `scrim`;
+		this.captionHeight = 24;
+		this.itemWrap = `stop`;
+		this._scrollTop = 0;
+		this._scrollLeft = 0;
+		this._viewportHeight = 0;
+		this._viewportWidth = 0;
+		this.#viewportRef = createRef();
+		this.#scrollRaf = 0;
+		this.#items = [];
+		this.#itemWrap = `stop`;
+		this.#entering = /* @__PURE__ */ new Set();
+		this.#reflowTimer = 0;
+		this.#slotNames = /* @__PURE__ */ new WeakMap();
+		this.#slotSeq = 0;
+		this.selection = new ListSelectionController({
+			getOrderedItems: () => this._getVisibleItems(),
+			isSelectable: () => true,
+			getModes: () => ({
+				selectionMode: this.selectionMode,
+				interactionMode: this.interactionMode
+			}),
+			getKey: keyForElement,
+			onChange: (selected, previous) => {
+				this._syncItemStates();
+				this.requestUpdate();
+				this._dispatch(`list-select`, {
+					selected,
+					previous,
+					selectedKeys: this.selection.selectedKeys
+				});
+			}
+		});
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#items.map((el) => ({
+				id: el,
+				enabled: !el.hasAttribute(`not-checked`)
+			})),
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates(),
+			itemWrap: this.#itemWrap
+		});
+		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
+			itemSelector: ITEM_SELECTOR$1,
+			getLabel: (el) => el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: `grid-list-search`
+		}) });
+		this.#onScroll = (e) => {
+			const el = e.target;
+			this.#cancelScrollRaf();
+			this.#scrollRaf = requestAnimationFrame(() => {
+				this.#scrollRaf = 0;
+				this._scrollTop = el.scrollTop;
+				this._scrollLeft = el.scrollLeft;
+				this.#emitViewportChange();
+			});
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if (this.selection.canSelectAll()) {
+					e.preventDefault();
+					this.selection.selectAll();
+				}
+				return;
+			}
+			const count = this.#items.length;
+			if (count === 0) return;
+			const win = this.#currentWindow();
+			const move = (delta) => {
+				const from = this.tickled.tickledId ? this.#items.indexOf(this.tickled.tickledId) : -1;
+				const nextIndex = Math.max(0, Math.min(count - 1, from + delta));
+				const next = this.#items[nextIndex];
+				if (next) {
+					this.tickled.handleKeyboardNavigation(next);
+					this.#scrollItemIntoView(next);
+				}
+			};
+			const perLine = this.orientation === `grid` ? win.cols : 1;
+			switch (e.key) {
+				case `ArrowLeft`:
+					move(-1);
+					break;
+				case `ArrowRight`:
+					move(1);
+					break;
+				case `ArrowUp`:
+					move(-perLine);
+					break;
+				case `ArrowDown`:
+					move(perLine);
+					break;
+				case `Home`:
+					this.tickled.handleKeyboardNavigation(`first`);
+					if (this.tickled.tickledId) this.#scrollItemIntoView(this.tickled.tickledId);
+					break;
+				case `End`:
+					this.tickled.handleKeyboardNavigation(`last`);
+					if (this.tickled.tickledId) this.#scrollItemIntoView(this.tickled.tickledId);
+					break;
+				case `PageUp`:
+				case `PageDown`: {
+					const mainExtent = win.horizontal ? this._viewportWidth : this._viewportHeight;
+					const mainStride = win.horizontal ? win.colStride : win.rowStride;
+					const visibleLines = Math.max(1, Math.floor(mainExtent / mainStride));
+					move((e.key === `PageDown` ? 1 : -1) * visibleLines * perLine);
+					break;
+				}
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._dispatch(`list-item-click`, { item: id });
+						this.#onCellActivate(id);
+					}
+					break;
+				}
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this.selection.handleSpace(id);
+					}
+					break;
+				}
+				case `Escape`:
+					this.selection.clear();
+					break;
+				default: return;
+			}
+			e.preventDefault();
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			scrollFadeStyles(`y`),
+			listItemFadeKeyframes,
+			listSearchStyles,
+			i$3`
+      :host {
+        --grid-list-item-bg: var(--item-bg);
+        --grid-list-radius: var(--radius-m);
+        --grid-list-gap: var(--space-xs);
+        position: relative;
+        display: block;
+        height: 100%;
+        min-height: 2em;
+        overflow: hidden;
+        user-select: none;
+        background: var(--surface-3);
+        color: var(--surface-3-text);
+        border-radius: var(--radius-s);
+        border: 1px solid var(--border);
+      }
+      :host(:focus-visible) {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      .viewport {
+        position: relative;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+      }
+      :host([orientation="row"]) .viewport {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+      .spacer {
+        position: relative;
+        width: 100%;
+      }
+      .cell {
+        position: absolute;
+        inset: 0 auto auto 0;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        contain: layout style;
+        border-radius: var(--grid-list-radius);
+      }
+
+      /* The square that holds the slotted content. */
+      .thumb {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        align-items: stretch;
+        box-sizing: border-box;
+        overflow: hidden;
+        border-radius: 0;
+        background: transparent;
+        border: 1px solid transparent;
+        transition: background var(--transition), border-color var(--transition);
+      }
+      .thumb ::slotted(*) {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      .thumb ::slotted(*:empty)::after {
+        content: "Empty";
+        color: var(--surface-muted-text);
+        font-size: var(--text-s);
+      }
+      ::slotted([hidden]) {
+        display: none !important;
+      }
+
+      /* Selection / cursor wash — sits over the slotted content so it reads
+         on photos and arbitrary DOM alike. */
+      .thumb::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border-radius: inherit;
+        background: var(--accent);
+        opacity: 0;
+        transition: opacity var(--transition, 0.1s ease-out);
+      }
+      .cell.selected .thumb::after {
+        opacity: 0.18;
+      }
+
+      /* ---- Caption (base) ---- */
+      .caption {
+        box-sizing: border-box;
+        flex: none;
+        padding: 3px 6px;
+        font-size: var(--text-s, 0.8rem);
+        line-height: 1.3;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--surface-3-text);
+      }
+      :host([caption-align="left"]) .caption { text-align: left; }
+      :host([caption-align="right"]) .caption { text-align: right; }
+
+      /* ---- Box modes (hidden / under / overlaid): the cell is one box with a
+             single selection outline ---- */
+      :host(:not([caption-style="separate"])) .cell {
+        background: var(--grid-list-item-bg);
+        border: 1px solid transparent;
+        overflow: hidden;
+        transition: background var(--transition), border-color var(--transition);
+      }
+      :host(:not([caption-style="separate"])) .cell:hover,
+      :host(:not([caption-style="separate"])) .cell.tickled {
+        background: var(--item-bg-tickled);
+        border: var(--item-border-tickled);
+      }
+      :host(:not([caption-style="separate"])) .cell.selected {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      :host(:not([caption-style="separate"])) .cell.selected.tickled {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      /* under: caption is a strip inside the box, below the content */
+      :host([caption-style="under"]) .caption {
+        border-top: 1px solid var(--border, rgba(128, 128, 128, 0.3));
+        background: var(--surface-4, transparent);
+      }
+
+      /* overlaid: caption floats over the content */
+      :host([caption-style="overlaid"]) .caption {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+      }
+      :host([caption-style="overlaid"][caption-position="top"]) .caption {
+        top: 0;
+        bottom: auto;
+      }
+      :host([caption-style="overlaid"][caption-position="middle"]) .caption {
+        top: 50%;
+        bottom: auto;
+        transform: translateY(-50%);
+      }
+      /* overlaid backdrop */
+      :host([caption-style="overlaid"][caption-backdrop="scrim"]) .caption {
+        background: rgba(0, 0, 0, 0.55);
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"]) .caption {
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+        padding-block: 10px 4px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"][caption-position="top"]) .caption {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+        padding-block: 4px 10px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"][caption-position="middle"]) .caption {
+        background: rgba(0, 0, 0, 0.5);
+        padding-block: 3px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="blur"]) .caption {
+        background: rgba(20, 20, 20, 0.3);
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+      }
+      :host([caption-style="overlaid"][caption-backdrop="none"]) .caption {
+        background: none;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.7);
+      }
+
+      /* ---- separate mode: square + detached caption, each highlighted ---- */
+      :host([caption-style="separate"]) .thumb {
+        flex: none;
+        border-radius: var(--grid-list-radius);
+        background: var(--grid-list-item-bg);
+        border: 1px solid transparent;
+      }
+      :host([caption-style="separate"]) .cell:hover .thumb,
+      :host([caption-style="separate"]) .cell.tickled .thumb {
+        background: var(--item-bg-tickled);
+        border: var(--item-border-tickled);
+      }
+      :host([caption-style="separate"]) .caption {
+        display: flex;
+        align-items: center;
+        align-self: center;
+        max-width: 100%;
+        margin-top: 4px;
+        border-radius: var(--radius-s, 4px);
+      }
+      :host([caption-style="separate"][caption-align="left"]) .caption { align-self: flex-start; }
+      :host([caption-style="separate"][caption-align="right"]) .caption { align-self: flex-end; }
+      :host([caption-style="separate"]) .cell.selected .thumb {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+      :host([caption-style="separate"]) .cell.selected.tickled .thumb {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: 2px;
+      }
+      :host([caption-style="separate"]) .cell.selected .caption {
+        background: var(--accent);
+        color: var(--accent-text, #000);
+      }
+      :host([caption-style="separate"]) .cell.tickled .caption {
+        background: var(--item-bg-tickled);
+        outline: var(--item-border-tickled);
+      }
+      :host([caption-style="separate"]) .cell.selected.tickled .caption {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      /* ---- Insertion / removal animation ----
+         Active only while the host carries [reflowing] — the ~0.3s window after
+         the child list changes mid-list (see #noteChildMutation). Kept out of
+         the base rules so it never fires during scroll virtualisation, where
+         cells are recycled to wildly different positions every frame. Placed
+         last so it wins over the earlier cell transition rule regardless of
+         specificity. Survivors slide to their new slot; a freshly inserted cell
+         also fades in. (A removed item's element is already gone, so there's
+         nothing left to fade — the gap simply closes as the others slide.) */
+      :host([reflowing]) .cell {
+        transition:
+          transform var(--grid-list-item-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1),
+          background var(--transition),
+          border-color var(--transition);
+      }
+      .cell.entering {
+        animation: ixfx-list-item-in var(--grid-list-item-move-duration, 200ms) ease both;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
+        .cell.entering { animation: none; }
+      }
+    `
+		];
+	}
+	#viewportRef;
+	#resizeObserver;
+	#mutationObserver;
+	#scrollRaf;
+	#items;
+	#itemWrap;
+	/** Items added mid-list that are still playing their enter animation. */
+	#entering;
+	/** Timer that ends the `[reflowing]` window opened by a mid-list insertion. */
+	#reflowTimer;
+	/**
+	* When cell geometry changes (zoom), the item nearest the viewport centre is
+	* captured here in `willUpdate` and the scroll position is corrected in
+	* `updated` so that item stays put — rather than the grid anchoring to its
+	* top-left corner.
+	*/
+	#zoomAnchor;
+	/**
+	* Per-item slot name. Each cell renders its own named `<slot>` and the
+	* matching light-DOM child carries `slot="<name>"`, so a child is projected
+	* into exactly one cell. (A single unnamed slot would collapse every child
+	* into the first cell.)
+	*/
+	#slotNames;
+	#slotSeq;
+	#searchRegistry;
+	#unregisterSearchCommands;
+	/** Command registry carrying this grid's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	/** Effective search modes: this component's capability (all three) ∩ the `search-modes` attribute. */
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		for (const [attr, value] of [
+			[`caption-style`, this.captionStyle],
+			[`caption-align`, this.captionAlign],
+			[`caption-position`, this.captionPosition],
+			[`caption-backdrop`, this.captionBackdrop]
+		]) if (!this.hasAttribute(attr)) this.setAttribute(attr, value);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.#mutationObserver ??= new MutationObserver((records) => this.#onChildrenChanged(records));
+		this.#mutationObserver.observe(this, {
+			childList: true,
+			attributeFilter: [`hidden`]
+		});
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#mutationObserver?.disconnect();
+		this.#cancelScrollRaf();
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
+		if (this.#reflowTimer) {
+			clearTimeout(this.#reflowTimer);
+			this.#reflowTimer = 0;
+		}
+	}
+	#onChildrenChanged(records) {
+		const previousLength = this.#items.length;
+		this.#syncItems();
+		this._syncItemStates();
+		this.#noteChildMutation(previousLength, records);
+		this.requestUpdate();
+		this.updateComplete.then(() => this.#emitViewportChange());
+	}
+	/**
+	* When the child list changes mid-list — not a first populate or a wholesale
+	* replace — mark any newcomers for an enter animation and open a short
+	* `[reflowing]` window so the cells that shift slide to their new position
+	* instead of snapping. Removals get the same window (the survivors slide to
+	* close the gap). The window is bounded in time so the transform transition
+	* never bleeds into scroll virtualisation.
+	*
+	* Reads the `MutationRecord`s directly rather than diffing `#items`, because a
+	* `requestUpdate()` between the DOM change and this callback (e.g. a caller
+	* that clears the selection before removing) lets `updated()` re-sync `#items`
+	* first, which would hide the change from a naive diff.
+	*/
+	#noteChildMutation(previousLength, records) {
+		if (!this.hasUpdated || !records || records.length === 0) return;
+		const currentSet = new Set(this.#items);
+		const added = [];
+		let removedCount = 0;
+		for (const record of records) {
+			for (const node of record.addedNodes) if (node.nodeType === Node.ELEMENT_NODE && currentSet.has(node)) added.push(node);
+			for (const node of record.removedNodes) if (node.nodeType === Node.ELEMENT_NODE) removedCount++;
+		}
+		if (added.length === 0 && removedCount === 0) return;
+		if (previousLength === 0 && removedCount === 0) return;
+		if (added.length > 0 && added.length === this.#items.length) return;
+		for (const el of added) this.#entering.add(el);
+		this.toggleAttribute(`reflowing`, true);
+		if (this.#reflowTimer) clearTimeout(this.#reflowTimer);
+		this.#reflowTimer = window.setTimeout(() => {
+			this.#reflowTimer = 0;
+			this.#entering.clear();
+			this.toggleAttribute(`reflowing`, false);
+			this.requestUpdate();
+		}, REFLOW_WINDOW_MS);
+	}
+	#emitViewportChange() {
+		this._dispatch(`grid-list-viewport-change`, { visibleKeys: this.visibleKeys() });
+	}
+	firstUpdated() {
+		const el = this.#viewportRef.value;
+		if (!el) return;
+		this._viewportWidth = el.clientWidth;
+		this._viewportHeight = el.clientHeight;
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				this._viewportWidth = entry.contentRect.width;
+				this._viewportHeight = entry.contentRect.height;
+			}
+		});
+		this.#resizeObserver.observe(el);
+		this.#syncItems();
+		this.requestUpdate();
+	}
+	willUpdate(changed) {
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
+		if (changed.has(`filterPredicate`)) this.#syncItems();
+		if (changed.has(`itemSize`) || changed.has(`gap`)) {
+			this.itemSize = Math.max(MIN_ITEM_SIZE, Math.round(this.itemSize));
+			this.gap = Math.max(0, Math.round(this.gap));
+		}
+		if (changed.has(`captionHeight`)) this.captionHeight = Math.max(0, Math.round(this.captionHeight));
+		if (changed.has(`itemWrap`)) this.#itemWrap = this.itemWrap;
+		if ((changed.has(`itemSize`) || changed.has(`gap`) || changed.has(`captionStyle`) || changed.has(`captionHeight`) || changed.has(`orientation`)) && this.hasUpdated && this.#items.length > 0) {
+			const prevOrientation = changed.get(`orientation`) ?? this.orientation;
+			const horizontal = prevOrientation === `row`;
+			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+			const prevExtent = horizontal ? this._viewportWidth : this._viewportHeight;
+			if (prevExtent > 0 && prevOffset > 1) {
+				const prevItemSize = changed.get(`itemSize`) ?? this.itemSize;
+				const prevGap = changed.get(`gap`) ?? this.gap;
+				const prevCaptionStyle = changed.get(`captionStyle`) ?? this.captionStyle;
+				const prevCaptionHeight = changed.get(`captionHeight`) ?? this.captionHeight;
+				const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
+				const prev = computeGridWindow(this.#items.length, prevItemSize, prevRowHeight, prevGap, this._viewportWidth, this._viewportHeight, prevOffset, prevOrientation);
+				const mainStride = horizontal ? prev.colStride : prev.rowStride;
+				const centerLine = (prevOffset + prevExtent / 2) / mainStride;
+				const lineFloor = Math.max(0, Math.floor(centerLine));
+				const index = horizontal ? Math.min(this.#items.length - 1, lineFloor) : Math.min(this.#items.length - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
+				this.#zoomAnchor = {
+					index,
+					lineFrac: centerLine - lineFloor
+				};
+			}
+		}
+	}
+	/** Full cell height: the square, plus a caption band in `separate` / `under`. */
+	#rowHeight() {
+		const captionBand = this.captionStyle === `separate` || this.captionStyle === `under`;
+		return this.itemSize + (captionBand ? this.captionHeight : 0);
+	}
+	#captionFor(el) {
+		return el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? ``;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.#syncItems();
+		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) this.selection.clearAnchor();
+		if (changed.has(`orientation`)) {
+			const vp = this.#viewportRef.value;
+			if (vp) {
+				if (this.orientation === `row`) {
+					vp.scrollTop = 0;
+					this._scrollTop = 0;
+				} else {
+					vp.scrollLeft = 0;
+					this._scrollLeft = 0;
+				}
+			}
+		}
+		this.#applyZoomAnchor();
+	}
+	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
+	#applyZoomAnchor() {
+		if (!this.#zoomAnchor) return;
+		const { index, lineFrac } = this.#zoomAnchor;
+		this.#zoomAnchor = void 0;
+		const vp = this.#viewportRef.value;
+		if (!vp) return;
+		const win = this.#currentWindow();
+		if (win.horizontal) {
+			if (this._viewportWidth <= 0) return;
+			const targetCenter = (index + lineFrac) * win.colStride;
+			const maxScroll = Math.max(0, win.totalWidth - this._viewportWidth);
+			const next = Math.min(maxScroll, Math.max(0, targetCenter - this._viewportWidth / 2));
+			if (Math.abs(vp.scrollLeft - next) > .5) {
+				vp.scrollLeft = next;
+				this._scrollLeft = next;
+			}
+			return;
+		}
+		if (this._viewportHeight <= 0) return;
+		const targetCenter = ((win.cols > 0 ? Math.floor(index / win.cols) : 0) + lineFrac) * win.rowStride;
+		const maxScroll = Math.max(0, win.totalHeight - this._viewportHeight);
+		const next = Math.min(maxScroll, Math.max(0, targetCenter - this._viewportHeight / 2));
+		if (Math.abs(vp.scrollTop - next) > .5) {
+			vp.scrollTop = next;
+			this._scrollTop = next;
+		}
+	}
+	#syncItems() {
+		this.#items = Array.from(this.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => !el.hidden && (this.filterPredicate === void 0 || this.filterPredicate(el)));
+		for (const el of this.#items) {
+			const name = this.#slotNameFor(el);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+	}
+	#slotNameFor(el) {
+		let name = this.#slotNames.get(el);
+		if (name === void 0) {
+			this.#slotSeq += 1;
+			name = `gl-item-${this.#slotSeq}`;
+			this.#slotNames.set(el, name);
+		}
+		return name;
+	}
+	_getVisibleItems() {
+		return this.#items.filter((el) => {
+			if (el.hidden) return false;
+			return true;
+		});
+	}
+	get count() {
+		return this.#items.length;
+	}
+	/**
+	* Number of cells currently rendered in the shadow DOM. With virtualization
+	* this is roughly the visible rows plus overscan, regardless of how large
+	* `count` is — useful for demos/diagnostics.
+	*/
+	get renderedCount() {
+		return this.renderRoot.querySelectorAll(`.cell`).length;
+	}
+	get selectedItems() {
+		return this.selection.selected;
+	}
+	/** The selection as stable `data-key` / `data-value` strings. */
+	get selectedKeys() {
+		return this.selection.selectedKeys;
+	}
+	select(item) {
+		this.selection.replace(item);
+	}
+	selectMany(items) {
+		this.selection.selectMany(items);
+	}
+	deselect(item) {
+		this.selection.deselect(item);
+	}
+	clearSelection() {
+		this.selection.clear();
+	}
+	selectAll() {
+		if (this.selection.canSelectAll()) this.selection.selectAll();
+	}
+	/**
+	* Replace the selection with the items carrying these keys. Unknown keys are
+	* ignored; survives the host rebuilding the item set. Requires each item to
+	* have a `data-key` (or `data-value`).
+	*/
+	selectKeys(keys) {
+		this.selection.selectKeys(keys, (key) => this.getItem(key));
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (key) => this.getItem(key));
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (key) => this.getItem(key));
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		const el = this.getItem(key);
+		if (!el) return;
+		this.tickled.focus(el);
+		this.#scrollItemIntoView(el);
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		const id = this.tickled.tickledId;
+		return id ? keyForElement(id) : void 0;
+	}
+	getItem(key) {
+		return this.#items.find((el) => keyForElement(el) === key);
+	}
+	getItemByIndex(index) {
+		return this.#items[index];
+	}
+	getKey(item) {
+		return keyForElement(item);
+	}
+	visibleKeys() {
+		const win = this.#currentWindow();
+		return this.#items.slice(win.startIndex, win.endIndex).map((el) => keyForElement(el)).filter((k) => k !== void 0);
+	}
+	/** Adjust the scroll offset so `el` is fully within the viewport. */
+	#scrollItemIntoView(el) {
+		const index = this.#items.indexOf(el);
+		const vp = this.#viewportRef.value;
+		if (index < 0 || !vp) return;
+		const win = this.#currentWindow();
+		if (win.horizontal) {
+			const left = index * win.colStride;
+			const right = left + this.itemSize;
+			const viewLeft = vp.scrollLeft;
+			let next = viewLeft;
+			if (left < viewLeft) next = left;
+			else if (right > viewLeft + this._viewportWidth) next = right - this._viewportWidth;
+			if (next !== viewLeft) {
+				vp.scrollLeft = next;
+				this._scrollLeft = next;
+			}
+			return;
+		}
+		const top = (win.cols > 0 ? Math.floor(index / win.cols) : 0) * win.rowStride;
+		const bottom = top + this.#rowHeight();
+		const viewTop = vp.scrollTop;
+		let next = viewTop;
+		if (top < viewTop) next = top;
+		else if (bottom > viewTop + this._viewportHeight) next = bottom - this._viewportHeight;
+		if (next !== viewTop) {
+			vp.scrollTop = next;
+			this._scrollTop = next;
+		}
+	}
+	_syncItemStates() {
+		for (const el of this.#items) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+		}
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const win = this.#currentWindow();
+		const slice = this.#items.slice(win.startIndex, win.endIndex);
+		const spacerStyle = win.horizontal ? `width:${win.totalWidth}px;height:100%` : `height:${win.totalHeight}px`;
+		const scrollFade = win.horizontal ? `scroll-fade-x` : `scroll-fade-y`;
+		return b`
+      <div
+        class="viewport ${scrollFade}"
+        part="viewport"
+        ${ref(this.#viewportRef)}
+        data-input-mode=${this.tickled.inputMode}
+        @scroll=${this.#onScroll}
+      >
+        <div class="spacer" style=${spacerStyle}>
+          ${repeat(slice, (el) => this.#slotNameFor(el), (el, i) => this.#renderCell(el, win.startIndex + i, win))}
+        </div>
+      </div>
+      ${this.search.renderField()}
+    `;
+	}
+	#renderCell(el, index, win) {
+		const selected = this.selection.selected.has(el);
+		const tickled = this.tickled.isTickled(el);
+		const entering = this.#entering.has(el);
+		const style = this.captionStyle;
+		const separate = style === `separate`;
+		const caption = style === `hidden` ? `` : this.#captionFor(el);
+		const showCaption = caption !== ``;
+		const cellHeight = win.rowStride - this.gap;
+		const x = win.horizontal ? index * win.colStride : columnOf(index, win.cols) * win.colStride;
+		const y = win.horizontal ? Math.max(0, (this._viewportHeight - cellHeight) / 2) : rowOf(index, win.cols) * win.rowStride;
+		const thumbStyle = separate ? `height:${this.itemSize}px` : ``;
+		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
+		return b`
+      <div
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
+        part="item"
+        style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
+        data-index=${index}
+        @click=${(e) => this.#onCellClick(e, el)}
+        @dblclick=${() => this.#onCellActivate(el)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(el)}
+      >
+        <div class="thumb" part="thumb" style=${thumbStyle}>
+          <slot name=${this.#slotNameFor(el)}></slot>
+        </div>
+        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss}>${caption}</div>` : ``}
+      </div>
+    `;
+	}
+	#onScroll;
+	#cancelScrollRaf() {
+		if (this.#scrollRaf !== 0) {
+			cancelAnimationFrame(this.#scrollRaf);
+			this.#scrollRaf = 0;
+		}
+	}
+	#onCellClick(e, item) {
+		this.selection.handleClick(item, e);
+		this._dispatch(`list-item-click`, { item });
+	}
+	#onCellActivate(item) {
+		if (this.interactionMode !== `manual`) this.selection.replace(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	#currentWindow() {
+		return computeGridWindow(this.#items.length, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation);
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], GridListElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], GridListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `item-size`
+})], GridListElement.prototype, "itemSize", void 0);
+__decorate([property({ type: Number })], GridListElement.prototype, "gap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], GridListElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-style`,
+	reflect: true
+})], GridListElement.prototype, "captionStyle", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-align`,
+	reflect: true
+})], GridListElement.prototype, "captionAlign", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-position`,
+	reflect: true
+})], GridListElement.prototype, "captionPosition", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-backdrop`,
+	reflect: true
+})], GridListElement.prototype, "captionBackdrop", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `caption-height`
+})], GridListElement.prototype, "captionHeight", void 0);
+__decorate([property({
+	type: String,
+	attribute: `item-wrap`
+})], GridListElement.prototype, "itemWrap", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], GridListElement.prototype, "searchModes", void 0);
+__decorate([state()], GridListElement.prototype, "_scrollTop", void 0);
+__decorate([state()], GridListElement.prototype, "_scrollLeft", void 0);
+__decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
+__decorate([state()], GridListElement.prototype, "_viewportWidth", void 0);
+GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElement);
+//#endregion
 //#region src/panel/panel.ts
 let PanelElement = class PanelElement extends i {
 	constructor(..._args) {
@@ -19053,6 +21388,8 @@ __decorate([property({
 GroupedItemListerElement = __decorate([safeCustomElement(`ixfx-grouped-item-lister`)], GroupedItemListerElement);
 //#endregion
 //#region src/tree/tree-base.ts
+/** Above this many rows entering / leaving at once, skip the animation entirely. */
+const MAX_ANIMATED_ROWS = 50;
 let TreeBaseElement = class TreeBaseElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -19075,8 +21412,19 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}
 		});
 		this._focusedDepth = 0;
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.tree-label`,
+			highlightKey: `incr-search-highlight`
+		}) });
 		this.#config = { indent: 20 };
+		this.#renderedKeys = [];
+		this.#lastNodeByKey = /* @__PURE__ */ new Map();
+		this.#enteringKeys = /* @__PURE__ */ new Set();
+		this.#leaving = /* @__PURE__ */ new Map();
+		this.#leavingAnimating = /* @__PURE__ */ new Set();
+		this.#treeAnimReady = false;
 		this.#onKeyDown = (event) => {
+			if (this.search.isOpen) return;
 			const nodes = this.#getAllNodes();
 			if (nodes.length === 0) return;
 			if ((event.ctrlKey || event.metaKey) && event.key === `a`) {
@@ -19137,7 +21485,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 							bubbles: true,
 							composed: true
 						}));
-					} else if (current.depth > 1) {
+					} else if (current.depth > 0) {
 						const parentDepth = current.depth - 1;
 						for (let i = currentIdx - 1; i >= 0; i--) if (nodes[i].depth === parentDepth) {
 							this.#setFocusedIndex(i);
@@ -19197,12 +21545,111 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	get selectedNodes() {
 		return this._selectedNodes;
 	}
+	#unregisterSearchCommands;
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#ownedRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#ownedRegistry, this.search);
+	}
 	#pendingNode;
 	#pendingController;
 	#modelUnsubscribe;
 	#anchor;
 	#ownedRegistry;
 	#config;
+	#renderedKeys;
+	#lastNodeByKey;
+	#enteringKeys;
+	#leaving;
+	#leavingAnimating;
+	#treeAnimReady;
+	willUpdate(changedProps) {
+		super.willUpdate(changedProps);
+		this.#diffVisibleNodes();
+	}
+	#diffVisibleNodes() {
+		const nodes = this.root ? this.#getAllNodes() : [];
+		const nowKeys = new Set(nodes.map((n) => n.node.item.key));
+		this.#enteringKeys.clear();
+		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();
+			for (const key of this.#renderedKeys) if (!nowKeys.has(key) && !this.#leaving.has(key)) {
+				const last = this.#lastNodeByKey.get(key);
+				if (last) this.#leaving.set(key, last);
+			}
+		}
+		for (const key of [...this.#leaving.keys()]) if (nowKeys.has(key)) {
+			this.#leaving.delete(key);
+			this.#leavingAnimating.delete(key);
+		}
+		if (this.#leaving.size > MAX_ANIMATED_ROWS) {
+			this.#leaving.clear();
+			this.#leavingAnimating.clear();
+		}
+	}
+	/** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
+	_isLeaving(node) {
+		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;
+	}
+	#runItemAnimations() {
+		if (this.#enteringKeys.size > 0) {
+			for (const el of this.renderRoot.querySelectorAll(`.item`)) {
+				const key = el.dataset.key;
+				if (key !== void 0 && this.#enteringKeys.has(key)) animateListItemIn(el);
+			}
+			this.#enteringKeys.clear();
+		}
+		if (this.#leaving.size > 0) for (const el of this.renderRoot.querySelectorAll(`.item.leaving`)) {
+			const key = el.dataset.key;
+			if (key === void 0 || this.#leavingAnimating.has(key)) continue;
+			this.#leavingAnimating.add(key);
+			animateListItemOut(el).then(() => {
+				this.#leaving.delete(key);
+				this.#leavingAnimating.delete(key);
+				this.requestUpdate();
+			});
+		}
+		const visible = this.root ? this.#getAllNodes() : [];
+		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);
+		this.#treeAnimReady = true;
+	}
 	updated(changedProps) {
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
@@ -19237,6 +21684,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		if (changedProps.has(`selectedNode`) && this.selectedNode) {
 			if (changedProps.get(`selectedNode`) !== this.selectedNode) this.tickled.setTickled(this.selectedNode.item.key);
 		}
+		this.#runItemAnimations();
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -19255,11 +21703,14 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			execute: () => this.deselectAll()
 		});
 		this.registry = registry;
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
 		if (this.#ownedRegistry) {
 			this.#ownedRegistry.unregister(`select-all`);
 			this.#ownedRegistry.unregister(`deselect-all`);
@@ -19357,6 +21808,28 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
+	/** Expand ancestors + move the cursor to `key`, without touching the selection (search "navigate" mode). */
+	revealKey(key) {
+		if (!this.root?.children) return false;
+		const path = this.#findNodePath(this.root.children, (n) => n.item.key === key);
+		if (!path) return false;
+		for (let i = 0; i < path.length - 1; i++) {
+			this.#applyExclusivity(path[i]);
+			this._expandedKeys.add(path[i]);
+		}
+		this.tickled.setTickled(key);
+		this.requestUpdate();
+		this.updateComplete.then(() => this.#scrollKeyIntoView(key));
+		return true;
+	}
+	/** Replace the selection with `nodes` (subject to `selectionFilter`) — search "select" mode. */
+	selectMany(nodes) {
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes = new Set([...nodes].filter((n) => this.#canSelect(n)));
+		this.selectedNode = [...this._selectedNodes].at(-1);
+		this.#dispatchSelect(prev);
+		this.requestUpdate();
+	}
 	getNodes() {
 		if (!this.root?.children) return [];
 		const result = [];
@@ -19401,9 +21874,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}
 		}
 	}
-	renderNodeContent(node, _depth) {
+	renderNodeContent(node, depth) {
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		return b`
       <span class="tree-caret">
         ${isBranch ? b`<ixfx-icon class="caret-icon" name="chevron-down" .rotate=${isExpanded ? A : `-90deg`}></ixfx-icon>` : ``}
@@ -19684,9 +22157,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	_isFocused(node) {
 		return this.tickled.isTickled(node.item.key);
 	}
-	_isExpanded(node) {
+	_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, 0));
+		if (this.filterPredicate && node.children) return node.children.some((child) => this.#matchesFilter(child, depth + 1));
 		return false;
 	}
 	#matchesFilter(node, depth) {
@@ -19760,14 +22233,14 @@ let TreeBaseElement = class TreeBaseElement extends i {
 				node: n,
 				depth: d
 			});
-			if (this._expandedKeys.has(n.item.key) && n.children) for (const child of n.children) visit(child, d + 1);
+			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, 0);
+		return this.#getVisibleNodes(this.root, -1);
 	}
 	#getFocusedIndex() {
 		const nodes = this.#getAllNodes();
@@ -19817,18 +22290,19 @@ let TreeBaseElement = class TreeBaseElement extends i {
       >
         ${this.root ? this.#renderNodes(nodes) : A}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	#onDblClick;
 	#renderNodes(nodes) {
-		if (nodes.length === 0 && this.#pendingNode) return b`
+		if (nodes.length === 0 && this.#pendingNode && this.#leaving.size === 0) return b`
         <div class="tree-loading">
           ${this.renderLoadingIndicator()}
         </div>
       `;
 		return b`
       <ul class="tree-list" role="tree">
-        ${nodes.map(({ node, depth }) => this._renderNode(node, depth))}
+        ${repeat(this.#weaveLeaving(nodes), ({ node }) => node.item.key, ({ node, depth }) => this._renderNode(node, depth))}
       </ul>
     `;
 	}
@@ -19836,15 +22310,17 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this.#pendingNode === node;
-		const isFiltered = this.filterPredicate !== void 0 && !this.#matchesFilter(node, depth);
+		const isFiltered = this._isFilteredOut(node, depth);
+		const isLeaving = this._isLeaving(node);
 		return b`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${isFiltered ? `filtered` : ``} ${isLeaving ? `leaving` : ``}"
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : A}
+        aria-hidden=${isLeaving ? `true` : A}
         aria-level=${depth + 1}
         data-key=${node.item.key}
         style=${`--depth: ${depth}`}
@@ -19871,6 +22347,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listSearchStyles,
 			i$3`
       :host {
       --tree-bg: var(--surface-3);
@@ -19881,16 +22358,23 @@ let TreeBaseElement = class TreeBaseElement extends i {
       --tree-caret-size: 10px;
       --tree-radius: var(--radius-s);
 
+      position: relative;
       display: block;
-      overflow: auto;
+      overflow: hidden;
       box-sizing: border-box;
       background: var(--tree-bg);
       color: var(--tree-text);
     }
 
+    /* min-height (not height) so the tree still grows to its content when the
+       host has no explicit height; when it does, this fills it and scrolls.
+       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 {
       outline: none;
       min-height: 100%;
+      max-height: 100%;
+      overflow: auto;
     }
 
     .tree-list {
@@ -19965,6 +22449,12 @@ let TreeBaseElement = class TreeBaseElement extends i {
       display: none;
     }
 
+    /* Fading-out ghost row (see #runItemAnimations) — inert while it collapses. */
+    .item.leaving {
+      pointer-events: none;
+      overflow: hidden;
+    }
+
     ::highlight(incr-search-highlight) {
       background: var(--search-highlight-bg, var(--accent));
       color: var(--search-highlight-color, var(--accent-text, #fff));
@@ -19998,6 +22488,11 @@ __decorate([property({
 	attribute: `disable-keyboard-navigation`
 })], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "registry", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], TreeBaseElement.prototype, "searchModes", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
 TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
@@ -20024,11 +22519,11 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 			if (node.item.icon) this.#depthsWithIcons.add(depth);
 			if (node.children) for (const child of node.children) visit(child, depth + 1);
 		};
-		if (this.root) visit(this.root, 0);
+		if (this.root) visit(this.root, -1);
 	}
 	renderNodeContent(node, depth) {
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const icon = node.item.icon;
 		const tooltip = node.item.tooltip;
 		const caretAndLabel = b`
@@ -20074,16 +22569,19 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		const selected = this._isSelected(node);
 		const tickled = this._isFocused(node);
 		const isBranch = node.item.isLeaf !== true;
-		const isExpanded = this._isExpanded(node);
+		const isExpanded = this._isExpanded(node, depth);
 		const isPending = this._pendingNode === node;
 		const hasIconAtDepth = this.#depthsWithIcons.has(depth);
+		const isLeaving = this._isLeaving(node);
+		const isFiltered = this._isFilteredOut(node, depth);
 		return b`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``}"
+        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${isFiltered ? `filtered` : ``}"
         data-key=${node.item.key}
         role="treeitem"
         aria-selected=${selected}
         aria-expanded=${isBranch ? isExpanded : A}
+        aria-hidden=${isLeaving ? `true` : A}
         aria-level=${depth + 1}
         style=${`--depth: ${depth}`}
         @click=${(e) => this._handleItemClick(node, depth, e)}
@@ -20347,15 +22845,14 @@ function createTreeListAdapter(toTreeItem, options) {
 //#region src/vertical-list/vertical-list.ts
 const ITEM_SELECTOR = `li, [data-list-item]`;
 let VerticalListElement = class VerticalListElement extends i {
-	constructor(..._args2) {
-		super(..._args2);
+	constructor(..._args) {
+		super(..._args);
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
 		this.itemWrap = `stop`;
-		this._searchVisible = false;
-		this._searchQuery = ``;
 		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.#wrappedElements = /* @__PURE__ */ new Set();
+		this.#animatedItems = /* @__PURE__ */ new WeakSet();
 		this.selection = new ListSelectionController({
 			getOrderedItems: () => this._getVisibleItems(),
 			isSelectable: (el) => this._isCheckable(el),
@@ -20363,11 +22860,13 @@ let VerticalListElement = class VerticalListElement extends i {
 				selectionMode: this.selectionMode,
 				interactionMode: this.interactionMode
 			}),
+			getKey: keyForElement,
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this._dispatch(`list-select`, {
 					selected,
-					previous
+					previous,
+					selectedKeys: this.selection.selectedKeys
 				});
 			}
 		});
@@ -20382,6 +22881,11 @@ let VerticalListElement = class VerticalListElement extends i {
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.itemWrap
 		});
+		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: `vertical-list-search`
+		}) });
 		this._onPointerOver = (e) => {
 			const item = this._findListItem(e.composedPath());
 			if (item) this.tickled.handlePointerEnter(item);
@@ -20390,11 +22894,7 @@ let VerticalListElement = class VerticalListElement extends i {
 			this.tickled.handlePointerLeave(e);
 		};
 		this._onKeyDown = (e) => {
-			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
-				e.preventDefault();
-				this._openSearch();
-				return;
-			}
+			if (this.search.isOpen) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
@@ -20402,7 +22902,6 @@ let VerticalListElement = class VerticalListElement extends i {
 				}
 				return;
 			}
-			if (this._searchVisible) return;
 			switch (e.key) {
 				case `ArrowDown`:
 					e.preventDefault();
@@ -20450,36 +22949,31 @@ let VerticalListElement = class VerticalListElement extends i {
 			const item = this._findListItem(e.composedPath());
 			if (item) this._activateItem(item);
 		};
-		this._onSearchInput = (e) => {
-			const input = e.target;
-			this._searchQuery = input.value;
-			this.#search?.setQuery(this._searchQuery);
-		};
-		this._onSearchKeydown = (e) => {
-			if (e.key === `Escape`) {
-				e.stopPropagation();
-				this._closeSearch();
-			} else if (e.key === `ArrowDown`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`next`);
-			} else if (e.key === `ArrowUp`) {
-				e.preventDefault();
-				this.tickled.handleKeyboardNavigation(`previous`);
-			} else if (e.key === `Enter`) {
-				e.preventDefault();
-				e.stopPropagation();
-				const id = this.tickled.tickledId ?? this._getVisibleItems()[0];
-				if (id) {
-					this._dispatch(`list-item-click`, { item: id });
-					this._activateItem(id);
-					this._closeSearch();
-				}
-			}
-		};
 	}
-	#search;
 	#customWrappers;
 	#wrappedElements;
+	/** Watches for items added to the light DOM so they can be animated in. */
+	#itemObserver;
+	/** Items that have already played (or been skipped for) their enter animation. */
+	#animatedItems;
+	#searchRegistry;
+	#unregisterSearchCommands;
+	/** Command registry carrying this list's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -20488,6 +22982,11 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#animatedItems.add(el);
+		this.#itemObserver ??= new MutationObserver((records) => this.#onItemsMutated(records));
+		this.#itemObserver.observe(this, { childList: true });
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -20496,20 +22995,35 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
-		this.#search?.dispose();
-		this.#search = void 0;
+		this.#itemObserver?.disconnect();
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
 	}
-	firstUpdated() {
-		this.#search = createElementIncrSearch({
-			container: this,
-			itemSelector: ITEM_SELECTOR,
-			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
-			highlightKey: `vertical-list-search`
-		});
+	/**
+	* Animate in items appended to the light DOM (however they got there —
+	* {@link addItem}, direct `appendChild`, a framework binding). A bulk populate
+	* (roughly everything at once) is left alone, as are the wrapper `<li>`s the
+	* checked-mode plumbing shuffles around.
+	*/
+	#onItemsMutated(records) {
+		if (!this.isConnected) return;
+		const fresh = [];
+		for (const record of records) for (const node of record.addedNodes) {
+			if (!(node instanceof HTMLElement) || node.parentElement !== this) continue;
+			if (!node.matches(ITEM_SELECTOR)) continue;
+			if (this.#animatedItems.has(node) || this.#customWrappers.has(node) || this.#wrappedElements.has(node)) continue;
+			this.#animatedItems.add(node);
+			fresh.push(node);
+		}
+		if (fresh.length === 0) return;
+		const total = this.querySelectorAll(ITEM_SELECTOR).length;
+		if (fresh.length >= total) return;
+		for (const el of fresh) animateListItemIn(el);
 	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
 		if (changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
 			const previousSelected = this.selection.selected;
@@ -20544,8 +23058,21 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.appendChild(el);
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 	}
+	/**
+	* Collapse + fade `item` out, then detach it. The rows below slide up to
+	* close the gap. Resolves once the element has actually been removed.
+	* Under `prefers-reduced-motion: reduce` it's removed immediately.
+	*/
 	removeItem(item) {
-		item.remove();
+		this.selection.deselect(item);
+		return animateListItemOut(item).then(() => {
+			item.remove();
+			if (this.interactionMode === `checked`) this._syncCheckboxes();
+		});
+	}
+	/** {@link removeItem} for several items at once. */
+	removeItems(items) {
+		return Promise.all([...items].map((item) => this.removeItem(item))).then(() => void 0);
 	}
 	clearItems() {
 		this.#customWrappers.clear();
@@ -20564,11 +23091,13 @@ let VerticalListElement = class VerticalListElement extends i {
 		if (this.interactionMode === `checked`) this._syncCheckboxes();
 	}
 	/**
-	* Dispatch a command to this list. No-op by default.
-	* Intended for use with `ixfx-grouped-item-lister`'s `dispatch()` method,
-	* which forwards commands to all sub-components.
+	* Dispatch a command to this list — used by `ixfx-grouped-item-lister` to
+	* forward commands to all sub-components. Routes through the command registry
+	* (so `list.search.*` and any other registered commands work).
 	*/
-	dispatch(_commandId, _args) {}
+	dispatch(commandId, args) {
+		this.#searchRegistry?.invoke(commandId, args);
+	}
 	select(item) {
 		this.selection.replace(item);
 	}
@@ -20584,6 +23113,43 @@ let VerticalListElement = class VerticalListElement extends i {
 	selectAll() {
 		if (this.selection.canSelectAll()) this.selection.selectAll();
 	}
+	/** The selection as stable `data-key` / `data-value` strings. */
+	get selectedKeys() {
+		return this.selection.selectedKeys;
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		const id = this.tickled.tickledId;
+		return id ? keyForElement(id) : void 0;
+	}
+	/** Replace the selection with the items carrying these keys (unknown keys ignored). */
+	selectKeys(keys) {
+		this.selection.selectKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (key) => this.#itemForKey(key));
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		const el = this.#itemForKey(key);
+		if (!el) return;
+		this.tickled.focus(el);
+		el.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+	}
+	#itemForKey(key) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (this.#wrappedElements.has(el)) continue;
+			if (keyForElement(el) === key) return el;
+		}
+	}
 	*selectedFilter(kind) {
 		const wanted = (el) => {
 			switch (kind) {
@@ -20741,22 +23307,15 @@ let VerticalListElement = class VerticalListElement extends i {
 			composed: true
 		}));
 	}
-	_openSearch() {
-		this._searchVisible = true;
-		this.updateComplete.then(() => this._searchInputEl?.focus());
-	}
-	_closeSearch() {
-		this._searchVisible = false;
-		this._searchQuery = ``;
-		this.#search?.clearQuery();
-		this.focus();
-	}
 	_activateItem(item) {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
 	}
 	static {
-		this.styles = [themeFallbacks, i$3`
+		this.styles = [
+			themeFallbacks,
+			listSearchStyles,
+			i$3`
     :host {
       display: block;
       position: relative;
@@ -20807,6 +23366,10 @@ let VerticalListElement = class VerticalListElement extends i {
       display: flex;
       align-items: center;
       padding: var(--ixfx-list-item-padding);
+      /* Inset each row from the scroll container's edges (margin, not padding:
+         padding is inside the border box, so the tickle/selection outlines
+         would still sit flush against the edge and be clipped). */
+      margin: 0 var(--list-gutter, 4px);
       min-height: var(--list-item-height, 28px);
       cursor: pointer;
       user-select: none;
@@ -20819,6 +23382,7 @@ let VerticalListElement = class VerticalListElement extends i {
     /* Custom shadow-DOM components handle their own internal layout/padding */
     ::slotted([data-list-item]) {
       display: block;
+      margin: 0 var(--list-gutter, 4px);
       cursor: pointer;
       user-select: none;
       transition: background var(--transition, 0.1s ease-out),
@@ -20874,49 +23438,8 @@ let VerticalListElement = class VerticalListElement extends i {
       color: inherit;
       outline: var(--item-border-tickled);
     }
-
-    .search-overlay {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      z-index: 10;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      background: var(--surface-4, #2a2a2a);
-      border: 1px solid var(--border, #444);
-      border-radius: var(--radius-m, 4px);
-      padding: 4px 6px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    }
-
-    .search-overlay[hidden] {
-      display: none;
-    }
-
-    .search-input {
-      background: transparent;
-      border: none;
-      outline: none;
-      color: inherit;
-      font-size: var(--text-m, 0.875em);
-      min-width: 140px;
-    }
-
-    .search-close {
-      background: transparent;
-      border: none;
-      color: var(--surface-muted-text, #888);
-      cursor: pointer;
-      font-size: 1.1em;
-      line-height: 1;
-      padding: 0 2px;
-    }
-
-    .search-close:hover {
-      color: inherit;
-    }
-  `];
+  `
+		];
 	}
 	render() {
 		return b`
@@ -20924,21 +23447,7 @@ let VerticalListElement = class VerticalListElement extends i {
         <ul part="list">
           <slot></slot>
         </ul>
-        <div
-          class="search-overlay"
-          part="search-overlay"
-          ?hidden=${!this._searchVisible}
-        >
-          <input
-            type="text"
-            class="search-input"
-            placeholder="Search…"
-            .value=${this._searchQuery}
-            @input=${this._onSearchInput}
-            @keydown=${this._onSearchKeydown}
-          />
-          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
-        </div>
+        ${this.search.renderField()}
       </div>
     `;
 	}
@@ -20957,9 +23466,11 @@ __decorate([property({
 	attribute: `item-wrap`
 })], VerticalListElement.prototype, "itemWrap", void 0);
 __decorate([property({ attribute: false })], VerticalListElement.prototype, "checkboxRenderer", void 0);
-__decorate([state()], VerticalListElement.prototype, "_searchVisible", void 0);
-__decorate([state()], VerticalListElement.prototype, "_searchQuery", void 0);
-__decorate([query(`.search-input`)], VerticalListElement.prototype, "_searchInputEl", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], VerticalListElement.prototype, "searchModes", void 0);
 VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 //#region src/grouped-item-lister/vertical-list-adapter.ts
@@ -25457,6 +27968,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 	constructor(..._args) {
 		super(..._args);
 		this.headers = false;
+		this.stretchLastColumn = false;
 		this.interactionMode = `standard`;
 		this.selectionFilter = `leaf`;
 		this.exclusivity = `none`;
@@ -25468,6 +27980,10 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		this.#resizingDepth = -1;
 		this.#resizeStartX = 0;
 		this.#resizeStartWidth = 0;
+		this.search = new ListSearchController(this, { adapter: createTreeListSearchAdapter(this, {
+			labelSelector: `.label`,
+			highlightKey: `incr-search-highlight`
+		}) });
 		this.tickled = new TickledController(this, { getItems: () => {
 			const items = [];
 			for (let depth = 0; depth < this._columns.length; depth++) {
@@ -25477,6 +27993,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 			return items;
 		} });
 		this.#onKeyDown = (event) => {
+			if (this.search.isOpen) return;
 			const currentDepth = this.#getTickledDepthOrDefault();
 			const col = this._columns[currentDepth];
 			if (!col || col.length === 0) {
@@ -25683,9 +28200,31 @@ let MillerBaseElement = class MillerBaseElement extends i {
 	#resizeStartX;
 	#resizeStartWidth;
 	#modelUnsubscribe;
+	#searchRegistry;
+	#unregisterSearchCommands;
+	/** Command registry carrying this component's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
 	#buildTickledId(node, depth) {
 		return `${depth}:${node.item.key}`;
 	}
+	/** The node column 0 renders the children of: `viewRoot` when rebased, else `root`. */
+	get #displayRoot() {
+		return this.viewRoot ?? this.root;
+	}
 	#getTickledDepth() {
 		const id = this.tickled.tickledId;
 		if (!id) return void 0;
@@ -25694,16 +28233,20 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		return Number(id.substring(0, colonIndex));
 	}
 	updated(changedProps) {
+		if (changedProps.has(`searchModes`)) this.#syncSearchCommands();
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
-			this._columns = this.root.children ? [this.root.children] : [];
+			if (this.viewRoot !== void 0) this.viewRoot = void 0;
 			this._selectedByDepth.clear();
 			this._selectedKeys = /* @__PURE__ */ new Set();
 			this._selectedNodes.clear();
 			this.#lastSelectedNode = void 0;
 			this.#anchor = void 0;
 			this.tickled.clearTickled();
+			const display = this.#displayRoot;
+			this._columns = display?.children ? [display.children] : [];
 		}
+		if (changedProps.has(`viewRoot`)) this.#applyViewRoot();
 		if (changedProps.has(`model`)) {
 			this.#modelUnsubscribe?.();
 			this.#modelUnsubscribe = void 0;
@@ -25745,10 +28288,18 @@ let MillerBaseElement = class MillerBaseElement extends i {
 			});
 		}
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
+	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
 	}
 	getConfig() {
 		const columnWidths = {};
@@ -25844,15 +28395,17 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		return results;
 	}
 	/**
-	* Programmatically navigate to a node by key path.
+	* Programmatically navigate to a node by key path, relative to the current
+	* view root (rebased or full tree).
 	*/
 	navigateTo(keys) {
-		if (!this.root?.children) return false;
+		const display = this.#displayRoot;
+		if (!display?.children) return false;
 		this.#abortPending();
 		this._selectedByDepth.clear();
 		this.tickled.clearTickled();
-		const newColumns = [this.root.children];
-		let currentColumn = this.root.children;
+		const newColumns = [display.children];
+		let currentColumn = display.children;
 		let success = true;
 		let lastNode;
 		let lastDepth = 0;
@@ -25887,13 +28440,51 @@ let MillerBaseElement = class MillerBaseElement extends i {
 	* Programmatically navigate to the first node (breadth-first) matching a predicate.
 	*/
 	navigateToNode(predicate) {
-		if (!this.root?.children) return false;
-		const keyPath = this.#findNodePath(this.root.children, predicate);
+		const display = this.#displayRoot;
+		if (!display?.children) return false;
+		const keyPath = this.#findNodePath(display.children, predicate);
 		if (!keyPath) return false;
 		return this.navigateTo(keyPath);
 	}
+	/** Open the columns down to `key` and move the cursor to it, without changing the selection (search "navigate" mode). */
+	revealKey(key) {
+		const display = this.#displayRoot;
+		if (!display?.children) return false;
+		const path = this.#findNodePath(display.children, (n) => n.item.key === key);
+		if (!path) return false;
+		const columns = [display.children];
+		let current = display.children;
+		let lastNode;
+		let lastDepth = 0;
+		for (let depth = 0; depth < path.length; depth++) {
+			const node = current.find((n) => n.item.key === path[depth]);
+			if (!node) return false;
+			lastNode = node;
+			lastDepth = depth;
+			if (node.children && node.children.length > 0) {
+				columns.push(node.children);
+				current = node.children;
+			} else break;
+		}
+		this._columns = columns;
+		if (lastNode) this.tickled.setTickled(this.#buildTickledId(lastNode, lastDepth));
+		this.requestUpdate();
+		this.#scrollNavigatedItemIntoView();
+		return true;
+	}
+	/** Replace the selection with `nodes` (search "select" mode). */
+	selectMany(nodes) {
+		const arr = this.selectionFilter === `none` ? [] : [...nodes];
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes = new Set(arr);
+		this._selectedKeys = new Set(arr.map((n) => n.item.key));
+		this.#lastSelectedNode = arr.at(-1);
+		this.#dispatchSelectEvent(prev);
+		this.requestUpdate();
+	}
 	getNodes() {
-		if (!this.root?.children) return [];
+		const display = this.#displayRoot;
+		if (!display?.children) return [];
 		const result = [];
 		const visit = (node, depth) => {
 			result.push({
@@ -25902,7 +28493,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 			});
 			if (node.children) for (const child of node.children) visit(child, depth + 1);
 		};
-		for (const child of this.root.children) visit(child, 0);
+		for (const child of display.children) visit(child, 0);
 		return result;
 	}
 	#findNodePath(nodes, predicate, prefix = []) {
@@ -25915,6 +28506,124 @@ let MillerBaseElement = class MillerBaseElement extends i {
 			}
 		}
 	}
+	/**
+	* Re-render the columns for the current `#displayRoot`, clearing selection.
+	* Runs on every `viewRoot` change.
+	*/
+	#applyViewRoot() {
+		this.#abortPending();
+		const prev = new Set(this._selectedNodes);
+		this._selectedByDepth.clear();
+		this._selectedKeys = /* @__PURE__ */ new Set();
+		this._selectedNodes.clear();
+		this.#lastSelectedNode = void 0;
+		this.#anchor = void 0;
+		this.tickled.clearTickled();
+		const display = this.#displayRoot;
+		if (display?.children !== void 0) {
+			this._columns = display.children ? [display.children] : [];
+			this._loadingDepth = void 0;
+		} else if (display) {
+			this._columns = [];
+			this.#loadUnloadedChildren(display, -1, false);
+		} else {
+			this._columns = [];
+			this._loadingDepth = void 0;
+		}
+		if (prev.size > 0) this.#dispatchSelectEvent(prev);
+	}
+	/**
+	* Rebase the view to show `target`'s children in column 0 (Finder column-view
+	* behavior on double-click), keeping the full tree in `root`.
+	*
+	* - Pass a `MillerNode` (used as-is) or a key (looked up in the full tree).
+	* - Pass `undefined` to restore the full-tree view.
+	* - Rebasing to the true root is equivalent to restoring the full view.
+	* - Leaves are refused (returns `false`).
+	*
+	* Selection is cleared; all depths, headers, and key paths are relative to
+	* the new view root. Fires a `rebase` event when the view actually changes.
+	* Returns `false` when nothing changed (unknown key, leaf, or same view).
+	*/
+	rebaseTo(target) {
+		if (target === void 0) return this.#clearViewRoot();
+		const node = typeof target === `string` ? this.#findNodeByKey(target) : target;
+		if (!node || node.item.isLeaf === true) return false;
+		if (node === this.viewRoot || node.item.key === this.viewRoot?.item.key) return false;
+		if (node === this.root || !this.viewRoot && node.item.key === this.root?.item.key) return this.#clearViewRoot();
+		this.viewRoot = node;
+		this.#dispatchRebaseEvent();
+		return true;
+	}
+	/**
+	* Rebase one level up from the current view root (no-op at the full tree).
+	* Fires a `rebase` event when the view actually changes.
+	*/
+	rebaseUp() {
+		if (!this.viewRoot) return false;
+		const parent = this.#findParentOf(this.viewRoot);
+		if (!parent) return false;
+		if (parent === this.root) return this.#clearViewRoot();
+		this.viewRoot = parent;
+		this.#dispatchRebaseEvent();
+		return true;
+	}
+	#clearViewRoot() {
+		if (this.viewRoot === void 0) return false;
+		this.viewRoot = void 0;
+		this.#dispatchRebaseEvent();
+		return true;
+	}
+	#dispatchRebaseEvent() {
+		const viewRoot = this.viewRoot;
+		const detail = {
+			viewRoot,
+			path: viewRoot ? this.#pathToRoot(viewRoot) : []
+		};
+		this.dispatchEvent(new CustomEvent(`rebase`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#findNodeByKey(key) {
+		if (!this.root) return void 0;
+		if (this.root.item.key === key) return this.root;
+		return this.#findNodeIn(this.root.children ?? [], key);
+	}
+	#findNodeIn(nodes, key) {
+		for (const node of nodes) {
+			if (node.item.key === key) return node;
+			if (node.children) {
+				const found = this.#findNodeIn(node.children, key);
+				if (found) return found;
+			}
+		}
+	}
+	/** Find the parent of `target` (by reference, falling back to key) in the full tree. */
+	#findParentOf(target) {
+		if (!this.root || target === this.root) return void 0;
+		return this.#findParentIn(this.root, target);
+	}
+	#findParentIn(node, target) {
+		if (!node.children) return void 0;
+		for (const child of node.children) {
+			if (child === target || child.item.key === target.item.key) return node;
+			const found = this.#findParentIn(child, target);
+			if (found) return found;
+		}
+	}
+	/** Ancestry chain from the true root down to and including `target`. */
+	#pathToRoot(target) {
+		const chain = [target];
+		let current = this.#findParentOf(target);
+		while (current) {
+			chain.unshift(current);
+			if (current === this.root) break;
+			current = this.#findParentOf(current);
+		}
+		return chain;
+	}
 	renderColumnContent(nodes, depth) {
 		console.warn(`ixfx-miller-base: renderColumnContent not overridden. depth=${depth}, nodes=${nodes.length}`);
 		return A;
@@ -26041,7 +28750,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 	*/
 	#buildPath(depth) {
 		const path = [];
-		if (this.root) path.push(this.root);
+		if (this.#displayRoot) path.push(this.#displayRoot);
 		for (let d = 0; d < depth; d++) {
 			const sel = this._selectedByDepth.get(d);
 			if (sel) path.push(sel);
@@ -26144,57 +28853,8 @@ let MillerBaseElement = class MillerBaseElement extends i {
 			this.requestUpdate();
 			return;
 		}
-		if (node.children === void 0) {
-			this._columns = this._columns.slice(0, depth + 1);
-			this._loadingDepth = depth + 1;
-			this.#pendingNode = node;
-			const controller = new AbortController();
-			this.#pendingController = controller;
-			this.dispatchEvent(new CustomEvent(`expand`, {
-				detail: {
-					node,
-					depth
-				},
-				bubbles: true,
-				composed: true
-			}));
-			const applyChildren = (children) => {
-				if (controller.signal.aborted) return;
-				node.children = children;
-				this.#pendingNode = void 0;
-				this.#pendingController = void 0;
-				this._loadingDepth = void 0;
-				const cols = this._columns.slice(0, depth + 1);
-				if (children.length > 0) cols.push(children);
-				this._columns = cols;
-			};
-			const handleError = (err) => {
-				if (err.name !== `AbortError`) console.error(err);
-				node.children = [];
-				this.#pendingNode = void 0;
-				this.#pendingController = void 0;
-				this._loadingDepth = void 0;
-				this.requestUpdate();
-			};
-			if (this.model || this.loadChildren) {
-				if (this.#expandTimer !== void 0) clearTimeout(this.#expandTimer);
-				this.#expandTimer = setTimeout(() => {
-					this.#expandTimer = void 0;
-					if (this.#pendingNode !== node) return;
-					(this.model ? this.model.getChildren(node, depth, controller.signal) : collectDataResult(this.loadChildren({
-						node,
-						depth
-					}, controller.signal), controller.signal)).then((children) => applyChildren([...children])).catch(handleError);
-				}, EXPAND_DEBOUNCE_MS);
-			} else {
-				this._loadingDepth = void 0;
-				this.#pendingNode = void 0;
-				this.#pendingController = void 0;
-				const newColumns = this._columns.slice(0, depth + 1);
-				newColumns.push([]);
-				this._columns = newColumns;
-			}
-		} else {
+		if (node.children === void 0) this.#loadUnloadedChildren(node, depth, true);
+		else {
 			const newColumns = this._columns.slice(0, depth + 1);
 			newColumns.push(node.children);
 			this._columns = newColumns;
@@ -26208,6 +28868,68 @@ let MillerBaseElement = class MillerBaseElement extends i {
 			}));
 		}
 	}
+	/**
+	* Fetch children for a node whose `children === undefined` and show them as
+	* the column after `parentDepth` (with the loading placeholder meanwhile).
+	* Shared by branch expansion (`parentDepth` = the branch's column) and view
+	* rebasing (`parentDepth` = -1, so the children become column 0).
+	*
+	* The `depth` reported to `loadChildren`/`model.getChildren` is the node's
+	* 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) {
+		const nodeDepth = parentDepth + 1;
+		this._columns = this._columns.slice(0, nodeDepth);
+		this._loadingDepth = nodeDepth;
+		this.#pendingNode = node;
+		const controller = new AbortController();
+		this.#pendingController = controller;
+		if (fireExpandEvent) this.dispatchEvent(new CustomEvent(`expand`, {
+			detail: {
+				node,
+				depth: parentDepth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		const applyChildren = (children) => {
+			if (controller.signal.aborted) return;
+			node.children = children;
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this._loadingDepth = void 0;
+			const cols = this._columns.slice(0, nodeDepth);
+			if (children.length > 0) cols.push(children);
+			this._columns = cols;
+		};
+		const handleError = (err) => {
+			if (err.name !== `AbortError`) console.error(err);
+			node.children = [];
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			this._loadingDepth = void 0;
+			this.requestUpdate();
+		};
+		if (this.model || this.loadChildren) {
+			if (this.#expandTimer !== void 0) clearTimeout(this.#expandTimer);
+			this.#expandTimer = setTimeout(() => {
+				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);
+		} else {
+			this._loadingDepth = void 0;
+			this.#pendingNode = void 0;
+			this.#pendingController = void 0;
+			const newColumns = this._columns.slice(0, nodeDepth);
+			newColumns.push([]);
+			this._columns = newColumns;
+		}
+	}
 	#onCheckboxClick(node) {
 		const currentlySelected = this._selectedKeys.has(node.item.key);
 		if (!!node.children?.length ? this.#allDescendantsSelected(node) : currentlySelected) this.#applyCheckedToggle(node, false);
@@ -26277,7 +28999,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 	#onResizeMove;
 	#onResizeEnd;
 	#getColumnHeader(depth) {
-		if (depth === 0) return this.root?.item.label ?? ``;
+		if (depth === 0) return this.#displayRoot?.item.label ?? ``;
 		const explicit = this._selectedByDepth.get(depth - 1);
 		if (explicit) return explicit.item.label;
 		const prevCol = this._columns[depth - 1];
@@ -26288,9 +29010,11 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		}
 		return ``;
 	}
-	#columnStyle(depth) {
+	#columnStyle(depth, isLast) {
 		const w = this.#columnWidths.get(depth);
-		return w !== void 0 ? `width:${w}px;flex-shrink:0` : `width:max-content`;
+		if (w !== void 0) return `width:${w}px;flex-grow:0;flex-shrink:0;flex-basis:auto;max-width:none`;
+		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`;
 	}
 	#isFocused(node, depth) {
 		return this.tickled.isTickled(this.#buildTickledId(node, depth));
@@ -26303,8 +29027,9 @@ let MillerBaseElement = class MillerBaseElement extends i {
 	}
 	#renderLoadingColumn() {
 		const depth = this._loadingDepth;
+		const stretched = this.stretchLastColumn && this.#columnWidths.get(depth) === void 0;
 		return b`
-      <div class="column loading-column" style=${this.#columnStyle(depth)}>
+      <div class="column loading-column ${stretched ? `stretch-last` : ``}" style=${this.#columnStyle(depth, true)}>
         ${this.headers ? b`
           <div class="column-header">${this.#getColumnHeader(depth)}</div>
         ` : A}
@@ -26319,8 +29044,10 @@ let MillerBaseElement = class MillerBaseElement extends i {
       <div id="container" @keydown=${this.#onKeyDown} tabindex="0">
         ${this._columns.map((nodes, depth) => {
 			const visibleNodes = this.filterPredicate ? nodes.filter((n) => this.filterPredicate(n, depth)) : nodes;
+			const isLast = depth === this._columns.length - 1 && this._loadingDepth === void 0;
+			const stretched = this.stretchLastColumn && isLast && this.#columnWidths.get(depth) === void 0;
 			return b`
-          <div class="column" style=${this.#columnStyle(depth)}>
+          <div class="column ${stretched ? `stretch-last` : ``}" style=${this.#columnStyle(depth, isLast)}>
             ${this.headers ? b`
               <div class="column-header"
                 @click=${() => this.#onHeaderClick(depth)}
@@ -26339,6 +29066,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		})}
         ${this._loadingDepth !== void 0 ? this.#renderLoadingColumn() : A}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	_getFocusedIndex(depth) {
@@ -26374,6 +29102,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		this.styles = [
 			themeFallbacks,
 			tickledStyles,
+			listSearchStyles,
 			i$3`
     :host {
       --column-bg: var(--surface-3);
@@ -26408,6 +29137,20 @@ let MillerBaseElement = class MillerBaseElement extends i {
       background: var(--column-bg);
       border-right: 1px solid var(--column-separator);
       flex-shrink: 0;
+      /* Content-sized columns never grow wider than 80% of the available
+         width — pathological labels truncate with ellipsis instead of
+         pushing every other column out of view */
+      max-width: 80%;
+      /* Smoothly animate the last column stretching to fill remaining
+         space and shrinking back to content width when it stops being last */
+      transition: flex-grow var(--transition, 0.2s ease-out);
+    }
+
+    .column.stretch-last {
+      min-width: 0;
+      /* Stretching fills remaining space by definition, so it is exempt
+         from the 80% auto-size cap */
+      max-width: none;
     }
 
     .column-header {
@@ -26491,6 +29234,12 @@ let MillerBaseElement = class MillerBaseElement extends i {
 __decorate([property({ type: Object })], MillerBaseElement.prototype, "root", void 0);
 __decorate([property({ attribute: false })], MillerBaseElement.prototype, "model", void 0);
 __decorate([property({ type: Boolean })], MillerBaseElement.prototype, "headers", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `stretch-last-column`,
+	reflect: true
+})], MillerBaseElement.prototype, "stretchLastColumn", void 0);
+__decorate([property({ attribute: false })], MillerBaseElement.prototype, "viewRoot", void 0);
 __decorate([property({ type: String })], MillerBaseElement.prototype, "interactionMode", void 0);
 __decorate([property({
 	reflect: true,
@@ -26502,6 +29251,11 @@ __decorate([property({
 })], MillerBaseElement.prototype, "exclusivity", void 0);
 __decorate([property({ type: Object })], MillerBaseElement.prototype, "loadChildren", void 0);
 __decorate([property({ attribute: false })], MillerBaseElement.prototype, "filterPredicate", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], MillerBaseElement.prototype, "searchModes", void 0);
 __decorate([state()], MillerBaseElement.prototype, "_columns", void 0);
 __decorate([state()], MillerBaseElement.prototype, "_loadingDepth", void 0);
 __decorate([state()], MillerBaseElement.prototype, "_selectedNodes", void 0);
@@ -26739,14 +29493,28 @@ var MillerTreeController = class {
 	* Any ancestor `MillerNode`s with unloaded children are populated
 	* synchronously before calling `element.navigateTo()`.
 	*
+	* Key paths are relative to the element's current view root: when the view
+	* is rebased, only matches at or below the view root can be reached.
+	*
 	* Returns `false` if no matching node is found.
 	*/
 	navigateToValue(predicate) {
 		const treePath = this.#findTreePath(this.#root, predicate);
 		if (!treePath) return false;
-		let currentColumn = this.#element.root?.children ?? [];
+		const base = this.#element.viewRoot ?? this.#element.root;
+		if (!base) return false;
+		let startIndex = 1;
+		if (this.#element.viewRoot) {
+			const mappedBase = this.#nodeToTree.get(base);
+			if (!mappedBase) return false;
+			const baseIndex = treePath.indexOf(mappedBase);
+			if (baseIndex < 0) return false;
+			startIndex = baseIndex + 1;
+			if (base.children === void 0) base.children = this.#childrenOf(mappedBase);
+		}
+		let currentColumn = base.children ?? [];
 		const keys = [];
-		for (let i = 1; i < treePath.length; i++) {
+		for (let i = startIndex; i < treePath.length; i++) {
 			const treeNode = treePath[i];
 			const key = this.#options.valueToItem(treeNode.getValue(), treeNode).key;
 			keys.push(key);
@@ -27228,6 +29996,136 @@ function dismiss(id) {
 	syncRenderer();
 }
 //#endregion
+//#region src/pan-text/pan-text.ts
+const SPEED = 45;
+const END_PADDING = 4;
+const START_DELAY = 300;
+const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
+let PanTextElement = class PanTextElement extends i {
+	constructor(..._args) {
+		super(..._args);
+		this.direction = `end`;
+		this.disabled = false;
+		this._isOverflowing = false;
+		this._isHovering = false;
+		this._overflow = 0;
+		this._resizeObserver = null;
+		this._onMouseEnter = () => {
+			this._isHovering = true;
+		};
+		this._onMouseLeave = () => {
+			this._isHovering = false;
+		};
+		this._measure = () => {
+			if (this._isHovering) return;
+			const el = this._textEl;
+			if (!el) return;
+			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
+			const overflowing = this._overflow > 0;
+			this.classList.toggle(`is-overflowing`, overflowing);
+			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(() => this._measure());
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	firstUpdated() {
+		this._measure();
+		this._resizeObserver?.observe(this);
+		document.fonts?.ready.then(() => this._measure());
+	}
+	updated() {
+		this._measure();
+	}
+	_textStyle() {
+		if (!this._isOverflowing) return ``;
+		const distance = this._overflow + END_PADDING;
+		const duration = Math.max(1.5, distance / SPEED);
+		const revealEnd = this.direction === `end`;
+		const restX = revealEnd ? 0 : -distance;
+		const hoverX = revealEnd ? -distance : 0;
+		if (this._isHovering) return [
+			`transform: translateX(${hoverX}px)`,
+			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
+			`overflow: visible`,
+			`text-overflow: clip`
+		].join(`; `);
+		return [
+			`transform: translateX(${restX}px)`,
+			`transition: transform 400ms ${PAN_EASING}`,
+			revealEnd ? `` : `overflow: visible; text-overflow: clip`
+		].filter(Boolean).join(`; `);
+	}
+	render() {
+		const textClasses = {
+			"is-overflowing": this._isOverflowing,
+			"is-hovering": this._isHovering
+		};
+		return b`
+      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
+        <slot @slotchange=${this._measure}></slot>
+      </span>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+    /* Renders like plain inline text: no colours, border, padding or margin
+       of its own — it only adds the clipping needed to pan on hover. */
+    :host {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: inherit;
+    }
+
+    :host([disabled]) {
+      opacity: var(--disabled-opacity, 0.5);
+      pointer-events: none;
+    }
+
+    .text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      will-change: transform;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .text {
+        transition: none !important;
+        transform: none !important;
+      }
+    }
+  `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `direction`
+})], PanTextElement.prototype, "direction", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disabled`
+})], PanTextElement.prototype, "disabled", void 0);
+__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
+__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
+__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
+PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
+//#endregion
 //#region src/panel/panel-group.ts
 let PanelGroupElement = class PanelGroupElement extends i {
 	constructor(..._args) {
@@ -35444,29 +38342,24 @@ var TreeController = class {
 	navigateToValue(predicate) {
 		const treePath = this.#findTreePath(this.#root, predicate);
 		if (!treePath) return false;
+		let currentColumn = this.#element.root?.children ?? [];
 		const keys = [];
 		for (let i = 1; i < treePath.length; i++) {
 			const treeNode = treePath[i];
 			const key = this.#options.valueToItem(treeNode.getValue(), treeNode).key;
 			keys.push(key);
 			if (i < treePath.length - 1) {
-				const currentChildren = i === 1 ? this.#element.root?.children ?? [] : this.#findInChildren(this.#element.root?.children ?? [], keys);
-				const treeNodeMap = this.#nodeToTree;
-				const node = currentChildren.find((n) => n.item.key === key);
+				const node = currentColumn.find((n) => n.item.key === key);
 				if (!node) return false;
 				if (node.children === void 0) {
-					const mapped = treeNodeMap.get(node);
+					const mapped = this.#nodeToTree.get(node);
 					if (mapped) node.children = this.#childrenOf(mapped);
 				}
+				currentColumn = node.children ?? [];
 			}
 		}
 		return this.#element.navigateTo(keys);
 	}
-	#findInChildren(children, keys) {
-		if (keys.length === 0) return children;
-		const key = keys[0];
-		return children.find((n) => n.item.key === key)?.children ?? [];
-	}
 	#childrenOf(treeNode) {
 		return Array.from(treeNode.children(), (child) => this.#toTreeNode(child));
 	}
@@ -36631,6 +39524,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, readBaseColour, registerFontIcon, registerIcon, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map