@sjvair/monitor-map 3.2.2 → 3.3.1

package/dist/lib/MonitorMapLayout.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { onDestroy } from "svelte";
-	import LoadScreen, { disable as disableLoadScreen } from "./LoadScreen.svelte";
-	import Map from "./map/Map.svelte";
-	import Menu from "./map/Menu.svelte";
+	import { onDestroy, untrack } from "svelte";
+	import MapShell from "./map/MapShell.svelte";
 	import MonitorsDisplayOptions from "./monitors/components/MonitorsDisplayOptions.svelte";
 	import MapLayersDisplayOptions from "./components/MapLayersDisplayOptions.svelte";
 	import MapStyleDisplayOptions from "./map/MapStyleDisplayOptions.svelte";
-	import { mapManager } from "./map/map.svelte";
 	import { monitorsManager } from "./monitors/monitors.svelte";
 	import { monitorsMapIntegration } from "./monitors/monitors-map-integration.svelte";
 	import { windMapIntegration } from "./wind/wind.svelte";
@@ -33,8 +30,6 @@
 
 	const { route, navigate, basePath } = useMonitorMapRouter();
 
-	const TRANSITION_MS = 300;
-
 	const integrations: Array<SomeMapIntegration> = [
 		baseLayerSeperator,
 		collocationSitesMapIntegration,
@@ -59,10 +54,15 @@
 	// applies a later "?pollutant=" change (e.g. navigating in from elsewhere) to an already-running manager.
 	$effect(() => {
 		const urlPollutant = route.search.pollutant;
+		// Read monitorsManager.pollutant via untrack: this effect must only react to the URL
+		// changing (e.g. navigating in from elsewhere), not to monitorsManager.pollutant itself.
+		// Tracking it here would make a UI-driven pollutant change (e.g. the display-options
+		// toggle) re-trigger this effect before the manager->URL effect below can sync the URL,
+		// so this effect would see the still-stale URL and immediately revert the user's change.
 		if (
 			monitorsManager.initialized &&
 			(urlPollutant === "pm25" || urlPollutant === "o3") &&
-			monitorsManager.pollutant !== urlPollutant
+			untrack(() => monitorsManager.pollutant) !== urlPollutant
 		) {
 			monitorsManager.pollutant = urlPollutant;
 		}
@@ -76,22 +76,6 @@
 		}
 	});
 
-	$effect(() => {
-		if (mapManager.map && monitorsManager.initialized) {
-			mapManager.map.once("idle", () => disableLoadScreen());
-		}
-	});
-
-	$effect(() => {
-		if (panelOpen) {
-			// Container width snapped to open; resize after layout settles
-			requestAnimationFrame(() => mapManager.map?.resize());
-		} else {
-			// Container width snaps back after the transform transition ends
-			setTimeout(() => mapManager.map?.resize(), TRANSITION_MS);
-		}
-	});
-
 	// Clear selected icon scale when the detail panel closes
 	$effect(() => {
 		if (panelOpen) return;
@@ -101,75 +85,28 @@
 	onDestroy(() => {
 		monitorsManager.autoUpdate.stop();
 	});
-
-	/**
-	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
-	 * as well as navigating back
-	 */
-	const rootPath = basePath || "/";
-	const knownRoutes = [`${basePath}/monitor/`];
-
-	window.addEventListener("pageshow", (e) => {
-		if (e.persisted) window.location.reload();
-	});
-
-	document.addEventListener(
-		"click",
-		(e) => {
-			const anchor = e
-				.composedPath()
-				.find((el) => el instanceof HTMLAnchorElement) as HTMLAnchorElement;
-			if (!anchor) return;
-			const { pathname } = new URL(anchor.href);
-			const isKnown = pathname === rootPath || knownRoutes.some((r) => pathname.startsWith(r));
-			if (!isKnown) {
-				e.stopImmediatePropagation();
-				window.location.href = anchor.href;
-			}
-		},
-		{ capture: true }
-	);
 </script>
 
-<!--
-<div class="shell" class:panel-open={panelOpen}>
-  -->
-<div class="relative flex h-full w-full flex-col md:flex-row">
-	<LoadScreen />
-	<div class="relative flex-1 overflow-hidden">
-		<Map {integrations} />
+<MapShell
+	{integrations}
+	ready={monitorsManager.initialized}
+	{panelOpen}
+	knownRoutes={[`${basePath}/monitor/`]}
+	{basePath}
+>
+	{#snippet menu()}
+		<MonitorsDisplayOptions />
+		<EvStationsDisplayOptions />
+		<MapLayersDisplayOptions />
+		<MapStyleDisplayOptions />
+	{/snippet}
+	{#snippet overlays()}
 		<div class="pointer-events-none absolute bottom-0 left-0 z-10">
 			<MapLegend />
 		</div>
-		<div class="absolute top-4 left-4 z-10">
-			<div class="absolute z-10">
-				<Menu>
-					<MonitorsDisplayOptions />
-					<EvStationsDisplayOptions />
-					<MapLayersDisplayOptions />
-					<MapStyleDisplayOptions />
-				</Menu>
-			</div>
-			<div class="absolute left-16">
-				<Search />
-			</div>
-		</div>
-	</div>
-	<div
-		class={[
-			"panel-containr w-full shrink-0 overflow-hidden",
-			panelOpen ? "h-1/2 md:h-full md:w-1/3" : "md:w-0"
-		]}
-	>
-		<div
-			class={[
-				"panel-contet h-full duration-300 ease-in-out",
-				panelOpen
-					? "translate-y-0 md:translate-x-0"
-					: "translate-y-full md:translate-x-full md:translate-y-0"
-			]}
-		>
-			{@render children()}
+		<div class="absolute top-4 left-20 z-10">
+			<Search />
 		</div>
-	</div>
-</div>
+	{/snippet}
+	{@render children()}
+</MapShell>

package/dist/lib/index.d.ts

@@ -44,6 +44,7 @@ export { baseLayerSeperator } from "./map/integrations/base-layer-seperator";
 export { hmsFireMapIntegration } from "./hms/hms-fire-map-integration.svelte";
 export { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
 export { default as Map } from "./map/Map.svelte";
+export { default as MapShell, type MapShellProps } from "./map/MapShell.svelte";
 export { default as Menu } from "./map/Menu.svelte";
 export { default as LoadScreen, loadScreenState, enable as enableLoadScreen, disable as disableLoadScreen } from "./LoadScreen.svelte";
 export type { LoadScreenState } from "./LoadScreen.svelte";

package/dist/lib/index.js

@@ -42,6 +42,7 @@ export { hmsFireMapIntegration } from "./hms/hms-fire-map-integration.svelte";
 export { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
 // Components
 export { default as Map } from "./map/Map.svelte";
+export { default as MapShell } from "./map/MapShell.svelte";
 export { default as Menu } from "./map/Menu.svelte";
 export { default as LoadScreen, loadScreenState, enable as enableLoadScreen, disable as disableLoadScreen } from "./LoadScreen.svelte";
 export { default as MonitorsDisplayOptions } from "./monitors/components/MonitorsDisplayOptions.svelte";

package/dist/lib/map/MapShell.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { SomeMapIntegration } from "./integrations/types";
+
+	export interface MapShellProps {
+		/** Map integrations to register, e.g. [monitorsMapIntegration] */
+		integrations: Array<SomeMapIntegration>;
+		/**
+		 * True once the caller's own data managers have finished their initial
+		 * load. The shell hides the load screen once the map is idle AND this
+		 * is true.
+		 */
+		ready: boolean;
+		/** True when the routed detail panel (`children`) should be visible */
+		panelOpen: boolean;
+		/**
+		 * Path prefixes that are part of this map's own routed panel (e.g.
+		 * [`${basePath}/monitor/`]) — internal navigation to these should not
+		 * trigger the escape-hatch full-page navigation below.
+		 */
+		knownRoutes?: Array<string>;
+		/** Rendered inside the display-options menu toggle */
+		menu?: Snippet;
+		/** Freeform absolutely-positioned content over the map (legend, search, etc.) */
+		overlays?: Snippet;
+		/** The routed detail panel content */
+		children?: Snippet;
+		/**
+		 * Base path to use for the sv-router escape-hatch's "known" root route.
+		 * If provided, used directly instead of reading `basePath` from
+		 * `useMonitorMapRouter()`. Only relevant when `routerEscapeHatch` is
+		 * enabled.
+		 */
+		basePath?: string;
+		/**
+		 * Whether to install the sv-router escape-hatch (`pageshow`/`click`
+		 * listeners that force a full-page navigation for links outside this
+		 * map's own routes). Defaults to `true`, preserving the existing
+		 * full-page-map behavior. When `true` and no `basePath` prop is given,
+		 * `MapShell` falls back to reading `basePath` from
+		 * `useMonitorMapRouter()`. Set to `false` to embed `MapShell` inside a
+		 * host app with its own routing — this also skips calling
+		 * `useMonitorMapRouter()` entirely, so no `provideMonitorMapRouter(...)`
+		 * ancestor is required.
+		 */
+		routerEscapeHatch?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import LoadScreen, { disable as disableLoadScreen } from "../LoadScreen.svelte";
+	import Map from "./Map.svelte";
+	import Menu from "./Menu.svelte";
+	import { mapManager } from "./map.svelte";
+	import { useMonitorMapRouter } from "../router-context";
+
+	let {
+		integrations,
+		ready,
+		panelOpen,
+		knownRoutes = [],
+		menu,
+		overlays,
+		children,
+		basePath: providedBasePath,
+		routerEscapeHatch = true
+	}: MapShellProps = $props();
+
+	const basePath = providedBasePath ?? (routerEscapeHatch ? useMonitorMapRouter().basePath : "");
+	const TRANSITION_MS = 300;
+
+	$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
+		// 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) {
+			disableLoadScreen();
+		}
+	});
+
+	$effect(() => {
+		if (panelOpen) {
+			// Container width snapped to open; resize after layout settles
+			requestAnimationFrame(() => mapManager.map?.resize());
+		} else {
+			// Container width snaps back after the transform transition ends
+			setTimeout(() => mapManager.map?.resize(), TRANSITION_MS);
+		}
+	});
+
+	/**
+	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
+	 * as well as navigating back
+	 */
+	if (routerEscapeHatch) {
+		const rootPath = basePath || "/";
+
+		window.addEventListener("pageshow", (e) => {
+			if (e.persisted) window.location.reload();
+		});
+
+		document.addEventListener(
+			"click",
+			(e) => {
+				const anchor = e
+					.composedPath()
+					.find((el) => el instanceof HTMLAnchorElement) as HTMLAnchorElement;
+				if (!anchor) return;
+				const { pathname } = new URL(anchor.href);
+				const isKnown = pathname === rootPath || knownRoutes.some((r) => pathname.startsWith(r));
+				if (!isKnown) {
+					e.stopImmediatePropagation();
+					window.location.href = anchor.href;
+				}
+			},
+			{ capture: true }
+		);
+	}
+</script>
+
+<div class="relative flex h-full w-full flex-col md:flex-row">
+	<LoadScreen />
+	<div class="relative flex-1 overflow-hidden">
+		<Map {integrations} />
+		{@render overlays?.()}
+		{#if menu}
+			<div class="absolute top-4 left-4 z-10">
+				<Menu>{@render menu()}</Menu>
+			</div>
+		{/if}
+	</div>
+	<div
+		class={[
+			"panel-containr w-full shrink-0 overflow-hidden",
+			panelOpen ? "h-1/2 md:h-full md:w-1/3" : "md:w-0"
+		]}
+	>
+		<div
+			class={[
+				"panel-contet h-full duration-300 ease-in-out",
+				panelOpen
+					? "translate-y-0 md:translate-x-0"
+					: "translate-y-full md:translate-x-full md:translate-y-0"
+			]}
+		>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,48 @@
+import type { Snippet } from "svelte";
+import type { SomeMapIntegration } from "./integrations/types";
+export interface MapShellProps {
+    /** Map integrations to register, e.g. [monitorsMapIntegration] */
+    integrations: Array<SomeMapIntegration>;
+    /**
+     * True once the caller's own data managers have finished their initial
+     * load. The shell hides the load screen once the map is idle AND this
+     * is true.
+     */
+    ready: boolean;
+    /** True when the routed detail panel (`children`) should be visible */
+    panelOpen: boolean;
+    /**
+     * Path prefixes that are part of this map's own routed panel (e.g.
+     * [`${basePath}/monitor/`]) — internal navigation to these should not
+     * trigger the escape-hatch full-page navigation below.
+     */
+    knownRoutes?: Array<string>;
+    /** Rendered inside the display-options menu toggle */
+    menu?: Snippet;
+    /** Freeform absolutely-positioned content over the map (legend, search, etc.) */
+    overlays?: Snippet;
+    /** The routed detail panel content */
+    children?: Snippet;
+    /**
+     * Base path to use for the sv-router escape-hatch's "known" root route.
+     * If provided, used directly instead of reading `basePath` from
+     * `useMonitorMapRouter()`. Only relevant when `routerEscapeHatch` is
+     * enabled.
+     */
+    basePath?: string;
+    /**
+     * Whether to install the sv-router escape-hatch (`pageshow`/`click`
+     * listeners that force a full-page navigation for links outside this
+     * map's own routes). Defaults to `true`, preserving the existing
+     * full-page-map behavior. When `true` and no `basePath` prop is given,
+     * `MapShell` falls back to reading `basePath` from
+     * `useMonitorMapRouter()`. Set to `false` to embed `MapShell` inside a
+     * host app with its own routing — this also skips calling
+     * `useMonitorMapRouter()` entirely, so no `provideMonitorMapRouter(...)`
+     * ancestor is required.
+     */
+    routerEscapeHatch?: boolean;
+}
+declare const MapShell: import("svelte").Component<MapShellProps, {}, "">;
+type MapShell = ReturnType<typeof MapShell>;
+export default MapShell;

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

@@ -42,7 +42,7 @@ export const initializeMap = (container) => {
             preset: "milkyway"
         }
     });
-    map.once("idle", () => {
+    map.once("load", () => {
         mapManager.map = map;
     });
     return () => map.remove();

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.2.2",
+	"version": "3.3.1",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SJVAir/monitor-map"

package/src/lib/MonitorMapLayout.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
-	import { onDestroy } from "svelte";
-	import LoadScreen, { disable as disableLoadScreen } from "$lib/LoadScreen.svelte";
-	import Map from "$lib/map/Map.svelte";
-	import Menu from "$lib/map/Menu.svelte";
+	import { onDestroy, untrack } from "svelte";
+	import MapShell from "$lib/map/MapShell.svelte";
 	import MonitorsDisplayOptions from "$lib/monitors/components/MonitorsDisplayOptions.svelte";
 	import MapLayersDisplayOptions from "$lib/components/MapLayersDisplayOptions.svelte";
 	import MapStyleDisplayOptions from "$lib/map/MapStyleDisplayOptions.svelte";
-	import { mapManager } from "$lib/map/map.svelte";
 	import { monitorsManager } from "$lib/monitors/monitors.svelte";
 	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
 	import { windMapIntegration } from "$lib/wind/wind.svelte";
@@ -33,8 +30,6 @@
 
 	const { route, navigate, basePath } = useMonitorMapRouter();
 
-	const TRANSITION_MS = 300;
-
 	const integrations: Array<SomeMapIntegration> = [
 		baseLayerSeperator,
 		collocationSitesMapIntegration,
@@ -59,10 +54,15 @@
 	// applies a later "?pollutant=" change (e.g. navigating in from elsewhere) to an already-running manager.
 	$effect(() => {
 		const urlPollutant = route.search.pollutant;
+		// Read monitorsManager.pollutant via untrack: this effect must only react to the URL
+		// changing (e.g. navigating in from elsewhere), not to monitorsManager.pollutant itself.
+		// Tracking it here would make a UI-driven pollutant change (e.g. the display-options
+		// toggle) re-trigger this effect before the manager->URL effect below can sync the URL,
+		// so this effect would see the still-stale URL and immediately revert the user's change.
 		if (
 			monitorsManager.initialized &&
 			(urlPollutant === "pm25" || urlPollutant === "o3") &&
-			monitorsManager.pollutant !== urlPollutant
+			untrack(() => monitorsManager.pollutant) !== urlPollutant
 		) {
 			monitorsManager.pollutant = urlPollutant;
 		}
@@ -76,22 +76,6 @@
 		}
 	});
 
-	$effect(() => {
-		if (mapManager.map && monitorsManager.initialized) {
-			mapManager.map.once("idle", () => disableLoadScreen());
-		}
-	});
-
-	$effect(() => {
-		if (panelOpen) {
-			// Container width snapped to open; resize after layout settles
-			requestAnimationFrame(() => mapManager.map?.resize());
-		} else {
-			// Container width snaps back after the transform transition ends
-			setTimeout(() => mapManager.map?.resize(), TRANSITION_MS);
-		}
-	});
-
 	// Clear selected icon scale when the detail panel closes
 	$effect(() => {
 		if (panelOpen) return;
@@ -101,75 +85,28 @@
 	onDestroy(() => {
 		monitorsManager.autoUpdate.stop();
 	});
-
-	/**
-	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
-	 * as well as navigating back
-	 */
-	const rootPath = basePath || "/";
-	const knownRoutes = [`${basePath}/monitor/`];
-
-	window.addEventListener("pageshow", (e) => {
-		if (e.persisted) window.location.reload();
-	});
-
-	document.addEventListener(
-		"click",
-		(e) => {
-			const anchor = e
-				.composedPath()
-				.find((el) => el instanceof HTMLAnchorElement) as HTMLAnchorElement;
-			if (!anchor) return;
-			const { pathname } = new URL(anchor.href);
-			const isKnown = pathname === rootPath || knownRoutes.some((r) => pathname.startsWith(r));
-			if (!isKnown) {
-				e.stopImmediatePropagation();
-				window.location.href = anchor.href;
-			}
-		},
-		{ capture: true }
-	);
 </script>
 
-<!--
-<div class="shell" class:panel-open={panelOpen}>
-  -->
-<div class="relative flex h-full w-full flex-col md:flex-row">
-	<LoadScreen />
-	<div class="relative flex-1 overflow-hidden">
-		<Map {integrations} />
+<MapShell
+	{integrations}
+	ready={monitorsManager.initialized}
+	{panelOpen}
+	knownRoutes={[`${basePath}/monitor/`]}
+	{basePath}
+>
+	{#snippet menu()}
+		<MonitorsDisplayOptions />
+		<EvStationsDisplayOptions />
+		<MapLayersDisplayOptions />
+		<MapStyleDisplayOptions />
+	{/snippet}
+	{#snippet overlays()}
 		<div class="pointer-events-none absolute bottom-0 left-0 z-10">
 			<MapLegend />
 		</div>
-		<div class="absolute top-4 left-4 z-10">
-			<div class="absolute z-10">
-				<Menu>
-					<MonitorsDisplayOptions />
-					<EvStationsDisplayOptions />
-					<MapLayersDisplayOptions />
-					<MapStyleDisplayOptions />
-				</Menu>
-			</div>
-			<div class="absolute left-16">
-				<Search />
-			</div>
-		</div>
-	</div>
-	<div
-		class={[
-			"panel-containr w-full shrink-0 overflow-hidden",
-			panelOpen ? "h-1/2 md:h-full md:w-1/3" : "md:w-0"
-		]}
-	>
-		<div
-			class={[
-				"panel-contet h-full duration-300 ease-in-out",
-				panelOpen
-					? "translate-y-0 md:translate-x-0"
-					: "translate-y-full md:translate-x-full md:translate-y-0"
-			]}
-		>
-			{@render children()}
+		<div class="absolute top-4 left-20 z-10">
+			<Search />
 		</div>
-	</div>
-</div>
+	{/snippet}
+	{@render children()}
+</MapShell>

package/src/lib/index.ts

@@ -55,6 +55,7 @@ export { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
 
 // Components
 export { default as Map } from "./map/Map.svelte";
+export { default as MapShell, type MapShellProps } from "./map/MapShell.svelte";
 export { default as Menu } from "./map/Menu.svelte";
 export {
 	default as LoadScreen,

package/src/lib/map/MapShell.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { SomeMapIntegration } from "$lib/map/integrations/types";
+
+	export interface MapShellProps {
+		/** Map integrations to register, e.g. [monitorsMapIntegration] */
+		integrations: Array<SomeMapIntegration>;
+		/**
+		 * True once the caller's own data managers have finished their initial
+		 * load. The shell hides the load screen once the map is idle AND this
+		 * is true.
+		 */
+		ready: boolean;
+		/** True when the routed detail panel (`children`) should be visible */
+		panelOpen: boolean;
+		/**
+		 * Path prefixes that are part of this map's own routed panel (e.g.
+		 * [`${basePath}/monitor/`]) — internal navigation to these should not
+		 * trigger the escape-hatch full-page navigation below.
+		 */
+		knownRoutes?: Array<string>;
+		/** Rendered inside the display-options menu toggle */
+		menu?: Snippet;
+		/** Freeform absolutely-positioned content over the map (legend, search, etc.) */
+		overlays?: Snippet;
+		/** The routed detail panel content */
+		children?: Snippet;
+		/**
+		 * Base path to use for the sv-router escape-hatch's "known" root route.
+		 * If provided, used directly instead of reading `basePath` from
+		 * `useMonitorMapRouter()`. Only relevant when `routerEscapeHatch` is
+		 * enabled.
+		 */
+		basePath?: string;
+		/**
+		 * Whether to install the sv-router escape-hatch (`pageshow`/`click`
+		 * listeners that force a full-page navigation for links outside this
+		 * map's own routes). Defaults to `true`, preserving the existing
+		 * full-page-map behavior. When `true` and no `basePath` prop is given,
+		 * `MapShell` falls back to reading `basePath` from
+		 * `useMonitorMapRouter()`. Set to `false` to embed `MapShell` inside a
+		 * host app with its own routing — this also skips calling
+		 * `useMonitorMapRouter()` entirely, so no `provideMonitorMapRouter(...)`
+		 * ancestor is required.
+		 */
+		routerEscapeHatch?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import LoadScreen, { disable as disableLoadScreen } from "$lib/LoadScreen.svelte";
+	import Map from "$lib/map/Map.svelte";
+	import Menu from "$lib/map/Menu.svelte";
+	import { mapManager } from "$lib/map/map.svelte";
+	import { useMonitorMapRouter } from "$lib/router-context";
+
+	let {
+		integrations,
+		ready,
+		panelOpen,
+		knownRoutes = [],
+		menu,
+		overlays,
+		children,
+		basePath: providedBasePath,
+		routerEscapeHatch = true
+	}: MapShellProps = $props();
+
+	const basePath = providedBasePath ?? (routerEscapeHatch ? useMonitorMapRouter().basePath : "");
+	const TRANSITION_MS = 300;
+
+	$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
+		// 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) {
+			disableLoadScreen();
+		}
+	});
+
+	$effect(() => {
+		if (panelOpen) {
+			// Container width snapped to open; resize after layout settles
+			requestAnimationFrame(() => mapManager.map?.resize());
+		} else {
+			// Container width snaps back after the transform transition ends
+			setTimeout(() => mapManager.map?.resize(), TRANSITION_MS);
+		}
+	});
+
+	/**
+	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
+	 * as well as navigating back
+	 */
+	if (routerEscapeHatch) {
+		const rootPath = basePath || "/";
+
+		window.addEventListener("pageshow", (e) => {
+			if (e.persisted) window.location.reload();
+		});
+
+		document.addEventListener(
+			"click",
+			(e) => {
+				const anchor = e
+					.composedPath()
+					.find((el) => el instanceof HTMLAnchorElement) as HTMLAnchorElement;
+				if (!anchor) return;
+				const { pathname } = new URL(anchor.href);
+				const isKnown = pathname === rootPath || knownRoutes.some((r) => pathname.startsWith(r));
+				if (!isKnown) {
+					e.stopImmediatePropagation();
+					window.location.href = anchor.href;
+				}
+			},
+			{ capture: true }
+		);
+	}
+</script>
+
+<div class="relative flex h-full w-full flex-col md:flex-row">
+	<LoadScreen />
+	<div class="relative flex-1 overflow-hidden">
+		<Map {integrations} />
+		{@render overlays?.()}
+		{#if menu}
+			<div class="absolute top-4 left-4 z-10">
+				<Menu>{@render menu()}</Menu>
+			</div>
+		{/if}
+	</div>
+	<div
+		class={[
+			"panel-containr w-full shrink-0 overflow-hidden",
+			panelOpen ? "h-1/2 md:h-full md:w-1/3" : "md:w-0"
+		]}
+	>
+		<div
+			class={[
+				"panel-contet h-full duration-300 ease-in-out",
+				panelOpen
+					? "translate-y-0 md:translate-x-0"
+					: "translate-y-full md:translate-x-full md:translate-y-0"
+			]}
+		>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

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

@@ -61,7 +61,7 @@ export const initializeMap: Attachment<HTMLDivElement> = (container: string | HT
 		}
 	});
 
-	map.once("idle", () => {
+	map.once("load", () => {
 		mapManager.map = map;
 	});