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

package/dist/ui/MapTooltip.svelte

@@ -0,0 +1,397 @@
+<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;
+		/**
+		 * Canvas pixel for a position, or `null` while there is no GL map. Reactive: it should
+		 * read something that changes when the camera moves, so the tooltip follows the map.
+		 */
+		project: (lngLat: [number, number]) => { x: number; y: number } | null;
+		/** The map container's size; the tooltip stays inside it. Unset: no clamping. */
+		width?: number;
+		height?: number;
+		/**
+		 * `"pinned"` (default) anchors the tooltip to its feature; `"pointer"` shows it at the last
+		 * pointer position and hides it on `gl`'s `zoomstart` until the next pointer move over a
+		 * hit.
+		 * A keyboard-focused list item is always pinned.
+		 */
+		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,
+		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(() => {
+		// 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);
+		g.on("zoomstart", onZoomStart);
+		return () => g.off("zoomstart", onZoomStart);
+	});
+	$effect(() => {
+		// A new hovered object comes with every pointer move over a hit.
+		if (map.hovered) zoomHidden = false;
+	});
+
+	let tipWidth = $state(0);
+	let tipHeight = $state(0);
+	const GAP = 12;
+
+	// 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(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.
+	const found = $derived.by((): { item: FeatureListItem; plugin: MapPlugin } | null => {
+		if (key === null) return null;
+		// The hovered hit's plugin, or the focused one; without either, the first plugin listing the key.
+		const pluginId = hitPluginId ?? map.focusedPluginId;
+		const plugins = pluginId ? map.plugins.filter((p) => p.id === pluginId) : map.plugins;
+		for (const plugin of plugins) {
+			const item = plugin.features?.().find((f) => f.refKey === key);
+			if (item) return { item, plugin };
+		}
+		return null;
+	});
+
+	const item = $derived(found?.item ?? null);
+	const name = $derived(item?.name ?? hitName);
+	// 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).
+	// 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;
+		let { x, y } = projected;
+		if (width)
+			x = Math.min(Math.max(x, tipWidth / 2), Math.max(width - tipWidth / 2, tipWidth / 2));
+		let top = y - tipHeight - GAP;
+		if (top < 0) top = y + GAP;
+		if (height) top = Math.min(top, Math.max(height - tipHeight, 0));
+		return { left: x - tipWidth / 2, top: Math.max(top, 0) };
+	});
+	const custom = $derived.by(() => {
+		if (found) return found.plugin.tooltip?.(found.item);
+		// 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(() => shownHit?.hit);
+		return hit && plugin?.hoverTooltip?.(hit);
+	});
+
+	// The name header is left out when the plugin's own tooltip content shows the name.
+	const showName = $derived.by(() => {
+		if (!name) return false;
+		if (!custom) return true;
+		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 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"
+		bind:offsetWidth={tipWidth}
+		bind:offsetHeight={tipHeight}
+		style:left="{position.left}px"
+		style:top="{position.top}px"
+	>
+		{#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}
+	</div>
+{/if}
+
+<style>
+	.mapsdk-tooltip {
+		position: absolute;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.25rem;
+		max-width: 16rem;
+		box-sizing: border-box;
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--card-border, var(--border));
+		border-radius: var(--radius-control, var(--radius));
+		background: var(--popover, var(--background));
+		color: var(--popover-foreground, var(--foreground));
+		box-shadow: var(--shadow-lifted, var(--shadow-card, none));
+		pointer-events: none;
+	}
+
+	/* The monitor, cluster, and collocation tooltips (today's ~420px cards) mark their content
+	   `mapsdk-tooltip-wide`: wide enough for a reading box and name, never wider than the map. */
+	.mapsdk-tooltip:has(:global(.mapsdk-tooltip-wide)) {
+		width: max-content;
+		max-width: min(28rem, calc(100% - 1rem));
+	}
+
+	.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

@@ -0,0 +1,37 @@
+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;
+    /**
+     * Canvas pixel for a position, or `null` while there is no GL map. Reactive: it should
+     * read something that changes when the camera moves, so the tooltip follows the map.
+     */
+    project: (lngLat: [number, number]) => {
+        x: number;
+        y: number;
+    } | null;
+    /** The map container's size; the tooltip stays inside it. Unset: no clamping. */
+    width?: number;
+    height?: number;
+    /**
+     * `"pinned"` (default) anchors the tooltip to its feature; `"pointer"` shows it at the last
+     * pointer position and hides it on `gl`'s `zoomstart` until the next pointer move over a
+     * hit.
+     * A keyboard-focused list item is always pinned.
+     */
+    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>;
+export default 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/SelectionBar.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import type { MapContext } from "../core/create-map.svelte.js";
+	import "./controls.css";
+
+	interface Props {
+		map: MapContext;
+		/** Leaves room at the right for a top-right List button, as the bar does at the left. */
+		clearRight?: boolean;
+	}
+
+	let { map, clearRight = false }: Props = $props();
+
+	let bar: HTMLElement | undefined = $state();
+
+	// Every id counts, whether or not it is in the data: a host may select features that load later.
+	const entries = $derived(
+		map.plugins.flatMap((plugin) => {
+			const count = map.getSelection(plugin.id)?.ids.length ?? 0;
+			return count > 0 ? [{ id: plugin.id, layer: plugin.label ?? plugin.id, count }] : [];
+		})
+	);
+
+	/**
+	 * Clears one plugin's selection. The button is about to go (or its row is), so focus moves
+	 * first: to another plugin's Clear button, else the List button, else the map region.
+	 */
+	function clear(id: string, button: HTMLElement) {
+		const another = [...(bar?.querySelectorAll<HTMLElement>("button") ?? [])].find(
+			(b) => b !== button
+		);
+		const region = bar?.closest<HTMLElement>("[data-mapsdk-map]");
+		const target = another ?? region?.querySelector<HTMLElement>(".mapsdk-list-button") ?? region;
+		if (target === region && region && !region.hasAttribute("tabindex")) {
+			region.setAttribute("tabindex", "-1");
+		}
+		target?.focus();
+		map.clearSelection(id);
+	}
+</script>
+
+{#if entries.length > 0}
+	<div
+		bind:this={bar}
+		class={["mapsdk-selection text-sm", clearRight && "mapsdk-selection-clear-right"]}
+		role="group"
+		aria-label={map.messages("mapsdk_selection_label")}
+	>
+		{#each entries as entry (entry.id)}
+			{@const selected = map.messages("mapsdk_selected_count", { count: entry.count })}
+			<div class="mapsdk-selection-row">
+				<span>
+					{entries.length > 1
+						? map.messages("mapsdk_selected_in_layer", { layer: entry.layer, selected })
+						: selected}
+				</span>
+				<button
+					type="button"
+					class="mapsdk-focus mapsdk-motion"
+					aria-label={map.messages("mapsdk_selection_clear_layer", { layer: entry.layer })}
+					onclick={(e) => clear(entry.id, e.currentTarget)}
+				>
+					{map.messages("mapsdk_selection_clear")}
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.mapsdk-selection {
+		position: absolute;
+		top: 0.75rem;
+		/* Clear of the List button (left) and the zoom buttons (right); centered between them. */
+		right: 4rem;
+		left: 5rem;
+		z-index: 2;
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		box-sizing: border-box;
+		width: fit-content;
+		margin-inline: auto;
+		padding: 0.375rem 0.5rem 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);
+		pointer-events: auto;
+	}
+
+	.mapsdk-selection-clear-right {
+		right: 5rem;
+	}
+
+	.mapsdk-selection-row {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.25rem 0.75rem;
+	}
+
+	.mapsdk-selection-row span {
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+
+	button {
+		flex: none;
+		padding: 0.25rem 0.625rem;
+		border: 1px solid var(--border);
+		border-radius: var(--radius-control, var(--radius));
+		background: var(--background);
+		color: var(--foreground);
+		font: inherit;
+		cursor: pointer;
+	}
+
+	button:hover {
+		background: var(--accent, var(--muted));
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { MapContext } from "../core/create-map.svelte.js";
+import "./controls.css";
+interface Props {
+    map: MapContext;
+    /** Leaves room at the right for a top-right List button, as the bar does at the left. */
+    clearRight?: boolean;
+}
+declare const SelectionBar: import("svelte").Component<Props, {}, "">;
+type SelectionBar = ReturnType<typeof SelectionBar>;
+export default SelectionBar;

package/dist/ui/TooltipItem.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { FormatProvider } from "../data/format.js";
+	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";
+
+	// 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.
+
+	interface Props {
+		item: FeatureListItem;
+		messages: MessageProvider;
+		format: FormatProvider;
+	}
+
+	let { item, messages, format }: Props = $props();
+
+	// A level with an empty color shows its label on the neutral chip.
+	const level = $derived(item.level !== NO_LEVEL ? item.level : null);
+	// 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}` : "";
+	});
+	// 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">
+	{#if valueText !== null}
+		<div class="mapsdk-tooltip-value">
+			{valueText}{#if item.units}&nbsp;{item.units}{/if}
+		</div>
+	{/if}
+	{#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>
+	.mapsdk-tooltip-item {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.25rem;
+	}
+
+	.mapsdk-tooltip-chip {
+		padding: 0.0625rem 0.5rem;
+		border: var(--swatch-outline-width, 1px) solid
+			var(--swatch-outline-color, color-mix(in srgb, var(--foreground) 75%, var(--background)));
+		border-radius: 999px;
+	}
+
+	.mapsdk-tooltip-chip.neutral {
+		background: var(--muted);
+		color: var(--muted-foreground);
+	}
+</style>