@sjvair/monitor-map 4.0.3 → 4.2.0

package/dist/lib/data-chart/DataChart.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { untrack } from "svelte";
 	import type { Attachment } from "svelte/attachments";
-	import type { MonitorLatestType } from "@sjvair/sdk";
 	import type { DateRange as CalendarRange } from "bits-ui";
 	import { parseAbsolute } from "@internationalized/date";
 	import { Maximize, SquareX } from "@lucide/svelte";
@@ -9,13 +9,23 @@
 	import { getMonitorEntriesCSVUrl } from "@sjvair/sdk/monitors";
 	import { format, parseISO } from "date-fns";
 	import { RangeCalendar } from "../components/ui/range-calendar";
+	import type { PanelPollutant } from "../monitors/panel-pollutant";
+	import { monitorsManager } from "../monitors/monitors.svelte";
 	import { DataChartManager } from "./data-chart.svelte";
-	import { createDateRange } from "./DateRange";
-	import { fetchChartData } from "./requests";
+	import { createDateRange, extendToNow, includesToday } from "./DateRange";
+	import { fetchChartData, type ChartMonitor } from "./requests";
 	import { getChartConfig } from "./chart-utils";
-	import { monitorsManager } from "../monitors/monitors.svelte";
+	import { levelColors } from "./level-colors";
+
+	interface Props {
+		monitor: ChartMonitor;
+		/** The pollutant to chart. Independent of the pollutant the map is coloring by. */
+		pollutant: PanelPollutant;
+		/** Bumped by the owner whenever fresh data may exist; see the effect below. */
+		refreshTick?: number;
+	}
 
-	let { monitor }: { monitor: MonitorLatestType<"pm25" | "o3"> } = $props();
+	let { monitor, pollutant, refreshTick = 0 }: Props = $props();
 
 	const chartManager = new DataChartManager();
 	let expanded = $state(false);
@@ -34,7 +44,8 @@
 			format(parseISO(chartManager.dateRange.end), "MMM d, yyyy")
 	);
 
-	const noChartData = $derived(!chartManager.chartData.length);
+	// A request with no entries still resolves to [[], []], so test the x axis, not the tuple.
+	const noChartData = $derived(!chartManager.chartData[0]?.length);
 	const message = $derived(
 		chartManager.loading
 			? "Loading Data"
@@ -42,10 +53,38 @@
 				? "No Data Available For Selected Date Range"
 				: ""
 	);
-	const pollutantLabel = $derived(monitorsManager.pollutant === "pm25" ? "PM 2.5" : "Ozone");
+	const pollutantLabel = $derived(pollutant === "pm25" ? "PM 2.5" : "Ozone");
+	// Level definitions are shared metadata, not the map's current selection.
+	const colors = $derived(
+		levelColors(monitorsManager.meta?.entryType(pollutant).asIter.levels ?? [])
+	);
 
+	// Reload for another monitor or pollutant, not for a new object describing the same one.
+	// Both go through a $derived: the owner recomputes what it passes on every refresh, and a
+	// prop read directly would re-run this effect even when the value is unchanged.
+	const monitorId = $derived(monitor.id);
+	const chartPollutant = $derived(pollutant);
 	$effect(() => {
-		if (monitor) loadChartData();
+		void monitorId;
+		void chartPollutant;
+		untrack(() => loadChartData());
+	});
+
+	// Whether the chosen range ended on the day it was chosen, so it should follow the present.
+	// Remembered, not re-tested per tick: a panel left open past midnight keeps following.
+	let live = includesToday(chartManager.dateRange);
+	let seenTick = untrack(() => refreshTick);
+
+	// A range that ended in the past cannot gain entries, so only a live one reloads.
+	$effect(() => {
+		const tick = refreshTick;
+		if (tick === seenTick) return;
+		seenTick = tick;
+		if (!live) return;
+		untrack(() => {
+			chartManager.dateRange = extendToNow(chartManager.dateRange);
+			loadChartData({ silent: true });
+		});
 	});
 
 	$effect(() => {
@@ -82,7 +121,7 @@
 			instance?.destroy?.();
 			el.innerHTML = "";
 			const maxDiff = Math.max(...flatData) - Math.min(...flatData);
-			const opts = getChartConfig(monitor.type, maxDiff, width, height);
+			const opts = getChartConfig(monitor.type, maxDiff, width, height, colors, pollutantLabel);
 			instance = new uPlot(opts, chartManager.chartData, el);
 		};
 
@@ -103,9 +142,19 @@
 		};
 	};
 
-	async function loadChartData() {
-		chartManager.loading = true;
-		chartManager.chartData = await fetchChartData(monitor, chartManager.dateRange);
+	let chartRequest = 0;
+
+	// `silent` keeps the current chart on screen while a timed refresh loads.
+	async function loadChartData({ silent = false } = {}) {
+		const request = ++chartRequest;
+		if (!silent) chartManager.loading = true;
+		const data = await fetchChartData(monitor, chartManager.dateRange, pollutant);
+		// A newer request (another range, monitor, pollutant or refresh) owns the chart now.
+		if (request !== chartRequest) return;
+		// A failed request resolves to [] (an empty range is [[], []]); a background refresh
+		// that failed keeps the chart already on screen.
+		if (silent && data.length === 0) return;
+		chartManager.chartData = data;
 		chartManager.loading = false;
 	}
 
@@ -113,6 +162,7 @@
 		if (calendarValue?.start && calendarValue?.end) {
 			dataRange = calendarValue;
 			chartManager.dateRange = createDateRange(dataRange.start, dataRange.end);
+			live = includesToday(chartManager.dateRange);
 			calendarOpen = false;
 			loadChartData();
 		}
@@ -121,7 +171,7 @@
 	function downloadCSV() {
 		const url = getMonitorEntriesCSVUrl({
 			monitorId: monitor.id,
-			entryType: monitorsManager.pollutant ?? "pm25",
+			entryType: pollutant,
 			timestampGte: chartManager.dateRange.start,
 			timestampLte: chartManager.dateRange.end
 		});

package/dist/lib/data-chart/DataChart.svelte.d.ts

@@ -1,8 +1,13 @@
-import type { MonitorLatestType } from "@sjvair/sdk";
 import "uplot/dist/uPlot.min.css";
-type $$ComponentProps = {
-    monitor: MonitorLatestType<"pm25" | "o3">;
-};
-declare const DataChart: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { PanelPollutant } from "../monitors/panel-pollutant";
+import { type ChartMonitor } from "./requests";
+interface Props {
+    monitor: ChartMonitor;
+    /** The pollutant to chart. Independent of the pollutant the map is coloring by. */
+    pollutant: PanelPollutant;
+    /** Bumped by the owner whenever fresh data may exist; see the effect below. */
+    refreshTick?: number;
+}
+declare const DataChart: import("svelte").Component<Props, {}, "">;
 type DataChart = ReturnType<typeof DataChart>;
 export default DataChart;

package/dist/lib/data-chart/DateRange.d.ts

@@ -4,3 +4,7 @@ export type DateRange = {
     end: string;
 };
 export declare function createDateRange(start?: DateValue, end?: DateValue): DateRange;
+/** Whether the range ends on the current calendar day, i.e. it can still gain entries. */
+export declare function includesToday(range: DateRange): boolean;
+/** The same range with its end moved to the present. */
+export declare function extendToNow(range: DateRange): DateRange;

package/dist/lib/data-chart/DateRange.js

@@ -1,4 +1,4 @@
-import { subDays, startOfDay, endOfDay, isToday } from "date-fns";
+import { subDays, startOfDay, endOfDay, isToday, parseISO } from "date-fns";
 export function createDateRange(start, end) {
     if (!start || !end) {
         return {
@@ -14,3 +14,11 @@ export function createDateRange(start, end) {
         end: endDate.toISOString()
     };
 }
+/** Whether the range ends on the current calendar day, i.e. it can still gain entries. */
+export function includesToday(range) {
+    return isToday(parseISO(range.end));
+}
+/** The same range with its end moved to the present. */
+export function extendToNow(range) {
+    return { start: range.start, end: new Date().toISOString() };
+}

package/dist/lib/data-chart/chart-utils.d.ts

@@ -1,3 +1,4 @@
+import type { LevelColors } from "./level-colors";
 import type uPlot from "uplot";
 import type { MonitorType } from "@sjvair/sdk";
-export declare function getChartConfig(sourceName: MonitorType, maxDiff: number, width: number, height: number): uPlot.Options;
+export declare function getChartConfig(sourceName: MonitorType, maxDiff: number, width: number, height: number, colors: LevelColors, label: string): uPlot.Options;

package/dist/lib/data-chart/chart-utils.js

@@ -1,32 +1,29 @@
-import { monitorsManager } from "../monitors/monitors.svelte";
 import { tooltipsPlugin, uPlotCursorConfig } from "./tooltip";
 import { fromUnixTime, getUnixTime, isToday, isAfter } from "date-fns";
 const PM25_AVG_60_STROKE = "3572b0";
-function getColors() {
-    const levels = monitorsManager.levels ?? [];
-    const colors = levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]);
-    colors.push([Infinity, "000000"]);
-    return colors;
-}
 const baseXSeriesConfig = {};
 const baseYSeriesConfig = {
     show: true,
     spanGaps: false,
     width: 1
 };
-const pm25SeriesConfig = {
+/** The level stops plus a final black stop, so values above the top level still get a color. */
+function gradientStops(colors) {
+    return [...colors, [Infinity, "000000"]];
+}
+const pm25SeriesConfig = (stops) => ({
     ...baseYSeriesConfig,
     label: "Real Time",
     width: 2,
-    stroke: (u) => scaleGradient(u, "y", 1, getColors(), true)
-};
-const pm25Avg60SeriesConfig = {
+    stroke: (u) => scaleGradient(u, "y", 1, stops, true)
+});
+const pm25Avg60SeriesConfig = (stops) => ({
     ...baseYSeriesConfig,
     label: "60 Minute Average",
-    stroke: (u) => autograd(u, PM25_AVG_60_STROKE)
-};
-export function getChartConfig(sourceName, maxDiff, width, height) {
-    const series = getSeriesConfigs(sourceName);
+    stroke: (u) => autograd(u, PM25_AVG_60_STROKE, stops)
+});
+export function getChartConfig(sourceName, maxDiff, width, height, colors, label) {
+    const series = getSeriesConfigs(sourceName, gradientStops(colors));
     const getStroke = (u, sIdx) => {
         const stroke = series[sIdx].stroke;
         return stroke(u, sIdx);
@@ -34,7 +31,7 @@ export function getChartConfig(sourceName, maxDiff, width, height) {
     return {
         width,
         height,
-        cursor: uPlotCursorConfig.get(),
+        cursor: uPlotCursorConfig.get(colors),
         // @ts-expect-error: select missing pseudo "required" options
         select: {
             show: false
@@ -77,7 +74,7 @@ export function getChartConfig(sourceName, maxDiff, width, height) {
                 }
             },
             {
-                label: monitorsManager.pollutant === "pm25" ? "PM 2.5" : "Ozone",
+                label,
                 side: 3,
                 values: (_, ticks) => ticks.map((v) => v.toFixed(maxDiff < 5 ? 1 : 0))
             }
@@ -87,9 +84,8 @@ export function getChartConfig(sourceName, maxDiff, width, height) {
         }
     };
 }
-function getSeriesConfigs(monitorType) {
-    const singleSeriesConfig = Object.assign({}, pm25Avg60SeriesConfig);
-    singleSeriesConfig.width = 2;
+function getSeriesConfigs(monitorType, stops) {
+    const singleSeriesConfig = { ...pm25Avg60SeriesConfig(stops), width: 2 };
     switch (monitorType) {
         case "airnow":
         case "aqview":
@@ -99,14 +95,14 @@ function getSeriesConfigs(monitorType) {
             return [baseXSeriesConfig, singleSeriesConfig];
         case "airgradient":
         case "purpleair":
-            return [baseXSeriesConfig, pm25SeriesConfig];
+            return [baseXSeriesConfig, pm25SeriesConfig(stops)];
     }
 }
-function autograd(u, fallback) {
+function autograd(u, fallback, stops) {
     if (u.series.length > 2) {
         return fallback;
     }
-    return scaleGradient(u, "y", 1, getColors(), true);
+    return scaleGradient(u, "y", 1, stops, true);
 }
 function scaleGradient(u, scaleKey, ori, scaleStops, discrete = false) {
     const scale = u.scales[scaleKey];

package/dist/lib/data-chart/level-colors.d.ts

@@ -0,0 +1,6 @@
+/** Color stops for a chart: each level's lower bound and its hex color without the `#`. */
+export type LevelColors = Array<[number, string]>;
+export declare function levelColors(levels: ReadonlyArray<{
+    range: readonly [number, ...unknown[]] | readonly number[];
+    color: string;
+}>): LevelColors;

package/dist/lib/data-chart/level-colors.js

@@ -0,0 +1,5 @@
+// `range` is loose on purpose: the SDK types it as a tuple with an open tail, and only its
+// first member (the level's lower bound) is read.
+export function levelColors(levels) {
+    return levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]);
+}

package/dist/lib/data-chart/requests.d.ts

@@ -1,3 +1,6 @@
-import { type MonitorLatestType } from "@sjvair/sdk";
+import { type MonitorDetails } from "@sjvair/sdk";
+import type { PanelPollutant } from "../monitors/panel-pollutant";
 import type { DateRange } from "./DateRange";
-export declare function fetchChartData(m: MonitorLatestType<"pm25" | "o3">, d: DateRange): Promise<uPlot.AlignedData>;
+/** The monitor fields the chart reads. */
+export type ChartMonitor = Pick<MonitorDetails, "id" | "name" | "type" | "data_source">;
+export declare function fetchChartData(m: ChartMonitor, d: DateRange, entryType: PanelPollutant): Promise<uPlot.AlignedData>;

package/dist/lib/data-chart/requests.js

@@ -1,9 +1,8 @@
 import { getMonitorEntries } from "@sjvair/sdk";
 import { getUnixTime, parseISO, differenceInMinutes, addMinutes } from "date-fns";
-import { monitorsManager } from "../monitors/monitors.svelte";
-export async function fetchChartData(m, d) {
+export async function fetchChartData(m, d, entryType) {
     return await getMonitorEntries({
-        entryType: monitorsManager.pollutant ?? "pm25",
+        entryType,
         monitorId: m.id,
         timestampGte: d.start,
         timestampLte: d.end

package/dist/lib/data-chart/tooltip.d.ts

@@ -1,6 +1,7 @@
+import type { LevelColors } from "./level-colors";
 export declare const uPlotCursorConfig: {
     set: (left: number, top: number) => void;
-    get: () => uPlot.Cursor;
+    get: (colors: LevelColors) => uPlot.Cursor;
 };
 export declare function tooltipsPlugin(): {
     hooks: {

package/dist/lib/data-chart/tooltip.js

@@ -1,11 +1,4 @@
 import { format, fromUnixTime } from "date-fns";
-import { monitorsManager } from "../monitors/monitors.svelte";
-function getColors() {
-    return (monitorsManager.levels ?? []).map((level) => [
-        level.range[0],
-        level.color.replace(/^#/, "")
-    ]);
-}
 let cursLeft = -100;
 let cursTop = -100;
 export const uPlotCursorConfig = {
@@ -13,7 +6,7 @@ export const uPlotCursorConfig = {
         cursLeft = left;
         cursTop = top;
     },
-    get: () => ({
+    get: (colors) => ({
         left: cursLeft,
         top: cursTop,
         y: false,
@@ -21,7 +14,6 @@ export const uPlotCursorConfig = {
             size: 7,
             fill: (u, sIdx) => {
                 const xIdx = u.cursor.idxs[sIdx];
-                const colors = getColors();
                 if (xIdx != null && u.series.length >= 2 && sIdx === 1) {
                     const val = u.data[sIdx][xIdx];
                     for (let i = colors.length - 1; i >= 0; i--) {

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";
@@ -169,9 +169,9 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
             clickManager.unregister([this.referenceId]);
             this.tooltipManager.disable();
             this.renderer.remove();
-            this.icons.loadIcons().then(() => {
-                if (mapManager.styleLoading)
-                    return;
+            // Clustering may be toggled again before the icons arrive; only the latest apply runs.
+            this.supersedePending();
+            this.whenIconsLoad(() => {
                 this.renderer.apply(this.handleStationClick);
                 this.tooltipManager.enable();
             });
@@ -181,9 +181,7 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
             this.tooltipManager.disable();
             clickManager.unregister([this.referenceId]);
             super.apply();
-            this.icons.loadIcons().then(() => {
-                if (mapManager.styleLoading)
-                    return;
+            this.whenIconsLoad(() => {
                 clickManager.register([this.referenceId], this.handleStationClick);
                 this.tooltipManager.enable();
             });

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,19 +23,24 @@
  *
  * <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";
 export { monitorsManager } from "./monitors/monitors.svelte";
-export type { MonitorsManager } from "./monitors/monitors.svelte";
+export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte";
 export { collocationSitesManager } from "./collocation-sites/collocations.svelte";
 export type { CollocationSitesManager } from "./collocation-sites/collocations.svelte";
 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-chunks.d.ts

@@ -0,0 +1,2 @@
+export declare const loadMonitorMapLayout: () => Promise<typeof import("./MonitorMapLayout.svelte")>;
+export declare const loadMonitorDetailPanel: () => Promise<typeof import("./MonitorDetailPanel.svelte")>;

package/dist/lib/lazy-chunks.js

@@ -0,0 +1,6 @@
+import { sharedLoad } from "./shared-load";
+// The heavy chunks behind the lazy routes entry (`./lazy-routes.ts`). They are imported here,
+// not in the wrapper components that await them: sv-router treats any function whose source
+// contains `() => import(...)` as a lazy route, and a compiled component is such a function.
+export const loadMonitorMapLayout = sharedLoad(() => import("./MonitorMapLayout.svelte"));
+export const loadMonitorDetailPanel = sharedLoad(() => import("./MonitorDetailPanel.svelte"));

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

@@ -0,0 +1,12 @@
+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 map layout and the monitor panel load on demand, so a host
+ * router can reference it at startup without loading the map.
+ *
+ * The components here are light wrappers that load the real ones themselves
+ * (`./lazy-chunks.ts`) and show the load screen meanwhile. They are deliberately not
+ * `() => import(...)` routes: sv-router renders nothing for a route until every lazy component
+ * on it has loaded, which left the outlet empty on a cold link into the map.
+ */
+export declare const monitorMapRoutes: Routes;

package/dist/lib/lazy-routes.js

@@ -0,0 +1,18 @@
+import LazyMapLayout from "./LazyMapLayout.svelte";
+import LazyMonitorDetailPanel from "./LazyMonitorDetailPanel.svelte";
+import MainMapView from "./MainMapView.svelte";
+/**
+ * Lazy routes entry (`@sjvair/monitor-map/routes`): the same route tree as the main entry's
+ * `monitorMapRoutes`, but the map layout and the monitor panel load on demand, so a host
+ * router can reference it at startup without loading the map.
+ *
+ * The components here are light wrappers that load the real ones themselves
+ * (`./lazy-chunks.ts`) and show the load screen meanwhile. They are deliberately not
+ * `() => import(...)` routes: sv-router renders nothing for a route until every lazy component
+ * on it has loaded, which left the outlet empty on a cold link into the map.
+ */
+export const monitorMapRoutes = {
+    layout: LazyMapLayout,
+    "/": MainMapView,
+    "/monitor/:id": LazyMonitorDetailPanel
+};

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

@@ -11,6 +11,11 @@
 		 * is true.
 		 */
 		ready: boolean;
+		/**
+		 * Rendered on the load screen, under the logo, for as long as the load screen is up.
+		 * Render it only when the caller's initial load failed (e.g. a message and a retry).
+		 */
+		loadError?: Snippet;
 		/** True when the routed detail panel (`children`) should be visible */
 		panelOpen: boolean;
 		/**
@@ -53,12 +58,13 @@
 	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 {
 		integrations,
 		ready,
+		loadError,
 		panelOpen,
 		knownRoutes = [],
 		menu,
@@ -74,7 +80,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) {
@@ -123,7 +129,7 @@
 </script>
 
 <div class="relative flex h-full w-full flex-col md:flex-row">
-	<LoadScreen />
+	<LoadScreen error={loadError} />
 	<div class="relative flex-1 overflow-hidden">
 		<Map {integrations} />
 		{@render overlays?.()}

package/dist/lib/map/MapShell.svelte.d.ts

@@ -9,6 +9,11 @@ export interface MapShellProps {
      * is true.
      */
     ready: boolean;
+    /**
+     * Rendered on the load screen, under the logo, for as long as the load screen is up.
+     * Render it only when the caller's initial load failed (e.g. a message and a retry).
+     */
+    loadError?: Snippet;
     /** True when the routed detail panel (`children`) should be visible */
     panelOpen: boolean;
     /**

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.d.ts

@@ -15,5 +15,18 @@ export declare abstract class MapGeoJSONIntegration<T = Record<string, unknown>>
 }
 export declare abstract class MapIconLayerIntegration<T = Record<string, unknown>> extends MapGeoJSONIntegration<T> {
     abstract icons: MapIconManager;
+    private generation;
+    /**
+     * Drops every callback still waiting on icons. `apply()` and `remove()` call it, so a
+     * subclass overriding `apply()` without calling `super.apply()` first must call it itself.
+     */
+    protected supersedePending(): void;
+    /**
+     * Runs `run` once the icons have loaded, unless an `apply()` or `remove()` has happened
+     * since (the state it was scheduled for is gone) or a basemap change is in flight (the
+     * refresh on "style.load" re-applies).
+     */
+    protected whenIconsLoad(run: () => void): void;
     apply(): void;
+    remove(): void;
 }