@ixfx/components 0.2.6 → 0.3.1

package/bundle/index.js

@@ -737,12 +737,12 @@ function buildHighlightTargets(root, itemSelector, positionsByItem, getItem, get
 	}
 	return targets;
 }
-const findTextNode = (element, expectedText) => {
+function findTextNode(element, expectedText) {
 	for (const node of element.childNodes) if (node.nodeType === Node.TEXT_NODE) {
 		if (expectedText === void 0 || node.textContent === expectedText) return node;
 	}
 	return null;
-};
+}
 //#endregion
 //#region src/interaction/tickled-controller.ts
 /**
@@ -1067,6 +1067,22 @@ const tickledItemStyles = i$7`
   }
 `;
 //#endregion
+//#region src/util/custom-elements.ts
+function getRegistry() {
+	if (typeof customElements === `undefined`) return void 0;
+	return customElements;
+}
+function safeDefine(name, ctor) {
+	const registry = getRegistry();
+	if (!registry) return;
+	if (registry.get(name) === void 0) registry.define(name, ctor);
+}
+function safeCustomElement(name) {
+	return (ctor) => {
+		safeDefine(name, ctor);
+	};
+}
+//#endregion
 //#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive.js
 /**
 * @license
@@ -1100,37 +1116,6 @@ var i$3 = class {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
-/**
-* @license
-* Copyright 2018 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/ const n$1 = "important", i$2 = " !" + n$1, o$1 = e$3(class extends i$3 {
-	constructor(t) {
-		if (super(t), t.type !== t$2.ATTRIBUTE || "style" !== t.name || t.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
-	}
-	render(t) {
-		return Object.keys(t).reduce((e, r) => {
-			const s = t[r];
-			return null == s ? e : e + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
-		}, "");
-	}
-	update(e, [r]) {
-		const { style: s } = e.element;
-		if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
-		for (const t of this.ft) r[t] ?? (this.ft.delete(t), t.includes("-") ? s.removeProperty(t) : s[t] = null);
-		for (const t in r) {
-			const e = r[t];
-			if (null != e) {
-				this.ft.add(t);
-				const r = "string" == typeof e && e.endsWith(i$2);
-				t.includes("-") || r ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n$1 : "") : s[t] = e;
-			}
-		}
-		return E;
-	}
-});
-//#endregion
 //#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
 /**
 * @license
@@ -1155,7 +1140,7 @@ var i$3 = class {
 	}
 };
 e$2.directiveName = "unsafeHTML", e$2.resultType = 1;
-const o = e$3(e$2);
+const o$1 = e$3(e$2);
 //#endregion
 //#region src/icons/registry.ts
 const _registry = /* @__PURE__ */ new Map();
@@ -1175,20 +1160,6 @@ function svgToDataUri(svg) {
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
 //#endregion
-//#region src/util/custom-elements.ts
-const getRegistry = () => {
-	if (typeof customElements === `undefined`) return void 0;
-	return customElements;
-};
-const safeDefine = (name, ctor) => {
-	const registry = getRegistry();
-	if (!registry) return;
-	if (registry.get(name) === void 0) registry.define(name, ctor);
-};
-const safeCustomElement = (name) => (ctor) => {
-	safeDefine(name, ctor);
-};
-//#endregion
 //#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -1227,7 +1198,7 @@ let IxfxIconElement = class IxfxIconElement extends i$4 {
         class="icon-wrapper"
         aria-hidden=${hasLabel ? A : `true`}
         aria-label=${hasLabel ? this.label : A}
-      >${o(svg)}</span>
+      >${o$1(svg)}</span>
     `;
 	}
 	updated(changed) {
@@ -1283,14 +1254,14 @@ __decorate([n$2({
 })], IxfxIconElement.prototype, "prominence", void 0);
 __decorate([n$2({
 	type: String,
-	attribute: "rotate",
+	attribute: `rotate`,
 	reflect: true
 })], IxfxIconElement.prototype, "rotate", void 0);
 IxfxIconElement = __decorate([safeCustomElement(`ixfx-icon`)], IxfxIconElement);
 //#endregion
 //#region src/ac-text/ac-text.ts
 const HIGHLIGHT_KEY$1 = `ac-text-highlight`;
-function makeLruCache(maxSize) {
+function makeLruCache$1(maxSize) {
 	const map = /* @__PURE__ */ new Map();
 	return {
 		get: (key) => map.get(key),
@@ -1322,7 +1293,7 @@ let AcTextElement = class AcTextElement extends i$4 {
 			id: i,
 			enabled: true
 		})) });
-		this.#cache = makeLruCache(20);
+		this.#cache = makeLruCache$1(20);
 		this.#onFocus = () => {
 			this._isOpen = true;
 			if (this._query.trim()) this.#triggerQuery(this._query);
@@ -1397,7 +1368,7 @@ let AcTextElement = class AcTextElement extends i$4 {
 			e.preventDefault();
 			this.#selectItem(item);
 		};
-		this.#cache = makeLruCache(this.cacheSize);
+		this.#cache = makeLruCache$1(this.cacheSize);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -1406,7 +1377,7 @@ let AcTextElement = class AcTextElement extends i$4 {
 	}
 	updated(changedProps) {
 		if (changedProps.has(`completionProvider`)) this.#cache.clear();
-		if (changedProps.has(`cacheSize`)) this.#cache = makeLruCache(this.cacheSize);
+		if (changedProps.has(`cacheSize`)) this.#cache = makeLruCache$1(this.cacheSize);
 		if (changedProps.has(`value`)) {
 			const input = this.shadowRoot?.querySelector(`input`);
 			if (!input || document.activeElement !== input) this._query = this.value;
@@ -1763,6 +1734,934 @@ __decorate([r$1()], AcTextElement.prototype, "_isOpen", void 0);
 __decorate([r$1()], AcTextElement.prototype, "_isLoading", void 0);
 AcTextElement = __decorate([safeCustomElement(`ixfx-ac-text`)], AcTextElement);
 //#endregion
+//#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 fzf = new Fzf(items, {
+		selector: options.selector ?? defaultSelector,
+		...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 = `incr-search-highlight`;
+/**
+* Incremental-search controller for any component implementing `TreeSearchHost`
+* (i.e. `ixfx-tree-list`, `ixfx-miller-list`, `ixfx-crumb-navigation`).
+*
+* Replaces the previous separate `IncrSearchTreeController` / `IncrSearchMillerController`
+* classes — the unified `TreeFilterPredicate` (with depth) means one implementation works
+* for all tree-like components.
+*
+* @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 });
+		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;
+		if (!this.#el.shadowRoot) return;
+		if (!state.query.trim()) {
+			clearHighlights({ key });
+			return;
+		}
+		const labelSelector = this.#opts.labelSelector ?? `.tree-label`;
+		applyHighlights(buildHighlightTargets(this.#el.shadowRoot, labelSelector, state.positionsByItem, (labelEl) => {
+			const text = labelEl.textContent ?? ``;
+			return this.#labelMap.get(text);
+		}, (labelEl) => labelEl.textContent ?? ``), { key });
+	}
+};
+//#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() ?? ``;
+}
+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;
+		}
+		applyHighlights(buildHighlightTargets(container, labelSelector ?? itemSelector, state.positionsByItem, (el) => {
+			const key = getKey(el);
+			return state.results.find((r) => r.item.key === key)?.item;
+		}, (el) => getLabel(el)), { 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/ac-token/ac-token.ts
+const DEFAULT_TOKENIZER = (text) => text.split(/[\s,;]+/);
+function makeLruCache(maxSize) {
+	const map = /* @__PURE__ */ new Map();
+	return {
+		get: (k) => map.get(k),
+		set: (k, v) => {
+			if (map.has(k)) map.delete(k);
+			map.set(k, v);
+			if (map.size > maxSize) map.delete(map.keys().next().value);
+		},
+		has: (k) => map.has(k),
+		clear: () => map.clear()
+	};
+}
+let AcTokenElement = class AcTokenElement extends i$4 {
+	#cache;
+	#debounceTimer;
+	#abortController;
+	#staticProvider;
+	constructor() {
+		super();
+		this.placeholder = ``;
+		this.cacheSize = 20;
+		this.debounceMs = 150;
+		this.strict = false;
+		this._tokens = [];
+		this._draft = ``;
+		this._suggestions = [];
+		this._isOpen = false;
+		this._isLoading = false;
+		this._tickled = new TickledController(this, { getItems: () => this._suggestions.map((_, i) => ({
+			id: i,
+			enabled: true
+		})) });
+		this.#cache = makeLruCache(20);
+		this.#onWrapperClick = (e) => {
+			if (!e.target.closest(`.token-chip`)) this.shadowRoot?.querySelector(`input.draft`)?.focus();
+		};
+		this.#onFocus = () => {
+			this._selectedTokenIndex = void 0;
+			this.#scheduleSuggestionFetch(this._draft);
+		};
+		this.#onBlur = () => {
+			setTimeout(() => {
+				this._isOpen = false;
+				this._tickled.clearTickled();
+				this._selectedTokenIndex = void 0;
+			}, 120);
+		};
+		this.#onInput = (e) => {
+			const value = e.target.value;
+			this._selectedTokenIndex = void 0;
+			const parts = (this.tokenizer ?? DEFAULT_TOKENIZER)(value);
+			if (parts.length > 1) {
+				for (let i = 0; i < parts.length - 1; i++) {
+					const label = parts[i].trim();
+					if (label) this.#addToken({ label });
+				}
+				this._draft = parts[parts.length - 1] ?? ``;
+			} else this._draft = value;
+			this.#scheduleSuggestionFetch(this._draft);
+		};
+		this.#onKeyDown = (e) => {
+			const input = e.target;
+			if ((e.metaKey || e.ctrlKey) && e.key === `a`) {
+				e.preventDefault();
+				const parts = [...this._tokens.map((t) => t.label), this._draft.trim()].filter(Boolean);
+				navigator.clipboard.writeText(parts.join(` `)).catch(() => {});
+				return;
+			}
+			if (this._selectedTokenIndex !== void 0 && e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+				e.preventDefault();
+				this.#startEditingSelectedToken(e.key);
+				return;
+			}
+			this.#handleNavigationKey(e, input);
+		};
+		this.#onPaste = (e) => {
+			e.preventDefault();
+			const text = e.clipboardData?.getData(`text/plain`) ?? ``;
+			if (!text) return;
+			const parts = (this.tokenizer ?? DEFAULT_TOKENIZER)(this._draft + text).filter(Boolean);
+			if (parts.length === 0) return;
+			if (parts.length === 1) this._draft = parts[0];
+			else {
+				for (let i = 0; i < parts.length - 1; i++) {
+					const label = parts[i].trim();
+					if (label) this.#addToken({ label });
+				}
+				this._draft = parts[parts.length - 1] ?? ``;
+			}
+			this.updateComplete.then(() => {
+				this.shadowRoot?.querySelector(`input.draft`)?.setSelectionRange(this._draft.length, this._draft.length);
+			});
+			this.#scheduleSuggestionFetch(this._draft);
+		};
+		this.#onSuggestionPointerDown = (e, item) => {
+			e.preventDefault();
+			this.#selectSuggestion(item);
+		};
+		this.#onChipPointerDown = (e, index) => {
+			if (e.button !== 0) return;
+			e.preventDefault();
+			const el = e.currentTarget;
+			const startY = e.clientY;
+			let dragged = false;
+			el.setPointerCapture(e.pointerId);
+			const cleanup = () => {
+				el.removeEventListener(`pointermove`, onMove);
+				el.removeEventListener(`pointerup`, onUp);
+			};
+			const onMove = (me) => {
+				if (Math.abs(me.clientY - startY) > 28) {
+					dragged = true;
+					el.releasePointerCapture(me.pointerId);
+					cleanup();
+					this.#removeToken(index);
+					this.shadowRoot?.querySelector(`input.draft`)?.focus();
+				}
+			};
+			const onUp = () => {
+				cleanup();
+				if (!dragged) {
+					this._selectedTokenIndex = this._selectedTokenIndex === index ? void 0 : index;
+					this.shadowRoot?.querySelector(`input.draft`)?.focus();
+				}
+			};
+			el.addEventListener(`pointermove`, onMove);
+			el.addEventListener(`pointerup`, onUp);
+		};
+		this.#cache = makeLruCache(this.cacheSize);
+	}
+	get tokens() {
+		return this._tokens;
+	}
+	set tokens(value) {
+		this._tokens = [...value];
+		this.#emitChange();
+	}
+	/** All committed token labels joined with commas. */
+	get value() {
+		return this._tokens.map((t) => t.label).join(`, `);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.#buildStaticProvider();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cancelPending();
+	}
+	updated(changedProps) {
+		if (changedProps.has(`completionProvider`) || changedProps.has(`cacheSize`)) this.#cache = makeLruCache(this.cacheSize);
+		if (changedProps.has(`completionProvider`)) this.#buildStaticProvider();
+	}
+	#buildStaticProvider() {
+		const raw = this.getAttribute(`data-tokens`);
+		if (!raw || this.completionProvider) {
+			this.#staticProvider = void 0;
+			return;
+		}
+		const items = raw.trim().split(/[\s,;]+/).filter(Boolean).map((label) => ({ label }));
+		this.#staticProvider = createAcCompletionProvider(items);
+	}
+	#onWrapperClick;
+	#onFocus;
+	#onBlur;
+	#onInput;
+	#onKeyDown;
+	#handleNavigationKey(e, input) {
+		switch (e.key) {
+			case `ArrowLeft`:
+				if (input.selectionStart === 0 && input.selectionEnd === 0) {
+					e.preventDefault();
+					if (this._selectedTokenIndex === void 0) {
+						if (this._tokens.length > 0) this._selectedTokenIndex = this._tokens.length - 1;
+					} else if (this._selectedTokenIndex > 0) this._selectedTokenIndex--;
+				}
+				break;
+			case `ArrowRight`:
+				if (this._selectedTokenIndex !== void 0) {
+					e.preventDefault();
+					if (this._selectedTokenIndex < this._tokens.length - 1) this._selectedTokenIndex++;
+					else this._selectedTokenIndex = void 0;
+				}
+				break;
+			case `Backspace`:
+				if (input.selectionStart === 0 && input.selectionEnd === 0) {
+					e.preventDefault();
+					if (this._selectedTokenIndex !== void 0) this.#removeToken(this._selectedTokenIndex);
+					else if (this._tokens.length > 0) this.#removeToken(this._tokens.length - 1);
+				}
+				break;
+			case `Enter`: {
+				const tickledIdx = this._tickled.tickledId;
+				if (this._isOpen && tickledIdx !== void 0 && this._suggestions[tickledIdx]) {
+					e.preventDefault();
+					this.#selectSuggestion(this._suggestions[tickledIdx]);
+				} else if (!this.strict && this._draft.trim()) {
+					e.preventDefault();
+					this.#addToken({ label: this._draft.trim() });
+					this._draft = ``;
+					this.#closePopup();
+				}
+				break;
+			}
+			case `ArrowDown`:
+				if (!this._isOpen) return;
+				e.preventDefault();
+				this._tickled.handleKeyboardNavigation(`next`);
+				this.#scrollSuggestionIntoView();
+				break;
+			case `ArrowUp`:
+				if (!this._isOpen) return;
+				e.preventDefault();
+				this._tickled.handleKeyboardNavigation(`previous`);
+				this.#scrollSuggestionIntoView();
+				break;
+			case `Escape`:
+				e.preventDefault();
+				this.#closePopup();
+				this._selectedTokenIndex = void 0;
+				break;
+		}
+	}
+	#onPaste;
+	#onSuggestionPointerDown;
+	#onChipPointerDown;
+	#startEditingSelectedToken(key) {
+		const idx = this._selectedTokenIndex;
+		if (idx === void 0) return;
+		const token = this._tokens[idx];
+		if (!token) return;
+		const newDraft = token.label + key;
+		this.#removeToken(idx);
+		this._selectedTokenIndex = void 0;
+		this._draft = newDraft;
+		this.updateComplete.then(() => {
+			const inp = this.shadowRoot?.querySelector(`input.draft`);
+			if (!inp) return;
+			inp.setSelectionRange(inp.value.length, inp.value.length);
+		});
+		this.#scheduleSuggestionFetch(newDraft);
+	}
+	#addToken(item) {
+		const index = this._tokens.length;
+		this._tokens = [...this._tokens, item];
+		this.dispatchEvent(new CustomEvent(`ac-token-add`, {
+			detail: {
+				item,
+				index
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.#emitChange();
+	}
+	#removeToken(index) {
+		const item = this._tokens[index];
+		if (!item) return;
+		this._tokens = this._tokens.filter((_, i) => i !== index);
+		if (this._selectedTokenIndex !== void 0) {
+			if (this._selectedTokenIndex === index) this._selectedTokenIndex = void 0;
+			else if (this._selectedTokenIndex > index) this._selectedTokenIndex--;
+		}
+		this.dispatchEvent(new CustomEvent(`ac-token-remove`, {
+			detail: {
+				item,
+				index
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.#emitChange();
+	}
+	#selectSuggestion(item) {
+		this.#addToken(item);
+		this._draft = ``;
+		this.#closePopup();
+	}
+	#emitChange() {
+		this.dispatchEvent(new CustomEvent(`ac-token-change`, {
+			detail: { tokens: this._tokens },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#closePopup() {
+		this._isOpen = false;
+		this._tickled.clearTickled();
+	}
+	#cancelPending() {
+		if (this.#debounceTimer !== void 0) {
+			clearTimeout(this.#debounceTimer);
+			this.#debounceTimer = void 0;
+		}
+		this.#abortController?.abort();
+		this.#abortController = void 0;
+		this._isLoading = false;
+	}
+	#scheduleSuggestionFetch(query) {
+		const provider = this.completionProvider ?? this.#staticProvider;
+		if (!provider) {
+			this._isOpen = false;
+			return;
+		}
+		if (this.#debounceTimer !== void 0) clearTimeout(this.#debounceTimer);
+		this._isOpen = true;
+		this.#debounceTimer = setTimeout(() => {
+			this.#fetchSuggestions(query, provider);
+		}, this.debounceMs);
+	}
+	#fetchSuggestions(query, provider) {
+		const cached = this.#cache.get(query);
+		if (cached !== void 0) {
+			this._suggestions = cached;
+			this._tickled.clearTickled();
+			this._isLoading = false;
+			return;
+		}
+		this.#abortController?.abort();
+		this.#abortController = new AbortController();
+		const { signal } = this.#abortController;
+		this._isLoading = true;
+		Promise.resolve(provider(query, signal)).then((results) => {
+			if (signal.aborted) return;
+			this.#cache.set(query, results);
+			this._suggestions = results;
+			this._tickled.clearTickled();
+			this._isLoading = false;
+		}).catch((err) => {
+			if (signal.aborted) return;
+			console.error(`[ixfx-ac-token] completionProvider error:`, err);
+			this._suggestions = [];
+			this._isLoading = false;
+		});
+	}
+	#scrollSuggestionIntoView() {
+		this.updateComplete.then(() => {
+			this.shadowRoot?.querySelector(`.suggestion.tickled`)?.scrollIntoView({ block: `nearest` });
+		});
+	}
+	#renderChip(item, index) {
+		return b`
+      <span
+        class="token-chip ${this._selectedTokenIndex === index ? `selected` : ``}"
+        title=${item.subLabel ?? A}
+        @pointerdown=${(e) => this.#onChipPointerDown(e, index)}
+      >
+        ${item.icon ? b`<ixfx-icon class="chip-icon" name=${item.icon}></ixfx-icon>` : A}
+        <span class="chip-label">${item.label}</span>
+      </span>
+    `;
+	}
+	#renderSuggestion(item, index) {
+		const isTickled = this._tickled.isTickled(index);
+		return b`
+      <div
+        class="suggestion ${isTickled ? `tickled` : ``}"
+        role="option"
+        id="ac-token-sugg-${index}"
+        aria-selected=${isTickled}
+        @pointerenter=${() => this._tickled.handlePointerEnter(index)}
+        @pointerdown=${(e) => this.#onSuggestionPointerDown(e, item)}
+      >
+        ${item.icon ? b`<ixfx-icon class="sugg-icon" name=${item.icon}></ixfx-icon>` : A}
+        <span class="sugg-label">${item.label}</span>
+        ${item.subLabel ? b`<span class="sugg-sublabel">${item.subLabel}</span>` : A}
+      </div>
+    `;
+	}
+	#renderPopup() {
+		const showEmpty = !this._isLoading && this._suggestions.length === 0;
+		return b`
+      <div
+        class="popup"
+        role="listbox"
+        aria-label="Suggestions"
+        data-input-mode=${this._tickled.inputMode}
+        @pointerleave=${(e) => this._tickled.handlePointerLeave(e)}
+      >
+        ${showEmpty ? b`<div class="no-results">No matching results</div>` : this._suggestions.map((item, i) => this.#renderSuggestion(item, i))}
+      </div>
+    `;
+	}
+	render() {
+		const tickledIdx = this._tickled.tickledId ?? -1;
+		const activeDescendant = tickledIdx >= 0 ? `ac-token-sugg-${tickledIdx}` : void 0;
+		const showPlaceholder = this._tokens.length === 0 ? this.placeholder || A : A;
+		return b`
+      <div class="wrapper" @click=${this.#onWrapperClick}>
+        ${this._tokens.map((t, i) => this.#renderChip(t, i))}
+        <input
+          type="text"
+          class="draft"
+          .value=${this._draft}
+          placeholder=${showPlaceholder}
+          autocomplete="off"
+          spellcheck="false"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-expanded=${this._isOpen}
+          aria-activedescendant=${activeDescendant ?? A}
+          @input=${this.#onInput}
+          @keydown=${this.#onKeyDown}
+          @focus=${this.#onFocus}
+          @blur=${this.#onBlur}
+          @paste=${this.#onPaste}
+        >
+        ${this._isLoading ? b`<span class="spinner" aria-hidden="true"></span>` : A}
+      </div>
+      ${this._isOpen ? this.#renderPopup() : A}
+    `;
+	}
+	static {
+		this.styles = [tickledStyles, i$7`
+    :host {
+      display: block;
+      position: relative;
+      font-family: var(--font-family, system-ui, sans-serif);
+      font-size: var(--text-m, 12px);
+      color: var(--surface-2-text);
+    }
+
+    /* ---- Wrapper (looks like a text input) ---- */
+
+    .wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ac-token-chip-gap, var(--space-xs, 3px));
+      padding: var(--ac-token-input-padding, var(--space-xs, 3px) var(--space-m, 8px));
+      background: var(--ac-token-input-background, var(--surface-3, var(--surface-2)));
+      color: var(--surface-2-text);
+      border: var(--ac-token-input-border, var(--border));
+      border-radius: var(--ac-token-input-border-radius, var(--radius-m, 4px));
+      cursor: text;
+      min-height: 32px;
+      box-sizing: border-box;
+      transition: border-color var(--transition, 0.15s ease-out);
+    }
+
+    .wrapper:focus-within {
+      border-color: var(--accent);
+    }
+
+    /* ---- Token chips ---- */
+
+    .token-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-xs, 3px);
+      padding: 1px var(--space-m, 8px);
+      background: var(--ac-token-chip-background, var(--surface-4));
+      border: var(--ac-token-chip-border, var(--border));
+      border-radius: var(--ac-token-chip-border-radius, var(--radius-s, 3px));
+      user-select: none;
+      cursor: default;
+      font-size: var(--text-s, 11px);
+      white-space: nowrap;
+      touch-action: none;
+      transition:
+        background var(--transition, 0.1s ease-out),
+        border-color var(--transition, 0.1s ease-out),
+        color var(--transition, 0.1s ease-out);
+    }
+
+    .token-chip.selected {
+      background: var(--ac-token-chip-selected-background, var(--accent));
+      color: var(--ac-token-chip-selected-color, var(--accent-text, #fff));
+      border-color: var(--accent);
+    }
+
+    .chip-icon {
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+    }
+
+    /* ---- Draft input ---- */
+
+    input.draft {
+      flex: 1;
+      min-width: 60px;
+      border: none;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      outline: none;
+      caret-color: var(--accent);
+      padding: 1px 0;
+      anchor-name: --ac-token-draft;
+    }
+
+    input.draft::placeholder {
+      color: var(--surface-muted-text);
+    }
+
+    /* ---- Spinner ---- */
+
+    .spinner {
+      width: 12px;
+      height: 12px;
+      border: 2px solid var(--surface-5);
+      border-top-color: var(--accent);
+      border-radius: 50%;
+      animation: ac-token-spin 0.7s linear infinite;
+      flex-shrink: 0;
+      pointer-events: none;
+      margin-left: var(--space-xs, 3px);
+    }
+
+    @keyframes ac-token-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* ---- Popup ---- */
+
+    .popup {
+      position: fixed;
+      position-anchor: --ac-token-draft;
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: 2px;
+      position-try-fallbacks: --ac-token-popup-above;
+      z-index: 200;
+      background: var(--surface-3, var(--surface-2));
+      border: var(--border);
+      border-radius: var(--radius-m, 4px);
+      box-shadow: var(--shadow-l, 0 4px 24px rgba(0, 0, 0, 0.5));
+      padding: var(--space-xs, 3px) 0;
+      max-height: 260px;
+      min-width: 160px;
+      overflow-y: auto;
+      font-size: var(--ac-token-popup-font-size, var(--text-s, 11px));
+    }
+
+    @position-try --ac-token-popup-above {
+      top: auto;
+      bottom: anchor(top);
+      left: anchor(left);
+      margin-top: 0;
+      margin-bottom: 2px;
+    }
+
+    /* ---- Suggestion items ---- */
+
+    .suggestion {
+      display: flex;
+      align-items: center;
+      gap: var(--space-m, 8px);
+      padding: var(--space-xs, 3px) var(--space-l, 12px);
+      cursor: pointer;
+      border-radius: var(--radius-s, 3px);
+      margin: 0 var(--space-xs, 3px);
+      transition: background var(--transition, 0.1s ease-out);
+      user-select: none;
+      white-space: nowrap;
+      min-height: 28px;
+    }
+
+    .suggestion.tickled {
+      background: var(--_item-focused-bg, var(--accent));
+      color: var(--accent-text, #fff);
+    }
+
+    .suggestion.tickled .sugg-sublabel {
+      color: color-mix(in srgb, var(--accent-text, #fff) 70%, transparent);
+    }
+
+    .sugg-icon {
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+    }
+
+    .sugg-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .sugg-sublabel {
+      flex-shrink: 0;
+      margin-left: auto;
+      color: var(--surface-muted-text);
+      font-size: var(--text-s, 11px);
+    }
+
+    /* ---- Empty state ---- */
+
+    .no-results {
+      padding: var(--space-m, 8px) var(--space-l, 12px);
+      color: var(--surface-muted-text);
+      font-style: italic;
+    }
+  `];
+	}
+};
+__decorate([n$2({ type: Object })], AcTokenElement.prototype, "completionProvider", void 0);
+__decorate([n$2({ type: Object })], AcTokenElement.prototype, "tokenizer", void 0);
+__decorate([n$2({ type: String })], AcTokenElement.prototype, "placeholder", void 0);
+__decorate([n$2({
+	type: Number,
+	attribute: `cache-size`
+})], AcTokenElement.prototype, "cacheSize", void 0);
+__decorate([n$2({
+	type: Number,
+	attribute: `debounce-ms`
+})], AcTokenElement.prototype, "debounceMs", void 0);
+__decorate([n$2({ type: Boolean })], AcTokenElement.prototype, "strict", void 0);
+__decorate([r$1()], AcTokenElement.prototype, "_tokens", void 0);
+__decorate([r$1()], AcTokenElement.prototype, "_draft", void 0);
+__decorate([r$1()], AcTokenElement.prototype, "_selectedTokenIndex", void 0);
+__decorate([r$1()], AcTokenElement.prototype, "_suggestions", void 0);
+__decorate([r$1()], AcTokenElement.prototype, "_isOpen", void 0);
+__decorate([r$1()], AcTokenElement.prototype, "_isLoading", void 0);
+AcTokenElement = __decorate([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
+//#endregion
 //#region src/icons/defaults.ts
 /**
 * Chevron pointing down. Used for split-button dropdown toggle.
@@ -1979,7 +2878,7 @@ let ButtonElement = class ButtonElement extends i$4 {
 	}
 	_renderIcon() {
 		if (this.hideIcon || !this.icon) return A;
-		if (this.icon.startsWith(`<svg`)) return b`<span class="button-icon">${o(this.icon)}</span>`;
+		if (this.icon.startsWith(`<svg`)) return b`<span class="button-icon">${o$1(this.icon)}</span>`;
 		if (!getIcon(this.icon)) return A;
 		return b`<ixfx-icon class="button-icon" name="${this.icon}"></ixfx-icon>`;
 	}
@@ -2107,7 +3006,7 @@ let RadioGroup = class RadioGroup extends i$4 {
 		if (iconName) return b`<ixfx-icon class="radio-icon" name="${iconName}"></ixfx-icon>`;
 		const iconHtml = this._icons.get(item.value);
 		if (!iconHtml) return null;
-		return b`<span class="radio-icon">${o(iconHtml)}</span>`;
+		return b`<span class="radio-icon">${o$1(iconHtml)}</span>`;
 	}
 	render() {
 		if (this._isSingleToggle) {
@@ -2361,7 +3260,7 @@ let MenuContainer = class MenuContainer extends i$4 {
 			getItems: () => {
 				return this._getMenuItems().map((item, i) => ({
 					id: i,
-					enabled: !item.hasAttribute("disabled")
+					enabled: !item.hasAttribute(`disabled`)
 				}));
 			},
 			onTickle: (index) => {
@@ -2495,7 +3394,7 @@ let MenuContainer = class MenuContainer extends i$4 {
 	*/
 	willUpdate(changed) {
 		super.willUpdate(changed);
-		this.setAttribute("data-input-mode", this.tickled.inputMode);
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 	}
 	render() {
 		return b`
@@ -2553,14 +3452,14 @@ let MenuContainer = class MenuContainer extends i$4 {
 				}
 			}
 		});
-		if (this.tickled.inputMode === "keyboard" && this.tickled.tickledId !== void 0) items[this.tickled.tickledId]?.focus();
+		if (this.tickled.inputMode === `keyboard` && this.tickled.tickledId !== void 0) items[this.tickled.tickledId]?.focus();
 	}
 	focusFirst() {
-		this.tickled.handleKeyboardNavigation("first");
+		this.tickled.handleKeyboardNavigation(`first`);
 	}
 	_focusNext(items, direction) {
 		if (items.length === 0) return;
-		this.tickled.handleKeyboardNavigation(direction > 0 ? "next" : "previous");
+		this.tickled.handleKeyboardNavigation(direction > 0 ? `next` : `previous`);
 	}
 	_focusItem(items, index) {
 		if (items.length === 0) return;
@@ -18879,7 +19778,7 @@ let ColourPickerPopup = class ColourPickerPopup extends i$4 {
           ></ixfx-colour-picker>
           ${this.mode === `confirm` ? b`
             <button class="confirm-btn" @click=${this._onConfirm} aria-label="Confirm colour" title="Confirm colour">
-              ${o(ICON_CHECK)}
+              ${o$1(ICON_CHECK)}
             </button>
           ` : A}
         ` : A}
@@ -19110,7 +20009,7 @@ var TreeDataModel = class {
 		this.#root = root;
 		this.#cache.clear();
 		this.#notify({
-			type: "root",
+			type: `root`,
 			root
 		});
 	}
@@ -19138,7 +20037,7 @@ var TreeDataModel = class {
 	invalidate(key) {
 		this.#cache.delete(key);
 		this.#notify({
-			type: "invalidate",
+			type: `invalidate`,
 			key
 		});
 	}
@@ -19149,7 +20048,7 @@ var TreeDataModel = class {
 	addNode(parentKey, node) {
 		this.#root = addChildTo(this.#root, parentKey, node);
 		this.#notify({
-			type: "root",
+			type: `root`,
 			root: this.#root
 		});
 		return this.#root;
@@ -19162,7 +20061,7 @@ var TreeDataModel = class {
 		this.#cache.delete(key);
 		this.#root = removeNodeFrom(this.#root, key);
 		this.#notify({
-			type: "root",
+			type: `root`,
 			root: this.#root
 		});
 		return this.#root;
@@ -19180,7 +20079,7 @@ var TreeDataModel = class {
 			children: n.children
 		}));
 		this.#notify({
-			type: "root",
+			type: `root`,
 			root: this.#root
 		});
 		return this.#root;
@@ -19192,7 +20091,7 @@ var TreeDataModel = class {
 	moveNode(key, newParentKey) {
 		this.#root = moveNodeTo(this.#root, key, newParentKey);
 		this.#notify({
-			type: "root",
+			type: `root`,
 			root: this.#root
 		});
 		return this.#root;
@@ -19212,312 +20111,6 @@ var TreeDataModel = class {
 	}
 };
 //#endregion
-//#region src/incr-search/fuzzy.ts
-const 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 fzf = new Fzf(items, {
-		selector: options.selector ?? defaultSelector,
-		...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
-const 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 = `incr-search-highlight`;
-/**
-* Incremental-search controller for any component implementing `TreeSearchHost`
-* (i.e. `ixfx-tree-list`, `ixfx-miller-list`, `ixfx-crumb-navigation`).
-*
-* Replaces the previous separate `IncrSearchTreeController` / `IncrSearchMillerController`
-* classes — the unified `TreeFilterPredicate` (with depth) means one implementation works
-* for all tree-like components.
-*
-* @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 });
-		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;
-		if (!this.#el.shadowRoot) return;
-		if (!state.query.trim()) {
-			clearHighlights({ key });
-			return;
-		}
-		const labelSelector = this.#opts.labelSelector ?? `.tree-label`;
-		applyHighlights(buildHighlightTargets(this.#el.shadowRoot, labelSelector, state.positionsByItem, (labelEl) => {
-			const text = labelEl.textContent ?? ``;
-			return this.#labelMap.get(text);
-		}, (labelEl) => labelEl.textContent ?? ``), { key });
-	}
-};
-//#endregion
-//#region src/incr-search/element-search.ts
-const defaultGetLabel = (el) => el.textContent?.trim() ?? ``;
-const defaultGetKey = (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-value`) ?? el.textContent?.trim() ?? ``;
-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;
-		}
-		applyHighlights(buildHighlightTargets(container, labelSelector ?? itemSelector, state.positionsByItem, (el) => {
-			const key = getKey(el);
-			return state.results.find((r) => r.item.key === key)?.item;
-		}, (el) => getLabel(el)), { 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/narrowed-text/narrowed-text.ts
 const HIGHLIGHT_KEY = `narrowed-text-highlight`;
 let NarrowedTextElement = class NarrowedTextElement extends i$4 {
@@ -20084,13 +20677,13 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this._selectedNodes = /* @__PURE__ */ new Set();
-		this.exclusivity = "none";
-		this.selectionFilter = "leaf";
+		this.exclusivity = `none`;
+		this.selectionFilter = `leaf`;
 		this._openIdx = -1;
 		this._isFocused = false;
 		this._menuOpen = false;
 		this._focusOnNarrowedText = false;
-		this.inputMode = "";
+		this.inputMode = ``;
 		this.#previousSelectionKey = ``;
 		this.#menuOpenedByKeyboard = false;
 		this.#currentOpenTrigger = null;
@@ -20355,7 +20948,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i$4 {
 			if (model) {
 				this.root = model.root;
 				this.#modelUnsubscribe = model._subscribe((event) => {
-					if (event.type === "root") {
+					if (event.type === `root`) {
 						this.root = event.root;
 						this.requestUpdate();
 					}
@@ -20842,11 +21435,11 @@ __decorate([n$2({ attribute: false })], CrumbNavigationElement.prototype, "loadC
 __decorate([n$2({ attribute: false })], CrumbNavigationElement.prototype, "filterPredicate", void 0);
 __decorate([n$2({
 	reflect: true,
-	attribute: "exclusivity"
+	attribute: `exclusivity`
 })], CrumbNavigationElement.prototype, "exclusivity", void 0);
 __decorate([n$2({
 	reflect: true,
-	attribute: "selection-filter"
+	attribute: `selection-filter`
 })], CrumbNavigationElement.prototype, "selectionFilter", void 0);
 __decorate([r$1()], CrumbNavigationElement.prototype, "_openIdx", void 0);
 __decorate([r$1()], CrumbNavigationElement.prototype, "_isFocused", void 0);
@@ -20854,7 +21447,7 @@ __decorate([r$1()], CrumbNavigationElement.prototype, "_menuOpen", void 0);
 __decorate([r$1()], CrumbNavigationElement.prototype, "_focusOnNarrowedText", void 0);
 __decorate([n$2({
 	reflect: true,
-	attribute: "input-mode"
+	attribute: `input-mode`
 })], CrumbNavigationElement.prototype, "inputMode", void 0);
 CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
@@ -21668,6 +22261,9 @@ let EditableLabel = class EditableLabel extends i$4 {
 			this._hovering = false;
 			this._startTransientRevertTimer();
 		};
+		this._handleClick = () => {
+			if (this.mode === `label` && !this.disabled && !this._editing) this._beginEdit();
+		};
 		this._handleFocus = () => {
 			if (this.mode === `editor` && !this.disabled && !this._editing) this._beginEdit();
 		};
@@ -21703,6 +22299,17 @@ let EditableLabel = class EditableLabel extends i$4 {
 	get _contentEl() {
 		return this.renderRoot?.querySelector(`.content`) ?? void 0;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+		this._clearTransientTimer();
+	}
 	_clearTransientTimer() {
 		if (this._transientTimer !== void 0) {
 			clearTimeout(this._transientTimer);
@@ -21796,6 +22403,32 @@ let EditableLabel = class EditableLabel extends i$4 {
 			default: return true;
 		}
 	}
+	render() {
+		const isEditor = this.mode === `editor`;
+		return b`<div
+      class="content"
+      contenteditable=${this._editing ? `plaintext-only` : `false`}
+      data-placeholder=${this.placeholder}
+      tabindex=${isEditor && !this._editing ? `0` : A}
+      @click=${this._handleClick}
+      @focus=${this._handleFocus}
+      @blur=${this._handleBlur}
+      @keydown=${this._handleKeydown}
+      @beforeinput=${this._handleBeforeInput}
+      @input=${this._handleInput}
+    >${this._editing ? A : this._getDisplayText()}</div>`;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`_editing`) && this._editing) {
+			const el = this._contentEl;
+			if (el) {
+				el.textContent = this.value;
+				el.focus();
+				_selectAll(el);
+			}
+		}
+	}
 	static {
 		this.styles = [i$7`
     :host {
@@ -21908,6 +22541,13 @@ __decorate([n$2({ attribute: false })], EditableLabel.prototype, "validator", vo
 __decorate([n$2({ attribute: false })], EditableLabel.prototype, "formatter", void 0);
 __decorate([r$1()], EditableLabel.prototype, "_editing", void 0);
 EditableLabel = __decorate([safeCustomElement(`ixfx-editable-label`)], EditableLabel);
+function _selectAll(el) {
+	const range = document.createRange();
+	range.selectNodeContents(el);
+	const sel = window.getSelection();
+	sel?.removeAllRanges();
+	sel?.addRange(range);
+}
 //#endregion
 //#region src/keyboard.ts
 /**
@@ -22509,7 +23149,7 @@ EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], Editabl
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const { I: t$1 } = j$1, i$1 = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
+*/ const { I: t$1 } = j$1, i$2 = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
 	const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
 	if (void 0 === e) e = new t$1(l.insertBefore(s(), d), l.insertBefore(s(), d), o, o.options);
 	else {
@@ -22521,8 +23161,8 @@ EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], Editabl
 		if (t !== d || c) {
 			let o = e._$AA;
 			for (; o !== t;) {
-				const t = i$1(o).nextSibling;
-				i$1(l).insertBefore(o, d), o = t;
+				const t = i$2(o).nextSibling;
+				i$2(l).insertBefore(o, d), o = t;
 			}
 		}
 	}
@@ -22591,6 +23231,37 @@ const u = (e, s, t) => {
 	}
 });
 //#endregion
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/style-map.js
+/**
+* @license
+* Copyright 2018 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const n = "important", i$1 = " !" + n, o = e$3(class extends i$3 {
+	constructor(t) {
+		if (super(t), t.type !== t$2.ATTRIBUTE || "style" !== t.name || t.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+	}
+	render(t) {
+		return Object.keys(t).reduce((e, r) => {
+			const s = t[r];
+			return null == s ? e : e + `${r = r.includes("-") ? r : r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${s};`;
+		}, "");
+	}
+	update(e, [r]) {
+		const { style: s } = e.element;
+		if (void 0 === this.ft) return this.ft = new Set(Object.keys(r)), this.render(r);
+		for (const t of this.ft) r[t] ?? (this.ft.delete(t), t.includes("-") ? s.removeProperty(t) : s[t] = null);
+		for (const t in r) {
+			const e = r[t];
+			if (null != e) {
+				this.ft.add(t);
+				const r = "string" == typeof e && e.endsWith(i$1);
+				t.includes("-") || r ? s.setProperty(t, r ? e.slice(0, -11) : e, r ? n : "") : s[t] = e;
+			}
+		}
+		return E;
+	}
+});
+//#endregion
 //#region src/hex/colour.ts
 const WHITESPACE_BYTES = new Set([
 	9,
@@ -22600,45 +23271,45 @@ const WHITESPACE_BYTES = new Set([
 	13,
 	32
 ]);
-const isControlByte = (byte) => {
+function isControlByte(byte) {
 	return byte < 32 && byte !== 9 && byte !== 10 && byte !== 11 && byte !== 12 && byte !== 13;
-};
-const isPrintableAscii = (byte) => {
+}
+function isPrintableAscii(byte) {
 	return byte >= 32 && byte <= 126;
-};
-const getAsciiClass = (byte) => {
-	if (byte === 0) return "byte-null";
-	if (WHITESPACE_BYTES.has(byte)) return "byte-whitespace";
-	if (isControlByte(byte)) return "byte-control";
-	if (isPrintableAscii(byte)) return "byte-printable";
-	return "byte-other";
-};
-const createShadeMap = (nullColour, maxColour, stepStart, stepEnd) => {
+}
+function getAsciiClass(byte) {
+	if (byte === 0) return `byte-null`;
+	if (WHITESPACE_BYTES.has(byte)) return `byte-whitespace`;
+	if (isControlByte(byte)) return `byte-control`;
+	if (isPrintableAscii(byte)) return `byte-printable`;
+	return `byte-other`;
+}
+function createShadeMap(nullColour, maxColour, stepStart, stepEnd) {
 	const cssSteps = colour_exports.createSteps(stepStart, stepEnd, { steps: 16 }).map(colour_exports.toCssColour);
 	return { forByte: (byte) => {
 		if (byte === 0) return nullColour;
 		if (byte === 255) return maxColour;
 		return cssSteps[byte >> 4];
 	} };
-};
+}
 //#endregion
 //#region src/hex/data.ts
-const createHexStore = (data) => {
+function createHexStore(data) {
 	return {
 		data: new Uint8Array(data),
 		changeset: /* @__PURE__ */ new Set()
 	};
-};
-const readByte = (store, pos) => {
+}
+function readByte(store, pos) {
 	return store.data[pos] ?? 0;
-};
-const length = (store) => {
+}
+function length(store) {
 	return store.data.length;
-};
-const clamp$1 = (value) => {
+}
+function clamp$1(value) {
 	return Math.max(0, Math.min(255, value));
-};
-const writeByte = (store, pos, value) => {
+}
+function writeByte(store, pos, value) {
 	const clampedValue = clamp$1(value);
 	const before = store.data[pos];
 	const diff = new Map([[pos, {
@@ -22648,8 +23319,8 @@ const writeByte = (store, pos, value) => {
 	store.data[pos] = clampedValue;
 	store.changeset.add(pos);
 	return diff;
-};
-const writeBytes = (store, entries) => {
+}
+function writeBytes(store, entries) {
 	const diff = /* @__PURE__ */ new Map();
 	entries.forEach((value, pos) => {
 		const clampedValue = clamp$1(value);
@@ -22662,8 +23333,8 @@ const writeBytes = (store, entries) => {
 		store.changeset.add(pos);
 	});
 	return diff;
-};
-const applyDiff = (store, diff) => {
+}
+function applyDiff(store, diff) {
 	const reverse = /* @__PURE__ */ new Map();
 	diff.forEach((entry, pos) => {
 		const before = store.data[pos];
@@ -22675,8 +23346,8 @@ const applyDiff = (store, diff) => {
 		store.changeset.add(pos);
 	});
 	return reverse;
-};
-const reverseDiff = (diff) => {
+}
+function reverseDiff(diff) {
 	const reversed = /* @__PURE__ */ new Map();
 	diff.forEach((entry, pos) => {
 		reversed.set(pos, {
@@ -22685,52 +23356,52 @@ const reverseDiff = (diff) => {
 		});
 	});
 	return reversed;
-};
-const getChangeset = (store) => {
+}
+function getChangeset(store) {
 	return store.changeset;
-};
+}
 //#endregion
 //#region src/hex/diff.ts
-const createUndoRedoStack = () => {
+function createUndoRedoStack() {
 	return {
 		undos: [],
 		redos: []
 	};
-};
-const push = (stack, diff) => {
+}
+function push(stack, diff) {
 	stack.undos.push(diff);
 	stack.redos = [];
-};
-const undo = (stack) => {
+}
+function undo(stack) {
 	const diff = stack.undos.pop();
 	if (diff) stack.redos.push(diff);
 	return diff;
-};
-const redo = (stack) => {
+}
+function redo(stack) {
 	const diff = stack.redos.pop();
 	if (diff) stack.undos.push(diff);
 	return diff;
-};
+}
 //#endregion
 //#region src/hex/selection.ts
 const bytesPerRow = (columns) => columns * 4;
 const min = (a, b) => a < b ? a : b;
 const max = (a, b) => a > b ? a : b;
-const clampPos = (pos, dataLength) => {
+function clampPos(pos, dataLength) {
 	return Math.max(0, Math.min(pos, dataLength - 1));
-};
-const getSelectedPositions = (sel, columns) => {
+}
+function getSelectedPositions(sel, columns) {
 	if (!sel) return [];
 	const bpr = bytesPerRow(columns);
-	if (sel.kind === "single") return [sel.pos];
-	if (sel.kind === "contiguous") {
+	if (sel.kind === `single`) return [sel.pos];
+	if (sel.kind === `contiguous`) {
 		const start = min(sel.start, sel.end);
 		const end = max(sel.start, sel.end);
 		const positions = [];
 		for (let i = start; i <= end; i++) positions.push(i);
 		return positions;
 	}
-	if (sel.kind === "rectangular") {
+	if (sel.kind === `rectangular`) {
 		const positions = [];
 		for (let row = 0; row < sel.height; row++) for (let col = 0; col < sel.width; col++) {
 			const y = sel.y + row;
@@ -22741,17 +23412,17 @@ const getSelectedPositions = (sel, columns) => {
 		return positions;
 	}
 	return [];
-};
-const selectionContains = (sel, pos, columns) => {
+}
+function selectionContains(sel, pos, columns) {
 	if (!sel) return false;
 	const bpr = bytesPerRow(columns);
-	if (sel.kind === "single") return pos === sel.pos;
-	if (sel.kind === "contiguous") {
+	if (sel.kind === `single`) return pos === sel.pos;
+	if (sel.kind === `contiguous`) {
 		const start = min(sel.start, sel.end);
 		const end = max(sel.start, sel.end);
 		return pos >= start && pos <= end;
 	}
-	if (sel.kind === "rectangular") {
+	if (sel.kind === `rectangular`) {
 		const row = Math.floor(pos / bpr);
 		const col = pos % bpr;
 		const x = sel.x;
@@ -22761,59 +23432,59 @@ const selectionContains = (sel, pos, columns) => {
 		return row >= y && row < y + height && col >= x && col < x + width;
 	}
 	return false;
-};
-const getCursorPos = (sel, dir, columns, dataLength) => {
+}
+function getCursorPos(sel, dir, columns, dataLength) {
 	let currentPos;
 	if (!sel) currentPos = 0;
-	else if (sel.kind === "single") currentPos = sel.pos;
-	else if (sel.kind === "contiguous") currentPos = max(sel.start, sel.end);
-	else if (sel.kind === "rectangular") currentPos = sel.y * bytesPerRow(columns) + sel.x + sel.width - 1;
+	else if (sel.kind === `single`) currentPos = sel.pos;
+	else if (sel.kind === `contiguous`) currentPos = max(sel.start, sel.end);
+	else if (sel.kind === `rectangular`) currentPos = sel.y * bytesPerRow(columns) + sel.x + sel.width - 1;
 	else currentPos = 0;
 	const bpr = bytesPerRow(columns);
 	let newPos;
 	switch (dir) {
-		case "left":
+		case `left`:
 			newPos = currentPos - 1;
 			break;
-		case "right":
+		case `right`:
 			newPos = currentPos + 1;
 			break;
-		case "up":
+		case `up`:
 			newPos = currentPos - bpr;
 			break;
-		case "down":
+		case `down`:
 			newPos = currentPos + bpr;
 			break;
 		default: newPos = currentPos;
 	}
 	return clampPos(newPos, dataLength);
-};
-const moveSelection = (sel, dir, columns, dataLength) => {
+}
+function moveSelection(sel, dir, columns, dataLength) {
 	return {
-		kind: "single",
+		kind: `single`,
 		pos: getCursorPos(sel, dir, columns, dataLength)
 	};
-};
-const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY = 0) => {
+}
+function extendRectangular(sel, dir, columns, _dataLength, anchorX = 0, anchorY = 0) {
 	const bpr = bytesPerRow(columns);
 	let x;
 	let y;
 	let width;
 	let height;
-	if (!sel || sel.kind === "single") {
-		const pos = sel?.kind === "single" ? sel.pos : 0;
+	if (!sel || sel.kind === `single`) {
+		const pos = sel?.kind === `single` ? sel.pos : 0;
 		x = pos % bpr;
 		y = Math.floor(pos / bpr);
 		width = 1;
 		height = 1;
-	} else if (sel.kind === "contiguous") {
+	} else if (sel.kind === `contiguous`) {
 		const start = min(sel.start, sel.end);
 		const end = max(sel.start, sel.end);
 		x = start % bpr;
 		y = Math.floor(start / bpr);
 		width = end - start + 1;
 		height = 1;
-	} else if (sel.kind === "rectangular") {
+	} else if (sel.kind === `rectangular`) {
 		x = sel.x;
 		y = sel.y;
 		width = sel.width;
@@ -22824,10 +23495,10 @@ const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY
 		width = 1;
 		height = 1;
 	}
-	const effectiveAnchorX = anchorX > 0 || sel?.kind === "rectangular" ? anchorX : x;
-	const effectiveAnchorY = anchorY > 0 || sel?.kind === "rectangular" ? anchorY : y;
+	const effectiveAnchorX = anchorX > 0 || sel?.kind === `rectangular` ? anchorX : x;
+	const effectiveAnchorY = anchorY > 0 || sel?.kind === `rectangular` ? anchorY : y;
 	switch (dir) {
-		case "left":
+		case `left`:
 			if (x > effectiveAnchorX) width -= 1;
 			else if (x === effectiveAnchorX && width > 1) {
 				x -= 1;
@@ -22837,10 +23508,10 @@ const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY
 				width += 1;
 			}
 			break;
-		case "right":
+		case `right`:
 			if (x + width < bpr) width += 1;
 			break;
-		case "up":
+		case `up`:
 			if (y > effectiveAnchorY) height -= 1;
 			else if (y === effectiveAnchorY && height > 1) {
 				y -= 1;
@@ -22850,22 +23521,22 @@ const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY
 				height += 1;
 			}
 			break;
-		case "down":
+		case `down`:
 			height += 1;
 			break;
 	}
 	return {
-		kind: "rectangular",
+		kind: `rectangular`,
 		x,
 		y,
 		width,
 		height
 	};
-};
-const selectionFromPointerRange = (start, end, mode, columns) => {
+}
+function selectionFromPointerRange(start, end, mode, columns) {
 	const bpr = bytesPerRow(columns);
-	if (mode === "contiguous") return {
-		kind: "contiguous",
+	if (mode === `contiguous`) return {
+		kind: `contiguous`,
 		start: min(start, end),
 		end: max(start, end)
 	};
@@ -22874,13 +23545,13 @@ const selectionFromPointerRange = (start, end, mode, columns) => {
 	const endX = end % bpr;
 	const endY = Math.floor(end / bpr);
 	return {
-		kind: "rectangular",
+		kind: `rectangular`,
 		x: min(startX, endX),
 		y: min(startY, endY),
 		width: Math.abs(endX - startX) + 1,
 		height: Math.abs(endY - startY) + 1
 	};
-};
+}
 //#endregion
 //#region src/hex/hex-editor.ts
 let IxfxHexEditorElement = class IxfxHexEditorElement extends i$4 {
@@ -23675,7 +24346,7 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i$4 {
 		return b`
       <span
         class=${classes.join(` `)}
-        style=${o$1(colourStyle || {})}
+        style=${o(colourStyle || {})}
         @pointerdown=${(e) => this._onPointerDown(pos, `hex`, e)}
         @pointerup=${(e) => this._onPointerUp(pos, `hex`, e)}
         @pointermove=${(e) => this._onPointerMove(pos, `hex`, e)}
@@ -23698,7 +24369,7 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i$4 {
 		return b`
       <span
         class=${classes.join(` `)}
-        style=${o$1(colourStyle || {})}
+        style=${o(colourStyle || {})}
         @pointerdown=${(e) => this._onPointerDown(pos, `text`, e)}
         @pointerup=${(e) => this._onPointerUp(pos, `text`, e)}
         @pointermove=${(e) => this._onPointerMove(pos, `text`, e)}
@@ -23774,10 +24445,10 @@ function getFlattenedCircleAngles(flatten) {
 function valueToAngle(relativeValue, valueMode, flatten) {
 	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
 	switch (valueMode) {
-		case "range": return startAngle + relativeValue * totalArc;
-		case "bipolar": if (relativeValue <= .5) return startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle);
+		case `range`: return startAngle + relativeValue * totalArc;
+		case `bipolar`: if (relativeValue <= .5) return startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle);
 		else return MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE);
-		case "unipolar": return MIDPOINT_ANGLE;
+		case `unipolar`: return MIDPOINT_ANGLE;
 		default: return startAngle;
 	}
 }
@@ -23791,11 +24462,11 @@ function valueToAngle(relativeValue, valueMode, flatten) {
 function getValueArcAngles(relativeValue, valueMode, flatten) {
 	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
 	switch (valueMode) {
-		case "range": return {
+		case `range`: return {
 			startAngle,
 			endAngle: startAngle + relativeValue * totalArc
 		};
-		case "bipolar": if (relativeValue < .5) return {
+		case `bipolar`: if (relativeValue < .5) return {
 			startAngle: startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle),
 			endAngle: MIDPOINT_ANGLE
 		};
@@ -23807,7 +24478,7 @@ function getValueArcAngles(relativeValue, valueMode, flatten) {
 			startAngle: MIDPOINT_ANGLE,
 			endAngle: MIDPOINT_ANGLE
 		};
-		case "unipolar": {
+		case `unipolar`: {
 			const spreadAmount = relativeValue * totalArc / 2;
 			return {
 				startAngle: MIDPOINT_ANGLE - spreadAmount,
@@ -23858,7 +24529,7 @@ function generateArcPath(startAngle, endAngle, radius, center = {
 	x: 50,
 	y: 50
 }) {
-	if (startAngle === endAngle) return "";
+	if (startAngle === endAngle) return ``;
 	let arcLength = endAngle - startAngle;
 	if (arcLength < 0) arcLength += PI2;
 	if (arcLength >= PI2 - .001) {
@@ -23899,7 +24570,7 @@ function generateWedgePath(startAngle, endAngle, radius, center = {
 	x: 50,
 	y: 50
 }, clockwise = true) {
-	if (startAngle === endAngle) return "";
+	if (startAngle === endAngle) return ``;
 	let arcLength = endAngle - startAngle;
 	if (arcLength < 0) arcLength += PI2;
 	if (arcLength >= PI2 - .001) {
@@ -23935,12 +24606,12 @@ function getWedgeAngles(relativeValue, valueMode, flatten) {
 	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
 	const valueAngle = valueToAngle(relativeValue, valueMode, flatten);
 	switch (valueMode) {
-		case "range": return {
+		case `range`: return {
 			startAngle,
 			endAngle: valueAngle,
 			clockwise: true
 		};
-		case "bipolar": if (relativeValue < .5) return {
+		case `bipolar`: if (relativeValue < .5) return {
 			startAngle: MIDPOINT_ANGLE,
 			endAngle: valueAngle,
 			clockwise: false
@@ -23950,7 +24621,7 @@ function getWedgeAngles(relativeValue, valueMode, flatten) {
 			endAngle: valueAngle,
 			clockwise: true
 		};
-		case "unipolar": {
+		case `unipolar`: {
 			const halfSpread = relativeValue * totalArc / 2;
 			return {
 				startAngle: MIDPOINT_ANGLE - halfSpread,
@@ -25091,32 +25762,6 @@ var MenuCommandController = class {
 	}
 };
 //#endregion
-//#region src/menu/menu-header.ts
-let MenuHeader = class MenuHeader extends i$4 {
-	constructor(..._args) {
-		super(..._args);
-		this.label = ``;
-	}
-	static {
-		this.styles = i$7`
-    :host {
-      display: block;
-      padding: 6px var(--space-m) var(--space-xs);
-      font-size: var(--text-s);
-      font-weight: var(--font-weight-bold);
-      text-transform: uppercase;
-      color: var(--surface-muted-text);
-      letter-spacing: 0.5px;
-    }
-  `;
-	}
-	render() {
-		return b`<div>${this.label}</div>`;
-	}
-};
-__decorate([n$2({ type: String })], MenuHeader.prototype, "label", void 0);
-MenuHeader = __decorate([safeCustomElement(`ixfx-menu-header`)], MenuHeader);
-//#endregion
 //#region src/menu/menu-sub-trigger.ts
 var _MenuSubTrigger;
 let MenuSubTrigger = class MenuSubTrigger extends i$4 {
@@ -25395,6 +26040,32 @@ let MenuSeparator = class MenuSeparator extends i$4 {
 };
 MenuSeparator = __decorate([safeCustomElement(`ixfx-menu-separator`)], MenuSeparator);
 //#endregion
+//#region src/menu/menu-header.ts
+let MenuHeader = class MenuHeader extends i$4 {
+	constructor(..._args) {
+		super(..._args);
+		this.label = ``;
+	}
+	static {
+		this.styles = i$7`
+    :host {
+      display: block;
+      padding: 6px var(--space-m) var(--space-xs);
+      font-size: var(--text-s);
+      font-weight: var(--font-weight-bold);
+      text-transform: uppercase;
+      color: var(--surface-muted-text);
+      letter-spacing: 0.5px;
+    }
+  `;
+	}
+	render() {
+		return b`<div>${this.label}</div>`;
+	}
+};
+__decorate([n$2({ type: String })], MenuHeader.prototype, "label", void 0);
+MenuHeader = __decorate([safeCustomElement(`ixfx-menu-header`)], MenuHeader);
+//#endregion
 //#region src/menu/menu-from-tree.ts
 function isLeaf(node) {
 	return node.children === void 0 || node.children.length === 0;
@@ -25403,8 +26074,8 @@ function menuFromTree(nodes, options = {}) {
 	const { onCommand, registry, keyboardManager } = options;
 	return b`${nodes.map((node) => {
 		const label = node.item.label;
-		if (label === "-") return b`<ixfx-menu-separator></ixfx-menu-separator>`;
-		if (label.startsWith("# ")) return b`<ixfx-menu-header label="${label.slice(2)}"></ixfx-menu-header>`;
+		if (label === `-`) return b`<ixfx-menu-separator></ixfx-menu-separator>`;
+		if (label.startsWith(`# `)) return b`<ixfx-menu-header label="${label.slice(2)}"></ixfx-menu-header>`;
 		if (!isLeaf(node)) {
 			const submenu = menuFromTree(node.children, options);
 			return b`
@@ -25430,30 +26101,30 @@ function menuFromTree(nodes, options = {}) {
 function buildMenuItemEl(node, options) {
 	const { onCommand, registry } = options;
 	const label = node.item.label;
-	const el = document.createElement("ixfx-menu-item");
-	el.setAttribute("command", node.item.key);
-	el.setAttribute("label", label);
-	if (node.item.icon) el.setAttribute("icon-name", node.item.icon);
-	if (onCommand) el.addEventListener("command", (e) => onCommand(e.detail));
+	const el = document.createElement(`ixfx-menu-item`);
+	el.setAttribute(`command`, node.item.key);
+	el.setAttribute(`label`, label);
+	if (node.item.icon) el.setAttribute(`icon-name`, node.item.icon);
+	if (onCommand) el.addEventListener(`command`, (e) => onCommand(e.detail));
 	if (registry) el.registry = registry;
 	return el;
 }
 function buildMenuSeparatorEl() {
-	return document.createElement("ixfx-menu-separator");
+	return document.createElement(`ixfx-menu-separator`);
 }
 function buildMenuHeaderEl(label) {
-	const el = document.createElement("ixfx-menu-header");
-	el.setAttribute("label", label);
+	const el = document.createElement(`ixfx-menu-header`);
+	el.setAttribute(`label`, label);
 	return el;
 }
 function buildMenuSubTriggerEl(node, options) {
 	const { onCommand, registry, keyboardManager } = options;
-	const el = document.createElement("ixfx-menu-sub-trigger");
-	el.setAttribute("label", node.item.label);
+	const el = document.createElement(`ixfx-menu-sub-trigger`);
+	el.setAttribute(`label`, node.item.label);
 	if (registry) el.registry = registry;
 	if (keyboardManager) el.keyboardManager = keyboardManager;
-	const container = document.createElement("ixfx-menu-container");
-	container.setAttribute("slot", "submenu");
+	const container = document.createElement(`ixfx-menu-container`);
+	container.setAttribute(`slot`, `submenu`);
 	if (registry) container.registry = registry;
 	if (keyboardManager) container.keyboardManager = keyboardManager;
 	const childEls = menuFromTreeToElements(node.children, options);
@@ -25464,8 +26135,8 @@ function buildMenuSubTriggerEl(node, options) {
 function menuFromTreeToElements(nodes, options = {}) {
 	return nodes.map((node) => {
 		const label = node.item.label;
-		if (label === "-") return buildMenuSeparatorEl();
-		if (label.startsWith("# ")) return buildMenuHeaderEl(label.slice(2));
+		if (label === `-`) return buildMenuSeparatorEl();
+		if (label.startsWith(`# `)) return buildMenuHeaderEl(label.slice(2));
 		if (!isLeaf(node)) return buildMenuSubTriggerEl(node, options);
 		return buildMenuItemEl(node, options);
 	});
@@ -25645,8 +26316,8 @@ let MillerBaseElement = class MillerBaseElement extends i$4 {
 		super(..._args);
 		this.headers = false;
 		this.interactionMode = `standard`;
-		this.selectionFilter = "leaf";
-		this.exclusivity = "none";
+		this.selectionFilter = `leaf`;
+		this.exclusivity = `none`;
 		this._columns = [];
 		this._selectedByDepth = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
@@ -25876,7 +26547,7 @@ let MillerBaseElement = class MillerBaseElement extends i$4 {
 	#getTickledDepth() {
 		const id = this.tickled.tickledId;
 		if (!id) return void 0;
-		const colonIndex = id.indexOf(":");
+		const colonIndex = id.indexOf(`:`);
 		if (colonIndex < 0) return void 0;
 		return Number(id.substring(0, colonIndex));
 	}
@@ -25898,10 +26569,10 @@ let MillerBaseElement = class MillerBaseElement extends i$4 {
 			if (model) {
 				this.root = model.root;
 				this.#modelUnsubscribe = model._subscribe((event) => {
-					if (event.type === "root") {
+					if (event.type === `root`) {
 						this.root = event.root;
 						this.requestUpdate();
-					} else if (event.type === "invalidate") {
+					} else if (event.type === `invalidate`) {
 						for (let depth = 0; depth < this._columns.length - 1; depth++) if (this._columns[depth]?.some((n) => n.item.key === event.key)) {
 							this._columns = this._columns.slice(0, depth + 1);
 							this.requestUpdate();
@@ -26181,9 +26852,9 @@ let MillerBaseElement = class MillerBaseElement extends i$4 {
 		};
 	}
 	#canSelect(node) {
-		if (this.selectionFilter === "none") return false;
-		if (this.selectionFilter === "leaf") return node.item.isLeaf !== false;
-		if (this.selectionFilter === "branch") return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
+		if (this.selectionFilter === `none`) return false;
+		if (this.selectionFilter === `leaf`) return node.item.isLeaf !== false;
+		if (this.selectionFilter === `branch`) return node.item.isLeaf === false || node.children !== void 0 && node.children.length > 0;
 		return true;
 	}
 	#dispatchSelectEvent(previous) {
@@ -26420,7 +27091,7 @@ let MillerBaseElement = class MillerBaseElement extends i$4 {
 	#getTickledNodeAndDepth() {
 		const id = this.tickled.tickledId;
 		if (!id) return void 0;
-		const colonIndex = id.indexOf(":");
+		const colonIndex = id.indexOf(`:`);
 		if (colonIndex < 0) return void 0;
 		const depth = Number(id.substring(0, colonIndex));
 		const key = id.substring(colonIndex + 1);
@@ -26553,7 +27224,7 @@ let MillerBaseElement = class MillerBaseElement extends i$4 {
 	* Called by subclasses when pointer leaves the column container.
 	*/
 	_handleColumnPointerLeave() {
-		this.tickled.handlePointerLeave(new PointerEvent("pointerleave"));
+		this.tickled.handlePointerLeave(new PointerEvent(`pointerleave`));
 	}
 	static {
 		this.styles = [tickledStyles, i$7`
@@ -26675,11 +27346,11 @@ __decorate([n$2({ type: Boolean })], MillerBaseElement.prototype, "headers", voi
 __decorate([n$2({ type: String })], MillerBaseElement.prototype, "interactionMode", void 0);
 __decorate([n$2({
 	reflect: true,
-	attribute: "selection-filter"
+	attribute: `selection-filter`
 })], MillerBaseElement.prototype, "selectionFilter", void 0);
 __decorate([n$2({
 	reflect: true,
-	attribute: "exclusivity"
+	attribute: `exclusivity`
 })], MillerBaseElement.prototype, "exclusivity", void 0);
 __decorate([n$2({ type: Object })], MillerBaseElement.prototype, "loadChildren", void 0);
 __decorate([n$2({ attribute: false })], MillerBaseElement.prototype, "filterPredicate", void 0);
@@ -28247,7 +28918,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$4 {
 		this.paused = false;
 		this.clickPauses = false;
 		this.shaded = false;
-		this.areaColor = "";
+		this.areaColor = ``;
 		this.colorMode = `fixed`;
 		this.colorEasing = ``;
 		this.colorScale = ``;
@@ -28290,7 +28961,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$4 {
 	#hasProgrammaticData;
 	#parseDeclarativeData(text) {
 		if (!text) return [];
-		return text.trim().split(/[,\s;]+/).map((t) => parseFloat(t)).filter((n) => !isNaN(n));
+		return text.trim().split(/[,\s;]+/).map((t) => Number.parseFloat(t)).filter((n) => !isNaN(n));
 	}
 	#lastClientX;
 	#lastClientY;
@@ -28321,7 +28992,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$4 {
 			this._height = e.contentRect.height;
 		}).observe(this);
 		if (!this.#hasProgrammaticData) {
-			const data = this.#parseDeclarativeData(this.textContent ?? "");
+			const data = this.#parseDeclarativeData(this.textContent ?? ``);
 			if (data.length > 0) this.#series.set(data);
 		}
 	}
@@ -28503,9 +29174,9 @@ __decorate([n$2({
 })], PlotSingleAxis.prototype, "clickPauses", void 0);
 __decorate([n$2({
 	type: Boolean,
-	attribute: "shaded"
+	attribute: `shaded`
 })], PlotSingleAxis.prototype, "shaded", void 0);
-__decorate([n$2({ attribute: "area-color" })], PlotSingleAxis.prototype, "areaColor", void 0);
+__decorate([n$2({ attribute: `area-color` })], PlotSingleAxis.prototype, "areaColor", void 0);
 __decorate([n$2({ attribute: `color-mode` })], PlotSingleAxis.prototype, "colorMode", void 0);
 __decorate([n$2({ attribute: `color-easing` })], PlotSingleAxis.prototype, "colorEasing", void 0);
 __decorate([n$2({ attribute: `color-scale` })], PlotSingleAxis.prototype, "colorScale", void 0);
@@ -31005,7 +31676,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$4 {
 			const cursorZoneLocalY = event.clientY - zoneBounds.top;
 			if (this.layout === `vertical` && nestedSplit.layout === `horizontal`) {
 				let newOuterFraction = cursorZoneLocalX / outerBounds.width;
-				let newNestedFraction = cursorZoneLocalY / outerBounds.height;
+				const newNestedFraction = cursorZoneLocalY / outerBounds.height;
 				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.width);
 				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.width);
 				this.sizeA = constrainedA;
@@ -31021,7 +31692,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$4 {
 					cornerZone.style.top = `${cursorZoneLocalY - 6}px`;
 				}
 			} else if (this.layout === `horizontal` && nestedSplit.layout === `vertical`) {
-				let newNestedFraction = cursorZoneLocalX / outerBounds.width;
+				const newNestedFraction = cursorZoneLocalX / outerBounds.width;
 				let newOuterFraction = cursorZoneLocalY / outerBounds.height;
 				const { sizeA: constrainedA, sizeB: constrainedB } = this.#applyConstraints(`${newOuterFraction * 100}%`, `${(1 - newOuterFraction) * 100}%`, outerBounds.height);
 				newOuterFraction = this.#parseSizeAsFraction(constrainedA, outerBounds.height);
@@ -31621,16 +32292,19 @@ let TabListItemElement = class TabListItemElement extends i$4 {
       <div>
         ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
         ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
-        ${this.closeable ? b`
-          <button
-            class="close-btn"
-            type="button"
-            aria-label="Close tab"
-            @click=${this._onCloseClick}
-          >
-            <ixfx-icon name="close"></ixfx-icon>
-          </button>
-        ` : A}
+        <div class="actions">
+          <div class="toolbar"><slot name="toolbar"></slot></div>
+          ${this.closeable ? b`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close tab"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : A}
+        </div>
       </div>
     `;
 	}
@@ -31654,7 +32328,7 @@ let TabListItemElement = class TabListItemElement extends i$4 {
         box-sizing: border-box;
       }
 
-      div {
+      :host > div {
         display: flex;
         align-items: center;
         gap: var(--space-s, 4px);
@@ -31685,6 +32359,28 @@ let TabListItemElement = class TabListItemElement extends i$4 {
         flex-shrink: 0;
       }
 
+      .actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        margin-left: auto;
+        flex-shrink: 0;
+      }
+
+      .toolbar {
+        display: none;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+
+      :host([selected]) .toolbar {
+        display: flex;
+      }
+
+      slot[name="toolbar"] {
+        display: contents;
+      }
+
       .close-btn {
         display: inline-flex;
         align-items: center;
@@ -31692,7 +32388,6 @@ let TabListItemElement = class TabListItemElement extends i$4 {
         background: none;
         border: none;
         padding: var(--space-xs);
-        margin-left: auto;
         cursor: pointer;
         color: inherit;
         border-radius: var(--radius-s);
@@ -31798,7 +32493,7 @@ let TabListElement = class TabListElement extends i$4 {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		this.classList.toggle("scrollable", this.scrollable);
+		this.classList.toggle(`scrollable`, this.scrollable);
 	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
@@ -31971,14 +32666,17 @@ let TabPanelsElement = class TabPanelsElement extends i$4 {
 		if (this.onSelectedPanel) this.onSelectedPanel(el.id, el);
 	}
 	syncWithList(el) {
+		const apply = (t) => {
+			if (!t) return;
+			const forEl = t.getAttribute(`for`);
+			if (forEl) this.selectPanel(forEl);
+		};
 		const t = el.getSelectedElement();
 		if (!t) {
-			el.updateComplete.then(() => this.syncWithList(el));
+			el.updateComplete.then(() => apply(el.getSelectedElement()));
 			return;
 		}
-		const forEl = t.getAttribute(`for`);
-		if (!forEl) return;
-		this.selectPanel(forEl);
+		apply(t);
 	}
 	selectPanel(id) {
 		const current = this.getSelectedElement();
@@ -32005,6 +32703,70 @@ let TabPanelsElement = class TabPanelsElement extends i$4 {
 __decorate([o$2()], TabPanelsElement.prototype, "_listItems", void 0);
 TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
 //#endregion
+//#region src/timeline/timeline-controller.ts
+/**
+* External adapter class that can configure a timeline element
+* with musical time, custom label formatting, etc.
+*
+* The controller has no import of any timeline element type.
+* Users create a controller, pass it the component instance,
+* and the controller calls the component's public API.
+*/
+var TimelineController = class {
+	#host;
+	#config;
+	#bpm = 120;
+	#timeSignatureNumerator = 4;
+	#timeSignatureDenominator = 4;
+	constructor(timeline, config) {
+		this.#host = timeline;
+		this.#config = config;
+		timeline.min = config.logicalMin;
+		timeline.max = config.logicalMax;
+		if (config.labelFormatter) timeline.formatLabel = config.labelFormatter;
+		timeline.addEventListener(`track-select`, this.#onTrackSelect);
+	}
+	/** Update the tempo (BPM) for musical time calculations. */
+	setTempo(bpm) {
+		this.#bpm = bpm;
+		this.#updateFormatLabel();
+	}
+	/** Update the time signature for musical time calculations. */
+	setTimeSignature(numerator, denominator) {
+		this.#timeSignatureNumerator = numerator;
+		this.#timeSignatureDenominator = denominator;
+		this.#updateFormatLabel();
+	}
+	/** Set the visible view range on the timeline. */
+	setViewRange(range) {
+		this.#host.setViewRange(range);
+	}
+	/** Clean up any resources held by the controller. */
+	dispose() {
+		this.#host.removeEventListener(`track-select`, this.#onTrackSelect);
+	}
+	#onTrackSelect = (e) => {
+		const detail = e.detail;
+		const trackEventIds = this.#host.getTrackEvents(detail.trackKey).map((e) => e.id);
+		if (detail.shiftKey) {
+			const current = new Set(this.#host.selectedIds);
+			for (const id of trackEventIds) if (current.has(id)) current.delete(id);
+			else current.add(id);
+			this.#host.selectedIds = [...current];
+		} else this.#host.selectedIds = trackEventIds;
+	};
+	#updateFormatLabel() {
+		if (this.#config.labelFormatter) return;
+		this.#bpm;
+		const num = this.#timeSignatureNumerator;
+		this.#host.formatLabel = (v) => {
+			const beatsPerBar = num;
+			const totalBeats = v;
+			return `${Math.floor(totalBeats / beatsPerBar) + 1}.${Math.floor(totalBeats % beatsPerBar) + 1}`;
+		};
+	}
+};
+//#endregion
 //#region src/timeline/timeline-draw.ts
 const NICE_STEPS = [
 	1,
@@ -32015,15 +32777,15 @@ const NICE_STEPS = [
 /**
 * Dispatch to adaptive or fixed grid mode.
 */
-const resolveGrid = (viewRange, userScale, viewportWidth, mode = `adaptive`, fixedMinorStep, ppu) => {
+function resolveGrid(viewRange, userScale, viewportWidth, mode = `adaptive`, fixedMinorStep, ppu) {
 	if (mode === `fixed` && fixedMinorStep !== void 0 && ppu !== void 0) return resolveFixedGrid(fixedMinorStep, ppu);
 	return resolveAdaptiveGrid(viewRange, userScale, viewportWidth);
-};
+}
 /**
 * Compute a nice major/minor grid resolution for the current view.
 * Uses a 1-2-5-10 "nice number" algorithm.
 */
-const resolveAdaptiveGrid = (viewRange, userScale, viewportWidth) => {
+function resolveAdaptiveGrid(viewRange, userScale, viewportWidth) {
 	const span = viewRange.max - viewRange.min;
 	if (span <= 0 || viewportWidth <= 0) return {
 		majorStep: 100,
@@ -32032,7 +32794,7 @@ const resolveAdaptiveGrid = (viewRange, userScale, viewportWidth) => {
 	};
 	const targetPx = 80 * scaleMultiplier(userScale);
 	const rawStep = span / Math.max(2, Math.floor(viewportWidth / targetPx));
-	const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+	const magnitude = 10 ** Math.floor(Math.log10(rawStep));
 	let bestStep = magnitude;
 	for (const n of NICE_STEPS) {
 		const candidate = n * magnitude;
@@ -32049,14 +32811,14 @@ const resolveAdaptiveGrid = (viewRange, userScale, viewportWidth) => {
 		minorDivisions,
 		minorStep
 	};
-};
+}
 /**
 * Fixed grid: user specifies a base minor step in logical units.
 * If the minor step at current zoom would produce lines < 5px apart,
 * double the effective step until they're >= 5px.
 * Major = 4× effective minor.
 */
-const resolveFixedGrid = (baseMinorStep, ppu) => {
+function resolveFixedGrid(baseMinorStep, ppu) {
 	const MIN_PX_BETWEEN = 5;
 	let effectiveMinor = baseMinorStep;
 	while (effectiveMinor * ppu < MIN_PX_BETWEEN && effectiveMinor < 0xe8d4a51000) effectiveMinor *= 2;
@@ -32066,8 +32828,8 @@ const resolveFixedGrid = (baseMinorStep, ppu) => {
 		minorDivisions,
 		minorStep: effectiveMinor
 	};
-};
-const scaleMultiplier = (scale) => {
+}
+function scaleMultiplier(scale) {
 	switch (scale) {
 		case `x-wide`: return 2;
 		case `wide`: return 1.5;
@@ -32076,8 +32838,8 @@ const scaleMultiplier = (scale) => {
 		case `x-slim`: return .5;
 		default: return 1;
 	}
-};
-const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
+}
+function drawMajorMinorGrid(ctx, region, resolution, altMajorBg, vars, ppu) {
 	const { majorStep, minorStep } = resolution;
 	if (majorStep <= 0) return;
 	const regionEnd = region.x + region.width;
@@ -32091,7 +32853,7 @@ const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
 	}
 	if (minorStep > 0) {
 		ctx.strokeStyle = vars[`--timeline-grid-minor-color`] ?? `rgba(255,255,255,0.05)`;
-		ctx.lineWidth = parseFloat(vars[`--timeline-grid-minor-width`] ?? `0.5`);
+		ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-minor-width`] ?? `0.5`);
 		ctx.beginPath();
 		const firstMinor = Math.floor(region.x / minorStep) * minorStep;
 		for (let val = firstMinor; val < regionEnd; val += minorStep) {
@@ -32103,7 +32865,7 @@ const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
 		ctx.stroke();
 	}
 	ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
-	ctx.lineWidth = parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
+	ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
 	ctx.beginPath();
 	const firstMajor = Math.floor(region.x / majorStep) * majorStep;
 	for (let val = firstMajor; val < regionEnd; val += majorStep) {
@@ -32112,13 +32874,13 @@ const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
 		ctx.lineTo(px, region.y + region.height);
 	}
 	ctx.stroke();
-};
+}
 /**
 * Draw the axis header band. With 2D virtualization the axis is "sticky" —
 * it is always drawn at the current vertical scroll position (`scrollTop`)
 * so it appears fixed at the viewport top.
 */
-const drawAxis = (ctx, region, resolution, axisHeight, formatLabel, vars, ppu, scrollTop = 0) => {
+function drawAxis(ctx, region, resolution, axisHeight, formatLabel, vars, ppu, scrollTop = 0) {
 	const { majorStep } = resolution;
 	if (majorStep <= 0 || axisHeight <= 0) return;
 	const axisTop = scrollTop;
@@ -32130,7 +32892,7 @@ const drawAxis = (ctx, region, resolution, axisHeight, formatLabel, vars, ppu, s
 	const bgLeft = region.x * ppu;
 	ctx.fillRect(bgLeft, axisTop, region.width * ppu, bgHeight);
 	ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
-	ctx.lineWidth = parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
+	ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
 	ctx.beginPath();
 	const firstMajor = Math.ceil(region.x / majorStep) * majorStep;
 	for (let val = firstMajor; val < regionEnd; val += majorStep) {
@@ -32155,8 +32917,8 @@ const drawAxis = (ctx, region, resolution, axisHeight, formatLabel, vars, ppu, s
 		ctx.fillText(formatLabel(val), px + labelPadding, axisTop + bgHeight / 2);
 	}
 	ctx.textAlign = `start`;
-};
-const drawTrackBackgrounds = (ctx, region, trackLayout, tracks, vars, ppu) => {
+}
+function drawTrackBackgrounds(ctx, region, trackLayout, tracks, vars, ppu) {
 	const bgDefault = vars[`--timeline-track-bg`] ?? `#1a1a1a`;
 	const bgAlt = vars[`--timeline-track-bg-alt`] ?? `#1e1e1e`;
 	for (let i = 0; i < trackLayout.length; i++) {
@@ -32164,7 +32926,7 @@ const drawTrackBackgrounds = (ctx, region, trackLayout, tracks, vars, ppu) => {
 		if (layout.y + layout.height < region.y) continue;
 		if (layout.y > region.y + region.height) break;
 		const track = tracks.find((t) => t.key === layout.trackKey);
-		ctx.fillStyle = track?.color ? track.color + `22` : i % 2 === 0 ? bgDefault : bgAlt;
+		ctx.fillStyle = track?.color ? `${track.color}22` : i % 2 === 0 ? bgDefault : bgAlt;
 		ctx.fillRect(region.x * ppu, layout.y, region.width * ppu, layout.height);
 		ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
 		ctx.lineWidth = .5;
@@ -32173,13 +32935,13 @@ const drawTrackBackgrounds = (ctx, region, trackLayout, tracks, vars, ppu) => {
 		ctx.lineTo((region.x + region.width) * ppu, layout.y + layout.height);
 		ctx.stroke();
 	}
-};
-const drawEventRects = (ctx, region, events, trackLayout, selectedIds, tickledId, drag, vars, ppu) => {
+}
+function drawEventRects(ctx, region, events, trackLayout, selectedIds, tickledId, drag, vars, ppu) {
 	const eventBg = vars[`--timeline-event-bg`] ?? `#3498db`;
 	const eventSelectedBg = vars[`--timeline-event-selected-bg`] ?? `#5dade2`;
 	const eventTickledBg = vars[`--timeline-event-tickled-bg`] ?? `#444`;
 	const eventLabelColor = vars[`--timeline-event-label-color`] ?? `#fff`;
-	const radius = parseFloat(vars[`--timeline-event-radius`] ?? `4`);
+	const radius = Number.parseFloat(vars[`--timeline-event-radius`] ?? `4`);
 	const regionEnd = region.x + region.width;
 	const padding = 3;
 	for (const evt of events) {
@@ -32233,8 +32995,8 @@ const drawEventRects = (ctx, region, events, trackLayout, selectedIds, tickledId
 			ctx.restore();
 		}
 	}
-};
-const drawMarquee = (ctx, drag, ppu) => {
+}
+function drawMarquee(ctx, drag, ppu) {
 	if (drag.kind !== `marquee`) return;
 	const x1 = Math.min(drag.startLogicalX, drag.currentLogicalX) * ppu;
 	const x2 = Math.max(drag.startLogicalX, drag.currentLogicalX) * ppu;
@@ -32245,8 +33007,8 @@ const drawMarquee = (ctx, drag, ppu) => {
 	ctx.strokeStyle = `rgba(100, 150, 255, 0.6)`;
 	ctx.lineWidth = 1;
 	ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
-};
-const drawRoundRect = (ctx, x, y, w, h, r) => {
+}
+function drawRoundRect(ctx, x, y, w, h, r) {
 	r = Math.max(0, r);
 	ctx.moveTo(x + r, y);
 	ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -32254,7 +33016,7 @@ const drawRoundRect = (ctx, x, y, w, h, r) => {
 	ctx.arcTo(x, y + h, x, y, r);
 	ctx.arcTo(x, y, x + w, y, r);
 	ctx.closePath();
-};
+}
 const TIMELINE_CSS_VARS = [
 	`--timeline-bg`,
 	`--timeline-track-bg`,
@@ -32271,12 +33033,12 @@ const TIMELINE_CSS_VARS = [
 	`--timeline-event-radius`,
 	`--timeline-axis-label-color`
 ];
-const resolveCssVars = (host) => {
+function resolveCssVars(host) {
 	const computed = getComputedStyle(host);
 	const vars = {};
 	for (const v of TIMELINE_CSS_VARS) vars[v] = computed.getPropertyValue(v).trim();
 	return vars;
-};
+}
 //#endregion
 //#region src/timeline/timeline-interactions.ts
 /** Hit zone near the edge of an event (px in screen space) */
@@ -32285,13 +33047,17 @@ const EDGE_HIT_PX = 8;
 * Convert a vcanvas logical (pixel) coordinate to timeline logical units.
 * vcanvas pixel coordinates are in the 1:1 pixel space; divide by ppu then add min.
 */
-const canvasToTimeline = (canvasX, ppu, min) => canvasX / ppu + min;
+function canvasToTimeline(canvasX, ppu, min) {
+	return canvasX / ppu + min;
+}
 /**
 * Convert screen-space pixel distance to timeline logical units.
 * Used for edge hit threshold: how many logical units does EDGE_HIT_PX correspond to.
 */
-const pxToLogicalUnits = (ppu) => ppu > 0 ? 1 / ppu : 1;
-const hitTest = (logicalX, y, events, trackLayout, ppu) => {
+function pxToLogicalUnits(ppu) {
+	return ppu > 0 ? 1 / ppu : 1;
+}
+function hitTest(logicalX, y, events, trackLayout, ppu) {
 	const track = trackLayout.find((tl) => y >= tl.y && y < tl.y + tl.height);
 	if (!track) return {
 		kind: `empty`,
@@ -32324,17 +33090,19 @@ const hitTest = (logicalX, y, events, trackLayout, ppu) => {
 		y,
 		trackKey: track.trackKey
 	};
-};
-const trackAtY = (y, trackLayout) => {
+}
+function trackAtY(y, trackLayout) {
 	return trackLayout.find((tl) => y >= tl.y && y < tl.y + tl.height)?.trackKey;
-};
+}
 /** Sensitivity: how many pixels of vertical drag = 1 e-fold of zoom */
 const ZOOM_SENSITIVITY_PX = 100;
 /**
 * Subtract a deadzone from a value.
 * Returns 0 if |value| <= deadzone, otherwise value shifted toward zero by deadzone.
 */
-const applyDeadzone = (value, deadzone) => Math.abs(value) > deadzone ? value - Math.sign(value) * deadzone : 0;
+function applyDeadzone(value, deadzone) {
+	return Math.abs(value) > deadzone ? value - Math.sign(value) * deadzone : 0;
+}
 /**
 * Compute new ppu + viewMin from an axis-zoom drag.
 * Vertical delta (dy) controls zoom (up = zoom in, down = zoom out), anchored at `anchorUnit`.
@@ -32342,7 +33110,7 @@ const applyDeadzone = (value, deadzone) => Math.abs(value) > deadzone ? value -
 *
 * Returns { ppu, viewMin } — the caller uses host.setZoomPan() to apply.
 */
-const computeAxisZoom = (startViewMin, startPpu, anchorUnit, dx, dy) => {
+function computeAxisZoom(startViewMin, startPpu, anchorUnit, dx, dy) {
 	const newPpu = startPpu * Math.exp(-dy / ZOOM_SENSITIVITY_PX);
 	let newMin = anchorUnit - (anchorUnit - startViewMin) * startPpu / newPpu;
 	if (newPpu > 0) newMin += -dx / newPpu;
@@ -32350,7 +33118,7 @@ const computeAxisZoom = (startViewMin, startPpu, anchorUnit, dx, dy) => {
 		ppu: newPpu,
 		viewMin: newMin
 	};
-};
+}
 /**
 * Compute new vertical view range from a v-axis-zoom drag.
 * Horizontal delta (dx) controls zoom (right = zoom in, left = zoom out),
@@ -32359,7 +33127,7 @@ const computeAxisZoom = (startViewMin, startPpu, anchorUnit, dx, dy) => {
 *
 * Returns { vMin, vMax } — the caller uses host.setVerticalZoomPan() to apply.
 */
-const computeVerticalAxisZoom = (startVMin, startVMax, startVScale, anchorBaseY, dx, dy) => {
+function computeVerticalAxisZoom(startVMin, startVMax, startVScale, anchorBaseY, dx, dy) {
 	const startSpan = startVMax - startVMin;
 	const newSpan = startSpan * Math.exp(-dx / ZOOM_SENSITIVITY_PX);
 	let newMin = anchorBaseY - (startSpan > 0 ? (anchorBaseY - startVMin) / startSpan : .5) * newSpan;
@@ -32368,12 +33136,12 @@ const computeVerticalAxisZoom = (startVMin, startVMax, startVScale, anchorBaseY,
 		vMin: newMin,
 		vMax: newMin + newSpan
 	};
-};
+}
 /**
 * Attaches pointer and keyboard interaction handlers to the timeline.
 * Returns a cleanup function.
 */
-const attachTimelineInteractions = (host, vcanvasEl) => {
+function attachTimelineInteractions(host, vcanvasEl) {
 	const ac = new AbortController();
 	const signal = ac.signal;
 	vcanvasEl.addEventListener(`pointerdown`, (e) => {
@@ -32434,7 +33202,6 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 				currentLogicalX: lx,
 				currentY: ly
 			};
-			return;
 		}
 	}, { signal });
 	vcanvasEl.addEventListener(`pointermove`, (e) => {
@@ -32507,7 +33274,6 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 				end: newEnd
 			} : ev);
 			vcanvasEl.invalidateAll();
-			return;
 		}
 	}, { signal });
 	vcanvasEl.addEventListener(`pointerup`, (e) => {
@@ -32580,8 +33346,8 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 		}
 	}, { signal });
 	return () => ac.abort();
-};
-const handleHover = (host, vcanvasEl, e) => {
+}
+function handleHover(host, vcanvasEl, e) {
 	const ppu = host.pxPerUnit;
 	const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);
 	const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);
@@ -32605,22 +33371,22 @@ const handleHover = (host, vcanvasEl, e) => {
 		host._tickledId = newTickledId;
 		vcanvasEl.invalidateAll();
 	}
-};
-const toggleSelection = (host, eventId) => {
+}
+function toggleSelection(host, eventId) {
 	const next = new Set(host._selectedIds);
 	if (next.has(eventId)) next.delete(eventId);
 	else next.add(eventId);
 	host._selectedIds = next;
 	fireSelectionChange(host);
 	host.getVCanvas()?.invalidateAll();
-};
-const fireSelectionChange = (host) => {
+}
+function fireSelectionChange(host) {
 	host.dispatchEvent(new CustomEvent(`selection-change`, {
 		detail: { selectedIds: [...host._selectedIds] },
 		bubbles: true,
 		composed: true
 	}));
-};
+}
 //#endregion
 //#region src/timeline/timeline-styles.ts
 const timelineStyles = i$7`
@@ -33682,70 +34448,6 @@ __decorate([r$1()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
 __decorate([r$1()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
 IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
 //#endregion
-//#region src/timeline/timeline-controller.ts
-/**
-* External adapter class that can configure a timeline element
-* with musical time, custom label formatting, etc.
-* 
-* The controller has no import of any timeline element type.
-* Users create a controller, pass it the component instance,
-* and the controller calls the component's public API.
-*/
-var TimelineController = class {
-	#host;
-	#config;
-	#bpm = 120;
-	#timeSignatureNumerator = 4;
-	#timeSignatureDenominator = 4;
-	constructor(timeline, config) {
-		this.#host = timeline;
-		this.#config = config;
-		timeline.min = config.logicalMin;
-		timeline.max = config.logicalMax;
-		if (config.labelFormatter) timeline.formatLabel = config.labelFormatter;
-		timeline.addEventListener(`track-select`, this.#onTrackSelect);
-	}
-	/** Update the tempo (BPM) for musical time calculations. */
-	setTempo(bpm) {
-		this.#bpm = bpm;
-		this.#updateFormatLabel();
-	}
-	/** Update the time signature for musical time calculations. */
-	setTimeSignature(numerator, denominator) {
-		this.#timeSignatureNumerator = numerator;
-		this.#timeSignatureDenominator = denominator;
-		this.#updateFormatLabel();
-	}
-	/** Set the visible view range on the timeline. */
-	setViewRange(range) {
-		this.#host.setViewRange(range);
-	}
-	/** Clean up any resources held by the controller. */
-	dispose() {
-		this.#host.removeEventListener(`track-select`, this.#onTrackSelect);
-	}
-	#onTrackSelect = (e) => {
-		const detail = e.detail;
-		const trackEventIds = this.#host.getTrackEvents(detail.trackKey).map((e) => e.id);
-		if (detail.shiftKey) {
-			const current = new Set(this.#host.selectedIds);
-			for (const id of trackEventIds) if (current.has(id)) current.delete(id);
-			else current.add(id);
-			this.#host.selectedIds = [...current];
-		} else this.#host.selectedIds = trackEventIds;
-	};
-	#updateFormatLabel() {
-		if (this.#config.labelFormatter) return;
-		this.#bpm;
-		const num = this.#timeSignatureNumerator;
-		this.#host.formatLabel = (v) => {
-			const beatsPerBar = num;
-			const totalBeats = v;
-			return `${Math.floor(totalBeats / beatsPerBar) + 1}.${Math.floor(totalBeats % beatsPerBar) + 1}`;
-		};
-	}
-};
-//#endregion
 //#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
 /**
 * @license
@@ -34115,7 +34817,7 @@ let TreeBaseElement = class TreeBaseElement extends i$4 {
 					event.preventDefault();
 					const current = nodes[currentIdx];
 					if (!current) break;
-					if (this.interactionMode === `checked`) this._handleCheckboxClick(new MouseEvent("click"), current.node, current.depth);
+					if (this.interactionMode === `checked`) this._handleCheckboxClick(new MouseEvent(`click`), current.node, current.depth);
 					else if (this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this.#toggleSelection(current.node, current.depth);
 					break;
 				}
@@ -35254,7 +35956,7 @@ let TooltipElement = class TooltipElement extends i$4 {
 	}
 	#renderIcon() {
 		if (!this.icon) return A;
-		if (this.icon.startsWith(`<svg`)) return b`<span class="tooltip-icon" style="display:inline-flex;align-items:center;margin-right:0.25em">${o(this.icon)}</span>`;
+		if (this.icon.startsWith(`<svg`)) return b`<span class="tooltip-icon" style="display:inline-flex;align-items:center;margin-right:0.25em">${o$1(this.icon)}</span>`;
 		if (!getIcon(this.icon)) return A;
 		return b`<ixfx-icon class="tooltip-icon" style="margin-right:0.25em" name="${this.icon}"></ixfx-icon>`;
 	}
@@ -35297,7 +35999,9 @@ TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)
 //#endregion
 //#region src/vertical-list/vertical-list.ts
 const ITEM_SELECTOR = `li, [data-list-item]`;
-const isMultiMode = (mode) => mode === `checked` || mode === `vscode` || mode === `standard`;
+function isMultiMode(mode) {
+	return mode === `checked` || mode === `vscode` || mode === `standard`;
+}
 let VerticalListElement = class VerticalListElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
@@ -35306,6 +36010,7 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 		this._selectedItems = /* @__PURE__ */ new Set();
 		this._searchVisible = false;
 		this._searchQuery = ``;
+		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.tickled = new TickledController(this, {
 			getItems: () => this._getVisibleItems().map((el) => ({
 				id: el,
@@ -35415,6 +36120,7 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 	}
 	#search;
 	#selectionAnchor;
+	#customWrappers;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -35447,9 +36153,29 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 		super.updated(changed);
 		if (changed.has(`interactionMode`)) {
 			this.#selectionAnchor = void 0;
-			this._clearSelection();
+			const previousSelected = this._selectedItems;
+			const savedWrappers = changed.get(`interactionMode`) === `checked` ? new Map(this.#customWrappers) : null;
+			this._syncCheckboxes();
+			if (previousSelected.size > 0) {
+				let remapped;
+				if (savedWrappers && savedWrappers.size > 0) remapped = new Set([...previousSelected].map((el) => savedWrappers.get(el) ?? el));
+				else if (this.#customWrappers.size > 0) {
+					const innerToWrapper = new Map([...this.#customWrappers].map(([w, i]) => [i, w]));
+					remapped = new Set([...previousSelected].map((el) => innerToWrapper.get(el) ?? el));
+				} else remapped = new Set(previousSelected);
+				this._selectedItems = remapped;
+			}
+			this._syncItemStates();
 		}
 	}
+	/** The most recently selected item, or `undefined` if nothing is selected. */
+	get selectedItem() {
+		return [...this._selectedItems].at(-1);
+	}
+	/** The full current selection set (read-only). */
+	get selectedItems() {
+		return this._selectedItems;
+	}
 	addItem(item) {
 		if (typeof item === `string`) {
 			const li = document.createElement(`li`);
@@ -35462,6 +36188,7 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 		item.remove();
 	}
 	clearItems() {
+		this.#customWrappers.clear();
 		this.replaceChildren();
 		this.#selectionAnchor = void 0;
 		this._selectedItems = /* @__PURE__ */ new Set();
@@ -35470,6 +36197,19 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 	select(item) {
 		this._replaceSelection(item);
 	}
+	selectMany(items) {
+		if (this.selectionMode !== `multiple`) throw new Error(`selectMany requires selectionMode="multiple" (current: "${this.selectionMode}")`);
+		const previous = this._selectedItems;
+		const next = new Set(items);
+		if (next.size === 0) return;
+		this._selectedItems = next;
+		this.#selectionAnchor = [...next].at(-1);
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
 	deselect(item) {
 		if (!this._selectedItems.has(item)) return;
 		const previous = this._selectedItems;
@@ -35601,11 +36341,34 @@ let VerticalListElement = class VerticalListElement extends i$4 {
 			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, this._selectedItems.has(el));
 			else el.removeAttribute(`data-checked`);
 		}
-		this.dataset[`inputMode`] = this.tickled.inputMode;
+		this.dataset.inputMode = this.tickled.inputMode;
 		this._syncCheckboxes();
 	}
 	_syncCheckboxes() {
 		const inCheckedMode = this.interactionMode === `checked`;
+		if (inCheckedMode) for (const inner of Array.from(this.children)) {
+			if (!inner.hasAttribute(`data-list-item`)) continue;
+			if (inner.parentElement !== this) continue;
+			const wrapper = document.createElement(`li`);
+			wrapper.className = `ixfx-custom-row`;
+			const key = inner.getAttribute(`data-key`);
+			const label = inner.getAttribute(`data-search-label`);
+			if (key !== null) wrapper.setAttribute(`data-key`, key);
+			if (label !== null) wrapper.setAttribute(`data-search-label`, label);
+			inner.removeAttribute(`data-list-item`);
+			this.insertBefore(wrapper, inner);
+			wrapper.appendChild(inner);
+			this.#customWrappers.set(wrapper, inner);
+		}
+		else {
+			for (const [wrapper, inner] of this.#customWrappers) {
+				if (wrapper.parentElement !== this) continue;
+				inner.setAttribute(`data-list-item`, ``);
+				this.insertBefore(inner, wrapper);
+				wrapper.remove();
+			}
+			this.#customWrappers.clear();
+		}
 		for (const el of this.querySelectorAll(`li`)) {
 			let cb = el.querySelector(`input.ixfx-list-checkbox`);
 			if (inCheckedMode) {
@@ -35747,17 +36510,6 @@ let VerticalListElement = class VerticalListElement extends i$4 {
       outline: 1px solid var(--accent, #60a5fa);
     }
 
-    /* checked mode: left-border indicator for custom shadow-DOM items (no checkbox injection possible) */
-    :host([interaction-mode="checked"]) ::slotted([data-list-item]) {
-      border-left: 3px solid transparent;
-      transition: background var(--transition, 0.1s ease-out),
-                  border-color var(--transition, 0.1s ease-out);
-    }
-
-    :host([interaction-mode="checked"]) ::slotted([data-list-item][data-checked]) {
-      border-left: 3px solid var(--accent, #60a5fa);
-    }
-
     .search-overlay {
       position: absolute;
       top: 8px;
@@ -36273,6 +37025,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataDisplayComponent, EditableLabel, EditableNumber, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
+export { AcTextElement, AcTokenElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataDisplayComponent, EditableLabel, EditableNumber, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, LabelledRadialInput, LabelledRangeInput, LedElement, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, SelectHorizontalElement, SnapContainer, SplitButton, SplitLayoutElement, SwipeElement, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TimelineController, TimelineTrackTabElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, VerticalListElement, XyPad, applyAgeModification, applyHighlights, attachTimelineInteractions, buildHighlightTargets, clearHighlights, computeColour, createAcCompletionProvider, createElementIncrSearch, createFuzzySearch, createIncrSearch, getIcon, hasIcon, iconBus, init, monitorIndeterminate, parseColourScaleAttr, readBaseColour, registerIcon, resolveCssVars, resolveGrid, svgToDataUri, timelineStyles };
 
 //# sourceMappingURL=index.js.map