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

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.2.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.5.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} />

package/src/lib/MonitorMapLayout.svelte

@@ -1,38 +1,44 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { onDestroy, untrack } from "svelte";
+	import { onDestroy, onMount, untrack } from "svelte";
 	import { searchParams } from "sv-router";
+	import {
+		collocationSitesPlugin,
+		hmsFirePlugin,
+		hmsSmokePlugin,
+		monitorsPlugin
+	} from "@sjvair/map-sdk";
+	import { windPlugin } from "$lib/wind/wind-plugin.js";
+	import { evPlugin } from "$lib/ev-stations/ev-plugin.svelte.js";
+	import { createEvStore } from "$lib/ev-stations/ev-store.svelte.js";
+	import { stationPopups } from "$lib/ev-stations/station-popup.svelte.js";
 	import MapShell from "$lib/map/MapShell.svelte";
+	import { createLiveMap } from "$lib/map/live-map.svelte.js";
+	import { syncPlugins } from "$lib/map/sync-plugins.svelte.js";
+	import LoadError from "$lib/LoadError.svelte";
+	import { retryMonitorsLoad } from "$lib/monitors/retry-load.js";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte.js";
+	import { filteredMonitors } from "$lib/monitors/filtered-source.svelte.js";
+	import Legend from "$lib/legend/Legend.svelte";
+	import {
+		collocationSitesStore,
+		hmsFireStore,
+		hmsSmokeStore,
+		monitorsStore
+	} from "$lib/stores.svelte.js";
 	import OptionsGroup from "$lib/options/OptionsGroup.svelte";
 	import PollutantMenu from "$lib/options/menus/PollutantMenu.svelte";
 	import MonitorsMenu from "$lib/options/menus/MonitorsMenu.svelte";
 	import LayersMenu from "$lib/options/menus/LayersMenu.svelte";
 	import OverlaysMenu from "$lib/options/menus/OverlaysMenu.svelte";
 	import SettingsMenu from "$lib/options/menus/SettingsMenu.svelte";
+	import { mapOptions } from "$lib/options/map-options.svelte.js";
+	import { wantedPlugins } from "$lib/options/plugin-order";
 	import {
 		applyPollutantSelection,
 		currentSelection,
 		parsePollutantParam
 	} from "$lib/options/pollutant-param";
-	import LoadError from "$lib/LoadError.svelte";
-	import Legend from "$lib/legend/Legend.svelte";
-	import {
-		fireSmokeLegendSections,
-		pollutantLegendSection,
-		type LegendSection
-	} from "$lib/legend/legend-data";
-	import { monitorsManager } from "$lib/monitors/monitors.svelte";
-	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
-	import { windMapIntegration } from "$lib/wind/wind.svelte";
-	import { baseLayerSeperator } from "$lib/map/integrations/base-layer-seperator";
-	import type { SomeMapIntegration } from "$lib/map/integrations/types";
-	import { collocationSitesManager } from "$lib/collocation-sites/collocations.svelte";
-	import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
-	import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte";
-	import { hmsManager } from "$lib/hms/hms.svelte";
-	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
-	import { FIRE_LEGEND_CATEGORIES } from "$lib/hms/hms-fire-icon-manager";
-	import { hmsSmokeMapIntegration, SMOKE_LEGEND } from "$lib/hms/hms-smoke-map-integration.svelte";
 	import Search from "$lib/search/Search.svelte";
 	import { useMonitorMapRouter } from "./router-context";
 
@@ -44,51 +50,105 @@
 
 	const { route, navigate, basePath } = useMonitorMapRouter();
 
-	const integrations: Array<SomeMapIntegration> = [
-		baseLayerSeperator,
-		collocationSitesMapIntegration,
-		windMapIntegration,
-		hmsSmokeMapIntegration,
-		hmsFireMapIntegration,
-		monitorsMapIntegration,
-		evStationsMapIntegration
-	];
+	// The map's state lives as long as this layout; MapView attaches the GL map when it mounts.
+	const map = createLiveMap();
 
-	const pollutantTargets = { manager: monitorsManager, integration: monitorsMapIntegration };
-
-	// "?pollutant=none" must disable monitors before the effects below first run, so the
-	// state->URL effect never sees enabled monitors and overwrites the param.
+	// "?pollutant=none" must turn monitors off before the effects below first run, so the
+	// state->URL effect never sees monitors on and overwrites the param.
 	if (parsePollutantParam(route.search.pollutant) === "none") {
-		monitorsMapIntegration.enabled = false;
+		mapOptions.monitorsOn = false;
 	}
 
 	// The load screen stays up until the monitors load, so a failure has to be shown on it.
-	let loadFailed = $state(false);
+	const loadFailed = $derived(monitorsStore.dataSource.status.state === "error");
 
 	function loadMonitors() {
-		loadFailed = false;
 		// A rejected init() can be retried: a later call starts a fresh run.
-		monitorsManager.init(route.search.pollutant).catch((error) => {
-			console.error(error);
-			loadFailed = true;
-		});
+		monitorsManager.init(route.search.pollutant).catch((error) => console.error(error));
 	}
 
 	loadMonitors();
-	// A previous instance of this layout stopped polling in onDestroy; init() is a no-op by now.
-	monitorsManager.resumeAutoUpdate();
-	collocationSitesManager.init();
-	hmsManager.init();
-	monitorsMapIntegration.onMonitorClick = (id: string) => {
-		navigate(`${basePath}/monitor/:id`, { params: { id } }).catch(console.error);
-	};
 
-	let panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
+	const panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
+	const selectedId = $derived(panelOpen ? route.params.id : undefined);
+
+	// The monitors the Monitors menu's filters let through; clusters are built from these.
+	const monitorsSource = filteredMonitors(monitorsStore.dataSource, mapOptions);
+
+	// EV chargers: each level is fetched the first time it is wanted. A failure shows in the legend
+	// with a retry.
+	const evStore = createEvStore();
+	const evPopups = stationPopups(map);
+	$effect(() => {
+		const wanted = wantedPlugins(mapOptions, monitorsManager.pollutant);
+		for (const [key, level] of [
+			["ev-l2", "lvl2"],
+			["ev-l3", "lvl3"]
+		] as const) {
+			if (wanted.has(key)) untrack(() => evStore.load(level)).catch(console.error);
+		}
+	});
+
+	// The options decide which plugins are on the map, in DRAW_ORDER. `clustered` is fixed when a
+	// plugin is built, so a change rebuilds it.
+	syncPlugins(
+		map,
+		() => wantedPlugins(mapOptions, monitorsManager.pollutant),
+		{
+			monitors: () => ({
+				plugin: monitorsPlugin({
+					id: "monitors",
+					source: monitorsSource,
+					layerLabel: "Monitors",
+					selectable: true,
+					selectedStyle: "enlarge",
+					clustered: mapOptions.clustered
+				}),
+				// A removed plugin forgets its mode and selection, so each add passes them again.
+				options: {
+					selectionMode: "single",
+					selection: selectedId ? { kind: "monitors", ids: [selectedId] } : null
+				}
+			}),
+			"ev-l2": () =>
+				evPlugin("lvl2", evStore.dataSource("lvl2"), { clustered: mapOptions.clustered }),
+			"ev-l3": () =>
+				evPlugin("lvl3", evStore.dataSource("lvl3"), { clustered: mapOptions.clustered })
+		},
+		() => mapOptions.clustered
+	);
+
+	// Wind, Fire & Smoke and collocation sites take no build-time option, so they sit in their own call
+	// without `deps`: a Marker Clusters change rebuilds only the monitors above. DRAW_ORDER still
+	// holds across the two calls because `syncPlugins` reads `map.plugins` (every plugin on the
+	// map, whichever call added it) to find the plugin to add before.
+	syncPlugins(map, () => wantedPlugins(mapOptions, monitorsManager.pollutant), {
+		wind: () => windPlugin(),
+		"hms-smoke": () =>
+			hmsSmokePlugin({
+				id: "hms-smoke",
+				source: hmsSmokeStore.dataSource,
+				layerLabel: "Smoke"
+			}),
+		"hms-fire": () =>
+			hmsFirePlugin({
+				id: "hms-fire",
+				source: hmsFireStore.groups,
+				hotspots: hmsFireStore.hotspots,
+				layerLabel: "Fires"
+			}),
+		"collocation-sites": () =>
+			collocationSitesPlugin({
+				id: "collocation-sites",
+				source: collocationSitesStore.dataSource,
+				layerLabel: "Collocation sites"
+			})
+	});
 
 	// Keep the Pollutant menu's selection (pm25 / o3 / none) and the "pollutant" URL param in
-	// sync, both directions. init() only seeds the pollutant on the manager's first-ever
+	// sync, both directions. init() only seeds the pollutant on the store's first-ever
 	// initialization; this effect applies a later "?pollutant=" change (e.g. navigating in from
-	// elsewhere) to an already-running map.
+	// elsewhere, or back/forward) to an already-running map.
 	$effect(() => {
 		const selection = parsePollutantParam(route.search.pollutant);
 		if (!monitorsManager.initialized || !selection) return;
@@ -96,47 +156,54 @@
 		// state here would make a UI-driven change re-trigger this effect before the effect below
 		// syncs the URL, so it would see the stale URL and revert the user's change.
 		untrack(() => {
-			if (
-				currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled) !== selection
-			) {
-				applyPollutantSelection(selection, pollutantTargets);
+			if (currentSelection(monitorsManager.pollutant, mapOptions.monitorsOn) !== selection) {
+				applyPollutantSelection(selection, { manager: monitorsManager, options: mapOptions });
 			}
 		});
 	});
 
 	// ...and the reverse: reflect UI-driven changes back to the URL.
 	$effect(() => {
-		const selection = currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled);
+		const selection = currentSelection(monitorsManager.pollutant, mapOptions.monitorsOn);
 		if (selection && searchParams.get("pollutant") !== selection) {
 			searchParams.set("pollutant", selection);
 		}
 	});
 
-	// Clear selected icon scale when the detail panel closes
-	$effect(() => {
-		if (panelOpen) return;
-		monitorsMapIntegration.selectedMonitorId = null;
+	onMount(() => {
+		// A failed load leaves its layer empty (map-sdk's legend shows the status); log it once.
+		for (const store of [hmsSmokeStore, hmsFireStore, collocationSitesStore]) {
+			store.init().catch(console.error);
+		}
+		// A previous instance of this layout paused polling in onDestroy; init() is a no-op by now.
+		monitorsManager.resumeAutoUpdate();
+		return map.on("featureclick", ({ pluginId, ref, lngLat }) => {
+			// A station clicked on the map or picked from the list: its popup.
+			if ((pluginId === "ev-l2" || pluginId === "ev-l3") && ref.kind === "feature") {
+				const station = evStore.station(ref.id);
+				if (station) evPopups.open(pluginId, station, lngLat);
+				return;
+			}
+			if (pluginId !== "monitors" || ref.kind !== "monitor") return;
+			navigate(`${basePath}/monitor/:id`, { params: { id: ref.id } }).catch(console.error);
+			map.easeTo({ center: lngLat, minZoom: 12 });
+		});
 	});
 
-	const legendSections: Array<LegendSection> = $derived.by(() => {
-		const sections: Array<LegendSection> = [];
-		if (monitorsMapIntegration.enabled && monitorsManager.pollutant && monitorsManager.levels) {
-			const pollutant = pollutantLegendSection(monitorsManager.pollutant, monitorsManager.levels);
-			if (pollutant) sections.push(pollutant);
-		}
-		if (hmsFireMapIntegration.enabled && hmsSmokeMapIntegration.enabled) {
-			sections.push(...fireSmokeLegendSections(FIRE_LEGEND_CATEGORIES, SMOKE_LEGEND));
-		}
-		return sections;
+	// The selected monitor follows the route: the open panel's monitor, none once it closes.
+	$effect(() => {
+		const id = selectedId;
+		map.setSelection("monitors", id ? { kind: "monitors", ids: [id] } : null);
 	});
 
 	onDestroy(() => {
-		monitorsManager.autoUpdate.stop();
+		monitorsManager.pauseAutoUpdate();
+		map.destroy();
 	});
 </script>
 
 <MapShell
-	{integrations}
+	{map}
 	ready={monitorsManager.initialized}
 	{panelOpen}
 	knownRoutes={[`${basePath}/monitor/`]}
@@ -144,7 +211,10 @@
 >
 	{#snippet loadError()}
 		{#if loadFailed}
-			<LoadError message="Couldn't load air monitors." onretry={loadMonitors} />
+			<LoadError
+				message="Couldn't load air monitors."
+				onretry={() => retryMonitorsLoad(monitorsStore, loadMonitors)}
+			/>
 		{/if}
 	{/snippet}
 	{#snippet menu()}
@@ -155,16 +225,16 @@
 		<OptionsGroup>
 			<LayersMenu />
 			<OverlaysMenu />
-			<SettingsMenu />
+			<SettingsMenu {map} />
 		</OptionsGroup>
 	{/snippet}
-	{#snippet search()}
-		<Search />
-	{/snippet}
 	{#snippet overlays()}
 		<div class="pointer-events-none absolute bottom-4 left-4 z-10">
-			<Legend sections={legendSections} />
+			<Legend {map} />
 		</div>
 	{/snippet}
+	{#snippet search()}
+		<Search {map} />
+	{/snippet}
 	{@render children()}
 </MapShell>

package/src/lib/abort.ts

@@ -0,0 +1,59 @@
+export type SignalOptions = { signal?: AbortSignal };
+
+/**
+ * A signal that aborts as soon as any input does, with that input's reason. Already aborted if
+ * any input is. Undefined inputs are ignored. Call `dispose()` to drop the listeners.
+ */
+export function anySignal(...signals: Array<AbortSignal | undefined>): {
+	signal: AbortSignal;
+	dispose(): void;
+} {
+	const controller = new AbortController();
+	const cleanups: Array<() => void> = [];
+	const dispose = () => {
+		for (const cleanup of cleanups.splice(0)) cleanup();
+	};
+
+	for (const input of signals) {
+		if (!input) continue;
+		if (input.aborted) {
+			controller.abort(input.reason);
+			dispose();
+			break;
+		}
+		const onAbort = () => {
+			controller.abort(input.reason);
+			dispose();
+		};
+		input.addEventListener("abort", onAbort, { once: true });
+		cleanups.push(() => input.removeEventListener("abort", onAbort));
+	}
+
+	return { signal: controller.signal, dispose };
+}
+
+/**
+ * Settles like `promise`, unless `signal` aborts first, in which case it rejects with
+ * `signal.reason`. The inner promise's later outcome is swallowed.
+ */
+export function untilAborted<T>(promise: Promise<T>, signal: AbortSignal | undefined): Promise<T> {
+	if (!signal) return promise;
+	if (signal.aborted) {
+		promise.catch(() => {});
+		return Promise.reject(signal.reason);
+	}
+	return new Promise<T>((resolve, reject) => {
+		const onAbort = () => reject(signal.reason);
+		signal.addEventListener("abort", onAbort, { once: true });
+		promise.then(
+			(value) => {
+				signal.removeEventListener("abort", onAbort);
+				resolve(value);
+			},
+			(error) => {
+				signal.removeEventListener("abort", onAbort);
+				reject(error);
+			}
+		);
+	});
+}

package/src/lib/components/DataBox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { darken, readableColor } from "color2k";
+	import { NEUTRAL_LEVEL_COLOR } from "$lib/levels";
 
 	interface DataBoxProps {
 		color: string;
@@ -8,7 +9,9 @@
 		value: string;
 	}
 
-	const { color, header, subheading, value }: DataBoxProps = $props();
+	const { color: givenColor, header, subheading, value }: DataBoxProps = $props();
+	// An empty color (a level without one) would make color2k throw.
+	const color = $derived(givenColor || NEUTRAL_LEVEL_COLOR);
 	const borderColor = $derived(darken(color, 0.1));
 	const textColor = $derived(readableColor(color));
 </script>

package/src/lib/config.svelte.ts

@@ -0,0 +1,16 @@
+export interface MonitorMapConfig {
+	maptilerKey: string;
+	nrelKey: string;
+}
+
+let current: MonitorMapConfig | null = null;
+
+/** Hosts call this once at startup, before the map or the EV layer is used. */
+export function configureMonitorMap(config: MonitorMapConfig): void {
+	current = { ...config };
+}
+
+export function monitorMapConfig(): MonitorMapConfig {
+	if (!current) throw new Error("monitor-map: call configureMonitorMap() first");
+	return current;
+}

package/src/lib/core.ts

@@ -1,11 +1,12 @@
 /**
  * Light entry (`@sjvair/monitor-map/core`): what a host app needs at startup, without the map.
  *
- * Nothing imported here may reach @maptiler/sdk, @maptiler/weather or uplot at runtime;
+ * Nothing imported here may reach @maptiler/sdk, maplibre, @maptiler/weather or uplot at runtime;
  * `npm run test:bundle` enforces it. Everything is re-exported from the same modules the
  * main entry uses, so `monitorsManager` and the router context stay single instances
  * whichever entries a host mixes.
  */
+export { configureMonitorMap, monitorMapConfig, type MonitorMapConfig } from "./config.svelte.js";
 export {
 	ROUTER_KEY,
 	provideMonitorMapRouter,
@@ -14,4 +15,3 @@ export {
 } from "./router-context";
 export { monitorsManager } from "./monitors/monitors.svelte.js";
 export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte.js";
-export type { MonitorsDataSource, MonitorsPollutant } from "./monitors/types";