@sjvair/map-sdk 0.0.0-stage → 0.1.0-beta.10

package/dist/plugins/style.js

@@ -0,0 +1,193 @@
+/** Theme token read at plugin setup (getComputedStyle on the container) for unmatched values. */
+export const NEUTRAL_COLOR_VAR = "--muted";
+/**
+ * The last resort when the host defines none of a color's tokens (or no DOM, as in unit tests).
+ * Presentation only, never data, and the only hardcoded colors in the plugins.
+ */
+export const FALLBACK_THEME_COLORS = {
+    neutral: "#9ca3af",
+    highlight: "#2563eb",
+    highlightForeground: "#ffffff",
+    foreground: "#111827",
+    mutedForeground: "#6b7280"
+};
+const THEME_TOKENS = {
+    neutral: [NEUTRAL_COLOR_VAR],
+    highlight: ["--highlight", "--primary"],
+    highlightForeground: ["--highlight-foreground", "--primary-foreground"],
+    foreground: ["--foreground"],
+    mutedForeground: ["--muted-foreground"]
+};
+/**
+ * Resolves the theme tokens on `container` (the `[data-mapsdk-map]` element) to colors MapLibre
+ * and marker images can use. Token values may be any CSS color (shadcn uses `oklch()`, which
+ * MapLibre can't parse), so each is drawn to a 1×1 canvas and read back as `rgba()`.
+ */
+export function themeColors(container) {
+    const style = container && typeof getComputedStyle === "function" ? getComputedStyle(container) : null;
+    const read = (names, fallback) => {
+        for (const name of names) {
+            const raw = style?.getPropertyValue(name).trim() ?? "";
+            if (raw && CSS.supports("color", raw))
+                return toRgba(raw, fallback);
+        }
+        return fallback;
+    };
+    const out = { ...FALLBACK_THEME_COLORS };
+    for (const key of Object.keys(THEME_TOKENS)) {
+        out[key] = read(THEME_TOKENS[key], FALLBACK_THEME_COLORS[key]);
+    }
+    return out;
+}
+/**
+ * The raw values of every token `themeColors` reads, as one string: when it changes, the colors
+ * plugins baked into paint and images are stale.
+ */
+export function themeSignature(container) {
+    const style = getComputedStyle(container);
+    return Object.values(THEME_TOKENS)
+        .flat()
+        .map((name) => style.getPropertyValue(name).trim())
+        .join("|");
+}
+/** A color canvas leaves `fillStyle` at when it rejects a value. */
+const SENTINEL = "#010203";
+function toRgba(color, fallback) {
+    const ctx = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+    if (!ctx)
+        return color;
+    ctx.fillStyle = SENTINEL;
+    ctx.fillStyle = color;
+    // Unchanged: canvas couldn't parse it (an assignment it rejects is ignored), so not black.
+    if (ctx.fillStyle === SENTINEL && color.toLowerCase() !== SENTINEL)
+        return fallback;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+    return `rgba(${r}, ${g}, ${b}, ${Math.round((a / 255) * 1000) / 1000})`;
+}
+/** Breakpoint input for null and non-numeric values: below every real level. */
+export const MISSING_VALUE = -1;
+const MISSING = MISSING_VALUE;
+function read(input) {
+    return typeof input === "string" ? ["get", input] : input;
+}
+/**
+ * The value as a number for a range lookup, like `levelFor`: a number, or a non-blank numeric
+ * string; anything else (null, missing, blank or non-numeric strings, booleans, arrays) is
+ * MISSING. `to-number` alone would read null, "", " " and false as 0 (the first level) and
+ * true as 1. There is no trim in expressions, so a string converting to 0 counts as blank unless
+ * it contains a "0" (every non-blank string Number() reads as 0 does).
+ *
+ * Accepted gap: "Infinity" and "1e999" convert to Infinity and step to the top level, while
+ * `levelFor` says NO_LEVEL (expressions have no clean finiteness check).
+ */
+function numeric(input) {
+    const v = ["var", "v"];
+    const n = ["var", "n"];
+    return [
+        "let",
+        "v",
+        read(input),
+        [
+            "case",
+            ["==", ["typeof", v], "number"],
+            ["to-number", v],
+            ["==", ["typeof", v], "string"],
+            [
+                "let",
+                "n",
+                ["to-number", v, MISSING],
+                ["case", ["all", ["==", n, 0], ["!", ["in", "0", ["to-string", v]]]], MISSING, n]
+            ],
+            MISSING
+        ]
+    ];
+}
+/**
+ * True where the input is a reading by `numericValue`'s rule: a number, or a non-blank numeric
+ * string (same blank-string test as `numeric`; "Infinity" is the same accepted gap). A string
+ * that two different `to-number` fallbacks both pass through converted.
+ */
+export function hasNumericValue(input) {
+    const v = ["var", "v"];
+    const a = ["var", "a"];
+    return [
+        "let",
+        "v",
+        read(input),
+        [
+            "case",
+            ["==", ["typeof", v], "number"],
+            true,
+            ["==", ["typeof", v], "string"],
+            [
+                "let",
+                "a",
+                ["to-number", v, -1],
+                [
+                    "all",
+                    ["==", a, ["to-number", v, -2]],
+                    ["!", ["all", ["==", a, 0], ["!", ["in", "0", v]]]]
+                ]
+            ],
+            false
+        ]
+    ];
+}
+/**
+ * Half-open range lookup matching `levelFor`: a level covers [min, max), the value `max` goes
+ * to the next level, and a gap or an unbounded-below input falls to `fallback`.
+ */
+function rangeStep(scale, input, fallback, pick) {
+    const stops = [];
+    let last = null;
+    const levels = scale.levels
+        .filter((l) => l.min !== null)
+        .sort((a, b) => a.min - b.min);
+    for (const level of levels) {
+        const min = level.min;
+        // Close a gap left by the previous level's max.
+        if (last !== null && last < min)
+            stops.push(last, fallback);
+        stops.push(min, pick(level) ?? fallback);
+        last = level.max ?? null;
+        if (last === null)
+            break;
+    }
+    if (last !== null)
+        stops.push(last, fallback);
+    if (stops.length === 0)
+        return ["literal", fallback];
+    return ["step", numeric(input), fallback, ...stops];
+}
+function categoryMatch(scale, input, fallback, pick) {
+    const arms = [];
+    for (const level of scale.levels) {
+        if (level.value === null)
+            continue;
+        arms.push(level.value, pick(level) ?? fallback);
+    }
+    if (arms.length === 0)
+        return ["literal", fallback];
+    return ["match", read(input), ...arms, fallback];
+}
+/** Per-level output for the level `input` falls in; `fallback` where no level applies. */
+export function levelLookup(scale, input, fallback, pick) {
+    return scale.kind === "range"
+        ? rangeStep(scale, input, fallback, pick)
+        : categoryMatch(scale, input, fallback, pick);
+}
+/** Fill color per level; unmatched values and levels with an empty color use `neutral`. */
+export function colorExpression(scale, property, neutral) {
+    return levelLookup(scale, property, neutral, (level) => level.color || null);
+}
+/** Opacity per level, or the plain `fallback` number when no level sets one. */
+export function opacityExpression(scale, property, fallback) {
+    if (!scale.levels.some((level) => level.opacity !== null))
+        return fallback;
+    return levelLookup(scale, property, fallback, (level) => level.opacity);
+}
+/** Level key per value ("" where no level applies), for filters and icon ids. */
+export function levelKeyExpression(scale, input) {
+    return levelLookup(scale, input, "", (level) => level.key);
+}

package/dist/presets/CollocationTooltip.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import type { FormatProvider } from "../data/format.js";
+	import type { MessageProvider } from "../data/messages.js";
+	import { levelFor, NO_LEVEL, numericValue } from "../data/scale.js";
+	import type { Scale } from "../data/scale-types.js";
+	import type { CollocationFeatureProperties } from "../data/types.js";
+	import { formatValue } from "../ui/value-format.js";
+	import MonitorReadingBox from "./MonitorReadingBox.svelte";
+
+	// Ported from monitor-map's CollocationTooltip: the reference monitor's reading beside its
+	// details, then the collocated monitor's with the box on the other side. Readings are whole
+	// numbers cut off, not rounded, as monitor-map's. The reference monitor's own name is shown
+	// here (the site's name when it isn't loaded), not above.
+
+	interface Props {
+		site: CollocationFeatureProperties;
+		scale: Scale | null;
+		messages: MessageProvider;
+		format: FormatProvider;
+		/** How often each monitor's type reports (e.g. "1 hour"); null leaves its note out. */
+		referenceInterval: string | null;
+		colocatedInterval: string | null;
+	}
+
+	let { site, scale, messages, format, referenceInterval, colocatedInterval }: Props = $props();
+
+	function side(
+		name: string | null,
+		role: string,
+		value: number | null,
+		timestamp: string | null,
+		interval: string | null
+	) {
+		const found = scale ? levelFor(value, scale) : NO_LEVEL;
+		const level = found !== NO_LEVEL ? found : null;
+		const n = numericValue(value);
+		const valid = !!timestamp && !Number.isNaN(Date.parse(timestamp));
+		const zone = format.zoneLabel();
+		const formatted = valid ? format.dateTime(timestamp!) : null;
+		return {
+			name,
+			role,
+			color: level?.color || null,
+			level: level ? level.label : messages("mapsdk_no_level"),
+			reading: n === null ? null : formatValue(Math.trunc(n), 0, format),
+			subheading: interval ? messages("mapsdk_collocation_interval_avg", { interval }) : undefined,
+			at:
+				formatted && zone
+					? messages("mapsdk_time_with_zone", { time: formatted, zone })
+					: formatted,
+			ago: valid
+				? messages("mapsdk_collocation_updated", { when: format.relativeTime(timestamp!) })
+				: null
+		};
+	}
+
+	const sides = $derived([
+		side(
+			site.referenceName ?? site.name,
+			messages("mapsdk_collocation_reference"),
+			numericValue(site.value),
+			site.timestamp ?? null,
+			referenceInterval
+		),
+		side(
+			site.colocatedName,
+			messages("mapsdk_collocation_colocated"),
+			site.colocatedValue,
+			site.colocatedTimestamp,
+			colocatedInterval
+		)
+	]);
+</script>
+
+<div class="mapsdk-collocation-tip mapsdk-tooltip-wide">
+	{#each sides as entry, i (i)}
+		<div class="mapsdk-collocation-row" class:reverse={i === 1}>
+			<MonitorReadingBox
+				color={entry.color}
+				header={scale?.label ?? ""}
+				value={entry.reading ?? messages("mapsdk_no_reading")}
+				large={entry.reading !== null}
+				subheading={entry.subheading}
+			/>
+			<div class="mapsdk-collocation-detail">
+				{#if entry.at}
+					<span>{entry.at}</span>
+				{/if}
+				{#if entry.name}
+					<span class="mapsdk-collocation-name text-lg">{entry.name}</span>
+				{/if}
+				<span>{entry.role}</span>
+				<span>{entry.level}</span>
+				{#if entry.ago}
+					<span class="mapsdk-collocation-ago text-base">{entry.ago}</span>
+				{/if}
+			</div>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.mapsdk-collocation-tip {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.mapsdk-collocation-row {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.mapsdk-collocation-row.reverse {
+		flex-direction: row-reverse;
+	}
+
+	.mapsdk-collocation-detail {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.mapsdk-collocation-name {
+		font-weight: 700;
+		text-decoration: underline;
+	}
+
+	.mapsdk-collocation-ago {
+		margin-top: auto;
+	}
+</style>

package/dist/presets/CollocationTooltip.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { FormatProvider } from "../data/format.js";
+import type { MessageProvider } from "../data/messages.js";
+import type { Scale } from "../data/scale-types.js";
+import type { CollocationFeatureProperties } from "../data/types.js";
+interface Props {
+    site: CollocationFeatureProperties;
+    scale: Scale | null;
+    messages: MessageProvider;
+    format: FormatProvider;
+    /** How often each monitor's type reports (e.g. "1 hour"); null leaves its note out. */
+    referenceInterval: string | null;
+    colocatedInterval: string | null;
+}
+declare const CollocationTooltip: import("svelte").Component<Props, {}, "">;
+type CollocationTooltip = ReturnType<typeof CollocationTooltip>;
+export default CollocationTooltip;

package/dist/presets/FireTooltip.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { FeatureListItem } from "../core/plugin.js";
+	import type { FormatProvider } from "../data/format.js";
+	import type { MessageProvider } from "../data/messages.js";
+	import { NO_LEVEL, numericValue } from "../data/scale.js";
+	import { formatValue } from "../ui/value-format.js";
+	import MonitorReadingBox from "./MonitorReadingBox.svelte";
+
+	// A fire's power in the monitors' reading box, beside its name and level. The value is cut
+	// off, not rounded, so it never reads as the next level (9.96 MW shows 9.9 beside "<10").
+	// No detection time: a satellite pass isn't when the fire started or whether it still burns.
+
+	interface Props {
+		item: FeatureListItem;
+		/** How many detections a group averages; null for a single detection. */
+		count: number | null;
+		messages: MessageProvider;
+		format: FormatProvider;
+	}
+
+	let { item, count, messages, format }: Props = $props();
+
+	const level = $derived(item.level !== NO_LEVEL ? item.level : null);
+	const value = $derived.by(() => {
+		const n = numericValue(item.value);
+		return n === null ? null : formatValue(n, item.precision, format, true);
+	});
+	const header = $derived(
+		item.units
+			? messages("mapsdk_hms_fire_box_header", { units: item.units })
+			: messages("mapsdk_hms_fire_box_header_no_units")
+	);
+</script>
+
+<div class="mapsdk-fire-tip mapsdk-tooltip-wide">
+	<MonitorReadingBox
+		color={level?.color || null}
+		{header}
+		value={value ?? messages("mapsdk_no_reading")}
+		large={value !== null}
+		subheading={count !== null && count >= 2 ? messages("mapsdk_hms_fire_average") : undefined}
+	/>
+	<div class="mapsdk-fire-detail">
+		<span class="mapsdk-fire-name text-lg">{item.name}</span>
+		<span>
+			{level
+				? item.units
+					? messages("mapsdk_level_with_units", { level: level.label, units: item.units })
+					: level.label
+				: messages("mapsdk_no_level")}
+		</span>
+	</div>
+</div>
+
+<style>
+	.mapsdk-fire-tip {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.mapsdk-fire-name {
+		font-weight: 700;
+	}
+
+	.mapsdk-fire-detail {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+</style>

package/dist/presets/FireTooltip.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { FeatureListItem } from "../core/plugin.js";
+import type { FormatProvider } from "../data/format.js";
+import type { MessageProvider } from "../data/messages.js";
+interface Props {
+    item: FeatureListItem;
+    /** How many detections a group averages; null for a single detection. */
+    count: number | null;
+    messages: MessageProvider;
+    format: FormatProvider;
+}
+declare const FireTooltip: import("svelte").Component<Props, {}, "">;
+type FireTooltip = ReturnType<typeof FireTooltip>;
+export default FireTooltip;

package/dist/presets/MonitorClusterTooltip.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import type { FormatProvider } from "../data/format.js";
+	import type { MessageProvider } from "../data/messages.js";
+	import type { MetadataProvider } from "../data/metadata.js";
+	import { levelFor, NO_LEVEL, numericValue } from "../data/scale.js";
+	import type { Scale } from "../data/scale-types.js";
+	import type { MonitorFeatureProperties } from "../data/types.js";
+	import type { ClusterInfo } from "../plugins/points-clusters.js";
+	import { formatValue } from "../ui/value-format.js";
+	import { clusterAreaSqMiles } from "./cluster-area.js";
+	import MonitorReadingBox from "./MonitorReadingBox.svelte";
+
+	// Ported from monitor-map's MonitorClusterTooltip: the cluster's average in a level-colored
+	// box beside its monitor type, count, and highest and lowest readings. The count and average
+	// come from the bubble itself, so they show at once; the rest fills in from the cluster's
+	// monitors. The average is a whole number and max and min are as reported, as monitor-map's.
+	// The count line adds the area the monitors are within (their convex hull) once they load.
+
+	interface Props {
+		cluster: ClusterInfo<MonitorFeatureProperties>;
+		scale: Scale | null;
+		messages: MessageProvider;
+		format: FormatProvider;
+		metadata: MetadataProvider;
+	}
+
+	let { cluster, scale, messages, format, metadata }: Props = $props();
+
+	/** From the cluster's monitors, once they load. */
+	interface Leaves {
+		isSjvair: boolean;
+		/** Readings only; monitors without one are left out. */
+		values: number[];
+		/** Square miles of the monitors' convex hull, every monitor included. */
+		area: number;
+	}
+
+	let leaves = $state.raw<Leaves | null>(null);
+	/** True once the monitors loaded or failed to. */
+	let settled = $state(false);
+	let typeLabel = $state<string | null>(null);
+
+	$effect(() => {
+		const controller = new AbortController();
+		const { group } = cluster;
+		leaves = null;
+		settled = false;
+		typeLabel = null;
+		metadata.monitorTypeLabel(group, controller.signal).then(
+			(label) => {
+				if (!controller.signal.aborted) typeLabel = label === "unavailable" ? group : label;
+			},
+			() => {
+				if (!controller.signal.aborted) typeLabel = group;
+			}
+		);
+		cluster.leaves().then(
+			(found) => {
+				if (controller.signal.aborted) return;
+				settled = true;
+				if (found.length === 0) return;
+				leaves = {
+					isSjvair: found[0].props.isSjvair,
+					values: found.flatMap(({ props }) => {
+						const n = numericValue(props.value);
+						return n === null ? [] : [n];
+					}),
+					area: clusterAreaSqMiles(found.map(({ lngLat }) => lngLat))
+				};
+			},
+			() => {
+				if (!controller.signal.aborted) settled = true;
+			}
+		);
+		return () => controller.abort();
+	});
+
+	/**
+	 * The bubble's own average (its readings' sum over their count), unrounded: the level comes
+	 * from it, as the bubble's color does. Only the number shown is rounded.
+	 */
+	const mean = $derived.by(() => {
+		const sum = cluster.properties.sumValues;
+		const count = cluster.properties.countValues;
+		if (typeof sum !== "number" || typeof count !== "number" || count <= 0) return null;
+		return sum / count;
+	});
+	const average = $derived(mean === null ? null : formatValue(mean, 0, format));
+	const level = $derived.by(() => {
+		if (mean === null || !scale) return null;
+		const found = levelFor(mean, scale);
+		return found !== NO_LEVEL ? found : null;
+	});
+	const units = $derived(scale?.units ?? "");
+	/** The area to 3 decimals, or null when there is none to show (it would read 0.000). */
+	const area = $derived.by(() => {
+		// Decided on the number, so a host's own number format can't change what's hidden.
+		if (!leaves || Math.round(leaves.area * 1000) === 0) return null;
+		return format.number(leaves.area, {
+			minimumFractionDigits: 3,
+			maximumFractionDigits: 3,
+			useGrouping: false
+		});
+	});
+	const max = $derived(leaves?.values.length ? Math.max(...leaves.values) : null);
+	const min = $derived(leaves?.values.length ? Math.min(...leaves.values) : null);
+</script>
+
+<div class="mapsdk-monitor-tip mapsdk-tooltip-wide">
+	<MonitorReadingBox
+		color={level?.color || null}
+		header={scale?.label ?? ""}
+		value={average ?? messages("mapsdk_no_reading")}
+		large={average !== null}
+		subheading={messages("mapsdk_monitor_cluster_average")}
+	/>
+	<div class="mapsdk-monitor-detail">
+		{#if typeLabel !== null && settled}
+			<span class="mapsdk-monitor-title text-lg">
+				{messages(
+					leaves?.isSjvair ? "mapsdk_monitor_cluster_title_sjvair" : "mapsdk_monitor_cluster_title",
+					{ type: typeLabel }
+				)}
+			</span>
+		{/if}
+		<span>
+			{area
+				? messages("mapsdk_monitor_cluster_count_area", { count: cluster.pointCount, area })
+				: messages("mapsdk_monitor_cluster_count", { count: cluster.pointCount })}
+		</span>
+		<span>{level ? level.label : messages("mapsdk_no_level")}</span>
+		{#if max !== null && min !== null}
+			<span class="mapsdk-monitor-extremes text-base">
+				{messages("mapsdk_monitor_cluster_max", {
+					value: formatValue(max, undefined, format),
+					units
+				})}
+			</span>
+			<span class="text-base">
+				{messages("mapsdk_monitor_cluster_min", {
+					value: formatValue(min, undefined, format),
+					units
+				})}
+			</span>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.mapsdk-monitor-tip {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.mapsdk-monitor-title {
+		font-weight: 700;
+	}
+
+	.mapsdk-monitor-extremes {
+		margin-top: auto;
+	}
+
+	.mapsdk-monitor-detail {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+</style>

package/dist/presets/MonitorClusterTooltip.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { FormatProvider } from "../data/format.js";
+import type { MessageProvider } from "../data/messages.js";
+import type { MetadataProvider } from "../data/metadata.js";
+import type { Scale } from "../data/scale-types.js";
+import type { MonitorFeatureProperties } from "../data/types.js";
+import type { ClusterInfo } from "../plugins/points-clusters.js";
+interface Props {
+    cluster: ClusterInfo<MonitorFeatureProperties>;
+    scale: Scale | null;
+    messages: MessageProvider;
+    format: FormatProvider;
+    metadata: MetadataProvider;
+}
+declare const MonitorClusterTooltip: import("svelte").Component<Props, {}, "">;
+type MonitorClusterTooltip = ReturnType<typeof MonitorClusterTooltip>;
+export default MonitorClusterTooltip;

package/dist/presets/MonitorReadingBox.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { levelChip } from "../ui/level-chip.js";
+
+	// monitor-map's DataBox: a reading in a box filled with its level's color.
+
+	interface Props {
+		/** The level color; null or unparseable → the neutral box. */
+		color: string | null;
+		header: string;
+		value: string;
+		/** Shows `value` large (a reading rather than a "No reading" note). */
+		large: boolean;
+		subheading?: string;
+	}
+
+	let { color, header, value, large, subheading }: Props = $props();
+
+	const style = $derived.by(() => {
+		const chip = levelChip(color);
+		return chip
+			? `background:${chip.background};border-color:${chip.border};color:${chip.text}`
+			: "";
+	});
+</script>
+
+<div class="mapsdk-reading-box" class:neutral={!style} {style}>
+	{#if header}
+		<span class="text-base">{header}</span>
+	{/if}
+	<span class="mapsdk-reading-value" class:text-3xl={large}>{value}</span>
+	{#if subheading}
+		<span>{subheading}</span>
+	{/if}
+</div>
+
+<style>
+	.mapsdk-reading-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 0.25rem;
+		border: 4px solid;
+		border-radius: calc(var(--radius-control, var(--radius)) / 2);
+		text-align: center;
+		white-space: nowrap;
+	}
+
+	.mapsdk-reading-box.neutral {
+		border-color: var(--border);
+		background: var(--muted);
+		color: var(--muted-foreground);
+	}
+
+	.mapsdk-reading-value {
+		font-weight: 700;
+	}
+</style>

package/dist/presets/MonitorReadingBox.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    /** The level color; null or unparseable → the neutral box. */
+    color: string | null;
+    header: string;
+    value: string;
+    /** Shows `value` large (a reading rather than a "No reading" note). */
+    large: boolean;
+    subheading?: string;
+}
+declare const MonitorReadingBox: import("svelte").Component<Props, {}, "">;
+type MonitorReadingBox = ReturnType<typeof MonitorReadingBox>;
+export default MonitorReadingBox;