@sjvair/monitor-map 3.0.0 → 3.0.2

package/dist/lib/map/integrations/tooltip.svelte.js

@@ -0,0 +1,81 @@
+import { mapManager as e } from "../map.svelte.js";
+import "svelte/internal/client";
+import { XMap as t } from "@tstk/builtin-extensions";
+//#region src/lib/map/integrations/tooltip.svelte.ts
+function n() {
+	a.activeHandle?.clearTooltip();
+}
+function r() {
+	e.map.getCanvas().style.cursor = "pointer";
+}
+function i() {
+	e.map.getCanvas().style.cursor = "";
+}
+var a = class {
+	static activeHandle = null;
+	isEnabled = !1;
+	_tooltips = new t();
+	get tooltips() {
+		return this._tooltips.values();
+	}
+	enable(t) {
+		!e.map || this.isEnabled || (e.map.on("zoom", n), this.forEachHandle(t, (e) => e.enable()), this.isEnabled = !0);
+	}
+	disable(t) {
+		!e.map || !this.isEnabled || (e.map.off("zoom", n), this.forEachHandle(t, (e) => e.disable()), this.isEnabled = !1);
+	}
+	get(e) {
+		return this._tooltips.get(e);
+	}
+	has(e) {
+		return this._tooltips.has(e);
+	}
+	register(e, t, n = 0) {
+		let r = new o(e, t, n);
+		return this._tooltips.set(e, r), r;
+	}
+	with(e, t) {
+		let n = Array.isArray(e) ? e : [e];
+		for (let e of n) {
+			let n = this._tooltips.get(e);
+			n && t(n);
+		}
+	}
+	forEachHandle(e, t) {
+		if (e !== void 0 && this._tooltips.has(e)) t(this._tooltips.get(e));
+		else for (let e of this.tooltips) t(e);
+	}
+}, o = class {
+	layerId;
+	priority;
+	tooltip = null;
+	activeFeatureId = void 0;
+	isEnabled = !1;
+	clearTooltip = () => {
+		a.activeHandle === this && (this.tooltip?.remove(), this.tooltip = null, a.activeHandle = null, this.activeFeatureId = void 0);
+	};
+	setTooltip;
+	constructor(t, n, r = 0) {
+		this.layerId = t, this.priority = r, this.setTooltip = (t) => {
+			if (!e.map || !t.features) return;
+			let r = t.features[0]?.id, i = a.activeHandle === this, o = r === this.activeFeatureId;
+			if (i && this.tooltip && o) {
+				this.tooltip.setLngLat(t.lngLat);
+				return;
+			}
+			let s = a.activeHandle;
+			if (s !== null && s !== this && s.priority >= this.priority) return;
+			s?.clearTooltip(), this.activeFeatureId = void 0;
+			let c = n(t);
+			c && (this.tooltip = c, a.activeHandle = this, this.activeFeatureId = r, c.addTo(e.map));
+		};
+	}
+	enable() {
+		!e.map || this.isEnabled || (e.map.on("mousemove", this.layerId, r), e.map.on("mouseleave", this.layerId, i), e.map.on("mousemove", this.layerId, this.setTooltip), e.map.on("mouseleave", this.layerId, this.clearTooltip), this.isEnabled = !0);
+	}
+	disable() {
+		!e.map || !this.isEnabled || (this.clearTooltip(), e.map.off("mousemove", this.layerId, r), e.map.off("mouseleave", this.layerId, i), e.map.off("mousemove", this.layerId, this.setTooltip), e.map.off("mouseleave", this.layerId, this.clearTooltip), this.isEnabled = !1);
+	}
+};
+//#endregion
+export { a as TooltipManager };

package/dist/lib/map/map.svelte.js

@@ -0,0 +1,51 @@
+import { isGeoJSONSource as e } from "./utils.js";
+import * as t from "svelte/internal/client";
+import { Map as n, MapStyle as r, config as i } from "@maptiler/sdk";
+//#region src/lib/map/map.svelte.ts
+i.apiKey = "1ZwL7YJSSN42A678HHPn";
+var a = r.STREETS_V4.DEFAULT, o = [
+	"Sport",
+	"Tourism",
+	"Culture",
+	"Shopping",
+	"Food",
+	"Transport"
+], s = new class {
+	#e = t.state(null);
+	get map() {
+		return t.get(this.#e);
+	}
+	set map(e) {
+		t.set(this.#e, e, !0);
+	}
+	setDataSource(t, n) {
+		let r = s.map?.getSource(t);
+		e(r) && r.setData({
+			type: "FeatureCollection",
+			features: n
+		});
+	}
+	refreshMap() {
+		s.map && this.removeExcludedLayers();
+	}
+	removeExcludedLayers() {
+		for (let e of o) s.map?.getLayer(e) && s.map.removeLayer(e);
+	}
+	removeMap() {
+		return s.map?.remove();
+	}
+}(), c = (e) => {
+	let t = new n({
+		container: e,
+		center: [-119.7987626619462, 36.76272050981146],
+		zoom: 7,
+		style: a,
+		projection: "globe",
+		space: { preset: "milkyway" }
+	});
+	return t.once("idle", () => {
+		s.map = t;
+	}), () => t.remove();
+};
+//#endregion
+export { a as DefaultMapStyle, c as initializeMap, s as mapManager };

package/dist/lib/map/utils.js

@@ -0,0 +1,30 @@
+import { MapStyle as e, Popup as t } from "@maptiler/sdk";
+import { mount as n, unmount as r } from "svelte";
+//#region src/lib/map/utils.ts
+var i = (() => {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of Object.values(e)) {
+		let e = n.getId(), r = e.match(/^(.+?)_V(\d+)$/i), i = r ? r[1] : e, a = r ? parseInt(r[2], 10) : 0, o = t.get(i);
+		(!o || a > o.version) && t.set(i, {
+			version: a,
+			style: n
+		});
+	}
+	return Array.from(t.values()).map((e) => e.style).sort((e, t) => e.getName().localeCompare(t.getName()));
+})();
+function a(e) {
+	return typeof e == "object" && !!e && "type" in e && e.type === "geojson";
+}
+function o(e, i, a, o = !1) {
+	let s = document.createElement("div"), c = n(e, {
+		target: s,
+		props: i
+	}), l = new t({
+		closeButton: o,
+		closeOnClick: !1,
+		maxWidth: "none"
+	}).setLngLat(a).setDOMContent(s);
+	return l.on("close", () => r(c)), l;
+}
+//#endregion
+export { i as MAP_STYLE_OPTIONS, a as isGeoJSONSource, o as mountPopup };

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

@@ -0,0 +1,83 @@
+import { monitorsManager as e } from "../monitors.svelte.js";
+import { mapManager as t } from "../../map/map.svelte.js";
+import { getCurrentLevel as n } from "../monitor-utils.js";
+import r from "../../components/DataBox.js";
+import * as i from "svelte/internal/client";
+import "svelte/internal/disclose-version";
+import "@maptiler/sdk";
+import { area as a } from "@turf/area";
+import { convertArea as o } from "@turf/helpers";
+//#region src/lib/monitors/components/MonitorClusterTooltip.svelte
+var s = i.from_html("<span> </span>"), c = i.from_html("<div class=\"flex gap-2\"><!> <div class=\"flex flex-col\"><h1 class=\"text-lg font-bold\"> </h1> <p> <!></p> <div class=\"mt-auto\"><p class=\"text-base\"> </p> <p class=\"text-base leading-none\"> </p></div></div></div>");
+function l(l, u) {
+	i.push(u, !0);
+	let d = i.state(void 0);
+	i.user_effect(() => {
+		let r = t.map.getSource(u.feature.source), s = e.latest, c = e.meta;
+		r.getClusterLeaves(u.feature.properties.cluster_id, u.feature.properties.point_count, 0).then((e) => {
+			if (!e.length || !c || !s) return;
+			let t = e.map((e) => s?.get(e.properties.id)), r = t[0];
+			if (!r) return;
+			let a = c.entryType(r.latest.entry_type), o = c.monitorType(r.type), f = t.map((e) => e.position.coordinates), p = t.map((e) => parseFloat(e?.latest.value ?? "0")), m = Math.round(p.reduce((e, t) => e + t, 0) / t.length), h = n(m, a.asIter.levels);
+			i.set(d, {
+				color: h?.color || "#d3d3d3",
+				count: u.feature.properties.point_count,
+				coverage: l(f),
+				header: a.label,
+				clusterType: `${r.is_sjvair ? "SJVAir " : ""}${o.label} Monitors`,
+				subheading: "(cluster avg)",
+				max: p.reduce((e, t) => e > t ? e : t),
+				min: p.reduce((e, t) => e < t ? e : t),
+				value: m.toString()
+			}, !0);
+		});
+		function l(e) {
+			e.length === 3 && e.push(e[0]);
+			let t = a({
+				type: "Feature",
+				geometry: {
+					type: "Polygon",
+					coordinates: [e]
+				}
+			});
+			return t > 0 ? o(t, "meters", "miles").toFixed(3) : void 0;
+		}
+	});
+	var f = i.comment(), p = i.first_child(f), m = (e) => {
+		var t = c(), n = i.child(t);
+		r(n, {
+			get color() {
+				return i.get(d).color;
+			},
+			get header() {
+				return i.get(d).header;
+			},
+			get subheading() {
+				return i.get(d).subheading;
+			},
+			get value() {
+				return i.get(d).value;
+			}
+		});
+		var a = i.sibling(n, 2), o = i.child(a), l = i.child(o, !0);
+		i.reset(o);
+		var u = i.sibling(o, 2), f = i.child(u), p = i.sibling(f), m = (e) => {
+			var t = s(), n = i.child(t);
+			i.reset(t), i.template_effect(() => i.set_text(n, `covering ${i.get(d).coverage ?? ""}mi²`)), i.append(e, t);
+		};
+		i.if(p, (e) => {
+			i.get(d).coverage && e(m);
+		}), i.reset(u);
+		var h = i.sibling(u, 2), g = i.child(h), _ = i.child(g);
+		i.reset(g);
+		var v = i.sibling(g, 2), y = i.child(v);
+		i.reset(v), i.reset(h), i.reset(a), i.reset(t), i.template_effect(() => {
+			i.set_text(l, i.get(d).clusterType), i.set_text(f, `${i.get(d).count ?? ""} monitors `), i.set_text(_, `Max: ${i.get(d).max ?? ""}µg/m³`), i.set_text(y, `Min: ${i.get(d).min ?? ""}µg/m³`);
+		}), i.append(e, t);
+	};
+	i.if(p, (e) => {
+		i.get(d) && e(m);
+	}), i.append(l, f), i.pop();
+}
+//#endregion
+export { l as default };

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

@@ -0,0 +1,104 @@
+import { monitorsManager as e } from "../monitors.svelte.js";
+import * as t from "svelte/internal/client";
+import "svelte/internal/disclose-version";
+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
+var c = t.from_html("<button class=\"cursor-pointer px-4 py-2 text-sm rounded-t w-full flex items-center justify-between border border-black/30 hover:bg-[#F5F5F3]\">Unsubscribe <!></button>"), l = t.from_html("<button><span> </span> <!></button>"), u = t.from_html("<button aria-label=\"Close\" class=\"fixed inset-0 z-10\"></button> <div class=\"absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg\"><!> <!></div>", 1), d = t.from_html("<div class=\"relative select-none\"><button> <!></button> <!></div>");
+function f(f, p) {
+	t.push(p, !0);
+	let m = [
+		"unhealthy_sensitive",
+		"unhealthy",
+		"very_unhealthy",
+		"hazardous"
+	], h = t.state(!1), g = t.state(!1), _ = t.state(!1), v = t.state(null), y = t.derived(() => {
+		if (!e.meta) return [];
+		try {
+			return e.meta.entryType("pm25").asIter.levels.filter((e) => m.includes(e.name));
+		} catch {
+			return [];
+		}
+	});
+	t.user_effect(() => {
+		p.monitorId, t.set(h, !1), t.set(v, null), b();
+	});
+	async function b() {
+		let e = p.monitorId;
+		t.set(g, !0);
+		try {
+			let n = await a("");
+			if (e !== p.monitorId) return;
+			let r = n.find((t) => t.monitor === e);
+			t.set(v, r?.level ?? null, !0);
+		} finally {
+			e === p.monitorId && t.set(g, !1);
+		}
+	}
+	async function x(e) {
+		if (t.get(_) || !e) return;
+		t.set(_, !0);
+		let n = t.get(v);
+		try {
+			e === t.get(v) ? (await s({
+				monitorId: p.monitorId,
+				apiToken: "",
+				level: e
+			}), t.set(v, null)) : (await o({
+				monitorId: p.monitorId,
+				apiToken: "",
+				level: e
+			}), t.set(v, e, !0));
+		} catch {
+			t.set(v, n, !0);
+			return;
+		} finally {
+			t.set(_, !1);
+		}
+		t.set(h, !1);
+	}
+	var S = d(), C = t.child(S), w = t.child(C), T = t.sibling(w);
+	{
+		let e = t.derived(() => ["transition-transform duration-300", t.get(h) ? "rotate-180" : ""]);
+		i(T, {
+			size: 16,
+			get class() {
+				return t.get(e);
+			}
+		});
+	}
+	t.reset(C);
+	var E = t.sibling(C, 2), D = (e) => {
+		var i = u(), a = t.first_child(i), o = t.sibling(a, 2), s = t.child(o), d = (e) => {
+			var n = c();
+			r(t.sibling(t.child(n)), { size: 14 }), t.reset(n), t.delegated("click", n, () => x(t.get(v))), t.append(e, n);
+		};
+		t.if(s, (e) => {
+			t.get(v) && e(d);
+		});
+		var f = t.sibling(s, 2);
+		t.each(f, 17, () => t.get(y), (e) => e.name, (e, r) => {
+			let i = t.derived(() => t.get(r).name === t.get(v));
+			var a = l(), o = t.child(a), s = t.child(o, !0);
+			t.reset(o);
+			var c = t.sibling(o, 2), u = (e) => {
+				n(e, { size: 14 });
+			};
+			t.if(c, (e) => {
+				t.get(i) && e(u);
+			}), t.reset(a), t.template_effect(() => {
+				t.set_class(a, 1, t.clsx(["flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b", t.get(i) ? "" : "first:rounded-t hover:brightness-90 cursor-pointer"])), t.set_style(a, `background-color: ${t.get(r).color ?? ""}`), a.disabled = t.get(_), t.set_text(s, t.get(r).label);
+			}), t.delegated("click", a, function(...e) {
+				(t.get(i) ? null : () => x(t.get(r).name))?.apply(this, e);
+			}), t.append(e, a);
+		}), t.reset(o), t.delegated("click", a, () => t.set(h, !1)), t.append(e, i);
+	};
+	t.if(E, (e) => {
+		t.get(h) && e(D);
+	}), t.reset(S), t.template_effect(() => {
+		t.set_class(C, 1, t.clsx(["flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white", t.get(v) ? "border-green-700 bg-green-600 hover:bg-green-700" : "border-blue-600 bg-blue-500 hover:bg-blue-600"])), C.disabled = t.get(g), t.set_text(w, `${t.get(v) ? "Manage Subscription" : "Subscribe to Alerts"} `);
+	}), t.delegated("click", C, () => t.set(h, !t.get(h))), t.append(f, S), t.pop();
+}
+t.delegate(["click"]);
+//#endregion
+export { f as default };

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

@@ -0,0 +1,59 @@
+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 { 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>");
+function s(s, c) {
+	r.push(c, !0);
+	let l = r.derived(() => {
+		let n = e.latest?.get(c.feature.properties.id);
+		if (!n || !e.meta) return;
+		let r = e.meta.entryType(n.latest.entry_type), o = t(n.latest.value, r.asIter.levels), s = e.meta.monitorType(n.type).expected_interval;
+		return {
+			color: o?.color ?? "",
+			header: r.label,
+			date: {
+				formatted: i(n.latest.timestamp, "h:mm:aaa EEEE MMM dd, yyyy"),
+				diference: a(n.latest.timestamp, {
+					addSuffix: !0,
+					includeSeconds: !0
+				})
+			},
+			subheading: `(${s} avg)`,
+			value: Math.round(parseInt(n.latest.value, 10)).toString()
+		};
+	});
+	var u = r.comment(), d = r.first_child(u), f = (e) => {
+		var t = o(), i = r.child(t);
+		n(i, {
+			get color() {
+				return r.get(l).color;
+			},
+			get header() {
+				return r.get(l).header;
+			},
+			get subheading() {
+				return r.get(l).subheading;
+			},
+			get value() {
+				return r.get(l).value;
+			}
+		});
+		var a = r.sibling(i, 2), s = r.child(a), u = r.child(s, !0);
+		r.reset(s);
+		var d = r.sibling(s, 2), f = r.child(d, !0);
+		r.reset(d);
+		var p = r.sibling(d, 2), m = r.sibling(r.child(p), 2), h = r.child(m, !0);
+		r.reset(m), r.reset(p), r.reset(a), r.reset(t), r.template_effect(() => {
+			r.set_text(u, r.get(l).date.formatted), r.set_text(f, c.feature.properties.name), r.set_text(h, r.get(l).date.diference);
+		}), r.append(e, t);
+	};
+	r.if(d, (e) => {
+		r.get(l) && e(f);
+	}), r.append(s, u), r.pop();
+}
+//#endregion
+export { s as default };

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

@@ -0,0 +1,40 @@
+import { portal as e } from "../../actions.js";
+import * as t from "svelte/internal/client";
+import "svelte/internal/disclose-version";
+import { SquareX as n } from "@lucide/svelte";
+import { origin as r } from "@sjvair/sdk/http";
+//#region src/lib/monitors/components/MonitorWidgetModal.svelte
+var i = t.from_html("<div class=\"select-none\"><button class=\"cursor-pointer rounded border border-blue-400 bg-blue-500 px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-600\">Get the widget!</button> <div><div class=\"m-4 flex max-w-[min(450px,calc(100vw-2rem))] flex-col items-center justify-center rounded bg-white p-4 shadow-lg\"><button translate=\"no\" class=\"cursor-pointer self-end\"><!></button> <div translate=\"no\"></div> <p class=\"mb-4 text-center\">Copy the following code and paste it in your website</p> <div class=\"group relative flex w-full items-center overflow-hidden bg-neutral-800 hover:bg-neutral-600\"><code class=\"cursor-text overflow-x-scroll bg-inherit text-gray-300 select-text\"> </code> <div class=\"invisible absolute top-1/2 left-[calc(100%-3rem)] flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-black/80 p-2 group-hover:visible\"><button aria-label=\"Copy\" translate=\"no\" class=\"svg-icon content-copy cursor-pointer bg-gray-300\"></button></div> <div>Copied to clipboard!</div></div></div></div></div>");
+function a(a, o) {
+	let s = {
+		overflow: "hidden",
+		width: "290px",
+		height: "390px"
+	}, c = t.state(!1), l = t.state(!1), u = t.derived(() => `${r}/widget/#/${o.monitorId}`), d = t.derived(() => `<iframe src="${t.get(u)}" frameborder="0" allowtransparency="true" style="overflow: ${s.overflow}; width: ${s.width}; height: ${s.height};"></iframe>`);
+	function f() {
+		navigator.clipboard.writeText(t.get(d)), t.set(l, !0), setTimeout(() => {
+			t.set(l, !1);
+		}, 1e3 * 2);
+	}
+	function p() {
+		t.set(c, !0), document.body.style.overflow = "hidden";
+	}
+	function m() {
+		t.set(c, !1), document.body.style.overflow = "auto";
+	}
+	var h = i(), g = t.child(h), _ = t.sibling(g, 2), v = t.child(_), y = t.child(v);
+	n(t.child(y), {}), t.reset(y);
+	var b = t.sibling(y, 2);
+	t.html(b, () => t.get(d), !0), t.reset(b);
+	var x = t.sibling(b, 4), S = t.child(x), C = t.child(S, !0);
+	t.reset(S);
+	var w = t.sibling(S, 2), T = t.child(w);
+	t.reset(w);
+	var E = t.sibling(w, 2);
+	t.reset(x), t.reset(v), t.reset(_), t.action(_, (t) => e?.(t)), t.reset(h), t.template_effect(() => {
+		t.set_class(_, 1, t.clsx(["fixed inset-0 z-9999 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-200", t.get(c) ? "visible" : "invisible"])), t.set_text(C, t.get(d)), t.set_class(E, 1, t.clsx(["absolute flex h-full w-full items-center justify-center bg-[#1fb9ef] text-white transition-all duration-200 [text-shadow:1px_2px_4px_#333]", t.get(l) ? "left-0" : "left-[120%]"]));
+	}), t.delegated("click", g, p), t.delegated("click", y, m), t.delegated("click", T, f), t.append(a, h);
+}
+t.delegate(["click"]);
+//#endregion
+export { a as default };

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

@@ -0,0 +1,76 @@
+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 "svelte/internal/disclose-version";
+//#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) {
+	a.push(u, !0);
+	let d = [{
+		label: "PM 2.5",
+		value: "pm25"
+	}, {
+		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)));
+	a.user_effect(() => {
+		e.list = [], e.latest = null, e.update();
+	}), n(l, {
+		children: (n, l) => {
+			var u = c(), p = a.sibling(a.first_child(u), 2), m = a.child(p);
+			i(a.child(m), {
+				id: "monitor-clusters",
+				label: "Marker Clusters",
+				get value() {
+					return t.clustered;
+				},
+				set value(e) {
+					t.clustered = e;
+				}
+			}), a.reset(m);
+			var h = a.sibling(m, 2), g = (t) => {
+				r(t, {
+					segmentLabel: "Pollutant:",
+					get options() {
+						return d;
+					},
+					get group() {
+						return e.pollutant;
+					},
+					set group(t) {
+						e.pollutant = t;
+					}
+				});
+			};
+			a.if(h, (t) => {
+				e.pollutant && t(g);
+			}), a.reset(p);
+			var _ = a.sibling(p, 2);
+			a.each(_, 17, () => a.get(f), ([e, t]) => t.label, (e, t) => {
+				var n = a.derived(() => a.to_array(a.get(t), 2));
+				let r = () => a.get(n)[0], i = () => a.get(n)[1], c = a.derived(() => `${r()}-monitor-display-option`);
+				var l = s(), u = a.child(l);
+				a.remove_input_defaults(u);
+				var d = a.sibling(u, 2), f = (e) => {
+					var t = o();
+					a.template_effect(() => {
+						a.set_attribute(t, "src", i().icon.image.src), a.set_attribute(t, "alt", i().icon.image.alt);
+					}), a.append(e, t);
+				};
+				a.if(d, (e) => {
+					i().icon && e(f);
+				});
+				var p = a.sibling(d);
+				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);
+		},
+		$$slots: { default: !0 }
+	}), a.pop();
+}
+//#endregion
+export { l as default };

package/dist/lib/monitors/monitor-utils.js

@@ -0,0 +1,26 @@
+//#region src/lib/monitors/monitor-utils.ts
+function e(e, t) {
+	return e = typeof e == "string" ? parseInt(e, 10) : e, t.find((t) => e >= t.range[0] && e <= t.range[1]);
+}
+function t(e) {
+	switch (e.type) {
+		case "airgradient": return 5;
+		case "airnow": return 2;
+		case "aqview": return 3;
+		case "bam1022": return 6;
+		case "purpleair": return e.is_sjvair ? 4 : 1;
+		default: throw Error(`Map ordering for ${e.device} has not been set`);
+	}
+}
+function n(e) {
+	switch (e) {
+		case "airgradient": return "circle";
+		case "airnow":
+		case "aqview":
+		case "bam1022": return "triangle";
+		case "purpleair": return "square";
+		default: return "circle";
+	}
+}
+//#endregion
+export { e as getCurrentLevel, t as getOrder, n as getTypeShape };