@sjvair/monitor-map 3.0.2 → 3.0.3

package/dist/lib/monitors/components/MonitorMarkersLegend.js

@@ -0,0 +1,35 @@
+import { monitorsManager as e } from "../monitors.svelte.js";
+import "svelte/internal/disclose-version";
+import * as t from "svelte/internal/client";
+//#region src/lib/monitors/components/MonitorMarkersLegend.svelte
+var n = t.from_html("<div class=\"w-1/5 shrink-0 h-[0.5em] border-l border-black last:relative last:right-px\"><span> </span></div>"), r = t.from_html("<div class=\"min-w-50 flex flex-col bg-white rounded shadow py-[0.5em] px-[1.5em]\"><p class=\"text-center whitespace-nowrap font-semibold\"> </p> <div class=\"map-legend-bar inline-block h-[1.5em] svelte-6hvosy\">&nbsp;</div> <div class=\"flex mb-[1.5em]\"><div class=\"w-1/5 shrink-0 h-[0.5em] border-l border-black\"><span class=\"relative top-[0.5em] right-[0.3em]\">0</span></div> <!></div></div>"), i = {
+	hash: "svelte-6hvosy",
+	code: ".map-legend-bar.svelte-6hvosy {background:linear-gradient(\n			90deg,\n			#00e400 0%,\n			#ffff00 20%,\n			#ff7e00 40%,\n			#ff0000 60%,\n			#8f3f97 80%,\n			#7e0023 100%\n		);}"
+};
+function a(a, o) {
+	t.push(o, !0), t.append_styles(a, i);
+	let s = t.derived(() => e.pollutant === "pm25" ? "PM 2.5" : "Ozone"), c = t.derived(() => e.pollutant === "pm25" ? [
+		12,
+		35,
+		55,
+		150,
+		250
+	] : [
+		55,
+		71,
+		86,
+		106,
+		201
+	]);
+	var l = r(), u = t.child(l), d = t.child(u);
+	t.reset(u);
+	var f = t.sibling(u, 4), p = t.sibling(t.child(f), 2);
+	t.each(p, 17, () => t.get(c), t.index, (e, r, i) => {
+		var a = n(), o = t.child(a);
+		t.set_class(o, 1, `relative top-[0.5em] ${i >= 3 ? "right-[0.8em]" : "right-[0.5em]"}`);
+		var s = t.child(o, !0);
+		t.reset(o), t.reset(a), t.template_effect(() => t.set_text(s, t.get(r))), t.append(e, a);
+	}), t.reset(f), t.reset(l), t.template_effect(() => t.set_text(d, `${t.get(s) ?? ""} Concentration`)), t.append(a, l), t.pop();
+}
+//#endregion
+export { a as default };

package/dist/lib/monitors/components/MonitorSubscriptionManager.js

@@ -1,6 +1,6 @@
 import { monitorsManager as e } from "../monitors.svelte.js";
-import * as t from "svelte/internal/client";
 import "svelte/internal/disclose-version";
+import * as t from "svelte/internal/client";
 import { BellCheckIcon as n, BellOffIcon as r, ChevronDownIcon as i } from "@lucide/svelte";
 import { getSubscriptions as a, subscribe as o, unsubscribe as s } from "@sjvair/sdk/account";
 //#region src/lib/monitors/components/MonitorSubscriptionManager.svelte

package/dist/lib/monitors/components/MonitorTooltip.js

@@ -1,8 +1,8 @@
 import { monitorsManager as e } from "../monitors.svelte.js";
 import { getCurrentLevel as t } from "../monitor-utils.js";
 import n from "../../components/DataBox.js";
-import * as r from "svelte/internal/client";
 import "svelte/internal/disclose-version";
+import * as r from "svelte/internal/client";
 import { format as i, formatDistanceToNow as a } from "date-fns";
 //#region src/lib/monitors/components/MonitorTooltip.svelte
 var o = r.from_html("<div class=\"flex gap-2\"><!> <div class=\"flex flex-col\"><p> </p> <h1 class=\"text-lg font-bold underline\"> </h1> <div class=\"mt-auto\"><p class=\"text-base leading-none\">Last updated</p> <p class=\"text-base leading-none\"> </p></div></div></div>");

package/dist/lib/monitors/components/MonitorWidgetModal.js

@@ -1,6 +1,6 @@
 import { portal as e } from "../../actions.js";
-import * as t from "svelte/internal/client";
 import "svelte/internal/disclose-version";
+import * as t from "svelte/internal/client";
 import { SquareX as n } from "@lucide/svelte";
 import { origin as r } from "@sjvair/sdk/http";
 //#region src/lib/monitors/components/MonitorWidgetModal.svelte

package/dist/lib/monitors/components/MonitorsDisplayOptions.js

@@ -1,10 +1,10 @@
-import { monitorsManager as e } from "../monitors.svelte.js";
-import { monitorsMapIntegration as t } from "../monitors-map-integration.svelte.js";
-import n from "../../components/DisplayOption.js";
-import r from "../../components/SegmentedControl.js";
-import i from "../../components/ToggleSwitch.js";
-import * as a from "svelte/internal/client";
+import e from "../../components/DisplayOption.js";
+import t from "../../components/SegmentedControl.js";
+import n from "../../components/ToggleSwitch.js";
+import { monitorsManager as r } from "../monitors.svelte.js";
+import { monitorsMapIntegration as i } from "../monitors-map-integration.svelte.js";
 import "svelte/internal/disclose-version";
+import * as a from "svelte/internal/client";
 //#region src/lib/monitors/components/MonitorsDisplayOptions.svelte
 var o = a.from_html("<img class=\"w-3\"/>"), s = a.from_html("<label class=\"flex gap-1 cursor-pointer whitespace-nowrap select-none\"><input type=\"checkbox\"/> <!> </label>"), c = a.from_html("<p class=\"text-lg font-bold underline\">Air Monitors</p> <div class=\"mb-2 w-full text-xs\"><div class=\"w-fit\"><!></div> <!></div> <!>", 1);
 function l(l, u) {
@@ -15,38 +15,38 @@ function l(l, u) {
 	}, {
 		label: "Ozone",
 		value: "o3"
-	}], f = a.derived(() => e.pollutant && e.pollutant === "pm25" ? Object.entries(t.displayOptions) : Object.entries(t.displayOptions).filter(([t, n]) => t === "inactive" || e.meta?.asIter.monitors.some((t) => t.label === n.label && e.pollutant && e.pollutant in t.entries)));
+	}], f = a.derived(() => r.pollutant && r.pollutant === "pm25" ? Object.entries(i.displayOptions) : Object.entries(i.displayOptions).filter(([e, t]) => e === "inactive" || r.meta?.asIter.monitors.some((e) => e.label === t.label && r.pollutant && r.pollutant in e.entries)));
 	a.user_effect(() => {
-		e.list = [], e.latest = null, e.update();
-	}), n(l, {
-		children: (n, l) => {
+		r.list = [], r.latest = null, r.update();
+	}), e(l, {
+		children: (e, l) => {
 			var u = c(), p = a.sibling(a.first_child(u), 2), m = a.child(p);
-			i(a.child(m), {
+			n(a.child(m), {
 				id: "monitor-clusters",
 				label: "Marker Clusters",
 				get value() {
-					return t.clustered;
+					return i.clustered;
 				},
 				set value(e) {
-					t.clustered = e;
+					i.clustered = e;
 				}
 			}), a.reset(m);
-			var h = a.sibling(m, 2), g = (t) => {
-				r(t, {
+			var h = a.sibling(m, 2), g = (e) => {
+				t(e, {
 					segmentLabel: "Pollutant:",
 					get options() {
 						return d;
 					},
 					get group() {
-						return e.pollutant;
+						return r.pollutant;
 					},
-					set group(t) {
-						e.pollutant = t;
+					set group(e) {
+						r.pollutant = e;
 					}
 				});
 			};
-			a.if(h, (t) => {
-				e.pollutant && t(g);
+			a.if(h, (e) => {
+				r.pollutant && e(g);
 			}), a.reset(p);
 			var _ = a.sibling(p, 2);
 			a.each(_, 17, () => a.get(f), ([e, t]) => t.label, (e, t) => {
@@ -67,7 +67,7 @@ function l(l, u) {
 				a.reset(l), a.template_effect(() => {
 					a.set_attribute(l, "for", a.get(c)), a.set_attribute(u, "id", a.get(c)), a.set_attribute(u, "name", i().label), a.set_text(p, ` ${i().label ?? ""}`);
 				}), a.bind_checked(u, () => i().value, (e) => i().value = e), a.append(e, l);
-			}), a.append(n, u);
+			}), a.append(e, u);
 		},
 		$$slots: { default: !0 }
 	}), a.pop();

package/dist/lib/monitors/monitors-icon-manager.svelte.js

@@ -1,5 +1,5 @@
-import { monitorsManager as e } from "./monitors.svelte.js";
-import { mapManager as t } from "../map/map.svelte.js";
+import { mapManager as e } from "../map/map.svelte.js";
+import { monitorsManager as t } from "./monitors.svelte.js";
 import { asDataURI as n, circle as r, square as i, triangle as a } from "../map/icons.js";
 import { MapIconManager as o } from "../map/integrations/map-icon-manager.js";
 import * as s from "svelte/internal/client";
@@ -27,9 +27,9 @@ var p = class extends o {
 	constructor() {
 		super(), s.effect_root(() => {
 			s.user_effect(() => {
-				if (e.levels) {
+				if (t.levels) {
 					let r = [
-						...e.levels,
+						...t.levels,
 						{
 							name: "default",
 							color: u
@@ -39,16 +39,16 @@ var p = class extends o {
 							color: d
 						}
 					];
-					for (let e of ["inside", "outside"]) for (let [i, a] of Object.entries(c)) for (let o of r) {
+					for (let t of ["inside", "outside"]) for (let [i, a] of Object.entries(c)) for (let o of r) {
 						let r = [
 							this.idPrefix,
-							e,
+							t,
 							o.name,
 							i
-						].filter(Boolean).join("-"), s = n(this.transformSvg(a(o.color, l, e === "inside" ? "#000000" : void 0)));
+						].filter(Boolean).join("-"), s = n(this.transformSvg(a(o.color, l, t === "inside" ? "#000000" : void 0)));
 						if (this.icons.has(r)) {
-							let e = this.icons.get(r);
-							e.image.src !== s && (e.image.src = s, t.map?.hasImage(r) && this.updateImage(e, t.map));
+							let t = this.icons.get(r);
+							t.image.src !== s && (t.image.src = s, e.map?.hasImage(r) && this.updateImage(t, e.map));
 							continue;
 						} else {
 							let e = new Image();

package/dist/lib/monitors/monitors-map-integration.svelte.js

@@ -1,5 +1,5 @@
-import { monitorsManager as e } from "./monitors.svelte.js";
-import { mapManager as t } from "../map/map.svelte.js";
+import { mapManager as e } from "../map/map.svelte.js";
+import { monitorsManager as t } from "./monitors.svelte.js";
 import { clickManager as n } from "../map/integrations/click-manager.js";
 import { MapIconLayerIntegration as r } from "../map/integrations/map-geojson-integration.svelte.js";
 import { MonitorsIconManager as i, getIconId as a } from "./monitors-icon-manager.svelte.js";
@@ -90,38 +90,38 @@ var m = {
 	set selectedMonitorId(e) {
 		f.set(this.#r, e, !0);
 	}
-	handleMonitorClick = (e) => {
+	handleMonitorClick = (t) => {
 		if (!this.onMonitorClick) return;
-		let n = [...e].sort((e, t) => (t.properties?.order ?? 0) - (e.properties?.order ?? 0))[0];
+		let n = [...t].sort((e, t) => (t.properties?.order ?? 0) - (e.properties?.order ?? 0))[0];
 		if (!n?.properties?.id || (this.selectedMonitorId = n.properties.id, this.onMonitorClick(this.selectedMonitorId), n.geometry.type !== "Point")) return;
 		let r = n.geometry.coordinates;
-		t.map?.easeTo({
+		e.map?.easeTo({
 			center: r,
-			zoom: Math.max(t.map.getZoom(), 12)
+			zoom: Math.max(e.map.getZoom(), 12)
 		});
 	};
 	#i = f.derived(() => {
-		if (!e.meta || !e.latest || !e.pollutant) return [];
-		let t = e.meta.entryType(e.pollutant).asIter.levels;
-		return Array.from(e.latest.values().map((e) => {
+		if (!t.meta || !t.latest || !t.pollutant) return [];
+		let e = t.meta.entryType(t.pollutant).asIter.levels;
+		return Array.from(t.latest.values().map((t) => {
 			let n = {
 				type: "Feature",
 				properties: {
 					icon: "outside-default-square",
-					id: e.id,
-					is_active: e.is_active,
-					is_sjvair: e.is_sjvair,
-					location: e.location,
-					name: e.name,
-					order: l(e),
-					type: e.type,
-					value: e.latest.value
+					id: t.id,
+					is_active: t.is_active,
+					is_sjvair: t.is_sjvair,
+					location: t.location,
+					name: t.name,
+					order: l(t),
+					type: t.type,
+					value: t.latest.value
 				},
-				geometry: e.position
+				geometry: t.position
 			};
-			if (t) {
-				let r = c(e.latest.value, t);
-				r && (n.properties.icon = a(e, r));
+			if (e) {
+				let r = c(t.latest.value, e);
+				r && (n.properties.icon = a(t, r));
 			}
 			return n;
 		}));
@@ -185,7 +185,7 @@ var m = {
 	set featuresByType(e) {
 		f.set(this.#o, e);
 	}
-	#s = f.derived(() => !e.meta || !e.pollutant ? [] : e.meta.entryType(e.pollutant).asIter.levels ?? []);
+	#s = f.derived(() => !t.meta || !t.pollutant ? [] : t.meta.entryType(t.pollutant).asIter.levels ?? []);
 	get clusterIconThresholds() {
 		return f.get(this.#s);
 	}
@@ -225,27 +225,27 @@ var m = {
 	constructor() {
 		super(), f.effect_root(() => {
 			f.user_effect(() => {
-				let e = this.filters;
-				t.map && (this.clustered ? this.renderer.syncFilter() : t.map.getLayer(this.referenceId) && t.map.setFilter(this.referenceId, e));
+				let t = this.filters;
+				e.map && (this.clustered ? this.renderer.syncFilter() : e.map.getLayer(this.referenceId) && e.map.setFilter(this.referenceId, t));
 			}), f.user_effect(() => {
-				let e = this.features;
-				!t.map || this.clustered || t.setDataSource(this.referenceId, e);
+				let t = this.features;
+				!e.map || this.clustered || e.setDataSource(this.referenceId, t);
 			}), f.user_effect(() => {
-				this.featuresByType, !(!t.map || !this.clustered) && this.renderer.syncFeatures();
+				this.featuresByType, !(!e.map || !this.clustered) && this.renderer.syncFeatures();
 			}), f.user_effect(() => {
-				let e = this.clusterIconThresholds;
-				!t.map || !this.clustered || !e.length || this.renderer.syncThresholds();
+				let t = this.clusterIconThresholds;
+				!e.map || !this.clustered || !t.length || this.renderer.syncThresholds();
 			}), f.user_effect(() => {
 				this.clustered;
-				let e = Object.keys(this.featuresByType).length > 0;
-				!p(() => t.map) || !e || p(() => this.apply());
+				let t = Object.keys(this.featuresByType).length > 0;
+				!p(() => e.map) || !t || p(() => this.apply());
 			}), f.user_effect(() => {
-				this.selectedMonitorId, t.map && p(() => this.applySelectedState());
+				this.selectedMonitorId, e.map && p(() => this.applySelectedState());
 			});
 		});
 	}
 	apply() {
-		t.map && (this.tooltipManager.has(this.referenceId) || this.tooltipManager.register(this.referenceId, d), this.clustered ? (t.map.getLayer(this.referenceId) && t.map.removeLayer(this.referenceId), t.map.getSource(this.referenceId) && t.map.removeSource(this.referenceId), n.unregister([this.referenceId]), this.tooltipManager.disable(), this.renderer.remove(), this.icons.loadIcons().then(() => {
+		e.map && (this.tooltipManager.has(this.referenceId) || this.tooltipManager.register(this.referenceId, d), this.clustered ? (e.map.getLayer(this.referenceId) && e.map.removeLayer(this.referenceId), e.map.getSource(this.referenceId) && e.map.removeSource(this.referenceId), n.unregister([this.referenceId]), this.tooltipManager.disable(), this.renderer.remove(), this.icons.loadIcons().then(() => {
 			this.renderer.apply(this.handleMonitorClick), this.tooltipManager.enable(), this.applySelectedState();
 		})) : (this.tooltipManager.disable(), this.renderer.remove(), this.tooltipManager.enable(), n.unregister([this.referenceId]), super.apply(), this.icons.loadIcons().then(() => {
 			n.register([this.referenceId], this.handleMonitorClick), this.applySelectedState();
@@ -255,15 +255,15 @@ var m = {
 		n.unregister([this.referenceId]), this.renderer.remove(), super.remove();
 	}
 	applySelectedState() {
-		if (!t.map) return;
-		let e = this.clustered ? this.renderer.unclusteredLayerIds : [this.referenceId], n = this.selectedMonitorId ? [
+		if (!e.map) return;
+		let t = this.clustered ? this.renderer.unclusteredLayerIds : [this.referenceId], n = this.selectedMonitorId ? [
 			"match",
 			["get", "id"],
 			this.selectedMonitorId,
 			1.3,
 			1
 		] : 1;
-		for (let r of e) t.map.getLayer(r) && t.map.setLayoutProperty(r, "icon-size", n);
+		for (let r of t) e.map.getLayer(r) && e.map.setLayoutProperty(r, "icon-size", n);
 	}
 }();
 //#endregion

package/dist/lib/monitors/monitors.svelte.js

@@ -1,68 +1,64 @@
-import { route as e } from "../src/router.js";
-import * as t from "svelte/internal/client";
+import * as e from "svelte/internal/client";
+import { XMap as t } from "@tstk/builtin-extensions";
 import { getMonitors as n, getMonitorsLatest as r, getMonitorsMeta as i } from "@sjvair/sdk";
-import { XMap as a } from "@tstk/builtin-extensions";
-import { Interval as o } from "@tstk/utils";
+import { Interval as a } from "@tstk/utils";
 //#region src/lib/monitors/monitors.svelte.ts
-var s = class {
-	autoUpdate = new o(async () => await this.update(), 120 * 1e3);
-	#e = t.state(!1);
+var o = class {
+	autoUpdate = new a(async () => await this.update(), 120 * 1e3);
+	#e = e.state(!1);
 	get initialized() {
-		return t.get(this.#e);
+		return e.get(this.#e);
 	}
-	set initialized(e) {
-		t.set(this.#e, e, !0);
+	set initialized(t) {
+		e.set(this.#e, t, !0);
 	}
-	#t = t.state(null);
+	#t = e.state(null);
 	get latest() {
-		return t.get(this.#t);
+		return e.get(this.#t);
 	}
-	set latest(e) {
-		t.set(this.#t, e, !0);
+	set latest(t) {
+		e.set(this.#t, t, !0);
 	}
-	#n = t.state(null);
+	#n = e.state(null);
 	get list() {
-		return t.get(this.#n);
+		return e.get(this.#n);
 	}
-	set list(e) {
-		t.set(this.#n, e, !0);
+	set list(t) {
+		e.set(this.#n, t, !0);
 	}
-	#r = t.state(null);
+	#r = e.state(null);
 	get meta() {
-		return t.get(this.#r);
+		return e.get(this.#r);
 	}
-	set meta(e) {
-		t.set(this.#r, e, !0);
+	set meta(t) {
+		e.set(this.#r, t, !0);
 	}
-	#i = t.state(null);
+	#i = e.state(null);
 	get pollutant() {
-		return t.get(this.#i);
+		return e.get(this.#i);
 	}
-	set pollutant(e) {
-		t.set(this.#i, e, !0);
+	set pollutant(t) {
+		e.set(this.#i, t, !0);
 	}
-	#a = t.derived(() => this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
+	#a = e.derived(() => this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
 	get levels() {
-		return t.get(this.#a);
+		return e.get(this.#a);
 	}
-	set levels(e) {
-		t.set(this.#a, e);
+	set levels(t) {
+		e.set(this.#a, t);
 	}
-	async init() {
-		if (this.initialized) return;
-		[this.list, this.meta] = await Promise.all([n(), i()]);
-		let t = e.search.pollutant;
-		this.pollutant = t === "pm25" || t === "o3" ? t : this.meta.default_pollutant, this.latest = await c(this.pollutant), this.autoUpdate.start(), this.initialized = !0;
+	async init(e) {
+		this.initialized ||= ([this.list, this.meta] = await Promise.all([n(), i()]), this.pollutant = e === "pm25" || e === "o3" ? e : this.meta.default_pollutant, this.latest = await s(this.pollutant), this.autoUpdate.start(), !0);
 	}
 	async update() {
-		this.initialized && ([this.list, this.latest] = await Promise.all([n(), c(this.pollutant || this.meta?.default_pollutant || "pm25")]));
+		this.initialized && ([this.list, this.latest] = await Promise.all([n(), s(this.pollutant || this.meta?.default_pollutant || "pm25")]));
 	}
 };
-async function c(e) {
-	let t = await r(e), n = new a();
-	for (let e of t) n.set(e.id, e);
-	return n;
+async function s(e) {
+	let n = await r(e), i = new t();
+	for (let e of n) i.set(e.id, e);
+	return i;
 }
-var l = new s();
+var c = new o();
 //#endregion
-export { l as monitorsManager };
+export { c as monitorsManager };

package/dist/lib/router-context.js

@@ -0,0 +1,13 @@
+import { getContext as e, setContext as t } from "svelte";
+//#region src/lib/router-context.ts
+var n = Symbol("monitor-map-router");
+function r(e) {
+	t(n, e);
+}
+function i() {
+	let t = e(n);
+	if (!t) throw Error("monitor-map router context not found. Wrap your app root with provideMonitorMapRouter(...) before rendering monitor-map components.");
+	return t;
+}
+//#endregion
+export { n as ROUTER_KEY, r as provideMonitorMapRouter, i as useMonitorMapRouter };

package/dist/lib/routes.js

@@ -0,0 +1,10 @@
+import e from "./MonitorMapLayout.js";
+import t from "./MainMapView.js";
+//#region src/lib/routes.ts
+var n = {
+	layout: e,
+	"/": t,
+	"/monitor/:id": () => import("./MonitorDetailPanel.js")
+};
+//#endregion
+export { n as monitorMapRoutes };

package/dist/lib/search/Search.js

@@ -0,0 +1,124 @@
+import { mapManager as e } from "../map/map.svelte.js";
+import { monitorsMapIntegration as t } from "../monitors/monitors-map-integration.svelte.js";
+import { useMonitorMapRouter as n } from "../router-context.js";
+import { debounce as r } from "../utils.js";
+import { geocode as i, monitorSearch as a } from "./service.js";
+import "svelte/internal/disclose-version";
+import * as o from "svelte/internal/client";
+import { onDestroy as s } from "svelte";
+import { Marker as c } from "@maptiler/sdk";
+import { SearchIcon as l } from "@lucide/svelte";
+//#region src/lib/search/Search.svelte
+var u = o.from_html("<button class=\"px-2 text-gray-400 hover:text-gray-600 text-xl leading-none cursor-pointer\" aria-label=\"Clear search\">×</button>"), d = o.from_html("<img class=\"w-10 h-10 object-contain mr-3 shrink-0\"/>"), f = o.from_html("<button class=\"flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left\"><!> <span class=\"text-sm truncate\"> </span></button>"), p = o.from_html("<p class=\"text-xs text-muted-foreground truncate\"> </p>"), m = o.from_html("<button class=\"flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left\"><span class=\"svg-icon location-on bg-brand w-6 h-6 shrink-0 mr-3\"></span> <div class=\"min-w-0\"><p class=\"text-sm font-medium truncate\"> </p> <!></div></button>"), h = o.from_html("<div><div class=\"flex items-center w-full h-12 shrink-0\"><button class=\"w-12 h-12 shrink-0 flex items-center justify-center rounded-full bg-brand border-4 border-white\" aria-label=\"Open search\"><!></button> <div class=\"overflow-hidden w-full h-full flex items-center\"><input type=\"text\" placeholder=\"Search monitors or locations...\" class=\"h-full px-2 text-sm bg-transparent border-none outline-none w-full\"/> <!></div></div> <div></div></div>");
+function g(g, _) {
+	o.push(_, !0);
+	let { navigate: v, basePath: y } = n(), b = o.state(!0), x = o.state(""), S = o.state(o.proxy([])), C = o.state(null), w = o.state(null);
+	function T(e) {
+		function t(t) {
+			!o.get(b) && !e.contains(t.target) && (o.set(b, !0), o.set(x, ""), o.set(S, [], !0));
+		}
+		return document.addEventListener("click", t, !0), { destroy() {
+			document.removeEventListener("click", t, !0);
+		} };
+	}
+	async function E() {
+		o.get(b) && (o.set(b, !1), o.get(w)?.focus());
+	}
+	function D() {
+		o.set(x, ""), o.set(S, [], !0), o.get(C)?.remove(), o.set(C, null);
+	}
+	async function O() {
+		let e = o.get(x);
+		if (!e) {
+			o.set(S, [], !0), o.get(C)?.remove(), o.set(C, null);
+			return;
+		}
+		let t = await a(e);
+		if (o.get(x) === e) if (t.length) o.set(S, t, !0);
+		else if (e.length > 4) {
+			let t = await i(e);
+			if (o.get(x) !== e) return;
+			o.set(S, t, !0);
+		} else o.set(S, [], !0);
+	}
+	let k = r(O, 500);
+	async function A(n) {
+		if (o.set(b, !0), o.set(x, ""), o.set(S, [], !0), o.get(C)?.remove(), o.set(C, null), e.map && n.monitor.position) {
+			let { coordinates: t } = n.monitor.position, r = [t[0], t[1]];
+			e.map.flyTo({
+				center: r,
+				zoom: 12
+			});
+		}
+		await v(`${y}/monitor/:id`, { params: { id: n.monitor.id } }), t.selectedMonitorId = n.monitor.id;
+	}
+	function j(t) {
+		let { feature: n } = t;
+		if (o.get(C)?.remove(), o.set(C, null), e.map) {
+			let t = [n.center[0], n.center[1]];
+			o.set(C, new c().setLngLat(t).addTo(e.map));
+			let r = n.place_type?.[0] === "address";
+			e.map.flyTo({
+				center: t,
+				...r && { zoom: 16 }
+			});
+		}
+		o.set(S, [], !0), o.set(b, !0);
+	}
+	s(() => {
+		o.get(C)?.remove();
+	});
+	var M = h(), N = o.child(M), P = o.child(N);
+	l(o.child(P), {
+		size: "24",
+		color: "#FFFFFF"
+	}), o.reset(P);
+	var F = o.sibling(P, 2), I = o.child(F);
+	o.remove_input_defaults(I), o.bind_this(I, (e) => o.set(w, e), () => o.get(w));
+	var L = o.sibling(I, 2), R = (e) => {
+		var t = u();
+		o.delegated("click", t, D), o.append(e, t);
+	};
+	o.if(L, (e) => {
+		o.get(x) && !o.get(b) && e(R);
+	}), o.reset(F), o.reset(N);
+	var z = o.sibling(N, 2);
+	o.each(z, 21, () => o.get(S), (e) => e.type === "monitor" ? e.monitor.id : e.feature.place_name, (e, t) => {
+		var n = o.comment(), r = o.first_child(n), i = (e) => {
+			var n = f(), r = o.child(n), i = (e) => {
+				var n = d();
+				o.template_effect(() => {
+					o.set_attribute(n, "src", o.get(t).logo.url), o.set_attribute(n, "alt", o.get(t).logo.alt);
+				}), o.append(e, n);
+			};
+			o.if(r, (e) => {
+				o.get(t).logo.url && e(i);
+			});
+			var a = o.sibling(r, 2), s = o.child(a, !0);
+			o.reset(a), o.reset(n), o.template_effect(() => o.set_text(s, o.get(t).monitor.name)), o.delegated("click", n, () => A(o.get(t))), o.append(e, n);
+		}, a = (e) => {
+			let n = o.derived(() => o.get(t).feature.place_name.indexOf(","));
+			var r = m(), i = o.sibling(o.child(r), 2), a = o.child(i), s = o.child(a, !0);
+			o.reset(a);
+			var c = o.sibling(a, 2), l = (e) => {
+				var r = p(), i = o.child(r, !0);
+				o.reset(r), o.template_effect((e) => o.set_text(i, e), [() => o.get(t).feature.place_name.substring(o.get(n) + 1).trim()]), o.append(e, r);
+			};
+			o.if(c, (e) => {
+				o.get(n) >= 0 && e(l);
+			}), o.reset(i), o.reset(r), o.template_effect((e) => o.set_text(s, e), [() => o.get(t).feature.place_name.substring(0, o.get(n) < 0 ? void 0 : o.get(n))]), o.delegated("click", r, () => j(o.get(t))), o.append(e, r);
+		};
+		o.if(r, (e) => {
+			o.get(t).type === "monitor" ? e(i) : e(a, -1);
+		}), o.append(e, n);
+	}), o.reset(z), o.reset(M), o.action(M, (e) => T?.(e)), o.template_effect(() => {
+		o.set_class(M, 1, o.clsx([
+			"flex flex-col bg-white shadow-md overflow-hidden transition-all duration-300 select-none",
+			o.get(b) ? "w-12 h-12 rounded-full" : "w-90 rounded-3xl",
+			!o.get(b) && o.get(S).length ? "max-h-90" : "max-h-12"
+		])), o.set_attribute(I, "tabindex", o.get(b) ? -1 : 0), o.set_class(z, 1, o.clsx(["overflow-y-auto transition-all duration-300 divide-y divide-gray-100", o.get(b) ? "max-h-0" : "max-h-80"]));
+	}), o.delegated("click", P, E), o.delegated("input", I, k), o.bind_value(I, () => o.get(x), (e) => o.set(x, e)), o.append(g, M), o.pop();
+}
+o.delegate(["click", "input"]);
+//#endregion
+export { g as default };