@sjvair/monitor-map 4.0.3 → 4.2.0

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();
@@ -19,16 +19,42 @@ export class MapGeoJSONIntegration extends MapLayerIntegration {
     }
 }
 export class MapIconLayerIntegration extends MapGeoJSONIntegration {
+    generation = 0;
+    /**
+     * 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.
+     */
+    supersedePending() {
+        this.generation++;
+    }
+    /**
+     * 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).
+     */
+    whenIconsLoad(run) {
+        const generation = this.generation;
+        this.icons
+            .loadIcons()
+            .then(() => {
+            if (generation !== this.generation || mapManager.styleLoading)
+                return;
+            run();
+        })
+            .catch(console.error);
+    }
     apply() {
         if (!mapManager.map)
             return;
-        this.icons.loadIcons().then(() => {
-            // A basemap change started while icons loaded; the refresh on "style.load" re-applies.
-            if (mapManager.styleLoading)
-                return;
+        this.supersedePending();
+        this.whenIconsLoad(() => {
             this.removeLayerAndSource();
             mapManager.map?.addSource(this.referenceId, this.mapSource);
             super.apply();
         });
     }
+    remove() {
+        this.supersedePending();
+        super.remove();
+    }
 }

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

@@ -4,10 +4,20 @@ declare class MapStyleState {
     referenceStyle: ReferenceMapStyle;
     variant: MapStyleVariant;
     private applied;
+    private loaded;
+    private stopWaiting;
     selectReferenceStyle(style: ReferenceMapStyle): void;
     selectVariant(variant: MapStyleVariant): void;
     reset(): void;
     private apply;
+    private load;
+    /**
+     * A style that fails to load leaves the map with no style at all, so go back to the last one
+     * that loaded and make the selection say so. When that one fails too (e.g. offline) there is
+     * nothing to draw on: `styleLoading` stays set, since integrations cannot add layers to a
+     * missing style, and the next selection starts a fresh attempt.
+     */
+    private recover;
 }
 export declare const mapStyleState: MapStyleState;
 export type { MapStyleState };

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

@@ -1,11 +1,16 @@
-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. */
 class MapStyleState {
     referenceStyle = $state.raw(DefaultMapStyle.getReferenceStyle());
     variant = $state.raw(DefaultMapStyle);
+    // The variant last handed to setStyle (loaded or still loading); null once a load has failed
+    // with nothing left to fall back to, so that any later selection is tried again.
     applied = DefaultMapStyle;
+    // The variant the map last finished loading, which a failed change falls back to.
+    loaded = DefaultMapStyle;
+    stopWaiting = null;
     selectReferenceStyle(style) {
         this.referenceStyle = style;
         this.selectVariant(variantForStyle(style, this.variant));
@@ -19,17 +24,63 @@ class MapStyleState {
         this.selectVariant(DefaultMapStyle);
     }
     apply() {
+        if (!mapManager.map || this.variant === this.applied)
+            return;
+        this.load(this.variant);
+    }
+    load(variant) {
         const map = mapManager.map;
-        if (!map || this.variant === this.applied)
+        if (!map)
             return;
-        this.applied = this.variant;
+        // A newer change supersedes one still in flight.
+        this.stopWaiting?.();
+        this.applied = variant;
         // setStyle wipes every custom source/layer; re-add enabled integrations once it loads.
-        map.once("style.load", () => {
+        const onLoad = () => {
+            this.stopWaiting?.();
+            this.loaded = variant;
             mapManager.styleLoading = false;
             integrationsManager.refresh();
-        });
+        };
+        // "error" also fires for tiles, sprites and glyphs; only the style document failing means
+        // the change failed.
+        const onError = (event) => {
+            if (!isRequestFor(event.error, variant.getExpandedStyleURL()))
+                return;
+            this.stopWaiting?.();
+            this.recover(variant);
+        };
+        this.stopWaiting = () => {
+            map.off("style.load", onLoad);
+            map.off("error", onError);
+            this.stopWaiting = null;
+        };
+        map.on("style.load", onLoad);
+        map.on("error", onError);
         mapManager.styleLoading = true;
-        map.setStyle(this.variant);
+        map.setStyle(variant);
     }
+    /**
+     * A style that fails to load leaves the map with no style at all, so go back to the last one
+     * that loaded and make the selection say so. When that one fails too (e.g. offline) there is
+     * nothing to draw on: `styleLoading` stays set, since integrations cannot add layers to a
+     * missing style, and the next selection starts a fresh attempt.
+     */
+    recover(failed) {
+        if (failed === this.loaded) {
+            this.applied = null;
+            return;
+        }
+        this.variant = this.loaded;
+        this.referenceStyle = this.loaded.getReferenceStyle();
+        this.load(this.loaded);
+    }
+}
+/** Whether a map "error" event's error is a failed request for `url`, ignoring the query. */
+function isRequestFor(error, url) {
+    const failed = error?.url;
+    if (typeof failed !== "string")
+        return false;
+    return failed.split("?")[0] === url.split("?")[0];
 }
 export const mapStyleState = new MapStyleState();

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/monitor-details.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type MonitorDetails } from "@sjvair/sdk";
+export type MonitorDetailsStatus = "loading" | "ready" | "not-found" | "failed";
+/**
+ * One monitor, fetched by id. Unlike `monitorsManager.latest`, this does not depend on the
+ * map's pollutant or on the monitor being active, so the detail panel can show any monitor.
+ */
+export declare class MonitorDetailsState {
+    #private;
+    monitor: MonitorDetails | null;
+    status: MonitorDetailsStatus;
+    load(id: string): Promise<void>;
+    /** Re-fetches the monitor already shown. A failure keeps the data on screen. */
+    refresh(): Promise<void>;
+    retry(): Promise<void>;
+}

package/dist/lib/monitors/monitor-details.svelte.js

@@ -0,0 +1,63 @@
+import { getMonitorDetails } from "@sjvair/sdk";
+/**
+ * One monitor, fetched by id. Unlike `monitorsManager.latest`, this does not depend on the
+ * map's pollutant or on the monitor being active, so the detail panel can show any monitor.
+ */
+export class MonitorDetailsState {
+    monitor = $state.raw(null);
+    status = $state("loading");
+    #id = null;
+    // Bumped per request; a response for anything but the latest request is dropped.
+    #request = 0;
+    async load(id) {
+        this.#id = id;
+        const request = ++this.#request;
+        this.monitor = null;
+        this.status = "loading";
+        try {
+            const monitor = await getMonitorDetails(id);
+            if (request !== this.#request)
+                return;
+            this.monitor = monitor;
+            this.status = "ready";
+        }
+        catch (error) {
+            if (request !== this.#request)
+                return;
+            if (isNotFound(error)) {
+                this.status = "not-found";
+                return;
+            }
+            console.error(error);
+            this.status = "failed";
+        }
+    }
+    /** Re-fetches the monitor already shown. A failure keeps the data on screen. */
+    async refresh() {
+        if (this.status !== "ready" || this.#id === null)
+            return;
+        const request = ++this.#request;
+        try {
+            const monitor = await getMonitorDetails(this.#id);
+            if (request !== this.#request)
+                return;
+            this.monitor = monitor;
+        }
+        catch (error) {
+            if (request === this.#request)
+                console.error(error);
+        }
+    }
+    retry() {
+        return this.#id === null ? Promise.resolve() : this.load(this.#id);
+    }
+}
+/**
+ * The SDK rejects a failed request with `cause.result.status` set to the HTTP status, or,
+ * when it could not parse the error body, with the `Response` itself as the cause.
+ */
+function isNotFound(error) {
+    const cause = error
+        ?.cause;
+    return cause?.result?.status === 404 || cause?.status === 404;
+}

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";
@@ -257,9 +257,9 @@ class MonitorsMapIntegration 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.handleMonitorClick);
                 this.tooltipManager.enable();
                 this.applySelectedState();
@@ -271,9 +271,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
             this.tooltipManager.enable();
             clickManager.unregister([this.referenceId]);
             super.apply();
-            this.icons.loadIcons().then(() => {
-                if (mapManager.styleLoading)
-                    return;
+            this.whenIconsLoad(() => {
                 clickManager.register([this.referenceId], this.handleMonitorClick);
                 this.applySelectedState();
             });

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

@@ -2,7 +2,15 @@ import { type MonitorData, type MonitorLatestType, type MonitorsMeta, type SJVAi
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
 import type { MonitorsDataSource } from "./types";
+export interface MonitorsInitOptions {
+    /**
+     * Start the 2-minute polling once the initial load finishes. Defaults to true; pass false to
+     * load the data without showing a map (`resumeAutoUpdate()` starts polling later).
+     */
+    autoUpdate?: boolean;
+}
 declare class MonitorsManager implements MonitorsDataSource {
+    #private;
     autoUpdate: Interval;
     initialized: boolean;
     latest: XMap<string, MonitorLatestType<"pm25" | "o3">> | null;
@@ -11,7 +19,20 @@ declare class MonitorsManager implements MonitorsDataSource {
     pollutant: "pm25" | "o3" | null;
     levels: Array<SJVAirEntryLevel> | null;
     constructor();
-    init(urlPollutant?: string | number | boolean): Promise<void>;
+    /**
+     * 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()`.
+     */
+    init(urlPollutant?: string | number | boolean, options?: MonitorsInitOptions): Promise<void>;
+    /**
+     * 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.
+     */
+    resumeAutoUpdate(): void;
     update(): Promise<void>;
 }
 export declare const monitorsManager: MonitorsManager;

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

@@ -10,6 +10,9 @@ 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;
+    #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
@@ -31,23 +34,87 @@ 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. 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()`.
+     */
+    init(urlPollutant, options = {}) {
         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() {
+        // 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;
+    }
+    /**
+     * 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.
+     */
+    resumeAutoUpdate() {
+        if (!this.initialized || this.autoUpdate.isActive)
             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);
+        this.update().catch(console.error);
         this.autoUpdate.start();
-        this.initialized = true;
     }
     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/monitors/panel-pollutant.d.ts

@@ -0,0 +1,37 @@
+/** The pollutants the detail panel can show, in order of preference. */
+export declare const PANEL_POLLUTANTS: readonly ["pm25", "o3"];
+export type PanelPollutant = (typeof PANEL_POLLUTANTS)[number];
+/** The slice of the SDK's `MonitorDetails` this module reads. */
+export interface PanelMonitor {
+    type: string;
+    is_active: boolean;
+    latest: Partial<Record<PanelPollutant, {
+        value?: string;
+    }>>;
+}
+/** The slice of the SDK's `MonitorsMeta` this module reads. */
+export interface PanelMeta {
+    monitors: Record<string, {
+        entries: Record<string, unknown>;
+    } | undefined>;
+}
+export interface PanelPollutantChoice {
+    /** Null when the monitor has no reading and its type publishes neither pollutant. */
+    pollutant: PanelPollutant | null;
+    /** Whether the monitor has a current reading for `pollutant`. */
+    hasReading: boolean;
+}
+/** The panel pollutants this monitor has a current, numeric reading for. */
+export declare function readingPollutants(monitor: Pick<PanelMonitor, "latest">): PanelPollutant[];
+/**
+ * The panel pollutants this monitor type publishes. The API marks each entry type with a
+ * `published` flag the SDK does not type; a type that carries the entry without the flag
+ * counts as publishing it.
+ */
+export declare function publishedPollutants(monitorType: string, meta: PanelMeta): PanelPollutant[];
+/**
+ * The pollutant the detail panel shows: the map's when the monitor has it, otherwise the one
+ * the monitor has. A monitor with no current reading (inactive, or nothing reported) still
+ * gets a pollutant when there is one to chart, so its past data can be browsed.
+ */
+export declare function choosePanelPollutant(mapPollutant: PanelPollutant | null, monitor: PanelMonitor, meta: PanelMeta): PanelPollutantChoice;

package/dist/lib/monitors/panel-pollutant.js

@@ -0,0 +1,43 @@
+/** The pollutants the detail panel can show, in order of preference. */
+export const PANEL_POLLUTANTS = ["pm25", "o3"];
+/** The panel pollutants this monitor has a current, numeric reading for. */
+export function readingPollutants(monitor) {
+    return PANEL_POLLUTANTS.filter((pollutant) => {
+        const value = monitor.latest[pollutant]?.value;
+        return typeof value === "string" && value.trim() !== "" && Number.isFinite(Number(value));
+    });
+}
+/**
+ * The panel pollutants this monitor type publishes. The API marks each entry type with a
+ * `published` flag the SDK does not type; a type that carries the entry without the flag
+ * counts as publishing it.
+ */
+export function publishedPollutants(monitorType, meta) {
+    const entries = meta.monitors[monitorType]?.entries ?? {};
+    return PANEL_POLLUTANTS.filter((pollutant) => {
+        const entry = entries[pollutant];
+        return entry !== undefined && entry.published !== false;
+    });
+}
+/**
+ * The pollutant the detail panel shows: the map's when the monitor has it, otherwise the one
+ * the monitor has. A monitor with no current reading (inactive, or nothing reported) still
+ * gets a pollutant when there is one to chart, so its past data can be browsed.
+ */
+export function choosePanelPollutant(mapPollutant, monitor, meta) {
+    const withReading = readingPollutants(monitor);
+    // The API keeps returning an inactive monitor's last reading, however old, so only an
+    // active monitor's readings count as current.
+    if (monitor.is_active && withReading.length > 0) {
+        const pollutant = mapPollutant && withReading.includes(mapPollutant) ? mapPollutant : withReading[0];
+        return { pollutant, hasReading: true };
+    }
+    // Nothing current: chart what the type publishes, or failing that what it last reported.
+    const published = publishedPollutants(monitor.type, meta);
+    const chartable = published.length > 0 ? published : withReading;
+    if (chartable.length > 0) {
+        const pollutant = mapPollutant && chartable.includes(mapPollutant) ? mapPollutant : chartable[0];
+        return { pollutant, hasReading: false };
+    }
+    return { pollutant: null, hasReading: false };
+}

package/dist/lib/options/OptionsBar.svelte

@@ -42,7 +42,14 @@
 	function onkeydown(e: KeyboardEvent) {
 		if (e.key !== "Escape") return;
 		panelOpen = false;
-		if (isWideLayout()) menus.closeAll();
+		if (!isWideLayout()) return;
+		// Focus on a row would be left inside the hidden dropdown; hand it back to the trigger.
+		const focused = document.activeElement;
+		const trigger = focused
+			?.closest("[data-options-menu]")
+			?.querySelector<HTMLElement>(":scope > button");
+		menus.closeAll();
+		if (trigger !== focused) trigger?.focus();
 	}
 </script>
 

package/dist/lib/options/OptionsMenu.svelte

@@ -33,10 +33,19 @@
 
 <div
 	role="presentation"
+	data-options-menu
 	class="group/menu relative md:first:[&>button]:rounded-l-md md:last:[&>button]:rounded-r-md"
 	onmouseenter={() => {
 		if (isWideLayout()) menus.closeOthers(id);
 	}}
+	onfocusout={(e) => {
+		// Toolbar only: focus moving on to something outside this menu (tabbing past the last
+		// row) closes its dropdown. No destination means a click on something unfocusable, which
+		// the outside-click handler in OptionsBar decides.
+		const next = e.relatedTarget;
+		if (!isWideLayout() || !(next instanceof Node) || e.currentTarget.contains(next)) return;
+		menus.close(id);
+	}}
 >
 	<button
 		type="button"
@@ -61,7 +70,7 @@
 			"max-md:pt-1 md:absolute md:top-full md:z-20 md:min-w-64 md:pt-1",
 			alignRight ? "md:right-0" : "md:left-0",
 			open ? "block" : "hidden",
-			!disabled && "md:group-hover/menu:block md:group-has-[:focus-visible]/menu:block"
+			!disabled && "md:group-hover/menu:block"
 		]}
 	>
 		<div class="py-1 md:max-h-[69vh] md:overflow-y-auto md:rounded-md md:bg-white md:shadow-lg">

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/dist/lib/shared-load.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Wraps a loader so overlapping calls share one run and a resolved run is reused, while a
+ * rejected run is forgotten: the next call tries again.
+ */
+export declare function sharedLoad<T>(load: () => Promise<T>): () => Promise<T>;

package/dist/lib/shared-load.js

@@ -0,0 +1,14 @@
+/**
+ * Wraps a loader so overlapping calls share one run and a resolved run is reused, while a
+ * rejected run is forgotten: the next call tries again.
+ */
+export function sharedLoad(load) {
+    let pending = null;
+    return () => {
+        pending ??= load().catch((error) => {
+            pending = null;
+            throw error;
+        });
+        return pending;
+    };
+}