@sjvair/monitor-map 3.6.2 → 4.0.0

package/src/lib/options/map-option-defaults.ts

@@ -0,0 +1,71 @@
+import type { MonitorsPollutant } from "$lib/monitors/types";
+import { applyPollutantSelection, 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 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
+} as const;
+
+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 function applyMapOptionDefaults(
+	targets: MapOptionTargets,
+	defaultPollutant: MonitorsPollutant | null
+): void {
+	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/src/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 "$lib/hms/hms-fire-map-integration.svelte";
+	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
+	import { evStationsMapIntegration } from "$lib/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/src/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 "$lib/monitors/monitors.svelte";
+	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
+	import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
+	import {
+		LOW_COST_TYPES,
+		REFERENCE_GRADE_TYPES,
+		typeSupportsPollutant,
+		type MonitorGroupType
+	} from "$lib/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/src/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 "$lib/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/src/lib/options/menus/PollutantMenu.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { BanIcon, HazeIcon, SunDimIcon } 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 "$lib/monitors/monitors.svelte";
+	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
+
+	interface PollutantOption {
+		value: PollutantSelection;
+		label: string;
+		unit?: string;
+		help?: string;
+		icon: typeof HazeIcon;
+		color: string;
+	}
+
+	const options: Array<PollutantOption> = [
+		{
+			value: "pm25",
+			label: "PM2.5",
+			unit: "µg/m³",
+			help: "Fine particles from smoke, dust, and vehicle exhaust.",
+			icon: HazeIcon,
+			color: "#bc8f8f"
+		},
+		{
+			value: "o3",
+			label: "Ozone",
+			unit: "ppb",
+			help: "Ground-level gas that forms in sunlight on hot days.",
+			icon: SunDimIcon,
+			color: "#daa520"
+		},
+		{ 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>
+
+<OptionsMenu id="pollutant" label={selected.label}>
+	{#snippet icon()}
+		<selected.icon size={20} color={selected.color} />
+	{/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()}
+				<option.icon size={18} color={option.color} />
+			{/snippet}
+		</RadioRow>
+	{/each}
+</OptionsMenu>

package/src/lib/options/menus/SettingsMenu.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { ContrastIcon, MapIcon, NetworkIcon, RotateCcwIcon, SettingsIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import CheckboxRow from "../rows/CheckboxRow.svelte";
+	import RadioRow from "../rows/RadioRow.svelte";
+	import { resetMapOptions } from "../reset-map-options";
+	import { MAP_STYLE_OPTIONS } from "$lib/map/utils";
+	import { mapStyleState } from "$lib/map/map-style-state.svelte.js";
+	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
+	import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte";
+</script>
+
+<OptionsMenu id="settings" label="Settings" iconOnly alignRight>
+	{#snippet icon()}
+		<SettingsIcon size={20} color="#696969" />
+	{/snippet}
+	<CheckboxRow
+		label="Marker Clusters"
+		bind:checked={
+			() => monitorsMapIntegration.clustered && evStationsMapIntegration.clustered,
+			(value) => {
+				monitorsMapIntegration.clustered = value;
+				evStationsMapIntegration.clustered = value;
+			}
+		}
+	>
+		{#snippet icon()}
+			<NetworkIcon size={18} color="#1e90ff" />
+		{/snippet}
+	</CheckboxRow>
+	<hr class="my-1 border-gray-200" />
+	<div class="px-3 py-1.5 text-sm">
+		<label for="monitor-map-basemap" class="mb-1 flex items-center gap-2 font-semibold">
+			<MapIcon size={18} color="#708090" />
+			Basemap
+		</label>
+		<select
+			id="monitor-map-basemap"
+			class="w-full rounded-md border border-gray-300 bg-white p-1.5"
+			bind:value={
+				() => mapStyleState.referenceStyle, (style) => mapStyleState.selectReferenceStyle(style)
+			}
+		>
+			{#each MAP_STYLE_OPTIONS as style (style.getId())}
+				<option value={style}>{style.getName()}</option>
+			{/each}
+		</select>
+	</div>
+	<hr class="my-1 border-gray-200" />
+	<p class="flex items-center gap-2 px-3 pt-1.5 text-sm font-semibold">
+		<ContrastIcon size={18} color="#708090" />
+		Theme
+	</p>
+	{#each mapStyleState.referenceStyle.getVariants() as variant (variant.getId())}
+		<RadioRow
+			name="monitor-map-theme"
+			label={variant.getName()}
+			checked={variant === mapStyleState.variant}
+			onselect={() => mapStyleState.selectVariant(variant)}
+		/>
+	{/each}
+	<hr class="my-1 border-gray-200" />
+	<div class="px-3 py-1.5">
+		<button
+			type="button"
+			class="flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-100"
+			onclick={resetMapOptions}
+		>
+			<RotateCcwIcon size={16} />
+			Reset Map Options
+		</button>
+	</div>
+</OptionsMenu>

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

@@ -0,0 +1,48 @@
+import { getContext, setContext } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+import { isWideLayout } from "./layout";
+
+const OPTIONS_MENUS_KEY = Symbol("monitor-map-options-menus");
+
+/** Which menus are opened by click: at most one on the toolbar, any number in the panel. */
+export class OptionsMenusState {
+	private open = new SvelteSet<string>();
+
+	isOpen(id: string): boolean {
+		return this.open.has(id);
+	}
+
+	toggle(id: string): void {
+		if (this.open.has(id)) {
+			this.open.delete(id);
+			return;
+		}
+		if (isWideLayout()) this.open.clear();
+		this.open.add(id);
+	}
+
+	/** Hovering another toolbar trigger closes any dropdown left open by a click. */
+	closeOthers(id: string): void {
+		for (const other of [...this.open]) {
+			if (other !== id) this.open.delete(other);
+		}
+	}
+
+	close(id: string): void {
+		this.open.delete(id);
+	}
+
+	closeAll(): void {
+		this.open.clear();
+	}
+}
+
+export function provideOptionsMenus(): OptionsMenusState {
+	return setContext(OPTIONS_MENUS_KEY, new OptionsMenusState());
+}
+
+export function useOptionsMenus(): OptionsMenusState {
+	const menus = getContext<OptionsMenusState | undefined>(OPTIONS_MENUS_KEY);
+	if (!menus) throw new Error("OptionsMenu must be rendered inside OptionsBar");
+	return menus;
+}

package/src/lib/options/pollutant-param.ts

@@ -0,0 +1,35 @@
+import type { MonitorsPollutant } from "$lib/monitors/types";
+
+/**
+ * What the Pollutant menu shows. "none" is not a monitorsManager.pollutant value — it means
+ * the monitors integration is disabled while the manager keeps its last real pollutant.
+ */
+export type PollutantSelection = MonitorsPollutant | "none";
+
+export interface PollutantTargets {
+	manager: { pollutant: MonitorsPollutant | null };
+	integration: { enabled: boolean };
+}
+
+export function parsePollutantParam(value: unknown): PollutantSelection | null {
+	return value === "pm25" || value === "o3" || value === "none" ? value : null;
+}
+
+export function currentSelection(
+	pollutant: MonitorsPollutant | null,
+	monitorsEnabled: boolean
+): PollutantSelection | null {
+	return monitorsEnabled ? pollutant : "none";
+}
+
+export function applyPollutantSelection(
+	selection: PollutantSelection,
+	targets: PollutantTargets
+): void {
+	if (selection === "none") {
+		targets.integration.enabled = false;
+		return;
+	}
+	targets.manager.pollutant = selection;
+	targets.integration.enabled = true;
+}

package/src/lib/options/reset-map-options.ts

@@ -0,0 +1,28 @@
+import { monitorsManager } from "$lib/monitors/monitors.svelte";
+import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
+import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
+import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
+import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
+import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte";
+import { windMapIntegration } from "$lib/wind/wind.svelte";
+import { mapStyleState } from "$lib/map/map-style-state.svelte.js";
+import { applyMapOptionDefaults } from "./map-option-defaults";
+
+/** "Reset Map Options": restores every map option to its default. */
+export function resetMapOptions(): void {
+	applyMapOptionDefaults(
+		{
+			manager: monitorsManager,
+			integration: monitorsMapIntegration,
+			collocationSites: collocationSitesMapIntegration,
+			hmsFire: hmsFireMapIntegration,
+			hmsSmoke: hmsSmokeMapIntegration,
+			evStations: evStationsMapIntegration,
+			wind: windMapIntegration,
+			// The basemap reset may start loading a new style; integrations skip the style while
+			// mapManager.styleLoading is set and the refresh on "style.load" re-applies them.
+			mapStyle: mapStyleState
+		},
+		monitorsManager.meta?.default_pollutant ?? null
+	);
+}

package/src/lib/options/rows/CheckboxRow.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import { ChevronDownIcon } from "@lucide/svelte";
+
+	interface Props {
+		label: string;
+		checked: boolean;
+		icon?: Snippet;
+		indeterminate?: boolean;
+		disabled?: boolean;
+		/** When set, shows a chevron reflecting whether this row's children are expanded */
+		expanded?: boolean;
+	}
+
+	let {
+		label,
+		checked = $bindable(),
+		icon,
+		indeterminate = false,
+		disabled = false,
+		expanded
+	}: Props = $props();
+
+	// indeterminate is a DOM property with no HTML attribute; re-runs when the prop changes.
+	const syncIndeterminate: Attachment<HTMLInputElement> = (input) => {
+		input.indeterminate = indeterminate;
+	};
+</script>
+
+<label
+	class="flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm whitespace-nowrap select-none hover:bg-gray-100 has-disabled:cursor-not-allowed has-disabled:opacity-50"
+>
+	<input
+		type="checkbox"
+		class="accent-brand size-4 shrink-0"
+		bind:checked
+		{disabled}
+		{@attach syncIndeterminate}
+	/>
+	{#if icon}
+		<span class="flex size-5 shrink-0 items-center justify-center">{@render icon()}</span>
+	{/if}
+	<span class="flex-1">{label}</span>
+	{#if expanded !== undefined}
+		<ChevronDownIcon
+			size={16}
+			class="ml-3 shrink-0 text-gray-500 transition-transform {expanded ? '' : '-rotate-90'}"
+		/>
+	{/if}
+</label>

package/src/lib/options/rows/GroupRow.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import CheckboxRow from "./CheckboxRow.svelte";
+	import SubmenuRow from "./SubmenuRow.svelte";
+	import { groupState, setGroup } from "../group-state";
+
+	interface GroupOption {
+		key: string;
+		label: string;
+		option: { value: boolean };
+	}
+
+	interface Props {
+		label: string;
+		/** Only the rows currently visible; hidden rows are never touched by select-all */
+		options: Array<GroupOption>;
+		icon?: Snippet;
+	}
+
+	let { label, options, icon }: Props = $props();
+
+	const status = $derived(groupState(options.map((child) => child.option.value)));
+</script>
+
+{#if status !== "empty"}
+	<SubmenuRow
+		{label}
+		{icon}
+		indeterminate={status === "indeterminate"}
+		bind:checked={
+			() => status === "checked",
+			(value) =>
+				setGroup(
+					options.map((child) => child.option),
+					value
+				)
+		}
+	>
+		{#each options as child (child.key)}
+			<CheckboxRow label={child.label} bind:checked={child.option.value} />
+		{/each}
+	</SubmenuRow>
+{/if}

package/src/lib/options/rows/MarkerIcon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { MapImageIcon } from "$lib/map/integrations/types";
+
+	let { icon, class: className = "w-4" }: { icon: MapImageIcon | undefined; class?: string } =
+		$props();
+</script>
+
+{#if icon}
+	<img src={icon.image.src} alt="" class={className} />
+{/if}

package/src/lib/options/rows/RadioRow.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		name: string;
+		label: string;
+		checked: boolean;
+		onselect: () => void;
+		unit?: string;
+		help?: string;
+		icon?: Snippet;
+	}
+
+	let { name, label, checked, onselect, unit, help, icon }: Props = $props();
+</script>
+
+<label
+	class="flex cursor-pointer flex-col gap-0.5 px-3 py-1.5 text-sm select-none hover:bg-gray-100"
+>
+	<span class="flex items-center gap-2 whitespace-nowrap">
+		<input type="radio" class="accent-brand size-4 shrink-0" {name} {checked} onchange={onselect} />
+		{#if icon}
+			<span class="flex size-5 shrink-0 items-center justify-center">{@render icon()}</span>
+		{/if}
+		<span>
+			{label}
+			{#if unit}<span class="text-xs text-gray-500">({unit})</span>{/if}
+		</span>
+	</span>
+	{#if help}
+		<span class="pl-6 text-xs whitespace-normal text-gray-500">{help}</span>
+	{/if}
+</label>

package/src/lib/options/rows/SubmenuRow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import CheckboxRow from "./CheckboxRow.svelte";
+
+	interface Props {
+		label: string;
+		checked: boolean;
+		indeterminate?: boolean;
+		icon?: Snippet;
+		children: Snippet;
+	}
+
+	let { label, checked = $bindable(), indeterminate = false, icon, children }: Props = $props();
+
+	// Children show only while the parent is (partly) on, as in the demo.
+	const expanded = $derived(checked || indeterminate);
+</script>
+
+<CheckboxRow {label} {icon} {indeterminate} {expanded} bind:checked />
+{#if expanded}
+	<div class="ml-5 border-l border-gray-200">{@render children()}</div>
+{/if}

package/src/lib/search/Search.svelte

@@ -111,19 +111,19 @@
 
 <div
 	class={[
-		"flex flex-col overflow-hidden bg-white shadow-md transition-all duration-300 select-none",
-		collapsed ? "h-12 w-12 rounded-full" : "w-90 rounded-3xl",
-		!collapsed && results.length ? "max-h-90" : "max-h-12"
+		"flex flex-col overflow-hidden bg-white shadow transition-all duration-300 select-none",
+		collapsed ? "h-10 w-10 rounded-md" : "w-[min(22.5rem,calc(100vw-5.5rem))] rounded-lg",
+		!collapsed && results.length ? "max-h-90" : "max-h-10"
 	]}
 	use:clickOutside
 >
-	<div class="flex h-12 w-full shrink-0 items-center">
+	<div class="flex h-10 w-full shrink-0 items-center">
 		<button
-			class="bg-brand flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-4 border-white"
+			class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md text-gray-700"
 			onclick={openSearch}
 			aria-label="Open search"
 		>
-			<SearchIcon size="24" color="#FFFFFF" />
+			<SearchIcon size="20" />
 		</button>
 		<div class="flex h-full w-full items-center overflow-hidden">
 			<input

package/dist/lib/MapLegend.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import MonitorMarkersLegend from "./monitors/components/MonitorMarkersLegend.svelte";
-	import HMSFireLegend from "./hms/components/HMSFireLegend.svelte";
-</script>
-
-<!--
-<div class="z-10 absolute bottom-6 left-6 w-1/2 lg:w-1/5">
-	<MonitorMarkersLegend />
-	<HMSFireLegend />
-</div>
--->
-<div class="pointer-events-none flex flex-col gap-1 pb-4 pl-4">
-	<HMSFireLegend />
-	<MonitorMarkersLegend />
-</div>