@dxos/react-ui-geo 0.8.4-staging.ac66bdf99f → 0.9.0

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

@@ -1,14 +1,15 @@
 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 { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
-import React2, { 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 { useComposedRefs, useControlledState, useDynamicRef, useThemeContext } from "@dxos/react-ui";
-import { composable, composableProps, mx } from "@dxos/ui-theme";
+import { composable, composableProps } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
 
 // src/hooks/context.tsx
 import { createContext, useContext } from "react";
@@ -22,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) => {
@@ -39,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) {
@@ -49,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,
@@ -71,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;
 };
@@ -86,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: () => {
@@ -96,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);
     },
@@ -120,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;
@@ -223,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,
@@ -250,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;
@@ -266,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) {
@@ -288,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({
@@ -309,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();
@@ -340,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;
@@ -355,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();
@@ -364,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(() => {
@@ -371,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",
@@ -391,6 +593,7 @@ var useDrag = (controller, options = {}) => {
     });
     return () => {
       cancelDrag(select2(canvas));
+      inertia?.timer?.stop();
     };
   }, [
     controller,
@@ -448,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";
@@ -501,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,
@@ -597,26 +903,55 @@ var useTour = (controller, points, options = {}) => {
   ];
 };
 
-// src/components/Toolbar/Controls.tsx
-import React from "react";
-import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
-
-// src/translations.ts
-var translationKey = "@dxos/react-ui-geo";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "zoom-in-icon.button": "Zoom in",
-        "zoom-out-icon.button": "Zoom out",
-        "start-icon.button": "Start",
-        "toggle-icon.button": "Toggle"
-      }
+// 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 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",
@@ -717,45 +1052,72 @@ var getProjection = (type = "orthographic") => {
   }
   return type ?? geoOrthographic();
 };
-var GlobeRoot = composable(({ children, center: centerProp, zoom: zoomProp, translation: translationProp, rotation: rotationProp, ...props }, forwardedRef) => {
-  const localRef = useRef(null);
-  const composedRef = useComposedRefs(localRef, forwardedRef);
-  const { width, height } = useResizeDetector({
-    targetRef: localRef
+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 ?? 4);
+  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: {
-        width,
-        height
-      },
+      size,
       center,
       zoom,
       translation,
       rotation,
+      setSize,
       setCenter,
       setZoom,
       setTranslation,
-      setRotation
+      setRotation,
+      registerController
     }
-  }, /* @__PURE__ */ React2.createElement("div", {
+  }, 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
+    });
+  }, [
+    width,
+    height,
+    setSize
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
     ...composableProps(props, {
       classNames: "relative dx-container"
     }),
     ref: composedRef
-  }, children));
+  }, children);
 });
-var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topology, features, styles: stylesProp }, forwardRef3) => {
+GlobeViewport.displayName = "Globe.Viewport";
+var GlobeCanvas = ({ projection: projectionProp, topology, features, styles: stylesProp }) => {
   const { themeMode } = useThemeContext();
   const styles = useMemo2(() => stylesProp ?? defaultStyles[themeMode], [
     stylesProp,
     themeMode
   ]);
-  const [canvas, setCanvas] = useState3(null);
+  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
@@ -767,28 +1129,31 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
     features,
     styles
   ]);
-  const { size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation } = useGlobeContext();
-  const zoomRef = useDynamicRef(zoom);
-  useEffect4(() => {
+  useEffect6(() => {
     if (center) {
-      setZoom(1);
       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);
-  useImperativeHandle(forwardRef3, () => {
+  const controller = useMemo2(() => {
     return {
       canvas,
       projection,
-      center,
       get zoom() {
         return zoomRef.current;
       },
       translation,
       rotation,
-      setCenter,
       setZoom: (state) => {
         if (typeof state === "function") {
           const is = interpolateNumber(zoomRef.current, state(zoomRef.current));
@@ -800,18 +1165,51 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
         }
       },
       setTranslation,
-      setRotation
+      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
+    canvas,
+    projection,
+    flyToSelection,
+    flyToTransitionName
+  ]);
+  useEffect6(() => {
+    registerController(controller);
+    return () => registerController(null);
+  }, [
+    registerController,
+    controller
   ]);
-  const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d", {
-    alpha: false
-  })), [
+  const generator = useMemo2(() => canvas && projection && geoPath2(projection, canvas.getContext("2d")), [
     canvas,
     projection
   ]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (canvas && projection) {
       timer(() => {
         projection.scale(Math.min(size.width, size.height) / 2 * zoom).translate([
@@ -822,7 +1220,17 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
           0,
           0
         ]);
-        renderLayers(generator, layers, zoom, styles);
+        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);
       });
     }
   }, [
@@ -831,17 +1239,20 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
     zoom,
     translation,
     rotation,
-    layers
+    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", {
@@ -879,6 +1290,7 @@ var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PU
 }));
 var Globe = {
   Root: GlobeRoot,
+  Viewport: GlobeViewport,
   Canvas: GlobeCanvas,
   Zoom: GlobeZoom,
   Action: GlobeAction,
@@ -889,12 +1301,13 @@ var Globe = {
 // src/components/Map/Map.tsx
 import "leaflet/dist/leaflet.css";
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
-import React3, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2 } 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, useMapEvents } from "react-leaflet";
+import { MapContainer, Marker, Polyline, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { composable as composable2, composableProps as composableProps2, defaultTx, mx as mx2 } from "@dxos/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,
@@ -903,34 +1316,106 @@ var defaults = {
   zoom: 4
 };
 var [MapContextProvider, useMapContext] = createContext2("Map");
-var MapRoot = composable2(({ children, onChange, ...props }, forwardedRef) => {
-  const attention = false;
-  return /* @__PURE__ */ React3.createElement(MapContextProvider, {
-    attention,
-    onChange
-  }, /* @__PURE__ */ React3.createElement("div", {
-    ...composableProps2(props, {
-      role: "none",
-      classNames: "dx-container grid dx-focus-ring-inset"
-    }),
-    ref: forwardedRef
-  }, children));
-});
-MapRoot.displayName = "Map.Root";
-var MAP_CONTENT_NAME = "Map.Content";
-var MapContent = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props }, forwardedRef) => {
-  const { attention } = useMapContext(MAP_CONTENT_NAME);
+var MapRoot = /* @__PURE__ */ forwardRef2(({ children, onChange }, forwardedRef) => {
   const mapRef = useRef2(null);
-  const map = mapRef.current;
+  const registerMap = useCallback4((map) => {
+    mapRef.current = map;
+  }, []);
   useImperativeHandle2(forwardedRef, () => ({
-    setCenter: (center2, zoom2) => {
-      mapRef.current?.setView(center2, zoom2);
+    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));
     }
   }), []);
-  useEffect5(() => {
+  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;
+      }
+      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;
+          }
+        });
+      }
+    };
+    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;
     }
@@ -944,27 +1429,31 @@ var MapContent = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = tr
     attention
   ]);
   return /* @__PURE__ */ React3.createElement(MapContainer, {
-    ...props,
-    className: mx2("group relative grid bg-base-surface!", classNames),
+    ...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: mapRef
-  }, children);
+    whenReady,
+    ref: setMapRef
+  }, /* @__PURE__ */ React3.createElement(MapResize, null), /* @__PURE__ */ React3.createElement(MapPinchZoom, null), children);
 });
-MapContent.displayName = "Map.Content";
+MapViewport.displayName = "Map.Viewport";
 var MAP_TILES_NAME = "Map.Tiles";
-var MapTiles = (_props) => {
+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({
-    zoomstart: (ev) => {
+    moveend: (ev) => {
       onChange?.({
         center: ev.target.getCenter(),
         zoom: ev.target.getZoom()
@@ -972,7 +1461,7 @@ var MapTiles = (_props) => {
     }
   });
   const { attention } = useMapContext(MAP_TILES_NAME);
-  useEffect5(() => {
+  useEffect7(() => {
     if (ref.current) {
       ref.current.getContainer().dataset.attention = attention ? "1" : "0";
     }
@@ -984,22 +1473,34 @@ var MapTiles = (_props) => {
     "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",
+    url,
     keepBuffer: 4
   }));
 };
 MapTiles.displayName = MAP_TILES_NAME;
-var MapMarkers = ({ selected, markers }) => {
+var MapMarkers = ({ selected, markers, lines, onSelect }) => {
   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);
+  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
+    markers,
+    lines,
+    map
   ]);
   return /* @__PURE__ */ React3.createElement(React3.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
     return /* @__PURE__ */ React3.createElement(Marker, {
@@ -1008,6 +1509,9 @@ var MapMarkers = ({ selected, markers }) => {
         lat,
         lng
       },
+      eventHandlers: onSelect ? {
+        click: () => onSelect(id)
+      } : void 0,
       icon: (
         // TODO(burdon): Create custom icon from bundled assets.
         // TODO(burdon): Selection state.
@@ -1037,9 +1541,41 @@ var MapMarkers = ({ selected, markers }) => {
   }));
 };
 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__ */ React3.createElement(React3.Fragment, null, polylines.map(({ positions, color }, index) => /* @__PURE__ */ React3.createElement(Polyline, {
+    key: index,
+    positions,
+    pathOptions: {
+      color,
+      weight: 4,
+      opacity: 0.8
+    }
+  })));
+};
+MapLines.displayName = "Map.Lines";
 var CustomControl2 = ({ position, children }) => {
   const map = useMap();
-  useEffect5(() => {
+  const rootRef = useRef2(void 0);
+  useEffect7(() => {
     const control = new Control({
       position
     });
@@ -1048,6 +1584,7 @@ var CustomControl2 = ({ position, children }) => {
       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)));
@@ -1056,10 +1593,19 @@ var CustomControl2 = ({ position, children }) => {
     control.addTo(map);
     return () => {
       control.remove();
+      const root = rootRef.current;
+      rootRef.current = void 0;
+      queueMicrotask(() => root?.unmount());
     };
   }, [
     map,
-    position,
+    position
+  ]);
+  useEffect7(() => {
+    rootRef.current?.render(/* @__PURE__ */ React3.createElement(ThemeProvider, {
+      tx: defaultTx
+    }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, children)));
+  }, [
     children
   ]);
   return null;
@@ -1076,41 +1622,46 @@ var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE
 }, /* @__PURE__ */ React3.createElement(ActionControls, {
   onAction
 }));
-var Map = {
+var Map2 = {
   Root: MapRoot,
-  Content: MapContent,
+  Viewport: MapViewport,
   Tiles: MapTiles,
   Markers: MapMarkers,
+  Lines: MapLines,
   Zoom: MapZoom,
   Action: MapAction
 };
 export {
   ActionControls,
+  DEFAULT_TILE_URL,
   Globe,
   GlobeContext,
-  Map,
+  Map2 as Map,
   ZoomControls,
   closestPoint,
   controlPositions,
   createLayers,
+  createRotationTween,
+  flyDuration,
   geoCircle,
   geoInertiaDrag,
   geoLine,
   geoPoint,
   geoToPosition,
   getDistance,
-  loadTopology,
+  globeStyles,
   positionToRotation,
   renderLayers,
   restrictAxis,
   timer,
-  translationKey,
-  translations,
   useDrag,
   useGlobeContext,
   useGlobeZoomHandler,
   useMapZoomHandler,
+  useSimplifiedTopology,
   useSpinner,
-  useTour
+  useTopology,
+  useTour,
+  useWheel
 };
 //# sourceMappingURL=index.mjs.map