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

package/src/lib/map/basemaps.ts

@@ -0,0 +1,76 @@
+import { MapStyle } from "@maptiler/sdk";
+import type { ReferenceMapStyle } from "@maptiler/sdk";
+import type { BasemapConfig } from "@sjvair/map-sdk";
+
+/** Every MapTiler style at its highest `_V<n>` version, sorted by name. */
+const BASEMAP_STYLES: ReferenceMapStyle[] = (() => {
+	const latest = new Map<string, { version: number; style: ReferenceMapStyle }>();
+	for (const style of Object.values(MapStyle) as ReferenceMapStyle[]) {
+		const id = style.getId();
+		const match = id.match(/^(.+?)_V(\d+)$/i);
+		const baseName = match ? match[1] : id;
+		const version = match ? parseInt(match[2], 10) : 0;
+		const existing = latest.get(baseName);
+		if (!existing || version > existing.version) {
+			latest.set(baseName, { version, style });
+		}
+	}
+	return Array.from(latest.values())
+		.map((e) => e.style)
+		.sort((a, b) => a.getName().localeCompare(b.getName()));
+})();
+
+/** The basemap the map opens on, and Reset selects: Streets v4's default variant. */
+export function defaultBasemapId(): string {
+	return MapStyle.STREETS_V4.getDefaultVariant().getId();
+}
+
+/**
+ * The monitor map's basemaps: every MapTiler style's variants (style URLs, so map-sdk's fallback
+ * can match a failed style by URL), opening on Streets v4, with no layers removed.
+ */
+export function monitorMapBasemaps(): BasemapConfig {
+	const seen = new Set<string>();
+	const styles: BasemapConfig["styles"] = [];
+	for (const style of BASEMAP_STYLES) {
+		for (const variant of style.getVariants()) {
+			const id = variant.getId();
+			if (seen.has(id)) continue;
+			seen.add(id);
+			styles.push({ id, style: variant.getExpandedStyleURL() });
+		}
+	}
+	return { styles, defaultId: defaultBasemapId(), excludedLayers: [] };
+}
+
+export interface BasemapChoice {
+	name: string;
+	variants: Array<{ id: string; type: string; name: string }>;
+}
+
+/** The Basemap select's options (one per style name) and each one's Theme radios. */
+export function basemapChoices(): BasemapChoice[] {
+	return BASEMAP_STYLES.map((style) => ({
+		name: style.getName(),
+		variants: style
+			.getVariants()
+			.map((variant) => ({ id: variant.getId(), type: variant.getType(), name: variant.getName() }))
+	}));
+}
+
+/** The choice that has a variant with this id. */
+export function choiceForId(id: string): BasemapChoice | undefined {
+	return basemapChoices().find((choice) => choice.variants.some((v) => v.id === id));
+}
+
+/**
+ * The variant to show after switching to the basemap named `toBaseName`: the same variant type
+ * (e.g. "DARK") as `currentId` when the new basemap offers it, otherwise its default.
+ */
+export function switchBasemap(currentId: string, toBaseName: string): string {
+	const target = BASEMAP_STYLES.find((style) => style.getName() === toBaseName);
+	if (!target) return currentId;
+	const type = choiceForId(currentId)?.variants.find((v) => v.id === currentId)?.type;
+	if (type && target.hasVariant(type)) return target.getVariant(type).getId();
+	return target.getDefaultVariant().getId();
+}

package/src/lib/map/live-map.svelte.ts

@@ -0,0 +1,24 @@
+import { createMap, type MapContext } from "@sjvair/map-sdk";
+import { monitorMapBasemaps } from "./basemaps";
+import { monitorMapConfig } from "../config.svelte.js";
+
+/** The San Joaquin Valley view the map opens on. */
+const INITIAL_VIEW = {
+	center: [-119.7987626619462, 36.76272050981146] as [number, number],
+	zoom: 7,
+	bearing: 0,
+	pitch: 0
+};
+
+/** The monitor map's map context: a globe over space on Streets v4, with every basemap to choose. */
+export function createLiveMap(): MapContext {
+	return createMap({
+		config: {
+			maptilerKey: monitorMapConfig().maptilerKey,
+			initialView: INITIAL_VIEW,
+			projection: "globe",
+			space: { preset: "milkyway" },
+			basemaps: monitorMapBasemaps()
+		}
+	});
+}

package/src/lib/map/sync-plugins.svelte.ts

@@ -0,0 +1,69 @@
+import { untrack } from "svelte";
+import type { MapContext, MapPlugin, PluginOptions } from "@sjvair/map-sdk";
+import { beforeId, DRAW_ORDER, type PluginKey } from "../options/plugin-order";
+
+/** A plugin, or a plugin with the add options it needs (e.g. its selection mode). */
+export type PluginEntry =
+	MapPlugin | { plugin: MapPlugin; options?: Omit<PluginOptions, "before"> };
+
+/**
+ * Builds a fresh plugin for each key (plugin objects are single-use). Called untracked. A key
+ * with no factory is never added, and never removed either: another `syncPlugins` call may own it.
+ */
+export type PluginFactories = Partial<Record<PluginKey, () => PluginEntry>>;
+
+function entryOf(entry: PluginEntry): { plugin: MapPlugin; options?: PluginOptions } {
+	return "plugin" in entry ? entry : { plugin: entry };
+}
+
+/**
+ * Keeps `map`'s plugins in step with `wanted()`, in `DRAW_ORDER`: adds a wanted plugin below the
+ * first present plugin above it and removes one that is no longer wanted. A change to anything
+ * `deps()` reads removes and re-adds every present plugin of `factories` (e.g. `clustered`,
+ * which a plugin only takes when it is built). Call it during component setup.
+ */
+export function syncPlugins(
+	map: MapContext,
+	wanted: () => Set<PluginKey>,
+	factories: PluginFactories,
+	deps?: () => unknown
+): void {
+	const keys = DRAW_ORDER.filter((key) => factories[key]);
+	// Bumped when a dep changes; separate from `wanted` so an option change that leaves the
+	// wanted set as it is never rebuilds anything.
+	let generation = $state(0);
+	let built = 0;
+
+	if (deps) {
+		let first = true;
+		$effect(() => {
+			deps();
+			if (first) first = false;
+			else untrack(() => generation++);
+		});
+	}
+
+	$effect(() => {
+		const want = wanted();
+		const current = generation;
+		untrack(() => {
+			const rebuild = current !== built;
+			built = current;
+			// A scratch copy of the ids for this pass; nothing reads it reactively.
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const present = new Set(map.plugins.map((p) => p.id));
+			for (const key of keys) {
+				if (present.has(key) && (rebuild || !want.has(key))) {
+					map.removePlugin(key);
+					present.delete(key);
+				}
+			}
+			for (const key of keys) {
+				if (!want.has(key) || present.has(key)) continue;
+				const { plugin, options } = entryOf(factories[key]!());
+				map.addPlugin(plugin, { ...options, before: beforeId(key, present) });
+				present.add(key);
+			}
+		});
+	});
+}

package/src/lib/monitors/components/MonitorSubscriptionManager.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { BellCheckIcon, BellOffIcon, ChevronDownIcon } from "@lucide/svelte";
-	import { getSubscriptions, subscribe, unsubscribe } from "@sjvair/sdk/account";
-	import { monitorsManager } from "$lib";
+	import { subscribe, unsubscribe } from "@sjvair/sdk/account";
+	import LoadError from "$lib/LoadError.svelte";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte.js";
+	import { getApiToken, loadSubscriptionLevel } from "$lib/monitors/subscriptions";
 
 	interface MonitorSubscriptionManagerProps {
 		monitorId: string;
@@ -21,38 +23,38 @@
 	let saving = $state(false);
 	let subscribedLevel: string | null = $state(null);
 
+	// The alert rows, in this order, from the PM2.5 scale; a key the scale lacks is skipped.
 	const alertLevels = $derived.by(() => {
-		if (!monitorsManager.meta) return [];
-		try {
-			return monitorsManager.meta
-				.entryType("pm25")
-				.asIter.levels!.filter((level) =>
-					ALERT_LEVEL_NAMES.includes(level.name as (typeof ALERT_LEVEL_NAMES)[number])
-				);
-		} catch {
-			return [];
-		}
+		const levels = monitorsManager.meta?.entryType("pm25").scale?.levels ?? [];
+		return ALERT_LEVEL_NAMES.flatMap((key) => levels.find((level) => level.key === key) ?? []);
 	});
 
+	let loadError = $state(false);
+	let attempt = $state(0);
+
 	$effect(() => {
-		void monitorId;
+		const id = monitorId;
+		void attempt;
 		open = false;
 		subscribedLevel = null;
-		loadSubscription();
-	});
-
-	async function loadSubscription() {
-		const id = monitorId;
+		loadError = false;
+		const controller = new AbortController();
+		const { signal } = controller;
 		loading = true;
-		try {
-			const subscriptions = await getSubscriptions(getApiToken());
-			if (id !== monitorId) return;
-			const match = subscriptions.find((s) => s.monitor === id);
-			subscribedLevel = match?.level ?? null;
-		} finally {
-			if (id === monitorId) loading = false;
-		}
-	}
+		loadSubscriptionLevel(id, { signal })
+			.then((level) => {
+				if (!signal.aborted) subscribedLevel = level;
+			})
+			.catch((error) => {
+				if (signal.aborted) return;
+				console.error("Could not load subscription status", error);
+				loadError = true;
+			})
+			.finally(() => {
+				if (!signal.aborted) loading = false;
+			});
+		return () => controller.abort();
+	});
 
 	async function handleLevelClick(level: string | null) {
 		if (saving || !level) return;
@@ -75,61 +77,59 @@
 		}
 		open = false;
 	}
-
-	function getApiToken(): string {
-		return (
-			(globalThis as unknown as Record<string, Record<string, string>>)["USER"]?.api_token ?? ""
-		);
-	}
 </script>
 
-<div class="relative select-none">
-	<button
-		class={[
-			"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
-			subscribedLevel
-				? "border-green-700 bg-green-600 hover:bg-green-700"
-				: "border-blue-600 bg-blue-500 hover:bg-blue-600"
-		]}
-		disabled={loading}
-		onclick={() => (open = !open)}
-	>
-		{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
-		<ChevronDownIcon
-			size={16}
-			class={["transition-transform duration-300", open ? "rotate-180" : ""]}
-		/>
-	</button>
+{#if loadError}
+	<LoadError message="Couldn't load your alert settings." onretry={() => attempt++} />
+{:else}
+	<div class="relative select-none">
+		<button
+			class={[
+				"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
+				subscribedLevel
+					? "border-green-700 bg-green-600 hover:bg-green-700"
+					: "border-blue-600 bg-blue-500 hover:bg-blue-600"
+			]}
+			disabled={loading}
+			onclick={() => (open = !open)}
+		>
+			{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
+			<ChevronDownIcon
+				size={16}
+				class={["transition-transform duration-300", open ? "rotate-180" : ""]}
+			/>
+		</button>
 
-	{#if open}
-		<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
-		<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
-			{#if subscribedLevel}
-				<button
-					class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
-					onclick={() => handleLevelClick(subscribedLevel)}
-				>
-					Unsubscribe
-					<BellOffIcon size={14} />
-				</button>
-			{/if}
-			{#each alertLevels as level (level.name)}
-				{@const isSubscribed = level.name === subscribedLevel}
-				<button
-					class={[
-						"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
-						!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
-					]}
-					style="background-color: {level.color}"
-					disabled={saving}
-					onclick={!isSubscribed ? () => handleLevelClick(level.name) : null}
-				>
-					<span>{level.label}</span>
-					{#if isSubscribed}
-						<BellCheckIcon size={14} />
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
-</div>
+		{#if open}
+			<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
+			<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
+				{#if subscribedLevel}
+					<button
+						class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
+						onclick={() => handleLevelClick(subscribedLevel)}
+					>
+						Unsubscribe
+						<BellOffIcon size={14} />
+					</button>
+				{/if}
+				{#each alertLevels as level (level.key)}
+					{@const isSubscribed = level.key === subscribedLevel}
+					<button
+						class={[
+							"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
+							!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
+						]}
+						style="background-color: {level.color}"
+						disabled={saving}
+						onclick={!isSubscribed ? () => handleLevelClick(level.key) : null}
+					>
+						<span>{level.label}</span>
+						{#if isSubscribed}
+							<BellCheckIcon size={14} />
+						{/if}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/monitors/filtered-source.svelte.ts

@@ -0,0 +1,38 @@
+import type { DataSource, MonitorFeatureProperties } from "@sjvair/map-sdk/data";
+import type { MapOptions } from "../options/map-option-defaults";
+
+type Options = Pick<MapOptions, "monitorTypes" | "inactive" | "inside">;
+
+function shown(props: MonitorFeatureProperties, options: Options): boolean {
+	return (
+		options.monitorTypes[props.type] === true &&
+		(props.isActive || options.inactive) &&
+		(props.location !== "inside" || options.inside)
+	);
+}
+
+/**
+ * `source` with only the monitors the Monitors menu shows: types that are on, inactive and
+ * inside ones only when those are on. Clusters are built from these, so their averages follow.
+ */
+export function filteredMonitors(
+	source: DataSource<MonitorFeatureProperties>,
+	options: Options
+): DataSource<MonitorFeatureProperties> {
+	const features = $derived.by(() => {
+		const all = source.features;
+		if (!all) return null;
+		return { ...all, features: all.features.filter((f) => shown(f.properties, options)) };
+	});
+	return {
+		get status() {
+			return source.status;
+		},
+		get features() {
+			return features;
+		},
+		get scale() {
+			return source.scale;
+		}
+	};
+}

package/src/lib/monitors/monitor-details.svelte.ts

@@ -13,15 +13,17 @@ export class MonitorDetailsState {
 	#id: string | null = null;
 	// Bumped per request; a response for anything but the latest request is dropped.
 	#request = 0;
+	#controller: AbortController | null = null;
 
 	async load(id: string): Promise<void> {
 		this.#id = id;
 		const request = ++this.#request;
+		const { signal } = this.#restart();
 		this.monitor = null;
 		this.status = "loading";
 
 		try {
-			const monitor = await getMonitorDetails(id);
+			const monitor = await getMonitorDetails(id, { signal });
 			if (request !== this.#request) return;
 			this.monitor = monitor;
 			this.status = "ready";
@@ -40,16 +42,23 @@ export class MonitorDetailsState {
 	async refresh(): Promise<void> {
 		if (this.status !== "ready" || this.#id === null) return;
 		const request = ++this.#request;
+		const { signal } = this.#restart();
 
 		try {
-			const monitor = await getMonitorDetails(this.#id);
+			const monitor = await getMonitorDetails(this.#id, { signal });
 			if (request !== this.#request) return;
 			this.monitor = monitor;
 		} catch (error) {
-			if (request === this.#request) console.error(error);
+			if (!signal.aborted && request === this.#request) console.error(error);
 		}
 	}
 
+	/** Aborts whatever request is in flight and starts a new controller for the next one. */
+	#restart(): AbortController {
+		this.#controller?.abort();
+		return (this.#controller = new AbortController());
+	}
+
 	retry(): Promise<void> {
 		return this.#id === null ? Promise.resolve() : this.load(this.#id);
 	}

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

@@ -1,16 +1,6 @@
-import {
-	getMonitors,
-	getMonitorsList,
-	getMonitorsMeta,
-	type MonitorData,
-	type MonitorLatestType,
-	type MonitorsMeta,
-	type SJVAirEntryLevel
-} from "@sjvair/sdk";
-import { XMap } from "@tstk/builtin-extensions";
-import { Interval } from "@tstk/utils";
-import { untrack } from "svelte";
-import type { MonitorsDataSource, MonitorsPollutant } from "./types";
+import type { MonitorData, MonitorsMeta } from "@sjvair/sdk";
+import type { MonitorsStore } from "@sjvair/map-sdk/stores";
+import { monitorsStore } from "../stores.svelte.js";
 
 export interface MonitorsInitOptions {
 	/**
@@ -18,153 +8,72 @@ export interface MonitorsInitOptions {
 	 * load the data without showing a map (`resumeAutoUpdate()` starts polling later).
 	 */
 	autoUpdate?: boolean;
-}
-
-class MonitorsManager implements MonitorsDataSource {
-	autoUpdate: Interval = new Interval(async () => await this.update(), 2 * 60 * 1000);
-	initialized: boolean = $state(false);
-
-	latest: XMap<string, MonitorLatestType<"pm25" | "o3">> | null = $state(null);
-	list: Array<MonitorData> | null = $state(null);
-
-	meta: MonitorsMeta | null = $state(null);
-
-	pollutant: "pm25" | "o3" | null = $state(null);
-
-	levels: Array<SJVAirEntryLevel> | null = $derived(
-		this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null
-	);
-
-	#initPromise: Promise<void> | null = null;
-	#requestedPollutant: MonitorsPollutant | null = null;
-	#requestedAutoUpdate = false;
-
-	constructor() {
-		// Refetch monitors when the pollutant changes after the initial load, wherever the change
-		// comes from (Pollutant menu, URL sync, a host's own UI). Clearing first blanks the markers
-		// instead of briefly coloring them with the previous pollutant's readings.
-		let fetchedPollutant: string | null = null;
-		$effect.root(() => {
-			$effect(() => {
-				const pollutant = this.pollutant;
-				if (!this.initialized) return;
-				if (fetchedPollutant !== null && fetchedPollutant !== pollutant) {
-					untrack(() => {
-						this.list = [];
-						this.latest = null;
-						this.update();
-					});
-				}
-				fetchedPollutant = pollutant;
-			});
-		});
-	}
-
 	/**
-	 * Safe to call from several places: overlapping calls share one run, and a failed run can
-	 * be retried. An explicit "pm25"/"o3" wins over a call without one, whichever came first;
-	 * between two explicit values the most recent wins. Polling starts when the run finishes
-	 * unless every call sharing it passed `autoUpdate: false`. A no-op once initialized, so it
-	 * never restarts polling either: that is `resumeAutoUpdate()`.
+	 * Stops waiting: the returned promise rejects with the signal's reason. The shared run keeps
+	 * going for the other calls waiting on it, and is cancelled only when every call waiting on it
+	 * passed a signal and all of those aborted. Ignored once initialized.
 	 */
-	init(urlPollutant?: string | number | boolean, options: MonitorsInitOptions = {}): Promise<void> {
-		if (this.initialized) return Promise.resolve();
-
-		if (options.autoUpdate !== false) this.#requestedAutoUpdate = true;
-
-		if (urlPollutant === "pm25" || urlPollutant === "o3") {
-			this.#requestedPollutant = urlPollutant;
-		}
-
-		this.#initPromise ??= this.#runInit().finally(() => {
-			this.#initPromise = null;
-			this.#requestedPollutant = null;
-			this.#requestedAutoUpdate = false;
-		});
-
-		return this.#initPromise;
-	}
-
-	async #runInit(): Promise<void> {
-		// The pollutant the latest readings were requested for.
-		let fetchedPollutant = this.#requestedPollutant;
-
-		const metaRequest = getMonitorsMeta();
-		const listAndMeta = Promise.all([getMonitorsList(), metaRequest]).then(([list, meta]) => {
-			this.list = list;
-			this.meta = meta;
-			return meta;
-		});
-		// The latest readings only need the pollutant, so they never wait for the list. An explicit
-		// pollutant may still arrive before meta does, in which case the default is never fetched.
-		const latestRequest = fetchedPollutant
-			? getMonitorsLatestMap(fetchedPollutant)
-			: metaRequest.then((meta) => {
-					const pollutant = this.#requestedPollutant ?? meta.default_pollutant;
-					fetchedPollutant = pollutant;
-					return getMonitorsLatestMap(pollutant);
-				});
-
-		// One Promise.all so a failure in either never leaves the other unhandled.
-		const [meta, firstLatest] = await Promise.all([listAndMeta, latestRequest]);
-		let latest = firstLatest;
-
-		// An explicit pollutant may have arrived while the requests above were in flight.
-		let wanted = this.#requestedPollutant ?? meta.default_pollutant;
-		while (wanted !== fetchedPollutant) {
-			latest = await getMonitorsLatestMap(wanted);
-			fetchedPollutant = wanted;
-			wanted = this.#requestedPollutant ?? meta.default_pollutant;
-		}
-
-		this.pollutant = fetchedPollutant;
-		this.latest = latest;
-		if (this.#requestedAutoUpdate) this.autoUpdate.start();
-		this.initialized = true;
-	}
+	signal?: AbortSignal;
+}
 
+/**
+ * The live monitors data, as hosts have used it since 4.x: a thin view over map-sdk's monitors
+ * store, which owns the data, the shared init and the polling.
+ */
+export interface MonitorsManager {
+	/** Loads the monitors. Only "pm25" and "o3" pass through; anything else means the default. */
+	init(pollutant?: unknown, options?: MonitorsInitOptions): Promise<void>;
+	readonly initialized: boolean;
+	readonly meta: MonitorsMeta | null;
 	/**
-	 * Starts polling when it is not running: after something stopped it (MonitorMapLayout stops
-	 * it on destroy) or after an init that opted out of it. Refreshes first since the data may
-	 * be stale. A no-op before init or while polling.
+	 * Every monitor, or null until initialized. The same array between reads until the store's
+	 * monitors are replaced.
 	 */
-	resumeAutoUpdate(): void {
-		if (!this.initialized || this.autoUpdate.isActive) return;
-
-		this.update().catch(console.error);
-		this.autoUpdate.start();
-	}
-
-	async update(): Promise<void> {
-		if (!this.initialized) return;
-
-		const pollutant = this.pollutant;
-		const [list, latest] = await Promise.all([
-			getMonitorsList(),
-			getMonitorsLatestMap(pollutant || this.meta?.default_pollutant || "pm25")
-		]);
-
-		// The pollutant changed while this was in flight: these readings belong to the previous
-		// one, and the change has already started its own update.
-		if (this.pollutant !== pollutant) return;
-
-		this.list = list;
-		this.latest = latest;
-	}
+	readonly list: MonitorData[] | null;
+	/** The pollutant the readings are for, or null before init. */
+	readonly pollutant: string | null;
+	setPollutant(pollutant: "pm25" | "o3"): void;
+	update(options?: { signal?: AbortSignal }): Promise<void>;
+	resumeAutoUpdate(): void;
+	pauseAutoUpdate(): void;
+	/** The store underneath, for map-sdk plugins and stores. */
+	readonly store: MonitorsStore;
 }
 
-async function getMonitorsLatestMap(
-	pollutant: "pm25" | "o3"
-): Promise<XMap<string, MonitorLatestType<"pm25" | "o3">>> {
-	const monitors = await getMonitors(pollutant);
-	const latest = new XMap<string, MonitorLatestType<"pm25" | "o3">>();
-
-	for (const monitor of monitors) {
-		latest.set(monitor.id, monitor);
-	}
+function initPollutant(pollutant: unknown): "pm25" | "o3" | undefined {
+	return pollutant === "pm25" || pollutant === "o3" ? pollutant : undefined;
+}
 
-	return latest;
+export function createMonitorsManager(store: MonitorsStore): MonitorsManager {
+	// The list built from `store.monitors`, which the store replaces rather than mutates.
+	let listFrom: MonitorsStore["monitors"] | null = null;
+	let list: MonitorData[] = [];
+	return {
+		init: (pollutant, options) => store.init(initPollutant(pollutant), options),
+		get initialized() {
+			return store.initialized;
+		},
+		get meta() {
+			return store.meta;
+		},
+		get list() {
+			if (!store.initialized) return null;
+			const monitors = store.monitors;
+			if (monitors !== listFrom) {
+				listFrom = monitors;
+				list = [...monitors.values()];
+			}
+			return list;
+		},
+		get pollutant() {
+			return store.entryType;
+		},
+		setPollutant: (pollutant) => store.entryTypeFor(pollutant),
+		update: (options) => store.update(options),
+		resumeAutoUpdate: () => store.resumeAutoUpdate(),
+		pauseAutoUpdate: () => store.pauseAutoUpdate(),
+		store
+	};
 }
 
-export const monitorsManager = new MonitorsManager();
-export type { MonitorsManager };
+export const monitorsManager: MonitorsManager = createMonitorsManager(monitorsStore);