@sjvair/monitor-map 3.6.3 → 4.0.1

package/dist/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/dist/lib/options/OptionsBar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** OptionsGroup / OptionsMenu content */
+    children?: Snippet;
+    /** Rendered last in the toolbar (wide) or beside the menu button (narrow) */
+    search?: Snippet;
+}
+declare const OptionsBar: import("svelte").Component<Props, {}, "">;
+type OptionsBar = ReturnType<typeof OptionsBar>;
+export default OptionsBar;

package/dist/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/dist/lib/options/OptionsGroup.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const OptionsGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type OptionsGroup = ReturnType<typeof OptionsGroup>;
+export default OptionsGroup;

package/dist/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/dist/lib/options/OptionsMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+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;
+}
+declare const OptionsMenu: import("svelte").Component<Props, {}, "">;
+type OptionsMenu = ReturnType<typeof OptionsMenu>;
+export default OptionsMenu;

package/dist/lib/options/group-state.d.ts

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

package/dist/lib/options/group-state.js

@@ -0,0 +1,15 @@
+/** Select-all state of a group, computed only from its currently visible rows. */
+export function groupState(values) {
+    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, value) {
+    for (const option of options) {
+        option.value = value;
+    }
+}

package/dist/lib/options/layout.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 declare const WIDE_LAYOUT_QUERY = "(min-width: 48rem)";
+export declare function isWideLayout(): boolean;

package/dist/lib/options/layout.js

@@ -0,0 +1,9 @@
+/**
+ * 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() {
+    return window.matchMedia(WIDE_LAYOUT_QUERY).matches;
+}

package/dist/lib/options/map-option-defaults.d.ts

@@ -0,0 +1,56 @@
+import type { MonitorsPollutant } from "../monitors/types";
+import { type PollutantTargets } from "./pollutant-param";
+/**
+ * Defaults restored by "Reset Map Options". Keep in sync with the constructor defaults in each
+ * integration (monitors/EV display options, `enabled`, `clustered`) so a reset matches a fresh load.
+ */
+export declare const MAP_OPTION_DEFAULTS: {
+    readonly monitorTypes: {
+        readonly airnow: true;
+        readonly aqlite: true;
+        readonly aqview: true;
+        readonly bam1022: true;
+        readonly airgradient: true;
+        readonly purpleair: true;
+        readonly vozbox: true;
+        readonly inactive: false;
+        readonly inside: false;
+    };
+    readonly clustered: true;
+    readonly collocationSites: false;
+    readonly fireAndSmoke: true;
+    readonly evStations: false;
+    readonly evLevels: {
+        readonly lvl2: true;
+        readonly lvl3: true;
+    };
+    readonly wind: false;
+};
+type Toggle = {
+    enabled: boolean;
+};
+type Option = {
+    value: boolean;
+};
+export interface MapOptionTargets extends PollutantTargets {
+    integration: PollutantTargets["integration"] & {
+        clustered: boolean;
+        displayOptions: Record<string, Option>;
+    };
+    collocationSites: Toggle;
+    hmsFire: Toggle;
+    hmsSmoke: Toggle;
+    evStations: Toggle & {
+        clustered: boolean;
+        displayOptions: {
+            lvl2: Option;
+            lvl3: Option;
+        };
+    };
+    wind: Toggle;
+    mapStyle: {
+        reset(): void;
+    };
+}
+export declare function applyMapOptionDefaults(targets: MapOptionTargets, defaultPollutant: MonitorsPollutant | null): void;
+export {};

package/dist/lib/options/map-option-defaults.js

@@ -0,0 +1,47 @@
+import { applyPollutantSelection } from "./pollutant-param";
+/**
+ * Defaults restored by "Reset Map Options". Keep in sync with the constructor defaults in each
+ * integration (monitors/EV display options, `enabled`, `clustered`) so a reset matches a fresh load.
+ */
+export const MAP_OPTION_DEFAULTS = {
+    monitorTypes: {
+        airnow: true,
+        aqlite: true,
+        aqview: true,
+        bam1022: true,
+        airgradient: true,
+        purpleair: true,
+        vozbox: true,
+        inactive: false,
+        inside: false
+    },
+    clustered: true,
+    collocationSites: false,
+    fireAndSmoke: true,
+    evStations: false,
+    evLevels: { lvl2: true, lvl3: true },
+    wind: false
+};
+export function applyMapOptionDefaults(targets, defaultPollutant) {
+    if (defaultPollutant) {
+        applyPollutantSelection(defaultPollutant, targets);
+    }
+    else {
+        targets.integration.enabled = true;
+    }
+    for (const [key, value] of Object.entries(MAP_OPTION_DEFAULTS.monitorTypes)) {
+        const option = targets.integration.displayOptions[key];
+        if (option)
+            option.value = value;
+    }
+    targets.integration.clustered = MAP_OPTION_DEFAULTS.clustered;
+    targets.collocationSites.enabled = MAP_OPTION_DEFAULTS.collocationSites;
+    targets.hmsFire.enabled = MAP_OPTION_DEFAULTS.fireAndSmoke;
+    targets.hmsSmoke.enabled = MAP_OPTION_DEFAULTS.fireAndSmoke;
+    targets.evStations.enabled = MAP_OPTION_DEFAULTS.evStations;
+    targets.evStations.clustered = MAP_OPTION_DEFAULTS.clustered;
+    targets.evStations.displayOptions.lvl2.value = MAP_OPTION_DEFAULTS.evLevels.lvl2;
+    targets.evStations.displayOptions.lvl3.value = MAP_OPTION_DEFAULTS.evLevels.lvl3;
+    targets.wind.enabled = MAP_OPTION_DEFAULTS.wind;
+    targets.mapStyle.reset();
+}

package/dist/lib/options/menus/LayersMenu.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { FlameIcon, LayersIcon, EvChargerIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import CheckboxRow from "../rows/CheckboxRow.svelte";
+	import SubmenuRow from "../rows/SubmenuRow.svelte";
+	import MarkerIcon from "../rows/MarkerIcon.svelte";
+	import { hmsFireMapIntegration } from "../../hms/hms-fire-map-integration.svelte";
+	import { hmsSmokeMapIntegration } from "../../hms/hms-smoke-map-integration.svelte";
+	import { evStationsMapIntegration } from "../../ev-stations/ev-stations-map-integration.svelte";
+
+	const levels = $derived(evStationsMapIntegration.displayOptions);
+</script>
+
+<OptionsMenu id="layers" label="Layers">
+	{#snippet icon()}
+		<LayersIcon size={20} color="#708090" />
+	{/snippet}
+	<CheckboxRow
+		label="Fire & Smoke"
+		bind:checked={
+			() => hmsFireMapIntegration.enabled && hmsSmokeMapIntegration.enabled,
+			(value) => {
+				hmsFireMapIntegration.enabled = value;
+				hmsSmokeMapIntegration.enabled = value;
+			}
+		}
+	>
+		{#snippet icon()}
+			<FlameIcon size={18} color="#ff4500" />
+		{/snippet}
+	</CheckboxRow>
+	<SubmenuRow label="EV Chargers" bind:checked={evStationsMapIntegration.enabled}>
+		{#snippet icon()}
+			<EvChargerIcon size={18} color="#708090" />
+		{/snippet}
+		<CheckboxRow label="Level 2" bind:checked={evStationsMapIntegration.displayOptions.lvl2.value}>
+			{#snippet icon()}
+				<MarkerIcon icon={levels.lvl2.icon} class="w-5" />
+			{/snippet}
+		</CheckboxRow>
+		<CheckboxRow label="Level 3" bind:checked={evStationsMapIntegration.displayOptions.lvl3.value}>
+			{#snippet icon()}
+				<MarkerIcon icon={levels.lvl3.icon} class="w-5" />
+			{/snippet}
+		</CheckboxRow>
+	</SubmenuRow>
+</OptionsMenu>

package/dist/lib/options/menus/LayersMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const LayersMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type LayersMenu = ReturnType<typeof LayersMenu>;
+export default LayersMenu;

package/dist/lib/options/menus/MonitorsMenu.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { CrosshairIcon, RadioTowerIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import CheckboxRow from "../rows/CheckboxRow.svelte";
+	import GroupRow from "../rows/GroupRow.svelte";
+	import MarkerIcon from "../rows/MarkerIcon.svelte";
+	import { monitorsManager } from "../../monitors/monitors.svelte";
+	import { monitorsMapIntegration } from "../../monitors/monitors-map-integration.svelte";
+	import { collocationSitesMapIntegration } from "../../collocation-sites/collocations-map-integration.svelte";
+	import {
+		LOW_COST_TYPES,
+		REFERENCE_GRADE_TYPES,
+		typeSupportsPollutant,
+		type MonitorGroupType
+	} from "../../monitors/monitor-groups";
+
+	// Rows for types that don't report the current pollutant are hidden (meta-driven).
+	function visibleRows(types: ReadonlyArray<MonitorGroupType>) {
+		const displayOptions = monitorsMapIntegration.displayOptions;
+		return types
+			.filter((type) =>
+				typeSupportsPollutant(monitorsManager.meta, type, monitorsManager.pollutant)
+			)
+			.map((type) => ({
+				key: type,
+				label: displayOptions[type].label,
+				option: displayOptions[type]
+			}));
+	}
+
+	const referenceGrade = $derived(visibleRows(REFERENCE_GRADE_TYPES));
+	const lowCost = $derived(visibleRows(LOW_COST_TYPES));
+	const icons = monitorsMapIntegration.icons;
+</script>
+
+<OptionsMenu id="monitors" label="Monitors" disabled={!monitorsMapIntegration.enabled}>
+	{#snippet icon()}
+		<RadioTowerIcon size={20} color="#4682b4" />
+	{/snippet}
+	<GroupRow label="Reference-grade" options={referenceGrade}>
+		{#snippet icon()}
+			<MarkerIcon icon={icons.get("outside-display-triangle")} />
+		{/snippet}
+	</GroupRow>
+	<GroupRow label="Low-cost sensors" options={lowCost}>
+		{#snippet icon()}
+			<MarkerIcon icon={icons.get("outside-display-circle")} />
+		{/snippet}
+	</GroupRow>
+	<hr class="my-1 border-gray-200" />
+	<CheckboxRow label="Inactive" bind:checked={monitorsMapIntegration.displayOptions.inactive.value}>
+		{#snippet icon()}
+			<MarkerIcon icon={monitorsMapIntegration.displayOptions.inactive.icon} />
+		{/snippet}
+	</CheckboxRow>
+	<CheckboxRow label="Inside" bind:checked={monitorsMapIntegration.displayOptions.inside.value}>
+		{#snippet icon()}
+			<MarkerIcon icon={monitorsMapIntegration.displayOptions.inside.icon} />
+		{/snippet}
+	</CheckboxRow>
+	{#if monitorsManager.pollutant === "pm25"}
+		<CheckboxRow label="Collocation Sites" bind:checked={collocationSitesMapIntegration.enabled}>
+			{#snippet icon()}
+				<CrosshairIcon size={16} color="#4A5FC6" />
+			{/snippet}
+		</CheckboxRow>
+	{/if}
+</OptionsMenu>

package/dist/lib/options/menus/MonitorsMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const MonitorsMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type MonitorsMenu = ReturnType<typeof MonitorsMenu>;
+export default MonitorsMenu;

package/dist/lib/options/menus/OverlaysMenu.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { SquareStackIcon, WindIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import CheckboxRow from "../rows/CheckboxRow.svelte";
+	import { windMapIntegration } from "../../wind/wind.svelte";
+</script>
+
+<!-- Independent checkboxes: several overlays may be on at once. -->
+<OptionsMenu id="overlays" label="Overlays" alignRight>
+	{#snippet icon()}
+		<SquareStackIcon size={20} color="#708090" />
+	{/snippet}
+	<CheckboxRow label="Wind" bind:checked={windMapIntegration.enabled}>
+		{#snippet icon()}
+			<WindIcon size={18} color="#1e90ff" />
+		{/snippet}
+	</CheckboxRow>
+</OptionsMenu>

package/dist/lib/{MapLegend.svelte.d.ts → options/menus/OverlaysMenu.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const MapLegend: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const OverlaysMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type MapLegend = InstanceType<typeof MapLegend>;
-export default MapLegend;
+type OverlaysMenu = InstanceType<typeof OverlaysMenu>;
+export default OverlaysMenu;

package/dist/lib/options/menus/PollutantMenu.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { BanIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import RadioRow from "../rows/RadioRow.svelte";
+	import { useOptionsMenus } from "../options-state.svelte.js";
+	import { isWideLayout } from "../layout";
+	import {
+		applyPollutantSelection,
+		currentSelection,
+		type PollutantSelection
+	} from "../pollutant-param";
+	import { monitorsManager } from "../../monitors/monitors.svelte";
+	import { monitorsMapIntegration } from "../../monitors/monitors-map-integration.svelte";
+	import pm25Icon from "../../assets/icons/pm25/pm25-02-particle-field.svg";
+	import ozoneIcon from "../../assets/icons/ozone/ozone-08-sunrise-haze.svg";
+
+	interface PollutantOption {
+		value: PollutantSelection;
+		label: string;
+		unit?: string;
+		help?: string;
+		/** Lucide component, or an image URL for multi-color SVG icons */
+		icon: typeof BanIcon | string;
+		/** Tint for Lucide icons; image icons carry their own colors */
+		color?: string;
+	}
+
+	const options: Array<PollutantOption> = [
+		{
+			value: "pm25",
+			label: "PM2.5",
+			unit: "µg/m³",
+			help: "Fine particles from smoke, dust, and vehicle exhaust.",
+			icon: pm25Icon
+		},
+		{
+			value: "o3",
+			label: "Ozone",
+			unit: "ppb",
+			help: "Ground-level gas that forms in sunlight on hot days.",
+			icon: ozoneIcon
+		},
+		{ value: "none", label: "None", icon: BanIcon, color: "#778899" }
+	];
+
+	const menus = useOptionsMenus();
+	const selection = $derived(
+		currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled)
+	);
+	const selected = $derived(options.find((o) => o.value === selection) ?? options[0]);
+
+	function select(value: PollutantSelection) {
+		applyPollutantSelection(value, {
+			manager: monitorsManager,
+			integration: monitorsMapIntegration
+		});
+		// Toolbar dropdown closes on pick; the panel section stays open.
+		if (isWideLayout()) menus.close("pollutant");
+	}
+</script>
+
+{#snippet pollutantIcon(option: PollutantOption, size: number)}
+	{#if typeof option.icon === "string"}
+		<img src={option.icon} alt="" width={size} height={size} class="shrink-0" />
+	{:else}
+		<option.icon {size} color={option.color} />
+	{/if}
+{/snippet}
+
+<OptionsMenu id="pollutant" label={selected.label}>
+	{#snippet icon()}
+		{@render pollutantIcon(selected, 20)}
+	{/snippet}
+	{#each options as option, i (option.value)}
+		{#if i > 0}<hr class="my-1 border-gray-200" />{/if}
+		<RadioRow
+			name="monitor-map-pollutant"
+			label={option.label}
+			unit={option.unit}
+			help={option.help}
+			checked={selection === option.value}
+			onselect={() => select(option.value)}
+		>
+			{#snippet icon()}
+				{@render pollutantIcon(option, 18)}
+			{/snippet}
+		</RadioRow>
+	{/each}
+</OptionsMenu>

package/dist/lib/options/menus/PollutantMenu.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PollutantMenu: import("svelte").Component<Record<string, never>, {}, "">;
+type PollutantMenu = ReturnType<typeof PollutantMenu>;
+export default PollutantMenu;