@optimum-intelligence/opti-ui 0.6.2 → 0.7.1

package/dist/components/map/Map.js

@@ -0,0 +1,2032 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { seriesColor } from "../../theme/series.js";
+import { EyeIcon, EyeOffIcon } from "../../icons/index.js";
+import { SegmentedControl } from "../toggle/Toggle.js";
+import { useResolvedColors } from "./colors.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { AttributionControl, Layer, Map, Marker, NavigationControl, Popup, Source, useControl } from "@vis.gl/react-maplibre";
+//#region src/components/map/Map.tsx
+/**
+* Loads MapLibre and points it at its worker, once, on the first map mount. The worker source is inlined
+* in `./worker` at library build time and started from a blob URL, so apps need no bundler config (a
+* strict Content-Security-Policy needs `worker-src blob:`). Both are dynamic imports so apps without a
+* mounted map never load them.
+*/
+var mapLib;
+function loadMapLib() {
+	mapLib ??= Promise.all([import("maplibre-gl"), import("./worker.js")]).then(([lib, worker]) => {
+		lib.setWorkerUrl(URL.createObjectURL(new Blob([worker.default], { type: "text/javascript" })));
+		return lib;
+	});
+	return mapLib;
+}
+var defaultLabels = {
+	zoomIn: "Zoom in",
+	zoomOut: "Zoom out",
+	showAll: "Show all",
+	hideAll: "Hide all",
+	show: "Show",
+	hide: "Hide",
+	depot: "Depot",
+	noData: "No data to show",
+	expand: "Expand map",
+	collapse: "Exit expanded map"
+};
+var MapContext = React.createContext(null);
+function useMapContext(part) {
+	const ctx = React.use(MapContext);
+	if (!ctx) throw new Error(`${part} must be used inside Map.Root`);
+	return ctx;
+}
+/**
+* Builds a MapLibre style from a raster tile URL template (`{z}`, `{x}`, `{y}`), for `MapBaseLayer.style`.
+*
+* @example
+* const satellite = rasterStyle('https://tiles.example.com/{z}/{x}/{y}.jpg', '© Example');
+*/
+function rasterStyle(tiles, attribution, tileSize = 256) {
+	return {
+		version: 8,
+		sources: { raster: {
+			type: "raster",
+			tiles: Array.isArray(tiles) ? tiles : [tiles],
+			tileSize,
+			attribution
+		} },
+		layers: [{
+			id: "raster",
+			type: "raster",
+			source: "raster"
+		}]
+	};
+}
+/** True when `coords` nests at least `min` positions and every one is a finite `[lng, lat]`. */
+function hasValidPositions(coords, min) {
+	let count = 0;
+	const check = (value) => {
+		if (!Array.isArray(value) || value.length === 0) return false;
+		if (typeof value[0] !== "object") {
+			count++;
+			return value.length >= 2 && Number.isFinite(value[0]) && Number.isFinite(value[1]);
+		}
+		return value.every(check);
+	};
+	return check(coords) && count >= min;
+}
+/** Grows `bounds` by every `[lng, lat]` pair nested in `coords`. */
+function extend(bounds, coords) {
+	if (!Array.isArray(coords)) return bounds;
+	if (typeof coords[0] === "number") {
+		const [x, y] = coords;
+		return bounds ? [
+			Math.min(bounds[0], x),
+			Math.min(bounds[1], y),
+			Math.max(bounds[2], x),
+			Math.max(bounds[3], y)
+		] : [
+			x,
+			y,
+			x,
+			y
+		];
+	}
+	return coords.reduce(extend, bounds);
+}
+var toneColors = {
+	neutral: {
+		solid: "var(--oui-color-text-muted)",
+		fill: "var(--oui-color-border-subtle)",
+		line: "var(--oui-color-border)"
+	},
+	accent: {
+		solid: "var(--oui-color-accent)",
+		fill: "var(--oui-color-accent-subtle)",
+		line: "var(--oui-color-info-border)"
+	},
+	success: {
+		solid: "var(--oui-color-success)",
+		fill: "var(--oui-color-success-subtle)",
+		line: "var(--oui-color-success-border)"
+	},
+	warning: {
+		solid: "var(--oui-color-warning)",
+		fill: "var(--oui-color-warning-subtle)",
+		line: "var(--oui-color-warning-border)"
+	},
+	danger: {
+		solid: "var(--oui-color-danger)",
+		fill: "var(--oui-color-danger-subtle)",
+		line: "var(--oui-color-danger-border)"
+	}
+};
+var SELECTED = [
+	"boolean",
+	["feature-state", "selected"],
+	false
+];
+var HOVER = [
+	"boolean",
+	["feature-state", "hover"],
+	false
+];
+var ACTIVE = [
+	"any",
+	SELECTED,
+	HOVER
+];
+/** Full opacity for selected or hovered items, `dim` for the rest while anything is selected. */
+var dimmed = (hasSelection, dim) => hasSelection ? [
+	"case",
+	ACTIVE,
+	1,
+	dim
+] : 1;
+/**
+* Shared wiring of the data parts: registers layers and bounds with the root, routes events back,
+* and keeps the `selected` feature state in sync (also after a style switch re-adds the source).
+*/
+function useDataPart(partName, sourceId, options) {
+	const $ = c(36);
+	const ctx = useMapContext(partName);
+	const { items, selectedIds: t0, layerIds, coordinates, minPositions: t1, onItemClick, onItemHover } = options;
+	let t2;
+	if ($[0] !== t0) {
+		t2 = t0 === void 0 ? [] : t0;
+		$[0] = t0;
+		$[1] = t2;
+	} else t2 = $[1];
+	const selectedIds = t2;
+	const minPositions = t1 === void 0 ? 1 : t1;
+	const { register, setHandlers, map } = ctx;
+	const selected = new Set(selectedIds);
+	let t3;
+	if ($[2] !== selectedIds) {
+		t3 = selectedIds.join("\0");
+		$[2] = selectedIds;
+		$[3] = t3;
+	} else t3 = $[3];
+	const selectedKey = t3;
+	let t4;
+	if ($[4] !== coordinates || $[5] !== minPositions) {
+		t4 = (item) => hasValidPositions(coordinates(item), minPositions);
+		$[4] = coordinates;
+		$[5] = minPositions;
+		$[6] = t4;
+	} else t4 = $[6];
+	const valid = new Set(items.filter(t4));
+	const invalidIds = items.filter((item_0) => !valid.has(item_0)).map(_temp).join(", ");
+	let t5;
+	let t6;
+	if ($[7] !== invalidIds || $[8] !== partName) {
+		t5 = () => {
+			if (invalidIds && process.env.NODE_ENV !== "production") console.warn(`${partName}: skipped items with invalid coordinates: ${invalidIds}`);
+		};
+		t6 = [partName, invalidIds];
+		$[7] = invalidIds;
+		$[8] = partName;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+	}
+	React.useEffect(t5, t6);
+	let bounds = null;
+	let selectedBounds = null;
+	for (const item_2 of valid) {
+		bounds = extend(bounds, coordinates(item_2));
+		if (selected.has(item_2.id)) selectedBounds = extend(selectedBounds, coordinates(item_2));
+	}
+	const boundsKey = `${bounds}|${selectedBounds}|${layerIds}`;
+	let t7;
+	if ($[11] !== bounds || $[12] !== layerIds || $[13] !== register || $[14] !== selectedBounds || $[15] !== sourceId) {
+		t7 = () => {
+			register(sourceId, {
+				layerIds,
+				bounds,
+				selectedBounds
+			});
+		};
+		$[11] = bounds;
+		$[12] = layerIds;
+		$[13] = register;
+		$[14] = selectedBounds;
+		$[15] = sourceId;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== boundsKey || $[18] !== register || $[19] !== sourceId) {
+		t8 = [
+			register,
+			sourceId,
+			boundsKey
+		];
+		$[17] = boundsKey;
+		$[18] = register;
+		$[19] = sourceId;
+		$[20] = t8;
+	} else t8 = $[20];
+	React.useEffect(t7, t8);
+	let t10;
+	let t9;
+	if ($[21] !== register || $[22] !== sourceId) {
+		t9 = () => () => register(sourceId, null);
+		t10 = [register, sourceId];
+		$[21] = register;
+		$[22] = sourceId;
+		$[23] = t10;
+		$[24] = t9;
+	} else {
+		t10 = $[23];
+		t9 = $[24];
+	}
+	React.useEffect(t9, t10);
+	let t11;
+	if ($[25] !== items || $[26] !== onItemClick || $[27] !== onItemHover || $[28] !== setHandlers || $[29] !== sourceId) {
+		t11 = () => {
+			const byId = (id) => items.find((item_3) => item_3.id === id);
+			setHandlers(sourceId, {
+				onClick: (id_0, event) => {
+					const item_4 = byId(id_0);
+					if (item_4) onItemClick?.(item_4, event);
+				},
+				onHover: (id_1, event_0) => onItemHover?.(id_1 == null ? null : byId(id_1) ?? null, event_0)
+			});
+		};
+		$[25] = items;
+		$[26] = onItemClick;
+		$[27] = onItemHover;
+		$[28] = setHandlers;
+		$[29] = sourceId;
+		$[30] = t11;
+	} else t11 = $[30];
+	React.useEffect(t11);
+	let t12;
+	let t13;
+	if ($[31] !== setHandlers || $[32] !== sourceId) {
+		t12 = () => () => setHandlers(sourceId, null);
+		t13 = [setHandlers, sourceId];
+		$[31] = setHandlers;
+		$[32] = sourceId;
+		$[33] = t12;
+		$[34] = t13;
+	} else {
+		t12 = $[33];
+		t13 = $[34];
+	}
+	React.useEffect(t12, t13);
+	let t14;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ new Set();
+		$[35] = t14;
+	} else t14 = $[35];
+	const applied = React.useRef(t14);
+	React.useEffect(() => {
+		const instance = map?.getMap();
+		if (!instance) return;
+		const drawn = new Set([...valid].map(_temp2));
+		const target = new Set((selectedKey ? selectedKey.split("\0") : []).filter((id_2) => drawn.has(id_2)));
+		const sync = () => {
+			if (!instance.getSource(sourceId)) return;
+			const prev = applied.current;
+			for (const id_3 of prev) if (!target.has(id_3)) instance.setFeatureState({
+				source: sourceId,
+				id: id_3
+			}, { selected: false });
+			for (const id_4 of target) if (!prev.has(id_4)) instance.setFeatureState({
+				source: sourceId,
+				id: id_4
+			}, { selected: true });
+			applied.current = target;
+		};
+		sync();
+		const onData = (e) => {
+			if (e.sourceId !== sourceId || e.sourceDataType !== "metadata") return;
+			applied.current = /* @__PURE__ */ new Set();
+			sync();
+		};
+		instance.on("sourcedata", onData);
+		return () => {
+			instance.off("sourcedata", onData);
+		};
+	}, [
+		map,
+		sourceId,
+		valid,
+		selectedKey
+	]);
+	return {
+		colors: ctx.colors,
+		hasSelection: selectedIds.length > 0,
+		valid
+	};
+}
+/** A source id that is safe in MapLibre layer ids. */
+function _temp2(item_5) {
+	return item_5.id;
+}
+function _temp(item_1) {
+	return item_1.id;
+}
+function usePartId(prefix) {
+	const $ = c(3);
+	const t0 = React.useId();
+	let t1;
+	if ($[0] !== t0) {
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /[^\w-]/g;
+			$[2] = t2;
+		} else t2 = $[2];
+		t1 = t0.replace(t2, "");
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	return `oui-${prefix}-${t1}`;
+}
+/**
+* A MapLibre map styled and themed with the library tokens. Holds the base layer state and routes clicks
+* and hovers to the data parts inside it. `Map.Root` › data parts (`Map.Areas`, `Map.Routes`,
+* `Map.Points`) and `Map.Marker`s, with `Map.Overlay`s for legends, switches and cards on top.
+* Needs `@optimum-intelligence/opti-ui/map.css` imported. MapLibre's worker is bundled and runs from a blob URL, so a
+* strict Content-Security-Policy needs `worker-src blob:`.
+*
+* @example
+* <Map.Root
+*   baseLayers={[{ id: 'streets', label: 'Streets', style: 'https://tiles.openfreemap.org/styles/bright' }]}
+*   initialView={{ longitude: 19.04, latitude: 47.5, zoom: 10 }}
+* >
+*   <Map.Routes
+*     items={[{ id: 'trip-1', coordinates: [[19.0, 47.48], [19.08, 47.52]] }]}
+*     selectedIds={selected}
+*     onItemClick={(trip) => setSelected([trip.id])}
+*   />
+*   <Map.Marker kind="depot" position={[19.0, 47.48]} />
+* </Map.Root>
+*/
+function MapRoot(t0) {
+	const $ = c(82);
+	let baseLayer;
+	let baseLayers;
+	let children;
+	let className;
+	let defaultBaseLayer;
+	let initialView;
+	let labels;
+	let onBaseLayerChange;
+	let onClick;
+	let onMouseMove;
+	let onMouseOut;
+	let props;
+	let ref;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({ref, baseLayers, baseLayer, defaultBaseLayer, onBaseLayerChange, initialView, fit: t1, labels, controlsPosition: t2, expandable: t3, className, style, children, onClick, onMouseMove, onMouseOut, ...props} = t0);
+		$[0] = t0;
+		$[1] = baseLayer;
+		$[2] = baseLayers;
+		$[3] = children;
+		$[4] = className;
+		$[5] = defaultBaseLayer;
+		$[6] = initialView;
+		$[7] = labels;
+		$[8] = onBaseLayerChange;
+		$[9] = onClick;
+		$[10] = onMouseMove;
+		$[11] = onMouseOut;
+		$[12] = props;
+		$[13] = ref;
+		$[14] = style;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+	} else {
+		baseLayer = $[1];
+		baseLayers = $[2];
+		children = $[3];
+		className = $[4];
+		defaultBaseLayer = $[5];
+		initialView = $[6];
+		labels = $[7];
+		onBaseLayerChange = $[8];
+		onClick = $[9];
+		onMouseMove = $[10];
+		onMouseOut = $[11];
+		props = $[12];
+		ref = $[13];
+		style = $[14];
+		t1 = $[15];
+		t2 = $[16];
+		t3 = $[17];
+	}
+	const fit = t1 === void 0 ? "data" : t1;
+	const controlsPosition = t2 === void 0 ? "top-right" : t2;
+	const expandable = t3 === void 0 ? false : t3;
+	const [element, setElement] = React.useState(null);
+	const [map, setMap] = React.useState(null);
+	let t4;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {};
+		$[18] = t4;
+	} else t4 = $[18];
+	const [parts, setParts] = React.useState(t4);
+	const [internalLayer, setInternalLayer] = React.useState(defaultBaseLayer ?? baseLayers[0]?.id ?? "");
+	const [cursor, setCursor] = React.useState("");
+	const [expanded, setExpanded] = React.useState(false);
+	let t5;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = {};
+		$[19] = t5;
+	} else t5 = $[19];
+	const handlers = React.useRef(t5);
+	const hovered = React.useRef(null);
+	const colors = useResolvedColors(element);
+	let t6;
+	if ($[20] !== labels) {
+		t6 = {
+			...defaultLabels,
+			...labels
+		};
+		$[20] = labels;
+		$[21] = t6;
+	} else t6 = $[21];
+	const text = t6;
+	const currentId = baseLayer ?? internalLayer;
+	let t7;
+	if ($[22] !== baseLayers || $[23] !== currentId) {
+		t7 = baseLayers.find((l) => l.id === currentId) ?? baseLayers[0];
+		$[22] = baseLayers;
+		$[23] = currentId;
+		$[24] = t7;
+	} else t7 = $[24];
+	const current = t7;
+	const mapStyle = colors.dark && current?.darkStyle ? current.darkStyle : current?.style;
+	let t8;
+	if ($[25] !== onBaseLayerChange) {
+		t8 = (id) => {
+			setInternalLayer(id);
+			onBaseLayerChange?.(id);
+		};
+		$[25] = onBaseLayerChange;
+		$[26] = t8;
+	} else t8 = $[26];
+	const setBaseLayer = t8;
+	let t9;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = (partId, part) => {
+			setParts((prev) => {
+				const next = { ...prev };
+				if (part) next[partId] = part;
+				else delete next[partId];
+				return next;
+			});
+		};
+		$[27] = t9;
+	} else t9 = $[27];
+	const register = t9;
+	let t10;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = (partId_0, value) => {
+			if (value) handlers.current[partId_0] = value;
+			else delete handlers.current[partId_0];
+		};
+		$[28] = t10;
+	} else t10 = $[28];
+	const setHandlers = t10;
+	let dataKey;
+	let empty;
+	let interactiveLayerIds;
+	let ownerOf;
+	let t11;
+	if ($[29] !== fit || $[30] !== parts) {
+		const entries = Object.entries(parts);
+		interactiveLayerIds = entries.flatMap(_temp3);
+		ownerOf = (layerId) => entries.find((t12) => {
+			const [, part_1] = t12;
+			return part_1.layerIds.includes(layerId);
+		})?.[0];
+		empty = entries.length > 0 && entries.every(_temp4);
+		const corners = _temp5;
+		const boundsKey = _temp7;
+		dataKey = fit === "none" ? "" : boundsKey(extend(null, entries.map((t13) => {
+			const [, part_3] = t13;
+			return corners(part_3.bounds);
+		})));
+		t11 = fit === "selected" ? boundsKey(extend(null, entries.map((t14) => {
+			const [, part_4] = t14;
+			return corners(part_4.selectedBounds);
+		}))) : "";
+		$[29] = fit;
+		$[30] = parts;
+		$[31] = dataKey;
+		$[32] = empty;
+		$[33] = interactiveLayerIds;
+		$[34] = ownerOf;
+		$[35] = t11;
+	} else {
+		dataKey = $[31];
+		empty = $[32];
+		interactiveLayerIds = $[33];
+		ownerOf = $[34];
+		t11 = $[35];
+	}
+	const selectionKey = t11;
+	const userMoved = React.useRef(false);
+	let t12;
+	let t13;
+	if ($[36] !== map) {
+		t12 = () => {
+			const instance = map?.getMap();
+			if (!instance) return;
+			const onMoveStart = (event) => {
+				if (event.originalEvent) userMoved.current = true;
+			};
+			instance.on("movestart", onMoveStart);
+			return () => {
+				instance.off("movestart", onMoveStart);
+			};
+		};
+		t13 = [map];
+		$[36] = map;
+		$[37] = t12;
+		$[38] = t13;
+	} else {
+		t12 = $[37];
+		t13 = $[38];
+	}
+	React.useEffect(t12, t13);
+	let t14;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = {
+			data: "",
+			selection: ""
+		};
+		$[39] = t14;
+	} else t14 = $[39];
+	const fitted = React.useRef(t14);
+	let t15;
+	let t16;
+	if ($[40] !== dataKey || $[41] !== map || $[42] !== selectionKey) {
+		t15 = () => {
+			if (!map) return;
+			const prev_0 = fitted.current;
+			fitted.current = {
+				data: dataKey,
+				selection: selectionKey
+			};
+			const selectionChanged = selectionKey !== prev_0.selection;
+			const dataChanged = dataKey !== prev_0.data && !userMoved.current;
+			const key = selectionKey || dataKey;
+			if (!key || !(selectionChanged || dataChanged)) return;
+			const [w, s, e, n_0] = key.split(",").map(Number);
+			map.fitBounds([[w, s], [e, n_0]], {
+				padding: 48,
+				maxZoom: 15,
+				duration: 400
+			});
+		};
+		t16 = [
+			map,
+			dataKey,
+			selectionKey
+		];
+		$[40] = dataKey;
+		$[41] = map;
+		$[42] = selectionKey;
+		$[43] = t15;
+		$[44] = t16;
+	} else {
+		t15 = $[43];
+		t16 = $[44];
+	}
+	React.useEffect(t15, t16);
+	let t17;
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = (next_0, event_0) => {
+			const prev_1 = hovered.current;
+			const key_0 = _temp8;
+			if (key_0(prev_1) === key_0(next_0)) return;
+			const instance_0 = event_0.target;
+			if (prev_1) {
+				if (instance_0.getSource(prev_1.source)) instance_0.setFeatureState(prev_1, { hover: false });
+				handlers.current[prev_1.source]?.onHover?.(null, event_0);
+			}
+			if (next_0) {
+				instance_0.setFeatureState(next_0, { hover: true });
+				handlers.current[next_0.source]?.onHover?.(String(next_0.id), event_0);
+			}
+			hovered.current = next_0;
+			setCursor(next_0 ? "pointer" : "");
+		};
+		$[45] = t17;
+	} else t17 = $[45];
+	const setHover = t17;
+	let t18;
+	let t19;
+	if ($[46] !== expanded) {
+		t18 = () => {
+			if (!expanded) return;
+			const onKeyDown = (event_1) => {
+				if (event_1.key === "Escape" && !event_1.defaultPrevented) setExpanded(false);
+			};
+			document.addEventListener("keydown", onKeyDown);
+			return () => document.removeEventListener("keydown", onKeyDown);
+		};
+		t19 = [expanded];
+		$[46] = expanded;
+		$[47] = t18;
+		$[48] = t19;
+	} else {
+		t18 = $[47];
+		t19 = $[48];
+	}
+	React.useEffect(t18, t19);
+	let t20;
+	if ($[49] !== initialView) {
+		t20 = initialView && "bounds" in initialView ? {
+			bounds: initialView.bounds,
+			fitBoundsOptions: { padding: 48 }
+		} : initialView;
+		$[49] = initialView;
+		$[50] = t20;
+	} else t20 = $[50];
+	const initialViewState = t20;
+	let t21;
+	if ($[51] !== className) {
+		t21 = cx("oui-map", className);
+		$[51] = className;
+		$[52] = t21;
+	} else t21 = $[52];
+	const t22 = expanded || void 0;
+	let t23;
+	if ($[53] !== baseLayers || $[54] !== children || $[55] !== colors || $[56] !== controlsPosition || $[57] !== current?.attribution || $[58] !== current?.id || $[59] !== cursor || $[60] !== element || $[61] !== empty || $[62] !== expandable || $[63] !== expanded || $[64] !== initialViewState || $[65] !== interactiveLayerIds || $[66] !== map || $[67] !== mapStyle || $[68] !== onClick || $[69] !== onMouseMove || $[70] !== onMouseOut || $[71] !== ownerOf || $[72] !== props || $[73] !== ref || $[74] !== setBaseLayer || $[75] !== text) {
+		t23 = element && /* @__PURE__ */ jsx(Map, {
+			...props,
+			mapLib: loadMapLib(),
+			ref: (instance_1) => {
+				setMap(instance_1);
+				if (typeof ref === "function") ref(instance_1);
+				else if (ref) ref.current = instance_1;
+			},
+			mapStyle,
+			initialViewState,
+			interactiveLayerIds,
+			cursor,
+			attributionControl: false,
+			locale: {
+				"NavigationControl.ZoomIn": text.zoomIn,
+				"NavigationControl.ZoomOut": text.zoomOut
+			},
+			onClick: (event_2) => {
+				const feature = event_2.features?.[0];
+				const owner = feature && ownerOf(feature.layer.id);
+				if (feature && owner && feature.id != null) handlers.current[owner]?.onClick?.(String(feature.id), event_2);
+				onClick?.(event_2);
+			},
+			onMouseMove: (event_3) => {
+				const feature_0 = event_3.features?.[0];
+				const owner_0 = feature_0 && ownerOf(feature_0.layer.id);
+				setHover(feature_0 && owner_0 && feature_0.id != null ? {
+					source: owner_0,
+					id: feature_0.id
+				} : null, event_3);
+				onMouseMove?.(event_3);
+			},
+			onMouseOut: (event_4) => {
+				setHover(null, event_4);
+				onMouseOut?.(event_4);
+			},
+			children: /* @__PURE__ */ jsxs(MapContext, {
+				value: {
+					map,
+					colors,
+					labels: text,
+					baseLayers,
+					baseLayer: current?.id ?? "",
+					setBaseLayer,
+					register,
+					setHandlers
+				},
+				children: [
+					controlsPosition && /* @__PURE__ */ jsx(NavigationControl, {
+						position: controlsPosition,
+						showCompass: false
+					}),
+					expandable && /* @__PURE__ */ jsx(ExpandControl, {
+						position: controlsPosition || "top-right",
+						expanded,
+						label: expanded ? text.collapse : text.expand,
+						onToggle: () => setExpanded(_temp9)
+					}),
+					/* @__PURE__ */ jsx(AttributionControl, {
+						compact: true,
+						customAttribution: current?.attribution
+					}, current?.id),
+					children,
+					empty && /* @__PURE__ */ jsx("div", {
+						className: "oui-map__empty",
+						children: text.noData
+					})
+				]
+			})
+		});
+		$[53] = baseLayers;
+		$[54] = children;
+		$[55] = colors;
+		$[56] = controlsPosition;
+		$[57] = current?.attribution;
+		$[58] = current?.id;
+		$[59] = cursor;
+		$[60] = element;
+		$[61] = empty;
+		$[62] = expandable;
+		$[63] = expanded;
+		$[64] = initialViewState;
+		$[65] = interactiveLayerIds;
+		$[66] = map;
+		$[67] = mapStyle;
+		$[68] = onClick;
+		$[69] = onMouseMove;
+		$[70] = onMouseOut;
+		$[71] = ownerOf;
+		$[72] = props;
+		$[73] = ref;
+		$[74] = setBaseLayer;
+		$[75] = text;
+		$[76] = t23;
+	} else t23 = $[76];
+	let t24;
+	if ($[77] !== style || $[78] !== t21 || $[79] !== t22 || $[80] !== t23) {
+		t24 = /* @__PURE__ */ jsx("div", {
+			ref: setElement,
+			className: t21,
+			style,
+			"data-expanded": t22,
+			children: t23
+		});
+		$[77] = style;
+		$[78] = t21;
+		$[79] = t22;
+		$[80] = t23;
+		$[81] = t24;
+	} else t24 = $[81];
+	return t24;
+}
+/** The expand button as a MapLibre control, so it stacks with the zoom buttons in the same corner. */
+function _temp9(value_0) {
+	return !value_0;
+}
+function _temp8(h) {
+	return h ? `${h.source}|${h.id}` : "";
+}
+function _temp7(b_0) {
+	return b_0?.map(_temp6).join(",") ?? "";
+}
+function _temp6(n) {
+	return n.toFixed(5);
+}
+function _temp5(b) {
+	return b && [b.slice(0, 2), b.slice(2)];
+}
+function _temp4(t0) {
+	const [, part_2] = t0;
+	return !part_2.bounds;
+}
+function _temp3(t0) {
+	const [, part_0] = t0;
+	return part_0.layerIds;
+}
+function ExpandControl(t0) {
+	const $ = c(12);
+	const { position, expanded, label, onToggle } = t0;
+	const [host] = React.useState(_temp0);
+	let t1;
+	if ($[0] !== host) {
+		t1 = () => ({
+			onAdd: () => host,
+			onRemove: () => host.remove()
+		});
+		$[0] = host;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== position) {
+		t2 = { position };
+		$[2] = position;
+		$[3] = t2;
+	} else t2 = $[3];
+	useControl(t1, t2);
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: "maplibregl-ctrl-icon",
+			"aria-hidden": "true"
+		});
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== expanded || $[6] !== label || $[7] !== onToggle) {
+		t4 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "oui-map__expand",
+			"aria-label": label,
+			title: label,
+			"aria-pressed": expanded,
+			onClick: onToggle,
+			children: t3
+		});
+		$[5] = expanded;
+		$[6] = label;
+		$[7] = onToggle;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== host || $[10] !== t4) {
+		t5 = createPortal(t4, host);
+		$[9] = host;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function _temp0() {
+	const element = document.createElement("div");
+	element.className = "maplibregl-ctrl maplibregl-ctrl-group";
+	return element;
+}
+/**
+* Lines such as trips or tracks, drawn as one source with a casing, a solid and a dashed layer. Selected
+* routes get a halo in the surface colour; hover and selection use feature state, so they never rebuild
+* the data. Colours come from `color` or the chart palette.
+*
+* @example
+* <Map.Routes
+*   items={trips.map((t) => ({ id: t.id, coordinates: t.path, dashed: t.planned }))}
+*   selectedIds={selected}
+*   onItemClick={(trip) => setSelected([trip.id])}
+* />
+*/
+function MapRoutes(t0) {
+	const $ = c(68);
+	const { items, selectedIds, onItemClick, onItemHover } = t0;
+	const sourceId = usePartId("routes");
+	const t1 = `${sourceId}-casing`;
+	const t2 = `${sourceId}-solid`;
+	const t3 = `${sourceId}-dashed`;
+	let t4;
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3) {
+		t4 = {
+			casing: t1,
+			solid: t2,
+			dashed: t3
+		};
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	const ids = t4;
+	let t5;
+	if ($[4] !== ids.dashed || $[5] !== ids.solid) {
+		t5 = [ids.solid, ids.dashed];
+		$[4] = ids.dashed;
+		$[5] = ids.solid;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== items || $[8] !== onItemClick || $[9] !== onItemHover || $[10] !== selectedIds || $[11] !== t5) {
+		t6 = {
+			items,
+			selectedIds,
+			layerIds: t5,
+			coordinates: _temp1,
+			minPositions: 2,
+			onItemClick,
+			onItemHover
+		};
+		$[7] = items;
+		$[8] = onItemClick;
+		$[9] = onItemHover;
+		$[10] = selectedIds;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	const { colors, hasSelection, valid } = useDataPart("Map.Routes", sourceId, t6);
+	let t7;
+	if ($[13] !== colors || $[14] !== items || $[15] !== valid) {
+		let t8;
+		if ($[17] !== colors || $[18] !== valid) {
+			t8 = (item_0, index) => valid.has(item_0) ? [{
+				type: "Feature",
+				properties: {
+					id: item_0.id,
+					dashed: !!item_0.dashed,
+					color: colors.color(item_0.color ?? seriesColor(item_0.colorIndex ?? index))
+				},
+				geometry: {
+					type: "LineString",
+					coordinates: item_0.coordinates
+				}
+			}] : [];
+			$[17] = colors;
+			$[18] = valid;
+			$[19] = t8;
+		} else t8 = $[19];
+		t7 = items.flatMap(t8);
+		$[13] = colors;
+		$[14] = items;
+		$[15] = valid;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[20] !== t7) {
+		t8 = {
+			type: "FeatureCollection",
+			features: t7
+		};
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	const data = t8;
+	const weight = colors.number("--oui-map-route-weight", 4);
+	let t9;
+	let width;
+	if ($[22] !== colors || $[23] !== hasSelection || $[24] !== weight) {
+		const dim = colors.number("--oui-map-dim-opacity", .35);
+		const t10 = weight + 1.5;
+		let t11;
+		if ($[27] !== t10 || $[28] !== weight) {
+			t11 = [
+				"case",
+				HOVER,
+				t10,
+				weight
+			];
+			$[27] = t10;
+			$[28] = weight;
+			$[29] = t11;
+		} else t11 = $[29];
+		width = t11;
+		t9 = dimmed(hasSelection, dim);
+		$[22] = colors;
+		$[23] = hasSelection;
+		$[24] = weight;
+		$[25] = t9;
+		$[26] = width;
+	} else {
+		t9 = $[25];
+		width = $[26];
+	}
+	const opacity = t9;
+	let t10;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = {
+			"line-join": "round",
+			"line-cap": "round"
+		};
+		$[30] = t10;
+	} else t10 = $[30];
+	const layout = t10;
+	const t11 = ids.casing;
+	let t12;
+	if ($[31] !== colors) {
+		t12 = colors.color("var(--oui-map-casing-color)");
+		$[31] = colors;
+		$[32] = t12;
+	} else t12 = $[32];
+	const t13 = weight + 4;
+	let t14;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = [
+			"case",
+			SELECTED,
+			1,
+			0
+		];
+		$[33] = t14;
+	} else t14 = $[33];
+	let t15;
+	if ($[34] !== t12 || $[35] !== t13) {
+		t15 = {
+			"line-color": t12,
+			"line-width": t13,
+			"line-opacity": t14
+		};
+		$[34] = t12;
+		$[35] = t13;
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== ids.casing || $[38] !== t15) {
+		t16 = {
+			id: t11,
+			type: "line",
+			layout,
+			paint: t15
+		};
+		$[37] = ids.casing;
+		$[38] = t15;
+		$[39] = t16;
+	} else t16 = $[39];
+	let t17;
+	if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = [
+			"!=",
+			["get", "dashed"],
+			true
+		];
+		$[40] = t17;
+	} else t17 = $[40];
+	let t18;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = ["get", "color"];
+		$[41] = t18;
+	} else t18 = $[41];
+	let t19;
+	if ($[42] !== opacity || $[43] !== width) {
+		t19 = {
+			"line-color": t18,
+			"line-width": width,
+			"line-opacity": opacity
+		};
+		$[42] = opacity;
+		$[43] = width;
+		$[44] = t19;
+	} else t19 = $[44];
+	let t20;
+	if ($[45] !== ids.solid || $[46] !== t19) {
+		t20 = {
+			id: ids.solid,
+			type: "line",
+			filter: t17,
+			layout,
+			paint: t19
+		};
+		$[45] = ids.solid;
+		$[46] = t19;
+		$[47] = t20;
+	} else t20 = $[47];
+	let t21;
+	let t22;
+	let t23;
+	if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+		t21 = [
+			"==",
+			["get", "dashed"],
+			true
+		];
+		t22 = {
+			"line-join": "round",
+			"line-cap": "butt"
+		};
+		t23 = ["get", "color"];
+		$[48] = t21;
+		$[49] = t22;
+		$[50] = t23;
+	} else {
+		t21 = $[48];
+		t22 = $[49];
+		t23 = $[50];
+	}
+	let t24;
+	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = [2, 1.5];
+		$[51] = t24;
+	} else t24 = $[51];
+	let t25;
+	if ($[52] !== opacity || $[53] !== width) {
+		t25 = {
+			"line-color": t23,
+			"line-width": width,
+			"line-opacity": opacity,
+			"line-dasharray": t24
+		};
+		$[52] = opacity;
+		$[53] = width;
+		$[54] = t25;
+	} else t25 = $[54];
+	let t26;
+	if ($[55] !== ids.dashed || $[56] !== t25) {
+		t26 = {
+			id: ids.dashed,
+			type: "line",
+			filter: t21,
+			layout: t22,
+			paint: t25
+		};
+		$[55] = ids.dashed;
+		$[56] = t25;
+		$[57] = t26;
+	} else t26 = $[57];
+	let t27;
+	if ($[58] !== t16 || $[59] !== t20 || $[60] !== t26) {
+		t27 = [
+			t16,
+			t20,
+			t26
+		];
+		$[58] = t16;
+		$[59] = t20;
+		$[60] = t26;
+		$[61] = t27;
+	} else t27 = $[61];
+	const layers = t27;
+	let t28;
+	if ($[62] !== layers) {
+		t28 = layers.map(_temp10);
+		$[62] = layers;
+		$[63] = t28;
+	} else t28 = $[63];
+	let t29;
+	if ($[64] !== data || $[65] !== sourceId || $[66] !== t28) {
+		t29 = /* @__PURE__ */ jsx(Source, {
+			id: sourceId,
+			type: "geojson",
+			data,
+			promoteId: "id",
+			children: t28
+		});
+		$[64] = data;
+		$[65] = sourceId;
+		$[66] = t28;
+		$[67] = t29;
+	} else t29 = $[67];
+	return t29;
+}
+function _temp10(layer) {
+	return /* @__PURE__ */ jsx(Layer, { ...layer }, layer.id);
+}
+function _temp1(item) {
+	return item.coordinates;
+}
+/**
+* Polygons such as fields, zones or service areas, as one fill and one outline layer. Selected and
+* hovered areas get a heavier outline.
+*
+* @example
+* <Map.Areas items={fields.map((f) => ({ id: f.id, geometry: f.shape, tone: f.late ? 'warning' : 'success' }))} />
+*/
+function MapAreas(t0) {
+	const $ = c(38);
+	const { items, selectedIds, onItemClick, onItemHover } = t0;
+	const sourceId = usePartId("areas");
+	const t1 = `${sourceId}-fill`;
+	const t2 = `${sourceId}-line`;
+	let t3;
+	if ($[0] !== t1 || $[1] !== t2) {
+		t3 = {
+			fill: t1,
+			line: t2
+		};
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+	} else t3 = $[2];
+	const ids = t3;
+	let t4;
+	if ($[3] !== ids.fill) {
+		t4 = [ids.fill];
+		$[3] = ids.fill;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== items || $[6] !== onItemClick || $[7] !== onItemHover || $[8] !== selectedIds || $[9] !== t4) {
+		t5 = {
+			items,
+			selectedIds,
+			layerIds: t4,
+			coordinates: _temp11,
+			onItemClick,
+			onItemHover
+		};
+		$[5] = items;
+		$[6] = onItemClick;
+		$[7] = onItemHover;
+		$[8] = selectedIds;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	const { colors, hasSelection, valid } = useDataPart("Map.Areas", sourceId, t5);
+	let t6;
+	if ($[11] !== valid) {
+		t6 = [...valid];
+		$[11] = valid;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== colors || $[14] !== t6) {
+		t7 = {
+			type: "FeatureCollection",
+			features: t6.map((item_0) => {
+				const tone = toneColors[item_0.tone ?? "neutral"];
+				return {
+					type: "Feature",
+					properties: {
+						id: item_0.id,
+						fill: colors.color(tone.fill),
+						line: colors.color(tone.line)
+					},
+					geometry: item_0.geometry
+				};
+			})
+		};
+		$[13] = colors;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	const data = t7;
+	let t8;
+	if ($[16] !== colors || $[17] !== hasSelection) {
+		t8 = dimmed(hasSelection, colors.number("--oui-map-dim-opacity", .35));
+		$[16] = colors;
+		$[17] = hasSelection;
+		$[18] = t8;
+	} else t8 = $[18];
+	const opacity = t8;
+	let t9;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = ["get", "fill"];
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== opacity) {
+		t10 = {
+			"fill-color": t9,
+			"fill-opacity": opacity
+		};
+		$[20] = opacity;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== ids.fill || $[23] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Layer, {
+			id: ids.fill,
+			type: "fill",
+			paint: t10
+		});
+		$[22] = ids.fill;
+		$[23] = t10;
+		$[24] = t11;
+	} else t11 = $[24];
+	let t12;
+	let t13;
+	let t14;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = { "line-join": "round" };
+		t13 = ["get", "line"];
+		t14 = [
+			"case",
+			ACTIVE,
+			2.5,
+			1.25
+		];
+		$[25] = t12;
+		$[26] = t13;
+		$[27] = t14;
+	} else {
+		t12 = $[25];
+		t13 = $[26];
+		t14 = $[27];
+	}
+	let t15;
+	if ($[28] !== opacity) {
+		t15 = {
+			"line-color": t13,
+			"line-width": t14,
+			"line-opacity": opacity
+		};
+		$[28] = opacity;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== ids.line || $[31] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Layer, {
+			id: ids.line,
+			type: "line",
+			layout: t12,
+			paint: t15
+		});
+		$[30] = ids.line;
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== data || $[34] !== sourceId || $[35] !== t11 || $[36] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Source, {
+			id: sourceId,
+			type: "geojson",
+			data,
+			promoteId: "id",
+			children: [t11, t16]
+		});
+		$[33] = data;
+		$[34] = sourceId;
+		$[35] = t11;
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	return t17;
+}
+function _temp11(item) {
+	return item.geometry.coordinates;
+}
+/**
+* Many simple points (sensors, stops, events) as one circle layer. For a few dozen styled pins with HTML
+* content, use `Map.Marker` instead.
+*
+* @example
+* <Map.Points items={sensors.map((s) => ({ id: s.id, coordinates: s.position, tone: s.ok ? 'success' : 'danger' }))} />
+*/
+function MapPoints(t0) {
+	const $ = c(34);
+	const { items, selectedIds, onItemClick, onItemHover } = t0;
+	const sourceId = usePartId("points");
+	const circleId = `${sourceId}-circle`;
+	let t1;
+	if ($[0] !== circleId) {
+		t1 = [circleId];
+		$[0] = circleId;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== items || $[3] !== onItemClick || $[4] !== onItemHover || $[5] !== selectedIds || $[6] !== t1) {
+		t2 = {
+			items,
+			selectedIds,
+			layerIds: t1,
+			coordinates: _temp12,
+			onItemClick,
+			onItemHover
+		};
+		$[2] = items;
+		$[3] = onItemClick;
+		$[4] = onItemHover;
+		$[5] = selectedIds;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	const { colors, hasSelection, valid } = useDataPart("Map.Points", sourceId, t2);
+	let t3;
+	if ($[8] !== colors || $[9] !== items || $[10] !== valid) {
+		let t4;
+		if ($[12] !== colors || $[13] !== valid) {
+			t4 = (item_0, index) => valid.has(item_0) ? [{
+				type: "Feature",
+				properties: {
+					id: item_0.id,
+					color: colors.color(item_0.color ?? (item_0.tone ? toneColors[item_0.tone].solid : seriesColor(item_0.colorIndex ?? index)))
+				},
+				geometry: {
+					type: "Point",
+					coordinates: item_0.coordinates
+				}
+			}] : [];
+			$[12] = colors;
+			$[13] = valid;
+			$[14] = t4;
+		} else t4 = $[14];
+		t3 = items.flatMap(t4);
+		$[8] = colors;
+		$[9] = items;
+		$[10] = valid;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[15] !== t3) {
+		t4 = {
+			type: "FeatureCollection",
+			features: t3
+		};
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	const data = t4;
+	let t5;
+	if ($[17] !== colors || $[18] !== hasSelection) {
+		t5 = dimmed(hasSelection, colors.number("--oui-map-dim-opacity", .35));
+		$[17] = colors;
+		$[18] = hasSelection;
+		$[19] = t5;
+	} else t5 = $[19];
+	const opacity = t5;
+	let t6;
+	let t7;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = ["get", "color"];
+		t7 = [
+			"case",
+			ACTIVE,
+			7,
+			5
+		];
+		$[20] = t6;
+		$[21] = t7;
+	} else {
+		t6 = $[20];
+		t7 = $[21];
+	}
+	let t8;
+	if ($[22] !== colors) {
+		t8 = colors.color("var(--oui-map-casing-color)");
+		$[22] = colors;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] !== opacity || $[25] !== t8) {
+		t9 = {
+			"circle-color": t6,
+			"circle-radius": t7,
+			"circle-stroke-color": t8,
+			"circle-stroke-width": 1.5,
+			"circle-opacity": opacity,
+			"circle-stroke-opacity": opacity
+		};
+		$[24] = opacity;
+		$[25] = t8;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== circleId || $[28] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Layer, {
+			id: circleId,
+			type: "circle",
+			paint: t9
+		});
+		$[27] = circleId;
+		$[28] = t9;
+		$[29] = t10;
+	} else t10 = $[29];
+	let t11;
+	if ($[30] !== data || $[31] !== sourceId || $[32] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Source, {
+			id: sourceId,
+			type: "geojson",
+			data,
+			promoteId: "id",
+			children: t10
+		});
+		$[30] = data;
+		$[31] = sourceId;
+		$[32] = t10;
+		$[33] = t11;
+	} else t11 = $[33];
+	return t11;
+}
+function _temp12(item) {
+	return item.coordinates;
+}
+/**
+* An HTML pin at one position: numbered stops, depots, vehicles. Each marker is a DOM element, so use it
+* for dozens of pins, not thousands (use `Map.Points` for those).
+*
+* @example
+* <Map.Marker kind="stop" sequence={3} position={[19.05, 47.5]} color={seriesColor(0)} />
+*/
+function MapMarker(t0) {
+	const $ = c(25);
+	const { position, kind: t1, sequence, color, tone, label, selected, dimmed, onClick, children, className } = t0;
+	const kind = t1 === void 0 ? "stop" : t1;
+	const { labels } = useMapContext("Map.Marker");
+	const name = label ?? (kind === "depot" ? labels.depot : void 0);
+	const pinColor = color ?? (tone ? toneColors[tone].solid : void 0);
+	const t2 = position[0];
+	const t3 = position[1];
+	let t4;
+	if ($[0] !== onClick) {
+		t4 = (event) => {
+			event.originalEvent.stopPropagation();
+			onClick?.();
+		};
+		$[0] = onClick;
+		$[1] = t4;
+	} else t4 = $[1];
+	let t5;
+	if ($[2] !== className) {
+		t5 = cx("oui-map__marker", className);
+		$[2] = className;
+		$[3] = t5;
+	} else t5 = $[3];
+	const t6 = selected || void 0;
+	const t7 = dimmed || void 0;
+	const t8 = onClick ? "" : void 0;
+	const t9 = name ? "img" : void 0;
+	let t10;
+	if ($[4] !== pinColor) {
+		t10 = pinColor ? { "--_pin-color": pinColor } : void 0;
+		$[4] = pinColor;
+		$[5] = t10;
+	} else t10 = $[5];
+	let t11;
+	if ($[6] !== children || $[7] !== kind || $[8] !== sequence) {
+		t11 = children ?? (kind === "stop" && sequence != null ? sequence : kind === "depot" ? /* @__PURE__ */ jsx(DepotGlyph, {}) : null);
+		$[6] = children;
+		$[7] = kind;
+		$[8] = sequence;
+		$[9] = t11;
+	} else t11 = $[9];
+	let t12;
+	if ($[10] !== kind || $[11] !== name || $[12] !== t10 || $[13] !== t11 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
+		t12 = /* @__PURE__ */ jsx("div", {
+			className: t5,
+			"data-kind": kind,
+			"data-selected": t6,
+			"data-dimmed": t7,
+			"data-interactive": t8,
+			role: t9,
+			"aria-label": name,
+			title: name,
+			style: t10,
+			children: t11
+		});
+		$[10] = kind;
+		$[11] = name;
+		$[12] = t10;
+		$[13] = t11;
+		$[14] = t5;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[20] !== position[0] || $[21] !== position[1] || $[22] !== t12 || $[23] !== t4) {
+		t13 = /* @__PURE__ */ jsx(Marker, {
+			longitude: t2,
+			latitude: t3,
+			anchor: "center",
+			onClick: t4,
+			children: t12
+		});
+		$[20] = position[0];
+		$[21] = position[1];
+		$[22] = t12;
+		$[23] = t4;
+		$[24] = t13;
+	} else t13 = $[24];
+	return t13;
+}
+function DepotGlyph() {
+	const $ = c(1);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 24 24",
+			width: "1em",
+			height: "1em",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2.2,
+			"aria-hidden": true,
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M3 10.5 12 4l9 6.5V20H3z",
+				strokeLinejoin: "round"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M9 20v-6h6v6",
+				strokeLinejoin: "round"
+			})]
+		});
+		$[0] = t0;
+	} else t0 = $[0];
+	return t0;
+}
+/**
+* A popup anchored to a position, styled as a library card. Render it while something is selected and
+* close it from `onClose`.
+*
+* @example
+* {picked && (
+*   <Map.Popup position={picked.position} onClose={() => setPicked(null)}>
+*     <strong>{picked.name}</strong>
+*   </Map.Popup>
+* )}
+*/
+function MapPopup(t0) {
+	const $ = c(15);
+	let className;
+	let position;
+	let props;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({position, className, offset: t1, maxWidth: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = position;
+		$[3] = props;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		className = $[1];
+		position = $[2];
+		props = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const offset = t1 === void 0 ? 14 : t1;
+	const maxWidth = t2 === void 0 ? "20rem" : t2;
+	const t3 = position[0];
+	const t4 = position[1];
+	let t5;
+	if ($[6] !== className) {
+		t5 = cx("oui-map__popup", className);
+		$[6] = className;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== maxWidth || $[9] !== offset || $[10] !== position[0] || $[11] !== position[1] || $[12] !== props || $[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Popup, {
+			longitude: t3,
+			latitude: t4,
+			offset,
+			maxWidth,
+			className: t5,
+			...props
+		});
+		$[8] = maxWidth;
+		$[9] = offset;
+		$[10] = position[0];
+		$[11] = position[1];
+		$[12] = props;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	return t6;
+}
+/**
+* Hover content: a popup without a close button that stays open on map clicks. Show it from
+* `onItemHover` and hide it when the item is `null`.
+*
+* @example
+* {hovered && <Map.Tooltip position={hovered.position}>{hovered.name}</Map.Tooltip>}
+*/
+function MapTooltip(t0) {
+	const $ = c(13);
+	let className;
+	let position;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({position, className, offset: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = position;
+		$[3] = props;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		position = $[2];
+		props = $[3];
+		t1 = $[4];
+	}
+	const offset = t1 === void 0 ? 10 : t1;
+	const t2 = position[0];
+	const t3 = position[1];
+	let t4;
+	if ($[5] !== className) {
+		t4 = cx("oui-map__popup oui-map__tooltip", className);
+		$[5] = className;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== offset || $[8] !== position[0] || $[9] !== position[1] || $[10] !== props || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Popup, {
+			longitude: t2,
+			latitude: t3,
+			offset,
+			closeButton: false,
+			closeOnClick: false,
+			className: t4,
+			...props
+		});
+		$[7] = offset;
+		$[8] = position[0];
+		$[9] = position[1];
+		$[10] = props;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+/** Content floating over a corner of the map: stat cards, selects, a legend or `Map.BaseLayerSwitch`. */
+function MapOverlay(t0) {
+	const $ = c(12);
+	let className;
+	let props;
+	let ref;
+	let t1;
+	if ($[0] !== t0) {
+		({position: t1, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		t1 = $[4];
+	}
+	const position = t1 === void 0 ? "top-left" : t1;
+	let t2;
+	if ($[5] !== className) {
+		t2 = cx("oui-map__overlay", className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== position || $[8] !== props || $[9] !== ref || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t2,
+			"data-position": position,
+			...props
+		});
+		$[7] = position;
+		$[8] = props;
+		$[9] = ref;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+/**
+* The key to a map's colours, with optional selection and show/hide per entry. Plain DOM, so it also
+* works outside the map; inside `Map.Root` it takes the root's labels. Put it in a `Map.Overlay`.
+*
+* @example
+* <Map.Legend
+*   items={trips.map((t, i) => ({ id: t.id, label: t.name, color: seriesColor(i), visible: !hidden.includes(t.id) }))}
+*   selectionMode="multi"
+*   selectedIds={selected}
+*   onSelectedIdsChange={setSelected}
+*   onVisibilityChange={(ids, visible) => setHidden((h) => (visible ? h.filter((id) => !ids.includes(id)) : [...h, ...ids]))}
+*   showAllToggle
+* />
+*/
+function MapLegend(t0) {
+	const $ = c(48);
+	let className;
+	let items;
+	let onSelectedIdsChange;
+	let onVisibilityChange;
+	let props;
+	let ref;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({items, selectionMode: t1, selectedIds: t2, onSelectedIdsChange, onVisibilityChange, showAllToggle: t3, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = items;
+		$[3] = onSelectedIdsChange;
+		$[4] = onVisibilityChange;
+		$[5] = props;
+		$[6] = ref;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else {
+		className = $[1];
+		items = $[2];
+		onSelectedIdsChange = $[3];
+		onVisibilityChange = $[4];
+		props = $[5];
+		ref = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+	}
+	const selectionMode = t1 === void 0 ? "none" : t1;
+	let t4;
+	if ($[10] !== t2) {
+		t4 = t2 === void 0 ? [] : t2;
+		$[10] = t2;
+		$[11] = t4;
+	} else t4 = $[11];
+	const selectedIds = t4;
+	const showAllToggle = t3 === void 0 ? false : t3;
+	const labels = React.use(MapContext)?.labels ?? defaultLabels;
+	let t5;
+	if ($[12] !== items) {
+		t5 = items.every(_temp13);
+		$[12] = items;
+		$[13] = t5;
+	} else t5 = $[13];
+	const allVisible = t5;
+	let t6;
+	if ($[14] !== onSelectedIdsChange || $[15] !== selectedIds || $[16] !== selectionMode) {
+		t6 = (id) => {
+			const on = selectedIds.includes(id);
+			if (selectionMode === "single") onSelectedIdsChange?.(on ? [] : [id]);
+			else onSelectedIdsChange?.(on ? selectedIds.filter((s) => s !== id) : [...selectedIds, id]);
+		};
+		$[14] = onSelectedIdsChange;
+		$[15] = selectedIds;
+		$[16] = selectionMode;
+		$[17] = t6;
+	} else t6 = $[17];
+	const toggle = t6;
+	let t7;
+	if ($[18] !== className) {
+		t7 = cx("oui-map-legend", className);
+		$[18] = className;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== allVisible || $[21] !== items || $[22] !== labels || $[23] !== onVisibilityChange || $[24] !== showAllToggle) {
+		t8 = onVisibilityChange && showAllToggle && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "oui-map-legend__toggle-all",
+			onClick: () => onVisibilityChange(items.map(_temp14), !allVisible),
+			children: allVisible ? labels.hideAll : labels.showAll
+		});
+		$[20] = allVisible;
+		$[21] = items;
+		$[22] = labels;
+		$[23] = onVisibilityChange;
+		$[24] = showAllToggle;
+		$[25] = t8;
+	} else t8 = $[25];
+	let t9;
+	if ($[26] !== items || $[27] !== labels || $[28] !== onVisibilityChange || $[29] !== selectedIds || $[30] !== selectionMode || $[31] !== toggle) {
+		let t10;
+		if ($[33] !== labels || $[34] !== onVisibilityChange || $[35] !== selectedIds || $[36] !== selectionMode || $[37] !== toggle) {
+			t10 = (item_1) => {
+				const selected = selectedIds.includes(item_1.id);
+				const visible = item_1.visible !== false;
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "oui-map-legend__swatch",
+						style: { "--_swatch": item_1.color }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "oui-map-legend__label",
+						children: item_1.label
+					}),
+					item_1.count != null && /* @__PURE__ */ jsx("span", {
+						className: "oui-map-legend__count",
+						children: item_1.count
+					})
+				] });
+				return /* @__PURE__ */ jsxs("li", {
+					className: "oui-map-legend__item",
+					"data-selected": selected || void 0,
+					"data-hidden": visible ? void 0 : "",
+					children: [selectionMode === "none" ? /* @__PURE__ */ jsx("span", {
+						className: "oui-map-legend__entry",
+						children: content
+					}) : /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "oui-map-legend__entry",
+						"aria-pressed": selected,
+						onClick: () => toggle(item_1.id),
+						children: content
+					}), onVisibilityChange && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "oui-map-legend__visibility",
+						"aria-label": `${visible ? labels.hide : labels.show} ${typeof item_1.label === "string" ? item_1.label : item_1.id}`,
+						onClick: () => onVisibilityChange([item_1.id], !visible),
+						children: visible ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
+					})]
+				}, item_1.id);
+			};
+			$[33] = labels;
+			$[34] = onVisibilityChange;
+			$[35] = selectedIds;
+			$[36] = selectionMode;
+			$[37] = toggle;
+			$[38] = t10;
+		} else t10 = $[38];
+		t9 = items.map(t10);
+		$[26] = items;
+		$[27] = labels;
+		$[28] = onVisibilityChange;
+		$[29] = selectedIds;
+		$[30] = selectionMode;
+		$[31] = toggle;
+		$[32] = t9;
+	} else t9 = $[32];
+	let t10;
+	if ($[39] !== t9) {
+		t10 = /* @__PURE__ */ jsx("ul", {
+			className: "oui-map-legend__list",
+			children: t9
+		});
+		$[39] = t9;
+		$[40] = t10;
+	} else t10 = $[40];
+	let t11;
+	if ($[41] !== props || $[42] !== ref || $[43] !== selectionMode || $[44] !== t10 || $[45] !== t7 || $[46] !== t8) {
+		t11 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: t7,
+			"data-selection-mode": selectionMode,
+			...props,
+			children: [t8, t10]
+		});
+		$[41] = props;
+		$[42] = ref;
+		$[43] = selectionMode;
+		$[44] = t10;
+		$[45] = t7;
+		$[46] = t8;
+		$[47] = t11;
+	} else t11 = $[47];
+	return t11;
+}
+function _temp14(item_0) {
+	return item_0.id;
+}
+function _temp13(item) {
+	return item.visible !== false;
+}
+/** Segmented switch between the root's `baseLayers` (e.g. streets and satellite). Put it in a `Map.Overlay`. */
+function MapBaseLayerSwitch(t0) {
+	const $ = c(11);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({size: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const size = t1 === void 0 ? "sm" : t1;
+	const { baseLayers, baseLayer, setBaseLayer } = useMapContext("Map.BaseLayerSwitch");
+	let t2;
+	if ($[3] !== baseLayers) {
+		t2 = baseLayers.map(_temp15);
+		$[3] = baseLayers;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== baseLayer || $[6] !== props || $[7] !== setBaseLayer || $[8] !== size || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(SegmentedControl, {
+			size,
+			options: t2,
+			value: baseLayer,
+			onValueChange: setBaseLayer,
+			...props
+		});
+		$[5] = baseLayer;
+		$[6] = props;
+		$[7] = setBaseLayer;
+		$[8] = size;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+/**
+* Map components on MapLibre, from `@optimum-intelligence/opti-ui/map`. `Map.Root` holds the map; inside
+* it, `Map.Areas`, `Map.Routes` and `Map.Points` draw arrays of items as single GeoJSON layers,
+* `Map.Marker` adds HTML pins, `Map.Popup` and `Map.Tooltip` show content at a position, and
+* `Map.Overlay` floats `Map.Legend`, `Map.BaseLayerSwitch` or cards over a corner.
+*
+* @example
+* <Map.Root baseLayers={baseLayers} fit="selected">
+*   <Map.Areas items={zones} />
+*   <Map.Routes items={trips} selectedIds={selected} onItemClick={(t) => setSelected([t.id])} />
+*   <Map.Overlay position="top-left">
+*     <Map.Legend items={legend} selectionMode="single" selectedIds={selected} onSelectedIdsChange={setSelected} />
+*   </Map.Overlay>
+*   <Map.Overlay position="bottom-left">
+*     <Map.BaseLayerSwitch />
+*   </Map.Overlay>
+* </Map.Root>
+*/
+function _temp15(layer) {
+	return {
+		value: layer.id,
+		label: layer.label
+	};
+}
+var Map$1 = {
+	Root: MapRoot,
+	Routes: MapRoutes,
+	Areas: MapAreas,
+	Points: MapPoints,
+	Marker: MapMarker,
+	Popup: MapPopup,
+	Tooltip: MapTooltip,
+	Overlay: MapOverlay,
+	Legend: MapLegend,
+	BaseLayerSwitch: MapBaseLayerSwitch
+};
+//#endregion
+export { Map$1 as Map, rasterStyle };
+
+//# sourceMappingURL=Map.js.map