@dxos/react-ui-geo 0.10.0 → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,1415 @@
+import { loadTopology } from "./data.mjs";
+import { drag, easeLinear, easeSinOut, geoBounds, geoCentroid, geoCircle as geoCircle$1, geoDistance, geoGraticule, geoInterpolate, geoMercator, geoOrthographic, geoPath, geoTransverseMercator, interpolateNumber, select, selection, timer as timer$1, transition } from "d3";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { IconButton, ThemeProvider, Toolbar, Tooltip, composable, composableProps, defaultTx, useComposedRefs, useControlledState, useDynamicRef, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
+import { raise } from "@dxos/debug";
+import versor from "versor";
+import { feature, mesh } from "topojson-client";
+import { presimplify, quantile, simplify } from "topojson-simplify";
+import { log } from "@dxos/log";
+import { translationKey } from "#translations";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "leaflet/dist/leaflet.css";
+import { createContext as createContext$1 } from "@radix-ui/react-context";
+import L, { Control, DomEvent, DomUtil, latLngBounds, point } from "leaflet";
+import { createRoot } from "react-dom/client";
+import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
+//#region src/hooks/context.ts
+/** @internal */
+var GlobeContext = createContext(void 0);
+var useGlobeContext = () => {
+	return useContext(GlobeContext) ?? raise(/* @__PURE__ */ new Error("Missing GlobeContext"));
+};
+//#endregion
+//#region src/util/animation.ts
+/**
+* Duration scaled by great-circle distance between two geo positions.
+* Ensures long jumps animate longer than short ones while clamping to a
+* minimum base. `scale` controls how steeply duration grows with distance
+* (ms per radian of arc).
+*/
+var flyDuration = (p1, p2, base, scale) => Math.max(base, geoDistance(p1, p2) * scale);
+/**
+* Per-frame tween that interpolates the projection's rotation between two
+* Euler triples along the shortest great-circle arc using versors. Mutates
+* the projection and pushes the normalised rotation through `setRotation`.
+*/
+var createRotationTween = (projection, setRotation, r1, r2) => {
+	const iv = versor.interpolate(r1, r2);
+	return (t) => {
+		projection.rotate(iv(t));
+		setRotation(projection.rotate());
+	};
+};
+//#endregion
+//#region src/util/debug.ts
+var timer = (cb) => {
+	const start = Date.now();
+	const data = cb();
+	Date.now() - start / 1e3;
+	return data;
+};
+//#endregion
+//#region src/util/inertia.ts
+var restrictAxis = (axis) => (original, current) => current.map((d, i) => axis[i] ? d : original[i]);
+/**
+* Applies a drag handler to the specified target element.
+*/
+var geoInertiaDrag = (target, render, projection, options) => {
+	if (!options) options = {};
+	if (target.node) target = target.node();
+	target = select(target);
+	const linear = (options.mode ?? "linear") === "linear";
+	const sharedHandlers = {
+		projection,
+		render: (rotation) => {
+			projection.rotate(rotation);
+			render && render();
+		},
+		axis: restrictAxis(options.lockTilt ? [
+			true,
+			false,
+			false
+		] : [
+			true,
+			true,
+			true
+		]),
+		start: options.start,
+		move: options.move,
+		end: options.end,
+		stop: options.stop,
+		finish: options.finish,
+		time: options.time,
+		hold: options.hold
+	};
+	const inertia = linear ? geoInertiaDragLinearHelper({
+		...sharedHandlers,
+		sensitivity: options.sensitivity,
+		getZoom: options.getZoom
+	}) : geoInertiaDragHelper(sharedHandlers);
+	target.call(drag().on("start", inertia.start).on("drag", inertia.move).on("end", inertia.end));
+	return inertia;
+};
+/**
+* A versor is a compact way to describe a rotation in 3D space.
+* It consists of four components [𝑤,x,y,z], where:
+* 𝑤 is a scalar representing the angle of rotation.
+* x, y, z are the vector components, representing the axis of rotation.
+*/
+var geoInertiaDragHelper = (opt) => {
+	const projection = opt.projection;
+	let v0;
+	let r0;
+	let q0;
+	let v10;
+	let v11;
+	let q10;
+	const inertia = inertiaHelper({
+		axis: opt.axis,
+		start: () => {
+			v0 = versor.cartesian(projection.invert(inertia.position));
+			r0 = projection.rotate();
+			q0 = versor(r0);
+			opt.start && opt.start();
+		},
+		move: () => {
+			const inv = projection.rotate(r0).invert(inertia.position);
+			if (isNaN(inv[0])) return;
+			const v1 = versor.cartesian(inv);
+			const q1 = versor.multiply(q0, versor.delta(v0, v1));
+			const r1 = versor.rotation(q1);
+			const r2 = opt.axis(r0, r1);
+			opt.render(r2);
+			opt.move && opt.move();
+		},
+		end: () => {
+			v10 = versor.cartesian(projection.invert(inertia.position.map((d, i) => d - inertia.velocity[i] / 1e3)));
+			q10 = versor(projection.rotate());
+			v11 = versor.cartesian(projection.invert(inertia.position));
+			opt.end && opt.end();
+		},
+		stop: opt.stop,
+		finish: opt.finish,
+		render: (t) => {
+			const r1 = versor.rotation(versor.multiply(q10, versor.delta(v10, v11, t * 1e3)));
+			const r2 = opt.axis(r0, r1);
+			opt.render && opt.render(r2);
+		},
+		time: opt.time
+	});
+	return inertia;
+};
+/**
+* Linear pixel-to-Euler drag: Δx → lambda, Δy → phi, gamma fixed at 0.
+* Inertia spin-down reuses the same shared decay curve as the versor path.
+*/
+var DEFAULT_LINEAR_SENSITIVITY = .25;
+var geoInertiaDragLinearHelper = (opt) => {
+	const projection = opt.projection;
+	const sensitivity = opt.sensitivity ?? DEFAULT_LINEAR_SENSITIVITY;
+	const gain = () => sensitivity / Math.max(opt.getZoom?.() ?? 1, .1);
+	let r0;
+	let p0;
+	let kStart;
+	let rEnd;
+	let vEnd;
+	const inertia = inertiaHelper({
+		axis: opt.axis,
+		start: () => {
+			r0 = projection.rotate();
+			p0 = [inertia.position[0], inertia.position[1]];
+			kStart = gain();
+			opt.start && opt.start();
+		},
+		move: () => {
+			const dx = inertia.position[0] - p0[0];
+			const dy = inertia.position[1] - p0[1];
+			const r1 = [
+				r0[0] + dx * kStart,
+				r0[1] - dy * kStart,
+				0
+			];
+			const r2 = opt.axis(r0, r1);
+			opt.render(r2);
+			opt.move && opt.move();
+		},
+		end: () => {
+			rEnd = projection.rotate();
+			vEnd = [inertia.velocity[0], inertia.velocity[1]];
+			opt.end && opt.end();
+		},
+		stop: opt.stop,
+		finish: opt.finish,
+		render: (t) => {
+			const r1 = [
+				rEnd[0] + vEnd[0] * kStart * t,
+				rEnd[1] - vEnd[1] * kStart * t,
+				0
+			];
+			const r2 = opt.axis(rEnd, r1);
+			opt.render && opt.render(r2);
+		},
+		time: opt.time
+	});
+	return inertia;
+};
+function inertiaHelper(opt) {
+	const A = opt.time || 5e3;
+	const limit = 1.0001;
+	const B = -Math.log(1 - 1 / limit);
+	const inertia = {
+		position: [0, 0],
+		velocity: [0, 0],
+		timer: timer$1(() => {}),
+		time: 0,
+		t: 0,
+		start: function(ev) {
+			const position = [ev.x, ev.y];
+			inertia.position = position;
+			inertia.velocity = [0, 0];
+			inertia.timer.stop();
+			this.classList.remove("inertia");
+			this.classList.add("dragging");
+			opt.start && opt.start.call(this, position);
+		},
+		move: function(ev) {
+			const position = [ev.x, ev.y];
+			const time = performance.now();
+			const deltaTime = time - inertia.time;
+			const decay = 1 - Math.exp(-deltaTime / 1e3);
+			inertia.velocity = inertia.velocity.map((d, i) => {
+				const deltaPos = position[i] - inertia.position[i];
+				const deltaTime = time - inertia.time;
+				return 1e3 * (1 - decay) * deltaPos / deltaTime + d * decay;
+			});
+			inertia.velocity = opt.axis([0, 0], inertia.velocity);
+			inertia.time = time;
+			inertia.position = position;
+			opt.move && opt.move.call(this, position);
+		},
+		end: function(ev) {
+			this.classList.remove("dragging", "inertia");
+			const v = inertia.velocity;
+			if (v[0] * v[0] + v[1] * v[1] < 100) {
+				inertia.timer.stop();
+				return opt.stop && opt.stop();
+			}
+			const deltaTime = performance.now() - inertia.time;
+			if (opt.hold === void 0) opt.hold = 100;
+			if (deltaTime >= opt.hold) {
+				inertia.timer.stop();
+				return opt.stop && opt.stop();
+			}
+			this.classList.add("inertia");
+			opt.end && opt.end();
+			const self = this;
+			inertia.timer.restart((e) => {
+				inertia.t = limit * (1 - Math.exp(-B * e / A));
+				opt.render && opt.render(inertia.t);
+				if (inertia.t > 1) {
+					inertia.timer.stop();
+					self.classList.remove("inertia");
+					inertia.velocity = [0, 0];
+					inertia.t = 1;
+					opt.finish && opt.finish();
+				}
+			});
+		}
+	};
+	inertia.timer.stop();
+	return inertia;
+}
+//#endregion
+//#region src/util/path.ts
+var positionToRotation = ([lng, lat], tilt = 0) => [
+	-lng,
+	tilt - lat,
+	0
+];
+var geoToPosition = ({ lat, lng }) => [lng, lat];
+var geoPoint = (point) => ({
+	type: "Point",
+	coordinates: geoToPosition(point)
+});
+var geoCircle = ({ lat, lng }, radius) => geoCircle$1().radius(radius).center([lng, lat])();
+var geoLine = (p1, p2) => ({
+	type: "LineString",
+	coordinates: [[p1.lng, p1.lat], [p2.lng, p2.lat]]
+});
+var closestPoint = (points, target) => {
+	if (points.length === 0) return target;
+	let closestPoint = points[0];
+	let minDistance = getDistance(points[0], target);
+	for (const point of points) {
+		const distance = getDistance(point, target);
+		if (distance < minDistance) {
+			minDistance = distance;
+			closestPoint = point;
+		}
+	}
+	return closestPoint;
+};
+var getDistance = (point1, point2) => {
+	const dx = point1[0] - point2[0];
+	const dy = point1[1] - point2[1];
+	return Math.sqrt(dx * dx + dy * dy);
+};
+//#endregion
+//#region src/util/render.ts
+var RAD_TO_DEG = 180 / Math.PI;
+/**
+* Compute a spherical bounding circle for a GeoJSON feature. We sample the
+* geoBounds corners (cheap, sufficient for typical country shapes); for
+* features crossing the antimeridian d3.geoBounds returns west > east, which
+* geoDistance handles correctly when called on the actual centroid.
+*/
+var computeBounds = (geometry) => {
+	const feat = {
+		type: "Feature",
+		geometry,
+		properties: {}
+	};
+	const centroid = geoCentroid(feat);
+	const [[w, s], [e, n]] = geoBounds(feat);
+	const corners = [
+		[w, s],
+		[w, n],
+		[e, s],
+		[e, n]
+	];
+	let radius = 0;
+	for (const corner of corners) {
+		const d = geoDistance(centroid, corner) * RAD_TO_DEG;
+		if (d > radius) radius = d;
+	}
+	return {
+		geometry,
+		centroid,
+		radius
+	};
+};
+/**
+* Create rendering layers.
+*/
+var createLayers = (topology, features, styles) => {
+	const layers = [];
+	if (styles.water) layers.push({
+		styles: styles.water,
+		path: { type: "Sphere" }
+	});
+	if (styles.graticule) layers.push({
+		styles: styles.graticule,
+		path: geoGraticule().step([6, 6])()
+	});
+	if (topology) {
+		if (styles.land) {
+			if (topology.objects.countries) {
+				const memberGeoms = feature(topology, topology.objects.countries).features.map((f) => f.geometry);
+				const bounds = memberGeoms.map(computeBounds);
+				layers.push({
+					styles: styles.land,
+					path: {
+						type: "GeometryCollection",
+						geometries: memberGeoms
+					},
+					cullable: bounds
+				});
+			} else if (topology.objects.land) layers.push({
+				styles: styles.land,
+				path: feature(topology, topology.objects.land)
+			});
+		}
+		if (topology.objects.countries && styles.border) layers.push({
+			styles: styles.border,
+			path: mesh(topology, topology.objects.countries, (a, b) => a !== b)
+		});
+		if (topology.objects.dots && styles.dots) layers.push({
+			styles: styles.dots,
+			path: topology.objects.dots
+		});
+	}
+	if (features) {
+		const { points, lines } = features;
+		if (lines && styles.line) layers.push({
+			styles: styles.line,
+			path: {
+				type: "GeometryCollection",
+				geometries: lines.map(({ source, target }) => geoLine(source, target))
+			}
+		});
+		if (points && styles.point) layers.push({
+			styles: styles.point,
+			path: {
+				type: "GeometryCollection",
+				geometries: points.map((point) => geoPoint(point))
+			}
+		});
+	}
+	return layers;
+};
+/**
+* Render layers created above.
+*
+* When `viewCenter` is supplied (orthographic globe), layers with a
+* `cullable` index are filtered to just the features whose bounding circle
+* intersects the visible hemisphere — keeping the d3-geo walk proportional
+* to what's actually on-screen.
+*/
+var renderLayers = (generator, layers = [], scale, styles, viewCenter) => {
+	const context = generator.context();
+	const { canvas: { width, height } } = context;
+	context.reset();
+	if (styles.background) {
+		context.fillStyle = styles.background.fillStyle;
+		context.fillRect(0, 0, width, height);
+	} else context.clearRect(0, 0, width, height);
+	layers.forEach((layer) => {
+		const { path, styles, cullable } = layer;
+		context.save();
+		let fill = false;
+		let stroke = false;
+		if (styles) Object.entries(styles).forEach(([key, value]) => {
+			if (key === "pointRadius") generator.pointRadius(value * scale);
+			else {
+				context[key] = value;
+				fill ||= key === "fillStyle";
+				stroke ||= key === "strokeStyle";
+			}
+		});
+		let renderPath = path;
+		if (cullable && viewCenter) {
+			const geometries = [];
+			for (let index = 0; index < cullable.length; index++) {
+				const bounds = cullable[index];
+				if (geoDistance(viewCenter, bounds.centroid) * RAD_TO_DEG < 90 + bounds.radius) geometries.push(bounds.geometry);
+			}
+			renderPath = {
+				type: "GeometryCollection",
+				geometries
+			};
+		}
+		context.beginPath();
+		generator(renderPath);
+		fill && context.fill();
+		stroke && context.stroke();
+		context.restore();
+	});
+	return context;
+};
+//#endregion
+//#region src/util/styles.ts
+/**
+* Default style set for the Globe, theme-aware. Originated in plugin-map's
+* GlobeControl; lifted here so other plugins (plugin-trip, etc.) get the same
+* baseline without copying the palette.
+*/
+var POINT_COLOR = "rgb(220, 38, 38)";
+var LINE_COLOR = "rgba(220, 38, 38, 0.5)";
+var globeStyles = (themeMode) => themeMode === "dark" ? {
+	water: { fillStyle: "#191919" },
+	land: {
+		fillStyle: "#444",
+		strokeStyle: "#222"
+	},
+	border: { strokeStyle: "#111" },
+	graticule: { strokeStyle: "#111" },
+	line: {
+		lineWidth: 1.5,
+		lineDash: [4, 16],
+		strokeStyle: LINE_COLOR
+	},
+	point: {
+		radius: .2,
+		fillStyle: POINT_COLOR
+	}
+} : {
+	water: { fillStyle: "#C0DAE4" },
+	land: {
+		fillStyle: "#C2D8B4",
+		strokeStyle: "#A6C291"
+	},
+	line: {
+		lineWidth: 1.5,
+		lineDash: [4, 16],
+		strokeStyle: LINE_COLOR
+	},
+	point: {
+		radius: .2,
+		fillStyle: POINT_COLOR
+	}
+};
+//#endregion
+//#region src/hooks/useDrag.ts
+/**
+* Allows user to drag globe.
+*/
+var useDrag = (controller, options = {}) => {
+	useEffect(() => {
+		const canvas = controller?.canvas;
+		if (!canvas || options.disabled) return;
+		const inertia = geoInertiaDrag(select(canvas), () => {
+			controller.setRotation(controller.projection.rotate());
+			options.onUpdate?.({
+				type: "move",
+				controller
+			});
+		}, controller.projection, {
+			lockTilt: options.lockTilt,
+			mode: options.mode,
+			sensitivity: options.sensitivity,
+			getZoom: () => controller.zoom,
+			time: 3e3,
+			start: () => options.onUpdate?.({
+				type: "start",
+				controller
+			}),
+			finish: () => options.onUpdate?.({
+				type: "end",
+				controller
+			})
+		});
+		return () => {
+			cancelDrag(select(canvas));
+			inertia?.timer?.stop();
+		};
+	}, [controller, JSON.stringify(options)]);
+};
+var cancelDrag = (node) => node.on(".drag", null);
+//#endregion
+//#region src/hooks/useGlobeZoomHandler.ts
+var ZOOM_FACTOR = .1;
+var useGlobeZoomHandler = (controller) => {
+	return useCallback((event) => {
+		if (!controller) return;
+		switch (event) {
+			case "zoom-in":
+				controller.setZoom((zoom) => {
+					return zoom * 1.1;
+				});
+				break;
+			case "zoom-out":
+				controller.setZoom((zoom) => {
+					return zoom * (1 - ZOOM_FACTOR);
+				});
+				break;
+		}
+	}, [controller]);
+};
+//#endregion
+//#region src/hooks/useMapZoomHandler.ts
+var useMapZoomHandler = (controller) => {
+	return useCallback((event) => {
+		if (!controller) return;
+		switch (event) {
+			case "zoom-in":
+				controller.setZoom((scale) => scale + 1);
+				break;
+			case "zoom-out":
+				controller.setZoom((scale) => scale - 1);
+				break;
+		}
+	}, [controller]);
+};
+//#endregion
+//#region src/hooks/useSimplifiedTopology.ts
+var DEFAULT_TIERS$1 = [
+	{
+		minZoom: 0,
+		percentile: .95
+	},
+	{
+		minZoom: 2,
+		percentile: .85
+	},
+	{
+		minZoom: 4,
+		percentile: .6
+	},
+	{
+		minZoom: 7,
+		percentile: .3
+	},
+	{
+		minZoom: 12,
+		percentile: 0
+	}
+];
+var pickTier$1 = (zoom, tiers) => {
+	let match = tiers[0];
+	for (const tier of tiers) if (zoom >= tier.minZoom) match = tier;
+	return match;
+};
+/**
+* Returns a simplified copy of `topology` whose detail tracks the current
+* `zoom`. The source topology is annotated with point weights once via
+* `presimplify`; subsequent zoom changes reuse that work and only re-run
+* the cheap `simplify` pass against a tier-bucketed `minWeight`.
+*
+* Pass the highest-resolution source you have (typically `10m`) and let the
+* hook decimate at low zoom — that's the cheap end of the curve.
+*/
+var useSimplifiedTopology = (topology, zoom, options = {}) => {
+	const { tiers = DEFAULT_TIERS$1 } = options;
+	const presimplified = useMemo(() => topology ? presimplify(topology) : void 0, [topology]);
+	const tier = pickTier$1(zoom, tiers);
+	return useMemo(() => {
+		if (!presimplified) return;
+		if (tier.percentile <= 0) return presimplified;
+		const minWeight = quantile(presimplified, tier.percentile);
+		return simplify(presimplified, minWeight);
+	}, [presimplified, tier]);
+};
+//#endregion
+//#region src/hooks/useSpinner.ts
+/**
+* Rotates globe.
+*/
+var useSpinner = (controller, options = {}) => {
+	const [running, setRunning] = useState(false);
+	useEffect(() => {
+		let timer;
+		const start = () => {
+			const delta = options.delta ?? [
+				.001,
+				0,
+				0
+			];
+			let t = 0;
+			let lastRotation = controller.projection.rotate();
+			timer = timer$1((elapsed) => {
+				const dt = elapsed - t;
+				t = elapsed;
+				const rotation = [
+					lastRotation[0] + delta[0] * dt,
+					lastRotation[1] + delta[1] * dt,
+					lastRotation[2] + delta[2] * dt
+				];
+				lastRotation = rotation;
+				controller.setRotation(rotation);
+			});
+		};
+		const stop = () => {
+			if (timer) {
+				timer.stop();
+				timer = void 0;
+			}
+		};
+		if (controller && running) start();
+		else stop();
+		return () => stop();
+	}, [controller, running]);
+	return [() => {
+		if (!options.disabled) setRunning(true);
+	}, () => setRunning(false)];
+};
+//#endregion
+//#region src/hooks/useTopology.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-geo/src/hooks/useTopology.ts";
+/** Default zoom buckets: 110m below zoom 3, 50m at zoom 3 and above. */
+var DEFAULT_TIERS = [{
+	minZoom: 0,
+	level: "110m"
+}];
+var pickTier = (zoom, tiers) => {
+	let match = tiers[0];
+	for (const tier of tiers) if (zoom >= tier.minZoom) match = tier;
+	return match;
+};
+var topologyCache = /* @__PURE__ */ new Map();
+/**
+* Loads TopoJSON country data.
+*
+* - With no arguments, loads the default `110m` resolution.
+* - With a `zoom`, loads the resolution matching the current zoom tier (progressive level-of-detail).
+*   Each resolution is a separate dynamic `import()`, so unused detail levels are never fetched, and
+*   while a heavier tier loads the previously-displayed topology stays on screen (no blank canvas).
+*/
+var useTopology = (zoom, options = {}) => {
+	const { tiers = DEFAULT_TIERS } = options;
+	const level = zoom === void 0 ? "110m" : pickTier(zoom, tiers).level;
+	const [topology, setTopology] = useState(() => topologyCache.get(level));
+	useEffect(() => {
+		const cached = topologyCache.get(level);
+		if (cached) {
+			setTopology(cached);
+			return;
+		}
+		let disposed = false;
+		loadTopology(level).then((loaded) => {
+			topologyCache.set(level, loaded);
+			if (!disposed) setTopology(loaded);
+		}).catch((err) => {
+			if (!disposed) log.warn("failed to load topology", {
+				level,
+				err
+			}, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 85,
+				S: void 0
+			});
+		});
+		return () => {
+			disposed = true;
+		};
+	}, [level]);
+	return topology;
+};
+//#endregion
+//#region src/hooks/useTour.ts
+var defaultDuration = 1500;
+/**
+* Iterates between points by chaining `controller.flyTo` calls, rendering
+* an arc + cursor on the canvas per frame via the flyTo `onTick` hook.
+* Inspired by: https://observablehq.com/@mbostock/top-100-cities
+*/
+var useTour = (controller, points, options = {}) => {
+	const [running, setRunning] = useState(options.running ?? false);
+	useEffect(() => {
+		if (!controller || !running) return;
+		let cancelled = false;
+		const t = setTimeout(async () => {
+			const { canvas, projection } = controller;
+			const context = canvas.getContext("2d", { alpha: false });
+			const path = geoPath(projection, context).pointRadius(2);
+			try {
+				const tourPoints = [...points];
+				if (options.loop) tourPoints.push(tourPoints[0]);
+				let last;
+				for (const next of tourPoints) {
+					if (cancelled) break;
+					const p1 = last ? geoToPosition(last) : void 0;
+					const p2 = geoToPosition(next);
+					const ip = geoInterpolate(p1 ?? p2, p2);
+					const onTick = (t) => {
+						const t1 = Math.max(0, Math.min(1, t * 2 - 1));
+						const t2 = Math.min(1, t * 2);
+						context.save();
+						try {
+							context.beginPath();
+							context.strokeStyle = options.styles?.arc?.strokeStyle ?? "yellow";
+							context.lineWidth = (options.styles?.arc?.lineWidth ?? 1.5) * (controller.zoom ?? 1);
+							context.setLineDash(options.styles?.arc?.lineDash ?? []);
+							path({
+								type: "LineString",
+								coordinates: [ip(t1), ip(t2)]
+							});
+							context.stroke();
+							context.beginPath();
+							context.fillStyle = options.styles?.cursor?.fillStyle ?? "orange";
+							path.pointRadius((options.styles?.cursor?.pointRadius ?? 2) * (controller.zoom ?? 1));
+							path({
+								type: "Point",
+								coordinates: ip(t2)
+							});
+							context.fill();
+						} finally {
+							context.restore();
+						}
+					};
+					await controller.flyTo(next, {
+						duration: options.duration ?? defaultDuration,
+						tilt: options.tilt ?? 0,
+						onTick
+					});
+					last = next;
+				}
+			} catch {} finally {
+				if (!cancelled) setRunning(false);
+			}
+		});
+		return () => {
+			cancelled = true;
+			clearTimeout(t);
+			controller.cancelFlyTo();
+		};
+	}, [
+		controller,
+		running,
+		JSON.stringify(options)
+	]);
+	return [running, setRunning];
+};
+//#endregion
+//#region src/hooks/useWheel.ts
+var DEFAULT_SENSITIVITY = .25;
+var DEFAULT_ZOOM_SENSITIVITY = .01;
+/**
+* Map mouse-wheel / trackpad gestures to globe motion:
+* - Scroll (or two-finger pan on a trackpad) rotates the globe:
+*   deltaY → phi (tilt around screen-X), deltaX → lambda (polar spin).
+* - Pinch-to-zoom on a trackpad — and ctrl+scroll on a mouse — are
+*   delivered as `wheel` events with `ctrlKey: true`. Those are routed
+*   to `setZoom` instead so the gesture matches the user's intent.
+*/
+var useWheel = (controller, options = {}) => {
+	useEffect(() => {
+		const canvas = controller?.canvas;
+		if (!canvas || options.disabled) return;
+		const sensitivity = options.sensitivity ?? DEFAULT_SENSITIVITY;
+		const zoomSensitivity = options.zoomSensitivity ?? DEFAULT_ZOOM_SENSITIVITY;
+		const handleWheel = (event) => {
+			event.preventDefault();
+			if (event.ctrlKey) {
+				const factor = Math.exp(-event.deltaY * zoomSensitivity);
+				controller.setZoom(controller.zoom * factor);
+			} else {
+				const [lambda, phi, gamma] = controller.projection.rotate();
+				const k = sensitivity / Math.max(controller.zoom, .1);
+				const next = [
+					lambda - event.deltaX * k,
+					phi + event.deltaY * k,
+					gamma
+				];
+				controller.projection.rotate(next);
+				controller.setRotation(controller.projection.rotate());
+			}
+			options.onUpdate?.(controller);
+		};
+		canvas.addEventListener("wheel", handleWheel, { passive: false });
+		return () => {
+			canvas.removeEventListener("wheel", handleWheel);
+		};
+	}, [
+		controller,
+		options.disabled,
+		options.sensitivity,
+		options.zoomSensitivity,
+		options.onUpdate
+	]);
+};
+//#endregion
+//#region src/components/Toolbar/control-positions.ts
+var controlPositions = {
+	topleft: "top-2 left-2",
+	topright: "top-2 right-2",
+	bottomleft: "bottom-2 left-2",
+	bottomright: "bottom-2 right-2"
+};
+//#endregion
+//#region src/components/Toolbar/Controls.tsx
+var ZoomControls = ({ classNames, onAction }) => {
+	const { t } = useTranslation(translationKey);
+	return /* @__PURE__ */ jsxs(Toolbar.Root, {
+		classNames: ["gap-2", classNames],
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--plus--regular",
+			iconOnly: true,
+			label: t("zoom-in-icon.button"),
+			onClick: () => onAction?.("zoom-in")
+		}), /* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--minus--regular",
+			iconOnly: true,
+			label: t("zoom-out-icon.button"),
+			onClick: () => onAction?.("zoom-out")
+		})]
+	});
+};
+var ActionControls = ({ classNames, onAction }) => {
+	const { t } = useTranslation(translationKey);
+	return /* @__PURE__ */ jsxs(Toolbar.Root, {
+		classNames: ["gap-2", classNames],
+		children: [/* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--path--regular",
+			iconOnly: true,
+			label: t("start-icon.button"),
+			onClick: () => onAction?.("start")
+		}), /* @__PURE__ */ jsx(IconButton, {
+			icon: "ph--globe-hemisphere-west--regular",
+			iconOnly: true,
+			label: t("toggle-icon.button"),
+			onClick: () => onAction?.("toggle")
+		})]
+	});
+};
+//#endregion
+//#region src/components/Globe/Globe.tsx
+/**
+* https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
+*/
+var defaultStyles = {
+	light: {
+		background: { fillStyle: "#EEE" },
+		water: { fillStyle: "#555" },
+		land: { fillStyle: "#999" },
+		line: { strokeStyle: "darkred" },
+		point: {
+			fillStyle: "#111111",
+			strokeStyle: "#111111",
+			strokeWidth: 1,
+			pointRadius: .5
+		}
+	},
+	dark: {
+		background: { fillStyle: "#111111" },
+		water: { fillStyle: "#123E6A" },
+		land: { fillStyle: "#032153" },
+		line: { strokeStyle: "#111111" },
+		point: {
+			fillStyle: "#111111",
+			strokeStyle: "#111111",
+			strokeWidth: 1,
+			pointRadius: .5
+		}
+	}
+};
+var projectionMap = {
+	"orthographic": geoOrthographic,
+	"mercator": geoMercator,
+	"transverse-mercator": geoTransverseMercator
+};
+var getProjection = (type = "orthographic") => {
+	if (typeof type === "string") return (projectionMap[type] ?? geoOrthographic)();
+	return type ?? geoOrthographic();
+};
+var DEFAULT_ZOOM = 1.5;
+/**
+* Headless context/state provider for the globe. Renders no DOM; wrap a `Globe.Viewport` to mount
+* the measured container. The current `GlobeController` (built by `Globe.Canvas`) is exposed via
+* this component's `ref`.
+*/
+var GlobeRoot = forwardRef(({ children, center: centerProp, zoom: zoomProp = DEFAULT_ZOOM, translation: translationProp, rotation: rotationProp }, forwardedRef) => {
+	const [size, setSize] = useState({
+		width: 0,
+		height: 0
+	});
+	const [center, setCenter] = useControlledState(centerProp);
+	const [zoom, setZoom] = useControlledState(zoomProp);
+	const [translation, setTranslation] = useControlledState(translationProp);
+	const [rotation, setRotation] = useControlledState(rotationProp);
+	const [controller, setController] = useState(null);
+	const registerController = useCallback((next) => setController(next), []);
+	useImperativeHandle(forwardedRef, () => controller, [controller]);
+	return /* @__PURE__ */ jsx(GlobeContext.Provider, {
+		value: {
+			size,
+			center,
+			zoom,
+			translation,
+			rotation,
+			setSize,
+			setCenter,
+			setZoom,
+			setTranslation,
+			setRotation,
+			registerController
+		},
+		children
+	});
+});
+GlobeRoot.displayName = "Globe.Root";
+/**
+* Measured container for the globe. Renders the `relative dx-container` div, observes its size, and
+* publishes measurements to the context so `Globe.Canvas` can size the canvas.
+*/
+var GlobeViewport = composable(({ children, ...props }, forwardedRef) => {
+	const { setSize } = useGlobeContext();
+	const localRef = useRef(null);
+	const composedRef = useComposedRefs(localRef, forwardedRef);
+	const { width, height } = useResizeDetector({ targetRef: localRef });
+	useEffect(() => {
+		setSize({
+			width: width ?? 0,
+			height: height ?? 0
+		});
+	}, [
+		width,
+		height,
+		setSize
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...composableProps(props, { classNames: "relative dx-container" }),
+		ref: composedRef,
+		children
+	});
+});
+GlobeViewport.displayName = "Globe.Viewport";
+/**
+* Basic globe renderer. Builds the imperative `GlobeController` and registers it with `Globe.Root`
+* (via `registerController` from context) so consumers reading the controller from Root's ref get
+* the live instance.
+* https://github.com/topojson/world-atlas
+*/
+var GlobeCanvas = ({ projection: projectionProp, topology, features, styles: stylesProp }) => {
+	const { themeMode } = useThemeContext();
+	const styles = useMemo(() => stylesProp ?? defaultStyles[themeMode], [stylesProp, themeMode]);
+	const { size, center, zoom, translation, rotation, setZoom, setTranslation, setRotation, registerController } = useGlobeContext();
+	const zoomRef = useDynamicRef(zoom);
+	const [canvas, setCanvas] = useState(null);
+	const canvasRef = (canvas) => setCanvas(canvas);
+	const projection = useMemo(() => getProjection(projectionProp), [projectionProp]);
+	const layers = useMemo(() => {
+		return timer(() => createLayers(topology, features, styles));
+	}, [
+		topology,
+		features,
+		styles
+	]);
+	useEffect(() => {
+		if (center) setRotation(positionToRotation(geoToPosition(center)));
+	}, [center]);
+	const flyToSelection = useMemo(() => selection(), []);
+	const flyToTransitionName = `globe-fly-to-${useId()}`;
+	useEffect(() => () => {
+		flyToSelection.interrupt(flyToTransitionName);
+	}, [flyToSelection, flyToTransitionName]);
+	const zooming = useRef(false);
+	const controller = useMemo(() => {
+		return {
+			canvas,
+			projection,
+			get zoom() {
+				return zoomRef.current;
+			},
+			translation,
+			rotation,
+			setZoom: (state) => {
+				if (typeof state === "function") {
+					const is = interpolateNumber(zoomRef.current, state(zoomRef.current));
+					transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setZoom(is(t))).on("end", () => {
+						zooming.current = false;
+					});
+				} else setZoom(state);
+			},
+			setTranslation,
+			setRotation,
+			flyTo: (target, options = {}) => {
+				const { duration = 1200, tilt = 0, onTick } = options;
+				const p2 = geoToPosition(target);
+				const r1 = projection.rotate();
+				const r2 = positionToRotation(p2, tilt);
+				const p1 = [-r1[0], -r1[1]];
+				const rotationTween = createRotationTween(projection, setRotation, r1, r2);
+				const iz = target.zoom !== void 0 ? interpolateNumber(zoomRef.current, target.zoom) : void 0;
+				flyToSelection.interrupt(flyToTransitionName);
+				const tx = flyToSelection.transition(flyToTransitionName).duration(flyDuration(p1, p2, duration, 1500));
+				if (onTick) tx.tween("flyToOnTick", () => onTick);
+				tx.tween("flyToRotation", () => rotationTween);
+				if (iz) tx.tween("flyToZoom", () => (t) => setZoom(iz(t)));
+				return tx.end();
+			},
+			cancelFlyTo: () => {
+				flyToSelection.interrupt(flyToTransitionName);
+			}
+		};
+	}, [
+		canvas,
+		projection,
+		flyToSelection,
+		flyToTransitionName
+	]);
+	useEffect(() => {
+		registerController(controller);
+		return () => registerController(null);
+	}, [registerController, controller]);
+	const generator = useMemo(() => canvas && projection && geoPath(projection, canvas.getContext("2d")), [canvas, projection]);
+	useEffect(() => {
+		if (canvas && projection) timer(() => {
+			projection.scale(Math.min(size.width, size.height) / 2 * zoom).translate([size.width / 2 + (translation?.x ?? 0), size.height / 2 + (translation?.y ?? 0)]).rotate(rotation ?? [
+				0,
+				0,
+				0
+			]);
+			const isOrthographic = !projectionProp || projectionProp === "orthographic";
+			const [lambda, phi] = rotation ?? [
+				0,
+				0,
+				0
+			];
+			const viewCenter = isOrthographic ? [-lambda, -phi] : void 0;
+			renderLayers(generator, layers, zoom, styles, viewCenter);
+		});
+	}, [
+		generator,
+		size,
+		zoom,
+		translation,
+		rotation,
+		layers,
+		projectionProp
+	]);
+	if (!size.width || !size.height) return null;
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvasRef,
+		className: "bg-base-surface",
+		width: size.width,
+		height: size.height
+	});
+};
+GlobeCanvas.displayName = "Globe.Canvas";
+var GlobeDebug = ({ position = "topleft" }) => {
+	const { size, zoom, translation, rotation } = useGlobeContext();
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm", controlPositions[position]),
+		children: /* @__PURE__ */ jsx("pre", {
+			className: "font-mono text-xs text-green-700",
+			children: JSON.stringify({
+				size,
+				zoom,
+				translation,
+				rotation
+			}, null, 2)
+		})
+	});
+};
+var GlobePanel = ({ position, classNames, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames),
+		children
+	});
+};
+var CustomControl$1 = ({ position, children }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: mx("z-10 absolute overflow-hidden", controlPositions[position]),
+		children
+	});
+};
+var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ jsx(CustomControl$1, {
+	position,
+	...props,
+	children: /* @__PURE__ */ jsx(ZoomControls, { onAction })
+});
+var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ jsx(CustomControl$1, {
+	position,
+	...props,
+	children: /* @__PURE__ */ jsx(ActionControls, { onAction })
+});
+var Globe = {
+	Root: GlobeRoot,
+	Viewport: GlobeViewport,
+	Canvas: GlobeCanvas,
+	Zoom: GlobeZoom,
+	Action: GlobeAction,
+	Debug: GlobeDebug,
+	Panel: GlobePanel
+};
+//#endregion
+//#region src/components/Map/Map.tsx
+var defaults = {
+	center: {
+		lat: 51,
+		lng: 0
+	},
+	zoom: 4
+};
+var [MapContextProvider, useMapContext] = createContext$1("Map");
+/**
+* Context provider for the map. Must wrap Map.Viewport. The ref exposes a {@link MapController}.
+*/
+var MapRoot = forwardRef(({ children, onChange }, forwardedRef) => {
+	const mapRef = useRef(null);
+	const registerMap = useCallback((map) => {
+		mapRef.current = map;
+	}, []);
+	useImperativeHandle(forwardedRef, () => ({
+		getCenter: () => {
+			const center = mapRef.current?.getCenter();
+			return center ? {
+				lat: center.lat,
+				lng: center.lng
+			} : void 0;
+		},
+		getZoom: () => mapRef.current?.getZoom(),
+		setCenter: (center, zoom) => {
+			mapRef.current?.setView(center, zoom);
+		},
+		setZoom: (cb) => {
+			mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
+		}
+	}), []);
+	return /* @__PURE__ */ jsx(MapContextProvider, {
+		attention: false,
+		onChange,
+		registerMap,
+		children
+	});
+});
+MapRoot.displayName = "Map.Root";
+/**
+* https://react-leaflet.js.org/docs/api-map
+*/
+var MAP_VIEWPORT_NAME = "Map.Viewport";
+/**
+* Recalculates the leaflet map size when its container resizes (e.g. a companion
+* panel opening/closing). Without this, leaflet keeps its stale size and renders
+* blank/gray tiles in the newly-exposed area until the next pan/zoom. Coalesced
+* via rAF to avoid ResizeObserver feedback loops.
+*/
+var MapResize = () => {
+	const map = useMap();
+	useEffect(() => {
+		const container = map.getContainer();
+		let frame = 0;
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => map.invalidateSize());
+		});
+		observer.observe(container);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [map]);
+	return null;
+};
+/**
+* Enables pinch-to-zoom on trackpads / ctrl+wheel. Browsers deliver a trackpad pinch as a `wheel`
+* event with `ctrlKey` set; Leaflet only zooms those via `scrollWheelZoom`, which is intentionally
+* off here (so plain scrolling doesn't hijack the page). This handler zooms on the pinch gesture
+* only, leaving normal wheel scrolling untouched. (Touchscreen pinch is handled by Leaflet's
+* `touchZoom`.)
+*/
+var PINCH_ZOOM_SENSITIVITY = .03;
+var MapPinchZoom = () => {
+	const map = useMap();
+	useEffect(() => {
+		const container = map.getContainer();
+		let frame = 0;
+		let point;
+		let target;
+		const onWheel = (event) => {
+			if (!event.ctrlKey) return;
+			event.preventDefault();
+			const rect = container.getBoundingClientRect();
+			point = L.point(event.clientX - rect.left, event.clientY - rect.top);
+			target = (target ?? map.getZoom()) - event.deltaY * PINCH_ZOOM_SENSITIVITY;
+			if (!frame) frame = requestAnimationFrame(() => {
+				frame = 0;
+				if (target !== void 0 && point) {
+					map.setZoomAround(point, target, { animate: false });
+					target = void 0;
+				}
+			});
+		};
+		container.addEventListener("wheel", onWheel, { passive: false });
+		return () => {
+			container.removeEventListener("wheel", onWheel);
+			cancelAnimationFrame(frame);
+		};
+	}, [map]);
+	return null;
+};
+/**
+* Map.Viewport is the focusable Leaflet frame. It can be the target of a parent `<Panel.Content asChild>`
+* (Slot), so it reconciles an injected `className` via `composableProps`. Leaflet owns the underlying
+* container element, so the forwarded DOM ref can't be attached and is intentionally unused.
+*/
+var MapViewport = composable((props, _forwardedRef) => {
+	const { scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, whenReady, children, ...rest } = props;
+	const { attention, registerMap } = useMapContext(MAP_VIEWPORT_NAME);
+	const [map, setMap] = useState(null);
+	const setMapRef = useCallback((next) => {
+		setMap(next);
+		registerMap(next);
+	}, [registerMap]);
+	useEffect(() => {
+		if (!map) return;
+		if (attention) map.scrollWheelZoom.enable();
+		else map.scrollWheelZoom.disable();
+	}, [map, attention]);
+	return /* @__PURE__ */ jsxs(MapContainer, {
+		...composableProps(rest, { classNames: "dx-container group relative grid dx-focus-ring-inset bg-base-surface!" }),
+		attributionControl: false,
+		zoomControl: false,
+		scrollWheelZoom,
+		doubleClickZoom,
+		touchZoom,
+		zoomSnap: 0,
+		center: center ?? defaults.center,
+		zoom: zoom ?? defaults.zoom,
+		whenReady,
+		ref: setMapRef,
+		children: [
+			/* @__PURE__ */ jsx(MapResize, {}),
+			/* @__PURE__ */ jsx(MapPinchZoom, {}),
+			children
+		]
+	});
+});
+MapViewport.displayName = "Map.Viewport";
+var MAP_TILES_NAME = "Map.Tiles";
+/** Default OpenStreetMap raster tile template. */
+var DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+var MapTiles = ({ url = DEFAULT_TILE_URL }) => {
+	const ref = useRef(null);
+	const { onChange } = useMapContext(MAP_TILES_NAME);
+	useMapEvents({ moveend: (ev) => {
+		onChange?.({
+			center: ev.target.getCenter(),
+			zoom: ev.target.getZoom()
+		});
+	} });
+	const { attention } = useMapContext(MAP_TILES_NAME);
+	useEffect(() => {
+		if (ref.current) ref.current.getContainer().dataset.attention = attention ? "1" : "0";
+	}, [attention]);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TileLayer, {
+		ref,
+		"data-attention": attention,
+		detectRetina: true,
+		className: "dark:grayscale dark:invert data-[attention=\"0\"]:!opacity-80",
+		url,
+		keepBuffer: 4
+	}) });
+};
+MapTiles.displayName = MAP_TILES_NAME;
+var MapMarkers = ({ selected, markers, lines, onSelect }) => {
+	const map = useMap();
+	useEffect(() => {
+		const points = [...markers?.map((marker) => marker.location) ?? [], ...lines?.flatMap((line) => [line.source, line.target]) ?? []];
+		if (points.length > 0) {
+			const bounds = latLngBounds(points);
+			const size = map.getSize();
+			const padding = Math.max(48, Math.min(size.x, size.y) / 6);
+			map.fitBounds(bounds, {
+				padding: point(padding, padding),
+				animate: false
+			});
+		}
+	}, [
+		markers,
+		lines,
+		map
+	]);
+	return /* @__PURE__ */ jsx(Fragment, { children: markers?.map(({ id, title, location: { lat, lng } }) => {
+		return /* @__PURE__ */ jsx(Marker, {
+			position: {
+				lat,
+				lng
+			},
+			eventHandlers: onSelect ? { click: () => onSelect(id) } : void 0,
+			icon: new L.Icon({
+				iconUrl: "https://dxos.network/marker-icon.png",
+				iconRetinaUrl: "https://dxos.network/marker-icon-2x.png",
+				shadowUrl: "https://dxos.network/marker-shadow.png",
+				iconSize: [25, 41],
+				iconAnchor: [12, 41],
+				popupAnchor: [1, -34],
+				shadowSize: [41, 41]
+			}),
+			children: title && /* @__PURE__ */ jsx(Popup, { children: title })
+		}, id);
+	}) });
+};
+MapMarkers.displayName = "Map.Markers";
+var MapLines = ({ lines }) => {
+	if (!lines || lines.length === 0) return null;
+	const polylines = [];
+	for (const { source, target, color } of lines) {
+		const last = polylines[polylines.length - 1];
+		const lastPos = last?.positions[last.positions.length - 1];
+		if (last && last.color === color && lastPos?.lat === source.lat && lastPos?.lng === source.lng) last.positions.push(target);
+		else polylines.push({
+			positions: [source, target],
+			color
+		});
+	}
+	return /* @__PURE__ */ jsx(Fragment, { children: polylines.map(({ positions, color }, index) => /* @__PURE__ */ jsx(Polyline, {
+		positions,
+		pathOptions: {
+			color,
+			weight: 4,
+			opacity: .8
+		}
+	}, index)) });
+};
+MapLines.displayName = "Map.Lines";
+var CustomControl = ({ position, children }) => {
+	const map = useMap();
+	const rootRef = useRef(void 0);
+	useEffect(() => {
+		const control = new Control({ position });
+		control.onAdd = () => {
+			const container = DomUtil.create("div", mx("m-0!", controlPositions[position]));
+			DomEvent.disableClickPropagation(container);
+			DomEvent.disableScrollPropagation(container);
+			const root = createRoot(container);
+			rootRef.current = root;
+			root.render(/* @__PURE__ */ jsx(ThemeProvider, {
+				tx: defaultTx,
+				children: /* @__PURE__ */ jsx(Tooltip.Provider, { children })
+			}));
+			return container;
+		};
+		control.addTo(map);
+		return () => {
+			control.remove();
+			const root = rootRef.current;
+			rootRef.current = void 0;
+			queueMicrotask(() => root?.unmount());
+		};
+	}, [map, position]);
+	useEffect(() => {
+		rootRef.current?.render(/* @__PURE__ */ jsx(ThemeProvider, {
+			tx: defaultTx,
+			children: /* @__PURE__ */ jsx(Tooltip.Provider, { children })
+		}));
+	}, [children]);
+	return null;
+};
+var MapZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ jsx(CustomControl, {
+	position,
+	...props,
+	children: /* @__PURE__ */ jsx(ZoomControls, { onAction })
+});
+var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ jsx(CustomControl, {
+	position,
+	...props,
+	children: /* @__PURE__ */ jsx(ActionControls, { onAction })
+});
+var Map$1 = {
+	Root: MapRoot,
+	Viewport: MapViewport,
+	Tiles: MapTiles,
+	Markers: MapMarkers,
+	Lines: MapLines,
+	Zoom: MapZoom,
+	Action: MapAction
+};
+//#endregion
+export { ActionControls, DEFAULT_TILE_URL, Globe, GlobeContext, Map$1 as Map, ZoomControls, closestPoint, controlPositions, createLayers, createRotationTween, flyDuration, geoCircle, geoInertiaDrag, geoLine, geoPoint, geoToPosition, getDistance, globeStyles, positionToRotation, renderLayers, restrictAxis, timer, useDrag, useGlobeContext, useGlobeZoomHandler, useMapZoomHandler, useSimplifiedTopology, useSpinner, useTopology, useTour, useWheel };
+
+//# sourceMappingURL=index.mjs.map