@sjvair/monitor-map 3.6.2 → 4.0.0

package/dist/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 "../../map/utils";
+	import { mapStyleState } from "../../map/map-style-state.svelte.js";
+	import { monitorsMapIntegration } from "../../monitors/monitors-map-integration.svelte";
+	import { evStationsMapIntegration } from "../../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/dist/lib/{hms/components/HMSFireLegend.svelte.d.ts → options/menus/SettingsMenu.svelte.d.ts}

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

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

@@ -0,0 +1,12 @@
+/** Which menus are opened by click: at most one on the toolbar, any number in the panel. */
+export declare class OptionsMenusState {
+    private open;
+    isOpen(id: string): boolean;
+    toggle(id: string): void;
+    /** Hovering another toolbar trigger closes any dropdown left open by a click. */
+    closeOthers(id: string): void;
+    close(id: string): void;
+    closeAll(): void;
+}
+export declare function provideOptionsMenus(): OptionsMenusState;
+export declare function useOptionsMenus(): OptionsMenusState;

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

@@ -0,0 +1,42 @@
+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 {
+    open = new SvelteSet();
+    isOpen(id) {
+        return this.open.has(id);
+    }
+    toggle(id) {
+        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) {
+        for (const other of [...this.open]) {
+            if (other !== id)
+                this.open.delete(other);
+        }
+    }
+    close(id) {
+        this.open.delete(id);
+    }
+    closeAll() {
+        this.open.clear();
+    }
+}
+export function provideOptionsMenus() {
+    return setContext(OPTIONS_MENUS_KEY, new OptionsMenusState());
+}
+export function useOptionsMenus() {
+    const menus = getContext(OPTIONS_MENUS_KEY);
+    if (!menus)
+        throw new Error("OptionsMenu must be rendered inside OptionsBar");
+    return menus;
+}

package/dist/lib/options/pollutant-param.d.ts

@@ -0,0 +1,17 @@
+import type { MonitorsPollutant } from "../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 declare function parsePollutantParam(value: unknown): PollutantSelection | null;
+export declare function currentSelection(pollutant: MonitorsPollutant | null, monitorsEnabled: boolean): PollutantSelection | null;
+export declare function applyPollutantSelection(selection: PollutantSelection, targets: PollutantTargets): void;

package/dist/lib/options/pollutant-param.js

@@ -0,0 +1,14 @@
+export function parsePollutantParam(value) {
+    return value === "pm25" || value === "o3" || value === "none" ? value : null;
+}
+export function currentSelection(pollutant, monitorsEnabled) {
+    return monitorsEnabled ? pollutant : "none";
+}
+export function applyPollutantSelection(selection, targets) {
+    if (selection === "none") {
+        targets.integration.enabled = false;
+        return;
+    }
+    targets.manager.pollutant = selection;
+    targets.integration.enabled = true;
+}

package/dist/lib/options/reset-map-options.d.ts

@@ -0,0 +1,2 @@
+/** "Reset Map Options": restores every map option to its default. */
+export declare function resetMapOptions(): void;

package/dist/lib/options/reset-map-options.js

@@ -0,0 +1,24 @@
+import { monitorsManager } from "../monitors/monitors.svelte";
+import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";
+import { collocationSitesMapIntegration } from "../collocation-sites/collocations-map-integration.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";
+import { windMapIntegration } from "../wind/wind.svelte";
+import { mapStyleState } from "../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() {
+    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/dist/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/dist/lib/options/rows/CheckboxRow.svelte.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { MapImageIcon } from "../../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/dist/lib/options/rows/MarkerIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MapImageIcon } from "../../map/integrations/types";
+type $$ComponentProps = {
+    icon: MapImageIcon | undefined;
+    class?: string;
+};
+declare const MarkerIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkerIcon = ReturnType<typeof MarkerIcon>;
+export default MarkerIcon;

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+interface Props {
+    name: string;
+    label: string;
+    checked: boolean;
+    onselect: () => void;
+    unit?: string;
+    help?: string;
+    icon?: Snippet;
+}
+declare const RadioRow: import("svelte").Component<Props, {}, "">;
+type RadioRow = ReturnType<typeof RadioRow>;
+export default RadioRow;

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label: string;
+    checked: boolean;
+    indeterminate?: boolean;
+    icon?: Snippet;
+    children: Snippet;
+}
+declare const SubmenuRow: import("svelte").Component<Props, {}, "checked">;
+type SubmenuRow = ReturnType<typeof SubmenuRow>;
+export default SubmenuRow;

package/dist/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/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.6.2",
+	"version": "4.0.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SJVAir/monitor-map"
@@ -15,7 +15,8 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
+		"lint": "prettier --check . && eslint .",
+		"test": "vitest run"
 	},
 	"type": "module",
 	"svelte": "./dist/lib/index.js",
@@ -65,13 +66,14 @@
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.70.0",
-		"vite": "^8.3.0"
+		"vite": "^8.3.0",
+		"vitest": "^5.0.3"
 	},
 	"dependencies": {
 		"@lucide/svelte": "^1.46.0",
 		"@maptiler/sdk": "^4.1.0",
 		"@maptiler/weather": "^4.0.1",
-		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^4.4.0",
+		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^4.5.0",
 		"@tstk/builtin-extensions": "npm:@jsr/tstk__builtin-extensions@^1.0.8",
 		"@tstk/utils": "npm:@jsr/tstk__utils@^1.1.2",
 		"@turf/area": "^7.4.0",