@sjvair/map-sdk 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/ui/MapTooltip.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import { untrack } from "svelte";
+	import type { Attachment } from "svelte/attachments";
 	import type { MapContext } from "../core/create-map.svelte.js";
 	import type { GlMapLike } from "../core/gl.js";
 	import type { FeatureListItem, MapPlugin } from "../core/plugin.js";
 	import TooltipItem from "./TooltipItem.svelte";
+	import type { Snippet } from "svelte";
+	import type { CardContext } from "./card.js";
+	import { selectionKeys } from "../data/selection.js";
+	import { selectionId } from "../data/refs.js";
 
 	interface Props {
 		map: MapContext;
@@ -24,17 +29,38 @@
 		mode?: "pinned" | "pointer";
 		/** The GL map, for `zoomstart` in `"pointer"` mode. */
 		gl?: Pick<GlMapLike, "on" | "off"> | null;
+		/**
+		 * The pinned reading card: `map.pinned` and a focused list item show as an interactive card
+		 * (pointer events, a Close button, Esc), and the hover doesn't show while one is pinned.
+		 */
+		card?: boolean;
+		/** The host's buttons on the card (`MapView`'s `card.actions`). */
+		actions?: Snippet<[CardContext]>;
 	}
 
-	let { map, project, width, height, mode = "pinned", gl = null }: Props = $props();
+	let {
+		map,
+		project,
+		width,
+		height,
+		mode = "pinned",
+		gl = null,
+		card = false,
+		actions
+	}: Props = $props();
+
+	// Ignored without the card, so a host's map never pins.
+	const pinned = $derived(card ? map.pinned : null);
 
 	// Pointer mode only: set by a zoom, cleared by the next pointer move over a hit.
 	let zoomHidden = $state(false);
 	$effect(() => {
-		if (mode !== "pointer" || !gl) return;
+		// Captured: props are live, and the cleanup runs after MapView has set `gl` to null.
+		const g = gl;
+		if (mode !== "pointer" || !g) return;
 		const onZoomStart = () => (zoomHidden = true);
-		gl.on("zoomstart", onZoomStart);
-		return () => gl.off("zoomstart", onZoomStart);
+		g.on("zoomstart", onZoomStart);
+		return () => g.off("zoomstart", onZoomStart);
 	});
 	$effect(() => {
 		// A new hovered object comes with every pointer move over a hit.
@@ -45,11 +71,15 @@
 	let tipHeight = $state(0);
 	const GAP = 12;
 
-	// The keyboard-focused list item wins over the pointer.
-	const key = $derived(map.focusedKey ?? map.hovered?.hit.refKey ?? null);
+	// The keyboard-focused list item wins, then the pinned card, then the pointer (which shows
+	// nothing while a card is pinned).
+	const shownHit = $derived(map.focusedKey ? null : (pinned ?? map.hovered));
+	const key = $derived(map.focusedKey ?? shownHit?.hit.refKey ?? null);
 	// Primitives, so moving the pointer within one feature doesn't recompute the content.
-	const hitPluginId = $derived(map.focusedKey ? null : (map.hovered?.hit.pluginId ?? null));
-	const hitName = $derived(map.focusedKey ? null : (map.hovered?.hit.name ?? null));
+	const hitPluginId = $derived(shownHit?.hit.pluginId ?? null);
+	const hitName = $derived(shownHit?.hit.name ?? null);
+	// The card shows (interactive) for a focused item or a pinned feature.
+	const interactive = $derived(card && (map.focusedKey !== null || pinned !== null));
 
 	// Reads only the shown feature's plugin (or all plugins for a focused key), and only while
 	// something is shown, so an idle map doesn't subscribe to any plugin's data.
@@ -70,12 +100,33 @@
 	// A found item anchors the tooltip at its point (stable while the pointer moves over it).
 	// In pointer mode a hovered hit is anchored at the pointer instead (a focused item stays
 	// pinned).
-	const anchor = $derived(
-		mode === "pointer" && !map.focusedKey
-			? (map.hovered?.lngLat ?? null)
-			: (item?.lngLat ?? map.hovered?.lngLat ?? null)
+	// A hovered shape whose point is off-screen pins at a point of it in view, found once per
+	// hovered feature (keyed on primitives), so pointer moves within it don't move the tooltip.
+	// It's found again when the map settles (`bounds`), so a pan or zoom under a resting pointer
+	// doesn't leave it off-screen.
+	const hoverKey = $derived(
+		!map.focusedKey && item && hitPluginId ? `${hitPluginId}\n${item.refKey}` : null
 	);
+	const hoverAnchor = $derived.by(() => {
+		if (hoverKey === null) return null;
+		void map.bounds;
+		return untrack(() => (item?.geometry ? map.anchorFor(item) : null));
+	});
+	const anchor = $derived.by((): [number, number] | null => {
+		if (mode === "pointer" && !map.focusedKey && !pinned) return map.hovered?.lngLat ?? null;
+		// A focused feature that left the data has no item, so no tooltip.
+		if (map.focusedKey) return item ? (map.focusedAnchor ?? item.lngLat) : null;
+		return hoverAnchor ?? item?.lngLat ?? shownHit?.lngLat ?? null;
+	});
 	const projected = $derived(anchor ? project(anchor) : null);
+	// A card whose anchor is out of the map's box hides until it's back.
+	const offScreen = $derived(
+		interactive &&
+			projected !== null &&
+			width !== undefined &&
+			height !== undefined &&
+			(projected.x < 0 || projected.y < 0 || projected.x > width || projected.y > height)
+	);
 	// Centered above the point; flipped below it near the top edge; inside the container.
 	const position = $derived.by(() => {
 		if (!projected) return null;
@@ -92,7 +143,7 @@
 		// A hovered hit no plugin lists (e.g. a cluster bubble): its plugin's hover content.
 		if (key === null || hitPluginId === null) return undefined;
 		const plugin = map.plugins.find((p) => p.id === hitPluginId);
-		const hit = untrack(() => map.hovered?.hit);
+		const hit = untrack(() => shownHit?.hit);
 		return hit && plugin?.hoverTooltip?.(hit);
 	});
 
@@ -103,10 +154,159 @@
 		const plugin = found?.plugin ?? map.plugins.find((p) => p.id === hitPluginId);
 		return !plugin?.tooltipShowsName;
 	});
+
+	// The card's feature for the host's actions: the focused item, or the pinned hit.
+	const cardContext = $derived.by((): CardContext | null => {
+		if (!interactive || !actions) return null;
+		const pluginId = found?.plugin.id ?? hitPluginId;
+		const ref = item?.ref ?? shownHit?.hit.ref;
+		const refKey = key;
+		if (!pluginId || !ref || refKey === null) return null;
+		return {
+			pluginId,
+			ref,
+			refKey,
+			item,
+			get selectable() {
+				return (
+					map.getSelectionMode(pluginId) !== "none" &&
+					selectionId(ref) !== null &&
+					(item?.selectable ?? true)
+				);
+			},
+			get selected() {
+				return selectionKeys(map.getSelection(pluginId)).has(refKey);
+			},
+			toggle() {
+				if (this.selectable) map.togglePick(pluginId, ref);
+			}
+		};
+	});
+
+	let cardEl: HTMLDivElement | undefined = $state();
+	/** Where focus came from when it moved into the card, to return it on close. */
+	let origin: HTMLElement | null = null;
+
+	function onfocusin(e: FocusEvent) {
+		const from = e.relatedTarget;
+		focusInside = true;
+		region = cardEl?.closest<HTMLElement>("[data-mapsdk-map]") ?? region;
+		// Focus from outside sets the origin afresh, even from nowhere, so an earlier card's
+		// origin is never reused.
+		if (!(from instanceof Node && cardEl?.contains(from))) {
+			origin = from instanceof HTMLElement ? from : null;
+		}
+	}
+
+	/** Focus is inside the card (kept by focusin/focusout, since a removed card no longer says). */
+	let focusInside = false;
+	/** The map region the card is in, found while it's in the document. */
+	let region: HTMLElement | null = null;
+
+	function onfocusout(e: FocusEvent) {
+		const to = e.relatedTarget;
+		if (to instanceof Node && cardEl?.contains(to)) return;
+		// Later, not now: removing the focused card fires focusout too, and its teardown (which
+		// runs first) still has to see that focus was inside.
+		queueMicrotask(() => {
+			if (!cardEl?.contains(document.activeElement)) focusInside = false;
+		});
+	}
+
+	/** Focus inside the card goes back where it came from, else to the map region. */
+	function handBack() {
+		if (!focusInside) return;
+		focusInside = false;
+		const back = origin;
+		origin = null;
+		if (back?.isConnected) back.focus();
+		else if (region?.isConnected) {
+			if (!region.hasAttribute("tabindex")) region.setAttribute("tabindex", "-1");
+			region.focus();
+		}
+	}
+
+	// However the card goes (Close, a host's unpin, its plugin removed, its anchor off-screen),
+	// focus inside it isn't left on a removed node.
+	const handBackOnRemove: Attachment<HTMLElement> = () => () => handBack();
+
+	/** Unpins, handing focus back first. */
+	function close() {
+		handBack();
+		map.unpin();
+		// Focus back on a list row focuses (and so shows) that row again; the card stays closed
+		// until the next row move, as with Esc in the list.
+		if (map.focusedKey !== null) map.focusFeature(null);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key !== "Escape") return;
+		e.preventDefault();
+		e.stopPropagation();
+		close();
+	}
+
+	// A pinned hit with nothing to show (no name, listed item, or hover content) would be an
+	// invisible card that still hides the hover and takes Esc: unpin it.
+	$effect(() => {
+		if (pinned && !map.focusedKey && !(name || item || custom)) untrack(() => map.unpin());
+	});
+
+	// A pinned feature that left its plugin's data (a poll dropped it) closes its card. Only one
+	// its plugin listed while pinned: some hits are never listed (HMS fire hotspots), and keep it.
+	let listedKey: string | null = null;
+	$effect(() => {
+		if (!pinned || map.focusedKey) return;
+		const { pluginId, refKey } = pinned.hit;
+		const plugin = map.plugins.find((p) => p.id === pluginId);
+		if (!plugin?.features) return;
+		const id = `${pluginId}\n${refKey}`;
+		if (plugin.features().some((f) => f.refKey === refKey)) listedKey = id;
+		else if (listedKey === id) {
+			listedKey = null;
+			untrack(close);
+		}
+	});
 </script>
 
 <!-- Only with something to show: a hit with no name, item, or content gets no empty box. -->
-{#if (name || item || custom) && position && !(zoomHidden && !map.focusedKey)}
+{#if interactive && (name || item || custom) && position && !offScreen}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={cardEl}
+		{@attach handBackOnRemove}
+		class="mapsdk-tooltip mapsdk-card text-sm"
+		role="group"
+		aria-label={name ?? undefined}
+		bind:offsetWidth={tipWidth}
+		bind:offsetHeight={tipHeight}
+		style:left="{position.left}px"
+		style:top="{position.top}px"
+		{onfocusin}
+		{onfocusout}
+		{onkeydown}
+	>
+		{#if showName}
+			<div class="mapsdk-tooltip-name">{name}</div>
+		{/if}
+		{#if custom}
+			{@render custom()}
+		{:else if item}
+			<TooltipItem {item} messages={map.messages} format={map.format} />
+		{/if}
+		{#if actions && cardContext}
+			<div class="mapsdk-card-actions">{@render actions(cardContext)}</div>
+		{/if}
+		<button
+			type="button"
+			class="mapsdk-card-close mapsdk-focus"
+			aria-label={map.messages("mapsdk_card_close")}
+			onclick={close}
+		>
+			<span aria-hidden="true">×</span>
+		</button>
+	</div>
+{:else if !interactive && (name || item || custom) && position && !(zoomHidden && !map.focusedKey)}
 	<div
 		class="mapsdk-tooltip text-sm"
 		role="tooltip"
@@ -155,4 +355,43 @@
 	.mapsdk-tooltip-name {
 		font-weight: 600;
 	}
+
+	/* The pinned card: takes the pointer, and sits above the feature list panel. Room on the
+	   right for the Close button. */
+	.mapsdk-card {
+		z-index: 3;
+		padding-right: 2rem;
+		pointer-events: auto;
+	}
+
+	.mapsdk-card-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		margin-top: 0.5rem;
+	}
+
+	.mapsdk-card-close {
+		position: absolute;
+		top: 0.25rem;
+		right: 0.25rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.5rem;
+		height: 1.5rem;
+		padding: 0;
+		border: 0;
+		border-radius: var(--radius-control, var(--radius));
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: 1.125rem;
+		line-height: 1;
+		cursor: pointer;
+	}
+
+	.mapsdk-card-close:hover {
+		background: var(--accent, var(--muted));
+	}
 </style>

package/dist/ui/MapTooltip.svelte.d.ts

@@ -1,5 +1,7 @@
 import type { MapContext } from "../core/create-map.svelte.js";
 import type { GlMapLike } from "../core/gl.js";
+import type { Snippet } from "svelte";
+import type { CardContext } from "./card.js";
 interface Props {
     map: MapContext;
     /**
@@ -22,6 +24,13 @@ interface Props {
     mode?: "pinned" | "pointer";
     /** The GL map, for `zoomstart` in `"pointer"` mode. */
     gl?: Pick<GlMapLike, "on" | "off"> | null;
+    /**
+     * The pinned reading card: `map.pinned` and a focused list item show as an interactive card
+     * (pointer events, a Close button, Esc), and the hover doesn't show while one is pinned.
+     */
+    card?: boolean;
+    /** The host's buttons on the card (`MapView`'s `card.actions`). */
+    actions?: Snippet<[CardContext]>;
 }
 declare const MapTooltip: import("svelte").Component<Props, {}, "">;
 type MapTooltip = ReturnType<typeof MapTooltip>;

package/dist/ui/PickNotice.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { MapContext } from "../core/create-map.svelte.js";
+
+	interface Props {
+		map: MapContext;
+	}
+
+	let { map }: Props = $props();
+
+	/** How long a refused pick's message stays. */
+	const SHOW_MS = 4000;
+
+	// Each refusal (a new id) shows for SHOW_MS, then clears.
+	$effect(() => {
+		const id = map.notice?.id;
+		if (id === undefined) return;
+		const timer = setTimeout(() => {
+			if (map.notice?.id === id) map.clearNotice();
+		}, SHOW_MS);
+		return () => clearTimeout(timer);
+	});
+</script>
+
+<!-- Always present: a live region must exist before its text changes to be announced. -->
+<div class="mapsdk-pick-notice" role="status" aria-live="polite" aria-atomic="true">
+	{#if map.notice?.message}
+		{#key map.notice.id}
+			<span class="mapsdk-pick-notice-text text-sm">{map.notice.message}</span>
+		{/key}
+	{/if}
+</div>
+
+<style>
+	/* Spans the map less 1rem a side, centering its text box, so a long message wraps at the
+	   map's width rather than at half of it. */
+	.mapsdk-pick-notice {
+		position: absolute;
+		right: 1rem;
+		bottom: 2.5rem;
+		left: 1rem;
+		z-index: 3;
+		display: flex;
+		justify-content: center;
+		pointer-events: none;
+	}
+
+	.mapsdk-pick-notice-text {
+		display: block;
+		padding: 0.375rem 0.75rem;
+		border: 1px solid var(--card-border, var(--border));
+		border-radius: var(--radius-control, var(--radius));
+		background: var(--background);
+		color: var(--foreground);
+		box-shadow: var(--shadow-card, none);
+	}
+</style>

package/dist/ui/PickNotice.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MapContext } from "../core/create-map.svelte.js";
+interface Props {
+    map: MapContext;
+}
+declare const PickNotice: import("svelte").Component<Props, {}, "">;
+type PickNotice = ReturnType<typeof PickNotice>;
+export default PickNotice;

package/dist/ui/TooltipItem.svelte

@@ -3,8 +3,8 @@
 	import type { MessageProvider } from "../data/messages.js";
 	import type { FeatureListItem } from "../core/plugin.js";
 	import { NO_LEVEL } from "../data/scale.js";
+	import { levelText, shownValue } from "./feature-list.js";
 	import { levelChip } from "./level-chip.js";
-	import { formatValue } from "./value-format.js";
 
 	// The generic tooltip body under a feature's name: its value and a chip with its level. Shared
 	// by MapTooltip and by plugins that show it for features they don't list.
@@ -19,18 +19,14 @@
 
 	// A level with an empty color shows its label on the neutral chip.
 	const level = $derived(item.level !== NO_LEVEL ? item.level : null);
-	const levelLabel = $derived(level ? level.label : messages("mapsdk_no_level"));
+	// The level's label, else the item's detail (plain text, no chip), else "No level".
+	const levelPlace = $derived(levelText(item, messages));
 	const chipColors = $derived.by(() => {
 		const chip = levelChip(level?.color);
 		return chip ? `background:${chip.background};color:${chip.text}` : "";
 	});
-	const valueText = $derived(
-		item.value == null
-			? null
-			: typeof item.value === "number"
-				? formatValue(item.value, item.precision, format)
-				: item.value
-	);
+	// A category reading shows only its level chip: its value is the level's code.
+	const valueText = $derived(shownValue(item, format));
 </script>
 
 <div class="mapsdk-tooltip-item">
@@ -39,9 +35,13 @@
 			{valueText}{#if item.units}&nbsp;{item.units}{/if}
 		</div>
 	{/if}
-	<span class="mapsdk-tooltip-chip text-xs" class:neutral={!chipColors} style={chipColors}>
-		{levelLabel}
-	</span>
+	{#if levelPlace.kind === "detail"}
+		<span class="mapsdk-tooltip-detail text-xs">{levelPlace.text}</span>
+	{:else}
+		<span class="mapsdk-tooltip-chip text-xs" class:neutral={!chipColors} style={chipColors}>
+			{levelPlace.text}
+		</span>
+	{/if}
 </div>
 
 <style>

package/dist/ui/card.d.ts

@@ -0,0 +1,29 @@
+import type { Snippet } from "svelte";
+import type { FeatureListItem } from "../core/plugin.js";
+import type { FeatureRef } from "../data/types.js";
+/** What a host's card actions get: the card's feature and its selection state. */
+export interface CardContext {
+    readonly pluginId: string;
+    readonly ref: FeatureRef;
+    readonly refKey: string;
+    /** The listed item, or null for a hit its plugin doesn't list (an HMS fire hotspot). */
+    readonly item: FeatureListItem | null;
+    /**
+     * Whether the feature can be selected: its plugin's mode isn't `"none"`, it's a monitor or a
+     * region (not a `feature` ref), and its listed item, if any, is `selectable`. Reactive. Show
+     * Select/Remove only when it's true.
+     */
+    readonly selectable: boolean;
+    /** Whether the feature is in its plugin's selection. Reactive. */
+    readonly selected: boolean;
+    /**
+     * A user's Select/Remove: toggles the feature, with the plugin's `canSelect`. Does nothing
+     * when it isn't `selectable`.
+     */
+    toggle(): void;
+}
+/** `MapView`'s `card` options. */
+export interface CardOptions {
+    /** The host's buttons, in a row at the card's foot. */
+    actions?: Snippet<[CardContext]>;
+}

package/dist/ui/card.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/feature-list.d.ts

@@ -16,16 +16,31 @@ export declare const MENU_EVENT_WINDOW_MS = 1000;
  * separator and different rows never share a fragment.
  */
 export declare function optionIdPart(pluginId: string, refKey: string): string;
-/** Items whose point is inside `bounds`, edges included. No antimeridian handling (the Valley). */
+/**
+ * Items in `bounds`, edges included: a shape (`geometry`) when it overlaps them, anything else when
+ * its point is inside. No antimeridian handling (the Valley).
+ */
 export declare function inView(items: FeatureListItem[], bounds: Bounds): FeatureListItem[];
 /**
  * The item's level, or null for `NO_LEVEL`. A level with an empty color is still shown, by its
  * label on a neutral swatch.
  */
 export declare function shownLevel(item: FeatureListItem): Level | null;
+/**
+ * The value as shown, or `null` for none. A category reading, whose value is its level's code
+ * (smoke's "light", the heat score's 2), shows no value: its level label already says it.
+ */
+export declare function shownValue(item: FeatureListItem, format: FormatProvider): string | null;
 /** A sorted copy. `value`: highest first, null values and no level last; ties and `name` by name. */
 export declare function sortItems(items: FeatureListItem[], by: SortBy): FeatureListItem[];
 /** The first index at or after `from` (wrapping) whose name starts with `query`, any case; -1 if none. */
 export declare function typeaheadIndex(items: FeatureListItem[], query: string, from: number): number;
-/** A row's accessible name: name, value, units, and level label. */
+/**
+ * What stands in an item's level place: its level's label, else its `detail`, else "No level".
+ */
+export declare function levelText(item: FeatureListItem, messages: MessageProvider): {
+    kind: "level" | "detail" | "none";
+    text: string;
+};
+/** A row's accessible name: name, value, units, and level label (or detail). */
 export declare function rowLabel(item: FeatureListItem, messages: MessageProvider, format: FormatProvider): string;

package/dist/ui/feature-list.js

@@ -1,3 +1,4 @@
+import { intersectsBounds } from "../core/shape-view.js";
 import { NO_LEVEL } from "../data/scale.js";
 import { formatValue } from "./value-format.js";
 /**
@@ -14,11 +15,12 @@ export function optionIdPart(pluginId, refKey) {
     const escape = (text) => text.replace(/[^A-Za-z0-9]/g, (c) => `_${c.codePointAt(0).toString(16)}_`);
     return `${escape(pluginId)}--${escape(refKey)}`;
 }
-/** Items whose point is inside `bounds`, edges included. No antimeridian handling (the Valley). */
+/**
+ * Items in `bounds`, edges included: a shape (`geometry`) when it overlaps them, anything else when
+ * its point is inside. No antimeridian handling (the Valley).
+ */
 export function inView(items, bounds) {
-    return items.filter(({ lngLat: [lng, lat] }) => {
-        return lng >= bounds.west && lng <= bounds.east && lat >= bounds.south && lat <= bounds.north;
-    });
+    return items.filter((item) => intersectsBounds(item, bounds));
 }
 /**
  * The item's level, or null for `NO_LEVEL`. A level with an empty color is still shown, by its
@@ -27,6 +29,20 @@ export function inView(items, bounds) {
 export function shownLevel(item) {
     return item.level !== NO_LEVEL ? item.level : null;
 }
+/**
+ * The value as shown, or `null` for none. A category reading, whose value is its level's code
+ * (smoke's "light", the heat score's 2), shows no value: its level label already says it.
+ */
+export function shownValue(item, format) {
+    if (item.value === null)
+        return null;
+    const level = shownLevel(item);
+    if (level && level.value !== null && level.value === item.value)
+        return null;
+    return typeof item.value === "number"
+        ? formatValue(item.value, item.precision, format, item.truncate)
+        : item.value;
+}
 const collator = new Intl.Collator("en-US");
 /** A value's sort weight; `null` sorts last. Category values sort by their level's tier. */
 function weight(item) {
@@ -65,16 +81,35 @@ export function typeaheadIndex(items, query, from) {
     }
     return -1;
 }
-/** A row's accessible name: name, value, units, and level label. */
-export function rowLabel(item, messages, format) {
-    if (item.value === null)
-        return messages("mapsdk_list_row_no_value", { name: item.name });
+/**
+ * What stands in an item's level place: its level's label, else its `detail`, else "No level".
+ */
+export function levelText(item, messages) {
     const level = shownLevel(item);
+    if (level)
+        return { kind: "level", text: level.label };
+    const detail = item.detail?.trim();
+    if (detail)
+        return { kind: "detail", text: detail };
+    return { kind: "none", text: messages("mapsdk_no_level") };
+}
+/** A row's accessible name: name, value, units, and level label (or detail). */
+export function rowLabel(item, messages, format) {
+    const level = levelText(item, messages);
+    const value = shownValue(item, format);
+    if (value === null) {
+        // A category reading: its level is its value.
+        if (item.value !== null && level.kind === "level")
+            return messages("mapsdk_list_row_level", { name: item.name, level: level.text });
+        return level.kind === "detail"
+            ? messages("mapsdk_list_row_detail", { name: item.name, detail: level.text })
+            : messages("mapsdk_list_row_no_value", { name: item.name });
+    }
     const params = {
         name: item.name,
-        value: typeof item.value === "number" ? formatValue(item.value, item.precision, format) : item.value,
+        value,
         units: item.units,
-        level: level ? level.label : messages("mapsdk_no_level")
+        level: level.text
     };
     return messages(item.units ? "mapsdk_list_row" : "mapsdk_list_row_no_units", params);
 }

package/dist/ui/value-format.d.ts

@@ -2,6 +2,7 @@ import type { FormatProvider } from "../data/format.js";
 /**
  * A numeric value with exactly `precision` decimal places, or as `format.number` gives it when
  * there is no precision. Every place that shows a value (list rows, tooltips) goes through this,
- * so they all agree.
+ * so they all agree. With `truncate` the extra decimals are cut off rather than rounded (9.96 at
+ * precision 1 is "9.9"), so the number never reads as the next level up.
  */
-export declare function formatValue(value: number, precision: number | undefined, format: FormatProvider): string;
+export declare function formatValue(value: number, precision: number | undefined, format: FormatProvider, truncate?: boolean): string;

package/dist/ui/value-format.js

@@ -1,11 +1,18 @@
 /**
  * A numeric value with exactly `precision` decimal places, or as `format.number` gives it when
  * there is no precision. Every place that shows a value (list rows, tooltips) goes through this,
- * so they all agree.
+ * so they all agree. With `truncate` the extra decimals are cut off rather than rounded (9.96 at
+ * precision 1 is "9.9"), so the number never reads as the next level up.
  */
-export function formatValue(value, precision, format) {
+export function formatValue(value, precision, format, truncate = false) {
     if (precision === undefined)
         return format.number(value);
+    if (truncate) {
+        const factor = 10 ** precision;
+        // toPrecision drops float noise first (4.35 * 100 is 434.99999999999994); 15 digits keep
+        // any real value from rounding up.
+        value = Math.trunc(Number((value * factor).toPrecision(15))) / factor;
+    }
     return format.number(value, {
         minimumFractionDigits: precision,
         maximumFractionDigits: precision