@ixfx/components 0.3.1 → 0.3.2

package/bundle/index.js

@@ -1,13 +1,12 @@
 import { t as __exportAll$5 } from "./chunk-pbuEa-1d.js";
 import { Fzf } from "fzf";
-import "@clinth/vcanvas";
 //#region node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.js
 /**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-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();
+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();
 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.");
@@ -35,7 +34,7 @@ const r$5 = (t) => new n$5("string" == typeof t ? t : t + "", void 0, s$3), i$7
 }, 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$5.litNonce;
+		const o = document.createElement("style"), n = t$6.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) => {
@@ -280,7 +279,7 @@ y$1.elementStyles = [], y$1.shadowRootOptions = { mode: "open" }, y$1[d$2("eleme
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-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) => ({
+const t$5 = globalThis, i$5 = (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) => ({
 	_$litType$: t,
 	strings: i,
 	values: s
@@ -530,8 +529,8 @@ const j$1 = {
 	U: z,
 	B: I,
 	F: Z
-}, B = t$4.litHtmlPolyfillSupport;
-B?.(S, k), (t$4.litHtmlVersions ??= []).push("3.3.3");
+}, B = t$5.litHtmlPolyfillSupport;
+B?.(S, k), (t$5.litHtmlVersions ??= []).push("3.3.3");
 const D = (t, i, s) => {
 	const e = s?.renderBefore ?? i;
 	let h = e._$litPart$;
@@ -575,6 +574,18 @@ const o$4 = s$1.litElementPolyfillSupport;
 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
@@ -1161,7 +1172,7 @@ function svgToDataUri(svg) {
 }
 //#endregion
 //#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
-function __decorate(decorators, target, key, desc) {
+function __decorate$1(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);
 	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1245,19 +1256,19 @@ let IxfxIconElement = class IxfxIconElement extends i$4 {
   `;
 	}
 };
-__decorate([n$2()], IxfxIconElement.prototype, "name", void 0);
-__decorate([n$2({ type: Number })], IxfxIconElement.prototype, "size", void 0);
-__decorate([n$2()], IxfxIconElement.prototype, "label", void 0);
-__decorate([n$2({
+__decorate$1([n$2()], IxfxIconElement.prototype, "name", void 0);
+__decorate$1([n$2({ type: Number })], IxfxIconElement.prototype, "size", void 0);
+__decorate$1([n$2()], IxfxIconElement.prototype, "label", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `prominence`
 })], IxfxIconElement.prototype, "prominence", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `rotate`,
 	reflect: true
 })], IxfxIconElement.prototype, "rotate", void 0);
-IxfxIconElement = __decorate([safeCustomElement(`ixfx-icon`)], IxfxIconElement);
+IxfxIconElement = __decorate$1([safeCustomElement(`ixfx-icon`)], IxfxIconElement);
 //#endregion
 //#region src/ac-text/ac-text.ts
 const HIGHLIGHT_KEY$1 = `ac-text-highlight`;
@@ -1713,26 +1724,26 @@ let AcTextElement = class AcTextElement extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ type: Object })], AcTextElement.prototype, "completionProvider", void 0);
-__decorate([n$2({ type: String })], AcTextElement.prototype, "placeholder", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Object })], AcTextElement.prototype, "completionProvider", void 0);
+__decorate$1([n$2({ type: String })], AcTextElement.prototype, "placeholder", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `cache-size`
 })], AcTextElement.prototype, "cacheSize", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `debounce-ms`
 })], AcTextElement.prototype, "debounceMs", void 0);
-__decorate([n$2({ type: String })], AcTextElement.prototype, "value", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], AcTextElement.prototype, "value", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `tab-suffix`
 })], AcTextElement.prototype, "tabSuffix", void 0);
-__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([safeCustomElement(`ixfx-ac-text`)], AcTextElement);
+__decorate$1([r$1()], AcTextElement.prototype, "_query", void 0);
+__decorate$1([r$1()], AcTextElement.prototype, "_results", void 0);
+__decorate$1([r$1()], AcTextElement.prototype, "_isOpen", void 0);
+__decorate$1([r$1()], AcTextElement.prototype, "_isLoading", void 0);
+AcTextElement = __decorate$1([safeCustomElement(`ixfx-ac-text`)], AcTextElement);
 //#endregion
 //#region src/incr-search/fuzzy.ts
 function defaultSelector(item) {
@@ -2642,25 +2653,25 @@ let AcTokenElement = class AcTokenElement extends i$4 {
   `];
 	}
 };
-__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({
+__decorate$1([n$2({ type: Object })], AcTokenElement.prototype, "completionProvider", void 0);
+__decorate$1([n$2({ type: Object })], AcTokenElement.prototype, "tokenizer", void 0);
+__decorate$1([n$2({ type: String })], AcTokenElement.prototype, "placeholder", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `cache-size`
 })], AcTokenElement.prototype, "cacheSize", void 0);
-__decorate([n$2({
+__decorate$1([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);
+__decorate$1([n$2({ type: Boolean })], AcTokenElement.prototype, "strict", void 0);
+__decorate$1([r$1()], AcTokenElement.prototype, "_tokens", void 0);
+__decorate$1([r$1()], AcTokenElement.prototype, "_draft", void 0);
+__decorate$1([r$1()], AcTokenElement.prototype, "_selectedTokenIndex", void 0);
+__decorate$1([r$1()], AcTokenElement.prototype, "_suggestions", void 0);
+__decorate$1([r$1()], AcTokenElement.prototype, "_isOpen", void 0);
+__decorate$1([r$1()], AcTokenElement.prototype, "_isLoading", void 0);
+AcTokenElement = __decorate$1([safeCustomElement(`ixfx-ac-token`)], AcTokenElement);
 //#endregion
 //#region src/icons/defaults.ts
 /**
@@ -2890,19 +2901,19 @@ let ButtonElement = class ButtonElement extends i$4 {
 		this.styles = [prominenceStyles, buttonStyles];
 	}
 };
-__decorate([n$2({ type: Boolean })], ButtonElement.prototype, "disabled", void 0);
-__decorate([n$2({ type: String })], ButtonElement.prototype, "icon", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], ButtonElement.prototype, "disabled", void 0);
+__decorate$1([n$2({ type: String })], ButtonElement.prototype, "icon", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-icon`,
 	reflect: true
 })], ButtonElement.prototype, "hideIcon", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-label`,
 	reflect: true
 })], ButtonElement.prototype, "hideLabel", void 0);
-ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
+ButtonElement = __decorate$1([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 //#region src/button/radio-group.ts
 let RadioGroup = class RadioGroup extends i$4 {
@@ -3205,32 +3216,32 @@ let RadioGroup = class RadioGroup extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ type: String })], RadioGroup.prototype, "value", void 0);
-__decorate([n$2({ type: String })], RadioGroup.prototype, "orientation", void 0);
-__decorate([n$2({ type: Array })], RadioGroup.prototype, "items", void 0);
-__decorate([n$2({ type: String })], RadioGroup.prototype, "name", void 0);
-__decorate([n$2({ type: String })], RadioGroup.prototype, "mode", void 0);
-__decorate([n$2({ type: Boolean })], RadioGroup.prototype, "checked", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], RadioGroup.prototype, "value", void 0);
+__decorate$1([n$2({ type: String })], RadioGroup.prototype, "orientation", void 0);
+__decorate$1([n$2({ type: Array })], RadioGroup.prototype, "items", void 0);
+__decorate$1([n$2({ type: String })], RadioGroup.prototype, "name", void 0);
+__decorate$1([n$2({ type: String })], RadioGroup.prototype, "mode", void 0);
+__decorate$1([n$2({ type: Boolean })], RadioGroup.prototype, "checked", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `value-off`
 })], RadioGroup.prototype, "valueOff", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name`
 })], RadioGroup.prototype, "iconName", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name-off`
 })], RadioGroup.prototype, "iconNameOff", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-labels`
 })], RadioGroup.prototype, "hideLabels", void 0);
-__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([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
+__decorate$1([r$1()], RadioGroup.prototype, "_computedItems", void 0);
+__decorate$1([r$1()], RadioGroup.prototype, "_icons", void 0);
+__decorate$1([e$4(`slot`)], RadioGroup.prototype, "_slot", void 0);
+RadioGroup = __decorate$1([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
 //#region src/styles/popup.ts
 /**
@@ -3506,14 +3517,14 @@ let MenuContainer = class MenuContainer extends i$4 {
 		item.click();
 	}
 };
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `anchor`
 })], MenuContainer.prototype, "anchor", void 0);
-__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([safeCustomElement(`ixfx-menu-container`)], MenuContainer);
+__decorate$1([n$2({ attribute: false })], MenuContainer.prototype, "registry", void 0);
+__decorate$1([n$2({ attribute: false })], MenuContainer.prototype, "keyboardManager", void 0);
+__decorate$1([e$4(`.popover`)], MenuContainer.prototype, "_popover", void 0);
+MenuContainer = __decorate$1([safeCustomElement(`ixfx-menu-container`)], MenuContainer);
 //#endregion
 //#region src/menu/menu-trigger.ts
 var _MenuTrigger;
@@ -3795,17 +3806,17 @@ let MenuTrigger = class MenuTrigger extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: String })], MenuTrigger.prototype, "mode", void 0);
-__decorate([n$2({ type: String })], MenuTrigger.prototype, "label", void 0);
-__decorate([n$2({ attribute: false })], MenuTrigger.prototype, "registry", void 0);
-__decorate([n$2({ attribute: false })], MenuTrigger.prototype, "keyboardManager", void 0);
-__decorate([n$2({ type: String })], MenuTrigger.prototype, "placement", void 0);
-__decorate([r$1()], MenuTrigger.prototype, "_isOpen", void 0);
-__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([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
+__decorate$1([n$2({ type: String })], MenuTrigger.prototype, "mode", void 0);
+__decorate$1([n$2({ type: String })], MenuTrigger.prototype, "label", void 0);
+__decorate$1([n$2({ attribute: false })], MenuTrigger.prototype, "registry", void 0);
+__decorate$1([n$2({ attribute: false })], MenuTrigger.prototype, "keyboardManager", void 0);
+__decorate$1([n$2({ type: String })], MenuTrigger.prototype, "placement", void 0);
+__decorate$1([r$1()], MenuTrigger.prototype, "_isOpen", void 0);
+__decorate$1([r$1()], MenuTrigger.prototype, "_hasMenu", void 0);
+__decorate$1([r$1()], MenuTrigger.prototype, "_hasTriggerSlot", void 0);
+__decorate$1([e$4(`.trigger-btn`)], MenuTrigger.prototype, "_triggerBtn", void 0);
+__decorate$1([e$4(`.popup`)], MenuTrigger.prototype, "_popup", void 0);
+MenuTrigger = _MenuTrigger = __decorate$1([safeCustomElement(`ixfx-menu-trigger`)], MenuTrigger);
 //#endregion
 //#region src/menu/menu-item.ts
 let MenuItem = class MenuItem extends i$4 {
@@ -3990,23 +4001,23 @@ let MenuItem = class MenuItem extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: String })], MenuItem.prototype, "command", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], MenuItem.prototype, "command", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `command-args`
 })], MenuItem.prototype, "commandArgs", void 0);
-__decorate([n$2({ type: String })], MenuItem.prototype, "label", void 0);
-__decorate([n$2({ type: Boolean })], MenuItem.prototype, "disabled", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], MenuItem.prototype, "label", void 0);
+__decorate$1([n$2({ type: Boolean })], MenuItem.prototype, "disabled", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name`
 })], MenuItem.prototype, "iconName", void 0);
-__decorate([n$2({ attribute: false })], MenuItem.prototype, "registry", void 0);
-__decorate([n$2({ attribute: false })], MenuItem.prototype, "keyboardManager", void 0);
-__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([safeCustomElement(`ixfx-menu-item`)], MenuItem);
+__decorate$1([n$2({ attribute: false })], MenuItem.prototype, "registry", void 0);
+__decorate$1([n$2({ attribute: false })], MenuItem.prototype, "keyboardManager", void 0);
+__decorate$1([n$2({ attribute: false })], MenuItem.prototype, "submenuPopover", void 0);
+__decorate$1([r$1()], MenuItem.prototype, "_hasChildren", void 0);
+__decorate$1([e$4(`slot`)], MenuItem.prototype, "_slot", void 0);
+MenuItem = __decorate$1([safeCustomElement(`ixfx-menu-item`)], MenuItem);
 //#endregion
 //#region src/button/split-button.ts
 let SplitButton = class SplitButton extends ButtonElement {
@@ -4377,25 +4388,25 @@ let SplitButton = class SplitButton extends ButtonElement {
 		];
 	}
 };
-__decorate([n$2({ attribute: false })], SplitButton.prototype, "registry", void 0);
-__decorate([n$2({ attribute: false })], SplitButton.prototype, "keyboardManager", void 0);
-__decorate([n$2({ type: String })], SplitButton.prototype, "mode", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ attribute: false })], SplitButton.prototype, "registry", void 0);
+__decorate$1([n$2({ attribute: false })], SplitButton.prototype, "keyboardManager", void 0);
+__decorate$1([n$2({ type: String })], SplitButton.prototype, "mode", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `default-value`
 })], SplitButton.prototype, "defaultValue", void 0);
-__decorate([n$2({ attribute: false })], SplitButton.prototype, "itemsProvider", void 0);
-__decorate([n$2({ attribute: false })], SplitButton.prototype, "items", void 0);
-__decorate([e$4(`ixfx-menu-trigger`)], SplitButton.prototype, "_menuTrigger", void 0);
-__decorate([r$1()], SplitButton.prototype, "_compact", void 0);
-__decorate([r$1()], SplitButton.prototype, "_selectedCommand", void 0);
-__decorate([r$1()], SplitButton.prototype, "_selectedLabel", void 0);
-__decorate([r$1()], SplitButton.prototype, "_selectedIcon", void 0);
-__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([safeCustomElement(`ixfx-split-button`)], SplitButton);
+__decorate$1([n$2({ attribute: false })], SplitButton.prototype, "itemsProvider", void 0);
+__decorate$1([n$2({ attribute: false })], SplitButton.prototype, "items", void 0);
+__decorate$1([e$4(`ixfx-menu-trigger`)], SplitButton.prototype, "_menuTrigger", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_compact", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_selectedCommand", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_selectedLabel", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_selectedIcon", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_switcherItems", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_dynamicItems", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_loadingItems", void 0);
+__decorate$1([r$1()], SplitButton.prototype, "_menuHasItems", void 0);
+SplitButton = __decorate$1([safeCustomElement(`ixfx-split-button`)], SplitButton);
 //#endregion
 //#region src/checkbox.ts
 /**
@@ -4634,13 +4645,13 @@ let Checkbox = class Checkbox extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: Boolean })], Checkbox.prototype, "checked", void 0);
-__decorate([n$2({ type: Boolean })], Checkbox.prototype, "disabled", void 0);
-__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([safeCustomElement(`ixfx-checkbox`)], Checkbox);
+__decorate$1([n$2({ type: Boolean })], Checkbox.prototype, "checked", void 0);
+__decorate$1([n$2({ type: Boolean })], Checkbox.prototype, "disabled", void 0);
+__decorate$1([n$2({ type: Boolean })], Checkbox.prototype, "indeterminate", void 0);
+__decorate$1([n$2({ type: String })], Checkbox.prototype, "label", void 0);
+__decorate$1([n$2({ type: String })], Checkbox.prototype, "name", void 0);
+__decorate$1([n$2({ type: String })], Checkbox.prototype, "value", void 0);
+Checkbox = __decorate$1([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;
@@ -5644,7 +5655,7 @@ const dotProduct = (values, nonNumber = `ignore`) => {
 * @param max value (inclusive)
 * @returns Clamped value
 */
-function clamp$2(value, min = 0, max = 1) {
+function clamp$3(value, min = 0, max = 1) {
 	if (Number.isNaN(value)) throw new Error(`Param 'value' is NaN`);
 	if (Number.isNaN(min)) throw new Error(`Param 'min' is NaN`);
 	if (Number.isNaN(max)) throw new Error(`Param 'max' is NaN`);
@@ -5743,7 +5754,7 @@ function interpolate$2(pos1, pos2, pos3, pos4) {
 	let limits = `clamp`;
 	const handleAmount = (amount) => {
 		if (amountProcess) amount = amountProcess(amount);
-		if (limits === void 0 || limits === `clamp`) amount = clamp$2(amount);
+		if (limits === void 0 || limits === `clamp`) amount = clamp$3(amount);
 		else if (limits === `wrap`) {
 			if (amount > 1) amount = amount % 1;
 			else if (amount < 0) amount = 1 + amount % 1;
@@ -5966,7 +5977,7 @@ const scaleClamped = (value, inMin, inMax, outMin, outMax, easing) => {
 	if (typeof outMax === `undefined`) outMax = 1;
 	if (typeof outMin === `undefined`) outMin = 0;
 	if (inMin === inMax) return outMax;
-	return clamp$2(scale$2(value, inMin, inMax, outMin, outMax, easing), outMin, outMax);
+	return clamp$3(scale$2(value, inMin, inMax, outMin, outMax, easing), outMin, outMax);
 };
 /**
 * Returns an empty range:
@@ -13576,7 +13587,7 @@ const relative = (total, options = {}) => {
 	const computeElapsed = (value) => {
 		lastValue = value;
 		let v = value / (total * modulationAmount);
-		if (clampValue) v = clamp$2(v);
+		if (clampValue) v = clamp$3(v);
 		else if (wrapValue && v >= 1) v = v % 1;
 		return v;
 	};
@@ -14197,13 +14208,13 @@ const centroid = (...points) => {
 */
 function clamp$1$2(a, min = 0, max = 1) {
 	if (isPoint3d(a)) return Object.freeze({
-		x: clamp$2(a.x, min, max),
-		y: clamp$2(a.y, min, max),
-		z: clamp$2(a.z, min, max)
+		x: clamp$3(a.x, min, max),
+		y: clamp$3(a.y, min, max),
+		z: clamp$3(a.z, min, max)
 	});
 	else return Object.freeze({
-		x: clamp$2(a.x, min, max),
-		y: clamp$2(a.y, min, max)
+		x: clamp$3(a.x, min, max),
+		y: clamp$3(a.y, min, max)
 	});
 }
 /**
@@ -17219,7 +17230,7 @@ function interpolator$3(a, b, direction = `shorter`) {
 	const lightDistance = b.l - a.l;
 	const opacityDistance = (b.opacity ?? 1) - aOpacity;
 	return (amount) => {
-		amount = clamp$2(amount);
+		amount = clamp$3(amount);
 		let h = interpolate$2(amount, 0, Math.abs(hueDistance));
 		if (hueDistance < 0) h = a.h - h;
 		else h = a.h + h;
@@ -17612,7 +17623,7 @@ function interpolator$2(colourA, colourB) {
 	const g = bb.g - aa.g;
 	const b = bb.b - aa.b;
 	return (amount) => {
-		amount = clamp$2(amount);
+		amount = clamp$3(amount);
 		return scalar$2(aa.r + interpolate$2(amount, 0, r), aa.g + interpolate$2(amount, 0, g), aa.b + interpolate$2(amount, 0, b), aOpacity + interpolate$2(amount, 0, opacityDistance));
 	};
 }
@@ -17825,7 +17836,7 @@ function interpolator$1(a, b, direction = `shorter`) {
 	const lightDistance = b.l - a.l;
 	const opacityDistance = (b.opacity ?? 1) - aOpacity;
 	return (amount) => {
-		amount = clamp$2(amount);
+		amount = clamp$3(amount);
 		let h = interpolate$2(amount, 0, Math.abs(hueDistance));
 		if (hueDistance < 0) h = a.h - h;
 		else h = a.h + h;
@@ -18486,7 +18497,7 @@ function createSteps(a, b, options = {}) {
 * @param amount Amount
 */
 function multiplyOpacity(colourish, amount) {
-	return withOpacity(colourish, (o) => clamp$2(o * amount));
+	return withOpacity(colourish, (o) => clamp$3(o * amount));
 }
 /**
 * Does a computation with the opacity of a colour, returning colour.
@@ -18885,28 +18896,28 @@ var LabelledInputBase = class extends i$4 {
 		if (changedProperties.has(`value`)) this._syncValue(this.value);
 	}
 };
-__decorate([n$2()], LabelledInputBase.prototype, "label", void 0);
-__decorate([n$2({ type: Number })], LabelledInputBase.prototype, "min", void 0);
-__decorate([n$2({ type: Number })], LabelledInputBase.prototype, "max", void 0);
-__decorate([n$2({ type: Number })], LabelledInputBase.prototype, "value", void 0);
-__decorate([n$2({ type: Number })], LabelledInputBase.prototype, "step", void 0);
-__decorate([n$2({ type: Number })], LabelledInputBase.prototype, "precision", void 0);
-__decorate([n$2({
+__decorate$1([n$2()], LabelledInputBase.prototype, "label", void 0);
+__decorate$1([n$2({ type: Number })], LabelledInputBase.prototype, "min", void 0);
+__decorate$1([n$2({ type: Number })], LabelledInputBase.prototype, "max", void 0);
+__decorate$1([n$2({ type: Number })], LabelledInputBase.prototype, "value", void 0);
+__decorate$1([n$2({ type: Number })], LabelledInputBase.prototype, "step", void 0);
+__decorate$1([n$2({ type: Number })], LabelledInputBase.prototype, "precision", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `drag-sensitivity`
 })], LabelledInputBase.prototype, "dragSensitivity", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `mini-width-threshold`
 })], LabelledInputBase.prototype, "miniWidthThreshold", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `mini-height-threshold`
 })], LabelledInputBase.prototype, "miniHeightThreshold", void 0);
-__decorate([n$2({ attribute: `display-text-logic` })], LabelledInputBase.prototype, "displayTextLogic", void 0);
-__decorate([r$1()], LabelledInputBase.prototype, "_isMini", void 0);
-__decorate([r$1()], LabelledInputBase.prototype, "_isDragging", void 0);
-__decorate([r$1()], LabelledInputBase.prototype, "_formatter", void 0);
+__decorate$1([n$2({ attribute: `display-text-logic` })], LabelledInputBase.prototype, "displayTextLogic", void 0);
+__decorate$1([r$1()], LabelledInputBase.prototype, "_isMini", void 0);
+__decorate$1([r$1()], LabelledInputBase.prototype, "_isDragging", void 0);
+__decorate$1([r$1()], LabelledInputBase.prototype, "_formatter", void 0);
 //#endregion
 //#region src/labelled-range-input/labelled-range-input.ts
 let LabelledRangeInput = class LabelledRangeInput extends LabelledInputBase {
@@ -19017,21 +19028,21 @@ let LabelledRangeInput = class LabelledRangeInput extends LabelledInputBase {
   `;
 	}
 };
-__decorate([n$2({ type: String })], LabelledRangeInput.prototype, "orientation", void 0);
-__decorate([n$2({ type: Boolean })], LabelledRangeInput.prototype, "tooltip", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], LabelledRangeInput.prototype, "orientation", void 0);
+__decorate$1([n$2({ type: Boolean })], LabelledRangeInput.prototype, "tooltip", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `no-tooltip`
 })], LabelledRangeInput.prototype, "noTooltip", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `tooltip-orientation`
 })], LabelledRangeInput.prototype, "tooltipOrientation", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `switch-height`
 })], LabelledRangeInput.prototype, "switchHeight", void 0);
-LabelledRangeInput = __decorate([safeCustomElement(`ixfx-labelled-range-input`)], LabelledRangeInput);
+LabelledRangeInput = __decorate$1([safeCustomElement(`ixfx-labelled-range-input`)], LabelledRangeInput);
 //#endregion
 //#region src/colour-picker/colour-picker.ts
 let ColourPicker = class ColourPicker extends i$4 {
@@ -19482,75 +19493,75 @@ let ColourPicker = class ColourPicker extends i$4 {
   `;
 	}
 };
-__decorate([n$2({ type: Number })], ColourPicker.prototype, "l", void 0);
-__decorate([n$2({ type: Number })], ColourPicker.prototype, "c", void 0);
-__decorate([n$2({ type: Number })], ColourPicker.prototype, "h", void 0);
-__decorate([n$2({ type: Number })], ColourPicker.prototype, "a", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], ColourPicker.prototype, "l", void 0);
+__decorate$1([n$2({ type: Number })], ColourPicker.prototype, "c", void 0);
+__decorate$1([n$2({ type: Number })], ColourPicker.prototype, "h", void 0);
+__decorate$1([n$2({ type: Number })], ColourPicker.prototype, "a", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-preview`,
 	reflect: true
 })], ColourPicker.prototype, "hidePreview", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-h`,
 	reflect: true
 })], ColourPicker.prototype, "hideH", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-l`,
 	reflect: true
 })], ColourPicker.prototype, "hideL", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-c`,
 	reflect: true
 })], ColourPicker.prototype, "hideC", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `show-a`
 })], ColourPicker.prototype, "showA", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `horizontal`,
 	reflect: true
 })], ColourPicker.prototype, "horizontal", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `sliders-vertical`,
 	reflect: true
 })], ColourPicker.prototype, "slidersVertical", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-tooltips`,
 	reflect: true
 })], ColourPicker.prototype, "hideTooltips", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `value`
 })], ColourPicker.prototype, "_valueAttr", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `range-l`
 })], ColourPicker.prototype, "rangeLAttr", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `range-c`
 })], ColourPicker.prototype, "rangeCAttr", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `range-h`
 })], ColourPicker.prototype, "rangeHAttr", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `range-a`
 })], ColourPicker.prototype, "rangeAAttr", void 0);
-__decorate([e$4(`#slider-l`)], ColourPicker.prototype, "_sliderL", void 0);
-__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([safeCustomElement(`ixfx-colour-picker`)], ColourPicker);
+__decorate$1([e$4(`#slider-l`)], ColourPicker.prototype, "_sliderL", void 0);
+__decorate$1([e$4(`#slider-c`)], ColourPicker.prototype, "_sliderC", void 0);
+__decorate$1([e$4(`#slider-h`)], ColourPicker.prototype, "_sliderH", void 0);
+__decorate$1([e$4(`#slider-a`)], ColourPicker.prototype, "_sliderA", void 0);
+__decorate$1([e$4(`.preview`)], ColourPicker.prototype, "_previewEl", void 0);
+ColourPicker = __decorate$1([safeCustomElement(`ixfx-colour-picker`)], ColourPicker);
 //#endregion
 //#region src/colour-picker/colour-picker-popup.ts
 let _instanceCounter = 0;
@@ -19885,44 +19896,44 @@ let ColourPickerPopup = class ColourPickerPopup extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ type: String })], ColourPickerPopup.prototype, "mode", void 0);
-__decorate([n$2({ type: Number })], ColourPickerPopup.prototype, "l", void 0);
-__decorate([n$2({ type: Number })], ColourPickerPopup.prototype, "c", void 0);
-__decorate([n$2({ type: Number })], ColourPickerPopup.prototype, "h", void 0);
-__decorate([n$2({ type: Number })], ColourPickerPopup.prototype, "a", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], ColourPickerPopup.prototype, "mode", void 0);
+__decorate$1([n$2({ type: Number })], ColourPickerPopup.prototype, "l", void 0);
+__decorate$1([n$2({ type: Number })], ColourPickerPopup.prototype, "c", void 0);
+__decorate$1([n$2({ type: Number })], ColourPickerPopup.prototype, "h", void 0);
+__decorate$1([n$2({ type: Number })], ColourPickerPopup.prototype, "a", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `show-preview`
 })], ColourPickerPopup.prototype, "showPreview", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-h`,
 	reflect: true
 })], ColourPickerPopup.prototype, "hideH", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-l`,
 	reflect: true
 })], ColourPickerPopup.prototype, "hideL", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-c`,
 	reflect: true
 })], ColourPickerPopup.prototype, "hideC", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `show-a`
 })], ColourPickerPopup.prototype, "showA", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `horizontal`
 })], ColourPickerPopup.prototype, "horizontal", void 0);
-__decorate([n$2({ type: String })], ColourPickerPopup.prototype, "size", void 0);
-__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([safeCustomElement(`ixfx-colour-picker-popup`)], ColourPickerPopup);
+__decorate$1([n$2({ type: String })], ColourPickerPopup.prototype, "size", void 0);
+__decorate$1([r$1()], ColourPickerPopup.prototype, "_isOpen", void 0);
+__decorate$1([r$1()], ColourPickerPopup.prototype, "_everOpened", void 0);
+__decorate$1([e$4(`.popup`)], ColourPickerPopup.prototype, "_popupEl", void 0);
+__decorate$1([e$4(`ixfx-colour-picker`)], ColourPickerPopup.prototype, "_pickerEl", void 0);
+ColourPickerPopup = __decorate$1([safeCustomElement(`ixfx-colour-picker-popup`)], ColourPickerPopup);
 //#endregion
 //#region src/common/tree-data-model.ts
 function findNode(root, key) {
@@ -20632,45 +20643,45 @@ let NarrowedTextElement = class NarrowedTextElement extends i$4 {
 		];
 	}
 };
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `selection-mode`
 })], NarrowedTextElement.prototype, "selectionMode", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `required-selection`
 })], NarrowedTextElement.prototype, "requiredSelection", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `orientation`
 })], NarrowedTextElement.prototype, "orientation", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `nowrap`
 })], NarrowedTextElement.prototype, "nowrap", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `separator`
 })], NarrowedTextElement.prototype, "separator", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `width`
 })], NarrowedTextElement.prototype, "width", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `height`
 })], NarrowedTextElement.prototype, "height", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `preserve-filter`
 })], NarrowedTextElement.prototype, "preserveFilter", void 0);
-__decorate([n$2({ type: String })], NarrowedTextElement.prototype, "value", void 0);
-__decorate([r$1()], NarrowedTextElement.prototype, "_query", void 0);
-__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([safeCustomElement(`ixfx-narrowed-text`)], NarrowedTextElement);
+__decorate$1([n$2({ type: String })], NarrowedTextElement.prototype, "value", void 0);
+__decorate$1([r$1()], NarrowedTextElement.prototype, "_query", void 0);
+__decorate$1([r$1()], NarrowedTextElement.prototype, "_computedItems", void 0);
+__decorate$1([r$1()], NarrowedTextElement.prototype, "_filteredItems", void 0);
+__decorate$1([r$1()], NarrowedTextElement.prototype, "_isFocused", void 0);
+__decorate$1([e$4(`slot`)], NarrowedTextElement.prototype, "_slot", void 0);
+NarrowedTextElement = __decorate$1([safeCustomElement(`ixfx-narrowed-text`)], NarrowedTextElement);
 //#endregion
 //#region src/crumbs/crumb-navigation.ts
 let CrumbNavigationElement = class CrumbNavigationElement extends i$4 {
@@ -21427,29 +21438,29 @@ let CrumbNavigationElement = class CrumbNavigationElement extends i$4 {
 		];
 	}
 };
-__decorate([n$2({ type: Object })], CrumbNavigationElement.prototype, "root", void 0);
-__decorate([n$2({ attribute: false })], CrumbNavigationElement.prototype, "model", void 0);
-__decorate([n$2({ type: Object })], CrumbNavigationElement.prototype, "selectedNode", void 0);
-__decorate([r$1()], CrumbNavigationElement.prototype, "_selectedNodes", void 0);
-__decorate([n$2({ attribute: false })], CrumbNavigationElement.prototype, "loadChildren", void 0);
-__decorate([n$2({ attribute: false })], CrumbNavigationElement.prototype, "filterPredicate", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Object })], CrumbNavigationElement.prototype, "root", void 0);
+__decorate$1([n$2({ attribute: false })], CrumbNavigationElement.prototype, "model", void 0);
+__decorate$1([n$2({ type: Object })], CrumbNavigationElement.prototype, "selectedNode", void 0);
+__decorate$1([r$1()], CrumbNavigationElement.prototype, "_selectedNodes", void 0);
+__decorate$1([n$2({ attribute: false })], CrumbNavigationElement.prototype, "loadChildren", void 0);
+__decorate$1([n$2({ attribute: false })], CrumbNavigationElement.prototype, "filterPredicate", void 0);
+__decorate$1([n$2({
 	reflect: true,
 	attribute: `exclusivity`
 })], CrumbNavigationElement.prototype, "exclusivity", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	reflect: true,
 	attribute: `selection-filter`
 })], CrumbNavigationElement.prototype, "selectionFilter", void 0);
-__decorate([r$1()], CrumbNavigationElement.prototype, "_openIdx", void 0);
-__decorate([r$1()], CrumbNavigationElement.prototype, "_isFocused", void 0);
-__decorate([r$1()], CrumbNavigationElement.prototype, "_menuOpen", void 0);
-__decorate([r$1()], CrumbNavigationElement.prototype, "_focusOnNarrowedText", void 0);
-__decorate([n$2({
+__decorate$1([r$1()], CrumbNavigationElement.prototype, "_openIdx", void 0);
+__decorate$1([r$1()], CrumbNavigationElement.prototype, "_isFocused", void 0);
+__decorate$1([r$1()], CrumbNavigationElement.prototype, "_menuOpen", void 0);
+__decorate$1([r$1()], CrumbNavigationElement.prototype, "_focusOnNarrowedText", void 0);
+__decorate$1([n$2({
 	reflect: true,
 	attribute: `input-mode`
 })], CrumbNavigationElement.prototype, "inputMode", void 0);
-CrumbNavigationElement = __decorate([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
+CrumbNavigationElement = __decorate$1([safeCustomElement(`ixfx-crumb-navigation`)], CrumbNavigationElement);
 //#endregion
 //#region src/crumbs/crumb-path-controller.ts
 var CrumbPathController = class {
@@ -22118,23 +22129,23 @@ let CrumbPathElement = class CrumbPathElement extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ type: String })], CrumbPathElement.prototype, "path", void 0);
-__decorate([n$2({ type: String })], CrumbPathElement.prototype, "separator", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], CrumbPathElement.prototype, "path", void 0);
+__decorate$1([n$2({ type: String })], CrumbPathElement.prototype, "separator", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `path-root`
 })], CrumbPathElement.prototype, "pathRoot", void 0);
-__decorate([n$2({ type: Object })], CrumbPathElement.prototype, "siblingLookup", void 0);
-__decorate([r$1()], CrumbPathElement.prototype, "_openIdx", void 0);
-__decorate([r$1()], CrumbPathElement.prototype, "_editing", void 0);
-__decorate([r$1()], CrumbPathElement.prototype, "_cachedSiblings", void 0);
-__decorate([r$1()], CrumbPathElement.prototype, "_leafSegmentIndex", void 0);
-__decorate([r$1()], CrumbPathElement.prototype, "_confirmedLeafIndices", void 0);
-__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([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
+__decorate$1([n$2({ type: Object })], CrumbPathElement.prototype, "siblingLookup", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_openIdx", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_editing", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_cachedSiblings", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_leafSegmentIndex", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_confirmedLeafIndices", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_editingCancelled", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_editStartIndex", void 0);
+__decorate$1([r$1()], CrumbPathElement.prototype, "_openCumPath", void 0);
+CrumbPathElement = __decorate$1([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/data-display.ts
 var _DataDisplayComponent;
@@ -22227,7 +22238,7 @@ let DataDisplayComponent = class DataDisplayComponent extends i$4 {
 		this.previousValue = value;
 	}
 };
-DataDisplayComponent = _DataDisplayComponent = __decorate([safeCustomElement(`ixfx-data-display`)], DataDisplayComponent);
+DataDisplayComponent = _DataDisplayComponent = __decorate$1([safeCustomElement(`ixfx-data-display`)], DataDisplayComponent);
 //#endregion
 //#region src/editable-label/editable-label.ts
 let EditableLabel = class EditableLabel extends i$4 {
@@ -22516,31 +22527,31 @@ let EditableLabel = class EditableLabel extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ reflect: true })], EditableLabel.prototype, "mode", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ reflect: true })], EditableLabel.prototype, "mode", void 0);
+__decorate$1([n$2({
 	attribute: `entry-mode`,
 	reflect: true
 })], EditableLabel.prototype, "entryMode", void 0);
-__decorate([n$2({ reflect: true })], EditableLabel.prototype, "value", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ reflect: true })], EditableLabel.prototype, "value", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], EditableLabel.prototype, "disabled", void 0);
-__decorate([n$2()], EditableLabel.prototype, "placeholder", void 0);
-__decorate([n$2({ attribute: `display-text` })], EditableLabel.prototype, "displayText", void 0);
-__decorate([n$2({ attribute: `display-text-logic` })], EditableLabel.prototype, "displayTextLogic", void 0);
-__decorate([n$2({
+__decorate$1([n$2()], EditableLabel.prototype, "placeholder", void 0);
+__decorate$1([n$2({ attribute: `display-text` })], EditableLabel.prototype, "displayText", void 0);
+__decorate$1([n$2({ attribute: `display-text-logic` })], EditableLabel.prototype, "displayTextLogic", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `appear-delay`
 })], EditableLabel.prototype, "appearDelay", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `disappear-delay`
 })], EditableLabel.prototype, "disappearDelay", void 0);
-__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([safeCustomElement(`ixfx-editable-label`)], EditableLabel);
+__decorate$1([n$2({ attribute: false })], EditableLabel.prototype, "validator", void 0);
+__decorate$1([n$2({ attribute: false })], EditableLabel.prototype, "formatter", void 0);
+__decorate$1([r$1()], EditableLabel.prototype, "_editing", void 0);
+EditableLabel = __decorate$1([safeCustomElement(`ixfx-editable-label`)], EditableLabel);
 function _selectAll(el) {
 	const range = document.createRange();
 	range.selectNodeContents(el);
@@ -23127,22 +23138,22 @@ let EditableNumber = class EditableNumber extends EditableLabel {
 		];
 	}
 };
-__decorate([n$2({ type: Number })], EditableNumber.prototype, "min", void 0);
-__decorate([n$2({ type: Number })], EditableNumber.prototype, "max", void 0);
-__decorate([n$2({ type: Number })], EditableNumber.prototype, "step", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], EditableNumber.prototype, "min", void 0);
+__decorate$1([n$2({ type: Number })], EditableNumber.prototype, "max", void 0);
+__decorate$1([n$2({ type: Number })], EditableNumber.prototype, "step", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `drag-sensitivity`
 })], EditableNumber.prototype, "dragSensitivity", void 0);
-__decorate([n$2({ attribute: `fill-style` })], EditableNumber.prototype, "fillStyle", void 0);
-__decorate([n$2({ attribute: `linear-style` })], EditableNumber.prototype, "linearStyle", void 0);
-__decorate([n$2({ attribute: `circular-style` })], EditableNumber.prototype, "circularStyle", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ attribute: `fill-style` })], EditableNumber.prototype, "fillStyle", void 0);
+__decorate$1([n$2({ attribute: `linear-style` })], EditableNumber.prototype, "linearStyle", void 0);
+__decorate$1([n$2({ attribute: `circular-style` })], EditableNumber.prototype, "circularStyle", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `no-drag`
 })], EditableNumber.prototype, "noDrag", void 0);
-__decorate([n$2({ type: Number })], EditableNumber.prototype, "precision", void 0);
-EditableNumber = __decorate([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
+__decorate$1([n$2({ type: Number })], EditableNumber.prototype, "precision", void 0);
+EditableNumber = __decorate$1([safeCustomElement(`ixfx-editable-number`)], EditableNumber);
 //#endregion
 //#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directive-helpers.js
 /**
@@ -23306,11 +23317,11 @@ function readByte(store, pos) {
 function length(store) {
 	return store.data.length;
 }
-function clamp$1(value) {
+function clamp$2(value) {
 	return Math.max(0, Math.min(255, value));
 }
 function writeByte(store, pos, value) {
-	const clampedValue = clamp$1(value);
+	const clampedValue = clamp$2(value);
 	const before = store.data[pos];
 	const diff = new Map([[pos, {
 		before,
@@ -23323,7 +23334,7 @@ function writeByte(store, pos, value) {
 function writeBytes(store, entries) {
 	const diff = /* @__PURE__ */ new Map();
 	entries.forEach((value, pos) => {
-		const clampedValue = clamp$1(value);
+		const clampedValue = clamp$2(value);
 		const before = store.data[pos];
 		diff.set(pos, {
 			before,
@@ -24377,28 +24388,28 @@ let IxfxHexEditorElement = class IxfxHexEditorElement extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: Number })], IxfxHexEditorElement.prototype, "columns", void 0);
-__decorate([n$2({ type: String })], IxfxHexEditorElement.prototype, "colourScheme", void 0);
-__decorate([n$2({ type: Boolean })], IxfxHexEditorElement.prototype, "showChangeset", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], IxfxHexEditorElement.prototype, "columns", void 0);
+__decorate$1([n$2({ type: String })], IxfxHexEditorElement.prototype, "colourScheme", void 0);
+__decorate$1([n$2({ type: Boolean })], IxfxHexEditorElement.prototype, "showChangeset", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-offset-col`
 })], IxfxHexEditorElement.prototype, "hideOffsetCol", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-hex-col`
 })], IxfxHexEditorElement.prototype, "hideHexCol", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `hide-text-col`
 })], IxfxHexEditorElement.prototype, "hideTextCol", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_selection", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_scrollTop", void 0);
-__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([safeCustomElement(`ixfx-hex-editor`)], IxfxHexEditorElement);
+__decorate$1([r$1()], IxfxHexEditorElement.prototype, "_selection", void 0);
+__decorate$1([r$1()], IxfxHexEditorElement.prototype, "_scrollTop", void 0);
+__decorate$1([r$1()], IxfxHexEditorElement.prototype, "_editState", void 0);
+__decorate$1([r$1()], IxfxHexEditorElement.prototype, "_containerH", void 0);
+__decorate$1([r$1()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
+__decorate$1([r$1()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
+IxfxHexEditorElement = __decorate$1([safeCustomElement(`ixfx-hex-editor`)], IxfxHexEditorElement);
 //#endregion
 //#region src/radial-input/svg-utils.ts
 const PI2 = Math.PI * 2;
@@ -24673,7 +24684,7 @@ function getMidpointPosition(radius, center = {
 /**
 * Clamp a value between min and max
 */
-function clamp(value, min, max) {
+function clamp$1(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
 /**
@@ -24694,7 +24705,7 @@ let RadialInputElement = class RadialInputElement extends i$4 {
 		return this.#_radius;
 	}
 	set radius(v) {
-		this.#_radius = clamp(v, 10, 50);
+		this.#_radius = clamp$1(v, 10, 50);
 	}
 	#lanes;
 	#dragging;
@@ -24739,7 +24750,7 @@ let RadialInputElement = class RadialInputElement extends i$4 {
 			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
 			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
 			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
-			this.#setValueFromRelative(clamp(relativeValue, 0, 1), true);
+			this.#setValueFromRelative(clamp$1(relativeValue, 0, 1), true);
 		};
 		this.#onPointerUp = () => {
 			this.#dragging = false;
@@ -24809,7 +24820,7 @@ let RadialInputElement = class RadialInputElement extends i$4 {
 	setLaneValue(key, value) {
 		const lane = this.#lanes.get(key);
 		if (lane) {
-			lane.value = clamp(value, 0, 1);
+			lane.value = clamp$1(value, 0, 1);
 			this.requestUpdate();
 		}
 	}
@@ -24839,7 +24850,7 @@ let RadialInputElement = class RadialInputElement extends i$4 {
 	}
 	#setValueFromRelative(relativeValue, isUserInteraction = false) {
 		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
-		const clampedValue = this.#quantise(clamp(newValue, this.min, this.max));
+		const clampedValue = this.#quantise(clamp$1(newValue, this.min, this.max));
 		if (clampedValue === this.value) return;
 		const previousValue = this.value;
 		this.value = clampedValue;
@@ -25219,27 +25230,27 @@ let RadialInputElement = class RadialInputElement extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "radius", null);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "value", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "min", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "max", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "step", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "stops", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], RadialInputElement.prototype, "radius", null);
+__decorate$1([n$2({ type: Number })], RadialInputElement.prototype, "value", void 0);
+__decorate$1([n$2({ type: Number })], RadialInputElement.prototype, "min", void 0);
+__decorate$1([n$2({ type: Number })], RadialInputElement.prototype, "max", void 0);
+__decorate$1([n$2({ type: Number })], RadialInputElement.prototype, "step", void 0);
+__decorate$1([n$2({ type: Number })], RadialInputElement.prototype, "stops", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `value-mode`
 })], RadialInputElement.prototype, "valueMode", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "flatten", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], RadialInputElement.prototype, "flatten", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `marker-style`
 })], RadialInputElement.prototype, "markerStyle", void 0);
-__decorate([n$2({ type: Boolean })], RadialInputElement.prototype, "wedge", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], RadialInputElement.prototype, "wedge", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], RadialInputElement.prototype, "disabled", void 0);
-RadialInputElement = __decorate([safeCustomElement(`ixfx-radial-input`)], RadialInputElement);
+RadialInputElement = __decorate$1([safeCustomElement(`ixfx-radial-input`)], RadialInputElement);
 //#endregion
 //#region src/labelled-radial-input/labelled-radial-input.ts
 let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
@@ -25401,25 +25412,25 @@ let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
   `;
 	}
 };
-__decorate([n$2({ type: Number })], LabelledRadialInput.prototype, "radius", void 0);
-__decorate([n$2({ type: Number })], LabelledRadialInput.prototype, "flatten", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], LabelledRadialInput.prototype, "radius", void 0);
+__decorate$1([n$2({ type: Number })], LabelledRadialInput.prototype, "flatten", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `marker-style`
 })], LabelledRadialInput.prototype, "markerStyle", void 0);
-__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "wedge", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], LabelledRadialInput.prototype, "wedge", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `value-mode`
 })], LabelledRadialInput.prototype, "valueMode", void 0);
-__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "tooltip", void 0);
-__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "flip", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], LabelledRadialInput.prototype, "tooltip", void 0);
+__decorate$1([n$2({ type: Boolean })], LabelledRadialInput.prototype, "flip", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `aspect-ratio-threshold`
 })], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
-__decorate([r$1()], LabelledRadialInput.prototype, "_isWide", void 0);
-LabelledRadialInput = __decorate([safeCustomElement(`ixfx-labelled-radial-input`)], LabelledRadialInput);
+__decorate$1([r$1()], LabelledRadialInput.prototype, "_isWide", void 0);
+LabelledRadialInput = __decorate$1([safeCustomElement(`ixfx-labelled-radial-input`)], LabelledRadialInput);
 //#endregion
 //#region src/led.ts
 let LedElement = class LedElement extends i$4 {
@@ -25489,23 +25500,23 @@ let LedElement = class LedElement extends i$4 {
   `;
 	}
 };
-__decorate([n$2({ type: Number })], LedElement.prototype, "value", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], LedElement.prototype, "value", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `lit`,
 	reflect: true
 })], LedElement.prototype, "lit", void 0);
-__decorate([n$2({ type: String })], LedElement.prototype, "color", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], LedElement.prototype, "color", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `blinking`,
 	reflect: true
 })], LedElement.prototype, "blinking", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `rate`
 })], LedElement.prototype, "rate", void 0);
-LedElement = __decorate([safeCustomElement(`ixfx-led`)], LedElement);
+LedElement = __decorate$1([safeCustomElement(`ixfx-led`)], LedElement);
 //#endregion
 //#region src/menu/menu-bar.ts
 let MenuBar = class MenuBar extends i$4 {
@@ -25588,7 +25599,7 @@ let MenuBar = class MenuBar extends i$4 {
 		return b`<slot role="menubar"></slot>`;
 	}
 };
-MenuBar = __decorate([safeCustomElement(`ixfx-menu-bar`)], MenuBar);
+MenuBar = __decorate$1([safeCustomElement(`ixfx-menu-bar`)], MenuBar);
 //#endregion
 //#region src/menu/menu-check-item.ts
 let MenuCheckItem = class MenuCheckItem extends i$4 {
@@ -25724,21 +25735,21 @@ let MenuCheckItem = class MenuCheckItem extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: String })], MenuCheckItem.prototype, "command", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], MenuCheckItem.prototype, "command", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `command-args`
 })], MenuCheckItem.prototype, "commandArgs", void 0);
-__decorate([n$2({ type: String })], MenuCheckItem.prototype, "label", void 0);
-__decorate([n$2({ type: Boolean })], MenuCheckItem.prototype, "checked", void 0);
-__decorate([n$2({ type: Boolean })], MenuCheckItem.prototype, "disabled", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], MenuCheckItem.prototype, "label", void 0);
+__decorate$1([n$2({ type: Boolean })], MenuCheckItem.prototype, "checked", void 0);
+__decorate$1([n$2({ type: Boolean })], MenuCheckItem.prototype, "disabled", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name`
 })], 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([safeCustomElement(`ixfx-menu-check-item`)], MenuCheckItem);
+__decorate$1([n$2({ attribute: false })], MenuCheckItem.prototype, "registry", void 0);
+__decorate$1([n$2({ attribute: false })], MenuCheckItem.prototype, "keyboardManager", void 0);
+MenuCheckItem = __decorate$1([safeCustomElement(`ixfx-menu-check-item`)], MenuCheckItem);
 //#endregion
 //#region src/menu/menu-command-controller.ts
 var MenuCommandController = class {
@@ -26000,24 +26011,24 @@ let MenuSubTrigger = class MenuSubTrigger extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: String })], MenuSubTrigger.prototype, "command", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], MenuSubTrigger.prototype, "command", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `command-args`
 })], MenuSubTrigger.prototype, "commandArgs", void 0);
-__decorate([n$2({ type: String })], MenuSubTrigger.prototype, "label", void 0);
-__decorate([n$2({ type: Boolean })], MenuSubTrigger.prototype, "disabled", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], MenuSubTrigger.prototype, "label", void 0);
+__decorate$1([n$2({ type: Boolean })], MenuSubTrigger.prototype, "disabled", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name`
 })], MenuSubTrigger.prototype, "iconName", void 0);
-__decorate([n$2({ attribute: false })], MenuSubTrigger.prototype, "registry", void 0);
-__decorate([n$2({ attribute: false })], MenuSubTrigger.prototype, "keyboardManager", void 0);
-__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([safeCustomElement(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
+__decorate$1([n$2({ attribute: false })], MenuSubTrigger.prototype, "registry", void 0);
+__decorate$1([n$2({ attribute: false })], MenuSubTrigger.prototype, "keyboardManager", void 0);
+__decorate$1([r$1()], MenuSubTrigger.prototype, "_hasSubmenu", void 0);
+__decorate$1([e$4(`slot[name="submenu"]`)], MenuSubTrigger.prototype, "_slot", void 0);
+__decorate$1([e$4(`.submenu-popover`)], MenuSubTrigger.prototype, "_submenuPopover", void 0);
+__decorate$1([e$4(`.item`)], MenuSubTrigger.prototype, "_itemEl", void 0);
+MenuSubTrigger = _MenuSubTrigger = __decorate$1([safeCustomElement(`ixfx-menu-sub-trigger`)], MenuSubTrigger);
 //#endregion
 //#region src/menu/menu-separator.ts
 let MenuSeparator = class MenuSeparator extends i$4 {
@@ -26038,7 +26049,7 @@ let MenuSeparator = class MenuSeparator extends i$4 {
 		return b`<div class="separator"></div>`;
 	}
 };
-MenuSeparator = __decorate([safeCustomElement(`ixfx-menu-separator`)], MenuSeparator);
+MenuSeparator = __decorate$1([safeCustomElement(`ixfx-menu-separator`)], MenuSeparator);
 //#endregion
 //#region src/menu/menu-header.ts
 let MenuHeader = class MenuHeader extends i$4 {
@@ -26063,8 +26074,8 @@ let MenuHeader = class MenuHeader extends i$4 {
 		return b`<div>${this.label}</div>`;
 	}
 };
-__decorate([n$2({ type: String })], MenuHeader.prototype, "label", void 0);
-MenuHeader = __decorate([safeCustomElement(`ixfx-menu-header`)], MenuHeader);
+__decorate$1([n$2({ type: String })], MenuHeader.prototype, "label", void 0);
+MenuHeader = __decorate$1([safeCustomElement(`ixfx-menu-header`)], MenuHeader);
 //#endregion
 //#region src/menu/menu-from-tree.ts
 function isLeaf(node) {
@@ -26230,15 +26241,15 @@ let MenuRadioItem = class MenuRadioItem extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: String })], MenuRadioItem.prototype, "value", void 0);
-__decorate([n$2({ type: String })], MenuRadioItem.prototype, "label", void 0);
-__decorate([n$2({ type: Boolean })], MenuRadioItem.prototype, "disabled", void 0);
-__decorate([n$2({ type: String })], MenuRadioItem.prototype, "groupValue", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], MenuRadioItem.prototype, "value", void 0);
+__decorate$1([n$2({ type: String })], MenuRadioItem.prototype, "label", void 0);
+__decorate$1([n$2({ type: Boolean })], MenuRadioItem.prototype, "disabled", void 0);
+__decorate$1([n$2({ type: String })], MenuRadioItem.prototype, "groupValue", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name`
 })], MenuRadioItem.prototype, "iconName", void 0);
-MenuRadioItem = __decorate([safeCustomElement(`ixfx-menu-radio-item`)], MenuRadioItem);
+MenuRadioItem = __decorate$1([safeCustomElement(`ixfx-menu-radio-item`)], MenuRadioItem);
 //#endregion
 //#region src/menu/menu-radio-group.ts
 let MenuRadioGroup = class MenuRadioGroup extends i$4 {
@@ -26287,10 +26298,10 @@ let MenuRadioGroup = class MenuRadioGroup extends i$4 {
     `;
 	}
 };
-__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([safeCustomElement(`ixfx-menu-radio-group`)], MenuRadioGroup);
+__decorate$1([n$2({ type: String })], MenuRadioGroup.prototype, "name", void 0);
+__decorate$1([n$2({ type: String })], MenuRadioGroup.prototype, "value", void 0);
+__decorate$1([r$1()], MenuRadioGroup.prototype, "slottedElements", void 0);
+MenuRadioGroup = __decorate$1([safeCustomElement(`ixfx-menu-radio-group`)], MenuRadioGroup);
 //#endregion
 //#region src/menu/index.ts
 var menu_exports = /* @__PURE__ */ __exportAll$5({
@@ -27340,24 +27351,24 @@ let MillerBaseElement = class MillerBaseElement extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ type: Object })], MillerBaseElement.prototype, "root", void 0);
-__decorate([n$2({ attribute: false })], MillerBaseElement.prototype, "model", void 0);
-__decorate([n$2({ type: Boolean })], MillerBaseElement.prototype, "headers", void 0);
-__decorate([n$2({ type: String })], MillerBaseElement.prototype, "interactionMode", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Object })], MillerBaseElement.prototype, "root", void 0);
+__decorate$1([n$2({ attribute: false })], MillerBaseElement.prototype, "model", void 0);
+__decorate$1([n$2({ type: Boolean })], MillerBaseElement.prototype, "headers", void 0);
+__decorate$1([n$2({ type: String })], MillerBaseElement.prototype, "interactionMode", void 0);
+__decorate$1([n$2({
 	reflect: true,
 	attribute: `selection-filter`
 })], MillerBaseElement.prototype, "selectionFilter", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	reflect: true,
 	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([safeCustomElement(`ixfx-miller-base`)], MillerBaseElement);
+__decorate$1([n$2({ type: Object })], MillerBaseElement.prototype, "loadChildren", void 0);
+__decorate$1([n$2({ attribute: false })], MillerBaseElement.prototype, "filterPredicate", void 0);
+__decorate$1([r$1()], MillerBaseElement.prototype, "_columns", void 0);
+__decorate$1([r$1()], MillerBaseElement.prototype, "_loadingDepth", void 0);
+__decorate$1([r$1()], MillerBaseElement.prototype, "_selectedNodes", void 0);
+MillerBaseElement = __decorate$1([safeCustomElement(`ixfx-miller-base`)], MillerBaseElement);
 //#endregion
 //#region src/miller/miller-list.ts
 /**
@@ -27518,7 +27529,7 @@ let MillerListElement = class MillerListElement extends MillerBaseElement {
 		];
 	}
 };
-MillerListElement = __decorate([safeCustomElement(`ixfx-miller-list`)], MillerListElement);
+MillerListElement = __decorate$1([safeCustomElement(`ixfx-miller-list`)], MillerListElement);
 //#endregion
 //#region src/miller/miller-tree-controller.ts
 /**
@@ -27715,22 +27726,22 @@ let PanelGroupElement = class PanelGroupElement extends i$4 {
   `;
 	}
 };
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	reflect: true
 })], PanelGroupElement.prototype, "orientation", void 0);
-__decorate([n$2({ type: String })], PanelGroupElement.prototype, "variant", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], PanelGroupElement.prototype, "variant", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `toggle-interaction`
 })], PanelGroupElement.prototype, "toggleInteraction", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `allow-multiple`
 })], PanelGroupElement.prototype, "allowMultiple", void 0);
-__decorate([n$2()], PanelGroupElement.prototype, "gap", void 0);
-__decorate([o$2({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
-PanelGroupElement = __decorate([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
+__decorate$1([n$2()], PanelGroupElement.prototype, "gap", void 0);
+__decorate$1([o$2({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
+PanelGroupElement = __decorate$1([safeCustomElement(`ixfx-panel-group`)], PanelGroupElement);
 //#endregion
 //#region src/panel/panel.ts
 let PanelElement = class PanelElement extends i$4 {
@@ -28106,32 +28117,32 @@ let PanelElement = class PanelElement extends i$4 {
   `;
 	}
 };
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], PanelElement.prototype, "collapsed", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `orientation`,
 	reflect: true
 })], PanelElement.prototype, "orientation", void 0);
-__decorate([n$2({ type: Boolean })], PanelElement.prototype, "closable", void 0);
-__decorate([n$2({ type: String })], PanelElement.prototype, "title", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], PanelElement.prototype, "closable", void 0);
+__decorate$1([n$2({ type: String })], PanelElement.prototype, "title", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name`
 })], PanelElement.prototype, "iconName", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `toggle-interaction`
 })], PanelElement.prototype, "toggleInteraction", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `variant`,
 	reflect: true
 })], PanelElement.prototype, "variant", void 0);
-__decorate([r$1()], PanelElement.prototype, "_isVertical", void 0);
-PanelElement = __decorate([safeCustomElement(`ixfx-panel`)], PanelElement);
+__decorate$1([r$1()], PanelElement.prototype, "_isVertical", void 0);
+PanelElement = __decorate$1([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;
@@ -29154,35 +29165,35 @@ let PlotSingleAxis = class PlotSingleAxis extends i$4 {
   `;
 	}
 };
-__decorate([n$2({ attribute: `draw-style` })], PlotSingleAxis.prototype, "drawStyle", void 0);
-__decorate([n$2({ attribute: `age-style` })], PlotSingleAxis.prototype, "ageStyle", void 0);
-__decorate([n$2()], PlotSingleAxis.prototype, "title", void 0);
-__decorate([n$2({ type: Boolean })], PlotSingleAxis.prototype, "precise", void 0);
-__decorate([n$2({ type: Boolean })], PlotSingleAxis.prototype, "tooltips", void 0);
-__decorate([n$2({ type: Number })], PlotSingleAxis.prototype, "capacity", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ attribute: `draw-style` })], PlotSingleAxis.prototype, "drawStyle", void 0);
+__decorate$1([n$2({ attribute: `age-style` })], PlotSingleAxis.prototype, "ageStyle", void 0);
+__decorate$1([n$2()], PlotSingleAxis.prototype, "title", void 0);
+__decorate$1([n$2({ type: Boolean })], PlotSingleAxis.prototype, "precise", void 0);
+__decorate$1([n$2({ type: Boolean })], PlotSingleAxis.prototype, "tooltips", void 0);
+__decorate$1([n$2({ type: Number })], PlotSingleAxis.prototype, "capacity", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `persistent-scale`
 })], PlotSingleAxis.prototype, "persistentScale", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], PlotSingleAxis.prototype, "paused", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `click-pauses`
 })], PlotSingleAxis.prototype, "clickPauses", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `shaded`
 })], PlotSingleAxis.prototype, "shaded", 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([safeCustomElement(`ixfx-plot-single-axis`)], PlotSingleAxis);
+__decorate$1([n$2({ attribute: `area-color` })], PlotSingleAxis.prototype, "areaColor", void 0);
+__decorate$1([n$2({ attribute: `color-mode` })], PlotSingleAxis.prototype, "colorMode", void 0);
+__decorate$1([n$2({ attribute: `color-easing` })], PlotSingleAxis.prototype, "colorEasing", void 0);
+__decorate$1([n$2({ attribute: `color-scale` })], PlotSingleAxis.prototype, "colorScale", void 0);
+__decorate$1([r$1()], PlotSingleAxis.prototype, "_width", void 0);
+__decorate$1([r$1()], PlotSingleAxis.prototype, "_height", void 0);
+PlotSingleAxis = __decorate$1([safeCustomElement(`ixfx-plot-single-axis`)], PlotSingleAxis);
 //#endregion
 //#region src/plots/xy-axis.ts
 let PlotXyAxis = class PlotXyAxis extends i$4 {
@@ -29429,30 +29440,30 @@ let PlotXyAxis = class PlotXyAxis extends i$4 {
   `;
 	}
 };
-__decorate([n$2({ attribute: `draw-style` })], PlotXyAxis.prototype, "drawStyle", void 0);
-__decorate([n$2({ attribute: `age-style` })], PlotXyAxis.prototype, "ageStyle", void 0);
-__decorate([n$2()], PlotXyAxis.prototype, "title", void 0);
-__decorate([n$2({ type: Boolean })], PlotXyAxis.prototype, "precise", void 0);
-__decorate([n$2({ type: Boolean })], PlotXyAxis.prototype, "tooltips", void 0);
-__decorate([n$2({ type: Number })], PlotXyAxis.prototype, "capacity", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ attribute: `draw-style` })], PlotXyAxis.prototype, "drawStyle", void 0);
+__decorate$1([n$2({ attribute: `age-style` })], PlotXyAxis.prototype, "ageStyle", void 0);
+__decorate$1([n$2()], PlotXyAxis.prototype, "title", void 0);
+__decorate$1([n$2({ type: Boolean })], PlotXyAxis.prototype, "precise", void 0);
+__decorate$1([n$2({ type: Boolean })], PlotXyAxis.prototype, "tooltips", void 0);
+__decorate$1([n$2({ type: Number })], PlotXyAxis.prototype, "capacity", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `persistent-scale`
 })], PlotXyAxis.prototype, "persistentScale", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], PlotXyAxis.prototype, "paused", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `click-pauses`
 })], PlotXyAxis.prototype, "clickPauses", void 0);
-__decorate([n$2({ attribute: `color-mode` })], PlotXyAxis.prototype, "colorMode", void 0);
-__decorate([n$2({ attribute: `color-easing` })], PlotXyAxis.prototype, "colorEasing", void 0);
-__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([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
+__decorate$1([n$2({ attribute: `color-mode` })], PlotXyAxis.prototype, "colorMode", void 0);
+__decorate$1([n$2({ attribute: `color-easing` })], PlotXyAxis.prototype, "colorEasing", void 0);
+__decorate$1([n$2({ attribute: `color-scale` })], PlotXyAxis.prototype, "colorScale", void 0);
+__decorate$1([r$1()], PlotXyAxis.prototype, "_width", void 0);
+__decorate$1([r$1()], PlotXyAxis.prototype, "_height", void 0);
+PlotXyAxis = __decorate$1([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
 //#endregion
 //#region src/polar-pad/polar-pad.ts
 /**
@@ -29946,44 +29957,44 @@ let PolarPad = class PolarPad extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: Number })], PolarPad.prototype, "angle", void 0);
-__decorate([n$2({ type: Number })], PolarPad.prototype, "radius", void 0);
-__decorate([n$2({ type: Number })], PolarPad.prototype, "rings", void 0);
-__decorate([n$2({ type: Number })], PolarPad.prototype, "rays", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], PolarPad.prototype, "angle", void 0);
+__decorate$1([n$2({ type: Number })], PolarPad.prototype, "radius", void 0);
+__decorate$1([n$2({ type: Number })], PolarPad.prototype, "rings", void 0);
+__decorate$1([n$2({ type: Number })], PolarPad.prototype, "rays", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true,
 	attribute: `show-ray`
 })], PolarPad.prototype, "showRay", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true,
 	attribute: `show-origin`
 })], PolarPad.prototype, "showOrigin", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true,
 	attribute: `hide-cursor`
 })], PolarPad.prototype, "hideCursor", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `snap-value`,
 	reflect: true
 })], PolarPad.prototype, "snapValue", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], PolarPad.prototype, "disabled", void 0);
-__decorate([n$2({ type: Number })], PolarPad.prototype, "stops", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], PolarPad.prototype, "stops", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `stops-angle`
 })], PolarPad.prototype, "stopsAngle", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `stops-radius`
 })], PolarPad.prototype, "stopsRadius", void 0);
-PolarPad = __decorate([safeCustomElement(`ixfx-polar-pad`)], PolarPad);
+PolarPad = __decorate$1([safeCustomElement(`ixfx-polar-pad`)], PolarPad);
 //#endregion
 //#region src/styles/tooltip.ts
 const tooltipValueStyles = i$7`
@@ -30515,27 +30526,27 @@ let RangeInput = class RangeInput extends i$4 {
   `];
 	}
 };
-__decorate([n$2({ type: Number })], RangeInput.prototype, "min", void 0);
-__decorate([n$2({ type: Number })], RangeInput.prototype, "max", void 0);
-__decorate([n$2({ type: Number })], RangeInput.prototype, "value", void 0);
-__decorate([n$2({ type: Number })], RangeInput.prototype, "step", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], RangeInput.prototype, "min", void 0);
+__decorate$1([n$2({ type: Number })], RangeInput.prototype, "max", void 0);
+__decorate$1([n$2({ type: Number })], RangeInput.prototype, "value", void 0);
+__decorate$1([n$2({ type: Number })], RangeInput.prototype, "step", void 0);
+__decorate$1([n$2({
 	type: String,
 	reflect: true
 })], RangeInput.prototype, "orientation", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], RangeInput.prototype, "swipeable", void 0);
-__decorate([n$2({ type: Boolean })], RangeInput.prototype, "tooltip", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], RangeInput.prototype, "tooltip", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `tooltip-orientation`
 })], RangeInput.prototype, "tooltipOrientation", void 0);
-__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([safeCustomElement(`ixfx-range-input`)], RangeInput);
+__decorate$1([n$2({ attribute: false })], RangeInput.prototype, "labelFormatter", void 0);
+__decorate$1([e$4(`input`)], RangeInput.prototype, "_inputEl", void 0);
+__decorate$1([e$4(`ixfx-tooltip`)], RangeInput.prototype, "_tooltipEl", void 0);
+RangeInput = __decorate$1([safeCustomElement(`ixfx-range-input`)], RangeInput);
 //#endregion
 //#region src/util/drag.ts
 function getCoordinates(event) {
@@ -31027,28 +31038,28 @@ let RangeMultiElement = class RangeMultiElement extends i$4 {
 		];
 	}
 };
-__decorate([n$2({ type: Boolean })], RangeMultiElement.prototype, "tooltip", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], RangeMultiElement.prototype, "tooltip", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `tooltip-orientation`
 })], RangeMultiElement.prototype, "tooltipOrientation", void 0);
-__decorate([n$2({ type: String })], RangeMultiElement.prototype, "crossover", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], RangeMultiElement.prototype, "crossover", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `resize-mode`
 })], RangeMultiElement.prototype, "resizeMode", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	reflect: true
 })], RangeMultiElement.prototype, "orientation", void 0);
-__decorate([n$2()], RangeMultiElement.prototype, "step", void 0);
-__decorate([n$2({ type: Number })], RangeMultiElement.prototype, "a", void 0);
-__decorate([n$2({ type: Number })], RangeMultiElement.prototype, "b", void 0);
-__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([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
+__decorate$1([n$2()], RangeMultiElement.prototype, "step", void 0);
+__decorate$1([n$2({ type: Number })], RangeMultiElement.prototype, "a", void 0);
+__decorate$1([n$2({ type: Number })], RangeMultiElement.prototype, "b", void 0);
+__decorate$1([n$2({ type: Number })], RangeMultiElement.prototype, "max", null);
+__decorate$1([n$2({ type: Number })], RangeMultiElement.prototype, "min", null);
+__decorate$1([t$3({ capture: true })], RangeMultiElement.prototype, "_onInput", null);
+__decorate$1([t$3({ capture: true })], RangeMultiElement.prototype, "_onPointerDown", null);
+RangeMultiElement = __decorate$1([safeCustomElement(`ixfx-range-multi`)], RangeMultiElement);
 //#endregion
 //#region src/range/range.ts
 let RangeElement = class RangeElement extends i$4 {
@@ -31159,24 +31170,24 @@ let RangeElement = class RangeElement extends i$4 {
 		];
 	}
 };
-__decorate([n$2({ type: Boolean })], RangeElement.prototype, "tooltip", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], RangeElement.prototype, "tooltip", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `tooltip-orientation`
 })], RangeElement.prototype, "tooltipOrientation", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	reflect: true
 })], RangeElement.prototype, "orientation", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: true
 })], RangeElement.prototype, "disabled", void 0);
-__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([safeCustomElement(`ixfx-range`)], RangeElement);
+__decorate$1([n$2({ type: Number })], RangeElement.prototype, "min", void 0);
+__decorate$1([n$2({ type: Number })], RangeElement.prototype, "max", void 0);
+__decorate$1([n$2({ type: Number })], RangeElement.prototype, "value", null);
+__decorate$1([n$2({ type: Number })], RangeElement.prototype, "step", void 0);
+RangeElement = __decorate$1([safeCustomElement(`ixfx-range`)], RangeElement);
 //#endregion
 //#region src/selecthorizontal.ts
 let SelectHorizontalElement = class SelectHorizontalElement extends i$4 {
@@ -31211,8 +31222,8 @@ let SelectHorizontalElement = class SelectHorizontalElement extends i$4 {
 `;
 	}
 };
-__decorate([n$2({ type: Boolean })], SelectHorizontalElement.prototype, "editMode", void 0);
-SelectHorizontalElement = __decorate([safeCustomElement(`ixfx-selecthorizontal-element`)], SelectHorizontalElement);
+__decorate$1([n$2({ type: Boolean })], SelectHorizontalElement.prototype, "editMode", void 0);
+SelectHorizontalElement = __decorate$1([safeCustomElement(`ixfx-selecthorizontal-element`)], SelectHorizontalElement);
 //#endregion
 //#region src/snap-container/snap-container.ts
 let SnapContainer = class SnapContainer extends i$4 {
@@ -31485,25 +31496,25 @@ let SnapContainer = class SnapContainer extends i$4 {
     `;
 	}
 };
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `orientation`
 })], SnapContainer.prototype, "orientation", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `snap-positions`
 })], SnapContainer.prototype, "snapPositions", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `snap-logic`
 })], SnapContainer.prototype, "snapLogic", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `click-snap`
 })], 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([safeCustomElement(`ixfx-snap-container`)], SnapContainer);
+__decorate$1([n$2({ type: Number })], SnapContainer.prototype, "snap", void 0);
+__decorate$1([r$1()], SnapContainer.prototype, "_dragging", void 0);
+SnapContainer = __decorate$1([safeCustomElement(`ixfx-snap-container`)], SnapContainer);
 //#endregion
 //#region src/split-layout/split-layout.ts
 let SplitLayoutElement = class SplitLayoutElement extends i$4 {
@@ -31551,7 +31562,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$4 {
 			if (!bounds) return;
 			const threshold = 5;
 			if (this.layout === `horizontal`) {
-				const relativeY = clamp$2((event.y - bounds.y) / bounds.height);
+				const relativeY = clamp$3((event.y - bounds.y) / bounds.height);
 				if (this.collapsible && this.collapsedA) {
 					if (relativeY > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
 						this.collapsedA = false;
@@ -31589,7 +31600,7 @@ let SplitLayoutElement = class SplitLayoutElement extends i$4 {
 					this.#collapsedBPointerAtCollapse = relativeY;
 				}
 			} else {
-				const relativeX = clamp$2((event.x - bounds.x) / bounds.width);
+				const relativeX = clamp$3((event.x - bounds.x) / bounds.width);
 				if (this.collapsible && this.collapsedA) {
 					if (relativeX > (this.#collapsedAPointerAtCollapse ?? .05) + this.#hysteresisThreshold) {
 						this.collapsedA = false;
@@ -32022,26 +32033,26 @@ let SplitLayoutElement = class SplitLayoutElement extends i$4 {
   `;
 	}
 };
-__decorate([n$2({ type: String })], SplitLayoutElement.prototype, "layout", void 0);
-__decorate([n$2({ type: String })], SplitLayoutElement.prototype, "sizeA", void 0);
-__decorate([n$2({ type: String })], SplitLayoutElement.prototype, "sizeB", void 0);
-__decorate([n$2({ type: Boolean })], SplitLayoutElement.prototype, "fixedA", void 0);
-__decorate([n$2({ type: Boolean })], SplitLayoutElement.prototype, "fixedB", void 0);
-__decorate([n$2({ type: Boolean })], SplitLayoutElement.prototype, "collapsible", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], SplitLayoutElement.prototype, "layout", void 0);
+__decorate$1([n$2({ type: String })], SplitLayoutElement.prototype, "sizeA", void 0);
+__decorate$1([n$2({ type: String })], SplitLayoutElement.prototype, "sizeB", void 0);
+__decorate$1([n$2({ type: Boolean })], SplitLayoutElement.prototype, "fixedA", void 0);
+__decorate$1([n$2({ type: Boolean })], SplitLayoutElement.prototype, "fixedB", void 0);
+__decorate$1([n$2({ type: Boolean })], SplitLayoutElement.prototype, "collapsible", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], SplitLayoutElement.prototype, "collapsedA", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], SplitLayoutElement.prototype, "collapsedB", void 0);
-__decorate([n$2({ type: String })], SplitLayoutElement.prototype, "minSizeA", void 0);
-__decorate([n$2({ type: String })], SplitLayoutElement.prototype, "maxSizeA", void 0);
-__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([safeCustomElement(`ixfx-split-layout`)], SplitLayoutElement);
+__decorate$1([n$2({ type: String })], SplitLayoutElement.prototype, "minSizeA", void 0);
+__decorate$1([n$2({ type: String })], SplitLayoutElement.prototype, "maxSizeA", void 0);
+__decorate$1([n$2({ type: String })], SplitLayoutElement.prototype, "minSizeB", void 0);
+__decorate$1([n$2({ type: String })], SplitLayoutElement.prototype, "maxSizeB", void 0);
+__decorate$1([r$1()], SplitLayoutElement.prototype, "_hasCorner", void 0);
+SplitLayoutElement = __decorate$1([safeCustomElement(`ixfx-split-layout`)], SplitLayoutElement);
 //#endregion
 //#region src/swipe/swipe.ts
 let SwipeElement = class SwipeElement extends i$4 {
@@ -32234,11 +32245,11 @@ let SwipeElement = class SwipeElement extends i$4 {
     `;
 	}
 };
-__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([safeCustomElement(`ixfx-swipe`)], SwipeElement);
+__decorate$1([n$2({ type: Number })], SwipeElement.prototype, "barSpacing", void 0);
+__decorate$1([n$2({ type: Number })], SwipeElement.prototype, "barWidth", void 0);
+__decorate$1([n$2({ type: Number })], SwipeElement.prototype, "debounceMs", void 0);
+__decorate$1([n$2({ type: Number })], SwipeElement.prototype, "retractDurationMs", void 0);
+SwipeElement = __decorate$1([safeCustomElement(`ixfx-swipe`)], SwipeElement);
 //#endregion
 //#region src/tabs/tab-list-item.ts
 let TabListItemElement = class TabListItemElement extends i$4 {
@@ -32412,19 +32423,19 @@ let TabListItemElement = class TabListItemElement extends i$4 {
     `];
 	}
 };
-__decorate([n$2({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `icon-name`
 })], TabListItemElement.prototype, "iconName", void 0);
-__decorate([n$2({ type: String })], TabListItemElement.prototype, "description", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], TabListItemElement.prototype, "description", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `command-active`
 })], 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([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
+__decorate$1([n$2({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
+__decorate$1([r$1()], TabListItemElement.prototype, "_compact", void 0);
+TabListItemElement = __decorate$1([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/tabs/tab-list.ts
 let TabListElement = class TabListElement extends i$4 {
@@ -32618,10 +32629,10 @@ let TabListElement = class TabListElement extends i$4 {
   `;
 	}
 };
-__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([safeCustomElement(`ixfx-tab-list`)], TabListElement);
+__decorate$1([n$2({ type: String })], TabListElement.prototype, "orientation", void 0);
+__decorate$1([n$2({ type: Boolean })], TabListElement.prototype, "flip", void 0);
+__decorate$1([n$2({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
+TabListElement = __decorate$1([safeCustomElement(`ixfx-tab-list`)], TabListElement);
 //#endregion
 //#region src/tabs/tab-panel.ts
 let TabPanelElement = class TabPanelElement extends i$4 {
@@ -32643,7 +32654,7 @@ let TabPanelElement = class TabPanelElement extends i$4 {
   `;
 	}
 };
-TabPanelElement = __decorate([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
+TabPanelElement = __decorate$1([safeCustomElement(`ixfx-tab-panel`)], TabPanelElement);
 //#endregion
 //#region src/tabs/tab-panels.ts
 let TabPanelsElement = class TabPanelsElement extends i$4 {
@@ -32700,8 +32711,8 @@ let TabPanelsElement = class TabPanelsElement extends i$4 {
   `;
 	}
 };
-__decorate([o$2()], TabPanelsElement.prototype, "_listItems", void 0);
-TabPanelsElement = __decorate([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
+__decorate$1([o$2()], TabPanelsElement.prototype, "_listItems", void 0);
+TabPanelsElement = __decorate$1([safeCustomElement(`ixfx-tab-panels`)], TabPanelsElement);
 //#endregion
 //#region src/timeline/timeline-controller.ts
 /**
@@ -33693,24 +33704,1453 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends i$4 {
 		this.style.cursor = ``;
 	}
 };
-__decorate([n$2({ type: String })], TimelineTrackTabElement.prototype, "label", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], TimelineTrackTabElement.prototype, "label", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `track-key`
 })], TimelineTrackTabElement.prototype, "trackKey", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "selected", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "reorderable", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "resizable", void 0);
-TimelineTrackTabElement = __decorate([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+TimelineTrackTabElement = __decorate$1([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/convert.js
+/**
+* Converts viewport-relative coordinates to canvas-relative (logical) coordinates.
+*
+* This function accounts for the current scroll position and content offset to translate
+* coordinates from the visible viewport space to the logical canvas space.
+*
+* @param x - The x-coordinate in viewport space (pixels from left edge of viewport)
+* @param y - The y-coordinate in viewport space (pixels from top)
+* @param scrollLeft - The current horizontal scroll position in pixels
+* @param contentOffset - The horizontal offset applied to center content in single-tile mode
+* @param scrollTop - The current vertical scroll position in pixels
+* @param contentOffsetY - The vertical offset applied to center content in single-tile-row mode
+* @returns The point in canvas (logical) coordinate space
+*
+* @example
+* ```typescript
+* // Viewport coordinate (100, 50) with scroll at 500 and no offset
+* const canvasPoint = viewportToCanvas(100, 50, 500, 0, 0, 0);
+* // Returns: { x: 600, y: 50 }
+* ```
+*/
+function viewportToCanvas(x, y, scrollLeft, contentOffset, scrollTop = 0, contentOffsetY = 0) {
+	return {
+		x: x + scrollLeft - contentOffset,
+		y: y + scrollTop - contentOffsetY
+	};
+}
+/**
+* Converts canvas-relative (logical) coordinates to viewport-relative coordinates.
+*
+* This function translates coordinates from the logical canvas space back to the
+* visible viewport space, accounting for scroll position and content offset.
+*
+* @param x - The x-coordinate in canvas (logical) space
+* @param y - The y-coordinate in canvas (logical) space
+* @param scrollLeft - The current horizontal scroll position in pixels
+* @param contentOffset - The horizontal offset applied to center content in single-tile mode
+* @param scrollTop - The current vertical scroll position in pixels
+* @param contentOffsetY - The vertical offset applied to center content in single-tile-row mode
+* @returns The point in viewport coordinate space
+*
+* @example
+* ```typescript
+* // Canvas coordinate (600, 50) with scroll at 500 and no offset
+* const viewportPoint = canvasToViewport(600, 50, 500, 0, 0, 0);
+* // Returns: { x: 100, y: 50 }
+* ```
+*/
+function canvasToViewport(x, y, scrollLeft, contentOffset, scrollTop = 0, contentOffsetY = 0) {
+	return {
+		x: x - scrollLeft + contentOffset,
+		y: y - scrollTop + contentOffsetY
+	};
+}
+/**
+* Clamps a numeric value between a minimum and maximum bound.
+*
+* This is a utility function to constrain values within a valid range.
+*
+* @param value - The value to clamp
+* @param min - The minimum allowed value
+* @param max - The maximum allowed value
+* @returns The clamped value, guaranteed to be between min and max (inclusive)
+*
+* @example
+* ```typescript
+* clamp(15, 0, 10);  // Returns: 10
+* clamp(-5, 0, 10);  // Returns: 0
+* clamp(5, 0, 10);   // Returns: 5
+* ```
+*/
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/styles.js
+/**
+* CSS styles for the VCanvas component.
+*
+* These styles define the layout and positioning of:
+* - The host element (`:host`)
+* - The scroll container (`.scroll-container`)
+* - The content spacer (`.spacer`)
+* - The tile pool container (`.tile-pool`)
+* - Canvas elements
+* - The children container for slotted elements (`.children-container`)
+*
+* The styles use absolute positioning to create a virtualized scrolling experience
+* where tiles are rendered only when visible in the viewport.
+*
+* @example
+* ```typescript
+* import { vcanvasStyles } from '@clinth/vcanvas';
+*
+* // Styles are automatically applied when using the VCanvas component
+* // You typically don't need to use these directly unless extending the component
+* ```
+*/
+const vcanvasStyles = i$7`
+  :host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .scroll-container {
+    overflow-x: auto;
+    overflow-y: clip;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    touch-action: pan-x;
+    scrollbar-width: var(--scrollbar-width, auto);
+    scrollbar-color: var(--scrollbar-color, auto);
+  }
+
+  .scroll-container.vertical {
+    overflow-y: auto;
+    touch-action: pan-x pan-y;
+  }
+
+  .spacer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .tile-pool {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  canvas {
+    position: absolute;
+    top: 0;
+    pointer-events: auto;
+  }
+
+  .children-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+  }
+
+  @property --left-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --right-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@keyframes scrollfade {
+  0% {
+    --left-fade: 0;
+  }
+  10%,
+  100% {
+    --left-fade: 3rem;
+  }
+  0%,
+  90% {
+    --right-fade: 3rem;
+  }
+  100% {
+    --right-fade: 0;
+  }
+}
+
+.scrollable {
+  mask: linear-gradient(to right, #0000, #ffff var(--left-fade) calc(100% - var(--right-fade)), #0000);
+  animation: scrollfade;
+  animation-timeline: --scrollfade;
+  scroll-timeline: --scrollfade x;
+}
+
+`;
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/tile-calculator.js
+/**
+* Calculates the width of a tile based on viewport width and multiplier.
+*
+* @param viewportWidth - The width of the viewport in pixels
+* @param multiplier - The multiplier to apply (typically 0.25 to 1.0)
+* @returns The calculated tile width in pixels
+*
+* @example
+* ```typescript
+* getTileWidth(1000, 0.5);  // Returns: 500
+* ```
+*/
+function getTileWidth(viewportWidth, multiplier) {
+	return viewportWidth * multiplier;
+}
+/**
+* Determines if the content fits within a single tile (single-tile mode).
+*
+* In single-tile mode, the content is centered in the viewport rather than
+* being scrollable. This also returns true when viewport width is 0 as a
+* defensive edge case.
+*
+* @param logicalWidth - The total logical width of the content
+* @param viewportWidth - The width of the viewport in pixels
+* @returns `true` if content fits in single tile, `false` otherwise
+*
+* @example
+* ```typescript
+* isSingleTileMode(500, 1000);   // Returns: true
+* isSingleTileMode(1500, 1000);  // Returns: false
+* ```
+*/
+function isSingleTileMode(logicalWidth, viewportWidth) {
+	if (viewportWidth === 0) return true;
+	return logicalWidth <= viewportWidth;
+}
+/**
+* Calculates the horizontal offset to center content in single-tile mode.
+*
+* In multi-tile mode (when content exceeds viewport), this returns 0.
+* In single-tile mode, this calculates the offset needed to center the content.
+*
+* @param logicalWidth - The total logical width of the content
+* @param viewportWidth - The width of the viewport in pixels
+* @returns The horizontal offset in pixels, or 0 in multi-tile mode
+*
+* @example
+* ```typescript
+* // Content width 500 in viewport 1000: center it with 250px offset
+* getContentOffset(500, 1000);   // Returns: 250
+*
+* // Content width 2000 in viewport 1000: no offset needed
+* getContentOffset(2000, 1000);  // Returns: 0
+* ```
+*/
+function getContentOffset(logicalWidth, viewportWidth) {
+	if (logicalWidth < 0 || viewportWidth === 0) return 0;
+	return isSingleTileMode(logicalWidth, viewportWidth) ? (viewportWidth - logicalWidth) / 2 : 0;
+}
+/**
+* Calculates the clipped width of a tile at a specific logical position.
+*
+* This accounts for:
+* - Single-tile mode (returns logicalWidth)
+* - Content boundaries (clips tiles extending beyond content)
+* - Overscroll area (if enabled)
+*
+* @param logicalX - The x-coordinate of the tile's left edge in logical space
+* @param tileWidth - The full width of the tile
+* @param logicalWidth - The total logical width of the content
+* @param viewportWidth - The width of the viewport in pixels
+* @param overscrollMultiplier - Multiplier for overscroll padding
+* @returns The clipped width of the tile (may be 0 if tile is outside valid area)
+*
+* @example
+* ```typescript
+* // Standard tile within bounds
+* getTileClippedWidth(0, 500, 2000, 1000, 1);    // Returns: 500
+*
+* // Tile at end of content that needs clipping
+* getTileClippedWidth(2950, 500, 2000, 1000, 1); // Returns: 50
+* ```
+*/
+function getTileClippedWidth(logicalX, tileWidth, logicalWidth, viewportWidth, overscrollMultiplier) {
+	if (tileWidth === 0) return 0;
+	if (logicalX < 0) return 0;
+	const maxLogicalX = logicalWidth + viewportWidth * overscrollMultiplier;
+	if (logicalX >= maxLogicalX) return 0;
+	if (isSingleTileMode(logicalWidth, viewportWidth)) return logicalWidth;
+	if (logicalX + tileWidth > maxLogicalX) return Math.max(0, maxLogicalX - logicalX);
+	return tileWidth;
+}
+/**
+* Calculates the range of tiles needed to render the current viewport.
+*
+* This determines which tiles are visible based on scroll position and
+* includes buffer tiles for smooth scrolling. Respects maxPoolSize limits.
+*
+* @param scrollLeft - The current horizontal scroll position in pixels
+* @param viewportWidth - The width of the viewport in pixels
+* @param logicalWidth - The total logical width of the content
+* @param options - Configuration options for tile calculation
+* @returns Information about the tile range including indices and positions
+*
+* @example
+* ```typescript
+* const options = {
+*   tileWidthMultiplier: 0.5,
+*   tilesBuffer: 2,
+*   maxPoolSize: 5,
+*   // ... other options
+* };
+* const result = calculateTileRange(600, 1000, 10000, options);
+* // Returns: { firstTile: 1, lastTile: 3, tiles: [...] }
+* ```
+*/
+function calculateTileRange(scrollLeft, viewportWidth, logicalWidth, options) {
+	if (logicalWidth === 0) return {
+		firstTile: 0,
+		lastTile: 0,
+		tiles: []
+	};
+	const tileWidth = getTileWidth(viewportWidth, options.tileWidthMultiplier);
+	if (isSingleTileMode(logicalWidth, viewportWidth)) return {
+		firstTile: 0,
+		lastTile: 0,
+		tiles: [{
+			index: 0,
+			logicalX: 0
+		}]
+	};
+	const firstTile = Math.floor(scrollLeft / tileWidth);
+	const lastTile = Math.floor((scrollLeft + viewportWidth - 1) / tileWidth);
+	const maxTileIndex = Math.max(0, Math.ceil(logicalWidth / tileWidth) - 1);
+	const tiles = [];
+	const startI = firstTile;
+	const endI = Math.min(lastTile + options.tilesBuffer, maxTileIndex);
+	for (let i = startI; i <= endI; i++) {
+		const logicalX = i * tileWidth;
+		if (logicalX >= logicalWidth) continue;
+		tiles.push({
+			index: i,
+			logicalX
+		});
+		if (tiles.length >= options.maxPoolSize) break;
+	}
+	return {
+		firstTile: Math.max(0, firstTile),
+		lastTile: tiles.length > 0 ? tiles[tiles.length - 1].index : 0,
+		tiles
+	};
+}
+/**
+* Calculates the height of a tile based on viewport height and multiplier.
+*/
+function getTileHeight(viewportHeight, multiplier) {
+	return viewportHeight * multiplier;
+}
+/**
+* Determines if content fits within a single tile row (no vertical virtualization needed).
+* Returns true when effectiveLogicalHeight fits within the viewport.
+*/
+function isSingleTileModeY(effectiveLogicalHeight, viewportHeight) {
+	if (viewportHeight === 0) return true;
+	return effectiveLogicalHeight <= viewportHeight;
+}
+/**
+* Calculates the vertical offset to center content in single-tile-row mode.
+*/
+function getContentOffsetY(effectiveLogicalHeight, viewportHeight) {
+	if (effectiveLogicalHeight < 0 || viewportHeight === 0) return 0;
+	return isSingleTileModeY(effectiveLogicalHeight, viewportHeight) ? (viewportHeight - effectiveLogicalHeight) / 2 : 0;
+}
+/**
+* Calculates the clipped height of a tile at a specific logical Y position.
+*/
+function getTileClippedHeight(logicalY, tileHeight, effectiveLogicalHeight, viewportHeight, overscrollMultiplier) {
+	if (tileHeight === 0) return 0;
+	if (logicalY < 0) return 0;
+	const maxLogicalY = effectiveLogicalHeight + viewportHeight * overscrollMultiplier;
+	if (logicalY >= maxLogicalY) return 0;
+	if (isSingleTileModeY(effectiveLogicalHeight, viewportHeight)) return effectiveLogicalHeight;
+	if (logicalY + tileHeight > maxLogicalY) return Math.max(0, maxLogicalY - logicalY);
+	return tileHeight;
+}
+/**
+* Calculates the range of tile rows needed to render the current viewport vertically.
+*
+* @param scrollTop - The current vertical scroll position in pixels
+* @param viewportHeight - The height of the viewport in pixels
+* @param effectiveLogicalHeight - The effective total logical height (logicalHeight || viewportHeight)
+* @param options - Configuration options for tile calculation
+*/
+function calculateTileRowRange(scrollTop, viewportHeight, effectiveLogicalHeight, options) {
+	if (effectiveLogicalHeight === 0) return {
+		firstRow: 0,
+		lastRow: 0,
+		rows: []
+	};
+	const tileHeight = getTileHeight(viewportHeight, options.tileHeightMultiplier);
+	if (isSingleTileModeY(effectiveLogicalHeight, viewportHeight)) return {
+		firstRow: 0,
+		lastRow: 0,
+		rows: [{
+			row: 0,
+			logicalY: 0
+		}]
+	};
+	const firstRow = Math.floor(scrollTop / tileHeight);
+	const lastRow = Math.floor((scrollTop + viewportHeight - 1) / tileHeight);
+	const maxRowIndex = Math.max(0, Math.ceil(effectiveLogicalHeight / tileHeight) - 1);
+	const rows = [];
+	const endI = Math.min(lastRow + options.tilesBuffer, maxRowIndex);
+	for (let i = firstRow; i <= endI; i++) {
+		const logicalY = i * tileHeight;
+		if (logicalY >= effectiveLogicalHeight) continue;
+		rows.push({
+			row: i,
+			logicalY
+		});
+		if (rows.length >= options.maxPoolSize) break;
+	}
+	return {
+		firstRow: Math.max(0, firstRow),
+		lastRow: rows.length > 0 ? rows[rows.length - 1].row : 0,
+		rows
+	};
+}
+//#endregion
+//#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$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.");
+	}
+	render(t) {
+		return " " + Object.keys(t).filter((s) => t[s]).join(" ") + " ";
+	}
+	update(s, [i]) {
+		if (void 0 === this.st) {
+			this.st = /* @__PURE__ */ new Set(), void 0 !== s.strings && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t) => "" !== t)));
+			for (const t in i) i[t] && !this.nt?.has(t) && this.st.add(t);
+			return this.render(i);
+		}
+		const r = s.element.classList;
+		for (const t of this.st) t in i || (r.remove(t), this.st.delete(t));
+		for (const t in i) {
+			const s = !!i[t];
+			s === this.st.has(t) || this.nt?.has(t) || (s ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
+		}
+		return E;
+	}
+});
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/util/debouncer.js
+/**
+* Creates a debounced version of a function that delays execution until after
+* a specified timeout has elapsed since the last call.
+*
+* Debouncing is useful for handling rapidly firing events (like scroll or resize)
+* by ensuring the function only executes once after the event stream settles.
+*
+* @template T - The type of the function to debounce
+* @param fn - The function to debounce
+* @param timeoutMs - The delay in milliseconds before executing the function
+* @returns A debounced version of the function with a `cancel` method
+*
+* @example
+* ```typescript
+* const debouncedLog = debouncer((msg: string) => {
+*   console.log(msg);
+* }, 100);
+*
+* debouncedLog('Hello');  // Will log after 100ms
+* debouncedLog('World');  // Resets timer, will log 'World' after 100ms
+*
+* // Cancel pending execution
+* debouncedLog.cancel();
+* ```
+*/
+function debouncer(fn, timeoutMs) {
+	let timer = null;
+	const debounced = (...args) => {
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			fn(...args);
+		}, timeoutMs);
+	};
+	debounced.cancel = () => {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	};
+	return debounced;
+}
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/util/draw.js
+/** Color palette for debug tile visualization */
+const TILE_COLORS = [
+	`#FF6B6B`,
+	`#4ECDC4`,
+	`#45B7D1`,
+	`#96CEB4`,
+	`#FFEAA7`,
+	`#DDA0DD`,
+	`#98D8C8`,
+	`#F7DC6F`,
+	`#BB8FCE`,
+	`#85C1E9`
+];
+/**
+* Gets a color for a tile based on its index.
+* Colors cycle through the TILE_COLORS palette.
+*
+* @param index - The tile index
+* @returns A hex color string
+*/
+function getTileColor(index) {
+	return TILE_COLORS[index % TILE_COLORS.length];
+}
+/**
+* Draws debug visualization graphics on a tile canvas.
+*
+* This function renders diagnostic information useful for debugging tile
+* boundaries, positions, and sizing. It draws:
+* - A colored background
+* - Diagonal cross lines
+* - Center crosshair
+* - Border rectangle
+* - Text information (tile index, position, size, total width)
+*
+* @param tileIndex - The index of the tile being drawn
+* @param tilesTotal - The total number of tiles in the pool
+* @param widthTotal - The total logical width of the virtual canvas
+* @param ctx - The canvas 2D rendering context
+* @param region - The rectangular region of the tile in logical coordinates
+*
+* @example
+* ```typescript
+* // Enable debug drawing
+* vcanvas.debugDraw = true;
+*
+* // The debug graphics will be drawn on each tile automatically
+* ```
+*/
+function drawDebugGraphic(tileIndex, tilesTotal, widthTotal, ctx, region) {
+	ctx.fillStyle = `whitesmoke`;
+	ctx.fillRect(region.x, region.y, region.width, region.height);
+	ctx.fillStyle = getTileColor(tileIndex);
+	ctx.strokeStyle = getTileColor(tileIndex);
+	ctx.lineWidth = 2;
+	ctx.beginPath();
+	ctx.moveTo(region.x, region.y);
+	ctx.lineTo(region.x + region.width, region.y + region.height);
+	ctx.moveTo(region.x + region.width, region.y);
+	ctx.lineTo(region.x, region.y + region.height);
+	ctx.stroke();
+	ctx.font = `24pt system-ui`;
+	ctx.textBaseline = `top`;
+	ctx.fillText(`#${tileIndex}/${tilesTotal}`, region.x + 20, region.y + 20);
+	ctx.font = `18pt system-ui`;
+	ctx.fillText(`Pos: ${Math.round(region.x)},${Math.round(region.y)}`, region.x + 20, region.y + 60);
+	ctx.fillText(`Size: ${Math.round(region.width)}x${Math.round(region.height)}`, region.x + 20, region.y + 90);
+	ctx.fillText(`VCanvas width: ${Math.round(widthTotal)}`, region.x + 20, region.y + 120);
+	const centerX = region.x + region.width / 2;
+	const centerY = region.y + region.height / 2;
+	ctx.beginPath();
+	ctx.moveTo(region.x, centerY);
+	ctx.lineTo(region.x + region.width, centerY);
+	ctx.moveTo(centerX, region.y);
+	ctx.lineTo(centerX, region.y + region.height);
+	ctx.stroke();
+	ctx.strokeRect(region.x, region.y, region.width, region.height);
+}
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/vcanvas.js
+var __decorate = function(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);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const tileKey = (col, row) => `${col},${row}`;
+const DEFAULT_TILE_WIDTH_MULTIPLIER = .5;
+const DEFAULT_TILE_HEIGHT_MULTIPLIER = .5;
+const DEFAULT_TILES_BUFFER = 2;
+const DEFAULT_OVERLAP_PERCENT = .01;
+const DEFAULT_OVERSCROLL_PAD_MULTIPLIER = 1;
+const DEFAULT_MAX_POOL_SIZE = 3;
+const DEFAULT_SCROLL_DEBOUNCE_MS = 100;
+let VCanvas = class VCanvas extends i$4 {
+	_emitScrollEndEvent(userGesture) {
+		const event = new CustomEvent(`scrollend-virtual`, {
+			detail: {
+				logicalScrollLeft: this._scrollLeft,
+				logicalScrollTop: this._scrollTop,
+				userGesture,
+				containerScrollLeft: this._scrollContainer?.scrollLeft ?? 0,
+				containerScrollTop: this._scrollContainer?.scrollTop ?? 0
+			},
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	constructor() {
+		super();
+		/**
+		* Enables detailed console logging of tile operations for debugging.
+		*
+		* When `true`, the component logs information about tile creation,
+		* positioning, and rendering to the console. Useful for debugging
+		* tile-related issues during development.
+		*
+		* @default false
+		*/
+		this.debugTrace = false;
+		this.debugDraw = false;
+		/**
+		* Enables visual hinting for scroll position at container edges.
+		*
+		* When `true`, applies the 'scrollable' class to the scroll container which
+		* adds CSS scroll-driven fade animations at the left and right edges,
+		* providing visual feedback about scroll availability.
+		*
+		* @default false
+		*/
+		this.hinting = false;
+		this._viewportWidth = 0;
+		this._viewportHeight = 0;
+		this._scrollLeft = 0;
+		this._scrollTop = 0;
+		this._logicalHeight = 0;
+		this._tilePool = /* @__PURE__ */ new Map();
+		this._visibleTiles = /* @__PURE__ */ new Set();
+		this._pendingDraws = /* @__PURE__ */ new Map();
+		this._scrollContainer = null;
+		this._spacer = null;
+		this._tilePoolEl = null;
+		this._childrenContainerEl = null;
+		this._resizeObserver = null;
+		this._positionedChildren = /* @__PURE__ */ new Map();
+		this._boundOnScroll = this._onScroll.bind(this);
+		this._renderingOptions = {
+			tileWidthMultiplier: DEFAULT_TILE_WIDTH_MULTIPLIER,
+			tileHeightMultiplier: DEFAULT_TILE_HEIGHT_MULTIPLIER,
+			tilesBuffer: DEFAULT_TILES_BUFFER,
+			overlapPercent: DEFAULT_OVERLAP_PERCENT,
+			overscrollPadMultiplier: DEFAULT_OVERSCROLL_PAD_MULTIPLIER,
+			maxPoolSize: DEFAULT_MAX_POOL_SIZE,
+			scrollDebounceMs: DEFAULT_SCROLL_DEBOUNCE_MS
+		};
+		this._dpr = window.devicePixelRatio || 1;
+		this._logicalWidth = 0;
+		this.logicalWidth = 0;
+		this.logicalHeight = 0;
+		this.drawCallback = null;
+		this._scrollDebounce = debouncer(() => {
+			this._requestRedrawAll(`scrollDebounce`);
+		}, this._renderingOptions.scrollDebounceMs);
+		this._scrollEndDebounce = debouncer(() => {
+			this._emitScrollEndEvent(true);
+		}, this._renderingOptions.scrollDebounceMs);
+		this._resizeDebounce = debouncer(() => {
+			this._onResize();
+		}, this._renderingOptions.scrollDebounceMs);
+	}
+	static {
+		this.styles = vcanvasStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._setupResizeObserver();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this._scrollEndDebounce.cancel();
+		this._pendingDraws.forEach((ctrl) => ctrl.abort());
+		this._tilePool.clear();
+		this._scrollContainer?.removeEventListener(`scroll`, this._boundOnScroll);
+	}
+	firstUpdated() {
+		const scrollContainer = this.shadowRoot?.querySelector(`.scroll-container`);
+		this._scrollContainer = scrollContainer;
+		this._spacer = this.shadowRoot?.querySelector(`.spacer`);
+		this._tilePoolEl = this.shadowRoot?.querySelector(`.tile-pool`);
+		this._childrenContainerEl = this.shadowRoot?.querySelector(`.children-container`);
+		if (this._scrollContainer) this._scrollContainer.addEventListener(`scroll`, this._boundOnScroll);
+		requestAnimationFrame(() => {
+			this._updateViewportDimensions();
+			this._updateSpacer();
+			this._updateScrollContainerClass();
+			this._recalculateTiles(`firstUpdated cb`);
+			this._positionChildren(`firstUpdated cb`);
+		});
+	}
+	/**
+	* The total logical width of the virtual canvas content.
+	*
+	* This represents the full width of the scrollable content in logical units.
+	* Setting this property triggers recalculation of tiles and updates the spacer
+	* element that enables native scroll behavior.
+	*
+	* @example
+	* ```typescript
+	* // Create a virtual canvas 10,000 logical units wide
+	* vcanvas.logicalWidth = 10000;
+	* ```
+	*/
+	set logicalWidth(value) {
+		this._logicalWidth = value;
+		this._updateSpacer();
+		this._updateScrollContainerClass();
+		if (this.hasUpdated) {
+			this._updateTileWidths(`set logicalWidth`);
+			this._recalculateTiles(`set logicalWidth`);
+		}
+	}
+	get logicalWidth() {
+		return this._logicalWidth;
+	}
+	/**
+	* The total logical height of the virtual canvas content.
+	*
+	* When set to 0 (default), the component uses the actual viewport height,
+	* meaning no vertical virtualization is applied. Set to a value greater than
+	* the viewport height to enable vertical scrolling and tile-based virtualization.
+	*
+	* @example
+	* ```typescript
+	* // Create a canvas virtualized in both axes
+	* vcanvas.logicalWidth = 10000;
+	* vcanvas.logicalHeight = 5000;
+	* ```
+	*/
+	set logicalHeight(value) {
+		this._logicalHeight = value;
+		this._updateSpacer();
+		this._updateScrollContainerClass();
+		if (this.hasUpdated) this._recalculateTiles(`set logicalHeight`);
+	}
+	get logicalHeight() {
+		return this._logicalHeight;
+	}
+	/** Effective logical width: uses viewport width when logicalWidth is 0 (no horizontal virtualization). */
+	get effectiveLogicalWidth() {
+		return this._logicalWidth || this._viewportWidth;
+	}
+	/** Effective logical height: uses viewport height when logicalHeight is 0 (no vertical virtualization). */
+	get effectiveLogicalHeight() {
+		return this._logicalHeight || this._viewportHeight;
+	}
+	_setupResizeObserver() {
+		this._resizeObserver = new ResizeObserver(() => {
+			this._resizeDebounce();
+		});
+		this._resizeObserver.observe(this);
+	}
+	_onResize() {
+		const oldWidth = this._viewportWidth;
+		const oldHeight = this._viewportHeight;
+		this._updateViewportDimensions();
+		const widthChanged = oldWidth !== this._viewportWidth;
+		const heightChanged = oldHeight !== this._viewportHeight;
+		if (widthChanged || heightChanged) {
+			this._updateSpacer();
+			this._updateScrollContainerClass();
+			this._recalculateTiles(`onResize`);
+		}
+	}
+	_updateTileWidths(reason) {
+		const tileWidth = this._getTileWidth();
+		for (const tile of this._tilePool.values()) {
+			const clippedWidth = this._getTileClippedWidth(tile.logicalX, tileWidth);
+			tile.canvas.width = clippedWidth * this._dpr;
+			tile.canvas.style.width = `${clippedWidth}px`;
+			tile.ctx.scale(this._dpr, this._dpr);
+		}
+		this._requestRedrawAll(`updateTileWidths (${reason})`);
+	}
+	_updateViewportDimensions() {
+		const rect = this.getBoundingClientRect();
+		this._viewportWidth = rect.width;
+		this._viewportHeight = rect.height;
+	}
+	_onScroll() {
+		if (!this._scrollContainer) return;
+		const newScrollLeft = this._scrollContainer.scrollLeft;
+		const newScrollTop = this._scrollContainer.scrollTop;
+		if (newScrollLeft === this._scrollLeft && newScrollTop === this._scrollTop) return;
+		this._scrollLeft = newScrollLeft;
+		this._scrollTop = newScrollTop;
+		this._recalculateTiles(`onScroll`);
+		this._emitScrollEvent(true);
+		this._scrollDebounce();
+		this._scrollEndDebounce();
+	}
+	_updateSpacer() {
+		if (!this._spacer) return;
+		const noHorizontalScroll = isSingleTileMode(this.effectiveLogicalWidth, this._viewportWidth);
+		const noVerticalScroll = isSingleTileModeY(this.effectiveLogicalHeight, this._viewportHeight);
+		if (noHorizontalScroll && noVerticalScroll) this._spacer.style.display = `none`;
+		else {
+			this._spacer.style.display = `block`;
+			this._spacer.style.width = `${this.effectiveLogicalWidth}px`;
+			this._spacer.style.height = `${this.effectiveLogicalHeight}px`;
+		}
+		if (this._childrenContainerEl) {
+			this._childrenContainerEl.style.width = `${this.effectiveLogicalWidth}px`;
+			this._childrenContainerEl.style.height = `${this.effectiveLogicalHeight}px`;
+		}
+	}
+	_updateScrollContainerClass() {
+		if (!this._scrollContainer) return;
+		const verticalScroll = this.effectiveLogicalHeight > this._viewportHeight;
+		this._scrollContainer.classList.toggle(`vertical`, verticalScroll);
+	}
+	_getTileWidth() {
+		return getTileWidth(this._viewportWidth, this._renderingOptions.tileWidthMultiplier);
+	}
+	_getTileHeight() {
+		return getTileHeight(this._viewportHeight, this._renderingOptions.tileHeightMultiplier);
+	}
+	_getTileClippedWidth(logicalX, tileWidth) {
+		return getTileClippedWidth(logicalX, tileWidth, this.effectiveLogicalWidth, this._viewportWidth, this._renderingOptions.overscrollPadMultiplier);
+	}
+	_getTileClippedHeight(logicalY, tileHeight) {
+		return getTileClippedHeight(logicalY, tileHeight, this.effectiveLogicalHeight, this._viewportHeight, this._renderingOptions.overscrollPadMultiplier);
+	}
+	_calculateTileRange() {
+		return calculateTileRange(this._scrollLeft, this._viewportWidth, this.effectiveLogicalWidth, this._renderingOptions);
+	}
+	_calculateTileRowRange() {
+		return calculateTileRowRange(this._scrollTop, this._viewportHeight, this.effectiveLogicalHeight, this._renderingOptions);
+	}
+	_recalculateTiles(reason) {
+		this._updateViewportDimensions();
+		const { tiles } = this._calculateTileRange();
+		const { rows } = this._calculateTileRowRange();
+		const neededKeys = /* @__PURE__ */ new Set();
+		for (const { index: col, logicalX } of tiles) for (const { row, logicalY } of rows) {
+			neededKeys.add(tileKey(col, row));
+			if (!this._tilePool.has(tileKey(col, row))) this._tilePool.set(tileKey(col, row), this._createTile(col, row, logicalX, logicalY));
+		}
+		const maxPoolSize = this._renderingOptions.maxPoolSize * Math.max(1, rows.length);
+		const reuseCandidates = [...this._tilePool.keys()].filter((k) => !neededKeys.has(k));
+		const missingKeys = [...neededKeys].filter((k) => !this._tilePool.has(k));
+		const tilesToReuse = Math.min(reuseCandidates.length, missingKeys.length);
+		for (let i = 0; i < tilesToReuse; i++) {
+			const oldKey = reuseCandidates[i];
+			const newKey = missingKeys[i];
+			const tile = this._tilePool.get(oldKey);
+			if (tile && newKey) {
+				const [colStr, rowStr] = newKey.split(`,`);
+				const col = Number(colStr);
+				const row = Number(rowStr);
+				this._tilePool.delete(oldKey);
+				tile.col = col;
+				tile.row = row;
+				tile.logicalX = col * this._getTileWidth();
+				tile.logicalY = row * this._getTileHeight();
+				tile.visible = false;
+				tile.canvas.dataset.tileKey = newKey;
+				this._tilePool.set(newKey, tile);
+			}
+		}
+		const keysAfterReuse = [...this._tilePool.keys()];
+		if (keysAfterReuse.length > maxPoolSize) {
+			const excessCount = keysAfterReuse.length - maxPoolSize;
+			keysAfterReuse.filter((k) => !neededKeys.has(k)).slice(0, excessCount).forEach((k) => {
+				const tile = this._tilePool.get(k);
+				if (tile) {
+					this._tilePool.delete(k);
+					tile.canvas.remove();
+				}
+			});
+		}
+		this._updateTiles(`recalculateTiles (${reason})`);
+	}
+	_createTile(col, row, logicalX, logicalY) {
+		const canvas = document.createElement(`canvas`);
+		const key = tileKey(col, row);
+		canvas.dataset.tileKey = key;
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const clippedWidth = this._getTileClippedWidth(logicalX, tileWidth);
+		const clippedHeight = this._getTileClippedHeight(logicalY, tileHeight);
+		const ctx = canvas.getContext(`2d`);
+		if (!ctx) throw new Error(`Could not get canvas context`);
+		if (this._viewportHeight === 0) this.#debug(`Warning: Creating tile ${key} with viewport height 0. The VCanvas component may not be properly sized or visible.`);
+		canvas.width = clippedWidth * this._dpr;
+		canvas.height = clippedHeight * this._dpr;
+		canvas.style.width = `${clippedWidth}px`;
+		canvas.style.height = `${clippedHeight}px`;
+		ctx.scale(this._dpr, this._dpr);
+		this.#debug(`Created tile ${key} at logicalX ${logicalX} logicalY ${logicalY}`);
+		return {
+			canvas,
+			ctx,
+			logicalX,
+			logicalY,
+			col,
+			row,
+			visible: false,
+			isInDOM: false
+		};
+	}
+	_updateTiles(reason) {
+		const { tiles, firstTile, lastTile } = this._calculateTileRange();
+		const { rows, firstRow, lastRow } = this._calculateTileRowRange();
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const isSingleTileX = isSingleTileMode(this.effectiveLogicalWidth, this._viewportWidth);
+		const isSingleTileY = isSingleTileModeY(this.effectiveLogicalHeight, this._viewportHeight);
+		const contentOffsetX = getContentOffset(this.effectiveLogicalWidth, this._viewportWidth);
+		const contentOffsetY = getContentOffsetY(this.effectiveLogicalHeight, this._viewportHeight);
+		const tilesBuffer = this._renderingOptions.tilesBuffer;
+		const tilesRedrawn = [];
+		for (const tile of this._tilePool.values()) tile.visible = false;
+		this._visibleTiles.clear();
+		for (const [key, tile] of this._tilePool) {
+			const colVisible = isSingleTileX ? tile.col === 0 : tile.col >= firstTile - tilesBuffer && tile.col <= lastTile + tilesBuffer;
+			const rowVisible = isSingleTileY ? tile.row === 0 : tile.row >= firstRow - tilesBuffer && tile.row <= lastRow + tilesBuffer;
+			if (colVisible && rowVisible) {
+				this._visibleTiles.add(key);
+				const newLogicalX = tile.col * tileWidth;
+				const newLogicalY = tile.row * tileHeight;
+				const visualX = isSingleTileX ? contentOffsetX : newLogicalX;
+				const visualY = isSingleTileY ? contentOffsetY : newLogicalY;
+				const clippedWidth = this._getTileClippedWidth(newLogicalX, tileWidth);
+				const clippedHeight = this._getTileClippedHeight(newLogicalY, tileHeight);
+				if (!tile.visible || tile.logicalX !== newLogicalX || tile.logicalY !== newLogicalY || tile.canvas.style.left !== `${visualX}px` || tile.canvas.style.top !== `${visualY}px` || tile.canvas.width !== clippedWidth * this._dpr || tile.canvas.height !== clippedHeight * this._dpr) {
+					tile.logicalX = newLogicalX;
+					tile.logicalY = newLogicalY;
+					tile.canvas.width = clippedWidth * this._dpr;
+					tile.canvas.style.width = `${clippedWidth}px`;
+					tile.canvas.height = clippedHeight * this._dpr;
+					tile.canvas.style.height = `${clippedHeight}px`;
+					tile.canvas.style.left = `${visualX}px`;
+					tile.canvas.style.top = `${visualY}px`;
+					tile.ctx.scale(this._dpr, this._dpr);
+					if (!tile.isInDOM && this._tilePoolEl) {
+						this._tilePoolEl.appendChild(tile.canvas);
+						tile.isInDOM = true;
+					}
+					if (!tile.visible) {
+						tilesRedrawn.push(key);
+						this._requestTileDraw(`updateTiles(${reason})`, key);
+					}
+				}
+				tile.visible = true;
+			} else if (tile.visible) {
+				tile.visible = false;
+				tile.isInDOM = false;
+				tile.canvas.remove();
+			}
+		}
+		for (const { index: col, logicalX } of tiles) for (const { row, logicalY } of rows) {
+			const key = tileKey(col, row);
+			if (!this._tilePool.has(key) && this._tilePoolEl) {
+				const newTile = this._createTile(col, row, logicalX, logicalY);
+				const visualX = isSingleTileX ? contentOffsetX : logicalX;
+				const visualY = isSingleTileY ? contentOffsetY : logicalY;
+				newTile.canvas.style.left = `${visualX}px`;
+				newTile.canvas.style.top = `${visualY}px`;
+				newTile.visible = true;
+				newTile.isInDOM = true;
+				this._tilePoolEl.appendChild(newTile.canvas);
+				this._tilePool.set(key, newTile);
+				this._visibleTiles.add(key);
+				tilesRedrawn.push(key);
+				this._requestTileDraw(`updateTiles(${reason})`, key);
+			}
+		}
+		return tilesRedrawn;
+	}
+	_requestRedrawAll(reason) {
+		this.#debug(`Requesting _requestRedrawAll: ${reason} visible tiles: ${this._visibleTiles.size} pending draws: ${this._pendingDraws.size}`);
+		this._pendingDraws.forEach((ctrl) => ctrl.abort());
+		this._pendingDraws.clear();
+		for (const tileIndex of this._visibleTiles) this._requestTileDraw(`requestRedrawAll(${reason})`, tileIndex);
+	}
+	#debug(msg) {
+		if (!this.debugTrace) return;
+		console.log(`[VCanvas]`, msg);
+	}
+	_requestTileDraw(_reason, tileKey, region) {
+		const tile = this._tilePool.get(tileKey);
+		if (!tile || !this.drawCallback) return;
+		const abortCtrl = new AbortController();
+		this._pendingDraws.set(tileKey, abortCtrl);
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const isSingleTileX = isSingleTileMode(this.effectiveLogicalWidth, this._viewportWidth);
+		const isSingleTileY = isSingleTileModeY(this.effectiveLogicalHeight, this._viewportHeight);
+		let drawRegion;
+		if (region) drawRegion = region;
+		else {
+			const overlapX = tileWidth * this._renderingOptions.overlapPercent;
+			const overlapY = tileHeight * this._renderingOptions.overlapPercent;
+			drawRegion = {
+				x: isSingleTileX ? 0 : tile.logicalX - overlapX,
+				y: isSingleTileY ? 0 : tile.logicalY - overlapY,
+				width: isSingleTileX ? this.effectiveLogicalWidth : tileWidth + overlapX * 2,
+				height: isSingleTileY ? this.effectiveLogicalHeight : tileHeight + overlapY * 2
+			};
+		}
+		tile.ctx.save();
+		tile.ctx.translate(-tile.logicalX, -tile.logicalY);
+		const localX = drawRegion.x - tile.logicalX;
+		const localY = drawRegion.y - tile.logicalY;
+		if (region) {
+			tile.ctx.beginPath();
+			tile.ctx.rect(localX, localY, drawRegion.width, drawRegion.height);
+			tile.ctx.clip();
+			tile.ctx.clearRect(localX, localY, drawRegion.width, drawRegion.height);
+		} else tile.ctx.clearRect(0, 0, tile.canvas.width, tile.canvas.height);
+		if (this.debugDraw) drawDebugGraphic(tile.col, this._tilePool.size, this.effectiveLogicalWidth, tile.ctx, drawRegion);
+		try {
+			this.drawCallback(tile.ctx, drawRegion, abortCtrl.signal);
+		} finally {
+			if (tile) tile.ctx.restore();
+			this._pendingDraws.delete(tileKey);
+		}
+	}
+	_emitScrollEvent(userGesture) {
+		const event = new CustomEvent(`scroll-virtual`, {
+			detail: {
+				logicalScrollLeft: this._scrollLeft,
+				logicalScrollTop: this._scrollTop,
+				userGesture,
+				containerScrollLeft: this._scrollContainer?.scrollLeft ?? 0,
+				containerScrollTop: this._scrollContainer?.scrollTop ?? 0,
+				viewportStartLogical: this._scrollLeft,
+				viewportEndLogical: this._scrollLeft + this._viewportWidth,
+				viewportStartLogicalY: this._scrollTop,
+				viewportEndLogicalY: this._scrollTop + this._viewportHeight
+			},
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	/**
+	* Checks if any part of a rectangular region is currently visible in the viewport.
+	*
+	* This method is useful for determining whether content needs to be rendered
+	* or updated based on its visibility status. The region is specified using
+	* logical coordinates relative to the virtual canvas content.
+	*
+	* @param rect - The rectangular region to check, in logical coordinates
+	* @returns true if any part of the region overlaps with the visible viewport
+	*
+	* @example
+	* ```typescript
+	* const region = { x: 1000, y: 0, width: 500, height: 1000 };
+	* if (vcanvas.isRegionVisible(region)) {
+	*   // Region is at least partially visible, render it
+	* }
+	* ```
+	*/
+	isRegionVisible(rect) {
+		const viewportLeft = this._scrollLeft;
+		const viewportRight = this._scrollLeft + this._viewportWidth;
+		const xVisible = rect.x + rect.width > viewportLeft && rect.x < viewportRight;
+		const viewportTop = this._scrollTop;
+		const viewportBottom = this._scrollTop + this._viewportHeight;
+		const yVisible = rect.y + rect.height > viewportTop && rect.y < viewportBottom;
+		return xVisible && yVisible;
+	}
+	_updateScrollPosition(userGesture) {
+		if (this._scrollContainer) {
+			this._scrollContainer.scrollLeft = this._scrollLeft;
+			this._scrollContainer.scrollTop = this._scrollTop;
+		}
+		this._recalculateTiles(`updateScrollPosition`);
+		this._emitScrollEvent(userGesture);
+		this._scrollDebounce();
+	}
+	get logicalScrollLeft() {
+		return this._scrollLeft;
+	}
+	/**
+	* The current logical scroll position.
+	*
+	* Setting this property smoothly scrolls the virtual canvas to the specified
+	* position. The value is automatically clamped to valid bounds (0 to
+	* logicalWidth - viewportWidth).
+	*
+	* @example
+	* ```typescript
+	* // Scroll to position 5000
+	* vcanvas.logicalScrollLeft = 5000;
+	*
+	* // Get current scroll position
+	* console.log(vcanvas.logicalScrollLeft);
+	* ```
+	*/
+	set logicalScrollLeft(value) {
+		const oldValue = this._scrollLeft;
+		const clampedValue = clamp(value, 0, Math.max(0, this.effectiveLogicalWidth - this._viewportWidth));
+		if (clampedValue !== this._scrollLeft) {
+			this._scrollLeft = clampedValue;
+			this.requestUpdate(`logicalScrollLeft`, oldValue);
+			this._updateScrollPosition(false);
+		}
+	}
+	get logicalScrollTop() {
+		return this._scrollTop;
+	}
+	set logicalScrollTop(value) {
+		const oldValue = this._scrollTop;
+		const clampedValue = clamp(value, 0, Math.max(0, this.effectiveLogicalHeight - this._viewportHeight));
+		if (clampedValue !== this._scrollTop) {
+			this._scrollTop = clampedValue;
+			this.requestUpdate(`logicalScrollTop`, oldValue);
+			this._updateScrollPosition(false);
+		}
+	}
+	get containerScrollLeft() {
+		return this._scrollContainer?.scrollLeft ?? 0;
+	}
+	get containerScrollTop() {
+		return this._scrollContainer?.scrollTop ?? 0;
+	}
+	/**
+	* The current viewport width in pixels.
+	*
+	* This value is automatically updated when the component is resized.
+	* Read-only - use CSS to control the component's size.
+	*
+	* @example
+	* ```typescript
+	* const vw = vcanvas.viewportWidth;
+	* ```
+	*/
+	get viewportWidth() {
+		return this._viewportWidth;
+	}
+	/**
+	* The current viewport height in pixels.
+	*
+	* This value is automatically updated when the component is resized.
+	* Read-only - use CSS to control the component's size.
+	*
+	* @example
+	* ```typescript
+	* const vh = vcanvas.viewportHeight;
+	* ```
+	*/
+	get viewportHeight() {
+		return this._viewportHeight;
+	}
+	/**
+	* Updates rendering options for the virtual canvas.
+	*
+	* Pass a partial options object to update specific settings. Any options
+	* not provided retain their current values. After updating options,
+	* tiles are recalculated to reflect the new configuration.
+	*
+	* @param options - Partial options object specifying which settings to change
+	*
+	* @example
+	* ```typescript
+	* // Reduce tile size and increase pool for smoother scrolling
+	* vcanvas.setRenderingOptions({
+	*   tileWidthMultiplier: 0.25,
+	*   maxPoolSize: 8,
+	* });
+	*
+	* // Restore defaults
+	* vcanvas.setRenderingOptions({
+	*   tileWidthMultiplier: 0.5,
+	*   tilesBuffer: 2,
+	*   maxPoolSize: 5,
+	* });
+	* ```
+	*/
+	setRenderingOptions(options) {
+		this._renderingOptions = {
+			...this._renderingOptions,
+			...options
+		};
+		this._recalculateTiles(`setRenderingOptions`);
+	}
+	/**
+	* Gets the current rendering options.
+	*
+	* Returns a copy of the current configuration options controlling tile
+	* rendering, pool management, and scroll behavior.
+	*
+	* @returns The current VCanvasRenderingOptions configuration
+	*
+	* @example
+	* ```typescript
+	* const options = vcanvas.getRenderingOptions();
+	* console.log('Current tile width multiplier:', options.tileWidthMultiplier);
+	* ```
+	*/
+	getRenderingOptions() {
+		return this._renderingOptions;
+	}
+	/**
+	* Forces a complete redraw of all visible tiles.
+	*
+	* Call this when the visual appearance of the content needs to change
+	* but the logical dimensions remain the same. This aborts any pending
+	* draw operations and triggers new ones for all visible tiles.
+	*
+	* @example
+	* ```typescript
+	* // Redraw after theme change
+	* theme.addEventListener('change', () => {
+	*   vcanvas.invalidateAll();
+	* });
+	* ```
+	*/
+	invalidateAll() {
+		this._requestRedrawAll(`invalidateAll`);
+	}
+	/**
+	* Forces redraw of tiles that intersect with the specified region.
+	*
+	* Use this for partial invalidation when only a portion of the content
+	* has changed. More efficient than invalidateAll() for localized updates.
+	*
+	* @param x - The x-coordinate of the region's left edge (logical coordinates)
+	* @param y - The y-coordinate of the region's top edge (logical coordinates)
+	* @param width - The width of the region to invalidate
+	* @param height - The height of the region to invalidate
+	*
+	* @example
+	* ```typescript
+	* // Redraw a specific area after updating content
+	* vcanvas.invalidateRegion(1000, 0, 500, 1000);
+	* ```
+	*/
+	invalidateRegion(x, y, width, height) {
+		this.#debug(`invalidateRegion: ${x},${y},${width},${height}`);
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const { firstTile, lastTile } = this._calculateTileRange();
+		const { firstRow, lastRow } = this._calculateTileRowRange();
+		const overlap = this._renderingOptions.overlapPercent;
+		const startCol = Math.floor(x / tileWidth);
+		const endCol = Math.ceil((x + width) / tileWidth);
+		const startRow = Math.floor(y / tileHeight);
+		const endRow = Math.ceil((y + height) / tileHeight);
+		for (let col = Math.max(firstTile, startCol); col <= Math.min(lastTile, endCol); col++) for (let row = Math.max(firstRow, startRow); row <= Math.min(lastRow, endRow); row++) {
+			const key = tileKey(col, row);
+			if (this._visibleTiles.has(key)) {
+				const tile = this._tilePool.get(key);
+				if (tile) {
+					const overlapX = tileWidth * overlap;
+					const overlapY = tileHeight * overlap;
+					const tileStartX = tile.logicalX - overlapX;
+					const tileEndX = tile.logicalX + tileWidth + overlapX;
+					const tileStartY = tile.logicalY - overlapY;
+					const tileEndY = tile.logicalY + tileHeight + overlapY;
+					const intersectX = Math.max(x, tileStartX);
+					const intersectWidth = Math.min(x + width, tileEndX) - intersectX;
+					const intersectY = Math.max(y, tileStartY);
+					const intersectHeight = Math.min(y + height, tileEndY) - intersectY;
+					if (intersectWidth > 0 && intersectHeight > 0) {
+						const region = {
+							x: intersectX,
+							y: intersectY,
+							width: intersectWidth,
+							height: intersectHeight
+						};
+						this._requestTileDraw(`invalidateRegion`, key, region);
+					}
+				}
+			}
+		}
+	}
+	/**
+	* Converts viewport-relative coordinates to canvas-relative (logical) coordinates.
+	*
+	* Viewport coordinates are relative to the visible area, while canvas coordinates
+	* are in the logical coordinate system of the virtual canvas content.
+	*
+	* @param x - The x-coordinate in viewport space
+	* @param y - The y-coordinate in viewport space
+	* @returns The coordinates in canvas (logical) space
+	*
+	* @example
+	* ```typescript
+	* // Convert mouse position to logical coordinates for hit testing
+	* vcanvas.addEventListener('click', (e) => {
+	*   const logical = vcanvas.convertFromViewportToCanvas(e.offsetX, e.offsetY);
+	*   console.log('Clicked at logical position:', logical.x);
+	* });
+	* ```
+	*/
+	convertFromViewportToCanvas(x, y) {
+		const contentOffsetX = getContentOffset(this.effectiveLogicalWidth, this._viewportWidth);
+		const contentOffsetY = getContentOffsetY(this.effectiveLogicalHeight, this._viewportHeight);
+		return viewportToCanvas(x, y, this._scrollLeft, contentOffsetX, this._scrollTop, contentOffsetY);
+	}
+	/**
+	* Converts canvas-relative (logical) coordinates to viewport-relative coordinates.
+	*
+	* This is the inverse of `convertFromViewportToCanvas`. Use this to convert
+	* logical positions back to viewport coordinates for positioning UI elements.
+	*
+	* @param x - The x-coordinate in logical space
+	* @param y - The y-coordinate in logical space
+	* @returns The coordinates in viewport space
+	*
+	* @example
+	* ```typescript
+	* // Convert logical marker position to viewport for tooltip positioning
+	* const viewportPos = vcanvas.convertFromCanvasToViewport(markerX, 0);
+	* tooltip.style.left = `${viewportPos.x}px`;
+	* ```
+	*/
+	convertFromCanvasToViewport(x, y) {
+		const contentOffsetX = getContentOffset(this.effectiveLogicalWidth, this._viewportWidth);
+		const contentOffsetY = getContentOffsetY(this.effectiveLogicalHeight, this._viewportHeight);
+		return canvasToViewport(x, y, this._scrollLeft, contentOffsetX, this._scrollTop, contentOffsetY);
+	}
+	/**
+	* Positions light DOM child elements matching the query within a logical coordinate range.
+	*
+	* This method allows you to position HTML elements (like tooltips, markers, or overlays)
+	* at specific logical coordinates within the virtual canvas. The elements will scroll
+	* with the canvas content, maintaining their logical position.
+	*
+	* @param query - A CSS selector string to match child elements
+	* @param startX - The starting x-coordinate in logical space
+	* @param endX - The ending x-coordinate in logical space (determines width)
+	* @param startY - The starting y-coordinate in logical space (optional)
+	* @param endY - The ending y-coordinate in logical space (optional)
+	*
+	* @example
+	* ```typescript
+	* // Position a marker element at logical position x=200 spanning 200px
+	* vcanvas.positionChildRange('#marker', 200, 400);
+	*
+	* // Position multiple elements with a class
+	* vcanvas.positionChildRange('.timeline-item', 0, 1000);
+	* ```
+	*/
+	positionChildRange(query, startX, endX, startY, endY) {
+		if (Number.isNaN(startX) || Number.isNaN(endX)) {
+			console.warn(`positionChildRange: Invalid startX or endX values: ${startX}, ${endX}`);
+			return;
+		}
+		const children = Array.from(this.children).filter((child) => child.matches?.(query));
+		const resolvedStartY = startY ?? 0;
+		const resolvedEndY = endY ?? this.effectiveLogicalHeight;
+		for (const child of children) this._positionedChildren.set(child, {
+			startX,
+			endX,
+			startY: resolvedStartY,
+			endY: resolvedEndY
+		});
+		this._positionChildren(`positionChildRange`);
+	}
+	/**
+	* Manually triggers an update of child element positioning.
+	*
+	* This is useful when the viewport dimensions have changed outside the normal
+	* update cycle and you need to reposition slotted children immediately.
+	* Normally, child positioning is automatically updated during scroll and resize.
+	*
+	* @example
+	* ```typescript
+	* // Force immediate update after custom layout changes
+	* vcanvas.manualChildPositioningUpdate();
+	* ```
+	*/
+	manualChildPositioningUpdate() {
+		this._positionChildren(`manualChildPositioningUpdate`);
+	}
+	/**
+	* Stops positioning child elements matching the query and resets their styles.
+	*
+	* This removes children from the positioning system and clears any inline
+	* styles that were applied by `positionChildRange()`. The children remain
+	* in the DOM but are no longer positioned by the virtual canvas.
+	*
+	* @param query - A CSS selector string to match child elements
+	*
+	* @example
+	* ```typescript
+	* // Stop positioning a specific child element
+	* vcanvas.positionChildClear('#child-0');
+	*
+	* // Stop positioning all children with a specific class
+	* vcanvas.positionChildClear('.my-element');
+	* ```
+	*/
+	positionChildClear(query) {
+		for (const [child] of this._positionedChildren) if (child.matches?.(query)) {
+			this._positionedChildren.delete(child);
+			child.removeAttribute(`style`);
+		}
+	}
+	_positionChildren(source) {
+		this.#debug(`_positionChildren: ${source} positionedChildren: ${this._positionedChildren.size}`);
+		if (!this.hasUpdated) return;
+		if (!this._childrenContainerEl) return;
+		for (const [child, config] of this._positionedChildren) {
+			const width = config.endX - config.startX;
+			const height = config.endY - config.startY;
+			child.setAttribute(`style`, `position: absolute; left: ${config.startX}px; top: ${config.startY}px; width: ${width}px; height: ${height}px;`);
+		}
+	}
+	render() {
+		return b`
+      <div class=${e({
+			"scroll-container": true,
+			"scrollable": this.hinting
+		})}>
+        <div class="spacer"></div>
+        <div class="tile-pool"></div>
+        <div class="children-container">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([n$2({ type: Boolean })], VCanvas.prototype, "hinting", void 0);
+__decorate([n$2()], VCanvas.prototype, "logicalWidth", null);
+__decorate([n$2()], VCanvas.prototype, "logicalHeight", null);
+__decorate([n$2({ type: Number })], VCanvas.prototype, "logicalScrollLeft", null);
+__decorate([n$2({ type: Number })], VCanvas.prototype, "logicalScrollTop", null);
+VCanvas = __decorate([t$4(`x-vcanvas`)], VCanvas);
 //#endregion
 //#region src/timeline/timeline-element.ts
 /** Reasonable maximum ppu to prevent infinite zoom-in */
@@ -34400,53 +35840,53 @@ let IxfxTimelineElement = class IxfxTimelineElement extends i$4 {
 		}));
 	}
 };
-__decorate([n$2({ type: Array })], IxfxTimelineElement.prototype, "tracks", void 0);
-__decorate([n$2({ type: Array })], IxfxTimelineElement.prototype, "events", void 0);
-__decorate([n$2({ type: Number })], IxfxTimelineElement.prototype, "min", void 0);
-__decorate([n$2({ type: Number })], IxfxTimelineElement.prototype, "max", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Array })], IxfxTimelineElement.prototype, "tracks", void 0);
+__decorate$1([n$2({ type: Array })], IxfxTimelineElement.prototype, "events", void 0);
+__decorate$1([n$2({ type: Number })], IxfxTimelineElement.prototype, "min", void 0);
+__decorate$1([n$2({ type: Number })], IxfxTimelineElement.prototype, "max", void 0);
+__decorate$1([n$2({
 	type: String,
 	attribute: `track-height`
 })], IxfxTimelineElement.prototype, "trackHeight", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `user-scale`
 })], IxfxTimelineElement.prototype, "userScale", void 0);
-__decorate([n$2({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `meta`
 })], IxfxTimelineElement.prototype, "metaEnabled", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `alt-major-bg`
 })], IxfxTimelineElement.prototype, "altMajorBg", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `default-track-height`
 })], IxfxTimelineElement.prototype, "defaultTrackHeight", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `grid-mode`
 })], IxfxTimelineElement.prototype, "gridMode", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `minor-step`
 })], IxfxTimelineElement.prototype, "minorStep", void 0);
-__decorate([n$2({ type: Object })], IxfxTimelineElement.prototype, "onDragging", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_ppu", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_viewRange", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_vViewRange", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_vScale", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_selectedIds", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_tickledId", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_drag", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_metaHeight", void 0);
-__decorate([r$1()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void 0);
-__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([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
+__decorate$1([n$2({ type: Object })], IxfxTimelineElement.prototype, "onDragging", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_ppu", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_viewRange", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_vViewRange", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_vScale", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_selectedIds", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_tickledId", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_drag", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_metaHeight", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
+__decorate$1([r$1()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
+IxfxTimelineElement = __decorate$1([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
 //#endregion
 //#region node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/keyed.js
 /**
@@ -34697,15 +36137,15 @@ let TransitoryLabelElement = class TransitoryLabelElement extends i$4 {
   `;
 	}
 };
-__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);
+__decorate$1([n$2({ type: String })], TransitoryLabelElement.prototype, "text", void 0);
+__decorate$1([n$2({ type: String })], TransitoryLabelElement.prototype, "effect", void 0);
+__decorate$1([n$2({ type: Number })], TransitoryLabelElement.prototype, "duration", void 0);
+__decorate$1([n$2({ type: String })], TransitoryLabelElement.prototype, "easing", void 0);
+__decorate$1([r$1()], TransitoryLabelElement.prototype, "_currentText", void 0);
+__decorate$1([r$1()], TransitoryLabelElement.prototype, "_outgoingText", void 0);
+__decorate$1([r$1()], TransitoryLabelElement.prototype, "_activeEffect", void 0);
+__decorate$1([r$1()], TransitoryLabelElement.prototype, "_transitionId", void 0);
+TransitoryLabelElement = __decorate$1([safeCustomElement(`ixfx-transitory-label`)], TransitoryLabelElement);
 //#endregion
 //#region src/tree/tree-base.ts
 let TreeBaseElement = class TreeBaseElement extends i$4 {
@@ -35577,31 +37017,31 @@ let TreeBaseElement = class TreeBaseElement extends i$4 {
 		];
 	}
 };
-__decorate([n$2({ type: Object })], TreeBaseElement.prototype, "root", void 0);
-__decorate([n$2({ attribute: false })], TreeBaseElement.prototype, "model", void 0);
-__decorate([n$2({ attribute: false })], TreeBaseElement.prototype, "loadChildren", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Object })], TreeBaseElement.prototype, "root", void 0);
+__decorate$1([n$2({ attribute: false })], TreeBaseElement.prototype, "model", void 0);
+__decorate$1([n$2({ attribute: false })], TreeBaseElement.prototype, "loadChildren", void 0);
+__decorate$1([n$2({
 	reflect: true,
 	attribute: `exclusivity`
 })], TreeBaseElement.prototype, "exclusivity", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	reflect: true,
 	attribute: `selection-filter`
 })], TreeBaseElement.prototype, "selectionFilter", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `interaction-mode`
 })], TreeBaseElement.prototype, "interactionMode", void 0);
-__decorate([n$2({ attribute: false })], TreeBaseElement.prototype, "selectedNode", void 0);
-__decorate([r$1()], TreeBaseElement.prototype, "_selectedNodes", void 0);
-__decorate([n$2({ attribute: false })], TreeBaseElement.prototype, "filterPredicate", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ attribute: false })], TreeBaseElement.prototype, "selectedNode", void 0);
+__decorate$1([r$1()], TreeBaseElement.prototype, "_selectedNodes", void 0);
+__decorate$1([n$2({ attribute: false })], TreeBaseElement.prototype, "filterPredicate", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	attribute: `disable-keyboard-navigation`
 })], TreeBaseElement.prototype, "disableKeyboardNavigation", void 0);
-__decorate([r$1()], TreeBaseElement.prototype, "_expandedKeys", void 0);
-__decorate([r$1()], TreeBaseElement.prototype, "_focusedDepth", void 0);
-TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
+__decorate$1([r$1()], TreeBaseElement.prototype, "_expandedKeys", void 0);
+__decorate$1([r$1()], TreeBaseElement.prototype, "_focusedDepth", void 0);
+TreeBaseElement = __decorate$1([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
 //#endregion
 //#region src/tree/tree-controller.ts
 var TreeController = class {
@@ -35840,7 +37280,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
     `];
 	}
 };
-TreeListElement = __decorate([safeCustomElement(`ixfx-tree-list`)], TreeListElement);
+TreeListElement = __decorate$1([safeCustomElement(`ixfx-tree-list`)], TreeListElement);
 //#endregion
 //#region src/util/checkbox.ts
 function isCheckboxLike(el) {
@@ -35894,34 +37334,6 @@ function monitorIndeterminate(targetElOrQuery, watchedElsOrQueries) {
 	};
 }
 //#endregion
-//#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$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.");
-	}
-	render(t) {
-		return " " + Object.keys(t).filter((s) => t[s]).join(" ") + " ";
-	}
-	update(s, [i]) {
-		if (void 0 === this.st) {
-			this.st = /* @__PURE__ */ new Set(), void 0 !== s.strings && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t) => "" !== t)));
-			for (const t in i) i[t] && !this.nt?.has(t) && this.st.add(t);
-			return this.render(i);
-		}
-		const r = s.element.classList;
-		for (const t of this.st) t in i || (r.remove(t), this.st.delete(t));
-		for (const t in i) {
-			const s = !!i[t];
-			s === this.st.has(t) || this.nt?.has(t) || (s ? (r.add(t), this.st.add(t)) : (r.remove(t), this.st.delete(t)));
-		}
-		return E;
-	}
-});
-//#endregion
 //#region src/util/is-numeric.ts
 function isNumeric(str) {
 	if (typeof str === `number`) return true;
@@ -35991,11 +37403,11 @@ let TooltipElement = class TooltipElement extends i$4 {
 		return this;
 	}
 };
-__decorate([n$2({ type: String })], TooltipElement.prototype, "orientation", void 0);
-__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([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
+__decorate$1([n$2({ type: String })], TooltipElement.prototype, "orientation", void 0);
+__decorate$1([n$2({ type: String })], TooltipElement.prototype, "anchor", void 0);
+__decorate$1([n$2()], TooltipElement.prototype, "value", void 0);
+__decorate$1([n$2({ type: String })], TooltipElement.prototype, "icon", void 0);
+TooltipElement = _TooltipElement = __decorate$1([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
 //#endregion
 //#region src/vertical-list/vertical-list.ts
 const ITEM_SELECTOR = `li, [data-list-item]`;
@@ -36578,20 +37990,20 @@ let VerticalListElement = class VerticalListElement extends i$4 {
     `;
 	}
 };
-__decorate([n$2({
+__decorate$1([n$2({
 	type: String,
 	attribute: `selection-mode`
 })], VerticalListElement.prototype, "selectionMode", void 0);
-__decorate([n$2({
+__decorate$1([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);
+__decorate$1([n$2({ attribute: false })], VerticalListElement.prototype, "filterPredicate", void 0);
+__decorate$1([r$1()], VerticalListElement.prototype, "_selectedItems", void 0);
+__decorate$1([r$1()], VerticalListElement.prototype, "_searchVisible", void 0);
+__decorate$1([r$1()], VerticalListElement.prototype, "_searchQuery", void 0);
+__decorate$1([e$4(`.search-input`)], VerticalListElement.prototype, "_searchInputEl", void 0);
+VerticalListElement = __decorate$1([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 //#region src/xy-pad.ts
 /**
@@ -36972,53 +38384,53 @@ let XyPad = class XyPad extends i$4 {
     `;
 	}
 };
-__decorate([n$2({ type: Number })], XyPad.prototype, "xMin", void 0);
-__decorate([n$2({ type: Number })], XyPad.prototype, "xMax", void 0);
-__decorate([n$2({ type: Number })], XyPad.prototype, "x", void 0);
-__decorate([n$2({ type: Number })], XyPad.prototype, "yMin", void 0);
-__decorate([n$2({ type: Number })], XyPad.prototype, "yMax", void 0);
-__decorate([n$2({ type: Number })], XyPad.prototype, "y", void 0);
-__decorate([n$2({ type: String })], XyPad.prototype, "xScale", void 0);
-__decorate([n$2({ type: String })], XyPad.prototype, "yScale", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], XyPad.prototype, "xMin", void 0);
+__decorate$1([n$2({ type: Number })], XyPad.prototype, "xMax", void 0);
+__decorate$1([n$2({ type: Number })], XyPad.prototype, "x", void 0);
+__decorate$1([n$2({ type: Number })], XyPad.prototype, "yMin", void 0);
+__decorate$1([n$2({ type: Number })], XyPad.prototype, "yMax", void 0);
+__decorate$1([n$2({ type: Number })], XyPad.prototype, "y", void 0);
+__decorate$1([n$2({ type: String })], XyPad.prototype, "xScale", void 0);
+__decorate$1([n$2({ type: String })], XyPad.prototype, "yScale", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `x-snap-step`
 })], XyPad.prototype, "xSnapStep", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `y-snap-step`
 })], XyPad.prototype, "ySnapStep", void 0);
-__decorate([n$2({ type: String })], XyPad.prototype, "xLabel", void 0);
-__decorate([n$2({ type: String })], XyPad.prototype, "yLabel", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: String })], XyPad.prototype, "xLabel", void 0);
+__decorate$1([n$2({ type: String })], XyPad.prototype, "yLabel", void 0);
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true,
 	attribute: `show-crosshairs`
 })], XyPad.prototype, "showCrosshairs", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true,
 	attribute: `show-grid`
 })], XyPad.prototype, "showGrid", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true,
 	attribute: `hide-cursor`
 })], XyPad.prototype, "hideCursor", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Boolean,
 	reflect: true
 })], XyPad.prototype, "disabled", void 0);
-__decorate([n$2({ type: Number })], XyPad.prototype, "stops", void 0);
-__decorate([n$2({
+__decorate$1([n$2({ type: Number })], XyPad.prototype, "stops", void 0);
+__decorate$1([n$2({
 	type: Number,
 	attribute: `stops-x`
 })], XyPad.prototype, "stopsX", void 0);
-__decorate([n$2({
+__decorate$1([n$2({
 	type: Number,
 	attribute: `stops-y`
 })], XyPad.prototype, "stopsY", void 0);
-XyPad = __decorate([safeCustomElement(`ixfx-xy-pad`)], XyPad);
+XyPad = __decorate$1([safeCustomElement(`ixfx-xy-pad`)], XyPad);
 //#endregion
 //#region src/index.ts
 function init() {