@sjvair/monitor-map 3.6.3 → 4.0.1

package/README.md

@@ -6,7 +6,7 @@ SDK. It ships two ways:
 - **A code-split widget** (`npm run build`), embedded via a `<div id="SJVAirMonitorMap">`
   in a Django template on sjvair.com.
 - **A component library** (`npm run build:lib`, published to npm as
-  `@sjvair/monitor-map`), imported by the `v3-mobile` Capacitor app and by other SJVAir
+  `@sjvair/monitor-map`), imported by the `sjvair-mobile` Capacitor app and by other SJVAir
   projects (e.g. `data-dashboard`) that want to embed the map or reuse its map-display
   logic against their own data.
 
@@ -47,7 +47,7 @@ export const { route, navigate, p, isActive, Router } = createRouter({
 <Router />
 ```
 
-This is what the sjvair.com widget and `v3-mobile` use today, via `MonitorMapLayout`
+This is what the sjvair.com widget and `sjvair-mobile` use today, via `MonitorMapLayout`
 (the thin wrapper `monitorMapRoutes` points to).
 
 ### Embedding `MapShell` directly, with a reduced integration set

package/dist/lib/MonitorMapLayout.svelte

@@ -1,10 +1,25 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { onDestroy, untrack } from "svelte";
+	import { searchParams } from "sv-router";
 	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 OptionsGroup from "./options/OptionsGroup.svelte";
+	import PollutantMenu from "./options/menus/PollutantMenu.svelte";
+	import MonitorsMenu from "./options/menus/MonitorsMenu.svelte";
+	import LayersMenu from "./options/menus/LayersMenu.svelte";
+	import OverlaysMenu from "./options/menus/OverlaysMenu.svelte";
+	import SettingsMenu from "./options/menus/SettingsMenu.svelte";
+	import {
+		applyPollutantSelection,
+		currentSelection,
+		parsePollutantParam
+	} from "./options/pollutant-param";
+	import Legend from "./legend/Legend.svelte";
+	import {
+		fireSmokeLegendSections,
+		pollutantLegendSection,
+		type LegendSection
+	} from "./legend/legend-data";
 	import { monitorsManager } from "./monitors/monitors.svelte";
 	import { monitorsMapIntegration } from "./monitors/monitors-map-integration.svelte";
 	import { windMapIntegration } from "./wind/wind.svelte";
@@ -12,14 +27,12 @@
 	import type { SomeMapIntegration } from "./map/integrations/types";
 	import { collocationSitesManager } from "./collocation-sites/collocations.svelte";
 	import { collocationSitesMapIntegration } from "./collocation-sites/collocations-map-integration.svelte";
-	import EvStationsDisplayOptions from "./ev-stations/components/EvStationsDisplayOptions.svelte";
 	import { evStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte";
 	import { hmsManager } from "./hms/hms.svelte";
 	import { hmsFireMapIntegration } from "./hms/hms-fire-map-integration.svelte";
-	import { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
-	import MapLegend from "./MapLegend.svelte";
+	import { FIRE_LEGEND_CATEGORIES } from "./hms/hms-fire-icon-manager";
+	import { hmsSmokeMapIntegration, SMOKE_LEGEND } from "./hms/hms-smoke-map-integration.svelte";
 	import Search from "./search/Search.svelte";
-	import { searchParams } from "sv-router";
 	import { useMonitorMapRouter } from "./router-context";
 
 	interface Props {
@@ -40,6 +53,14 @@
 		evStationsMapIntegration
 	];
 
+	const pollutantTargets = { manager: monitorsManager, integration: monitorsMapIntegration };
+
+	// "?pollutant=none" must disable monitors before the effects below first run, so the
+	// state->URL effect never sees enabled monitors and overwrites the param.
+	if (parsePollutantParam(route.search.pollutant) === "none") {
+		monitorsMapIntegration.enabled = false;
+	}
+
 	monitorsManager.init(route.search.pollutant);
 	collocationSitesManager.init();
 	hmsManager.init();
@@ -49,30 +70,30 @@
 
 	let panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
 
-	// Keep monitorsManager.pollutant and the "pollutant" URL param in sync, both directions.
-	// init() only seeds pollutant on the manager's first-ever initialization; this effect is what
-	// applies a later "?pollutant=" change (e.g. navigating in from elsewhere) to an already-running manager.
+	// Keep the Pollutant menu's selection (pm25 / o3 / none) and the "pollutant" URL param in
+	// sync, both directions. init() only seeds the pollutant on the manager's first-ever
+	// initialization; this effect applies a later "?pollutant=" change (e.g. navigating in from
+	// elsewhere) to an already-running map.
 	$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") &&
-			untrack(() => monitorsManager.pollutant) !== urlPollutant
-		) {
-			monitorsManager.pollutant = urlPollutant;
-		}
+		const selection = parsePollutantParam(route.search.pollutant);
+		if (!monitorsManager.initialized || !selection) return;
+		// Read current state via untrack: this effect must only react to the URL changing. Tracking
+		// state here would make a UI-driven change re-trigger this effect before the effect below
+		// syncs the URL, so it would see the stale URL and revert the user's change.
+		untrack(() => {
+			if (
+				currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled) !== selection
+			) {
+				applyPollutantSelection(selection, pollutantTargets);
+			}
+		});
 	});
 
-	// ...and the reverse: reflect UI-driven pollutant changes (e.g. the display-options toggle) back to the URL.
+	// ...and the reverse: reflect UI-driven changes back to the URL.
 	$effect(() => {
-		const pollutant = monitorsManager.pollutant;
-		if (pollutant && searchParams.get("pollutant") !== pollutant) {
-			searchParams.set("pollutant", pollutant);
+		const selection = currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled);
+		if (selection && searchParams.get("pollutant") !== selection) {
+			searchParams.set("pollutant", selection);
 		}
 	});
 
@@ -82,6 +103,18 @@
 		monitorsMapIntegration.selectedMonitorId = null;
 	});
 
+	const legendSections: Array<LegendSection> = $derived.by(() => {
+		const sections: Array<LegendSection> = [];
+		if (monitorsMapIntegration.enabled && monitorsManager.pollutant && monitorsManager.levels) {
+			const pollutant = pollutantLegendSection(monitorsManager.pollutant, monitorsManager.levels);
+			if (pollutant) sections.push(pollutant);
+		}
+		if (hmsFireMapIntegration.enabled && hmsSmokeMapIntegration.enabled) {
+			sections.push(...fireSmokeLegendSections(FIRE_LEGEND_CATEGORIES, SMOKE_LEGEND));
+		}
+		return sections;
+	});
+
 	onDestroy(() => {
 		monitorsManager.autoUpdate.stop();
 	});
@@ -95,17 +128,22 @@
 	{basePath}
 >
 	{#snippet menu()}
-		<MonitorsDisplayOptions />
-		<EvStationsDisplayOptions />
-		<MapLayersDisplayOptions />
-		<MapStyleDisplayOptions />
+		<OptionsGroup>
+			<PollutantMenu />
+			<MonitorsMenu />
+		</OptionsGroup>
+		<OptionsGroup>
+			<LayersMenu />
+			<OverlaysMenu />
+			<SettingsMenu />
+		</OptionsGroup>
+	{/snippet}
+	{#snippet search()}
+		<Search />
 	{/snippet}
 	{#snippet overlays()}
-		<div class="pointer-events-none absolute bottom-0 left-0 z-10">
-			<MapLegend />
-		</div>
-		<div class="absolute top-4 left-20 z-10">
-			<Search />
+		<div class="pointer-events-none absolute bottom-4 left-4 z-10">
+			<Legend sections={legendSections} />
 		</div>
 	{/snippet}
 	{@render children()}

package/dist/lib/assets/icons/ozone/ozone-08-sunrise-haze.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 15a6 6 0 0 1 12 0" stroke="#F2A93B" fill="none"/><path d="M20.37 13.52L21.85 13.26M17.46 8.49L18.43 7.34M12.00 6.50L12.00 5.00M6.54 8.49L5.57 7.34M3.63 13.52L2.15 13.26" stroke="#F2A93B" fill="none"/><path d="M2 15h20M5 18.5h14M8.5 22h7" stroke="#5B6770" fill="none"/></svg>

package/dist/lib/assets/icons/pm25/pm25-02-particle-field.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2" fill="#6B5B4E"/><circle cx="16.5" cy="5" r="1.5" fill="#9C8878"/><circle cx="11" cy="12" r="2.5" fill="#6B5B4E"/><circle cx="5" cy="18" r="1.5" fill="#9C8878"/><circle cx="17.5" cy="17.5" r="2" fill="#6B5B4E"/></svg>

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

@@ -8,11 +8,14 @@ declare class CollocationSitesMapIntegration extends MapIconLayerIntegration<Col
     enabled: boolean;
     icons: CollocationIconManager;
     tooltipManager: TooltipManager;
+    /** The option only applies while monitors are shown with PM2.5. */
+    get available(): boolean;
     features: Array<CollocationSiteMapFeature>;
     mapLayer: Parameters<MaptilerMap["addLayer"]>[0];
     get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
     constructor();
     apply(): void;
+    remove(): void;
 }
 export declare const collocationSitesMapIntegration: CollocationSitesMapIntegration;
 export type { CollocationSitesMapIntegration as MonitorsMapIntegration };

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

@@ -19,6 +19,10 @@ class CollocationSitesMapIntegration extends MapIconLayerIntegration {
     enabled = $state(false);
     icons = new CollocationIconManager(monitorsManager);
     tooltipManager = new TooltipManager();
+    /** The option only applies while monitors are shown with PM2.5. */
+    get available() {
+        return monitorsMapIntegration.enabled && monitorsManager.pollutant === "pm25";
+    }
     features = $derived.by(() => {
         if (!monitorsManager.meta ||
             !monitorsManager.pollutant ||
@@ -76,8 +80,10 @@ class CollocationSitesMapIntegration extends MapIconLayerIntegration {
                     return;
                 mapManager.setDataSource(this.referenceId, features);
             });
+            // Remove the layer while the option is unavailable (Ozone or Pollutant = None); restore
+            // it when it becomes available again if the user still has it checked.
             $effect(() => {
-                if (monitorsManager.pollutant === "o3") {
+                if (!this.available) {
                     untrack(() => this.remove());
                 }
                 else if (untrack(() => this.enabled)) {
@@ -87,6 +93,10 @@ class CollocationSitesMapIntegration extends MapIconLayerIntegration {
         });
     }
     apply() {
+        if (!this.available) {
+            this.remove();
+            return;
+        }
         if (!mapManager.map)
             return;
         if (!this.tooltipManager.has(this.referenceId)) {
@@ -95,5 +105,9 @@ class CollocationSitesMapIntegration extends MapIconLayerIntegration {
         this.tooltipManager.enable();
         super.apply();
     }
+    remove() {
+        this.tooltipManager.disable();
+        super.remove();
+    }
 }
 export const collocationSitesMapIntegration = new CollocationSitesMapIntegration();

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

@@ -11,15 +11,15 @@ import { EvStationsClusterRenderer } from "./ev-stations-cluster-renderer";
 import EvStationTooltip from "./components/EvStationTooltip.svelte";
 class EvStationsMapIntegration extends MapIconLayerIntegration {
     referenceId = "ev-stations";
-    enabled = $state(true);
+    enabled = $state(false);
     clustered = $state(true);
     icons = new EvStationIconManager();
     tooltipManager = new TooltipManager();
     renderer = new EvStationsClusterRenderer(this);
     currentPopup = null;
     displayOptions = $derived.by(() => ({
-        lvl2: new MapDisplayOption("Level 2", false, this.icons.get("ev-station-lvl2")),
-        lvl3: new MapDisplayOption("Level 3", false, this.icons.get("ev-station-lvl3"))
+        lvl2: new MapDisplayOption("Level 2", true, this.icons.get("ev-station-lvl2")),
+        lvl3: new MapDisplayOption("Level 3", true, this.icons.get("ev-station-lvl3"))
     }));
     features = $derived.by(() => {
         const result = [];
@@ -97,22 +97,33 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
     constructor() {
         super();
         $effect.root(() => {
-            // Lazy-fetch level data when integration is enabled and level is toggled on
+            // Lazy-fetch level data only once the integration is enabled and the level is on
             $effect(() => {
-                if (this.displayOptions.lvl2.value && evStationsManager.lvl2Stations === undefined) {
+                if (this.enabled &&
+                    this.displayOptions.lvl2.value &&
+                    evStationsManager.lvl2Stations === undefined) {
                     evStationsManager.loadLvl2Stations();
                 }
             });
             $effect(() => {
-                if (this.displayOptions.lvl3.value && evStationsManager.lvl3Stations === undefined) {
+                if (this.enabled &&
+                    this.displayOptions.lvl3.value &&
+                    evStationsManager.lvl3Stations === undefined) {
                     evStationsManager.loadLvl3Stations();
                 }
             });
+            // Every effect below early-returns while disabled so a data refresh can't re-add the layer.
+            // `enabled` is read untracked: the base class's own effect already applies/removes on
+            // enabled changes, and tracking it here would apply twice. The guard comes after each
+            // effect's tracked reads so its dependencies are always collected; returning before
+            // reading anything would leave the effect permanently dead.
             // Push filter changes to the unclustered layer
             $effect(() => {
                 const filter = this.filters;
                 if (!mapManager.map || this.clustered)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 if (mapManager.map.getLayer(this.referenceId)) {
                     mapManager.map.setFilter(this.referenceId, filter);
                 }
@@ -122,6 +133,8 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
                 const features = this.features;
                 if (!mapManager.map || this.clustered)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 mapManager.setDataSource(this.referenceId, features);
             });
             // Sync clustered sources when featuresByLevel changes
@@ -129,6 +142,8 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
                 void this.featuresByLevel;
                 if (!mapManager.map || !this.clustered)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 this.renderer.syncFeatures();
             });
             // Re-apply when clustered mode switches or data first arrives
@@ -137,6 +152,8 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
                 const hasFeatures = Object.keys(this.featuresByLevel).length > 0;
                 if (!untrack(() => mapManager.map) || !hasFeatures)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 untrack(() => this.apply());
             });
         });
@@ -153,6 +170,8 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
             this.tooltipManager.disable();
             this.renderer.remove();
             this.icons.loadIcons().then(() => {
+                if (mapManager.styleLoading)
+                    return;
                 this.renderer.apply(this.handleStationClick);
                 this.tooltipManager.enable();
             });
@@ -163,6 +182,8 @@ class EvStationsMapIntegration extends MapIconLayerIntegration {
             clickManager.unregister([this.referenceId]);
             super.apply();
             this.icons.loadIcons().then(() => {
+                if (mapManager.styleLoading)
+                    return;
                 clickManager.register([this.referenceId], this.handleStationClick);
                 this.tooltipManager.enable();
             });

package/dist/lib/hms/hms-fire-icon-manager.d.ts

@@ -1,4 +1,12 @@
 import { MapIconManager } from "../map/integrations/map-icon-manager";
+import type { LegendCategory } from "../legend/legend-data";
+export type FRPTier = "sm" | "md" | "lg" | "xl" | "xxl";
+export declare const FRP_TIERS: Record<FRPTier, {
+    color: string;
+    size: number;
+}>;
+/** Fire legend blocks (MW), in tier order, using the same colors as the map icons. */
+export declare const FIRE_LEGEND_CATEGORIES: Array<LegendCategory>;
 export declare function getTierIconId(frp: number): string;
 export declare class HMSFireIconManager extends MapIconManager {
     constructor();

package/dist/lib/hms/hms-fire-icon-manager.js

@@ -1,12 +1,21 @@
 import { asDataURI, fireIcon } from "../map/icons";
 import { MapIconManager } from "../map/integrations/map-icon-manager";
-const FRP_TIERS = {
+export const FRP_TIERS = {
     sm: { color: "#FFD700", size: 20 },
     md: { color: "#FF8C00", size: 24 },
     lg: { color: "#FF4500", size: 28 },
     xl: { color: "#DC143C", size: 32 },
     xxl: { color: "#8B0000", size: 36 }
 };
+const FRP_TIER_LABELS = {
+    sm: "<10",
+    md: "10-49",
+    lg: "50-149",
+    xl: "150-349",
+    xxl: "≥350"
+};
+/** Fire legend blocks (MW), in tier order, using the same colors as the map icons. */
+export const FIRE_LEGEND_CATEGORIES = Object.keys(FRP_TIERS).map((tier) => ({ color: FRP_TIERS[tier].color, label: FRP_TIER_LABELS[tier] }));
 export function getTierIconId(frp) {
     if (frp < 10)
         return "hms-fire-sm";

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

@@ -76,7 +76,7 @@ class HMSFireMapIntegration extends MapIconLayerIntegration {
         this.icons
             .loadIcons()
             .then(() => {
-            if (!mapManager.map || !this.enabled)
+            if (!mapManager.map || !this.enabled || mapManager.styleLoading)
                 return;
             this.remove();
             this.zoomedIn = mapManager.map.getZoom() >= ZOOM_THRESHOLD;

package/dist/lib/hms/hms-smoke-map-integration.svelte.d.ts

@@ -2,6 +2,26 @@ import type { Map as MaptilerMap } from "@maptiler/sdk";
 import type { Feature, MultiPolygon } from "geojson";
 import type { HMSSmokeGeoJSON } from "@sjvair/sdk/hms";
 import { MapGeoJSONIntegration } from "../map/integrations/map-geojson-integration.svelte";
+import type { SmokeDensityStyle } from "../legend/legend-data";
+/** Smoke fill styles, shared by the map layer and the legend so they can't drift apart. */
+export declare const SMOKE_DENSITY_STYLES: {
+    light: {
+        label: string;
+        color: string;
+        opacity: number;
+    };
+    medium: {
+        label: string;
+        color: string;
+        opacity: number;
+    };
+    heavy: {
+        label: string;
+        color: string;
+        opacity: number;
+    };
+};
+export declare const SMOKE_LEGEND: Array<SmokeDensityStyle>;
 type SmokeProperties = {
     id: string;
     density: HMSSmokeGeoJSON["density"];

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

@@ -1,6 +1,13 @@
 import { mapManager } from "../map/map.svelte";
 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. */
+export const SMOKE_DENSITY_STYLES = {
+    light: { label: "Light", color: "#bfc8c3", opacity: 0.2 },
+    medium: { label: "Medium", color: "#757b78", opacity: 0.3 },
+    heavy: { label: "Heavy", color: "#333634", opacity: 0.4 }
+};
+export const SMOKE_LEGEND = Object.values(SMOKE_DENSITY_STYLES);
 class HMSSmokeMapIntegration extends MapGeoJSONIntegration {
     referenceId = "hms-smoke";
     enabled = $state(true);
@@ -25,20 +32,28 @@ class HMSSmokeMapIntegration extends MapGeoJSONIntegration {
                     "match",
                     ["get", "density"],
                     "light",
-                    "#bfc8c3",
+                    SMOKE_DENSITY_STYLES.light.color,
                     "medium",
-                    "#757b78",
-                    "#333634"
+                    SMOKE_DENSITY_STYLES.medium.color,
+                    SMOKE_DENSITY_STYLES.heavy.color
+                ],
+                "fill-opacity": [
+                    "match",
+                    ["get", "density"],
+                    "light",
+                    SMOKE_DENSITY_STYLES.light.opacity,
+                    "medium",
+                    SMOKE_DENSITY_STYLES.medium.opacity,
+                    SMOKE_DENSITY_STYLES.heavy.opacity
                 ],
-                "fill-opacity": ["match", ["get", "density"], "light", 0.2, "medium", 0.3, 0.4],
                 "fill-outline-color": [
                     "match",
                     ["get", "density"],
                     "light",
-                    "#bfc8c3",
+                    SMOKE_DENSITY_STYLES.light.color,
                     "medium",
-                    "#757b78",
-                    "#333634"
+                    SMOKE_DENSITY_STYLES.medium.color,
+                    SMOKE_DENSITY_STYLES.heavy.color
                 ]
             }
         };

package/dist/lib/index.d.ts

@@ -45,15 +45,29 @@ 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";
-export { default as MonitorsDisplayOptions } from "./monitors/components/MonitorsDisplayOptions.svelte";
-export { default as EvStationsDisplayOptions } from "./ev-stations/components/EvStationsDisplayOptions.svelte";
-export { default as MapLayersDisplayOptions } from "./components/MapLayersDisplayOptions.svelte";
-export { default as MapStyleDisplayOptions } from "./map/MapStyleDisplayOptions.svelte";
-export { default as ToggleSwitch } from "./components/ToggleSwitch.svelte";
-export { default as SegmentedControl } from "./components/SegmentedControl.svelte";
+export { default as OptionsBar } from "./options/OptionsBar.svelte";
+export { default as OptionsGroup } from "./options/OptionsGroup.svelte";
+export { default as OptionsMenu } from "./options/OptionsMenu.svelte";
+export { default as CheckboxRow } from "./options/rows/CheckboxRow.svelte";
+export { default as RadioRow } from "./options/rows/RadioRow.svelte";
+export { default as SubmenuRow } from "./options/rows/SubmenuRow.svelte";
+export { default as GroupRow } from "./options/rows/GroupRow.svelte";
+export { default as MarkerIcon } from "./options/rows/MarkerIcon.svelte";
+export { default as PollutantMenu } from "./options/menus/PollutantMenu.svelte";
+export { default as MonitorsMenu } from "./options/menus/MonitorsMenu.svelte";
+export { default as LayersMenu } from "./options/menus/LayersMenu.svelte";
+export { default as OverlaysMenu } from "./options/menus/OverlaysMenu.svelte";
+export { default as SettingsMenu } from "./options/menus/SettingsMenu.svelte";
+export { resetMapOptions } from "./options/reset-map-options";
+export { mapStyleState } from "./map/map-style-state.svelte.js";
+export type { MapStyleState } from "./map/map-style-state.svelte.js";
+export { default as Legend } from "./legend/Legend.svelte";
+export { default as LegendBar } from "./legend/LegendBar.svelte";
+export { pollutantLegendSection, fireSmokeLegendSections, type LegendSection, type LegendBarData, type LegendCategory } from "./legend/legend-data";
+export { FIRE_LEGEND_CATEGORIES } from "./hms/hms-fire-icon-manager";
+export { SMOKE_LEGEND } from "./hms/hms-smoke-map-integration.svelte";
 export { MapIntegration } from "./map/integrations/map-integration.svelte";
 export { MapLayerIntegration } from "./map/integrations/map-layer-integration.svelte";
 export { MapIconLayerIntegration as MapGeoJSONIntegration } from "./map/integrations/map-geojson-integration.svelte";

package/dist/lib/index.js

@@ -43,14 +43,29 @@ 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";
-export { default as EvStationsDisplayOptions } from "./ev-stations/components/EvStationsDisplayOptions.svelte";
-export { default as MapLayersDisplayOptions } from "./components/MapLayersDisplayOptions.svelte";
-export { default as MapStyleDisplayOptions } from "./map/MapStyleDisplayOptions.svelte";
-export { default as ToggleSwitch } from "./components/ToggleSwitch.svelte";
-export { default as SegmentedControl } from "./components/SegmentedControl.svelte";
+// Options toolbar / panel (compose these inside MapShell's `menu` snippet)
+export { default as OptionsBar } from "./options/OptionsBar.svelte";
+export { default as OptionsGroup } from "./options/OptionsGroup.svelte";
+export { default as OptionsMenu } from "./options/OptionsMenu.svelte";
+export { default as CheckboxRow } from "./options/rows/CheckboxRow.svelte";
+export { default as RadioRow } from "./options/rows/RadioRow.svelte";
+export { default as SubmenuRow } from "./options/rows/SubmenuRow.svelte";
+export { default as GroupRow } from "./options/rows/GroupRow.svelte";
+export { default as MarkerIcon } from "./options/rows/MarkerIcon.svelte";
+export { default as PollutantMenu } from "./options/menus/PollutantMenu.svelte";
+export { default as MonitorsMenu } from "./options/menus/MonitorsMenu.svelte";
+export { default as LayersMenu } from "./options/menus/LayersMenu.svelte";
+export { default as OverlaysMenu } from "./options/menus/OverlaysMenu.svelte";
+export { default as SettingsMenu } from "./options/menus/SettingsMenu.svelte";
+export { resetMapOptions } from "./options/reset-map-options";
+export { mapStyleState } from "./map/map-style-state.svelte.js";
+// Legend
+export { default as Legend } from "./legend/Legend.svelte";
+export { default as LegendBar } from "./legend/LegendBar.svelte";
+export { pollutantLegendSection, fireSmokeLegendSections } from "./legend/legend-data";
+export { FIRE_LEGEND_CATEGORIES } from "./hms/hms-fire-icon-manager";
+export { SMOKE_LEGEND } from "./hms/hms-smoke-map-integration.svelte";
 // Integration base classes (extend these to add custom map features)
 export { MapIntegration } from "./map/integrations/map-integration.svelte";
 export { MapLayerIntegration } from "./map/integrations/map-layer-integration.svelte";

package/dist/lib/legend/Legend.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { ChevronDownIcon, InfoIcon } from "@lucide/svelte";
+	import LegendBar from "./LegendBar.svelte";
+	import type { LegendSection } from "./legend-data";
+
+	let { sections }: { sections: Array<LegendSection> } = $props();
+
+	// Independent of which sections are active, so toggling a layer doesn't reset it.
+	let collapsed = $state(false);
+</script>
+
+{#if sections.length}
+	<div class="pointer-events-auto w-84 max-w-[calc(100vw-2rem)] rounded-md bg-white shadow">
+		<button
+			type="button"
+			class="flex w-full cursor-pointer items-center gap-2 px-4 py-2 font-semibold"
+			aria-expanded={!collapsed}
+			onclick={() => (collapsed = !collapsed)}
+		>
+			<InfoIcon size={18} class="text-gray-500" />
+			<span class="flex-1 text-left">Legend</span>
+			<ChevronDownIcon size={18} class="transition-transform {collapsed ? '-rotate-90' : ''}" />
+		</button>
+		{#if !collapsed}
+			<div class="flex flex-col gap-3 border-t border-gray-200 px-4 py-3">
+				{#each sections as section (section.id)}
+					<div>
+						<p class="mb-2 text-center text-sm font-semibold">
+							{section.title}
+							{#if section.unit}
+								<span class="text-xs font-normal text-gray-500">({section.unit})</span>
+							{/if}
+						</p>
+						<LegendBar bar={section.bar} />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}

package/dist/lib/legend/Legend.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LegendSection } from "./legend-data";
+type $$ComponentProps = {
+    sections: Array<LegendSection>;
+};
+declare const Legend: import("svelte").Component<$$ComponentProps, {}, "">;
+type Legend = ReturnType<typeof Legend>;
+export default Legend;

package/dist/lib/legend/LegendBar.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import {
+		blocksBackground,
+		gradientBackground,
+		tickPosition,
+		type LegendBarData
+	} from "./legend-data";
+
+	let { bar }: { bar: LegendBarData } = $props();
+
+	const background = $derived(
+		bar.kind === "gradient"
+			? gradientBackground(bar.colors)
+			: blocksBackground(bar.categories.map((category) => category.color))
+	);
+
+	// Labels placed on exact stop positions: gradient ticks, or block breakpoints.
+	const positioned = $derived(bar.kind === "gradient" ? bar.ticks : (bar.breakpoints ?? null));
+</script>
+
+<div class="h-3 rounded" style:background></div>
+{#if positioned}
+	<div class="relative mt-1 h-4 text-xs">
+		{#each positioned as label, i (i)}
+			{@const isFirst = i === 0}
+			{@const isLast = i === positioned.length - 1}
+			<span
+				class={[
+					"absolute top-0 whitespace-nowrap",
+					isFirst && "left-0",
+					isLast && "right-0",
+					!isFirst && !isLast && "-translate-x-1/2"
+				]}
+				style:left={!isFirst && !isLast ? `${tickPosition(i, positioned.length)}%` : undefined}
+				>{label}</span
+			>
+		{/each}
+	</div>
+{:else if bar.kind === "blocks"}
+	<div class="mt-1 flex text-xs">
+		{#each bar.categories as category, i (i)}
+			<span class="min-w-0 flex-1 text-center break-words">{category.label ?? ""}</span>
+		{/each}
+	</div>
+{/if}