@ixfx/components 0.1.1 → 0.1.3

package/bundle/index.js

@@ -1,16 +1,10 @@
-import { customElement, property, queryAssignedElements } from "lit/decorators.js";
 import { Circles, degreeToRadian, radianArc, radianToDegree, radiansSum } from "ixfx/geometry.js";
 import * as Numbers from "ixfx/numbers.js";
 import { clamp } from "ixfx/numbers.js";
 import { getCssVariable, getCssVariablesWithFallback } from "ixfx/dom.js";
-import { createRef, ref } from "lit/directives/ref.js";
 import { Trees } from "ixfx/collections.js";
-import { join } from "lit/directives/join.js";
 import { CanvasHelper, Colour, Drawing } from "ixfx/visual.js";
 import { Pathed } from "ixfx";
-import { customElement as customElement$1 } from "lit/decorators/custom-element.js";
-import { property as property$1 } from "lit/decorators/property.js";
-import { repeat } from "lit/directives/repeat.js";
 
 //#region node_modules/@lit/reactive-element/css-tag.js
 /**
@@ -18,43 +12,43 @@ import { repeat } from "lit/directives/repeat.js";
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t$1 = globalThis, e$1 = t$1.ShadowRoot && (void 0 === t$1.ShadyCSS || t$1.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$2 = Symbol(), o$3 = /* @__PURE__ */ new WeakMap();
-var n$1 = class {
-	constructor(t$2, e$3, o$4) {
-		if (this._$cssResult$ = !0, o$4 !== s$2) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-		this.cssText = t$2, this.t = e$3;
+const t$4 = globalThis, e$5 = t$4.ShadowRoot && (void 0 === t$4.ShadyCSS || t$4.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, s$4 = Symbol(), o$8 = /* @__PURE__ */ new WeakMap();
+var n$5 = class {
+	constructor(t$5, e$7, o$9) {
+		if (this._$cssResult$ = !0, o$9 !== s$4) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+		this.cssText = t$5, this.t = e$7;
 	}
 	get styleSheet() {
-		let t$2 = this.o;
-		const s$3 = this.t;
-		if (e$1 && void 0 === t$2) {
-			const e$3 = void 0 !== s$3 && 1 === s$3.length;
-			e$3 && (t$2 = o$3.get(s$3)), void 0 === t$2 && ((this.o = t$2 = new CSSStyleSheet()).replaceSync(this.cssText), e$3 && o$3.set(s$3, t$2));
+		let t$5 = this.o;
+		const s$5 = this.t;
+		if (e$5 && void 0 === t$5) {
+			const e$7 = void 0 !== s$5 && 1 === s$5.length;
+			e$7 && (t$5 = o$8.get(s$5)), void 0 === t$5 && ((this.o = t$5 = new CSSStyleSheet()).replaceSync(this.cssText), e$7 && o$8.set(s$5, t$5));
 		}
-		return t$2;
+		return t$5;
 	}
 	toString() {
 		return this.cssText;
 	}
 };
-const r$1 = (t$2) => new n$1("string" == typeof t$2 ? t$2 : t$2 + "", void 0, s$2), i$1 = (t$2, ...e$3) => {
-	const o$4 = 1 === t$2.length ? t$2[0] : e$3.reduce(((e$4, s$3, o$5) => e$4 + ((t$3) => {
-		if (!0 === t$3._$cssResult$) return t$3.cssText;
-		if ("number" == typeof t$3) return t$3;
-		throw Error("Value passed to 'css' function must be a 'css' function result: " + t$3 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-	})(s$3) + t$2[o$5 + 1]), t$2[0]);
-	return new n$1(o$4, t$2, s$2);
-}, S$1 = (s$3, o$4) => {
-	if (e$1) s$3.adoptedStyleSheets = o$4.map(((t$2) => t$2 instanceof CSSStyleSheet ? t$2 : t$2.styleSheet));
-	else for (const e$3 of o$4) {
-		const o$5 = document.createElement("style"), n$3 = t$1.litNonce;
-		void 0 !== n$3 && o$5.setAttribute("nonce", n$3), o$5.textContent = e$3.cssText, s$3.appendChild(o$5);
-	}
-}, c$1 = e$1 ? (t$2) => t$2 : (t$2) => t$2 instanceof CSSStyleSheet ? ((t$3) => {
-	let e$3 = "";
-	for (const s$3 of t$3.cssRules) e$3 += s$3.cssText;
-	return r$1(e$3);
-})(t$2) : t$2;
+const r$4 = (t$5) => new n$5("string" == typeof t$5 ? t$5 : t$5 + "", void 0, s$4), i$1 = (t$5, ...e$7) => {
+	const o$9 = 1 === t$5.length ? t$5[0] : e$7.reduce(((e$8, s$5, o$10) => e$8 + ((t$6) => {
+		if (!0 === t$6._$cssResult$) return t$6.cssText;
+		if ("number" == typeof t$6) return t$6;
+		throw Error("Value passed to 'css' function must be a 'css' function result: " + t$6 + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+	})(s$5) + t$5[o$10 + 1]), t$5[0]);
+	return new n$5(o$9, t$5, s$4);
+}, S$1 = (s$5, o$9) => {
+	if (e$5) s$5.adoptedStyleSheets = o$9.map(((t$5) => t$5 instanceof CSSStyleSheet ? t$5 : t$5.styleSheet));
+	else for (const e$7 of o$9) {
+		const o$10 = document.createElement("style"), n$7 = t$4.litNonce;
+		void 0 !== n$7 && o$10.setAttribute("nonce", n$7), o$10.textContent = e$7.cssText, s$5.appendChild(o$10);
+	}
+}, c$4 = e$5 ? (t$5) => t$5 : (t$5) => t$5 instanceof CSSStyleSheet ? ((t$6) => {
+	let e$7 = "";
+	for (const s$5 of t$6.cssRules) e$7 += s$5.cssText;
+	return r$4(e$7);
+})(t$5) : t$5;
 
 //#endregion
 //#region node_modules/@lit/reactive-element/reactive-element.js
@@ -62,181 +56,181 @@ const r$1 = (t$2) => new n$1("string" == typeof t$2 ? t$2 : t$2 + "", void 0, s$
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const { is: i$3, defineProperty: e$2, getOwnPropertyDescriptor: h$1, getOwnPropertyNames: r$2, getOwnPropertySymbols: o$2, getPrototypeOf: n$2 } = Object, a$1 = globalThis, c$2 = a$1.trustedTypes, l$1 = c$2 ? c$2.emptyScript : "", p$1 = a$1.reactiveElementPolyfillSupport, d$1 = (t$2, s$3) => t$2, u$1 = {
-	toAttribute(t$2, s$3) {
-		switch (s$3) {
+*/ const { is: i$5, defineProperty: e$6, getOwnPropertyDescriptor: h$4, getOwnPropertyNames: r$5, getOwnPropertySymbols: o$7, getPrototypeOf: n$6 } = Object, a$1 = globalThis, c$5 = a$1.trustedTypes, l$2 = c$5 ? c$5.emptyScript : "", p$2 = a$1.reactiveElementPolyfillSupport, d$2 = (t$5, s$5) => t$5, u$2 = {
+	toAttribute(t$5, s$5) {
+		switch (s$5) {
 			case Boolean:
-				t$2 = t$2 ? l$1 : null;
+				t$5 = t$5 ? l$2 : null;
 				break;
 			case Object:
-			case Array: t$2 = null == t$2 ? t$2 : JSON.stringify(t$2);
+			case Array: t$5 = null == t$5 ? t$5 : JSON.stringify(t$5);
 		}
-		return t$2;
+		return t$5;
 	},
-	fromAttribute(t$2, s$3) {
-		let i$4 = t$2;
-		switch (s$3) {
+	fromAttribute(t$5, s$5) {
+		let i$6 = t$5;
+		switch (s$5) {
 			case Boolean:
-				i$4 = null !== t$2;
+				i$6 = null !== t$5;
 				break;
 			case Number:
-				i$4 = null === t$2 ? null : Number(t$2);
+				i$6 = null === t$5 ? null : Number(t$5);
 				break;
 			case Object:
 			case Array: try {
-				i$4 = JSON.parse(t$2);
-			} catch (t$3) {
-				i$4 = null;
+				i$6 = JSON.parse(t$5);
+			} catch (t$6) {
+				i$6 = null;
 			}
 		}
-		return i$4;
+		return i$6;
 	}
-}, f$1 = (t$2, s$3) => !i$3(t$2, s$3), b$1 = {
+}, f$2 = (t$5, s$5) => !i$5(t$5, s$5), b$1 = {
 	attribute: !0,
 	type: String,
-	converter: u$1,
+	converter: u$2,
 	reflect: !1,
 	useDefault: !1,
-	hasChanged: f$1
+	hasChanged: f$2
 };
 Symbol.metadata ??= Symbol("metadata"), a$1.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 var y = class extends HTMLElement {
-	static addInitializer(t$2) {
-		this._$Ei(), (this.l ??= []).push(t$2);
+	static addInitializer(t$5) {
+		this._$Ei(), (this.l ??= []).push(t$5);
 	}
 	static get observedAttributes() {
 		return this.finalize(), this._$Eh && [...this._$Eh.keys()];
 	}
-	static createProperty(t$2, s$3 = b$1) {
-		if (s$3.state && (s$3.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t$2) && ((s$3 = Object.create(s$3)).wrapped = !0), this.elementProperties.set(t$2, s$3), !s$3.noAccessor) {
-			const i$4 = Symbol(), h$2 = this.getPropertyDescriptor(t$2, i$4, s$3);
-			void 0 !== h$2 && e$2(this.prototype, t$2, h$2);
+	static createProperty(t$5, s$5 = b$1) {
+		if (s$5.state && (s$5.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t$5) && ((s$5 = Object.create(s$5)).wrapped = !0), this.elementProperties.set(t$5, s$5), !s$5.noAccessor) {
+			const i$6 = Symbol(), h$5 = this.getPropertyDescriptor(t$5, i$6, s$5);
+			void 0 !== h$5 && e$6(this.prototype, t$5, h$5);
 		}
 	}
-	static getPropertyDescriptor(t$2, s$3, i$4) {
-		const { get: e$3, set: r$3 } = h$1(this.prototype, t$2) ?? {
+	static getPropertyDescriptor(t$5, s$5, i$6) {
+		const { get: e$7, set: r$6 } = h$4(this.prototype, t$5) ?? {
 			get() {
-				return this[s$3];
+				return this[s$5];
 			},
-			set(t$3) {
-				this[s$3] = t$3;
+			set(t$6) {
+				this[s$5] = t$6;
 			}
 		};
 		return {
-			get: e$3,
-			set(s$4) {
-				const h$2 = e$3?.call(this);
-				r$3?.call(this, s$4), this.requestUpdate(t$2, h$2, i$4);
+			get: e$7,
+			set(s$6) {
+				const h$5 = e$7?.call(this);
+				r$6?.call(this, s$6), this.requestUpdate(t$5, h$5, i$6);
 			},
 			configurable: !0,
 			enumerable: !0
 		};
 	}
-	static getPropertyOptions(t$2) {
-		return this.elementProperties.get(t$2) ?? b$1;
+	static getPropertyOptions(t$5) {
+		return this.elementProperties.get(t$5) ?? b$1;
 	}
 	static _$Ei() {
-		if (this.hasOwnProperty(d$1("elementProperties"))) return;
-		const t$2 = n$2(this);
-		t$2.finalize(), void 0 !== t$2.l && (this.l = [...t$2.l]), this.elementProperties = new Map(t$2.elementProperties);
+		if (this.hasOwnProperty(d$2("elementProperties"))) return;
+		const t$5 = n$6(this);
+		t$5.finalize(), void 0 !== t$5.l && (this.l = [...t$5.l]), this.elementProperties = new Map(t$5.elementProperties);
 	}
 	static finalize() {
-		if (this.hasOwnProperty(d$1("finalized"))) return;
-		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(d$1("properties"))) {
-			const t$3 = this.properties, s$3 = [...r$2(t$3), ...o$2(t$3)];
-			for (const i$4 of s$3) this.createProperty(i$4, t$3[i$4]);
+		if (this.hasOwnProperty(d$2("finalized"))) return;
+		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(d$2("properties"))) {
+			const t$6 = this.properties, s$5 = [...r$5(t$6), ...o$7(t$6)];
+			for (const i$6 of s$5) this.createProperty(i$6, t$6[i$6]);
 		}
-		const t$2 = this[Symbol.metadata];
-		if (null !== t$2) {
-			const s$3 = litPropertyMetadata.get(t$2);
-			if (void 0 !== s$3) for (const [t$3, i$4] of s$3) this.elementProperties.set(t$3, i$4);
+		const t$5 = this[Symbol.metadata];
+		if (null !== t$5) {
+			const s$5 = litPropertyMetadata.get(t$5);
+			if (void 0 !== s$5) for (const [t$6, i$6] of s$5) this.elementProperties.set(t$6, i$6);
 		}
 		this._$Eh = /* @__PURE__ */ new Map();
-		for (const [t$3, s$3] of this.elementProperties) {
-			const i$4 = this._$Eu(t$3, s$3);
-			void 0 !== i$4 && this._$Eh.set(i$4, t$3);
+		for (const [t$6, s$5] of this.elementProperties) {
+			const i$6 = this._$Eu(t$6, s$5);
+			void 0 !== i$6 && this._$Eh.set(i$6, t$6);
 		}
 		this.elementStyles = this.finalizeStyles(this.styles);
 	}
-	static finalizeStyles(s$3) {
-		const i$4 = [];
-		if (Array.isArray(s$3)) {
-			const e$3 = new Set(s$3.flat(Infinity).reverse());
-			for (const s$4 of e$3) i$4.unshift(c$1(s$4));
-		} else void 0 !== s$3 && i$4.push(c$1(s$3));
-		return i$4;
+	static finalizeStyles(s$5) {
+		const i$6 = [];
+		if (Array.isArray(s$5)) {
+			const e$7 = new Set(s$5.flat(Infinity).reverse());
+			for (const s$6 of e$7) i$6.unshift(c$4(s$6));
+		} else void 0 !== s$5 && i$6.push(c$4(s$5));
+		return i$6;
 	}
-	static _$Eu(t$2, s$3) {
-		const i$4 = s$3.attribute;
-		return !1 === i$4 ? void 0 : "string" == typeof i$4 ? i$4 : "string" == typeof t$2 ? t$2.toLowerCase() : void 0;
+	static _$Eu(t$5, s$5) {
+		const i$6 = s$5.attribute;
+		return !1 === i$6 ? void 0 : "string" == typeof i$6 ? i$6 : "string" == typeof t$5 ? t$5.toLowerCase() : void 0;
 	}
 	constructor() {
 		super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
 	}
 	_$Ev() {
-		this._$ES = new Promise(((t$2) => this.enableUpdating = t$2)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t$2) => t$2(this)));
+		this._$ES = new Promise(((t$5) => this.enableUpdating = t$5)), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach(((t$5) => t$5(this)));
 	}
-	addController(t$2) {
-		(this._$EO ??= /* @__PURE__ */ new Set()).add(t$2), void 0 !== this.renderRoot && this.isConnected && t$2.hostConnected?.();
+	addController(t$5) {
+		(this._$EO ??= /* @__PURE__ */ new Set()).add(t$5), void 0 !== this.renderRoot && this.isConnected && t$5.hostConnected?.();
 	}
-	removeController(t$2) {
-		this._$EO?.delete(t$2);
+	removeController(t$5) {
+		this._$EO?.delete(t$5);
 	}
 	_$E_() {
-		const t$2 = /* @__PURE__ */ new Map(), s$3 = this.constructor.elementProperties;
-		for (const i$4 of s$3.keys()) this.hasOwnProperty(i$4) && (t$2.set(i$4, this[i$4]), delete this[i$4]);
-		t$2.size > 0 && (this._$Ep = t$2);
+		const t$5 = /* @__PURE__ */ new Map(), s$5 = this.constructor.elementProperties;
+		for (const i$6 of s$5.keys()) this.hasOwnProperty(i$6) && (t$5.set(i$6, this[i$6]), delete this[i$6]);
+		t$5.size > 0 && (this._$Ep = t$5);
 	}
 	createRenderRoot() {
-		const t$2 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-		return S$1(t$2, this.constructor.elementStyles), t$2;
+		const t$5 = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+		return S$1(t$5, this.constructor.elementStyles), t$5;
 	}
 	connectedCallback() {
-		this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t$2) => t$2.hostConnected?.()));
+		this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t$5) => t$5.hostConnected?.()));
 	}
-	enableUpdating(t$2) {}
+	enableUpdating(t$5) {}
 	disconnectedCallback() {
-		this._$EO?.forEach(((t$2) => t$2.hostDisconnected?.()));
+		this._$EO?.forEach(((t$5) => t$5.hostDisconnected?.()));
 	}
-	attributeChangedCallback(t$2, s$3, i$4) {
-		this._$AK(t$2, i$4);
+	attributeChangedCallback(t$5, s$5, i$6) {
+		this._$AK(t$5, i$6);
 	}
-	_$ET(t$2, s$3) {
-		const i$4 = this.constructor.elementProperties.get(t$2), e$3 = this.constructor._$Eu(t$2, i$4);
-		if (void 0 !== e$3 && !0 === i$4.reflect) {
-			const h$2 = (void 0 !== i$4.converter?.toAttribute ? i$4.converter : u$1).toAttribute(s$3, i$4.type);
-			this._$Em = t$2, null == h$2 ? this.removeAttribute(e$3) : this.setAttribute(e$3, h$2), this._$Em = null;
+	_$ET(t$5, s$5) {
+		const i$6 = this.constructor.elementProperties.get(t$5), e$7 = this.constructor._$Eu(t$5, i$6);
+		if (void 0 !== e$7 && !0 === i$6.reflect) {
+			const h$5 = (void 0 !== i$6.converter?.toAttribute ? i$6.converter : u$2).toAttribute(s$5, i$6.type);
+			this._$Em = t$5, null == h$5 ? this.removeAttribute(e$7) : this.setAttribute(e$7, h$5), this._$Em = null;
 		}
 	}
-	_$AK(t$2, s$3) {
-		const i$4 = this.constructor, e$3 = i$4._$Eh.get(t$2);
-		if (void 0 !== e$3 && this._$Em !== e$3) {
-			const t$3 = i$4.getPropertyOptions(e$3), h$2 = "function" == typeof t$3.converter ? { fromAttribute: t$3.converter } : void 0 !== t$3.converter?.fromAttribute ? t$3.converter : u$1;
-			this._$Em = e$3;
-			const r$3 = h$2.fromAttribute(s$3, t$3.type);
-			this[e$3] = r$3 ?? this._$Ej?.get(e$3) ?? r$3, this._$Em = null;
+	_$AK(t$5, s$5) {
+		const i$6 = this.constructor, e$7 = i$6._$Eh.get(t$5);
+		if (void 0 !== e$7 && this._$Em !== e$7) {
+			const t$6 = i$6.getPropertyOptions(e$7), h$5 = "function" == typeof t$6.converter ? { fromAttribute: t$6.converter } : void 0 !== t$6.converter?.fromAttribute ? t$6.converter : u$2;
+			this._$Em = e$7;
+			const r$6 = h$5.fromAttribute(s$5, t$6.type);
+			this[e$7] = r$6 ?? this._$Ej?.get(e$7) ?? r$6, this._$Em = null;
 		}
 	}
-	requestUpdate(t$2, s$3, i$4) {
-		if (void 0 !== t$2) {
-			const e$3 = this.constructor, h$2 = this[t$2];
-			if (i$4 ??= e$3.getPropertyOptions(t$2), !((i$4.hasChanged ?? f$1)(h$2, s$3) || i$4.useDefault && i$4.reflect && h$2 === this._$Ej?.get(t$2) && !this.hasAttribute(e$3._$Eu(t$2, i$4)))) return;
-			this.C(t$2, s$3, i$4);
+	requestUpdate(t$5, s$5, i$6) {
+		if (void 0 !== t$5) {
+			const e$7 = this.constructor, h$5 = this[t$5];
+			if (i$6 ??= e$7.getPropertyOptions(t$5), !((i$6.hasChanged ?? f$2)(h$5, s$5) || i$6.useDefault && i$6.reflect && h$5 === this._$Ej?.get(t$5) && !this.hasAttribute(e$7._$Eu(t$5, i$6)))) return;
+			this.C(t$5, s$5, i$6);
 		}
 		!1 === this.isUpdatePending && (this._$ES = this._$EP());
 	}
-	C(t$2, s$3, { useDefault: i$4, reflect: e$3, wrapped: h$2 }, r$3) {
-		i$4 && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t$2) && (this._$Ej.set(t$2, r$3 ?? s$3 ?? this[t$2]), !0 !== h$2 || void 0 !== r$3) || (this._$AL.has(t$2) || (this.hasUpdated || i$4 || (s$3 = void 0), this._$AL.set(t$2, s$3)), !0 === e$3 && this._$Em !== t$2 && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t$2));
+	C(t$5, s$5, { useDefault: i$6, reflect: e$7, wrapped: h$5 }, r$6) {
+		i$6 && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t$5) && (this._$Ej.set(t$5, r$6 ?? s$5 ?? this[t$5]), !0 !== h$5 || void 0 !== r$6) || (this._$AL.has(t$5) || (this.hasUpdated || i$6 || (s$5 = void 0), this._$AL.set(t$5, s$5)), !0 === e$7 && this._$Em !== t$5 && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t$5));
 	}
 	async _$EP() {
 		this.isUpdatePending = !0;
 		try {
 			await this._$ES;
-		} catch (t$3) {
-			Promise.reject(t$3);
+		} catch (t$6) {
+			Promise.reject(t$6);
 		}
-		const t$2 = this.scheduleUpdate();
-		return null != t$2 && await t$2, !this.isUpdatePending;
+		const t$5 = this.scheduleUpdate();
+		return null != t$5 && await t$5, !this.isUpdatePending;
 	}
 	scheduleUpdate() {
 		return this.performUpdate();
@@ -245,27 +239,27 @@ var y = class extends HTMLElement {
 		if (!this.isUpdatePending) return;
 		if (!this.hasUpdated) {
 			if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
-				for (const [t$4, s$4] of this._$Ep) this[t$4] = s$4;
+				for (const [t$7, s$6] of this._$Ep) this[t$7] = s$6;
 				this._$Ep = void 0;
 			}
-			const t$3 = this.constructor.elementProperties;
-			if (t$3.size > 0) for (const [s$4, i$4] of t$3) {
-				const { wrapped: t$4 } = i$4, e$3 = this[s$4];
-				!0 !== t$4 || this._$AL.has(s$4) || void 0 === e$3 || this.C(s$4, void 0, i$4, e$3);
+			const t$6 = this.constructor.elementProperties;
+			if (t$6.size > 0) for (const [s$6, i$6] of t$6) {
+				const { wrapped: t$7 } = i$6, e$7 = this[s$6];
+				!0 !== t$7 || this._$AL.has(s$6) || void 0 === e$7 || this.C(s$6, void 0, i$6, e$7);
 			}
 		}
-		let t$2 = !1;
-		const s$3 = this._$AL;
+		let t$5 = !1;
+		const s$5 = this._$AL;
 		try {
-			t$2 = this.shouldUpdate(s$3), t$2 ? (this.willUpdate(s$3), this._$EO?.forEach(((t$3) => t$3.hostUpdate?.())), this.update(s$3)) : this._$EM();
-		} catch (s$4) {
-			throw t$2 = !1, this._$EM(), s$4;
+			t$5 = this.shouldUpdate(s$5), t$5 ? (this.willUpdate(s$5), this._$EO?.forEach(((t$6) => t$6.hostUpdate?.())), this.update(s$5)) : this._$EM();
+		} catch (s$6) {
+			throw t$5 = !1, this._$EM(), s$6;
 		}
-		t$2 && this._$AE(s$3);
+		t$5 && this._$AE(s$5);
 	}
-	willUpdate(t$2) {}
-	_$AE(t$2) {
-		this._$EO?.forEach(((t$3) => t$3.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t$2)), this.updated(t$2);
+	willUpdate(t$5) {}
+	_$AE(t$5) {
+		this._$EO?.forEach(((t$6) => t$6.hostUpdated?.())), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t$5)), this.updated(t$5);
 	}
 	_$EM() {
 		this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
@@ -276,16 +270,16 @@ var y = class extends HTMLElement {
 	getUpdateComplete() {
 		return this._$ES;
 	}
-	shouldUpdate(t$2) {
+	shouldUpdate(t$5) {
 		return !0;
 	}
-	update(t$2) {
-		this._$Eq &&= this._$Eq.forEach(((t$3) => this._$ET(t$3, this[t$3]))), this._$EM();
+	update(t$5) {
+		this._$Eq &&= this._$Eq.forEach(((t$6) => this._$ET(t$6, this[t$6]))), this._$EM();
 	}
-	updated(t$2) {}
-	firstUpdated(t$2) {}
+	updated(t$5) {}
+	firstUpdated(t$5) {}
 };
-y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d$1("elementProperties")] = /* @__PURE__ */ new Map(), y[d$1("finalized")] = /* @__PURE__ */ new Map(), p$1?.({ ReactiveElement: y }), (a$1.reactiveElementVersions ??= []).push("2.1.1");
+y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d$2("elementProperties")] = /* @__PURE__ */ new Map(), y[d$2("finalized")] = /* @__PURE__ */ new Map(), p$2?.({ ReactiveElement: y }), (a$1.reactiveElementVersions ??= []).push("2.1.1");
 
 //#endregion
 //#region node_modules/lit-html/lit-html.js
@@ -294,91 +288,91 @@ y.elementStyles = [], y.shadowRootOptions = { mode: "open" }, y[d$1("elementProp
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-const t = globalThis, i$2 = t.trustedTypes, s$1 = i$2 ? i$2.createPolicy("lit-html", { createHTML: (t$2) => t$2 }) : void 0, e = "$lit$", h = `lit$${Math.random().toFixed(9).slice(2)}$`, o$1 = "?" + h, n = `<${o$1}>`, r = document, l = () => r.createComment(""), c = (t$2) => null === t$2 || "object" != typeof t$2 && "function" != typeof t$2, a = Array.isArray, u = (t$2) => a(t$2) || "function" == typeof t$2?.[Symbol.iterator], d = "[ 	\n\f\r]", f = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v = /-->/g, _ = />/g, m = RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), p = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y$1 = (t$2) => (i$4, ...s$3) => ({
-	_$litType$: t$2,
-	strings: i$4,
-	values: s$3
-}), x = y$1(1), b = y$1(2), w = y$1(3), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r.createTreeWalker(r, 129);
-function P(t$2, i$4) {
-	if (!a(t$2) || !t$2.hasOwnProperty("raw")) throw Error("invalid template strings array");
-	return void 0 !== s$1 ? s$1.createHTML(i$4) : i$4;
+const t$3 = globalThis, i$4 = t$3.trustedTypes, s$3 = i$4 ? i$4.createPolicy("lit-html", { createHTML: (t$5) => t$5 }) : void 0, e$4 = "$lit$", h$3 = `lit$${Math.random().toFixed(9).slice(2)}$`, o$6 = "?" + h$3, n$4 = `<${o$6}>`, r$3 = document, l$1 = () => r$3.createComment(""), c$3 = (t$5) => null === t$5 || "object" != typeof t$5 && "function" != typeof t$5, a = Array.isArray, u$3 = (t$5) => a(t$5) || "function" == typeof t$5?.[Symbol.iterator], d$1 = "[ 	\n\f\r]", f$3 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, v$1 = /-->/g, _ = />/g, m$1 = RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), p$1 = /'/g, g = /"/g, $ = /^(?:script|style|textarea|title)$/i, y$1 = (t$5) => (i$6, ...s$5) => ({
+	_$litType$: t$5,
+	strings: i$6,
+	values: s$5
+}), x = y$1(1), b = y$1(2), w = y$1(3), T = Symbol.for("lit-noChange"), E = Symbol.for("lit-nothing"), A = /* @__PURE__ */ new WeakMap(), C = r$3.createTreeWalker(r$3, 129);
+function P(t$5, i$6) {
+	if (!a(t$5) || !t$5.hasOwnProperty("raw")) throw Error("invalid template strings array");
+	return void 0 !== s$3 ? s$3.createHTML(i$6) : i$6;
 }
-const V = (t$2, i$4) => {
-	const s$3 = t$2.length - 1, o$4 = [];
-	let r$3, l$2 = 2 === i$4 ? "<svg>" : 3 === i$4 ? "<math>" : "", c$3 = f;
-	for (let i$5 = 0; i$5 < s$3; i$5++) {
-		const s$4 = t$2[i$5];
-		let a$2, u$2, d$2 = -1, y$2 = 0;
-		for (; y$2 < s$4.length && (c$3.lastIndex = y$2, u$2 = c$3.exec(s$4), null !== u$2);) y$2 = c$3.lastIndex, c$3 === f ? "!--" === u$2[1] ? c$3 = v : void 0 !== u$2[1] ? c$3 = _ : void 0 !== u$2[2] ? ($.test(u$2[2]) && (r$3 = RegExp("</" + u$2[2], "g")), c$3 = m) : void 0 !== u$2[3] && (c$3 = m) : c$3 === m ? ">" === u$2[0] ? (c$3 = r$3 ?? f, d$2 = -1) : void 0 === u$2[1] ? d$2 = -2 : (d$2 = c$3.lastIndex - u$2[2].length, a$2 = u$2[1], c$3 = void 0 === u$2[3] ? m : "\"" === u$2[3] ? g : p) : c$3 === g || c$3 === p ? c$3 = m : c$3 === v || c$3 === _ ? c$3 = f : (c$3 = m, r$3 = void 0);
-		const x$1 = c$3 === m && t$2[i$5 + 1].startsWith("/>") ? " " : "";
-		l$2 += c$3 === f ? s$4 + n : d$2 >= 0 ? (o$4.push(a$2), s$4.slice(0, d$2) + e + s$4.slice(d$2) + h + x$1) : s$4 + h + (-2 === d$2 ? i$5 : x$1);
-	}
-	return [P(t$2, l$2 + (t$2[s$3] || "<?>") + (2 === i$4 ? "</svg>" : 3 === i$4 ? "</math>" : "")), o$4];
+const V = (t$5, i$6) => {
+	const s$5 = t$5.length - 1, o$9 = [];
+	let r$6, l$3 = 2 === i$6 ? "<svg>" : 3 === i$6 ? "<math>" : "", c$6 = f$3;
+	for (let i$7 = 0; i$7 < s$5; i$7++) {
+		const s$6 = t$5[i$7];
+		let a$2, u$4, d$3 = -1, y$2 = 0;
+		for (; y$2 < s$6.length && (c$6.lastIndex = y$2, u$4 = c$6.exec(s$6), null !== u$4);) y$2 = c$6.lastIndex, c$6 === f$3 ? "!--" === u$4[1] ? c$6 = v$1 : void 0 !== u$4[1] ? c$6 = _ : void 0 !== u$4[2] ? ($.test(u$4[2]) && (r$6 = RegExp("</" + u$4[2], "g")), c$6 = m$1) : void 0 !== u$4[3] && (c$6 = m$1) : c$6 === m$1 ? ">" === u$4[0] ? (c$6 = r$6 ?? f$3, d$3 = -1) : void 0 === u$4[1] ? d$3 = -2 : (d$3 = c$6.lastIndex - u$4[2].length, a$2 = u$4[1], c$6 = void 0 === u$4[3] ? m$1 : "\"" === u$4[3] ? g : p$1) : c$6 === g || c$6 === p$1 ? c$6 = m$1 : c$6 === v$1 || c$6 === _ ? c$6 = f$3 : (c$6 = m$1, r$6 = void 0);
+		const x$1 = c$6 === m$1 && t$5[i$7 + 1].startsWith("/>") ? " " : "";
+		l$3 += c$6 === f$3 ? s$6 + n$4 : d$3 >= 0 ? (o$9.push(a$2), s$6.slice(0, d$3) + e$4 + s$6.slice(d$3) + h$3 + x$1) : s$6 + h$3 + (-2 === d$3 ? i$7 : x$1);
+	}
+	return [P(t$5, l$3 + (t$5[s$5] || "<?>") + (2 === i$6 ? "</svg>" : 3 === i$6 ? "</math>" : "")), o$9];
 };
 var N = class N {
-	constructor({ strings: t$2, _$litType$: s$3 }, n$3) {
-		let r$3;
+	constructor({ strings: t$5, _$litType$: s$5 }, n$7) {
+		let r$6;
 		this.parts = [];
-		let c$3 = 0, a$2 = 0;
-		const u$2 = t$2.length - 1, d$2 = this.parts, [f$2, v$1] = V(t$2, s$3);
-		if (this.el = N.createElement(f$2, n$3), C.currentNode = this.el.content, 2 === s$3 || 3 === s$3) {
-			const t$3 = this.el.content.firstChild;
-			t$3.replaceWith(...t$3.childNodes);
+		let c$6 = 0, a$2 = 0;
+		const u$4 = t$5.length - 1, d$3 = this.parts, [f$4, v$2] = V(t$5, s$5);
+		if (this.el = N.createElement(f$4, n$7), C.currentNode = this.el.content, 2 === s$5 || 3 === s$5) {
+			const t$6 = this.el.content.firstChild;
+			t$6.replaceWith(...t$6.childNodes);
 		}
-		for (; null !== (r$3 = C.nextNode()) && d$2.length < u$2;) {
-			if (1 === r$3.nodeType) {
-				if (r$3.hasAttributes()) for (const t$3 of r$3.getAttributeNames()) if (t$3.endsWith(e)) {
-					const i$4 = v$1[a$2++], s$4 = r$3.getAttribute(t$3).split(h), e$3 = /([.?@])?(.*)/.exec(i$4);
-					d$2.push({
+		for (; null !== (r$6 = C.nextNode()) && d$3.length < u$4;) {
+			if (1 === r$6.nodeType) {
+				if (r$6.hasAttributes()) for (const t$6 of r$6.getAttributeNames()) if (t$6.endsWith(e$4)) {
+					const i$6 = v$2[a$2++], s$6 = r$6.getAttribute(t$6).split(h$3), e$7 = /([.?@])?(.*)/.exec(i$6);
+					d$3.push({
 						type: 1,
-						index: c$3,
-						name: e$3[2],
-						strings: s$4,
-						ctor: "." === e$3[1] ? H : "?" === e$3[1] ? I : "@" === e$3[1] ? L : k
-					}), r$3.removeAttribute(t$3);
-				} else t$3.startsWith(h) && (d$2.push({
+						index: c$6,
+						name: e$7[2],
+						strings: s$6,
+						ctor: "." === e$7[1] ? H : "?" === e$7[1] ? I : "@" === e$7[1] ? L : k
+					}), r$6.removeAttribute(t$6);
+				} else t$6.startsWith(h$3) && (d$3.push({
 					type: 6,
-					index: c$3
-				}), r$3.removeAttribute(t$3));
-				if ($.test(r$3.tagName)) {
-					const t$3 = r$3.textContent.split(h), s$4 = t$3.length - 1;
-					if (s$4 > 0) {
-						r$3.textContent = i$2 ? i$2.emptyScript : "";
-						for (let i$4 = 0; i$4 < s$4; i$4++) r$3.append(t$3[i$4], l()), C.nextNode(), d$2.push({
+					index: c$6
+				}), r$6.removeAttribute(t$6));
+				if ($.test(r$6.tagName)) {
+					const t$6 = r$6.textContent.split(h$3), s$6 = t$6.length - 1;
+					if (s$6 > 0) {
+						r$6.textContent = i$4 ? i$4.emptyScript : "";
+						for (let i$6 = 0; i$6 < s$6; i$6++) r$6.append(t$6[i$6], l$1()), C.nextNode(), d$3.push({
 							type: 2,
-							index: ++c$3
+							index: ++c$6
 						});
-						r$3.append(t$3[s$4], l());
+						r$6.append(t$6[s$6], l$1());
 					}
 				}
-			} else if (8 === r$3.nodeType) if (r$3.data === o$1) d$2.push({
+			} else if (8 === r$6.nodeType) if (r$6.data === o$6) d$3.push({
 				type: 2,
-				index: c$3
+				index: c$6
 			});
 			else {
-				let t$3 = -1;
-				for (; -1 !== (t$3 = r$3.data.indexOf(h, t$3 + 1));) d$2.push({
+				let t$6 = -1;
+				for (; -1 !== (t$6 = r$6.data.indexOf(h$3, t$6 + 1));) d$3.push({
 					type: 7,
-					index: c$3
-				}), t$3 += h.length - 1;
+					index: c$6
+				}), t$6 += h$3.length - 1;
 			}
-			c$3++;
+			c$6++;
 		}
 	}
-	static createElement(t$2, i$4) {
-		const s$3 = r.createElement("template");
-		return s$3.innerHTML = t$2, s$3;
+	static createElement(t$5, i$6) {
+		const s$5 = r$3.createElement("template");
+		return s$5.innerHTML = t$5, s$5;
 	}
 };
-function S(t$2, i$4, s$3 = t$2, e$3) {
-	if (i$4 === T) return i$4;
-	let h$2 = void 0 !== e$3 ? s$3._$Co?.[e$3] : s$3._$Cl;
-	const o$4 = c(i$4) ? void 0 : i$4._$litDirective$;
-	return h$2?.constructor !== o$4 && (h$2?._$AO?.(!1), void 0 === o$4 ? h$2 = void 0 : (h$2 = new o$4(t$2), h$2._$AT(t$2, s$3, e$3)), void 0 !== e$3 ? (s$3._$Co ??= [])[e$3] = h$2 : s$3._$Cl = h$2), void 0 !== h$2 && (i$4 = S(t$2, h$2._$AS(t$2, i$4.values), h$2, e$3)), i$4;
+function S(t$5, i$6, s$5 = t$5, e$7) {
+	if (i$6 === T) return i$6;
+	let h$5 = void 0 !== e$7 ? s$5._$Co?.[e$7] : s$5._$Cl;
+	const o$9 = c$3(i$6) ? void 0 : i$6._$litDirective$;
+	return h$5?.constructor !== o$9 && (h$5?._$AO?.(!1), void 0 === o$9 ? h$5 = void 0 : (h$5 = new o$9(t$5), h$5._$AT(t$5, s$5, e$7)), void 0 !== e$7 ? (s$5._$Co ??= [])[e$7] = h$5 : s$5._$Cl = h$5), void 0 !== h$5 && (i$6 = S(t$5, h$5._$AS(t$5, i$6.values), h$5, e$7)), i$6;
 }
-var M = class {
-	constructor(t$2, i$4) {
-		this._$AV = [], this._$AN = void 0, this._$AD = t$2, this._$AM = i$4;
+var M$1 = class {
+	constructor(t$5, i$6) {
+		this._$AV = [], this._$AN = void 0, this._$AD = t$5, this._$AM = i$6;
 	}
 	get parentNode() {
 		return this._$AM.parentNode;
@@ -386,35 +380,35 @@ var M = class {
 	get _$AU() {
 		return this._$AM._$AU;
 	}
-	u(t$2) {
-		const { el: { content: i$4 }, parts: s$3 } = this._$AD, e$3 = (t$2?.creationScope ?? r).importNode(i$4, !0);
-		C.currentNode = e$3;
-		let h$2 = C.nextNode(), o$4 = 0, n$3 = 0, l$2 = s$3[0];
-		for (; void 0 !== l$2;) {
-			if (o$4 === l$2.index) {
-				let i$5;
-				2 === l$2.type ? i$5 = new R(h$2, h$2.nextSibling, this, t$2) : 1 === l$2.type ? i$5 = new l$2.ctor(h$2, l$2.name, l$2.strings, this, t$2) : 6 === l$2.type && (i$5 = new z(h$2, this, t$2)), this._$AV.push(i$5), l$2 = s$3[++n$3];
+	u(t$5) {
+		const { el: { content: i$6 }, parts: s$5 } = this._$AD, e$7 = (t$5?.creationScope ?? r$3).importNode(i$6, !0);
+		C.currentNode = e$7;
+		let h$5 = C.nextNode(), o$9 = 0, n$7 = 0, l$3 = s$5[0];
+		for (; void 0 !== l$3;) {
+			if (o$9 === l$3.index) {
+				let i$7;
+				2 === l$3.type ? i$7 = new R(h$5, h$5.nextSibling, this, t$5) : 1 === l$3.type ? i$7 = new l$3.ctor(h$5, l$3.name, l$3.strings, this, t$5) : 6 === l$3.type && (i$7 = new z(h$5, this, t$5)), this._$AV.push(i$7), l$3 = s$5[++n$7];
 			}
-			o$4 !== l$2?.index && (h$2 = C.nextNode(), o$4++);
+			o$9 !== l$3?.index && (h$5 = C.nextNode(), o$9++);
 		}
-		return C.currentNode = r, e$3;
+		return C.currentNode = r$3, e$7;
 	}
-	p(t$2) {
-		let i$4 = 0;
-		for (const s$3 of this._$AV) void 0 !== s$3 && (void 0 !== s$3.strings ? (s$3._$AI(t$2, s$3, i$4), i$4 += s$3.strings.length - 2) : s$3._$AI(t$2[i$4])), i$4++;
+	p(t$5) {
+		let i$6 = 0;
+		for (const s$5 of this._$AV) void 0 !== s$5 && (void 0 !== s$5.strings ? (s$5._$AI(t$5, s$5, i$6), i$6 += s$5.strings.length - 2) : s$5._$AI(t$5[i$6])), i$6++;
 	}
 };
 var R = class R {
 	get _$AU() {
 		return this._$AM?._$AU ?? this._$Cv;
 	}
-	constructor(t$2, i$4, s$3, e$3) {
-		this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t$2, this._$AB = i$4, this._$AM = s$3, this.options = e$3, this._$Cv = e$3?.isConnected ?? !0;
+	constructor(t$5, i$6, s$5, e$7) {
+		this.type = 2, this._$AH = E, this._$AN = void 0, this._$AA = t$5, this._$AB = i$6, this._$AM = s$5, this.options = e$7, this._$Cv = e$7?.isConnected ?? !0;
 	}
 	get parentNode() {
-		let t$2 = this._$AA.parentNode;
-		const i$4 = this._$AM;
-		return void 0 !== i$4 && 11 === t$2?.nodeType && (t$2 = i$4.parentNode), t$2;
+		let t$5 = this._$AA.parentNode;
+		const i$6 = this._$AM;
+		return void 0 !== i$6 && 11 === t$5?.nodeType && (t$5 = i$6.parentNode), t$5;
 	}
 	get startNode() {
 		return this._$AA;
@@ -422,45 +416,45 @@ var R = class R {
 	get endNode() {
 		return this._$AB;
 	}
-	_$AI(t$2, i$4 = this) {
-		t$2 = S(this, t$2, i$4), c(t$2) ? t$2 === E || null == t$2 || "" === t$2 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t$2 !== this._$AH && t$2 !== T && this._(t$2) : void 0 !== t$2._$litType$ ? this.$(t$2) : void 0 !== t$2.nodeType ? this.T(t$2) : u(t$2) ? this.k(t$2) : this._(t$2);
+	_$AI(t$5, i$6 = this) {
+		t$5 = S(this, t$5, i$6), c$3(t$5) ? t$5 === E || null == t$5 || "" === t$5 ? (this._$AH !== E && this._$AR(), this._$AH = E) : t$5 !== this._$AH && t$5 !== T && this._(t$5) : void 0 !== t$5._$litType$ ? this.$(t$5) : void 0 !== t$5.nodeType ? this.T(t$5) : u$3(t$5) ? this.k(t$5) : this._(t$5);
 	}
-	O(t$2) {
-		return this._$AA.parentNode.insertBefore(t$2, this._$AB);
+	O(t$5) {
+		return this._$AA.parentNode.insertBefore(t$5, this._$AB);
 	}
-	T(t$2) {
-		this._$AH !== t$2 && (this._$AR(), this._$AH = this.O(t$2));
+	T(t$5) {
+		this._$AH !== t$5 && (this._$AR(), this._$AH = this.O(t$5));
 	}
-	_(t$2) {
-		this._$AH !== E && c(this._$AH) ? this._$AA.nextSibling.data = t$2 : this.T(r.createTextNode(t$2)), this._$AH = t$2;
+	_(t$5) {
+		this._$AH !== E && c$3(this._$AH) ? this._$AA.nextSibling.data = t$5 : this.T(r$3.createTextNode(t$5)), this._$AH = t$5;
 	}
-	$(t$2) {
-		const { values: i$4, _$litType$: s$3 } = t$2, e$3 = "number" == typeof s$3 ? this._$AC(t$2) : (void 0 === s$3.el && (s$3.el = N.createElement(P(s$3.h, s$3.h[0]), this.options)), s$3);
-		if (this._$AH?._$AD === e$3) this._$AH.p(i$4);
+	$(t$5) {
+		const { values: i$6, _$litType$: s$5 } = t$5, e$7 = "number" == typeof s$5 ? this._$AC(t$5) : (void 0 === s$5.el && (s$5.el = N.createElement(P(s$5.h, s$5.h[0]), this.options)), s$5);
+		if (this._$AH?._$AD === e$7) this._$AH.p(i$6);
 		else {
-			const t$3 = new M(e$3, this), s$4 = t$3.u(this.options);
-			t$3.p(i$4), this.T(s$4), this._$AH = t$3;
+			const t$6 = new M$1(e$7, this), s$6 = t$6.u(this.options);
+			t$6.p(i$6), this.T(s$6), this._$AH = t$6;
 		}
 	}
-	_$AC(t$2) {
-		let i$4 = A.get(t$2.strings);
-		return void 0 === i$4 && A.set(t$2.strings, i$4 = new N(t$2)), i$4;
+	_$AC(t$5) {
+		let i$6 = A.get(t$5.strings);
+		return void 0 === i$6 && A.set(t$5.strings, i$6 = new N(t$5)), i$6;
 	}
-	k(t$2) {
+	k(t$5) {
 		a(this._$AH) || (this._$AH = [], this._$AR());
-		const i$4 = this._$AH;
-		let s$3, e$3 = 0;
-		for (const h$2 of t$2) e$3 === i$4.length ? i$4.push(s$3 = new R(this.O(l()), this.O(l()), this, this.options)) : s$3 = i$4[e$3], s$3._$AI(h$2), e$3++;
-		e$3 < i$4.length && (this._$AR(s$3 && s$3._$AB.nextSibling, e$3), i$4.length = e$3);
-	}
-	_$AR(t$2 = this._$AA.nextSibling, i$4) {
-		for (this._$AP?.(!1, !0, i$4); t$2 !== this._$AB;) {
-			const i$5 = t$2.nextSibling;
-			t$2.remove(), t$2 = i$5;
+		const i$6 = this._$AH;
+		let s$5, e$7 = 0;
+		for (const h$5 of t$5) e$7 === i$6.length ? i$6.push(s$5 = new R(this.O(l$1()), this.O(l$1()), this, this.options)) : s$5 = i$6[e$7], s$5._$AI(h$5), e$7++;
+		e$7 < i$6.length && (this._$AR(s$5 && s$5._$AB.nextSibling, e$7), i$6.length = e$7);
+	}
+	_$AR(t$5 = this._$AA.nextSibling, i$6) {
+		for (this._$AP?.(!1, !0, i$6); t$5 !== this._$AB;) {
+			const i$7 = t$5.nextSibling;
+			t$5.remove(), t$5 = i$7;
 		}
 	}
-	setConnected(t$2) {
-		void 0 === this._$AM && (this._$Cv = t$2, this._$AP?.(t$2));
+	setConnected(t$5) {
+		void 0 === this._$AM && (this._$Cv = t$5, this._$AP?.(t$5));
 	}
 };
 var k = class {
@@ -470,72 +464,72 @@ var k = class {
 	get _$AU() {
 		return this._$AM._$AU;
 	}
-	constructor(t$2, i$4, s$3, e$3, h$2) {
-		this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t$2, this.name = i$4, this._$AM = e$3, this.options = h$2, s$3.length > 2 || "" !== s$3[0] || "" !== s$3[1] ? (this._$AH = Array(s$3.length - 1).fill(/* @__PURE__ */ new String()), this.strings = s$3) : this._$AH = E;
+	constructor(t$5, i$6, s$5, e$7, h$5) {
+		this.type = 1, this._$AH = E, this._$AN = void 0, this.element = t$5, this.name = i$6, this._$AM = e$7, this.options = h$5, s$5.length > 2 || "" !== s$5[0] || "" !== s$5[1] ? (this._$AH = Array(s$5.length - 1).fill(/* @__PURE__ */ new String()), this.strings = s$5) : this._$AH = E;
 	}
-	_$AI(t$2, i$4 = this, s$3, e$3) {
-		const h$2 = this.strings;
-		let o$4 = !1;
-		if (void 0 === h$2) t$2 = S(this, t$2, i$4, 0), o$4 = !c(t$2) || t$2 !== this._$AH && t$2 !== T, o$4 && (this._$AH = t$2);
+	_$AI(t$5, i$6 = this, s$5, e$7) {
+		const h$5 = this.strings;
+		let o$9 = !1;
+		if (void 0 === h$5) t$5 = S(this, t$5, i$6, 0), o$9 = !c$3(t$5) || t$5 !== this._$AH && t$5 !== T, o$9 && (this._$AH = t$5);
 		else {
-			const e$4 = t$2;
-			let n$3, r$3;
-			for (t$2 = h$2[0], n$3 = 0; n$3 < h$2.length - 1; n$3++) r$3 = S(this, e$4[s$3 + n$3], i$4, n$3), r$3 === T && (r$3 = this._$AH[n$3]), o$4 ||= !c(r$3) || r$3 !== this._$AH[n$3], r$3 === E ? t$2 = E : t$2 !== E && (t$2 += (r$3 ?? "") + h$2[n$3 + 1]), this._$AH[n$3] = r$3;
+			const e$8 = t$5;
+			let n$7, r$6;
+			for (t$5 = h$5[0], n$7 = 0; n$7 < h$5.length - 1; n$7++) r$6 = S(this, e$8[s$5 + n$7], i$6, n$7), r$6 === T && (r$6 = this._$AH[n$7]), o$9 ||= !c$3(r$6) || r$6 !== this._$AH[n$7], r$6 === E ? t$5 = E : t$5 !== E && (t$5 += (r$6 ?? "") + h$5[n$7 + 1]), this._$AH[n$7] = r$6;
 		}
-		o$4 && !e$3 && this.j(t$2);
+		o$9 && !e$7 && this.j(t$5);
 	}
-	j(t$2) {
-		t$2 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t$2 ?? "");
+	j(t$5) {
+		t$5 === E ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t$5 ?? "");
 	}
 };
 var H = class extends k {
 	constructor() {
 		super(...arguments), this.type = 3;
 	}
-	j(t$2) {
-		this.element[this.name] = t$2 === E ? void 0 : t$2;
+	j(t$5) {
+		this.element[this.name] = t$5 === E ? void 0 : t$5;
 	}
 };
 var I = class extends k {
 	constructor() {
 		super(...arguments), this.type = 4;
 	}
-	j(t$2) {
-		this.element.toggleAttribute(this.name, !!t$2 && t$2 !== E);
+	j(t$5) {
+		this.element.toggleAttribute(this.name, !!t$5 && t$5 !== E);
 	}
 };
 var L = class extends k {
-	constructor(t$2, i$4, s$3, e$3, h$2) {
-		super(t$2, i$4, s$3, e$3, h$2), this.type = 5;
+	constructor(t$5, i$6, s$5, e$7, h$5) {
+		super(t$5, i$6, s$5, e$7, h$5), this.type = 5;
 	}
-	_$AI(t$2, i$4 = this) {
-		if ((t$2 = S(this, t$2, i$4, 0) ?? E) === T) return;
-		const s$3 = this._$AH, e$3 = t$2 === E && s$3 !== E || t$2.capture !== s$3.capture || t$2.once !== s$3.once || t$2.passive !== s$3.passive, h$2 = t$2 !== E && (s$3 === E || e$3);
-		e$3 && this.element.removeEventListener(this.name, this, s$3), h$2 && this.element.addEventListener(this.name, this, t$2), this._$AH = t$2;
+	_$AI(t$5, i$6 = this) {
+		if ((t$5 = S(this, t$5, i$6, 0) ?? E) === T) return;
+		const s$5 = this._$AH, e$7 = t$5 === E && s$5 !== E || t$5.capture !== s$5.capture || t$5.once !== s$5.once || t$5.passive !== s$5.passive, h$5 = t$5 !== E && (s$5 === E || e$7);
+		e$7 && this.element.removeEventListener(this.name, this, s$5), h$5 && this.element.addEventListener(this.name, this, t$5), this._$AH = t$5;
 	}
-	handleEvent(t$2) {
-		"function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t$2) : this._$AH.handleEvent(t$2);
+	handleEvent(t$5) {
+		"function" == typeof this._$AH ? this._$AH.call(this.options?.host ?? this.element, t$5) : this._$AH.handleEvent(t$5);
 	}
 };
 var z = class {
-	constructor(t$2, i$4, s$3) {
-		this.element = t$2, this.type = 6, this._$AN = void 0, this._$AM = i$4, this.options = s$3;
+	constructor(t$5, i$6, s$5) {
+		this.element = t$5, this.type = 6, this._$AN = void 0, this._$AM = i$6, this.options = s$5;
 	}
 	get _$AU() {
 		return this._$AM._$AU;
 	}
-	_$AI(t$2) {
-		S(this, t$2);
+	_$AI(t$5) {
+		S(this, t$5);
 	}
 };
 const Z = {
-	M: e,
-	P: h,
-	A: o$1,
+	M: e$4,
+	P: h$3,
+	A: o$6,
 	C: 1,
 	L: V,
-	R: M,
-	D: u,
+	R: M$1,
+	D: u$3,
 	V: S,
 	I: R,
 	H: k,
@@ -543,16 +537,16 @@ const Z = {
 	U: L,
 	B: H,
 	F: z
-}, j = t.litHtmlPolyfillSupport;
-j?.(N, R), (t.litHtmlVersions ??= []).push("3.3.1");
-const B = (t$2, i$4, s$3) => {
-	const e$3 = s$3?.renderBefore ?? i$4;
-	let h$2 = e$3._$litPart$;
-	if (void 0 === h$2) {
-		const t$3 = s$3?.renderBefore ?? null;
-		e$3._$litPart$ = h$2 = new R(i$4.insertBefore(l(), t$3), t$3, void 0, s$3 ?? {});
-	}
-	return h$2._$AI(t$2), h$2;
+}, j = t$3.litHtmlPolyfillSupport;
+j?.(N, R), (t$3.litHtmlVersions ??= []).push("3.3.1");
+const B = (t$5, i$6, s$5) => {
+	const e$7 = s$5?.renderBefore ?? i$6;
+	let h$5 = e$7._$litPart$;
+	if (void 0 === h$5) {
+		const t$6 = s$5?.renderBefore ?? null;
+		e$7._$litPart$ = h$5 = new R(i$6.insertBefore(l$1(), t$6), t$6, void 0, s$5 ?? {});
+	}
+	return h$5._$AI(t$5), h$5;
 };
 
 //#endregion
@@ -561,18 +555,18 @@ const B = (t$2, i$4, s$3) => {
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
-*/ const s = globalThis;
+*/ const s$2 = globalThis;
 var i = class extends y {
 	constructor() {
 		super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
 	}
 	createRenderRoot() {
-		const t$2 = super.createRenderRoot();
-		return this.renderOptions.renderBefore ??= t$2.firstChild, t$2;
+		const t$5 = super.createRenderRoot();
+		return this.renderOptions.renderBefore ??= t$5.firstChild, t$5;
 	}
-	update(t$2) {
-		const r$3 = this.render();
-		this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t$2), this._$Do = B(r$3, this.renderRoot, this.renderOptions);
+	update(t$5) {
+		const r$6 = this.render();
+		this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t$5), this._$Do = B(r$6, this.renderRoot, this.renderOptions);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._$Do?.setConnected(!0);
@@ -584,10 +578,91 @@ var i = class extends y {
 		return T;
 	}
 };
-i._$litElement$ = !0, i["finalized"] = !0, s.litElementHydrateSupport?.({ LitElement: i });
-const o = s.litElementPolyfillSupport;
-o?.({ LitElement: i });
-(s.litElementVersions ??= []).push("4.2.1");
+i._$litElement$ = !0, i["finalized"] = !0, s$2.litElementHydrateSupport?.({ LitElement: i });
+const o$5 = s$2.litElementPolyfillSupport;
+o$5?.({ LitElement: i });
+(s$2.litElementVersions ??= []).push("4.2.1");
+
+//#endregion
+//#region node_modules/@lit/reactive-element/decorators/custom-element.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+const t = (t$5) => (e$7, o$9) => {
+	void 0 !== o$9 ? o$9.addInitializer((() => {
+		customElements.define(t$5, e$7);
+	})) : customElements.define(t$5, e$7);
+};
+
+//#endregion
+//#region node_modules/@lit/reactive-element/decorators/property.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const o$4 = {
+	attribute: !0,
+	type: String,
+	converter: u$2,
+	reflect: !1,
+	hasChanged: f$2
+}, r$2 = (t$5 = o$4, e$7, r$6) => {
+	const { kind: n$7, metadata: i$6 } = r$6;
+	let s$5 = globalThis.litPropertyMetadata.get(i$6);
+	if (void 0 === s$5 && globalThis.litPropertyMetadata.set(i$6, s$5 = /* @__PURE__ */ new Map()), "setter" === n$7 && ((t$5 = Object.create(t$5)).wrapped = !0), s$5.set(r$6.name, t$5), "accessor" === n$7) {
+		const { name: o$9 } = r$6;
+		return {
+			set(r$7) {
+				const n$8 = e$7.get.call(this);
+				e$7.set.call(this, r$7), this.requestUpdate(o$9, n$8, t$5);
+			},
+			init(e$8) {
+				return void 0 !== e$8 && this.C(o$9, void 0, t$5, e$8), e$8;
+			}
+		};
+	}
+	if ("setter" === n$7) {
+		const { name: o$9 } = r$6;
+		return function(r$7) {
+			const n$8 = this[o$9];
+			e$7.call(this, r$7), this.requestUpdate(o$9, n$8, t$5);
+		};
+	}
+	throw Error("Unsupported decorator location: " + n$7);
+};
+function n(t$5) {
+	return (e$7, o$9) => "object" == typeof o$9 ? r$2(t$5, e$7, o$9) : ((t$6, e$8, o$10) => {
+		const r$6 = e$8.hasOwnProperty(o$10);
+		return e$8.constructor.createProperty(o$10, t$6), r$6 ? Object.getOwnPropertyDescriptor(e$8, o$10) : void 0;
+	})(t$5, e$7, o$9);
+}
+
+//#endregion
+//#region node_modules/@lit/reactive-element/decorators/base.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+const e$3 = (e$7, t$5, c$6) => (c$6.configurable = !0, c$6.enumerable = !0, Reflect.decorate && "object" != typeof t$5 && Object.defineProperty(e$7, t$5, c$6), c$6);
+
+//#endregion
+//#region node_modules/@lit/reactive-element/decorators/query-assigned-elements.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ function o(o$9) {
+	return (e$7, n$7) => {
+		const { slot: r$6, selector: s$5 } = o$9 ?? {}, c$6 = "slot" + (r$6 ? `[name=${r$6}]` : ":not([name])");
+		return e$3(e$7, n$7, { get() {
+			const t$5 = this.renderRoot?.querySelector(c$6), e$8 = t$5?.assignedElements(o$9) ?? [];
+			return void 0 === s$5 ? e$8 : e$8.filter(((t$6) => t$6.matches(s$5)));
+		} });
+	};
+}
 
 //#endregion
 //#region src/util/circle-arc.ts
@@ -635,8 +710,8 @@ const precompute = (arc) => {
 		invert
 	};
 };
-const interpolatePoint = (arc, t$2) => {
-	const angle = arc.rangeRadian * t$2;
+const interpolatePoint = (arc, t$5) => {
+	const angle = arc.rangeRadian * t$5;
 	return Circles.pointOnPerimeter(arc, arc.startAngle - angle);
 };
 const arcPart = (track, startAngle, endAngle, cw) => {
@@ -659,6 +734,168 @@ const toSvg = (arc, largeArc = true, clockwise = true) => {
 	return [`M ${arc.startPoint.x} ${arc.startPoint.y}`, `A ${arc.radius} ${arc.radius} ${rotation} ${largeArc ? `1` : `0`} ${clockwise ? `1` : `0`} ${arc.endPoint.x} ${arc.endPoint.y}`];
 };
 
+//#endregion
+//#region node_modules/lit-html/directive-helpers.js
+/**
+* @license
+* Copyright 2020 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const { I: t$2 } = Z, i$3 = (o$9) => null === o$9 || "object" != typeof o$9 && "function" != typeof o$9, n$3 = {
+	HTML: 1,
+	SVG: 2,
+	MATHML: 3
+}, e$2 = (o$9, t$5) => void 0 === t$5 ? void 0 !== o$9?._$litType$ : o$9?._$litType$ === t$5, l = (o$9) => null != o$9?._$litType$?.h, d = (o$9) => void 0 !== o$9?._$litDirective$, c$2 = (o$9) => o$9?._$litDirective$, f$1 = (o$9) => void 0 === o$9.strings, r$1 = () => document.createComment(""), s = (o$9, i$6, n$7) => {
+	const e$7 = o$9._$AA.parentNode, l$3 = void 0 === i$6 ? o$9._$AB : i$6._$AA;
+	if (void 0 === n$7) {
+		const i$7 = e$7.insertBefore(r$1(), l$3), d$3 = e$7.insertBefore(r$1(), l$3);
+		n$7 = new t$2(i$7, d$3, o$9, o$9.options);
+	} else {
+		const t$5 = n$7._$AB.nextSibling, i$7 = n$7._$AM, d$3 = i$7 !== o$9;
+		if (d$3) {
+			let t$6;
+			n$7._$AQ?.(o$9), n$7._$AM = o$9, void 0 !== n$7._$AP && (t$6 = o$9._$AU) !== i$7._$AU && n$7._$AP(t$6);
+		}
+		if (t$5 !== l$3 || d$3) {
+			let o$10 = n$7._$AA;
+			for (; o$10 !== t$5;) {
+				const t$6 = o$10.nextSibling;
+				e$7.insertBefore(o$10, l$3), o$10 = t$6;
+			}
+		}
+	}
+	return n$7;
+}, v = (o$9, t$5, i$6 = o$9) => (o$9._$AI(t$5, i$6), o$9), u$1 = {}, m = (o$9, t$5 = u$1) => o$9._$AH = t$5, p = (o$9) => o$9._$AH, M = (o$9) => {
+	o$9._$AR(), o$9._$AA.remove();
+}, h$2 = (o$9) => {
+	o$9._$AR();
+};
+
+//#endregion
+//#region node_modules/lit-html/directive.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+const t$1 = {
+	ATTRIBUTE: 1,
+	CHILD: 2,
+	PROPERTY: 3,
+	BOOLEAN_ATTRIBUTE: 4,
+	EVENT: 5,
+	ELEMENT: 6
+}, e = (t$5) => (...e$7) => ({
+	_$litDirective$: t$5,
+	values: e$7
+});
+var i$2 = class {
+	constructor(t$5) {}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	_$AT(t$5, e$7, i$6) {
+		this._$Ct = t$5, this._$AM = e$7, this._$Ci = i$6;
+	}
+	_$AS(t$5, e$7) {
+		return this.update(t$5, e$7);
+	}
+	update(t$5, e$7) {
+		return this.render(...e$7);
+	}
+};
+
+//#endregion
+//#region node_modules/lit-html/async-directive.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const s$1 = (i$6, t$5) => {
+	const e$7 = i$6._$AN;
+	if (void 0 === e$7) return !1;
+	for (const i$7 of e$7) i$7._$AO?.(t$5, !1), s$1(i$7, t$5);
+	return !0;
+}, o$3 = (i$6) => {
+	let t$5, e$7;
+	do {
+		if (void 0 === (t$5 = i$6._$AM)) break;
+		e$7 = t$5._$AN, e$7.delete(i$6), i$6 = t$5;
+	} while (0 === e$7?.size);
+}, r = (i$6) => {
+	for (let t$5; t$5 = i$6._$AM; i$6 = t$5) {
+		let e$7 = t$5._$AN;
+		if (void 0 === e$7) t$5._$AN = e$7 = /* @__PURE__ */ new Set();
+		else if (e$7.has(i$6)) break;
+		e$7.add(i$6), c$1(t$5);
+	}
+};
+function h$1(i$6) {
+	void 0 !== this._$AN ? (o$3(this), this._$AM = i$6, r(this)) : this._$AM = i$6;
+}
+function n$2(i$6, t$5 = !1, e$7 = 0) {
+	const r$6 = this._$AH, h$5 = this._$AN;
+	if (void 0 !== h$5 && 0 !== h$5.size) if (t$5) if (Array.isArray(r$6)) for (let i$7 = e$7; i$7 < r$6.length; i$7++) s$1(r$6[i$7], !1), o$3(r$6[i$7]);
+	else null != r$6 && (s$1(r$6, !1), o$3(r$6));
+	else s$1(this, i$6);
+}
+const c$1 = (i$6) => {
+	i$6.type == t$1.CHILD && (i$6._$AP ??= n$2, i$6._$AQ ??= h$1);
+};
+var f = class extends i$2 {
+	constructor() {
+		super(...arguments), this._$AN = void 0;
+	}
+	_$AT(i$6, t$5, e$7) {
+		super._$AT(i$6, t$5, e$7), r(this), this.isConnected = i$6._$AU;
+	}
+	_$AO(i$6, t$5 = !0) {
+		i$6 !== this.isConnected && (this.isConnected = i$6, i$6 ? this.reconnected?.() : this.disconnected?.()), t$5 && (s$1(this, i$6), o$3(this));
+	}
+	setValue(t$5) {
+		if (f$1(this._$Ct)) this._$Ct._$AI(t$5, this);
+		else {
+			const i$6 = [...this._$Ct._$AH];
+			i$6[this._$Ci] = t$5, this._$Ct._$AI(i$6, this, 0);
+		}
+	}
+	disconnected() {}
+	reconnected() {}
+};
+
+//#endregion
+//#region node_modules/lit-html/directives/ref.js
+/**
+* @license
+* Copyright 2020 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const e$1 = () => new h();
+var h = class {};
+const o$2 = /* @__PURE__ */ new WeakMap(), n$1 = e(class extends f {
+	render(i$6) {
+		return E;
+	}
+	update(i$6, [s$5]) {
+		const e$7 = s$5 !== this.G;
+		return e$7 && void 0 !== this.G && this.rt(void 0), (e$7 || this.lt !== this.ct) && (this.G = s$5, this.ht = i$6.options?.host, this.rt(this.ct = i$6.element)), E;
+	}
+	rt(t$5) {
+		if (this.isConnected || (t$5 = void 0), "function" == typeof this.G) {
+			const i$6 = this.ht ?? globalThis;
+			let s$5 = o$2.get(i$6);
+			void 0 === s$5 && (s$5 = /* @__PURE__ */ new WeakMap(), o$2.set(i$6, s$5)), void 0 !== s$5.get(this.G) && this.G.call(this.ht, void 0), s$5.set(this.G, t$5), void 0 !== t$5 && this.G.call(this.ht, t$5);
+		} else this.G.value = t$5;
+	}
+	get lt() {
+		return "function" == typeof this.G ? o$2.get(this.ht ?? globalThis)?.get(this.G) : this.G?.value;
+	}
+	disconnected() {
+		this.lt === this.ct && this.rt(void 0);
+	}
+	reconnected() {
+		this.rt(this.ct);
+	}
+});
+
 //#endregion
 //#region src/util/content-editable.ts
 const focus = (el, selectAll) => {
@@ -677,8 +914,8 @@ const focus = (el, selectAll) => {
 //#endregion
 //#region src/util/svg-editable-text.ts
 var SvgEditLabel = class extends EventTarget {
-	textRef = createRef();
-	editorRef = createRef();
+	textRef = e$1();
+	editorRef = e$1();
 	#keyDownBound = this.#onKeyDown.bind(this);
 	#blurBound = this.#onBlur.bind(this);
 	onEditMode;
@@ -686,7 +923,7 @@ var SvgEditLabel = class extends EventTarget {
 	#renderLabel(data) {
 		const { fill, x: x$1, y: y$2, displayValue, anchor, hideValue } = data;
 		if (hideValue) return b``;
-		return b`<text  ${ref(this.textRef)} id="label-value" @click=${() => this.#onValueClick()} fill=${fill} text-anchor=${anchor} x=${x$1} y=${y$2}>${displayValue}</text>`;
+		return b`<text  ${n$1(this.textRef)} id="label-value" @click=${() => this.#onValueClick()} fill=${fill} text-anchor=${anchor} x=${x$1} y=${y$2}>${displayValue}</text>`;
 	}
 	#onValueClick() {
 		this.#onEditMode(true);
@@ -698,17 +935,17 @@ var SvgEditLabel = class extends EventTarget {
 	#renderEdit(data) {
 		let { anchor, editValue, x: x$1, y: y$2 } = data;
 		let w$1 = 5;
-		let h$2 = 5;
+		let h$5 = 5;
 		if (this.textRef.value) {
 			const bbox = this.textRef.value.getBBox();
 			x$1 = x$1 - bbox.width / 2;
 			y$2 = y$2 - bbox.height + 4.5;
 			w$1 = bbox.width + 5;
-			h$2 = bbox.height;
+			h$5 = bbox.height;
 		}
 		return b`
-    <foreignObject text-anchor=${anchor} width=${w$1} height=${h$2} x=${x$1} y=${y$2}>
-    <div ${ref(this.editorRef)} @blur=${this.#blurBound} @keydown=${this.#keyDownBound} xmlns="http://www.w3.org/1999/xhtml" tab-index=0 contentEditable=true>${editValue}</div>
+    <foreignObject text-anchor=${anchor} width=${w$1} height=${h$5} x=${x$1} y=${y$2}>
+    <div ${n$1(this.editorRef)} @blur=${this.#blurBound} @keydown=${this.#keyDownBound} xmlns="http://www.w3.org/1999/xhtml" tab-index=0 contentEditable=true>${editValue}</div>
       </foreignObject>`;
 	}
 	render(data) {
@@ -759,10 +996,10 @@ var SvgEditLabel = class extends EventTarget {
 //#endregion
 //#region node_modules/@oxc-project/runtime/src/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
-	var c$3 = arguments.length, r$3 = c$3 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d$2;
-	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r$3 = Reflect.decorate(decorators, target, key, desc);
-	else for (var i$4 = decorators.length - 1; i$4 >= 0; i$4--) if (d$2 = decorators[i$4]) r$3 = (c$3 < 3 ? d$2(r$3) : c$3 > 3 ? d$2(target, key, r$3) : d$2(target, key)) || r$3;
-	return c$3 > 3 && r$3 && Object.defineProperty(target, key, r$3), r$3;
+	var c$6 = arguments.length, r$6 = c$6 < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d$3;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r$6 = Reflect.decorate(decorators, target, key, desc);
+	else for (var i$6 = decorators.length - 1; i$6 >= 0; i$6--) if (d$3 = decorators[i$6]) r$6 = (c$6 < 3 ? d$3(r$6) : c$6 > 3 ? d$3(target, key, r$6) : d$3(target, key)) || r$6;
+	return c$6 > 3 && r$6 && Object.defineProperty(target, key, r$6), r$6;
 }
 
 //#endregion
@@ -785,7 +1022,7 @@ let DialElement = class DialElement$1 extends i {
 	min = 0;
 	max = 100;
 	textRelativeHeight = 5;
-	valueLabelRef = createRef();
+	valueLabelRef = e$1();
 	valueLabel = {
 		anchor: `start`,
 		x: 0,
@@ -810,9 +1047,9 @@ let DialElement = class DialElement$1 extends i {
 			};
 		};
 		this.#editableLabel.onInput = (value) => {
-			const f$2 = Number.parseFloat(value);
-			if (Number.isNaN(f$2)) return;
-			this.#setValue(f$2);
+			const f$4 = Number.parseFloat(value);
+			if (Number.isNaN(f$4)) return;
+			this.#setValue(f$4);
 		};
 	}
 	#computeTextLabelPosition(vars, arc) {
@@ -876,14 +1113,14 @@ let DialElement = class DialElement$1 extends i {
 		if (hiddenTrack && !this.bipolar) {
 			let startAt = part.endAngle - .1;
 			const arcPart$1 = arcPart(arc, startAt, arc.endAngle, true);
-			const d$2 = radianArc(startAt, arc.endAngle, true);
+			const d$3 = radianArc(startAt, arc.endAngle, true);
 			if (value > .97) arcSvgBits = toSvg(arc, largeArc, clockwise);
 			else {
-				largeArc = d$2 > Math.PI;
+				largeArc = d$3 > Math.PI;
 				arcSvgBits = partToSvg(arc, arcPart$1, largeArc, clockwise);
 			}
 		} else arcSvgBits = toSvg(arc, largeArc, clockwise);
-		const s$3 = b`
+		const s$5 = b`
     <path 
       d="${arcSvgBits.join(" ")}" 
       fill="none"
@@ -892,7 +1129,7 @@ let DialElement = class DialElement$1 extends i {
       stroke-width="${vars.track_width}"
     />
     `;
-		return s$3;
+		return s$5;
 	}
 	#getBipolarValue(value, arc) {
 		if (value < .5) {
@@ -966,7 +1203,7 @@ let DialElement = class DialElement$1 extends i {
 		return b`<circle r=${arc.radius * vars.knob_radius} cx=${arc.x} cy=${arc.y} fill=${vars.knob_color} />`;
 	}
 	#renderPoints(radius, fill, ...circles) {
-		return circles.map((c$3) => b`<circle fill=${fill} r=${radius} cx=${c$3.x} cy=${c$3.y} />`);
+		return circles.map((c$6) => b`<circle fill=${fill} r=${radius} cx=${c$6.x} cy=${c$6.y} />`);
 	}
 	render() {
 		const vars = this.resolveVariables();
@@ -1020,8 +1257,8 @@ let DialElement = class DialElement$1 extends i {
 	}
 	#onPointerDrag(event) {
 		const y$2 = event.movementY / this.clientHeight;
-		const r$3 = this.range * y$2;
-		this.#setValue(this.value - r$3);
+		const r$6 = this.range * y$2;
+		this.#setValue(this.value - r$6);
 	}
 	#onDragStop() {
 		window.removeEventListener(`pointerup`, this.#onDragStopBound);
@@ -1122,24 +1359,24 @@ let DialElement = class DialElement$1 extends i {
 
   `;
 };
-__decorate([property({ type: Number })], DialElement.prototype, "rangeAngle", void 0);
-__decorate([property({ type: String })], DialElement.prototype, "rangeAnchor", void 0);
-__decorate([property({ type: String })], DialElement.prototype, "labelPosition", void 0);
-__decorate([property({ type: Boolean })], DialElement.prototype, "spread", void 0);
-__decorate([property({ type: Boolean })], DialElement.prototype, "hideValue", void 0);
-__decorate([property({ type: Boolean })], DialElement.prototype, "hideTerminators", void 0);
-__decorate([property({ type: Boolean })], DialElement.prototype, "showKnob", void 0);
-__decorate([property({ type: Boolean })], DialElement.prototype, "bipolar", void 0);
-__decorate([property({ type: String })], DialElement.prototype, "needleStyle", void 0);
-__decorate([property({ type: Number })], DialElement.prototype, "value", void 0);
-__decorate([property({ type: Number })], DialElement.prototype, "step", void 0);
-__decorate([property({ type: Number })], DialElement.prototype, "stepFine", void 0);
-__decorate([property({ type: Number })], DialElement.prototype, "radius", void 0);
-__decorate([property({ type: Number })], DialElement.prototype, "min", void 0);
-__decorate([property({ type: Number })], DialElement.prototype, "max", void 0);
-__decorate([property({ type: Number })], DialElement.prototype, "textRelativeHeight", void 0);
-__decorate([property({ type: Object })], DialElement.prototype, "valueLabel", void 0);
-DialElement = __decorate([customElement("ixfx-dial")], DialElement);
+__decorate([n({ type: Number })], DialElement.prototype, "rangeAngle", void 0);
+__decorate([n({ type: String })], DialElement.prototype, "rangeAnchor", void 0);
+__decorate([n({ type: String })], DialElement.prototype, "labelPosition", void 0);
+__decorate([n({ type: Boolean })], DialElement.prototype, "spread", void 0);
+__decorate([n({ type: Boolean })], DialElement.prototype, "hideValue", void 0);
+__decorate([n({ type: Boolean })], DialElement.prototype, "hideTerminators", void 0);
+__decorate([n({ type: Boolean })], DialElement.prototype, "showKnob", void 0);
+__decorate([n({ type: Boolean })], DialElement.prototype, "bipolar", void 0);
+__decorate([n({ type: String })], DialElement.prototype, "needleStyle", void 0);
+__decorate([n({ type: Number })], DialElement.prototype, "value", void 0);
+__decorate([n({ type: Number })], DialElement.prototype, "step", void 0);
+__decorate([n({ type: Number })], DialElement.prototype, "stepFine", void 0);
+__decorate([n({ type: Number })], DialElement.prototype, "radius", void 0);
+__decorate([n({ type: Number })], DialElement.prototype, "min", void 0);
+__decorate([n({ type: Number })], DialElement.prototype, "max", void 0);
+__decorate([n({ type: Number })], DialElement.prototype, "textRelativeHeight", void 0);
+__decorate([n({ type: Object })], DialElement.prototype, "valueLabel", void 0);
+DialElement = __decorate([t("ixfx-dial")], DialElement);
 
 //#endregion
 //#region src/selecthorizontal.ts
@@ -1170,8 +1407,23 @@ let SelectHorizontalElement = class SelectHorizontalElement$1 extends i {
   }
 `;
 };
-__decorate([property({ type: Boolean })], SelectHorizontalElement.prototype, "editMode", void 0);
-SelectHorizontalElement = __decorate([customElement("ixfx-selecthorizontal-element")], SelectHorizontalElement);
+__decorate([n({ type: Boolean })], SelectHorizontalElement.prototype, "editMode", void 0);
+SelectHorizontalElement = __decorate([t("ixfx-selecthorizontal-element")], SelectHorizontalElement);
+
+//#endregion
+//#region node_modules/lit-html/directives/join.js
+/**
+* @license
+* Copyright 2021 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+function* o$1(o$9, t$5) {
+	const f$4 = "function" == typeof t$5;
+	if (void 0 !== o$9) {
+		let i$6 = -1;
+		for (const n$7 of o$9) i$6 > -1 && (yield f$4 ? t$5(i$6) : t$5), i$6++, yield n$7;
+	}
+}
 
 //#endregion
 //#region src/crumb-navigation.ts
@@ -1180,14 +1432,14 @@ let CrumbNavigationElement = class CrumbNavigationElement$1 extends i {
 	selectedNode;
 	constructor() {
 		super();
-		const t$2 = Trees.Mutable.createNode({
+		const t$5 = Trees.Mutable.createNode({
 			key: `root`,
 			label: `root`
 		});
 		const nodeC = Trees.Mutable.addValue({
 			key: `c`,
 			label: `c:`
-		}, t$2);
+		}, t$5);
 		const nodeUsers = Trees.Mutable.addValue({
 			key: `users`,
 			label: `users`
@@ -1217,13 +1469,13 @@ let CrumbNavigationElement = class CrumbNavigationElement$1 extends i {
 			label: `reallylongoptionwow`
 		}, nodeUsers);
 		this.selectedNode = nodeUsers;
-		this.tree = t$2;
+		this.tree = t$5;
 	}
 	#previousSelectionKey = ``;
 	#onPartClick = (event) => {
 		const part = event.target.value;
-		const n$3 = Trees.Traverse.findAnyChildByValue(this.tree, part);
-		if (n$3) this.#setSelected(n$3);
+		const n$7 = Trees.Traverse.findAnyChildByValue(this.tree, part);
+		if (n$7) this.#setSelected(n$7);
 	};
 	/**
 	* Sets the selected node and fires event
@@ -1260,8 +1512,8 @@ let CrumbNavigationElement = class CrumbNavigationElement$1 extends i {
 			console.warn(`Bug. No data-key attribute`);
 			return;
 		}
-		for (const c$3 of currentlySelected.childrenStore) if (c$3.value?.key === key) {
-			this.#setSelected(c$3);
+		for (const c$6 of currentlySelected.childrenStore) if (c$6.value?.key === key) {
+			this.#setSelected(c$6);
 			break;
 		}
 	};
@@ -1282,14 +1534,14 @@ let CrumbNavigationElement = class CrumbNavigationElement$1 extends i {
 		}
 	}
 	#scrollToValue(li) {
-		let l$2 = li.offsetLeft;
+		let l$3 = li.offsetLeft;
 		const ul = li.parentElement;
 		if (!ul) return;
-		l$2 -= ul.offsetLeft;
+		l$3 -= ul.offsetLeft;
 		const horizSelectItems = ul.parentElement;
 		if (!horizSelectItems) return;
 		horizSelectItems.scroll({
-			left: l$2,
+			left: l$3,
 			top: 0,
 			behavior: `smooth`
 		});
@@ -1298,31 +1550,31 @@ let CrumbNavigationElement = class CrumbNavigationElement$1 extends i {
 		horizSelect.style.minWidth = li.getBoundingClientRect().width + "px";
 	}
 	render() {
-		const t$2 = this.tree;
-		const sel = this.selectedNode ?? t$2;
+		const t$5 = this.tree;
+		const sel = this.selectedNode ?? t$5;
 		let parts = [];
 		parts.push(x`<div .value=${sel.value} @click=${this.#onPartClick}>${sel.value?.label}</div>`);
-		for (const p$2 of Trees.Traverse.parents(sel)) {
-			if (p$2.value === void 0) continue;
-			const v$1 = p$2.value;
-			parts.push(x`<div .value=${v$1} @click=${this.#onPartClick}>${v$1.label}</div>`);
+		for (const p$3 of Trees.Traverse.parents(sel)) {
+			if (p$3.value === void 0) continue;
+			const v$2 = p$3.value;
+			parts.push(x`<div .value=${v$2} @click=${this.#onPartClick}>${v$2.label}</div>`);
 		}
 		parts.reverse();
 		const currentOpt = this.#renderFinalOption();
-		return x`<div class="parts">${join(parts, x`<span class="separator">&rsaquo;</span>`)}</div>
+		return x`<div class="parts">${o$1(parts, x`<span class="separator">&rsaquo;</span>`)}</div>
       ${currentOpt}`;
 	}
 	#renderFinalOption() {
-		const s$3 = this.selectedNode;
-		if (s$3 === void 0) {
+		const s$5 = this.selectedNode;
+		if (s$5 === void 0) {
 			console.warn(`No selectedNode`);
 			return x``;
 		}
-		return this.#renderOptions(s$3, this.#previousSelectionKey);
+		return this.#renderOptions(s$5, this.#previousSelectionKey);
 	}
 	#renderOptions(node, preselectKey) {
 		if (node.childrenStore.length === 0) return x``;
-		const options = node.childrenStore.map((c$3) => x`<li class="${c$3.value?.key === preselectKey ? `previous` : ``}" @click=${this.#onSubPartClick} data-key=${c$3.value?.key}>${c$3.value?.label}</li>`);
+		const options = node.childrenStore.map((c$6) => x`<li class="${c$6.value?.key === preselectKey ? `previous` : ``}" @click=${this.#onSubPartClick} data-key=${c$6.value?.key}>${c$6.value?.label}</li>`);
 		return x`
     <span class="separator">&rsaquo;</span>
     <div class="horiz-select">
@@ -1439,9 +1691,9 @@ let CrumbNavigationElement = class CrumbNavigationElement$1 extends i {
   }
 `;
 };
-__decorate([property({ type: Object })], CrumbNavigationElement.prototype, "tree", void 0);
-__decorate([property({ type: Object })], CrumbNavigationElement.prototype, "selectedNode", void 0);
-CrumbNavigationElement = __decorate([customElement("ixfx-crumb-navigation")], CrumbNavigationElement);
+__decorate([n({ type: Object })], CrumbNavigationElement.prototype, "tree", void 0);
+__decorate([n({ type: Object })], CrumbNavigationElement.prototype, "selectedNode", void 0);
+CrumbNavigationElement = __decorate([t("ixfx-crumb-navigation")], CrumbNavigationElement);
 
 //#endregion
 //#region src/crumb-nav.ts
@@ -1493,22 +1745,22 @@ let CrumbNavElement = class CrumbNavElement$1 extends i {
 		const split = path.split(separator);
 		let root = ``;
 		let segments = [];
-		for (const s$3 of split) {
-			root += s$3 + separator;
+		for (const s$5 of split) {
+			root += s$5 + separator;
 			segments.push({
 				key: root,
-				label: s$3
+				label: s$5
 			});
 		}
 		this.segments = segments;
 		this.editPath = path;
 	}
-	renderSegment(s$3, i$4) {
-		const last = i$4 === this.segments.length - 1;
-		const caret = x`<div .data=${s$3} @click=${this.onCaretClick} class="caret">&rsaquo;</div>`;
-		return x`<div class="seg ${s$3.ensureVisible ? `chosen` : ``}" >
-      <label .data=${s$3} title=${s$3.label} @click=${this.onLabelClick}>
-      ${s$3.label}
+	renderSegment(s$5, i$6) {
+		const last = i$6 === this.segments.length - 1;
+		const caret = x`<div .data=${s$5} @click=${this.onCaretClick} class="caret">&rsaquo;</div>`;
+		return x`<div class="seg ${s$5.ensureVisible ? `chosen` : ``}" >
+      <label .data=${s$5} title=${s$5.label} @click=${this.onLabelClick}>
+      ${s$5.label}
       </label>
       ${last ? `` : caret}
     </div>`;
@@ -1532,7 +1784,7 @@ let CrumbNavElement = class CrumbNavElement$1 extends i {
 	render() {
 		if (this.editing) return x`<input @keyup=${this.onInputKeyUp} @blur=${this.onInputBlur} value=${this.editPath} type="text">`;
 		else {
-			const segs = this.segments.map((s$3, index) => this.renderSegment(s$3, index));
+			const segs = this.segments.map((s$5, index) => this.renderSegment(s$5, index));
 			return x`${segs}`;
 		}
 	}
@@ -1617,10 +1869,10 @@ let CrumbNavElement = class CrumbNavElement$1 extends i {
   }
 `;
 };
-__decorate([property({ type: Object })], CrumbNavElement.prototype, "segments", void 0);
-__decorate([property({ type: Boolean })], CrumbNavElement.prototype, "editing", void 0);
-__decorate([property({ type: String })], CrumbNavElement.prototype, "editPath", void 0);
-CrumbNavElement = __decorate([customElement("ixfx-crumb-nav")], CrumbNavElement);
+__decorate([n({ type: Object })], CrumbNavElement.prototype, "segments", void 0);
+__decorate([n({ type: Boolean })], CrumbNavElement.prototype, "editing", void 0);
+__decorate([n({ type: String })], CrumbNavElement.prototype, "editPath", void 0);
+CrumbNavElement = __decorate([t("ixfx-crumb-nav")], CrumbNavElement);
 
 //#endregion
 //#region src/tabs/tab-list-item.ts
@@ -1657,8 +1909,8 @@ let TabListItemElement = class TabListItemElement$1 extends i {
     }
   `;
 };
-__decorate([property({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
-TabListItemElement = __decorate([customElement("ixfx-tab-list-item")], TabListItemElement);
+__decorate([n({ type: Boolean })], TabListItemElement.prototype, "closeable", void 0);
+TabListItemElement = __decorate([t("ixfx-tab-list-item")], TabListItemElement);
 
 //#endregion
 //#region src/tabs/tab-list.ts
@@ -1691,8 +1943,8 @@ let TabListElement = class TabListElement$1 extends i {
 		for (const el of this._listItems) if (this.#isSelected(el)) return el;
 	}
 	#isSelected(el) {
-		const v$1 = el.getAttribute(`selected`);
-		if (v$1 === null) return false;
+		const v$2 = el.getAttribute(`selected`);
+		if (v$2 === null) return false;
 		return el.hasAttribute(`selected`);
 	}
 	selectElement(el) {
@@ -1715,13 +1967,13 @@ let TabListElement = class TabListElement$1 extends i {
 	}
 	#onSlotClick = (event) => {
 		this.focus();
-		const t$2 = event.target;
+		const t$5 = event.target;
 		const previous = this.getSelectedElement();
-		this.selectElement(t$2);
-		const forId = t$2.getAttribute(`for`);
+		this.selectElement(t$5);
+		const forId = t$5.getAttribute(`for`);
 		this.dispatchEvent(new CustomEvent(`change`, { detail: {
 			previous,
-			selected: t$2.id,
+			selected: t$5.id,
 			for: forId ?? ``
 		} }));
 	};
@@ -1749,9 +2001,9 @@ let TabListElement = class TabListElement$1 extends i {
     }
   `;
 };
-__decorate([property({ type: Boolean })], TabListElement.prototype, "horizontal", void 0);
-__decorate([queryAssignedElements()], TabListElement.prototype, "_listItems", void 0);
-TabListElement = __decorate([customElement("ixfx-tab-list")], TabListElement);
+__decorate([n({ type: Boolean })], TabListElement.prototype, "horizontal", void 0);
+__decorate([o()], TabListElement.prototype, "_listItems", void 0);
+TabListElement = __decorate([t("ixfx-tab-list")], TabListElement);
 
 //#endregion
 //#region src/tabs/tab-panel.ts
@@ -1772,7 +2024,7 @@ let TabPanelElement = class TabPanelElement$1 extends i {
   }
   `;
 };
-TabPanelElement = __decorate([customElement("ixfx-tab-panel")], TabPanelElement);
+TabPanelElement = __decorate([t("ixfx-tab-panel")], TabPanelElement);
 
 //#endregion
 //#region src/tabs/tab-panels.ts
@@ -1809,9 +2061,9 @@ let TabPanelsElement = class TabPanelsElement$1 extends i {
 		if (this.onSelectedPanel) this.onSelectedPanel(el.id, el);
 	}
 	syncWithList(el) {
-		const t$2 = el.getSelectedElement();
-		if (!t$2) return;
-		const forEl = t$2.getAttribute(`for`);
+		const t$5 = el.getSelectedElement();
+		if (!t$5) return;
+		const forEl = t$5.getAttribute(`for`);
 		if (!forEl) return;
 		this.selectPanel(forEl);
 	}
@@ -1835,8 +2087,8 @@ let TabPanelsElement = class TabPanelsElement$1 extends i {
   
   `;
 };
-__decorate([queryAssignedElements()], TabPanelsElement.prototype, "_listItems", void 0);
-TabPanelsElement = __decorate([customElement("ixfx-tab-panels")], TabPanelsElement);
+__decorate([o()], TabPanelsElement.prototype, "_listItems", void 0);
+TabPanelsElement = __decorate([t("ixfx-tab-panels")], TabPanelsElement);
 
 //#endregion
 //#region src/split-layout/split-layout.ts
@@ -1966,12 +2218,12 @@ let SplitLayoutElement = class SplitLayoutElement$1 extends i {
 
   `;
 };
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "layout", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "sizeA", void 0);
-__decorate([property({ type: String })], SplitLayoutElement.prototype, "sizeB", void 0);
-__decorate([property({ type: Boolean })], SplitLayoutElement.prototype, "fixedA", void 0);
-__decorate([property({ type: Boolean })], SplitLayoutElement.prototype, "fixedB", void 0);
-SplitLayoutElement = __decorate([customElement("ixfx-split-layout")], SplitLayoutElement);
+__decorate([n({ type: String })], SplitLayoutElement.prototype, "layout", void 0);
+__decorate([n({ type: String })], SplitLayoutElement.prototype, "sizeA", void 0);
+__decorate([n({ type: String })], SplitLayoutElement.prototype, "sizeB", void 0);
+__decorate([n({ type: Boolean })], SplitLayoutElement.prototype, "fixedA", void 0);
+__decorate([n({ type: Boolean })], SplitLayoutElement.prototype, "fixedB", void 0);
+SplitLayoutElement = __decorate([t("ixfx-split-layout")], SplitLayoutElement);
 
 //#endregion
 //#region src/charts/plot.ts
@@ -1992,7 +2244,7 @@ let PlotElement = class PlotElement$1 extends i {
 	#drawing;
 	#legendColour = ``;
 	#hue = 0;
-	canvasEl = createRef();
+	canvasEl = e$1();
 	seriesRanges = /* @__PURE__ */ new Map();
 	get series() {
 		return [...this.#series.values()];
@@ -2013,8 +2265,8 @@ let PlotElement = class PlotElement$1 extends i {
 	static fromQuery(query) {
 		const el = document.querySelector(query);
 		if (!el) throw new Error(`Query does not match an element`);
-		if (el.nodeName === "PLOT-ELEMENT") return el;
-		throw new Error(`Elment is not a PlotElement ('${el.nodeName}')`);
+		if (el.nodeName === "IXFX-PLOT-ELEMENT") return el;
+		throw new Error(`Element is not a PlotElement ('${el.nodeName}')`);
 	}
 	/**
 	* Delete a series.
@@ -2024,8 +2276,8 @@ let PlotElement = class PlotElement$1 extends i {
 	*/
 	deleteSeries(name) {
 		name = name.toLowerCase();
-		const s$3 = this.#series.get(name);
-		if (!s$3) return false;
+		const s$5 = this.#series.get(name);
+		if (!s$5) return false;
 		this.#series.delete(name);
 		return true;
 	}
@@ -2036,8 +2288,8 @@ let PlotElement = class PlotElement$1 extends i {
 	*/
 	clearSeries(name) {
 		name = name.toLowerCase();
-		const s$3 = this.#series.get(name);
-		if (!s$3) return false;
+		const s$5 = this.#series.get(name);
+		if (!s$5) return false;
 		this.#series.clear();
 		return true;
 	}
@@ -2051,29 +2303,29 @@ let PlotElement = class PlotElement$1 extends i {
 	* Keeps all series, but deletes their data
 	*/
 	clearData() {
-		for (const s$3 of this.#series.values()) s$3.clear();
+		for (const s$5 of this.#series.values()) s$5.clear();
 	}
 	render() {
-		return x`<canvas ${ref(this.canvasEl)}></canvas>`;
+		return x`<canvas ${n$1(this.canvasEl)}></canvas>`;
 	}
 	#setupCanvas() {
 		if (this.#canvas !== void 0) return this.#canvas;
 		const canvas = this.canvasEl.value;
 		if (!canvas) throw new Error(`canvas element not found`);
-		const c$3 = new CanvasHelper(canvas);
-		this.#canvas = c$3;
-		this.#drawing = Drawing.makeHelper(c$3.ctx);
-		return c$3;
+		const c$6 = new CanvasHelper(canvas);
+		this.#canvas = c$6;
+		this.#drawing = Drawing.makeHelper(c$6.ctx);
+		return c$6;
 	}
 	connectedCallback() {
 		super.connectedCallback();
 	}
 	firstUpdated(_changedProperties) {
 		const ro = new ResizeObserver((event) => {
-			const c$3 = this.#setupCanvas();
-			if (!c$3) return;
+			const c$6 = this.#setupCanvas();
+			if (!c$6) return;
 			const entry = event[0];
-			c$3.setLogicalSize(entry.contentRect);
+			c$6.setLogicalSize(entry.contentRect);
 		});
 		ro.observe(this);
 		this.updateColours();
@@ -2083,45 +2335,45 @@ let PlotElement = class PlotElement$1 extends i {
 	}
 	plot(value, seriesName = ``, skipDrawing = false) {
 		if (typeof value !== "number") throw new Error(`Can only add numbers. Got: ${typeof value}`);
-		let s$3 = this.#series.get(seriesName.toLowerCase());
-		if (s$3 === void 0) {
-			s$3 = new PlotSeries(seriesName, this.colourGenerator(seriesName), this);
-			this.#series.set(seriesName.toLowerCase(), s$3);
+		let s$5 = this.#series.get(seriesName.toLowerCase());
+		if (s$5 === void 0) {
+			s$5 = new PlotSeries(seriesName, this.colourGenerator(seriesName), this);
+			this.#series.set(seriesName.toLowerCase(), s$5);
 		}
-		s$3.push(value);
+		s$5.push(value);
 		if (!this.manualDraw && !skipDrawing) this.draw();
-		return s$3;
+		return s$5;
 	}
 	/**
 	* Draw a set of key-value pairs as a batch.
 	* @param value 
 	*/
 	plotObject(value) {
-		for (const p$2 of Pathed.getPathsAndData(value, true)) this.plot(p$2.value, p$2.path, true);
+		for (const p$3 of Pathed.getPathsAndData(value, true)) this.plot(p$3.value, p$3.path, true);
 		this.draw();
 	}
 	colourGenerator(_series) {
-		const c$3 = Colour.HslSpace.scalar(this.#hue, .9, .4);
+		const c$6 = Colour.HslSpace.scalar(this.#hue, .9, .4);
 		this.#hue = Numbers.wrap(this.#hue + .1);
-		return c$3;
+		return c$6;
 	}
 	draw() {
 		if (this.paused) return;
-		const c$3 = this.#canvas;
-		const d$2 = this.#drawing;
+		const c$6 = this.#canvas;
+		const d$3 = this.#drawing;
 		const padding = this.padding;
-		if (!d$2 || !c$3) return;
-		c$3.clear();
-		const ctx = d$2.ctx;
-		const axisYwidth = this.computeAxisYWidth(c$3);
-		const remainingWidth = c$3.width - axisYwidth;
-		const clLegend = this.computeLegend(c$3, remainingWidth, padding);
-		const plotHeight = c$3.height - clLegend.bounds.height - padding;
+		if (!d$3 || !c$6) return;
+		c$6.clear();
+		const ctx = d$3.ctx;
+		const axisYwidth = this.computeAxisYWidth(c$6);
+		const remainingWidth = c$6.width - axisYwidth;
+		const clLegend = this.computeLegend(c$6, remainingWidth, padding);
+		const plotHeight = c$6.height - clLegend.bounds.height - padding;
 		const cy = {
 			width: axisYwidth,
 			height: plotHeight
 		};
-		const cp = this.computePlot(c$3, plotHeight, cy.width, padding);
+		const cp = this.computePlot(c$6, plotHeight, cy.width, padding);
 		const cl = {
 			...clLegend.bounds,
 			x: cy.width,
@@ -2132,7 +2384,7 @@ let PlotElement = class PlotElement$1 extends i {
 		if (!this.hideLegend) {
 			ctx.save();
 			ctx.translate(cl.x + padding, cl.y + padding);
-			this.drawLegend(cl, d$2);
+			this.drawLegend(cl, d$3);
 			ctx.restore();
 		}
 		ctx.save();
@@ -2143,82 +2395,82 @@ let PlotElement = class PlotElement$1 extends i {
 			const colour = Colour.toCssColour(series.colour);
 			switch (this.renderStyle) {
 				case `line`:
-					this.drawLineSeries(data, cp, d$2, colour);
+					this.drawLineSeries(data, cp, d$3, colour);
 					break;
-				default: this.drawDotSeries(data, cp, d$2, colour);
+				default: this.drawDotSeries(data, cp, d$3, colour);
 			}
 		}
 		ctx.restore();
 	}
-	drawLegend(cl, d$2) {
+	drawLegend(cl, d$3) {
 		const textColour = this.#legendColour;
 		const padding = this.padding;
 		let x$1 = 0;
 		let y$2 = padding;
 		const swatchSize = 10;
-		const ctx = d$2.ctx;
+		const ctx = d$3.ctx;
 		for (const series of this.#series.values()) {
 			ctx.fillStyle = Colour.toCssColour(series.colour);
 			ctx.fillRect(x$1, y$2, swatchSize, swatchSize);
 			ctx.fillStyle = textColour;
 			x$1 += swatchSize + padding;
-			const m$1 = ctx.measureText(series.name);
+			const m$2 = ctx.measureText(series.name);
 			ctx.textBaseline = `middle`;
 			ctx.fillText(series.name, x$1, y$2 + swatchSize / 2);
-			x$1 += m$1.width + padding;
+			x$1 += m$2.width + padding;
 			if (x$1 >= cl.width) {
 				y$2 += 10 + padding;
 				x$1 = 0;
 			}
 		}
 	}
-	drawLineSeries(data, cp, d$2, colour) {
+	drawLineSeries(data, cp, d$3, colour) {
 		const pointWidth = this.streaming ? this.dataWidth : cp.width / data.length;
 		let x$1 = 0;
 		if (this.streaming) x$1 = cp.width - pointWidth * data.length;
-		const pos = data.map((d$3) => {
+		const pos = data.map((d$4) => {
 			x$1 += pointWidth;
 			return {
 				x: x$1,
-				y: (1 - d$3) * cp.height,
+				y: (1 - d$4) * cp.height,
 				radius: pointWidth
 			};
 		});
-		const trimmed = pos.filter((p$2) => {
-			if (p$2.x < 0) return false;
+		const trimmed = pos.filter((p$3) => {
+			if (p$3.x < 0) return false;
 			return true;
 		});
-		d$2.connectedPoints(trimmed, {
+		d$3.connectedPoints(trimmed, {
 			strokeStyle: colour,
 			lineWidth: this.lineWidth
 		});
 	}
-	drawDotSeries(data, cp, d$2, colour) {
+	drawDotSeries(data, cp, d$3, colour) {
 		const pointWidth = this.streaming ? this.dataWidth : cp.width / data.length;
 		let x$1 = 0;
 		if (this.streaming) x$1 = cp.width - pointWidth * data.length;
-		const pos = data.map((d$3) => {
+		const pos = data.map((d$4) => {
 			x$1 += pointWidth;
 			return {
 				x: x$1,
-				y: (1 - d$3) * cp.height,
+				y: (1 - d$4) * cp.height,
 				radius: pointWidth
 			};
 		});
-		const trimmed = pos.filter((p$2) => {
-			if (p$2.x < 0) return false;
+		const trimmed = pos.filter((p$3) => {
+			if (p$3.x < 0) return false;
 			return true;
 		});
-		d$2.dot(trimmed, {
+		d$3.dot(trimmed, {
 			filled: true,
 			fillStyle: colour
 		});
 	}
-	computePlot(c$3, plotHeight, axisYwidth, padding) {
+	computePlot(c$6, plotHeight, axisYwidth, padding) {
 		return {
 			x: axisYwidth,
 			y: 0,
-			width: c$3.width - axisYwidth - padding,
+			width: c$6.width - axisYwidth - padding,
 			height: plotHeight - padding - padding
 		};
 	}
@@ -2226,7 +2478,7 @@ let PlotElement = class PlotElement$1 extends i {
 		return 0;
 	}
 	#swatchSize = 10;
-	computeLegend(c$3, maxWidth, padding) {
+	computeLegend(c$6, maxWidth, padding) {
 		if (this.hideLegend) return {
 			bounds: {
 				width: 0,
@@ -2234,14 +2486,14 @@ let PlotElement = class PlotElement$1 extends i {
 			},
 			parts: []
 		};
-		const ctx = c$3.ctx;
+		const ctx = c$6.ctx;
 		const series = [...this.#series.values()];
 		let largestH = 0;
-		const sizes = series.map((s$3) => {
+		const sizes = series.map((s$5) => {
 			let width = this.#swatchSize + padding;
-			const m$1 = ctx.measureText(s$3.name);
-			width += m$1.width;
-			const height = m$1.emHeightAscent + m$1.emHeightDescent;
+			const m$2 = ctx.measureText(s$5.name);
+			width += m$2.width;
+			const height = m$2.emHeightAscent + m$2.emHeightDescent;
 			largestH = Math.max(height, largestH);
 			return {
 				width,
@@ -2252,13 +2504,13 @@ let PlotElement = class PlotElement$1 extends i {
 		let x$1 = padding;
 		let y$2 = padding;
 		let usedWidthMax = 0;
-		for (const s$3 of sizes) {
+		for (const s$5 of sizes) {
 			parts.push({
 				x: x$1,
 				y: y$2,
-				...s$3
+				...s$5
 			});
-			x$1 += s$3.width;
+			x$1 += s$5.width;
 			usedWidthMax = Math.max(x$1, usedWidthMax);
 			if (x$1 >= maxWidth) {
 				x$1 = padding;
@@ -2285,43 +2537,43 @@ let PlotElement = class PlotElement$1 extends i {
   }
   `;
 };
-__decorate([property({
+__decorate([n({
 	attribute: `streaming`,
 	type: Boolean
 })], PlotElement.prototype, "streaming", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `hide-legend`,
 	type: Boolean
 })], PlotElement.prototype, "hideLegend", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `max-length`,
 	type: Number
 })], PlotElement.prototype, "maxLength", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `data-width`,
 	type: Number
 })], PlotElement.prototype, "dataWidth", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `fixed-max`,
 	type: Number
 })], PlotElement.prototype, "fixedMax", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `fixed-min`,
 	type: Number
 })], PlotElement.prototype, "fixedMin", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `line-width`,
 	type: Number
 })], PlotElement.prototype, "lineWidth", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `render`,
 	type: String
 })], PlotElement.prototype, "renderStyle", void 0);
-__decorate([property({
+__decorate([n({
 	attribute: `manual-draw`,
 	type: Boolean
 })], PlotElement.prototype, "manualDraw", void 0);
-PlotElement = __decorate([customElement(`ixfx-plot-element`)], PlotElement);
+PlotElement = __decorate([t(`ixfx-plot-element`)], PlotElement);
 var PlotSeries = class {
 	data = [];
 	minSeen = Number.MAX_SAFE_INTEGER;
@@ -2345,15 +2597,15 @@ var PlotSeries = class {
 		let max = this.maxSeen;
 		if (Number.isNaN(min)) min = 0;
 		if (Number.isNaN(max)) max = 1;
-		const s$3 = Numbers.scaler(min, max);
-		return this.getScaledBy(s$3);
+		const s$5 = Numbers.scaler(min, max);
+		return this.getScaledBy(s$5);
 	}
 	getScaledBy(scaler) {
-		return this.data.map((v$1) => {
-			if (typeof v$1 !== `number`) throw new Error(`Data should just be numbers. Got: ${typeof v$1}`);
-			if (Number.isNaN(v$1)) throw new Error(`data contains NaN`);
-			const scaled = scaler(v$1);
-			if (Number.isNaN(scaled)) throw new Error(`NaN. v: ${v$1} scaled: ${scaled}`);
+		return this.data.map((v$2) => {
+			if (typeof v$2 !== `number`) throw new Error(`Data should just be numbers. Got: ${typeof v$2}`);
+			if (Number.isNaN(v$2)) throw new Error(`data contains NaN`);
+			const scaled = scaler(v$2);
+			if (Number.isNaN(scaled)) throw new Error(`NaN. v: ${v$2} scaled: ${scaled}`);
 			return Numbers.clamp(scaled);
 		});
 	}
@@ -2458,9 +2710,9 @@ const getSorter = (sortStyle) => {
 };
 const sorterByValueIndex = (index, reverse = false) => {
 	return (values) => {
-		const s$3 = values.toSorted((a$2, b$2) => defaultComparer(a$2[index], b$2[index]));
-		if (reverse) return s$3.reverse();
-		return s$3;
+		const s$5 = values.toSorted((a$2, b$2) => defaultComparer(a$2[index], b$2[index]));
+		if (reverse) return s$5.reverse();
+		return s$5;
 	};
 };
 
@@ -2515,6 +2767,67 @@ var FrequencyHistogramPlot = class {
 	}
 };
 
+//#endregion
+//#region node_modules/lit-html/directives/repeat.js
+/**
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/
+const u = (e$7, s$5, t$5) => {
+	const r$6 = /* @__PURE__ */ new Map();
+	for (let l$3 = s$5; l$3 <= t$5; l$3++) r$6.set(e$7[l$3], l$3);
+	return r$6;
+}, c = e(class extends i$2 {
+	constructor(e$7) {
+		if (super(e$7), e$7.type !== t$1.CHILD) throw Error("repeat() can only be used in text expressions");
+	}
+	dt(e$7, s$5, t$5) {
+		let r$6;
+		void 0 === t$5 ? t$5 = s$5 : void 0 !== s$5 && (r$6 = s$5);
+		const l$3 = [], o$9 = [];
+		let i$6 = 0;
+		for (const s$6 of e$7) l$3[i$6] = r$6 ? r$6(s$6, i$6) : i$6, o$9[i$6] = t$5(s$6, i$6), i$6++;
+		return {
+			values: o$9,
+			keys: l$3
+		};
+	}
+	render(e$7, s$5, t$5) {
+		return this.dt(e$7, s$5, t$5).values;
+	}
+	update(s$5, [t$5, r$6, c$6]) {
+		const d$3 = p(s$5), { values: p$3, keys: a$2 } = this.dt(t$5, r$6, c$6);
+		if (!Array.isArray(d$3)) return this.ut = a$2, p$3;
+		const h$5 = this.ut ??= [], v$2 = [];
+		let m$2, y$2, x$1 = 0, j$1 = d$3.length - 1, k$1 = 0, w$1 = p$3.length - 1;
+		for (; x$1 <= j$1 && k$1 <= w$1;) if (null === d$3[x$1]) x$1++;
+		else if (null === d$3[j$1]) j$1--;
+		else if (h$5[x$1] === a$2[k$1]) v$2[k$1] = v(d$3[x$1], p$3[k$1]), x$1++, k$1++;
+		else if (h$5[j$1] === a$2[w$1]) v$2[w$1] = v(d$3[j$1], p$3[w$1]), j$1--, w$1--;
+		else if (h$5[x$1] === a$2[w$1]) v$2[w$1] = v(d$3[x$1], p$3[w$1]), s(s$5, v$2[w$1 + 1], d$3[x$1]), x$1++, w$1--;
+		else if (h$5[j$1] === a$2[k$1]) v$2[k$1] = v(d$3[j$1], p$3[k$1]), s(s$5, d$3[x$1], d$3[j$1]), j$1--, k$1++;
+		else if (void 0 === m$2 && (m$2 = u(a$2, k$1, w$1), y$2 = u(h$5, x$1, j$1)), m$2.has(h$5[x$1])) if (m$2.has(h$5[j$1])) {
+			const e$7 = y$2.get(a$2[k$1]), t$6 = void 0 !== e$7 ? d$3[e$7] : null;
+			if (null === t$6) {
+				const e$8 = s(s$5, d$3[x$1]);
+				v(e$8, p$3[k$1]), v$2[k$1] = e$8;
+			} else v$2[k$1] = v(t$6, p$3[k$1]), s(s$5, d$3[x$1], t$6), d$3[e$7] = null;
+			k$1++;
+		} else M(d$3[j$1]), j$1--;
+		else M(d$3[x$1]), x$1++;
+		for (; k$1 <= w$1;) {
+			const e$7 = s(s$5, v$2[w$1 + 1]);
+			v(e$7, p$3[k$1]), v$2[k$1++] = e$7;
+		}
+		for (; x$1 <= j$1;) {
+			const e$7 = d$3[x$1++];
+			null !== e$7 && M(e$7);
+		}
+		return this.ut = a$2, m(s$5, v$2), T;
+	}
+});
+
 //#endregion
 //#region src/charts/histogram-vis.ts
 const jsonData = (object) => {
@@ -2522,12 +2835,12 @@ const jsonData = (object) => {
 	try {
 		if (typeof object === `string`) {
 			if (object.length === 0) return;
-			const o$4 = JSON.parse(object);
-			if (!Array.isArray(o$4)) {
+			const o$9 = JSON.parse(object);
+			if (!Array.isArray(o$9)) {
 				console.error(`Histogram innerText should be JSON array`);
 				return;
 			}
-			for (const [index, element] of o$4.entries()) {
+			for (const [index, element] of o$9.entries()) {
 				if (!Array.isArray(element)) {
 					console.error(`Histogram array should consist of inner arrays`);
 					return;
@@ -2545,7 +2858,7 @@ const jsonData = (object) => {
 					return;
 				}
 			}
-			return o$4;
+			return o$9;
 		}
 	} catch (error) {
 		console.log(object);
@@ -2636,45 +2949,45 @@ let HistogramVis = class HistogramVis$1 extends i {
 	}
 	render() {
 		if ((this.data === void 0 || this.data.length === 0) && this.json === void 0) return x``;
-		const d$2 = this.data ?? this.json;
-		const length = d$2.length;
-		const highestCount = Math.max(...d$2.map((d$3) => d$3[1]));
-		const bars = d$2.map((kv) => ({
+		const d$3 = this.data ?? this.json;
+		const length = d$3.length;
+		const highestCount = Math.max(...d$3.map((d$4) => d$4[1]));
+		const bars = d$3.map((kv) => ({
 			data: kv,
 			percentage: kv[1] / highestCount
 		}));
 		const xAxis = x`
       <div
             class="xAxis"
-            style="grid-area: 2 / 1 / 3 / ${d$2.length + 1}"
+            style="grid-area: 2 / 1 / 3 / ${d$3.length + 1}"
           ></div>
     `;
 		const height = this.height ? `height: ${this.height};` : ``;
-		const h$2 = x`
+		const h$5 = x`
       <style>
              div.chart {
-               grid-template-columns: repeat(${d$2.length}, minmax(2px, 1fr));
+               grid-template-columns: repeat(${d$3.length}, minmax(2px, 1fr));
              }
            </style>
            <div class="container" style="${height}">
              <div class="chart">
-               ${repeat(bars, (bar) => bar.data[0], (b$2, index) => this.barTemplate(b$2, index, length))}
+               ${c(bars, (bar) => bar.data[0], (b$2, index) => this.barTemplate(b$2, index, length))}
                ${this.showXAxis ? xAxis : ``}
              </div>
            </div>
     `;
-		return h$2;
+		return h$5;
 	}
 };
-__decorate([property$1()], HistogramVis.prototype, "data", void 0);
-__decorate([property$1()], HistogramVis.prototype, "showDataLabels", void 0);
-__decorate([property$1()], HistogramVis.prototype, "height", void 0);
-__decorate([property$1()], HistogramVis.prototype, "showXAxis", void 0);
-__decorate([property$1({
+__decorate([n()], HistogramVis.prototype, "data", void 0);
+__decorate([n()], HistogramVis.prototype, "showDataLabels", void 0);
+__decorate([n()], HistogramVis.prototype, "height", void 0);
+__decorate([n()], HistogramVis.prototype, "showXAxis", void 0);
+__decorate([n({
 	converter: jsonData,
 	type: Object
 })], HistogramVis.prototype, "json", void 0);
-HistogramVis = __decorate([customElement$1(`histogram-vis`)], HistogramVis);
+HistogramVis = __decorate([t(`histogram-vis`)], HistogramVis);
 
 //#endregion
 //#region src/index.ts