@ixfx/components 0.7.4 → 0.8.0

package/dist/incr-search-C05WjbZh.js

@@ -0,0 +1,999 @@
+import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
+import { css, html, nothing } from "lit";
+import { Fzf } from "fzf";
+//#region src/incr-search/fuzzy.ts
+function defaultSelector(item) {
+	if (typeof item === `string`) return item;
+	const r = item;
+	if (typeof r.label === `string`) return r.label;
+	if (typeof r.key === `string`) return r.key;
+	if (typeof r.value === `string`) return r.value;
+	return String(item);
+}
+function createFuzzySearch(items, options = {}) {
+	const selector = options.selector ?? defaultSelector;
+	const fzf = new Fzf(items, {
+		selector,
+		...options.fzf ?? {}
+	});
+	const find = (query) => {
+		if (!query.trim()) return items.map((item) => ({
+			item,
+			positions: /* @__PURE__ */ new Set(),
+			score: 0
+		}));
+		return fzf.find(query).map((r) => ({
+			item: r.item,
+			positions: r.positions,
+			score: r.score
+		}));
+	};
+	return {
+		find,
+		items
+	};
+}
+//#endregion
+//#region src/incr-search/ac-adapter.ts
+/**
+* Creates an ixfx-ac-text-compatible `completionProvider` function from a
+* static item list. Uses synchronous fuzzy search wrapped in a Promise so it
+* fits the async provider signature.
+*
+* Each returned item has `positions` populated with matched character indices,
+* which `ixfx-ac-text` uses to render CSS Custom Highlights on the label.
+*
+* Empty query returns all items in original order (no positions).
+* A cancelled signal causes the returned promise to reject with an AbortError.
+*/
+function createAcCompletionProvider(items, options = {}) {
+	const fuzzy = createFuzzySearch(items, { selector: options.selector ?? ((item) => item.label) });
+	return (query, signal) => new Promise((resolve, reject) => {
+		if (signal.aborted) {
+			reject(new DOMException(`Aborted`, `AbortError`));
+			return;
+		}
+		const results = fuzzy.find(query).map((r) => ({
+			...r.item,
+			positions: r.positions
+		}));
+		if (signal.aborted) {
+			reject(new DOMException(`Aborted`, `AbortError`));
+			return;
+		}
+		resolve(results);
+	});
+}
+//#endregion
+//#region src/incr-search/incr-search.ts
+function buildState(results, query) {
+	const positionsByItem = /* @__PURE__ */ new Map();
+	for (const r of results) positionsByItem.set(r.item, r.positions);
+	return Object.freeze({
+		query,
+		results: Object.freeze([...results]),
+		positionsByItem
+	});
+}
+function createIncrSearch(options = {}) {
+	let items = options.items ?? [];
+	let query = ``;
+	let fuzzy = createFuzzySearch(items, {
+		selector: options.selector,
+		fzf: options.fzf
+	});
+	let state = buildState(fuzzy.find(query), query);
+	let disposed = false;
+	const observers = /* @__PURE__ */ new Set();
+	if (options.onChange) observers.add(options.onChange);
+	const notify = (s) => {
+		for (const cb of observers) cb(s);
+	};
+	const run = async (q, signal) => {
+		await Promise.resolve();
+		if (signal?.aborted || disposed) return state;
+		const results = fuzzy.find(q);
+		if (signal?.aborted || disposed) return state;
+		state = buildState(results, q);
+		notify(state);
+		return state;
+	};
+	return {
+		get state() {
+			return state;
+		},
+		async setItems(newItems, signal) {
+			items = newItems;
+			fuzzy = createFuzzySearch(items, {
+				selector: options.selector,
+				fzf: options.fzf
+			});
+			await run(query, signal);
+		},
+		async setQuery(q, signal) {
+			query = q;
+			return run(q, signal);
+		},
+		async clearQuery() {
+			query = ``;
+			await run(``, void 0);
+		},
+		onChange(cb) {
+			observers.add(cb);
+			cb(state);
+			return () => {
+				observers.delete(cb);
+			};
+		},
+		dispose() {
+			disposed = true;
+			observers.clear();
+			items = [];
+		}
+	};
+}
+//#endregion
+//#region src/incr-search/controller-tree.ts
+const DEFAULT_HIGHLIGHT_KEY$1 = `incr-search-highlight`;
+/**
+* External-input filter-search controller for `TreeSearchHost` 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
+* const ctrl = new IncrSearchTreeController(myTreeList, {
+*   selector: item => item.node.item.label,
+* });
+* ctrl.connect();
+* ```
+*
+* @example Using with ixfx-miller-list (different label selector):
+* ```typescript
+* const ctrl = new IncrSearchTreeController(myMillerList, {
+*   selector: item => item.node.item.label,
+*   labelSelector: '.label',
+* });
+* ctrl.connect();
+* ```
+*/
+var IncrSearchTreeController = class {
+	#el;
+	#opts;
+	#search;
+	#unsub;
+	#labelMap = /* @__PURE__ */ new Map();
+	constructor(el, opts) {
+		this.#el = el;
+		this.#opts = opts;
+		this.#search = createIncrSearch({
+			selector: opts.selector,
+			fzf: opts.fzf
+		});
+	}
+	connect() {
+		this.disconnect();
+		const items = this.#el.getNodes();
+		for (const item of items) this.#labelMap.set(this.#opts.selector(item), item);
+		this.#search.setItems(items);
+		if (this.#opts.input) {
+			this.#opts.input.addEventListener(`input`, this.#onInput);
+			this.#opts.input.addEventListener(`keydown`, this.#onKeydown);
+		}
+		this.#unsub = this.#search.onChange((state) => this.#onStateChange(state));
+	}
+	disconnect() {
+		if (this.#unsub) {
+			this.#unsub();
+			this.#unsub = void 0;
+		}
+		if (this.#opts.input) {
+			this.#opts.input.removeEventListener(`input`, this.#onInput);
+			this.#opts.input.removeEventListener(`keydown`, this.#onKeydown);
+		}
+		this.#el.filterPredicate = void 0;
+		clearHighlights({ key: this.#opts.highlightKey ?? DEFAULT_HIGHLIGHT_KEY$1 });
+		this.#labelMap.clear();
+	}
+	async setQuery(query) {
+		await this.#search.setQuery(query);
+	}
+	async clearQuery() {
+		await this.#search.clearQuery();
+	}
+	#onInput = () => {
+		const value = this.#opts.input?.value ?? ``;
+		this.setQuery(value);
+	};
+	#onKeydown = (e) => {
+		if (e.key === `Escape` && this.#opts.input) {
+			this.#opts.input.value = ``;
+			this.clearQuery();
+		}
+	};
+	#onStateChange(state) {
+		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$1;
+		if (!this.#el.shadowRoot) return;
+		if (!state.query.trim()) {
+			clearHighlights({ key });
+			return;
+		}
+		const labelSelector = this.#opts.labelSelector ?? `.tree-label`;
+		const targets = buildHighlightTargets(this.#el.shadowRoot, labelSelector, state.positionsByItem, (labelEl) => {
+			const text = labelEl.textContent ?? ``;
+			return this.#labelMap.get(text);
+		}, (labelEl) => labelEl.textContent ?? ``);
+		applyHighlights(targets, { key });
+	}
+};
+//#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();
+	const search = createIncrSearch({
+		selector: (item) => item.label,
+		fzf: opts.fzf
+	});
+	const updateVisibility = (state) => {
+		const matchedKeys = new Set(state.results.map((r) => r.item.key));
+		const hasQuery = state.query.trim().length > 0;
+		for (const [key, el] of elementByKey) el.hidden = hasQuery ? !matchedKeys.has(key) : false;
+	};
+	const updateHighlights = (state) => {
+		if (!state.query.trim()) {
+			clearHighlights({ key: highlightKey });
+			return;
+		}
+		const targets = buildHighlightTargets(container, labelSelector ?? itemSelector, state.positionsByItem, (el) => {
+			const key = getKey(el);
+			return state.results.find((r) => r.item.key === key)?.item;
+		}, (el) => getLabel(el));
+		applyHighlights(targets, { key: highlightKey });
+	};
+	const unsubscribeState = search.onChange((state) => {
+		updateVisibility(state);
+		updateHighlights(state);
+		opts.onChange?.(state);
+	});
+	let refreshPending = false;
+	const refresh = () => {
+		if (refreshPending) return;
+		refreshPending = true;
+		Promise.resolve().then(() => {
+			refreshPending = false;
+			elementByKey = /* @__PURE__ */ new Map();
+			const els = container.querySelectorAll(itemSelector);
+			const items = [];
+			for (const el of els) {
+				const key = getKey(el);
+				elementByKey.set(key, el);
+				items.push({
+					key,
+					label: getLabel(el)
+				});
+			}
+			search.setItems(items);
+		});
+	};
+	const observer = new MutationObserver(() => refresh());
+	observer.observe(container, {
+		childList: true,
+		subtree: false
+	});
+	refresh();
+	return {
+		async setQuery(query, signal) {
+			await search.setQuery(query, signal);
+		},
+		async clearQuery() {
+			await search.clearQuery();
+		},
+		refresh,
+		onChange(cb) {
+			return search.onChange(cb);
+		},
+		dispose() {
+			observer.disconnect();
+			unsubscribeState();
+			search.dispose();
+			clearHighlights({ key: highlightKey });
+		}
+	};
+}
+//#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 nothing;
+		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 html`
+      <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 ? html`<span class="list-search-count">${this.#matches.length === 0 ? `0` : this.#matchIndex + 1} / ${this.#matches.length}</span>` : nothing}
+          ${this.#mode === `navigate` && this.#matches.length > 1 ? html`
+                <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>
+              ` : nothing}
+          <button class="list-search-icon-btn" title="Close (Esc)" @click=${() => this.close()}>✕</button>
+        </div>
+        ${others.length > 0 || showSelectMatches ? html`
+              <div class="list-search-switch">
+                ${others.map((m) => html`<button class="list-search-btn" @click=${() => this.switchMode(m)}>${m}</button>`)}
+                ${showSelectMatches ? html`<button class="list-search-btn" @click=${() => this.selectMatches()}>Select matches</button>` : nothing}
+              </div>
+            ` : nothing}
+      </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 = css`
+  .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
+export { LIST_SEARCH_COMMAND_IDS as a, createElementListSearchAdapter as c, createDataListSearchAdapter as d, IncrSearchTreeController as f, createFuzzySearch as h, ListSearchController as i, KeyedElementIndex as l, createAcCompletionProvider as m, listSearchStyles as n, registerListSearchCommands as o, createIncrSearch as p, LIST_SEARCH_MODES as r, createElementIncrSearch as s, createTreeListSearchAdapter as t, keyForElement as u };
+
+//# sourceMappingURL=incr-search-C05WjbZh.js.map