@dxos/react-ui-geo 0.8.4-main.fd6878d → 0.8.4-staging.60fe92afc8

package/dist/lib/node-esm/index.mjs

@@ -1,46 +1,20 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 import {
   loadTopology
-} from "./chunk-JODBF4CC.mjs";
+} from "./chunk-VZENBYLJ.mjs";
 
 // src/components/Globe/Globe.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
-import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import { selection as d3Selection, easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
+import React2, { forwardRef, useCallback as useCallback3, useEffect as useEffect6, useId, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState4 } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
+import { useComposedRefs, useControlledState, useDynamicRef, useThemeContext } from "@dxos/react-ui";
+import { composable, composableProps } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
 
 // src/hooks/context.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React, { createContext, useContext } from "react";
+import { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
-import { useControlledState } from "@dxos/react-ui";
 var GlobeContext = /* @__PURE__ */ createContext(void 0);
-var GlobeContextProvider = ({ children, size, center: _center, zoom: _zoom, translation: _translation, rotation: _rotation }) => {
-  var _effect = _useSignals();
-  try {
-    const [center, setCenter] = useControlledState(_center);
-    const [zoom, setZoom] = useControlledState(_zoom);
-    const [translation, setTranslation] = useControlledState(_translation);
-    const [rotation, setRotation] = useControlledState(_rotation);
-    return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
-      value: {
-        size,
-        center,
-        zoom,
-        translation,
-        rotation,
-        setCenter,
-        setZoom,
-        setTranslation,
-        setRotation
-      }
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
 var useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error("Missing GlobeContext"));
 };
@@ -49,6 +23,18 @@ var useGlobeContext = () => {
 import { select as select2 } from "d3";
 import { useEffect } from "react";
 
+// src/util/animation.ts
+import { geoDistance } from "d3";
+import versor from "versor";
+var flyDuration = (p1, p2, base, scale) => Math.max(base, geoDistance(p1, p2) * scale);
+var createRotationTween = (projection, setRotation, r1, r2) => {
+  const iv = versor.interpolate(r1, r2);
+  return (t) => {
+    projection.rotate(iv(t));
+    setRotation(projection.rotate());
+  };
+};
+
 // src/util/debug.ts
 var debug = false;
 var timer = (cb) => {
@@ -66,7 +52,7 @@ var timer = (cb) => {
 
 // src/util/inertia.ts
 import { drag, select, timer as timer2 } from "d3";
-import versor from "versor";
+import versor2 from "versor";
 var restrictAxis = (axis) => (original, current) => current.map((d, i) => axis[i] ? d : original[i]);
 var geoInertiaDrag = (target, render, projection, options) => {
   if (!options) {
@@ -76,21 +62,23 @@ var geoInertiaDrag = (target, render, projection, options) => {
     target = target.node();
   }
   target = select(target);
-  const inertia = geoInertiaDragHelper({
+  const linear = (options.mode ?? "linear") === "linear";
+  const axis = restrictAxis(options.lockTilt ? [
+    true,
+    false,
+    false
+  ] : [
+    true,
+    true,
+    true
+  ]);
+  const sharedHandlers = {
     projection,
     render: (rotation) => {
       projection.rotate(rotation);
       render && render();
     },
-    axis: restrictAxis(options.xAxis ? [
-      true,
-      false,
-      false
-    ] : [
-      true,
-      true,
-      true
-    ]),
+    axis,
     start: options.start,
     move: options.move,
     end: options.end,
@@ -98,7 +86,12 @@ var geoInertiaDrag = (target, render, projection, options) => {
     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;
 };
@@ -113,9 +106,9 @@ var geoInertiaDragHelper = (opt) => {
   const inertia = inertiaHelper({
     axis: opt.axis,
     start: () => {
-      v0 = versor.cartesian(projection.invert(inertia.position));
+      v0 = versor2.cartesian(projection.invert(inertia.position));
       r0 = projection.rotate();
-      q0 = versor(r0);
+      q0 = versor2(r0);
       opt.start && opt.start();
     },
     move: () => {
@@ -123,23 +116,23 @@ var geoInertiaDragHelper = (opt) => {
       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 v1 = versor2.cartesian(inv);
+      const q1 = versor2.multiply(q0, versor2.delta(v0, v1));
+      const r1 = versor2.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));
+      v10 = versor2.cartesian(projection.invert(inertia.position.map((d, i) => d - inertia.velocity[i] / 1e3)));
+      q10 = versor2(projection.rotate());
+      v11 = versor2.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 r1 = versor2.rotation(versor2.multiply(q10, versor2.delta(v10, v11, t * 1e3)));
       const r2 = opt.axis(r0, r1);
       opt.render && opt.render(r2);
     },
@@ -147,6 +140,62 @@ var geoInertiaDragHelper = (opt) => {
   });
   return inertia;
 };
+var DEFAULT_LINEAR_SENSITIVITY = 0.25;
+var geoInertiaDragLinearHelper = (opt) => {
+  const projection = opt.projection;
+  const sensitivity = opt.sensitivity ?? DEFAULT_LINEAR_SENSITIVITY;
+  const gain = () => sensitivity / Math.max(opt.getZoom?.() ?? 1, 0.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;
@@ -250,9 +299,9 @@ var geoToPosition = ({ lat, lng }) => [
   lng,
   lat
 ];
-var geoPoint = (point) => ({
+var geoPoint = (point2) => ({
   type: "Point",
-  coordinates: geoToPosition(point)
+  coordinates: geoToPosition(point2)
 });
 var geoCircle = ({ lat, lng }, radius) => d3GeoCircle().radius(radius).center([
   lng,
@@ -277,11 +326,11 @@ var closestPoint = (points, target) => {
   }
   let closestPoint2 = points[0];
   let minDistance = getDistance(points[0], target);
-  for (const point of points) {
-    const distance = getDistance(point, target);
+  for (const point2 of points) {
+    const distance = getDistance(point2, target);
     if (distance < minDistance) {
       minDistance = distance;
-      closestPoint2 = point;
+      closestPoint2 = point2;
     }
   }
   return closestPoint2;
@@ -293,8 +342,48 @@ var getDistance = (point1, point2) => {
 };
 
 // src/util/render.ts
-import { geoGraticule } from "d3";
+import { geoBounds, geoCentroid, geoDistance as geoDistance2, geoGraticule } from "d3";
 import { feature, mesh } from "topojson-client";
+var RAD_TO_DEG = 180 / Math.PI;
+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 = geoDistance2(centroid, corner) * RAD_TO_DEG;
+    if (d > radius) {
+      radius = d;
+    }
+  }
+  return {
+    geometry,
+    centroid,
+    radius
+  };
+};
 var createLayers = (topology, features, styles) => {
   const layers = [];
   if (styles.water) {
@@ -315,11 +404,25 @@ var createLayers = (topology, features, styles) => {
     });
   }
   if (topology) {
-    if (topology.objects.land && styles.land) {
-      layers.push({
-        styles: styles.land,
-        path: feature(topology, topology.objects.land)
-      });
+    if (styles.land) {
+      if (topology.objects.countries) {
+        const fc = feature(topology, topology.objects.countries);
+        const memberGeoms = fc.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({
@@ -336,28 +439,28 @@ var createLayers = (topology, features, styles) => {
   }
   if (features) {
     const { points, lines } = features;
-    if (points && styles.point) {
+    if (lines && styles.line) {
       layers.push({
-        styles: styles.point,
+        styles: styles.line,
         path: {
           type: "GeometryCollection",
-          geometries: points.map((point) => geoPoint(point))
+          geometries: lines.map(({ source, target }) => geoLine(source, target))
         }
       });
     }
-    if (lines && styles.line) {
+    if (points && styles.point) {
       layers.push({
-        styles: styles.line,
+        styles: styles.point,
         path: {
           type: "GeometryCollection",
-          geometries: lines.map(({ source, target }) => geoLine(source, target))
+          geometries: points.map((point2) => geoPoint(point2))
         }
       });
     }
   }
   return layers;
 };
-var renderLayers = (generator, layers = [], scale, styles) => {
+var renderLayers = (generator, layers = [], scale, styles, viewCenter) => {
   const context = generator.context();
   const { canvas: { width, height } } = context;
   context.reset();
@@ -367,7 +470,8 @@ var renderLayers = (generator, layers = [], scale, styles) => {
   } else {
     context.clearRect(0, 0, width, height);
   }
-  layers.forEach(({ path, styles: styles2 }) => {
+  layers.forEach((layer) => {
+    const { path, styles: styles2, cullable } = layer;
     context.save();
     let fill = false;
     let stroke = false;
@@ -382,8 +486,23 @@ var renderLayers = (generator, layers = [], scale, styles) => {
         }
       });
     }
+    let renderPath = path;
+    if (cullable && viewCenter) {
+      const geometries = [];
+      for (let index = 0; index < cullable.length; index++) {
+        const bounds = cullable[index];
+        const angularDistance = geoDistance2(viewCenter, bounds.centroid) * RAD_TO_DEG;
+        if (angularDistance < 90 + bounds.radius) {
+          geometries.push(bounds.geometry);
+        }
+      }
+      renderPath = {
+        type: "GeometryCollection",
+        geometries
+      };
+    }
     context.beginPath();
-    generator(path);
+    generator(renderPath);
     fill && context.fill();
     stroke && context.stroke();
     context.restore();
@@ -391,6 +510,57 @@ var renderLayers = (generator, layers = [], scale, styles) => {
   return context;
 };
 
+// src/util/styles.ts
+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: 0.2,
+    fillStyle: POINT_COLOR
+  }
+} : {
+  water: {
+    fillStyle: "#C0DAE4"
+  },
+  land: {
+    fillStyle: "#C2D8B4",
+    strokeStyle: "#A6C291"
+  },
+  line: {
+    lineWidth: 1.5,
+    lineDash: [
+      4,
+      16
+    ],
+    strokeStyle: LINE_COLOR
+  },
+  point: {
+    radius: 0.2,
+    fillStyle: POINT_COLOR
+  }
+};
+
 // src/hooks/useDrag.ts
 var useDrag = (controller, options = {}) => {
   useEffect(() => {
@@ -398,14 +568,19 @@ var useDrag = (controller, options = {}) => {
     if (!canvas || options.disabled) {
       return;
     }
-    geoInertiaDrag(select2(canvas), () => {
+    const inertia = geoInertiaDrag(select2(canvas), () => {
       controller.setRotation(controller.projection.rotate());
       options.onUpdate?.({
         type: "move",
         controller
       });
     }, controller.projection, {
-      xAxis: options.xAxis,
+      lockTilt: options.lockTilt,
+      mode: options.mode,
+      sensitivity: options.sensitivity,
+      // Zoom-driven gain: matches useWheel — degrees-per-pixel shrinks as the
+      // globe gets larger on screen so the drag feel is consistent across zoom.
+      getZoom: () => controller.zoom,
       time: 3e3,
       start: () => options.onUpdate?.({
         type: "start",
@@ -418,6 +593,7 @@ var useDrag = (controller, options = {}) => {
     });
     return () => {
       cancelDrag(select2(canvas));
+      inertia?.timer?.stop();
     };
   }, [
     controller,
@@ -428,6 +604,7 @@ var cancelDrag = (node) => node.on(".drag", null);
 
 // src/hooks/useGlobeZoomHandler.ts
 import { useCallback } from "react";
+var ZOOM_FACTOR = 0.1;
 var useGlobeZoomHandler = (controller) => {
   return useCallback((event) => {
     if (!controller) {
@@ -435,11 +612,15 @@ var useGlobeZoomHandler = (controller) => {
     }
     switch (event) {
       case "zoom-in": {
-        controller.setZoom((zoom) => zoom * 1.1);
+        controller.setZoom((zoom) => {
+          return zoom * (1 + ZOOM_FACTOR);
+        });
         break;
       }
       case "zoom-out": {
-        controller.setZoom((zoom) => zoom * 0.9);
+        controller.setZoom((zoom) => {
+          return zoom * (1 - ZOOM_FACTOR);
+        });
         break;
       }
     }
@@ -470,6 +651,61 @@ var useMapZoomHandler = (controller) => {
   ]);
 };
 
+// src/hooks/useSimplifiedTopology.ts
+import { useMemo } from "react";
+import { presimplify, quantile, simplify } from "topojson-simplify";
+var DEFAULT_TIERS = [
+  {
+    minZoom: 0,
+    percentile: 0.95
+  },
+  {
+    minZoom: 2,
+    percentile: 0.85
+  },
+  {
+    minZoom: 4,
+    percentile: 0.6
+  },
+  {
+    minZoom: 7,
+    percentile: 0.3
+  },
+  {
+    minZoom: 12,
+    percentile: 0
+  }
+];
+var pickTier = (zoom, tiers) => {
+  let match = tiers[0];
+  for (const tier of tiers) {
+    if (zoom >= tier.minZoom) {
+      match = tier;
+    }
+  }
+  return match;
+};
+var useSimplifiedTopology = (topology, zoom, options = {}) => {
+  const { tiers = DEFAULT_TIERS } = options;
+  const presimplified = useMemo(() => topology ? presimplify(topology) : void 0, [
+    topology
+  ]);
+  const tier = pickTier(zoom, tiers);
+  return useMemo(() => {
+    if (!presimplified) {
+      return void 0;
+    }
+    if (tier.percentile <= 0) {
+      return presimplified;
+    }
+    const minWeight = quantile(presimplified, tier.percentile);
+    return simplify(presimplified, minWeight);
+  }, [
+    presimplified,
+    tier
+  ]);
+};
+
 // src/hooks/useSpinner.ts
 import { timer as d3Timer } from "d3";
 import { useEffect as useEffect2, useState } from "react";
@@ -523,91 +759,139 @@ var useSpinner = (controller, options = {}) => {
   ];
 };
 
+// src/hooks/useTopology.ts
+import { useEffect as useEffect3, useState as useState2 } from "react";
+import { log } from "@dxos/log";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-geo/src/hooks/useTopology.ts";
+var DEFAULT_TIERS2 = [
+  {
+    minZoom: 0,
+    level: "110m"
+  }
+];
+var pickTier2 = (zoom, tiers) => {
+  let match = tiers[0];
+  for (const tier of tiers) {
+    if (zoom >= tier.minZoom) {
+      match = tier;
+    }
+  }
+  return match;
+};
+var topologyCache = /* @__PURE__ */ new Map();
+var useTopology = (zoom, options = {}) => {
+  const { tiers = DEFAULT_TIERS2 } = options;
+  const level = zoom === void 0 ? "110m" : pickTier2(zoom, tiers).level;
+  const [topology, setTopology] = useState2(() => topologyCache.get(level));
+  useEffect3(() => {
+    const cached = topologyCache.get(level);
+    if (cached) {
+      setTopology(cached);
+      return;
+    }
+    let disposed = false;
+    void 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: 52, S: void 0 });
+      }
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [
+    level
+  ]);
+  return topology;
+};
+
 // src/hooks/useTour.ts
-import { selection as d3Selection, geoDistance, geoInterpolate, geoPath } from "d3";
-import { useEffect as useEffect3, useMemo, useState as useState2 } from "react";
-import versor2 from "versor";
-var TRANSITION_NAME = "globe-tour";
+import { geoInterpolate, geoPath } from "d3";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 var defaultDuration = 1500;
 var useTour = (controller, points, options = {}) => {
-  const selection = useMemo(() => d3Selection(), []);
-  const [running, setRunning] = useState2(options.running ?? false);
-  useEffect3(() => {
-    if (!running) {
-      selection.interrupt(TRANSITION_NAME);
+  const [running, setRunning] = useState3(options.running ?? false);
+  useEffect4(() => {
+    if (!controller || !running) {
       return;
     }
-    let t;
-    if (controller && running) {
-      t = setTimeout(async () => {
-        const { canvas, projection, setRotation } = controller;
-        const context = canvas.getContext("2d", {
-          alpha: false
-        });
-        const path = geoPath(projection, context).pointRadius(2);
-        const tilt = options.tilt ?? 0;
+    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;
-        try {
-          const p = [
-            ...points
-          ];
-          if (options.loop) {
-            p.push(p[0]);
+        for (const next of tourPoints) {
+          if (cancelled) {
+            break;
           }
-          for (const next of p) {
-            if (!running) {
-              break;
-            }
-            const p1 = last ? geoToPosition(last) : void 0;
-            const p2 = geoToPosition(next);
-            const ip = geoInterpolate(p1 || p2, p2);
-            const distance = geoDistance(p1 || p2, p2);
-            const r1 = p1 ? positionToRotation(p1, tilt) : controller.projection.rotate();
-            const r2 = positionToRotation(p2, tilt);
-            const iv = versor2.interpolate(r1, r2);
-            const transition2 = selection.transition(TRANSITION_NAME).duration(Math.max(options.duration ?? defaultDuration, distance * 2e3)).tween("render", () => (t2) => {
-              const t1 = Math.max(0, Math.min(1, t2 * 2 - 1));
-              const t22 = Math.min(1, t2 * 2);
-              context.save();
-              {
-                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(t22)
-                  ]
-                });
-                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(t22)
-                });
-                context.fill();
-              }
+          const p1 = last ? geoToPosition(last) : void 0;
+          const p2 = geoToPosition(next);
+          const ip = geoInterpolate(p1 ?? p2, p2);
+          const onTick = (t2) => {
+            const t1 = Math.max(0, Math.min(1, t2 * 2 - 1));
+            const t22 = Math.min(1, t2 * 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(t22)
+                ]
+              });
+              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(t22)
+              });
+              context.fill();
+            } finally {
               context.restore();
-              projection.rotate(iv(t2));
-              setRotation(projection.rotate());
-            });
-            await transition2.end();
-            last = next;
-          }
-        } catch {
-        } finally {
+            }
+          };
+          await controller.flyTo(next, {
+            duration: options.duration ?? defaultDuration,
+            tilt: options.tilt ?? 0,
+            onTick
+          });
+          last = next;
+        }
+      } catch {
+      } finally {
+        if (!cancelled) {
           setRunning(false);
         }
-      });
-      return () => {
-        clearTimeout(t);
-        selection.interrupt(TRANSITION_NAME);
-      };
-    }
+      }
+    });
+    return () => {
+      cancelled = true;
+      clearTimeout(t);
+      controller.cancelFlyTo();
+    };
   }, [
     controller,
     running,
@@ -619,10 +903,55 @@ var useTour = (controller, points, options = {}) => {
   ];
 };
 
+// src/hooks/useWheel.ts
+import { useEffect as useEffect5 } from "react";
+var DEFAULT_SENSITIVITY = 0.25;
+var DEFAULT_ZOOM_SENSITIVITY = 0.01;
+var useWheel = (controller, options = {}) => {
+  useEffect5(() => {
+    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, 0.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
+  ]);
+};
+
 // src/components/Toolbar/Controls.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2 from "react";
-import { IconButton, Toolbar } from "@dxos/react-ui";
+import React from "react";
+import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
+import { translationKey } from "#translations";
 var controlPositions = {
   topleft: "top-2 left-2",
   topright: "top-2 right-2",
@@ -630,58 +959,42 @@ var controlPositions = {
   bottomright: "bottom-2 right-2"
 };
 var ZoomControls = ({ classNames, onAction }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-      classNames: [
-        "gap-2",
-        classNames
-      ]
-    }, /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--plus--regular",
-      label: "zoom in",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("zoom-in")
-    }), /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--minus--regular",
-      label: "zoom out",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("zoom-out")
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement(Toolbar.Root, {
+    classNames: [
+      "gap-2",
+      classNames
+    ]
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--plus--regular",
+    iconOnly: true,
+    label: t("zoom-in-icon.button"),
+    onClick: () => onAction?.("zoom-in")
+  }), /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--minus--regular",
+    iconOnly: true,
+    label: t("zoom-out-icon.button"),
+    onClick: () => onAction?.("zoom-out")
+  }));
 };
 var ActionControls = ({ classNames, onAction }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
-      classNames: [
-        "gap-2",
-        classNames
-      ]
-    }, /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--play--regular",
-      label: "start",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("start")
-    }), /* @__PURE__ */ React2.createElement(IconButton, {
-      icon: "ph--globe-hemisphere-west--regular",
-      label: "toggle",
-      iconOnly: true,
-      size: 5,
-      classNames: "px-0 aspect-square",
-      onClick: () => onAction?.("toggle")
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement(Toolbar.Root, {
+    classNames: [
+      "gap-2",
+      classNames
+    ]
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--path--regular",
+    iconOnly: true,
+    label: t("start-icon.button"),
+    onClick: () => onAction?.("start")
+  }), /* @__PURE__ */ React.createElement(IconButton, {
+    icon: "ph--globe-hemisphere-west--regular",
+    iconOnly: true,
+    label: t("toggle-icon.button"),
+    onClick: () => onAction?.("toggle")
+  }));
 };
 
 // src/components/Globe/Globe.tsx
@@ -739,188 +1052,245 @@ var getProjection = (type = "orthographic") => {
   }
   return type ?? geoOrthographic();
 };
-var GlobeRoot = ({ classNames, children, ...props }) => {
-  var _effect = _useSignals3();
-  try {
-    const { ref, width, height } = useResizeDetector();
-    return /* @__PURE__ */ React3.createElement("div", {
-      ref,
-      className: mx("relative flex grow overflow-hidden", classNames)
-    }, /* @__PURE__ */ React3.createElement(GlobeContextProvider, {
-      size: {
-        width,
-        height
-      },
-      ...props
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: _projection, topology, features, styles: _styles }, forwardRef3) => {
-  var _effect = _useSignals3();
-  try {
-    const { themeMode } = useThemeContext();
-    const styles = useMemo2(() => _styles ?? defaultStyles[themeMode], [
-      _styles,
-      themeMode
-    ]);
-    const [canvas, setCanvas] = useState3(null);
-    const canvasRef = (canvas2) => setCanvas(canvas2);
-    const projection = useMemo2(() => getProjection(_projection), [
-      _projection
-    ]);
-    const layers = useMemo2(() => {
-      return timer(() => createLayers(topology, features, styles));
-    }, [
-      topology,
-      features,
-      styles
-    ]);
-    const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } = useGlobeContext();
-    const zoomRef = useDynamicRef(zoom);
-    useEffect4(() => {
-      if (center) {
-        setZoom(1);
-        setRotation(positionToRotation(geoToPosition(center)));
-      }
-    }, [
-      center
-    ]);
-    const zooming = useRef(false);
-    useImperativeHandle(forwardRef3, () => {
-      return {
-        canvas,
-        projection,
-        center,
-        get zoom() {
-          return zoomRef.current;
-        },
-        translation,
-        rotation,
-        setCenter,
-        setZoom: (s) => {
-          if (typeof s === "function") {
-            const is = interpolateNumber(zoomRef.current, s(zoomRef.current));
-            transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setZoom(is(t))).on("end", () => {
-              zooming.current = false;
-            });
-          } else {
-            setZoom(s);
-          }
-        },
-        setTranslation,
-        setRotation
-      };
-    }, [
-      canvas
-    ]);
-    const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
-      alpha: false
-    })), [
-      canvas,
-      projection
-    ]);
-    useEffect4(() => {
-      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
-          ]);
-          renderLayers(generator, layers, zoom, styles);
-        });
-      }
-    }, [
-      generator,
+var DEFAULT_ZOOM = 1.5;
+var GlobeRoot = /* @__PURE__ */ forwardRef(({ children, center: centerProp, zoom: zoomProp = DEFAULT_ZOOM, translation: translationProp, rotation: rotationProp }, forwardedRef) => {
+  const [size, setSize] = useState4({
+    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] = useState4(null);
+  const registerController = useCallback3((next) => setController(next), []);
+  useImperativeHandle(forwardedRef, () => controller, [
+    controller
+  ]);
+  return /* @__PURE__ */ React2.createElement(GlobeContext.Provider, {
+    value: {
       size,
+      center,
       zoom,
       translation,
       rotation,
-      layers
-    ]);
-    if (!size.width || !size.height) {
-      return null;
+      setSize,
+      setCenter,
+      setZoom,
+      setTranslation,
+      setRotation,
+      registerController
     }
-    return /* @__PURE__ */ React3.createElement("canvas", {
-      ref: canvasRef,
-      width: size.width,
-      height: size.height
+  }, children);
+});
+GlobeRoot.displayName = "Globe.Root";
+var GlobeViewport = composable(({ children, ...props }, forwardedRef) => {
+  const { setSize } = useGlobeContext();
+  const localRef = useRef(null);
+  const composedRef = useComposedRefs(localRef, forwardedRef);
+  const { width, height } = useResizeDetector({
+    targetRef: localRef
+  });
+  useEffect6(() => {
+    setSize({
+      width: width ?? 0,
+      height: height ?? 0
     });
-  } finally {
-    _effect.f();
-  }
+  }, [
+    width,
+    height,
+    setSize
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    ...composableProps(props, {
+      classNames: "relative dx-container"
+    }),
+    ref: composedRef
+  }, children);
 });
-var GlobeDebug = ({ position = "topleft" }) => {
-  var _effect = _useSignals3();
-  try {
-    const { size, zoom, translation, rotation } = useGlobeContext();
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
-    }, /* @__PURE__ */ React3.createElement("pre", {
-      className: "font-mono text-xs text-green-700"
-    }, JSON.stringify({
-      size,
-      zoom,
+GlobeViewport.displayName = "Globe.Viewport";
+var GlobeCanvas = ({ projection: projectionProp, topology, features, styles: stylesProp }) => {
+  const { themeMode } = useThemeContext();
+  const styles = useMemo2(() => stylesProp ?? defaultStyles[themeMode], [
+    stylesProp,
+    themeMode
+  ]);
+  const { size, center, zoom, translation, rotation, setZoom, setTranslation, setRotation, registerController } = useGlobeContext();
+  const zoomRef = useDynamicRef(zoom);
+  const [canvas, setCanvas] = useState4(null);
+  const canvasRef = (canvas2) => setCanvas(canvas2);
+  const projection = useMemo2(() => getProjection(projectionProp), [
+    projectionProp
+  ]);
+  const layers = useMemo2(() => {
+    return timer(() => createLayers(topology, features, styles));
+  }, [
+    topology,
+    features,
+    styles
+  ]);
+  useEffect6(() => {
+    if (center) {
+      setRotation(positionToRotation(geoToPosition(center)));
+    }
+  }, [
+    center
+  ]);
+  const flyToSelection = useMemo2(() => d3Selection(), []);
+  const flyToTransitionName = `globe-fly-to-${useId()}`;
+  useEffect6(() => () => {
+    flyToSelection.interrupt(flyToTransitionName);
+  }, [
+    flyToSelection,
+    flyToTransitionName
+  ]);
+  const zooming = useRef(false);
+  const controller = useMemo2(() => {
+    return {
+      canvas,
+      projection,
+      get zoom() {
+        return zoomRef.current;
+      },
       translation,
-      rotation
-    }, null, 2)));
-  } finally {
-    _effect.f();
+      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
+  ]);
+  useEffect6(() => {
+    registerController(controller);
+    return () => registerController(null);
+  }, [
+    registerController,
+    controller
+  ]);
+  const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d")), [
+    canvas,
+    projection
+  ]);
+  useEffect6(() => {
+    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__ */ React2.createElement("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__ */ React2.createElement("div", {
+    className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm", controlPositions[position])
+  }, /* @__PURE__ */ React2.createElement("pre", {
+    className: "font-mono text-xs text-green-700"
+  }, JSON.stringify({
+    size,
+    zoom,
+    translation,
+    rotation
+  }, null, 2)));
 };
 var GlobePanel = ({ position, classNames, children }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
+  }, children);
 };
 var CustomControl = ({ position, children }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement("div", {
-      className: mx("z-10 absolute overflow-hidden", controlPositions[position])
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement(CustomControl, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React3.createElement(ZoomControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var GlobeAction = ({ onAction, position = "bottomright", ...props }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement(CustomControl, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React3.createElement(ActionControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx("z-10 absolute overflow-hidden", controlPositions[position])
+  }, children);
 };
+var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
+  position,
+  ...props
+}, /* @__PURE__ */ React2.createElement(ZoomControls, {
+  onAction
+}));
+var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
+  position,
+  ...props
+}, /* @__PURE__ */ React2.createElement(ActionControls, {
+  onAction
+}));
 var Globe = {
   Root: GlobeRoot,
+  Viewport: GlobeViewport,
   Canvas: GlobeCanvas,
   Zoom: GlobeZoom,
   Action: GlobeAction,
@@ -929,16 +1299,15 @@ var Globe = {
 };
 
 // src/components/Map/Map.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import "leaflet/dist/leaflet.css";
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
-import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState4 } from "react";
+import L, { Control, DomEvent, DomUtil, point, latLngBounds } from "leaflet";
+import React3, { forwardRef as forwardRef2, useCallback as useCallback4, useEffect as useEffect7, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState5 } from "react";
 import { createRoot } from "react-dom/client";
-import { MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
-import { debounce } from "@dxos/async";
+import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx, mx as mx2 } from "@dxos/react-ui-theme";
+import { composable as composable2, composableProps as composableProps2, defaultTx } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
 var defaults = {
   center: {
     lat: 51,
@@ -946,237 +1315,341 @@ var defaults = {
   },
   zoom: 4
 };
-var [MapContextProvier, useMapContext] = createContext2("Map");
-var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center = defaults.center, zoom = defaults.zoom, onChange, ...props }, forwardedRef) => {
-  var _effect = _useSignals4();
-  try {
-    const [attention, setAttention] = useState4(false);
-    const mapRef = useRef2(null);
-    const map = mapRef.current;
-    useImperativeHandle2(forwardedRef, () => ({
-      setCenter: (center2, zoom2) => {
-        mapRef.current?.setView(center2, zoom2);
-      },
-      setZoom: (cb) => {
-        mapRef.current?.setZoom(cb(mapRef.current?.getZoom() ?? 0));
-      }
-    }), []);
-    useEffect5(() => {
-      if (!map) {
+var [MapContextProvider, useMapContext] = createContext2("Map");
+var MapRoot = /* @__PURE__ */ forwardRef2(({ children, onChange }, forwardedRef) => {
+  const mapRef = useRef2(null);
+  const registerMap = useCallback4((map) => {
+    mapRef.current = map;
+  }, []);
+  useImperativeHandle2(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));
+    }
+  }), []);
+  const attention = false;
+  return /* @__PURE__ */ React3.createElement(MapContextProvider, {
+    attention,
+    onChange,
+    registerMap
+  }, children);
+});
+MapRoot.displayName = "Map.Root";
+var MAP_VIEWPORT_NAME = "Map.Viewport";
+var MapResize = () => {
+  const map = useMap();
+  useEffect7(() => {
+    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;
+};
+var PINCH_ZOOM_SENSITIVITY = 0.03;
+var MapPinchZoom = () => {
+  const map = useMap();
+  useEffect7(() => {
+    const container = map.getContainer();
+    let frame = 0;
+    let point2;
+    let target;
+    const onWheel = (event) => {
+      if (!event.ctrlKey) {
         return;
       }
-      const handler = debounce(() => {
-        setAttention(true);
-        onChange?.({
-          center: map.getCenter(),
-          zoom: map.getZoom()
+      event.preventDefault();
+      const rect = container.getBoundingClientRect();
+      point2 = 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 && point2) {
+            map.setZoomAround(point2, target, {
+              animate: false
+            });
+            target = void 0;
+          }
         });
-      }, 100);
-      map.on("move", handler);
-      map.on("zoom", handler);
-      map.on("focus", () => setAttention(true));
-      map.on("blur", () => setAttention(false));
-      return () => {
-        map.off("move");
-        map.off("zoom");
-        map.off("focus");
-        map.off("blur");
-      };
-    }, [
-      map,
-      onChange
-    ]);
-    useEffect5(() => {
-      if (!map) {
-        return;
-      }
-      if (attention) {
-        map.scrollWheelZoom.enable();
-      } else {
-        map.scrollWheelZoom.disable();
       }
-    }, [
-      map,
-      attention
-    ]);
-    return /* @__PURE__ */ React4.createElement(MapContextProvier, {
-      attention
-    }, /* @__PURE__ */ React4.createElement(MapContainer, {
-      ...props,
-      ref: mapRef,
-      className: mx2("group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset", classNames),
-      attributionControl: false,
-      zoomControl: false,
-      scrollWheelZoom,
-      doubleClickZoom,
-      touchZoom,
-      center,
-      zoom
-    }));
-  } finally {
-    _effect.f();
-  }
+    };
+    container.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    return () => {
+      container.removeEventListener("wheel", onWheel);
+      cancelAnimationFrame(frame);
+    };
+  }, [
+    map
+  ]);
+  return null;
+};
+var MapViewport = composable2((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] = useState5(null);
+  const setMapRef = useCallback4((next) => {
+    setMap(next);
+    registerMap(next);
+  }, [
+    registerMap
+  ]);
+  useEffect7(() => {
+    if (!map) {
+      return;
+    }
+    if (attention) {
+      map.scrollWheelZoom.enable();
+    } else {
+      map.scrollWheelZoom.disable();
+    }
+  }, [
+    map,
+    attention
+  ]);
+  return /* @__PURE__ */ React3.createElement(MapContainer, {
+    ...composableProps2(rest, {
+      // Frame classes (formerly on Map.Root): focusable grid container.
+      classNames: "dx-container group relative grid dx-focus-ring-inset bg-base-surface!"
+    }),
+    attributionControl: false,
+    zoomControl: false,
+    scrollWheelZoom,
+    doubleClickZoom,
+    touchZoom,
+    // Allow fractional zoom so trackpad pinch (small ctrl+wheel deltas) isn't rounded away.
+    zoomSnap: 0,
+    center: center ?? defaults.center,
+    zoom: zoom ?? defaults.zoom,
+    whenReady,
+    ref: setMapRef
+  }, /* @__PURE__ */ React3.createElement(MapResize, null), /* @__PURE__ */ React3.createElement(MapPinchZoom, null), children);
 });
-MapRoot.displayName = "Map.Root";
-var MapTiles = (_props) => {
-  var _effect = _useSignals4();
-  try {
-    const ref = useRef2(null);
-    const { attention } = useMapContext(MapTiles.displayName);
-    useEffect5(() => {
-      if (ref.current) {
-        ref.current.getContainer().dataset.attention = attention ? "1" : "0";
-      }
-    }, [
-      attention
-    ]);
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(TileLayer, {
-      ref,
-      "data-attention": attention,
-      detectRetina: true,
-      className: 'dark:grayscale dark:invert data-[attention="0"]:!opacity-80',
-      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-      keepBuffer: 4
-    }));
-  } finally {
-    _effect.f();
-  }
+MapViewport.displayName = "Map.Viewport";
+var MAP_TILES_NAME = "Map.Tiles";
+var DEFAULT_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+var MapTiles = ({ url = DEFAULT_TILE_URL }) => {
+  const ref = useRef2(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);
+  useEffect7(() => {
+    if (ref.current) {
+      ref.current.getContainer().dataset.attention = attention ? "1" : "0";
+    }
+  }, [
+    attention
+  ]);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(TileLayer, {
+    ref,
+    "data-attention": attention,
+    detectRetina: true,
+    className: 'dark:grayscale dark:invert data-[attention="0"]:!opacity-80',
+    url,
+    keepBuffer: 4
+  }));
 };
-MapTiles.displayName = "Map.Tiles";
-var MapMarkers = ({ selected, markers }) => {
-  var _effect = _useSignals4();
-  try {
-    const map = useMap();
-    useEffect5(() => {
-      if (markers.length > 0) {
-        const bounds = latLngBounds(markers.map((marker) => marker.location));
-        map.fitBounds(bounds);
-      } else {
-        map.setView(defaults.center, defaults.zoom);
-      }
-    }, [
-      markers
-    ]);
-    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
-      return /* @__PURE__ */ React4.createElement(Marker, {
-        key: id,
-        position: {
-          lat,
-          lng
-        },
-        icon: (
-          // TODO(burdon): Create custom icon from bundled assets.
-          // TODO(burdon): Selection state.
-          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
-            ]
-          })
-        )
-      }, title && /* @__PURE__ */ React4.createElement(Popup, null, title));
-    }));
-  } finally {
-    _effect.f();
-  }
+MapTiles.displayName = MAP_TILES_NAME;
+var MapMarkers = ({ selected, markers, lines, onSelect }) => {
+  const map = useMap();
+  useEffect7(() => {
+    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__ */ React3.createElement(React3.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
+    return /* @__PURE__ */ React3.createElement(Marker, {
+      key: id,
+      position: {
+        lat,
+        lng
+      },
+      eventHandlers: onSelect ? {
+        click: () => onSelect(id)
+      } : void 0,
+      icon: (
+        // TODO(burdon): Create custom icon from bundled assets.
+        // TODO(burdon): Selection state.
+        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
+          ]
+        })
+      )
+    }, title && /* @__PURE__ */ React3.createElement(Popup, null, title));
+  }));
 };
 MapMarkers.displayName = "Map.Markers";
-var CustomControl2 = ({ position, children }) => {
-  var _effect = _useSignals4();
-  try {
-    const map = useMap();
-    useEffect5(() => {
-      const control = new Control({
-        position
-      });
-      control.onAdd = () => {
-        const container = DomUtil.create("div", mx2("!m-0", controlPositions[position]));
-        DomEvent.disableClickPropagation(container);
-        DomEvent.disableScrollPropagation(container);
-        const root = createRoot(container);
-        root.render(/* @__PURE__ */ React4.createElement(ThemeProvider, {
-          tx: defaultTx
-        }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, children)));
-        return container;
-      };
-      control.addTo(map);
-      return () => {
-        control.remove();
-      };
-    }, [
-      map,
-      position,
-      children
-    ]);
+var MapLines = ({ lines }) => {
+  if (!lines || lines.length === 0) {
     return null;
-  } finally {
-    _effect.f();
   }
-};
-var MapZoom = ({ onAction, position = "bottomleft", ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(CustomControl2, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React4.createElement(ZoomControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
+  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__ */ React3.createElement(React3.Fragment, null, polylines.map(({ positions, color }, index) => /* @__PURE__ */ React3.createElement(Polyline, {
+    key: index,
+    positions,
+    pathOptions: {
+      color,
+      weight: 4,
+      opacity: 0.8
+    }
+  })));
 };
-var MapAction = ({ onAction, position = "bottomright", ...props }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(CustomControl2, {
-      position,
-      ...props
-    }, /* @__PURE__ */ React4.createElement(ActionControls, {
-      onAction
-    }));
-  } finally {
-    _effect.f();
-  }
+MapLines.displayName = "Map.Lines";
+var CustomControl2 = ({ position, children }) => {
+  const map = useMap();
+  const rootRef = useRef2(void 0);
+  useEffect7(() => {
+    const control = new Control({
+      position
+    });
+    control.onAdd = () => {
+      const container = DomUtil.create("div", mx2("m-0!", controlPositions[position]));
+      DomEvent.disableClickPropagation(container);
+      DomEvent.disableScrollPropagation(container);
+      const root = createRoot(container);
+      rootRef.current = root;
+      root.render(/* @__PURE__ */ React3.createElement(ThemeProvider, {
+        tx: defaultTx
+      }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, children)));
+      return container;
+    };
+    control.addTo(map);
+    return () => {
+      control.remove();
+      const root = rootRef.current;
+      rootRef.current = void 0;
+      queueMicrotask(() => root?.unmount());
+    };
+  }, [
+    map,
+    position
+  ]);
+  useEffect7(() => {
+    rootRef.current?.render(/* @__PURE__ */ React3.createElement(ThemeProvider, {
+      tx: defaultTx
+    }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, children)));
+  }, [
+    children
+  ]);
+  return null;
 };
-var Map = {
+var MapZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl2, {
+  position,
+  ...props
+}, /* @__PURE__ */ React3.createElement(ZoomControls, {
+  onAction
+}));
+var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl2, {
+  position,
+  ...props
+}, /* @__PURE__ */ React3.createElement(ActionControls, {
+  onAction
+}));
+var Map2 = {
   Root: MapRoot,
+  Viewport: MapViewport,
   Tiles: MapTiles,
   Markers: MapMarkers,
+  Lines: MapLines,
   Zoom: MapZoom,
   Action: MapAction
 };
 export {
   ActionControls,
+  DEFAULT_TILE_URL,
   Globe,
-  GlobeContextProvider,
-  Map,
+  GlobeContext,
+  Map2 as Map,
   ZoomControls,
   closestPoint,
   controlPositions,
   createLayers,
+  createRotationTween,
+  flyDuration,
   geoCircle,
   geoInertiaDrag,
   geoLine,
   geoPoint,
   geoToPosition,
   getDistance,
-  loadTopology,
+  globeStyles,
   positionToRotation,
   renderLayers,
   restrictAxis,
@@ -1185,7 +1658,10 @@ export {
   useGlobeContext,
   useGlobeZoomHandler,
   useMapZoomHandler,
+  useSimplifiedTopology,
   useSpinner,
-  useTour
+  useTopology,
+  useTour,
+  useWheel
 };
 //# sourceMappingURL=index.mjs.map