@ixfx/components 0.2.5 → 0.3.0

package/bundle/index.js

@@ -7,7 +7,7 @@ import "@clinth/vcanvas";
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t$6 = globalThis, e$8 = t$6.ShadowRoot && (void 0 === t$6.ShadyCSS || t$6.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$7 = /* @__PURE__ */ new WeakMap();
+const t$5 = globalThis, e$8 = t$5.ShadowRoot && (void 0 === t$5.ShadyCSS || t$5.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$3 = Symbol(), o$7 = /* @__PURE__ */ new WeakMap();
 var n$5 = class {
 	constructor(t, e, o) {
 		if (this._$cssResult$ = !0, o !== s$3) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -26,7 +26,7 @@ var n$5 = class {
 		return this.cssText;
 	}
 };
-const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6 = (t, ...e) => {
+const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$7 = (t, ...e) => {
 	return new n$5(1 === t.length ? t[0] : e.reduce((e, s, o) => e + ((t) => {
 		if (!0 === t._$cssResult$) return t.cssText;
 		if ("number" == typeof t) return t;
@@ -35,7 +35,7 @@ const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6
 }, S$1 = (s, o) => {
 	if (e$8) s.adoptedStyleSheets = o.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
 	else for (const e of o) {
-		const o = document.createElement("style"), n = t$6.litNonce;
+		const o = document.createElement("style"), n = t$5.litNonce;
 		void 0 !== n && o.setAttribute("nonce", n), o.textContent = e.cssText, s.appendChild(o);
 	}
 }, c$4 = e$8 ? (t) => t : (t) => t instanceof CSSStyleSheet ? ((t) => {
@@ -49,7 +49,7 @@ const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const { is: i$5, defineProperty: e$7, getOwnPropertyDescriptor: h$2, getOwnPropertyNames: r$4, getOwnPropertySymbols: o$6, getPrototypeOf: n$4 } = Object, a$1 = globalThis, c$3 = a$1.trustedTypes, l$2 = c$3 ? c$3.emptyScript : "", p$2 = a$1.reactiveElementPolyfillSupport, d$2 = (t, s) => t, u$3 = {
+*/ const { is: i$6, defineProperty: e$7, getOwnPropertyDescriptor: h$2, getOwnPropertyNames: r$4, getOwnPropertySymbols: o$6, getPrototypeOf: n$4 } = Object, a$1 = globalThis, c$3 = a$1.trustedTypes, l$2 = c$3 ? c$3.emptyScript : "", p$2 = a$1.reactiveElementPolyfillSupport, d$2 = (t, s) => t, u$3 = {
 	toAttribute(t, s) {
 		switch (s) {
 			case Boolean:
@@ -78,7 +78,7 @@ const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$6
 		}
 		return i;
 	}
-}, f$2 = (t, s) => !i$5(t, s), b$1 = {
+}, f$2 = (t, s) => !i$6(t, s), b$1 = {
 	attribute: !0,
 	type: String,
 	converter: u$3,
@@ -274,18 +274,17 @@ var y$1 = class extends HTMLElement {
 };
 y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$2("elementProperties")] = /* @__PURE__ */ new Map(), y$1[d$2("finalized")] = /* @__PURE__ */ new Map(), p$2?.({ ReactiveElement: y$1 }), (a$1.reactiveElementVersions ??= []).push("2.1.2");
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/lit-html.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t$5 = globalThis, i$4 = (t) => t, s$2 = t$5.trustedTypes, e$6 = s$2 ? s$2.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, h$1 = "$lit$", o$5 = `lit$${Math.random().toFixed(9).slice(2)}$`, n$3 = "?" + o$5, r$3 = `<${n$3}>`, l$1 = document, c$2 = () => l$1.createComment(""), a = (t) => null === t || "object" != typeof t && "function" != typeof t, u$2 = Array.isArray, d$1 = (t) => u$2(t) || "function" == typeof t?.[Symbol.iterator], f$1 = "[ 	\n\f\r]", v$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m$1 = />/g, p$1 = RegExp(`>|${f$1}(?:([^\\s"'>=/]+)(${f$1}*=${f$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, x = (t) => (i, ...s) => ({
+const t$4 = globalThis, i$5 = (t) => t, s$2 = t$4.trustedTypes, e$6 = s$2 ? s$2.createPolicy("lit-html", { createHTML: (t) => t }) : void 0, h$1 = "$lit$", o$5 = `lit$${Math.random().toFixed(9).slice(2)}$`, n$3 = "?" + o$5, r$3 = `<${n$3}>`, l$1 = document, c$2 = () => l$1.createComment(""), a = (t) => null === t || "object" != typeof t && "function" != typeof t, u$2 = Array.isArray, d$1 = (t) => u$2(t) || "function" == typeof t?.[Symbol.iterator], f$1 = "[ 	\n\f\r]", v$1 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, _ = /-->/g, m$1 = />/g, p$1 = RegExp(`>|${f$1}(?:([^\\s"'>=/]+)(${f$1}*=${f$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), g = /'/g, $ = /"/g, y = /^(?:script|style|textarea|title)$/i, x = (t) => (i, ...s) => ({
 	_$litType$: t,
 	strings: i,
 	values: s
 }), b = x(1), w = x(2);
-x(3);
 const E = Symbol.for("lit-noChange"), A = Symbol.for("lit-nothing"), C = /* @__PURE__ */ new WeakMap(), P = l$1.createTreeWalker(l$1, 129);
 function V(t, i) {
 	if (!u$2(t) || !t.hasOwnProperty("raw")) throw Error("invalid template strings array");
@@ -443,8 +442,8 @@ var k = class k {
 	}
 	_$AR(t = this._$AA.nextSibling, s) {
 		for (this._$AP?.(!1, !0, s); t !== this._$AB;) {
-			const s = i$4(t).nextSibling;
-			i$4(t).remove(), t = s;
+			const s = i$5(t).nextSibling;
+			i$5(t).remove(), t = s;
 		}
 	}
 	setConnected(t) {
@@ -531,8 +530,8 @@ const j$1 = {
 	U: z,
 	B: I,
 	F: Z
-}, B = t$5.litHtmlPolyfillSupport;
-B?.(S, k), (t$5.litHtmlVersions ??= []).push("3.3.2");
+}, B = t$4.litHtmlPolyfillSupport;
+B?.(S, k), (t$4.litHtmlVersions ??= []).push("3.3.3");
 const D = (t, i, s) => {
 	const e = s?.renderBefore ?? i;
 	let h = e._$litPart$;
@@ -549,7 +548,7 @@ const D = (t, i, s) => {
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */ const s$1 = globalThis;
-var i$3 = class extends y$1 {
+var i$4 = class extends y$1 {
 	constructor() {
 		super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
 	}
@@ -571,23 +570,11 @@ var i$3 = class extends y$1 {
 		return E;
 	}
 };
-i$3._$litElement$ = !0, i$3["finalized"] = !0, s$1.litElementHydrateSupport?.({ LitElement: i$3 });
+i$4._$litElement$ = !0, i$4["finalized"] = !0, s$1.litElementHydrateSupport?.({ LitElement: i$4 });
 const o$4 = s$1.litElementPolyfillSupport;
-o$4?.({ LitElement: i$3 });
+o$4?.({ LitElement: i$4 });
 (s$1.litElementVersions ??= []).push("4.2.2");
 //#endregion
-//#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/custom-element.js
-/**
-* @license
-* Copyright 2017 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-const t$4 = (t) => (e, o) => {
-	void 0 !== o ? o.addInitializer(() => {
-		customElements.define(t, e);
-	}) : customElements.define(t, e);
-};
-//#endregion
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.js
 /**
 * @license
@@ -750,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
 /**
@@ -1018,7 +1005,7 @@ var TickledController = class TickledController {
 * }
 * ```
 */
-const tickledStyles = i$6`
+const tickledStyles = i$7`
   /**
    * No suppression needed - tickled styling is always active.
    */
@@ -1030,7 +1017,7 @@ const tickledStyles = i$6`
 * Components should import this in addition to `tickledStyles` and can override
 * CSS variables to customize appearance.
 */
-const tickledItemStyles = i$6`
+const tickledItemStyles = i$7`
   :host {
     --item-bg: transparent;
     --item-bg-tickled: rgba(0, 0, 0, 0.06);
@@ -1080,7 +1067,23 @@ const tickledItemStyles = i$6`
   }
 `;
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive.js
+//#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
 * Copyright 2017 Google LLC
@@ -1097,7 +1100,7 @@ const t$2 = {
 	_$litDirective$: t,
 	values: e
 });
-var i$2 = class {
+var i$3 = class {
 	constructor(t) {}
 	get _$AU() {
 		return this._$AM._$AU;
@@ -1113,43 +1116,12 @@ var i$2 = class {
 	}
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/style-map.js
-/**
-* @license
-* Copyright 2018 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/ const n$1 = "important", i$1 = " !" + n$1, o$1 = e$3(class extends i$2 {
-	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$1 : "") : s[t] = e;
-			}
-		}
-		return E;
-	}
-});
-//#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/unsafe-html.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/unsafe-html.js
 /**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ var e$2 = class extends i$2 {
+*/ var e$2 = class extends i$3 {
 	constructor(i) {
 		if (super(i), this.it = A, i.type !== t$2.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
 	}
@@ -1168,7 +1140,7 @@ var i$2 = 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();
@@ -1188,7 +1160,7 @@ function svgToDataUri(svg) {
 	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.127.0/helpers/decorate.js
+//#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;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1197,7 +1169,7 @@ function __decorate(decorators, target, key, desc) {
 }
 //#endregion
 //#region src/icons/icon.ts
-let IxfxIconElement = class IxfxIconElement extends i$3 {
+let IxfxIconElement = class IxfxIconElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.name = ``;
@@ -1226,7 +1198,7 @@ let IxfxIconElement = class IxfxIconElement extends i$3 {
         class="icon-wrapper"
         aria-hidden=${hasLabel ? A : `true`}
         aria-label=${hasLabel ? this.label : A}
-      >${o(svg)}</span>
+      >${o$1(svg)}</span>
     `;
 	}
 	updated(changed) {
@@ -1235,7 +1207,7 @@ let IxfxIconElement = class IxfxIconElement extends i$3 {
 		else this.style.removeProperty(`--rotate`);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: inline-flex;
       align-items: center;
@@ -1282,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([t$4(`ixfx-icon`)], IxfxIconElement);
+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),
@@ -1302,7 +1274,7 @@ function makeLruCache(maxSize) {
 		clear: () => map.clear()
 	};
 }
-let AcTextElement = class AcTextElement extends i$3 {
+let AcTextElement = class AcTextElement extends i$4 {
 	#cache;
 	#debounceTimer;
 	#abortController;
@@ -1321,7 +1293,7 @@ let AcTextElement = class AcTextElement extends i$3 {
 			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);
@@ -1396,7 +1368,7 @@ let AcTextElement = class AcTextElement extends i$3 {
 			e.preventDefault();
 			this.#selectItem(item);
 		};
-		this.#cache = makeLruCache(this.cacheSize);
+		this.#cache = makeLruCache$1(this.cacheSize);
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -1405,7 +1377,7 @@ let AcTextElement = class AcTextElement extends i$3 {
 	}
 	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;
@@ -1600,7 +1572,7 @@ let AcTextElement = class AcTextElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = [tickledStyles, i$6`
+		this.styles = [tickledStyles, i$7`
     :host {
       display: block;
       position: relative;
@@ -1760,7 +1732,935 @@ __decorate([r$1()], AcTextElement.prototype, "_query", void 0);
 __decorate([r$1()], AcTextElement.prototype, "_results", void 0);
 __decorate([r$1()], AcTextElement.prototype, "_isOpen", void 0);
 __decorate([r$1()], AcTextElement.prototype, "_isLoading", void 0);
-AcTextElement = __decorate([t$4(`ixfx-ac-text`)], AcTextElement);
+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
 /**
@@ -1856,7 +2756,7 @@ registerDefaults();
 * - Transition uses `--transition` from the theme (default `0.15s ease-out`).
 * - When disabled, `pointer-events: none` is set and cannot be overridden per-instance.
 */
-const prominenceStyles = i$6`
+const prominenceStyles = i$7`
   :host {
     --prominence-idle-opacity: 0.6;
     --prominence-idle-saturate: 0.4;
@@ -1894,7 +2794,7 @@ const prominenceStyles = i$6`
 `;
 //#endregion
 //#region src/button/button-styles.ts
-const buttonStyles = i$6`
+const buttonStyles = i$7`
   :host {
     display: inline-flex;
     max-width: 100%;
@@ -1969,7 +2869,7 @@ const buttonStyles = i$6`
 `;
 //#endregion
 //#region src/button/button.ts
-let ButtonElement = class ButtonElement extends i$3 {
+let ButtonElement = class ButtonElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.disabled = false;
@@ -1978,7 +2878,7 @@ let ButtonElement = class ButtonElement extends i$3 {
 	}
 	_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>`;
 	}
@@ -2002,10 +2902,10 @@ __decorate([n$2({
 	attribute: `hide-label`,
 	reflect: true
 })], ButtonElement.prototype, "hideLabel", void 0);
-ButtonElement = __decorate([t$4(`ixfx-button`)], ButtonElement);
+ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 //#region src/button/radio-group.ts
-let RadioGroup = class RadioGroup extends i$3 {
+let RadioGroup = class RadioGroup extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.value = ``;
@@ -2106,7 +3006,7 @@ let RadioGroup = class RadioGroup extends i$3 {
 		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) {
@@ -2153,7 +3053,7 @@ let RadioGroup = class RadioGroup extends i$3 {
     `;
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: inline-flex;
       min-width: min-content;
@@ -2330,7 +3230,7 @@ __decorate([n$2({
 __decorate([r$1()], RadioGroup.prototype, "_computedItems", void 0);
 __decorate([r$1()], RadioGroup.prototype, "_icons", void 0);
 __decorate([e$4(`slot`)], RadioGroup.prototype, "_slot", void 0);
-RadioGroup = __decorate([t$4(`ixfx-radio-group`)], RadioGroup);
+RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
 //#region src/styles/popup.ts
 /**
@@ -2342,7 +3242,7 @@ RadioGroup = __decorate([t$4(`ixfx-radio-group`)], RadioGroup);
 * Intentionally omitted (remain per-component): positioning, padding,
 * dimensions, z-index, and open/close animations.
 */
-const popupSurfaceStyles = i$6`
+const popupSurfaceStyles = i$7`
   .popup-surface {
     background: var(--surface-5);
     border: 1px solid var(--surface-6);
@@ -2353,14 +3253,14 @@ const popupSurfaceStyles = i$6`
 `;
 //#endregion
 //#region src/menu/menu-container.ts
-let MenuContainer = class MenuContainer extends i$3 {
+let MenuContainer = class MenuContainer extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tickled = new TickledController(this, {
 			getItems: () => {
 				return this._getMenuItems().map((item, i) => ({
 					id: i,
-					enabled: !item.hasAttribute("disabled")
+					enabled: !item.hasAttribute(`disabled`)
 				}));
 			},
 			onTickle: (index) => {
@@ -2423,7 +3323,7 @@ let MenuContainer = class MenuContainer extends i$3 {
 		this.styles = [
 			popupSurfaceStyles,
 			tickledStyles,
-			i$6`
+			i$7`
     :host {
       display: block;
     }
@@ -2494,7 +3394,7 @@ let MenuContainer = class MenuContainer extends i$3 {
 	*/
 	willUpdate(changed) {
 		super.willUpdate(changed);
-		this.setAttribute("data-input-mode", this.tickled.inputMode);
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 	}
 	render() {
 		return b`
@@ -2552,14 +3452,14 @@ let MenuContainer = class MenuContainer extends i$3 {
 				}
 			}
 		});
-		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;
@@ -2613,11 +3513,11 @@ __decorate([n$2({
 __decorate([n$2({ attribute: false })], MenuContainer.prototype, "registry", void 0);
 __decorate([n$2({ attribute: false })], MenuContainer.prototype, "keyboardManager", void 0);
 __decorate([e$4(`.popover`)], MenuContainer.prototype, "_popover", void 0);
-MenuContainer = __decorate([t$4(`ixfx-menu-container`)], MenuContainer);
+MenuContainer = __decorate([safeCustomElement(`ixfx-menu-container`)], MenuContainer);
 //#endregion
 //#region src/menu/menu-trigger.ts
 var _MenuTrigger;
-let MenuTrigger = class MenuTrigger extends i$3 {
+let MenuTrigger = class MenuTrigger extends i$4 {
 	static {
 		_MenuTrigger = this;
 	}
@@ -2811,7 +3711,7 @@ let MenuTrigger = class MenuTrigger extends i$3 {
 		} catch {}
 	}
 	static {
-		this.styles = [popupSurfaceStyles, i$6`
+		this.styles = [popupSurfaceStyles, i$7`
     :host {
       display: inline-block;
       position: relative;
@@ -2905,10 +3805,10 @@ __decorate([r$1()], MenuTrigger.prototype, "_hasMenu", void 0);
 __decorate([r$1()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
 __decorate([e$4(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
 __decorate([e$4(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
-MenuTrigger = _MenuTrigger = __decorate([t$4(`ixfx-menu-trigger`)], MenuTrigger);
+MenuTrigger = _MenuTrigger = __decorate([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
 //#endregion
 //#region src/menu/menu-item.ts
-let MenuItem = class MenuItem extends i$3 {
+let MenuItem = class MenuItem extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.command = ``;
@@ -3001,7 +3901,7 @@ let MenuItem = class MenuItem extends i$3 {
 		return [...mods, key].join(``);
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -3106,7 +4006,7 @@ __decorate([n$2({ attribute: false })], MenuItem.prototype, "keyboardManager", v
 __decorate([n$2({ attribute: false })], MenuItem.prototype, "submenuPopover", void 0);
 __decorate([r$1()], MenuItem.prototype, "_hasChildren", void 0);
 __decorate([e$4(`slot`)], MenuItem.prototype, "_slot", void 0);
-MenuItem = __decorate([t$4(`ixfx-menu-item`)], MenuItem);
+MenuItem = __decorate([safeCustomElement(`ixfx-menu-item`)], MenuItem);
 //#endregion
 //#region src/button/split-button.ts
 let SplitButton = class SplitButton extends ButtonElement {
@@ -3360,7 +4260,7 @@ let SplitButton = class SplitButton extends ButtonElement {
 		this.styles = [
 			prominenceStyles,
 			buttonStyles,
-			i$6`
+			i$7`
       :host {
         display: inline-flex;
         max-width: 100%;
@@ -3495,7 +4395,7 @@ __decorate([r$1()], SplitButton.prototype, "_switcherItems", void 0);
 __decorate([r$1()], SplitButton.prototype, "_dynamicItems", void 0);
 __decorate([r$1()], SplitButton.prototype, "_loadingItems", void 0);
 __decorate([r$1()], SplitButton.prototype, "_menuHasItems", void 0);
-SplitButton = __decorate([t$4(`ixfx-split-button`)], SplitButton);
+SplitButton = __decorate([safeCustomElement(`ixfx-split-button`)], SplitButton);
 //#endregion
 //#region src/checkbox.ts
 /**
@@ -3533,7 +4433,7 @@ SplitButton = __decorate([t$4(`ixfx-split-button`)], SplitButton);
 *   --label-opacity-unchecked – label opacity when unchecked (default: uses --label-opacity)
 *   --transition-duration – animation duration (default: 0.2s)
 */
-let Checkbox = class Checkbox extends i$3 {
+let Checkbox = class Checkbox extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.checked = false;
@@ -3553,7 +4453,7 @@ let Checkbox = class Checkbox extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       /* Box */
       --box-size: 18px;
@@ -3740,7 +4640,7 @@ __decorate([n$2({ type: Boolean })], Checkbox.prototype, "indeterminate", void 0
 __decorate([n$2({ type: String })], Checkbox.prototype, "label", void 0);
 __decorate([n$2({ type: String })], Checkbox.prototype, "name", void 0);
 __decorate([n$2({ type: String })], Checkbox.prototype, "value", void 0);
-Checkbox = __decorate([t$4(`ixfx-checkbox`)], Checkbox);
+Checkbox = __decorate([safeCustomElement(`ixfx-checkbox`)], Checkbox);
 //#endregion
 //#region node_modules/.pnpm/@ixfx+visual@0.56.12/node_modules/@ixfx/visual/dist/chunk-pbuEa-1d.js
 var __defProp$5 = Object.defineProperty;
@@ -17866,7 +18766,7 @@ function applyValue(el, value) {
 }
 //#endregion
 //#region src/mixins/labelled-input-base.ts
-var LabelledInputBase = class extends i$3 {
+var LabelledInputBase = class extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.label = ``;
@@ -18042,7 +18942,7 @@ let LabelledRangeInput = class LabelledRangeInput extends LabelledInputBase {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       container-type: size;
@@ -18131,10 +19031,10 @@ __decorate([n$2({
 	type: Number,
 	attribute: `switch-height`
 })], LabelledRangeInput.prototype, "switchHeight", void 0);
-LabelledRangeInput = __decorate([t$4(`ixfx-labelled-range-input`)], LabelledRangeInput);
+LabelledRangeInput = __decorate([safeCustomElement(`ixfx-labelled-range-input`)], LabelledRangeInput);
 //#endregion
 //#region src/colour-picker/colour-picker.ts
-let ColourPicker = class ColourPicker extends i$3 {
+let ColourPicker = class ColourPicker extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.l = .7;
@@ -18450,7 +19350,7 @@ let ColourPicker = class ColourPicker extends i$3 {
 		}));
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     /*
      * Default intrinsic size — not determined by label text.
      * Override via CSS: ixfx-colour-picker { width: 100%; height: 200px; }
@@ -18650,7 +19550,7 @@ __decorate([e$4(`#slider-c`)], ColourPicker.prototype, "_sliderC", void 0);
 __decorate([e$4(`#slider-h`)], ColourPicker.prototype, "_sliderH", void 0);
 __decorate([e$4(`#slider-a`)], ColourPicker.prototype, "_sliderA", void 0);
 __decorate([e$4(`.preview`)], ColourPicker.prototype, "_previewEl", void 0);
-ColourPicker = __decorate([t$4(`ixfx-colour-picker`)], ColourPicker);
+ColourPicker = __decorate([safeCustomElement(`ixfx-colour-picker`)], ColourPicker);
 //#endregion
 //#region src/colour-picker/colour-picker-popup.ts
 let _instanceCounter = 0;
@@ -18682,7 +19582,7 @@ function swatchBackground(l, c, h, a) {
     `;
 	return oklchToCss(l, c, h);
 }
-let ColourPickerPopup = class ColourPickerPopup extends i$3 {
+let ColourPickerPopup = class ColourPickerPopup extends i$4 {
 	constructor() {
 		super();
 		this.mode = `fluid`;
@@ -18878,7 +19778,7 @@ let ColourPickerPopup = class ColourPickerPopup extends i$3 {
           ></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}
@@ -18886,7 +19786,7 @@ let ColourPickerPopup = class ColourPickerPopup extends i$3 {
     `;
 	}
 	static {
-		this.styles = [popupSurfaceStyles, i$6`
+		this.styles = [popupSurfaceStyles, i$7`
     :host {
       display: inline-block;
     }
@@ -19022,7 +19922,7 @@ __decorate([r$1()], ColourPickerPopup.prototype, "_isOpen", void 0);
 __decorate([r$1()], ColourPickerPopup.prototype, "_everOpened", void 0);
 __decorate([e$4(`.popup`)], ColourPickerPopup.prototype, "_popupEl", void 0);
 __decorate([e$4(`ixfx-colour-picker`)], ColourPickerPopup.prototype, "_pickerEl", void 0);
-ColourPickerPopup = __decorate([t$4(`ixfx-colour-picker-popup`)], ColourPickerPopup);
+ColourPickerPopup = __decorate([safeCustomElement(`ixfx-colour-picker-popup`)], ColourPickerPopup);
 //#endregion
 //#region src/common/tree-data-model.ts
 function findNode(root, key) {
@@ -19109,7 +20009,7 @@ var TreeDataModel = class {
 		this.#root = root;
 		this.#cache.clear();
 		this.#notify({
-			type: "root",
+			type: `root`,
 			root
 		});
 	}
@@ -19137,7 +20037,7 @@ var TreeDataModel = class {
 	invalidate(key) {
 		this.#cache.delete(key);
 		this.#notify({
-			type: "invalidate",
+			type: `invalidate`,
 			key
 		});
 	}
@@ -19148,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;
@@ -19161,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;
@@ -19179,7 +20079,7 @@ var TreeDataModel = class {
 			children: n.children
 		}));
 		this.#notify({
-			type: "root",
+			type: `root`,
 			root: this.#root
 		});
 		return this.#root;
@@ -19191,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;
@@ -19211,315 +20111,9 @@ 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/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/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/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/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/narrowed-text/narrowed-text.ts
 const HIGHLIGHT_KEY = `narrowed-text-highlight`;
-let NarrowedTextElement = class NarrowedTextElement extends i$3 {
+let NarrowedTextElement = class NarrowedTextElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.selectionMode = `single`;
@@ -19896,7 +20490,7 @@ let NarrowedTextElement = class NarrowedTextElement extends i$3 {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
-			i$6`
+			i$7`
     :host {
       display: inline-block;
       position: relative;
@@ -20076,20 +20670,20 @@ __decorate([r$1()], NarrowedTextElement.prototype, "_computedItems", void 0);
 __decorate([r$1()], NarrowedTextElement.prototype, "_filteredItems", void 0);
 __decorate([r$1()], NarrowedTextElement.prototype, "_isFocused", void 0);
 __decorate([e$4(`slot`)], NarrowedTextElement.prototype, "_slot", void 0);
-NarrowedTextElement = __decorate([t$4(`ixfx-narrowed-text`)], NarrowedTextElement);
+NarrowedTextElement = __decorate([safeCustomElement(`ixfx-narrowed-text`)], NarrowedTextElement);
 //#endregion
 //#region src/crumbs/crumb-navigation.ts
-let CrumbNavigationElement = class CrumbNavigationElement extends i$3 {
+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;
@@ -20354,7 +20948,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i$3 {
 			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();
 					}
@@ -20678,7 +21272,7 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i$3 {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
-			i$6`
+			i$7`
     :host {
       --text-highlight: var(--accent);
       --separator: var(--surface-muted-text);
@@ -20841,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);
@@ -20853,9 +21447,9 @@ __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([t$4(`ixfx-crumb-navigation`)], CrumbNavigationElement);
+CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
 //#region src/crumbs/crumb-path-controller.ts
 var CrumbPathController = class {
@@ -20922,7 +21516,7 @@ var CrumbPathController = class {
 //#endregion
 //#region src/crumbs/crumb-path.ts
 const INVALID_ANCHOR_CHARS_RE = /[^\w-]/g;
-let CrumbPathElement = class CrumbPathElement extends i$3 {
+let CrumbPathElement = class CrumbPathElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.path = ``;
@@ -21011,7 +21605,7 @@ let CrumbPathElement = class CrumbPathElement extends i$3 {
 	updated(changedProperties) {
 		if (this._editing) {
 			const el = this.shadowRoot?.querySelector(`ixfx-ac-text`);
-			if (el instanceof i$3) {
+			if (el instanceof i$4) {
 				const editValue = this.path;
 				if (this._editStartIndex !== null) {
 					const segmentLabel = this.#getSegments()[this._editStartIndex];
@@ -21350,7 +21944,7 @@ let CrumbPathElement = class CrumbPathElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = [popupSurfaceStyles, i$6`
+		this.styles = [popupSurfaceStyles, i$7`
     :host {
       --text-highlight: var(--accent);
       --separator: var(--surface-muted-text);
@@ -21540,16 +22134,16 @@ __decorate([r$1()], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0);
 __decorate([r$1()], CrumbPathElement.prototype, "_editingCancelled", void 0);
 __decorate([r$1()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([r$1()], CrumbPathElement.prototype, "_openCumPath", void 0);
-CrumbPathElement = __decorate([t$4(`ixfx-crumb-path`)], CrumbPathElement);
+CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/data-display.ts
 var _DataDisplayComponent;
-let DataDisplayComponent = class DataDisplayComponent extends i$3 {
+let DataDisplayComponent = class DataDisplayComponent extends i$4 {
 	static {
 		_DataDisplayComponent = this;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
     }
@@ -21633,10 +22227,10 @@ let DataDisplayComponent = class DataDisplayComponent extends i$3 {
 		this.previousValue = value;
 	}
 };
-DataDisplayComponent = _DataDisplayComponent = __decorate([t$4(`ixfx-data-display`)], DataDisplayComponent);
+DataDisplayComponent = _DataDisplayComponent = __decorate([safeCustomElement(`ixfx-data-display`)], DataDisplayComponent);
 //#endregion
 //#region src/editable-label/editable-label.ts
-let EditableLabel = class EditableLabel extends i$3 {
+let EditableLabel = class EditableLabel extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.mode = `label`;
@@ -21667,6 +22261,9 @@ let EditableLabel = class EditableLabel extends i$3 {
 			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();
 		};
@@ -21702,6 +22299,17 @@ let EditableLabel = class EditableLabel extends i$3 {
 	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);
@@ -21795,8 +22403,34 @@ let EditableLabel = class EditableLabel extends i$3 {
 			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$6`
+		this.styles = [i$7`
     :host {
       display: inline-flex;
       align-items: center;
@@ -21906,7 +22540,14 @@ __decorate([n$2({
 __decorate([n$2({ attribute: false })], EditableLabel.prototype, "validator", void 0);
 __decorate([n$2({ attribute: false })], EditableLabel.prototype, "formatter", void 0);
 __decorate([r$1()], EditableLabel.prototype, "_editing", void 0);
-EditableLabel = __decorate([t$4(`ixfx-editable-label`)], EditableLabel);
+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
 /**
@@ -22326,7 +22967,7 @@ let EditableNumber = class EditableNumber extends EditableLabel {
 		this.styles = [
 			prominenceStyles,
 			...EditableLabel.styles,
-			i$6`
+			i$7`
     :host {
       font-size: var(--text-s,11px);
       --value: 0;
@@ -22501,14 +23142,14 @@ __decorate([n$2({
 	attribute: `no-drag`
 })], EditableNumber.prototype, "noDrag", void 0);
 __decorate([n$2({ type: Number })], EditableNumber.prototype, "precision", void 0);
-EditableNumber = __decorate([t$4(`ixfx-editable-number`)], EditableNumber);
+EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive-helpers.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive-helpers.js
 /**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const { I: t$1 } = j$1, i = (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 {
@@ -22520,8 +23161,8 @@ EditableNumber = __decorate([t$4(`ixfx-editable-number`)], EditableNumber);
 		if (t !== d || c) {
 			let o = e._$AA;
 			for (; o !== t;) {
-				const t = i(o).nextSibling;
-				i(l).insertBefore(o, d), o = t;
+				const t = i$2(o).nextSibling;
+				i$2(l).insertBefore(o, d), o = t;
 			}
 		}
 	}
@@ -22530,7 +23171,7 @@ EditableNumber = __decorate([t$4(`ixfx-editable-number`)], EditableNumber);
 	o._$AR(), o._$AA.remove();
 };
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/repeat.js
 /**
 * @license
 * Copyright 2017 Google LLC
@@ -22540,7 +23181,7 @@ const u = (e, s, t) => {
 	const r = /* @__PURE__ */ new Map();
 	for (let l = s; l <= t; l++) r.set(e[l], l);
 	return r;
-}, c = e$3(class extends i$2 {
+}, c = e$3(class extends i$3 {
 	constructor(e) {
 		if (super(e), e.type !== t$2.CHILD) throw Error("repeat() can only be used in text expressions");
 	}
@@ -22590,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,
@@ -22599,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, {
@@ -22647,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);
@@ -22661,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];
@@ -22674,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, {
@@ -22684,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;
@@ -22740,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;
@@ -22760,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;
@@ -22823,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;
@@ -22836,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;
@@ -22849,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)
 	};
@@ -22873,16 +23545,16 @@ 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$3 {
+let IxfxHexEditorElement = class IxfxHexEditorElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.columns = 4;
@@ -23041,7 +23713,7 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       --hex-row-height: 24px;
       --hex-offset-width: 8ch;
@@ -23674,7 +24346,7 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i$3 {
 		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)}
@@ -23697,7 +24369,7 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i$3 {
 		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)}
@@ -23726,7 +24398,7 @@ __decorate([r$1()], IxfxHexEditorElement.prototype, "_editState", void 0);
 __decorate([r$1()], IxfxHexEditorElement.prototype, "_containerH", void 0);
 __decorate([r$1()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
 __decorate([r$1()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
-IxfxHexEditorElement = __decorate([t$4(`ixfx-hex-editor`)], IxfxHexEditorElement);
+IxfxHexEditorElement = __decorate([safeCustomElement(`ixfx-hex-editor`)], IxfxHexEditorElement);
 //#endregion
 //#region src/radial-input/svg-utils.ts
 const PI2 = Math.PI * 2;
@@ -23773,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;
 	}
 }
@@ -23790,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
 		};
@@ -23806,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,
@@ -23857,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) {
@@ -23898,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) {
@@ -23934,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
@@ -23949,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,
@@ -24016,7 +24688,7 @@ const CENTER = {
 	x: 50,
 	y: 50
 };
-let RadialInputElement = class RadialInputElement extends i$3 {
+let RadialInputElement = class RadialInputElement extends i$4 {
 	#_radius;
 	get radius() {
 		return this.#_radius;
@@ -24427,7 +25099,7 @@ let RadialInputElement = class RadialInputElement extends i$3 {
 		if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: inline-block;
       width: 100px;
@@ -24567,7 +25239,7 @@ __decorate([n$2({
 	type: Boolean,
 	reflect: true
 })], RadialInputElement.prototype, "disabled", void 0);
-RadialInputElement = __decorate([t$4(`ixfx-radial-input`)], RadialInputElement);
+RadialInputElement = __decorate([safeCustomElement(`ixfx-radial-input`)], RadialInputElement);
 //#endregion
 //#region src/labelled-radial-input/labelled-radial-input.ts
 let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
@@ -24655,7 +25327,7 @@ let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
 		return numValue.toFixed(2);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display: block;
     min-height: var(--min-height, 60px);
@@ -24747,10 +25419,10 @@ __decorate([n$2({
 	attribute: `aspect-ratio-threshold`
 })], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
 __decorate([r$1()], LabelledRadialInput.prototype, "_isWide", void 0);
-LabelledRadialInput = __decorate([t$4(`ixfx-labelled-radial-input`)], LabelledRadialInput);
+LabelledRadialInput = __decorate([safeCustomElement(`ixfx-labelled-radial-input`)], LabelledRadialInput);
 //#endregion
 //#region src/led.ts
-let LedElement = class LedElement extends i$3 {
+let LedElement = class LedElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.value = 0;
@@ -24796,7 +25468,7 @@ let LedElement = class LedElement extends i$3 {
 		return b`<div part="circle"></div>`;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       --_size: var(--size, 1ex);
       display: inline-block;
@@ -24833,10 +25505,10 @@ __decorate([n$2({
 	type: Number,
 	attribute: `rate`
 })], LedElement.prototype, "rate", void 0);
-LedElement = __decorate([t$4(`ixfx-led`)], LedElement);
+LedElement = __decorate([safeCustomElement(`ixfx-led`)], LedElement);
 //#endregion
 //#region src/menu/menu-bar.ts
-let MenuBar = class MenuBar extends i$3 {
+let MenuBar = class MenuBar extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this._openTrigger = null;
@@ -24899,7 +25571,7 @@ let MenuBar = class MenuBar extends i$3 {
 		return [...this.children].filter((el) => el.tagName === `IXFX-MENU-TRIGGER`);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       align-items: center;
@@ -24916,10 +25588,10 @@ let MenuBar = class MenuBar extends i$3 {
 		return b`<slot role="menubar"></slot>`;
 	}
 };
-MenuBar = __decorate([t$4(`ixfx-menu-bar`)], MenuBar);
+MenuBar = __decorate([safeCustomElement(`ixfx-menu-bar`)], MenuBar);
 //#endregion
 //#region src/menu/menu-check-item.ts
-let MenuCheckItem = class MenuCheckItem extends i$3 {
+let MenuCheckItem = class MenuCheckItem extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.command = ``;
@@ -24975,7 +25647,7 @@ let MenuCheckItem = class MenuCheckItem extends i$3 {
 		return [...mods, key].join(``);
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -25066,7 +25738,7 @@ __decorate([n$2({
 })], MenuCheckItem.prototype, "iconName", void 0);
 __decorate([n$2({ attribute: false })], MenuCheckItem.prototype, "registry", void 0);
 __decorate([n$2({ attribute: false })], MenuCheckItem.prototype, "keyboardManager", void 0);
-MenuCheckItem = __decorate([t$4(`ixfx-menu-check-item`)], MenuCheckItem);
+MenuCheckItem = __decorate([safeCustomElement(`ixfx-menu-check-item`)], MenuCheckItem);
 //#endregion
 //#region src/menu/menu-command-controller.ts
 var MenuCommandController = class {
@@ -25090,35 +25762,9 @@ var MenuCommandController = class {
 	}
 };
 //#endregion
-//#region src/menu/menu-header.ts
-let MenuHeader = class MenuHeader extends i$3 {
-	constructor(..._args) {
-		super(..._args);
-		this.label = ``;
-	}
-	static {
-		this.styles = i$6`
-    :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([t$4(`ixfx-menu-header`)], MenuHeader);
-//#endregion
 //#region src/menu/menu-sub-trigger.ts
 var _MenuSubTrigger;
-let MenuSubTrigger = class MenuSubTrigger extends i$3 {
+let MenuSubTrigger = class MenuSubTrigger extends i$4 {
 	static {
 		_MenuSubTrigger = this;
 	}
@@ -25261,7 +25907,7 @@ let MenuSubTrigger = class MenuSubTrigger extends i$3 {
 		}
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -25371,12 +26017,12 @@ __decorate([r$1()], MenuSubTrigger.prototype, "_hasSubmenu", void 0);
 __decorate([e$4(`slot[name="submenu"]`)], MenuSubTrigger.prototype, "_slot", void 0);
 __decorate([e$4(`.submenu-popover`)], MenuSubTrigger.prototype, "_submenuPopover", void 0);
 __decorate([e$4(`.item`)], MenuSubTrigger.prototype, "_itemEl", void 0);
-MenuSubTrigger = _MenuSubTrigger = __decorate([t$4(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
+MenuSubTrigger = _MenuSubTrigger = __decorate([safeCustomElement(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
 //#endregion
 //#region src/menu/menu-separator.ts
-let MenuSeparator = class MenuSeparator extends i$3 {
+let MenuSeparator = class MenuSeparator extends i$4 {
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       margin: var(--space-xs) 0;
@@ -25392,7 +26038,33 @@ let MenuSeparator = class MenuSeparator extends i$3 {
 		return b`<div class="separator"></div>`;
 	}
 };
-MenuSeparator = __decorate([t$4(`ixfx-menu-separator`)], MenuSeparator);
+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) {
@@ -25402,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`
@@ -25429,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);
@@ -25463,15 +26135,15 @@ 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);
 	});
 }
 //#endregion
 //#region src/menu/menu-radio-item.ts
-let MenuRadioItem = class MenuRadioItem extends i$3 {
+let MenuRadioItem = class MenuRadioItem extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.value = ``;
@@ -25489,7 +26161,7 @@ let MenuRadioItem = class MenuRadioItem extends i$3 {
 		}));
 	}
 	static {
-		this.styles = [tickledItemStyles, i$6`
+		this.styles = [tickledItemStyles, i$7`
     :host {
       display: block;
     }
@@ -25566,10 +26238,10 @@ __decorate([n$2({
 	type: String,
 	attribute: `icon-name`
 })], MenuRadioItem.prototype, "iconName", void 0);
-MenuRadioItem = __decorate([t$4(`ixfx-menu-radio-item`)], MenuRadioItem);
+MenuRadioItem = __decorate([safeCustomElement(`ixfx-menu-radio-item`)], MenuRadioItem);
 //#endregion
 //#region src/menu/menu-radio-group.ts
-let MenuRadioGroup = class MenuRadioGroup extends i$3 {
+let MenuRadioGroup = class MenuRadioGroup extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.name = ``;
@@ -25599,7 +26271,7 @@ let MenuRadioGroup = class MenuRadioGroup extends i$3 {
 		if (changedProperties.has(`value`)) this.updateSlottedValues();
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
     }
@@ -25618,7 +26290,7 @@ let MenuRadioGroup = class MenuRadioGroup extends i$3 {
 __decorate([n$2({ type: String })], MenuRadioGroup.prototype, "name", void 0);
 __decorate([n$2({ type: String })], MenuRadioGroup.prototype, "value", void 0);
 __decorate([r$1()], MenuRadioGroup.prototype, "slottedElements", void 0);
-MenuRadioGroup = __decorate([t$4(`ixfx-menu-radio-group`)], MenuRadioGroup);
+MenuRadioGroup = __decorate([safeCustomElement(`ixfx-menu-radio-group`)], MenuRadioGroup);
 //#endregion
 //#region src/menu/index.ts
 var menu_exports = /* @__PURE__ */ __exportAll$5({
@@ -25639,13 +26311,13 @@ var menu_exports = /* @__PURE__ */ __exportAll$5({
 //#endregion
 //#region src/miller/miller-base.ts
 const EXPAND_DEBOUNCE_MS = 150;
-let MillerBaseElement = class MillerBaseElement extends i$3 {
+let MillerBaseElement = class MillerBaseElement extends i$4 {
 	constructor(..._args) {
 		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();
@@ -25875,7 +26547,7 @@ let MillerBaseElement = class MillerBaseElement extends i$3 {
 	#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));
 	}
@@ -25897,10 +26569,10 @@ let MillerBaseElement = class MillerBaseElement extends i$3 {
 			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();
@@ -26180,9 +26852,9 @@ let MillerBaseElement = class MillerBaseElement extends i$3 {
 		};
 	}
 	#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) {
@@ -26419,7 +27091,7 @@ let MillerBaseElement = class MillerBaseElement extends i$3 {
 	#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);
@@ -26552,10 +27224,10 @@ let MillerBaseElement = class MillerBaseElement extends i$3 {
 	* 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$6`
+		this.styles = [tickledStyles, i$7`
     :host {
       --column-bg: var(--surface-3);
       --column-header-bg: var(--surface-2);
@@ -26674,18 +27346,18 @@ __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);
 __decorate([r$1()], MillerBaseElement.prototype, "_columns", void 0);
 __decorate([r$1()], MillerBaseElement.prototype, "_loadingDepth", void 0);
 __decorate([r$1()], MillerBaseElement.prototype, "_selectedNodes", void 0);
-MillerBaseElement = __decorate([t$4(`ixfx-miller-base`)], MillerBaseElement);
+MillerBaseElement = __decorate([safeCustomElement(`ixfx-miller-base`)], MillerBaseElement);
 //#endregion
 //#region src/miller/miller-list.ts
 /**
@@ -26765,7 +27437,7 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
 		this.styles = [
 			...MillerBaseElement.styles,
 			tickledItemStyles,
-			i$6`
+			i$7`
       .item-list {
         list-style: none;
         margin: 0;
@@ -26846,7 +27518,7 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
 		];
 	}
 };
-MillerListElement = __decorate([t$4(`ixfx-miller-list`)], MillerListElement);
+MillerListElement = __decorate([safeCustomElement(`ixfx-miller-list`)], MillerListElement);
 //#endregion
 //#region src/miller/miller-tree-controller.ts
 /**
@@ -26973,7 +27645,7 @@ var MillerTreeController = class {
 };
 //#endregion
 //#region src/panel/panel-group.ts
-let PanelGroupElement = class PanelGroupElement extends i$3 {
+let PanelGroupElement = class PanelGroupElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.orientation = `horizontal`;
@@ -27015,7 +27687,7 @@ let PanelGroupElement = class PanelGroupElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       flex-direction: column;
@@ -27058,10 +27730,10 @@ __decorate([n$2({
 })], PanelGroupElement.prototype, "allowMultiple", void 0);
 __decorate([n$2()], PanelGroupElement.prototype, "gap", void 0);
 __decorate([o$2({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
-PanelGroupElement = __decorate([t$4(`ixfx-panel-group`)], PanelGroupElement);
+PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
 //#endregion
 //#region src/panel/panel.ts
-let PanelElement = class PanelElement extends i$3 {
+let PanelElement = class PanelElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.collapsed = false;
@@ -27144,7 +27816,7 @@ let PanelElement = class PanelElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       flex-direction: column;
@@ -27459,7 +28131,7 @@ __decorate([n$2({
 	reflect: true
 })], PanelElement.prototype, "variant", void 0);
 __decorate([r$1()], PanelElement.prototype, "_isVertical", void 0);
-PanelElement = __decorate([t$4(`ixfx-panel`)], PanelElement);
+PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
 //#endregion
 //#region node_modules/.pnpm/@ixfx+modulation@0.56.12/node_modules/@ixfx/modulation/dist/chunk-pbuEa-1d.js
 var __defProp = Object.defineProperty;
@@ -28233,7 +28905,7 @@ function renderHistMiddle(points, crs, barW, mid, ageStyle) {
     />`;
 	});
 }
-let PlotSingleAxis = class PlotSingleAxis extends i$3 {
+let PlotSingleAxis = class PlotSingleAxis extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.drawStyle = `line-sharp`;
@@ -28246,7 +28918,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$3 {
 		this.paused = false;
 		this.clickPauses = false;
 		this.shaded = false;
-		this.areaColor = "";
+		this.areaColor = ``;
 		this.colorMode = `fixed`;
 		this.colorEasing = ``;
 		this.colorScale = ``;
@@ -28289,7 +28961,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$3 {
 	#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;
@@ -28320,7 +28992,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$3 {
 			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);
 		}
 	}
@@ -28458,7 +29130,7 @@ let PlotSingleAxis = class PlotSingleAxis extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: inline-block;
       width: 100%;
@@ -28502,18 +29174,18 @@ __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);
 __decorate([r$1()], PlotSingleAxis.prototype, "_width", void 0);
 __decorate([r$1()], PlotSingleAxis.prototype, "_height", void 0);
-PlotSingleAxis = __decorate([t$4(`ixfx-plot-single-axis`)], PlotSingleAxis);
+PlotSingleAxis = __decorate([safeCustomElement(`ixfx-plot-single-axis`)], PlotSingleAxis);
 //#endregion
 //#region src/plots/xy-axis.ts
-let PlotXyAxis = class PlotXyAxis extends i$3 {
+let PlotXyAxis = class PlotXyAxis extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.drawStyle = `circles`;
@@ -28734,7 +29406,7 @@ let PlotXyAxis = class PlotXyAxis extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       width: 100%;
@@ -28780,7 +29452,7 @@ __decorate([n$2({ attribute: `color-easing` })], PlotXyAxis.prototype, "colorEas
 __decorate([n$2({ attribute: `color-scale` })], PlotXyAxis.prototype, "colorScale", void 0);
 __decorate([r$1()], PlotXyAxis.prototype, "_width", void 0);
 __decorate([r$1()], PlotXyAxis.prototype, "_height", void 0);
-PlotXyAxis = __decorate([t$4(`ixfx-plot-xy-axis`)], PlotXyAxis);
+PlotXyAxis = __decorate([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
 //#endregion
 //#region src/polar-pad/polar-pad.ts
 /**
@@ -28914,7 +29586,7 @@ function quantiseRadius(radius, stops) {
 	const step = 1 / stops;
 	return Math.round(radius / step) * step;
 }
-let PolarPad = class PolarPad extends i$3 {
+let PolarPad = class PolarPad extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.angle = 0;
@@ -29022,7 +29694,7 @@ let PolarPad = class PolarPad extends i$3 {
 		this._uid = Math.random().toString(36).slice(2, 8);
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       width: 200px;
@@ -29311,10 +29983,10 @@ __decorate([n$2({
 	type: Number,
 	attribute: `stops-radius`
 })], PolarPad.prototype, "stopsRadius", void 0);
-PolarPad = __decorate([t$4(`ixfx-polar-pad`)], PolarPad);
+PolarPad = __decorate([safeCustomElement(`ixfx-polar-pad`)], PolarPad);
 //#endregion
 //#region src/styles/tooltip.ts
-const tooltipValueStyles = i$6`
+const tooltipValueStyles = i$7`
 
   output.tooltip {
     user-select: none;
@@ -29417,7 +30089,7 @@ const tooltipValueStyles = i$6`
 function normalize(value, min, max) {
 	return max === min ? 0 : (value - min) / (max - min);
 }
-let RangeInput = class RangeInput extends i$3 {
+let RangeInput = class RangeInput extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.min = 0;
@@ -29560,7 +30232,7 @@ let RangeInput = class RangeInput extends i$3 {
     `;
 	}
 	static {
-		this.styles = [tooltipValueStyles, i$6`
+		this.styles = [tooltipValueStyles, i$7`
     :host {
       display: block;
       container-type: size;
@@ -29863,7 +30535,7 @@ __decorate([n$2({
 __decorate([n$2({ attribute: false })], RangeInput.prototype, "labelFormatter", void 0);
 __decorate([e$4(`input`)], RangeInput.prototype, "_inputEl", void 0);
 __decorate([e$4(`ixfx-tooltip`)], RangeInput.prototype, "_tooltipEl", void 0);
-RangeInput = __decorate([t$4(`ixfx-range-input`)], RangeInput);
+RangeInput = __decorate([safeCustomElement(`ixfx-range-input`)], RangeInput);
 //#endregion
 //#region src/util/drag.ts
 function getCoordinates(event) {
@@ -29900,7 +30572,7 @@ function near(target, range) {
 }
 //#endregion
 //#region src/range/range-multi.ts
-let RangeMultiElement = class RangeMultiElement extends i$3 {
+let RangeMultiElement = class RangeMultiElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tooltip = true;
@@ -30206,7 +30878,7 @@ let RangeMultiElement = class RangeMultiElement extends i$3 {
 		this.styles = [
 			tooltipValueStyles,
 			prominenceStyles,
-			i$6`
+			i$7`
     :host {
       display: grid;
       --value-label-color: unset;
@@ -30376,10 +31048,10 @@ __decorate([n$2({ type: Number })], RangeMultiElement.prototype, "max", null);
 __decorate([n$2({ type: Number })], RangeMultiElement.prototype, "min", null);
 __decorate([t$3({ capture: true })], RangeMultiElement.prototype, "_onInput", null);
 __decorate([t$3({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
-RangeMultiElement = __decorate([t$4(`ixfx-range-multi`)], RangeMultiElement);
+RangeMultiElement = __decorate([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
 //#endregion
 //#region src/range/range.ts
-let RangeElement = class RangeElement extends i$3 {
+let RangeElement = class RangeElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tooltip = true;
@@ -30424,7 +31096,7 @@ let RangeElement = class RangeElement extends i$3 {
 		this.styles = [
 			prominenceStyles,
 			tooltipValueStyles,
-			i$6`
+			i$7`
     :host {
       display: inline-block;
       --value-label-color: unset;
@@ -30504,10 +31176,10 @@ __decorate([n$2({ type: Number })], RangeElement.prototype, "min", void 0);
 __decorate([n$2({ type: Number })], RangeElement.prototype, "max", void 0);
 __decorate([n$2({ type: Number })], RangeElement.prototype, "value", null);
 __decorate([n$2({ type: Number })], RangeElement.prototype, "step", void 0);
-RangeElement = __decorate([t$4(`ixfx-range`)], RangeElement);
+RangeElement = __decorate([safeCustomElement(`ixfx-range`)], RangeElement);
 //#endregion
 //#region src/selecthorizontal.ts
-let SelectHorizontalElement = class SelectHorizontalElement extends i$3 {
+let SelectHorizontalElement = class SelectHorizontalElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.editMode = false;
@@ -30521,7 +31193,7 @@ let SelectHorizontalElement = class SelectHorizontalElement extends i$3 {
     `;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display: flex;
     overflow: scroll;
@@ -30540,10 +31212,10 @@ let SelectHorizontalElement = class SelectHorizontalElement extends i$3 {
 	}
 };
 __decorate([n$2({ type: Boolean })], SelectHorizontalElement.prototype, "editMode", void 0);
-SelectHorizontalElement = __decorate([t$4(`ixfx-selecthorizontal-element`)], SelectHorizontalElement);
+SelectHorizontalElement = __decorate([safeCustomElement(`ixfx-selecthorizontal-element`)], SelectHorizontalElement);
 //#endregion
 //#region src/snap-container/snap-container.ts
-let SnapContainer = class SnapContainer extends i$3 {
+let SnapContainer = class SnapContainer extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.orientation = `horizontal`;
@@ -30659,7 +31331,7 @@ let SnapContainer = class SnapContainer extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: block;
       position: relative;
@@ -30831,10 +31503,10 @@ __decorate([n$2({
 })], SnapContainer.prototype, "clickSnap", void 0);
 __decorate([n$2({ type: Number })], SnapContainer.prototype, "snap", void 0);
 __decorate([r$1()], SnapContainer.prototype, "_dragging", void 0);
-SnapContainer = __decorate([t$4(`ixfx-snap-container`)], SnapContainer);
+SnapContainer = __decorate([safeCustomElement(`ixfx-snap-container`)], SnapContainer);
 //#endregion
 //#region src/split-layout/split-layout.ts
-let SplitLayoutElement = class SplitLayoutElement extends i$3 {
+let SplitLayoutElement = class SplitLayoutElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.layout = `vertical`;
@@ -31004,7 +31676,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$3 {
 			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;
@@ -31020,7 +31692,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$3 {
 					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);
@@ -31265,7 +31937,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$3 {
     </div>`;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       --handle-size: 2px;
       --handle-colour: var(--surface-5);
@@ -31369,10 +32041,10 @@ __decorate([n$2({ type: String })], SplitLayoutElement.prototype, "maxSizeA", vo
 __decorate([n$2({ type: String })], SplitLayoutElement.prototype, "minSizeB", void 0);
 __decorate([n$2({ type: String })], SplitLayoutElement.prototype, "maxSizeB", void 0);
 __decorate([r$1()], SplitLayoutElement.prototype, "_hasCorner", void 0);
-SplitLayoutElement = __decorate([t$4(`ixfx-split-layout`)], SplitLayoutElement);
+SplitLayoutElement = __decorate([safeCustomElement(`ixfx-split-layout`)], SplitLayoutElement);
 //#endregion
 //#region src/swipe/swipe.ts
-let SwipeElement = class SwipeElement extends i$3 {
+let SwipeElement = class SwipeElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.barSpacing = 20;
@@ -31520,7 +32192,7 @@ let SwipeElement = class SwipeElement extends i$3 {
 		})}`;
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: block;
       user-select: none;
@@ -31566,10 +32238,10 @@ __decorate([n$2({ type: Number })], SwipeElement.prototype, "barSpacing", void 0
 __decorate([n$2({ type: Number })], SwipeElement.prototype, "barWidth", void 0);
 __decorate([n$2({ type: Number })], SwipeElement.prototype, "debounceMs", void 0);
 __decorate([n$2({ type: Number })], SwipeElement.prototype, "retractDurationMs", void 0);
-SwipeElement = __decorate([t$4(`ixfx-swipe`)], SwipeElement);
+SwipeElement = __decorate([safeCustomElement(`ixfx-swipe`)], SwipeElement);
 //#endregion
 //#region src/tabs/tab-list-item.ts
-let TabListItemElement = class TabListItemElement extends i$3 {
+let TabListItemElement = class TabListItemElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.closeable = false;
@@ -31642,7 +32314,7 @@ let TabListItemElement = class TabListItemElement extends i$3 {
 		this.remove();
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
       :host {
         --selected-colour: var(--accent);
         --selected-border-width: 1px;
@@ -31728,10 +32400,10 @@ __decorate([n$2({
 })], TabListItemElement.prototype, "commandActive", void 0);
 __decorate([n$2({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([r$1()], TabListItemElement.prototype, "_compact", void 0);
-TabListItemElement = __decorate([t$4(`ixfx-tab-list-item`)], TabListItemElement);
+TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/tabs/tab-list.ts
-let TabListElement = class TabListElement extends i$3 {
+let TabListElement = class TabListElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.orientation = `horizontal`;
@@ -31797,7 +32469,7 @@ let TabListElement = class TabListElement extends i$3 {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
-		this.classList.toggle("scrollable", this.scrollable);
+		this.classList.toggle(`scrollable`, this.scrollable);
 	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
@@ -31851,7 +32523,7 @@ let TabListElement = class TabListElement extends i$3 {
 	}
 	#onSlotClick;
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: inline-block;
       --activated-colour: var(--accent);
@@ -31925,15 +32597,15 @@ let TabListElement = class TabListElement extends i$3 {
 __decorate([n$2({ type: String })], TabListElement.prototype, "orientation", void 0);
 __decorate([n$2({ type: Boolean })], TabListElement.prototype, "flip", void 0);
 __decorate([n$2({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
-TabListElement = __decorate([t$4(`ixfx-tab-list`)], TabListElement);
+TabListElement = __decorate([safeCustomElement(`ixfx-tab-list`)], TabListElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
-let TabPanelElement = class TabPanelElement extends i$3 {
+let TabPanelElement = class TabPanelElement extends i$4 {
 	render() {
 		return b`<slot></slot>`;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display:none;
     height:100%;
@@ -31947,10 +32619,10 @@ let TabPanelElement = class TabPanelElement extends i$3 {
   `;
 	}
 };
-TabPanelElement = __decorate([t$4(`ixfx-tab-panel`)], TabPanelElement);
+TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
 //#endregion
 //#region src/tabs/tab-panels.ts
-let TabPanelsElement = class TabPanelsElement extends i$3 {
+let TabPanelsElement = class TabPanelsElement extends i$4 {
 	render() {
 		return b`<slot></slot>`;
 	}
@@ -31993,7 +32665,7 @@ let TabPanelsElement = class TabPanelsElement extends i$3 {
 		return found;
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
   :host {
     display: block;
   }
@@ -32002,7 +32674,71 @@ let TabPanelsElement = class TabPanelsElement extends i$3 {
 	}
 };
 __decorate([o$2()], TabPanelsElement.prototype, "_listItems", void 0);
-TabPanelsElement = __decorate([t$4(`ixfx-tab-panels`)], TabPanelsElement);
+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 = [
@@ -32014,15 +32750,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,
@@ -32031,7 +32767,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;
@@ -32048,14 +32784,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;
@@ -32065,8 +32801,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;
@@ -32075,8 +32811,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;
@@ -32090,7 +32826,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) {
@@ -32102,7 +32838,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) {
@@ -32111,13 +32847,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;
@@ -32129,7 +32865,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) {
@@ -32154,8 +32890,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++) {
@@ -32163,7 +32899,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;
@@ -32172,13 +32908,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) {
@@ -32232,8 +32968,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;
@@ -32244,8 +32980,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);
@@ -32253,7 +32989,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`,
@@ -32270,12 +33006,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) */
@@ -32284,13 +33020,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`,
@@ -32323,17 +33063,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`.
@@ -32341,7 +33083,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;
@@ -32349,7 +33091,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),
@@ -32358,7 +33100,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;
@@ -32367,12 +33109,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) => {
@@ -32433,7 +33175,6 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 				currentLogicalX: lx,
 				currentY: ly
 			};
-			return;
 		}
 	}, { signal });
 	vcanvasEl.addEventListener(`pointermove`, (e) => {
@@ -32506,7 +33247,6 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 				end: newEnd
 			} : ev);
 			vcanvasEl.invalidateAll();
-			return;
 		}
 	}, { signal });
 	vcanvasEl.addEventListener(`pointerup`, (e) => {
@@ -32579,8 +33319,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);
@@ -32604,25 +33344,25 @@ 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$6`
+const timelineStyles = i$7`
   :host {
     /* Layout */
     --timeline-axis-height: 24px;
@@ -32779,7 +33519,7 @@ const timelineStyles = i$6`
 const MIN_TRACK_HEIGHT = 24;
 /** How close to the bottom edge the pointer must be (px) to trigger resize */
 const EDGE_ZONE_PX = 6;
-let TimelineTrackTabElement = class TimelineTrackTabElement extends i$3 {
+let TimelineTrackTabElement = class TimelineTrackTabElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.label = ``;
@@ -32824,7 +33564,7 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i$3 {
 		};
 	}
 	static {
-		this.styles = i$6`
+		this.styles = i$7`
     :host {
       display: flex;
       align-items: center;
@@ -32943,14 +33683,14 @@ __decorate([n$2({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "resizable", void 0);
-TimelineTrackTabElement = __decorate([t$4(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+TimelineTrackTabElement = __decorate([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
 //#endregion
 //#region src/timeline/timeline-element.ts
 /** Reasonable maximum ppu to prevent infinite zoom-in */
 const MAX_PPU = 1e4;
 /** Minimum rendered track height (~1.5em) at max zoom-out */
 const MIN_TRACK_RENDER_HEIGHT = 24;
-let IxfxTimelineElement = class IxfxTimelineElement extends i$3 {
+let IxfxTimelineElement = class IxfxTimelineElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.tracks = [];
@@ -33679,74 +34419,269 @@ __decorate([r$1()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void
 __decorate([r$1()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
 __decorate([r$1()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
 __decorate([r$1()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
-IxfxTimelineElement = __decorate([t$4(`ixfx-timeline`)], IxfxTimelineElement);
+IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
 //#endregion
-//#region src/timeline/timeline-controller.ts
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
 /**
-* 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);
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const i = e$3(class extends i$3 {
+	constructor() {
+		super(...arguments), this.key = A;
 	}
-	/** Update the tempo (BPM) for musical time calculations. */
-	setTempo(bpm) {
-		this.#bpm = bpm;
-		this.#updateFormatLabel();
+	render(r, t) {
+		return this.key = r, t;
 	}
-	/** Update the time signature for musical time calculations. */
-	setTimeSignature(numerator, denominator) {
-		this.#timeSignatureNumerator = numerator;
-		this.#timeSignatureDenominator = denominator;
-		this.#updateFormatLabel();
+	update(r, [t, e]) {
+		return t !== this.key && (p(r), this.key = t), e;
 	}
-	/** Set the visible view range on the timeline. */
-	setViewRange(range) {
-		this.#host.setViewRange(range);
+});
+//#endregion
+//#region src/transitory-label/transitory-label.ts
+let TransitoryLabelElement = class TransitoryLabelElement extends i$4 {
+	constructor(..._args) {
+		super(..._args);
+		this.text = ``;
+		this.effect = `fade`;
+		this.duration = 300;
+		this.easing = `ease`;
+		this._currentText = ``;
+		this._outgoingText = ``;
+		this._transitionId = 0;
+		this._queue = [];
+		this.#onOutgoingEnd = () => {
+			this._onTransitionEnd();
+		};
+		this.#onLastCharOut = () => {
+			this._onTransitionEnd();
+		};
 	}
-	/** Clean up any resources held by the controller. */
-	dispose() {
-		this.#host.removeEventListener(`track-select`, this.#onTrackSelect);
+	setText(msg, effect) {
+		this._pendingEffect = effect;
+		this.text = msg;
 	}
-	#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}`;
-		};
+	updated(changed) {
+		if (changed.has(`text`) && this.text !== this._currentText) {
+			const effect = this._pendingEffect ?? this.effect;
+			this._pendingEffect = void 0;
+			if (this._activeEffect !== void 0) this._queue.push({
+				text: this.text,
+				effect
+			});
+			else this._startTransition(this.text, effect);
+		}
+	}
+	_startTransition(newText, effect) {
+		const prevText = this._currentText;
+		this._currentText = newText;
+		this._outgoingText = prevText;
+		if (prevText !== ``) {
+			this._transitionId++;
+			this._activeEffect = effect;
+		}
+	}
+	_onTransitionEnd() {
+		this._outgoingText = ``;
+		this._activeEffect = void 0;
+		if (this._queue.length > 0) {
+			const next = this._queue.shift();
+			this._startTransition(next.text, next.effect);
+		}
+	}
+	#onOutgoingEnd;
+	#onLastCharOut;
+	#renderCharSwap() {
+		const charDuration = Math.round(this.duration * .3);
+		const charStagger = Math.round(this.duration * .1);
+		const currentChars = this._currentText.split(``);
+		const outgoingChars = this._outgoingText.split(``);
+		const lastIdx = outgoingChars.length - 1;
+		const charStyle = (i) => `animation-duration:${charDuration}ms;animation-delay:${i * charStagger}ms;animation-timing-function:${this.easing}`;
+		return b`
+      ${i(`cc${this._transitionId}`, b`
+        <span class="layer current char-swap">
+          ${currentChars.map((ch, i) => b`<span class="char in" style=${charStyle(i)}>${ch}</span>`)}
+        </span>
+      `)}
+      ${this._outgoingText ? i(this._transitionId, b`
+          <span class="layer outgoing char-swap">
+            ${outgoingChars.map((ch, i) => b`<span
+                class="char out"
+                style=${charStyle(i)}
+                @animationend=${i === lastIdx ? this.#onLastCharOut : void 0}
+              >${ch}</span>`)}
+          </span>
+        `) : A}
+    `;
+	}
+	render() {
+		if (this._activeEffect === `character-swap`) return b`<span class="container">${this.#renderCharSwap()}</span>`;
+		const effect = this._activeEffect ?? ``;
+		const durStyle = this._activeEffect ? `animation-duration:${this.duration}ms;animation-timing-function:${this.easing}` : ``;
+		return b`
+      <span class="container">
+        ${this._outgoingText ? i(this._transitionId, b`
+            <span class="layer outgoing ${effect}" style=${durStyle} @animationend=${this.#onOutgoingEnd}>
+              ${this._outgoingText}
+            </span>
+          `) : A}
+        ${i(`c${this._transitionId}`, b`
+          <span class="layer current ${effect}" style=${durStyle}>
+            ${this._currentText}
+          </span>
+        `)}
+      </span>
+    `;
+	}
+	static {
+		this.styles = i$7`
+    :host {
+      display: inline-block;
+      --transitory-label-easing: ease;
+    }
+
+    .container {
+      display: inline-grid;
+      overflow: hidden;
+    }
+
+    .layer {
+      grid-area: 1 / 1;
+      white-space: nowrap;
+    }
+
+    .layer.outgoing {
+      pointer-events: none;
+    }
+
+    /* slide-right */
+    .layer.current.slide-right {
+      transform: translateX(-100%);
+      animation: tl-slide-in-left var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-right {
+      animation: tl-slide-out-right var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-left {
+      from { transform: translateX(-100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-right {
+      from { transform: translateX(0); }
+      to   { transform: translateX(100%); }
+    }
+
+    /* slide-left */
+    .layer.current.slide-left {
+      transform: translateX(100%);
+      animation: tl-slide-in-right var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-left {
+      animation: tl-slide-out-left var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-right {
+      from { transform: translateX(100%); }
+      to   { transform: translateX(0); }
+    }
+    @keyframes tl-slide-out-left {
+      from { transform: translateX(0); }
+      to   { transform: translateX(-100%); }
+    }
+
+    /* slide-up */
+    .layer.current.slide-up {
+      transform: translateY(100%);
+      animation: tl-slide-in-bottom var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-up {
+      animation: tl-slide-out-top var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-bottom {
+      from { transform: translateY(100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-top {
+      from { transform: translateY(0); }
+      to   { transform: translateY(-100%); }
+    }
+
+    /* slide-down */
+    .layer.current.slide-down {
+      transform: translateY(-100%);
+      animation: tl-slide-in-top var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.slide-down {
+      animation: tl-slide-out-bottom var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-slide-in-top {
+      from { transform: translateY(-100%); }
+      to   { transform: translateY(0); }
+    }
+    @keyframes tl-slide-out-bottom {
+      from { transform: translateY(0); }
+      to   { transform: translateY(100%); }
+    }
+
+    /* fade */
+    .layer.current.fade {
+      opacity: 0;
+      animation: tl-fade-in var(--transitory-label-easing) forwards;
+    }
+    .layer.outgoing.fade {
+      animation: tl-fade-out var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-fade-in {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    @keyframes tl-fade-out {
+      from { opacity: 1; }
+      to   { opacity: 0; }
+    }
+
+    /* character-swap */
+    .char {
+      display: inline-block;
+    }
+
+    .char.in {
+      opacity: 0;
+      animation: tl-char-in var(--transitory-label-easing) forwards;
+    }
+
+    .char.out {
+      animation: tl-char-out var(--transitory-label-easing) forwards;
+    }
+
+    @keyframes tl-char-in {
+      from { opacity: 0; transform: translateY(-0.3em) scale(0.8); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes tl-char-out {
+      from { opacity: 1; transform: translateY(0) scale(1); }
+      to   { opacity: 0; transform: translateY(0.3em) scale(0.8); }
+    }
+  `;
 	}
 };
+__decorate([n$2({ type: String })], TransitoryLabelElement.prototype, "text", void 0);
+__decorate([n$2({ type: String })], TransitoryLabelElement.prototype, "effect", void 0);
+__decorate([n$2({ type: Number })], TransitoryLabelElement.prototype, "duration", void 0);
+__decorate([n$2({ type: String })], TransitoryLabelElement.prototype, "easing", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_currentText", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_outgoingText", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_activeEffect", void 0);
+__decorate([r$1()], TransitoryLabelElement.prototype, "_transitionId", void 0);
+TransitoryLabelElement = __decorate([safeCustomElement(`ixfx-transitory-label`)], TransitoryLabelElement);
 //#endregion
 //#region src/tree/tree-base.ts
-let TreeBaseElement = class TreeBaseElement extends i$3 {
+let TreeBaseElement = class TreeBaseElement extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.exclusivity = `none`;
@@ -33855,7 +34790,7 @@ let TreeBaseElement = class TreeBaseElement extends i$3 {
 					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;
 				}
@@ -34511,7 +35446,7 @@ let TreeBaseElement = class TreeBaseElement extends i$3 {
 		this.styles = [
 			tickledStyles,
 			tickledItemStyles,
-			i$6`
+			i$7`
       :host {
       --tree-bg: var(--surface-3);
       --tree-text: var(--surface-3-text);
@@ -34639,7 +35574,7 @@ __decorate([n$2({
 })], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
 __decorate([r$1()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([r$1()], TreeBaseElement.prototype, "_focusedDepth", void 0);
-TreeBaseElement = __decorate([t$4(`ixfx-tree-base`)], TreeBaseElement);
+TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
 //#endregion
 //#region src/tree/tree-controller.ts
 var TreeController = class {
@@ -34808,7 +35743,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
     `;
 	}
 	static {
-		this.styles = [...TreeBaseElement.styles, i$6`
+		this.styles = [...TreeBaseElement.styles, i$7`
       .tree-caret {
         display: inline-flex;
         align-items: center;
@@ -34878,7 +35813,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
     `];
 	}
 };
-TreeListElement = __decorate([t$4(`ixfx-tree-list`)], TreeListElement);
+TreeListElement = __decorate([safeCustomElement(`ixfx-tree-list`)], TreeListElement);
 //#endregion
 //#region src/util/checkbox.ts
 function isCheckboxLike(el) {
@@ -34932,12 +35867,12 @@ function monitorIndeterminate(targetElOrQuery, watchedElsOrQueries) {
 	};
 }
 //#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/class-map.js
+//#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.js
 /**
 * @license
 * Copyright 2018 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const e = e$3(class extends i$2 {
+*/ const e = e$3(class extends i$3 {
 	constructor(t) {
 		if (super(t), t.type !== t$2.ATTRIBUTE || "class" !== t.name || t.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
 	}
@@ -34970,7 +35905,7 @@ function isNumeric(str) {
 //#endregion
 //#region src/util/tooltip.ts
 var _TooltipElement;
-let TooltipElement = class TooltipElement extends i$3 {
+let TooltipElement = class TooltipElement extends i$4 {
 	static {
 		_TooltipElement = this;
 	}
@@ -34994,7 +35929,7 @@ let TooltipElement = class TooltipElement extends i$3 {
 	}
 	#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>`;
 	}
@@ -35033,7 +35968,576 @@ __decorate([n$2({ type: String })], TooltipElement.prototype, "orientation", voi
 __decorate([n$2({ type: String })], TooltipElement.prototype, "anchor", void 0);
 __decorate([n$2()], TooltipElement.prototype, "value", void 0);
 __decorate([n$2({ type: String })], TooltipElement.prototype, "icon", void 0);
-TooltipElement = _TooltipElement = __decorate([t$4(`ixfx-tooltip`)], TooltipElement);
+TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
+//#endregion
+//#region src/vertical-list/vertical-list.ts
+const ITEM_SELECTOR = `li, [data-list-item]`;
+function isMultiMode(mode) {
+	return mode === `checked` || mode === `vscode` || mode === `standard`;
+}
+let VerticalListElement = class VerticalListElement extends i$4 {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.tickled = new TickledController(this, {
+			getItems: () => this._getVisibleItems().map((el) => ({
+				id: el,
+				enabled: true
+			})),
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates()
+		});
+		this._onPointerOver = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this.tickled.handlePointerEnter(item);
+		};
+		this._onPointerLeave = (e) => {
+			this.tickled.handlePointerLeave(e);
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) {
+				e.preventDefault();
+				this._openSearch();
+				return;
+			}
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) {
+					e.preventDefault();
+					this._selectAll();
+				}
+				return;
+			}
+			if (this._searchVisible) return;
+			switch (e.key) {
+				case `ArrowDown`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`next`);
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this._rangeSelectTo(cur);
+					}
+					break;
+				case `ArrowUp`:
+					e.preventDefault();
+					this.tickled.handleKeyboardNavigation(`previous`);
+					if (e.shiftKey && this.interactionMode === `vscode`) {
+						const cur = this.tickled.tickledId;
+						if (cur) this._rangeSelectTo(cur);
+					}
+					break;
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._dispatch(`list-item-click`, { item: id });
+						this._activateItem(id);
+					}
+					break;
+				}
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this._handleSpaceKey(id);
+					}
+					break;
+				}
+				case `Escape`:
+					this._clearSelection();
+					break;
+			}
+		};
+		this._onClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (!item) return;
+			this._dispatch(`list-item-click`, { item });
+			this._handleClickSelection(item, e);
+		};
+		this._onDblClick = (e) => {
+			const item = this._findListItem(e.composedPath());
+			if (item) this._activateItem(item);
+		};
+		this._onSearchInput = (e) => {
+			const input = e.target;
+			this._searchQuery = input.value;
+			this.#search?.setQuery(this._searchQuery);
+		};
+		this._onSearchKeydown = (e) => {
+			if (e.key === `Escape`) {
+				e.stopPropagation();
+				this._closeSearch();
+			} else if (e.key === `ArrowDown`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`next`);
+			} else if (e.key === `ArrowUp`) {
+				e.preventDefault();
+				this.tickled.handleKeyboardNavigation(`previous`);
+			} else if (e.key === `Enter`) {
+				e.preventDefault();
+				e.stopPropagation();
+				const id = this.tickled.tickledId ?? this._getVisibleItems()[0];
+				if (id) {
+					this._dispatch(`list-item-click`, { item: id });
+					this._activateItem(id);
+					this._closeSearch();
+				}
+			}
+		};
+	}
+	#search;
+	#selectionAnchor;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		this.addEventListener(`pointerover`, this._onPointerOver);
+		this.addEventListener(`pointerleave`, this._onPointerLeave);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`click`, this._onClick);
+		this.addEventListener(`dblclick`, this._onDblClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`pointerover`, this._onPointerOver);
+		this.removeEventListener(`pointerleave`, this._onPointerLeave);
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`click`, this._onClick);
+		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.#search?.dispose();
+		this.#search = void 0;
+	}
+	firstUpdated() {
+		this.#search = createElementIncrSearch({
+			container: this,
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			getKey: (el) => el.getAttribute(`data-key`) ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: `vertical-list-search`
+		});
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`interactionMode`)) {
+			this.#selectionAnchor = void 0;
+			this._clearSelection();
+		}
+	}
+	/** 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`);
+			li.textContent = item;
+			this.appendChild(li);
+		} else this.appendChild(item);
+		if (this.interactionMode === `checked`) this._syncCheckboxes();
+	}
+	removeItem(item) {
+		item.remove();
+	}
+	clearItems() {
+		this.replaceChildren();
+		this.#selectionAnchor = void 0;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
+	}
+	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;
+		const next = new Set(this._selectedItems);
+		next.delete(item);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	clearSelection() {
+		this._clearSelection();
+	}
+	selectAll() {
+		if ((this.selectionMode === `multiple` || isMultiMode(this.interactionMode)) && this.selectionMode !== `none`) this._selectAll();
+	}
+	_replaceSelection(item) {
+		if (this.selectionMode === `none`) return;
+		const previous = this._selectedItems;
+		const next = new Set([item]);
+		this._selectedItems = next;
+		this.#selectionAnchor = item;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_toggleItem(item) {
+		const effectiveMultiple = this.selectionMode === `multiple` || isMultiMode(this.interactionMode);
+		if (this.selectionMode === `none` && this.interactionMode !== `checked`) return;
+		const previous = this._selectedItems;
+		const next = new Set(this._selectedItems);
+		if (next.has(item)) next.delete(item);
+		else {
+			if (!effectiveMultiple) next.clear();
+			next.add(item);
+		}
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_rangeSelectTo(item) {
+		if (this.selectionMode === `none`) return;
+		if (!this.#selectionAnchor) {
+			this._replaceSelection(item);
+			return;
+		}
+		const visible = this._getVisibleItems();
+		const anchorIdx = visible.indexOf(this.#selectionAnchor);
+		const targetIdx = visible.indexOf(item);
+		if (anchorIdx === -1 || targetIdx === -1) {
+			this._replaceSelection(item);
+			return;
+		}
+		const start = Math.min(anchorIdx, targetIdx);
+		const end = Math.max(anchorIdx, targetIdx);
+		const previous = this._selectedItems;
+		const next = new Set(visible.slice(start, end + 1));
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_clearSelection() {
+		if (this._selectedItems.size === 0) return;
+		const previous = this._selectedItems;
+		this._selectedItems = /* @__PURE__ */ new Set();
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: /* @__PURE__ */ new Set(),
+			previous
+		});
+	}
+	_selectAll() {
+		const visible = this._getVisibleItems();
+		if (visible.length === 0) return;
+		const previous = this._selectedItems;
+		const next = new Set(visible);
+		this._selectedItems = next;
+		this._syncItemStates();
+		this._dispatch(`list-select`, {
+			selected: next,
+			previous
+		});
+	}
+	_handleClickSelection(item, e) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (this.selectionMode === `none` && mode !== `checked`) return;
+		switch (mode) {
+			case `implicit`:
+				this._replaceSelection(item);
+				break;
+			case `standard`:
+			case `vscode`:
+				if (e.ctrlKey || e.metaKey) {
+					if (this.selectionMode === `multiple` || mode === `vscode`) this._toggleItem(item);
+				} else if (e.shiftKey && (this.selectionMode === `multiple` || mode === `vscode`)) this._rangeSelectTo(item);
+				else this._replaceSelection(item);
+				break;
+			case `checked`: break;
+		}
+	}
+	_handleSpaceKey(item) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (mode === `implicit`) this._replaceSelection(item);
+		else this._toggleItem(item);
+	}
+	_getVisibleItems() {
+		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {
+			if (el.hidden) return false;
+			if (this.filterPredicate && !this.filterPredicate(el)) return false;
+			return true;
+		});
+	}
+	_syncItemStates() {
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this._selectedItems.has(el));
+			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, this._selectedItems.has(el));
+			else el.removeAttribute(`data-checked`);
+		}
+		this.dataset.inputMode = this.tickled.inputMode;
+		this._syncCheckboxes();
+	}
+	_syncCheckboxes() {
+		const inCheckedMode = this.interactionMode === `checked`;
+		for (const el of this.querySelectorAll(`li`)) {
+			let cb = el.querySelector(`input.ixfx-list-checkbox`);
+			if (inCheckedMode) {
+				if (!cb) {
+					cb = document.createElement(`input`);
+					cb.type = `checkbox`;
+					cb.className = `ixfx-list-checkbox`;
+					cb.style.cssText = `flex-shrink:0;margin:0 6px 0 0;cursor:pointer;accent-color:var(--accent,#60a5fa);pointer-events:auto`;
+					cb.tabIndex = -1;
+					cb.addEventListener(`click`, (e) => {
+						e.stopPropagation();
+						this._toggleItem(el);
+					});
+					el.prepend(cb);
+				}
+				cb.checked = this._selectedItems.has(el);
+			} else if (cb) cb.remove();
+		}
+	}
+	_findListItem(path) {
+		for (const target of path) {
+			if (!(target instanceof Element)) continue;
+			if (target === this) break;
+			if (target.parentElement === this && target.matches(ITEM_SELECTOR)) return target;
+		}
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_openSearch() {
+		this._searchVisible = true;
+		this.updateComplete.then(() => this._searchInputEl?.focus());
+	}
+	_closeSearch() {
+		this._searchVisible = false;
+		this._searchQuery = ``;
+		this.#search?.clearQuery();
+		this.focus();
+	}
+	_activateItem(item) {
+		if (this.interactionMode !== `manual`) this._replaceSelection(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	static {
+		this.styles = i$7`
+    :host {
+      display: block;
+      position: relative;
+      background: var(--list-bg, var(--surface-3));
+      color: var(--list-text, var(--surface-3-text));
+      border-radius: var(--list-radius, var(--radius-s));
+      border: 1px solid var(--list-border, var(--border));
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      box-sizing: border-box;
+      outline: none;
+    }
+
+    :host(:focus-visible) {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+
+    .container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      box-sizing: border-box;
+    }
+
+    ::slotted([hidden]) {
+      display: none !important;
+    }
+
+    ::slotted(li) {
+      display: flex;
+      align-items: center;
+      padding: var(--list-item-padding, 4px var(--space-m, 8px));
+      min-height: var(--list-item-height, 28px);
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      box-sizing: border-box;
+      outline: 1px solid transparent;
+    }
+
+    /* Custom shadow-DOM components handle their own internal layout/padding */
+    ::slotted([data-list-item]) {
+      display: block;
+      cursor: pointer;
+      user-select: none;
+      transition: background var(--transition, 0.1s ease-out),
+                  outline-color var(--transition, 0.1s ease-out);
+      outline: 1px solid transparent;
+    }
+
+    ::slotted([data-tickled]) {
+      background: var(--item-bg-tickled, rgba(0, 0, 0, 0.06));
+      outline: 1px solid var(--accent, #60a5fa);
+    }
+
+    ::slotted([data-selected]) {
+      background: var(--item-bg-selected, rgba(25, 118, 210, 1));
+      color: var(--item-text-selected, #fff);
+      outline: 1px solid transparent;
+    }
+
+    ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-selected-tickled, rgba(21, 101, 192, 1));
+      outline: 2px dashed var(--surface-3, #1e1e1e);
+      outline-offset: -2px;
+    }
+
+    /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
+    :host([interaction-mode="checked"]) ::slotted([data-selected]) {
+      background: transparent;
+      color: inherit;
+      outline: 1px solid transparent;
+    }
+
+    :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
+      background: var(--item-bg-tickled, rgba(0, 0, 0, 0.06));
+      color: inherit;
+      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;
+      right: 8px;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--surface-4, #2a2a2a);
+      border: 1px solid var(--border, #444);
+      border-radius: var(--radius-m, 4px);
+      padding: 4px 6px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .search-overlay[hidden] {
+      display: none;
+    }
+
+    .search-input {
+      background: transparent;
+      border: none;
+      outline: none;
+      color: inherit;
+      font-size: var(--text-m, 0.875em);
+      min-width: 140px;
+    }
+
+    .search-close {
+      background: transparent;
+      border: none;
+      color: var(--surface-muted-text, #888);
+      cursor: pointer;
+      font-size: 1.1em;
+      line-height: 1;
+      padding: 0 2px;
+    }
+
+    .search-close:hover {
+      color: inherit;
+    }
+  `;
+	}
+	render() {
+		return b`
+      <div class="container">
+        <ul part="list">
+          <slot></slot>
+        </ul>
+        <div
+          class="search-overlay"
+          part="search-overlay"
+          ?hidden=${!this._searchVisible}
+        >
+          <input
+            type="text"
+            class="search-input"
+            placeholder="Search…"
+            .value=${this._searchQuery}
+            @input=${this._onSearchInput}
+            @keydown=${this._onSearchKeydown}
+          />
+          <button class="search-close" @click=${this._closeSearch} title="Close search (Esc)">×</button>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([n$2({
+	type: String,
+	attribute: `selection-mode`
+})], VerticalListElement.prototype, "selectionMode", void 0);
+__decorate([n$2({
+	type: String,
+	attribute: `interaction-mode`
+})], VerticalListElement.prototype, "interactionMode", void 0);
+__decorate([n$2({ attribute: false })], VerticalListElement.prototype, "filterPredicate", void 0);
+__decorate([r$1()], VerticalListElement.prototype, "_selectedItems", void 0);
+__decorate([r$1()], VerticalListElement.prototype, "_searchVisible", void 0);
+__decorate([r$1()], VerticalListElement.prototype, "_searchQuery", void 0);
+__decorate([e$4(`.search-input`)], VerticalListElement.prototype, "_searchInputEl", void 0);
+VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 //#region src/xy-pad.ts
 /**
@@ -35089,7 +36593,7 @@ function quantise(value, min, max, stops) {
 	const step = (max - min) / stops;
 	return Math.round((value - min) / step) * step + min;
 }
-let XyPad = class XyPad extends i$3 {
+let XyPad = class XyPad extends i$4 {
 	constructor(..._args) {
 		super(..._args);
 		this.xMin = 1;
@@ -35208,7 +36712,7 @@ let XyPad = class XyPad extends i$3 {
 		};
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = [prominenceStyles, i$7`
     :host {
       display: block;
       width: 200px;
@@ -35460,13 +36964,13 @@ __decorate([n$2({
 	type: Number,
 	attribute: `stops-y`
 })], XyPad.prototype, "stopsY", void 0);
-XyPad = __decorate([t$4(`ixfx-xy-pad`)], XyPad);
+XyPad = __decorate([safeCustomElement(`ixfx-xy-pad`)], XyPad);
 //#endregion
 //#region src/index.ts
 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, TreeBaseElement, TreeController, TreeDataModel, TreeListElement, 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