@ixfx/components 0.7.4 → 0.8.0

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,186 @@ var IncrSearchTreeController = class {
 	}
 };
 //#endregion
+//#region src/incr-search/data-list-search-adapter.ts
+/**
+* A {@link ListSearchAdapter} over a data-backed list. Unlike the element
+* adapter it never materialises an element per item — it reads keys and text
+* straight from the source by index. Highlights are painted on whatever
+* captions are currently rendered in the shadow window; offscreen matches paint
+* when scrolled into view. See `docs/infra-incremental.md`.
+*/
+function createDataListSearchAdapter(host, options) {
+	return {
+		getItems: () => Array.from({ length: options.rawCount() }, (_, i) => ({
+			key: options.rawKeyAt(i),
+			index: i
+		})),
+		getLabel: (item) => options.rawSearchTextAt(item.index),
+		getKey: (item) => item.key,
+		focusItem: (item) => {
+			if (item) host.focusKey(item.key);
+		},
+		activateItem: (item) => {
+			if (options.onActivate) options.onActivate(item.key);
+			else host.focusKey(item.key);
+		},
+		selectItems: (items) => {
+			host.selectKeys(items.map((i) => i.key));
+		},
+		applyFilter: (matched) => {
+			options.onFilterChange?.(matched);
+		},
+		highlightRoot: options.getHighlightRoot,
+		highlightSelector: `.cell .caption`,
+		highlightKeyOf: (el) => el.closest(`.cell`)?.getAttribute(`data-key`) ?? void 0,
+		highlightText: (el) => el.textContent ?? ``,
+		highlightKey: `grid-list-search`
+	};
+}
+//#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 +2752,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;
+		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));
+		host.addController(this);
+	}
+	/** `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 +4559,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 +9165,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 +11685,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 +11892,7 @@ let DataGridElement = class DataGridElement extends i {
 			tickledStyles,
 			tickledItemStyles,
 			listItemFadeKeyframes,
+			listSearchStyles,
 			i$3`
     :host {
       --data-grid-row-height: 28px;
@@ -11280,6 +11901,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 +11995,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 +12056,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 +12104,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 +12159,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 +13045,7 @@ let DataGridElement = class DataGridElement extends i {
 		})}
           </div>
         </div>
+        ${this.search.renderField()}
       </div>
     `;
 	}
@@ -12399,6 +13089,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);
@@ -12680,12 +13377,12 @@ __decorate([state()], DataTableElement.prototype, "_stacked", void 0);
 DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableElement);
 //#endregion
 //#region src/detail-list/detail-list.ts
-const ITEM_SELECTOR$2 = `:scope > li`;
+const ITEM_SELECTOR$3 = `: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 +13392,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 +13428,11 @@ let DetailListElement = class DetailListElement extends i {
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.itemWrap
 		});
+		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
+			itemSelector: ITEM_SELECTOR$3,
+			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 +13441,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 +13449,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 +13517,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 +13529,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;
@@ -12896,7 +13568,9 @@ let DetailListElement = class DetailListElement extends i {
 			subtree: false,
 			attributeFilter: [`hidden`]
 		});
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#animatedItems.add(el);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) this.#animatedItems.add(el);
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#syncSearchCommands();
 	}
 	/**
 	* Collapse-in items appended to the light DOM (however they got there). A bulk
@@ -12913,7 +13587,7 @@ let DetailListElement = class DetailListElement extends i {
 			fresh.push(node);
 		}
 		if (fresh.length === 0) return;
-		const total = this.querySelectorAll(ITEM_SELECTOR$2).length;
+		const total = this.querySelectorAll(ITEM_SELECTOR$3).length;
 		if (fresh.length >= total) return;
 		for (const el of fresh) animateListItemIn(el);
 		window.setTimeout(() => this.#scheduleGeometry(), 230);
@@ -12930,23 +13604,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 +13709,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);
 	}
@@ -13089,7 +13764,7 @@ let DetailListElement = class DetailListElement extends i {
 		});
 	}
 	#itemForKey(key) {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (keyForElement(el) === key) return el;
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) if (keyForElement(el) === key) return el;
 	}
 	*selectedFilter(kind) {
 		const wanted = (el) => {
@@ -13099,7 +13774,7 @@ let DetailListElement = class DetailListElement extends i {
 				case `either`: return el.hasAttribute(`data-selected`) || el.hasAttribute(`data-checked`);
 			}
 		};
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) {
 			if (el.hidden) continue;
 			if (wanted(el)) yield el;
 		}
@@ -13112,7 +13787,7 @@ let DetailListElement = class DetailListElement extends i {
 		if (previousKeys.size > 0 || anchorKey !== null) {
 			const next = [];
 			let anchor;
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) {
 				const key = keyOf(el);
 				if (key !== null && previousKeys.has(key)) next.push(el);
 				if (key !== null && key === anchorKey) anchor = el;
@@ -13167,15 +13842,15 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	#applyFilterPredicate() {
 		if (!this.filterPredicate) {
-			for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) el.removeAttribute(`hidden`);
+			for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) el.removeAttribute(`hidden`);
 			return;
 		}
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) if (this.filterPredicate(el)) el.removeAttribute(`hidden`);
 		else el.setAttribute(`hidden`, ``);
 	}
 	#applySort() {
 		if (this.sort === `none`) return;
-		const rows = [...this.querySelectorAll(ITEM_SELECTOR$2)];
+		const rows = [...this.querySelectorAll(ITEM_SELECTOR$3)];
 		if (rows.length < 2) return;
 		const dir = this.sort === `descending` ? -1 : 1;
 		const meta = (el) => ({
@@ -13367,7 +14042,7 @@ let DetailListElement = class DetailListElement extends i {
 		else if (this.itemWrap === `wrap`) this.#navigateTo(this.#findLastCheckable());
 	}
 	_getVisibleItems() {
-		return Array.from(this.querySelectorAll(ITEM_SELECTOR$2)).filter((el) => {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR$3)).filter((el) => {
 			if (el.hidden) return false;
 			if (this.filterPredicate && !this.filterPredicate(el)) return false;
 			return true;
@@ -13422,10 +14097,10 @@ let DetailListElement = class DetailListElement extends i {
 	}
 	/** Scan light-DOM children for unprocessed `data-icon` items. */
 	#processChildren() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) this.#ensureIcon(el);
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) this.#ensureIcon(el);
 	}
 	_syncItemStates() {
-		for (const el of this.querySelectorAll(ITEM_SELECTOR$2)) {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR$3)) {
 			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
 			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
 			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !el.hasAttribute(`not-checked`) && this.selection.selected.has(el));
@@ -13525,16 +14200,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 +14208,7 @@ let DetailListElement = class DetailListElement extends i {
 		this.styles = [
 			themeFallbacks,
 			scrollFadeStyles(`x`),
+			listSearchStyles,
 			i$3`
     :host {
       display: block;
@@ -13664,48 +14330,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 +14344,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 +14384,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
@@ -15511,7 +16123,7 @@ SplitLayoutElement = __decorate([safeCustomElement(`ixfx-split-layout`)], SplitL
 //#endregion
 //#region src/tabs/tab-list.ts
 /** Pointer movement threshold (px) before a press becomes a drag. */
-const DRAG_THRESHOLD_PX$3 = 5;
+const DRAG_THRESHOLD_PX$4 = 5;
 let TabListElement = class TabListElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -15625,7 +16237,7 @@ let TabListElement = class TabListElement extends i {
 			const dy = event.clientY - state.startY;
 			const distance = Math.hypot(dx, dy);
 			if (!state.active) {
-				if (distance < DRAG_THRESHOLD_PX$3) return;
+				if (distance < DRAG_THRESHOLD_PX$4) return;
 				this.#beginDrag(event);
 			}
 			state.ghost?.move(event.clientX, event.clientY);
@@ -16475,12 +17087,23 @@ let TitlebarElement = class TitlebarElement extends i {
 		const showCaret = this.collapsible && this.toggleInteraction !== `disabled`;
 		const implicitToggle = this.collapsible && this.toggleInteraction === `implicit`;
 		const caretRotation = isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		const treeVariant = this.variant === `tree`;
 		return b`
       <div
         class="bar"
         role="toolbar"
         @click=${implicitToggle ? this._onToggleClick : A}
       >
+        ${treeVariant && showCaret ? b`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : A}></ixfx-icon>
+          </button>
+          ` : A}
         <div class="title-text-wrapper">
           ${this.iconName ? b`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : A}
           <span class="title-text">${this.title}</span>
@@ -16498,7 +17121,7 @@ let TitlebarElement = class TitlebarElement extends i {
               <ixfx-icon name="close"></ixfx-icon>
             </button>
           ` : A}
-          ${showCaret ? b`
+          ${!treeVariant && showCaret ? b`
           <button
             class="caret-btn"
             type="button"
@@ -16721,6 +17344,77 @@ let TitlebarElement = class TitlebarElement extends i {
         -1px 0 0 var(--surface-5),
         1px 0 0 var(--surface-1);
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+    :host([variant="tree"]) .bar {
+      background: transparent;
+      padding: 0 var(--space-xs);
+      min-height: unset;
+      gap: var(--space-xs);
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .bar {
+      padding: var(--space-xs) 0;
+      flex-direction: column;
+      min-width: unset;
+      writing-mode: horizontal-tb;
+    }
+
+    :host([variant="tree"]) .title-text-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs);
+      padding: 0;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="tree"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      transform: rotate(180deg);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn {
+      background: transparent;
+      opacity: var(--prominence-idle-opacity);
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .caret-btn:hover {
+      background: transparent;
+      opacity: var(--prominence-tickled-opacity);
+    }
+
+    :host([variant="tree"]) .toolbar {
+      margin-left: auto;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .toolbar {
+      flex-direction: row;
+      margin-left: 0;
+      margin-top: auto;
+    }
+
+    :host([variant="tree"]) ixfx-icon {
+      width: 1em;
+      height: 1em;
+    }
   `];
 	}
 };
@@ -16756,7 +17450,7 @@ TitlebarElement = __decorate([safeCustomElement(`ixfx-titlebar`)], TitlebarEleme
 //#endregion
 //#region src/dock/dock-panel.ts
 /** Pointer movement threshold before a titlebar press becomes a dock drag. */
-const DRAG_THRESHOLD_PX$2 = 5;
+const DRAG_THRESHOLD_PX$3 = 5;
 let DockPanelElement = class DockPanelElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -16788,7 +17482,7 @@ let DockPanelElement = class DockPanelElement extends i {
 		this._onPointerMove = (event) => {
 			if (this._dragPointerId === null || event.pointerId !== this._dragPointerId) return;
 			if (!this._dragStarted) {
-				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$2) return;
+				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$3) return;
 				this._dragStarted = true;
 				const pointerId = this._dragPointerId;
 				this._teardownDragListeners();
@@ -16943,7 +17637,7 @@ DockPanelElement = __decorate([safeCustomElement(`ixfx-dock-panel`)], DockPanelE
 /** Fraction of the leaf rect (from each edge) that forms the split bands. */
 const BAND = .25;
 /** Pointer movement threshold before a press becomes a dock drag (matches tab-list). */
-const DRAG_THRESHOLD_PX$1 = 5;
+const DRAG_THRESHOLD_PX$2 = 5;
 /** Tolerance (px) when matching a child gutter endpoint to a parent gutter line. */
 const JUNCTION_TOL_PX = 6;
 /** Junction points closer than this merge into one handle (a 4-way cross yields one per side). */
@@ -17058,7 +17752,7 @@ let DockHostElement = class DockHostElement extends i {
 		this._onTabDragMove = (event) => {
 			const pending = this._tabDragPending;
 			if (pending === null || event.pointerId !== pending.pointerId) return;
-			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$1) return;
+			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$2) return;
 			this._tabDragPending = null;
 			this._teardownTabDragListeners();
 			this._suppressNextClick();
@@ -18758,7 +19452,7 @@ function WheelNudgeMixin(superClass) {
 }
 //#endregion
 //#region src/editable-label/editable-number.ts
-const DRAG_THRESHOLD_PX = 3;
+const DRAG_THRESHOLD_PX$1 = 3;
 let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel) {
 	#dragStartY;
 	#dragStartValue;
@@ -18875,7 +19569,7 @@ let EditableNumber = class EditableNumber extends WheelNudgeMixin(EditableLabel)
 			if (this._editing) return;
 			if (this.disabled || this.noDrag) return;
 			const deltaY = this.#dragStartY - e.clientY;
-			if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX) return;
+			if (!this.#dragging && Math.abs(deltaY) < DRAG_THRESHOLD_PX$1) return;
 			this.#dragging = true;
 			this.#hasDragged = true;
 			this.toggleAttribute(`dragging`, true);
@@ -19484,6 +20178,226 @@ let FormElement = class FormElement extends i {
 };
 FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
 //#endregion
+//#region src/grid-list/grid-list-source.ts
+const ITEM_SELECTOR$2 = `:scope > *`;
+const SYNTHETIC_PREFIX = `gl-auto-`;
+/** Whether `key` is an auto-assigned key for a keyless light-DOM item. */
+function isSyntheticKey(key) {
+	return key.startsWith(SYNTHETIC_PREFIX);
+}
+function warnDuplicateKeys(keys) {
+	const seen = /* @__PURE__ */ new Set();
+	const dupes = /* @__PURE__ */ new Set();
+	for (const k of keys) {
+		if (isSyntheticKey(k)) continue;
+		if (seen.has(k)) dupes.add(k);
+		else seen.add(k);
+	}
+	if (dupes.size > 0) console.warn(`ixfx-grid-list: duplicate item key(s) ${[...dupes].map((k) => `"${k}"`).join(`, `)} — the first occurrence wins for key-based operations.`);
+}
+var ElementGridListSource = class {
+	#host;
+	#items = [];
+	#slotNames = /* @__PURE__ */ new WeakMap();
+	#syntheticKeys = /* @__PURE__ */ new WeakMap();
+	#seq = 0;
+	#predicate;
+	#searchKeys;
+	#effectiveIndices = [];
+	#keysCache;
+	constructor(host) {
+		this.#host = host;
+		this.refresh();
+	}
+	get count() {
+		return this.#effectiveIndices.length;
+	}
+	get rawCount() {
+		return this.#items.length;
+	}
+	keyAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#itemKey(this.#items[eff]);
+	}
+	indexOfKey(key) {
+		return this.#effectiveIndices.findIndex((i) => this.#itemKey(this.#items[i]) === key);
+	}
+	keys() {
+		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#itemKey(this.#items[i]));
+		return this.#keysCache;
+	}
+	labelAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#captionFor(this.#items[eff]);
+	}
+	rawKeyAt(index) {
+		const el = this.#items[index];
+		return el === void 0 ? `` : this.#itemKey(el);
+	}
+	rawSearchTextAt(index) {
+		const el = this.#items[index];
+		if (el === void 0) return ``;
+		return el.getAttribute(`data-search-label`) ?? el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.textContent?.trim() ?? ``;
+	}
+	isSelectable(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff !== void 0 && !this.#items[eff].hasAttribute(`not-checked`);
+	}
+	renderCellContent(index) {
+		const eff = this.#effectiveIndices[index];
+		if (eff === void 0) return void 0;
+		return b`<slot name=${this.slotNameFor(this.#items[eff])}></slot>`;
+	}
+	setFilters(opts) {
+		if (`predicate` in opts) this.#predicate = opts.predicate;
+		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
+		this.#recomputeEffective();
+	}
+	refresh() {
+		this.#items = Array.from(this.#host.querySelectorAll(ITEM_SELECTOR$2)).filter((el) => !el.hidden);
+		for (const el of this.#items) {
+			const name = this.slotNameFor(el);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+		warnDuplicateKeys(this.#items.map((el) => this.#itemKey(el)));
+		this.#recomputeEffective();
+	}
+	/** Effective-order elements — the array `GridListElement` renders and slices. */
+	effectiveElements() {
+		return this.#effectiveIndices.map((i) => this.#items[i]);
+	}
+	/** Raw-order element at `index`, or `undefined`. */
+	rawElementAt(index) {
+		return this.#items[index];
+	}
+	/** Stable per-element `<slot>` name. */
+	slotNameFor(el) {
+		let name = this.#slotNames.get(el);
+		if (name === void 0) {
+			this.#seq += 1;
+			name = `gl-item-${this.#seq}`;
+			this.#slotNames.set(el, name);
+		}
+		return name;
+	}
+	resolveKeyToElement(key) {
+		if (isSyntheticKey(key)) return this.#items.find((el) => this.#syntheticKeys.get(el) === key);
+		return this.#items.find((el) => keyForElement(el) === key);
+	}
+	resolveKeyToData(_key) {}
+	#recomputeEffective() {
+		const effective = [];
+		for (let i = 0; i < this.#items.length; i++) {
+			if (this.#predicate !== void 0 && !this.#predicate(i)) continue;
+			if (this.#searchKeys !== void 0) {
+				const key = this.#itemKey(this.#items[i]);
+				if (!isSyntheticKey(key) && !this.#searchKeys.has(key)) continue;
+			}
+			effective.push(i);
+		}
+		this.#effectiveIndices = effective;
+		this.#keysCache = void 0;
+	}
+	#itemKey(el) {
+		const userKey = keyForElement(el);
+		if (userKey !== void 0) return userKey;
+		let synthetic = this.#syntheticKeys.get(el);
+		if (synthetic === void 0) {
+			this.#seq += 1;
+			synthetic = `${SYNTHETIC_PREFIX}${this.#seq}`;
+			this.#syntheticKeys.set(el, synthetic);
+		}
+		return synthetic;
+	}
+	#captionFor(el) {
+		return el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? ``;
+	}
+};
+var DataGridListSource = class {
+	#items;
+	#adapter;
+	#predicate;
+	#searchKeys;
+	#effectiveIndices = [];
+	#keysCache;
+	constructor(items, adapter) {
+		this.#items = items;
+		this.#adapter = adapter;
+		warnDuplicateKeys(items.map((it, i) => adapter.key(it, i)));
+		this.#recomputeEffective();
+	}
+	get count() {
+		return this.#effectiveIndices.length;
+	}
+	get rawCount() {
+		return this.#items.length;
+	}
+	keyAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#adapter.key(this.#items[eff], eff);
+	}
+	indexOfKey(key) {
+		return this.#effectiveIndices.findIndex((i) => this.#adapter.key(this.#items[i], i) === key);
+	}
+	keys() {
+		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#adapter.key(this.#items[i], i));
+		return this.#keysCache;
+	}
+	labelAt(index) {
+		const eff = this.#effectiveIndices[index];
+		if (eff === void 0) return ``;
+		return this.#adapter.label?.(this.#items[eff], eff) ?? this.#adapter.key(this.#items[eff], eff);
+	}
+	rawKeyAt(index) {
+		return index < 0 || index >= this.#items.length ? `` : this.#adapter.key(this.#items[index], index);
+	}
+	rawSearchTextAt(index) {
+		if (index < 0 || index >= this.#items.length) return ``;
+		const item = this.#items[index];
+		return this.#adapter.searchableText?.(item, index) ?? this.#adapter.label?.(item, index) ?? ``;
+	}
+	isSelectable(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff !== void 0 && !this.#adapter.disabled?.(this.#items[eff], eff);
+	}
+	renderCellContent(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#adapter.render(this.#items[eff], eff);
+	}
+	setFilters(opts) {
+		if (`predicate` in opts) this.#predicate = opts.predicate;
+		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
+		this.#recomputeEffective();
+	}
+	refresh() {
+		this.#recomputeEffective();
+	}
+	/** Raw-order item at `index`, or `undefined`. */
+	rawItemAt(index) {
+		return this.#items[index];
+	}
+	/** Effective-order item at `index`, or `undefined`. */
+	getItemAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#items[eff];
+	}
+	resolveKeyToElement(_key) {}
+	resolveKeyToData(key) {
+		const idx = this.#items.findIndex((item, i) => this.#adapter.key(item, i) === key);
+		return idx >= 0 ? this.#items[idx] : void 0;
+	}
+	#recomputeEffective() {
+		const effective = [];
+		for (let i = 0; i < this.#items.length; i++) {
+			if (this.#predicate !== void 0 && !this.#predicate(i)) continue;
+			if (this.#searchKeys !== void 0 && !this.#searchKeys.has(this.#adapter.key(this.#items[i], i))) continue;
+			effective.push(i);
+		}
+		this.#effectiveIndices = effective;
+		this.#keysCache = void 0;
+	}
+};
+//#endregion
 //#region src/grid-list/grid-list.ts
 const ITEM_SELECTOR$1 = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
@@ -19578,6 +20492,7 @@ let GridListElement = class GridListElement extends i {
 		this.captionBackdrop = `scrim`;
 		this.captionHeight = 24;
 		this.itemWrap = `stop`;
+		this.items = [];
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
 		this._viewportHeight = 0;
@@ -19588,37 +20503,37 @@ let GridListElement = class GridListElement extends i {
 		this.#itemWrap = `stop`;
 		this.#entering = /* @__PURE__ */ new Set();
 		this.#reflowTimer = 0;
-		this.#slotNames = /* @__PURE__ */ new WeakMap();
-		this.#slotSeq = 0;
+		this.#sourceElement = new ElementGridListSource(this);
+		this.#source = this.#sourceElement;
 		this.selection = new ListSelectionController({
-			getOrderedItems: () => this._getVisibleItems(),
-			isSelectable: () => true,
+			getOrderedItems: () => this.#source.keys(),
+			isSelectable: (k) => {
+				const i = this.#source.indexOfKey(k);
+				return i >= 0 && this.#source.isSelectable(i);
+			},
 			getModes: () => ({
 				selectionMode: this.selectionMode,
 				interactionMode: this.interactionMode
 			}),
-			getKey: keyForElement,
+			getKey: (k) => k,
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this.requestUpdate();
-				this._dispatch(`list-select`, {
-					selected,
-					previous,
-					selectedKeys: this.selection.selectedKeys
-				});
+				this.#emitSelect(selected, previous);
 			}
 		});
 		this.tickled = new TickledController(this, {
-			getItems: () => this.#items.map((el) => ({
-				id: el,
-				enabled: !el.hasAttribute(`not-checked`)
+			getItems: () => this.#source.keys().map((k, i) => ({
+				id: k,
+				enabled: this.#source.isSelectable(i)
 			})),
-			onTickle: (id) => {
-				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			onTickle: (k) => {
+				if (k !== void 0) this.#emitItemEvent(`list-tickle`, k);
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.#itemWrap
 		});
+		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
 			const el = e.target;
 			this.#cancelScrollRaf();
@@ -19638,14 +20553,17 @@ let GridListElement = class GridListElement extends i {
 				}
 				return;
 			}
-			const count = this.#items.length;
+			const count = this.#source.count;
 			if (count === 0) return;
 			const win = this.#currentWindow();
 			const move = (delta) => {
-				const from = this.tickled.tickledId ? this.#items.indexOf(this.tickled.tickledId) : -1;
+				const from = this.tickled.tickledId ? this.#source.indexOfKey(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);
+				const nextKey = this.#source.keyAt(nextIndex);
+				if (nextKey) {
+					this.tickled.handleKeyboardNavigation(nextKey);
+					this.#scrollItemIntoView(nextKey);
+				}
 			};
 			const perLine = this.orientation === `grid` ? win.cols : 1;
 			switch (e.key) {
@@ -19663,9 +20581,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`: {
@@ -19679,7 +20599,7 @@ let GridListElement = class GridListElement extends i {
 					const id = this.tickled.tickledId;
 					if (id) {
 						e.preventDefault();
-						this._dispatch(`list-item-click`, { item: id });
+						this.#emitItemEvent(`list-item-click`, id);
 						this.#onCellActivate(id);
 					}
 					break;
@@ -19708,11 +20628,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;
@@ -19732,6 +20654,12 @@ let GridListElement = class GridListElement extends i {
         height: 100%;
         overflow-y: auto;
         overflow-x: hidden;
+        /* Consumer control over the native scrollbar (both orientations): set
+           --grid-list-scrollbar-width to "none" to hide it or "thin" to slim it.
+           The container is also exposed as ::part(viewport). */
+        scrollbar-width: var(--grid-list-scrollbar-width, auto);
+        scrollbar-gutter: var(--grid-list-scrollbar-gutter, auto);
+        scrollbar-color: var(--grid-list-scrollbar-color, auto);
       }
       :host([orientation="row"]) .viewport {
         overflow-x: auto;
@@ -19825,16 +20753,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 +20824,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 +20839,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 ----
@@ -19966,16 +20905,71 @@ let GridListElement = class GridListElement extends i {
 	*/
 	#zoomAnchor;
 	/**
-	* Per-item slot name. Each cell renders its own named `<slot>` and the
-	* matching light-DOM child carries `slot="<name>"`, so a child is projected
-	* into exactly one cell. (A single unnamed slot would collapse every child
-	* into the first cell.)
+	* The active view over the items. Element mode projects light-DOM children
+	* through named `<slot>`s (owned by {@link ElementGridListSource}); data mode
+	* renders from {@link items} via {@link itemAdapter}. Everything else here
+	* addresses items by effective index + key and never branches on the mode.
+	*
+	* Initialised eagerly (element mode) so the public getters — `count`,
+	* `selectedKeys`, … — are safe to touch before the first Lit update. The
+	* first `willUpdate` rebuilds it once the light DOM / `itemAdapter` is known.
 	*/
-	#slotNames;
-	#slotSeq;
+	#sourceElement;
+	#source;
+	#searchMode;
+	#searchFilterKeys;
+	/** (Re)build {@link search} for the current mode; a no-op if it already matches. */
+	#ensureSearch() {
+		const mode = this.itemAdapter !== void 0 ? `data` : `element`;
+		if (this.#searchMode === mode && this.search !== void 0) return;
+		const previous = this.search;
+		if (previous) {
+			previous.hostDisconnected();
+			this.removeController(previous);
+		}
+		this.search = mode === `data` ? new ListSearchController(this, { adapter: createDataListSearchAdapter(this, {
+			rawCount: () => this.#source?.rawCount ?? 0,
+			rawKeyAt: (i) => this.#source?.rawKeyAt(i) ?? ``,
+			rawSearchTextAt: (i) => this.#source?.rawSearchTextAt(i) ?? ``,
+			onFilterChange: (keys) => {
+				this.#searchFilterKeys = keys;
+				this.#source?.setFilters({ searchKeys: keys });
+				this.requestUpdate();
+				this.updateComplete.then(() => this.#emitViewportChange());
+			},
+			onActivate: (key) => this.#onCellActivate(key),
+			getHighlightRoot: () => this.renderRoot
+		}) }) : 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.#searchMode = mode;
+	}
+	#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 || !this.search) 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;
+		if (!this.hasAttribute(`role`)) this.setAttribute(`role`, `listbox`);
+		this.#syncAriaMultiselectable();
 		for (const [attr, value] of [
 			[`caption-style`, this.captionStyle],
 			[`caption-align`, this.captionAlign],
@@ -19984,7 +20978,13 @@ 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.#ensureSearch();
+		this.#syncSearchCommands();
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -19993,6 +20993,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;
@@ -20001,6 +21004,19 @@ let GridListElement = class GridListElement extends i {
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
 		this.#syncItems();
+		const removedKeys = [];
+		for (const record of records ?? []) for (const node of record.removedNodes) {
+			if (node.nodeType !== Node.ELEMENT_NODE) continue;
+			const key = keyForElement(node);
+			if (key !== void 0) removedKeys.push(key);
+		}
+		if (removedKeys.length > 0) {
+			const present = new Set(this.#source.keys());
+			const gone = removedKeys.filter((k) => !present.has(k));
+			if (gone.length > 0) this.selection.removeKeys(gone, (k) => k);
+			const tickledId = this.tickled.tickledId;
+			if (tickledId && gone.includes(tickledId)) this.tickled.focus(void 0);
+		}
 		this._syncItemStates();
 		this.#noteChildMutation(previousLength, records);
 		this.requestUpdate();
@@ -20042,31 +21058,86 @@ let GridListElement = class GridListElement extends i {
 		}, REFLOW_WINDOW_MS);
 	}
 	#emitViewportChange() {
-		this._dispatch(`grid-list-viewport-change`, { visibleKeys: this.visibleKeys() });
+		this._dispatch(`grid-list-viewport-change`, {
+			renderedKeys: this.renderedKeys(),
+			visibleKeys: this.visibleKeys()
+		});
 	}
 	firstUpdated() {
+		if (!this.#source) this.#rebuildSource();
 		const el = this.#viewportRef.value;
 		if (!el) return;
-		this._viewportWidth = el.clientWidth;
-		this._viewportHeight = el.clientHeight;
 		this.#resizeObserver = new ResizeObserver((entries) => {
 			for (const entry of entries) {
-				this._viewportWidth = entry.contentRect.width;
-				this._viewportHeight = entry.contentRect.height;
+				const w = entry.contentRect.width;
+				const h = entry.contentRect.height;
+				if (w <= 0 || h <= 0) return;
+				this._viewportWidth = w;
+				this._viewportHeight = h;
 			}
 		});
 		this.#resizeObserver.observe(el);
+		this.#measureViewport(false);
 		this.#syncItems();
 		this.requestUpdate();
 	}
+	/** (Re)construct {@link #source} for the current mode and re-apply the filters. */
+	#rebuildSource() {
+		if (this.itemAdapter !== void 0) {
+			this.#source = new DataGridListSource(this.items, this.itemAdapter);
+			this.#sourceElement = void 0;
+		} else {
+			this.#sourceElement = new ElementGridListSource(this);
+			this.#source = this.#sourceElement;
+		}
+		this.#applyFilters();
+		if (this.#searchFilterKeys) this.#source.setFilters({ searchKeys: this.#searchFilterKeys });
+	}
+	/** Push the current filter predicate into whichever source is active. */
+	#applyFilters() {
+		if (this.#source instanceof ElementGridListSource) {
+			const fp = this.filterPredicate;
+			const src = this.#source;
+			src.setFilters({ predicate: fp ? (i) => fp(src.rawElementAt(i)) : void 0 });
+			this.#items = src.effectiveElements();
+		} else if (this.#source instanceof DataGridListSource) {
+			const ip = this.itemFilterPredicate;
+			const src = this.#source;
+			src.setFilters({ predicate: ip ? (i) => ip(src.rawItemAt(i), i) : void 0 });
+		}
+	}
 	willUpdate(changed) {
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
+		if (changed.has(`filterPredicate`) || changed.has(`itemFilterPredicate`)) {
+			this.#applyFilters();
+			this.updateComplete.then(() => this.#emitViewportChange());
+		}
+		if (changed.has(`items`) || changed.has(`itemAdapter`)) {
+			this.#zoomAnchor = void 0;
+			const prevKeys = this.#source?.keys() ?? [];
+			const modeFlipped = this.itemAdapter !== void 0 !== this.#source instanceof DataGridListSource;
+			this.#rebuildSource();
+			const nextKeys = this.#source.keys();
+			const nextKeySet = new Set(nextKeys);
+			const removedKeys = prevKeys.filter((k) => !nextKeySet.has(k));
+			if (removedKeys.length > 0) this.selection.removeKeys(removedKeys, (k) => k);
+			const tickledId = this.tickled.tickledId;
+			if (tickledId && !nextKeySet.has(tickledId)) this.tickled.focus(void 0);
+			this._syncItemStates();
+			this.updateComplete.then(() => this.#emitViewportChange());
+			if (modeFlipped) {
+				this.#ensureSearch();
+				this.#syncSearchCommands();
+			}
+			this.search?.refresh();
+		}
 		if (changed.has(`itemSize`) || changed.has(`gap`)) {
 			this.itemSize = Math.max(MIN_ITEM_SIZE, Math.round(this.itemSize));
 			this.gap = Math.max(0, Math.round(this.gap));
 		}
 		if (changed.has(`captionHeight`)) this.captionHeight = Math.max(0, Math.round(this.captionHeight));
 		if (changed.has(`itemWrap`)) this.#itemWrap = this.itemWrap;
-		if ((changed.has(`itemSize`) || changed.has(`gap`) || changed.has(`captionStyle`) || changed.has(`captionHeight`) || changed.has(`orientation`)) && this.hasUpdated && this.#items.length > 0) {
+		if ((changed.has(`itemSize`) || changed.has(`gap`) || changed.has(`captionStyle`) || changed.has(`captionHeight`) || changed.has(`orientation`)) && this.hasUpdated && this.#source.count > 0) {
 			const prevOrientation = changed.get(`orientation`) ?? this.orientation;
 			const horizontal = prevOrientation === `row`;
 			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
@@ -20076,19 +21147,13 @@ let GridListElement = class GridListElement extends i {
 				const prevGap = changed.get(`gap`) ?? this.gap;
 				const prevCaptionStyle = changed.get(`captionStyle`) ?? this.captionStyle;
 				const prevCaptionHeight = changed.get(`captionHeight`) ?? this.captionHeight;
-				const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
-				const prev = computeGridWindow(this.#items.length, prevItemSize, prevRowHeight, prevGap, this._viewportWidth, this._viewportHeight, prevOffset, prevOrientation);
-				const mainStride = horizontal ? prev.colStride : prev.rowStride;
-				const centerLine = (prevOffset + prevExtent / 2) / mainStride;
-				const lineFloor = Math.max(0, Math.floor(centerLine));
-				const index = horizontal ? Math.min(this.#items.length - 1, lineFloor) : Math.min(this.#items.length - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
-				this.#zoomAnchor = {
-					index,
-					lineFrac: centerLine - lineFloor
-				};
+				this.#captureCentreAnchor(prevOffset, prevExtent, prevItemSize, prevGap, prevCaptionStyle, prevCaptionHeight, prevOrientation);
 			}
 		}
 	}
+	#syncAriaMultiselectable() {
+		this.setAttribute(`aria-multiselectable`, this.selection.canSelectMultiple() ? `true` : `false`);
+	}
 	/** Full cell height: the square, plus a caption band in `separate` / `under`. */
 	#rowHeight() {
 		const captionBand = this.captionStyle === `separate` || this.captionStyle === `under`;
@@ -20100,7 +21165,10 @@ let GridListElement = class GridListElement extends i {
 	updated(changed) {
 		super.updated(changed);
 		this.#syncItems();
-		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) this.selection.clearAnchor();
+		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) {
+			this.selection.clearAnchor();
+			this.#syncAriaMultiselectable();
+		}
 		if (changed.has(`orientation`)) {
 			const vp = this.#viewportRef.value;
 			if (vp) {
@@ -20113,6 +21181,11 @@ let GridListElement = class GridListElement extends i {
 				}
 			}
 		}
+		const vp = this.#viewportRef.value;
+		if (vp) {
+			if (Math.abs(vp.scrollTop - this._scrollTop) > .5) vp.scrollTop = this._scrollTop;
+			if (Math.abs(vp.scrollLeft - this._scrollLeft) > .5) vp.scrollLeft = this._scrollLeft;
+		}
 		this.#applyZoomAnchor();
 	}
 	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
@@ -20143,30 +21216,67 @@ let GridListElement = class GridListElement extends i {
 			this._scrollTop = next;
 		}
 	}
-	#syncItems() {
-		this.#items = Array.from(this.querySelectorAll(ITEM_SELECTOR$1));
-		for (const el of this.#items) {
-			const name = this.#slotNameFor(el);
-			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
-		}
+	#captureCentreAnchor(prevOffset, prevExtent, prevItemSize, prevGap, prevCaptionStyle, prevCaptionHeight, prevOrientation) {
+		const count = this.#source?.count ?? 0;
+		if (count === 0) return;
+		const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
+		const horizontal = prevOrientation === `row`;
+		const prev = computeGridWindow(count, prevItemSize, prevRowHeight, prevGap, this._viewportWidth, this._viewportHeight, prevOffset, prevOrientation);
+		const mainStride = horizontal ? prev.colStride : prev.rowStride;
+		const centerLine = (prevOffset + prevExtent / 2) / mainStride;
+		const lineFloor = Math.max(0, Math.floor(centerLine));
+		const index = horizontal ? Math.min(count - 1, lineFloor) : Math.min(count - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
+		this.#zoomAnchor = {
+			index,
+			lineFrac: centerLine - lineFloor
+		};
 	}
-	#slotNameFor(el) {
-		let name = this.#slotNames.get(el);
-		if (name === void 0) {
-			this.#slotSeq += 1;
-			name = `gl-item-${this.#slotSeq}`;
-			this.#slotNames.set(el, name);
+	/**
+	* Re-read the viewport after an ancestor's visibility/layout changed.
+	* Safe while hidden (zero-sized reads are ignored); forces a repaint of the
+	* virtual window even when the size is unchanged.
+	*/
+	refreshLayout() {
+		this.#measureViewport(true);
+	}
+	/** Alias of {@link refreshLayout}. */
+	remeasure() {
+		this.#measureViewport(true);
+	}
+	#measureViewport(forceRender = false) {
+		const vp = this.#viewportRef.value;
+		if (!vp) return;
+		const w = vp.clientWidth;
+		const h = vp.clientHeight;
+		if (w <= 0 || h <= 0) return;
+		const horizontal = this.orientation === `row`;
+		const changed = w !== this._viewportWidth || h !== this._viewportHeight;
+		if (changed) {
+			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+			const prevExtent = horizontal ? w : h;
+			this.#captureCentreAnchor(prevOffset, prevExtent, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
+			this._viewportWidth = w;
+			this._viewportHeight = h;
 		}
-		return name;
+		if (forceRender && !changed) {
+			this.#captureCentreAnchor(horizontal ? this._scrollLeft : this._scrollTop, horizontal ? w : h, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
+			this.requestUpdate();
+		}
+		if (changed || forceRender) this.updateComplete.then(() => this.#emitViewportChange());
 	}
-	_getVisibleItems() {
-		return this.#items.filter((el) => {
-			if (el.hidden) return false;
-			return true;
-		});
+	/**
+	* Element mode only: re-read the light DOM into the source and refresh the
+	* `#items` cache + filter. A no-op in data mode (the source is rebuilt through
+	* `#rebuildSource` when `items` / `itemAdapter` change).
+	*/
+	#syncItems() {
+		if (this.#source instanceof ElementGridListSource) {
+			this.#source.refresh();
+			this.#applyFilters();
+		}
 	}
 	get count() {
-		return this.#items.length;
+		return this.#source.count;
 	}
 	/**
 	* Number of cells currently rendered in the shadow DOM. With virtualization
@@ -20177,20 +21287,38 @@ let GridListElement = class GridListElement extends i {
 		return this.renderRoot.querySelectorAll(`.cell`).length;
 	}
 	get selectedItems() {
-		return this.selection.selected;
+		const els = /* @__PURE__ */ new Set();
+		for (const key of this.selection.selectedKeys) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) els.add(el);
+		}
+		return els;
 	}
-	/** The selection as stable `data-key` / `data-value` strings. */
+	/**
+	* The selection as stable `data-key` / `data-value` strings. Auto-assigned
+	* keys for keyless light-DOM items are omitted (they are not a stable contract
+	* for the consumer).
+	*/
 	get selectedKeys() {
-		return this.selection.selectedKeys;
+		const out = /* @__PURE__ */ new Set();
+		for (const k of this.selection.selectedKeys) if (!isSyntheticKey(k)) out.add(k);
+		return out;
 	}
 	select(item) {
-		this.selection.replace(item);
+		const key = keyForElement(item);
+		if (key) this.selection.replace(key);
 	}
 	selectMany(items) {
-		this.selection.selectMany(items);
+		const keys = [];
+		for (const item of items) {
+			const key = keyForElement(item);
+			if (key) keys.push(key);
+		}
+		this.selection.selectMany(keys);
 	}
 	deselect(item) {
-		this.selection.deselect(item);
+		const key = keyForElement(item);
+		if (key) this.selection.deselect(key);
 	}
 	clearSelection() {
 		this.selection.clear();
@@ -20204,44 +21332,126 @@ let GridListElement = class GridListElement extends i {
 	* have a `data-key` (or `data-value`).
 	*/
 	selectKeys(keys) {
-		this.selection.selectKeys(keys, (key) => this.getItem(key));
+		this.selection.selectKeys(keys, (k) => k);
 	}
 	/** Add items by key to the selection (multi-select modes only). */
 	addSelectedKeys(keys) {
-		this.selection.addKeys(keys, (key) => this.getItem(key));
+		this.selection.addKeys(keys, (k) => k);
 	}
 	/** Remove items by key from the selection. */
 	removeSelectedKeys(keys) {
-		this.selection.removeKeys(keys, (key) => this.getItem(key));
+		this.selection.removeKeys(keys, (k) => k);
+	}
+	/**
+	* Data mode only: raw index of `key` in `this.items`, or `-1`. Data-mode keys
+	* come straight from the adapter, so this is exact even under a filter/search.
+	*/
+	#rawIndexOfKey(key) {
+		const adapter = this.itemAdapter;
+		if (!adapter) return -1;
+		return this.items.findIndex((it, i) => adapter.key(it, i) === key);
+	}
+	/**
+	* Data mode: replace the whole item array. Selection and cursor keep any key
+	* that is still present; keys that vanish are dropped (one `list-select`).
+	* A no-op in element mode.
+	*/
+	setItems(items) {
+		if (this.itemAdapter) this.items = items;
+	}
+	/**
+	* Data mode: append items to the end. Scroll position, selection and cursor
+	* are untouched; appended items don't play the mid-list `[reflowing]` slide.
+	* A no-op in element mode.
+	*/
+	appendItems(items) {
+		if (this.itemAdapter && items.length > 0) this.items = [...this.items, ...items];
+	}
+	/**
+	* Data mode: replace the item carrying `key`. A visible cell re-renders in
+	* place (the keyed subtree is kept); an offscreen item shows its new content
+	* when scrolled into view. Scroll and selection are untouched. Unknown keys
+	* are ignored.
+	*/
+	updateItem(key, item) {
+		if (!this.itemAdapter) return;
+		const idx = this.#rawIndexOfKey(key);
+		if (idx < 0) return;
+		const next = [...this.items];
+		next[idx] = item;
+		this.items = next;
+	}
+	/**
+	* Data mode: remove the items carrying these keys. Removed keys are dropped
+	* from selection and cursor (via the `items` change). A no-op in element mode.
+	*/
+	removeItems(keys) {
+		if (!this.itemAdapter) return;
+		const adapter = this.itemAdapter;
+		const keySet = new Set(keys);
+		this.items = this.items.filter((it, i) => !keySet.has(adapter.key(it, i)));
+	}
+	/**
+	* Data mode: drop every item. Selection and cursor are reset and one
+	* `list-select` with empty sets is emitted. A no-op in element mode.
+	*/
+	clearItems() {
+		if (!this.itemAdapter) return;
+		this.selection.reset();
+		this.tickled.focus(void 0);
+		this.items = [];
+		this.#emitSelect(/* @__PURE__ */ new Set(), /* @__PURE__ */ new Set());
 	}
 	/** Move the cursor to the item with this key and scroll it into view. */
 	focusKey(key) {
-		const el = this.getItem(key);
-		if (!el) return;
-		this.tickled.focus(el);
-		this.#scrollItemIntoView(el);
+		if (this.#source.indexOfKey(key) < 0) return;
+		this.tickled.focus(key);
+		this.#scrollItemIntoView(key);
 	}
 	/** The key of the item under the cursor, or `undefined`. */
 	get tickledKey() {
-		const id = this.tickled.tickledId;
-		return id ? keyForElement(id) : void 0;
+		return this.tickled.tickledId;
 	}
+	/** Element mode: the light-DOM element carrying `key`, or `undefined`. */
 	getItem(key) {
-		return this.#items.find((el) => keyForElement(el) === key);
+		return this.#source.resolveKeyToElement(key);
 	}
+	/** Element mode: the light-DOM element at effective index `index`. */
 	getItemByIndex(index) {
 		return this.#items[index];
 	}
+	/** Data mode: the data value carrying `key`, or `undefined`. */
+	getData(key) {
+		return this.#source.resolveKeyToData(key);
+	}
 	getKey(item) {
 		return keyForElement(item);
 	}
+	/**
+	* Keys of items in the rendered window (viewport + overscan) — the priority
+	* set for prefetching. Use {@link visibleKeys} for the strict viewport
+	* intersection. Auto-assigned keyless-item keys are omitted.
+	*/
+	renderedKeys() {
+		return this.#windowKeys(this.#currentWindow());
+	}
+	/**
+	* Keys of items actually intersecting the viewport (no overscan).
+	* Auto-assigned keyless-item keys are omitted.
+	*/
 	visibleKeys() {
-		const win = this.#currentWindow();
-		return this.#items.slice(win.startIndex, win.endIndex).map((el) => keyForElement(el)).filter((k) => k !== void 0);
+		return this.#windowKeys(this.#currentWindow(true));
+	}
+	#windowKeys(win) {
+		return this.#source.keys().slice(win.startIndex, win.endIndex).filter((k) => !isSyntheticKey(k));
+	}
+	#currentWindow(noOverscan = false) {
+		const overscan = noOverscan ? 0 : 2;
+		return computeGridWindow(this.#source.count, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation, overscan);
 	}
-	/** Adjust the scroll offset so `el` is fully within the viewport. */
-	#scrollItemIntoView(el) {
-		const index = this.#items.indexOf(el);
+	/** Adjust the scroll offset so `key` is fully within the viewport. */
+	#scrollItemIntoView(key) {
+		const index = this.#source.indexOfKey(key);
 		const vp = this.#viewportRef.value;
 		if (index < 0 || !vp) return;
 		const win = this.#currentWindow();
@@ -20270,12 +21480,43 @@ let GridListElement = class GridListElement extends i {
 		}
 	}
 	_syncItemStates() {
+		const selected = this.selection.selectedKeys;
 		for (const el of this.#items) {
-			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
-			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+			const key = keyForElement(el);
+			el.toggleAttribute(`data-tickled`, key !== void 0 && this.tickled.isTickled(key));
+			el.toggleAttribute(`data-selected`, key !== void 0 && selected.has(key));
 		}
 		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 	}
+	#emitSelect(selected, previous) {
+		const selectedEls = /* @__PURE__ */ new Set();
+		const previousEls = /* @__PURE__ */ new Set();
+		for (const key of selected) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) selectedEls.add(el);
+		}
+		for (const key of previous) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) previousEls.add(el);
+		}
+		this._dispatch(`list-select`, {
+			selected: selectedEls,
+			previous: previousEls,
+			selectedKeys: this.selectedKeys,
+			previousKeys: new Set([...previous].filter((k) => !isSyntheticKey(k)))
+		});
+	}
+	#emitItemEvent(name, key) {
+		const index = this.#source.indexOfKey(key);
+		const element = this.#source.resolveKeyToElement(key);
+		const item = element ?? this.#source.resolveKeyToData(key);
+		this._dispatch(name, {
+			item,
+			key,
+			index,
+			element
+		});
+	}
 	_dispatch(name, detail) {
 		this.dispatchEvent(new CustomEvent(name, {
 			detail,
@@ -20283,9 +21524,11 @@ let GridListElement = class GridListElement extends i {
 			composed: true
 		}));
 	}
+	/** Selected keys, snapshotted once per render so the cell renderers don't each rebuild the set. */
+	#selectedSnapshot;
 	render() {
 		const win = this.#currentWindow();
-		const slice = this.#items.slice(win.startIndex, win.endIndex);
+		this.#selectedSnapshot = this.selection.selectedKeys;
 		const spacerStyle = win.horizontal ? `width:${win.totalWidth}px;height:100%` : `height:${win.totalHeight}px`;
 		const scrollFade = win.horizontal ? `scroll-fade-x` : `scroll-fade-y`;
 		return b`
@@ -20297,14 +21540,56 @@ let GridListElement = class GridListElement extends i {
         @scroll=${this.#onScroll}
       >
         <div class="spacer" style=${spacerStyle}>
-          ${repeat(slice, (el) => this.#slotNameFor(el), (el, i) => this.#renderCell(el, win.startIndex + i, win))}
+          ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
         </div>
       </div>
+      ${this.search?.renderField()}
     `;
 	}
+	#renderDataCells(win) {
+		const slice = Array.from({ length: win.endIndex - win.startIndex }, (_, i) => win.startIndex + i);
+		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderDataCell(index, win));
+	}
+	#renderDataCell(index, win) {
+		const key = this.#source.keyAt(index);
+		const selected = this.#selectedSnapshot.has(key);
+		const tickled = this.tickled.isTickled(key);
+		const style = this.captionStyle;
+		const separate = style === `separate`;
+		const caption = style === `hidden` ? `` : this.#source.labelAt(index);
+		const showCaption = caption !== ``;
+		const cellHeight = win.rowStride - this.gap;
+		const x = win.horizontal ? index * win.colStride : columnOf(index, win.cols) * win.colStride;
+		const y = win.horizontal ? Math.max(0, (this._viewportHeight - cellHeight) / 2) : rowOf(index, win.cols) * win.rowStride;
+		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
+		return b`
+      <div
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        role="option"
+        aria-selected=${selected ? `true` : `false`}
+        style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
+        data-index=${index}
+        data-key=${key}
+        ?data-selected=${selected}
+        ?data-tickled=${tickled}
+        @click=${(e) => this.#onCellClick(e, key)}
+        @dblclick=${() => this.#onCellActivate(key)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+      >
+        <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
+        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+      </div>
+    `;
+	}
+	#renderElementCells(win) {
+		const slice = this.#items.slice(win.startIndex, win.endIndex);
+		return repeat(slice, (_el, i) => this.#source.keyAt(win.startIndex + i), (el, i) => this.#renderCell(el, win.startIndex + i, win));
+	}
 	#renderCell(el, index, win) {
-		const selected = this.selection.selected.has(el);
-		const tickled = this.tickled.isTickled(el);
+		const key = this.#source.keyAt(index);
+		const selected = this.#selectedSnapshot.has(key);
+		const tickled = this.tickled.isTickled(key);
 		const entering = this.#entering.has(el);
 		const style = this.captionStyle;
 		const separate = style === `separate`;
@@ -20318,17 +21603,22 @@ let GridListElement = class GridListElement extends i {
 		return b`
       <div
         class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
-        part="item"
+        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        role="option"
+        aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
-        @click=${(e) => this.#onCellClick(e, el)}
-        @dblclick=${() => this.#onCellActivate(el)}
-        @pointerenter=${() => this.tickled.handlePointerEnter(el)}
+        data-key=${key}
+        ?data-selected=${selected}
+        ?data-tickled=${tickled}
+        @click=${(e) => this.#onCellClick(e, key)}
+        @dblclick=${() => this.#onCellActivate(key)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
-          <slot name=${this.#slotNameFor(el)}></slot>
+          ${this.#source.renderCellContent(index)}
         </div>
-        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss}>${caption}</div>` : ``}
+        ${showCaption ? b`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
       </div>
     `;
 	}
@@ -20339,16 +21629,13 @@ let GridListElement = class GridListElement extends i {
 			this.#scrollRaf = 0;
 		}
 	}
-	#onCellClick(e, item) {
-		this.selection.handleClick(item, e);
-		this._dispatch(`list-item-click`, { item });
+	#onCellClick(e, key) {
+		this.selection.handleClick(key, e);
+		this.#emitItemEvent(`list-item-click`, key);
 	}
-	#onCellActivate(item) {
-		if (this.interactionMode !== `manual`) this.selection.replace(item);
-		this._dispatch(`list-activate`, { item });
-	}
-	#currentWindow() {
-		return computeGridWindow(this.#items.length, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation);
+	#onCellActivate(key) {
+		if (this.interactionMode !== `manual`) this.selection.replace(key);
+		this.#emitItemEvent(`list-activate`, key);
 	}
 };
 __decorate([property({
@@ -20396,6 +21683,15 @@ __decorate([property({
 	type: String,
 	attribute: `item-wrap`
 })], GridListElement.prototype, "itemWrap", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "itemFilterPredicate", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], GridListElement.prototype, "searchModes", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "items", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "itemAdapter", void 0);
 __decorate([state()], GridListElement.prototype, "_scrollTop", void 0);
 __decorate([state()], GridListElement.prototype, "_scrollLeft", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
@@ -20415,6 +21711,7 @@ let PanelElement = class PanelElement extends i {
 		this.toggleInteraction = `implicit`;
 		this.variant = `titlebar`;
 		this.hideTitlebar = false;
+		this.keepToolbar = false;
 	}
 	_onTitlebarToggle(event) {
 		event.stopPropagation();
@@ -20434,6 +21731,7 @@ let PanelElement = class PanelElement extends i {
 		this.remove();
 	}
 	render() {
+		const showToolbar = this.keepToolbar || !this.collapsed;
 		return b`
       ${this.hideTitlebar ? A : b`
         <ixfx-titlebar
@@ -20448,7 +21746,7 @@ let PanelElement = class PanelElement extends i {
           @toggle=${this._onTitlebarToggle}
           @close=${this._onCloseClick}
         >
-          <slot name="toolbar" slot="toolbar"></slot>
+          ${showToolbar ? b`<slot name="toolbar" slot="toolbar"></slot>` : A}
         </ixfx-titlebar>
         `}
 
@@ -20548,6 +21846,30 @@ let PanelElement = class PanelElement extends i {
     :host([variant="midline"][orientation="vertical"]) .content-wrapper {
       background: transparent;
     }
+
+    /* === Tree variant: VS Code explorer / Outline style === */
+
+    :host([variant="tree"]) {
+      border: none !important;
+      border-radius: 0 !important;
+      background: transparent;
+    }
+
+    :host([variant="tree"]) .content-inner {
+      box-shadow: none;
+      background: transparent;
+      padding: 0;
+    }
+
+    :host([variant="tree"]) .content-wrapper {
+      background: transparent;
+    }
+
+    :host([variant="tree"][orientation="vertical"]) .content-inner {
+      width: max-content;
+      height: 100%;
+      transform: none;
+    }
   `];
 	}
 };
@@ -20583,6 +21905,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-titlebar`
 })], PanelElement.prototype, "hideTitlebar", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `keep-toolbar`
+})], PanelElement.prototype, "keepToolbar", void 0);
 PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
 //#endregion
 //#region src/grouped-item-lister/grouped-item-lister.ts
@@ -20778,6 +22104,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 +22116,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 +22237,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 +22292,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 +22395,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 +22500,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 +22925,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 +22982,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
       >
         ${this.root ? this.#renderNodes(nodes) : A}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	#onDblClick;
@@ -21617,7 +22994,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 +23004,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 +23039,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listSearchStyles,
 			i$3`
       :host {
       --tree-bg: var(--surface-3);
@@ -21672,16 +23050,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 +23180,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 +23265,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 +23537,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 +23573,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 +23586,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 +23594,6 @@ let VerticalListElement = class VerticalListElement extends i {
 				}
 				return;
 			}
-			if (this._searchVisible) return;
 			switch (e.key) {
 				case `ArrowDown`:
 					e.preventDefault();
@@ -22252,40 +23641,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 +23677,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 +23688,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 +23713,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 +23783,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 +23999,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 +24058,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 +24074,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 +24130,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 +24139,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 +24158,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
@@ -27255,15 +28577,62 @@ let LedElement = class LedElement extends i {
 		this.value = 0;
 		this.lit = false;
 		this.color = `oklch(50% 0.15 25)`;
+		this.glow = false;
+		this.mode = `brightness`;
 		this.blinking = false;
 		this.rate = 500;
+		this.attackTime = 40;
+		this.releaseTime = 400;
+		this.pulseRetrigger = false;
+		this.#appliedMode = `brightness`;
+		this.#pulseStart = 0;
+		this.#pulsePeak = 0;
+		this.#pulseFrom = 0;
+		this.#pulseLevel = 0;
+		this.#pulseTick = (now) => {
+			const attack = Math.max(0, this.attackTime);
+			const release = Math.max(0, this.releaseTime);
+			const from = this.#pulseFrom;
+			const peak = this.#pulsePeak;
+			const elapsed = now - this.#pulseStart;
+			let level;
+			if (attack > 0 && elapsed < attack) level = from + (peak - from) * (elapsed / attack);
+			else if (elapsed < attack + release) level = release > 0 ? peak * (1 - (elapsed - attack) / release) : 0;
+			else level = 0;
+			level = Math.max(0, Math.min(Math.max(from, peak), level));
+			this.#pulseLevel = level;
+			this.style.setProperty(`--value`, String(level));
+			if (elapsed < attack + release) this.#pulseRaf = requestAnimationFrame(this.#pulseTick);
+			else {
+				this.#pulseRaf = void 0;
+				this.#pulseLevel = 0;
+			}
+		};
 	}
 	#blinkInterval;
+	#appliedMode;
+	#pulseRaf;
+	#pulseStart;
+	#pulsePeak;
+	#pulseFrom;
+	#pulseLevel;
 	willUpdate(changedProperties) {
-		if (changedProperties.has(`lit`)) this.value = this.lit ? 1 : 0;
-		if (changedProperties.has(`value`) || changedProperties.has(`lit`)) this.style.setProperty(`--value`, String(this.value));
-		if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) this.#updateBlinking();
+		if (changedProperties.has(`blinking`)) {
+			if (this.blinking) this.mode = `blink`;
+			else if (this.mode === `blink`) this.mode = `brightness`;
+		}
+		if (this.mode !== this.#appliedMode) {
+			this.#appliedMode = this.mode;
+			this.#onModeChange();
+		}
+		if (changedProperties.has(`lit`)) {
+			if (this.lit) this.value = 1;
+			else if (changedProperties.get(`lit`) !== void 0) this.value = 0;
+		}
+		if (changedProperties.has(`color`)) this.style.setProperty(`--_color-attr`, this.color);
+		if (this.mode !== `pulse` && (changedProperties.has(`value`) || changedProperties.has(`lit`))) this.style.setProperty(`--value`, String(this.value));
 		if (changedProperties.has(`rate`)) {
+			this.#updateBlinking();
 			const transitionMs = this.rate < 300 ? this.rate * .5 : 150;
 			this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);
 		}
@@ -27271,18 +28640,43 @@ let LedElement = class LedElement extends i {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.#stopBlinking();
+		this.#stopPulse();
 	}
-	#updateBlinking() {
-		if (this.blinking && this.rate > 0) {
-			this.#stopBlinking();
-			this.#blinkInterval = window.setInterval(() => {
-				this.value = this.value === 0 ? 1 : 0;
-			}, this.rate);
-		} else {
-			this.#stopBlinking();
-			this.value = 0;
+	/**
+	* Pulse-mode trigger: lights the LED to {@link value} using an attack/release
+	* envelope, then decays back to unlit. Calling again restarts the envelope
+	* (from 0 if {@link pulseRetrigger} is set, otherwise from the current level).
+	* No-op unless {@link mode} is `pulse`.
+	*/
+	pulse() {
+		if (this.mode !== `pulse`) return;
+		this.#pulsePeak = this.value;
+		this.#pulseFrom = this.pulseRetrigger ? 0 : this.#pulseLevel;
+		this.#pulseStart = performance.now();
+		if (this.#pulseRaf === void 0) this.#pulseRaf = requestAnimationFrame(this.#pulseTick);
+	}
+	#onModeChange() {
+		this.#stopPulse();
+		this.#pulseLevel = 0;
+		this.blinking = this.mode === `blink`;
+		this.#updateBlinking();
+		this.style.setProperty(`--value`, this.mode === `pulse` ? `0` : String(this.value));
+	}
+	#pulseTick;
+	#stopPulse() {
+		if (this.#pulseRaf !== void 0) {
+			cancelAnimationFrame(this.#pulseRaf);
+			this.#pulseRaf = void 0;
 		}
 	}
+	#updateBlinking() {
+		const wasBlinking = this.#blinkInterval !== void 0;
+		this.#stopBlinking();
+		if (this.mode === `blink` && this.rate > 0) this.#blinkInterval = window.setInterval(() => {
+			this.value = this.value === 0 ? 1 : 0;
+		}, this.rate);
+		else if (wasBlinking || this.mode === `blink`) this.value = 0;
+	}
 	#stopBlinking() {
 		if (this.#blinkInterval !== void 0) {
 			clearInterval(this.#blinkInterval);
@@ -27296,6 +28690,8 @@ let LedElement = class LedElement extends i {
 		this.styles = i$3`
     :host {
       --_size: var(--size, 1ex);
+      /* Resolved colour: explicit --colour wins, then the \`color\` attribute, then a default. */
+      --_colour: var(--colour, var(--_color-attr, oklch(50% 0.15 25)));
       display: inline-block;
       min-width: 1ex;
       min-height: 1ex;
@@ -27305,12 +28701,61 @@ let LedElement = class LedElement extends i {
     }
 
     div {
+      position: relative;
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));
+      background: color-mix(in oklch, var(--_colour), white calc((1 - var(--value, 0)) * 50%));
       transition: background var(--transition-duration, 150ms) ease-out;
     }
+
+    /* Glow: a more realistic domed LED with a specular highlight and coloured bloom. */
+    :host([glow]) {
+      /* Body darkens toward black as the LED dims, so an unlit LED reads as a dark dome. */
+      --_body: color-mix(in oklch, var(--_colour), black calc((1 - var(--value, 0)) * 60%));
+      overflow: visible;
+    }
+
+    :host([glow]) div {
+      background:
+        radial-gradient(circle at 32% 28%,
+          color-mix(in oklch, var(--_body), white 55%) 0%,
+          var(--_body) 45%,
+          color-mix(in oklch, var(--_body), black 32%) 100%);
+      box-shadow:
+        /* inner rim shading for depth */
+        inset 0 calc(var(--_size) * -0.1) calc(var(--_size) * 0.18)
+          color-mix(in oklch, var(--_body), black 45%),
+        inset 0 calc(var(--_size) * 0.08) calc(var(--_size) * 0.14)
+          color-mix(in oklch, var(--_body), white 25%),
+        /* coloured bloom, scaled by value so it only glows when lit */
+        0 0 calc(var(--_size) * 0.6 * var(--value, 0)) calc(var(--_size) * 0.12 * var(--value, 0))
+          var(--_colour),
+        0 0 calc(var(--_size) * 1.7 * var(--value, 0)) calc(var(--_size) * 0.5 * var(--value, 0))
+          color-mix(in oklch, var(--_colour), transparent 45%);
+      transition:
+        background var(--transition-duration, 150ms) ease-out,
+        box-shadow var(--transition-duration, 150ms) ease-out;
+    }
+
+    /* Specular highlight blob near the top-left. */
+    :host([glow]) div::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: 50%;
+      background: radial-gradient(ellipse 55% 45% at 30% 22%,
+        color-mix(in oklch, white, transparent 10%) 0%,
+        transparent 60%);
+      pointer-events: none;
+    }
+
+    /* Pulse mode animates --value frame-by-frame, so drop the CSS transition
+       that would otherwise smear the envelope. Placed last to win over the
+       glow rule for elements matching both. */
+    :host([mode="pulse"]) div {
+      transition: none;
+    }
   `;
 	}
 };
@@ -27321,6 +28766,15 @@ __decorate([property({
 	reflect: true
 })], LedElement.prototype, "lit", void 0);
 __decorate([property({ type: String })], LedElement.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `glow`,
+	reflect: true
+})], LedElement.prototype, "glow", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LedElement.prototype, "mode", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: `blinking`,
@@ -27330,6 +28784,18 @@ __decorate([property({
 	type: Number,
 	attribute: `rate`
 })], LedElement.prototype, "rate", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `attack-time`
+})], LedElement.prototype, "attackTime", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `release-time`
+})], LedElement.prototype, "releaseTime", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `pulse-retrigger`
+})], LedElement.prototype, "pulseRetrigger", void 0);
 LedElement = __decorate([safeCustomElement(`ixfx-led`)], LedElement);
 //#endregion
 //#region src/miller/miller-base.ts
@@ -27338,6 +28804,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 +28816,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 +28829,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 +29036,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 +29069,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 +29124,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 +29231,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 +29276,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 +29329,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 +29342,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 +29586,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 +29689,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 +29704,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 +29835,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 +29846,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 +29863,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 +29880,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 +29902,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		})}
         ${this._loadingDepth !== void 0 ? this.#renderLoadingColumn() : A}
       </div>
+      ${this.search.renderField()}
     `;
 	}
 	_getFocusedIndex(depth) {
@@ -28255,6 +29938,7 @@ let MillerBaseElement = class MillerBaseElement extends i {
 		this.styles = [
 			themeFallbacks,
 			tickledStyles,
+			listSearchStyles,
 			i$3`
     :host {
       --column-bg: var(--surface-3);
@@ -28289,6 +29973,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 +30070,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 +30087,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 +30329,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);
@@ -29240,6 +30963,66 @@ __decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
 PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
 //#endregion
 //#region src/panel/panel-group.ts
+/** Pointer movement threshold (px) before a press becomes a drag. */
+const DRAG_THRESHOLD_PX = 5;
+/**
+* Pure helper: nearest gap index for a pointer position along one axis.
+* `edges` are the [start, end] of each sibling (excluding the drag source),
+* in DOM order. Returns 0..edges.length.
+*/
+function panelGapIndex(edges, pos) {
+	let bestGap = 0;
+	let bestDist = Number.POSITIVE_INFINITY;
+	for (let i = 0; i < edges.length; i++) {
+		const [start, end] = edges[i];
+		if (pos < (start + end) / 2) {
+			const d = Math.abs(pos - start);
+			if (d < bestDist) {
+				bestDist = d;
+				bestGap = i;
+			}
+		} else {
+			const d = Math.abs(pos - end);
+			if (d < bestDist) {
+				bestDist = d;
+				bestGap = i + 1;
+			}
+		}
+	}
+	return bestGap;
+}
+let panelGhostStylesInjected = false;
+/**
+* Global ghost styling so the drag preview matches `ixfx-titlebar` chrome
+* (font, colours, padding). Injected once; the ghost lives outside shadow DOM
+* (body/theme container) so component styles cannot reach it.
+*/
+function injectPanelGhostStyles() {
+	if (panelGhostStylesInjected) return;
+	panelGhostStylesInjected = true;
+	const style = document.createElement(`style`);
+	style.textContent = `
+    .ixfx-drag-ghost.ixfx-panel-group-ghost {
+      padding: var(--space-s, 8px) var(--space-m, 16px);
+      background: var(--surface-4);
+      color: var(--surface-3-text);
+      border: none;
+      border-radius: var(--radius-s, 4px);
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      font-weight: var(--font-weight-bold, 600);
+      min-height: 2em;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+    .ixfx-drag-ghost.ixfx-panel-group-ghost ixfx-icon {
+      width: 1.25em;
+      height: 1.25em;
+      flex-shrink: 0;
+    }
+  `;
+	document.head.appendChild(style);
+}
 let PanelGroupElement = class PanelGroupElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -29247,22 +31030,105 @@ let PanelGroupElement = class PanelGroupElement extends i {
 		this.variant = `titlebar`;
 		this.toggleInteraction = `implicit`;
 		this.collapsible = true;
-		this.allowMultiple = false;
-		this.gap = `var(--space-m)`;
+		this.accordion = false;
+		this.allowReorder = false;
+		this._dragState = null;
+		this._suppressNextClick = false;
+		this._onClickCapture = (event) => {
+			if (!this._suppressNextClick) return;
+			this._suppressNextClick = false;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		this._onKeyDown = (event) => {
+			const state = this._dragState;
+			if (event.key !== `Escape` || !state?.active) return;
+			event.preventDefault();
+			const pointerId = state.pointerId;
+			this._abortDrag();
+			this._endDrag(pointerId);
+		};
+		this._onPointerDown = (event) => {
+			if (!this.allowReorder || event.button !== 0) return;
+			const target = this._findDragTarget(event);
+			if (!target?.parentNode) return;
+			const fromIndex = Array.prototype.indexOf.call(target.parentNode.children, target);
+			if (fromIndex < 0) return;
+			this._dragState = {
+				pointerId: event.pointerId,
+				source: target,
+				fromIndex,
+				startX: event.clientX,
+				startY: event.clientY,
+				active: false,
+				ghost: null,
+				gapIndex: void 0
+			};
+			window.addEventListener(`pointermove`, this._onPointerMove);
+			window.addEventListener(`pointerup`, this._onPointerUp);
+			window.addEventListener(`pointercancel`, this._onPointerCancel);
+		};
+		this._onPointerMove = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			const distance = Math.hypot(event.clientX - state.startX, event.clientY - state.startY);
+			if (!state.active) {
+				if (distance < DRAG_THRESHOLD_PX) return;
+				this._beginDrag(event);
+			}
+			state.ghost?.move(event.clientX, event.clientY);
+			const gap = this._computeGapIndex(event.clientX, event.clientY);
+			if (gap !== state.gapIndex) {
+				state.gapIndex = gap;
+				this.requestUpdate();
+			}
+		};
+		this._onPointerUp = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			if (state.active) {
+				const gap = this._computeGapIndex(event.clientX, event.clientY);
+				this._commitDrag(state.source, state.fromIndex, gap);
+			}
+			this._endDrag(event.pointerId);
+		};
+		this._onPointerCancel = (event) => {
+			const state = this._dragState;
+			if (!state || event.pointerId !== state.pointerId) return;
+			this._abortDrag();
+			this._endDrag(event.pointerId);
+		};
 	}
 	_onPanelToggle(e) {
 		const panel = e.target;
 		if (panel.collapsed) return;
-		if (this.allowMultiple) return;
+		if (!this.accordion) return;
 		for (const p of this._panels) if (p !== panel) p.collapsed = true;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`click`, this._onClickCapture, true);
+	}
+	disconnectedCallback() {
+		this.removeEventListener(`click`, this._onClickCapture, true);
+		if (this._dragState) {
+			this._abortDrag();
+			this._endDrag(this._dragState.pointerId);
+		}
+		super.disconnectedCallback();
+	}
 	firstUpdated() {
+		if (this.gap !== void 0) this.style.setProperty(`--group-gap`, this.gap);
 		this.updateComplete.then(() => {
 			this._propagateAll();
 		});
 	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`gap`)) {
+			if (this.gap !== void 0) this.style.setProperty(`--group-gap`, this.gap);
+			else this.style.removeProperty(`--group-gap`);
+		}
 		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`) || changed.has(`collapsible`)) this.updateComplete.then(() => {
 			this._propagateAll();
 		});
@@ -29277,19 +31143,167 @@ let PanelGroupElement = class PanelGroupElement extends i {
 			else panel.removeAttribute(`collapsible`);
 		}
 	}
+	_onSlotChange() {
+		this.updateComplete.then(() => {
+			this._propagateAll();
+		});
+	}
+	/**
+	* Walk composedPath for the nearest ixfx-panel, requiring the press to have
+	* gone through an ixfx-titlebar (titlebar-anywhere drag). Bails when the
+	* path crosses interactive chrome (buttons/links/inputs/toolbar/caret/close)
+	* so those controls always win over dragging.
+	*/
+	_findDragTarget(event) {
+		if (!this.allowReorder) return null;
+		const path = event.composedPath();
+		let panel = null;
+		let viaTitlebar = false;
+		for (const node of path) {
+			if (!(node instanceof HTMLElement)) continue;
+			const tag = node.tagName;
+			if (tag === `BUTTON` || tag === `A` || tag === `INPUT` || tag === `SELECT` || tag === `TEXTAREA`) return null;
+			if (node.classList.contains(`toolbar`) || node.classList.contains(`close-btn`) || node.classList.contains(`caret-btn`)) return null;
+			if (node.hasAttribute?.(`slot`) && node.getAttribute(`slot`) === `toolbar`) return null;
+			if (tag === `IXFX-TITLEBAR`) viaTitlebar = true;
+			if (!panel && tag === `IXFX-PANEL`) panel = node;
+		}
+		if (!panel || !viaTitlebar) return null;
+		return panel;
+	}
+	_beginDrag(event) {
+		const state = this._dragState;
+		if (!state || state.active) return;
+		try {
+			this.setPointerCapture(event.pointerId);
+		} catch {}
+		state.active = true;
+		this.setAttribute(`dragging`, ``);
+		state.source.setAttribute(`drag-source`, ``);
+		state.ghost = this._createGhost(state.source);
+		state.ghost?.move(event.clientX, event.clientY);
+	}
+	_abortDrag() {
+		const state = this._dragState;
+		if (!state) return;
+		state.source.removeAttribute(`drag-source`);
+		if (state.gapIndex !== void 0) {
+			state.gapIndex = void 0;
+			this.requestUpdate();
+		}
+	}
+	_endDrag(pointerId) {
+		const state = this._dragState;
+		if (!state) return;
+		state.ghost?.destroy();
+		state.ghost = null;
+		this.removeAttribute(`dragging`);
+		this._dragState = null;
+		window.removeEventListener(`pointermove`, this._onPointerMove);
+		window.removeEventListener(`pointerup`, this._onPointerUp);
+		window.removeEventListener(`pointercancel`, this._onPointerCancel);
+		try {
+			this.releasePointerCapture(pointerId);
+		} catch {}
+		this.requestUpdate();
+	}
+	_commitDrag(source, fromIndex, gapIndex) {
+		source.removeAttribute(`drag-source`);
+		const siblings = (this._panels ?? []).filter((el) => el !== source);
+		const target = gapIndex === void 0 ? siblings.length : Math.max(0, Math.min(gapIndex, siblings.length));
+		const parent = source.parentNode;
+		if (!parent) return;
+		const ref = siblings[target] ?? null;
+		parent.insertBefore(source, ref);
+		const toIndex = Array.prototype.indexOf.call(parent.children, source);
+		if (toIndex === fromIndex) return;
+		this._suppressNextClick = true;
+		this.dispatchEvent(new CustomEvent(`reorder`, {
+			bubbles: true,
+			composed: true,
+			detail: {
+				fromIndex,
+				toIndex,
+				panel: source
+			}
+		}));
+	}
+	_createGhost(source) {
+		const content = document.createElement(`span`);
+		content.style.display = `inline-flex`;
+		content.style.alignItems = `center`;
+		content.style.padding = `0 var(--space-s, 8px)`;
+		content.style.minWidth = `0`;
+		if (source.iconName) {
+			const icon = document.createElement(`ixfx-icon`);
+			icon.name = source.iconName;
+			content.appendChild(icon);
+		}
+		const label = document.createElement(`span`);
+		label.textContent = (source.title || (source.textContent ?? ``).trim()).slice(0, 60);
+		label.style.paddingLeft = `1ch`;
+		label.style.overflow = `hidden`;
+		label.style.textOverflow = `ellipsis`;
+		label.style.whiteSpace = `nowrap`;
+		content.appendChild(label);
+		try {
+			injectPanelGhostStyles();
+			return createDragGhost({
+				anchor: source,
+				content,
+				className: `ixfx-panel-group-ghost`
+			});
+		} catch {
+			return null;
+		}
+	}
+	/**
+	* Nearest panel gap to the pointer, ignoring the drag source.
+	* The perpendicular axis is ignored — the pointer always resolves to a gap.
+	*/
+	_computeGapIndex(clientX, clientY) {
+		const state = this._dragState;
+		if (!state) return;
+		const siblings = (this._panels ?? []).filter((el) => el !== state.source);
+		if (siblings.length === 0) return 0;
+		const useX = this.orientation === `horizontal`;
+		const pos = useX ? clientX : clientY;
+		return panelGapIndex(siblings.map((el) => {
+			const rect = el.getBoundingClientRect();
+			return [useX ? rect.left : rect.top, useX ? rect.right : rect.bottom];
+		}), pos);
+	}
+	_computeCaretStyle() {
+		const state = this._dragState;
+		if (!state?.active || state.gapIndex === void 0) return;
+		const siblings = (this._panels ?? []).filter((el) => el !== state.source);
+		if (siblings.length === 0) return;
+		const hostRect = this.getBoundingClientRect();
+		if (!hostRect) return;
+		const gap = Math.max(0, Math.min(state.gapIndex, siblings.length));
+		const rect = gap < siblings.length ? siblings[gap].getBoundingClientRect() : siblings[siblings.length - 1].getBoundingClientRect();
+		if (this.orientation === `horizontal`) return `transform: translate(${(gap < siblings.length ? rect.left : rect.right) - hostRect.left - 1}px, 0); width: 2px; height: ${hostRect.height}px;`;
+		return `transform: translate(0, ${(gap < siblings.length ? rect.top : rect.bottom) - hostRect.top - 1}px); width: ${hostRect.width}px; height: 2px;`;
+	}
 	render() {
+		const caretStyle = this._computeCaretStyle();
 		return b`
       <slot
         @toggle=${this._onPanelToggle}
+        @slotchange=${this._onSlotChange}
+        @pointerdown=${this._onPointerDown}
+        @keydown=${this._onKeyDown}
       ></slot>
+      ${caretStyle ? b`<div class="drop-caret" style=${caretStyle}></div>` : A}
     `;
 	}
 	static {
 		this.styles = i$3`
     :host {
+      position: relative;
       display: flex;
       flex-direction: column;
-      gap: var(--group-gap, var(--space-m));
+      gap: var(--group-gap, var(--space-l));
     }
 
     :host([orientation="horizontal"]) {
@@ -29310,6 +31324,36 @@ let PanelGroupElement = class PanelGroupElement extends i {
       flex-basis: content;
       min-width: 0;
     }
+
+    :host([allow-reorder]) ::slotted(ixfx-panel) {
+      cursor: grab;
+    }
+
+    :host([allow-reorder]) ::slotted(ixfx-panel[drag-source]) {
+      cursor: grabbing;
+      opacity: 0.4;
+    }
+
+    /* While dragging, suppress text selection inside the panels. */
+    :host([dragging]),
+    :host([dragging]) ::slotted(*) {
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    :host([dragging]) ::slotted(ixfx-panel) {
+      cursor: grabbing;
+    }
+
+    .drop-caret {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--accent);
+      border-radius: 1px;
+      pointer-events: none;
+      z-index: 1;
+    }
   `;
 	}
 };
@@ -29325,8 +31369,14 @@ __decorate([property({
 __decorate([property({ type: Boolean })], PanelGroupElement.prototype, "collapsible", void 0);
 __decorate([property({
 	type: Boolean,
-	attribute: `allow-multiple`
-})], PanelGroupElement.prototype, "allowMultiple", void 0);
+	attribute: `accordion`,
+	reflect: true
+})], PanelGroupElement.prototype, "accordion", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `allow-reorder`,
+	reflect: true
+})], PanelGroupElement.prototype, "allowReorder", void 0);
 __decorate([property()], PanelGroupElement.prototype, "gap", void 0);
 __decorate([queryAssignedElements({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
 PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
@@ -30039,11 +32089,18 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.valueTooltips = `hover`;
 		this.tooltipDelay = 400;
 		this.valueUpdateInterval = 500;
+		this.interactionMode = `inspect`;
 		this.valueFormat = (valueMin, valueMax, frequency) => `${valueMin.toFixed(2)} - ${valueMax.toFixed(2)}: ${frequency}`;
 		this._width = 100;
 		this._height = 40;
 		this._hoveredIndex = null;
 		this._inlineOverlayText = null;
+		this._coloredRangeMin = null;
+		this._coloredRangeMax = null;
+		this._selectionStart = null;
+		this._selectionEnd = null;
+		this._isDragging = false;
+		this._selectionOverlayText = null;
 		this.#series = new PlotDataSeries({
 			capacityLimit: 100,
 			persistentScaling: true
@@ -30056,6 +32113,22 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.#tooltipPosition = null;
 		this.#valueRefreshTimer = null;
 		this.#onPointerMove = (e) => {
+			if (this.interactionMode === `select` && this._isDragging) {
+				const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+				this._selectionEnd = index;
+				const start = Math.min(this._selectionStart, this._selectionEnd);
+				const end = Math.max(this._selectionStart, this._selectionEnd);
+				const bars = this.#computeBars();
+				if (start <= end) {
+					const startBar = bars[start];
+					const endBar = bars[end];
+					this.setColoredRange(startBar.valueMin, endBar.valueMax);
+					this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
+				}
+				this.requestUpdate();
+				return;
+			}
+			if (this.interactionMode === `select`) return;
 			if (this.valueTooltips === `none`) return;
 			const index = this.#bucketIndexFromPointer(e.clientX, e.clientY);
 			const bucketIndex = index >= 0 ? index : null;
@@ -30063,10 +32136,34 @@ let PlotHistogram = class PlotHistogram extends i {
 			else this.#updateBubbleTooltip(bucketIndex, e.clientX, e.clientY);
 		};
 		this.#onPointerLeave = () => {
+			if (this.interactionMode === `select`) {
+				if (this._isDragging) {
+					this._isDragging = false;
+					this._selectionOverlayText = null;
+					this.requestUpdate();
+				}
+				return;
+			}
 			if (this.valueTooltips === `none`) return;
 			if (this.valueTooltips === `inline`) this.#setInlineIndex(null);
 			else this.#updateBubbleTooltip(null, 0, 0);
 		};
+		this.#onPointerDown = (e) => {
+			if (this.interactionMode !== `select`) return;
+			const index = this.#bucketIndexFromPosition(e.clientX, e.clientY);
+			this._isDragging = true;
+			this._selectionStart = index;
+			this._selectionEnd = index;
+			const bars = this.#computeBars();
+			const startBar = bars[index];
+			const endBar = bars[index];
+			this.setColoredRange(startBar.valueMin, endBar.valueMax);
+			this._selectionOverlayText = `Select: ${startBar.valueMin.toFixed(2)} – ${endBar.valueMax.toFixed(2)}`;
+			this.requestUpdate();
+		};
+		this.#onPointerUp = () => {
+			if (this.interactionMode === `select`) this._isDragging = false;
+		};
 	}
 	#series;
 	#hasProgrammaticData;
@@ -30090,6 +32187,59 @@ let PlotHistogram = class PlotHistogram extends i {
 		this.#series.clear();
 		this.requestUpdate();
 	}
+	setColoredRange(min, max) {
+		this._coloredRangeMin = min;
+		this._coloredRangeMax = max;
+		this.requestUpdate();
+	}
+	clearColoredRange() {
+		this._coloredRangeMin = null;
+		this._coloredRangeMax = null;
+		this.requestUpdate();
+	}
+	setSelection(startBarIndex, endBarIndex) {
+		const bars = this.#computeBars();
+		const start = Math.min(startBarIndex, endBarIndex);
+		const end = Math.max(startBarIndex, endBarIndex);
+		const clampedStart = Math.max(0, Math.min(start, bars.length - 1));
+		const clampedEnd = Math.max(0, Math.min(end, bars.length - 1));
+		this._selectionStart = clampedStart;
+		this._selectionEnd = clampedEnd;
+		if (clampedStart <= clampedEnd) {
+			const startBar = bars[clampedStart];
+			const endBar = bars[clampedEnd];
+			this.setColoredRange(startBar.valueMin, endBar.valueMax);
+		}
+		this.requestUpdate();
+	}
+	clearSelection() {
+		this._selectionStart = null;
+		this._selectionEnd = null;
+		this.requestUpdate();
+	}
+	getSelectedRange() {
+		if (this._selectionStart === null || this._selectionEnd === null) return {
+			barIndices: null,
+			dataValues: null
+		};
+		const bars = this.#computeBars();
+		const start = Math.min(this._selectionStart, this._selectionEnd);
+		const end = Math.max(this._selectionStart, this._selectionEnd);
+		const clampedStart = Math.max(0, Math.min(start, bars.length - 1));
+		const clampedEnd = Math.max(0, Math.min(end, bars.length - 1));
+		const startBar = bars[clampedStart];
+		const endBar = bars[clampedEnd];
+		return {
+			barIndices: {
+				start: clampedStart,
+				end: clampedEnd
+			},
+			dataValues: {
+				min: startBar.valueMin,
+				max: endBar.valueMax
+			}
+		};
+	}
 	firstUpdated(_changed) {
 		this._width = this.clientWidth || 100;
 		this._height = this.clientHeight || 40;
@@ -30224,6 +32374,10 @@ let PlotHistogram = class PlotHistogram extends i {
 			}
 		});
 	}
+	#isBarInColoredRange(bar) {
+		if (this._coloredRangeMin === null || this._coloredRangeMax === null) return true;
+		return bar.valueMin < this._coloredRangeMax && bar.valueMax > this._coloredRangeMin;
+	}
 	/** Index of the bar rect under the pointer, or -1 if none (matches click hit-testing). */
 	#bucketIndexFromPointer(clientX, clientY) {
 		const rect = this.getBoundingClientRect();
@@ -30231,6 +32385,18 @@ let PlotHistogram = class PlotHistogram extends i {
 		const y = clientY - rect.top;
 		return this.#computeBars().findIndex((b) => x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height);
 	}
+	/** Gets bucket index from position, clamping to valid range (0 to bucketCount-1). */
+	#bucketIndexFromPosition(clientX, clientY) {
+		const { w, h, isHorizontal, padding, dataMin, dataSpan, bucketCount, availableMain } = this.#computeGeometry();
+		const rect = this.getBoundingClientRect();
+		const x = clientX - rect.left;
+		const y = clientY - rect.top;
+		let relativePos;
+		if (isHorizontal) relativePos = (x - padding) / availableMain;
+		else relativePos = (y - padding) / availableMain;
+		relativePos = Math.max(0, Math.min(1, relativePos));
+		return Math.floor(relativePos * bucketCount);
+	}
 	#tooltipIndex;
 	#tooltipVisible;
 	#tooltipShowTimer;
@@ -30365,15 +32531,23 @@ let PlotHistogram = class PlotHistogram extends i {
 	}
 	#onPointerMove;
 	#onPointerLeave;
+	#onPointerDown;
+	#onPointerUp;
 	render() {
 		const { w: w$7, h, padding } = this.#computeGeometry();
-		const barsContent = this.#computeBars().map((b, i) => w`
-      <rect class="bar" x=${b.x} y=${b.y} width=${b.width} height=${b.height}
-        style="--value: ${b.relativeValue}"
-        @click=${() => this.#emitClick(i, b.valueMin, b.valueMax, b.relativeValue)} />
-    `);
+		const barsContent = this.#computeBars().map((b, i) => {
+			const greyStyle = this.#isBarInColoredRange(b) ? `` : `filter: grayscale(1)`;
+			return w`
+        <rect class="bar" x=${b.x} y=${b.y} width=${b.width} height=${b.height}
+          style="--value: ${b.relativeValue}; ${greyStyle}"
+          @click=${() => this.#emitClick(i, b.valueMin, b.valueMax, b.relativeValue)} />
+      `;
+		});
 		const textColor = `var(--plot-text, var(--surface-2-text, #fff))`;
-		const overlayText = this.valueTooltips === `inline` && this._inlineOverlayText !== null ? this._inlineOverlayText : this.title;
+		let overlayText;
+		if (this.interactionMode === `select` && this._selectionOverlayText !== null) overlayText = this._selectionOverlayText;
+		else if (this.valueTooltips === `inline` && this._inlineOverlayText !== null) overlayText = this._inlineOverlayText;
+		else overlayText = this.title;
 		const titleContent = overlayText ? w`<text x=${padding + 2} y=${padding + Math.min(10, h * .6)}
           class="overlay-text" fill=${textColor}
           style="opacity: 0.6">${overlayText}</text>` : w``;
@@ -30381,7 +32555,9 @@ let PlotHistogram = class PlotHistogram extends i {
       <svg width=${w$7} height=${h} viewBox="0 0 ${w$7} ${h}"
         xmlns="http://www.w3.org/2000/svg"
         @pointermove=${this.#onPointerMove}
-        @pointerleave=${this.#onPointerLeave}>
+        @pointerleave=${this.#onPointerLeave}
+        @pointerdown=${this.#onPointerDown}
+        @pointerup=${this.#onPointerUp}>
         <rect width=${w$7} height=${h} fill="transparent" />
         ${barsContent}
         ${titleContent}
@@ -30443,10 +32619,17 @@ __decorate([property({
 	type: Number,
 	attribute: `value-update-interval`
 })], PlotHistogram.prototype, "valueUpdateInterval", void 0);
+__decorate([property({ attribute: `interaction-mode` })], PlotHistogram.prototype, "interactionMode", void 0);
 __decorate([state()], PlotHistogram.prototype, "_width", void 0);
 __decorate([state()], PlotHistogram.prototype, "_height", void 0);
 __decorate([state()], PlotHistogram.prototype, "_hoveredIndex", void 0);
 __decorate([state()], PlotHistogram.prototype, "_inlineOverlayText", void 0);
+__decorate([state()], PlotHistogram.prototype, "_coloredRangeMin", void 0);
+__decorate([state()], PlotHistogram.prototype, "_coloredRangeMax", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionStart", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionEnd", void 0);
+__decorate([state()], PlotHistogram.prototype, "_isDragging", void 0);
+__decorate([state()], PlotHistogram.prototype, "_selectionOverlayText", void 0);
 PlotHistogram = __decorate([safeCustomElement(`ixfx-plot-histogram`)], PlotHistogram);
 //#endregion
 //#region src/plots/single-axis.ts
@@ -37455,29 +39638,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 +40820,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, createDataListSearchAdapter, 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, panelGapIndex, 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