@sjvair/monitor-map 3.0.2 → 3.0.3

package/src/lib/index.ts

@@ -1,3 +1,37 @@
+/**
+ * Usage in a host app:
+ *
+ * ```ts
+ * // router.ts
+ * import { createRouter } from "sv-router";
+ * import { monitorMapRoutes } from "@sjvair/monitor-map";
+ *
+ * export const { route, navigate, p, isActive, Router } = createRouter({
+ *   "/my-map": monitorMapRoutes
+ *   // ...the host app's own routes
+ * });
+ * ```
+ *
+ * ```svelte
+ * <!-- app root -->
+ * <script>
+ *   import { provideMonitorMapRouter } from "@sjvair/monitor-map";
+ *   import { route, navigate, p, isActive, Router } from "./router";
+ *
+ *   provideMonitorMapRouter({ route, navigate, p, isActive, basePath: "/my-map" });
+ * </script>
+ *
+ * <Router />
+ * ```
+ */
+export { monitorMapRoutes } from "./routes";
+export {
+	ROUTER_KEY,
+	provideMonitorMapRouter,
+	useMonitorMapRouter,
+	type MonitorMapRouterApi
+} from "./router-context";
+
 // State managers
 export { monitorsManager } from "./monitors/monitors.svelte";
 export type { MonitorsManager } from "./monitors/monitors.svelte";

package/src/lib/map/Map.svelte

@@ -6,6 +6,7 @@
 
 	const { integrations }: { integrations: Array<SomeMapIntegration> } = $props();
 
+	// svelte-ignore state_referenced_locally (we only need the initial reference)
 	integrationsManager.register(...integrations);
 </script>
 

package/src/lib/map/Menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Attachment } from "svelte/attachments";
+	import { SlidersHorizontalIcon } from "@lucide/svelte";
 
 	let { children } = $props();
 	let isOpen: boolean = $state(false);
@@ -37,20 +38,16 @@
 	data-trigger
 	class:rounded-full={!isOpen}
 	class:delay-100={!isOpen}
-	class="absolute top-0 left-0 flex items-center justify-center overflow-hidden rounded bg-white p-1 shadow transition-all duration-0 select-none"
+	class="relative top-0 left-0 flex items-center justify-center overflow-hidden rounded bg-white p-1 shadow transition-all duration-0 select-none"
 >
 	<button
 		class:w-0={isOpen}
 		class:h-0={isOpen}
 		class:opacity-0={isOpen}
-		class="relative size-8 transition-all"
+		class="relative size-10 transition-all flex justify-center items-center"
 		aria-label="Display Options"
 	>
-		<enhanced:img
-			src="$lib/assets/icons/adjustment-horizontal.svg"
-			alt="SJVAir Icon"
-			class="size-8"
-		/>
+		<SlidersHorizontalIcon size="24" />
 	</button>
 	<div
 		class:h-55={isOpen}

package/src/lib/map/integrations/map-icon-manager.ts

@@ -1,5 +1,4 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
-//import { XMap } from "@tstk/builtin-extensions";
 import { mapManager } from "../map.svelte.ts";
 import type { MapImageIcon } from "./types";
 import { SvelteMap } from "svelte/reactivity";
@@ -13,6 +12,10 @@ export class MapIconManager {
 		}
 	}
 
+	get iter(): MapIterator<[string, MapImageIcon]> {
+		return this.icons.entries();
+	}
+
 	get(id: string): MapImageIcon | undefined {
 		return this.icons.get(id);
 	}

package/src/lib/monitors/monitors.svelte.ts

@@ -7,7 +7,6 @@ import {
 	type MonitorsMeta,
 	type SJVAirEntryLevel
 } from "@sjvair/sdk";
-import { route } from "../../router.ts";
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
 
@@ -26,12 +25,11 @@ class MonitorsManager {
 		this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null
 	);
 
-	async init(): Promise<void> {
+	async init(urlPollutant?: string | number | boolean): Promise<void> {
 		if (this.initialized) return;
 
 		[this.list, this.meta] = await Promise.all([getMonitors(), getMonitorsMeta()]);
 
-		const urlPollutant = route.search.pollutant;
 		this.pollutant =
 			urlPollutant === "pm25" || urlPollutant === "o3" ? urlPollutant : this.meta.default_pollutant;
 		this.latest = await getMonitorsLatestMap(this.pollutant);

package/src/lib/router-context.ts

@@ -0,0 +1,48 @@
+import { getContext, setContext } from "svelte";
+import type {
+	ConstructUrlOptions,
+	Navigation,
+	NavigateOptions,
+	RouterApi,
+	Routes
+} from "sv-router";
+
+export const ROUTER_KEY = Symbol("monitor-map-router");
+
+export interface MonitorMapRouterApi {
+	route: RouterApi<Routes>["route"];
+	/**
+	 * Loosely typed against `string` rather than sv-router's literal-checked `Path<T>` union:
+	 * internal calls prefix paths with `basePath` (a runtime string), which can't satisfy a
+	 * template literal type checked against the host app's full route tree.
+	 */
+	navigate(
+		path: string,
+		options?: NavigateOptions & { params?: Record<string, string> }
+	): Promise<Navigation>;
+	p(path: string, options?: ConstructUrlOptions & { params?: Record<string, string> }): string;
+	isActive: {
+		(path: string, params?: Record<string, string>): boolean;
+		startsWith(path: string, params?: Record<string, string>): boolean;
+	};
+	/**
+	 * Prefix under which monitorMapRoutes is mounted in the host app's router,
+	 * e.g. "" at the app root, or "/my-map" when nested under a host route.
+	 */
+	basePath: string;
+}
+
+export function provideMonitorMapRouter(api: MonitorMapRouterApi) {
+	setContext(ROUTER_KEY, api);
+}
+
+export function useMonitorMapRouter(): MonitorMapRouterApi {
+	const api = getContext<MonitorMapRouterApi>(ROUTER_KEY);
+	if (!api) {
+		throw new Error(
+			"monitor-map router context not found. Wrap your app root with " +
+				"provideMonitorMapRouter(...) before rendering monitor-map components."
+		);
+	}
+	return api;
+}

package/src/lib/routes.ts

@@ -0,0 +1,8 @@
+import MonitorMapLayout from "./MonitorMapLayout.svelte";
+import MainMapView from "./MainMapView.svelte";
+
+export const monitorMapRoutes = {
+	layout: MonitorMapLayout,
+	"/": MainMapView,
+	"/monitor/:id": () => import("./MonitorDetailPanel.svelte")
+};

package/src/lib/search/Search.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { Marker } from "@maptiler/sdk";
+	import { SearchIcon } from "@lucide/svelte";
+	import { useMonitorMapRouter } from "../router-context";
+	import { mapManager } from "$lib/map/map.svelte";
+	import { debounce } from "$lib/utils";
+	import { monitorSearch, geocode, type SearchResult } from "./service";
+	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
+
+	const { navigate, basePath } = useMonitorMapRouter();
+
+	let collapsed = $state(true);
+	let searchText = $state("");
+	let results: SearchResult[] = $state([]);
+	let marker: Marker | null = $state.raw(null);
+	let inputEl: HTMLInputElement | null = $state(null);
+
+	function clickOutside(node: HTMLElement) {
+		function handler(e: MouseEvent) {
+			if (!collapsed && !node.contains(e.target as Node)) {
+				collapsed = true;
+				searchText = "";
+				results = [];
+			}
+		}
+		document.addEventListener("click", handler, true);
+		return {
+			destroy() {
+				document.removeEventListener("click", handler, true);
+			}
+		};
+	}
+
+	async function openSearch() {
+		if (collapsed) {
+			collapsed = false;
+			inputEl?.focus();
+		}
+	}
+
+	function clearSearch() {
+		searchText = "";
+		results = [];
+		marker?.remove();
+		marker = null;
+	}
+
+	async function handleInput() {
+		const query = searchText;
+		if (!query) {
+			results = [];
+			marker?.remove();
+			marker = null;
+			return;
+		}
+		const monitorResults = await monitorSearch(query);
+		if (searchText !== query) return;
+		if (monitorResults.length) {
+			results = monitorResults;
+		} else if (query.length > 4) {
+			const geo = await geocode(query);
+			if (searchText !== query) return;
+			results = geo;
+		} else {
+			results = [];
+		}
+	}
+
+	const debouncedSearch = debounce(handleInput, 500);
+
+	async function selectMonitor(result: Extract<SearchResult, { type: "monitor" }>) {
+		collapsed = true;
+		searchText = "";
+		results = [];
+		marker?.remove();
+		marker = null;
+		if (mapManager.map && result.monitor.position) {
+			const { coordinates } = result.monitor.position;
+			const center: [number, number] = [coordinates[0], coordinates[1]];
+			mapManager.map.flyTo({
+				center,
+				zoom: 12
+			});
+		}
+		await navigate(`${basePath}/monitor/:id`, { params: { id: result.monitor.id } });
+		monitorsMapIntegration.selectedMonitorId = result.monitor.id;
+	}
+
+	function selectGeocode(result: Extract<SearchResult, { type: "geocode" }>) {
+		const { feature } = result;
+		marker?.remove();
+		marker = null;
+		if (mapManager.map) {
+			const center: [number, number] = [feature.center[0], feature.center[1]];
+			marker = new Marker().setLngLat(center).addTo(mapManager.map);
+			const isAddress = feature.place_type?.[0] === "address";
+			mapManager.map.flyTo({
+				center,
+				...(isAddress && { zoom: 16 })
+			});
+		}
+		results = [];
+		collapsed = true;
+	}
+
+	onDestroy(() => {
+		marker?.remove();
+	});
+</script>
+
+<div
+	class={[
+		"flex flex-col bg-white shadow-md overflow-hidden transition-all duration-300 select-none",
+		collapsed ? "w-12 h-12 rounded-full" : "w-90 rounded-3xl",
+		!collapsed && results.length ? "max-h-90" : "max-h-12"
+	]}
+	use:clickOutside
+>
+	<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"
+			onclick={openSearch}
+			aria-label="Open search"
+		>
+			<SearchIcon size="24" color="#FFFFFF" />
+		</button>
+		<div class="overflow-hidden w-full h-full flex items-center">
+			<input
+				bind:this={inputEl}
+				bind:value={searchText}
+				oninput={debouncedSearch}
+				type="text"
+				placeholder="Search monitors or locations..."
+				class="h-full px-2 text-sm bg-transparent border-none outline-none w-full"
+				tabindex={collapsed ? -1 : 0}
+			/>
+			{#if searchText && !collapsed}
+				<button
+					onclick={clearSearch}
+					class="px-2 text-gray-400 hover:text-gray-600 text-xl leading-none cursor-pointer"
+					aria-label="Clear search">×</button
+				>
+			{/if}
+		</div>
+	</div>
+	<div
+		class={[
+			"overflow-y-auto transition-all duration-300 divide-y divide-gray-100",
+			!collapsed ? "max-h-80" : "max-h-0"
+		]}
+	>
+		{#each results as result (result.type === "monitor" ? result.monitor.id : result.feature.place_name)}
+			{#if result.type === "monitor"}
+				<button
+					onclick={() => selectMonitor(result)}
+					class="flex items-center w-full h-12 px-4 hover:brightness-95 bg-white text-left"
+				>
+					{#if result.logo.url}
+						<img
+							src={result.logo.url}
+							alt={result.logo.alt}
+							class="w-10 h-10 object-contain mr-3 shrink-0"
+						/>
+					{/if}
+					<span class="text-sm truncate">{result.monitor.name}</span>
+				</button>
+			{:else}
+				{@const comma = result.feature.place_name.indexOf(",")}
+				<button
+					onclick={() => selectGeocode(result)}
+					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">
+							{result.feature.place_name.substring(0, comma < 0 ? undefined : comma)}
+						</p>
+						{#if comma >= 0}
+							<p class="text-xs text-muted-foreground truncate">
+								{result.feature.place_name.substring(comma + 1).trim()}
+							</p>
+						{/if}
+					</div>
+				</button>
+			{/if}
+		{/each}
+	</div>
+</div>

package/src/lib/search/service.ts

@@ -0,0 +1,101 @@
+import { geocoding, type GeocodingFeature } from "@maptiler/sdk";
+import type { MonitorLatestType } from "@sjvair/sdk";
+import { monitorsManager } from "$lib/monitors/monitors.svelte";
+import AirGradientLogo from "../assets/logos/airgradient-blue.svg";
+import AirNowLogo from "../assets/logos/airnow-compact.jpg";
+import CarbLogo from "../assets/logos/carb-compact.jpg";
+import PurpleairLogo from "../assets/logos/purpleair-compact.png";
+import SJVAirLogo from "../assets/logos/sjvair.svg";
+
+export type MonitorResult = {
+	type: "monitor";
+	monitor: MonitorLatestType<"pm25" | "o3">;
+	logo: { url: string; alt: string };
+};
+
+export type GeocodeResult = {
+	type: "geocode";
+	feature: GeocodingFeature;
+};
+
+export type SearchResult = MonitorResult | GeocodeResult;
+
+const SJV_CENTER: [number, number] = [-119.8, 36.76];
+
+function getMonitorLogo(monitor: MonitorLatestType<"pm25" | "o3">): { url: string; alt: string } {
+	switch (monitor.data_source.name) {
+		case "AQview":
+			return { url: CarbLogo, alt: "AQview" };
+		case "AirNow.gov":
+			return { url: AirNowLogo, alt: "AirNow.gov" };
+		case "PurpleAir":
+			return { url: PurpleairLogo, alt: "PurpleAir" };
+		case "Central California Asthma Collaborative":
+			return { url: SJVAirLogo, alt: "Central California Asthma Collaborative" };
+		case "AirGradient":
+			return { url: AirGradientLogo, alt: "AirGradient" };
+		default:
+			console.warn(`[search] Unknown data source: ${monitor.data_source.name}`);
+			return { url: "", alt: "" };
+	}
+}
+
+let proximityCache: Promise<[number, number]> | null = null;
+
+function getProximity(): Promise<[number, number]> {
+	return (proximityCache ??= resolveProximity());
+}
+
+function resolveProximity(): Promise<[number, number]> {
+	return new Promise((resolve) => {
+		if (!navigator.geolocation) {
+			resolve(SJV_CENTER);
+			return;
+		}
+		const timeout = setTimeout(() => resolve(SJV_CENTER), 3000);
+		navigator.geolocation.getCurrentPosition(
+			(pos) => {
+				clearTimeout(timeout);
+				resolve([pos.coords.longitude, pos.coords.latitude]);
+			},
+			() => {
+				clearTimeout(timeout);
+				resolve(SJV_CENTER);
+			}
+		);
+	});
+}
+
+export async function monitorSearch(query: string): Promise<SearchResult[]> {
+	if (!monitorsManager.latest) return [];
+	const normalized = query.toLowerCase();
+	const exact: MonitorLatestType<"pm25" | "o3">[] = [];
+	const prefix: MonitorLatestType<"pm25" | "o3">[] = [];
+	const substr: MonitorLatestType<"pm25" | "o3">[] = [];
+
+	for (const monitor of monitorsManager.latest.values()) {
+		const name = monitor.name.toLowerCase();
+		if (name === normalized) exact.push(monitor);
+		else if (name.startsWith(normalized)) prefix.push(monitor);
+		else if (name.includes(normalized)) substr.push(monitor);
+	}
+
+	return [...exact, ...prefix, ...substr]
+		.slice(0, 4)
+		.map((monitor) => ({ type: "monitor" as const, monitor, logo: getMonitorLogo(monitor) }));
+}
+
+export async function geocode(query: string): Promise<SearchResult[]> {
+	const proximity = await getProximity();
+	try {
+		const result = await geocoding.forward(query, {
+			country: ["us"],
+			fuzzyMatch: true,
+			limit: 4,
+			proximity
+		});
+		return result.features.map((feature) => ({ type: "geocode" as const, feature }));
+	} catch {
+		return [];
+	}
+}

package/src/lib/utils.ts

@@ -11,3 +11,14 @@ export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
 export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
+
+export function debounce<T extends (...args: any[]) => void>(
+	fn: T,
+	wait: number
+): (...args: Parameters<T>) => void {
+	let timer: ReturnType<typeof setTimeout>;
+	return (...args: Parameters<T>) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => fn(...args), wait);
+	};
+}

package/dist/lib/assets/icons/adjustment-horizontal.js

@@ -1,4 +0,0 @@
-//#region src/lib/assets/icons/adjustment-horizontal.svg
-var e = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='currentColor'%20class='size-6'%3e%3cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M10.5%206h9.75M10.5%206a1.5%201.5%200%201%201-3%200m3%200a1.5%201.5%200%201%200-3%200M3.75%206H7.5m3%2012h9.75m-9.75%200a1.5%201.5%200%200%201-3%200m3%200a1.5%201.5%200%200%200-3%200m-3.75%200H7.5m9-6h3.75m-3.75%200a1.5%201.5%200%200%201-3%200m3%200a1.5%201.5%200%200%200-3%200m-9.75%200h9.75'%20/%3e%3c/svg%3e";
-//#endregion
-export { e as default };

package/dist/lib/node_modules/@internationalized/date/dist/private/CalendarDate.js

@@ -1,122 +0,0 @@
-import { $93635573935797de$export$80ee6245ec4f29ec as e } from "./calendars/GregorianCalendar.js";
-import { $ad063034c8620db8$export$68781ddf31c0090f as t, $ad063034c8620db8$export$c19a80a9721b80f6 as n } from "./queries.js";
-import { $d07e34cce18680fd$export$83aac07b4c37b25 as r, $d07e34cce18680fd$export$84c95a83c799e074 as i, $d07e34cce18680fd$export$b21e0b124e224484 as a, $d07e34cce18680fd$export$e67a095c620b86fe as o } from "./conversion.js";
-import { $435a2ceaa8778ed8$export$31b5430eb18be4f8 as s, $435a2ceaa8778ed8$export$4e2d2ead65e5f7e3 as c, $435a2ceaa8778ed8$export$6814caac34ca03c7 as l, $435a2ceaa8778ed8$export$96b1d28349274637 as u, $435a2ceaa8778ed8$export$9a297d111fc86b79 as d, $435a2ceaa8778ed8$export$adaa4cf7ef1b65be as f, $435a2ceaa8778ed8$export$c4e2ecac49351ef2 as p, $435a2ceaa8778ed8$export$d52ced6badfb9a4c as m, $435a2ceaa8778ed8$export$dd02b3e0007dfe28 as h, $435a2ceaa8778ed8$export$e16d8520af44a096 as g, $435a2ceaa8778ed8$export$e5d5e1c1822b6e56 as _ } from "./manipulation.js";
-import { $58246871e4652552$export$4223de14708adc63 as v, $58246871e4652552$export$60dfd74aa96791bd as y, $58246871e4652552$export$bf79f1ebf4b18792 as b } from "./string.js";
-//#region node_modules/@internationalized/date/dist/private/CalendarDate.mjs
-function x(t) {
-	let n = typeof t[0] == "object" ? t.shift() : new e(), r;
-	if (typeof t[0] == "string") r = t.shift();
-	else {
-		let e = n.getEras();
-		r = e[e.length - 1];
-	}
-	let i = t.shift(), a = t.shift(), o = t.shift();
-	return [
-		n,
-		r,
-		i,
-		a,
-		o
-	];
-}
-var S = class e {
-	constructor(...e) {
-		let [t, n, r, i, a] = x(e);
-		this.calendar = t, this.era = n, this.year = r, this.month = i, this.day = a, p(this);
-	}
-	copy() {
-		return this.era ? new e(this.calendar, this.era, this.year, this.month, this.day) : new e(this.calendar, this.year, this.month, this.day);
-	}
-	add(e) {
-		return g(this, e);
-	}
-	subtract(e) {
-		return c(this, e);
-	}
-	set(e) {
-		return f(this, e);
-	}
-	cycle(e, t, n) {
-		return m(this, e, t, n);
-	}
-	toDate(e) {
-		return o(this, e);
-	}
-	toString() {
-		return y(this);
-	}
-	compare(e) {
-		return t(this, e);
-	}
-}, C = class e {
-	constructor(...e) {
-		let [t, n, r, i, a] = x(e);
-		this.calendar = t, this.era = n, this.year = r, this.month = i, this.day = a, this.hour = e.shift() || 0, this.minute = e.shift() || 0, this.second = e.shift() || 0, this.millisecond = e.shift() || 0, p(this);
-	}
-	copy() {
-		return this.era ? new e(this.calendar, this.era, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond) : new e(this.calendar, this.year, this.month, this.day, this.hour, this.minute, this.second, this.millisecond);
-	}
-	add(e) {
-		return g(this, e);
-	}
-	subtract(e) {
-		return c(this, e);
-	}
-	set(e) {
-		return f(_(this, e), e);
-	}
-	cycle(e, t, n) {
-		switch (e) {
-			case "era":
-			case "year":
-			case "month":
-			case "day": return m(this, e, t, n);
-			default: return h(this, e, t, n);
-		}
-	}
-	toDate(e, t) {
-		return o(this, e, t);
-	}
-	toString() {
-		return v(this);
-	}
-	compare(e) {
-		let r = t(this, e);
-		return r === 0 ? n(this, a(e)) : r;
-	}
-}, w = class e {
-	constructor(...e) {
-		let [t, n, r, i, a] = x(e), o = e.shift(), s = e.shift();
-		this.calendar = t, this.era = n, this.year = r, this.month = i, this.day = a, this.timeZone = o, this.offset = s, this.hour = e.shift() || 0, this.minute = e.shift() || 0, this.second = e.shift() || 0, this.millisecond = e.shift() || 0, p(this);
-	}
-	copy() {
-		return this.era ? new e(this.calendar, this.era, this.year, this.month, this.day, this.timeZone, this.offset, this.hour, this.minute, this.second, this.millisecond) : new e(this.calendar, this.year, this.month, this.day, this.timeZone, this.offset, this.hour, this.minute, this.second, this.millisecond);
-	}
-	add(e) {
-		return u(this, e);
-	}
-	subtract(e) {
-		return l(this, e);
-	}
-	set(e, t) {
-		return s(this, e, t);
-	}
-	cycle(e, t, n) {
-		return d(this, e, t, n);
-	}
-	toDate() {
-		return r(this);
-	}
-	toString() {
-		return b(this);
-	}
-	toAbsoluteString() {
-		return this.toDate().toISOString();
-	}
-	compare(e) {
-		return this.toDate().getTime() - i(e, this.timeZone).toDate().getTime();
-	}
-};
-//#endregion
-export { S as $2aaf608024c21ca1$export$99faa760c7908e4f, C as $2aaf608024c21ca1$export$ca871e8dbb80966f, w as $2aaf608024c21ca1$export$d3b7288e7994edea };