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

package/dist/ui/MapTooltip.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	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";
+
+	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;
+	}
+
+	let { map, project, width, height, mode = "pinned", gl = null }: Props = $props();
+
+	// 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;
+		const onZoomStart = () => (zoomHidden = true);
+		gl.on("zoomstart", onZoomStart);
+		return () => gl.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 over the pointer.
+	const key = $derived(map.focusedKey ?? map.hovered?.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));
+
+	// 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).
+	const anchor = $derived(
+		mode === "pointer" && !map.focusedKey
+			? (map.hovered?.lngLat ?? null)
+			: (item?.lngLat ?? map.hovered?.lngLat ?? null)
+	);
+	const projected = $derived(anchor ? project(anchor) : null);
+	// 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(() => map.hovered?.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;
+	});
+</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)}
+	<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;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import type { MapContext } from "../core/create-map.svelte.js";
+import type { GlMapLike } from "../core/gl.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;
+}
+declare const MapTooltip: import("svelte").Component<Props, {}, "">;
+type MapTooltip = ReturnType<typeof MapTooltip>;
+export default MapTooltip;

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,72 @@
+<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 } 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.
+
+	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}` : "";
+	});
+	const valueText = $derived(
+		item.value == null
+			? null
+			: typeof item.value === "number"
+				? formatValue(item.value, item.precision, format)
+				: item.value
+	);
+</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>

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

@@ -0,0 +1,11 @@
+import type { FormatProvider } from "../data/format.js";
+import type { MessageProvider } from "../data/messages.js";
+import type { FeatureListItem } from "../core/plugin.js";
+interface Props {
+    item: FeatureListItem;
+    messages: MessageProvider;
+    format: FormatProvider;
+}
+declare const TooltipItem: import("svelte").Component<Props, {}, "">;
+type TooltipItem = ReturnType<typeof TooltipItem>;
+export default TooltipItem;

package/dist/ui/ViewSummary.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { untrack } from "svelte";
+	import type { MapContext } from "../core/create-map.svelte.js";
+	import { inView } from "./feature-list.js";
+	import { SUMMARY_DEBOUNCE_MS, summaryText } from "./view-summary.js";
+
+	let { map }: { map: MapContext } = $props();
+
+	interface Line {
+		/** Stable per plugin and kind, so an unchanged line keeps its element and isn't re-announced. */
+		key: string;
+		text: string;
+	}
+
+	// The map's one live region: what is in view per layer, and how many are selected. Spoken text
+	// only; the visible pieces are the legend, the list, and the selection bar. Lines are keyed and
+	// the region is not atomic, so only a line that changed is announced.
+	/** Each plugin's selection count as of the last update, to tell when one drops to zero. */
+	let previous: Record<string, number> = {};
+
+	// Selection counts of every plugin, so a change reschedules the update.
+	const selectionCounts = $derived(
+		map.plugins.map((p) => `${p.id}:${map.getSelection(p.id)?.ids.length ?? 0}`).join(",")
+	);
+
+	function compute(): Line[] {
+		const bounds = map.bounds;
+		const out: Line[] = [];
+		const counts: Record<string, number> = {};
+		for (const plugin of map.plugins) {
+			const layer = plugin.label ?? plugin.id;
+			if (bounds && plugin.features) {
+				const data = plugin.legend?.();
+				const scale = data && "scale" in data ? data.scale : null;
+				out.push({
+					key: `view:${plugin.id}`,
+					text: summaryText(layer, inView(plugin.features(), bounds), scale, map.messages)
+				});
+			}
+			const count = map.getSelection(plugin.id)?.ids.length ?? 0;
+			counts[plugin.id] = count;
+			// A drop to zero is said once; the line is gone at the next update.
+			const selected =
+				count > 0
+					? map.messages("mapsdk_selected_count", { count })
+					: (previous[plugin.id] ?? 0) > 0
+						? map.messages("mapsdk_selection_cleared")
+						: null;
+			if (selected !== null) {
+				out.push({
+					key: `selection:${plugin.id}`,
+					text: map.messages("mapsdk_selected_in_layer", { layer, selected })
+				});
+			}
+		}
+		previous = counts;
+		return out;
+	}
+
+	// What is there at mount (the host's view and selection) is the baseline, not news.
+	let lines = $state<Line[]>(untrack(compute));
+
+	let first = true;
+	$effect(() => {
+		void map.bounds;
+		void selectionCounts;
+		if (first) {
+			first = false;
+			return;
+		}
+		const timer = setTimeout(() => {
+			lines = untrack(compute);
+		}, SUMMARY_DEBOUNCE_MS);
+		return () => clearTimeout(timer);
+	});
+</script>
+
+<div class="mapsdk-summary" aria-live="polite" aria-atomic="false">
+	{#each lines as line (line.key)}
+		<p>{line.text}</p>
+	{/each}
+</div>
+
+<style>
+	.mapsdk-summary {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	p {
+		margin: 0;
+	}
+</style>

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

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

package/dist/ui/controls.css

@@ -0,0 +1,45 @@
+/*
+ * Shared by map-sdk's controls (plain CSS, not scoped: the classes are set by several components).
+ *
+ * Focus ring, only on :focus-visible: a 2px --ring outline with a --ring-edge halo, so the ring
+ * reads against any background. A host without --ring-edge gets the page background.
+ */
+/* Doubled classes raise specificity above any component rule that sets box-shadow (a card
+   shadow, a selected row's ring), so the result never depends on bundle order. */
+.mapsdk-focus.mapsdk-focus:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 1px;
+	box-shadow: 0 0 0 4px var(--ring-edge, var(--background));
+}
+
+/* For controls and rows inside a container that clips: the ring is drawn inside. */
+.mapsdk-focus-inset.mapsdk-focus-inset:focus-visible,
+.mapsdk-focus-inset-active:focus-visible .mapsdk-active-option.mapsdk-active-option {
+	outline: 2px solid var(--ring);
+	outline-offset: -3px;
+	box-shadow: inset 0 0 0 4px var(--ring-edge, var(--background));
+}
+
+/* Elements only script focuses (tabindex="-1"): the outline alone. */
+.mapsdk-focus-outline:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: -2px;
+}
+
+/* Motion goes through the host's tokens; the fallbacks apply when it defines none. */
+.mapsdk-motion {
+	transition-property: background-color, border-color, color, opacity;
+	transition-duration: var(--motion-duration-fast, 120ms);
+	transition-timing-function: var(--motion-ease-standard, ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.mapsdk-motion {
+		transition-duration: 0s;
+	}
+}
+
+/* The engine's credits keep its colors; links get an underline so color isn't the only cue. */
+.mapsdk-map .maplibregl-ctrl-attrib a {
+	text-decoration: underline;
+}

package/dist/ui/data-credits.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { MapContext } from "../core/create-map.svelte.js";
+/**
+ * The credit text of every dataset the map's plugins declare, each once, as it arrives from the
+ * metadata provider. Call during a component's initialization: the fetching runs in an effect
+ * and stops with the component.
+ */
+export declare function createDataCredits(map: MapContext): {
+    readonly list: string[];
+};

package/dist/ui/data-credits.svelte.js

@@ -0,0 +1,52 @@
+/* eslint-disable svelte/prefer-svelte-reactivity -- derived sets only dedupe; never mutated */
+import { onDestroy, untrack } from "svelte";
+/** An unavailable attribution is tried again on a later moveend, at most once a minute. */
+const RETRY_MS = 60_000;
+/**
+ * The credit text of every dataset the map's plugins declare, each once, as it arrives from the
+ * metadata provider. Call during a component's initialization: the fetching runs in an effect
+ * and stops with the component.
+ */
+export function createDataCredits(map) {
+    const datasets = $derived([
+        ...new Set(map.plugins.flatMap((plugin) => (plugin.dataset ? [plugin.dataset] : [])))
+    ]);
+    let fetched = $state.raw({});
+    const list = $derived([...new Set(datasets.flatMap((d) => (fetched[d] ? [fetched[d]] : [])))]);
+    const controller = new AbortController();
+    onDestroy(() => controller.abort());
+    // Plain collections: bookkeeping, never rendered.
+    const inflight = new Set();
+    const failedAt = new Map();
+    $effect(() => {
+        void map.bounds;
+        const wanted = datasets;
+        untrack(() => {
+            for (const dataset of wanted) {
+                if (fetched[dataset] || inflight.has(dataset))
+                    continue;
+                const failed = failedAt.get(dataset);
+                if (failed !== undefined && Date.now() - failed < RETRY_MS)
+                    continue;
+                inflight.add(dataset);
+                map.metadata.attribution(dataset, controller.signal).then((text) => {
+                    inflight.delete(dataset);
+                    if (controller.signal.aborted)
+                        return;
+                    if (text === "unavailable")
+                        failedAt.set(dataset, Date.now());
+                    else
+                        fetched = { ...fetched, [dataset]: text };
+                }, () => {
+                    inflight.delete(dataset);
+                    failedAt.set(dataset, Date.now());
+                });
+            }
+        });
+    });
+    return {
+        get list() {
+            return list;
+        }
+    };
+}

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

@@ -0,0 +1,38 @@
+import type { Bounds } from "../core/create-map.svelte.js";
+import type { FeatureListItem } from "../core/plugin.js";
+import type { FormatProvider } from "../data/format.js";
+import type { MessageProvider } from "../data/messages.js";
+import type { Level } from "../data/scale-types.js";
+export type { Bounds };
+export type SortBy = "name" | "value";
+/**
+ * How long after Shift+F10 or the Menu key the browser's own keyboard `contextmenu` event (sent on
+ * keydown or keyup, depending on the platform) is treated as a duplicate of the one sent to the row.
+ */
+export declare const MENU_EVENT_WINDOW_MS = 1000;
+/**
+ * A valid, stable id fragment for a row, from its plugin and refKey: anything but letters and digits
+ * is escaped as `_<hex>_` (`_` and `-` included), so the `--` between the parts can only be the
+ * 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). */
+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;
+/** 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;
+/**
+ * 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;