@edugis-org/webmapx 0.1.15 → 0.2.0

package/dist-lib/{webmapx-draw-tool-6QRr5Gip.js → webmapx-draw-tool-utv2v3LN.js}

@@ -1,28 +1,24 @@
-import { a as e, i as t, n, r, t as i } from "./chunk.YHLNUJ7P-ByKy0MKm.js";
-import { t as a } from "./decorate-CKr8yG1g.js";
-import { a as o, i as s, o as c, s as l, t as u } from "./chunk.AJ3ENQ5C-DXVGX5Dn.js";
-import { t as d } from "./chunk.NYIIDP5N-B4UCI-rQ.js";
-import { t as f } from "./chunk.6CTB5ZDJ-DjZrBd6Y.js";
-import "./icon-CBNpO1lq.js";
-import "./chunk.36O46B5H-km1dakSW.js";
-import { i as p, n as ee, r as te, t as ne } from "./chunk.3RPBFEDE-Cxq6VVR6.js";
-import { t as re } from "./button-BlZd3WPH.js";
-import { n as ie, t as ae } from "./input-B212BH6L.js";
-import { t as oe } from "./chunk.SI4ACBFK-CLb9VfMG.js";
-import { t as m } from "./tooltip-CBGOiZwJ.js";
-import { n as se, t as ce } from "./icon-button-B5rXu3Gg.js";
-import { a as le, i as ue, t as de } from "./zip.js-DVhmtjxZ.js";
-import { t as fe } from "./chunk.5JY5FUCG-CYkzbQXS.js";
-import { t as pe } from "./webmapx-modal-tool-DQVHNXqX.js";
-import "./option-BQN9Zz_8.js";
-import { r as me } from "./map-layer-registry-2cmkiRDK.js";
-import { LitElement as he, css as h, html as g } from "lit";
-import { customElement as ge, eventOptions as _e, property as _, query as v, state as y } from "lit/decorators.js";
-import { classMap as b } from "lit/directives/class-map.js";
-import { ifDefined as x } from "lit/directives/if-defined.js";
-import { styleMap as S } from "lit/directives/style-map.js";
+import { a as e, i as t, o as n, s as r, t as i } from "./chunk.YHLNUJ7P-DINaI4pI.js";
+import { a, h as o, i as s, l as c, n as l, o as u, p as d, r as f, s as p } from "./decorators-d8E4nZJy.js";
+import { t as m } from "./decorate-DNmmPsJp.js";
+import { a as ee, i as h, o as te, s as ne, t as re } from "./chunk.AJ3ENQ5C-BhSO747I.js";
+import { a as g, c as ie, n as _, o as ae, s as oe, t as se } from "./chunk.NYIIDP5N-DoNij0Gf.js";
+import { t as v } from "./chunk.6CTB5ZDJ-DjZrBd6Y.js";
+import "./icon-DIjRqLFJ.js";
+import "./chunk.36O46B5H-EYkf8iaY.js";
+import { i as ce, n as le, r as ue, t as de } from "./chunk.3RPBFEDE-DC091CnT.js";
+import { t as fe } from "./button-B_8TR-jN.js";
+import { r as pe, t as me } from "./input-DUaeAHt8.js";
+import { t as he } from "./chunk.SI4ACBFK-CdJVQctt.js";
+import { t as y } from "./tooltip-C86FhPFx.js";
+import { t as ge } from "./chunk.5JY5FUCG-BmZ-LXEt.js";
+import { n as _e, t as ve } from "./icon-button-C5K3NZWf.js";
+import { a as ye, i as be, t as xe } from "./zip.js-DVhmtjxZ.js";
+import { t as Se } from "./webmapx-modal-tool-CftNio2w.js";
+import "./option-LnK7BxuV.js";
+import { r as Ce } from "./map-layer-registry-2cmkiRDK.js";
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.B63YXDJO.js
-var ve = h`
+var we = o`
   :host {
     display: block;
   }
@@ -54,7 +50,7 @@ var ve = h`
     white-space: nowrap;
     border: 0;
   }
-`, ye = h`
+`, Te = o`
   :host {
     display: inline-block;
   }
@@ -63,31 +59,31 @@ var ve = h`
     display: flex;
     flex-wrap: nowrap;
   }
-`, C = class extends n {
+`, b = class extends t {
 	constructor() {
 		super(...arguments), this.disableRole = !1, this.label = "";
 	}
 	handleFocus(e) {
-		w(e.target)?.toggleAttribute("data-sl-button-group__button--focus", !0);
+		x(e.target)?.toggleAttribute("data-sl-button-group__button--focus", !0);
 	}
 	handleBlur(e) {
-		w(e.target)?.toggleAttribute("data-sl-button-group__button--focus", !1);
+		x(e.target)?.toggleAttribute("data-sl-button-group__button--focus", !1);
 	}
 	handleMouseOver(e) {
-		w(e.target)?.toggleAttribute("data-sl-button-group__button--hover", !0);
+		x(e.target)?.toggleAttribute("data-sl-button-group__button--hover", !0);
 	}
 	handleMouseOut(e) {
-		w(e.target)?.toggleAttribute("data-sl-button-group__button--hover", !1);
+		x(e.target)?.toggleAttribute("data-sl-button-group__button--hover", !1);
 	}
 	handleSlotChange() {
 		let e = [...this.defaultSlot.assignedElements({ flatten: !0 })];
 		e.forEach((t) => {
-			let n = e.indexOf(t), r = w(t);
+			let n = e.indexOf(t), r = x(t);
 			r && (r.toggleAttribute("data-sl-button-group__button", !0), r.toggleAttribute("data-sl-button-group__button--first", n === 0), r.toggleAttribute("data-sl-button-group__button--inner", n > 0 && n < e.length - 1), r.toggleAttribute("data-sl-button-group__button--last", n === e.length - 1), r.toggleAttribute("data-sl-button-group__button--radio", r.tagName.toLowerCase() === "sl-radio-button"));
 		});
 	}
 	render() {
-		return g`
+		return d`
       <div
         part="base"
         class="button-group"
@@ -103,20 +99,20 @@ var ve = h`
     `;
 	}
 };
-C.styles = [r, ye], e([v("slot")], C.prototype, "defaultSlot", 2), e([y()], C.prototype, "disableRole", 2), e([_()], C.prototype, "label", 2);
-function w(e) {
+b.styles = [e, Te], r([l("slot")], b.prototype, "defaultSlot", 2), r([s()], b.prototype, "disableRole", 2), r([a()], b.prototype, "label", 2);
+function x(e) {
 	let t = "sl-button, sl-radio-button";
 	return e.closest(t) ?? e.querySelector(t);
 }
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.ZJNIZFRS.js
-var T = class extends n {
+var S = class extends t {
 	constructor() {
-		super(...arguments), this.formControlController = new ne(this), this.hasSlotController = new d(this, "help-text", "label"), this.customValidityMessage = "", this.hasButtonGroup = !1, this.errorMessage = "", this.defaultValue = "", this.label = "", this.helpText = "", this.name = "option", this.value = "", this.size = "medium", this.form = "", this.required = !1;
+		super(...arguments), this.formControlController = new de(this), this.hasSlotController = new se(this, "help-text", "label"), this.customValidityMessage = "", this.hasButtonGroup = !1, this.errorMessage = "", this.defaultValue = "", this.label = "", this.helpText = "", this.name = "option", this.value = "", this.size = "medium", this.form = "", this.required = !1;
 	}
 	get validity() {
 		let e = this.required && !this.value;
-		return this.customValidityMessage === "" ? e ? p : te : ee;
+		return this.customValidityMessage === "" ? e ? ce : ue : le;
 	}
 	get validationMessage() {
 		let e = this.required && !this.value;
@@ -202,13 +198,13 @@ var T = class extends n {
 		i && i.focus(e);
 	}
 	render() {
-		let e = this.hasSlotController.test("label"), t = this.hasSlotController.test("help-text"), n = this.label ? !0 : !!e, r = this.helpText ? !0 : !!t, i = g`
+		let e = this.hasSlotController.test("label"), t = this.hasSlotController.test("help-text"), n = this.label ? !0 : !!e, r = this.helpText ? !0 : !!t, i = d`
       <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
     `;
-		return g`
+		return d`
       <fieldset
         part="form-control"
-        class=${b({
+        class=${g({
 			"form-control": !0,
 			"form-control--small": this.size === "small",
 			"form-control--medium": this.size === "medium",
@@ -247,7 +243,7 @@ var T = class extends n {
             </label>
           </div>
 
-          ${this.hasButtonGroup ? g`
+          ${this.hasButtonGroup ? d`
                 <sl-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
                   ${i}
                 </sl-button-group>
@@ -268,17 +264,17 @@ var T = class extends n {
 };
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.2PCBEMQZ.js
-T.styles = [
-	r,
-	oe,
-	ve
-], T.dependencies = { "sl-button-group": C }, e([v("slot:not([name])")], T.prototype, "defaultSlot", 2), e([v(".radio-group__validation-input")], T.prototype, "validationInput", 2), e([y()], T.prototype, "hasButtonGroup", 2), e([y()], T.prototype, "errorMessage", 2), e([y()], T.prototype, "defaultValue", 2), e([_()], T.prototype, "label", 2), e([_({ attribute: "help-text" })], T.prototype, "helpText", 2), e([_()], T.prototype, "name", 2), e([_({ reflect: !0 })], T.prototype, "value", 2), e([_({ reflect: !0 })], T.prototype, "size", 2), e([_({ reflect: !0 })], T.prototype, "form", 2), e([_({
+S.styles = [
+	e,
+	he,
+	we
+], S.dependencies = { "sl-button-group": b }, r([l("slot:not([name])")], S.prototype, "defaultSlot", 2), r([l(".radio-group__validation-input")], S.prototype, "validationInput", 2), r([s()], S.prototype, "hasButtonGroup", 2), r([s()], S.prototype, "errorMessage", 2), r([s()], S.prototype, "defaultValue", 2), r([a()], S.prototype, "label", 2), r([a({ attribute: "help-text" })], S.prototype, "helpText", 2), r([a()], S.prototype, "name", 2), r([a({ reflect: !0 })], S.prototype, "value", 2), r([a({ reflect: !0 })], S.prototype, "size", 2), r([a({ reflect: !0 })], S.prototype, "form", 2), r([a({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "required", 2), e([t("size", { waitUntilFirstUpdate: !0 })], T.prototype, "handleSizeChange", 1), e([t("value")], T.prototype, "handleValueChange", 1), T.define("sl-radio-group");
+})], S.prototype, "required", 2), r([n("size", { waitUntilFirstUpdate: !0 })], S.prototype, "handleSizeChange", 1), r([n("value")], S.prototype, "handleValueChange", 1), S.define("sl-radio-group");
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.FKMWLPHV.js
-var be = h`
+var Ee = o`
   :host {
     display: block;
   }
@@ -390,7 +386,7 @@ var be = h`
     user-select: none;
     -webkit-user-select: none;
   }
-`, E = class extends n {
+`, C = class extends t {
 	constructor() {
 		super(), this.checked = !1, this.hasFocus = !1, this.size = "medium", this.disabled = !1, this.handleBlur = () => {
 			this.hasFocus = !1, this.emit("sl-blur");
@@ -413,10 +409,10 @@ var be = h`
 		this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
 	}
 	render() {
-		return g`
+		return d`
       <span
         part="base"
-        class=${b({
+        class=${g({
 			radio: !0,
 			"radio--checked": this.checked,
 			"radio--disabled": this.disabled,
@@ -427,7 +423,7 @@ var be = h`
 		})}
       >
         <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
-          ${this.checked ? g` <sl-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></sl-icon> ` : ""}
+          ${this.checked ? d` <sl-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></sl-icon> ` : ""}
         </span>
 
         <slot part="label" class="radio__label"></slot>
@@ -437,13 +433,13 @@ var be = h`
 };
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.MSKEYBDI.js
-E.styles = [r, be], E.dependencies = { "sl-icon": i }, e([y()], E.prototype, "checked", 2), e([y()], E.prototype, "hasFocus", 2), e([_()], E.prototype, "value", 2), e([_({ reflect: !0 })], E.prototype, "size", 2), e([_({
+C.styles = [e, Ee], C.dependencies = { "sl-icon": i }, r([s()], C.prototype, "checked", 2), r([s()], C.prototype, "hasFocus", 2), r([a()], C.prototype, "value", 2), r([a({ reflect: !0 })], C.prototype, "size", 2), r([a({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "disabled", 2), e([t("checked")], E.prototype, "handleCheckedChange", 1), e([t("disabled", { waitUntilFirstUpdate: !0 })], E.prototype, "handleDisabledChange", 1), E.define("sl-radio");
+})], C.prototype, "disabled", 2), r([n("checked")], C.prototype, "handleCheckedChange", 1), r([n("disabled", { waitUntilFirstUpdate: !0 })], C.prototype, "handleDisabledChange", 1), C.define("sl-radio");
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.YKKSQ2FG.js
-var xe = h`
+var De = o`
   :host(:not(:focus-within)) {
     position: absolute !important;
     width: 1px !important;
@@ -455,15 +451,15 @@ var xe = h`
     white-space: nowrap !important;
     padding: 0 !important;
   }
-`, Se = class extends n {
+`, w = class extends t {
 	render() {
-		return g` <slot></slot> `;
+		return d` <slot></slot> `;
 	}
 };
-Se.styles = [r, xe];
+w.styles = [e, De];
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.ESELY2US.js
-function D(e, t) {
+function T(e, t) {
 	function n(n) {
 		let r = e.getBoundingClientRect(), i = e.ownerDocument.defaultView, a = r.left + i.scrollX, o = r.top + i.scrollY, s = n.pageX - a, c = n.pageY - o;
 		t?.onMove && t.onMove(s, c);
@@ -475,7 +471,7 @@ function D(e, t) {
 }
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.LXP7GVU3.js
-var Ce = h`
+var Oe = o`
   :host {
     display: inline-block;
   }
@@ -523,9 +519,9 @@ var Ce = h`
     max-width: var(--auto-size-available-width) !important;
     max-height: var(--auto-size-available-height) !important;
   }
-`, O = class extends n {
+`, E = class extends t {
 	constructor() {
-		super(...arguments), this.localize = new f(this), this.open = !1, this.placement = "bottom-start", this.disabled = !1, this.stayOpenOnSelect = !1, this.distance = 0, this.skidding = 0, this.hoist = !1, this.sync = void 0, this.handleKeyDown = (e) => {
+		super(...arguments), this.localize = new v(this), this.open = !1, this.placement = "bottom-start", this.disabled = !1, this.stayOpenOnSelect = !1, this.distance = 0, this.skidding = 0, this.hoist = !1, this.sync = void 0, this.handleKeyDown = (e) => {
 			this.open && e.key === "Escape" && (e.stopPropagation(), this.hide(), this.focusOnTrigger());
 		}, this.handleDocumentKeyDown = (e) => {
 			if (e.key === "Escape" && this.open && !this.closeWatcher) {
@@ -545,7 +541,7 @@ var Ce = h`
 					return i instanceof ShadowRoot ? t(i.host, n) : null;
 				};
 				setTimeout(() => {
-					let e = this.containingElement?.getRootNode() instanceof ShadowRoot ? ce() : document.activeElement;
+					let e = this.containingElement?.getRootNode() instanceof ShadowRoot ? ve() : document.activeElement;
 					(!this.containingElement || t(e, this.containingElement.tagName.toLowerCase()) !== this.containingElement) && this.hide();
 				});
 			}
@@ -601,7 +597,7 @@ var Ce = h`
 		this.updateAccessibleTrigger();
 	}
 	updateAccessibleTrigger() {
-		let e = this.trigger.assignedElements({ flatten: !0 }).find((e) => se(e).start), t;
+		let e = this.trigger.assignedElements({ flatten: !0 }).find((e) => _e(e).start), t;
 		if (e) {
 			switch (e.tagName.toLowerCase()) {
 				case "sl-button":
@@ -614,10 +610,10 @@ var Ce = h`
 		}
 	}
 	async show() {
-		if (!this.open) return this.open = !0, o(this, "sl-after-show");
+		if (!this.open) return this.open = !0, ee(this, "sl-after-show");
 	}
 	async hide() {
-		if (this.open) return this.open = !1, o(this, "sl-after-hide");
+		if (this.open) return this.open = !1, ee(this, "sl-after-hide");
 	}
 	reposition() {
 		this.popup.reposition();
@@ -638,17 +634,17 @@ var Ce = h`
 			return;
 		}
 		if (this.updateAccessibleTrigger(), this.open) {
-			this.emit("sl-show"), this.addOpenListeners(), await s(this), this.panel.hidden = !1, this.popup.active = !0;
-			let { keyframes: e, options: t } = c(this, "dropdown.show", { dir: this.localize.dir() });
-			await u(this.popup.popup, e, t), this.emit("sl-after-show");
+			this.emit("sl-show"), this.addOpenListeners(), await h(this), this.panel.hidden = !1, this.popup.active = !0;
+			let { keyframes: e, options: t } = te(this, "dropdown.show", { dir: this.localize.dir() });
+			await re(this.popup.popup, e, t), this.emit("sl-after-show");
 		} else {
-			this.emit("sl-hide"), this.removeOpenListeners(), await s(this);
-			let { keyframes: e, options: t } = c(this, "dropdown.hide", { dir: this.localize.dir() });
-			await u(this.popup.popup, e, t), this.panel.hidden = !0, this.popup.active = !1, this.emit("sl-after-hide");
+			this.emit("sl-hide"), this.removeOpenListeners(), await h(this);
+			let { keyframes: e, options: t } = te(this, "dropdown.hide", { dir: this.localize.dir() });
+			await re(this.popup.popup, e, t), this.panel.hidden = !0, this.popup.active = !1, this.emit("sl-after-hide");
 		}
 	}
 	render() {
-		return g`
+		return d`
       <sl-popup
         part="base"
         exportparts="popup:base__popup"
@@ -661,8 +657,8 @@ var Ce = h`
         shift
         auto-size="vertical"
         auto-size-padding="10"
-        sync=${x(this.sync ? this.sync : void 0)}
-        class=${b({
+        sync=${_(this.sync ? this.sync : void 0)}
+        class=${g({
 			dropdown: !0,
 			"dropdown--open": this.open
 		})}
@@ -685,17 +681,17 @@ var Ce = h`
     `;
 	}
 };
-O.styles = [r, Ce], O.dependencies = { "sl-popup": fe }, e([v(".dropdown")], O.prototype, "popup", 2), e([v(".dropdown__trigger")], O.prototype, "trigger", 2), e([v(".dropdown__panel")], O.prototype, "panel", 2), e([_({
+E.styles = [e, Oe], E.dependencies = { "sl-popup": ge }, r([l(".dropdown")], E.prototype, "popup", 2), r([l(".dropdown__trigger")], E.prototype, "trigger", 2), r([l(".dropdown__panel")], E.prototype, "panel", 2), r([a({
 	type: Boolean,
 	reflect: !0
-})], O.prototype, "open", 2), e([_({ reflect: !0 })], O.prototype, "placement", 2), e([_({
+})], E.prototype, "open", 2), r([a({ reflect: !0 })], E.prototype, "placement", 2), r([a({
 	type: Boolean,
 	reflect: !0
-})], O.prototype, "disabled", 2), e([_({
+})], E.prototype, "disabled", 2), r([a({
 	attribute: "stay-open-on-select",
 	type: Boolean,
 	reflect: !0
-})], O.prototype, "stayOpenOnSelect", 2), e([_({ attribute: !1 })], O.prototype, "containingElement", 2), e([_({ type: Number })], O.prototype, "distance", 2), e([_({ type: Number })], O.prototype, "skidding", 2), e([_({ type: Boolean })], O.prototype, "hoist", 2), e([_({ reflect: !0 })], O.prototype, "sync", 2), e([t("open", { waitUntilFirstUpdate: !0 })], O.prototype, "handleOpenChange", 1), l("dropdown.show", {
+})], E.prototype, "stayOpenOnSelect", 2), r([a({ attribute: !1 })], E.prototype, "containingElement", 2), r([a({ type: Number })], E.prototype, "distance", 2), r([a({ type: Number })], E.prototype, "skidding", 2), r([a({ type: Boolean })], E.prototype, "hoist", 2), r([a({ reflect: !0 })], E.prototype, "sync", 2), r([n("open", { waitUntilFirstUpdate: !0 })], E.prototype, "handleOpenChange", 1), ne("dropdown.show", {
 	keyframes: [{
 		opacity: 0,
 		scale: .9
@@ -707,7 +703,7 @@ O.styles = [r, Ce], O.dependencies = { "sl-popup": fe }, e([v(".dropdown")], O.p
 		duration: 100,
 		easing: "ease"
 	}
-}), l("dropdown.hide", {
+}), ne("dropdown.hide", {
 	keyframes: [{
 		opacity: 1,
 		scale: 1
@@ -722,7 +718,7 @@ O.styles = [r, Ce], O.dependencies = { "sl-popup": fe }, e([v(".dropdown")], O.p
 });
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.O6CEROC7.js
-var we = h`
+var ke = o`
   :host {
     --grid-width: 280px;
     --grid-height: 200px;
@@ -1057,43 +1053,67 @@ var we = h`
     opacity: 0.5;
     cursor: not-allowed;
   }
-`;
+`, Ae = "important", je = " !important", D = ae(class extends oe {
+	constructor(e) {
+		if (super(e), e.type !== ie.ATTRIBUTE || e.name !== "style" || e.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
+	}
+	render(e) {
+		return Object.keys(e).reduce(((t, n) => {
+			let r = e[n];
+			return r == null ? t : t + `${n = n.includes("-") ? n : n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
+		}), "");
+	}
+	update(e, [t]) {
+		let { style: n } = e.element;
+		if (this.ft === void 0) return this.ft = new Set(Object.keys(t)), this.render(t);
+		for (let e of this.ft) t[e] ?? (this.ft.delete(e), e.includes("-") ? n.removeProperty(e) : n[e] = null);
+		for (let e in t) {
+			let r = t[e];
+			if (r != null) {
+				this.ft.add(e);
+				let t = typeof r == "string" && r.endsWith(je);
+				e.includes("-") || t ? n.setProperty(e, t ? r.slice(0, -11) : r, t ? Ae : "") : n[e] = r;
+			}
+		}
+		return c;
+	}
+});
 //#endregion
 //#region node_modules/@ctrl/tinycolor/dist/module/util.js
-function k(e, t) {
-	Te(e) && (e = "100%");
-	let n = Ee(e);
+function O(e, t) {
+	Me(e) && (e = "100%");
+	let n = Ne(e);
 	return e = t === 360 ? e : Math.min(t, Math.max(0, parseFloat(e))), n && (e = parseInt(String(e * t), 10) / 100), Math.abs(e - t) < 1e-6 ? 1 : (e = t === 360 ? (e < 0 ? e % t + t : e % t) / parseFloat(String(t)) : e % t / parseFloat(String(t)), e);
 }
-function A(e) {
+function k(e) {
 	return Math.min(1, Math.max(0, e));
 }
-function Te(e) {
+function Me(e) {
 	return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
 }
-function Ee(e) {
+function Ne(e) {
 	return typeof e == "string" && e.indexOf("%") !== -1;
 }
-function De(e) {
+function Pe(e) {
 	return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
-function j(e) {
+function A(e) {
 	return Number(e) <= 1 ? `${Number(e) * 100}%` : e;
 }
-function M(e) {
+function j(e) {
 	return e.length === 1 ? "0" + e : String(e);
 }
 //#endregion
 //#region node_modules/@ctrl/tinycolor/dist/module/conversion.js
-function Oe(e, t, n) {
+function Fe(e, t, n) {
 	return {
-		r: k(e, 255) * 255,
-		g: k(t, 255) * 255,
-		b: k(n, 255) * 255
+		r: O(e, 255) * 255,
+		g: O(t, 255) * 255,
+		b: O(n, 255) * 255
 	};
 }
-function ke(e, t, n) {
-	e = k(e, 255), t = k(t, 255), n = k(n, 255);
+function Ie(e, t, n) {
+	e = O(e, 255), t = O(t, 255), n = O(n, 255);
 	let r = Math.max(e, t, n), i = Math.min(e, t, n), a = 0, o = 0, s = (r + i) / 2;
 	if (r === i) o = 0, a = 0;
 	else {
@@ -1118,15 +1138,15 @@ function ke(e, t, n) {
 		l: s
 	};
 }
-function N(e, t, n) {
+function M(e, t, n) {
 	return n < 0 && (n += 1), n > 1 && --n, n < 1 / 6 ? e + (t - e) * (6 * n) : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e;
 }
-function Ae(e, t, n) {
+function Le(e, t, n) {
 	let r, i, a;
-	if (e = k(e, 360), t = k(t, 100), n = k(n, 100), t === 0) i = n, a = n, r = n;
+	if (e = O(e, 360), t = O(t, 100), n = O(n, 100), t === 0) i = n, a = n, r = n;
 	else {
 		let o = n < .5 ? n * (1 + t) : n + t - n * t, s = 2 * n - o;
-		r = N(s, o, e + 1 / 3), i = N(s, o, e), a = N(s, o, e - 1 / 3);
+		r = M(s, o, e + 1 / 3), i = M(s, o, e), a = M(s, o, e - 1 / 3);
 	}
 	return {
 		r: r * 255,
@@ -1134,8 +1154,8 @@ function Ae(e, t, n) {
 		b: a * 255
 	};
 }
-function je(e, t, n) {
-	e = k(e, 255), t = k(t, 255), n = k(n, 255);
+function Re(e, t, n) {
+	e = O(e, 255), t = O(t, 255), n = O(n, 255);
 	let r = Math.max(e, t, n), i = Math.min(e, t, n), a = 0, o = r, s = r - i, c = r === 0 ? 0 : s / r;
 	if (r === i) a = 0;
 	else {
@@ -1159,8 +1179,8 @@ function je(e, t, n) {
 		v: o
 	};
 }
-function Me(e, t, n) {
-	e = k(e, 360) * 6, t = k(t, 100), n = k(n, 100);
+function ze(e, t, n) {
+	e = O(e, 360) * 6, t = O(t, 100), n = O(n, 100);
 	let r = Math.floor(e), i = e - r, a = n * (1 - t), o = n * (1 - i * t), s = n * (1 - (1 - i) * t), c = r % 6, l = [
 		n,
 		o,
@@ -1189,24 +1209,24 @@ function Me(e, t, n) {
 		b: d * 255
 	};
 }
-function Ne(e, t, n, r) {
+function Be(e, t, n, r) {
 	let i = [
-		M(Math.round(e).toString(16)),
-		M(Math.round(t).toString(16)),
-		M(Math.round(n).toString(16))
+		j(Math.round(e).toString(16)),
+		j(Math.round(t).toString(16)),
+		j(Math.round(n).toString(16))
 	];
 	return r && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) : i.join("");
 }
-function Pe(e, t, n, r, i) {
+function Ve(e, t, n, r, i) {
 	let a = [
-		M(Math.round(e).toString(16)),
-		M(Math.round(t).toString(16)),
-		M(Math.round(n).toString(16)),
-		M(Le(r))
+		j(Math.round(e).toString(16)),
+		j(Math.round(t).toString(16)),
+		j(Math.round(n).toString(16)),
+		j(We(r))
 	];
 	return i && a[0].startsWith(a[0].charAt(1)) && a[1].startsWith(a[1].charAt(1)) && a[2].startsWith(a[2].charAt(1)) && a[3].startsWith(a[3].charAt(1)) ? a[0].charAt(0) + a[1].charAt(0) + a[2].charAt(0) + a[3].charAt(0) : a.join("");
 }
-function Fe(e, t, n, r) {
+function He(e, t, n, r) {
 	let i = e / 100, a = t / 100, o = n / 100, s = r / 100;
 	return {
 		r: 255 * (1 - i) * (1 - s),
@@ -1214,7 +1234,7 @@ function Fe(e, t, n, r) {
 		b: 255 * (1 - o) * (1 - s)
 	};
 }
-function Ie(e, t, n) {
+function Ue(e, t, n) {
 	let r = 1 - e / 255, i = 1 - t / 255, a = 1 - n / 255, o = Math.min(r, i, a);
 	return o === 1 ? (r = 0, i = 0, a = 0) : (r = (r - o) / (1 - o) * 100, i = (i - o) / (1 - o) * 100, a = (a - o) / (1 - o) * 100), o *= 100, {
 		c: Math.round(r),
@@ -1223,16 +1243,16 @@ function Ie(e, t, n) {
 		k: Math.round(o)
 	};
 }
-function Le(e) {
+function We(e) {
 	return Math.round(parseFloat(e) * 255).toString(16);
 }
-function Re(e) {
-	return P(e) / 255;
+function Ge(e) {
+	return N(e) / 255;
 }
-function P(e) {
+function N(e) {
 	return parseInt(e, 16);
 }
-function ze(e) {
+function Ke(e) {
 	return {
 		r: e >> 16,
 		g: (e & 65280) >> 8,
@@ -1241,7 +1261,7 @@ function ze(e) {
 }
 //#endregion
 //#region node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
-var F = {
+var P = {
 	aliceblue: "#f0f8ff",
 	antiquewhite: "#faebd7",
 	aqua: "#00ffff",
@@ -1393,13 +1413,13 @@ var F = {
 };
 //#endregion
 //#region node_modules/@ctrl/tinycolor/dist/module/format-input.js
-function Be(e) {
+function qe(e) {
 	let t = {
 		r: 0,
 		g: 0,
 		b: 0
 	}, n = 1, r = null, i = null, a = null, o = !1, s = !1;
-	return typeof e == "string" && (e = Ve(e)), typeof e == "object" && (L(e.r) && L(e.g) && L(e.b) ? (t = Oe(e.r, e.g, e.b), o = !0, s = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : L(e.h) && L(e.s) && L(e.v) ? (r = j(e.s), i = j(e.v), t = Me(e.h, r, i), o = !0, s = "hsv") : L(e.h) && L(e.s) && L(e.l) ? (r = j(e.s), a = j(e.l), t = Ae(e.h, r, a), o = !0, s = "hsl") : L(e.c) && L(e.m) && L(e.y) && L(e.k) && (t = Fe(e.c, e.m, e.y, e.k), o = !0, s = "cmyk"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = De(n), {
+	return typeof e == "string" && (e = Je(e)), typeof e == "object" && (I(e.r) && I(e.g) && I(e.b) ? (t = Fe(e.r, e.g, e.b), o = !0, s = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : I(e.h) && I(e.s) && I(e.v) ? (r = A(e.s), i = A(e.v), t = ze(e.h, r, i), o = !0, s = "hsv") : I(e.h) && I(e.s) && I(e.l) ? (r = A(e.s), a = A(e.l), t = Le(e.h, r, a), o = !0, s = "hsl") : I(e.c) && I(e.m) && I(e.y) && I(e.k) && (t = He(e.c, e.m, e.y, e.k), o = !0, s = "cmyk"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = Pe(n), {
 		ok: o,
 		format: e.format || s,
 		r: Math.min(255, Math.max(t.r, 0)),
@@ -1408,7 +1428,7 @@ function Be(e) {
 		a: n
 	};
 }
-var I = {
+var F = {
 	CSS_UNIT: /* @__PURE__ */ RegExp("(?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?)"),
 	rgb: /* @__PURE__ */ RegExp("rgb[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),
 	rgba: /* @__PURE__ */ RegExp("rgba[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),
@@ -1422,10 +1442,10 @@ var I = {
 	hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
 	hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
 };
-function Ve(e) {
+function Je(e) {
 	if (e = e.trim().toLowerCase(), e.length === 0) return !1;
 	let t = !1;
-	if (F[e]) e = F[e], t = !0;
+	if (P[e]) e = P[e], t = !0;
 	else if (e === "transparent") return {
 		r: 0,
 		g: 0,
@@ -1433,73 +1453,73 @@ function Ve(e) {
 		a: 0,
 		format: "name"
 	};
-	let n = I.rgb.exec(e);
+	let n = F.rgb.exec(e);
 	return n ? {
 		r: n[1],
 		g: n[2],
 		b: n[3]
-	} : (n = I.rgba.exec(e), n ? {
+	} : (n = F.rgba.exec(e), n ? {
 		r: n[1],
 		g: n[2],
 		b: n[3],
 		a: n[4]
-	} : (n = I.hsl.exec(e), n ? {
+	} : (n = F.hsl.exec(e), n ? {
 		h: n[1],
 		s: n[2],
 		l: n[3]
-	} : (n = I.hsla.exec(e), n ? {
+	} : (n = F.hsla.exec(e), n ? {
 		h: n[1],
 		s: n[2],
 		l: n[3],
 		a: n[4]
-	} : (n = I.hsv.exec(e), n ? {
+	} : (n = F.hsv.exec(e), n ? {
 		h: n[1],
 		s: n[2],
 		v: n[3]
-	} : (n = I.hsva.exec(e), n ? {
+	} : (n = F.hsva.exec(e), n ? {
 		h: n[1],
 		s: n[2],
 		v: n[3],
 		a: n[4]
-	} : (n = I.cmyk.exec(e), n ? {
+	} : (n = F.cmyk.exec(e), n ? {
 		c: n[1],
 		m: n[2],
 		y: n[3],
 		k: n[4]
-	} : (n = I.hex8.exec(e), n ? {
-		r: P(n[1]),
-		g: P(n[2]),
-		b: P(n[3]),
-		a: Re(n[4]),
+	} : (n = F.hex8.exec(e), n ? {
+		r: N(n[1]),
+		g: N(n[2]),
+		b: N(n[3]),
+		a: Ge(n[4]),
 		format: t ? "name" : "hex8"
-	} : (n = I.hex6.exec(e), n ? {
-		r: P(n[1]),
-		g: P(n[2]),
-		b: P(n[3]),
+	} : (n = F.hex6.exec(e), n ? {
+		r: N(n[1]),
+		g: N(n[2]),
+		b: N(n[3]),
 		format: t ? "name" : "hex"
-	} : (n = I.hex4.exec(e), n ? {
-		r: P(n[1] + n[1]),
-		g: P(n[2] + n[2]),
-		b: P(n[3] + n[3]),
-		a: Re(n[4] + n[4]),
+	} : (n = F.hex4.exec(e), n ? {
+		r: N(n[1] + n[1]),
+		g: N(n[2] + n[2]),
+		b: N(n[3] + n[3]),
+		a: Ge(n[4] + n[4]),
 		format: t ? "name" : "hex8"
-	} : (n = I.hex3.exec(e), n ? {
-		r: P(n[1] + n[1]),
-		g: P(n[2] + n[2]),
-		b: P(n[3] + n[3]),
+	} : (n = F.hex3.exec(e), n ? {
+		r: N(n[1] + n[1]),
+		g: N(n[2] + n[2]),
+		b: N(n[3] + n[3]),
 		format: t ? "name" : "hex"
 	} : !1))))))))));
 }
-function L(e) {
-	return typeof e == "number" ? !Number.isNaN(e) : I.CSS_UNIT.test(e);
+function I(e) {
+	return typeof e == "number" ? !Number.isNaN(e) : F.CSS_UNIT.test(e);
 }
 //#endregion
 //#region node_modules/@ctrl/tinycolor/dist/module/index.js
-var He = class e {
+var Ye = class e {
 	constructor(t = "", n = {}) {
 		if (t instanceof e) return t;
-		typeof t == "number" && (t = ze(t)), this.originalInput = t;
-		let r = Be(t);
+		typeof t == "number" && (t = Ke(t)), this.originalInput = t;
+		let r = qe(t);
 		this.originalInput = t, this.r = r.r, this.g = r.g, this.b = r.b, this.a = r.a, this.roundA = Math.round(100 * this.a) / 100, this.format = n.format ?? r.format, this.gradientType = n.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = r.ok;
 	}
 	isDark() {
@@ -1520,14 +1540,14 @@ var He = class e {
 		return this.a;
 	}
 	setAlpha(e) {
-		return this.a = De(e), this.roundA = Math.round(100 * this.a) / 100, this;
+		return this.a = Pe(e), this.roundA = Math.round(100 * this.a) / 100, this;
 	}
 	isMonochrome() {
 		let { s: e } = this.toHsl();
 		return e === 0;
 	}
 	toHsv() {
-		let e = je(this.r, this.g, this.b);
+		let e = Re(this.r, this.g, this.b);
 		return {
 			h: e.h * 360,
 			s: e.s,
@@ -1536,11 +1556,11 @@ var He = class e {
 		};
 	}
 	toHsvString() {
-		let e = je(this.r, this.g, this.b), t = Math.round(e.h * 360), n = Math.round(e.s * 100), r = Math.round(e.v * 100);
+		let e = Re(this.r, this.g, this.b), t = Math.round(e.h * 360), n = Math.round(e.s * 100), r = Math.round(e.v * 100);
 		return this.a === 1 ? `hsv(${t}, ${n}%, ${r}%)` : `hsva(${t}, ${n}%, ${r}%, ${this.roundA})`;
 	}
 	toHsl() {
-		let e = ke(this.r, this.g, this.b);
+		let e = Ie(this.r, this.g, this.b);
 		return {
 			h: e.h * 360,
 			s: e.s,
@@ -1549,17 +1569,17 @@ var He = class e {
 		};
 	}
 	toHslString() {
-		let e = ke(this.r, this.g, this.b), t = Math.round(e.h * 360), n = Math.round(e.s * 100), r = Math.round(e.l * 100);
+		let e = Ie(this.r, this.g, this.b), t = Math.round(e.h * 360), n = Math.round(e.s * 100), r = Math.round(e.l * 100);
 		return this.a === 1 ? `hsl(${t}, ${n}%, ${r}%)` : `hsla(${t}, ${n}%, ${r}%, ${this.roundA})`;
 	}
 	toHex(e = !1) {
-		return Ne(this.r, this.g, this.b, e);
+		return Be(this.r, this.g, this.b, e);
 	}
 	toHexString(e = !1) {
 		return "#" + this.toHex(e);
 	}
 	toHex8(e = !1) {
-		return Pe(this.r, this.g, this.b, this.a, e);
+		return Ve(this.r, this.g, this.b, this.a, e);
 	}
 	toHex8String(e = !1) {
 		return "#" + this.toHex8(e);
@@ -1580,7 +1600,7 @@ var He = class e {
 		return this.a === 1 ? `rgb(${e}, ${t}, ${n})` : `rgba(${e}, ${t}, ${n}, ${this.roundA})`;
 	}
 	toPercentageRgb() {
-		let e = (e) => `${Math.round(k(e, 255) * 100)}%`;
+		let e = (e) => `${Math.round(O(e, 255) * 100)}%`;
 		return {
 			r: e(this.r),
 			g: e(this.g),
@@ -1589,21 +1609,21 @@ var He = class e {
 		};
 	}
 	toPercentageRgbString() {
-		let e = (e) => Math.round(k(e, 255) * 100);
+		let e = (e) => Math.round(O(e, 255) * 100);
 		return this.a === 1 ? `rgb(${e(this.r)}%, ${e(this.g)}%, ${e(this.b)}%)` : `rgba(${e(this.r)}%, ${e(this.g)}%, ${e(this.b)}%, ${this.roundA})`;
 	}
 	toCmyk() {
-		return { ...Ie(this.r, this.g, this.b) };
+		return { ...Ue(this.r, this.g, this.b) };
 	}
 	toCmykString() {
-		let { c: e, m: t, y: n, k: r } = Ie(this.r, this.g, this.b);
+		let { c: e, m: t, y: n, k: r } = Ue(this.r, this.g, this.b);
 		return `cmyk(${e}, ${t}, ${n}, ${r})`;
 	}
 	toName() {
 		if (this.a === 0) return "transparent";
 		if (this.a < 1) return !1;
-		let e = "#" + Ne(this.r, this.g, this.b, !1);
-		for (let [t, n] of Object.entries(F)) if (e === n) return t;
+		let e = "#" + Be(this.r, this.g, this.b, !1);
+		for (let [t, n] of Object.entries(P)) if (e === n) return t;
 		return !1;
 	}
 	toString(e) {
@@ -1620,7 +1640,7 @@ var He = class e {
 	}
 	lighten(t = 10) {
 		let n = this.toHsl();
-		return n.l += t / 100, n.l = A(n.l), new e(n);
+		return n.l += t / 100, n.l = k(n.l), new e(n);
 	}
 	brighten(t = 10) {
 		let n = this.toRgb();
@@ -1628,7 +1648,7 @@ var He = class e {
 	}
 	darken(t = 10) {
 		let n = this.toHsl();
-		return n.l -= t / 100, n.l = A(n.l), new e(n);
+		return n.l -= t / 100, n.l = k(n.l), new e(n);
 	}
 	tint(e = 10) {
 		return this.mix("white", e);
@@ -1638,11 +1658,11 @@ var He = class e {
 	}
 	desaturate(t = 10) {
 		let n = this.toHsl();
-		return n.s -= t / 100, n.s = A(n.s), new e(n);
+		return n.s -= t / 100, n.s = k(n.s), new e(n);
 	}
 	saturate(t = 10) {
 		let n = this.toHsl();
-		return n.s += t / 100, n.s = A(n.s), new e(n);
+		return n.s += t / 100, n.s = k(n.s), new e(n);
 	}
 	greyscale() {
 		return this.desaturate(100);
@@ -1722,9 +1742,9 @@ var He = class e {
 		let n = new e(t);
 		return this.format === "cmyk" || n.format === "cmyk" ? this.toCmykString() === n.toCmykString() : this.toRgbString() === n.toRgbString();
 	}
-}, Ue = "EyeDropper" in window, R = class extends n {
+}, Xe = "EyeDropper" in window, L = class extends t {
 	constructor() {
-		super(), this.formControlController = new ne(this), this.isSafeValue = !1, this.localize = new f(this), this.hasFocus = !1, this.isDraggingGridHandle = !1, this.isEmpty = !1, this.inputValue = "", this.hue = 0, this.saturation = 100, this.brightness = 100, this.alpha = 100, this.value = "", this.defaultValue = "", this.label = "", this.format = "hex", this.inline = !1, this.size = "medium", this.noFormatToggle = !1, this.name = "", this.disabled = !1, this.hoist = !1, this.opacity = !1, this.uppercase = !1, this.swatches = "", this.form = "", this.required = !1, this.handleFocusIn = () => {
+		super(), this.formControlController = new de(this), this.isSafeValue = !1, this.localize = new v(this), this.hasFocus = !1, this.isDraggingGridHandle = !1, this.isEmpty = !1, this.inputValue = "", this.hue = 0, this.saturation = 100, this.brightness = 100, this.alpha = 100, this.value = "", this.defaultValue = "", this.label = "", this.format = "hex", this.inline = !1, this.size = "medium", this.noFormatToggle = !1, this.name = "", this.disabled = !1, this.hoist = !1, this.opacity = !1, this.uppercase = !1, this.swatches = "", this.form = "", this.required = !1, this.handleFocusIn = () => {
 			this.hasFocus = !0, this.emit("sl-focus");
 		}, this.handleFocusOut = () => {
 			this.hasFocus = !1, this.emit("sl-blur");
@@ -1757,9 +1777,9 @@ var He = class e {
 	}
 	handleAlphaDrag(e) {
 		let t = this.shadowRoot.querySelector(".color-picker__slider.color-picker__alpha"), n = t.querySelector(".color-picker__slider-handle"), { width: r } = t.getBoundingClientRect(), i = this.value, a = this.value;
-		n.focus(), e.preventDefault(), D(t, {
+		n.focus(), e.preventDefault(), T(t, {
 			onMove: (e) => {
-				this.alpha = m(e / r * 100, 0, 100), this.syncValues(), this.value !== a && (a = this.value, this.emit("sl-input"));
+				this.alpha = y(e / r * 100, 0, 100), this.syncValues(), this.value !== a && (a = this.value, this.emit("sl-input"));
 			},
 			onStop: () => {
 				this.value !== i && (i = this.value, this.emit("sl-change"));
@@ -1769,9 +1789,9 @@ var He = class e {
 	}
 	handleHueDrag(e) {
 		let t = this.shadowRoot.querySelector(".color-picker__slider.color-picker__hue"), n = t.querySelector(".color-picker__slider-handle"), { width: r } = t.getBoundingClientRect(), i = this.value, a = this.value;
-		n.focus(), e.preventDefault(), D(t, {
+		n.focus(), e.preventDefault(), T(t, {
 			onMove: (e) => {
-				this.hue = m(e / r * 360, 0, 360), this.syncValues(), this.value !== a && (a = this.value, this.emit("sl-input"));
+				this.hue = y(e / r * 360, 0, 360), this.syncValues(), this.value !== a && (a = this.value, this.emit("sl-input"));
 			},
 			onStop: () => {
 				this.value !== i && (i = this.value, this.emit("sl-change"));
@@ -1781,9 +1801,9 @@ var He = class e {
 	}
 	handleGridDrag(e) {
 		let t = this.shadowRoot.querySelector(".color-picker__grid"), n = t.querySelector(".color-picker__grid-handle"), { width: r, height: i } = t.getBoundingClientRect(), a = this.value, o = this.value;
-		n.focus(), e.preventDefault(), this.isDraggingGridHandle = !0, D(t, {
+		n.focus(), e.preventDefault(), this.isDraggingGridHandle = !0, T(t, {
 			onMove: (e, t) => {
-				this.saturation = m(e / r * 100, 0, 100), this.brightness = m(100 - t / i * 100, 0, 100), this.syncValues(), this.value !== o && (o = this.value, this.emit("sl-input"));
+				this.saturation = y(e / r * 100, 0, 100), this.brightness = y(100 - t / i * 100, 0, 100), this.syncValues(), this.value !== o && (o = this.value, this.emit("sl-input"));
 			},
 			onStop: () => {
 				this.isDraggingGridHandle = !1, this.value !== a && (a = this.value, this.emit("sl-change"));
@@ -1793,15 +1813,15 @@ var He = class e {
 	}
 	handleAlphaKeyDown(e) {
 		let t = e.shiftKey ? 10 : 1, n = this.value;
-		e.key === "ArrowLeft" && (e.preventDefault(), this.alpha = m(this.alpha - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.alpha = m(this.alpha + t, 0, 100), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.alpha = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.alpha = 100, this.syncValues()), this.value !== n && (this.emit("sl-change"), this.emit("sl-input"));
+		e.key === "ArrowLeft" && (e.preventDefault(), this.alpha = y(this.alpha - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.alpha = y(this.alpha + t, 0, 100), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.alpha = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.alpha = 100, this.syncValues()), this.value !== n && (this.emit("sl-change"), this.emit("sl-input"));
 	}
 	handleHueKeyDown(e) {
 		let t = e.shiftKey ? 10 : 1, n = this.value;
-		e.key === "ArrowLeft" && (e.preventDefault(), this.hue = m(this.hue - t, 0, 360), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.hue = m(this.hue + t, 0, 360), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.hue = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.hue = 360, this.syncValues()), this.value !== n && (this.emit("sl-change"), this.emit("sl-input"));
+		e.key === "ArrowLeft" && (e.preventDefault(), this.hue = y(this.hue - t, 0, 360), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.hue = y(this.hue + t, 0, 360), this.syncValues()), e.key === "Home" && (e.preventDefault(), this.hue = 0, this.syncValues()), e.key === "End" && (e.preventDefault(), this.hue = 360, this.syncValues()), this.value !== n && (this.emit("sl-change"), this.emit("sl-input"));
 	}
 	handleGridKeyDown(e) {
 		let t = e.shiftKey ? 10 : 1, n = this.value;
-		e.key === "ArrowLeft" && (e.preventDefault(), this.saturation = m(this.saturation - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.saturation = m(this.saturation + t, 0, 100), this.syncValues()), e.key === "ArrowUp" && (e.preventDefault(), this.brightness = m(this.brightness + t, 0, 100), this.syncValues()), e.key === "ArrowDown" && (e.preventDefault(), this.brightness = m(this.brightness - t, 0, 100), this.syncValues()), this.value !== n && (this.emit("sl-change"), this.emit("sl-input"));
+		e.key === "ArrowLeft" && (e.preventDefault(), this.saturation = y(this.saturation - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.saturation = y(this.saturation + t, 0, 100), this.syncValues()), e.key === "ArrowUp" && (e.preventDefault(), this.brightness = y(this.brightness + t, 0, 100), this.syncValues()), e.key === "ArrowDown" && (e.preventDefault(), this.brightness = y(this.brightness - t, 0, 100), this.syncValues()), this.value !== n && (this.emit("sl-change"), this.emit("sl-input"));
 	}
 	handleInputChange(e) {
 		let t = e.target, n = this.value;
@@ -1823,7 +1843,7 @@ var He = class e {
 		e.preventDefault();
 	}
 	parseColor(e) {
-		let t = new He(e);
+		let t = new Ye(e);
 		if (!t.isValid) return null;
 		let n = t.toHsl(), r = {
 			h: n.h,
@@ -1895,7 +1915,7 @@ var He = class e {
 		this.previewButton.classList.remove("color-picker__preview-color--copied");
 	}
 	handleEyeDropper() {
-		Ue && new EyeDropper().open().then((e) => {
+		Xe && new EyeDropper().open().then((e) => {
 			let t = this.value;
 			this.setColor(e.sRGBHex), this.value !== t && (this.emit("sl-change"), this.emit("sl-input"));
 		}).catch(() => {});
@@ -1905,7 +1925,7 @@ var He = class e {
 		this.disabled || (this.setColor(e), this.value !== t && (this.emit("sl-change"), this.emit("sl-input")));
 	}
 	getHexString(e, t, n, r = 100) {
-		let i = new He(`hsva(${e}, ${t}%, ${n}%, ${r / 100})`);
+		let i = new Ye(`hsva(${e}, ${t}%, ${n}%, ${r / 100})`);
 		return i.isValid ? i.toHex8String() : "";
 	}
 	stopNestedEventPropagation(e) {
@@ -1958,10 +1978,10 @@ var He = class e {
 		this.input.setCustomValidity(e), this.formControlController.updateValidity();
 	}
 	render() {
-		let e = this.saturation, t = 100 - this.brightness, n = Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((e) => e.trim() !== ""), r = g`
+		let e = this.saturation, t = 100 - this.brightness, n = Array.isArray(this.swatches) ? this.swatches : this.swatches.split(";").filter((e) => e.trim() !== ""), r = d`
       <div
         part="base"
-        class=${b({
+        class=${g({
 			"color-picker": !0,
 			"color-picker--inline": this.inline,
 			"color-picker--disabled": this.disabled,
@@ -1971,7 +1991,7 @@ var He = class e {
         aria-labelledby="label"
         tabindex=${this.inline ? "0" : "-1"}
       >
-        ${this.inline ? g`
+        ${this.inline ? d`
               <sl-visually-hidden id="label">
                 <slot name="label">${this.label}</slot>
               </sl-visually-hidden>
@@ -1980,24 +2000,24 @@ var He = class e {
         <div
           part="grid"
           class="color-picker__grid"
-          style=${S({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
+          style=${D({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
           @pointerdown=${this.handleGridDrag}
           @touchmove=${this.handleTouchMove}
         >
           <span
             part="grid-handle"
-            class=${b({
+            class=${g({
 			"color-picker__grid-handle": !0,
 			"color-picker__grid-handle--dragging": this.isDraggingGridHandle
 		})}
-            style=${S({
+            style=${D({
 			top: `${t}%`,
 			left: `${e}%`,
 			backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
 		})}
             role="application"
             aria-label="HSV"
-            tabindex=${x(this.disabled ? void 0 : "0")}
+            tabindex=${_(this.disabled ? void 0 : "0")}
             @keydown=${this.handleGridKeyDown}
           ></span>
         </div>
@@ -2013,19 +2033,19 @@ var He = class e {
               <span
                 part="slider-handle hue-slider-handle"
                 class="color-picker__slider-handle"
-                style=${S({ left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%` })}
+                style=${D({ left: `${this.hue === 0 ? 0 : 100 / (360 / this.hue)}%` })}
                 role="slider"
                 aria-label="hue"
                 aria-orientation="horizontal"
                 aria-valuemin="0"
                 aria-valuemax="360"
                 aria-valuenow=${`${Math.round(this.hue)}`}
-                tabindex=${x(this.disabled ? void 0 : "0")}
+                tabindex=${_(this.disabled ? void 0 : "0")}
                 @keydown=${this.handleHueKeyDown}
               ></span>
             </div>
 
-            ${this.opacity ? g`
+            ${this.opacity ? d`
                   <div
                     part="slider opacity-slider"
                     class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
@@ -2034,7 +2054,7 @@ var He = class e {
                   >
                     <div
                       class="color-picker__alpha-gradient"
-                      style=${S({ backgroundImage: `linear-gradient(
+                      style=${D({ backgroundImage: `linear-gradient(
                           to right,
                           ${this.getHexString(this.hue, this.saturation, this.brightness, 0)} 0%,
                           ${this.getHexString(this.hue, this.saturation, this.brightness, 100)} 100%
@@ -2043,14 +2063,14 @@ var He = class e {
                     <span
                       part="slider-handle opacity-slider-handle"
                       class="color-picker__slider-handle"
-                      style=${S({ left: `${this.alpha}%` })}
+                      style=${D({ left: `${this.alpha}%` })}
                       role="slider"
                       aria-label="alpha"
                       aria-orientation="horizontal"
                       aria-valuemin="0"
                       aria-valuemax="100"
                       aria-valuenow=${Math.round(this.alpha)}
-                      tabindex=${x(this.disabled ? void 0 : "0")}
+                      tabindex=${_(this.disabled ? void 0 : "0")}
                       @keydown=${this.handleAlphaKeyDown}
                     ></span>
                   </div>
@@ -2062,7 +2082,7 @@ var He = class e {
             part="preview"
             class="color-picker__preview color-picker__transparent-bg"
             aria-label=${this.localize.term("copy")}
-            style=${S({ "--preview-color": this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) })}
+            style=${D({ "--preview-color": this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) })}
             @click=${this.handleCopy}
           ></button>
         </div>
@@ -2089,7 +2109,7 @@ var He = class e {
           ></sl-input>
 
           <sl-button-group>
-            ${this.noFormatToggle ? "" : g`
+            ${this.noFormatToggle ? "" : d`
                   <sl-button
                     part="format-button"
                     aria-label=${this.localize.term("toggleColorFormat")}
@@ -2107,7 +2127,7 @@ var He = class e {
                     ${this.setLetterCase(this.format)}
                   </sl-button>
                 `}
-            ${Ue ? g`
+            ${Xe ? d`
                   <sl-button
                     part="eye-dropper-button"
                     exportparts="
@@ -2131,15 +2151,15 @@ var He = class e {
           </sl-button-group>
         </div>
 
-        ${n.length > 0 ? g`
+        ${n.length > 0 ? d`
               <div part="swatches" class="color-picker__swatches">
                 ${n.map((e) => {
 			let t = this.parseColor(e);
-			return t ? g`
+			return t ? d`
                     <div
                       part="swatch"
                       class="color-picker__swatch color-picker__transparent-bg"
-                      tabindex=${x(this.disabled ? void 0 : "0")}
+                      tabindex=${_(this.disabled ? void 0 : "0")}
                       role="button"
                       aria-label=${e}
                       @click=${() => this.selectSwatch(e)}
@@ -2147,7 +2167,7 @@ var He = class e {
                     >
                       <div
                         class="color-picker__swatch-color"
-                        style=${S({ backgroundColor: t.hexa })}
+                        style=${D({ backgroundColor: t.hexa })}
                       ></div>
                     </div>
                   ` : (console.error(`Unable to parse swatch color: "${e}"`, this), "");
@@ -2156,7 +2176,7 @@ var He = class e {
             ` : ""}
       </div>
     `;
-		return this.inline ? r : g`
+		return this.inline ? r : d`
       <sl-dropdown
         class="color-dropdown"
         aria-disabled=${this.disabled ? "true" : "false"}
@@ -2168,7 +2188,7 @@ var He = class e {
         <button
           part="trigger"
           slot="trigger"
-          class=${b({
+          class=${g({
 			"color-dropdown__trigger": !0,
 			"color-dropdown__trigger--disabled": this.disabled,
 			"color-dropdown__trigger--small": this.size === "small",
@@ -2178,7 +2198,7 @@ var He = class e {
 			"color-dropdown__trigger--focused": this.hasFocus,
 			"color-picker__transparent-bg": !0
 		})}
-          style=${S({ color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) })}
+          style=${D({ color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) })}
           type="button"
         >
           <sl-visually-hidden>
@@ -2192,29 +2212,29 @@ var He = class e {
 };
 //#endregion
 //#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.BQVAQ53I.js
-R.styles = [r, we], R.dependencies = {
-	"sl-button-group": C,
-	"sl-button": re,
-	"sl-dropdown": O,
+L.styles = [e, ke], L.dependencies = {
+	"sl-button-group": b,
+	"sl-button": fe,
+	"sl-dropdown": E,
 	"sl-icon": i,
-	"sl-input": ae,
-	"sl-visually-hidden": Se
-}, e([v("[part~=\"base\"]")], R.prototype, "base", 2), e([v("[part~=\"input\"]")], R.prototype, "input", 2), e([v(".color-dropdown")], R.prototype, "dropdown", 2), e([v("[part~=\"preview\"]")], R.prototype, "previewButton", 2), e([v("[part~=\"trigger\"]")], R.prototype, "trigger", 2), e([y()], R.prototype, "hasFocus", 2), e([y()], R.prototype, "isDraggingGridHandle", 2), e([y()], R.prototype, "isEmpty", 2), e([y()], R.prototype, "inputValue", 2), e([y()], R.prototype, "hue", 2), e([y()], R.prototype, "saturation", 2), e([y()], R.prototype, "brightness", 2), e([y()], R.prototype, "alpha", 2), e([_()], R.prototype, "value", 2), e([ie()], R.prototype, "defaultValue", 2), e([_()], R.prototype, "label", 2), e([_()], R.prototype, "format", 2), e([_({
+	"sl-input": me,
+	"sl-visually-hidden": w
+}, r([l("[part~=\"base\"]")], L.prototype, "base", 2), r([l("[part~=\"input\"]")], L.prototype, "input", 2), r([l(".color-dropdown")], L.prototype, "dropdown", 2), r([l("[part~=\"preview\"]")], L.prototype, "previewButton", 2), r([l("[part~=\"trigger\"]")], L.prototype, "trigger", 2), r([s()], L.prototype, "hasFocus", 2), r([s()], L.prototype, "isDraggingGridHandle", 2), r([s()], L.prototype, "isEmpty", 2), r([s()], L.prototype, "inputValue", 2), r([s()], L.prototype, "hue", 2), r([s()], L.prototype, "saturation", 2), r([s()], L.prototype, "brightness", 2), r([s()], L.prototype, "alpha", 2), r([a()], L.prototype, "value", 2), r([pe()], L.prototype, "defaultValue", 2), r([a()], L.prototype, "label", 2), r([a()], L.prototype, "format", 2), r([a({
 	type: Boolean,
 	reflect: !0
-})], R.prototype, "inline", 2), e([_({ reflect: !0 })], R.prototype, "size", 2), e([_({
+})], L.prototype, "inline", 2), r([a({ reflect: !0 })], L.prototype, "size", 2), r([a({
 	attribute: "no-format-toggle",
 	type: Boolean
-})], R.prototype, "noFormatToggle", 2), e([_()], R.prototype, "name", 2), e([_({
+})], L.prototype, "noFormatToggle", 2), r([a()], L.prototype, "name", 2), r([a({
 	type: Boolean,
 	reflect: !0
-})], R.prototype, "disabled", 2), e([_({ type: Boolean })], R.prototype, "hoist", 2), e([_({ type: Boolean })], R.prototype, "opacity", 2), e([_({ type: Boolean })], R.prototype, "uppercase", 2), e([_()], R.prototype, "swatches", 2), e([_({ reflect: !0 })], R.prototype, "form", 2), e([_({
+})], L.prototype, "disabled", 2), r([a({ type: Boolean })], L.prototype, "hoist", 2), r([a({ type: Boolean })], L.prototype, "opacity", 2), r([a({ type: Boolean })], L.prototype, "uppercase", 2), r([a()], L.prototype, "swatches", 2), r([a({ reflect: !0 })], L.prototype, "form", 2), r([a({
 	type: Boolean,
 	reflect: !0
-})], R.prototype, "required", 2), e([_e({ passive: !1 })], R.prototype, "handleTouchMove", 1), e([t("format", { waitUntilFirstUpdate: !0 })], R.prototype, "handleFormatChange", 1), e([t("opacity", { waitUntilFirstUpdate: !0 })], R.prototype, "handleOpacityChange", 1), e([t("value")], R.prototype, "handleValueChange", 1), R.define("sl-color-picker");
+})], L.prototype, "required", 2), r([f({ passive: !1 })], L.prototype, "handleTouchMove", 1), r([n("format", { waitUntilFirstUpdate: !0 })], L.prototype, "handleFormatChange", 1), r([n("opacity", { waitUntilFirstUpdate: !0 })], L.prototype, "handleOpacityChange", 1), r([n("value")], L.prototype, "handleValueChange", 1), L.define("sl-color-picker");
 //#endregion
 //#region src/components/webmapx-draw-layer-dialog.ts
-var We = {
+var Ze = {
 	Point: [
 		"string",
 		"number",
@@ -2246,32 +2266,32 @@ var We = {
 		"create-time",
 		"update-time"
 	]
-}, Ge = [{
+}, Qe = [{
 	name: "id",
 	type: "number"
 }, {
 	name: "name",
 	type: "string"
-}], Ke = {
+}], $e = {
 	Point: "#0f62fe",
 	LineString: "#0f62fe",
 	Polygon: "#0f62fe"
 };
-function z(e) {
+function R(e) {
 	return {
 		id: `layer-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
 		name: "",
 		type: e,
-		color: Ke[e],
-		properties: Ge.map((e) => ({ ...e }))
+		color: $e[e],
+		properties: Qe.map((e) => ({ ...e }))
 	};
 }
-var B = class extends he {
+var z = class extends p {
 	constructor(...e) {
-		super(...e), this.geometryType = "Point", this.existingLayers = [], this.mapLayers = [], this.step = "select", this.selectedId = "new", this.layer = z("Point"), this.nameError = !1, this.newPropName = "", this.newPropType = "string", this.allowedAttributes = null;
+		super(...e), this.geometryType = "Point", this.existingLayers = [], this.mapLayers = [], this.step = "select", this.selectedId = "new", this.layer = R("Point"), this.nameError = !1, this.newPropName = "", this.newPropType = "string", this.allowedAttributes = null;
 	}
 	static {
-		this.styles = h`
+		this.styles = o`
         :host { display: block; }
 
         sl-dialog::part(panel) {
@@ -2374,7 +2394,7 @@ var B = class extends he {
     `;
 	}
 	open() {
-		this.step = "select", this.selectedId = this.existingLayers.length === 0 ? "new" : this.existingLayers[0].id, this.layer = z(this.geometryType), this.newPropName = "", this.newPropType = "string", this.nameError = !1, this.dialog?.show();
+		this.step = "select", this.selectedId = this.existingLayers.length === 0 ? "new" : this.existingLayers[0].id, this.layer = R(this.geometryType), this.newPropName = "", this.newPropType = "string", this.nameError = !1, this.dialog?.show();
 	}
 	close() {
 		this.dialog?.hide();
@@ -2383,7 +2403,7 @@ var B = class extends he {
 		this.selectedId = e;
 	}
 	goToDetail() {
-		if (this.selectedId === "new") this.layer = z(this.geometryType), this.allowedAttributes = null;
+		if (this.selectedId === "new") this.layer = R(this.geometryType), this.allowedAttributes = null;
 		else {
 			let e = this.existingLayers.find((e) => e.id === this.selectedId);
 			if (e) this.layer = {
@@ -2393,9 +2413,9 @@ var B = class extends he {
 			else {
 				let e = this.mapLayers.find((e) => e.layerId === this.selectedId);
 				this.layer = {
-					...z(this.geometryType),
+					...R(this.geometryType),
 					name: e?.label ?? this.selectedId,
-					properties: e?.properties?.map((e) => ({ ...e })) ?? Ge.map((e) => ({ ...e })),
+					properties: e?.properties?.map((e) => ({ ...e })) ?? Qe.map((e) => ({ ...e })),
 					borrowedSourceId: e?.sourceId
 				}, this.allowedAttributes = e?.allowedAttributes ?? null;
 			}
@@ -2450,7 +2470,7 @@ var B = class extends he {
 	}
 	renderSelectStep() {
 		let e = this.geometryType === "LineString" ? "Line" : this.geometryType;
-		return g`
+		return d`
             <div class="layer-list">
                 <div class="layer-option ${this.selectedId === "new" ? "selected" : ""}"
                      @click=${() => this.selectOption("new")}
@@ -2460,7 +2480,7 @@ var B = class extends he {
                     <span class="new-icon">＋</span>
                     <span>New ${e} layer</span>
                 </div>
-                ${this.existingLayers.map((e) => g`
+                ${this.existingLayers.map((e) => d`
                     <div class="layer-option ${this.selectedId === e.id ? "selected" : ""}"
                          @click=${() => this.selectOption(e.id)}
                          @dblclick=${() => {
@@ -2470,9 +2490,9 @@ var B = class extends he {
                         <span>${e.name}</span>
                     </div>
                 `)}
-                ${this.mapLayers.length > 0 ? g`
+                ${this.mapLayers.length > 0 ? d`
                     <div style="font-size:0.72rem;color:var(--sl-color-neutral-500);padding:0.4rem 0.2rem 0.1rem;text-transform:uppercase;letter-spacing:0.05em">Map layers</div>
-                    ${this.mapLayers.map((e) => g`
+                    ${this.mapLayers.map((e) => d`
                         <div class="layer-option ${this.selectedId === e.layerId ? "selected" : ""}"
                              @click=${() => this.selectOption(e.layerId)}
                              @dblclick=${() => {
@@ -2492,7 +2512,7 @@ var B = class extends he {
         `;
 	}
 	renderDetailStep() {
-		let e = We[this.geometryType], t = {
+		let e = Ze[this.geometryType], t = {
 			longitude: "longitude (auto)",
 			latitude: "latitude (auto)",
 			area: "area (auto)",
@@ -2503,7 +2523,7 @@ var B = class extends he {
 			"create-time": "create-time (auto)",
 			"update-time": "update-time (auto)"
 		};
-		return g`
+		return d`
             <div class="name-input-row">
                 <sl-input name="layername"
                     style="flex:1"
@@ -2525,14 +2545,14 @@ var B = class extends he {
 			};
 		}}>
             </div>
-            ${this.nameError ? g`<div class="error-msg">Enter a layer name.</div>` : ""}
+            ${this.nameError ? d`<div class="error-msg">Enter a layer name.</div>` : ""}
 
             <table class="prop-table">
                 <thead>
                     <tr><th>Property</th><th>Type</th><th style="width:2rem"></th></tr>
                 </thead>
                 <tbody>
-                    ${this.layer.properties.map((e, t) => g`
+                    ${this.layer.properties.map((e, t) => d`
                         <tr class="${e.name === "id" ? "prop-row-auto" : ""}">
                             <td>${e.name}</td>
                             <td class="${[
@@ -2542,7 +2562,7 @@ var B = class extends he {
 			"imageURL"
 		].includes(e.type) ? "" : "type-computed"}">${e.type}${e.name === "id" ? " (auto)" : ""}</td>
                             <td>
-                                ${t === 0 ? "" : g`
+                                ${t === 0 ? "" : d`
                                     <sl-icon-button name="x" @click=${() => this.removeProperty(t)}></sl-icon-button>
                                 `}
                             </td>
@@ -2550,14 +2570,14 @@ var B = class extends he {
                     `)}
                     <tr class="add-row">
                         <td>
-                            ${this.allowedAttributes ? g`
+                            ${this.allowedAttributes ? d`
                                 <sl-select id="new-prop-name" size="small" aria-label="Property name"
                                     .value=${this.newPropName}
                                     @sl-change=${(e) => this.newPropName = e.target.value}>
                                     <sl-option value="">— select —</sl-option>
-                                    ${this.allowedAttributes.filter((e) => !this.layer.properties.find((t) => t.name === e)).map((e) => g`<sl-option value=${e}>${e}</sl-option>`)}
+                                    ${this.allowedAttributes.filter((e) => !this.layer.properties.find((t) => t.name === e)).map((e) => d`<sl-option value=${e}>${e}</sl-option>`)}
                                 </sl-select>
-                            ` : g`
+                            ` : d`
                                 <sl-input id="new-prop-name" size="small" placeholder="property name" aria-label="Property name"
                                     .value=${this.newPropName}
                                     @sl-input=${(e) => this.newPropName = e.target.value}
@@ -2568,7 +2588,7 @@ var B = class extends he {
                         <td>
                             <sl-select id="new-prop-type" size="small" .value=${this.newPropType}
                                 @sl-change=${(e) => this.newPropType = e.target.value}>
-                                ${e.map((e) => g`<sl-option value=${e}>${t[e] ?? e}</sl-option>`)}
+                                ${e.map((e) => d`<sl-option value=${e}>${t[e] ?? e}</sl-option>`)}
                             </sl-select>
                         </td>
                         <td>
@@ -2587,7 +2607,7 @@ var B = class extends he {
 	}
 	render() {
 		let e = this.geometryType === "LineString" ? "Line" : this.geometryType;
-		return g`
+		return d`
             <sl-dialog label="${this.step === "select" ? `Select ${e} layer` : `Configure ${e} layer`}"
                        @sl-request-close=${(e) => {
 			e.detail?.source === "overlay" && this.cancel();
@@ -2597,26 +2617,26 @@ var B = class extends he {
         `;
 	}
 };
-a([_({ type: String })], B.prototype, "geometryType", void 0), a([_({ attribute: !1 })], B.prototype, "existingLayers", void 0), a([_({ attribute: !1 })], B.prototype, "mapLayers", void 0), a([y()], B.prototype, "step", void 0), a([y()], B.prototype, "selectedId", void 0), a([y()], B.prototype, "layer", void 0), a([y()], B.prototype, "nameError", void 0), a([y()], B.prototype, "newPropName", void 0), a([y()], B.prototype, "newPropType", void 0), a([y()], B.prototype, "allowedAttributes", void 0), a([v("sl-dialog")], B.prototype, "dialog", void 0), B = a([ge("webmapx-draw-layer-dialog")], B);
+m([a({ type: String })], z.prototype, "geometryType", void 0), m([a({ attribute: !1 })], z.prototype, "existingLayers", void 0), m([a({ attribute: !1 })], z.prototype, "mapLayers", void 0), m([s()], z.prototype, "step", void 0), m([s()], z.prototype, "selectedId", void 0), m([s()], z.prototype, "layer", void 0), m([s()], z.prototype, "nameError", void 0), m([s()], z.prototype, "newPropName", void 0), m([s()], z.prototype, "newPropType", void 0), m([s()], z.prototype, "allowedAttributes", void 0), m([l("sl-dialog")], z.prototype, "dialog", void 0), z = m([u("webmapx-draw-layer-dialog")], z);
 //#endregion
 //#region src/utils/snap-utils.ts
-function qe(e) {
+function et(e) {
 	return e.type === "Point" ? [e.coordinates] : e.type === "MultiPoint" || e.type === "LineString" ? e.coordinates : e.type === "MultiLineString" || e.type === "Polygon" ? e.coordinates.flat() : e.type === "MultiPolygon" ? e.coordinates.flat(2) : [];
 }
-function Je(e) {
+function tt(e) {
 	let t = [], n = (e) => {
 		for (let n = 0; n < e.length - 1; n++) t.push([e[n], e[n + 1]]);
 	};
 	return e.type === "LineString" ? n(e.coordinates) : e.type === "MultiLineString" ? e.coordinates.forEach((e) => n(e)) : e.type === "Polygon" ? e.coordinates.forEach((e) => n(e)) : e.type === "MultiPolygon" && e.coordinates.forEach((e) => e.forEach((e) => n(e))), t;
 }
-function Ye(e, t, n, r = {}) {
+function nt(e, t, n, r = {}) {
 	let i = r.threshold ?? 16, a = r.edgePenalty ?? 8, o = null, s = i;
 	for (let r of t) {
-		for (let t of qe(r)) {
+		for (let t of et(r)) {
 			let r = n(t), i = Math.hypot(r[0] - e[0], r[1] - e[1]);
 			i < s && (s = i, o = t);
 		}
-		for (let [t, i] of Je(r)) {
+		for (let [t, i] of tt(r)) {
 			let r = n(t), c = n(i), l = c[0] - r[0], u = c[1] - r[1], d = l * l + u * u;
 			if (d === 0) continue;
 			let f = Math.max(0, Math.min(1, ((e[0] - r[0]) * l + (e[1] - r[1]) * u) / d)), p = Math.hypot(r[0] + f * l - e[0], r[1] + f * u - e[1]);
@@ -2627,14 +2647,14 @@ function Ye(e, t, n, r = {}) {
 }
 //#endregion
 //#region src/components/webmapx-draw-tool.ts
-var V = "webmapx-draw-rubber-source", Xe = "webmapx-draw-rubber-line", H = "webmapx-draw-vertex-source", Ze = "webmapx-draw-vertex-layer";
-function U(e) {
+var B = "webmapx-draw-rubber-source", rt = "webmapx-draw-rubber-line", V = "webmapx-draw-vertex-source", it = "webmapx-draw-vertex-layer";
+function H(e) {
 	return `webmapx-draw-src-${e}`;
 }
-function Qe(e) {
+function at(e) {
 	return `${e}-map`;
 }
-var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt = "webmapx-draw-sel-point", K = "webmapx-draw-draft-source", nt = "webmapx-draw-draft-points", q = "webmapx-draw-edit-vert-source", rt = "webmapx-draw-edit-vert", J = "webmapx-draw-edit-mid-source", it = "webmapx-draw-edit-mid", Y = "webmapx-draw-sel-vert-source", at = "webmapx-draw-sel-vert", ot = 12, X = "webmapx-draw-snap-source", st = "webmapx-draw-snap-layer", ct = 16, Z = class extends pe {
+var U = "#888888", ot = "#ff3b30", st = 10, W = "webmapx-draw-sel-source", ct = "webmapx-draw-sel-point", G = "webmapx-draw-draft-source", K = "webmapx-draw-draft-points", q = "webmapx-draw-edit-vert-source", lt = "webmapx-draw-edit-vert", J = "webmapx-draw-edit-mid-source", ut = "webmapx-draw-edit-mid", Y = "webmapx-draw-sel-vert-source", dt = "webmapx-draw-sel-vert", ft = 12, X = "webmapx-draw-snap-source", pt = "webmapx-draw-snap-layer", mt = 16, Z = class extends Se {
 	constructor(...e) {
 		super(...e), this.toolId = "draw", this.mode = "select", this.drawLayers = [], this.features = [], this.selectedFeatureId = null, this.helpText = "", this.pendingMode = null, this.uiVersion = 0, this.draftPoints = [], this.draftRedoStack = [], this.cursorPos = null, this.activeLayerIds = {}, this.history = [], this.historyIndex = -1, this.sharedLayersCreated = !1, this.createdDrawLayerIds = /* @__PURE__ */ new Set(), this.touchMQ = window.matchMedia("(pointer: coarse)"), this.isTouchDevice = this.touchMQ.matches, this.onTouchMQChange = (e) => {
 			this.isTouchDevice = e.matches;
@@ -2669,7 +2689,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 		return this.snapEnabled && !this.altActive;
 	}
 	static {
-		this.styles = h`
+		this.styles = o`
         :host {
             display: flex;
             flex-direction: column;
@@ -2819,7 +2839,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 	createSharedLayers() {
 		if (!this.sharedLayersCreated) {
 			this.dispatch("webmapx-add-source", {
-				id: V,
+				id: B,
 				config: {
 					type: "geojson",
 					data: {
@@ -2828,7 +2848,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-source", {
-				id: H,
+				id: V,
 				config: {
 					type: "geojson",
 					data: {
@@ -2837,9 +2857,9 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: Xe,
+				id: rt,
 				type: "line",
-				source: V,
+				source: B,
 				metadata: {
 					isToolLayer: !0,
 					hideFromLegend: !0
@@ -2850,9 +2870,9 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					"line-dasharray": [4, 4]
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: Ze,
+				id: it,
 				type: "circle",
-				source: H,
+				source: V,
 				metadata: {
 					isToolLayer: !0,
 					hideFromLegend: !0
@@ -2864,7 +2884,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					"circle-stroke-color": "#ff6600"
 				}
 			}), this.dispatch("webmapx-add-source", {
-				id: G,
+				id: W,
 				config: {
 					type: "geojson",
 					data: {
@@ -2873,19 +2893,19 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: tt,
+				id: ct,
 				type: "circle",
-				source: G,
+				source: W,
 				metadata: {
 					isToolLayer: !0,
 					hideFromLegend: !0
 				},
 				paint: {
-					"circle-radius": et,
-					"circle-color": this.cssVar("--webmapx-draw-selected-color", $e)
+					"circle-radius": st,
+					"circle-color": this.cssVar("--webmapx-draw-selected-color", ot)
 				}
 			}), this.dispatch("webmapx-add-source", {
-				id: K,
+				id: G,
 				config: {
 					type: "geojson",
 					data: {
@@ -2894,9 +2914,9 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: nt,
+				id: K,
 				type: "circle",
-				source: K,
+				source: G,
 				metadata: {
 					isToolLayer: !0,
 					hideFromLegend: !0
@@ -2917,7 +2937,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: rt,
+				id: lt,
 				type: "circle",
 				source: q,
 				metadata: {
@@ -2940,7 +2960,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: it,
+				id: ut,
 				type: "circle",
 				source: J,
 				metadata: {
@@ -2964,7 +2984,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: at,
+				id: dt,
 				type: "circle",
 				source: Y,
 				metadata: {
@@ -2972,8 +2992,8 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					hideFromLegend: !0
 				},
 				paint: {
-					"circle-radius": et,
-					"circle-color": this.cssVar("--webmapx-draw-selected-color", $e),
+					"circle-radius": st,
+					"circle-color": this.cssVar("--webmapx-draw-selected-color", ot),
 					"circle-stroke-width": 2,
 					"circle-stroke-color": "#fff"
 				}
@@ -2987,7 +3007,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 					}
 				}
 			}), this.dispatch("webmapx-add-layer", {
-				id: st,
+				id: pt,
 				type: "circle",
 				source: X,
 				metadata: {
@@ -3007,7 +3027,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 	}
 	addMapLayersForDrawLayer(e) {
 		if (this.createdDrawLayerIds.has(e.id)) return;
-		let t = U(e.id);
+		let t = H(e.id);
 		this.dispatch("webmapx-add-source", {
 			id: t,
 			config: {
@@ -3078,24 +3098,24 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 		}), this.createdDrawLayerIds.add(e.id), e.type === "Polygon" && this.createdDrawLayerIds.add(`${e.id}-outline`);
 	}
 	removeMapLayersForDrawLayer(e) {
-		e.type === "Polygon" && this.dispatch("webmapx-remove-layer", `${e.id}-outline`), this.dispatch("webmapx-remove-layer", e.id), this.dispatch("webmapx-remove-source", U(e.id)), this.adapter?.store && me(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
+		e.type === "Polygon" && this.dispatch("webmapx-remove-layer", `${e.id}-outline`), this.dispatch("webmapx-remove-layer", e.id), this.dispatch("webmapx-remove-source", H(e.id)), this.adapter?.store && Ce(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
 	}
 	removeSharedLayers() {
 		for (let e of [
-			Xe,
-			Ze,
-			tt,
-			nt,
 			rt,
 			it,
-			at,
-			st
+			ct,
+			K,
+			lt,
+			ut,
+			dt,
+			pt
 		]) this.dispatch("webmapx-remove-layer", e);
 		for (let e of [
+			B,
 			V,
-			H,
+			W,
 			G,
-			K,
 			q,
 			J,
 			Y,
@@ -3119,7 +3139,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			properties: e.properties
 		}));
 		this.dispatch("webmapx-set-source-data", {
-			id: U(e),
+			id: H(e),
 			data: {
 				type: "FeatureCollection",
 				features: t
@@ -3260,7 +3280,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			if (n) {
 				let e = [];
 				for (let r of n.features) {
-					if (!r.geometry || !lt(r.geometry.type)) continue;
+					if (!r.geometry || !ht(r.geometry.type)) continue;
 					let n = { ...r.properties };
 					e.push({
 						id: this.newId(),
@@ -3284,7 +3304,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			});
 		}
 		this.activeLayerIds[t.type] = t.id, this.refreshDrawLayerSource(t.id);
-		let i = Qe(t.id);
+		let i = at(t.id);
 		if (this.adapter?.store) {
 			let e = this.adapter.store.getState().mapLayers ?? {}, n = e[i];
 			n && this.adapter.store.dispatch({ mapLayers: {
@@ -3324,7 +3344,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 				}
 			}
 		});
-		let n = Qe(e.id);
+		let n = at(e.id);
 		return e.type === "Polygon" ? (this.dispatch("webmapx-add-layer", {
 			id: n,
 			type: "fill",
@@ -3336,7 +3356,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 				properties: e.properties
 			},
 			paint: {
-				"fill-color": W,
+				"fill-color": U,
 				"fill-opacity": .35
 			}
 		}), this.dispatch("webmapx-add-layer", {
@@ -3351,7 +3371,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 				properties: e.properties
 			},
 			paint: {
-				"line-color": W,
+				"line-color": U,
 				"line-width": 2
 			}
 		})) : e.type === "LineString" ? this.dispatch("webmapx-add-layer", {
@@ -3365,7 +3385,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 				properties: e.properties
 			},
 			paint: {
-				"line-color": W,
+				"line-color": U,
 				"line-width": 2
 			}
 		}) : this.dispatch("webmapx-add-layer", {
@@ -3380,7 +3400,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			},
 			paint: {
 				"circle-radius": 5,
-				"circle-color": W,
+				"circle-color": U,
 				"circle-stroke-width": 1,
 				"circle-stroke-color": "#555"
 			}
@@ -3393,7 +3413,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 		}
 	}
 	suspendDrawLayerFromMap(e) {
-		e.type === "Polygon" && this.dispatch("webmapx-remove-layer", `${e.id}-outline`), this.dispatch("webmapx-remove-layer", e.id), this.dispatch("webmapx-remove-source", U(e.id)), this.adapter?.store && me(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
+		e.type === "Polygon" && this.dispatch("webmapx-remove-layer", `${e.id}-outline`), this.dispatch("webmapx-remove-layer", e.id), this.dispatch("webmapx-remove-source", H(e.id)), this.adapter?.store && Ce(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
 	}
 	releaseLayer(e) {
 		this.releaseBorrowedLayer(e);
@@ -3431,7 +3451,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			}
 			if (this.mode === "select") {
 				let e = this.adapter.project(t), n = [e[0], e[1]], r = this.findFeatureAt(n, t);
-				r && r.id === this.selectedFeatureId && this.editState === "selected" && (ut(r.type) || dt(r.type)) ? this.enterEditMode(r.id) : r && r.id === this.selectedFeatureId && this.editState === "editing" || (r ? (this.selectedFeatureId = r.id, this.editState = $(r.type) ? "editing" : "selected", this.editState === "selected" ? this.helpText = "Click again to edit vertices." : $(r.type) && (this.helpText = "Drag to move point."), this.updateSelectedSource(), this.updateEditHandles(), this.requestUpdate()) : this.editState === "editing" ? (this.editState = "selected", this.updateEditHandles(), this.requestUpdate()) : (this.selectedFeatureId = null, this.editState = "none", this.updateSelectedSource(), this.updateEditHandles(), this.requestUpdate()));
+				r && r.id === this.selectedFeatureId && this.editState === "selected" && (gt(r.type) || _t(r.type)) ? this.enterEditMode(r.id) : r && r.id === this.selectedFeatureId && this.editState === "editing" || (r ? (this.selectedFeatureId = r.id, this.editState = $(r.type) ? "editing" : "selected", this.editState === "selected" ? this.helpText = "Click again to edit vertices." : $(r.type) && (this.helpText = "Drag to move point."), this.updateSelectedSource(), this.updateEditHandles(), this.requestUpdate()) : this.editState === "editing" ? (this.editState = "selected", this.updateEditHandles(), this.requestUpdate()) : (this.selectedFeatureId = null, this.editState = "none", this.updateSelectedSource(), this.updateEditHandles(), this.requestUpdate()));
 			}
 		}
 	}
@@ -3577,11 +3597,11 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 		return this.computeSnapExcluding(e, null, this.mode === "draw-point");
 	}
 	computeSnapExcluding(e, t, n) {
-		return this.adapter ? Ye(e, this.features.filter((e) => e.id !== t && !(n && $(e.type))), (e) => {
+		return this.adapter ? nt(e, this.features.filter((e) => e.id !== t && !(n && $(e.type))), (e) => {
 			let t = this.adapter.project(e);
 			return [t[0], t[1]];
 		}, {
-			threshold: ct,
+			threshold: mt,
 			edgePenalty: 8
 		}) : null;
 	}
@@ -3626,13 +3646,13 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			});
 		}
 		this.dispatch("webmapx-set-source-data", {
-			id: V,
+			id: B,
 			data: {
 				type: "FeatureCollection",
 				features: e
 			}
 		}), this.dispatch("webmapx-set-source-data", {
-			id: K,
+			id: G,
 			data: {
 				type: "FeatureCollection",
 				features: t
@@ -3666,7 +3686,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			properties: {}
 		}] : [];
 		this.dispatch("webmapx-set-source-data", {
-			id: G,
+			id: W,
 			data: {
 				type: "FeatureCollection",
 				features: t
@@ -3772,7 +3792,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 		});
 	}
 	findHandleAt(e) {
-		let t = null, n = ot;
+		let t = null, n = ft;
 		for (let r of this.editHandles) {
 			let i = this.adapter.project(r.coords), a = Math.hypot(e[0] - i[0], e[1] - i[1]);
 			a < n && (n = a, t = r);
@@ -3967,7 +3987,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			};
 			this.downloadBlob(new Blob([JSON.stringify(t, null, 2)], { type: "application/json" }), `${e}.geojson`);
 		} else {
-			let t = new de(new ue("application/zip"));
+			let t = new xe(new be("application/zip"));
 			for (let e of this.drawLayers) {
 				let n = {
 					type: "FeatureCollection",
@@ -3981,7 +4001,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 						properties: { ...e.properties }
 					}))
 				}, r = e.name.replace(/[/\\?%*:|"<>]/g, "_");
-				await t.add(`${r}.geojson`, new le(JSON.stringify(n, null, 2)));
+				await t.add(`${r}.geojson`, new ye(JSON.stringify(n, null, 2)));
 			}
 			this.downloadBlob(await t.close(), `${e}.zip`);
 		}
@@ -4114,7 +4134,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 	}
 	render() {
 		let e = this.features.find((e) => e.id === this.selectedFeatureId), t = e ? this.drawLayers.find((t) => t.id === e.layerId) : null;
-		return g`
+		return d`
             <div class="toolbar">
                 <sl-tooltip content="Select">
                     <sl-icon-button name="cursor"
@@ -4186,7 +4206,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
             <div class="scroll-content">
             <div class="help">${this.helpText}</div>
 
-            ${this.isTouchDevice && (this.mode === "draw-line" || this.mode === "draw-polygon") && this.draftPoints.length >= (this.mode === "draw-line" ? 2 : 3) ? g`
+            ${this.isTouchDevice && (this.mode === "draw-line" || this.mode === "draw-polygon") && this.draftPoints.length >= (this.mode === "draw-line" ? 2 : 3) ? d`
                 <sl-button size="small" variant="primary" style="margin-bottom:.4rem;width:100%"
                     @click=${() => {
 			let e = Q(this.mode), t = e ? this.activeLayerIds[e] : null;
@@ -4196,17 +4216,17 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
                 </sl-button>
             ` : ""}
 
-            ${this.drawLayers.length > 0 ? g`
+            ${this.drawLayers.length > 0 ? d`
                 <div class="layers-section">
                     <div class="section-label">Editing</div>
-                    ${this.drawLayers.map((e) => g`
+                    ${this.drawLayers.map((e) => d`
                         <div class="layer-row" title="Click to change layer"
                              @click=${() => this.openLayerDialog(e.type === "Point" ? "draw-point" : e.type === "LineString" ? "draw-line" : "draw-polygon")}>
                             <span class="color-dot" style="background:${e.color}"></span>
                             <span class="layer-name">${e.name}</span>
                             <span class="layer-type">${e.type === "LineString" ? "Line" : e.type}</span>
                             <small style="color:var(--sl-color-neutral-400);font-size:.7rem">${this.features.filter((t) => t.layerId === e.id).length}</small>
-                            ${this.drawLayers.length > 1 ? g`
+                            ${this.drawLayers.length > 1 ? d`
                                 <sl-tooltip content="Stop editing">
                                     <sl-icon-button name="x" class="remove-layer-btn"
                                         @click=${(t) => {
@@ -4220,9 +4240,9 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
                 </div>
             ` : ""}
 
-            ${e && t ? g`
+            ${e && t ? d`
                 <div class="section-label" style="margin-top:.5rem">Selected: ${t.name}</div>
-                ${t.properties.map((n) => g`
+                ${t.properties.map((n) => d`
                     <div class="prop-row">
                         <span class="prop-label">${n.name}</span>
                         ${n.name === "id" || [
@@ -4233,26 +4253,26 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
 			"length",
 			"create-time",
 			"update-time"
-		].includes(n.type) ? g`<span class="prop-value" style="color:var(--sl-color-neutral-400);font-style:italic;padding:0 0.3rem">${["create-time", "update-time"].includes(n.type) ? e.properties[n.name] ? new Date(e.properties[n.name]).toLocaleString() : "—" : e.properties[n.name] ?? "—"}</span>` : n.type === "imageURL" ? g`<div class="prop-url-wrap">
+		].includes(n.type) ? d`<span class="prop-value" style="color:var(--sl-color-neutral-400);font-style:italic;padding:0 0.3rem">${["create-time", "update-time"].includes(n.type) ? e.properties[n.name] ? new Date(e.properties[n.name]).toLocaleString() : "—" : e.properties[n.name] ?? "—"}</span>` : n.type === "imageURL" ? d`<div class="prop-url-wrap">
                                         <sl-input size="small"
                                             .value=${String(e.properties[n.name] ?? "")}
                                             placeholder="image URL"
                                             @sl-change=${(r) => {
 			e.properties[n.name] = r.target.value, t && this.computeSpecialProperties(e, t), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
 		}}></sl-input>
-                                        ${e.properties[n.name] ? g`<img class="prop-img" src=${String(e.properties[n.name])} @error=${(e) => {
+                                        ${e.properties[n.name] ? d`<img class="prop-img" src=${String(e.properties[n.name])} @error=${(e) => {
 			let t = e.target, n = document.createElement("span");
 			n.className = "prop-img-error", n.textContent = "⚠ invalid image", t.replaceWith(n);
 		}}>` : ""}
-                                       </div>` : n.type === "linkURL" ? g`<div class="prop-url-wrap">
+                                       </div>` : n.type === "linkURL" ? d`<div class="prop-url-wrap">
                                             <sl-input size="small"
                                                 .value=${String(e.properties[n.name] ?? "")}
                                                 placeholder="link URL"
                                                 @sl-change=${(r) => {
 			e.properties[n.name] = r.target.value, t && this.computeSpecialProperties(e, t), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
 		}}></sl-input>
-                                            ${e.properties[n.name] ? g`<a class="prop-link" href=${String(e.properties[n.name])} target="_blank" rel="noopener noreferrer">${e.properties[n.name]}</a>` : ""}
-                                           </div>` : g`<sl-input size="small" class="prop-value"
+                                            ${e.properties[n.name] ? d`<a class="prop-link" href=${String(e.properties[n.name])} target="_blank" rel="noopener noreferrer">${e.properties[n.name]}</a>` : ""}
+                                           </div>` : d`<sl-input size="small" class="prop-value"
                                             .value=${String(e.properties[n.name] ?? "")}
                                             @sl-change=${(r) => {
 			e.properties[n.name] = r.target.value, t && this.computeSpecialProperties(e, t), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
@@ -4278,7 +4298,7 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
                         <span slot="suffix">${this.exportMode === "separate" ? ".zip" : ".geojson"}</span>
                     </sl-input>
                 </div>
-                ${this.drawLayers.length > 1 ? g`
+                ${this.drawLayers.length > 1 ? d`
                     <div style="margin-top:.6rem">
                         <sl-radio-group label="Export as" .value=${this.exportMode}
                             @sl-change=${(e) => {
@@ -4295,20 +4315,20 @@ var W = "#888888", $e = "#ff3b30", et = 10, G = "webmapx-draw-sel-source", tt =
         `;
 	}
 };
-a([y()], Z.prototype, "mode", void 0), a([y()], Z.prototype, "drawLayers", void 0), a([y()], Z.prototype, "features", void 0), a([y()], Z.prototype, "selectedFeatureId", void 0), a([y()], Z.prototype, "helpText", void 0), a([y()], Z.prototype, "pendingMode", void 0), a([y()], Z.prototype, "uiVersion", void 0), a([y()], Z.prototype, "isTouchDevice", void 0), a([y()], Z.prototype, "snapEnabled", void 0), a([y()], Z.prototype, "altActive", void 0), a([y()], Z.prototype, "editState", void 0), a([v("webmapx-draw-layer-dialog")], Z.prototype, "layerDialog", void 0), a([v("#export-dialog")], Z.prototype, "exportDialog", void 0), a([y()], Z.prototype, "exportFilename", void 0), a([y()], Z.prototype, "exportMode", void 0), Z = a([ge("webmapx-draw-tool")], Z);
+m([s()], Z.prototype, "mode", void 0), m([s()], Z.prototype, "drawLayers", void 0), m([s()], Z.prototype, "features", void 0), m([s()], Z.prototype, "selectedFeatureId", void 0), m([s()], Z.prototype, "helpText", void 0), m([s()], Z.prototype, "pendingMode", void 0), m([s()], Z.prototype, "uiVersion", void 0), m([s()], Z.prototype, "isTouchDevice", void 0), m([s()], Z.prototype, "snapEnabled", void 0), m([s()], Z.prototype, "altActive", void 0), m([s()], Z.prototype, "editState", void 0), m([l("webmapx-draw-layer-dialog")], Z.prototype, "layerDialog", void 0), m([l("#export-dialog")], Z.prototype, "exportDialog", void 0), m([s()], Z.prototype, "exportFilename", void 0), m([s()], Z.prototype, "exportMode", void 0), Z = m([u("webmapx-draw-tool")], Z);
 function Q(e) {
 	return e === "draw-point" ? "Point" : e === "draw-line" ? "LineString" : e === "draw-polygon" ? "Polygon" : null;
 }
-function lt(e) {
+function ht(e) {
 	return e === "Point" || e === "MultiPoint" || e === "LineString" || e === "MultiLineString" || e === "Polygon" || e === "MultiPolygon";
 }
 function $(e) {
 	return e === "Point" || e === "MultiPoint";
 }
-function ut(e) {
+function gt(e) {
 	return e === "LineString" || e === "MultiLineString";
 }
-function dt(e) {
+function _t(e) {
 	return e === "Polygon" || e === "MultiPolygon";
 }
 //#endregion