@sjvair/monitor-map 4.3.0 → 5.0.0-beta.0

package/dist/lib/options/rows/MarkerIcon.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { MapImageIcon } from "../../map/integrations/types";
+	/** A marker image from its SVG markup (e.g. map-sdk's `circle`). */
+	let { svg, class: className = "w-4" }: { svg: string | undefined; class?: string } = $props();
 
-	let { icon, class: className = "w-4" }: { icon: MapImageIcon | undefined; class?: string } =
-		$props();
+	const src = $derived(svg ? `data:image/svg+xml;utf8,${encodeURIComponent(svg)}` : undefined);
 </script>
 
-{#if icon}
-	<img src={icon.image.src} alt="" class={className} />
+{#if src}
+	<img {src} alt="" class={className} />
 {/if}

package/dist/lib/options/rows/MarkerIcon.svelte.d.ts

@@ -1,6 +1,5 @@
-import type { MapImageIcon } from "../../map/integrations/types";
 type $$ComponentProps = {
-    icon: MapImageIcon | undefined;
+    svg: string | undefined;
     class?: string;
 };
 declare const MarkerIcon: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/lib/search/Search.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
-	import { Marker } from "@maptiler/sdk";
 	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
+	import type { MapContext } from "@sjvair/map-sdk";
 	import { useMonitorMapRouter } from "../router-context";
-	import { mapManager } from "../map/map-manager.svelte.js";
 	import { debounce } from "../utils";
+	import { searchPin } from "./search-pin.svelte.js";
 	import { monitorSearch, geocode, type SearchResult } from "./service";
-	import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";
 
+	interface SearchProps {
+		map: MapContext;
+	}
+
+	const { map }: SearchProps = $props();
 	const { navigate, basePath } = useMonitorMapRouter();
 
 	let collapsed = $state(true);
 	let searchText = $state("");
 	let results: SearchResult[] = $state([]);
-	let marker: Marker | null = $state.raw(null);
+	// The layout passes one MapContext for the widget's lifetime.
+	// svelte-ignore state_referenced_locally
+	const pin = searchPin(map);
 	let inputEl: HTMLInputElement | null = $state(null);
 
 	function clickOutside(node: HTMLElement) {
@@ -42,16 +47,14 @@
 	function clearSearch() {
 		searchText = "";
 		results = [];
-		marker?.remove();
-		marker = null;
+		pin.clear();
 	}
 
 	async function handleInput() {
 		const query = searchText;
 		if (!query) {
 			results = [];
-			marker?.remove();
-			marker = null;
+			pin.clear();
 			return;
 		}
 		const monitorResults = await monitorSearch(query);
@@ -73,40 +76,24 @@
 		collapsed = true;
 		searchText = "";
 		results = [];
-		marker?.remove();
-		marker = null;
-		if (mapManager.map && result.monitor.position) {
+		pin.clear();
+		if (result.monitor.position) {
 			const { coordinates } = result.monitor.position;
-			const center: [number, number] = [coordinates[0], coordinates[1]];
-			mapManager.map.flyTo({
-				center,
-				zoom: 12
-			});
+			map.flyTo({ center: [coordinates[0], coordinates[1]], 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 })
-			});
-		}
+		pin.clear();
+		const center: [number, number] = [feature.center[0], feature.center[1]];
+		pin.place(center);
+		const isAddress = feature.place_type?.[0] === "address";
+		map.flyTo({ center, ...(isAddress && { zoom: 16 }) });
 		results = [];
 		collapsed = true;
 	}
-
-	onDestroy(() => {
-		marker?.remove();
-	});
 </script>
 
 <div

package/dist/lib/search/Search.svelte.d.ts

@@ -1,3 +1,7 @@
-declare const Search: import("svelte").Component<Record<string, never>, {}, "">;
+import type { MapContext } from "@sjvair/map-sdk";
+interface SearchProps {
+    map: MapContext;
+}
+declare const Search: import("svelte").Component<SearchProps, {}, "">;
 type Search = ReturnType<typeof Search>;
 export default Search;

package/dist/lib/search/search-pin.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type MapContext } from "@sjvair/map-sdk";
+export interface SearchPin {
+    place(center: [number, number]): void;
+    clear(): void;
+}
+/**
+ * The pin a geocoded place leaves on the map. It follows the map: when the GL map is replaced
+ * (a basemap or style rebuild), the pin leaves the old one and is added to the new one. Call it
+ * during component init; the pin is removed when the component is destroyed.
+ */
+export declare function searchPin(map: MapContext): SearchPin;

package/dist/lib/search/search-pin.svelte.js

@@ -0,0 +1,28 @@
+import { Marker } from "@maptiler/sdk";
+import { maptilerMap } from "@sjvair/map-sdk";
+/**
+ * The pin a geocoded place leaves on the map. It follows the map: when the GL map is replaced
+ * (a basemap or style rebuild), the pin leaves the old one and is added to the new one. Call it
+ * during component init; the pin is removed when the component is destroyed.
+ */
+export function searchPin(map) {
+    let center = $state.raw(null);
+    $effect(() => {
+        const gl = maptilerMap(map);
+        const at = center;
+        if (!gl || !at)
+            return;
+        const marker = new Marker().setLngLat(at).addTo(gl);
+        return () => {
+            marker.remove();
+        };
+    });
+    return {
+        place(next) {
+            center = next;
+        },
+        clear() {
+            center = null;
+        }
+    };
+}

package/dist/lib/search/service.d.ts

@@ -1,8 +1,8 @@
 import { type GeocodingFeature } from "@maptiler/sdk";
-import type { MonitorLatestType } from "@sjvair/sdk";
+import type { MonitorData } from "@sjvair/sdk";
 export type MonitorResult = {
     type: "monitor";
-    monitor: MonitorLatestType<"pm25" | "o3">;
+    monitor: MonitorData;
     logo: {
         url: string;
         alt: string;
@@ -13,5 +13,10 @@ export type GeocodeResult = {
     feature: GeocodingFeature;
 };
 export type SearchResult = MonitorResult | GeocodeResult;
+/** Monitors whose name matches `query`: exact, then prefix, then substring; at most 4. */
+export declare function searchMonitors(query: string, monitors: Iterable<MonitorData>, latest: ReadonlyMap<string, {
+    value: number | null;
+}>): MonitorData[];
 export declare function monitorSearch(query: string): Promise<SearchResult[]>;
+export declare function geocodeQuery(query: string, proximity: [number, number], key: string): Promise<SearchResult[]>;
 export declare function geocode(query: string): Promise<SearchResult[]>;

package/dist/lib/search/service.js

@@ -1,5 +1,6 @@
 import { geocoding } from "@maptiler/sdk";
-import { monitorsManager } from "../monitors/monitors.svelte";
+import { monitorMapConfig } from "../config.svelte.js";
+import { monitorsStore } from "../stores.svelte.js";
 import AirGradientLogo from "../assets/logos/airgradient-blue.svg";
 import AirNowLogo from "../assets/logos/airnow-compact.jpg";
 import CarbLogo from "../assets/logos/carb-compact.jpg";
@@ -43,14 +44,16 @@ function resolveProximity() {
         });
     });
 }
-export async function monitorSearch(query) {
-    if (!monitorsManager.latest)
-        return [];
+/** Monitors whose name matches `query`: exact, then prefix, then substring; at most 4. */
+export function searchMonitors(query, monitors, latest) {
     const normalized = query.toLowerCase();
     const exact = [];
     const prefix = [];
     const substr = [];
-    for (const monitor of monitorsManager.latest.values()) {
+    // Only monitors with a reading for the current pollutant, as the map shows them.
+    for (const monitor of monitors) {
+        if (latest.get(monitor.id)?.value == null)
+            continue;
         const name = monitor.name.toLowerCase();
         if (name === normalized)
             exact.push(monitor);
@@ -59,14 +62,15 @@ export async function monitorSearch(query) {
         else if (name.includes(normalized))
             substr.push(monitor);
     }
-    return [...exact, ...prefix, ...substr]
-        .slice(0, 4)
-        .map((monitor) => ({ type: "monitor", monitor, logo: getMonitorLogo(monitor) }));
+    return [...exact, ...prefix, ...substr].slice(0, 4);
 }
-export async function geocode(query) {
-    const proximity = await getProximity();
+export async function monitorSearch(query) {
+    return searchMonitors(query, monitorsStore.monitors.values(), monitorsStore.latest).map((monitor) => ({ type: "monitor", monitor, logo: getMonitorLogo(monitor) }));
+}
+export async function geocodeQuery(query, proximity, key) {
     try {
         const result = await geocoding.forward(query, {
+            apiKey: key,
             country: ["us"],
             fuzzyMatch: true,
             limit: 4,
@@ -78,3 +82,6 @@ export async function geocode(query) {
         return [];
     }
 }
+export async function geocode(query) {
+    return geocodeQuery(query, await getProximity(), monitorMapConfig().maptilerKey);
+}

package/dist/lib/stores.svelte.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The app-wide data stores, created once. This module imports only `@sjvair/map-sdk/stores`, so
+ * the light `/core` entry can reach it without loading the map engine.
+ */
+export declare const monitorsStore: import("@sjvair/map-sdk/stores").MonitorsStore;
+export declare const hmsSmokeStore: import("@sjvair/map-sdk/stores").HmsSmokeStore;
+export declare const hmsFireStore: import("@sjvair/map-sdk/stores").HmsFireStore;
+export declare const collocationSitesStore: import("@sjvair/map-sdk/stores").CollocationSitesStore;

package/dist/lib/stores.svelte.js

@@ -0,0 +1,9 @@
+import { createCollocationSitesStore, createHmsFireStore, createHmsSmokeStore, createMonitorsStore } from "@sjvair/map-sdk/stores";
+/**
+ * The app-wide data stores, created once. This module imports only `@sjvair/map-sdk/stores`, so
+ * the light `/core` entry can reach it without loading the map engine.
+ */
+export const monitorsStore = createMonitorsStore();
+export const hmsSmokeStore = createHmsSmokeStore();
+export const hmsFireStore = createHmsFireStore();
+export const collocationSitesStore = createCollocationSitesStore({ monitors: monitorsStore });

package/dist/lib/wind/wind-plugin.d.ts

@@ -0,0 +1,11 @@
+import { type CustomLayerInterface } from "@maptiler/sdk";
+import type { MapPlugin } from "@sjvair/map-sdk";
+export interface WindPluginOptions {
+    /** Builds the layer; runs again on each restyle. Defaults to a `@maptiler/weather` WindLayer. */
+    createLayer?: (id: string) => CustomLayerInterface;
+}
+/**
+ * Wind particles as a map-sdk custom layer. `@maptiler/weather` can't be a map-sdk dependency, so
+ * the host adds it here; only the layout chunk reaches this module.
+ */
+export declare function windPlugin(options?: WindPluginOptions): MapPlugin;

package/dist/lib/wind/wind-plugin.js

@@ -0,0 +1,25 @@
+import { config } from "@maptiler/sdk";
+import { WindLayer } from "@maptiler/weather";
+import { monitorMapConfig } from "../config.svelte.js";
+// The weather layer fetches its data with the SDK's global key, which map-sdk (it passes the key
+// to the map only) never sets.
+const defaultCreateLayer = (id) => {
+    config.apiKey = monitorMapConfig().maptilerKey;
+    return new WindLayer({ id, opacity: 0.5 });
+};
+/**
+ * Wind particles as a map-sdk custom layer. `@maptiler/weather` can't be a map-sdk dependency, so
+ * the host adds it here; only the layout chunk reaches this module.
+ */
+export function windPlugin(options = {}) {
+    const createLayer = options.createLayer ?? defaultCreateLayer;
+    return {
+        id: "wind",
+        label: "Wind",
+        selectable: false,
+        setup(ctx) {
+            ctx.addCustomLayer("wind", createLayer);
+            return () => { };
+        }
+    };
+}

package/package.json

@@ -1,7 +1,8 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "4.3.0",
+	"version": "5.0.0-beta.0",
+	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SJVAir/monitor-map"
@@ -17,6 +18,7 @@
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"test": "vitest run",
+		"map-sdk:pack": "bash scripts/pack-map-sdk.sh",
 		"test:bundle": "npm run build:lib && node tests/bundle/check-bundle.mjs"
 	},
 	"type": "module",
@@ -48,24 +50,28 @@
 	],
 	"peerDependencies": {
 		"@internationalized/date": "^3.12.4",
+		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^5.0.0-beta.3",
 		"@sveltejs/enhanced-img": "^0.11.0 || ^1.0.0",
 		"bits-ui": "^2.19.2",
 		"sv-router": "^0.19.0",
-		"svelte": "^5.0.0"
+		"svelte": "^5.57.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^2.1.1",
 		"@eslint/js": "^10.0.1",
 		"@fontsource-variable/inter": "^5.3.0",
+		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@5.0.0-beta.3",
 		"@sveltejs/enhanced-img": "^1.0.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@tailwindcss/vite": "^4.3.3",
 		"@types/node": "^26.6.0",
+		"@vitest/browser-playwright": "^5.1.0",
 		"eslint": "^10.10.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.0",
 		"globals": "^17.12.0",
+		"playwright": "^1.65.0",
 		"postcss": "^8.5.28",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
@@ -78,18 +84,14 @@
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.70.0",
 		"vite": "^8.3.0",
-		"vitest": "^5.0.3"
+		"vitest": "^5.0.3",
+		"vitest-browser-svelte": "^3.1.0"
 	},
 	"dependencies": {
 		"@lucide/svelte": "^1.46.0",
-		"@maptiler/sdk": "^4.1.0",
+		"@maptiler/sdk": "~4.2.0",
 		"@maptiler/weather": "^4.0.1",
-		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^4.7.0",
-		"@tstk/builtin-extensions": "npm:@jsr/tstk__builtin-extensions@^1.0.8",
-		"@tstk/utils": "npm:@jsr/tstk__utils@^1.1.2",
-		"@turf/area": "^7.4.0",
-		"@turf/clusters-dbscan": "^7.4.0",
-		"@turf/helpers": "^7.4.0",
+		"@sjvair/map-sdk": "0.1.0-beta.6",
 		"@types/geojson": "^7946.0.16",
 		"clsx": "^2.1.1",
 		"color2k": "^2.0.4",

package/src/lib/MonitorDetailPanel.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
 	import { untrack, type ComponentProps } from "svelte";
-	import type { SJVAirEntryLevel } from "@sjvair/sdk";
 	import DataBox from "$lib/components/DataBox.svelte";
 	import LoadError from "$lib/LoadError.svelte";
 	import MonitorWidgetModal from "$lib/monitors/components/MonitorWidgetModal.svelte";
 	import MonitorSubscriptionManager from "$lib/monitors/components/MonitorSubscriptionManager.svelte";
 	import DataChart from "$lib/data-chart/DataChart.svelte";
-	import { monitorsManager } from "$lib";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte.js";
 	import { MonitorDetailsState } from "$lib/monitors/monitor-details.svelte";
-	import { choosePanelPollutant } from "$lib/monitors/panel-pollutant";
+	import { choosePanelPollutant, PANEL_POLLUTANTS } from "$lib/monitors/panel-pollutant";
 	import { useMonitorMapRouter } from "./router-context";
 	import { fetchTempByCoords } from "$lib/weather";
 	import { Colors, valueToColor } from "$lib/colors";
-	import { getCurrentLevel } from "$lib/monitors/monitor-utils";
+	import { NEUTRAL_LEVEL_COLOR, readingDisplay, readingLevel } from "$lib/levels";
 
 	type TempDataBox = Pick<ComponentProps<typeof DataBox>, "color" | "value">;
 
@@ -28,6 +27,10 @@
 	// current reading for the map's pollutant.
 	const details = new MonitorDetailsState();
 	const meta = $derived(monitorsManager.meta);
+	// The map's pollutant, when it is one the panel can show.
+	const mapPollutant = $derived(
+		PANEL_POLLUTANTS.find((p) => p === monitorsManager.pollutant) ?? null
+	);
 	// Shown only once the metadata is in too; labels and levels come from it.
 	const monitor = $derived(details.status === "ready" && meta ? details.monitor : null);
 
@@ -42,14 +45,15 @@
 	// Bumped whenever the map's readings are replaced, i.e. its 2-minute refresh ran. The data
 	// box follows it; the chart decides for itself whether its date range can have new entries.
 	let refreshTick = $state(0);
-	let seenLatest = untrack(() => monitorsManager.latest);
+	let seenLatest = untrack(() => monitorsManager.store.latest);
 
 	$effect(() => {
-		const latest = monitorsManager.latest;
-		// Null while a pollutant change is loading; wait for the readings that follow.
-		if (!latest || latest === seenLatest) return;
+		const latest = monitorsManager.store.latest;
+		// Empty before the first load and while a pollutant change is loading; wait for the
+		// readings that follow.
+		if (latest.size === 0 || latest === seenLatest) return;
 		// The first readings of a cold load arrive alongside this panel's own request.
-		const first = seenLatest === null;
+		const first = seenLatest.size === 0;
 		seenLatest = latest;
 		if (first) return;
 		untrack(() => {
@@ -59,14 +63,13 @@
 	});
 
 	const panel = $derived(
-		monitor && meta ? choosePanelPollutant(monitorsManager.pollutant, monitor, meta) : null
+		monitor && meta ? choosePanelPollutant(mapPollutant, monitor, meta) : null
 	);
 	const reading = $derived(
 		monitor && panel?.pollutant && panel.hasReading ? monitor.latest[panel.pollutant] : undefined
 	);
 	// Set when the panel shows a different pollutant than the map is coloring by.
 	const pollutantNote = $derived.by(() => {
-		const mapPollutant = monitorsManager.pollutant;
 		if (!meta || !panel?.pollutant || !panel.hasReading || !mapPollutant) return;
 		if (panel.pollutant === mapPollutant) return;
 		const shown = meta.entryType(panel.pollutant).label;
@@ -81,18 +84,15 @@
 		if (!monitor || !meta || !panel?.pollutant || !reading) return;
 
 		const entryType = meta.entryType(panel.pollutant);
-		const level: SJVAirEntryLevel | undefined = getCurrentLevel(
-			reading.value,
-			entryType.asIter.levels!
-		);
+		const level = readingLevel(reading.value, entryType.scale);
 
 		const updateDuration = meta.monitorType(monitor.type).expected_interval;
 
 		return {
-			color: level?.color ?? "",
+			color: level?.color ?? NEUTRAL_LEVEL_COLOR,
 			header: entryType.label,
 			subheading: `(${updateDuration} avg)`,
-			value: Math.round(parseInt(reading.value, 10)).toString()
+			value: readingDisplay(reading.value)
 		};
 	});
 
@@ -201,9 +201,12 @@
 				</div>
 			{/if}
 
-			<div class="tall:block hidden">
-				<MonitorWidgetModal monitorId={monitor.id} />
-			</div>
+			<!-- The widget shows current readings, and errors for an inactive monitor. -->
+			{#if panel.hasReading}
+				<div class="tall:block hidden">
+					<MonitorWidgetModal monitorId={monitor.id} />
+				</div>
+			{/if}
 			<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
 			{#if (globalThis as any).USER?.is_authenticated}
 				<MonitorSubscriptionManager monitorId={monitor.id} />