@sjvair/monitor-map 4.2.0 → 5.0.0-beta.0

package/dist/lib/abort.d.ts

@@ -0,0 +1,16 @@
+export type SignalOptions = {
+    signal?: AbortSignal;
+};
+/**
+ * A signal that aborts as soon as any input does, with that input's reason. Already aborted if
+ * any input is. Undefined inputs are ignored. Call `dispose()` to drop the listeners.
+ */
+export declare function anySignal(...signals: Array<AbortSignal | undefined>): {
+    signal: AbortSignal;
+    dispose(): void;
+};
+/**
+ * Settles like `promise`, unless `signal` aborts first, in which case it rejects with
+ * `signal.reason`. The inner promise's later outcome is swallowed.
+ */
+export declare function untilAborted<T>(promise: Promise<T>, signal: AbortSignal | undefined): Promise<T>;

package/dist/lib/abort.js

@@ -0,0 +1,51 @@
+/**
+ * A signal that aborts as soon as any input does, with that input's reason. Already aborted if
+ * any input is. Undefined inputs are ignored. Call `dispose()` to drop the listeners.
+ */
+export function anySignal(...signals) {
+    const controller = new AbortController();
+    const cleanups = [];
+    const dispose = () => {
+        for (const cleanup of cleanups.splice(0))
+            cleanup();
+    };
+    for (const input of signals) {
+        if (!input)
+            continue;
+        if (input.aborted) {
+            controller.abort(input.reason);
+            dispose();
+            break;
+        }
+        const onAbort = () => {
+            controller.abort(input.reason);
+            dispose();
+        };
+        input.addEventListener("abort", onAbort, { once: true });
+        cleanups.push(() => input.removeEventListener("abort", onAbort));
+    }
+    return { signal: controller.signal, dispose };
+}
+/**
+ * Settles like `promise`, unless `signal` aborts first, in which case it rejects with
+ * `signal.reason`. The inner promise's later outcome is swallowed.
+ */
+export function untilAborted(promise, signal) {
+    if (!signal)
+        return promise;
+    if (signal.aborted) {
+        promise.catch(() => { });
+        return Promise.reject(signal.reason);
+    }
+    return new Promise((resolve, reject) => {
+        const onAbort = () => reject(signal.reason);
+        signal.addEventListener("abort", onAbort, { once: true });
+        promise.then((value) => {
+            signal.removeEventListener("abort", onAbort);
+            resolve(value);
+        }, (error) => {
+            signal.removeEventListener("abort", onAbort);
+            reject(error);
+        });
+    });
+}

package/dist/lib/components/DataBox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { darken, readableColor } from "color2k";
+	import { NEUTRAL_LEVEL_COLOR } from "../levels";
 
 	interface DataBoxProps {
 		color: string;
@@ -8,7 +9,9 @@
 		value: string;
 	}
 
-	const { color, header, subheading, value }: DataBoxProps = $props();
+	const { color: givenColor, header, subheading, value }: DataBoxProps = $props();
+	// An empty color (a level without one) would make color2k throw.
+	const color = $derived(givenColor || NEUTRAL_LEVEL_COLOR);
 	const borderColor = $derived(darken(color, 0.1));
 	const textColor = $derived(readableColor(color));
 </script>

package/dist/lib/components/ui/range-calendar/range-calendar.svelte.d.ts

@@ -16,6 +16,6 @@ type $$ComponentProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps>
         outsideMonth: boolean;
     }]>;
 };
-declare const RangeCalendar: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "placeholder">;
+declare const RangeCalendar: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "placeholder">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/lib/config.svelte.d.ts

@@ -0,0 +1,7 @@
+export interface MonitorMapConfig {
+    maptilerKey: string;
+    nrelKey: string;
+}
+/** Hosts call this once at startup, before the map or the EV layer is used. */
+export declare function configureMonitorMap(config: MonitorMapConfig): void;
+export declare function monitorMapConfig(): MonitorMapConfig;

package/dist/lib/config.svelte.js

@@ -0,0 +1,10 @@
+let current = null;
+/** Hosts call this once at startup, before the map or the EV layer is used. */
+export function configureMonitorMap(config) {
+    current = { ...config };
+}
+export function monitorMapConfig() {
+    if (!current)
+        throw new Error("monitor-map: call configureMonitorMap() first");
+    return current;
+}

package/dist/lib/core.d.ts

@@ -1,12 +1,12 @@
 /**
  * Light entry (`@sjvair/monitor-map/core`): what a host app needs at startup, without the map.
  *
- * Nothing imported here may reach @maptiler/sdk, @maptiler/weather or uplot at runtime;
+ * Nothing imported here may reach @maptiler/sdk, maplibre, @maptiler/weather or uplot at runtime;
  * `npm run test:bundle` enforces it. Everything is re-exported from the same modules the
  * main entry uses, so `monitorsManager` and the router context stay single instances
  * whichever entries a host mixes.
  */
+export { configureMonitorMap, monitorMapConfig, type MonitorMapConfig } from "./config.svelte.js";
 export { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter, type MonitorMapRouterApi } from "./router-context";
 export { monitorsManager } from "./monitors/monitors.svelte.js";
 export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte.js";
-export type { MonitorsDataSource, MonitorsPollutant } from "./monitors/types";

package/dist/lib/core.js

@@ -1,10 +1,11 @@
 /**
  * Light entry (`@sjvair/monitor-map/core`): what a host app needs at startup, without the map.
  *
- * Nothing imported here may reach @maptiler/sdk, @maptiler/weather or uplot at runtime;
+ * Nothing imported here may reach @maptiler/sdk, maplibre, @maptiler/weather or uplot at runtime;
  * `npm run test:bundle` enforces it. Everything is re-exported from the same modules the
  * main entry uses, so `monitorsManager` and the router context stay single instances
  * whichever entries a host mixes.
  */
+export { configureMonitorMap, monitorMapConfig } from "./config.svelte.js";
 export { ROUTER_KEY, provideMonitorMapRouter, useMonitorMapRouter } from "./router-context";
 export { monitorsManager } from "./monitors/monitors.svelte.js";

package/dist/lib/data-chart/DataChart.svelte

@@ -7,14 +7,20 @@
 	import uPlot from "uplot";
 	import "uplot/dist/uPlot.min.css";
 	import { getMonitorEntriesCSVUrl } from "@sjvair/sdk/monitors";
-	import { format, parseISO } from "date-fns";
 	import { RangeCalendar } from "../components/ui/range-calendar";
 	import type { PanelPollutant } from "../monitors/panel-pollutant";
 	import { monitorsManager } from "../monitors/monitors.svelte";
 	import { DataChartManager } from "./data-chart.svelte";
-	import { createDateRange, extendToNow, includesToday } from "./DateRange";
+	import {
+		createDateRange,
+		dateRangeLabel as formatDateRange,
+		extendToNow,
+		fileDay,
+		includesToday
+	} from "./DateRange";
 	import { fetchChartData, type ChartMonitor } from "./requests";
 	import { getChartConfig } from "./chart-utils";
+	import { PACIFIC_TIME_ZONE } from "./pacific-time";
 	import { levelColors } from "./level-colors";
 
 	interface Props {
@@ -38,11 +44,7 @@
 	let dateRangeContainer: HTMLElement | undefined = $state();
 	let triggerRebuild: (() => void) | undefined = $state();
 
-	const dateRangeLabel = $derived(
-		format(parseISO(chartManager.dateRange.start), "MMM d") +
-			" – " +
-			format(parseISO(chartManager.dateRange.end), "MMM d, yyyy")
-	);
+	const dateRangeLabel = $derived(formatDateRange(chartManager.dateRange));
 
 	// A request with no entries still resolves to [[], []], so test the x axis, not the tuple.
 	const noChartData = $derived(!chartManager.chartData[0]?.length);
@@ -53,17 +55,18 @@
 				? "No Data Available For Selected Date Range"
 				: ""
 	);
-	const pollutantLabel = $derived(pollutant === "pm25" ? "PM 2.5" : "Ozone");
-	// Level definitions are shared metadata, not the map's current selection.
-	const colors = $derived(
-		levelColors(monitorsManager.meta?.entryType(pollutant).asIter.levels ?? [])
-	);
-
-	// Reload for another monitor or pollutant, not for a new object describing the same one.
-	// Both go through a $derived: the owner recomputes what it passes on every refresh, and a
-	// prop read directly would re-run this effect even when the value is unchanged.
+	// Props are read through a $derived: the owner recomputes what it passes on every refresh,
+	// and a prop read directly would re-run an effect even when the value is unchanged.
 	const monitorId = $derived(monitor.id);
+	const monitorType = $derived(monitor.type);
 	const chartPollutant = $derived(pollutant);
+
+	// Level definitions and labels are shared metadata, not the map's current selection.
+	const entryType = $derived(monitorsManager.meta?.entryType(chartPollutant));
+	const pollutantLabel = $derived(entryType?.label ?? "");
+	const colors = $derived(levelColors(entryType?.scale ?? null));
+
+	// Reload for another monitor or pollutant, not for a new object describing the same one.
 	$effect(() => {
 		void monitorId;
 		void chartPollutant;
@@ -101,9 +104,15 @@
 		return () => document.removeEventListener("click", handleDocClick);
 	});
 
+	// Rebuild for new data or anything the chart draws with, and nothing else: `rebuild` runs
+	// untracked, so a refreshed copy of the same monitor does not recreate the chart.
 	$effect(() => {
-		void chartManager.chartData; // re-run whenever chart data updates
-		triggerRebuild?.();
+		void chartManager.chartData;
+		void monitorType;
+		void colors;
+		void pollutantLabel;
+		const rebuild = triggerRebuild;
+		untrack(() => rebuild?.());
 	});
 
 	const chartAttachment: Attachment<HTMLElement> = (el) => {
@@ -121,7 +130,9 @@
 			instance?.destroy?.();
 			el.innerHTML = "";
 			const maxDiff = Math.max(...flatData) - Math.min(...flatData);
-			const opts = getChartConfig(monitor.type, maxDiff, width, height, colors, pollutantLabel);
+			const opts = getChartConfig(monitorType, maxDiff, width, height, colors, pollutantLabel);
+			// Axis ticks in Pacific time, like the tooltip.
+			opts.tzDate = (ts) => uPlot.tzDate(new Date(ts * 1000), PACIFIC_TIME_ZONE);
 			instance = new uPlot(opts, chartManager.chartData, el);
 		};
 
@@ -143,17 +154,36 @@
 	};
 
 	let chartRequest = 0;
+	let chartController: AbortController | undefined;
+
+	// A closed panel cancels its in-flight fetch.
+	$effect(() => () => chartController?.abort());
 
 	// `silent` keeps the current chart on screen while a timed refresh loads.
 	async function loadChartData({ silent = false } = {}) {
 		const request = ++chartRequest;
-		if (!silent) chartManager.loading = true;
-		const data = await fetchChartData(monitor, chartManager.dateRange, pollutant);
+		chartController?.abort();
+		const controller = (chartController = new AbortController());
+		// A refresh that supersedes a load still in flight takes over its loading flag: the
+		// superseded load will never clear it.
+		const ownsLoading = !silent || chartManager.loading;
+		chartManager.loading = ownsLoading;
+		let data: Awaited<ReturnType<typeof fetchChartData>>;
+		try {
+			data = await fetchChartData(monitor, chartManager.dateRange, pollutant, {
+				signal: controller.signal
+			});
+		} catch (err) {
+			// Superseded or closed: the newer call owns `loading` and the chart, so leave both.
+			if (controller.signal.aborted || request !== chartRequest) return;
+			console.error("Failed to load chart data: ", err);
+			data = [];
+		}
 		// A newer request (another range, monitor, pollutant or refresh) owns the chart now.
 		if (request !== chartRequest) return;
 		// A failed request resolves to [] (an empty range is [[], []]); a background refresh
 		// that failed keeps the chart already on screen.
-		if (silent && data.length === 0) return;
+		if (!ownsLoading && data.length === 0) return;
 		chartManager.chartData = data;
 		chartManager.loading = false;
 	}
@@ -186,8 +216,8 @@
 		if (!canvas) return;
 		const link = document.createElement("a");
 		const monitorName = monitor.name.split(" ").join("-");
-		const start = format(parseISO(chartManager.dateRange.start), "dd.MMM.yyyy");
-		const end = format(parseISO(chartManager.dateRange.end), "dd.MMM.yyyy");
+		const start = fileDay(chartManager.dateRange.start);
+		const end = fileDay(chartManager.dateRange.end);
 		link.download = `${monitorName}_${start}-${end}.png`;
 		link.href = canvas.toDataURL();
 		link.click();

package/dist/lib/data-chart/DateRange.d.ts

@@ -1,10 +1,19 @@
 import type { DateValue } from "@internationalized/date";
+/** ISO instants. Days are Pacific days, whatever zone the device is in. */
 export type DateRange = {
     start: string;
     end: string;
 };
-export declare function createDateRange(start?: DateValue, end?: DateValue): DateRange;
-/** Whether the range ends on the current calendar day, i.e. it can still gain entries. */
-export declare function includesToday(range: DateRange): boolean;
+/**
+ * The chart's range: with no days picked, the start of yesterday through now; otherwise the
+ * whole picked days, ending now when the end day is today.
+ */
+export declare function createDateRange(start?: DateValue, end?: DateValue, now?: Date): DateRange;
+/** Whether the range ends on the current Pacific day, i.e. it can still gain entries. */
+export declare function includesToday(range: DateRange, now?: Date): boolean;
 /** The same range with its end moved to the present. */
-export declare function extendToNow(range: DateRange): DateRange;
+export declare function extendToNow(range: DateRange, now?: Date): DateRange;
+/** The range's Pacific days for display, e.g. "Nov 3 – Nov 4, 2026". */
+export declare function dateRangeLabel(range: DateRange): string;
+/** An instant's Pacific day for a file name, e.g. "04.Nov.2026". */
+export declare function fileDay(iso: string): string;

package/dist/lib/data-chart/DateRange.js

@@ -1,24 +1,60 @@
-import { subDays, startOfDay, endOfDay, isToday, parseISO } from "date-fns";
-export function createDateRange(start, end) {
+import { addPacificDays, endOfPacificDay, startOfPacificDay } from "@sjvair/sdk/datetime/pacific";
+/** An instant on the given calendar day in Pacific time (noon UTC is 4–5 AM Pacific). */
+function onPacificDay(day) {
+    return new Date(Date.UTC(day.year, day.month - 1, day.day, 12));
+}
+function samePacificDay(a, b) {
+    return startOfPacificDay(a).getTime() === startOfPacificDay(b).getTime();
+}
+/**
+ * The chart's range: with no days picked, the start of yesterday through now; otherwise the
+ * whole picked days, ending now when the end day is today.
+ */
+export function createDateRange(start, end, now = new Date()) {
     if (!start || !end) {
         return {
-            start: startOfDay(subDays(new Date(), 1)).toISOString(),
-            end: new Date().toISOString()
+            start: startOfPacificDay(addPacificDays(now, -1)).toISOString(),
+            end: now.toISOString()
         };
     }
-    const startDate = startOfDay(new Date(start.year, start.month - 1, start.day));
-    let endDate = new Date(end.year, end.month - 1, end.day);
-    endDate = isToday(endDate) ? new Date() : endOfDay(endDate);
+    const endDay = onPacificDay(end);
     return {
-        start: startDate.toISOString(),
-        end: endDate.toISOString()
+        start: startOfPacificDay(onPacificDay(start)).toISOString(),
+        end: (samePacificDay(endDay, now) ? now : endOfPacificDay(endDay)).toISOString()
     };
 }
-/** Whether the range ends on the current calendar day, i.e. it can still gain entries. */
-export function includesToday(range) {
-    return isToday(parseISO(range.end));
+/** Whether the range ends on the current Pacific day, i.e. it can still gain entries. */
+export function includesToday(range, now = new Date()) {
+    return samePacificDay(new Date(range.end), now);
 }
 /** The same range with its end moved to the present. */
-export function extendToNow(range) {
-    return { start: range.start, end: new Date().toISOString() };
+export function extendToNow(range, now = new Date()) {
+    return { start: range.start, end: now.toISOString() };
+}
+const PACIFIC = "America/Los_Angeles";
+const shortDay = new Intl.DateTimeFormat("en-US", {
+    timeZone: PACIFIC,
+    month: "short",
+    day: "numeric"
+});
+const shortDayYear = new Intl.DateTimeFormat("en-US", {
+    timeZone: PACIFIC,
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+});
+const fileDayParts = new Intl.DateTimeFormat("en-US", {
+    timeZone: PACIFIC,
+    day: "2-digit",
+    month: "short",
+    year: "numeric"
+});
+/** The range's Pacific days for display, e.g. "Nov 3 – Nov 4, 2026". */
+export function dateRangeLabel(range) {
+    return `${shortDay.format(new Date(range.start))} – ${shortDayYear.format(new Date(range.end))}`;
+}
+/** An instant's Pacific day for a file name, e.g. "04.Nov.2026". */
+export function fileDay(iso) {
+    const parts = Object.fromEntries(fileDayParts.formatToParts(new Date(iso)).map((part) => [part.type, part.value]));
+    return `${parts.day}.${parts.month}.${parts.year}`;
 }

package/dist/lib/data-chart/chart-utils.js

@@ -1,5 +1,5 @@
 import { tooltipsPlugin, uPlotCursorConfig } from "./tooltip";
-import { fromUnixTime, getUnixTime, isToday, isAfter } from "date-fns";
+import { chartRangeMax } from "./pacific-time";
 const PM25_AVG_60_STROKE = "3572b0";
 const baseXSeriesConfig = {};
 const baseYSeriesConfig = {
@@ -46,12 +46,7 @@ export function getChartConfig(sourceName, maxDiff, width, height, colors, label
         },
         scales: {
             x: {
-                range: (_, min, max) => {
-                    const maxDate = fromUnixTime(max);
-                    const now = new Date();
-                    max = isToday(maxDate) && isAfter(now, maxDate) ? getUnixTime(now) : max;
-                    return [min, max];
-                }
+                range: (_, min, max) => [min, chartRangeMax(max)]
             },
             y: {
                 range: {
@@ -96,6 +91,9 @@ function getSeriesConfigs(monitorType, stops) {
         case "airgradient":
         case "purpleair":
             return [baseXSeriesConfig, pm25SeriesConfig(stops)];
+        // Types without a real-time series of their own (CIMIS weather stations, from SDK 5.0).
+        default:
+            return [baseXSeriesConfig, singleSeriesConfig];
     }
 }
 function autograd(u, fallback, stops) {

package/dist/lib/data-chart/level-colors.d.ts

@@ -1,6 +1,5 @@
+import type { Scale } from "@sjvair/map-sdk/data";
 /** Color stops for a chart: each level's lower bound and its hex color without the `#`. */
 export type LevelColors = Array<[number, string]>;
-export declare function levelColors(levels: ReadonlyArray<{
-    range: readonly [number, ...unknown[]] | readonly number[];
-    color: string;
-}>): LevelColors;
+/** The chart's color stops from a range scale; a level with no lower bound or color is skipped. */
+export declare function levelColors(scale: Scale | null): LevelColors;

package/dist/lib/data-chart/level-colors.js

@@ -1,5 +1,8 @@
-// `range` is loose on purpose: the SDK types it as a tuple with an open tail, and only its
-// first member (the level's lower bound) is read.
-export function levelColors(levels) {
-    return levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]);
+/** The chart's color stops from a range scale; a level with no lower bound or color is skipped. */
+export function levelColors(scale) {
+    return (scale?.levels ?? []).flatMap((level) => {
+        if (level.min === null || !level.color)
+            return [];
+        return [[level.min, level.color.replace(/^#/, "")]];
+    });
 }

package/dist/lib/data-chart/pacific-time.d.ts

@@ -0,0 +1,9 @@
+/** The chart's zone: times and days are Pacific, whatever zone the device is in. */
+export declare const PACIFIC_TIME_ZONE = "America/Los_Angeles";
+/**
+ * The x-axis end: `now` when the data ends earlier on the current Pacific day (so the axis
+ * reaches the present), else the data's end. Both are Unix seconds.
+ */
+export declare function chartRangeMax(max: number, now?: Date): number;
+/** A Unix time as Pacific wall-clock time, e.g. "Nov 4, 2026 8:05 PM". */
+export declare function formatPacificTime(unixSeconds: number): string;

package/dist/lib/data-chart/pacific-time.js

@@ -0,0 +1,25 @@
+import { startOfPacificDay } from "@sjvair/sdk/datetime/pacific";
+/** The chart's zone: times and days are Pacific, whatever zone the device is in. */
+export const PACIFIC_TIME_ZONE = "America/Los_Angeles";
+/**
+ * The x-axis end: `now` when the data ends earlier on the current Pacific day (so the axis
+ * reaches the present), else the data's end. Both are Unix seconds.
+ */
+export function chartRangeMax(max, now = new Date()) {
+    const end = new Date(max * 1000);
+    const today = startOfPacificDay(end).getTime() === startOfPacificDay(now).getTime();
+    return today && now > end ? Math.floor(now.getTime() / 1000) : max;
+}
+const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: PACIFIC_TIME_ZONE,
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+});
+/** A Unix time as Pacific wall-clock time, e.g. "Nov 4, 2026 8:05 PM". */
+export function formatPacificTime(unixSeconds) {
+    const part = Object.fromEntries(formatter.formatToParts(new Date(unixSeconds * 1000)).map((p) => [p.type, p.value]));
+    return `${part.month} ${part.day}, ${part.year} ${part.hour}:${part.minute} ${part.dayPeriod}`;
+}

package/dist/lib/data-chart/requests.d.ts

@@ -1,6 +1,7 @@
 import { type MonitorDetails } from "@sjvair/sdk";
 import type { PanelPollutant } from "../monitors/panel-pollutant";
 import type { DateRange } from "./DateRange";
+import type { SignalOptions } from "../abort";
 /** The monitor fields the chart reads. */
 export type ChartMonitor = Pick<MonitorDetails, "id" | "name" | "type" | "data_source">;
-export declare function fetchChartData(m: ChartMonitor, d: DateRange, entryType: PanelPollutant): Promise<uPlot.AlignedData>;
+export declare function fetchChartData(m: ChartMonitor, d: DateRange, entryType: PanelPollutant, options?: SignalOptions): Promise<uPlot.AlignedData>;

package/dist/lib/data-chart/requests.js

@@ -1,12 +1,12 @@
 import { getMonitorEntries } from "@sjvair/sdk";
 import { getUnixTime, parseISO, differenceInMinutes, addMinutes } from "date-fns";
-export async function fetchChartData(m, d, entryType) {
+export async function fetchChartData(m, d, entryType, options = {}) {
     return await getMonitorEntries({
         entryType,
         monitorId: m.id,
         timestampGte: d.start,
         timestampLte: d.end
-    })
+    }, { signal: options.signal })
         .then((entries) => {
         const xAxisData = [];
         const updateDuration = m.data_source.name === "PurpleAir" ? 2 : 60;
@@ -26,6 +26,9 @@ export async function fetchChartData(m, d, entryType) {
         return [xAxisData.map((d) => getUnixTime(d)), yAxisRecord];
     })
         .catch((err) => {
+        // A cancelled request is not a failure: let the caller see the reason, log nothing.
+        if (options.signal?.aborted)
+            throw options.signal.reason;
         console.error("Failed to load chart data: ", err);
         return [];
     });

package/dist/lib/data-chart/tooltip.js

@@ -1,4 +1,4 @@
-import { format, fromUnixTime } from "date-fns";
+import { formatPacificTime } from "./pacific-time";
 let cursLeft = -100;
 let cursTop = -100;
 export const uPlotCursorConfig = {
@@ -124,7 +124,7 @@ export function tooltipsPlugin() {
                     tt.style.display = "block";
                     let label = u.series[i].label;
                     label = label?.substring(label.indexOf("(") + 1, label.indexOf(")")) || label;
-                    ttHeader.textContent = format(fromUnixTime(xVal), "MMM d, yyyy h:mm a");
+                    ttHeader.textContent = formatPacificTime(xVal);
                     tt.textContent = `${label}: ${yVal}`;
                 }
             }

package/{src/lib/ev-stations/components/EvStationTooltip.svelte → dist/lib/ev-stations/EvPopup.svelte}

@@ -1,18 +1,19 @@
 <script lang="ts">
 	import CreditCard from "@lucide/svelte/icons/credit-card";
 	import Zap from "@lucide/svelte/icons/zap";
-	import type { EvStationMapFeature } from "../types";
+	import type { EvStation } from "./types";
 
 	interface Props {
-		feature: EvStationMapFeature;
+		station: EvStation;
 	}
 
-	const { feature }: Props = $props();
+	const { station }: Props = $props();
 
+	// 4.x's station popup, from the station NREL returned (codes already turned into labels).
 	const computed = $derived.by(() => {
-		const p = feature.properties;
+		const p = station;
 
-		const connectors: string[] = JSON.parse(p.ev_connector_types || "[]");
+		const connectors: string[] = (p.ev_connector_types ?? []).filter(Boolean);
 
 		const cards: string[] = p.cards_accepted
 			? p.cards_accepted.split(",").map((c) => c.trim())

package/dist/lib/ev-stations/EvPopup.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { EvStation } from "./types";
+interface Props {
+    station: EvStation;
+}
+declare const EvPopup: import("svelte").Component<Props, {}, "">;
+type EvPopup = ReturnType<typeof EvPopup>;
+export default EvPopup;

package/dist/lib/ev-stations/ev-plugin.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type MapPlugin } from "@sjvair/map-sdk";
+import type { DataSource } from "@sjvair/map-sdk/data";
+import type { EvFeatureProperties, EvLevel } from "./ev-store.svelte.js";
+export type EvPluginId = "ev-l2" | "ev-l3";
+export declare const EV_PLUGIN_IDS: Record<EvLevel, EvPluginId>;
+/**
+ * One level of EV chargers, as 4.x drew them: the level's charger icon and, clustered, bubbles in
+ * the level's color (radius 15/20/25 by count, with a white count) that zoom in on click. Stations
+ * are listed for the feature list; a click on one is a `featureclick` with a `feature` ref whose
+ * id is the station id (the layout opens the popup).
+ */
+export declare function evPlugin(level: EvLevel, source: DataSource<EvFeatureProperties>, options: {
+    clustered: boolean;
+}): MapPlugin;