@sjvair/monitor-map 3.0.1 → 3.0.3

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 };

package/dist/lib/search/service.js

@@ -0,0 +1,90 @@
+import { monitorsManager as e } from "../monitors/monitors.svelte.js";
+import t from "../assets/logos/airgradient-blue.js";
+import n from "../assets/logos/airnow-compact.js";
+import r from "../assets/logos/carb-compact.js";
+import i from "../assets/logos/purpleair-compact.js";
+import a from "../assets/logos/sjvair.js";
+import { geocoding as o } from "@maptiler/sdk";
+//#region src/lib/search/service.ts
+var s = [-119.8, 36.76];
+function c(e) {
+	switch (e.data_source.name) {
+		case "AQview": return {
+			url: r,
+			alt: "AQview"
+		};
+		case "AirNow.gov": return {
+			url: n,
+			alt: "AirNow.gov"
+		};
+		case "PurpleAir": return {
+			url: i,
+			alt: "PurpleAir"
+		};
+		case "Central California Asthma Collaborative": return {
+			url: a,
+			alt: "Central California Asthma Collaborative"
+		};
+		case "AirGradient": return {
+			url: t,
+			alt: "AirGradient"
+		};
+		default: return console.warn(`[search] Unknown data source: ${e.data_source.name}`), {
+			url: "",
+			alt: ""
+		};
+	}
+}
+var l = null;
+function u() {
+	return l ??= d();
+}
+function d() {
+	return new Promise((e) => {
+		if (!navigator.geolocation) {
+			e(s);
+			return;
+		}
+		let t = setTimeout(() => e(s), 3e3);
+		navigator.geolocation.getCurrentPosition((n) => {
+			clearTimeout(t), e([n.coords.longitude, n.coords.latitude]);
+		}, () => {
+			clearTimeout(t), e(s);
+		});
+	});
+}
+async function f(t) {
+	if (!e.latest) return [];
+	let n = t.toLowerCase(), r = [], i = [], a = [];
+	for (let t of e.latest.values()) {
+		let e = t.name.toLowerCase();
+		e === n ? r.push(t) : e.startsWith(n) ? i.push(t) : e.includes(n) && a.push(t);
+	}
+	return [
+		...r,
+		...i,
+		...a
+	].slice(0, 4).map((e) => ({
+		type: "monitor",
+		monitor: e,
+		logo: c(e)
+	}));
+}
+async function p(e) {
+	let t = await u();
+	try {
+		return (await o.forward(e, {
+			country: ["us"],
+			fuzzyMatch: !0,
+			limit: 4,
+			proximity: t
+		})).features.map((e) => ({
+			type: "geocode",
+			feature: e
+		}));
+	} catch {
+		return [];
+	}
+}
+//#endregion
+export { p as geocode, f as monitorSearch };

package/dist/lib/utils.js

@@ -1,8 +1,14 @@
-import e from "./node_modules/clsx/dist/clsx.js";
-import { twMerge as t } from "./node_modules/tailwind-merge/dist/bundle-mjs.js";
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
 //#region src/lib/utils.ts
 function n(...n) {
 	return t(e(n));
 }
+function r(e, t) {
+	let n;
+	return (...r) => {
+		clearTimeout(n), n = setTimeout(() => e(...r), t);
+	};
+}
 //#endregion
-export { n as cn };
+export { n as cn, r as debounce };

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.0.1",
+	"version": "3.0.3",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build:local": "PROD_MODE=local vite build",
+		"build": "PROD_MODE=production vite build",
 		"build:lib": "vite build --config vite.config.lib.ts",
 		"preview": "vite preview",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
@@ -24,64 +25,64 @@
 	},
 	"files": [
 		"src/lib",
-		"dist/lib",
-		"dist/monitor-map"
+		"dist/lib"
 	],
 	"sideEffects": [
 		"**/*.css"
 	],
 	"peerDependencies": {
+		"sv-router": "^0.16.2",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^2.1.0",
 		"@eslint/js": "^10.0.1",
 		"@fontsource-variable/inter": "^5.2.8",
-		"@internationalized/date": "^3.12.1",
-		"@lucide/svelte": "^1.16.0",
+		"@sveltejs/enhanced-img": "^0.11.0",
+		"@sveltejs/vite-plugin-svelte": "^7.2.0",
+		"@tailwindcss/vite": "^4.3.2",
+		"@types/node": "^26.1.1",
+		"eslint": "^10.6.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.20.0",
+		"globals": "^17.7.0",
+		"postcss": "^8.5.16",
+		"prettier": "^3.9.4",
+		"prettier-plugin-svelte": "^4.1.1",
+		"prettier-plugin-tailwindcss": "^0.8.0",
+		"shadcn-svelte": "^1.4.0",
+		"svelte": "^5.56.4",
+		"svelte-check": "^4.7.2",
+		"tailwindcss": "^4.3.2",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.63.0",
+		"vite": "^8.1.3"
+	},
+	"dependencies": {
+		"@internationalized/date": "^3.12.2",
+		"@lucide/svelte": "^1.23.0",
 		"@maptiler/sdk": "^4.0.2",
 		"@maptiler/weather": "^3.1.1",
 		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^3.0.2",
-		"@sveltejs/enhanced-img": "^0.10.4",
-		"@sveltejs/vite-plugin-svelte": "^7.1.2",
-		"@tailwindcss/vite": "^4.3.0",
 		"@tstk/builtin-extensions": "npm:@jsr/tstk__builtin-extensions@^1.0.8",
-		"@tstk/decorators": "npm:@jsr/tstk__decorators@^1.0.5",
-		"@tstk/types": "npm:@jsr/tstk__types@^1.1.0",
 		"@tstk/utils": "npm:@jsr/tstk__utils@^1.1.2",
 		"@turf/area": "^7.3.5",
+		"@turf/clusters-dbscan": "^7.3.5",
 		"@turf/helpers": "^7.3.5",
 		"@types/geojson": "^7946.0.16",
-		"@types/node": "^25.9.1",
 		"bits-ui": "^2.18.1",
 		"clsx": "^2.1.1",
-		"color2k": "^2.0.3",
-		"date-fns": "^4.3.0",
-		"eslint": "^10.4.0",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.17.1",
-		"globals": "^17.6.0",
-		"postcss": "^8.5.15",
-		"prettier": "^3.8.3",
-		"prettier-plugin-svelte": "^4.0.1",
-		"prettier-plugin-tailwindcss": "^0.8.0",
-		"shadcn-svelte": "^1.2.7",
-		"svelte": "^5.55.9",
-		"svelte-check": "^4.4.8",
+		"color2k": "^2.0.4",
+		"date-fns": "^4.4.0",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2",
-		"tailwindcss": "^4.3.0",
-		"tw-animate-css": "^1.4.0",
-		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.60.0",
-		"uplot": "^1.6.32",
-		"vite": "^8.0.14"
-	},
-	"dependencies": {
-		"@turf/clusters-dbscan": "^7.3.5",
-		"sv-router": "^0.16.2"
+		"uplot": "^1.6.32"
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"allowScripts": {
+		"sharp@0.34.5": true
+	}
 }

package/src/lib/LoadScreen.svelte

@@ -32,14 +32,14 @@
 
 {#if loadScreenState.enabled}
 	<div
-		class="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-4 overflow-hidden bg-white"
+		class="absolute top-0 left-0 z-50 flex h-full w-full items-center justify-center overflow-hidden bg-white"
 		{@attach animationTrigger}
 	>
-		<div>
+		<div class="flex justify-around gap-4">
 			<enhanced:img
 				src="$lib/assets/logos/sjvair-parts/sjvair-icon.webp"
 				alt="SJVAir Icon"
-				class="icon inline-block h-24! w-auto! transition-all duration-500 ease-out"
+				class="icon inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
 				class:translate-x-0={loadScreenState.entered}
 				class:-translate-x-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}
@@ -48,7 +48,7 @@
 			<enhanced:img
 				src="$lib/assets/logos/sjvair-parts/sjvair-sjv.webp"
 				alt="SJV"
-				class="sjv inline-block h-24! w-auto! transition-all duration-500 ease-out"
+				class="sjv inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
 				class:translate-y-0={loadScreenState.entered}
 				class:-translate-y-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}
@@ -57,7 +57,7 @@
 			<enhanced:img
 				src="$lib/assets/logos/sjvair-parts/sjvair-air.webp"
 				alt="Air"
-				class="air inline-block h-24! w-auto! transition-all duration-500 ease-out"
+				class="air inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
 				class:translate-y-0={loadScreenState.entered}
 				class:translate-y-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}

package/src/lib/MainMapView.svelte

@@ -0,0 +1 @@
+<!-- Map view — the map renders in App.svelte, not in the router outlet -->

package/src/lib/MapLegend.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import MonitorMarkersLegend from "$lib/monitors/components/MonitorMarkersLegend.svelte";
+	import HMSFireLegend from "$lib/hms/components/HMSFireLegend.svelte";
+</script>
+
+<!--
+<div class="z-10 absolute bottom-6 left-6 w-1/2 lg:w-1/5">
+	<MonitorMarkersLegend />
+	<HMSFireLegend />
+</div>
+-->
+<div class="flex flex-col gap-1 pointer-events-none pl-4 pb-4">
+	<HMSFireLegend />
+	<MonitorMarkersLegend />
+</div>