@sjvair/monitor-map 4.0.3 → 4.1.0

package/README.md

@@ -50,6 +50,48 @@ export const { route, navigate, p, isActive, Router } = createRouter({
 This is what the sjvair.com widget and `sjvair-mobile` use today, via `MonitorMapLayout`
 (the thin wrapper `monitorMapRoutes` points to).
 
+### Keeping the map off a host app's startup path
+
+The package root re-exports everything, and its `monitorMapRoutes` imports the map layout
+eagerly, so referencing it in a router puts maplibre (about 2 MB) in the startup bundle. A
+host whose first screen is not the map uses the two subpath entries instead:
+
+```ts
+// router.ts
+import { createRouter } from "sv-router";
+import { monitorMapRoutes } from "@sjvair/monitor-map/routes";
+
+export const { route, navigate, p, isActive, Router } = createRouter({
+	"/my-map": monitorMapRoutes
+});
+```
+
+```svelte
+<!-- app root -->
+<script>
+	import { provideMonitorMapRouter } from "@sjvair/monitor-map/core";
+	import { route, navigate, p, isActive, Router } from "./router";
+
+	provideMonitorMapRouter({ route, navigate, p, isActive, basePath: "/my-map" });
+</script>
+
+<Router />
+```
+
+- `@sjvair/monitor-map/core` exports the router context (`provideMonitorMapRouter`,
+  `useMonitorMapRouter`, `ROUTER_KEY`, `MonitorMapRouterApi`) and `monitorsManager`, with
+  no map code behind them.
+- `@sjvair/monitor-map/routes` exports a `monitorMapRoutes` with the same route tree, whose
+  layout and routes load on demand. On a cold deep link into the map, the router outlet is
+  empty until that chunk arrives.
+
+Both entries share their modules with the package root, so `monitorsManager` is the same
+instance whichever entry it is imported from.
+
+`monitorsManager.init()` may be called from several places (for example, a background
+preload and the map layout): overlapping calls share one set of requests, a failed call can
+be retried, and an explicit `"pm25"`/`"o3"` argument wins over a call without one.
+
 ### Embedding `MapShell` directly, with a reduced integration set
 
 `MonitorMapLayout` is an opinionated wrapper around the lower-level `MapShell`

package/dist/lib/MonitorMapLayout.svelte

@@ -62,6 +62,8 @@
 	}
 
 	monitorsManager.init(route.search.pollutant);
+	// 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) => {

package/dist/lib/collocation-sites/collocations-map-integration.svelte.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
 import { CollocationIconManager, getCollocationIconId } from "./collocations-icon-manager.svelte";
 import { TooltipManager } from "../map/integrations/tooltip.svelte";

package/dist/lib/core.d.ts

@@ -0,0 +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;
+ * `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 { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter, type MonitorMapRouterApi } from "./router-context";
+export { monitorsManager } from "./monitors/monitors.svelte.js";
+export type { MonitorsManager } from "./monitors/monitors.svelte.js";
+export type { MonitorsDataSource, MonitorsPollutant } from "./monitors/types";

package/dist/lib/core.js

@@ -0,0 +1,10 @@
+/**
+ * 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;
+ * `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 { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter } from "./router-context";
+export { monitorsManager } from "./monitors/monitors.svelte.js";

package/dist/lib/ev-stations/ev-stations-cluster-renderer.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 import { mountPopup } from "../map/utils";
 import { clickManager } from "../map/integrations/click-manager";
 import { EV_STATION_LEVELS } from "./ev-station-icons";

package/dist/lib/ev-stations/ev-stations-map-integration.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 import { clickManager } from "../map/integrations/click-manager";
 import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
 import { MapDisplayOption } from "../map/integrations/map-display-option.svelte";

package/dist/lib/hms/hms-fire-map-integration.svelte.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
 import { hmsManager } from "./hms.svelte";
 import { HMSFireIconManager, getTierIconId } from "./hms-fire-icon-manager";

package/dist/lib/hms/hms-smoke-map-integration.svelte.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 import { MapGeoJSONIntegration } from "../map/integrations/map-geojson-integration.svelte";
 import { hmsManager } from "./hms.svelte";
 /** Smoke fill styles, shared by the map layer and the legend so they can't drift apart. */

package/dist/lib/index.d.ts

@@ -23,6 +23,11 @@
  *
  * <Router />
  * ```
+ *
+ * A host that must stay light at startup imports from the subpath entries instead:
+ * `provideMonitorMapRouter`/`monitorsManager` from "@sjvair/monitor-map/core" (no map), and
+ * `monitorMapRoutes` from "@sjvair/monitor-map/routes" (same tree, lazy layout and routes).
+ * `monitorMapRoutes` from this entry stays eager.
  */
 export { monitorMapRoutes } from "./routes";
 export { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter, type MonitorMapRouterApi } from "./router-context";
@@ -34,8 +39,8 @@ export { evStationsManager } from "./ev-stations/ev-stations.svelte";
 export type { EvStationsManager } from "./ev-stations/ev-stations.svelte";
 export { hmsManager } from "./hms/hms.svelte";
 export type { HMSManager } from "./hms/hms.svelte";
-export { mapManager, DefaultMapStyle, initializeMap } from "./map/map.svelte";
-export type { MapManager } from "./map/map.svelte";
+export { mapManager, DefaultMapStyle, initializeMap } from "./map/map-manager.svelte.js";
+export type { MapManager } from "./map/map-manager.svelte.js";
 export { monitorsMapIntegration, MonitorsMapIntegration } from "./monitors/monitors-map-integration.svelte";
 export { collocationSitesMapIntegration } from "./collocation-sites/collocations-map-integration.svelte";
 export { evStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte";

package/dist/lib/index.js

@@ -23,6 +23,11 @@
  *
  * <Router />
  * ```
+ *
+ * A host that must stay light at startup imports from the subpath entries instead:
+ * `provideMonitorMapRouter`/`monitorsManager` from "@sjvair/monitor-map/core" (no map), and
+ * `monitorMapRoutes` from "@sjvair/monitor-map/routes" (same tree, lazy layout and routes).
+ * `monitorMapRoutes` from this entry stays eager.
  */
 export { monitorMapRoutes } from "./routes";
 export { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter } from "./router-context";
@@ -31,7 +36,7 @@ export { monitorsManager } from "./monitors/monitors.svelte";
 export { collocationSitesManager } from "./collocation-sites/collocations.svelte";
 export { evStationsManager } from "./ev-stations/ev-stations.svelte";
 export { hmsManager } from "./hms/hms.svelte";
-export { mapManager, DefaultMapStyle, initializeMap } from "./map/map.svelte";
+export { mapManager, DefaultMapStyle, initializeMap } from "./map/map-manager.svelte.js";
 // Map integrations
 export { monitorsMapIntegration, MonitorsMapIntegration } from "./monitors/monitors-map-integration.svelte";
 export { collocationSitesMapIntegration } from "./collocation-sites/collocations-map-integration.svelte";

package/dist/lib/lazy-routes.d.ts

@@ -0,0 +1,10 @@
+import type { Routes } from "sv-router";
+/**
+ * Lazy routes entry (`@sjvair/monitor-map/routes`): the same route tree as the main entry's
+ * `monitorMapRoutes`, but the layout and every route load on demand, so a host router can
+ * reference it at startup without loading the map.
+ *
+ * Each component must stay a literal `() => import(...)`: sv-router recognises lazy
+ * components by matching the function's source text, so a helper wrapper would break it.
+ */
+export declare const monitorMapRoutes: Routes;

package/dist/lib/lazy-routes.js

@@ -0,0 +1,13 @@
+/**
+ * Lazy routes entry (`@sjvair/monitor-map/routes`): the same route tree as the main entry's
+ * `monitorMapRoutes`, but the layout and every route load on demand, so a host router can
+ * reference it at startup without loading the map.
+ *
+ * Each component must stay a literal `() => import(...)`: sv-router recognises lazy
+ * components by matching the function's source text, so a helper wrapper would break it.
+ */
+export const monitorMapRoutes = {
+    layout: () => import("./MonitorMapLayout.svelte"),
+    "/": () => import("./MainMapView.svelte"),
+    "/monitor/:id": () => import("./MonitorDetailPanel.svelte")
+};

package/dist/lib/map/Map.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import "@maptiler/sdk/dist/maptiler-sdk.css";
-	import { initializeMap } from "./map.svelte";
+	import { initializeMap } from "./map-manager.svelte.js";
 	import { integrationsManager } from "./integrations/integrations-manager";
 	import type { SomeMapIntegration } from "./integrations/types";
 

package/dist/lib/map/MapShell.svelte

@@ -53,7 +53,7 @@
 	import LoadScreen, { disable as disableLoadScreen } from "../LoadScreen.svelte";
 	import Map from "./Map.svelte";
 	import OptionsBar from "../options/OptionsBar.svelte";
-	import { mapManager } from "./map.svelte";
+	import { mapManager } from "./map-manager.svelte.js";
 	import { useMonitorMapRouter } from "../router-context";
 
 	let {
@@ -74,7 +74,7 @@
 
 	$effect(() => {
 		// mapManager.map is only ever assigned once its own initial "load" has
-		// already fired (see initializeMap in map.svelte.ts), so by the time this
+		// already fired (see initializeMap in map-manager.svelte.ts), so by the time this
 		// effect sees a non-null map, it's already safe to reveal — waiting for a
 		// further "idle" event here is unreliable since one may never fire again.
 		if (mapManager.map && ready) {

package/dist/lib/map/integrations/click-manager.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 class ClickManager {
     registrations = [];
     isListening = false;

package/dist/lib/map/integrations/map-geojson-integration.svelte.js

@@ -1,5 +1,5 @@
 import { MapLayerIntegration } from "./map-layer-integration.svelte";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 export class MapGeoJSONIntegration extends MapLayerIntegration {
     remove() {
         this.removeLayerAndSource();

package/dist/lib/map/integrations/map-icon-manager.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import { SvelteMap } from "svelte/reactivity";
 export class MapIconManager {
     icons = new SvelteMap();

package/dist/lib/map/integrations/map-layer-integration.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import { MapIntegration } from "./map-integration.svelte";
 export class MapLayerIntegration extends MapIntegration {
     beforeLayer;

package/dist/lib/map/integrations/tooltip.svelte.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import { XMap } from "@tstk/builtin-extensions";
 function handleZoom() {
     TooltipManager.activeHandle?.clearTooltip();

package/dist/lib/map/map-style-state.svelte.js

@@ -1,4 +1,4 @@
-import { DefaultMapStyle, mapManager } from "./map.svelte";
+import { DefaultMapStyle, mapManager } from "./map-manager.svelte.js";
 import { integrationsManager } from "./integrations/integrations-manager";
 import { variantForStyle } from "./basemap";
 /** Basemap + theme selection, shared so the Settings menu and Reset Map Options agree. */

package/dist/lib/monitors/components/MonitorClusterTooltip.svelte

@@ -6,7 +6,7 @@
 	import { area } from "@turf/area";
 	import { convertArea } from "@turf/helpers";
 	import DataBox from "../../components/DataBox.svelte";
-	import { mapManager } from "../../map/map.svelte";
+	import { mapManager } from "../../map/map-manager.svelte.js";
 	import type { MonitorClusterMapFeature, MonitorMapFeature } from "../types";
 	import { monitorsManager } from "../monitors.svelte";
 	import { getCurrentLevel } from "../monitor-utils";

package/dist/lib/monitors/monitors-cluster-renderer.js

@@ -1,4 +1,4 @@
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 import { mountPopup } from "../map/utils";
 import { clickManager } from "../map/integrations/click-manager";
 import { getTypeShape } from "./monitor-utils";

package/dist/lib/monitors/monitors-icon-manager.svelte.js

@@ -1,6 +1,6 @@
 import { asDataURI, circle, square, triangle } from "../map/icons";
 import { MapIconManager } from "../map/integrations/map-icon-manager";
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 const MONITOR_ICONS = { circle, square, triangle };
 const MONITOR_ICON_BORDER_WIDTH = 2;
 const MONITOR_ICON_DEFAULT_COLOR = "#969696"; // light gray

package/dist/lib/monitors/monitors-map-integration.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { mapManager } from "../map/map.svelte";
+import { mapManager } from "../map/map-manager.svelte.js";
 import { clickManager } from "../map/integrations/click-manager";
 import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
 import { monitorsManager } from "./monitors.svelte";

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

@@ -3,6 +3,7 @@ import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
 import type { MonitorsDataSource } from "./types";
 declare class MonitorsManager implements MonitorsDataSource {
+    #private;
     autoUpdate: Interval;
     initialized: boolean;
     latest: XMap<string, MonitorLatestType<"pm25" | "o3">> | null;
@@ -11,7 +12,17 @@ declare class MonitorsManager implements MonitorsDataSource {
     pollutant: "pm25" | "o3" | null;
     levels: Array<SJVAirEntryLevel> | null;
     constructor();
+    /**
+     * 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.
+     */
     init(urlPollutant?: string | number | boolean): Promise<void>;
+    /**
+     * Restarts polling after something stopped it (MonitorMapLayout stops it on destroy),
+     * refreshing first since the data may be stale. A no-op before init or while polling.
+     */
+    resumeAutoUpdate(): void;
     update(): Promise<void>;
 }
 export declare const monitorsManager: MonitorsManager;

package/dist/lib/monitors/monitors.svelte.js

@@ -10,6 +10,8 @@ class MonitorsManager {
     meta = $state(null);
     pollutant = $state(null);
     levels = $derived(this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
+    #initPromise = null;
+    #requestedPollutant = null;
     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
@@ -31,23 +33,80 @@ class MonitorsManager {
             });
         });
     }
-    async init(urlPollutant) {
+    /**
+     * 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.
+     */
+    init(urlPollutant) {
         if (this.initialized)
-            return;
-        [this.list, this.meta] = await Promise.all([getMonitorsList(), getMonitorsMeta()]);
-        this.pollutant =
-            urlPollutant === "pm25" || urlPollutant === "o3" ? urlPollutant : this.meta.default_pollutant;
-        this.latest = await getMonitorsLatestMap(this.pollutant);
+            return Promise.resolve();
+        if (urlPollutant === "pm25" || urlPollutant === "o3") {
+            this.#requestedPollutant = urlPollutant;
+        }
+        this.#initPromise ??= this.#runInit().finally(() => {
+            this.#initPromise = null;
+            this.#requestedPollutant = null;
+        });
+        return this.#initPromise;
+    }
+    async #runInit() {
+        // 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;
         this.autoUpdate.start();
         this.initialized = true;
     }
+    /**
+     * Restarts polling after something stopped it (MonitorMapLayout stops it on destroy),
+     * refreshing first since the data may be stale. A no-op before init or while polling.
+     */
+    resumeAutoUpdate() {
+        if (!this.initialized || this.autoUpdate.isActive)
+            return;
+        this.update().catch(console.error);
+        this.autoUpdate.start();
+    }
     async update() {
         if (!this.initialized)
             return;
-        [this.list, this.latest] = await Promise.all([
+        const pollutant = this.pollutant;
+        const [list, latest] = await Promise.all([
             getMonitorsList(),
-            getMonitorsLatestMap(this.pollutant || this.meta?.default_pollutant || "pm25")
+            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;
     }
 }
 async function getMonitorsLatestMap(pollutant) {

package/dist/lib/search/Search.svelte

@@ -3,7 +3,7 @@
 	import { Marker } from "@maptiler/sdk";
 	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
 	import { useMonitorMapRouter } from "../router-context";
-	import { mapManager } from "../map/map.svelte";
+	import { mapManager } from "../map/map-manager.svelte.js";
 	import { debounce } from "../utils";
 	import { monitorSearch, geocode, type SearchResult } from "./service";
 	import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "4.0.3",
+	"version": "4.1.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SJVAir/monitor-map"
@@ -16,7 +16,8 @@
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
-		"test": "vitest run"
+		"test": "vitest run",
+		"test:bundle": "npm run build:lib && node tests/bundle/check-bundle.mjs"
 	},
 	"type": "module",
 	"svelte": "./dist/lib/index.js",
@@ -26,6 +27,16 @@
 			"svelte": "./dist/lib/index.js",
 			"types": "./dist/lib/index.d.ts",
 			"default": "./dist/lib/index.js"
+		},
+		"./core": {
+			"svelte": "./dist/lib/core.js",
+			"types": "./dist/lib/core.d.ts",
+			"default": "./dist/lib/core.js"
+		},
+		"./routes": {
+			"svelte": "./dist/lib/lazy-routes.js",
+			"types": "./dist/lib/lazy-routes.d.ts",
+			"default": "./dist/lib/lazy-routes.js"
 		}
 	},
 	"files": [

package/src/lib/MonitorMapLayout.svelte

@@ -62,6 +62,8 @@
 	}
 
 	monitorsManager.init(route.search.pollutant);
+	// 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) => {

package/src/lib/collocation-sites/collocations-map-integration.svelte.ts

@@ -1,6 +1,6 @@
 import { type Popup, type MapLayerEventType, type Map as MaptilerMap } from "@maptiler/sdk";
 import type { Geometry } from "geojson";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { CollocationIconManager, getCollocationIconId } from "./collocations-icon-manager.svelte";
 import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";

package/src/lib/core.ts

@@ -0,0 +1,17 @@
+/**
+ * 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;
+ * `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 {
+	ROUTER_KEY,
+	provideMonitorMapRouter,
+	useMonitorMapRouter,
+	type MonitorMapRouterApi
+} from "./router-context";
+export { monitorsManager } from "./monitors/monitors.svelte.js";
+export type { MonitorsManager } from "./monitors/monitors.svelte.js";
+export type { MonitorsDataSource, MonitorsPollutant } from "./monitors/types";

package/src/lib/ev-stations/ev-stations-cluster-renderer.ts

@@ -1,6 +1,6 @@
 import type { GeoJSONSource, MapLayerEventType, Popup } from "@maptiler/sdk";
 import type { Point } from "geojson";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { mountPopup } from "$lib/map/utils";
 import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
 import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";

package/src/lib/ev-stations/ev-stations-map-integration.svelte.ts

@@ -6,7 +6,7 @@ import type {
 } from "@maptiler/sdk";
 import type { Geometry } from "geojson";
 import { untrack } from "svelte";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
 import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { MapDisplayOption } from "$lib/map/integrations/map-display-option.svelte";

package/src/lib/hms/hms-fire-map-integration.svelte.ts

@@ -1,7 +1,7 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
 import type { Feature } from "geojson";
 import type { Point } from "geojson";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { hmsManager } from "./hms.svelte";
 import { HMSFireIconManager, getTierIconId } from "./hms-fire-icon-manager";

package/src/lib/hms/hms-smoke-map-integration.svelte.ts

@@ -1,7 +1,7 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
 import type { Feature, MultiPolygon } from "geojson";
 import type { HMSSmokeGeoJSON } from "@sjvair/sdk/hms";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { MapGeoJSONIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { hmsManager } from "./hms.svelte";
 import type { SmokeDensityStyle } from "$lib/legend/legend-data";

package/src/lib/index.ts

@@ -23,6 +23,11 @@
  *
  * <Router />
  * ```
+ *
+ * A host that must stay light at startup imports from the subpath entries instead:
+ * `provideMonitorMapRouter`/`monitorsManager` from "@sjvair/monitor-map/core" (no map), and
+ * `monitorMapRoutes` from "@sjvair/monitor-map/routes" (same tree, lazy layout and routes).
+ * `monitorMapRoutes` from this entry stays eager.
  */
 export { monitorMapRoutes } from "./routes";
 export {
@@ -41,8 +46,8 @@ export { evStationsManager } from "./ev-stations/ev-stations.svelte";
 export type { EvStationsManager } from "./ev-stations/ev-stations.svelte";
 export { hmsManager } from "./hms/hms.svelte";
 export type { HMSManager } from "./hms/hms.svelte";
-export { mapManager, DefaultMapStyle, initializeMap } from "./map/map.svelte";
-export type { MapManager } from "./map/map.svelte";
+export { mapManager, DefaultMapStyle, initializeMap } from "./map/map-manager.svelte.js";
+export type { MapManager } from "./map/map-manager.svelte.js";
 
 // Map integrations
 export {

package/src/lib/lazy-routes.ts

@@ -0,0 +1,15 @@
+import type { Routes } from "sv-router";
+
+/**
+ * Lazy routes entry (`@sjvair/monitor-map/routes`): the same route tree as the main entry's
+ * `monitorMapRoutes`, but the layout and every route load on demand, so a host router can
+ * reference it at startup without loading the map.
+ *
+ * Each component must stay a literal `() => import(...)`: sv-router recognises lazy
+ * components by matching the function's source text, so a helper wrapper would break it.
+ */
+export const monitorMapRoutes: Routes = {
+	layout: () => import("./MonitorMapLayout.svelte"),
+	"/": () => import("./MainMapView.svelte"),
+	"/monitor/:id": () => import("./MonitorDetailPanel.svelte")
+};

package/src/lib/map/Map.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import "@maptiler/sdk/dist/maptiler-sdk.css";
-	import { initializeMap } from "./map.svelte";
+	import { initializeMap } from "./map-manager.svelte.js";
 	import { integrationsManager } from "$lib/map/integrations/integrations-manager";
 	import type { SomeMapIntegration } from "./integrations/types";
 

package/src/lib/map/MapShell.svelte

@@ -53,7 +53,7 @@
 	import LoadScreen, { disable as disableLoadScreen } from "$lib/LoadScreen.svelte";
 	import Map from "$lib/map/Map.svelte";
 	import OptionsBar from "$lib/options/OptionsBar.svelte";
-	import { mapManager } from "$lib/map/map.svelte";
+	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import { useMonitorMapRouter } from "$lib/router-context";
 
 	let {
@@ -74,7 +74,7 @@
 
 	$effect(() => {
 		// mapManager.map is only ever assigned once its own initial "load" has
-		// already fired (see initializeMap in map.svelte.ts), so by the time this
+		// already fired (see initializeMap in map-manager.svelte.ts), so by the time this
 		// effect sees a non-null map, it's already safe to reveal — waiting for a
 		// further "idle" event here is unreliable since one may never fire again.
 		if (mapManager.map && ready) {

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

@@ -1,5 +1,5 @@
 import type { MapGeoJSONFeature, MapMouseEvent } from "@maptiler/sdk";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 
 export type ClickHandler = (features: MapGeoJSONFeature[], evt: MapMouseEvent & object) => void;
 

package/src/lib/map/integrations/map-geojson-integration.svelte.ts

@@ -2,7 +2,7 @@ import type { Map as MaptilerMap } from "@maptiler/sdk";
 import type { Feature, Geometry } from "geojson";
 import type { MapIconManager } from "./map-icon-manager";
 import { MapLayerIntegration } from "./map-layer-integration.svelte";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 
 export abstract class MapGeoJSONIntegration<
 	T = Record<string, unknown>

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

@@ -1,5 +1,5 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import type { MapImageIcon } from "./types";
 import { SvelteMap } from "svelte/reactivity";
 

package/src/lib/map/integrations/map-layer-integration.svelte.ts

@@ -1,6 +1,6 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
 import { untrack } from "svelte";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import { MapIntegration } from "./map-integration.svelte";
 
 export abstract class MapLayerIntegration extends MapIntegration {

package/src/lib/map/integrations/tooltip.svelte.ts

@@ -1,5 +1,5 @@
 import type { MapLayerEventType, Popup } from "@maptiler/sdk";
-import { mapManager } from "../map.svelte";
+import { mapManager } from "../map-manager.svelte.js";
 import { XMap } from "@tstk/builtin-extensions";
 
 export type TooltipBuilder = (evt: MapLayerEventType["mousemove"] & object) => Popup | void;

package/src/lib/map/map-style-state.svelte.ts

@@ -1,5 +1,5 @@
 import type { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
-import { DefaultMapStyle, mapManager } from "./map.svelte";
+import { DefaultMapStyle, mapManager } from "./map-manager.svelte.js";
 import { integrationsManager } from "./integrations/integrations-manager";
 import { variantForStyle } from "./basemap";
 

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

@@ -6,7 +6,7 @@
 	import { area } from "@turf/area";
 	import { convertArea } from "@turf/helpers";
 	import DataBox from "$lib/components/DataBox.svelte";
-	import { mapManager } from "$lib/map/map.svelte";
+	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import type { MonitorClusterMapFeature, MonitorMapFeature } from "../types";
 	import { monitorsManager } from "../monitors.svelte";
 	import { getCurrentLevel } from "../monitor-utils";

package/src/lib/monitors/monitors-cluster-renderer.ts

@@ -7,7 +7,7 @@ import type {
 } from "@maptiler/sdk";
 import type { Point } from "geojson";
 import type { SJVAirEntryLevel } from "@sjvair/sdk";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { mountPopup } from "$lib/map/utils";
 import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
 import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";

package/src/lib/monitors/monitors-icon-manager.svelte.ts

@@ -1,7 +1,7 @@
 import type { MonitorData, SJVAirEntryLevel } from "@sjvair/sdk";
 import { asDataURI, circle, square, triangle } from "$lib/map/icons";
 import { MapIconManager } from "$lib/map/integrations/map-icon-manager";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import type { MonitorsDataSource } from "./types";
 
 const MONITOR_ICONS = { circle, square, triangle };

package/src/lib/monitors/monitors-map-integration.svelte.ts

@@ -6,7 +6,7 @@ import {
 import type { MonitorType, SJVAirEntryLevel } from "@sjvair/sdk";
 import { untrack } from "svelte";
 import type { Geometry } from "geojson";
-import { mapManager } from "$lib/map/map.svelte";
+import { mapManager } from "$lib/map/map-manager.svelte.js";
 import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
 import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
 import { monitorsManager } from "./monitors.svelte";

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

@@ -10,7 +10,7 @@ import {
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
 import { untrack } from "svelte";
-import type { MonitorsDataSource } from "./types";
+import type { MonitorsDataSource, MonitorsPollutant } from "./types";
 
 class MonitorsManager implements MonitorsDataSource {
 	autoUpdate: Interval = new Interval(async () => await this.update(), 2 * 60 * 1000);
@@ -27,6 +27,9 @@ class MonitorsManager implements MonitorsDataSource {
 		this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null
 	);
 
+	#initPromise: Promise<void> | null = null;
+	#requestedPollutant: MonitorsPollutant | null = null;
+
 	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
@@ -48,25 +51,90 @@ class MonitorsManager implements MonitorsDataSource {
 		});
 	}
 
-	async init(urlPollutant?: string | number | boolean): Promise<void> {
-		if (this.initialized) return;
+	/**
+	 * 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.
+	 */
+	init(urlPollutant?: string | number | boolean): Promise<void> {
+		if (this.initialized) return Promise.resolve();
+
+		if (urlPollutant === "pm25" || urlPollutant === "o3") {
+			this.#requestedPollutant = urlPollutant;
+		}
+
+		this.#initPromise ??= this.#runInit().finally(() => {
+			this.#initPromise = null;
+			this.#requestedPollutant = null;
+		});
+
+		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;
 
-		[this.list, this.meta] = await Promise.all([getMonitorsList(), getMonitorsMeta()]);
+		// 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 =
-			urlPollutant === "pm25" || urlPollutant === "o3" ? urlPollutant : this.meta.default_pollutant;
-		this.latest = await getMonitorsLatestMap(this.pollutant);
+		this.pollutant = fetchedPollutant;
+		this.latest = latest;
 		this.autoUpdate.start();
 		this.initialized = true;
 	}
 
+	/**
+	 * Restarts polling after something stopped it (MonitorMapLayout stops it on destroy),
+	 * refreshing first since the data may be stale. A no-op before init or while polling.
+	 */
+	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;
 
-		[this.list, this.latest] = await Promise.all([
+		const pollutant = this.pollutant;
+		const [list, latest] = await Promise.all([
 			getMonitorsList(),
-			getMonitorsLatestMap(this.pollutant || this.meta?.default_pollutant || "pm25")
+			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;
 	}
 }
 

package/src/lib/search/Search.svelte

@@ -3,7 +3,7 @@
 	import { Marker } from "@maptiler/sdk";
 	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
 	import { useMonitorMapRouter } from "../router-context";
-	import { mapManager } from "$lib/map/map.svelte";
+	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import { debounce } from "$lib/utils";
 	import { monitorSearch, geocode, type SearchResult } from "./service";
 	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";