@edugis-org/webmapx 0.1.7 → 0.1.8

package/dist-lib/webmapx-draw-tool-DooAV8cF.js

@@ -1,4336 +0,0 @@
-import { t as e } from "./decorate-CWgUV1hU.js";
-import { a as t, i as n, n as r, o as i, r as a } from "./decorators-B35AgiCU.js";
-import { a as o, i as s, o as c, s as l, t as u } from "./chunk.AJ3ENQ5C-Ci7Gm2b6.js";
-import { a as d, d as f, f as p, l as m, t as ee, u as h } from "./chunk.YHLNUJ7P-D-kanrCf.js";
-import { a as g, c as te, n as _, o as ne, s as re, t as ie } from "./chunk.NYIIDP5N-BikXIStD.js";
-import { t as ae } from "./chunk.6CTB5ZDJ-DjZrBd6Y.js";
-import "./icon-CEOgWlro.js";
-import "./chunk.36O46B5H-B6ZL7Sm1.js";
-import { i as oe, n as se, r as ce, t as le } from "./chunk.3RPBFEDE-BFO1fHVm.js";
-import { t as ue } from "./button-DFdGkRPQ.js";
-import { r as de, t as fe } from "./input-CeGntPlT.js";
-import { t as pe } from "./chunk.SI4ACBFK-CLb9VfMG.js";
-import { t as v } from "./tooltip-Cucn1SiD.js";
-import { t as me } from "./chunk.5JY5FUCG-DTXsslmx.js";
-import { n as he, t as ge } from "./icon-button-Da_nBTy3.js";
-import { a as _e, i as ve, t as ye } from "./zip.js-DVhmtjxZ.js";
-import { t as be } from "./webmapx-modal-tool-eF6Naluv.js";
-import "./option-CBxl1mZP.js";
-import { r as xe } from "./map-layer-registry-2cmkiRDK.js";
-import { LitElement as Se, css as y, html as b } from "lit";
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.B63YXDJO.js
-var Ce = y`
-  :host {
-    display: block;
-  }
-
-  .form-control {
-    position: relative;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .form-control__label {
-    padding: 0;
-  }
-
-  .radio-group--required .radio-group__label::after {
-    content: var(--sl-input-required-content);
-    margin-inline-start: var(--sl-input-required-content-offset);
-  }
-
-  .visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-`, we = y`
-  :host {
-    display: inline-block;
-  }
-
-  .button-group {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-`, x = class extends m {
-	constructor() {
-		super(...arguments), this.disableRole = !1, this.label = "";
-	}
-	handleFocus(e) {
-		S(e.target)?.toggleAttribute("data-sl-button-group__button--focus", !0);
-	}
-	handleBlur(e) {
-		S(e.target)?.toggleAttribute("data-sl-button-group__button--focus", !1);
-	}
-	handleMouseOver(e) {
-		S(e.target)?.toggleAttribute("data-sl-button-group__button--hover", !0);
-	}
-	handleMouseOut(e) {
-		S(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 = S(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 b`
-      <div
-        part="base"
-        class="button-group"
-        role="${this.disableRole ? "presentation" : "group"}"
-        aria-label=${this.label}
-        @focusout=${this.handleBlur}
-        @focusin=${this.handleFocus}
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-	}
-};
-x.styles = [h, we], p([r("slot")], x.prototype, "defaultSlot", 2), p([n()], x.prototype, "disableRole", 2), p([t()], x.prototype, "label", 2);
-function S(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 C = class extends m {
-	constructor() {
-		super(...arguments), this.formControlController = new le(this), this.hasSlotController = new ie(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 ? oe : ce : se;
-	}
-	get validationMessage() {
-		let e = this.required && !this.value;
-		return this.customValidityMessage === "" ? e ? this.validationInput.validationMessage : "" : this.customValidityMessage;
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.defaultValue = this.value;
-	}
-	firstUpdated() {
-		this.formControlController.updateValidity();
-	}
-	getAllRadios() {
-		return [...this.querySelectorAll("sl-radio, sl-radio-button")];
-	}
-	handleRadioClick(e) {
-		let t = e.target.closest("sl-radio, sl-radio-button"), n = this.getAllRadios(), r = this.value;
-		!t || t.disabled || (this.value = t.value, n.forEach((e) => e.checked = e === t), this.value !== r && (this.emit("sl-change"), this.emit("sl-input")));
-	}
-	handleKeyDown(e) {
-		if (![
-			"ArrowUp",
-			"ArrowDown",
-			"ArrowLeft",
-			"ArrowRight",
-			" "
-		].includes(e.key)) return;
-		let t = this.getAllRadios().filter((e) => !e.disabled), n = t.find((e) => e.checked) ?? t[0], r = e.key === " " ? 0 : ["ArrowUp", "ArrowLeft"].includes(e.key) ? -1 : 1, i = this.value, a = t.indexOf(n) + r;
-		a < 0 && (a = t.length - 1), a > t.length - 1 && (a = 0), this.getAllRadios().forEach((e) => {
-			e.checked = !1, this.hasButtonGroup || e.setAttribute("tabindex", "-1");
-		}), this.value = t[a].value, t[a].checked = !0, this.hasButtonGroup ? t[a].shadowRoot.querySelector("button").focus() : (t[a].setAttribute("tabindex", "0"), t[a].focus()), this.value !== i && (this.emit("sl-change"), this.emit("sl-input")), e.preventDefault();
-	}
-	handleLabelClick() {
-		this.focus();
-	}
-	handleInvalid(e) {
-		this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(e);
-	}
-	async syncRadioElements() {
-		let e = this.getAllRadios();
-		if (await Promise.all(e.map(async (e) => {
-			await e.updateComplete, e.checked = e.value === this.value, e.size = this.size;
-		})), this.hasButtonGroup = e.some((e) => e.tagName.toLowerCase() === "sl-radio-button"), e.length > 0 && !e.some((e) => e.checked)) if (this.hasButtonGroup) {
-			let t = e[0].shadowRoot?.querySelector("button");
-			t && t.setAttribute("tabindex", "0");
-		} else e[0].setAttribute("tabindex", "0");
-		if (this.hasButtonGroup) {
-			let e = this.shadowRoot?.querySelector("sl-button-group");
-			e && (e.disableRole = !0);
-		}
-	}
-	syncRadios() {
-		if (customElements.get("sl-radio") && customElements.get("sl-radio-button")) {
-			this.syncRadioElements();
-			return;
-		}
-		customElements.get("sl-radio") ? this.syncRadioElements() : customElements.whenDefined("sl-radio").then(() => this.syncRadios()), customElements.get("sl-radio-button") ? this.syncRadioElements() : customElements.whenDefined("sl-radio-button").then(() => this.syncRadios());
-	}
-	updateCheckedRadio() {
-		this.getAllRadios().forEach((e) => e.checked = e.value === this.value), this.formControlController.setValidity(this.validity.valid);
-	}
-	handleSizeChange() {
-		this.syncRadios();
-	}
-	handleValueChange() {
-		this.hasUpdated && this.updateCheckedRadio();
-	}
-	checkValidity() {
-		let e = this.required && !this.value, t = this.customValidityMessage !== "";
-		return e || t ? (this.formControlController.emitInvalidEvent(), !1) : !0;
-	}
-	getForm() {
-		return this.formControlController.getForm();
-	}
-	reportValidity() {
-		let e = this.validity.valid;
-		return this.errorMessage = this.customValidityMessage || e ? "" : this.validationInput.validationMessage, this.formControlController.setValidity(e), this.validationInput.hidden = !0, clearTimeout(this.validationTimeout), e || (this.validationInput.hidden = !1, this.validationInput.reportValidity(), this.validationTimeout = setTimeout(() => this.validationInput.hidden = !0, 1e4)), e;
-	}
-	setCustomValidity(e = "") {
-		this.customValidityMessage = e, this.errorMessage = e, this.validationInput.setCustomValidity(e), this.formControlController.updateValidity();
-	}
-	focus(e) {
-		let t = this.getAllRadios(), n = t.find((e) => e.checked), r = t.find((e) => !e.disabled), i = n || r;
-		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 = b`
-      <slot @slotchange=${this.syncRadios} @click=${this.handleRadioClick} @keydown=${this.handleKeyDown}></slot>
-    `;
-		return b`
-      <fieldset
-        part="form-control"
-        class=${g({
-			"form-control": !0,
-			"form-control--small": this.size === "small",
-			"form-control--medium": this.size === "medium",
-			"form-control--large": this.size === "large",
-			"form-control--radio-group": !0,
-			"form-control--has-label": n,
-			"form-control--has-help-text": r
-		})}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="help-text"
-        aria-errormessage="error-message"
-      >
-        <label
-          part="form-control-label"
-          id="label"
-          class="form-control__label"
-          aria-hidden=${n ? "false" : "true"}
-          @click=${this.handleLabelClick}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <div part="form-control-input" class="form-control-input">
-          <div class="visually-hidden">
-            <div id="error-message" aria-live="assertive">${this.errorMessage}</div>
-            <label class="radio-group__validation">
-              <input
-                type="text"
-                class="radio-group__validation-input"
-                ?required=${this.required}
-                tabindex="-1"
-                hidden
-                @invalid=${this.handleInvalid}
-              />
-            </label>
-          </div>
-
-          ${this.hasButtonGroup ? b`
-                <sl-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
-                  ${i}
-                </sl-button-group>
-              ` : i}
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${r ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </fieldset>
-    `;
-	}
-};
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.2PCBEMQZ.js
-C.styles = [
-	h,
-	pe,
-	Ce
-], C.dependencies = { "sl-button-group": x }, p([r("slot:not([name])")], C.prototype, "defaultSlot", 2), p([r(".radio-group__validation-input")], C.prototype, "validationInput", 2), p([n()], C.prototype, "hasButtonGroup", 2), p([n()], C.prototype, "errorMessage", 2), p([n()], C.prototype, "defaultValue", 2), p([t()], C.prototype, "label", 2), p([t({ attribute: "help-text" })], C.prototype, "helpText", 2), p([t()], C.prototype, "name", 2), p([t({ reflect: !0 })], C.prototype, "value", 2), p([t({ reflect: !0 })], C.prototype, "size", 2), p([t({ reflect: !0 })], C.prototype, "form", 2), p([t({
-	type: Boolean,
-	reflect: !0
-})], C.prototype, "required", 2), p([f("size", { waitUntilFirstUpdate: !0 })], C.prototype, "handleSizeChange", 1), p([f("value")], C.prototype, "handleValueChange", 1), C.define("sl-radio-group");
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.FKMWLPHV.js
-var Te = y`
-  :host {
-    display: block;
-  }
-
-  :host(:focus-visible) {
-    outline: 0px;
-  }
-
-  .radio {
-    display: inline-flex;
-    align-items: top;
-    font-family: var(--sl-input-font-family);
-    font-size: var(--sl-input-font-size-medium);
-    font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-label-color);
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .radio--small {
-    --toggle-size: var(--sl-toggle-size-small);
-    font-size: var(--sl-input-font-size-small);
-  }
-
-  .radio--medium {
-    --toggle-size: var(--sl-toggle-size-medium);
-    font-size: var(--sl-input-font-size-medium);
-  }
-
-  .radio--large {
-    --toggle-size: var(--sl-toggle-size-large);
-    font-size: var(--sl-input-font-size-large);
-  }
-
-  .radio__checked-icon {
-    display: inline-flex;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-  }
-
-  .radio__control {
-    flex: 0 0 auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
-    border-radius: 50%;
-    background-color: var(--sl-input-background-color);
-    color: transparent;
-    transition:
-      var(--sl-transition-fast) border-color,
-      var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color,
-      var(--sl-transition-fast) box-shadow;
-  }
-
-  .radio__input {
-    position: absolute;
-    opacity: 0;
-    padding: 0;
-    margin: 0;
-    pointer-events: none;
-  }
-
-  /* Hover */
-  .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-input-border-color-hover);
-    background-color: var(--sl-input-background-color-hover);
-  }
-
-  /* Checked */
-  .radio--checked .radio__control {
-    color: var(--sl-color-neutral-0);
-    border-color: var(--sl-color-primary-600);
-    background-color: var(--sl-color-primary-600);
-  }
-
-  /* Checked + hover */
-  .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
-  }
-
-  /* Checked + focus */
-  :host(:focus-visible) .radio__control {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  /* Disabled */
-  .radio--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
-  .radio:not(.radio--checked) svg circle {
-    opacity: 0;
-  }
-
-  .radio__label {
-    display: inline-block;
-    color: var(--sl-input-label-color);
-    line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-`, w = class extends m {
-	constructor() {
-		super(), this.checked = !1, this.hasFocus = !1, this.size = "medium", this.disabled = !1, this.handleBlur = () => {
-			this.hasFocus = !1, this.emit("sl-blur");
-		}, this.handleClick = () => {
-			this.disabled || (this.checked = !0);
-		}, this.handleFocus = () => {
-			this.hasFocus = !0, this.emit("sl-focus");
-		}, this.addEventListener("blur", this.handleBlur), this.addEventListener("click", this.handleClick), this.addEventListener("focus", this.handleFocus);
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.setInitialAttributes();
-	}
-	setInitialAttributes() {
-		this.setAttribute("role", "radio"), this.setAttribute("tabindex", "-1"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-	}
-	handleCheckedChange() {
-		this.setAttribute("aria-checked", this.checked ? "true" : "false"), this.setAttribute("tabindex", this.checked ? "0" : "-1");
-	}
-	handleDisabledChange() {
-		this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-	}
-	render() {
-		return b`
-      <span
-        part="base"
-        class=${g({
-			radio: !0,
-			"radio--checked": this.checked,
-			"radio--disabled": this.disabled,
-			"radio--focused": this.hasFocus,
-			"radio--small": this.size === "small",
-			"radio--medium": this.size === "medium",
-			"radio--large": this.size === "large"
-		})}
-      >
-        <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
-          ${this.checked ? b` <sl-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></sl-icon> ` : ""}
-        </span>
-
-        <slot part="label" class="radio__label"></slot>
-      </span>
-    `;
-	}
-};
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.MSKEYBDI.js
-w.styles = [h, Te], w.dependencies = { "sl-icon": ee }, p([n()], w.prototype, "checked", 2), p([n()], w.prototype, "hasFocus", 2), p([t()], w.prototype, "value", 2), p([t({ reflect: !0 })], w.prototype, "size", 2), p([t({
-	type: Boolean,
-	reflect: !0
-})], w.prototype, "disabled", 2), p([f("checked")], w.prototype, "handleCheckedChange", 1), p([f("disabled", { waitUntilFirstUpdate: !0 })], w.prototype, "handleDisabledChange", 1), w.define("sl-radio");
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.YKKSQ2FG.js
-var Ee = y`
-  :host(:not(:focus-within)) {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    clip: rect(0 0 0 0) !important;
-    clip-path: inset(50%) !important;
-    border: none !important;
-    overflow: hidden !important;
-    white-space: nowrap !important;
-    padding: 0 !important;
-  }
-`, De = class extends m {
-	render() {
-		return b` <slot></slot> `;
-	}
-};
-De.styles = [h, Ee];
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.ESELY2US.js
-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);
-	}
-	function r() {
-		document.removeEventListener("pointermove", n), document.removeEventListener("pointerup", r), t?.onStop && t.onStop();
-	}
-	document.addEventListener("pointermove", n, { passive: !0 }), document.addEventListener("pointerup", r), t?.initialEvent instanceof PointerEvent && n(t.initialEvent);
-}
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.LXP7GVU3.js
-var Oe = y`
-  :host {
-    display: inline-block;
-  }
-
-  .dropdown::part(popup) {
-    z-index: var(--sl-z-index-dropdown);
-  }
-
-  .dropdown[data-current-placement^='top']::part(popup) {
-    transform-origin: bottom;
-  }
-
-  .dropdown[data-current-placement^='bottom']::part(popup) {
-    transform-origin: top;
-  }
-
-  .dropdown[data-current-placement^='left']::part(popup) {
-    transform-origin: right;
-  }
-
-  .dropdown[data-current-placement^='right']::part(popup) {
-    transform-origin: left;
-  }
-
-  .dropdown__trigger {
-    display: block;
-  }
-
-  .dropdown__panel {
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    box-shadow: var(--sl-shadow-large);
-    border-radius: var(--sl-border-radius-medium);
-    pointer-events: none;
-  }
-
-  .dropdown--open .dropdown__panel {
-    display: block;
-    pointer-events: all;
-  }
-
-  /* When users slot a menu, make sure it conforms to the popup's auto-size */
-  ::slotted(sl-menu) {
-    max-width: var(--auto-size-available-width) !important;
-    max-height: var(--auto-size-available-height) !important;
-  }
-`, E = class extends m {
-	constructor() {
-		super(...arguments), this.localize = new ae(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) {
-				e.stopPropagation(), this.focusOnTrigger(), this.hide();
-				return;
-			}
-			if (e.key === "Tab") {
-				if (this.open && document.activeElement?.tagName.toLowerCase() === "sl-menu-item") {
-					e.preventDefault(), this.hide(), this.focusOnTrigger();
-					return;
-				}
-				let t = (e, n) => {
-					if (!e) return null;
-					let r = e.closest(n);
-					if (r) return r;
-					let i = e.getRootNode();
-					return i instanceof ShadowRoot ? t(i.host, n) : null;
-				};
-				setTimeout(() => {
-					let e = this.containingElement?.getRootNode() instanceof ShadowRoot ? ge() : document.activeElement;
-					(!this.containingElement || t(e, this.containingElement.tagName.toLowerCase()) !== this.containingElement) && this.hide();
-				});
-			}
-		}, this.handleDocumentMouseDown = (e) => {
-			let t = e.composedPath();
-			this.containingElement && !t.includes(this.containingElement) && this.hide();
-		}, this.handlePanelSelect = (e) => {
-			let t = e.target;
-			!this.stayOpenOnSelect && t.tagName.toLowerCase() === "sl-menu" && (this.hide(), this.focusOnTrigger());
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.containingElement ||= this;
-	}
-	firstUpdated() {
-		this.panel.hidden = !this.open, this.open && (this.addOpenListeners(), this.popup.active = !0);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeOpenListeners(), this.hide();
-	}
-	focusOnTrigger() {
-		let e = this.trigger.assignedElements({ flatten: !0 })[0];
-		typeof e?.focus == "function" && e.focus();
-	}
-	getMenu() {
-		return this.panel.assignedElements({ flatten: !0 }).find((e) => e.tagName.toLowerCase() === "sl-menu");
-	}
-	handleTriggerClick() {
-		this.open ? this.hide() : (this.show(), this.focusOnTrigger());
-	}
-	async handleTriggerKeyDown(e) {
-		if ([" ", "Enter"].includes(e.key)) {
-			e.preventDefault(), this.handleTriggerClick();
-			return;
-		}
-		let t = this.getMenu();
-		if (t) {
-			let n = t.getAllItems(), r = n[0], i = n[n.length - 1];
-			[
-				"ArrowDown",
-				"ArrowUp",
-				"Home",
-				"End"
-			].includes(e.key) && (e.preventDefault(), this.open || (this.show(), await this.updateComplete), n.length > 0 && this.updateComplete.then(() => {
-				(e.key === "ArrowDown" || e.key === "Home") && (t.setCurrentItem(r), r.focus()), (e.key === "ArrowUp" || e.key === "End") && (t.setCurrentItem(i), i.focus());
-			}));
-		}
-	}
-	handleTriggerKeyUp(e) {
-		e.key === " " && e.preventDefault();
-	}
-	handleTriggerSlotChange() {
-		this.updateAccessibleTrigger();
-	}
-	updateAccessibleTrigger() {
-		let e = this.trigger.assignedElements({ flatten: !0 }).find((e) => he(e).start), t;
-		if (e) {
-			switch (e.tagName.toLowerCase()) {
-				case "sl-button":
-				case "sl-icon-button":
-					t = e.button;
-					break;
-				default: t = e;
-			}
-			t.setAttribute("aria-haspopup", "true"), t.setAttribute("aria-expanded", this.open ? "true" : "false");
-		}
-	}
-	async show() {
-		if (!this.open) return this.open = !0, o(this, "sl-after-show");
-	}
-	async hide() {
-		if (this.open) return this.open = !1, o(this, "sl-after-hide");
-	}
-	reposition() {
-		this.popup.reposition();
-	}
-	addOpenListeners() {
-		var e;
-		this.panel.addEventListener("sl-select", this.handlePanelSelect), "CloseWatcher" in window ? ((e = this.closeWatcher) == null || e.destroy(), this.closeWatcher = new CloseWatcher(), this.closeWatcher.onclose = () => {
-			this.hide(), this.focusOnTrigger();
-		}) : this.panel.addEventListener("keydown", this.handleKeyDown), document.addEventListener("keydown", this.handleDocumentKeyDown), document.addEventListener("mousedown", this.handleDocumentMouseDown);
-	}
-	removeOpenListeners() {
-		var e;
-		this.panel && (this.panel.removeEventListener("sl-select", this.handlePanelSelect), this.panel.removeEventListener("keydown", this.handleKeyDown)), document.removeEventListener("keydown", this.handleDocumentKeyDown), document.removeEventListener("mousedown", this.handleDocumentMouseDown), (e = this.closeWatcher) == null || e.destroy();
-	}
-	async handleOpenChange() {
-		if (this.disabled) {
-			this.open = !1;
-			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");
-		} 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");
-		}
-	}
-	render() {
-		return b`
-      <sl-popup
-        part="base"
-        exportparts="popup:base__popup"
-        id="dropdown"
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? "fixed" : "absolute"}
-        flip
-        shift
-        auto-size="vertical"
-        auto-size-padding="10"
-        sync=${_(this.sync ? this.sync : void 0)}
-        class=${g({
-			dropdown: !0,
-			"dropdown--open": this.open
-		})}
-      >
-        <slot
-          name="trigger"
-          slot="anchor"
-          part="trigger"
-          class="dropdown__trigger"
-          @click=${this.handleTriggerClick}
-          @keydown=${this.handleTriggerKeyDown}
-          @keyup=${this.handleTriggerKeyUp}
-          @slotchange=${this.handleTriggerSlotChange}
-        ></slot>
-
-        <div aria-hidden=${this.open ? "false" : "true"} aria-labelledby="dropdown">
-          <slot part="panel" class="dropdown__panel"></slot>
-        </div>
-      </sl-popup>
-    `;
-	}
-};
-E.styles = [h, Oe], E.dependencies = { "sl-popup": me }, p([r(".dropdown")], E.prototype, "popup", 2), p([r(".dropdown__trigger")], E.prototype, "trigger", 2), p([r(".dropdown__panel")], E.prototype, "panel", 2), p([t({
-	type: Boolean,
-	reflect: !0
-})], E.prototype, "open", 2), p([t({ reflect: !0 })], E.prototype, "placement", 2), p([t({
-	type: Boolean,
-	reflect: !0
-})], E.prototype, "disabled", 2), p([t({
-	attribute: "stay-open-on-select",
-	type: Boolean,
-	reflect: !0
-})], E.prototype, "stayOpenOnSelect", 2), p([t({ attribute: !1 })], E.prototype, "containingElement", 2), p([t({ type: Number })], E.prototype, "distance", 2), p([t({ type: Number })], E.prototype, "skidding", 2), p([t({ type: Boolean })], E.prototype, "hoist", 2), p([t({ reflect: !0 })], E.prototype, "sync", 2), p([f("open", { waitUntilFirstUpdate: !0 })], E.prototype, "handleOpenChange", 1), l("dropdown.show", {
-	keyframes: [{
-		opacity: 0,
-		scale: .9
-	}, {
-		opacity: 1,
-		scale: 1
-	}],
-	options: {
-		duration: 100,
-		easing: "ease"
-	}
-}), l("dropdown.hide", {
-	keyframes: [{
-		opacity: 1,
-		scale: 1
-	}, {
-		opacity: 0,
-		scale: .9
-	}],
-	options: {
-		duration: 100,
-		easing: "ease"
-	}
-});
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.O6CEROC7.js
-var ke = y`
-  :host {
-    --grid-width: 280px;
-    --grid-height: 200px;
-    --grid-handle-size: 16px;
-    --slider-height: 15px;
-    --slider-handle-size: 17px;
-    --swatch-size: 25px;
-
-    display: inline-block;
-  }
-
-  .color-picker {
-    width: var(--grid-width);
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--color);
-    background-color: var(--sl-panel-background-color);
-    border-radius: var(--sl-border-radius-medium);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .color-picker--inline {
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-  }
-
-  .color-picker--inline:focus-visible {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  .color-picker__grid {
-    position: relative;
-    height: var(--grid-height);
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
-      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-    border-top-left-radius: var(--sl-border-radius-medium);
-    border-top-right-radius: var(--sl-border-radius-medium);
-    cursor: crosshair;
-    forced-color-adjust: none;
-  }
-
-  .color-picker__grid-handle {
-    position: absolute;
-    width: var(--grid-handle-size);
-    height: var(--grid-handle-size);
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-    border: solid 2px white;
-    margin-top: calc(var(--grid-handle-size) / -2);
-    margin-left: calc(var(--grid-handle-size) / -2);
-    transition: var(--sl-transition-fast) scale;
-  }
-
-  .color-picker__grid-handle--dragging {
-    cursor: none;
-    scale: 1.5;
-  }
-
-  .color-picker__grid-handle:focus-visible {
-    outline: var(--sl-focus-ring);
-  }
-
-  .color-picker__controls {
-    padding: var(--sl-spacing-small);
-    display: flex;
-    align-items: center;
-  }
-
-  .color-picker__sliders {
-    flex: 1 1 auto;
-  }
-
-  .color-picker__slider {
-    position: relative;
-    height: var(--slider-height);
-    border-radius: var(--sl-border-radius-pill);
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-    forced-color-adjust: none;
-  }
-
-  .color-picker__slider:not(:last-of-type) {
-    margin-bottom: var(--sl-spacing-small);
-  }
-
-  .color-picker__slider-handle {
-    position: absolute;
-    top: calc(50% - var(--slider-handle-size) / 2);
-    width: var(--slider-handle-size);
-    height: var(--slider-handle-size);
-    background-color: white;
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-    margin-left: calc(var(--slider-handle-size) / -2);
-  }
-
-  .color-picker__slider-handle:focus-visible {
-    outline: var(--sl-focus-ring);
-  }
-
-  .color-picker__hue {
-    background-image: linear-gradient(
-      to right,
-      rgb(255, 0, 0) 0%,
-      rgb(255, 255, 0) 17%,
-      rgb(0, 255, 0) 33%,
-      rgb(0, 255, 255) 50%,
-      rgb(0, 0, 255) 67%,
-      rgb(255, 0, 255) 83%,
-      rgb(255, 0, 0) 100%
-    );
-  }
-
-  .color-picker__alpha .color-picker__alpha-gradient {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-  }
-
-  .color-picker__preview {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    width: 2.25rem;
-    height: 2.25rem;
-    border: none;
-    border-radius: var(--sl-border-radius-circle);
-    background: none;
-    margin-left: var(--sl-spacing-small);
-    cursor: copy;
-    forced-color-adjust: none;
-  }
-
-  .color-picker__preview:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
-
-    /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
-    background-color: var(--preview-color);
-  }
-
-  .color-picker__preview:focus-visible {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  .color-picker__preview-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: solid 1px rgba(0, 0, 0, 0.125);
-  }
-
-  .color-picker__preview-color--copied {
-    animation: pulse 0.75s;
-  }
-
-  @keyframes pulse {
-    0% {
-      box-shadow: 0 0 0 0 var(--sl-color-primary-500);
-    }
-    70% {
-      box-shadow: 0 0 0 0.5rem transparent;
-    }
-    100% {
-      box-shadow: 0 0 0 0 transparent;
-    }
-  }
-
-  .color-picker__user-input {
-    display: flex;
-    padding: 0 var(--sl-spacing-small) var(--sl-spacing-small) var(--sl-spacing-small);
-  }
-
-  .color-picker__user-input sl-input {
-    min-width: 0; /* fix input width in Safari */
-    flex: 1 1 auto;
-  }
-
-  .color-picker__user-input sl-button-group {
-    margin-left: var(--sl-spacing-small);
-  }
-
-  .color-picker__user-input sl-button {
-    min-width: 3.25rem;
-    max-width: 3.25rem;
-    font-size: 1rem;
-  }
-
-  .color-picker__swatches {
-    display: grid;
-    grid-template-columns: repeat(8, 1fr);
-    grid-gap: 0.5rem;
-    justify-items: center;
-    border-top: solid 1px var(--sl-color-neutral-200);
-    padding: var(--sl-spacing-small);
-    forced-color-adjust: none;
-  }
-
-  .color-picker__swatch {
-    position: relative;
-    width: var(--swatch-size);
-    height: var(--swatch-size);
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .color-picker__swatch .color-picker__swatch-color {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: solid 1px rgba(0, 0, 0, 0.125);
-    border-radius: inherit;
-    cursor: pointer;
-  }
-
-  .color-picker__swatch:focus-visible {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
-      linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
-    background-size: 10px 10px;
-    background-position:
-      0 0,
-      0 0,
-      -5px -5px,
-      5px 5px;
-  }
-
-  .color-picker--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .color-picker--disabled .color-picker__grid,
-  .color-picker--disabled .color-picker__grid-handle,
-  .color-picker--disabled .color-picker__slider,
-  .color-picker--disabled .color-picker__slider-handle,
-  .color-picker--disabled .color-picker__preview,
-  .color-picker--disabled .color-picker__swatch,
-  .color-picker--disabled .color-picker__swatch-color {
-    pointer-events: none;
-  }
-
-  /*
-   * Color dropdown
-   */
-
-  .color-dropdown::part(panel) {
-    max-height: none;
-    background-color: var(--sl-panel-background-color);
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-    border-radius: var(--sl-border-radius-medium);
-    overflow: visible;
-  }
-
-  .color-dropdown__trigger {
-    display: inline-block;
-    position: relative;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    forced-color-adjust: none;
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--small {
-    width: var(--sl-input-height-small);
-    height: var(--sl-input-height-small);
-    border-radius: var(--sl-border-radius-circle);
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--medium {
-    width: var(--sl-input-height-medium);
-    height: var(--sl-input-height-medium);
-    border-radius: var(--sl-border-radius-circle);
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--large {
-    width: var(--sl-input-height-large);
-    height: var(--sl-input-height-large);
-    border-radius: var(--sl-border-radius-circle);
-  }
-
-  .color-dropdown__trigger:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    background-color: currentColor;
-    box-shadow:
-      inset 0 0 0 2px var(--sl-input-border-color),
-      inset 0 0 0 4px var(--sl-color-neutral-0);
-  }
-
-  .color-dropdown__trigger--empty:before {
-    background-color: transparent;
-  }
-
-  .color-dropdown__trigger:focus-visible {
-    outline: none;
-  }
-
-  .color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  .color-dropdown__trigger.color-dropdown__trigger--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`, Ae = "important", je = " !important", D = ne(class extends re {
-	constructor(e) {
-		if (super(e), e.type !== te.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 d;
-	}
-});
-//#endregion
-//#region node_modules/@ctrl/tinycolor/dist/module/util.js
-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 k(e) {
-	return Math.min(1, Math.max(0, e));
-}
-function Me(e) {
-	return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
-}
-function Ne(e) {
-	return typeof e == "string" && e.indexOf("%") !== -1;
-}
-function Pe(e) {
-	return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
-}
-function A(e) {
-	return Number(e) <= 1 ? `${Number(e) * 100}%` : e;
-}
-function j(e) {
-	return e.length === 1 ? "0" + e : String(e);
-}
-//#endregion
-//#region node_modules/@ctrl/tinycolor/dist/module/conversion.js
-function Fe(e, t, n) {
-	return {
-		r: O(e, 255) * 255,
-		g: O(t, 255) * 255,
-		b: O(n, 255) * 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 {
-		let c = r - i;
-		switch (o = s > .5 ? c / (2 - r - i) : c / (r + i), r) {
-			case e:
-				a = (t - n) / c + (t < n ? 6 : 0);
-				break;
-			case t:
-				a = (n - e) / c + 2;
-				break;
-			case n:
-				a = (e - t) / c + 4;
-				break;
-			default: break;
-		}
-		a /= 6;
-	}
-	return {
-		h: a,
-		s: o,
-		l: s
-	};
-}
-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 Le(e, t, n) {
-	let r, i, a;
-	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 = M(s, o, e + 1 / 3), i = M(s, o, e), a = M(s, o, e - 1 / 3);
-	}
-	return {
-		r: r * 255,
-		g: i * 255,
-		b: a * 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 {
-		switch (r) {
-			case e:
-				a = (t - n) / s + (t < n ? 6 : 0);
-				break;
-			case t:
-				a = (n - e) / s + 2;
-				break;
-			case n:
-				a = (e - t) / s + 4;
-				break;
-			default: break;
-		}
-		a /= 6;
-	}
-	return {
-		h: a,
-		s: c,
-		v: o
-	};
-}
-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,
-		a,
-		a,
-		s,
-		n
-	][c], u = [
-		s,
-		n,
-		n,
-		o,
-		a,
-		a
-	][c], d = [
-		a,
-		a,
-		s,
-		n,
-		n,
-		o
-	][c];
-	return {
-		r: l * 255,
-		g: u * 255,
-		b: d * 255
-	};
-}
-function Be(e, t, n, r) {
-	let i = [
-		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 Ve(e, t, n, r, i) {
-	let a = [
-		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 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),
-		g: 255 * (1 - a) * (1 - s),
-		b: 255 * (1 - o) * (1 - s)
-	};
-}
-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),
-		m: Math.round(i),
-		y: Math.round(a),
-		k: Math.round(o)
-	};
-}
-function We(e) {
-	return Math.round(parseFloat(e) * 255).toString(16);
-}
-function Ge(e) {
-	return N(e) / 255;
-}
-function N(e) {
-	return parseInt(e, 16);
-}
-function Ke(e) {
-	return {
-		r: e >> 16,
-		g: (e & 65280) >> 8,
-		b: e & 255
-	};
-}
-//#endregion
-//#region node_modules/@ctrl/tinycolor/dist/module/css-color-names.js
-var P = {
-	aliceblue: "#f0f8ff",
-	antiquewhite: "#faebd7",
-	aqua: "#00ffff",
-	aquamarine: "#7fffd4",
-	azure: "#f0ffff",
-	beige: "#f5f5dc",
-	bisque: "#ffe4c4",
-	black: "#000000",
-	blanchedalmond: "#ffebcd",
-	blue: "#0000ff",
-	blueviolet: "#8a2be2",
-	brown: "#a52a2a",
-	burlywood: "#deb887",
-	cadetblue: "#5f9ea0",
-	chartreuse: "#7fff00",
-	chocolate: "#d2691e",
-	coral: "#ff7f50",
-	cornflowerblue: "#6495ed",
-	cornsilk: "#fff8dc",
-	crimson: "#dc143c",
-	cyan: "#00ffff",
-	darkblue: "#00008b",
-	darkcyan: "#008b8b",
-	darkgoldenrod: "#b8860b",
-	darkgray: "#a9a9a9",
-	darkgreen: "#006400",
-	darkgrey: "#a9a9a9",
-	darkkhaki: "#bdb76b",
-	darkmagenta: "#8b008b",
-	darkolivegreen: "#556b2f",
-	darkorange: "#ff8c00",
-	darkorchid: "#9932cc",
-	darkred: "#8b0000",
-	darksalmon: "#e9967a",
-	darkseagreen: "#8fbc8f",
-	darkslateblue: "#483d8b",
-	darkslategray: "#2f4f4f",
-	darkslategrey: "#2f4f4f",
-	darkturquoise: "#00ced1",
-	darkviolet: "#9400d3",
-	deeppink: "#ff1493",
-	deepskyblue: "#00bfff",
-	dimgray: "#696969",
-	dimgrey: "#696969",
-	dodgerblue: "#1e90ff",
-	firebrick: "#b22222",
-	floralwhite: "#fffaf0",
-	forestgreen: "#228b22",
-	fuchsia: "#ff00ff",
-	gainsboro: "#dcdcdc",
-	ghostwhite: "#f8f8ff",
-	goldenrod: "#daa520",
-	gold: "#ffd700",
-	gray: "#808080",
-	green: "#008000",
-	greenyellow: "#adff2f",
-	grey: "#808080",
-	honeydew: "#f0fff0",
-	hotpink: "#ff69b4",
-	indianred: "#cd5c5c",
-	indigo: "#4b0082",
-	ivory: "#fffff0",
-	khaki: "#f0e68c",
-	lavenderblush: "#fff0f5",
-	lavender: "#e6e6fa",
-	lawngreen: "#7cfc00",
-	lemonchiffon: "#fffacd",
-	lightblue: "#add8e6",
-	lightcoral: "#f08080",
-	lightcyan: "#e0ffff",
-	lightgoldenrodyellow: "#fafad2",
-	lightgray: "#d3d3d3",
-	lightgreen: "#90ee90",
-	lightgrey: "#d3d3d3",
-	lightpink: "#ffb6c1",
-	lightsalmon: "#ffa07a",
-	lightseagreen: "#20b2aa",
-	lightskyblue: "#87cefa",
-	lightslategray: "#778899",
-	lightslategrey: "#778899",
-	lightsteelblue: "#b0c4de",
-	lightyellow: "#ffffe0",
-	lime: "#00ff00",
-	limegreen: "#32cd32",
-	linen: "#faf0e6",
-	magenta: "#ff00ff",
-	maroon: "#800000",
-	mediumaquamarine: "#66cdaa",
-	mediumblue: "#0000cd",
-	mediumorchid: "#ba55d3",
-	mediumpurple: "#9370db",
-	mediumseagreen: "#3cb371",
-	mediumslateblue: "#7b68ee",
-	mediumspringgreen: "#00fa9a",
-	mediumturquoise: "#48d1cc",
-	mediumvioletred: "#c71585",
-	midnightblue: "#191970",
-	mintcream: "#f5fffa",
-	mistyrose: "#ffe4e1",
-	moccasin: "#ffe4b5",
-	navajowhite: "#ffdead",
-	navy: "#000080",
-	oldlace: "#fdf5e6",
-	olive: "#808000",
-	olivedrab: "#6b8e23",
-	orange: "#ffa500",
-	orangered: "#ff4500",
-	orchid: "#da70d6",
-	palegoldenrod: "#eee8aa",
-	palegreen: "#98fb98",
-	paleturquoise: "#afeeee",
-	palevioletred: "#db7093",
-	papayawhip: "#ffefd5",
-	peachpuff: "#ffdab9",
-	peru: "#cd853f",
-	pink: "#ffc0cb",
-	plum: "#dda0dd",
-	powderblue: "#b0e0e6",
-	purple: "#800080",
-	rebeccapurple: "#663399",
-	red: "#ff0000",
-	rosybrown: "#bc8f8f",
-	royalblue: "#4169e1",
-	saddlebrown: "#8b4513",
-	salmon: "#fa8072",
-	sandybrown: "#f4a460",
-	seagreen: "#2e8b57",
-	seashell: "#fff5ee",
-	sienna: "#a0522d",
-	silver: "#c0c0c0",
-	skyblue: "#87ceeb",
-	slateblue: "#6a5acd",
-	slategray: "#708090",
-	slategrey: "#708090",
-	snow: "#fffafa",
-	springgreen: "#00ff7f",
-	steelblue: "#4682b4",
-	tan: "#d2b48c",
-	teal: "#008080",
-	thistle: "#d8bfd8",
-	tomato: "#ff6347",
-	turquoise: "#40e0d0",
-	violet: "#ee82ee",
-	wheat: "#f5deb3",
-	white: "#ffffff",
-	whitesmoke: "#f5f5f5",
-	yellow: "#ffff00",
-	yellowgreen: "#9acd32"
-};
-//#endregion
-//#region node_modules/@ctrl/tinycolor/dist/module/format-input.js
-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 = 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)),
-		g: Math.min(255, Math.max(t.g, 0)),
-		b: Math.min(255, Math.max(t.b, 0)),
-		a: n
-	};
-}
-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*\\)?"),
-	hsl: /* @__PURE__ */ RegExp("hsl[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),
-	hsla: /* @__PURE__ */ RegExp("hsla[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),
-	hsv: /* @__PURE__ */ RegExp("hsv[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),
-	hsva: /* @__PURE__ */ RegExp("hsva[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),
-	cmyk: /* @__PURE__ */ RegExp("cmyk[\\s|\\(]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))[,|\\s]+((?:[-\\+]?\\d*\\.\\d+%?)|(?:[-\\+]?\\d+%?))\\s*\\)?"),
-	hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
-	hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
-	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 Je(e) {
-	if (e = e.trim().toLowerCase(), e.length === 0) return !1;
-	let t = !1;
-	if (P[e]) e = P[e], t = !0;
-	else if (e === "transparent") return {
-		r: 0,
-		g: 0,
-		b: 0,
-		a: 0,
-		format: "name"
-	};
-	let n = F.rgb.exec(e);
-	return n ? {
-		r: n[1],
-		g: n[2],
-		b: n[3]
-	} : (n = F.rgba.exec(e), n ? {
-		r: n[1],
-		g: n[2],
-		b: n[3],
-		a: n[4]
-	} : (n = F.hsl.exec(e), n ? {
-		h: n[1],
-		s: n[2],
-		l: n[3]
-	} : (n = F.hsla.exec(e), n ? {
-		h: n[1],
-		s: n[2],
-		l: n[3],
-		a: n[4]
-	} : (n = F.hsv.exec(e), n ? {
-		h: n[1],
-		s: n[2],
-		v: n[3]
-	} : (n = F.hsva.exec(e), n ? {
-		h: n[1],
-		s: n[2],
-		v: n[3],
-		a: n[4]
-	} : (n = F.cmyk.exec(e), n ? {
-		c: n[1],
-		m: n[2],
-		y: n[3],
-		k: 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 = F.hex6.exec(e), n ? {
-		r: N(n[1]),
-		g: N(n[2]),
-		b: N(n[3]),
-		format: t ? "name" : "hex"
-	} : (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 = 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 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 Ye = class e {
-	constructor(t = "", n = {}) {
-		if (t instanceof e) return 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() {
-		return this.getBrightness() < 128;
-	}
-	isLight() {
-		return !this.isDark();
-	}
-	getBrightness() {
-		let e = this.toRgb();
-		return (e.r * 299 + e.g * 587 + e.b * 114) / 1e3;
-	}
-	getLuminance() {
-		let e = this.toRgb(), t, n, r, i = e.r / 255, a = e.g / 255, o = e.b / 255;
-		return t = i <= .03928 ? i / 12.92 : ((i + .055) / 1.055) ** 2.4, n = a <= .03928 ? a / 12.92 : ((a + .055) / 1.055) ** 2.4, r = o <= .03928 ? o / 12.92 : ((o + .055) / 1.055) ** 2.4, .2126 * t + .7152 * n + .0722 * r;
-	}
-	getAlpha() {
-		return this.a;
-	}
-	setAlpha(e) {
-		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 = Re(this.r, this.g, this.b);
-		return {
-			h: e.h * 360,
-			s: e.s,
-			v: e.v,
-			a: this.a
-		};
-	}
-	toHsvString() {
-		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 = Ie(this.r, this.g, this.b);
-		return {
-			h: e.h * 360,
-			s: e.s,
-			l: e.l,
-			a: this.a
-		};
-	}
-	toHslString() {
-		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 Be(this.r, this.g, this.b, e);
-	}
-	toHexString(e = !1) {
-		return "#" + this.toHex(e);
-	}
-	toHex8(e = !1) {
-		return Ve(this.r, this.g, this.b, this.a, e);
-	}
-	toHex8String(e = !1) {
-		return "#" + this.toHex8(e);
-	}
-	toHexShortString(e = !1) {
-		return this.a === 1 ? this.toHexString(e) : this.toHex8String(e);
-	}
-	toRgb() {
-		return {
-			r: Math.round(this.r),
-			g: Math.round(this.g),
-			b: Math.round(this.b),
-			a: this.a
-		};
-	}
-	toRgbString() {
-		let e = Math.round(this.r), t = Math.round(this.g), n = Math.round(this.b);
-		return this.a === 1 ? `rgb(${e}, ${t}, ${n})` : `rgba(${e}, ${t}, ${n}, ${this.roundA})`;
-	}
-	toPercentageRgb() {
-		let e = (e) => `${Math.round(O(e, 255) * 100)}%`;
-		return {
-			r: e(this.r),
-			g: e(this.g),
-			b: e(this.b),
-			a: this.a
-		};
-	}
-	toPercentageRgbString() {
-		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 { ...Ue(this.r, this.g, this.b) };
-	}
-	toCmykString() {
-		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 = "#" + 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) {
-		let t = !!e;
-		e ??= this.format;
-		let n = !1, r = this.a < 1 && this.a >= 0;
-		return !t && r && (e.startsWith("hex") || e === "name") ? e === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (e === "rgb" && (n = this.toRgbString()), e === "prgb" && (n = this.toPercentageRgbString()), (e === "hex" || e === "hex6") && (n = this.toHexString()), e === "hex3" && (n = this.toHexString(!0)), e === "hex4" && (n = this.toHex8String(!0)), e === "hex8" && (n = this.toHex8String()), e === "name" && (n = this.toName()), e === "hsl" && (n = this.toHslString()), e === "hsv" && (n = this.toHsvString()), e === "cmyk" && (n = this.toCmykString()), n || this.toHexString());
-	}
-	toNumber() {
-		return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
-	}
-	clone() {
-		return new e(this.toString());
-	}
-	lighten(t = 10) {
-		let n = this.toHsl();
-		return n.l += t / 100, n.l = k(n.l), new e(n);
-	}
-	brighten(t = 10) {
-		let n = this.toRgb();
-		return n.r = Math.max(0, Math.min(255, n.r - Math.round(255 * -(t / 100)))), n.g = Math.max(0, Math.min(255, n.g - Math.round(255 * -(t / 100)))), n.b = Math.max(0, Math.min(255, n.b - Math.round(255 * -(t / 100)))), new e(n);
-	}
-	darken(t = 10) {
-		let n = this.toHsl();
-		return n.l -= t / 100, n.l = k(n.l), new e(n);
-	}
-	tint(e = 10) {
-		return this.mix("white", e);
-	}
-	shade(e = 10) {
-		return this.mix("black", e);
-	}
-	desaturate(t = 10) {
-		let n = this.toHsl();
-		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 = k(n.s), new e(n);
-	}
-	greyscale() {
-		return this.desaturate(100);
-	}
-	spin(t) {
-		let n = this.toHsl(), r = (n.h + t) % 360;
-		return n.h = r < 0 ? 360 + r : r, new e(n);
-	}
-	mix(t, n = 50) {
-		let r = this.toRgb(), i = new e(t).toRgb(), a = n / 100;
-		return new e({
-			r: (i.r - r.r) * a + r.r,
-			g: (i.g - r.g) * a + r.g,
-			b: (i.b - r.b) * a + r.b,
-			a: (i.a - r.a) * a + r.a
-		});
-	}
-	analogous(t = 6, n = 30) {
-		let r = this.toHsl(), i = 360 / n, a = [this];
-		for (r.h = (r.h - (i * t >> 1) + 720) % 360; --t;) r.h = (r.h + i) % 360, a.push(new e(r));
-		return a;
-	}
-	complement() {
-		let t = this.toHsl();
-		return t.h = (t.h + 180) % 360, new e(t);
-	}
-	monochromatic(t = 6) {
-		let n = this.toHsv(), { h: r } = n, { s: i } = n, { v: a } = n, o = [], s = 1 / t;
-		for (; t--;) o.push(new e({
-			h: r,
-			s: i,
-			v: a
-		})), a = (a + s) % 1;
-		return o;
-	}
-	splitcomplement() {
-		let t = this.toHsl(), { h: n } = t;
-		return [
-			this,
-			new e({
-				h: (n + 72) % 360,
-				s: t.s,
-				l: t.l
-			}),
-			new e({
-				h: (n + 216) % 360,
-				s: t.s,
-				l: t.l
-			})
-		];
-	}
-	onBackground(t) {
-		let n = this.toRgb(), r = new e(t).toRgb(), i = n.a + r.a * (1 - n.a);
-		return new e({
-			r: (n.r * n.a + r.r * r.a * (1 - n.a)) / i,
-			g: (n.g * n.a + r.g * r.a * (1 - n.a)) / i,
-			b: (n.b * n.a + r.b * r.a * (1 - n.a)) / i,
-			a: i
-		});
-	}
-	triad() {
-		return this.polyad(3);
-	}
-	tetrad() {
-		return this.polyad(4);
-	}
-	polyad(t) {
-		let n = this.toHsl(), { h: r } = n, i = [this], a = 360 / t;
-		for (let o = 1; o < t; o++) i.push(new e({
-			h: (r + o * a) % 360,
-			s: n.s,
-			l: n.l
-		}));
-		return i;
-	}
-	equals(t) {
-		let n = new e(t);
-		return this.format === "cmyk" || n.format === "cmyk" ? this.toCmykString() === n.toCmykString() : this.toRgbString() === n.toRgbString();
-	}
-}, Xe = "EyeDropper" in window, L = class extends m {
-	constructor() {
-		super(), this.formControlController = new le(this), this.isSafeValue = !1, this.localize = new ae(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");
-		}, this.addEventListener("focusin", this.handleFocusIn), this.addEventListener("focusout", this.handleFocusOut);
-	}
-	get validity() {
-		return this.input.validity;
-	}
-	get validationMessage() {
-		return this.input.validationMessage;
-	}
-	firstUpdated() {
-		this.input.updateComplete.then(() => {
-			this.formControlController.updateValidity();
-		});
-	}
-	handleCopy() {
-		this.input.select(), document.execCommand("copy"), this.previewButton.focus(), this.previewButton.classList.add("color-picker__preview-color--copied"), this.previewButton.addEventListener("animationend", () => {
-			this.previewButton.classList.remove("color-picker__preview-color--copied");
-		});
-	}
-	handleFormatToggle() {
-		let e = [
-			"hex",
-			"rgb",
-			"hsl",
-			"hsv"
-		], t = (e.indexOf(this.format) + 1) % e.length;
-		this.format = e[t], this.setColor(this.value), this.emit("sl-change"), this.emit("sl-input");
-	}
-	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(), T(t, {
-			onMove: (e) => {
-				this.alpha = v(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"));
-			},
-			initialEvent: 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(), T(t, {
-			onMove: (e) => {
-				this.hue = v(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"));
-			},
-			initialEvent: 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, T(t, {
-			onMove: (e, t) => {
-				this.saturation = v(e / r * 100, 0, 100), this.brightness = v(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"));
-			},
-			initialEvent: e
-		});
-	}
-	handleAlphaKeyDown(e) {
-		let t = e.shiftKey ? 10 : 1, n = this.value;
-		e.key === "ArrowLeft" && (e.preventDefault(), this.alpha = v(this.alpha - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.alpha = v(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 = v(this.hue - t, 0, 360), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.hue = v(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 = v(this.saturation - t, 0, 100), this.syncValues()), e.key === "ArrowRight" && (e.preventDefault(), this.saturation = v(this.saturation + t, 0, 100), this.syncValues()), e.key === "ArrowUp" && (e.preventDefault(), this.brightness = v(this.brightness + t, 0, 100), this.syncValues()), e.key === "ArrowDown" && (e.preventDefault(), this.brightness = v(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;
-		e.stopPropagation(), this.input.value ? (this.setColor(t.value), t.value = this.value) : this.value = "", this.value !== n && (this.emit("sl-change"), this.emit("sl-input"));
-	}
-	handleInputInput(e) {
-		this.formControlController.updateValidity(), e.stopPropagation();
-	}
-	handleInputKeyDown(e) {
-		if (e.key === "Enter") {
-			let e = this.value;
-			this.input.value ? (this.setColor(this.input.value), this.input.value = this.value, this.value !== e && (this.emit("sl-change"), this.emit("sl-input")), setTimeout(() => this.input.select())) : this.hue = 0;
-		}
-	}
-	handleInputInvalid(e) {
-		this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(e);
-	}
-	handleTouchMove(e) {
-		e.preventDefault();
-	}
-	parseColor(e) {
-		let t = new Ye(e);
-		if (!t.isValid) return null;
-		let n = t.toHsl(), r = {
-			h: n.h,
-			s: n.s * 100,
-			l: n.l * 100,
-			a: n.a
-		}, i = t.toRgb(), a = t.toHexString(), o = t.toHex8String(), s = t.toHsv(), c = {
-			h: s.h,
-			s: s.s * 100,
-			v: s.v * 100,
-			a: s.a
-		};
-		return {
-			hsl: {
-				h: r.h,
-				s: r.s,
-				l: r.l,
-				string: this.setLetterCase(`hsl(${Math.round(r.h)}, ${Math.round(r.s)}%, ${Math.round(r.l)}%)`)
-			},
-			hsla: {
-				h: r.h,
-				s: r.s,
-				l: r.l,
-				a: r.a,
-				string: this.setLetterCase(`hsla(${Math.round(r.h)}, ${Math.round(r.s)}%, ${Math.round(r.l)}%, ${r.a.toFixed(2).toString()})`)
-			},
-			hsv: {
-				h: c.h,
-				s: c.s,
-				v: c.v,
-				string: this.setLetterCase(`hsv(${Math.round(c.h)}, ${Math.round(c.s)}%, ${Math.round(c.v)}%)`)
-			},
-			hsva: {
-				h: c.h,
-				s: c.s,
-				v: c.v,
-				a: c.a,
-				string: this.setLetterCase(`hsva(${Math.round(c.h)}, ${Math.round(c.s)}%, ${Math.round(c.v)}%, ${c.a.toFixed(2).toString()})`)
-			},
-			rgb: {
-				r: i.r,
-				g: i.g,
-				b: i.b,
-				string: this.setLetterCase(`rgb(${Math.round(i.r)}, ${Math.round(i.g)}, ${Math.round(i.b)})`)
-			},
-			rgba: {
-				r: i.r,
-				g: i.g,
-				b: i.b,
-				a: i.a,
-				string: this.setLetterCase(`rgba(${Math.round(i.r)}, ${Math.round(i.g)}, ${Math.round(i.b)}, ${i.a.toFixed(2).toString()})`)
-			},
-			hex: this.setLetterCase(a),
-			hexa: this.setLetterCase(o)
-		};
-	}
-	setColor(e) {
-		let t = this.parseColor(e);
-		return t === null ? !1 : (this.hue = t.hsva.h, this.saturation = t.hsva.s, this.brightness = t.hsva.v, this.alpha = this.opacity ? t.hsva.a * 100 : 100, this.syncValues(), !0);
-	}
-	setLetterCase(e) {
-		return typeof e == "string" ? this.uppercase ? e.toUpperCase() : e.toLowerCase() : "";
-	}
-	async syncValues() {
-		let e = this.parseColor(`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`);
-		e !== null && (this.format === "hsl" ? this.inputValue = this.opacity ? e.hsla.string : e.hsl.string : this.format === "rgb" ? this.inputValue = this.opacity ? e.rgba.string : e.rgb.string : this.format === "hsv" ? this.inputValue = this.opacity ? e.hsva.string : e.hsv.string : this.inputValue = this.opacity ? e.hexa : e.hex, this.isSafeValue = !0, this.value = this.inputValue, await this.updateComplete, this.isSafeValue = !1);
-	}
-	handleAfterHide() {
-		this.previewButton.classList.remove("color-picker__preview-color--copied");
-	}
-	handleEyeDropper() {
-		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(() => {});
-	}
-	selectSwatch(e) {
-		let t = this.value;
-		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 Ye(`hsva(${e}, ${t}%, ${n}%, ${r / 100})`);
-		return i.isValid ? i.toHex8String() : "";
-	}
-	stopNestedEventPropagation(e) {
-		e.stopImmediatePropagation();
-	}
-	handleFormatChange() {
-		this.syncValues();
-	}
-	handleOpacityChange() {
-		this.alpha = 100;
-	}
-	handleValueChange(e, t) {
-		if (this.isEmpty = !t, t || (this.hue = 0, this.saturation = 0, this.brightness = 100, this.alpha = 100), !this.isSafeValue) {
-			let n = this.parseColor(t);
-			n === null ? this.inputValue = e ?? "" : (this.inputValue = this.value, this.hue = n.hsva.h, this.saturation = n.hsva.s, this.brightness = n.hsva.v, this.alpha = n.hsva.a * 100, this.syncValues());
-		}
-	}
-	focus(e) {
-		this.inline ? this.base.focus(e) : this.trigger.focus(e);
-	}
-	blur() {
-		let e = this.inline ? this.base : this.trigger;
-		this.hasFocus && (e.focus({ preventScroll: !0 }), e.blur()), this.dropdown?.open && this.dropdown.hide();
-	}
-	getFormattedValue(e = "hex") {
-		let t = this.parseColor(`hsva(${this.hue}, ${this.saturation}%, ${this.brightness}%, ${this.alpha / 100})`);
-		if (t === null) return "";
-		switch (e) {
-			case "hex": return t.hex;
-			case "hexa": return t.hexa;
-			case "rgb": return t.rgb.string;
-			case "rgba": return t.rgba.string;
-			case "hsl": return t.hsl.string;
-			case "hsla": return t.hsla.string;
-			case "hsv": return t.hsv.string;
-			case "hsva": return t.hsva.string;
-			default: return "";
-		}
-	}
-	checkValidity() {
-		return this.input.checkValidity();
-	}
-	getForm() {
-		return this.formControlController.getForm();
-	}
-	reportValidity() {
-		return !this.inline && !this.validity.valid ? (this.dropdown.show(), this.addEventListener("sl-after-show", () => this.input.reportValidity(), { once: !0 }), this.disabled || this.formControlController.emitInvalidEvent(), !1) : this.input.reportValidity();
-	}
-	setCustomValidity(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 = b`
-      <div
-        part="base"
-        class=${g({
-			"color-picker": !0,
-			"color-picker--inline": this.inline,
-			"color-picker--disabled": this.disabled,
-			"color-picker--focused": this.hasFocus
-		})}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        aria-labelledby="label"
-        tabindex=${this.inline ? "0" : "-1"}
-      >
-        ${this.inline ? b`
-              <sl-visually-hidden id="label">
-                <slot name="label">${this.label}</slot>
-              </sl-visually-hidden>
-            ` : null}
-
-        <div
-          part="grid"
-          class="color-picker__grid"
-          style=${D({ backgroundColor: this.getHexString(this.hue, 100, 100) })}
-          @pointerdown=${this.handleGridDrag}
-          @touchmove=${this.handleTouchMove}
-        >
-          <span
-            part="grid-handle"
-            class=${g({
-			"color-picker__grid-handle": !0,
-			"color-picker__grid-handle--dragging": this.isDraggingGridHandle
-		})}
-            style=${D({
-			top: `${t}%`,
-			left: `${e}%`,
-			backgroundColor: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha)
-		})}
-            role="application"
-            aria-label="HSV"
-            tabindex=${_(this.disabled ? void 0 : "0")}
-            @keydown=${this.handleGridKeyDown}
-          ></span>
-        </div>
-
-        <div class="color-picker__controls">
-          <div class="color-picker__sliders">
-            <div
-              part="slider hue-slider"
-              class="color-picker__hue color-picker__slider"
-              @pointerdown=${this.handleHueDrag}
-              @touchmove=${this.handleTouchMove}
-            >
-              <span
-                part="slider-handle hue-slider-handle"
-                class="color-picker__slider-handle"
-                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=${_(this.disabled ? void 0 : "0")}
-                @keydown=${this.handleHueKeyDown}
-              ></span>
-            </div>
-
-            ${this.opacity ? b`
-                  <div
-                    part="slider opacity-slider"
-                    class="color-picker__alpha color-picker__slider color-picker__transparent-bg"
-                    @pointerdown="${this.handleAlphaDrag}"
-                    @touchmove=${this.handleTouchMove}
-                  >
-                    <div
-                      class="color-picker__alpha-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%
-                        )` })}
-                    ></div>
-                    <span
-                      part="slider-handle opacity-slider-handle"
-                      class="color-picker__slider-handle"
-                      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=${_(this.disabled ? void 0 : "0")}
-                      @keydown=${this.handleAlphaKeyDown}
-                    ></span>
-                  </div>
-                ` : ""}
-          </div>
-
-          <button
-            type="button"
-            part="preview"
-            class="color-picker__preview color-picker__transparent-bg"
-            aria-label=${this.localize.term("copy")}
-            style=${D({ "--preview-color": this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) })}
-            @click=${this.handleCopy}
-          ></button>
-        </div>
-
-        <div class="color-picker__user-input" aria-live="polite">
-          <sl-input
-            part="input"
-            type="text"
-            name=${this.name}
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            value=${this.isEmpty ? "" : this.inputValue}
-            ?required=${this.required}
-            ?disabled=${this.disabled}
-            aria-label=${this.localize.term("currentValue")}
-            @keydown=${this.handleInputKeyDown}
-            @sl-change=${this.handleInputChange}
-            @sl-input=${this.handleInputInput}
-            @sl-invalid=${this.handleInputInvalid}
-            @sl-blur=${this.stopNestedEventPropagation}
-            @sl-focus=${this.stopNestedEventPropagation}
-          ></sl-input>
-
-          <sl-button-group>
-            ${this.noFormatToggle ? "" : b`
-                  <sl-button
-                    part="format-button"
-                    aria-label=${this.localize.term("toggleColorFormat")}
-                    exportparts="
-                      base:format-button__base,
-                      prefix:format-button__prefix,
-                      label:format-button__label,
-                      suffix:format-button__suffix,
-                      caret:format-button__caret
-                    "
-                    @click=${this.handleFormatToggle}
-                    @sl-blur=${this.stopNestedEventPropagation}
-                    @sl-focus=${this.stopNestedEventPropagation}
-                  >
-                    ${this.setLetterCase(this.format)}
-                  </sl-button>
-                `}
-            ${Xe ? b`
-                  <sl-button
-                    part="eye-dropper-button"
-                    exportparts="
-                      base:eye-dropper-button__base,
-                      prefix:eye-dropper-button__prefix,
-                      label:eye-dropper-button__label,
-                      suffix:eye-dropper-button__suffix,
-                      caret:eye-dropper-button__caret
-                    "
-                    @click=${this.handleEyeDropper}
-                    @sl-blur=${this.stopNestedEventPropagation}
-                    @sl-focus=${this.stopNestedEventPropagation}
-                  >
-                    <sl-icon
-                      library="system"
-                      name="eyedropper"
-                      label=${this.localize.term("selectAColorFromTheScreen")}
-                    ></sl-icon>
-                  </sl-button>
-                ` : ""}
-          </sl-button-group>
-        </div>
-
-        ${n.length > 0 ? b`
-              <div part="swatches" class="color-picker__swatches">
-                ${n.map((e) => {
-			let t = this.parseColor(e);
-			return t ? b`
-                    <div
-                      part="swatch"
-                      class="color-picker__swatch color-picker__transparent-bg"
-                      tabindex=${_(this.disabled ? void 0 : "0")}
-                      role="button"
-                      aria-label=${e}
-                      @click=${() => this.selectSwatch(e)}
-                      @keydown=${(e) => !this.disabled && e.key === "Enter" && this.setColor(t.hexa)}
-                    >
-                      <div
-                        class="color-picker__swatch-color"
-                        style=${D({ backgroundColor: t.hexa })}
-                      ></div>
-                    </div>
-                  ` : (console.error(`Unable to parse swatch color: "${e}"`, this), "");
-		})}
-              </div>
-            ` : ""}
-      </div>
-    `;
-		return this.inline ? r : b`
-      <sl-dropdown
-        class="color-dropdown"
-        aria-disabled=${this.disabled ? "true" : "false"}
-        .containingElement=${this}
-        ?disabled=${this.disabled}
-        ?hoist=${this.hoist}
-        @sl-after-hide=${this.handleAfterHide}
-      >
-        <button
-          part="trigger"
-          slot="trigger"
-          class=${g({
-			"color-dropdown__trigger": !0,
-			"color-dropdown__trigger--disabled": this.disabled,
-			"color-dropdown__trigger--small": this.size === "small",
-			"color-dropdown__trigger--medium": this.size === "medium",
-			"color-dropdown__trigger--large": this.size === "large",
-			"color-dropdown__trigger--empty": this.isEmpty,
-			"color-dropdown__trigger--focused": this.hasFocus,
-			"color-picker__transparent-bg": !0
-		})}
-          style=${D({ color: this.getHexString(this.hue, this.saturation, this.brightness, this.alpha) })}
-          type="button"
-        >
-          <sl-visually-hidden>
-            <slot name="label">${this.label}</slot>
-          </sl-visually-hidden>
-        </button>
-        ${r}
-      </sl-dropdown>
-    `;
-	}
-};
-//#endregion
-//#region node_modules/@shoelace-style/shoelace/dist/chunks/chunk.BQVAQ53I.js
-L.styles = [h, ke], L.dependencies = {
-	"sl-button-group": x,
-	"sl-button": ue,
-	"sl-dropdown": E,
-	"sl-icon": ee,
-	"sl-input": fe,
-	"sl-visually-hidden": De
-}, p([r("[part~=\"base\"]")], L.prototype, "base", 2), p([r("[part~=\"input\"]")], L.prototype, "input", 2), p([r(".color-dropdown")], L.prototype, "dropdown", 2), p([r("[part~=\"preview\"]")], L.prototype, "previewButton", 2), p([r("[part~=\"trigger\"]")], L.prototype, "trigger", 2), p([n()], L.prototype, "hasFocus", 2), p([n()], L.prototype, "isDraggingGridHandle", 2), p([n()], L.prototype, "isEmpty", 2), p([n()], L.prototype, "inputValue", 2), p([n()], L.prototype, "hue", 2), p([n()], L.prototype, "saturation", 2), p([n()], L.prototype, "brightness", 2), p([n()], L.prototype, "alpha", 2), p([t()], L.prototype, "value", 2), p([de()], L.prototype, "defaultValue", 2), p([t()], L.prototype, "label", 2), p([t()], L.prototype, "format", 2), p([t({
-	type: Boolean,
-	reflect: !0
-})], L.prototype, "inline", 2), p([t({ reflect: !0 })], L.prototype, "size", 2), p([t({
-	attribute: "no-format-toggle",
-	type: Boolean
-})], L.prototype, "noFormatToggle", 2), p([t()], L.prototype, "name", 2), p([t({
-	type: Boolean,
-	reflect: !0
-})], L.prototype, "disabled", 2), p([t({ type: Boolean })], L.prototype, "hoist", 2), p([t({ type: Boolean })], L.prototype, "opacity", 2), p([t({ type: Boolean })], L.prototype, "uppercase", 2), p([t()], L.prototype, "swatches", 2), p([t({ reflect: !0 })], L.prototype, "form", 2), p([t({
-	type: Boolean,
-	reflect: !0
-})], L.prototype, "required", 2), p([a({ passive: !1 })], L.prototype, "handleTouchMove", 1), p([f("format", { waitUntilFirstUpdate: !0 })], L.prototype, "handleFormatChange", 1), p([f("opacity", { waitUntilFirstUpdate: !0 })], L.prototype, "handleOpacityChange", 1), p([f("value")], L.prototype, "handleValueChange", 1), L.define("sl-color-picker");
-//#endregion
-//#region src/components/webmapx-draw-layer-dialog.ts
-var Ze = {
-	Point: [
-		"string",
-		"number",
-		"longitude",
-		"latitude",
-		"linkURL",
-		"imageURL",
-		"create-time",
-		"update-time"
-	],
-	LineString: [
-		"string",
-		"number",
-		"length",
-		"linkURL",
-		"imageURL",
-		"create-time",
-		"update-time"
-	],
-	Polygon: [
-		"string",
-		"number",
-		"area",
-		"perimeter",
-		"longitude",
-		"latitude",
-		"linkURL",
-		"imageURL",
-		"create-time",
-		"update-time"
-	]
-}, Qe = [{
-	name: "id",
-	type: "number"
-}, {
-	name: "name",
-	type: "string"
-}], $e = {
-	Point: "#0f62fe",
-	LineString: "#0f62fe",
-	Polygon: "#0f62fe"
-};
-function R(e) {
-	return {
-		id: `layer-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
-		name: "",
-		type: e,
-		color: $e[e],
-		properties: Qe.map((e) => ({ ...e }))
-	};
-}
-var z = class extends Se {
-	constructor(...e) {
-		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 = y`
-        :host { display: block; }
-
-        sl-dialog::part(panel) {
-            min-width: min(420px, 90vw);
-        }
-
-        .layer-list {
-            display: flex;
-            flex-direction: column;
-            gap: 0.25rem;
-            max-height: 220px;
-            overflow-y: auto;
-            margin-bottom: 1rem;
-        }
-
-        .layer-option {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            padding: 0.4rem 0.6rem;
-            border-radius: 4px;
-            cursor: pointer;
-            border: 1px solid transparent;
-            font-size: 0.9rem;
-        }
-
-        .layer-option:hover { background: var(--sl-color-neutral-100); }
-
-        .layer-option.selected {
-            background: var(--sl-color-primary-100);
-            border-color: var(--sl-color-primary-400);
-        }
-
-        .color-dot {
-            width: 12px; height: 12px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-
-        .new-icon { color: var(--sl-color-neutral-500); font-size: 1rem; }
-
-        .prop-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 0.85rem;
-            margin-top: 0.5rem;
-        }
-
-        .prop-table th {
-            text-align: left;
-            background: var(--sl-color-neutral-100);
-            padding: 0.25rem 0.4rem;
-            border-bottom: 1px solid var(--sl-color-neutral-200);
-        }
-
-        .prop-table td {
-            padding: 0.2rem 0.4rem;
-            border-bottom: 1px solid var(--sl-color-neutral-100);
-            vertical-align: middle;
-        }
-
-        .prop-table tr:last-child td { border-bottom: none; }
-
-        .prop-row-auto td { color: var(--sl-color-neutral-400); font-style: italic; }
-
-        .type-computed { color: var(--sl-color-primary-600); font-size: 0.75rem; }
-
-        .add-row td { background: var(--sl-color-neutral-50); }
-
-        .add-row sl-input,
-        .add-row sl-select { font-size: 0.85rem; }
-
-        .name-input-row {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .color-swatch {
-            width: 32px; height: 32px;
-            border-radius: 4px;
-            border: 1px solid var(--sl-color-neutral-300);
-            cursor: pointer;
-            flex-shrink: 0;
-        }
-
-        .footer {
-            display: flex;
-            justify-content: flex-end;
-            gap: 0.5rem;
-            margin-top: 1rem;
-        }
-
-        .error-msg {
-            color: var(--sl-color-danger-600);
-            font-size: 0.8rem;
-            margin-top: 0.25rem;
-        }
-    `;
-	}
-	open() {
-		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();
-	}
-	selectOption(e) {
-		this.selectedId = e;
-	}
-	goToDetail() {
-		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 = {
-				...e,
-				properties: e.properties.map((e) => ({ ...e }))
-			}, this.allowedAttributes = null;
-			else {
-				let e = this.mapLayers.find((e) => e.layerId === this.selectedId);
-				this.layer = {
-					...R(this.geometryType),
-					name: e?.label ?? this.selectedId,
-					properties: e?.properties?.map((e) => ({ ...e })) ?? Qe.map((e) => ({ ...e })),
-					borrowedSourceId: e?.sourceId
-				}, this.allowedAttributes = e?.allowedAttributes ?? null;
-			}
-		}
-		this.step = "detail", this.updateComplete.then(() => this.renderRoot.querySelector("sl-input[name=\"layername\"]")?.focus());
-	}
-	goBack() {
-		this.step = "select";
-	}
-	addProperty() {
-		this.newPropName.trim() && (this.layer = {
-			...this.layer,
-			properties: [...this.layer.properties, {
-				name: this.newPropName.trim(),
-				type: this.newPropType
-			}]
-		}, this.newPropName = "", this.newPropType = "string");
-	}
-	removeProperty(e) {
-		let t = [...this.layer.properties];
-		t.splice(e, 1), this.layer = {
-			...this.layer,
-			properties: t
-		};
-	}
-	confirm() {
-		let e = this.renderRoot.querySelector("sl-input[name=\"layername\"]")?.value?.trim() ?? this.layer.name;
-		if (!e) {
-			this.nameError = !0, this.requestUpdate();
-			return;
-		}
-		this.nameError = !1;
-		let t = this.newPropName.trim(), n = t ? [...this.layer.properties, {
-			name: t,
-			type: this.newPropType
-		}] : [...this.layer.properties], r = {
-			...this.layer,
-			name: e,
-			properties: n
-		};
-		this.dispatchEvent(new CustomEvent("webmapx-draw-layer-confirm", {
-			detail: r,
-			bubbles: !0,
-			composed: !0
-		})), this.dialog.hide();
-	}
-	cancel() {
-		this.dispatchEvent(new CustomEvent("webmapx-draw-layer-cancel", {
-			bubbles: !0,
-			composed: !0
-		})), this.dialog.hide();
-	}
-	renderSelectStep() {
-		let e = this.geometryType === "LineString" ? "Line" : this.geometryType;
-		return b`
-            <div class="layer-list">
-                <div class="layer-option ${this.selectedId === "new" ? "selected" : ""}"
-                     @click=${() => this.selectOption("new")}
-                     @dblclick=${() => {
-			this.selectOption("new"), this.goToDetail();
-		}}>
-                    <span class="new-icon">＋</span>
-                    <span>New ${e} layer</span>
-                </div>
-                ${this.existingLayers.map((e) => b`
-                    <div class="layer-option ${this.selectedId === e.id ? "selected" : ""}"
-                         @click=${() => this.selectOption(e.id)}
-                         @dblclick=${() => {
-			this.selectOption(e.id), this.goToDetail();
-		}}>
-                        <span class="color-dot" style="background:${e.color}"></span>
-                        <span>${e.name}</span>
-                    </div>
-                `)}
-                ${this.mapLayers.length > 0 ? b`
-                    <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) => b`
-                        <div class="layer-option ${this.selectedId === e.layerId ? "selected" : ""}"
-                             @click=${() => this.selectOption(e.layerId)}
-                             @dblclick=${() => {
-			this.selectOption(e.layerId), this.goToDetail();
-		}}>
-                            <span class="new-icon" style="color:var(--sl-color-warning-600)">✎</span>
-                            <span>${e.label}</span>
-                            <span style="font-size:0.7rem;color:var(--sl-color-neutral-400);margin-left:auto">map layer</span>
-                        </div>
-                    `)}
-                ` : ""}
-            </div>
-            <div class="footer">
-                <sl-button @click=${this.cancel}>Cancel</sl-button>
-                <sl-button autofocus variant="primary" @click=${this.goToDetail}>Next →</sl-button>
-            </div>
-        `;
-	}
-	renderDetailStep() {
-		let e = Ze[this.geometryType], t = {
-			longitude: "longitude (auto)",
-			latitude: "latitude (auto)",
-			area: "area (auto)",
-			perimeter: "perimeter (auto)",
-			length: "length (auto)",
-			linkURL: "link URL",
-			imageURL: "image URL",
-			"create-time": "create-time (auto)",
-			"update-time": "update-time (auto)"
-		};
-		return b`
-            <div class="name-input-row">
-                <sl-input name="layername"
-                    style="flex:1"
-                    placeholder="Layer name"
-                    aria-label="Layer name"
-                    value=${this.layer.name}
-                    @keydown=${(e) => e.key === "Enter" && this.renderRoot.querySelector("#new-prop-name")?.focus()}
-                ></sl-input>
-                <div class="color-swatch"
-                     style="background:${this.layer.color}"
-                     title="Layer color"
-                     @click=${() => this.renderRoot.querySelector("input[type=color]")?.click()}>
-                </div>
-                <input type="color" style="display:none" .value=${this.layer.color}
-                    @input=${(e) => {
-			this.layer = {
-				...this.layer,
-				color: e.target.value
-			};
-		}}>
-            </div>
-            ${this.nameError ? b`<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) => b`
-                        <tr class="${e.name === "id" ? "prop-row-auto" : ""}">
-                            <td>${e.name}</td>
-                            <td class="${[
-			"string",
-			"number",
-			"linkURL",
-			"imageURL"
-		].includes(e.type) ? "" : "type-computed"}">${e.type}${e.name === "id" ? " (auto)" : ""}</td>
-                            <td>
-                                ${t === 0 ? "" : b`
-                                    <sl-icon-button name="x" @click=${() => this.removeProperty(t)}></sl-icon-button>
-                                `}
-                            </td>
-                        </tr>
-                    `)}
-                    <tr class="add-row">
-                        <td>
-                            ${this.allowedAttributes ? b`
-                                <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) => b`<sl-option value=${e}>${e}</sl-option>`)}
-                                </sl-select>
-                            ` : b`
-                                <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}
-                                    @keydown=${(e) => e.key === "Enter" && this.addProperty()}>
-                                </sl-input>
-                            `}
-                        </td>
-                        <td>
-                            <sl-select id="new-prop-type" size="small" .value=${this.newPropType}
-                                @sl-change=${(e) => this.newPropType = e.target.value}>
-                                ${e.map((e) => b`<sl-option value=${e}>${t[e] ?? e}</sl-option>`)}
-                            </sl-select>
-                        </td>
-                        <td>
-                            <sl-icon-button name="plus" @click=${this.addProperty}></sl-icon-button>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <div class="footer">
-                <sl-button @click=${this.goBack}>← Back</sl-button>
-                <sl-button @click=${this.cancel}>Cancel</sl-button>
-                <sl-button variant="primary" @click=${this.confirm}>OK</sl-button>
-            </div>
-        `;
-	}
-	render() {
-		let e = this.geometryType === "LineString" ? "Line" : this.geometryType;
-		return b`
-            <sl-dialog label="${this.step === "select" ? `Select ${e} layer` : `Configure ${e} layer`}"
-                       @sl-request-close=${(e) => {
-			e.detail?.source === "overlay" && this.cancel();
-		}}>
-                ${this.step === "select" ? this.renderSelectStep() : this.renderDetailStep()}
-            </sl-dialog>
-        `;
-	}
-};
-e([t({ type: String })], z.prototype, "geometryType", void 0), e([t({ attribute: !1 })], z.prototype, "existingLayers", void 0), e([t({ attribute: !1 })], z.prototype, "mapLayers", void 0), e([n()], z.prototype, "step", void 0), e([n()], z.prototype, "selectedId", void 0), e([n()], z.prototype, "layer", void 0), e([n()], z.prototype, "nameError", void 0), e([n()], z.prototype, "newPropName", void 0), e([n()], z.prototype, "newPropType", void 0), e([n()], z.prototype, "allowedAttributes", void 0), e([r("sl-dialog")], z.prototype, "dialog", void 0), z = e([i("webmapx-draw-layer-dialog")], z);
-//#endregion
-//#region src/utils/snap-utils.ts
-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 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 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 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 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]);
-			p + a < s && (s = p + a, o = [t[0] + f * (i[0] - t[0]), t[1] + f * (i[1] - t[1])]);
-		}
-	}
-	return o;
-}
-//#endregion
-//#region src/components/webmapx-draw-tool.ts
-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 at(e) {
-	return `${e}-map`;
-}
-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 be {
-	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;
-		}, this.snapEnabled = !0, this.altActive = !1, this.snapPos = null, this.lastCursorPx = null, this.editState = "none", this.editHandles = [], this.hoveredHandle = null, this.dragging = null, this.selectedHandle = null, this.featureDrag = null, this.unsubClick = null, this.unsubMove = null, this.unsubCtx = null, this.unsubDown = null, this.unsubUp = null, this.exportFilename = "draw-export", this.exportMode = "combined", this.onKeyDown = (e) => {
-			if (this.isRelevantTarget(e)) {
-				if (e.key === "Alt") {
-					e.preventDefault(), this.altActive || (this.altActive = !0, this.snapPos = null, this.updateRubberband(), this.updateSnapIndicator());
-					return;
-				}
-				if (!this.isTypingTarget(e)) {
-					if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
-						e.preventDefault(), this.undoOrDraftBack();
-						return;
-					}
-					if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "y") {
-						e.preventDefault(), this.redoOrDraftForward();
-						return;
-					}
-					(e.key === "Delete" || e.key === "Backspace") && (this.draftPoints.length > 0 ? (e.preventDefault(), this.removeLastDraftPoint()) : this.selectedHandle ? (e.preventDefault(), this.deleteSelectedVertex()) : this.selectedFeatureId && (e.preventDefault(), this.deleteSelected()));
-				}
-			}
-		}, this.onWindowBlur = () => {
-			this.altActive && (this.altActive = !1, (this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon") && this.updateRubberband());
-		}, this.onKeyUp = (e) => {
-			e.key === "Alt" && (this.altActive = !1, (this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon") && this.updateRubberband());
-		};
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.touchMQ.addEventListener("change", this.onTouchMQChange);
-	}
-	get effectiveSnap() {
-		return this.snapEnabled && !this.altActive;
-	}
-	static {
-		this.styles = y`
-        :host {
-            display: flex;
-            flex-direction: column;
-            padding: var(--webmapx-tool-padding, 0);
-            min-width: 200px;
-            max-height: var(--webmapx-draw-tool-max-height, 100%);
-            overflow: hidden;
-        }
-
-        .scroll-content {
-            flex: 1;
-            overflow-y: auto;
-            min-height: 0;
-        }
-
-        .toolbar {
-            display: flex;
-            gap: 0.25rem;
-            flex-wrap: wrap;
-            margin-bottom: 0.5rem;
-            flex-shrink: 0;
-        }
-
-        sl-icon-button[active]::part(base) {
-            color: var(--sl-color-primary-600);
-            background: var(--sl-color-primary-100);
-            border-radius: 4px;
-        }
-
-        .help {
-            font-size: 0.8rem;
-            color: var(--sl-color-neutral-600);
-            margin-bottom: 0.5rem;
-            min-height: 2.5em;
-        }
-
-        .layers-section {
-            margin-top: 0.5rem;
-        }
-
-        .section-label {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.06em;
-            color: var(--sl-color-neutral-500);
-            margin-bottom: 0.25rem;
-        }
-
-        .layer-row {
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-            padding: 0.2rem 0.4rem;
-            border-radius: 4px;
-            font-size: 0.85rem;
-            cursor: pointer;
-        }
-
-        .layer-row:hover {
-            background: var(--sl-color-neutral-100);
-        }
-
-        .remove-layer-btn {
-            font-size: 0.75rem;
-            opacity: 0;
-            transition: opacity 0.1s;
-        }
-
-        .layer-row:hover .remove-layer-btn {
-            opacity: 1;
-        }
-
-        .color-dot {
-            width: 10px; height: 10px;
-            border-radius: 50%;
-            flex-shrink: 0;
-        }
-
-        .layer-name { flex: 1; }
-
-        .layer-type {
-            font-size: 0.7rem;
-            color: var(--sl-color-neutral-500);
-        }
-
-        .features-section {
-            margin-top: 0.25rem;
-            max-height: 180px;
-            overflow-y: auto;
-        }
-
-        .feature-row {
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-            padding: 0.2rem 0.6rem;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 0.82rem;
-        }
-
-        .feature-row:hover { background: var(--sl-color-neutral-100); }
-        .feature-row.selected { background: var(--sl-color-primary-100); }
-
-        .divider {
-            width: 1px; height: 1.2rem;
-            background: var(--sl-color-neutral-200);
-            margin: 0 0.1rem;
-        }
-
-        .prop-row { display: flex; gap: 0.4rem; align-items: center; font-size: 0.82rem; margin-bottom: 0.2rem; }
-        .prop-label { width: 80px; color: var(--sl-color-neutral-500); flex-shrink: 0; }
-        .prop-value { flex: 1; min-width: 0; }
-        .prop-link { display: block; width: 100%; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .prop-img { max-width: 100%; max-height: 80px; border-radius: 3px; object-fit: cover; }
-        .prop-img-error { font-size: 0.75rem; color: var(--sl-color-danger-600, #c0392b); font-style: italic; }
-        .prop-url-wrap { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.2rem; }
-    `;
-	}
-	onActivate() {
-		if (this.adapter?.store.getState().mapLoaded) this.createSharedLayers();
-		else {
-			let e = this.adapter?.store.subscribe((t) => {
-				t.mapLoaded && (e?.(), this.createSharedLayers());
-			});
-		}
-		for (let e of this.drawLayers) this.createdDrawLayerIds.has(e.id) || (this.addMapLayersForDrawLayer(e), this.refreshDrawLayerSource(e.id)), e.borrowedSourceId && this.adapter?.getSource(e.borrowedSourceId)?.setData({
-			type: "FeatureCollection",
-			features: []
-		});
-		this.bindEvents(), window.addEventListener("keydown", this.onKeyDown, !0), window.addEventListener("keyup", this.onKeyUp), window.addEventListener("blur", this.onWindowBlur), this.setModeInternal("select");
-	}
-	onDeactivate() {
-		this.unbindEvents(), window.removeEventListener("keydown", this.onKeyDown, !0), window.removeEventListener("keyup", this.onKeyUp), window.removeEventListener("blur", this.onWindowBlur), this.altActive = !1;
-		for (let e of this.drawLayers) e.borrowedSourceId && this.restoreBorrowedLayer(e), this.suspendDrawLayerFromMap(e);
-		this.draftPoints = [], this.cursorPos = null, this.snapPos = null, this.lastCursorPx = null, this.dragging = null, this.featureDrag = null, this.selectedFeatureId = null, this.editState = "none", this.editHandles = [], this.hoveredHandle = null, this.adapter?.setPanEnabled(!0), this.adapter?.setDoubleClickZoomEnabled(!0), this.updateSelectedSource(), this.removeSharedLayers(), this.adapter?.setCursor("");
-	}
-	disconnectedCallback() {
-		this.touchMQ.removeEventListener("change", this.onTouchMQChange), this.removeAllMapLayers(), super.disconnectedCallback();
-	}
-	onMapAttached(e) {
-		super.onMapAttached(e);
-	}
-	onMapDetached() {
-		this.removeAllMapLayers(), super.onMapDetached();
-	}
-	createSharedLayers() {
-		if (!this.sharedLayersCreated) {
-			this.dispatch("webmapx-add-source", {
-				id: B,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-source", {
-				id: V,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: rt,
-				type: "line",
-				source: B,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"line-color": "#0f62fe",
-					"line-width": 2,
-					"line-dasharray": [4, 4]
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: it,
-				type: "circle",
-				source: V,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"circle-radius": 8,
-					"circle-color": "transparent",
-					"circle-stroke-width": 2,
-					"circle-stroke-color": "#ff6600"
-				}
-			}), this.dispatch("webmapx-add-source", {
-				id: W,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: ct,
-				type: "circle",
-				source: W,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"circle-radius": st,
-					"circle-color": this.cssVar("--webmapx-draw-selected-color", ot)
-				}
-			}), this.dispatch("webmapx-add-source", {
-				id: G,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: K,
-				type: "circle",
-				source: G,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"circle-radius": 5,
-					"circle-color": "#fff",
-					"circle-stroke-width": 2,
-					"circle-stroke-color": "#0f62fe"
-				}
-			}), this.dispatch("webmapx-add-source", {
-				id: q,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: lt,
-				type: "circle",
-				source: q,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"circle-radius": 6,
-					"circle-color": "#fff",
-					"circle-stroke-width": 2,
-					"circle-stroke-color": "#0f62fe"
-				}
-			}), this.dispatch("webmapx-add-source", {
-				id: J,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: ut,
-				type: "circle",
-				source: J,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"circle-radius": 4,
-					"circle-color": "#fff",
-					"circle-stroke-width": 1.5,
-					"circle-stroke-color": "#0f62fe",
-					"circle-opacity": .7
-				}
-			}), this.dispatch("webmapx-add-source", {
-				id: Y,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: dt,
-				type: "circle",
-				source: Y,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"circle-radius": st,
-					"circle-color": this.cssVar("--webmapx-draw-selected-color", ot),
-					"circle-stroke-width": 2,
-					"circle-stroke-color": "#fff"
-				}
-			}), this.dispatch("webmapx-add-source", {
-				id: X,
-				config: {
-					type: "geojson",
-					data: {
-						type: "FeatureCollection",
-						features: []
-					}
-				}
-			}), this.dispatch("webmapx-add-layer", {
-				id: pt,
-				type: "circle",
-				source: X,
-				metadata: {
-					isToolLayer: !0,
-					hideFromLegend: !0
-				},
-				paint: {
-					"circle-radius": 7,
-					"circle-color": "#ffdd00",
-					"circle-stroke-width": 2,
-					"circle-stroke-color": "#fff",
-					"circle-opacity": .9
-				}
-			}), this.sharedLayersCreated = !0;
-			for (let e of this.drawLayers) this.addMapLayersForDrawLayer(e), this.refreshDrawLayerSource(e.id);
-		}
-	}
-	addMapLayersForDrawLayer(e) {
-		if (this.createdDrawLayerIds.has(e.id)) return;
-		let t = H(e.id);
-		this.dispatch("webmapx-add-source", {
-			id: t,
-			config: {
-				type: "geojson",
-				data: {
-					type: "FeatureCollection",
-					features: []
-				}
-			}
-		}), e.type === "Polygon" ? (this.dispatch("webmapx-add-layer", {
-			id: e.id,
-			type: "fill",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				hideFromLegend: !0
-			},
-			paint: {
-				"fill-color": e.color,
-				"fill-opacity": .35
-			}
-		}), this.dispatch("webmapx-add-layer", {
-			id: `${e.id}-outline`,
-			type: "line",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				hideFromLegend: !0
-			},
-			paint: {
-				"line-color": e.color,
-				"line-width": 2
-			}
-		})) : e.type === "LineString" ? this.dispatch("webmapx-add-layer", {
-			id: e.id,
-			type: "line",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				hideFromLegend: !0
-			},
-			paint: {
-				"line-color": e.color,
-				"line-width": 2
-			}
-		}) : this.dispatch("webmapx-add-layer", {
-			id: e.id,
-			type: "circle",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				hideFromLegend: !0
-			},
-			paint: {
-				"circle-radius": 6,
-				"circle-color": e.color,
-				"circle-stroke-width": 2,
-				"circle-stroke-color": "#fff"
-			}
-		}), 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", H(e.id)), this.adapter?.store && xe(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
-	}
-	removeSharedLayers() {
-		for (let e of [
-			rt,
-			it,
-			ct,
-			K,
-			lt,
-			ut,
-			dt,
-			pt
-		]) this.dispatch("webmapx-remove-layer", e);
-		for (let e of [
-			B,
-			V,
-			W,
-			G,
-			q,
-			J,
-			Y,
-			X
-		]) this.dispatch("webmapx-remove-source", e);
-		this.sharedLayersCreated = !1;
-	}
-	removeAllMapLayers() {
-		this.removeSharedLayers();
-		for (let e of this.drawLayers) this.removeMapLayersForDrawLayer(e);
-		this.createdDrawLayerIds.clear();
-	}
-	refreshDrawLayerSource(e) {
-		let t = this.features.filter((t) => t.layerId === e).map((e) => ({
-			type: "Feature",
-			id: e.id,
-			geometry: {
-				type: e.type,
-				coordinates: e.coordinates
-			},
-			properties: e.properties
-		}));
-		this.dispatch("webmapx-set-source-data", {
-			id: H(e),
-			data: {
-				type: "FeatureCollection",
-				features: t
-			}
-		});
-	}
-	cssVar(e, t) {
-		return getComputedStyle(this).getPropertyValue(e).trim() || t;
-	}
-	get modKey() {
-		return /Mac|iPhone|iPad/.test(navigator.platform) ? "Cmd" : "Ctrl";
-	}
-	isTypingTarget(e) {
-		let t = e.composedPath()[0], n = t?.tagName?.toLowerCase();
-		return n === "input" || n === "textarea" || n === "sl-input" || n === "sl-textarea" || t?.isContentEditable === !0;
-	}
-	isRelevantTarget(e) {
-		let t = e.composedPath(), n = this.mapHost;
-		if (t.includes(this) || n && t.includes(n)) return !0;
-		let r = t[0];
-		return r === document.body || r === document.documentElement;
-	}
-	bindEvents() {
-		this.adapter && (this.unsubClick = this.adapter.events.on("click", (e) => this.handleClick(e)), this.unsubMove = this.adapter.events.on("pointer-move", (e) => this.handlePointerMove(e)), this.unsubCtx = this.adapter.events.on("contextmenu", (e) => this.handleContextMenu(e)), this.unsubDown = this.adapter.events.on("pointer-down", (e) => this.handlePointerDown(e)), this.unsubUp = this.adapter.events.on("pointer-up", (e) => this.handlePointerUp(e)));
-	}
-	unbindEvents() {
-		this.unsubClick?.(), this.unsubClick = null, this.unsubMove?.(), this.unsubMove = null, this.unsubCtx?.(), this.unsubCtx = null, this.unsubDown?.(), this.unsubDown = null, this.unsubUp?.(), this.unsubUp = null;
-	}
-	async requestDrawMode(e) {
-		let t = Q(e);
-		if (!t) {
-			this.setModeInternal(e);
-			return;
-		}
-		if (this.activeLayerIds[t]) {
-			this.setModeInternal(e);
-			return;
-		}
-		await this.openLayerDialog(e);
-	}
-	async openLayerDialog(e) {
-		let t = Q(e);
-		if (!t) return;
-		this.pendingMode = e;
-		let n = this.drawLayers.filter((e) => e.type === t && !e.borrowedSourceId), r = this.adapter ? await this.getEditableMapLayers(t) : [], i = this.activeLayerIds[t], a = this.drawLayers.find((e) => e.id === i && e.borrowedSourceId), o = a?.borrowedSourceId, s = o ? r.find((e) => e.sourceId === o)?.layerId : void 0;
-		if (a && s) {
-			let e = r.find((e) => e.layerId === s);
-			e && (e.properties = a.properties.map((e) => ({ ...e })));
-		}
-		this.layerDialog.geometryType = t, this.layerDialog.existingLayers = n, this.layerDialog.mapLayers = r, this.layerDialog.open(), s && (this.layerDialog.selectedId = s);
-	}
-	async getEditableMapLayers(e) {
-		if (!this.adapter) return [];
-		let t = this.adapter.store.getState().mapLayers ?? {}, n = /* @__PURE__ */ new Set(), r = [], i = this.activeLayerIds[e], a = new Set(this.drawLayers.filter((e) => e.borrowedSourceId && e.id !== i).map((e) => e.borrowedSourceId));
-		for (let [i, o] of Object.entries(t)) {
-			if (o.isToolLayer || this.createdDrawLayerIds.has(i)) continue;
-			let t = typeof o.sourceId == "string" ? o.sourceId : null;
-			if (!t || n.has(t) || a.has(t)) continue;
-			let s = this.adapter.getSourceData(t);
-			if (!s) continue;
-			let c = await this.resolveFeatureCollection(s);
-			if (typeof s == "string") {
-				let a = c?.features[0]?.geometry?.type, s = a ? this.geometryFamilyForGeoJSONType(a) : null, l = this.geometryFamilyForLayerType(o.layerType);
-				if ((s ?? l) !== e) continue;
-				n.add(t), r.push({
-					layerId: i,
-					sourceId: t,
-					label: o.label ?? i,
-					properties: o.properties ?? (c ? this.inferPropertyDefs(c) : void 0),
-					allowedAttributes: o.attributes?.allowedAttributes ?? void 0
-				});
-				continue;
-			}
-			let l = s.features[0]?.geometry?.type, u = l ? this.geometryFamilyForGeoJSONType(l) : null, d = this.geometryFamilyForLayerType(o.layerType);
-			(u ?? d) === e && (n.add(t), r.push({
-				layerId: i,
-				sourceId: t,
-				label: o.label ?? i,
-				properties: o.properties ?? this.inferPropertyDefs(s),
-				allowedAttributes: o.attributes?.allowedAttributes ?? void 0
-			}));
-		}
-		return r;
-	}
-	async resolveFeatureCollection(e) {
-		if (typeof e != "string") return e;
-		try {
-			let t = await fetch(e);
-			return t.ok ? await t.json() : null;
-		} catch {
-			return null;
-		}
-	}
-	geometryFamilyForGeoJSONType(e) {
-		return e === "Point" || e === "MultiPoint" ? "Point" : e === "LineString" || e === "MultiLineString" ? "LineString" : e === "Polygon" || e === "MultiPolygon" ? "Polygon" : null;
-	}
-	geometryFamilyForLayerType(e) {
-		return e === "circle" ? "Point" : e === "line" ? "LineString" : e === "fill" ? "Polygon" : null;
-	}
-	inferPropertyDefs(e) {
-		let t = e.features.find((e) => e.properties && Object.keys(e.properties).length > 0)?.properties;
-		return t ? Object.entries(t).map(([e, t]) => ({
-			name: e,
-			type: typeof t == "number" ? "number" : "string"
-		})) : [{
-			name: "id",
-			type: "number"
-		}, {
-			name: "name",
-			type: "string"
-		}];
-	}
-	setModeInternal(e) {
-		switch (this.mode = e, this.draftPoints = [], this.cursorPos = null, this.snapPos = null, this.lastCursorPx = null, this.updateRubberband(), e) {
-			case "select":
-				this.adapter?.setDoubleClickZoomEnabled(!0), this.adapter?.setCursor(""), this.editState = "none", this.editHandles = [], this.updateEditHandles(), this.helpText = "Click a feature to select it.";
-				break;
-			case "draw-point":
-			case "draw-line":
-			case "draw-polygon":
-				this.adapter?.setDoubleClickZoomEnabled(!1), this.editState = "none", this.editHandles = [], this.hoveredHandle = null, this.selectedFeatureId = null, this.updateEditHandles(), this.updateSelectedSource(), this.adapter?.setCursor("crosshair"), this.helpText = this.mode === "draw-point" ? "Click to place a point." : this.mode === "draw-line" ? "Click to add vertices. Right-click or double-click to finish." : "Click to add vertices. Click first point or double-click to close.";
-				break;
-		}
-	}
-	async handleLayerConfirm(e) {
-		let t = e.detail, n = this.activeLayerIds[t.type];
-		if (n && n !== t.id) {
-			let e = this.drawLayers.find((e) => e.id === n);
-			e && this.releaseLayer(e);
-		}
-		let r = this.drawLayers.findIndex((e) => e.id === t.id);
-		if (r >= 0) this.drawLayers = this.drawLayers.map((e, n) => n === r ? t : e);
-		else if (t.borrowedSourceId || (t = {
-			...t,
-			borrowedSourceId: this.createPermLayer(t)
-		}), this.drawLayers = [...this.drawLayers, t], this.addMapLayersForDrawLayer(t), t.borrowedSourceId && this.adapter) {
-			let e = this.adapter.getSourceData(t.borrowedSourceId), n = e ? await this.resolveFeatureCollection(e) : null;
-			if (n) {
-				let e = [];
-				for (let r of n.features) {
-					if (!r.geometry || !ht(r.geometry.type)) continue;
-					let n = { ...r.properties };
-					e.push({
-						id: this.newId(),
-						layerId: t.id,
-						type: r.geometry.type,
-						coordinates: r.geometry.coordinates,
-						properties: n
-					});
-				}
-				if (this.features = [...this.features, ...e], t.properties.length <= 2) {
-					let e = this.inferPropertyDefs(n);
-					t = {
-						...t,
-						properties: e
-					}, this.drawLayers = this.drawLayers.map((e) => e.id === t.id ? t : e);
-				}
-			}
-			this.adapter.getSource(t.borrowedSourceId)?.setData({
-				type: "FeatureCollection",
-				features: []
-			});
-		}
-		this.activeLayerIds[t.type] = t.id, this.refreshDrawLayerSource(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: {
-				...e,
-				[i]: {
-					...n,
-					properties: t.properties
-				}
-			} }, "MAP");
-		}
-		this.pendingMode &&= (this.setModeInternal(this.pendingMode), null);
-	}
-	restoreBorrowedLayer(e) {
-		if (!e.borrowedSourceId || !this.adapter) return;
-		let t = this.features.filter((t) => t.layerId === e.id).map((e) => ({
-			type: "Feature",
-			geometry: {
-				type: e.type,
-				coordinates: e.coordinates
-			},
-			properties: { ...e.properties }
-		}));
-		this.adapter.getSource(e.borrowedSourceId)?.setData({
-			type: "FeatureCollection",
-			features: t
-		});
-	}
-	createPermLayer(e) {
-		let t = `webmapx-perm-src-${e.id}`;
-		this.dispatch("webmapx-add-source", {
-			id: t,
-			config: {
-				type: "geojson",
-				data: {
-					type: "FeatureCollection",
-					features: []
-				}
-			}
-		});
-		let n = at(e.id);
-		return e.type === "Polygon" ? (this.dispatch("webmapx-add-layer", {
-			id: n,
-			type: "fill",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				properties: e.properties
-			},
-			paint: {
-				"fill-color": U,
-				"fill-opacity": .35
-			}
-		}), this.dispatch("webmapx-add-layer", {
-			id: `${n}-outline`,
-			type: "line",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				hideFromLegend: !0,
-				properties: e.properties
-			},
-			paint: {
-				"line-color": U,
-				"line-width": 2
-			}
-		})) : e.type === "LineString" ? this.dispatch("webmapx-add-layer", {
-			id: n,
-			type: "line",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				properties: e.properties
-			},
-			paint: {
-				"line-color": U,
-				"line-width": 2
-			}
-		}) : this.dispatch("webmapx-add-layer", {
-			id: n,
-			type: "circle",
-			source: t,
-			title: e.name,
-			metadata: {
-				label: e.name,
-				legendRole: "overlay",
-				properties: e.properties
-			},
-			paint: {
-				"circle-radius": 5,
-				"circle-color": U,
-				"circle-stroke-width": 1,
-				"circle-stroke-color": "#555"
-			}
-		}), t;
-	}
-	releaseBorrowedLayer(e) {
-		if (e.borrowedSourceId) {
-			this.restoreBorrowedLayer(e), this.removeMapLayersForDrawLayer(e), this.features = this.features.filter((t) => t.layerId !== e.id), this.drawLayers = this.drawLayers.filter((t) => t.id !== e.id);
-			for (let [t, n] of Object.entries(this.activeLayerIds)) n === e.id && delete this.activeLayerIds[t];
-		}
-	}
-	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", H(e.id)), this.adapter?.store && xe(this.adapter.store, e.id), this.createdDrawLayerIds.delete(e.id), e.type === "Polygon" && this.createdDrawLayerIds.delete(`${e.id}-outline`);
-	}
-	releaseLayer(e) {
-		this.releaseBorrowedLayer(e);
-	}
-	removeFromEditing(e) {
-		let t = this.activeLayerIds[e.type] === e.id;
-		this.releaseLayer(e), t && this.setModeInternal("select");
-	}
-	handleLayerCancel() {
-		this.pendingMode = null;
-	}
-	handleClick(e) {
-		let t = this.effectiveSnap && this.snapPos ? this.snapPos : e.coords, n = Q(this.mode), r = n ? this.activeLayerIds[n] : null;
-		if (!(!r && this.mode !== "select")) {
-			if (this.mode === "draw-point") {
-				this.commitFeature({
-					id: this.newId(),
-					layerId: r,
-					type: "Point",
-					coordinates: t,
-					properties: this.defaultProperties(r)
-				});
-				return;
-			}
-			if (this.mode === "draw-line" || this.mode === "draw-polygon") {
-				if (this.draftPoints.length >= 2) {
-					let e = this.draftPoints[this.draftPoints.length - 1];
-					if (this.withinPixelThreshold(t, e, 10) || this.mode === "draw-polygon" && this.withinPixelThreshold(t, this.draftPoints[0], 14)) {
-						this.finishDraft(r);
-						return;
-					}
-				}
-				this.draftPoints.length === 0 && this.selectedFeatureId && (this.selectedFeatureId = null, this.editState = "none", this.editHandles = [], this.updateSelectedSource(), this.updateEditHandles()), this.draftPoints.push(t), this.draftRedoStack = [], this.uiVersion++, this.updateRubberband(), this.updateHelpTextDuring();
-				return;
-			}
-			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" && (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()));
-			}
-		}
-	}
-	handlePointerMove(e) {
-		if (this.cursorPos = e.coords, this.featureDrag) {
-			let t = this.features.find((e) => e.id === this.featureDrag.featureId);
-			if (t) {
-				let n = e.coords[0] - this.featureDrag.startCoords[0], r = e.coords[1] - this.featureDrag.startCoords[1];
-				t.coordinates = this.translateCoordsGeoPreserving(this.featureDrag.origCoords, t.type, n, r, this.featureDrag.origCentroidLng, this.featureDrag.origCentroidLat), this.refreshDrawLayerSource(t.layerId), this.updateEditHandles(), this.updateSelectedSource();
-			}
-			return;
-		}
-		if (this.dragging) {
-			let t = this.features.find((e) => e.id === this.dragging.handle.featureId);
-			if (t) {
-				let n = e.coords;
-				if (this.effectiveSnap && this.features.length > 0) {
-					let r = this.adapter.project(e.coords), i = this.computeSnapExcluding([r[0], r[1]], this.dragging.handle.featureId, $(t.type));
-					this.snapPos = i, i && (n = i);
-				} else this.snapPos = null;
-				this.applyDragMove(t, this.dragging.handle, n), this.dragging.lastCoords = e.coords, this.refreshDrawLayerSource(t.layerId), this.updateEditHandles(), this.updateSelectedSource(), this.updateSnapIndicator();
-				let r = this.dragging.handle;
-				this.selectedHandle && r.kind === "vertex" && this.selectedHandle.featureId === r.featureId && this.selectedHandle.partIdx === r.partIdx && this.selectedHandle.ringIdx === r.ringIdx && this.selectedHandle.vertIdx === r.vertIdx && (this.selectedHandle.coords = r.coords, this.updateSelectedVertexSource());
-			}
-			return;
-		}
-		if (this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon") {
-			if (this.effectiveSnap && this.features.length > 0) {
-				let t = this.adapter.project(e.coords), n = [t[0], t[1]];
-				(!this.lastCursorPx || Math.hypot(n[0] - this.lastCursorPx[0], n[1] - this.lastCursorPx[1]) > .5) && (this.lastCursorPx = n, this.snapPos = this.computeSnap(n));
-			} else this.snapPos = null;
-			this.updateRubberband();
-			return;
-		}
-		if (this.mode === "select") {
-			let t = this.adapter.project(e.coords), n = this.findFeatureAt([t[0], t[1]], e.coords);
-			this.editState === "selected" && this.selectedFeatureId ? this.adapter?.setCursor(n?.id === this.selectedFeatureId ? "grab" : "") : this.editState === "none" && this.adapter?.setCursor(n ? "pointer" : "");
-		}
-		if (this.mode === "select" && this.editState === "editing" && this.editHandles.length > 0) {
-			let t = this.adapter.project(e.coords), n = this.findHandleAt([t[0], t[1]]);
-			n !== this.hoveredHandle && (this.hoveredHandle = n, this.adapter?.setCursor(n ? "grab" : ""));
-		}
-	}
-	handlePointerDown(e) {
-		if (e.button !== 0) return;
-		if (this.editState === "selected" && this.selectedFeatureId) {
-			let t = [e.pixel[0], e.pixel[1]], n = this.findFeatureAt(t, e.coords);
-			if (n && n.id === this.selectedFeatureId) {
-				let t = this.centroid(n);
-				this.featureDrag = {
-					featureId: n.id,
-					startCoords: e.coords,
-					origCoords: JSON.parse(JSON.stringify(n.coordinates)),
-					origCentroidLat: t[1],
-					origCentroidLng: t[0]
-				}, this.adapter?.setPanEnabled(!1), this.adapter?.setCursor("grabbing");
-			}
-			return;
-		}
-		if (this.editState !== "editing") return;
-		let t = [e.pixel[0], e.pixel[1]], n = this.findHandleAt(t);
-		if (!n) {
-			this.selectedHandle && (this.selectedHandle = null, this.updateSelectedVertexSource());
-			return;
-		}
-		if (this.selectedHandle = n.kind === "vertex" ? n : null, this.updateSelectedVertexSource(), this.dragging = {
-			handle: n,
-			lastCoords: e.coords
-		}, this.adapter?.setPanEnabled(!1), this.adapter?.setCursor("grabbing"), n.kind === "midpoint") {
-			let t = this.features.find((e) => e.id === n.featureId);
-			if (t) {
-				this.insertVertex(t, n);
-				let r = n.afterVertIdx + 1, i = {
-					kind: "vertex",
-					featureId: n.featureId,
-					partIdx: n.partIdx,
-					ringIdx: n.ringIdx,
-					vertIdx: r,
-					coords: n.coords
-				};
-				this.dragging = {
-					handle: i,
-					lastCoords: e.coords
-				}, this.selectedHandle = i, this.updateSelectedVertexSource(), this.refreshDrawLayerSource(t.layerId), this.updateEditHandles();
-			}
-		}
-	}
-	handlePointerUp(e) {
-		if (this.featureDrag) {
-			let e = this.features.find((e) => e.id === this.featureDrag.featureId);
-			if (e) {
-				let t = this.drawLayers.find((t) => t.id === e.layerId);
-				t && this.computeSpecialProperties(e, t), this.pushHistory({
-					type: "update",
-					features: [{ ...e }]
-				}), this.features = [...this.features], this.refreshDrawLayerSource(e.layerId);
-			}
-			this.featureDrag = null, this.adapter?.setPanEnabled(!0), this.adapter?.setCursor("");
-			return;
-		}
-		if (!this.dragging) return;
-		this.snapPos = null, this.updateSnapIndicator(), this.adapter?.setPanEnabled(!0), this.adapter?.setCursor(this.hoveredHandle ? "grab" : "");
-		let t = this.features.find((e) => e.id === this.dragging.handle.featureId);
-		if (t) {
-			let e = this.drawLayers.find((e) => e.id === t.layerId);
-			e && this.computeSpecialProperties(t, e), this.pushHistory({
-				type: "update",
-				features: [{ ...t }]
-			}), this.features = [...this.features], this.refreshDrawLayerSource(t.layerId);
-		}
-		this.dragging = null;
-	}
-	handleContextMenu(e) {
-		let t = Q(this.mode), n = t ? this.activeLayerIds[t] : null;
-		n && (this.mode === "draw-line" || this.mode === "draw-polygon") && this.finishDraft(n);
-	}
-	defaultProperties(e) {
-		let t = this.drawLayers.find((t) => t.id === e);
-		return t ? Object.fromEntries(t.properties.map((e) => [e.name, null])) : {};
-	}
-	finishDraft(e) {
-		let t = this.draftPoints;
-		if (this.mode === "draw-line" && t.length >= 2) this.commitFeature({
-			id: this.newId(),
-			layerId: e,
-			type: "LineString",
-			coordinates: t.map((e) => [e[0], e[1]]),
-			properties: this.defaultProperties(e)
-		}, t);
-		else if (this.mode === "draw-polygon" && t.length >= 3) {
-			let n = [...t.map((e) => [e[0], e[1]]), [t[0][0], t[0][1]]];
-			this.commitFeature({
-				id: this.newId(),
-				layerId: e,
-				type: "Polygon",
-				coordinates: [n],
-				properties: this.defaultProperties(e)
-			}, t);
-		}
-		this.draftPoints = [], this.draftRedoStack = [], this.cursorPos = null, this.updateRubberband();
-	}
-	computeSnap(e) {
-		return this.computeSnapExcluding(e, null, this.mode === "draw-point");
-	}
-	computeSnapExcluding(e, t, n) {
-		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: mt,
-			edgePenalty: 8
-		}) : null;
-	}
-	updateSnapIndicator() {
-		if (!this.sharedLayersCreated) return;
-		let e = this.effectiveSnap && this.snapPos ? [{
-			type: "Feature",
-			geometry: {
-				type: "Point",
-				coordinates: this.snapPos
-			},
-			properties: {}
-		}] : [];
-		this.dispatch("webmapx-set-source-data", {
-			id: X,
-			data: {
-				type: "FeatureCollection",
-				features: e
-			}
-		});
-	}
-	updateRubberband() {
-		if (!this.sharedLayersCreated) return;
-		let e = [], t = [], n = this.mode === "draw-point" || this.mode === "draw-line" || this.mode === "draw-polygon", r = this.effectiveSnap && this.snapPos ? this.snapPos : this.cursorPos;
-		if (n && this.draftPoints.length > 0 && r) {
-			let n = [...this.draftPoints.map((e) => [e[0], e[1]]), [r[0], r[1]]];
-			e.push({
-				type: "Feature",
-				geometry: {
-					type: "LineString",
-					coordinates: n
-				},
-				properties: {}
-			});
-			for (let e of this.draftPoints) t.push({
-				type: "Feature",
-				geometry: {
-					type: "Point",
-					coordinates: [e[0], e[1]]
-				},
-				properties: {}
-			});
-		}
-		this.dispatch("webmapx-set-source-data", {
-			id: B,
-			data: {
-				type: "FeatureCollection",
-				features: e
-			}
-		}), this.dispatch("webmapx-set-source-data", {
-			id: G,
-			data: {
-				type: "FeatureCollection",
-				features: t
-			}
-		});
-		let i = n && this.effectiveSnap && this.snapPos ? [{
-			type: "Feature",
-			geometry: {
-				type: "Point",
-				coordinates: this.snapPos
-			},
-			properties: {}
-		}] : [];
-		this.dispatch("webmapx-set-source-data", {
-			id: X,
-			data: {
-				type: "FeatureCollection",
-				features: i
-			}
-		});
-	}
-	updateSelectedSource() {
-		if (!this.sharedLayersCreated) return;
-		let e = this.features.find((e) => e.id === this.selectedFeatureId), t = e && $(e.type) ? [{
-			type: "Feature",
-			id: e.id,
-			geometry: {
-				type: e.type,
-				coordinates: e.coordinates
-			},
-			properties: {}
-		}] : [];
-		this.dispatch("webmapx-set-source-data", {
-			id: W,
-			data: {
-				type: "FeatureCollection",
-				features: t
-			}
-		});
-	}
-	enterEditMode(e) {
-		this.editState = "editing", this.helpText = "Drag points to move. Drag midpoints to add a point. Click a point and press Delete to remove it. Click empty to exit.", this.updateEditHandles(), this.adapter?.setCursor("default"), this.requestUpdate();
-	}
-	computeHandles(e) {
-		let t = [];
-		if (e.type === "Point") return t.push({
-			kind: "vertex",
-			featureId: e.id,
-			partIdx: 0,
-			ringIdx: 0,
-			vertIdx: 0,
-			coords: e.coordinates
-		}), t;
-		if (e.type === "MultiPoint") return e.coordinates.forEach((n, r) => {
-			t.push({
-				kind: "vertex",
-				featureId: e.id,
-				partIdx: r,
-				ringIdx: 0,
-				vertIdx: 0,
-				coords: n
-			});
-		}), t;
-		let n = (n, r, i, a) => {
-			let o = a ? n.length - 1 : n.length;
-			for (let s = 0; s < o; s++) {
-				if (t.push({
-					kind: "vertex",
-					featureId: e.id,
-					partIdx: r,
-					ringIdx: i,
-					vertIdx: s,
-					coords: n[s]
-				}), !a && s === o - 1) continue;
-				let c = (s + 1) % o, l = [(n[s][0] + n[c][0]) / 2, (n[s][1] + n[c][1]) / 2];
-				t.push({
-					kind: "midpoint",
-					featureId: e.id,
-					partIdx: r,
-					ringIdx: i,
-					afterVertIdx: s,
-					coords: l
-				});
-			}
-		};
-		return e.type === "LineString" ? n(e.coordinates, 0, 0, !1) : e.type === "MultiLineString" ? e.coordinates.forEach((e, t) => n(e, t, 0, !1)) : e.type === "Polygon" ? e.coordinates.forEach((e, t) => n(e, 0, t, !0)) : e.type === "MultiPolygon" && e.coordinates.forEach((e, t) => {
-			e.forEach((e, r) => n(e, t, r, !0));
-		}), t;
-	}
-	updateEditHandles() {
-		if (!this.sharedLayersCreated) return;
-		let e = this.selectedFeatureId ? this.features.find((e) => e.id === this.selectedFeatureId) : null;
-		if (!e) {
-			this.editHandles = [], this.selectedHandle = null, this.updateSelectedVertexSource(), this.dispatch("webmapx-set-source-data", {
-				id: q,
-				data: {
-					type: "FeatureCollection",
-					features: []
-				}
-			}), this.dispatch("webmapx-set-source-data", {
-				id: J,
-				data: {
-					type: "FeatureCollection",
-					features: []
-				}
-			});
-			return;
-		}
-		this.selectedHandle && this.selectedHandle.featureId !== e.id && (this.selectedHandle = null, this.updateSelectedVertexSource()), this.editHandles = this.computeHandles(e);
-		let t = this.editState === "editing", n = this.editHandles.filter((e) => e.kind === "vertex").map((e) => ({
-			type: "Feature",
-			geometry: {
-				type: "Point",
-				coordinates: e.coords
-			},
-			properties: {}
-		})), r = t ? this.editHandles.filter((e) => e.kind === "midpoint").map((e) => ({
-			type: "Feature",
-			geometry: {
-				type: "Point",
-				coordinates: e.coords
-			},
-			properties: {}
-		})) : [];
-		this.dispatch("webmapx-set-source-data", {
-			id: q,
-			data: {
-				type: "FeatureCollection",
-				features: n
-			}
-		}), this.dispatch("webmapx-set-source-data", {
-			id: J,
-			data: {
-				type: "FeatureCollection",
-				features: r
-			}
-		});
-	}
-	findHandleAt(e) {
-		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);
-		}
-		return t;
-	}
-	applyDragMove(e, t, n) {
-		let r = JSON.parse(JSON.stringify(e.coordinates));
-		if (t.kind !== "vertex") return;
-		let { partIdx: i, ringIdx: a, vertIdx: o } = t;
-		if (e.type === "Point") {
-			e.coordinates = [n[0], n[1]], t.coords = n;
-			return;
-		} else if (e.type === "MultiPoint") r[i] = [n[0], n[1]];
-		else if (e.type === "LineString") r[o] = [n[0], n[1]];
-		else if (e.type === "MultiLineString") r[i][o] = [n[0], n[1]];
-		else if (e.type === "Polygon") {
-			r[a][o] = [n[0], n[1]];
-			let e = r[a];
-			o === 0 && (e[e.length - 1] = e[0]);
-		} else if (e.type === "MultiPolygon") {
-			r[i][a][o] = [n[0], n[1]];
-			let e = r[i][a];
-			o === 0 && (e[e.length - 1] = e[0]);
-		}
-		e.coordinates = r, t.coords = n;
-	}
-	translateCoordsGeoPreserving(e, t, n, r, i, a) {
-		if (!isFinite(a) || !isFinite(i)) return this.translateCoords(e, t, n, r);
-		let o = a + r, s = Math.cos(a * Math.PI / 180), c = Math.cos(o * Math.PI / 180), l = c > 1e-6 ? s / c : 1, u = i + n, d = (e) => [u + (e[0] - i) * l, e[1] + r];
-		return t === "Point" ? d(e) : t === "MultiPoint" || t === "LineString" ? e.map(d) : t === "MultiLineString" ? e.map((e) => e.map(d)) : t === "Polygon" ? e.map((e) => e.map(d)) : t === "MultiPolygon" ? e.map((e) => e.map((e) => e.map(d))) : e;
-	}
-	translateCoords(e, t, n, r) {
-		let i = (e) => [e[0] + n, e[1] + r];
-		return t === "Point" ? i(e) : t === "MultiPoint" || t === "LineString" ? e.map(i) : t === "MultiLineString" ? e.map((e) => e.map(i)) : t === "Polygon" ? e.map((e) => e.map(i)) : t === "MultiPolygon" ? e.map((e) => e.map((e) => e.map(i))) : e;
-	}
-	insertVertex(e, t) {
-		let n = JSON.parse(JSON.stringify(e.coordinates)), { partIdx: r, ringIdx: i, afterVertIdx: a } = t;
-		e.type === "LineString" ? n.splice(a + 1, 0, [t.coords[0], t.coords[1]]) : e.type === "MultiLineString" ? n[r].splice(a + 1, 0, [t.coords[0], t.coords[1]]) : e.type === "Polygon" ? n[i].splice(a + 1, 0, [t.coords[0], t.coords[1]]) : e.type === "MultiPolygon" && n[r][i].splice(a + 1, 0, [t.coords[0], t.coords[1]]), e.coordinates = n, this.pushHistory({
-			type: "update",
-			features: [{ ...e }]
-		});
-	}
-	updateSelectedVertexSource() {
-		if (this.uiVersion++, !this.sharedLayersCreated) return;
-		let e = this.selectedHandle ? [{
-			type: "Feature",
-			geometry: {
-				type: "Point",
-				coordinates: this.selectedHandle.coords
-			},
-			properties: {}
-		}] : [];
-		this.dispatch("webmapx-set-source-data", {
-			id: Y,
-			data: {
-				type: "FeatureCollection",
-				features: e
-			}
-		});
-	}
-	deleteSelectedVertex() {
-		let e = this.selectedHandle;
-		if (!e) return;
-		let t = this.features.find((t) => t.id === e.featureId);
-		if (!t) return;
-		let n = JSON.parse(JSON.stringify(t.coordinates)), { partIdx: r, ringIdx: i, vertIdx: a } = e;
-		if (t.type === "LineString") {
-			if (n.length <= 2) return;
-			n.splice(a, 1);
-		} else if (t.type === "MultiLineString") {
-			if (n[r].length <= 2) return;
-			n[r].splice(a, 1);
-		} else if (t.type === "Polygon") {
-			let e = n[i];
-			if (e.length - 1 <= 3) return;
-			a === 0 || a === e.length - 1 ? (e.splice(e.length - 1, 1), e.splice(0, 1), e.push([...e[0]])) : e.splice(a, 1);
-		} else if (t.type === "MultiPolygon") {
-			let e = n[r][i];
-			if (e.length - 1 <= 3) return;
-			a === 0 || a === e.length - 1 ? (e.splice(e.length - 1, 1), e.splice(0, 1), e.push([...e[0]])) : e.splice(a, 1);
-		} else if (t.type === "MultiPoint") {
-			if (n.length <= 1) return;
-			n.splice(r, 1);
-		} else return;
-		t.coordinates = n;
-		let o = this.drawLayers.find((e) => e.id === t.layerId);
-		o && this.computeSpecialProperties(t, o), this.pushHistory({
-			type: "update",
-			features: [{ ...t }]
-		}), this.features = [...this.features], this.refreshDrawLayerSource(t.layerId), this.selectedHandle = null, this.updateSelectedVertexSource(), this.updateEditHandles();
-	}
-	commitFeature(e, t) {
-		let n = this.features.filter((t) => t.layerId === e.layerId).reduce((e, t) => {
-			let n = parseInt(String(t.properties.id ?? 0), 10);
-			return isNaN(n) ? e : Math.max(e, n);
-		}, 0);
-		e.properties.id = n + 1;
-		let r = this.drawLayers.find((t) => t.id === e.layerId);
-		if (r && this.computeSpecialProperties(e, r), r) for (let t of r.properties) t.type === "create-time" && (e.properties[t.name] = Date.now());
-		this.pushHistory(t ? {
-			type: "finish",
-			features: [e],
-			draftPoints: t.map((e) => [e[0], e[1]])
-		} : {
-			type: "add",
-			features: [e]
-		}), this.features = [...this.features, e], this.refreshDrawLayerSource(e.layerId), this.setModeInternal(this.mode), this.selectedFeatureId = e.id, this.editState = $(e.type) ? "editing" : "selected", this.updateSelectedSource(), this.updateEditHandles();
-	}
-	deleteSelected() {
-		if (!this.selectedFeatureId) return;
-		let e = this.features.filter((e) => e.id === this.selectedFeatureId);
-		this.pushHistory({
-			type: "delete",
-			features: e
-		}), this.features = this.features.filter((e) => e.id !== this.selectedFeatureId), new Set(e.map((e) => e.layerId)).forEach((e) => this.refreshDrawLayerSource(e)), this.selectedFeatureId = null, this.editState = "none", this.editHandles = [], this.adapter?.setCursor(""), this.updateSelectedSource(), this.updateEditHandles();
-	}
-	pushHistory(e) {
-		this.history = this.history.slice(0, this.historyIndex + 1), this.history.push(e), this.historyIndex = this.history.length - 1, this.uiVersion++;
-	}
-	removeLastDraftPoint() {
-		this.draftRedoStack.push(this.draftPoints.pop()), this.uiVersion++, this.updateRubberband(), this.updateHelpTextDuring();
-	}
-	undoOrDraftBack() {
-		this.draftPoints.length > 0 ? this.removeLastDraftPoint() : this.undo();
-	}
-	redoOrDraftForward() {
-		this.draftRedoStack.length > 0 ? (this.draftPoints.push(this.draftRedoStack.pop()), this.uiVersion++, this.updateRubberband(), this.updateHelpTextDuring()) : this.redo();
-	}
-	undo() {
-		if (this.historyIndex < 0) return;
-		let e = this.history[this.historyIndex--];
-		this.uiVersion++;
-		let t = /* @__PURE__ */ new Set();
-		if (e.type === "add" || e.type === "finish") {
-			let n = new Set(e.features.map((e) => e.id));
-			this.features = this.features.filter((e) => !n.has(e.id)), e.features.forEach((e) => t.add(e.layerId));
-		} else e.type === "delete" ? (this.features = [...this.features, ...e.features], e.features.forEach((e) => t.add(e.layerId))) : e.type === "update" && (this.features = this.features.map((n) => {
-			let r = e.features.find((e) => e.id === n.id);
-			return r ? (t.add(n.layerId), {
-				...n,
-				coordinates: r.coordinates
-			}) : n;
-		}));
-		if (this.selectedFeatureId = null, this.editState = "none", this.updateSelectedSource(), this.updateEditHandles(), t.forEach((e) => this.refreshDrawLayerSource(e)), e.type === "finish" && e.draftPoints) {
-			let t = e.features[0];
-			this.mode = t.type === "LineString" ? "draw-line" : "draw-polygon", this.draftPoints = e.draftPoints.map((e) => [e[0], e[1]]), this.draftRedoStack = [], this.cursorPos = this.draftPoints[this.draftPoints.length - 1], this.updateRubberband(), this.updateHelpTextDuring();
-		}
-	}
-	redo() {
-		if (this.historyIndex >= this.history.length - 1) return;
-		let e = this.history[++this.historyIndex];
-		this.uiVersion++;
-		let t = /* @__PURE__ */ new Set();
-		if (e.type === "add" || e.type === "finish") this.features = [...this.features, ...e.features], e.features.forEach((e) => t.add(e.layerId));
-		else if (e.type === "delete") {
-			let n = new Set(e.features.map((e) => e.id));
-			this.features = this.features.filter((e) => !n.has(e.id)), e.features.forEach((e) => t.add(e.layerId));
-		} else e.type === "update" && (this.features = this.features.map((n) => {
-			let r = e.features.find((e) => e.id === n.id);
-			return r ? (t.add(n.layerId), {
-				...n,
-				coordinates: r.coordinates
-			}) : n;
-		}));
-		if (t.forEach((e) => this.refreshDrawLayerSource(e)), e.type === "finish") {
-			let t = e.features[0];
-			this.draftPoints = [], this.draftRedoStack = [], this.cursorPos = null, this.selectedFeatureId = t.id, this.editState = $(t.type) ? "editing" : "selected", this.updateSelectedSource(), this.updateEditHandles(), this.updateRubberband();
-		}
-	}
-	exportGeoJSON() {
-		this.exportFilename = "draw-export", this.exportMode = "combined", this.exportDialog.show();
-	}
-	async doExport() {
-		this.exportDialog.hide();
-		let e = this.exportFilename.trim() || "draw-export";
-		if (this.drawLayers.length <= 1 || this.exportMode === "combined") {
-			let t = {
-				type: "FeatureCollection",
-				features: this.features.map((e) => ({
-					type: "Feature",
-					id: e.id,
-					geometry: {
-						type: e.type,
-						coordinates: e.coordinates
-					},
-					properties: {
-						...e.properties,
-						_layer: this.drawLayers.find((t) => t.id === e.layerId)?.name ?? e.layerId
-					}
-				}))
-			};
-			this.downloadBlob(new Blob([JSON.stringify(t, null, 2)], { type: "application/json" }), `${e}.geojson`);
-		} else {
-			let t = new ye(new ve("application/zip"));
-			for (let e of this.drawLayers) {
-				let n = {
-					type: "FeatureCollection",
-					features: this.features.filter((t) => t.layerId === e.id).map((e) => ({
-						type: "Feature",
-						id: e.id,
-						geometry: {
-							type: e.type,
-							coordinates: e.coordinates
-						},
-						properties: { ...e.properties }
-					}))
-				}, r = e.name.replace(/[/\\?%*:|"<>]/g, "_");
-				await t.add(`${r}.geojson`, new _e(JSON.stringify(n, null, 2)));
-			}
-			this.downloadBlob(await t.close(), `${e}.zip`);
-		}
-	}
-	downloadBlob(e, t) {
-		let n = URL.createObjectURL(e), r = document.createElement("a");
-		r.href = n, r.download = t, r.click(), URL.revokeObjectURL(n);
-	}
-	newId() {
-		return `draw-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-	}
-	computeSpecialProperties(e, t) {
-		for (let n of t.properties) switch (n.type) {
-			case "longitude":
-			case "latitude": {
-				let t = e.type === "Point" ? e.coordinates : this.centroid(e);
-				e.properties[n.name] = n.type === "longitude" ? t[0] : t[1];
-				break;
-			}
-			case "area":
-				e.properties[n.name] = e.type === "Polygon" ? this.polygonArea(e.coordinates) : null;
-				break;
-			case "perimeter":
-			case "length":
-				e.properties[n.name] = e.type === "Polygon" ? this.ringLength(e.coordinates[0]) : e.type === "LineString" ? this.ringLength(e.coordinates, !1) : null;
-				break;
-			case "update-time":
-				e.properties[n.name] = Date.now();
-				break;
-		}
-	}
-	centroid(e) {
-		let t;
-		switch (e.type) {
-			case "Point":
-				t = [e.coordinates];
-				break;
-			case "MultiPoint":
-				t = e.coordinates;
-				break;
-			case "LineString":
-				t = e.coordinates;
-				break;
-			case "MultiLineString":
-				t = e.coordinates.flat();
-				break;
-			case "Polygon":
-				t = e.coordinates[0];
-				break;
-			case "MultiPolygon":
-				t = e.coordinates.flat(2);
-				break;
-			default: t = [];
-		}
-		if (t.length === 0) return [0, 0];
-		let n = t.reduce((e, t) => [e[0] + t[0], e[1] + t[1]], [0, 0]);
-		return [n[0] / t.length, n[1] / t.length];
-	}
-	haversineKm(e, t) {
-		let n = (t[1] - e[1]) * Math.PI / 180, r = (t[0] - e[0]) * Math.PI / 180, i = Math.sin(n / 2) ** 2 + Math.cos(e[1] * Math.PI / 180) * Math.cos(t[1] * Math.PI / 180) * Math.sin(r / 2) ** 2;
-		return 6371 * 2 * Math.atan2(Math.sqrt(i), Math.sqrt(1 - i));
-	}
-	ringLength(e, t = !0) {
-		let n = 0, r = e.length - 1;
-		for (let t = 0; t < r; t++) n += this.haversineKm(e[t], e[t + 1]);
-		return Math.round(n * 1e3);
-	}
-	polygonArea(e) {
-		let t = e[0], n = 0;
-		for (let e = 0, r = t.length - 1; e < t.length; r = e++) n += (t[r][0] + t[e][0]) * (t[r][1] - t[e][1]);
-		let r = Math.abs(n / 2), i = t[0][1] * Math.PI / 180;
-		return Math.round(111320 * Math.cos(i) * r * 111320);
-	}
-	withinPixelThreshold(e, t, n) {
-		if (!this.adapter) return !1;
-		let r = this.adapter.project(e), i = this.adapter.project(t);
-		return Math.hypot(r[0] - i[0], r[1] - i[1]) < n;
-	}
-	findFeatureAt(e, t) {
-		for (let n of [...this.features].reverse()) if (n.type === "Point") {
-			let t = this.adapter.project(n.coordinates);
-			if (Math.hypot(t[0] - e[0], t[1] - e[1]) < 10) return n;
-		} else if (n.type === "MultiPoint") for (let t of n.coordinates) {
-			let r = this.adapter.project(t);
-			if (Math.hypot(r[0] - e[0], r[1] - e[1]) < 10) return n;
-		}
-		else if (n.type === "LineString") {
-			if (this.pixelNearPolyline(e, n.coordinates, 10)) return n;
-		} else if (n.type === "MultiLineString") {
-			if (n.coordinates.some((t) => this.pixelNearPolyline(e, t, 10))) return n;
-		} else if (n.type === "Polygon") {
-			if (this.pointInRing(t, n.coordinates[0]) || this.pixelNearPolyline(e, n.coordinates[0], 10)) return n;
-		} else if (n.type === "MultiPolygon") for (let r of n.coordinates) {
-			let i = r[0];
-			if (i && (this.pointInRing(t, i) || this.pixelNearPolyline(e, i, 10))) return n;
-		}
-		return null;
-	}
-	pixelNearPolyline(e, t, n) {
-		for (let r = 0; r < t.length - 1; r++) {
-			let i = this.adapter.project(t[r]), a = this.adapter.project(t[r + 1]);
-			if (this.distToSegment(e, i, a) < n) return !0;
-		}
-		return !1;
-	}
-	distToSegment(e, t, n) {
-		let r = n[0] - t[0], i = n[1] - t[1];
-		if (r === 0 && i === 0) return Math.hypot(e[0] - t[0], e[1] - t[1]);
-		let a = Math.max(0, Math.min(1, ((e[0] - t[0]) * r + (e[1] - t[1]) * i) / (r * r + i * i)));
-		return Math.hypot(e[0] - (t[0] + a * r), e[1] - (t[1] + a * i));
-	}
-	pointInRing(e, t) {
-		let n = !1;
-		for (let r = 0, i = t.length - 1; r < t.length; i = r++) {
-			let a = t[r][0], o = t[r][1], s = t[i][0], c = t[i][1];
-			o > e[1] != c > e[1] && e[0] < (s - a) * (e[1] - o) / (c - o) + a && (n = !n);
-		}
-		return n;
-	}
-	dispatch(e, t) {
-		this.dispatchEvent(new CustomEvent(e, {
-			detail: t,
-			bubbles: !0,
-			composed: !0
-		}));
-	}
-	updateHelpTextDuring() {
-		let e = this.draftPoints.length;
-		this.mode === "draw-line" ? this.helpText = `${e} pt${e === 1 ? "" : "s"}. Double-click or right-click to finish.` : this.mode === "draw-polygon" && (this.helpText = e >= 3 ? `${e} pts. Click first point, double-click, or right-click to close.` : `${e} pt${e === 1 ? "" : "s"}. Need at least 3 to close.`);
-	}
-	render() {
-		let e = this.features.find((e) => e.id === this.selectedFeatureId), t = e ? this.drawLayers.find((t) => t.id === e.layerId) : null;
-		return b`
-            <div class="toolbar">
-                <sl-tooltip content="Select">
-                    <sl-icon-button name="cursor"
-                        ?active=${this.mode === "select"}
-                        @click=${() => this.requestDrawMode("select")}>
-                    </sl-icon-button>
-                </sl-tooltip>
-                <sl-tooltip content="Draw point">
-                    <sl-icon-button name="geo-fill"
-                        ?active=${this.mode === "draw-point"}
-                        @click=${() => this.requestDrawMode("draw-point")}>
-                    </sl-icon-button>
-                </sl-tooltip>
-                <sl-tooltip content="Draw line">
-                    <sl-icon-button name="slash-lg"
-                        ?active=${this.mode === "draw-line"}
-                        @click=${() => this.requestDrawMode("draw-line")}>
-                    </sl-icon-button>
-                </sl-tooltip>
-                <sl-tooltip content="Draw polygon">
-                    <sl-icon-button name="pentagon"
-                        ?active=${this.mode === "draw-polygon"}
-                        @click=${() => this.requestDrawMode("draw-polygon")}>
-                    </sl-icon-button>
-                </sl-tooltip>
-
-                <div class="divider"></div>
-
-                <sl-tooltip content="Snap to points and edges (${this.snapEnabled ? "on" : "off"}) — hold Alt to toggle">
-                    <sl-icon-button name="magnet"
-                        ?active=${this.effectiveSnap}
-                        @click=${() => {
-			this.snapEnabled = !this.snapEnabled, this.snapEnabled || (this.snapPos = null, this.updateRubberband());
-		}}>
-                    </sl-icon-button>
-                </sl-tooltip>
-
-                <div class="divider"></div>
-
-                <sl-tooltip content="Undo (${this.modKey}+Z)">
-                    <sl-icon-button name="arrow-counterclockwise"
-                        ?disabled=${this.historyIndex < 0 && this.draftPoints.length === 0}
-                        @click=${() => this.undoOrDraftBack()}>
-                    </sl-icon-button>
-                </sl-tooltip>
-                <sl-tooltip content="Redo (${this.modKey}+Y)">
-                    <sl-icon-button name="arrow-clockwise"
-                        ?disabled=${this.historyIndex >= this.history.length - 1 && this.draftRedoStack.length === 0}
-                        @click=${() => this.redoOrDraftForward()}>
-                    </sl-icon-button>
-                </sl-tooltip>
-
-                <div class="divider"></div>
-
-                <sl-tooltip content=${this.draftPoints.length > 0 ? "Remove last point" : this.selectedHandle ? "Delete selected point" : "Delete selected"}>
-                    <sl-icon-button name="trash"
-                        ?disabled=${this.draftPoints.length === 0 && !this.selectedFeatureId && !this.selectedHandle}
-                        @click=${() => this.draftPoints.length > 0 ? this.removeLastDraftPoint() : this.selectedHandle ? this.deleteSelectedVertex() : this.deleteSelected()}>
-                    </sl-icon-button>
-                </sl-tooltip>
-                <sl-tooltip content="Export GeoJSON">
-                    <sl-icon-button name="download"
-                        ?disabled=${this.features.length === 0}
-                        @click=${() => this.exportGeoJSON()}>
-                    </sl-icon-button>
-                </sl-tooltip>
-            </div>
-
-            <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) ? b`
-                <sl-button size="small" variant="primary" style="margin-bottom:.4rem;width:100%"
-                    @click=${() => {
-			let e = Q(this.mode), t = e ? this.activeLayerIds[e] : null;
-			t && this.finishDraft(t);
-		}}>
-                    Finish
-                </sl-button>
-            ` : ""}
-
-            ${this.drawLayers.length > 0 ? b`
-                <div class="layers-section">
-                    <div class="section-label">Editing</div>
-                    ${this.drawLayers.map((e) => b`
-                        <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 ? b`
-                                <sl-tooltip content="Stop editing">
-                                    <sl-icon-button name="x" class="remove-layer-btn"
-                                        @click=${(t) => {
-			t.stopPropagation(), this.removeFromEditing(e);
-		}}>
-                                    </sl-icon-button>
-                                </sl-tooltip>
-                            ` : ""}
-                        </div>
-                    `)}
-                </div>
-            ` : ""}
-
-            ${e && t ? b`
-                <div class="section-label" style="margin-top:.5rem">Selected: ${t.name}</div>
-                ${t.properties.map((n) => b`
-                    <div class="prop-row">
-                        <span class="prop-label">${n.name}</span>
-                        ${n.name === "id" || [
-			"longitude",
-			"latitude",
-			"area",
-			"perimeter",
-			"length",
-			"create-time",
-			"update-time"
-		].includes(n.type) ? b`<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" ? b`<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] ? b`<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" ? b`<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] ? b`<a class="prop-link" href=${String(e.properties[n.name])} target="_blank" rel="noopener noreferrer">${e.properties[n.name]}</a>` : ""}
-                                           </div>` : b`<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);
-		}}></sl-input>`}
-                    </div>
-                `)}
-            ` : ""}
-            </div>
-
-            <webmapx-draw-layer-dialog
-                @webmapx-draw-layer-confirm=${this.handleLayerConfirm}
-                @webmapx-draw-layer-cancel=${this.handleLayerCancel}>
-            </webmapx-draw-layer-dialog>
-
-            <sl-dialog id="export-dialog" label="Export GeoJSON">
-                <div class="prop-row">
-                    <span class="prop-label">Filename</span>
-                    <sl-input class="prop-value" size="small"
-                        .value=${this.exportFilename}
-                        @sl-input=${(e) => {
-			this.exportFilename = e.target.value;
-		}}>
-                        <span slot="suffix">${this.exportMode === "separate" ? ".zip" : ".geojson"}</span>
-                    </sl-input>
-                </div>
-                ${this.drawLayers.length > 1 ? b`
-                    <div style="margin-top:.6rem">
-                        <sl-radio-group label="Export as" .value=${this.exportMode}
-                            @sl-change=${(e) => {
-			this.exportMode = e.target.value;
-		}}>
-                            <sl-radio value="combined">Single GeoJSON file (all layers combined)</sl-radio>
-                            <sl-radio value="separate">Separate files per layer (ZIP archive)</sl-radio>
-                        </sl-radio-group>
-                    </div>
-                ` : ""}
-                <sl-button slot="footer" variant="primary" autofocus @click=${() => this.doExport()}>Download</sl-button>
-                <sl-button slot="footer" variant="default" @click=${() => this.exportDialog.hide()}>Cancel</sl-button>
-            </sl-dialog>
-        `;
-	}
-};
-e([n()], Z.prototype, "mode", void 0), e([n()], Z.prototype, "drawLayers", void 0), e([n()], Z.prototype, "features", void 0), e([n()], Z.prototype, "selectedFeatureId", void 0), e([n()], Z.prototype, "helpText", void 0), e([n()], Z.prototype, "pendingMode", void 0), e([n()], Z.prototype, "uiVersion", void 0), e([n()], Z.prototype, "isTouchDevice", void 0), e([n()], Z.prototype, "snapEnabled", void 0), e([n()], Z.prototype, "altActive", void 0), e([n()], Z.prototype, "editState", void 0), e([r("webmapx-draw-layer-dialog")], Z.prototype, "layerDialog", void 0), e([r("#export-dialog")], Z.prototype, "exportDialog", void 0), e([n()], Z.prototype, "exportFilename", void 0), e([n()], Z.prototype, "exportMode", void 0), Z = e([i("webmapx-draw-tool")], Z);
-function Q(e) {
-	return e === "draw-point" ? "Point" : e === "draw-line" ? "LineString" : e === "draw-polygon" ? "Polygon" : null;
-}
-function ht(e) {
-	return e === "Point" || e === "MultiPoint" || e === "LineString" || e === "MultiLineString" || e === "Polygon" || e === "MultiPolygon";
-}
-function $(e) {
-	return e === "Point" || e === "MultiPoint";
-}
-function gt(e) {
-	return e === "LineString" || e === "MultiLineString";
-}
-function _t(e) {
-	return e === "Polygon" || e === "MultiPolygon";
-}
-//#endregion
-export { Z as WebmapxDrawTool };