@sjvair/monitor-map 3.6.2 → 4.0.0

package/src/lib/map/MapShell.svelte

@@ -19,8 +19,10 @@
 		 * trigger the escape-hatch full-page navigation below.
 		 */
 		knownRoutes?: Array<string>;
-		/** Rendered inside the display-options menu toggle */
+		/** Menus (OptionsGroup/OptionsMenu) rendered inside the options toolbar/panel */
 		menu?: Snippet;
+		/** Rendered last in the toolbar (wide) or beside the menu button (narrow) */
+		search?: Snippet;
 		/** Freeform absolutely-positioned content over the map (legend, search, etc.) */
 		overlays?: Snippet;
 		/** The routed detail panel content */
@@ -50,7 +52,7 @@
 <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 OptionsBar from "$lib/options/OptionsBar.svelte";
 	import { mapManager } from "$lib/map/map.svelte";
 	import { useMonitorMapRouter } from "$lib/router-context";
 
@@ -60,6 +62,7 @@
 		panelOpen,
 		knownRoutes = [],
 		menu,
+		search,
 		overlays,
 		children,
 		basePath: providedBasePath,
@@ -124,10 +127,8 @@
 	<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 menu || search}
+			<OptionsBar {search}>{@render menu?.()}</OptionsBar>
 		{/if}
 	</div>
 	<div

package/src/lib/map/basemap.ts

@@ -0,0 +1,24 @@
+/** The slices of MapTiler's MapStyleVariant / ReferenceMapStyle this module needs. */
+export interface StyleVariantLike {
+	getType(): string;
+}
+
+export interface ReferenceStyleLike<V extends StyleVariantLike> {
+	hasVariant(type: string): boolean;
+	getVariant(type: string): V;
+	getDefaultVariant(): V;
+}
+
+/**
+ * Variant to show after switching basemaps: the same variant type (e.g. "DARK") when the new
+ * basemap offers it, otherwise the new basemap's default.
+ */
+export function variantForStyle<V extends StyleVariantLike>(
+	style: ReferenceStyleLike<V>,
+	previous: StyleVariantLike | null
+): V {
+	if (previous && style.hasVariant(previous.getType())) {
+		return style.getVariant(previous.getType());
+	}
+	return style.getDefaultVariant();
+}

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

@@ -11,7 +11,18 @@ export abstract class MapGeoJSONIntegration<
 	abstract mapSource: Parameters<MaptilerMap["addSource"]>[1];
 
 	remove() {
-		super.remove();
+		this.removeLayerAndSource();
+	}
+
+	/**
+	 * Removes only this integration's own layer and source. Non-virtual on purpose: `apply()`
+	 * paths call it to clear stale map state before re-adding, without triggering a subclass's
+	 * `remove()` override (which also tears down tooltips/click handlers that apply just set up).
+	 */
+	protected removeLayerAndSource(): void {
+		if (mapManager.map?.getLayer(this.referenceId)) {
+			mapManager.map.removeLayer(this.referenceId);
+		}
 		if (mapManager.map?.getSource(this.referenceId)) {
 			mapManager.map.removeSource(this.referenceId);
 		}
@@ -27,7 +38,9 @@ export abstract class MapIconLayerIntegration<
 		if (!mapManager.map) return;
 
 		this.icons.loadIcons().then(() => {
-			this.remove();
+			// A basemap change started while icons loaded; the refresh on "style.load" re-applies.
+			if (mapManager.styleLoading) return;
+			this.removeLayerAndSource();
 			mapManager.map?.addSource(this.referenceId, this.mapSource);
 			super.apply();
 		});

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

@@ -14,12 +14,15 @@ export abstract class MapLayerIntegration extends MapIntegration {
 		// Each integration manages its own lifecycle. Tracking both mapManager.map and
 		// this.enabled means apply/remove fire automatically on map load and on enabled
 		// changes. untrack on the call itself prevents reactive reads inside apply/remove
-		// from leaking back into this effect's dependency graph.
+		// from leaking back into this effect's dependency graph. While a new basemap style is
+		// loading nothing is applied or removed: the refresh on "style.load" does both.
 		$effect.root(() => {
 			$effect(() => {
-				if (mapManager.map && this.enabled) {
+				const enabled = this.enabled;
+				if (!mapManager.map || mapManager.styleLoading) return;
+				if (enabled) {
 					untrack(() => this.apply());
-				} else if (mapManager.map && !this.enabled) {
+				} else {
 					untrack(() => this.remove());
 				}
 			});

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

@@ -0,0 +1,42 @@
+import type { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
+import { DefaultMapStyle, mapManager } from "./map.svelte";
+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: ReferenceMapStyle = $state.raw(DefaultMapStyle.getReferenceStyle());
+	variant: MapStyleVariant = $state.raw(DefaultMapStyle);
+	private applied: MapStyleVariant = DefaultMapStyle;
+
+	selectReferenceStyle(style: ReferenceMapStyle): void {
+		this.referenceStyle = style;
+		this.selectVariant(variantForStyle(style, this.variant));
+	}
+
+	selectVariant(variant: MapStyleVariant): void {
+		this.variant = variant;
+		this.apply();
+	}
+
+	reset(): void {
+		this.referenceStyle = DefaultMapStyle.getReferenceStyle();
+		this.selectVariant(DefaultMapStyle);
+	}
+
+	private apply(): void {
+		const map = mapManager.map;
+		if (!map || this.variant === this.applied) return;
+		this.applied = this.variant;
+		// setStyle wipes every custom source/layer; re-add enabled integrations once it loads.
+		map.once("style.load", () => {
+			mapManager.styleLoading = false;
+			integrationsManager.refresh();
+		});
+		mapManager.styleLoading = true;
+		map.setStyle(this.variant);
+	}
+}
+
+export const mapStyleState = new MapStyleState();
+export type { MapStyleState };

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

@@ -15,6 +15,12 @@ const excludeLayers = ["Sport", "Tourism", "Culture", "Shopping", "Food", "Trans
 
 class MapManager {
 	map: MaptilerMap | null = $state(null);
+	/**
+	 * True between `setStyle()` and the new style's "style.load". Plain (non-reactive) on purpose:
+	 * integrations skip touching the style while it's set, and the `integrationsManager.refresh()`
+	 * that runs on "style.load" applies/removes every integration afterwards.
+	 */
+	styleLoading: boolean = false;
 
 	setDataSource(sourceId: string, features: Array<Feature<Geometry, GeoJsonProperties>>): void {
 		const source = mapManager.map?.getSource(sourceId);

package/src/lib/monitors/monitor-groups.ts

@@ -0,0 +1,20 @@
+/** Monitor display-option keys shown under each Monitors menu group, in display order. */
+export const REFERENCE_GRADE_TYPES = ["airnow", "aqlite", "aqview", "bam1022"] as const;
+export const LOW_COST_TYPES = ["airgradient", "purpleair", "vozbox"] as const;
+
+export type MonitorGroupType =
+	(typeof REFERENCE_GRADE_TYPES)[number] | (typeof LOW_COST_TYPES)[number];
+
+/** The slice of MonitorsMeta needed to know which pollutants a monitor type reports. */
+export interface MonitorTypeMeta {
+	monitors: Record<string, { entries: Record<string, unknown> } | undefined>;
+}
+
+export function typeSupportsPollutant(
+	meta: MonitorTypeMeta | null,
+	type: string,
+	pollutant: string | null
+): boolean {
+	const deviceMeta = meta?.monitors[type];
+	return !!deviceMeta && !!pollutant && pollutant in deviceMeta.entries;
+}

package/src/lib/monitors/monitor-utils.ts

@@ -40,18 +40,14 @@ export function getOrder(monitor: MonitorData): number {
 
 export function getTypeShape(type: string): string {
 	switch (type) {
-		case "airgradient":
-			return "circle";
-
 		case "airnow":
 		case "aqview":
 		case "bam1022":
 		case "aqlite":
 			return "triangle";
 
+		case "airgradient":
 		case "purpleair":
-			return "square";
-
 		case "vozbox":
 			return "circle";
 

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

@@ -13,23 +13,17 @@ export function getIconId<T extends MonitorData>(monitor: T, level: SJVAirEntryL
 	const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
 
 	switch (monitor.type) {
-		case "airgradient":
-			return `${id}-circle`;
-
 		case "airnow":
 		case "aqview":
 		case "bam1022":
+		case "aqlite":
 			return `${id}-triangle`;
 
+		case "airgradient":
 		case "purpleair":
-			return `${id}-${monitor.is_sjvair ? "circle" : "square"}`;
-
 		case "vozbox":
 			return `${id}-circle`;
 
-		case "aqlite":
-			return `${id}-triangle`;
-
 		default:
 			throw new Error(`Map icon for ${monitor.device} has not been set`);
 	}

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

@@ -20,12 +20,6 @@ import type { MonitorMapFeature, MonitorMarkerProperties, MonitorsDataSource } f
 const filters = {
 	monitor(deviceType: MonitorType): ExpressionSpecification {
 		return ["==", ["get", "type"], deviceType];
-	},
-	purpleair(): ExpressionSpecification {
-		return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], false]];
-	},
-	sjvPurpleair(): ExpressionSpecification {
-		return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], true]];
 	}
 };
 
@@ -39,13 +33,17 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	private renderer: MonitorsClusterRenderer = new MonitorsClusterRenderer(this);
 
 	displayOptions = $derived.by(() => ({
-		purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-square")),
-		sjvair: new MapDisplayOption("SJVAir non-FEM", true, this.icons.get("outside-display-circle")),
-		aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
-		bam1022: new MapDisplayOption("SJVAir FEM", true, this.icons.get("outside-display-triangle")),
 		airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
-		vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
 		aqlite: new MapDisplayOption("AQLite", true, this.icons.get("outside-display-triangle")),
+		aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
+		bam1022: new MapDisplayOption("SJVAir", true, this.icons.get("outside-display-triangle")),
+		airgradient: new MapDisplayOption(
+			"AirGradient",
+			true,
+			this.icons.get("outside-display-circle")
+		),
+		purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-circle")),
+		vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
 		inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
 		inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
 	}));
@@ -115,14 +113,13 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 		];
 		const statusFilters: ExpressionSpecification = ["any", ["==", ["get", "is_active"], true]];
 
-		if (this.displayOptions.purpleair.value) monitorFilters.push(filters.purpleair());
+		if (this.displayOptions.airnow.value) monitorFilters.push(filters.monitor("airnow"));
+		if (this.displayOptions.aqlite.value) monitorFilters.push(filters.monitor("aqlite"));
 		if (this.displayOptions.aqview.value) monitorFilters.push(filters.monitor("aqview"));
 		if (this.displayOptions.bam1022.value) monitorFilters.push(filters.monitor("bam1022"));
-		if (this.displayOptions.airnow.value) monitorFilters.push(filters.monitor("airnow"));
+		if (this.displayOptions.airgradient.value) monitorFilters.push(filters.monitor("airgradient"));
+		if (this.displayOptions.purpleair.value) monitorFilters.push(filters.monitor("purpleair"));
 		if (this.displayOptions.vozbox.value) monitorFilters.push(filters.monitor("vozbox"));
-		if (this.displayOptions.aqlite.value) monitorFilters.push(filters.monitor("aqlite"));
-		if (this.displayOptions.sjvair.value)
-			monitorFilters.push(filters.sjvPurpleair(), filters.monitor("airgradient"));
 		if (this.displayOptions.inside.value)
 			locationFilters.push(["==", ["get", "location"], "inside"]);
 		if (this.displayOptions.inactive.value) statusFilters.push(["==", ["get", "is_active"], false]);
@@ -131,8 +128,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	});
 
 	// Groups features by monitor type for per-type cluster sources, applying display option
-	// filters so cluster aggregates only include visible monitors. sjvair purpleair is remapped
-	// to "airgradient" since they share the same shape (circle).
+	// filters so cluster aggregates only include visible monitors.
 	featuresByType: Record<string, MonitorMapFeature[]> = $derived.by(() => {
 		const opts = this.displayOptions;
 		const byType: Record<string, MonitorMapFeature[]> = {};
@@ -144,20 +140,19 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			if (p.location === "inside" && !opts.inside.value) continue;
 
 			const typeVisible: Partial<Record<MonitorType, boolean>> = {
-				purpleair: p.is_sjvair ? opts.sjvair.value : opts.purpleair.value,
-				airgradient: opts.sjvair.value,
+				airnow: opts.airnow.value,
+				aqlite: opts.aqlite.value,
 				aqview: opts.aqview.value,
 				bam1022: opts.bam1022.value,
-				airnow: opts.airnow.value,
-				vozbox: opts.vozbox.value,
-				aqlite: opts.aqlite.value
+				airgradient: opts.airgradient.value,
+				purpleair: opts.purpleair.value,
+				vozbox: opts.vozbox.value
 			};
 			if (!(typeVisible[p.type] ?? true)) continue;
 
-			const key = p.type === "purpleair" && p.is_sjvair ? "airgradient" : p.type;
-			const arr = byType[key] ?? [];
+			const arr = byType[p.type] ?? [];
 			arr.push(feat);
-			byType[key] = arr;
+			byType[p.type] = arr;
 		}
 		return byType;
 	});
@@ -200,12 +195,20 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 		this.icons = new MonitorsIconManager(dataSource);
 
 		$effect.root(() => {
+			// Every effect below early-returns while disabled (Pollutant = None) 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 active layer(s) imperatively
 			$effect(() => {
 				const filter = this.filters;
+				const clustered = this.clustered;
 				if (!mapManager.map) return;
+				if (!untrack(() => this.enabled)) return;
 
-				if (this.clustered) {
+				if (clustered) {
 					this.renderer.syncFilter();
 				} else {
 					if (mapManager.map.getLayer(this.referenceId)) {
@@ -218,6 +221,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			$effect(() => {
 				const features = this.features;
 				if (!mapManager.map || this.clustered) return;
+				if (!untrack(() => this.enabled)) return;
 				mapManager.setDataSource(this.referenceId, features);
 			});
 
@@ -225,6 +229,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			$effect(() => {
 				void this.featuresByType;
 				if (!mapManager.map || !this.clustered) return;
+				if (!untrack(() => this.enabled)) return;
 				this.renderer.syncFeatures();
 			});
 
@@ -232,6 +237,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			$effect(() => {
 				const thresholds = this.clusterIconThresholds;
 				if (!mapManager.map || !this.clustered || !thresholds.length) return;
+				if (!untrack(() => this.enabled)) return;
 				this.renderer.syncThresholds();
 			});
 
@@ -242,6 +248,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 				void this.clustered;
 				const hasFeatures = Object.keys(this.featuresByType).length > 0;
 				if (!untrack(() => mapManager.map) || !hasFeatures) return;
+				if (!untrack(() => this.enabled)) return;
 				untrack(() => this.apply());
 			});
 
@@ -268,6 +275,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			this.tooltipManager.disable();
 			this.renderer.remove();
 			this.icons.loadIcons().then(() => {
+				if (mapManager.styleLoading) return;
 				this.renderer.apply(this.handleMonitorClick);
 				this.tooltipManager.enable();
 				this.applySelectedState();
@@ -279,6 +287,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			clickManager.unregister([this.referenceId]);
 			super.apply();
 			this.icons.loadIcons().then(() => {
+				if (mapManager.styleLoading) return;
 				clickManager.register([this.referenceId], this.handleMonitorClick);
 				this.applySelectedState();
 			});
@@ -286,6 +295,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	}
 
 	remove() {
+		this.tooltipManager.disable();
 		clickManager.unregister([this.referenceId]);
 		this.renderer.remove();
 		super.remove();

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

@@ -9,6 +9,7 @@ import {
 } from "@sjvair/sdk";
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
+import { untrack } from "svelte";
 import type { MonitorsDataSource } from "./types";
 
 class MonitorsManager implements MonitorsDataSource {
@@ -26,6 +27,27 @@ class MonitorsManager implements MonitorsDataSource {
 		this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null
 	);
 
+	constructor() {
+		// Refetch monitors when the pollutant changes after the initial load, wherever the change
+		// comes from (Pollutant menu, URL sync, a host's own UI). Clearing first blanks the markers
+		// instead of briefly coloring them with the previous pollutant's readings.
+		let fetchedPollutant: string | null = null;
+		$effect.root(() => {
+			$effect(() => {
+				const pollutant = this.pollutant;
+				if (!this.initialized) return;
+				if (fetchedPollutant !== null && fetchedPollutant !== pollutant) {
+					untrack(() => {
+						this.list = [];
+						this.latest = null;
+						this.update();
+					});
+				}
+				fetchedPollutant = pollutant;
+			});
+		});
+	}
+
 	async init(urlPollutant?: string | number | boolean): Promise<void> {
 		if (this.initialized) return;
 

package/src/lib/options/OptionsBar.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import { MenuIcon, XIcon } from "@lucide/svelte";
+	import { provideOptionsMenus } from "./options-state.svelte.js";
+	import { isWideLayout, WIDE_LAYOUT_QUERY } from "./layout";
+
+	interface Props {
+		/** OptionsGroup / OptionsMenu content */
+		children?: Snippet;
+		/** Rendered last in the toolbar (wide) or beside the menu button (narrow) */
+		search?: Snippet;
+	}
+
+	let { children, search }: Props = $props();
+
+	const menus = provideOptionsMenus();
+	const panelId = "monitor-map-options-panel";
+	let panelOpen = $state(false);
+
+	// Toolbar only: clicks outside close any click-opened dropdown; clicks inside never do.
+	const closeOnOutsideClick: Attachment<HTMLElement> = (node) => {
+		function handler(e: MouseEvent) {
+			if (isWideLayout() && !node.contains(e.target as Node)) menus.closeAll();
+		}
+		document.addEventListener("click", handler);
+		return () => document.removeEventListener("click", handler);
+	};
+
+	// Open menus mean different things in the toolbar (dropdowns) and the panel (expanded
+	// sections), so crossing the breakpoint (e.g. rotating a phone) starts from a closed state.
+	$effect(() => {
+		const query = window.matchMedia(WIDE_LAYOUT_QUERY);
+		function onchange() {
+			menus.closeAll();
+			panelOpen = false;
+		}
+		query.addEventListener("change", onchange);
+		return () => query.removeEventListener("change", onchange);
+	});
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key !== "Escape") return;
+		panelOpen = false;
+		if (isWideLayout()) menus.closeAll();
+	}
+</script>
+
+<svelte:window {onkeydown} />
+
+<!-- Covers the map area so the narrow panel can fill it; passes pointer events through. -->
+<div class="pointer-events-none absolute inset-0 z-10">
+	<div
+		{@attach closeOnOutsideClick}
+		class="md:absolute md:top-4 md:right-16 md:left-4 md:flex md:flex-wrap md:items-start md:gap-2"
+	>
+		<div
+			class="pointer-events-auto flex items-start gap-2 max-md:absolute max-md:top-4 max-md:left-4 md:contents"
+		>
+			<button
+				type="button"
+				class="flex size-10 shrink-0 items-center justify-center rounded-md bg-white shadow md:hidden"
+				aria-label="Open map options"
+				aria-expanded={panelOpen}
+				aria-controls={panelId}
+				onclick={() => (panelOpen = true)}
+			>
+				<MenuIcon size={22} />
+			</button>
+			{#if search}
+				<div class="md:order-last">{@render search()}</div>
+			{/if}
+		</div>
+		<div
+			id={panelId}
+			class={[
+				"pointer-events-auto md:contents",
+				"max-md:absolute max-md:inset-0 max-md:z-20 max-md:flex max-md:flex-col max-md:gap-2 max-md:overflow-y-auto max-md:bg-white max-md:p-4 max-md:transition-[translate,visibility] max-md:duration-200",
+				!panelOpen && "max-md:invisible max-md:-translate-x-full"
+			]}
+		>
+			<div class="mb-2 flex items-center justify-between md:hidden">
+				<p class="text-lg font-semibold">Map Options</p>
+				<button
+					type="button"
+					class="flex size-9 items-center justify-center rounded-md hover:bg-gray-100"
+					aria-label="Close map options"
+					onclick={() => (panelOpen = false)}
+				>
+					<XIcon size={20} />
+				</button>
+			</div>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

package/src/lib/options/OptionsGroup.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<!-- Joined button cluster on the toolbar; a plain stack of sections in the panel. -->
+<div
+	class="flex flex-col gap-2 md:flex-row md:gap-0 md:divide-x md:divide-gray-200 md:rounded-md md:bg-white md:shadow"
+>
+	{@render children()}
+</div>

package/src/lib/options/OptionsMenu.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { ChevronDownIcon } from "@lucide/svelte";
+	import { useOptionsMenus } from "./options-state.svelte.js";
+	import { isWideLayout } from "./layout";
+
+	interface Props {
+		id: string;
+		label: string;
+		icon: Snippet;
+		children: Snippet;
+		disabled?: boolean;
+		/** Anchor the toolbar dropdown to the trigger's right edge */
+		alignRight?: boolean;
+		/** Show only the icon on the toolbar; the panel section still shows the label */
+		iconOnly?: boolean;
+	}
+
+	let {
+		id,
+		label,
+		icon,
+		children,
+		disabled = false,
+		alignRight = false,
+		iconOnly = false
+	}: Props = $props();
+
+	const menus = useOptionsMenus();
+	const contentId = $derived(`monitor-map-options-${id}`);
+	const open = $derived(menus.isOpen(id) && !disabled);
+</script>
+
+<div
+	role="presentation"
+	class="group/menu relative md:first:[&>button]:rounded-l-md md:last:[&>button]:rounded-r-md"
+	onmouseenter={() => {
+		if (isWideLayout()) menus.closeOthers(id);
+	}}
+>
+	<button
+		type="button"
+		{disabled}
+		aria-expanded={open}
+		aria-controls={contentId}
+		aria-label={iconOnly ? label : undefined}
+		class="flex h-10 w-full items-center gap-2 px-3 text-sm font-medium whitespace-nowrap select-none disabled:cursor-not-allowed max-md:rounded-md max-md:border max-md:border-gray-200 max-md:bg-white md:w-auto md:hover:bg-gray-100 md:disabled:hover:bg-transparent"
+		onclick={() => menus.toggle(id)}
+	>
+		<span class={["flex size-5 items-center justify-center", disabled && "opacity-50"]}>
+			{@render icon()}
+		</span>
+		<span class={[disabled && "opacity-50", iconOnly && "md:hidden"]}>{label}</span>
+		<span class={["ml-auto", disabled && "opacity-50", iconOnly && "md:hidden"]}>
+			<ChevronDownIcon size={16} />
+		</span>
+	</button>
+	<div
+		id={contentId}
+		class={[
+			"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"
+		]}
+	>
+		<div class="py-1 md:max-h-[69vh] md:overflow-y-auto md:rounded-md md:bg-white md:shadow-lg">
+			{@render children()}
+		</div>
+	</div>
+</div>

package/src/lib/options/group-state.ts

@@ -0,0 +1,16 @@
+export type GroupState = "checked" | "unchecked" | "indeterminate" | "empty";
+
+/** Select-all state of a group, computed only from its currently visible rows. */
+export function groupState(values: ReadonlyArray<boolean>): GroupState {
+	if (values.length === 0) return "empty";
+	const checkedCount = values.filter(Boolean).length;
+	if (checkedCount === 0) return "unchecked";
+	return checkedCount === values.length ? "checked" : "indeterminate";
+}
+
+/** Applies a select-all toggle to the given (visible) rows only. */
+export function setGroup(options: ReadonlyArray<{ value: boolean }>, value: boolean): void {
+	for (const option of options) {
+		option.value = value;
+	}
+}

package/src/lib/options/layout.ts

@@ -0,0 +1,10 @@
+/**
+ * Tailwind's default `md` breakpoint (48rem). Layout itself is pure CSS (`md:` / `max-md:`);
+ * this is only read at event time for the few behaviors that differ between the toolbar and
+ * the options panel.
+ */
+export const WIDE_LAYOUT_QUERY = "(min-width: 48rem)";
+
+export function isWideLayout(): boolean {
+	return window.matchMedia(WIDE_LAYOUT_QUERY).matches;
+}