@ixfx/components 0.7.4 → 0.7.5

package/bundle/index.js

@@ -2400,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
@@ -2461,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) {
@@ -2484,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 });
@@ -2498,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();
@@ -2576,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) {
@@ -3877,80 +4522,6 @@ __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/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/interaction/list-item-animation.ts
 /**
 * Shared insertion / removal animation for the list & tree components.
@@ -8557,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];
@@ -11067,6 +11648,8 @@ 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;
@@ -11272,6 +11855,7 @@ let DataGridElement = class DataGridElement extends i {
 			tickledStyles,
 			tickledItemStyles,
 			listItemFadeKeyframes,
+			listSearchStyles,
 			i$3`
     :host {
       --data-grid-row-height: 28px;
@@ -11280,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);
@@ -11373,6 +11958,55 @@ 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;
@@ -11385,17 +12019,29 @@ let DataGridElement = class DataGridElement extends i {
 		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(() => {
 			if (!this._viewportEl) return;
@@ -11421,6 +12067,7 @@ let DataGridElement = class DataGridElement extends i {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
 		if (!this.#appendInProgress) {
 			if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
 			this._rebuildFlat();
@@ -11475,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);
@@ -12356,6 +13008,7 @@ let DataGridElement = class DataGridElement extends i {
 		})}
           </div>
         </div>
+        ${this.search.renderField()}
       </div>
     `;
 	}
@@ -12399,6 +13052,13 @@ __decorate([property({
 	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);
@@ -12684,8 +13344,8 @@ 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`;
@@ -12695,8 +13355,6 @@ 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();
@@ -12733,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);
@@ -12741,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();
@@ -12753,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();
@@ -12826,44 +13480,7 @@ 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;
@@ -12875,6 +13492,24 @@ let DetailListElement = class DetailListElement extends i {
 	#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;
@@ -12897,6 +13532,8 @@ let DetailListElement = class DetailListElement extends i {
 			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
@@ -12930,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$2,
-			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;
@@ -13040,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);
 	}
@@ -13525,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 });
@@ -13543,6 +14171,7 @@ let DetailListElement = class DetailListElement extends i {
 		this.styles = [
 			themeFallbacks,
 			scrollFadeStyles(`x`),
+			listSearchStyles,
 			i$3`
     :host {
       display: block;
@@ -13664,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;
-    }
   `
 		];
 	}
@@ -13720,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>
     `;
 	}
@@ -13774,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
@@ -19619,6 +20194,11 @@ let GridListElement = class GridListElement extends i {
 			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();
@@ -19645,7 +20225,10 @@ let GridListElement = class GridListElement extends i {
 				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);
+				if (next) {
+					this.tickled.handleKeyboardNavigation(next);
+					this.#scrollItemIntoView(next);
+				}
 			};
 			const perLine = this.orientation === `grid` ? win.cols : 1;
 			switch (e.key) {
@@ -19663,9 +20246,11 @@ let GridListElement = class GridListElement extends i {
 					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`: {
@@ -19708,11 +20293,13 @@ let GridListElement = class GridListElement extends i {
 			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;
@@ -19825,16 +20412,19 @@ let GridListElement = class GridListElement extends i {
         overflow: hidden;
         transition: background var(--transition), border-color var(--transition);
       }
-      :host(:not([caption-style="separate"])) .cell:hover {
+      :host(:not([caption-style="separate"])) .cell:hover,
+      :host(:not([caption-style="separate"])) .cell.tickled {
         background: var(--item-bg-tickled);
-        border-color: var(--item-border-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.tickled {
-        box-shadow: inset 0 0 0 2px var(--accent);
+      :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 */
@@ -19893,9 +20483,10 @@ let GridListElement = class GridListElement extends i {
         background: var(--grid-list-item-bg);
         border: 1px solid transparent;
       }
-      :host([caption-style="separate"]) .cell:hover .thumb {
+      :host([caption-style="separate"]) .cell:hover .thumb,
+      :host([caption-style="separate"]) .cell.tickled .thumb {
         background: var(--item-bg-tickled);
-        border-color: var(--item-border-tickled);
+        border: var(--item-border-tickled);
       }
       :host([caption-style="separate"]) .caption {
         display: flex;
@@ -19907,20 +20498,27 @@ let GridListElement = class GridListElement extends i {
       }
       :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,
-      :host([caption-style="separate"]) .cell.tickled .thumb {
+      :host([caption-style="separate"]) .cell.selected .thumb {
         outline: 2px solid var(--accent);
         outline-offset: 2px;
       }
-      :host([caption-style="separate"]) .cell.tickled .thumb {
-        outline-style: dashed;
+      :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 {
-        outline: 1px dashed var(--accent);
+        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 ----
@@ -19973,6 +20571,25 @@ let GridListElement = class GridListElement extends i {
 	*/
 	#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;
@@ -19984,7 +20601,12 @@ let GridListElement = class GridListElement extends i {
 		]) 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 });
+		this.#mutationObserver.observe(this, {
+			childList: true,
+			attributeFilter: [`hidden`]
+		});
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -19993,6 +20615,9 @@ let GridListElement = class GridListElement extends i {
 		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;
@@ -20060,6 +20685,8 @@ let GridListElement = class GridListElement extends i {
 		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));
@@ -20144,7 +20771,7 @@ let GridListElement = class GridListElement extends i {
 		}
 	}
 	#syncItems() {
-		this.#items = Array.from(this.querySelectorAll(ITEM_SELECTOR$1));
+		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);
@@ -20300,6 +20927,7 @@ let GridListElement = class GridListElement extends i {
           ${repeat(slice, (el) => this.#slotNameFor(el), (el, i) => this.#renderCell(el, win.startIndex + i, win))}
         </div>
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	#renderCell(el, index, win) {
@@ -20396,6 +21024,12 @@ __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);
@@ -20778,6 +21412,10 @@ 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();
@@ -20786,6 +21424,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		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`) {
@@ -20906,6 +21545,19 @@ 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;
@@ -20948,6 +21600,13 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	_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;
@@ -21044,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`);
@@ -21146,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 = [];
@@ -21549,7 +22233,7 @@ 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;
@@ -21606,6 +22290,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
       >
         ${this.root ? this.#renderNodes(nodes) : A}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	#onDblClick;
@@ -21617,7 +22302,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
       `;
 		return b`
       <ul class="tree-list" role="tree">
-        ${this.#weaveLeaving(nodes).map(({ node, depth }) => this._renderNode(node, depth))}
+        ${repeat(this.#weaveLeaving(nodes), ({ node }) => node.item.key, ({ node, depth }) => this._renderNode(node, depth))}
       </ul>
     `;
 	}
@@ -21627,7 +22312,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		const isBranch = node.item.isLeaf !== true;
 		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
@@ -21662,6 +22347,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listSearchStyles,
 			i$3`
       :host {
       --tree-bg: var(--surface-3);
@@ -21672,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 {
@@ -21795,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);
@@ -21875,9 +22573,10 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		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` : ``} ${isLeaving ? `leaving` : ``}"
+        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}
@@ -22146,13 +22845,11 @@ 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();
@@ -22184,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);
@@ -22192,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();
@@ -22204,7 +22902,6 @@ let VerticalListElement = class VerticalListElement extends i {
 				}
 				return;
 			}
-			if (this._searchVisible) return;
 			switch (e.key) {
 				case `ArrowDown`:
 					e.preventDefault();
@@ -22252,40 +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;
@@ -22297,6 +22985,8 @@ let VerticalListElement = class VerticalListElement extends i {
 		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();
@@ -22306,8 +22996,9 @@ let VerticalListElement = class VerticalListElement extends i {
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
 		this.#itemObserver?.disconnect();
-		this.#search?.dispose();
-		this.#search = void 0;
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
 	}
 	/**
 	* Animate in items appended to the light DOM (however they got there —
@@ -22330,17 +23021,9 @@ let VerticalListElement = class VerticalListElement extends i {
 		if (fresh.length >= total) return;
 		for (const el of fresh) animateListItemIn(el);
 	}
-	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`
-		});
-	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
 		if (changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
 			const previousSelected = this.selection.selected;
@@ -22408,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);
 	}
@@ -22622,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;
@@ -22688,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;
@@ -22700,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),
@@ -22755,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`
@@ -22805,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>
     `;
 	}
@@ -22838,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
@@ -27338,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`;
@@ -27349,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++) {
@@ -27358,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) {
@@ -27564,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;
@@ -27575,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;
@@ -27626,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 = {};
@@ -27725,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;
@@ -27768,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({
@@ -27783,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 = []) {
@@ -27796,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;
@@ -27922,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);
@@ -28025,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;
@@ -28089,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);
@@ -28158,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];
@@ -28169,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));
@@ -28184,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}
@@ -28200,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)}
@@ -28220,6 +29066,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		})}
         ${this._loadingDepth !== void 0 ? this.#renderLoadingColumn() : A}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	_getFocusedIndex(depth) {
@@ -28255,6 +29102,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		this.styles = [
 			themeFallbacks,
 			tickledStyles,
+			listSearchStyles,
 			i$3`
     :host {
       --column-bg: var(--surface-3);
@@ -28289,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 {
@@ -28372,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,
@@ -28383,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);
@@ -28620,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);
@@ -37455,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));
 	}
@@ -38642,6 +39524,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-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, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, 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, 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, keyForElement, listItemFadeKeyframes, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, 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